@layer measure, tap;

/* A plate the build filled with a real photograph. The family's own container
   keeps its size, its corners and any mask it applies; the picture is sized to
   fill that box rather than the box being resized to the picture, so placing a
   photograph never changes the composition. In its own layer so a family that
   wants different behaviour simply wins. */


@font-face{font-family:"Lora Variable";src:url("./fonts/lora-latin-wght-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Urbanist Variable";src:url("./fonts/urbanist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("./fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}

:root{
  --ink:#1c1e23;
  --paper:#f6f4ee;
  --deep:#181b21;
  --deep-ink:#efede6;
  --accent:#7a2f35;
  --accent-ink:#fbf3f2;
  --accent-ink-raw:#fbf3f2;
  --muted:#5f6268;
  --muted-deep:#84868c;
  --muted-ink:#84868c;
  --muted-tint:#5f6268;
  --muted-raw:#6c6f76;
  --accent-read:#7a2f35;
  --accent-read-deep:#aa7a7e;
  --accent-read-ink:#aa7a7e;
  --hairline:rgba(28,30,35,.13);
  --hair-strong:rgba(28,30,35,0.34);
  /* The paper values again under stable names, so a light card nested in a dark
     section can put back what it inherited (see deepGroundFix). */
  --muted-paper:#5f6268;
  --accent-read-paper:#7a2f35;
  --hairline-raw:rgba(28,30,35,.13);
  --hair-strong-raw:rgba(28,30,35,0.34);
  --tint-1:#eceae5;
  --tint-2:#e2e1dc;
  --deep-tint:#292c31;
  --accent-soft:rgba(122,47,53,0.14);

  --ff-display:"Lora Variable", Georgia, "Times New Roman", serif;
  --ff-body:"Urbanist Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-accent:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-display:600;
  --fw-body:400;
  --tr-display:-0.015em;
  --measure:70ch;
  --measure-cap:74ch;

  --fs--2: clamp(0.698rem, 0.572rem + 0.00vw, 0.698rem);
  --fs--1: clamp(0.886rem, 0.726rem + 0.00vw, 0.886rem);
  --fs-0: clamp(1.125rem, 0.922rem + 0.00vw, 1.125rem);
  --fs-1: clamp(1.200rem, 0.984rem + 0.62vw, 1.429rem);
  --fs-2: clamp(1.234rem, 1.012rem + 1.24vw, 1.815rem);
  --fs-3: clamp(1.337rem, 1.096rem + 1.86vw, 2.304rem);
  --fs-4: clamp(1.697rem, 1.392rem + 2.48vw, 2.927rem);
  --fs-5: clamp(2.156rem, 1.768rem + 3.10vw, 3.717rem);
  --fs-6: clamp(2.738rem, 2.245rem + 3.72vw, 4.720rem);
  --fs-7: clamp(3.477rem, 2.851rem + 4.34vw, 5.995rem);

  --u:9px;
  --gap:calc(var(--u) * 3);
  --section-y-base:clamp(3.1rem, 5.6vw + 1.5rem, 6.2rem);
  --section-y:var(--section-y-base);
  --page:1180px;
  --gutter:clamp(18px, 4.2vw, 46px);
  --r1:6px;--r2:10px;--r3:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.45s;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:var(--fw-body);
  font-size:var(--fs-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:var(--fw-display);
  letter-spacing:var(--tr-display);
  line-height:1.02;
  
  text-wrap:balance;
}
p{text-wrap:pretty}

.shell{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.wide{width:100%;max-width:calc(var(--page) + 200px);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}

.eyebrow{
  font-family:var(--ff-accent);
  font-size:var(--fs--2);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}

.ic{flex:none}

/* focus that is visible on both paper and deep surfaces */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper);padding:12px 18px;
}
.skip:focus{left:8px;top:8px}

/* --- motion: opt-in, reveal-on-scroll, fully disabled when asked --- */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
[data-reveal][data-reveal-delay="1"].is-in{transition-delay:.07s}
[data-reveal][data-reveal-delay="2"].is-in{transition-delay:.14s}
[data-reveal][data-reveal-delay="3"].is-in{transition-delay:.21s}
[data-reveal][data-reveal-delay="4"].is-in{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* --- measure: no line of running text may run to 200 characters ---
   Paragraphs only. li and dd are layout containers as often as they are prose
   — capping them collapsed three section grids to 60% of the page the first
   time this shipped — so they are left to the family that laid them out. */
@layer measure{
  p,.demo-form output{max-width:min(100%,var(--measure-cap))}
}

/* --- tap targets ---
   Touch-sized hit areas for navigation furniture, up to 900px — a tablet is a
   touch device even though it is not a phone. Declared in the lowest
   cascade layer on purpose: a family's own responsive rules are unlayered, so
   its display:none at mobile still wins and the kit can never resurrect a
   control the family deliberately hid. */
@layer tap{
  @media (max-width:900px){
    :where(header,nav,footer,[data-menu],[data-navbar],[data-sbar]) :is(a[href],button,summary,[role="button"]){
      min-height:44px;
      min-width:2.75rem;
      display:inline-flex;
      align-items:center;
    }
    :where(header,nav,footer,[data-menu],[data-navbar],[data-sbar]) :is(a[href],button):has(>svg){
      min-width:44px;
      justify-content:center;
    }
    /* A phone number or email address is a primary action wherever it sits,
       so it earns a full hit area even outside the navigation. */
    :is(a[href^="tel:"],a[href^="mailto:"]):not(:where(p,dd) *){
      min-height:44px;
      display:inline-flex;
      align-items:center;
    }
  }
}

/* --- preview banner: every prospect site must say what it is --- */
.preview-note{
  background:var(--ink);color:var(--paper);
  font-family:var(--ff-accent);font-size:12px;line-height:1.45;
  letter-spacing:.02em;
  padding:10px var(--gutter);
  display:flex;gap:10px;align-items:baseline;justify-content:center;
  text-align:center;flex-wrap:wrap;
  position:relative;z-index:60;
}
.preview-note b{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.preview-note span{opacity:.82;max-width:54ch}

/* --- demo-safe forms: nothing is collected or sent --- */
.demo-form output{display:block;font-size:var(--fs--1);color:var(--muted);margin-top:calc(var(--u)*1.5)}
.demo-form output:empty{display:none}

.hours-tbl{border-collapse:collapse;margin:clamp(20px,2.4vw,30px) 0 0;min-width:min(100%,264px);
  font-variant-numeric:tabular-nums;text-align:left;color:inherit}
.hours-tbl caption{text-align:left;font-family:var(--ff-accent);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:9px;color:inherit}
.hours-tbl th{text-align:left;font-weight:400;font-family:var(--ff-accent);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 26px 8px 0;white-space:nowrap;
  border-top:1px solid color-mix(in srgb, currentColor 22%, transparent);color:inherit}
.hours-tbl td{text-align:right;font-size:.9rem;padding:8px 0;color:inherit;
  border-top:1px solid color-mix(in srgb, currentColor 22%, transparent)}


/* ============ CLASSIC PREMIUM ============ */

body{background:var(--paper);background-image:url("./assets/laid.svg");background-size:640px;color:var(--ink)}
::selection{background:rgba(122,47,53,0.22)}
/* sections that ARE the layout keep the shell's measure without the extra wrapper */
.front,.firm,.works,.qs{width:100%;
  padding-inline:max(var(--gutter),calc((100% - var(--page))/2 + var(--gutter)))}

/* the kit caps running text at 74ch; these list items are structural, not prose */
.eng-frame>li,.area-cols>li,.front-index,.front-index>li{max-width:none}

/* --- shared rules + overlines --- */
/* Two-colour letterpress: the heavy rule stays ink, the companion hairline
   is the spot colour. It is the one place this family spends its accent at
   full strength, and without it two palettes of it screenshot identically. */
.rule2{display:block;height:5px;border-top:2px solid var(--ink);border-bottom:1.5px solid var(--accent-read)}
.rule2--inv{border-top-color:rgba(239,237,230,0.72);border-bottom-color:var(--accent-read-deep)}
.over{font-family:var(--ff-accent);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(28,30,35,0.72);font-weight:600}
.over--inv{color:rgba(239,237,230,0.68)}
.head2{padding-block:var(--section-y) clamp(22px,2.6vw,38px);display:grid;gap:12px}
.head2 .over{color:var(--accent-read)}
.head2 .rule2{margin-top:2px}
.head2-note{font-size:var(--fs-1);color:#505154;max-width:52ch;font-style:italic;margin-top:4px}

/* --- centred split masthead --- */
.mast{position:sticky;top:0;z-index:50;background:rgba(246,244,238,0.97);backdrop-filter:blur(6px)}
.mast-top{height:6px;background:var(--ink)}
.mast-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2.4vw,36px);
  padding-block:clamp(12px,1.6vw,20px);border-bottom:1px solid rgba(28,30,35,0.2)}
.mast .mast-nav{display:flex;gap:clamp(10px,1.8vw,26px);flex-wrap:wrap}
.mast-nav--l{justify-content:flex-start}
.mast-nav--r{justify-content:flex-end}
.mast .mast-nav a{font-family:var(--ff-accent);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:#505154;padding:6px 0;white-space:nowrap;transition:color .25s var(--ease)}
.mast .mast-nav a:hover{color:var(--accent-read)}
.mast .wordmark{display:grid;justify-items:center;gap:4px;text-decoration:none;text-align:center;padding:2px 0}
.wordmark-n{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:clamp(1.1rem,2.2vw,1.6rem);
  letter-spacing:-.01em;line-height:1.04}
.wordmark-s{font-family:var(--ff-accent);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(28,30,35,0.72)}
.mast .mast-burger{display:none;width:44px;height:44px;place-items:center;justify-self:end}
.mast-strip{border-bottom:1px solid rgba(28,30,35,0.2);background:#eeede7}
.mast-strip-in{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;padding-block:8px}
.mast-strip span,.mast-strip a{font-family:var(--ff-accent);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(28,30,35,0.72);text-decoration:none}
.mast-strip a{color:var(--accent-read)}

/* --- masthead II: flush --- */
/* Wordmark hard left, one wide rank of links, the telephone at the right
   margin. No rule over the top and no strip under it -- the masthead is a
   single line and the page starts immediately. */
.mast-in--flush{grid-template-columns:auto minmax(0,1fr) auto;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.mast--flush .wordmark{justify-items:start;text-align:left}
.mast-nav--wide{justify-content:center;column-gap:clamp(12px,2.2vw,30px)!important}
.mast-tel{font-family:var(--ff-accent);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--accent-read);white-space:nowrap;justify-self:end}

/* --- masthead III: stacked --- */
/* The name stands alone over a numbered rank of links, the way a prospectus
   lists its own contents on the cover. */
.mast-in--stacked{grid-template-columns:minmax(0,1fr) auto;border-bottom:0;
  padding-bottom:clamp(8px,1.1vw,14px)}
.mast--stacked .wordmark{justify-items:start;text-align:left}
.mast-place{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(28,30,35,0.72);justify-self:end;max-width:none}
.mast-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px clamp(14px,2.4vw,30px);padding-bottom:clamp(9px,1.2vw,14px);
  border-top:1px solid rgba(28,30,35,0.13);border-bottom:2px solid var(--ink);padding-top:clamp(8px,1vw,12px)}
.mast-nav--row{column-gap:clamp(12px,2.2vw,28px)!important;row-gap:4px}
.mast .mast-nav--row a{display:inline-flex;align-items:baseline;gap:7px}
.mast-nav--row em{font-style:normal;font-size:8.5px;letter-spacing:.1em;color:var(--accent-read)}

.drawer{position:fixed;inset:0;z-index:49;background:var(--deep);color:var(--deep-ink);
  display:none;flex-direction:column;justify-content:center;gap:10px;padding:110px var(--gutter) 40px;text-align:center}
.drawer[data-open]{display:flex}
.drawer nav{display:grid;gap:4px}
.drawer nav a{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:clamp(1.5rem,7vw,2.3rem);
  text-decoration:none;padding:10px 0;letter-spacing:-.01em;justify-content:center}
.drawer-tel{margin-top:22px;font-family:var(--ff-accent);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-read-deep);text-decoration:none;justify-content:center}

/* --- front page --- */
.front{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.92fr);
  column-gap:clamp(22px,4vw,64px);row-gap:0;align-items:start;
  padding-top:clamp(22px,3vw,44px);padding-bottom:clamp(26px,3.4vw,48px)}
.front>.front-slug,.front>.rule2,.front>.front-index{grid-column:1/-1}
.front-slug{text-align:center;font-family:var(--ff-accent);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(28,30,35,0.72);padding-bottom:12px}
.front-copy{border-right:1px solid rgba(28,30,35,0.13);padding-right:clamp(0px,3vw,48px);
  padding-block:clamp(26px,3.6vw,54px)}
/* The broadsheet opening was set smaller than the broadsheet it is named
   after would ever set a front page. */
.front-h{font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:1.0;letter-spacing:-.022em;max-width:16ch;
  overflow-wrap:break-word}
.front-lead{margin-top:clamp(18px,2.2vw,28px);font-size:var(--fs-1);line-height:1.62;color:#505154;max-width:52ch}
.front-act{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:clamp(22px,2.6vw,34px)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);
  padding:15px 26px;border-radius:var(--r1);font-family:var(--ff-accent);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;min-height:48px;border:0;
  transition:background .25s var(--ease)}
.btn:hover{background:var(--accent);color:var(--accent-ink)}
.btn-quiet{display:inline-flex;align-items:center;gap:9px;font-size:1rem;text-decoration:none;
  border-bottom:1px solid rgba(28,30,35,0.2);padding:10px 0;transition:border-color .25s var(--ease)}
.btn-quiet:hover{border-bottom-color:var(--ink)}
.front-ledger{background:#edebe6;border:1px solid rgba(28,30,35,0.2);border-radius:var(--r2);
  padding:clamp(18px,2vw,26px);margin-block:clamp(26px,3.6vw,54px)}
.ledger-cap{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(28,30,35,0.72);padding-bottom:12px;border-bottom:1px solid rgba(28,30,35,0.13);margin-bottom:6px}
.front-ledger dl{display:grid;margin:0}
.front-ledger>dl>div{display:grid;grid-template-columns:minmax(76px,auto) minmax(0,1fr);gap:4px 16px;
  padding-block:11px;border-bottom:1px solid rgba(28,30,35,0.13)}
.front-ledger>dl>div:last-child{border-bottom:0;padding-bottom:0}
.front-ledger dt{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(28,30,35,0.72);padding-top:.28em}
.front-ledger dd{margin:0;font-size:.92rem;line-height:1.45;min-width:0;overflow-wrap:anywhere}
/* A practice with no project list used to leave this column half empty and
   the page with no picture on it at all. The plate is drawn artwork and the
   caption says so; a photograph the owner supplies replaces it in place. */
.front-plate{margin:clamp(18px,2.2vw,28px) 0 0;display:grid;gap:9px}
.front-plate-art{aspect-ratio:3/4;border:1px solid rgba(28,30,35,0.2);background:#efeee8}
.front-plate figcaption{font-family:var(--ff-accent);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}
.front-index{display:flex;flex-wrap:wrap;gap:6px 0;padding-top:14px;justify-content:center;
  list-style:none;padding-inline:0;margin:0}
.front-index li{font-family:var(--ff-accent);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(28,30,35,0.72);padding:0 14px;position:relative}
.front-index li + li::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:1px;background:rgba(28,30,35,0.2)}

/* --- front page, setting II: banded --- */
/* One column. The statement is centred and the standing facts run across
   under it as a band, so the page opens on the claim rather than the ledger. */
.front--band{display:block;text-align:center;padding-bottom:clamp(30px,3.8vw,54px)}
.front-head{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px 22px;
  padding-bottom:12px}
.front-head .front-slug{text-align:left;padding-bottom:0}
.front-head .front-slug--r{text-align:right}
.front--band .front-h{max-width:20ch;margin-inline:auto;font-size:clamp(2.2rem,6.4vw,4.9rem);
  padding-top:clamp(26px,3.6vw,52px)}
.front--band .front-lead--c{margin-inline:auto;text-align:center;max-width:54ch}
.front--band .front-act{justify-content:center;margin-bottom:clamp(26px,3.4vw,46px)}
.front-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:0;margin:0;padding-top:clamp(14px,1.8vw,22px);text-align:left}
.front-band>div{display:grid;gap:5px;align-content:start;min-width:0;
  padding:clamp(12px,1.6vw,18px) clamp(14px,2vw,24px);border-left:1px solid rgba(28,30,35,0.13)}
.front-band>div:first-child{border-left:0;padding-left:0}
.front-band dt{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(28,30,35,0.72)}
.front-band dd{margin:0;font-size:.92rem;line-height:1.5;min-width:0;overflow-wrap:anywhere}

/* --- front page, setting III: prospectus --- */
/* The ledger leads. The statement sits to its right and a numbered table of
   contents closes the front, so the eye enters on the facts. */
.front--pros{display:flex;flex-wrap:wrap;align-items:flex-start;
  column-gap:clamp(22px,4vw,64px);row-gap:0;
  padding-top:clamp(26px,3.4vw,50px);padding-bottom:clamp(30px,3.8vw,54px)}
.front--pros>.front-ledger--lead{flex:1 1 clamp(230px,28%,340px)}
.front--pros>.front-copy--pros{flex:4 1 min(100%,420px)}
.front--pros>.front-toc{flex:1 1 100%}
.front-ledger--lead{display:grid;align-content:start;margin-top:0;margin-bottom:0}
.front-copy--pros{border-right:0;border-left:1px solid rgba(28,30,35,0.13);padding-right:0;
  padding-left:clamp(0px,3vw,48px);padding-block:0}
.front-copy--pros .front-slug{text-align:left;padding-bottom:10px}
.front-h--tight{font-size:clamp(2.1rem,5.6vw,4.7rem);max-width:17ch;padding-top:clamp(14px,1.8vw,24px)}
.front-toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:0 clamp(24px,4vw,52px);margin:clamp(24px,3.2vw,44px) 0 0;padding:0;list-style:none;
  border-top:2px solid var(--ink)}
.front-toc>li{display:flex;align-items:baseline;gap:14px;padding-block:clamp(11px,1.4vw,15px);
  border-bottom:1px solid rgba(28,30,35,0.13);font-size:1rem;line-height:1.35}
.front-toc em{font-family:var(--ff-accent);font-style:normal;font-size:10px;letter-spacing:.14em;
  color:rgba(28,30,35,0.72);min-width:2.2em;flex:0 0 auto}

/* --- the firm --- */
/* The tonal band. The tint() helper in render puts it on one mid-page section, so two
   firms on this family do not carry their weight in the same place. The band
   is a shade of the paper, never a dark ground: this family goes dark only at
   the close. */
[data-band]{background:#eceae5;border-block:1px solid rgba(28,30,35,0.2)}
.svc[data-band],.cred[data-band],.area[data-band]{padding-block:var(--section-y)}
.firm{display:flex;flex-direction:row;align-items:flex-start;gap:clamp(18px,4vw,64px);
  padding-block:var(--section-y)}
.firm-side{flex:0 0 clamp(110px,16%,210px);display:grid;gap:14px;align-content:start}
.firm-body{flex:1 1 auto;min-width:0}
.firm-rule{display:block;width:50px;height:2px;background:var(--accent)}
.firm-body{display:grid;gap:1em}
.firm-body p{font-size:var(--fs-0);line-height:1.68;color:#505154;max-width:54ch}
.firm-body .firm-lede{font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:clamp(1.3rem,2.9vw,2.15rem);line-height:1.28;letter-spacing:-.018em;
  max-width:28ch;color:var(--ink)}
/* A lede capped at 28ch is a lede only when paragraphs follow it. Standing
   alone it leaves half the band empty, so it is set as a statement instead. */
.firm-body .firm-lede:only-child{max-width:20ch;
  font-size:clamp(1.5rem,4.2vw,3.05rem);line-height:1.16;letter-spacing:-.022em}

/* --- services: two-column prospectus --- */
.svc{padding-bottom:0}
.prospectus{columns:2;column-gap:clamp(30px,5vw,74px);column-rule:1px solid rgba(28,30,35,0.13)}
.entry{break-inside:avoid;-webkit-column-break-inside:avoid;padding-bottom:clamp(24px,3vw,40px)}
.entry h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.2;letter-spacing:-.015em;
  padding-bottom:10px;border-bottom:1px solid rgba(28,30,35,0.2);margin-bottom:12px}
.entry p{font-size:.98rem;line-height:1.66;color:#505154;max-width:46ch}
.entry-detail{margin-top:10px;font-family:var(--ff-accent);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(28,30,35,0.72)!important}

/* --- services, setting II: a ruled schedule --- */
/* A real table: the service is the row header and the covering text is the
   cell, so the relationship is in the markup and not only in the layout. */
.svc-sched{width:100%;border-collapse:collapse;text-align:left}
.svc-sched thead th{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(28,30,35,0.72);font-weight:600;padding-bottom:12px;
  border-bottom:2px solid var(--ink)}
.svc-sched tbody th{font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.22;letter-spacing:-.015em;
  vertical-align:top;padding:clamp(16px,2vw,24px) clamp(20px,3vw,48px) clamp(16px,2vw,24px) 0;
  width:clamp(160px,26%,300px);border-bottom:1px solid rgba(28,30,35,0.13)}
.svc-sched tbody td{vertical-align:top;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid rgba(28,30,35,0.13)}
.svc-sched tbody td p{font-size:.98rem;line-height:1.66;color:#505154;max-width:54ch}
.svc-sched tbody tr:last-child th,.svc-sched tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  /* a two-column table has nowhere to go on a phone, so the rows stack */
  .svc-sched,.svc-sched tbody,.svc-sched tr,.svc-sched th,.svc-sched td{display:block;width:auto}
  .svc-sched thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .svc-sched tbody th{padding:0 0 8px;border-bottom:0}
  .svc-sched tbody td{padding:0 0 clamp(20px,5vw,28px)}
  .svc-sched tbody tr:last-child td{border-bottom:0}
}

/* --- services, setting III: roman-numeral list --- */
.svc-roman{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.svc-item{display:grid;grid-template-columns:clamp(46px,7vw,92px) minmax(0,1fr);
  gap:8px clamp(14px,2vw,26px);align-items:start;padding-block:clamp(20px,2.6vw,32px);
  border-bottom:1px solid rgba(28,30,35,0.13)}
.svc-item:last-child{border-bottom:0}
.svc-no{font-family:var(--ff-accent);font-size:clamp(.82rem,1.3vw,1rem);letter-spacing:.14em;
  color:var(--accent-read);padding-top:.35em}
.svc-body h3{font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.2;letter-spacing:-.015em;
  margin-bottom:10px}
.svc-body p{font-size:.98rem;line-height:1.66;color:#505154;max-width:54ch}
.svc-det{display:flex;flex-wrap:wrap;gap:6px 0;margin:12px 0 0;padding:0;list-style:none;max-width:none}
.svc-det li{font-family:var(--ff-accent);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(28,30,35,0.72);padding:0 13px;position:relative}
.svc-det li:first-child{padding-left:0}
.svc-det li + li::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:1px;background:rgba(28,30,35,0.2)}

/* --- credentials: ruled two-column ledger --- */
.cred{padding-block:var(--section-y) 0}
.cred-frame{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding-block:clamp(14px,1.8vw,22px)}
.cred-cap{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(28,30,35,0.72);max-width:none;padding-bottom:clamp(10px,1.4vw,16px)}
.cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:0 clamp(24px,4vw,56px);margin:0}
.cred-row{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1.9fr);gap:4px clamp(18px,3vw,44px);
  align-items:baseline;padding-block:clamp(11px,1.4vw,16px);border-top:1px solid rgba(28,30,35,0.13)}
.cred-row dt{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(28,30,35,0.72)}
.cred-row dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.cred-row strong{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.12rem;letter-spacing:-.01em}
.cred-row a,.cred-row dd>span{font-size:.72rem;color:rgba(28,30,35,0.72);font-style:italic}
.cred-row a{text-decoration:underline;text-underline-offset:3px;font-style:normal}

/* --- the record as a table (setting III) --- */
.cred-table{width:100%;border-collapse:collapse;text-align:left}
.cred-table th,.cred-table td{vertical-align:baseline;padding-block:clamp(11px,1.4vw,16px);
  border-top:1px solid rgba(28,30,35,0.13)}
.cred-table tr:first-child th,.cred-table tr:first-child td{border-top:0}
.cred-table th{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(28,30,35,0.72);font-weight:600;width:clamp(120px,24%,260px);padding-right:clamp(16px,3vw,44px)}
.cred-table strong{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.12rem;
  letter-spacing:-.01em}
.cred-src{text-align:right;white-space:nowrap;padding-left:clamp(14px,2vw,30px)}
.cred-src a,.cred-src span{font-size:.72rem;color:rgba(28,30,35,0.72);font-style:italic}
.cred-src a{text-decoration:underline;text-underline-offset:3px;font-style:normal}
@media (max-width:640px){
  .cred-table,.cred-table tbody,.cred-table tr,.cred-table th,.cred-table td{display:block;width:auto}
  .cred-table th{padding:14px 0 4px;border-top:1px solid rgba(28,30,35,0.13)}
  .cred-table tr:first-child th{border-top:0}
  .cred-table td{padding:0;border-top:0}
  .cred-src{text-align:left;white-space:normal;padding:4px 0 12px}
}

/* --- work: framed engraved plates, offset grid --- */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
  column-gap:clamp(22px,3.4vw,50px);row-gap:clamp(30px,4vw,56px);padding-bottom:0}
.works>.head2{grid-column:1/-1;padding-bottom:0}
.frame-fig{margin:0;display:grid;gap:14px;align-content:start}
.frame-fig[data-off="1"]{margin-top:clamp(14px,2.6vw,42px)}
.frame-fig[data-off="2"]{margin-top:clamp(7px,1.3vw,21px)}
.plate{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;align-content:end;gap:9px;
  padding:clamp(16px,1.8vw,26px);border:1px solid var(--ink);border-radius:var(--r1);
  outline:1px solid var(--ink);outline-offset:5px;
  background:#eae8e3 url("./assets/engrave.svg") center/cover no-repeat;
  transition:transform .45s var(--ease-out)}
.plate[data-tex="1"]{background-image:url("./assets/rule.svg")}
.plate[data-tex="2"]{background-image:url("./assets/chips.svg")}
.plate::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(246,244,238,0.04) 0%,rgba(246,244,238,0.2) 40%,rgba(246,244,238,0.86) 74%,rgba(246,244,238,0.96) 100%)}
.plate>*{position:relative}
.frame-fig:hover .plate{transform:translateY(-5px)}
.plate-ix{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-read)}
.plate-t{font-size:clamp(1.05rem,1.9vw,1.42rem);line-height:1.16;letter-spacing:-.015em}
.plate-tags{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(28,30,35,0.72)}
.frame-fig figcaption{display:grid;gap:6px;padding-top:6px;border-top:1px solid rgba(28,30,35,0.13)}
.cap-loc{font-family:var(--ff-accent);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#505154}
.cap-sum{font-size:.9rem;line-height:1.55;color:#505154}
.cap-slot{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-accent);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(28,30,35,0.72)}

/* --- engagement: roman-numeral sequence in a frame --- */
.eng{padding-bottom:0}
.eng-frame{list-style:none;margin:0;padding:0;border:2px solid var(--ink);border-radius:var(--r2);
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.eng-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);
  padding:clamp(20px,2.6vw,34px);border-bottom:1px solid rgba(28,30,35,0.2);border-right:1px solid rgba(28,30,35,0.2)}
.eng-step:nth-child(2n){border-right:0}
.eng-step:nth-last-child(-n+2):nth-child(2n+1){border-bottom:0}
.eng-step:last-child{border-bottom:0}
.eng-no{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1;color:var(--accent-read);letter-spacing:.04em;min-width:1.6em}
.eng-step h3{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.22;letter-spacing:-.015em}
.eng-step p{margin-top:9px;font-size:.95rem;line-height:1.62;color:#505154;max-width:44ch}

/* --- questions: dialogue ledger --- */
.qs{display:flex;flex-direction:column;padding-bottom:0}
.qs-list{display:grid}
.qs-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px clamp(14px,2.4vw,32px);
  align-items:baseline;padding-block:clamp(22px,2.8vw,36px);border-bottom:1px solid rgba(28,30,35,0.2)}
.qs-m{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.02rem;color:var(--accent-read);
  letter-spacing:.02em}
.qs-m--a{color:rgba(28,30,35,0.72)}
.qs-q{font-size:clamp(1.1rem,2.1vw,1.5rem);line-height:1.24;letter-spacing:-.015em;max-width:40ch}
.qs-a{font-size:1rem;line-height:1.68;color:#505154;max-width:54ch}

/* --- area --- */
.area{padding-bottom:clamp(30px,4vw,60px)}
.area-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 clamp(20px,3vw,44px);
  border-top:1px solid rgba(28,30,35,0.2);list-style:none;padding:0;margin:0}
.area-cols li{padding-block:13px;border-bottom:1px solid rgba(28,30,35,0.13);font-size:1rem}

/* --- contact --- */
.con{background:var(--deep);color:var(--deep-ink)}
.con-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,5vw,74px);
  padding-block:var(--section-y)}
.con-h{margin-top:16px;font-size:var(--fs-4);line-height:1.08;letter-spacing:-.02em;max-width:15ch}
.con-tel{display:grid;gap:5px;margin-top:clamp(24px,3vw,38px);text-decoration:none;width:fit-content}
.con-tel span{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,237,230,0.62)}
.con-tel strong{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:clamp(1.5rem,3.2vw,2.3rem);
  letter-spacing:-.02em;border-bottom:1px solid rgba(239,237,230,0.4);padding-bottom:6px}
.con-tel:hover strong{border-bottom-color:var(--accent-read)}
.con-facts{display:grid;gap:18px;margin:clamp(26px,3vw,40px) 0 0}
.con-facts dt{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,237,230,0.62);margin-bottom:5px}
.con-facts dd{margin:0;font-size:.95rem;line-height:1.6;color:rgba(239,237,230,0.9)}
.con-facts a{text-decoration:none;border-bottom:1px solid rgba(239,237,230,0.34)}
.con-form{background:rgba(239,237,230,0.05);border:1px solid rgba(239,237,230,0.2);border-radius:var(--r2);
  padding:clamp(20px,2.6vw,34px);display:grid;gap:14px;align-content:start;align-self:start}
.form-cap{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(239,237,230,0.62);padding-bottom:8px;border-bottom:1px solid rgba(239,237,230,0.18)}
.fg{display:grid;gap:7px}
.fg label{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(239,237,230,0.7)}
.fg input,.fg textarea{background:rgba(239,237,230,0.06);border:1px solid rgba(239,237,230,0.22);
  border-radius:var(--r1);padding:11px 13px;font-size:1rem;color:var(--deep-ink);resize:vertical}
.fg input:focus,.fg textarea:focus{outline:0;border-color:var(--accent-read)}
.con-form .btn{justify-self:start;margin-top:4px;background:var(--accent);color:var(--accent-ink)}
.con-form .btn:hover{background:var(--deep-ink);color:var(--deep)}
.con-form output{color:rgba(239,237,230,0.78)}

/* --- footer --- */
.ft{background:var(--deep);color:var(--deep-ink);padding-bottom:26px}
.ft-top{display:grid;justify-items:center;gap:7px;text-align:center;padding-block:clamp(26px,3vw,42px)}
.ft-word{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:clamp(1.3rem,2.8vw,1.9rem);letter-spacing:-.015em}
.ft-sub{font-family:var(--ff-accent);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,237,230,0.66)}
.ft-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px clamp(20px,3vw,44px);
  padding-block:16px;border-top:1px solid rgba(239,237,230,0.18)}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.ft-nav a{font-family:var(--ff-accent);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:rgba(239,237,230,0.74)}
.ft-nav a:hover{color:var(--accent-read)}
.ft-c{display:flex;flex-wrap:wrap;gap:8px 18px}
.ft-c a{font-size:.86rem;text-decoration:none;color:rgba(239,237,230,0.84)}
.ft-c a:hover{color:var(--accent-read)}
.ft-legal{display:grid;gap:6px;padding-top:16px;border-top:1px solid rgba(239,237,230,0.14)}
.ft-legal p{font-size:.72rem;line-height:1.55;color:rgba(239,237,230,0.62);max-width:52ch}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frame-fig[data-off="2"]{margin-top:0}
  .con-in{grid-template-columns:1fr;gap:34px}
}
@media (max-width:900px){
  .mast .mast-nav{display:none}
  .mast .mast-burger{display:grid}
  .mast-in{grid-template-columns:1fr auto;justify-items:start}
  .mast .wordmark{justify-items:start;text-align:left}
  .front{grid-template-columns:1fr}
  .front-copy{border-right:0;padding-right:0;padding-block:clamp(22px,3vw,34px) 0}
  .front-ledger{margin-block:26px clamp(22px,3vw,34px)}
  .firm{flex-direction:column;gap:20px}
  .firm-side{flex:0 0 auto}
  .prospectus{columns:1;column-rule:0}
  .eng-frame{grid-template-columns:1fr}
  .eng-step{border-right:0}
  .eng-step:nth-last-child(-n+2):nth-child(2n+1){border-bottom:1px solid rgba(28,30,35,0.2)}
  .eng-step:last-child{border-bottom:0}
}
@media (max-width:640px){
  .works{grid-template-columns:1fr;row-gap:28px}
  .frame-fig[data-off="1"]{margin-top:0}
  .plate{aspect-ratio:3/2}
  .qs-row{grid-template-columns:auto minmax(0,1fr)}
  /* a wrapped rule would start a line; a trailing mark rides with its own item */
  .front-index{justify-content:flex-start;gap:6px 0}
  .front-index li{padding:0}
  .front-index li + li::before{display:none}
  .front-index li:not(:last-child)::after{content:"\00b7";margin-inline:11px;color:rgba(28,30,35,0.72)}
  .front-slug{text-align:left}
}

/* --- drawn plates ----------------------------------------------------- */
/* The family keeps its frame, its labels and its wash; only the picture
   inside the frame comes from here. !important is deliberate: this is a
   build-time override of whatever surface the family had reached for, and
   several families set the plate's background on a more specific selector
   than an attribute. */
[data-photo-slot="hero"]{background-image:url("./assets/plate-hero.svg")!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
/* Every family lays a wash over its plate so the caption on it stays legible.
   Those washes were written when there was nothing underneath them to see --
   one of them reaches 86% opacity -- and over a real drawing they put the
   drawing out. Damping the wash keeps the caption readable and lets the
   picture through, and the contrast gate checks what results. */
[data-photo-slot]::before{opacity:.62}
/* A real photograph beats a drawing, every time. */
[data-has-photo]{background-image:none!important}
[data-has-photo]::before{opacity:1}


/* --- auto-derived: readable tokens on inverted grounds (see deepGroundFix) --- */
.drawer,
.con,
.ft{
  --muted:var(--muted-deep);
  --accent-read:var(--accent-read-deep);
  --hairline:rgba(255,255,255,.18);
  --hair-strong:rgba(255,255,255,.34);
}
.skip,
.preview-note,
.btn{
  --muted:var(--muted-ink);
  --accent-read:var(--accent-read-ink);
  --hairline:rgba(255,255,255,.18);
  --hair-strong:rgba(255,255,255,.34);
}
body{
  --muted:var(--muted-paper);
  --accent-read:var(--accent-read-paper);
  --hairline:var(--hairline-raw);
  --hair-strong:var(--hair-strong-raw);
}