/* journal.css — long-form reading styles for The foodna Journal.
   Extends the shared design tokens in styles.css (--paper, --ink, --olive, --gold, --line,
   --soft). Loaded only on /journal/ hub + essay pages. Mobile-first, PC-enhanced. */

/* ---------- shared small pieces ---------- */
.journalPage .primaryCta:hover {
  background: var(--olive-dark);
}
.journalPage .ghostCta {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}
.journalPage .ghostCta:hover {
  border-color: var(--ink);
  background: rgba(13, 42, 32, 0.05);
}

/* ---------- HUB: hero ---------- */
.journalHero {
  padding: clamp(48px, 8vw, 104px) 0 clamp(30px, 4vw, 52px);
  max-width: 940px;
}
.journalHero h1 {
  margin: 12px 0 0;
}
.journalDek {
  max-width: 640px;
  margin: clamp(20px, 3vw, 30px) 0 0;
  color: var(--ink);
  font-size: clamp(20px, 1.7vw, 27px) !important;
  line-height: 1.36 !important;
}
.journalHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: clamp(24px, 3.4vw, 38px);
}

/* ---------- HUB: written summary ---------- */
.journalSummary {
  max-width: 820px;
  margin: 0 0 clamp(20px, 3vw, 34px);
  padding: clamp(24px, 3.2vw, 36px) clamp(22px, 3vw, 34px);
  border-left: 2px solid var(--gold);
  background: rgba(243, 238, 227, 0.34);
}
.journalSummary p {
  margin: 0;
  max-width: none;
  color: var(--ink);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.56;
}
.journalSignoff {
  margin: clamp(14px, 1.8vw, 20px) 0 0 !important;
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.4;
  opacity: 0.8;
  text-align: right;
}

/* ---------- HUB: arc groups + essay list ---------- */
.arcStack {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 76px);
  padding: clamp(20px, 3vw, 34px) 0 clamp(30px, 4vw, 48px);
}
.arcGroup {
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 40px);
}
.arcHead h2 {
  font-size: clamp(26px, 2.6vw, 40px) !important;
  line-height: 1.04 !important;
  margin: 0 0 10px !important;
}
.arcHead p {
  max-width: 680px;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  color: var(--soft);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
}
.essayList {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.essayRow + .essayRow {
  border-top: 1px solid rgba(25, 30, 24, 0.18);
}
.essayRowLink {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(16px, 2vw, 22px) clamp(6px, 1vw, 12px);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.18s ease, padding-left 0.18s ease;
}
.essayRowLink:hover {
  background: rgba(13, 42, 32, 0.045);
  padding-left: clamp(12px, 1.6vw, 20px);
}
.essayNum {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.08em;
  color: var(--gold);
  padding-top: 4px;
}
.essayRowText {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.essayRowTitle {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.14;
  color: var(--ink);
}
.essayRowDek {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.45;
  color: var(--soft);
}
.essayRowArrow {
  font-family: "Courier New", ui-monospace, monospace;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  align-self: center;
}
.essayRowLink:hover .essayRowArrow {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- HUB: closing CTA ---------- */
.journalClose {
  border-top: 1px solid var(--line);
  padding: clamp(44px, 6vw, 84px) 0 clamp(20px, 3vw, 40px);
  max-width: 760px;
}
.journalClose h2 {
  font-size: clamp(28px, 3vw, 46px) !important;
}

/* ---------- ESSAY page ---------- */
.essay {
  width: 100%;
}
.essayHead {
  padding: clamp(44px, 7vw, 96px) 0 clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(26px, 4vw, 46px);
}
.arcBackLink {
  color: var(--gold);
  text-decoration: none;
}
.arcBackLink:hover {
  text-decoration: underline;
}
.essayHead h1 {
  max-width: 16ch;
  font-size: clamp(38px, 5.4vw, 78px) !important;
  line-height: 1.0 !important;
  margin: 14px 0 0;
}
.essayMeta {
  margin: clamp(18px, 2.4vw, 26px) 0 0 !important;
  font-family: "Courier New", ui-monospace, monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  color: var(--soft) !important;
  max-width: none !important;
}

/* the reading column */
.essayProse {
  max-width: 40em;
}
.essayProse p {
  max-width: none;
  margin: 0 0 1.15em;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.66;
  color: rgba(20, 24, 20, 0.9);
}
.essayProse p:first-of-type {
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.5;
  color: var(--ink);
}
.essayProse h2 {
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1.1 !important;
  margin: clamp(28px, 3vw, 40px) 0 12px !important;
}
.essayProse em {
  font-style: italic;
}
.essayProse strong {
  font-weight: 700;
}

/* essay CTA */
.essayCta {
  margin: clamp(40px, 5vw, 68px) 0 0;
  padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 36px);
  background: rgba(13, 42, 32, 0.06);
  border: 1px solid var(--line);
  max-width: 40em;
}
.essayCta h2 {
  font-size: clamp(24px, 2.4vw, 34px) !important;
  margin: 0 0 10px !important;
}
.essayCta p {
  max-width: none;
  margin: 0 0 18px;
}

/* prev / next pager */
.essayPager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: clamp(40px, 5vw, 72px) 0 0;
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 36px);
}
.pagerLink {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease;
  min-height: 88px;
}
.pagerLink.next {
  text-align: right;
}
.pagerLink:hover {
  border-color: var(--ink);
  background: rgba(13, 42, 32, 0.04);
}
.pagerLink.disabled {
  border: none;
  min-height: 0;
  pointer-events: none;
}
.pagerDir {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.pagerTitle {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.16;
}

/* related */
.essayRelated {
  margin: clamp(40px, 5vw, 68px) 0 0;
}
.essayRelated h2 {
  font-size: clamp(22px, 2vw, 30px) !important;
  margin: 0 0 clamp(18px, 2.4vw, 26px) !important;
}
.relatedCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.relatedCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.relatedCard:hover {
  border-color: var(--ink);
  background: rgba(13, 42, 32, 0.04);
}
.relatedArc {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.relatedTitle {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.18;
}

/* ---------- unified top-right nav (matches home page .topNav) ---------- */
.journalTopbar {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
  min-height: 52px;
}
/* Reuse styles.css `.topNav` look; re-anchor to the journal container's right edge
   (the home page value is tuned to the hero layout). */
.journalPage .topNav {
  left: auto;
  right: 0;
  top: clamp(12px, 2vw, 20px);
}

/* clearance so content + footer clear the fixed .actionDock (inherited from styles.css) */
.journalPage {
  padding-bottom: 196px;
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .journalPage {
    padding-bottom: calc(var(--mobile-dock-height, 178px) + 30px);
  }
  .journalPage .topNav {
    left: auto;
    right: 6px;
    top: 10px;
    max-width: 58vw;
  }
  .essayRowLink {
    grid-template-columns: auto 1fr;
    gap: 12px 16px;
  }
  .essayRowArrow {
    display: none;
  }
  .essayPager {
    grid-template-columns: 1fr;
  }
  .pagerLink.next {
    text-align: left;
  }
  .relatedCards {
    grid-template-columns: 1fr;
  }
  .essayHead h1 {
    max-width: none;
  }
}