/* ─────────────────────────────────────────────────────────────
   legal.css — terms.html and privacy.html only.

   A separate file on purpose. These pages needed prose styles that
   did not exist, and css/styles.css is the frozen mobile design;
   putting them here means the three original pages cannot be
   affected at all, because they never load this file.

   Design system: "Cellar Light" tokens from styles.css. Legal pages
   are a DEAD-CALM ZONE — no motion, no reveals, no transitions.
   ───────────────────────────────────────────────────────────── */

.legal-body {
  padding-inline: 24px;
  padding-bottom: 72px;
  max-width: 68ch;
}

.legal-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink, #1f1d1a);
  margin: 40px 0 12px;
}

.legal-body h2:first-child {
  margin-top: 8px;
}

.legal-body p,
.legal-body li {
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted, #6f6a62);
}

.legal-body p {
  margin: 0 0 14px;
}

.legal-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal-body li {
  margin-bottom: 8px;
}

.legal-body em {
  font-style: italic;
}

/* The draft notice. Wine-tinted rather than a warning colour — this is a
   statement of status, not an error. */
.legal-note {
  margin-top: 40px;
  padding: 16px 18px;
  border-left: 3px solid var(--wine, #5d1a26);
  background: rgba(93, 26, 38, 0.04);
  border-radius: 0 12px 12px 0;
  font-size: 14px !important;
}

.legal-note strong {
  color: var(--wine, #5d1a26);
  font-weight: 600;
}

@media (min-width: 960px) {
  .legal-body {
    padding-inline: max(56px, (100vw - 1200px) / 2);
  }
  .legal-body h2 {
    font-size: 26px;
    margin-top: 48px;
  }
  .legal-body p,
  .legal-body li {
    font-size: 16px;
  }
}

/* ── Generated pages (tools/build.ts) ────────────────────────────────────
   Breadcrumbs and the product photo on the prerendered wine/year pages. */

.crumbs {
  padding-inline: 24px;
  padding-top: 18px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted, #6f6a62);
}

.crumbs a {
  color: var(--muted, #6f6a62);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 106, 98, 0.3);
  padding-bottom: 1px;
}

.crumbs a:hover {
  color: var(--wine, #5d1a26);
  border-bottom-color: currentColor;
}

/* width/height attributes are set on every bottle photo so the browser can
   reserve the box (CLS). height:auto is what keeps the declared intrinsic
   size from becoming a literal 1000×1300 render once max-width constrains
   the width — without it the image renders 320 wide by 1300 tall. */
.legal-body img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin-bottom: 28px;
}

.legal-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}

.legal-body th,
.legal-body td {
  text-align: left;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid rgba(111, 106, 98, 0.16);
  white-space: nowrap;
}

.legal-body th {
  font-weight: 600;
  color: var(--ink, #1f1d1a);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-body td {
  color: var(--muted, #6f6a62);
}

.legal-body td a {
  color: var(--ink, #1f1d1a);
  text-decoration: none;
  border-bottom: 1px solid rgba(93, 26, 38, 0.3);
}

.legal-body td a:hover {
  color: var(--wine, #5d1a26);
}

.legal-body small {
  color: var(--muted, #6f6a62);
  font-size: 0.85em;
}

@media (min-width: 960px) {
  .crumbs {
    padding-inline: max(56px, (100vw - 1200px) / 2);
    padding-top: 24px;
  }
  .legal-body img {
    max-width: 380px;
  }
}