/* ==========================================================================
   Cyan Shark Games — studio site
   --------------------------------------------------------------------------
   Deep-ocean identity (v2): navy abyss + electric cyan, drawn from the
   studio logo and the sample_reference/ homepage. Dark-native, single theme.
   Fonts are self-hosted — the privacy policy promises no external requests,
   and that must stay true. Measured WCAG ratios noted where they matter.
   --------------------------------------------------------------------------
   SEVEN FILES, AND THE ORDER IS THE CASCADE. This was one 2,094-line
   stylesheet. It is now base, chrome, hero, catalog, pages, support, footer —
   split at the section comments it already carried, every boundary checked to
   be at brace depth zero so none could land inside an @media block, and the
   seven proved to join back into exactly the bytes the single file held.
   Later rules win, so a page that lists them out of order gets a different
   site, and every page must list them AFTER nothing and BEFORE its own.

   EVERY PAGE LOADS ALL SEVEN, including the ones that use none of the catalog
   rules. Working out per page which parts it needs would be a smaller download
   and a standing invitation to be wrong once — and wrong here means a page
   that looks broken in production and correct in every test that did not think
   to load it. Seven cached files against that trade is not a close call.

   They are separate <link>s rather than @import for the reason @import exists
   to be avoided: an import is only discovered once the file naming it has been
   fetched and parsed, so it costs a round trip before the parts are even
   requested, and CSS blocks the first paint. Twelve pages carrying seven lines
   each is duplication this site already lives with — the header and footer are
   copied into every page too, for the same want of a build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (latin subsets, self-hosted — see assets/fonts/)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Orbitron";
  src: url("/assets/fonts/orbitron-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo 2";
  src: url("/assets/fonts/exo2-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo 2";
  src: url("/assets/fonts/exo2-latin-italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Share Tech Mono";
  src: url("/assets/fonts/share-tech-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens — dark-native, single theme
   -------------------------------------------------------------------------- */
:root {
  --bg: #020b18;        /* the deep            */
  --bg-2: #081a2e;      /* mid strip           */
  --paper: #0c1e34;     /* card                */
  --surface: #112240;

  --ink: #c8d6e5;       /* body — 13.4 on bg, 11.4 on card */
  --bright: #eaf0ff;    /* headings — 17.3     */
  --muted: #7a8ba6;     /* dim — 5.7 / 4.85    */

  --accent: #00e5ff;    /* electric cyan — 12.8 on bg      */
  --accent-dark: #00b8d4;
  --accent-2: #ff8c42;  /* abyss orange — 8.5 on bg        */
  --pink: #ff2d75;
  --purple: #a855f7;
  --green: #10b981;

  /* aliases kept for shared components (small-text safe as-is) */
  --accent-ink: var(--accent);
  --accent-2-ink: var(--accent-2);

  --bdr: rgba(0, 229, 255, 0.09);
  --bdr2: rgba(0, 229, 255, 0.28);
  --glow: rgba(0, 229, 255, 0.28);

  /* Component boundaries and form fields. SOLID values, never alpha — an alpha
     border composites against whatever sits behind it, which is exactly how the
     same declaration drew a visible edge in deep and nothing at all on cream.
     Ratios below are measured per theme (WCAG 2.x relative luminance). */
  --edge: #26809a;              /* vs --bg 4.36 · --paper 3.71 · --surface 3.49 */
  --field-bg: var(--surface);
  --field-fg: var(--ink);       /* deep 11.12 · daylight 9.47 · midnight 11.81 */
  --field-ph: var(--muted);     /* deep 4.75 · daylight 6.59 · midnight 5.58 */
  --field-bdr: var(--edge);
  --field-bdr-hover: var(--accent);
  --field-bdr-focus: var(--accent);
  --field-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --field-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --key-a-bg: var(--bg);        /* an absent key sinks below the live key fill */
  --key-a-fg: var(--muted);     /* 5.66 on --key-a-bg */

  --btn-bg: var(--accent);
  --btn-fg: var(--bg);

  --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 34px -16px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 229, 255, 0.06);

  --font-display: "Orbitron", "Exo 2", sans-serif;
  --font-body: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", Consolas, ui-monospace, monospace;

  /* game feedback tiles — familiar semantics (green correct / amber present
     / grey absent) in the studio's own shades, tuned per theme */
  --tile-c: #33d17a;
  --tile-c-fg: #05291b;
  --tile-p: #f5c342;
  --tile-p-fg: #3a2c05;
  --tile-a: var(--surface);
  --tile-a-fg: var(--muted);

  --badge-fg: var(--bg);
  --logo-glow: rgba(0, 229, 255, 0.3);
  --bubble: rgba(0, 229, 255, 0.5);
  --ocean-bg:
    linear-gradient(180deg, transparent 0%, rgba(2, 11, 24, 0.3) 50%, var(--bg) 100%),
    linear-gradient(135deg, #0a2463 0%, #1e6091 30%, #00b4d8 60%, #0a2463 100%);
  --ocean-veil:
    radial-gradient(ellipse 60% 50% at 30% 70%, rgba(0, 229, 255, 0.08), transparent),
    linear-gradient(180deg, rgba(2, 11, 24, 0.35) 0%, rgba(2, 11, 24, 0.6) 60%, var(--bg) 100%);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Themes — deep is the default above; daylight and midnight override.
   Every value here has a measured WCAG ratio (see git: contrast3 run).
   -------------------------------------------------------------------------- */
[data-theme="daylight"] {
  --bg: #efe7d7;
  --bg-2: #e6dcc6;
  --paper: #fffaef;
  --surface: #f3ecdc;

  --ink: #4a443a;
  --bright: #1a1410;
  --muted: #635b4d;   /* 4.92 on --bg-2 (was #6b6354 = 4.36, AA fail) · 5.45 on --bg */

  --accent: #b23607;
  --accent-dark: #8f2b06;
  --accent-2: #7d5a04;
  --pink: #c2185b;
  --purple: #6d3fd1;
  --green: #1e7e4d;

  --accent-ink: var(--accent);
  --accent-2-ink: var(--accent-2);

  /* Stronger than the dark themes' borders, deliberately. On the deep page a
     card is #0c1e34 against #020b18 — a real step, so a whisper of a border
     finishes it. On cream, #fffaef against #efe7d7 is barely a step at all,
     and at 0.12 the border vanished with it: every panel on the site read as
     loose text rather than as a card. The edge has to do the work the fill
     cannot. This is a border alpha, not a text colour — no measured contrast
     ratio moves. */
  --bdr: rgba(26, 20, 16, 0.22);
  --bdr2: rgba(26, 20, 16, 0.38);
  --glow: rgba(178, 54, 7, 0.16);

  --edge: #867d6d;              /* vs --bg 3.31 · --paper 3.90 · --surface 3.45 */
  --field-bg: var(--paper);     /* a real lift over the cream page */
  --field-shadow: inset 0 1px 2px rgba(26, 20, 16, 0.07);
  --key-a-bg: var(--tile-a);    /* #b8b0a0 */
  --key-a-fg: var(--tile-a-fg); /* #3d382e — 5.41 on --key-a-bg */

  --btn-bg: var(--accent);
  --btn-fg: #fffaef;

  --shadow-1: 0 1px 2px rgba(26, 20, 16, 0.06), 0 12px 30px -18px rgba(26, 20, 16, 0.3);
  --shadow-2: 0 16px 44px rgba(26, 20, 16, 0.14), 0 0 30px rgba(178, 54, 7, 0.05);

  --tile-c: #1e7e4d;   /* #ffffff on it = 5.06 (was #2b8f56 = 4.06, AA fail at key size) */
  --tile-c-fg: #ffffff;
  --tile-p: #d6a41c;
  --tile-p-fg: #3b2f04;
  --tile-a: #b8b0a0;
  --tile-a-fg: #3d382e;

  --badge-fg: #fffaef;
  --logo-glow: rgba(26, 20, 16, 0.25);
  --bubble: rgba(20, 110, 130, 0.35);
  --ocean-bg:
    linear-gradient(180deg, transparent 0%, rgba(239, 231, 215, 0.35) 55%, var(--bg) 100%),
    linear-gradient(135deg, #bfe3ea 0%, #7ec8d6 35%, #57b7c9 62%, #cfe7ec 100%);
  --ocean-veil:
    radial-gradient(ellipse 60% 50% at 30% 70%, rgba(255, 255, 255, 0.25), transparent),
    linear-gradient(180deg, rgba(239, 231, 215, 0.25) 0%, rgba(239, 231, 215, 0.55) 60%, var(--bg) 100%);

  color-scheme: light;
}

[data-theme="midnight"] {
  --bg: #0a0c11;
  --bg-2: #0e1118;
  --paper: #12151c;
  --surface: #1a1e27;

  --ink: #cfd6e4;
  --bright: #eef2f8;
  --muted: #8a93a6;

  --bdr: rgba(0, 229, 255, 0.08);
  --bdr2: rgba(0, 229, 255, 0.25);

  --edge: #3f7d8f;              /* vs --bg 4.23 · --paper 3.95 · --surface 3.61 */
  --field-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  --key-a-bg: var(--tile-a);    /* #232936 */
  --key-a-fg: var(--tile-a-fg); /* #98a2b5 — 5.67 on --key-a-bg */

  --tile-c: #3ddc84;
  --tile-c-fg: #05291b;
  --tile-p: #ffd54a;
  --tile-p-fg: #3a2c05;
  --tile-a: #232936;
  --tile-a-fg: #98a2b5;

  --badge-fg: #05070b;
  --bubble: rgba(0, 229, 255, 0.4);
  --ocean-bg:
    linear-gradient(180deg, transparent 0%, rgba(10, 12, 17, 0.4) 50%, var(--bg) 100%),
    linear-gradient(135deg, #060a14 0%, #0b1a30 40%, #10344a 70%, #060a14 100%);
  --ocean-veil:
    radial-gradient(ellipse 60% 50% at 30% 70%, rgba(0, 229, 255, 0.06), transparent),
    linear-gradient(180deg, rgba(10, 12, 17, 0.4) 0%, rgba(10, 12, 17, 0.65) 60%, var(--bg) 100%);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}
html:focus-within {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* the hidden attribute always wins, even against display'd components */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--bright);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1,
.display {
  font-size: clamp(2.3rem, 5vw + 0.8rem, 4.2rem);
  font-weight: 900;
  line-height: 1.05;
}
h2 {
  font-size: clamp(1.5rem, 2.6vw + 0.6rem, 2.3rem);
  font-weight: 800;
}
h3 {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}

/* accent words — cyan, upright (Orbitron carries the style) */
h1 em,
h2 em,
.display em {
  font-style: normal;
  color: var(--accent);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 150ms ease;
}
a:hover {
  color: var(--bright);
}

.lede {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 40rem;
  text-wrap: pretty;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "//";
  opacity: 0.7;
}

.small,
small {
  font-size: 0.85rem;
}

.muted {
  color: var(--muted);
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.75rem, 74rem);
  margin-inline: auto;
}
.wrap-narrow {
  width: min(100% - 2.75rem, 46rem);
  margin-inline: auto;
}

/* 2.75rem of gutter is 44px, and on a 320px phone that is 14% of the screen
   spent on margin before a word is read — it also left the header's five nav
   links 12px short of a single row. 2rem keeps the copy off the edge and
   gives every page, card and hero paragraph that width back. */
@media (max-width: 49rem) {
  .wrap { width: min(100% - 2rem, 74rem); }
  .wrap-narrow { width: min(100% - 2rem, 46rem); }
}

.section {
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.section-tight {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.rule {
  border: 0;
  border-top: 1px solid var(--bdr);
  margin: 0;
}

[id] {
  scroll-margin-top: 5.5rem;
}