/* tapas.cooking, the one stylesheet every page of the site loads first: the home page, the blog,
   the recipe book, the tools, the legal pages and the 404. It holds the tokens, the base type, the
   shared header and footer (src/site/chrome.ts writes their markup) and the few components more
   than one section uses. A section's own stylesheet (blog.css, book.css, tools.css, the home
   page's bundled site.css) only lays out what is unique to it and never redefines a token.

   Light, always (Devan, 2026-11-04). The grounds, ink and accent are the web app's light tokens
   (src/styles/tokens.css), so the site and /app read as one product. Every pair below was checked
   for WCAG AA there. Reasons for the rest are in docs/DECISIONS.md, "The site's design system".

   One family, the system sans (SF on Apple devices, the iOS app's own), on the small scale under
   "type" below: Devan, 2026-11-05, "the mix of fonts unprofessional and inconsistent". Every page
   was then measured beside its reference (NYT Cooking, Things) with scripts/design/compare.mjs,
   and the counts here are held to theirs: seven sizes, four weights, white ground, cards edged
   with a hairline, no decorative shadows on the inner pages. A new size, radius or shadow needs a
   reason the existing ones cannot serve (.claude/skills/site-design/SKILL.md). */

:root {
  color-scheme: light;

  /* grounds */
  /* White, as every reference is (NYT Cooking, Bon Appetit, King Arthur, Things): the warm paper
     it replaced read washed out beside them and took the contrast out of the photos. */
  --bg: #FFFFFF;            /* the page */
  --bg-raised: #F7F5F4;     /* an alternate band, table stripes */
  --surface: #FFFFFF;       /* cards, panels, tool widgets */
  --surface-sunk: #F2EFEE;  /* chips, input fills, the footer */

  /* ink */
  --ink: #1A1416;           /* 16:1 on paper */
  --ink-2: #5E5458;         /* 7.2:1 on white */
  --ink-3: #6E6367;         /* 5.9:1, the floor for text */
  --line: #E6E2E1;          /* rules between rows */
  --line-strong: #D3CECD;   /* the edge of a card, an input, a panel */

  /* brand: one accent, for action and the current state only */
  --accent: #B03149;        /* white on it 6.2:1 */
  --accent-hover: #A02B42;
  --accent-press: #8E253A;
  --on-accent: #FFFFFF;
  --accent-wash: #F6DFE3;
  --accent-wash-2: #FBEFF1;
  --brand-ramp: linear-gradient(135deg, #C94E68, #A3283F 55%, #7A2338); /* the icon and one glow, never a button */
  --marker: #C2892B;        /* "new" only */
  --live: #2E9E5C;          /* the shared list's live dot only */

  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The whole scale: size/line-height pairs, used as `font: <weight> var(--type-md)`. Weights are
     400 (reading), 500 (interface), 600 (titles, buttons) and 700 (page and section headings). */
  --type-xs: 0.75rem/1.4 var(--sans);      /* 12: labels, captions, fine print */
  --type-sm: 0.875rem/1.45 var(--sans);    /* 14: meta, navigation, buttons, chips */
  --type-md: 1rem/1.5 var(--sans);         /* 16: interface body, card text */
  --type-lg: 1.125rem/1.6 var(--sans);     /* 18: reading, ingredients, steps, a dek */
  --type-xl: 1.375rem/1.25 var(--sans);    /* 22: card and sub-section titles */
  --type-2xl: 1.75rem/1.2 var(--sans);     /* 28: section headings */
  --type-3xl: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem)/1.1 var(--sans); /* 36 to 44: page titles */
  --type-hero: clamp(2.5rem, 1.4rem + 3.6vw, 4rem)/1.04 var(--sans);   /* 40 to 64: the home page's one headline */

  /* space, radius, shadow, width */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section-y: clamp(72px, 4rem + 4vw, 128px);
  /* Three radii: 4px for anything rectangular (a photo, a card, an input, a table), 16px for the
     home page's panels, a pill for buttons and chips. A screenshot keeps its device's own corner. */
  --r-sm: 4px; --r-lg: 16px; --r-pill: 999px;
  --r-chip: var(--r-pill); --r-input: var(--r-sm); --r-img: var(--r-sm); --r-card: var(--r-sm); --r-panel: var(--r-lg);
  /* A card's edge is a hairline, not a shadow (NYT Cooking's: 1px #ccc, 4px). */
  --edge: 0 0 0 1px var(--line-strong);
  --shadow-card: var(--edge);
  --shadow-shot: 0 0 0 1px rgba(26, 20, 22, 0.08), 0 2px 6px rgba(80, 20, 35, 0.06), 0 30px 60px -20px rgba(80, 20, 35, 0.28);
  --focus: 0 0 0 3px rgba(176, 49, 73, 0.28);
  --container: 1200px;
  --gutter: 16px;
  --prose: 62ch;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--type-md);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
p, li { text-wrap: pretty; }
p { margin: 0; }
::selection { background: var(--accent-wash); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.tc-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: var(--r-pill); }
.tc-skip:focus { left: 8px; }
.tc-wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.tc-num { font-variant-numeric: tabular-nums; }
.tc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons */
.tc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font: 600 var(--type-md); white-space: nowrap;
  border: 0; cursor: pointer; transition: background-color 140ms ease;
}
.tc-btn:hover { background: var(--accent-hover); }
.tc-btn:active { background: var(--accent-press); }
.tc-btn-sm { min-height: 36px; padding: 0 16px; font: 600 var(--type-sm); }
.tc-btn-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.tc-btn-quiet:hover { background: var(--bg-raised); }
.tc-badge { display: inline-block; line-height: 0; }
.tc-badge img { height: 48px; width: auto; }
.tc-badge-40 img { height: 40px; }

/* header: the same bar, the same 1200 container, on every page */
.tc-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: box-shadow 160ms ease;
}
.tc-head-in {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "brand tabs actions"; column-gap: 28px;
  /* The tabs sit at the right with the actions, not centred (Devan, 2026-11-05: "looks weird floating in the middle"). */
  align-items: center; height: 64px;
}
.tc-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
.tc-brand img { width: 28px; height: 28px; } /* mark.svg carries its own corner */
.tc-brand span { font: 700 var(--type-lg); letter-spacing: -0.02em; }
.tc-tabs { grid-area: tabs; display: flex; gap: 28px; padding-right: 28px; border-right: 1px solid var(--line); }
.tc-tabs a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font: 500 var(--type-sm); color: var(--ink-2); text-decoration: none;
}
.tc-tabs a:hover { color: var(--ink); }
.tc-tabs a[aria-current="page"] { color: var(--ink); }
.tc-tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--accent);
}
.tc-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 20px; }
.tc-actions .tc-link { font: 500 var(--type-sm); color: var(--ink-2); text-decoration: none; }
.tc-actions .tc-link:hover { color: var(--ink); }
@media (max-width: 760px) {
  .tc-head-in { grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "tabs tabs"; height: auto; }
  .tc-brand, .tc-actions { height: 52px; }
  .tc-actions .tc-link { display: none; }
  .tc-actions .tc-btn-sm { min-height: 34px; padding: 0 14px; }
  .tc-tabs { justify-content: space-between; gap: 0; padding-right: 0; border-right: 0; border-top: 1px solid var(--line); }
  /* On a phone the tab row is always its own band, so it keeps its bottom line before any scroll. */
  /* a 40px band, with each tab's hit area reaching 44px through its ::before */
  .tc-tabs a { flex: 1; justify-content: center; min-height: 40px; }
  .tc-tabs a::before { content: ""; position: absolute; inset: -2px 0; }
  .tc-tabs a[aria-current="page"]::after { left: 30%; right: 30%; bottom: 0; }
}

/* footer */
.tc-foot { margin-top: var(--section-y); background: var(--surface-sunk); border-top: 1px solid var(--line); padding: var(--s9) 0 var(--s7); }
.tc-foot-grid { display: grid; grid-template-columns: minmax(0, 320px) repeat(4, minmax(0, 1fr)); gap: var(--s7); }
.tc-foot-brand p { margin: 14px 0 20px; color: var(--ink-2); font: 400 var(--type-sm); max-width: 30ch; }
.tc-foot h2 { font: 600 var(--type-sm); color: var(--ink); margin-bottom: 14px; }
.tc-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tc-foot ul a { color: var(--ink-2); text-decoration: none; font: 400 var(--type-sm); }
.tc-foot ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tc-foot-base { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-3); font: 400 var(--type-xs); }
@media (max-width: 900px) {
  .tc-foot { padding-top: var(--s8); }
  .tc-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
  .tc-foot-brand { grid-column: 1 / -1; }
}

/* shared components */
.tc-crumbs { font: 500 var(--type-sm); color: var(--ink-3); }
.tc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ink-3); opacity: 0.6; }
.tc-crumbs a { color: var(--ink-2); text-decoration: none; }
.tc-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tc-chip {
  white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-chip);
  background: var(--surface); color: var(--ink); font: 500 var(--type-sm); text-decoration: none;
  border: 1px solid var(--line-strong);
}
.tc-chip:hover { border-color: var(--ink-3); }
.tc-chip[aria-current="page"], .tc-chip.is-on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.tc-card { background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--line-strong); }
.tc-shot { border-radius: 14%/6.4%; box-shadow: var(--shadow-shot); background: var(--surface); }

/* the closing app card, used at the end of articles, recipes and tools */
.tc-appcard {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 24px 28px; border-radius: var(--r-card); background: var(--bg-raised);
  border: 1px solid var(--line);
}
.tc-appcard img.tc-appicon { width: 56px; height: 56px; } /* mark.svg carries its own corner */
.tc-appcard h2 { font: 600 var(--type-xl); letter-spacing: -0.01em; }
.tc-appcard p { color: var(--ink-2); margin-top: 4px; font: 400 var(--type-md); }
@media (max-width: 600px) {
  .tc-appcard { grid-template-columns: auto 1fr; padding: 20px; }
  .tc-appcard .tc-badge { grid-column: 1 / -1; }
}

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

/* inner pages: what the blog, the recipe book, the tools and the hand-written pages share. Each
   section's own stylesheet lays out only what is unique to it. */
.tc-main { display: block; padding-top: var(--s7); }
.tc-pagehead { max-width: 760px; margin-bottom: var(--s7); }
.tc-pagehead .tc-crumbs { margin-bottom: var(--s5); }
.tc-pagehead h1, .tc-h1 { font: 700 var(--type-3xl); letter-spacing: -0.02em; }
.tc-dek { margin-top: var(--s4); font: 400 var(--type-lg); color: var(--ink-2); max-width: 36em; }
.tc-meta { font: 500 var(--type-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); }
.tc-section-title { font: 700 var(--type-2xl); letter-spacing: -0.015em; }
.tc-more { font: 600 var(--type-sm); color: var(--accent); text-decoration: none; }
.tc-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* reading: articles, tool explainers, the legal pages */
.tc-prose { font: 400 var(--type-lg); color: var(--ink); max-width: var(--prose); }
.tc-prose > * + * { margin-top: 1.2em; }
.tc-prose h2 { font: 700 var(--type-2xl); letter-spacing: -0.015em; margin-top: 56px; }
.tc-prose h3 { font: 600 var(--type-xl); letter-spacing: -0.01em; margin-top: 36px; }
.tc-prose h2 + *, .tc-prose h3 + * { margin-top: 0.55em; }
.tc-prose a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(176, 49, 73, 0.4); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tc-prose a:hover { text-decoration-color: currentColor; }
.tc-prose ul, .tc-prose ol { padding-left: 1.3em; }
.tc-prose li + li { margin-top: 0.45em; }
.tc-prose li::marker { color: var(--ink-3); }
.tc-prose strong, .tc-prose b { font-weight: 600; }
.tc-prose blockquote { margin-inline: 0; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--ink-2); }
.tc-prose code { font: 0.82em/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-sunk); padding: 2px 6px; border-radius: 6px; }
.tc-prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 48px; }
.tc-prose img { border-radius: var(--r-img); }
.tc-prose details summary { cursor: pointer; font: 600 var(--type-md); color: var(--accent); }
.tc-prose .tc-btn { color: var(--on-accent); text-decoration: none; }
/* A table scrolls inside its own frame at phone width rather than pushing the page sideways. */
.tc-table, .tc-prose .scroll {
  overflow-x: auto; background: var(--surface); border-radius: var(--r-img);
  border: 1px solid var(--line-strong); -webkit-overflow-scrolling: touch;
}
.tc-table table, .tc-prose table { width: 100%; border-collapse: collapse; font: 400 var(--type-sm); font-variant-numeric: tabular-nums; }
.tc-table th, .tc-table td, .tc-prose th, .tc-prose td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tc-table tr:last-child > *, .tc-prose tr:last-child > * { border-bottom: 0; }
.tc-table thead th, .tc-prose thead th, .tc-prose table tr:first-child > th { font-weight: 600; color: var(--ink); background: var(--bg-raised); border-bottom-color: var(--line-strong); white-space: nowrap; }
.tc-table tbody tr:nth-child(even), .tc-prose tbody tr:nth-child(even) { background: var(--bg-raised); }
.tc-prose td { color: var(--ink); }
.tc-prose .panel, .tc-panel { background: var(--surface); border-radius: var(--r-card); padding: 24px 28px; border: 1px solid var(--line-strong); }
.tc-prose .panel > * + * { margin-top: 0.8em; }
@media (max-width: 600px) {
  .tc-prose .panel, .tc-panel { padding: 20px; }
  .tc-table th, .tc-table td, .tc-prose th, .tc-prose td { padding: 10px 12px; }
}

/* a document with a rail of its siblings (the legal pages): rail left at desktop, a row of chips
   above the title on a phone */
.tc-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.tc-doc-rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1100px) {
  .tc-doc { grid-template-columns: 200px minmax(0, var(--prose)); gap: 96px; }
  .tc-doc-rail { position: sticky; top: 104px; align-self: start; padding-top: 6px; }
  .tc-doc-rail ul { display: grid; gap: 2px; }
  .tc-doc-rail a { display: block; min-height: 0; background: transparent; padding: 8px 12px; margin-left: -12px; border-radius: var(--r-sm); font: 500 var(--type-sm); color: var(--ink-2); text-decoration: none; }
  .tc-doc-rail a:hover { color: var(--ink); background: var(--surface-sunk); }
  .tc-doc-rail a[aria-current="page"] { color: var(--accent); background: var(--accent-wash-2); }
}
@media (max-width: 1099px) {
  .tc-doc-rail { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .tc-doc-rail ul { flex-wrap: nowrap; }
  .tc-doc-rail a { white-space: nowrap; }
}
.tc-docbody > h1 { font: 700 var(--type-3xl); letter-spacing: -0.02em; }
.tc-docbody > h1 + .tc-meta { margin-top: 12px; }
.tc-docbody > .tc-meta + * { margin-top: 32px; }

/* the 404 */
.tc-404 .tc-wrap { max-width: calc(760px + 2 * var(--gutter)); }
.tc-404-code { font: 700 var(--type-sm); letter-spacing: 0.02em; color: var(--accent); margin-bottom: var(--s4); }
.tc-404 h1 { font: 700 var(--type-3xl); letter-spacing: -0.02em; }
.tc-404-links { list-style: none; margin: var(--s7) 0 0; padding: 0; border-top: 1px solid var(--line); }
.tc-404-links a { display: flex; flex-direction: column; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.tc-404-links b { font: 600 var(--type-lg); }
.tc-404-links span { color: var(--ink-2); font: 400 var(--type-sm); }
.tc-404-links a:hover b { color: var(--accent); }
.tc-404-app { margin-top: var(--s6); }