/* Hallmark · macrostructure: Long Document (recipe card) · tone: warm utilitarian · theme: Adukkala DESIGN.md (Sadya)
 * Public recipe pages (r/<id>.html) built by scripts/make-recipe-pages.mjs. Tokens only, from tokens.css. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-text-size-adjust: 100%;
}
.rp { max-width: 64rem; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-3xl); }
.rp a { color: var(--color-accent); text-underline-offset: 0.2em; }
.rp a:hover { color: var(--color-ink); }
.rp a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.rp__crumb { margin: 0 0 var(--space-md); font-size: var(--text-sm); }

.rp__head { padding-bottom: var(--space-md); border-bottom: 3px double var(--color-gold); margin-bottom: var(--space-lg); }
.rp h1 {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: var(--text-title); line-height: var(--lh-tight);
  margin: 0; text-wrap: balance; overflow-wrap: anywhere; min-width: 0;
}
.rp__alt { margin: var(--space-2xs) 0 0; color: var(--color-muted); text-wrap: pretty; max-width: var(--measure); }
.rp__facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; }
.rp__facts li {
  background: var(--color-fill); border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); white-space: nowrap;
}

.rp__photo { margin: 0 0 var(--space-xl); }
.rp__photo img {
  display: block; width: 100%; max-width: 40rem; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card); background: var(--color-paper-2);
}
.rp__photo figcaption { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }

.rp h2 {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: var(--text-xl); line-height: var(--lh-snug); margin: 0 0 var(--space-sm); text-wrap: balance;
}
.rp__body { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
.rp__main { display: grid; gap: var(--space-xl); min-width: 0; }
.rp__ing h2 + .rp__note { margin-top: calc(-1 * var(--space-2xs)); }
.rp__ing h2:not(:first-child) { margin-top: var(--space-xl); }
.rp__note { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

.rp__qty { list-style: none; margin: 0; padding: 0; }
.rp__qty li {
  display: flex; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule);
}
.rp__amt { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-2); text-align: right; flex-shrink: 0; }

.rp__steps { margin: 0; padding: 0; list-style: none; counter-reset: step; max-width: var(--measure); }
.rp__steps li { counter-increment: step; position: relative; padding-left: 2.5rem; margin-bottom: var(--space-md); text-wrap: pretty; }
.rp__steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent-wash); color: var(--color-ink);
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.rp__steps strong { font-family: var(--font-mono); font-weight: 500; font-size: 0.95em; }
.rp__list { margin: 0; padding-left: 1.25rem; max-width: var(--measure); }
.rp__list li { margin-bottom: var(--space-xs); text-wrap: pretty; }

.rp__group { margin-bottom: var(--space-xl); }
.rp__links { list-style: none; margin: 0; padding: 0; }
.rp__links li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  min-height: var(--touch); border-bottom: 1px solid var(--color-rule);
}
.rp__links a { padding: var(--space-xs) 0; }

.rp__foot { margin-top: var(--space-3xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

@media (min-width: 52rem) {
  .rp { padding-top: var(--space-2xl); }
  .rp__body { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .rp__ing { position: sticky; top: var(--space-lg); }
}
@media print {
  .rp__crumb, .rp__photo figcaption a { color: inherit; }
  .rp__ing { position: static; }
}