/* ============================================================
   THE TOOLKIT — ARENA HOMEPAGE
   Law: The Toolkit — Identity Book (TT-IDB-01 · Rev B · 07/2026)
   Palette proportion target: paper/bone 56 · green 36 · stone 5 · brass 3
   Brass appears only where the hand goes: seam, hairline, hover, focus.
   ============================================================ */

/* ---------- fonts (licensed, self-hosted; weights by number) ---------- */
@font-face{font-family:'Akkurat';src:url('../fonts/Akkurat-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Akkurat';src:url('../fonts/Akkurat-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Akkurat Mono';src:url('../fonts/AkkuratMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Canela';src:url('../fonts/Canela-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Canela';src:url('../fonts/Canela-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --green:#2E4A38;      /* Toolkit Green — mark, grounds, ink */
  --bone:#ECE7DC;       /* reverse mark, type on green */
  --brass:#C2A04F;      /* seam, hairline rules, hover/focus/active ONLY */
  --paper:#F4F0E7;      /* the site's walls */
  --stone:#8B8578;      /* captions, secondary UI, keylines */
  --forest:#233729;     /* footer depth, hover-on-green */
  --ink-desc:#4A5A48;   /* descriptor ink on light (book CH.05) */
  --hairline:rgba(46,74,56,.16);
  --hairline-bone:rgba(236,231,220,.28);

  --sans:'Akkurat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Akkurat Mono','SF Mono',ui-monospace,monospace;
  --serif:'Canela',Georgia,serif;

  --mx:clamp(20px,8.2vw,120px);   /* page margin — book: 120 @ 1460 */
  --gut:24px;                      /* book gutter */
  --maxw:1460px;

  --ease:cubic-bezier(.33,.02,.2,1);
  --dur:640ms;
}

/* ---------- reset-ish ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:400;font-size:1.0625rem;line-height:1.75;
  color:var(--green);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* text links: underline turns brass on hover — text never turns brass */
.tlink{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.28em;text-decoration-thickness:1px;transition:text-decoration-color .25s var(--ease)}
.tlink:hover,.tlink:focus-visible{text-decoration-color:var(--brass)}
:focus-visible{outline:1px solid var(--brass);outline-offset:3px}

::selection{background:var(--green);color:var(--bone)}

/* ---------- type registers ---------- */
/* R1 — the plate: caps, +0.30em */
.r1{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.3em;text-indent:.3em}
/* R2 — the draft: headlines, one weight lighter, +0.20em */
.r2{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.2em;text-indent:.2em;line-height:1.35}
/* R3 — the voice: Canela light italic, generous, minimal tracking */
.r3{font-family:var(--serif);font-weight:300;font-style:italic;letter-spacing:.005em;line-height:1.4}
/* R4 — the bench: mono, only where a number is stated */
.r4{font-family:var(--mono);font-weight:400;letter-spacing:.14em;text-transform:uppercase}

.sect-label{font-size:.6875rem;color:var(--stone);display:block}
h2.sect-title{font-size:clamp(1.3rem,3.1vw,1.9rem);margin-top:14px}
.sect-head{margin-bottom:clamp(34px,5vw,58px)}
.sect-intro{max-width:34em;margin-top:18px}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--mx)}
section{padding-block:clamp(72px,10vw,140px)}

/* ============================================================
   LOCKUPS — constructions reproduced from the book, scaled by --s
   ============================================================ */

/* B — horizontal · web (mark 38 · gap 13 · brass divider 1×30 · wm 11.5/.3em · desc 5/.34em) */
.lockup-b{--s:1;display:flex;align-items:center;gap:calc(13px*var(--s))}
.lockup-b .mk{width:calc(38px*var(--s));height:calc(38px*var(--s));flex:none}
.lockup-b .div{width:1px;height:calc(30px*var(--s));background:var(--brass);flex:none}
.lockup-b .tx{display:flex;flex-direction:column;gap:calc(5px*var(--s))}
.lockup-b .wm{font-family:var(--sans);font-weight:400;font-size:calc(11.5px*var(--s));letter-spacing:.3em;text-transform:uppercase;line-height:1;white-space:nowrap}
.lockup-b .ds{font-family:var(--sans);font-weight:400;font-size:calc(5px*var(--s));letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;color:var(--ink-desc)}

/* D — minimal · app bar (mark 32 · gap 12 · wm 12.5/.26em — scaled ~1.25x, round 3) */
.lockup-d{display:flex;align-items:center;gap:12px}
.lockup-d .mk{width:32px;height:32px;flex:none}
.lockup-d .wm{font-family:var(--sans);font-weight:400;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;line-height:1;white-space:nowrap}

/* A — stacked · cover/signage (mark 46 · gap 14 · wm 15/.3em · descriptor ⅓ the wordmark, G-12) */
.lockup-a{--s:1;display:flex;flex-direction:column;align-items:center;gap:calc(14px*var(--s));text-align:center}
.lockup-a .mk{width:calc(46px*var(--s));height:calc(46px*var(--s))}
.lockup-a .tx{display:flex;flex-direction:column;align-items:center;gap:calc(7px*var(--s))}
.lockup-a .wm{font-family:var(--sans);font-weight:400;font-size:calc(15px*var(--s));letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;line-height:1;white-space:nowrap}
.lockup-a .ds{font-family:var(--sans);font-weight:400;font-size:calc(5px*var(--s));letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;white-space:nowrap;color:var(--ink-desc)}

/* reversed contexts: type on green is Bone (book CH.06 / colophon) */
.on-green .wm{color:var(--bone)}
.on-green .ds{color:var(--bone);opacity:.85}

/* ============================================================
   HEADER — lockup B desktop · lockup D mobile (its app-bar context)
   ============================================================ */
.hdr{
  position:fixed;inset-inline:0;top:0;z-index:40;
  transition:transform .45s var(--ease),background .35s var(--ease),color .35s var(--ease);
  color:var(--bone);
}
.hdr .bar{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--mx);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hdr.is-solid{background:var(--paper);color:var(--green);box-shadow:0 1px 0 var(--hairline)}
.hdr.is-hidden{transform:translateY(-102%)}
.hdr:not(.is-solid){background:linear-gradient(180deg,rgba(20,31,25,.42),rgba(20,31,25,0))}
.hdr .lockup-b{display:none;--s:1.5}
/* owner ruling 2026-07-06 — header-only unlock: lines uncoupled, tight gap,
   descriptor at ⅓ with its own natural tracking, flush-left (never width-justified) */
.hdr .lockup-b .tx{gap:4px;align-items:center}
.hdr .lockup-b .wm{font-size:19px}
.hdr .lockup-b .ds{font-size:6.4px;letter-spacing:.3em;text-indent:.3em}
.hdr nav{display:none;align-items:center;gap:clamp(18px,2.4vw,34px)}
.hdr nav a{font-size:.6875rem;padding-block:12px}
.hdr .mob-contact{font-size:.6875rem;padding-block:12px}
@media(min-width:1040px){
  .hdr .lockup-b{display:flex}
  .hdr .lockup-d{display:none}
  .hdr nav{display:flex}
  .hdr .mob-contact{display:none}
}
/* header over the hero: bone ink; descriptor follows */
.hdr:not(.is-solid) .ds{color:var(--bone);opacity:.78}
.hdr:not(.is-solid) .wm{color:var(--bone)}

/* ============================================================
   HERO — full bleed: the room speaks first (owner ruling 2026-07-06)
   ============================================================ */
.hero{
  position:sticky;top:0;z-index:1;
  height:100svh;background:var(--forest);
  overflow:hidden;
}
.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,31,25,.30) 0%,rgba(20,31,25,0) 34%,rgba(20,31,25,.10) 58%,rgba(20,31,25,.66) 100%);
}
.hero-copy{
  position:absolute;left:var(--mx);right:var(--mx);
  bottom:calc(env(safe-area-inset-bottom,0px) + clamp(56px,10vh,100px));
  color:var(--bone);
}
.hero-idx{display:block;font-size:.6875rem;color:var(--bone);opacity:.78;width:max-content;max-width:min(86vw,40em)}
.hero-title{
  font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.2em;text-indent:.2em;
  font-size:clamp(1.7rem,5vw,3.4rem);line-height:1.25;margin-top:18px;color:var(--bone);
  text-shadow:0 1px 28px rgba(20,31,25,.4);
}
.hero-stand{
  margin-top:22px;font-size:clamp(1.15rem,2.6vw,1.7rem);max-width:24em;color:var(--bone);opacity:.94;text-wrap:balance;
  text-shadow:0 1px 20px rgba(20,31,25,.35);
}
.hero-scope{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(26px,4vh,40px);
  padding-top:18px;border-top:1px solid rgba(236,231,220,.28);max-width:44em;
}
.hero-scope span{font-size:.625rem;color:var(--bone);opacity:.8;white-space:nowrap}
.hero .cue{
  position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);left:var(--mx);
  font-size:.625rem;color:var(--bone);opacity:.6;
}
@media(max-width:879px){.hero .cue{display:none}} /* the pill owns the thumb zone on phones */

/* the curtain that rises over the hoarding */
.curtain{position:relative;z-index:2;background:linear-gradient(180deg,#F6F1E4 0%,#F4EFDF 46%,#F0E7D2 100%)}

/* ============================================================
   REVEAL — first room, full bleed
   ============================================================ */
.reveal{padding:0}
.reveal .plate{aspect-ratio:4/5;max-height:92svh}
@media(min-width:880px){.reveal .plate{aspect-ratio:16/9}}
.reveal .cap{padding:26px var(--mx) 0;max-width:var(--maxw);margin-inline:auto}
.reveal .cap p{max-width:30em;margin-top:10px}

/* ============================================================
   PLATES — image slots, placeholder-true sleeves until frames arrive
   ============================================================ */
.plate{
  position:relative;background:var(--bone);overflow:hidden;
  border:1px solid var(--hairline);
}
.plate .sleeve{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;
}
.plate .sleeve::before{content:'';position:absolute;inset:12px;border:1px solid var(--hairline);pointer-events:none}
.plate .sleeve .seal{width:18px;height:18px;opacity:.85}
.plate .sleeve .no{font-size:.625rem;color:var(--stone)}
.plate .sleeve .subj{font-size:.6875rem;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;font-weight:400;color:var(--ink-desc);max-width:24em;line-height:2}
.plate.tint-2{background:#E9E3D4}
.plate.tint-3{background:#E3DFD2}
.plate > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* ============================================================
   THE ROOMS — project cards (book card grammar)
   ============================================================ */
.rooms .grid{
  display:grid;grid-template-columns:1fr;gap:var(--gut);row-gap:clamp(40px,5vw,56px);
}
@media(min-width:720px){.rooms .grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){
  .rooms .grid{grid-template-columns:1fr 1fr 1fr;padding-bottom:52px}
  .rooms .card:nth-child(3n+2){transform:translateY(52px)}
}
.card .plate{aspect-ratio:3/2;transition:box-shadow .3s var(--ease)}
.card:hover .plate,.card:focus-within .plate{box-shadow:inset 0 0 0 1px var(--brass);border-color:var(--brass)}
.card .meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14px}
.card .no{font-size:.625rem;color:var(--stone)}
.card .tag{font-size:.625rem;color:var(--stone)}
.card h3{font-family:var(--sans);font-weight:300;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;margin-top:8px;line-height:1.5}
.card p{font-size:.9375rem;line-height:1.7;margin-top:8px;color:var(--green);max-width:30em}
.rooms .note{margin-top:clamp(40px,5vw,60px);font-size:.8125rem;color:var(--stone);max-width:40em}

/* ============================================================
   THE TRADE — answer-first, citable
   ============================================================ */
.trade .lead{
  font-size:clamp(1.15rem,2.4vw,1.55rem);line-height:1.7;max-width:30em;font-weight:300;
}
.trade .story{margin-top:clamp(30px,4vw,44px);max-width:36em}
.trade .story p{font-size:1.0625rem;line-height:1.85}
.trade .sectors{margin-top:clamp(44px,6vw,64px);border-top:1px solid var(--hairline)}
.trade .sector{
  display:grid;grid-template-columns:1fr;gap:6px 40px;
  padding:26px 0;border-bottom:1px solid var(--hairline);
}
@media(min-width:880px){.trade .sector{grid-template-columns:220px 1fr}}
.trade .sector .nm{font-size:.75rem;padding-top:5px}
.trade .sector p{max-width:36em}

/* ============================================================
   THE WORKSHOP — the wedge (bone room)
   ============================================================ */
.workshop{background:var(--bone)}
.workshop .cols{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,72px)}
@media(min-width:980px){.workshop .cols{grid-template-columns:7fr 5fr;align-items:start}}
.workshop .plates{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:start}
.workshop .plates .plate:first-child{aspect-ratio:3/2;grid-column:1/-1;background:var(--paper)}
.workshop .plates .plate:last-child{aspect-ratio:4/5;background:#E9E3D4;max-width:min(46vw,320px);justify-self:end}
.workshop .copy p{max-width:32em}
.workshop .copy p + p{margin-top:1.2em}
.workshop .forword{margin-top:2em;padding-top:1.6em;border-top:1px solid var(--hairline)}
.workshop .forword .nm{font-size:.6875rem;color:var(--stone);display:block;margin-bottom:10px}

/* ============================================================
   THE APPROACH — five steps, five lines
   ============================================================ */
.approach ol{list-style:none;border-top:1px solid var(--hairline);margin-top:8px}
.approach li{
  position:relative;display:grid;grid-template-columns:1fr;gap:10px 28px;
  padding:44px 0 40px;border-bottom:1px solid var(--hairline);align-items:baseline;overflow:hidden;
}
@media(min-width:880px){.approach li{grid-template-columns:280px 1fr;padding:56px 0 52px}}
/* sheet numerals, sunk into the paper — texture, not furniture */
.approach .num{
  position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  font-size:clamp(88px,12vw,150px);line-height:1;color:var(--green);opacity:.07;
  z-index:0;pointer-events:none;user-select:none;letter-spacing:0;text-indent:0;
}
.approach .st{font-size:.75rem;position:relative;z-index:1}
.approach li p{max-width:36em;font-size:.9375rem;position:relative;z-index:1;margin:0}
.approach .close{margin-top:clamp(36px,5vw,52px);max-width:34em}

/* ============================================================
   THE JOURNAL — typographic cards, no imagery (book's card grammar
   minus the plate: hairline keyline · mono meta · tracked title)
   ============================================================ */
.journal .jvisit-line{max-width:34em;margin-top:6px}
.journal .jvisit{display:inline-block;margin-top:26px;font-size:.6875rem}
.journal .jgrid{display:grid;grid-template-columns:1fr;gap:var(--gut);margin-top:8px}
@media(min-width:720px){.journal .jvisit-line{max-width:34em;margin-top:6px}
.journal .jvisit{display:inline-block;margin-top:26px;font-size:.6875rem}
.journal .jgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.journal .jvisit-line{max-width:34em;margin-top:6px}
.journal .jvisit{display:inline-block;margin-top:26px;font-size:.6875rem}
.journal .jgrid{grid-template-columns:1fr 1fr 1fr}}
.jcard{border:1px solid var(--hairline);padding:30px 28px;transition:border-color .3s var(--ease)}
.jcard:hover,.jcard:focus-within{border-color:var(--brass)}
.jcard .jmeta{font-size:.625rem;color:var(--stone);display:block}
.jcard h3{font-family:var(--sans);font-weight:300;font-size:1.0625rem;letter-spacing:.08em;text-transform:uppercase;margin-top:16px;line-height:1.45}
.jcard p{font-size:.9375rem;line-height:1.7;margin-top:12px;max-width:30em;color:var(--green)}
.jcard .jread{display:inline-block;margin-top:20px;font-size:.6875rem}

/* ============================================================
   THE PROMISE — green band (the hoarding echoes back)
   ============================================================ */
.promise{
  position:relative;background:linear-gradient(180deg,#1C2A22 0%,#233729 45%,#2E4A38 100%);color:var(--bone);text-align:center;
  padding-block:clamp(90px,13vw,170px);
}
.promise::before{
  content:'';position:absolute;inset-inline:0;top:0;height:110px;pointer-events:none;
  background:radial-gradient(60% 110px at 50% 0,rgba(216,168,85,.18),rgba(216,168,85,0) 74%);
}
.promise .tag{font-size:clamp(1.15rem,3.4vw,2rem);letter-spacing:.3em;text-indent:.3em;color:var(--bone)}
.promise .rule{width:1px;height:44px;background:var(--brass);margin:34px auto 0}
.promise .r3{margin:34px auto 0;font-size:clamp(1.25rem,3vw,1.8rem);max-width:20em;color:var(--bone);opacity:.92;text-wrap:balance}

/* ============================================================
   CONTACT — the table
   ============================================================ */
.contact .r3{font-size:clamp(1.6rem,4.4vw,2.6rem);max-width:16em}
.contact .say{margin-top:26px;max-width:32em}
.contact .acts{margin-top:clamp(40px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:22px 34px}
.btn{
  display:inline-block;background:var(--green);color:var(--bone);
  border:1px solid var(--green);padding:19px 38px;
  font-size:.6875rem;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.btn:hover,.btn:focus-visible{border-color:var(--brass)}
.btn:active{border-color:var(--brass);background:var(--forest)}
.contact .alt{display:flex;flex-direction:column;gap:8px}
.contact .alt .r4{font-size:.75rem}
.contact .alt .em{font-size:.6875rem}

/* ============================================================
   FOOTER — the plate by the door
   ============================================================ */
/* THE SHADOW GAP (owner ruling 2026-07-18) — how the page meets the ground.
   The old footer swelled to #2E4A38 through its middle against the flat
   #233729 either side of it, so it read as a pale slab dropped onto a dark
   run. The cure is identity, not blending: the footer holds the SAME forest
   as the section above, and the joint is declared the way a workshop would
   declare it — a recessed reveal with one brass arris catching light along
   its lower lip. Depth comes from shadow, never pigment: the head and hem
   sink, the middle rests at true forest.
   NEVER give this element a background lighter than var(--forest).
   isolation:isolate is load-bearing — .foot is position:relative/z-index:auto
   and creates NO stacking context, so a z-index:-1 layer would otherwise drop
   behind the footer's own background; and z-index:0 would paint the layer
   ABOVE the non-positioned mark (that trap was live here: at 375px the old
   90px ::before overlapped the 72px padding-top and washed over the mark). */
.foot{position:relative;isolation:isolate;background:var(--forest);color:var(--bone);text-align:center;
  padding:clamp(72px,9vw,110px) var(--mx) 0;
  box-shadow:
    inset 0 clamp(60px,9vw,110px) clamp(56px,8vw,96px) calc(-1*clamp(56px,8vw,96px)) rgba(0,0,0,.34),
    inset 0 calc(-1*clamp(70px,10vw,130px)) clamp(64px,9vw,110px) calc(-1*clamp(64px,9vw,110px)) rgba(0,0,0,.30)}
/* the joint: the reveal, and the brass arris on its lower lip. Masked so both
   die before the page edge and never T-junction the body's own 1px ring above 1461px */
.foot::before{content:'';position:absolute;z-index:-1;inset-inline:0;top:0;pointer-events:none;
  height:clamp(18px,2.4vw,28px);
  background:
    linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.16) 46%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,transparent 0 calc(100% - 1px),var(--brass-line-dark) calc(100% - 1px));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* light under the door — the warm source sits below the page, so only its tail
   licks up into the particulars and the bone type never sits in the bright part */
.foot::after{content:'';position:absolute;z-index:-1;inset-inline:0;bottom:0;pointer-events:none;
  height:clamp(90px,13vw,150px);
  background:radial-gradient(72% 130px at 50% 118%,rgba(216,168,85,.09),rgba(216,168,85,0) 72%)}
.foot .lockup-a{--s:1.5;margin-inline:auto}
.foot .lines{margin-top:clamp(40px,5vw,56px);display:flex;flex-direction:column;gap:12px;align-items:center}
.foot .lines .r4{font-size:.6875rem;color:var(--bone);opacity:.82;line-height:2}
.foot .social{margin-top:26px;font-size:.6875rem}
/* the particulars: an incised scribe line, not a panel. The old
   background:var(--forest) slab cut a hard step across the ground; one dark
   pixel over one bone pixel is a groove, and there is no second material to
   step to because the footer is one value throughout. */
.foot .legal{
  margin-top:clamp(48px,6vw,64px);background:none;
  border-top:1px solid rgba(0,0,0,.45);
  box-shadow:inset 0 1px 0 rgba(236,231,220,.055);
  margin-inline:calc(-1*var(--mx));padding:26px var(--mx) calc(30px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.foot .legal p{font-size:.6875rem;line-height:1.9;color:var(--bone);opacity:.55;max-width:56em}

/* ============================================================
   WHATSAPP — the religion: one thumb, in the dark
   ============================================================ */
.wa{
  position:fixed;z-index:50;
  right:clamp(16px,4vw,30px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  background:var(--green);color:var(--bone);
  border:1px solid rgba(236,231,220,.5);
  padding:15px 24px;font-size:.625rem;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  transition:border-color .25s var(--ease),opacity .4s var(--ease),transform .4s var(--ease);
}
.wa:hover,.wa:focus-visible{border-color:var(--brass)}
.wa:active{border-color:var(--brass);background:var(--forest)}
.wa.is-away{opacity:0;pointer-events:none;transform:translateY(10px)}

/* ---------- settle-in (motion = the hinge; opens, settles, engages) ----------
   gated behind html.js so content is never hidden without JavaScript */
.js [data-settle]{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js [data-settle].is-set{opacity:1;transform:none}
.plate > img{transform:scale(1.02);transition:transform 1.2s var(--ease)}
.is-set .plate > img,.plate > img.is-set{transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-settle]{opacity:1;transform:none;transition:none}
  .hero .seam{transform:scaleY(1);animation:none}
  .hero.is-in .seam{animation:none}
  .plate > img{transform:none;transition:none}
  .hdr{transition:none}
}

/* ============================================================
   AFTERGLOW · round 11 — the glow-up (appended; cascade wins)
   ============================================================ */

/* grain — plaster, not pixels */
.grain{position:relative}
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.grain > *{position:relative;z-index:1}

/* the workshop — second dark movement, light escaping the joint above */
.workshop{
  color:var(--bone);
  background:linear-gradient(180deg,#141F19 0%,#1C2A22 55%,#233729 100%);
}
.workshop::before{
  content:'';position:absolute;inset-inline:0;top:0;height:110px;pointer-events:none;z-index:1;
  background:radial-gradient(60% 110px at 50% 0,rgba(216,168,85,.16),rgba(216,168,85,0) 74%);
}
.workshop .sect-label{color:rgba(236,231,220,.55)}
.workshop .sect-title{color:var(--bone)}
.workshop .copy p{color:rgba(236,231,220,.88)}
.workshop .forword{border-top-color:rgba(236,231,220,.18)}
.workshop .forword .nm{color:rgba(236,231,220,.55)}
.workshop .forword p{color:rgba(236,231,220,.88)}
.workshop .plate{border-color:rgba(236,231,220,.14)}

/* approach — filmstrip chips from the shoot */
.approach .chip{display:none}
@media(min-width:980px){
  .approach li{grid-template-columns:240px 1fr 200px}
  .approach .chip{display:block;grid-column:3;align-self:center}
  .approach .chip img{width:200px;height:96px;object-fit:cover;display:block;border:1px solid var(--hairline)}
  .approach li p{grid-column:2;margin:0}
}

/* journal teaser — the reading corner sits beside the words */
.journal .jpeek{margin-top:clamp(36px,5vw,56px)}
.journal .jpeek img{width:100%;height:auto;display:block;border:1px solid var(--hairline);aspect-ratio:21/9;object-fit:cover}
@media(min-width:980px){
  .journal .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,6vw,90px);align-items:center}
  .journal .jpeek{margin-top:0;grid-column:2;grid-row:1/span 3;aspect-ratio:auto}
  .journal .jpeek img{aspect-ratio:3/2}
}

/* ============================================================
   ROUND 12 — approach redrawn · header descriptor 50% · glass
   ============================================================ */

/* approach — the numeral is the backdrop, the text overlays it,
   the plate sits right and bridges the rows */
.approach ol{border-top:0}
.approach li{
  display:grid;grid-template-columns:1fr;gap:20px;
  padding:clamp(52px,7vw,88px) 0;border-bottom:1px solid var(--hairline);
  position:relative;overflow:visible;align-items:center;
}
.approach .num{
  position:absolute;left:-10px;top:12px;transform:none;
  font-size:clamp(120px,16vw,220px);line-height:.8;opacity:.06;z-index:0;
}
.approach .st{position:relative;z-index:1;font-size:.8125rem;padding:clamp(30px,4vw,54px) 0 0 clamp(34px,5vw,64px)}
.approach li p{position:relative;z-index:1;max-width:30em;font-size:1rem;line-height:1.85;padding-left:clamp(34px,5vw,64px)}
.approach .chip{display:block;position:relative;z-index:2}
.approach .chip img{width:100%;max-width:560px;aspect-ratio:3/2;height:auto;object-fit:cover;border:1px solid var(--hairline)}
@media(min-width:980px){
  .approach li{grid-template-columns:minmax(0,7fr) minmax(300px,5fr);column-gap:clamp(56px,7vw,120px)}
  .approach .num{top:50%;transform:translateY(-50%)}
  .approach .st{grid-column:1;padding-top:0}
  .approach li p{grid-column:1}
  .approach .chip{grid-column:2;grid-row:1/span 2;justify-self:end;margin-block:calc(clamp(52px,7vw,88px)*-.5)}
}
@media(max-width:979px){
  .approach .chip{margin-top:6px}
  .approach .chip img{max-width:none;aspect-ratio:16/9}
}

/* header — descriptor at 50% of the wordmark (owner ruling 2026-07-08), gap stays tight */
.hdr .lockup-b .ds{font-size:9.5px}

/* glass — for hardware that floats; walls stay plaster */
.hdr:not(.is-solid){
  background:rgba(16,26,21,.34);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
}
.hdr.is-solid{
  background:rgba(246,241,228,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:0 1px 0 var(--hairline);
}
.wa{
  background:rgba(26,42,33,.58);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  border-color:rgba(236,231,220,.4);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr:not(.is-solid){background:linear-gradient(180deg,rgba(20,31,25,.5),rgba(20,31,25,.2))}
  .hdr.is-solid{background:var(--paper)}
  .wa{background:var(--green)}
}

/* round 13 — the pill skews brass: smoked brass glass, quiet */
.wa{
  background:rgba(150,118,56,.30);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);
  border-color:rgba(226,196,128,.45);
}
.wa:hover,.wa:focus-visible{border-color:var(--brass);background:rgba(150,118,56,.42)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wa{background:rgba(89,74,40,.92)}
}

/* ============================================================
   ROUND 15 — THE BRASS SWEEP (owner ruling 2026-07-08)
   Accent lines, rules and picture keylines move to brass —
   hairline weights, quiet alphas. Solid brass stays where the
   hand goes: hover, focus, active. Appended; cascade wins.
   ============================================================ */
:root{
  --brass-line:rgba(194,160,79,.38);       /* keyline on paper/bone */
  --brass-line-dark:rgba(216,168,85,.30);  /* keyline on green/dark grounds */
  --hairline:var(--brass-line);            /* every rule inherits the seam */
  --hairline-bone:var(--brass-line-dark);
}
/* dark-ground literals that predate the tokens */
.workshop .plate{border-color:var(--brass-line-dark)}
.workshop .forword{border-top-color:var(--brass-line-dark)}
.hero-scope{border-top-color:var(--brass-line-dark)}

/* the contact button joins the pill: brass-smoked glass hardware */
.contact .btn{
  background:rgba(150,118,56,.30);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);
  border-color:rgba(226,196,128,.45);color:var(--bone);
}
.contact .btn:hover,.contact .btn:focus-visible{border-color:var(--brass);background:rgba(150,118,56,.42)}
.contact .btn:active{background:rgba(89,74,40,.5)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .contact .btn{background:var(--green);color:var(--bone)}
}

/* ============================================================
   ROUND 19 — sector glyphs: fragments of our own working
   drawings, never icons. Hairline green ink, one brass
   dimension each. Desktop only; the thumb keeps its quiet.
   ============================================================ */
.trade .sector .glyph{display:none}
@media(min-width:880px){
  .trade .sector{grid-template-columns:220px minmax(0,1fr) clamp(170px,18vw,220px)}
  .trade .sector .glyph{display:block;align-self:center;justify-self:end;width:100%;max-width:220px;height:auto}
}
.glyph .gl{stroke:var(--green);stroke-opacity:.52;stroke-width:1.4;fill:none;stroke-linecap:butt}
.glyph .gh{stroke:var(--green);stroke-opacity:.3;stroke-width:.8;fill:none;stroke-linecap:butt}
.glyph .gb{stroke:var(--brass);stroke-opacity:.85;stroke-width:1.1;fill:none;stroke-linecap:butt}
.glyph circle.gh{fill:none}
.glyph .cl{stroke-dasharray:10 4 2 4}
.glyph .cone{stroke-dasharray:3 4}

/* ============================================================
   ROUND 24 — the stage · the thread · the motion (2026-07-09)
   Owner rulings: fixed art-direction canvas on vast screens;
   the folio's brass thread carried to the homepage; scroll
   motion with the character of hinges and drawers, not decks.
   ============================================================ */

/* the header returns on every page: subpages ride fixed like home */
body.journal-page,body.project-page,body.folio-page{padding-top:54px}
@media(min-width:1040px){
  body.journal-page,body.project-page,body.folio-page{padding-top:85px}
}

/* the stage — HOLD THE LINE (owner ruling 2026-07-11): the composition
   locks at its designed 1460px width; every wider screen sees the
   identical page. The flanks are the site's own material — warm bone
   with the paper's grain — never a void (owner red pen 2026-07-12). */
@media(min-width:1461px){
  html{
    background-color:#E7E1D1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  }
  body{max-width:1460px;margin-inline:auto;
    box-shadow:0 0 54px rgba(35,55,41,.22),0 0 0 1px var(--brass-line)}
  .hdr{left:50%;right:auto;width:100%;max-width:1460px;transform:translateX(-50%)}
  .hdr.is-hidden{transform:translate(-50%,-102%)}
  .wa{right:calc((100vw - 1460px)/2 + 30px)}
}

/* the thread — one brass hairline walks the homepage, drawn by the
   reader's own scroll (the folio rail, carried forward) */
.curtain::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(194,160,79,0) 0%,var(--brass-line) 5%,var(--brass-line) 95%,rgba(194,160,79,0) 100%);
  transform:scaleY(var(--thread,0));transform-origin:top;
}

/* motion — settle upgraded: titles rise out of their own baseline,
   plates unveil upward like light finding the room, groups stagger */
.js [data-settle] .sect-title,
.js [data-settle] .pj-title{
  clip-path:inset(0 0 110% 0);transform:translateY(16px);
  transition:clip-path .8s var(--ease) .05s,transform .8s var(--ease) .05s;
}
.js [data-settle].is-set .sect-title,
.js [data-settle].is-set .pj-title{clip-path:inset(-2% 0 -6% 0);transform:none}
.plate>img{clip-path:inset(86% 0 0 0)}
.is-set .plate>img,.plate>img.is-set{clip-path:inset(0 0 0 0);transition:transform 1.2s var(--ease),clip-path .9s var(--ease)}
.js .sectors[data-settle] .sector{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .sectors[data-settle].is-set .sector{opacity:1;transform:none}
.js .sectors[data-settle].is-set .sector:nth-child(2){transition-delay:.12s}
.js .sectors[data-settle].is-set .sector:nth-child(3){transition-delay:.24s}
.js .rooms .card:nth-child(3n+2){transition-delay:.08s}
.js .rooms .card:nth-child(3n){transition-delay:.16s}

/* parallax plates: oversized within their frames, steered by scroll */
.plx{will-change:transform;transform:scale(1.12)}
.journal .jpeek{overflow:hidden}
.approach .chip{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .curtain::before{transform:scaleY(1)}
  .js [data-settle] .sect-title,.js [data-settle] .pj-title{clip-path:none;transform:none;transition:none}
  .plate>img{clip-path:none}
  .js .sectors[data-settle] .sector{opacity:1;transform:none;transition:none}
  .plx{transform:none;will-change:auto}
}

/* ============================================================
   ROUND 25 — THE COMMITTEE'S VERDICTS (2026-07-09)
   a · motion: the hero learns to arrive, hands learn to answer,
       the thread earns its keep. b · type: seventeen sizes
       become one scale — the eye exam ends. Appended; cascade wins.
   ============================================================ */

/* a1 · hero entrance — the first three seconds stop being static */
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroImg{from{transform:scale(1.045)}to{transform:scale(1)}}
.js .hero-media img{animation:heroImg 2.6s var(--ease) both}
.js .hero-idx{animation:heroRise .8s var(--ease) .15s both}
.js .hero-title{animation:heroRise .9s var(--ease) .3s both}
.js .hero-stand{animation:heroRise .9s var(--ease) .5s both}
.js .hero-scope{animation:heroRise .9s var(--ease) .68s both}
.js .hero .cue{animation:heroRise .9s var(--ease) 1s both}

/* a2 · hover intent — motion where the hand goes */
.card .plate img{transition:transform 2.4s var(--ease),clip-path .9s var(--ease)}
.card:hover .plate img,.card:focus-within .plate img{transform:scale(1.04)}
.jread,.jvisit,.folio-go{transition:transform .45s var(--ease),text-decoration-color .25s var(--ease)}
.jread:hover,.jvisit:hover,.folio-go:hover{transform:translateX(4px)}
.btn,.wa{transition:transform .35s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.btn:hover,.wa:hover{transform:translateY(-1px)}

/* a3 · pages breathe into each other instead of flashing white */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.4s}
::view-transition-new(root){animation-duration:.4s}

/* a4 · the thread seats itself: present, and carrying a light */
.curtain::before{
  width:1.5px;
  background:linear-gradient(180deg,rgba(194,160,79,0) 0%,rgba(194,160,79,.55) 5%,rgba(194,160,79,.55) 95%,rgba(194,160,79,0) 100%);
}
.curtain::after{
  content:'';position:absolute;left:50%;top:calc(var(--thread,0)*100%);
  width:5px;height:5px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--brass);box-shadow:0 0 14px 3px rgba(216,168,85,.4);
  opacity:min(calc(var(--thread,0)*10),1);pointer-events:none;z-index:0;
}

@media(prefers-reduced-motion:reduce){
  .js .hero-media img,.js .hero-idx,.js .hero-title,.js .hero-stand,.js .hero-scope,.js .hero .cue{animation:none}
  .card:hover .plate img,.card:focus-within .plate img{transform:none}
  .jread:hover,.jvisit:hover,.folio-go:hover{transform:none}
  .btn:hover,.wa:hover{transform:none}
  .curtain::after{display:none}
  @view-transition{navigation:none}
}

/* b · the type mesh — every job gets exactly one size.
   Labels/eyebrows/tags/CTAs collapse to the 11px caps workhorse;
   reading text to 17px (cards keep 15px by design); the voice to
   28px with its 42px close (a true 1.5×); displays step 30/40/54. */
.hero-scope span{font-size:.6875rem}
.card .tag{font-size:.6875rem}
.wa{font-size:.6875rem}
.trade .sector .nm{font-size:.6875rem}
.approach .st{font-size:.6875rem}
.contact .alt .r4{font-size:.6875rem}
.approach li p{font-size:1.0625rem}
.hero-stand{font-size:clamp(1.2rem,2.7vw,1.75rem)}
.promise .r3{font-size:clamp(1.2rem,2.7vw,1.75rem)}
.contact .r3{font-size:clamp(1.6rem,4.4vw,2.625rem)}
.promise .tag{font-size:clamp(1.4rem,4vw,2.5rem);letter-spacing:.2em;text-indent:.2em}
h2.sect-title{font-size:clamp(1.3rem,3.1vw,1.875rem)}
.hero-title{font-size:clamp(1.7rem,5vw,3.375rem)}
.trade .lead{font-size:clamp(1.15rem,2.4vw,1.5rem)}

/* ============================================================
   ROUND 26 — HIERARCHY VERDICTS (2026-07-09): one vertical meter,
   a complete title system, hinged cuts. The committee's ruling:
   fix the meter before any further motion. Appended; cascade wins.
   ============================================================ */

/* the promise rejoins the page's universal 140px meter */
.promise{padding-block:clamp(72px,10vw,140px)}

/* every section speaks the same way: promise gains its kicker */
.promise .sect-label{display:block;color:rgba(236,231,220,.55);margin-bottom:24px}

/* the journal's 170px head-gap was margin stacking inside the grid
   (no collapse in grid context): kill the row gap, keep the meter */
@media(min-width:980px){
  .journal .wrap{column-gap:clamp(40px,6vw,90px);row-gap:0}
  .journal .jvisit{margin-top:0}
}

/* hinge the promise→contact cut the way every other dark joint is
   hinged: light escaping the seam */
.promise::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:110px;pointer-events:none;
  background:radial-gradient(60% 110px at 50% 100%,rgba(216,168,85,.13),rgba(216,168,85,0) 74%);
}

/* ============================================================
   ROUND 27 — THE OWNER'S RED PEN (2026-07-11). Appended; wins.
   ============================================================ */

/* 0 · THE LOCKUP LAW (owner red pen 2026-07-12, corrected 2026-07-13):
   the descriptor holds 66% of the wordmark's WIDTH — one construction,
   universally applied, locked by js/lockup-lock.js on every instance.
   Correction: the descriptor is sized so 66% is its NATURAL set (≈48%
   of the wordmark), NOT a tiny font stretched wide with tracking. At
   these sizes the lock adds only a whisper of spacing, so the line
   reads with presence — never small, never condensed, never spread. */
.hdr .lockup-b .ds{font-size:9px}
.hdr .lockup-b .tx{gap:3px}
/* footer descriptor sits one step up from the header's 9px (owner ruling
   2026-07-14): the footer body copy below is the same Akkurat family and
   overpowers a 9px descriptor, so it breathes at 10px. Header/footer names
   are near-identical (23.75/22.5), so this is a footer-context call, not drift. */
.foot .lockup-a .ds{font-size:10px}
.foot .lockup-a .tx{gap:4px}

/* ROUND 33 (owner ruling 2026-07-14): header NAME enlarged ×1.25 so it reads
   prominently — the mark and the 85px header height are untouched. The
   descriptor is a genuinely smaller, UNDISTORTED letter (the −10% scaleY squash
   is gone; see js/lockup-lock.js) spaced by the H→I lock to the same span. */
.hdr .lockup-b .wm{font-size:23.75px}
.hdr .lockup-b .ds{font-size:9px}
.hdr .lockup-b .tx{gap:4px}
.hdr .lockup-b .div{height:48px}

/* 1 · the homepage thread is DEAD. A positioned decorative layer
   at z-index:0 paints above non-positioned flow content, so the
   line cut across photographs and text like a dead pixel column.
   The folio keeps its rail — that layout orbits it; this one never
   did. Bead dies with it. */
.curtain::before,.curtain::after{content:none}

/* 2 · the red pen on "font sizing" at the cards: the card titles
   were running a fifth, unauthorized register (.14em); they join
   R2's tracking, and card copy joins the one body size */
.card h3{letter-spacing:.2em;text-indent:.2em}
.card p{font-size:1.0625rem}

/* 2b · the card is the door; the link is just its handle (owner,
   2026-07-11): whole card clickable via stretched link, the
   "view the project" line drops to a small quiet mono-weight */
.card{position:relative}
.card .jread{font-size:.625rem;color:var(--stone);margin-top:16px;display:inline-block}
.card .jread::after{content:'';position:absolute;inset:0;cursor:pointer;z-index:3}
.card .meta{margin-top:16px}
.card h3{margin-top:10px}
.card p{margin-top:12px}

/* 3 · the pill was washed to illegibility: deeper smoke, full ink */
.wa{background:rgba(84,68,36,.6);border-color:rgba(226,196,128,.65);color:var(--bone)}
.wa:hover,.wa:focus-visible{background:rgba(84,68,36,.74);border-color:var(--brass)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wa{background:rgba(56,45,24,.95)}
}

/* round 19b — the glyphs grow up into sketches: architect's ink
   drawings multiplied onto the paper, no frame, no photo box;
   edges dissolve so the drawing sits ON the page, not in it */
.trade .sector img.glyph{
  mix-blend-mode:multiply;max-width:280px;border:0;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 48%, #000 48%, transparent 90%);
  mask-image:radial-gradient(72% 72% at 50% 48%, #000 48%, transparent 90%);
}
@media(min-width:880px){
  .trade .sector{grid-template-columns:220px minmax(0,1fr) clamp(200px,21vw,280px);align-items:center}
}

/* ============================================================
   ROUND 18 — the workshop rejoins the room (owner: the dark
   one-off read as an afterthought). Bone ground, the page's own
   ink and scale; dark movements remain the bookends only —
   hero, promise, footer. Appended; cascade wins.
   ============================================================ */
.workshop{color:var(--green);background:var(--bone)}
.workshop::before{content:none}
.workshop .sect-label{color:var(--stone)}
.workshop .sect-title{color:var(--green)}
.workshop .copy p{color:var(--green)}
.workshop .forword{border-top-color:var(--brass-line)}
.workshop .forword .nm{color:var(--stone)}
.workshop .forword p{color:var(--green)}
.workshop .plate{border-color:var(--brass-line)}

/* ROUND 16 retired 2026-07-09 — the ambient hero video failed and is gone. */

/* ============================================================
   ROUND 34 — THE MOBILE MENU (owner mandate 2026-07-14: the scene
   register runs throughout). Below 1040px the header carries a
   two-bar mark opening a full pine panel; desktop keeps the five
   visible words. Driven by js/menu.js — no inline scripts.
   ============================================================ */
.mnu{display:none;background:none;border:0;padding:10px;cursor:pointer}
.mnu span{display:block;width:28px;height:1.5px;background:var(--brass);transition:transform .32s var(--ease)}
.mnu span+span{margin-top:8px}
body.menu-open .mnu span:first-child{transform:translateY(4.75px) rotate(45deg)}
body.menu-open .mnu span:last-child{transform:translateY(-4.75px) rotate(-45deg)}
@media(max-width:1039px){
  .mnu{display:block}
  .hdr .mob-contact{display:none}
}
.mpanel{position:fixed;inset:0;z-index:80;background:var(--forest);color:var(--bone);
  opacity:0;pointer-events:none;transition:opacity .32s var(--ease);overflow-y:auto}
body.menu-open .mpanel{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.mpanel-in{padding:calc(85px + 6vh) var(--mx) 8vh;display:flex;flex-direction:column;gap:4px}
.mp-link{color:var(--bone);text-decoration:none;font-size:clamp(1.3rem,6vw,1.8rem);font-weight:300;
  padding:12px 0;border-bottom:1px solid var(--hairline-bone)}
.mp-sub{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:22px}
.mp-sub a{color:var(--bone);opacity:.75;text-decoration:none;font-size:.625rem;line-height:1.5}
.mp-acts{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.mp-acts .tel{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--bone);opacity:.85}
.mp-acts .sc-btn{border:1px solid var(--hairline-bone);color:var(--bone);padding:13px 26px;
  font-family:var(--sans);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
@media(prefers-reduced-motion:reduce){.mpanel,.mnu span{transition:none}}
/* menu open: the header rides above the panel — the crossed bars stay reachable,
   and the bar sheds its paper so the lockup sits in bone on the pine */
body.menu-open .hdr{z-index:90;transform:none}
body.menu-open .hdr.is-solid{background:transparent;box-shadow:none;color:var(--bone)}
body.menu-open .hdr.is-solid .ds{color:var(--bone);opacity:.85}

/* THE STANDARD, IN THE HOUSE VOICE (owner ruling 2026-07-18): wherever a
   schedule states the standard, "Built to remain" is set in Canela — the
   tagline never sets in the working sans. Specificity beats .facts dd
   (.875rem) and .pj-facts dd (.9375rem), whatever the load order. */
.facts dd.btr,.pj-facts dd.btr{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:1.0625rem;letter-spacing:.005em;line-height:1.45}
.b--forest .facts dd.btr{color:var(--bone)}

/* page-to-page: one quiet crossfade between rooms of the site (browsers that
   know the view-transition API; everyone else navigates as before) */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
}