/* ============================================================================
   TRUTERAX - Landing sheet · "ATELIER"
   A cream monograph: editorial spine, hairline rules, Fraunces headlines.
   Self-contained: loads alongside /css/reset.css only. variables.css is
   deliberately NOT loaded - it is a dark token set ending in
   `color-scheme: dark`, which would darken native controls on cream paper.
   This is the live landing sheet: comp 2 was promoted to public/index.html on 23 Aug 2026.
   ========================================================================== */

/* The hidden attribute must win. `.drawer { display: grid }` below is an author
   rule, and author rules beat the browser's `[hidden] { display: none }` - which
   left the mobile drawer permanently open inside the sticky header, pinning a
   ~700px menu over the page. */
[hidden] { display: none !important; }

/* Anchor targets clear the sticky masthead instead of landing under it. */
section { scroll-margin-top: 5.5rem; }

:root {
  /* Paper */
  --paper:       #F3EDE2;
  --paper-deep:  #EBE3D4;   /* tinted section bands */
  --paper-foot:  #E5DCCB;   /* footer, one shade deeper again */
  --mat:         #FBF7EF;   /* the mount around a plate - lighter than paper */

  /* Ink */
  --ink:         #1C1610;   /* headings + body          - >7:1 on paper   */
  --ink-soft:    #5C5348;   /* secondary prose          - 6.1:1 on paper  */
  --ink-faint:   #6E655A;   /* placeholders, fine print - 4.6:1 on paper  */

  /* Gold. #B0893E measures 2.78:1 on #F3EDE2, so it fails even the 3:1 bar for
     large text and UI boundaries: it is used ONLY for rules and decorative
     marks. Any gold that carries meaning uses one of the two below.
     Ratios recomputed 13 Sep 2026 - `npm run qa:contrast` derives them from
     this file, so trust the check rather than a number in a comment. */
  --gold:        #B0893E;   /* rules + decorative marks only          2.78:1 */
  --gold-mid:    #8F6D2E;   /* large display type + non-text UI  ✓ AA 4.10:1 */
  --gold-ink:    #6B4C15;   /* small gold text + links           ✓ AA 6.75:1 */

  --rule:        rgba(28, 22, 16, 0.14);
  --rule-strong: rgba(28, 22, 16, 0.26);
  /* The contact fields are borderless apart from one bottom rule, so that rule
     IS the component boundary and owes 3:1 under SC 1.4.11. --rule-strong
     composites to 1.75:1, which is what it was set to. */
  --field-rule:  rgba(28, 22, 16, 0.52);
  --gold-rule:   rgba(176, 137, 62, 0.42);
  --paper-veil:  rgba(243, 237, 226, 0.88);  /* scrolled masthead backdrop */
  --ink-deep:    #3A3025;                    /* button hover only          */
  --error:       #9B2C2C;

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --step-hero: clamp(2.9rem, 8.4vw, 6.4rem);
  --step-h2:   clamp(2rem, 4.4vw, 3.4rem);
  --step-h3:   clamp(1.3rem, 2.1vw, 1.65rem);
  --step-lead: clamp(1.08rem, 1.5vw, 1.32rem);
  --step-body: clamp(1rem, 1.05vw, 1.08rem);

  /* Measure + rhythm */
  --measure: 38rem;
  --shell:   78rem;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --leaf-y:  clamp(5rem, 12vh, 10rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

/* ── base ─────────────────────────────────────────────────────────────── */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-body);
  line-height: 1.72;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

/* Paper grain - fixed, cheap, and never interactive. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(80, 50, 20, 0.55) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}
body > * { position: relative; z-index: 1; }

html.is-locked { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

p { max-width: var(--measure); }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--wide { width: min(100%, 46rem); margin-inline: auto; }

/* ── reveals ──────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   750ms var(--ease) var(--d, 0ms),
    transform 750ms var(--ease) var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── masthead ─────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper-veil);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1.05rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  white-space: nowrap;
  margin-right: auto;
}
.wordmark__x { color: var(--gold-ink); }

.masthead__nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2.1rem); }
.masthead__nav a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.masthead__cta {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold-rule);
  padding-bottom: 0.22rem;
  white-space: nowrap;
  transition: border-color 200ms var(--ease);
}
.masthead__cta:hover { border-bottom-color: var(--gold-ink); }

.burger {
  display: none;
  width: 2.4rem; height: 2.4rem;
  position: relative;
  background: none;
  margin-left: auto;
}
.burger span {
  position: absolute;
  left: 0.45rem; right: 0.45rem;
  height: 1px;
  background: var(--ink);
  transition: transform 260ms var(--ease);
}
.burger span:first-child { top: 0.95rem; }
.burger span:last-child  { top: 1.4rem; }
.burger.is-open span:first-child { transform: translateY(0.225rem) rotate(9deg); }
.burger.is-open span:last-child  { transform: translateY(-0.225rem) rotate(-9deg); }

.drawer {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 1.4rem var(--gutter) 2.2rem;
  display: grid;
  gap: 0.25rem;
}
.drawer a {
  font-family: var(--serif);
  font-size: 1.5rem;
  padding-block: 0.62rem;
  border-bottom: 1px solid var(--rule);
}
.drawer a:last-child { border-bottom: 0; }
.drawer__cta { color: var(--gold-ink); }

/* ── opening ──────────────────────────────────────────────────────────── */

.opening {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(4.5rem, 15vh, 11rem) var(--gutter) clamp(4rem, 10vh, 7.5rem);
  text-align: center;
}

.opening__over {
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vh, 3.4rem);
}

.opening__title {
  font-size: var(--step-hero);
  letter-spacing: -0.03em;
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
  text-wrap: balance;
}

.opening__lead {
  font-size: var(--step-lead);
  color: var(--ink-soft);
  max-width: 34rem;
  margin-inline: auto;
  text-wrap: pretty;
}

/* The eye needs somewhere to land before it reaches the actions. The mark's X is
   gold, so the promise is too - #6B4C15 is 4.81:1 on paper, the only gold in the
   ramp allowed to carry text. */
.gilt { color: var(--gold-ink); }

.opening__assure {
  font-size: 0.92rem;
  color: var(--ink-faint);
  max-width: 32rem;
  margin: 1.6rem auto clamp(3.5rem, 9vh, 6rem);
  text-wrap: pretty;
}

.opening__actions {
  max-width: none;
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.2rem;
  align-items: center;
  justify-content: center;
}

.button {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 1.05rem 2.3rem;
  transition: background 240ms var(--ease);
}
.button:hover { background: var(--ink-deep); }

/* The hero's primary action. Bigger target, and an arrow that travels on hover so
   the control points at what it does rather than just sitting there. */
.button--lead {
  font-size: 0.85rem;
  padding: 1.25rem 2.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 10px 26px rgba(28, 22, 16, 0.16);
}
.button--lead:hover { box-shadow: 0 14px 32px rgba(28, 22, 16, 0.22); }
.button__mark { display: inline-block; transition: transform 240ms var(--ease); }
.button--lead:hover .button__mark,
.button--lead:focus-visible .button__mark { transform: translateX(0.35rem); }

@media (prefers-reduced-motion: reduce) {
  .button__mark { transition: none; }
  .button--lead:hover .button__mark,
  .button--lead:focus-visible .button__mark { transform: none; }
}

.quiet {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold-rule);
  padding-bottom: 0.2rem;
  transition: border-color 200ms var(--ease);
}
.quiet:hover { border-bottom-color: var(--gold-ink); }

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem clamp(1.4rem, 4vw, 3rem);
  margin-top: 1.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.colophon li { position: relative; }
.colophon li + li::before {
  content: "";
  position: absolute;
  left: clamp(-0.8rem, -2vw, -1.5rem);
  top: 0.55em;
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
}

/* ── leaf (section) ───────────────────────────────────────────────────── */

.leaf {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--leaf-y) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}

.leaf--tinted {
  max-width: none;
  background: var(--paper-deep);
  border-block: 1px solid var(--rule);
  padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

.leaf__spine { position: sticky; top: 7.5rem; }

.numeral {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--gold-mid);
  letter-spacing: 0.02em;
}

.marginal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gold-rule);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 13rem;
}

.leaf__title { font-size: var(--step-h2); margin-bottom: 1.6rem; text-wrap: balance; }

.leaf__intro {
  font-size: var(--step-lead);
  color: var(--ink-soft);
  max-width: 36rem;
  text-wrap: pretty;
}

/* ── 01 entries ───────────────────────────────────────────────────────── */

.entries { margin-top: clamp(2.5rem, 6vh, 4rem); }

.entry {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: clamp(2rem, 4vh, 2.9rem);
  border-top: 1px solid var(--rule);
}
.entry:last-child { border-bottom: 1px solid var(--rule); }

.entry__index {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
  padding-top: 0.42rem;
}

.entry h3 { font-size: var(--step-h3); margin-bottom: 0.72rem; }
.entry p { color: var(--ink-soft); }

.entry__gets {
  margin-top: 0.9rem;
  font-size: 0.83rem;
  color: var(--ink);
  border-left: 1px solid var(--gold-rule);
  padding-left: 0.95rem;
}

/* ── 02 promises ──────────────────────────────────────────────────────── */

.pull {
  margin: clamp(2.2rem, 5vh, 3.4rem) 0;
  padding-left: clamp(1.1rem, 2.5vw, 2rem);
  border-left: 2px solid var(--gold);
}
.pull p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 26rem;
  text-wrap: balance;
}

.promises { margin-top: clamp(2.5rem, 6vh, 3.8rem); display: grid; }
.promise {
  padding-block: clamp(1.6rem, 3.4vh, 2.3rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.4rem 2.5rem;
  align-items: baseline;
}
.promise:last-child { border-bottom: 1px solid var(--rule); }
.promise dt { font-family: var(--serif); font-size: 1.16rem; }
.promise dd { color: var(--ink-soft); max-width: var(--measure); }

/* ── 03 ladder ────────────────────────────────────────────────────────── */

.ladder {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  border-top: 1px solid var(--rule-strong);
  padding-top: 1.6rem;
}
.step__no {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--gold-mid);
  margin-bottom: 0.85rem;
}
.step h3 { font-size: 1.16rem; margin-bottom: 0.55rem; }
.step p { font-size: 0.94rem; color: var(--ink-soft); }

/* ── 04 plates ────────────────────────────────────────────────────────── */

/* The plates span both grid columns, so they scroll underneath the sticky spine and
   the numeral ends up painted on top of the artwork. Inside the work section the spine
   scrolls away with the content instead. */
#plates .leaf__spine { position: static; }

.plates {
  grid-column: 1 / -1;
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  gap: clamp(3.5rem, 9vh, 7rem);
}

.plate {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--rule);
}
.plate:first-child { border-top: 0; padding-top: 0; }
.plate:nth-child(even) .plate__figure { order: 2; }
/* the figure moving to the end also moves it into the 1fr column, so mirror the
   track widths - otherwise the even plate renders at ~2.5x the odd ones */
.plate:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }

.mount {
  background: var(--mat);
  padding: clamp(0.85rem, 2vw, 1.5rem);
  border: 1px solid var(--gold-rule);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 44px -26px rgba(80, 50, 20, 0.55);
}
/* <picture> is inline by default, which would leave a baseline gap under the
   plate. Nothing is cropped: height:auto keeps the intrinsic ratio - there is
   deliberately no object-fit anywhere in this repo. */
.mount picture { display: block; }
.mount img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-strong);
}

.label { margin-top: 1.1rem; display: grid; gap: 0.22rem; text-align: center; }
.label__plate {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.label__name { font-family: var(--serif); font-size: 1.05rem; }
.label__meta { font-size: 0.78rem; color: var(--ink-soft); }

.plate__text h3 { font-size: var(--step-h3); margin-bottom: 1rem; text-wrap: balance; }
.plate__text p { color: var(--ink-soft); margin-bottom: 0.9rem; }

.plate__link { margin-top: 1.4rem; margin-bottom: 0; }
.plate__link a {
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold-rule);
  padding-bottom: 0.22rem;
  transition: border-color 200ms var(--ease);
}
.plate__link a:hover { border-bottom-color: var(--gold-ink); }

/* ── 05 letter ────────────────────────────────────────────────────────── */

.letter { margin-top: 0.6rem; }
.letter p {
  font-size: var(--step-lead);
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
  max-width: 36rem;
  text-wrap: pretty;
}
.letter p:first-child::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--ink);
}

.signature { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin-top: 2rem; }
.signature__role {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

.card-address {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--gold-rule);
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.card-address strong {
  display: block;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

/* ── 06 questions ─────────────────────────────────────────────────────── */

.faq { margin-top: clamp(2.2rem, 5vh, 3.4rem); }
.qa { border-top: 1px solid var(--rule); }
.qa:last-child { border-bottom: 1px solid var(--rule); }

.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding-block: clamp(1.15rem, 2.6vh, 1.6rem);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.34rem);
  line-height: 1.3;
  transition: color 200ms var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary span { flex: 1; min-width: 0; }
.qa summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--gold-ink);
  flex: none;
}
.qa[open] summary::after { content: "–"; }
.qa summary:hover { color: var(--gold-ink); }

.qa__body { padding-bottom: 1.6rem; }
.qa__body p { color: var(--ink-soft); }
.qa__body p + p { margin-top: 0.85rem; }

/* ── 07 quote ─────────────────────────────────────────────────────────── */

.leaf--quote { padding-bottom: clamp(5rem, 12vh, 9rem); }

.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.quote-intro p { color: var(--ink-soft); margin-bottom: 0.9rem; }

.direct { margin-top: 2rem; display: grid; }
.direct li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: baseline;
  padding-block: 0.7rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}
.direct li:last-child { border-bottom: 1px solid var(--rule); }
.direct span {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.direct a {
  color: var(--gold-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.direct a:hover { border-bottom-color: var(--gold-rule); }

/* form */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.8rem;
  max-width: 40rem;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.field { margin: 0; max-width: none; display: grid; gap: 0.4rem; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field label span { color: var(--gold-ink); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field-rule);
  padding: 0.55rem 0.1rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 220ms var(--ease);
}
.field textarea { resize: vertical; line-height: 1.65; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-ink) 50%),
                    linear-gradient(135deg, var(--gold-ink) 50%, transparent 50%);
  background-position: right 0.55rem center, right 0.25rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.6rem;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-bottom-color: var(--gold-mid); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--gold-ink);
  box-shadow: 0 1px 0 0 var(--gold-ink);
}

.form-error { font-size: 0.78rem; color: var(--error); }
.form-error:empty { display: none; }

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.consent input {
  width: 1.05rem; height: 1.05rem;
  margin-top: 0.28rem;
  accent-color: var(--gold-ink);
}
.consent a { color: var(--gold-ink); border-bottom: 1px solid var(--gold-rule); }
/* The consent label is a two-column grid; its error line belongs under the text. */
.consent .form-error { grid-column: 2; }

.button--submit { justify-self: start; border: 0; font-family: var(--sans); }
.form-status { font-size: 0.88rem; color: var(--ink-soft); }

/* ── footer ───────────────────────────────────────────────────────────── */

.colophon-foot {
  background: var(--paper-foot);
  border-top: 1px solid var(--rule-strong);
  padding: clamp(3.5rem, 8vh, 5.5rem) var(--gutter) 2.5rem;
}
.colophon-foot__inner {
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.wordmark--foot { font-size: 1.05rem; margin-bottom: 1rem; max-width: none; }

.foot-line { color: var(--ink-soft); font-size: 0.9rem; max-width: 22rem; margin-bottom: 1.5rem; }

.foot-address { font-style: normal; font-size: 0.84rem; line-height: 1.8; color: var(--ink-soft); }
.foot-address strong {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.foot-address a { color: var(--gold-ink); }

.foot-col h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gold-rule);
}
.foot-col li + li { margin-top: 0.55rem; }
.foot-col a {
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.foot-col a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.foot-base {
  max-width: var(--shell);
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 62rem) {
  .leaf { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .leaf__spine { position: static; display: flex; align-items: baseline; gap: 1.4rem; }
  .numeral { font-size: 2.2rem; }
  .marginal {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--gold-rule);
    padding-left: 1.1rem;
    max-width: 24rem;
  }
  .promise { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.8rem; }
  .plate { grid-template-columns: minmax(0, 1fr); gap: 2rem; justify-items: start; }
  .plate:nth-child(even) .plate__figure { order: 0; }
  .plate:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .plate__figure { max-width: 19rem; }
  .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .colophon-foot__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .masthead__nav, .masthead__cta { display: none; }
  .burger { display: block; }
  .wordmark { margin-right: 0; }
  .ladder { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; border-top: 0; }
  .step {
    border-top: 1px solid var(--rule);
    padding-block: 1.5rem;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 1.2rem;
  }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .step__no { grid-row: 1 / span 2; margin-bottom: 0; font-size: 1.6rem; }
  .entry { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 1rem; }
  .form { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .plate__figure { max-width: 100%; }
  .colophon-foot__inner { grid-template-columns: minmax(0, 1fr); }
  .foot-base { justify-content: flex-start; }
  .letter p:first-child::first-letter { font-size: 3em; }
}

@media (max-width: 30rem) {
  .direct li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .opening__actions { flex-direction: column; align-items: stretch; }
  .button { text-align: center; }
}

/* ── reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── form states ──────────────────────────────────────────────────────────
   js/form.js drives these: .has-error on the field wrapper, .is-ok/.is-bad on
   the status line, .is-loading/.is-success on the submit button. Without them
   validation happens silently and the page looks broken but blameless.        */

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom-color: var(--error); }

.field.has-error label,
.consent.has-error > span { color: var(--error); }

.form-status.is-ok  { color: var(--ink); border-left: 2px solid var(--gold); padding-left: 0.75rem; }
.form-status.is-bad { color: var(--error); border-left: 2px solid var(--error); padding-left: 0.75rem; }

.button[disabled] { cursor: default; opacity: 0.72; }
.button.is-loading { background: var(--ink-soft); }
.button.is-success { background: var(--gold-ink); }

/* Turnstile sits on cream, so it gets the paper margin rather than a card. */
.cf-turnstile { margin: 0.25rem 0 0.5rem; min-height: 65px; }

/* ── cookie notice ────────────────────────────────────────────────────────
   Ported from the retired landing sheet and retinted: paper card, gold rule.  */

.cookie-banner {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9500;
  max-width: 24rem;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid var(--gold-rule);
  background: var(--mat);
  box-shadow: 0 10px 30px rgba(28, 22, 16, 0.14);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.cookie-banner.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie-banner__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.cookie-banner__text { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--ink-soft); }
.cookie-banner__text a { color: var(--gold-ink); border-bottom: 1px solid var(--gold-rule); }
.cookie-banner__actions { display: flex; gap: 0.5rem; }
.cookie-banner__actions .button { padding: 0.55rem 1.4rem; }

@media (max-width: 30rem) {
  .cookie-banner { right: 0.75rem; left: 0.75rem; max-width: none; }
}