@font-face{font-family:PJS;src:url(fonts/pjs.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:MONO;src:url(fonts/mono.woff2) format('woff2');font-display:swap}
:root{
  --pink:#e12991;--pinkl:#ff5fb8;--ink:#05040f;--scrim:rgba(9,6,20,.9);
  --legal:#ff5fb8;--tech:#5fe0ff;--event:#ffd36e;--research:#c3a8ff;--media:#ffffff;
  --bar:84px;--pad:clamp(14px,2.2vw,40px);
  --micro:#c9c1d8;--micro-size:clamp(12px,.72vw,14px);--hz:70px;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html,body{height:100%;background:var(--ink);color:#fff;overflow:hidden;overscroll-behavior:none}
body{font-family:PJS,'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--pinkl);outline-offset:3px}
#sky,#world{position:fixed;inset:0;width:100%;height:100%;display:block}
#sky{pointer-events:none}
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.075;mix-blend-mode:screen;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-1%,3%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

/* ── header ── */
.top{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;gap:18px;padding:calc(var(--pad)*.8) var(--pad) calc(var(--pad)*1.4);z-index:5;pointer-events:none;background:linear-gradient(rgba(5,4,15,.96),rgba(5,4,15,.9) 55%,rgba(5,4,15,0))}
.top>*{pointer-events:auto}
.logo svg{height:clamp(26px,3.2vw,44px);width:auto;display:block}
.logo .lh{fill:var(--pink)}.logo .lw{fill:#fff}
.title-chip{font-family:MONO;font-size:clamp(12px,.9vw,16px);letter-spacing:.18em;text-transform:uppercase;color:#fff;padding-left:18px;border-left:1px solid rgba(255,255,255,.3);line-height:1.3}
.title-chip span{color:var(--pinkl);font-weight:700}
.tools{margin-left:auto;display:flex;gap:8px}
.tool{display:inline-flex;align-items:center;gap:8px;height:40px;min-width:40px;justify-content:center;padding:0 13px;border:1px solid rgba(201,193,216,.4);background:rgba(9,6,20,.6);font-family:MONO;font-size:var(--micro-size);letter-spacing:.14em;text-transform:uppercase;color:var(--micro);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tool:hover{border-color:var(--pinkl);color:#fff}
.tool .lbl{color:var(--micro)}.tool:hover .lbl,.tool[aria-pressed=true] .lbl{color:#fff}.tool[aria-pressed=true]{color:#fff}
.tool[aria-pressed=true]{background:var(--pink);border-color:var(--pink)}
.tool .ico{display:inline-flex}
.i{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
.nav .i{width:20px;height:20px}
.btn .i{width:17px;height:17px}
.ico-pause{display:none!important}.tool[aria-pressed=true] .ico-play{display:none!important}.tool[aria-pressed=true] .ico-pause{display:inline-flex!important}
.dot{margin-left:-.07em}
.card h2.hang{text-indent:-.4em}

/* ── buttons (HRF: square) ── */
.btn{font-weight:700;font-size:15px;padding:14px 22px;border:1px solid;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;line-height:1;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.btn-lg{padding:18px 30px;font-size:17px}
.btn-pink-filled{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 32px rgba(225,41,145,.45)}
.btn-pink-filled:hover{background:#f0359f;box-shadow:0 0 48px rgba(255,95,184,.7)}
.btn-white{border-color:rgba(255,255,255,.75);color:#fff;background:rgba(9,6,20,.55)}
.btn-white:hover{background:#fff;color:#12081a}

/* ── intro / finale ── */
.intro,.finale{position:fixed;z-index:4;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s,transform .9s ease;transform:translateY(16px)}
.intro{left:clamp(24px,7vw,150px);top:24%;transform:translateY(16px);width:min(820px,45vw)}
body[data-state=intro] .intro{opacity:1;visibility:visible;transition:opacity 1.1s ease .2s,transform 1.1s ease .2s;transform:none}
.eyebrow{font-family:MONO;font-size:clamp(12px,1vw,17px);letter-spacing:.24em;text-transform:uppercase;color:#ffc2e2;margin-bottom:22px}
.eyebrow span{display:inline-block}
.intro h1{font-weight:800;font-size:clamp(44px,5.9vw,116px);line-height:.96;letter-spacing:-.035em;text-shadow:0 0 40px rgba(225,41,145,.35)}
.intro h1 .yr{color:var(--pinkl)}
.lede{font-weight:500;font-size:clamp(17px,1.35vw,25px);line-height:1.45;color:#f6eef3;margin:22px 0 30px;max-width:34em}
.intro .lede{margin:clamp(24px,3.6vh,44px) 0 clamp(28px,4.4vh,52px);max-width:31em}
.intro .hint{margin-top:clamp(22px,3.4vh,40px)}
body[data-state=intro] .title-chip{opacity:0}
.title-chip{transition:opacity .6s}
body[data-state=intro] .nav.next{background:rgba(20,12,34,.92);border-color:var(--pinkl);box-shadow:none}
.hint{margin-top:24px;font-family:MONO;font-size:var(--micro-size);letter-spacing:.12em;color:var(--micro);text-transform:uppercase;transition:opacity .4s}
.hint .k{display:inline-block;border:1px solid rgba(201,193,216,.6);padding:2px 7px;margin-right:6px;color:#fff}
.hint b{color:#fff}

.finale{right:var(--pad);top:50%;width:min(620px,38vw);padding:clamp(24px,2.4vw,44px);background:var(--scrim);border-left:4px solid var(--pink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateY(-46%)}
body[data-state=finale].fin-ready .finale{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity 1.2s ease,transform 1.2s ease}
.finale h2{font-weight:800;font-size:clamp(34px,3.6vw,68px);line-height:1.02;letter-spacing:-.025em}
.finale .lede{margin:18px 0 20px;font-size:clamp(16px,1.15vw,20px)}
.legend{list-style:none;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 24px;margin-bottom:26px;font-family:MONO;font-size:clamp(12.5px,.8vw,15.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--micro)}
.legend li{display:flex;align-items:center;gap:8px}
.legend span{color:var(--micro)}
.legend b{font-weight:700;color:#fff}
.row{display:flex;flex-wrap:wrap;gap:10px}

/* ── type shapes ── */
.shape{display:inline-block;width:11px;height:11px;background:currentColor;flex:none}
.t-legal{color:var(--legal)}.t-legal .shape,.shape.t-legal{transform:rotate(45deg) scale(.86)}
.t-tech{color:var(--tech)}
.t-event{color:var(--event)}.t-event .shape,.shape.t-event{border-radius:50%}
.t-research{color:var(--research)}.t-research .shape,.shape.t-research{clip-path:polygon(50% 0,100% 100%,0 100%)}
.t-media{color:var(--media)}.t-media .shape,.shape.t-media{clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* ── card ── */
.card{position:fixed;z-index:3;right:var(--pad);top:calc(50% - var(--bar)/2 + 24px);width:min(740px,40vw);max-height:calc(100% - var(--bar) - 130px);display:flex;flex-direction:column;background:var(--scrim);border:1px solid rgba(255,255,255,.12);border-top:4px solid var(--c,var(--pink));box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 60px rgba(225,41,145,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translate(24px,-50%);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s;overflow:hidden}
.card.show{opacity:1;visibility:visible;transform:translate(0,-50%);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.card .media{position:relative;flex:0 1 auto;aspect-ratio:16/9;max-height:40vh;min-height:0;overflow:hidden;background:#140a1c}
.card .media #cImg{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s}
.card .media #cImg.ok{opacity:1}
.card .media::after{content:'';position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(9,6,20,.85));pointer-events:none}
.card.nophoto .media{aspect-ratio:auto;height:auto}
.card.nophoto .media #cImg{display:none}
.card.nophoto .media::after{display:none}
.mast{display:none}
.card.pressphoto .mast{display:flex;align-items:flex-end;gap:12px;position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 clamp(22px,2.4vw,40px) 14px}
.card.pressphoto .mast .q{font-size:clamp(40px,3.6vw,70px);height:.42em}
.card.pressphoto .mast .o{margin:0;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.card.nophoto .mast{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2vw,32px) clamp(22px,2.4vw,40px) 6px;min-height:clamp(84px,11vh,150px);background:radial-gradient(120% 140% at 0% 0%,rgba(225,41,145,.38),rgba(225,41,145,0) 60%),linear-gradient(135deg,#1a0c24,#0d0716)}
.mast .q{font-weight:800;font-size:clamp(48px,5vw,96px);line-height:.6;color:var(--pinkl);height:.45em;text-shadow:0 0 30px rgba(255,95,184,.6)}
.mast .o{font-family:MONO;font-weight:700;font-size:clamp(14px,1.15vw,20px);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-top:12px;line-height:1.35;padding-bottom:4px}
.mast .o span{display:inline-block;white-space:nowrap}
.mast .o .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mast .o.haslogo{--lh:clamp(22px,1.9vw,34px);line-height:0;padding-bottom:2px}
.mast .o .logo{display:block;height:var(--lh);width:auto;max-width:min(100%,420px);filter:drop-shadow(0 1px 10px rgba(0,0,0,.55))}
.mast .o .l-guardian{height:calc(var(--lh)*1.7)}
.mast .o .l-bbc-world-service{height:calc(var(--lh)*1.75)}
.mast .o .l-npr{height:calc(var(--lh)*1.1)}
.mast .o .l-forbes{height:calc(var(--lh)*1.2)}
.mast .o .l-reuters{height:calc(var(--lh)*1.4)}
.mast .o .l-wsj{height:calc(var(--lh)*.7)}
.mast .o .l-jod{height:calc(var(--lh)*1.25)}
.mast .stat{font-weight:800;font-size:clamp(28px,3vw,54px);line-height:1;letter-spacing:-.02em;color:#fff}
.mast .stat em{font-style:normal;color:var(--pinkl)}
.card .body{padding:clamp(18px,1.7vw,32px) clamp(22px,2.4vw,40px) clamp(22px,2vw,36px);flex:0 0 auto}
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-family:MONO;font-size:clamp(11.5px,.75vw,14px);letter-spacing:.16em;text-transform:uppercase}
.badge{display:inline-flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid currentColor;background:rgba(255,255,255,.04)}
.badge b{color:#fff;font-weight:700}
.upc{display:none;padding:6px 10px;background:#fff;color:#12081a;font-weight:700}
.card.upcoming .upc{display:inline-block}
.count{margin-left:auto;color:var(--micro)}
.kicker{font-family:MONO;font-weight:700;font-size:clamp(12px,.95vw,17px);letter-spacing:.2em;color:#ffc2e2;margin-bottom:10px}
.card h2{font-weight:800;font-size:clamp(28px,2.55vw,50px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.card .sub{font-weight:500;font-size:clamp(16px,1.15vw,21px);line-height:1.45;color:#f7f0f4;margin-top:14px;text-wrap:pretty}
.read{display:none;margin-top:16px;font-family:MONO;font-size:clamp(12px,.72vw,14px);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1px solid var(--pinkl);padding-bottom:3px}
.read.on{display:inline-block}
.read:hover{color:var(--pinkl)}

/* ── tooltip ── */
.tip{position:fixed;z-index:6;pointer-events:none;max-width:320px;padding:10px 12px;background:rgba(9,6,20,.95);border:1px solid rgba(255,255,255,.2);border-left:3px solid var(--pink);font-size:14px;line-height:1.35;opacity:0;transform:translate(-50%,calc(-100% - 18px));transition:opacity .15s}
.tip.on{opacity:1}
.tip small{display:block;font-family:MONO;font-size:12px;letter-spacing:.14em;color:#ffc2e2;margin-bottom:4px}

/* ── bottom bar ── */
.bar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);z-index:5;display:flex;align-items:center;gap:clamp(10px,1.5vw,28px);padding:0 var(--pad) env(safe-area-inset-bottom);background:linear-gradient(rgba(5,4,15,0),rgba(5,4,15,.93) 32%)}
.nav{height:52px;min-width:52px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:28px;line-height:1;border:1.5px solid rgba(255,255,255,.72);background:rgba(20,12,34,.92);color:#fff;transition:background .2s,border-color .2s,opacity .2s,color .2s}
.nav .lbl{font-family:MONO;font-size:clamp(12.5px,.75vw,14.5px);letter-spacing:.18em;text-transform:uppercase}
.nav.next{background:var(--pink);border-color:var(--pink);box-shadow:0 0 28px rgba(225,41,145,.4)}
.nav.next:hover{background:#f0359f}
.nav.prev:hover{border-color:#fff;background:rgba(225,41,145,.22)}
.nav:disabled{opacity:1;cursor:not-allowed;color:#aaa1bd;background:rgba(9,6,20,.55)!important;border:1.5px solid rgba(201,193,216,.38)!important;box-shadow:none!important}
.nav:disabled .i{display:none}
@media (max-width:899px),(max-aspect-ratio:1/1){.nav:disabled .i{display:inline-block;opacity:.6}}
.ticker{position:relative;flex:1;height:56px}
.track{position:absolute;left:0;right:0;top:20px;height:2px;background:rgba(255,255,255,.22)}
.fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pinkl);box-shadow:0 0 12px var(--pinkl);transition:width .9s cubic-bezier(.4,0,.2,1)}
.ticks{position:absolute;left:0;right:0;top:0;height:40px}
.tick{position:absolute;top:10px;z-index:1;width:22px;height:22px;margin-left:-11px;display:flex;align-items:center;justify-content:center}
.tick .shape{width:9px;height:9px;opacity:.6;transition:transform .2s,opacity .2s;box-shadow:0 0 0 rgba(0,0,0,0)}
.tick.seen .shape{opacity:1}
.tick.cur .shape{transform:scale(1.8);opacity:1;filter:drop-shadow(0 0 6px currentColor)}
.tick.t-legal.cur .shape{transform:rotate(45deg) scale(1.6)}
.tick:hover .shape{opacity:1;transform:scale(1.5)}
.tick.t-legal:hover .shape{transform:rotate(45deg) scale(1.4)}
.months{position:absolute;left:0;right:0;top:36px;display:flex;font-family:MONO;font-size:var(--micro-size);letter-spacing:.14em;color:var(--micro)}
.months span{flex:1;text-align:left;padding-left:5px;border-left:1px solid rgba(201,193,216,.28);height:18px;line-height:20px}
.months span.cur{color:#fff;font-weight:700}
.months .s{display:none}

/* ── list ── */
.list{position:fixed;inset:0;z-index:8;background:rgba(5,4,15,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;justify-content:center;padding:clamp(12px,4vh,60px) var(--pad);touch-action:pan-y}
.list[hidden]{display:none}
.list-in{width:min(1200px,100%);display:flex;flex-direction:column;min-height:0}
.list-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.list-top h2{font-weight:800;font-size:clamp(22px,2vw,34px)}
.list ol{list-style:none;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px;padding-bottom:20px;user-select:text}
.list li button{width:100%;text-align:left;padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-left:3px solid currentColor;background:rgba(20,12,30,.8);display:block;height:100%}
.list li button:hover{background:rgba(225,41,145,.2)}
.list li small{display:flex;align-items:center;gap:8px;font-family:MONO;font-size:12px;letter-spacing:.14em;color:#ffc2e2;margin-bottom:6px}
.list li span{display:block;color:#fff;font-weight:700;font-size:16px;line-height:1.3}
.nojs{position:fixed;inset:0;display:grid;place-items:center;font-size:20px}

/* ── phones / portrait ── */
@media (max-width:899px),(max-aspect-ratio:1/1){
  :root{--bar:74px}
  .top{gap:10px}
  .title-chip{display:none}
  .tool .lbl{display:none}
  .tool{height:38px;padding:0 10px}
  .intro{left:var(--pad);right:var(--pad);top:auto!important;bottom:calc(var(--bar) + 28px);width:auto;transform:translateY(16px)}
  .hint{display:none}
  body[data-state=intro] .intro{transform:none}
  .intro h1{font-size:clamp(40px,12vw,72px)}
  .lede{margin:14px 0 20px}
  .card{left:10px;right:10px;width:auto;top:auto;bottom:calc(var(--bar) + 6px);max-height:calc(100% - var(--bar) - 38vh);transform:translateY(24px)}
  .card.show{transform:none}
  .card .media{max-height:23vh;aspect-ratio:16/9}
  .card.nophoto .media{max-height:none}
  .card.nophoto .mast{min-height:0;padding:14px 18px 0}
  .mast .q{font-size:54px}
  .mast .o{font-size:13px;margin-top:8px}
  .mast .stat{font-size:26px}
  .card .body{padding:14px 18px 18px}
  .meta{margin-bottom:10px;gap:8px;font-size:11px}
  .badge,.upc{padding:4px 8px}
  .kicker{font-size:11.5px;letter-spacing:.16em;margin-bottom:6px}
  .card h2{font-size:clamp(21px,6vw,30px)}
  .card .sub{font-size:clamp(14.5px,3.9vw,17px);margin-top:8px;line-height:1.4}
  .read{margin-top:10px;font-size:11.5px}
  .finale{left:10px;right:10px;width:auto;top:auto;bottom:calc(var(--bar) + 6px);transform:translateY(16px);padding:16px 18px 18px}
  body[data-state=finale].fin-ready .finale{transform:none}
  .finale h2{font-size:clamp(24px,6.6vw,38px)}
  .finale h2 br{display:none}
  .finale .eyebrow{display:none}
  .finale .lede{font-size:14px;margin:6px 0 10px}
  .finale .lede .x{display:none}
  .legend{font-size:11px;gap:6px 12px;margin-bottom:12px;display:flex;flex-wrap:wrap}
  .legend li{white-space:nowrap}
  .tick{pointer-events:none}
  .tick .shape{width:6px;height:6px}
  .btn{padding:11px 12px;font-size:13.5px}
  .finale .row{gap:8px}
  .nav{height:48px;min-width:48px;padding:0 12px}
  .nav .lbl{display:none}
  .months .l{display:none}.months .s{display:inline}
  .months span{padding-left:2px;font-size:11px;letter-spacing:.05em}
  .card.pressphoto .mast{padding:0 18px 10px}
  .mast .o{letter-spacing:.09em;font-size:12.5px}
  .card.pressphoto .mast .q{font-size:40px}
  .top{padding-bottom:22px}
  .list ol{grid-template-columns:1fr}
}
@media ((max-width:899px) or (max-aspect-ratio:1/1)) and (max-height:760px){
  .finale .lede .x{display:none}
  .finale{padding:16px 18px 18px}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .card .media{max-height:30vh}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .card,.card.show,.intro,.finale,.fill{transition:opacity .2s linear!important}
}

/* ── presentation mode (?present, F key, or full screen) ── */
body.present .hint,body.present .hint-x,body.present .tip{display:none!important}
body.present.idle,body.present.idle *{cursor:none!important}