/* ==========================================================================
   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.

   FOUR 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
   paper   (css/team.css)         Meet the team: crumpled coloured paper, marker
   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.
   The paper theme is a whole page (body.paper on team.html).

   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);
}
.bar__nav .btn + .btn { margin-left: -1rem; }   /* two buttons sit closer than a link and a button */
.bar .btn.btn--round { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; }   /* the Discord button: only the logo */
/* 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); }
/* On the egg skin's light grounds the mark is the black line-art logo
   (assets/img/logo-mark.png: the drawing on a transparent ground) and the
   name is black. Everywhere else the bar keeps the original mark. */
html[data-chrome-bar="egg"]:not([data-bar-tone="art"]) .bar__mark {
  aspect-ratio: 732 / 885; background: #000;
  -webkit-mask-image: url("../assets/img/logo-mark.png");
          mask-image: url("../assets/img/logo-mark.png");
}
html[data-chrome-bar="egg"]:not([data-bar-tone="art"]) .bar__name { color: #000; }
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; }
/* Over the game's plain grounds the fade is solid for the height of the bar
   and only softens below it. The ground colour is the same as what is behind
   it, so the bar still has no visible panel, but bright things scrolling
   underneath (the status pill, the game logo, headings) no longer show
   through the name and the links. */
html[data-chrome-bar="egg"]:not([data-bar-tone="art"]) .bar::before {
  background: linear-gradient(to bottom, var(--c-scrim) 0%, var(--c-scrim) 68%, transparent 100%);
}
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="egg"] .bar .btn--white { background: #fffdf6; }
html[data-chrome-bar="egg"] .bar .btn--white:hover { background: #fff; }
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; }
html[data-chrome-bar="disco"] .bar .btn--white {
  border-color: #f7f3ff;
  box-shadow: 0 0 0.7rem rgb(247 243 255 / 0.55), inset 0 0 0.5rem rgb(247 243 255 / 0.3);
}
html[data-chrome-bar="disco"] .bar .btn--white:hover { background: #f7f3ff; 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 becomes the current one and stays stamped. A marker sits where the
   fill is at that moment, so the gaps between markers show how long each part
   is, and the last marker is the end of the line. Clicking a marker goes to
   its section and lights that marker (js/site.js, "the rail").

   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__glyph[data-glyph="feather"]    { --glyph: url("../assets/icons/feather.svg"); }
.rail__glyph[data-glyph="water"]      { --glyph: url("../assets/icons/water.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.

   The frame leans as one flat sheet. The pieces that stand off it (the
   status pill, the chick, the logo) are not at a real depth: each has a
   fixed scale, so it is the same size leaning or still, and slides a
   little toward the mouse (--lean-x/--lean-y times how far it stands
   off, in px). Real depth (preserve-3d and translateZ) made Firefox
   redraw them at another size while the frame leaned.
   ========================================================================== */
.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;
  /* how far something 1px off the picture slides at the mouse's place: 2 x sin of the widest lean (8deg, 6deg) */
  --lean-x: calc((var(--px, 0.5) - 0.5) * 0.28px); --lean-y: calc((var(--py, 0.5) - 0.5) * 0.21px);
  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: 60px off it.
   The offsets and the scale are where a 900px perspective would draw it
   (0.9rem above the corner and 0.75rem out to the side, 1.0714 times as large). */
.game__status {
  position: absolute; z-index: 2; top: calc(-0.964rem - 3.571%);
  display: inline-flex; align-items: center; gap: 0.55rem;
  scale: 1.0714;
  translate: calc(var(--pop-x, 0%) + var(--lean-x, 0px) * 60) calc(3.571% + var(--lean-y, 0px) * 60);
  transition: translate 700ms var(--ease-out);
  white-space: nowrap;
}
.game__media.is-tilting .game__status { transition-duration: 140ms; }
.game__status.game__status--inline { position: relative; top: auto; left: auto; right: auto; scale: none; translate: 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;
}
.game--egg .game__status { left: calc(-0.804rem - 3.571%); --pop-x: 3.571%; }
[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, 90px off it
   (1.1rem and 1.6rem past the corner, 1.1111 times as large) */
.game__peek {
  position: absolute; z-index: 3; right: calc(-1.222rem - 5.556%); bottom: calc(-1.778rem - 5.556%); width: 24%; height: auto;
  transform-origin: 50% 100%; scale: 1.1111;
  translate: calc(-5.556% + var(--lean-x, 0px) * 90) calc(var(--lean-y, 0px) * 90);
  filter: drop-shadow(0 6px 0 rgb(74 46 22 / 0.25));
  transition: translate 700ms var(--ease-out), rotate 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.game__media.is-tilting .game__peek { transition-duration: 140ms, 400ms; }
.game--egg:hover .game__peek { rotate: -8deg; }
/* The logo hangs off the bottom edge of the picture, like the status pill and
   the chick: CHICKS sits over the art and MENU on the card below. It is part
   of the picture's frame, so it leans with it. --logo-w is its width; about
   0.4 of that hangs below the picture, which the text makes room for.
   It stands 70px off the picture (centred at 47%, 0.47 of it below the
   edge, 1.0843 times as large). */
.game--egg { --logo-w: min(20rem, 58%); }
.game--egg .game__title {
  position: absolute; z-index: 3; left: 46.747%; bottom: -4.215%; width: var(--logo-w); margin: 0;
  scale: 1.0843;
  translate: calc(-50% + var(--lean-x, 0px) * 70) calc(46.674% + var(--lean-y, 0px) * 70);
  transition: translate 700ms var(--ease-out);
  pointer-events: none;
}
.game__media.is-tilting .game__title { transition-duration: 140ms; }
.game--egg .game__title img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 5px 0 rgb(74 46 22 / 0.3)) drop-shadow(0 10px 14px rgb(40 24 6 / 0.35));
}
.game--egg .game__body { padding-top: calc(var(--logo-w) * 0.42 + 0.5rem); }
.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);
}
.game--disco .game__status { right: calc(-0.804rem - 3.571%); --pop-x: -3.571%; }
[data-theme="disco"] .game__dot { background: var(--disco-pink); box-shadow: 0 0 0.5rem var(--disco-pink), 0 0 1rem var(--disco-pink); }
/* The game's logo hangs off the bottom edge of the picture, as the other
   card's does: UNDER THE sits over the art, DISCO LIGHTS on the card below.
   It stands 70px off the picture and leans with it. --logo-w is the width of
   the logo's whole picture, glow and all (.udl-logo, css/theme-disco.css);
   the letters and the ball take 0.85 of that. Its solid part starts where
   the text below it does, on the left (the ball begins 0.1378 of the way
   across the picture, and the logo is scaled from that point), and a little
   over half of the picture hangs below the edge. A dark halo keeps the
   letters clear of the art behind them. */
.game--disco { --logo-w: min(34rem, 80%); }
.game--disco .game__title {
  position: absolute; z-index: 3; left: clamp(0.25rem, 1vw, 0.75rem); bottom: 0; width: var(--logo-w); margin: 0;
  scale: 1.0843; transform-origin: 13.78% 50%;
  translate: calc(-13.78% + var(--lean-x, 0px) * 70) calc(52% + var(--lean-y, 0px) * 70);
  transition: translate 700ms var(--ease-out);
  pointer-events: none;
}
.game--disco .game__title .udl-logo {
  width: 100%; margin: 0;
  filter: drop-shadow(0 0 0.35rem rgb(13 2 33 / 0.9)) drop-shadow(0 0.4rem 1rem rgb(13 2 33 / 0.75));
}
.game--disco .game__body { padding-top: calc(var(--logo-w) * 0.17 + 0.75rem); }
.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; } }
/* the hop is on transform: translate is taken by the chick's place and its slide toward the mouse */
@keyframes peek-hop { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-14%); } 86% { transform: translateY(0); } 91% { transform: translateY(-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 Chicks on the
   Menu! page has three more sections after its about (how it plays,
   abilities, the ranch); they exist only there, so they are in theme-egg.css.
   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;
  /* The slides and arrows are stacked with z-index 90 to 200 among themselves.
     Keeping that order inside the reel stops them rising over the top bar and
     the rail, which sit at 60. */
  isolation: isolate;
}
.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; }

/* ------------------------------------------------------------- steam --
   A card between the screenshots and About, with the button to the store
   page. The card itself is the press kit's (.gp-press__card, below). */
.gp-steam { padding-block: clamp(1rem, 3vh, 2rem) 0; }

/* ------------------------------------------------------------- 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); }
/* the homepage's contact block (.contact__grid, further down) sits in it */
.gp-foot .contact__grid { margin-block: 0; }
.gp-foot .contact__lead h2 { max-width: 14ch; text-wrap: balance; }
.gp-foot__logos { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.gp-foot__game { display: block; width: clamp(6.5rem, 10vw, 8.5rem); height: auto; }
.gp-foot__studio { display: block; padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 2px solid var(--hair-strong); }
.gp-foot__mark {
  display: block; height: clamp(3.5rem, 5vw, 4.5rem); 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(2.5rem, 6vh, 4rem);
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between;
  padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--hair);
  font-size: 0.875rem; color: var(--sc-ink-soft);
}
.gp-foot__set { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; align-items: center; }
.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; }

/* ============================================================ SHARED BITS ==
   .masthead is the privacy page's header. .contact--short is the contact
   block when it is not a full screen of its own (team.html).
   The team page's own look is css/team.css.
   ========================================================================== */
.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); }

.contact--short { min-height: 0; padding-top: clamp(3rem, 8vh, 5rem); }
.contact--short .contact__grid { margin-block: 0 clamp(1rem, 3vh, 2rem); }

/* ============================================================ 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; }
}