/* ============================================================
   YOGAL · Journal article
   Editorial long-form. One reading column. Pulls from styles.css
   tokens and matches method.css / lineage.css typography.
   ============================================================ */

.page-journal { background: var(--paper); }

/* ============ HERO ============ */
.a-hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 220px 0 140px;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
}

.a-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.a-hero-bg video,
.a-hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  /* Same hero treatment as method/lineage — push the warmth down, lift
     contrast slightly so the headline reads. */
  filter: saturate(0.55) sepia(0.20) brightness(0.42) contrast(1.10);
  /* Slow ken-burns lean so the still frame doesn't feel inert. */
  animation: a-hero-zoom 26s ease-in-out infinite alternate;
}
@keyframes a-hero-zoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

.a-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 50% at 15% 30%, rgba(216,175,111,0.16), transparent 60%),
    linear-gradient(180deg, rgba(22,17,11,0.55) 0%, rgba(22,17,11,0.85) 100%);
  pointer-events: none;
}

.a-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

.a-hero-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze-2);
  margin-bottom: 48px;
}
.a-hero-kicker .sep { opacity: 0.45; margin: 0 10px; }

.a-hero-title {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(40px, 6.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--paper);
  margin: 0 0 36px;
  max-width: 18ch;
  text-wrap: balance;
}
.a-hero-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--bronze-2);
  letter-spacing: -0.01em;
}

.a-hero-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.4;
  color: var(--muted-dark);
  max-width: 62ch;
  margin: 0 0 56px;
  text-wrap: pretty;
}

.a-hero-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px;
  padding-top: 28px;
  border-top: 1px solid rgba(247,243,234,0.16);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-2);
}
.a-hero-byline .author {
  color: var(--paper);
  letter-spacing: 0.12em;
}
.a-hero-byline .dot { opacity: 0.4; }

/* ============ VIDEO / FIGURE BLOCKS ============ */
.a-figure {
  margin: 80px auto;
  max-width: 1160px;
  padding: 0 32px;
}

.a-figure video,
.a-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
  /* Match the rest of the site's photographic treatment */
  filter: saturate(0.78) sepia(0.14) brightness(0.96) contrast(1.03);
  box-shadow:
    0 1px 0 rgba(22,17,11,0.06),
    0 30px 80px -40px rgba(22,17,11,0.4);
}

.a-figure figcaption {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-3);
  text-align: center;
  line-height: 1.6;
}
.a-figure figcaption em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}

/* ============ READING COLUMN ============
   The .a-body envelope matches the 1080px hero wrapper so its left edge
   lines up with the article title. Paragraphs and headings inside are
   capped at 800px (~80 characters per line — upper edge of comfortable
   reading) so the body has visual weight against the wider title without
   pushing past the readability ceiling. The hr divider sits centered
   within the reading column for the editorial break. */
.a-body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 32px 0;
}
.a-body > p,
.a-body > h2,
.a-body > h3,
.a-body > ul,
.a-body > ol,
.a-body > blockquote {
  max-width: 800px;
}

.a-body p {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: pretty;
}

.a-body p strong {
  font-weight: 500;
  color: var(--ink);
}

.a-body p em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02em;
  color: var(--bronze-3);
}

/* Lead paragraph: a little larger, no dropcap (too try-hard) */
.a-body .lead {
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 36px;
}

.a-body h2 {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 64px 0 24px;
  text-wrap: balance;
}
.a-body h2::before {
  content: "—";
  display: inline-block;
  margin-right: 14px;
  color: var(--bronze);
  font-weight: 300;
}

/* Section divider between major beats — centered within the 800px reading
   column (not within the wider .a-body envelope) so it visually belongs to
   the text above and below it. */
.a-body hr {
  border: 0;
  height: 1px;
  background: var(--line-light);
  width: 200px;
  margin: 56px 0 56px 300px; /* (800 - 200) / 2 to center within reading col */
}

/* Italic in-line quoted thought ("I cannot reach the floor today...") */
.a-body .thought {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.88;
  font-size: 1.05em;
}

/* ============ PULL QUOTE ============ */
.a-pullquote {
  max-width: 900px;
  margin: 80px auto;
  padding: 0 32px;
  text-align: center;
}

.a-pullquote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.a-pullquote blockquote::before {
  content: "“";
  display: block;
  font-size: 1em;
  line-height: 0.6;
  color: var(--bronze);
  margin-bottom: 12px;
}

/* ============ AUTHOR FOOTER ============
   Matches the .a-body envelope (1080px outer, 680px reading column
   left-aligned with body text). Border-top moves from .a-foot to the
   paragraph itself so the rule spans only the reading column, not the
   wider envelope. */
.a-foot {
  max-width: 1080px;
  margin: 80px auto 0;
  padding: 0 32px;
}
.a-foot > p {
  max-width: 800px;
  border-top: 1px solid var(--line-light);
  padding-top: 32px;
}

.a-foot p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.75;
  margin: 0;
}

/* ============ FINAL CTA ============ */
.a-cta {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-7) 0;
  margin-top: 120px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.a-cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(216,175,111,0.20), transparent 65%),
    radial-gradient(40% 30% at 80% 100%, rgba(139,106,61,0.18), transparent 70%);
  pointer-events: none;
}

.a-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}

.a-cta-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze-2);
  margin-bottom: 28px;
}

.a-cta h2 {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--paper);
  margin: 0 0 24px;
  text-wrap: balance;
}
.a-cta h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--bronze-2);
}

.a-cta p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted-dark);
  max-width: 56ch;
  margin: 0 auto 40px;
}

.a-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.a-cta-buttons .btn {
  flex: 0 1 320px;
  min-width: 280px;
  justify-content: space-between;
  padding: 20px 24px;
  min-height: 60px;
  box-sizing: border-box;
  line-height: 1.2;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 720px) {
  .a-hero { padding: 140px 0 40px; }
  .a-hero-inner,
  .a-body,
  .a-foot,
  .a-figure,
  .a-pullquote,
  .a-cta-inner { padding-left: 24px; padding-right: 24px; }

  .a-figure { margin: 56px auto; }
  .a-pullquote { margin: 56px auto; }
  .a-body h2 { margin-top: 48px; }

  /* On narrow viewports the desktop 240px hr left margin pushes the line
     off-screen — recenter within the available width instead. */
  .a-body hr { margin: 56px auto; }
}

@media (max-width: 720px) {
  /* CTA buttons stack vertically with equal heights + visible gap */
  .a-cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-width: 420px;
    margin: 0 auto;
  }
  .a-cta-buttons .btn {
    justify-content: space-between;
    padding: 20px 24px;
    min-height: 60px;
    box-sizing: border-box;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  /* Hero a touch shorter so the title isn't pushed below the fold on landscape */
  .a-hero { min-height: 0; padding: 120px 0 36px; }
  .a-hero-kicker { margin-bottom: 32px; }
  .a-hero-title { font-size: clamp(34px, 11vw, 48px); margin-bottom: 24px; }
  .a-hero-dek { font-size: 17px; margin-bottom: 32px; }
  .a-hero-byline { gap: 12px; font-size: 10px; }

  .a-body { padding: 24px 20px 0; }
  .a-body p { font-size: 17px; }
  .a-body .lead { font-size: 18px; }
  .a-body h2 { font-size: clamp(22px, 6vw, 28px); margin-top: 40px; }
  .a-figure, .a-pullquote { padding-left: 20px; padding-right: 20px; }
}