@font-face {
  font-family: "Bricolage";
  /* Subset by scripts/subset-bricolage.sh: Latin only, width fixed at 85%, weights 700 to 800. */
  src: url("/fonts/bricolage-display.woff2") format("woff2");
  font-weight: 700 800;
  font-stretch: 85%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("/fonts/atkinson-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("/fonts/atkinson-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("/fonts/atkinson-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

:root {
  color-scheme: light dark;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-gutter: stable;

  --font-display: "Bricolage", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --paper: light-dark(oklch(98.5% 0.004 95), oklch(19% 0.005 95));
  --card: light-dark(oklch(100% 0 none), oklch(23% 0.005 95));
  --strip: light-dark(oklch(94% 0.004 250), oklch(29% 0.006 250));
  --ink: light-dark(oklch(20% 0.012 60), oklch(94% 0.01 85));
  --pencil: light-dark(oklch(44% 0.01 70), oklch(77% 0.01 75));
  --tomato: light-dark(oklch(52% 0.19 32), oklch(72% 0.16 35));
  --tomato-deep: color-mix(in oklch, var(--tomato), var(--ink) 25%);
  --on-tomato: light-dark(oklch(98% 0.005 85), oklch(18% 0.01 60));
  --on-ink: var(--paper);
  --basil: light-dark(oklch(48% 0.12 150), oklch(70% 0.13 150));
  --sage-deep: oklch(47% 0.05 150); /* #47634c. White on it is 6.65:1; panels behind logo-white.svg */
  --ph: color-mix(in oklch, var(--tomato) 13%, var(--card));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-s: 180ms;
  --dur-m: 300ms;
  --dur-l: 400ms;

  --rule: 1.5px solid var(--ink);
  --dots: 2px dotted var(--pencil);

  --text-body: clamp(1.125rem, 1.08rem + 0.2vw, 1.3125rem);
  --text-small: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  --text-label: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
  --text-h1: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);
  --text-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --tap: max(48px, 3rem);
  --space-s: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem);
  --space-m: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-section: clamp(2rem, 1rem + 4vw, 4rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --art-small: clamp(3.5rem, 2rem + 4vw, 5rem);
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  min-block-size: 100svh;
  padding-inline: var(--gutter);
  padding-block: var(--space-s) var(--space-section);
  background: var(--paper);
  color: var(--ink);
  font: var(--text-body) / 1.55 var(--font-body);
}

body {
  container: page / inline-size;
}

body > * {
  max-inline-size: 72rem;
  margin-inline: auto;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 85%;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: 1.05; }
p { margin: 0; }

img, svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid var(--tomato);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--tomato); }
  .chip:hover { background: var(--ink); color: var(--on-ink); }
}

a:active { color: var(--tomato); }
.cats a:active,
.chip:active { transform: scale(0.97); }

@media (prefers-reduced-motion: no-preference) {
  .cats a,
  .chip,
  .button,
  .search button,
  .form button {
    transition: transform 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
  }
}

/* Header */
.site-header {
  display: grid;
  gap: var(--space-m);
  padding-block-end: var(--space-m);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0 var(--space-m);
  border-block-end: var(--rule);
  padding-block-end: var(--space-s);
}

.brand {
  margin-inline-end: auto;
  line-height: 0;
}

.brand a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  border-radius: 2px;
}

/* Logo artwork (tilt and fold included) is used as supplied: never rotate or recolour it here.
   Sized by width so the 157:36 ratio always holds: about 36px tall on phones, up to 44px on
   desktop. On narrow phones it may shrink with the row, down to 28px tall at 320px. */
.brand { min-inline-size: 0; }
.brand img {
  display: block;
  inline-size: clamp(9.8125rem, 8.29rem + 4.36vw, 12rem);
  max-inline-size: 100%;
  block-size: auto;
}

.brand a:active img { transform: scale(0.97); }

@media (prefers-reduced-motion: no-preference) {
  .brand img { transition: transform 140ms ease-out; }
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 0 1.25rem;
  font-weight: 700;
}

.navlink {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
}

.topbar .button { white-space: nowrap; padding-inline: 1.1rem; }

/* Phone Menu: a <details>, so it opens without JS. */
.menu { display: none; position: relative; }

.menu summary {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: 1rem;
  border: var(--rule);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

.menu summary::-webkit-details-marker { display: none; }
.menu summary:active { transform: scale(0.97); }
.menu[open] summary { background: var(--ink); color: var(--on-ink); }

.menu nav {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-end: 0;
  z-index: 3;
  min-inline-size: 13rem;
  border: var(--rule);
  background: var(--card);
}

.menu ul { margin: 0; padding: 0; list-style: none; }
.menu li + li { border-block-start: var(--dots); }

.menu li a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.menu li a:active { background: var(--strip); }

@media (hover: hover) and (pointer: fine) {
  .menu li a:hover { background: var(--strip); color: var(--ink); }
}

@container page (width < 40rem) {
  .navlinks { display: none; }
  .menu { display: block; }
  .topbar { gap: 0 0.25rem; }
  .topbar .button { padding-inline: 0.875rem; }
  .menu summary { padding-inline: 0.75rem; }
  /* Only the logo gives way when the row is tight; the two buttons keep their size. */
  .topbar > .button,
  .menu { flex-shrink: 0; }
}

/* Under 23rem the full logo would drop below its 28px minimum, so the header shows the square
   icon instead (brand sheet: "below that, use the icon"). Same breakpoint as the <source> media. */
@media (width < 23rem) {
  .brand img { inline-size: 2.5rem; }
}

.sep { color: var(--pencil); }

.lede { color: var(--pencil); max-inline-size: 38rem; font-size: var(--text-body); }
.art-books,
.art-notebook { inline-size: var(--art-small); }
.art-notebook { transform: rotate(-6deg); }

@media (width < 40rem) {
  .art-books,
  .art-notebook { display: none; }
}

/* Category chips: price-gun labels */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cats a,
.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-block: 0.25rem;
  padding-inline: 0.8rem;
  border: var(--rule);
  background: var(--card);
  color: var(--ink);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.count {
  margin-inline-start: 0.4em;
  color: var(--tomato);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .cats a:hover .count { color: inherit; }
}

/* Sections and card lists */
.category {
  margin-block-start: var(--space-section);
  padding-block-start: var(--space-m);
  border-block-start: 3px dotted var(--ink);
  scroll-margin-block-start: var(--space-s);
}

.category > h1,
.category > h2 { padding-block-end: var(--space-m); }

.category > h2 a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .category > h2 a:hover { color: var(--tomato); text-decoration: underline; }
}

.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  align-items: start;
}

/* Recipe card: one ruled box, header strip on top */
.card {
  display: grid;
  background: var(--card);
  border: var(--rule);
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-inline: var(--space-s);
  border-block-end: var(--rule);
  background: var(--strip);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Each item carries its own leading dot, so a dot never ends a line and items never split. */
.card-head .it { display: inline-flex; align-items: center; white-space: nowrap; }
.card-head { column-gap: 1rem; }
.card-head .no { font-variant-numeric: tabular-nums; }
.card-head .tool { margin-inline-start: auto; color: var(--pencil); }

.card-head a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  color: var(--ink);
  text-decoration: underline;
}

.card-body {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
}

.photo { margin: 0; }

.photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 960 / 540;
  object-fit: cover;
  border: 1px solid var(--ink);
}

.credit {
  font-size: var(--text-small);
  color: var(--pencil);
}

.credit a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  color: var(--pencil);
  text-decoration: underline;
}

.card h3 a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap);
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .card h3 a:hover { color: var(--tomato); text-decoration: underline; }
}

.desc { color: var(--pencil); }

.notice {
  padding-block: var(--space-s);
  border-block: var(--dots);
  font-size: var(--text-small);
}

.notice strong { color: var(--tomato); }

.prompt {
  margin: 0;
  padding-block: var(--space-s);
  border-block: var(--dots);
  font: var(--text-small) / 1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

mark.ph {
  padding-inline: 0.2em;
  background: var(--ph);
  color: var(--tomato-deep);
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.prompt code { font: inherit; }

.source { font-size: var(--text-small); }
.source a,
.sponsor-bar p a { display: inline-flex; align-items: center; min-block-size: var(--tap); }

/* Card actions and footer (the shared card partial) */
.card .hint { font-size: var(--text-label); }
.card.feature { border-width: 2.5px; }
.card.feature h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); }

/* Header: "Read more" takes the slot the tool tag used */
.card-head .read-more {
  white-space: nowrap;
  margin-inline-start: auto;
  gap: 0.35em;
  color: var(--tomato-deep);
}
.card-head .read-more:active { color: var(--tomato); }
@media (hover: hover) and (pointer: fine) {
  .card-head .read-more:hover { color: var(--tomato); }
}

/* Tighter card: less padding and gap, no footer row */
.card .card-body { gap: 0.5rem; padding: var(--space-s) var(--space-m) var(--space-m); }
.card .prompt { padding-block: 0.5rem; line-height: 1.5; }
.card .hint { margin-block-start: -0.25rem; }

/* Actions: Copy on top, then one full-width row: [vote] | or open in [3 equal tiles] */
.card-actions { display: grid; gap: 0.5rem; container-type: inline-size; }
.card-actions .copy { inline-size: 100%; min-block-size: 3.25rem; }
.card-actions .copy.done { border-color: var(--basil); background: var(--basil); }
.open-in {
  display: grid;
  grid-template-columns: auto auto repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: 0.375rem;
  inline-size: 100%;
}
.open-label { color: var(--pencil); font-size: var(--text-label); white-space: nowrap; }
.apps { display: contents; margin: 0; padding: 0; list-style: none; }
.apps li { min-inline-size: 0; }
@container (inline-size < 19rem) {
  .open-label { display: none; }
  .open-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .open-in .vote { inline-size: 100%; }
}

/* Upvote: 48px icon button, divider on its right */
.open-in .upvote { display: grid; align-items: center; block-size: var(--tap); }
.vote {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid color-mix(in oklch, var(--ink) 30%, transparent);
  border-radius: 0.5rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.vote .thumb { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vote .count { font-size: var(--text-label); font-variant-numeric: tabular-nums; }
.vote[aria-pressed="true"] { border-color: var(--basil); background: var(--basil); color: var(--on-tomato); }
.vote[aria-pressed="true"] .thumb { fill: currentColor; }
.vote:focus-visible { outline: 3px solid var(--tomato); outline-offset: 2px; }
.vote:active { scale: 0.92; }
@media (hover: hover) and (pointer: fine) {
  .vote[aria-pressed="false"]:hover { background: var(--ink); color: var(--on-ink); }
}

/* App tiles: each fills its third, 48px tall to tap */
.app {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: var(--tap);
  border-radius: 0.5rem;
  touch-action: manipulation;
}
.app .app-mark {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in oklch, var(--ink) 30%, transparent);
}
.app svg { inline-size: 1.25rem; block-size: 1.25rem; }
.app-chatgpt svg, .app-claude svg { fill: currentColor; }
.app-chatgpt .app-mark { background: oklch(100% 0 none); color: oklch(0% 0 none); }
.app-claude .app-mark  { background: oklch(97% 0.012 85); color: oklch(66% 0.13 40); }
.app-grok .app-mark    { background: oklch(0% 0 none); border-color: oklch(0% 0 none); }
.app:focus-visible { outline: 3px solid var(--tomato); outline-offset: 0; }
.app:active .app-mark { scale: 0.96; }
@media (hover: hover) and (pointer: fine) {
  .app:hover .app-mark { box-shadow: 0 0 0 2px var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .app .app-mark { transition: scale var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
  .vote { transition: scale var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out); }
}

::placeholder { color: var(--pencil); opacity: 1; }
.empty { padding-block: var(--space-section); color: var(--pencil); }
.results-count { color: var(--pencil); padding-block-end: var(--space-m); }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Search */
.search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-inline-size: 36rem;
}

.search input {
  flex: 1 1 14rem;
  min-block-size: var(--tap);
  padding-block: 0.5rem;
  padding-inline: 0.8rem;
  border: var(--rule);
  border-radius: 0;
  background: var(--card);
  color: inherit;
  font: inherit;
}

/* Buttons */
.button,
.search button,
.form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--tap);
  padding-block: 0.4rem;
  padding-inline: 1.25rem;
  border: 1.5px solid var(--tomato);
  border-radius: 0;
  background: var(--tomato);
  color: var(--on-tomato);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover,
  .search button:hover,
  .form button:hover {
    background: var(--tomato-deep);
    border-color: var(--tomato-deep);
    color: var(--on-tomato);
  }
}

.button:active,
.search button:active,
.form button:active { transform: scale(0.97); }

.button[hidden] { display: none; }

.button.big {
  min-block-size: 3.5rem;
  padding-inline: 1.75rem;
  font-size: calc(var(--text-body) * 1.1);
}

.button.ghost {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .button.ghost:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-ink);
  }
}

/* Entry page */
.entry > .card { max-inline-size: 48rem; margin-inline: auto; }
.entry .prompt { user-select: all; }
.entry h1 { font-size: var(--text-h2); line-height: 1.02; }
.prompt-wrap { display: grid; gap: var(--space-s); }
.upvote { margin: 0; }
.label { font-size: var(--text-label); font-family: var(--font-body); font-stretch: 100%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pencil); }

.actions { display: grid; gap: var(--space-s); }
.actions .button.big { inline-size: 100%; }
.open-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.open-row .button { flex: 1 1 10rem; }
.hint { color: var(--pencil); font-size: var(--text-small); }

/* Forms and pages */
.narrow { max-inline-size: 40rem; display: grid; gap: var(--space-m); }

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.form label { display: grid; gap: 0.25rem; font-size: var(--text-small); font-weight: 700; }

.form :is(input, select, textarea) {
  min-block-size: var(--tap);
  padding-block: 0.5rem;
  padding-inline: 0.8rem;
  border: var(--rule);
  border-radius: 0;
  background: var(--card);
  color: inherit;
  font: var(--text-body) / 1.4 var(--font-body);
  font-weight: 400;
}

.form textarea { field-sizing: content; min-block-size: 3lh; max-block-size: 14lh; resize: vertical; }
.form :is(input, textarea):user-invalid { border-color: var(--tomato); }
.form button { align-self: start; }

/* Honeypot: off-screen for people, still in the DOM for bots. */
.hp { position: absolute; inset-inline-start: -10000px; }

.flash {
  padding-block: var(--space-s);
  border-block: var(--dots);
  font-weight: 700;
}

.flash.error { color: var(--tomato); }

.stats {
  display: grid;
  margin: 0;
  border: var(--rule);
  background: var(--card);
}

.stats > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-m);
  padding: var(--space-s) var(--space-m);
}

.stats > div + div { border-block-start: var(--dots); }
.stats dt { color: var(--pencil); font-size: var(--text-small); }
.stats dd { margin: 0; font-family: var(--font-display); font-stretch: 85%; font-size: var(--text-h3); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Home: hero, then Top this week, chips, sample category, newsletter strip */
.photo-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* full-bleed inside the 72rem main: reach the page edges (cqi is the body container) */
  margin-inline: calc(50% - 50cqi - var(--gutter));
  padding-inline: calc(50cqi + var(--gutter) - 50%);
}

.bg { position: absolute; inset: 0; z-index: -2; overflow: clip; }

.bg img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 60% 35%;
}

@media (prefers-color-scheme: dark) {
  .bg img { filter: brightness(0.7); }
}

.photo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 48% at 0 100%, color-mix(in oklch, var(--paper) 80%, transparent), transparent),
    linear-gradient(90deg, color-mix(in oklch, var(--paper) 86%, transparent) 0%, color-mix(in oklch, var(--paper) 72%, transparent) 34%, color-mix(in oklch, var(--paper) 25%, transparent) 48%, transparent 58%);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-m);
  align-items: center;
  min-block-size: 34rem;
  padding-block: var(--space-m) var(--space-s);
}

.hero-copy { max-inline-size: 34rem; }
.hero h1 { font-size: var(--text-h1); line-height: 0.95; }
.eyebrow { margin-block-end: var(--space-s); }
.photo-hero .eyebrow { color: var(--ink); }

.u { position: relative; display: inline-block; }

.u svg {
  position: absolute;
  inset-inline: -0.05em;
  inset-block-end: -0.16em;
  inline-size: calc(100% + 0.1em);
  block-size: 0.28em;
  transform-origin: 0 50%;
  overflow: visible;
}

.u path { fill: none; stroke: var(--tomato); stroke-width: 5; stroke-linecap: round; }

.like {
  inline-size: fit-content;
  margin-block-start: var(--space-s);
  color: var(--pencil);
  font: 700 var(--text-h3) / 1.2 var(--font-display);
  font-stretch: 85%;
}

.loop { display: inline-grid; color: var(--ink); }
.loop > span { grid-area: 1 / 1; opacity: 0; }
.loop > span:first-child { opacity: 1; }
.hero .lede { margin-block-start: var(--space-s); color: var(--ink); max-inline-size: 34ch; }

.promise {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  margin-block-start: var(--space-s);
  font-size: var(--text-small);
  font-weight: 700;
}

.promise b { font-weight: 700; white-space: nowrap; }
.promise span { color: var(--tomato); }

.pin { position: relative; align-self: end; justify-self: end; inline-size: 100%; min-block-size: 12rem; }

.demo {
  position: absolute;
  z-index: 1;
  inset-inline-end: 0;
  inset-block-end: 0;
  inline-size: 17rem;
  border: var(--rule);
  background: var(--card);
  box-shadow: 6px 6px 0 var(--ink);
}

.demo header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border-block-end: var(--rule);
  background: var(--strip);
  font-size: var(--text-label);
  font-weight: 700;
  line-height: 1.2;
}

.demo header span { color: var(--pencil); font-weight: 400; }
.demo p { padding: 0.6rem 0.7rem; font: 0.95rem / 1.5 var(--font-mono); }

.demo .btn {
  display: grid;
  margin: 0 0.7rem 0.7rem;
  min-block-size: 2.75rem;
  color: var(--on-tomato);
  font-weight: 700;
  line-height: 1;
}

.demo .btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--tomato); }
.demo .btn .ok { background: var(--basil); opacity: 0; }

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.6rem;
  margin: var(--space-m) 0 0;
  padding: 0 0 var(--space-m);
  list-style: none;
}

.tiles li { display: grid; }

.tile {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: start;
  align-content: start;
  gap: 0.5rem;
  min-block-size: 7rem;
  padding-block: 0.8rem;
  padding-inline: 0.8rem 2rem;
  border: var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-wrap: balance;
  touch-action: manipulation;
}

.tile img { inline-size: auto; block-size: 2.75rem; object-fit: contain; }

.tile::after {
  content: "→";
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: 0.75rem;
  color: var(--tomato);
  font-weight: 400;
}

.tile:active { transform: translateY(1px) scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .tile:hover { box-shadow: 4px 4px 0 var(--ink); color: var(--ink); transform: translateY(-3px); }
  .tile:hover img { transform: translateY(-3px) rotate(-4deg); }
}

@container page (width < 64rem) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet: shrink the sample card to header + button so it clears the face, phone and hand */
@container page (40rem <= width < 56rem) {
  .demo { inline-size: 13rem; }
  .demo p { display: none; }
  .demo .btn { margin-block-start: 0.7rem; }
}

@container page (width < 40rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-block-size: 6rem; }
  .tile img { block-size: 2.25rem; }
  .hero { grid-template-columns: 1fr; min-block-size: 0; gap: var(--space-s); padding-block-start: 16rem; }
  .bg { block-size: 17rem; inset-block-end: auto; }
  .bg img { object-position: 72% 28%; }
  .photo-hero::before {
    background: linear-gradient(180deg, transparent 0, transparent 11rem, color-mix(in oklch, var(--paper) 90%, transparent) 14.5rem, var(--paper) 16rem);
  }
  .pin { order: 2; min-block-size: 0; }
  .demo { position: relative; inline-size: 100%; }
  .demo header span { display: none; }
  .demo p { font-size: 0.9rem; }
}

.or { margin-block: var(--space-m) var(--space-s); color: var(--pencil); font-size: var(--text-small); }

main > .block { margin-block-start: var(--space-section); }

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-s);
  margin-block-end: var(--space-m);
  padding-block-end: var(--space-s);
  border-block-end: var(--rule);
}

.sec-head h2 { font-size: var(--text-h2); }
.sec-head a.label { display: inline-flex; align-items: center; min-block-size: var(--tap); text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .sec-head a.label:hover { color: var(--tomato); }
}

.top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-m) calc(var(--space-m) * 2);
  align-items: start;
}

.ranked { margin: 0; padding: 0; list-style: none; counter-reset: r 1; }

.ranked li {
  display: grid;
  grid-template-columns: 2.6ch minmax(0, 1fr);
  column-gap: var(--space-s);
  padding-block: var(--space-s);
  border-block-end: var(--dots);
  counter-increment: r;
}

.ranked li::before {
  content: counter(r, decimal-leading-zero);
  grid-row: 1 / 3;
  color: var(--tomato);
  font: 800 var(--text-h3) / 1 var(--font-display);
  font-stretch: 85%;
}

.ranked a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.ranked .label { grid-column: 2; }

@media (hover: hover) and (pointer: fine) {
  .ranked a:hover { color: var(--tomato); text-decoration: underline; }
}

.chips a::after { content: "→"; margin-inline-start: 0.45rem; font-weight: 400; }

@container page (width < 40rem) {
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .chips li { flex: none; scroll-snap-align: start; }
}

.block .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

/* Newsletter strip and the nudge after a copy: ink band, paper text */
.nudge { background: var(--ink); color: var(--paper); }

.news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-m);
  align-items: center;
  margin-block-start: var(--space-section);
  padding: var(--space-m);
}

.news h2 { font-size: var(--text-h3); }
.news p { margin-block-start: 0.3rem; color: var(--ink); font-size: var(--text-small); }

.news form,
.nudge form { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.news input { border-color: var(--ink) !important; }
.news input,
.nudge input[type="email"] {
  flex: 1 1 12rem;
  min-block-size: var(--tap);
  padding-inline: 0.8rem;
  border: 1.5px solid var(--paper);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-small);
}

.nudge :focus-visible { outline-color: var(--paper); }

.nudge {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
}

.nudge-msg { font-weight: 700; }
.nudge label { flex: 0 0 100%; font-size: var(--text-label); font-weight: 700; }

.nudge-x {
  justify-self: start;
  min-block-size: var(--tap);
  min-inline-size: var(--tap);
  padding-inline: 1rem;
  border: 1.5px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.nudge-x:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .nudge-x:hover { background: var(--paper); color: var(--ink); }
}

.more { display: flex; justify-content: center; margin-block: var(--space-section) 0; }

/* Motion: only when the visitor allows it. The static first state is complete. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
  @keyframes draw { from { transform: scaleX(0); } }
  @keyframes settle { from { transform: scale(1.03); } }
  @keyframes nudge-in { from { opacity: 0; transform: translateY(8px); } }

  /* Hero photo and headline animate only on a repeat visit in the same tab session (.replay, set by
     the home page's head script). On first load they paint at once, which keeps mobile LCP fast. */
  .replay .bg img { animation: settle 1800ms var(--ease-out) both; }
  .tiles li { animation: focus-in 600ms var(--ease-reveal) both; animation-delay: calc(200ms + var(--i) * 40ms); }
  .js .u svg { animation: draw var(--dur-l) var(--ease-out) 500ms both; }
  .js .demo { animation: rise var(--dur-l) var(--ease-out) 600ms both; }
  .nudge { animation: nudge-in var(--dur-m) var(--ease-out) both; }

  .tile,
  .tile img { transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }

  .js .loop > span { transform: translateY(0.3em); transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out); }
  .js .loop > span:first-child { transform: none; }
  .js .loop > span.on { opacity: 1; transform: none; }
  .js .loop > span.off { opacity: 0; transform: translateY(-0.3em); }

  .demo .btn { transition: transform 140ms var(--ease-out); }
  .demo .btn > span { transition: opacity var(--dur-m) var(--ease-out); }
  .demo.press .btn { transform: scale(0.96); }
  .demo.done .ok { opacity: 1; }
}

/* Footer */
.site-footer {
  display: grid;
  gap: var(--space-s);
  margin-block-start: var(--space-section);
  padding-block-start: var(--space-m);
  border-block-start: 3px dotted var(--ink);
}

.signup { max-inline-size: 28rem; }
.small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; font-size: var(--text-small); color: var(--pencil); }
.small a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.textlink,
.empty a,
.narrow p > a { display: inline-flex; align-items: center; min-block-size: var(--tap); }

/* Sponsor bar: closes with a checkbox, so it works without JS. */
.sb-toggle { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.sb-toggle:checked + .sponsor-bar { display: none; }
.sb-toggle:focus-visible + .sponsor-bar .sb-x { outline: 3px solid var(--tomato); outline-offset: 2px; }

.sponsor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-block-size: var(--tap);
  margin-block-end: var(--space-s);
  border-block: var(--rule);
  font-size: var(--text-small);
}

.sponsor-bar .tag {
  margin-inline-end: 0.4rem;
  color: var(--pencil);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sb-x {
  display: inline-flex;
  align-items: center;
  min-inline-size: var(--tap);
  min-block-size: var(--tap);
  justify-content: center;
  color: var(--pencil);
  font-size: var(--text-label);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  touch-action: manipulation;
}

.sb-x:active { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
  .sb-x:hover { color: var(--ink); }
}

/* /start */
.start { display: grid; gap: var(--space-m); max-inline-size: 48rem; }
.start-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-m); }

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--rule);
  background: var(--card);
}

.step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-s);
  align-items: start;
  padding: var(--space-m);
}

.step > img { grid-column: 2; justify-self: start; }

.step + .step { border-block-start: var(--dots); }

.step-num {
  color: var(--tomato);
  font-family: var(--font-display);
  font-stretch: 85%;
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 0.9;
}

.step-text { display: grid; gap: var(--space-s); }
.step-text h2 { font-size: var(--text-h3); }
.step-text ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--space-s); }

.example { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.example code {
  padding-inline: 0.25rem;
  border-block-end: var(--dots);
  font: inherit;
  font-weight: 700;
}

.tips {
  display: grid;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  border-block-start: 3px dotted var(--ink);
}

.tips > div { display: grid; gap: var(--space-s); justify-items: start; }
.tips ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--space-s); }

/* Category intro, entry notes, related and keep browsing */
.category > h1:has(+ .lede) { padding-block-end: var(--space-s); }
.category > .lede { margin: 0; padding-block-end: var(--space-m); }

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-s) var(--space-m);
  padding-block: var(--space-s);
  border-block: var(--dots);
}

.notes > section, .next-steps { display: grid; gap: 0.25rem; align-content: start; }
.notes p, .next-steps p { margin: 0; }
.next-steps { justify-items: start; }

/* Series box ("Medical bill in 3 steps"): Isabella's medical-steps spec. Under the h1 on series pages. */
.series {
  container: series / inline-size;
  margin-block: 0.25rem;
  border: var(--rule);
  background: var(--paper);
}

.series-name {
  margin: 0;
  padding: 0.5rem var(--space-s);
  border-block-end: var(--dots);
}

.series ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.series li + li { border-inline-start: var(--dots); }

.series .step {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  block-size: 100%;
  min-block-size: var(--tap);
  padding: 0.625rem var(--space-s);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.25;
}

.series a.step { text-decoration: none; }
.series a.step .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.series a.step:active { color: var(--tomato); }
.series a.step:focus-visible { outline-offset: -3px; }

@media (hover: hover) and (pointer: fine) {
  .series a.step:hover { background: var(--strip); }
}

/* The number: a big display numeral, like a recipe step. */
.series .n {
  flex: none;
  font: 800 1.875rem / 1 var(--font-display);
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
  color: var(--pencil);
}

/* Current step: highlighter wash, tomato numeral, not a link. */
.series [aria-current="step"] { background: var(--ph); }
.series [aria-current="step"] .n { color: var(--tomato); }
.series .here {
  display: block;
  margin-block-start: 0.125rem;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tomato-deep);
}

/* Narrow card (phones): one step per row. */
@container series (inline-size < 30rem) {
  .series ol { grid-auto-flow: row; }
  .series li + li { border-inline-start: 0; border-block-start: var(--dots); }
  .series .step { padding-block: 0.375rem; }
}

.entry-more { display: grid; gap: var(--space-s); max-inline-size: 48rem; margin-inline: auto; margin-block-start: var(--space-m); }
.entry-more h2 { font-size: var(--text-h3); }

.related { margin: 0; padding: 0; list-style: none; border-block-start: var(--dots); }
.related li + li { border-block-start: var(--dots); }
.related a { display: flex; align-items: center; min-block-size: var(--tap); padding-block: 0.25rem; font-weight: 700; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .related a:hover { color: var(--tomato); text-decoration: underline; }
}

/* Sponsor bar on a phone: smaller type and no room for Hide. The text may wrap to a second line on
   the narrowest screens (320px) instead of being cut off; from about 360px it fits on one line. */
@container page (width < 40rem) {
  .sponsor-bar { gap: 0.25rem; font-size: 0.875rem; }
  .sponsor-bar .tag { margin-inline-end: 0.2rem; font-size: 0.75rem; }
  .sponsor-bar p { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.25em; }
  .sb-x { display: none; }
}

/* ---- Motion pass (anim-preview): content is visible by default; motion only under no-preference ---- */
:root { --ease-reveal: cubic-bezier(.2,.7,.2,1); --sage: light-dark(oklch(86% 0.035 150), oklch(32% 0.03 150)); }

/* 4) Newsletter band: muted sage mesh on paper, ink text */
.news {
  background:
    radial-gradient(60% 90% at 12% 20%, color-mix(in oklch, var(--sage) 85%, transparent), transparent 70%),
    radial-gradient(55% 80% at 88% 85%, color-mix(in oklch, var(--sage) 60%, transparent), transparent 70%),
    radial-gradient(40% 60% at 60% 10%, color-mix(in oklch, var(--paper) 90%, transparent), transparent 70%),
    color-mix(in oklch, var(--paper) 70%, var(--sage));
  background-size: 140% 140%;
  background-position: 0% 0%;
  color: var(--ink);
}

/* 3) Category chips: lift, deeper fill, underline grows in */
.cats a { position: relative; }
.cats a::before {
  content: "";
  position: absolute;
  inset-inline: 0.8rem;
  inset-block-end: 0.3rem;
  block-size: 2px;
  background: var(--tomato);
  transform: scaleX(0);
  transform-origin: left;
}
.cats a:focus-visible { transform: translateY(-2px); background: color-mix(in oklch, var(--card), var(--ink) 9%); }
.cats a:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
  .cats a:hover { transform: translateY(-2px); background: color-mix(in oklch, var(--card), var(--ink) 9%); color: var(--ink); }
  .cats a:hover::before { transform: scaleX(1); }
}

/* 2) Copy halo target */
.copy, .app .app-mark { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* 1) Hero focus reveal: once on load */
  @keyframes focus-in { from { opacity: .001; filter: blur(6px); transform: translateY(6px); } }
  .replay .hero h1 { animation: focus-in 600ms var(--ease-reveal) both; }
  .replay .hero .lede { animation: focus-in 600ms var(--ease-reveal) 120ms both; }

  .cats a { transition: transform 200ms var(--ease-reveal), background-color 200ms var(--ease-reveal); }
  .cats a::before { transition: transform 200ms var(--ease-reveal); }

  @keyframes halo { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.12, 1.35); } }
  .halo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--tomato) 40%, transparent);
    pointer-events: none;
    animation: halo 450ms var(--ease-reveal) both;
  }

  @keyframes pop { from { transform: scale(.92); } }
  .vote.pop { animation: pop 200ms var(--ease-reveal) both; }

  @keyframes drift { to { background-position: 100% 100%; } }
  .news { animation: drift 30s ease-in-out infinite alternate; }
}

/* ---- Polish 1: Copy button text swap (.cs = copy swap) ---- */
.copy .cs {
  display: inline-grid;
  overflow: clip;
  /* room for the sliding label's descenders, no layout change */
  padding-block: 0.15em;
  margin-block: -0.15em;
}
.copy .cs > span {
  grid-area: 1 / 1;
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
}
.copy .cs > .cs-on { opacity: 1; transform: none; }
.copy .cs > .cs-out { opacity: 0; transform: translateY(-100%); }
@media (prefers-reduced-motion: no-preference) {
  .copy .cs > span {
    transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out);
  }
  .copy .cs > .cs-jump { transition: none; }
}

/* ---- Polish 2: type-led footer (.colophon), the back page of a booklet ---- */
.site-footer.colophon {
  gap: var(--space-m);
  margin-block-start: calc(var(--space-section) * 1.5);
  padding-block-start: var(--space-section);
}
.colophon-line {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 85%;
  font-size: clamp(2.75rem, 1.4rem + 6.4vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
  max-inline-size: 14ch;
}
.colophon .small { gap: 0 0.75rem; }
.colophon-c {
  font-size: var(--text-label);
  color: var(--pencil);
}

/* Polish 3: the post-copy nudge spans the whole grid row, so the card keeps its column width */
.grid > .nudge { grid-column: 1 / -1; }
#copy.done { border-color: var(--basil); background: var(--basil); }

/* Guides: long-form pages at /guides. One readable column, ruled like the rest of the site. */
.guide-list { margin: 0; padding: 0; list-style: none; border-block-start: var(--rule); }
.guide-list > li {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-block-end: var(--dots);
}
.guide-list h2 { font-size: var(--text-h3); }
.guide-list h2 a { display: inline-flex; align-items: center; min-block-size: var(--tap); text-decoration: none; }
.guide-list p { max-inline-size: 42rem; }

@media (hover: hover) and (pointer: fine) {
  .guide-list h2 a:hover { color: var(--tomato); text-decoration: underline; }
}

.draft-tag { color: var(--tomato); font-weight: 700; }

.guide-article { display: grid; gap: var(--space-m); max-inline-size: 44rem; margin-inline: auto; }

.guide-head {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-block: var(--rule);
}
.guide-head h1 { font-size: var(--text-h2); line-height: 1.02; }
.guide-head .lede { color: var(--ink); }
.guide-head .label a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: inherit; }

.guide-toc { padding: var(--space-s) var(--space-m); border: var(--rule); background: var(--card); }
.guide-toc ul { margin: 0; padding: 0; list-style: none; }
.guide-toc li + li { border-block-start: var(--dots); }
.guide-toc a { display: inline-flex; align-items: center; min-block-size: var(--tap); }

.guide-body { display: grid; gap: var(--space-m); }
.guide-body > h2 {
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: 3px dotted var(--ink);
  font-size: var(--text-h3);
  scroll-margin-block-start: var(--space-m);
}
.guide-body > h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); }
.guide-body ul,
.guide-body ol { display: grid; gap: var(--space-s); margin: 0; padding-inline-start: 1.5rem; }
.guide-body li::marker { color: var(--tomato); }
.guide-body p > a,
.guide-body li > a { text-decoration-thickness: 2px; text-decoration-color: var(--tomato); }

/* An embedded prompt card sits a little apart from the prose so it reads as "the thing to copy". */
.guide-card { margin-block: var(--space-s); }

.guide-pin img { inline-size: min(100%, 22rem); border: var(--rule); }
.guide-pin a { justify-self: start; }

.in-guides p { color: var(--pencil); }