@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-var.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/plex-mono-500.woff2") format("woff2")}
:root{
  color-scheme: dark;
  --ground:#0A0B0D;
  --frame:#15171B;
  --line:#23262C;
  --ink:#ECEAE5;
  --mute:#7D828B;
  --amber:#E2AE72;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--display);overflow:hidden;-webkit-font-smoothing:antialiased}

/* ---------- Stage ---------- */
.stage{position:fixed;inset:0;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:clamp(10px,1.2vw,20px);padding-inline:clamp(16px,2.4vw,40px)}
.col{position:relative;overflow:hidden;border-inline:1px solid var(--line)}
.col::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:5px;background:repeating-linear-gradient(to bottom,transparent 0 23px,var(--line) 23px 24px);opacity:.55;z-index:2;pointer-events:none}
.track{position:absolute;inset-inline:0;top:0;display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px);padding-inline:clamp(7px,.7vw,11px);will-change:transform}

.frame{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit;font:inherit;text-align:left}
.frame .img{position:relative;overflow:hidden;background:var(--frame)}
.frame img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .6s,transform .9s cubic-bezier(.2,.7,.2,1),filter .6s}
.frame img.on{opacity:1}
.frame .meta{display:flex;justify-content:space-between;gap:8px;padding:7px 1px 0;font:500 10px/1.2 var(--mono);letter-spacing:.06em;color:var(--mute);text-transform:uppercase;white-space:nowrap;overflow:hidden}
.frame .meta b{font-weight:500;color:var(--amber)}
.frame .meta span{overflow:hidden;text-overflow:ellipsis}
.frame .meta span:last-child{flex-shrink:0}
.frame .img::after{content:"";position:absolute;inset:8px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:
   linear-gradient(var(--ink),var(--ink)) top left/12px 1px no-repeat,
   linear-gradient(var(--ink),var(--ink)) top left/1px 12px no-repeat,
   linear-gradient(var(--ink),var(--ink)) top right/12px 1px no-repeat,
   linear-gradient(var(--ink),var(--ink)) top right/1px 12px no-repeat,
   linear-gradient(var(--ink),var(--ink)) bottom left/12px 1px no-repeat,
   linear-gradient(var(--ink),var(--ink)) bottom left/1px 12px no-repeat,
   linear-gradient(var(--ink),var(--ink)) bottom right/12px 1px no-repeat,
   linear-gradient(var(--ink),var(--ink)) bottom right/1px 12px no-repeat}
.frame:hover img,.frame:focus-visible img{transform:scale(1.06)}
.frame:hover .img::after,.frame:focus-visible .img::after{opacity:.9}
.frame:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
.stage:has(.frame:hover) .frame:not(:hover) img{filter:brightness(.5) saturate(.7);transition-delay:0s,0s,.12s}

.fade{position:fixed;inset-inline:0;pointer-events:none;z-index:3}
.fade.t{top:0;height:20vh;background:linear-gradient(var(--ground) 8%,transparent)}
.fade.b{bottom:0;height:40vh;background:linear-gradient(transparent,rgba(10,11,13,.86) 55%,var(--ground) 94%)}

/* ---------- Chrome ---------- */
.bar{position:fixed;inset-inline:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-inline:clamp(16px,2.4vw,40px);pointer-events:none}
.bar a,.bar button{pointer-events:auto}
.top{top:0;padding-top:calc(env(safe-area-inset-top,0px) + 22px);align-items:center}
.bottom{bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 26px)}
.label{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.label em{font-style:normal;color:var(--ink)}
.nav{display:flex;gap:22px}
.nav button{background:none;border:0;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:6px 0;border-bottom:1px solid transparent;cursor:pointer}
.nav button:hover,.nav button:focus-visible,.nav button[aria-current="true"]{border-color:var(--amber);outline:none}

.sig{display:grid;gap:clamp(12px,1.4vw,20px)}
.mark{margin:0;background:none;border:0;padding:0;color:var(--ink);text-align:left;cursor:pointer;font-family:var(--display);font-weight:760;font-stretch:125%;text-transform:uppercase;line-height:.86;letter-spacing:-.035em;font-size:clamp(40px,6.6vw,120px)}
.mark:focus-visible{outline:1px solid var(--amber);outline-offset:6px}
.claim{margin:0;font:400 clamp(11px,1vw,14px)/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.claim span{display:block}
.claim span:nth-child(2){color:var(--ink)}
.sig{position:relative}
.panel{display:grid;align-items:end}
.pane{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s .55s}
.pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s .08s,transform .55s .08s cubic-bezier(.2,.7,.2,1),visibility 0s}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;margin:0;font:400 clamp(11px,1vw,14px)/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.facts dt{color:var(--mute)}
.facts dd{margin:0;color:var(--ink)}
.facts .quote{grid-column:1/-1;color:var(--amber);margin-top:4px}
.me{position:absolute;left:0;bottom:calc(100% + 22px);width:clamp(160px,16vw,270px);margin:0;opacity:0;clip-path:inset(100% 0 0 0);transform:translateY(18px);transition:clip-path .7s cubic-bezier(.7,0,.2,1),opacity .4s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.me.on{opacity:1;clip-path:inset(0 0 0 0);transform:none}
.me img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:46% 38%;background:var(--frame)}
.me figcaption{display:flex;justify-content:space-between;gap:8px;padding:7px 0 2px;background:var(--ground);white-space:nowrap;overflow:hidden;font:500 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.me figcaption b{font-weight:500;color:var(--amber)}
.me::after{content:"";position:absolute;inset:8px 8px 26px;pointer-events:none;opacity:.9;
  background:
   linear-gradient(var(--ink),var(--ink)) top left/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) top left/1px 12px no-repeat,
   linear-gradient(var(--ink),var(--ink)) top right/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/1px 12px no-repeat,
   linear-gradient(var(--ink),var(--ink)) bottom left/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/1px 12px no-repeat,
   linear-gradient(var(--ink),var(--ink)) bottom right/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/1px 12px no-repeat}

.readout{display:grid;gap:6px;text-align:right;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums;flex-shrink:0}
.readout .v{color:var(--ink)}
.readout .hint.now{color:var(--amber)}
.meter{width:140px;height:2px;background:var(--line);margin-left:auto;position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--amber);width:25%;transition:width .15s linear}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:10;background:rgba(6,7,8,.95);display:grid;place-items:center;padding:clamp(16px,5vw,64px);opacity:0;pointer-events:none;transition:opacity .35s}
.lb.open{opacity:1;pointer-events:auto}
.lb figure{margin:0;display:grid;gap:12px;max-width:min(1200px,100%)}
.lb img{max-width:100%;max-height:78vh;object-fit:contain;display:block;margin:auto;transform:translateY(14px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lb.open img{transform:none}
.lb figcaption{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.lb figcaption b{color:var(--amber);font-weight:500}
.lb figcaption .r{color:var(--ink)}
.x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:clamp(16px,2.4vw,40px);z-index:2;background:none;border:1px solid var(--line);color:var(--ink);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.x:hover,.x:focus-visible{border-color:var(--amber);outline:none}

.facts a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);user-select:all}
.facts a:hover,.facts a:focus-visible{border-color:var(--amber);outline:none}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
#copy{background:none;border:1px solid var(--line);color:var(--mute);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;cursor:pointer}
#copy:hover,#copy:focus-visible{color:var(--ink);border-color:var(--amber);outline:none}

@media (max-width:820px){.readout .hint{display:none}}
@media (max-width:560px){.me figcaption span:last-child{display:none}.frame .meta span:last-child{display:none}.hide2{display:none}.nav{gap:14px}.fade.b{height:46vh}}
@media (prefers-reduced-motion:reduce){.frame img,.lb img,.me,.pane{transition:none}}

h1{margin:0}
.side{display:grid;justify-items:end;gap:14px;flex-shrink:0}
.legal{display:flex;gap:16px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.legal a{color:var(--mute);text-decoration:none;padding-block:4px;border-bottom:1px solid transparent;pointer-events:auto}
.legal a:hover,.legal a:focus-visible{color:var(--ink);border-color:var(--amber);outline:none}
@media (max-width:560px){
  .bottom{flex-wrap:wrap;row-gap:18px}
  .side{width:100%;justify-items:start}
  .legal{gap:20px}
}
.nojs{position:fixed;inset:auto 0 50% 0;text-align:center;font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);z-index:6}