/* ═══════════════════════════════════════════════════════════════════
   START DOORS — "The Threshold" (shared by the six door pages)
   Redesign 2026-08-12: each door opens inside the same photograph the
   visitor clicked on start-here.html — full-bleed hero with a forest
   scrim — and every prose block below hangs on one 110px gutter spine.
   Design Bible: brand-guidelines/DESIGN-BIBLE.md (no gold, no-line rule,
   2px buttons ≥48px, serif-400 headings, sharp-edged prints).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --forest: #001a0e;
  --forest-dark: #132f21;
  --forest-mid: #0d2518;
  --accent: #486554;
  --accent-bright: #aeceb9;
  --accent-soft: rgba(72, 101, 84, 0.12);
  --accent-medium: rgba(72, 101, 84, 0.25);
  --linen: #faf9f6;
  --cream: #fdfbf7;
  --espresso: #1a1c1a;
  --ink-soft: #424843;
  --secondary: #5f5e5e;
  /* MYM-312 A-4b: darkened from #727973 (4.25:1 on --linen) to clear AA. */
  --outline: #5f6b61;
  --outline-variant: #c2c8c2;
  --surface-dim: #efeeeb;
  --surface-container: #f0eeeb;
  --surface-highest: #e9e8e5;
  --f-serif: 'Noto Serif', Georgia, serif;
  --f-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-ui: 'Plus Jakarta Sans', var(--f-sans);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.3s;
  --duration-slow: 0.5s;
  /* the shared text spine: gutter + gap */
  --door-gutter: 110px;
  --door-gutter-gap: 32px;
}

/* Layout containers */
.door-container { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.door-container-reading { max-width: 960px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 767px) {
  .door-container, .door-container-reading { padding: 0 24px; }
}

/* Full-bleed hero sits flush under the fixed nav */
.door-page main { padding-top: 73px; }
@media (min-width: 768px) { .door-page main { padding-top: 81px; } }

/* Shared overline voice */
.door-overline {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* ── Hero — the threshold ── */
.door-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--forest);
}
.door-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) brightness(0.92);
}
.door-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 26, 14, 0.90) 0%,
    rgba(0, 26, 14, 0.48) 38%,
    rgba(0, 26, 14, 0.10) 68%,
    rgba(0, 26, 14, 0) 100%
  );
}
.door-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 48px 72px;
}
@media (max-width: 767px) { .door-hero-content { padding: 48px 24px 56px; } }
.door-hero .door-breadcrumb {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.65);
  margin-bottom: 36px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.door-hero .door-breadcrumb a {
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(174, 206, 185, 0.4);
  padding-bottom: 2px;
  transition: border-color var(--duration) var(--ease-out);
}
.door-hero .door-breadcrumb a:hover { border-bottom-color: var(--accent-bright); }
.door-no {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent-bright);
  display: block;
  margin-bottom: 16px;
}
.door-hero h1 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--linen);
  max-width: 860px;
  margin: 0 0 24px;
}
.door-hero h1 em { font-style: italic; }
.door-hero .lead {
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.65;
  color: rgba(250, 249, 246, 0.85);
  max-width: 680px;
  margin: 0;
}

/* ── Intro measure — first stop on the text spine ── */
.door-intro { padding-top: 80px; padding-bottom: 8px; }
.door-intro-grid {
  display: grid;
  grid-template-columns: var(--door-gutter) 1fr;
  gap: var(--door-gutter-gap);
  align-items: start;
}
@media (max-width: 767px) { .door-intro-grid { grid-template-columns: 1fr; gap: 10px; } }
.door-intro-label {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 8px;
}
.door-intro p {
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0;
}

/* ── Triage band — the one thing ── */
.door-triage { padding-top: 88px; padding-bottom: 104px; }
.door-triage-card {
  background: var(--forest);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  padding: 72px 64px;
  align-items: center;
}
.door-triage-card.no-sheet { grid-template-columns: 1fr; }
@media (max-width: 1023px) {
  .door-triage-card { grid-template-columns: 1fr; padding: 48px 32px; }
}
.door-triage-label {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 20px;
}
.door-triage-card h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  color: var(--linen);
  margin: 0 0 20px;
}
.door-triage-card h2 em { font-style: italic; color: var(--accent-bright); }
.door-triage-card > div > p,
.door-triage-copy > p {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(250, 249, 246, 0.75);
  max-width: 580px;
  margin: 0 0 36px;
}
.door-triage-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-light,
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 28px;
  height: 52px;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.15s var(--ease-out);
}
.btn-light { background: var(--cream); color: var(--forest); }
.btn-ghost-light { border: 1px solid rgba(250, 249, 246, 0.4); color: var(--linen); }
.btn-light:hover, .btn-ghost-light:hover { opacity: 0.85; }
.btn-light .arrow, .btn-ghost-light .arrow { transition: transform var(--duration) var(--ease-out); }
.btn-light:hover .arrow, .btn-ghost-light:hover .arrow { transform: translateX(4px); }
.door-triage-note {
  font-family: var(--f-sans);
  font-size: 12.5px;
  color: rgba(250, 249, 246, 0.5);
  margin: 24px 0 0;
}

/* The guide as a physical first page */
.door-pagestack { position: relative; justify-self: end; width: min(340px, 100%); }
@media (max-width: 1023px) { .door-pagestack { justify-self: start; margin-top: 8px; } }
.door-pagestack .sheet {
  background: var(--cream);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  padding: 36px 32px 40px;
  position: relative;
  z-index: 2;
}
.door-pagestack::before,
.door-pagestack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f4f2ec;
  z-index: 1;
}
.door-pagestack::before { transform: translate(10px, 10px); opacity: 0.55; }
.door-pagestack::after { transform: translate(20px, 20px); opacity: 0.3; }
.door-sheet-label {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.door-pagestack h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--forest);
  margin: 0 0 14px;
}
.door-pagestack ol { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.door-pagestack ol li {
  counter-increment: s;
  font-family: var(--f-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 9px 0 9px 34px;
  position: relative;
}
.door-pagestack ol li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
}
.door-pagestack .more {
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--outline);
  font-style: italic;
  margin: 10px 0 0;
}

/* Door 6 situation buttons live on the band */
.btn-situation {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 24px;
  height: 52px;
  border-radius: 2px;
  border: 1px solid rgba(250, 249, 246, 0.35);
  color: var(--linen);
  text-decoration: none;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.btn-situation:hover { background: rgba(250, 249, 246, 0.1); border-color: var(--accent-bright); }
.btn-situation .arrow { transition: transform var(--duration) var(--ease-out); }
.btn-situation:hover .arrow { transform: translateX(4px); }

/* ── TRA slots: give the injected check-in the page grid ── */
[data-tra-slot] { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 767px) { [data-tra-slot] { padding: 0 24px; } }

/* ── Numbered sections on the spine ── */
.door-section { padding-bottom: 104px; }
.door-section-header {
  display: grid;
  grid-template-columns: var(--door-gutter) 1fr;
  gap: var(--door-gutter-gap);
  margin-bottom: 64px;
  align-items: start;
}
@media (max-width: 767px) { .door-section-header { grid-template-columns: 1fr; gap: 8px; } }
.door-section-header.centered { text-align: left; } /* centered variant retired */
.door-section-num {
  font-family: var(--f-serif);
  font-size: 64px;
  font-weight: 300;
  color: var(--accent);
  opacity: 0.35;
  line-height: 1;
}
.door-section-heading h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.18;
  color: var(--forest);
  margin: 0 0 16px;
}
.door-section-heading h2 em { font-style: italic; }
.door-section-heading > p {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 660px;
  margin: 0 0 12px;
}

/* ── Library grids ── */
.door-library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.door-library-grid.four-up,
.door-library-grid--four,
.door-library-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
.door-library-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) {
  .door-library-grid,
  .door-library-grid.four-up,
  .door-library-grid--four,
  .door-library-grid--2x2,
  .door-library-grid--two { grid-template-columns: 1fr; gap: 20px; }
}
.door-group-label {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
  margin: 44px 0 20px;
}
.door-group-label:first-of-type { margin-top: 0; }
/* "Read next" rail (MYM-269): rebuilt on every Editorial publish from the door's category. */
.door-read-next-more { margin-top: 24px; }

/* Resource cards */
.door-resource-card {
  background: var(--cream);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: 36px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.door-resource-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); transform: translateY(-3px); }
.door-resource-card.featured { background: var(--forest-dark); }
.door-resource-card.featured h3 { color: var(--linen); }
.door-resource-card.featured p { color: rgba(250, 249, 246, 0.75); }
.door-resource-card.featured .door-resource-link { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.door-resource-card.featured .door-resource-meta { color: rgba(250, 249, 246, 0.55); }
.door-resource-card.featured .door-resource-meta .kind { background: rgba(174, 206, 185, 0.16); color: var(--accent-bright); }
/* MYM-312 A-4b: --outline is a light-ground token. On the featured card's
   --forest-dark ground it measured 3.23:1 and darkening it makes that worse,
   so the read-time inherits the meta row's own light colour there
   (rgba(250,249,246,0.55) = 5.19:1) instead of overriding it. */
.door-resource-card.featured .door-resource-meta .read-time { color: inherit; }
.door-resource-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
  margin-bottom: 18px;
}
.door-resource-meta .kind {
  background: var(--accent-soft);
  color: var(--forest);
  border-radius: 6px;
  padding: 5px 10px;
  letter-spacing: 0.14em;
}
.door-resource-meta .dot { display: none; }
.door-resource-meta .read-time { color: var(--outline); font-weight: 600; }
.door-resource-meta .phase { color: var(--accent); font-weight: 600; letter-spacing: 0.14em; }
.door-resource-card h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.3;
  color: var(--forest);
  margin: 0 0 12px;
}
.door-resource-card > p {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.door-resource-link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: letter-spacing 0.2s var(--ease-out);
}
.door-resource-card:hover .door-resource-link { letter-spacing: 0.2em; }
.door-resource-link .arrow { display: inline-block; transition: transform var(--duration) var(--ease-out); }
.door-resource-card:hover .door-resource-link .arrow { transform: translateX(4px); }

/* Permission coda — on the spine */
.door-permission { margin-top: 56px; }
.door-permission p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--outline);
  max-width: 620px;
  margin: 0;
}
@media (min-width: 768px) {
  .door-permission { margin-left: calc(var(--door-gutter) + var(--door-gutter-gap)); }
}

/* ── Community — companion print + pull-quote (Bible §9) ── */
.door-community,
.door-section.on-tint {
  background: var(--surface-container);
  padding-top: 104px;
  padding-bottom: 132px;
  margin-bottom: 104px;
}
.door-section.on-tint { padding-bottom: 104px; }
.door-community-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1023px) { .door-community-grid { grid-template-columns: 1fr; gap: 40px; } }
.door-coming-label,
.door-community-label {
  display: inline-block;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.door-community-copy h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  color: var(--forest);
  margin: 0 0 20px;
}
.door-community-copy h2 em { font-style: italic; }
.door-community-copy > p {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 620px;
}
.door-community-note,
.door-coming-note {
  font-family: var(--f-sans);
  font-size: 14px;
  font-style: italic;
  color: var(--outline);
}
.door-community-cta { margin: 0; }
.door-community-print { position: relative; margin: 0; }
.door-community-print img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  display: block;
}
.door-pull {
  position: absolute;
  left: -16px;
  bottom: -28px;
  background: var(--cream);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 28px 30px;
  max-width: 360px;
}
@media (max-width: 767px) { .door-pull { left: 12px; right: 12px; max-width: none; } }
.door-pull-label {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.door-pull p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.62;
  color: var(--forest-dark);
  margin: 0 0 12px;
}
.door-pull cite {
  font-style: normal;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--outline);
}

/* Legacy quote fallbacks (kept for any page not yet on the print layout) */
.door-quote-leadin,
.door-quote-lead {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.door-member-quote { margin: 48px 0 0; padding: 0; border: 0; }
.door-member-quote p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.7;
  color: var(--forest-dark);
  max-width: 720px;
  margin: 0 0 16px;
}
.door-member-quote cite {
  font-style: normal;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--outline);
}

/* ── Phase map ── */
.door-phase-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .door-phase-map { grid-template-columns: 1fr; gap: 20px; } }
.door-phase {
  background: var(--cream);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: 36px;
}
.door-phase-label {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.door-phase-num {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: 14px;
}
.door-phase h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--forest);
  margin: 0 0 12px;
}
.door-phase p {
  font-family: var(--f-sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ── Advisor handoff — spine carried onto the forest band ── */
.door-advisor { background: var(--forest); padding: 96px 0; }
.door-advisor-grid {
  display: grid;
  grid-template-columns: var(--door-gutter) 1fr;
  gap: var(--door-gutter-gap);
}
@media (max-width: 767px) { .door-advisor-grid { grid-template-columns: 1fr; } }
.door-advisor h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.25;
  color: var(--linen);
  margin: 0 0 20px;
  max-width: 720px;
}
.door-advisor h2 em { font-style: italic; color: var(--accent-bright); }
.door-advisor p {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.8;
  color: rgba(250, 249, 246, 0.7);
  max-width: 680px;
  margin: 0;
}

/* Legacy holdovers referenced by page-scoped styles */
.door-community-note { margin-top: 8px; }