/* ==========================================================================
   Zero Degree Alchemy — homepage (light)
   Scoped to the homepage only. Other pages continue to use style.css.
   ========================================================================== */

:root {
  --paper:      #f7f4ee;  /* page ground — warm, never pure white */
  --paper-deep: #ece4d6;  /* raised surfaces, wells, dividers */
  --ink:        #1c1815;  /* body text — warm near-black */
  --ink-soft:   #5a5148;  /* secondary text */
  --gold:       #79601f;  /* accent at text sizes — clears AA on paper (>4.5:1) */
  --gold-lit:   #c9a24b;  /* accent at display sizes and fills */
  --gold-pale:  #e3d3ac;  /* hairlines, passed ticks */

  /* Three faces, one job each.
     Instrument Serif carries every display moment: high contrast, sharp
     italic, dramatic at size and restrained everywhere else.
     IBM Plex Mono appears only small, as literal instrument marking on
     the dial, the degree readouts and the labels.
     Inter is the quiet contemporary voice for anything read at speed. */
  --display: "Cormorant Garamond", "Instrument Serif", Georgia, serif;
  --mark:    "IBM Plex Mono", ui-monospace, monospace;
  --util:    "Inter", system-ui, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --spine:  clamp(3.5rem, 7vw, 6.5rem);

  /* Swap this one value to change the hero photograph. */
  --hero-image: url("/assets/zero-degree-alchemy/home-mountain-hero.png");
}

*, *::before, *::after { box-sizing: border-box; }

/* Any element setting an explicit `display` would otherwise defeat the
   browser default for [hidden]. Enforce it once, globally. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.zda-home {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--util);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* --- instrument marking: the small tracked mono used for all labels ------- */
.mark {
  font-family: var(--mark);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  position: fixed;
  inset: 0 var(--spine) auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem var(--gutter);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease;
}

/* Once the hero is behind us the bar needs its own ground, or headings
   scroll straight through it. */
.masthead[data-scrolled="true"] {
  padding-block: 1rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-pale);
}

.masthead__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.masthead__wordmark .mark { font-size: 0.75rem; letter-spacing: 0.3em; }
.masthead__glyph { color: var(--gold-lit); font-size: 0.8rem; line-height: 1; }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.masthead__nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--util);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); }

/* ==========================================================================
   The degree spine — the signature element
   ========================================================================== */
.spine {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 55;
  width: var(--spine);
  display: grid;
  place-items: center;
  pointer-events: none;
  border-left: 1px solid var(--gold-pale);
  background: linear-gradient(to left, color-mix(in srgb, var(--paper) 55%, transparent), transparent);
}

.spine__dial { width: 78%; max-width: 92px; display: block; }
.spine__ring { transform-origin: 50% 50%; transition: transform 0.35s cubic-bezier(.22,.61,.36,1); }

.spine__tick   { stroke: var(--gold); stroke-width: 1.1; opacity: 0.6; }
.spine__tick--passed { stroke: var(--gold-pale); opacity: 0.9; }
.spine__tick--major  { stroke-width: 1.6; opacity: 0.95; }

.spine__readout {
  position: absolute;
  font-family: var(--mark);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.spine__label {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  writing-mode: vertical-rl;
  font-family: var(--mark);
  font-size: 0.5625rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 70%, transparent);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vh, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.25rem, 2.5vh, 2rem);
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
}

/* Warm paper wash — keeps ink text readable over the bright mountain */
.hero__wash {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(247, 244, 238, 0.5) 0%,
    rgba(247, 244, 238, 0.28) 40%,
    rgba(247, 244, 238, 0.82) 100%);
}

/* Layer 1 — the sky. Sits furthest back. */
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center center;
  filter: saturate(1.02) contrast(1.04);
  transform: scale(1.04);
  animation: hero-drift 30s ease-out forwards;
}

@keyframes hero-drift {
  from { transform: scale(1.1); }
  to   { transform: scale(1.01); }
}

/* .hero__ridge intentionally hidden — the centered layout uses .hero__wash
   for text legibility instead of the masked ridgeline over the type. */
.hero__ridge { display: none; }

.hero__arc {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--gold);
}

.hero__colossus {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.75rem, 10vw, 12rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hero__colossus em {
  display: block;
  font-style: italic;
  color: var(--gold);
}

/* Layer 4 — readable content, above everything. The cloud bank is busy and
   bright, so the copy gets its own ground rather than relying on shadow. */
.hero__base {
  position: relative;
  z-index: 3;
  max-width: 46rem;
  margin: 0 auto;
  width: 100%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--paper) 26%, transparent) 40%,
    color-mix(in srgb, var(--paper) 62%, transparent) 74%,
    color-mix(in srgb, var(--paper) 92%, transparent) 100%);
}

.hero__stand {
  margin: 0 auto;
  max-width: 40ch;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.25;
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
}

.hero__systems {
  position: relative;
  z-index: 2;
  margin: 0.25rem auto 0;
  font-size: 0.8125rem;
  letter-spacing: 0.3em;
  color: var(--gold);
}

/* ==========================================================================
   The decoder — the page's single job
   ========================================================================== */
.decoder { margin: clamp(1.75rem, 4.5vh, 3rem) auto 0; max-width: 33rem; }

.decoder__label {
  display: block;
  color: var(--gold);
  margin-bottom: 0.7rem;
  text-align: center;
}

.decoder__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  justify-content: center;
}

.decoder__field {
  flex: 1 1 13rem;
  min-width: 0;
  background: color-mix(in srgb, var(--paper) 82%, white);
  border: 1px solid var(--gold-lit);
  color: var(--ink);
  font-family: var(--util);
  font-size: 1rem;
  padding: 0.95rem 1.05rem;
  border-radius: 2px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.decoder__field::-webkit-calendar-picker-indicator { opacity: 0.65; cursor: pointer; }
.decoder__field:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-lit) 26%, transparent);
}

.decoder__submit {
  flex: 0 0 auto;
  background: var(--gold-lit);
  color: #2a2010;
  border: 1px solid var(--gold-lit);
  border-radius: 2px;
  padding: 0.95rem 1.6rem;
  cursor: pointer;
  font-family: var(--mark);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.decoder__submit:hover,
.decoder__submit:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }

.decoder__note {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* Result */
.decoder__result {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--gold-pale);
  border-left-width: 2px;
  border-left-color: var(--gold-lit);
  background: color-mix(in srgb, var(--paper-deep) 62%, white);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.22,.61,.36,1);
}
.decoder__result[data-open="true"] { opacity: 1; transform: none; }

.decoder__number {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 4.75rem);
  line-height: 1;
  color: var(--gold);
  margin: 0.35rem 0 0.5rem;
  font-variant-numeric: lining-nums;
}
.decoder__master {
  display: inline-block;
  margin-left: 0.75rem;
  vertical-align: middle;
  color: var(--ink-soft);
}
.decoder__onward {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-pale);
  padding-bottom: 2px;
  font-size: 0.9375rem;
}
.decoder__onward:hover { border-bottom-color: var(--gold); }

.decoder__error {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  color: #9c3128;
}

/* ==========================================================================
   60° — Strata. Deliberately quieter than the hero: the rhythm alternates
   between a moment and a breath. Motion here is a single reveal, nothing more.
   ========================================================================== */
.strata {
  padding: clamp(5rem, 14vh, 9rem) calc(var(--spine) + var(--gutter)) clamp(5rem, 14vh, 9rem) var(--gutter);
  max-width: 74rem;
}

.strata__head { max-width: 30ch; }

.strata__degree {
  color: var(--gold);
  margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
}

.strata__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.strata__title em {
  display: block;
  font-style: normal;
  color: var(--gold);
}

.strata__list {
  list-style: none;
  margin: clamp(2.5rem, 7vh, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-block: 1px solid var(--gold-pale);
}

/* Hairlines belong to the items, not to a coloured parent showing through
   the gaps. While an item is mid-reveal it is partly transparent, and a
   tinted parent reads as a solid block behind it. */
.stratum + .stratum { border-top: 1px solid var(--gold-pale); }

@media (min-width: 900px) {
  .strata__list { grid-template-columns: repeat(3, 1fr); }
  .stratum + .stratum { border-top: 0; border-left: 1px solid var(--gold-pale); }
}

.stratum {
  background: var(--paper);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.stratum[data-revealed="true"] { opacity: 1; transform: none; }
.stratum:nth-child(2) { transition-delay: 0.1s; }
.stratum:nth-child(3) { transition-delay: 0.2s; }

.stratum__depth {
  display: block;
  font-size: 0.5625rem;
  color: var(--gold-lit);
  margin-bottom: 1.1rem;
}

.stratum__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  margin: 0 0 0.7rem;
  color: var(--gold);
}

.stratum__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ==========================================================================
   Axiom — the teaching section.
   Sits on the ink ground so the page has one dark band at its centre: the
   argument is the serious part, and it should feel like a different room
   from the sales floor either side of it.
   ========================================================================== */
.axiom {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(5rem, 13vh, 8rem) calc(var(--spine) + var(--gutter)) clamp(5rem, 13vh, 8rem) var(--gutter);
}

.axiom__degree { color: var(--gold-lit); margin: 0 0 1.75rem; }

.axiom__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 2rem;
  color: var(--paper);
}

.axiom__title em {
  display: block;
  font-style: italic;
  color: var(--gold-lit);
}

.axiom__lede {
  font-family: var(--util);
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.8;
  color: #b9b0a4;
  max-width: 58ch;
  margin: 0 0 1.25rem;
}

.axiom__lede strong { color: var(--paper); font-weight: 400; }

/* The loop. Numbered because the order carries the argument: reverse it and
   the meaning inverts from method into fatalism. The rule between stages is
   drawn only between them, never trailing off the last one. */
.loop {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  counter-reset: stage;
  max-width: 60ch;
}

.loop__stage {
  position: relative;
  counter-increment: stage;
  padding: 0 0 2.5rem 4rem;
}

.loop__stage::before {
  content: counter(stage, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.2rem;
  font-family: var(--mark);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gold-lit);
}

.loop__stage:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 1.7rem;
  bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.5), rgba(201, 162, 75, 0.06));
}

.loop__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: var(--paper);
}

.loop__body {
  font-family: var(--util);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #a89f94;
  margin: 0;
}

/* The turn: the one line the whole section exists to deliver. */
.axiom__turn {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.5;
  color: var(--gold-lit);
  max-width: 34ch;
  margin: 1rem 0 2.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(201, 162, 75, 0.35);
}

.axiom__onward {
  font-family: var(--mark);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lit);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, 0.35);
  padding-bottom: 0.35rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.axiom__onward:hover,
.axiom__onward:focus-visible { color: var(--paper); border-bottom-color: var(--paper); }

/* ==========================================================================
   Summons — the closing ask.
   Set on the deep paper so it reads as a distinct surface from the strata
   above it, and centred, because it asks for exactly one thing.
   ========================================================================== */
.summons {
  background: var(--paper-deep);
  border-top: 1px solid var(--gold-pale);
  padding: clamp(4.5rem, 12vh, 7.5rem) calc(var(--spine) + var(--gutter)) clamp(4.5rem, 12vh, 7.5rem) var(--gutter);
  text-align: center;
}

.summons__degree {
  color: var(--gold);
  margin: 0 0 1.5rem;
}

.summons__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  margin: 0 auto 1.6rem;
  max-width: 18ch;
  color: var(--ink);
}

.summons__title em {
  display: block;
  font-style: italic;
  color: var(--gold);
}

.summons__body {
  font-family: var(--util);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 auto 2.25rem;
}

.summons__action {
  display: inline-block;
  background: var(--gold-lit);
  color: #2a2010;
  border: 1px solid var(--gold-lit);
  border-radius: 2px;
  padding: 1rem 2.25rem;
  text-decoration: none;
  font-family: var(--mark);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.summons__action:hover,
.summons__action:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }

.summons__note {
  font-family: var(--util);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 1.25rem 0 0;
}

/* ==========================================================================
   Colophon
   ========================================================================== */
.colophon {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2.75rem, 6vh, 4rem) calc(var(--spine) + var(--gutter)) clamp(2.25rem, 5vh, 3rem) var(--gutter);
}

.colophon__tagline {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  color: var(--gold-lit);
  margin: 0 0 2.5rem;
}

.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(227, 211, 172, 0.18);
}

.colophon__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--paper);
  text-decoration: none;
}

.colophon__glyph { color: var(--gold-lit); font-size: 0.8rem; }

.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.colophon__nav a {
  color: var(--paper-deep);
  text-decoration: none;
  font-family: var(--util);
  font-size: 0.8125rem;
  border-bottom: 1px solid transparent;
  padding-block: 0.2rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.colophon__nav a:hover,
.colophon__nav a:focus-visible { color: var(--gold-lit); border-bottom-color: var(--gold-lit); }

.colophon__fine {
  font-family: var(--util);
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(247, 244, 238, 0.55);
  margin: 1.5rem 0 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  :root { --spine: 2.75rem; }
  .masthead__nav { gap: 0.9rem; }
  .masthead__nav a { font-size: 0.75rem; }
  .spine__label { display: none; }
}

@media (max-width: 620px) {
  .masthead { padding-inline: var(--gutter); }
  .masthead__nav { display: none; }
  .hero { justify-content: flex-end; padding-bottom: 2.5rem; }
  .hero__colossus { font-size: clamp(2.75rem, 19vw, 6rem); }
  .decoder__submit { flex: 1 1 100%; }
  .summons__action { display: block; }
  .loop__stage { padding-left: 3rem; }
  .axiom__turn { padding-left: 1rem; }
  .colophon__tagline {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  color: var(--gold-lit);
  margin: 0 0 2.5rem;
}

.colophon__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Quality floor
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__sky, .hero__ridge { animation: none; transform: scale(1.01); }
  .spine__ring { transition: none; }
}

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

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

/* ==========================================================================
   Homepage: value row, Foundation panel, closing quote.
   Uses the site's own tokens. The navy panel is the one dark moment on the
   page, and it is dark on purpose: it is a door into the Foundation page.
   ========================================================================== */

/* --- the quiet divider under the hero heading ---------------------------- */
.hero__divider {
  display: flex; align-items: center; gap: 12px;
  width: min(220px, 60%); margin: 26px 0 4px; color: var(--gold-lit);
}
.hero__divider::before,
.hero__divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-pale), transparent);
}

/* --- four brand values --------------------------------------------------- */
.values {
  background: var(--paper);
  padding: clamp(60px, 9vw, 90px) var(--gutter) clamp(70px, 11vw, 110px);
}
.values__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1180px; margin: 0 auto;
}
@media (min-width: 900px) {
  .values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.value {
  text-align: center; padding: 8px clamp(14px, 2.4vw, 30px) 22px;
}
@media (min-width: 900px) {
  .value + .value { border-left: 1px solid var(--gold-pale); }
}
.value__icon { color: var(--gold-lit); margin-bottom: 20px; }
.value__name {
  font-family: var(--mark); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 12px;
}
.value__body {
  font-family: var(--util); font-weight: 300; font-size: 1rem;
  line-height: 1.55; color: var(--ink); margin: 0; max-width: 24ch;
  margin-inline: auto;
}

/* --- the Foundation door ------------------------------------------------- */
.door-wrap { background: var(--paper); padding: 0 var(--gutter); }
.door {
  position: relative; max-width: 1180px; margin: 0 auto;
  background: #07101e; color: #f5efe5;
  border: 1px solid rgba(193, 153, 71, .75);
  border-radius: 30px;
  padding: clamp(24px, 2.6vw, 40px);
  display: grid; gap: clamp(20px, 3vw, 44px); align-items: center;
  overflow: hidden;
}
@media (min-width: 900px) { .door { grid-template-columns: .85fr 1.15fr; } }

.door__eyebrow {
  font-family: var(--mark); font-size: 0.6875rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-lit); margin: 0 0 20px;
}
.door__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1;
  color: #f7f2e8; margin: 0 0 12px;
}
.door__body {
  font-family: var(--util); font-weight: 300; font-size: 1rem;
  line-height: 1.6; color: #d8d0c3; margin: 0 0 18px; max-width: 34ch;
}
.door__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--util); font-size: 1rem; color: #d1ad5c;
  text-decoration: none; padding-bottom: 6px;
  border-bottom: 1px solid rgba(209, 173, 92, .5);
  transition: gap .25s ease, border-color .25s ease, color .25s ease;
}
.door__link:hover, .door__link:focus-visible {
  gap: 18px; color: #e6ca8a; border-bottom-color: #d1ad5c;
}
.door__art { display: grid; place-items: center; color: #c79f45; }
.door__art svg { width: 100%; max-width: 460px; height: auto; }

/* --- closing quote ------------------------------------------------------- */
.coda {
  background: var(--paper); text-align: center;
  padding: clamp(60px, 9vw, 100px) var(--gutter) clamp(70px, 11vw, 120px);
}
.coda__mark {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: min(300px, 70%); margin: 0 auto 30px; color: var(--gold-lit);
}
.coda__mark::before, .coda__mark::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-pale), transparent);
}
.coda__quote {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.5;
  color: var(--ink-soft); max-width: 700px; margin: 0 auto;
}

/* The artwork is a true transparent PNG. It needs no blend mode and no
   background fill; it simply sits on the navy. */
/* The artwork is portrait (1024x1536). Constraining by width alone made it
   ~870px tall and stretched the whole panel, so bound the height instead. */
.door__art img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 210px;
  object-fit: contain; margin-inline: auto;
}
@media (max-width: 760px) { .door__art img { max-width: 420px; } }