/* The static pages — both FAQs and the three legal pages — on GRIDIGMA's own system.

   S432, on the owner's ruling that these pages go on our palette. Before this they carried five
   copies of an inline stylesheet with nine invented colours and the system font, which is why
   they looked like a different product from the game linking to them.

   Everything here is read from `src/styles.css` and from the S428 type ruling
   (`docs/design/2026-09-08-type-scale-and-rhythm.md`); nothing invents a colour, a size or a
   radius. The values are DUPLICATED rather than imported, because these pages are served as flat
   files with no build step — so `src/test/staticPagePalette.test.ts` pins every one of them
   against the stylesheet and goes red when the two drift.

   Theme: the app reads a stored setting and stamps an attribute. A static page has no script and
   no setting, so it follows the device instead. Same two palettes either way. */

/* ---- The two faces. Latin-ext carries Turkish, and the Turkish FAQ is the reason it is here. --- */
@font-face {
  font-family: "Petrona";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/petrona-latin-ext-400-normal.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: "Petrona";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/petrona-latin-400-normal.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: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext-400-normal.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: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/archivo-latin-400-normal.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: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext-700-normal.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: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/archivo-latin-700-normal.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;
}

:root {
  color-scheme: light;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  --ink: #241F1A;
  --accent: #B8762B;
  --on-accent: #FAF4E8;
  --surface: #EFE6D5;
  --panel: #FAF4E8;
  --muted: #4D4A3C;
  --line: #DFD1B8;
  --accent-wash: #F4E9D2;
  --accent-text: #8A5A1C;
  --hairline: #E9DECA;

  --font-voice: "Petrona", Georgia, "Times New Roman", serif;
  --font-machine: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-eyebrow: 10px;
  --text-note: 13px;
  --text-body: 16px;
  --text-heading: 20px;
  --text-title: 27px;
  --leading-body: 1.55;
  --leading-heading: 1.25;
  --leading-title: 1.06;

  --rhythm-header: 32px;
  --rhythm-section: 20px;
  --rhythm-inside: 20px;
  --rhythm-heading: 16px;

  --radius-card: 14px;
  --radius-pill: 999px;
  --measure-read: 66ch;
  --gutter: 16px;

  /* The top bar's tokens, copied from the app's `:root` (src/styles.css) — S435 (owner): the
     bar on these pages must be the app's bar. --linestrong and --headerbar are the app's values
     for both themes; --header-el-h is the app's shared element height (logo, wordmark, pill) and
     --header-h the bar it derives; the wordmark is 0.6 of the element (owner S261 item 7). */
  --linestrong: #C9BA9E;
  --headerbar: rgba(239, 230, 213, 0.94);
  --header-el-h: clamp(20px, calc((min(100vw, 100vh) - 150px) / 8), 48px);
  --header-h: calc(var(--header-el-h) * 1.5);
}

@media (min-width: 760px) {
  :root {
    --gutter: 28px;
    --text-title: 34px;
    --rhythm-header: 36px;
    --rhythm-section: 24px;
    --rhythm-inside: 24px;
    --rhythm-heading: 18px;
  }
}

@media (min-width: 1120px) {
  :root {
    --gutter: 44px;
    --text-title: 42px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ink: #EDE6D8;
    --accent: #C58B33;
    --on-accent: #1E1913;
    --surface: #17130F;
    --panel: #221D18;
    --muted: #BAB2A2;
    --line: #322A20;
    --accent-wash: #332818;
    --accent-text: #DCA94F;
    --hairline: #2A231A;
    --linestrong: #554836;
    --headerbar: rgba(23, 19, 15, 0.94);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* S434: the top bar is full-bleed, so the page's own breathing room moved onto `.page`. */
  padding: 0 0 64px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-machine);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.page {
  max-width: var(--measure-read);
  margin: 0 auto;
  padding-top: 28px;
  padding-inline: var(--gutter);
}

/* ---- The header block: eyebrow, title, lede. One of each, at the top, and nowhere else. ---- */
.page__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.page__eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
  flex: none;
}

h1 {
  margin: 0;
  font-family: var(--font-voice);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: var(--leading-title);
  letter-spacing: -0.015em;
}

.lead,
.effective-date {
  margin: 10px 0 0;
  font-family: var(--font-voice);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--muted);
}

/* ---- The contents row on the FAQ: the group names, as links. ---- */
.contents {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  font-size: var(--text-note);
}

.contents a { text-decoration: none; }

/* ---- A section is a CARD: panel ground, one hairline, its rows inside it. ---- */
.card {
  margin: var(--rhythm-section) 0 0;
  padding: var(--rhythm-inside);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.page > .card:first-of-type,
.group + .card {
  margin-top: var(--rhythm-header);
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* The FAQ's group label names the KIND of thing below it, so it is an eyebrow, not a heading. */
.group {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: var(--rhythm-header) 0 0;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  scroll-margin-top: 16px;
}

.group::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
  flex: none;
}

h2:not(.group),
h3 {
  margin: 0 0 var(--rhythm-heading);
  font-family: var(--font-voice);
  font-size: var(--text-heading);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: normal;
  scroll-margin-top: 16px;
}

h3:target {
  background: var(--accent-wash);
  box-shadow: -6px 0 0 var(--accent-wash), 6px 0 0 var(--accent-wash);
}

p { margin: 0.75rem 0; }
ol, ul { margin: 0.75rem 0; padding-left: 1.4rem; }
li { margin: 0.35rem 0; }

a { color: var(--accent-text); }

strong { font-weight: 700; }

/* ---- The head (S434, owner): the app's own top bar — sticky, the mark and wordmark home, a way
   back on the right — so these pages share what every screen shares. ---- */
/* Mirrors `.global-header` in src/styles.css rule for rule (S435, owner: "this screen and any
   other screen has to be the same in terms of common things"). A value here that differs from
   the app's is a defect; e2e/static-page-header.spec.ts measures the two bars against each other. */
.page-header {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--headerbar);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.page-header__inner {
  width: min(100%, 1440px);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* = .global-header__identity: 6px on a phone, 13px from 760px. */
.page-header__home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

@media (min-width: 760px) {
  .page-header__home {
    gap: 13px;
  }
}

/* = .global-header__logo */
.page-header__logo {
  height: var(--header-el-h);
  width: auto;
  display: block;
  flex: none;
}

/* = .global-header__brand */
.page-header__brand {
  font-family: var(--font-machine);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: calc(var(--header-el-h) * 0.6);
  line-height: var(--header-el-h);
  white-space: nowrap;
  color: var(--ink);
}

/* = .language-switch__trigger: the one pill the app's bar carries, so the way back reads as a
   control of that bar and not as a button pasted onto it. */
.page-header__back {
  display: inline-flex;
  align-items: center;
  height: clamp(30px, var(--header-el-h), 40px);
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid var(--linestrong);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-machine);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.page-header__back:hover {
  color: var(--ink);
}

/* ---- The foot: where you came from, and the one note. ---- */
nav {
  margin-top: var(--rhythm-header);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--text-note);
}

footer {
  margin-top: 16px;
  font-size: var(--text-note);
  line-height: 1.5;
  color: var(--muted);
}