/* ============ Landing — Direction A (Bold / Elevated) ============ */

/* ---------- NAV ---------- */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 6;
  max-width: var(--maxw); margin: 0 auto; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; } /* never shrink → "Sage Creek" wordmark is never clipped */
.brand .mark { width: 9px; height: 9px; background: var(--c-accent); transform: rotate(45deg); flex: none; }
.brand .wordmark { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.02em; white-space: nowrap; color: var(--c-on-deep); }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a { color: var(--c-on-deep); font-size: 0.95rem; opacity: 0.92; position: relative; padding: 0.2rem 0; transition: opacity var(--dur-fast) var(--ease-out); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--c-accent); transition: width var(--dur-base) var(--ease-out); }
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.nav-signin { border: 1px solid rgba(250,248,242,0.55); border-radius: var(--r-input); padding: 0.55rem 1.1rem !important; opacity: 1 !important; }
.nav-signin::after { display: none; }
.nav-signin:hover { background: rgba(250,248,242,0.12); }

/* ---------- HERO (scrub structure) ---------- */
.hero { position: relative; background: var(--c-deep); }

/* Scrub section — tall; defines scroll distance */
.hero-scrub { position: relative; height: 200vh; }

/* Sticky container — pins to viewport.
   Fallback order: vh (universal) → svh → dvh (last supported wins).
   dvh keeps the pin stable as the mobile URL bar shows/hides. */
.hero-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; height: 100dvh;
  overflow: hidden;
}

/* Canvas (scroll-scrub target — desktop AND mobile).
   The canvas backing store is the frame's NATIVE size (1280×720 / 720×406)
   drawn 1:1; object-fit lets the browser GPU-scale the element to fill the
   hero (smooth bilinear, like an <img>) — crisp in Safari & Chrome, and it
   sidesteps Safari's large-canvas backing-store derating. object-position
   60% 60% reproduces the autoplay video's framing. */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 60%;
  display: none; /* shown by JS once the scrub branch runs */
}

/* Video element retained in markup but unused (scrub now runs on mobile too) */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 60%;
  display: none;
}

/* One-time load progress (thin brass bar at the foot of the hero) */
.hero-load {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 2px; background: rgba(250,248,242,0.18); pointer-events: none;
}
.hero-load-fill {
  height: 100%; width: 0%;
  background: var(--c-accent);
  transition: width 120ms var(--ease-out);
}

/* Poster (reduced-motion / no-JS fallback) */
.hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 60%;
  display: block; /* visible by default; JS hides it on canvas/video branch */
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(31,42,28,0.22) 0%, rgba(31,42,28,0) 22%),
    radial-gradient(120% 90% at 18% 36%, rgba(31,42,28,0.27) 0%, rgba(31,42,28,0) 52%),
    linear-gradient(to top, rgba(31,42,28,0.28) 0%, rgba(31,42,28,0) 38%);
}
.hero-grid {
  position: absolute; inset: 0;
  max-width: var(--maxw); margin: 0 auto; left: 0; right: 0;
  padding: 0 var(--space-xl);
  display: flex; align-items: center;
  z-index: 3;
}
.hero-content { position: relative; z-index: 3; max-width: 620px; }
.hero h1 { font-family: var(--f-display); font-weight: var(--display-weight); color: var(--c-on-deep); font-size: clamp(2.8rem, 6vw, 4.7rem); line-height: 1.04; letter-spacing: var(--display-tracking); margin: 0 0 var(--space-md); text-shadow: 0 1px 2px rgba(31,42,28,0.45), 0 2px 28px rgba(31,42,28,0.34); }
.accent-word { font-style: italic; }
.hero-lede { color: var(--c-on-deep); font-weight: 300; font-size: 1.18rem; line-height: 1.55; max-width: 30rem; margin: 0 0 var(--space-xl); text-shadow: 0 1px 2px rgba(31,42,28,0.42), 0 2px 16px rgba(31,42,28,0.34); }
.hero-cta { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--c-on-deep); font-size: 0.95rem; font-weight: 600; }
.hero-cta .ring { width: 46px; height: 46px; border: 1px solid rgba(250,248,242,0.6); border-radius: var(--r-pill); display: grid; place-items: center; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.hero-cta:hover .ring { background: rgba(250,248,242,0.14); transform: translateY(3px); }
.hero-cta .cta-arrow { display: none; }

.scroll-cue { position: absolute; left: 50%; bottom: var(--space-xl); transform: translateX(-50%); z-index: 4; width: 46px; height: 46px; border: 1px solid rgba(250,248,242,0.55); border-radius: var(--r-pill); display: grid; place-items: center; color: var(--c-on-deep); opacity: 0.92; transition: background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.scroll-cue:hover { background: rgba(250,248,242,0.14); }

/* Scrub overlay choreography — driven by JS via CSS custom props */
.hero-content { transition: opacity var(--dur-base) var(--ease-out); }

/* Loading indicator for frame preload */
.hero-loading {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero-loading-text {
  font-family: var(--f-label); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(250,248,242,0.55);
}

/* ---------- SECTION SHELL ---------- */
section.band { padding: var(--section-gap) 0; }
.band-tint { background: var(--c-paper-2); }

.sec-h2 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: var(--display-tracking); margin: 0; color: var(--c-ink); }
.sec-h2 .accent-word { font-style: italic; }

/* ---------- ANNOUNCEMENTS ---------- */
.ann-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.feed { border-top: 1px solid var(--c-rule); }
.ann { display: grid; grid-template-columns: 170px 1fr auto; gap: var(--space-md) var(--space-xl); align-items: start; padding: var(--space-xl) 0; border-bottom: 1px solid var(--c-rule); transition: background var(--dur-base) var(--ease-out); }
.ann:hover { background: color-mix(in oklab, var(--c-accent) 5%, transparent); }
.ann-meta { display: flex; flex-direction: column; gap: var(--space-2xs); padding-top: 5px; }
.ann-date { font-family: var(--f-label); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--c-ink-2); }
.badge { align-self: flex-start; font-family: var(--f-label); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-primary); border: 1px solid var(--c-rule); border-radius: var(--r-pill); padding: 0.28rem 0.6rem; line-height: 1; }
.ann-title { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.7rem; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5rem; color: var(--c-ink); }
.ann-preview { margin: 0; color: var(--c-ink-2); font-weight: 300; max-width: 52ch; }
.ann-read { align-self: center; white-space: nowrap; font-size: 0.92rem; }

/* ---------- ABOUT ---------- */
.about-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: var(--space-3xl); align-items: start; }
.about-copy p { font-size: 1.18rem; font-weight: 300; line-height: 1.65; color: var(--c-ink); max-width: 40ch; margin: 0 0 var(--space-md); }
.about-copy p.muted { color: var(--c-ink-2); font-size: 1.05rem; }
.facts { border-top: 1px solid var(--c-rule); margin-top: 6px; }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--c-rule); }
.fact dt { font-family: var(--f-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-2); margin: 0; }
.fact dd { margin: 0; font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.7rem; color: var(--c-ink); }

/* ---------- COMMITTEES ---------- */
.comm-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-3xl); align-items: start; }
.comm-intro p { color: var(--c-ink-2); font-weight: 300; margin: var(--space-md) 0 0; max-width: 34ch; }
.comm-list { border-top: 1px solid var(--c-rule); }
.comm-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--c-rule); transition: padding-left var(--dur-base) var(--ease-out); }
.comm-row:hover { padding-left: 8px; }
.comm-row .name { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.45rem; color: var(--c-ink); }
.comm-row .desc { color: var(--c-ink-2); font-size: 0.95rem; font-weight: 300; }
.comm-row .left { display: flex; flex-direction: column; gap: 3px; }
.comm-row .arrow { color: var(--c-accent); font-size: 1.1rem; flex: none; }

/* ---------- CONTACT ---------- */
.contact { background: var(--c-deep); color: var(--c-on-deep); padding: var(--section-gap) 0; }
.contact .eyebrow { color: var(--c-on-deep-2); }
.contact .eyebrow::after { background: var(--c-accent); }
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-3xl); align-items: end; }
.contact h2 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: var(--display-tracking); margin: 0 0 var(--space-md); color: var(--c-on-deep); }
.contact h2 .accent-word { font-style: italic; }
.contact p { color: var(--c-on-deep-2); font-weight: 300; max-width: 38ch; margin: 0; }
.contact-detail { display: flex; flex-direction: column; gap: var(--space-md); }
.cd-row { border-top: 1px solid rgba(250,248,242,0.16); padding-top: var(--space-sm); }
.cd-row .k { font-family: var(--f-label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-on-deep-2); display: block; margin-bottom: 4px; }
.cd-row .v { font-size: 1.05rem; color: var(--c-on-deep); }
.btn-on-dark { background: var(--c-paper); color: var(--c-deep); margin-top: var(--space-sm); align-self: flex-start; }
.btn-on-dark:hover { background: #fff; }

/* ---------- FOOTER ---------- */
footer.foot { background: var(--c-deep); color: var(--c-on-deep-2); border-top: 1px solid rgba(250,248,242,0.12); padding: var(--space-xl) 0; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.foot .brand .wordmark { font-size: 1.1rem; color: var(--c-on-deep); }
.foot .brand .mark { background: var(--c-accent); }
.foot-meta { font-family: var(--f-label); font-size: 0.72rem; letter-spacing: 0.06em; }

@media (max-width: 880px) {
  .nav-links { gap: var(--space-md); }
  .nav-links a:not(.nav-signin) { display: none; }
  .about-grid, .comm-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .ann { grid-template-columns: 1fr; gap: var(--space-sm); }
  .wrap, .hero-grid, .nav { padding-left: var(--space-md); padding-right: var(--space-md); }
}

/* Mobile scrub distance — shorter pin for thumb ergonomics (all 144 frames still play) */
@media (max-width: 820px) {
  .hero-scrub { height: 180vh; }

  /* Wordmark: a touch smaller on mobile for extra headroom (never clipped — .brand is flex:none) */
  .brand .wordmark { font-size: 1.12rem; }

  /* Hero type optimized for the narrow column */
  .hero-content { max-width: 100%; }
  .hero h1 { font-size: clamp(2.05rem, 8.5vw, 3rem); line-height: 1.06; margin-bottom: var(--space-sm); }
  .hero-lede { font-size: 1rem; line-height: 1.5; max-width: 34ch; margin-bottom: var(--space-lg); }
}

/* ============================================================
   INTERFACE-FEEL POLISH PASS (make-interfaces-feel-better)
   CSS-only; no markup/JS change. Principles applied:
   text-wrap · scale-on-press · 40×40 hit areas · optical nudges.
   ============================================================ */

/* A · Text wrapping — balance display headlines, pretty body copy */
.sec-h2, .contact h2, .ann-title { text-wrap: balance; }
.hero-lede, .about-copy p, .ann-preview, .comm-intro p, .contact p { text-wrap: pretty; }

/* B · Scale on press (0.96) — only genuine button-shaped controls.
   Each press target must carry transform in its transition to animate. */
.btn:active { transform: scale(0.96); }           /* .btn already transitions transform (tokens.css) */
.nav-links a.nav-signin {                          /* out-specifies .nav-links a so transform animates */
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.nav-signin:active { transform: scale(0.96); }
.hero-cta { transition: transform var(--dur-fast) var(--ease-out); }
.hero-cta:active { transform: scale(0.96); }
.scroll-cue {
  transition: background var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.scroll-cue:active { transform: translateX(-50%) scale(0.96); }  /* preserve centering */

/* C · Minimum 40×40 hit area — invisible ::before extenders (no layout shift).
   position:relative guard so the absolute extender anchors to each link. */
.nav-links a, .link-arrow, .ann-read { position: relative; }
.nav-links a::before, .link-arrow::before, .ann-read::before {
  content: ""; position: absolute; inset: -10px -6px;
}

/* E · Optical nudges — down-chevrons read ~1px high; brass diamond vs Playfair center */
.scroll-cue svg, .hero-cta .ring svg { transform: translateY(1px); }
.brand .mark { position: relative; top: 1px; }