/* ═══════════════════════════════════════════════════════════════════════════
   EAM MAISON — DOCUMENT PAGES
   Shared stylesheet for the policy and information pages (shipping, returns,
   contact). These are read, not experienced: no frame sequences, no scrub, no
   film. A customer arrives here with a question and should leave with an
   answer, so the page is set for reading — one column, generous measure,
   nothing that moves.

   Palette and type come from eam-tokens.css, the client's signed-off token
   set, which is imported and never edited.

   THE GOLD HARD-GATE is observed: --eam-aurum measures 2.05:1 on bone and is
   used here for hairlines, rules and the masthead seal only. Where gold reads
   as text it sits on oxblood or espresso, where it measures 6.26:1 and passes
   AA at 18px and above.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('eam-tokens.css');

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

/* 300 -> 400 with the typeface change, 24 Aug 2026. Source Serif 4's hairlines
   disappear at 300/16px in a way Bricolage's did not. Display headings stay at
   300 — that is Cormorant, set large, where 300 is correct. */
body {
  margin: 0;
  background: var(--eam-bone);
  color: var(--eam-espresso);
  font-family: var(--eam-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.72;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: var(--eam-oxblood); text-underline-offset: 3px; }
/* The hover underline is gold, and these pages are bone. Under v1.0 that was
   already thin; under v2.0 the gold measures 2.46:1 on bone and a 1px rule in it
   is effectively invisible — the hover affordance would have quietly stopped
   existing. Thickened so it reads as a gold rule, which is a use the gate
   allows, rather than as text, which it does not. */
a:hover { text-decoration-color: var(--eam-aurum); text-decoration-thickness: 2px; }

h1, h2, h3 {
  font-family: var(--eam-font-display);
  font-weight: 300;
  margin: 0;
  line-height: 1.08;
  letter-spacing: .01em;
}

/* Focus ring. WCAG 2.2 SC 1.4.11 wants 3:1 for a non-text indicator; the v2.0
   gold is 2.46:1 on bone, so a gold ring on these pages fails outright — it
   passed nothing under v1.0 either, but it is worse now. These pages are bone,
   so the ring is oxblood (13.42:1). The masthead and footer are dark grounds and
   take gold back, where it measures 5.46:1 and 5.61:1. Keyboard users are the
   only people who ever see this; it is not a place to be decorative. */
:focus-visible { outline: 2px solid var(--eam-oxblood); outline-offset: 4px; }
.mast :focus-visible, .pfoot :focus-visible { outline-color: var(--eam-aurum); }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 28px; }

.proof {
  font-family: var(--eam-font-proof);
  font-size: 11px;
  letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
}

/* The signed wordmark, in bone on the oxblood masthead. Replaced a mono caption
   that spelled the house name out in text — these pages had no mark at all. */
.mast-mark { width: 168px; height: auto; opacity: .92; margin-bottom: 6px; }

/* ── masthead ──────────────────────────────────────────────────────────── */
.mast {
  background: var(--eam-oxblood);
  color: var(--eam-bone);
  padding: 56px 0 52px;
  position: relative;
}
.mast::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--eam-aurum); opacity: .55;
}
.mast .proof { color: var(--eam-aurum); }   /* on oxblood — 5.46:1, passes */
.mast h1 { font-size: clamp(34px, 6vw, 58px); margin: 16px 0 0; }
.mast .lede { max-width: 58ch; margin: 18px 0 0; color: var(--eam-alabaster); font-size: 15.5px; }
.mast .back { display: inline-block; margin-bottom: 6px; text-decoration: none; color: var(--eam-alabaster); opacity: .75; font-size: 12px; }
.mast .back:hover { opacity: 1; }

/* ── body ──────────────────────────────────────────────────────────────── */
main { padding: 8px 0 20px; }

h2 {
  font-size: 27px; color: var(--eam-oxblood);
  margin: 52px 0 4px; padding-top: 26px;
  border-top: 1px solid rgba(46,36,31,.16);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-family: var(--eam-font-body); font-weight: 500; font-size: 15px;
     color: var(--eam-oxblood); margin: 26px 0 6px; letter-spacing: 0; }

p  { margin: 0 0 15px; max-width: 66ch; }
ul { margin: 0 0 16px; padding-left: 20px; max-width: 64ch; }
li { margin-bottom: 8px; }

.updated {
  font-family: var(--eam-font-proof); font-size: 10.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  color: rgba(46,36,31,.55); margin: 30px 0 0;
}

/* A stated commitment, set apart so it can be found at a glance. */
.term {
  background: var(--eam-alabaster);
  border-left: 2px solid var(--eam-aurum);
  padding: 20px 24px; margin: 22px 0;
}
.term p:last-child { margin-bottom: 0; }
.term .proof { display: block; color: var(--eam-oxblood); opacity: .7; margin-bottom: 8px; }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 12px 14px 12px 0;
         border-bottom: 1px solid rgba(46,36,31,.14); vertical-align: top; }
th { font-family: var(--eam-font-proof); font-size: 10px;
     letter-spacing: var(--eam-track-proof); text-transform: uppercase;
     font-weight: 400; color: rgba(46,36,31,.6); }

/* PLACEHOLDER — must never reach production. Loud on purpose.
   Any page still containing .todo is not deployable. */
.todo {
  background: #FFF3C4; color: #6B4E00;
  border: 1px dashed #B08900; padding: 2px 7px;
  font-family: var(--eam-font-proof); font-size: 12px;
  letter-spacing: .06em;
}

/* ── footer ────────────────────────────────────────────────────────────── */
.pfoot {
  background: var(--eam-espresso); color: var(--eam-alabaster);
  margin-top: 72px; padding: 46px 0 40px;
}
.pfoot .proof { color: var(--eam-aurum); }  /* on espresso — 5.61:1, passes */
.pfoot nav { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pfoot nav a {
  color: var(--eam-alabaster); text-decoration: none;
  font-family: var(--eam-font-proof); font-size: 10.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .82; border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.pfoot nav a:hover { opacity: 1; border-bottom-color: var(--eam-aurum); }
.pfoot .legal { margin: 26px 0 0; font-size: 13px; opacity: .6; max-width: 62ch; }

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .mast { padding: 40px 0 36px; }
  h2 { font-size: 23px; margin-top: 42px; }
  table, th, td { display: block; width: 100%; }
  th { border: 0; padding-bottom: 2px; }
  td { padding-top: 0; }
}