/* ── FOO & QUEK LLC · THE MONOGRAPH · monograph.v6.css ────────────────
   Parchment, ink, hairline. Fraunces only. Hierarchy from space.
   RELEASE RULE: this file is immutable-cached for a year. Any change
   = new filename (v4, v5...) + update every page link.
   v6 (loop r7): Fraunces is self-hosted. The four woff2 subsets below
   are the Google Fonts variable binaries (v38, opsz 9..144, wght
   100..900, roman + italic, latin + latin-ext) served first-party from
   /assets/fonts/. No third-party font request leaves the page. The
   rest of the stylesheet is byte-identical to v5: no visual change.
   Also: privacy page mailto wrapping, print column lane reset.
   ------------------------------------------------------------------ */

/* ── FRAUNCES · self-hosted variable subsets ───────────────────────── */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/fraunces-var-roman-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/fraunces-var-roman-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/fraunces-var-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/fraunces-var-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --parchment:#F6F1E8;
  --ink:#1A1D20;
  --hairline:#E2DCD2;
  --seal:#7E2B24;
  --soft:#6B655C;
  --silence:clamp(96px,15vw,220px);
  --breath:clamp(64px,9vw,130px);
  --gutter:clamp(22px,6vw,64px);
  /* The tooth tile is laid in multiply, so it darkens whatever it sits
     on. --ground-1 and --ground-2 are therefore COMPENSATED values,
     lighter than the ink-on-paper colours they are meant to produce:
     --ground-1 (#F9F4EB) x tooth renders as --parchment (#F6F1E8), and
     --ground-2 (#F2ECE1) x tooth renders as the footer chapter tone
     (#EFE9DE). Never read these two as the visible ground. */
  --ground-1:#F9F4EB;
  --ground-2:#F2ECE1;
  --parchment-2:#EFE9DE;
  --tooth:url("/assets/img/texture-tooth-768.webp");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground-1)}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  /* Ground: compensated paper colour, the tooth tile in multiply, and
     one top-lit gradient over the first 560px. NOT background-attachment:
     fixed (it costs a repaint on every scroll frame). */
  background-color:var(--ground-1);
  background-image:var(--tooth),linear-gradient(180deg,#FCF8F1 0,rgba(252,248,241,0) 560px);
  background-repeat:repeat,no-repeat;
  background-size:768px 768px,100% 560px;
  background-blend-mode:multiply,normal;
  color:var(--ink);
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-optical-sizing:auto;
  font-variant-numeric:normal;
  font-size:16px;
  line-height:1.75;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
}
main{flex:1 0 auto}
main:focus{outline:none}
main:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
p{text-wrap:pretty;margin:0}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:380}
a{color:inherit;text-decoration:none;transition:text-decoration-color 160ms ease-out,border-color 160ms ease-out}
a:hover{opacity:1}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
img{display:block;max-width:100%}
video{display:block;max-width:100%}
ul,ol{list-style:none;margin:0;padding:0}

/* Display optical size: the headline sizes only, and only where the
   type is actually large (desktop). The wght axis is pinned to the
   body weight so opsz does not drag the weight with it. */
@media (min-width:760px){
  .hero h1,.page-head h1,.bio-head h1,.lost h1,.contact h2,.reg-head h2,.column h2{font-variation-settings:"opsz" 96,"wght" 380}
}

/* Visually hidden, still announced */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--ink);color:var(--parchment);
  padding:14px 20px;min-height:44px;
  font-size:12px;letter-spacing:.17em;text-transform:uppercase;
}
.skip:focus{left:0}

/* Shared small-caps voice */
.caps{font-size:12px;letter-spacing:.17em;text-transform:uppercase;line-height:1.7}
.micro{font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.7}
.link13{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-block;padding:14px 0 10px;
  border-bottom:1px solid var(--hairline);
}

/* The single filled accent mark */
.seal{
  display:inline-block;width:6px;height:6px;
  background:var(--seal);
  margin-right:.9em;vertical-align:.12em;
}

/* ── Header ───────────────────────────────────────────────────────── */
header.mast{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:30px var(--gutter) 0;
  flex:0 0 auto;
}
.wordmark{font-size:13px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding:10px 0}
.wordmark span{opacity:.68;letter-spacing:.16em}
.mast nav{display:flex;gap:clamp(18px,4vw,48px);flex-wrap:wrap;justify-content:flex-end}
.mast nav a{font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.mast nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.22em}
.mast nav a[aria-current="true"]{opacity:1;text-decoration:underline;text-decoration-color:rgba(26,29,32,.45);text-decoration-thickness:1px;text-underline-offset:.22em}

/* ── Hero (home) ──────────────────────────────────────────────────── */
.hero{
  min-height:85vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--gutter) var(--gutter);
}
.hero .dateline{margin-bottom:clamp(40px,7vw,72px)}
.hero h1{
  font-size:clamp(28px,4.4vw,58px);
  line-height:1.14;
  letter-spacing:0;
  max-width:24ch;
}
.hero h1 em{font-style:italic}
.hero .support{
  margin-top:clamp(36px,6vw,60px);
  max-width:44ch;
  font-size:14px;line-height:1.95;opacity:.68;
}
.hero .link13{margin-top:clamp(48px,8vw,96px)}

/* ── Interior page head ───────────────────────────────────────────── */
.page-head{
  padding:var(--breath) var(--gutter);
  text-align:center;
}
.page-head .crumb{margin-bottom:clamp(28px,4vw,44px)}
.page-head h1{
  font-size:clamp(26px,3.9vw,50px);
  line-height:1.18;max-width:26ch;margin:0 auto;
}
.page-head h1 em{font-style:italic}
.page-head .lede{
  margin:clamp(28px,4vw,44px) auto 0;
  max-width:44ch;font-size:14px;line-height:1.82;opacity:.68;
}

/* ── Statement column: label lane + 46ch measure + wide objects ───── */
.column{
  padding:var(--silence) var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,46ch) minmax(0,1fr);
  column-gap:clamp(24px,4vw,64px);
}
.column.tight{padding-top:var(--breath);padding-bottom:var(--breath)}
.column > *{grid-column:2;max-width:46ch}
.column > .micro{grid-column:1}
.column > .matters-lbl{grid-column:1}
.column > .link13{justify-self:start}
.column h2{font-size:26px;line-height:1.3;margin-top:26px}
.column .lede{margin-top:34px;font-size:17px;line-height:1.85}
.column p + p{margin-top:26px}
.column .body{margin-top:34px}
.column .body p + p{margin-top:26px}
.column .link13{margin-top:38px}

/* ── Memorial: type only, centred, quiet ──────────────────────────── */
.memorial{
  padding:0 var(--gutter) var(--silence);
  text-align:center;
}
.memorial p{
  max-width:42ch;margin:0 auto;
  font-size:14px;line-height:1.82;opacity:.68;
}
.memorial .micro{margin-bottom:26px}

/* ── Plates (image or ambient video slots) ────────────────────────── */
.plate{margin:0;padding:0;position:relative}
.plate img,.plate video{
  width:100%;height:min(88vh,860px);object-fit:cover;
}
/* Declared cuts: the plate is a printed block, so it takes a rule at
   the top and the bottom edge instead of a tonal filter. */
.plate img,.plate video{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.plate.short img,.plate.short video{height:min(74vh,720px)}
.plate.band img,.plate.band video{height:min(52vh,480px)}
.plate figcaption{
  padding:22px var(--gutter) 0;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
/* Media fallback rule: MUST stay after all plate sizing rules.
   One high-specificity hide; identical-specificity reveal under
   reduced motion (which hides the video instead). */
.plate img.media-fallback{display:none}
@media (prefers-reduced-motion:reduce){
  .plate video{display:none}
  .plate img.media-fallback{display:block}
}

/* ── Practice index: left-set register, descriptions always visible ─
   The <a> covers the number and the name only, so its accessible
   name stays "0N Name"; the description is a sibling paragraph that
   holds the third column. The anchor repeats the outer tracks and
   the outer column gap, so the two grids stay in register without
   depending on subgrid. */
.index{padding:var(--silence) var(--gutter);display:flex;flex-direction:column;align-items:center}
.index h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:clamp(48px,7vw,80px)}
.index ol{width:100%;max-width:none;text-align:left}
.index li{border-top:1px solid var(--hairline)}
.index li:last-child{border-bottom:1px solid var(--hairline)}
.index .prow{
  display:grid;
  grid-template-columns:3.5rem minmax(0,20rem) minmax(0,1fr);
  column-gap:clamp(24px,4vw,64px);
  row-gap:2px;
  align-items:baseline;
  padding:22px 0;
  position:relative;
}
.index .prow > a{
  grid-column:1 / 3;
  display:grid;
  grid-template-columns:3.5rem minmax(0,20rem);
  column-gap:clamp(24px,4vw,64px);
  align-items:baseline;
  min-height:44px;
}
.index .prow > a::after{content:"";position:absolute;inset:0}
/* The name carries the sitewide decoration device, not a border. */
.index .name{
  font-size:19px;line-height:1.35;
  display:inline;justify-self:start;
  text-decoration:underline;
  text-decoration-color:var(--hairline);
  text-underline-offset:.34em;
  text-decoration-skip-ink:auto;
  transition:text-decoration-color 160ms ease-out;
}
.index .num{font-size:11px;letter-spacing:.16em;margin-right:0;vertical-align:.12em}
.index .desc{grid-column:3;font-size:13px;line-height:1.8;opacity:.68;margin:0;max-width:44ch}

/* ── The register: the one left-set object ────────────────────────── */
.register{padding:var(--silence) var(--gutter)}
.register.tight{padding-top:var(--breath);padding-bottom:var(--breath)}
#register:focus{outline:none}
#register:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.reg-head{max-width:44ch}
.reg-head h2{font-size:clamp(21px,2.5vw,27px);line-height:1.28;margin-top:24px}
.reg-head .intro{margin-top:22px;font-size:14px;line-height:1.95;opacity:.68;max-width:46ch}
.reg-table{margin-top:clamp(48px,7vw,88px);max-width:78rem}
.reg-row{
  display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:8px clamp(24px,4vw,64px);
  padding:18px 0;
  border-top:1px solid var(--hairline);
}
.reg-row:last-child{border-bottom:1px solid var(--hairline)}
.district{font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.75}
/* Names are set apart by space, not by a separator glyph. */
.projects{display:flex;flex-wrap:wrap;gap:.35em 1.6em;font-size:15px;line-height:1.95}
.ong{color:var(--soft);font-style:italic;font-size:12px;letter-spacing:0;white-space:nowrap}
.standing{
  margin-top:clamp(40px,6vw,64px);
  max-width:46ch;
  font-size:12px;line-height:1.95;opacity:.68;
}

/* ── Chronology: the register rows on a narrow date track ─────────── */
.chrono{margin-top:clamp(40px,6vw,72px);max-width:56rem;grid-column:1 / -1}
.chrono .reg-row{grid-template-columns:minmax(0,6rem) minmax(0,1fr)}

/* ── Selected matters ─────────────────────────────────────────────── */
.matters-lbl{margin-top:clamp(40px,6vw,64px)}
.matters{margin-top:34px}
.matters li{padding:16px 0;border-top:1px solid var(--hairline);font-size:14px;line-height:1.9}
.matters li:last-child{border-bottom:1px solid var(--hairline)}
.column .standing{margin-top:34px}

/* ── People index ─────────────────────────────────────────────────── */
.people{padding:var(--silence) var(--gutter);text-align:center}
.people.tight{padding-top:var(--breath);padding-bottom:var(--breath)}
.people h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:clamp(48px,7vw,80px)}
.people > .link13{margin-top:clamp(40px,6vw,64px)}
.roster{margin:0 auto;max-width:46ch}
.roster li{margin-bottom:clamp(56px,8vw,88px)}
.roster li:last-child{margin-bottom:0}
/* The portrait is a mounted print: a parchment mat, a hairline frame
   and the shallowest lift off the ground. */
.portrait{
  width:clamp(140px,11vw,150px);aspect-ratio:4/5;
  margin:0 auto 24px;
  padding:6px;
  border:1px solid var(--hairline);
  background:var(--parchment-2);
  box-shadow:0 1px 2px rgba(60,50,35,.08),0 6px 14px -6px rgba(60,50,35,.12);
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.roster .nm{font-size:19px;line-height:1.4}
.roster .nm a{padding-bottom:2px}
.roster .rl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-top:9px}
.roster .adm{font-size:12px;letter-spacing:.02em;opacity:.68;margin-top:7px;line-height:1.8}
.roster .bio{font-size:14px;line-height:1.9;opacity:.7;margin-top:16px}
.roster .more{margin-top:18px}
/* Whole-row target on the single-column roster only; the directory
   grid keeps its several separate links. */
.roster:not(.dirgrid) li{position:relative}
.roster:not(.dirgrid) .nm a::after{content:"";position:absolute;inset:0}

/* ── Lawyers directory: three across, harmonised portraits ────────── */
.dirgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);max-width:64rem;margin:0 auto;text-align:center}
.dirgrid .portrait{width:100%;max-width:260px;aspect-ratio:auto;padding:24px;margin:0 auto 24px;background:var(--parchment-2);border:1px solid var(--hairline)}
.dirgrid .portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 0%}
.dirgrid li:nth-child(3) .portrait img{object-position:50% 100%}
.dirgrid .tags{font-size:12px;letter-spacing:.02em;opacity:.68;margin-top:10px;line-height:1.9}
@media (max-width:760px){.dirgrid{grid-template-columns:1fr;max-width:24rem}}

.assoc{margin-top:clamp(88px,12vw,150px);padding-top:clamp(48px,7vw,72px);border-top:1px solid var(--hairline)}
.assoc h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.assoc .sub{font-size:12px;letter-spacing:.02em;margin-top:10px}
.assoc ul{margin:clamp(36px,5vw,52px) auto 0;max-width:40ch}
.assoc li{margin-bottom:22px;font-size:14px;line-height:1.7}
.assoc li:last-child{margin-bottom:0}
.assoc .rl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-top:5px}

/* ── Bio page ─────────────────────────────────────────────────────── */
.bio-head{padding:var(--breath) var(--gutter);text-align:center}
.bio-head .crumb{margin-bottom:clamp(28px,4vw,44px)}
.bio-head .portrait{width:150px;aspect-ratio:auto;margin-bottom:30px}
.bio-head .portrait img{height:auto;aspect-ratio:4/5;object-position:50% 0%}
/* One-off: a sitter framed low in her source file. Must follow the
   .bio-head rule above (identical specificity, source order decides). */
.portrait.low img{object-position:50% 100%}
.bio-head h1{font-size:clamp(24px,3vw,32px);line-height:1.2}
.bio-head .rl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-top:12px}
.bio-head .adm{font-size:12px;letter-spacing:.02em;opacity:.68;margin-top:10px;line-height:1.9;max-width:52ch;margin-left:auto;margin-right:auto}
.bio-head .reach{margin-top:26px;font-size:13px;line-height:2.05}
/* r7: .reach used to soften the whole box with opacity:.7. That is
   right for the ink lines inside it (ink at .7 is 5.9:1) but it also
   multiplied into the label voice, which declares opacity:1 in --soft
   so the practice label on a bio page came out at 2.9:1 at 11px,
   under AA. The softening moves to the box's children, the label excepted,
   so it reads at the same --soft as every other label (5.1:1). The
   ink lines and their link underlines are unchanged. */
.bio-head .reach > *:not(.micro){opacity:.7}
.bio-sec{padding-top:var(--breath)}
.bio-sec:last-of-type{padding-bottom:var(--silence)}
/* the bio sections carry the wide case tables, so they span the object
   lane; their prose keeps the 46ch measure */
.column > .bio-sec{grid-column:2 / -1;max-width:none}
.bio-sec > h2,.bio-sec > h3,.bio-sec > .body,.bio-sec > .plist{max-width:46ch}
.cases{margin-top:20px}
/* Case names are set in italic; the citation returns to roman. */
.cases li{
  padding:12px 0;border-top:1px solid var(--hairline);
  font-size:13.5px;line-height:1.85;font-style:italic;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);
  gap:4px clamp(16px,3vw,40px);align-items:baseline;
}
.cases li:last-child{border-bottom:1px solid var(--hairline)}
.cases .cite{opacity:.68;text-align:right;white-space:normal;font-style:normal;text-wrap:balance}
.cases + .micro{margin-top:clamp(32px,5vw,48px)}
.plist{margin-top:14px}
.plist li{font-size:14px;line-height:1.95;padding:3px 0;padding-left:1.6em;text-indent:-1.6em}
.plist li::before{content:"·";opacity:.5;display:inline-block;width:1.6em;text-indent:0}

/* Wide tabular objects reclaim the label lane as well as the object lane */
.cases,.matters{grid-column:1 / -1;max-width:78rem}

/* ── Contact ──────────────────────────────────────────────────────── */
.contact{
  padding:var(--silence) var(--gutter);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.contact.tall{min-height:70vh}
.contact h2{font-size:clamp(21px,2.4vw,27px);line-height:1.28;max-width:22ch}
.office{margin-top:clamp(48px,7vw,80px)}
.office .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.office .addr{margin-top:14px;font-size:14px;line-height:2.05}
.office .tel{margin-top:6px;font-size:13px;line-height:2.6;opacity:.7}
.office .tel a{padding:10px 0;display:inline-block}
.office .map{margin-top:8px}
.contact .mail{margin-top:clamp(48px,7vw,80px)}
.contact .mail a{font-size:14px}

.affil{padding:0 var(--gutter) var(--silence);text-align:center}
.affil p{max-width:54ch;margin:0 auto;font-size:13px;line-height:2;opacity:.68}

/* ── Legal pages (privacy/terms/disclaimer): quiet reading column ── */
.legalpage{padding:var(--breath) var(--gutter) var(--silence)}
.legalpage .inner{max-width:48ch;margin:0 auto}
.legalpage h2{font-size:20px;line-height:1.35;margin-top:clamp(40px,5vw,56px)}
.legalpage p{font-size:14px;line-height:2;opacity:.8;margin-top:18px}
.legalpage ul{margin-top:14px}
.legalpage li{font-size:14px;line-height:2;opacity:.8;padding:2px 0;padding-left:1.6em;text-indent:-1.6em}
.legalpage li::before{content:"·";opacity:.4;display:inline-block;width:1.6em;text-indent:0}
.legalpage .asat{font-size:12px;opacity:.68;margin-top:clamp(40px,5vw,56px)}

/* ── 404 ──────────────────────────────────────────────────────────── */
.lost{
  min-height:70vh;padding:var(--silence) var(--gutter);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.lost .crumb{margin-bottom:clamp(28px,4vw,44px)}
.lost h1{font-size:clamp(23px,2.9vw,32px);line-height:1.2;max-width:26ch}
.lost .routes{margin-top:clamp(40px,6vw,64px);display:flex;gap:clamp(16px,3vw,36px);flex-wrap:wrap;justify-content:center}

/* ── Seam collapse: exactly one silence between adjacent sections ───
   Every section rule above sets its padding from a class, so the
   collapse has to be stated at class specificity to win. The head
   blocks carry the breath on their bottom edge instead, and the
   section after the hero keeps a full silence. */
main > section + section.column,
main > section + section.index,
main > section + section.register,
main > section + section.people,
main > section + section.contact,
main > section + section.memorial,
main > section + section.affil,
main > section + section.legalpage,
main > .bio-head + .column{padding-top:0}
main > section + section.column.tight,
main > section + section.register.tight,
main > section + section.people.tight{padding-top:0}
main > section.hero + section[class]{padding-top:var(--silence)}

/* ── Footer: the closing chapter, one tone down from the ground ───── */
footer{
  flex:0 0 auto;
  border-top:0;
  background-color:var(--ground-2);
  background-image:var(--tooth);
  background-repeat:repeat;
  background-size:768px 768px;
  background-blend-mode:multiply;
  padding:clamp(64px,9vw,110px) var(--gutter) clamp(56px,8vw,88px);
  text-align:center;
}
.colophon{display:flex;flex-direction:column;gap:26px;align-items:center;font-size:12px;line-height:1.9;opacity:.72}
.colophon .device{width:48px;height:48px;margin:0 auto;opacity:.75}
.colophon .row{display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap;justify-content:center;letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.colophon .row a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.legal{margin:clamp(48px,7vw,80px) auto 0;font-size:11px;line-height:2;opacity:.68;max-width:58ch}
.legal p{text-wrap:balance}
.legal p+p{margin-top:8px}

/* ── Label voice: one soft ink for every small-caps label ─────────── */
.micro,
.index h2,
.people h2,
.index .num,
.office .lbl,
.plate figcaption,
.assoc h3,
.assoc .sub,
.assoc .rl,
.district,
.roster .rl,
.bio-head .rl{opacity:1;color:var(--soft)}

/* ── Label voice, continued: weight, tracking ramp, word-spacing ────
   Small caps at the text weight read thin, so the label voice takes
   one notch more weight. Tracking runs in three steps by size: 11px
   labels widest, 12px labels next, 13px navigation tightest. Word
   spacing opens with the tracking so the words do not fuse. */
.micro,.caps,.link13,.wordmark,.mast nav a,.district,.roster .rl,.bio-head .rl,.assoc h3,.assoc .rl,.office .lbl,.plate figcaption,.index h2,.index .num,.people h2,.colophon .row{font-weight:480}
.micro,.plate figcaption,.index h2,.index .num,.people h2,.assoc h3,.office .lbl,.colophon .row{letter-spacing:.2em}
.caps,.district,.roster .rl,.bio-head .rl,.assoc .rl,.skip{letter-spacing:.17em}
.link13,.wordmark,.mast nav a{letter-spacing:.14em}
.micro,.caps,.link13,.wordmark,.mast nav a,.district,.roster .rl,.bio-head .rl,.assoc h3,.assoc .rl,.office .lbl,.plate figcaption,.index h2,.people h2,.colophon .row{word-spacing:.09em}
/* The wordmark ampersand is the one italic in the label voice. */
.wordmark .amp{font-style:italic;letter-spacing:0;font-weight:400}

/* ── Link affordance: every prose link carries a rule ─────────────── */
.legalpage a,
.affil a,
.assoc a:not(.link13),
.roster .nm a,
.contact .mail a,
.office .tel a,
.column .body a,
.column .lede a,
.dirgrid .tel a,
.bio-head .reach a,
.page-head .crumb a,
.bio-head .crumb a,
.lost .crumb a{text-decoration:underline;text-decoration-color:rgba(26,29,32,.45);text-decoration-thickness:1px;text-underline-offset:.22em}
.contact .mail a,
.assoc a,
.affil a,
.legalpage a{padding:6px 0 4px}
.assoc a,
.affil a{display:inline-block}
/* r7: the legal pages run links inside running prose, and inline-block
   turned each link into an atomic box. That box opened a line-break
   opportunity where inline text has none, so the DPO mailto on the
   privacy page pushed its trailing comma to the next line, and the
   box's own height (38px against a 28px leading) broke the rhythm of
   that paragraph. The link goes back to inline: the comma stays with
   the address, the leading returns to 28px, and the 6px/4px padding
   still carries the hit area, which is measured on the padding box.
   overflow-wrap lets the address itself fold on very narrow frames
   instead of overflowing the 48ch measure. */
.legalpage a{display:inline;overflow-wrap:anywhere}
.contact .mail a,
.bio-head .reach a{display:inline-flex;align-items:center;min-height:44px}
.bio-head .reach a{padding:8px 0 2px}
.assoc a.link13{padding:14px 0 10px}
/* The crumb link sits in the crumb's own size, not one step up. */
.page-head .crumb a,
.bio-head .crumb a,
.lost .crumb a{font-size:inherit;padding:14px 0 6px;display:inline-block}

/* ── Hover: ink, never fade ───────────────────────────────────────── */
.legalpage a:hover,
.affil a:hover,
.assoc a:not(.link13):hover,
.roster .nm a:hover,
.contact .mail a:hover,
.office .tel a:hover,
.column .body a:hover,
.column .lede a:hover,
.dirgrid .tel a:hover,
.bio-head .reach a:hover,
.page-head .crumb a:hover,
.bio-head .crumb a:hover,
.lost .crumb a:hover{text-decoration-color:var(--ink)}
/* Navigation and colophon links carry the underline at rest, in
   transparent, so the hover moves colour and nothing shifts. The
   aria-current rules above are more specific and keep winning. */
.mast nav a,.colophon .row a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.22em}
.mast nav a:hover,.colophon .row a:hover{text-decoration-color:var(--ink)}
.link13:hover{border-bottom-color:var(--ink)}
/* Whole-row hover for the two stretched-link rows */
.index li:hover .name,
.roster:not(.dirgrid) li:hover .nm a{text-decoration-color:var(--ink)}

/* ── Motion: one slow fade for plates, nothing else ───────────────── */
@keyframes plateIn{from{opacity:0}to{opacity:1}}
@media screen{
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .plate img,.plate video{
        animation:plateIn linear both;
        animation-timeline:view();
        animation-range:entry 0% entry 240px;
      }
    }
  }
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── Small screens ────────────────────────────────────────────────── */
@media (max-width:1100px){
  .cases li{grid-template-columns:1fr}
  .cases .cite{text-align:left}
}
@media (max-width:1000px){
  .reg-row{grid-template-columns:minmax(0,12rem) minmax(0,1fr)}
  .index .prow{grid-template-columns:3.5rem minmax(0,1fr)}
  .index .prow > a{grid-column:1 / 3;grid-template-columns:3.5rem minmax(0,1fr)}
  .index .desc{grid-column:2}
}
@media (max-width:860px){
  .column{grid-template-columns:1fr}
  .column > *{grid-column:1;max-width:none}
  .column > .bio-sec{grid-column:1}
  .bio-sec > h2,.bio-sec > h3,.bio-sec > .body,.bio-sec > .plist{max-width:none}
  .reg-head,.reg-head .intro,.matters,.standing,.cases{max-width:none}
}
@media (max-width:760px){
  header.mast{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--hairline)}
  .mast nav{justify-content:flex-start;gap:6px 22px}
  .plate img,.plate.short img,.plate video,.plate.short video{height:min(68vh,560px)}
  .plate.band img,.plate.band video{height:min(52vh,480px)}
}
/* Crops re-set for the narrow frame: each plate keeps its subject. */
@media (max-width:760px){
  .plate img[src*="residential"]{object-position:22% 50%}
  .plate video[poster*="paper"]{object-position:62% 50%}
  .plate img[src*="paper"]{object-position:62% 50%}
  .plate img[src*="lobby"]{object-position:34% 50%}
}
@media (max-width:560px){
  .index .prow{grid-template-columns:2rem minmax(0,1fr)}
  .index .prow > a{grid-template-columns:2rem minmax(0,1fr)}
}
@media (max-width:400px){
  .mast nav a,.wordmark{font-size:12px;letter-spacing:.14em}
  .reg-row{grid-template-columns:1fr;gap:10px}
  .projects{font-size:14px}
}

/* ── Print ────────────────────────────────────────────────────────── */
@media print{
  .mast nav,.skip{display:none}
  html,body,footer{background:#FFFFFF !important;background-image:none !important}
  body{color:#000000;font-size:11pt;line-height:1.6}
  .portrait{box-shadow:none;padding:0}
  .plate img,.plate video{border:0}
  .hero,.contact,.contact.tall,.lost{min-height:0}
  .plate img,.plate.short img,.plate.band img{height:auto;max-height:9cm}
  .plate video{display:none}
  .plate img.media-fallback{display:block}
  .column,.index,.register,.people,.contact,.memorial,.affil,.legalpage,.bio-sec,.bio-head,.lost{padding-top:1.2cm;padding-bottom:1.2cm}
  .roster li{margin-bottom:.8cm}
  a{text-decoration:none}
  .reg-row,.matters li,.index li,.cases li{break-inside:avoid}
}
@media print{
  .column{grid-template-columns:1fr}
  /* r7: the screen rule sets .column > * to lane 2. In print the column
     collapses to a single track, so anything still asking for lane 2
     (the .link13 at the foot of a statement column) was pushed into an
     implicit second column on the right of the page. Return every
     child to lane 1 before the lane-1 exceptions below. */
  .column > *{grid-column:1}
  .column > *,.reg-head,.reg-head .intro,.matters,.standing,.cases{max-width:none}
  .column > .bio-sec{grid-column:1}
  .bio-sec > h2,.bio-sec > h3,.bio-sec > .body,.bio-sec > .plist{max-width:none}
  .cases li{grid-template-columns:1fr}
  .cases .cite{text-align:left}
  .bio-sec:last-of-type{padding-bottom:1.2cm}
  .index .prow{grid-template-columns:3.5rem minmax(0,1fr)}
  .index .prow > a{grid-column:1 / 3;grid-template-columns:3.5rem minmax(0,1fr)}
  .index .desc{grid-column:2}
}

/* ── Forced colours and high contrast: drop the material ──────────── */
@media (forced-colors:active){
  html,body,footer{background-image:none}
  .portrait{box-shadow:none}
}
@media (prefers-contrast:more){
  html,body,footer{background-image:none}
  body{background-color:var(--parchment)}
  footer{background-color:var(--parchment-2)}
}