/* ============================================================
   ELURA — Atelier readability refinement (2026-06-27)
   Loads AFTER css/styles.css. Brings the live site back onto the
   Atelier master (tokens.json = Cormorant 400; the live site had
   drifted to 300) and applies the table-approved upgrades:
   bigger DISPLAY headlines (Kinfolk web scale), generous
   whitespace, a drop-cap lede, on-spec eyebrow / body / pull-quote.
   Reversible: delete the <link> to css/elevation.css to revert.
   Uses only locked tokens (Cormorant + Inter, ivory/navy/terracotta).
   ============================================================ */

/* --- Headings: weight 400 (master spec; live site had drifted to 300). --- */
/* Display headlines run larger than the print-derived 32-40px master,
   matching Kinfolk's web display scale. Sub-heads stay restrained. */
h1 { font-weight: 400; font-size: clamp(3.5rem, 5.8vw, 4.5rem); letter-spacing: -0.015em; line-height: 1.08; }
h2 { font-weight: 400; font-size: clamp(3rem, 5vw, 3.75rem); letter-spacing: -0.012em; line-height: 1.12; }
h3 { font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.6rem); letter-spacing: -0.004em; }
h1 em, h2 em, h3 em { font-weight: 400; font-style: italic; }
.hero-reveal h2 { font-size: clamp(3rem, 5vw, 3.75rem); line-height: 1.12; }

/* --- Eyebrow: master sweet spot — 11px / weight 500 / 0.18em
       (wider than the live site's 0.14em, not as wide as the 0.24em I tried). --- */
.eyebrow { font-size: 0.6875rem; letter-spacing: 0.18em; }

/* --- Reading body: master bodyLarge (18px), generous leading, short measure. --- */
.content-offset p,
.two-col--editorial p,
.eva-editorial p,
.hero-reveal p {
  font-size: 1.125rem;
  line-height: 1.8;
  max-width: 40rem;
}

/* --- Pull-quote: light expressive moment, ~26-34px, just below the display headlines. --- */
.slow-section { padding-top: clamp(96px, 14vw, 180px); padding-bottom: clamp(96px, 14vw, 180px); }
.slow-section__quote { font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.32; font-weight: 300; max-width: 50rem; }

/* --- Generous whitespace: the core Aesop/Kinfolk premium signal (layout rhythm, ~96-160px). --- */
.bg-ivory, .bg-stone, .bg-navy {
  padding-top: clamp(96px, 12vw, 160px);
  padding-bottom: clamp(96px, 12vw, 160px);
}

/* --- Lede drop cap (kept — editorial treatment you liked). --- */
p.dropcap::first-letter {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 3.5em;
  line-height: 0.8;
  float: left;
  padding: 0.04em 0.12em 0 0;
}

/* --- Editorial photography: taller, more cinematic spreads. --- */
.editorial-break img { min-height: 46vh; object-fit: cover; }

/* --- Archetype patterns: 4-column editorial grid, clear hierarchy --- */
.archetype-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  max-width: 1140px;
  margin: clamp(44px, 5vw, 72px) auto 0;
  border-top: none;
}
.archetype-card {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 22px 0 0;
  border-bottom: none;
  border-top: 1px solid rgba(32, 48, 70, 0.22);
  align-items: start;
}
.archetype-card__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--terracotta);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.archetype-card h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  font-style: normal;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.archetype-card p {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.65;
  color: #4a5568;
  margin: 0;
}
@media (max-width: 920px) { .archetype-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .archetype-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LINE GRAMMAR (locked 2026-06-28). Each rule means one thing:
   terracotta = "a beginning" (section opener + aside marker);
   charcoal hairline = "structural divide"; sage is NEVER a line.
   ============================================================ */
/* Section-opener: terracotta rule above EVERY eyebrow, uniform */
.eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--terracotta);
  margin: 0 0 16px;
}
.text-center .eyebrow::before,
.archetypes__intro .eyebrow::before,
.forest-banner__content .eyebrow::before { margin-left: auto; margin-right: auto; }
/* Remove the old random manual rules — the ::before replaces them */
.terra-line, .editorial-rule { display: none !important; }
/* Vertical rule = terracotta, asides/pull-quotes only (was sage) */
.pull-quote, .legal-content .legal__emphasis { border-left-color: var(--terracotta); }
/* Structural dividers = charcoal at low opacity */
.archetype-card { border-top-color: rgba(60, 60, 60, 0.14); }

/* Kill the rogue sage vertical line on body text (sage banned from lines);
   drop the now-purposeless 80px indent so body aligns under the headline. */
.content-offset { padding-left: 0 !important; }
.content-offset::before { display: none !important; }

/* ============================================================
   DROP-CAP UNIFORMITY (narrative pages) + AESOP POLISH (2026-06-28)
   ============================================================ */
/* Journal articles: drop-cap the first paragraph of every article (all share .article__content) */
.article__content > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 3.5em;
  line-height: 0.8;
  float: left;
  padding: 0.04em 0.12em 0 0;
}
/* Centered-eyebrow opener: cover the common centered containers site-wide */
.container--narrow .eyebrow::before,
.cta-content .eyebrow::before,
.section-testimonial .testimonial-editorial__text .eyebrow::before { margin-left: 0; }
/* Aesop framed inline images — subtle hairline frame (NOT on full-width banners/backgrounds) */
.editorial-portrait-img,
.eva-editorial__image img,
.origin-portrait img,
.testimonial-editorial__portrait img,
.article__editorial-img img {
  border: 1px solid rgba(60, 60, 60, 0.10);
}

/* ============================================================
   MOTION SYSTEM v2 (ratified 2026-07-02 — tokens.json `motion` block,
   website-design-system.md §10). Replaces sticky-stack v1 AND the GSAP
   mist hinge. Scroll-linked ONLY: scroll position IS the animation —
   no timers, no one-shot triggered fades; fully reversible on scroll-back.
   Three devices: pinned hero "arrival" (50vh pin), 20% editorial pan
   (all editorial imagery), pinned fog scene (50vh, dawn section, ONCE
   per site). CSS position:sticky + rAF in js/motion.js — NO GSAP
   (2026-06-30 lesson). Desktop-only; reduced-motion renders final state.
   Reversible: delete this block + restore the GSAP script tags.
   ============================================================ */

/* --- 0. Text reveals RETIRED (rejected mechanism: "the movement is in
       the images"). Text renders static; main.js observer becomes a no-op. --- */
.reveal, .reveal-left, .reveal-right, .reveal-editorial {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --- 1. Pinned hero — the arrival. Image sticky + perfectly still;
       the text block rides the first 50vh of scroll up and off. --- */
@media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  .hero-scene { position: relative; height: 150vh; }
  .hero-scene .hero { position: sticky; top: 0; height: 100vh; }
  /* Eye-line composition (ratified): text block level with the subject's
     eye line in the image's negative space, not bottom-anchored. */
  .hero-scene .hero__hook {
    bottom: auto;
    top: 36%;
    padding: 0 8%;
    will-change: transform;
  }
}

/* --- 2. Editorial pan windows (20%): image is 120% of its clipped
       window and pans with viewport travel (sized/driven by motion.js). --- */
@media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  .pwin { position: relative; overflow: hidden; }
  .pwin > img {
    position: absolute; top: 0; left: 0;
    width: 100%; object-fit: cover;
    max-height: none;
    will-change: transform;
  }
  .editorial-break.pwin { height: min(70vh, 600px); }
  .pwin--portrait { aspect-ratio: 1856 / 2304; }
}

/* --- 3. Pinned fog scene — ride up fog-intact → pin → 50vh of scroll
       lifts the fog → release. The dawn section; ONCE on the whole site. --- */
.forest-banner__fog {
  position: absolute; inset: 0; z-index: 1; will-change: opacity;
  background: linear-gradient(180deg,
    rgba(246,243,236,0.92) 0%, rgba(246,243,236,0.70) 45%, rgba(229,229,217,0.85) 100%);
}
@media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  .fog-scene { position: relative; height: 150vh; }
  .fog-scene .forest-banner--mist {
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
  }
}

/* --- Fallbacks: mobile + reduced-motion render the calm final state. --- */
@media (max-width: 879px) {
  .forest-banner--mist { height: 300px; }
  .forest-banner__fog { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .forest-banner--mist { height: 400px; }
  .forest-banner__fog { opacity: 0; }
}

/* ============================================================
   ATELIER FIDELITY PASS 2 (2026-07-02 — Richard's live Elevate review).
   Buttons and corners had never been brought onto the master tokens:
   tokens.json says button case = SENTENCE (uppercase is reserved for
   eyebrow tags), 14px, 0.04em tracking, weight 600 primary / 500
   secondary, and borderRadius = 0 site-wide (square corners).
   ============================================================ */
.btn, .nav__cta, .nav__mobile-cta, .footer__signup-btn {
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.btn--primary, .nav__cta { font-weight: 600; }
.btn--secondary, .btn--ghost, .btn--text { font-weight: 500; }
.btn, .nav__cta, .nav__mobile-cta, .program-card, .archetype-card,
.footer__email-input, .footer__signup-btn,
input, textarea, select { border-radius: 0 !important; }

/* --- Footer panel-stack ending RESTORED (Richard, 2026-07-02 live review:
       the final CTA holds still while the footer rises to cover it — the
       Bombolone ending he liked). Scroll-linked CSS sticky, a page-END
       device; does not stack against the mid-page fog scene. --- */
@media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  .cta-with-bg { position: sticky; top: 0; z-index: 0; }
  .cta-with-bg + footer { position: relative; z-index: 2; }
}

/* ============================================================
   ATELIER FIDELITY PASS 3 (2026-07-02/03 — Richard's section-by-section
   homepage dissection). Root causes fixed at the source:
   (1) styles.css .eyebrow color is SAGE — canon eyebrow = TERRACOTTA;
       sage is surface/material only, never text (the "sage text" he
       kept seeing everywhere was this one line).
   (2) The elevation pass doubled headline sizes but never scaled the
       space AFTER headlines — everything read cramped.
   (3) The pull-quote terracotta vertical rule (locked line grammar)
       targeted .pull-quote, but the homepage quotes use
       .slow-section__quote and blockquote — the rule never landed.
   ============================================================ */

/* (1) Eyebrows are terracotta. Everywhere. Uppercase stays (their job). */
.eyebrow, .program-card .eyebrow { color: var(--terracotta); }

/* (2) Editorial breathing: space after display headlines + section intros. */
h2 { margin-bottom: clamp(28px, 3.2vw, 44px); }
.two-col--editorial h2, .eva-editorial h2 { margin-bottom: clamp(30px, 3.5vw, 48px); }
.archetypes__intro { margin-top: clamp(110px, 12vw, 170px) !important; }
.archetypes__intro h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 16px; }
.bg-navy .text-center p.text-measure-narrow { margin-bottom: 0; }
.bg-navy .program-grid { margin-top: clamp(64px, 7vw, 104px); }

/* Buttons: canonical size (tokens: 14px / 0.875rem 1.5rem padding, no
   min-width). The hero-reveal button was reading oversized + orphaned. */
.btn { padding: 0.875rem 1.5rem; min-width: 0; }
.hero-reveal .hero__buttons { margin-bottom: 22px; }
.hero-reveal p { margin-bottom: clamp(36px, 4vw, 56px); }
.hero-reveal__inner { max-width: 680px; padding: 0 24px; }

/* Micro lines: quiet charcoal-muted (NOT navy-light blue), one line where
   it fits; on navy sections, ivory at reduced presence. */
.micro { color: rgba(60, 60, 60, 0.55); }
.hero-reveal .micro, .bg-navy .micro, .cta-with-bg .micro { color: rgba(246, 243, 236, 0.55); }
.hero-reveal .micro { white-space: nowrap; }

/* (3) The terracotta vertical rule lands on the actual quote elements
   (locked line grammar: the ONLY vertical rule; asides/pull-quotes). */
.slow-section__quote {
  border-left: 2px solid var(--terracotta);
  padding-left: clamp(24px, 3vw, 40px);
  margin-left: auto; margin-right: auto;
}
.slow-section__quote::before { display: none; }
.testimonial-editorial__text blockquote {
  border-left: 2px solid var(--terracotta);
  padding-left: clamp(20px, 2.5vw, 32px);
}

/* Program cards on navy: legibility per canon (hairline ivory structure,
   terracotta accents, ivory text — sage removed from text/border duty). */
.program-card { border-color: rgba(246, 243, 236, 0.22); }
.program-card p { color: rgba(246, 243, 236, 0.82); }
.program-card a { color: var(--ivory); text-decoration-color: var(--terracotta); }
.program-card .caption-accent { color: var(--terracotta); font-style: italic; }
.bg-navy .btn--secondary,
.bg-navy .btn--ghost { border: 1px solid var(--ivory); color: var(--ivory); background: transparent; }
.bg-navy .btn--secondary:hover,
.bg-navy .btn--ghost:hover { background: var(--ivory); color: var(--navy); }

/* Footer cover: rest with air below the CTA button, not swallowing it.
   (Padding sized against measured footer height — see pass 4.) */
.cta-content h2 { margin-bottom: clamp(24px, 2.8vw, 36px); }
.cta-content p.text-measure-narrow { margin-bottom: clamp(24px, 2.8vw, 36px); }

/* ============================================================
   ATELIER FIDELITY PASS 4 (2026-07-03 — Richard's second live pass).
   ============================================================ */

/* Eyebrows: END the specificity war. styles.css colors eyebrows sage in
   seven section-specific rules that outrank a single-class override.
   Canon: eyebrow = terracotta, everywhere, including over imagery. */
.eyebrow { color: var(--terracotta) !important; }

/* The terracotta opener anchors to the eyebrow's FIRST LETTER even in
   centered sections (Richard: "the line should start over the Y of
   Your"). inline-block centers the eyebrow as a unit while ::before
   left-aligns inside it — one rule, consistent everywhere. */
.text-center .eyebrow,
.archetypes__intro .eyebrow,
.forest-banner__content .eyebrow,
.cta-content .eyebrow,
.hero-reveal .eyebrow { display: inline-block; }
.text-center .eyebrow::before,
.archetypes__intro .eyebrow::before,
.forest-banner__content .eyebrow::before,
.cta-content .eyebrow::before { margin-left: 0; margin-right: auto; }

/* Micro lines: canonical small + quiet (styles.css section rules were
   re-coloring them stone/navy-light and letting them read oversized). */
.micro { font-size: 0.8125rem !important; color: rgba(60, 60, 60, 0.55) !important; }
.hero-reveal .micro, .bg-navy .micro, .cta-with-bg .micro { color: rgba(246, 243, 236, 0.55) !important; }

/* Hero-reveal CTA block: tighter, no orphaned gap under the button. */
.hero-reveal .hero__buttons { margin-bottom: 14px; align-items: center; }

/* Pull-quote interlude: the white space above (origin section's bottom
   padding + this section's top padding stacking) was ~2x the space
   below. Trim the stacked side so the quote sits balanced. */
.bg-ivory + .slow-section { padding-top: clamp(8px, 1.5vw, 24px); }

/* CTA meta line ("Three minutes. Free. Private.") — its own quiet line,
   never wrapped, with real air before the button. */
.cta-meta {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: rgba(246, 243, 236, 0.75);
  white-space: nowrap;
  margin: 0 0 clamp(36px, 4vw, 56px);
}

/* Footer resting position: the footer is ~506px tall, so the CTA needs
   at least that much sacrificial bottom padding for the cover to rest
   with air BELOW the button instead of swallowing the meta line.
   Desktop-only (the cover only exists there). */
@media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  .cta-with-bg { padding-bottom: 580px; }
}

/* Program cards: pin all three buttons to one shared bottom line
   (equal-height boxes read as one aligned system), with a guaranteed
   minimum of air above each button (Richard: the middle card's
   Learn More sat cramped under its text). Buttons sit NEAR the card
   floor (~28px inset) so the pinning reads deliberate, not accidental —
   which simultaneously maximizes the air above the middle card's button. */
.program-card { padding-bottom: 28px; }
.program-card p:last-of-type { margin-bottom: 32px; }
.program-card .btn,
.program-card .btn--text { margin-top: auto; align-self: flex-start; }

/* Card CTAs are editorial text links, not boxed buttons (Richard,
   2026-07-03: a border inside a bordered card is box-within-box; the
   tokens reserve boxed buttons for transactional moments). On navy:
   ivory text, terracotta underline. Also fixes .btn--text's sage
   underline site-wide — sage is never a line. */
/* Sage-as-line, final sweep: styles.css re-declares sage underlines at
   two-class specificity (.bg-navy .btn--text etc). Match and beat them.
   Canon: inline-link underlines are terracotta, everywhere, both states. */
.btn--text,
.bg-navy .btn--text,
.hero-reveal .btn--text,
.program-card .btn--text,
.btn--text:hover,
.bg-navy .btn--text:hover,
.hero-reveal .btn--text:hover { text-decoration-color: var(--terracotta); }
a, .bg-navy a, .cta-with-bg a, .footer a, .program-card a { text-decoration-color: var(--terracotta); }
.program-card .btn--text {
  color: var(--ivory);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-underline-offset: 4px;
}
.program-card .btn--text:hover { color: var(--terracotta); }

/* Pinned CTA end-state: when the section pins at viewport top during
   the footer cover, its top padding is what holds "You need clarity."
   BELOW the sticky nav (~110px). Without this, the headline decapitates
   under the nav at max scroll (Richard's screenshot 2 vs 1). */
@media (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  .cta-with-bg { padding-top: clamp(170px, 15vh, 220px); }
}