/* ===================================================================
   Holloway & Finch — Stylesheet
   Showcase build for Sevra Design Studio.

   Direction: Library Lamp (mixed dark/light registers).
   Palette:   Walnut (#1F1A14) bg · Vellum (#F4ECDC) ink · Pale Gold (#DDB07A) accent.
              Light sections invert: Vellum bg · Walnut ink · Amber (#A66B2E) accent.
   Type:      Fraunces (display) · Inter (body).
   Register:  Brown Brothers Harriman foundational, Deborah Berke accent.
              Quiet, considered, typographic. Built to be looked at first
              and read second.
   =================================================================== */


/* ===================================================================
   1. Reset / base
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;        /* sticky chrome (~6.85rem) + 1.15rem breathing above the eyebrow */
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--walnut);
  color: var(--vellum);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin: 0; }
button {
  font: inherit; background: none; border: 0; cursor: pointer; color: inherit;
}


/* ===================================================================
   2. Reduced-motion override (Convention 9)
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===================================================================
   2b. Film-grain noise overlay
   ================================================================
   Fixed full-viewport overlay below the sticky Sevra band, above all
   page content. SVG-generated fractal noise at very low opacity with
   soft-light blend mode — adds the printed-paper texture both light
   and dark sections benefit from, without shifting their color. */

body::before {
  content: '';
  position: fixed;
  top: var(--sevra-band-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.55;
  mix-blend-mode: soft-light;
}


/* ===================================================================
   3. Design tokens (Convention 8)
   =================================================================== */

:root {
  /* Palette — dark (primary) register */
  --walnut:        #1F1A14;
  --walnut-soft:   #2A231C;
  --walnut-edge:   #382E25;
  --vellum:        #F4ECDC;
  --vellum-soft:   #D9CFBE;
  --vellum-muted:  #A89B85;
  --pale-gold:     #DDB07A;
  --pale-gold-deep:#C29862;

  /* Palette — light register accent (deeper gold for AA contrast on Vellum) */
  --amber:         #A66B2E;          /* eyebrows, rules, links on light bg */
  --amber-deep:    #8C5424;          /* hover/active on light bg */
  --vellum-edge:   #D9CFBE;          /* hairline rules on light */
  --walnut-muted:  #5C544A;          /* secondary text on light */

  /* Sevra band — Sevra brand register, not H&F */
  --sevra-cream:   #FAF8F4;
  --sevra-ink:     #1A1A1A;
  --sevra-coral:   #D85A30;
  --sevra-rule:    #E5DDD0;

  /* Typography */
  --serif: 'Fraunces', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --step--2: clamp(0.72rem, 0.69rem + 0.12vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.80rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.30vw, 1.25rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.55vw, 1.55rem);
  --step-3:  clamp(1.65rem, 1.40rem + 1.05vw, 2.10rem);
  --step-4:  clamp(2.10rem, 1.65rem + 1.95vw, 3.10rem);
  --step-5:  clamp(2rem, 0.7rem + 6vw, 6.5rem);         /* hero wordmark — aggressive scaling so "holloway & finch" fits narrow phones */
  --step-epigraph: clamp(1.65rem, 1.20rem + 2vw, 2.85rem);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: clamp(3rem, 6vw, 5rem);
  --space-7: clamp(4.5rem, 9vw, 8rem);
  --space-8: clamp(6rem, 12vw, 10.5rem);

  /* Layout */
  --container-max:    72rem;
  --container-narrow: 44rem;
  --container-pad:    clamp(1.25rem, 4vw, 2.5rem);

  /* Sticky chrome heights */
  --sevra-band-h:  2.6rem;
  --topbar-h:      4.25rem;
  --chrome-total:  6.85rem;          /* sevra + topbar */

  /* Easing */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Radii */
  --radius-sm: 2px;
  --radius-md: 4px;
}


/* ===================================================================
   4. Typography base
   =================================================================== */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--vellum);
}

p { color: var(--vellum); }

::selection {
  background: var(--pale-gold);
  color: var(--walnut);
}


/* ===================================================================
   5. Theme contexts — light/dark section bodies
   ================================================================
   Each <section> carries .theme-dark or .theme-light. Local color
   tokens are overridden inside .theme-light so component CSS can
   simply read --bg, --ink, --accent etc. */

.theme-dark {
  --bg:            var(--walnut);
  --bg-soft:       var(--walnut-soft);
  --ink:           var(--vellum);
  --ink-soft:      var(--vellum-soft);
  --ink-muted:     var(--vellum-muted);
  --accent:        var(--pale-gold);
  --accent-deep:   var(--pale-gold-deep);
  --rule:          var(--walnut-edge);
  background: var(--bg);
  color: var(--ink);
}

.theme-light {
  --bg:            var(--vellum);
  --bg-soft:       #ECE2CE;
  --ink:           var(--walnut);
  --ink-soft:      #3A2F22;
  --ink-muted:     var(--walnut-muted);
  --accent:        var(--amber);
  --accent-deep:   var(--amber-deep);
  --rule:          var(--vellum-edge);
  background: var(--bg);
  color: var(--ink);
}

.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light p {
  color: var(--ink);
}

.theme-light ::selection {
  background: var(--amber);
  color: var(--vellum);
}


/* ===================================================================
   6. Helpers
   =================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: var(--vellum);
  color: var(--walnut);
  padding: 0.5rem 1rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 200ms var(--ease);
}
.skip-link:focus {
  top: 0.5rem;
  outline: 2px solid var(--pale-gold);
  outline-offset: 2px;
}

.hf-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.hf-container--narrow { max-width: var(--container-narrow); }

.anchor-mark {
  position: absolute;
  top: 0;
  pointer-events: none;
}


/* ===================================================================
   7. Focus state (Convention 13)
   =================================================================== */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--pale-gold);
  outline-offset: 3px;
  border-radius: 1px;
}
.theme-light a:focus-visible,
.theme-light button:focus-visible {
  outline-color: var(--amber);
}


/* ===================================================================
   8. Wordmark
   =================================================================== */

.wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}
.wordmark__amp {
  font-style: italic;
  font-weight: 500;
  font-family: var(--serif);
  display: inline-block;
  margin: 0 0.04em;
  transform: translateY(0.01em);
}

.wordmark--display { font-size: var(--step-5); font-weight: 400; }
.wordmark--small   { font-size: 1.45rem; }
.wordmark--footer  { font-size: 1.85rem; }


/* ===================================================================
   9. Sevra showcase attribution band — STICKY at top
   =================================================================== */

.sevra-band {
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--sevra-cream);
  color: var(--sevra-ink);
  border-bottom: 1px solid var(--sevra-rule);
  height: var(--sevra-band-h);
}
.sevra-band__inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.sevra-band__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sevra-ink);
  transition: color 200ms var(--ease);
}
.sevra-band__brand:hover { color: var(--sevra-coral); }

.sevra-band__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--sevra-ink);
  border-radius: var(--radius-sm);
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: var(--sevra-cream);
  color: var(--sevra-ink);
}
.sevra-band__logo em {
  font-style: italic;
  font-weight: 400;
  color: var(--sevra-coral);
  margin-left: 1px;
}

.sevra-band__wordmark {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.sevra-band__wordmark em {
  font-style: italic;
  font-weight: 400;
  color: var(--sevra-coral);
}

.sevra-band__sep { color: #B5AC9C; }

.sevra-band__role {
  flex: 1;
  font-size: 0.78rem;
  color: #4D4A45;
  letter-spacing: 0.02em;
}
.sevra-band__role em {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--sevra-ink);
  font-size: 0.92rem;
  letter-spacing: -0.005em;
}

.sevra-band__link {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sevra-ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
  letter-spacing: 0.01em;
}
.sevra-band__link:hover {
  color: var(--sevra-coral);
  border-bottom-color: var(--sevra-coral);
}


/* ===================================================================
   10. H&F topbar — STICKY beneath Sevra band
   =================================================================== */

.hf-topbar {
  position: sticky;
  top: var(--sevra-band-h);
  z-index: 100;
  background: rgba(31, 26, 20, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--walnut-edge);
}
.hf-topbar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.95rem var(--container-pad);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--topbar-h);
}

.hf-topbar__brand {
  display: inline-flex;
  align-items: center;
  color: var(--vellum);
  transition: color 200ms var(--ease);
}
.hf-topbar__brand:hover { color: var(--pale-gold); }

.hf-topbar__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.hf-topbar__nav ul {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.hf-topbar__nav a {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vellum-soft);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.hf-topbar__nav a:hover {
  color: var(--pale-gold);
  border-bottom-color: var(--pale-gold);
}

.hf-topbar__phone {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--sans);
  color: var(--vellum);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.hf-topbar__phone-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vellum-muted);
}
.hf-topbar__phone-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--pale-gold);
}
.hf-topbar__phone:hover { border-bottom-color: var(--pale-gold); }
.hf-topbar__phone:hover .hf-topbar__phone-num { color: var(--pale-gold-deep); }

/* Menu toggle — hidden on desktop, shown on mobile via media query.
   Two SVG icons (bars + close) layered; .is-open swaps which is
   visible. */
.hf-topbar__menu-toggle {
  display: none;     /* shown on mobile only */
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--vellum);
  cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
  position: relative;
}
.hf-topbar__menu-toggle:hover,
.hf-topbar__menu-toggle:focus-visible {
  color: var(--pale-gold);
  border-color: rgba(244, 236, 220, 0.18);
  outline: none;
}
.hf-topbar__menu-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 180ms var(--ease);
}
.hf-topbar__menu-icon--close { opacity: 0; }
.hf-topbar.is-open .hf-topbar__menu-icon--bars { opacity: 0; }
.hf-topbar.is-open .hf-topbar__menu-icon--close { opacity: 1; }


/* ===================================================================
   11. Hero (DARK)
   =================================================================== */

.hero {
  /* Fills the visible viewport beneath the sticky chrome on first paint
     so the user lands on dark, with no light-section seam visible at
     the fold. `dvh` follows mobile browser-chrome resize; `vh` is a
     fallback for browsers without dvh support. */
  min-height: calc(100vh - var(--chrome-total));
  min-height: calc(100dvh - var(--chrome-total));
  padding: var(--space-7) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Background image layers — three photographs crossfade across a 45s
   cycle (place → work → presence). Each holds ~13.5s of full visibility
   with ~1.5s crossfades between. A slow ken-burns breath plays under
   each, alternating direction (in / out / in) so adjacent images don't
   share motion. All keyframes close on themselves at 0%/100% per
   Convention 16. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__bg-image {
  position: absolute;
  inset: -3% -3%;       /* small bleed so the zoom never reveals edges */
  background-size: cover;
  background-position: center 50%;
  transform-origin: center center;
  will-change: transform, opacity;
}
.hero__bg-image--1 {
  background-image: url("assets/hero-1.png");
  animation:
    heroFade1 45s ease-in-out infinite,
    heroZoom1 45s ease-in-out infinite;
}
.hero__bg-image--2 {
  background-image: url("assets/hero-2.png");
  animation:
    heroFade2 45s ease-in-out infinite,
    heroZoom2 45s ease-in-out infinite;
}
.hero__bg-image--3 {
  background-image: url("assets/hero-3.png");
  animation:
    heroFade3 45s ease-in-out infinite,
    heroZoom3 45s ease-in-out infinite;
}
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at center,
      rgba(31, 26, 20, 0.78) 0%,
      rgba(31, 26, 20, 0.62) 45%,
      rgba(31, 26, 20, 0.88) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(31, 26, 20, 0.55) 0%,
      rgba(31, 26, 20, 0.30) 35%,
      rgba(31, 26, 20, 0.70) 100%
    );
}
.hero__content {
  position: relative;
  z-index: 1;
}

/* The 45s cycle is split into three ~33% segments. Each image is
   visible for ~30% of the cycle (~13.5s), with ~3% (~1.5s) crossfades
   between. Image 1 wraps the loop boundary: visible 0–30% AND 96–100%
   (fading in). All three keyframes close cleanly. */
@keyframes heroFade1 {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  33%  { opacity: 0; }
  96%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes heroFade2 {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  33%  { opacity: 1; }
  63%  { opacity: 1; }
  66%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes heroFade3 {
  0%   { opacity: 0; }
  63%  { opacity: 0; }
  66%  { opacity: 1; }
  96%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Each image breathes through ~30% of the cycle in alternating
   direction. Scale is held constant during the ~3% crossfade windows,
   then drifts back to its starting value during the remaining
   invisible portion of the cycle so 0% matches 100%. */
@keyframes heroZoom1 {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.04); }
  33%  { transform: scale(1.04); }
  96%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes heroZoom2 {
  0%   { transform: scale(1.04); }
  33%  { transform: scale(1.04); }
  63%  { transform: scale(1); }
  66%  { transform: scale(1); }
  100% { transform: scale(1.04); }
}
@keyframes heroZoom3 {
  0%   { transform: scale(1.04); }
  63%  { transform: scale(1); }
  66%  { transform: scale(1); }
  96%  { transform: scale(1.04); }
  100% { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg-image {
    animation: none;
    transform: scale(1.02);
  }
  .hero__bg-image--2,
  .hero__bg-image--3 { opacity: 0; }
}

.hero__eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pale-gold);
  margin: 0 0 var(--space-5);
}
.hero__name { font-family: var(--serif); font-weight: 400; margin: 0; }
.hero__name .wordmark--display { font-size: var(--step-5); }
.hero__rule {
  width: 56px;
  height: 1px;
  background: var(--pale-gold);
  margin: var(--space-5) auto var(--space-4);
  opacity: 0.85;
}
.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--vellum-soft);
  max-width: 32ch;
  margin: 0 auto;
}
.hero__tagline-since {
  display: block;
  margin-top: 0.25rem;
  color: var(--pale-gold);
}

/* Scroll indicator — single Pale Gold chevron pinned to the bottom of
   the hero, with a slow ~2.4s vertical drift. JS adds .is-faded once
   the user scrolls past ~100px so it doesn't haunt the page; reduced-
   motion users get the static chevron via the global animation kill. */
.hero__scroll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--pale-gold);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 500ms ease-out;
  border-radius: 50%;
}
.hero__scroll:hover { opacity: 1; }
.hero__scroll:focus-visible {
  opacity: 1;
  outline: 1px solid var(--pale-gold);
  outline-offset: 4px;
}
.hero__scroll.is-faded {
  opacity: 0;
  pointer-events: none;
}
.hero__scroll-icon {
  width: 22px;
  height: auto;
  display: block;
  animation: heroScrollDrift 2.4s ease-in-out infinite;
}
@keyframes heroScrollDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}


/* ===================================================================
   12. Orientation block (LIGHT) — epigraph + prose
   =================================================================== */

.orientation {
  padding: var(--space-7) 0;
}

.epigraph {
  margin: 0 0 var(--space-6);
  text-align: center;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--vellum-edge);
  border-bottom: 1px solid var(--vellum-edge);
  position: relative;
}
.epigraph::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--amber);
}
.epigraph__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-epigraph);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--walnut);
  max-width: 22ch;
  margin: 0 auto;
  quotes: "\201C" "\201D";
}
.epigraph__quote::before { content: open-quote; opacity: 0.3; padding-right: 0.05em; }
.epigraph__quote::after  { content: close-quote; opacity: 0.3; padding-left: 0.05em; }

.epigraph__attr {
  margin-top: var(--space-4);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.epigraph__name { color: var(--walnut); }
.epigraph__sep  { color: var(--vellum-edge); }
.epigraph__year { color: var(--walnut-muted); }

.orientation__body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--walnut);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.003em;
}
.orientation__body:last-child { margin-bottom: 0; }


/* ===================================================================
   13. Section header (eyebrow + title + lede)
   =================================================================== */

.section-header {
  margin-bottom: var(--space-5);
}
.section-header__eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.section-header__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
/* Accent rule under the section title — chapter-mark closer */
.section-header__title::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--accent);
  margin-top: 1rem;
  opacity: 0.85;
}
.section-header__lede {
  margin-top: var(--space-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 48ch;
}


/* ===================================================================
   14. Practice (DARK)
   =================================================================== */

.practice { padding: var(--space-7) 0; }

.practice-list {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
}
@media (min-width: 760px) {
  .practice-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}
.practice-list__item {
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.practice-list__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
.practice-list__body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
}


/* ===================================================================
   15. Architectural image (full-bleed banner with caption)
   =================================================================== */

.architecture {
  width: 100%;
  background: var(--walnut);
  border-top: 1px solid var(--walnut-edge);
  border-bottom: 1px solid var(--walnut-edge);
}
.architecture__figure {
  margin: 0;
  width: 100%;
  position: relative;
  overflow: hidden;       /* contain the zoom so it never reveals edges */
}
.architecture__media {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  display: block;
  /* Subtle ken-burns zoom — slower than the hero so it doesn't compete
     with the caption text. Counter-zoom direction (out by default) so
     the room "settles" into the frame rather than pressing forward. */
  transform-origin: center center;
  animation: architectureZoom 55s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes architectureZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .architecture__media {
    animation: none;
    transform: scale(1.02);
  }
}

/* Caption overlay — centered, with a horizontal-band darkening gradient
   that preserves the image at top and bottom while making text legible
   in the middle. Editorial chapter-card treatment. */
.architecture__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem var(--container-pad);
  background:
    linear-gradient(
      to bottom,
      rgba(31, 26, 20, 0)  0%,
      rgba(31, 26, 20, 0.45) 35%,
      rgba(31, 26, 20, 0.45) 65%,
      rgba(31, 26, 20, 0)  100%
    );
  pointer-events: none;
}
.architecture__caption-eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pale-gold);
  margin: 0 0 1.5rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.architecture__caption-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.85rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--vellum);
  margin: 0;
  max-width: 22ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.architecture__caption-quote::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--pale-gold);
  margin: 1.5rem auto 0;
  opacity: 0.85;
}

/* Placeholder treatment (kept for reference; unused once the real
   image is wired up) */
.architecture__media--placeholder {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(
      45deg,
      var(--walnut-soft) 0 22px,
      var(--walnut) 22px 44px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--walnut-edge);
  border-bottom: 1px solid var(--walnut-edge);
}
.architecture__placeholder-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--vellum-soft);
  text-align: center;
  padding: 1rem 1.5rem;
  background: rgba(31, 26, 20, 0.72);
  border: 1px solid var(--pale-gold);
  border-radius: var(--radius-md);
  letter-spacing: -0.005em;
}
.architecture__placeholder-text em {
  color: var(--pale-gold);
  font-style: italic;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.92em;
}
.architecture__placeholder-eyebrow {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pale-gold);
  margin-bottom: 0.5rem;
}


/* ===================================================================
   16. Attorneys (LIGHT) — portrait + bio per attorney
   =================================================================== */

.attorneys { padding: var(--space-7) 0; }

.attorneys-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .attorneys-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7) var(--space-5);
  }
}
@media (min-width: 1100px) {
  .attorneys-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
  }
}

.attorney {
  margin: 0;
  /* Scroll-reveal initial state — JS adds .is-revealed when the
     element enters the viewport. Stagger via transition-delay
     gives a wave reveal across the four portraits. */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.attorney:nth-child(1) { transition-delay: 0ms; }
.attorney:nth-child(2) { transition-delay: 100ms; }
.attorney:nth-child(3) { transition-delay: 200ms; }
.attorney:nth-child(4) { transition-delay: 300ms; }
.attorney.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .attorney {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.attorney__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #2A231C;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  box-shadow: 0 1px 3px rgba(31, 26, 20, 0.12);
}
.attorney__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.attorney:hover .attorney__photo img { transform: scale(1.015); }

.attorney__body { padding: 0; }

.attorney__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--walnut);
  margin: 0 0 0.25rem;
  letter-spacing: -0.005em;
}
.attorney__role {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 var(--space-2);
}
.attorney__bio {
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--walnut-muted);
  margin: 0;
}


/* ===================================================================
   17. Firm history (DARK) — long-form prose
   =================================================================== */

.firm { padding: var(--space-7) 0; }

.firm__prose p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.003em;
}
.firm__prose p:last-child { margin-bottom: 0; }
.firm__prose p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 3em;
  line-height: 0.9;
  float: left;
  padding: 0.18em 0.12em 0 0;
  color: var(--accent);
}


/* ===================================================================
   18. Contact (LIGHT)
   ================================================================
   Light Vellum section between the dark firm-history and dark footer.
   The color shift IS the chapter break — no ornamental strip needed. */

.contact { padding: var(--space-7) 0 var(--space-8); }

.contact__grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 760px) {
  .contact__grid { grid-template-columns: repeat(3, 1fr); }
}
.contact__col {
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.contact__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}
.contact__value {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.contact__value a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.contact__value a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.contact__value--addr {
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.5;
}
.contact__note {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}
.contact__regions {
  /* Areas-served line below the grid. Quiet supplemental info —
     italic Fraunces, soft ink, centered, max-width to keep it
     short. Sits like a footnote to the contact card. */
  margin: var(--space-6) auto 0;
  max-width: 56ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}


/* ===================================================================
   19. Footer (DARK)
   =================================================================== */

.site-footer {
  padding: var(--space-6) 0 var(--space-5);
  border-top: 1px solid var(--walnut-edge);
}
.site-footer__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.site-footer__brand { margin: 0 0 var(--space-2); color: var(--vellum); }
.site-footer__meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vellum-muted);
}
.site-footer__legal {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--vellum-muted);
  max-width: 56ch;
  margin: var(--space-3) auto 0;
}


/* ===================================================================
   20. Copy-to-clipboard status toast (Convention 1)
   =================================================================== */

.copy-status {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: var(--vellum);
  color: var(--walnut);
  padding: 0.625rem 1.05rem;
  border-radius: var(--radius-md);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  z-index: 1000;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.copy-status.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ===================================================================
   21. Responsive — mobile (< 760px)
   =================================================================== */

@media (max-width: 759px) {

  :root {
    --sevra-band-h: 2.4rem;
    --topbar-h: 3.6rem;     /* now single-row on mobile thanks to hamburger */
    --chrome-total: 6rem;   /* sevra (2.4) + topbar (3.6) — keep hero math accurate */
  }
  html {
    scroll-padding-top: 7rem;
  }

  /* Hero scroll indicator sits a touch tighter to the fold on phones */
  .hero__scroll { bottom: 1.5rem; }
  .hero__scroll-icon { width: 20px; }

  /* Sevra band — drop the role text on narrow screens, keep brand + link */
  .sevra-band__role { display: none; }
  .sevra-band__sep { display: none; }
  .sevra-band__link { margin-left: auto; }
  .sevra-band__inner { font-size: 0.74rem; }

  /* H&F topbar — single row: wordmark | phone | hamburger.
     Nav becomes an absolutely positioned dropdown panel below
     the topbar, hidden by default and revealed when .is-open. */
  .hf-topbar__inner {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .hf-topbar__brand { flex: 1; min-width: 0; }
  .hf-topbar__phone {
    /* Compact: number only, no "Call" label */
    gap: 0;
  }
  .hf-topbar__phone-label { display: none; }
  .hf-topbar__phone-num { font-size: 0.95rem; }

  .hf-topbar__menu-toggle { display: inline-flex; }

  /* Nav becomes a dropdown panel positioned below the sticky topbar.
     Sticky parents create a positioning context, so absolute children
     anchor to the topbar itself. */
  .hf-topbar__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: none;
    justify-content: stretch;
    background: rgba(31, 26, 20, 0.98);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--walnut-edge);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);

    /* Hidden state — visibility delay so transitions fire on close too */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 220ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0s linear 220ms;
  }
  .hf-topbar.is-open .hf-topbar__nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 220ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0s linear 0s;
  }

  .hf-topbar__nav ul {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 0.5rem var(--container-pad) 0.75rem;
  }
  .hf-topbar__nav li {
    width: 100%;
    border-bottom: 1px solid var(--walnut-edge);
  }
  .hf-topbar__nav li:last-child { border-bottom: none; }
  .hf-topbar__nav a {
    display: block;
    width: 100%;
    padding: 0.95rem 0;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    border-bottom: none;
  }
  .hf-topbar__nav a:hover,
  .hf-topbar__nav a:focus-visible {
    color: var(--pale-gold);
    border-bottom: none;
  }

  /* Reduced motion — no slide, just appear/disappear */
  @media (prefers-reduced-motion: reduce) {
    .hf-topbar__nav { transition: none; transform: none; }
    .hf-topbar.is-open .hf-topbar__nav { transition: none; }
  }

  .hero { padding-top: var(--space-6); padding-bottom: var(--space-5); }
  .hero__eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; }

  .orientation,
  .practice,
  .attorneys,
  .firm,
  .contact { padding: var(--space-6) 0; }

  .section-header__title { font-size: var(--step-3); }

  .epigraph__quote { max-width: 18ch; }

  .firm__prose p:first-of-type::first-letter {
    font-size: 2.5em;
  }

  .architecture__media--placeholder { aspect-ratio: 4 / 3; }

  .contact__value { font-size: var(--step-1); }
}


/* ===================================================================
   22. Print
   =================================================================== */

@media print {
  html, body { background: #fff; color: #000; }
  .sevra-band, .hf-topbar { display: none; }
  body { font-size: 11pt; }
  .hero, .orientation, .practice, .attorneys, .firm, .contact { padding: 1rem 0; }
  .architecture { display: none; }
  .hero__eyebrow, .section-header__eyebrow,
  .contact__label, .hero__tagline-since, .attorney__role {
    color: #6B4D20;
  }
  a { color: #000; text-decoration: underline; }
}