/* Saris Technology legal site - the game's own look: navy + orange, the parallelogram motif, Saira Condensed
   headings over Roboto text (the same two faces the game's UI uses). Fonts are self-hosted on purpose: loading
   them from Google's servers would send every visitor's IP address to Google without consent.
   Built by Scripts/build_legal_site.py; docs/release/legal-site.md. */

@font-face { font-family: "Saira Condensed"; font-weight: 700; font-display: swap;
  src: url("fonts/saira-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 900; font-display: swap;
  src: url("fonts/saira-condensed-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap;
  src: url("fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/roboto-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap;
  src: url("fonts/roboto-latin-700-normal.woff2") format("woff2"); }

:root {
  --navy: #0e1a2b;
  --navy-light: #1b2f4a;
  --navy-dark: #070e18;
  --orange: #ff7a1a;
  --orange-soft: #ffa45c;
  --skew: -12deg;

  --bg: #0b1420;
  --surface: #101c2c;
  --text: #e6ecf2;
  --muted: #9fb0c3;
  --rule: #22344d;
  --link: #ffa45c;
  --table-head: #1b2f4a;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f5f8;
    --surface: #ffffff;
    --text: #16202d;
    --muted: #4f5f72;
    --rule: #d5dce5;
    --link: #b4500d;          /* the brand orange fails contrast on white; same hue, darker */
    --table-head: #0e1a2b;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wrap { max-width: 50rem; margin: 0 auto; padding: 0 16px; }

a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--orange); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--orange); color: var(--navy); padding: .5rem 1rem; }
.skip:focus { left: 16px; z-index: 10; }

/* ---- header: the navy bar with the one full-strength orange rule ---- */
.site-header { background: var(--navy); border-bottom: 3px solid var(--orange); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; flex-wrap: wrap; }
.brand {
  display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none;
  font: 900 1.35rem/1 "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em;
}
.brand .mark { width: 1.6rem; height: 1.6rem; }
.brand:hover { color: #fff; }

/* ---- parallelogram chips: skew the box, un-skew the words ---- */
.site-nav, .game-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-block; transform: skewX(var(--skew)); text-decoration: none;
  padding: .3rem .8rem; border: 1px solid rgba(255, 255, 255, .22); color: #dfe7f0;
  font: 700 .95rem/1.2 "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em;
}
.chip > span { display: inline-block; transform: skewX(calc(-1 * var(--skew))); }
.chip:hover { border-color: var(--orange); color: #fff; }
.chip[aria-current="page"] { background: var(--orange); border-color: var(--orange); color: var(--navy); }

/* ---- hero: the offset gradient, top-left light to bottom-right dark ---- */
.hero {
  background: linear-gradient(112.5deg, var(--navy-light) 0%, var(--navy) 55%, var(--navy-dark) 100%);
  color: #fff; padding: 2.25rem 0 1.5rem;
}
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hero h1 {
  margin: 0; font: 900 clamp(2.1rem, 6vw, 3.4rem)/1 "Saira Condensed", sans-serif;
  text-transform: uppercase; letter-spacing: .015em;
}
.kicker {
  margin: 0 0 .4rem; color: var(--orange-soft);
  font: 700 1rem/1.2 "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: .12em;
}
.updated { margin: .9rem 0 0; }
.updated span {
  display: inline-block; padding: .15rem .6rem; background: rgba(255, 255, 255, .08);
  border-left: 3px solid var(--orange); color: #c9d5e2; font-size: .9rem;
}
.hero-mark .mark { width: 5.5rem; height: 5.5rem; opacity: .9; }
.hero .game-nav { margin-top: 1.4rem; }
@media (max-width: 560px) { .hero-mark { display: none; } }

/* ---- the reading column ---- */
.prose { padding-top: 2rem; padding-bottom: 3rem; overflow-wrap: break-word; }
.prose h2, .prose h3, .prose h4 {
  font-family: "Saira Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1.15; scroll-margin-top: 1rem;
}
.prose h2 { font-size: 1.6rem; margin: 2.4rem 0 .8rem; display: flex; align-items: center; gap: .55rem; }
.prose h2::before {
  content: ""; flex: none; width: .5rem; height: 1.1rem; background: var(--orange); transform: skewX(var(--skew));
}
.prose h3 { font-size: 1.25rem; margin: 1.8rem 0 .6rem; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
.prose li { margin: .3rem 0; }
.prose strong { font-weight: 700; }
.prose code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }

.table { overflow-x: auto; margin: 0 0 1.25rem; }
.prose table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: .97rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .55rem .8rem; border: 1px solid var(--rule); }
.prose thead th { background: var(--table-head); color: #fff; font-weight: 700; }
.prose tbody th { font-weight: 700; width: 34%; }

/* ---- footer: the company disclosures UK law asks a company website to show ---- */
.site-footer { background: var(--navy-dark); color: #9fb0c3; border-top: 3px solid var(--orange); padding: 1.5rem 0 2rem; font-size: .9rem; }
.site-footer p { margin: .25rem 0; }
.site-footer strong { color: #fff; }
.site-footer a { color: var(--orange-soft); }

@media print {
  .site-header, .hero, .site-footer { background: none !important; color: #000 !important; border: none; }
  .site-nav, .game-nav, .hero-mark, .skip { display: none; }
  body { background: #fff; color: #000; }
  .prose thead th { background: #eee; color: #000; }
  a { color: #000; }
}