/* ════════════════════════════════════════════════════════════════
   PHÆNOMENA · core.css
   Shared design tokens and page chrome for all eight pages.
   Zero dependencies. No @import, no webfonts, no external requests.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* canvas */
  --bg:#06060b;
  --card:#0a0a13;
  --ink:#ecebf3;
  --dim:#9691b0;
  --faint:#5f5a78;
  --line:rgba(255,255,255,.08);
  --line-lit:rgba(255,255,255,.25);

  /* per-wing accents — every page overrides these */
  --a1:#5ee3c0;
  --a2:#8b7bff;
  --a3:#ff5e9a;

  /* type */
  --serif:Georgia,'Times New Roman',Times,serif;
  --mono:'Cascadia Code',Consolas,'SF Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

  /* rhythm */
  --pad:clamp(1.2rem,4.5vw,4.5rem);
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
  -webkit-text-size-adjust:100%;
  background:var(--bg);          /* the floor under the painting */
}

body{
  background:transparent;        /* so #site-bg can sit behind everything */
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ════════════════ the painting, behind every page ════════════════
   One fixed canvas at the very back of the stack. Same image, same
   mosaic, same cursor trail on all eight pages — only the tint
   changes from wing to wing. */
#site-bg{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;z-index:-2;
  pointer-events:none;
}
/* static fallback when WebGL or float textures are unavailable */
body.no-bg-gl::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:#12100c url(hero.webp) center 44% / cover no-repeat;
  filter:saturate(.72) brightness(.42);
}

/* Panels that carry reading matter get a scrim, so type never has to
   fight the image. The hero deliberately does not — that is where the
   painting is meant to be seen. */
.veiled{position:relative;isolation:isolate}
.veiled::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(6,6,11,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.veiled.soft::before{background:rgba(6,6,11,.66)}

::selection{background:color-mix(in srgb,var(--a2) 40%,transparent)}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1c1b2b;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#2a2840}

:focus-visible{outline:2px solid var(--a1);outline-offset:3px;border-radius:4px}

/* ---------- skip link ---------- */
.skip{
  position:fixed;top:-100px;left:12px;z-index:200;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  background:var(--card);color:var(--ink);
  border:1px solid var(--a1);border-radius:8px;padding:.7rem 1.1rem;
  text-decoration:none;transition:top .2s;
}
.skip:focus{top:12px}

/* ════════════════ chrome ════════════════ */

#progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:80;
  background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));
  will-change:width;
}

/* ---------- brand mark, top-left ---------- */
.brand{
  position:fixed;top:20px;left:var(--pad);z-index:70;
  display:flex;align-items:baseline;gap:.5rem;
  text-decoration:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  color:#d6cdba;transition:color .3s;
  text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.7);
}
.brand:hover{color:#fff}
.brand b{color:#f3ead6;font-weight:600;letter-spacing:.14em}
.brand:hover b{color:#fff}
@media(max-width:760px){.brand{font-size:.58rem;top:12px}}

/* ---------- dot nav, right edge ---------- */
#dotnav{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:14px;
}
#dotnav a{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.22);
  display:block;position:relative;
  transition:background .3s,box-shadow .3s,transform .3s;
}
#dotnav a:hover{background:rgba(255,255,255,.55)}
#dotnav a.on{
  background:var(--a1);
  box-shadow:0 0 12px color-mix(in srgb,var(--a1) 80%,transparent);
  transform:scale(1.3);
}
#dotnav a span{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--dim);
  background:rgba(8,8,15,.85);border:1px solid var(--line);border-radius:6px;
  padding:.25rem .55rem;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
#dotnav a:hover span,#dotnav a:focus-visible span{opacity:1}
@media(max-width:760px){#dotnav{display:none}}

/* ---------- utility rail, bottom-right (⌘K + mute) ---------- */
.rail{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;gap:.5rem}
.rail button{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  color:var(--faint);
  background:rgba(8,8,15,.62);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:999px;
  padding:.5rem .8rem;cursor:pointer;
  transition:color .25s,border-color .25s;
}
.rail button:hover{color:var(--ink);border-color:var(--line-lit)}
.rail button.on{color:var(--a1);border-color:color-mix(in srgb,var(--a1) 50%,transparent)}
@media(max-width:760px){
  .rail{right:10px;bottom:10px}
  .rail button{font-size:.56rem;padding:.45rem .65rem}
}

/* ---------- ⌘K command palette ---------- */
#palette{
  position:fixed;inset:0;z-index:150;
  display:none;place-items:start center;
  padding:12vh 1.2rem 1.2rem;
  background:rgba(4,4,9,.72);backdrop-filter:blur(8px);
}
#palette.open{display:grid}
.pal-box{
  width:min(620px,100%);
  background:rgba(12,12,20,.96);
  border:1px solid var(--line-lit);border-radius:14px;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.9);
  overflow:hidden;
}
.pal-box input{
  width:100%;border:0;outline:0;background:transparent;color:var(--ink);
  font-family:var(--mono);font-size:.92rem;letter-spacing:.04em;
  padding:1.1rem 1.2rem;border-bottom:1px solid var(--line);
}
.pal-box input::placeholder{color:var(--faint)}
.pal-list{max-height:52vh;overflow-y:auto;padding:.4rem}
.pal-list a{
  display:flex;align-items:baseline;gap:.7rem;
  padding:.6rem .8rem;border-radius:8px;
  text-decoration:none;color:var(--dim);
  font-size:.86rem;line-height:1.4;
}
.pal-list a .wing{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  color:var(--faint);flex:0 0 auto;min-width:7.5em;
}
.pal-list a em{font-style:normal;color:var(--ink)}
.pal-list a.sel,.pal-list a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.pal-list a.sel .wing{color:var(--a1)}
.pal-empty{
  padding:1.4rem 1.2rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;color:var(--faint);
}
.pal-foot{
  border-top:1px solid var(--line);padding:.6rem 1.2rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--faint);
  display:flex;gap:1.2rem;flex-wrap:wrap;
}

/* ════════════════ panels ════════════════ */

.panel{min-height:100svh;position:relative;scroll-snap-align:start}

/* ---------- wing hero ---------- */
.hero{display:grid;place-items:center;overflow:hidden}
.hero>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 120%,rgba(6,6,11,.85),transparent 55%);
}
.hero-inner{
  position:relative;z-index:2;text-align:center;padding:2rem;
  opacity:0;transform:translateY(26px);
  transition:opacity 1.1s var(--ease) .15s,transform 1.1s var(--ease) .15s;
}
.hero-inner.in{opacity:1;transform:none}

.kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.42em;color:var(--dim);
  text-transform:uppercase;margin-bottom:1.6rem;
}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3rem,11vw,8rem);
  letter-spacing:.1em;line-height:1;margin-left:.1em;
  background:linear-gradient(100deg,#eceaf6 15%,var(--a2) 40%,var(--a1) 60%,#eceaf6 85%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 9s linear infinite;
}
@keyframes shimmer{from{background-position:0% 0}to{background-position:220% 0}}

.sub{max-width:52ch;margin:1.8rem auto 0;color:var(--dim);line-height:1.8;font-size:1.02rem}
.credit{margin-top:2.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--faint)}
.credit b{color:var(--dim);font-weight:600}

.scrollcue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.4em;color:var(--faint);
}
.scrollcue i{
  width:1px;height:44px;background:linear-gradient(var(--faint),transparent);
  display:block;position:relative;overflow:hidden;
}
.scrollcue i::after{
  content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;
  background:var(--a1);animation:drip 2.2s ease-in-out infinite;
}
@keyframes drip{to{top:110%}}

/* ════════════════ exhibits ════════════════ */

.exhibit{
  display:grid;grid-template-columns:minmax(280px,410px) 1fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
  padding:4.5rem var(--pad);
  max-width:1750px;margin:0 auto;min-height:100svh;
}
.exhibit.flip .caption{order:2}

.caption{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.caption.in{opacity:1;transform:none}

.exno{font-family:var(--mono);font-size:.66rem;letter-spacing:.44em;color:var(--a1);margin-bottom:1.1rem}
.exhibit:nth-of-type(odd) .exno{color:var(--a2)}

.caption h2{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.06;
  margin-bottom:1.3rem;letter-spacing:.01em;
}
.blurb{color:var(--dim);line-height:1.8;font-size:1rem;max-width:46ch}
.blurb+.blurb{margin-top:1rem}
.blurb em{color:var(--ink);font-style:normal;font-weight:600}
.blurb .eq{font-family:var(--mono);font-size:.92em;color:var(--a1);white-space:nowrap}

.hint{
  margin-top:1.5rem;font-family:var(--mono);font-size:.68rem;line-height:1.9;
  letter-spacing:.1em;color:var(--faint);
}
.hint b{color:var(--dim);font-weight:600}

/* ---------- the stage ---------- */
.stage{
  position:relative;height:min(80vh,920px);
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card);
  box-shadow:0 40px 90px -35px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset;
}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage canvas.grab{cursor:grab}
.stage canvas.grabbing{cursor:grabbing}
.stage canvas.draw{cursor:crosshair;touch-action:none}
.stage canvas.pick{cursor:pointer}

.readout{
  position:absolute;top:12px;right:14px;z-index:5;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--dim);
  background:rgba(8,8,15,.6);backdrop-filter:blur(10px);
  border:1px solid var(--line);padding:.38rem .75rem;border-radius:999px;
  pointer-events:none;
}
.readout b{color:var(--a1);font-weight:600}

/* top-left cluster: capture / share */
.tools{
  position:absolute;top:12px;left:14px;z-index:5;
  display:flex;gap:.4rem;opacity:0;transition:opacity .3s;
}
.stage:hover .tools,.stage:focus-within .tools{opacity:1}
.tools button{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--faint);
  background:rgba(8,8,15,.6);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;
  padding:.34rem .7rem;cursor:pointer;transition:color .25s,border-color .25s;
}
.tools button:hover{color:var(--ink);border-color:var(--line-lit)}

.controls{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;justify-content:center;
  background:rgba(8,8,15,.62);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;
  max-width:calc(100% - 22px);
}
.btn{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;
  padding:.42rem .85rem;cursor:pointer;transition:all .25s;white-space:nowrap;
}
.btn:hover{color:var(--ink);border-color:var(--line-lit);background:rgba(255,255,255,.09)}
.btn.on{
  color:var(--a1);
  border-color:color-mix(in srgb,var(--a1) 50%,transparent);
  background:color-mix(in srgb,var(--a1) 8%,transparent);
}
.ctl{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  color:var(--faint);white-space:nowrap;
}
.ctl output{color:var(--a1);min-width:2.4em;text-align:right}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:86px;height:3px;background:rgba(255,255,255,.16);
  border-radius:2px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;background:var(--a1);
  box-shadow:0 0 8px color-mix(in srgb,var(--a1) 60%,transparent);
}
input[type=range]::-moz-range-thumb{
  width:12px;height:12px;border:none;border-radius:50%;background:var(--a1);
  box-shadow:0 0 8px color-mix(in srgb,var(--a1) 60%,transparent);
}
input[type=range]:focus-visible{outline:2px solid var(--a1);outline-offset:4px}

select{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  color:var(--dim);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:999px;
  padding:.36rem .6rem;cursor:pointer;
}

.engage{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  cursor:pointer;transition:opacity .45s;background:rgba(6,6,11,.25);
}
.engage.off{opacity:0;pointer-events:none}
.engage span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;color:var(--ink);
  background:rgba(8,8,15,.72);backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--a2) 45%,transparent);
  border-radius:999px;padding:.8rem 1.6rem;
  animation:pulse 2.6s ease-in-out infinite;text-align:center;
}
@keyframes pulse{50%{box-shadow:0 0 26px color-mix(in srgb,var(--a2) 45%,transparent)}}

.stagemsg{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;color:var(--faint);
  transition:opacity .4s;text-align:center;padding:1rem;
}
.stagemsg.off{opacity:0}

@media(max-width:960px){
  .exhibit{grid-template-columns:1fr;gap:1.6rem;padding-top:4.5rem;padding-bottom:3rem}
  .exhibit.flip .caption{order:0}
  .stage{height:62vh}
  .blurb{max-width:none}
  .tools{opacity:1}
}

/* Added at STEP 4. An exhibit runs to five or six controls, and on a narrow
   screen a wrapping pill grows upward until it has eaten the stage it is
   supposed to be operating. So on small screens it stops wrapping and starts
   scrolling: one row, always, swipeable. Verified against index.html, which
   has no .controls at all — this reaches the wings only. */
@media(max-width:640px){
  .controls{
    flex-wrap:nowrap;justify-content:flex-start;
    max-width:calc(100% - 16px);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .controls::-webkit-scrollbar{height:0;display:none}
  .controls>*{flex:0 0 auto}
  input[type=range]{width:66px}
}

/* ════════════════ colophon ════════════════ */

.colophon{display:grid;place-items:center;text-align:center;min-height:85svh;padding:5rem 1.4rem}
.colophon-inner{
  max-width:62ch;opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.colophon-inner.in{opacity:1;transform:none}
.colophon h2{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.6rem;
}
.colophon p{color:var(--dim);line-height:1.9}
.colophon p+p{margin-top:1rem}

.stats{
  display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:2.6rem 0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--faint);
}
.stats span{border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem}
.stats b{color:var(--a1);font-weight:600}

.sig{margin-top:2.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--faint)}
.sig b{color:var(--dim)}

.pill{
  display:inline-block;margin-top:2.4rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;color:var(--dim);
  text-decoration:none;border:1px solid var(--line);border-radius:999px;
  padding:.7rem 1.5rem;transition:all .3s;
}
.pill:hover{color:var(--a1);border-color:color-mix(in srgb,var(--a1) 50%,transparent)}

/* ---------- neighbouring-wing footer nav ---------- */
.wingnav{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
.wingnav a{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--faint);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:.6rem 1.1rem;
  transition:all .3s;
}
.wingnav a:hover{color:var(--ink);border-color:var(--line-lit)}

/* ════════════════ reduced motion ════════════════ */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  h1{animation:none;background-position:40% 0}
  .caption,.hero-inner,.colophon-inner{opacity:1;transform:none}
  .scrollcue i::after{display:none}
}

/* ════════════════ print ════════════════ */

@media print{
  #progress,#dotnav,.rail,.brand,.scrollcue,.controls,.tools,.engage,#palette{display:none!important}
  body{background:#fff;color:#000}
  .panel{min-height:0;page-break-inside:avoid}
}

/* ════════════════ the thin footer ════════════════
   Replaces the old colophon panel: one line of attribution, nothing more. */
.thinfoot{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  gap:1.2rem;flex-wrap:wrap;
  padding:1.6rem var(--pad) 2.1rem;
  border-top:1px solid var(--line);
  background:rgba(6,6,11,.86);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  color:var(--faint);
}
.thinfoot b{color:var(--dim);font-weight:600}
.thinfoot a{color:var(--faint);text-decoration:none;transition:color .3s}
.thinfoot a:hover{color:var(--a1)}
@media(max-width:640px){ .thinfoot{font-size:.55rem} }