/* ==========================================================================
   Efsus Games - site styles (template pass)

   Loaded after vendor/scrollcraft.css. That file is the scroll mechanism and
   is never edited; everything visual lives here and is driven by the tokens
   in :root below.

   THREE THEMES
   studio  (this file)            bone on black, Roman capitals, sharp corners
   egg     (css/theme-egg.css)    Chicks on the Menu!: soft, round, sunny, bouncy
   disco   (css/theme-disco.css)  Under the Disco Lights: 80's neon on indigo
   A section opts in with data-theme="egg" or data-theme="disco". Anything
   without one is studio. The bar and the rail follow the section under them.

   Studio shape rule: every corner is sharp (radius 0).
   Studio accent rule: one accent (yolk), for the primary action and the
   current timeline marker only.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../assets/fonts/cinzel-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: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../assets/fonts/cinzel-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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/instrument-sans-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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/instrument-sans-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;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Bone and ink come from the studio mark. Yolk comes from the hay in the
     Project Egg key art and the bar lamps in Under the Disco Lights. */
  --sc-canvas:     #0b0a08;
  --sc-surface:    #17140f;
  --sc-ink:        #dad9cd;
  --sc-ink-soft:   #a3a195;
  --sc-accent:     #f2c53d;
  --sc-accent-ink: #1c1404;
  --sc-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --sc-font-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-r-sm: 0px;

  --hair:        color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --hair-strong: color-mix(in oklab, var(--sc-ink) 30%, transparent);

  /* The rail sits on the right edge and owns a gutter there. Content never
     enters it. --edge is the ordinary page margin. */
  --rail-w: 5.5rem;
  --edge:   clamp(1.5rem, 5vw, 5.5rem);
  --pad-l:  var(--edge);
  --pad-r:  clamp(11rem, 14vw, 15rem);
  --bar-h:  4.5rem;

  /* Section breath, taken from the reference's 220px rhythm and made fluid. */
  --rhythm: clamp(6rem, 17vh, 13.75rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 1100px) {
  :root { --pad-r: calc(var(--rail-w) + 0.5rem); }
}
@media (max-width: 860px) {
  :root { --rail-w: 2.875rem; --edge: 1.25rem; --pad-r: 3.125rem; --bar-h: 3.75rem; }
}

html { scroll-padding-top: 0; }
/* When a touch browser stretches the page past its top (elastic overscroll,
   pull-to-refresh), the gap shows the page's own background. Over the
   Chicks on the Menu! hero that is the average green of the treetops along the art's
   top edge, so the stretch reads as more forest instead of a black bar.
   Everywhere else the dark studio ground shows, which matches the page there. */
html[data-chrome-bar="egg"] { background: #7c885c; }
body { color-scheme: dark; }
h1, h2, h3, p, figure { margin: 0; }

/* ----------------------------------------------------------------- type -- */
/* Cinzel has no lowercase, so every display line is inscriptional capitals,
   the same lettering that rings the studio mark. Tracking is positive and
   small: capitals want air, not tightening. */
.d-xl, .d-lg, .d-md {
  font-family: var(--sc-font-display);
  text-wrap: balance;
  color: var(--sc-ink);
}
.d-xl { font-weight: 900; font-size: clamp(2.9rem, 9.2vw, 9.5rem); line-height: 0.92; letter-spacing: 0.005em; }
.d-lg { font-weight: 700; font-size: clamp(1.9rem, 1.1rem + 3.3vw, 4.5rem); line-height: 1.02; letter-spacing: 0.01em; }
.d-md { font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem); line-height: 1.12; letter-spacing: 0.03em; }

.lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.45; color: var(--sc-ink); max-width: 34ch; text-wrap: pretty; }
.copy { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.7; color: var(--sc-ink-soft); max-width: 56ch; text-wrap: pretty; }
.note { font-size: 0.875rem; line-height: 1.5; color: var(--sc-ink-soft); }
.kicker { font-size: 0.9375rem; font-weight: 500; color: var(--sc-accent); }

.wrap { padding-left: var(--pad-l); padding-right: var(--pad-r); }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; text-decoration: none; transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.5rem;
  font-family: var(--sc-font-text); font-size: 0.9375rem; font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 0;
  transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.btn:active { translate: 0 1px; }
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--sc-accent) 82%, white); }
.btn--line { border-color: var(--hair-strong); color: var(--sc-ink); background: color-mix(in oklab, var(--sc-canvas) 40%, transparent); }
.btn--line:hover { border-color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 0.28em; transition: text-decoration-color 200ms; }
.link:hover { text-decoration-color: var(--sc-accent); }

/* ------------------------------------------------------------ top bar --
   The bar and the rail are "chrome": they sit over every section, so they
   take the skin of whichever theme is underneath them. js/site.js sets
   data-chrome-bar and data-chrome-rail on <html> to "studio", "egg" or
   "disco" as the page scrolls. Each skin is a handful of --c-* values. */
.bar {
  --c-ink: #dad9cd;            /* text and mark */
  --c-scrim: var(--sc-canvas); /* soft fall-off behind the bar */
  --c-scrim-o: 1;
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--edge);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar::before {
  content: ""; position: absolute; inset: 0 0 -1.75rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--c-scrim) 94%, transparent) 0%,
    color-mix(in oklab, var(--c-scrim) 78%, transparent) 55%,
    transparent 100%);
  opacity: var(--c-scrim-o); transition: opacity 420ms var(--ease-out);
}
.bar__brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; height: 100%; }
.bar__mark {
  display: block; height: 2.6rem; aspect-ratio: 2328 / 2831;
  background: var(--c-ink);
  -webkit-mask: url("../assets/img/logo-white.png") center / contain no-repeat;
          mask: url("../assets/img/logo-white.png") center / contain no-repeat;
  transition: background-color 420ms var(--ease-out);
}
.bar__name { font-family: var(--sc-font-display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.14em; color: var(--c-ink); transition: color 420ms var(--ease-out); }
.bar__nav { display: flex; align-items: center; gap: 1.75rem; }
.bar__link { font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--c-ink); transition: color 420ms var(--ease-out); }
.bar__link:hover { color: var(--sc-accent); }
.bar .btn {
  min-height: 2.5rem; padding: 0 1.1rem; color: var(--c-ink);
  border-color: color-mix(in oklab, var(--c-ink) 32%, transparent);
  transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), color 320ms var(--ease-out),
              border-radius 420ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
/* Small screens: the bar is only the studio mark. No name, no button (the
   same button is in the hero and in the contact section). */
@media (max-width: 860px) {
  .bar__name, .bar__nav { display: none; }
  .bar__mark { height: 2.5rem; }
  .bar__brand { min-width: 2.75rem; }
}

/* bar skins */
html[data-chrome-bar="egg"] .bar { --c-ink: #4a2e16; --c-scrim: var(--egg-ground, #f2f6e5); }
html[data-chrome-bar="egg"] .bar__link:hover { color: #c2540c; }
html[data-chrome-bar="egg"] .bar .btn {
  border-radius: 999px; border: 2px solid #4a2e16; background: #ffc530; color: #4a2e16;
  box-shadow: 0 3px 0 #4a2e16; font-family: "Fredoka", var(--sc-font-text); font-size: 1rem;
}
/* In this skin the bar is not a panel. Over the game art it is fully clear,
   and the mark, the name and the link are cream with a brown edge and a soft
   shadow, the same way the game logo is lettered. Over the plain grounds they
   are dark, and the bar fades softly into the ground's own colour so that
   headings scrolling underneath do not run through the name.
   js/site.js sets data-bar-tone from the data-bar-tone of what is under the bar. */
html[data-chrome-bar="egg"][data-bar-tone="soil"] .bar { --c-ink: var(--egg-soil-ink, #4a2e16); --c-scrim: var(--egg-soil, #ffdb80); }
html[data-chrome-bar="egg"][data-bar-tone="art"] .bar { --c-ink: #fffdf6; --c-scrim-o: 0; }
html[data-chrome-bar="egg"][data-bar-tone="art"] :is(.bar__brand, .bar__link) { filter: drop-shadow(0 1.5px 0 #4a2e16) drop-shadow(0 3px 6px rgb(40 24 6 / 0.6)); }
html[data-chrome-bar="egg"][data-bar-tone="art"] .bar__link:hover { color: #ffd35c; }
html[data-chrome-bar="egg"] .bar .btn:hover { background: #ffd35c; }
html[data-chrome-bar="disco"] .bar { --c-ink: #f7f3ff; --c-scrim: #0d0221; }
html[data-chrome-bar="disco"] .bar__link:hover { color: #2de2e6; }
html[data-chrome-bar="disco"] .bar .btn {
  border-radius: 999px; border-color: #ff2e97; background: rgb(13 2 33 / 0.5);
  box-shadow: 0 0 0.7rem rgb(255 46 151 / 0.65), inset 0 0 0.5rem rgb(255 46 151 / 0.35);
}
html[data-chrome-bar="disco"] .bar .btn:hover { background: #ff2e97; color: #0d0221; }

/* =============================================================== THE RAIL ==
   The scroll timeline. Fixed to the right edge for the whole page.

   The line fills as the page is read, and each marker is stamped as its
   section passes and stays stamped. Markers sit at their section's true position in the document, so
   the gaps between them show how long each part is.

   MARKER ICONS
   A section picks its icon with data-rail-glyph="name" in the HTML. Each name
   maps to one SVG below (they live in assets/icons). The icon is used as a
   mask, so its colour comes from the marker's state, not from the file.
   To add one: drop an SVG in assets/icons and add a line to the list.
   A section with no data-rail-glyph gets the plain diamond.

   SKINS
   Like the bar, the rail re-skins per theme through --c-* values (studio is
   the default; the egg and disco skins are at the end of this block).
   ========================================================================== */
.rail__glyph[data-glyph="chick"]      { --glyph: url("../assets/icons/chick.webp"); }
.rail__glyph[data-glyph="hen"]        { --glyph: url("../assets/icons/hen.webp"); }
.rail__glyph[data-glyph="fox"]        { --glyph: url("../assets/icons/fox.webp"); }
.rail__glyph[data-glyph="column"]     { --glyph: url("../assets/icons/column.svg"); }
.rail__glyph[data-glyph="disco-ball"] { --glyph: url("../assets/icons/disco-ball.webp"); }
.rail__glyph[data-glyph="envelope"]   { --glyph: url("../assets/icons/envelope.webp"); }
.rail__glyph[data-glyph="gamepad"]    { --glyph: url("../assets/icons/gamepad.svg"); }
.rail__glyph[data-glyph="scroll"]     { --glyph: url("../assets/icons/scroll.svg"); }
.rail__glyph[data-glyph="friends"]    { --glyph: url("../assets/icons/friends.svg"); }
.rail__glyph[data-glyph="image"]      { --glyph: url("../assets/icons/image.svg"); }
.rail__glyph[data-glyph="press"]      { --glyph: url("../assets/icons/press.svg"); }

.rail {
  --node: 2.125rem;   /* side of the plate behind each icon */
  --icon: 1.3125rem;

  --c-ink: #dad9cd;
  --c-accent: #f2c53d;
  --c-plate: var(--sc-canvas);          /* plate fill: ahead and passed */
  --c-plate-on: var(--sc-canvas);       /* plate fill: current */
  --c-icon: color-mix(in oklab, var(--c-ink) 55%, transparent);
  --c-icon-past: var(--c-ink);
  --c-icon-on: var(--c-accent);
  --c-edge: color-mix(in oklab, var(--c-ink) 30%, transparent);
  --c-edge-past: color-mix(in oklab, var(--c-ink) 70%, transparent);
  --c-edge-on: var(--c-accent);
  --c-edge-w: 1px;
  --c-round: 0%;                        /* 0 = diamond, 50% = circle */
  --c-glow: 0 0 0 0 transparent;
  --c-track: color-mix(in oklab, var(--c-ink) 26%, transparent);
  --c-track-w: 1px;
  --c-track-ring: 0 0 0 0 transparent;
  --c-fill: var(--c-ink);

  position: fixed; right: 0; top: 50%; z-index: 60;
  width: var(--rail-w); height: min(58vh, 34rem);
  translate: 0 -50%;
  pointer-events: none;
}
.rail__track, .rail__fill {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: var(--c-track-w); margin-left: calc(var(--c-track-w) / -2); border-radius: 999px;
  transition: width 420ms var(--ease-out), margin-left 420ms var(--ease-out), background-color 420ms var(--ease-out);
}
.rail__track { background: var(--c-track); box-shadow: var(--c-track-ring); }
.rail__fill  { background: var(--c-fill); transform-origin: 50% 0; transform: scaleY(0); will-change: transform; }
.rail__marks { list-style: none; margin: 0; padding: 0; }
.rail__mark {
  position: absolute; left: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  display: grid; place-items: center;
  pointer-events: auto; text-decoration: none;
  color: var(--c-icon);
  transition: color 320ms var(--ease-out);
}
.rail__mark:focus-visible { outline-offset: -4px; }

/* The plate interrupts the line and keeps the icon readable over game art.
   In the studio skin it is the diamond from the studio mark. */
.rail__mark::before {
  content: ""; grid-area: 1 / 1; width: var(--node); height: var(--node); rotate: 45deg;
  border-radius: var(--c-round);
  background: var(--c-plate);
  border: var(--c-edge-w) solid var(--c-edge);
  transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out),
              border-radius 520ms var(--ease-out), box-shadow 320ms var(--ease-out), scale 480ms var(--ease-out);
}
.rail__glyph {
  grid-area: 1 / 1; position: relative;
  width: var(--icon); height: var(--icon);
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
          mask: var(--glyph) center / contain no-repeat;
  transition: scale 480ms var(--ease-out);
}
/* fallback marker for sections with no icon */
.rail__glyph[data-glyph="diamond"] { width: 0.5rem; height: 0.5rem; rotate: 45deg; -webkit-mask: none; mask: none; }

/* three states: ahead, passed, current */
.rail__mark.is-past   { color: var(--c-icon-past); }
.rail__mark.is-past::before   { border-color: var(--c-edge-past); }
.rail__mark.is-active { color: var(--c-icon-on); }
.rail__mark.is-active::before { background: var(--c-plate-on); border-color: var(--c-edge-on); box-shadow: var(--c-glow); scale: 1.14; }
.rail__mark.is-active .rail__glyph { scale: 1.1; }
.rail__mark:hover { color: var(--c-icon-on); }
.rail__mark:hover::before { border-color: var(--c-edge-on); }

.rail__label {
  position: absolute; right: calc(50% + var(--node) * 0.71 + 0.6rem); top: 50%;
  width: max-content; white-space: nowrap; padding: 0.3rem 0 0.3rem 0.5rem;   /* always one line */
  font-size: 0.8125rem; font-weight: 500; line-height: 1.25; text-align: right; color: var(--c-ink);
  opacity: 0; translate: 6px -50%;
  transition: opacity 320ms var(--ease-out), translate 480ms var(--ease-out), color 420ms var(--ease-out);
  pointer-events: none;
}
.rail__mark.is-active .rail__label,
.rail__mark:hover .rail__label,
.rail__mark:focus-visible .rail__label { opacity: 1; translate: 0 -50%; }

/* Below 1100px the gutter is too narrow to hold a label permanently, so the
   label becomes a chip that shows for a moment when the section changes. */
@media (max-width: 1100px) {
  .rail__label {
    padding: 0.4rem 0.65rem; text-align: left;
    background: var(--c-plate); border: 1px solid var(--c-edge);
  }
  .rail__mark.is-active .rail__label { opacity: 0; translate: 6px -50%; }
  .rail__mark.is-active.is-fresh .rail__label,
  .rail__mark:hover .rail__label,
  .rail__mark:focus-visible .rail__label { opacity: 1; translate: 0 -50%; }
}
@media (max-width: 860px) {
  .rail { --node: 1.625rem; --icon: 1rem; height: min(46vh, 22rem); }
}

/* rail skin: egg. Round white plates, a chunky track, a yolk plate for "here". */
html[data-chrome-rail="egg"] .rail {
  --c-ink: #4a2e16; --c-accent: #ef6f1c;
  --c-plate: #fffdf6; --c-plate-on: #ffc530;
  --c-icon: rgb(74 46 22 / 0.5); --c-icon-past: #4a2e16; --c-icon-on: #4a2e16;
  --c-edge: rgb(74 46 22 / 0.3); --c-edge-past: #4a2e16; --c-edge-on: #4a2e16;
  --c-edge-w: 2px; --c-round: 50%;
  --c-track: #fffdf6; --c-track-w: 6px; --c-track-ring: 0 0 0 1.5px rgb(74 46 22 / 0.3);
  --c-fill: #ef6f1c;
}
html[data-chrome-rail="egg"] .rail__label {
  padding: 0.3rem 0.7rem; border-radius: 999px; background: #fffdf6; border: 0;
  box-shadow: 0 3px 0 rgb(107 74 48 / 0.2);
  font-family: "Fredoka", var(--sc-font-text); font-weight: 600; font-size: 0.875rem;
}
/* Over the game art a permanent label would sit on a character's face, so in
   this skin the label is a chip that shows when the section changes or on hover. */
html[data-chrome-rail="egg"] .rail__mark.is-active .rail__label { opacity: 0; translate: 6px -50%; }
html[data-chrome-rail="egg"] .rail__mark.is-active.is-fresh .rail__label,
html[data-chrome-rail="egg"] .rail__mark:hover .rail__label,
html[data-chrome-rail="egg"] .rail__mark:focus-visible .rail__label { opacity: 1; translate: 0 -50%; }
/* rail skin: disco. Neon on indigo. */
html[data-chrome-rail="disco"] .rail {
  --c-ink: #f7f3ff; --c-accent: #ff2e97;
  --c-plate: #0d0221; --c-plate-on: #0d0221;
  --c-glow: 0 0 0.75rem rgb(255 46 151 / 0.85), inset 0 0 0.4rem rgb(255 46 151 / 0.5);
  --c-fill: #2de2e6;
}
html[data-chrome-rail="disco"] .rail__label { text-shadow: 0 0 0.6rem rgb(45 226 230 / 0.8); }

/* The two game sections have their own stylesheets:
   css/theme-egg.css   (Chicks on the Menu!: hero scene, chase animation, team cards)
   css/theme-disco.css (Under the Disco Lights: neon, mirror-ball light)
   Everything in this file is the classic studio theme plus shared pieces. */

/* ================================================================ STUDIO == */
.studio { padding-block: var(--rhythm); }
/* The mark and the copy are one group, centred on the screen. The grid takes
   the rail's gutter on both sides so its middle is the screen's middle, and
   each column is only as wide as what is in it. */
.studio__grid {
  display: grid; grid-template-columns: auto minmax(0, max-content);
  gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center; justify-content: center;
  padding-left: var(--pad-r);
}
.studio__mark img { width: clamp(13rem, 21vw, 24rem); height: auto; }
.studio__copy h2 span { display: block; }
.studio__copy > * + * { margin-top: 1.5rem; }
.studio__copy .lede { max-width: 38ch; color: var(--sc-ink-soft); }
.studio__copy .btn { margin-top: 2.25rem; }
@media (max-width: 860px) {
  .studio__grid { grid-template-columns: 1fr; gap: 2.5rem; padding-left: var(--pad-l); }
  .studio__mark img { width: min(58vw, 15rem); }
}

/* ============================================================= ALL GAMES ==
   One card per game, and each card wears its own game's theme: the
   <article> carries data-theme="egg" or data-theme="disco", so it picks up
   that theme's tokens and buttons from css/theme-*.css. The section itself
   stays studio, lit from behind in each game's colour, and its top picks up
   the disco indigo of the act above so the two run together.

   The picture is a small 3D stage: .game__frame leans toward the mouse,
   the art slides the other way inside .game__window, and a light follows
   the pointer. js/site.js (gameTilt) writes --px/--py/--rx/--ry.
   ========================================================================== */
.shelf {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(var(--rhythm) * 0.8) var(--rhythm);
  background:
    radial-gradient(42% 46% at 26% 64%, rgb(255 197 48 / 0.17), transparent 72%),
    radial-gradient(42% 46% at 72% 64%, rgb(255 46 151 / 0.2), transparent 72%),
    radial-gradient(30% 30% at 82% 40%, rgb(45 226 230 / 0.09), transparent 72%),
    linear-gradient(to bottom, #0d0221 0%, #120625 14%, var(--sc-canvas) 46%);
}
/* the studio diamond, faint, as a floor pattern */
.shelf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background:
    linear-gradient(45deg, transparent 48.6%, var(--hair) 49%, var(--hair) 51%, transparent 51.4%) 0 0 / 3.25rem 3.25rem,
    linear-gradient(-45deg, transparent 48.6%, var(--hair) 49%, var(--hair) 51%, transparent 51.4%) 0 0 / 3.25rem 3.25rem;
  -webkit-mask: radial-gradient(70% 60% at 50% 62%, #000, transparent 80%);
          mask: radial-gradient(70% 60% at 50% 62%, #000, transparent 80%);
}
.shelf__head { text-align: center; padding-left: calc(var(--pad-r) - var(--pad-l)); }
.shelf__head > * + * { margin-top: 0.9rem; }
.shelf__head .copy { margin-inline: auto; }
.shelf__kicker {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sc-accent);
}
.shelf__kicker::before, .shelf__kicker::after { content: ""; width: 0.45rem; height: 0.45rem; rotate: 45deg; background: currentColor; }
.shelf__grid {
  margin-top: clamp(2.75rem, 7vh, 4.5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3.4vw, 3.5rem);
  align-items: stretch;
}

/* ---------------------------------------------------------- the card -- */
.game {
  display: flex; flex-direction: column;
  padding: clamp(1rem, 1.6vw, 1.5rem);
  transition: translate 420ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 420ms var(--ease-out);
}
.game:hover { translate: 0 -6px; }
.game__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(0.25rem, 1vw, 0.75rem) 0.5rem; }
.game__body .copy { margin-top: 0.9rem; max-width: 46ch; }
.game__body .actions { margin-top: auto; padding-top: 1.6rem; gap: 0.9rem 1rem; }

/* ------------------------------------------------- the picture stage -- */
.game__media { display: block; position: relative; perspective: 900px; }
.game__frame {
  display: block;
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 700ms var(--ease-out);
}
.game__media.is-tilting .game__frame { transition-duration: 140ms; }
.game__window { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--sc-surface); }
.game__art {
  display: block; width: 100%; height: 100%; object-fit: cover;
  scale: 1.1;
  translate: calc((var(--px, 0.5) - 0.5) * -5%) calc((var(--py, 0.5) - 0.5) * -5%);
  transition: translate 700ms var(--ease-out), scale 700ms var(--ease-out);
}
.game__media.is-tilting .game__art { scale: 1.14; transition-duration: 160ms, 700ms; }
.game__glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.game__media.is-tilting .game__glare { opacity: 1; }

/* the status pops off the picture, closer to you than the art */
.game__status {
  position: absolute; z-index: 2; top: -0.9rem;
  display: inline-flex; align-items: center; gap: 0.55rem;
  transform: translateZ(60px);
  white-space: nowrap;
}
.game__status.game__status--inline { position: relative; top: auto; left: auto; right: auto; transform: none; }
.game__dot { position: relative; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }
.game__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; }

/* ------------------------------------------------ egg: a sunny crate -- */
.game.game--egg {   /* .game raises it over [data-theme="egg"], which sets its own ground */
  background: linear-gradient(170deg, #fff6c9, #ffe28a);
  border: 3px solid var(--egg-ink); border-radius: 2rem;
  box-shadow: 0 10px 0 var(--egg-ink), 0 30px 50px rgb(0 0 0 / 0.45);
}
.game--egg:hover { box-shadow: 0 16px 0 var(--egg-ink), 0 40px 60px rgb(0 0 0 / 0.5); }
[data-theme="egg"] .game__window { border: 3px solid var(--egg-ink); border-radius: 1.35rem; }
[data-theme="egg"] .game__glare {
  mix-blend-mode: soft-light;
  background: radial-gradient(circle at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.5) * 100%), rgb(255 248 200 / 0.95), rgb(255 230 140 / 0.35) 28%, transparent 58%);
}
[data-theme="egg"] .game__status {
  left: -0.75rem; rotate: -5deg;
  padding: 0.55rem 1.05rem 0.55rem 0.85rem;
  background: var(--egg-fox); color: #fffdf6;
  border: 3px solid var(--egg-ink); border-radius: 999px;
  box-shadow: 0 5px 0 var(--egg-ink);
  font-family: "Fredoka", var(--sc-font-text); font-weight: 700; font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  letter-spacing: 0.06em; text-transform: uppercase;
}
[data-theme="egg"] .game__dot { background: #ffe14d; box-shadow: 0 0 0 2px var(--egg-ink); }
/* the chick has hopped up onto the corner of the picture */
.game__peek {
  position: absolute; z-index: 3; right: -1.1rem; bottom: -1.6rem; width: 24%; height: auto;
  transform: translateZ(90px); transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 0 rgb(74 46 22 / 0.25));
  transition: rotate 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.game--egg:hover .game__peek { rotate: -8deg; }
.game--egg .game__title { margin-top: 0.25rem; }
.game--egg .game__title img { display: block; width: min(11.35rem, 48%); height: auto; margin-inline: auto; }
.game--egg .game__body .copy { color: var(--egg-ink); }

/* -------------------------------------------- disco: a neon light box -- */
.game--disco {
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(122 43 245 / 0.35), transparent 60%),
    linear-gradient(180deg, #1a0b3a, #0d0221);
  border: 2px solid var(--disco-pink); border-radius: 1.5rem;
  box-shadow: 0 0 1.1rem rgb(255 46 151 / 0.55), inset 0 0 1.2rem rgb(255 46 151 / 0.25), 0 30px 60px rgb(0 0 0 / 0.5);
}
.game--disco:hover {
  box-shadow: 0 0 2rem rgb(255 46 151 / 0.8), 0 0 4.5rem rgb(122 43 245 / 0.45), inset 0 0 1.4rem rgb(255 46 151 / 0.35), 0 40px 70px rgb(0 0 0 / 0.55);
}
[data-theme="disco"] .game__window {
  border: 2px solid var(--disco-cyan); border-radius: 1rem;
  box-shadow: 0 0 1rem rgb(45 226 230 / 0.5);
}
[data-theme="disco"] .game__glare {
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.5) * 100%), rgb(255 46 151 / 0.55), transparent 34%),
    radial-gradient(circle at calc((1 - var(--px, 0.5)) * 100%) calc(var(--py, 0.5) * 100%), rgb(45 226 230 / 0.45), transparent 30%);
}
/* mirror-ball dots that sweep across the floor with the mouse */
.game__spots {
  position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen; opacity: 0.35;
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.9) 0 2px, transparent 3.5px) 0 0 / 46px 36px,
    radial-gradient(circle, rgb(255 46 151 / 0.9) 0 2.5px, transparent 4px) 14px 10px / 64px 50px,
    radial-gradient(circle, rgb(45 226 230 / 0.9) 0 2px, transparent 3.5px) 30px 22px / 78px 58px;
  translate: calc((var(--px, 0.5) - 0.5) * 18%) calc((var(--py, 0.5) - 0.5) * 18%);
  transition: translate 900ms var(--ease-out), opacity 500ms var(--ease-out);
}
.game__media.is-tilting .game__spots { opacity: 0.75; transition-duration: 260ms, 500ms; }
[data-theme="disco"] .game__status {
  right: -0.75rem; rotate: 4deg;
  padding: 0.45rem 1.15rem 0.5rem 0.95rem;
  background: rgb(13 2 33 / 0.88); color: #e6feff;
  border: 2px solid var(--disco-cyan); border-radius: 999px;
  font-family: "Monoton", "Fredoka", system-ui, sans-serif; font-weight: 400; word-spacing: 0.3em;
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.55rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  text-shadow: 0 0 0.1em #fff, 0 0 0.35em var(--disco-cyan), 0 0 0.9em var(--disco-cyan);
  box-shadow: 0 0 0.9rem rgb(45 226 230 / 0.8), inset 0 0 0.6rem rgb(45 226 230 / 0.45);
}
[data-theme="disco"] .game__dot { background: var(--disco-pink); box-shadow: 0 0 0.5rem var(--disco-pink), 0 0 1rem var(--disco-pink); }
.game--disco .game__title {
  margin-top: 0.15rem;
  font-family: "Monoton", "Fredoka", system-ui, sans-serif; font-weight: 400; word-spacing: 0.3em;
  font-size: clamp(1.6rem, 1rem + 2.1vw, 2.9rem); line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase;
  color: #ffe9f6;
  text-shadow: 0 0 0.06em #fff, 0 0 0.22em var(--disco-pink), 0 0 0.6em var(--disco-pink);
}
.game--disco .game__title span { display: block; }
.game--disco .game__title .game__title-top {
  font-size: 0.55em; color: #e6feff;
  text-shadow: 0 0 0.08em #fff, 0 0 0.3em var(--disco-cyan), 0 0 0.8em var(--disco-cyan);
}
.game--disco .game__body .copy { color: var(--sc-ink); }

@media (prefers-reduced-motion: no-preference) {
  .game__dot::after { animation: status-ping 1.6s var(--ease-out) infinite; }
  [data-theme="egg"] .game__status { animation: status-wobble 3.2s ease-in-out infinite; }
  .game--egg .game__peek { animation: peek-hop 2.8s ease-in-out infinite; }
  [data-theme="disco"] .game__status { animation: status-flicker 5s linear infinite; }
}
@keyframes status-ping { 0% { opacity: 0.8; scale: 1; } 80%, 100% { opacity: 0; scale: 2.6; } }
@keyframes status-wobble { 0%, 100% { rotate: -5deg; } 50% { rotate: -2deg; } 52% { rotate: -7deg; } 56% { rotate: -3deg; } 60% { rotate: -5deg; } }
@keyframes peek-hop { 0%, 70%, 100% { translate: 0 0; } 78% { translate: 0 -14%; } 86% { translate: 0 0; } 91% { translate: 0 -6%; } }
@keyframes status-flicker {
  0%, 40%, 44%, 100% { opacity: 1; } 41% { opacity: 0.35; } 42% { opacity: 1; } 43% { opacity: 0.5; }
  80% { opacity: 1; } 81% { opacity: 0.6; } 82% { opacity: 1; }
}

@media (max-width: 860px) {
  .shelf__head { padding-left: 0; }
  .shelf__grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .game__body .actions .btn { flex: 1 1 auto; }
}

/* ============================================================ GAME PAGES ==
   chicks-on-the-menu.html and under-the-disco-lights.html: one page per
   game, each in its own game's theme. Both run in the same order:
   hero, screenshots (the reel), about, press kit, footer.
   The layout is here. The skins are in css/theme-egg.css and
   css/theme-disco.css, under GAME PAGE.
   ========================================================================== */
.gp-hero { position: relative; }
.gp-block { position: relative; padding-block: clamp(3rem, 8vh, 5rem); }
.gp-head > * + * { margin-top: 1rem; }
.gp-kicker {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sc-accent);
}

/* ---------------------------------------------------------- the reel --
   Slides sit stacked in the middle; js/site.js (reel) moves each one out
   to its place and blurs it by its distance from the middle. */
.gp-reel-block { position: relative; padding-block: clamp(2.5rem, 6vh, 4rem); overflow: clip; }
.reel {
  --slide-w: min(56vw, 46rem);
  position: relative; height: calc(var(--slide-w) * 9 / 16 + 3.5rem);
  touch-action: pan-y; user-select: none;
}
.reel__track { position: absolute; inset: 0 0 2.5rem; }
.reel__slide {
  position: absolute; left: 50%; top: 50%; width: var(--slide-w); aspect-ratio: 16 / 9;
  margin: 0; padding: 0; border: 0; background: var(--sc-surface); color: inherit; font: inherit;
  overflow: hidden; cursor: pointer;
  transform: translate(-50%, -50%);
  will-change: transform, filter;
}
.reel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reel__slide.is-here[data-shot] { cursor: zoom-in; }
.reel__slide:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 4px; }
.reel__slide--soon { display: grid; place-items: center; text-align: center; cursor: default; }
.gp-soon { display: grid; justify-items: center; gap: 0.6rem; padding: 1rem; font-weight: 600; }
.gp-soon__icon { width: 2.5rem; height: 2.5rem; }
.reel__nav {
  position: absolute; z-index: 200; top: calc(50% - 1.25rem); translate: 0 -50%;
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; cursor: pointer;
}
.reel__nav--prev { left: calc(50% - var(--slide-w) / 2 - 1.5rem); }
.reel__nav--next { right: calc(50% - var(--slide-w) / 2 - 1.5rem); }
.reel__dots { position: absolute; left: 0; right: 0; bottom: 0.4rem; display: flex; justify-content: center; gap: 0.5rem; }
.reel__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; opacity: 0.3; transition: opacity 300ms, scale 300ms; }
.reel__dot.is-on { opacity: 1; scale: 1.3; }

/* ------------------------------------------------------------- about -- */
.gp-about__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.gp-about__text > * + * { margin-top: 1rem; }
.gp-facts { margin: 0; padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.4vw, 2rem); }
.gp-facts dl { margin: 0; }
.gp-facts dl > div {
  display: grid; grid-template-columns: minmax(6rem, 7.5rem) minmax(0, 1fr); gap: 1rem;
  padding-block: 0.7rem; border-top: 1px solid var(--hair);
}
.gp-facts dl > div:first-child { border-top: 0; }
.gp-facts dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 0.2em; }
.gp-facts dd { margin: 0; font-weight: 600; line-height: 1.45; color: var(--sc-ink); }
/* a value still to come: shown, but quieter */
.gp-tba { font-weight: 500; font-style: italic; opacity: 0.62; }

/* --------------------------------------------------------- press kit -- */
.gp-press { padding-top: 0; }
.gp-press__card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(1.4rem, 3vw, 2.25rem) clamp(1.5rem, 3.4vw, 2.75rem);
}
.gp-press__card .d-md { margin-top: 0.4rem; }
.gp-press__card .copy { margin-top: 0.5rem; }
.gp-press__side { display: grid; justify-items: center; gap: 0.6rem; }
.gp-press__note { font-size: 0.875rem; color: var(--sc-ink-soft); }
/* the download until the press kit link arrives */
.btn[aria-disabled="true"] { cursor: default; opacity: 0.6; filter: saturate(0.6); }

/* ------------------------------------------------------------ footer -- */
.gp-foot { position: relative; padding-top: clamp(2.5rem, 7vh, 4.5rem); }
.gp-foot__main {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.5rem 3rem;
}
.gp-foot__cta .actions { margin-top: 1.4rem; }
.gp-foot__logos { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.gp-foot__game { display: block; width: clamp(9rem, 15vw, 13rem); height: auto; }
.gp-foot__studio { display: block; padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 2px solid var(--hair-strong); }
.gp-foot__mark {
  display: block; height: clamp(4.5rem, 7vw, 6rem); aspect-ratio: 2328 / 2831;
  background: currentColor;
  -webkit-mask: url("../assets/img/logo-white.png") center / contain no-repeat;
          mask: url("../assets/img/logo-white.png") center / contain no-repeat;
}
.gp-foot__base {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; align-items: center;
  padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--hair);
  font-size: 0.875rem; color: var(--sc-ink-soft);
}
.gp-foot__base a { color: inherit; text-underline-offset: 0.25em; }

/* --------------------------------------------------------- lightbox --
   The picture large, over the page dimmed by half. */
.lightbox {
  width: min(92vw, 80rem); max-width: none; max-height: 92vh; padding: 0; overflow: visible;
  background: transparent; border: 0;
}
.lightbox::backdrop { background: rgb(0 0 0 / 0.5); }
.lightbox img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
.lightbox__close {
  position: absolute; right: 0; top: calc(100% + 0.75rem);
  min-height: 2.75rem; padding: 0 1.25rem; cursor: pointer;
  font: 600 0.875rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase;
}
.lightbox__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; cursor: pointer;
}
.lightbox__nav--prev { left: -1.6rem; }
.lightbox__nav--next { right: -1.6rem; }
.lightbox__nav[hidden] { display: none; }

@media (max-width: 860px) {
  .gp-about__grid, .gp-press__card { grid-template-columns: 1fr; }
  .gp-press__side { justify-items: start; }
  .reel { --slide-w: 78vw; }
  .reel__nav { display: none; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
}

/* =============================================================== CONTACT ==
   The homepage's last screen. It carries on from All games: the same
   faint diamond floor and a warm light, now in yolk only. Who we want to
   hear from and one button to write on the left; the studio's social
   accounts as buttons with their logos on the right.
   .contact__mail is also used on team.html.
   ========================================================================== */
.contact {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--bar-h) + 2rem);
  background:
    radial-gradient(45% 50% at 22% 48%, rgb(242 197 61 / 0.12), transparent 72%),
    radial-gradient(35% 40% at 78% 50%, rgb(242 197 61 / 0.07), transparent 72%),
    var(--sc-canvas);
}
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background:
    linear-gradient(45deg, transparent 48.6%, var(--hair) 49%, var(--hair) 51%, transparent 51.4%) 0 0 / 3.25rem 3.25rem,
    linear-gradient(-45deg, transparent 48.6%, var(--hair) 49%, var(--hair) 51%, transparent 51.4%) 0 0 / 3.25rem 3.25rem;
  -webkit-mask: radial-gradient(70% 55% at 50% 45%, #000, transparent 80%);
          mask: radial-gradient(70% 55% at 50% 45%, #000, transparent 80%);
}
.contact__grid {
  margin-block: auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(3rem, 7vw, 7rem); align-items: center;
}
.contact__lead > * + * { margin-top: 1.4rem; }
.contact__lead .d-lg { max-width: 14ch; }
.contact__write { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-top: 0.6rem; }
/* the studio's one bright button, with a lip so it reads as a button */
.contact__write .btn {
  gap: 0.65rem; min-height: 3.5rem; padding: 0 1.75rem; font-size: 1rem;
  box-shadow: 0 5px 0 #a8831c;
  transition: translate 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 220ms var(--ease-out);
}
.contact__write .btn:hover { translate: 0 -2px; box-shadow: 0 7px 0 #a8831c; }
.contact__write .btn:active { translate: 0 4px; box-shadow: 0 1px 0 #a8831c; }
.contact__mail {
  display: inline-block; font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(1.25rem, 0.7rem + 3vw, 3.4rem); line-height: 1.1; letter-spacing: 0.02em;
  color: var(--sc-ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--hair-strong); text-underline-offset: 0.2em;
  overflow-wrap: anywhere; transition: text-decoration-color 220ms, color 220ms;
}
.contact__write .contact__mail { font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem); }
.contact__mail:hover { color: var(--sc-accent); text-decoration-color: var(--sc-accent); }

/* social buttons: a diamond plate with the logo, the name, the handle */
.contact__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.contact__social { display: grid; gap: 0.85rem; list-style: none; padding: 0; margin: 1.1rem 0 0; }
.social {
  display: flex; align-items: center; gap: 1.1rem; padding: 0.9rem 1.25rem 0.9rem 1rem;
  text-decoration: none; color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-surface) 85%, transparent);
  border: 1px solid var(--hair-strong);
  box-shadow: 0 4px 0 color-mix(in oklab, var(--sc-ink) 14%, transparent);
  transition: border-color 220ms var(--ease-out), translate 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.social::after {   /* an arrow out, since it leaves the site */
  content: "\2197"; margin-left: auto; font-size: 1.1rem; color: var(--sc-ink-soft);
  transition: color 220ms, translate 220ms var(--ease-out);
}
.social__icon { position: relative; flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.social__icon::before {
  content: ""; position: absolute; inset: 0.3rem; rotate: 45deg;
  border: 1px solid var(--hair-strong); background: var(--sc-canvas);
  transition: border-color 220ms, background-color 220ms;
}
.social__icon svg { position: relative; transition: color 220ms; }
.social__text { display: grid; gap: 0.15rem; }
.social__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; }
.social__handle { font-size: 0.875rem; color: var(--sc-ink-soft); }
.social:hover { border-color: var(--sc-accent); translate: 0 -2px; box-shadow: 0 6px 0 color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.social:hover .social__icon::before { border-color: var(--sc-accent); background: var(--sc-accent); }
.social:hover .social__icon svg { color: var(--sc-accent-ink); }
.social:hover::after { color: var(--sc-accent); translate: 2px -2px; }
.social:active { translate: 0 3px; box-shadow: 0 1px 0 color-mix(in oklab, var(--sc-accent) 45%, transparent); }
@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.foot {
  margin-top: clamp(3rem, 8vh, 6rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem;
  padding-block: 1.75rem; border-top: 1px solid var(--hair);
  font-size: 0.875rem; color: var(--sc-ink-soft);
}
.foot__set { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; align-items: center; }
.foot__est { font-family: var(--sc-font-display); letter-spacing: 0.14em; }

/* ============================================================= TEAM PAGE ==
   team.html, an arcade cabinet. Everything here is scoped to body.arcade.
   No pixel font is shipped, so the "arcade" type is the system's own bold
   monospace (Consolas, Menlo, ...) in capitals, with hard offset shadows.
   Boxes have square corners, thick borders and a hard drop shadow; a CRT
   scanline layer lies over the whole page.
   .masthead (just below) is the privacy page's header.
   ========================================================================== */
.masthead { padding-top: calc(var(--bar-h) + clamp(3rem, 12vh, 8rem)); padding-bottom: clamp(3rem, 9vh, 6rem); }
.masthead .d-xl { font-size: clamp(2.9rem, 8vw, 8rem); }
.masthead .lede { margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 36ch; color: var(--sc-ink-soft); }

.arcade {
  --arc-bg:    #0a0614;
  --arc-panel: #140c26;
  --arc-line:  #3a2a63;
  --arc-yolk:  #f2c53d;
  --arc-pink:  #ff2e97;
  --arc-cyan:  #2de2e6;
  --arc-green: #39ff88;
  --arc-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, "DejaVu Sans Mono", "Courier New", monospace;
  --sc-canvas: var(--arc-bg);
  --sc-surface: var(--arc-panel);
  --hair: rgb(170 150 255 / 0.16);
  --hair-strong: rgb(170 150 255 / 0.32);
  background: var(--arc-bg);
}
/* the CRT: fine scanlines and a dark rim */
.arc-scan {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgb(0 0 0 / 0.45));
}
/* the floor: a perspective grid glowing up from the bottom of each screen */
.arc-title, .arc-map, .arc-select, .arcade .contact { position: relative; isolation: isolate; }
.arc-title::before, .arcade .contact::before {
  content: ""; position: absolute; top: auto; left: -10%; right: -10%; bottom: 0; height: 55%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgb(255 46 151 / 0.16), transparent 70%),
    repeating-linear-gradient(90deg, rgb(45 226 230 / 0.28) 0 1px, transparent 1px 4rem),
    repeating-linear-gradient(0deg, rgb(45 226 230 / 0.28) 0 1px, transparent 1px 3rem);
  transform: perspective(26rem) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(to top, #000 10%, transparent 95%);
          mask: linear-gradient(to top, #000 10%, transparent 95%);
  opacity: 1;
}
.arcade .contact::before { top: auto; height: 45%; }

/* the sound switch in the top bar (js/site.js, "arcade sound") */
.arc-sound {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto;
  min-height: 2.5rem; padding: 0 0.8rem; cursor: pointer;
  font-family: var(--arc-mono); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--arc-green); background: var(--arc-bg); border: 2px solid currentColor;
  box-shadow: 3px 3px 0 rgb(0 0 0 / 0.55);
  transition: translate 80ms steps(2), box-shadow 80ms steps(2), color 120ms;
}
.arc-sound[hidden] { display: none; }
.arc-sound__state { min-width: 3ch; text-align: left; }
.arc-sound[aria-pressed="false"] { color: #9a91bd; }
.arc-sound[aria-pressed="false"] .arc-sound__wave { display: none; }
.arc-sound:hover { translate: -1px -1px; box-shadow: 4px 4px 0 rgb(0 0 0 / 0.55); }
.arc-sound:active { translate: 2px 2px; box-shadow: 1px 1px 0 rgb(0 0 0 / 0.55); }
.arcade .bar__nav { margin-left: 1.5rem; }
@media (max-width: 860px) { .arc-sound { min-height: 2.75rem; } }

/* ------------------------------------------------------------- type -- */
.arc-kicker {
  font-family: var(--arc-mono); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--arc-cyan); text-shadow: 0 0 0.6rem rgb(45 226 230 / 0.6);
}
.arc-kicker::before { content: "> "; color: var(--arc-pink); }
.arc-h2 {
  margin-top: 0.6rem;
  font-family: var(--arc-mono); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.8rem, 1rem + 3vw, 3.6rem); line-height: 1.05; color: #fff;
  text-shadow: 3px 3px 0 var(--arc-pink), 6px 6px 0 rgb(45 226 230 / 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .arc-kicker--blink, .arc-start__caret, .arc-level__badge--now { animation: arc-blink 1.1s steps(1) infinite; }
}
@keyframes arc-blink { 50% { opacity: 0; } }

/* the arcade box: square, thick border, hard shadow */
.arcade :is(.arc-scores li, .arc-level, .arc-player, .social) {
  border: 3px solid var(--arc-line); background: var(--arc-panel);
  box-shadow: 6px 6px 0 rgb(0 0 0 / 0.55);
}

/* ------------------------------------------------------- title screen -- */
.arc-title { overflow: clip; padding: calc(var(--bar-h) + clamp(2rem, 7vh, 4.5rem)) 0 clamp(3rem, 8vh, 5rem); }
.arc-hud {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem;
  font-family: var(--arc-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--arc-pink);
}
.arc-hud b { color: #fff; font-weight: 700; margin-left: 0.4rem; }
.arc-title__name {
  margin-top: clamp(1rem, 3vh, 1.75rem);
  font-family: var(--arc-mono); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(3.2rem, 1rem + 9vw, 9rem); line-height: 0.92; color: var(--arc-yolk);
  text-shadow: 4px 4px 0 var(--arc-pink), 8px 8px 0 var(--arc-cyan), 0 0 2.5rem rgb(242 197 61 / 0.35);
}
.arc-title .lede { margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 40ch; color: #d9d2f5; }
.arc-start {
  display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; padding: 0.9rem 1.4rem;
  font-family: var(--arc-mono); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--arc-bg); background: var(--arc-yolk); text-decoration: none;
  border: 3px solid #fff; box-shadow: 6px 6px 0 var(--arc-pink);
  transition: translate 120ms steps(2), box-shadow 120ms steps(2);
}
.arc-start:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--arc-pink); }
.arc-start:active { translate: 4px 4px; box-shadow: 2px 2px 0 var(--arc-pink); }
.arc-scores { margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; }
.arc-scores li { display: grid; gap: 0.3rem; min-width: 9rem; padding: 0.8rem 1.1rem; }
.arc-scores__label { font-family: var(--arc-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--arc-cyan); }
.arc-scores__value { font-family: var(--arc-mono); font-size: 1.5rem; font-weight: 800; color: #fff; text-transform: uppercase; }

/* ----------------------------------------------------------- world map -- */
.arc-map { padding-block: clamp(3rem, 8vh, 5rem); }
/* a 10-cell bar; --v (0 to 10) cells are lit. Used by the XP and the stats. */
.arc-xp__bar, .arc-stat__bar {
  display: block; height: 0.9rem;
  background:
    linear-gradient(var(--bar, var(--arc-green)), var(--bar, var(--arc-green))) 0 0 / calc(var(--v) * 10%) 100% no-repeat,
    rgb(255 255 255 / 0.1);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
}
.arc-xp { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1.5rem, 4vh, 2.25rem); max-width: 40rem; }
.arc-xp__label { font-family: var(--arc-mono); font-weight: 800; color: var(--arc-green); letter-spacing: 0.1em; }
.arc-xp__bar { flex: 1; height: 1.1rem; filter: drop-shadow(0 0 0.4rem rgb(57 255 136 / 0.5)); }
.arc-xp__count { font-family: var(--arc-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #d9d2f5; white-space: nowrap; }

.arc-levels {
  margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem);
}
.arc-level { position: relative; padding: 0 0 1.25rem; transition: translate 120ms steps(2); }
.arc-level:hover { translate: -3px -3px; }
/* a dotted path from one level to the next */
.arc-level:not(:last-child)::after {
  content: ""; position: absolute; top: 1.2rem; left: 100%; width: clamp(1rem, 2vw, 1.75rem); height: 3px;
  background: repeating-linear-gradient(90deg, var(--arc-yolk) 0 4px, transparent 4px 8px);
}
.arc-level__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.9rem; background: var(--arc-line);
  font-family: var(--arc-mono); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.arc-level__badge { color: var(--arc-yolk); font-size: 0.75rem; }
.arc-level__when { margin: 1rem 1rem 0; font-family: var(--arc-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--arc-cyan); }
.arc-level__title { margin: 0.35rem 1rem 0; font-family: var(--arc-mono); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; color: #fff; }
.arc-level .copy { margin: 0.6rem 1rem 0; font-size: 0.9375rem; line-height: 1.6; color: #cfc6ee; }
.arc-level--now { border-color: var(--arc-pink); box-shadow: 6px 6px 0 rgb(0 0 0 / 0.55), 0 0 1.5rem rgb(255 46 151 / 0.35); }
.arc-level--now .arc-level__head { background: var(--arc-pink); }
.arc-level--now .arc-level__badge { color: #fff; }

/* ------------------------------------------------------ character select -- */
.arc-select { padding-block: clamp(2rem, 6vh, 4rem) clamp(3rem, 8vh, 5rem); }
.arc-players {
  margin: 7rem 0 0; padding: 0; list-style: none;   /* room above the cards for the speech bubbles */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.4rem);
}
.arc-player {
  --bar: var(--p);
  position: relative; display: flex; flex-direction: column; padding-bottom: 1rem;
  transition: translate 140ms steps(2), border-color 140ms, box-shadow 140ms;
}
/* the select cursor, over the chosen card */
.arc-player::before {
  content: "\25BC"; position: absolute; left: 50%; top: -1.9rem; translate: -50% 0;
  font-size: 1.1rem; color: var(--p); opacity: 0; text-shadow: 0 0 0.6rem var(--p);
}
.arc-player:hover, .arc-player:focus-within {
  border-color: var(--p); translate: 0 -6px;
  box-shadow: 6px 6px 0 rgb(0 0 0 / 0.55), 0 0 1.75rem color-mix(in oklab, var(--p) 45%, transparent);
}
.arc-player:hover::before, .arc-player:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .arc-player:hover::before, .arc-player:focus-within::before { animation: arc-bob 600ms steps(2) infinite; }
}
@keyframes arc-bob { 50% { translate: -50% -5px; } }
/* the speech bubble: what this player says when selected. Optional; a card
   with one shows it instead of the cursor. */
.arc-player__say {
  position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 0.9rem);
  width: max(100%, 13.5rem); translate: -50% 8px;
  padding: 0.7rem 0.85rem;
  font-family: var(--arc-mono); font-size: 0.8125rem; font-weight: 700; line-height: 1.45; color: #fff;
  background: var(--arc-bg); border: 3px solid var(--p); box-shadow: 5px 5px 0 var(--p);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 140ms steps(2), translate 140ms steps(2), visibility 0s linear 140ms;
}
.arc-player__say span { display: block; margin-bottom: 0.2rem; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p); }
/* a pixel tail, pointing down at the card */
.arc-player__say::after {
  content: ""; position: absolute; left: calc(50% - 0.6rem); top: 100%; width: 1.2rem; height: 0.8rem;
  margin-top: 3px; background: var(--p);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 83% 33%, 83% 66%, 66% 66%, 66% 100%, 34% 100%, 34% 66%, 17% 66%, 17% 33%, 0 33%);
}
.arc-player:hover .arc-player__say, .arc-player:focus-within .arc-player__say {
  opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s;
}
.arc-player:has(.arc-player__say)::before { display: none; }
.arc-player__head {
  display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.7rem;
  background: var(--p); color: var(--arc-bg);
  font-family: var(--arc-mono); font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.arc-player__ready { font-size: 0.6875rem; letter-spacing: 0.16em; opacity: 0; }
.arc-player:hover .arc-player__ready, .arc-player:focus-within .arc-player__ready { opacity: 1; }
.arc-player__photo { aspect-ratio: 4 / 5; overflow: hidden; background: #000; border-bottom: 3px solid var(--arc-line); }
.arc-player__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.9);
  transition: filter 300ms steps(3), scale 600ms var(--ease-out);
}
.arc-player:hover .arc-player__photo img, .arc-player:focus-within .arc-player__photo img { filter: none; scale: 1.05; }
.arc-player__name { margin: 0.85rem 0.8rem 0; font-family: var(--arc-mono); font-weight: 800; font-size: clamp(0.9rem, 0.75rem + 0.45vw, 1.1rem); line-height: 1.2; text-transform: uppercase; color: #fff; }
.arc-player__class { margin: 0.35rem 0.8rem 0; font-size: 0.8125rem; line-height: 1.4; color: #cfc6ee; }
.arc-player__class span { font-family: var(--arc-mono); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p); margin-right: 0.3rem; }
.arc-stat { margin: 0.85rem 0.8rem 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.arc-stat li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.arc-stat__name { font-family: var(--arc-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #cfc6ee; }
.arc-stat__bar { height: 0.7rem; }
.arc-player__links { margin: auto 0 0; padding: 1rem 0.8rem 0; list-style: none; display: flex; gap: 0.4rem; }
.arc-player__link {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  color: #fff; border: 2px solid var(--arc-line); background: var(--arc-bg);
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.arc-player__link:hover { background: var(--p); border-color: var(--p); color: var(--arc-bg); }
@media (max-width: 1100px) {
  .arc-players { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 7rem; }
}
@media (max-width: 860px) {
  .arc-levels { grid-template-columns: 1fr; }
  .arc-level:not(:last-child)::after { top: 100%; left: 1.5rem; width: 3px; height: 1rem; background: repeating-linear-gradient(180deg, var(--arc-yolk) 0 4px, transparent 4px 8px); }
  .arc-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-xp { flex-wrap: wrap; }
}

/* ---------------------------------------------- continue?: the contact -- */
.contact--short { min-height: 0; padding-top: clamp(3rem, 8vh, 5rem); }
.contact--short .contact__grid { margin-block: 0 clamp(1rem, 3vh, 2rem); }
.arcade .contact { background: transparent; overflow: clip; }
.arcade .contact .arc-h2 { max-width: 16ch; }
.arcade .contact__write .btn {
  font-family: var(--arc-mono); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  border: 3px solid #fff; box-shadow: 6px 6px 0 var(--arc-pink);
  transition: translate 120ms steps(2), box-shadow 120ms steps(2);
}
.arcade .contact__write .btn:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--arc-pink); }
.arcade .contact__write .btn:active { translate: 4px 4px; box-shadow: 2px 2px 0 var(--arc-pink); }
.arcade .contact__mail { font-family: var(--arc-mono); font-weight: 800; letter-spacing: 0; text-transform: lowercase; color: var(--arc-cyan); text-decoration-color: rgb(45 226 230 / 0.4); }
.arcade .contact__label { font-family: var(--arc-mono); color: var(--arc-cyan); }
.arcade .social { box-shadow: 6px 6px 0 rgb(0 0 0 / 0.55); transition: translate 120ms steps(2), border-color 120ms, box-shadow 120ms; }
.arcade .social:hover { border-color: var(--arc-yolk); translate: -2px -2px; box-shadow: 8px 8px 0 var(--arc-pink); }
.arcade .social__name { font-family: var(--arc-mono); font-weight: 800; text-transform: uppercase; }
.arcade .social__icon::before { background: var(--arc-bg); }
.arcade .foot { font-family: var(--arc-mono); font-size: 0.8125rem; }
.arcade .foot__est { font-family: var(--arc-mono); color: var(--arc-pink); }

@media (prefers-reduced-motion: reduce) {
  .arc-player:hover, .arc-player:focus-within, .arc-level:hover { translate: none; }
}

/* ============================================================ LEGAL PAGE ==
   privacy.html: a reading page. On wide screens the contents list stays in
   view on the left while the text scrolls; on narrow screens it sits above
   the text. Sections are numbered in Roman numerals, like the date on the
   studio mark. This page has no rail, so it uses the same margin both sides.
   ========================================================================== */
.no-rail .wrap { padding-right: var(--pad-l); }
.masthead .kicker { margin-bottom: 1rem; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.75rem; font-weight: 600; }
.legal__date { margin-top: clamp(1.25rem, 3vh, 2rem); font-size: 0.9375rem; color: var(--sc-ink-soft); }

.legal {
  display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 43rem);
  gap: clamp(2.5rem, 7vw, 7rem); align-items: start;
  padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--hair);
  margin-inline: var(--pad-l);
  counter-reset: clause;
}
.no-rail .legal { padding-inline: 0; }   /* the margin above does the insetting, so the top rule is as wide as the text */
.legal__toc { position: sticky; top: calc(var(--bar-h) + 1.5rem); }
.legal__toc-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft); }
.legal__toc ol { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: entry; }
.legal__toc li { counter-increment: entry; border-top: 1px solid var(--hair); }
.legal__toc li:last-child { border-bottom: 1px solid var(--hair); }
.legal__toc a {
  display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; padding: 0.65rem 0;
  font-size: 0.9375rem; line-height: 1.35; color: var(--sc-ink-soft); text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.legal__toc a::before {
  content: counter(entry, upper-roman);
  font-family: var(--sc-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--sc-accent);
}
.legal__toc a:hover { color: var(--sc-ink); }

.legal__body { font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0938rem); line-height: 1.75; color: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-canvas)); }
.legal__lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.55; color: var(--sc-ink); text-wrap: pretty; }
.legal__body section {
  counter-increment: clause;
  margin-top: clamp(2.75rem, 7vh, 4.25rem); padding-top: clamp(1.75rem, 4vh, 2.5rem); border-top: 1px solid var(--hair);
  scroll-margin-top: calc(var(--bar-h) + 0.5rem);
}
.legal__body h2 {
  font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  line-height: 1.15; letter-spacing: 0.03em; color: var(--sc-ink); text-wrap: balance;
}
.legal__body h2::before {
  content: counter(clause, upper-roman); display: block; margin-bottom: 0.6rem;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; color: var(--sc-accent);
}
.legal__body p, .legal__body ul { margin-top: 1.1rem; }
.legal__body ul { list-style: none; padding: 0; }
.legal__body li { position: relative; padding-left: 1.6rem; }
.legal__body li + li { margin-top: 0.6rem; }
/* the list marker is the small diamond from the studio mark */
.legal__body li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.72em; width: 0.4rem; height: 0.4rem;
  rotate: 45deg; background: var(--sc-accent);
}
.legal__body strong { font-weight: 600; color: var(--sc-ink); }
.legal__back { margin-top: clamp(2.75rem, 7vh, 4.25rem); }
.foot [aria-current="page"] { text-decoration-color: var(--sc-accent); }
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; gap: 2.5rem; }
  .legal__toc { position: static; }
}

/* ------------------------------------------------------------- load-in -- */
@media (prefers-reduced-motion: no-preference) {
  .bar, .rail   { animation: appear 900ms var(--ease-out) 500ms both; }
}
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .bar *, .bar::before, .bar::after, .rail *, .rail__mark::before, .person__photo img { transition-duration: 1ms; }
  .person:hover .person__photo img, .person:focus-within .person__photo img { scale: 1; }
}