/* ============================================
   BLOG POST — "Our Story" series (editorial register)
   Mirrors the homepage "Our Purpose" spread: Cormorant
   overture/quotes, ghost watermark behind the headline,
   hairline rules, thin headlines, oversized accents, and a
   drop-cap lead. Reserved for contemplative brand content.
   ============================================ */

body { background: var(--white); }

/* ----- ARTICLE HEADER ----- */
.article-header {
  position: relative;
  padding: 150px 0 0;
  background: var(--white);
  text-align: center;
  overflow: hidden;
}

.article-header .container { position: relative; max-width: 880px; }

/* Kicker — reuses .post-tag markup but sheds the pill for a letterspaced label */
.article-header .post-tag {
  display: inline-block;
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm);
  background: none;
  padding: 0;
  margin-bottom: 26px;
}

/* Ghost watermark — single thematic word behind the title (PEACE / SERVE / PURPOSE) */
.article-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  /* Smaller cap + centered so long words (e.g. "PURPOSE") sit behind the title
     instead of colliding with / clipping past it. */
  font-size: clamp(5rem, 14vw, 14rem);
  font-weight: 200;
  letter-spacing: -0.06em;
  color: rgba(44, 74, 110, 0.045); /* Hampton Blue at ~4.5% */
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  user-select: none;
  line-height: 1;
}

.article-header h1 {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto 22px;
  letter-spacing: -0.02em;
}

.article-meta {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 0;
}

/* Hairline rule that bridges header into the hero/body (matches .purpose-rule) */
.article-divider {
  position: relative;
  z-index: 1;
  width: 1px;
  height: 84px;
  background: linear-gradient(180deg, transparent, var(--hairline-strong, rgba(31,32,36,0.14)), transparent);
  margin: 40px auto 0;
}

/* ----- ARTICLE HERO IMAGE (optional banner; only posts with a landscape photo) ----- */
.article-hero {
  max-width: 940px;
  margin: 0 auto;
  padding: 48px 24px 0;
}

.article-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.article-hero figcaption {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--silver);
  text-align: center;
  margin-top: 16px;
}

/* ============================================
   STICKY SPREAD — founders post / any post with a photo.
   Two columns: a pinned figure on the left, prose on the right.
   Three hero variants are toggled by a wrapper class:
     .article-spread            → Option A (landscape card)
     .article-spread.is-portrait → Option B (tall 3:4 portrait rail)
     .article-spread.spread-masthead → Option C (full masthead in left col)
   ============================================ */
.article-spread {
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 24px 72px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

/* Body resets when it lives inside the spread (it's no longer the centered column) */
.article-spread .article-body {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The pinned figure column */
.article-figure {
  position: sticky;
  top: 96px;
  margin: 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.article-figure figcaption {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--silver);
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--warm);
}

/* Option B — crop the landscape source into a tall portrait frame */
.article-spread.is-portrait .article-figure img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 26%;
  height: auto;
}

/* Option C — full masthead (kicker + title + meta + photo) pinned on the left */
.spread-masthead { padding-top: 12px; }

.spread-masthead .article-figure .back-link { margin-bottom: 28px; }

.spread-masthead .article-figure .post-tag {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm);
  background: none;
  padding: 0;
  margin-bottom: 18px;
}

.spread-masthead .article-figure h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
  text-align: left;
}

.spread-masthead .article-figure .article-meta {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin: 0 0 30px;
  text-align: left;
}

@media (max-width: 900px) {
  .article-spread {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 56px;
  }
  .article-figure { position: static; top: auto; }
  /* Contain the stacked photo on simple (non-masthead) spreads too. */
  .article-spread:not(.spread-masthead) .article-figure {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .spread-masthead .article-figure h1 { font-size: clamp(1.8rem, 6vw, 2.3rem); }
}

/* ----- ARTICLE BODY ----- */
.article-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text-body);
  background: var(--white);
}

.article-body p { margin-bottom: 26px; }

/* Lead paragraph — larger, lighter, with a Cormorant drop cap */
.article-lead {
  font-size: clamp(1.18rem, 1.9vw, 1.38rem);
  line-height: 1.65;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 30px;
}

.article-lead::first-letter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 4em;
  float: left;
  line-height: 0.78;
  margin: 0.06em 0.14em -0.02em 0;
  color: var(--accent);
}

/* Section headings — thin, with a short maroon micro-rule above (soul accent) */
.article-body h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 64px 0 20px;
}

.article-body h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--warm);
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}

/* Pull-quote — Cormorant italic with a maroon rail */
.article-body blockquote {
  margin: 48px 0;
  padding: 4px 0 4px 30px;
  border-left: 2px solid var(--warm);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  line-height: 1.4;
  color: var(--ink);
}

.article-body ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 26px;
}

.article-body ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  line-height: 1.8;
}

.article-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background: var(--accent);
}

.article-body em { font-style: italic; }

/* ----- AUTHOR CARD ----- */
.author-card {
  max-width: 680px;
  margin: 0 auto 72px;
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 24px;
}

.author-avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--r-circle);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  flex-shrink: 0;
}

.author-info h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.author-info .author-title {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 10px;
}

.author-info .author-bio {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* ----- SERIES NAV (Our Story prev/next) ----- */
.series-nav {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.series-nav a {
  display: block;
  padding: 24px 26px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-soft),
              box-shadow var(--t-fast) var(--ease-soft),
              transform var(--t-base) var(--ease-calm);
}

.series-nav a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* A lone "next" card (Part 1) sits on the right; a lone "prev" (Part 3) on the left */
.series-nav .series-next { grid-column: 2; text-align: right; }
.series-nav .series-prev { grid-column: 1; }

.series-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 10px;
}

.series-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}

/* ----- CTA SECTION ----- */
.blog-cta {
  margin-top: 88px;
  padding: 80px 0;
  text-align: center;
  background: linear-gradient(165deg, var(--charcoal) 0%, #2a2a2a 50%, #18243a 100%);
  color: var(--white);
}

.blog-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  margin-bottom: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.blog-cta h2 strong { font-weight: 700; }

.blog-cta p {
  font-size: 1rem;
  color: rgba(255,255,255,0.62);
  margin: 0 auto 28px;
  max-width: 520px;
  line-height: 1.7;
}

.cta-btn {
  display: inline-block;
  padding: 14px 40px;
  border: 2px solid var(--accent);
  background: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  transition: background var(--t-fast) var(--ease-soft),
              transform var(--t-base) var(--ease-calm),
              box-shadow var(--t-base) var(--ease-calm);
}

.cta-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ----- BACK LINK ----- */
.back-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 36px;
  transition: color var(--t-base) var(--ease-soft);
}

.back-link:hover { color: var(--accent-hover); }

.back-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* In the centered overture header, the back link is quiet utility nav:
   tucked into the top-left corner, out of the centered hierarchy. */
.article-header .back-link {
  position: absolute;
  top: -54px;
  left: 0;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--silver);
}

.article-header .back-link:hover { color: var(--accent); }

/* ----- RESPONSIVE ----- */
@media (max-width: 900px) {
  .article-watermark { display: none; } /* too narrow to land cleanly */
}

@media (max-width: 768px) {
  .article-header { padding-top: 120px; }
  .article-divider { height: 64px; margin-top: 32px; }
  .author-card { flex-direction: column; text-align: center; }
  .series-nav { grid-template-columns: 1fr; }
  .series-nav .series-next,
  .series-nav .series-prev { grid-column: 1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .series-nav a:hover { transform: none; }
}

/* ============================================
   SIDEBAR — right rail on the founders spread (Option A + info rail)
   Turns the two-column spread into three: sticky photo · prose · sticky info.
   ============================================ */
.article-spread.has-sidebar {
  max-width: 1340px;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr) minmax(0, 250px);
  gap: 50px;
}

.article-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  font-family: var(--font-body);
}

.aside-title {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

/* Series list */
.aside-series { list-style: none; margin: 0; padding: 0; }
.aside-series li,
.aside-series li a {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.aside-series li {
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
}
.aside-series li:first-child { border-top: 0; }
.aside-series .part-num {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--silver);
  flex-shrink: 0;
}
.aside-series .part-text {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.3;
  transition: color var(--t-base) var(--ease-soft);
}
.aside-series li a:hover .part-text { color: var(--accent); }
.aside-series .is-current .part-num { color: var(--accent); }
.aside-series .is-current .part-text { color: var(--ink); font-weight: 600; }

/* Table of contents */
.aside-toc { list-style: none; margin: 0; padding: 0; }
.aside-toc a {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--hairline);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-light);
  transition: color var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft);
}
.aside-toc a:hover,
.aside-toc a.active {
  color: var(--accent);
  border-color: var(--accent);
}

/* At a glance */
.aside-facts { margin: 0; }
.aside-fact { padding: 10px 0; border-top: 1px solid var(--hairline); }
.aside-fact:first-child { border-top: 0; padding-top: 0; }
.aside-fact dt {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 3px;
}
.aside-fact dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.4;
}

/* Mini CTA */
.aside-cta {
  padding: 22px;
  background: var(--light-gray, #f5f5f4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  text-align: center;
}
.aside-cta-text {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 14px;
}
.aside-cta-btn {
  display: inline-block;
  padding: 10px 24px;
  background: var(--accent);
  color: var(--white);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--t-fast) var(--ease-soft);
}
.aside-cta-btn:hover { background: var(--accent-hover); }

/* Offset anchored sections so TOC jumps clear the fixed nav */
.article-body h2 { scroll-margin-top: 100px; }

@media (max-width: 1100px) {
  .article-spread.has-sidebar {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .article-spread.has-sidebar .article-figure,
  .article-spread.has-sidebar .article-aside { position: static; top: auto; }
  /* Source order is figure → body → aside. When stacked, reorder to
     figure → aside (Series + TOC, useful up top) → body, so the TOC isn't
     dumped below the whole article where nobody scrolls back to it. */
  .article-spread.has-sidebar .article-figure { order: 0; }
  .article-spread.has-sidebar .article-aside { order: 1; }
  .article-spread.has-sidebar .article-body { order: 2; }
  /* Cap the stacked photo so it reads as a contained editorial image, not a
     full-bleed banner. */
  .article-spread.has-sidebar .article-figure {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}