:root {
  --d-micro: 0.74rem;
  --d-small: 0.86rem;
  --d-gap: clamp(1.5rem, 4vw, 2.75rem);
}


h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.night h3 { color: var(--night-text); }

.d-micro {
  display: block;
  font-size: var(--d-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.night .d-micro { color: var(--accent-night); }
.d-note { font-size: var(--d-small); line-height: 1.75; color: var(--muted); }
.night .d-note { color: rgba(242, 233, 224, 0.75); }
.d-lede { font-size: var(--t-lg); line-height: 1.85; max-width: 34em; }


.hero { min-height: auto; padding: calc(var(--nav-h) + var(--s-10)) 0 var(--s-8); }
@media (min-width: 900px) {
  .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--d-gap); align-items: center; }
  .hero .eyebrow, .hero h1, .hero-sub, .hero-ctas { grid-column: 1; }
  .hero-media { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: center; }
}


.d-fig { margin: 0; }
.d-fig figcaption,
.d-cap {
  margin-top: var(--s-3);
  font-size: var(--d-small);
  line-height: 1.7;
  color: var(--muted);
  max-width: 46em;
}
.d-fig figcaption b { color: var(--text); font-weight: 700; }
.night .d-fig figcaption { color: rgba(242, 233, 224, 0.75); }
.night .d-fig figcaption b { color: var(--night-text); }

.d-ratio-3x2 { aspect-ratio: 3 / 2; }
.d-ratio-4x3 { aspect-ratio: 4 / 3; }
.d-ratio-4x5 { aspect-ratio: 4 / 5; }
.d-ratio-9x16 { aspect-ratio: 9 / 16; }


.d-ratio-doc { aspect-ratio: 848 / 1200; }
.d-doc img { object-fit: contain; background: var(--bg-3); }

.d-figs { overflow: hidden; border-radius: var(--r); }


.d-bleed { width: 100vw; margin-inline-start: 50%; transform: translateX(-50%); max-width: 100vw; }
.d-band-fig { aspect-ratio: 4 / 3; }
@media (min-width: 720px) { .d-band-fig { aspect-ratio: 21 / 9; } }
.d-band-cap { padding-top: var(--s-3); }


.d-split { display: grid; gap: var(--d-gap); align-items: start; }
@media (min-width: 860px) {
  .d-split { grid-template-columns: 1.05fr 0.95fr; }
  .d-split.is-flipped { grid-template-columns: 0.95fr 1.05fr; }
}


.d-dish { display: grid; gap: var(--d-gap); align-items: center; }
@media (min-width: 780px) { .d-dish { grid-template-columns: 1.1fr 0.9fr; } }
.d-dish .price-big {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  margin: var(--s-3) 0 var(--s-4);
  padding: 0.4rem 0;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.15rem);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.d-dish .price-big small { font-size: var(--d-small); font-weight: 400; color: var(--muted); }


.board { display: grid; gap: var(--s-6); }
@media (min-width: 640px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.board-col > h3 {
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--accent);
}
.board-col .all {
  display: block;
  margin: var(--s-2) 0 var(--s-3);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.board-col ul { list-style: none; margin: 0; padding: 0; }
.board-col li {
  padding: 0.4rem 0;
  font-size: var(--t-base);
  border-bottom: 1px solid var(--line);
}
.board-col li small { display: block; font-size: var(--d-small); color: var(--muted); }


.d-named { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .d-named { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.d-named li {
  list-style: none;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--line);
}
.d-named b { display: block; font-size: var(--t-base); font-weight: 700; }
.d-named span { display: block; margin-top: var(--s-1); font-size: var(--d-small); color: var(--muted); }


.d-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
@media (min-width: 720px) { .d-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.d-fact { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
  .d-fact + .d-fact { padding-inline-start: var(--s-5); border-inline-start: 1px solid var(--line); }
}
.d-fact dt { font-size: var(--d-micro); font-weight: 700; letter-spacing: 0.16em; color: var(--muted); margin-bottom: var(--s-1); }
.d-fact dd { font-size: var(--t-lg); font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.d-fact dd small { display: block; font-size: var(--d-small); font-weight: 400; color: var(--muted); }


.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; }
.steps li {
  counter-increment: st;
  display: grid; grid-template-columns: 2rem 1fr; gap: 0 var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.steps li::before {
  content: counter(st);
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1.6;
  color: var(--accent);
}
.steps b { grid-column: 2; grid-row: 1; font-size: var(--t-base); }
.steps span { grid-column: 2; grid-row: 2; color: var(--muted); font-size: var(--d-small); line-height: 1.7; }


.night { padding-top: clamp(3.2rem, 7vw, 5rem); padding-bottom: clamp(3.2rem, 7vw, 5rem); }
.night .d-fact { border-color: var(--night-line); }
.night .d-facts { border-color: var(--night-line); }
.night .d-fact dt { color: rgba(242, 233, 224, 0.72); }
.night .d-fact dd small { color: rgba(242, 233, 224, 0.72); }
.night .d-sample {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--night-line);
  border-radius: var(--r);
  font-size: var(--d-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-night);
}


.d-ground { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .d-fig img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .d-fig:hover img { transform: scale(1.02); }
}

body { overflow-x: hidden; }
.wrap > * { min-width: 0; }


figcaption .d-note { display: block; margin-top: 0.35rem; }