:root{--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* base.css · shared by every Tier A page built in ~/.appbrew-web. Every value from web.md §1.
   Glass is the record's one surface over photography, the same material as the shared Navbar's buttons:
   cream .6 + hairline + blur(12) saturate(1.6). (.44 measured 4.20:1 for a blue link over a plate on /about.) */

@font-face{font-family:'Doppio';src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab8d2b7706536b3792e9d06_cs-Doppio-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Doppio';src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab8d2b7beb80ce976446dd1_cs-Doppio-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Doppio';src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab8d2b7d25a5ffe5e060f88_cs-Doppio-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --cream:#FAF8F5; --canvas:#F0EBE2; --night:#062265;
  --ink:#231B10; --ink-70:rgba(35,27,16,.74); --ink-45:rgba(35,27,16,.69); --rule:rgba(35,27,16,.14);
  --blue:#0033A0; --blue-950:#062265; --blue-300:#6FA8FF; --blue-100:#DBE7FF;
  --hi:#FC401F; --hi-ink:#C4100A;
  --glass:rgba(250,248,245,.6); --glass-blur:blur(12px) saturate(1.6);
  --dop:'Doppio','Inter',system-ui,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:64px;
  --gap-self:64px; --gap-head:96px; --gap-prose:128px;
  --r-plate:40px; --r-surface:16px; --r-control:12px; --r-chip:8px;
  --shadow:0 4px 24px rgba(35,27,16,.08);
  --nav-h:72px;
}
@media (max-width:1023px){:root{--gutter:40px}}
@media (max-width:767px){:root{--gutter:24px; --gap-self:40px; --gap-head:64px; --gap-prose:80px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink-70);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,figcaption,blockquote,hr,button{margin:0;padding:0}
ul,ol{list-style:none}
blockquote{border:0;font:inherit}   /* Webflow normalize gives blockquote a 5px grey border-left and its own font */
figcaption{text-align:inherit}      /* and figcaption text-align:center */
li{margin:0;padding:0} /* Webflow's site CSS gives li a margin and padding-left */
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── type roles ─────────────────────────────────────────────── */
h1{font:400 clamp(46px,5.4vw,78px)/1.04 var(--dop);letter-spacing:-.02em;color:var(--ink)}
h2{font:400 clamp(34px,4.4vw,52px)/1.08 var(--dop);letter-spacing:-.02em;color:var(--ink)}
.cap{font:500 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.name{color:var(--ink)}

/* one text-action treatment */
.txt{color:var(--blue);padding:12px 0;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s var(--ease)}
.txt:hover{text-decoration-color:var(--blue)}
.txt-arrow{display:inline-flex;align-items:center;gap:8px}
.txt-arrow .ico{transition:transform .2s var(--ease)}
.txt-arrow:hover .ico{transform:translateX(4px)}
.ico{width:20px;height:20px;flex:0 0 20px}

/* one button box */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:var(--r-control);font:500 17px/1.55 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
.btn:active{transform:scale(.98);transition-duration:.12s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-950)}
.btn-secondary{border:1px solid var(--rule);color:var(--ink);background:transparent}
.btn-secondary:hover{border-color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* glass — the one surface allowed over photography */
.glass{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--rule)}

/* ── sections carry their own gutter ────────────────────────── */
section,.foot{padding-left:var(--gutter);padding-right:var(--gutter)}

/* ── nav: a fixed glass pill over the plate (placeholder for the Webflow component) ── */
.nav{position:fixed;top:16px;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 var(--gutter);pointer-events:none}
.nav-pill{pointer-events:auto;display:flex;align-items:center;gap:32px;height:56px;padding:0 8px 0 16px;border-radius:var(--r-control);transition:background-color .32s var(--ease)}
.nav.is-stuck .nav-pill{background:rgba(250,248,245,.78)}
.wordmark{color:var(--ink);display:block;padding:12px 0}
.wordmark-svg{display:block;width:101px;height:24px;background-color:currentColor;-webkit-mask:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c9364bd9c55c216c43_milo-wordmark.svg') no-repeat center/contain;mask:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c9364bd9c55c216c43_milo-wordmark.svg') no-repeat center/contain}
.nav-links{display:flex;gap:24px;font:500 17px/1.55 var(--sans)}
.nav-links a{color:var(--ink-70);text-decoration:none;padding:12px 0;transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-burger span{display:block;width:16px;height:2px;background:var(--ink)}
@media (max-width:1023px){.nav-links,.nav-cta .btn-secondary{display:none}.nav-pill{gap:16px}.nav-burger{display:flex}}
@media (max-width:767px){.nav{top:8px}.nav-pill{width:100%;justify-content:space-between}}

/* ── footer — milo-v2's MEASURED anatomy: a 1.5fr + 1fr… grid, 40/28 gaps, 1.6 leading
   throughout, a borderless bottom bar, the sign-off. No image: milo-v2's footer carries no
   <img>, no <svg> and no background-image. Its own 40px side padding is just its page gutter
   (its sections run 126px 40px) — ours is 64, so the footer keeps OUR gutter or it would
   misalign against every section above it. ── */
/* milo-v2's footer carries no imagery, so the Milo that used to sit on the edge is retired.
   This keeps any page whose markup still has the <img> safe until it is re-ported —
   delete this line and restore the .foot-milo block to bring him back. */
.foot-milo{display:none}
.foot{padding:64px var(--gutter) 0;background:var(--canvas);color:rgba(35,27,16,.66);display:flex;flex-direction:column;align-items:center}
.foot-in{width:100%;max-width:1220px;display:flex;flex-direction:column}
/* milo-v2 measures 249.219px + 5x166.156px with a 28px gap — a 1.5fr lead track and 1fr each
   after it. grid-auto-flow:column reproduces that for any column count (/demo has 4, /about 5). */
.foot-top{display:grid;grid-template-columns:1.5fr;grid-auto-flow:column;grid-auto-columns:1fr;gap:40px 28px;padding-bottom:44px;border-bottom:1px solid rgba(35,27,16,.09)}   /* milo-v2 hangs the rule off .foot-top, not .foot-bot */
.foot-mark{color:var(--ink)}
.foot-mark p{margin-top:16px;max-width:274px;font-size:14.5px;line-height:1.55;color:var(--ink-45)}
.foot-col h4{font:400 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);margin-bottom:14px}
.foot-col ul{display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:14.5px;line-height:1.6;color:var(--ink-70);text-decoration:none;transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-bot{width:100%;max-width:1220px;margin-top:0;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:13px;line-height:1.6;color:var(--ink-45)}
.foot-social{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;line-height:1.6}
.foot-social a{color:var(--ink-45);text-decoration:none;transition:color .2s var(--ease)}
.foot-social a:hover{color:var(--ink)}
.foot-sign{width:100%;margin-top:52px;overflow:hidden;height:.86em;pointer-events:none;text-align:center;font:300 clamp(54px,15.6vw,226px)/.86 var(--dop);letter-spacing:-.035em;color:rgba(35,27,16,.06);user-select:none;white-space:nowrap}
@media (max-width:1023px){.foot-top{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto}.foot-mark{grid-column:1/-1}.foot-mark p{max-width:none}}
@media (max-width:767px){.foot{padding:48px var(--gutter) 60px}.foot-col h4{font-size:12px}.foot-col ul{gap:0}.foot-col a{display:block;padding:7px 0}.foot-bot{flex-direction:column;align-items:flex-start;gap:16px}.foot-social{gap:16px}.foot-sign{margin-top:30px}}   /* milo-v2's measured phone footer: two columns, 12px headings, 7px link padding */

/* ── motion: transform + opacity only, gated ─────────────────── */
.rv{opacity:0;transform:translateY(12px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn,.txt-arrow .ico,.postcard,.hero-img,.nav-pill{transition:none}.postcard:hover{transform:rotate(-6deg)}}

/* ── cookie consent · C23 — small, late, bottom-right; one obvious choice ── */
.cookie{position:fixed;right:24px;bottom:24px;z-index:110;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100% - 2*var(--gutter)));padding:8px 16px;background:var(--cream);border-radius:var(--r-surface);box-shadow:var(--shadow);color:var(--ink);font-size:15px;line-height:1.55;opacity:0;transform:translateY(8px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.cookie.in{opacity:1;transform:none}
.cookie[hidden]{display:none}
.cookie .ico{width:16px;height:16px;flex:0 0 16px;color:var(--ink-45)}
.cookie-line{white-space:nowrap}
.cookie-ref{display:inline-block;color:inherit;padding:12px 0;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:3px}
.cookie-ref:hover{text-decoration-color:var(--ink)}
.cookie-actions{display:flex;align-items:center;gap:8px;margin-left:8px;white-space:nowrap}
.cookie-no{display:inline-block;color:var(--ink-45);padding:12px 0;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:3px}
.cookie-no:hover{color:var(--ink);text-decoration-color:var(--ink)}
.cookie-actions .txt{font-weight:500}
.cookie-slash{color:var(--ink-45)}
@media (max-width:767px){
  .cookie{left:var(--gutter);right:var(--gutter);bottom:16px;max-width:none;flex-wrap:wrap;gap:4px 12px;padding:8px 16px}
  .cookie-line{white-space:normal;flex:1 1 200px}
  .cookie-actions{margin-left:28px}
}
@media (prefers-reduced-motion:reduce){.cookie{transition:none;transform:none;opacity:1}}

/* /case-studies · loaded after ../base.css.
   ROUND 2 — every type role, every section rhythm and every colour here is MEASURED off the
   live /milo-v2 at 1440x900, not inferred from the record:
     h1 63.36/500/1.14/-.022em · h2 56/500/1.08/-.024em · h3 34/500/1.08/-.018em
     statement Inter 29/1.52/-.011em · body Inter 18/1.52 · eyebrow mono 14/500/+.115em blue
     section padding 104 top / 112 bottom · --mono is ui-monospace, as milo-v2 resolves it
   The book and its glass lip are cofounder.co's, measured off their live page.
   NOTE: base.css still carries the older record scale, so these overrides live here until
   the scale is promoted (that re-themes /about and /pricing — Vishal's call). */

:root{
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;   /* what milo-v2 actually renders */
  --pad-top:96px; --pad-bot:128px;
  --shelf:1220px;                                        /* milo-v2's content measure */
  --book-w:290px; --book-h:472px;
  --lift:72px;                                           /* cofounder's exact lift */
  --lift-ease:cubic-bezier(.22,1,.36,1);                 /* and its exact curve */
  --paper:#FFFFFF;
}
@media (max-width:767px){:root{--pad-top:64px; --pad-bot:80px; --book-w:250px; --book-h:420px; --lift:56px}}

/* ── type, re-keyed to milo-v2 ──────────────────────────────── */
h1{font:500 clamp(40px,4.6vw,66px)/1.14 var(--dop);letter-spacing:-.022em;color:var(--ink)}
h2{font:500 clamp(34px,3.9vw,56px)/1.08 var(--dop);letter-spacing:-.024em;color:var(--ink)}
h3{font:500 clamp(24px,2.4vw,34px)/1.08 var(--dop);letter-spacing:-.018em;color:var(--ink)}
body{font:400 17px/1.52 var(--sans);color:var(--ink-70)}
.stmt{font:400 clamp(20px,2vw,29px)/1.52 var(--sans);letter-spacing:-.011em;color:var(--ink)}
.eyebrow{font:500 14px/1.6 var(--mono);letter-spacing:.115em;text-transform:uppercase;color:var(--blue)}
.eyebrow.q{color:var(--ink-45)}
.cap{font:500 14px/1.6 var(--mono);letter-spacing:.115em;text-transform:uppercase;color:var(--blue)}
.mono{font:400 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
ol{list-style:none}
a{text-decoration:none}
.num{font-variant-numeric:tabular-nums}

main > section{padding-top:var(--pad-top);padding-bottom:var(--pad-bot);
  padding-left:var(--gutter);padding-right:var(--gutter);display:flex;justify-content:center}
.wrap{width:100%;max-width:var(--shelf)}

/* ══ 1 · HERO — the shelf standing in the meadow ══════════════ */
.hero{position:relative;padding:0;min-height:min(900px,100svh);overflow:hidden;isolation:isolate;align-items:flex-start}
.hero-plate{position:absolute;inset:0;z-index:-2;background:var(--canvas) center 62%/cover no-repeat}
.hero-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,248,245,.70) 0%,rgba(250,248,245,.66) 38%,
    rgba(250,248,245,.40) 56%,rgba(250,248,245,.14) 72%,rgba(250,248,245,.88) 97%,var(--cream) 100%)}
.hero .wrap{display:flex;flex-direction:column;align-items:center;
  padding:96px var(--gutter) 0}
.hero-card{max-width:1100px;text-align:center}
.hero-card .eyebrow{margin-bottom:24px}
.hero-card .stmt{margin-top:24px;color:var(--ink);max-width:760px;margin-left:auto;margin-right:auto}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px}
/* ── the shelf standing in the meadow: every volume, seen edge-on ──────────────
   Seven cloth tones, all of them the record's own colours, never repeating side by side.
   Each spine carries a title band and two raised hubs, the way a bound book does — a flat
   pale rectangle reads as a bar chart, not a book. Height carries the published lift,
   thickness varies the way books do, and the clusters mark the seven shelves below. */
.wall{position:relative;margin-top:48px;max-width:100%;display:flex;align-items:flex-end;
  justify-content:center;gap:0;padding-bottom:24px}
/* the shelf itself: a board the books stand on, with a lip you can see */
.wall-board{position:absolute;left:-32px;bottom:0;width:calc(100% + 64px);height:72px;
  z-index:0;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(35,27,16,.10))}
.wall-gb{backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9);
  clip-path:url(#cs-glass-clip);height:100%;width:100%}
.wall-lip{position:absolute;left:-32px;bottom:16px;width:calc(100% + 64px);height:3px;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(35,27,16,.22),rgba(35,27,16,.06))}
.wall-cast{position:absolute;left:-8px;bottom:19px;width:calc(100% + 16px);height:28px;
  z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(35,27,16,.20),rgba(35,27,16,0))}

.wall-i{position:relative;z-index:1;display:block;flex:0 0 auto;border-radius:0;
  transition:transform .32s var(--ease)}
.wall-i.first{margin-left:12px}
.wall-i.first:first-child{margin-left:0}
/* the title band, and the two raised hubs at head and foot */
.wall-i::before{content:'';position:absolute;left:3px;right:3px;top:28px;height:30px}
.wall-i::after{content:'';position:absolute;left:2px;right:2px;top:78px;height:9px;
  background:repeating-linear-gradient(currentColor 0 2px,transparent 2px 7px)}
/* white, beige, and shadow — the same material as the books below, turned on its side so
   each volume casts onto the next. The four-layer recipe is the card's: an inset white
   highlight, a hairline, and two soft drops. No colour blocks. */
.wall-i{background:#fff;
  box-shadow:0 2px 1px 0 #FFF inset, 0 0 0 .931px rgba(35,27,16,.10),
             5px 0 10px 0 rgba(35,27,16,.05), 9px 0 14px 0 rgba(35,27,16,.03)}
.t5{background:var(--canvas);color:rgba(35,27,16,.24)}    .t5::before{background:var(--cream)}
.t7{background:var(--cream);color:rgba(35,27,16,.22)}     .t7::before{background:var(--canvas)}
.t1{background:#fff;color:rgba(35,27,16,.2)}              .t1::before{background:var(--canvas)}
.t3{background:var(--cream);color:rgba(6,34,101,.22)}     .t3::before{background:var(--blue-100)}

.wall-i:hover{transform:translateY(-16px)}
.wall-t{position:absolute;top:calc(100% + 28px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:280px;padding:12px 16px;background:var(--cream);
  box-shadow:var(--shadow);border-radius:var(--r-chip);text-align:center;z-index:3;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.wall-i:hover .wall-t,.wall-i:focus-visible .wall-t{opacity:1}
.wall-t b{display:block;font:500 20px/1.1 var(--dop);letter-spacing:-.02em;color:var(--ink)}
.wall-t span{display:block;margin-top:4px;font:400 14px/1.6 var(--mono);
  letter-spacing:.06em;color:var(--blue)}
@media (max-width:1023px){.wall{margin-top:48px}}
/* on touch a 7px spine is not a control: the wall is the library at a glance and the chips
   below do the navigating. Decorative there, and it says so. */
@media (max-width:767px){.wall-t{display:none}.wall-i{pointer-events:none}
  .wall-i::before{top:14px;height:20px}.wall-i::after{top:40px;height:6px}}

/* ══ 2 · PROOF — milo-v2's own band: orange figures, ruled cells ══ */
.proof .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.proof ol{margin-top:48px;width:100%;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proof li{padding:32px 32px;border-left:1px solid var(--rule);text-align:left}
.proof li:first-child{border-left:0;padding-left:0}
.proof b{display:block;font:400 clamp(34px,3.9vw,56px)/1.08 var(--dop);letter-spacing:-.024em;
  color:var(--hi);font-variant-numeric:tabular-nums}
.proof span{display:block;margin-top:8px;color:var(--ink-70)}
.proof .src{margin-top:24px;color:var(--ink-45)}
@media (max-width:767px){.proof ol{grid-template-columns:1fr 1fr}
  .proof li{padding:24px 16px}.proof li:nth-child(odd){border-left:0;padding-left:0}
  .proof li:nth-child(n+3){border-top:1px solid var(--rule)}}

/* ══ 3 · THE LIBRARY ═════════════════════════════════════════ */
.lib .wrap{display:flex;flex-direction:column}
.lib-head{max-width:820px}
.lib-head h2{margin-top:16px}
.lib-head p{margin-top:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.chip{height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;
  border:1px solid var(--rule);color:var(--ink-70);background:transparent;
  font:400 17px/1 var(--sans);transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease)}
.chip .n{font:400 14px/1 var(--mono);color:var(--ink-45)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip[aria-pressed="true"] .n{color:rgba(250,248,245,.7)}

.shelf{margin-top:96px}
.shelf-h{display:flex;align-items:center;gap:16px}
.shelf-h h3{margin-top:0}
.shelf-claim{margin-top:12px;max-width:720px}
.shelf-n{display:flex;gap:8px;margin-inline-start:auto}
.arrow{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;
  border:1px solid var(--rule);color:var(--ink);transition:border-color .2s var(--ease),opacity .2s var(--ease)}
.arrow:hover{border-color:var(--ink)}
.arrow[disabled]{opacity:.3;cursor:default}
.arrow svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* one shelf, read sideways. 96 of headroom so a book can leave it uncropped. */
.row{margin-top:16px;display:flex;gap:48px;padding:96px 24px 24px;
  margin-left:-24px;margin-right:-24px;scroll-padding-left:24px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 95%,transparent);
          mask-image:linear-gradient(90deg,#000 0,#000 95%,transparent)}
.row::-webkit-scrollbar{display:none}
.bk-slot{flex:0 0 var(--book-w);scroll-snap-align:start}

/* ── the book · cofounder.co's object, measured ─────────────── */
.bk{display:block;width:var(--book-w);position:relative}
.bk-body{position:relative}
.bk-in{display:flex;align-items:stretch;width:100%;min-height:var(--book-h);overflow:hidden;
  border-radius:8px 12px 12px 8px;background:var(--paper);
  box-shadow:0 2px 1px 0 #FFF inset, 0 0 0 .931px rgba(0,0,0,.08),
             0 4px 8px 0 rgba(0,0,0,.03), 0 9px 8px 0 rgba(0,0,0,.02);
  transition:transform .5s var(--lift-ease),box-shadow .5s var(--lift-ease)}
.bk-spine{width:16px;flex:0 0 16px;
  background:linear-gradient(270deg,rgba(210,208,202,.20) 0%,rgba(230,228,224,.10) 60%,rgba(245,244,241,.02) 100%)}
.bk-face{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:var(--paper)}
/* three tiers, in the order a card is read:
     imprint  — mono 12, ink-45. Volume and chapter are ONE line of metadata, not a title.
     title    — the brand, Doppio 20, ink.
     finding  — the published number, Doppio 29 blue: the largest thing on the card, because
                it is the reason to open it. Its label sits UNDER it, not beside it, which
                is what was making it wrap into the number.
   Below the glass lip, the colophon at 12/ink-45. */
.bk-imp{padding:28px 20px 0;font:400 12px/1.4 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45)}
.bk-brand{padding:8px 20px 0;max-width:210px;font:500 20px/1.1 var(--dop);letter-spacing:-.02em;
  color:var(--ink);text-shadow:0 .5px .5px #FFF, 0 .3px .3px rgba(0,0,0,.12)}
.bk-rule{margin:20px 20px 16px;height:1px;background:rgba(35,27,16,.10);
  box-shadow:0 .5px 0 0 rgba(255,255,255,.8)}
.bk-img{margin:0 20px}
.bk-img img{width:100%;height:auto;aspect-ratio:1.28;object-fit:cover;border-radius:8px;
  background:var(--canvas)}
.bk-n{padding:24px 20px 0;display:block}
.bk-n b{display:block;font:400 29px/1.08 var(--dop);letter-spacing:-.024em;color:var(--blue);
  font-variant-numeric:tabular-nums}
.bk-n span{display:block;margin-top:4px;font:400 12px/1.4 var(--mono);letter-spacing:.06em;
  color:var(--ink-45)}
.bk-f{margin-top:auto;padding:16px 20px 20px;display:flex;align-items:center;justify-content:space-between;
  font:400 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-45)}
/* the glass lip the book stands in — cofounder's Figma export, verbatim */
.bk-glass{position:absolute;left:-20px;right:-20px;bottom:-20px;width:calc(100% + 40px);height:19%;
  pointer-events:none;z-index:2}
.bk-gb{backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
  clip-path:url(#cs-glass-clip);height:100%;width:100%}

.bk-read{margin-top:40px;display:flex;justify-content:center}
.bk-read i{position:relative;display:inline-flex;align-items:center;font-style:normal;
  font:400 14px/1.33 var(--mono);letter-spacing:.06em;color:var(--ink-45);
  transition:color .2s var(--ease)}
.bk-read i::after{content:'';position:absolute;left:calc(100% + 6px);width:12px;height:12px;
  background:currentColor;opacity:0;translate:-4px 0;
  -webkit-mask:var(--arr) no-repeat center/contain;mask:var(--arr) no-repeat center/contain;
  transition:opacity .3s cubic-bezier(.23,1,.32,1),translate .3s cubic-bezier(.23,1,.32,1)}
.bk:hover .bk-in{transform:translateY(calc(-1 * var(--lift)))}
.bk:hover .bk-read i{color:var(--ink)}
.bk:hover .bk-read i::after{opacity:1;translate:0 0}
.bk:focus-visible .bk-in{transform:translateY(calc(-1 * var(--lift)))}

/* ══ 4 · ONE VOLUME, OPENED ══════════════════════════════════ */
.story .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:80px;align-items:center}
.story blockquote{margin-top:32px;font:400 clamp(20px,2vw,29px)/1.45 var(--dop);letter-spacing:-.018em;color:var(--ink)}
.story .who{margin-top:24px;color:var(--ink-70)}
.story dl{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding-top:24px;border-top:1px solid var(--rule)}
.story dt{font:500 clamp(24px,2.4vw,34px)/1.08 var(--dop);letter-spacing:-.018em;color:var(--blue);
  font-variant-numeric:tabular-nums}
.story dd{margin-top:4px;color:var(--ink-70)}
.story-plate{display:flex;justify-content:center;align-items:flex-end}
.story-plate .bk{--book-w:320px;--book-h:520px;pointer-events:none}
.story-plate .bk-read{display:none}
@media (max-width:1023px){.story .wrap{grid-template-columns:1fr;gap:48px}
  .story-plate{order:-1}}
@media (max-width:767px){.story dl{grid-template-columns:1fr;gap:16px}}

/* ══ 5 · CLOSE ═══════════════════════════════════════════════ */
.close .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.close img.milo{width:140px;height:auto;margin-bottom:24px}
.close p{margin-top:24px;max-width:640px}
.close .hero-cta{margin-top:40px}

/* ══ 6 · THE PREVIEW SHEET ════════════════════════════════════
   Clicking a volume opens it beside the shelf instead of leaving the page, so the shelf
   can actually be skimmed. Anatomy measured off cofounder.co's own sheet (the LLC
   incorporation panel on their 3.0 Operate section):
     overlay  #111318 at .20 + blur(2px), click to close
     sheet    right-docked, 620 wide, inset 16, radius 16, translucent + blur(38) saturate(1.45)
     close    40x40 at right-4/top-4, white .46 + blur(16), 150ms
     body     overflow-y:auto, 24 side / 28 top / 32 bottom
   Ours uses the record's ink and cream in place of their greys, and a 44px close. */
.sheet-ov{position:fixed;inset:0;z-index:300;background:rgba(35,27,16,.20);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .32s var(--ease)}
.sheet-ov.in{opacity:1}
.sheet{position:fixed;z-index:301;right:16px;bottom:16px;top:16px;
  width:min(620px,calc(100% - 32px));display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-surface);background:rgba(250,248,245,.68);
  -webkit-backdrop-filter:blur(38px) saturate(1.45);backdrop-filter:blur(38px) saturate(1.45);
  box-shadow:0 24px 64px rgba(35,27,16,.18), 0 2px 8px rgba(35,27,16,.08);
  transform:translateX(24px);opacity:0;
  transition:transform .36s var(--ease),opacity .28s var(--ease)}
.sheet.in{transform:none;opacity:1}
.sheet[hidden],.sheet-ov[hidden]{display:none}
.sheet:focus{outline:none}
.sheet-x{position:absolute;right:16px;top:16px;z-index:2;width:44px;height:44px;
  display:grid;place-items:center;border-radius:var(--r-control);
  background:rgba(255,255,255,.46);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  color:var(--ink);transition:background-color .15s var(--ease),transform .15s var(--ease)}
.sheet-x:hover{background:#fff}
.sheet-x:active{transform:scale(.94)}
.sheet-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:32px 24px 32px;flex:1 1 auto}
.sheet-body .eyebrow{margin-bottom:16px}
.sheet-body > h3{max-width:16ch}
.sheet-sub{margin-top:16px;color:var(--ink-70)}
.sheet-plate{margin:32px -24px 0;background:var(--canvas);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.55)}
.sheet-plate img{width:100%;height:auto;max-height:300px;aspect-ratio:1.6;object-fit:cover;display:block}
.sheet-note{color:var(--ink-70)}
/* the sheet is the case study, sectioned: who -> what changed -> the review -> the plate
   -> what they did -> in short. The numbers get their own solid plate so they are the
   first thing the eye lands on; everything after them sits on the glass. */
.sheet-stats{margin-top:32px;padding:24px;border-radius:var(--r-card);background:#fff;
  box-shadow:0 2px 1px 0 #FFF inset, 0 0 0 .931px rgba(35,27,16,.10),
             0 5px 10px 0 rgba(35,27,16,.05), 0 9px 14px 0 rgba(35,27,16,.03)}
.sheet-stats dl{margin-top:16px;display:flex;flex-direction:column;gap:24px}
.sheet-stats dl > div{display:flex;align-items:baseline;gap:24px}
.sheet-stats dt{flex:0 0 118px;font:400 clamp(29px,3vw,34px)/1.08 var(--dop);letter-spacing:-.024em;
  color:var(--blue);font-variant-numeric:tabular-nums}
.sheet-stats dd{font:400 14px/1.6 var(--sans);color:var(--ink-70)}
.sheet-quote{margin-top:32px;padding-top:32px;border-top:1px solid var(--rule)}
.sheet-quote blockquote{font:400 20px/1.45 var(--dop);letter-spacing:-.018em;color:var(--ink)}
.sheet-quote .who{margin-top:16px;font:400 14px/1.6 var(--sans);color:var(--ink-45)}
.sheet-quote .who b{font-weight:500;color:var(--ink)}
.sheet-sec{margin-top:32px;padding-top:32px;border-top:1px solid var(--rule)}
.sheet-sec .eyebrow{margin-bottom:16px}
.sheet-list{display:flex;flex-direction:column;gap:16px}
.sheet-list li{position:relative;padding-left:24px;color:var(--ink-70)}
.sheet-list li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:1px;
  background:var(--blue)}
/* the article arrives as the CMS rich text: h2 sections, h3 sub-heads, prose and figures.
   Only three sizes, all from the page's own record, so the sheet reads like the page. */
.sheet-article h2{margin:32px 0 12px;font:500 24px/1.2 var(--dop);letter-spacing:-.02em;color:var(--ink)}
.sheet-article h3{margin:24px 0 8px;font:500 17px/1.4 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.sheet-article h2:first-of-type{margin-top:4px}
.sheet-article p{margin-top:12px;color:var(--ink-70)}
.sheet-article strong{font-weight:500;color:var(--ink)}
.sheet-article ul,.sheet-article ol{margin-top:12px;padding-left:24px;color:var(--ink-70)}
.sheet-article li{margin-top:8px}
.sheet-article a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.sheet-article figure{margin:24px 0 0;border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.sheet-article figure img{display:block;width:100%;height:auto}
.sheet-article figure img[width]{aspect-ratio:attr(width) / attr(height)}
.sheet-loading{color:var(--ink-45)}

@media (max-width:767px){
  .sheet-stats{padding:16px}
  .sheet-stats dl > div{flex-direction:column;gap:4px}
  .sheet-stats dt{flex:none}}
.sheet-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:24px;border-top:1px solid var(--rule);background:rgba(250,248,245,.5)}
.sheet-foot .txt{margin-left:auto}
@media (max-width:767px){
  .sheet{right:8px;left:8px;bottom:8px;top:auto;width:auto;max-height:86dvh;
    transform:translateY(24px)}
  .sheet-body{padding:24px 16px}
  .sheet-plate{margin-left:-16px;margin-right:-16px}
  .sheet-foot{padding:16px}
  .sheet-foot .txt{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .sheet,.sheet-ov,.sheet-x{transition:none}
  .sheet{transform:none}
}