/* ═══════════════════════════════════════════════════════════════════
   lokalt.eu — the shared sheet

   One stylesheet for the pages that belong to the family rather than to a
   game: the front page and the four it links to. Each game's page carries its
   own styles inline, because a game page is published from its own repository
   and has to stand alone; these five live together and can share.

   The palette is the Mountain one, which is the neutral of the four places
   the games offer. A parent that borrowed Forest or Ocean would look like one
   of its children.
   ═══════════════════════════════════════════════════════════════════ */

/* Served from /fonts, not from a game's folder and not from Google: one copy
   for the whole site, fetched once and reused on every page. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/fonts/inter-latin-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: 'Inter'; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url('/fonts/inter-latin-italic.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: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/fonts/inter-latin-ext-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: 'Inter'; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url('/fonts/inter-latin-ext-italic.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;
}

:root {
  --bg:#EEF0EF; --surface:#FFFFFF; --ink:#3A3F3D; --ink-soft:#6B7370;
  --primary:#5C7380; --secondary:#8FAE84; --line:#D3D6D2;
  --glow:rgba(92,115,128,.16);

  --forest:#4F7942; --ocean:#2E6E7E; --mountain:#5C7380;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --step: clamp(3.5rem, 8vw, 6rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#16191A; --surface:#202526; --ink:#E6E9EA; --ink-soft:#9BA2A4;
    --primary:#98ADB8; --secondary:#8FAE84; --line:#2A3133;
    --glow:rgba(133,152,162,.22);
    --forest:#7DB06E; --ocean:#5EAEBE; --mountain:#98ADB8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-optical-sizing: auto;
  font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 62rem; margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.04; letter-spacing: -.038em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.14; letter-spacing: -.028em; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.015em; }
p  { margin: 0; max-width: var(--measure); }
em { font-style: italic; }

.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* ── the mark, fixed artwork wherever it appears ── */
.mark rect.tile { fill: var(--primary); }
.mark rect.cell { fill: #FFFFFF; }
.mark rect.pick { fill: var(--secondary); }

/* ── header ── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.lockup { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.lockup .name { font-size: 1.05rem; letter-spacing: -.01em; }
.lockup .name b { font-weight: 600; }
.top nav { display: flex; gap: 1.2rem; font-size: .95rem; }
.top nav a { text-decoration: none; color: var(--ink-soft); }
.top nav a:hover { color: var(--primary); }

/* ── hero ── */
.hero { padding-block: var(--step) calc(var(--step) * .6); }
.hero p.lead { margin-top: 1.4rem; font-size: 1.15rem; color: var(--ink-soft); max-width: 38rem; }

section { padding-block: var(--step); }
.section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; max-width: 40rem; }

/* ── the three games ── */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.game {
  display: grid; gap: .4rem; align-content: start;
  padding: 1.8rem; border-radius: 20px; text-decoration: none;
  border: 1.5px solid var(--line); background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.game:hover { border-color: var(--accent, var(--primary)); box-shadow: 0 16px 36px -18px var(--glow); transform: translateY(-2px); }
.game .kicker { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent, var(--primary)); font-weight: 600; }
/* Each card wears its own game's icon, in that game's own colours. The mark
   is fixed artwork — the header lockup above is lokalt's own and takes the
   page's primary, but these three must stay green, slate and teal wherever
   they appear, including on each other's pages. */
.game .tile-mark { display: block; margin-bottom: .55rem; }
.game h3 { margin-top: .2rem; }
.game p { font-size: .93rem; color: var(--ink-soft); }
.game.is-sudoku { --accent: var(--forest); }
.game.is-kenken { --accent: var(--mountain); }
.game.is-kakuro { --accent: var(--ocean); }

/* ── the promise ── */
.promise ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem 2.5rem; }
.promise li { display: grid; gap: .3rem; }
.promise b { font-weight: 600; }
.promise span { font-size: .93rem; color: var(--ink-soft); }

/* ── prose pages ── */
.prose { padding-block: var(--step); }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.8rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p + p, .prose h2 + p, .prose h3 + p { margin-top: .9rem; }
.prose ul { margin: .9rem 0 0; padding-left: 1.1rem; max-width: var(--measure); display: grid; gap: .5rem; }
.prose a { color: var(--primary); }
.prose .updated { margin-top: 2.5rem; font-size: .85rem; color: var(--ink-soft); }

footer { border-top: 1px solid var(--line); padding-block: 2.5rem 3.5rem; font-size: .9rem; color: var(--ink-soft); margin-top: var(--step); }
.foot-row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.foot-row nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: var(--primary); }