/* Awakening Eden Living Guide 01 - v23.1 */
:root {
  --guide-reading: 47rem;
  --guide-wide: 76rem;
  --guide-line: rgb(105 112 82 / 0.22);
  --guide-soft: rgb(255 253 247 / 0.72);
}

body.guide-one {
  color: var(--forest-deep);
  background:
    radial-gradient(circle at 12% 6%, rgb(184 148 75 / 0.09), transparent 25rem),
    radial-gradient(circle at 88% 18%, rgb(148 160 131 / 0.12), transparent 28rem),
    var(--paper);
}

.guide-starter-path { padding: clamp(3rem, 6vw, 5rem) 0; background: #f4eddd; }
.guide-starter-path h2 { font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4rem); margin: .4rem 0 1.4rem; }
.guide-starter-path__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.guide-starter-path__grid article { padding: 1.5rem; border: 1px solid rgb(68 85 57 / .2); border-radius: 1rem; background: #fffaf0; }
.guide-starter-path__grid span { color: #805039; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.guide-starter-path__grid h3 { font-family: var(--display); font-size: 1.75rem; line-height: 1.15; margin: .7rem 0; }
.guide-starter-path__grid p { line-height: 1.65; }
.guide-starter-path__grid a { font-weight: 700; color: #294334; }
.guide-starter-path__note { margin: 1.2rem 0 0; }
@media (max-width: 48rem) { .guide-starter-path__grid { grid-template-columns: 1fr; } }

.guide-one .section { overflow: clip; }
.guide-one .site-header { z-index: 200; }
.guide-one .primary-nav a[aria-current="page"] { border-color: var(--olive); }

.guide-masthead {
  position: relative;
  min-height: calc(100svh - 5.2rem);
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 8rem);
  overflow: clip;
}

.guide-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(255 253 247 / 0.55), transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgb(105 112 82 / 0.025) 28px);
  pointer-events: none;
}

.guide-masthead__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.72fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: center;
}

.guide-number {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  color: var(--olive);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.guide-number::before { content: ""; width: 2.4rem; height: 1px; background: var(--gold); }
.guide-masthead h1 { max-width: 11ch; margin-bottom: 1.15rem; font-size: clamp(4.1rem, 8.3vw, 7.7rem); }
.guide-promise { max-width: 35rem; margin-bottom: 1rem; font-family: var(--display); font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.22; }
.guide-intro { max-width: 37rem; color: rgb(35 49 38 / 0.76); }

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.guide-meta li {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--guide-line);
  border-radius: 999px;
  color: var(--umber);
  background: rgb(255 253 247 / 0.7);
  font-size: 0.78rem;
  font-weight: 700;
}

.guide-hero-art { position: relative; display: grid; min-height: 35rem; place-items: center; margin: 0; }
.guide-hero-art::before {
  content: "";
  position: absolute;
  width: min(31rem, 92%);
  aspect-ratio: 4 / 5;
  border: 1px solid rgb(105 112 82 / 0.34);
  border-radius: 50% 50% 2rem 2rem;
  background: linear-gradient(180deg, rgb(255 253 247 / 0.88), rgb(232 222 200 / 0.42));
  box-shadow: var(--shadow);
}

.guide-hero-art__seedling {
  position: relative;
  z-index: 2;
  width: min(24rem, 78%);
  filter: drop-shadow(0 20px 24px rgb(35 49 38 / 0.16));
}

.guide-hero-art__corner { position: absolute; z-index: 3; right: -1rem; bottom: 0; width: min(16rem, 48%); opacity: 0.8; }
.guide-hero-art figcaption { position: absolute; z-index: 4; bottom: -0.8rem; font-family: var(--hand); color: var(--terracotta); font-size: 1.8rem; }

.guide-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.button--gift { color: var(--paper-light); background: var(--terracotta); }

/* The seed-to-tree journey: a full-width banner naming the six stages this
   guide walks through, each with a one-line description so the arc is clear
   before a reader commits to the whole thing. Wider than the page's normal
   reading container so it reads as one continuous banner, not a centred
   island inside it. */
.guide-journey {
  position: relative;
  z-index: 4;
  padding-block: clamp(1.7rem, 3.5vw, 2.6rem);
  border-block: 1px solid var(--guide-line);
  background: rgb(255 253 247 / 0.64);
}

.guide-journey__inner { width: min(calc(100% - 2 * var(--gutter)), 92rem); margin-inline: auto; }

.guide-journey__eyebrow {
  margin: 0 0 1.4rem;
  color: var(--olive);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.growth-path { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; align-items: start; margin: 0; padding: 0; list-style: none; }

/* One continuous ground line under the whole row, rather than six fragments
   that have to line up with each column's math. */
.growth-path::before {
  content: "";
  position: absolute;
  top: 5.35rem;
  left: 3%;
  width: 94%;
  height: 1px;
  background: var(--guide-line);
}

.growth-path li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.55rem; text-align: center; }
.growth-path__art { display: grid; align-items: end; justify-items: center; height: 5.6rem; }
/* max-height must be an explicit unit, not a percentage: percentages on a
   grid item don't reliably resolve against an auto-sized grid row, which let
   the taller tree illustrations overflow this box and cover the text below. */
.growth-path__art img { display: block; width: auto; height: auto; max-width: 100%; max-height: 5.6rem; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(35 49 38 / 0.12)); }
.growth-path__text { display: grid; justify-items: center; gap: 0.3rem; }
.growth-path strong { color: var(--forest); font-family: var(--display); font-size: 1.08rem; font-weight: 700; }
.growth-path__desc { max-width: 12.5rem; color: var(--umber); font-size: 0.78rem; line-height: 1.45; }

.guide-shell { position: relative; }
.guide-edge { position: absolute; z-index: 1; top: 3rem; left: max(-8.5rem, calc((100vw - 93rem) / 2)); width: clamp(8rem, 13vw, 13rem); height: auto; opacity: 0.62; pointer-events: none; }
.guide-edge--right { right: max(-8.5rem, calc((100vw - 93rem) / 2)); left: auto; transform: scaleX(-1); }
.guide-content { position: relative; z-index: 2; }

.opening-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.85fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.opening-letter {
  position: relative;
  padding: clamp(1.8rem, 5vw, 4rem);
  border: 1px solid var(--guide-line);
  border-radius: 1.75rem;
  background: rgb(255 253 247 / 0.84);
  box-shadow: var(--shadow);
}
.opening-letter::after { content: ""; position: absolute; right: -1rem; bottom: -1.2rem; width: 9rem; height: 9rem; background: url("assets/corners/botanical-corner-03.webp") center / contain no-repeat; opacity: 0.4; pointer-events: none; }
.opening-letter p:last-child { margin-bottom: 0; }

.walk-card { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 1.5rem; color: var(--paper-light); background: var(--forest); box-shadow: var(--shadow); }
.walk-card h2 { color: var(--paper-light); font-size: clamp(2.2rem, 4vw, 3.4rem); }
.walk-card ol { display: grid; gap: 1.1rem; margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: walk; }
.walk-card li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.8rem; align-items: start; }
.walk-card li::before { counter-increment: walk; content: counter(walk); display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid rgb(255 253 247 / 0.35); border-radius: 50%; color: var(--paper-light); font-family: var(--display); font-size: 1.15rem; }

.chapter-nav {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--guide-line);
  border-radius: 1.3rem;
  background: rgb(255 253 247 / 0.76);
}
.chapter-nav__title { margin: 0 0 1rem; color: var(--terracotta); font-family: var(--hand); font-size: 1.75rem; }
.chapter-nav ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin: 0; padding: 0; list-style: none; counter-reset: chapters; }
.chapter-nav a { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; min-height: 100%; align-items: center; padding: 0.8rem; border-radius: 0.8rem; color: var(--forest); background: rgb(232 222 200 / 0.36); font-size: 0.83rem; font-weight: 750; line-height: 1.25; text-decoration: none; }
.chapter-nav a::before { counter-increment: chapters; content: counter(chapters, decimal-leading-zero); color: var(--terracotta); font-family: var(--display); font-size: 1.15rem; }
.chapter-nav a:hover { background: var(--linen); }

.guide-chapter { position: relative; padding-block: clamp(4.8rem, 9vw, 8.5rem); scroll-margin-top: 5.5rem; }
.guide-chapter--light { background: rgb(255 253 247 / 0.54); }
.chapter-copy { width: min(calc(100% - 2 * var(--gutter)), var(--guide-reading)); margin-inline: auto; }
.chapter-copy h2 { max-width: 12ch; }
.chapter-copy p, .chapter-copy li { color: rgb(35 49 38 / 0.86); }
.chapter-copy > p:first-of-type { color: var(--forest); font-family: var(--display); font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.36; }
.chapter-kicker { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; color: var(--terracotta); font-family: var(--hand); font-size: 1.7rem; }
.chapter-kicker::after { content: ""; width: 3rem; height: 1px; background: var(--gold); }

.field-note, .living-action {
  position: relative;
  margin-top: 2rem;
  padding: 1.45rem 1.6rem 1.35rem;
  border: 1px solid var(--guide-line);
  border-radius: 1rem;
  background: var(--guide-soft);
}
.field-note { border-left: 4px solid var(--sage); }
.living-action { border-left: 4px solid var(--terracotta); background: rgb(232 222 200 / 0.38); }
.field-note h3, .living-action h3 { margin-bottom: 0.35rem; color: var(--terracotta); font-family: var(--hand); font-size: 1.75rem; }
.field-note p:last-child, .living-action p:last-child { margin-bottom: 0; }

.principle-grid { width: min(calc(100% - 2 * var(--gutter)), var(--guide-wide)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.5rem auto 0; }
.principle { position: relative; min-height: 16rem; padding: 1.5rem; border: 1px solid var(--guide-line); border-radius: 1.2rem; background: rgb(255 253 247 / 0.78); box-shadow: 0 12px 34px rgb(35 49 38 / 0.06); }
.principle:nth-child(even) { background: rgb(232 222 200 / 0.45); }
.principle h3 { font-size: 2rem; }
.principle-number { display: block; margin-bottom: 1rem; color: var(--gold); font-family: var(--display); font-size: 1.2rem; }

.botanical-divider { width: min(calc(100% - 2 * var(--gutter)), 46rem); margin: -2.4rem auto; opacity: 0.78; pointer-events: none; }
.botanical-divider img { width: 100%; }
/* The Celtic tree of life is the ceremonial divider: taller, wider and given
   real breathing room, so it reads as a chapter turn rather than a rule. */
.botanical-divider--tree { width: min(calc(100% - 2 * var(--gutter)), 62rem); margin-block: clamp(0.5rem, 2vw, 1.5rem); opacity: 1; }

.pause-outside { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); color: var(--paper-light); background: var(--forest); overflow: clip; }
.pause-outside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgb(184 148 75 / 0.2), transparent 55%); }
.pause-outside .narrow { position: relative; z-index: 2; text-align: center; }
.pause-outside h2 { color: var(--paper-light); }
.pause-outside p { font-family: var(--display); font-size: clamp(1.35rem, 2.7vw, 2rem); }
.pause-outside .handwritten { color: var(--gold); }

/* Teaching-image readability · 16 October 2026 */
.guide-board figcaption{font-size:1rem;line-height:1.65}
.guide-board figcaption strong{font-size:1.05rem}
.guide-board--whole-place{width:min(calc(100% - 2 * var(--gutter)),var(--guide-wide));margin:2rem auto}
.guide-board--whole-place>a{display:block}
.guide-board--whole-place img{display:block;width:100%;height:auto}
.author-photo figcaption{font-size:1rem;line-height:1.55}

.quick-grid { width: min(calc(100% - 2 * var(--gutter)), var(--guide-wide)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.5rem auto 0; }
.quick-card { padding: 1.7rem; border: 1px solid var(--guide-line); border-radius: 1.2rem; background: rgb(255 253 247 / 0.78); }
.quick-card strong { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; margin-bottom: 1rem; border-radius: 50%; color: var(--paper-light); background: var(--olive); font-family: var(--display); font-size: 1.25rem; }
.quick-card h3 { font-size: 2.15rem; }

.chapter-split { width: min(calc(100% - 2 * var(--gutter)), var(--guide-wide)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.72fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; margin-inline: auto; }
.chapter-split .chapter-copy { width: 100%; }
.pattern-card { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--guide-line); border-radius: 1.5rem; background: var(--guide-soft); box-shadow: var(--shadow); }
.pattern-card h3 { font-size: 2.35rem; }
.pattern-card ol { padding-left: 1.25rem; }
.pattern-card li { margin-bottom: 0.75rem; }

.author-note { background: var(--paper-light); }
.author-grid { width: min(calc(100% - 2 * var(--gutter)), var(--guide-wide)); display: grid; grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; margin-inline: auto; }
.author-photo { margin: 0; padding: 0.65rem; border: 1px solid var(--guide-line); border-radius: 45% 45% 1.2rem 1.2rem; background: var(--paper); box-shadow: var(--shadow); }
.author-photo img { width: 100%; aspect-ratio: 4 / 3; border-radius: 44% 44% 0.8rem 0.8rem; object-fit: cover; object-position: 58% 52%; }
.author-photo figcaption { padding: 0.8rem 0.5rem 0.2rem; color: var(--umber); font-size: 0.75rem; text-align: center; }
.author-copy h2 { max-width: 10ch; }
.signature { color: var(--terracotta); font-family: var(--hand); font-size: 2rem; }

.lineage { width: min(calc(100% - 2 * var(--gutter)), var(--guide-reading)); margin-inline: auto; }
.lineage details { border-block: 1px solid var(--guide-line); padding: 1.2rem 0; }
.lineage summary { cursor: pointer; color: var(--forest); font-weight: 800; }
.lineage details[open] summary { margin-bottom: 1rem; }

.closing { position: relative; padding-block: clamp(5rem, 10vw, 9rem); overflow: clip; text-align: center; }
.closing::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 253 247 / 0.62), rgb(232 222 200 / 0.52)); }
.closing-inner { position: relative; z-index: 2; width: min(calc(100% - 2 * var(--gutter)), 53rem); margin-inline: auto; }
.closing-tree { width: min(15rem, 44vw); margin: 0 auto 1.2rem; filter: drop-shadow(0 16px 24px rgb(35 49 38 / 0.12)); }
.closing h2 { max-width: 12ch; margin-inline: auto; }
.closing-blessing { font-family: var(--display); font-size: clamp(1.35rem, 2.7vw, 2rem); line-height: 1.38; }
.closing .guide-controls { justify-content: center; }
.community-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1rem; }
.community-row a { color: var(--olive); font-size: 0.85rem; font-weight: 800; text-underline-offset: 0.25rem; }

.guide-footer { text-align: center; }
.guide-footer .footer-mark { width: 4.2rem; margin: 0 auto 1rem; }
.guide-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1rem; }
.guide-footer nav a { color: var(--paper-light); font-size: 0.84rem; font-weight: 700; }

@media (max-width: 880px) {
  .guide-masthead__grid, .opening-grid, .chapter-split, .author-grid { grid-template-columns: 1fr; }
  .guide-hero-art { min-height: 28rem; }
  .guide-hero-art__seedling { width: min(21rem, 70%); }
  .chapter-nav ol, .principle-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-edge { display: none; }
  .author-photo { max-width: 39rem; margin-inline: auto; }
  /* Three stages per row, two rows: the ground line only ever matched a
     single row of six, so it steps aside rather than cutting across both. */
  .growth-path { grid-template-columns: repeat(3, 1fr); row-gap: 2.6rem; }
  .growth-path::before { display: none; }
}

@media (max-width: 720px) {
  .guide-masthead { min-height: auto; padding-top: 3.2rem; }
  .guide-masthead h1 { font-size: clamp(3rem, 14.5vw, 5.4rem); overflow-wrap: break-word; }
  .guide-controls .button { width: 100%; }
  /* Six stages with real descriptions are too dense for a horizontal
     squeeze; the journey becomes a vertical timeline instead, icon beside
     text, reading top to bottom like the guide itself. */
  .growth-path { grid-template-columns: 1fr; gap: 1.6rem; }
  .growth-path::before { display: none; }
  .growth-path li { grid-template-columns: 4.2rem 1fr; justify-items: start; align-items: center; gap: 0 1rem; text-align: left; }
  .growth-path__art { height: auto; align-items: center; }
  .growth-path__text { justify-items: start; text-align: left; }
  .growth-path__desc { max-width: none; }
  .chapter-nav ol, .principle-grid, .quick-grid { grid-template-columns: 1fr; }
  .principle { min-height: auto; }
  .guide-hero-art { min-height: 27rem; padding-bottom: 3.4rem; }
  .guide-hero-art__corner { bottom: 3rem; }
  .guide-hero-art figcaption { left: 50%; bottom: 0.4rem; width: min(90%, 21rem); transform: translateX(-50%); font-size: 1.45rem; line-height: 1.08; text-align: center; }
  .botanical-divider { margin-block: -1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-one * { scroll-behavior: auto !important; }
}

@media print {
  .site-header, .guide-controls, .guide-journey, .chapter-nav, .guide-edge, .community-row { display: none !important; }
  .guide-masthead { min-height: auto; }
  .guide-chapter, .author-note, .closing { break-inside: avoid; padding-block: 2rem; }
  body.guide-one { background: #fff; }
}

/* ==========================================================================
   v23.3 — WCAG AA contrast repair
   .walk-card sits on the deep forest ground, where the terracotta handwriting
   measured 2.07–2.20:1 (large text needs 3:1). The gift button's cream on
   terracotta measured 4.47:1 against a 4.5:1 requirement.
   ========================================================================== */
.walk-card .handwritten { color: #e3a68c; }
.button--gift { background: #95513e; }
/* Gold numerals read as body-size text on cream: 2.48–2.80:1. */
.principle-number { color: #846628; }

/* Keep essential captions readable after the legacy guide rules above. */
.guide-board figcaption,
.author-photo figcaption { font-size: 1rem; line-height: 1.65; }
.guide-board figcaption strong { font-size: 1.05rem; }