/* Model: claude-fable-5-1 (K392 357 engine page) · Sat 2026-10-03 00:50 IDT (from `date`)
   Model: claude-fable-5-1 (K393 364 engine page pre-deploy) · Sat 2026-10-03 11:53 IDT (from `date`): the hero plays the ad uncovered
   TWO HALVES · the engine's page (/he/engine/, /engine/). Loads after th2.css and uses only its tokens:
   paper, ink, one accent, the mono label, the night band for media, the drafting band for sheets.
   New here: the hero's two-column layout on wide screens (the 9:16 ad in a phone-sized box beside the words),
   the input card, the pack list, the figures with the viewer, the inline video box. */

/* ---------- the hero: the ad plays uncovered in the stage; on a phone the headline and the button sit under it
   (the ad's own lower third carries its counters, its table and the real screen), on a wide screen beside it.
   The clip shows only once it plays; with no source set (no script, reduced motion, Save-Data) the poster stays:
   a frame of the ad that is true when frozen. ---------- */
.hero.eng .split{position:relative}
.hero.eng .stage{aspect-ratio:9/16;max-height:calc(100svh - var(--nav) - 176px);min-height:380px}
.hero.eng .stage img,.hero.eng .stage video{object-position:50% 44%}
.hero.eng .stage video{opacity:0;transition:opacity .25s ease}
.hero.eng .stage video.on{opacity:1}
.hero.eng .stage video:not([src]){display:none}
.hero.eng .stage::after{background:linear-gradient(to bottom,rgba(10,10,9,.5) 0%,rgba(10,10,9,0) 9%)}
.hero.eng .tag .mono{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero.eng .over{position:static;padding:14px calc(var(--edge) + var(--gut)) 16px;display:grid;gap:12px}
.hero.eng .over .kick{display:none;color:rgba(255,255,255,.82)}
.hero.eng h1,html[lang=he] .hero.eng h1{font-size:clamp(27px,5.6vw,70px);max-width:none}
.hero.eng .over .lede{display:none}
.hero.eng .over .btn.lite{display:none}
.hero.eng .lede2{display:block;padding-top:2px}
.hero.eng .ctl{display:flex;padding-top:0;border-top:0}
.hero.eng .ctl .link{color:#FF8A64}
.hero.eng .note{padding:14px calc(var(--edge) + var(--gut)) 18px;color:rgba(237,235,228,.72);font-size:13px;line-height:1.5;border-top:1px solid var(--night-rule)}
.hero.eng .acts .btn.lite{color:#fff;border-color:rgba(255,255,255,.7)}
@media(min-width:900px){
  .hero.eng .split{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
  .hero.eng .stage{height:min(820px,calc(100svh - var(--nav) - 56px));max-height:none;min-height:520px;width:auto;aspect-ratio:9/16;margin:28px calc(var(--edge) + var(--gut)) 28px 0}
  html[dir=rtl] .hero.eng .stage{margin:28px 0 28px calc(var(--edge) + var(--gut))}
  .hero.eng .over{position:static;align-content:center;gap:18px;padding:48px calc(var(--edge) + var(--gut))}
  .hero.eng .over .kick{display:block}
  .hero.eng .over .lede{display:block;max-width:54ch}
  .hero.eng .over .btn.lite{display:inline-flex}
  .hero.eng h1{max-width:20ch}
  html[lang=he] .hero.eng h1{max-width:22ch}
  .hero.eng .lede2{display:none}
  .hero.eng .ctl{display:none}
}

/* ---------- the input card: our sample's real numbers ---------- */
.incard{margin-top:26px;border:1px solid var(--ink);background:#fff;padding:16px 18px 18px;max-width:760px}
.incard .lab{display:flex;justify-content:space-between;gap:10px 16px;align-items:baseline;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.incard dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 18px;margin:0;font-size:15px;line-height:1.45}
html[lang=he] .incard dl{font-size:16px}
.incard dt{color:var(--ink-2)}
.incard dd{margin:0;color:var(--ink);font-weight:600}
.incard .src{margin-top:12px;font-size:13px;color:var(--grey)}
@media(max-width:420px){.incard dl{grid-template-columns:minmax(0,1fr)}.incard dt{margin-top:4px}}

/* ---------- what comes back: the sheets and the pack ---------- */
.back2{display:grid;gap:26px;margin-top:8px}
@media(min-width:900px){.back2{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}}
.pack{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--ink)}
.pack li{display:grid;gap:3px;padding:12px 0;border-bottom:1px solid var(--rule)}
.pack b{font-family:var(--hd);font-weight:600;font-size:16px;letter-spacing:-.01em;text-transform:uppercase}
html[lang=he] .pack b{text-transform:none;letter-spacing:0;font-size:17px}
.pack span{font-size:14.5px;color:var(--ink-2);line-height:1.5}
html[lang=he] .pack span{font-size:15.5px}
.pack .sum{padding:12px 0 0;border-bottom:0;color:var(--ink)}
.pack .sum .mono{color:var(--acc)}

/* ---------- figures (a sheet or a picture that opens full size) ---------- */
.fig{margin:0;background:#fff;border:1px solid var(--rule)}
.fig button{display:block;width:100%;border:0;padding:0;background:#fff;cursor:zoom-in;color:inherit;text-align:inherit}
.fig .pic{position:relative;overflow:hidden;background:#fff}
.fig img{width:100%;height:auto}
.fig figcaption{display:flex;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink);line-height:1.45}
html[lang=he] .fig figcaption{font-size:14.5px}
.fig figcaption .mono{flex:none;align-self:center}
.night .fig{background:#0d0c0b;border-color:var(--night-rule)}
.night .fig button{background:#0d0c0b}
.night .fig .pic{background:#0d0c0b}
.night .fig figcaption{color:var(--on-night-2);border-top-color:var(--night-rule)}
.figs2{display:grid;gap:18px;margin-top:22px}
@media(min-width:900px){.figs2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}}

/* ---------- the dark bands: the proof list and the honest box on night ---------- */
.night .proof{border-top-color:var(--night-rule)}
.night .proof li{color:var(--on-night);border-bottom-color:var(--night-rule)}
.night .honest{border-color:rgba(237,235,228,.6);background:transparent}
.night .honest p{color:var(--on-night)}
.night .head2 .tx{color:var(--on-night-2)}
.night h2,.night h3{color:var(--on-night)}
/* the gate's catch (02:04): the step cells on the night band inherited the paper ink (1.16:1) */
.night .moves{border-top-color:var(--night-rule)}
.night .mv{border-color:var(--night-rule)}
.night .mv h3{color:var(--on-night)}
.night .mv p{color:var(--on-night-2)}
.night .mv .n{color:#FF8A64}

/* ---------- the inline video (the real screen) ---------- */
.vid{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid var(--night-rule)}
.vid video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.vidcap{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:10px 2px 0;font-size:13.5px;color:var(--on-night-2)}
html[lang=he] .vidcap{font-size:14.5px}

/* ---------- small things ---------- */
.steps .mv .n{text-transform:uppercase;letter-spacing:.04em}
html[lang=he] .steps .mv .n{font-family:var(--tx);font-size:13px;letter-spacing:0;font-weight:600;text-transform:none}
.sec .pad{height:44px}
.rulesnote{margin:-14px 0 26px;font-size:13.5px;color:var(--grey)}
.lead-in{margin:0 0 18px}

/* K393 seat (Benda's word, Sat 3 Oct 15:1x: «the text is very tight… overlaying one on top of the other»): nothing of the page sits on the ad.
   The tag is a bar above the hero; the stage shows the WHOLE 9:16 frame (contain, on the ad's own navy) with no shade over its top. */
.hero.eng > .tag.out{position:static;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px calc(var(--edge) + var(--gut)) 10px;border-bottom:1px solid var(--night-rule)}
.hero.eng > .tag.out .mono{text-shadow:none}
.hero.eng .stage{background:#11141a}
.hero.eng .stage::after{display:none}
.hero.eng .stage img,.hero.eng .stage video{object-fit:contain;object-position:50% 50%}