/* Part B: story layer. Loaded after files.css on the case page.
   Grid: 4 cols / 20px margins on phones, 12 cols / max 1200 on desktop. Baseline 4px: every line-height is a multiple of 4. */
:root{--gutm:20px}
@media (max-width:760px){:root{--gut:20px}}
.kicker{letter-spacing:.08em}

/* ---------- honesty badges: one system everywhere ---------- */
.badge{display:inline-flex;align-items:center;font:600 11px/16px var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border:1px solid rgba(236,229,211,.34);border-radius:2px;color:var(--bone-2);white-space:nowrap;vertical-align:2px;margin-left:8px}
.badge[data-k="shown"]{color:var(--gold);border-color:rgba(242,179,61,.55)}
.badge[data-k="illus"]{color:var(--bone-3);border-style:dashed;border-color:rgba(163,154,138,.7)}
.badge[data-k="calc"]{color:#cfc6b4;border-style:dotted}
.badge:first-child{margin-left:0}

/* ---------- section heads ---------- */
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:96px 0 32px;border-top:1px solid var(--line-2);margin-top:64px}
.sec-n{grid-column:1/-1;font:500 12px/16px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.sec-t{grid-column:1/9;font:400 clamp(40px,6.2vw,88px)/.96 var(--f-d);letter-spacing:-.016em;margin:0;text-wrap:balance}
.sec-d{grid-column:1/8;font:400 19px/28px var(--f-b);color:var(--bone-2);margin:16px 0 0;max-width:34em;text-wrap:pretty}
.sec-d .badge{margin-left:10px}
@media (max-width:760px){.sec-head{padding:64px 0 24px;margin-top:40px}.sec-t,.sec-d{grid-column:1/-1}.sec-t{font-size:44px;line-height:44px}.sec-d{font-size:17px;line-height:26px}}

/* ---------- 1. cold open ---------- */
.hook{min-height:calc(100svh - var(--bar));display:flex;align-items:flex-end;position:relative;overflow:hidden;
  background:radial-gradient(70% 55% at 78% 8%,rgba(242,179,61,.13),transparent 70%)}
.hook-in{width:100%;padding-top:48px;padding-bottom:48px}
.hook-dots{display:flex;align-items:center;gap:16px;margin:0 0 40px;max-width:520px}
.hook-dots .dg{display:grid;grid-template-columns:repeat(10,10px);gap:7px;flex:none}
.hook-dots i{width:10px;height:10px;border-radius:50%;background:var(--red,#c2362b);opacity:.7;animation:dotin .5s both}
.hook-dots i.me{background:var(--gold);opacity:1;box-shadow:0 0 0 3px rgba(242,179,61,.18)}
.hook-dots p{margin:0;font:500 12px/18px var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--bone-3)}
.hook-dots p b{color:var(--bone);font-weight:500}.hook-dots p span{color:var(--gold)}
.hook-dots i:nth-child(1){animation-delay:0.03s}.hook-dots i:nth-child(2){animation-delay:0.06s}.hook-dots i:nth-child(3){animation-delay:0.09s}.hook-dots i:nth-child(4){animation-delay:0.12s}.hook-dots i:nth-child(5){animation-delay:0.15s}.hook-dots i:nth-child(6){animation-delay:0.18s}.hook-dots i:nth-child(7){animation-delay:0.21s}.hook-dots i:nth-child(8){animation-delay:0.24s}.hook-dots i:nth-child(9){animation-delay:0.27s}.hook-dots i:nth-child(10){animation-delay:0.30s}.hook-dots i:nth-child(11){animation-delay:0.33s}.hook-dots i:nth-child(12){animation-delay:0.36s}.hook-dots i:nth-child(13){animation-delay:0.39s}.hook-dots i:nth-child(14){animation-delay:0.42s}.hook-dots i:nth-child(15){animation-delay:0.45s}.hook-dots i:nth-child(16){animation-delay:0.48s}.hook-dots i:nth-child(17){animation-delay:0.51s}.hook-dots i:nth-child(18){animation-delay:0.54s}.hook-dots i:nth-child(19){animation-delay:0.57s}.hook-dots i:nth-child(20){animation-delay:0.60s}.hook-dots i:nth-child(21){animation-delay:0.63s}.hook-dots i:nth-child(22){animation-delay:0.66s}.hook-dots i:nth-child(23){animation-delay:0.69s}.hook-dots i:nth-child(24){animation-delay:0.72s}.hook-dots i:nth-child(25){animation-delay:0.75s}.hook-dots i:nth-child(26){animation-delay:0.78s}.hook-dots i:nth-child(27){animation-delay:0.81s}.hook-dots i:nth-child(28){animation-delay:0.84s}.hook-dots i:nth-child(29){animation-delay:0.87s}.hook-dots i:nth-child(30){animation-delay:0.90s}
@keyframes dotin{from{opacity:0;transform:scale(.3)}}
.hook-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 28px;font:500 12px/16px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.hook-t{margin:0;font:400 clamp(46px,9.6vw,128px)/.98 var(--f-d);letter-spacing:-.022em;max-width:11.5em}
.hook-t span{display:block}
.hook-t em{color:var(--red-text);font-style:italic}
.hook-t .l3{color:var(--bone)}
.hook-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line-2);max-width:900px}
.hook-fig b{font:400 clamp(64px,10vw,132px)/.9 var(--f-d);color:var(--gold);letter-spacing:-.02em}
.hook-fig p{margin:0;font:400 18px/28px var(--f-b);color:var(--bone-2);max-width:20em}
.hook-cta{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.btn-play{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 24px 0 18px;background:var(--gold);color:var(--ink);font:600 14px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:2px;box-shadow:0 0 0 0 rgba(242,179,61,.5);animation:pulse 2.4s 2.2s infinite}
.btn-play i{width:0;height:0;border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent}
.btn-play:hover{background:#ffc75a}
.hook-or{font:500 12px/16px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,179,61,.45)}70%{box-shadow:0 0 0 14px rgba(242,179,61,0)}100%{box-shadow:0 0 0 0 rgba(242,179,61,0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hook-t span,.hook-fig,.hook-cta{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hook-t .l1{animation-delay:.05s}.hook-t .l2{animation-delay:.4s}.hook-t .l3{animation-delay:.75s}.hook-fig{animation-delay:1.05s}.hook-cta{animation-delay:1.25s}
@media (max-width:760px){.hook-in{padding-top:32px;padding-bottom:32px}.hook-t{font-size:min(12.4vw,56px);line-height:1}.hook-fig{margin-top:28px}.hook-fig b{font-size:72px}.hook-fig p{font-size:17px;line-height:24px}.btn-play{flex:1 1 auto;justify-content:center}}

/* ---------- 2. who ---------- */
.who-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:64px 0 28px}
.who-head .sec-t{grid-column:1/6}
.who-head .sec-d{grid-column:6/12;margin:0;align-self:end}
.who .clips{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:12px 0 8px}
.who .clip{grid-column:auto;margin:0;transform:rotate(var(--rot,0deg))}
.who .clip:nth-child(1){--rot:-1deg}.who .clip:nth-child(2){--rot:.8deg}.who .clip:nth-child(3){--rot:-.4deg;background:#f3ecdb}
.who .clip q{font-size:clamp(24px,2.4vw,32px);line-height:1.08}
.who .clip.irony q{color:var(--red-deep)}
.who .clip .ctx{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.who .clip .badge{color:var(--paper-2);border-color:rgba(74,65,55,.45)}
.who .clip-note{font:400 22px/1 var(--f-h);color:var(--red-deep);transform:rotate(-4deg);margin:0}
@media (max-width:760px){
  .who-head{padding:48px 0 20px}.who-head .sec-t,.who-head .sec-d{grid-column:1/-1}.who-head .sec-d{margin-top:12px}
  .who .clips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--gut));padding:16px var(--gut) 20px;scrollbar-width:none}
  .who .clips::-webkit-scrollbar{display:none}
  .who .clip{flex:0 0 78%;scroll-snap-align:start;padding:18px 18px 14px}
  .who .clip q{font-size:26px;line-height:28px}
}

/* ---------- 3. the heist ---------- */
.heist{position:relative;height:auto;margin-top:56px;border-top:1px solid var(--line-2)}
.hx-stage{position:relative;height:calc(100svh - var(--bar) - 8px);min-height:560px;max-height:940px;display:grid;
  grid-template-areas:"top" "board" "cap" "ctl";grid-template-rows:auto 1fr 156px auto;outline:none;
  background:radial-gradient(60% 50% at 60% 18%,rgba(242,179,61,.08),transparent 70%),var(--ink)}
.hx-top{grid-area:top;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px var(--gut) 0;min-height:40px}
.hx-name{margin:0;display:flex;align-items:baseline;gap:8px;font:400 22px/1 var(--f-d);font-style:italic;color:var(--bone)}
.hx-name small{font:500 11px/1 var(--f-m);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--red-text)}
.hx-led-top ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.hx-led-top li{display:flex;gap:8px;align-items:center;font:500 11px/16px var(--f-m);color:var(--bone-2);white-space:nowrap;animation:rise .35s both}
.hx-led-top li:nth-child(n+2){display:none}
.hx-led-top li b{color:var(--gold);font-weight:600}
.hx-led-top li i{display:none}
.hx-board{grid-area:board;position:relative;min-height:0;overflow:hidden;touch-action:pan-y}
.hx-board canvas{position:absolute;inset:0;width:100%;height:100%}
.hx-board .cv-l{pointer-events:none}
.hx-cap{grid-area:cap;padding:12px var(--gut) 0;overflow:hidden;border-top:1px solid var(--line)}
.hx-cap.in .hx-title,.hx-cap.in .hx-body{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.hx-cap.in .hx-body{animation-delay:.08s}
.hx-meta{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font:500 12px/16px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.hx-n{color:var(--gold);font-variant-numeric:tabular-nums}
.hx-meta .badge{margin-left:0}
.hx-title{margin:8px 0 0;font:400 28px/32px var(--f-d);letter-spacing:-.01em;color:var(--bone);text-wrap:balance}
.hx-body{margin:6px 0 0;font:400 16px/24px var(--f-c);color:var(--bone-2);max-width:36em;text-wrap:pretty}
.hx-ledger{display:none}
.hx-ctl{grid-area:ctl;padding:4px var(--gut) max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.hx-track{position:relative;height:36px}
.hx-track input{position:absolute;left:0;right:0;top:12px;width:100%;margin:0;height:12px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--gold) var(--p,0%),rgba(236,229,211,.16) var(--p,0%));height:3px;top:16px;border-radius:2px;cursor:pointer}
.hx-track input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--bone);border:3px solid var(--ink);box-shadow:0 0 0 1px var(--gold)}
.hx-track input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bone);border:3px solid var(--ink)}
.hx-ticks{position:absolute;inset:0;pointer-events:none}
.hx-ticks button{position:absolute;top:0;width:28px;height:36px;margin-left:-14px;background:none;border:0;padding:0;pointer-events:auto;cursor:pointer}
.hx-ticks button::before{content:"";position:absolute;left:50%;top:14px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ink);border:1px solid rgba(236,229,211,.4)}
.hx-ticks button.done::before{background:var(--gold);border-color:var(--gold)}
.hx-ticks button[aria-current="step"]::before{background:var(--bone);border-color:var(--bone);transform:scale(1.25)}
.hx-ticks button span{display:none}
.hx-btns{display:flex;align-items:center;justify-content:center;gap:8px;height:56px}
.hx-b{appearance:none;min-width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--line-2);color:var(--bone);border-radius:2px;cursor:pointer;font:600 13px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:0 12px}
.hx-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hx-b:hover{border-color:var(--bone-3)}
.hx-play{width:56px;height:56px;border-radius:50%;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hx-play svg{fill:currentColor;stroke:none;width:18px;height:18px}
.hx-play .pa{display:none}.hx-play.on .pa{display:block}.hx-play.on .pl{display:none}
.hx-free[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.hx-txt{min-width:56px}
/* payoff */
.hx-payoff{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(88%,420px);padding:22px 22px 18px;background:rgba(11,10,9,.97);border:1px solid rgba(242,179,61,.5);text-align:left;opacity:0;visibility:hidden;transition:opacity .35s,transform .35s,visibility .35s;z-index:3;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.hx-payoff.on{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.hx-payoff b{display:block;font:400 clamp(64px,9vw,104px)/.95 var(--f-d);color:var(--gold);margin:10px 0 6px;letter-spacing:-.02em}
.hx-payoff p{margin:0;font:400 17px/24px var(--f-b);color:var(--bone-2)}
.hx-pay-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hx-pay-cta button,.hx-pay-cta a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;font:600 12px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;border-radius:2px;text-decoration:none;cursor:pointer}
.hx-pay-cta button{background:var(--bone);color:var(--ink);border:0}
.hx-pay-cta a{border:1px solid var(--line-2);color:var(--bone)}
.hx-stage.free .hx-payoff{display:none}
/* dossier in the stage */
.hx-board .dossier{left:12px;right:12px;bottom:12px;width:auto;max-width:360px;transform:none}
.hx-board .dossier .lnk[data-k="illus"]{color:var(--paper-2);font-style:italic}

@media (max-height:720px) and (max-width:760px){
  .hx-stage{grid-template-rows:auto 1fr 136px auto}
  .hx-top{min-height:32px;padding-top:6px}.hx-name{font-size:18px}
  .hx-title{font-size:24px;line-height:28px;margin-top:6px}.hx-body{font-size:15px;line-height:20px}
  .hx-btns{height:52px}.hx-b{height:44px;min-width:44px}.hx-play{width:52px;height:52px}
}
@media (min-width:1024px){

  .hx-stage{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"top cap" "board cap" "board led" "ctl led";grid-template-rows:auto auto 1fr auto;
    padding:0 max(24px,calc((100vw - 1440px)/2))}
  .hx-top{padding:18px 24px 0}
  .hx-name{font-size:28px}
  .hx-led-top{display:none}
  .hx-cap{padding:28px 0 20px 28px;border-top:0;border-left:1px solid var(--line-2)}
  .hx-title{font-size:40px;line-height:44px;margin-top:12px}
  .hx-body{font-size:18px;line-height:28px;margin-top:12px}
  .hx-ledger{grid-area:led;display:flex;flex-direction:column;min-height:0;padding:0 0 20px 28px;border-left:1px solid var(--line-2)}
  .hx-ledger h4{margin:0;padding:16px 0 10px;border-top:1px solid var(--line-2);font:500 12px/16px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3);display:flex;justify-content:space-between}
  .hx-ledger h4 span{color:var(--gold)}
  .hx-ledger ol{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0}
  .hx-ledger li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--line);font:500 12px/16px var(--f-m);color:var(--bone-2);animation:rise .35s both}
  .hx-ledger li b{color:var(--bone);font-weight:600;text-align:right}
  .hx-ledger li i{grid-column:1/-1;font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--gold)}
  .hx-ledger li.b-illus i{color:var(--bone-3)}
  .hx-ledger li:first-child{color:var(--bone)}
  .hx-key{margin:12px 0 0;font:400 13px/20px var(--f-c);color:var(--bone-3)}
  .hx-key i{font:600 10px/1 var(--f-m);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-right:4px}
  .hx-key i[data-k="illus"]{color:var(--bone-2);margin-left:8px}
  .hx-ctl{display:flex;align-items:center;gap:20px;padding:10px 24px 16px;border-top:1px solid var(--line)}
  .hx-ctl .hx-track{flex:1;order:2;height:44px}
  .hx-ctl .hx-track input{top:20px}
  .hx-ticks button{height:44px}
  .hx-ticks button::before{top:18px}
  .hx-ticks button span{display:block;position:absolute;top:30px;left:0;right:0;font:500 10px/1 var(--f-m);color:var(--bone-3);text-align:center}
  .hx-btns{order:1;height:auto}
  .hx-board .dossier{left:auto;right:16px;bottom:16px}
}

/* ---------- 4. receipts ---------- */
.facts{padding-top:0}
.facts .co-facts{margin-top:24px}
.facts .fact b{margin-top:0}
.facts .fact .badge{margin:10px 0 0}
@media (max-width:760px){.facts{padding-top:0}}

/* ---------- lower sections: tighten ---------- */
.tape-sec .flag,.meter .math{font:400 15px/24px var(--f-c);color:var(--bone-3)}
.tape-sec .flag .badge,.meter .math .badge{margin:0 6px 0 0}
.next{margin-top:64px}

@media (prefers-reduced-motion:reduce){
  .hook-dots i,.hook-t span,.hook-fig,.hook-cta,.hx-cap.in .hx-title,.hx-cap.in .hx-body,.hx-led-top li,.hx-ledger li{animation:none}
  .btn-play{animation:none}
  .hx-payoff{transition:none}
}
/* round 1 fixes */
.badge[hidden]{display:none}
.hx-led-top{min-width:0;flex:1;display:flex;justify-content:flex-end}
.hx-led-top ol{min-width:0;max-width:100%}
.hx-led-top li{max-width:100%;overflow:hidden}
.hx-led-top li .path{overflow:hidden;text-overflow:ellipsis;min-width:0}
.hx-name{flex:none}
@media (max-width:760px){.hx-kick{display:none}.hx-ticks{pointer-events:none}.hx-ticks button{pointer-events:none}}
@media (min-width:1024px){.hx-ticks button{width:44px;margin-left:-22px}
  .hx-payoff{left:24px;top:auto;bottom:24px;transform:translateY(10px);width:min(70%,460px)}
  .hx-payoff.on{transform:none}}
@media (max-width:1023px){.hx-payoff{top:auto;bottom:12px;left:12px;right:12px;width:auto;transform:translateY(10px)}.hx-payoff.on{transform:none}}
@media (max-height:720px) and (max-width:760px){.hx-stage{grid-template-areas:"board" "cap" "ctl";grid-template-rows:1fr 128px auto}.hx-top{display:none}.hx-body{-webkit-line-clamp:3}}
@media (max-width:760px){.hook-dots{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:32px}.hook-dots .dg{grid-template-columns:repeat(15,12px);gap:8px}.hook-dots i{width:12px;height:12px}}

/* v2: chapter starts vs. sub-parts */
.sec-head.sub{border-top:0;margin-top:0;padding-top:72px}
.facts .sec-head{padding-bottom:24px}
.heist .wrap .ch-next{margin-top:var(--s5)}
.hx-name small{white-space:nowrap}
@media (max-width:760px){.sec-head.sub{padding-top:48px}.sec-head.ch-start{margin-top:24px;padding-top:48px}}
/* v2 after-review fixes */
.tape-sec .flag{text-transform:none;letter-spacing:0}
.hx-name small{color:var(--gold)}
@supports not (height:100svh){.hx-stage{height:calc(100vh - var(--bar) - 8px)}}