/* ==========================================================================
   Word Unscramblers - site stylesheet
   --------------------------------------------------------------------------
   Palette notes, so nobody "fixes" this later.

   The base is a warm paper white rather than a blue-grey, the primary is a deep
   pine green, and the accent is an ochre borrowed from the face of a wooden
   letter tile. It reads like a printed word-game book instead of a dashboard.

   This is a deliberate reaction to the competition. wordunscrambler.net runs on
   #334155 / #1e40af / #f8fafc, which is the stock slate-and-blue set every
   framework ships with, and wordunscrambler.me is light blue on Arial. Going
   blue here would have meant looking like a fourth copy of the same site, so the
   whole palette is built around warm greens, ochres and clays instead, and there
   is not one indigo-to-violet gradient anywhere in the file.

   Colour does real work rather than decorating: the header and footer carry
   solid pine, section headings take an accent rule, and content panels come in
   five tinted variants so a long page has visible rhythm instead of turning into
   an undifferentiated column of white cards.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */

/*
 * Fraunces ships as a variable font with four axes (opsz, wght, SOFT, WONK) and
 * that file is 118 KB, because the axis data dwarfs the glyphs. We only ever use
 * two points in that space, so instead of shipping the whole design space we
 * ship two static instances cut to exactly the characters this site uses:
 *
 *   700 / opsz 48 / SOFT 20 / WONK 1   headings, the wordmark, big numerals
 *   600 / opsz 24 / SOFT 20 / WONK 0   subheadings, tiles, result words
 *
 * That is 73 KB for all three faces against 352 KB before, which on a phone is
 * the difference between text appearing immediately and a visible font swap.
 *
 * The trade is that font-variation-settings no longer does anything, since the
 * axes are baked in. Weight is now selected with plain font-weight. Do not add
 * font-variation-settings back without also going back to the variable files.
 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-tight.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */

:root {
  --paper: #fbf8f2;
  --paper-2: #f5f0e6;
  --surface: #ffffff;
  --sunk: #f2ece0;
  --ink: #1c1a16;
  --ink-2: #4d473d;
  --ink-3: #7d7566;
  --line: #e4ddcd;
  --line-2: #d3c9b4;

  --pine: #14554a;
  --pine-hi: #0f463d;
  --pine-soft: #e2efe9;
  --ochre: #945716;
  --ochre-hi: #7d4912;
  --ochre-soft: #faedd7;
  --clay: #a1402c;
  --clay-hi: #8a3423;
  --clay-soft: #f9e7e1;
  --plum: #6d3557;
  --plum-hi: #5a2a47;
  --plum-soft: #f6e7f0;
  --teal: #1a5c6e;
  --teal-hi: #14495a;
  --teal-soft: #e2eff3;

  /* Dark, saturated grounds for the header, footer and full-bleed bands.
     These five are intentionally NOT redefined per theme. Anything sitting on
     pine needs the same light text in light mode and dark mode alike, and
     letting them follow the theme is how you end up with dark-on-dark. */
  --deep: #10403a;
  --deep-2: #0b302c;
  --deep-ink: #f2ece0;
  --deep-ink-2: #b6cdc5;
  --deep-accent: #e9bb7d;

  --tile-face: #f0e0c2;
  --tile-edge: #d8c39c;
  --tile-ink: #3b2f1c;

  --shadow-sm: 0 1px 2px rgba(28, 26, 22, 0.06), 0 2px 6px rgba(28, 26, 22, 0.04);
  --shadow-md: 0 2px 4px rgba(28, 26, 22, 0.05), 0 8px 24px rgba(28, 26, 22, 0.07);
  --shadow-lg: 0 4px 8px rgba(28, 26, 22, 0.05), 0 18px 50px rgba(28, 26, 22, 0.11);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 68ch;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #131108;
    --paper-2: #1a1710;
    --surface: #1b1813;
    --sunk: #211d16;
    --ink: #f3eee4;
    --ink-2: #c3bcae;
    --ink-3: #938b7c;
    --line: #322d24;
    --line-2: #453e33;

    --pine: #74c4ae;
    --pine-hi: #93d6c3;
    --pine-soft: #16302b;
    --ochre: #dda85c;
    --ochre-hi: #ecbc76;
    --ochre-soft: #2c2214;
    --clay: #e0836c;
    --clay-hi: #ee9d88;
    --clay-soft: #2f1c17;
    --plum: #d691bd;
    --plum-hi: #e5aad2;
    --plum-soft: #2b1a25;
    --teal: #6fb9cd;
    --teal-hi: #8dcfe1;
    --teal-soft: #142a31;

    --tile-face: #2e2618;
    --tile-edge: #453a25;
    --tile-ink: #f0dcb4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 18px 50px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

[data-theme='dark'] {
  --paper: #131108;
  --paper-2: #1a1710;
  --surface: #1b1813;
  --sunk: #211d16;
  --ink: #f3eee4;
  --ink-2: #c3bcae;
  --ink-3: #938b7c;
  --line: #322d24;
  --line-2: #453e33;

  --pine: #74c4ae;
  --pine-hi: #93d6c3;
  --pine-soft: #16302b;
  --ochre: #dda85c;
  --ochre-hi: #ecbc76;
  --ochre-soft: #2c2214;
  --clay: #e0836c;
  --clay-hi: #ee9d88;
  --clay-soft: #2f1c17;
  --plum: #d691bd;
  --plum-hi: #e5aad2;
  --plum-soft: #2b1a25;
  --teal: #6fb9cd;
  --teal-hi: #8dcfe1;
  --teal-soft: #142a31;

  --tile-face: #2e2618;
  --tile-edge: #453a25;
  --tile-ink: #f0dcb4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 18px 50px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 1.4rem + 3.7vw, 4rem);
  font-weight: 700;
}
/* Section headings carry the pine, with a short ochre rule above them. It gives
   a long page a visible beat without needing a graphic for every section. */
h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.6rem);
  color: var(--pine);
}
h2.ruled::before {
  content: '';
  display: block;
  width: 2.75rem;
  height: 4px;
  border-radius: 2px;
  background: var(--ochre);
  margin-bottom: 0.85rem;
}
h2.plain {
  color: var(--ink);
}
h3 {
  color: var(--ink);
}
h3.accent {
  color: var(--clay);
}
h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  letter-spacing: -0.01em;
}
h4 {
  font-size: 1.05rem;
  letter-spacing: 0;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

a {
  color: var(--pine);
  text-decoration-color: color-mix(in oklab, var(--pine) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--pine-hi);
  text-decoration-color: currentColor;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

:focus-visible {
  outline: 2.5px solid var(--ochre);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--ochre-soft);
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 200;
  background: var(--pine);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ---------------------------------------------------------------- layout */

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

.wrap-narrow {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  position: relative;
}

.band {
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}
.band-tight {
  padding-block: clamp(1.6rem, 2.75vw, 2.4rem);
}
.band-sunk {
  background: var(--sunk);
}
.band-paper2 {
  background: var(--paper-2);
}

/* A hairline that stops short of the viewport edge, so bands read as stacked
   sheets of paper rather than full-bleed slabs. */
.band-edge {
  border-top: 1px solid var(--line);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  width: 1.6rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
}

.prose {
  max-width: var(--measure);
}
.prose h2 {
  margin-top: 2.4rem;
}
.prose h3 {
  margin-top: 1.9rem;
}
.prose ul,
.prose ol {
  margin: 0 0 1.3em;
  padding-left: 1.3em;
}
.prose li {
  margin-bottom: 0.45em;
}
.prose li::marker {
  color: var(--ochre);
}

/* ---------------------------------------------------------------- header */

/* Solid pine rather than a translucent white bar. It gives the site an actual
   identity at a glance and reads the same in both themes, since the header
   carries its own colours instead of borrowing the page's. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--deep);
  color: var(--deep-ink);
  border-bottom: 3px solid var(--ochre);
  transition: box-shadow 0.2s ease;
}
.site-header[data-stuck='true'] {
  box-shadow: 0 6px 24px rgba(10, 32, 28, 0.28);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--deep-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  flex: none;
}
.brand:hover {
  color: #fff;
}
.brand-mark {
  width: 31px;
  height: 31px;
  flex: none;
  border-radius: 7px;
  background: var(--tile-face);
  color: var(--tile-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16);
}
.brand em {
  font-style: normal;
  color: var(--ochre-soft);
}
[data-theme='dark'] .brand em {
  color: var(--ochre-hi);
}

/* The footer brand sits on the same dark ground, so it needs no override. */
.site-footer .brand {
  color: var(--deep-ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
  /* Enough items now that a narrow desktop window could run them into the theme
     button. Wrapping is a better failure than overflowing the header. */
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav a {
  display: inline-block;
  padding: 0.45rem 0.62rem;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--deep-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.nav a[aria-current='page'] {
  color: var(--deep);
  background: var(--ochre-soft);
}
[data-theme='dark'] .nav a[aria-current='page'] {
  color: #0b1f1c;
  background: var(--ochre-hi);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--deep-ink);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover {
  border-color: var(--ochre);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.icon-btn svg {
  width: 17px;
  height: 17px;
}
.theme-btn .moon {
  display: none;
}
[data-theme='dark'] .theme-btn .sun,
.nav-toggle[aria-expanded='true'] .bars {
  display: none;
}
[data-theme='dark'] .theme-btn .moon {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-btn .sun {
    display: none;
  }
  :root:not([data-theme='light']) .theme-btn .moon {
    display: block;
  }
}
.nav-toggle {
  display: none;
}
.nav-toggle .close {
  display: none;
}
.nav-toggle[aria-expanded='true'] .close {
  display: block;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: grid;
    margin-left: auto;
  }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--deep-2);
    border-bottom: 3px solid var(--ochre);
    box-shadow: var(--shadow-md);
  }
  .nav:not([data-open='true']) {
    display: none;
  }
  .nav a {
    padding: 0.7rem 0.5rem;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
  }
  .nav a:last-child {
    border-bottom: 0;
  }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--pine);
  --btn-fg: #f6f0e4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16), var(--shadow-sm);
  transition: transform 0.12s ease, filter 0.15s ease;
}
.btn:hover {
  color: var(--btn-fg);
  filter: brightness(1.08);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}
.btn-lg {
  padding: 0.9rem 1.6rem;
  font-size: 1.02rem;
}
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--sunk);
  filter: none;
}
.btn-ochre {
  --btn-bg: var(--ochre);
  --btn-fg: #fff8ec;
}
[data-theme='dark'] .btn-ochre,
[data-theme='dark'] .btn:not(.btn-ghost) {
  --btn-fg: #17140d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .btn:not(.btn-ghost) {
    --btn-fg: #17140d;
  }
}

/* ---------------------------------------------------------------- tiles */

/* The letter tile is the one motif the whole site leans on. Face colour and the
   inset bottom edge imitate a real wooden tile without a single image. */
.tile {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 5px;
  background: var(--tile-face);
  color: var(--tile-ink);
  border: 1px solid var(--tile-edge);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12), var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.tile[data-blank='true'] {
  color: var(--ink-3);
  background: color-mix(in oklab, var(--tile-face) 55%, var(--surface));
}
.tile sub {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  opacity: 0.62;
  bottom: 2px;
}
.tile-sm {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.92rem;
  border-radius: 4px;
}
.tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
.card h3 {
  margin-bottom: 0.4rem;
}
.card p:last-child {
  margin-bottom: 0;
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-link:hover {
  color: inherit;
}
.card-link h3 {
  color: var(--ink);
}
.card-link:hover h3 {
  color: var(--pine);
}

/* ---------------------------------------------------------------- panels */

/* Tinted content boxes. Five accents, so a page with several of them looks
   deliberately colour-coded rather than randomly decorated. Each sets a tinted
   ground, a solid left edge and a matching heading colour. */
.panel {
  --panel: var(--pine);
  --panel-bg: var(--pine-soft);
  background: var(--panel-bg);
  border: 1px solid color-mix(in oklab, var(--panel) 26%, transparent);
  border-left: 4px solid var(--panel);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 1.4rem 1.5rem;
}
.panel > :last-child {
  margin-bottom: 0;
}
.panel h3,
.panel .panel-h {
  color: var(--panel);
}

/*
 * Panel headings are h3 rather than h4 so the document never jumps two levels
 * down from the h2 that opens the section. They keep the smaller h4 sizing,
 * because their rank in the outline and their size on screen are separate
 * questions and only the first one matters to a screen reader.
 */
.panel-h,
.card .panel-h {
  font-size: 1.05rem;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}
.panel-pine {
  --panel: var(--pine);
  --panel-bg: var(--pine-soft);
}
.panel-ochre {
  --panel: var(--ochre);
  --panel-bg: var(--ochre-soft);
}
.panel-clay {
  --panel: var(--clay);
  --panel-bg: var(--clay-soft);
}
.panel-plum {
  --panel: var(--plum);
  --panel-bg: var(--plum-soft);
}
.panel-teal {
  --panel: var(--teal);
  --panel-bg: var(--teal-soft);
}

/* A card whose top edge is coloured. Used in grids where a left border would
   fight with the grid rhythm. */
.card-top {
  border-top: 4px solid var(--card-accent, var(--pine));
}
.card-top h3 {
  color: var(--card-accent, var(--pine));
}
.accent-pine {
  --card-accent: var(--pine);
}
.accent-ochre {
  --card-accent: var(--ochre);
}
.accent-clay {
  --card-accent: var(--clay);
}
.accent-plum {
  --card-accent: var(--plum);
}
.accent-teal {
  --card-accent: var(--teal);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: var(--sunk);
  border: 1px solid var(--line);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.pill-pine {
  background: var(--pine-soft);
  border-color: color-mix(in oklab, var(--pine) 25%, transparent);
  color: var(--pine);
}
.pill-ochre {
  background: var(--ochre-soft);
  border-color: color-mix(in oklab, var(--ochre) 28%, transparent);
  color: var(--ochre);
}
.pill-clay {
  background: var(--clay-soft);
  border-color: color-mix(in oklab, var(--clay) 28%, transparent);
  color: var(--clay);
}
.pill-plum {
  background: var(--plum-soft);
  border-color: color-mix(in oklab, var(--plum) 28%, transparent);
  color: var(--plum);
}
.pill-teal {
  background: var(--teal-soft);
  border-color: color-mix(in oklab, var(--teal) 28%, transparent);
  color: var(--teal);
}

/* Full-bleed pine band, for the one or two places a page needs a hard stop. */
.band-deep {
  background: var(--deep);
  color: var(--deep-ink);
}
.band-deep h2,
.band-deep h3 {
  color: var(--deep-ink);
}
.band-deep h2.ruled::before {
  background: var(--deep-accent);
}
.band-deep .eyebrow {
  color: var(--deep-accent);
}
.band-deep p,
.band-deep .lede {
  color: var(--deep-ink-2);
}
.band-deep a {
  color: var(--deep-accent);
}
.band-deep .rail {
  border-color: var(--deep-accent);
}
.band-deep .rail dt {
  color: var(--deep-ink);
}
.band-deep .rail dd {
  color: var(--deep-ink-2);
}

/* ---------------------------------------------------------------- footer */

/* Matches the header so the page is bracketed in pine top and bottom. */
.site-footer {
  background: var(--deep);
  border-top: 3px solid var(--ochre);
  padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem;
  font-size: 0.9rem;
  color: var(--deep-ink-2);
}
.footer-grid {
  display: grid;
  gap: 2rem 2.25rem;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 0.9fr;
  align-items: start;
}
@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 460px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/* Footer column headings are h2: they open sections of the footer landmark, so
   they sit at the top level rather than continuing the article's outline. That
   avoids a two-level jump from whatever heading the page ended on. */
.footer-grid h2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep-accent);
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-grid li {
  margin-bottom: 0.5rem;
}
.footer-grid a {
  color: var(--deep-ink-2);
  text-decoration: none;
}
.footer-grid a:hover {
  color: var(--deep-accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.footer-blurb {
  max-width: 34ch;
  color: var(--deep-ink-2);
  font-size: 0.88rem;
}
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(242, 236, 224, 0.62);
}
.footer-legal {
  max-width: 78ch;
  margin-top: 1.6rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--deep-accent);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(242, 236, 224, 0.72);
}

/* ---------------------------------------------------------------- bits */

.breadcrumb {
  font-size: 0.82rem;
  color: var(--ink-3);
  padding-top: 1.5rem;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 0.4rem;
  color: var(--line-2);
}
.breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--pine);
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0.25rem 0;
}
.faq-item summary {
  cursor: pointer;
  padding: 1rem 2.2rem 1rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 0.4rem;
  top: 1.45rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ochre);
  border-bottom: 2px solid var(--ochre);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
}
.faq-item > div {
  padding: 0 1rem 1.1rem 0;
  color: var(--ink-2);
}
.faq-item > div > :last-child {
  margin-bottom: 0;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 480px;
}
table.data th,
table.data td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
table.data thead th {
  background: var(--sunk);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  white-space: nowrap;
}
table.data tbody tr:last-child td {
  border-bottom: 0;
}
table.data tbody tr:hover {
  background: color-mix(in oklab, var(--ochre-soft) 45%, transparent);
}
.num {
  font-variant-numeric: tabular-nums;
}

.note {
  border-left: 3px solid var(--ochre);
  background: var(--ochre-soft);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 1.75rem 0;
  font-size: 0.95rem;
}
.note > :last-child {
  margin-bottom: 0;
}
.note strong {
  color: var(--ochre-hi);
}

/* Decorative background marks. Kept out of the accessibility tree and cheap to
   paint: no images, no blur filters on scroll. */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.deco-dots {
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.5;
}
.deco-blob {
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
}

/* ==========================================================================
   Composition
   --------------------------------------------------------------------------
   These are the pieces that keep pages off the centred-column treadmill. Every
   one of them collapses to a single sane column below 860px, so the asymmetry
   is a desktop luxury rather than something mobile has to fight.
   ========================================================================== */

.hero {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  align-items: start;
  position: relative;
  z-index: 1;
}
.hero-copy {
  grid-column: 1 / span 7;
}
.hero-aside {
  grid-column: 9 / span 4;
  margin-top: 2.75rem;
}
.hero-tool {
  grid-column: 1 / span 9;
  margin-top: 0.5rem;
}
.hero-rail {
  grid-column: 10 / span 3;
  margin-top: 0.5rem;
}

@media (max-width: 1040px) {
  .hero-copy {
    grid-column: 1 / span 8;
  }
  .hero-aside {
    grid-column: 9 / span 4;
  }
  .hero-tool,
  .hero-rail {
    grid-column: 1 / -1;
  }
  .hero-rail {
    margin-top: 1.75rem;
  }
}
@media (max-width: 860px) {
  .hero-copy,
  .hero-aside {
    grid-column: 1 / -1;
  }
  .hero-aside {
    margin-top: 0;
  }
}

/* The tilted sample board. Two degrees is enough to register as deliberate and
   small enough that the text inside stays comfortable to read. */
.board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--shadow-md);
  transform: rotate(-1.6deg);
}
.board > :last-child {
  margin-bottom: 0;
}
.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px dashed var(--line-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
.board-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.board-list li:last-child {
  border-bottom: 0;
}
.board-list b {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.board-list span {
  margin-left: auto;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  flex: none;
}

/* Vertical stat rail beside the tool. Reads as a margin note, not a stat bar. */
.rail {
  display: grid;
  gap: 1.15rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ochre);
}
@media (max-width: 1040px) {
  .rail {
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 1.25rem 2rem;
    padding-left: 0;
    padding-top: 1.25rem;
    border-left: 0;
    border-top: 2px solid var(--ochre);
  }
}
.rail dt {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rail dd {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Staggered card row. Offset cards sit lower than their neighbours on wide
   screens. The transform does not grow the grid, so the container reserves the
   offset as padding, otherwise the lowest card spills into the next section and
   opens up a gap that looks like a mistake. */
.stagger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 980px) {
  .stagger {
    padding-bottom: 1.5rem;
  }
  .stagger > :nth-child(even) {
    transform: translateY(1.5rem);
  }
  .stagger.stagger-deep {
    padding-bottom: 2.25rem;
  }
  .stagger.stagger-deep > :nth-child(3n + 2) {
    transform: translateY(1.15rem);
  }
  .stagger.stagger-deep > :nth-child(3n) {
    transform: translateY(2.25rem);
  }
}

/* Off-centre two column split with a deliberately uneven gutter. */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.75rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}
.split-flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
@media (max-width: 860px) {
  .split,
  .split-flip {
    grid-template-columns: 1fr;
  }
}
.split-sticky {
  position: sticky;
  top: 92px;
}
@media (max-width: 860px) {
  .split-sticky {
    position: static;
  }
}

/* Numbered steps. The numeral is set large in the display face and allowed to
   sit in the gutter, which is what stops this looking like a checklist. */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1.5rem;
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 1.1rem;
  align-items: start;
}
.step::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 0.85;
  color: color-mix(in oklab, var(--ochre) 55%, var(--paper));
  letter-spacing: -0.03em;
}
.step h3 {
  margin-bottom: 0.35rem;
}
.step p {
  color: var(--ink-2);
  margin-bottom: 0;
  font-size: 0.96rem;
}
@media (min-width: 980px) {
  .steps-offset > .step:nth-child(2) {
    margin-left: 2.5rem;
  }
  .steps-offset > .step:nth-child(3) {
    margin-left: 5rem;
  }
}

/* A pull quote that breaks the measure on purpose. */
.pull {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--pine);
  border-left: 3px solid var(--ochre);
  padding: 0.2rem 0 0.2rem 1.35rem;
  margin: 2rem 0;
  text-wrap: balance;
}
@media (min-width: 1040px) {
  .pull-bleed {
    margin-right: -4rem;
  }
}

/* Bento-ish link grid: first item is double width and taller. */
.bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.1rem;
}
@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bento > :first-child {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.two-col {
  columns: 2;
  column-gap: 2.5rem;
}
@media (max-width: 760px) {
  .two-col {
    columns: 1;
  }
}
.faq-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 2.75rem;
  align-items: start;
}

.link-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.link-cloud a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.link-cloud a:hover {
  border-color: var(--pine);
  color: var(--pine);
  background: var(--pine-soft);
}
.link-cloud a b {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.link-cloud a:hover b {
  color: var(--pine);
}

/* ---------------------------------------------------------------- charts */

/* The infographics are inline SVG, so they inherit the theme's custom
   properties and need no separate dark-mode artwork. */
.chart {
  margin: 2rem 0;
  padding: 1.25rem 1.35rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
  overflow: visible;
}
.chart figcaption,
.chart > figcaption {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* The board diagram needs to stay square and legible, so on narrow screens it
   scrolls sideways inside its own frame rather than shrinking into mush. */
.chart-board {
  min-width: 420px;
  max-width: 520px;
  margin-inline: auto;
}
.chart-wide {
  overflow-x: auto;
}

.chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.1rem;
  justify-content: center;
}
.chart-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.chart-key-item b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chart-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

/* Charts that carry real numbers get a table underneath. Hidden visually, since
   the graphic already says it, but present for screen readers and for anyone
   reading with images off. */
.chart-data {
  margin-top: 0.75rem;
}

/* ==========================================================================
   Advertising
   --------------------------------------------------------------------------
   Auto Ads injects containers into the page after it has rendered, and it does
   not always respect the layout it lands in. These rules are damage control:
   they cannot stop the vertical shift that Auto Ads causes by design, but they
   do stop the two failures that are actually visible to a reader.

   The first is horizontal scroll. A 728px leaderboard dropped into a 360px
   phone viewport pushes the whole page sideways, and on a site where the main
   control is a text field that is genuinely painful. body already has
   overflow-x: hidden; these rules stop the ad forcing the width in the first
   place, which is the better fix.

   The second is ads landing flush against content with no separation, so the
   reader cannot tell where the page ends and the advert begins.
   ========================================================================== */

.adsbygoogle,
ins.adsbygoogle {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin-inline: auto;
}

/* Google wraps injected ads in its own containers. Neither may exceed the
   viewport or the page starts scrolling sideways on a phone. */
[data-anchor-status],
[data-ad-status],
.google-auto-placed {
  max-width: 100% !important;
  overflow: hidden !important;
  margin-block: 1.5rem;
}

/* Keep ads out of the solver panel. An advert appearing between the rack field
   and its results would break the one interaction the page exists for. */
.tool-panel .google-auto-placed,
.results .google-auto-placed,
.tool-panel .adsbygoogle,
.results .adsbygoogle {
  display: none !important;
}

/* A quiet label above injected ads, so the boundary is obvious. Auto Ads places
   its own, but only sometimes. */
.google-auto-placed::before {
  content: 'Advertisement';
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 0.4rem;
}

/* The sticky anchor ad sits over the footer. Give the page room so it never
   covers the last links. */
body:has([data-anchor-status]) .site-footer {
  padding-bottom: 6rem;
}

.stack-sm > * + * {
  margin-top: 0.6rem;
}
.stack > * + * {
  margin-top: 1.1rem;
}
.stack-lg > * + * {
  margin-top: 2rem;
}
.center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}