/* R. Gelb Creative · variation B: "the ledger"
   Same two tokens, same two families. Structurally inverted from A:
   charcoal-dominant, one continuous surface, strict visible grid,
   sticky section rail, work as a real table. */

:root{
  --ch:#2E2E2C; --bo:#F5F3EF;

  /* charcoal on bone */
  --ch-88:rgba(46,46,44,.88); --ch-70:rgba(46,46,44,.70);
  --ch-34:rgba(46,46,44,.34); --ch-16:rgba(46,46,44,.16);
  --ch-08:rgba(46,46,44,.08); --ch-04:rgba(46,46,44,.04);

  /* bone on charcoal */
  --bo-88:rgba(245,243,239,.88); --bo-70:rgba(245,243,239,.70);
  --bo-34:rgba(245,243,239,.34); --bo-16:rgba(245,243,239,.16);
  --bo-08:rgba(245,243,239,.08); --bo-04:rgba(245,243,239,.04);

  /* TEXT uses -88 / -70 only. -34 and below are RULES AND BORDERS ONLY. */

  --sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;

  --pad:clamp(20px,5vw,72px);
  --max:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ch);color:var(--bo-88);
  font-family:var(--sans);font-weight:400;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-weight:400;margin:0;color:var(--bo);letter-spacing:-.03em;line-height:.98}p{margin:0}
a{color:inherit}
s{text-decoration:none}
::selection{background:var(--bo);color:var(--ch)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--bo);color:var(--ch);padding:10px 16px;font-size:14px}
a:focus-visible,button:focus-visible{outline:2px solid var(--bo);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── shell: top masthead + centred column ──────────── */
.top{position:sticky;top:0;z-index:30;background:var(--ch);border-bottom:1px solid var(--bo-16)}
.top-in{max-width:var(--max);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.mark img{height:20px;width:auto;filter:invert(1)}
.mark span{font-family:var(--serif);font-size:16px;letter-spacing:.01em;color:var(--bo)}
.tnav{display:flex;gap:clamp(14px,1.6vw,20px);flex-wrap:nowrap;justify-content:flex-end}
.tnav a{white-space:nowrap}
.tnav a{text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bo-70);transition:color .15s}
.tnav a:hover{color:var(--bo)}
@media (max-width:760px){.tnav{display:none}}
.top .back{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bo-70);text-decoration:none}
.top .back:hover{color:var(--bo)}

.shell{max-width:var(--max);margin:0 auto}
.col{padding:0 var(--pad)}

/* ── blocks ────────────────────────────────────────── */
.blk{padding:30px 0;border-bottom:1px solid var(--bo-16)}
.blk:last-child{border-bottom:0}
.blk--open{padding-top:40px;padding-bottom:30px}
/* The wedge sits tight to the hairlines above and below it. */
.blk--tight{padding-top:30px;padding-bottom:30px}

/* inverted block: bone surface inside the dark page */
.inv{background:var(--bo);color:var(--ch-88);
  margin:0 calc(var(--pad) * -1);padding:clamp(56px,9vh,110px) var(--pad)}
.inv h1,.inv h2,.inv h3,.inv h4{color:var(--ch)}
.inv .n{color:var(--ch-70)}
.inv .lede{color:var(--ch-88)}
.inv .sub{color:var(--ch-70)}

/* ── type ──────────────────────────────────────────── */
.n{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--bo-70);margin-bottom:22px}
/* Display type is Cormorant Garamond throughout. The serif carries the
   headings, not just the italic accent word. Sans is reserved for body,
   labels, and table copy. */
.h-xl{font-family:var(--serif);font-size:clamp(40px,7.4vw,104px);letter-spacing:-.022em;line-height:1.02}
.h-l{font-family:var(--serif);font-size:clamp(32px,5.4vw,68px);letter-spacing:-.032em;line-height:.96}
/* .it must stay self-contained: it appears inside .sub body copy (Libre
   Franklin) as well as inside serif headings, so it declares the family
   itself rather than relying on inheritance. */
.it{font-family:var(--serif);font-style:italic;letter-spacing:-.012em}
.lede{font-size:clamp(17px,1.9vw,21px);line-height:1.5;max-width:46ch;color:var(--bo-88);font-weight:400}
.sub{font-size:16px;line-height:1.62;max-width:62ch;color:var(--bo-70)}
.sub b{color:var(--bo);font-weight:500}
.inv .sub b{color:var(--ch)}
.sub + .sub{margin-top:1em}
/* .sub + .sub is for STACKED paragraphs. Inside a side-by-side grid it would
   push the second column down by a line, so cancel it there. */
.duo > .sub + .sub,.cols > .sub + .sub{margin-top:0}
.tiny{font-size:14px;line-height:1.55;color:var(--bo-70);max-width:56ch}
.inv .tiny{color:var(--ch-70)}

/* ── open: hero ────────────────────────────────────── */
.hero-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(26px,3.4vw,38px)}
.hero-meta div{padding:14px 26px 14px 0;margin-right:26px;border-right:1px solid var(--bo-16)}
.hero-meta div:last-child{border-right:0;margin-right:0}
.hero-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bo-70);margin-bottom:4px}
.hero-meta dd{margin:0;font-size:14.5px;color:var(--bo)}
.hero-meta a{text-decoration:none;border-bottom:1px solid var(--bo-34)}
.hero-meta a:hover{border-bottom-color:var(--bo)}
@media (max-width:720px){
  .hero-meta{flex-direction:column}
  .hero-meta div{width:100%;padding:12px 0;margin-right:0;border-right:0;border-bottom:1px solid var(--bo-16)}
  .hero-meta div:last-child{border-bottom:0}
}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.tags span{white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bo-70);border:1px solid var(--bo-16);padding:6px 10px}
.tags span.on{background:var(--bo);color:var(--ch);border-color:var(--bo)}

/* ── ledger table ──────────────────────────────────── */
/* Base state is the DARK page. .inv overrides follow for the bone variant.
   Never let a cell inherit, or it flips to charcoal-on-charcoal. */
.ledger{width:100%;border-collapse:collapse;margin-top:clamp(26px,3.4vw,38px)}
.ledger caption{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bo-70);padding-bottom:12px;border-bottom:1px solid var(--bo-16)}
.ledger th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bo-70);padding:12px 14px 12px 0;border-bottom:1px solid var(--bo-16)}
.ledger td{padding:17px 14px 17px 0;border-bottom:1px solid var(--bo-16);vertical-align:baseline;font-size:15.5px;line-height:1.45;color:var(--bo-88)}
.ledger tr:hover td{background:var(--bo-08)}
/* Last row sits flush; the CTA band below supplies the next hairline. */
.ledger tbody tr:last-child td{border-bottom:0}
.ledger .c-n{width:38px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--bo-70)}
.ledger .c-y{width:104px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--bo-70);white-space:nowrap}
.ledger .c-d{width:152px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--bo-70)}
.ledger .c-w b{font-weight:600;color:var(--bo)}
.ledger .c-w span{color:var(--bo-70)}
.ledger .c-r{width:118px;text-align:right;padding-right:0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bo-70);white-space:nowrap}
.ledger a{text-decoration:none;border-bottom:1px solid var(--bo-34)}
.ledger a:hover{border-bottom-color:var(--bo)}

/* bone-surface variant */
.inv .ledger caption,.inv .ledger th{color:var(--ch-70);border-bottom-color:var(--ch-16)}
.inv .ledger td{border-bottom-color:var(--ch-16);color:var(--ch-88)}
.inv .ledger tr:hover td{background:var(--ch-04)}
.inv .ledger .c-n,.inv .ledger .c-y,.inv .ledger .c-d,.inv .ledger .c-r,.inv .ledger .c-w span{color:var(--ch-70)}
.inv .ledger .c-w b{color:var(--ch)}
.inv .ledger a{border-bottom-color:var(--ch-34)}
.inv .ledger a:hover{border-bottom-color:var(--ch)}
@media (max-width:820px){
  .ledger thead{display:none}
  .ledger tr{display:grid;grid-template-columns:32px 1fr;gap:2px 10px;padding:15px 0;border-bottom:1px solid var(--bo-16)}
  .inv .ledger tr{border-bottom-color:var(--ch-16)}
  .ledger td{border:0;padding:0}
  .ledger .c-n{grid-row:1/span 3}
  .ledger .c-y,.ledger .c-d{display:inline;width:auto}
  .ledger .c-d::before{content:" · "}
  .ledger .c-r{text-align:left;width:auto}
  .ledger tr:hover td{background:none}
}

/* ── CTAs ─────────────────────────────────────── */
/* One conversion path: every CTA on the site points at #contact. */
.top-r{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px)}
.cta-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border:1px solid var(--bo-34);text-decoration:none;white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bo);transition:background .18s,color .18s,border-color .18s}
.cta-pill:hover{background:var(--bo);color:var(--ch);border-color:var(--bo)}
.inv .cta-pill{border-color:var(--ch-34);color:var(--ch)}
.inv .cta-pill:hover{background:var(--ch);color:var(--bo);border-color:var(--ch)}
.ctaband{display:flex;justify-content:space-between;align-items:center;gap:clamp(18px,3vw,32px);
  flex-wrap:wrap;margin-top:clamp(28px,4vw,44px);padding:30px 0 0;
  border-top:1px solid var(--bo-16)}
.inv .ctaband{border-top-color:var(--ch-16)}
.ctaband p{margin:0;font-family:var(--serif);font-size:clamp(21px,2.7vw,32px);
  letter-spacing:-.026em;line-height:1.06;color:var(--bo);max-width:32ch}
.inv .ctaband p{color:var(--ch)}
.ctaband p .it{font-style:italic}

/* ── case-study pages ──────────────────────────────── */
.top .back{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bo-70);text-decoration:none}
.top .back:hover{color:var(--bo)}
.plate{margin:clamp(28px,4vw,46px) 0 0;border:1px solid var(--bo-16)}
.inv .plate{border-color:var(--ch-16)}
.plate figcaption{display:flex;justify-content:space-between;gap:14px;padding:10px 13px;
  border-top:1px solid var(--bo-16);font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bo-70)}
.inv .plate figcaption{border-top-color:var(--ch-16);color:var(--ch-70)}
.nextnav{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid var(--bo-16);border-bottom:1px solid var(--bo-16)}
.nextnav a{text-decoration:none;font-family:var(--serif);font-size:clamp(21px,2.6vw,32px);
  letter-spacing:-.028em;color:var(--bo)}
.nextnav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.nextnav .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bo-70);display:block;margin-bottom:6px}
.ledger tr[data-href]{cursor:pointer}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,58px);align-items:start}
@media (max-width:900px){.case{grid-template-columns:1fr;gap:26px}}
.case .fig{margin:0;border:1px solid var(--bo-16)}
.inv .case .fig{border-color:var(--ch-16)}
.case .fig figcaption{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;
  border-top:1px solid var(--bo-16);font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--bo-70)}
.inv .case .fig figcaption{border-top-color:var(--ch-16);color:var(--ch-70)}

.rej{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--bo-16)}
.inv .rej{border-top-color:var(--ch-16)}
.rej li{padding:14px 0;border-bottom:1px solid var(--bo-16);display:grid;gap:5px}
.inv .rej li{border-bottom-color:var(--ch-16)}
.rej s{font-size:15.5px;font-weight:500;color:var(--bo);text-decoration:none}
.rej s::before{content:"✕  ";font-family:var(--mono);font-size:12px;color:var(--bo-34)}
.inv .rej s{color:var(--ch)}
.inv .rej s::before{color:var(--ch-34)}
.rej p{font-size:14px;line-height:1.55;color:var(--bo-70)}
.inv .rej p{color:var(--ch-70)}

/* ── two-col prose ─────────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);margin-top:clamp(26px,3.4vw,38px)}
@media (max-width:820px){.duo{grid-template-columns:1fr;gap:26px}}

/* ── fit / not-fit lists ───────────────────────────── */
.fit{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--bo-16)}
.fit li{position:relative;padding:11px 0 11px 28px;border-bottom:1px solid var(--bo-16);font-size:15px;line-height:1.5;color:var(--bo-88)}
.fit li:last-child{border-bottom:0}
.fit li::before{content:"✓";position:absolute;left:2px;top:11px;font-family:var(--mono);font-size:12px;color:var(--bo-70)}
.fit--no li{color:var(--bo-70)}
.fit--no li::before{content:"✕";color:var(--bo-34)}
.fit-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bo-70);margin-bottom:2px}

/* ── definition rows (range / practice / beliefs) ──── */
.defs{margin-top:clamp(26px,3.4vw,38px);border-top:1px solid var(--bo-16)}
.inv .defs{border-top-color:var(--ch-16)}
.defs > div{display:grid;grid-template-columns:minmax(0,206px) minmax(0,1fr);gap:clamp(14px,3vw,40px);
  padding:19px 0;border-bottom:1px solid var(--bo-16)}
.defs > div:last-child{border-bottom:0;padding-bottom:0}
.inv .defs > div:last-child{border-bottom:0;padding-bottom:0}
.inv .defs > div{border-bottom-color:var(--ch-16)}
@media (max-width:760px){.defs > div{grid-template-columns:1fr;gap:6px}}
.defs h3{font-size:17.5px;letter-spacing:-.022em}
.defs .yr{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bo-70);margin-top:5px}
.inv .defs .yr{color:var(--ch-70)}
.defs p{font-size:15px;line-height:1.55;color:var(--bo-70);max-width:60ch}
.inv .defs p{color:var(--ch-70)}
.defs p b{color:var(--bo);font-weight:500}
.inv .defs p b{color:var(--ch)}

/* ── studio cards: bone on charcoal ────────────────── */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--bo-16);
  border:1px solid var(--bo-16);margin-top:clamp(28px,4vw,40px)}
.inv .offers{background:var(--ch-16);border-color:var(--ch-16)}
@media (max-width:900px){.offers{grid-template-columns:1fr}}
/* .off paints its own bone card. Every descendant colour is declared
   against charcoal here. Never inherit from the wrapping block. */
.off{background:var(--bo);color:var(--ch-88);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:10px}
.off .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ch-70)}
.off h3{font-family:var(--serif);font-size:25px;letter-spacing:-.026em;color:var(--ch)}
.off p{font-size:14.5px;line-height:1.55;color:var(--ch-70)}
.off p b{color:var(--ch);font-weight:500}
.off .w{margin-top:auto;padding-top:14px;border-top:1px solid var(--ch-16);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ch-70)}

/* ── about ─────────────────────────────────────────── */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,336px);gap:clamp(26px,4vw,60px);align-items:start}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.about figure{margin:0;border:1px solid var(--bo-16)}
.about figcaption{display:flex;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--bo-16);
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--bo-70)}

/* ── contact ───────────────────────────────────────── */
.reach{margin-top:clamp(28px,4vw,40px);border-top:1px solid var(--bo-16)}
.reach a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--bo-16);text-decoration:none;
  font-family:var(--serif);font-size:clamp(23px,3.1vw,40px);letter-spacing:-.03em;color:var(--bo);transition:padding-left .2s}
.reach a:hover{padding-left:9px}
.reach a .go{flex-shrink:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bo);border:1px solid var(--bo-34);padding:11px 16px;
  transition:background .18s,color .18s,border-color .18s}
.reach a:hover .go{background:var(--bo);color:var(--ch);border-color:var(--bo)}

.endnote{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,3vw,40px);
  margin-top:clamp(30px,4vw,46px);padding-top:clamp(24px,3vw,32px)}
.endnote h4{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bo-70);font-weight:400;margin-bottom:9px;letter-spacing:.15em}
.endnote p,.endnote li{font-size:14px;line-height:1.55;color:var(--bo-70)}
.endnote p b{color:var(--bo);font-weight:500}
.endnote ul{list-style:none;margin:0;padding:0}
.endnote li{padding:3px 0}
.endnote a{text-decoration:none;border-bottom:1px solid var(--bo-34)}
.endnote a:hover{border-bottom-color:var(--bo)}
.sig{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(30px,4vw,44px);padding-top:18px;border-top:1px solid var(--bo-16);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--bo-70)}