/* ==========================================================================
   Woodside Ranch HOA
   Structure from the "Seed" system — styles.refero.design/style/cd723d5a…
   Hard rules kept: no shadows, no elevation, no gradients, never pure white,
   no heading heavier than 500, pills at 1000px.
   Type is deliberately ours: Averia Serif Libre carries the headlines.
   ========================================================================== */

:root {
  --forest:     #1c3a13;
  --forest-deep:#142b0e;
  --forest-soft:#2a5220;
  --lime:       #d3fa99;
  --sage:       #757c5d;
  --olive:      #9f995b;
  --label:      #5f6549;   /* 5.1:1 on stone, 5.7:1 on snow at 12px */

  --pewter: #666666;
  --ash:    #b3b3b3;
  --glass:  #c4c7c4;
  --stone:  #eeeee9;
  --snow:   #fcfcf7;
  --ember:  #b4531f;
  --ember-light: #e8a06a;       /* fire only — never decorative */

  --t-h1:   2.5rem;
  --t-h2:   2.25rem;
  --t-h3:   2rem;
  --t-sub:  1.5rem;
  --t-lg:   1.25rem;
  --t-body: 1.125rem;
  --t-sm:   1rem;
  --t-xs:   0.875rem;
  --t-mono: 0.75rem;

  --display: "Averia Serif Libre", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-input: 8px;
  --r-card:  16px;
  --r-lg:    32px;
  --r-pill:  1000px;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--snow);
  color: var(--forest);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--display); font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--forest); text-underline-offset: 4px; }
a:hover { color: var(--forest-soft); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .nav :focus-visible { outline-color: var(--lime); }

.display { font-family: var(--display); font-size: clamp(2.25rem, 4.4vw, 3.5rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; }
.h1  { font-family: var(--display); font-size: clamp(1.75rem, 3.4vw, var(--t-h1)); font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; }
.h2  { font-family: var(--display); font-size: clamp(1.5rem, 2.9vw, var(--t-h2)); font-weight: 300; line-height: 1.14; letter-spacing: -0.012em; }
.h3  { font-family: var(--display); font-size: clamp(1.3rem, 2.3vw, var(--t-h3)); font-weight: 400; line-height: 1.2; }
.sub { font-family: var(--display); font-size: var(--t-sub); font-weight: 400; line-height: 1.25; }
.lede { font-size: var(--t-lg); font-weight: 400; line-height: 1.5; }

.mono {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 400;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.muted { color: var(--pewter); }
.on-dark { color: var(--snow); }
.on-dark .muted { color: var(--glass); }
.on-dark a { color: var(--snow); }
.on-dark a:hover { color: var(--lime); }
.lime-text { color: var(--lime); }
.sage-text { color: var(--label); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 7vw, var(--s8)); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }

.curve-b { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.curve-t { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.bg-forest { background: var(--forest); }
.bg-stone  { background: var(--stone); }

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  background: var(--forest); color: var(--snow);
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s2); color: var(--snow); }

/* ---------- Page header ----------
   Headline and lede share one measure so their right edges agree. */
.page-head { display: flex; flex-direction: column; gap: var(--s3); max-width: 46rem; }
.page-head .lede { max-width: 46rem; }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--lime); color: var(--forest);
  text-align: center; padding: 12px var(--gutter);
  font-size: var(--t-sm); font-weight: 500;
  position: relative; z-index: 40;   /* below the header, so the full-screen
                                        nav overlay covers it when open */
}
.announce a { color: var(--forest); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.announce a:hover { color: var(--forest-deep); text-decoration: underline; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 60; background: var(--snow); color: var(--forest); }
/* The frost lives on a pseudo-element, never on .header itself. An element
   carrying backdrop-filter becomes the containing block for its fixed-position
   descendants — which would trap the full-screen mobile nav inside the header. */
.header--over { background: transparent; color: var(--snow); transition: color .25s ease; }
.header--over::before,
.header--over.is-past::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transition: background-color .25s ease, border-color .25s ease;
}
.header--over::before {
  background: rgba(28, 58, 19, 0.30);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid rgba(252, 252, 247, 0.14);
}
.header--over.is-past { color: var(--forest); }
.header--over.is-past::before {
  background: rgba(252, 252, 247, 0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--stone);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header--over::before { background: rgba(20, 43, 14, 0.72); }
  .header--over.is-past::before { background: var(--snow); }
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: var(--header-h); position: relative;
}
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: inherit; }
/* The mark is 3.67:1. Sized generously enough to read at a glance on a phone,
   where the old traced version was a faint squiggle. */
.brand__mark { width: 82px; height: auto; color: currentColor; flex-shrink: 0; }
.footer__mark { width: 84px; height: auto; }
.brand__name { font-family: var(--display); font-size: var(--t-lg); font-weight: 400; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: var(--s3); }
.nav > a { font-size: var(--t-sm); font-weight: 400; text-decoration: none; color: inherit; white-space: nowrap; }
.nav > a:hover { opacity: .68; }
.nav > a[aria-current="page"] { font-weight: 600; }
.nav__close { display: none; }

/* Fire sits beside the primary CTA and carries a mark — it is the one link
   that matters at 2am. Ember is reserved for it, used nowhere else. */
.nav__fire {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid currentColor; border-radius: var(--r-pill);
  padding: 8px 16px; margin-left: var(--s1);
}
.nav__fire svg { flex-shrink: 0; }
.header:not(.header--over) .nav__fire,
.header--over.is-past .nav__fire { color: var(--ember); border-color: var(--ember); }
.header .nav__fire:hover,
.header--over .nav__fire:hover,
.header--over.is-past .nav__fire:hover {
  opacity: 1; background: var(--ember); color: var(--snow); border-color: var(--ember);
}

.nav-toggle {
  display: none; align-items: center; gap: var(--s1);
  background: transparent; color: inherit;
  border: 1px solid currentColor; border-radius: var(--r-pill);
  padding: 11px 18px; min-height: 46px;
  font: inherit; font-size: var(--t-sm); font-weight: 500; cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  border-radius: var(--r-pill); padding: 15px 28px; min-height: 52px;
  font-size: var(--t-sm); font-weight: 500; line-height: 1;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;                      /* labels never wrap to two lines */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn.btn--primary { background: var(--forest); color: var(--snow); }
.btn.btn--primary:hover { background: var(--forest-deep); color: var(--snow); }
.btn.btn--lime { background: var(--lime); color: var(--forest); }
.btn.btn--lime:hover { background: #c3ee85; color: var(--forest); }
.btn.btn--outline { border-color: var(--forest); color: var(--forest); background: transparent; }
.btn.btn--outline:hover { background: var(--forest); color: var(--snow); }
.btn.btn--ghost-dark { border-color: var(--sage); color: var(--snow); background: transparent; }
.btn.btn--ghost-dark:hover { background: var(--snow); color: var(--forest); border-color: var(--snow); }
.btn--sm { min-height: 44px; padding: 11px 20px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.link-arrow svg { transition: transform .15s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lime); color: var(--forest);
  border-radius: var(--r-pill); padding: 5px 14px;
  font-size: var(--t-xs); font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.badge--outline { background: transparent; border: 1px solid var(--label); color: var(--label); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  background: var(--forest);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden; isolation: isolate;
  min-height: clamp(560px, 78vh, 820px);
  display: flex; align-items: flex-end;
}
.hero--flat { min-height: clamp(400px, 50vh, 540px); background: var(--forest); }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(18, 38, 12, 0.88) 0%,
    rgba(18, 38, 12, 0.72) 26%,
    rgba(18, 38, 12, 0.38) 55%,
    rgba(18, 38, 12, 0.04) 82%);
}
@media (max-width: 780px) {
  .hero__scrim { background: linear-gradient(170deg, rgba(18,38,12,.72) 0%, rgba(18,38,12,.82) 55%, rgba(18,38,12,.9) 100%); }
}
.hero__inner { padding-block: clamp(120px, 14vw, 180px) clamp(56px, 7vw, 88px); width: 100%; }
.hero__copy { max-width: 560px; color: var(--snow); }
.hero__copy .display { margin-top: var(--s3); }
.hero__lede { margin-top: var(--s3); color: rgba(252, 252, 247, 0.85); max-width: 26em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.hero__eyebrow { color: var(--lime); }

/* ---------- Section heads ---------- */
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px); align-items: start;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.section-head > :last-child { max-width: 34em; }
.section-head--solo { grid-template-columns: 1fr; }
.section-head .link-arrow { justify-self: start; align-self: end; }
@media (max-width: 780px) { .section-head { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.grid { display: grid; gap: var(--s1); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--stone); border-radius: var(--r-card);
  padding: clamp(24px, 2.4vw, 32px); text-decoration: none; color: var(--forest);
  transition: background-color .15s ease, border-color .15s ease;
}
a.card:hover { background: #e4e6dd; color: var(--forest); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.card__code { color: var(--label); }
.card p { font-size: var(--t-sm); color: var(--pewter); line-height: 1.55; }
.card--tall { min-height: 190px; }
.card__go { margin-top: auto; padding-top: var(--s2); color: var(--label); display: block; }
.card__go svg { transition: transform .15s ease; }
a.card:hover .card__go svg { transform: translateX(4px); }
.card__icon { width: 36px; height: 36px; color: var(--label); }

.card--dark { background: var(--forest); color: var(--snow); }
a.card--dark:hover { background: var(--forest-deep); color: var(--snow); }
.card--dark .card__code, .card--dark .card__go, .card--dark .card__icon { color: var(--lime); }
.card--dark p { color: var(--glass); }

/* Cards sitting ON a dark panel. Hover lifts the translucent fill rather than
   flipping to a light background — the previous inline-styled version kept
   Snow White text and went white-on-white on hover. */
.card--on-dark {
  background: rgba(252, 252, 247, 0.07);
  border: 1px solid rgba(252, 252, 247, 0.22);
  color: var(--snow);
}
a.card--on-dark:hover {
  background: rgba(252, 252, 247, 0.16);
  border-color: rgba(252, 252, 247, 0.5);
  color: var(--snow);
}
.card--on-dark p { color: var(--glass); }
.card--on-dark .card__code, .card--on-dark .card__go, .card--on-dark .card__icon { color: var(--lime); }

.card--outline { background: transparent; border: 1px solid var(--stone); }
a.card--outline:hover { background: var(--stone); }

/* ---------- Panels ---------- */
.panel { border-radius: var(--r-lg); padding: clamp(32px, 5vw, var(--s8)); }
.panel-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 5vw, var(--s8)); align-items: start; }

/* ---------- Calendar ---------- */
.cal { display: flex; flex-direction: column; gap: var(--s1); }
.cal-item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: var(--s3); align-items: center;
  background: var(--stone); border-radius: var(--r-card);
  padding: var(--s3); text-decoration: none; color: var(--forest);
  transition: background-color .15s ease;
}
a.cal-item:hover { background: #e4e6dd; color: var(--forest); }
.cal-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--snow); border-radius: var(--r-input); padding: 10px 8px; min-width: 92px;
}
.cal-date__d { font-family: var(--display); font-size: 1.75rem; font-weight: 400; line-height: 1; }
.cal-date__m { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-top: 4px; }
.cal-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-body .sub { font-size: var(--t-lg); }
.cal-body p { font-size: var(--t-sm); color: var(--pewter); }
.cal-item--past { opacity: .6; }
.cal-item--past .cal-date { background: transparent; border: 1px solid var(--ash); }
@media (max-width: 640px) {
  .cal-item { grid-template-columns: 72px minmax(0, 1fr); }
  .cal-item > .badge { grid-column: 2; justify-self: start; }
  .cal-date { min-width: 72px; }
}

/* ---------- Notices ---------- */
.notice { display: flex; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid rgba(252,252,247,.22); }
.notice:last-of-type { border-bottom: 1px solid rgba(252,252,247,.22); }
.notice__date { color: var(--glass); white-space: nowrap; padding-top: 5px; font-size: var(--t-xs); }
.notice__body { display: flex; flex-direction: column; gap: 4px; }
.notice__title { font-family: var(--display); font-size: var(--t-lg); font-weight: 400; line-height: 1.3; }
.notice p { font-size: var(--t-sm); color: var(--glass); }

/* ---------- Documents ---------- */
.doc-filters { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip {
  border-radius: var(--r-pill); padding: 11px 22px; min-height: 44px;
  display: inline-flex; align-items: center; white-space: nowrap;
  font: inherit; font-size: var(--t-sm); font-weight: 400; text-decoration: none;
  border: 1px solid var(--ash); color: var(--forest); background: transparent; cursor: pointer;
}
.chip:hover { border-color: var(--forest); }
.chip[aria-pressed="true"] { background: var(--forest); color: var(--snow); border-color: var(--forest); font-weight: 500; }

.doc-list { display: flex; flex-direction: column; gap: var(--s1); }
.doc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s3); align-items: center;
  background: var(--stone); border-radius: var(--r-card);
  padding: 20px var(--s3);
  text-decoration: none; color: var(--forest);
  transition: background-color .15s ease;
}
a.doc:hover { background: #e4e6dd; color: var(--forest); }
.doc[hidden] { display: none; }
.doc__name { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex-wrap: wrap; }
.doc__name .mono { color: var(--label); flex-shrink: 0; }
.doc__title { font-size: var(--t-body); font-weight: 400; }
/* status and size read as one line, never stacked */
.doc__meta {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 400;
  color: var(--pewter); letter-spacing: .015em; white-space: nowrap;
}
.doc__action {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--snow); border-radius: var(--r-pill);
  padding: 10px 18px; min-height: 44px;
  font-size: var(--t-sm); font-weight: 500; color: var(--forest);
}
a.doc:hover .doc__action { background: var(--forest); color: var(--snow); }
.doc-empty { padding: var(--s5) 0; color: var(--pewter); }
@media (max-width: 780px) {
  .doc { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
  .doc__name { grid-column: 1 / -1; }
}

/* ---------- People ---------- */
.person { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border-radius: var(--r-card); background: var(--stone); }
.person__name { font-family: var(--display); font-size: var(--t-lg); font-weight: 400; }
.person .mono { color: var(--label); }
.member-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s1); }
.member { background: var(--snow); border-radius: var(--r-pill); padding: 5px 14px; font-size: var(--t-xs); }
.card--dark .member, .card--on-dark .member { background: rgba(252,252,247,.14); color: var(--snow); }

/* ---------- Timeline ---------- */
.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--stone); }
.tl:last-child { border-bottom: 1px solid var(--stone); }
.tl__when { color: var(--label); padding-top: 4px; }
.tl__what { display: flex; flex-direction: column; gap: 6px; }
.tl__title { font-family: var(--display); font-size: var(--t-lg); font-weight: 400; line-height: 1.3; }
.tl p { font-size: var(--t-sm); color: var(--pewter); }
.tl__links { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 6px; }
@media (max-width: 780px) { .tl { grid-template-columns: 1fr; gap: var(--s1); } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s1); }

/* ---------- Footer ---------- */
.footer { background: var(--forest); color: var(--glass); border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top: clamp(48px, 7vw, var(--s8)); }
.footer__inner { display: grid; grid-template-columns: minmax(240px, 1.3fr) repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s5); padding-block: var(--s8) var(--s5); }
.footer h2 { font-family: var(--mono); font-size: var(--t-mono); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--glass); }
.footer ul { display: flex; flex-direction: column; gap: 12px; }
.footer a { font-size: var(--t-sm); text-decoration: none; color: var(--glass); }
.footer a:hover { color: var(--lime); }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); padding-block: var(--s3); border-top: 1px solid rgba(252,252,247,.18); }
.footer__legal .mono { color: var(--glass); }

/* ---------- Mobile navigation: full-screen overlay ---------- */
/* ---------- Compact navigation ----------
   Driven by measurement, not a fixed breakpoint: site.js compares what the
   brand + nav actually need against the space available and adds .is-compact
   the moment they would collide. That way the drawer appears when the nav
   genuinely stops fitting — after a font swap, a longer link, or an odd
   window width — rather than at a number guessed in advance. */
.header.is-compact .nav-toggle { display: inline-flex; }
.header.is-compact .nav {
  position: fixed; inset: 0; z-index: 80;
  display: none; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 0; padding: var(--s3) var(--gutter) var(--s8);
  background: var(--forest); color: var(--snow);
  overflow-y: auto;
}
.header.is-compact .nav.is-open { display: flex; }
.header.is-compact .nav__close {
  display: inline-flex; align-items: center; gap: var(--s1);
  align-self: flex-end; margin-bottom: var(--s6);
  background: transparent; color: var(--snow);
  border: 1px solid rgba(252,252,247,.4); border-radius: var(--r-pill);
  padding: 11px 18px; min-height: 46px;
  font: inherit; font-size: var(--t-sm); font-weight: 500; cursor: pointer;
}
/* :not(.btn) — the Pay dues pill is also a direct child and must keep its
   own padding, radius and colour rather than inherit the link treatment. */
.header.is-compact .nav > a:not(.btn) {
  color: var(--snow); font-family: var(--display); font-size: 1.6rem; font-weight: 400;
  padding: var(--s3) 0; min-height: 64px; display: flex; align-items: center;
  border-bottom: 1px solid rgba(252,252,247,.16); white-space: normal;
}
.header.is-compact .nav > a:not(.btn):hover,
.header.is-compact .nav > a:not(.btn)[aria-current="page"] { opacity: 1; color: var(--lime); }
/* no capsule on mobile — it is a nav link like the others, with its mark */
.header.is-compact .nav .nav__fire {
  order: 0; margin: 0; border: 0; border-bottom: 1px solid rgba(252,252,247,.16);
  border-radius: 0; padding: var(--s3) 0; gap: var(--s2);
  color: var(--ember-light); background: transparent;
}
.header.is-compact .nav .nav__fire:hover { background: transparent; color: var(--lime); }
/* The primary button is Forest Depths, which vanishes on the Forest Depths
   overlay. Inside the menu it takes the lime treatment and full width, so it
   reads as the one action rather than a stray line of text. */
.header.is-compact .nav .btn {
  margin-top: var(--s5);
  align-self: stretch;
  background: var(--lime);
  color: var(--forest);
  font-size: var(--t-body);
  min-height: 60px;
  padding: 18px 28px;
}
.header.is-compact .nav .btn:hover { background: #c3ee85; color: var(--forest); 

}

@media (max-width: 940px) {
  .brand__mark { width: 72px; }
  .brand__name { font-size: var(--t-body); }
}
@media (max-width: 780px) { .hero__media img { object-position: 8% 50%; } }
@media (max-width: 560px) { .hero__actions .btn { width: 100%; } }

@media print {
  .header, .announce, .hero__media, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .panel, .footer, .bg-forest { background: none !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ---------- On-scroll reveal ----------
   The hidden state hangs off .will-reveal, a class the script adds ONLY to
   elements that are already below the fold. Anything on screen at load is
   never hidden, so a failure of the observer, the script, or the stylesheet
   can never make readable content disappear. */
.will-reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.will-reveal.is-in { opacity: 1; transform: none; }
.will-reveal[data-reveal-delay='1'] { transition-delay: .07s; }
.will-reveal[data-reveal-delay='2'] { transition-delay: .14s; }
.will-reveal[data-reveal-delay='3'] { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; transform: none; transition: none; }
}

/* If the script never runs there is no drawer to open, so the honest fallback
   is to let the header wrap rather than clip its own navigation. */
@media (max-width: 940px) {
  html:not(.has-js) .header__inner { flex-wrap: wrap; row-gap: var(--s2); }
  html:not(.has-js) .nav { flex-wrap: wrap; row-gap: var(--s1); }
  html:not(.has-js) .nav-toggle { display: none; }
}