/* ============================================================
   DEBELL DESIGN — "NOCTURNE"
   · Real logo SVG traced from dbd-logo-primary-v1.ai
     (bold D letterform, two filled paths, exact geometry)
   · Editorial refinement pass (Jul 14 2026): dead carousel +
     before/after CSS removed, Resilient uses .leg-table rows,
     wider .stack rhythm, focus-visible states added
   ============================================================ */
:root{
  --black:#141414;
  --black-2:#1B1B1B;
  --panel:#222220;
  --text:#F2F1EC;
  --body-t:#C9C8C1;
  --soft:#ADACA5;
  --leaf:#E6DFCE;
  --leaf-d:#CFC7B2;
  --line:#2E2E2C;
  --line-2:#3A3A37;
  --disp:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* display ramp (review pass Jul 14 2026): page title / section head — one scale, not per-section eyeballing */
  --h-page:clamp(38px,5.5vw,76px);
  --h-section:clamp(30px,4vw,56px);
  --max:1380px;
  --pad:clamp(22px,4.5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Root overflow guard 2026-08-04 (cross-browser audit, real WebKit): the .rv-r
   reveal-from-right offsets (and one 378px hero image) poked ~10px past a 375px
   viewport, giving iOS a side-to-side wobble. `clip` not `hidden` — clip never
   creates a scroll container, so .proj-story .sticky keeps working. */
html{overflow-x:clip}
[id]{scroll-margin-top:104px} /* anchor targets clear the fixed 88px header */
body{font-family:var(--body);color:var(--text);background:var(--black);font-size:19px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--leaf);color:var(--black)}
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.06;letter-spacing:-.015em;color:var(--text)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eb{font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--leaf)}
.eb.dim{color:var(--soft)}
/* Reveal system (motion pack Jul 14 2026): uses the `translate` property,
   not `transform`, so reveals never fight the hover transforms cards
   already have. --d = per-element stagger delay (set by nth-child rules
   or the .d1/.d2/.d3 utilities in the MOTION PACK block at end of file).
   Scoped to .js (set by a one-line head script) so content is NEVER
   hidden when JavaScript fails — no-JS visitors get the full page. */
.js .rv,.js .rv-l,.js .rv-r{opacity:0;transition:opacity .55s var(--ease) var(--d,0s),translate .55s var(--ease) var(--d,0s)}
.js .rv{translate:0 14px}
.js .rv-l{translate:-18px 0}
.js .rv-r{translate:18px 0}
.rv.in,.rv-l.in,.rv-r.in{opacity:1;translate:0 0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.js .rv,.js .rv-l,.js .rv-r{opacity:1;translate:none;transition:none}html{scroll-behavior:auto}.hero h1 .ln span{animation:none!important;transform:none!important}}

/* === LOGO MARK — real D letterform traced from dbd-logo-primary-v1.ai ===
   Two filled paths: outer arc (the D curve) + rectangular counter
   ViewBox 84×84, paths derived from PDF content stream object 50.
   Renders cleanly at 24px–120px. */
.mark{display:inline-flex;align-items:center;gap:12px}
.mark svg{height:32px;width:auto;display:block}
.mark .wm{font-family:var(--disp);font-weight:500;letter-spacing:.18em;font-size:16px;line-height:1;color:var(--text)}
.mark .wm small{display:block;font-weight:300;letter-spacing:.42em;font-size:11.5px;margin-top:3px;color:var(--soft)}

/* === NAV === */
/* backdrop-filter lives on a ::before, not on header itself (2026-07-17, real-WebKit repro):
   filter/backdrop-filter on an element establishes a containing block for its position:fixed
   descendants in WebKit — since the off-canvas .menu below is fixed AND nested inside header,
   that clamped the open mobile menu to header's own 88px box instead of the viewport, showing
   a translucent, squished overlay on iOS Safari (confirmed byte-for-byte via Playwright webkit). */
header{position:fixed;top:0;left:0;right:0;z-index:50;isolation:isolate;border-bottom:1px solid transparent;transition:border-color .3s}
header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,20,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
header.scrolled{border-bottom-color:var(--line)}
.nav{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:88px;display:flex;align-items:center;justify-content:space-between}
.menu{display:flex;gap:clamp(18px,2.8vw,42px);align-items:center}
.menu a{font-family:var(--body);font-size:16px;font-weight:500;padding:8px 0;position:relative;color:var(--text)}
.menu a:not(.cta)::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--leaf);transition:width .3s}
.menu a:not(.cta):hover::after{width:100%}
.menu a[aria-current="page"]:not(.cta)::after{width:100%}
.menu a.cta{background:var(--leaf);color:var(--black);padding:14px 26px;font-weight:600;transition:background .25s}
.menu a.cta:hover{background:#FFFFFF}
.burger{display:none;background:none;border:none;cursor:pointer;padding:10px;z-index:60;color:var(--text)}
.burger span{display:block;width:26px;height:2px;background:currentColor;margin:6px 0;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:920px){
  /* Off-canvas menu is scoped to .js — with scripts unavailable the menu
     falls back to a plain wrapped row so navigation always works. */
  .js .menu{position:fixed;inset:0;background:var(--black);flex-direction:column;justify-content:center;gap:34px;transform:translateX(100%);visibility:hidden;transition:transform .45s cubic-bezier(.4,0,.1,1),visibility 0s linear .45s}
  .js .menu.open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.4,0,.1,1),visibility 0s}
  .js .menu a{font-size:26px;font-family:var(--disp);font-weight:400}
  .js .menu a.cta{font-size:18px}
  .js .burger{display:block}
  html:not(.js) .menu{flex-wrap:wrap;justify-content:flex-end;gap:14px;padding:10px 0}
  html:not(.js) .nav{height:auto;min-height:88px;flex-wrap:wrap}
}

/* === HERO === */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--black)}
.hero .ph{position:absolute;inset:0}
/* Warmth calibration (review pass Jul 14 2026): let the photography carry its
   own warmth — the dusk photos already have charcoal built in. Scrim alone
   does the legibility work where type overlays. */
.hero .ph img{width:100%;height:100%;object-fit:cover;opacity:.85}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,20,.97) 0%,rgba(20,20,20,.62) 35%,rgba(20,20,20,.4) 65%,rgba(20,20,20,.26) 100%)}
.hero .crescent{position:absolute;top:-14%;right:-18%;width:min(84vh,820px);height:min(84vh,820px);z-index:1;pointer-events:none}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(60px,8vw,112px)}
.hero .eb{display:block;margin-bottom:24px}
/* max-width 14ch→16ch 2026-08-04 (Sharon's call): the authored 3-line lockup measures
   15.2/15.8/13.7ch — at 14ch it wrapped to five lines on every desktop width. */
.hero h1{font-size:clamp(44px,7vw,102px);font-weight:500;letter-spacing:-.025em;max-width:16ch;line-height:1.0;text-shadow:0 2px 24px rgba(20,20,20,.55)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
/* Resting state must be VISIBLE (bug 2026-08-04: a restarted animation — window stretch /
   monitor change — left the headline permanently hidden behind the mask on a reader's Chrome).
   The hidden position lives only in the from-keyframe; `backwards` fill holds it during the
   stagger delays. */
.hero h1 .ln span{display:inline-block;animation:rise 1s cubic-bezier(.16,.8,.2,1) backwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.12s}
.hero h1 .ln:nth-child(3) span{animation-delay:.24s}
.hero h1 .gr{color:var(--leaf)}
/* Mobile (Gemini review Jul 16 2026): the 44px clamp floor made the manual
   three-line lockup rewrap clumsily under ~430px — step the size down so each
   .ln stays a single line on phones. */
@media(max-width:640px){.hero h1{font-size:clamp(24px,7.8vw,44px);max-width:none}}
@keyframes rise{from{transform:translateY(112%)}to{transform:none}}
.hero .sub{color:var(--text);max-width:52ch;font-size:clamp(19px,1.5vw,22px);margin-top:28px;line-height:1.7;text-shadow:0 1px 16px rgba(20,20,20,.7)}
.hero .hcta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:17px;padding:18px 34px;cursor:pointer;transition:.25s;border:2px solid transparent}
.btn.solid{background:var(--leaf);color:var(--black)}
.btn.solid:hover{background:#FFFFFF}
.btn.ghost{border-color:rgba(242,241,236,.55);color:var(--text)}
.btn.ghost:hover{border-color:var(--text);background:rgba(242,241,236,.08)}
.hero .scrollcue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;color:var(--soft);font-size:13px;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl}
@media(max-width:640px){.hero .scrollcue{display:none}} /* 2026-07-16 audit: overlapped the "See the work" button at 375px */

/* === INTRO === */
.intro{padding:clamp(84px,11vw,160px) 0;background:var(--black)}
.intro .lead{font-family:var(--disp);font-weight:400;font-size:var(--h-section);max-width:24ch;line-height:1.16;letter-spacing:-.015em;color:var(--text)}
.intro .lead b{font-weight:500;color:var(--leaf)}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,90px);align-items:start;margin-top:clamp(38px,4vw,58px)}
@media(max-width:860px){.intro-grid{grid-template-columns:1fr;gap:30px}}
.intro .note{color:var(--body-t);font-size:19px;max-width:54ch;line-height:1.75}
.creds{margin-top:30px;display:flex;flex-direction:column}
.creds li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid var(--line);font-size:17px}
.creds li:last-child{border-bottom:1px solid var(--line)}
.creds b{font-weight:600;color:var(--text)}
.creds span{color:var(--soft);text-align:right}
@media(min-width:861px){
  .intro .creds{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(24px,3vw,48px);margin-top:clamp(44px,5vw,72px)}
  .intro .creds li{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:8px;padding:22px 0;border-bottom:1px solid var(--line)}
  .intro .creds span{text-align:left}
}

/* === DRAWING EXAMPLES (process page phase map) === */
.drawex{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);margin-top:clamp(44px,5vw,72px)}
.drawex figure{margin:0;background:var(--black-2);border:1px solid var(--line)}
.drawex img{width:100%;height:auto;display:block}
.drawex figcaption{padding:14px 16px;font-size:16px;line-height:1.6;color:var(--soft)}
.drawex figcaption b{color:var(--text);font-weight:600}
@media(max-width:860px){.drawex{grid-template-columns:1fr}}

/* === WORK === */
.work-head{padding:0 var(--pad);max-width:var(--max);margin:0 auto clamp(44px,5vw,76px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.work-head h1,.work-head h2{font-size:var(--h-page);font-weight:500;letter-spacing:-.02em;margin-top:14px}
.idx{font-family:var(--disp);font-weight:300;font-size:17px;letter-spacing:.12em;color:var(--soft)}
.work-lede{color:var(--body-t);max-width:60ch;font-size:19px;line-height:1.75;margin-top:16px}
.work-note{font-size:15px;color:var(--soft);font-style:italic;max-width:74ch;margin:0 auto;text-align:center;padding:0 var(--pad);line-height:1.7}

/* === ON THE BOARDS === */
.boards{background:var(--black-2);padding:clamp(84px,10vw,150px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.boards h2{font-size:var(--h-section);font-weight:500;letter-spacing:-.02em;max-width:20ch;margin:14px 0 18px}
.boards .lede{color:var(--body-t);max-width:60ch;font-size:19px;line-height:1.75}
.b-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);margin-top:clamp(44px,5vw,64px)}
@media(max-width:820px){.b-grid{grid-template-columns:1fr}}
.bcard{background:transparent;border:1px solid var(--line);transition:border-color .3s}
.bcard:hover{border-color:var(--line-2)}
.bcard .bviz{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(135deg,#262622 0%,#1C1C19 100%)}
.bcard .bviz img{width:100%;height:100%;object-fit:cover;opacity:.85;filter:saturate(.75) contrast(.92)}
.bcard .bviz svg{position:absolute;inset:0;width:100%;height:100%}
.bcard .bviz .tag{position:absolute;top:18px;left:18px;font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--leaf)}
.bcard .btxt{padding:28px 30px 34px}
.bcard h3{font-size:clamp(22px,2.2vw,28px);font-weight:500;margin-bottom:10px}
.bcard p{color:var(--body-t);font-size:17.5px;line-height:1.7}
.bcard .bmeta{margin-top:18px;font-family:var(--disp);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
/* Boards page (2026-07-16, Sharon's call): ONE uniform two-up grid — every card the same
   hierarchy, 16/9, since all seven get real graphics. has-drawing only brightens the image. */
.boards-full h1{font-size:var(--h-section);font-weight:500;letter-spacing:-.02em;max-width:20ch;margin:14px 0 18px}

/* === APPROACH === */
.approach{padding:clamp(84px,10vw,150px) 0}
.approach h2{font-size:var(--h-section);font-weight:500;letter-spacing:-.02em;max-width:24ch;text-wrap:balance;margin:14px 0 18px}
.approach .lede{color:var(--body-t);max-width:58ch;font-size:19px;line-height:1.75}
.steps{margin-top:clamp(46px,5vw,72px)}
.step{display:grid;grid-template-columns:90px 250px 1fr;gap:clamp(18px,3vw,54px);padding:32px 0;border-top:1px solid var(--line);align-items:baseline}
.step:last-of-type{border-bottom:1px solid var(--line)}
.step .phn{font-family:var(--disp);font-weight:400;font-size:17px;letter-spacing:.1em;color:var(--leaf)}
.step h3{font-size:clamp(23px,2.4vw,30px);font-weight:500}
.step p{color:var(--body-t);font-size:18px;max-width:60ch;line-height:1.75}
@media(max-width:800px){.step{grid-template-columns:1fr;gap:8px}}

/* PHASE RAIL — the process spine (Approach page, 2026-07-17): the full-project
   arc as one vertical progression. Flexes 3->4 phases; the conditional Design
   Development phase gets a hollow node + pill tag. Pure CSS, degrades cleanly. */
.prail{margin-top:clamp(28px,3.5vw,44px)}
.prow{position:relative;padding:0 0 clamp(30px,3.5vw,46px) clamp(34px,5vw,54px)}
.prow:last-child{padding-bottom:0}
.prow::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;background:var(--leaf);z-index:1}
.prow.cond::before{background:transparent;border:1px solid var(--leaf)}
.prow::after{content:"";position:absolute;left:5px;top:8px;bottom:0;width:1px;background:var(--line-2)}
.prow:last-child::after{display:none}
.prow .pnum{display:block;font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.14em;color:var(--leaf);margin-bottom:8px}
.prow h3{font-size:clamp(23px,2.4vw,30px);font-weight:500;line-height:1.12}
.prow .psub{display:block;margin-top:6px;font-family:var(--disp);font-size:15px;letter-spacing:.01em;color:var(--soft)}
.prow .ptag{display:inline-block;margin-top:11px;font-family:var(--disp);font-size:15px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px}
.prow p{color:var(--body-t);font-size:18px;max-width:62ch;line-height:1.75;margin-top:13px}
.prail .prow:nth-child(2){--d:.08s}
.prail .prow:nth-child(3){--d:.16s}
.prail .prow:nth-child(4){--d:.24s}

/* === CLIENTS === */
.clients{background:var(--black-2);padding:clamp(84px,10vw,150px) 0;border-top:1px solid var(--line);position:relative;overflow:hidden}
.clients .crescent{position:absolute;top:-30%;right:-14%;width:min(70vh,640px);height:min(70vh,640px);opacity:.5;pointer-events:none}
.clients .inner{position:relative;z-index:2}
.clients h2{font-size:var(--h-section);font-weight:500;letter-spacing:-.02em;max-width:24ch;margin:14px 0 48px}
/* Client routing rows. Weight bumped 2026-08-03: the section moved above the gallery the
   same day, and at three thin rows between a bold intro and three full-bleed photos it was
   easy to scroll straight past — the one block on the page whose entire job is to be
   noticed. Taller rows, bigger row headings, brighter arrow. No copy added (the 2026-07-17
   one-line-per-door call stands), no layout change, no new colors. `.crow` is used ONLY in
   index.html's clients section — 3 rows, nothing else on the site can be affected. */
.crow{display:grid;grid-template-columns:280px 1fr auto;gap:clamp(20px,3vw,56px);padding:clamp(38px,4vw,54px) 0;border-top:1px solid var(--line-2);align-items:baseline;cursor:pointer;transition:padding-left .3s}
.crow:last-of-type{border-bottom:1px solid var(--line-2)}
.crow:hover{padding-left:12px}
.crow h3{font-size:clamp(26px,2.9vw,38px);font-weight:500}
.crow p{color:var(--body-t);font-size:18.5px;max-width:54ch;line-height:1.75}
.crow .go{font-size:17px;font-weight:600;color:var(--leaf);white-space:nowrap}
@media(max-width:780px){.crow{grid-template-columns:1fr;gap:10px}}

/* === RESILIENT === */
.legend{padding:clamp(84px,10vw,150px) 0}
.legend h2{font-size:var(--h-section);font-weight:500;letter-spacing:-.02em;max-width:21ch;margin:14px 0 18px}
.legend .lede{color:var(--body-t);max-width:60ch;font-size:19px;line-height:1.75}
/* Resilient as quiet squares (Jul 14 2026, Sharon's call): a calm 2×3 grid
   of bordered blocks — number + label + title + text, NO icons — so the
   section stops twinning with the Journal rows below. */
.leg-table{margin-top:clamp(42px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,28px)}
.leg-row{padding:clamp(26px,3vw,40px);border:1px solid var(--line);background:var(--black-2);transition:border-color .3s}
.leg-row:hover{border-color:var(--line-2)}
.leg-row .n{font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.1em;color:var(--leaf);display:block;margin-bottom:18px}
.leg-row .eb{display:block;margin-bottom:8px}
.leg-row h3{font-size:clamp(21px,2vw,26px);font-weight:500}
.leg-row p{color:var(--body-t);font-size:17.5px;margin-top:12px;line-height:1.7;max-width:52ch}
@media(max-width:760px){.leg-table{grid-template-columns:1fr}}
.verify{margin-top:36px;font-size:15px;color:var(--soft);max-width:76ch;font-style:italic;line-height:1.7}

/* === JOURNAL === */
.journal{background:var(--black-2);padding:clamp(84px,10vw,130px) 0;border-top:1px solid var(--line)}
.journal h2{font-size:var(--h-section);font-weight:500;letter-spacing:-.02em;margin:14px 0 44px;max-width:26ch}
.jrow{display:grid;grid-template-columns:170px 1fr auto;gap:clamp(18px,3vw,46px);padding:28px 0;border-top:1px solid var(--line-2);align-items:baseline}
.jrow:last-of-type{border-bottom:1px solid var(--line-2)}
/* Journal subject filter (2026-07-17): .fout hides a filtered-out row (same mechanism
   as the work grid); .jfin re-fades a shown row; .jlast keeps a clean bottom edge on the
   last VISIBLE row when the DOM-last row is hidden. */
.jrow.fout{display:none}
.js .jrow.jfin{animation:gfadein .55s var(--ease) both}
.jrow.jlast{border-bottom:1px solid var(--line-2)}
@media(prefers-reduced-motion:reduce){.js .jrow.jfin{animation:none}}
.jrow h3{font-size:clamp(21px,2.1vw,26px);font-weight:500}
.jrow p{color:var(--body-t);font-size:17.5px;max-width:60ch;margin-top:8px;line-height:1.7}
.jrow .go{font-size:16px;font-weight:600;color:var(--leaf);white-space:nowrap}
.jrow .go.soon{color:var(--soft);font-weight:400;font-style:italic}
@media(max-width:740px){.jrow{grid-template-columns:1fr;gap:8px}}

/* === ABOUT === */
.about{padding:clamp(84px,10vw,150px) 0}
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(34px,5vw,90px);align-items:start}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}
.portrait{aspect-ratio:3/4;background:var(--panel);border:1px solid var(--line-2);position:relative;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:top center}
.about h1,.about h2{font-size:var(--h-section);font-weight:500;letter-spacing:-.02em;max-width:18ch;margin:14px 0 28px}
.about h1{font-size:var(--h-page)} /* about.html page title rides the page ramp */
.about p{margin-bottom:20px;color:var(--body-t);max-width:60ch;line-height:1.8;font-size:19px}

/* === CONTACT === */
.contact{background:var(--black-2);padding:clamp(90px,12vw,160px) 0;border-top:1px solid var(--line);position:relative;overflow:hidden}
.contact .crescent{position:absolute;bottom:-34%;left:-14%;width:min(72vh,700px);height:min(72vh,700px);opacity:.45;pointer-events:none}
.contact .inner{position:relative;z-index:2}
.contact h2{font-size:var(--h-page);font-weight:500;letter-spacing:-.02em;max-width:17ch;margin:18px 0 22px} /* the invitation deliberately rides the page ramp */
.contact .invite{color:var(--body-t);max-width:54ch;font-size:19px;line-height:1.75}
/* Contact grid (alignment fix 2026-07-17): form is the dominant column; the shorter
   contact block is vertically centered so it reads as a deliberate sidebar instead of
   clinging to the top with a big void below. */
.c-grid{display:grid;grid-template-columns:1.25fr 0.85fr;gap:clamp(34px,5vw,90px);margin-top:clamp(44px,5vw,68px);align-items:start}
.c-grid>.rv.d1{align-self:center}
@media(max-width:860px){.c-grid{grid-template-columns:1fr}.c-grid>.rv.d1{align-self:start}}
.fl{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);display:block;margin:24px 0 10px}
.fl:first-child{margin-top:0}
.fi,.fs,.fa{width:100%;padding:17px 17px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);font-family:var(--body);font-size:18px}
.fi::placeholder,.fa::placeholder{color:#8E8D85} /* 4.78:1 on --panel #222220 (was #84837C, 4.19:1) */
.fi:focus,.fs:focus,.fa:focus{outline:2px solid var(--leaf);outline-offset:1px;border-color:var(--leaf)}
/* 2026-07-17 cross-browser audit (real WebKit): a <select> left at appearance:auto renders its
   native OS pull-down chrome in Safari, which doesn't reliably paint the custom dark background/
   text together — the value read correctly in the DOM but was visually blank on screen. Forcing
   appearance:none hands the whole control to our CSS in every engine; the arrow is redrawn by hand
   since the native one goes away with it. */
.fs{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6' fill='none' stroke='%239C9B94' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.fa{min-height:120px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.f2{grid-template-columns:1fr}}
.c-lines li{display:flex;gap:24px;padding:19px 0;border-top:1px solid var(--line-2);font-size:18px}
.c-lines li:last-child{border-bottom:1px solid var(--line-2)}
.c-lines b{font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);min-width:96px;padding-top:4px}
.c-lines a:hover{color:var(--leaf)}
.contact .btn.ghost{margin-top:28px}
.faq{margin-top:clamp(56px,7vw,90px);border-top:1px solid var(--line)}
.faq h3.faq-h{font-family:var(--disp);font-size:15px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--leaf);margin:clamp(40px,5vw,60px) 0 8px}

/* === TESTIMONIAL === */
.testi{padding:clamp(80px,11vw,150px) 0;background:var(--black);border-top:1px solid var(--line)}
.testi .inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);text-align:center}
.testi .eb{display:block;margin-bottom:30px}
.testi blockquote{font-family:var(--disp);font-weight:400;font-size:clamp(24px,3.4vw,40px);line-height:1.28;letter-spacing:-.015em;color:var(--text);margin:0}
.testi blockquote b{color:var(--leaf);font-weight:500}
.testi .attr{margin-top:30px;font-size:16px;color:var(--soft);letter-spacing:.02em}
.testi .attr b{color:var(--body-t);font-weight:600}
/* testimonial wall (moved from inline <style> in index.html) */
.testi .inner{max-width:var(--max)}
.testi .lead-quote{max-width:30ch;margin:0 auto}
.testi blockquote{margin:0}
.testi .wall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(48px,6vw,80px);text-align:left}
@media(max-width:860px){.testi .wall{grid-template-columns:1fr;gap:22px}}
.testi .tq{background:var(--panel);border:1px solid var(--line-2);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.testi .tq:hover{border-color:var(--leaf);transform:translateY(-3px)}
.testi .tq p.q{font-family:var(--disp);font-weight:400;font-size:clamp(18px,1.7vw,21px);line-height:1.4;letter-spacing:-.01em;color:var(--text);margin:0 0 20px}
.testi .tq p.q b{color:var(--leaf);font-weight:500}
.testi .tq .who{margin-top:auto}
.testi .tq .who .nm{font-size:15px;font-weight:600;color:var(--body-t)}
.testi .tq .who .meta{display:block;margin-top:4px;font-family:var(--disp);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}

/* === FOOTER === */
footer{background:var(--black);padding:clamp(60px,7vw,90px) 0 40px;border-top:1px solid var(--line)}
footer .mark svg{height:36px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(30px,4vw,70px)}
@media(max-width:780px){.f-grid{grid-template-columns:1fr;gap:34px}}
.f-grid p{font-size:16.5px;color:var(--body-t);line-height:1.9;margin-top:18px;max-width:44ch}
.f-grid h4,.f-grid .f-h{font-family:var(--disp);font-size:15px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--leaf);margin:0 0 16px;max-width:none}
.f-grid li{font-size:16.5px;line-height:2.2;color:var(--body-t)}
.f-grid li a{display:inline-block;padding:4px 0;margin:-4px 0} /* a11y: full line-height tap target (~44px), footer rhythm unchanged */
.f-grid li a:hover{color:var(--leaf)}
.f-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:clamp(44px,5vw,64px);padding-top:22px;border-top:1px solid var(--line);font-size:15px;color:var(--soft)}

/* ============================================================
   v9 ADDITIONS — multi-page: gallery cards + project pages
   ============================================================ */

/* === WORK GALLERY (homepage) === */
.gallery{padding:0 0 clamp(70px,8vw,110px)}
.gal-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* FLOW PASS (Jul 14 2026) — featured work as an editorial flow:
   one full-width photograph per project, name overlaid at the base
   (the Barton pattern); blurbs live on the project pages. */
.gal-feature{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,54px);margin-bottom:clamp(26px,4vw,54px)}
.gcard.feat{position:relative}
.gcard.feat .gimg img{aspect-ratio:auto;height:clamp(440px,84vh,880px)}
.gcard.feat .gmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,3.5vw,48px);background:linear-gradient(to top,rgba(20,20,20,.78) 0%,rgba(20,20,20,.3) 62%,transparent 100%)}
.gcard.feat .gmeta .city{color:var(--leaf)}
.gcard.feat .gmeta h3{margin:10px 0 4px;text-shadow:0 2px 18px rgba(20,20,20,.5)}
@media(max-width:640px){.gcard.feat .gimg img{height:62vh;height:62svh}}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
@media(max-width:860px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr}}
/* Mosaic rhythm (Jul 16 2026): desktop-only, JS-assigned. Rows are either two
   wide cards (.w3, 3:2) or three standard cards (.w2, 4:3) — every row sums to
   the full 6 columns, so no filter count can leave an orphan or a hole. The
   .mosaic class comes from site.js, so no-JS (and tablet/phone) keep the
   uniform grid above. */
@media(min-width:861px){
  .js .gal-grid.mosaic{grid-template-columns:repeat(6,1fr)}
  .js .gal-grid.mosaic .gcard.w3{grid-column:span 3}
  .js .gal-grid.mosaic .gcard.w2{grid-column:span 2}
  .js .gal-grid.mosaic .gcard.w3 .gimg img,.js .gal-grid.mosaic .gcard.w3 .gimg svg{aspect-ratio:3/2}
  .js .gal-grid.mosaic .gcard.w2 .gimg img,.js .gal-grid.mosaic .gcard.w2 .gimg svg{aspect-ratio:4/3}
}
.gcard{display:block;position:relative;overflow:hidden;background:var(--black-2);border-radius:2px}
.gcard .gimg{position:relative;overflow:hidden}
.gcard .gimg img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s}
/* sketch-placeholder boards cards: the inline SVG sizes exactly like a photo */
.gcard .gimg svg{width:100%;height:100%;aspect-ratio:4/3;display:block}
.gcard:hover .gimg img{transform:scale(1.04);opacity:1}
.gcard .gmeta{padding:20px 22px 24px}
.gcard .gmeta .city{font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.gcard .gmeta h3{font-size:clamp(21px,2.1vw,27px);font-weight:500;letter-spacing:-.015em;margin:8px 0 8px}
.gcard.feat .gmeta h3{font-size:clamp(28px,3.6vw,48px)}
.gcard .gmeta p{color:var(--body-t);font-size:16.5px;line-height:1.6;max-width:48ch}
.gcard .gmeta .gcred{display:block;margin-top:12px;font-size:15px;color:var(--soft);letter-spacing:.01em}
/* Post-title meta lines must be real lines (2026-07-16 audit): inline spans were
   colliding into run-ons ("With FarmscapeView project →") wherever wrap luck ran out. */
.gcard .gmeta h3~.city{display:block;margin-top:10px}
.gcard .gmeta .gview{display:inline-block;margin-top:16px;font-size:15px;font-weight:600;color:var(--leaf)}
.gcard:hover .gview{text-decoration:underline;text-underline-offset:3px}
.gal-sub{font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin:clamp(38px,5vw,64px) 0 clamp(20px,2.5vw,30px)}
/* Work grid filter (Jul 16 2026): buttons echo the .gal-sub eyebrow; the bar
   is hidden entirely without JS so no-JS visitors get the full inventory. */
.gal-filter,.jfilter{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.6vw,36px);margin:clamp(38px,5vw,64px) 0 clamp(20px,2.5vw,30px)}
.gal-filter button,.jfilter button{background:none;border:none;cursor:pointer;font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);padding:14px 0;min-height:44px;position:relative;transition:color .25s}
.gal-filter button::after,.jfilter button::after{content:"";position:absolute;left:0;bottom:9px;width:0;height:2px;background:var(--leaf);transition:width .3s}
.gal-filter button:hover,.jfilter button:hover{color:var(--text)}
.gal-filter button[aria-pressed="true"],.jfilter button[aria-pressed="true"]{color:var(--leaf)}
.gal-filter button[aria-pressed="true"]::after,.jfilter button[aria-pressed="true"]::after{width:100%}
html:not(.js) .gal-filter,html:not(.js) .jfilter{display:none}
.gal-filter.top,.jfilter.top{margin-top:0}
/* 2026-07-16 audit: at phone widths the bare text filters read as labels, not buttons —
   give them chip affordance and honest tap targets on small screens only. */
@media(max-width:640px){
  .gal-filter,.jfilter{gap:10px 10px}
  .gal-filter button,.jfilter button{border:1px solid var(--line-2);padding:11px 16px;letter-spacing:.14em}
  .gal-filter button::after,.jfilter button::after{display:none}
  .gal-filter button[aria-pressed="true"],.jfilter button[aria-pressed="true"]{border-color:var(--leaf)}
}
.gal-feature.fout{display:none}
.gal-feature .gcard.fout{display:none}
.gal-grid .gcard.fout{display:none}
/* On-the-boards cards: same muted drawing treatment as boards.html */
.gcard.bdraw .gimg img{filter:saturate(.5)}
/* tablet: when a filtered count is odd, JS marks the last visible card
   .tspan so the 2-across grid still closes with no orphan */
@media(min-width:561px) and (max-width:860px){.js .gal-grid .gcard.tspan{grid-column:span 2}}
.js .gal-grid .gcard.fin{animation:gfadein .55s var(--ease) both}
@keyframes gfadein{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

/* === PROJECT PAGE === */
.proj-hero{position:relative;min-height:74vh;min-height:74svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--black)}
.proj-hero .ph{position:absolute;inset:0}
.proj-hero .ph img{width:100%;height:100%;object-fit:cover;opacity:.82}
.proj-hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,20,.97) 0%,rgba(20,20,20,.82) 32%,rgba(20,20,20,.5) 62%,rgba(20,20,20,.28) 100%)}
.proj-hero .inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(44px,6vw,80px)}
.proj-hero .crumb{font-family:var(--disp);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:18px}
.proj-hero .crumb a{display:inline-block;padding:14px 0;margin:-14px 0} /* a11y: extended tap height, visually unchanged */
.proj-hero .crumb a:hover{color:var(--leaf)}
.proj-hero .city{font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--leaf);display:block;margin-bottom:14px;text-shadow:0 1px 12px rgba(20,20,20,.6)}
.proj-hero h1{font-size:clamp(38px,6vw,84px);font-weight:500;letter-spacing:-.025em;line-height:1.0;max-width:16ch;text-shadow:0 2px 24px rgba(20,20,20,.55)}
.proj-hero .essence{color:var(--text);max-width:46ch;font-size:clamp(18px,1.5vw,21px);margin-top:20px;line-height:1.6;text-shadow:0 1px 16px rgba(20,20,20,.7)}

.proj-body{padding:clamp(70px,9vw,130px) 0}
.proj-story{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,6vw,100px);align-items:start;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
@media(max-width:900px){.proj-story{grid-template-columns:1fr;gap:24px}}
.proj-story .sticky{position:sticky;top:112px}
@media(max-width:900px){.proj-story .sticky{position:static}}
.proj-story .eb{display:block;margin-bottom:14px}
.proj-story h2{font-size:clamp(26px,2.8vw,38px);font-weight:500;letter-spacing:-.015em;line-height:1.12}
.proj-story .lede p{color:var(--body-t);font-size:19px;line-height:1.8;margin-bottom:20px;max-width:60ch}
.proj-story .lede p:first-child{font-size:21px;color:var(--text)}

/* editorial image stack — wide gap between beats; a duo pairs tighter so it reads as one beat */
.stack{margin-top:clamp(56px,7vw,100px);display:flex;flex-direction:column;gap:clamp(32px,5vw,72px);max-width:var(--max);margin-left:auto;margin-right:auto;padding:0 var(--pad)}
.stack figure{margin:0;position:relative;overflow:hidden;background:var(--black-2);border-radius:2px}
.stack img{width:100%;height:auto;display:block}
/* duo pairs (Jul 31 2026): where the two images differ in shape, the .duo carries an
   inline grid-template-columns weighted by each image's own aspect ratio, so both land
   at the SAME height with no crop and no dead space. Same rule the old Squarespace
   strips gallery used — row height shared, width free. align-items:start is the safety
   net: an unweighted mismatched pair goes ragged-bottom instead of showing a black slab. */
.stack .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);align-items:start}
@media(max-width:680px){.stack .duo{grid-template-columns:1fr!important}}
.stack figcaption{font-size:16px;color:var(--soft);font-style:italic;padding:12px 4px 0;line-height:1.5}
/* stand-in frame — placeholder for an image not yet produced/cleared (2026-07-16).
   A quiet dashed frame + description of the intended image; swap for a real <img> when it exists. */
.standin{border:1px dashed var(--line-2);border-radius:2px;background:var(--black-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:clamp(28px,4vw,56px);min-height:280px}
.standin .si-tag{font-family:var(--disp);font-weight:400;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--leaf);opacity:.55}
.standin p{color:var(--soft);font-size:15.5px;line-height:1.65;max-width:44ch;margin:0}
/* Homepage section placeholders (2026-07-17): give the "image to come" boxes a real
   landscape image proportion so they read as a generous image band, not a thin letterbox */
.home-fig .standin{aspect-ratio:3/2;min-height:0}
@media(max-width:640px){.home-fig .standin{aspect-ratio:4/3}}
.stack figure .standin{min-height:340px}
.bviz .standin{position:absolute;inset:0;min-height:0;border:none;border-radius:0;background:linear-gradient(135deg,#262622 0%,#1C1C19 100%)}
.bviz .standin::after{content:"";position:absolute;inset:14px;border:1px dashed var(--line-2);pointer-events:none}
.gimg .standin{aspect-ratio:4/3;min-height:0;border:none;background:linear-gradient(135deg,#262622 0%,#1C1C19 100%);position:relative}
.gimg .standin::after{content:"";position:absolute;inset:12px;border:1px dashed var(--line-2);pointer-events:none}
.gimg .standin p{font-size:15px}

/* project credits + next */
.proj-credits{max-width:var(--max);margin:clamp(60px,8vw,110px) auto 0;padding:clamp(40px,5vw,64px) var(--pad);border-top:1px solid var(--line)}
.proj-credits .eb{display:block;margin-bottom:22px}
.proj-credits .clist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 48px;max-width:1000px}
.proj-credits .cline b{display:block;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:5px}
.proj-credits .cline span{font-size:17px;color:var(--text)}
/* Collaborator links (2026-07-16): quiet underline, no color shift — credits shouldn't read as a link wall */
.cline a,.bmeta a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .25s}
.cline a:hover,.bmeta a:hover{text-decoration-color:var(--leaf)}
.proj-credits .award{margin-top:30px;display:inline-block;font-family:var(--disp);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);border:1px solid var(--line-2);padding:12px 20px}
/* project-page contact invitation — quiet band above prev/next */
.proj-cta{max-width:var(--max);margin:0 auto;padding:clamp(50px,7vw,90px) var(--pad);border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.proj-cta .eb{display:block}
.proj-cta p{color:var(--body-t);font-size:19px;line-height:1.7;max-width:52ch;margin:0}
.proj-next{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,110px) var(--pad);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line)}
.proj-next .back{font-family:var(--disp);font-size:15px;letter-spacing:.06em;color:var(--text);display:inline-block;padding:12px 0;margin:-12px 0} /* a11y: ≥44px tap height, zero visual change (padding offset by negative margin) */
.proj-next .back:hover{color:var(--leaf)}


/* ============================================================
   FLOW PASS (Jul 14 2026) — full-bleed interstitial photography.
   Chapter breaks for the lower scroll: after Boards, Approach,
   Resilient, and Testimonials, a single photograph returns before
   the next text section (the Barton/Aidlin beat pattern — no more
   than one text-dominant section before an image beat).
   ============================================================ */
.inter{position:relative;overflow:hidden;background:var(--black-2);margin:0}
.inter img{width:100%;height:clamp(380px,72vh,780px);object-fit:cover;display:block}
.inter::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(20,20,20,.5) 0%,rgba(20,20,20,0) 30%),linear-gradient(to bottom,rgba(20,20,20,.28) 0%,rgba(20,20,20,0) 14%)}
.inter figcaption{position:absolute;left:0;right:0;bottom:clamp(20px,3vw,40px);z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad);font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--leaf)}
@media(max-width:640px){.inter img{height:54vh;height:54svh}}

/* FAQ — progressive disclosure (Jul 14 2026): same copy, folded.
   Answers open on demand so the page ends on an invitation, not a wall. */
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-of-type{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;font-family:var(--disp);font-weight:500;font-size:clamp(19px,2vw,23px);color:var(--text);letter-spacing:-.01em;transition:color .25s}
.faq summary:hover{color:var(--leaf)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--disp);font-weight:300;font-size:26px;line-height:1;color:var(--leaf);flex-shrink:0;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--body-t);font-size:18px;line-height:1.75;max-width:70ch;padding:0 0 26px}

/* ===========================================================
   PORTRAIT FADE (added 2026-06-16) — softens the About headshot:
   removes the hard box edge and dissolves the image into the page
   at the bottom, like the hero scrim.
   =========================================================== */
.about .portrait{border:none;background:transparent}
/* crop the empty headroom: pull the image up so the face sits higher in the frame */
.about .portrait img{object-position:center 20%}
/* soft feather — lightened in the Jul 14 2026 review pass ("don't apologize for
   the edge"): a whisper at top + bottom only, no side fades, so the golden-hour
   warmth of the photo survives on the charcoal ground */
.about .portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,var(--black) 0%,rgba(20,20,20,0) 10%),
  linear-gradient(to top,var(--black) 0%,rgba(20,20,20,0) 12%)}

/* ============================================================
   MOTION PACK (Jul 14 2026) — CSS-only, calm, editorial.
   Directional reveals (.rv-l/.rv-r), staggered lists (--d),
   slow image drift, arc line-draw. Everything here dies under
   prefers-reduced-motion at the bottom of this block.
   ============================================================ */

/* -- stagger utilities, for spots where nth-child doesn't fit -- */
.d1{--d:.14s}.d2{--d:.28s}.d3{--d:.42s}

/* -- elements that already transition a hover property: merge the
      reveal transition back in so BOTH animate (the old .rv rule was
      being overridden here and these cards snapped in) -- */
.crow.rv,.crow.rv-l{transition:opacity 1s var(--ease) var(--d,0s),translate 1s var(--ease) var(--d,0s),padding-left .3s}
.leg-row.rv,.bcard.rv{transition:opacity 1s var(--ease) var(--d,0s),translate 1s var(--ease) var(--d,0s),border-color .3s}

/* -- staggered lists: children cascade ~90–120ms apart -- */
.steps .step:nth-child(2){--d:.1s}
.steps .step:nth-child(3){--d:.2s}
.steps .step:nth-child(4){--d:.3s}
.steps .step:nth-child(5){--d:.4s}
.leg-table .leg-row:nth-child(2){--d:.09s}
.leg-table .leg-row:nth-child(3){--d:.18s}
.leg-table .leg-row:nth-child(4){--d:.27s}
.leg-table .leg-row:nth-child(5){--d:.36s}
.leg-table .leg-row:nth-child(6){--d:.45s}
.b-grid .bcard:nth-child(even){--d:.12s}
.journal .jrow:nth-of-type(2){--d:.09s}
.journal .jrow:nth-of-type(3){--d:.18s}
.journal .jrow:nth-of-type(4){--d:.27s}
.journal .jrow:nth-of-type(5){--d:.36s}
.gal-grid .gcard:nth-child(2){--d:.12s}
.gal-grid .gcard:nth-child(3){--d:.24s}
.clients .crow:nth-of-type(2){--d:.12s}
.clients .crow:nth-of-type(3){--d:.24s}

/* -- testimonial wall: the wall lives inside ONE .rv (.testi .inner);
      cascade the three cards off the parent's .in -- */
.js .testi .inner.rv .tq{opacity:0;translate:0 22px;transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s),border-color .3s,transform .3s}
.testi .inner.rv.in .tq{opacity:1;translate:0 0}
.testi .wall .tq:nth-child(1){--d:.25s}
.testi .wall .tq:nth-child(2){--d:.4s}
.testi .wall .tq:nth-child(3){--d:.55s}

/* -- interstitial captions: slide in from the left, after the photo -- */
.js .inter.rv figcaption{opacity:0;translate:-28px 0;transition:opacity .9s var(--ease) .35s,translate .9s var(--ease) .35s}
.inter.rv.in figcaption{opacity:1;translate:0 0}

/* -- slow image drift: interstitials + featured-flow photos settle
      from 1.06 → 1 as they enter. Scroll-driven where supported;
      a transition keyed on .in is the fallback. Uses the `scale`
      property so the .gcard hover transform still composes. -- */
.js .inter.rv img{scale:1.06;transition:scale 2.2s var(--ease)}
.inter.rv.in img{scale:1}
.js .gcard.feat.rv .gimg img{scale:1.06;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s,scale 2.2s var(--ease)}
.gcard.feat.rv.in .gimg img{scale:1}
/* scroll-driven drift on desktop pointers only — phones get the cheap
   one-shot transition above instead of continuous scale on large bitmaps */
@supports(animation-timeline:view()){
  @media(pointer:fine) and (min-width:700px){
    .js .inter.rv img{transition:none;scale:1;animation:imgdrift 1s linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .js .gcard.feat.rv .gimg img{transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s;scale:1;animation:imgdrift 1s linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@keyframes imgdrift{from{scale:1.07}to{scale:1}}

/* -- arc line-draw: the brand crescents draw themselves. Only paths
      carrying pathLength="1" participate (guards older markup).
      Hero draws on page load; clients/contact draw on reveal via
      the .rv-draw hook in site.js. Quiet and slow — 3s+. -- */
.crescent .arc[pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
@keyframes arcdraw{to{stroke-dashoffset:0}}
.hero .crescent .arc[pathLength]{animation:arcdraw 3.4s cubic-bezier(.4,0,.2,1) .5s forwards}
.hero .crescent .arc-2[pathLength]{animation-delay:1s}
.rv-draw.in .arc[pathLength]{animation:arcdraw 1.8s cubic-bezier(.4,0,.2,1) forwards} /* faster than the hero: finishes while the section is still in view */
.rv-draw.in .arc-2[pathLength]{animation-delay:.25s}

/* ============================================================
   SPLIT (Jul 14 2026) — work.html + about.html subpages
   ============================================================ */
/* subpage opening: clears the fixed 88px header (no full-bleed hero) */
.page-head{padding-top:calc(88px + clamp(44px,7vw,96px))}
/* homepage About teaser: the lead homeowner quote + link */
.about .tease-quote{font-family:var(--disp);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.35;letter-spacing:-.01em;color:var(--text);margin:30px 0 0;max-width:44ch}
.about .tease-quote b{color:var(--leaf);font-weight:500}
.about .tease-attr{margin-top:14px;font-size:15px;color:var(--soft)}
.about .tease-attr b{color:var(--body-t);font-weight:600}
.about .btn.ghost{margin-top:32px}

/* ============================================================
   JOURNAL (Jul 14 2026) — journal.html index + article pages
   ============================================================ */
/* article header: kicker, title, byline row */
.art-head h1{font-size:clamp(34px,4.6vw,62px);font-weight:500;letter-spacing:-.02em;line-height:1.08;max-width:22ch;margin:14px 0 20px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px;color:var(--soft);margin-top:22px}
/* 2026-07-16 audit: the art-head section's bottom padding + the body section's top
   padding stacked to ~170-300px of blank between byline and first paragraph on every
   article — read as a failed image load. Tighten the seam on article pages only. */
.art-head{padding-bottom:clamp(30px,3.5vw,48px)}
.art-head+.approach{padding-top:clamp(26px,3vw,44px)}
.art-meta b{color:var(--body-t);font-weight:600}
/* article body: a readable measure inside .wrap */
.article{max-width:72ch;padding-top:clamp(30px,4vw,50px)}
.article p{color:var(--body-t);font-size:19px;line-height:1.78;margin-bottom:22px}
.article p.art-answer{color:var(--text);font-size:21px;line-height:1.7} /* the direct answer, first paragraph — extraction target */
.article h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.015em;margin:clamp(44px,5vw,64px) 0 18px;max-width:26ch}
.article h3{font-size:clamp(19px,2vw,24px);margin:34px 0 12px}
.article ul{list-style:none;margin:0 0 22px}
.article ul li{color:var(--body-t);font-size:18.5px;line-height:1.7;padding:9px 0 9px 26px;position:relative}
.article ul li::before{content:"";position:absolute;left:0;top:calc(9px + .8em);width:10px;height:1px;background:var(--leaf)} /* 2026-07-16 audit: was top:19px — floated above the first line at mobile sizes */
.article a{color:var(--text);border-bottom:1px solid var(--leaf-d);transition:color .2s}
.article a:hover{color:var(--leaf)}
.article table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:16.5px}
.article th{font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--leaf);text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line-2)}
.article td{color:var(--body-t);padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
.art-table-scroll{overflow-x:auto} /* wide tables scroll inside, never the page */
.article .leg-table{grid-template-columns:1fr} /* the six-theme roadmap stacks inside the article column (IA split 2026-07-16) */
/* dated-claim note (regulatory content) */
.art-updated{font-size:15px;color:var(--soft);font-style:italic;border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
/* author bio block at article foot */
.art-bio{display:flex;gap:24px;align-items:center;border-top:1px solid var(--line-2);margin-top:clamp(44px,5vw,64px);padding-top:30px}
.art-bio img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex-shrink:0}
.art-bio p{font-size:16px;color:var(--body-t);line-height:1.6;margin:0;max-width:56ch}
.art-bio b{color:var(--text);font-weight:600}
@media(max-width:600px){.art-bio{flex-direction:column;align-items:flex-start}}
/* journal index: reuse .jrow, plus a live-link state */
.jrow .go.live{color:var(--leaf)}

/* -- reduced motion: everything above, off -- */
@media(prefers-reduced-motion:reduce){
  .js .crow.rv,.js .crow.rv-l,.js .leg-row.rv,.js .bcard.rv,.js .testi .inner.rv .tq,.js .inter.rv figcaption{opacity:1;translate:none;transition:none}
  .js .inter.rv img,.js .gcard.feat.rv .gimg img{scale:none;transition:none;animation:none}
  .crescent .arc[pathLength]{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}
  /* off-canvas menu + burger + FAQ marker: kill the animation, keep the behavior
     (.js .menu.open included so the open state can't reintroduce the .45s slide) */
  .js .menu,.js .menu.open{transition:none}
  .burger span{transition:none}
  .faq summary::after{transition:none}
  /* work grid filter: no entrance animation, filtering itself still works */
  .js .gal-grid .gcard.fin{animation:none}
  .gal-filter button,.gal-filter button::after,.jfilter button,.jfilter button::after{transition:none}
}

/* Desktop Nav Dropdown */
@media (min-width: 921px) {
  .nav-has-dropdown {
    position: relative;
    display: inline-block;
  }
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #141414;
    min-width: 220px;
    padding: 16px 0;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    border: 1px solid var(--line-2, #3A3A37);
    z-index: 100;
  }
  .nav-has-dropdown:hover .nav-dropdown,
  .nav-has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-dropdown a {
    display: block;
    padding: 8px 24px;
    font-size:15px;
    white-space: nowrap;
    opacity: 0.8;
  }
  .nav-dropdown a:hover {
    opacity: 1;
    color: var(--leaf, inherit);
  }
}

/* Sub-links collapse into the plain Projects link in the off-canvas menu */
@media (max-width: 920px) {
  .nav-dropdown { display: none; }
}

/* ============================================================
   POLISH PASS (Aug 4 2026) — three signature moments, all
   library-free and a few KB: seamless page transitions, the
   project-photo lightbox, and the cinematic hero settle.
   Everything here dies under prefers-reduced-motion at the
   bottom of this block.
   ============================================================ */

/* -- seamless page transitions: cross-document view transitions.
      Same-origin page loads crossfade (~.3s) instead of hard-cutting;
      the fixed header snapshots separately (view-transition-name) so
      the nav holds rock-still while content fades beneath it.
      Progressive: Chrome/Edge 126+ and Safari 18.2+ only — engines
      without support ignore the at-rule and keep today's hard cut. -- */
@view-transition{navigation:auto}
header{view-transition-name:hdr}
/* Dialed up 2026-08-04 (Sharon's call, "a notch"): was a bare .3s crossfade —
   now the old page fades while the new one drifts ~12px up into place over .5s.
   A designed moment, still calm. The header stays pinned via its own name. */
::view-transition-old(root){animation:vt-out .5s var(--ease) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
::view-transition-old(hdr),::view-transition-new(hdr){animation:none}

/* -- cinematic hero settle: the hero photograph settles from a 5%
      zoom over 7s on load. Composited `scale` only (no layout work),
      same drift language as the interstitials' imgdrift. .hero and
      .proj-hero both overflow:hidden, so nothing spills. -- */
@keyframes herosettle{from{scale:1.05}to{scale:1}}
.hero .ph img,.proj-hero .ph img{animation:herosettle 7s var(--ease) both}

/* -- photo lightbox: one native <dialog>, built on demand by site.js
      and bound to the project-page image stacks. No per-page markup.
      <dialog> gives Esc + focus trap for free; styling stays in the
      Nocturne register (charcoal field, --leaf accents, .eb counter). -- */
.lb-zoom{cursor:zoom-in}
body:has(dialog.lb[open]){overflow:hidden} /* no scrolling behind the open viewer */
dialog.lb{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:clamp(18px,3vw,48px);border:none;background:rgba(20,20,20,.97);color:var(--text);z-index:200}
dialog.lb::backdrop{background:rgba(20,20,20,.6)}
dialog.lb[open]{display:flex;align-items:center;justify-content:center;animation:lbfade .35s var(--ease)}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
dialog.lb figure{margin:0;max-width:min(1600px,92vw);text-align:center}
dialog.lb figure img{max-width:100%;max-height:80vh;width:auto;height:auto;margin:0 auto;display:block}
dialog.lb figcaption{margin-top:16px;font-size:16px;color:var(--soft);font-style:italic;line-height:1.5}
dialog.lb button{position:absolute;background:none;border:none;cursor:pointer;color:var(--text);font-family:var(--disp);font-weight:300;padding:14px;min-width:44px;min-height:44px;transition:color .25s;z-index:2}
dialog.lb button:hover{color:var(--leaf)}
dialog.lb .lb-x{top:14px;right:18px;font-size:34px;line-height:1}
dialog.lb .lb-prev{left:6px;top:50%;transform:translateY(-50%);font-size:26px}
dialog.lb .lb-next{right:6px;top:50%;transform:translateY(-50%);font-size:26px}
dialog.lb .lb-n{position:absolute;top:26px;left:26px;font-family:var(--disp);font-size:15px;letter-spacing:.24em;color:var(--soft)}
/* phones: the arrows ride the photo's edges — a faint charcoal pill keeps them legible over light imagery */
@media(max-width:640px){dialog.lb .lb-prev,dialog.lb .lb-next{background:rgba(20,20,20,.55);border-radius:999px}}

/* -- PROJECT GRID RUNS FULL WIDTH (2026-08-04, Sharon's ask). The whole site sits in
      a 1380px reading column, which is right for text and wrong for photography: at
      1920px that left 334px of dead charcoal down each side and the grid using only
      65% of the window. Freeing the grid alone takes the large cards from 610px to
      935px — 135% more image area — without stretching a single line of type.

      Scoped to `.gallery.page-head`, which exists ONLY on work.html; index.html's
      gallery section is plain `.gallery`, so the homepage featured band keeps its cap.

      Three rules, in order: the wrapper loses its cap and its padding; the filter bar
      re-applies the cap itself so it still lines up with the headline above it at every
      width (giving the wrapper padding instead breaks that alignment below 1380px —
      the bleed eats the available width and the bar drifts left of the H1); the grid
      takes a gutter matching its own column gap so the outer edge and inner rhythm
      agree. No 100vw anywhere — that would include the scrollbar and cause exactly the
      horizontal scroll this needs to avoid. `.work-note` keeps its own 74ch measure. -- */
.gallery.page-head .gal-wrap{max-width:none;padding-left:0;padding-right:0}
.gallery.page-head .gal-filter{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.gallery.page-head .gal-grid{padding-left:clamp(18px,2.4vw,32px);padding-right:clamp(18px,2.4vw,32px)}

/* -- PROJECT-PAGE IMAGE RUN WIDENED, 1380 → 1600 (2026-08-06, Sharon's ask). Fixes an
      inversion created by the full-width grid the day before: a paired image on a project
      page was rendering at 609px, SMALLER than the 904px card someone clicked to arrive.
      Now pairs land ~719px and singles ~1472px.

      Deliberately NOT applied to `.proj-story` (the text), `.proj-credits`, `.proj-cta`
      or `.proj-next` — those keep the 1380 measure, so the images break wider than the
      writing on purpose. The hero stays full-bleed at 99% and remains the biggest thing
      on the page, which is the whole point of not going wider still.

      Below 1380px viewport this rule changes nothing — the stack was already filling the
      screen there — so phone and laptop layouts are untouched and no new breakpoint is
      needed. Consequence to watch: at ≥1600px the image run now starts ~110px left of
      the story column and the credits block. See the note in code-changelog. -- */
.stack{max-width:1600px}

/* -- next project, promoted (2026-08-04, Sharon's ask: "a quick way to go to the
      next project at the end of the project image run"). The link already existed
      on all 25 project pages but sat at 15px — easy to miss after a long image run.
      The old Squarespace portfolio ran it large and right-aligned; that's the pattern
      being matched. Markup is consistent on every page — first .back is "All work",
      last is the next project — so :last-child hits the right one and no HTML changes
      are needed. Hover colour is inherited from the .proj-next .back:hover rule. -- */
.proj-next .back:last-child{font-size:clamp(22px,2.6vw,32px);font-weight:500;letter-spacing:-.01em;line-height:1.2;padding:16px 0;margin:-16px 0}

/* -- reduced motion: everything above, off (the lightbox itself still works) -- */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .hero .ph img,.proj-hero .ph img{animation:none}
  dialog.lb[open]{animation:none}
}

/* ============================================================
   EDIT-SHEET PORT (2026-10-02) — the site-CSS versions of what the
   canvas did with inline px styles. Pre-port copy of this file:
   99-archive/edit-sheet-port-2026-10-02-pre/styles.css
   ============================================================ */
/* Quiet text link (replaces several .btn.ghost buttons on the homepage) */
.go.line{display:inline-block;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color .25s,color .25s}
.go.line:hover{border-color:var(--leaf);color:var(--leaf)}
/* Homepage intro: headline only, one column */
.intro-grid.solo{grid-template-columns:1fr}
/* Homepage: Approach + Resilient side by side */
.approach.ar-band{background:var(--black-2);border-top:1px solid var(--line)}
.ar-pair{--arg:clamp(48px,6.7vw,96px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--arg);row-gap:clamp(48px,6vw,88px)}
.ar-pair .ar-photo{grid-column:1/-1;margin:0}
.ar-pair .ar-photo img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.ar-pair .ar-photo figcaption{padding:12px 0 0;font-size:15px;color:var(--soft)}
@media(max-width:640px){.ar-pair .ar-photo img{aspect-ratio:4/3}}
.ar-pair .ar-col{display:flex;flex-direction:column;align-items:flex-start}
.ar-pair .ar-col+.ar-col{border-left:1px solid var(--line);margin-left:calc(var(--arg) / -2);padding-left:var(--arg)}
@media(max-width:860px){
  .ar-pair{grid-template-columns:1fr}
  .ar-pair .ar-col+.ar-col{border-left:0;margin-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:clamp(40px,8vw,56px)}
}
/* About: left column rides with the story and holds once its bottom is on screen (desktop only).
   --lh = its height, set by site.js; without it this falls back to pinning the top at 120px. */
@media(min-width:861px){.about.page-head .about-grid>.rv-l{position:sticky;top:min(120px,calc(100vh - var(--lh,0px) - 40px));align-self:start}}
/* About: two testimonials sit as a centered pair */
@media(min-width:861px){.testi .wall.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-left:auto;margin-right:auto}}
/* Approach page: three promises under the opener */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(36px,4vw,56px)}
.pillar{border-top:1px solid var(--line-2);padding-top:22px}
.pillar h3{margin:12px 0 10px;font-size:clamp(21px,1.8vw,24px);font-weight:500;letter-spacing:-.015em}
.pillar p{margin:0;color:var(--body-t);font-size:17px;line-height:1.65}
@media(max-width:860px){.pillars{grid-template-columns:1fr;gap:28px}}
/* Projects page: name over the photo (.gcard.ov) */
.gal-grid .gcard.ov .gmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(56px,5vw,72px) clamp(20px,2vw,28px) clamp(20px,1.9vw,26px);background:linear-gradient(to top,rgba(20,20,20,.82) 0%,rgba(20,20,20,0) 100%)}
.gal-grid .gcard.ov .gmeta h3{margin:0;font-size:clamp(21px,2vw,28px);color:var(--text)}
.gal-grid .gcard.ov .gmeta .gcred{margin-top:6px;font-size:15px;color:var(--leaf-d)}
@media(min-width:861px){.js .gal-grid.mosaic .gcard.ov.w2 .gmeta{padding:64px 24px 22px}.js .gal-grid.mosaic .gcard.ov.w2 .gmeta h3{font-size:clamp(19px,1.6vw,22px)}}
/* Resilient page: theme cards with a section drawing under the title (--th = theme color, set per card) */
.leg-row.dg{padding:0;display:flex;flex-direction:column;overflow:hidden}
.leg-row.dg .lhead{padding:clamp(24px,2.6vw,34px) clamp(24px,2.6vw,36px) 18px}
.leg-row.dg .lhead .eb{color:var(--th)}
.leg-row.dg .lhead h3{margin:0}
.leg-row.dg .ldraw{height:200px;box-sizing:border-box;padding:22px 0 14px;background:var(--panel);border-top:1px solid #2A2A28;border-bottom:1px solid #2A2A28;display:flex;justify-content:center}
.leg-row.dg .ldraw svg{width:85%;height:100%;color:var(--leaf)}
.leg-row.dg .ldraw .a{stroke:var(--th)}
.leg-row.dg .ldraw .cf{fill:var(--th);stroke:none}
.leg-row.dg .ldraw .f{fill:var(--leaf);stroke:none}
.leg-row.dg .ldraw .t text{fill:var(--th);stroke:none;font-family:var(--disp);font-size:7px}
.leg-row.dg .lbody{padding:6px clamp(24px,2.6vw,36px) clamp(24px,2.6vw,34px)}
@media(min-width:861px){.article .leg-table.dg2{grid-template-columns:repeat(2,minmax(0,1fr));width:min(calc(var(--max) - 2 * var(--pad)),calc(100vw - 2 * var(--pad)))}}
@media(max-width:760px){.leg-row.dg .ldraw{height:160px}}

/* ===== JOURNAL PORT 2026-10-02: featured "Start here" card + subject groups (from the edit sheet) ===== */
.jfeat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;margin-top:40px;padding:36px;border:1px solid var(--line);background:var(--black-2);text-decoration:none;color:inherit;transition:border-color .3s}
.jfeat:hover{border-color:var(--line-2)}
.jfeat h2{margin:10px 0 12px;font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.015em}
.jfeat p{margin:0;color:var(--body-t);font-size:17px;line-height:1.65}
.jfeat .go,.jcard .go{display:inline-block;margin-top:16px;font-size:15px;font-weight:600;color:var(--leaf)}
.jfeat-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px}
.jfeat-band figure{margin:0}
.jfeat-band .jd{background:var(--panel);padding:10px 8px 4px}
.jfeat-band svg{display:block;width:100%;height:auto;color:var(--leaf)}
.jfeat-band svg .a{stroke:var(--th)}.jfeat-band svg .cf{fill:var(--th);stroke:none}.jfeat-band svg .f{fill:var(--leaf);stroke:none}.jfeat-band svg .t{display:none}
.jfeat-band figcaption{margin-top:8px;font-family:var(--disp);font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--th)}
.jfeat-band figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jgroup{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;padding:44px 0;border-top:1px solid var(--line)}
.jgroup:first-of-type{margin-top:24px}
.jg-head .jd{background:var(--panel);padding:16px 14px 8px;max-width:300px}
.jg-head svg{display:block;width:100%;height:auto;color:var(--leaf)}
.jg-head svg .a{stroke:var(--th)}.jg-head svg .cf{fill:var(--th);stroke:none}.jg-head svg .f{fill:var(--leaf);stroke:none}.jg-head svg .t{display:none}
.jg-head h2.eb{margin:14px 0 0;font-size:15px;font-weight:500;color:var(--th)}
.jg-list{list-style:none;margin:0;padding:0}
.jg-list li+li{border-top:1px solid var(--line)}
.jg-list a{display:block;padding:18px 0 20px;text-decoration:none;color:inherit}
.jg-list li:first-child a{padding-top:0}
.jg-list h3{margin:0 0 6px;font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.3;transition:color .25s}
.jg-list a:hover h3{color:var(--leaf)}
.jg-list p{margin:0;color:var(--body-t);font-size:16px;line-height:1.6;max-width:62ch}
.jg-list .go{display:inline-block;margin-top:10px;font-size:15px;font-weight:600;color:var(--th,var(--leaf))}
@media(max-width:860px){.jfeat{grid-template-columns:1fr;padding:24px}.jfeat-band{grid-template-columns:repeat(2,minmax(0,1fr))}.jgroup{grid-template-columns:1fr;gap:20px;padding:32px 0}.jg-head .jd{max-width:220px}}
.jgroup.fout{display:none}

/* === REVIEW-ROOM FIXES 2026-10-02 ===
   Readability pass for 65–70-year-old readers: every readable font-size under 15px was raised
   in place (captions 16px, labels 15px, .eb 14→16px with tracking .3em→.2em); --soft lightened
   #9C9B94→#ADACA5 (6.6→8.1:1 on #141414). Snapshot: 99-archive\review-fixes-2026-10-02-pre\. */
.hero .hcred{position:absolute;right:var(--pad);bottom:22px;z-index:2;margin:0;font-size:15px;color:var(--leaf-d);text-shadow:0 1px 12px rgba(20,20,20,.8)}
@media(max-width:860px){.hero .hcred{left:var(--pad);right:auto;bottom:14px}}
.testi .wall.one{grid-template-columns:minmax(0,1fr);max-width:560px;margin-left:auto;margin-right:auto}
.boards-list{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line);padding-top:clamp(28px,3vw,40px)}
.boards-list .bl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);color:var(--text)}
.boards-list .bl-row:hover h3{color:var(--leaf)}
.boards-list h3{font-family:var(--disp);font-weight:500;font-size:clamp(20px,1.8vw,24px);line-height:1.3;transition:color .25s}
.boards-list .bl-meta{font-size:16px;color:var(--soft)}
.boards-list .bl-go{font-size:16px;font-weight:600;color:var(--leaf);white-space:nowrap}
.boards-list .eb{display:block;margin-bottom:8px}
@media(max-width:560px){.boards-list .bl-row{grid-template-columns:minmax(0,1fr)}.boards-list .bl-go{margin-top:4px}}
.gallery.page-head .boards-list{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}

/* === VISUAL PASS 2026-10-02 (review room run 3; Sharon approved all) ===
   Line drawings travel beyond Resilient/Journal (.sdraw), subject colors via --th, the dog,
   layout fixes (art-head gap, For Pros 2x2, process gap, half figures, phone tables).
   Snapshot: 99-archive\visual-pass-2026-10-02-pre\ */
.sdraw{margin:0}
.sdraw .jd{background:var(--panel);border:1px solid #2A2A28;padding:18px 16px 10px}
.sdraw svg{display:block;width:100%;height:auto;color:var(--leaf)}
.sdraw svg .a{stroke:var(--th)}.sdraw svg .cf{fill:var(--th);stroke:none}.sdraw svg .f{fill:var(--leaf);stroke:none}
.sdraw figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:var(--soft)}
.proj-draw{max-width:var(--max);margin:0 auto clamp(56px,7vw,96px);padding:0 var(--pad)}
.proj-draw .sdraw{max-width:900px}
.pillar .sdraw{margin-bottom:20px}.pillar .sdraw .jd{padding:12px 10px 6px}
.home-band{margin-top:30px}
.jfeat-band figcaption{white-space:normal;overflow:visible;text-overflow:clip;font-size:15px;letter-spacing:.12em;line-height:1.35}
.about-dog{max-width:360px;margin:6px 0 30px}
.f-dog{max-width:200px;margin-top:22px}.f-dog .jd{background:none;border:0;padding:0}
.head-split{display:grid;gap:clamp(24px,4vw,64px)}
@media(min-width:861px){.head-split{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end}}
.head-split .sdraw{max-width:480px;width:100%}
.article .leg-table.pros-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:min(1200px,calc(100vw - 2*var(--pad)))}
@media(max-width:860px){.article .leg-table.pros-grid{grid-template-columns:1fr;width:auto}}
/* FOR PROS sheet figure 2026-10-06: a real DeBell CD sheet (project identity masked) sits
   beside cards 01-02 and spans both rows; on one column it stacks after card 02. Opens in the photo lightbox. */
.pros-grid .pro-sheet{margin:0;grid-column:2;grid-row:1/3;align-self:start;border:1px solid var(--line);background:var(--black-2);padding:14px;transition:border-color .3s}
.pros-grid .pro-sheet:hover{border-color:var(--line-2)}
.pros-grid .pro-sheet img{display:block;width:100%;height:auto;cursor:zoom-in}
.pros-grid .pro-sheet figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:var(--soft)}
@media(max-width:860px){.pros-grid .pro-sheet{grid-column:auto;grid-row:auto}}
.art-head{padding-bottom:clamp(8px,1vw,16px)}
.art-head+.approach{padding-top:clamp(10px,1.5vw,22px)}
#phases+.legend{padding-top:0}
.stack figure.half{max-width:min(620px,100%)}
.stack figcaption,.inter figcaption,dialog.lb figcaption,.work-note,.verify,.art-updated{font-style:normal}
@media(max-width:600px){.article table thead{display:none}.article table,.article tbody,.article tr,.article td{display:block;width:100%}.article tr{border-bottom:1px solid var(--line);padding:12px 0}.article td{border:0;padding:4px 0}.article td:first-child{color:var(--text);font-weight:500}.article td[data-label]::before{content:attr(data-label);display:block;font-family:var(--disp);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf);margin-bottom:2px}}
.art-head+.approach .article{padding-top:0}
/* === BOARDS SECOND DRAWINGS 2026-10-03 (project-page refinement pass): a plan under each section drawing === */
.proj-draw .sdraw+.sdraw{margin-top:clamp(32px,4vw,56px)}

/* LAUNCH PREP 2026-10-06 — Resilient tighter top gap (approved on the edit sheet 2026-10-02) */
.approach.res{padding-top:0}
.approach.res .article{padding-top:6px}
@media(max-width:640px){.approach.res .art-answer{font-size:17px}}

/* COPY-EMAIL button 2026-10-06 — for visitors whose computer has no email app (mailto does nothing) */
.req{font-weight:400;color:var(--soft);font-size:14px}
.copy-email{font:inherit;font-size:12px;letter-spacing:.04em;color:var(--leaf);background:none;border:1px solid var(--line-2,#3A3A37);border-radius:999px;padding:1px 10px;margin-left:4px;cursor:pointer;vertical-align:1px}
.copy-email:hover,.copy-email:focus-visible{border-color:var(--leaf)}

/* ABOUT STORY REWORK 2026-10-06: quote + Credentials (.about-side) sit under the portrait on
   desktop. On phones the left column would put them ABOVE the h1, so it dissolves and they
   drop below the story instead. */
@media(max-width:860px){.about.page-head .about-grid>.rv-l{display:contents}.about.page-head .portrait{order:1}.about.page-head .about-grid>.rv-r{order:2}.about.page-head .about-side{order:3}}
/* ABOUT LAYOUT PASS 2026-10-06: the desk + dog drawing floats on the page (no panel/box),
   a bit larger, right-aligned to close the story column. */
.about-dog .jd{background:none;border:0;padding:0}.about .about-dog{max-width:440px;margin:clamp(18px,2.4vw,30px) 0 0 auto}
/* ON THE BOARDS CARDS 2026-10-06: the faint placeholder sketches are replaced by each
   project page's own section drawing, in its theme color, on the same panel the project
   pages use — one graphic standard across cards and pages. Source of truth for each
   drawing = the first .sdraw on that project page; re-run the swap if one is redrawn. */
.gcard.bdraw .gimg.bd-art svg{background:var(--panel);padding:7% 8%;box-sizing:border-box;color:var(--leaf);fill:none;stroke:currentColor}
.bd-art svg .a{stroke:var(--th)}.bd-art svg .cf{fill:var(--th);stroke:none}.bd-art svg .f{fill:var(--leaf);stroke:none}
/* CLOSING BAND 2026-10-06 (Sharon, option 1): the page's one ask (left) + the desk-and-dog
   drawing (right), merged into the top of the footer on every page that had a .proj-cta.
   index/404/privacy have no band and keep the small .f-dog in the footer column. */
.f-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(32px,5vw,80px);align-items:end;padding-bottom:clamp(44px,6vw,72px);margin-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line);position:relative}
.f-ask .eb{display:block}
.f-ask p{color:var(--body-t);font-size:19px;line-height:1.7;max-width:52ch;margin:18px 0 26px}
.f-close-dog{margin:0}.f-close-dog .jd{background:none;border:0;padding:0}
@media(max-width:760px){.f-close{grid-template-columns:1fr;gap:28px}.f-close-dog{max-width:300px}}
.f-close:not(:has(.f-close-dog)){grid-template-columns:1fr}
/* APPROACH REBUILD 2026-10-06: one garden drawn at each phase (.pstrip), plus the money
   section diagram. Drawings follow the project-page .sdraw standard (panel + one accent). */
.pstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4.5vw,64px) clamp(22px,2.8vw,40px);margin-top:clamp(36px,4vw,56px)}
.pstep .sdraw{margin-bottom:22px}
.pstep .pnum{display:block;font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.14em;color:var(--leaf);margin-bottom:8px}
.pstep h3{font-size:clamp(22px,2.2vw,28px);font-weight:500;line-height:1.12;margin:0}
.pstep .psub{display:block;margin-top:6px;font-family:var(--disp);font-size:15px;letter-spacing:.01em;color:var(--soft)}
.pstep .ptag{display:inline-block;margin-top:10px;font-family:var(--disp);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px}
.pstep p{color:var(--body-t);font-size:17.5px;line-height:1.7;margin:12px 0 0;max-width:56ch}
.pstep p.porder{font-size:15px;color:var(--soft);line-height:1.6}
.pstrip .pstep:nth-child(2){--d:.08s}.pstrip .pstep:nth-child(3){--d:.16s}.pstrip .pstep:nth-child(4){--d:.24s}
.money-draw{max-width:880px;margin-top:clamp(36px,4vw,52px)}
@media(max-width:760px){.pstrip{grid-template-columns:1fr}}
.pstep .jd svg+svg{margin-top:12px;padding-top:12px;border-top:1px solid #2A2A28}

/* ─── ROUND 2 (2026-10-06, launch-day audit N6 / N7 / N10) ───
   Self-hosted fonts (were Google-hosted, render-blocking), type floors (19px body / 14px label),
   skip link + sr-only, and the "On the boards" status chip. Appended as overrides on purpose:
   one block to find, one block to roll back. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/space-grotesk-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:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-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}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:12px;z-index:100;padding:12px 18px;background:var(--leaf);color:var(--black);font-size:16px;text-decoration:none;border-radius:4px}
.skip:focus{left:12px;outline:2px solid var(--leaf);outline-offset:3px}
.crow p,.step p,.prow p,.faq details p,.bcard p,.leg-row p,.pstep p,.pillar p,.jfeat p,.f-grid p,.gcard .gmeta p,.art-bio p{font-size:19px}
@media(max-width:640px){.approach.res .art-answer{font-size:19px}}
.copy-email{font-size:14px;padding:4px 12px;min-height:28px}
.pstep .ptag{font-size:14px}
.gcard .gmeta .status{display:table;margin-top:10px;margin-bottom:4px;font-family:var(--disp);font-weight:400;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--leaf-d);border:1px solid var(--line-2,#3A3A37);padding:5px 9px;line-height:1}