/* =========================================================================
   A First Read · its own page, its own warmth
   LG Studio's Ivory, Ink and Stone, plus one explicit exception: coral,
   shared with StrategyIQ (the engine behind the read). Colour carries meaning:
     Ivory = the surface · Coral = the question · Ink = the insight beneath.
   The retired V3 cool accent is not used.
   ========================================================================= */
@font-face{font-family:'Hanken Grotesk';src:url(/assets/fonts/HankenGrotesk-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/JetBrainsMono-latin.woff2) format('woff2');font-weight:100 800;font-display:swap}

:root{
  --ground:#F0ECE3;      /* Ivory (V4): the surface */
  --paper:#F8F5EF;
  --ink:#12110F;         /* Ink (V4): the insight beneath */
  --ink-2:#4A4642;
  --mute:#716D6A;        /* Stone */
  --stone-l:#94918A;
  --mute-txt:#66625F;    /* Stone, deepened for 11px labels (AA on Ivory and Stone tint) */
  --rule:rgba(18,17,15,.12);
  --coral:#E8665F;       /* the question (exception, shared with StrategyIQ) */
  --coral-d:#B4463E;     /* coral for text on ivory (AA) */
  --coral-t:#F9E1DB;
  --rose-t:#F3DAD6;
  --stone-t:#E3DED5;
  --sand-t:#F1E5CF;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --gut:clamp(20px,5vw,72px);
  --max:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:9;background:var(--ink);color:var(--ground);padding:10px 14px}
:focus-visible{outline:2px solid var(--coral-d);outline-offset:3px}
.mini{font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute-txt)}
.soft{color:var(--mute)}

/* Top bar */
.top{position:sticky;top:0;z-index:10;background:rgba(240,236,227,.88);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand img{height:24px;width:auto}
.top-r{display:flex;align-items:center;gap:22px}
.nav{display:flex;gap:30px;list-style:none;font-size:14px}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{box-shadow:0 1px 0 var(--coral)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute-txt)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs .num{color:#76623D}
.crumbs [aria-current]{color:var(--ink)}
.lang{display:flex;gap:2px;font:500 11px var(--mono);letter-spacing:.12em;border:1px solid var(--rule);border-radius:999px;padding:3px}
.lang button{all:unset;cursor:pointer;padding:6px 10px;border-radius:999px;color:var(--mute)}
.lang button.on{background:var(--ink);color:var(--ground)}

/* 1 · Intro */
.intro{padding:clamp(64px,10vw,140px) 0 clamp(36px,5vw,56px)}
.intro h1{margin-top:28px;font-weight:600;font-size:clamp(46px,7.4vw,104px);line-height:.98;letter-spacing:-.04em;max-width:13ch}
.intro h1 .warm{color:var(--coral-d)}
.lede{margin-top:28px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ink-2);max-width:40ch}

/* 2 · Cards */
.pick{padding-bottom:clamp(64px,8vw,110px)}
.kicker{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute-txt);margin-bottom:18px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:150px;padding:24px 26px;border-radius:16px;border:1px solid rgba(26,24,22,.07);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .45s,filter .45s}
.card.wide{grid-column:1 / -1;min-height:120px}
.card .ico{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card .t{font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.18;letter-spacing:-.018em;max-width:20ch}
.card::after{content:"→";position:absolute;right:24px;bottom:22px;font-size:20px;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(26,24,22,.35)}
.card:hover::after,.card.on::after{opacity:.7;transform:none}
.t-coral{background:var(--coral-t);color:#5A2420}
.t-stone{background:var(--stone-t);color:#2E2B28}
.t-sand{background:var(--sand-t);color:#4F3A17}
.t-paper{background:var(--paper);color:var(--ink)}
.t-rose{background:var(--rose-t);color:#5A2626}
.card.on{box-shadow:0 0 0 2px var(--ink) inset,0 22px 44px -24px rgba(26,24,22,.45)}

/* 3 · The signature moment: a change of perspective, fast.
   The visitor's words sit on the surface (ivory). A coral waterline opens.
   The view drops beneath it into Ink, where a different possibility is. ~1.6 s. */
.stage{padding-bottom:clamp(56px,8vw,100px)}
.reveal{position:relative;background:var(--paper);border-radius:24px;padding:clamp(26px,3.6vw,44px) clamp(18px,4vw,56px) clamp(22px,3vw,32px);text-align:center;overflow:hidden;
  box-shadow:0 30px 80px -50px rgba(18,17,15,.45)}
.surface .mini,.under .mini{display:inline-flex;align-items:center;gap:10px}
.surface .seen{margin:10px auto 0;font-weight:600;font-size:clamp(24px,3vw,40px);line-height:1.08;letter-spacing:-.03em;max-width:20ch;color:var(--ink);
  transition:color .5s var(--ease),transform .5s var(--ease)}
.waterline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:18px 0 0}
.waterline .line{height:1.5px;background:var(--coral);transform:scaleX(0);transition:transform .45s var(--io)}
.waterline .line:first-child{transform-origin:100% 50%}.waterline .line:last-child{transform-origin:0 50%}
.warmtxt{color:var(--coral-d);opacity:0;transition:opacity .3s}
.under{position:relative;margin:18px -1px 0;border-radius:18px;background:var(--ink);color:var(--ground);padding:clamp(24px,3.4vw,44px) clamp(18px,4vw,52px);
  clip-path:inset(0 0 100% 0 round 18px);transform:translateY(18px);transition:clip-path .55s var(--io),transform .55s var(--ease)}
.under .mini{color:rgba(240,236,227,.6)}
.reframe{margin-top:12px;display:grid;gap:4px;font-weight:600;font-size:clamp(25px,3vw,42px);line-height:1.1;letter-spacing:-.028em}
.reframe .ra{color:var(--stone-l)}
.reframe .rb{color:var(--ground)}
.reframe span{opacity:0;transform:translateY(.35em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.reframe .rb{transition-delay:.18s}
.caveat{margin-top:14px;font-size:15px;color:var(--mute-txt);opacity:0;transition:opacity .4s}
.next{margin-top:14px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;opacity:0;transition:opacity .4s}

/* Timeline states (set by first-read.js) */
.reveal.p2 .seen{color:var(--mute);transform:translateY(-6px) scale(.96)}
.reveal.p2 .waterline .line{transform:scaleX(1)}
.reveal.p2 .warmtxt{opacity:1}
.reveal.p3 .under{clip-path:inset(0 0 0 0 round 18px);transform:none}
.reveal.p4 .reframe span{opacity:1;transform:none}
.reveal.p5 .caveat,.reveal.p5 .next{opacity:1}
.reveal.out .surface,.reveal.out .waterline,.reveal.out .under,.reveal.out .caveat,.reveal.out .next{opacity:0;transition:opacity .2s}

/* Pills */
.pill{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:15px;padding:14px 22px;border-radius:999px;transition:gap .25s,background .25s,opacity .25s}
.pill:hover{gap:16px}
.pill.ghost{border:1px solid var(--rule);background:transparent}
.pill.ghost:hover{background:rgba(26,24,22,.04)}
.pill.solid{background:var(--ground);color:var(--ink)}
.pill[aria-disabled="true"]{opacity:.35;pointer-events:none}
/* Reveal actions: both read as buttons; "Try another" is the obvious way back to the cards */
.next .pill{border:1px solid rgba(18,17,15,.38)}
.next #again{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.next #again:hover{background:#2A2825}
#go-layers[aria-expanded="true"] .arr{display:inline-block;transform:rotate(180deg)}
.human-card .method{margin-top:22px;padding-top:18px;border-top:1px solid rgba(243,237,227,.15);font-size:15px;color:rgba(243,237,227,.7)}
.human-card .method .soft{color:#9A958D}

/* 4 · Strata: the five layers deepen as you go down */
.depth{padding-bottom:clamp(56px,8vw,100px)}
.depth-head{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:end;margin-bottom:28px}
.depth-head h2{font-weight:600;font-size:clamp(28px,3vw,42px);line-height:1.06;letter-spacing:-.028em}
.depth-head p{color:var(--ink-2);max-width:36ch}
.strata{list-style:none;border-radius:20px;overflow:hidden}
.strata li{display:grid;grid-template-columns:minmax(200px,1fr) 2fr 128px;gap:24px;align-items:baseline;padding:24px clamp(20px,3vw,34px);
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.depth.in .strata li{opacity:1;transform:none}
.depth.in .strata li:nth-child(2){transition-delay:.12s}.depth.in .strata li:nth-child(3){transition-delay:.24s}
.depth.in .strata li:nth-child(4){transition-delay:.36s}.depth.in .strata li:nth-child(5){transition-delay:.48s}
.s1{background:var(--coral-t)}.s2{background:#ECE7DE}.s3{background:#DFD9CE}.s4{background:#CEC7BA}
.s5{background:var(--ink);color:var(--ground)}
.s-name{display:grid;gap:4px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.s-name .n{font:500 11px var(--mono);letter-spacing:.14em;color:var(--coral-d)}
.s5 .s-name .n{color:#F2A49C}
.s-name small{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.s-text{font-size:clamp(17px,1.4vw,20px);line-height:1.4;letter-spacing:-.01em}
.s1 .s-text{font-weight:600}
.s5 .s-text{font-weight:600}
.tag:empty{display:none}
.strata .tag{justify-self:end}
.tag{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid currentColor;opacity:.7;white-space:nowrap}
.tag[data-t="test"]{border-style:dashed;opacity:.9}
.tag[data-t="observed"]{color:#A23E37;opacity:1}
.under .tag[data-t="hypothesis"]{color:rgba(240,236,227,.8)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.note-card{background:var(--paper);border-radius:16px;padding:22px 26px}
.note-card p:not(.mini){margin-top:10px;font-size:17px;line-height:1.5}

/* 5 · Human read */
.human{padding-bottom:clamp(40px,6vw,72px)}
.human-card{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);background:#1B1A17;color:var(--ground);border-radius:24px;padding:clamp(32px,5vw,64px)}
.human-card .mini{color:rgba(243,237,227,.6)}
.human-card h2{margin-top:16px;font-weight:600;font-size:clamp(28px,3vw,42px);line-height:1.08;letter-spacing:-.028em}
.human-card .soft{color:#9A958D}
.human-card .sub{margin-top:18px;color:rgba(243,237,227,.7);max-width:34ch}
.human-form{display:grid;gap:14px;align-content:start}
.human-form textarea{font:400 16px/1.5 var(--sans);color:var(--ground);background:rgba(243,237,227,.06);border:1px solid rgba(243,237,227,.2);border-radius:12px;padding:14px 16px;resize:vertical}
.human-form textarea::placeholder{color:rgba(243,237,227,.4)}
.human-form textarea:focus{outline:none;border-color:rgba(243,237,227,.5)}
.human-form .pill{justify-self:start}
.micro{font-size:13px;color:rgba(243,237,227,.55)}
.fallback{display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(243,237,227,.15)}
.fallback[hidden]{display:none}
.fallback p{font-size:14px}
.textbtn{all:unset;cursor:pointer;justify-self:start;border-bottom:1px solid currentColor;font-weight:500;font-size:14px}
.direct{padding:8px 0 clamp(64px,8vw,100px)}
.direct-in{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
.direct p{font-size:15px;color:var(--ink-2)}
.direct a{font-weight:500;color:var(--ink)}

@media (max-width:860px){
  .depth-head,.human-card,.pair{grid-template-columns:1fr}
  .strata li{grid-template-columns:1fr;gap:8px}
  .tag{justify-self:start}
}
@media (max-width:980px){ .nav li:not(.nav-about){display:none} .top-r{gap:14px} .nav a{display:block;padding:14px 6px} }
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .card{min-height:0;padding:18px 20px;gap:16px}
  .reveal{border-radius:18px}
  .under{border-radius:14px}
  .next{display:grid;grid-template-columns:1fr;gap:8px}
  .next .pill{justify-content:center;padding:13px 16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   Embedded mode (inside the homepage dialog). The dialog supplies the LG
   Studio frame and the Close control, so the page drops its own chrome and
   gets to the cards sooner. Direct visits to /first-read/ are unchanged.
   ========================================================================= */
.fr-embed .skip,.fr-embed .top,.fr-embed .crumbs,.fr-embed .direct,.fr-embed #studio-footer-root{display:none !important}
.fr-embed .intro{padding:clamp(28px,4vw,52px) 0 clamp(20px,3vw,32px)}
.fr-embed .intro h1{margin-top:0;font-size:clamp(34px,4.6vw,64px)}
.fr-embed .lede{margin-top:16px;font-size:clamp(16px,1.3vw,19px)}
.fr-embed .pick{padding-bottom:clamp(40px,5vw,64px)}
.fr-embed .human{padding-bottom:clamp(28px,4vw,48px)}