/* ONZE. Hue-free charcoal (every grey is R=G=B), one cobalt accent, condensed caps for display, mono for data.
   Three type sizes per screen: display, body 18px, mono 12 to 13px. Hairlines only where the data is tabular.
   The scroll story is layered on top of a plain stacked document: every rule that pins, overlays or hides is scoped under html.motion #story. */
@property --fx{syntax:'<percentage>';inherits:true;initial-value:50%}
:root{
  --bg:#101010; --bg-2:#181818; --bg-3:#202020; --bg-4:#2B2B2B;
  --fg:#F2F2F2; --fg-2:#AAAAAA; --fg-3:#8A8A8A;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --accent:#2F56E6; --accent-2:#7D97FF;
  --ink-inv:#FFFFFF; --err:#FF9B8F;
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --r-ui:999px; --r-in:8px;
  --gutter:clamp(16px,4vw,48px);
  --max:1288px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-card:drop-shadow(0 24px 28px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.5));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
html:not(.motion){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,h4{margin:0;font-weight:800}
p,figure{margin:0}
a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);min-width:0}
.skip{position:absolute;left:16px;top:-64px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:var(--r-in);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* type voices */
.d,.h2{font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:800;text-transform:uppercase;letter-spacing:-.014em;word-spacing:.08em;line-height:.9;font-size:clamp(40px,6.9vw,104px)}
.d span,.h2 span{display:block;white-space:nowrap}
.d-xl{font-size:clamp(46px,7.5vw,116px);line-height:.88}
.p{color:var(--fg-2);font-size:18px;line-height:1.5;max-width:40ch;text-wrap:pretty}
.mono{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-variant-numeric:tabular-nums;font-weight:400}
.mono b{font-weight:500;color:var(--fg)}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}
@media (max-width:860px),(pointer:coarse){.grain{mix-blend-mode:normal;opacity:.025}}
@media (prefers-reduced-transparency:reduce){.grain{display:none}}
@media print{.grain{display:none}}

/* nav: brand, four links, one button, one line */
.nav{position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;background:transparent;border-bottom:1px solid transparent;transition:background .2s ease-out,border-color .2s ease-out}
.nav.scrolled{background:rgba(16,16,16,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.open{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:var(--line)}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;width:100%}
.nav .brand{justify-self:start;min-height:44px;padding-inline:4px;margin-inline:-4px}
.brand{display:inline-flex;align-items:center;text-decoration:none;text-transform:uppercase;font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:800;font-size:26px;line-height:1;letter-spacing:.01em;color:var(--fg);white-space:nowrap}
.nav-links{display:flex;gap:clamp(20px,3vw,40px);list-style:none;margin:0;padding:0}
.nav-links a{position:relative;display:block;padding:14px 0;font-family:var(--display);font-stretch:100%;font-variation-settings:"wdth" 100;font-weight:600;font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);text-decoration:none;white-space:nowrap;transition:color .18s ease-out}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--fg);opacity:0;transition:opacity .18s ease-out}
.nav-links a[aria-current]::after{opacity:1}
.nav-right{display:flex;align-items:center;gap:8px;justify-self:end;grid-column:3}
.nav-toggle{display:none;width:40px;height:40px;border-radius:var(--r-ui);border:1px solid var(--line-2);background:transparent;cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-toggle i{display:block;width:16px;height:8px;border-top:1.5px solid var(--fg);border-bottom:1.5px solid var(--fg);transition:height .18s ease-out}
.nav.open .nav-toggle i{height:0;border-bottom:0}
.nav-sheet{display:none}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav.open .nav-sheet{display:block;position:absolute;left:0;right:0;top:64px;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gutter) 24px;max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
  .nav-sheet ul{list-style:none;margin:0;padding:0}
  .nav-sheet a{display:flex;align-items:center;padding:16px 0;text-decoration:none;font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:800;font-size:32px;line-height:1;text-transform:uppercase;color:var(--fg);white-space:nowrap}
}

/* buttons: one shape */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-ui);font-family:var(--display);font-stretch:100%;font-variation-settings:"wdth" 100;font-weight:600;font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background .18s ease-out,border-color .18s ease-out,color .18s ease-out}
.btn-primary{background:var(--accent);color:var(--ink-inv)}
.btn-primary:hover{background:#3D63EE}
.btn-primary:active{background:#2848C8}
.btn-sm{height:40px;padding:0 18px}
.btn-nav{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn-nav:hover{border-color:var(--fg)}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--display);font-stretch:100%;font-variation-settings:"wdth" 100;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--fg);white-space:nowrap;background:linear-gradient(var(--fg),var(--fg)) 0 calc(100% - 10px)/100% 1px no-repeat}
.tlink span{display:inline-block;transition:transform .18s ease-out}
.tlink:hover span{transform:translateX(3px)}

/* shared with the catalogue page: a segmented filter */
.seg{display:inline-flex;gap:4px}
.seg button{height:40px;padding:0 14px;border:0;border-radius:var(--r-ui);background:transparent;cursor:pointer;color:var(--fg-3);font-family:var(--display);font-stretch:100%;font-variation-settings:"wdth" 100;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .18s ease-out,color .18s ease-out}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--bg-3);color:var(--fg)}

/* card object: the real item image, untouched, with masked sheen and foil on top */
.card{position:relative;width:var(--cw,280px);aspect-ratio:640/894;container-type:inline-size;isolation:isolate;filter:var(--shadow-card)}
.c-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;user-select:none;-webkit-user-drag:none}
.c-fx{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;opacity:0;transition:opacity .35s ease-out}
.c-sheen{background:linear-gradient(105deg,transparent calc(var(--fx) - 22%),rgba(255,255,255,.34) var(--fx),transparent calc(var(--fx) + 22%));mix-blend-mode:screen}
.c-foil{background:conic-gradient(from var(--fa,0deg) at var(--fx) var(--fy,40%),rgba(255,255,255,0),rgba(255,255,255,.9) 14%,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 52%,rgba(255,255,255,0) 68%,rgba(255,255,255,.9) 86%,rgba(255,255,255,0));mix-blend-mode:overlay}
.lit .c-sheen{opacity:calc(.25 + var(--foil,.5)*.65)}
.lit .c-foil{opacity:calc(.02 + var(--foil,.5)*.2)}
.c-sw{opacity:1;transition:none;overflow:hidden;mix-blend-mode:screen}
.c-sw i{position:absolute;top:-10%;bottom:-10%;left:-34%;width:18%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.34) 50%,rgba(255,255,255,0))}
.tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.tilt.lit{transition:transform .12s linear}

/* card back: same silhouette, charcoal plate with a hairline edge */
.card-back{filter:none}
.card-back{--shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 894' preserveAspectRatio='none'%3E%3Cpath d='M60 172Q60 150 84 146Q130 138 140 120Q320 78 500 120Q510 138 556 146Q580 150 580 172V742Q580 778 546 790L340 846Q320 852 300 846L94 790Q60 778 60 742Z'/%3E%3C/svg%3E")}
.card-back::before,.card-back::after{content:"";position:absolute;inset:0;-webkit-mask:var(--shield) center/100% 100% no-repeat;mask:var(--shield) center/100% 100% no-repeat}
.card-back::before{background:#3A3A3A}
.card-back::after{inset:.6cqw;background:var(--bg-3)}
.cb{position:absolute;inset:0;z-index:2;padding:28cqw 15cqw 21cqw;display:flex;flex-direction:column;font-family:var(--mono);color:var(--fg-2);font-size:max(var(--cbf,12px),4cqw);line-height:1.35;letter-spacing:.04em;text-transform:uppercase}
.cb-top{display:flex;justify-content:space-between;gap:2cqw;padding-bottom:3cqw;border-bottom:1px solid var(--line-2);color:var(--fg)}
.cb-name{font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:800;font-size:12cqw;line-height:.9;letter-spacing:-.01em;color:var(--fg);margin:4.5cqw 0 2cqw}
.cb-list{list-style:none;margin:1cqw 0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.cb-list li{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;padding:2.4cqw 0;white-space:nowrap;border-top:1px solid var(--line)}
.cb-list li:first-child{border-top:0}
.cb-list span{color:var(--fg-2);font-size:max(var(--cbf2,11px),3.6cqw)}
.cb-list b{font-weight:500;color:var(--fg);text-align:right}
.cb-list li.me span,.cb-list li.me b{color:var(--accent-2)}
.cb-foot{margin-top:auto;padding-top:2.6cqw;border-top:1px solid var(--line-2);text-align:center;color:var(--fg-2);font-size:max(var(--cbf2,11px),3.6cqw)}

/* the pack: a real EA SPORTS FC pack image, untouched. The layout box stays 300 by 470 (the choreography measures it);
   the image is drawn at its own ratio, 324 wide, and cut in two at the tear line so the top can lift off.
   Sheen and foil are the same light as on the cards: masked by the pack's own alpha and laid out on the whole pack, so they run across the cut. */
.pack{position:relative;width:300px;height:470px;flex:none}
.pack-tilt{position:absolute;inset:0 -12px}
.pack-img{position:absolute;left:0;top:0;width:324px;height:470px;max-width:none;display:block;user-select:none;-webkit-user-drag:none}
.pack-cap{position:absolute;left:0;right:0;top:0;height:58px;overflow:hidden;transform-origin:100% 100%}
.pack-body{position:absolute;left:0;right:0;top:57px;bottom:0;overflow:hidden;--my:-57px}
.pack-body .pack-img{top:-57px}
.pack-strip{position:absolute;left:5px;right:5px;top:58px;height:6px;overflow:hidden;pointer-events:none}
.pack-strip i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.pack-fx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease-out;-webkit-mask:var(--mask) 0 var(--my,0px)/324px 470px no-repeat;mask:var(--mask) 0 var(--my,0px)/324px 470px no-repeat;background-repeat:no-repeat;background-size:324px 470px;background-position:0 var(--my,0px)}
.pack-sheen{background-image:linear-gradient(105deg,transparent calc(var(--fx) - 22%),rgba(255,255,255,.34) var(--fx),transparent calc(var(--fx) + 22%));mix-blend-mode:screen}
.pack-foil{background-image:conic-gradient(from var(--fa,0deg) at var(--fx) var(--fy,40%),rgba(255,255,255,0),rgba(255,255,255,.9) 14%,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 52%,rgba(255,255,255,0) 68%,rgba(255,255,255,.9) 86%,rgba(255,255,255,0));mix-blend-mode:overlay}
.lit .pack-sheen{opacity:.8}
.lit .pack-foil{opacity:.2}

/* ---------- the story: default is a plain stacked document, one block per chapter ---------- */
#story{position:relative}
.ch{max-width:var(--max);margin-inline:auto;padding:60px var(--gutter);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px clamp(24px,5vw,80px);align-items:center;scroll-margin-top:64px}
.ch-t,.ch-top,.ch-b{display:flex;flex-direction:column;min-width:0}
.ch-t{gap:28px}
.ch-top{gap:20px}
.ch-b{gap:20px;align-items:flex-start}
.fig{display:flex;justify-content:center;align-items:center;gap:24px;min-width:0}
.fig .card{--cw:min(280px,56vw)}
#top.ch{min-height:calc(100svh - 64px);padding-block:24px 48px}
.cue{display:none;color:var(--fg-2)}
.stage-ui .ui-r{display:grid;justify-items:end;align-items:center}
.stage-ui .ui-r>*{grid-area:1/1}
html.motion #story .cue{display:block}
.actors,.stage-ui,.slot-o{display:none}
.act{pointer-events:none}
.act .tilt{pointer-events:auto}

/* hero figure: a sealed pack. The card waits inside the sleeve and is not shown before the reveal. */
.fig-hero{position:relative;width:300px;height:470px;margin-inline:auto;display:block;flex:none}
html:not(.motion) .fig-hero .pc{visibility:hidden}
.fig-hero .pack{position:absolute;left:0;bottom:0;z-index:6}
.pc{position:absolute;left:18px;top:78px;width:264px;z-index:5}
.pc-tilt{transform-style:preserve-3d}
.pc-flip{position:relative;width:100%;aspect-ratio:640/894;transform-style:preserve-3d}
.pc-flip .card{position:absolute;inset:0;--cw:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pc-flip .card-back{transform:rotateY(180deg)}

/* 01 open */
.beats{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.beats li{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);transform-origin:0 50%;white-space:nowrap}
.fig-fan{padding-block:12px}
.fig-fan .card{--cw:min(220px,36vw)}
.fig-fan .card:nth-child(1){transform:rotate(-8deg) translate(34%,3%) scale(.94)}
.fig-fan .card:nth-child(2){z-index:2}
.fig-fan .card:nth-child(3){transform:rotate(8deg) translate(-34%,3%) scale(.94)}

/* 02 runs */
.ch-wide{grid-template-columns:minmax(0,1fr)}
.runlist{list-style:none;margin:0;padding:14px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px;border-top:1px solid var(--line-2);width:100%}
.runlist li{display:flex;flex-direction:column;gap:4px;min-width:0}
.runlist b{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.runlist .n{font-family:var(--mono);font-size:26px;line-height:1.1;font-weight:500;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.runlist i{font-family:var(--mono);font-style:normal;font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--fg-2);text-wrap:pretty}
.fig-row{align-items:flex-end;gap:clamp(8px,2vw,28px)}
.fig-row .card{--cw:min(190px,17vw);flex:0 1 auto}

/* 03 memory */
.engs{list-style:none;margin:0;padding:0;width:100%}
.engs li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:baseline;padding:7px 0;transform-origin:0 50%}
.engs time{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.engs time i{position:absolute;left:0;top:0;font-style:normal;color:var(--accent-2);background:var(--bg);opacity:0}
.engs span{color:var(--fg);font-size:18px;line-height:1.35}
.mem-b{position:relative;display:flex;flex-direction:column;gap:16px;width:100%}
.mem-f{display:flex;flex-direction:column;gap:12px}
/* the stamp lands on the list itself, bottom right, clear of the three lines */
.stamp{position:absolute;right:0;top:78px;font-family:var(--mono);font-size:24px;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);border:2px solid var(--accent);border-radius:3px;padding:10px 10px 10px 14px;transform:rotate(-6deg);white-space:nowrap}
html:not(.motion) #mem-h1{display:none}
html:not(.motion) #provenance .fig .card{--cw:min(340px,78vw)}
.fig-ledge{flex-direction:column;gap:0}
.ledge{display:block;width:min(420px,84%);height:1px;background:var(--line-2);margin-top:8px}
.tag{margin-top:12px;white-space:nowrap}

/* 05 album: the Paris page */
.album{width:100%;max-width:560px;margin-inline:auto;display:block}
.album-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
#acount{display:inline-block;transform-origin:50% 60%}
.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.slot{position:relative;aspect-ratio:640/894;min-width:0}
.slot img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.slot.none::before,.slot-o{content:"";position:absolute;inset:10% 6% 6%;border:1px solid var(--line-2);border-radius:var(--r-in)}
.slot.none{display:grid;place-items:center;padding-top:4%;font-family:var(--mono);font-size:12px;color:var(--fg-3)}
.slot-o{border-color:var(--accent)}

/* 06 doubles */
.fig-swap{gap:clamp(16px,4vw,56px)}
.fig-swap .card{--cw:min(210px,36vw)}
.fig-swap figure{display:flex;flex-direction:column;align-items:center;gap:16px}

@media (max-width:860px){
  .ch{grid-template-columns:minmax(0,1fr);padding-block:48px}
  #top.ch{min-height:0}
  .d,.h2{font-size:clamp(34px,12vw,56px)}
  .d-xl{font-size:clamp(38px,13.4vw,64px)}
  .p{font-size:16px}
  .engs li{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:4px 0}
  .engs time{font-size:11px}
  .engs span{font-size:14px;white-space:nowrap}
  .stamp{font-size:16px;border-width:1.5px;padding:7px 7px 7px 10px;top:56px}
  #seal{font-size:15px;max-width:none;margin-top:10px}
  .runlist{grid-template-columns:minmax(0,1fr);padding-top:6px}
  .runlist li{display:grid;grid-template-columns:80px 46px minmax(0,1fr);gap:10px;align-items:baseline;padding:5px 0}
  .runlist .n{font-size:15px;letter-spacing:0}
  .runlist i{font-size:11px;line-height:1.4}
  .fig-row{gap:0}
  .fig-row .card{--cw:24vw;margin-inline:-3.6vw}
}
@media (max-width:620px){.btn-wide{width:100%}}

/* ---------- the story, in motion: one sticky stage, chapters overlaid as captions, objects placed by the timeline ---------- */
html.motion #story{height:760svh;margin-top:-64px}
html.motion.pre #story .stage{visibility:hidden}
html.motion #story .stage{position:sticky;top:0;height:100svh;overflow:clip;contain:layout paint;--k:min(300px,34svh,24vw)}
html.motion #story .ch{display:block;position:static;max-width:none;min-height:0;padding:0}
html.motion #story .ch-t{position:absolute;z-index:8;top:64px;bottom:0;left:0;right:0;margin-inline:auto;max-width:var(--max);padding:24px var(--gutter) 72px;justify-content:center;pointer-events:none}
html.motion #story .ch-t a{pointer-events:auto}
html.motion #story .ch-top,html.motion #story .ch-b{max-width:min(540px,42%)}
html.motion #story .fig{display:none}
html.motion #story .fig-hero,html.motion #story .fig-album{display:block;position:static;width:auto;height:auto;margin:0}
html.motion #story .actors{display:block}
html.motion #story .act{position:absolute;left:50%;top:50%;width:var(--k);z-index:3;margin:0}
html.motion #story .actors>.act,html.motion #story .album{will-change:transform}
html.motion #story .actors>.ledge,html.motion #story .actors>.tag,html.motion #story .actors>.lbl{will-change:auto}
html.motion #story #a-haa{z-index:2}
html.motion #story .pack{left:50%;top:50%;bottom:auto;width:300px;z-index:6}
html.motion #story .pc{z-index:5;width:calc(var(--k)*1.3)}
html.motion #story .act.over{z-index:4}
html.motion #story .album{position:absolute;left:50%;top:50%;z-index:1;width:var(--aw);max-width:none;margin:0;--aw:min(44vw,calc((100svh - 250px)*.895 + 40px))}
html.motion #story .slot-o{display:block}
html.motion #story .mem-hs,html.motion #story .mem-bs{display:grid;width:100%}
html.motion #story .mem-hs>*,html.motion #story .mem-bs>*,html.motion #story .mem-f>*{grid-area:1/1;align-self:start}
html.motion #story .mem-f{display:grid}
html.motion #story #runs .ch-t{justify-content:flex-start;padding-top:clamp(20px,5svh,56px)}
html.motion #story #runs .ch-top,html.motion #story #runs .ch-b{max-width:none}
html.motion #story #runs .p{max-width:58ch}
html.motion #story .runlist{position:absolute;left:var(--gutter);right:var(--gutter);top:var(--rt,70%);width:auto;grid-template-columns:repeat(5,var(--kr,160px));justify-content:space-between;gap:0;padding-top:14px}
html.motion #story .ro{z-index:0;width:var(--kr,160px);aspect-ratio:640/894;border:1px solid var(--accent);border-radius:10px}
html.motion #story .ledge{width:calc(var(--k)*1.5);margin:0}
html.motion #story .tag,html.motion #story .lbl{width:auto;margin:0;white-space:nowrap;z-index:7}
html.motion #story .lbl{display:grid;justify-items:center;color:var(--fg)}
html.motion #story .lbl span{grid-area:1/1;position:relative}
html.motion #story .lbl i{position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent-2);transform-origin:0 50%}
html.motion #story .stage-ui{display:flex;position:absolute;z-index:9;left:0;right:0;bottom:0;margin-inline:auto;max-width:var(--max);padding:0 var(--gutter);height:56px;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.stage-ui .idx{display:flex;align-items:center;gap:14px;white-space:nowrap}
.stage-ui a{white-space:nowrap}
@media (max-width:359px){.stage-ui .prog{width:48px}}
.stage-ui .prog{display:block;width:96px;height:1px;background:var(--line-2)}
.stage-ui .prog i{display:block;height:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
.stage-ui a{pointer-events:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--fg-2);text-decoration:none;transition:color .18s ease-out}
.stage-ui a:hover{color:var(--fg)}
@media (max-width:860px){
  html.motion #story{height:640svh}
  html.motion #story .stage{--k:min(60vw,33svh)}
  html.motion #story .ch-t{justify-content:space-between;padding:10px var(--gutter) 58px;gap:16px}
  html.motion #story #top .ch-t{justify-content:flex-start;gap:20px;padding-top:16px}
  html.motion #story .ch-top,html.motion #story .ch-b{max-width:none}
  html.motion #story .ch-top{gap:12px}
  html.motion #story .ch-b{gap:10px}
  html.motion #story #runs .ch-t{padding-top:10px;justify-content:space-between}
  html.motion #story .mem-bs>*{align-self:end}
  html.motion #story .mem-b{gap:12px}
  html.motion #story .album{--aw:min(calc(100vw - var(--gutter)*2),calc((100svh - 400px)*.895 + 24px))}
  html.motion #story .slots{gap:6px}
  html.motion #story .runlist{position:static;width:100%;margin:0;padding-top:6px;grid-template-columns:minmax(0,1fr);justify-content:normal}
}
/* the overlapped phone row cascades left over right from the rare card, so every run stays visible */
@media (max-width:599px){html.motion #story #a-hak{z-index:1}}
@media (max-width:860px) and (max-height:700px){
  html.motion #story .ch-b .opt{display:none}
  html.motion #story .runlist i{display:none}
}

@media (min-width:861px) and (max-height:760px){
  html.motion #story .runlist i{display:none}
}

/* ---------- on Solana ---------- */
.sol{padding-block:clamp(104px,14vw,200px) 0}
.sol-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:40px clamp(32px,6vw,96px);align-items:start}
.sol-head{display:flex;flex-direction:column;gap:24px}
@media (min-width:861px){.sol-head{position:sticky;top:104px}}
.spec{margin:0;border-top:1px solid var(--line-2)}
.spec>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding-top:5px}
.spec dd{margin:0;color:var(--fg);font-size:18px;line-height:1.45;max-width:62ch;text-wrap:pretty}
.consts{display:flex;flex-wrap:wrap;gap:6px 32px;margin-top:20px;color:var(--fg-2)}
.catrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px clamp(24px,5vw,72px);align-items:center;margin-top:clamp(120px,14vw,200px)}
.catrow .n{font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:800;font-size:clamp(96px,12vw,168px);line-height:.8;letter-spacing:-.01em;color:var(--fg)}
@media (max-width:860px){
  .sol-grid{grid-template-columns:minmax(0,1fr)}
  .spec>div{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
  .spec dt{padding-top:0}
  .spec dd{font-size:16px}
  .catrow{grid-template-columns:minmax(0,1fr)}
}

/* ---------- list ---------- */
.join{padding-block:clamp(104px,14vw,200px);text-align:center}
.join .wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
.join .p{max-width:36ch}
#fnote span{display:block}
.field{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px;margin-top:8px}
.field-row{display:flex;gap:8px}
.field input{flex:1 1 auto;min-width:0;height:48px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-ui);color:var(--fg);padding:0 20px;font:inherit;font-size:16px;transition:border-color .18s ease-out}
.field input::placeholder{color:var(--fg-3)}
.field input:hover{border-color:var(--fg-3)}
.field input:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-color:var(--fg);border-radius:var(--r-ui)}
.field-msg{font-size:16px;color:var(--fg);min-height:1.5em}
.field-msg:focus,.field-msg:focus-visible{outline:0}
.field-msg.err{color:var(--err)}
.field.done .field-msg{font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;text-wrap:balance}
@media (max-width:620px){.field-row{flex-direction:column}}

/* ---------- footer: the legal truth, nothing else ---------- */
.footer{padding-block:0 clamp(28px,4vw,48px)}
.foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px clamp(24px,4vw,64px);align-items:start;border-top:1px solid var(--line);padding-top:20px}
.foot .brand{font-size:22px;min-height:44px;margin-top:-11px}
.foot p{font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--fg-3);max-width:96ch}
.foot p+p{margin-top:10px}
.foot>a:last-child{display:inline-flex;align-items:center;min-height:44px;margin-top:-13px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);text-decoration:none;white-space:nowrap}
.foot>a:last-child:hover{color:var(--fg)}
@media (max-width:860px){.foot{grid-template-columns:minmax(0,1fr)}.foot .brand,.foot>a:last-child{margin-top:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}