/* The public recipe pages (src/pages.ts), on top of home.css's tokens, bar, .cta and footer.
   docs/DESIGN.md: plates are round with a faint ink rim, cut-outs sit straight on the paper (never boxed),
   one terracotta action per page. */
.rp .wrap { max-width: 1080px; margin: 0 auto; padding: 28px var(--gutter) 40px; }
.rp h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.rp h1 em { font-style: italic; }
.rp h2 { font-size: clamp(28px, 3.2vw, 36px); }
.rp .section { margin: 56px 0 22px; }
.rp .small { font: 14px/1.5 var(--sans); color: var(--ink-mid); }
.rp .small a { color: var(--ink-soft); }

.crumbs { font: 500 13px var(--sans); color: var(--ink-mid); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.crumbs a { color: var(--ink-mid); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--ink-faint); }
.crumbs [aria-current] { color: var(--ink-soft); }

.masthead { max-width: 40em; margin: 18px 0 34px; }
.eyebrow a { color: inherit; text-decoration: none; }

/* ─── Plates ─── */
.plate { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--paper-deep);
  box-shadow: 0 0 0 1px rgba(35, 30, 26, .14); }
.plate.cutout { border-radius: 0; object-fit: contain; background: none; box-shadow: none; }
.plate.none { display: grid; place-items: center; background: var(--wash-ochre); box-shadow: none;
  font: italic 400 64px var(--serif); color: var(--sepia); }

/* ─── Chips (tag links) ─── */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 5px 13px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--card);
  font-size: 16px; color: var(--ink-soft); text-decoration: none; transition: border-color .3s, color .3s; }
.chips a:hover, .chips a[aria-current] { border-color: var(--sepia); color: var(--ink); }
.browse { display: grid; gap: 18px; margin: 0 0 8px; padding: 22px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.browse-group { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; }
.browse-group .eyebrow { margin: 0; }
@media (max-width: 640px) { .browse-group { grid-template-columns: 1fr; gap: 8px; } }

/* ─── Cards ─── */
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 36px 26px; }
.card { display: grid; gap: 4px; text-decoration: none; color: inherit; text-align: center; }
.card .plate { width: 78%; margin: 0 auto 12px; transition: transform .8s var(--slow); }
.card:hover .plate { transform: rotate(-3deg) scale(1.02); }
.card h3 { font-size: 21px; line-height: 1.2; text-wrap: balance; }
.card p { margin: 0; font: 13px/1.4 var(--sans); color: var(--ink-mid); overflow-wrap: anywhere; }
.card p.by { font: italic 15px/1.3 var(--serif); color: var(--sepia); }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; } .card h3 { font-size: 18px; } }

/* ─── A recipe ─── */
.recipe-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; margin-bottom: 44px; }
.recipe-head .plate.lg { max-width: 440px; justify-self: center; }
.credit { margin: 14px 0 0; font-size: 19px; }
.credit strong { font-weight: 500; color: var(--ink); }
.recipe .dek { font-size: 20px; max-width: 30em; }
.stats { display: flex; flex-wrap: wrap; gap: 0; margin: 26px 0 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stats div { padding: 12px 26px 12px 0; margin-right: 26px; border-right: 1px solid var(--hairline); }
.stats div:last-child { border-right: 0; margin-right: 0; }
.stats dt { font: 600 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sepia); }
.stats dd { margin: 2px 0 0; font-size: 22px; color: var(--ink); }
@media (max-width: 480px) { .stats div { padding-right: 14px; margin-right: 14px; } }
@media (max-width: 800px) {
  .recipe-head { grid-template-columns: 1fr; gap: 26px; }
  .recipe-head .plate.lg { order: -1; max-width: 300px; }
}

.ingredients { max-width: 720px; }
.ingredients .aside { margin: 6px 0 0; font-size: 17px; }
.sub { font-size: 20px; font-style: italic; color: var(--sepia); margin: 26px 0 0; }
.ing { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 4px 28px; }
.ing li { border-bottom: 1px solid var(--hairline); }
.ing label { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 0; cursor: pointer; }
/* Ticked off: the box itself stays out of sight (the line is the target), the line greys out. */
.ing input { position: absolute; opacity: 0; pointer-events: none; }
.ing input:focus-visible + * { outline: 2px solid var(--sepia); outline-offset: 2px; }
.ing input:checked ~ .line { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.ing input:checked ~ img { opacity: .4; }
.ing img, .ing .wash { flex: none; width: 56px; height: 56px; object-fit: contain; }
.ing .wash { display: grid; place-items: center; border-radius: 50%; background: var(--wash-sage); font: italic 22px var(--serif); color: var(--sepia); }
.ing .line { line-height: 1.35; color: var(--ink); }
.ing b { font-weight: 500; }
.ing i { color: var(--ink-mid); }

.tags { margin-top: 34px; }

.app-block { text-align: center; margin: 80px auto 0; max-width: 34em; }
.app-block img { width: 200px; height: auto; margin: 0 auto 8px; }
.app-block .dek { margin-bottom: 26px; }

/* ─── Search ─── */
.search { display: flex; gap: 8px; margin: 26px 0 0; max-width: 34em; }
.search input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--card);
  font: 18px var(--serif); color: var(--ink); }
.search input:focus { outline: none; border-color: var(--sepia); }
.search button { height: 46px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: none; font: 500 15px var(--sans); color: var(--ink); cursor: pointer; }
.search button:hover { background: var(--ink); color: var(--paper); }
.found { margin: -10px 0 30px; }
.empty { font-style: italic; color: var(--sepia); font-size: 20px; }

/* ─── Shelves (index) ─── */
.shelf { margin-top: 52px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.shelf-head h2 a { text-decoration: none; color: inherit; }
.shelf-head .more { flex: none; font: 500 14px var(--sans); color: var(--ink-soft); text-decoration: none; }
.shelf-head .more:hover { color: var(--ink); }
.grid.row { grid-template-columns: repeat(6, 1fr); gap: 26px 18px; }
.grid.row .card h3 { font-size: 19px; }
@media (max-width: 900px) {
  /* A sideways row on narrow screens, bleeding to the edges. */
  .grid.row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px;
    scrollbar-width: none; }
  .grid.row::-webkit-scrollbar { display: none; }
  .grid.row li { flex: 0 0 40%; scroll-snap-align: start; }
}
@media (max-width: 480px) { .grid.row li { flex-basis: 44%; } }

/* ─── A to Z ─── */
.az-cols { columns: 4 200px; column-gap: 32px; }
.az-letter { break-inside: avoid; margin-bottom: 22px; }
.az-letter .eyebrow { margin-bottom: 6px; }
.az ul { list-style: none; padding: 0; margin: 0; }
.az li { margin: 0; line-height: 1.35; padding: 3px 0; font-size: 17px; }
.az a { text-decoration: none; color: var(--ink-soft); }
.az a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sepia); }

/* ─── Tag page filters ─── */
.tools { display: grid; gap: 14px; margin: -8px 0 32px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .sort button { padding: 5px 13px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--card);
  font: 16px var(--serif); color: var(--ink-soft); cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.chip:hover, .sort button:hover { border-color: var(--sepia); color: var(--ink); }
.chip[aria-pressed="true"], .sort button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sort { display: flex; align-items: center; gap: 8px; }
.sort .eyebrow { margin: 0 4px 0 0; }
.count { margin: 0; font: 13px var(--sans); color: var(--ink-mid); }
.grid li[hidden] { display: none; }

/* ─── Cooking: ingredients beside the method on a wide screen ─── */
.actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; font: 500 14px var(--sans); }
.actions a, .actions button { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-soft); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; }
.actions a:hover, .actions button:hover { color: var(--ink); text-decoration-color: var(--sepia); }
.actions [aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--sepia); }
.actions [aria-pressed="true"]::before { content: "● "; color: var(--sepia); font-size: 10px; vertical-align: 2px; }

.cook { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.sec-head .aside { margin: 0; font-size: 17px; }
@media (min-width: 1000px) {
  .cook { grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; }
  .cook .ingredients { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
  .cook .ing { grid-template-columns: 1fr; }
}

.servings { display: flex; align-items: center; gap: 4px; }
.servings .eyebrow { margin: 0 8px 0 0; }
.servings button { width: 34px; height: 34px; border: 1px solid var(--hairline); border-radius: 50%; background: var(--card);
  font: 20px/1 var(--serif); color: var(--ink); cursor: pointer; }
.servings button:hover { border-color: var(--sepia); }
.servings button:disabled { opacity: .35; cursor: default; }
.servings output { min-width: 2.2ch; text-align: center; font-size: 22px; color: var(--ink); }
.ing b.scaled { color: var(--sepia-deep); }

.cook-steps { list-style: none; padding: 0; margin: 18px 0 0; counter-reset: none; }
.cook-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--hairline); cursor: pointer;
  scroll-margin-top: 84px; transition: opacity .3s; }
.cook-steps li:first-child { padding-top: 6px; }
.cook-steps .n { font: italic 34px/1 var(--serif); color: var(--sepia); padding-top: 2px; }
.cook-steps p { margin: 0; font-size: 20px; line-height: 1.6; color: var(--ink); }
.cook-steps li.done { opacity: .42; }
.cook-steps li.done .n { text-decoration: line-through; }
.cook-steps li:target { background: linear-gradient(90deg, var(--wash-ochre), transparent); }
/* Durations, like the app's timer chips: a hairline Garamond pill, never terracotta. */
.dur { white-space: nowrap; padding: 0 7px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--card); }
.source { margin: 18px 0 0; }
.source strong { font-weight: 500; }

.in-app { display: grid; grid-template-columns: 160px 1fr; gap: 30px; align-items: center; max-width: 820px;
  margin: 64px 0 0; padding: 30px; background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; }
.in-app img { width: 160px; height: auto; }
.in-app h2 { font-size: 30px; }
.in-app p { margin: 10px 0 0; }
.in-app .cta { margin-top: 18px; }
.in-app .small { margin-top: 14px; }
@media (max-width: 640px) {
  .in-app { grid-template-columns: 1fr; padding: 24px 18px; text-align: center; } .in-app img { margin: 0 auto; width: 120px; }
  .cook-steps li { grid-template-columns: 30px 1fr; gap: 10px; }
  .cook-steps .n { font-size: 28px; }
  .cook-steps p { font-size: 19px; }
}

/* ─── Print: the recipe on one sheet ─── */
@media print {
  .bar, .crumbs, .actions, .in-app, .tags, .section, .grid, .foot, .servings, .ing img, .ing .wash { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .rp .wrap { padding: 0; max-width: none; }
  .recipe-head { grid-template-columns: 1fr 160px; gap: 24px; margin-bottom: 18px; }
  .recipe-head .plate.lg { order: 0; max-width: 160px; }
  .rp h1 { font-size: 28pt; }
  .cook { grid-template-columns: 34% 1fr; gap: 28px; }
  .cook .ingredients { position: static; max-height: none; overflow: visible; }
  .ing label { min-height: 0; padding: 2px 0; }
  .cook-steps li { padding: 8px 0; break-inside: avoid; }
  .cook-steps p { font-size: 12pt; }
  .dur { border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
}