/* ─────────────────────────────────────────────────────────────
   towa ✶ 永遠 — porcelain dreamcore ( links )
   palette sampled directly from towa1.mp4
   ───────────────────────────────────────────────────────────── */

:root {
  --fog:        #848C97;   /* video average — page background        */
  --fog-light:  #999FA6;   /* fog highlight above the head           */
  --fog-deep:   #66707F;   /* corner shadow of the footage           */
  --fog-deeper: #57616F;   /* vignette extreme                       */
  --porcelain:  #F0ECE4;   /* the doll's skin                        */
  --ink:        #272C36;   /* deep slate — body text                 */
  --night:      #1D2027;   /* the beatstars card — ink gone deeper   */
  --eye:        #454360;   /* the doll's iris — accent               */
  --lip:        #AFC2D6;   /* pale mouth blue — soft accent          */

  --font-dot:  "DotGothic16", "MS Gothic", monospace;
  --font-mono: "Xanh Mono", "Courier New", monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--fog);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9' stroke='%23272C36' stroke-width='4.5'/%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9' stroke='%23F0ECE4' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 12 12, auto;
}

a, button {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg stroke-linecap='round' transform='rotate(22 14 14)'%3E%3Cpath d='M14 3v22M4.5 8.5l19 11M23.5 8.5l-19 11' stroke='%23272C36' stroke-width='5'/%3E%3Cpath d='M14 3v22M4.5 8.5l19 11M23.5 8.5l-19 11' stroke='%23F0ECE4' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E") 14 14, pointer;
}

::selection {
  background: var(--eye);
  color: var(--porcelain);
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--porcelain);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── film grain ──────────────────────────────────────────── */

.grain {
  position: fixed;
  inset: -60%;
  z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: overlay;
  animation: grain-jitter 0.9s steps(6) infinite;
}

@keyframes grain-jitter {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1.4%); }
  40%  { transform: translate(1.2%, -1.8%); }
  60%  { transform: translate(-1.6%, -0.8%); }
  80%  { transform: translate(1.8%, 1.2%); }
  100% { transform: translate(0, 0); }
}

/* ── header / logo ───────────────────────────────────────── */

.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.4rem 1.7rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.logo-text {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
}

.logo-mark {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-family: var(--font-dot);
  font-size: 1.45rem;
  letter-spacing: 0.14em;
  color: var(--porcelain);
  text-shadow: 0 1px 10px rgba(87, 97, 111, 0.65);
  animation: flicker 9s infinite;
}

.logo-mark b { font-weight: normal; }

.logo-sub {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--porcelain);
  opacity: 0.72;
  font-family: var(--font-dot);
}

.logo-img {
  height: 2.5rem;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 8px rgba(87, 97, 111, 0.6));
}

@keyframes flicker {
  0%, 91%, 100% { opacity: 1; }
  91.6%         { opacity: 0.35; }
  92.2%         { opacity: 1; }
  93.4%         { opacity: 0.55; }
  94%           { opacity: 1; }
}

.site-nav {
  display: flex;
  gap: 1.4rem;
}

.site-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--porcelain);
  opacity: 0.85;
  text-shadow: 0 1px 8px rgba(87, 97, 111, 0.6);
  transition: opacity 0.25s, transform 0.25s;
}

.site-nav a:hover {
  opacity: 1;
  transform: rotate(-3deg) translateY(-2px);
}

/* ── hero: the fog ───────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
}

/* edges of the footage dissolve into the page */
.hero-fog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(101, 113, 132, 0.35), transparent 16%),
    radial-gradient(120% 95% at 50% 44%, transparent 42%, var(--fog) 97%),
    radial-gradient(150% 130% at 50% 50%, transparent 62%, rgba(87, 97, 111, 0.4) 100%);
}

.corner {
  position: absolute;
  bottom: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--porcelain);
  opacity: 0.85;
  text-shadow: 0 1px 8px rgba(70, 80, 95, 0.6);
  z-index: 2;
}

.corner-bl { left: 1.7rem; }
.corner-br { right: 1.7rem; transition: letter-spacing 0.3s; }
.corner-br:hover { letter-spacing: 0.3em; }

/* the producer tag, ghosting on the track */
.corner-cc {
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-dot);
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  white-space: nowrap;
  animation: flicker 7s -2.8s infinite;
  transition: letter-spacing 0.3s;
}

.corner-cc:hover { letter-spacing: 0.42em; }

.corner .arrow {
  display: inline-block;
  animation: bob 2.4s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ── marquee ────────────────────────────────────────────── */

.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(87, 97, 111, 0.55);
  border-bottom: 1px solid rgba(87, 97, 111, 0.55);
  background: rgba(102, 112, 127, 0.14);
}

.marquee-track {
  display: flex;
  width: max-content;
  font-family: var(--font-dot);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--porcelain);
  opacity: 0.85;
  padding: 0.75em 0;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── the select menu ✶ a boot screen down the left side ──────
   the doll stays clear. a porcelain bar — an arrow pointing
   at her — glides to whatever you touch; the line under the
   list decodes out of katakana static when the pick changes. */

/* a soft wash on the left so the menu reads over the footage */
.hero-fog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(87, 97, 111, 0.5), rgba(87, 97, 111, 0.22) 34%, transparent 52%);
}

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* a game dialog window: glass, a double rule, pixel corners */
.menu {
  --row: clamp(3.7rem, 8vh, 4.7rem);
  --pad: 1.1rem;
  position: absolute;
  z-index: 5;
  left: clamp(1.7rem, 6vw, 7rem);
  top: 50%;
  translate: 0 -50%;
  width: min(31rem, 38vw);
  padding: 0.85rem var(--pad) 1rem;
  color: var(--porcelain);
  background: linear-gradient(160deg, rgba(39, 44, 54, 0.26), rgba(39, 44, 54, 0.12));
  border: 1px solid rgba(240, 236, 228, 0.6);
  box-shadow:
    0 0 0 3px rgba(39, 44, 54, 0.14),
    0 0 0 4px rgba(240, 236, 228, 0.28),
    0 26px 60px rgba(39, 44, 54, 0.28);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  animation: window-in 0.7s var(--ease-out) 1.4s backwards;
}

@keyframes window-in {
  from { opacity: 0; scale: 0.97; filter: blur(6px); }
}

/* pixel corner studs */
.menu::before {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  --c: var(--porcelain);
  background:
    linear-gradient(var(--c) 0 0) 0 0 / 5px 5px,
    linear-gradient(var(--c) 0 0) 100% 0 / 5px 5px,
    linear-gradient(var(--c) 0 0) 0 100% / 5px 5px,
    linear-gradient(var(--c) 0 0) 100% 100% / 5px 5px;
  background-repeat: no-repeat;
}


.menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0 0.2rem 0.75rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px dashed rgba(240, 236, 228, 0.4);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-shadow: 0 1px 8px rgba(70, 80, 95, 0.6);
}

.menu-title { font-family: var(--font-dot); letter-spacing: 0.3em; opacity: 0.85; }

.menu-count { font-family: var(--font-dot); letter-spacing: 0.12em; opacity: 0.8; }
.menu-count b { font-weight: normal; color: var(--porcelain); }

.menu-cursor {
  margin-left: 0.35rem;
  font-size: 0.8rem;
  animation: blink-cursor 1.05s steps(1) infinite;
}

@keyframes blink-cursor {
  50% { opacity: 0; }
}

.menu-list {
  position: relative;
  list-style: none;
}

.menu-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: var(--row);
  border-bottom: 1px solid rgba(240, 236, 228, 0.18);
  animation: menu-in 0.8s var(--ease-out) var(--in, 1.6s) backwards;
}

/* (the bar + star are the list's first two children) */
.menu-item:nth-of-type(3) { --in: 1.6s; }
.menu-item:nth-of-type(4) { --in: 1.67s; }
.menu-item:nth-of-type(5) { --in: 1.74s; }
.menu-item:nth-of-type(6) { --in: 1.81s; }
.menu-item:last-child { border-bottom: none; }

@keyframes menu-in {
  from { opacity: 0; translate: -18px 0; filter: blur(6px); }
}

.menu-link {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 1.5rem 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.5rem 0 0.9rem;
  transition: color 0.2s ease;
}

.menu-num {
  font-family: var(--font-dot);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.menu-name {
  font-family: var(--font-dot);
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(70, 80, 95, 0.45);
  transition: text-shadow 0.2s ease;
}

/* name + (phones only) its subtitle, stacked */
.menu-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.menu-sub {
  display: none;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-head .menu-clock { display: none; }

.menu-meta {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  opacity: 0.85;
  white-space: nowrap;
}

.menu-arrow {
  display: inline-block;
  transition: translate 0.25s var(--ease-out);
}

/* the item slot, and its two-frame sprite */
.menu-slot {
  display: grid;
  place-items: center;
  width: 2.35rem;
  aspect-ratio: 1;
  border: 1px dashed rgba(240, 236, 228, 0.5);
  background: rgba(39, 44, 54, 0.16);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.menu-slot svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(240, 236, 228, 0.35));
}

.menu-slot .f-b { opacity: 0; }

.menu-item.is-active .menu-slot {
  border: 1px solid rgba(39, 44, 54, 0.55);
  background: rgba(39, 44, 54, 0.07);
}
.menu-item.is-active .menu-slot svg { filter: none; }
.menu-item.is-active .f-a { animation: sprite-a 0.9s steps(1) infinite; }
.menu-item.is-active .f-b { animation: sprite-b 0.9s steps(1) infinite; }

@keyframes sprite-a { 50% { opacity: 0; } }
@keyframes sprite-b { 0% { opacity: 0; } 50% { opacity: 1; } }

/* the picked row flips to ink and gives a little shudder */
.menu-item.is-active .menu-link,
.menu-item.is-active .menu-copy { color: var(--ink); }
.menu-item.is-active .menu-name { text-shadow: none; }
.menu-item.is-active .menu-arrow { translate: 3px -3px; }
.menu-item.is-picked .menu-name { animation: pick 0.24s steps(2); }

@keyframes pick {
  0%   { translate: 0 0; }
  33%  { translate: 2px -1px; }
  66%  { translate: -2px 1px; }
  100% { translate: 0 0; }
}

/* the bar: porcelain, notched into an arrow at the doll */
.menu-bar {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: calc(-1 * var(--pad) - 18px);
  height: var(--row);
  background: var(--porcelain);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  box-shadow: 0 10px 30px rgba(39, 44, 54, 0.3);
  transition: transform 0.28s var(--ease-out), height 0.28s var(--ease-out);
  animation: fade-in 0.6s var(--ease-out) 1.85s backwards;
}

@keyframes fade-in {
  from { opacity: 0; }
}

/* the selector star rides beside the bar, outside its clip */
.menu-star {
  position: absolute;
  z-index: 2;
  top: 0;
  left: calc(-1 * var(--pad) + 0.1rem);
  display: grid;
  place-items: center;
  width: 0.9rem;
  height: var(--row);
  font-family: var(--font-dot);
  font-size: 0.8rem;
  color: var(--porcelain);
  text-shadow: 0 0 10px rgba(240, 236, 228, 0.8);
  pointer-events: none;
  transition: transform 0.28s var(--ease-out);
  animation: fade-in 0.6s var(--ease-out) 1.85s backwards;
}

.menu-star::before {
  content: "✶";
  animation: tick-spin 6s steps(12) infinite;
}

/* the copy chip on the mail row */
.menu-copy {
  position: relative;
  z-index: 1;
  flex: none;
  margin-right: 1.5rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-dot);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--porcelain);
  background: transparent;
  border: 1px dashed currentColor;
  transition: color 0.2s ease, background 0.2s ease, scale 0.16s var(--ease-out);
}

.menu-copy:active { scale: 0.95; }

.menu-copy.is-copied {
  border-style: solid;
  background: var(--ink);
  color: var(--porcelain) !important;
}

.menu-desc {
  position: relative;
  min-height: 2.6rem;
  margin-top: 0.9rem;
  padding: 0.65rem 2rem 0.65rem 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border: 1px dashed rgba(240, 236, 228, 0.4);
  background: rgba(39, 44, 54, 0.16);
  text-shadow: 0 1px 8px rgba(70, 80, 95, 0.7);
  animation: menu-in 0.8s var(--ease-out) 1.9s backwards;
}

.menu-desc::after {
  content: "\25BE";
  position: absolute;
  right: 0.75rem;
  bottom: 0.45rem;
  font-size: 0.7rem;
  animation: bob 1.2s ease-in-out infinite;
}

.menu-desc-mark { color: var(--lip); }

.menu-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
  padding-left: 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  opacity: 0.8;
  text-shadow: 0 1px 8px rgba(70, 80, 95, 0.7);
  animation: menu-in 0.8s var(--ease-out) 2s backwards;
}

.menu-sound {
  padding: 0.25rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--porcelain);
  background: transparent;
  border: 1px dashed rgba(240, 236, 228, 0.55);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.menu-sound[aria-pressed="true"] {
  color: var(--ink);
  background: var(--porcelain);
  border-style: solid;
}

@media (hover: hover) {
  .menu-sound:hover { border-color: var(--porcelain); }
  .menu-item.is-active .menu-copy:hover { background: var(--ink); color: var(--porcelain); }
}

.menu-link:focus-visible,
.menu-copy:focus-visible { outline: none; }
.menu-item:has(.menu-link:focus-visible) .menu-name { text-decoration: underline dashed 1px; text-underline-offset: 0.2em; }

@keyframes tick-spin {
  to { transform: rotate(360deg); }
}


/* ── the crt layer ✶ scanlines, glare, tilt ─────────────────
   the window is a little screen floating in the fog: it leans
   toward the cursor (js lerps it) and a glare slides across
   the glass. */

.menu-scan,
.menu-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* fine scanlines + one slow rolling band */
.menu-scan {
  background:
    linear-gradient(to bottom, transparent 0%, rgba(240, 236, 228, 0.06) 48%, rgba(240, 236, 228, 0.1) 50%, rgba(240, 236, 228, 0.06) 52%, transparent 100%) 0 -120% / 100% 40% no-repeat,
    repeating-linear-gradient(to bottom, rgba(29, 32, 39, 0.1) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  animation: roll 7s linear infinite;
}

@keyframes roll {
  to { background-position: 0 220%, 0 0; }
}

/* glare — js moves it with the cursor */
.menu-sheen {
  opacity: 0;
  background: radial-gradient(circle at 30% 20%, rgba(240, 236, 228, 0.16), transparent 45%);
  transition: opacity 0.4s ease;
}

.menu.is-lit .menu-sheen { opacity: 1; }

/* the window leans toward the cursor — a separate transform
   from the centring translate + the entrance scale */
.menu { transform-style: flat; will-change: transform; }

/* confirm: the bar blinks twice, like a menu accepting a pick */
.menu-bar.is-confirm { animation: confirm 0.34s steps(1) 2; }

@keyframes confirm {
  50% { opacity: 0.2; }
}

/* the toronto clock, colon blinking with the seconds */
.menu-clock { opacity: 0.85; white-space: nowrap; }
.menu-clock b { font-weight: normal; font-family: var(--font-dot); letter-spacing: 0.08em; }
.menu-clock i { font-style: normal; animation: blink-cursor 2s steps(1) infinite; }

/* the boot log types into the dialog box */
.menu-desc.is-booting .menu-desc-text::after {
  content: "\258C";
  margin-left: 0.15em;
  animation: blink-cursor 0.6s steps(1) infinite;
}

/* ── footer ──────────────────────────────────────────────── */

.footer {
  max-width: 68rem;
  margin-inline: auto;
  padding: clamp(4rem, 10vw, 6.5rem) 1.7rem 2rem;
  overflow: hidden;
  text-align: center;
}

.footer-sigil {
  height: 3.4rem;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(87, 97, 111, 0.5));
  animation: tick-spin 26s steps(12) infinite;
}

@keyframes tick-spin {
  to { transform: rotate(360deg); }
}

.footer-giant {
  font-family: var(--font-dot);
  font-size: clamp(5rem, 21vw, 17rem);
  line-height: 0.85;
  letter-spacing: 0.03em;
  color: var(--porcelain);
  text-shadow: 0.04em 0.04em 0 rgba(87, 97, 111, 0.4);
  margin-top: 2rem;
  user-select: none;
}

.footer-fine {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  opacity: 0.7;
  margin-top: 2.2rem;
  padding-bottom: 1rem;
}

/* ✶ the giant wordmark: letters flinch when touched */
.footer-giant span {
  display: inline-block;
  transition: transform 0.22s ease-out;
}

@media (hover: hover) {
  .footer-giant span:hover {
    transform: translateY(-0.08em) rotate(-4deg);
  }
}

/* ── scroll reveal (JS only) ─────────────────────────────── */

.js .reveal {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(26px);
  transition: opacity 1s var(--ease-out),
              filter 1s var(--ease-out),
              transform 1s var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

/* the giant wordmark rises furthest and last */
.js .footer .footer-giant {
  transform: translateY(70px) scale(1.04);
  filter: blur(12px);
  transition-duration: 1.4s;
}
.js .footer .footer-giant.is-visible { transform: none; filter: none; }

/* ── the veil: 永遠 surfaces out of the fog, then lifts ───── */

.intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--fog);
  pointer-events: none;
  animation: intro-lift 0.7s ease 1.15s forwards;
}

.intro-mark {
  font-family: var(--font-dot);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  letter-spacing: 0.18em;
  color: var(--porcelain);
  text-shadow: 0 0 26px rgba(240, 236, 228, 0.55);
  opacity: 0;
  animation: intro-mark 1s ease 0.1s forwards;
}

@keyframes intro-lift {
  to { opacity: 0; visibility: hidden; }
}

@keyframes intro-mark {
  from { opacity: 0; filter: blur(16px); transform: scale(1.08); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* ── responsive ──────────────────────────────────────────── */

@media (max-width: 760px) {
  .site-head {
    padding: 1.1rem 1.2rem;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .site-nav { gap: 1rem; }
  .site-nav a { font-size: 0.72rem; }
}

/* the address line lives under the phone dock only */
.menu-mailline { display: none; }

/* phones + portrait tablets: the doll takes the screen and the
   links become a small dock in the fog — beatstars as one porcelain
   key, youtube / instagram / mail as glass tiles, the address and a
   copy chip underneath. the window chrome and the hover-only parts
   (dialog box, counter, bar, sound, keys) step out. */
@media (max-width: 860px), (max-aspect-ratio: 4/5) {
  .hero-video {
    height: 80%;
    object-position: 58% 38%;
  }

  .hero-fog {
    background:
      linear-gradient(to bottom, rgba(101, 113, 132, 0.35), transparent 14%),
      linear-gradient(to bottom, transparent 56%, var(--fog) 80%),
      radial-gradient(130% 75% at 50% 32%, transparent 50%, var(--fog) 100%);
  }
  .hero-fog::after { display: none; }

  .corner { display: none; }

  .menu {
    top: auto;
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 1rem;
    right: 1rem;
    translate: none;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .menu::before,
  .menu-scan,
  .menu-sheen,
  .menu-title,
  .menu-count,
  .menu-desc,
  .menu-hint,
  .menu-bar,
  .menu-star,
  .menu-num,
  .menu-meta,
  .menu-sub,
  .menu-item .menu-copy { display: none; }

  /* a whisper of a caption above the dock */
  .menu-head {
    margin-bottom: 0.55rem;
    padding: 0 0.15rem;
    border: 0;
    font-size: 0.56rem;
    letter-spacing: 0.22em;
  }
  .menu-head .menu-clock { display: inline; }

  .menu-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  /* glass tiles with pixel studs */
  .menu .menu-item {
    height: 4.5rem;
    border: 1px solid rgba(240, 236, 228, 0.42);
    background: rgba(39, 44, 54, 0.2);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transition: scale 0.16s var(--ease-out);
  }

  .menu .menu-item:active { scale: 0.97; }

  .menu .menu-item::before {
    content: "";
    position: absolute;
    inset: -3px;
    pointer-events: none;
    background:
      linear-gradient(var(--porcelain) 0 0) 0 0 / 3px 3px,
      linear-gradient(var(--porcelain) 0 0) 100% 0 / 3px 3px,
      linear-gradient(var(--porcelain) 0 0) 0 100% / 3px 3px,
      linear-gradient(var(--porcelain) 0 0) 100% 100% / 3px 3px;
    background-repeat: no-repeat;
  }

  .menu .menu-item .menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.4rem;
    color: var(--porcelain);
    text-align: center;
  }

  .menu .menu-item .menu-slot {
    width: auto;
    aspect-ratio: auto;
    border: 0;
    background: none;
  }
  .menu .menu-item .menu-slot svg { width: 1.4rem; height: 1.4rem; }

  .menu-label { align-items: center; gap: 0.2rem; }

  .menu .menu-item .menu-name {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 8px rgba(70, 80, 95, 0.6);
  }

  /* beatstars: the one porcelain key, notched toward the doll */
  .menu .menu-feature {
    grid-column: 1 / -1;
    height: 3.8rem;
    border: 0;
    background: var(--porcelain);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  }
  .menu .menu-feature::before { display: none; }

  .menu .menu-feature .menu-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0 1.9rem 0 1rem;
    color: var(--ink);
    text-align: left;
  }
  .menu .menu-feature .menu-slot svg { width: 1.5rem; height: 1.5rem; }
  .menu .menu-feature .menu-label { align-items: flex-start; }
  .menu .menu-feature .menu-name { font-size: 1.35rem; text-shadow: none; }
  .menu .menu-feature .menu-sub { display: block; font-size: 0.58rem; }
  .menu .menu-feature .menu-meta { display: block; margin-left: auto; font-size: 0.62rem; }

  /* the address + copy, under the dock */
  .menu-mailline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.6rem;
    padding: 0 0.15rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--porcelain);
    text-shadow: 0 1px 8px rgba(70, 80, 95, 0.7);
  }
  .menu-mailline .menu-copy { margin: 0; padding: 0.25rem 0.65rem; font-size: 0.58rem; }
}

@media (max-height: 560px) and (min-width: 861px) {
  .menu { --row: 3.3rem; }
  .menu-name { font-size: 1.7rem; }
  .menu-hint { display: none; }
}

/* ── reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .grain,
  .logo-mark,
  .corner-cc,
  .marquee-track,
  .corner .arrow,
  .menu-head,
  .menu-cursor,
  .menu-item,
  .menu-bar,
  .menu-star,
  .menu-star::before,
  .menu-desc,
  .menu-hint,
  .menu-item.is-picked .menu-name,
  .menu-scan,
  .menu-bar.is-confirm,
  .menu-clock i,
  .menu-desc.is-booting .menu-desc-text::after,
  .menu,
  .menu-desc::after,
  .menu-item.is-active .f-a,
  .menu-item.is-active .f-b,
  .footer-sigil {
    animation: none;
  }

  .menu-bar,
  .menu-star { transition: none; }

  .intro { display: none; }

  .footer-giant span { transition: none; }

  .js .reveal,
  .js .footer .footer-giant {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}