/* ======================================================================
   legal.css — shipping, returns, terms, privacy
   ======================================================================

   Loaded after maison.css, scoped under .page-legal.

   These four pages are long documents, not compositions, so the markup is
   left exactly as it is and only restyled. There is nothing here to
   rebuild: a legal page is a heading, numbered sections and paragraphs,
   and that is already what the HTML says. Rewriting it into .hm-* markup
   would have changed a few thousand words' worth of tags to arrive at the
   same document.

   What that means for the reading measure: it is set here rather than
   inherited from --a-measure. 62ch is the marketing pages' measure, tuned
   for a paragraph that sits beside an image. A terms document is read
   top to bottom and wants the same width its own stylesheet already gave
   it — 760px — so only the type inside it changes.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. Page head
   Was a panel with a bottom rule spanning the full container. Same
   structure, maison type: the small-caps breadcrumb, a display heading in
   sentence case, and the date as a quiet label.
   ---------------------------------------------------------------------- */
/* The head carried .fabric-panel — five stacked gradients in beige and
   brown, the look this whole pass replaces. Removed from the markup, so
   the surface is stated here: shell, which sets the head apart from the
   document body without drawing a panel around it. */
.page-legal .legal-hero {
  border-bottom-color: var(--a-hairline);
  background: var(--a-shell);
}

.page-legal .legal-hero .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--a-s2);
  margin: 0 0 var(--a-s5);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}
.page-legal .legal-hero .breadcrumb span { color: var(--a-gold-ink); }
.page-legal .legal-hero .breadcrumb b { font-weight: 500; color: var(--a-ink); }

.page-legal .legal-hero h1 {
  font-size: var(--a-display);
  line-height: var(--a-lh-display);
  color: var(--a-ink);
}
.page-legal .legal-updated {
  margin-top: var(--a-s4);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}

/* ----------------------------------------------------------------------
   2. Body
   ---------------------------------------------------------------------- */
.page-legal .legal-body h2 {
  font-size: var(--a-h3);
  line-height: 1.3;
  color: var(--a-ink);
}
/* The one place a serif h3 would be wrong: these are sub-labels inside a
   numbered section, so they take the small-caps treatment the rest of the
   site uses for exactly that job. */
.page-legal .legal-body h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}
.page-legal .legal-body p,
.page-legal .legal-body li {
  font-size: var(--a-body);
  line-height: var(--a-lh-body);
  color: var(--a-ink-soft);
}
.page-legal .legal-body strong { color: var(--a-ink); }

/* Underlined links, kept underlined. In running legal text a link has to
   be identifiable without hovering, and the gold rule the rest of the site
   grows on hover is a hover affordance. */
.page-legal .legal-body a {
  color: var(--a-ink);
  text-decoration-color: var(--a-gold);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--a-d-fast) var(--a-ease-soft);
}
.page-legal .legal-body a:hover,
.page-legal .legal-body a:focus-visible { text-decoration-color: var(--a-ink); }

/* The "before this goes live" note. It is addressed to the owner, not to
   the reader, so it takes the alert token — it is the one thing on these
   pages that is not finished. */
.page-legal .legal-note {
  border: 0;
  border-left: 1px solid var(--a-alert);
  border-radius: var(--a-r0);
  background: var(--a-alert-wash);
  font-size: var(--a-small);
  line-height: var(--a-lh-body);
  color: var(--a-ink-soft);
}
.page-legal .legal-note strong {
  font-size: var(--a-label);
  font-weight: 500;
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-alert);
}