/* Denise Home Guide: shared styles (prototype, DMF-2, 2026-11-06)
   Fonts: Young Serif (headings), Atkinson Hyperlegible (body). Phone first. */

:root {
  /* Palette from the spec */
  --paper: #FBF7EF;        /* warm cream page */
  --paper-deep: #F3ECDF;   /* bands and sunken areas */
  --card: #FFFDF9;         /* raised surfaces */
  --ink: #1F3A2C;          /* deep green ink */
  --ink-soft: #4A5D51;     /* secondary text, 6.4:1 on paper */
  --sage: #5E8C6A;         /* lines, icons, tags */
  --sage-text: #3E6A4A;    /* sage that passes as text */
  --sage-tint: #E8F0E6;
  --butter: #F2D98B;       /* highlights */
  --butter-tint: #FBF2D5;
  --terracotta: #B5563B;   /* the main action, 4.9:1 with white text */
  --terracotta-dark: #93432E;
  --clay: #F7E4DA;         /* safety boxes */
  --clay-line: #D49A82;
  --clay-ink: #873A24;
  --glass: #E3EDEA;        /* cabinet items */
  --glass-line: #7FA49B;
  --glass-ink: #2F5C54;
  --line: #E3DACA;
  --line-strong: #CFC3AD;

  /* Type */
  --font-head: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --fs-label: 16px;        /* labels, tags, table heads, fine print: the smallest size anywhere */
  --fs-text: 18px;         /* anything a reader reads: blurbs, trust lines, bylines, buttons */
  --fs-body: 18px;
  --fs-lead: 20px;
  --fs-h3: 21px;
  --fs-h2: 28px;
  --fs-h1: 36px;
  --lh-body: 1.65;

  /* Space (generous on purpose) */
  --gutter: 20px;
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 88px;

  --radius-photo: 22px;
  --radius-box: 16px;
  --radius-pill: 999px;
  --tap: 48px;
  --col: 720px;
  --rail: 300px;
  --sticky-ad-h: 74px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --fs-lead: 21px;
    --fs-h3: 22px;
    --fs-h2: 34px;
    --fs-h1: 50px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}
body.has-sticky-ad { padding-bottom: var(--sticky-ad-h); }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sage-text); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: var(--ink); } }
h1, h2 { font-family: var(--font-head); font-weight: 400; letter-spacing: -0.005em; margin: 0; color: var(--ink); }
h1 { font-size: var(--fs-h1); line-height: 1.12; }
h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3 { font-family: var(--font-body); font-size: var(--fs-h3); line-height: 1.35; font-weight: 700; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip-link:focus { top: 12px; color: var(--paper); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-top: var(--s4); padding-bottom: var(--s7); }
.page-grid { display: block; }
.page-main { min-width: 0; max-width: var(--col); }
.page-rail { display: none; }
@media (min-width: 1100px) {
  .page-grid { display: grid; grid-template-columns: minmax(0, var(--col)) var(--rail); gap: 72px; justify-content: center; }
  .page-rail { display: block; }
}
.stack > * + * { margin-top: var(--s6); }
.block { margin-top: var(--s6); }
.block-tight { margin-top: var(--s4); }

/* ---------- Header ---------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 76px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-height: var(--tap); }
.logo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--butter); }
.logo span { display: flex; flex-direction: column; line-height: 1.05; }
.logo small { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; color: var(--sage-text); letter-spacing: 0.01em; }
.logo b { font-family: var(--font-head); font-weight: 400; font-size: 22px; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.header-nav { display: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--tap); min-height: var(--tap); padding: 0 12px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink);
  font: 700 18px/1 var(--font-body); text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .icon-btn:hover { background: var(--paper-deep); color: var(--ink); } }
.icon-btn svg { width: 24px; height: 24px; flex: none; }
.icon-btn.menu-btn { border: 1.5px solid var(--line-strong); padding: 0 16px 0 14px; }
@media (min-width: 1024px) {
  .header-nav { display: flex; gap: 4px; margin-right: var(--s3); }
  .header-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-text); }
  .header-nav a:hover { background: var(--paper-deep); }
  .header-nav a[aria-current="page"] { background: var(--sage-tint); }
}

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: var(--fs-label); color: var(--ink-soft); margin-bottom: var(--s3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.crumbs a { color: var(--ink-soft); }

/* ---------- Buttons, chips, fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 28px; border-radius: var(--radius-pill);
  background: var(--terracotta); color: #fff; border: 0;
  font: 700 19px/1.2 var(--font-body); text-decoration: none; cursor: pointer; text-align: center;
}
@media (hover: hover) { .btn:hover { background: var(--terracotta-dark); color: #fff; } }
.btn-quiet { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
@media (hover: hover) { .btn-quiet:hover { background: var(--ink); color: var(--paper); } }
.btn-block { width: 100%; }
.btn svg { width: 22px; height: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--sage); background: var(--card);
  color: var(--sage-text); font-weight: 700; font-size: var(--fs-text); text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { .chip:hover { background: var(--sage-tint); color: var(--ink); } }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-cabinet { border-color: var(--glass-line); color: var(--glass-ink); }
@media (hover: hover) { .chip-cabinet:hover { background: var(--glass); } }
@media (hover: hover) { .chip-plain, .chip-plain:hover { background: none; color: var(--glass-ink); cursor: default; } }
.chip-buy { border-color: #C9A24A; color: #74540F; }
@media (hover: hover) { .chip-buy:hover { background: var(--butter-tint); } }

.field-label { display: block; font-weight: 700; margin-bottom: 8px; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field svg { position: absolute; left: 20px; width: 24px; height: 24px; color: var(--ink-soft); pointer-events: none; }
.search-field input {
  width: 100%; min-height: 60px; padding: 0 116px 0 56px;
  border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--card);
  font: 400 19px/1.2 var(--font-body); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.search-field input::placeholder { color: #5F6B63; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field button {
  position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 20px;
  border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper);
  font: 700 18px/1 var(--font-body); cursor: pointer;
}
@media (hover: hover) { .search-field button:hover { background: var(--sage-text); } }

.email-form { display: grid; gap: 12px; }
.email-form input {
  width: 100%; min-height: 58px; padding: 0 22px; border-radius: var(--radius-pill);
  border: 2px solid var(--line-strong); background: #fff; font: 400 19px/1.2 var(--font-body); color: var(--ink);
}
.email-form input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--butter); }
.fine-print { font-size: var(--fs-label); line-height: 1.5; color: var(--ink-soft); margin-top: 12px; }
@media (min-width: 640px) {
  .email-form.inline { grid-template-columns: 1fr auto; }
}
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: #FBE9E4; color: #8A2A12; font-size: var(--fs-text); line-height: 1.45; }
.form-error[hidden] { display: none; }
.email-form input[aria-invalid="true"] { border-color: #B23A1B; }
.email-form button[disabled] { opacity: .7; cursor: progress; }
.signup-done { display: none; }
.is-done .signup-form-part { display: none; }
.is-done .signup-done { display: block; }
.signup-done h3 { font-family: var(--font-head); font-weight: 400; font-size: 30px; margin-bottom: 6px; }

/* ---------- Photos ---------- */
.photo { position: relative; overflow: hidden; border-radius: var(--radius-photo); background: var(--paper-deep); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .illus {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: rgba(251, 247, 239, 0.92); color: var(--ink); font-size: var(--fs-label); font-weight: 700; line-height: 1.4;
}
.ratio-hero { aspect-ratio: 4 / 3; }
.ratio-wide { aspect-ratio: 16 / 9; }
.ratio-card { aspect-ratio: 4 / 5; }
.ratio-square { aspect-ratio: 1 / 1; }
.photo-todo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 2px dashed var(--line-strong); background: repeating-linear-gradient(45deg, var(--paper-deep) 0 14px, var(--paper) 14px 28px);
  color: var(--ink-soft); font-size: var(--fs-text); padding: var(--s4);
}
.photo-todo b { color: var(--ink); font-size: var(--fs-text); }
figcaption { font-size: var(--fs-text); color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }

/* ---------- Cards and rows ---------- */
.card-link { display: block; text-decoration: none; color: var(--ink); }
@media (hover: hover) { .card-link:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }
.card-link .photo { margin-bottom: 14px; }
.card-meta { font-size: var(--fs-label); color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--radius-pill);
  font-size: var(--fs-label); font-weight: 700; line-height: 1.5; background: var(--sage-tint); color: var(--sage-text);
}
.tag-list { background: #ECE7DB; color: var(--ink); }
.tag-cabinet { background: var(--glass); color: var(--glass-ink); }
.tag-buy { background: var(--butter-tint); color: #6E500E; }
.tag-soon { background: transparent; color: var(--ink-soft); border: 1.5px dashed var(--line-strong); }

.row-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.row {
  display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 16px 18px 16px 20px;
  background: var(--card); border: 1.5px solid var(--line); border-left: 6px solid var(--sage); border-radius: 14px;
  text-decoration: none; color: var(--ink);
}
@media (hover: hover) { .row:hover { border-color: var(--line-strong); border-left-color: var(--ink); } }
.row-body { flex: 1; min-width: 0; }
.row-title { display: block; font-weight: 700; font-size: 19px; line-height: 1.35; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; font-size: var(--fs-label); color: var(--ink-soft); }
.row-go { flex: none; width: 24px; height: 24px; color: var(--sage); }
.row.t-list { border-left-color: var(--ink); }
.row.t-cabinet { border-left-color: var(--glass-line); background: #F6FAF8; }
.row.t-buy { border-left-color: #D9B455; background: #FFFBEF; }
.row.t-page { border-left-color: var(--terracotta); }

/* Swipe rows */
.swipe { position: relative; }
.swipe-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px;
  list-style: none; scrollbar-width: none; overscroll-behavior-x: contain;
}
.swipe-track::-webkit-scrollbar { display: none; }
.swipe-track > * { scroll-snap-align: start; }
.swipe-small .swipe-track { grid-auto-columns: 42%; }
.swipe-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.swipe-btns { display: none; gap: 8px; }
.swipe-btns button {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.swipe-btns button:disabled { opacity: 0.35; cursor: default; }
.swipe-btns svg { width: 22px; height: 22px; }
@media (min-width: 768px) {
  .swipe-track { grid-auto-columns: calc((100% - 32px) / 3); margin: 0; padding: 4px 0 12px; scroll-padding-inline: 0; }
  .swipe-small .swipe-track { grid-auto-columns: calc((100% - 64px) / 5); }
  .swipe-btns { display: flex; }
}

/* ---------- Content boxes (used by tip, cabinet, list, buy and recipe pages) ---------- */
.box { border-radius: var(--radius-box); padding: var(--s4); }
.box h2 { font-size: 26px; margin-bottom: var(--s3); }
@media (min-width: 768px) { .box { padding: var(--s5) var(--s5); } .box h2 { font-size: 30px; } }

.answer-box { background: var(--butter-tint); border: 2px solid var(--butter); box-shadow: inset 0 6px 0 var(--butter); padding-top: calc(var(--s4) + 6px); }
.answer-lead { font-size: var(--fs-lead); line-height: 1.55; margin-bottom: var(--s4); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 var(--s4); border-top: 1.5px solid #E6CF86; }
.facts div { padding: 14px 12px 14px 0; border-bottom: 1.5px solid #E6CF86; }
.facts div:nth-child(odd) { border-right: 1.5px solid #E6CF86; }
.facts div:nth-child(even) { padding-left: 16px; }
.facts dt { font-size: var(--fs-label); color: var(--ink-soft); font-weight: 700; }
.facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; line-height: 1.4; }

.uses-box { background: var(--glass); border: 1.5px solid var(--glass-line); }
.uses-box .chips { margin-top: 10px; }
.safety-box { background: var(--clay); border: 2px solid var(--clay-line); }
.safety-box h2 { color: var(--clay-ink); }
.safety-box ul { margin: 0 0 var(--s3); padding-left: 1.2em; }
.safety-box li + li { margin-top: 8px; }
.buy-box { background: var(--butter-tint); border: 1.5px solid #E4C66E; }
.note-box { background: var(--sage-tint); border: 1.5px solid #C7D9C6; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { display: grid; gap: var(--s3); padding: var(--s5) 0; border-top: 1.5px solid var(--line); }
.step:first-child { border-top: 0; padding-top: var(--s3); }
.step-num { font-family: var(--font-head); font-size: 44px; line-height: 1; color: var(--sage); }
.step h3 { margin-bottom: 8px; }
.step .photo { aspect-ratio: 4 / 3; }
.step .looks { margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--sage-tint); font-size: var(--fs-text); }
@media (min-width: 768px) {
  .step { grid-template-columns: 64px 1fr 260px; align-items: start; gap: var(--s4); }
  .step .photo { grid-column: 3; grid-row: 1; aspect-ratio: 4 / 5; }
}

/* FAQ */
.faq details { border-top: 1.5px solid var(--line); }
.faq details:last-child { border-bottom: 1.5px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; padding: 14px 0; font-weight: 700; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-head); font-size: 30px; color: var(--sage); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 var(--s4); }

/* Author box (MB-7c) */
.author { display: grid; grid-template-columns: 88px 1fr; gap: var(--s3) var(--s4); align-items: start; padding: var(--s4) 0; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.author img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.author h3 { font-family: var(--font-head); font-weight: 400; font-size: 24px; margin-bottom: 4px; }
.author p { font-size: var(--fs-text); color: var(--ink-soft); }

/* Sources */
.sources ol { padding-left: 1.3em; margin: 0; font-size: var(--fs-label); line-height: 1.55; }
.sources li + li { margin-top: 10px; }
.sources a { word-break: break-word; }

/* ---------- Signup band (MB-5a, MB-5b) ---------- */
.signup-band { background: var(--ink); color: var(--paper); border-radius: 26px; overflow: hidden; display: grid; }
.signup-band .signup-copy { padding: var(--s5) var(--s4) var(--s5); }
.signup-band h2 { color: var(--paper); font-size: 30px; margin-bottom: 12px; }
.signup-band p { color: #D7E2D9; }
.signup-band .fine-print { color: #B9C9BD; }
.signup-band .photo { border-radius: 0; aspect-ratio: 16 / 10; }
.signup-band .signup-done h3 { color: var(--paper); }
.signup-band ul.gets { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: 8px; }
.signup-band ul.gets li { padding-left: 30px; position: relative; color: #E9EFE9; }
.signup-band ul.gets li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--butter); }
@media (min-width: 900px) {
  .signup-band { grid-template-columns: 1.2fr 1fr; }
  .signup-band .photo { aspect-ratio: auto; min-height: 100%; }
  .signup-band .signup-copy { padding: var(--s6) var(--s6); }
}

/* ---------- Ads: fixed sizes, labeled, no layout shift ---------- */
.ad { margin: var(--s6) auto; text-align: center; }
.ad-label { display: block; font-size: 13px; line-height: 20px; height: 20px; color: #857C6C; letter-spacing: 0.02em; margin-bottom: 6px; }
.ad-slot {
  margin: 0 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, #F4EBDC 0 12px, #FBF6EC 12px 24px);
  border: 1.5px dashed #D6C6AB; border-radius: 10px; color: #8F826D; font-size: 14px; line-height: 1.4; padding: 8px;
}
.ad-video .ad-slot { width: 100%; aspect-ratio: 16 / 9; }
.ad-box .ad-slot { width: 336px; max-width: 100%; height: 280px; }
.ad-leader { display: none; }
.ad-leader .ad-slot { width: 728px; height: 90px; }
@media (min-width: 1024px) { .ad-leader { display: block; margin: var(--s4) auto 0; } }
.ad-rail { position: sticky; top: 24px; margin: 0; }
.ad-rail .ad-slot { width: 300px; height: 600px; }
.ad-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--sticky-ad-h);
  background: rgba(251, 247, 239, 0.97); border-top: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 56px;
}
.ad-sticky .ad-label { position: absolute; left: 10px; top: 4px; margin: 0; font-size: 12px; height: 16px; line-height: 16px; }
.ad-sticky .ad-slot { width: 320px; height: 50px; max-width: 100%; margin-top: 10px; border-radius: 6px; }
.ad-close {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .ad-close:hover { background: var(--paper-deep); color: var(--ink); } }
.ad-close svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .ad-sticky { display: none; } body.has-sticky-ad { padding-bottom: 0; } }

/* ---------- Menu sheet (PL-5) ---------- */
.menu-sheet {
  position: fixed; inset: 0; z-index: 60; background: var(--paper); overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateY(24px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 240ms;
}
.menu-sheet.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.8,.2,1), visibility 0s; }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 76px; border-bottom: 1px solid var(--line); }
.menu-body { padding: var(--s4) 0 var(--s7); max-width: 760px; }
.menu-group { margin-top: var(--s5); }
.menu-group h2 { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; color: var(--ink-soft); margin-bottom: 12px; }
.menu-denise { display: flex; gap: 16px; align-items: center; margin-top: var(--s6); padding-top: var(--s4); border-top: 1.5px solid var(--line); font-size: var(--fs-text); color: var(--ink-soft); line-height: 1.5; }
.menu-denise img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-sheet { transform: none; transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .menu-sheet.is-open { transform: none; transition: opacity 160ms ease, visibility 0s; }
}

/* ---------- Footer (MB-11a, MB-11c) ---------- */
.site-footer { background: var(--ink); color: #DCE5DE; margin-top: var(--s7); padding: var(--s7) 0 var(--s6); }
.site-footer a { color: var(--paper); text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { text-decoration: underline; } }
.footer-offer { background: var(--paper); color: var(--ink); border-radius: 26px; padding: var(--s5) var(--s4); display: grid; gap: var(--s4); }
.footer-offer h2 { font-size: 28px; }
.footer-offer p { color: var(--ink-soft); }
.footer-offer .offer-photo { display: none; }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); }
.footer-cols.no-offer { margin-top: 0; }
.footer-cols h2 { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; color: #A9BDAE; margin-bottom: 8px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s4); }
.footer-cols li { break-inside: avoid; }
.footer-cols li a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 19px; }
.footer-fine { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(220, 229, 222, 0.2); font-size: var(--fs-label); line-height: 1.6; color: #B9C9BD; display: grid; gap: 10px; }
.footer-fine strong { color: var(--paper); }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s4); }
.footer-brand img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.footer-brand b { font-family: var(--font-head); font-weight: 400; font-size: 26px; color: var(--paper); }
@media (min-width: 900px) {
  .footer-offer { grid-template-columns: 1fr 1.1fr; align-items: center; padding: var(--s6); }
  .footer-cols { grid-template-columns: 1.4fr 1fr; }
}

/* ---------- Search page (PL-5, MB-6c) ---------- */
.search-hero { padding: var(--s4) 0 var(--s5); }
.search-hero h1 { font-size: 34px; margin-bottom: 10px; }
.search-hero h1 q { quotes: "\201C" "\201D"; }
.search-hero .sub { font-size: var(--fs-lead); color: var(--ink-soft); margin-bottom: var(--s4); line-height: 1.5; }
.search-hero .chips { margin-top: var(--s3); }
@media (min-width: 768px) { .search-hero h1 { font-size: 46px; } }
.result-count { font-size: var(--fs-text); color: var(--ink-soft); margin: 0 0 var(--s3); }
.best-match { display: grid; gap: 0; background: var(--card); border: 1.5px solid var(--line); border-radius: 24px; overflow: hidden; text-decoration: none; color: var(--ink); }
.best-match .photo { border-radius: 0; aspect-ratio: 16 / 10; }
.best-match .bm-body { padding: var(--s4); }
.best-match .bm-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.best-match h2 { font-size: 27px; margin-bottom: 10px; }
.best-match p { color: var(--ink-soft); font-size: var(--fs-text); }
@media (hover: hover) { .best-match:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } }
@media (min-width: 768px) {
  .best-match { grid-template-columns: 300px 1fr; }
  .best-match .photo { aspect-ratio: auto; height: 100%; min-height: 260px; }
  .best-match .bm-body { padding: var(--s5); align-self: center; }
}
.result-group { margin-top: var(--s6); }
.result-group > h2 { font-size: 26px; margin-bottom: var(--s3); display: flex; align-items: baseline; gap: 10px; }
.result-group > h2 small { font-family: var(--font-body); font-size: var(--fs-label); color: var(--ink-soft); }
.no-results { background: var(--card); border: 1.5px solid var(--line); border-radius: 24px; padding: var(--s5) var(--s4); }
.no-results h2 { margin-bottom: 10px; }
.browse { margin-top: var(--s6); padding: var(--s5) var(--s4); background: var(--paper-deep); border-radius: 24px; }
.browse h2 { font-size: 26px; margin-bottom: 8px; }
.browse p { color: var(--ink-soft); margin-bottom: var(--s4); }
.browse h3 { font-size: var(--fs-label); color: var(--ink-soft); margin: var(--s4) 0 12px; }

/* ---------- Coming soon page ---------- */
.soon { display: grid; gap: var(--s5); }
.soon-photo { aspect-ratio: 16 / 10; }
.soon-photo img { object-position: 50% 18%; }
.soon h1 { font-size: 34px; margin-bottom: var(--s3); }
.soon .lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.55; }
.asked { margin-top: var(--s4); background: var(--butter-tint); border: 1.5px solid #E4C66E; border-radius: 16px; padding: 18px 20px; }
.asked span { display: block; font-size: var(--fs-label); font-weight: 700; color: #6E500E; margin-bottom: 4px; }
.asked b { display: block; font-size: 20px; line-height: 1.4; }
.asked em { display: block; font-style: normal; font-size: var(--fs-text); color: var(--ink-soft); margin-top: 6px; }
@media (min-width: 900px) {
  .soon { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s6); }
  .soon h1 { font-size: 44px; }
  .soon-photo { aspect-ratio: 4 / 5; }
}

.section-head { margin-bottom: var(--s4); }
.section-head p { color: var(--ink-soft); margin-top: 8px; }

/* =========================================================
   Page-type components (home, section, tip, list, cabinet,
   Worth Buying, recipe, never-mix, about, free guide)
   ========================================================= */

/* Article head (PL-1 blocks 1 and 2) */
.article-head { padding-top: var(--s2); }
.article-head h1 { margin-bottom: var(--s3); }
.byline { display: flex; align-items: center; gap: 12px; font-size: var(--fs-text); color: var(--ink-soft); line-height: 1.45; }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; flex: none; }
.byline b { color: var(--ink); }
.hero-photo { margin-top: var(--s4); aspect-ratio: 4 / 3; }
.hero-photo img { object-position: 50% 30%; }
@media (min-width: 768px) { .hero-photo { aspect-ratio: 16 / 10; } }
.jump { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); color: var(--ink); font-weight: 700; text-decoration: none; background: transparent; }
@media (hover: hover) { .jump:hover { background: var(--ink); color: var(--paper); } }
.jump svg { width: 18px; height: 18px; transform: rotate(90deg); }

/* Prose blocks */
.prose h2 { margin-bottom: var(--s3); }
.prose h3 { margin: var(--s4) 0 8px; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li + li { margin-top: 6px; }
.story { border-left: 4px solid var(--butter); padding-left: var(--s4); }
.story p { font-size: var(--fs-lead); line-height: 1.6; }
.price-note { font-size: var(--fs-label); color: var(--ink-soft); }
.todo { background: var(--butter-tint); border-radius: 6px; padding: 0 6px; font-weight: 700; color: #6E500E; }

/* Buy items (PL-1 block 8, PL-2) */
.buy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.buy-item { background: var(--card); border: 1.5px solid #E9D7A2; border-radius: 14px; padding: var(--s3) 18px; }
.buy-item h3 { font-size: 19px; }
.buy-item p { font-size: var(--fs-text); margin: 4px 0 12px; color: var(--ink-soft); }
.buy-item .price { font-weight: 700; color: var(--ink); }
.shop-links { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 20px; border-radius: var(--radius-pill); background: var(--butter); color: var(--ink); font-weight: 700; text-decoration: none; border: 1.5px solid #D9B455; }
@media (hover: hover) { .shop-btn:hover { background: #E9C96B; color: var(--ink); } }
.disclosure { font-size: var(--fs-label); color: var(--ink-soft); margin-top: var(--s3); }

/* Related and next tip (PL-1 blocks 11 and 12) */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.card-grid .photo { aspect-ratio: 4 / 3; }
.card-grid h3 { font-size: 18px; line-height: 1.35; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } .card-grid h3 { font-size: 19px; } }
.next-tip { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 20px 24px; border-radius: 18px; background: var(--sage-text); color: #fff; text-decoration: none; }
@media (hover: hover) { .next-tip:hover { background: var(--ink); color: #fff; } }
.next-tip small { display: block; font-size: var(--fs-label); opacity: 0.9; }
.next-tip b { display: block; font-size: 20px; line-height: 1.3; }
.next-tip svg { width: 28px; height: 28px; flex: none; }

/* Home (PL-4) */
.home-hero { padding: var(--s4) 0 var(--s2); }
.home-hero .greet { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s3); color: var(--ink-soft); font-size: var(--fs-text); line-height: 1.4; }
.home-hero .greet img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; flex: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--butter); }
.home-hero h1 { margin-bottom: var(--s4); }
.home-hero .chips { margin-top: var(--s3); }
.reel-box { display: grid; gap: 10px; }
.reel-box .search-field input { border-color: var(--line-strong); }
/* Wide buttons: keep typed text clear of the button. */
.home-hero .search-field input { padding-right: 150px; }
.reel-box .search-field input { padding-right: 206px; }
@media (max-width: 600px) {
  .reel-box .search-field { flex-wrap: wrap; }
  .reel-box .search-field svg { top: 18px; }
  .reel-box .search-field input { padding-right: 20px; }
  .reel-box .search-field button { position: static; width: 100%; min-height: 52px; margin-top: 10px; }
}
.room-tile { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; color: #fff; text-decoration: none; background: var(--paper-deep); }
.room-tile img { width: 100%; height: 100%; object-fit: cover; }
.room-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; font-weight: 700; font-size: 18px; line-height: 1.25; background: linear-gradient(to top, rgba(20, 38, 28, 0.85), rgba(20, 38, 28, 0)); }
.room-tile.no-img { background: var(--sage-tint); color: var(--ink); display: flex; align-items: flex-end; }
.room-tile.no-img span { background: none; position: static; }
.cab-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 120px; padding: 16px; border-radius: 16px; background: var(--glass); border: 1.5px solid var(--glass-line); color: var(--glass-ink); text-decoration: none; }
.cab-tile b { font-size: 19px; line-height: 1.25; color: var(--ink); }
.cab-tile small { font-size: var(--fs-text); }
@media (hover: hover) { .cab-tile:hover { background: #D6E6E1; } }
.today { display: block; position: relative; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; }
.today .photo { border-radius: 0; aspect-ratio: 4 / 5; }
.today .today-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px var(--s4) var(--s4); background: linear-gradient(to top, rgba(20, 38, 28, 0.92) 40%, rgba(20, 38, 28, 0)); }
.today .tag { background: var(--butter); color: var(--ink); }
.today h2 { color: #fff; font-size: 28px; margin: 10px 0 6px; }
.today p { color: #E3EAE4; font-size: var(--fs-text); }
.today .illus { top: 12px; bottom: auto; }
@media (min-width: 768px) { .today .photo { aspect-ratio: 16 / 9; } .today h2 { font-size: 36px; } }
.popular { list-style: none; margin: 0; padding: 0; counter-reset: pop; display: grid; gap: 14px; }
.popular a { display: grid; grid-template-columns: 34px 88px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); }
.popular a::before { counter-increment: pop; content: counter(pop); font-family: var(--font-head); font-size: 30px; color: var(--sage); text-align: center; }
.popular .photo { width: 88px; height: 88px; border-radius: 14px; }
.popular b { display: block; font-size: 18px; line-height: 1.35; }
.popular small { display: block; font-size: var(--fs-text); color: var(--ink-soft); margin-top: 2px; }
.meet { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); align-items: center; padding: var(--s4); background: var(--paper-deep); border-radius: 24px; }
.meet img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.meet h2 { font-size: 26px; margin-bottom: 6px; }
.meet p { font-size: var(--fs-text); color: var(--ink-soft); }

/* Section page (PL-3) */
.section-hero { margin-top: var(--s2); }
.section-hero .photo { aspect-ratio: 4 / 3; }
.section-hero .sh-body { padding: var(--s4) 0 0; }
.section-hero h1 { margin-bottom: 8px; }
.section-hero .quote { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.55; }
@media (min-width: 900px) { .section-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; } .section-hero .sh-body { padding: 0; } }
.start-here { display: grid; grid-template-columns: 1fr; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.start-card { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 10px; text-decoration: none; color: var(--ink); }
.start-card .photo { aspect-ratio: 1; border-radius: 12px; }
.start-card b { display: block; font-size: 18px; line-height: 1.35; }
.start-card small { display: block; font-size: var(--fs-text); color: var(--ink-soft); margin-top: 4px; }
@media (min-width: 768px) { .start-here { grid-template-columns: 1fr 1fr; } }
.tip-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-label); color: var(--ink-soft); margin-top: 6px; }

/* Tip list page (numbered items) */
.list-items { list-style: none; margin: 0; padding: 0; counter-reset: li; }
.list-item { padding: var(--s5) 0; border-top: 1.5px solid var(--line); }
.list-item:first-child { border-top: 0; padding-top: var(--s3); }
.list-item h2 { font-size: 26px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; margin-bottom: var(--s3); }
.list-item h2::before { counter-increment: li; content: counter(li); font-size: 40px; color: var(--sage); line-height: 1; }
.list-item .photo { aspect-ratio: 16 / 10; margin-bottom: var(--s3); }
.list-item .fix { margin-top: 12px; padding: 14px 18px; border-radius: 12px; background: var(--sage-tint); }
.list-item .fix b { display: block; }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: toc; }
.toc a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 8px 0; color: var(--ink); text-decoration: none; font-weight: 700; border-bottom: 1px solid #E6CF86; }
.toc li:last-child a { border-bottom: 0; }
.toc a::before { counter-increment: toc; content: counter(toc); font-family: var(--font-head); font-weight: 400; color: var(--sage-text); min-width: 22px; }

/* Worth Buying (PL-2) */
.quick-picks { list-style: none; margin: 0; padding: 0; display: grid; }
.quick-picks li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 0; border-bottom: 1.5px solid #E6CF86; }
.quick-picks li:last-child { border-bottom: 0; }
.quick-picks small { grid-column: 1 / -1; font-size: var(--fs-label); font-weight: 700; color: #6E500E; }
.quick-picks b { font-size: 18px; line-height: 1.35; }
.quick-picks .shop-btn { min-height: 44px; padding: 0 16px; font-size: var(--fs-text); }
.pick { padding: var(--s5) 0; border-top: 1.5px solid var(--line); }
.pick:first-child { border-top: 0; }
.pick-rank { font-family: var(--font-head); font-size: 18px; color: var(--sage-text); margin-bottom: 4px; }
.pick h2 { font-size: 27px; margin-bottom: var(--s3); }
.pick .photo { aspect-ratio: 4 / 3; margin-bottom: var(--s3); }
.pick-facts { display: grid; gap: 0; margin: 0 0 var(--s3); }
.pick-facts div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pick-facts dt { font-weight: 700; font-size: var(--fs-label); color: var(--ink-soft); }
.pick-facts dd { margin: 0; }
.pick .shop-links .shop-btn { flex: 1 1 200px; }

/* Cabinet page (PL-6) */
.cab-hero { margin-top: var(--s2); }
.cab-hero h1 { margin-bottom: var(--s3); }
.cab-hero .photo { aspect-ratio: 4 / 3; margin-top: var(--s4); }
.facts-1 { grid-template-columns: 1fr; }
.facts-1 div:nth-child(odd) { border-right: 0; }
.facts-1 div:nth-child(even) { padding-left: 0; }
.uses-box .facts { border-top-color: #B9D0C9; }
.uses-box .facts div { border-bottom-color: #B9D0C9; }
.uses-box .facts div:nth-child(odd) { border-right-color: #B9D0C9; }
.room-uses h3 { font-size: 19px; margin: var(--s4) 0 10px; color: var(--ink-soft); }

/* Recipe (cheap dinner) */
.recipe-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; border-top: 1.5px solid #E6CF86; }
.recipe-facts div { padding: 14px 12px 14px 0; border-bottom: 1.5px solid #E6CF86; }
.recipe-facts div:nth-child(odd) { border-right: 1.5px solid #E6CF86; }
.recipe-facts div:nth-child(even) { padding-left: 16px; }
.recipe-facts dt { font-size: var(--fs-label); color: var(--ink-soft); font-weight: 700; }
.recipe-facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }
.test-note { margin-top: var(--s3); padding: 12px 16px; border-radius: 12px; border: 1.5px dashed var(--line-strong); font-size: var(--fs-text); color: var(--ink-soft); }
.test-note b { color: var(--ink); }
.ingredients { list-style: none; margin: 0; padding: 0; }
.ingredients li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ingredients li span:last-child { color: var(--ink-soft); font-size: var(--fs-text); white-space: nowrap; }
.cost-table { width: 100%; border-collapse: collapse; font-size: var(--fs-text); }
.cost-table th, .cost-table td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cost-table th { font-size: var(--fs-label); color: var(--ink-soft); }
.cost-table td:last-child, .cost-table th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.cost-table tfoot td { font-weight: 700; border-bottom: 0; padding-top: 14px; }
.swaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.swaps li { padding: 14px 18px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); }
.swaps b { display: block; }

/* Never-mix chart */
.mix-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.mix-card { border-radius: var(--radius-box); border: 2px solid var(--clay-line); background: var(--card); overflow: hidden; }
.mix-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 18px; background: var(--clay); font-weight: 700; font-size: 19px; line-height: 1.35; }
.mix-pair .plus { color: var(--clay-ink); font-family: var(--font-head); font-size: 24px; line-height: 1; }
.mix-body { padding: 16px 18px; }
.mix-body p { font-size: var(--fs-text); }
.mix-body .makes { font-weight: 700; color: var(--clay-ink); }
@media (min-width: 768px) { .mix-list { grid-template-columns: 1fr 1fr; } }
.call-box { background: var(--ink); color: var(--paper); }
.call-box h2 { color: var(--paper); }
.call-box p { color: #D7E2D9; }
.call-box a { color: var(--butter); font-weight: 700; }

/* About */
.about-hero { display: grid; gap: var(--s4); }
.about-hero .photo { aspect-ratio: 4 / 5; }
.about-hero .photo img { object-position: 50% 20%; }
.check-note { background: var(--sage-tint); border: 1.5px solid #C7D9C6; border-radius: var(--radius-box); padding: var(--s4); }
.check-note h2 { font-size: 26px; margin-bottom: 10px; }
@media (min-width: 900px) { .about-hero { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s6); } }

/* Free guide and thanks */
.guide-hero { display: grid; gap: var(--s5); }
.guide-hero h1 { margin-bottom: var(--s3); }
.guide-preview { aspect-ratio: 5 / 4; border-radius: 22px; background: var(--paper-deep); display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.guide-sheet { height: 100%; aspect-ratio: 8.5 / 11; background: #fff; border-radius: 6px; box-shadow: 0 18px 40px rgba(31, 58, 44, 0.16), 0 2px 6px rgba(31, 58, 44, 0.08); padding: 16px; display: flex; flex-direction: column; gap: 8px; transform: rotate(-2deg); }
.guide-sheet b { font-family: var(--font-head); font-weight: 400; font-size: 16px; line-height: 1.2; margin-bottom: 4px; }
.guide-sheet i { display: block; height: 7px; border-radius: 4px; background: #EEE6D6; }
.guide-sheet i.b { background: var(--butter); width: 60%; margin-top: 6px; }
.guide-sheet i.c { background: var(--clay); width: 75%; margin-top: 6px; }
.signup-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 24px; padding: var(--s5) var(--s4); }
.signup-card ul.gets { padding-left: 1.2em; margin: 0 0 var(--s4); }
.signup-card ul.gets li + li { margin-top: 6px; }
@media (min-width: 900px) { .guide-hero { grid-template-columns: 1.1fr 1fr; align-items: start; gap: var(--s6); } .signup-card { padding: var(--s5); } }
.thanks-hero .check { width: 64px; height: 64px; border-radius: 50%; background: var(--butter); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s4); }
.thanks-hero .check svg { width: 32px; height: 32px; color: var(--ink); }
.next-steps { list-style: none; margin: 0; padding: 0; counter-reset: ns; display: grid; gap: var(--s3); }
.next-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.next-steps li::before { counter-increment: ns; content: counter(ns); width: 44px; height: 44px; border-radius: 50%; background: var(--sage-tint); color: var(--sage-text); font-family: var(--font-head); font-size: 22px; display: flex; align-items: center; justify-content: center; }

/* Template slot markers (templates/ folder only) */
.slot { outline: 2px dashed #C9A24A; outline-offset: 3px; border-radius: 4px; }
.tpl-banner { background: var(--butter-tint); border-bottom: 1.5px solid #E4C66E; font-size: var(--fs-label); line-height: 1.45; padding: 10px var(--gutter); text-align: center; }

/* ---------- Content pages (built from content/*.md) ---------- */
.trust-line { font-size: var(--fs-text); color: var(--ink-soft); line-height: 1.5; margin: 6px 0 var(--s3); }
.section-hero .trust-line { margin: 0 0 10px; }
.tbc { display: inline-block; padding: 0 8px; margin: 0 2px; border-radius: 6px; border: 1.5px dashed #C9A24A; background: var(--butter-tint); color: #6E500E; font-size: var(--fs-label); font-weight: 700; line-height: 1.6; vertical-align: 1px; white-space: normal; }
.answer-lead { font-size: var(--fs-lead); line-height: 1.55; margin-bottom: var(--s3); }
.answer-lead .lead-k { display: block; font-size: var(--fs-label); color: var(--ink-soft); margin-bottom: 2px; }
.facts-long dd { font-weight: 400; font-size: var(--fs-text); line-height: 1.55; }
.facts-long dt { color: var(--ink); }
.answer-box .test-note { margin: 0 0 var(--s4); }
.photo.photo-todo.slim { aspect-ratio: auto !important; height: auto; padding: 14px 16px; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 2px; font-size: var(--fs-label); line-height: 1.45; border-radius: 14px; }
.photo.photo-todo.slim b { font-size: var(--fs-label); }
.photo-todo.hero-photo { aspect-ratio: 16 / 9; }
.step .photo.slim { grid-column: auto; grid-row: auto; }
@media (min-width: 768px) { .step .photo.slim { grid-column: 3; grid-row: 1; } }
.full-tip { margin-top: 12px; font-size: var(--fs-text); color: var(--ink-soft); }
.mistakes-toc { margin-bottom: var(--s4); padding: var(--s3) var(--s4); background: var(--butter-tint); border-radius: var(--radius-box); }
.prose h3 { margin: var(--s4) 0 8px; }
.prose ul, .prose ol:not(.steps) { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose > p + p, .note-box p + p, .safety-box p + p { margin-top: 12px; }
.story-by { font-family: var(--font-head); font-size: var(--fs-text) !important; color: var(--sage-text); margin-bottom: 4px; }
.prose .story { margin-top: var(--s4); }

/* data tables become stacked rows on phones, so nothing scrolls sideways */
.table-wrap { margin: var(--s3) 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-text); line-height: 1.5; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.data-table th { font-size: var(--fs-label); color: var(--ink-soft); }
@media (max-width: 767px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { padding: 12px 0; border-bottom: 1.5px solid var(--line); }
  .data-table td { border: 0; padding: 2px 0; }
  .data-table td::before { content: attr(data-label); display: block; font-size: var(--fs-label); font-weight: 700; color: var(--ink-soft); }
}
.fact-log { border: 1.5px solid var(--line); border-radius: var(--radius-box); padding: 0 var(--s4); background: var(--card); }
.fact-log summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; font-weight: 700; font-size: var(--fs-text); padding: 12px 0; }
.fact-log[open] { padding-bottom: var(--s4); }
.fact-table { font-size: var(--fs-label); }
.src-dom, .src-more { font-size: var(--fs-label); color: var(--ink-soft); }
.src-more { margin-left: 4px; }

/* never-mix chart */
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.mix-h { margin: var(--s4) 0 var(--s3); }
.mix-note { padding: 0 18px; margin-top: 10px; font-size: var(--fs-text); color: var(--clay-ink); }
.mix-body .checked { font-size: var(--fs-label); color: var(--ink-soft); margin-top: 8px; overflow-wrap: anywhere; }
.mix-waste { border-color: var(--line-strong); }
.mix-waste .mix-pair { background: var(--paper-deep); }
.mix-waste .plus { color: var(--ink-soft); }
@media print { .site-header, .site-footer, .ad, .page-rail, .signup-band, .crumbs { display: none !important; } }

/* section pages */
.filter-chips { margin-top: var(--s3); }
.filter-chips .chip { cursor: pointer; font: inherit; font-weight: 700; }
.filter-chips .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.card-blurb { font-size: var(--fs-text); color: var(--ink-soft); line-height: 1.45; margin-top: 6px; }
.card-text { padding: var(--s3); border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); height: 100%; }
.tip-grid h3 { overflow-wrap: anywhere; }
.tag-price { background: var(--butter-tint); color: #6E500E; }
.card-meta .tag { margin: 0 6px 6px 0; }
.shelf { background: var(--paper-deep); border-radius: 24px; padding: var(--s4) var(--s3) var(--s3); }
.shelf .swipe { margin: 0; }
.shelf-note { margin-top: 4px; }
.shelf .photo-todo { aspect-ratio: 4 / 3; padding: 12px; }
.row-blurb { display: block; font-size: var(--fs-text); color: var(--ink-soft); margin-top: 6px; line-height: 1.45; font-weight: 400; }
.how-picked { font-size: var(--fs-text); color: var(--ink-soft); margin-top: var(--s3); }

/* home */
.room-card { display: block; text-decoration: none; color: var(--ink); }
.room-card .photo { aspect-ratio: 3 / 4; border-radius: 18px; margin-bottom: 10px; }
.room-card .photo-todo.slim { aspect-ratio: 3 / 4 !important; justify-content: center; }
.room-card b { display: block; font-size: var(--fs-text); line-height: 1.3; }
.room-card small { display: block; font-size: var(--fs-text); color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.today-btn { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--s3); padding: 0 22px; border-radius: var(--radius-pill); background: var(--terracotta); color: #fff; font-weight: 700; }
.cab-tile .tag-soon { align-self: flex-start; }

/* about, guide, thanks */
.about-sec h2 { margin-bottom: var(--s2); }
.guide-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.guide-page { display: grid; grid-template-columns: 84px 1fr; gap: var(--s3); align-items: start; }
.guide-sheet.mini { height: auto; width: 84px; padding: 10px; gap: 5px; transform: rotate(-2deg); }
.guide-sheet.mini b { font-size: 12px; margin: 0; }
.guide-sheet.mini i { height: 5px; }
.guide-page h3 { font-size: 19px; margin-bottom: 4px; }
.guide-page p { font-size: var(--fs-text); color: var(--ink-soft); }
@media (min-width: 768px) { .guide-pages { grid-template-columns: 1fr 1fr; } }
.fine-list ul { padding-left: 1.2em; font-size: var(--fs-label); color: var(--ink-soft); }
.fine-list li + li { margin-top: 6px; }
.btn-disabled { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 22px; border-radius: var(--radius-pill); border: 2px dashed var(--line-strong); color: var(--ink-soft); font-weight: 700; cursor: not-allowed; }
.photo-soft { display: flex; align-items: flex-end; padding: 12px 14px; background: linear-gradient(160deg, var(--sage-tint), var(--glass)); }
.photo-soft span { font-family: var(--font-head); font-size: var(--fs-label); color: var(--sage-text); line-height: 1.2; }
.popular .photo-soft span, .start-card .photo-soft span { font-size: var(--fs-label); }
.popular .photo-todo { padding: 6px; }
.popular .photo-todo b { font-size: var(--fs-label); line-height: 1.2; }
.swipe .card-link .photo { aspect-ratio: 4 / 3; }
.cost-table td small { display: block; font-size: var(--fs-label); color: var(--ink-soft); margin-top: 2px; }
.btn.btn-disabled { background: transparent; color: var(--ink-soft); border: 2px dashed var(--line-strong); }

/* Ads switched off (DH.ADS_ON = false in site.js): no rail column, content stays centered */
.no-ads .page-rail, .no-ads .ad, .no-ads .ad-sticky { display: none !important; }
@media (min-width: 1100px) { .no-ads .page-grid { grid-template-columns: minmax(0, var(--col)); } }

/* Generated section pages (PL-3) */
@media (min-width: 900px) { .section-hero.no-photo { display: block; } }
.section-empty { padding: var(--s4); border: 1.5px solid var(--line); border-radius: 18px; background: var(--card); }
.section-empty h2 { margin-bottom: 8px; }
.section-empty p { color: var(--ink-soft); }

/* Long cabinet chips on tip pages wrap instead of pushing the page sideways */
.uses-box .chips li { max-width: 100%; }
.uses-box .chip { white-space: normal; max-width: 100%; padding: 6px 18px; line-height: 1.35; }

/* DMF-56: steps without a photo use the full width (no empty photo column) */
@media (min-width: 768px) { .step.no-photo { grid-template-columns: 64px 1fr; } }

/* ---------- Shop (SH1 to SH3) ---------- */
.shop-head h1 { margin-bottom: var(--s3); }
.shop-intro { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); align-items: center; font-size: var(--fs-lead); line-height: 1.55; margin-bottom: var(--s2); }
.shop-intro img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--butter); }
.shop-list { list-style: none; margin-left: 0; margin-right: 0; padding: 0; display: grid; gap: var(--s3); }
.shop-card { display: grid; grid-template-columns: 112px 1fr; gap: var(--s3); align-items: start; padding: var(--s3); border: 1.5px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); text-decoration: none; height: 100%; }
@media (hover: hover) { .shop-card:hover { border-color: var(--line-strong); } }
@media (hover: hover) { .shop-card:hover .shop-card-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }
.shop-cover { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(31, 58, 44, 0.10); background: #fff; }
.shop-cover img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1165; }
.shop-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; height: 100%; }
.shop-card-name { font-family: var(--font-head); font-size: 21px; line-height: 1.25; }
.shop-card-line { font-size: var(--fs-text); line-height: 1.45; color: var(--ink-soft); }
.shop-buyrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.shop-price { font-family: var(--font-head); font-size: 26px; }
.shop-see { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 20px; border-radius: var(--radius-pill); background: var(--terracotta); color: #fff; font-weight: 700; font-size: var(--fs-text); }
@media (hover: hover) { .shop-card:hover .shop-see { background: var(--terracotta-dark); } }
.shop-free { font-size: var(--fs-lead); }
@media (min-width: 768px) {
  .shop-list { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .shop-card { grid-template-columns: 1fr; padding: var(--s3) var(--s3) var(--s4); }
  .shop-cover { margin: 0 0 6px; }
}

.pp-head { display: grid; gap: var(--s5); }
.pp-hero { position: relative; max-width: 300px; margin: var(--s2) auto 0; padding: 0 28px 18px 0; }
.pp-cover, .pp-back { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.pp-cover { position: relative; box-shadow: 0 10px 28px rgba(31, 58, 44, 0.16); }
.pp-back { position: absolute; top: 18px; left: 28px; right: 0; bottom: 0; box-shadow: 0 4px 14px rgba(31, 58, 44, 0.10); }
.pp-cover img, .pp-back img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1165; }
.pp-back img { height: 100%; object-fit: cover; object-position: top; }
.pp-top h1 { margin-bottom: var(--s2); }
.pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: var(--s3); }
.pp-price b { font-family: var(--font-head); font-weight: 400; font-size: 40px; line-height: 1; }
.pp-price span { font-size: var(--fs-label); color: var(--ink-soft); }
.buy-area .btn { width: 100%; }
.buy-area .btn[disabled] { opacity: .7; cursor: progress; }
.buy-safe { font-size: var(--fs-label); color: var(--ink-soft); text-align: center; margin-top: 8px; }
.buy-closed { margin-top: var(--s3); padding: var(--s4); border-radius: var(--radius-box); background: var(--butter-tint); border: 1.5px solid #E4C66E; }
.buy-closed[hidden] { display: none; }
.buy-closed h3 { font-size: 22px; margin-bottom: 6px; }
.buy-closed p { margin-bottom: 10px; }
.buy-closed .signup { margin-top: var(--s3); }
.pp-inside { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1.5px solid var(--line); }
.pp-inside li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1.5px solid var(--line); }
.pp-inside li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 14px; height: 8px; border-left: 3px solid var(--sage); border-bottom: 3px solid var(--sage); transform: rotate(-45deg); }
.pp-inside b { display: block; font-size: 19px; line-height: 1.4; }
.pp-inside span { display: block; font-size: var(--fs-text); color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }
.pp-looks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.pp-looks img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1165; border-radius: 8px; border: 1px solid var(--line); background: #fff; box-shadow: 0 3px 10px rgba(31, 58, 44, 0.08); }
.pp-looks span { display: block; font-size: var(--fs-label); color: var(--ink-soft); margin-top: 6px; text-align: center; }
.pp-after { margin: 0; padding-left: 1.3em; }
.pp-after li + li { margin-top: 8px; }
@media (min-width: 768px) {
  .pp-head { grid-template-columns: 260px 1fr; align-items: start; gap: var(--s5); }
  .pp-hero { margin: 8px 0 0; }
  .pp-looks { gap: var(--s4); }
}

.order-file { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.order-cover { display: block; width: 72px; flex: none; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.order-cover[hidden] { display: none; }
.order-cover img { display: block; width: 100%; height: auto; }
.order-file b { display: block; font-size: 20px; line-height: 1.35; }
.order-file span { display: block; font-size: var(--fs-text); color: var(--ink-soft); }
.order-status { margin-top: 10px; font-size: var(--fs-text); }
.order-status:empty { display: none; }
#order-download[hidden] { display: none; }
#order-download.btn-disabled { min-height: 56px; justify-content: center; width: 100%; }
.help-title { font-size: 32px; margin-bottom: var(--s3); }
.tag-shop { background: var(--clay); color: var(--clay-ink); }

/* =========================================================
   Design system rules (DMF-66a, 11/7): one place for how
   things react, read on dark surfaces and size for touch.
   ========================================================= */

/* Interaction: everything you can press reacts the same way */
.btn, .chip, .shop-btn, .shop-see, .today-btn, .jump, .icon-btn, .search-field button, .email-form button,
.swipe-btns button, .next-tip, .row, .start-card, .cab-tile, .best-match, .shop-card, .room-card, .card-link, .popular a {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .chip:active, .shop-btn:active, .jump:active, .icon-btn:active, .search-field button:active,
.email-form button:active, .swipe-btns button:active:not(:disabled), .today:active .today-btn { transform: scale(0.97); }
.row:active, .start-card:active, .cab-tile:active, .next-tip:active, .best-match:active, .shop-card:active,
.room-card:active, .card-link:active, .popular a:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .shop-btn, .jump, .icon-btn, .row, .start-card, .cab-tile, .next-tip, .best-match, .shop-card,
  .room-card, .card-link, .popular a, .search-field button, .email-form button, .swipe-btns button, .today-btn { transform: none !important; }
}

/* Dark surfaces: links are near-white and underlined, quiet text stays readable */
.signup-band a, .call-box p a, .today p a { color: #E3EAE4; text-decoration: underline; }
@media (hover: hover) { .signup-band a:hover { color: var(--butter); } }
.signup-band .fine-print { color: #C9D6CC; }

/* Touch: every link a thumb aims at is at least 44px tall */
.crumbs ol { gap: 0; align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-fine a { display: inline-flex; align-items: center; min-height: 44px; }

/* Rows of cards: equal heights, and no arrows when there is nothing to scroll */
.swipe-track > li { display: flex; }
.swipe-track > li > a { flex: 1; }
.cab-tile { height: 100%; }
.swipe.no-overflow .swipe-btns { display: none !important; }

/* Home: the one search box carries the video hint (A-1) */
.search-hint { margin: var(--s3) 0 0; padding: 12px 16px; border-radius: 12px; background: var(--sage-tint); color: var(--ink); font-size: var(--fs-text); line-height: 1.5; }
.home-hero .trust-line { margin-top: var(--s3); }
/* Thanks page: way back to the tip the reader came from */
.back-to { margin-top: var(--s4); }
.back-to[hidden] { display: none; }

/* Long button labels wrap cleanly instead of crowding the pill */
.btn { line-height: 1.3; }
.back-to .btn { max-width: 100%; }
/* Desktop: small card rows show three roomy cards, never five cramped ones */
@media (min-width: 768px) { .swipe-small .swipe-track { grid-auto-columns: calc((100% - 32px) / 3); } }
.buy-list + p, .buy-list + .disclosure, .buy-box .buy-list + * { margin-top: var(--s3); }

/* Thanks page back link: a plain link, so a long tip title reads as text, not a crowded button */
.back-link { display: inline-flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 0; font-weight: 700; font-size: var(--fs-text); line-height: 1.4; color: var(--sage-text); }