/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* CHEZABLE — the shared surface.
 *
 * Extracted from the three concept pages rather than invented: the tokens, the
 * three type roles and the motifs are the design system as written in
 * docs/design-system.md, and that file is the one to change first.
 *
 * Two rules do most of the work here:
 *   the mono rule — every number a reader must trust is IBM Plex Mono;
 *   the role rule — Fraunces never sets a control, mono never sets prose,
 *                   Archivo never sets a heading.
 */

@import url("fonts.css");
@import url("theme.css");

/* Colours live in theme.css, dark and light. The tiles are the same cream in
   both: they are pieces on a table, not part of the page. */
:root {
  --tile-1:#f6ecd8; --tile-2:#e5d4b4; --tile-ink:#241c12;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Archivo", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:92px }
body {
  background:var(--bg); color:var(--body);
  font:14px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* The faint crossword grid behind everything. Screen only — it is atmosphere,
   and atmosphere printed is toner. */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 47px,var(--grid-line) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,var(--grid-line) 47px 48px);
}
::selection { background:var(--selection); color:var(--text) }
a { color:var(--clay); text-decoration:none }
a:hover { color:var(--clay-soft) }
:focus-visible { outline:2px solid var(--clay); outline-offset:3px; border-radius:4px }
img { max-width:100%; display:block }

/* ————— the tile ————— */
.tile {
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  background:linear-gradient(160deg,var(--tile-1),var(--tile-2));
  color:var(--tile-ink); border-radius:5px;
  font-family:var(--serif); font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             inset 0 -2px 0 rgba(140,112,66,.55),
             0 3px 8px var(--shadow);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.tile:hover { transform:translateY(-3px) rotate(-3deg) }
.t-sm { width:18px; height:18px; font-size:11px }
.t-md { width:30px; height:30px; font-size:17px; border-radius:6px }
.t-lg { width:56px; height:56px; font-size:32px; border-radius:9px }
.tile .v {
  position:absolute; right:3px; bottom:1px;
  font:600 .32em var(--sans); letter-spacing:0; opacity:.75;
}

/* ————— chrome ————— */
.appbar {
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 28px; background:var(--appbar);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft);
}
.brand { display:flex; align-items:center; gap:10px }
.brand-mark { display:block; width:28px; height:28px; flex:none }
.brand .name { font:600 13px var(--sans); letter-spacing:.22em; color:var(--text) }
.nav { display:flex; gap:4px; flex-wrap:wrap }
.nav a {
  padding:7px 12px; border-radius:8px; color:var(--muted);
  font:500 12.5px/1 var(--sans); transition:color .2s, background .2s;
}
.nav a:hover { color:var(--text); background:var(--bg2) }
.nav a[aria-current="page"] { color:var(--text); background:var(--bg2) }
/* The language switcher. Three links, always all three: a reader who lands on
   the wrong one should see the way out without hunting, and a site that guesses
   from Accept-Language and redirects leaves no way back. */
.langs { display:flex; align-items:center; gap:2px; margin-left:6px; padding-left:10px;
  border-left:1px solid var(--line) }
.langs a {
  padding:6px 8px; border-radius:6px; color:var(--faint);
  font:600 10px/1 var(--mono); letter-spacing:.12em;
}
.langs a:hover { color:var(--text); background:var(--bg2) }
.langs a[aria-current="true"] { color:var(--clay) }

.crumb {
  font:500 10px/1 var(--mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}

/* ————— layout ————— */
.wrap { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 28px }
.measure { max-width:74ch }

/* ————— voice ————— */
.kicker {
  display:flex; align-items:center; gap:10px; color:var(--clay);
  font:600 10px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
}
.kicker::after { content:""; height:1px; width:52px; background:currentColor; opacity:.5 }
h1 {
  font-family:var(--serif); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(34px,5vw,52px); color:var(--text);
  margin:14px 0 12px; line-height:1.05; text-wrap:balance;
}
h2 {
  font-family:var(--serif); font-weight:500; font-size:clamp(22px,3vw,28px);
  color:var(--text); margin:12px 0 6px; line-height:1.2; text-wrap:balance;
}
h3 { font-family:var(--serif); font-weight:500; font-size:18px; color:var(--text) }
.dot { color:var(--clay) }
.lede { max-width:62ch; font-size:16px; line-height:1.7; color:var(--body) }
p { margin:12px 0; max-width:74ch }
p strong, li strong { color:var(--text); font-weight:600 }
.mono { font-family:var(--mono) }
.group-k {
  font:600 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:26px 0 12px;
}

section { padding:52px 0; border-bottom:1px solid var(--line) }
section:last-of-type { border-bottom:0 }

/* ————— chips and badges ————— */
.chip {
  display:inline-block;
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px;
  padding:7px 12px; background:var(--bg2);
}
/* Gold and dashed means designed but not shipped. It is the same badge in the
   product, so a reader learns it once. */
.chip.roadmap { color:var(--gold); border-color:var(--gold-line); border-style:dashed }
.chip.live { color:var(--clay); border-color:var(--clay-line) }
.meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px }

/* ————— cards ————— */
.cards { display:grid; gap:14px; margin:22px 0 }
.cards.two { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.cards.three { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; transition:transform .25s, border-color .25s;
}
.card:hover { transform:translateY(-4px); border-color:var(--line) }
.card h3 { margin-bottom:8px }
.card p { margin:8px 0 0; font-size:13.5px; max-width:none; color:var(--body) }

/* ————— rows: numbers for obligations, diamonds for promises ————— */
.rows { border-top:1px solid var(--line-soft); margin-top:16px }
.item {
  display:grid; grid-template-columns:52px 1fr; gap:16px;
  padding:15px 8px; border-bottom:1px solid var(--line-soft);
  border-radius:6px; transition:background .2s;
}
.item:hover { background:var(--bg2) }
.item .n { font:500 12px/1.9 var(--mono); color:var(--clay) }
.item .n.dia { color:transparent; position:relative }
.item .n.dia::before {
  content:""; position:absolute; left:4px; top:12px;
  width:8px; height:8px; background:var(--clay); transform:rotate(45deg);
}
.item p { margin:0; max-width:none }

/* ————— set pieces ————— */
.pull {
  margin:26px 0; padding:18px 24px; border-left:3px solid var(--clay);
  background:var(--bg2); border-radius:0 12px 12px 0;
  font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.5;
  color:var(--text); max-width:56ch;
}
.note {
  display:flex; gap:12px; align-items:flex-start; margin:18px 0;
  padding:14px 18px; border:1px solid var(--line-soft); border-radius:12px;
  background:var(--bg2); font-size:13.5px; line-height:1.65; color:var(--body);
}
.note::before {
  content:""; flex:none; width:8px; height:8px; margin-top:7px;
  background:var(--clay); transform:rotate(45deg);
}
.note p { margin:0; max-width:none }

.stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; margin:22px 0;
}
.stat { background:var(--surface); padding:26px 26px 22px; transition:background .25s }
.stat:hover { background:var(--surface-hi) }
.stat .v { font:600 44px/1 var(--mono); color:var(--text); letter-spacing:-.02em }
.stat.hot .v { color:var(--clay-soft) }
.stat .l {
  margin-top:10px; font:600 10.5px/1.5 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ————— buttons ————— */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:10px; border:1px solid transparent;
  font:600 13px/1 var(--sans); letter-spacing:.01em; cursor:pointer;
  transition:transform .2s, background .2s, border-color .2s;
}
.btn:hover { transform:translateY(-2px) }
.btn-primary { background:var(--clay); color:var(--on-clay) }
.btn-primary:hover { background:var(--clay-soft); color:var(--on-clay) }
.btn-ghost { border-color:var(--line); color:var(--text); background:var(--bg2) }
.btn-ghost:hover { border-color:var(--clay); color:var(--text) }
.btn[aria-disabled="true"] { opacity:.55; cursor:default; transform:none }
.btn[aria-disabled="true"]:hover { transform:none }

/* ————— footer ————— */
footer { position:relative; z-index:1; padding:44px 0 30px }
.foot-rule {
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line-soft); padding-top:18px;
  font:500 9.5px/1.6 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
/* The footer's links carry the legal pages, so they are set to be read and
   tapped, not as furniture: sentence case at body size, a finger's height. */
.foot-nav { display:flex; gap:2px 20px; flex-wrap:wrap; align-items:center }
.foot-nav a, .foot-nav .foot-cookie {
  font:500 12.5px/1.4 var(--sans); letter-spacing:0; text-transform:none;
  color:var(--muted); padding:7px 0;
}
.foot-nav a:hover, .foot-nav .foot-cookie:hover { color:var(--text) }
.foot-nav a[aria-current="page"] { color:var(--text) }
.notices { margin-top:26px; display:grid; gap:10px }
.notices p { font-size:12px; color:var(--muted); max-width:80ch; margin:0 }
/* Collins' acknowledgement: in the accent, so a required line reads as one
   rather than as one more disclaimer. --clay clears 4.5:1 in both themes. */
.notices .ack { color:var(--clay); font-weight:500 }
/* The AI opponents' names, wherever they appear: the build marks them. */
.persona { color:var(--clay) }
.end-tiles { display:flex; gap:5px; margin-top:30px }

/* ————— motion ————— */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .7s, transform .7s }
.reveal.in { opacity:1; transform:none }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal { opacity:1; transform:none }
}

@media (max-width: 720px) {
  .wrap { padding:0 18px }
  /* Two rows at most: the mark, then every link in one line that scrolls
     sideways rather than wrapping into a third — the bar stays on screen. */
  .appbar { padding:10px 18px 8px; flex-wrap:wrap; row-gap:6px }
  .nav { width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin:0 -18px; padding:0 18px; width:calc(100% + 36px) }
  .nav::-webkit-scrollbar { display:none }
  .nav a { padding:6px 9px; font-size:12px; white-space:nowrap }
  .langs { flex:none }
  section { padding:40px 0 }
}