/* Layout: Gower after dark. Giant condensed type over the night sea, a working model of the bay,
   and the games on a rail you drag like a reel of film. A single dark look, by choice. */
:root {
  --bg: #071419;          /* night sea */
  --bg-2: #0B1D24;
  --surface: #102830;
  --ink: #EDEBE4;         /* limestone */
  --muted: #93A8AF;
  --line: #1E3943;
  --accent: #FF4433;      /* signal red */
  --accent-ink: #071419;
  --signal: #FF4433;
  --shelf: #1E3943;

  /* the bay, at night */
  --night: 1;
  --sky: #0B1D2A;
  --sun: #EFE9CF;
  --sea: #1B566F;
  --deep: #0F3A4D;
  --shallow: #2E7C8B;
  --foam: #9DC7CA;
  --sand: #A39170;
  --wet: #887859;
  --grass: #3F6A3E;
  --grass2: #365D36;
  --earth: #5A4632;
  --stone: #6E6A63;
  --rock: #A7A39B;
  --rock2: #8E8A82;
  --castle: #66625B;
  --gorse: #A88A22;

  /* game dioramas */
  --sky-space: #0E1230;
  --sky-forest: #183844;
  --sky-table: #4A3A33;
  --sky-front: #6E757B;
  --sky-village: #6FA9B8;

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; display: block; }
a { color: var(--signal); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap {
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.label { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.label b { color: var(--accent); font-weight: 600; }

/* ---------- header ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-decoration: none; min-height: 44px; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand rect { fill: var(--accent); }
.brand path { stroke: var(--accent-ink); }
.top nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.top nav a { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); text-decoration: none; padding-block: 12px; position: relative; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 2px; background: var(--accent); transition: right .25s ease; }
.top nav a:hover::after { right: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; border: 1px solid var(--accent); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--accent); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn svg { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }

/* ---------- hero ---------- */
.hero { padding-block: 36px 64px; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.hero-meta time { color: var(--ink); font-variant-numeric: tabular-nums; }
.hero h1 {
  margin-top: 28px; font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(4.6rem, 19.5vw, 19rem); line-height: 0.8; letter-spacing: -0.005em;
}
.hero h1 .line, .page-hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.03em; white-space: nowrap; }
.hero h1 .line + .line { color: var(--accent); text-align: right; }
.ch { display: inline-block; }
.split .ch { animation: rise .95s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 40ms + var(--d, 0ms)); }
html.is-loading .split .ch { animation-play-state: paused; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; margin-top: 36px; }
.hero-foot p { max-width: 44ch; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.scroll-cue { display: flex; align-items: center; gap: 14px; }
.scroll-cue::after { content: ""; width: 64px; height: 1px; background: var(--muted); transform-origin: left; animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 720px) { .hero-foot { grid-template-columns: minmax(0, 1fr); } }

/* ---------- marquees ---------- */
.marquee-clip { overflow: hidden; padding-block: 36px; margin-bottom: 60px; }
.marquees { transform: rotate(-2deg); margin-inline: -24px; }
.marquee { overflow: hidden; background: var(--accent); color: var(--accent-ink); }
.marquee + .marquee { background: var(--bg-2); color: var(--ink); border-block: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; animation: marq 38s linear infinite; }
.marquee + .marquee .marquee-track { animation-direction: reverse; animation-duration: 46s; }
.marquee-track span {
  display: flex; align-items: center; gap: 0.45em; padding: 0.2em 0.45em 0.2em 0;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.05; white-space: nowrap;
}
.marquee-track span::after { content: ""; width: 0.32em; height: 0.32em; background: currentColor; transform: rotate(45deg); }
.marquee + .marquee .marquee-track span { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.marquee + .marquee .marquee-track span::after { background: var(--accent); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- section heads ---------- */
section { padding-block: 0 120px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; margin-bottom: 40px; }
.sec-head > div:first-child { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.big { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: 0.84; }
.big em { font-style: normal; color: var(--accent); }

/* ---------- the bay ---------- */
.bay-frame { position: relative; background: var(--sky); border-radius: 20px; overflow: hidden; max-width: 100%; border: 1px solid var(--line); }
.bay-frame canvas { display: block; width: 100%; aspect-ratio: 16 / 8; cursor: grab; touch-action: pan-y; }
.bay-frame canvas:active { cursor: grabbing; }
@media (max-width: 700px) { .bay-frame canvas { aspect-ratio: 4 / 3; } }
.bay-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 18px; }
.bay-caption { display: flex; flex-direction: column; gap: 4px; }
.bay-caption b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tide { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.tide input { width: min(170px, 40vw); accent-color: var(--accent); min-height: 44px; }
.tide output { min-width: 4.5ch; font-weight: 600; color: var(--accent); }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* live tide */
.tide-badge { position: absolute; top: 14px; left: 14px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); max-width: calc(100% - 28px); }
.tide-badge b { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tide-badge.is-live .label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.tide-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px 44px; margin-top: 22px; align-items: start; }
.tide-stats { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.tide-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.tide-stats b { font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; text-transform: uppercase; font-variant-numeric: tabular-nums; text-align: right; }
.tide-scrub { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tide-scrub-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.tide-scrub-head output { color: var(--accent); font-variant-numeric: tabular-nums; }
.tide-curve { display: block; width: 100%; height: 120px; }
.tide-scrub input { width: 100%; margin: 0; min-height: 44px; accent-color: var(--accent); }
.tide-note { grid-column: 1 / -1; text-transform: none; letter-spacing: 0.02em; }
.tide-note a { color: var(--muted); }
@media (max-width: 820px) { .tide-panel { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tide-badge.is-live .label::before { animation: none; } }

/* ---------- what we make ---------- */
.make { list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
.make li { display: grid; grid-template-columns: minmax(90px, 200px) minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 40px; padding-block: 36px; border-top: 1px solid var(--line); align-items: start; }
.make .num { font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 8vw, 7rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--muted); transition: color .3s, -webkit-text-stroke-color .3s; font-variant-numeric: tabular-nums; }
.make li:hover .num { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.make h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 0.9; }
.make .tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.make .tags li { all: unset; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.make-body { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.make-body p { color: var(--muted); max-width: 46ch; }
.make-body .lede { color: var(--ink); font-size: 1.15rem; }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); text-decoration: none; }
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 820px) { .make li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- games rail ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.rail {
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(20px, calc((100% - 1200px) / 2)); scroll-padding-inline: max(20px, calc((100% - 1200px) / 2));
  cursor: grab; outline-offset: -4px;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail.dragging a { pointer-events: none; }
.card { flex: 0 0 clamp(280px, 40vw, 540px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card[hidden] { display: none; }
.diorama { background: var(--sky-scene); border-radius: 18px; overflow: hidden; max-width: 100%; border: 1px solid var(--line); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.card:hover .diorama { transform: translateY(-6px); }
.diorama canvas { display: block; width: 100%; aspect-ratio: 4 / 3; pointer-events: none; }
.card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.plate { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.status { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; background: var(--accent); color: var(--accent-ink); padding: 4px 8px; border-radius: 999px; font-weight: 600; }
.card h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 0.9; }
.card p { color: var(--muted); font-size: 0.98rem; max-width: 46ch; }
.rail-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 28px; }
.counter { font-variant-numeric: tabular-nums; }
.arrows { display: flex; gap: 10px; }
.arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color .2s, background-color .2s, color .2s; }
.arrow:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.arrow:disabled { opacity: 0.35; cursor: default; }
.arrow svg { width: 18px; height: 18px; }
.minimap-wrap { flex: 1 1 280px; max-width: 460px; display: flex; flex-direction: column; gap: 8px; }
.minimap { position: relative; display: flex; gap: 4px; height: 40px; cursor: grab; touch-action: none; }
.mm-card { flex: 1; background: var(--surface); border-radius: 5px; background-size: cover; }
.mm-view { position: absolute; top: -4px; bottom: -4px; left: 0; width: 20%; border: 2px solid var(--accent); border-radius: 8px; pointer-events: none; }

/* ---------- studio ---------- */
.studio { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px 72px; }
.studio-copy { display: flex; flex-direction: column; gap: 16px; }
.studio-copy p { max-width: 54ch; color: var(--muted); }
.studio-copy .lede { color: var(--ink); font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.35; }
.engines { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.engines div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.engines dt { font-weight: 600; }
.engines dd { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-align: right; }
@media (max-width: 820px) { .studio { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sign-up ---------- */
.signup { padding-block: 0 96px; }
.signup-box { border-radius: 28px; background: var(--accent); color: var(--accent-ink); padding: clamp(28px, 6vw, 72px); display: flex; flex-direction: column; gap: 28px; }
.signup-box .big { font-size: clamp(3rem, 10vw, 8rem); }
.signup-box form { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.signup-box label { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; }
.field-row input { flex: 1 1 240px; min-width: 0; min-height: 54px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--accent-ink); background: transparent; color: var(--accent-ink); font: inherit; }
.field-row input::placeholder { color: color-mix(in srgb, var(--accent-ink) 60%, transparent); }
.signup-box .btn { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); }
.signup-box .btn:hover { background: transparent; color: var(--accent-ink); }
.signup-box :focus-visible { outline-color: var(--accent-ink); }
.form-note { min-height: 1.5em; font-size: 0.95rem; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); }
.foot-marquee { overflow: hidden; padding-block: 28px; }
.foot-marquee .marquee-track span { color: transparent; -webkit-text-stroke: 1.5px var(--muted); font-size: clamp(3rem, 9vw, 7rem); }
.foot-marquee .marquee-track span::after { background: var(--accent); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; padding-block: 20px 40px; }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-bottom a, .foot-bottom .textlink { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding-block: 12px; }
.foot-bottom .textlink { color: var(--accent); }

/* ---------- Cliff Hop ---------- */
dialog.game { width: min(760px, calc(100vw - 32px)); max-width: none; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2); color: var(--ink); }
dialog.game::backdrop { background: rgba(3, 10, 13, 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.game-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.game-head h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 2rem; line-height: 1; }
.game canvas, .game-inline canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; touch-action: none; cursor: pointer; background: var(--sky); }
.game-help { margin-top: 12px; }

/* ---------- loader and cursor ---------- */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: max(24px, env(safe-area-inset-left, 0px)); padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); transition: transform .8s cubic-bezier(.75, 0, .2, 1); }
.loader.done { transform: translateY(-100%); }
.loader-count { font-family: var(--display); font-weight: 900; font-size: clamp(7rem, 32vw, 24rem); line-height: 0.78; color: var(--accent); font-variant-numeric: tabular-nums; }
.loader-bar { height: 2px; background: var(--line); }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.cursor { position: fixed; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 150; transition: width .2s, height .2s, margin .2s, background-color .2s; }
.cursor.big { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---------- legal and 404 pages ---------- */
.legal { max-width: 780px; padding-block: 40px 96px; }
.legal h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 9vw, 5.5rem); line-height: 0.88; }
.legal .meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin: 14px 0 30px; }
.legal .summary { background: var(--surface); border-radius: 18px; padding: 20px 24px; }
.legal h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin: 44px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.legal p, .legal li { max-width: 66ch; color: var(--muted); }
.legal strong { color: var(--ink); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.lost { padding-block: 40px 96px; display: flex; flex-direction: column; gap: 24px; }
.lost .game-inline { max-width: 820px; }

/* ---------- inner pages ---------- */
.top nav a[aria-current="page"]::after { right: 0; }
.page-hero { padding-block: 36px 88px; }
.page-hero h1 { margin-top: 24px; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(4rem, 15vw, 15rem); line-height: 0.82; }
.page-hero h1 .line + .line { color: var(--accent); }
.page-hero .intro { margin-top: 32px; max-width: 54ch; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.45; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.member { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--bg-2); display: flex; flex-direction: column; transition: border-color .25s; }
.member:hover { border-color: var(--accent); }
.member-photo { position: relative; aspect-ratio: 4 / 4.2; background: var(--surface); display: grid; place-items: center; overflow: hidden; max-width: 100%; }
.member-photo canvas { width: 62%; aspect-ratio: 1; }
.member-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-photo .status { position: absolute; top: 16px; left: 16px; }
.member-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.member h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 0.9; }
.member .role { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.member p { color: var(--muted); }
.member .links { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* games list */
.game-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; padding-block: 48px; border-top: 1px solid var(--line); }
.game-row:nth-of-type(even) .diorama { order: 2; }
.game-row .card-meta { justify-content: flex-start; }
.game-body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.game-row h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 0.85; }
.game-row p { color: var(--muted); max-width: 48ch; }
.bullets { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 48ch; }
.bullets li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; }
.bullets li::before { content: ""; width: 8px; height: 8px; margin-top: 0.55em; background: var(--accent); transform: rotate(45deg); }
@media (max-width: 820px) { .game-row { grid-template-columns: minmax(0, 1fr); } .game-row:nth-of-type(even) .diorama { order: 0; } }

/* press */
.tiles, .swatches, .channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.tile, .swatch, .channel { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-2); }
.tile-art { aspect-ratio: 16 / 10; display: grid; place-items: center; max-width: 100%; }
.tile-art img { width: 38%; height: auto; }
.tile-art.on-light { background: #EDEBE4; }
.tile-art.on-dark { background: #000000; }
.tile-art.on-red { background: var(--accent); }
.tile-body, .swatch-body { padding: 18px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; }
.tile-body b, .swatch-body b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; line-height: 1; }
.swatch-chip { height: 120px; border-bottom: 1px solid var(--line); }
.copybox { background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 36px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.copybox p { max-width: 68ch; font-size: 1.08rem; }
.copied { color: var(--accent); }

/* contact */
.channel { padding: 24px; gap: 12px; }
.channel h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: 0.95; }
.channel p { color: var(--muted); }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: auto; }
.email { font-family: var(--mono); font-size: 0.74rem; user-select: all; word-break: break-all; color: var(--ink); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px 72px; }
.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-aside p { color: var(--muted); max-width: 44ch; }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.field input, .field select, .field textarea { min-height: 54px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; width: 100%; }
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- motion ---------- */
@supports (animation-timeline: view()) {
  .rise-in { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
  @keyframes lift { from { transform: translateY(40px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .split .ch, .marquee-track, .scroll-cue::after, .rise-in { animation: none; }
  .diorama, .btn, .btn svg, .loader { transition: none; }
  .card:hover .diorama { transform: none; }
}

/* Welsh word under each ethos heading */
.welsh { display: block; margin-top: 10px; color: var(--accent); }
.studio-copy p + p { margin-top: 0; }