/* Awakening Eden — Living Library v23 restyle
   Styles the library page's existing markup in the v23 design language.
   Loads after eden-v23.css (tokens, header, footer, buttons). */

body.page-library {
  color: var(--forest-deep);
}

.wrap { width: min(calc(100% - 2 * var(--gutter)), var(--container)); margin-inline: auto; }
.skip {
  position: fixed; z-index: 1000; top: 0.75rem; left: 0.75rem;
  padding: 0.75rem 1rem; color: var(--paper-light); background: var(--forest-deep);
  border-radius: 0.5rem; transform: translateY(-160%);
}
.skip:focus { transform: translateY(0); }

/* ---------- Legacy hero ---------- */
.page-library .hero {
  position: relative; overflow: clip;
  min-height: min(72vh, 46rem);
  display: grid; place-items: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  color: var(--paper-light);
  background:
    linear-gradient(115deg, rgb(24 38 27 / 0.93), rgb(24 38 27 / 0.72) 45%, rgb(35 49 38 / 0.5)),
    url("eden-hero-sanctuary-v19.webp") center 40% / cover no-repeat;
}

/* ---------- v23.12 — one illustrated threshold, then a human welcome ---------- */
.library-art-hero {
  position: relative;
  color: var(--paper-light);
  background: var(--forest-deep);
}
.library-art-hero > img {
  display: block;
  width: min(100%, 112rem);
  height: auto;
  margin-inline: auto;
}
.library-art-hero__welcome {
  position: relative;
  margin-top: clamp(-2.5rem, -3vw, -1.2rem);
  padding: clamp(2.8rem, 6vw, 4.8rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 86% 0%, rgb(184 148 75 / 0.2), transparent 35rem),
    linear-gradient(135deg, #173323, #294b36);
}
.library-art-hero__welcome::before {
  content: "";
  position: absolute;
  inset: -2.5rem 0 auto;
  height: 3rem;
  background: linear-gradient(transparent, #173323);
}
.library-art-hero__welcome .wrap { position: relative; }
.library-art-hero h1 {
  max-width: 13ch;
  margin: 1rem 0 0.75rem;
  color: var(--paper-light);
  font-size: clamp(2.7rem, 7vw, 5.5rem);
}
.library-art-hero__welcome p { max-width: 48rem; color: rgb(255 253 247 / 0.88); font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.65; }
.library-art-hero .hero-actions { margin-top: 1.5rem; }

.library-founders { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--paper-light); }
.library-founders__grid { display: grid; grid-template-columns: minmax(15rem, 0.62fr) minmax(0, 1.38fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.library-founders figure { width: min(100%, 22rem); margin: 0 auto; }
.library-founders figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 38%; border: 0.55rem solid var(--paper-light); border-radius: 48% 48% 1.4rem 1.4rem; box-shadow: 0 22px 50px rgb(35 49 38 / 0.15); }
.library-founders h2 { max-width: 15ch; font-size: clamp(2.2rem, 5vw, 4rem); }
.library-founders p { max-width: 47rem; color: var(--umber); font-size: 1.03rem; line-height: 1.7; }

.library-top-paths { padding: clamp(2.8rem, 6vw, 5rem) 0; color: var(--paper-light); background: var(--forest-deep); }
.library-top-paths__heading { max-width: 48rem; margin-bottom: 1.6rem; }
.library-top-paths__heading h2 { color: var(--paper-light); font-size: clamp(2rem, 4.7vw, 3.8rem); }
.library-top-paths__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 1rem; }
.top-path { display: grid; grid-template-columns: auto 1fr; gap: 1rem; min-height: 14rem; padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid rgb(255 253 247 / 0.18); border-radius: 1.6rem; color: var(--paper-light); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease; }
.top-path:hover { transform: translateY(-3px); border-color: rgb(240 207 134 / 0.65); }
.top-path--cinema { background: radial-gradient(circle at 86% 12%, rgb(240 207 134 / 0.26), transparent 38%), linear-gradient(135deg, #783f34, #294b36); }
.top-path--guides { background: linear-gradient(145deg, rgb(184 148 75 / 0.2), rgb(255 253 247 / 0.06)); }
.top-path__icon { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border: 1px solid rgb(255 253 247 / 0.25); border-radius: 50%; background: rgb(255 253 247 / 0.1); }
.top-path__icon img { width: 2.7rem; height: 2.7rem; }
.top-path > span:last-child { display: grid; align-content: start; gap: 0.55rem; }
.top-path small { color: #f0cf86; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.top-path strong { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1; }
.top-path em { color: rgb(255 253 247 / 0.76); font-style: normal; line-height: 1.55; }

.chapter-divider--living-codes { width: 100%; overflow: hidden; background: var(--paper); }
.chapter-divider--living-codes img { display: block; width: 100%; height: auto; min-height: 10rem; object-fit: cover; }
.page-library .botanical-wide-divider { display: none; }

.core-guides { display: grid; gap: 0.85rem; margin-top: 1.1rem; }
.core-guide { display: grid; gap: 0.35rem; padding: 1.05rem 1.1rem; border: 1px solid rgb(105 112 82 / 0.28); border-radius: 1rem; background: rgb(255 253 247 / 0.72); }
.core-guide b { color: var(--forest); font-family: var(--display); font-size: 1.25rem; }
.core-guide span { color: var(--umber); line-height: 1.5; }
.core-guide__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.3rem; }
.core-guide__links a { color: var(--forest); font-weight: 800; text-underline-offset: 0.22rem; }
.page-library .hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 9rem;
  background: linear-gradient(transparent, var(--paper));
}
.hero-inner { position: relative; z-index: 1; max-width: 62rem; }
.breadcrumb {
  display: inline-flex; gap: 0.5rem; align-items: center;
  padding: 0.55rem 0.9rem; border: 1px solid rgb(255 253 247 / 0.3);
  border-radius: 999px; background: rgb(255 253 247 / 0.12);
  backdrop-filter: blur(10px);
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em;
}
.page-library .hero h1 {
  margin: 1.4rem 0 1rem; color: var(--paper-light);
  font-size: clamp(2.9rem, 8vw, 6.2rem);
  text-shadow: 0 2px 28px rgb(8 24 15 / 0.55);
  text-wrap: balance;
}
.page-library .hero .subtitle {
  max-width: 46rem; color: rgb(255 253 247 / 0.94);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.65; font-weight: 600;
}
.mantra {
  margin: 1.3rem 0 1.6rem; padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgb(8 24 15 / 0.45);
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: #f2e5c4;
}

/* Hero action pills — title over subtitle */
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-actions .btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  text-align: left; text-decoration: none;
  padding: 1.05rem 1.8rem; border-radius: 1.6rem;
  border: 1px solid transparent; line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hero-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(8 24 15 / 0.35); }
.hero-actions .btn strong { display: block; font-size: 1.18rem; font-weight: 900; line-height: 1.22; }
.hero-actions .btn small { display: block; font-size: 0.89rem; font-weight: 750; opacity: 0.96; line-height: 1.4; }
.btn.gold { color: var(--forest-deep); background: var(--gold); }
.btn.cream { color: var(--forest); background: var(--paper-light); }
.btn.outline { color: var(--paper-light); background: rgb(255 253 247 / 0.08); border-color: rgb(255 253 247 / 0.5); }
.btn.clay { color: var(--paper-light); background: var(--terracotta); }

/* ---------- Quick navigation ---------- */
.quicknav {
  position: sticky; top: 5.2rem; z-index: 40;
  border-block: 1px solid rgb(105 112 82 / 0.18);
  background: rgb(246 240 226 / 0.94); backdrop-filter: blur(12px);
  padding-block: 0.55rem;
}
.quicknav .wrap { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }
.quicknav a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.95rem; border: 1px solid rgb(105 112 82 / 0.32);
  border-radius: 999px; background: rgb(255 253 247 / 0.6);
  color: var(--forest); font-size: 0.88rem; font-weight: 800; text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}
.quicknav a:hover { background: var(--linen); transform: translateY(-1px); }
.quicknav img { width: 1.35rem; height: 1.35rem; }

/* ---------- Dividers ---------- */
.botanical-wide-divider { width: min(46rem, calc(100% - 2rem)); margin: clamp(1.5rem, 4vw, 2.6rem) auto; }
.botanical-wide-divider img { display: block; width: 100%; height: auto; }

/* ---------- Intro panels ---------- */
.intro { padding-block: clamp(1rem, 3vw, 2rem); }
.intro-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: stretch; }
.panel {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid rgb(105 112 82 / 0.3); border-radius: 2rem;
  background: color-mix(in srgb, var(--linen) 55%, var(--paper-light));
  box-shadow: var(--shadow);
}
.panel h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.start-card { background: linear-gradient(135deg, var(--paper), rgb(232 222 200 / 0.75)); }
.kicker {
  margin-bottom: 0.6rem; color: var(--terracotta);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }
.actions .btn { flex-direction: row; align-items: center; padding: 0.95rem 1.5rem; border-radius: 999px; font-size: 1.02rem; font-weight: 800; }
/* This grid sits inside a narrow side panel, so a fixed three-up squeezed the
   copy to roughly one word per line. Let the columns find their own count. */
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
.path-card {
  display: grid; gap: 0.25rem; padding: 1rem 1.1rem;
  border: 1px solid rgb(105 112 82 / 0.28); border-radius: 1.1rem;
  background: rgb(255 253 247 / 0.72);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.path-card:hover { background: var(--linen); transform: translateY(-2px); box-shadow: 0 10px 24px rgb(35 49 38 / 0.08); }
.path-card b { font-family: var(--display); font-size: 1.2rem; color: var(--forest); }
.path-card span { color: var(--umber); font-size: 0.88rem; line-height: 1.45; }

/* ---------- Library sections ---------- */
.library-section { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.library-section .wrap > *:first-child { margin-top: 0; }
.section-heading {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
  max-width: 56rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.section-icon {
  display: grid; place-items: center; width: 4.2rem; height: 4.2rem; padding: 0.55rem;
  border: 1px solid rgb(105 112 82 / 0.35); border-radius: 50%;
  background: var(--paper-light); box-shadow: 0 10px 24px rgb(35 49 38 / 0.08);
}
.section-icon img { width: 100%; height: 100%; object-fit: contain; }
.section-heading h2 { margin-bottom: 0.4rem; font-size: clamp(1.9rem, 4vw, 3.1rem); }
.section-heading p { margin: 0; color: var(--umber); max-width: 44rem; }

/* ---------- Resource cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.resource-card {
  position: relative; display: flex; flex-direction: column; gap: 0.55rem;
  min-height: 13rem; padding: 1.5rem 1.5rem 1.3rem;
  border: 1px solid rgb(105 112 82 / 0.3); border-radius: 1.4rem;
  background: var(--paper-light);
  box-shadow: 0 10px 28px rgb(35 49 38 / 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
  overflow: clip;
}
/* The card's flex display would otherwise override the browser's default
   [hidden] rule, so search results looked unchanged despite an updated count. */
.resource-card[hidden] { display: none !important; }
.resource-card::after {
  content: ""; position: absolute; right: -1.6rem; bottom: -1.6rem;
  width: 5rem; height: 5rem;
  border: 1px solid rgb(148 160 131 / 0.35);
  border-radius: 50% 50% 0 50%; transform: rotate(25deg);
}
.resource-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgb(35 49 38 / 0.12); }
.resource-card .tag {
  align-self: flex-start; padding: 0.32rem 0.75rem;
  border: 1px solid rgb(167 101 79 / 0.35); border-radius: 999px;
  background: rgb(167 101 79 / 0.08);
  color: var(--terracotta); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Card titles must claim their own colour: eden-v23.css paints .library-section
   headings cream for the homepage's dark band, which turns them invisible on
   this page's cream cards. */
.resource-card h3 { margin: 0; color: var(--forest); font-size: 1.45rem; line-height: 1.12; }
.resource-card p { margin: 0; color: var(--umber); font-size: 0.94rem; line-height: 1.55; flex-grow: 1; }
.resource-card .open {
  align-self: flex-start; margin-top: 0.4rem;
  color: var(--forest); font-weight: 800; font-size: 0.95rem;
  text-underline-offset: 0.3rem;
}
/* A drawn hairline chevron rather than a literal arrow glyph: it keeps the
   forward affordance without the clip-art weight, and stays out of the
   accessibility tree. */
.resource-card .open::after {
  content: "";
  display: inline-block;
  width: 0.4em; height: 0.4em;
  margin-left: 0.5em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-0.08em) rotate(45deg);
  transition: transform 0.25s ease;
}
.resource-card .open:hover::after,
.resource-card .open:focus-visible::after { transform: translate(0.22em, -0.08em) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .resource-card .open::after { transition: none; }
}
/* A card may offer a second route to the same resource (read online, then the
   PDF). The follow-up link stays visibly secondary to the first. */
.resource-card .open + .open { margin-top: 0; color: var(--olive); font-size: 0.88rem; font-weight: 700; }
.muted { color: var(--umber); opacity: 0.85; }

/* ---------- CTA band ---------- */
.cta-band {
  margin: clamp(2.5rem, 6vw, 4rem) auto 1rem;
  padding: clamp(1.8rem, 5vw, 3rem);
  border-radius: 2rem; color: var(--paper-light);
  background:
    radial-gradient(circle at 85% 15%, rgb(184 148 75 / 0.25), transparent 40%),
    linear-gradient(135deg, var(--forest-deep), var(--forest));
  box-shadow: var(--shadow);
}
.cta-band h2 { color: var(--paper-light); font-size: clamp(1.9rem, 5vw, 3.4rem); }
.cta-band p { max-width: 48rem; color: rgb(255 253 247 / 0.88); }
.library-trust-note { margin-top: 1.2rem; color: rgb(255 253 247 / 0.72); font-size: 0.85rem; }
.cta-band .actions .btn.outline { border-color: rgb(255 253 247 / 0.55); color: var(--paper-light); }

/* ---------- Growth badge ---------- */
.growth {
  position: fixed; right: 0.9rem; bottom: 0.9rem; z-index: 30;
  max-width: calc(100% - 1.6rem);
  padding: 0.5rem 0.85rem; border: 1px solid rgb(105 112 82 / 0.3);
  border-radius: 999px; background: rgb(255 253 247 / 0.94);
  box-shadow: 0 12px 30px rgb(35 49 38 / 0.16);
  color: var(--forest); font-weight: 800; font-size: 0.82rem;
}

/* ---------- Reveal ----------
   The library shows its 67 cards immediately: no entrance animation,
   no JS dependency, nothing to fail. Calm beats clever here. */
.page-library .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 68rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 58rem) {
  /* Wrapped to seven rows, a pinned quicknav plus the sticky header claimed
     over half the phone viewport. One swipeable row that scrolls away keeps
     the shortcuts without stealing the screen. */
  .quicknav { position: static; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .quicknav::-webkit-scrollbar { display: none; }
  .quicknav .wrap { width: max-content; min-width: 100%; flex-wrap: nowrap; justify-content: flex-start; padding-inline: var(--gutter); }
  .quicknav a { flex: 0 0 auto; }
  .intro-grid { grid-template-columns: 1fr; }
  .path-grid { grid-template-columns: 1fr; }
  .library-founders__grid, .library-top-paths__grid { grid-template-columns: 1fr; }
  .library-founders__grid { text-align: center; }
  .library-founders h2, .library-founders p { margin-inline: auto; }
}
@media (max-width: 44rem) {
  .cards { grid-template-columns: 1fr; }
  .section-heading { grid-template-columns: 1fr; }
  .section-icon { width: 3.4rem; height: 3.4rem; }
  .hero-actions { display: grid; width: 100%; }
  .growth { font-size: 0.74rem; }
  .library-art-hero__welcome { margin-top: -0.6rem; }
  .library-art-hero > img { min-height: 19rem; object-fit: cover; object-position: 50% 52%; }
  .top-path { grid-template-columns: 1fr; min-height: 0; }
  .chapter-divider--living-codes img { width: 180%; max-width: none; margin-left: -40%; }
}
@media (prefers-reduced-motion: reduce) {
  .resource-card:hover, .quicknav a:hover, .hero-actions .btn:hover, .path-card:hover { transform: none; }
}

/* ---------- v23.5 — Films: a curated cinema library ---------- */
.cinema-section .section-heading { max-width: 60rem; }
.cinema-hook {
  margin: 0.4rem 0 0;
  font-family: var(--display); font-style: italic;
  color: var(--forest); font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.4;
}
.cinema-intro { max-width: 46rem; margin-bottom: 1.4rem; }
.cinema-intro p { color: var(--umber); }
.cinema-choose {
  margin: 0.9rem 0 0;
  font-family: var(--hand); color: var(--terracotta);
  font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.1;
}

.film-doorways { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0.4rem; }
.film-doorways a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgb(105 112 82 / 0.4);
  border-radius: 1.2rem 0.9rem 1.15rem 0.95rem;
  background: rgb(255 253 247 / 0.75);
  color: var(--forest); font-size: 0.88rem; font-weight: 800; text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}
.film-doorways a:hover { background: var(--linen); transform: translateY(-1px); }

.film-category {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px dashed rgb(105 112 82 / 0.4);
  scroll-margin-top: 10.5rem;
}
.film-category__head { max-width: 46rem; margin-bottom: 1.2rem; }
.film-category__head h3 { margin-bottom: 0.3rem; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.film-category__head p { margin: 0; color: var(--umber); }
.film-category__cross { max-width: 46rem; margin: 1.1rem 0 0; color: var(--umber); font-size: 0.9rem; }
.film-category__cross a { color: var(--forest); font-weight: 800; text-underline-offset: 0.25rem; }

.film-card { border-top: none; padding-top: 0; overflow: clip; }
.film-card-photo { position: relative; margin: 0 -1.5rem 0; }
.film-card-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.film-card-photo-credit {
  position: absolute; right: 0.5rem; bottom: 0.5rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: rgb(35 49 38 / 0.55); backdrop-filter: blur(3px);
  color: rgb(255 253 247 / 0.92); font-size: 0.65rem; line-height: 1.4;
  text-decoration: none;
}
.film-card-photo-credit:hover { background: rgb(35 49 38 / 0.78); }
.film-card-body { padding-top: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; flex-grow: 1; }
.film-card h4 {
  margin: 0;
  font-family: var(--display); font-weight: 500;
  color: var(--forest); font-size: 1.45rem; line-height: 1.12;
}
.film-card .film-hook {
  margin: 0; flex-grow: 0;
  font-family: var(--hand); color: var(--terracotta);
  font-size: 1.32rem; line-height: 1.15;
}
.film-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  align-self: flex-start; margin-top: 0.55rem;
  min-height: 3rem; padding: 0.7rem 1.35rem;
  border: 1px solid rgb(35 49 38 / 0.25);
  border-radius: 1.15rem 0.85rem 1.2rem 0.9rem;
  background: var(--olive); color: var(--paper-light);
  font-size: 0.95rem; font-weight: 800; line-height: 1.1; text-decoration: none;
  transition: background-color 170ms ease, transform 170ms ease, box-shadow 170ms ease;
}
.film-btn:hover { background: var(--forest); transform: translateY(-2px); box-shadow: 0 10px 22px rgb(35 49 38 / 0.18); }
.film-btn:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.film-btn--secondary { background: rgb(255 253 247 / 0.85); color: var(--forest); border-color: rgb(105 112 82 / 0.55); }
.film-btn--secondary:hover { background: var(--linen); }
.film-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--paper-light), rgb(110 142 136 / 0.18));
}
@media (max-width: 44rem) {
  .film-card--featured { grid-column: auto; }
  .film-doorways a { flex: 1 1 auto; justify-content: center; }
  .film-btn { align-self: stretch; }
  .film-category { scroll-margin-top: 9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .film-btn:hover, .film-doorways a:hover { transform: none; }
}

/* ==========================================================================
   v23.9 — the Garden Book identity, the overwhelm doorway, and the annotated
   resource card the 2026-08-09 expansion asks for (lens, beginning, caution).
   ========================================================================== */

/* The Library's signature motif at the entrance to the room. */
.garden-book-mark {
  display: grid;
  justify-items: center;
  padding: clamp(1.2rem, 4vw, 2.6rem) var(--gutter) 0;
  text-align: center;
}
.garden-book-mark img {
  width: min(46rem, 100%);
  height: auto;
  aspect-ratio: 1280 / 400;
}
.garden-book-mark__line {
  width: min(52rem, 100%);
  margin: clamp(0.5rem, 2vw, 1.2rem) auto 0;
  color: var(--umber);
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  font-style: italic;
  line-height: 1.5;
}

/* "What do you need today?" — one doorway each, for an overwhelmed arrival. */
.need-today { padding-block: clamp(1.5rem, 4vw, 2.8rem); }
.need-today__head { max-width: 46rem; margin-bottom: clamp(1.1rem, 3vw, 1.8rem); }
.need-today__head h2 { margin: 0.2rem 0 0.4rem; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.need-today__head p { margin: 0; color: var(--umber); }
.need-today__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.need-card {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgb(105 112 82 / 0.32);
  border-radius: 1.1rem;
  background: var(--paper-light);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.need-card:hover { transform: translateY(-2px); background: var(--linen); box-shadow: 0 12px 26px rgb(35 49 38 / 0.1); }
.need-card b { color: var(--forest); font-family: var(--display); font-size: 1.25rem; }
.need-card span { color: var(--umber); font-size: 0.9rem; line-height: 1.5; }
.need-today__note { max-width: 52rem; margin-top: 1rem; color: var(--umber); font-size: 0.85rem; }

/* Annotated resource card ------------------------------------------------- */
.resource-card--annotated { gap: 0.5rem; }
.resource-card--annotated p { flex-grow: 0; }
.resource-card--annotated .open { margin-top: auto; }
.resource-card--annotated .open + .open { margin-top: 0.15rem; }

.shelf-badge {
  align-self: flex-start;
  margin: 0;
  color: var(--olive);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Truth lenses: what kind of knowledge this is. Never styled as a button. */
.lenses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
}
.lenses li {
  padding: 0.2rem 0.55rem;
  border: 1px solid rgb(105 112 82 / 0.4);
  border-radius: 999px;
  color: var(--olive);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.lenses__label {
  border: 0;
  padding-left: 0;
  color: var(--umber);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.resource-card .begin { color: var(--forest); font-size: 0.9rem; }
.resource-card .begin b { display: block; color: var(--olive); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; }
.resource-card .caution {
  padding: 0.6rem 0.75rem;
  border-left: 3px solid rgb(167 101 79 / 0.55);
  border-radius: 0 0.5rem 0.5rem 0;
  background: rgb(167 101 79 / 0.07);
  color: var(--umber);
  font-size: 0.84rem;
  line-height: 1.5;
}
/* Full-strength olive, not 85%: faded it measures under 4.5:1 on the card. */
.resource-card .verified { display: none; }
.film-lens { margin: 0.5rem 0 0; color: rgb(255 253 247 / 0.72); font-size: 0.8rem; }

/* Shared safety gate for follow-along breath practice, and the money lenses. */
.safety-note,
.lens-note {
  max-width: 56rem;
  margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid rgb(184 148 75 / 0.5);
  border-radius: 1.1rem;
  background: rgb(255 253 247 / 0.94);
  color: var(--forest-deep);
}
.safety-note h3 { margin: 0 0 0.5rem; color: var(--forest); font-size: 1.25rem; }
.safety-note p,
.lens-note p { margin: 0 0 0.6rem; color: var(--umber); font-size: 0.92rem; line-height: 1.6; }
.safety-note p:last-child,
.lens-note p:last-child { margin-bottom: 0; }

@media (max-width: 62rem) {
  .need-today__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .need-today__grid { grid-template-columns: 1fr; }
  .garden-book-mark__line { font-size: 1.08rem; }
}

/* Contrast repair: eden-v23.css paints .library-section on the deep forest
   ground, but the section leads and kickers inherited the light-background
   umber/terracotta. Umber on forest-deep measures 2.27:1 — well under WCAG AA
   for body text — so the dark rooms get their own foreground colours. */
.library-section .section-heading p { color: rgb(255 253 247 / 0.84); }
.library-section > .section-heading .kicker { color: #e3b686; }

/* ==========================================================================
   v23.9 — WCAG AA contrast repair on the Library page.
   Every value below was measured against the background actually painted
   behind the text, and every one of them was failing:
     .cinema-intro p / .cinema-choose / .film-category__cross
                              umber on forest-deep          2.27
     .film-category__cross a  forest on forest-deep         1.36  (near-invisible link)
     .resource-card .tag      terracotta on card cream      4.06
     .film-card .film-hook    terracotta on paper-light     4.47
     .film-card-photo-credit  cream on a 55% dark scrim     3.10
     .btn.clay                cream on terracotta           4.47
   ========================================================================== */

/* The Library's section bands are painted forest-deep by eden-v23.css, so any
   prose inside them needs a light foreground rather than the light-ground umber. */
.library-section .cinema-intro p,
.library-section .film-category__head p,
.library-section .film-category__cross { color: rgb(255 253 247 / 0.86); }
.library-section .cinema-choose { color: #e3b686; }
.library-section .film-category__cross a { color: #d4b878; }

.resource-card .tag { border-color: rgb(154 86 66 / 0.45); background: rgb(154 86 66 / 0.09); color: #93503d; }
.film-card .film-hook { color: #9a5642; }
/* Deepen the scrim rather than the type: the credit sits over a photograph. */
.film-card-photo-credit { background: rgb(35 49 38 / 0.82); color: rgb(255 253 247 / 0.98); }
.film-card-photo-credit:hover { background: rgb(35 49 38 / 0.92); }
.btn.clay { background: #95513e; }

/* ---------- Begin Here and community bands ----------
   The first thing a newcomer meets. The seal carries the painted identity, the
   two panels answer "where do I start?" and "who can I ask?" before the
   twelve-section index appears. */
.lib-welcome {
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1rem, 3vw, 1.75rem);
  background: var(--paper, #fdf8ee);
}
.lib-welcome__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.75rem);
  /* The copy column is tall; centring left the seal stranded in white space. */
  align-items: start;
}
.lib-welcome__seal {
  display: block;
  width: clamp(8rem, 16vw, 13rem);
  height: auto;
  margin-top: 0.4rem;
  border-radius: 50%;
}
.lib-welcome__copy h2 {
  margin: 0.35rem 0 0.6rem;
  color: var(--forest);
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.12;
}
.lib-welcome__copy { max-width: 46rem; }
.lib-welcome__copy p { margin: 0 0 1rem; color: var(--umber); font-size: 1rem; line-height: 1.6; }
.lib-welcome__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  counter-reset: libstep;
}
.lib-welcome__steps li {
  position: relative;
  padding-left: 2.4rem;
  color: var(--umber);
  font-size: 0.93rem;
  line-height: 1.5;
}
.lib-welcome__steps li::before {
  counter-increment: libstep;
  content: counter(libstep);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--forest);
  color: var(--paper-light, #fffdf7);
  font-family: var(--display);
  font-size: 0.95rem;
}
.lib-welcome__steps strong { display: block; color: var(--forest); font-size: 1rem; }

.lib-community {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid rgb(105 112 82 / 0.28);
  border-radius: 1.1rem;
  background: rgb(255 253 247 / 0.7);
}
.lib-community h3 { margin: 0 0 0.3rem; color: var(--forest); font-family: var(--display); font-size: 1.3rem; }
.lib-community p { margin: 0 0 0.9rem; color: var(--umber); font-size: 0.92rem; }
.lib-community__links { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.lib-community__links a {
  display: inline-grid;
  gap: 0.1rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper-light, #fffdf7);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.lib-community__links a small { font-weight: 400; font-size: 0.76rem; opacity: 0.82; }
.lib-community__links a:hover { background: var(--forest-deep, #1d3125); }
.lib-community__links a.is-quiet { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1px rgb(52 71 52 / 0.4); }
.lib-community__links a.is-quiet:hover { background: rgb(52 71 52 / 0.07); }

@media (max-width: 52rem) {
  .lib-welcome__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .lib-welcome__steps li { text-align: left; }
  .lib-community__links { justify-content: center; }
}


/* Final Living Library experience pass — 2026-09-27
   Curated front door + lightweight search + unique botanical chapter markers. */
.library-finder {
  padding: clamp(1.25rem, 4vw, 2.5rem) 0;
  background:
    radial-gradient(circle at 10% 10%, rgb(229 196 125 / .17), transparent 20rem),
    radial-gradient(circle at 90% 90%, rgb(75 111 107 / .12), transparent 24rem),
    var(--paper);
}
.library-finder__card {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(22rem, 1.15fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 1px solid rgb(105 112 82 / .26);
  border-radius: 1.6rem;
  background: rgb(255 253 247 / .82);
  box-shadow: 0 18px 44px rgb(35 49 38 / .08);
}
.library-finder__intro h2 {
  margin: .25rem 0 .55rem;
  color: var(--forest);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1;
}
.library-finder__intro p {
  max-width: 38rem;
  margin: 0;
  color: var(--umber);
  line-height: 1.65;
}
.library-search { min-width: 0; }
.library-search__field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  min-height: 3.6rem;
  padding: .45rem .55rem .45rem 1rem;
  border: 1px solid rgb(52 71 52 / .34);
  border-radius: 999px;
  background: var(--paper-light);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
}
.library-search__field > span {
  color: var(--terracotta);
  font-size: 1.35rem;
}
.library-search__input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--forest);
  background: transparent;
  font: inherit;
  font-size: 1rem;
}
.library-search__input::placeholder { color: rgb(80 72 60 / .66); }
.library-search__clear {
  min-height: 2.7rem;
  padding: .45rem .9rem;
  border: 0;
  border-radius: 999px;
  color: var(--paper-light);
  background: var(--forest);
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
}
.library-search__status {
  min-height: 1.4em;
  margin: .55rem 1rem 0;
  color: var(--umber);
  font-size: .82rem;
}
.library-finder__paths {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}
.library-finder__paths a {
  display: grid;
  gap: .15rem;
  padding: .9rem 1rem;
  border-top: 1px solid rgb(105 112 82 / .3);
  color: var(--forest);
  text-decoration: none;
}
.library-finder__paths a:hover,
.library-finder__paths a:focus-visible {
  border-color: var(--terracotta);
  background: rgb(167 101 79 / .045);
}
.library-finder__paths strong {
  font-family: var(--display);
  font-size: 1.08rem;
}
.library-finder__paths span {
  color: var(--umber);
  font-size: .75rem;
  line-height: 1.35;
}
.library-botanical-transition {
  width: min(72rem, calc(100% - 2rem));
  margin: clamp(1.5rem, 4vw, 3rem) auto;
}
.library-botanical-transition img {
  display: block;
  width: 100%;
  max-height: 12rem;
  object-fit: contain;
}
.library-section[hidden] { display: none !important; }

@media (max-width: 64rem) {
  .library-finder__card { grid-template-columns: 1fr; }
  .library-finder__paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 46rem) {
  .library-finder__card { border-radius: 1.2rem; }
  .library-finder__paths { grid-template-columns: 1fr 1fr; }
  .library-search__field { border-radius: 1rem; }
}
@media (max-width: 30rem) {
  .library-finder__paths { grid-template-columns: 1fr; }
}

/* Readability and contrast finish · 16 October 2026 */
.section-heading>.kicker{color:#85442f}
.library-top-paths__heading>.kicker,
.library-section .section-heading>.kicker{color:#f0c98d}
.panel:nth-child(2)>.kicker,
.library-founders__grid>div>.kicker{color:#85442f}
.growth{max-width:min(18rem,calc(100vw - 2rem));white-space:normal;text-align:center}
@media(max-width:46rem){
  .growth{position:static;width:max-content;margin:1.2rem auto 0;font-size:.78rem}
}