/* Our Special Village — the shared shell and site-wide look (late September 2026).

   Taylor redesigned the homepage from scratch in osv-redesign/index.html. This file
   carries that design's shared pieces to every page: the colour and type tokens, the
   Patrick Hand accent, pill buttons that press in, the top bar, the sticky header with
   Urgent Help always showing, mega menus, the phone drawer and thumb bar, the painted
   "Stay connected" path, the sponsor band, and the footer under its dusk hills. The
   markup comes from scripts/sync-header.mjs; the behaviour from js/site.js. It loads
   after site.css and village.css on every page. */

@font-face {
  font-family: "Patrick Hand";
  src: url("/fonts/patrick-hand-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #fffcf5;
  --text: #3a4760;
  --gold-ink: #8e6614;
  --blue: #8fa5c6;
  --blue-ink: #3c5378;
  --blue-soft: #e4e9f2;
  --sage: #7d8f63;
  --sage-ink: #55653e;
  --sage-soft: #e1e7d2;
  --brick: #a9542f;
  --brick-soft: #f4dccd;
  --navy-soft: #2a3b62;
  --f-display: "Outfit", "Mulish", system-ui, sans-serif;
  --f-body: "Mulish", "Segoe UI", system-ui, sans-serif;
  --f-hand: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --font-display: var(--f-display);
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --radius-card: 20px;
  --radius-band: 28px;
  --shadow: 0 1px 2px rgba(29, 44, 76, .05), 0 12px 28px -16px rgba(29, 44, 76, .30);
  --shadow-card: var(--shadow);
  --shadow-lift: 0 2px 4px rgba(29, 44, 76, .06), 0 26px 44px -20px rgba(29, 44, 76, .42);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  /* The top bar scrolls away; only the header bar stays pinned. */
  --osv-topbar-h: 42px;
  --osv-donate-bar-h: 0px;
  --osv-header-h: 78px;
  /* treeline palettes (fall); the season classes below swap them */
  --r-far: #d3dbe3; --t-far-1: #c8d2dd; --t-far-2: #d9dde0;
  --r-mid: #e4d9b6; --t-mid-1: #e2c68c; --t-mid-2: #dab796; --t-mid-3: #cfd0a9;
  --r-near: #dccb99; --t-near-1: #dcae66; --t-near-2: #cb9270; --t-near-3: #b8ba88; --t-near-4: #bfc8d5; --cedar: #97a281;
}
[data-season="winter"] {
  --r-far: #dce2ea; --t-far-1: #d3dae4; --t-far-2: #e0e4ea;
  --r-mid: #e6e7e8; --t-mid-1: #d7dae1; --t-mid-2: #ddd9d9; --t-mid-3: #d0d7df;
  --r-near: #eceeee; --t-near-1: #d0d4dc; --t-near-2: #d9d3d1; --t-near-3: #c6cdd8; --t-near-4: #dfe2e7; --cedar: #8d9b95;
}
[data-season="spring"] {
  --r-far: #d6e0e2; --t-far-1: #cfdad6; --t-far-2: #dde2dc;
  --r-mid: #e0e7cb; --t-mid-1: #cfddb2; --t-mid-2: #e4d2e0; --t-mid-3: #c9d8b4;
  --r-near: #d6e1ba; --t-near-1: #bfd29d; --t-near-2: #d8b9d5; --t-near-3: #f2efe6; --t-near-4: #abc391; --cedar: #8c9e7c;
}
[data-season="summer"] {
  --r-far: #d1dce5; --t-far-1: #c8d5dc; --t-far-2: #d2ddd5;
  --r-mid: #d7e0ba; --t-mid-1: #c2d39f; --t-mid-2: #b6c996; --t-mid-3: #cbd6ab;
  --r-near: #cad7a4; --t-near-1: #a9be86; --t-near-2: #9bb27b; --t-near-3: #b7c88f; --t-near-4: #a7b89f; --cedar: #7f9179;
}

/* ---------- site-wide type ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.012em; }
h1 { font-weight: 600; letter-spacing: -.025em; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }

/* Eyebrows are handwritten notes above a heading, tipped slightly. */
.eyebrow {
  display: inline-block;
  font-family: var(--f-hand);
  font-weight: 400;
  font-size: calc(clamp(25px, 2.3vw, 30px) * .9);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-ink);
  margin: 0 0 10px;
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.center .eyebrow, .text-center .eyebrow { transform-origin: center bottom; }
:is(.theme-navy, .band--navy, .on-dark) .eyebrow { color: var(--gold); }

/* ---------- buttons: pills that sit on a coloured edge and press into it ---------- */
.btn {
  --edge: var(--gold-deep);
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: 0;
  background: var(--gold);
  color: var(--navy);
  border: 2px solid transparent;
  box-shadow: 0 4px 0 var(--edge);
}
.btn:hover { background: #e2b453; color: var(--navy); box-shadow: 0 6px 0 var(--edge); }
.btn:active { box-shadow: 0 1px 0 var(--edge); }
.btn--ghost, .btn--outline { --edge: var(--navy); background: var(--paper); color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover, .btn--outline:hover { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn--light { --edge: rgba(0, 0, 0, .35); background: var(--paper); color: var(--navy); }
.btn--light:hover { background: #fff; color: var(--navy); }
.btn--night { --edge: rgba(0, 0, 0, .4); background: rgba(255, 255, 255, .04); color: var(--on-dark); border-color: rgba(239, 233, 218, .55); }
.btn--night:hover { background: rgba(239, 233, 218, .1); color: var(--on-dark); }
.btn--sm { box-shadow: 0 3px 0 var(--edge); }
.btn--sm:hover { box-shadow: 0 5px 0 var(--edge); }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; opacity: .6; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: translate .18s var(--ease), box-shadow .18s var(--ease), background-color .2s, border-color .2s, color .2s; }
  /* press into the edge instead of shrinking */
  .btn:active { scale: 1; translate: 0 3px; }
}
.arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .arrow { transition: transform .25s var(--spring); }
  a:hover .arrow, button:hover .arrow { transform: translateX(5px); }
}

/* ---------- skip link ---------- */
.skip-link { background: var(--navy); color: var(--on-dark); font-weight: 800; border-radius: 12px; text-decoration: none; }

/* ---------- top bar ---------- */
.site-header {
  position: sticky;
  top: calc(-1 * var(--osv-topbar-h));
  z-index: 50;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar { background: var(--navy); color: var(--on-dark); font-size: 15px; font-weight: 700; line-height: 1.2; }
.topbar-inner { display: flex; align-items: center; justify-content: center; gap: 14px; height: var(--osv-topbar-h); text-align: center; }
.topbar-cta {
  background: var(--gold);
  color: var(--navy);
  font-family: var(--f-display);
  font-weight: 500;
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.topbar-cta:hover { background: #e6b95a; color: var(--navy); }
.tb-short { display: none; }

/* ---------- header bar ---------- */
.header-bar {
  position: relative;
  background: rgba(247, 241, 226, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s;
}
.site-header.scrolled .header-bar { box-shadow: 0 10px 26px -18px rgba(20, 32, 58, .5); border-color: var(--line); }
.header-row { display: flex; align-items: center; gap: 14px; min-height: var(--osv-header-h); }
.site-header .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.site-header .brand-mark { width: 48px; height: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .site-header .brand-mark { transition: transform .5s var(--spring); }
  .site-header .brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }
}
.brand-name { font-family: var(--f-display); font-weight: 600; font-size: 22px; color: var(--navy); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.site-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list > li { margin: 0; }
.nav-top {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.2;
  color: var(--navy);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  white-space: nowrap;
}
.nav-top:hover, .nav-top[aria-expanded="true"] { background: var(--gold-soft); color: var(--navy); }
.nav-top[aria-current="page"], .nav-group.is-current > .nav-top { box-shadow: inset 0 -3px 0 var(--gold); border-radius: 12px 12px 4px 4px; }
.nav-chevron { transition: transform .25s var(--ease); }
.nav-top[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: var(--navy);
  background: var(--paper);
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { border-color: var(--navy); color: var(--navy); }
.urgent-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--brick-soft);
  color: var(--brick);
  border: 2px solid rgba(169, 84, 47, .35);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.urgent-pill:hover { background: #efcbb6; color: var(--brick); }
.beacon { width: 9px; height: 9px; border-radius: 50%; background: var(--brick); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .beacon { animation: osv-beacon 2.6s infinite; }
}
@keyframes osv-beacon {
  0% { box-shadow: 0 0 0 0 rgba(169, 84, 47, .5); }
  70% { box-shadow: 0 0 0 10px rgba(169, 84, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(169, 84, 47, 0); }
}
.header-cta { background: var(--gold); color: var(--navy); border-color: transparent; box-shadow: 0 3px 0 var(--gold-deep); white-space: nowrap; }
.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
}

/* ---------- mega menus ---------- */
.nav-group { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; padding: 0 clamp(16px, 4vw, 40px); display: none; }
.nav-group.open > .mega,
html:not(.js) .nav-group:hover > .mega,
html:not(.js) .nav-group:focus-within > .mega { display: block; }
.mega-inner {
  max-width: calc(1200px - 2 * clamp(16px, 4vw, 40px));
  margin: 6px auto 0;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
  padding: 18px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-group.open > .mega .mega-inner { animation: osv-drop .25s var(--ease); }
}
@keyframes osv-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega-intro { border-radius: 20px; padding: 22px; background: var(--gold-soft); display: flex; flex-direction: column; gap: 14px; }
.mega-intro--blue { background: var(--blue-soft); }
.mega-intro--sage { background: var(--sage-soft); }
.mega-intro strong { font-family: var(--f-display); font-weight: 600; font-size: 28px; color: var(--navy); line-height: 1.05; }
.mega-pic { display: block; margin-top: auto; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .55); }
.mega-pic img { display: block; width: 100%; height: auto; aspect-ratio: 252 / 156; object-fit: contain; mix-blend-mode: multiply; }
.mega-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
  text-decoration: none;
  min-height: 44px;
}
.mega-more:hover { color: var(--gold-ink); }
.mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; align-content: start; }
.mega-grid > li { margin: 0; }
.mega-item { display: block; padding: 12px 14px; border-radius: 16px; text-decoration: none; transition: background-color .2s; }
.mega-item:hover, .mega-item:focus-visible { background: var(--cream); }
.mega-item[aria-current="page"] { background: rgba(215, 164, 62, .16); }
.mega-name { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600; color: var(--navy); font-size: 17.5px; line-height: 1.2; }
.mega-line { display: block; color: var(--muted); font-size: 15px; line-height: 1.4; margin-top: 3px; font-weight: 500; }
.mega-item .arrow { color: var(--gold-deep); opacity: 0; transform: translateX(-4px); }
.mega-item:hover .arrow, .mega-item:focus-visible .arrow { opacity: 1; transform: none; }

/* ---------- header search ---------- */
.header-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 30px -24px rgba(20, 32, 58, .6);
  padding: 14px 0;
}
.header-search.open { display: block; }
.header-search-inner { display: flex; gap: 10px; align-items: center; }
.header-search input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 20px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: #fff;
  font: 500 17px/1.2 var(--f-body);
  color: var(--ink);
}
.header-search input[type="search"]:focus-visible { outline-offset: 2px; }
.header-search-btn { min-height: 52px; }
html:not(.js) .header-search { position: static; display: block; box-shadow: none; }
html:not(.js) .search-toggle { display: none; }

/* ---------- phone drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(20, 32, 58, .45); }
.drawer[hidden] { display: none; }
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--cream);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 40px;
  box-shadow: -20px 0 40px -20px rgba(0, 0, 0, .4);
}
@media (prefers-reduced-motion: no-preference) {
  .drawer:not([hidden]) .drawer-panel { animation: osv-slide .28s var(--ease); }
}
@keyframes osv-slide { from { transform: translateX(40px); opacity: .3; } to { transform: none; opacity: 1; } }
.drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.drawer-top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.drawer-top .brand-mark { width: 42px; height: 42px; }
.drawer-top .brand-name { font-size: 19px; }
.drawer .urgent-pill { display: flex; width: 100%; justify-content: center; min-height: 52px; font-size: 17px; margin-bottom: 12px; }
.drawer-group { background: var(--paper); border-radius: 18px; margin-bottom: 10px; border: 1px solid var(--line); }
.drawer-group summary {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--navy);
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
}
.drawer-group summary::-webkit-details-marker { display: none; }
.drawer-group summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--gold-deep); line-height: 1; }
.drawer-group[open] summary::after { content: "\2212"; }
.drawer-group ul { list-style: none; margin: 0; padding: 0 6px 8px; }
.drawer-group li { margin: 0; }
.drawer-group .mega-item .arrow { opacity: 1; transform: none; }
.drawer-link {
  display: flex;
  align-items: center;
  min-height: 54px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--navy);
  text-decoration: none;
  padding: 0 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 10px;
}
.drawer-link[aria-current="page"] { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.drawer-cta { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- phone thumb bar ---------- */
.thumb-bar { display: none; }
@media (max-width: 700px) {
  .thumb-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 55;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 24px;
    background: rgba(255, 252, 245, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px -16px rgba(20, 32, 58, .55), 0 0 0 1px var(--line);
    transform: translateY(140%);
    visibility: hidden;
    transition: transform .45s var(--spring), visibility 0s linear .45s;
  }
  .thumb-bar--one { grid-template-columns: 1fr; }
  .thumb-bar.show { transform: none; visibility: visible; transition: transform .45s var(--spring), visibility 0s; }
  html:not(.js) .thumb-bar { transform: none; visibility: visible; }
  .thumb-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 17px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 16.5px;
    text-decoration: none;
  }
  .thumb-bar .tb-start { background: var(--gold); color: var(--navy); }
  .thumb-bar .tb-urgent { background: var(--brick-soft); color: var(--brick); }
  body { padding-bottom: 0; }
  .footer-legal { padding-bottom: 96px; }
}

/* ---------- "Stay connected": four stops along a painted path ---------- */
.community-links { padding: clamp(40px, 5vw, 72px) 0 clamp(8px, 2vw, 24px); border: 0; background: none; }
.community-links-head { text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.community-links-head .eyebrow { transform-origin: center bottom; }
.community-links-head h2 { font-size: clamp(32px, 4.2vw, 50px); margin: 0; }
.community-path { position: relative; }
.community-path .trail { position: absolute; left: 8%; width: 84%; top: 36px; height: 84px; pointer-events: none; z-index: 0; overflow: visible; }
.trail-edge { fill: none; stroke: #e5cf9a; stroke-width: 30; stroke-linecap: round; }
.trail-mid { fill: none; stroke: #f4e5bd; stroke-width: 20; stroke-linecap: round; }
.community-grid { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.community-grid > .stop { position: relative; z-index: 1; margin: 0; }
.community-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 0 6px;
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  height: 100%;
}
.community-card .plot {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow), 0 0 0 6px var(--cream);
}
.community-card .plot img { width: 90px; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .community-card .plot { transition: transform .45s var(--spring); }
  a.community-card:hover .plot { transform: translateY(-8px) rotate(-5deg); }
}
.stop-title { display: block; margin-top: 18px; font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--navy); }
.stop-line { display: block; margin-top: 8px; font-size: 15.5px; color: var(--muted); line-height: 1.52; }
a.community-card:hover .stop-title { color: var(--gold-ink); }
.community-card.is-current .plot { box-shadow: var(--shadow), 0 0 0 6px var(--cream), 0 0 0 9px var(--gold); }
@media (max-width: 960px) {
  .community-grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .community-path .trail { display: none; }
}
@media (max-width: 460px) {
  .community-grid { grid-template-columns: 1fr; }
}

/* ---------- sponsor band (sponsors.js) ---------- */
.sponsor-block { padding: clamp(20px, 3vw, 40px) 0 0; background: none; border: 0; }
.sponsor-block > .container {
  position: relative;
  overflow: hidden;
  background: var(--gold-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: clamp(26px, 3.6vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 32px;
  text-align: left;
}
.sponsor-block > .container::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215, 164, 62, .35), transparent 70%);
  pointer-events: none;
}
.sponsor-block h2 { grid-column: 1; font-size: clamp(24px, 2.6vw, 32px); margin: 0; }
.sponsor-block p { grid-column: 1; margin: 0; color: var(--text); max-width: 46em; }
.sponsor-block .sponsor-logos { grid-column: 1; }
.sponsor-block .btn { grid-column: 2; grid-row: 1 / span 3; position: relative; }
@media (max-width: 760px) {
  .sponsor-block > .container { grid-template-columns: 1fr; }
  .sponsor-block .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
}

/* ---------- footer under the dusk hills ---------- */
.site-footer {
  position: relative;
  background: none;
  color: var(--on-dark-muted);
  padding: 0;
  margin-top: clamp(40px, 6vw, 80px);
  font-size: 15.5px;
}
.foot-hills { display: block; width: 100%; height: auto; }
.foot-hill-back { fill: var(--navy); }
.foot-hill-front { fill: var(--navy-deep); }
.footer-body { background: var(--navy-deep); margin-top: -1px; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 34px 0 30px; margin: 0; align-items: start; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 24px; line-height: 1; color: var(--paper); margin: 0; }
.footer-brand:hover { color: var(--paper); }
.footer-brand .brand-mark { width: 48px; height: 48px; background: var(--paper); border-radius: 50%; padding: 3px; box-sizing: border-box; }
.footer-intro p { margin: 14px 0 0; font-size: 16px; color: var(--on-dark); max-width: 22em; line-height: 1.55; }
.footer-intro .footer-contact { font-size: 15.5px; }
.footer-intro .footer-contact a { color: var(--on-dark); }
.footer-intro .footer-contact a:hover { color: var(--gold); }
.site-footer .foot-group h2 {
  font-family: var(--f-hand);
  font-size: calc(27px * .9);
  font-weight: 400;
  color: var(--gold);
  margin: 0 0 8px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.1;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer li { margin: 0; }
.site-footer .foot-group a { color: var(--on-dark); text-decoration: none; font-size: 15.5px; display: inline-block; padding: 5px 0; line-height: 1.62; }
.site-footer .foot-group a:hover { color: var(--gold); }
.site-footer .footer-legal {
  border-top: 1px solid rgba(239, 233, 218, .16);
  padding: 22px 0 40px;
  font-size: 14.5px;
  display: grid;
  gap: 6px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.site-footer .footer-legal p { margin: 0; }

/* ---------- print ---------- */
@media print {
  .topbar, .header-bar, .drawer, .thumb-bar, .foot-hills, .sponsor-block { display: none !important; }
  .site-header { position: static; }
}

/* ---------- widths ---------- */
@media (max-width: 1320px) { .header-cta { display: none; } }
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .tb-long { display: none; }
  .tb-short { display: inline; }
  .header-actions .search-toggle { display: none; }
  .brand-name { font-size: 19px; }
  .site-header .brand-mark { width: 42px; height: 42px; }
  .urgent-pill { padding: 0 13px; font-size: 14.5px; }
}
@media (max-width: 460px) {
  .header-row .brand-name { display: none; }
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* the pause button in the homepage hero stills every ambient loop, including the beacon */
html.still .beacon { animation-play-state: paused; }
@media (max-width: 700px) {
  .thumb-bar.show.typing { transform: translateY(140%); visibility: hidden; }
}

/* ---------- every page's opening section sits in the same Middle Tennessee landscape ----------
   The homepage's seasonal sky and rolling hills, quieter: a soft sky wash at the top of the
   first section and three low ridges with their treelines along its foot (site.js adds the
   ridges and plants the trees). The page's own painting stands in front of them. */
:root { --sky-a: #fbf3df; --sky-b: rgba(215, 164, 62, .26); --sky-c: rgba(143, 165, 198, .22); }
[data-season="winter"] { --sky-a: #f3f4f4; --sky-b: rgba(143, 165, 198, .32); --sky-c: rgba(143, 165, 198, .24); }
[data-season="spring"] { --sky-a: #f7f4e4; --sky-b: rgba(125, 143, 99, .22); --sky-c: rgba(244, 220, 205, .45); }
[data-season="summer"] { --sky-a: #fdf4dc; --sky-b: rgba(215, 164, 62, .34); --sky-c: rgba(143, 165, 198, .28); }
main > .has-hills {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(760px 380px at 88% 0%, var(--sky-b), transparent 66%),
    radial-gradient(820px 400px at 6% -10%, var(--sky-c), transparent 62%),
    linear-gradient(180deg, var(--sky-a) 0%, var(--cream) 70%);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.page-hills {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(110px, 15vw, 210px);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  opacity: .8;
}
/* the page's painting sits in the landscape the way the homepage panorama does */
.has-hills :is(.village-art, seasonal-artwork, .page-visual, .pack-art, .hub-hero-art) img { mix-blend-mode: multiply; }
main > .has-hills--text { padding-bottom: calc(clamp(110px, 15vw, 210px) * .8); }
@media print { .page-hills { display: none; } main > .has-hills { background: none; } }
.r-far { fill: var(--r-far); } .r-mid { fill: var(--r-mid); } .r-near { fill: var(--r-near); }
/* The directory's "Back to search" button rides above the phone thumb bar. */
@media (max-width: 700px) {
  .dir-back { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- design review fixes (2026-09-29) ---------- */
/* A button marked hidden stays hidden (the Resource Library's "All topics" showed with nothing chosen). */
.btn[hidden] { display: none; }
/* White bands become the redesign's warm paper, so pages don't flip between stark white and cream. */
.theme-white { background: var(--paper); }

@media (max-width: 460px) {
  /* Stay connected: on phones each stop is a compact row (small plot beside its words), not a tall stack. */
  .community-grid { grid-template-columns: 1fr; row-gap: 12px; }
  .community-card { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
  .community-card .plot { width: 76px; height: 76px; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--cream); }
  .community-card .plot img { width: 56px; }
  .community-card .stop-title { margin-top: 0; font-size: 19px; }
  .community-card .stop-line { margin-top: 4px; font-size: 14.5px; line-height: 1.45; }
  .community-card > :not(.plot) { display: block; }
  .community-card { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; column-gap: 14px; }
  .community-card .plot { grid-row: 1 / span 2; }
  .community-card .sr-only { position: absolute; }
  /* Footer: link groups sit two across instead of one long column. */
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .site-footer .footer-intro { grid-column: 1 / -1; }
  .site-footer .foot-group a { font-size: 15px; }
}

/* Events: every date reads like the calendar blocks pinned on the homepage board. */
.event-row { background: var(--paper); border-radius: var(--r); }
.event-date { background: #fff; border: 0; box-shadow: 0 0 0 2px var(--navy); border-radius: 14px; padding: 0 0 6px; font-family: var(--f-display); }
.event-date .dow { background: var(--navy); color: var(--gold); padding: 4px 0 3px; margin-bottom: 4px; font-size: 12px; letter-spacing: .12em; }
.event-date .day { font-family: var(--f-display); font-weight: 600; }
.event-date .mon { font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .event-row { transition: translate .3s var(--spring), box-shadow .3s var(--ease); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .event-row:hover { translate: 0 -3px; box-shadow: var(--shadow-lift); }
}

/* Village Businesses: three across on wide screens, so 28 families' photos read as a gallery instead of a
   15,000px scroll; each photo stays square with its tuned focal point. Phones keep one column but a
   shorter 4:3 photo. */
@media (min-width: 1100px) {
  .grid-2.business-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .business-list .biz-media { aspect-ratio: 4 / 3; }
}

/* "What do you need today?" lists elsewhere (Resource Library) match the homepage's picture doors:
   paper cards with the round arrow knob, tints cycling gold / blue / sage / brick. */
.task-shortcuts a {
  --tint: var(--gold-soft);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px 10px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.25;
  color: var(--navy);
}
.task-shortcuts a::after {
  content: "\2192";
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--navy);
  font-size: 18px;
  transition: background-color .25s, transform .35s var(--spring);
}
.task-shortcuts li:nth-child(4n+2) a { --tint: var(--blue-soft); }
.task-shortcuts li:nth-child(4n+3) a { --tint: var(--sage-soft); }
.task-shortcuts li:nth-child(4n+4) a { --tint: var(--brick-soft); }
.task-shortcuts a:hover { color: var(--navy); }
.task-shortcuts a:hover::after { background: var(--gold); transform: translateX(3px); }

/* Small phones (320–374px): the top bar stays one line and the header fits without sideways scroll. */
@media (max-width: 374px) {
  .topbar { font-size: 13.5px; }
  .topbar-inner { gap: 10px; }
  .topbar-cta { padding: 5px 12px; }
  .header-row { gap: 8px; }
  .header-actions { gap: 8px; }
  .urgent-pill { padding: 0 11px; gap: 7px; font-size: 14px; }
  .menu-btn { padding: 0 12px; font-size: 15px; gap: 6px; }
}
@media (max-width: 560px) {
  .event-date { width: 64px; min-height: 0; }
  .event-date .dow, .event-date .day, .event-date .mon { width: 100%; }
}
/* Paintings that carry their own paper melt into the page's sky at the edges, like the homepage panorama. */
.has-hills :is(.village-art, seasonal-artwork, .page-visual, .pack-art, .hub-hero-art) img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%);
  mask-composite: intersect;
}

/* Contrast and size floors from the design review (WCAG AA). */
:root { --brick-ink: #8f4424; }                 /* 5.3:1 on the brick-soft pill (was 4.0:1) */
.urgent-pill, .urgent-pill:hover, .thumb-bar .tb-urgent { color: var(--brick-ink); }
.eyebrow { color: var(--gold-dark); }           /* 5.0:1 even on gold-soft cards */
:is(.theme-navy, .band--navy, .on-dark) .eyebrow { color: var(--gold); }
.pill { font-size: 13.5px; }
.review-status { font-size: 14px; }
.btn--sm { font-size: 15px; }
@media (max-width: 460px) {
  .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer a { overflow-wrap: anywhere; }
}

/* "More" links across the site read like the homepage's: navy Outfit words with a gold arrow that nudges on hover. */
.more-link { font-family: var(--f-display); font-weight: 600; color: var(--navy); }
.more-link::after { content: " \2192"; color: var(--gold-deep); display: inline-block; transition: transform .25s var(--spring); }
.more-link:hover { color: var(--navy); }
.more-link:hover::after { transform: translateX(4px); }
@media (max-width: 460px) {
  .community-card { row-gap: 4px; column-gap: 14px; align-content: center; align-items: start; height: auto; }
  .community-card .plot { align-self: center; }
  .community-card .stop-title { align-self: end; }
}
.review-actions .btn, .review-actions .btn--sm { font-size: 15px; }
.lib-topic-count, .free { font-size: 13.5px; }

/* ================= Start Here, as engaging as the homepage (Taylor, 2026-09-29) =================
   The three starting points and the local-help needs are picture doors; "start with this today" is
   a note pinned to the page; the 30-day map is a painted trail with a stop for each step; the
   people who can help sit in a dusk card under the stars. Words and links are unchanged. */
#start-here-app { max-width: 1100px; }
#start-here-app > .start-path-bar, #start-here-content { max-width: 860px; margin-inline: auto; }
body[data-start-here-path="local-help"] #start-here-content { max-width: 1100px; }
.start-choice { text-align: center; }
.start-choice > h2 { font-size: clamp(30px, 3.8vw, 44px); }
.start-choice > p { margin-inline: auto; color: var(--text); }

/* picture doors */
.start-choice-grid, .start-local-grid { gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(20px, 2.6vw, 32px); }
.start-choice-button, .start-local-card {
  --tint: var(--gold-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  background: var(--paper);
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
}
.start-choice-grid > :nth-child(2), .start-local-grid > :nth-child(4n+2) { --tint: var(--blue-soft); }
.start-choice-grid > :nth-child(3), .start-local-grid > :nth-child(4n+3) { --tint: var(--sage-soft); }
.start-local-grid > :nth-child(4n+4) { --tint: var(--brick-soft); }
.start-choice-button:hover, .start-local-card:hover { background: var(--paper); color: var(--navy); }
.start-choice-button .door-art, .start-local-card .door-art { display: block; margin: 10px 10px 0; border-radius: 20px; background: var(--tint); aspect-ratio: 2 / 1; overflow: hidden; }
.start-choice-button .door-art img, .start-local-card .door-art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8px 10px 2px; }
.start-choice-button .door-foot { display: flex; align-items: center; gap: 14px; padding: 16px 18px 18px 20px; flex: 1; }
.start-choice-button .door-label { flex: 1; font: 600 clamp(18px, 1.5vw, 20.5px)/1.2 var(--f-display); color: var(--navy); }
.start-choice-button .knob, .start-local-card .knob { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--tint); color: var(--navy); font: 20px var(--f-display); }
.start-local-card { padding-bottom: 18px; }
.start-local-card .start-local-title { display: block; padding: 16px 20px 0; font: 600 20px/1.2 var(--f-display); color: var(--navy); }
.start-local-card .start-local-blurb { display: block; padding: 6px 20px 0; color: var(--text); font-size: 16px; line-height: 1.5; flex: 1; }
.start-local-card .knob { margin: 14px 20px 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .start-choice-button, .start-local-card { transition: transform .35s var(--spring), box-shadow .35s var(--ease); }
  .start-choice-button .door-art img, .start-local-card .door-art img { transition: transform .6s var(--ease); }
  .start-choice-button .knob, .start-local-card .knob { transition: background-color .25s, transform .35s var(--spring); }
  .start-choice-button:hover, .start-local-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-lift); }
  .start-choice-button:hover .door-art img, .start-local-card:hover .door-art img { transform: scale(1.06); }
  .start-choice-button:hover .knob, .start-local-card:hover .knob { background: var(--gold); transform: translateX(3px); }
}
.start-local > h2 { text-align: center; font-size: clamp(30px, 3.8vw, 44px); }
.start-local-directory { text-align: center; margin-top: 28px; }

/* starting-point bar: a signpost */
.start-path-bar { background: var(--paper); border-radius: 999px; padding: 10px 12px 10px 24px; box-shadow: var(--shadow); }
.start-path-kicker { font-family: var(--f-hand); font-size: 20px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gold-dark); }
@media (max-width: 560px) { .start-path-bar { border-radius: 22px; flex-direction: column; align-items: flex-start; padding: 14px 16px; } }

/* start today: a note pinned to the page */
.start-today { position: relative; border: 0; border-radius: 6px; background: #fbf0cf; padding: clamp(30px, 4vw, 44px) clamp(22px, 4vw, 40px) clamp(24px, 3vw, 34px); box-shadow: 0 22px 34px -22px rgba(60, 40, 10, .55); rotate: -1deg; margin-block: 8px 44px; }
.start-today .pushpin { position: absolute; top: -12px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--brick) 32% 100%); box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35); }
.start-today::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; background: linear-gradient(135deg, #f1dfae 50%, var(--cream) 50%); border-radius: 0 0 6px 0; }
.start-today h2 { font-size: clamp(26px, 3.2vw, 36px); }
.start-today p { font-size: 18px; color: var(--text); }

/* 30-day map: a painted trail down the page with a stop for each step */
.start-map > h2 { font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 24px; }
.start-stage-grid { position: relative; grid-template-columns: 1fr; gap: 22px; padding-left: 92px; }
.start-stage-grid::before { content: ""; position: absolute; left: 30px; top: 24px; bottom: 24px; width: 30px; border-radius: 30px; background: #f4e5bd; box-shadow: inset 0 0 0 5px #e5cf9a; }
.start-stage { background: var(--paper); border-radius: 22px; padding: 22px 26px 24px; box-shadow: var(--shadow); }
.start-stage-number { position: absolute; left: -92px; top: 12px; z-index: 1; width: 90px; height: 62px; margin: 0; border-radius: 0; background: none; color: var(--navy); font: 600 28px/1 var(--f-display); display: flex; align-items: center; justify-content: center; padding-right: 14px; }
.start-stage-number::before { content: ""; position: absolute; left: 14px; top: 0; width: 62px; height: 62px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow), 0 0 0 5px var(--cream), 0 0 0 8px var(--gold); z-index: -1; }
.start-stage:nth-child(2) .start-stage-number::before { box-shadow: var(--shadow), 0 0 0 5px var(--cream), 0 0 0 8px var(--blue); }
.start-stage:nth-child(3) .start-stage-number::before { box-shadow: var(--shadow), 0 0 0 5px var(--cream), 0 0 0 8px var(--sage); }
.start-stage:nth-child(4) .start-stage-number::before { box-shadow: var(--shadow), 0 0 0 5px var(--cream), 0 0 0 8px var(--brick); }
.start-stage h3 { font-size: 22px; }
@media (max-width: 560px) {
  .start-stage-grid { padding-left: 60px; }
  .start-stage-grid::before { left: 17px; width: 22px; }
  .start-stage-number { left: -62px; width: 58px; height: 46px; padding-right: 10px; font-size: 21px; }
  .start-stage-number::before { left: 5px; width: 46px; height: 46px; }
  .start-stage { padding: 18px 18px 20px; }
}

/* people who can help: a dusk card */
.start-contacts {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  padding: clamp(28px, 4vw, 44px);
  border: 0;
  border-radius: var(--r-xl);
  color: var(--on-dark);
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 28% 64%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 46% 18%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 63% 48%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 78% 28%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 88% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(900px 420px at 80% 0%, rgba(143, 165, 198, .22), transparent 70%),
    var(--navy-deep);
  box-shadow: var(--shadow-lift);
}
.start-contacts .moon { position: absolute; top: 22px; right: 28px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fffaf0, #efe2c2 60%, #d9c79c); box-shadow: 0 0 50px 12px rgba(247, 226, 176, .2); }
.start-contacts h2 { color: var(--paper); font-size: clamp(28px, 3.4vw, 38px); position: relative; padding-right: 70px; }
.start-contacts .btn--outline { --edge: rgba(0, 0, 0, .4); background: rgba(255, 255, 255, .04); color: var(--on-dark); border-color: rgba(239, 233, 218, .55); }
.start-contacts .btn--outline:hover { background: rgba(239, 233, 218, .1); color: var(--on-dark); }
.start-closing { text-align: center; font-family: var(--f-hand); font-weight: 400; font-size: 24px; color: var(--navy); margin-top: 26px; }

/* ================= The homepage's life on every page (Taylor, 2026-09-29) =================
   The same small moments, used the same way everywhere: cards rise gently into place as they scroll
   into view, "at a glance" boxes are notes pinned to the page, related guides stand on a bookshelf,
   navy bands are dusk skies with stars and a moon, and accordions are paper cards with a gold knob. */

/* gentle reveal (site.js adds .osv-reveal; nothing is hidden without JavaScript or with motion off) */
@media (prefers-reduced-motion: no-preference) {
  .js .osv-reveal { opacity: 0; translate: 0 22px; }
  .js .osv-reveal.in { opacity: 1; translate: 0 0; transition: opacity .7s var(--ease), translate .7s var(--ease); }
}

/* at a glance: a note pinned to the page */
.guide-at-glance { position: relative; border: 0 !important; border-radius: 6px !important; background: #fbf0cf !important; padding-top: 30px !important; rotate: -.6deg; box-shadow: 0 20px 30px -22px rgba(60, 40, 10, .55) !important; overflow: visible; }
.guide-at-glance::before { content: ""; position: absolute; top: -11px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--brick) 32% 100%); box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35); }
.guide-at-glance h2 { font-family: var(--f-hand); font-weight: 400; font-size: 26px; color: var(--gold-dark); letter-spacing: 0; }

/* related guides: books on a shelf */
.related-grid { position: relative; padding-bottom: 24px; }
.related-card { --c: var(--gold); position: relative; min-height: 124px; padding: 18px 18px 18px 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px 16px 16px 6px; box-shadow: var(--shadow); overflow: hidden; }
.related-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--c); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .12); }
.related-card::after { content: ""; position: absolute; top: -1px; right: 16px; width: 12px; height: 28px; background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); transition: height .35s var(--spring); }
.related-grid > :nth-child(4n+2) { --c: var(--blue); }
.related-grid > :nth-child(4n+3) { --c: var(--brick); }
.related-grid > :nth-child(4n+4) { --c: var(--sage); }
.related-card strong { font-size: 18px; padding-right: 18px; }
.related-card:hover { border-color: var(--line); }
.related-card:hover::after { height: 40px; }
.related-grid::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: 4px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #c99a45, #9d7128); box-shadow: 0 9px 12px -6px rgba(80, 50, 10, .5); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .related-card { transition: translate .4s var(--spring), rotate .4s var(--spring), box-shadow .4s var(--ease); transform-origin: 50% 100%; }
  .related-card:hover { translate: 0 -8px; rotate: -1.2deg; box-shadow: var(--shadow-lift); }
}

/* navy bands: a dusk sky */
.band--navy, .theme-navy {
  background:
    radial-gradient(1.5px 1.5px at 8% 18%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 22% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 37% 12%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 55% 40%, rgba(255,255,255,.45), transparent),
    radial-gradient(2px 2px at 71% 16%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 84% 60%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 94% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(900px 460px at 82% 0%, rgba(143, 165, 198, .2), transparent 70%),
    var(--navy-deep);
}

/* accordions: paper cards with a round gold knob */
details.accordion, details.care-accordion { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
details.accordion > summary, details.care-accordion > summary { font-family: var(--f-display); font-weight: 600; color: var(--navy); }
details.accordion[open], details.care-accordion[open] { box-shadow: var(--shadow-lift); }

/* ================= Guide reader: one chapter at a time (js/guide-reader.js) ================= */
.guide-content.gr-on { max-width: 1160px; }
.gr-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.gr-main { min-width: 0; max-width: 760px; }
.gr-side { position: sticky; top: calc(var(--osv-header-h) + 20px); display: grid; gap: 22px; max-height: calc(100vh - var(--osv-header-h) - 40px); overflow: auto; padding: 14px 6px 10px 4px; }
.gr-side .guide-at-glance { margin: 0; }
.gr-side .guide-at-glance ul { padding-left: 1.1em; }
.gr-side .guide-at-glance li { font-size: 15.5px; }
.gr-on .page-toc, .gr-on .disclosure-tools { display: none; }

.gr-rail { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 18px 16px 14px; }
.gr-head { display: grid; gap: 8px; padding: 0 4px 12px; }
.gr-kicker { font: 400 23px/1 var(--f-hand); color: var(--gold-dark); transform: rotate(-2deg); transform-origin: left bottom; }
.gr-progress { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
.gr-bar { flex: 1; height: 8px; border-radius: 8px; background: var(--sand); overflow: hidden; }
.gr-bar i { display: block; height: 100%; background: var(--gold); border-radius: 8px; transition: width .5s var(--ease); }
.gr-toggle { display: none; }
.gr-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gr-list::before { content: ""; position: absolute; left: 21px; top: 18px; bottom: 18px; width: 4px; border-radius: 4px; background: #eadcb4; }
.gr-list li { margin: 0; }
.gr-stop { position: relative; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 8px 8px 8px 8px; border-radius: 14px; text-decoration: none; color: var(--navy); }
.gr-stop:hover { background: var(--cream); color: var(--navy); }
.gr-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: 0 0 0 2px #e5cf9a; font: 600 14px/1 var(--f-display); color: var(--navy); z-index: 1; }
.gr-name { font: 600 15.5px/1.25 var(--f-display); }
.gr-min { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.gr-stop.is-read .gr-dot { background: var(--sage-soft); box-shadow: 0 0 0 2px var(--sage); color: var(--sage-ink); }
.gr-stop[aria-current="step"] { background: var(--gold-soft); }
.gr-stop[aria-current="step"] .gr-dot { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 6px rgba(215, 164, 62, .25); color: var(--navy); }
.gr-all { margin-top: 10px; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--line); background: none; font: 600 15px var(--f-display); color: var(--navy); cursor: pointer; padding-top: 10px; }
.gr-all:hover { color: var(--gold-ink); }

/* chapters */
.gr-on .guide-section { scroll-margin-top: calc(var(--osv-header-h) + 20px); }
.gr-on .guide-sections { display: grid; gap: 14px; }
.gr-on .guide-sections > details.gr-chapter > summary { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 16px; font-size: 20px; }
.gr-meta { font: 800 12.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gr-on details.gr-chapter[open] { border-color: rgba(215, 164, 62, .55); box-shadow: 0 0 0 3px rgba(215, 164, 62, .18), var(--shadow-lift); }
.gr-on details.gr-chapter[open] > summary { font-size: clamp(24px, 2.4vw, 30px); }
.gr-on details.gr-chapter:not([open]) > summary { color: var(--navy); }
.gr-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 2px dashed #eadcb4; }
.gr-back { border: 0; background: none; min-height: 44px; padding: 0 6px; font: 600 16px var(--f-display); color: var(--navy); cursor: pointer; }
.gr-back:hover { color: var(--gold-ink); }
.gr-forward { margin-left: auto; max-width: 100%; text-align: left; white-space: normal; line-height: 1.25; }
.gr-forward-k { font-family: var(--f-hand); font-size: 20px; font-weight: 400; margin-right: 2px; }
.gr-done { margin: 0; font: 400 22px var(--f-hand); color: var(--sage-ink); }

/* phones and tablets: the trail becomes a sticky bar under the header */
@media (max-width: 1023px) {
  .gr-layout { grid-template-columns: 1fr; gap: 20px; }
  .gr-side { position: static; max-height: none; overflow: visible; padding: 0; display: contents; }
  .gr-side .guide-at-glance { order: 0; }
  .gr-main { order: 2; max-width: none; }
  .gr-rail { order: 1; position: sticky; top: calc(var(--osv-header-h) + 8px); z-index: 20; padding: 10px 12px; border-radius: 18px; }
  .gr-head { display: none; }
  .gr-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border: 0; background: none; cursor: pointer; text-align: left; padding: 0 4px; }
  .gr-toggle-now { font: 600 15.5px/1.25 var(--f-display); color: var(--navy); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .gr-toggle-cue { flex-shrink: 0; font-size: 13.5px; font-weight: 800; color: var(--gold-dark); }
  .gr-list, .gr-all { display: none; }
  .gr-rail.open .gr-list { display: grid; margin-top: 8px; max-height: 60vh; overflow: auto; }
  .gr-rail.open .gr-all { display: block; }
}
@media print { .gr-rail, .gr-next, .gr-meta { display: none !important; } .gr-layout { display: block; } }
.gr-forward > span { display: inline; }
.gr-on .guide-sections > details.gr-chapter > summary { position: relative; padding-right: 64px; }
.gr-on .guide-sections > details.gr-chapter > summary::after { position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); content: "+"; font-size: 24px; font-weight: 500; color: var(--navy); }
.gr-on .guide-sections > details.gr-chapter[open] > summary::after { content: "\2212"; background: var(--gold); }
@media (max-width: 1023px) { .gr-on .guide-section { scroll-margin-top: calc(var(--osv-header-h) + 84px); } }

/* ================= Page openings: words and painting side by side (Taylor, 2026-09-29) =================
   Every page used to open with its words and then a painting as wide as the page, so the first screen
   was all introduction. Now the words sit beside the painting in the hills, like the homepage, and the
   page's own content starts on the first screen. Phones keep the painting smaller, under the words. */
@media (min-width: 900px) {
  main > .has-hills :is(.pack-hero-grid, .page-hero-grid) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
  main > .has-hills :is(.pack-hero-grid, .page-hero-grid) > :first-child { max-width: none; }
  main > .has-hills .page-visual { order: 0; align-self: end; margin: 0; }
  main > .has-hills .page-visual :is(.village-art, .pack-art, seasonal-artwork) { width: 100%; max-width: 560px; margin: 0 0 0 auto; }
  main > .has-hills h1 { font-size: clamp(38px, 4.2vw, 56px); }
  main > .has-hills { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(56px, 7vw, 96px); }
}
@media (max-width: 899px) {
  main > .has-hills .page-visual :is(.village-art, .pack-art, seasonal-artwork) { max-width: 420px; margin: 8px auto 0; }
}
@media (min-width: 900px) {
  main > .has-hills .page-hills { height: 120px; }
  main > .has-hills, main > .has-hills--text { padding-bottom: 104px; }
  main > .has-hills h1 { font-size: clamp(34px, 3.6vw, 48px); }
}
@media (min-width: 900px) {
  main > .has-hills .page-hills { height: 200px; }
  main > .has-hills, main > .has-hills--text { padding-bottom: 150px; }
  main > .has-hills .page-visual { margin-bottom: -110px; position: relative; z-index: 1; }
}

/* Hubs: the guide list is a bookshelf, like Popular guides on the homepage. */
.hub-cards { gap: 44px 24px !important; padding-bottom: 20px; }
.hub-cards .card { --c: var(--gold); position: relative; overflow: visible; border-radius: 6px 16px 16px 6px; padding: 22px 20px 20px 34px; background: var(--paper); box-shadow: var(--shadow); }
.hub-cards .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; border-radius: 6px 0 0 6px; background: var(--c); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .12); }
.hub-cards .card::after { content: ""; position: absolute; left: -14px; right: -14px; bottom: -22px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #c99a45, #9d7128); box-shadow: 0 9px 12px -6px rgba(80, 50, 10, .5); z-index: -1; }
.hub-cards .card:nth-child(4n+2) { --c: var(--blue); } .hub-cards .card:nth-child(4n+3) { --c: var(--brick); } .hub-cards .card:nth-child(4n+4) { --c: var(--sage); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hub-cards .card { transition: translate .4s var(--spring), rotate .4s var(--spring), box-shadow .4s var(--ease); transform-origin: 50% 100%; }
  .hub-cards .card:hover { translate: 0 -8px; rotate: -1.2deg; box-shadow: var(--shadow-lift); }
}
/* "What brings you here?" choices read as friendly signposts */
.hub-paths .path-buttons { display: grid; gap: 10px; }
.hub-paths .path-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 10px 12px 10px 18px; text-align: left; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font: 600 16.5px/1.25 var(--f-display); color: var(--navy); }
.hub-paths .path-btn::after { content: "\2192"; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); }
.hub-paths .path-btn[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); }
.hub-paths .path-btn[aria-pressed="true"]::after { background: var(--gold); }
.hub-cards { isolation: isolate; }

/* Page paintings melt into the sky and hills (Taylor, 2026-09-29: "make this art blend a little
   better"): a soft oval fade instead of straight edge fades, so no torn-paper rim or corner shows,
   a warm glow behind the painting, and a faint shadow where it meets the hill. */
main > .has-hills .page-visual { position: relative; }
main > .has-hills .page-visual::before { content: ""; position: absolute; inset: 6% 2% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 246, 222, .85), rgba(255, 246, 222, 0)); z-index: -1; }
main > .has-hills .page-visual::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 4%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(122, 91, 19, .18), transparent); z-index: -1; }
.has-hills :is(.village-art, seasonal-artwork, .page-visual, .pack-art, .hub-hero-art) img {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, rgba(0, 0, 0, .6) 86%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, rgba(0, 0, 0, .6) 86%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.has-hills :is(.village-art, seasonal-artwork, .page-visual, .pack-art, .hub-hero-art) img {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 52%, rgba(0, 0, 0, .75) 68%, rgba(0, 0, 0, .25) 84%, transparent 96%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 52%, rgba(0, 0, 0, .75) 68%, rgba(0, 0, 0, .25) 84%, transparent 96%);
}
.has-hills :is(.village-art, seasonal-artwork, .page-visual, .pack-art, .hub-hero-art) img {
  -webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 50%, #000 60%, rgba(0, 0, 0, .7) 76%, rgba(0, 0, 0, .22) 90%, transparent 99%);
  mask-image: radial-gradient(ellipse 52% 54% at 50% 50%, #000 60%, rgba(0, 0, 0, .7) 76%, rgba(0, 0, 0, .22) 90%, transparent 99%);
}

/* ================= Meaningful movement (Taylor, 2026-09-29) =================
   Each movement says something about what it's on:
   - a pinned note is pinned: it swings on its pin as it arrives, then settles;
   - a chapter you open unfolds like a page;
   - a chapter you've read gets a stamp on the trail;
   - Start Here's trail lights each stop in turn as you reach it, like lamps along a path;
   - books slide onto the shelf. Nothing moves when motion is turned off. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes osv-pinned { 0% { transform: translateY(-18px) rotate(-5deg); opacity: 0; } 55% { transform: translateY(0) rotate(2.2deg); opacity: 1; } 78% { transform: rotate(-1.2deg); } 100% { transform: rotate(0); } }
  @keyframes osv-pin-drop { 0% { transform: translateY(-26px) scale(1.25); opacity: 0; } 60% { transform: translateY(2px) scale(.95); opacity: 1; } 100% { transform: none; } }
  .guide-at-glance, .start-today { transform-origin: 50% -10px; animation: osv-pinned 1.1s .25s var(--ease) both; }
  .guide-at-glance::before, .start-today .pushpin { animation: osv-pin-drop .6s .15s var(--spring) both; }
  @keyframes osv-sway-once { 30% { transform: rotate(1.6deg); } 65% { transform: rotate(-.9deg); } 100% { transform: rotate(0); } }

  @keyframes osv-unfold { from { opacity: 0; transform: translateY(-6px) scaleY(.97); transform-origin: top; } to { opacity: 1; transform: none; } }
  details.gr-chapter[open] > .accordion-body { animation: osv-unfold .45s var(--ease); }

  @keyframes osv-stamp { 0% { transform: scale(1.8) rotate(-18deg); opacity: 0; } 60% { transform: scale(.9) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
  .gr-stop.just-read .gr-dot { animation: osv-stamp .5s var(--spring); }

  .start-stage { transition: box-shadow .5s var(--ease); }
  .start-stage .start-stage-number::before { transition: box-shadow .6s var(--ease), background-color .6s var(--ease); }
  .start-stage-grid.lit .start-stage.lamp-on .start-stage-number::before { background: #fff6dc; box-shadow: var(--shadow), 0 0 0 5px var(--cream), 0 0 0 8px var(--gold), 0 0 28px 8px rgba(247, 206, 120, .6); }
  .start-stage-grid::after { content: ""; position: absolute; left: 36px; top: 24px; width: 18px; height: var(--trail-fill, 0%); max-height: calc(100% - 48px); border-radius: 18px; background: linear-gradient(180deg, #f6d98f, #ebc97e); transition: height .2s linear; }

  .osv-reveal.in.book-slide, .hub-cards .card.osv-reveal.in { animation: osv-shelve .7s var(--spring) both; }
  @keyframes osv-shelve { from { transform: translateY(-22px) rotate(-3deg); } to { transform: none; } }
}

/* Shop tab: a small "Coming soon" tag until the first shirts are up. */
.nav-soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--brick-soft); color: var(--brick-ink); font: 800 11.5px/1.3 var(--f-body); letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; }
.drawer-link .nav-soon { margin-left: 10px; font-size: 12.5px; }
@media (max-width: 1320px) and (min-width: 1181px) { .nav-top .nav-soon { display: none; } }

/* Guides: no empty band under the opening (Taylor, 2026-09-29). The reading area rises onto the hills,
   so the pinned "At a glance" note and the first chapter sit in the landscape instead of below it. */
main > .has-hills + .guide-main { position: relative; z-index: 2; }
@media (min-width: 900px) {
  main > .has-hills:has(+ .guide-main) { padding-bottom: 150px; }
  main > .has-hills:has(+ .guide-main) .page-visual { align-self: center; margin-bottom: -40px; }
  main > .has-hills + .guide-main { margin-top: -118px; padding-top: 0; }
}
@media (max-width: 899px) {
  main > .has-hills:has(+ .guide-main) { padding-bottom: 96px; }
  main > .has-hills + .guide-main { margin-top: -64px; padding-top: 0; }
}
main > .has-hills + .guide-main { background: transparent; }

/* Guide sidebar without a scrollbar (Taylor, 2026-09-29): the "At a glance" note stays at the top of the
   guide, and only the chapter trail is sticky, riding down the page beside the chapters. No inner scroll. */
@media (min-width: 1024px) {
  .gr-side { position: static; max-height: none; overflow: visible; align-self: stretch; padding: 14px 6px 10px 4px; display: flex; flex-direction: column; gap: 22px; }
  .gr-side .gr-rail { position: sticky; top: calc(var(--osv-header-h) + 16px); }
  .gr-rail { padding: 14px 14px 10px; }
  .gr-head { padding-bottom: 8px; }
  .gr-stop { padding-block: 6px; }
  .gr-name { font-size: 15px; }
}
/* very short windows: the trail sits in the page instead of sticking, so nothing is ever cut off */
@media (min-width: 1024px) and (max-height: 720px) { .gr-side .gr-rail { position: static; } }

/* The whole sidebar rides along when it fits (guide-reader.js adds .gr-fit); "At a glance" can fold to
   its title (.gr-glance-shut) so it still fits on shorter windows. */
@media (min-width: 1024px) {
  .gr-side.gr-fit { position: sticky; top: calc(var(--osv-header-h) + 16px); align-self: start; }
  .gr-side.gr-fit .gr-rail { position: static; }
}
/* Long guides (.gr-tight): a slimmer trail; if it still runs long, its list scrolls inside with no scrollbar. */
.gr-side.gr-tight .gr-head { padding-bottom: 8px; }
.gr-side.gr-tight .gr-stop { padding: 4px 8px; gap: 10px; }
.gr-side.gr-tight .gr-name { font-size: 14.5px; }
.gr-side.gr-tight .gr-min { display: none; }
.gr-side.gr-tight .gr-list { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; position: relative; }
.gr-side.gr-tight .gr-list::-webkit-scrollbar { display: none; }
.gr-side.gr-tight .gr-all { margin-top: 6px; padding-top: 6px; }
.gr-glance-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.gr-glance-btn:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px; }
.gr-side.gr-compact .gr-glance-btn::after { content: "\25BE"; font: 14px var(--f-body); color: var(--gold-dark); transition: transform .2s; }
.gr-side.gr-compact .gr-glance-btn[aria-expanded="false"]::after { transform: rotate(-90deg); }
.guide-at-glance.gr-glance-shut > div > :not(h2), .guide-at-glance.gr-glance-shut > :not(div):not(h2) { display: none; }
.guide-at-glance.gr-glance-shut { padding-bottom: 14px !important; }
.guide-at-glance.gr-glance-shut h2 { margin-bottom: 0; }
@media (min-width: 1024px) {
  .gr-side.gr-compact.gr-glance-open { position: static; }
  .gr-side.gr-compact.gr-glance-open .gr-rail { position: sticky; top: calc(var(--osv-header-h) + 16px); }
}