/* ============================================================
   GALLERY REGISTER (draft) — darkroom editorial
   Motion Study v2: one page per demonstration, animations run
   on load (time-based), not on scroll. MPA view transitions.
   ============================================================ */
@font-face{font-family:'Source Serif 4';src:url(fonts/SourceSerif4-400-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(fonts/SourceSerif4-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(fonts/SourceSans3-400-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(fonts/SourceSans3-600-regular.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/IBMPlexMono-400-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/IBMPlexMono-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --ground:#0b0d10; --ground-2:#101318; --paper:#ece7dc; --mute:#8f8d84;
  --hair:rgb(236 231 220 / .14);
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Source Sans 3',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gold:#d4b06a; --bw:#7ad0ff; --ivory:#d8c9a3;
  --storm:#6ea8d8; --bolt:#f2c94c; --amber:#e8a13d; --space:#9fb8ff;
  --violet:#a98ed6; --dust:#c98f4e; --sage:#7fbf9e;
}
@view-transition{navigation:auto}
*{box-sizing:border-box;margin:0}
body{background:var(--ground);color:var(--paper);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
::selection{background:var(--gold);color:var(--ground)}

/* chrome */
.bar,.pn{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px clamp(16px,3vw,28px);font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.bar{border-bottom:1px solid var(--hair)}
.pn{border-top:1px solid var(--hair)}
.bar a,.pn a{color:var(--mute);text-decoration:none;padding:6px 2px}
.bar a:hover,.pn a:hover{color:var(--acc,var(--paper))}
.bar a:focus-visible,.pn a:focus-visible,.replay:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bar .n{color:var(--acc,var(--mute))}

/* frame */
.frame{display:grid;align-content:center;justify-items:center;gap:clamp(14px,2.5svh,26px);padding:clamp(18px,4vw,56px);position:relative;overflow:hidden}
.frame>header{text-align:center;max-width:62ch}
.idx{font:500 .72rem/1 var(--mono);letter-spacing:.22em;color:var(--acc,var(--mute));text-transform:uppercase}
h1,h2{font-family:var(--serif);font-weight:400;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.4rem + 5.5vw,4.4rem);letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,1.1rem + 2.6vw,2.7rem);line-height:1.12;margin-top:.45em;letter-spacing:-.01em}
.gloss{color:var(--mute);font-size:clamp(.95rem,.85rem + .4vw,1.06rem);max-width:52ch;margin:.6em auto 0;text-wrap:pretty}
.tech{font:400 .68rem/1.6 var(--mono);color:var(--mute);letter-spacing:.08em;opacity:.75;text-align:center}
.stage{width:min(920px,100%);display:grid;justify-items:center}

/* ---- timed motion layer (all entrances run on load) ---- */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
  @keyframes rise{to{opacity:1;transform:none}}
  svg .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--dur,1.8s) cubic-bezier(.45,0,.25,1) both;animation-delay:var(--d,.35s)}
  @keyframes draw{to{stroke-dashoffset:0}}
  .fadein{opacity:0;animation:fin 1.1s ease both;animation-delay:var(--d,2s)}
  @keyframes fin{to{opacity:1}}
  .hint{animation:drift 2.2s ease-in-out infinite}
  @keyframes drift{50%{transform:rotate(45deg) translate(6px,6px)}}
  .bldg::after{opacity:0;animation:winds 2.6s steps(1) both;animation-delay:calc(.5s + var(--i,0)*.22s)}
  @keyframes winds{0%{opacity:0}30%{opacity:.55}45%{opacity:.15}60%{opacity:.75}100%{opacity:.8}}
  .car{animation:lane 4.5s ease-in-out infinite}
  .car.back{animation:lane 5.5s ease-in-out infinite reverse;background:linear-gradient(90deg,transparent,#e86a5f);animation-delay:1.2s}
  @keyframes lane{from{transform:translateX(-10%)}to{transform:translateX(min(88vw,780px))}}
  .orbit{animation:spin var(--period) linear infinite}
  @keyframes spin{to{transform:rotate(1turn)}}
  .aurora{animation:spin 40s linear infinite}
  .pulse{animation:pulse 3s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.55}}
  .twinkle{animation:tw 3.4s ease-in-out infinite}
  @keyframes tw{50%{opacity:.25}}
  .flash{opacity:0;animation:flash 1.6s ease both;animation-delay:.4s}
  @keyframes flash{0%{opacity:0}55%{opacity:.5}75%{opacity:.1}100%{opacity:.14}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- index ---- */
.list{width:min(760px,100%);text-align:left}
.list a{display:grid;grid-template-columns:3ch 1fr;gap:4px 18px;align-items:baseline;padding:13px 6px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--paper)}
.list a:first-child{border-top:1px solid var(--hair)}
.list .n{font:500 .72rem/1 var(--mono);color:var(--row,var(--mute));letter-spacing:.1em}
.list .p{font-family:var(--serif);font-size:clamp(1.02rem,.9rem + .5vw,1.25rem)}
.list .t{grid-column:2;font:400 .66rem/1.5 var(--mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
@media(min-width:700px){.list a{grid-template-columns:3ch 17rem 1fr}.list .t{grid-column:3;text-align:right;align-self:baseline}}
.list a:hover .p{color:var(--row,var(--gold))}
.list a:hover .n{color:var(--paper)}
.list a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.coda{font:400 .7rem/1.9 var(--mono);color:var(--mute);letter-spacing:.1em;text-align:center;margin-top:3svh}
.hint{width:14px;height:14px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:rotate(45deg);margin-top:1.5svh}

/* ---- chess ---- */
.chess-stage{display:grid;justify-items:center;gap:18px}
@media(min-width:760px){.chess-stage{grid-template-columns:auto 190px;align-items:center;gap:44px}}
.board{position:relative;width:min(78vw,48svh,420px);aspect-ratio:1;border:1px solid var(--hair);box-shadow:0 1px 2px rgb(0 0 0/.4),0 12px 40px rgb(0 0 0/.5),inset 0 0 0 1px rgb(0 0 0/.4)}
.board .grid{position:absolute;inset:0;display:grid;grid-template:repeat(var(--n,8),1fr)/repeat(var(--n,8),1fr)}
.board .sq{background:#31363d}.board .sq.d{background:#22262c}
.pc{position:absolute;width:calc(100%/var(--n,8));height:calc(100%/var(--n,8));display:grid;place-items:center;font-size:calc(min(78vw,48svh,420px)/var(--n,8)*.72);line-height:1;transition:transform .5s cubic-bezier(.3,.8,.3,1),opacity .35s;will-change:transform;user-select:none}
.pc.w{color:#ece7dc;text-shadow:0 1px 2px rgb(0 0 0/.7)}
.pc.b{color:#17130e;text-shadow:0 0 2px rgb(236 231 220/.55)}
.pc.cap{opacity:0;scale:.6}
.moves{font:400 .85rem/2 var(--mono);color:var(--mute);min-height:8em;min-width:11ch;text-align:left}
.moves b{color:var(--ivory);font-weight:500}
.replay{font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);background:none;border:1px solid var(--hair);padding:9px 14px;cursor:pointer;margin-top:8px}
.replay:hover{color:var(--ivory);border-color:var(--ivory)}
.tour-n{position:absolute;width:calc(100%/var(--n,5));height:calc(100%/var(--n,5));display:grid;place-items:center;font:400 .7rem/1 var(--mono);color:rgb(216 201 163/.65)}
.board .sq.vis{box-shadow:inset 0 0 0 999px rgb(216 201 163/.09)}

/* ---- beltwayeight ---- */
.city{width:min(880px,94vw);height:min(300px,34svh);display:flex;align-items:flex-end;gap:6px;position:relative}
.bldg{flex:1;height:calc(var(--h)*1%);background:#151a22;border-top:1px solid rgb(122 208 255 / .25);position:relative}
.bldg::before,.bldg::after{content:"";position:absolute;inset:8% 18%;background:repeating-linear-gradient(0deg,transparent 0 8px,rgb(236 231 220 /.05) 8px 11px)}
.bldg::after{background:repeating-linear-gradient(0deg,transparent 0 8px,rgb(122 208 255 /.5) 8px 11px);mix-blend-mode:screen}
.road{width:min(880px,94vw);height:2px;background:rgb(236 231 220 / .12);position:relative;margin-top:10px}
.car{position:absolute;top:-1px;width:64px;height:3px;background:linear-gradient(90deg,transparent,var(--bw));border-radius:2px}

/* ---- lightning thief ---- */
.flash{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 20%,rgb(242 201 76/.5),transparent 70%);pointer-events:none}
.cards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.card{border:1px solid var(--hair);background:var(--ground-2);padding:16px 20px;max-width:220px;text-align:left;box-shadow:0 1px 2px rgb(0 0 0/.35),0 10px 30px rgb(0 0 0/.35)}
.card b{font-family:var(--serif);font-weight:400;font-style:italic;font-size:1.15rem;color:var(--storm)}
.card p{font-size:.85rem;color:var(--mute);margin-top:4px}

/* ---- voshun ---- */
.cosmos{position:relative;width:min(360px,74vw);aspect-ratio:1;display:grid;place-items:center}
.aurora{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 40deg,rgb(169 142 214/.5) 90deg,transparent 150deg,rgb(127 191 158/.28) 220deg,transparent 300deg,rgb(169 142 214/.35) 340deg,transparent 360deg);-webkit-mask:radial-gradient(closest-side,transparent 62%,#000 66% 78%,transparent 82%);mask:radial-gradient(closest-side,transparent 62%,#000 66% 78%,transparent 82%);filter:blur(6px)}
.orbit{position:absolute;border-radius:50%;border:1px solid rgb(169 142 214/.14)}
.orbit i{position:absolute;top:-4px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 12px rgb(169 142 214/.8)}
.o1{inset:12%;--period:18s}.o2{inset:24%;--period:29s}.o3{inset:36%;--period:44s}
.sigil{font-family:var(--serif);font-size:2.6rem;color:var(--violet);text-shadow:0 0 24px rgb(169 142 214/.5)}

/* ---- del rio ---- */
.acres{font-family:var(--serif);font-size:clamp(2rem,1.4rem + 3vw,3.2rem);color:var(--dust);font-variant-numeric:tabular-nums}
.acres small{font-family:var(--mono);font-size:.4em;color:var(--mute);letter-spacing:.18em}

/* ---- svg text ---- */
svg text{font:400 11px var(--mono);letter-spacing:.12em}