/* ─────────────────────────────────────────────
   ARCUHN — tokens
   ───────────────────────────────────────────── */

/* Self-hosted fonts (SIL Open Font License 1.1, see assets/fonts/README.txt):
   Inter (variable, 300-600) and Anonymous Pro 400/700, Latin + Latin Extended.
   font-display: block + a preload of the three Latin files on every page: text waits for the
   real font instead of flashing in a system font first (the fonts are small and self-hosted). */
@font-face { font-family: 'Anonymous Pro'; font-style: normal; font-weight: 400; font-display: block; src: url(assets/fonts/anonymous-pro-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Anonymous Pro'; font-style: normal; font-weight: 400; font-display: block; src: url(assets/fonts/anonymous-pro-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anonymous Pro'; font-style: normal; font-weight: 700; font-display: block; src: url(assets/fonts/anonymous-pro-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Anonymous Pro'; font-style: normal; font-weight: 700; font-display: block; src: url(assets/fonts/anonymous-pro-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: block; src: url(assets/fonts/inter-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: block; src: url(assets/fonts/inter-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --charcoal: #2E2E2E;
  --oat: #DED8CC;
  --oxblood: #4A0404;
  --clay: #A95F49;
  --slate: #8095AA;
  --moss: #455A38;
  --void: #000;

  --oat-70: rgb(222 216 204 / .7);
  --oat-45: rgb(222 216 204 / .45);
  --oat-20: rgb(222 216 204 / .2);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Anonymous Pro", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--oat);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; }
/* form controls don't inherit the page font by default (they fell back to Arial) */
button, input, select, textarea { font: inherit; }

:focus-visible { outline: 2px solid var(--oat); outline-offset: 3px; }

/* keyboard users can jump straight past the header */
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--oat);
  color: #151112;
  font: 700 12px var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ─────────────────────────────────────────────
   Header
   ───────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 3vw, 32px) var(--gutter);
  pointer-events: none;
  text-shadow: 0 1px 14px rgb(0 0 0 / .45);   /* stays legible over light scenes */
  will-change: transform;                      /* stays put while scrolling */
  transition: background-color .4s, padding .4s var(--ease-out), box-shadow .4s;
}
/* once the page scrolls, the header gets its own backdrop so it never sits on top of text
   (main.js sets .is-scrolled; every page can tune --header-bg; not on the home journey) */
body:not(.page-home) .site-header.is-scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  background: var(--header-bg, rgb(20 17 18 / .92));
  box-shadow: 0 1px 0 var(--header-line, rgb(222 216 204 / .08));
  text-shadow: none;
}
body:has(.menu-toggle[aria-expanded="true"]) .site-header { background: transparent; box-shadow: none; }
.brand__mark { filter: drop-shadow(0 1px 8px rgb(0 0 0 / .4)); }
.site-header > * { pointer-events: auto; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 18px; height: 30px; fill: var(--oat); }
.brand__name { font-weight: 500; font-size: 13px; letter-spacing: .32em; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  background: none;
  border: 0;
  color: var(--oat);
  font: 400 15px/1 var(--font-mono);
  letter-spacing: .08em;
  cursor: pointer;
}
.menu-toggle__icon { display: grid; gap: 6px; width: 26px; }
.menu-toggle__icon i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform .5s var(--ease-out), width .5s var(--ease-out);
}
.menu-toggle__icon i:last-child { width: 60%; justify-self: end; }
.menu-toggle:hover .menu-toggle__icon i:last-child { width: 100%; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { width: 100%; transform: translateY(-3.5px) rotate(-45deg); }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--gutter) 48px;
  background: var(--charcoal);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { opacity: 1; }
.site-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: .12em 0;
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 300;
  letter-spacing: -.03em;
  transition: color .3s, padding-left .5s var(--ease-out);
}
.site-menu__list a:hover { color: var(--clay); padding-left: .25em; }
.site-menu__list .idx { font: 400 14px var(--font-mono); color: var(--oat-45); letter-spacing: .08em; }
.site-menu__foot { margin: auto 0 0; font: 400 14px var(--font-mono); color: var(--oat-45); }

/* ─────────────────────────────────────────────
   Intro — hall, artifact and the dolly into the portal
   ───────────────────────────────────────────── */
.intro {
  position: relative;
  height: 240vh;          /* scroll distance of the whole journey: through the portal within a scroll or two */
  background: var(--void);
}

.intro__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: 1400px;
  /* own compositor layer: the browser keeps it pinned while scrolling instead of
     waiting for a repaint (that lag showed as a black band sliding in) */
  will-change: transform;
  transform: translateZ(0);
}

/* The scene lives in the 1672 × 941 space of the source renders and is
   cover-fitted to the viewport (with some overscan for the parallax). */
.scene {
  --ox: 50.8%;            /* centre of the portal's black hole */
  --oy: 43.8%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(108vw, 108svh * 1.7769);
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, calc(-50% + var(--pty, 0vh))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  opacity: 0;
  transition: opacity 2s var(--ease-out);
}
.scene.is-ready { opacity: 1; }
/* soften the scene's own edges into the void (visible on tall screens) */
.scene::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 80%, #000);
  opacity: var(--edge, 1);  /* released as the camera moves in */
}

@media (max-aspect-ratio: 1/1) {
  .scene { width: max(108vw, 100svh * 1.15); }
}

.layer {
  position: absolute;
  inset: 0;
  transform-origin: var(--ox) var(--oy);
  will-change: transform, opacity;
}
.layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.masked {
  -webkit-mask-image: var(--mask);
          mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.layer--sky img { left: -10%; top: -30.4%; width: 120%; height: 120%; }
.layer--artifact img { left: 9.5%; top: -.96%; width: 80.6%; height: 80.6%; }
.layer--stones-back { filter: brightness(.8); }
/* nearest layer: bigger, softer, pushed to the edges — reads as foreground */
.layer--stones-front img { transform: scale(1.45); filter: blur(1.5px) brightness(.7); }

/* Vignette + top/bottom fade so the render sits in the void */
.scene-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 80% at 50% 45%, transparent 45%, rgb(0 0 0 / .75) 100%),
    linear-gradient(to bottom, rgb(0 0 0 / .55), transparent 18%, transparent 78%, rgb(0 0 0 / .8));
  opacity: var(--shade, 1);
}

/* Darkness that closes in around the portal as we travel through it */
.tunnel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 45%),
    rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0) var(--tr, 10%), #000 calc(var(--tr, 10%) + 40vmax));
  opacity: var(--dark, 0);
}

.warp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.intro__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 48px);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 14px;
  font: 400 13px var(--font-mono);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--oat-70);
  opacity: var(--cue, 1);
  transition: opacity .3s;
}
.intro__cue .scroll-cue__line { height: 48px; }


.smear {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 36px;
  background: var(--oat-20);
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oat);
  animation: drip 2.2s var(--ease-out) infinite;
}

/* ─────────────────────────────────────────────
   The world on the other side of the portal: the observation chamber
   (the layers of the old Explore ARCUHN page, assets/arcuhn/)
   ───────────────────────────────────────────── */
.world {
  --w: 0;                 /* UI reveal 0 → 1 */
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  visibility: hidden;
  /* the chamber's own air */
  background: #171113 url("assets/arcuhn/background.svg") center / cover no-repeat;
  pointer-events: none;
  /* opens from the portal's centre */
  -webkit-mask-image: radial-gradient(circle at var(--hx, 50%) var(--hy, 45%), #000 var(--rv, 0vmax), transparent calc(var(--rv, 0vmax) + 12vmax));
          mask-image: radial-gradient(circle at var(--hx, 50%) var(--hy, 45%), #000 var(--rv, 0vmax), transparent calc(var(--rv, 0vmax) + 12vmax));
}
.world.is-visible { visibility: visible; }
.world.is-open { -webkit-mask-image: none; mask-image: none; }
.world.is-active { pointer-events: auto; }

/* the chamber: a 1920 × 1080 stage, cover-fitted */
.world__scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 100svh * 1.7778);
  aspect-ratio: 16 / 9;
  translate: -50% -50%;
  /* the drop: far below → swoop → settle (driven by JS) */
  transform: perspective(1600px) translateY(var(--wty, 0vh)) rotateX(var(--wrx, 0deg)) rotateZ(var(--wrz, 0deg)) scale(var(--ws, 1));
  transform-origin: 50% 55%;
}
@media (max-aspect-ratio: 4/5) { .world__scene { width: 190vw; } }
.ch-stage { position: absolute; inset: 0; transform: translateY(-5%) scale(.86); }
.ch-l {
  position: absolute;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
  opacity: 0;          /* JS brings each element into being */
}
.ch-l--walls-l { left: 3.65%;  top: 22.7%; width: 31.25%; height: 48.1%; }
.ch-l--walls-r { left: 68.75%; top: 23.1%; width: 26.04%; height: 46.3%; }
.ch-l--fog     { left: 26.04%; top: 51.9%; width: 48.44%; height: 27.8%;
                 -webkit-mask-image: linear-gradient(to bottom, transparent 22%, #000 40%);
                         mask-image: linear-gradient(to bottom, transparent 22%, #000 40%); }
.ch-l--panels  { left: 69.79%; top: 20.4%; width: 21.88%; height: 33.3%; }
.ch-l--orbits  { left: 31.25%; top: 23.6%; width: 39.58%; height: 43.5%; }
.ch-l--rocks   { left: 24.74%; top: 18.5%; width: 21.88%; height: 41.7%; }
.ch-l--crt     { left: 34.64%; top: 20.8%; width: 31.77%; height: 46.3%; }
.ch-l--podium  { left: 26.56%; top: 64.8%; width: 46.88%; height: 27.8%; }
.ch-l--floor   { left: 20.31%; top: 74.5%; width: 59.38%; height: 24.1%; }

/* suspended signals around the core, drawn once the chamber has come into being */
.ch-diag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch-diag text { font-family: var(--font-mono); }
.ch-diag__lens text { font-size: 17px; letter-spacing: 5px; fill: #d3aa76; }
.ch-diag__lens path { stroke: #cf9b6b; stroke-width: 1; fill: none; opacity: .55; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2s var(--ease-out) 1.2s; }
.ch-diag__lens circle { fill: #dfb47f; opacity: .85; }
.ch-diag__sub text { font-size: 11px; letter-spacing: 2px; fill: #bd9571; opacity: .55; }
.ch-diag g { opacity: 0; transition: opacity 1.2s var(--ease-out) 1.1s; }
.ch-stage.is-born .ch-diag g { opacity: 1; }
.ch-stage.is-born .ch-diag__lens path { stroke-dashoffset: 0; }
@media (max-width: 760px) { .ch-diag__lens { display: none; } }
@media (max-height: 760px) { .ch-diag .d-low { display: none; } }

/* "welcome", directly above "choose where to begin" — carved into the chamber's light */
.world-title {
  margin: 0 0 4px;
  font-weight: inherit;
  white-space: nowrap;
}
.world-title__word {
  display: block;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .02em;
  /* carved: a shadowed upper cut, a lit lower lip, a faint warm glow from the beam */
  color: rgb(236 226 210 / .86);
  text-shadow:
    0 -1px 0 rgb(0 0 0 / .55),
    0 1.5px 0 rgb(255 236 210 / .2),
    0 0 .6em rgb(255 214 160 / .22);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* the chamber's vignette + fine grain; darker at the floor so the bars read */
.world__haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 45%, rgb(15 8 9 / .7) 100%),
    linear-gradient(to bottom, rgb(20 8 10 / .45), transparent 20%, transparent 50%, rgb(18 9 11 / .88));
}
.world__haze::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.world__dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--dim, 1);
  pointer-events: none;
}

/* coming out of the tunnel: brass light spilling round the edge of the opening */
.exit-rim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--rim, 0);
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 45%),
    transparent calc(var(--rv, 0vmax) - 3vmax),
    rgb(232 196 150 / .5) calc(var(--rv, 0vmax) + 1vmax),
    rgb(170 70 60 / .2) calc(var(--rv, 0vmax) + 8vmax),
    transparent calc(var(--rv, 0vmax) + 20vmax));
}

/* ── UI: floating glass bars ── */
.world__ui {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 7vh, 80px);
  translate: -50% 0;
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  display: grid;
  justify-items: center;
  gap: 18px;
}
.world__prompt {
  margin: 0;
  font: 400 14px/1.4 var(--font-mono);
  letter-spacing: .06em;
  color: rgb(222 216 204 / .85);
  text-shadow: 0 1px 10px rgb(0 0 0 / .7);
}
.caret { color: var(--clay); margin-right: .4em; }
.cursor {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .3em;
  vertical-align: -.18em;
  background: var(--oat-70);
  animation: blink 1.1s steps(1) infinite;
}

.glass-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}
@media (min-width: 760px) {
  .glass-bars { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.glass-bars li:nth-child(2) .glass { animation-delay: -3.1s; }

.glass {
  --mx: 30%;
  --my: 0%;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  overflow: hidden;
  color: var(--oat);
  background:
    linear-gradient(135deg, rgb(255 240 220 / .18), rgb(222 216 204 / .05) 55%, rgb(214 170 110 / .1)),
    rgb(30 18 10 / .28);
  border: 1px solid rgb(222 216 204 / .26);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    inset 0 -1px 0 rgb(0 0 0 / .25),
    0 24px 60px -12px rgb(12 0 0 / .65);
  -webkit-backdrop-filter: blur(18px) saturate(1.4) brightness(1.08);
          backdrop-filter: blur(18px) saturate(1.4) brightness(1.08);
  animation: glass-float 7s ease-in-out infinite;
  transition: border-color .4s, box-shadow .5s var(--ease-out), background-color .4s;
}
/* moving specular highlight (follows the pointer) */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgb(255 250 240 / .22), transparent 60%);
  opacity: .6;
  transition: opacity .4s;
  pointer-events: none;
}
/* a slow sheen sweeping across the glass */
.glass::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .10), transparent);
  transform: skewX(-18deg);
  animation: sheen 9s ease-in-out infinite;
  pointer-events: none;
}
.glass:hover, .glass:focus-visible {
  border-color: rgb(222 216 204 / .5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    inset 0 -1px 0 rgb(0 0 0 / .25),
    0 30px 70px -10px rgb(12 0 0 / .75),
    0 0 40px -8px rgb(214 170 110 / .35);
}
.glass:hover::before, .glass:focus-visible::before { opacity: 1; }
.glass:focus-visible { outline: none; }

.glass__idx { font: 400 10px var(--font-mono); color: var(--oat-45); letter-spacing: .1em; }
.glass__label { font-size: clamp(.9rem, 1.1vw, 1rem); letter-spacing: -.005em; }
.glass__arrow {
  font-family: var(--font-mono);
  font-size: .95rem;
  opacity: .6;
  transition: transform .6s var(--ease-out), opacity .4s;
}
.glass:hover .glass__arrow, .glass:focus-visible .glass__arrow { transform: rotate(-45deg); opacity: 1; }

.world__contact {
  font: 400 13px var(--font-mono);
  letter-spacing: .06em;
  color: var(--oat-70);
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.world__contact:hover { color: var(--oat); border-color: var(--oat-45); }

/* staggered reveal driven by --w */
.w-rise {
  --l: clamp(0, calc((var(--w) - var(--i) * .08) * 2.6), 1);
  opacity: var(--l);
  translate: 0 calc((1 - var(--l)) * 22px);
}
.world-title .w-rise { translate: none; }   /* carved in stone: it only lights up */

@media (max-width: 520px) {
  .brand__name { font-size: 12px; letter-spacing: .26em; }
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes drip {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@keyframes glass-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-.25deg); }
}
@keyframes sheen {
  0%, 60% { left: -60%; }
  100%    { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .scroll-cue__line::after, .glass, .glass::after { animation: none; }
  .scene { transition: none; }
  .ch-diag g, .ch-diag__lens path { transition: none; }
}

/* ─────────────── FOOTER (shared by the inner pages) ─────────────── */
.site-footer {
  display: grid;
  gap: 36px 48px;
  padding: 64px var(--gutter) 40px;
  border-top: 1px solid rgb(211 170 118 / .16);
  background: #171113;
  font-size: 14px;
  color: rgb(222 216 204 / .7);
}
@media (min-width: 860px) { .site-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__name { margin: 0; font-weight: 500; letter-spacing: .32em; color: var(--oat); }
.site-footer__tag { margin: 10px 0 0; color: rgb(222 216 204 / .55); }
.site-footer__col { display: grid; align-content: start; gap: 10px; }
.site-footer__h { margin: 0 0 4px; font: 400 10px var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: rgb(211 170 118 / .6); }
.site-footer a:hover { color: var(--oat); }
.site-footer em { font-style: normal; margin-left: .5em; color: rgb(222 216 204 / .4); }
.site-footer__legal { grid-column: 1 / -1; margin: 12px 0 0; font: 400 11px var(--font-mono); letter-spacing: .12em; color: rgb(222 216 204 / .4); }
/* bottom bar: copyright + legal pages */
.site-footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-top: 12px; padding-top: 20px; border-top: 1px solid rgb(211 170 118 / .1); }
.site-footer__bottom .site-footer__legal { margin: 0; }
.site-footer__legalnav { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 11px var(--font-mono); letter-spacing: .12em; }
.site-footer__legalnav a { color: rgb(222 216 204 / .55); }
.site-footer__legalnav a[aria-current="page"] { color: rgb(211 170 118 / .85); }