/* Cryo Divide — legal pages.

   These pages are built to read like the game's briefing screen, because that is
   the screen a player recognises: the frozen horizon bleeding into white paper,
   two pill tabs with an orange bar under the active one, a small orange kicker
   over a very large condensed headline, and section labels that trail a hairline
   across the page. The palette is the game's own - ice paper, ink navy, and the
   single orange (255,87,4) the command centre uses for the active tab and the
   accept button. Type is the game's type: Oswald for headings, IBM Plex Sans
   Condensed for body, both shipped from this repository so a page about privacy
   never has to hand the reader's address to a font CDN. One light theme only. */

@font-face {
  font-family: 'Cryo Display';
  src: url('fonts/Oswald-Variable.ttf') format('truetype-variations');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cryo Body';
  src: url('fonts/IBMPlexSansCondensed-Medium.ttf') format('truetype');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --paper: #e9eef2;
  --card: #ffffff;
  --ink: #1b252e;
  --muted: #4a5c6b;
  --faint: #7d8c98;
  --accent: #ff5704;
  --line: rgba(27, 37, 46, .12);
  --line-strong: rgba(27, 37, 46, .22);
  --shadow: 0 1px 2px rgba(27, 37, 46, .05), 0 14px 30px rgba(27, 37, 46, .07);
  --display: 'Cryo Display', 'Oswald', 'Arial Narrow', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.62 'Cryo Body', 'IBM Plex Sans Condensed', 'Segoe UI', system-ui, sans-serif;
}

/* ── the briefing header ───────────────────────────────────────────────────
   The photograph sits behind the top of the page and dissolves into paper
   before it reaches the text, exactly as the mission briefing does. It is
   decorative: every word stays on solid paper, so nothing depends on it. */

.masthead {
  position: relative;
  overflow: hidden;
  background: #dbe4ea;
  border-bottom: 1px solid var(--line);
}

.masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Framed low so the ridge line and the snow field carry the header, not the
     empty sky above them. */
  background: url('horizon.jpg') 50% 66% / cover no-repeat;
}

.masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, #eef3f6 0%, rgba(238, 243, 246, .97) 30%, rgba(238, 243, 246, .72) 52%, rgba(238, 243, 246, .18) 78%, rgba(238, 243, 246, .06) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 35%, rgba(233, 238, 242, .85) 100%);
}

.masthead > * { position: relative; z-index: 1; }

.masthead .inner { max-width: 900px; margin: 0 auto; padding: 20px 22px 40px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.brand img { width: 28px; height: 28px; display: block; }

/* The command centre's tab strip: a white slab for the page you are on with the
   orange bar beneath it, a flat translucent one for the page you are not. */
.tabs { display: flex; gap: 8px; }

.tabs a {
  position: relative;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 20px 11px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--line);
  transition: background .15s, color .15s;
}

.tabs a:hover { background: rgba(255, 255, 255, .85); color: var(--ink); }

.tabs a[aria-current='page'] {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.tabs a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.kicker {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(42px, 9vw, 78px);
  line-height: .98;
  letter-spacing: .004em;
  text-transform: uppercase;
  margin: 0 0 18px;
  max-width: 15ch;
}

.lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 54ch;
  margin: 0 0 26px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  padding: 13px 0 0;
  border-top: 1px solid var(--line-strong);
  max-width: 720px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.meta b { color: var(--ink); font-weight: 600; letter-spacing: .06em; }

/* ── body ──────────────────────────────────────────────────────────────── */

.wrap { max-width: 900px; margin: 0 auto; padding: 30px 22px 72px; }

/* Status chips read like the briefing's short facts column. */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0 0 34px;
}

.chip {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.chip .k {
  display: block;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 3px;
}

.chip .v { display: block; font-weight: 600; font-size: 15px; }
.chip.on { border-left-color: var(--accent); }
.chip.off { border-left-color: #2f9e6b; }

section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 26px 24px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

/* The game labels a block with small type and lets a hairline run out to the
   end of the panel. Same here, with the section number in orange. */
h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}

h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.num { color: var(--accent); font-weight: 500; letter-spacing: .1em; }

h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 26px 0 12px;
}

section > h3:first-of-type { margin-top: 2px; }

p { margin: 0 0 12px; }
p:last-child, ul:last-child, .data-table:last-child, .pack:last-child { margin-bottom: 0; }

ul { margin: 0 0 12px; padding-left: 20px; }
li { margin-bottom: 7px; }

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
strong { font-weight: 600; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: rgba(27, 37, 46, .05); padding: 1px 5px; border-radius: 3px; }

/* ── tables ────────────────────────────────────────────────────────────── */

.data-table {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}

.data-table > div { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.data-table > div:nth-child(odd) { border-right: 1px solid var(--line); }
.data-table > div:nth-last-child(-n+2) { border-bottom: 0; }

.data-table .head {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  background: rgba(27, 37, 46, .035);
}

/* ── licence entries ───────────────────────────────────────────────────── */

.pack { border-left: 3px solid var(--line-strong); padding: 2px 0 2px 16px; margin: 0 0 18px; }

.pack .name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pack .lic {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: 2px;
  white-space: nowrap;
}

.pack .files { font-size: 14px; color: var(--muted); margin: 5px 0 0; word-break: break-word; }

.note {
  border-left: 3px solid var(--accent);
  background: rgba(255, 87, 4, .05);
  padding: 14px 16px;
  border-radius: 0 3px 3px 0;
  font-size: 15px;
}

/* The accept button from the briefing, doing the one job this page has. */
.action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 5px;
  box-shadow: 0 8px 18px rgba(255, 87, 4, .28);
}

.action:hover { color: #fff; background: #f04d00; }

footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 620px) {
  .masthead .inner { padding: 16px 15px 32px; }
  .topbar { margin-bottom: 34px; }
  .masthead::after {
    background:
      linear-gradient(180deg, rgba(238, 243, 246, .35) 0%, rgba(238, 243, 246, .88) 42%, #e9eef2 100%);
  }
  h1 { max-width: none; }
  .wrap { padding: 22px 15px 56px; }
  section { padding: 18px 17px 20px; }
  .data-table { grid-template-columns: 1fr; }
  .data-table > div:nth-child(odd) { border-right: 0; }
  .data-table > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}