/* Tottington Woodlanders — design system per DESIGN.md ("Forest Playground") */

/* ---------- fonts ---------- */
@font-face { font-family: 'Hanken Grotesk'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('/fonts/hanken-grotesk.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 100 800; font-style: normal; font-display: swap; src: url('/fonts/jetbrains-mono.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --surface: #fbf9f1;
  --paper: #f3f1e9;
  --white: #ffffff;
  --ink: #1b1c17;
  --ink-soft: #45483f;
  --outline: #76786e;
  --outline-var: #c6c7bc;
  --forest: #2b341d;
  --forest-deep: #161f0a;
  --moss: #12150b;
  --olive: #586247;
  --wood: #d9d1b9;
  --wood-tint: #e8dfc7;
  --sage: #929d7f;
  --leaf-tint: #dce7c5;
  --error: #ba1a1a;
  /* Membership's own colour, after the wood's spring bluebells */
  --bluebell: #34327a;
  --bluebell-btn: #4d4ab8;
  --bluebell-light: #b8b2f5;
  --bluebell-ink: #221f5e;
  --bluebell-soft: #d9d6f3;
  --bluebell-tint: #eceafa;
  --bluebell-tint-ink: #3a378c;
  --bluebell-line: #cfcbf0;
  --on-dark-line: rgba(243, 241, 233, 0.28);
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --shadow-lift: 0 8px 24px rgba(18, 21, 11, 0.08);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Cross-document view transitions: browsers that support it crossfade
   between page loads instead of flashing; others ignore it. */
@view-transition { navigation: auto; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: var(--radius-sm); }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}
.lead { font-size: 1.25rem; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.muted { color: var(--ink-soft); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 64px; position: relative; z-index: 1; }
.container.narrow { max-width: 848px; }
@media (max-width: 820px) { .container { padding: 0 20px; } }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--forest); color: var(--paper); padding: 0.75rem 1.25rem; z-index: 100; border-radius: 0 0 var(--radius) 0; }
.skip-link:focus { left: 0; }

/* Topographic contour decoration for the dark/green bands */
.hero, .cta-band, .site-footer, .contact-hero, .site-header, .member-band, .join-hero { position: relative; }
.hero::before, .cta-band::before, .site-footer::before, .contact-hero::before, .member-band::before, .join-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url('/img/contours.svg') right -80px center / 900px auto no-repeat;
  opacity: 0.1; pointer-events: none;
}

/* ---------- buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--forest); color: var(--paper);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.875rem 1.5rem; border: 1px solid var(--forest); border-radius: var(--radius);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--wood); }
.btn-cream { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-ghost { background: transparent; color: var(--paper); border-color: rgba(243, 241, 233, 0.6); }
.btn-danger { background: transparent; color: var(--error); border-color: var(--outline-var); }
/* Membership buttons: light bluebell on dark backgrounds, deep bluebell on light ones */
.btn-bluebell { background: var(--bluebell-light); color: var(--bluebell-ink); border-color: var(--bluebell-light); font-weight: 600; }
.btn-member { background: var(--bluebell-btn); color: var(--surface); border-color: var(--bluebell-btn); font-weight: 600; }
.btn-block { width: 100%; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }

.chip {
  display: inline-block; padding: 0.25rem 0.875rem; border-radius: 9999px;
  background: var(--wood-tint); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.chip-ok { background: var(--leaf-tint); color: var(--forest); }
.chip-muted { background: var(--paper); color: var(--outline); border: 1px solid var(--outline-var); }
.chip-member { background: var(--bluebell-tint); color: var(--bluebell-tint-ink); }
.chip-claim { background: var(--leaf-tint); color: var(--forest); border: 1px dashed var(--forest); }

.arrow-link { font-weight: 600; text-decoration: none; white-space: nowrap; }
.arrow-link::after { content: ' →'; }
.arrow-link:hover { text-decoration: underline; }

/* ---------- header ---------- */
.site-header { background: var(--olive); z-index: 50; }
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.logo-tree { width: 42px; height: 42px; flex: none; color: var(--paper); }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--paper); }
.brand-name strong { font-weight: 700; }
.header-actions { display: flex; gap: 0.625rem; align-items: center; justify-content: flex-end; }
.site-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-weight: 500; color: var(--paper); padding: 0.25rem 0; }
.site-nav a:not([aria-current]):hover { text-decoration: underline; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] { font-weight: 700; border-bottom: 2px solid var(--paper); }
.nav-toggle { display: none; }
@media (min-width: 1101px) { .site-nav .nav-extra { display: none; } }
/* Below 1100px the six links wrap beside the centred logo, so the header
   switches to the menu button. Just above that, there is room for the links
   but not three buttons; Contact is still in the footer and the closing band
   of every page. */
@media (min-width: 1101px) and (max-width: 1240px) {
  .header-actions .btn-ghost { display: none; }
  .header-inner { gap: 1rem; }
  .site-nav ul { gap: 1rem; }
}

@media (max-width: 1100px) {
  /* site.js adds is-hidden while scrolling down and removes it on scroll up. */
  .site-header { position: sticky; top: 0; transition: transform 0.25s ease; }
  .site-header.is-hidden { transform: translateY(-100%); }
  html { scroll-padding-top: 80px; }
  .header-inner { display: flex; justify-content: space-between; gap: 0.75rem; }
  .logo-tree { width: 36px; height: 36px; }
  .brand { gap: 0.5rem; }
  .brand-name { font-size: 0.9375rem; }
  .nav-toggle {
    display: block; order: 10; appearance: none; -webkit-appearance: none; margin: 0; flex: none;
    width: 44px; height: 44px; cursor: pointer; position: relative;
    border: 1px solid rgba(243, 241, 233, 0.6); border-radius: var(--radius); background: transparent;
  }
  .nav-toggle::before, .nav-toggle::after {
    content: ''; position: absolute; left: 11px; width: 20px; height: 2px; background: var(--paper); border-radius: 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .nav-toggle::before { top: 14px; box-shadow: 0 7px 0 var(--paper); }
  .nav-toggle::after { top: 28px; }
  .nav-toggle:checked::before { transform: translateY(7px) rotate(45deg); box-shadow: none; }
  .nav-toggle:checked::after { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
  .header-actions { display: none; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--forest); padding: 0.5rem 20px 1.25rem; z-index: 50; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: 0.875rem 0; border-bottom: 1px solid rgba(243, 241, 233, 0.15); font-size: 1.125rem; }
  .site-nav a[aria-current="page"] { border-bottom: 1px solid rgba(243, 241, 233, 0.15); }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .site-nav .nav-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 20px; }
  .site-nav .nav-cta .btn { display: flex; padding: 0.875rem 0.75rem; border-bottom: 1px solid; font-size: 0.75rem; white-space: normal; text-align: center; }
  .site-nav .nav-cta .btn-cream { color: var(--ink); border-color: var(--paper); }
  .site-nav .nav-cta .btn-bluebell { color: var(--bluebell-ink); border-color: var(--bluebell-light); }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* ---------- sections ---------- */
.section { padding: 88px 0; }
.section-tint { background: var(--paper); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.section-head h2 { margin-bottom: 0; }
.section-intro { padding-bottom: 0; }
.section-intro .prose p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .section { padding: 56px 0; } .section-intro { padding-bottom: 0; } }
/* Narrow screens: let the "all dates" links drop below the heading rather than
   squeezing it into a two-line column. */
@media (max-width: 680px) { .section-head { flex-wrap: wrap; gap: 1rem; } }

.page-header { background: var(--paper); padding: 96px 0 64px; }
.page-header h1 { margin: 0.25em 0; }
.page-header .lead { margin-bottom: 0; }
@media (max-width: 820px) { .page-header { padding: 56px 0 40px; } }

/* ---------- hero ---------- */
/* The photo is a real <img> (fetched early, at high priority) rather than a
   background the browser only finds once this file has loaded. Its own
   layer stack: the deep green, the photo, the darkening, then the contours
   (::before) and the text, as when all three were backgrounds. */
.hero {
  background: var(--forest-deep);
  color: var(--paper);
  padding: 140px 0 112px;
  isolation: isolate;
}
.hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(18, 21, 11, 0.38), rgba(18, 21, 11, 0.62));
}
.hero h1 {
  color: var(--surface);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0;
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  line-height: 1.05;
  margin-bottom: 0.4em;
}
.hero .lead { color: var(--wood-tint); }
@media (max-width: 820px) { .hero { padding: 88px 0 72px; } .hero h1 br { display: none; } }
@media (max-width: 520px) { .hero .btn-row .btn { flex: 1 1 100%; } }

/* ---------- grids & cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 1020px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-3 { grid-template-columns: 1fr; } }
/* Text or a heading straight after a grid of cards, a list of dates or a
   table needs clear space, or it reads as part of the block above. */
.grid-3 + *, .event-list + *, .admin-table + * { margin-top: 2rem; }

.card { background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card > a { display: block; color: inherit; text-decoration: none; height: 100%; }
.card-img { aspect-ratio: 3 / 2; background: var(--wood-tint); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.5rem; }
.card-body .label, .card-body .chip { margin-bottom: 0.75rem; }
.card-body h3 { margin-bottom: 0.5rem; }
.card-body p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.card-plain { background: transparent; border-color: var(--outline-var); }
.card-plain:hover { transform: none; box-shadow: none; }
.unavailable { color: var(--error); margin-top: 0.75rem; }

/* ---------- events ---------- */
.head-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-row { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 1.75rem 0; border-bottom: 1px solid var(--wood); }
.event-row:first-child { border-top: 1px solid var(--wood); }
.event-row h3 { margin-bottom: 0.25rem; }
.event-detail .prose p:last-child { margin-bottom: 0; }
.event-detail .prose { color: var(--ink-soft); }
@media (max-width: 680px) { .event-row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Home page diary: the next date as a card with its photo, then a line each */
.next-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border: 1px solid var(--wood); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); color: var(--ink); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.next-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.next-card img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; background: var(--wood-tint); }
.next-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 36px 44px; }
.next-title { font-size: 2.125rem; font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.next-card:hover .next-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.next-when { color: var(--ink-soft); font-size: 0.8125rem; letter-spacing: 0.06em; }
/* The kind joins the date line only when even the longest date leaves room */
.next-body { container-type: inline-size; }
.next-kind { display: block; margin-top: 2px; }
@container (min-width: 25rem) {
  .next-kind { display: inline; margin: 0; }
  .next-kind::before { content: ' · '; }
}
.next-place { font-size: 0.9375rem; color: var(--ink-soft); }
.next-preview { color: var(--ink-soft); line-height: 1.55; }
.next-body .btn { align-self: flex-start; margin-top: 8px; }
.diary-sub { margin: 2.5rem 0 0.75rem; }
.diary-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wood); }
.diary-list li { border-bottom: 1px solid var(--wood); }
.diary-row { display: grid; grid-template-columns: 56px 168px minmax(0, 1fr) 140px 20px; align-items: center; gap: 24px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.diary-row:hover .diary-title { text-decoration: underline; }
.diary-row > svg { width: 20px; height: 20px; color: var(--olive); }
.diary-row .chip { justify-self: start; font-size: 0.6875rem; padding: 0.25rem 0.75rem; white-space: nowrap; }
.date-block { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; box-sizing: border-box; border-radius: 12px; background: var(--leaf-tint); color: var(--forest); }
.is-event .date-block { background: var(--white); border: 1px solid var(--wood); color: var(--ink); }
.date-day { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.date-mon { margin-top: 3px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.diary-when, .diary-meta { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.diary-when { font-size: 0.8125rem; }
.diary-what { min-width: 0; }
.diary-title { display: block; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; }
.diary-place { display: block; overflow: hidden; font-size: 0.9375rem; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.diary-meta { display: none; margin-top: 2px; font-size: 0.6875rem; }
@media (max-width: 820px) {
  .next-card { grid-template-columns: 1fr; }
  .next-card img { height: 220px; min-height: 0; }
  .next-body { padding: 20px 22px 24px; gap: 8px; }
  .next-title { font-size: 1.625rem; }
  .next-preview { font-size: 0.9375rem; }
  .diary-row { grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 14px; }
  .date-block { width: 52px; height: 52px; }
  .date-day { font-size: 1.375rem; }
  .diary-when, .diary-row .chip, .diary-place { display: none; }
  .diary-meta { display: block; }
  .diary-title { font-size: 1.0625rem; }
}
@media (max-width: 600px) { .next-body .btn { align-self: stretch; } }

/* ---------- prose ---------- */
.prose { font-size: 1.0625rem; line-height: 1.65; max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 1.75em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.5em 0 0.5em; }
.prose img { border-radius: var(--radius-lg); margin: 1.5rem 0; }
.prose blockquote { margin: 1.5rem 0; padding: 0.5rem 0 0.5rem 1.5rem; border-left: 3px solid var(--wood); color: var(--ink-soft); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li, ul.leafy li { padding: 0.5rem 0 0.5rem 1.75rem; position: relative; }
.prose ul li::before, ul.leafy li::before {
  content: ''; position: absolute; left: 0; top: 0.85em; width: 0.85rem; height: 0.85rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 14C2 7 7 2 14 2c0 7-5 12-12 12z' fill='%23929d7f'/%3E%3C/svg%3E") no-repeat center / contain;
}
.prose ol { padding-left: 1.5rem; }
.prose ol li { padding: 0.25rem 0; }
ul.leafy { list-style: none; padding-left: 0; }

.prose-invert { color: var(--wood-tint); }
.prose-invert a { color: var(--paper); }

/* A caption is an italic line straight under a page image in the CMS:
   ![Alt text](/img/x.webp) then *Caption* on the next line. */
.prose img + br + em { display: block; margin-top: -0.75rem; font-size: 0.9375rem; color: var(--ink-soft); }

/* ---------- glossary ---------- */
.glossary { --search-h: 9rem; }
.glossary-search { min-height: var(--search-h); margin: 2rem 0 0.5rem; padding: 1.25rem; background: var(--paper); border-radius: var(--radius-lg); }
.glossary-search[hidden], .glossary .prose [hidden] { display: none; }
/* site.js shows the search box just above the first term. Until it runs, the
   first term keeps the box's room (its top margin, height and the term's own
   margin), so nothing moves when the box appears; the box's min-height is a
   little over its natural height, so the two match. Without scripts the box
   never shows and no room is kept. */
.js .glossary-search[hidden] + .prose > h3:first-of-type { margin-top: calc(2rem + var(--search-h) + 1.75rem); }
.glossary-search .label { display: block; margin-bottom: 0.5rem; }
.glossary-count { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.glossary .prose h3 { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--wood); }
.glossary .prose h2 + h3, .glossary .prose h3:first-of-type { border-top: 0; }
.glossary .prose img { max-width: min(100%, 420px); margin: 1rem 0 1.25rem; }
.glossary .prose a[href="#references"] { text-decoration: none; white-space: nowrap; }
.glossary .prose h2#references { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--wood); }
.glossary .prose ol { font-size: 0.9375rem; color: var(--ink-soft); }

/* ---------- flora ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.flora [hidden], .plant-view [hidden] { display: none !important; }
.icon-leaf { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Header: the title and introduction */
.flora-header { padding: 72px 0 48px; }
.flora-header-text { max-width: 760px; }
.flora-header .prose { font-size: 1.125rem; color: var(--ink-soft); }
.flora-header-link { margin: 0; }
@media (max-width: 820px) { .flora-header { padding: 40px 0 32px; } }

/* The tabs with the search box beside them (below them on narrow screens),
   then the chart of the year. With the script, one white pill (added by
   site.js) slides from tab to tab instead of each tab having its own. */
.section.flora { padding-top: 2.5rem; }
.flora-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; }
.flora-tabs { position: relative; display: flex; gap: 6px; padding: 6px; border-radius: 9999px; background: #f0eee6; }
.flora-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 9999px; color: var(--ink-soft); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.flora-tab:hover { color: var(--ink); text-decoration: none; }
.flora-tab[aria-current] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(18, 21, 11, 0.12); }
.flora-tabs.has-thumb .flora-tab[aria-current] { background: none; box-shadow: none; }
.flora-tab-thumb { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 9999px; background: var(--white); box-shadow: 0 1px 3px rgba(18, 21, 11, 0.12); transition: transform 0.45s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.45s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.2s ease; }
.flora-tab-count { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--olive); }
.flora-tab-short { display: none; }
.flora-search { position: relative; flex: 1 1 260px; max-width: 400px; }
.flora-search svg { position: absolute; left: 1.125rem; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--olive); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.flora-search input { height: 56px; padding: 0 1.125rem 0 3.125rem; border-radius: 9999px; font-size: 1.0625rem; box-shadow: 0 6px 20px rgba(18, 21, 11, 0.05); }
.flora-search input:focus { outline-offset: 1px; }
@media (max-width: 900px) {
  .flora-bar { flex-direction: column; align-items: stretch; }
  .flora-tab { flex: 1 1 auto; }
  .flora-search { flex: none; max-width: none; }
}
.flora-cal { margin-top: 1.5rem; padding: 1.125rem 1.25rem 0.875rem; border: 1px solid #e3dcc8; border-radius: 18px; background: var(--white); }
.flora-cal-title { margin: 0 0 0.5rem 0.25rem; }
.flora-cal-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.flora-mon { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 6px; border-radius: 12px; color: var(--ink-soft); text-decoration: none; transition: background 0.2s ease; }
.flora-mon:hover { background: #f6f4ec; text-decoration: none; }
.flora-mon-now { height: 9px; font-family: var(--font-mono); font-size: 9px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
.flora-mon-n { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1; color: var(--outline); }
.flora-mon-bar { display: flex; align-items: flex-end; width: 100%; max-width: 38px; height: 72px; }
.flora-mon-bar span { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: #c9d4b0; transition: background 0.2s ease; }
.flora-mon-l { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.flora-mon[aria-current] { background: var(--forest); color: var(--paper); }
.flora-mon[aria-current] .flora-mon-bar span { background: var(--leaf-tint); }
.flora-mon[aria-current] .flora-mon-n, .flora-mon[aria-current] .flora-mon-now { color: var(--leaf-tint); }
.flora-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-top: 2rem; }
.flora-status-text { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.flora-clear { font-weight: 500; }
.flora-note { max-width: 72ch; margin: 0.5rem 0 0; color: var(--ink-soft); }
.flora-awi-intro { display: flex; gap: 1rem; align-items: flex-start; max-width: 760px; margin-top: 1.25rem; padding: 1.125rem 1.25rem; border-radius: var(--radius-lg); background: #eef2e2; }
.flora-awi-intro p { margin: 0; line-height: 1.6; }
.flora-awi-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--forest); color: var(--paper); }
.flora-awi-mark .icon-leaf { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .flora-tab { min-height: 40px; padding: 0 12px; font-size: 0.9375rem; }
  .flora-search input { height: 52px; }
  .flora-cal { padding: 0.875rem 0.5rem 0.625rem; }
  .flora-cal-months { gap: 2px; }
  .flora-mon { gap: 4px; padding: 6px 0 4px; border-radius: 8px; }
  .flora-mon-n { font-size: 0.625rem; }
  .flora-mon-bar { height: 56px; max-width: 20px; }
  .flora-mon-l { font-size: 0.625rem; }
  .flora-mon-l span { display: none; }
  .flora-mon-now { font-size: 7.5px; }
}
/* Phones: a shorter label and no counts, so all three tabs fit across. */
@media (max-width: 520px) {
  .flora-tab-long, .flora-tab-count { display: none; }
  .flora-tab-short { display: inline; }
  .flora-tab { padding: 0 10px; font-size: 0.875rem; }
}
@media (max-width: 359px) { .flora-tabs { gap: 4px; } .flora-tab { padding: 0 8px; font-size: 0.8125rem; } }

/* Contents: a photo tile per group */
.flora-contents { margin-top: 2rem; }
.flora-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.flora-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--wood-tint); color: var(--ink); text-decoration: none; transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.26s ease; }
.flora-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18, 21, 11, 0.12); text-decoration: none; }
.flora-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flora-tile-label { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px rgba(18, 21, 11, 0.14); }
.flora-tile-name { font-weight: 650; line-height: 1.2; }
.flora-tile-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--olive); }
@media (max-width: 1100px) { .flora-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flora-tile { aspect-ratio: 16 / 10; } }
@media (max-width: 600px) {
  .flora-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .flora-tile { aspect-ratio: 16 / 11; }
  .flora-tile-label { left: 6px; right: 6px; bottom: 6px; padding: 8px 10px; font-size: 0.875rem; }
}

/* Groups, each with a first look and a button for the rest */
.flora-group { margin-top: 4rem; scroll-margin-top: 1.5rem; }
/* The count sits at the far right over a rule, level with the heading's last line */
.flora-group-title { display: flex; align-items: flex-end; align-items: last baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--outline-var); }
.flora-group-title h2 { margin: 0; font-size: clamp(1.625rem, 2.6vw, 2rem); }
.flora-group-count { flex: none; font-family: var(--font-mono); font-size: 1rem; font-weight: 500; line-height: 1; color: var(--olive); }
.flora-group-blurb { margin: 0.625rem 0 0; color: var(--ink-soft); }
.flora-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 1.375rem 0 0; padding: 0; list-style: none; }
.flora-group-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1.375rem; }
.flora-more { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 48px; padding: 0 1.375rem; border: 1px solid var(--forest); border-radius: 9999px; background: var(--white); color: var(--forest); font: 600 1rem var(--font-sans); cursor: pointer; transition: background 0.16s ease, color 0.16s ease; }
.flora-more:hover { background: var(--forest); color: var(--paper); }
.flora-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.flora-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.flora-top { font-size: 0.9375rem; font-weight: 500; }
.plant.is-arriving { animation: plant-arrive 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes plant-arrive { from { opacity: 0; transform: translateY(14px); } }
/* The cut-off for each width; see FIRST_LOOK in public-routes.ts. */
@media (min-width: 1101px) {
  .js .flora-group:not(.is-open) .plant.x10 { display: none; }
  .flora-more:not(.gt10) { display: none; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .flora-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .js .flora-group:not(.is-open) .plant.x8 { display: none; }
  .flora-more:not(.gt8) { display: none; }
}
@media (min-width: 601px) and (max-width: 820px) {
  .flora-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .js .flora-group:not(.is-open) .plant.x9 { display: none; }
  .flora-more:not(.gt9) { display: none; }
}
@media (max-width: 600px) {
  .flora-group { margin-top: 3rem; }
  .flora-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 1rem; }
  .js .flora-group:not(.is-open) .plant.x6 { display: none; }
  .flora-more { width: 100%; justify-content: center; }
}

/* A plant card: the photo fills it, with a label inset at the foot */
.plant-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--wood-tint); color: var(--ink); text-decoration: none; transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.26s ease; }
.plant-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18, 21, 11, 0.12); text-decoration: none; }
.plant-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.plant-card:hover img { transform: scale(1.05); }
.plant.is-lifted .plant-card { opacity: 0; transition: none; }
.plant-label { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; padding: 10px 12px 9px; border: 1px solid #e3dcc8; border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px rgba(18, 21, 11, 0.14); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.plant-card:hover .plant-label { transform: translateY(-3px); }
.plant-name { font-size: 0.9375rem; font-weight: 650; line-height: 1.25; }
.plant-latin { margin-top: 1px; overflow: hidden; font-size: 0.8125rem; font-style: italic; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
/* The months drop to a second line when a narrow card has no room for both. */
.plant-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 6px; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--wood); font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.plant-kind { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--olive); }
.plant-kind span { overflow: hidden; text-overflow: ellipsis; }
.plant-kind.is-awi { color: var(--forest); }
.plant-when { margin-left: auto; color: var(--ink-soft); }
@media (max-width: 600px) {
  .plant-label { left: 6px; right: 6px; bottom: 6px; padding: 8px 10px 7px; }
  .plant-name { font-size: 0.875rem; }
  .plant-latin { font-size: 0.75rem; }
  .plant-kind span { display: none; }
}

/* A plant's details. Out of sight: site.js copies them into the full view.
   Without the script a card's link shows them over the page. */
.plant-sheet { display: none; }
html:not(.js) .plant-sheet:target { position: fixed; inset: 4vh 4vw; z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: auto; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 100vmax rgba(18, 21, 11, 0.6); }
html:not(.js) .plant-sheet-photo img { width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .plant-sheet-body { padding: 2rem; }
@media (max-width: 700px) { html:not(.js) .plant-sheet:target { inset: 0; grid-template-columns: minmax(0, 1fr); border-radius: 0; } }
.plant-sheet-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.plant-sheet-sep { color: #a3a596; }
.plant-sheet-name { margin: 0.625rem 3rem 0 0; font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 650; line-height: 1.1; letter-spacing: -0.015em; }
.plant-sheet-latin { margin: 0.375rem 0 0; font-size: 1.1875rem; font-style: italic; color: var(--ink-soft); }
.plant-sheet-awi { display: inline-flex; align-items: center; gap: 5px; color: var(--forest); font-weight: 600; }
.plant-sheet-awi .icon-leaf { width: 13px; height: 13px; }
.plant-sheet-about { margin: 1.125rem 0 0; line-height: 1.7; }
.plant-sheet-flowers { margin-top: 1.375rem; }
.plant-sheet-flowers .label { margin: 0 0 0.625rem; }
.plant-sheet-flowers p:last-child { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.month-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 340px; }
.ms { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ms-bar { display: block; width: 100%; height: 10px; border-radius: 4px; background: #ece6d4; }
.ms.on .ms-bar { background: var(--olive); }
.ms-l { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; color: var(--outline); }
.ms.on .ms-l { color: var(--forest); font-weight: 500; }
.plant-sheet-facts { display: flex; flex-wrap: wrap; gap: 0.875rem 2.25rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid #e6dfcb; }
.plant-sheet-facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
.plant-sheet-facts dd { margin: 4px 0 0; }
.plant-sources, .plant-credit { font-size: 0.8125rem; color: var(--ink-soft); }
.plant-sources, .plant-credit { margin: 1.125rem 0 0; }
.plant-sources + .plant-credit { margin-top: 0.25rem; }
.plant-sheet-close { margin: 1.5rem 0 0; }

/* The full view: the card grows into a large view, with the photo on the left
   and the details beside it (the details below it on a phone). */
html:has(.plant-view[open]) { overflow: hidden; }
.plant-view { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--ink); }
.plant-view::backdrop { background: transparent; }
.pv-scrim { position: absolute; inset: 0; background: rgba(18, 21, 11, 0.74); opacity: 0; transition: opacity 0.26s ease; }
.plant-view.is-open .pv-scrim { opacity: 1; transition-duration: 0.34s; }
/* The panel clips its own corners: a scroll bar in the words column would
   otherwise square off the right-hand ones. */
.pv-panel { position: absolute; inset: 0; display: grid; grid-template-columns: 54% minmax(0, 1fr); width: min(1040px, calc(100% - 176px)); height: min(640px, calc(100% - 120px)); margin: auto; overflow: hidden; border-radius: 20px; opacity: 0; transition: opacity 0.16s ease; }
.plant-view.is-open .pv-panel { opacity: 1; transition: opacity 0.3s ease 0.1s; }
.plant-view.is-growing .pv-panel { opacity: 1; transition: none; }
.pv-photo { position: relative; overflow: hidden; border-radius: 20px 0 0 20px; background: var(--wood-tint); }
.pv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-photo > *, .pv-content { transition: opacity 0.2s ease; }
.plant-view.is-flying .pv-photo { background: transparent; }
.plant-view.is-flying .pv-photo > * { opacity: 0; transition: none; }
.plant-view.is-landing .pv-photo > * { transition: none; }
/* While the card grows (site.js), copies stand in for the photo, the panel of
   words and the two headings; the rest of the words rise in so that they are
   all in place when the card lands, 0.48s in. */
/* The real panel and buttons sit above the copies until the copies are gone,
   so nothing blinks out during the hand-over. */
.plant-view:is(.is-flying, .is-landing) :is(.pv-panel, .pv-bar) { z-index: 8; }
/* Opacity rather than visibility, so the words can still take focus as the
   view opens; Safari otherwise focuses the Close button. */
.plant-view.is-flying .pv-panel .pv-body { opacity: 0; }
.plant-view.is-flying .pv-content > :is(.plant-sheet-name, .plant-sheet-latin):not(.is-fading) { visibility: hidden; }
.plant-view.is-growing .pv-content > * { animation-duration: 0.28s !important; animation-delay: 0.16s !important; }
.plant-view.is-growing .pv-content > :nth-child(n + 4) { animation-delay: 0.18s !important; }
.plant-view.is-growing .pv-content > :nth-child(n + 6) { animation-delay: 0.2s !important; }
.plant-view.is-growing .pv-content > :is(.plant-sheet-name, .plant-sheet-latin):not(.is-fading) { animation: none; }
.plant-view.is-growing .pv-count, .plant-view.is-growing .pv-close { animation: pv-fade 0.24s ease 0.24s both; }
@keyframes pv-fade { from { opacity: 0; } }
.pv-panel.is-swapping .pv-photo > *, .pv-panel.is-swapping .pv-content { opacity: 0; transition: opacity 0.14s ease; }
.pv-body { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 30px 40px 28px; border-radius: 0 20px 20px 0; background: var(--surface); }
.pv-body:focus { outline: none; }
.pv-count { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--outline); }
.plant-view.is-open .pv-content > * { animation: pv-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pv-content > :nth-child(2), .pv-content > :nth-child(3) { animation-delay: 0.06s !important; }
.pv-content > :nth-child(4), .pv-content > :nth-child(5) { animation-delay: 0.12s !important; }
.pv-content > :nth-child(n + 6) { animation-delay: 0.18s !important; }
@keyframes pv-rise { from { opacity: 0; transform: translateY(12px); } }
.pv-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--wood); border-radius: 9999px; background: var(--white); color: var(--ink); cursor: pointer; transition: transform 0.2s ease; }
.pv-close:hover { transform: rotate(90deg); }
.pv-close svg, .pv-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-bar { position: absolute; inset: 0; pointer-events: none; }
.pv-nav { position: absolute; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 9999px; background: rgba(251, 249, 241, 0.94); color: var(--ink); cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity 0.16s ease, transform 0.2s ease; }
.pv-prev { left: max(16px, calc((100% - min(1040px, 100% - 176px)) / 2 - 70px)); }
.pv-next { right: max(16px, calc((100% - min(1040px, 100% - 176px)) / 2 - 70px)); }
.plant-view.is-open .pv-nav { opacity: 1; transition: opacity 0.24s ease 0.24s, transform 0.2s ease; }
.pv-nav:hover { transform: scale(1.06); }
.pv-nav:focus-visible, .pv-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.pv-hint { position: absolute; left: 0; right: 0; bottom: max(12px, calc((100% - min(640px, 100% - 120px)) / 2 - 38px)); margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 241, 233, 0.75); opacity: 0; transition: opacity 0.2s ease; }
.plant-view.is-open .pv-hint { opacity: 1; transition: opacity 0.24s ease 0.24s; }
.pv-peek { display: none; }
.pv-fly { position: fixed; z-index: 5; margin: 0; object-fit: cover; pointer-events: none; }
.pv-fly-label { position: fixed; z-index: 6; box-sizing: border-box; overflow: hidden; border: 1px solid #e3dcc8; background: var(--surface); pointer-events: none; }
.pv-fly-label > .pv-body { position: absolute; margin: 0; overflow: hidden; border-radius: 0; background: transparent; }
.pv-fly-text { position: fixed; z-index: 7; margin: 0 !important; transform-origin: 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
@media (max-width: 700px) {
  .pv-panel { width: 100%; height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44% minmax(0, 1fr); border-radius: 0; }
  .pv-photo { border-radius: 0; }
  .pv-body { margin-top: -22px; padding: 18px 22px 112px; border-radius: 22px 22px 0 0; }
  .pv-close { top: 12px; left: 12px; right: auto; border: 0; background: rgba(251, 249, 241, 0.94); }
  .pv-close:focus-visible { outline-color: var(--forest); }
  /* The plants either side, split by a short line down the middle. */
  .pv-bar { top: auto; display: flex; align-items: center; gap: 6px; height: 88px; padding: 0 10px; border-top: 1px solid #ece6d4; background: linear-gradient(#e3dcc8, #e3dcc8) center / 1px 40px no-repeat, var(--surface); pointer-events: auto; opacity: 0; transform: translateY(16px); transition: opacity 0.2s ease, transform 0.2s ease; }
  .plant-view.is-open .pv-bar { opacity: 1; transform: none; transition: opacity 0.24s ease 0.24s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s; }
  .pv-nav { position: static; flex: 1; justify-content: flex-start; gap: 10px; min-width: 0; width: auto; height: 64px; margin: 0; padding: 0 8px; border-radius: 16px; background: transparent; text-align: left; }
  .pv-next { flex-direction: row-reverse; text-align: right; }
  .pv-nav:hover { transform: none; }
  .pv-nav:active { background: #f0eee6; }
  .pv-nav:focus-visible { outline-color: var(--forest); outline-offset: 0; }
  .pv-nav svg { width: 16px; height: 16px; flex: none; color: var(--outline); }
  .pv-peek { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .pv-next .pv-peek { flex-direction: row-reverse; }
  .pv-peek-img { width: 42px; height: 42px; flex: none; border-radius: 9999px; object-fit: cover; background: var(--wood-tint); }
  .pv-peek-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .pv-next .pv-peek-text { align-items: flex-end; }
  .pv-peek-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
  .pv-peek-name { max-width: 100%; overflow: hidden; font-size: 0.875rem; font-weight: 650; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
  .pv-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plant.is-arriving, .plant-view.is-open .pv-content > * { animation: none; }
  .plant-card, .plant-card img, .plant-label, .flora-tile, .flora-tab-thumb, .pv-scrim, .pv-panel, .pv-nav, .pv-hint, .pv-bar { transition: none !important; }
  .plant-card:hover img { transform: none; }
}

/* Where the list comes from */
.flora-about { max-width: 68ch; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--wood); }
.flora-about h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.flora-about dl { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1.5rem; margin: 1.5rem 0 0; }
.flora-about dt { padding-top: 0.2rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
.flora-about dd { margin: 0; line-height: 1.6; }
@media (max-width: 520px) { .flora-about dl { grid-template-columns: 1fr; gap: 0.25rem; } .flora-about dd { margin-bottom: 0.75rem; } }

/* ---------- the wood: three chapters ---------- */
.wood-hero { background: var(--paper); padding: 72px 0 80px; }
.wood-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: center; }
.wood-hero h1 { margin: 0.2em 0 0.3em; }
.wood-hero .lead { max-width: 30em; margin-bottom: 2rem; }
.wood-facts { display: flex; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--wood); }
.wood-facts div { flex: 1 1 140px; padding: 16px 20px 0 0; }
.wood-facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
.wood-facts dd { margin: 4px 0 0; font-size: 1.3125rem; font-weight: 600; line-height: 1.3; }
.wood-hero-photo, .wood-figure, .wood-cants-map { margin: 0; }
.wood-hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.wood-hero-photo figcaption, .wood-figure figcaption, .wood-cants-map figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }

.wood-jump { background: var(--surface); padding: 56px 0 24px; }
.wood-jump ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 16px 0 0; padding: 0; }
.wood-jump li { display: flex; }
.wood-jump-card { flex: 1; display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wood-jump-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.wood-jump-card img { width: 84px; height: 84px; flex: none; object-fit: cover; border-radius: 12px; }
.wood-jump-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wood-jump-n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--olive); }
.wood-jump-title { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.wood-jump-line { font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft); }
.wood-jump-card svg { width: 22px; height: 22px; flex: none; color: var(--olive); }

.wood-chapter { background: var(--surface); padding: 56px 0 104px; }
.wood-chapter-head { margin-bottom: 40px; padding-top: 20px; border-top: 2px solid var(--forest); }
.wood-chapter-head .label { margin: 0 0 8px; font-size: 0.8125rem; }
.wood-chapter-head h2 { margin: 0; }

.wood-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.wood-intro-text p { color: var(--ink-soft); }
.wood-intro-text > p:first-child { font-size: 1.3125rem; line-height: 1.55; color: var(--ink); }
.wood-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }

.wood-sub { margin: 72px 0 8px; font-size: 1.625rem; }
.wood-sub-lead { margin: 0 0 28px; color: var(--ink-soft); }
.wood-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.wood-step { padding: 24px; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.wood-step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.wood-step-when { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
.wood-step-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wood-tint); color: var(--forest); }
.wood-step-icon.is-leaf { background: var(--leaf-tint); }
.wood-step-icon.is-bluebell { background: var(--bluebell-soft); }
.wood-step-icon svg { width: 24px; height: 24px; }
.wood-step h4 { margin: 0 0 6px; font-size: 1.1875rem; line-height: 1.3; }
.wood-step p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }

.wood-cants { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 72px; }
.wood-cants-map { padding: 20px; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.wood-cants-map img { width: 100%; }
.wood-cants-text h3 { margin-bottom: 16px; font-size: 1.625rem; }
.wood-cants-text p { max-width: 60ch; color: var(--ink-soft); }

/* What grows here: the plants in flower this month, then four indicators */
.wood-plants { background: var(--paper); padding-top: 96px; }
.wood-plants .wood-chapter-head { margin-bottom: 16px; }
.wood-plants-lead { max-width: 38em; margin-bottom: 48px; }
.wood-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.wood-row-head h3 { margin: 0; font-size: 1.5rem; }
.wood-row-head .label { margin-left: 8px; font-size: 0.8125rem; }
.wood-plates { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.wood-plates-now .plant-card { aspect-ratio: 4 / 3; }
.wood-plates-more { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; min-height: 100%; box-sizing: border-box; aspect-ratio: 4 / 3; padding: 24px; border-radius: 14px; background: var(--forest); color: var(--paper); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wood-plates-more:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.wood-plates-more strong { font-size: 2.75rem; line-height: 1; }
.wood-plates-more span { font-size: 0.9375rem; color: var(--wood-tint); }
.wood-plates-more .wood-plates-more-link { margin-top: 6px; font-weight: 600; color: var(--leaf-tint); }
.wood-plates-more-link::after { content: ' →'; }
.wood-signs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; margin-top: 72px; }
.wood-signs-text h3 { margin-bottom: 12px; font-size: 1.5rem; }
.wood-signs-text p { color: var(--ink-soft); }
.wood-signs-text .btn-row { margin: 24px 0 0; }
.wood-book { margin: 20px 0 0; font-size: 0.9375rem; }
.wood-plates-signs { gap: 12px; }

/* Visit the wood: the dark band at the foot of the page */
.wood-visit { background: var(--forest); color: var(--paper); padding: 96px 0 120px; }
.wood-visit :focus-visible { outline-color: var(--paper); }
.wood-visit a:not(.btn) { color: var(--leaf-tint); }
.wood-visit .wood-chapter-head { margin-bottom: 20px; border-top-color: #c0cbaa; }
.wood-visit .wood-chapter-head .label { color: #c0cbaa; }
.wood-visit .lead { max-width: 36em; margin-bottom: 48px; color: #dcdad2; }
.wood-visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.wood-visit-list { list-style: none; margin: 0; padding: 0; }
.wood-visit-list li { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(243, 241, 233, 0.2); }
.wood-visit-list li:first-child { padding-top: 0; }
.wood-visit-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.wood-visit-list h3 { margin: 0 0 4px; font-size: 1.1875rem; }
.wood-visit-list p { margin: 0; color: #dcdad2; }
.wood-visit-list p + p { margin-top: 8px; }
.wood-visit-list .wood-gridref { font-family: var(--font-mono); font-size: 0.75rem; color: #c0cbaa; }
.wood-visit-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(243, 241, 233, 0.12); color: var(--paper); }
.wood-visit-icon.is-key { background: var(--leaf-tint); color: var(--forest); }
.wood-visit-icon svg { width: 22px; height: 22px; }

/* The map switch: two radio buttons dressed as a pill toggle */
.wood-map-switch { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 4px; border: 0; border-radius: 9999px; background: rgba(243, 241, 233, 0.12); }
.wood-map-switch label { position: relative; }
.wood-map-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.wood-map-switch span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 9999px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); }
.wood-map-switch input:checked + span { background: var(--paper); color: var(--ink); }
.wood-map-switch input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 2px; }
.wood-map-street iframe { display: block; width: 100%; height: 440px; border: 0; border-radius: var(--radius-lg); background: var(--wood-tint); }
.wood-map-plan { display: flex; justify-content: center; box-sizing: border-box; height: 440px; margin: 0; padding: 16px; border-radius: var(--radius-lg); background: var(--white); }
.wood-map-plan img { width: auto; height: 100%; }
.wood-map:has(input[value="street"]:checked) .wood-map-plan { display: none; }
.wood-map:has(input[value="plan"]:checked) .wood-map-street { display: none; }
/* Without :has() both maps show, one above the other, and the switch goes. */
@supports not selector(:has(*)) {
  .wood-map-switch { display: none; }
  .wood-map-plan { margin-top: 16px; }
}
.wood-map .btn-row { margin-top: 18px; }
.wood-map-note { margin: 12px 0 0; font-size: 0.875rem; }

@media (max-width: 1020px) {
  .wood-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wood-jump ol { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 900px) {
  .wood-hero-inner, .wood-intro, .wood-cants, .wood-signs, .wood-visit-grid { grid-template-columns: 1fr; }
  .wood-hero-inner { gap: 32px; }
  .wood-intro, .wood-signs { gap: 24px; }
  .wood-cants { gap: 24px; }
  .wood-cants-map { max-width: 420px; }
  .wood-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wood-plates-now .plant-card, .wood-plates-more { aspect-ratio: 1; }
  /* The map and its buttons come first; the list of how to get there follows. */
  .wood-map { order: -1; }
}
@media (max-width: 820px) {
  .wood-hero { padding: 40px 0; }
  .wood-hero-photo img { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
  .wood-facts div { flex-basis: 90px; }
  .wood-facts dd { font-size: 1.0625rem; }
  .wood-jump { padding: 32px 0 8px; }
  .wood-jump-card { padding: 10px 14px 10px 10px; gap: 14px; }
  .wood-jump-card img { width: 56px; height: 56px; border-radius: 10px; }
  .wood-jump-title { font-size: 1.0625rem; }
  .wood-jump-line { display: none; }
  .wood-chapter { padding: 40px 0 64px; }
  .wood-plants { padding-top: 56px; }
  .wood-visit { padding: 56px 0 72px; }
  .wood-chapter-head { margin-bottom: 24px; padding-top: 16px; }
  .wood-plants-lead { margin-bottom: 32px; }
  .wood-sub { margin-top: 44px; font-size: 1.375rem; }
  .wood-steps { gap: 10px; }
  .wood-step { padding: 16px; }
  .wood-step-top { flex-direction: column-reverse; align-items: flex-start; margin-bottom: 4px; }
  .wood-step h4 { font-size: 1rem; }
  .wood-step p { font-size: 0.8125rem; }
  .wood-cants { margin-top: 44px; }
  .wood-cants-text h3, .wood-signs-text h3, .wood-row-head h3 { font-size: 1.375rem; }
  .wood-signs { margin-top: 44px; }
  .wood-plates { gap: 10px; }
  .wood-plates-more { padding: 16px; }
  .wood-plates-more strong { font-size: 2.25rem; }
  .wood-plates-more span { font-size: 0.8125rem; }
  .wood-visit .lead { margin-bottom: 24px; }
  .wood-map-street iframe { height: 300px; }
  /* The plan is tall and narrow, so on a phone it takes the full width and
     its own height instead of shrinking into the map's landscape frame. */
  .wood-map-plan { height: auto; padding: 12px; }
  .wood-map-plan img { width: 100%; max-width: 420px; height: auto; }
  .wood-map .btn-row .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wood-jump-card, .wood-plates-more { transition: none; }
}

/* height: auto keeps the photo's own shape; its width and height attributes,
   where known, only save the space before it loads. */
.article-img { border-radius: var(--radius-lg); width: 100%; height: auto; }
.article-byline { margin-top: 2rem; }

/* ---------- product detail ---------- */
.product-detail { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
.product-media img { width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--wood-tint); }
/* The shop's own drawings are all 3:2, so their space is saved before they load. */
.product-media img[src^="/img/product-"] { aspect-ratio: 3 / 2; }
.product-info h1 { font-size: clamp(2rem, 4vw, 3rem); }
@media (max-width: 820px) { .product-detail { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    linear-gradient(rgba(18, 21, 11, 0.72), rgba(18, 21, 11, 0.78)),
    url('/img/photos/bluebell-wood.webp') center / cover no-repeat,
    var(--forest-deep);
  color: var(--paper);
  padding: 112px 0;
  overflow: hidden;
}
/* The photo is a fifth of a megabyte and the band is near the foot of the
   page, so it waits until the page's main photo is on screen or the band
   comes near (site.js then adds band-photo), and doesn't hold up that photo
   on a phone. Without scripts it loads straight away. */
.js:not(.band-photo) .cta-band { background-image: linear-gradient(rgba(18, 21, 11, 0.72), rgba(18, 21, 11, 0.78)); }
.cta-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: end; }
.cta-band h2 {
  color: var(--surface); text-transform: uppercase; font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; margin: 0; max-width: 12ch;
}
.cta-side p { color: var(--wood-tint); max-width: 40ch; }
@media (max-width: 820px) {
  .cta-band { padding: 72px 0; }
  .cta-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- plants of the wood (home page band) ---------- */
.plants-band { background: var(--forest-deep); color: var(--paper); padding: 96px 0; }
.plants-band :focus-visible { outline-color: var(--paper); }
.plants-band a:not(.btn) { color: var(--paper); }
.plants-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.plants-intro .label { color: var(--leaf-tint); margin-bottom: 1rem; }
.plants-intro h2 { color: var(--surface); font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; margin-bottom: 1.25rem; }
.plants-intro .lead { color: var(--wood-tint); font-size: 1.1875rem; margin: 0; }
.plants-stats { margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid rgba(243, 241, 233, 0.22); border-bottom: 1px solid rgba(243, 241, 233, 0.22); }
.plants-stats strong { display: block; font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--surface); }
.plants-stats span { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #c0cbaa; }
.plants-actions { margin-top: 0; gap: 1.5rem; }

/* Nine photos on four columns and four rows; the first is two by two. */
.plants-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, 132px); gap: 10px; list-style: none; margin: 0; padding: 0; }
.plants-tile:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.plants-tile:nth-child(2) { grid-column: 3; grid-row: 1 / span 2; }
.plants-tile:nth-child(3) { grid-column: 4; grid-row: 1; }
.plants-tile:nth-child(4) { grid-column: 4; grid-row: 2; }
.plants-tile:nth-child(5) { grid-column: 1; grid-row: 3 / span 2; }
.plants-tile:nth-child(6) { grid-column: 2 / span 2; grid-row: 3; }
.plants-tile:nth-child(7) { grid-column: 4; grid-row: 3 / span 2; }
.plants-tile:nth-child(8) { grid-column: 2; grid-row: 4; }
.plants-tile:nth-child(9) { grid-column: 3; grid-row: 4; }
.plants-tile a { position: relative; display: block; height: 100%; border-radius: 14px; overflow: hidden; background: var(--forest); text-decoration: none; }
.plants-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.plants-tile a:hover img { transform: scale(1.05); }
.plants-tile span { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 8px; border-radius: 8px; background: rgba(251, 249, 241, 0.94); color: var(--ink); font-size: 0.75rem; font-weight: 600; line-height: 1.3; }
.plants-tile:nth-child(-n + 2) span { left: 10px; bottom: 10px; padding: 5px 10px; font-size: 0.8125rem; }
@media (prefers-reduced-motion: reduce) { .plants-tile img { transition: none; } .plants-tile a:hover img { transform: none; } }

/* One column: the words, then the photos, then the counts and links. */
@media (max-width: 1020px) {
  .plants-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .plants-copy { display: contents; }
  .plants-intro { order: 1; max-width: 46rem; margin-bottom: 32px; }
  .plants-mosaic { order: 2; }
  .plants-stats { order: 3; }
  .plants-actions { order: 4; }
}
/* Phones: five of the photos, two across. */
@media (max-width: 600px) {
  .plants-band { padding: 64px 0; }
  .plants-intro { margin-bottom: 24px; }
  .plants-intro .lead { font-size: 1.0625rem; }
  .plants-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 150px 110px 150px; gap: 8px; }
  .plants-tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .plants-tile:nth-child(1) { grid-column: 1 / -1; }
  .plants-tile.is-wide { display: none; }
  .plants-stats { margin: 24px 0; padding: 18px 0; }
  .plants-stats strong { font-size: 1.875rem; }
  .plants-stats span { font-size: 0.625rem; letter-spacing: 0.06em; }
  .plants-actions { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- membership ---------- */
.member-band :focus-visible, .join-hero :focus-visible, .way-member :focus-visible { outline-color: var(--paper); }
.price { display: block; font-size: 3.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }

/* Home page band */
.member-band { background: var(--bluebell); color: var(--paper); padding: 104px 0; overflow: hidden; }
.member-band::before { opacity: 0.12; }
.member-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px 64px; align-items: center; }
.member-band .label { color: var(--bluebell-soft); margin-bottom: 1.25rem; }
.member-band h2 {
  color: var(--surface); text-transform: uppercase; font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; margin: 0 0 1.5rem; max-width: 12ch;
}
.member-band .lead { color: var(--bluebell-soft); max-width: 40ch; margin: 0; }
.price-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.price-tile { background: rgba(243, 241, 233, 0.08); border: 1px solid var(--on-dark-line); border-radius: var(--radius-lg); padding: 1.5rem; }
.price-tile .label { margin-bottom: 0.625rem; }
.price-tile p:last-child { margin: 0.5rem 0 0; color: var(--bluebell-soft); }
.perk-list { list-style: none; margin: 16px 0 0; padding: 0.25rem 1.5rem; border: 1px solid var(--on-dark-line); border-radius: var(--radius-lg); }
.perk-list li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--on-dark-line); }
.perk-list li:last-child { border-bottom: none; }
.perk-list svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 820px) {
  .member-band { padding: 72px 0; }
  .member-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 420px) { .price { font-size: 2.75rem; } .price-tile { padding: 1.25rem; } }

/* Shop card */
.card-member { background: var(--bluebell); border-color: var(--bluebell); color: var(--paper); }
.card-member .member-price {
  position: relative; overflow: hidden; background: transparent;
  display: flex; flex-direction: column; justify-content: center; padding: 1.75rem;
  border-bottom: 1px solid var(--on-dark-line);
}
.card-member .member-price::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
  background: url('/img/contours.svg') right -260px center / 700px auto no-repeat;
}
.card-member .member-price .label { color: var(--bluebell-soft); margin-bottom: 0.625rem; }
.card-member .member-price .price { font-size: 4.5rem; }
.card-member .member-price p:last-child { margin: 0.625rem 0 0; color: var(--bluebell-soft); }
.card-member .card-body p:last-child { color: var(--bluebell-soft); }
.card-member .chip { background: rgba(243, 241, 233, 0.08); border: 1px solid var(--on-dark-line); color: var(--paper); }

/* Get Involved: two ways in */
.section-ways { padding-bottom: 0; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.way { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); overflow: hidden; }
.way > img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; background: var(--wood-tint); }
.way-body { display: flex; flex-direction: column; flex: 1; padding: 2rem; }
.way-body .label { margin-bottom: 0.625rem; }
.way-body h2 { font-size: 1.75rem; margin-bottom: 0.625rem; }
.way-body p:not(.label) { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; }
.way-body .btn-row { margin-top: auto; }
.way-member { position: relative; background: var(--bluebell); border-color: var(--bluebell); color: var(--paper); }
.way-member .way-body p:not(.label), .way-member .label { color: var(--bluebell-soft); }
.way-price {
  position: relative; overflow: hidden; aspect-ratio: 21 / 9;
  display: flex; align-items: center; gap: 24px; padding: 0 2rem;
  border-bottom: 1px solid var(--on-dark-line);
}
.way-price::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
  background: url('/img/contours.svg') right -120px center / 800px auto no-repeat;
}
.way-price .price { font-size: 5.5rem; }
.way-price p { margin: 0; color: var(--bluebell-soft); font-size: 1.125rem; line-height: 1.4; }
@media (max-width: 820px) {
  .ways { grid-template-columns: 1fr; }
  .way-body { padding: 1.5rem; }
  .way-price .price { font-size: 4rem; }
}

/* Join page */
.join-hero { background: var(--bluebell); color: var(--paper); padding: 88px 0; overflow: hidden; }
.join-hero::before { opacity: 0.12; }
.join-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: center; }
.join-hero .label { color: var(--bluebell-soft); margin-bottom: 1.25rem; }
.join-hero h1 {
  color: var(--surface); text-transform: uppercase; font-weight: 600; letter-spacing: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; margin: 0 0 1.5rem;
}
.join-hero .lead { color: var(--bluebell-soft); max-width: 40ch; margin: 0; }
.join-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.join-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; align-items: start; }
.join-cols h2 { margin-bottom: 1.5rem; }
.price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.price-card { background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); padding: 1.75rem; }
.price-card.is-main { background: var(--bluebell-tint); border-color: var(--bluebell-line); }
.price-card .label { color: var(--bluebell-tint-ink); margin-bottom: 0.75rem; }
.price-card .price { color: var(--bluebell-tint-ink); font-size: 4rem; }
.price-card p:last-child { margin: 0.625rem 0 0; color: var(--ink-soft); }
.price-note { margin: 1rem 0 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-soft); }
.perks { list-style: none; margin: 0; padding: 0; }
.perks li { display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--wood); font-size: 1.125rem; }
.perks li:last-child { border-bottom: none; }
.perk-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 9999px; background: var(--bluebell-tint); color: var(--bluebell-tint-ink);
}
.perk-icon svg { width: 22px; height: 22px; }
.money-note {
  margin-top: 48px; padding: 28px 32px; background: var(--paper); border: 1px solid var(--wood); border-radius: var(--radius-lg);
  display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: center;
}
.money-note > div { flex: 1 1 320px; }
.money-note .label { margin-bottom: 0.375rem; }
.money-note > div p:last-child { margin: 0; font-size: 1.125rem; }
.money-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.chip-icon {
  display: inline-flex; align-items: center; gap: 10px; padding: 0.625rem 1.125rem; border-radius: 9999px;
  background: var(--white); border: 1px solid var(--wood); color: var(--forest);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.chip-icon svg { width: 18px; height: 18px; }
.join-cols .lead { font-size: 1.125rem; max-width: 44ch; margin-bottom: 2rem; }
.join-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.join-steps li { display: flex; gap: 18px; align-items: flex-start; }
.join-steps h3 { margin: 0.375rem 0 0.25rem; }
.join-steps p { margin: 0; color: var(--ink-soft); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 9999px; background: var(--bluebell-btn); color: var(--surface);
  font-family: var(--font-mono); font-weight: 600;
}
.join-card { background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); padding: 2rem; }
.join-who { border: none; padding: 0; }
.join-who legend { font-weight: 600; padding: 0; margin-bottom: 0.375rem; }
.count-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0.75rem 0; border-bottom: 1px solid var(--paper); }
.count-row label { font-weight: 500; }
.count-row label span { display: block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }
.count-row input { width: 5.5rem; flex: none; text-align: center; font-size: 1.125rem; font-weight: 700; }
.join-total {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 0.5rem; padding: 0.875rem 1.125rem; border-radius: var(--radius);
  background: var(--bluebell-tint); color: var(--bluebell-tint-ink);
}
.join-total .label { color: inherit; }
.join-total strong { font-size: 1.375rem; }
.join-form .optional { font-weight: 400; color: var(--ink-soft); }
.form-note { margin: 0.875rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.join-faq h3 { font-size: 1.125rem; }
@media (max-width: 820px) {
  .join-hero { padding: 56px 0; }
  .join-hero-grid, .join-cols { grid-template-columns: 1fr; gap: 40px; }
  /* On a phone the prices matter more than the photo */
  .join-hero img { display: none; }
  .price-card { padding: 1.25rem; }
  .price-card .price { font-size: 2.75rem; }
  .money-note { padding: 24px; }
  .join-card { padding: 1.5rem; }
}

/* ---------- contact page ---------- */
.contact-hero {
  background:
    linear-gradient(rgba(18, 21, 11, 0.55), rgba(18, 21, 11, 0.72)),
    url('/img/photos/bluebell-wood.webp') center / cover no-repeat,
    var(--forest-deep);
  color: var(--paper);
  padding: 96px 0;
  overflow: hidden;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-intro .label { color: var(--wood-tint); }
.contact-intro h1 { color: var(--surface); text-transform: uppercase; font-weight: 600; }
.contact-card { background: var(--paper); border-radius: var(--radius-lg); padding: 2rem; color: var(--ink); }
.contact-strip { background: var(--olive); color: var(--paper); padding: 1.125rem 0; }
.contact-strip a { color: var(--paper); }
.contact-strip .label { color: var(--wood-tint); }
.strip-inner { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; align-items: baseline; justify-content: space-between; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-hero { padding: 56px 0; } }

/* ---------- footer ---------- */
.site-footer { background: var(--olive); color: var(--wood-tint); padding: 88px 0 40px; overflow: hidden; }
.site-footer::before { background-position: left -120px bottom -160px; }
.site-footer a { color: var(--paper); }
.site-footer .label { color: var(--leaf-tint); margin-bottom: 0.75rem; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: 0.25rem 0; }
.footer-links address { font-style: normal; margin-bottom: 0.5rem; max-width: 22ch; }
.footer-bottom {
  margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(243, 241, 233, 0.25);
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center;
}
.footer-bottom .brand { margin-bottom: 0.75rem; }
.footer-bottom p span { white-space: nowrap; }
@media (max-width: 520px) { .footer-bottom p span { display: block; } .footer-bottom .sep { display: none; } }
.footer-bottom p { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--leaf-tint); margin: 0; line-height: 1.7; }
.footer-bottom a { color: var(--leaf-tint); }
.footer-bottom .footer-credit { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(243, 241, 233, 0.25); }
@media (max-width: 820px) { .footer-links { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }

/* ---------- forms ---------- */
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
input, textarea, select {
  width: 100%; font: 400 1rem var(--font-sans); color: var(--ink);
  background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
}
input::placeholder, textarea::placeholder { font-family: var(--font-mono); font-size: 0.875rem; color: var(--outline); }
/* focus-visible, so a tapped checkbox (the menu button among them) is not left ringed */
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--forest); outline-offset: 0; border-color: var(--forest); }
textarea { resize: vertical; }
.field .check { display: flex; align-items: center; gap: 0.625rem; font-weight: 500; }
.field .check input { width: 1.125rem; height: 1.125rem; accent-color: var(--forest); }
.btn-row .btn-secondary { background: var(--white); color: var(--forest); border-color: var(--forest); }
.btn-row .push-right { margin-left: auto; }
.form-error { background: #ffdad6; color: #93000a; padding: 0.75rem 1rem; border-radius: var(--radius); }
.hp { position: absolute; left: -9999px; }

/* ---------- admin ---------- */
.admin { background: var(--paper); }
/* The menu runs down the left on a computer. On a phone or small tablet it
   is a bar across the top, and the menu opens from its button (admin.js);
   without JavaScript the menu just shows under the bar. */
.admin-shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr); min-height: 100vh; }
.admin-side { background: var(--olive); color: var(--paper); }
.admin-side-inner { position: sticky; top: 0; box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; max-height: 100vh; overflow-y: auto; padding: 1.5rem 1rem 1.75rem; }
.admin-side-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.5rem 1.25rem; }
.admin-side .logo-tree { width: 36px; height: 36px; }
.menu-toggle { display: none; }
.admin-menu { display: flex; flex-direction: column; flex: 1; }
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-menu .menu-list:last-of-type { margin-bottom: 1.5rem; }
.menu-group { margin: 1.25rem 0 0.375rem; padding: 0 0.625rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf-tint); }
.menu-link { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; box-sizing: border-box; padding: 0.375rem 0.625rem; border-radius: 0.625rem; color: var(--paper); text-decoration: none; font-weight: 500; line-height: 1.25; }
.menu-link:hover { background: rgba(243, 241, 233, 0.12); }
.menu-link[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 700; }
.menu-ico { display: grid; place-items: center; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; background: var(--t-bg); color: var(--t-ink); }
.menu-link .nav-badge { margin-left: auto; }
.nav-badge { display: inline-block; min-width: 1.375rem; padding: 0 0.4375rem; border-radius: 9999px; background: var(--error); color: var(--white); font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 1.375rem; }
.menu-foot { margin-top: auto; padding: 1.25rem 0.625rem 0; border-top: 1px solid var(--on-dark-line); display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.menu-foot a { color: var(--paper); font-weight: 500; }
.menu-foot a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 2px; }
.menu-foot form { color: var(--leaf-tint); font-size: 0.9375rem; }
.menu-foot .linklike { color: var(--leaf-tint); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.admin-main { padding: 40px 56px 96px; min-width: 0; }
.admin-shell.is-bare { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.is-bare .admin-side-inner { position: static; min-height: 0; max-height: none; padding: 1rem 64px; }
.is-bare .admin-side-top { padding: 0; }
@media (max-width: 1099px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .admin-side-inner { position: static; min-height: 0; max-height: none; padding: 0.75rem 1.25rem; }
  .admin-side-top { padding: 0; }
  .js .menu-toggle { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid rgba(243, 241, 233, 0.6); border-radius: var(--radius); background: transparent; color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; }
  .js .menu-toggle[aria-expanded="true"] { background: var(--surface); border-color: var(--surface); color: var(--ink); }
  .admin-menu { padding: 0.75rem 0 0.5rem; }
  .js .admin-menu:not(.is-open) { display: none; }
  .admin-main { padding: 32px 40px 80px; }
  .is-bare .admin-side-inner { padding: 0.75rem 1.25rem; }
}
@media (max-width: 820px) { .admin-main { padding: 24px 20px 64px; } }
.linklike { background: none; border: none; cursor: pointer; padding: 0; }
.inline { display: inline; }
.flash { background: var(--leaf-tint); color: var(--forest); padding: 0.75rem 1.25rem; border-radius: var(--radius); font-weight: 500; }
.flash-error { background: #ffdad6; color: #93000a; }

/* The heading's own bottom margin moves to the row, so the button lines up
   with the heading text rather than sitting low. Same gap as a lone h1. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.125rem, 2.75vw, 2.25rem); }
.page-head h1 { margin: 0; }
.admin-main > * + h2 { margin-top: 2.5rem; }
.admin-table { margin-top: 1.5rem; width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); overflow: hidden; }
.admin-table th { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); text-align: left; padding: 0.75rem 1rem; background: var(--wood-tint); }
.admin-table td { padding: 0.875rem 1rem; border-top: 1px solid var(--paper); vertical-align: middle; }
.row-past { opacity: 0.55; }
.row-divider td { background: var(--paper); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding: 0.5rem 1rem; }
/* Buttons and links at the end of a row. They sit in a div because a table
   cell made into a flex box stops being a cell and drifts out of line. */
.row-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; }
.order-btns { display: inline-flex; gap: 0.25rem; }
.order-btns button { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--wood); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); cursor: pointer; font-size: 0.875rem; line-height: 1; }
.order-btns button:hover { background: var(--wood-tint); }
.order-btns button:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 680px) {
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
  .admin-table thead { display: none; }
  .admin-table tr { padding: 0.75rem 1rem; border-top: 1px solid var(--wood); }
  .admin-table tr:first-child { border-top: none; }
  .admin-table td { padding: 0.25rem 0; border: none; }
  .admin-table td:empty { display: none; }
  .admin-table td[data-label]::before { content: attr(data-label) ': '; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
  .admin-table .row-actions { padding-top: 0.5rem; }
  .row-divider td { margin: 0 -1rem; padding: 0.5rem 1rem; }
}

/* Overview: a card for each job, icons in the same colours as the menu. */
.overview-hello { margin: 0 0 0.25rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
.overview-hello + h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); margin-bottom: 1.75rem; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 16px; }
.task-card { display: flex; flex-direction: column; gap: 0.625rem; min-height: 10.5rem; box-sizing: border-box; padding: 1.25rem; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
.task-card:hover { box-shadow: var(--shadow-lift); }
.task-card strong { font-size: 1.25rem; line-height: 1.2; }
.task-card:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.task-ico { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: var(--t-bg); color: var(--t-ink); }
.task-sub { color: var(--ink-soft); }
/* Visitor numbers: one card across the foot of the grid, so the eight
   jobs above keep their rows. */
.task-card.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 0.125rem; min-height: 0; }
.task-card.is-wide .task-ico { grid-row: span 2; align-self: center; }
/* Messages nobody has picked up: red, like the number in the menu. */
.task-card.is-alert { background: #fff4f2; border-color: var(--error); }
.task-card.is-alert .task-sub { color: var(--error); font-weight: 600; }
.overview-help { margin-top: 1.75rem; max-width: 70ch; }
@media (max-width: 560px) {
  .task-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .task-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.875rem; row-gap: 0.125rem; min-height: 0; padding: 0.875rem 1rem; }
  .task-ico { grid-row: span 2; align-self: center; }
  .task-card strong { font-size: 1.0625rem; }
  .task-sub { font-size: 0.875rem; }
}

.auth-card { max-width: 420px; margin: 8vh auto; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); padding: 2.5rem; }
.auth-card h1 { font-size: 1.75rem; }

.editor { border: 1px solid var(--wood); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.editor textarea { border: none; border-radius: 0; font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.6; }
.editor textarea:focus { outline: none; }
.toolbar { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; padding: 0.375rem; background: var(--wood-tint); border-bottom: 1px solid var(--wood); }
.toolbar button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 2.25rem; min-height: 2rem; padding: 0.375rem 0.625rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.875rem; color: var(--ink); }
.toolbar button:hover { background: var(--white); border-color: var(--wood); }
.toolbar button svg { display: block; }
.toolbar button[data-preview] { margin-left: auto; font-weight: 600; }
.toolbar-hint { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-soft); padding-right: 0.5rem; }
.editor-body { display: grid; grid-template-columns: 1fr; }
.editor-preview { padding: 1rem 1.25rem; background: var(--paper); min-height: 12rem; overflow-wrap: anywhere; }
.editor-preview.prose { font-size: 1rem; max-width: none; }
.editor-preview img { max-height: 16rem; width: auto; }
.editor.previewing .toolbar button:not([data-preview]) { opacity: 0.35; pointer-events: none; }
.editor.previewing textarea { display: none; }
.editor:not(.previewing) .editor-preview { display: none; }
@media (min-width: 900px) {
  .editor-body { grid-template-columns: 1fr 1fr; }
  .editor .editor-preview, .editor:not(.previewing) .editor-preview { display: block; border-left: 1px solid var(--wood); }
  .editor.previewing textarea { display: block; }
  .editor .toolbar button[data-preview] { display: none; }
  .editor .toolbar .preview-label { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); padding-right: 0.5rem; }
}
@media (max-width: 899px) { .editor .toolbar .preview-label { display: none; } }
@media (max-width: 680px) { .toolbar-hint { display: none; } }

/* Photo fields: thumbnail plus buttons; the path lives in a hidden input */
.field-label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.photo-field { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius); padding: 0.75rem; }
.photo-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); background: var(--wood-tint); flex: none; }
.photo-field .photo-empty { flex: none; width: 120px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--wood-tint); font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.photo-field .btn-row { margin-top: 0; }
.photo-field[data-empty="1"] .photo-thumb, .photo-field[data-empty="1"] [data-remove] { display: none; }
.photo-field:not([data-empty="1"]) .photo-empty { display: none; }

/* Photo library picker */
.library { width: min(960px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--wood); border-radius: var(--radius-lg); padding: 1.5rem; background: var(--surface); color: var(--ink); }
.library::backdrop { background: rgba(18, 21, 11, 0.5); }
.library-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.library-head h2 { font-size: 1.5rem; margin: 0; margin-right: auto; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.library-grid button { padding: 0; border: 2px solid transparent; border-radius: var(--radius); background: var(--white); cursor: pointer; overflow: hidden; }
.library-grid button:hover, .library-grid button:focus-visible { border-color: var(--forest); }
.library-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.library-grid figcaption { font-family: var(--font-mono); font-size: 0.625rem; padding: 0.25rem 0.375rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }

/* Busy state for upload buttons */
.btn.is-busy, .is-busy { position: relative; color: transparent !important; pointer-events: none; }
.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 1.125rem; height: 1.125rem; border: 2px solid var(--wood); border-top-color: var(--forest); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Rarely needed fields tucked away */
.advanced { margin-bottom: 1.25rem; }
.advanced summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.advanced[open] summary { margin-bottom: 0.75rem; }

/* Show/hide password */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 4.25rem; }
.pw-wrap .pw-toggle { position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%); width: auto; padding: 0.25rem 0.5rem; border: 1px solid var(--wood); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }

/* Repeat-dates fieldset on the event form */
.repeat-box { border: 1px solid var(--wood); border-radius: var(--radius); background: var(--white); padding: 1rem 1.25rem 0; margin: 0 0 1.25rem; }
.repeat-box legend { font-weight: 600; padding: 0 0.375rem; }
.repeat-box[data-off="1"] .repeat-until { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 680px) { .field-row { grid-template-columns: 1fr; } }
.media-usage { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-soft); margin: 0 0 0.5rem; }
.media-item .btn-row { margin-top: 0; gap: 0.5rem; }
.cf-turnstile { margin-bottom: 1.25rem; }

.img-field { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.375rem; }
.img-field input { flex: 1; }
.img-field .btn { flex: none; width: auto; }

/* Messages list: one table in groups (needs a reply, someone replying,
   answered), newest first in each. The name is the link; admin.js lets the
   rest of the row follow it. */
.msg-intro { margin: 0 0 1rem; font-size: 1.125rem; color: var(--ink-soft); }
.msg-steps { margin-bottom: 0; }
.msg-step-note { color: var(--ink-soft); }
.msg-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--white); border: 2px solid var(--forest); border-radius: var(--radius-md); }
.msg-prompt + .msg-prompt { margin-top: 0.75rem; }
.msg-prompt p { flex: 1 1 18rem; margin: 0; }
.msg-prompt form { margin: 0; }
.msg-table { margin-top: 1.75rem; table-layout: fixed; }
.msg-table thead th:nth-child(1) { width: 23%; }
.msg-table thead th:nth-child(3) { width: 9.5rem; }
.msg-table thead th:nth-child(4) { width: 22%; }
.msg-row { cursor: pointer; }
.msg-row:hover td { background: var(--surface); }
.msg-from a { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.msg-from a:hover { text-decoration: underline; }
.is-new .msg-from a { font-weight: 700; }
.msg-from .cell-sub { overflow-wrap: anywhere; }
.msg-clip { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg-when { white-space: nowrap; }
.is-done td { color: var(--ink-soft); }
.is-done .msg-from a { font-weight: 500; }
.msg-table .chip, .msg-panel .chip, .msg-head .chip { padding: 0.1875rem 0.625rem; font-size: 0.6875rem; white-space: nowrap; }
.msg-table .chip svg, .msg-panel .chip svg { margin-right: 0.375rem; vertical-align: -2px; }
.msg-new { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--forest); }
.msg-new::before { content: ''; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: currentColor; }
.msg-table .row-group th { padding: 0.625rem 1rem; background: var(--paper); border-top: 1px solid var(--wood); font-family: var(--font-sans); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.msg-table tbody .row-group:first-child th { border-top: none; }
.row-group h2 { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.msg-count { display: inline-block; min-width: 1.5rem; padding: 0 0.5rem; border-radius: 9999px; background: var(--error); color: var(--white); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; line-height: 1.375rem; text-align: center; }
.msg-count-quiet { background: var(--wood-tint); color: var(--ink-soft); font-weight: 500; }
.row-empty td { color: var(--ink-soft); }
.admin-table + .msg-foot { margin-top: 1rem; }
.msg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.9375rem; }
.msg-foot .muted { max-width: 64ch; }
.msg-none { margin-top: 1.75rem; }
@media (max-width: 680px) {
  .msg-table .msg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.75rem; }
  .msg-table .msg-from .cell-sub, .msg-table .msg-status .cell-sub { display: none; }
  .msg-table .msg-status { grid-column: 2; grid-row: 1; text-align: right; }
  .msg-table .msg-about { grid-column: 1 / -1; }
  .msg-table .msg-clip { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .msg-table .msg-when { grid-column: 1 / -1; font-size: 0.875rem; color: var(--ink-soft); }
  .msg-table .msg-when .cell-sub { display: inline; }
  .msg-table .msg-when .cell-sub::before { content: ' · '; }
  .msg-table .row-group, .msg-table .row-empty { padding: 0; }
  .msg-table .row-group th { display: block; }
  .msg-table .row-empty td { padding: 0.75rem 1rem; }
}

/* One message: what they sent on the left, the steps to answer it on the
   right (below it on a phone), then what has happened. */
.back-link { margin: 0 0 1.5rem; }
.back-link a, .msg-next a:first-child { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.msg-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); grid-template-rows: auto 1fr; grid-template-areas: "main panel" "history panel"; gap: 1.5rem 2rem; align-items: start; }
.msg-main { grid-area: main; display: flex; flex-direction: column; gap: 1.25rem; }
.msg-panel { grid-area: panel; display: flex; flex-direction: column; gap: 1.375rem; padding: 1.75rem; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.msg-history { grid-area: history; }
@media (max-width: 900px) {
  .msg-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "main" "panel" "history"; }
}
.admin-main .msg-head h1 { margin: 0.75rem 0 0.5rem; font-size: clamp(2.25rem, 4.5vw, 3.25rem); overflow-wrap: anywhere; }
.msg-head > .chip:first-child + h1 { margin-top: 0.75rem; }
.msg-head > h1:first-child { margin-top: 0; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0; }
.msg-email { font-size: 1.125rem; font-weight: 500; overflow-wrap: anywhere; user-select: all; }
.msg-card { padding: 1.5rem 1.75rem; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.admin-main .msg-h { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.msg-body { max-width: 62ch; font-size: 1.125rem; line-height: 1.6; overflow-wrap: anywhere; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-facts { display: grid; grid-template-columns: 9rem 1fr; gap: 0.625rem 1rem; margin: 0; }
.msg-facts dt { color: var(--ink-soft); }
.msg-facts dd { margin: 0; font-weight: 600; }
.msg-history ol { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.msg-history li { display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: baseline; padding-left: 1.25rem; position: relative; }
.msg-history li::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--olive); }
.msg-history .msg-pending::before { background: transparent; box-shadow: inset 0 0 0 2px var(--outline-var); }
.admin-main .msg-panel h2 { margin: 0; font-size: 1.5rem; }
.msg-panel form { margin: 0; }
.msg-state { margin: 0; line-height: 1.6; }
.msg-state .chip, .msg-state .msg-new { margin-right: 0.375rem; }
.msg-step { display: flex; gap: 0.875rem; align-items: flex-start; }
.msg-step > div { flex: 1; min-width: 0; }
.msg-step .btn, .msg-ask .btn, .msg-panel > div > .btn, .msg-panel > div > form .btn { width: 100%; }
.nl-num-outline { background: var(--white); color: var(--forest); box-shadow: inset 0 0 0 2px var(--forest); }
.msg-hint { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); }
.msg-ask { padding: 1rem; border-radius: var(--radius-md); background: var(--leaf-tint); }
.msg-ask > p:first-child { margin: 0 0 0.75rem; }
.msg-panel[data-state="new"] [data-if-mine], .msg-panel[data-state="mine"] [data-if-new] { display: none; }
/* Back from the email: Mark as answered becomes the main button. */
.msg-panel[data-state="mine"] .msg-step-reply .btn { background: transparent; color: var(--ink); border-color: var(--wood); }
.msg-panel[data-state="mine"] .msg-step-done .btn { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.msg-panel[data-state="mine"] .msg-step-done .nl-num-outline { background: var(--forest); color: var(--paper); }
.msg-delete { padding-top: 1.125rem; border-top: 1px solid var(--wood-tint); }
.msg-delete-btn { font: 500 0.9375rem var(--font-sans); color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.msg-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1rem; margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--wood); }
.msg-next a + a { font-weight: 600; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 1.5rem; }
.media-item { margin: 0; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius); padding: 0.5rem; }
.media-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.media-item figcaption input { font-family: var(--font-mono); font-size: 0.6875rem; margin: 0.5rem 0; padding: 0.25rem 0.5rem; }
/* A photo's description: label (with "None yet" while it has none), box, Save. */
.media-alt { margin-top: 0.625rem; }
.media-alt label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
.media-alt label .chip { padding: 0.125rem 0.5rem; font-size: 0.625rem; }
.media-alt label .chip[hidden] { display: none; }
.media-alt input { font-size: 0.875rem; padding: 0.375rem 0.5rem; }
.media-alt .btn { margin-top: 0.375rem; }
.upload-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 1rem 0; }
.upload-form .btn { width: auto; }
.upload-alt { flex: 0 1 26rem; }
.upload-alt label { display: block; font-weight: 600; margin-bottom: 0.375rem; }

/* Volunteer accounts (Users page) */
.people-table { border-collapse: separate; border-spacing: 0; overflow: visible; }
.people-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.people-table thead th:last-child { border-top-right-radius: var(--radius-lg); }
.people-table td { padding: 1rem 1.25rem; border-top: 1px solid var(--wood-tint); }
.people-table th { padding: 0.75rem 1.25rem; }
.people-table .notify-cell { width: 1%; padding-right: 2rem; white-space: nowrap; }
.people-table .pw-cell { width: 1%; padding-right: 0.375rem; text-align: right; white-space: nowrap; }
.people-table .delete-cell { width: 1%; padding-left: 0.375rem; white-space: nowrap; }
.person { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
.person-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--leaf-tint); color: var(--forest); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.person-badge-shared { background: var(--wood-tint); color: var(--ink-soft); }
.person-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.person-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.625rem; font-weight: 600; line-height: 1.3; }
.person-name .chip { padding: 0.125rem 0.5rem; font-size: 0.625rem; line-height: 1.4; }
.person-email { font-size: 0.875rem; color: var(--ink-soft); overflow-wrap: anywhere; line-height: 1.4; }
.notify-none { font-size: 0.875rem; }

/* On/off switch. It is a submit button, so it works without JavaScript. */
.switch-form { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0; background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.switch-track { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border: 2px solid var(--outline); border-radius: 9999px; background: var(--paper); transition: background-color 0.15s ease, border-color 0.15s ease; }
.switch-track::after { content: ''; position: absolute; top: 50%; left: 0.25rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--outline); transform: translateY(-50%); transition: transform 0.15s ease, width 0.15s ease, height 0.15s ease, background-color 0.15s ease; }
.switch[aria-checked="true"] { color: var(--forest); }
.switch[aria-checked="true"] .switch-track { background: var(--forest); border-color: var(--forest); }
.switch[aria-checked="true"] .switch-track::after { width: 1rem; height: 1rem; background: var(--white); transform: translate(1rem, -50%); }
.switch:hover .switch-track { border-color: var(--forest); }

/* A <details> whose contents float under its button as a small panel */
.dropdown { position: relative; display: inline-block; text-align: left; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary::after { content: ''; width: 0.4375rem; height: 0.4375rem; margin: -0.1875rem 0 0 0.125rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease; }
.dropdown[open] > summary { background: var(--wood-tint); }
.dropdown[open] > summary::after { margin-top: 0.1875rem; transform: rotate(-135deg); }
.dropdown-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 20; width: 20rem; padding: 1rem 1.125rem 1.125rem; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); white-space: normal; }
.dropdown-panel label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.dropdown-panel .field-hint { margin-bottom: 0.875rem; }
.field-hint { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); }
.table-note { max-width: 72ch; font-size: 0.9375rem; }
.admin-table + .table-note { margin-top: 1rem; }
.notice.table-note { font-size: 1rem; }

.form-card { max-width: 46rem; margin-top: 3rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.admin-main .form-card h2 { margin: 0 0 0.375rem; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.form-card > p { margin-bottom: 1.5rem; }
.form-card .field-row { row-gap: 0; }
.form-card .btn { margin-top: 0.25rem; }

@media (max-width: 680px) {
  .people-table tr { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; padding: 1rem; }
  .people-table td, .people-table .notify-cell, .people-table .pw-cell, .people-table .delete-cell { width: auto; padding: 0; border: none; }
  .people-table .person-cell, .people-table .notify-cell { grid-column: 1 / -1; }
  .people-table .notify-cell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--wood-tint); border-bottom: 1px solid var(--wood-tint); }
  .people-table td.notify-cell::before { content: attr(data-label); }
  .people-table .pw-cell { text-align: left; }
  .people-table .delete-cell { justify-self: end; }
  .people-table .delete-cell:empty { display: none; }
  .dropdown-panel { right: auto; left: 0; width: min(20rem, calc(100vw - 4.5rem)); }
}

/* ---------- admin help page ---------- */
/* Each job has its own soft colour so the list is quick to scan. */
.t-news { --t-bg: var(--leaf-tint); --t-ink: var(--forest); --t-solid: #3f5a1f; }
.t-events { --t-bg: #f5e1c8; --t-ink: #5c300a; --t-solid: #8a4b14; }
.t-products { --t-bg: #ece3cb; --t-ink: #4a3d17; --t-solid: #6b5a2a; }
.t-photos { --t-bg: var(--bluebell-tint); --t-ink: var(--bluebell-tint-ink); --t-solid: var(--bluebell-btn); }
.t-pages { --t-bg: #d8ebe5; --t-ink: #173f38; --t-solid: #1f5a50; }
.t-messages { --t-bg: #f6dfea; --t-ink: #6a1f44; --t-solid: #8c2f5c; }
.t-users { --t-bg: #e6e8dc; --t-ink: #3a4130; --t-solid: var(--olive); }
.t-newsletter { --t-bg: #f3ecc4; --t-ink: #4d4210; --t-solid: #7a6a12; }
.t-visitors { --t-bg: #dde8ef; --t-ink: #1d3a4f; --t-solid: #2d5672; }

.help { max-width: 60rem; }
.help .lead { max-width: 54ch; margin-bottom: 2rem; }

/* Menu items and button names, drawn as they look on screen */
.ui { display: inline-block; padding: 0 0.5625rem; border: 1px solid var(--wood); border-radius: 6px; background: var(--white); color: var(--ink); font-family: var(--font-mono); font-size: 0.74em; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; line-height: 1.9; vertical-align: 1px; }
.ui-main { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.ui-menu { background: var(--olive); border-color: var(--olive); color: var(--paper); font-family: var(--font-sans); font-size: 0.875em; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ui-danger { color: var(--error); border-color: var(--outline-var); }

.help-basics { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; margin-bottom: 2.5rem; }
.help-basics > div { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1.125rem; border-radius: var(--radius-md); background: var(--t-bg); color: var(--t-ink); }
.help-basics svg { flex: none; margin-top: 2px; }
.help-basics p { margin: 0; }

.help-tasks { display: flex; flex-direction: column; gap: 12px; }
.help-task { background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); scroll-margin-top: 8rem; }
.help-task summary { display: grid; grid-template-columns: auto 1fr auto; column-gap: 1rem; align-items: center; padding: 1.125rem 1.375rem; cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.help-task summary::-webkit-details-marker { display: none; }
.help-task summary:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.help-icon { grid-row: 1 / 3; display: flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--t-bg); color: var(--t-ink); }
.help-task summary h2 { grid-column: 2; align-self: end; margin: 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; }
.help-task summary .label { grid-column: 2; align-self: start; }
.help-chev { grid-column: 3; grid-row: 1 / 3; color: var(--ink-soft); transition: transform 0.15s ease; }
.help-task[open] .help-chev { transform: rotate(180deg); }
.help-task-body { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0.25rem 1.375rem 1.5rem; }
.help-steps { flex: 3 1 20rem; min-width: 0; }
.help-steps > * { margin: 0; }
.help-steps > * + * { margin-top: 0.875rem; }
.help-steps ol { padding-left: 1.375rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* Rough drawing of the screen each job happens on */
.sketch { flex: 2 1 17.5rem; align-self: flex-start; min-width: 0; margin: 0; padding: 1.125rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; background: var(--paper); border: 1px solid var(--wood); border-radius: var(--radius-md); font-size: 0.875rem; }
.sketch > * { max-width: 100%; }
.sketch .label { font-size: 0.6875rem; }
.sk-label { font-weight: 600; }
.sk-field { display: block; align-self: stretch; padding: 0.375rem 0.75rem; border: 1px solid var(--outline-var); border-radius: var(--radius); background: var(--white); color: var(--outline); }
.sk-row .sk-field { align-self: auto; flex: 1 1 7rem; }
.sk-select { display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.sk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; align-self: stretch; padding: 0.75rem 0.875rem; border: 1px solid var(--wood); border-radius: var(--radius-md); background: var(--white); }
.sk-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sk-card.sk-row { flex-direction: row; align-items: center; }
.sk-card > .sk-row { align-self: stretch; }
.sk-grow { flex: 1 1 8rem; }
.sk-editor { display: block; align-self: stretch; border: 1px solid var(--outline-var); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.sk-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; background: var(--wood-tint); font-family: var(--font-mono); font-size: 0.75rem; }
.sk-tools > * { padding: 2px 7px; border-radius: var(--radius-sm); background: var(--white); }
.sk-text { display: block; min-height: 4rem; padding: 0.5rem 0.75rem; color: var(--outline); }
.sk-check, .sk-radio { display: flex; gap: 0.5rem; align-items: center; }
.sk-check::before, .sk-radio::before { content: ''; flex: none; width: 16px; height: 16px; border: 2px solid var(--olive); background: var(--white); }
.sk-check::before { border-radius: 4px; }
.sk-check.on::before { background: var(--forest); border-color: var(--forest); }
.sk-radio::before { border-radius: 50%; }
.sk-radio.on::before { border: 5px solid var(--forest); }
.sk-hi { outline: 2px solid var(--t-solid); outline-offset: 2px; border-radius: var(--radius-sm); }
.sk-link { color: var(--forest); text-decoration: underline; }
.sk-arrows { display: inline-flex; gap: 4px; }
.sk-arrows > span { display: flex; width: 1.625rem; height: 1.625rem; align-items: center; justify-content: center; border: 1px solid var(--wood); border-radius: var(--radius-sm); }
.sk-thumb { display: flex; width: 72px; height: 54px; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--sage); color: var(--white); }
.sk-then { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; align-self: stretch; padding: 0.625rem 0.75rem; border-radius: var(--radius); background: var(--t-solid); color: var(--white); font-weight: 600; }
/* The newsletter page's numbered steps, with 2 and 3 on its dark panel. */
.sk-step { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.sk-num { display: inline-flex; width: 1.375rem; height: 1.375rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--leaf-tint); color: var(--forest); font-family: var(--font-mono); font-size: 0.6875rem; }
.sk-dark { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; align-self: stretch; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--forest); color: var(--surface); }
.sk-dark .ui-main { background: var(--leaf-tint); border-color: var(--leaf-tint); color: var(--forest-deep); }
.sk-email { display: flex; flex-direction: column; gap: 0.25rem; align-self: stretch; padding: 0.625rem 0.75rem; border-radius: var(--radius); background: var(--paper); color: var(--ink-soft); }
.sk-email strong { color: var(--ink); }
.sk-table { display: block; align-self: stretch; border: 1px solid var(--wood); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.sk-th, .sk-tr { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.75rem; padding: 0.5rem 0.75rem; }
.sk-th { background: var(--wood-tint); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.sk-th .sk-hi { justify-self: start; }
.sk-tr + .sk-tr { border-top: 1px solid var(--paper); }

.help-stuck { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 2.5rem; padding: 1.75rem 2rem; border-radius: var(--radius-lg); background: var(--bluebell); color: var(--paper); }
.help-stuck > div { flex: 1 1 20rem; }
.help-stuck-icon { display: flex; width: 3.25rem; height: 3.25rem; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--bluebell-light); color: var(--bluebell-ink); }
.help-stuck h2 { margin: 0 0 0.25rem; font-size: 1.375rem; letter-spacing: 0; }
.help-stuck p { margin: 0; color: var(--bluebell-soft); }
.help-stuck a { color: var(--surface); }
@media (max-width: 680px) {
  .help-task summary { padding: 1rem; column-gap: 0.75rem; }
  .help-task-body { padding: 0.25rem 1rem 1.25rem; }
  .help-stuck { padding: 1.5rem; }
}

/* ---------- newsletter sign-up ---------- */
.signup .hp { position: absolute; left: -9999px; }
.signup-row { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: flex-end; }
.signup-field { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 12rem; min-width: 0; }
.signup-field label { font-weight: 600; }
.signup-field .optional { font-weight: 400; color: var(--ink-soft); }
.signup-email { flex-basis: 15rem; }
.signup .btn { flex: none; }
/* The field and button share one height so their edges line up, and the
   button does not lift on hover, which would break that line. */
.signup-field input, .signup .btn { height: 3rem; }
.signup .btn:hover { transform: none; }
.signup-note { margin: 0.625rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.signup .cf-turnstile { margin-top: 0.625rem; }
/* The strip and band are labelled by the heading beside them, so their field
   labels are for screen readers only. */
.signup.is-strip .signup-field label, .signup.is-band .signup-field label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* A: footer strip */
.footer-signup { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; margin-bottom: 64px; padding-bottom: 48px; border-bottom: 1px solid rgba(243, 241, 233, 0.25); }
.footer-signup .label { margin-bottom: 0.5rem; }
.footer-signup > div > p:last-child { margin: 0; font-size: 1.125rem; color: var(--paper); max-width: 30ch; }
.footer-signup input { border-color: transparent; }
.footer-signup .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.footer-signup .signup-note { color: var(--wood-tint); }
@media (max-width: 820px) { .footer-signup { grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; padding-bottom: 40px; } }

/* B: card after news articles, and on /woodland-news */
.signup-card { margin: 2.5rem 0; padding: 1.75rem 2rem; border: 1px solid var(--wood); border-radius: var(--radius-lg); background: var(--paper); }
.signup-card .label { margin-bottom: 0.5rem; }
.signup-card h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin-bottom: 1.25rem; }
@media (max-width: 680px) { .signup-card { padding: 1.5rem 1.25rem; } }

/* C: band on the diary pages */
.signup-band { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; align-items: center; margin: 2.5rem 0; padding: 1.5rem 1.75rem; border-radius: var(--radius-lg); background: var(--leaf-tint); }
.signup-band h2 { font-size: 1.375rem; margin: 0 0 0.25rem; }
.signup-band > div > p { margin: 0; color: var(--ink-soft); }
.signup-band input { border-color: var(--white); }
@media (max-width: 820px) { .signup-band { grid-template-columns: 1fr; gap: 16px; padding: 1.25rem; } }

/* D: tick on the Join form */
.join-newsletter .check { align-items: flex-start; }
.join-newsletter .check input { margin-top: 0.15rem; flex: none; accent-color: var(--bluebell-btn); }
.check-hint { display: block; margin-top: 0.125rem; font-weight: 400; font-size: 0.875rem; color: var(--ink-soft); }

/* A date's own page */
.notice { background: var(--wood-tint); color: var(--ink); padding: 0.75rem 1rem; border-radius: var(--radius); }
.event-where { font-size: 1.125rem; margin-top: 0; }
.event-detail h3 a { color: inherit; text-decoration: none; }
.event-detail h3 a:hover { text-decoration: underline; }

/* ---------- admin: page wording ---------- */
.wording-table td { vertical-align: top; }
.wording-name a { font-weight: 600; font-size: 1.0625rem; }
.wording-lead { margin: 0; max-width: 60ch; font-size: 1.1875rem; color: var(--ink); }
.wording-view { margin: 0.625rem 0 0; font-weight: 600; }
.wording-cols { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; margin-top: 2rem; }
.wording-form { flex: 1 1 28rem; min-width: 0; }
/* The page drawn as a stack of blocks. The ones this page changes use the
   Page wording menu colours, so they stand out from what is set elsewhere. */
.page-map { flex: 0 1 19rem; min-width: 16rem; padding: 1.125rem 1.125rem 1rem; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.admin-main .page-map-h { margin: 0 0 0.25rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
.page-map-sub { margin: 0 0 0.875rem; font-size: 0.875rem; color: var(--ink-soft); }
.map-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.map-blk { padding: 0.5rem 0.75rem; border: 1px solid var(--wood-tint); border-radius: var(--radius); background: var(--paper); color: var(--ink-soft); font-size: 0.875rem; line-height: 1.3; }
.map-blk small { display: block; margin-top: 0.125rem; font-size: 0.75rem; }
.map-blk.is-feed { background: var(--surface); border: 1px dashed var(--outline); }
.map-blk.is-edit { padding: 0.75rem; background: var(--t-bg); border: 2px solid var(--t-solid); color: var(--t-ink); font-weight: 600; }
.map-blk.is-edit small { font-weight: 500; }
.map-key { list-style: none; margin: 1rem 0 0; padding: 0.875rem 0 0; border-top: 1px solid var(--paper); display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.8125rem; color: var(--ink-soft); }
.map-key li { display: flex; gap: 0.5rem; align-items: center; }
.map-swatch { flex: none; width: 1.125rem; height: 0.75rem; border: 1px solid var(--wood-tint); border-radius: 3px; background: var(--paper); }
.map-swatch.is-feed { background: var(--surface); border: 1px dashed var(--outline); }
.map-swatch.is-edit { background: var(--t-bg); border: 2px solid var(--t-solid); }
@media (max-width: 820px) { .page-map { flex: 1 1 100%; } }

/* ---------- admin: sharing and the newsletter ---------- */
.btn-facebook { background: #1877f2; border-color: #1877f2; color: var(--white); }
.share-link { margin: 0; }
.share-link label { display: block; font-weight: 500; }
.share-link textarea { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); resize: none; }

/* Edit pages: the line under the heading saying whether it is live */
.admin-main h1:has(+ .status-line) { margin-bottom: 0.75rem; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin: 0 0 1.75rem; font-size: 1.125rem; }
.status-dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.status-live { background: #3f5a1f; }
.status-draft, .status-passed { border: 2px solid var(--outline); }
.status-word { font-weight: 600; }
.status-sep { color: var(--outline); }

/* Edit pages: newsletter and Facebook, one row each */
.share-summary { background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); padding: 0.25rem 1.5rem; }
.share-row { display: grid; grid-template-columns: 2.75rem 10rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1rem; padding: 1rem 0; }
.share-row + .share-row { border-top: 1px solid var(--wood-tint); }
.share-icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.share-icon-nl { background: var(--leaf-tint); color: var(--forest); }
.share-icon-fb { background: #dbe7fb; color: #0f4fa8; }
.admin-main .share-name { margin: 0; font-size: 1.125rem; }
.share-state { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.share-state svg { flex: none; color: #3f5a1f; }
.share-row > form, .share-row > .btn { justify-self: end; }
.share-help { margin: 0.75rem 0 2rem; }
.share-help summary { cursor: pointer; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.share-help[open] summary { margin-bottom: 1rem; }
.share-help .steps { margin-bottom: 1rem; }
.done-card .share-help { margin: 0; }
.share-status { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
.share-status:empty { display: none; }
@media (max-width: 680px) {
  .share-summary { padding: 0.25rem 1rem; }
  .share-row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .share-icon { width: 2.5rem; height: 2.5rem; }
  .share-row > .share-state, .share-row > form, .share-row > .btn { grid-column: 2; justify-self: start; }
  .share-row > .btn, .done-card .btn-facebook { max-width: 100%; white-space: normal; text-align: center; }
  .status-sep { display: none; }
}

/* Numbered steps with the number in a circle */
.steps { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; align-items: flex-start; gap: 0.75rem; counter-increment: step; }
.steps li::before { content: counter(step); flex: none; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin-top: 0.0625rem; border-radius: 50%; background: var(--wood-tint); color: var(--forest); font-size: 0.8125rem; font-weight: 600; }

/* Bottom of a new article or date: the newsletter choice beside Publish */
.publish-box { margin-top: 2rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.admin-main .publish-box h2 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.publish-box .btn-row { margin-top: 1.25rem; }
.publish-box > p.muted { margin: 1rem 0 0; font-size: 0.9375rem; }
.publish-newsletter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
.publish-newsletter p { margin: 0; font-size: 0.9375rem; }
.switch-label { position: relative; min-height: 2.75rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.switch-label .switch-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; }
.switch-input:checked + .switch-track { background: var(--forest); border-color: var(--forest); }
.switch-input:checked + .switch-track::after { width: 1rem; height: 1rem; background: var(--white); transform: translate(1rem, -50%); }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--forest); outline-offset: 3px; }

/* The page after something goes on the website */
.done-panel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem); border-radius: var(--radius-lg); background: var(--forest); color: var(--paper); }
.done-tick { flex: none; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--leaf-tint); color: var(--forest); }
.done-text { flex: 1 1 16rem; }
.admin-main .done-panel h1 { margin: 0; font-size: clamp(1.875rem, 4vw, 3rem); color: var(--surface); }
.done-panel p { margin: 0.75rem 0 0; font-size: 1.125rem; color: var(--leaf-tint); }
.done-panel a { color: var(--surface); }
.admin-main .done-h2 { margin: 3rem 0 0.5rem; font-size: clamp(1.625rem, 3vw, 2.25rem); }
.done-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.done-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.done-card > p { margin: 0; }
.done-card > details { align-self: stretch; }
.done-card-head { display: flex; align-items: center; gap: 0.875rem; }
.admin-main .done-card h3 { margin: 0; font-size: 1.375rem; }
.done-num { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--forest); color: var(--paper); font-weight: 700; }
.done-state { display: flex; align-items: center; gap: 0.625rem; align-self: stretch; padding: 0.75rem 0.875rem; border-radius: var(--radius); background: var(--leaf-tint); color: var(--forest); font-weight: 600; }
.done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--wood); }

/* List columns */
.cell-sub { display: block; margin-top: 0.125rem; font-size: 0.875rem; color: var(--ink-soft); }
.chip-todo { background: #f5e1c8; color: #5c300a; }
form.notice { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/* Newsletter page: 1 Write on the left, then 2 Check and 3 Send on a dark
   panel on the right, so the editing side and the email cannot be mixed up. */
.nl-steps { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.nl-steps li { display: flex; align-items: center; gap: 0.625rem; }
.nl-steps strong { font-weight: 600; }
.nl-where { color: var(--ink-soft); }
.nl-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--forest); color: var(--paper); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; }
.admin-main .nl-step-h { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 1.75rem; letter-spacing: -0.01em; }
.nl-step-h .nl-num { width: 2.25rem; height: 2.25rem; font-size: 0.9375rem; background: var(--leaf-tint); color: var(--forest); }
.nl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 32px; align-items: start; }

.nl-write { display: flex; flex-direction: column; gap: 1.25rem; }
.nl-card { margin: 0; padding: 1.25rem 1.375rem; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-md); }
.nl-card .field { margin-bottom: 0; }
.admin-main .nl-card h3 { margin: 0; font-size: 1rem; line-height: 1.5; }
.nl-hint { display: block; margin: 0.125rem 0 0.625rem; font-size: 0.875rem; font-weight: 400; color: var(--ink-soft); }
.nl-optional { font-weight: 400; color: var(--ink-soft); }
.nl-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.nl-saved svg { color: var(--olive); }
.nl-saved .linklike { color: var(--forest); text-decoration: underline; font: inherit; }
/* The email preview beside it shows the opening message, so the editor's own
   preview would only squeeze the writing space. */
.nl-write .editor-body { grid-template-columns: 1fr; }
.nl-write .editor .editor-preview, .nl-write .preview-label, .nl-write .toolbar button[data-preview] { display: none; }

.nl-group { margin: 0 0 1.125rem; padding: 0; border: none; }
.nl-group:last-child { margin-bottom: 0; }
.nl-group legend { padding: 0 0 0.375rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }
.nl-group ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--wood-tint); border-radius: var(--radius); overflow: hidden; }
.nl-item { padding: 0.625rem 0.875rem; border-top: 1px solid var(--wood-tint); }
.nl-item:first-child { border-top: none; }
.nl-item:has(input:checked) { background: #f6f9ee; }
.nl-item .check { display: flex; gap: 0.125rem 0.625rem; align-items: flex-start; font-weight: 500; }
.nl-item .check input { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; flex: none; accent-color: var(--forest); }
.nl-label { flex: 1 1 auto; min-width: 0; }
.nl-when { flex: none; padding-top: 0.125rem; font-size: 0.8125rem; font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.nl-note { display: block; margin: 0.125rem 0 0 1.75rem; font-size: 0.8125rem; color: var(--ink-soft); }
.nl-item.is-off .nl-label { padding-left: 1.75rem; text-decoration: line-through; color: var(--outline); }
.nl-all { margin: 0 0 0.375rem; font-size: 0.8125rem; }
.nl-all .linklike { color: var(--forest); text-decoration: underline; font: inherit; }

.nl-check { padding: 1.5rem; background: var(--forest); color: var(--paper); border-radius: var(--radius-lg); }
.nl-check .nl-step-h { color: var(--surface); }
.nl-check-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.nl-check-head .nl-step-h { flex-grow: 1; }
.nl-width { display: inline-flex; padding: 3px; border-radius: 9999px; background: rgba(243, 241, 233, 0.12); }
.nl-width[hidden] { display: none; }
.nl-width button { min-height: 2.25rem; padding: 0.375rem 1rem; border: none; border-radius: 9999px; background: transparent; color: var(--paper); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.nl-width button[aria-pressed="true"] { background: var(--leaf-tint); color: var(--forest-deep); font-weight: 700; }
.nl-status { font-family: var(--font-mono); font-size: 0.75rem; color: var(--leaf-tint); }
.nl-inbox { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0 0 0.875rem; font-size: 0.875rem; }
.nl-inbox dt { padding-top: 0.125rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf-tint); }
.nl-inbox dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--outline-var); }
.nl-inbox dd:first-of-type { font-weight: 600; color: var(--surface); }
.nl-none { font-weight: 400; font-style: italic; color: var(--outline-var); }
.nl-screen { border-radius: var(--radius); background: rgba(243, 241, 233, 0.08); }
.nl-frame { display: block; width: 100%; height: 78vh; min-height: 480px; border: 1px solid var(--wood); border-radius: var(--radius-md); background: #f3f1e9; }
.nl-check .nl-frame { height: 72vh; min-height: 420px; margin: 0 auto; border: none; border-radius: var(--radius); transition: max-width 0.2s ease; }
.nl-screen.is-phone .nl-frame { max-width: 375px; }
.nl-send { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(243, 241, 233, 0.2); }
.nl-send .nl-step-h { margin-bottom: 0.875rem; }
.nl-checks { list-style: none; margin: 0 0 1.125rem; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.9375rem; color: var(--outline-var); }
.nl-checks li { display: flex; align-items: flex-start; gap: 0.625rem; }
.nl-checks svg { flex: none; margin-top: 0.1875rem; }
.nl-checks .tick, .nl-checks li.is-done .todo { display: none; }
.nl-checks li.is-done { color: var(--surface); }
.nl-checks li.is-done .tick { display: block; color: var(--leaf-tint); }
.nl-send-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-leaf { background: var(--leaf-tint); border-color: var(--leaf-tint); color: var(--forest-deep); font-weight: 700; }
.nl-send-note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--outline-var); }
@media (max-width: 1100px) {
  .nl-grid { grid-template-columns: 1fr; }
  .nl-where { display: none; }
}
@media (max-width: 700px) {
  .nl-steps { flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
  .admin-main .nl-step-h { font-size: 1.5rem; }
  .nl-card { padding: 1rem; }
  .nl-check { padding: 1rem; }
  .nl-width { display: none; }
  .nl-check .nl-frame { height: 70vh; }
  .nl-item .check { flex-wrap: wrap; }
  .nl-when { flex-basis: 100%; padding: 0 0 0 1.75rem; }
  .nl-send-btns .btn { flex: 1 1 100%; }
}

/* ---------- admin visitor numbers ---------- */
.period-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 1rem; border-radius: 9999px; background: var(--wood-tint); }
.period-tabs a { padding: 0.375rem 0.875rem; border-radius: 9999px; color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.period-tabs a:hover { background: var(--white); }
.period-tabs a[aria-current] { background: var(--forest); color: var(--paper); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 16px; margin: 1.25rem 0 1.5rem; }
.stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.stat strong { font-size: 2.25rem; font-weight: 600; line-height: 1.1; }
.stat-delta { font-size: 0.875rem; color: var(--ink-soft); }
.stat-delta.is-up { color: var(--forest); font-weight: 600; }
.stat-delta.is-up::before { content: '\2191\00a0'; }
.stat-delta.is-down::before { content: '\2193\00a0'; }

/* Columns drawn in HTML: each day is a list item, its bar sized as a share
   of the top gridline. Bars stop at 24px wide and leave a 2px gap. */
.vchart { margin: 0; padding: 1.25rem 1.25rem 0.75rem; background: var(--white); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.vchart figcaption { margin-bottom: 0.75rem; }
.vchart-plot { position: relative; height: 13rem; margin: 1.75rem 0 2rem 2.5rem; }
.vchart-grid span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--paper); }
.vchart-grid span:first-child { border-top-color: var(--outline-var); }
.vchart-grid span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vchart-grid span { text-indent: -2.75rem; line-height: 0; }
.vchart-cols { position: absolute; inset: 0; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.vchart-cols li { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.vchart-cols li:hover { background: rgba(43, 52, 29, 0.05); }
.vchart-bar { display: block; width: 100%; max-width: 24px; background: #3f5a1f; border-radius: 4px 4px 0 0; }
.vchart-cols li:hover .vchart-bar { background: var(--forest-deep); }
.vchart-val { position: absolute; left: 50%; transform: translate(-50%, -0.25rem); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.vchart-x { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 0.375rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-soft); white-space: nowrap; }
.vchart-table { margin-top: 0.25rem; }
.vchart-table summary, .more-rows summary { cursor: pointer; color: var(--forest); font-weight: 500; }
.vchart-table .admin-table { margin: 0.75rem 0 0.5rem; }
.more-rows { margin-top: 0.75rem; }
.more-rows .admin-table { margin-top: 0.75rem; }
.stats-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-table th.num { text-align: right; white-space: normal; }
.stats-sub { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
/* Long addresses may break anywhere; names and months only between words. */
.stats-sub, .stats-table code { overflow-wrap: anywhere; }
.share-col { width: 11rem; }
.share-col { white-space: nowrap; }
.share { display: inline-block; width: 6.5rem; height: 0.5rem; margin-right: 0.5rem; vertical-align: middle; background: var(--paper); border-radius: 9999px; overflow: hidden; }
.share span { display: block; height: 100%; background: #3f5a1f; border-radius: 9999px; }
.share-pct { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 0.875rem; }
.about-numbers { max-width: 70ch; }
.about-numbers p + p { margin-top: 0.75rem; }
/* Phones: the three periods share the width, and the count tables stay
   tables (unlike other admin tables) with the percentage in place of the
   bar, so a long list of pages stays short. */
@media (max-width: 680px) {
  .period-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-md); }
  .period-tabs a { padding: 0.375rem 0.25rem; border-radius: var(--radius); text-align: center; font-size: 0.875rem; }
  .stat-row { gap: 10px; }
  .stat { padding: 0.75rem 1rem; }
  .stat strong { font-size: 1.875rem; }
  .vchart { padding: 1rem 0.75rem 0.5rem; }
  .vchart-plot { height: 11rem; margin-left: 2.25rem; }
  .vchart.is-dense .vchart-cols { gap: 1px; }
  .admin-table.stats-table { display: table; }
  .stats-table thead { display: table-header-group; }
  .stats-table tbody { display: table-row-group; }
  .stats-table tr { display: table-row; padding: 0; }
  .stats-table th, .stats-table td { display: table-cell; padding: 0.625rem 0.5rem; }
  .stats-table th:first-child, .stats-table td:first-child { padding-left: 0.875rem; }
  .stats-table th:last-child, .stats-table td:last-child { padding-right: 0.875rem; }
  .wide-only { display: none; }
  .stats-table td { border-top: 1px solid var(--paper); }
  .stats-table td[data-label]::before { content: none; }
  .stats-table .share { display: none; }
  .share-col { width: auto; }
}

/* The privacy notice's button for not being counted (site.js). */
.count-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.25rem 0 0.5rem; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--wood); border-radius: var(--radius-lg); }
.count-choice .count-status { margin: 0; flex: 1 1 18rem; }