/* ============================================================
   Hey Freddy, design system
   Palette: river & elm. Warm paper, deep pine, marigold spark.
   Mobile-first. No webfonts (CWV): tuned system stacks.
   ============================================================ */

/* Brand palette lifted from the Hey Freddy logo:
   navy #082840 · teal #007481 · sun gold #F2B035 · ice hills #E4F0EE */
:root {
  --bg: #FBF6EA;              /* cream, to match the new wordmark's world */
  --bg-soft: #F4EDDC;
  --ice: #EFE5CE;
  --header-h: 76px;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #5A554C;
  --pine: #2A2A2A;            /* soft black */
  --pine-deep: #101010;       /* logo wordmark black */
  --river: #A06E14;           /* burnished gold (text-safe accent) */
  --river-soft: #F5E6C3;
  --marigold: #F0B030;        /* maple-leaf gold */
  --marigold-soft: #FBEFD2;
  --sage: #F0E7D3;
  --danger: #B4372E;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(12,12,12,.06), 0 8px 24px -12px rgba(12,12,12,.16);
  --shadow-lift: 0 2px 4px rgba(12,12,12,.08), 0 18px 40px -16px rgba(12,12,12,.26);
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1140px;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,.9,.35,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--river); text-underline-offset: 3px; }@media (hover: hover){a:hover{ color: var(--pine); }}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.14; margin: 0 0 .5em; color: var(--pine-deep); letter-spacing: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 0; background: var(--pine); color: #fff; padding: .6em 1em; z-index: 200; border-radius: 0 0 10px 0; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; border-radius: 4px; }

/* ---------- view transitions (page fade) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .26s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 246, 234, .92);
  background: color-mix(in srgb, #FBF6EA 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(12,12,12,.1);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 4px 20px -8px rgba(12,12,12,.15); }
.header-in { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; text-decoration: none; position: relative; }
.brand-logo { height: 36px; width: auto; max-height: 36px; display: block; transition: transform .45s var(--ease-spring); transform-origin: 88% 40%; }
/* Easter egg: hover the logo and its maple leaf sheds tiny gold leaves that flutter down from the wordmark while the logo gives a little hat-tip. */
@media (hover: hover){.brand:hover .brand-logo { transform: rotate(-3.5deg) scale(1.05); }}
.leaf-fall { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.leaf-fall i { position: absolute; top: 12%; font-style: normal; font-size: 11px; opacity: 0; filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.05); }
.leaf-fall i:nth-child(1) { right: 6%; }
.leaf-fall i:nth-child(2) { right: 16%; font-size: 9px; }
.leaf-fall i:nth-child(3) { right: 0; font-size: 8px; }
@media (hover: hover){.brand:hover .leaf-fall i:nth-child(1) { animation: leaf-drop 1.5s ease-in infinite; }}
@media (hover: hover){.brand:hover .leaf-fall i:nth-child(2) { animation: leaf-drop 1.5s ease-in .5s infinite; }}
@media (hover: hover){.brand:hover .leaf-fall i:nth-child(3) { animation: leaf-drop 1.5s ease-in .95s infinite; }}
@keyframes leaf-drop {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  12%  { opacity: 1; }
  55%  { transform: translate(-7px, 26px) rotate(-70deg); opacity: .95; }
  100% { opacity: 0; transform: translate(5px, 46px) rotate(-160deg); }
}
.logo-mark { flex: none; }
:root { --header-h: 68px; }
@media (max-width: 560px) { .brand-logo { height: 28px; max-height: 28px; } :root { --header-h: 58px; } }
.site-nav { margin-left: auto; display: none; gap: 4px; align-items: center; }
.nav-link {
  text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .95rem;
  padding: .5em .85em; border-radius: 999px; transition: background .2s, color .2s;
}@media (hover: hover){.nav-link:hover{ background: var(--sage); color: var(--pine-deep); }}
.nav-link.active { background: var(--pine); color: #fff; }
.nav-cta {
  background: var(--marigold); color: var(--pine-deep) !important; display: inline-flex; align-items: center; gap: .35em;
  box-shadow: 0 2px 10px -2px rgba(245,166,35,.55);
}@media (hover: hover){.nav-cta:hover{ background: #ffb63f; transform: translateY(-1px); }}
/* CTA stays gold even when it's the current page (generic .active would paint it navy-on-navy) */
.nav-link.nav-cta.active {
  background: var(--marigold); color: var(--pine-deep) !important;
  box-shadow: inset 0 0 0 2px var(--pine-deep), 0 2px 10px -2px rgba(245,166,35,.55);
}
.nav-cta .spark { animation: sparkle 2.8s ease-in-out infinite; display: inline-block; }
@keyframes sparkle { 0%,100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.35) rotate(20deg); opacity: .75; } }

/* ---------- nav dropdowns ---------- */
.nav-item { position: relative; }
.nav-item::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* hover bridge */
.nav-link.has-sub { display: inline-flex; align-items: center; gap: .4em; }
.nav-caret { transition: transform .2s var(--ease-out); flex: none; opacity: .7; }@media (hover: hover){.nav-item:hover .nav-caret{ transform: rotate(180deg); }}.nav-item.open .nav-caret, .nav-item:focus-within .nav-caret{ transform: rotate(180deg); }
.sub-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; min-width: 232px;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--pine) 14%, transparent);
  border-radius: 14px; padding: 8px; z-index: 60;
  box-shadow: 0 20px 44px -18px rgba(12,12,12,.35);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
}@media (hover: hover){.nav-item:hover .sub-menu{
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}}.nav-item:focus-within .sub-menu, .nav-item.open .sub-menu{
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.sub-menu a {
  display: block; padding: .52em .75em; border-radius: 9px; text-decoration: none;
  color: var(--ink-soft); font-weight: 600; font-size: .92rem; white-space: nowrap;
}@media (hover: hover){.sub-menu a:hover{ background: var(--sage); color: var(--pine-deep); }}
.sub-menu a.on { color: var(--river); }
.nav-phone { font-size: 1.05rem; padding: .45em .55em; }

/* mobile grouped menu, clear hierarchy: bold parent rows, tidy indented children */
.m-group { border-bottom: 1px solid color-mix(in srgb, var(--pine) 10%, transparent); }
.m-group .m-link { border-bottom: 0; padding-bottom: 2px; }
.m-subrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0 0 12px 6px; padding: 2px 0 4px 14px;
  border-left: 2px solid color-mix(in srgb, var(--marigold) 55%, transparent); border-bottom: 0; }
.m-subrow a { display: block; font-size: .9rem; color: var(--ink-soft); text-decoration: none; font-weight: 600; padding: 7px 0; }
.m-subrow a:active { color: var(--river); }

.nav-toggle {
  margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  display: grid; place-content: center; gap: 5px; border-radius: 10px;
}
.nav-toggle span { width: 22px; height: 2.5px; background: var(--pine-deep); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav {
  display: grid; gap: 0; padding: 6px clamp(16px,4vw,28px) 22px;
  border-top: 1px solid color-mix(in srgb, var(--pine) 10%, transparent);
  max-height: calc(100dvh - 62px); overflow-y: auto;
  animation: sheet .35s var(--ease-out);
}
@keyframes sheet { from { opacity: 0; transform: translateY(-10px); } }
.m-link {
  display: block; text-decoration: none; font-family: var(--font-display); font-weight: 800;
  font-size: 1.16rem; color: var(--pine-deep);
  padding: 13px 0 11px; border-bottom: 1px solid color-mix(in srgb, var(--pine) 10%, transparent);
}
.m-link.active { color: var(--river); }
.m-sub { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-top: 16px; }
.m-sub a { font-size: .92rem; color: var(--ink-soft); text-decoration: none; font-weight: 600; }

@media (min-width: 880px) {
  .site-nav { display: flex; }
  .nav-toggle, .mobile-nav { display: none !important; }
}

/* ---------- hero: the logo's composition at page scale ----------
   white sky → layered ice hills → skyline resting on the water line */
.hero {
  position: relative; overflow: clip; color: var(--ink); background: var(--bg);
}
.hero::before { /* layered hills, exactly like the logo backdrop */
  content: ""; position: absolute; inset: auto 0 0 0; height: 72%;
  background:
    radial-gradient(85% 100% at 22% 118%, var(--ice) 0%, transparent 62%),
    radial-gradient(80% 90% at 82% 122%, #F1E8D2 0%, transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; padding-top: clamp(30px, 5vw, 56px); padding-bottom: clamp(16px, 3vw, 34px); }
.hero h1 { color: var(--pine-deep); font-size: clamp(2.1rem, 5.6vw, 3.7rem); max-width: 15em; }
.hero h1 .hl { color: var(--river); }
.hero p.lede { font-size: clamp(1.02rem, 1.9vw, 1.2rem); max-width: 36em; color: var(--ink-soft); }
/* (decorative hero sun removed, the hero artwork has its own) */
/* skyline anchored on the water, full-bleed brand moment */
.hero-base { position: relative; z-index: 2; text-align: center; margin-top: clamp(10px, 2vw, 24px); }
.hero-base img { display: inline-block; width: min(760px, 90vw); height: auto; margin-bottom: -8px; }
.water-line { display: block; width: 100%; height: 16px; }
.water-line path { stroke: var(--river); fill: none; stroke-linecap: round; }
.hero + * { position: relative; }
/* hero swag cluster, polaroid fan, links to #swag */
.hero-swag {
  position: absolute; top: clamp(88px, 10vw, 140px); right: 0; z-index: 3;
  width: 344px; height: 292px; display: block; text-decoration: none; cursor: pointer;
}
.hs-card {
  position: absolute; width: 148px; background: #fff;
  border: 1.5px solid rgba(12,12,12,.16); border-radius: 14px; padding: 8px 8px 10px;
  box-shadow: var(--shadow); transition: transform .5s var(--ease-spring), rotate .5s var(--ease-spring), box-shadow .35s;
  animation: hs-bob 4.4s ease-in-out infinite;
}
.hs-card img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.hs-c1 { left: 0; top: 40px; rotate: -8deg; }
.hs-c2 { left: 102px; top: 4px; rotate: 4deg; z-index: 2; animation-duration: 5.1s; animation-delay: .5s; }
.hs-c3 { left: 200px; top: 74px; rotate: -4deg; animation-duration: 4.7s; animation-delay: .9s; }
@keyframes hs-bob { 50% { transform: translateY(-8px); } }@media (hover: hover){.hero-swag:hover .hs-card{ box-shadow: var(--shadow-lift); }}.hero-swag:focus-visible .hs-card{ box-shadow: var(--shadow-lift); }@media (hover: hover){.hero-swag:hover .hs-c1{ rotate: -2deg; transform: translate(-10px, -8px); }}.hero-swag:focus-visible .hs-c1{ rotate: -2deg; transform: translate(-10px, -8px); }@media (hover: hover){.hero-swag:hover .hs-c2{ rotate: 0deg; transform: translateY(-14px) scale(1.06); }}.hero-swag:focus-visible .hs-c2{ rotate: 0deg; transform: translateY(-14px) scale(1.06); }@media (hover: hover){.hero-swag:hover .hs-c3{ rotate: 2deg; transform: translate(10px, -8px); }}.hero-swag:focus-visible .hs-c3{ rotate: 2deg; transform: translate(10px, -8px); }
.hero-swag:focus-visible { outline: 3px solid var(--marigold); outline-offset: 6px; border-radius: 18px; }
.hs-badge {
  position: absolute; top: -16px; right: 14px; z-index: 4; text-align: center;
  background: var(--marigold); color: var(--pine-deep);
  font-weight: 800; font-size: .8rem; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase;
  padding: .55em .95em; border-radius: 10px; rotate: 6deg;
  box-shadow: 3px 3px 0 var(--river-soft); animation: m-stamp-kf 4.6s ease-in-out infinite;
}@media (hover: hover){.hero-swag:hover .hs-badge{ rotate: 0deg; }}
.hs-spark { position: absolute; color: var(--marigold); font-size: 1.05rem; animation: m-float 3.4s ease-in-out infinite; }
.hs-s1 { left: -16px; top: 18px; }
.hs-s2 { right: -8px; bottom: 40px; animation-delay: .7s; font-size: .8rem; }
/* Below the desktop hero width, re-flow the merch collage as a centered block
   under the hero actions instead of hiding it, so mobile gets it too. */
@media (max-width: 1150px) {
  .hero-swag { position: relative; display: block; margin: 30px auto 8px; width: 300px; height: 250px; inset: auto; }
  .hs-card { width: 128px; }
  .hs-c1 { left: 0; top: 34px; }
  .hs-c2 { left: 86px; top: 2px; }
  .hs-c3 { left: 172px; top: 60px; }
}
@media (prefers-reduced-motion: reduce) { .hs-card, .hs-badge, .hs-spark { animation: none !important; } }
.date-chip-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.date-chip {
  font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--river); background: var(--river-soft); border-radius: 999px; padding: .35em .95em;
}
.weather-chip {
  font-size: .85rem; font-weight: 700; color: var(--pine-deep);
  background: #fff; border: 1.5px solid rgba(12,12,12,.14); border-radius: 999px; padding: .3em .9em;
  animation: word-in .5s var(--ease-out) both;
}
.weather-chip[hidden] { display: none !important; }
.hero-word { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); animation: word-in .7s var(--ease-spring) forwards; animation-delay: var(--d, 0s); }
@keyframes word-in { to { opacity: 1; transform: none; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.waves { position: absolute; inset: auto 0 -2px; z-index: 1; pointer-events: none; }
.waves svg { width: 100%; height: clamp(80px, 12vw, 150px); display: block; }
.wave { animation: drift 14s linear infinite alternate; }
.wave.w2 { animation-duration: 19s; animation-direction: alternate-reverse; }
.wave.w3 { animation-duration: 26s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-70px); } }

.ticker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ticker a {
  background: #fff; border: 1.5px solid rgba(12,12,12,.16); color: var(--pine-deep);
  text-decoration: none; font-size: .85rem; font-weight: 600; padding: .4em .9em; border-radius: 999px;
  transition: background .2s, border-color .2s, transform .2s var(--ease-spring);
  opacity: 0; animation: word-in .6s var(--ease-out) forwards; animation-delay: var(--d, .6s);
}@media (hover: hover){.ticker a:hover{ background: var(--marigold); color: var(--pine-deep); border-color: var(--marigold); transform: translateY(-2px); }}
.ticker .tk-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--river); align-self: center; font-weight: 800; width: 100%; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em; text-decoration: none; cursor: pointer;
  font-weight: 700; font-size: 1rem; font-family: var(--font-body);
  padding: .78em 1.5em; border-radius: 999px; border: 0;
  transition: transform .25s var(--ease-spring), box-shadow .25s, background .2s;
}
/* Brand hierarchy: navy leads (like the wordmark), teal supports, gold is the sun, used sparingly */
.btn-primary { background: var(--pine-deep); color: #fff; box-shadow: 0 4px 18px -6px rgba(12,12,12,.5); }@media (hover: hover){.btn-primary:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 26px -8px rgba(12,12,12,.6); color: #fff; background: var(--pine); }}
.btn-ghost { background: #fff; color: var(--pine-deep); border: 2px solid var(--pine-deep); }@media (hover: hover){.btn-ghost:hover{ background: rgba(12,12,12,.05); color: var(--pine-deep); transform: translateY(-2px); }}
.btn-pine { background: var(--marigold); color: var(--pine-deep); box-shadow: 0 4px 18px -6px rgba(242,176,53,.65); }@media (hover: hover){.btn-pine:hover{ background: #F6BC50; color: var(--pine-deep); transform: translateY(-2px); }}

/* ---------- sections & cards ---------- */
section { scroll-margin-top: calc(var(--header-h) + 12px); }
.band { padding-block: clamp(48px, 8vw, 96px); }
/* visually-hidden but readable by crawlers/screen-readers (keeps heading hierarchy intact) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Ask Freddy: no skyline art, tiles pulled up snug under the Start-chatting button */
.hero-ask { min-height: auto; }
.band-ask { padding-top: clamp(18px, 3vw, 30px); }
.hero-ask-hint { align-self: center; color: var(--ink-soft); font-size: .92rem; font-style: italic; }
@media (max-width: 640px) { .hero-ask-hint { display: none; } }
/* soft bands carry the logo's layered-hills backdrop */
.band-soft {
  background:
    radial-gradient(110% 85% at 18% 115%, var(--ice) 0%, transparent 58%),
    radial-gradient(95% 75% at 85% 120%, #EAF4F1 0%, transparent 55%),
    var(--bg-soft);
}
/* h2 accent: the logo's flanking-rule motif, teal rule, gold sun dot */
.band-head h2::after, .page-head h1::after {
  content: ""; display: block; width: 58px; height: 3px; margin-top: 12px; border-radius: 2px;
  background: linear-gradient(90deg, var(--river) 0 42px, transparent 42px 46px, var(--marigold) 46px);
}
.center .band-head h2::after, .center h2::after { margin-inline: auto; }
.band-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(22px, 4vw, 40px); flex-wrap: wrap; }
.band-head p { color: var(--ink-soft); margin: 0; max-width: 44em; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--river); margin: 0 0 .8em; }
.more-link { font-weight: 700; text-decoration: none; white-space: nowrap; }
.more-link::after { content: " →"; transition: margin .2s; }@media (hover: hover){.more-link:hover::after{ margin-left: 4px; }}

.grid { display: grid; gap: clamp(14px, 2.5vw, 24px); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }

.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 26px); position: relative;
  transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .35s;
  border: 1.5px solid rgba(12,12,12,.16); /* line-art edge, like the logo's buildings */
}@media (hover: hover){.card:hover{ border-color: rgba(12,12,12,.32); }}
a.card { text-decoration: none; color: inherit; display: block; }@media (hover: hover){.card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); }}
.card h3 { margin-bottom: .35em; }
.card p { color: var(--ink-soft); font-size: .97rem; margin: 0; }
.card .card-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--river); display: block; margin-bottom: .7em; }
.card-emoji { font-size: 1.9rem; line-height: 1; margin-bottom: 12px; display: inline-block; transition: transform .4s var(--ease-spring); }@media (hover: hover){.card:hover .card-emoji{ transform: scale(1.18) rotate(-6deg); }}
.card-arrow { position: absolute; right: 20px; bottom: 16px; font-weight: 800; color: var(--marigold); opacity: 0; transform: translateX(-6px); transition: .3s var(--ease-out); }@media (hover: hover){.card:hover .card-arrow{ opacity: 1; transform: none; }}

/* ---------- scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- event list ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; }
.chip {
  border: 1.5px solid color-mix(in srgb, var(--pine) 22%, transparent); background: var(--card);
  color: var(--ink-soft); font-weight: 700; font-size: .88rem; padding: .45em 1em; border-radius: 999px;
  cursor: pointer; transition: all .2s var(--ease-out); font-family: var(--font-body);
  min-height: 44px;
}@media (hover: hover){.chip:hover{ border-color: var(--pine); color: var(--pine-deep); transform: translateY(-1px); }}
.chip.on { background: var(--pine); border-color: var(--pine); color: #fff; }
.search-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.search-row input {
  flex: 1; min-width: 220px; font: inherit; padding: .7em 1.1em; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--pine) 20%, transparent); background: var(--card);
}
.search-row input:focus { border-color: var(--river); outline: 2px solid color-mix(in srgb, var(--river) 30%, transparent); }

.day-group { margin-top: 34px; }
.day-head {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--pine-deep);
  position: sticky; top: var(--header-h); background: rgba(251, 246, 234, .94);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px); padding: .5em 0; z-index: 5; margin: 0 0 10px;
  border-bottom: 2px solid var(--marigold); display: flex; gap: .6em; align-items: baseline;
}
.day-head .dow { color: var(--river); font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-body); }
.event-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: start;
  background: var(--card); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--pine) 7%, transparent); box-shadow: var(--shadow);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}@media (hover: hover){.event-row:hover{ transform: translateX(4px); box-shadow: var(--shadow-lift); }}
.event-row h3 { margin: 0; font-size: 1.08rem; }
.event-row h3 a { color: var(--pine-deep); text-decoration: none; }@media (hover: hover){.event-row h3 a:hover{ color: var(--river); }}
.event-meta { color: var(--ink-soft); font-size: .9rem; grid-column: 1; }
.event-blurb { grid-column: 1 / -1; color: var(--ink-soft); font-size: .93rem; margin: 4px 0 0; }
.badge { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3em .7em; border-radius: 999px; white-space: nowrap; }
.badge-free { background: var(--marigold-soft); color: #8A5A00; }
.badge-cat { background: var(--river-soft); color: var(--river); }
.event-badges { display: flex; gap: 6px; grid-column: 2; grid-row: 1; }
.events-status { font-size: .88rem; color: var(--ink-soft); display: flex; align-items: center; gap: .5em; margin-top: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #2E9E6B; display: inline-block; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 50% { opacity: .4; } }
.empty-note { background: var(--card); border-radius: var(--radius); padding: 30px; text-align: center; color: var(--ink-soft); }

/* ---------- answer pages (services) ---------- */
.answer-page { max-width: 760px; margin-inline: auto; padding: clamp(36px, 6vw, 64px) clamp(16px, 4vw, 32px) 60px; }
.page-head { margin-bottom: 34px; }
.quick-answer {
  background: #fff;
  border: 2px solid var(--pine-deep);
  border-radius: var(--radius); padding: 20px 22px; margin-top: 18px; position: relative;
  box-shadow: 4px 4px 0 var(--river-soft);
}
.quick-answer p { margin: 0; font-size: 1.08rem; }
.qa-badge {
  position: absolute; top: -12px; left: 18px; background: var(--marigold); color: var(--pine-deep);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: .25em .8em; border-radius: 999px;
}
.verified { font-size: .85rem; color: var(--ink-soft); margin-top: 14px; }
.verified::before { content: "✓ "; color: #2E9E6B; font-weight: 800; }
.answer-page section { margin-top: 40px; }
.answer-page table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--card); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
.answer-page th, .answer-page td { text-align: left; padding: .7em .9em; border-bottom: 1px solid var(--bg-soft); }
.answer-page th { background: var(--pine); color: #fff; font-weight: 700; }
.answer-page tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.callout { border-left: 4px solid var(--river); background: var(--river-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; margin: 18px 0; }
.callout.warn { border-color: var(--danger); background: #FBEAE8; }
.callout p:last-child { margin: 0; }

/* FAQ */
.faq { margin-top: 48px; }
.faq-item { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow); margin-bottom: 10px; border: 1px solid color-mix(in srgb, var(--pine) 7%, transparent); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-q { margin: 0; font-size: 1.02rem; font-family: var(--font-body); font-weight: 700; color: var(--ink); }
.faq-chev { width: 10px; height: 10px; border-right: 2.5px solid var(--river); border-bottom: 2.5px solid var(--river); transform: rotate(45deg); transition: transform .3s var(--ease-spring); flex: none; }
.faq-item[open] .faq-chev { transform: rotate(225deg); }
.faq-a { padding: 0 18px 18px; color: var(--ink-soft); }
.faq-item[open] { border-color: color-mix(in srgb, var(--river) 35%, transparent); }
.faq-item[open] .faq-a { animation: fade-in .4s var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: translateY(-6px); } }

.sources-box { background: var(--bg-soft); border-radius: var(--radius); padding: 22px 24px; margin-top: 48px; font-size: .93rem; }
.sources-box h2 { font-size: 1.05rem; }
.sources-box p, .sources-box li { color: var(--ink-soft); }

/* ---------- itinerary / listicle ---------- */
.step-list { counter-reset: step; padding: 0; list-style: none; }
.step-list > li { position: relative; padding: 0 0 26px 58px; counter-increment: step; }
.step-list > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%; background: var(--pine); color: var(--marigold);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  display: grid; place-content: center;
}
.step-list > li::after { content: ""; position: absolute; left: 19.5px; top: 44px; bottom: 4px; width: 2px; background: color-mix(in srgb, var(--pine) 18%, transparent); }
.step-list > li:last-child::after { display: none; }
.step-list h3 { margin-bottom: .25em; }
.step-list .when { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--river); }

/* ---------- stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--pine-deep); }
.stat span { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- chat widget ---------- */
.chat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 150;
  display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--pine); color: #fff; font-weight: 700; font-family: var(--font-body); font-size: .95rem;
  padding: 10px 18px 10px 12px; border-radius: 999px; box-shadow: 0 6px 24px -6px rgba(10,43,33,.5);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}@media (hover: hover){.chat-fab:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px -6px rgba(10,43,33,.6); }}
.chat-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(245,166,35,.55); animation: fab-pulse 3.2s ease-out infinite;
}
@keyframes fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.5);} 70% { box-shadow: 0 0 0 14px rgba(245,166,35,0);} 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0);} }
.chat-panel {
  position: fixed; z-index: 160; right: 14px; bottom: 14px;
  width: min(400px, calc(100vw - 28px)); height: min(600px, calc(100vh - 28px));
  height: min(600px, calc(100dvh - 28px));
  background: var(--card); border-radius: 22px; box-shadow: 0 24px 70px -18px rgba(10,43,33,.45);
  display: flex; flex-direction: column; overflow: hidden;
  animation: chat-in .4s var(--ease-spring);
  border: 1px solid color-mix(in srgb, var(--pine) 12%, transparent);
}
@keyframes chat-in { from { opacity: 0; transform: translateY(30px) scale(.95); } }
.chat-head { background: var(--pine); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.chat-head b { font-family: var(--font-display); font-size: 1.1rem; }
.chat-head small { display: block; opacity: .75; font-size: .75rem; }
.chat-close { margin-left: auto; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1rem; }@media (hover: hover){.chat-close:hover{ background: rgba(255,255,255,.25); }}
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.5; animation: msg-in .3s var(--ease-out); white-space: pre-wrap; overflow-wrap: anywhere; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.msg.user { align-self: flex-end; background: var(--pine); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--bg-soft); border-bottom-left-radius: 4px; }
.msg.bot a { color: var(--river); }
/* Freddy answers in markdown and the bubble renders it as real structure, so a
   bot message holds block children. They bring their own spacing — leaving the
   inherited pre-wrap would double every gap the markup already provides. */
.msg.bot { white-space: normal; }
.msg.bot > :first-child { margin-top: 0; }
.msg.bot > :last-child { margin-bottom: 0; }
.msg.bot p { margin: 0 0 .55em; }
.msg.bot ul, .msg.bot ol { margin: .35em 0 .55em; padding-left: 1.2em; }
.msg.bot li { margin-bottom: .2em; }
.msg.bot li::marker { color: var(--ink-soft); }
.msg.bot strong { font-weight: 650; }
.msg.bot .msg-h { display: block; font-weight: 650; margin: .55em 0 .3em; }
.msg.bot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: rgba(0,0,0,.06); padding: .1em .35em; border-radius: 4px; }
.msg-sources { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,.08); font-size: .78rem; color: var(--ink-soft); white-space: normal; }
.msg-sources a { color: var(--ink-soft); text-decoration: underline; }
.msg.typing span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); margin-right: 4px; animation: bounce 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: .15s; } .msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: none; } 30% { transform: translateY(-6px); } }
.chat-suggest { display: flex; gap: 8px; padding: 0 16px 8px; flex-wrap: wrap; }
.chat-suggest button { font-size: .8rem; border: 1px solid color-mix(in srgb, var(--pine) 25%, transparent); background: #fff; border-radius: 999px; padding: .4em .8em; cursor: pointer; color: var(--ink-soft); font-weight: 600; }@media (hover: hover){.chat-suggest button:hover{ border-color: var(--pine); color: var(--pine-deep); }}
.chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--bg-soft); }
.chat-input input { flex: 1; font: inherit; border: 1.5px solid color-mix(in srgb, var(--pine) 18%, transparent); border-radius: 999px; padding: .6em 1em; }
.chat-input input:focus { border-color: var(--river); outline: none; }
.chat-input button { border: 0; background: var(--marigold); color: var(--pine-deep); font-weight: 800; border-radius: 999px; padding: 0 18px; cursor: pointer; transition: transform .2s var(--ease-spring); }@media (hover: hover){.chat-input button:hover{ transform: scale(1.05); }}
.chat-note { font-size: .68rem; color: var(--ink-soft); text-align: center; padding: 0 14px 10px; margin: 0; }

/* ---------- footer: brand navy, white knockout logo ---------- */
.site-footer { background: var(--pine-deep); color: #C9C4BA; margin-top: 0; padding: 0 0 34px; }
.foot-water { display: block; width: 100%; height: 16px; margin-bottom: clamp(36px, 6vw, 64px); background: var(--bg); }
.foot-water path { stroke: var(--river); fill: none; stroke-linecap: round; }
.site-footer a { color: #F1EEE6; text-decoration: none; }@media (hover: hover){.site-footer a:hover{ color: var(--marigold); }}
.foot-brand { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.foot-logo { width: min(280px, 64vw); height: auto; margin-inline: auto; }
.foot-tag {
  margin: 18px auto 0; font-size: .8rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--marigold); display: flex; align-items: center;
  justify-content: center; gap: 14px; max-width: 30em;
}
.foot-tag::before, .foot-tag::after { content: ""; height: 2px; width: 44px; background: #C89A3F; border-radius: 2px; flex: none; }
.foot-social { list-style: none; padding: 0; margin: 18px 0 0; display: flex; justify-content: center; gap: 12px; }
.foot-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); color: #F1EEE6; transition: color .15s, border-color .15s, background-color .15s; }
.foot-social a:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; }
@media (hover: hover){.foot-social a:hover{ color: var(--pine-deep); background: var(--marigold); border-color: var(--marigold); }}
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px clamp(24px, 4vw, 56px); border-top: 1px solid rgba(255,255,255,.14); padding-top: 34px; }
.foot-col { min-width: 140px; }
.foot-col .foot-head { color: var(--marigold); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .8em; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .92rem; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 22px; font-size: .8rem; color: #97928A; }
.foot-legal a { text-decoration: underline; }
.foot-legal strong { color: #D9D4CB; }
.foot-sig { margin-top: 10px; font-size: .82rem; }
.foot-sig a { color: var(--marigold); font-weight: 700; text-decoration: none; }

/* ---------- newsletter signup (footer · inline card · feature band) ---------- */
.nl-form { margin-top: 12px; max-width: 460px; }
.nl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-input {
  flex: 1 1 200px; min-width: 0; padding: .7em .95em; border-radius: 999px;
  border: 1px solid var(--ice); background: #fff; color: var(--ink); font: inherit;
}
.nl-input:focus-visible { outline: 3px solid var(--marigold); outline-offset: 1px; }
.nl-btn { flex: 0 0 auto; white-space: nowrap; }
.nl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-note { margin: .6em 0 0; font-size: .78rem; color: var(--ink-soft); }
.nl-msg { margin: .6em 0 0; font-size: .88rem; font-weight: 600; }
.nl-msg-ok { color: #1E7A52; }
.nl-msg-err { color: #B23A2E; }

/* footer variant (dark), its own centered section below the link columns */
.foot-nl-section { border-top: 1px solid rgba(255,255,255,.14); margin-top: 36px; padding-top: 30px; text-align: center; }
.foot-nl { max-width: 440px; margin: 0 auto; }
.foot-nl .foot-head { color: var(--marigold); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .35em; }
.foot-nl-copy { margin: 0 0 4px; font-size: .92rem; color: #C9C4BA; }
.foot-nl .nl-form { margin-inline: auto; max-width: 420px; }
/* dark footer: the default dark-green primary button disappears, so go marigold */
.foot-nl .nl-btn { background: var(--marigold); color: var(--pine-deep); box-shadow: 0 4px 18px -6px rgba(242,176,53,.55); }@media (hover: hover){.foot-nl .nl-btn:hover{ background: #F6BC50; color: var(--pine-deep); }}
.foot-nl .nl-input { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff; }
.foot-nl .nl-input::placeholder { color: #9A958C; }
.foot-nl .nl-note { color: #97928A; }
.foot-nl .nl-msg-ok { color: #7BD3A8; }
.foot-nl .nl-msg-err { color: #F0A79B; }

/* inline card variant (light content pages), full logo on top for brand clarity */
.nl-card {
  margin: 34px 0; background: var(--marigold-soft); border: 1px solid var(--marigold);
  border-radius: 18px; padding: 24px 26px;
}
.nl-card-logo { display: block; width: clamp(160px, 42%, 210px); height: auto; margin: 0 0 16px; }
.nl-card-body { min-width: 0; }
.nl-card-body .nl-h { margin: 0 0 .2em; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; color: var(--ink); }
.nl-card-body > p { margin: 0; color: var(--ink-soft); }
.nl-card .nl-form { margin-top: 12px; max-width: none; }

/* feature band variant (homepage + /newsletter/) */
.nl-band { background: var(--marigold-soft); }
.nl-band-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.nl-band-copy h2 { margin: .1em 0 .3em; }
.nl-band-copy p { color: var(--ink-soft); margin: 0; max-width: 40em; }
.nl-band-form .nl-form { max-width: none; }
.nl-band-page .nl-band-inner { grid-template-columns: 1fr; text-align: center; }
.nl-band-page .nl-band-copy { display: none; }
.nl-band-page .nl-form { margin-inline: auto; }
/* site-wide band: on the cream page bg it needs a hairline to separate from content */
.nl-site-band { border-top: 1px solid rgba(16,16,16,.06); }
.nl-onlist { margin: 0; font-weight: 700; color: var(--ink); }
/* one card inside the events listings */
.nl-evcard { margin: 34px 0 6px; padding: 20px 22px; background: var(--marigold-soft); border-radius: var(--radius); display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: 10px 26px; align-items: center; }
.nl-evcard-h { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.2; margin: 0 0 4px; color: var(--ink); }
.nl-evcard-p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.nl-evcard .nl-form { margin-top: 0; max-width: none; }
@media (max-width: 720px) { .nl-evcard { grid-template-columns: 1fr; } }
/* /newsletter/confirmed/ */
.nl-confirm-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 720px) {
  .nl-band-inner { grid-template-columns: 1fr; }
}@media (hover: hover){.foot-sig a:hover{ text-decoration: underline; }}

/* ---------- hub tiles (services index) ---------- */
.hub-tile { display: flex; gap: 16px; align-items: flex-start; }
.hub-ico { width: 56px; height: 56px; display: grid; place-content: center; flex: none; }
.hub-ico .motif { width: 54px; height: 54px; transition: transform .4s var(--ease-spring); }@media (hover: hover){.card:hover .hub-ico .motif{ transform: scale(1.12) rotate(-5deg); }}

/* Numbers worth saving, tap-to-call cards */
.num-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 12px; margin-top: 4px; }
.num-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--sage); border-radius: 16px; background: var(--card); text-decoration: none; color: inherit; transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), border-color .25s; }@media (hover: hover){.num-card:hover{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(20,20,20,.09); border-color: var(--marigold); }}
.num-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-content: center; background: var(--marigold-soft); transition: transform .3s var(--ease-spring); }@media (hover: hover){.num-card:hover .num-ico{ transform: scale(1.08) rotate(-4deg); }}
.num-ico svg { width: 24px; height: 24px; display: block; }
.num-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.num-name { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.num-value { font-size: 1.3rem; font-weight: 800; color: var(--ink); margin: 1px 0; font-variant-numeric: tabular-nums; }
.num-sub { font-size: .8rem; color: var(--ink-soft); }
.num-card.num-emergency { grid-column: 1 / -1; border-color: #E1B0A6; background: linear-gradient(180deg, #FDEEE9, var(--card) 62%); }
.num-emergency .num-ico { background: #F6D8D0; }
.num-emergency .num-value { color: #C0392B; }
@media (max-width: 520px) { .num-grid { grid-template-columns: 1fr; } }

/* alert bar */
.alert-bar { background: var(--marigold); color: var(--pine-deep); font-weight: 600; font-size: .92rem; padding: 10px 0; }
.alert-bar .wrap { display: flex; gap: 10px; align-items: center; }
.alert-bar[hidden] { display: none; }

/* ---------- command-center dashboard (homepage) ---------- */
.greet { font-size: .95rem; font-weight: 700; color: var(--river); margin: 0 0 10px; animation: word-in .5s var(--ease-out) both; }

/* marquee ticker */
.marquee {
  background: var(--pine-deep); color: #fff; overflow: hidden; white-space: nowrap;
  padding: 10px 0; border-block: 2px solid var(--pine-deep);
}
.marquee-track { display: inline-flex; gap: 34px; padding-right: 34px; animation: mq-scroll 45s linear infinite; will-change: transform; }@media (hover: hover){.marquee:hover .marquee-track{ animation-play-state: paused; }}
@keyframes mq-scroll { to { transform: translateX(-50%); } }
.mq-item { color: #F1EEE6; text-decoration: none; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }@media (hover: hover){.mq-item:hover{ color: var(--marigold); }}
.mq-star { color: var(--marigold); font-size: .75rem; }

/* dashboard grid */
.dash { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); grid-auto-flow: row dense; align-items: start; }
.tile {
  background: #fff; border: 1.5px solid rgba(12,12,12,.16); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
  transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s;
}@media (hover: hover){.tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(12,12,12,.32); }}
/* reserve space for async-loaded content so the layout doesn't shift (CLS) */
.wx-body { min-height: 128px; }
#today-list { min-height: 140px; }
.tile-feed { grid-column: span 4; grid-row: span 2; }
.tile-weather { grid-column: span 2; }
.tile-count { grid-column: span 2; background: linear-gradient(180deg, #FFFDF7 0%, #FFF3DA 100%); }
.dash-side { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; gap: 16px; align-self: start; }
.v-body { min-height: 0; }
/* Vitals live in their own grid so every tile is the SAME height.
   grid-auto-rows: 1fr makes all rows equal to the tallest tile's content. */
.dash-vitals { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; margin-top: 16px; }
.tile-cams { margin-top: 16px; }           /* full-width banner below the vitals grid */
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr 1fr; }
  .tile-feed { grid-column: span 2; grid-row: auto; }
  .tile-weather, .tile-count { grid-column: span 1; }
  .dash-side { grid-column: span 2; grid-row: auto; flex-direction: row; }
  .dash-side > .tile { flex: 1; min-width: 0; }
  .dash-vitals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dash { grid-template-columns: 1fr; } .dash .tile { grid-column: span 1 !important; }
  .dash-side { grid-column: 1 / -1; flex-direction: column; } .dash-side > .tile { flex: auto; }
  .dash-vitals { grid-template-columns: 1fr; }
}
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.tile-label { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--river); }
.tile-feed .event-row { border: 1px solid rgba(12,12,12,.1); box-shadow: none; padding: 12px 14px; }@media (hover: hover){.tile-feed .event-row:hover{ box-shadow: var(--shadow); }}

/* tabs */
.tabs { display: flex; gap: 4px; background: var(--bg-soft); border-radius: 999px; padding: 3px; }
.tab {
  border: 0; background: transparent; font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--ink-soft); padding: .35em 1em; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s;
}@media (hover: hover){.tab:hover{ color: var(--pine-deep); }}
.tab.on { background: var(--pine-deep); color: #fff; }
/* --- the live-feed day switcher ---------------------------------------
   Three quiet words gave no clue that the list below them was filtered by
   day. Each tab now carries its date underneath, and the list is headed by
   the day and the count. Dates come from the reader's clock (see app.js),
   so nothing here goes stale between deploys. */
.tabs-day { gap: 3px; padding: 4px; border: 1px solid rgba(16,16,16,.08); }
.tabs-day .tab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 15px 6px;
  border-radius: 999px; line-height: 1.12; transition: background .25s, color .25s, transform .3s var(--ease-spring); }
.tabs-day .tab-k { font-size: .84rem; font-weight: 800; }
.tabs-day .tab-d { font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); transition: color .25s; }
.tabs-day .tab-d:empty { display: none; }
.tabs-day .tab.on { box-shadow: 0 7px 18px -9px rgba(16,16,16,.65); }
.tabs-day .tab.on .tab-d { color: var(--marigold); }
@media (hover: hover) { .tabs-day .tab:not(.on):hover { background: rgba(16,16,16,.06); transform: translateY(-1px); } }

.feed-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
  padding-bottom: 9px; border-bottom: 2px solid var(--marigold); }
.feed-now:empty { display: none; }
.feed-now strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.02rem, 2vw, 1.22rem); color: var(--pine-deep); }
.feed-count { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--river); }

/* it is a live feed, so the label gets a pulse */
.tile-feed .tile-label::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-radius: 50%; background: #3FA34D; vertical-align: middle; box-shadow: 0 0 0 0 rgba(63,163,77,.6);
  animation: feed-pulse 2.6s ease-out infinite; }
@keyframes feed-pulse { 70% { box-shadow: 0 0 0 8px rgba(63,163,77,0); } 100% { box-shadow: 0 0 0 0 rgba(63,163,77,0); } }

@media (max-width: 580px) {
  .tile-feed .tile-head { align-items: stretch; }
  .tabs-day { width: 100%; }
  .tabs-day .tab { flex: 1 1 0; padding: 7px 4px 6px; }
  .tabs-day .tab-k { font-size: .78rem; }
  .tabs-day .tab-d { font-size: .6rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-feed .tile-label::after { animation: none; }
  .tabs-day .tab { transition: none; }
}


/* countdown */
.cd-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin: 0 0 2px; }
.cd-name a { position: relative; z-index: 2; color: var(--pine-deep); text-decoration: none; }@media (hover: hover){.cd-name a:hover{ color: var(--river); }}
.cd-when { font-size: .84rem; color: var(--ink-soft); margin: 0 0 12px; }
.cd-logo { width: 100%; height: auto; max-width: 100%; object-fit: contain; display: block; border-radius: 10px; margin-top: 4px; }
.cd-digits { display: flex; gap: 8px; }
.cd-cell {
  flex: 1; text-align: center;
  background: linear-gradient(168deg, #FFF7DF 0%, #FBDD97 100%);
  border: 1.5px solid var(--marigold);
  border-radius: 12px; padding: 10px 2px 7px; min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 7px -3px color-mix(in srgb, var(--marigold) 70%, transparent);
}
/* ticking digits stay sans + tabular so they don't jiggle every second */
.cd-cell b { display: block; font-family: var(--font-body); font-size: 1.35rem; font-weight: 800; color: var(--pine-deep); font-variant-numeric: tabular-nums; }
.cd-cell i { font-style: normal; font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--river); }
.cd-cta { display: inline-flex; align-items: center; gap: .4em; margin-top: 14px; font-weight: 700; font-size: .9rem; text-decoration: none; padding: .62em 1.15em; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #8A1E8C, #D8318A); box-shadow: 0 8px 20px -9px rgba(216,49,138,.75); transition: box-shadow .18s, filter .18s; }
@media (hover: hover) { .tile-count:has(.cd-cta):hover .cd-cta { box-shadow: 0 12px 26px -8px rgba(216,49,138,.9); filter: brightness(1.06); } }
/* Whole countdown tile is clickable through to the festival guide (stretched-link). */
.tile-count { position: relative; }
.tile-count:has(.cd-cta) { cursor: pointer; }
.cd-link { display: block; color: inherit; text-decoration: none; }

/* weather */
.wx-skel { color: var(--ink-soft); font-size: .9rem; animation: pulse-dot 1.6s infinite; margin: 0; }
.wx-now { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wx-ico { font-size: 2.4rem; line-height: 1; }
.wx-temp { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--pine-deep); }
.wx-hl { font-size: .82rem; color: var(--ink-soft); }
.wx-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.wx-day { font-size: .72rem; color: var(--ink-soft); padding: 4px 0; border-radius: 8px; transition: background .2s, transform .2s var(--ease-spring); }@media (hover: hover){.wx-day:hover{ background: var(--bg-soft); transform: translateY(-2px); }}
.wx-day b { display: block; color: var(--pine-deep); font-size: .78rem; }
.wx-day .wd-ico { font-size: 1.05rem; display: block; margin: 2px 0; }
/* Dashboard vitals tiles (fuel, ER, river, flights, fire) */
.v-body { min-height: 76px; }
.v-skel { color: var(--ink-soft); font-size: .88rem; animation: pulse-dot 1.6s infinite; margin: 0; }
.v-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .9rem; padding: 2px 0; border-bottom: 1px dashed var(--sage); }
.v-row:last-of-type { border-bottom: 0; }
.v-row span { color: var(--ink-soft); }
.v-row b { color: var(--pine-deep); font-weight: 700; white-space: nowrap; }
.v-row.v-sub b { font-weight: 600; font-size: .85rem; }
.v-up { color: #C0392B; font-size: .78rem; }
.v-dn { color: #1E8449; font-size: .78rem; }
.v-big { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--pine-deep); white-space: nowrap; }
.v-trend { font-weight: 600; font-size: .85rem; color: var(--ink-soft); text-transform: capitalize; }
.v-fire { font-size: .8rem; color: var(--pine-deep); font-weight: 600; margin: 0 0 4px; line-height: 1.4; }
.v-note { font-size: .72rem; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.4; }
.v-note a { color: var(--burnished, #B07E1E); }
.v-line { font-size: .82rem; font-weight: 600; color: var(--pine-deep); margin: 6px 0 0; }
/* ER names can wrap to 2 lines; keep the wait figure on its own line, unbroken */
#er-body .v-row { align-items: flex-start; }
#er-body .v-row span { font-size: .86rem; line-height: 1.25; }
/* Flights: city left, time pushed right, status badge trailing; wraps cleanly */
.vf-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: .84rem; padding: 3px 0; border-bottom: 1px dashed var(--sage); }
.vf-row:last-of-type { border-bottom: 0; }
.vf-city { color: var(--ink-soft); }
.vf-time { font-weight: 700; color: var(--pine-deep); margin-left: auto; }
.vf-st { font-size: .72rem; font-weight: 600; }
.vf-st.bad { color: #C0392B; }
.vf-st.ok { color: #1E8449; }

/* Live webcams: dashboard tile + page grid */
.tile-cams { display: flex; flex-direction: row; align-items: center; gap: 8px 16px; flex-wrap: wrap; text-decoration: none; color: inherit; }@media (hover: hover){.tile-cams:hover{ border-color: var(--marigold); transform: translateY(-3px); }}
.tile-cams .tile-label { margin: 0; }
.cams-sub { font-size: .9rem; color: var(--ink-soft); margin: 0; flex: 1 1 220px; }
.cams-cta { margin-left: auto; font-weight: 700; color: var(--burnished, #B07E1E); font-size: .95rem; white-space: nowrap; }
.cam-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cam { margin: 0; }
.cam-frame { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; border: 1px solid var(--sage); background: #000; }
.cam-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cam-cap { margin: 8px 2px 0; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 700px) { .cam-grid { grid-template-columns: 1fr; } }
.wx-cond { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.wx-stat { font-size: .72rem; color: var(--ink-soft); background: var(--bg-soft); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.wx-stat b { color: var(--pine-deep); font-weight: 700; }
.wx-sun { font-size: .78rem; color: var(--ink-soft); margin: 10px 0 0; }

/* market + alerts + ask tiles */
.mk-status { font-weight: 700; color: var(--pine-deep); margin: 0 0 4px; }
.mk-status.open { color: #1B7A3D; }
.mk-sub { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.al-line { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-soft); margin: 0 0 6px; flex-wrap: wrap; }
.dot-ok { background: #2E9E6B; }
.dot-warn { background: var(--danger); }
.ask-mini { display: flex; gap: 8px; margin-bottom: 8px; }
.ask-mini input {
  flex: 1; min-width: 0; font: inherit; font-size: .9rem; padding: .55em .9em;
  border: 1.5px solid rgba(12,12,12,.25); border-radius: 999px;
}
.ask-mini input:focus { border-color: var(--river); outline: 2px solid var(--river-soft); }
.ask-mini button {
  border: 0; background: var(--marigold); color: var(--pine-deep); font-weight: 800; font-size: 1rem;
  border-radius: 999px; width: 40px; cursor: pointer; transition: transform .2s var(--ease-spring);
}@media (hover: hover){.ask-mini button:hover{ transform: scale(1.1); }}

.today-band { padding-block: clamp(30px, 5vw, 56px); }
.quick-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.quick-row a {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  background: var(--card); border: 1.5px solid rgba(12,12,12,.16); border-radius: 999px;
  padding: .4em 1.05em; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--pine-deep);
  transition: transform .2s var(--ease-spring), border-color .2s, box-shadow .2s;
}@media (hover: hover){.quick-row a:hover{ transform: translateY(-2px); border-color: var(--river); box-shadow: var(--shadow); color: var(--river); }}
.quick-row .q-ico { font-size: 1.1rem; }

/* ---------- mobile tap targets: ensure interactive elements are big enough to tap ---------- */
@media (max-width: 640px) {
  /* Centered flex-wrap staggers the four uneven-height columns on a phone. A
     two-up grid keeps them left-aligned and on a tidy baseline instead. */
  .foot-cols { display: grid; grid-template-columns: 1fr 1fr; justify-content: normal; align-items: start; text-align: left; gap: 26px 20px; }
  .foot-col { min-width: 0; }
  .foot-col ul { gap: 2px; }
  .foot-col ul a { display: block; padding: 11px 0; line-height: 1.25; }
  .m-subrow a { padding: 11px 0; }
  .foot-legal a, .foot-sig a { display: inline-block; padding: 4px 0; }
  .rail-card { min-height: 48px; }
  .more-link { display: inline-block; padding: 6px 0; }
}
.today-empty { background: var(--card); border-radius: var(--radius); padding: 24px 26px; color: var(--ink-soft); box-shadow: var(--shadow); }

/* ---------- interactive city map (Leaflet) ---------- */
.city-map-block { margin-top: 6px; }
.map-filters { margin-bottom: 12px; }
.map-card {
  border: 2px solid var(--pine-deep); border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--river-soft); overflow: hidden;
  /* Leaflet panes use z-index up to ~1000; isolate them so the sticky header always wins */
  position: relative; isolation: isolate; z-index: 0;
}
#city-map { height: min(480px, 62vh); min-height: 340px; background: var(--ice); }
.map-fallback { padding: 26px; color: var(--ink-soft); }
.map-note { font-size: .8rem; color: var(--ink-soft); margin-top: 10px; }
.trail-key { display: inline-block; width: 26px; height: 0; border-top: 4px dotted var(--river); vertical-align: middle; margin-right: 4px; }
.hf-pin-wrap { background: none; border: none; }
.hf-pin {
  width: 38px; height: 38px; border-radius: 50% 50% 50% 6px;
  background: #fff; border: 2.5px solid var(--pine-deep);
  display: grid; place-content: center; font-size: 17px;
  box-shadow: 0 3px 10px rgba(12,12,12,.35);
  transition: transform .25s var(--ease-spring), border-color .2s;
  transform: rotate(-8deg);
}@media (hover: hover){.hf-pin:hover{ transform: rotate(0) scale(1.18); border-color: var(--marigold); z-index: 10; }}
.leaflet-popup-content-wrapper {
  border-radius: 14px; border: 2px solid var(--pine-deep);
  box-shadow: 4px 4px 0 var(--river-soft);
  font-family: var(--font-body);
}
.leaflet-popup-content { margin: 14px 16px; line-height: 1.5; }
.leaflet-popup-tip { border: 1px solid var(--pine-deep); }
.hf-pop .mp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.hf-pop .mp-emoji { font-size: 1.4rem; line-height: 1; }
.hf-pop .mp-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--pine-deep); }
.hf-pop .mp-cat { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--river-soft); color: var(--river); border-radius: 999px; padding: .28em .7em; }
.hf-pop .mp-blurb { margin: 0 0 6px; color: var(--ink-soft); font-size: .88rem; }
.hf-pop .mp-walk { color: var(--ink-soft); font-size: .82rem; margin: 0 0 8px; }
.hf-pop .mp-walk::before { content: "🚶 "; }
.hf-pop .mp-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.hf-pop .mp-link { font-weight: 700; font-size: .88rem; }

/* ---------- eat & drink explorer + taproom passport ---------- */
.eat-toolbar { margin-bottom: 20px; }
.eat-toolbar .filters { margin-bottom: 8px; }
.chip-area { border-style: dashed; }
.eat-grid .eat-card[hidden] { display: none; }
.eat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.eat-top h3 { margin-bottom: .2em; }
.eat-price { font-weight: 800; color: var(--river); font-size: .9rem; letter-spacing: .06em; flex: none; }
.eat-meta { font-size: .82rem; color: var(--ink-soft); margin: 0 0 8px; }
.eat-tags { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.eat-card.eat-winner {
  border-color: var(--marigold); box-shadow: 0 0 0 4px var(--marigold-soft), var(--shadow-lift);
  animation: winner-pop .6s var(--ease-spring);
}
@keyframes winner-pop { 0% { transform: scale(.96); } 55% { transform: scale(1.04); } 100% { transform: none; } }
.dice-btn { white-space: nowrap; }
.dice-btn.rolling { animation: dice-roll .6s var(--ease-spring); }
@keyframes dice-roll { 25% { transform: rotate(-14deg) scale(1.08); } 65% { transform: rotate(10deg) scale(1.05); } }

.passport-bar { margin-bottom: 18px; }
.pp-track { height: 14px; border-radius: 999px; background: var(--bg-soft); border: 1.5px solid rgba(12,12,12,.15); overflow: hidden; }
.pp-fill { height: 100%; background: linear-gradient(90deg, var(--river), var(--marigold)); border-radius: 999px; transition: width .6s var(--ease-out); }
.pp-label { font-weight: 700; font-size: .9rem; color: var(--pine-deep); margin: 8px 0 0; }
.tap-card { font: inherit; text-align: left; cursor: pointer; position: relative; }
.tap-card .tap-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--pine-deep); margin-bottom: .25em; }
.tap-card .tap-blurb { display: block; color: var(--ink-soft); font-size: .95rem; }
.tap-card .eat-meta { display: block; }
.tap-stamp { font-size: 1.6rem; display: inline-block; margin-bottom: 8px; filter: grayscale(1); opacity: .5; transition: filter .3s, opacity .3s, transform .4s var(--ease-spring); }
.tap-check {
  position: absolute; top: 14px; right: 14px; font-size: .72rem; font-weight: 800;
  color: #1B7A3D; background: #E7F5EC; border-radius: 999px; padding: .3em .8em;
  opacity: 0; transform: rotate(-8deg) scale(.7); transition: opacity .3s, transform .35s var(--ease-spring);
}
.tap-card.stamped { border-color: var(--river); background: linear-gradient(160deg, #fff 60%, var(--river-soft)); }
.tap-card.stamped .tap-stamp { filter: none; opacity: 1; transform: rotate(-10deg) scale(1.15); }
.tap-card.stamped .tap-check { opacity: 1; transform: rotate(-8deg) scale(1); }
#taproom-map { height: min(440px, 58vh); min-height: 320px; background: var(--ice); }

/* ---------- animated motifs (brand line-art icons) ---------- */
.motif { width: clamp(76px, 11vw, 116px); height: auto; flex: none; filter: drop-shadow(0 4px 10px rgba(12,12,12,.12)); }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
@media (max-width: 480px) { .page-head-row .motif { width: 64px; } }
@keyframes m-float { 50% { transform: translateY(-6px); } }
.m-float { animation: m-float 3.6s ease-in-out infinite; }
@keyframes m-sway { 50% { transform: rotate(3.5deg); } }
.m-sway { animation: m-sway 4s ease-in-out infinite; }
.m-sway-late { animation: m-sway 4s ease-in-out 1.2s infinite; }
@keyframes m-rise { 0% { transform: translateY(5px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
.m-rise { animation: m-rise 2.8s ease-in-out infinite; }
.m-steam { animation: m-rise 2.4s ease-in-out infinite; }
@keyframes m-fall { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.m-fall { animation: m-fall 3.4s linear infinite; }
.m-fall-late { animation: m-fall 3.4s linear 1.7s infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-spin-slow { animation: m-spin 16s linear infinite; }
@keyframes m-wavex { 50% { transform: translateX(-7px); } }
.m-wave { animation: m-wavex 4.5s ease-in-out infinite; }
@keyframes m-stamp-kf { 0%, 72%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.18) rotate(-7deg); } 88% { transform: scale(1); } }
.m-stamp { animation: m-stamp-kf 3.6s var(--ease-spring) infinite; }
@keyframes m-ring-kf { 0%, 78%, 100% { transform: rotate(0); } 82% { transform: rotate(-9deg); } 86% { transform: rotate(8deg); } 90% { transform: rotate(-5deg); } 94% { transform: rotate(3deg); } }
.m-ring { animation: m-ring-kf 3.2s ease-in-out infinite; }
@keyframes m-kite-kf { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(-4px, -6px) rotate(-5deg); } 65% { transform: translate(3px, -3px) rotate(4deg); } }
.m-kite { animation: m-kite-kf 5.5s ease-in-out infinite; }
/* sun sweeps the arc by rotating about the arc's centre, works everywhere,
   unlike offset-path on SVG children (broken in Safari & co.) */
.m-sunarc { animation: m-sunarc-kf 9s ease-in-out infinite alternate; transform-box: view-box; }
@keyframes m-sunarc-kf { from { transform: rotate(-12deg); } to { transform: rotate(-168deg); } }
@keyframes m-dash { to { stroke-dashoffset: -46; } }
.m-dashmove { stroke-dasharray: 14 9; animation: m-dash 1.4s linear infinite; }
.m-spark { animation: sparkle 2.8s ease-in-out infinite; transform-origin: 79px 70px; }
@keyframes m-needle-kf { 0%, 100% { transform: rotate(-16deg); } 45% { transform: rotate(22deg); } 65% { transform: rotate(12deg); } 80% { transform: rotate(18deg); } }
.m-needle { animation: m-needle-kf 5s ease-in-out infinite; }

/* event category colors */
.event-row { border-left: 5px solid var(--catc, var(--river)); }
.badge-cat { background: color-mix(in srgb, var(--catc, var(--river)) 12%, #fff); color: var(--catc, var(--river)); }
.card-kicker .kick-cat { color: var(--catc, var(--river)); }
.eventful-card { border-left: 5px solid var(--catc, var(--river)); }
/* keep the three homepage cards level: teaser text clamps to four lines */
.eventful-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.eventful-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- guides (long-form articles) ---------- */
.guide-eyebrow a { text-decoration: none; }
/* The chip used to paint its label in the raw cluster colour on a 12% tint of
   the same colour: 3.2:1 for events, 2.9:1 for food & drink, 3.7:1 for things
   to do, all below AA, and at this size and tracking it read as a smudge. The
   hue still identifies the cluster, but the label is now a deep version of it
   (66% hue, 34% ink) on a slightly firmer tint. Measured after: events 5.24,
   things to do 5.75, food & drink 4.87, city life 6.76. The 66% was chosen by
   the worst cluster, not by eye. */
.gcluster-chip {
  display: inline-flex; align-items: center; gap: .3em;
  background: color-mix(in srgb, var(--clc, var(--river)) 16%, #fff);
  color: color-mix(in srgb, var(--clc, var(--river)) 66%, #1A1A1A);
  border-radius: 999px; padding: .24em .82em;
  font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; flex: none;
}
.guide-meta { font-size: .86rem; color: var(--ink-soft); margin: 4px 0 14px; }
.toc {
  background: var(--bg-soft); border-radius: var(--radius); padding: 18px 22px;
  margin: 26px 0 8px; border-left: 5px solid var(--clc, var(--river));
}
.toc-head { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pine-deep); margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 30px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }
.toc a { text-decoration: none; font-weight: 600; font-size: .93rem; }@media (hover: hover){.toc a:hover{ text-decoration: underline; }}
@media (max-width: 560px) { .toc ol { columns: 1; } }
.takeaways {
  background: #fff; border: 2px solid var(--pine-deep); border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--river-soft); padding: 22px 26px; margin-top: 44px;
}
.takeaways h2 { margin-top: 0; }
.takeaways ul { margin: 0; padding-left: 1.2em; }
.takeaways li { margin-bottom: 10px; }
.takeaways li::marker { color: var(--marigold); font-weight: 800; }
.guide-card { position: relative; border-top: 5px solid var(--clc, var(--river)); }
.guide-emoji { font-size: 1.9rem; line-height: 1; display: inline-block; margin: 6px 0 10px; transition: transform .4s var(--ease-spring); }@media (hover: hover){.guide-card:hover .guide-emoji{ transform: scale(1.2) rotate(-6deg); }}
.guide-artrow { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.guide-artrow .guide-motif, .guide-artrow .guide-emoji { margin: 0; }
.guide-badge { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(12,12,12,.18); transition: transform .4s var(--ease-spring); }@media (hover: hover){.guide-card:hover .guide-badge{ transform: scale(1.08) rotate(4deg); }}
.guide-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* Compact guide tiles (homepage 'latest guides' row) */
.guide-mini-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.guide-mini { display: flex; flex-direction: column; gap: 7px; padding: 15px 15px 16px; border: 1px solid var(--sage); border-radius: 14px; background: var(--card); text-decoration: none; color: inherit; transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), border-color .25s; }@media (hover: hover){.guide-mini:hover{ transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,20,20,.08); border-color: var(--marigold); }}
.guide-mini .guide-motif { width: 42px; height: 42px; margin: 0; }@media (hover: hover){.guide-mini:hover .guide-motif{ transform: scale(1.1) rotate(-4deg); }}
.guide-mini .guide-emoji { font-size: 1.7rem; }
.guide-mini-title { font-size: .95rem; font-weight: 700; line-height: 1.28; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guide-mini-meta { margin-top: auto; font-size: .72rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) { .guide-mini-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .guide-mini-row { grid-template-columns: repeat(2, 1fr); } }
.guide-card .guide-date { font-size: .8rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; }
.guide-card .card-arrow { position: static; opacity: 1; transform: none; }
.guide-new {
  display: inline-block; background: var(--marigold); color: var(--pine-deep);
  font-weight: 800; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .1em .5em; border-radius: 999px; vertical-align: middle;
}
.related-guides { margin-top: 52px; }
.guide-article .callout { border-left-color: var(--clc, var(--river)); }
#guides-grid .guide-card[hidden] { display: none; }

/* ---------- images: event thumbs, eat cards, popup photos ---------- */
.event-row.has-thumb { position: relative; padding-right: 112px; }
.event-thumb { position: absolute; top: 12px; right: 12px; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; background: var(--bg-soft); border: 1px solid rgba(12,12,12,.12); }
.event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .event-row.has-thumb { padding-right: 16px; padding-top: 86px; } .event-thumb { width: calc(100% - 24px); height: 70px; } }
.eat-img { height: 120px; border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: var(--bg-soft); }
.eat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }@media (hover: hover){.card:hover .eat-img img{ transform: scale(1.05); }}

/* Ask Freddy band, home-page AI entry point */
.ask-band {
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(240,176,48,.18), transparent 60%),
    radial-gradient(90% 120% at 0% 120%, rgba(160,110,20,.14), transparent 60%),
    var(--pine-deep);
  color: #F4EFE4; border-radius: var(--radius); position: relative; overflow: hidden;
  margin: 8px 0;
}
.ask-band-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(22px, 3.5vw, 44px); align-items: center; }
.ask-eyebrow { font-weight: 800; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold); margin: 0 0 10px; }
.ask-eyebrow .spark { display: inline-block; margin-right: 3px; }
.ask-band h2 { color: #fff; margin: 0 0 12px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.ask-lede { color: #D8D3C8; font-size: clamp(1rem, 1.7vw, 1.12rem); max-width: 38em; margin: 0 0 20px; }
.ask-big { display: flex; gap: 10px; max-width: 560px; margin-bottom: 16px; flex-wrap: wrap; }
.ask-big input {
  flex: 1; min-width: 220px; font: inherit; font-size: 1.02rem; color: var(--pine-deep);
  background: #fff; border: 2px solid transparent; border-radius: 999px; padding: .8em 1.2em;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.5); transition: border-color .2s, box-shadow .2s;
}
.ask-big input::placeholder { color: #8F897C; }
.ask-big input:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 4px rgba(240,176,48,.28); }
.ask-big button {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; cursor: pointer;
  background: var(--marigold); color: var(--pine-deep); border: 0; border-radius: 999px; padding: .78em 1.4em;
  transition: transform .2s var(--ease-spring), background .2s, box-shadow .2s; box-shadow: var(--shadow);
}@media (hover: hover){.ask-big button:hover{ transform: translateY(-2px); background: #FFCB5C; box-shadow: var(--shadow-lift); }}
.ask-big button .fab-icon { display: inline-flex; }
.ask-big button .fab-icon .logo-mark circle { fill: var(--pine-deep); }
.ask-big button .fab-icon .logo-mark path { stroke: var(--pine-deep); }
.ask-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ask-chips-label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A79F8E; margin-right: 2px; }
.ask-chip {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; color: #F4EFE4;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(244,239,228,.28); border-radius: 999px;
  padding: .5em 1em; transition: background .2s, border-color .2s, transform .2s var(--ease-out), color .2s;
}@media (hover: hover){.ask-chip:hover{ background: var(--marigold); border-color: var(--marigold); color: var(--pine-deep); transform: translateY(-2px); }}
.ask-phone-card {
  --wp-ink: #F4EFE4; --wp-screen: #0B0820; --wp-teal: #37E0C8; --wp-pink: #FF5FA2; --wp-gold: #FFC93E;
  display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--wp-ink);
  position: relative; overflow: hidden; border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(255,95,162,.24), transparent 60%),
    radial-gradient(90% 120% at 0% 120%, rgba(55,224,200,.20), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px),
    #150F2B;
  border: 1.5px solid rgba(244,239,228,.22);
  padding: 28px 24px 22px;
  box-shadow: 5px 5px 0 var(--wp-pink), 10px 10px 0 rgba(55,224,200,.42);
  transition: transform .35s var(--ease-spring), box-shadow .35s;
}
.ask-phone-card::before { /* checkerboard rail, Memphis-issue */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: conic-gradient(var(--wp-gold) 25%, #0B0820 0 50%, var(--wp-gold) 0 75%, #0B0820 0);
  background-size: 10px 10px;
}@media (hover: hover){.ask-phone-card:hover{ transform: translateY(-4px); box-shadow: 7px 7px 0 var(--wp-pink), 14px 14px 0 rgba(55,224,200,.5); }}
.ask-phone-mascot { height: clamp(74px, 15vw, 96px); width: auto; align-self: flex-start; flex: 0 0 auto; display: block; margin: -6px 0 8px -2px; transform-origin: 50% 92%; animation: wp-bob 2.6s ease-in-out infinite; filter: drop-shadow(0 7px 11px rgba(0,0,0,.42)); }
@keyframes wp-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@media (hover: hover) { .ask-phone-card:hover .ask-phone-mascot { animation-duration: 1.1s; } }
@media (prefers-reduced-motion: reduce) { .ask-phone-mascot { animation: none; } }
.ask-phone-kicker { font-size: .84rem; color: var(--wp-teal); font-weight: 800; letter-spacing: .03em; }
.ask-phone-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.75vw, 1.32rem); line-height: 1.1; letter-spacing: 0;
  color: var(--wp-gold); margin: 2px 0; text-shadow: 2px 2px 0 rgba(11,8,32,.55);
}
.ask-phone-num {
  align-self: flex-start; margin: 10px 0 8px;
  font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  font-weight: 700; font-size: 1.42rem; letter-spacing: .04em; color: #A8FF60;
  background: var(--wp-screen); border: 1.5px solid rgba(168,255,96,.35); border-radius: 8px;
  padding: .22em .5em; text-shadow: 0 0 8px rgba(168,255,96,.55);
  box-shadow: inset 0 0 14px rgba(0,0,0,.85);
}
.ask-phone-note {
  font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8A83A8;
}
.ask-phone-go { margin-top: 12px; font-weight: 800; font-size: .86rem; color: var(--wp-gold); transition: transform .3s var(--ease-out); }@media (hover: hover){.ask-phone-card:hover .ask-phone-go{ transform: translateX(4px); }}
@media (max-width: 780px) { .ask-band-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ask-phone-card, .ask-phone-emoji, .ask-chip, .ask-big button { transition: none !important; animation: none !important; } }

/* postcard rack, the "for visitors" router */
.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.postcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1.5px solid rgba(12,12,12,.16); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); rotate: var(--tilt, 0deg);
  transition: rotate .45s var(--ease-spring), transform .45s var(--ease-spring), box-shadow .35s, border-color .3s;
}@media (hover: hover){.postcard:hover{ rotate: 0deg; transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--pc); }}.postcard:focus-visible{ rotate: 0deg; transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--pc); }
.postcard:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
.pc-art {
  position: relative; display: grid; place-content: center; height: 128px;
  background:
    radial-gradient(120% 150% at 8% -20%, color-mix(in srgb, var(--pc) 20%, transparent), transparent 55%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--pc) 7%, transparent) 0 1.5px, transparent 1.5px 12px),
    color-mix(in srgb, var(--pc) 8%, #FFFDF6);
  border-bottom: 1.5px dashed color-mix(in srgb, var(--pc) 40%, transparent);
}
.pc-art .motif { width: 78px; height: 78px; }
.pc-stamp {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 40px;
  display: grid; place-content: center; background: var(--pc); color: #fff;
  border-radius: 4px; outline: 2px dashed #fff; outline-offset: -4px;
  rotate: 4deg; transition: rotate .4s var(--ease-spring), transform .4s var(--ease-spring);
  box-shadow: 2px 2px 0 rgba(12,12,12,.15);
}@media (hover: hover){.postcard:hover .pc-stamp{ rotate: -6deg; transform: scale(1.12); }}
.pc-mark { position: absolute; left: 10px; top: 12px; color: var(--pc); opacity: .45; transition: opacity .3s, transform .5s var(--ease-out); }@media (hover: hover){.postcard:hover .pc-mark{ opacity: .8; transform: translateX(4px); }}
.pc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pc-eyebrow {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: .92rem; color: var(--pc);
}
.pc-body h3 { margin: 0 0 2px; }
.pc-body p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 10px; }
.pc-go {
  margin-top: auto; font-weight: 700; font-size: .86rem; color: var(--pc);
  display: inline-flex; align-items: center; gap: 6px;
}
.pc-go b { transition: transform .3s var(--ease-out); }@media (hover: hover){.postcard:hover .pc-go b{ transform: translateX(5px); }}
@media (max-width: 960px) { .pc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pc-grid { grid-template-columns: 1fr; } .postcard { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .postcard, .pc-stamp, .pc-mark, .pc-go b { transition: none !important; } }

.swag-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.swag-card { padding: 14px 14px 20px; }
.swag-img { display: block; aspect-ratio: 1 / 1; border-radius: calc(var(--radius) - 8px); overflow: hidden; background: var(--bg-soft); margin-bottom: 14px; }
.swag-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }@media (hover: hover){.card:hover .swag-img img{ transform: scale(1.045); }}
.swag-card h3 { margin-bottom: .25em; }
.swag-lg { grid-column: span 4; }
.swag-sm { grid-column: span 3; padding: 10px 10px 14px; }
.swag-sm .swag-img { margin-bottom: 10px; border-radius: calc(var(--radius) - 10px); }
.swag-sm h3 { font-size: 1.02rem; margin-bottom: 0; }
@media (max-width: 980px) {
  .swag-lg { grid-column: span 6; }
  .swag-sm { grid-column: span 4; }
}
@media (max-width: 620px) {
  .swag-grid { gap: 10px; }
  .swag-lg { grid-column: span 12; }
  .swag-sm { grid-column: span 6; }
}
.pop-img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.pop-credit { font-size: .62rem; color: var(--ink-soft); margin: -4px 0 6px; }

/* ---------- things-to-do command centre ---------- */
.act-grid .act-card[hidden] { display: none; }
.act-card { overflow: hidden; }
.act-card .act-emoji {
  font-size: 2rem; line-height: 1; display: inline-block; margin-bottom: 10px;
  transition: transform .45s var(--ease-spring);
}@media (hover: hover){.act-card:hover .act-emoji{ transform: scale(1.35) rotate(-8deg); }}
.act-card::after {
  content: ""; position: absolute; right: -22px; bottom: -30px; width: 110px; height: 110px;
  background: radial-gradient(circle, var(--marigold-soft) 0%, transparent 70%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}@media (hover: hover){.act-card:hover::after{ opacity: 1; }}@media (hover: hover){.act-card:hover{ transform: translateY(-5px) rotate(-.5deg); }}
.act-season {
  position: absolute; top: 14px; right: 14px; font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; background: var(--river-soft); color: var(--river);
  border-radius: 999px; padding: .25em .7em;
}
.act-card.eat-winner { border-color: var(--marigold); box-shadow: 0 0 0 4px var(--marigold-soft), var(--shadow-lift); animation: winner-pop .6s var(--ease-spring); }

.season-tabs { display: inline-flex; margin-bottom: 18px; }
.season-panel { display: none; }
.season-panel.on { display: block; animation: panel-fade .45s var(--ease-out); }
@keyframes panel-fade { from { opacity: 0; transform: translateY(10px); } }
.season-item h3 { margin-bottom: .2em; }

.hub-stats { margin-top: 8px; }
.hub-stats .stat b { font-variant-numeric: tabular-nums; }

.rail {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 2px 8px;
}
.rail-card {
  display: inline-flex; align-items: center; gap: .55em;
  background: #fff; border: 2px solid var(--pine-deep); border-radius: var(--radius-sm);
  padding: .65em 1.25em; font-weight: 700; text-decoration: none; color: var(--pine-deep);
  box-shadow: 3px 3px 0 var(--river-soft);
  transition: transform .25s var(--ease-spring), box-shadow .25s, background .2s;
}@media (hover: hover){.rail-card:hover{ transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--river-soft); background: var(--marigold-soft); color: var(--pine-deep); }}
.rail-card span { font-size: 1.15rem; }

/* animated icons on the things-to-do tiles (activity grid, seasonal cards, guide rail) */
.act-icon { display: block; margin-bottom: 4px; }
.act-icon .motif { width: 62px; height: 62px; transition: transform .45s var(--ease-spring); }@media (hover: hover){.act-card:hover .act-icon .motif{ transform: scale(1.12) rotate(-4deg); }}
.heritage-icon { display: block; margin-bottom: 10px; }
.heritage-icon .motif { width: 64px; height: 64px; transition: transform .4s var(--ease-spring); }@media (hover: hover){.card:hover .heritage-icon .motif{ transform: scale(1.12) rotate(-4deg); }}
.season-item { display: flex; gap: 12px; align-items: flex-start; }
.season-icon { flex: none; }
.season-icon .motif { width: 46px; height: 46px; }
.season-item-body { min-width: 0; }
.rail-icon { display: inline-flex; align-items: center; }
.rail-icon .motif { width: 26px; height: 26px; }

/* ---------- Freddy the Radio Wonder Phone, full '90s cut ---------- */
.wonderphone {
  --wp-ink: #F4EFE4; --wp-bg: #150F2B; --wp-screen: #0B0820;
  --wp-teal: #37E0C8; --wp-pink: #FF5FA2; --wp-gold: #FFC93E;
  margin-top: 22px; position: relative; overflow: hidden; border-radius: var(--radius);
  color: var(--wp-ink);
  background:
    radial-gradient(900px 400px at 84% -12%, rgba(255,95,162,.20), transparent 62%),
    radial-gradient(760px 360px at -8% 112%, rgba(55,224,200,.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    var(--wp-bg);
  padding: clamp(46px, 6vw, 66px) clamp(24px, 4vw, 44px);
  box-shadow: 7px 7px 0 var(--wp-pink), 14px 14px 0 rgba(55,224,200,.4);
}
.wonderphone p { color: #CFC9DF; position: relative; }
/* checkerboard rails */
.wp-rail {
  position: absolute; left: 0; right: 0; height: 14px;
  background: conic-gradient(var(--wp-gold) 25%, var(--wp-screen) 0 50%, var(--wp-gold) 0 75%, var(--wp-screen) 0);
  background-size: 14px 14px;
}
.wp-rail-top { top: 0; }
.wp-rail-bot { bottom: 0; filter: hue-rotate(0deg); }
/* Memphis confetti */
.wp-confetti { position: absolute; inset: 0; pointer-events: none; }
.wpc { position: absolute; opacity: .55; }
.wpc-squig { top: 30px; right: 7%; color: var(--wp-pink); animation: m-wavex 5s ease-in-out infinite; }
.wpc-zag { bottom: 40px; left: 5%; color: var(--wp-teal); animation: m-sway 5.4s ease-in-out infinite; transform-origin: 50% 100%; }
.wpc-tri {
  top: 44%; right: 3.4%; width: 0; height: 0; border-left: 10px solid transparent;
  border-right: 10px solid transparent; border-bottom: 18px solid var(--wp-gold);
  animation: m-sway 4.5s ease-in-out .4s infinite; transform: rotate(14deg);
}
.wpc-ringo { top: 26%; left: 3.2%; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--wp-teal); animation: m-float 4.4s ease-in-out infinite; }
.wpc-star { bottom: 24%; right: 11%; color: var(--wp-gold); font-size: 1rem; animation: m-spin 12s linear infinite; display: inline-block; }
.wpc-check {
  top: 34px; left: 10%; width: 32px; height: 32px; opacity: .35;
  background: conic-gradient(var(--wp-pink) 25%, transparent 0 50%, var(--wp-pink) 0 75%, transparent 0);
  background-size: 16px 16px; transform: rotate(-12deg); animation: m-float 6s ease-in-out .8s infinite;
}
.wp-grid { display: flex; gap: clamp(20px, 4.5vw, 52px); align-items: center; position: relative; }
/* hotline sticker + mixtape */
.wp-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.wp-sticker { position: relative; width: 170px; height: 170px; display: grid; place-content: center; }
.wp-ringtext { position: absolute; inset: 0; animation: m-spin 26s linear infinite reverse; }
.wp-ringtext text { fill: var(--wp-ink); font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .22em; opacity: .85; }
.wp-sticker-core {
  width: 96px; height: 96px; border-radius: 50%; background: var(--wp-pink); color: var(--wp-screen);
  display: grid; place-content: center; transform: rotate(-8deg);
  border: 3px solid var(--wp-ink); box-shadow: 4px 4px 0 rgba(55,224,200,.55);
  animation: m-ring-kf 3.4s ease-in-out infinite; transform-origin: 50% 90%;
}
.wp-tape { filter: drop-shadow(5px 5px 0 rgba(255,95,162,.35)); transform: rotate(2.5deg); }
.wp-tape text { font-family: var(--font-body); }
.wp-reel { transform-box: fill-box; transform-origin: center; animation: m-spin 4.5s linear infinite; }
/* badge + layered sticker type */
.wp-badge {
  display: inline-block; background: #37E0C8; color: #0B0820 !important;
  font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .45em 1em; border-radius: 4px; transform: rotate(-1.6deg);
  box-shadow: 3px 3px 0 #FF5FA2; margin: 0 0 16px;
}
.wp-title { margin: 0 0 18px; }
.wp-t-pre {
  display: inline-block; font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem); color: var(--wp-teal);
  transform: rotate(-2deg); margin-bottom: 4px; letter-spacing: .02em;
  text-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.wp-t-main { display: block; transform: rotate(-1.2deg); }
.wp-word {
  display: block; text-transform: uppercase; font-weight: 900;
  font-family: var(--font-display); font-size: clamp(2.5rem, 6.6vw, 4.7rem);
  line-height: .94; letter-spacing: .01em; color: var(--wp-gold);
  /* Layered 3D offset via text-shadow (em-scaled) so the pink/teal ghost layers
     stay glued to the text when it wraps on narrow screens. The old approach used
     absolutely-positioned ::before/::after duplicates, which detached from the
     wrapped lines on mobile and overlapped the next word. */
  text-shadow: 0.055em 0.055em 0 var(--wp-pink), 0.11em 0.11em 0 var(--wp-teal);
}
/* FM tuner, needle parked on memory */
.wp-tuner { position: relative; max-width: 440px; margin: 4px 0 18px; padding-top: 14px; }
.wp-freqs { display: flex; justify-content: space-between; font-size: .68rem; letter-spacing: .1em; color: #8A83A8; font-weight: 700; margin-bottom: 3px; }
.wp-band {
  display: block; height: 12px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(55,224,200,.55) 0 1.5px, transparent 1.5px 10%);
  background-size: 5% 100%; border: 1px solid rgba(55,224,200,.3);
  box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}
.wp-needle {
  position: absolute; left: 86.5%; top: 24px; height: 22px; width: 3px;
  background: var(--wp-pink); border-radius: 2px; box-shadow: 0 0 10px rgba(255,95,162,.9);
  animation: wp-tune 7s ease-in-out infinite;
}
@keyframes wp-tune { 0%, 88%, 100% { transform: translateX(0); } 92% { transform: translateX(-5px); } 96% { transform: translateX(3px); } }
.wp-freq-led {
  display: inline-block; margin-top: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  color: var(--wp-teal); background: var(--wp-screen);
  border: 1px solid rgba(55,224,200,.45); border-radius: 4px; padding: .35em .8em;
  text-shadow: 0 0 7px rgba(55,224,200,.8);
}
/* coiled cord divider */
.wp-cord { display: block; max-width: 100%; height: auto; color: var(--wp-pink); opacity: .65; margin: 14px 0 6px; }
/* caller-ID LCD + starburst */
.wp-callrow { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 8px 0 14px; }
.wp-lcd {
  display: inline-block; text-decoration: none;
  font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  font-weight: 700; font-size: clamp(1.6rem, 4.4vw, 2.5rem); letter-spacing: .06em;
  color: #A8FF60; background: #0B0820;
  border: 2px solid rgba(244,239,228,.18); border-radius: 12px; padding: .32em .6em;
  box-shadow: inset 0 0 20px rgba(0,0,0,.85), 0 0 18px rgba(168,255,96,.14), 4px 4px 0 rgba(255,95,162,.4);
  text-shadow: 0 0 9px rgba(168,255,96,.6);
  transition: filter .2s, transform .2s var(--ease-spring);
}@media (hover: hover){.wp-lcd:hover{ color: #D2FF95; text-shadow: 0 0 4px rgba(206,255,150,.95), 0 0 14px rgba(168,255,96,.5); transform: translateY(-2px); }}
.wp-burst {
  width: 92px; height: 92px; flex: none; display: grid; place-content: center;
  background: #FF5FA2; color: #fff;
  clip-path: polygon(50% 0%, 59% 12%, 72% 5%, 75% 19%, 90% 18%, 86% 32%, 100% 38%, 89% 50%, 100% 62%, 86% 68%, 90% 82%, 75% 81%, 72% 95%, 59% 88%, 50% 100%, 41% 88%, 28% 95%, 25% 81%, 10% 82%, 14% 68%, 0% 62%, 11% 50%, 0% 38%, 14% 32%, 10% 18%, 25% 19%, 28% 5%, 41% 12%);
  transform: rotate(-10deg); animation: m-stamp-kf 4.6s ease-in-out infinite;
  filter: drop-shadow(4px 4px 0 rgba(55,224,200,.55));
}
.wp-burst i { font-style: normal; font-weight: 900; font-size: .82rem; line-height: 1.05; text-align: center; letter-spacing: .05em; }
/* VHS-OSD status line */
.wp-status.wp-onair {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  font-size: .74rem; letter-spacing: .14em;
  color: #B4ADC9 !important; border: 1.5px solid rgba(244,239,228,.22); border-radius: 6px;
  padding: .55em 1em; background: rgba(11,8,32,.75);
}
.wp-lamp { width: 10px; height: 10px; border-radius: 50%; background: #4A4462; box-shadow: inset 0 0 3px rgba(0,0,0,.5); flex: none; }
.wp-status.live { color: var(--wp-teal) !important; }
.wp-status.live .wp-lamp { background: #FF4D3D; box-shadow: 0 0 10px rgba(255,77,61,.9); animation: wp-blink 1.6s ease-in-out infinite; }
@keyframes wp-blink { 50% { opacity: .45; } }
@media (max-width: 720px) {
  .wp-grid { flex-direction: column; text-align: center; }
  .wp-side { flex-direction: row; align-items: center; gap: 10px; }
  .wp-tape { width: 150px; }
  .wp-callrow { justify-content: center; }
  .wp-tuner { margin-left: auto; margin-right: auto; }
  .wp-badge { transform: rotate(0); }
  .wp-cord { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wonderphone *, .wonderphone *::before, .wonderphone *::after { animation: none !important; }
}

/* ---------- community directory ---------- */
.cg-head { margin: 30px 0 12px; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cg-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--card, #fff); border: 1.5px solid color-mix(in srgb, var(--pine) 12%, transparent);
  border-radius: 12px; padding: 14px 16px; transition: transform .18s var(--ease-out), border-color .2s, box-shadow .2s;
}@media (hover: hover){.cg-card:hover{ transform: translateY(-2px); border-color: var(--river); box-shadow: 0 10px 24px -14px rgba(12,12,12,.3); }}
.cg-name { font-weight: 700; color: var(--pine-deep); line-height: 1.3; }
.cg-meta { font-size: .78rem; color: var(--river); font-weight: 700; letter-spacing: .03em; }
.cg-blurb { font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------- misc ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
hr.rule { border: 0; height: 2px; background: linear-gradient(90deg, var(--marigold), transparent); margin: 40px 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row a { background: var(--card); border: 1.5px solid color-mix(in srgb, var(--pine) 15%, transparent); border-radius: 999px; padding: .45em 1em; text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--ink-soft); transition: all .2s; }@media (hover: hover){.pill-row a:hover{ border-color: var(--pine); color: var(--pine-deep); transform: translateY(-1px); }}

/* 404 */
.err-page { text-align: center; padding: 90px 20px 110px; }
.err-page h1 { font-size: clamp(3rem, 10vw, 6rem); }

/* ---------- responsive tweaks ---------- */
@media (max-width: 560px) {
  .event-row { grid-template-columns: 1fr; }
  .event-badges { grid-column: 1; grid-row: auto; }
  .chat-fab .fab-label { display: none; }
  .chat-fab { padding: 12px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { flex: none; width: auto; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-word, .ticker a { opacity: 1; transform: none; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .chat-fab, #freddy-chat, .filters, .search-row { display: none !important; }
  body { background: #fff; }
}

/* ---------- community event badge ---------- */
.badge-community { background: color-mix(in srgb, var(--marigold) 20%, #fff); color: #8A5A00; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marigold) 45%, #fff); }

/* ---------- submit-event CTA (on the calendars) ---------- */
.submit-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--marigold-soft); border: 1px solid color-mix(in srgb, var(--marigold) 40%, #fff);
  border-radius: 16px; padding: 18px 22px; margin: 22px 0; }
.submit-cta-h { font-family: var(--font-display); font-weight: 800; color: var(--pine-deep); margin: 0; font-size: 1.08rem; }
.submit-cta-p { margin: .2em 0 0; color: var(--ink-soft); font-size: .95rem; }
.submit-cta .btn-primary { white-space: nowrap; }

/* ---------- submit-event form ---------- */
.hf-form { margin-top: 8px; }
.hf-form fieldset { border: 1px solid var(--line, #E7E0D2); border-radius: 16px; padding: 20px 22px; margin: 0 0 20px; }
.hf-form legend { font-family: var(--font-display); font-weight: 800; color: var(--pine-deep); padding: 0 8px; font-size: 1.05rem; }
.hf-form .field { margin: 0 0 14px; }
.hf-form .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.hf-form label { display: block; font-weight: 600; color: var(--pine-deep); margin-bottom: 5px; font-size: .95rem; }
.hf-form .req { color: #B23A2E; }
.hf-form .opt { color: var(--ink-soft); font-weight: 400; font-size: .85em; }
.hf-form input[type=text], .hf-form input[type=date], .hf-form input[type=email], .hf-form input[type=url], .hf-form select, .hf-form textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #CBD3CE; border-radius: 10px; padding: 11px 12px;
  font: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.hf-form input:focus, .hf-form select:focus, .hf-form textarea:focus {
  outline: none; border-color: var(--marigold); box-shadow: 0 0 0 3px var(--marigold-soft); }
.hf-form textarea { resize: vertical; min-height: 92px; }
.hf-form .field-check { display: flex; align-items: center; }
.hf-form .field-check label { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; }
.hf-form .field-check input { width: 18px; height: 18px; accent-color: var(--marigold); }
.hf-form .field-help { color: var(--ink-soft); font-size: .86rem; margin: 6px 0 0; }
.hf-form .cf-turnstile { margin: 4px 0 18px; }
.hf-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hf-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.form-status.ok { background: #E7F4EC; color: #1E6B45; border: 1px solid #B6E0C6; }
.form-status.err { background: #FBEBE8; color: #A5372B; border: 1px solid #F0C4BC; }

/* ---------- guide-card illustrations (replace the emoji) ---------- */
.guide-motif { width: 64px; height: 64px; display: block; margin: 4px 0 8px; filter: drop-shadow(0 3px 8px rgba(12,12,12,.12)); transition: transform .4s var(--ease-spring); }@media (hover: hover){.guide-card:hover .guide-motif{ transform: scale(1.1) rotate(-4deg); }}

/* ---------- guides filter: topic layer ---------- */
.filter-div { align-self: center; width: 1px; height: 22px; background: color-mix(in srgb, var(--pine) 22%, transparent); margin: 0 3px; }
.chip-topic { background: color-mix(in srgb, var(--marigold) 10%, var(--card)); border-color: color-mix(in srgb, var(--marigold) 38%, transparent); }@media (hover: hover){.chip-topic:hover{ border-color: var(--marigold); }}
.chip-topic.on { background: var(--pine); border-color: var(--pine); color: #fff; }
@media (max-width: 560px) { .filter-div { display: none; } }


/* ---- guides hub: search + start-here rail (red-team item 2) ---- */
.start-here { margin: 4px 0 22px; }
.start-here .rail-title { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; font-weight: 700; }
.start-here .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scroll-snap-type: x mandatory; padding: 2px 2px 12px; scrollbar-width: thin; }
.start-here .rail > * { scroll-snap-align: start; margin: 0 !important; }
.guides-search-wrap { position: relative; margin: 0 0 6px; }
.guides-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-soft); pointer-events: none; }
.guides-search { width: 100%; padding: 15px 16px 15px 46px; font-size: 1.05rem; font-family: var(--font-body); border: 2px solid color-mix(in srgb, var(--pine) 18%, transparent); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.guides-search::placeholder { color: var(--ink-soft); opacity: .8; }
.guides-search:focus { outline: none; border-color: var(--river); box-shadow: 0 0 0 3px color-mix(in srgb, var(--river) 22%, transparent); }
.guides-count { display: block; margin: 8px 2px 0; font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.guides-empty { text-align: center; padding: 46px 20px; color: var(--ink-soft); font-size: 1.05rem; }


/* ---- reading progress + TOC scroll-spy (red-team item 5) ---- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 300; pointer-events: none; }
.read-progress > span { display: block; height: 100%; width: 0; background: var(--marigold); }
.toc a.active { color: var(--river); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .read-progress > span { transition: width .12s linear; } }


/* ---- shop: garment subtext lines (red-team item 6) ---- */
.shop-lines .lines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin-top: 18px; }
.line-card { background: var(--pine-deep); color: var(--bg); border-radius: var(--radius-sm); padding: 24px 18px; display: flex; flex-direction: column; gap: 7px; text-align: center; box-shadow: var(--shadow); min-height: 130px; justify-content: center; }
.line-logo { font-family: var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .02em; color: var(--marigold); text-transform: none; }
.line-main { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.24; }
.line-sub { font-size: .78rem; color: color-mix(in srgb, var(--bg) 66%, transparent); }


/* ---- per-event add-to-calendar (red-team item 3) ---- */
.event-cal { display: inline-block; margin-top: 9px; font-size: .82rem; font-weight: 700; color: var(--river); text-decoration: none; }@media (hover: hover){.event-cal:hover{ text-decoration: underline; }}


/* ---- events by neighbourhood (hyperlocal) ---- */
.event-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.event-areas[hidden] { display: none; }
.area-lead { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-right: 2px; }
.areachip { font-size: .85rem; }

/* ---- EN/FR language toggle ---- */
.lang-toggle { display: inline-flex; align-items: stretch; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; margin-left: 10px; line-height: 1; align-self: center; }
.lang-toggle .lang-opt { padding: 5px 10px; font-family: var(--font-body); font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; transition: background .18s ease, color .18s ease; }
.lang-toggle .lang-opt.on { background: var(--ink); color: #fff; }@media (hover: hover){.lang-toggle .lang-opt:not(.on):hover{ background: rgba(26,26,26,.08); color: var(--ink); }}
.mobile-nav .lang-toggle { margin: 8px 0 0; }

.eat-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}@media (hover: hover){.eat-link:hover{border-bottom-color:#B07E1E;color:#B07E1E}}.eat-link:focus{border-bottom-color:#B07E1E;color:#B07E1E}
.eat-link::after{content:'\2197';font-size:.7em;margin-left:2px;opacity:.5}

.guide-fig { margin: 8px 0 22px; }
.guide-fig img { width: 100%; height: auto; border-radius: 12px; border: 1.5px solid rgba(12,12,12,.16); box-shadow: var(--shadow); display: block; }
.guide-fig figcaption { margin-top: 8px; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }
.fig-credit { opacity: .65; font-size: .92em; }

/* ---------- Fredericton's teams (sports page) ---------- */
.teams-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 22px 0 10px; }
@media (max-width: 720px) { .teams-grid { grid-template-columns: 1fr; } }
.team-card {
  position: relative; border: 1.5px solid rgba(12,12,12,.14); border-radius: 16px;
  background: var(--surface, #fff); padding: 20px 20px 18px; overflow: hidden;
  box-shadow: var(--shadow); border-top: 5px solid var(--tc1);
}
.team-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--tc1), var(--tc2)); }
.team-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.team-logo-wrap {
  flex: 0 0 auto; width: 84px; height: 84px; display: grid; place-items: center;
  border-radius: 14px; background: rgba(255,255,255,.9); border: 1.5px solid rgba(12,12,12,.10);
  padding: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.team-logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  animation: teamFloat 4.5s ease-in-out infinite; transform-origin: center; will-change: transform; }
.team-card:nth-child(2) .team-logo { animation-delay: -.6s; }
.team-card:nth-child(3) .team-logo { animation-delay: -1.2s; }
.team-card:nth-child(4) .team-logo { animation-delay: -1.8s; }@media (hover: hover){.team-card:hover .team-logo{ animation-duration: 1.8s; }}
@keyframes teamFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
/* monogram fallback (used until a real logo file is present) */
.team-logo-wrap--mono { background: linear-gradient(135deg, var(--tc1), var(--tc2)); border-color: transparent; }
.team-mono { font-weight: 900; font-size: 1.9rem; letter-spacing: .5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3);
  animation: teamFloat 4.5s ease-in-out infinite; }
.team-id h3 { margin: 0 0 2px; font-size: 1.25rem; line-height: 1.15; }
.team-sub { margin: 0; font-size: .82rem; font-weight: 700; color: var(--tc1); text-transform: uppercase; letter-spacing: .3px; }
.team-meta { margin: 3px 0 0; font-size: .85rem; color: var(--ink-soft); }
.team-blurb { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; }
.team-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.team-pill { font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--tc1) 12%, transparent); color: var(--tc1); border: 1px solid color-mix(in srgb, var(--tc1) 26%, transparent); }
.team-fold { border-top: 1px solid rgba(12,12,12,.10); }
.team-fold > summary { cursor: pointer; list-style: none; padding: 11px 2px; font-weight: 700; font-size: .92rem;
  display: flex; align-items: center; justify-content: space-between; }
.team-fold > summary::-webkit-details-marker { display: none; }
.team-fold > summary::after { content: "+"; font-size: 1.2rem; color: var(--tc1); font-weight: 700; transition: transform .2s; }
.team-fold[open] > summary::after { content: "\2013"; }
.team-fold-body { padding: 2px 0 14px; }
.team-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.team-tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft);
  border-bottom: 1.5px solid rgba(12,12,12,.16); padding: 5px 8px 5px 0; }
.team-tbl td { padding: 5px 8px 5px 0; border-bottom: 1px solid rgba(12,12,12,.07); vertical-align: top; }
.team-tbl--roster { display: block; max-height: 260px; overflow-y: auto; }
.team-note { margin: 10px 0 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
.team-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(12,12,12,.10); }
.team-links a { font-size: .85rem; font-weight: 700; color: var(--tc1); text-decoration: none; }@media (hover: hover){.team-links a:hover{ text-decoration: underline; }}
.team-foot { margin-top: 16px; font-size: .8rem; color: var(--ink-soft); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .team-logo, .team-mono { animation: none !important; } }

/* ---- landscape stacked team tiles (override) ---- */
.teams-grid { grid-template-columns: 1fr !important; gap: 20px; }
@media (min-width: 721px) {
  .team-card { display: grid; grid-template-columns: 250px 1fr; column-gap: 32px; align-items: start; padding: 26px 30px; }
  .team-top { grid-column: 1; grid-row: 1 / span 30; flex-direction: column; text-align: center; align-items: center; gap: 12px; margin-bottom: 0; padding-right: 26px; border-right: 1px solid rgba(12,12,12,.09); }
  .team-top .team-id { text-align: center; }
  .team-top .team-id h3 { font-size: 1.4rem; }
  .team-logo-wrap { width: 116px; height: 116px; border-radius: 18px; }
  .team-blurb, .team-pills, .team-fold, .team-links { grid-column: 2; }
  .team-blurb { margin-top: 2px; font-size: 1rem; }
  .team-links { border-top: 1px solid rgba(12,12,12,.10); }
  .team-tbl { font-size: .9rem; }
  .team-tbl--roster { max-height: 320px; }
}

/* Gone but not forgotten (historic teams) */
.teams-grid--legend { margin-top: 6px; }
.team-card--legend { filter: saturate(.95); background: linear-gradient(180deg, #fbf7ef, var(--surface, #fff)); }
.team-card--legend .team-blurb { margin-bottom: 0; }
@media (min-width: 721px) { .team-card--legend { grid-template-columns: 210px 1fr; } .team-card--legend .team-logo-wrap { width: 96px; height: 96px; } }

/* generic collapsible cards (itineraries, choose-your-own blocks) */
details.fold { border: 1.5px solid rgba(12,12,12,.14); border-radius: 12px; margin: 10px 0; background: var(--surface, #fff); overflow: hidden; }
details.fold > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--river, #B07E1E); font-weight: 700; transition: transform .2s ease; }
details.fold[open] > summary::after { content: "\2013"; }
details.fold[open] > summary { border-bottom: 1px solid rgba(12,12,12,.10); }
details.fold > div { padding: 6px 18px 16px; animation: foldIn .25s ease; }
@keyframes foldIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { details.fold > div { animation: none; } }

/* ---------- neighbourhoods compare board ---------- */
.nbhd-board h2 { margin-bottom: 4px; }
.nbhd-controls { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 22px; }
.nbhd-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nbhd-flabel { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft, #6b6357); min-width: 62px; }
.nbhd-chip { border: 1.5px solid var(--line, #E7E0D2); background: var(--card, #fff); color: var(--ink, #141414); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }@media (hover: hover){.nbhd-chip:hover{ border-color: var(--marigold, #F0B030); }}
.nbhd-chip.on { background: var(--ink, #141414); color: #fff; border-color: var(--ink, #141414); }
.nbhd-sortrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.nbhd-sortlab { font-size: .85rem; font-weight: 600; color: var(--ink-soft, #6b6357); }
.nbhd-sortrow select { font: inherit; font-size: .85rem; margin-left: 6px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line, #CBD3CE); background: #fff; color: var(--ink, #141414); }
.nbhd-count { font-size: .85rem; color: var(--ink-soft, #6b6357); }
.nbhd-clear, .nbhd-clear-inline { background: none; border: none; color: var(--gold, #B07E1E); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.nbhd-card { display: flex; flex-direction: column; gap: 8px; }
.nbhd-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.nbhd-card-top h3 { margin: 0; font-size: 1.08rem; }
.nbhd-side { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--gold, #B07E1E); white-space: nowrap; }
.nbhd-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--ink-soft, #6b6357); }
.nbhd-stats span { white-space: nowrap; }
.nbhd-blurb { margin: 2px 0; font-size: .92rem; line-height: 1.45; }
.nbhd-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.nbhd-tags span { font-size: .72rem; background: var(--marigold-soft, #FBEFD6); color: #7a5200; border-radius: 6px; padding: 2px 8px; }
.nbhd-empty { text-align: center; color: var(--ink-soft, #6b6357); padding: 26px 10px; }

/* ---------- neighbourhood guide "at a glance" strip ---------- */
.nbhd-glance { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; background: var(--card, #fff); border: 1px solid var(--line, #E7E0D2); border-left: 4px solid var(--marigold, #F0B030); border-radius: 12px; padding: 14px 18px; margin: 0 0 26px; }
.nbhd-glance .ng-item { display: flex; flex-direction: column; gap: 1px; }
.nbhd-glance .ng-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft, #6b6357); }
.nbhd-glance .ng-val { font-size: .95rem; font-weight: 600; color: var(--ink, #141414); }
.nbhd-glance .ng-cost { letter-spacing: 1px; }
.nbhd-glance .ng-dim { opacity: .26; }
.nbhd-glance .ng-best { flex: 1 1 190px; }
.nbhd-glance .ng-compare { margin-left: auto; align-self: center; font-weight: 700; font-size: .85rem; color: var(--gold, #B07E1E); text-decoration: none; white-space: nowrap; }@media (hover: hover){.nbhd-glance .ng-compare:hover{ text-decoration: underline; }}
@media (max-width: 560px) { .nbhd-glance .ng-compare { margin-left: 0; } }

/* ---------- team-logo event thumbnails ---------- */
.event-thumb.event-logo { background: #fff; border-color: rgba(12,12,12,.10); }
.event-thumb.event-logo img { object-fit: contain; padding: 8px; }

/* ---------- whole event tile clickable (stretched link) ---------- */
.event-row { position: relative; }
.event-row h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-sm); }
.event-row h3 a { position: static; }



/* ---------- live-feed: coming-up divider + date badge ---------- */
.feed-divider { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 10px; padding-top: 14px; border-top: 1px dashed rgba(12,12,12,.14); }
.badge-date { background: var(--marigold-soft); color: #8A6D2F; }

/* ---------- contextual merch tiles inside guides ---------- */
.guide-merch{margin:26px 0;padding:16px 18px 20px;background:var(--bg-soft,#f4efe2);border:1px solid var(--line,#e7ddc7);border-radius:16px}
.guide-merch .gm-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--clc,#b07a2b);margin:0 0 12px}
.gm-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gm-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#e7ddc7);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
@media(hover:hover){.gm-tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(60,45,20,.12)}}
.gm-img{aspect-ratio:1/1;background:#fff}.gm-img img{width:100%;height:100%;object-fit:contain;padding:7%}
.gm-name{font-size:13px;font-weight:600;line-height:1.25;padding:10px 12px 2px}
.gm-price{font-family:var(--serif,Georgia,serif);font-weight:600;padding:2px 12px 12px}
@media(max-width:640px){.gm-row{grid-template-columns:1fr 1fr}.gm-tile:nth-child(3){display:none}}

/* ---------- photo-spots interactive map ---------- */
.photo-map-wrap{margin:26px 0}
.photo-map{height:440px;border-radius:16px;overflow:hidden;border:1px solid var(--line,#e7ddc7);z-index:0}
.photo-map-note{font-size:12.5px;color:var(--muted,#6b6153);margin:8px 2px 0}
.pm-pin{background:transparent;border:0}
.pm-pin span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#b07a2b;color:#fff;font:700 13px/1 system-ui,-apple-system,sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.4);border:2px solid #fff}
.leaflet-popup-content{font:14px/1.45 system-ui,-apple-system,sans-serif;margin:12px 14px}
.leaflet-popup-content a{color:#b07a2b;font-weight:600;text-decoration:none}
@media(max-width:640px){.photo-map{height:360px}}

/* ---------- French nav: longer labels than EN; keep the bar from wrapping ---------- */
.nav-link{white-space:nowrap}
body[data-lang="fr"] .site-nav{gap:2px}
body[data-lang="fr"] .nav-link{padding:.5em .72em}
/* In the 880–1079 band the French labels overflow into a cramped two-line bar;
   fall back to the mobile menu there. English is unaffected. */
@media (min-width:880px) and (max-width:1079px){
  body[data-lang="fr"] .site-nav{display:none !important}
  body[data-lang="fr"] .nav-toggle{display:grid !important}
  body[data-lang="fr"] .mobile-nav:not([hidden]){display:grid !important}
}

/* ---------- FR "Radio Wonder Phone" stamp: APPELEZ/MAINTENANT! is longer than CALL/NOW! ---------- */
body[data-lang="fr"] .wp-burst{width:106px;height:106px}
body[data-lang="fr"] .wp-burst i{font-size:.56rem;letter-spacing:0;line-height:1.12}

/* ---------- site-wide shop announcement bar (dismissible; hidden on shop pages) ---------- */
.shop-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--pine);color:#f6f0e2;font-size:.9rem;font-weight:600;line-height:1.35;padding:9px 46px 9px 18px;text-align:center}
.shop-banner-in{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none;max-width:1050px}
.shop-banner .sb-dot{color:var(--marigold);flex:none;display:inline-flex;align-items:center}.shop-banner .sb-leaf{display:block}
.shop-banner b{color:var(--marigold);font-weight:700;white-space:nowrap}
.shop-banner-in:hover,.shop-banner-in:focus,.shop-banner-in:hover .sb-text{color:#f6f0e2}
@media(hover:hover){.shop-banner-in:hover b{text-decoration:underline}}
.shop-banner-x{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;color:#f6f0e2;opacity:.72;font-size:15px;line-height:1;cursor:pointer;border-radius:7px;display:grid;place-items:center}
@media(hover:hover){.shop-banner-x:hover{opacity:1;background:rgba(255,255,255,.14)}}
@media(max-width:560px){.shop-banner{font-size:.8rem;padding:8px 40px 8px 12px}.shop-banner .sb-dot{display:none}}

/* trademark mark on the header wordmark */
.brand-tm{align-self:flex-start;margin:3px 0 0 1px;font-size:.6rem;font-weight:700;line-height:1;color:var(--pine-deep);top:0}

/* Shop intro: two-column with trust bullets filling the space beside the copy */
.shop-intro-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
@media (max-width: 820px) { .shop-intro-row { grid-template-columns: 1fr; } }
.shop-trust { list-style: none; margin: 0; padding: 4px 2px; display: flex; flex-direction: column; justify-content: center; gap: 17px; }
.shop-trust li { display: flex; gap: 12px; align-items: flex-start; }
.st-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--marigold) 22%, #fff); color: var(--pine-deep); }
.st-ic svg { width: 21px; height: 21px; }
.st-tx { display: flex; flex-direction: column; gap: 1px; }
.st-tx b { font-weight: 800; font-size: .98rem; color: var(--ink); line-height: 1.25; }
.st-tx i { font-style: normal; font-size: .85rem; color: var(--ink-soft); line-height: 1.3; }

/* "Shop all merch" CTA card — a white card like the products, centered, dark visible text. */
.swag-cta { display: grid; place-items: center; text-align: center; text-decoration: none; padding: 24px; }
.swag-cta-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.swag-cta-mark { color: var(--marigold); line-height: 0; margin-bottom: 2px; }
.swag-cta h3 { color: var(--ink); font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 0; }
.swag-cta-sub { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 700; font-size: .95rem; color: var(--river); }
.swag-cta-sub b { transition: transform .3s var(--ease-spring); }
@media (hover: hover) { .swag-cta:hover .swag-cta-sub b { transform: translateX(4px); } }

/* ---------- Lifestyle / social-proof (Spotted around Fredericton) ---------- */
.life-band .life-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 4px; }
.life-shot { position: relative; display: block; border-radius: 16px; overflow: hidden; text-decoration: none; aspect-ratio: 3 / 4; border: 1.5px solid rgba(12,12,12,.10); box-shadow: var(--shadow, 0 3px 10px rgba(12,12,12,.10)); }
.life-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; transition: transform .5s var(--ease-spring, ease); }
@media (hover: hover) { .life-shot:hover img { transform: scale(1.045); } }
.life-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 15px; color: #fff; background: linear-gradient(transparent, rgba(12,12,12,.20) 40%, rgba(12,12,12,.66)); display: flex; flex-direction: column; gap: 1px; }
.life-cap b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.life-cap span { font-size: .85rem; opacity: .93; }
@media (max-width: 560px) { .life-band .life-grid { grid-template-columns: 1fr; } .life-shot { aspect-ratio: 4 / 5; } }

/* shop-page strip */
.life-strip-wrap { max-width: 1080px; margin: 6px auto 44px; padding: 0 clamp(16px, 4vw, 24px); }
.life-strip-eyebrow { font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold, #F0B030); margin: 0 0 12px; }
.life-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.life-sq { position: relative; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; border: 1.5px solid rgba(12,12,12,.10); }
.life-sq img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; display: block; }
.life-sq figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 12px; color: #fff; font-size: .8rem; font-weight: 700; background: linear-gradient(transparent, rgba(12,12,12,.62)); }
@media (max-width: 520px) { .life-strip { grid-template-columns: 1fr 1fr; } }

/* Live drop-in schedule (pools & skating service pages).
   Built on .v-row from the homepage vitals so the two live blocks on the site
   read as the same component; only the day heading and the venue/price
   annotations are new. */
.dropin { margin-top: 6px; }
.dropin-day {
  font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  color: var(--pine-deep); margin: 18px 0 6px; letter-spacing: .01em;
}
.dropin-day:first-child { margin-top: 4px; }
.dropin .v-row { padding: 5px 0; font-size: .92rem; align-items: flex-start; }
.dropin .v-row span { line-height: 1.35; }
.dropin-where { display: block; font-size: .82rem; color: var(--ink-soft); }
.dropin-cost { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.dropin-free { color: #1E8449; }
.dropin-none { font-size: .9rem; font-weight: 600; color: var(--pine-deep); margin: 4px 0 0; }
.dropin .v-note { margin-top: 12px; }

/* Event price and ticket link — from the capital-region detail-page crawl. */
.event-price { font-weight: 700; color: var(--pine-deep); white-space: nowrap; }
.event-tickets { margin: 6px 0 0; font-size: .85rem; font-weight: 600; }
.event-tickets a { color: var(--burnished, #B07E1E); text-decoration: none; }
.event-tickets a:hover { text-decoration: underline; }


/* Events: view toggle + secondary calendar */
.search-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.search-row #event-search{flex:1 1 220px}
.ev-views{display:inline-flex;gap:2px;margin-left:auto;background:var(--bg-soft);border:1px solid var(--ice);border-radius:999px;padding:3px}
.ev-view-btn{border:0;background:transparent;font:inherit;font-weight:700;font-size:.9rem;padding:6px 15px;border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.ev-view-btn.on{background:var(--ink);color:var(--bg)}
.events-calendar[hidden]{display:none}
.events-calendar{margin-top:6px}
.cal-head{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 16px}
.cal-title{font-family:var(--font-display);font-weight:800;font-size:1.2rem;min-width:11ch;text-align:center;text-transform:capitalize}
.cal-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--ice);background:var(--card);font-size:1.35rem;line-height:1;cursor:pointer;color:var(--ink)}
.cal-nav[disabled]{opacity:.3;cursor:default}
.cal-nav:not([disabled]):hover{border-color:var(--river);color:var(--river)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:2px}
.cal-cell{position:relative;min-height:clamp(46px,7vw,76px);border:1px solid var(--ice);border-radius:12px;background:var(--card);padding:7px 9px;color:var(--ink-soft)}
.cal-cell.is-blank{border:0;background:transparent}
.cal-cell.is-past{opacity:.4}
.cal-num{font-weight:700;font-size:.92rem}
.cal-cell.has-events{background:var(--marigold-soft);border-color:var(--marigold);color:var(--ink);cursor:pointer}
.cal-cell.has-events:hover{background:var(--river-soft)}
.cal-cell.is-today{box-shadow:inset 0 0 0 2px var(--river)}
.cal-cell.is-sel{outline:3px solid var(--ink);outline-offset:-1px}
.cal-count{position:absolute;right:6px;bottom:6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.cal-panel{margin-top:22px}
.cal-panel-h{font-family:var(--font-display);margin:0 0 12px;font-size:1.15rem;text-transform:capitalize}
.cal-panel-empty{color:var(--ink-soft);text-align:center;padding:22px;border:1px dashed var(--ice);border-radius:14px}
@media (max-width:520px){.cal-cell{min-height:44px;padding:5px 6px}.cal-count{right:3px;bottom:3px}.ev-views{margin-left:0}}

/* Wonder Phone walking mascot (replaces the ring-text sticker) */
.wp-mascot-walk{width:clamp(150px,21vw,215px);height:auto;display:block;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45));transform-origin:52% 88%;animation:wp-walk 2.4s ease-in-out infinite;will-change:transform}
@keyframes wp-walk{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-9px) rotate(2.5deg)}}
@media (max-width:720px){.wp-mascot-walk{width:clamp(120px,34vw,160px)}}
@media (prefers-reduced-motion:reduce){.wp-mascot-walk{animation:none}}

/* Turnstile inside the chat panel. interaction-only means it usually renders
   nothing at all, so the box must not reserve space until it actually has some. */
.chat-ts:empty{display:none}
.chat-ts{display:flex;justify-content:center;padding:0 14px 10px}


/* ================= Harvest 2026 takeover (TEMPORARY) =================
   Homepage hero + dual announcement bar, active while site.harvestTakeover
   is true in build.js. Safe to delete wholesale after Harvest week. */
.hv-hero{position:relative;overflow:hidden;--hv-berry:#9E1F63;--hv-plum:#43214E;--hv-pink:#E85D9E;padding-top:22px}
.hv-photo{position:absolute;top:0;bottom:0;left:0;width:min(30%,430px);-webkit-mask-image:linear-gradient(90deg,#000 32%,transparent 97%),linear-gradient(180deg,#000 calc(100% - 21.5vw),transparent calc(100% - 13.5vw));-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 32%,transparent 97%),linear-gradient(180deg,#000 calc(100% - 21.5vw),transparent calc(100% - 13.5vw));mask-composite:intersect;background:url('/assets/harvest/hero-crowd3.webp') center 40%/cover no-repeat;pointer-events:none}


.hv-wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:26px;align-items:start;padding-top:34px}
.hv-copy{max-width:640px;padding-left:clamp(0px,6vw,84px)}
.hv-eyebrow{font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:.82rem;color:var(--hv-plum);margin:0 0 10px}
.hv-title{position:relative;font-size:clamp(3.6rem,7.4vw,6.9rem);font-weight:900;line-height:.96;margin:0 0 16px;letter-spacing:-.015em;
  background:linear-gradient(92deg,#3A1A33 8%,#9E1F63 36%,#E85D9E 52%,#E9A23B 66%,#9E1F63 82%,#3A1A33 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent !important;-webkit-text-fill-color:transparent;
  animation:hv-sheen 7s linear infinite}
.hv-title .hv-year{font-weight:900;font-style:normal;color:transparent;-webkit-text-fill-color:transparent}
@keyframes hv-sheen{to{background-position:220% center}}
@media(prefers-reduced-motion:reduce){.hv-title{animation:none}}
.hv-year{display:inline-block;white-space:nowrap}

.hv-sub{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.18;color:var(--hv-plum);margin:20px 0 14px}
.hv-lede{font-size:1.06rem;line-height:1.6;color:var(--ink);max-width:34em;margin:0 0 20px}
.hv-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.hv-btn-berry{background:var(--hv-berry);color:#fff;border:2px solid var(--hv-berry)}
@media(hover:hover){.hv-btn-berry:hover{background:#7C1750;border-color:#7C1750;color:#fff}}
.hv-btn-ghost{border-color:var(--hv-plum);color:var(--hv-plum)}
.hv-bullets{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0}
.hv-bullets li{display:flex;align-items:center;font-weight:600;font-size:.92rem;line-height:1.3;padding:2px 22px 2px 0;margin-right:22px;border-right:1px solid rgba(67,33,78,.18)}
.hv-blink{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
@media(hover:hover){.hv-blink:hover span:last-child{text-decoration:underline;text-underline-offset:3px}}
.hv-bullets li:last-child{border-right:0;margin-right:0;padding-right:0}
.hv-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:0 1px 4px rgba(20,20,20,.14);flex:none}
.hv-ic svg{width:20px;height:20px}
.hv-ic-berry{color:var(--hv-berry)}
.hv-ic-blue{color:#2F6F8F}
.hv-legal{position:absolute;left:20px;bottom:calc(17.4vw + 16px);z-index:3;margin:0;font-size:.76rem;line-height:1.5;color:#fff;max-width:280px;text-shadow:0 1px 8px rgba(20,5,25,.6),0 0 2px rgba(20,5,25,.5)}
.hv-legal-m{display:none}
.hv-merch{position:relative;justify-self:end;width:min(100%,400px);padding-top:34px}
.hv-merch .hero-swag{position:relative;top:auto;right:auto;inset:auto;margin:0 0 0 auto}
.hv-merch-stack{position:relative;display:block;height:265px;text-decoration:none}
.hv-card{position:absolute;top:24px;width:178px;height:178px;background:#fff;border-radius:18px;box-shadow:0 10px 28px rgba(20,20,20,.2);display:grid;place-items:center;padding:6px}
.hv-card img{width:100%;height:100%;object-fit:contain}
.hv-c1{left:0;top:34px;transform:rotate(-8deg);z-index:1}
.hv-c2{left:50%;translate:-50% 0;top:0;transform:rotate(2deg);z-index:2}
.hv-c3{right:0;transform:rotate(9deg);top:48px;z-index:3}
.hv-badge{position:absolute;top:-18px;right:-8px;z-index:4;background:var(--marigold);color:#241303;font-weight:800;text-transform:uppercase;font-size:.86rem;line-height:1.15;padding:10px 14px;border-radius:10px;transform:rotate(7deg);box-shadow:0 3px 10px rgba(20,20,20,.2)}
.hv-hand{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;color:#4A3B2A;font-size:1.02rem;line-height:1.25}
.hv-merch-foot{display:flex;align-items:center;justify-content:center;margin-top:16px}
.hv-hand1{position:relative;display:inline-block;padding-right:44px;transform:rotate(-4deg)}
.hv-arrow{position:absolute;right:-2px;top:-26px;width:36px;height:40px;color:#4A3B2A;transform:rotate(-30deg)}
.hv-btn-gold{background:var(--marigold);color:#241303;border:2px solid var(--marigold);font-weight:700;display:inline-block;white-space:nowrap}
@media(hover:hover){.hv-btn-gold:hover{background:#D99B22;border-color:#D99B22;color:#241303}}



.hv-leaf{position:absolute;z-index:1;color:#C8355E;pointer-events:none;opacity:.85;width:26px;height:26px}
.hv-copy{position:relative}
.hv-mus{position:absolute;color:#3A1A33;pointer-events:none}
.hv-musA{top:-40px;left:56%;font-size:2rem}
.hv-musB{right:-52px;top:53%;font-size:1.5rem}
.hv-spark{position:absolute;color:var(--marigold);pointer-events:none;font-size:1.25rem}
.hv-sp1{top:-34px;right:126px}
.hv-sp2{top:44px;left:-16px}
.hv-leafbg{position:absolute;right:-46px;top:96px;width:220px;height:220px;color:#F3CBD9;opacity:.5;z-index:0;pointer-events:none}
.hv-merch-stack,.hv-merch-foot{position:relative;z-index:1}
.hv-leaf1{width:46px;height:46px;left:auto;right:-70px;top:150px;transform:rotate(14deg)}

.hv-leaf3{width:26px;height:26px;right:4%;top:420px;transform:rotate(30deg);opacity:.6}
.hv-skyline{position:relative;z-index:2;width:100%;aspect-ratio:2170/376;background:url('/assets/harvest/hero-skyline-final.webp') center/cover no-repeat}
.hv-fest-badge{position:absolute;left:clamp(14px,2.5vw,44px);top:36%;width:clamp(120px,11vw,176px);height:auto;z-index:1;pointer-events:auto;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.35)) drop-shadow(0 0 0 rgba(255,214,120,0));
  animation:hv-badge-float 4.6s ease-in-out infinite,hv-badge-glow 3.2s ease-in-out infinite;
  transition:transform .35s var(--ease-spring),filter .35s}
@keyframes hv-badge-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes hv-badge-glow{0%,100%{filter:drop-shadow(0 4px 14px rgba(0,0,0,.35)) drop-shadow(0 0 0 rgba(255,214,120,0))}50%{filter:drop-shadow(0 6px 18px rgba(0,0,0,.3)) drop-shadow(0 0 34px rgba(255,214,120,.9))}}
@media(hover:hover){.hv-fest-badge:hover{animation-play-state:paused;transform:translateY(-6px) scale(1.07) rotate(0);filter:drop-shadow(0 8px 22px rgba(0,0,0,.35)) drop-shadow(0 0 40px rgba(255,224,150,1))}}
@media(prefers-reduced-motion:reduce){.hv-fest-badge{animation:none}}
/* dual announcement bar */
.sb-duo .shop-banner-in.sb-hv .sb-text b{white-space:nowrap}
.sb-duo{display:flex;align-items:center;justify-content:center;gap:0}
.sb-duo .shop-banner-in+.shop-banner-in{border-left:1px solid rgba(255,255,255,.28);margin-left:14px;padding-left:14px}
/* ---- mobile ---- */
@media (max-width:920px){
  .hv-wrap{grid-template-columns:1fr;padding-top:16px}
  .hv-photo{width:100%;max-width:none;bottom:auto;height:215px;background-position:center 20%;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 98%);mask-image:linear-gradient(180deg,#000 45%,transparent 98%)}
  .hv-fest-badge{left:16px;top:26px;width:96px}
  
  
  .hv-copy{padding-left:0;padding-top:186px}
  .hv-title{font-size:clamp(3rem,13vw,4.2rem)}
  .hv-sub{font-size:clamp(1.35rem,5.4vw,1.8rem)}
  .hv-bullets{flex-direction:column;gap:10px}
  .hv-bullets li{border-right:0;margin-right:0;padding-right:0}
  .hv-bullets li br{display:none}
  .hv-merch{justify-self:center;padding-top:26px;width:min(100%,340px)}
  .hv-card{width:128px;height:128px}
  .hv-merch-foot{flex-direction:column;align-items:center;gap:10px}
  
  .hv-leaf1,.hv-leaf3,.hv-musA,.hv-musB,.hv-leafbg{display:none}
  .sb-duo .shop-banner-in+.shop-banner-in{display:none}
  .hv-legal{display:none}
  .hv-legal-m{display:block;margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(67,33,78,.14);font-size:.78rem;line-height:1.5;color:var(--ink-soft);max-width:34em}
}

/* ===================== Nominate a Local Business (Nomination Week) =====================
   Landing page (/nominate/), the homepage band, and the end-of-guide callout.
   House tokens throughout; every animation is reduced-motion safe. */
.nm-wrap { padding-top: clamp(36px, 6vw, 64px); padding-bottom: 70px; max-width: 820px; }

/* hero: drifting marigold "spotlight" glow behind the head */
.nm-hero { position: relative; }
.nm-hero::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; top: -150px; left: -120px; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(240,176,48,.30), transparent 62%); filter: blur(12px);
  animation: nm-drift 10s ease-in-out infinite alternate; }
@keyframes nm-drift { to { transform: translate(140px, 40px) scale(1.15); } }
.nm-eyebrow { color: var(--river); }
.nm-h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; margin: 0 0 14px; }
/* highlighter stroke that sweeps in behind "local business" once the hero reveals */
.nm-hl { background: linear-gradient(120deg, rgba(240,176,48,.55) 0 50%, transparent 50% 100%); background-size: 220% 100%; background-position: 100% 0;
  padding: 0 .1em; margin: 0 -.1em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-position .9s var(--ease-out) .4s; }
.nm-hero.in .nm-hl, html:not(.js) .nm-hl { background-position: 0 0; }
.nm-lede { font-size: 1.08rem; line-height: 1.55; color: #333; max-width: 58ch; margin: 0; }
.nm-motif { width: clamp(84px, 11vw, 120px); }
.nm-cone { transform-origin: 36px 30px; animation: nm-cone 3.4s ease-in-out infinite; }
@keyframes nm-cone { 50% { opacity: .55; transform: scaleX(1.06); } }

/* form card */
.nm-form { background: var(--card); border: 1.5px solid rgba(12,12,12,.16); border-radius: var(--radius); padding: 26px 26px 22px; box-shadow: var(--shadow);
  margin-top: 26px; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.nm-form.nm-out { opacity: 0; transform: translateY(-8px); }
.nm-field { position: relative; margin: 0 0 16px; }
.nm-field label { display: block; font-weight: 800; font-size: .84rem; letter-spacing: .02em; margin: 0 0 6px; transition: color .2s; }
.nm-field:focus-within label { color: var(--river); }
.nm-req { color: var(--river); }
.nm-field input, .nm-field textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(12,12,12,.16); border-radius: 12px; padding: 12px 14px;
  transition: border-color .2s, box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.nm-field textarea { resize: vertical; min-height: 104px; }
.nm-field input:hover, .nm-field textarea:hover { border-color: rgba(12,12,12,.34); }
.nm-field input:focus, .nm-field textarea:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 4px rgba(240,176,48,.22); transform: translateY(-1px); }
.nm-field input::placeholder, .nm-field textarea::placeholder { color: #9a948a; }
.nm-count { position: absolute; right: 2px; bottom: -18px; font-size: .72rem; color: #9a948a; font-variant-numeric: tabular-nums; }
.nm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
@media (max-width: 560px) { .nm-row { grid-template-columns: 1fr; gap: 0; } }
.nm-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.nm-fine { font-size: .78rem; line-height: 1.5; color: #777; margin: 0; flex: 1 1 260px; }
.nm-fine a { color: var(--river); font-weight: 700; }

/* the black pill, with a light sweep on hover and a nudging arrow */
.nm-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5em; background: var(--pine-deep); color: #fff !important;
  font-weight: 800; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; border: 0; border-radius: 999px; padding: 15px 26px; cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(12,12,12,.6); transition: transform .3s var(--ease-spring), box-shadow .3s; }
.nm-btn .arr { display: inline-block; transition: transform .25s var(--ease-spring); }
@media (hover: hover) {
  .nm-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(12,12,12,.65); }
  .nm-btn:hover .arr { transform: translateX(5px); }
}
.nm-btn:active { transform: translateY(0) scale(.98); }
.nm-btn:disabled { opacity: .6; cursor: default; transform: none; }
.nm-btn.gold { background: var(--marigold); color: #2a1500 !important; box-shadow: 0 10px 24px -12px rgba(240,176,48,.9); }

/* success state */
.nm-success { position: relative; text-align: center; background: linear-gradient(180deg, #FFFDF7, #FFF3DA); border: 1.5px solid var(--marigold); border-radius: var(--radius);
  padding: 34px 26px 30px; margin-top: 26px; box-shadow: var(--shadow-lift); }
.nm-success.show { animation: nm-in .6s var(--ease-spring) both; }
@keyframes nm-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.nm-success-emoji { font-size: 2.6rem; margin: 0 0 6px; animation: nm-bounce 1.2s var(--ease-spring) .2s both; }
@keyframes nm-bounce { 0% { transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.nm-success-h { font-family: var(--font-display); font-size: 1.9rem; margin: 0 0 8px; }
.nm-success-p { color: #444; max-width: 52ch; margin: 0 auto 18px; line-height: 1.55; }
.nm-success-links { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.nm-again { color: var(--river); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s; }
.nm-again:hover { border-color: var(--river); }
.nm-spark { position: absolute; color: var(--marigold); font-size: 1.3rem; animation: m-float 3s ease-in-out infinite; pointer-events: none; }
.nm-sp1 { left: 8%; top: 18%; } .nm-sp2 { right: 10%; top: 26%; animation-delay: -1s; color: var(--river); } .nm-sp3 { left: 18%; bottom: 16%; animation-delay: -2s; font-size: 1rem; }

/* how-it-works steps: staggered reveal, lift on hover, badge pops */
.nm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 680px) { .nm-steps { grid-template-columns: 1fr; } }
.nm-step { background: var(--card); border: 1.5px solid rgba(12,12,12,.16); border-radius: 16px; padding: 18px 18px 16px;
  transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
.nm-step b { display: block; font-family: var(--font-display); font-size: 1.08rem; margin: 10px 0 4px; }
.nm-step p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.nm-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marigold); color: #2a1500; font-weight: 800; font-size: .88rem;
  transition: transform .35s var(--ease-spring), box-shadow .35s; }
@media (hover: hover) {
  .nm-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--marigold); }
  .nm-step:hover .nm-num { transform: scale(1.18) rotate(-8deg); box-shadow: 0 0 0 6px rgba(240,176,48,.25); }
}

/* teaser + rules */
.nm-teaser { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--sage); border: 1px solid rgba(160,110,20,.18); }
.nm-teaser-ic { font-size: 1.5rem; animation: m-float 3.6s ease-in-out infinite; }
.nm-teaser b { display: block; font-family: var(--font-display); font-size: 1.02rem; }
.nm-teaser span { color: var(--ink-soft); font-size: .9rem; }
.nm-rules { margin-top: 22px; border: 1.5px solid rgba(12,12,12,.14); border-radius: 14px; background: var(--card); overflow: hidden; }
.nm-rules summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 800; transition: background .2s; }
.nm-rules summary::-webkit-details-marker { display: none; }
.nm-rules summary:hover { background: var(--bg-soft); }
.nm-chev { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--marigold); color: #2a1500; font-weight: 800; transition: transform .3s var(--ease-spring); }
.nm-rules[open] .nm-chev { transform: rotate(45deg); }
.nm-rules-body { padding: 0 18px 16px; animation: nm-in .35s var(--ease-out); }
.nm-rules-body ul { margin: 0; padding-left: 20px; color: #444; line-height: 1.55; font-size: .93rem; }
.nm-rules-body li { margin: 6px 0; }

/* homepage band (whole thing is one link) */
.nm-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 22px; text-decoration: none; color: inherit;
  background: linear-gradient(90deg, #FFF7DF, #FFFDF7); border: 1.5px solid rgba(176,126,30,.35); border-radius: var(--radius); padding: 22px 28px;
  box-shadow: var(--shadow); transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
.nm-band::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: 18%; top: -120px; pointer-events: none;
  background: radial-gradient(circle, rgba(240,176,48,.35), transparent 62%); filter: blur(10px); animation: nm-drift 12s ease-in-out infinite alternate; }
.nm-band > * { position: relative; }
.nm-band-t { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; margin: 2px 0 4px; }
.nm-band-s { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.nm-band .nm-spark { position: absolute; font-size: 1.1rem; right: 34%; top: 14px; }
@media (hover: hover) {
  .nm-band:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--marigold); }
  .nm-band:hover .nm-btn { transform: translateY(-2px); }
.nm-band:hover .nm-btn .arr { transform: translateX(5px); }
}
@media (max-width: 680px) { .nm-band { flex-direction: column; align-items: flex-start; } }

/* end-of-guide callout (whole thing is one link) */
.nm-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; text-decoration: none; color: inherit; margin: 34px 0 10px;
  background: var(--card); border: 1.5px solid rgba(12,12,12,.14); border-left: 6px solid var(--marigold); border-radius: 14px; padding: 20px 22px;
  box-shadow: var(--shadow); transition: transform .35s var(--ease-spring), box-shadow .35s, border-left-width .3s var(--ease-out), border-color .3s; }
.nm-callout b { display: block; font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 4px; }
.nm-callout p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
@media (hover: hover) {
  .nm-callout:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-left-width: 10px; border-color: rgba(240,176,48,.6); }
  .nm-callout:hover .nm-btn { transform: translateY(-2px); }
.nm-callout:hover .nm-btn .arr { transform: translateX(5px); }
}
@media (max-width: 560px) { .nm-callout { flex-direction: column; align-items: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  .nm-hero::before, .nm-band::before, .nm-cone, .nm-spark, .nm-teaser-ic, .nm-success-emoji { animation: none; }
  .nm-hl { transition: none; background-position: 0 0; }
  .nm-btn::after { display: none; }
}


/* ============================================================
   Hey Freddy Kids (/kids/) — crayon sub-brand. Everything .kd-*
   The palette is lifted from the Kids wordmark: crayon red, blue,
   green and yellow on the site cream, black line-work everywhere.
   ============================================================ */
.kd { --kd-red: #E4512F; --kd-blue: #3F8FD8; --kd-green: #4CA548; --kd-yellow: #F5B52C;
  /* hand-drawn corners: uneven radii read as "cut with scissors" */
  --kd-wobble: 20px 24px 18px 26px / 24px 18px 26px 20px; }
.kd-h2 { text-wrap: balance; }

/* --- hero --- */
.kd-hero { overflow: clip; }
.kd-hero .wrap { padding-bottom: clamp(30px, 5vw, 60px); }
.kd-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.kd-eyebrow { display: flex; align-items: center; gap: 10px; }
.kd-new { display: inline-block; background: var(--kd-red); color: #fff; font-size: .7rem; letter-spacing: .14em; padding: .25em .7em; border-radius: 999px; transform: rotate(-3deg); animation: kd-wiggle 5s ease-in-out infinite; }
/* the wordmark, cut into 13 layers so each piece can move on its own */
.kd-logo-stack { position: relative; width: min(620px, 100%); aspect-ratio: 1933 / 640; margin: 4px 0 18px; }
.kd-lg { position: absolute; display: block; }
.kd-lg img { display: block; width: 100%; height: 100%; }
/* entrance: hidden until the hero reveals, then each layer arrives in order */
.js .kd-hero-copy .kd-lg { opacity: 0; transition: opacity .5s var(--ease-out), transform .8s var(--ease-spring); transition-delay: var(--ld, 0s); }
.js .kd-hero-copy .kd-lg-wordmark { transform: scale(.9); transform-origin: 50% 60%; }
.js .kd-hero-copy .kd-lg-sun { --ld: .25s; transform: rotate(-40deg) scale(.4); }
.js .kd-hero-copy .kd-lg-heart { --ld: .5s; transform: scale(.3); }
.js .kd-hero-copy .kd-lg-dashesL { --ld: .62s; transform: translateX(-12px); }
.js .kd-hero-copy .kd-lg-leaf { --ld: .7s; transform: translateY(-30px) rotate(20deg); }
.js .kd-hero-copy .kd-lg-leafsparks { --ld: .95s; transform: scale(.4); }
.js .kd-hero-copy .kd-lg-star { --ld: 1.05s; transform: rotate(60deg) scale(.3); }
.js .kd-hero-copy .kd-lg-dashesR { --ld: 1.15s; transform: translateX(12px); }
.js .kd-hero-copy .kd-lg-K { --ld: .45s; transform: translateY(-60%) rotate(-14deg); }
.js .kd-hero-copy .kd-lg-i { --ld: .55s; transform: translateY(-60%) rotate(10deg); }
.js .kd-hero-copy .kd-lg-d { --ld: .65s; transform: translateY(-60%) rotate(-10deg); }
.js .kd-hero-copy .kd-lg-s { --ld: .75s; transform: translateY(-60%) rotate(14deg); }
.js .kd-hero-copy .kd-lg-underline { --ld: .95s; opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease-out) var(--ld); }
.kd-hero-copy.in .kd-lg, html:not(.js) .kd-lg { opacity: 1; transform: none; }
.kd-hero-copy.in .kd-lg-underline, html:not(.js) .kd-lg-underline { clip-path: inset(0 0 0 0); }
/* idle life, on the inner image so it never fights the entrance transition */
.kd-lg-sun img { animation: kd-sun-breathe 6s ease-in-out infinite; transform-origin: 62% 46%; }
.kd-lg-heart img { animation: kd-beat 2.6s ease-in-out infinite; transform-origin: 50% 60%; }
.kd-lg-star img { animation: kd-twinkle 4.2s ease-in-out infinite; transform-origin: 50% 55%; }
.kd-lg-leaf img { animation: kd-sway 5.5s ease-in-out infinite; transform-origin: 40% 100%; }
.kd-lg-leafsparks img, .kd-lg-dashesR img, .kd-lg-dashesL img { animation: kd-flicker 3.4s ease-in-out infinite; }
.kd-lg-dashesR img { animation-delay: -1.2s; } .kd-lg-dashesL img { animation-delay: -2.1s; }
.kd-lg-underline img { animation: kd-underline-wiggle 7s ease-in-out infinite; transform-origin: 50% 50%; }
/* hover: the letters hop in sequence, the sun spins up */
@media (hover: hover) {
  .kd-logo-stack:hover .kd-lg-K img { animation: kd-hop .6s var(--ease-spring) 1; }
  .kd-logo-stack:hover .kd-lg-i img { animation: kd-hop .6s var(--ease-spring) .08s 1; }
  .kd-logo-stack:hover .kd-lg-d img { animation: kd-hop .6s var(--ease-spring) .16s 1; }
  .kd-logo-stack:hover .kd-lg-s img { animation: kd-hop .6s var(--ease-spring) .24s 1; }
  .kd-logo-stack:hover .kd-lg-sun img { animation: kd-sun-spin 1.4s var(--ease-spring) 1; }
  .kd-logo-stack:hover .kd-lg-heart img { animation: kd-beat .7s ease-in-out infinite; }
  .kd-logo-stack:hover .kd-lg-wordmark img { transform: rotate(-.6deg); transition: transform .5s var(--ease-spring); }
}
@keyframes kd-sun-breathe { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.07) rotate(3deg); } }
@keyframes kd-sun-spin { to { transform: rotate(360deg); } }
@keyframes kd-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } 56% { transform: scale(1); } }
@keyframes kd-twinkle { 0%, 100% { transform: rotate(-10deg) scale(1); opacity: 1; } 50% { transform: rotate(12deg) scale(.86); opacity: .75; } }
@keyframes kd-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
@keyframes kd-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.92); } }
@keyframes kd-underline-wiggle { 0%, 100% { transform: skewX(0) translateY(0); } 50% { transform: skewX(-4deg) translateY(2px); } }
@keyframes kd-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-16%) rotate(-6deg); } 100% { transform: translateY(0); } }
.kd-h1 { font-size: clamp(1.55rem, 3.3vw, 2.35rem); max-width: 18em; margin-bottom: .45em; }
/* crayon highlighter under the key phrase: an SVG squiggle that draws itself in */
.kd-hl { position: relative; white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C30 3 60 12 90 6 S150 10 197 5' fill='none' stroke='%23F5B52C' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 92%; background-size: 0% .42em; transition: background-size .8s var(--ease-out) .55s; }
.kd-hero-copy.in .kd-hl, html:not(.js) .kd-hl { background-size: 100% .42em; }
.kd-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* the Kids button: the house pill with a light sweep, arrow nudges */
.kd-btn { background: var(--pine-deep); color: #fff; position: relative; overflow: hidden; box-shadow: 0 4px 18px -6px rgba(12,12,12,.5); }
.kd-btn .arr { display: inline-block; transition: transform .3s var(--ease-spring); }
@media (hover: hover) {
  .kd-btn:hover { transform: translateY(-2px) scale(1.02); color: #fff; background: var(--pine); box-shadow: 0 8px 26px -8px rgba(12,12,12,.6); }
  .kd-btn:hover .arr { transform: translateX(5px); }
}

/* floating crayon doodles */
.kd-doodle { position: absolute; width: 56px; height: 56px; pointer-events: none; opacity: .9; animation: kd-float 6s ease-in-out infinite; }
.kd-hero-doodles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kd-hero-doodles .kd-d-star { right: 6%; top: 9%; width: 62px; height: 62px; animation-duration: 7s; animation-delay: -2s; }
.kd-hero-doodles .kd-d-heart { right: 27%; top: 6%; width: 44px; height: 44px; animation-duration: 5.5s; animation-delay: -1s; }
.kd-hero-doodles .kd-d-squig { width: 150px; height: 38px; right: 9%; bottom: 7%; animation-duration: 8s; animation-delay: -3s; }
.kd-hero-doodles .kd-d-leaf { right: 2%; bottom: 34%; width: 64px; height: 64px; animation: kd-tumble 7s ease-in-out infinite; animation-delay: -2s; transform-origin: 50% 80%; }
@keyframes kd-tumble { 0%, 100% { transform: rotate(-14deg) translateY(0); } 50% { transform: rotate(12deg) translateY(-8px); } }
.kd-hero-doodles .kd-d-sparks { right: 24%; bottom: 12%; width: 44px; height: 44px; animation-duration: 6.5s; animation-delay: -5s; }
.kd-hero-doodles .kd-d-loop { width: 110px; height: 64px; left: 50%; bottom: 5%; opacity: .6; animation-duration: 9s; animation-delay: -6s; }
@media (max-width: 860px) { .kd-hero-doodles { display: none; } } /* the wordmark brings its own doodles; on a phone they'd collide with the copy */
@keyframes kd-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(5deg); } }
@keyframes kd-wiggle { 0%, 88%, 100% { transform: rotate(-3deg); } 92% { transform: rotate(3deg) scale(1.06); } 96% { transform: rotate(-4deg); } }

/* "today at a glance" sticker */
.kd-glance { position: relative; background: #fff; border: 2px solid var(--pine-deep); border-radius: var(--kd-wobble); padding: 26px 26px 20px; box-shadow: 6px 6px 0 var(--kd-yellow), var(--shadow);
  transform: rotate(1.6deg); transition: transform .45s var(--ease-spring), box-shadow .35s; }
.js .kd-glance.reveal { transform: translateY(22px) rotate(1.6deg); }
.js .kd-glance.in { transform: rotate(1.6deg); }
@media (hover: hover) { .js .kd-glance.in:hover, html:not(.js) .kd-glance:hover { transform: rotate(0) translateY(-3px); box-shadow: 8px 8px 0 var(--kd-blue), var(--shadow-lift); } }
.kd-glance-tape { position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; background: rgba(245,181,44,.55); transform: translateX(-50%) rotate(-3deg); border-radius: 2px; }
.kd-glance-h { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin: 0 0 12px; }
.kd-glance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kd-glance-list li { display: flex; align-items: baseline; gap: 12px; font-size: .95rem; color: var(--ink-soft); }
.kd-glance-list b { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; min-width: 1.6em; text-align: right; color: var(--kd-blue); transition: transform .4s var(--ease-spring); }
.kd-glance-list li:nth-child(2) b { color: var(--kd-red); }
.kd-glance-list li:nth-child(3) b { color: var(--kd-yellow); }
.kd-glance-list li:nth-child(4) b { color: var(--kd-green); }
.kd-glance-list b.kd-tick { animation: kd-pop .5s var(--ease-spring); }
@keyframes kd-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.kd-glance-foot { margin: 14px 0 0; font-size: .82rem; color: var(--ink-soft); font-style: italic; }
@media (max-width: 860px) { .kd-hero-grid { grid-template-columns: 1fr; } .kd-glance { max-width: 380px; } }

/* --- drop-in recreation --- */
.kd-daytabs { display: flex; gap: 6px; background: var(--bg-soft); border-radius: 999px; padding: 4px; align-self: center; }
.kd-day { font: inherit; font-weight: 700; font-size: .92rem; min-height: 46px; padding: .5em 1.25em; border-radius: 999px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background .25s, color .25s, transform .25s var(--ease-spring); }
.kd-day.on { background: var(--pine-deep); color: #fff; }
@media (hover: hover) { .kd-day:not(.on):hover { background: #fff; color: var(--pine-deep); transform: translateY(-1px); } }
.kd-rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .kd-rec-grid { grid-template-columns: 1fr; } }
.kd-rec-card { position: relative; background: #fff; border: 1.5px solid rgba(12,12,12,.16); border-top: 6px solid var(--kc); border-radius: var(--radius); padding: 20px 22px 18px; box-shadow: var(--shadow);
  transform: rotate(var(--tilt, 0)); transition: transform .4s var(--ease-spring), box-shadow .35s, border-color .3s; }
.js .kd-rec-card.reveal { transform: translateY(22px) rotate(var(--tilt, 0)); }
.js .kd-rec-card.in { transform: rotate(var(--tilt, 0)); }
@media (hover: hover) { .js .kd-rec-card.in:hover, html:not(.js) .kd-rec-card:hover { transform: rotate(0) translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgba(12,12,12,.32); } .kd-rec-card:hover .kd-rec-ic svg { transform: rotate(-8deg) scale(1.12); } }
.kd-rec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kd-rec-head h3 { margin: 0; font-size: 1.15rem; }
.kd-rec-head p { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.kd-rec-ic { flex: 0 0 auto; width: 46px; height: 46px; } .kd-rec-ic svg { width: 46px; height: 46px; transition: transform .4s var(--ease-spring); }
.kd-rec-count { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--kc); min-width: 1.2em; text-align: center; }
.kd-sess { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kd-sess li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--sage); transition: transform .25s var(--ease-out), border-color .25s; }
.kd-sess li:not(.kd-skel):not(.kd-none):hover { transform: translateX(3px); border-color: var(--kc); }
.kd-sess .v { font-weight: 700; font-size: .95rem; color: var(--pine-deep); }
.kd-sess .t { grid-column: 1; font-size: .86rem; color: var(--ink-soft); }
.kd-sess .p { grid-column: 2; grid-row: 1 / span 2; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3em .7em; border-radius: 999px; background: var(--marigold-soft); color: #8A5A00; white-space: nowrap; }
.kd-sess .p.paid { background: var(--river-soft); color: var(--river); }
.kd-sess .a { grid-column: 1; font-size: .82rem; }
.kd-sess .a a { font-weight: 700; }
.kd-sess li.kd-now { border-color: var(--kd-green); box-shadow: inset 3px 0 0 var(--kd-green); }
.kd-sess li.kd-none { display: block; text-align: center; color: var(--ink-soft); font-size: .92rem; padding: 18px 12px; border-style: dashed; }
.kd-sess li.kd-closed { display: block; background: #FFF1EC; border-color: rgba(228,81,47,.45); color: #8A2E1B; font-size: .86rem; }
.kd-skel { height: 46px; background: linear-gradient(90deg, var(--bg) 25%, #fff 50%, var(--bg) 75%); background-size: 200% 100%; animation: kd-shimmer 1.4s linear infinite; border-color: transparent !important; }
@keyframes kd-shimmer { to { background-position: -200% 0; } }
.kd-rec-foot { margin: 18px 0 0; font-size: .92rem; color: var(--ink-soft); }


/* --- the staples --- */
.kd-st-filters { margin: 0 0 18px; }
.kd-st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .kd-st-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kd-st-grid { grid-template-columns: 1fr; } }
.kd-st { position: relative; background: #fff; border: 1.5px solid rgba(12,12,12,.16); border-radius: var(--radius); padding: 18px 20px 16px; box-shadow: var(--shadow); border-top: 6px solid var(--kc);
  transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s, opacity .3s; }
@media (hover: hover) { .kd-st:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(12,12,12,.32); border-top-color: var(--kc); } }
.kd-st[hidden] { display: none; }
.kd-st h3 { margin: 10px 0 6px; font-size: 1.15rem; }
.kd-st-top { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.kd-st-tags { display: flex; gap: 5px; flex: 1 1 auto; }
.kd-st-status { margin-left: auto; }
.kd-st-tags span { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--river); background: var(--river-soft); padding: .28em .6em; border-radius: 999px; }
.kd-st-status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; white-space: nowrap; color: var(--ink-soft); }
.kd-st-status i { width: 9px; height: 9px; border-radius: 50%; background: #B9B2A4; flex: 0 0 auto; }
.kd-st-status[data-state="open"] { color: #1F7A2E; } .kd-st-status[data-state="open"] i { background: var(--kd-green); animation: pulse-dot 2s infinite; }
.kd-st-status[data-state="soon"] { color: #8A5A00; } .kd-st-status[data-state="soon"] i { background: var(--kd-yellow); animation: pulse-dot 1.2s infinite; }
.kd-st-status[data-state="info"] { color: var(--kd-blue); } .kd-st-status[data-state="info"] i { background: var(--kd-blue); }
.kd-st-status[data-state="closed"] i { background: #B9B2A4; }
.kd-st-status[data-state="season"], .kd-st-status[data-state="shut"] { color: #8A2E1B; } .kd-st-status[data-state="season"] i, .kd-st-status[data-state="shut"] i { background: var(--kd-red); }
.kd-st-what { color: var(--ink-soft); font-size: .93rem; margin: 0 0 10px; }
.kd-st-today { margin: 0 0 8px; font-size: .88rem; font-weight: 700; color: var(--pine-deep); }
.kd-st-today[hidden] { display: none; }
.kd-st-live { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.kd-st-live li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--sage); font-size: .88rem; }
.kd-st-live li a { font-weight: 700; color: var(--pine-deep); text-decoration: none; } .kd-st-live li a:hover { color: var(--river); }
.kd-st-live .kd-st-rt { grid-column: 2; grid-row: 1; font-size: .74rem; font-weight: 800; color: var(--river); text-transform: uppercase; letter-spacing: .06em; }
.kd-st-live .kd-st-times { grid-column: 1 / -1; color: var(--ink-soft); font-size: .84rem; }
.kd-st-live .kd-st-none { display: block; text-align: center; color: var(--ink-soft); border-style: dashed; }
.kd-st-more { margin: 4px 0 8px; font-size: .9rem; }
.kd-st-more summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--river); display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.kd-st-more summary::-webkit-details-marker { display: none; }
.kd-st-more[open] summary .kd-chev { transform: rotate(45deg); }
.kd-st-week { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-size: .86rem; }
.kd-st-week th { text-align: left; font-weight: 700; color: var(--ink-soft); width: 3.2em; padding: 3px 0; }
.kd-st-week td { padding: 3px 0; color: var(--ink); }
.kd-st-week tr.kd-wknd th { color: var(--kd-blue); }
.kd-st-price, .kd-st-note, .kd-st-addr { margin: 0 0 6px; font-size: .86rem; color: var(--ink-soft); }
.kd-st-price { font-weight: 700; color: var(--ink); }
.kd-st-addr { font-weight: 700; }
.kd-st-links { margin: 0; display: flex; gap: 14px; font-size: .88rem; }
.kd-st-link { font-weight: 700; }
.kd-st-closed { opacity: .82; border-top-color: #B9B2A4; }
.kd-st-closed h3 { color: var(--ink-soft); }
.kd-st-empty { margin-top: 14px; }


/* --- crayon accents on every band --- */
.kd .band { position: relative; }
.kd-band-doodles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kd-band-doodles .kd-doodle { opacity: .75; }
/* every doodle draws itself in as its band scrolls into view */
.kd-band-doodles path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kd-band-doodles.in path { animation: kd-draw 1.1s var(--ease-out) forwards; }
.kd-band-doodles.in .kd-doodle:nth-child(2) path { animation-delay: .25s; }
.kd-band-doodles.in .kd-doodle:nth-child(3) path { animation-delay: .5s; }
.kd-band-doodles.in .kd-doodle:nth-child(4) path { animation-delay: .75s; }
@keyframes kd-draw { to { stroke-dashoffset: 0; } }
.kd-rec .kd-d-sun { right: 3%; top: 26px; width: 84px; height: 84px; animation-duration: 9s; }
.kd-rec .kd-d-zig { left: 2%; bottom: 40px; width: 130px; height: 40px; animation-duration: 8s; animation-delay: -3s; }
.kd-rec .kd-d-dashes { left: 12%; top: 40px; width: 40px; height: 50px; animation-duration: 6s; }
.kd-staples .kd-d-arrow { left: 45%; top: 18px; width: 110px; height: 74px; animation-duration: 8s; }
.kd-staples .kd-d-star { right: 3%; top: 40px; width: 58px; height: 58px; animation-duration: 7s; animation-delay: -2s; }
.kd-staples .kd-d-loop { left: 2%; bottom: 30px; width: 130px; height: 76px; animation-duration: 10s; animation-delay: -4s; }
.kd-staples .kd-d-cross { right: 8%; bottom: 60px; width: 34px; height: 34px; animation-duration: 5s; animation-delay: -1s; }
.kd-feedband .kd-d-heart { right: 4%; top: 30px; width: 54px; height: 54px; animation-duration: 6s; }
.kd-feedband .kd-d-spiral { left: 3%; bottom: 80px; width: 64px; height: 64px; animation-duration: 9s; animation-delay: -5s; }
.kd-feedband .kd-d-sparks { right: 10%; bottom: 40px; width: 44px; height: 44px; animation-duration: 6.5s; animation-delay: -2s; }
.kd-guides .kd-d-rainbow { right: 3%; top: 20px; width: 120px; height: 70px; animation-duration: 10s; }
.kd-guides .kd-d-star { left: 3%; top: 120px; width: 46px; height: 46px; animation-duration: 7s; animation-delay: -3s; }
.kd-guides .kd-d-dashes { right: 12%; bottom: 40px; width: 40px; height: 50px; animation-duration: 6s; animation-delay: -1s; }
.kd-exploreband .kd-d-cloud { left: 2%; top: 0; width: 120px; height: 70px; animation-duration: 11s; }
.kd-exploreband .kd-d-arrow { right: 4%; top: 10px; width: 100px; height: 66px; transform: scaleX(-1); animation: none; }
.kd-faqband .kd-d-loop { right: 4%; top: 30px; width: 120px; height: 70px; animation-duration: 9s; }
.kd-faqband .kd-d-heart { left: 4%; bottom: 60px; width: 48px; height: 48px; animation-duration: 6s; animation-delay: -2s; }
@media (max-width: 860px) { .kd-band-doodles { display: none; } }

/* crayon underline on every section heading, in the band's colour */
.kd .band-head h2::after, .kd .kd-h2::after { width: 92px; height: 10px; margin-top: 10px; border-radius: 0; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C30 4 60 16 90 8 S150 14 197 6' fill='none' stroke='%23F5B52C' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat; transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease-out) .3s; }
.kd .reveal.in h2::after, .kd .reveal.in .kd-h2::after, html:not(.js) .kd .kd-h2::after { transform: scaleX(1); }
.kd-staples .kd-h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C30 4 60 16 90 8 S150 14 197 6' fill='none' stroke='%233F8FD8' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.kd-feedband .kd-h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C30 4 60 16 90 8 S150 14 197 6' fill='none' stroke='%23E4512F' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.kd-guides .kd-h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C30 4 60 16 90 8 S150 14 197 6' fill='none' stroke='%234CA548' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* eyebrows get a little crayon tick */
.kd-eb { position: relative; display: inline-block; padding-left: 20px; }
.kd-eb::before { content: ""; position: absolute; left: 0; top: .15em; width: 12px; height: 12px; border-radius: 40% 60% 55% 45%; background: var(--kd-yellow); transform: rotate(-8deg); transition: transform .4s var(--ease-spring); }
.kd-staples .kd-eb::before { background: var(--kd-blue); } .kd-feedband .kd-eb::before { background: var(--kd-red); } .kd-guides .kd-eb::before { background: var(--kd-green); }
@media (hover: hover) { .band-head:hover .kd-eb::before { transform: rotate(20deg) scale(1.3); } }

/* glance sticker corner star */
.kd-glance-star { position: absolute; right: -18px; top: -16px; width: 44px; height: 44px; }
.kd-glance-star .kd-doodle { position: static; width: 44px; height: 44px; animation: kd-twinkle 4s ease-in-out infinite; }

/* rec icons live all the time */
.kd-anim-wave { animation: kd-wave 2.6s ease-in-out infinite; }
.kd-anim-glide { animation: kd-glide 3s ease-in-out infinite; }
.kd-anim-bounce { animation: kd-bounce 1.8s cubic-bezier(.3,0,.7,1) infinite; transform-origin: 50% 100%; }
@keyframes kd-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes kd-glide { 0%, 100% { transform: translateX(-3px) rotate(-3deg); } 50% { transform: translateX(3px) rotate(2deg); } }
@keyframes kd-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-6px) scale(.96, 1.04); } 90% { transform: translateY(0) scale(1.04, .94); } }

/* staple venue icons: drawn on as the card reveals, wiggle on hover, offset crayon shadow on hover */
.kd-st-name { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.kd-st-name h3 { margin: 0; }
.kd-st-ic { flex: 0 0 40px; width: 40px; height: 40px; } .kd-st-ic svg { width: 40px; height: 40px; transition: transform .45s var(--ease-spring); }
.kd-st-ic path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kd-st.in .kd-st-ic path { animation: kd-draw .9s var(--ease-out) forwards; animation-delay: calc(var(--d, 0s) + .2s); }
.kd-st.in .kd-st-ic path:nth-of-type(2) { animation-delay: calc(var(--d, 0s) + .45s); }
.kd-st.in .kd-st-ic path:nth-of-type(3) { animation-delay: calc(var(--d, 0s) + .7s); }
.kd-st.in .kd-st-ic path:nth-of-type(4) { animation-delay: calc(var(--d, 0s) + .9s); }
.kd-st-ic circle, .kd-st-ic ellipse { transform-origin: center; transform: scale(0); transition: transform .5s var(--ease-spring); transition-delay: calc(var(--d, 0s) + .6s); }
.kd-st.in .kd-st-ic circle, .kd-st.in .kd-st-ic ellipse, html:not(.js) .kd-st-ic circle, html:not(.js) .kd-st-ic ellipse { transform: scale(1); }
html:not(.js) .kd-st-ic path, html:not(.js) .kd-band-doodles path { stroke-dashoffset: 0; }
@media (hover: hover) {
  .kd-st:hover { box-shadow: 7px 7px 0 var(--kc), var(--shadow-lift); }
  .kd-st:hover .kd-st-ic svg { transform: rotate(-10deg) scale(1.18); }
  .kd-st:hover .kd-st-tags span { transform: translateY(-1px); }
}
.kd-st-tags span { transition: transform .3s var(--ease-spring); }
.kd-st-tags span:nth-child(2) { transition-delay: .05s; } .kd-st-tags span:nth-child(3) { transition-delay: .1s; }

/* theme icons */
.kd-theme-ic { flex: 0 0 44px; width: 44px; height: 44px; } .kd-theme-ic svg { width: 44px; height: 44px; transition: transform .45s var(--ease-spring); }
.kd-theme-ic path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kd-theme.in .kd-theme-ic path { animation: kd-draw 1s var(--ease-out) forwards; animation-delay: calc(var(--d, 0s) + .2s); }
.kd-theme.in .kd-theme-ic path:nth-of-type(2) { animation-delay: calc(var(--d, 0s) + .5s); }
html:not(.js) .kd-theme-ic path { stroke-dashoffset: 0; }
@media (hover: hover) { .kd-theme:hover .kd-theme-ic svg { transform: rotate(-12deg) scale(1.2); } }

/* explore tiles: a scribble loop grows in behind the icon */
.kd-x-art { position: relative; display: inline-block; }
.kd-x-art .kd-d-loop { position: absolute; left: -22px; top: -8px; width: 112px; height: 68px; opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .3s, transform .5s var(--ease-spring); animation: none; }
.kd-x-art .guide-motif { position: relative; }
@media (hover: hover) { .kd-explore .guide-card:hover .kd-d-loop { opacity: .9; transform: scale(1) rotate(0); } .kd-explore .guide-card:hover { box-shadow: 7px 7px 0 var(--clc), var(--shadow-lift); } }

/* chips, tabs and buttons get a little spring */
.kd .chip, .kd-day { transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-spring); }
@media (hover: hover) { .kd .chip:hover, .kd-day:not(.on):hover { transform: translateY(-2px) scale(1.04); } }
.kd .chip:active, .kd-day:active { transform: scale(.96); }
/* event rows: crayon-coloured left edge slides in */
.kd-list .event-row { border-left-width: 6px; transition: transform .3s var(--ease-spring), box-shadow .3s, border-left-width .25s; }
@media (hover: hover) { .kd-list .event-row:hover { border-left-width: 12px; } }
/* FAQ + note */
@media (hover: hover) { .kd-faq:hover { border-color: var(--kd-blue); transform: translateX(4px); } }
.kd-faq { transition: border-color .25s, box-shadow .25s, transform .3s var(--ease-spring); }
.kd-note-art .kd-doodle { animation: kd-beat 2.6s ease-in-out infinite; }

/* --- kid-friendly feed --- */
.kd-filters { margin: 0 0 6px; }
.kd-list { min-height: 160px; }
.kd-loading { animation: kd-breathe 1.6s ease-in-out infinite; }
@keyframes kd-breathe { 50% { opacity: .55; } }
.kd-list .event-row { animation: kd-rise .5s var(--ease-out) both; }
.kd-list .event-row:nth-child(2) { animation-delay: .05s; } .kd-list .event-row:nth-child(3) { animation-delay: .1s; } .kd-list .event-row:nth-child(4) { animation-delay: .15s; } .kd-list .event-row:nth-child(5) { animation-delay: .2s; }
@keyframes kd-rise { from { opacity: 0; transform: translateY(10px); } }
.kd-feed-foot { margin: 22px 0 0; font-size: .92rem; color: var(--ink-soft); }
.kd-more-events { text-align: center; margin-top: 18px; }

/* --- ask band (inherits the dark .ask-band panel) --- */
.kd-askband .wrap { position: relative; }
.kd-ask { position: relative; padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 44px); }
.kd-ask-main { position: relative; z-index: 1; max-width: 700px; }
.kd-ask-doodles { position: absolute; inset: 0; pointer-events: none; }
.kd-ask-doodles .kd-doodle { opacity: .8; }
.kd-ask-doodles .kd-d-star { right: 8%; top: 12%; width: 70px; height: 70px; animation-duration: 8s; }
.kd-ask-doodles .kd-d-heart { right: 22%; bottom: 14%; animation-duration: 6s; animation-delay: -2s; }
.kd-ask-doodles .kd-d-sparks { right: 34%; top: 8%; width: 44px; height: 44px; animation-duration: 7s; animation-delay: -4s; }
.kd-ask-doodles .kd-d-squig { width: 160px; height: 40px; right: 5%; bottom: 8%; animation-duration: 9s; animation-delay: -1s; }
@media (max-width: 860px) { .kd-ask-doodles { display: none; } }

/* --- guide themes --- */
.kd-theme { margin-top: clamp(28px, 4vw, 44px); }
.kd-theme-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-left: 16px; border-left: 5px solid var(--kd-yellow); }
.kd-theme:nth-of-type(2) .kd-theme-head { border-color: var(--kd-blue); } .kd-theme:nth-of-type(3) .kd-theme-head { border-color: var(--kd-red); } .kd-theme:nth-of-type(4) .kd-theme-head { border-color: var(--kd-green); }
.kd-theme-head h3 { margin: 0; font-size: 1.25rem; }
.kd-theme-head p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.kd-more { margin-left: auto; font: inherit; font-weight: 700; font-size: .88rem; background: #fff; border: 1.5px solid rgba(12,12,12,.22); border-radius: 999px; padding: .5em 1.1em; cursor: pointer; color: var(--pine-deep); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; transition: border-color .25s, transform .25s var(--ease-spring), background .25s; }
@media (hover: hover) { .kd-more:hover { border-color: var(--pine-deep); transform: translateY(-1px); background: var(--marigold-soft); } }
.kd-more .kd-more-l, .kd-theme.open .kd-more .kd-more-t { display: none; }
.kd-theme.open .kd-more .kd-more-l { display: inline; }
.kd-more-chev { display: inline-block; font-weight: 800; transition: transform .3s var(--ease-spring); }
.kd-theme.open .kd-more-chev { transform: rotate(45deg); }
.kd-mini-row > .guide-mini { min-width: 0; }
.kd-mini-row .guide-mini-meta { flex-wrap: wrap; }
.kd-mini-row .gcluster-chip { white-space: normal; }
@media (max-width: 440px) { .kd-mini-row { grid-template-columns: 1fr 1fr; gap: 8px; } .kd-mini-row .guide-mini { padding: 12px; } }
.kd-mini-row .kd-extra { display: none; }
.kd-theme.open .kd-mini-row .kd-extra { display: flex; animation: kd-rise .45s var(--ease-out) both; }
@media (max-width: 560px) { .kd-theme-head { flex-wrap: wrap; } .kd-more { margin-left: 0; } }

/* --- note + faq --- */
.kd-narrow { max-width: 820px; }
.kd-note { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 2px solid var(--pine-deep); border-radius: var(--kd-wobble); padding: 22px 24px; margin-bottom: clamp(28px, 4vw, 44px); box-shadow: 6px 6px 0 var(--kd-red); transition: transform .4s var(--ease-spring), box-shadow .35s; }
@media (hover: hover) { .kd-note:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--kd-red); } }
.kd-note-art { position: relative; flex: 0 0 52px; height: 52px; } .kd-note-art .kd-doodle { position: static; width: 52px; height: 52px; }
.kd-note b { display: block; font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 4px; }
.kd-note p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.kd-faq { background: #fff; border: 1.5px solid rgba(12,12,12,.16); border-radius: 14px; padding: 4px 18px; margin: 10px 0; transition: border-color .25s, box-shadow .25s; }
.kd-faq[open] { border-color: var(--marigold); box-shadow: var(--shadow); }
.kd-faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kd-faq summary::-webkit-details-marker { display: none; }
.kd-chev { font-weight: 800; color: var(--river); transition: transform .3s var(--ease-spring); }
.kd-faq[open] .kd-chev { transform: rotate(45deg); }
.kd-faq p { margin: 0 0 14px; color: var(--ink-soft); font-size: .97rem; }

/* --- homepage band (whole thing is one link) --- */
.kd-band-wrap { padding-block: clamp(28px, 5vw, 56px) 0; }
.kd-band { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 3vw, 32px); text-decoration: none; color: inherit;
  background: #fff; border: 2px solid var(--pine-deep); border-radius: var(--radius); padding: 20px 26px; box-shadow: 6px 6px 0 #F5B52C, var(--shadow);
  transition: transform .4s var(--ease-spring), box-shadow .35s; }
.kd-band > * { position: relative; }
.kd-band-art { position: absolute; inset: 0; pointer-events: none; }
.kd-band-art .kd-doodle { width: 34px; height: 34px; opacity: .85; }
.kd-band-art .kd-d-star { left: 27%; top: 6px; animation-duration: 7s; }
.kd-band-art .kd-d-heart { right: 22%; bottom: 4px; animation-duration: 5.5s; animation-delay: -2s; }
.kd-band-art .kd-d-sparks { right: 30%; top: 8px; width: 28px; height: 28px; animation-duration: 6s; animation-delay: -3s; }
.kd-band-logo { width: clamp(180px, 22vw, 260px); height: auto; transition: transform .45s var(--ease-spring); transform-origin: 30% 60%; }
.kd-band-t { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin: 0 0 4px; color: var(--pine-deep); }
.kd-band-s { display: block; color: var(--ink-soft); font-size: .95rem; }
@media (hover: hover) {
  .kd-band:hover { transform: translate(-2px, -3px); box-shadow: 9px 9px 0 #3F8FD8, var(--shadow-lift); }
  .kd-band:hover .kd-band-logo { transform: rotate(-2deg) scale(1.04); }
  .kd-band:hover .kd-btn { transform: translateY(-2px); }
.kd-band:hover .kd-btn .arr { transform: translateX(5px); }
}
@media (max-width: 720px) { .kd-band { grid-template-columns: 1fr; text-align: left; } .kd-band-logo { width: 200px; } .kd-band-art .kd-d-star { left: auto; right: 8%; } }


/* --- "keep exploring" tiles on /kids/ --- */
.kd-exploreband { padding-top: 0; }
.kd-explore .guide-card { border-top-width: 6px; }
.kd-explore .guide-card h3 { font-size: 1.3rem; }

/* --- callout on /things-to-do/with-kids/ (whole thing is one link) --- */
.kd-callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 3vw, 28px); text-decoration: none; color: inherit; margin: 0 0 26px;
  background: #fff; border: 2px solid var(--pine-deep); border-radius: var(--radius); padding: 18px 24px; box-shadow: 6px 6px 0 #F5B52C, var(--shadow);
  transition: transform .4s var(--ease-spring), box-shadow .35s; }
.kd-callout-logo { width: clamp(150px, 18vw, 220px); height: auto; transition: transform .45s var(--ease-spring); transform-origin: 30% 60%; }
.kd-callout-copy b { display: block; font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 3px; color: var(--pine-deep); }
.kd-callout-copy span { display: block; color: var(--ink-soft); font-size: .93rem; }
@media (hover: hover) {
  .kd-callout:hover { transform: translate(-2px, -3px); box-shadow: 9px 9px 0 #3F8FD8, var(--shadow-lift); }
  .kd-callout:hover .kd-callout-logo { transform: rotate(-2deg) scale(1.04); }
  .kd-callout:hover .kd-btn { transform: translateY(-2px); }
.kd-callout:hover .kd-btn .arr { transform: translateX(5px); }
}
@media (max-width: 720px) { .kd-callout { grid-template-columns: 1fr; } .kd-callout-logo { width: 180px; } }

@media (prefers-reduced-motion: reduce) {
  .kd-doodle, .kd-new, .kd-skel, .kd-loading, .kd-glance-list b.kd-tick, .kd-st-status i, .kd-lg img, .kd-anim-wave, .kd-anim-glide, .kd-anim-bounce, .kd-note-art .kd-doodle { animation: none; }
  .kd-band-doodles path, .kd-st-ic path, .kd-theme-ic path { stroke-dashoffset: 0; animation: none; }
  .kd-st-ic circle, .kd-st-ic ellipse { transform: none; }
  .kd-lg, .kd .band-head h2::after { transition: none; transform: none; opacity: 1; clip-path: none; }
  .kd-list .event-row, .kd-theme.open .kd-mini-row .kd-extra { animation: none; }
  .kd-hl, .kd-logo, .kd-glance, .kd-rec-card, .kd-band, .kd-callout { transition: none; }
}


/* ============================================================
   Hey Freddy Business (/business/) — a section flag on the house
   brand, not a new identity. Ink and marigold, tighter type, the
   rules of a ledger. Everything .bz-*
   ============================================================ */
/* the tokens live on the page root AND on the pieces that travel to other pages (homepage band, flag) */
.bz, .bz-band, .bz-flag { --bz-ink: #101010; --bz-gold: #F0B030; --bz-gold-deep: #A06E14; --bz-rule: rgba(16,16,16,.14); --bz-paper: #FFFDF7; }
.bz-h2 { text-wrap: balance; }
.bz .band-head h2::after, .bz .page-head h1::after { background: linear-gradient(90deg, var(--bz-ink) 0 42px, transparent 42px 46px, var(--bz-gold) 46px); }

/* the section flag */
.bz-flag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.bz-flag img { height: 34px; width: auto; }
.bz-flag-tag { font-family: var(--font-body); font-weight: 800; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bz-ink); background: var(--bz-gold); padding: .35em .7em .3em; border-radius: 4px; position: relative; top: 2px; transform: rotate(-1.5deg); box-shadow: 2px 2px 0 var(--bz-ink); transition: transform .35s var(--ease-spring); }
.bz-flag-sm img { height: 26px; } .bz-flag-sm .bz-flag-tag { font-size: .66rem; padding: .3em .55em .25em; }
@media (hover: hover) { .bz-hero-copy:hover .bz-flag-tag, .bz-band:hover .bz-flag-tag { transform: rotate(1.5deg) scale(1.05); } }

/* --- hero --- */
.bz-hero .wrap { padding-bottom: clamp(30px, 5vw, 60px); }
.bz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.bz-h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 18em; margin-bottom: .5em; }
.bz-hl { background: linear-gradient(120deg, rgba(240,176,48,.55) 0 50%, transparent 50% 100%); background-size: 220% 100%; background-position: 100% 0; transition: background-position .9s var(--ease-out) .4s; }
.bz-hero-copy.in .bz-hl, html:not(.js) .bz-hl { background-position: 0 0; }
.bz-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.bz-btn { background: var(--bz-ink); color: #fff; position: relative; overflow: hidden; box-shadow: 0 4px 18px -6px rgba(12,12,12,.5); }
.bz-btn .arr { display: inline-block; transition: transform .3s var(--ease-spring); }
@media (hover: hover) {
  .bz-btn:hover { transform: translateY(-2px) scale(1.02); color: #fff; background: var(--pine); box-shadow: 0 8px 26px -8px rgba(12,12,12,.6); }
  .bz-btn:hover .arr { transform: translateX(5px); }
}
/* "this week" panel: a small ledger page */
.bz-week { background: var(--bz-paper); border: 1.5px solid var(--bz-ink); border-radius: var(--radius); padding: 22px 24px 16px; box-shadow: 6px 6px 0 var(--bz-gold), var(--shadow); transition: transform .4s var(--ease-spring), box-shadow .35s; }
@media (hover: hover) { .bz-week:hover { transform: translate(-2px, -3px); box-shadow: 9px 9px 0 var(--bz-gold), var(--shadow-lift); } }
.bz-week-h { font-weight: 800; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bz-gold-deep); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.bz-week-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bz-gold); animation: pulse-dot 2s infinite; }
.bz-week-list { list-style: none; margin: 0; padding: 0; }
.bz-week-item { display: grid; grid-template-columns: 3.2em 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--bz-rule); font-size: .93rem; }
.bz-week-item:first-child { border-top: 0; }
.bz-week-when { font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bz-week-item a { color: var(--bz-ink); text-decoration: none; font-weight: 700; } .bz-week-item a:hover { color: var(--bz-gold-deep); }
.bz-week-tag { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--bz-ink); color: var(--bz-gold); padding: .25em .55em; border-radius: 999px; }
.bz-week-none { color: var(--ink-soft); font-size: .93rem; padding: 6px 0; }
.bz-week-skel { height: 34px; margin: 6px 0; border-radius: 8px; background: linear-gradient(90deg, var(--bg-soft) 25%, #fff 50%, var(--bg-soft) 75%); background-size: 200% 100%; animation: kd-shimmer 1.4s linear infinite; }
.bz-week-foot { margin: 12px 0 0; font-size: .85rem; }
@media (max-width: 860px) { .bz-hero-grid { grid-template-columns: 1fr; } .bz-week { max-width: 420px; } }

/* --- the Ledger --- */
.bz-filters { margin: 0; align-self: end; }
.bz-month { margin-top: 26px; }
.bz-month[hidden] { display: none; }
.bz-month-h { display: flex; align-items: center; gap: 14px; font-family: var(--font-body); font-weight: 800; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bz-gold-deep); margin: 0 0 8px; }
.bz-month-h::after { content: ""; flex: 1; height: 3px; border-top: 1px solid var(--bz-ink); border-bottom: 1px solid var(--bz-ink); }
.bz-list { list-style: none; margin: 0; padding: 0; }
.bz-entry { display: grid; grid-template-columns: 74px 1fr; gap: 0 22px; padding: 20px 0; border-bottom: 1px solid var(--bz-rule); transition: background .25s, transform .3s var(--ease-out); }
.bz-entry[hidden] { display: none; }
@media (hover: hover) { .bz-entry:hover { background: linear-gradient(90deg, rgba(240,176,48,.12), transparent 60%); transform: translateX(4px); } }
.bz-entry-date { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-right: 3px solid var(--bz-gold); padding-right: 14px; font-variant-numeric: tabular-nums; }
.bz-entry-date b { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--bz-ink); }
.bz-entry-date span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.bz-entry-body h3 { margin: 6px 0 4px; font-size: 1.2rem; }
.bz-entry-body p { margin: 0 0 8px; color: var(--ink-soft); font-size: .97rem; max-width: 62em; }
.bz-kind { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .3em .65em; border-radius: 4px; background: var(--bz-ink); color: #fff; }
.bz-kind-opened { background: #1F7A2E; } .bz-kind-closed { background: #B4372E; } .bz-kind-moved, .bz-kind-expanded { background: #2F7FC1; } .bz-kind-hands { background: #7A5CC4; } .bz-kind-award, .bz-kind-funding { background: var(--bz-gold); color: var(--bz-ink); } .bz-kind-gives { background: #E2574C; }
.bz-src { font-size: .82rem; font-weight: 700; }
.bz-foot { margin: 22px 0 0; font-size: .92rem; color: var(--ink-soft); }
.bz-empty { margin-top: 20px; }
@media (max-width: 600px) { .bz-entry { grid-template-columns: 58px 1fr; gap: 0 14px; } .bz-entry-date b { font-size: 1.5rem; } }

/* --- gives back: a story and a cheque, on paper, not a black slab --- */
.bz-gives { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.bz-gives-eb { display: flex; align-items: center; gap: 8px; color: #B4372E; }
.bz-heart { display: inline-flex; width: 18px; height: 18px; color: #B4372E; animation: kd-beat 2.6s ease-in-out infinite; transform-origin: 50% 60%; }
.bz-heart svg { width: 18px; height: 18px; }
.bz-gives-copy p { color: var(--ink-soft); }
.bz-gives-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 28px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--bz-ink); }
.bz-gives-facts div { display: flex; flex-direction: column; gap: 2px; }
.bz-gives-facts dt { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bz-gold-deep); }
.bz-gives-facts dd { margin: 0; font-weight: 700; color: var(--bz-ink); font-size: .95rem; }
.bz-gives-facts dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--bz-gold); text-underline-offset: 3px; }
.bz-gives-facts dd a:hover { color: var(--bz-gold-deep); }
.bz-gives-note { font-size: .92rem; line-height: 1.55; margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--bz-gold); background: rgba(240,176,48,.10); border-radius: 0 10px 10px 0; }
.bz-gives-cta { margin: 20px 0 0; }
/* the cheque */
.bz-cheque { position: relative; background: var(--bz-paper); border: 1.5px solid var(--bz-ink); border-radius: 10px; padding: 18px 22px 16px; font-size: .9rem; color: var(--bz-ink);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(240,176,48,.16) 27px 28px); background-origin: content-box;
  box-shadow: 8px 8px 0 var(--bz-gold), var(--shadow); transform: rotate(-1.2deg); transition: transform .45s var(--ease-spring), box-shadow .35s; }
.js .bz-gives.reveal .bz-cheque { transform: rotate(-1.2deg) translateY(22px); }
.js .bz-gives.in .bz-cheque { transform: rotate(-1.2deg); }
@media (hover: hover) { .js .bz-gives.in .bz-cheque:hover, html:not(.js) .bz-cheque:hover { transform: rotate(0) translateY(-3px); box-shadow: 11px 11px 0 var(--bz-gold), var(--shadow-lift); } }
.bz-cheque-top { display: flex; justify-content: space-between; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bz-gold-deep); border-bottom: 1.5px solid var(--bz-ink); padding-bottom: 8px; margin-bottom: 14px; }
.bz-cheque-label { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bz-cheque-pay { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.bz-cheque-payee { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; border-bottom: 1px solid var(--bz-ink); padding-bottom: 4px; }
.bz-cheque-amt { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-bottom: 12px; }
.bz-cheque-words { font-style: italic; border-bottom: 1px solid var(--bz-ink); padding-bottom: 4px; }
.bz-cheque-box { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; border: 1.5px solid var(--bz-ink); border-radius: 6px; padding: 6px 10px; background: #fff; font-variant-numeric: tabular-nums; }
.bz-cheque-memo, .bz-cheque-sig { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.bz-cheque-memo span:last-child { border-bottom: 1px solid var(--bz-rule); padding-bottom: 3px; }
.bz-cheque-signature { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.15rem; border-bottom: 1px solid var(--bz-ink); padding-bottom: 3px; }
.bz-cheque-micr { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: .12em; color: var(--ink-soft); margin-top: 6px; }
.bz-cheque-stamp { position: absolute; right: 18px; top: 38px; width: 84px; height: 84px; border: 3px solid #B4372E; border-radius: 50%; display: grid; place-items: center; color: #B4372E; font-weight: 800; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; transform: rotate(-16deg) scale(1.6); opacity: 0; transition: transform .5s var(--ease-spring) .5s, opacity .3s .5s; mix-blend-mode: multiply; }
.bz-cheque-stamp::before { content: ""; position: absolute; inset: 6px; border: 1.5px solid #B4372E; border-radius: 50%; opacity: .7; }
.bz-gives.in .bz-cheque-stamp, html:not(.js) .bz-cheque-stamp { transform: rotate(-16deg) scale(1); opacity: .85; }
@media (max-width: 760px) { .bz-gives { grid-template-columns: 1fr; } .bz-cheque { transform: rotate(0); } .bz-gives-facts { grid-template-columns: 1fr 1fr; } }

/* --- the calendar --- */
.bz-cal-filters { margin: 0 0 6px; }
.bz-cal { list-style: none; margin: 0; padding: 0; }
.bz-cal-item { display: grid; grid-template-columns: 74px 1fr; gap: 0 22px; padding: 16px 0; border-bottom: 1px solid var(--bz-rule); position: relative; }
.bz-cal-item[hidden] { display: none; }
.bz-cal-first { margin-top: 26px; padding-top: 34px; }
.bz-cal-first::before { content: attr(data-month); position: absolute; left: 0; top: 0; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--bz-gold-deep); }
.bz-cal-date { display: flex; flex-direction: column; align-items: center; border-right: 3px solid var(--bz-rule); padding-right: 14px; font-variant-numeric: tabular-nums; }
.bz-cal-item[data-type="deadline"] .bz-cal-date { border-right-color: var(--bz-ink); }
.bz-cal-date b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--bz-ink); }
.bz-cal-date span { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }
.bz-cal-body h3 { margin: 4px 0 2px; font-size: 1.08rem; }
.bz-cal-body h3 a { color: var(--bz-ink); text-decoration: none; } .bz-cal-body h3 a:hover { color: var(--bz-gold-deep); }
.bz-cal-body p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.bz-cal-type { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .25em .6em; border-radius: 4px; background: var(--river-soft); color: var(--bz-gold-deep); }
.bz-cal-deadline { background: var(--bz-ink); color: var(--bz-gold); }
.bz-cal-live { animation: kd-rise .5s var(--ease-out) both; }
@media (hover: hover) { .bz-cal-item:hover { background: linear-gradient(90deg, rgba(240,176,48,.1), transparent 60%); } }
@media (max-width: 600px) { .bz-cal-item { grid-template-columns: 58px 1fr; gap: 0 14px; } }

/* --- answers --- */
.bz-narrow { max-width: 860px; }
.bz-qa { background: var(--bz-paper); border: 1.5px solid var(--bz-rule); border-radius: 14px; margin: 10px 0; transition: border-color .25s, box-shadow .25s, transform .3s var(--ease-spring); }
.bz-qa[open] { border-color: var(--bz-ink); box-shadow: 6px 6px 0 var(--bz-gold); }
@media (hover: hover) { .bz-qa:not([open]):hover { border-color: var(--bz-ink); transform: translateX(4px); } }
.bz-qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.2em 1fr auto; gap: 12px; align-items: center; padding: 16px 20px; font-weight: 700; font-size: 1.05rem; }
.bz-qa summary::-webkit-details-marker { display: none; }
.bz-qa-n { font-family: var(--font-display); font-weight: 800; color: var(--bz-gold-deep); font-variant-numeric: tabular-nums; }
.bz-chev { font-weight: 800; color: var(--bz-gold-deep); transition: transform .3s var(--ease-spring); }
.bz-qa[open] .bz-chev { transform: rotate(45deg); }
.bz-qa-a { padding: 0 20px 18px 20px; }
.bz-qa-a p { margin: 0 0 10px; color: var(--ink); font-size: .98rem; max-width: 64em; }
.bz-qa-src { font-size: .84rem; color: var(--ink-soft); }
@media (max-width: 560px) { .bz-qa summary { grid-template-columns: 1.8em 1fr auto; padding: 14px 14px; font-size: .98rem; } .bz-qa-a { padding: 0 14px 16px; } }

/* --- numbers --- */
.bz-num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .bz-num-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bz-num-grid { grid-template-columns: 1fr; } }
.bz-num { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bz-paper); border: 1.5px solid var(--bz-rule); border-top: 5px solid var(--bz-ink); border-radius: var(--radius); padding: 20px 22px 18px; box-shadow: var(--shadow); transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
@media (hover: hover) { .bz-num:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--bz-gold), var(--shadow-lift); border-color: var(--bz-ink); } }
.bz-num-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; color: var(--bz-ink); font-variant-numeric: tabular-nums; }
.bz-num-l { font-weight: 700; margin-top: 8px; }
.bz-num-s { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }

/* --- spotlight + ask --- */
.bz-spot-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .bz-spot-grid { grid-template-columns: 1fr; } }
.bz-spot { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bz-paper); border: 1.5px solid var(--bz-ink); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); box-shadow: 6px 6px 0 var(--bz-gold), var(--shadow); transition: transform .4s var(--ease-spring), box-shadow .35s; }
.bz-spot p { color: var(--ink-soft); flex: 1; }
.bz-spot .btn { align-self: flex-start; }
@media (hover: hover) { .bz-spot:hover { transform: translate(-2px, -3px); box-shadow: 9px 9px 0 var(--bz-gold), var(--shadow-lift); } .bz-spot:hover .bz-btn .arr { transform: translateX(5px); }}
.bz-ask { background: radial-gradient(120% 140% at 88% -20%, rgba(240,176,48,.18), transparent 60%), var(--bz-ink); color: #F4EFE4; border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }
.bz-ask h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 14px; }

/* --- submit form --- */
.bz-form { background: var(--bz-paper); border: 1.5px solid var(--bz-ink); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow); }
.bz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .bz-row { grid-template-columns: 1fr; } }
.bz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bz-field label { font-weight: 700; font-size: .92rem; }
.bz-field input, .bz-field textarea, .bz-field select { font: inherit; padding: .7em .9em; border: 1.5px solid var(--bz-rule); border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.bz-field input:focus, .bz-field textarea:focus, .bz-field select:focus { outline: none; border-color: var(--bz-ink); box-shadow: 0 0 0 4px rgba(240,176,48,.28); }
.bz-success { background: var(--bz-paper); border: 1.5px solid var(--bz-ink); border-radius: var(--radius); padding: 28px; box-shadow: 6px 6px 0 var(--bz-gold); }
.bz-success p { margin: 0; color: var(--ink-soft); }

/* --- homepage band (whole thing is one link) --- */
.bz-band-wrap { padding-block: 0 clamp(24px, 4vw, 48px); }
.bz-band { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; text-decoration: none; color: inherit;
  background: var(--bz-paper, #FFFDF7); border: 1.5px solid var(--pine-deep); border-radius: var(--radius); padding: 22px 26px 20px; box-shadow: 6px 6px 0 #F0B030, var(--shadow);
  transition: transform .4s var(--ease-spring), box-shadow .35s; }
.bz-band-head { display: flex; flex-direction: column; gap: 4px; }
.bz-band-head .bz-flag { margin-bottom: 8px; }
.bz-band-t { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--pine-deep); }
.bz-band-s { color: var(--ink-soft); font-size: .95rem; }
.bz-band-ticker { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(16,16,16,.14); padding-top: 12px; }
.bz-tick { font-size: .82rem; color: var(--ink-soft); }
.bz-tick b { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--pine-deep); color: #F0B030; padding: .25em .55em; border-radius: 4px; margin-right: 6px; }
.bz-band .bz-btn { grid-column: 2; grid-row: 1; }
@media (hover: hover) {
  .bz-band:hover { transform: translate(-2px, -3px); box-shadow: 9px 9px 0 #F0B030, var(--shadow-lift); }
  .bz-band:hover .bz-btn { transform: translateY(-2px); }.bz-band:hover .bz-btn .arr { transform: translateX(5px); }
}
@media (max-width: 720px) { .bz-band { grid-template-columns: 1fr; } .bz-band .bz-btn { grid-column: 1; grid-row: auto; justify-self: start; } }

@media (prefers-reduced-motion: reduce) {
  .bz-heart, .bz-week-dot, .bz-week-skel, .bz-cal-live { animation: none; }
  .bz-cheque, .bz-cheque-stamp { transition: none; transform: none; opacity: 1; }
  .bz-hl, .bz-flag-tag, .bz-week, .bz-entry, .bz-qa, .bz-num, .bz-spot, .bz-band { transition: none; }
}


/* --- the hub index: six sections, right under the hero --- */
.bz-indexband { padding-top: 0; }
.bz-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .bz-index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bz-index { grid-template-columns: 1fr; } }
.bz-tile { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; background: var(--bz-paper); border: 1.5px solid var(--bz-rule); border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: var(--shadow); min-height: 100%; overflow: hidden; transition: transform .4s var(--ease-spring), box-shadow .35s, border-color .3s; }
.bz-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--bz-gold); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--ease-out); }
.bz-tile-icon { display: block; margin-bottom: 6px; }
.bz-tile-icon .motif { width: 58px; height: 58px; transition: transform .45s var(--ease-spring); }
.bz-tile-k { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bz-gold-deep); }
.bz-tile h3 { margin: 0; font-size: 1.28rem; line-height: 1.15; }
.bz-tile p { margin: 2px 0 0; color: var(--ink-soft); font-size: .93rem; flex: 1; }
.bz-tile-btn { align-self: flex-start; margin-top: 14px; font-size: .86rem; padding: .6em 1.15em; }
@media (hover: hover) {
  .bz-tile:hover { transform: translateY(-4px); border-color: var(--bz-ink); box-shadow: 6px 6px 0 var(--bz-gold), var(--shadow-lift); }
  .bz-tile:hover::before { transform: scaleY(1); }
  .bz-tile:hover .bz-tile-icon .motif { transform: scale(1.12) rotate(-4deg); }
  .bz-tile:hover .bz-tile-btn { transform: translateY(-2px) scale(1.02); background: var(--pine); box-shadow: 0 8px 26px -8px rgba(12,12,12,.6); }
  .bz-tile:hover .bz-tile-btn .arr { transform: translateX(5px); }
}
.bz-tile-spotlight { background: radial-gradient(120% 140% at 88% -20%, rgba(240,176,48,.22), transparent 60%), var(--bz-paper); }

/* --- section pages: a smaller hero and a strip of sibling links --- */
.bz-sub-hero .wrap { padding-bottom: clamp(20px, 3vw, 36px); }
.bz-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bz-gold-deep); text-decoration: none; margin-bottom: 16px; }
.bz-crumb-row { display: block; }
.bz-crumb .arr { display: inline-block; transition: transform .3s var(--ease-spring); }
@media (hover: hover) { .bz-crumb:hover .arr { transform: translateX(-4px); } }
.bz-crumb:hover { color: var(--bz-ink); }
.bz-sub-hero .bz-h1 { max-width: 16em; }
.bz-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; font-size: .84rem; color: var(--ink-soft); }
.bz-meta b { color: var(--bz-ink); }
.bz-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.bz-subnav a { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--bz-ink); text-decoration: none; background: var(--bz-paper); border: 1.5px solid var(--bz-rule); border-radius: 999px; padding: .42em .9em; transition: border-color .2s, transform .3s var(--ease-spring), box-shadow .25s; }
.bz-subnav a[aria-current="page"] { background: var(--bz-ink); color: #fff; border-color: var(--bz-ink); }
@media (hover: hover) { .bz-subnav a:not([aria-current]):hover { border-color: var(--bz-ink); transform: translateY(-2px); box-shadow: 3px 3px 0 var(--bz-gold); } }

/* --- the steps (start page) --- */
.bz-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.bz-step { display: grid; grid-template-columns: 74px 1fr; gap: 0 22px; padding: 26px 0; border-bottom: 1px solid var(--bz-rule); }
.bz-step-n { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--bz-ink); border-right: 3px solid var(--bz-gold); padding-right: 14px; font-variant-numeric: tabular-nums; align-self: start; padding-top: 4px; }
.bz-step-who { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bz-gold-deep); margin: 0 0 4px; }
.bz-step h2 { margin: 0 0 8px; font-size: 1.35rem; }
.bz-step h2::after { display: none; }
.bz-step p { margin: 0 0 10px; max-width: 64em; }
.bz-tips { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px; }
.bz-tips li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--ink); }
.bz-tips li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; background: var(--bz-gold); border: 1.5px solid var(--bz-ink); border-radius: 3px; transform: rotate(-6deg); }
.bz-step .bz-qa-src { margin: 0; }
@media (max-width: 600px) { .bz-step { grid-template-columns: 50px 1fr; gap: 0 14px; } .bz-step-n { font-size: 1.8rem; } }

/* --- the programs (funding page) --- */
.bz-group { margin-top: 34px; }
.bz-group-h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 4px; }
.bz-group-h h2 { margin: 0; font-size: 1.4rem; }
.bz-group-h h2::after { display: none; }
.bz-group-note { margin: 0 0 14px; color: var(--ink-soft); font-size: .95rem; }
.bz-progs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bz-prog { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 8px 22px; align-items: start; background: var(--bz-paper); border: 1.5px solid var(--bz-rule); border-radius: 14px; padding: 18px 20px; transition: border-color .25s, box-shadow .3s, transform .35s var(--ease-spring); }
@media (hover: hover) { .bz-prog:hover { border-color: var(--bz-ink); box-shadow: 6px 6px 0 var(--bz-gold); transform: translateX(4px); } }
.bz-prog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bz-prog h3 { margin: 0; font-size: 1.12rem; }
.bz-prog h3 a { color: var(--bz-ink); text-decoration: none; } .bz-prog h3 a:hover { color: var(--bz-gold-deep); }
.bz-prog-by { font-size: .82rem; color: var(--ink-soft); }
.bz-form-tag { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .3em .6em; border-radius: 4px; background: var(--bz-ink); color: #fff; }
.bz-form-loan { background: #2F7FC1; } .bz-form-contribution { background: #1F7A2E; } .bz-form-grant { background: var(--bz-gold); color: var(--bz-ink); } .bz-form-credit { background: #7A5CC4; } .bz-form-wage { background: #B4372E; } .bz-form-equity { background: #444; } .bz-form-closed { background: #8a8a8a; }
.bz-prog p { margin: 0; font-size: .95rem; color: var(--ink); max-width: 60em; }
.bz-prog-amt { text-align: right; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; color: var(--bz-ink); border-left: 3px solid var(--bz-gold); padding-left: 16px; text-align: left; font-variant-numeric: tabular-nums; grid-row: 1 / span 2; grid-column: 2; }
.bz-prog-src { grid-column: 1; font-size: .82rem; font-weight: 700; }
@media (max-width: 700px) { .bz-prog { grid-template-columns: 1fr; } .bz-prog-amt { grid-row: auto; grid-column: 1; border-left: 0; padding-left: 0; font-size: 1.2rem; } }

/* --- the parts (newcomers page) --- */
.bz-parts { display: grid; gap: 0; }
.bz-part { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2fr); gap: 10px 32px; padding: 28px 0; border-bottom: 1px solid var(--bz-rule); }
.bz-part h2 { margin: 0; font-size: 1.35rem; }
.bz-part h2::after { display: none; }
.bz-part-n { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bz-gold-deep); margin-bottom: 6px; }
.bz-part p { margin: 0 0 12px; max-width: 62em; }
.bz-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bz-links a { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; color: var(--bz-ink); text-decoration: none; border: 1.5px solid var(--bz-rule); border-radius: 999px; padding: .35em .8em; background: var(--bz-paper); transition: border-color .2s, box-shadow .25s, transform .3s var(--ease-spring); }
@media (hover: hover) { .bz-links a:hover { border-color: var(--bz-ink); box-shadow: 3px 3px 0 var(--bz-gold); transform: translateY(-2px); } }
@media (max-width: 760px) { .bz-part { grid-template-columns: 1fr; } }

/* --- honesty box: what changes, and when we checked --- */
.bz-note { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: var(--bz-paper); border: 1.5px solid var(--bz-ink); border-radius: var(--radius); padding: 18px 22px; box-shadow: 6px 6px 0 var(--bz-gold); margin-top: 30px; font-size: .95rem; }
.bz-note p { margin: 0; }
.bz-note-k { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bz-gold-deep); padding-top: 3px; }

/* --- hub: latest from the Ledger --- */
.bz-latest .bz-entry { padding: 16px 0; }
.bz-latest .bz-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.bz-latest .bz-entry-body p { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .bz-latest .bz-list { grid-template-columns: 1fr; } }


/* --- eight tiles: four across on wide screens --- */
@media (min-width: 1001px) { .bz-index { grid-template-columns: repeat(4, 1fr); } .bz-tile { padding: 20px 18px 18px; } .bz-tile h3 { font-size: 1.15rem; } .bz-tile p { font-size: .88rem; } }

/* --- the "who speaks for you" strip on section pages --- */
.bz-strip { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); gap: 14px 32px; align-items: center; background: var(--bz-paper); border: 1.5px solid var(--bz-ink); border-radius: var(--radius); padding: 20px 24px; box-shadow: 6px 6px 0 var(--bz-gold), var(--shadow); }
.bz-strip-head p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.bz-strip-head .eyebrow { margin-bottom: 4px; }
.bz-strip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bz-strip-list a { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; color: var(--bz-ink); text-decoration: none; border: 1.5px solid var(--bz-rule); border-radius: 999px; padding: .42em .9em; background: #fff; transition: border-color .2s, box-shadow .25s, transform .3s var(--ease-spring); }
.bz-strip-list a.bz-strip-all { background: var(--bz-ink); color: #fff; border-color: var(--bz-ink); }
.bz-strip-list .arr { display: inline-block; transition: transform .3s var(--ease-spring); }
@media (hover: hover) { .bz-strip-list a:hover { border-color: var(--bz-ink); box-shadow: 3px 3px 0 var(--bz-gold); transform: translateY(-2px); } .bz-strip-list a:hover .arr { transform: translateX(4px); } }
@media (max-width: 760px) { .bz-strip { grid-template-columns: 1fr; } }

/* --- organization cards (/business/who/) --- */
.bz-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bz-jump a { font-size: .78rem; font-weight: 700; color: var(--bz-gold-deep); text-decoration: none; border-bottom: 1.5px solid transparent; padding: 2px 0; }
.bz-jump a:hover { color: var(--bz-ink); border-bottom-color: var(--bz-gold); }
.bz-jump a + a::before { content: "·"; color: var(--bz-rule); margin: 0 6px 0 0; }
.bz-org-list { display: grid; gap: 14px; }
.bz-org { display: grid; grid-template-columns: minmax(200px, .9fr) minmax(0, 1.6fr); gap: 10px 32px; background: var(--bz-paper); border: 1.5px solid var(--bz-rule); border-radius: var(--radius); padding: 24px 26px; scroll-margin-top: 110px; transition: border-color .25s, box-shadow .3s, transform .35s var(--ease-spring); }
@media (hover: hover) { .bz-org:hover { border-color: var(--bz-ink); box-shadow: 6px 6px 0 var(--bz-gold); transform: translateY(-3px); } }
.bz-org:target { border-color: var(--bz-ink); box-shadow: 6px 6px 0 var(--bz-gold); }
.bz-org-head h3 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.15; }
.bz-org-head h3 a { color: var(--bz-ink); text-decoration: none; } .bz-org-head h3 a:hover { color: var(--bz-gold-deep); }
.bz-org-what { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.bz-org-facts { margin: 0; display: grid; gap: 10px; }
.bz-org-facts div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; align-items: start; }
.bz-org-facts dt { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bz-gold-deep); padding-top: .35em; }
.bz-org-facts dd { margin: 0; font-size: .95rem; }
.bz-org-facts .bz-tips { margin: 0; }
.bz-org-contact { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--bz-rule); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; }
.bz-org-c b { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bz-gold-deep); margin-right: 6px; }
.bz-org-c a { color: var(--bz-ink); }
.bz-org-note { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--ink-soft); font-style: italic; }
.bz-org .bz-qa-src { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .bz-org { grid-template-columns: 1fr; padding: 20px 18px; } .bz-org-facts div { grid-template-columns: 1fr; gap: 2px; } }

/* --- calendar "from" filter --- */
.bz-org-filters { margin-top: 8px; align-items: center; }
.bz-org-label { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bz-gold-deep); margin-right: 4px; }

/* --- org logos and the annual fixtures --- */
.bz-org-logo { display: block; width: 168px; max-width: 100%; height: 64px; margin: 0 0 14px; padding: 8px 10px; background: #fff; border: 1px solid var(--bz-rule); border-radius: 10px; }
.bz-org-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.bz-annual { margin-top: 40px; padding-top: 30px; border-top: 3px double var(--bz-rule); }
.bz-annual .band-head { margin-bottom: 8px; }
.bz-annual-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.bz-annual-list li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--bz-rule); align-items: start; }
.bz-annual-m { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bz-gold-deep); padding-top: .45em; }
.bz-annual-list h3 { margin: 0 0 2px; font-size: 1.02rem; }
.bz-annual-list h3 a { color: var(--bz-ink); text-decoration: none; } .bz-annual-list h3 a:hover { color: var(--bz-gold-deep); }
.bz-annual-list p { margin: 0; font-size: .86rem; color: var(--ink-soft); }
@media (max-width: 860px) { .bz-annual-list { grid-template-columns: 1fr; } }


/* ============================================================
   Meet Hey Freddy: Amanda's 42-second video, under the hero.
   A phone-shaped card that tilts until you hover, previews
   silently on hover, plays with sound on click. .meet-*
   ============================================================ */
.meet-band { padding-block: clamp(28px, 5vw, 60px) clamp(36px, 6vw, 72px); overflow: hidden; }
.meet { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.meet-eyebrow .spark { display: inline-block; margin-right: 3px; color: var(--marigold); animation: sparkle 2.8s ease-in-out infinite; }
.meet-h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 14em; margin: 0 0 .45em; text-wrap: balance; }
.meet-h2 .hl { color: var(--river); }
.meet-lede { font-size: clamp(1rem, 1.7vw, 1.12rem); color: var(--ink-soft); max-width: 34em; margin: 0 0 20px; }
.meet-quote { position: relative; margin: 0 0 22px; padding: 18px 22px 16px 26px; background: #fff; border: 1.5px solid var(--pine-deep); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--marigold), var(--shadow); max-width: 34em; transition: transform .4s var(--ease-spring), box-shadow .35s; }
.meet-quote::before { content: "\201C"; position: absolute; left: 10px; top: -22px; font-family: var(--font-display); font-size: 4.2rem; line-height: 1; color: var(--marigold); }
.meet-quote p { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.9vw, 1.25rem); line-height: 1.35; color: var(--pine-deep); }
.meet-quote cite { font-style: normal; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--river); }
@media (hover: hover) { .meet-quote:hover { transform: translate(-2px, -3px) rotate(-.4deg); box-shadow: 9px 9px 0 var(--marigold), var(--shadow-lift); } }
.meet-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.meet-actions .btn .arr { display: inline-block; transition: transform .3s var(--ease-spring); }
@media (hover: hover) { .meet-actions .btn:hover .arr { transform: translateX(5px); } }
.meet-transcript { margin-top: 18px; max-width: 40em; font-size: .9rem; color: var(--ink-soft); }
.meet-transcript summary { cursor: pointer; font-weight: 700; color: var(--pine-deep); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.meet-transcript summary::-webkit-details-marker { display: none; }
.meet-transcript summary::before { content: "+"; font-weight: 800; color: var(--river); transition: transform .3s var(--ease-spring); }
.meet-transcript[open] summary::before { transform: rotate(45deg); }
.meet-transcript p { margin: 10px 0 0; line-height: 1.6; }

/* --- the phone --- */
.meet-phone { --tilt: -3deg; position: relative; margin: 0; justify-self: center; width: min(100%, 330px); transform: rotate(var(--tilt)); transition: transform .55s var(--ease-spring); }
.meet-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: var(--pine-deep); border: 3px solid var(--pine-deep); box-shadow: 10px 10px 0 var(--marigold), var(--shadow-lift); transition: box-shadow .4s, transform .5s var(--ease-spring); cursor: pointer; isolation: isolate; }
.meet-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #1a1a1a; transition: transform .8s var(--ease-out), filter .4s; }
.meet-phone.is-playing .meet-video { filter: none; }
/* the play button: a marigold coin with a breathing ring */
.meet-btn { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 50%; background: var(--marigold); color: var(--pine-deep); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px -8px rgba(12,12,12,.6); transition: transform .35s var(--ease-spring), opacity .3s, background .3s; z-index: 3; }
.meet-btn .meet-ico { width: 38px; height: 38px; fill: currentColor; grid-area: 1 / 1; transition: opacity .2s, transform .3s var(--ease-spring); }
.meet-ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(240,176,48,.7); animation: meet-ring 2.2s ease-out infinite; pointer-events: none; }
@keyframes meet-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.meet-ico-pause, .meet-ico-replay { opacity: 0; transform: scale(.6); }
.meet-phone.is-playing .meet-ico-play { opacity: 0; transform: scale(.6); }
.meet-phone.is-playing .meet-ico-pause { opacity: 1; transform: none; }
.meet-phone.is-ended .meet-ico-play, .meet-phone.is-ended .meet-ico-pause { opacity: 0; }
.meet-phone.is-ended .meet-ico-replay { opacity: 1; transform: none; }
.meet-phone.is-playing .meet-btn { opacity: 0; transform: scale(.7); pointer-events: none; }
.meet-phone.is-playing .meet-ring { animation: none; opacity: 0; }
/* while playing, the button comes back on hover so you can pause */
@media (hover: hover) { .meet-phone.is-playing .meet-screen:hover .meet-btn { opacity: .92; transform: none; pointer-events: auto; } }
.meet-mute { position: absolute; right: 12px; bottom: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(16,16,16,.62); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 3; backdrop-filter: blur(4px); transition: transform .3s var(--ease-spring), background .25s; }
.meet-mute svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.meet-mute .meet-ico-off { display: none; }
.meet-phone.is-muted .meet-mute .meet-ico-on { display: none; }
.meet-phone.is-muted .meet-mute .meet-ico-off { display: block; }
@media (hover: hover) { .meet-mute:hover { transform: scale(1.1); background: var(--marigold); color: var(--pine-deep); } }
.meet-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.22); z-index: 3; opacity: 0; transition: opacity .3s; }
.meet-bar i { display: block; height: 100%; width: 0; background: var(--marigold); transition: width .25s linear; }
.meet-phone.is-playing .meet-bar, .meet-phone.is-paused .meet-bar, .meet-phone.is-ended .meet-bar { opacity: 1; }
.meet-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(16,16,16,.55); padding: .45em .9em; border-radius: 999px; z-index: 3; white-space: nowrap; backdrop-filter: blur(4px); transition: opacity .3s; }
.meet-phone.is-playing .meet-hint, .meet-phone.is-paused .meet-hint, .meet-phone.is-ended .meet-hint { opacity: 0; }
/* stickers and doodles around the phone */
.meet-sticker { position: absolute; top: -14px; right: -16px; font-family: var(--font-body); font-weight: 800; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pine-deep); background: var(--marigold); padding: .5em .85em .45em; border-radius: 6px; transform: rotate(7deg); box-shadow: 3px 3px 0 var(--pine-deep); z-index: 4; transition: transform .4s var(--ease-spring); }
.meet-spark { position: absolute; color: var(--marigold); font-size: 1.6rem; line-height: 1; animation: sparkle 2.8s ease-in-out infinite; pointer-events: none; z-index: 4; }
.meet-s1 { left: -30px; top: 12%; } .meet-s2 { right: -26px; top: 46%; font-size: 1.15rem; animation-delay: .9s; } .meet-s3 { left: -18px; bottom: 14%; font-size: 1.3rem; animation-delay: 1.6s; }
.meet-loop { position: absolute; width: 120px; left: -132px; top: 40%; color: var(--river); pointer-events: none; }
.meet-loop path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.meet.in .meet-loop path { animation: meet-draw 1.1s var(--ease-out) .5s forwards; }
.meet.in .meet-loop path + path { animation-delay: 1.4s; animation-duration: .4s; }
@keyframes meet-draw { to { stroke-dashoffset: 0; } }
@media (hover: hover) {
  .meet-phone:hover { transform: rotate(0deg) translateY(-6px); }
  .meet-phone:hover .meet-screen { box-shadow: 14px 14px 0 var(--marigold), var(--shadow-lift); }
  .meet-phone:not(.is-playing):hover .meet-video { transform: scale(1.04); }
  .meet-phone:not(.is-playing):hover .meet-btn { transform: scale(1.1); }
  .meet-phone:hover .meet-sticker { transform: rotate(-3deg) scale(1.08); }
}
.meet-phone.is-playing { transform: rotate(0deg); }
.meet-phone.is-playing .meet-screen { cursor: default; }
@media (max-width: 900px) {
  .meet { grid-template-columns: 1fr; gap: 34px; }
  .meet-phone { --tilt: -2deg; width: min(100%, 300px); }
  .meet-loop { display: none; }
  .meet-s1 { left: -14px; } .meet-s3 { left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .meet-ring, .meet-spark, .meet-eyebrow .spark { animation: none; }
  .meet-phone, .meet-screen, .meet-video, .meet-quote, .meet-sticker { transition: none; }
  .meet.in .meet-loop path { animation: none; stroke-dashoffset: 0; }
}


/* ============================================================
   Fall in Fredericton: the seasonal hero (homepage takeover) and
   /fall/. The skyline art stays; a drift of leaves goes over it.
   ============================================================ */
.fl-hero { position: relative; overflow: hidden; padding-top: 22px;
  background: linear-gradient(180deg, #FBF6EA 0%, #FBF3E1 45%, #F7E7C6 100%); }
.fl-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 26px; align-items: start; padding-top: 34px; padding-bottom: 10px; }
.fl-copy { position: relative; max-width: 640px; padding-left: clamp(0px, 4vw, 56px); }
.fl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--river); margin: 0 0 14px; }
.fl-eye-leaf { display: inline-block; width: 18px; height: 18px; color: #D9772B; animation: fl-eye 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
.fl-eye-leaf svg { width: 100%; height: 100%; display: block; }
@keyframes fl-eye { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.fl-title { position: relative; font-size: clamp(3rem, 7vw, 6.4rem); font-weight: 900; line-height: .96; margin: 0 0 16px; letter-spacing: -.015em; color: var(--pine-deep); }
.fl-hl { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(100deg, #D9772B 0%, #F0B030 35%, #B23A2E 70%, #D9772B 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; animation: fl-sheen 7s linear infinite; }
@keyframes fl-sheen { to { background-position: 220% center; } }
.fl-sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.2; color: var(--pine-deep); margin: 0 0 14px; }
.fl-lede { font-size: clamp(1rem, 1.7vw, 1.14rem); color: var(--ink-soft); max-width: 36em; margin: 0 0 22px; }
.fl-actions { margin-bottom: 22px; }
.fl-btn { background: #B23A2E; color: #fff; box-shadow: 0 4px 18px -6px rgba(178,58,46,.6); }
.fl-btn .arr { display: inline-block; transition: transform .3s var(--ease-spring); }
@media (hover: hover) { .fl-btn:hover { background: #8F2C22; color: #fff; transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 26px -8px rgba(178,58,46,.7); } .fl-btn:hover .arr { transform: translateX(5px); } }
.fl-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.fl-blink { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pine-deep); font-weight: 700; font-size: .95rem; line-height: 1.15; transition: transform .3s var(--ease-spring); }
.fl-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--pine-deep); color: #B23A2E; box-shadow: 3px 3px 0 var(--marigold); transition: transform .35s var(--ease-spring), box-shadow .3s; }
.fl-ic svg { width: 22px; height: 22px; }
.fl-ic-2 { color: #D9772B; } .fl-ic-3 { color: var(--river); }
.fl-ic-hw { color: #E8701A; }
.fl-ic-gift { color: #3FA34D; }
.fl-ic-poppy { color: #C1292E; }

/* ============================================================
   The lapel poppy.
   A poppy pinned beside the wordmark for the weeks the city
   wears one, linking to the Remembrance Day guide. The window
   is the Legion's: last Friday of October to November 11,
   computed rather than hardcoded and re-decided in the browser,
   so it arrives and retires without a deploy. No animation
   beyond a hover tilt. This is a convention, not decoration.
   ============================================================ */
/* The maple leaf floats above the "dy"; the poppy floats above the "ey", so
   the two read as a matched pair at opposite ends of the wordmark rather than
   one mark with something stuck to it. Earlier passes pinned it to the H and
   were wrong twice over: clear of the serif it read as a stray dot, on the
   stem it buried the letterform.
   `left` is a percentage, not a pixel offset. The logo is not a fixed width
   (159.5px at desktop, less under 1010px), and pixel offsets slid the poppy
   clean off the wordmark at narrower viewports. Checked at 390 and 900. */
.lapel { position: absolute; left: 25%; top: -3px; z-index: 2; line-height: 0; color: #C1292E;
  pointer-events: none; transform: translateX(-50%) rotate(-14deg); transform-origin: 50% 70%;
  transition: transform .45s var(--ease-spring); }
.lapel[hidden] { display: none; }
.lapel svg { width: 14px; height: 14px; display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); }
.lapel .lp-petals ellipse { fill: currentColor; }
/* The logo gives a little hat-tip on hover; a pin that stayed put while the
   jacket moved would read as a sticker. It tips with the mark. */
@media (hover: hover) { .brand:hover .lapel { transform: translateX(-50%) rotate(-17.5deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .lapel { transition: none; } }
@media (hover: hover) { .fl-blink:hover { transform: translateY(-2px); } .fl-blink:hover .fl-ic { transform: rotate(-6deg) scale(1.08); box-shadow: 5px 5px 0 var(--marigold); } }
.fl-side { position: relative; justify-self: end; width: min(100%, 400px); padding-top: 34px; }
.fl-side .hero-swag { position: relative; top: auto; right: auto; inset: auto; margin: 0 0 0 auto; }
.fl-skyline { position: relative; z-index: 2; width: 100%; aspect-ratio: 2170/376; background: url('/assets/harvest/hero-skyline-final.webp') center/cover no-repeat; margin-top: 8px; }
.fl-hero-page .fl-wrap { grid-template-columns: 1fr; }
.fl-hero-page .fl-copy { max-width: 720px; }

/* the leaves: fixed-shape SVGs that fall the height of the hero, sway, and spin */
.fl-leaves { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
/* No drop-shadow here. A filter on an animating element re-rasterises every
   frame, and fourteen of them bought a shadow nobody can see on a 34px leaf. */
.fl-leaf { position: absolute; top: -12%; left: var(--x); width: var(--sz); height: var(--sz); color: var(--c); opacity: 0;
  will-change: transform, opacity;
  animation: fl-fall var(--d) linear var(--del) infinite; }
.fl-leaf path { transform-origin: 50% 50%; }
/* The flutter used to be a quarter of the fall time, so a leaf took four
   seconds to turn over once and read as a dropped frame rather than a leaf.
   Fixed and quick now, and independent of how long the fall takes. */
.fl-leaf-m path { animation: fl-flutter 1.1s ease-in-out infinite; }
.fl-leaf-b path { animation: fl-flutter 1.45s ease-in-out infinite reverse; }
@keyframes fl-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  6%   { opacity: .95; }
  25%  { transform: translate3d(var(--sw), 28vh, 0) rotate(calc(var(--spin) * .25)); }
  50%  { transform: translate3d(calc(var(--sw) * -.6), 56vh, 0) rotate(calc(var(--spin) * .5)); }
  75%  { transform: translate3d(var(--sw), 84vh, 0) rotate(calc(var(--spin) * .75)); opacity: .95; }
  100% { transform: translate3d(calc(var(--sw) * -.3), 118vh, 0) rotate(var(--spin)); opacity: 0; }
}
@keyframes fl-flutter { 0%, 100% { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(70deg) scale(.92); } }
/* leaves settle in front of the skyline as they pass it: the ones lower down read as landing */
.fl-hero { --fl-h: 100%; }

/* --- /fall/ page pieces --- */
.fl-grid .card { --clc: #B23A2E; }
.fl-dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.fl-dates li { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(16,16,16,.14); }
.fl-dates time { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--river); font-variant-numeric: tabular-nums; }
.fl-dates a { color: var(--pine-deep); text-decoration: none; font-weight: 700; }
.fl-dates a:hover { color: #B23A2E; }
.fl-askband .bz-ask { --bz-ink: #101010; --bz-gold: #F0B030; }
@media (max-width: 900px) {
  .fl-wrap { grid-template-columns: 1fr; padding-top: 22px; }
  .fl-side { justify-self: center; padding-top: 6px; }
  .fl-dates { grid-template-columns: 1fr; }
  .fl-title { font-size: clamp(2.6rem, 12vw, 4rem); }
  .fl-leaf:nth-child(n+9) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-leaf { animation: none; opacity: .9; top: auto; bottom: 12%; transform: rotate(var(--spin)); }
  .fl-leaf path, .fl-eye-leaf, .fl-hl { animation: none; }
  .fl-hl { background-position: 30% center; }
}


/* ============================================================
   Fall feature tile on the guides hub (.gf): river backdrop, the Green
   as the main panel, the pumpkin arch as a tilted snapshot, six leaves.
   ============================================================ */
.gf { display: block; position: relative; overflow: hidden; border-radius: 22px; margin: 6px 0 28px; color: #fff; text-decoration: none; isolation: isolate;
  background: #2A1608; box-shadow: 0 22px 52px -26px rgba(42,22,8,.75); border: 1px solid rgba(255,255,255,.12);
  transition: transform .25s var(--ease-spring), box-shadow .3s ease; }
.gf-bg { position: absolute; inset: 0; z-index: 0; background: url('/assets/fall/feat-river.webp') center 62% / cover no-repeat; transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.gf-shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(38,18,8,.96) 0%, rgba(38,18,8,.9) 38%, rgba(38,18,8,.55) 62%, rgba(38,18,8,.28) 100%),
              radial-gradient(90% 120% at 100% 100%, rgba(240,176,48,.22), transparent 60%); }
.gf-leaves { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.gf-leaf { position: absolute; left: var(--x); top: -14%; width: var(--sz); height: var(--sz); color: var(--c); opacity: 0; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
  animation: gf-fall var(--d) linear var(--del) infinite; }
.gf-leaf svg { width: 100%; height: 100%; display: block; }
.gf-leaf path { transform-origin: 50% 50%; }
.gf-leaf-m path { animation: fl-flutter calc(var(--d) / 4) ease-in-out infinite; }
.gf-leaf-b path { animation: fl-flutter calc(var(--d) / 3) ease-in-out infinite reverse; }
@keyframes gf-fall {
  0%   { top: -14%; transform: translateX(0) rotate(0deg); opacity: 0; }
  8%   { opacity: .95; }
  50%  { transform: translateX(22px) rotate(calc(var(--spin) * .5)); }
  90%  { opacity: .9; }
  100% { top: 108%; transform: translateX(-14px) rotate(var(--spin)); opacity: 0; }
}
.gf-inner { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 30px); padding: clamp(20px, 3vw, 32px); }
.gf-copy { flex: 1 1 320px; min-width: min(100%, 300px); }
.gf-badge { color: #fff; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px 13px 5px 10px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.gf-badge svg { width: 14px; height: 14px; color: var(--marigold); animation: fl-eye 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
.gf-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 900; color: #fff; margin: 12px 0 6px; line-height: 1.02; letter-spacing: -.01em; }
.gf-title span { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(100deg, #F0B030 0%, #FFD36B 35%, #F09A3E 70%, #F0B030 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; animation: fl-sheen 7s linear infinite; }
.gf-lede { color: rgba(255,255,255,.9); font-size: 1.02rem; max-width: 54ch; margin: 0 0 16px; }
.gf-cta { display: inline-flex; align-items: center; gap: .5em; background: linear-gradient(135deg, #F7B500, #FF8A1F); color: #2a1500; font-weight: 800; padding: .72em 1.35em; border-radius: 999px; font-size: .95rem; }
.gf-cta .arr { display: inline-block; transition: transform .3s var(--ease-spring); }
.gf-media { position: relative; flex: 0 1 340px; align-self: stretch; min-height: 190px; margin: 6px 22px 22px 0; }
.gf-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 16px 36px -18px rgba(0,0,0,.7); display: block; }
.gf-snap { position: absolute; right: -22px; bottom: -22px; width: 30%; max-width: 118px; height: auto; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; background: #fff; padding: 5px; box-shadow: 0 12px 28px -8px rgba(0,0,0,.65); transform: rotate(6deg); transition: transform .4s var(--ease-spring); }
@media (hover: hover) {
  .gf:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 30px 64px -28px rgba(42,22,8,.9); }
  .gf:hover .gf-bg { transform: scale(1.06); }
  .gf:hover .gf-main { transform: scale(1.03); }
  .gf:hover .gf-snap { transform: rotate(-2deg) scale(1.06) translateY(-4px); }
  .gf:hover .gf-cta .arr { transform: translateX(5px); }
}
.gf-main { transition: transform .6s var(--ease-out); }
@media (max-width: 640px) {
  .gf-media { flex-basis: 100%; min-height: 180px; margin: 0 14px 18px 0; }
  .gf-leaf:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-leaf { animation: none; opacity: .9; top: auto; bottom: 8%; transform: rotate(var(--spin)); }
  .gf-badge svg, .gf-title span, .gf-leaf path { animation: none; }
  .gf-bg, .gf-main, .gf-snap { transition: none; }
}

/* ---- Hey Freddy Kids button in the homepage hero: the Kids logo in a white pill,
   marigold offset shadow, a "new" tag that wiggles like the one on the Kids page ---- */
.hero-kids { display: inline-flex; align-items: center; position: relative; padding: 8px 16px; border-radius: 999px; min-height: 52px;
  background: #fff; border: 1.5px solid var(--pine-deep); box-shadow: 3px 3px 0 #F5B52C; text-decoration: none;
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-spring); }
.hero-kids-logo { display: block; height: 34px; width: auto; transition: transform .35s var(--ease-spring); }
.hero-kids-new { position: absolute; top: -10px; right: -8px; background: #E4512F; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: .25em .6em; border-radius: 999px; border: 1.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transform: rotate(-6deg); animation: kd-wiggle 5s ease-in-out infinite; }
@media (hover: hover) {
  .hero-kids:hover { transform: translateY(-2px) scale(1.02); box-shadow: 5px 5px 0 #3F8FD8; }
  .hero-kids:hover .hero-kids-logo { transform: rotate(-2deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .hero-kids-new { animation: none; } }


/* ============================================================
   Newsletter capture: the one-liner under the TL;DR, the mid-article card,
   the slide-in / exit card, and the Ask Freddy nudge. All reduced-motion safe.
   ============================================================ */
.nl-lite { margin: 14px 0 6px; padding: 10px 14px; border: 1.5px dashed rgba(16,16,16,.28); border-radius: 14px; background: rgba(255,255,255,.55); }
.nl-lite-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .95rem; color: var(--ink); }
.nl-lite-ico { font-size: 1.05rem; }
.nl-lite-toggle { font: inherit; font-weight: 800; color: var(--river); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--marigold); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s; }
.nl-lite-toggle:hover { color: var(--pine-deep); }
.nl-lite.is-open { border-style: solid; background: #fff; }
.nl-lite-form .nl-form { margin-top: 10px; max-width: none; }
.nl-lite-form .nl-note { display: none; }
.nl-lite .nl-form.is-done .nl-msg { margin-top: 0; }

.nl-mid { margin: 30px 0; padding: 22px 24px; background: #fff; border: 1.5px solid var(--pine-deep); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--marigold); }
.nl-mid .eyebrow { margin-bottom: 4px; }
.nl-mid .nl-h { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; margin: 0 0 6px; line-height: 1.15; color: var(--ink); }
.nl-mid p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.nl-mid .nl-form { max-width: 520px; }

.nl-slide { position: fixed; z-index: 60; left: 18px; bottom: 18px; width: min(340px, calc(100vw - 36px)); padding: 18px 20px 14px; background: #fff; border: 1.5px solid var(--pine-deep); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--marigold), 0 24px 48px -20px rgba(12,12,12,.35);
  transform: translateY(24px); opacity: 0; transition: transform .45s var(--ease-spring), opacity .35s ease; }
.nl-slide.in { transform: none; opacity: 1; }
.nl-slide .eyebrow { margin-bottom: 4px; font-size: .68rem; }
.nl-slide .nl-h { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; line-height: 1.15; margin: 0 0 4px; padding-right: 28px; color: var(--ink); }
.nl-slide-copy { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.nl-slide .nl-form { margin-top: 10px; max-width: none; }
.nl-slide .nl-row { flex-wrap: nowrap; }
.nl-slide .nl-input { flex: 1 1 120px; }
.nl-slide .nl-note { font-size: .74rem; }
.nl-slide-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, transform .3s var(--ease-spring); }
.nl-slide-x:hover { background: rgba(16,16,16,.06); color: var(--pine-deep); transform: rotate(90deg); }
.nl-slide-x:focus-visible { outline: 3px solid var(--marigold); }
@media (max-width: 640px) {
  .nl-slide { right: 0; left: 0; bottom: 0; width: auto; max-height: 38vh; overflow: auto; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; box-shadow: 0 -12px 40px -16px rgba(12,12,12,.4); padding: 14px 18px calc(12px + env(safe-area-inset-bottom)); }
  .nl-slide .nl-note { display: none; }
  .nl-slide .nl-row { flex-wrap: wrap; }
  .nl-slide .nl-btn { flex: 1 1 100%; }
  body.nl-slide-open .chat-fab { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .25s ease, transform .3s var(--ease-spring); }
  body.nl-slide-open .nl-slide { padding-right: 18px; }
}

.msg.nl-ask { background: #FFF6DF; border: 1.5px dashed var(--marigold); }
.msg.nl-ask p { margin: 0 0 8px; font-weight: 600; }
.msg.nl-ask .nl-form { margin-top: 0; max-width: none; }
.msg.nl-ask .nl-note { display: none; }
.msg.nl-ask .nl-input { font-size: .9rem; padding: .5em .8em; }
.msg.nl-ask .nl-btn { padding: .5em 1em; font-size: .88rem; }

@media (prefers-reduced-motion: reduce) {
  .nl-slide { transition: opacity .2s ease; transform: none; }
  .nl-slide-x { transition: none; }
}


/* ============================================================
   Storm day (/snow-day/): the status panel and the five-question body.
   ============================================================ */
.sd-wrap { padding-top: clamp(36px, 6vw, 64px); padding-bottom: 70px; }
.sd-status { margin: 0 0 40px; padding: 24px 26px 18px; background: #fff; border: 1.5px solid var(--pine-deep); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--marigold); }
.sd-status.is-active { border-color: var(--danger); box-shadow: 6px 6px 0 var(--danger); }
.sd-status-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.sd-status-head .eyebrow { margin-bottom: 4px; }
.sd-headline { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.15; margin: 0 0 6px; }
.sd-sub { margin: 0; color: var(--ink-soft); max-width: 68ch; }
.sd-updated { margin: 0; font-size: .82rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.sd-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sd-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(16,16,16,.1); }
.sd-pill { flex: 0 0 auto; margin-top: 2px; min-width: 88px; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .35em .7em; border-radius: 999px; border: 1.5px solid currentColor; }
.sd-unknown { color: var(--ink-soft); background: var(--bg-soft); }
.sd-ok { color: #1F6B3A; background: #E3F3E7; }
.sd-warn { color: #8A5A00; background: var(--marigold-soft); }
.sd-bad { color: var(--danger); background: #FBE4E1; }
.sd-row-body { min-width: 0; }
.sd-row-label { font-weight: 800; color: var(--pine-deep); text-decoration: none; }
.sd-row-label:hover { color: var(--river); }
.sd-row-note { margin: 2px 0 0; font-size: .93rem; color: var(--ink-soft); }
.sd-alerts { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1.5px dashed rgba(16,16,16,.2); display: grid; gap: 8px; }
.sd-alerts li { font-size: .95rem; padding-left: 22px; position: relative; }
.sd-alerts li::before { content: '⚠'; position: absolute; left: 0; top: 0; color: var(--danger); }
.sd-alerts a { font-weight: 700; }
.sd-body { max-width: 760px; }
.sd-section { margin: 0 0 36px; }
.sd-section h2 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 0 0 12px; }
.sd-section p { margin: 0 0 12px; }
.sd-links { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.sd-links li { padding: 12px 16px; background: #fff; border: 1.5px solid rgba(16,16,16,.12); border-radius: var(--radius-sm); font-size: .97rem; }
.sd-more { font-size: .93rem; color: var(--ink-soft); padding-left: 14px; border-left: 3px solid var(--marigold); }
.sd-askband { margin-top: 10px; }
@media (max-width: 640px) {
  .sd-status { padding: 18px 16px 12px; }
  .sd-row { flex-direction: column; gap: 6px; }
  .sd-pill { min-width: 0; align-self: flex-start; }
}


/* ============================================================
   Freddy's picks (/events/this-weekend/): the Thursday editorial block.
   ============================================================ */
.picks { margin: 0 0 40px; padding: 26px 28px 20px; background: #fff; border: 1.5px solid var(--pine-deep); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--marigold); }
.picks-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.picks-head .eyebrow { margin-bottom: 4px; }
.picks-head h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.12; margin: 0 0 8px; }
.picks-head h2::after { display: none; }
.picks-intro { margin: 0; color: var(--ink-soft); max-width: 66ch; }
.picks-updated { margin: 4px 0 0; font-size: .82rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.picks-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; }
.pick { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(16,16,16,.1); }
.pick-n { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--marigold); color: var(--pine-deep); font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.pick-body { min-width: 0; }
.pick-title { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.2; margin: 4px 0 2px; }
.pick-title a { color: var(--pine-deep); text-decoration: none; }
.pick-title a:hover { color: var(--river); }
.pick-meta { margin: 0 0 4px; font-size: .88rem; font-weight: 700; color: var(--river); }
.pick-why { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.picks-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1.5px dashed rgba(16,16,16,.2); font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .picks { padding: 18px 16px 14px; }
  .pick { gap: 12px; }
  .pick-n { flex-basis: 28px; height: 28px; font-size: .95rem; }
}


/* ============================================================
   Holidays hub (/holidays/): the /fall/ hero in a winter coat.
   ============================================================ */
.hl-hero { background: linear-gradient(180deg, #0F1D2B 0%, #16304A 55%, #1E4062 100%); color: #F4EFE4; }
.hl-hero .fl-title, .hl-hero .fl-sub, .hl-hero .fl-lede { color: #F4EFE4; }
.hl-hero .fl-lede { color: rgba(244,239,228,.82); }
.hl-eyebrow { color: var(--marigold); }
.hl-hl { background-image: linear-gradient(100deg, #F0B030 0%, #FFE08A 40%, #F0B030 70%, #FFD25E 100%); }
.hl-year { display: inline-block; margin-left: .15em; font-size: .55em; vertical-align: .35em; padding: .1em .5em; border: 2px solid var(--marigold); border-radius: 999px; color: var(--marigold); letter-spacing: .06em; }
.hl-btn { background: var(--marigold); color: var(--pine-deep); box-shadow: 0 4px 18px -6px rgba(240,176,48,.6); }
@media (hover: hover) { .hl-btn:hover { background: #FFD25E; color: var(--pine-deep); } }
.hl-hero .hero-actions .btn-ghost { color: #F4EFE4; border-color: rgba(244,239,228,.55); background: transparent; }
@media (hover: hover) { .hl-hero .hero-actions .btn-ghost:hover { background: rgba(244,239,228,.12); color: #fff; border-color: #fff; } }
.hl-flake { filter: drop-shadow(0 0 4px rgba(255,255,255,.45)); opacity: 0; }
.hl-flake circle { transform-origin: 50% 50%; }
.hl-skyline { filter: invert(.92) hue-rotate(190deg) saturate(.6) brightness(.9); margin-top: 18px; }
.hl-dates .hl-tbc a { color: var(--ink-soft); }
.hl-dates .hl-tbc time::after { content: ' ?'; color: var(--ink-soft); }
.hl-coming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hl-coming li { padding: 18px 20px; background: #fff; border: 1.5px dashed rgba(16,16,16,.3); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.hl-coming strong { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; }
.hl-coming span { color: var(--ink-soft); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .hl-flake { animation: none; opacity: .6; top: auto; } }

/* guide-mini rows (fall and holidays hubs): the 1fr columns used to grow to the
   chip's nowrap width on phones and push the page sideways. Clamp them. */
.guide-mini-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .guide-mini-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .guide-mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-mini { min-width: 0; overflow: hidden; }
.guide-mini .guide-mini-meta { white-space: normal; }


/* ============================================================
   /fall/ hero: the fall-walk video (the homepage phone player, re-used) and the social row.
   ============================================================ */
.fl-hero-page.fl-hero-video .fl-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.fl-side-video { justify-self: end; width: min(100%, 340px); padding: 18px 16px 0 0; }
.fl-phone { --tilt: 3deg; }
.fl-phone .meet-screen { box-shadow: 10px 10px 0 #B23A2E, var(--shadow-lift); }
.fl-phone .meet-sticker { background: #F0B030; }
.fl-social { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.fl-social-h { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--river); margin-right: 6px; }
.fl-social-a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2px solid var(--pine-deep); color: var(--pine-deep); box-shadow: 3px 3px 0 var(--marigold); transition: transform .3s var(--ease-spring), background .2s, color .2s; }
.fl-social-a svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) { .fl-social-a:hover { transform: translateY(-2px) rotate(-6deg); background: var(--pine-deep); color: #fff; } }
@media (max-width: 900px) {
  .fl-hero-page.fl-hero-video .fl-wrap { grid-template-columns: 1fr; }
  .fl-side-video { justify-self: center; width: min(100%, 300px); padding: 8px 0 0; margin-bottom: 10px; }
}


/* ============================================================
   /fall/ guides grid: the pumpkin-patch video tile (first cell, two rows tall on desktop).
   ============================================================ */
.fl-vtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 22px 18px 20px; text-align: center; background: #fff; border: 1.5px solid var(--pine-deep); box-shadow: 6px 6px 0 #B23A2E; grid-row: span 2; }
.fl-vtile .eyebrow { margin: 0; }
.fl-vphone { --tilt: 0deg; width: min(100%, 250px); margin: 6px 0 4px; }
.fl-vphone .meet-screen { box-shadow: 8px 8px 0 var(--marigold), var(--shadow-lift); border-radius: 24px; }
.fl-vphone .meet-sticker { right: -12px; top: -10px; }
.fl-vtile-cap h3 { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.2; margin: 0 0 6px; }
.fl-vtile-cap p { margin: 0 0 10px; color: var(--ink-soft); font-size: .93rem; }
.fl-vtile-cap .more-link { font-size: .92rem; }
@media (max-width: 640px) { .fl-vtile { grid-row: auto; } .fl-vphone { width: min(100%, 230px); } }


/* ============================================================
   Seasonal skin: the Halloween guide (.theme-halloween).
   Opt-in per article via `theme` in the article module, so it
   cannot reach the other 440 guides. Decoration only: the
   markup, headings, schema and copy are untouched, the sky
   layer is aria-hidden, and every animation stops under
   prefers-reduced-motion. Compositor-only transforms, no
   filters on moving elements (see the fall leaves for why).
   ============================================================ */
.theme-halloween { --hw-night: #1A2E4B; --hw-deep: #13223A; --hw-pumpkin: #E8701A; --hw-ember: #F0B030; --hw-slime: #7BC043; --hw-moon: #F6EFD8; }

/* The header becomes a contained night card, so the band always ends exactly
   where the header does. The first version sized the sky by guesswork and the
   meta line fell off the bottom of it onto cream, in light grey. */
.theme-halloween .page-head { position: relative; overflow: hidden; border-radius: 22px; isolation: isolate;
  padding: clamp(44px, 6vw, 86px) clamp(22px, 4vw, 46px) clamp(26px, 3vw, 38px);
  background: radial-gradient(900px 520px at 88% 6%, rgba(240,176,48,.30) 0%, rgba(240,176,48,.06) 44%, transparent 70%),
    linear-gradient(158deg, var(--hw-deep) 0%, var(--hw-night) 48%, #223A5C 100%); }
.theme-halloween .page-head > *:not(.hw-sky) { position: relative; z-index: 1; }
.hw-sky { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; }
.hw-moon { position: absolute; right: 6%; top: 34px; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #FFFDF4 0%, var(--hw-ember) 62%, #D99E2E 100%);
  -webkit-mask: radial-gradient(circle at 74% 30%, transparent 0 48%, #000 49%);
  mask: radial-gradient(circle at 74% 30%, transparent 0 48%, #000 49%); }
.hw-moonglow { position: absolute; right: 6%; top: 34px; width: 92px; height: 92px; border-radius: 50%;
  box-shadow: 0 0 70px 26px rgba(240,176,48,.26); }
.hw-stars { position: absolute; inset: 0 0 38% 0; opacity: .85;
  background-image: radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent), radial-gradient(1.4px 1.4px at 28% 9%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 41% 31%, #FFF6DA, transparent), radial-gradient(1.7px 1.7px at 57% 14%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 69% 27%, #fff, transparent), radial-gradient(1.5px 1.5px at 83% 11%, #FFF6DA, transparent),
    radial-gradient(1.2px 1.2px at 92% 29%, #fff, transparent), radial-gradient(1.4px 1.4px at 7% 38%, #fff, transparent);
  animation: hw-twinkle 5.5s ease-in-out infinite; }
@keyframes hw-twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .45; } }
.hw-fog { position: absolute; left: -50%; right: -50%; height: 150px; bottom: 6%; pointer-events: none;
  background: radial-gradient(60% 100% at 20% 60%, rgba(214,200,224,.17), transparent 70%), radial-gradient(55% 100% at 62% 45%, rgba(232,112,26,.10), transparent 70%); }
.hw-fog1 { animation: hw-drift 34s linear infinite; }
.hw-fog2 { bottom: 14%; opacity: .7; animation: hw-drift 52s linear infinite reverse; }
@keyframes hw-drift { to { transform: translate3d(28%, 0, 0); } }
.hw-ridge { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(58px, 7vw, 96px);
  background: url('/assets/harvest/hero-skyline-final.webp') bottom center/cover no-repeat; filter: brightness(0); opacity: .55; }

/* --- bats: the span flies, the svg flaps, both composited --- */
.hw-bat { position: absolute; left: var(--x); top: var(--y); width: var(--w); color: #0B1526;
  animation: hw-fly var(--d) linear var(--del) infinite; will-change: transform; }
.hw-bat-svg { display: block; width: 100%; height: auto; animation: hw-flap .42s ease-in-out infinite; }
@keyframes hw-fly {
  0%   { transform: translate3d(-18vw, 0, 0); opacity: 0; }
  8%   { opacity: .85; }
  35%  { transform: translate3d(14vw, -26px, 0); }
  65%  { transform: translate3d(38vw, 16px, 0); }
  92%  { opacity: .85; }
  100% { transform: translate3d(74vw, -12px, 0); opacity: 0; }
}
@keyframes hw-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.42); } }

/* --- the countdown chip, filled by initHalloween() in app.js --- */
.hw-count { position: absolute; left: 50%; transform: translateX(-50%); top: 18px; z-index: 3;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--hw-night);
  background: var(--hw-ember); padding: .5em 1em .45em; border-radius: 999px; box-shadow: 0 0 22px -4px rgba(240,176,48,.8); white-space: nowrap; }
.hw-count:empty { display: none; }

/* --- the header, sitting on the night --- */
.theme-halloween .page-head h1 { color: var(--hw-moon); text-shadow: 0 2px 26px rgba(0,0,0,.55); }
.theme-halloween .guide-eyebrow, .theme-halloween .guide-eyebrow a { color: var(--hw-ember); }
.theme-halloween .gcluster-chip { background: rgba(246,239,216,.12); color: var(--hw-moon); }
.theme-halloween .guide-meta { color: rgba(246,239,216,.74); }
.theme-halloween .page-head h1::after { background: var(--hw-ember); }
/* self-contained dark card, so it reads whether or not it overhangs the fade */
.theme-halloween .quick-answer { background: rgba(12,10,18,.86); border-color: var(--hw-pumpkin); color: #F3EDE0;
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(232,112,26,.25); backdrop-filter: blur(3px); }
.theme-halloween .quick-answer strong { color: var(--hw-ember); }
.theme-halloween .quick-answer a { color: var(--hw-ember); }
.theme-halloween .qa-badge { background: var(--hw-pumpkin); color: #140F09; }

/* --- headings get a drip --- */
.theme-halloween section > h2 { position: relative; padding-bottom: 14px; }
.theme-halloween section > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, 190px); height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Crect width='120' height='5' fill='%23E8701A'/%3E%3Ccircle cx='14' cy='6' r='4' fill='%23E8701A'/%3E%3Ccircle cx='46' cy='8' r='3' fill='%23E8701A'/%3E%3Ccircle cx='78' cy='5.5' r='4.5' fill='%23E8701A'/%3E%3Ccircle cx='104' cy='7' r='2.5' fill='%23E8701A'/%3E%3C/svg%3E") repeat-x; background-size: 120px 14px; transform-origin: left center; transform: scaleX(0);
  transition: transform .7s var(--ease-out) .1s; }
.theme-halloween section.in > h2::after { transform: scaleX(1); }

/* --- the day-by-day rundown --- */
/* Deliberately one column. Two columns inside a 720px article left each card
   about 340px wide, which is narrower than the time-plus-description row needs,
   and every card stretched to match the tallest in its row. */
.hw-days { display: grid; gap: 16px; margin: 26px 0 18px; align-items: start; }
.hw-day { position: relative; background: linear-gradient(165deg, #1B1524 0%, #241A2B 100%); color: #EDE6DA;
  border-radius: 16px; padding: 18px 20px 16px; border: 1px solid rgba(232,112,26,.28);
  box-shadow: 0 16px 40px -28px rgba(0,0,0,.9); transition: transform .4s var(--ease-spring), box-shadow .35s, border-color .35s; }
@media (hover: hover) { .hw-day:hover { transform: translateY(-4px) rotate(-.25deg); border-color: var(--hw-pumpkin);
  box-shadow: 0 22px 54px -26px rgba(0,0,0,.95), 0 0 34px -12px rgba(232,112,26,.55); } }
.hw-dayhead { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-family: var(--font-display); }
.hw-dow { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hw-ember); }
.hw-date { font-size: 1.22rem; font-weight: 800; color: #FFF7E8; }
.hw-note { margin: 0 0 12px; font-size: .9rem; color: #C9BBD6; font-style: italic; }
.hw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hw-ev { display: grid; grid-template-columns: 116px 1fr; gap: 4px 14px; align-items: baseline; font-size: .93rem; line-height: 1.5; }
.hw-ev .hw-time { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-ember); font-variant-numeric: tabular-nums; }
.hw-ev .hw-what { color: #DCD2C6; }
.hw-ev .hw-what strong { color: #FFF7E8; }
.hw-ev a { color: var(--hw-ember); }
.hw-scare { grid-column: 1 / -1; justify-self: start; order: -1; font-size: .64rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; padding: .3em .7em .25em; border-radius: 999px; }
.hw-scare[data-s="1"] { background: rgba(123,192,67,.18); color: var(--hw-slime); }
.hw-scare[data-s="2"] { background: rgba(240,176,48,.18); color: var(--hw-ember); }
.hw-scare[data-s="3"] { background: rgba(232,112,26,.22); color: #FF9A4D; }
@media (max-width: 560px) { .hw-ev { grid-template-columns: 1fr; gap: 2px; } .hw-day { padding: 16px 16px 14px; } }
.hw-caveat { font-size: .93rem; color: var(--ink-soft); border-left: 3px solid var(--hw-pumpkin); padding-left: 14px; }
.hw-earlier { margin-top: 18px; font-size: .93rem; }
.hw-earlier summary { cursor: pointer; font-weight: 700; color: var(--hw-pumpkin); }
.hw-earlier ul { margin-top: 10px; color: var(--ink-soft); }

/* --- links and callouts in season --- */
.theme-halloween .callout { border-color: var(--hw-pumpkin); box-shadow: 4px 4px 0 rgba(232,112,26,.25); }
@media (hover: hover) { .theme-halloween section p a:hover { color: var(--hw-pumpkin); } }

@media (max-width: 760px) {
  .hw-moon { right: 18px; top: 26px; width: 58px; height: 58px; }
  .theme-halloween .page-head { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-stars, .hw-fog, .hw-bat, .hw-bat-svg { animation: none; }
  .hw-bat { opacity: .8; }
  .theme-halloween section > h2::after { transition: none; transform: scaleX(1); }
  .hw-day { transition: none; }
}

/* ============================================================
   Seasonal skin: Remembrance Day (.theme-remembrance).
   The brief was "stunning like Hallowe'en", and the right answer
   for this subject is the opposite of Hallowe'en: a cold dawn
   instead of a night, five poppies falling slowly instead of a
   flock of bats, one thin horizon line, and nothing that glows,
   pulses or bounces. Decoration only; the copy, headings and
   schema are untouched and all motion stops under
   prefers-reduced-motion.
   ============================================================ */
.theme-remembrance { --rd-night: #1C2638; --rd-dawn: #40536B; --rd-pale: #93A7BC; --rd-poppy: #C1292E; --rd-ink: #F2EFE8; }
.theme-remembrance .page-head { position: relative; overflow: hidden; border-radius: 22px; isolation: isolate;
  padding: clamp(44px, 6vw, 86px) clamp(22px, 4vw, 46px) clamp(26px, 3vw, 38px);
  background: linear-gradient(176deg, #141C2B 0%, var(--rd-night) 34%, var(--rd-dawn) 72%, #7E8EA0 100%); }
.theme-remembrance .page-head > *:not(.rd-sky) { position: relative; z-index: 1; }
.rd-sky { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; }
.rd-horizon { position: absolute; left: 0; right: 0; bottom: clamp(52px, 6.5vw, 88px); height: 1px; background: linear-gradient(90deg, transparent, rgba(240,176,48,.55) 22%, rgba(240,176,48,.55) 78%, transparent); }
.rd-ridge { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(54px, 6.5vw, 90px);
  background: url('/assets/harvest/hero-skyline-final.webp') bottom center/cover no-repeat; filter: brightness(0); opacity: .42; }

/* five poppies, falling the long way. No spin: they turn, they do not tumble. */
.rd-poppy { position: absolute; top: -12%; left: var(--x); width: var(--w); color: var(--rd-poppy); opacity: 0;
  will-change: transform; animation: rd-fall var(--d) linear var(--del) infinite; }
.rd-poppy-svg { display: block; width: 100%; height: auto; }
/* vh, not %. A percentage in translate resolves against the element's own box,
   so a 13px poppy moved 13px and the five of them sat in a row at the top. */
@keyframes rd-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(-6deg); opacity: 0; }
  12%  { opacity: .78; }
  50%  { transform: translate3d(20px, 34vh, 0) rotate(9deg); }
  86%  { opacity: .78; }
  100% { transform: translate3d(-12px, 72vh, 0) rotate(-5deg); opacity: 0; }
}

.theme-remembrance .page-head h1 { color: var(--rd-ink); text-shadow: 0 2px 22px rgba(0,0,0,.45); }
.theme-remembrance .guide-eyebrow, .theme-remembrance .guide-eyebrow a { color: #E7B9A0; }
.theme-remembrance .gcluster-chip { background: rgba(242,239,232,.14); color: var(--rd-ink); }
.theme-remembrance .guide-meta { color: rgba(242,239,232,.74); }
.theme-remembrance .page-head h1::after { background: var(--rd-poppy); }
.theme-remembrance .quick-answer { background: rgba(16,22,34,.84); border-color: rgba(193,41,46,.8); color: #EFEAE1;
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.85); backdrop-filter: blur(3px); }
.theme-remembrance .quick-answer strong { color: #F0C9A8; }
.theme-remembrance .quick-answer a { color: #F0C9A8; }
.theme-remembrance .qa-badge { background: var(--rd-poppy); color: #FFF4F1; }

/* a short red rule under each heading, drawn once, no drips */
.theme-remembrance section > h2 { position: relative; padding-bottom: 12px; }
.theme-remembrance section > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 76px; height: 3px;
  background: var(--rd-poppy); transform-origin: left center; transform: scaleX(0); transition: transform .8s var(--ease-out) .1s; }
.theme-remembrance section.in > h2::after { transform: scaleX(1); }

/* the ceremony roster: quiet, not a card deck */
.rd-days { display: grid; gap: 14px; margin: 24px 0 18px; }
.rd-day { border-left: 3px solid var(--rd-poppy); padding: 2px 0 2px 18px; }
.rd-dayhead { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-family: var(--font-display); }
.rd-dow { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-poppy); }
.rd-date { font-size: 1.16rem; font-weight: 800; color: var(--pine-deep); }
.rd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.rd-ev { display: grid; grid-template-columns: 136px 1fr; gap: 3px 16px; align-items: baseline; line-height: 1.55; }
.rd-time { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--river); font-variant-numeric: tabular-nums; }
.rd-what { color: var(--ink-soft); }
.rd-what strong { color: var(--pine-deep); }
.rd-caveat { font-size: .94rem; color: var(--ink-soft); border-left: 3px solid rgba(16,16,16,.18); padding-left: 16px; }
@media (max-width: 560px) { .rd-ev { grid-template-columns: 1fr; gap: 1px; } .rd-day { padding-left: 14px; } }

@media (max-width: 760px) { .theme-remembrance .page-head { border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .rd-poppy { animation: none; opacity: .7; top: auto; bottom: 24%; }
  .theme-remembrance section > h2::after { transition: none; transform: scaleX(1); }
}

/* ============================================================
   /newsletter/ sign-up page: matches the newsletter ad. Cream paper, big
   Fraunces headline with a hand-drawn gold underline, and doodles that play
   on hover (mouse) or tap (touch). app.js adds .is-play; see [data-doodle].
   ============================================================ */
.nlp { position: relative; overflow: hidden; padding: clamp(34px, 6vw, 70px) 16px clamp(14px, 3vw, 30px); }
.nlp-stage { position: relative; max-width: 1080px; margin: 0 auto; text-align: center; }
.nlp-copy { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.nlp-eyebrow { margin: 0 0 14px; font-weight: 800; font-size: clamp(.82rem, 1.5vw, 1rem); letter-spacing: .24em; text-transform: uppercase; color: var(--river); }
.nlp-h1 { font-size: clamp(2.7rem, 8.6vw, 5.8rem); line-height: 1.02; letter-spacing: -.012em; margin: 0 auto 24px; max-width: none; }
.nlp-under {
  padding-bottom: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M6 26c90-14 210-18 330-12s180 6 258-4' fill='none' stroke='%23F0B030' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .2em no-repeat;
  animation: nlp-ul 1s .35s var(--ease-out) both;
}
@keyframes nlp-ul { from { background-size: 0% .2em; } to { background-size: 100% .2em; } }
.nlp-lede { font-size: clamp(1.08rem, 2.1vw, 1.34rem); line-height: 1.5; color: var(--ink); max-width: 31em; margin: 0 auto 28px; }
.nlp-form .nl-form { max-width: 580px; margin: 0 auto; }
.nlp-form .nl-input { font-size: 1.05rem; padding: .95em 1.2em; }
.nlp-form .nl-btn { padding: .95em 1.6em; font-size: 1.05rem; }
.nlp-form .nl-btn::after { content: "→"; margin-left: .45em; transition: transform .2s var(--ease-out); }
@media (hover: hover) { .nlp-form .nl-btn:hover::after { transform: translateX(4px); } }
.nlp-form .nl-note { text-align: center; }
.nlp-form .nl-onlist { font-family: var(--font-display); font-size: 1.3rem; }

/* doodles */
.nlp-d { position: absolute; z-index: 1; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.nlp-d > svg, .nlp-card-ic > svg { width: 100%; height: auto; overflow: visible; }
.nlp-d > svg { animation: nlp-bob 6s ease-in-out infinite; }
.nlp-heart > svg { animation-delay: -1.5s; } .nlp-star > svg { animation-delay: -3s; } .nlp-plane > svg { animation-delay: -4.2s; } .nlp-squig > svg { animation-delay: -2.2s; }
@keyframes nlp-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
.nlp-sun   { left: 1%;  top: 2%;  width: 120px; }
.nlp-plane { right: 0;  top: -3%; width: 196px; }
.nlp-heart { left: 6%;  top: 47%; width: 64px; }
.nlp-dashl { left: 3%;  top: 66%; width: 58px; }
.nlp-dashr { right: 3%; top: 49%; width: 66px; }
.nlp-star  { right: 6%; top: 73%; width: 92px; }
.nlp-squig { left: 1%;  bottom: 5%; width: 176px; }
.nlp svg g, .nlp svg path, .nlp svg circle { transform-box: fill-box; transform-origin: center; }
.nlp .dd-trail { stroke-dashoffset: 0; }
.nlp .dd-draw { stroke-dasharray: 100; stroke-dashoffset: 0; }

.is-play .dd-rays { animation: dd-spin .95s var(--ease-out); }
.is-play .dd-face { animation: dd-bounce .6s var(--ease-spring); }
.is-play .dd-wink { animation: dd-wink .55s ease-in-out; }
.is-play .dd-plane { animation: dd-fly 1.5s ease-in-out; }
.is-play .dd-trail { animation: dd-dash 1.5s linear; }
.is-play .dd-beat { animation: dd-beat .8s ease-in-out; }
.is-play .dd-spin { animation: dd-spinpop 1s var(--ease-spring); }
.is-play .dd-draw { animation: dd-redraw 1.1s var(--ease-out); }
.is-play .dd-flick { animation: dd-flick .6s ease-in-out; }
.is-play .dd-leaf { animation: dd-twirl 1.1s var(--ease-out); }
@keyframes dd-spin { to { transform: rotate(360deg); } }
@keyframes dd-bounce { 40% { transform: scale(1.14); } 70% { transform: scale(.96); } }
@keyframes dd-wink { 40%, 60% { transform: scaleY(.15); } }
@keyframes dd-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  44% { transform: translate(150px, -130px) rotate(-14deg); opacity: 0; }
  46% { transform: translate(-200px, 120px) rotate(10deg); opacity: 0; }
  100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}
@keyframes dd-dash { to { stroke-dashoffset: -120; } }
@keyframes dd-beat { 15% { transform: scale(1.32); } 30% { transform: scale(.94); } 45% { transform: scale(1.18); } 65% { transform: scale(1); } }
@keyframes dd-spinpop { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.3); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes dd-redraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes dd-flick { 25% { transform: rotate(-18deg) translateY(-4px); } 60% { transform: rotate(12deg); } }
@keyframes dd-twirl { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-200deg) translateY(-10px) scale(1.1); } 100% { transform: rotate(-360deg) translateY(0); } }

/* little hearts that float off the big one */
.nlp-mini { position: absolute; z-index: 3; width: 22px; pointer-events: none; animation: nlp-mini 1.2s var(--ease-out) forwards; }
.nlp-mini svg { width: 100%; height: auto; }
@keyframes nlp-mini { from { transform: translate(0, 0) scale(.5) rotate(0); opacity: 1; } to { transform: translate(var(--dx, 0px), -90px) scale(1) rotate(var(--rot, 0deg)); opacity: 0; } }

/* envelope: the letter slides up on hover / tap */
.nlp-env { position: relative; z-index: 1; width: min(400px, 76vw); margin: clamp(26px, 4vw, 40px) auto 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nlp-env svg { width: 100%; height: auto; overflow: visible; }
.nlp-env-rays { position: absolute; inset: 0; transition: transform .45s var(--ease-spring), opacity .3s; }
.nlp-letter { transform-box: view-box; transform-origin: 0 0; transition: transform .5s var(--ease-spring); }
.nlp-env.is-open .nlp-letter { transform: translateY(-42px); }
.nlp-env.is-open .nlp-env-rays { transform: scale(1.08); }
@media (hover: hover) { .nlp-env:hover .nlp-letter { transform: translateY(-42px); } .nlp-env:hover .nlp-env-rays { transform: scale(1.08); } }
.is-play .nlp-env-rays { animation: dd-rays .7s ease-out; }
@keyframes dd-rays { 40% { opacity: .35; transform: scale(1.16); } }

/* why-subscribe cards */
.nlp-why { padding: clamp(18px, 4vw, 40px) 0 clamp(40px, 7vw, 76px); }
.nlp-card-ic { display: block; width: 64px; height: 64px; margin: 0 auto 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nlp-card-ic svg { height: 64px; }
.nlp-play { text-align: center; color: var(--ink-soft); font-size: .92rem; margin: 22px 0 0; }

@media (max-width: 760px) {
  .nlp-stage { padding-top: 78px; }
  .nlp-sun { left: -6px; top: -2px; width: 72px; }
  .nlp-plane { right: -8px; top: -6px; width: 104px; }
  .nlp-heart { left: -4px; top: auto; bottom: 104px; width: 40px; }
  .nlp-star { right: -4px; top: auto; bottom: 118px; width: 48px; }
  .nlp-squig { left: -18px; bottom: 8px; width: 74px; }
  .nlp-dashl, .nlp-dashr { display: none; }
  .nlp-env { width: min(280px, 62vw); }
  .nlp-form .nl-input { flex: 1 1 100%; }
  .nlp-form .nl-btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nlp *, .nlp-why * { animation: none !important; transition: none !important; }
  .nlp-under { background-size: 100% .2em; }
}


/* ============================================================
   /newsletter/ video band: Amanda’s 30-second tour of the email.
   Re-uses the homepage phone player (.meet-*), mirrored so the
   phone sits to the left of the copy. .nlv-*
   ============================================================ */
.nlv { padding: clamp(24px, 4.5vw, 54px) 0 clamp(6px, 1.5vw, 18px); overflow: hidden; }
.nlv-in { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr); gap: clamp(26px, 5vw, 66px); align-items: center; }
.nlv-phone { --tilt: 2.6deg; justify-self: center; width: min(100%, 300px); }
.nlv-copy { max-width: 36em; }
.nlv-eyebrow { margin: 0 0 10px; font-weight: 800; font-size: clamp(.78rem, 1.3vw, .88rem); letter-spacing: .22em; text-transform: uppercase; color: var(--river); }
.nlv-h2 { font-size: clamp(1.55rem, 3.2vw, 2.35rem); line-height: 1.1; margin: 0 0 .42em; max-width: 13em; text-wrap: balance; }
.nlv-h2 .hl { color: var(--river); }
.nlv-lede { font-size: clamp(1rem, 1.6vw, 1.08rem); line-height: 1.55; color: var(--ink-soft); margin: 0 0 20px; max-width: 32em; }
.nlv-quote { max-width: 30em; }
.nlv .meet-transcript { margin-top: 16px; }
.nlv .meet-actions .btn-ghost .arr { display: inline-block; transition: transform .3s var(--ease-spring); }
@media (hover: hover) { .nlv .meet-actions .btn-ghost:hover .arr { transform: translateY(-4px); } }
#nl-signup { scroll-margin-top: 110px; }
.nlv .meet-s1 { left: -22px; top: 10%; }
.nlv .meet-s2 { right: -20px; top: 42%; }
@media (max-width: 900px) {
  .nlv-in { grid-template-columns: 1fr; gap: 30px; }
  .nlv-phone { --tilt: 2deg; width: min(100%, 268px); }
  .nlv-copy { max-width: none; }
  .nlv-h2, .nlv-lede, .nlv-quote { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nlv .meet-phone, .nlv .meet-screen, .nlv .meet-video, .nlv .meet-quote, .nlv .meet-sticker { transition: none; }
  .nlv .meet-ring, .nlv .meet-spark { animation: none; }
}

/* ---------- Hey Freddy Kids: the camps directory (/kids/camps/, /kids/march-break/) ---------- */
.cp-hero { --fl-accent: var(--marigold); }
.cp-hl { background-image: linear-gradient(100deg, #A06E14 0%, #F0B030 40%, #D9772B 70%, #A06E14 100%); }
.cp-hero-mb .cp-hl { background-image: linear-gradient(100deg, #2B5A8A 0%, #7FB7E6 40%, #3C7FBF 70%, #2B5A8A 100%); }
.cp-narrow { max-width: 820px; }
.cp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cp-fact { background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.cp-fact b { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 6px; }
.cp-fact p { margin: 0; font-size: .94rem; color: var(--ink-soft); line-height: 1.5; }
.cp-opens { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.cp-opens li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 10px 14px; background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-radius: var(--radius-sm); }
.cp-opens-m { font-family: var(--font-display); font-weight: 700; color: var(--river); line-height: 1.3; }
.cp-opens-wide li { grid-template-columns: 13.5em minmax(0, 1fr); }
.cp-opens a { color: var(--ink); text-decoration: none; }@media (hover: hover){.cp-opens a:hover{ text-decoration: underline; }}
.cp-filters { background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-radius: var(--radius); padding: 14px 16px 12px; margin: 4px 0 18px; box-shadow: var(--shadow); }
.cp-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.cp-frow + .cp-frow { border-top: 1px dashed rgba(12,12,12,.12); }
.cp-flabel { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #A79F8E; min-width: 56px; }
.cp-chip { min-height: 38px; padding: .35em .9em; font-size: .84rem; }
.cp-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); padding: 4px 8px; cursor: pointer; }
.cp-toggle input { accent-color: var(--pine); width: 16px; height: 16px; }
.cp-search { margin-top: 8px; align-items: center; }
.cp-count { font-size: .86rem; font-weight: 700; color: var(--river); white-space: nowrap; }
.cp-group { margin-top: clamp(24px, 4vw, 40px); }
.cp-group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; padding-left: 16px; border-left: 5px solid var(--marigold); }
.cp-group-head h3 { margin: 0; font-size: 1.3rem; }
.cp-group-head p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.cp-group-n { display: inline-block; margin-left: 6px; font-size: .8rem; font-weight: 800; color: var(--river); background: var(--marigold-soft); border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cp-card, .cp-act { position: relative; min-width: 0; background: var(--card); border: 1.5px solid rgba(12,12,12,.14); border-top: 6px solid var(--marigold); border-radius: var(--radius); padding: 18px 20px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.cp-card[hidden], .cp-group[hidden], [data-cp-group][hidden] { display: none !important; }
.cp-tbc { border-style: dashed; border-top-style: solid; border-top-color: #CDBF9A; }
.cp-act-free { border-top-color: #7FB7E6; }
.cp-card-head h3, .cp-act h3 { margin: 4px 0 8px; font-size: 1.12rem; line-height: 1.25; }
.cp-provider { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--river); }
.cp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-badge { font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--sage); color: var(--ink-soft); }
.cp-badge-age { background: var(--marigold-soft); color: var(--river); }
.cp-badge-free { background: #DFF1DA; color: #2E6B2A; }
.cp-badge-care { background: #E3EEF9; color: #2B5A8A; }
.cp-badge-fr { background: #F3E3EC; color: #8A2B5A; }
.cp-badge-tbc { background: #FBEFD2; color: #8A5A10; border: 1px dashed #CDBF9A; }
.cp-rows { margin: 0; display: grid; gap: 5px; }
.cp-rows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: .9rem; line-height: 1.45; }
.cp-rows dt { font-weight: 800; color: #A79F8E; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
.cp-rows dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cp-notes, .cp-act-what { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.cp-act-what { color: var(--ink); font-weight: 600; margin-top: -4px; }
.cp-status { margin: 0; font-size: .88rem; font-weight: 700; color: #2E6B2A; }
.cp-where { margin: 0; font-size: .84rem; color: #7A7466; }
.cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 4px; }
.cp-btn { min-height: 40px; padding: .45em 1em; font-size: .88rem; }
.cp-phone { font-size: .88rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; }@media (hover: hover){.cp-phone:hover{ color: var(--pine-deep); text-decoration: underline; }}
.cp-prose p { font-size: 1rem; line-height: 1.6; margin: 0 0 14px; }
.cp-callout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cp-callout-tile { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1.5px solid rgba(12,12,12,.14); border-top: 6px solid var(--marigold); border-radius: var(--radius); padding: 20px 56px 18px 22px; box-shadow: var(--shadow); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.cp-callout-mb { border-top-color: #7FB7E6; }
.cp-callout-tile h3 { margin: 4px 0 8px; font-size: 1.2rem; }
.cp-callout-tile p { margin: 0; font-size: .94rem; color: var(--ink-soft); line-height: 1.5; }
.cp-callout-tile .eyebrow { margin: 0; }
.cp-callout-tile .card-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--river); }
@media (hover: hover){.cp-callout-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }}
@media (max-width: 900px) { .cp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cp-grid, .cp-callout, .cp-facts { grid-template-columns: minmax(0, 1fr); }
  .cp-opens li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cp-rows > div { grid-template-columns: 72px minmax(0, 1fr); }
  .cp-flabel { min-width: 100%; }
}

/* ---------- Fredericton Express team page (/sports/fredericton-express/) ---------- */
.ex-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 85% 10%, #123E7A 0%, #0A2550 45%, #061A3A 100%); color: #F4F1EA; padding: clamp(44px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); }
.ex-stripes { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(90deg, #DA291C 0 50%, #0072CE 50% 100%); }
.ex-stripes::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 6px; background: #F4F1EA; }
.ex-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ex-eyebrow { margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #9CC7F2; }
.ex-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8.5vw, 6rem); line-height: .95; letter-spacing: -.02em; margin: 0 0 18px; color: #fff; }
.ex-title span { display: block; color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(100deg, #FF6A5C 0%, #DA291C 40%, #FF8A7A 70%, #DA291C 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; animation: fl-sheen 7s linear infinite; }
.ex-sub { font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.55; max-width: 36em; color: #DCE6F2; margin: 0 0 22px; }
.ex-actions { gap: 10px; }
.ex-btn { background: #DA291C; color: #fff; border-color: #DA291C; }@media (hover: hover){.ex-btn:hover{ background: #F0372A; border-color: #F0372A; }}
.ex-hero .hero-actions .ex-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
@media (hover: hover){.ex-hero .hero-actions .ex-ghost:hover{ background: #fff; color: #0A2550; border-color: #fff; transform: translateY(-2px); } .ex-hero .hero-actions .ex-btn:hover{ background: #F0372A; border-color: #F0372A; color: #fff; }}
.ex-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; }
.ex-stats > div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 12px 14px; }
.ex-stats dt { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9CC7F2; margin: 0 0 4px; }
.ex-stats dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.1; }
.ex-stats dd span { display: block; font-family: var(--font-body); font-size: .78rem; font-weight: 600; color: #B9CBE0; margin-top: 3px; }
.ex-hero-side { display: grid; gap: 18px; justify-items: center; }
.ex-mark-wrap { width: min(100%, 300px); padding: 22px 26px; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); transform: rotate(-2deg); }
.ex-mark { width: 100%; height: auto; display: block; }
.ex-next-card { display: block; width: 100%; max-width: 420px; text-decoration: none; color: var(--ink); background: var(--bg); border-radius: var(--radius); padding: 18px 20px; border-left: 8px solid #DA291C; box-shadow: var(--shadow-lift); transition: transform .3s var(--ease-out); }
@media (hover: hover){.ex-next-card:hover{ transform: translateY(-3px); }}
.ex-next-eb { margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #DA291C; }
.ex-next-vs { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.ex-next-when { margin: 6px 0 0; font-weight: 700; }
.ex-next-where { margin: 2px 0 10px; font-size: .9rem; color: var(--ink-soft); }
.ex-next-cta { font-weight: 800; color: #0072CE; }
.ex-next-off { border-left-color: #0072CE; }
/* Both next-game states ship and a script picks one from the reader's clock,
   so [hidden] has to beat the display rules above, and the "next" pill and the
   ticket links have to follow the class rather than the build date. */
.ex-next-card[hidden] { display: none; }
.ex-game:not(.ex-next) .ex-g-next { display: none; }
.ex-past .ex-g-tix, .ex-past .ex-g-more,
.ex-played .ex-g-tix, .ex-played .ex-g-more { display: none; }
.ex-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ex-fact { background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-top: 5px solid #0072CE; border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.ex-fact:nth-child(even) { border-top-color: #DA291C; }
.ex-fact b { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 6px; }
.ex-fact p { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--ink-soft); }
.ex-sched-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.ex-sched-key { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.ex-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 8px; }
.ex-dot-home { background: #DA291C; } .ex-dot-away { background: #0072CE; }
.ex-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex-game { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-left: 6px solid #0072CE; border-radius: var(--radius-sm); padding: 12px 16px; }
.ex-game[hidden] { display: none; }
.ex-home { border-left-color: #DA291C; background: color-mix(in srgb, #DA291C 4%, var(--card)); }
.ex-past { opacity: .72; }
.ex-next { box-shadow: 0 0 0 3px color-mix(in srgb, #DA291C 35%, transparent), var(--shadow-lift); }
.ex-g-date { display: grid; line-height: 1.1; }
.ex-g-dow { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ex-g-day { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.ex-g-vs { margin: 0; font-weight: 700; font-size: 1.05rem; }
.ex-g-ha { display: inline-block; min-width: 1.6em; font-size: .8rem; font-weight: 800; color: var(--ink-soft); }
.ex-g-next { display: inline-block; margin-left: 8px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #DA291C; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.ex-g-meta { margin: 2px 0 0; font-size: .88rem; color: var(--ink-soft); }
.ex-g-end { display: flex; align-items: center; gap: 10px; }
.ex-g-result { font-family: var(--font-display); font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: .95rem; }
.ex-w { background: #DFF1DA; color: #2E6B2A; } .ex-l { background: #F7DEDC; color: #8A1E16; }
.ex-t { background: #ECECEC; color: #4A4A4A; }
.ex-g-tix { font-weight: 800; color: #fff; background: #DA291C; text-decoration: none; padding: 7px 14px; border-radius: 999px; font-size: .88rem; }
.ex-g-more { font-weight: 700; color: #0072CE; text-decoration: none; font-size: .9rem; }
.ex-opps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ex-opp { background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.ex-opp h3 { margin: 0 0 2px; font-size: 1.05rem; }
.ex-opp-home { margin: 0 0 8px; font-size: .78rem; font-weight: 700; color: #0072CE; }
.ex-opp p:last-child { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.ex-history { background: #0A2550; color: #E6EDF6; }
.ex-history-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ex-history h2 { color: #fff; }
.ex-history p { color: #D2DCE8; line-height: 1.6; }
.ex-eb-light { color: #9CC7F2; }
.ex-vintage { margin: 0; background: #fff; border-radius: var(--radius); padding: 18px 22px 12px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); transform: rotate(1.5deg); }
.ex-vintage img { width: 100%; height: auto; display: block; }
.ex-vintage figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: 8px; text-align: center; }
.ex-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ex-roster li { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-radius: var(--radius-sm); padding: 8px 12px; }
.ex-num { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #DA291C; min-width: 2ch; text-align: right; }
.ex-name { font-weight: 600; }
.ex-pos { margin-left: auto; font-size: .72rem; font-weight: 800; color: #0072CE; }
.ex-roster-note { margin: 14px 0 0; font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 960px) { .ex-opps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .ex-hero-grid, .ex-history-grid { grid-template-columns: minmax(0, 1fr); } .ex-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-hero-side { order: -1; } .ex-mark-wrap { width: min(70%, 240px); } }
@media (max-width: 640px) { .ex-facts, .ex-opps { grid-template-columns: minmax(0, 1fr); } .ex-game { grid-template-columns: 72px minmax(0, 1fr); } .ex-g-end { grid-column: 1 / -1; } .ex-sched-key { margin-left: 0; width: 100%; } }

/* photos */
.ex-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; }
.ex-hero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,26,58,.96) 0%, rgba(6,26,58,.88) 45%, rgba(6,26,58,.55) 100%), linear-gradient(180deg, rgba(6,26,58,.2) 0%, rgba(6,26,58,.85) 100%); }
.ex-photo-card { position: relative; margin: 0; width: min(100%, 360px); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); transform: rotate(-2deg); border: 3px solid rgba(255,255,255,.85); }
.ex-photo-card img { display: block; width: 100%; height: auto; }
.ex-hero-mark { display: block; width: 118px; margin: 0 0 20px; }
/* a white keyline that follows the mark itself: four zero-blur drop-shadows
   compound into an outline around the transparent PNG, then one soft dark one
   lifts it off the photo behind. No plate, no rectangle. */
.ex-mark-lg { display: block; width: 100%; height: auto;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.ex-gallery-band { background: #0A2550; color: #E6EDF6; }
.ex-gallery-band h2 { color: #fff; }
.ex-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 12px; grid-auto-flow: dense; }
.ex-g-item { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #061A3A; }
.ex-g-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
@media (hover: hover){.ex-g-item:hover img{ transform: scale(1.04); }}
.ex-g-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; font-size: .8rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, transparent, rgba(6,26,58,.8)); }
.ex-g-wide { grid-column: span 2; }
.ex-g-item img { object-position: 50% 30%; }
.ex-photo-credit { margin: 12px 0 0; font-size: .8rem; color: #9CC7F2; }
.ex-teamphoto { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); border-top: 6px solid #DA291C; }
.ex-teamphoto img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .ex-hero-veil { background: linear-gradient(180deg, rgba(6,26,58,.82) 0%, rgba(6,26,58,.94) 100%); } .ex-photo-card { width: min(78%, 300px); } .ex-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; } }

/* the hero photo stack */
.ex-stack { position: relative; width: min(100%, 420px); aspect-ratio: 420 / 470; margin: 0 auto; }
.ex-stack-main { position: absolute; left: 50%; top: 4%; width: 72%; transform: translateX(-50%) rotate(-2deg); z-index: 2; margin: 0; }
.ex-stack-card { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; border: 3px solid rgba(255,255,255,.92); box-shadow: 0 24px 48px -20px rgba(0,0,0,.75); background: #061A3A; transition: transform .5s var(--ease-spring); }
.ex-stack-card img { display: block; width: 100%; height: auto; }
.ex-stack-a { left: -4%; top: 10%; width: 32%; transform: rotate(-9deg); z-index: 1; }
.ex-stack-b { right: -5%; bottom: 2%; width: 44%; transform: rotate(5deg); z-index: 3; }
.ex-stack-c { right: -2%; top: 2%; width: 26%; transform: rotate(8deg); z-index: 1; }
@media (hover: hover){.ex-stack:hover .ex-stack-a{ transform: rotate(-12deg) translate(-4px, -4px); } .ex-stack:hover .ex-stack-b{ transform: rotate(3deg) translate(4px, 4px); } .ex-stack:hover .ex-stack-c{ transform: rotate(11deg) translate(4px, -4px); }}
@media (max-width: 820px) { .ex-stack { width: min(100%, 340px); } }
.ex-stack .ex-photo-card { width: 72%; }

/* ---------- homepage spotlight tiles ---------- */
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-tile { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 300px; overflow: hidden; text-decoration: none; color: var(--ink); border-radius: 22px; background: linear-gradient(145deg, var(--a) 0%, var(--b) 100%); box-shadow: var(--shadow); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); isolation: isolate; }
.sp-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid rgba(255,255,255,.14); pointer-events: none; }
@media (hover: hover){.sp-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); } .sp-tile:hover .sp-art { transform: scale(1.05) rotate(-2deg); } .sp-tile:hover .sp-cta .arr { transform: translateX(4px); }}
.sp-glow { position: absolute; width: 60%; aspect-ratio: 1; right: -12%; top: -18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent) 0%, transparent 65%); pointer-events: none; }
.sp-art { position: relative; display: block; height: 150px; margin: 18px 22px 0 auto; width: 56%; transition: transform .5s var(--ease-spring); }
.sp-svg { width: 100%; height: 100%; display: block; }
.sp-img { display: block; height: 100%; width: auto; max-width: 100%; margin-left: auto; object-fit: contain; }
.sp-img-express { background: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); transform: rotate(-3deg); }
.sp-img-chalmers { border-radius: 14px; box-shadow: var(--shadow); }
.sp-copy { position: relative; display: grid; align-content: end; gap: 6px; padding: 16px 22px 22px; }
.sp-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.sp-art-chalmers .sp-kicker, .sp-art-camp .sp-kicker { color: var(--c); }
.sp-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.sp-blurb { font-size: .92rem; line-height: 1.5; color: var(--soft); }
.sp-cta { margin-top: 6px; font-weight: 800; font-size: .9rem; color: var(--ink); }
.sp-cta .arr { display: inline-block; transition: transform .25s var(--ease-out); }
.sp-feature { grid-column: span 2; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: 1fr; min-height: 320px; }
.sp-feature .sp-copy { grid-column: 1; grid-row: 1; align-content: end; padding: 26px 26px 28px; }
.sp-feature .sp-title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.sp-feature .sp-blurb { font-size: 1rem; max-width: 34em; }
.sp-feature .sp-art { grid-column: 2; grid-row: 1; align-self: center; height: 72%; width: 78%; margin: 0 auto; }
.sp-art-chalmers .sp-tile, .sp-art-chalmers { color: var(--ink); }
.sp-art-chalmers::after { border-color: rgba(12,12,12,.12); }
.sp-art-chalmers .sp-art { height: 120px; width: 62%; }
@media (max-width: 900px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-feature { grid-column: span 2; } }
@media (max-width: 600px) { .sp-grid { grid-template-columns: minmax(0, 1fr); } .sp-feature { grid-column: span 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .sp-feature .sp-art { grid-column: 1; grid-row: 1; height: 150px; width: 56%; margin: 18px 22px 0 auto; } .sp-feature .sp-copy { grid-column: 1; grid-row: 2; padding: 16px 22px 22px; } .sp-tile { min-height: 0; } }

/* the compact strip (events page) */
.sp-strip { margin: 18px 0 6px; }
.sp-strip-eb { margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #A79F8E; }
.sp-grid-mini { gap: 12px; }
.sp-mini { min-height: 0; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: 1fr; border-radius: 18px; }
.sp-mini .sp-copy { grid-column: 1; grid-row: 1; padding: 16px 14px 16px 18px; gap: 4px; }
.sp-mini .sp-art { grid-column: 2; grid-row: 1; align-self: center; height: 84px; width: 84px; margin: 0 12px 0 0; }
.sp-mini .sp-title { font-size: 1.08rem; }
.sp-mini .sp-blurb { display: none; }
.sp-mini .sp-cta { font-size: .84rem; margin-top: 2px; }
.sp-mini .sp-img-express { padding: 6px 8px; border-radius: 10px; }
.sp-mini.sp-art-chalmers .sp-art { height: 56px; width: 96px; }
@media (max-width: 600px) { .sp-mini { grid-template-columns: minmax(0, 1fr) 80px; } .sp-mini .sp-art { height: 68px; width: 68px; } }

/* photo tiles */
.sp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: 0; transition: transform .7s var(--ease-out); }
.sp-veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 96%, transparent) 0%, color-mix(in srgb, var(--a) 80%, transparent) 50%, color-mix(in srgb, var(--a) 30%, transparent) 100%), linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--a) 85%, transparent) 100%); }
@media (hover: hover){.sp-has-bg:hover .sp-bg{ transform: scale(1.04); }}
.sp-has-bg .sp-copy, .sp-has-bg .sp-art { z-index: 1; }
.sp-has-bg .sp-art { display: grid; place-items: end; height: auto; width: auto; align-self: end; margin: 0 26px 26px 0; }
.sp-has-bg .sp-img-photo { display: none; }
.sp-has-bg .sp-badge { display: block; width: 120px; height: auto; background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); transform: rotate(-3deg); }
.sp-img-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.sp-badge { display: none; }
.sp-mini .sp-img-photo { border-radius: 14px; }

/* Trunk-or-Treat: a full-tile night scene with the chunky two-colour title */
.sp-v-trunk { grid-template-rows: 1fr; }
.sp-v-trunk .sp-art { position: absolute; inset: 0; height: auto; width: auto; margin: 0; z-index: 0; transition: none; }
.sp-v-trunk .sp-scene { width: 100%; height: 100%; display: block; }

/* Silver Wave's full-bleed scene. Transforms only, no filters on anything that
   moves, and the whole thing stops under prefers-reduced-motion. */
.sp-v-film .sp-scene { width: 100%; height: 100%; display: block; }
.fm-beam { animation: fm-flicker 5.5s ease-in-out infinite; }
@keyframes fm-flicker { 0%, 100% { opacity: .92; } 38% { opacity: .66; } 44% { opacity: 1; } 67% { opacity: .78; } }
.fm-motes circle { transform-box: fill-box; transform-origin: center; animation: fm-drift 9s ease-in-out infinite; }
.fm-motes circle:nth-child(2n) { animation-duration: 12.5s; animation-delay: -3s; }
.fm-motes circle:nth-child(3n) { animation-duration: 15s; animation-delay: -6s; }
@keyframes fm-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(7px, -16px, 0); } }
.fm-reel { transform-box: fill-box; transform-origin: center; animation: fm-spin 6s linear infinite; }
.fm-reel2 { animation-duration: 4.2s; animation-direction: reverse; }
@keyframes fm-spin { to { transform: rotate(360deg); } }
.fm-strip { animation: fm-run 6.5s linear infinite; }
@keyframes fm-run { to { transform: translate3d(-104px, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .fm-beam, .fm-motes circle, .fm-reel, .fm-strip { animation: none; }
}
.sp-v-trunk .sp-glow { display: none; }
.sp-v-trunk { min-height: 420px; }
.sp-v-trunk .sp-copy { position: relative; z-index: 1; grid-row: 1; padding: 170px 22px 22px; align-content: end; background: linear-gradient(180deg, transparent 0%, transparent 32%, rgba(27,15,59,.78) 50%, rgba(27,15,59,.94) 100%); }
@media (hover: hover){.sp-v-trunk:hover .sp-art{ transform: none; }}
.sp-title-chunky { display: grid; gap: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .92; }
.sp-c1 { font-size: 3rem; color: #F28C28; text-shadow: 0 3px 0 #8A3F0A, 0 6px 14px rgba(0,0,0,.35); }
.sp-c2 { font-size: 3rem; color: #F6C945; text-shadow: 0 3px 0 #9A6A0A, 0 6px 14px rgba(0,0,0,.35); }
.sp-cor { font-family: var(--font-body); font-weight: 700; font-size: .8rem; text-transform: lowercase; letter-spacing: .2em; color: #FFF4E6; margin: 4px 0 2px 4px; }
.sp-v-trunk .sp-kicker { color: #A6F26B; }
.sp-v-trunk .sp-blurb { color: #EADCF5; }
.sp-v-trunk .sp-cta { display: inline-block; justify-self: start; background: #F28C28; color: #2B1038; padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 0 #8A3F0A; margin-top: 10px; }
.sp-mini.sp-v-trunk { min-height: 0; }
.sp-mini.sp-v-trunk .sp-copy { min-height: 0; padding: 14px 18px 16px; background: linear-gradient(90deg, rgba(27,15,59,.92) 0%, rgba(27,15,59,.75) 70%, transparent 100%); }
.sp-mini.sp-v-trunk .sp-c1, .sp-mini.sp-v-trunk .sp-c2 { font-size: 1.5rem; text-shadow: 0 2px 0 #8A3F0A; }
.sp-mini.sp-v-trunk .sp-c2 { text-shadow: 0 2px 0 #9A6A0A; }
.sp-mini.sp-v-trunk .sp-cor { font-size: .68rem; margin: 2px 0 0 2px; }
.sp-mini.sp-v-trunk .sp-cta { padding: 5px 12px; font-size: .8rem; margin-top: 6px; }
.sp-mini.sp-v-trunk .sp-art { position: absolute; inset: 0; height: auto; width: auto; margin: 0; }
.sp-mini .sp-kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Shared team pages (.tm-*) ----------
   One themed template behind /sports/<slug>/ for every club except the
   Fredericton Express, which keeps its own photo-led page. Colours arrive as
   --t1 (deep), --t2 (mid), --t3 (accent) and --t4 (pale tint for eyebrows) on
   the hero, set per club from data/teams/<slug>.json.
   Note on hover: the site's global a:hover repaints links dark green, which is
   unreadable on these dark fields, so every link in a dark area pins its own
   colour through hover and focus. */
.tm-hero { position: relative; overflow: hidden; padding: 56px 0 64px; background: linear-gradient(140deg, var(--t1) 0%, var(--t2) 70%, var(--t1) 100%); color: #fff; }
.tm-stripes { position: absolute; inset: auto 0 0 0; height: 7px; background: linear-gradient(90deg, var(--t3) 0 50%, var(--t4) 50% 100%); }
.tm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.tm-hero-mark { display: block; width: 104px; margin: 0 0 18px; }
.tm-mark-lg { display: block; width: 100%; height: auto;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
/* an opaque logo (a white PNG) gets a plate, not a keyline: outlining a white
   rectangle in white draws a white rectangle. */
.tm-mark-lg.tm-plate { filter: none; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.tm-eyebrow { margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); }
.tm-title { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; color: #fff; }
.tm-title span { color: var(--t3); }
.tm-sub { margin: 0 0 22px; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 60ch; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tm-hero .hero-actions .tm-btn { background: var(--t3); border-color: var(--t3); color: #fff; }
.tm-hero .hero-actions .tm-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
@media (hover: hover){
  .tm-hero .hero-actions .tm-ghost:hover { background: #fff; color: var(--t1); border-color: #fff; transform: translateY(-2px); }
  .tm-hero .hero-actions .tm-btn:hover { background: #fff; border-color: #fff; color: var(--t1); transform: translateY(-2px); }
}
.tm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; }
.tm-stats > div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm); padding: 12px 14px; }
.tm-stats dt { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); margin: 0 0 4px; }
.tm-stats dd { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.1; }
.tm-stats dd span { display: block; font-family: var(--font-body); font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.75); margin-top: 3px; }

.tm-next-card { display: block; width: 100%; max-width: 420px; margin-left: auto; color: var(--ink); background: var(--bg); border-radius: var(--radius); padding: 18px 20px; border-left: 8px solid var(--t3); box-shadow: var(--shadow-lift); }
.tm-next-card[hidden] { display: none; }
.tm-next-eb { margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
.tm-next-vs { margin: 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.tm-next-when { margin: 6px 0 0; font-weight: 700; }
.tm-next-where { margin: 2px 0 10px; font-size: .9rem; color: var(--ink-soft); }
.tm-next-cta { display: inline-block; font-weight: 800; }
.tm-next-off { border-left-color: var(--t4); }

.tm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tm-fact { background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-top: 5px solid var(--t3, var(--pine)); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.tm-fact b { display: block; font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 6px; }
.tm-fact p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink-soft); }

.tm-sched-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.tm-sched-key { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.tm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 8px; }
.tm-dot-home { background: var(--t3, var(--pine)); } .tm-dot-away { background: var(--ink-soft); }
.tm-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tm-game { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-left: 6px solid rgba(12,12,12,.2); border-radius: var(--radius-sm); padding: 12px 16px; }
.tm-game[hidden] { display: none; }
.tm-home { border-left-color: var(--t3, var(--pine)); background: color-mix(in srgb, var(--t3, var(--pine)) 5%, var(--card)); }
.tm-past { opacity: .72; }
.tm-next { box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3, var(--pine)) 34%, transparent), var(--shadow-lift); }
.tm-game:not(.tm-next) .tm-g-next { display: none; }
.tm-g-date { display: grid; line-height: 1.1; }
.tm-g-dow { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.tm-g-day { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; }
.tm-g-vs { margin: 0; font-weight: 700; font-size: 1.02rem; }
.tm-g-ha { display: inline-block; min-width: 1.6em; font-size: .8rem; font-weight: 800; color: var(--ink-soft); }
.tm-g-next { display: inline-block; margin-left: 8px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--t2, var(--pine)); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.tm-g-meta { margin: 2px 0 0; font-size: .87rem; color: var(--ink-soft); }
.tm-g-end { display: flex; align-items: center; gap: 10px; }
.tm-g-result { font-family: var(--font-display); font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: .93rem; }
.tm-w { background: #DFF1DA; color: #2E6B2A; } .tm-l { background: #F7DEDC; color: #8A1E16; }
.tm-sec { margin: 34px 0 0; }
.tm-sec h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 6px; }
.tm-sec > p { margin: 0 0 14px; color: var(--ink-soft); max-width: 70ch; }

.tm-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-roster li { display: flex; align-items: baseline; gap: 10px; background: var(--card); border: 1.5px solid rgba(12,12,12,.1); border-radius: var(--radius-sm); padding: 9px 14px; }
.tm-no { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); min-width: 2ch; }
.tm-who { font-weight: 700; }
.tm-pos { font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--t2, var(--pine)); border-radius: 999px; padding: 1px 7px; }
.tm-from { margin-left: auto; font-size: .8rem; color: var(--ink-soft); text-align: right; }
.tm-roster-note { margin: 14px 0 0; font-size: .88rem; color: var(--ink-soft); }

.tm-others { display: flex; flex-wrap: wrap; gap: 12px; }
.tm-other { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-radius: var(--radius); padding: 12px 18px 12px 12px; text-decoration: none; color: var(--ink); font-weight: 700; box-shadow: var(--shadow); transition: transform .25s var(--ease-out); }
.tm-other img { width: 46px; height: auto; }
@media (hover: hover){ .tm-other:hover { transform: translateY(-3px); color: var(--ink); border-color: var(--pine); } }

.tm-faq details { background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-radius: var(--radius-sm); padding: 14px 18px; margin: 0 0 8px; }
.tm-faq summary { font-weight: 800; cursor: pointer; }
.tm-faq p { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.55; }

/* the quick-link row of club marks at the top of /sports/ */
.tm-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.tm-strip-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 12px 16px; background: var(--card); border: 1.5px solid rgba(12,12,12,.12); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .25s var(--ease-out), border-color .25s; }
.tm-strip-mark { display: flex; align-items: center; justify-content: center; height: 62px; }
.tm-strip-mark img { max-width: 78px; max-height: 62px; width: auto; height: auto; }
.tm-strip-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; }
.tm-strip-sub { font-size: .76rem; font-weight: 600; color: var(--ink-soft); margin-top: auto; }
@media (hover: hover){ .tm-strip-item:hover { transform: translateY(-4px); border-color: var(--marigold); color: var(--ink); } .tm-strip-item:hover .tm-strip-name { color: var(--ink); } }

@media (max-width: 980px) {
  .tm-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .tm-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .tm-hero-side { order: -1; }
  .tm-next-card { margin-left: 0; }
  .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-facts, .tm-roster { grid-template-columns: minmax(0, 1fr); }
  .tm-game { grid-template-columns: 74px minmax(0, 1fr); }
  .tm-g-end { grid-column: 2; }
  .tm-from { display: none; }
}

/* ---------- /weekly/ : the standing schedule (.wk-*) ---------- */
.wk-hero { padding: 48px 0 34px; background: linear-gradient(160deg, var(--sage, #E7EFE4) 0%, var(--bg) 100%); }
.wk-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin: 6px 0 14px; }
.wk-sub { max-width: 68ch; font-size: 1.04rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; }
.wk-sub-link { font-weight: 600; }
.wk-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.wk-venue { font: inherit; padding: 9px 12px; border-radius: 999px; border: 1.5px solid rgba(12,12,12,.18); background: var(--card); max-width: 18rem; }
.wk-count { margin: 0; font-size: .86rem; font-weight: 700; color: var(--ink-soft); }
.wk-loading { color: var(--ink-soft); }
.wk-day-group { margin: 0 0 26px; }
.wk-day-head { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 10px; }
.wk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wk-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  background: var(--card); border: 1.5px solid rgba(12,12,12,.1); border-left: 5px solid var(--pine); border-radius: var(--radius-sm); padding: 12px 16px; }
.wk-when { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.wk-main { display: grid; gap: 2px; min-width: 0; }
.wk-title { font-weight: 700; color: var(--ink); text-decoration: none; }
@media (hover: hover){ .wk-title:hover { color: var(--river); text-decoration: underline; } }
.wk-where { font-size: .88rem; color: var(--ink-soft); }
.wk-days-note { font-size: .78rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.wk-free { font-size: .76rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #E9F2E7; color: #2e7d32; }
.wk-price { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.wk-foot { margin: 22px 0 0; font-size: .86rem; color: var(--ink-soft); max-width: 72ch; }
@media (max-width: 560px) {
  .wk-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wk-when { grid-column: 1 / -1; font-size: .92rem; color: var(--ink-soft); }
}