/* Guinness World Record story page. Page styles only; shared system in sim.css, effects in fx.css. */

/* ---- hero: the certificate in the viewfinder ---- */
.gw-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,80px)}
.gw-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 62% at 74% 46%,rgba(200,169,81,.2),transparent 70%),linear-gradient(180deg,var(--blackout) 0,var(--navy-dark) 48%,var(--blackout) 100%)}
html.js:not(.motion-off) .gw-light{animation:gw-lights var(--t-scene) var(--e-out) backwards}
@keyframes gw-lights{from{opacity:.25}}
.gw-hero-grid{display:grid;gap:48px 64px;align-items:center}
.gw-slate{color:var(--mist)}
.gw-hero h1{font-size:var(--fs-hero);max-width:14em;margin-top:18px;text-wrap:balance}
.gw-hero .lead{margin-top:24px;max-width:34em;text-wrap:pretty}
.gw-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.gw-official{margin-top:22px;max-width:34em;color:var(--mist)}
.gw-cert{position:relative;margin:0 0 0 auto;width:min(100%,480px)}
.gw-cert-frame{aspect-ratio:600/505;background:var(--navy)}
.gw-cert-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 49%}
.gw-cert .l3{position:absolute;left:-14px;bottom:-26px;z-index:3}
@media (min-width:1000px){.gw-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
@media (max-width:999px){.gw-cert{margin-inline:12px auto;width:min(calc(100% - 24px),520px)}.gw-cert .l3{left:-12px}}

/* ---- two numbers: a labelled scale and a ledger ---- */
.gw-numbers .sec-head h2{max-width:16em;text-wrap:balance}
.gw-scale{margin:0 0 clamp(48px,6vw,72px);overflow-x:clip}
.gw-scale-track{position:relative;height:14px;margin-block:84px 84px;background:var(--rule);--x:calc(100% / 120)}
.gw-scale-track::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--x) * 96);background:var(--gold)}
.gw-scale-track::after{content:"";position:absolute;inset:0 auto 0 calc(var(--x) * 96);width:calc(var(--x) * 16);background:repeating-linear-gradient(135deg,var(--navy-dark) 0 3px,transparent 3px 7px)}
.gw-scale-fill{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 50%,transparent);transform:translateX(-100%);opacity:0}
.gw-mark{position:absolute;left:calc(var(--x) * var(--at));top:-18px;bottom:-18px;width:0;border-right:2px solid var(--ink);z-index:2}
.gw-mark b,.gw-mark small{position:absolute;right:10px;white-space:nowrap;text-align:right}
.gw-mark b{font:400 clamp(1.6rem,2.6vw,2.3rem)/1 var(--serif);color:var(--ink)}
.gw-mark small{font:600 var(--fs-label)/1.2 var(--sans);color:var(--slate)}
.gw-mark--cert{top:-58px;bottom:0;border-color:var(--gold-ink)}
.gw-mark--cert b{top:0;color:var(--gold-ink)}
.gw-mark--cert small{top:calc(clamp(1.6rem,2.6vw,2.3rem) + 4px);color:var(--gold-ink)}
.gw-mark--prev,.gw-mark--done{top:0;bottom:-58px}
.gw-mark--prev b,.gw-mark--done b{bottom:18px}
.gw-mark--prev small,.gw-mark--done small{bottom:0}
.gw-mark--prev{border-color:var(--slate)}
.gw-mark--prev b{color:var(--slate)}
.gw-scale figcaption{max-width:62ch;color:var(--slate)}
html.js:not(.motion-off) .gw-scale.is-in .gw-scale-fill{animation:gw-sheen 1.4s var(--e-inout) .2s}
@keyframes gw-sheen{0%{opacity:0;transform:translateX(-100%)}20%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
.gw-ledger{display:grid;gap:36px 48px}
.gw-entry{border-top:2px solid var(--ink);padding-top:20px}
.gw-entry:nth-child(2){border-color:var(--gold)}
.gw-entry--why{border-color:var(--rule)}
.gw-entry h3{font-size:var(--fs-m);margin:10px 0 14px}
.gw-entry p:last-child{max-width:40em}
@media (min-width:900px){.gw-ledger{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- the rundown ---- */
.gw-run{--hdr:62px}
.gw-clock{display:none;position:sticky;top:var(--hdr);box-shadow:0 -14px 0 var(--blackout);z-index:5;margin-bottom:8px;padding:16px 0 14px;background:var(--blackout);border-bottom:1px solid var(--navy-line)}
.gw-run.gw-live .gw-clock{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:6px 28px;align-items:center}
.gw-clock-read{grid-row:span 2;display:flex;align-items:baseline;gap:10px;font:500 var(--fs-label)/1 var(--sans);color:var(--mist)}
.gw-clock-k{color:#8ea0bd}
.gw-tc{font-size:clamp(1.4rem,2.2vw,1.9rem);color:var(--gold-bright);min-width:4.2ch}
.gw-clock-bar{position:relative;height:6px;background:repeating-linear-gradient(90deg,var(--navy-line) 0 1px,transparent 1px calc(100% / 24)),var(--navy);box-shadow:inset 0 0 0 1px var(--navy-line)}
.gw-clock-bar::before{content:"";position:absolute;inset:0;background:var(--gold);opacity:.55;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.gw-clock-head{position:absolute;left:-1px;top:-6px;width:2px;height:18px;background:var(--gold-bright)}
.gw-clock-ends{display:flex;justify-content:space-between;font:500 var(--fs-label)/1 var(--sans);font-variant-numeric:tabular-nums;color:#8ea0bd}
.gw-note{display:none;margin-top:22px;max-width:62ch;color:var(--mist)}
.gw-run.gw-live .gw-note{display:block}
.gw-rows{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--navy-line)}
.gw-row{position:relative;display:grid;gap:8px 32px;padding:26px 0 28px;border-top:1px solid var(--navy-line)}
.gw-row::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-slow) var(--e-out)}
.gw-row.is-live::before{transform:none}
.gw-cue{font:600 var(--fs-label)/1.3 var(--sans);letter-spacing:.04em;color:var(--gold);padding-top:.35em}
.gw-body h3{font-size:clamp(1.35rem,2vw,1.75rem);color:var(--white)}
.gw-body p{margin-top:10px;max-width:60ch;color:var(--mist)}
.gw-state{display:inline-flex;align-items:center;gap:8px;align-self:start;justify-self:start;padding:6px 10px;border:1px solid var(--navy-line);border-radius:2px;font:600 var(--fs-label)/1 var(--sans);color:var(--mist)}
.gw-state--gold{border-color:rgba(200,169,81,.55);color:var(--gold-bright)}
.gw-run.gw-live .gw-state .tally{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.gw-run.gw-live .gw-row.is-live .gw-state .tally{background:var(--tally);box-shadow:0 0 0 3px rgba(224,57,43,.25)}
.gw-run.gw-live .gw-row.is-live .gw-state{border-color:var(--gold)}
@media (min-width:760px){
  .gw-row{grid-template-columns:150px minmax(0,1fr) 120px;padding:30px 0 32px}
  .gw-state{justify-self:end}
}
@media (min-width:1000px){.gw-run{--hdr:62px}.gw-row{grid-template-columns:190px minmax(0,1fr) 140px}}
@media (max-width:759px){.gw-row{grid-template-columns:minmax(0,1fr) auto}.gw-cue{grid-column:1}.gw-state{grid-column:2;grid-row:1}.gw-body{grid-column:1 / -1}
  .gw-run.gw-live .gw-clock{grid-template-columns:1fr;gap:10px}.gw-clock-read{grid-row:auto}}

/* ---- the board ---- */
.gw-board{background:radial-gradient(60% 80% at 80% 50%,rgba(200,169,81,.08),transparent 70%),var(--navy-dark)}
.gw-board-grid{display:grid;gap:48px 72px;align-items:center}
.gw-board h2{max-width:12em}
.gw-quote{margin-top:32px}
.gw-quote .quote{color:var(--white);max-width:22em}
.gw-quote .gw-quote-by{margin-top:20px}
.gw-flaps{display:grid;gap:14px;margin:0;padding:clamp(18px,2.4vw,28px);background:var(--blackout);border:1px solid var(--navy-line);border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.gw-flaps>div{display:grid;gap:8px;padding:14px 0;border-bottom:1px solid var(--navy-line)}
.gw-flaps>div:last-child{border-bottom:0}
.gw-flap{font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1}
.gw-flap>span{font:600 1em/1.1 var(--sans);text-transform:uppercase;color:var(--gold-bright);letter-spacing:.04em}
.gw-flap>.fx-flap{letter-spacing:0}
.gw-flaps dd{margin:0;font-size:var(--fs-small);color:var(--mist)}
@media (min-width:1000px){.gw-board-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---- the lesson ---- */
.gw-lesson .sec-head h2{max-width:15em;text-wrap:balance}
.gw-lessons{display:grid;gap:0 56px;margin:0;padding:0;list-style:none}
.gw-lessons li{padding:24px 0 28px;border-top:1px solid var(--rule)}
.gw-lesson-line{margin-top:10px;font:400 clamp(1.2rem,1.7vw,1.45rem)/1.32 var(--serif);color:var(--ink);max-width:28em;text-wrap:pretty}
@media (min-width:900px){.gw-lessons{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gw-offer{display:grid;gap:24px 48px;align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3.4vw,40px);background:var(--white);border-top:3px solid var(--ink);border-radius:2px}
.gw-offer h3{font-size:var(--fs-m)}
.gw-offer p{margin-top:12px;max-width:52ch}
.gw-offer-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){.gw-offer{grid-template-columns:minmax(0,1fr) auto}}

/* ---- questions and closing ---- */
.gw-faq-grid{display:grid;gap:32px 64px}
.gw-faq h2{max-width:12em}
@media (min-width:1000px){.gw-faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* ---- the record on film: poster first, the player loads only after a click ---- */
.gw-film-grid{display:grid;gap:32px clamp(32px,6vw,88px);align-items:center}
.gw-film-copy>*+*{margin-top:1rem}
.gw-film-copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);text-wrap:balance}
.gw-film-fig{margin:0}
.gw-poster-frame{margin:13px}
.gw-poster{aspect-ratio:16/9;border-radius:0}
.gw-film-fig figcaption{margin:18px 0 0 13px;color:var(--mist)}
@media (min-width:960px){.gw-film-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.gw-clips{margin-top:clamp(48px,6vw,80px)}
.gw-clips-h{font-size:clamp(1.5rem,2.3vw,2rem);margin-bottom:12px}
.gw-clip-list{list-style:none;margin:0;padding:0;display:grid;gap:36px 28px}
.gw-clip h4{font:400 clamp(1.15rem,1.5vw,1.35rem)/1.25 var(--serif);color:var(--white);margin:6px 0 0}
.gw-clip .gw-poster-frame{margin:16px 13px 18px}
.gw-clip .small{color:var(--mist);max-width:34ch;margin:0}
.gw-clip .video-play{width:60px;height:60px;margin:-30px 0 0 -30px}
@media (min-width:760px){.gw-clip-list{grid-template-columns:repeat(3,minmax(0,1fr))}}