/* APtheVC Games. The studio's own look, separate from any game's.
   A 70s living room, kept minimal: cream walls, espresso, rust, burnt orange, amber and mustard; mahogany, brown
   glass (transparent, never milky; reeded in the footer) and stainless steel. The footer is a scene under smoked
   glass: code-drawn 70s stripes and blooms (tools/make-footer-art.mjs) and the giant wordmark blur through it, the links
   sit crisp on top. Type stays matte. Metal is only for the hardware: mirror chrome on the main buttons and the switch knob
   (it reflects the room and the wave lines, Daft Punk style, and never glows), brushed steel on the switch track. Film grain.
   The ridgeline (stacked jagged wave lines) is drawn in code by site.js and takes its colours from the --ridge-* tokens.
   Light and dark: the device setting by default; the footer switch sets data-theme on <html> (saved by theme.js). */

@font-face { font-family: 'Bricolage'; src: url('fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- tokens: light (day) */
:root {
  --bg: #f2e7d5;            /* cream */
  --bg-alt: #eadbc2;
  --ink: #2a1810;           /* espresso */
  --muted: #5e4536;
  --line: rgba(42, 24, 16, .14);
  --signal: #e2561b;        /* burnt orange: marks and lines, never body text */
  --surface: rgba(120, 62, 28, .07);     /* brown glass */
  --glass-edge: rgba(120, 62, 28, .22);
  --rim: rgba(255, 253, 248, .85);        /* the lit edge of the cut around the mahogany */
  --glass-hi: rgba(255, 255, 255, .5);
  --shadow: 0 24px 50px -30px rgba(70, 30, 10, .45);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .09 0 0 0 0 .05 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .07;
  /* the ridgeline, far lines to near: a 70s sunset */
  --ridge-bg: var(--bg);
  --ridge-stops: #ecb853, #e8902c, #dc5e1e, #a23d17, #3a2115;
  --ridge-accent: #2a1810;
  --ridge-glow: 0;
  color-scheme: light;

  --display: 'Bricolage', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Bricolage', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: clamp(20px, 2.4vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* never change with the theme */
  --cream: #f7e8d3;
  --smoke: #1a0f0a;      /* dark brown glass */
  --mahogany: linear-gradient(100deg, #2a1009 0%, #3b170c 24%, #2e120a 46%, #451b0e 70%, #280f08 100%);
  /* brushed stainless: satin, not chrome; the brush is stretched noise */
  --steel: linear-gradient(180deg, #f1f1ef 0%, #dededc 40%, #cbccc9 100%);
  --brushed-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .9' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .32 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");   /* fainter, for polished pieces */
  /* stainless sheen: alternating soft bands on a diagonal, laid over a reflection */
  --stainless-bands: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 16%, rgba(0, 0, 0, .07) 34%, rgba(255, 255, 255, .18) 55%, rgba(0, 0, 0, .09) 76%, rgba(255, 255, 255, .14) 100%);
  --brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --stripes: linear-gradient(to bottom, #f4ce6a 0 20%, #f0a030 20% 40%, #e0601f 40% 60%, #a23d17 60% 80%, #3a2115 80% 100%);
}

/* ---------------------------------------------------------------- tokens: dark (night). Two copies: keep them in step */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100c0a; --bg-alt: #18120e; --ink: #f7e8d3; --muted: #c2a68e; --line: rgba(247, 232, 211, .12); --signal: #ff7a2e;
    --surface: rgba(170, 92, 40, .10); --glass-edge: rgba(220, 150, 90, .2); --glass-hi: rgba(255, 220, 180, .10); --rim: rgba(255, 224, 190, .09);
    --shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacity: .05;
    --ridge-stops: #ffda8a, #f6a33c, #ee6b24, #c9481b, #8f3317; --ridge-accent: #ffc56e; --ridge-glow: 1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #100c0a; --bg-alt: #18120e; --ink: #f7e8d3; --muted: #c2a68e; --line: rgba(247, 232, 211, .12); --signal: #ff7a2e;
  --surface: rgba(170, 92, 40, .10); --glass-edge: rgba(220, 150, 90, .2); --glass-hi: rgba(255, 220, 180, .10); --rim: rgba(255, 224, 190, .09);
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .05;
  --ridge-stops: #ffda8a, #f6a33c, #ee6b24, #c9481b, #8f3317; --ridge-accent: #ffc56e; --ridge-glow: 1;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: max(32px, env(safe-area-inset-left, 0px)); --gutter-r: max(32px, env(safe-area-inset-right, 0px)); } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 69px; background: var(--bg); }   /* the nav's height, with its 1px bottom line */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--ink);
  font: 400 17px/1.55 var(--body);
  font-variation-settings: 'opsz' 14;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body::after { /* film grain over everything */
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: var(--grain); opacity: var(--grain-opacity);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { left: 12px; }
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color .5s, color .5s, border-color .5s, fill .5s, stroke .5s, box-shadow .5s !important; }

/* ---------------------------------------------------------------- small parts */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dot { /* a little amber glass bead */
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, rgba(255, 236, 200, .95) 0 10%, #e98a2c 34%, #b4461a 68%, #5e1f0a 100%);
  box-shadow: inset 0 0 0 .5px rgba(50, 15, 5, .5);
}
.num { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--muted); }
.tm { font-size: .42em; vertical-align: 1.15em; margin-left: .08em; font-weight: 500; line-height: 0; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font: 600 16px/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s, filter .25s, border-color .25s;
}
.btn-chrome, .pill { /* mirror chrome: a capsule of polished steel reflecting the room. site.js slides the reflections (--rx, --ry) */
  --rx: 0px; --ry: 0px;
  color: #1a120d; text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  border: 1px solid rgba(18, 11, 7, .6);
  background-color: #9c958d;
  background-image:
    /* a window's highlight across the top curve */
    linear-gradient(180deg, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, .9) 10%, rgba(255, 255, 255, 0) 22%),
    /* stainless: diagonal bands and a fine brush over the reflection */
    var(--stainless-bands),
    var(--brushed-fine),
    /* the floor, with the wave lines reflected upside down */
    var(--chrome-reflect, none),
    /* the room: bright ceiling, a dark beam, a pale wall where the label sits, a sharp horizon, a warm floor */
    linear-gradient(180deg, #f5f1eb 0%, #fffdf9 9%, #cfc8bf 20%, #6f655d 27%, #a79e95 31%, #e7e2db 40%, #d6cfc6 60%, #b3aaa0 68%, #2b1d15 70.5%, #5c3d2b 73%, #a2734f 86%, #e2cdb5 100%);
  /* the floor's reflection is one fixed size on every pill, and starts at the horizon (76.65% of the height, moved by --ry):
     sized by the pill, a narrow pill squeezed the lines into specks, and pinned to the bottom they rose above a sunk horizon */
  background-size: 100% 100%, 100% 100%, 240px 80px, 504px 16px, 100% 130%;
  background-position: 0 0, 0 0, 0 0, calc(50% + var(--rx)) calc(76.65% + 12.3px + var(--ry)), 50% calc(50% + var(--ry));
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 245, 230, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 1px 1px rgba(20, 10, 5, .3), 0 8px 16px -10px rgba(20, 10, 5, .55);
}
.btn-chrome:hover, .pill:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 245, 230, .6), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 1px rgba(20, 10, 5, .3), 0 12px 20px -10px rgba(20, 10, 5, .6); }
.btn-chrome:active, .pill:active { /* pressed: it sinks, and the top light slips down off the rim */
  transform: translateY(0); background-position: 0 3px, 0 0, 0 0, calc(50% + var(--rx)) calc(76.65% + 14.3px + var(--ry)), 50% calc(50% + var(--ry) + 2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .38), inset 0 -1px 0 rgba(255, 245, 230, .5), 0 1px 1px rgba(20, 10, 5, .3);
}
.btn-glass { /* brown glass */
  color: var(--ink); background: var(--surface); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.btn-glass:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.btn-glass:active { transform: translateY(0); }

.pill { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s, filter .25s; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--glass-edge); background: var(--surface); box-shadow: inset 0 1px 0 var(--glass-hi);
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #e98a2c; }
.chip-dot.is-live { background: #e2561b; animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- the mark (also favicon.svg) */
.mark { width: 30px; height: 30px; flex: none; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 210, 160, .14); }
.mark rect { fill: #2a1810; }
.mark path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mark .m1 { stroke: #f4ce6a; }
.mark .m2 { stroke: #f0a030; }
.mark .m3 { stroke: #e2561b; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font: 700 19px/1 var(--display); font-variation-settings: 'opsz' 24; letter-spacing: -.02em; white-space: nowrap; }
.brand-name span { font-weight: 400; color: var(--muted); }
.brand:hover .mark .m3 { animation: nudge .5s var(--ease); }
@keyframes nudge { 40% { transform: translateY(-1.5px); } }


/* ---------------------------------------------------------------- nav (smoked glass) */
.nav {
  position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); font-weight: 500; font-size: 16px; }
.nav-links a { text-decoration: none; }
.nav-links a:not(.pill):hover { text-decoration: underline; text-decoration-color: var(--signal); }
@media (max-width: 479px) { .hide-sm { display: none; } }
@media (max-width: 389px) { .hide-xs { display: none; } .nav .pill { padding-inline: 14px; } }   /* small phones: the brand and Contact only (the hero's button covers Games) */

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding-top: clamp(48px, 9vh, 112px); overflow: hidden; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 {
  margin-top: 22px;
  font-size: clamp(56px, 12.4vw, 168px); line-height: .94; letter-spacing: -.032em; font-weight: 700;
  font-variation-settings: 'opsz' 96; font-stretch: 88%;
}
@media (max-width: 599px) { .hero h1 { font-size: min(18vw, 84px); line-height: .92; } }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: clamp(24px, 4vw, 44px); }
.lede { text-wrap: pretty; max-width: 30ch; font-size: clamp(19px, 2vw, 23px); line-height: 1.4; color: var(--muted); font-variation-settings: 'opsz' 24; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ridge { width: 100%; }
.ridge-hero {
  height: clamp(300px, 54vh, 600px); margin-top: clamp(0px, 2vh, 24px);
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, #000 74%, transparent);
}

/* ---------------------------------------------------------------- sections */
.section { position: relative; padding-block: clamp(80px, 11vw, 156px); }
.section-alt { background: var(--bg-alt); }
.section h2 { font-size: clamp(40px, 6.4vw, 88px); line-height: .96; letter-spacing: -.03em; font-weight: 650; font-variation-settings: 'opsz' 96; font-stretch: 92%; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head[id] { scroll-margin-top: clamp(28px, 4vw, 48px); }   /* Games lands on its heading, just under the nav; Studio and Contact land with their edge flush under it */

/* ---------------------------------------------------------------- games */
.games { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .games { grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; } }
.game {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border-radius: var(--radius); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.game-body { position: relative; z-index: 2; display: grid; gap: 12px; padding: clamp(22px, 3vw, 36px); align-content: start; }
.game-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.game h3 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.035em; font-weight: 650; font-variation-settings: 'opsz' 60; }
.game p { text-wrap: pretty; color: var(--muted); max-width: 46ch; }

.game-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1e3323; }
.game-art > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.game-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(8, 12, 6, .5), rgba(8, 12, 6, 0) 75%), linear-gradient(to bottom, rgba(8, 12, 6, 0) 55%, rgba(8, 12, 6, .35)); }
.game-logo { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(58%, 420px); transform: translate(-50%, -50%); filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .55)); transition: transform 1.2s var(--ease); }
.game-logo img { width: 107.1%; max-width: none; margin-right: -7.1%; }   /* the logo's ™ hangs past its box; this keeps the letters centred */
.game-feature:hover { transform: translateY(-4px); }
.game-feature:hover .game-art > img { transform: scale(1.07); }
.game-feature:hover .game-logo { transform: translate(-50%, -52%); }

.go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; }
.go svg, .mail svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.game-feature:hover .go svg, .mail:hover svg { transform: translate(2px, -2px); }
.game-feature:hover .go { text-decoration: underline; text-decoration-color: var(--signal); }

/* the next game: a visor of dark brown glass with the moving wave lines, the same in light and dark */
.game-next {
  --ink: var(--cream); --muted: rgba(247, 232, 211, .64);
  --ridge-bg: var(--smoke);
  --ridge-stops: #ffda8a, #f6a33c, #ee6b24, #c9481b, #8f3317; --ridge-accent: #ffc56e; --ridge-glow: 1;
  --surface: rgba(170, 92, 40, .12); --glass-edge: rgba(220, 150, 90, .22); --glass-hi: rgba(255, 220, 180, .10);
  background: var(--smoke); color: var(--cream); border-color: rgba(220, 150, 90, .2);
  justify-content: space-between;
}
.game-next::after { /* the visor's reflection */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(166deg, rgba(255, 236, 214, .14) 0%, rgba(255, 236, 214, .04) 34%, rgba(255, 236, 214, 0) 34.4%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 200, .2);
}
.game-next .ridge-card { height: clamp(200px, 22vw, 300px); flex: 1 1 auto; margin-top: clamp(12px, 2vw, 24px); }
@media (min-width: 900px) { /* side by side, the cards share their rows, so the numbers, chips and titles line up across both */
  .game { display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .game-next .ridge-card { height: auto; min-height: 0; align-self: stretch; contain: size; }   /* fills the art row; adds no height of its own */
}

/* ---------------------------------------------------------------- studio: a mahogany panel (the grain is drawn by site.js) */
.wood { /* sunken: set into the page, lit from above. A lit rim on the cut, a deep shadow under the top edge, a shorter one
  over the bottom with a lit lip, and the grain lies deeper than the page, so it scrolls a little slower (site.js) */
  overflow: hidden; isolation: isolate; z-index: 1; background: var(--mahogany); color: var(--cream);
  box-shadow: 0 -1px 0 var(--rim), 0 1px 0 var(--rim);
  --ink: var(--cream); --muted: rgba(247, 232, 211, .76); --line: rgba(247, 232, 211, .16);
  --ridge-stops: #120503, #1e0905, #3d160b, #5a2413; --ridge-bg: transparent;
}
.wood::after { /* lacquer: a soft sheen across the grain; the panel sits sunken, shadowed under its top and bottom edges */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 220, 180, 0) 28%, rgba(255, 220, 180, .07) 44%, rgba(255, 220, 180, 0) 60%);
  box-shadow:
    inset 0 2px 0 rgba(0, 0, 0, .9), inset 0 8px 6px -4px rgba(0, 0, 0, .8),
    inset 0 40px 34px -20px rgba(0, 0, 0, .72), inset 0 130px 120px -70px rgba(0, 0, 0, .55),
    inset 0 -1px 0 rgba(255, 214, 170, .26), inset 0 -3px 2px -1px rgba(0, 0, 0, .55),
    inset 0 -26px 26px -16px rgba(0, 0, 0, .6), inset 0 -80px 80px -50px rgba(0, 0, 0, .35);
}
.ridge-wood { position: absolute; left: 0; top: -96px; width: 100%; height: calc(100% + 192px); z-index: 0; will-change: transform; }   /* room to slide */
.wood > .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- studio layout */
.studio { display: grid; gap: clamp(28px, 4vw, 48px) clamp(32px, 6vw, 96px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .studio { grid-template-columns: 1fr 1fr; } .points { grid-column: 1 / -1; } }
.studio-head { display: grid; gap: 18px; align-content: start; }
.big { text-wrap: pretty; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.42; letter-spacing: -.01em; font-variation-settings: 'opsz' 32; align-self: end; }
.points { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: clamp(16px, 3vw, 40px); border-top: 1px solid var(--line); }
@media (min-width: 720px) { .points { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 48px); } }
.points li { display: grid; gap: 10px; padding-block: 24px 28px; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .points li { border-bottom: 0; padding-block: 28px 0; } }
.points h3 { font-size: 22px; letter-spacing: -.02em; font-weight: 650; font-variation-settings: 'opsz' 32; margin-top: 6px; }
.points p { color: var(--muted); max-width: 34ch; }

/* ---------------------------------------------------------------- contact */
.contact { /* the closing screen: tall enough that Contact links can always scroll it fully into view */
  min-height: calc(100svh - 69px); display: flex; flex-direction: column; justify-content: center;
}
.contact h2 { margin-top: 18px; }
.contact-note { text-wrap: pretty; margin-top: 18px; font-size: clamp(19px, 2vw, 23px); color: var(--muted); max-width: 34ch; }
.mail {
  display: inline-flex; align-items: center; gap: .16em; margin-top: clamp(28px, 4vw, 48px);
  font: 600 clamp(28px, 6.2vw, 76px)/1.05 var(--display); letter-spacing: -.035em; font-variation-settings: 'opsz' 96;
  text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .14em; text-decoration-color: var(--signal);
  overflow-wrap: anywhere;
}
.mail svg { width: .7em; height: .7em; flex: none; }

/* ---------------------------------------------------------------- footer */
.foot { /* a scene under 70s smoked glass, the same in light and dark */
  position: relative; overflow: hidden; isolation: isolate; font-size: 15px;
  padding-top: clamp(84px, 9.5vw, 150px);   /* open sky above the glass, where the art shows crisp */
  background: #140c08; color: var(--cream);
  --ink: var(--cream); --muted: rgba(247, 232, 211, .72); --line: rgba(247, 232, 211, .16);
}
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 2; background: var(--stripes); }   /* 70s stripes */
.foot-scene { position: absolute; inset: 14px 0 0; z-index: 0; pointer-events: none; }
.foot-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.foot { --word: min(25vw, 300px); }
.foot-word { /* the giant wordmark along the bottom, under the links, seen through the glass */
  position: absolute; left: 0; right: 0; bottom: -.13em; margin: 0; text-align: center; white-space: nowrap;
  font: 800 var(--word)/.8 var(--display); font-variation-settings: 'opsz' 96; font-stretch: 86%; letter-spacing: -.045em;
  color: #f0a030;
}
.foot-glass { /* smoked topaz glass, reeded: fine vertical ribs, a lit top edge, a heavy blur */
  position: relative; z-index: 1;
  padding-block: clamp(28px, 3.5vw, 44px) calc(clamp(28px, 3.5vw, 44px) + var(--word) * .68 + env(safe-area-inset-bottom, 0px));   /* room for the wordmark */
  background:
    repeating-linear-gradient(90deg, rgba(255, 228, 196, .07) 0 1px, rgba(255, 228, 196, 0) 1px 7px, rgba(0, 0, 0, .09) 7px 9px, rgba(0, 0, 0, 0) 9px 10px),
    linear-gradient(180deg, rgba(255, 214, 170, .08), rgba(255, 214, 170, 0) 30%),
    rgba(61, 35, 20, .58);
  -webkit-backdrop-filter: blur(6px) saturate(1.3); backdrop-filter: blur(6px) saturate(1.3);
  border-top: 1px solid rgba(255, 214, 170, .26);
  box-shadow: inset 0 1px 0 rgba(255, 230, 200, .12), 0 -12px 30px -18px rgba(0, 0, 0, .6);
}
@media (max-width: 599px) { .foot-glass { -webkit-backdrop-filter: blur(4px) saturate(1.3); backdrop-filter: blur(4px) saturate(1.3); } }   /* smaller letters need less blur to stay readable */
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.foot .mark { width: 26px; height: 26px; }
.foot .brand-name { font-size: 17px; }
.foot-links { display: flex; gap: 24px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.legal { color: var(--muted); }
.foot-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; width: 100%; padding-top: 20px; border-top: 1px solid var(--line); }

/* the Light/Dark switch: a mirror-chrome ball that slides along a brushed-steel track (light) or a dark one (dark) */
.theme-switch { position: relative; z-index: 2; display: none; align-items: center; gap: 10px; padding: 4px 0; background: none; border: 0; color: var(--muted); font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.js .theme-switch { display: inline-flex; }
.ts-track {
  position: relative; width: 58px; height: 30px; border-radius: 999px; flex: none;
  background: var(--stainless-bands), var(--brushed), var(--steel);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .12);
  border: 1px solid rgba(0, 0, 0, .4);
}
.ts-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  --kx: 0%;
  background-color: #8f877f;
  background-image:
    radial-gradient(circle at calc(34% + var(--kx) * .4) 26%, #fff 0 9%, rgba(255, 255, 255, 0) 17%),                       /* window */
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 56%, rgba(12, 7, 4, .55) 72%),                                        /* the rim turns away */
    radial-gradient(ellipse 120% 100% at calc(50% + var(--kx)) 118%, #e2b48a 0 18%, #8a5a3c 34%, #3a2419 46%, #1c120d 50%, rgba(28, 18, 13, 0) 51%),   /* floor, curved horizon */
    linear-gradient(180deg, #fbf8f3 0%, #ded8d0 34%, #9a9189 52%, #6c635b 100%);                                              /* ceiling and walls */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .5);
  transition: transform .45s cubic-bezier(.5, 1.4, .4, 1);
}
.ts-word.is-on { color: var(--ink); }
.theme-switch[aria-checked="true"] .ts-track { background: linear-gradient(180deg, #1a0e08, #2e1a0f); border-color: rgba(220, 150, 90, .4); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 225, 190, .12); }
.theme-switch[aria-checked="true"] .ts-knob { transform: translateX(28px); }

/* ---------------------------------------------------------------- inner pages (privacy, 404) */
.page { padding-block: clamp(56px, 9vw, 120px) clamp(80px, 10vw, 140px); }
.page h1 { font-size: clamp(48px, 8vw, 104px); line-height: .98; letter-spacing: -.032em; font-weight: 700; font-variation-settings: 'opsz' 96; font-stretch: 88%; margin-top: 18px; }
.page .meta { margin-top: 18px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prose { max-width: 680px; margin-top: clamp(40px, 6vw, 72px); }
.prose h2 { font-size: 24px; letter-spacing: -.02em; font-weight: 650; font-variation-settings: 'opsz' 32; margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 12px; color: var(--muted); }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--ink); text-decoration-color: var(--signal); }
.lost { min-height: calc(100svh - 69px); display: flex; flex-direction: column; }
.lost .page { padding-bottom: 32px; }
.lost .lede { margin-top: 20px; }
.lost .actions { margin-top: 32px; }
.ridge-flat { height: clamp(200px, 34vh, 360px); margin-top: auto; }

/* ---------------------------------------------------------------- fade in on scroll (only with the script running) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.points li[data-reveal]:nth-child(2) { transition-delay: .08s; }
.points li[data-reveal]:nth-child(3) { transition-delay: .16s; }
.games > [data-reveal]:nth-child(2) { transition-delay: .1s; }
.hero [data-reveal]:nth-child(2) { transition-delay: .06s; }
.hero [data-reveal]:nth-child(3) { transition-delay: .14s; }
.section-head h2[data-reveal], .studio-head h2[data-reveal] { transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .chip-dot.is-live { animation: none; }
  .btn, .pill, .game, .game-art > img, .game-logo, .ts-knob { transition: none; }
}