/* ===========================================================================
   The Other Country Band — design system
   Warm English americana: bone paper, meadow green, terracotta, evening gold.
   Editorial restraint: hairlines not cards, huge margins, one accent per view.
   Display serif for headlines ONLY. Humanist sans for everything else.
   =========================================================================== */

:root{
  /* Surfaces — 70-80% of every screen is bone/warm-white */
  --bone:#F5EFE3;          /* base paper */
  --warm-white:#FBF7EF;    /* alternating sections */
  --wheat:#E8DFC4;         /* soft tonal block */

  /* Ink — warm charcoal, never pure black */
  --ink:#2A2622;
  --ink-soft:#5C574C;      /* body/secondary */
  --ink-faint:#8A8271;     /* captions, meta */

  /* Landscape */
  --meadow:#8B9A6F;        /* sage, muted fills */
  --hedgerow:#38412F;      /* deep green anchor: footer, dark sections */

  /* Accents — small marks and CTAs only */
  --terracotta:#BC5B3C;      /* fills: buttons, large text (white sits on top) */
  --terracotta-dk:#9A462C;   /* text: inline links/small text on bone (--terracotta measures under 4.5:1 here) */
  --gold:#CDA75E;            /* evening light, decorative fills only */
  --gold-dk:#9C7B3C;         /* text: star ratings on bone (--gold measures ~2:1) */
  --meadow-dk:#5F6D48;       /* text: tag pills on bone (--meadow measures ~2.6:1) */

  --rule:rgba(42,38,34,.15);      /* hairline */
  --rule-soft:rgba(42,38,34,.08);

  --maxw:1280px;
  --gutter:clamp(1.25rem,5vw,4.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--terracotta); color:#fff}
img{max-width:100%; display:block}
a{color:inherit}

/* ── Typography ──────────────────────────────────────────────────────────── */
.display{font-family:'Playfair Display',Georgia,serif; font-weight:900; line-height:.98; letter-spacing:-.015em}
.serif{font-family:'Playfair Display',Georgia,serif}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif; font-weight:700; line-height:1.1; margin:0; letter-spacing:-.01em; color:var(--ink)}
h1{font-size:clamp(2.6rem,6.5vw,5rem); font-weight:900}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem)}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.7; color:var(--ink-soft); max-width:60ch}
.body-copy{color:var(--ink-soft); max-width:65ch}
/* Small-caps meta label — used SPARINGLY (max ~1 per 3 sections) */
.meta{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.caption{font-size:.8rem; color:var(--ink-faint); line-height:1.55}
.quote{font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.4; color:var(--ink)}

/* ── Layout: generous, editorial ─────────────────────────────────────────── */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:880px; margin-inline:auto; padding-inline:var(--gutter)}
/* Vertical rhythm — tightened. Editorial breath, not editorial emptiness. */
.section{padding-block:clamp(2.5rem,5.5vw,5rem)}
.section-tight{padding-block:clamp(1.5rem,3vw,3rem)}
.hr{height:1px; background:var(--rule); border:0; margin:0}

/* Tonal section variants (theme stays light throughout) */
.on-warm{background:var(--warm-white)}
.on-wheat{background:var(--wheat)}
.on-meadow{background:var(--meadow); color:#fff}
.on-meadow h2,.on-meadow h3{color:#fff}
.on-dark{background:var(--hedgerow); color:var(--bone)}
.on-dark h2,.on-dark h3{color:var(--bone)}
.on-dark .body-copy,.on-dark .lede{color:rgba(245,239,227,.78)}
.on-dark .meta{color:rgba(245,239,227,.6)}
.on-dark .caption{color:rgba(245,239,227,.58)}
.on-dark .hr{background:rgba(245,239,227,.18)}

/* Paper grain — fixed, above background, ignores pointer.
   Bumped from .035 to .075 for the print / newsprint feel. */
.grain::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.075; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:'Source Sans 3',sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:1rem 1.9rem; border-radius:2px; border:1.5px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  cursor:pointer;
}
.btn-primary{background:var(--terracotta); color:#fff}
.btn-primary:hover{background:var(--terracotta-dk)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-outline:hover{background:var(--ink); color:var(--bone)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--rule); padding:.62rem 1.15rem; font-size:.7rem}
.btn-ghost:hover{border-color:var(--ink)}
.on-dark .btn-outline,.on-meadow .btn-outline{color:var(--bone); border-color:rgba(245,239,227,.55)}
.on-dark .btn-outline:hover,.on-meadow .btn-outline:hover{background:var(--bone); color:var(--hedgerow)}
.btn:active{transform:translateY(1px)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hdr{position:fixed; top:0; left:0; right:0; z-index:60; transition:background .4s ease, box-shadow .4s ease, border-color .4s}
.hdr-inner{max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter);
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.hdr-logo{height:38px; width:auto; transition:filter .3s}
.nav{display:none; align-items:center; gap:2rem}
/* :not(.btn) so this never fights .btn-primary's own white text — without it,
   the "Check your date" header CTA would go dark-on-terracotta once the header
   turns solid on scroll (same cascade trap as the mobile drawer, fixed above) */
.nav a:not(.btn){font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:inherit; position:relative; padding-block:.35rem}
.nav a.btn{color:#fff}
.nav a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .3s ease}
.nav a:not(.btn):hover::after{right:0}
.hdr--solid{background:rgba(251,247,239,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule)}
/* Over the full-bleed hero the header is white; it flips to ink once scrolled.
   A translucent backing (stacked with the hero's own top scrim) guarantees
   AA contrast for the nav text regardless of what's in the photo underneath
   (measured as low as 1.03:1 on a bright sky with neither of these). */
.hdr--top{color:#fff; background:linear-gradient(180deg, rgba(15,14,10,.42), rgba(15,14,10,.16))}
.hdr--top .nav a,.hdr--top .burger{text-shadow:0 1px 6px rgba(20,22,14,.55)}
.hdr--top .hdr-logo{filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(20,22,14,.4))}
.hdr--solid .hdr-logo{filter:brightness(0)}
.burger{display:grid; place-items:center; width:44px; height:44px; background:none; border:0; color:inherit; cursor:pointer}
@media(min-width:1000px){ .nav{display:flex} .burger{display:none} }

/* Mobile drawer */
.drawer{position:fixed; inset:0 0 0 auto; width:min(84%,340px); z-index:70;
  background:var(--hedgerow); color:var(--bone); padding:5.5rem 2rem 2rem;
  display:flex; flex-direction:column; gap:.25rem; transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.drawer.open{transform:translateX(0)}
/* :not(.btn) so this never fights .btn-primary's own color (was silently
   winning the cascade and turning the drawer's CTA off-white instead of white) */
.drawer a:not(.btn){font-family:'Playfair Display',serif; font-size:1.75rem; text-decoration:none; padding-block:.45rem; color:var(--bone)}
.drawer-close{position:absolute; top:1.4rem; right:1.4rem; background:none; border:0; color:var(--bone); font-size:2rem; line-height:1; cursor:pointer}
.scrim{position:fixed; inset:0; z-index:65; background:rgba(42,38,34,.5); opacity:0; pointer-events:none; transition:opacity .4s}
.scrim.open{opacity:1; pointer-events:auto}

/* ═══════════════════════════════════════════════════════════════════════════
   NASHVILLE HANDBILL VOCABULARY
   Hatch Show Print / Grand Ole Opry / Rye whiskey label. Wood-type stacks,
   heavy black rules, ornate stars, marquee tickers. Country music never
   whispers, and neither should its typography.
   ═══════════════════════════════════════════════════════════════════════════ */
.woodtype{font-family:'Alfa Slab One',Georgia,serif; font-weight:400; text-transform:uppercase; letter-spacing:-.005em; line-height:.9;
  display:inline-block; transition:transform .4s cubic-bezier(.22,1,.36,1)}
.woodtype:hover{transform:rotate(-.5deg) translateY(-2px)}
.rye{font-family:'Rye',Georgia,serif; font-weight:400}

/* Marquee ticker: bulb-lit Nashville marquee. Ink on wheat, wood-type. */
.ticker{overflow:hidden; background:var(--wheat); border-block:4px solid var(--ink);
  padding-block:1rem; position:relative}
.ticker::before,.ticker::after{content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none}
.ticker::before{left:0; background:linear-gradient(90deg,var(--wheat),transparent)}
.ticker::after{right:0; background:linear-gradient(-90deg,var(--wheat),transparent)}
.ticker-track{display:flex; gap:2.25rem; width:max-content; animation:tick 55s linear infinite;
  font-family:'Alfa Slab One',Georgia,serif; text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.1rem,2.4vw,1.75rem); letter-spacing:.015em; align-items:center; will-change:transform}
.ticker-track > *{white-space:nowrap; display:inline-flex; align-items:center; gap:2.25rem}
.ticker-star{display:inline-block; width:1em; height:1em; color:var(--terracotta); flex-shrink:0}
@keyframes tick{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .ticker-track{animation:none} }

/* Handbill label — offset, rotated, black ink block.
   display:table (not inline-block) so it always sits on its OWN line above
   the heading that follows — .woodtype below is also inline-block, and two
   inline-level siblings would otherwise run side by side horizontally. */
.handbill-h{display:table; padding:.55rem 1.2rem; background:var(--ink); color:var(--bone);
  font-family:'Alfa Slab One',Georgia,serif; text-transform:uppercase; font-size:.85rem;
  letter-spacing:.12em; transform:rotate(-1.5deg); margin-bottom:1.75rem;
  box-shadow:4px 4px 0 var(--terracotta)}

/* Heavy black rules */
.rule-thick{height:6px; background:var(--ink); border:0; margin:1.25rem 0}
.rule-double{height:12px; border:0; margin:1.25rem 0;
  background:linear-gradient(var(--ink),var(--ink)) top/100% 3px no-repeat,
             linear-gradient(var(--ink),var(--ink)) bottom/100% 3px no-repeat}

/* Duotone image treatment — warm sepia / terracotta ink cast */
.duotone{filter:sepia(.7) saturate(1.35) hue-rotate(-12deg) contrast(1.06)}

/* Ornate star divider — replaces flat hairlines between big sections */
.divider-star{display:flex; align-items:center; gap:1.75rem; padding-block:clamp(1rem,2.5vw,1.75rem);
  color:var(--ink)}
.divider-star::before,.divider-star::after{content:""; flex:1; height:3px;
  background:linear-gradient(90deg,transparent,currentColor 20%,currentColor 80%,transparent)}
.divider-star svg{flex-shrink:0; opacity:.85; width:clamp(28px,4vw,44px); height:auto}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* HERO — full-bleed photo.
   Analysis of the band photo: clear sky is only the top ~10% and faces begin
   at ~15%, so type never goes there. All type sits low, over the legs and
   grass, where the image is visually quiet and takes white well. */
.hero{position:relative; min-height:82svh; display:flex; flex-direction:column; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-img{width:100%; height:100%; object-fit:cover; object-position:center 26%}
/* scrim across the lower half so the stacked type stays legible, PLUS a light
   top scrim so the fixed header's white nav text is never left to chance
   against unpredictable sky/cloud brightness (measured contrast as low as
   1.03:1 without this) */
.hero-media::after{content:""; position:absolute; left:0; right:0; bottom:0; height:66%; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,32,22,0) 0%, rgba(28,32,22,.34) 38%, rgba(28,32,22,.72) 100%)}
.hero-media::before{content:""; position:absolute; left:0; right:0; top:0; height:130px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,22,14,.55) 0%, rgba(20,22,14,.28) 55%, rgba(20,22,14,0) 100%)}
.hero-foot{position:relative; z-index:2; margin-top:auto; text-align:center;
  padding:0 var(--gutter) clamp(1.75rem,4vw,3rem); color:#fff}
/* Wood-type wordmark — mixed sizes, stacked, Nashville handbill style */
.hero-wordmark{display:flex; flex-direction:column; align-items:center; gap:.05em;
  font-family:'Alfa Slab One',Georgia,serif; font-weight:400; text-transform:uppercase;
  color:#fff; text-shadow:0 3px 26px rgba(20,24,12,.7); margin:0 0 .35rem; line-height:.9}
.hw-est{font-family:'Source Sans 3',sans-serif; font-weight:700;
  font-size:clamp(.62rem,1.4vw,.85rem); letter-spacing:.35em; opacity:.92; margin-bottom:.7em;
  display:inline-flex; align-items:center; gap:.85em}
.hw-est::before,.hw-est::after{content:""; width:clamp(24px,4vw,52px); height:1px; background:currentColor; opacity:.7}
.hw-the{font-size:clamp(.95rem,2vw,1.5rem); letter-spacing:.18em; font-weight:400}
.hw-other{font-size:clamp(1.6rem,3.6vw,2.5rem); letter-spacing:.02em}
.hw-country{font-size:clamp(2.6rem,7.5vw,5.8rem); letter-spacing:-.02em; line-height:.82}
.hw-band{font-family:'Source Sans 3',sans-serif; font-weight:700;
  font-size:clamp(.75rem,1.6vw,1.1rem); letter-spacing:.4em; margin-top:.55em; opacity:.95;
  display:inline-flex; align-items:center; gap:.85em}
.hw-band::before,.hw-band::after{content:""; width:clamp(28px,5vw,64px); height:1px; background:currentColor; opacity:.7}
.hero-strap{font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(1rem,2.1vw,1.6rem); letter-spacing:.02em; color:#fff;
  text-shadow:0 2px 18px rgba(25,28,16,.65); margin:0}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.25rem}
.hero .btn-outline{color:#fff; border-color:rgba(255,255,255,.8)}
.hero .btn-outline:hover{background:#fff; color:var(--ink)}
/* single line, always — shrinks rather than wrapping */
.hero-note{margin-top:1rem; font-size:clamp(.56rem,1.35vw,.72rem); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.9); white-space:nowrap;
  text-shadow:0 1px 10px rgba(25,28,16,.6)}
@media (max-width:640px){
  /* mobile source is member-vocals-stage.jpg: face/raised arms sit in the upper half */
  .hero-img{object-position:50% 22%}
}

/* ── Editorial pieces ────────────────────────────────────────────────────── */
.split{display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center}
@media(min-width:900px){ .split{grid-template-columns:1fr 1fr} .split--offset{grid-template-columns:1.15fr .85fr} }
.figure{margin:0; position:relative; overflow:hidden}
.figure img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.22,1,.36,1)}
.figure:hover img{transform:scale(1.03)}
.ar-portrait{aspect-ratio:4/5}
.ar-landscape{aspect-ratio:3/2}
.ar-wide{aspect-ratio:16/9}
.stat{display:flex; flex-direction:column; gap:.3rem}
.stat b{font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; color:var(--ink)}
.on-dark .stat b{color:var(--bone)}

/* Feature list with hairlines (never cards) */
.list-rows{display:grid}
.list-rows>*{padding-block:1.5rem; border-top:1px solid var(--rule)}
.list-rows>*:last-child{border-bottom:1px solid var(--rule)}
.on-dark .list-rows>*{border-color:rgba(245,239,227,.18)}

/* "Do you play...?" rows: heading stacks above its answer on narrow screens —
   a fixed 16rem+1fr grid crushes the answer column below ~640px */
.hire-row{display:grid; gap:.35rem}
@media(min-width:640px){ .hire-row{grid-template-columns:minmax(0,16rem) minmax(0,1fr); gap:.4rem 2rem} }

/* ── Video: our own poster frame, never a raw embed ──────────────────────── */
.video-frame{position:relative; overflow:hidden; cursor:pointer; background:var(--hedgerow)}
.video-frame img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.22,1,.36,1), filter .5s}
.video-frame:hover img{transform:scale(1.035); filter:brightness(.88)}
.video-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(30,34,24,.5))}
.play-btn{position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%;
  background:rgba(251,247,239,.94); display:grid; place-items:center; z-index:2;
  transition:transform .3s ease, background .3s ease}
.video-frame:hover .play-btn{transform:scale(1.07); background:#fff}
.play-btn svg{margin-left:4px}
.video-cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.25rem 1.4rem; color:#fff}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3}
.video-frame.playing::after,.video-frame.playing .play-btn,.video-frame.playing .video-cap{display:none}

/* ── Dates: editorial rows, not a widget ─────────────────────────────────── */
.date-row{display:grid; grid-template-columns:auto 1fr; gap:1.1rem 1.4rem; align-items:center;
  padding-block:1.6rem; border-top:1px solid var(--rule); transition:background .3s}
.date-row:last-of-type{border-bottom:1px solid var(--rule)}
.date-row:hover{background:rgba(203,167,94,.08)}
/* iPhone-style calendar tile — terracotta banner + bone body, hairline border */
.date-day{
  display:inline-flex; flex-direction:column; align-items:stretch;
  width:64px; min-width:64px; margin:0;
  font-family:'Alfa Slab One',Georgia,serif;
  font-size:1.85rem; line-height:1; color:var(--ink);
  text-align:center;
  background:var(--warm-white);
  border:1px solid var(--ink); border-radius:8px; overflow:hidden;
  box-shadow:0 2px 6px rgba(42,38,34,.14);
  padding:0 0 .5rem;
}
.date-day::before{
  /* two tiny binder rings above the month strip — iOS calendar cue */
  content:""; order:-2; display:block; height:8px; background:var(--warm-white);
  background-image:radial-gradient(circle,var(--ink-faint) 1.5px,transparent 2px),radial-gradient(circle,var(--ink-faint) 1.5px,transparent 2px);
  background-position:24% center, 76% center; background-repeat:no-repeat;
}
.date-mon{
  order:-1; margin:0 0 .55rem;
  display:block; background:var(--terracotta); color:#fff;
  font-family:'Source Sans 3',sans-serif;
  font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.28rem 0 .3rem; line-height:1.2;
}
.date-body h3{font-size:clamp(1.05rem,2vw,1.35rem)}
.date-meta{font-size:.85rem; color:var(--ink-faint); margin-top:.15rem}
.date-cta{grid-column:2; justify-self:start}
@media(min-width:760px){
  .date-row{grid-template-columns:auto 1fr auto}
  .date-cta{grid-column:auto; justify-self:end}
}
.tag{display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.28rem .6rem; border:1px solid currentColor; border-radius:2px; color:var(--meadow-dk)}
.tag--hot{color:var(--terracotta-dk)}

/* ── Reviews ─────────────────────────────────────────────────────────────── */
.review{border-top:1px solid var(--rule); padding-top:1.75rem}
.stars{color:var(--gold-dk); letter-spacing:.15em; font-size:.9rem}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field{display:block; margin-bottom:1.15rem}
.field>span{display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.5rem}
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--warm-white); border:1px solid var(--rule); border-radius:2px;
  padding:.85rem 1rem; transition:border-color .25s, box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(188,91,60,.14)}
.field textarea{resize:vertical; min-height:8rem}
.field input::placeholder,.field textarea::placeholder{color:rgba(42,38,34,.38)}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{
  background:rgba(245,239,227,.07); border-color:rgba(245,239,227,.25); color:var(--bone)}
.on-dark .field>span{color:rgba(245,239,227,.65)}
.on-dark .field input::placeholder,.on-dark .field textarea::placeholder{color:rgba(245,239,227,.4)}
.honey{position:absolute; left:-9999px; opacity:0; height:0; width:0}

/* ── From the road — Facebook-style post cards ─────────────────────────── */
.fbpost{display:flex; flex-direction:column;
  background:var(--warm-white); color:var(--ink);
  border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(20,22,14,.06);
  transition:transform .3s ease, box-shadow .3s ease}
.fbpost:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,22,14,.14)}
.fbpost-head{display:flex; align-items:center; gap:.6rem;
  padding:.85rem 1rem; border-bottom:1px solid var(--rule-soft)}
.fbpost-mark{display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:#1877F2; color:#fff; flex-shrink:0}
.fbpost-when{font-size:.78rem; color:var(--ink-faint); font-weight:600; letter-spacing:.02em}
.fbpost-media{margin:0; aspect-ratio:1/1; overflow:hidden; background:var(--wheat)}
.fbpost-media img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.fbpost:hover .fbpost-media img{transform:scale(1.04)}
.fbpost-text{padding:1rem 1rem 0; font-size:.95rem; line-height:1.6;
  color:var(--ink); white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis}
.fbpost-cta{margin:.75rem 1rem 1rem; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta-dk)}

/* ── Marquee background text — huge outlined wood-type, slow scroll ───── */
.marquee-bg{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  overflow:hidden; pointer-events:none; z-index:0; user-select:none;
  font-family:'Alfa Slab One',Georgia,serif; text-transform:uppercase;
  font-size:clamp(6rem,16vw,15rem); line-height:1; white-space:nowrap;
  -webkit-text-stroke:2px currentColor; color:transparent; opacity:.09}
.marquee-bg-track{display:inline-flex; gap:1.2em; width:max-content;
  animation:tick 60s linear infinite; will-change:transform}
.marquee-bg-track > span{white-space:nowrap}
.marquee-bg-slow .marquee-bg-track{animation-duration:110s}
/* content on top of the marquee sits above via z-index */
.section > .wrap, .section > .wrap-narrow{position:relative; z-index:1}

/* ── Photo wall — calm masonry, editorial ─────────────────────────────────── */
/* CSS columns, not a mixed-span grid: every photo renders at its OWN true
   aspect ratio (no object-fit:cover, so nobody is ever cropped out of frame),
   and a uniform column width reads as one calm wall rather than a busy,
   staggered jigsaw of differently-sized blocks. */
/* Uniform square grid — every photo fills an equal square cell, so the block
   tiles edge-to-edge with no ragged masonry bottoms (zero dead space). Thumbs
   are cover-cropped from the upper-centre (keeps faces); the lightbox shows the
   full uncropped image on click, so nothing is lost. */
.bento{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; position:relative}
@media(min-width:520px){ .bento{grid-template-columns:repeat(3,1fr)} }
@media(min-width:820px){ .bento{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1100px){ .bento{grid-template-columns:repeat(5,1fr)} }
@media(min-width:1400px){ .bento{grid-template-columns:repeat(6,1fr)} }
/* Cursor spotlight — terracotta halo follows the pointer over photos */
.bento::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),
    rgba(188,91,60,.28), rgba(188,91,60,0) 65%);
  mix-blend-mode:screen;
  opacity:0; transition:opacity .3s ease}
.bento:hover::before{opacity:1}
.b-cell{margin:0; aspect-ratio:1; overflow:hidden; cursor:zoom-in; position:relative;
  border:1px solid rgba(42,38,34,.12); background:var(--wheat)}
.b-cell img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .5s}
.b-cell:hover img{transform:scale(1.05); filter:saturate(1.08)}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox{position:fixed; inset:0; z-index:100; display:none; place-items:center; background:rgba(30,28,22,.94); backdrop-filter:blur(6px); padding:1.5rem}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw; max-height:82vh; object-fit:contain}
.lb-btn{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(245,239,227,.12); border:1px solid rgba(245,239,227,.3); color:var(--bone); font-size:1.3rem; cursor:pointer}
.lb-btn:hover{background:var(--terracotta); border-color:var(--terracotta)}

/* ── Sticky mobile CTA ───────────────────────────────────────────────────── */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:55; padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(251,247,239,.96); backdrop-filter:blur(10px); border-top:1px solid var(--rule);
  transform:translateY(110%); transition:transform .45s cubic-bezier(.22,1,.36,1)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{width:100%}
@media(min-width:1000px){ .sticky-cta{display:none} }

/* ── Motion: slow, editorial. Honours reduced-motion. ────────────────────── */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1)}
.js .reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  .figure img,.video-frame img{transition:none}
  html{scroll-behavior:auto}
  .marquee-bg-track,.ticker-track{animation:none}
  .photo-feature{transition:none}
  .woodtype:hover{transform:none}
  .bento::before{display:none}
}

/* Accessible focus ring */
:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* Skip link is the one sr-only element that must reappear on keyboard focus -
   without this a sighted keyboard user tabs into invisible, unlocatable text. */
.sr-only:focus{position:fixed; top:.75rem; left:.75rem; width:auto; height:auto;
  padding:.75rem 1.25rem; margin:0; overflow:visible; clip:auto; white-space:normal;
  background:var(--ink); color:var(--bone); z-index:9999; border-radius:2px;
  font-size:.85rem; font-weight:600; letter-spacing:.04em}

/* Live reels — poster + play button; click reveals video with controls */
.reels{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.reels-4{max-width:none}
.reel{margin:0; position:relative; overflow:hidden; cursor:pointer;
  aspect-ratio:9/16; background:#0f1109;
  border:1px solid rgba(245,239,227,.15); border-radius:2px;
  display:block; text-decoration:none; color:inherit}
.reel img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1), filter .4s}
.reel:hover img{transform:scale(1.04); filter:brightness(.82)}
.reel::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 55%, rgba(20,22,14,.85));
  pointer-events:none; transition:opacity .3s}
.reel-play{position:absolute; inset:0; margin:auto; z-index:2;
  width:64px; height:64px; border-radius:50%;
  background:rgba(251,247,239,.94); display:grid; place-items:center;
  transition:transform .3s ease, background .3s ease;
  box-shadow:0 6px 22px rgba(0,0,0,.35)}
.reel-play svg{width:26px; height:26px; margin-left:4px; color:var(--terracotta)}
.reel:hover .reel-play{transform:scale(1.08); background:#fff}
.reel figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.85rem 1rem; color:#fff;
  font-family:'Alfa Slab One',Georgia,serif; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.12em}
.reel video{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:3; background:#0f1109}
.reel.playing::before,.reel.playing .reel-play,.reel.playing figcaption{opacity:0; pointer-events:none}
/* "more videos" tile — links to Facebook */
.reel--more{background:var(--hedgerow)}
.reel--more img{opacity:.35}
.reel--more:hover img{opacity:.5; filter:none; transform:scale(1.03)}
.reel--more::before{background:linear-gradient(180deg,rgba(56,65,47,.5),rgba(56,65,47,.9))}
.reel-more-label{position:absolute; inset:0; display:grid; place-items:center;
  z-index:2; padding:1rem; text-align:center; color:#fff;
  font-family:'Alfa Slab One',Georgia,serif; text-transform:uppercase;
  font-size:1rem; letter-spacing:.08em; line-height:1.3}
.reel-more-label small{display:block; font-size:.65rem; letter-spacing:.18em;
  margin-top:.5rem; color:rgba(255,255,255,.78); font-family:'Source Sans 3',sans-serif; font-weight:600}

/* ── Landing hero — same photo, shorter, adds a kicker line ─────────────── */
.hero--landing{min-height:82svh}
.hero-kicker{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.82); margin:0 0 .85rem; text-shadow:0 1px 10px rgba(20,22,14,.55)}

/* ── Editorial pull-quote break ─────────────────────────────────────────── */
.pull-quote{background:var(--wheat); padding-block:clamp(3.5rem,8vw,6rem); text-align:center}
.pull-quote-text{font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.25; color:var(--ink); max-width:38ch; margin:0 auto}
.pull-quote-mark{color:var(--terracotta); font-style:normal; margin-right:.15em; font-size:1.6em; line-height:0; vertical-align:-.35em}
.pull-quote-attr{margin-top:1.5rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}

/* ── Venue grid on landing pages — hairlines, no cards ─────────────────── */
.venue-grid{list-style:none; padding:0; margin:0;
  display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:1px solid var(--rule)}
.venue-grid li{padding:1.1rem 1.25rem; border-bottom:1px solid var(--rule);
  font-family:'Playfair Display',Georgia,serif; font-size:1.15rem; color:var(--ink)}
.venue-grid li + li{border-left:1px solid var(--rule-soft)}
@media (max-width:520px){ .venue-grid li + li{border-left:0} }

/* ── FAQ +/× toggle animation (details/summary) ────────────────────────── */
details summary span[aria-hidden]{transition:transform .3s cubic-bezier(.22,1,.36,1)}
details[open] summary span[aria-hidden]{transform:rotate(45deg)}

/* ── Perf: below-fold sections skip painting until near viewport ───────── */
.section, .section-tight, .pull-quote{content-visibility:auto; contain-intrinsic-size:auto 600px}
.hero{content-visibility:visible}

/* ── Member portrait strip — dense, framed, duotone ─────────────────────── */
.member-strip{display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.member{margin:0; position:relative; aspect-ratio:3/4; overflow:hidden;
  border:1px solid var(--ink)}
.member img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.member:hover img{transform:scale(1.05)}
.member figcaption{position:absolute; left:0; right:0; bottom:0;
  padding:.55rem .7rem; color:#fff;
  font-family:'Alfa Slab One',Georgia,serif; text-transform:uppercase;
  font-size:.7rem; letter-spacing:.1em;
  background:linear-gradient(transparent, rgba(20,22,14,.85))}

/* ── Included strip — replaces the fizzly 4-column text block ───────────── */
.included-strip{list-style:none; padding:0; margin:2rem 0 0;
  display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; align-items:center;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding-block:1.1rem; font-size:.95rem; color:var(--ink-soft)}

/* ── Polaroid stack — overlapping photos, hand-arranged look ────────────── */
/* Single framed photo - instant-print styling (white mat, caption strip,
   slight tilt) sized to the photo's own landscape ratio so a wide group
   shot isn't cropped down into a portrait frame. */
.photo-feature{margin:0; max-width:30rem; margin-inline:auto; background:#fff;
  padding:14px 14px 3.25rem; border:1px solid rgba(42,38,34,.18);
  transform:rotate(-2deg);
  box-shadow:0 16px 36px rgba(20,22,14,.3), 0 3px 6px rgba(20,22,14,.14);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease}
.photo-feature img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.photo-feature figcaption{margin-top:1rem; text-align:center;
  font-family:'Playfair Display',Georgia,serif; font-style:italic;
  font-size:.95rem; color:var(--ink-faint)}
.photo-feature:hover{transform:rotate(0deg) translateY(-4px);
  box-shadow:0 22px 46px rgba(20,22,14,.36), 0 4px 8px rgba(20,22,14,.16)}

/* ── Creed section — Nashville handbill mixed wood-type ─────────────────── */
.creed-h{font-family:'Alfa Slab One',Georgia,serif; font-weight:400; text-transform:uppercase;
  line-height:.88; color:var(--ink); margin:0; letter-spacing:-.005em}
.creed-h span{display:block}
.creed-l1{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.creed-l2{font-size:clamp(1.15rem,2.3vw,1.7rem); color:var(--ink-soft); font-weight:400; font-family:'Playfair Display',serif; font-style:italic; text-transform:none; letter-spacing:0; margin-top:.2em}
.creed-l3{font-size:clamp(1.9rem,4.5vw,3.4rem); color:var(--terracotta); letter-spacing:-.015em; margin-top:.1em}
.creed-l3 em{font-style:normal}
.creed-figure{position:relative}
.creed-figure::before{content:""; position:absolute; inset:12px -12px -12px 12px; border:2px solid var(--ink); z-index:-1}
.creed-figure img{border:1px solid var(--ink)}

/* ── View Transitions: buttery cross-page nav (progressive enhancement) ── */
@view-transition{ navigation:auto }
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s; animation-timing-function:cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}