/* Sudoku+ website styles.
 *
 * The colours are the app's own palette, sampled from its swatch. Ivory leads,
 * dark olive lands in a few decisive masses, and the sages are used for large
 * shapes only: dark olive on light sage is 4.15:1, enough for big type but not
 * for small text. Taupe is decorative; it is too faint for any text.
 */
:root {
  color-scheme: light;
  --ivory: #fbfaf5;
  --bone: #e4e4d8;
  --mist: #a7b7ac;
  --sage: #99a79a;
  --taupe: #9e977d;
  --stone: #8c8e81;
  --moss: #6b7668;
  --olive: #494d3e;

  /* The logo's colours: four quarters behind three daisies. They are the site's accents,
   * one quarter for each kind of puzzle, and never carry small text on their own:
   * dark olive on the blue is 4.3 to 1. Pollen, the daisies' centres, is for marks only. */
  --fern: #bdcbb1;
  --blue: #a4b9d8;
  --lilac: #ebd1e7;
  --khaki: #d8d3a4;
  --petal: #ede8d8;
  --pollen: #e1b54c;

  /* The one colour from outside the palette: a wrong digit costs a strike. */
  --error: #a3483a;
  --error-tint: #f4e2db;

  /* Board highlights: light sage thinned with ivory so digits stay readable. */
  --peer: #dee3db;
  --selected: #c0cbc2;
  --hair: rgb(107 118 104 / 0.24);

  --ink: var(--olive);
  --muted: var(--moss);
  --line: rgb(73 77 62 / 0.16);

  --display: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 1200px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.45, 0.55, 1);
  --shadow-raised: 0 1px 2px rgb(73 77 62 / 0.08), 0 24px 48px -30px rgb(73 77 62 / 0.5);
}

/* ---- Base ------------------------------------------------------------------- */

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

[hidden] { display: none !important; }

html {
  background: var(--ivory);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 1.03rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  color: var(--ink);
  text-wrap: balance;
  /* Playfair's default figures are old-style; lining figures read better in times and counts. */
  font-variant-numeric: lining-nums;
}

h1 {
  font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

/* The headline is three short lines by design. Beside the phone its column is narrow,
 * so the size follows the viewport and the longest line always fits. */
h1 span { display: block; }

@media (min-width: 1000px) {
  h1 { font-size: clamp(3.4rem, 6vw, 5.2rem); }
}

/* Headings are styled by role as well as by level: on an inner page the h1 wears the
 * section-title size (.page-title), and a card title that must be an h2 there wears the h3's (.h3). */
h2, .page-title {
  font-weight: 700;
  font-size: clamp(2.05rem, 1.35rem + 2.5vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: normal;
}

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

img { max-width: 100%; }

a {
  color: inherit;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 3px;
  border-radius: 8px;
}

section[id] { scroll-margin-top: 72px; }
/* Where a "Try a puzzle" link lands on a phone: the board, clear of the header (see app.js). */
.tray { scroll-margin-top: 80px; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 10px;
  left: var(--gutter);
  z-index: 30;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--olive);
  color: var(--ivory);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ---- Layout -------------------------------------------------------------------- */

.wrap { max-width: var(--max); margin-inline: auto; }

.section { padding: clamp(72px, 10vw, 136px) var(--gutter); }

/* Grey-green is only readable on ivory, so bone sections use dark olive throughout. */
.section-bone { background: var(--bone); --muted: var(--olive); }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-head {
  display: grid;
  gap: 16px;
  align-content: start;
  max-width: 42rem;
}

.section-head p:not(.eyebrow) { font-size: 1.12rem; }

.section-head-center {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

/* ---- Buttons --------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 16px;
  background: var(--olive);
  color: var(--ivory);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(73 77 62 / 0.25), 0 12px 24px -14px rgb(73 77 62 / 0.75);
  transition: transform 110ms var(--ease-out), background-color 150ms var(--ease-out);
}

.button:hover { background: #3c4033; }
.button:active { transform: scale(0.97); }

.button-quiet {
  background: transparent;
  color: var(--olive);
  box-shadow: inset 0 0 0 1.5px var(--stone);
}

.button-quiet:hover { background: rgb(73 77 62 / 0.07); }

.button-small {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 0.9rem;
}

/* ---- Header ---------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  padding-inline: var(--gutter);
  background: rgb(251 250 245 / 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out);
}

.site-header.is-scrolled { border-bottom-color: var(--line); }

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--ivory); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgb(73 77 62 / 0.14);
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--olive);
}

.wordmark .plus { font-weight: 400; }

/* The menu. From 900px it is a row of links; below that, one button with the links behind it.
 * The button is a <details>, so it opens without script (site.js adds Escape and tap-away). */
.site-nav {
  display: none;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.site-nav a:not(.button) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--olive);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.site-nav a:not(.button):hover {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.3em;
}

/* The page you are on is underlined for good. */
.site-nav a[aria-current="page"]:not(.button)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--olive);
}

.site-nav a[aria-current="page"]:not(.button):hover { text-decoration: none; }
.site-nav .button { margin-left: 6px; }

.menu { margin-left: auto; }

.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--stone);
  color: var(--olive);
  font-weight: 700;
  font-size: 0.95rem;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.menu > summary::-webkit-details-marker { display: none; }

/* Three bars, drawn with gradients so the button needs no image. */
.menu > summary::before {
  content: "";
  width: 18px;
  height: 12px;
  background:
    linear-gradient(var(--olive), var(--olive)) top / 100% 2px no-repeat,
    linear-gradient(var(--olive), var(--olive)) center / 100% 2px no-repeat,
    linear-gradient(var(--olive), var(--olive)) bottom / 100% 2px no-repeat;
}

.menu[open] > summary { background: var(--bone); }

.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: grid;
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  padding: 4px var(--gutter) 24px;
  background: var(--ivory);
  border-top: 1px solid var(--line);
  box-shadow: 0 30px 40px -30px rgb(73 77 62 / 0.55);
}

.menu-panel a:not(.button) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  color: var(--olive);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
}

/* A dot marks the page you are on. */
.menu-panel a[aria-current="page"]:not(.button)::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--olive);
}

.menu-panel .button { margin-top: 18px; }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .menu { display: none; }
}

/* ---- The circle ------------------------------------------------------------------
 * The app's recurring shape: one large soft circle running off an edge. Every use
 * here is a true circle, in sage on light surfaces or faint ivory on dark ones.
 */
.orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mist);
  pointer-events: none;
}

/* ---- Hero ------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: clip;
  padding: clamp(32px, 6vw, 88px) var(--gutter) clamp(64px, 8vw, 120px);
}

.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 22px;
  justify-items: start;
}

.hero-lede {
  max-width: 34rem;
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.95rem;
  color: var(--muted);
}

.hero-facts span { display: inline-flex; align-items: center; gap: 9px; }

.hero-facts span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pollen);
}

.hero-visual {
  position: relative;
  min-height: clamp(560px, 62vw, 700px);
  display: grid;
  place-items: center;
}

.hero-visual .orb {
  background: conic-gradient(var(--blue) 0 25%, var(--khaki) 0 50%, var(--lilac) 0 75%, var(--fern) 0);
  top: 50%;
  left: 50%;
  z-index: 0;
  width: clamp(560px, 60vw, 840px);
  overflow: hidden;
  transform: translate(-36%, -50%);
}


/* A large puzzle inside the circle. Its starting digits show at rest; scrolling
 * down the page fills in the rest, where the browser supports it. */
.hero-grid {
  position: absolute;
  inset: 3%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  transform: rotate(-9deg) scale(1.12);
  background:
    linear-gradient(to right, rgb(73 77 62 / 0.26) 2px, transparent 2px) 0 0 / calc(100% / 3) 100%,
    linear-gradient(to bottom, rgb(73 77 62 / 0.26) 2px, transparent 2px) 0 0 / 100% calc(100% / 3),
    linear-gradient(to right, rgb(73 77 62 / 0.11) 1px, transparent 1px) 0 0 / calc(100% / 9) 100%,
    linear-gradient(to bottom, rgb(73 77 62 / 0.11) 1px, transparent 1px) 0 0 / 100% calc(100% / 9);
}

.hg-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.hg-cell.lit { background: rgb(251 250 245 / 0.3); }

.hg-cell b {
  font: 700 clamp(18px, 2.2vw, 32px) / 1 var(--display);
  color: var(--olive);
  opacity: 0.5;
}

.hg-cell:not(.lit) b { opacity: 0; }

@keyframes hg-fill {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hg-cell:not(.lit) b {
      animation: hg-fill linear both;
      animation-timeline: scroll(root);
      animation-range: calc(var(--at) * 620px) calc(var(--at) * 620px + 90px);
    }
  }
}

/* ---- Phone frames ---------------------------------------------------------------- */

.phone {
  --pw: 300px;
  position: relative;
  z-index: 1;
  width: var(--pw);
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.165);
  background: #1c1e18;
  box-shadow:
    inset 0 0 0 1.5px #5a5e50,
    0 2px 4px rgb(73 77 62 / 0.2),
    0 40px 80px -40px rgb(73 77 62 / 0.75);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--pw) * 0.135);
}

.phone-hero {
  --pw: clamp(250px, 24vw, 316px);
  transform: translateX(-10%);
}

@media (max-width: 999px) {
  .phone-hero { transform: none; }
}

/* ---- Variants ------------------------------------------------------------------------- */

.variants {
  list-style: none;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 28px;
}

@media (min-width: 600px) {
  .variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .variants { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.variant {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
}


/* Each example is the app's own screenshot, cropped to the board. In the
 * 920 x 2000 captures the board runs from x 39 to 880 and y 415 to 1256. */
.board-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ivory);
  box-shadow: 0 0 0 1px rgb(73 77 62 / 0.3), var(--shadow-raised);
}

.board-shot img {
  position: absolute;
  top: calc(-415 / 842 * 100%);
  left: calc(-39 / 842 * 100%);
  width: calc(920 / 842 * 100%);
  max-width: none;
  height: auto;
}

/* On phones each example sits beside its text instead of above it. */
@media (max-width: 599px) {
  .variants { gap: 28px; }
  .variant {
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 18px;
    row-gap: 6px;
  }
  .variant .board-shot { grid-row: 1 / span 2; margin-bottom: 0; border-radius: 6px; }
  .variant > :not(.board-shot) { grid-column: 2; }
  .variant p { font-size: 0.97rem; }
}

/* ---- Play section --------------------------------------------------------------------- */

.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (min-width: 980px) {
  .play {
    grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
    gap: clamp(48px, 6vw, 96px);
  }
  .play-intro { position: sticky; top: 108px; }
}

.play-intro { display: grid; gap: 18px; max-width: 30rem; }
.play-lede { font-size: 1.12rem; }
.pad-hint, .keys-hint { font-size: 0.93rem; color: var(--muted); }

@media (hover: none) {
  .keys-hint, .pad-hint-hover { display: none; }
}

/* The playable board sits in a light-sage frame, like the app's game screen.
 * Nothing small is written straight onto the sage: every label has an ivory chip. */
.console {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 580px;
  justify-self: center;
  padding: clamp(14px, 3.4vw, 28px);
  border-radius: clamp(24px, 4vw, 38px);
  background: var(--mist);
}

.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.level,
.hud-item {
  min-height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  background: var(--ivory);
}

.level {
  background: var(--olive);
  color: var(--ivory);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hud-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
}

.strikes { display: inline-flex; gap: 6px; }

.strikes i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--stone);
}

.strikes i.used {
  background: var(--error);
  box-shadow: none;
}

.strikes-note { font-size: 0.85rem; color: var(--moss); }

.clock {
  min-width: 4ch;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.noscript { padding: 32px 16px; text-align: center; }

/* ---- The board --------------------------------------------------------------------
 * Drawn like the app's: ivory squares, hairlines, heavier lines between boxes,
 * and starting digits on bone.
 */
.tray {
  container-type: inline-size;
  overflow: hidden;
  border: 2px solid var(--moss);
  border-radius: 6px;
  background: var(--ivory);
  box-shadow: 0 14px 34px -22px rgb(73 77 62 / 0.9);
}

.board {
  --n: 9;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.board-row { display: flex; }
.board-row + .board-row { border-top: 1px solid var(--hair); }
.board-row.band-start { border-top: 2px solid var(--moss); }

.cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  background: var(--ivory);
  cursor: pointer;
  transition: background-color 140ms var(--ease-out);
}

.cell + .cell { border-left: 1px solid var(--hair); }
.cell.stack-start { border-left: 2px solid var(--moss); }
.cell.given { background: var(--bone); }
.cell.peer { background: var(--peer); }
.cell.selected { background: var(--selected); }
.cell:focus { outline: none; }

.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 2.5px var(--olive);
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
  pointer-events: none;
}

.cell.selected::after { opacity: 1; }
.cell:focus-visible::after { opacity: 1; box-shadow: inset 0 0 0 4px var(--olive); }

.board.locked .cell { cursor: default; }

/* A piece is the digit in a square. */
.piece {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--olive);
  font: 700 calc(100cqi / var(--n) * 0.54) / 1 var(--display);
  font-variant-numeric: lining-nums;
  transform: scale(0);
  transition:
    transform 220ms var(--ease-spring),
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out);
}

.cell.has-value .piece { transform: scale(1); }

/* Every copy of the chosen digit, and the whole board once solved, turns dark. */
.cell.bloom .piece,
.board.solved .piece {
  background: var(--olive);
  color: var(--ivory);
}

.cell.wrong .piece {
  background: var(--error-tint);
  color: var(--error);
  box-shadow: inset 0 0 0 2.5px var(--error);
}

.cell.wrong .piece::after {
  content: "×";
  position: absolute;
  top: 5%;
  right: 5%;
  width: 32%;
  height: 32%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--error);
  color: var(--ivory);
  font: 700 46% / 1 var(--text);
}

.notes {
  position: absolute;
  inset: 6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  color: var(--olive);
  font: 600 calc(100cqi / var(--n) * 0.22) / 1 var(--text);
  pointer-events: none;
}

.notes span { display: grid; place-items: center; }

.notes span.hit {
  border-radius: 50%;
  background: var(--olive);
  color: var(--ivory);
}

.cell.has-value .notes { visibility: hidden; }

@media (hover: hover) and (pointer: fine) {
  .board:not(.solved):not(.locked) .cell:not(.selected):not(.peer):hover { background: var(--peer); }
}

/* ---- Board motion ----------------------------------------------------------------- */

@keyframes set-down {
  from { transform: scale(0.5); }
  to { transform: scale(1); }
}

.board.arriving .cell.given .piece {
  animation: set-down 460ms var(--ease-spring) both;
  animation-delay: calc(var(--i) * 18ms);
}

@keyframes pop {
  0% { transform: scale(0.4); }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.cell.placed .piece { animation: pop 260ms var(--ease-out); }

@keyframes shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -5px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 2px 0; }
}

.cell.shake { animation: shake 280ms var(--ease-out); }

@keyframes pulse {
  35%, 65% {
    background-color: var(--olive);
    color: var(--ivory);
  }
}

.cell.pulse .piece {
  animation: pulse 640ms var(--ease-out);
  animation-delay: var(--pd, 0ms);
}

.cell.placed.pulse .piece {
  animation: pop 260ms var(--ease-out), pulse 640ms var(--ease-out) var(--pd, 0ms);
}

@keyframes settle {
  0% { transform: scale(1); }
  45% { transform: scale(0.78); }
  100% { transform: scale(1); }
}

.board.solved .piece {
  animation: settle 620ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 30ms);
  transition-delay: calc(var(--i) * 30ms);
}

/* ---- Tools and keypad ------------------------------------------------------------- */

.controls { display: grid; gap: 12px; }

.tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tool {
  min-height: 46px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  background: var(--ivory);
  color: var(--olive);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(73 77 62 / 0.18);
  -webkit-tap-highlight-color: transparent;
  transition: transform 110ms var(--ease-out), background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}

.tool svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool:active:not(:disabled) { transform: scale(0.97); }
.tool:disabled { color: var(--stone); cursor: default; }

.tool[aria-pressed="true"] {
  background: var(--olive);
  color: var(--ivory);
}

/* Five keys over four on phones, as in the app; one row of nine when there is room. */
.pad {
  --n: 9;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 600px) {
  .pad { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
}

.key {
  min-height: 62px;
  padding: 6px 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  border-radius: 14px;
  background: var(--ivory);
  color: var(--olive);
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(73 77 62 / 0.2);
  -webkit-tap-highlight-color: transparent;
  transition: transform 110ms var(--ease-out), opacity 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.key-disc {
  font: 700 1.55rem / 1 var(--display);
  font-variant-numeric: lining-nums;
}

.key-left {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: var(--moss);
  font-variant-numeric: tabular-nums;
}

.key:active { transform: scale(0.95); }
.key.complete { opacity: 0.45; cursor: default; }

/* In notes mode the keys go hollow, like pencil instead of ink. */
.pad.notes-mode .key {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ivory);
}

.pad.notes-mode .key-left { visibility: hidden; }

/* ---- Result --------------------------------------------------------------------- */

.result {
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 20px;
  background: var(--ivory);
}

.result .h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); }
.result .h3:focus { outline: none; }
.result .result-meta { font-size: 0.93rem; color: var(--moss); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.btn {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--bone);
  color: var(--olive);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 110ms var(--ease-out);
}

.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--olive); color: var(--ivory); }

.share-text {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bone);
  font-size: 0.9rem;
  white-space: pre-line;
  user-select: all;
  -webkit-user-select: all;
}

/* ---- Daily --------------------------------------------------------------------------- */

.section-night {
  background: var(--olive);
  color: var(--bone);
}

.section-night h2,
.section-night h3 { color: var(--ivory); }
.section-night .eyebrow { color: var(--bone); }
.section-night :focus-visible { outline-color: var(--ivory); }

/* Cards as the app draws them: a shade lighter than the ground, with the circle in one corner. */
.daily-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: rgb(251 250 245 / 0.07);
}

.daily-card::after {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -30%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(251 250 245 / 0.055);
  pointer-events: none;
}

.daily-cards {
  list-style: none;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 600px) {
  .daily-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .daily-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.daily-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 24px;
}

.daily-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.daily-card h3 { font-size: 1.3rem; }

/* Four across, a long name wraps; hold two lines on every card so the rows line up. */
@media (min-width: 1100px) {
  .daily-card-top { min-height: 3.2rem; }
  .daily-card > p:first-of-type { min-height: 3.3em; }
}

.badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(251 250 245 / 0.12);
  color: var(--ivory);
  font-size: 0.78rem;
  font-weight: 600;
}

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding-top: 4px;
}

.week span {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}

.week i {
  width: 14px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgb(251 250 245 / 0.4);
}

.week i.done { background: var(--ivory); box-shadow: none; }
.week i.today { outline: 2px solid var(--ivory); outline-offset: 3px; }

.daily-streak b {
  margin-right: 4px;
  font-family: var(--display);
  font-variant-numeric: lining-nums;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ivory);
}

.night-note { margin-top: 18px; font-size: 0.87rem; }

/* ---- Features ---------------------------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.features-copy { order: -1; }

@media (min-width: 980px) {
  .features { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(56px, 7vw, 104px); }
  .features-copy { order: 0; }
}

.features-phone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.features-phone::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(118%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mist);
  transform: translateX(-62%);
}

.phone-side { --pw: clamp(240px, 24vw, 300px); }
.phone-caption { position: relative; font-size: 0.9rem; color: var(--olive); text-align: center; }

.feature-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
}

.feature {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding-block: 20px;
  border-top: 1px solid var(--line);
}

.feature:last-child { border-bottom: 1px solid var(--line); }
.feature .h3 { font-size: 1.25rem; }
.feature p { margin-top: 4px; }

@media (max-width: 480px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

.fragment {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.frag-cell {
  position: relative;
  width: 60px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1.5px var(--moss);
  color: var(--olive);
  font: 700 1.9rem / 1 var(--display);
}

.frag-notes {
  position: absolute;
  inset: 10%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font: 600 0.74rem / 1 var(--text);
}

.frag-notes i { display: grid; place-items: center; font-style: normal; }

.frag-wrong {
  background: var(--error-tint);
  box-shadow: inset 0 0 0 2.5px var(--error);
  color: var(--error);
}

.frag-wrong::after {
  content: "×";
  position: absolute;
  top: 5%;
  right: 5%;
  width: 32%;
  height: 32%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--error);
  color: var(--ivory);
  font: 700 0.8rem / 1 var(--text);
}

.frag-dots { display: flex; gap: 5px; }
.frag-dots i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--stone); }
.frag-dots i.used { background: var(--error); box-shadow: none; }

.frag-pill,
.frag-time,
.frag-sync {
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px rgb(73 77 62 / 0.3);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.frag-pill { display: inline-flex; align-items: center; gap: 6px; }

.frag-pill svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.frag-time { font-size: 1rem; font-variant-numeric: tabular-nums; }
.frag-sync { font-weight: 600; font-size: 0.82rem; }

.frag-switch {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 99px;
  background: var(--olive);
}

.frag-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ivory);
}

/* ---- Free and premium --------------------------------------------------------------- */

.plans {
  max-width: 900px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 760px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: var(--ivory);
  box-shadow: var(--shadow-raised);
}

.plan .h3 { font-size: 1.7rem; }

.plan ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.plan li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
}

.plan li::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--sage);
}

.plan-premium { background: var(--olive); color: var(--bone); }
.plan-premium .h3 { color: var(--ivory); }
.plan-premium li::before { background: var(--mist); }

.plan-premium::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -34%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(251 250 245 / 0.06);
  pointer-events: none;
}

/* ---- FAQ --------------------------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 900px) {
  .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 64px; }
}

.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }

.faq-list summary {
  position: relative;
  padding: 20px 44px 20px 0;
  list-style: none;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 6px;
  font: 400 1.9rem / 1 var(--display);
  translate: 0 -50%;
  transition: rotate 200ms var(--ease-out);
}

.faq-list details[open] summary::after { rotate: 45deg; }

.faq-list details p {
  max-width: 62ch;
  padding: 0 44px 22px 0;
}

/* ---- Closing and footer -------------------------------------------------------------- */

.closing {
  position: relative;
  overflow: clip;
  background: var(--mist);
  text-align: center;
}

/* Two circles, placed as on the app's welcome screen. */
.closing::before,
.closing::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.45;
  pointer-events: none;
}

.closing::before { top: -18%; right: -8%; width: min(46%, 620px); background: var(--blue); opacity: 0.5; }
.closing::after { bottom: -40%; left: -8%; width: min(36%, 480px); background: var(--lilac); opacity: 0.6; }

.closing-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 22px;
}

.closing-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgb(73 77 62 / 0.18), 0 18px 36px -18px rgb(73 77 62 / 0.8);
}

.closing h2 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); }

/* Large enough to count as large text on sage. */
/* Dark olive on light sage is 4.15 to 1: enough for large text only, so this line is never under 24px. */
.closing p { max-width: 30rem; font-size: 1.5rem; line-height: 1.35; text-wrap: balance; }

.site-footer {
  padding: 40px var(--gutter) 52px;
  background: var(--olive);
  color: var(--bone);
}

.site-footer :focus-visible { outline-color: var(--ivory); }
.site-footer .wordmark { color: var(--ivory); }

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ivory);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.footer-nav a:hover { text-decoration: underline; }
.footer-note { flex-basis: 100%; font-size: 0.88rem; }

/* ---- Reduced motion ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Ways in from the home page ------------------------------------------------------- */

/* A card's title is its link, and the link covers the card. */
.variant, .door { position: relative; }
.variant h3 a, .door h3 a { color: inherit; text-decoration: none; }
.variant h3 a::before, .door h3 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.variant h3 a:hover, .door h3 a:hover { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.2em; }
.variant h3 a:focus-visible, .door h3 a:focus-visible { outline: none; }
.variant:has(a:focus-visible), .door:has(a:focus-visible) { outline: 2px solid var(--olive); outline-offset: 6px; border-radius: 12px; }

.more { margin-top: clamp(28px, 4vw, 44px); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--olive);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.25em;
}

.doors {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 860px) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.door {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 28px 30px;
  border-radius: 22px;
  background: var(--bone);
  color: var(--olive);
}

.door .fragment { margin-bottom: 6px; }

/* A week of the Daily tab: five days played, two to come. */
.frag-week { display: inline-flex; gap: 8px; }
.frag-week i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--moss); }
.frag-week i.done { background: var(--olive); box-shadow: none; }

/* ---- The puzzles page ----------------------------------------------------------------- */

.kinds {
  display: grid;
  gap: clamp(52px, 7vw, 104px);
  margin-top: clamp(40px, 5vw, 72px);
}

.kind {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  scroll-margin-top: 96px;
}

.kind .board-shot { max-width: 440px; margin-bottom: 0; }
.kind-copy { display: grid; gap: 12px; align-content: start; max-width: 34rem; }
.kind-lede { font-size: 1.2rem; font-weight: 700; }

.kind-facts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kind-facts li {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px rgb(73 77 62 / 0.22);
  color: var(--olive);
  font-size: 0.88rem;
  font-weight: 700;
}

/* Side by side from 860px, the board changing sides from one kind to the next. */
@media (min-width: 860px) {
  .kind { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
  .kind:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .kind:nth-child(even) .board-shot { order: 2; }
  .kind:nth-child(even) .kind-copy { justify-self: end; }
}

/* ---- The logo's colours, one for each kind of puzzle ----------------------------------- */

.variant:nth-child(1), #classic { --kind: var(--fern); }
.variant:nth-child(2), #killer { --kind: var(--blue); }
.variant:nth-child(3), #butterfly { --kind: var(--lilac); }
.variant:nth-child(4), #mini { --kind: var(--khaki); }

/* Each board sits on a square of its colour, set off like the logo's quarters. */
.variant .board-shot { box-shadow: 0 0 0 1px rgb(73 77 62 / 0.3), 10px 10px 0 0 var(--kind), var(--shadow-raised); }
.kind .board-shot { box-shadow: 0 0 0 1px rgb(73 77 62 / 0.3), 22px 22px 0 0 var(--kind), var(--shadow-raised); }
.kind-facts li { background: color-mix(in srgb, var(--kind) 55%, var(--ivory)); box-shadow: none; }

/* The three doors on the home page take the remaining quarters, softened toward ivory. */
.door:nth-child(1) { background: color-mix(in srgb, var(--blue) 45%, var(--ivory)); }
.door:nth-child(2) { background: color-mix(in srgb, var(--lilac) 70%, var(--ivory)); }
.door:nth-child(3) { background: color-mix(in srgb, var(--khaki) 65%, var(--ivory)); }
.frag-week i.done { background: var(--olive); }

/* ---- The makers' social accounts ------------------------------------------------------- */

.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.footer-maker { font-weight: 600; font-size: 0.95rem; }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ivory);
  box-shadow: inset 0 0 0 1.5px rgb(251 250 245 / 0.35);
  transition: background 160ms var(--ease-out);
}
.social a:hover { background: rgb(251 250 245 / 0.12); }
.social a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
.social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social svg .fill { fill: currentColor; stroke: none; }

/* ---- The Blog dropdown in the menu ------------------------------------------------------ */

.dropdown { position: relative; }

.dropdown > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  color: var(--olive);
  font-weight: 600;
  font-size: 0.95rem;
  list-style: none;
  cursor: pointer;
}

.dropdown > summary::-webkit-details-marker { display: none; }

/* A small chevron, turned up while the list is open. */
.dropdown > summary::before {
  content: "";
  order: 2;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  rotate: 45deg;
  transition: rotate 160ms var(--ease-out);
}

.dropdown[open] > summary::before { rotate: 225deg; margin-top: 3px; }

/* On a blog page, the Blog button is underlined like any other page you are on. */
.dropdown:has(a[aria-current="page"]) > summary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--olive);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: -18px;
  z-index: 30;
  display: grid;
  min-width: 270px;
  padding: 8px;
  border-radius: 16px;
  background: var(--ivory);
  box-shadow: 0 0 0 1px var(--line), 0 24px 44px -24px rgb(73 77 62 / 0.55);
}

.site-nav .dropdown-panel a:not(.button) {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
}

.site-nav .dropdown-panel a:not(.button):hover { background: var(--bone); text-decoration: none; }
.site-nav .dropdown-panel a[aria-current="page"]:not(.button) { background: color-mix(in srgb, var(--lilac) 70%, var(--ivory)); }
.site-nav .dropdown-panel a[aria-current="page"]:not(.button)::after { display: none; }

/* The posts sit under Blog in the phone menu, a step in and a size down. */
.menu-panel a.sub:not(.button) { padding-left: 22px; font-size: 1.1rem; font-family: var(--text); font-weight: 600; }

/* ---- The blog ---------------------------------------------------------------------------- */

.posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(32px, 4vw, 48px);
}

@media (min-width: 860px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.post-card {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--fern) 55%, var(--ivory));
}

.post-card:nth-child(2) { background: color-mix(in srgb, var(--blue) 45%, var(--ivory)); }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card h2 a:hover { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.2em; }
.post-card:has(a:focus-visible) { outline: 2px solid var(--olive); outline-offset: 4px; }
.post-card h2 a:focus-visible { outline: none; }

.post-meta { font-size: 0.9rem; font-weight: 600; color: var(--olive); }

/* A post reads in one comfortable column. */
.post {
  display: grid;
  gap: 18px;
  max-width: 42rem;
  margin-inline: auto;
}

.post .eyebrow a { color: inherit; }
.post-lede { font-size: 1.25rem; line-height: 1.5; }
.post h2.h3 { margin-top: 18px; }
.post p { font-size: 1.06rem; line-height: 1.7; }
.post p a, .post-next a { color: var(--olive); font-weight: 700; text-decoration-thickness: from-font; text-underline-offset: 0.2em; }
.post-next { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }

.post-figure { margin: 8px 0; display: grid; gap: 12px; }
.post-figure .board-shot { max-width: 420px; box-shadow: 0 0 0 1px rgb(73 77 62 / 0.3), 16px 16px 0 0 var(--blue), var(--shadow-raised); }
.post-figure figcaption { font-size: 0.92rem; color: var(--olive); }

.post-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.post-table caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.post-table th, .post-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.post-table th { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.post-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--khaki) 30%, var(--ivory)); }