/* =========================================================================
   East Texas Christmas (etchristmas.com) — Crockett & Houston County light trail — single-file build
   Design tokens
   ========================================================================= */
:root{
  --night:#0b1e52; --night-2:#14276b; --night-3:#1d3a86;
  --amber:#F4A63C; --amber-soft:#ffcf7a;
  --candy:#C1272D; --candy-soft:#e5484d;
  --pine:#1B4332; --pine-light:#2d6a4f;
  --snow:#F7F5F0; --ink:#1a1d29; --muted:#9fb0d0; --muted-2:#9db0d4;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --display:'Mountains of Christmas', cursive;
  --script:'Great Vibes', cursive;
  --body:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --frost-ink:#1c3a6e; --frost-blue:#2f6bd0;
  --radius:16px; --radius-sm:10px;
  --shadow:0 20px 50px -22px rgba(0,0,0,.75);
  --wrap:1180px; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); color:var(--snow); line-height:1.6;
  background:
    radial-gradient(1200px 680px at 12% -6%, #2a5ad8 0%, transparent 52%),
    linear-gradient(180deg, #0f2a74 0%, #0b1e52 46%, #081638 100%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.02; margin:0 0 .35em; color:var(--snow)}
h1,h2{font-family:var(--script); font-weight:400; line-height:1.16; letter-spacing:.01em}
h1{font-size:clamp(2.8rem,7vw,5.5rem)}
h2{font-size:clamp(2rem,4.5vw,3.3rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
p{margin:0 0 1rem; color:var(--muted)}
a{color:var(--amber-soft); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.wrap{width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto}
/* Accessibility: visible keyboard focus + screen-reader-only utility */
.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}
:focus-visible{outline:3px solid #ffd27a; outline-offset:2px; border-radius:6px}
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:3px solid #ffd27a; outline-offset:2px}
.eyebrow{display:inline-block; max-width:100%; font-family:var(--body);
  font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; color:var(--amber)}
@media (max-width:520px){.eyebrow{letter-spacing:.1em}}
.section{position:relative; padding:clamp(3.5rem,7vw,6rem) 0}
.center{text-align:center}
.lead{font-size:1.18rem; color:#d7e0f2; max-width:62ch}
.center .lead{margin-inline:auto}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--body); font-weight:800;
  font-size:1rem; padding:.9rem 1.6rem; border-radius:999px; border:0; cursor:pointer;
  background:var(--amber); color:#3a2500; text-decoration:none;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s;
  box-shadow:0 10px 26px -12px rgba(244,166,60,.8)}
.btn:hover{transform:translateY(-2px); box-shadow:0 0 24px rgba(244,166,60,.5); text-decoration:none}
.btn--red{background:var(--candy); color:#fff; box-shadow:0 10px 26px -12px rgba(193,39,45,.9)}
.btn--ghost{background:transparent; color:var(--snow); border:1.5px solid var(--line-2); box-shadow:none}
.btn--ghost:hover{border-color:var(--amber); color:var(--amber-soft); box-shadow:none}
.btn--lg{padding:1.05rem 2rem; font-size:1.08rem}

/* =========================================================================
   Top nav
   ========================================================================= */
.topnav{position:sticky; top:0; z-index:1000; background:rgba(9,14,30,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topnav__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 0; min-height:62px}
.brand{display:flex; align-items:center; gap:.5rem; font-family:var(--script); font-weight:400;
  font-size:1.7rem; color:var(--snow); line-height:1.4; padding-block:.08em; white-space:nowrap}
.brand:hover{text-decoration:none}
.navlinks{display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0}
.navlinks a{color:var(--muted); font-weight:700; font-size:.88rem; padding:.45rem .62rem; white-space:nowrap;
  border-radius:999px; transition:color .15s, background .15s}
.navlinks a:hover{color:var(--snow); background:rgba(255,255,255,.06); text-decoration:none}
.nav-toggle{display:none; background:transparent; border:1px solid var(--line-2); color:var(--snow);
  border-radius:10px; padding:.5rem .7rem; font-size:1.1rem; cursor:pointer}
@media (max-width:1100px){
  .nav-toggle{display:inline-flex}
  .navlinks{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:.15rem; background:rgba(9,14,30,.98); border-bottom:1px solid var(--line);
    padding:0; max-height:0; overflow:hidden; transition:max-height .35s var(--ease)}
  .navlinks.open{max-height:min(82vh,640px); padding:.6rem 1.2rem 1rem; overflow:auto}
  .navlinks a{padding:.75rem .9rem; font-size:1rem}
}

/* =========================================================================
   Hero
   ========================================================================= */
/* Deep-blue winter hero (home only) — bright glow top-left into midnight blue */
.hero{position:relative; overflow:hidden; min-height:min(94vh,880px); display:flex; align-items:flex-start;
  background:
    radial-gradient(62% 58% at 20% 16%, #3f80f2 0%, #2258d8 26%, transparent 60%),
    radial-gradient(46% 46% at 90% 62%, #123a9e 0%, transparent 55%),
    linear-gradient(160deg, #1e50c8 0%, #123a9e 34%, #0a2170 62%, #060f3a 100%)}
.starfield{position:absolute; inset:0; z-index:0; pointer-events:none}
.star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
  animation:twinkle 3s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.9; transform:scale(1)}50%{opacity:.25; transform:scale(.6)}}

/* String-light garlands (top of hero + woven through treetops) */
.garland{position:absolute; left:0; right:0; z-index:4; height:34px; display:flex;
  justify-content:space-around; align-items:flex-start; pointer-events:none}
.garland.top{top:0; background:linear-gradient(180deg, rgba(6,10,23,.9), transparent)}
.bulb{width:12px; height:16px; margin-top:7px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  position:relative; animation:glow 2.6s infinite ease-in-out}
.bulb::before{content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:3px; height:5px; background:#2a3a52; border-radius:2px}
@keyframes glow{0%,100%{opacity:1; filter:brightness(1.3)}50%{opacity:.4; filter:brightness(.7)}}

.hero__content{position:relative; z-index:5; padding:clamp(0.4rem,1.5vh,1.2rem) 0 2rem; max-width:760px}
.hero h1{color:#f4f9ff; text-shadow:0 3px 28px rgba(6,18,60,.55)}
.hero h1 .glow{color:#bcd8ff; text-shadow:0 0 26px rgba(120,180,255,.7)}
.hero .eyebrow{color:#c3d6ff; font-size:clamp(1rem,2vw,1.2rem); letter-spacing:.16em; margin-bottom:1.7rem}
.hero__partner{font-size:clamp(1.05rem,2.1vw,1.35rem); font-weight:700; color:#eef4ff; margin:.1rem 0 .7rem; max-width:42ch;
  text-shadow:0 2px 12px rgba(6,18,60,.5)}
.hero__partner strong{color:var(--amber-soft)}
.hero__partner-lead{display:block; font-size:1.45em; line-height:1.15; margin-bottom:.35em}
.hero__sub{font-size:1.2rem; color:#d3e0f7; max-width:56ch; margin-top:.2rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}

/* Stat counters */
.stats{display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:2.4rem}
.stat{text-align:center; min-width:120px}
.stat__num{font-family:var(--display); font-size:clamp(2.6rem,5vw,3.6rem); font-weight:700;
  color:var(--amber); line-height:1}
.stat__label{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
  margin-top:.3rem}
.hero .stat__num{color:#bcd8ff; text-shadow:0 2px 10px rgba(6,16,50,.85)}
.hero .stat__label{color:#c6d8f5; text-shadow:0 1px 8px rgba(6,16,50,.9)}
.hero .hero__sub, .hero__partner{text-shadow:0 2px 12px rgba(6,16,50,.6)}

/* Real snow-covered spruce photo — full-bleed hero backdrop */
.hero__forest{position:absolute; inset:0; width:100%; height:100%; z-index:1;
  object-fit:cover; object-position:50% 46%; pointer-events:none}
/* Dark scrim: enough at left for text contrast, but light enough that the lit tree glows through */
.hero::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,16,48,.78) 0%, rgba(7,16,48,.45) 54%, rgba(7,16,48,.1) 100%),
    linear-gradient(180deg, rgba(7,16,48,.08) 0%, rgba(7,16,48,.52) 100%)}

/* Countdown bar pinned to the very top of the landing page */
.countdown-bar{background:linear-gradient(180deg,#0a1a44,#0b1e52); border-bottom:1px solid rgba(255,255,255,.08); padding:.85rem 0 1rem}
.countdown-bar .eyebrow{display:block; margin-bottom:.5rem}
.countdown-bar .countdown{margin-top:.2rem}
.countdown-bar__row{display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap}
.cb-mid{flex:1 1 420px; min-width:0; text-align:center; order:2}
.cb-note{flex:1 1 190px; font-size:.85rem; color:#c6d8f5; line-height:1.35}
.cb-note--left{order:1; text-align:left}
.cb-note--right{order:3; text-align:right}
/* Temporary "site under construction" emphasis — enlarged/highlighted until launch */
.cb-badge{display:inline-block; padding:.55em 1.1em; border-radius:999px; font-weight:800; font-size:1.1rem;
  color:#2a1a02; background:linear-gradient(180deg,#ffd783,#f4a63c); box-shadow:0 3px 12px rgba(0,0,0,.4)}
.cb-note--right{font-size:1.02rem; font-weight:700; color:#3a1533; line-height:1.3;
  background:linear-gradient(180deg,#ffe0a0,#ffc24d); padding:.55em 1em; border-radius:12px;
  box-shadow:0 3px 12px rgba(0,0,0,.4)}
@media (max-width:820px){
  .countdown-bar__row{justify-content:center}
  .cb-mid{flex-basis:100%}
  .cb-note{flex-basis:100%; text-align:center}
  .cb-note--right{text-align:center}
}
@media (max-width:600px){
  .countdown{gap:.5rem}
  .count-box{min-width:0; flex:1 1 42%; padding:.7rem .4rem}
  .count-box__num{font-size:clamp(1.6rem,8vw,2.2rem)}
}

/* Chimney smoke */
.smoke-puff{transform-box:fill-box; transform-origin:center; opacity:0; animation:smoke 4.6s ease-in infinite}
@keyframes smoke{0%{transform:translate(0,0) scale(.5); opacity:0}18%{opacity:.5}100%{transform:translate(-16px,-70px) scale(2.4); opacity:0}}

/* Hero snowflakes, crystals & hanging ornaments */
.hero__frost{position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden}
.flake{position:absolute; top:0; display:block; filter:drop-shadow(0 0 5px rgba(150,195,255,.5));
  animation:snowfall linear infinite; will-change:transform}
@keyframes snowfall{
  0%{transform:translate3d(0,-40px,0); opacity:0}
  8%{opacity:var(--op,.85)}
  90%{opacity:var(--op,.85)}
  100%{transform:translate3d(var(--dx,14px),960px,0); opacity:0}}
/* big feature snowflakes — drift all the way down with a slow spin */
.flake-lg{position:absolute; top:0; display:block; filter:drop-shadow(0 0 8px rgba(150,195,255,.4));
  animation:snowfall-lg linear infinite; will-change:transform}
@keyframes snowfall-lg{
  0%{transform:translate3d(0,-150px,0) rotate(0deg); opacity:0}
  8%{opacity:var(--op,.4)}
  90%{opacity:var(--op,.4)}
  100%{transform:translate3d(var(--dx,20px),1000px,0) rotate(var(--rot,160deg)); opacity:0}}

/* RGB "pixel" lights over the tree — twinkle + cycle colors like smart pixels */
.tree-pixel{position:absolute; border-radius:50%; background:#fff; z-index:2; pointer-events:none;
  will-change:opacity,transform,background,box-shadow;
  animation:pxtwinkle ease-in-out infinite, pxcolor linear infinite}
@keyframes pxtwinkle{0%,100%{opacity:.2; transform:translate(-50%,-50%) scale(.6)}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.3)}}
@keyframes pxcolor{
  0%{background:#ff4d4d; box-shadow:0 0 9px 2px #ff4d4d}
  17%{background:#ffd23b; box-shadow:0 0 9px 2px #ffd23b}
  34%{background:#5cff7a; box-shadow:0 0 9px 2px #5cff7a}
  50%{background:#3bd0ff; box-shadow:0 0 9px 2px #3bd0ff}
  67%{background:#7c6bff; box-shadow:0 0 9px 2px #7c6bff}
  84%{background:#ff5cdb; box-shadow:0 0 9px 2px #ff5cdb}
  100%{background:#ff4d4d; box-shadow:0 0 9px 2px #ff4d4d}}
/* Background-music control (track picker + play/pause) + beat-synced garland */
.music-ctl{position:fixed; right:16px; bottom:16px; z-index:80; display:flex; align-items:center; gap:.5rem;
  flex-wrap:wrap; justify-content:flex-end; max-width:calc(100vw - 32px)}
.music-select{padding:.55rem .7rem; border-radius:999px; cursor:pointer; color:#eaf1ff; font:600 .85rem/1 var(--body);
  border:1px solid rgba(255,255,255,.18); background:rgba(11,30,82,.96); box-shadow:0 8px 22px rgba(0,0,0,.4); max-width:52vw}
.music-select:hover{border-color:rgba(255,255,255,.45)}
.music-toggle{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .95rem; border-radius:999px; cursor:pointer;
  color:#eaf1ff; font:600 .9rem/1 var(--body); border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(20,39,107,.96), rgba(11,30,82,.96)); box-shadow:0 8px 22px rgba(0,0,0,.4)}
.music-toggle:hover{border-color:rgba(255,255,255,.45)}
.music-toggle[aria-pressed="true"]{background:linear-gradient(180deg,#c0392f,#9e1f18); border-color:rgba(255,255,255,.4)}
.music-toggle__icon{font-size:1.05rem; line-height:1}
body.music-on #garland-top .bulb, body.music-on .tree-pixel{animation:none !important}
@media (max-width:520px){.music-toggle__label{display:none}}

.tree-star{position:absolute; width:17px; height:17px; border-radius:50%; z-index:2; pointer-events:none;
  background:#fff6cf; box-shadow:0 0 16px 5px #ffd86b, 0 0 5px 1px #fff;
  animation:starpulse 2.4s ease-in-out infinite}
@keyframes starpulse{0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(.85)}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.2)}}
.hero__orn{position:absolute; top:0; z-index:1; pointer-events:none; transform-origin:top center;
  animation:sway 5s ease-in-out infinite; filter:drop-shadow(0 10px 16px rgba(0,0,0,.35))}
@keyframes sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}

/* Sub-page breadcrumb + kids' coloring gallery frames */
.crumb{display:inline-block; margin-bottom:1rem; color:var(--amber-soft); font-weight:600; font-size:.95rem}
.crumb:hover{color:var(--amber)}
.kid-frame{aspect-ratio:1/1; display:grid; place-items:center; text-align:center; border-radius:var(--radius-sm);
  border:2px dashed var(--line-2); color:var(--muted-2); background:rgba(255,255,255,.03); font-weight:600}
.kid-frame .em{font-size:2.6rem; display:block; margin-bottom:.35rem; opacity:.85}

/* Readable long-form prose (Christmas Story, etc.) */
.prose{max-width:70ch; margin:2rem auto 0}
.prose h3{font-family:var(--script); font-weight:400; font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--amber-soft); margin:1.7em 0 .4em; line-height:1.2}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 1.05em; font-size:1.1rem; line-height:1.75; color:#dbe6f8}
.story-verse{display:block; margin-top:.4em; font-style:italic; color:#ffe6b8}
.story-close{margin-top:1.8em; text-align:center; font-weight:600; color:#ffd9a3}

/* Trail page: the winter scene as a full-page fixed background (image stays put,
   a vertical dark overlay scrolls with the page to keep all content readable). */
body.trailbg{
  background:
    linear-gradient(180deg, rgba(8,16,44,.5) 0%, rgba(8,16,44,.82) 58%, rgba(8,16,44,.9) 100%),
    url("../assets/img/trail-hero.jpg") center top / cover no-repeat fixed,
    #0a1330;
}
body.trailbg #trail h1, body.trailbg #trail .eyebrow, body.trailbg #trail .lead{
  text-shadow:0 2px 16px rgba(5,12,40,.75)}

/* Reusable page hero banner (photo backdrop + title overlay) — kept for other pages */
.pagehero{position:relative; overflow:hidden; min-height:clamp(240px,42vh,420px); display:flex; align-items:flex-end;
  background:linear-gradient(160deg,#1e50c8 0%,#0a2170 60%,#060f3a 100%)}
.pagehero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none}
.pagehero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,16,48,.2) 0%, rgba(7,16,48,.32) 45%, rgba(7,16,48,.85) 100%)}
.pagehero__content{position:relative; z-index:2; padding-block:clamp(1.4rem,4vh,2.6rem)}
.pagehero__content h1{color:#f4f9ff; text-shadow:0 3px 22px rgba(6,18,60,.6); margin:0}
.pagehero__content .eyebrow{color:#cfe0ff}

/* Countdown to Christmas */
.countdown{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:1.5rem}
.count-box{min-width:96px; padding:1rem .7rem; border-radius:var(--radius-sm);
  background:linear-gradient(180deg, var(--night-3), var(--night)); border:1px solid var(--line)}
.count-box__num{font-family:var(--display); font-size:clamp(2rem,5vw,3rem); font-weight:700; color:var(--amber); line-height:1}
.count-box__label{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-top:.4rem}
.count-msg{font-family:var(--script); font-size:2.2rem; color:#8fe3b3}

/* Twinkling lights strung on the hero trees */
.tree-light{filter:drop-shadow(0 0 4px currentColor); animation:tlight 2.2s infinite ease-in-out}
@keyframes tlight{0%,100%{opacity:.45}50%{opacity:1}}
.hero-light{filter:drop-shadow(0 0 7px currentColor); animation:tlight 2s infinite ease-in-out}
.hero-star{filter:drop-shadow(0 0 4px gold) drop-shadow(0 0 11px gold); animation:startwinkle 2.6s ease-in-out infinite}
@keyframes startwinkle{0%,100%{opacity:.8}50%{opacity:1}}
/* gentle tree sway */
.treeline-sway{transform-box:fill-box; transform-origin:50% 100%; animation:treesway 7s ease-in-out infinite}
@keyframes treesway{0%,100%{transform:skewX(-0.5deg)}50%{transform:skewX(0.5deg)}}
.hero-sway{transform-box:fill-box; transform-origin:50% 100%; animation:herosway 5.5s ease-in-out infinite}
@keyframes herosway{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}

/* Judging categories */
.prize-medal{font-size:2.4rem; line-height:1; margin-bottom:.3rem}
.cat-group{text-align:center; color:var(--amber-soft); margin:2.4rem 0 1.1rem;
  font-size:clamp(1.5rem,2.8vw,2rem)}

/* Forest silhouette */
.forest{position:absolute; left:0; right:0; bottom:-1px; z-index:0; width:100%; height:auto;
  pointer-events:none; display:block}
.tree-bulb{animation:glow 2.6s infinite ease-in-out; transform-origin:center}

/* =========================================================================
   Cards & shared surfaces
   ========================================================================= */
.panel{background:linear-gradient(180deg, var(--night-2), var(--night)); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.4rem)}
.card{background:linear-gradient(180deg, var(--night-2), var(--night)); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem; transition:transform .2s var(--ease), border-color .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow)}
.grid{display:grid; gap:1.3rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid-2{grid-template-columns:1fr}}
@media (max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr}}
.pill{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700;
  padding:.28rem .7rem; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--line);
  color:var(--muted)}
.pill--amber{background:rgba(244,166,60,.16); color:var(--amber-soft); border-color:rgba(244,166,60,.3)}
.pill--red{background:rgba(193,39,45,.18); color:#ff9a8f; border-color:rgba(193,39,45,.35)}
.pill--pine{background:rgba(45,106,79,.2); color:#8fe3b3; border-color:rgba(45,106,79,.4)}
.pill--gold{background:rgba(255,215,0,.16); color:#ffe08a; border-color:rgba(255,215,0,.4)}
.filter-sep{flex-basis:100%; margin:.5rem 0 -.1rem; color:var(--muted-2); font-size:.75rem;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.town-bar{display:flex; flex-wrap:wrap; gap:.5rem; margin:.2rem 0 1rem}
.town-bar .filter-pill label{font-size:.98rem}
.town-bar .filter-pill input:checked + label{background:var(--candy); color:#fff; border-color:var(--candy)}

/* =========================================================================
   Trail (map + directory + filters)
   ========================================================================= */
.filterbar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1.4rem 0}
.filter-pill{position:relative}
.filter-pill input{position:absolute; opacity:0; width:0; height:0}
.filter-pill label{display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-weight:700; font-size:.92rem; color:var(--muted); padding:.5rem 1rem; border-radius:999px;
  border:1.5px solid var(--line-2); background:rgba(255,255,255,.03); transition:all .15s}
.filter-pill label:hover{color:var(--snow); border-color:var(--muted)}
.filter-pill input:checked + label{background:var(--amber); color:#3a2500; border-color:var(--amber)}
.filter-pill input:focus-visible + label{outline:3px solid var(--amber-soft); outline-offset:2px}

.trail-layout{display:grid; grid-template-columns:1fr 380px; gap:1.4rem; align-items:start}
@media (max-width:940px){.trail-layout{grid-template-columns:1fr}}
#map{height:600px; border-radius:var(--radius); border:1px solid var(--line-2); z-index:1; background:var(--night-2)}
@media (max-width:940px){#map{height:420px}}
.map-fallback{display:none; height:100%; align-items:center; justify-content:center; text-align:center;
  padding:2rem; color:var(--muted)}
.map-fallback.show{display:flex}
.directory{display:grid; gap:.7rem; max-height:600px; overflow-y:auto; padding-right:4px}
@media (max-width:940px){.directory{max-height:none}}
.house{background:var(--night-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.9rem 1rem; cursor:pointer; transition:border-color .15s, background .15s}
.house:hover,.house.active{border-color:var(--amber); background:var(--night-3)}
.house h4{font-family:var(--body); font-size:1rem; color:var(--snow); margin:0 0 .15rem}
.house .addr{font-size:.85rem; color:var(--muted)}
.house .meta{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.55rem}
.house[hidden]{display:none}
.leaflet-popup-content-wrapper{border-radius:12px}
.leaflet-popup-content{font-family:var(--body)}
.leaflet-popup-content h4{margin:0 0 4px; color:var(--ink); font-family:var(--body)}
.leaflet-popup-content p{color:#445; margin:0 0 4px}
.leaflet-popup-content .fm{font-weight:800; color:var(--candy)}

/* =========================================================================
   Advent calendar
   ========================================================================= */
.advent-tools{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; align-items:center; margin:1.2rem 0}
.legend{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:.6rem 0 1.4rem; font-size:.85rem; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:.4rem}
.legend .dot{width:14px; height:14px; border-radius:4px; display:inline-block}
.advent-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:.8rem; max-width:920px; margin-inline:auto}
@media (max-width:760px){.advent-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.advent-grid{grid-template-columns:repeat(3,1fr)}}
.door{position:relative; aspect-ratio:1; border-radius:var(--radius-sm); border:1px solid var(--line-2);
  display:grid; place-items:center; background:linear-gradient(155deg, var(--night-3), var(--night));
  color:var(--snow); font-family:var(--display); font-size:2rem; font-weight:700; cursor:pointer;
  overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; text-align:center}
.door__num{position:relative; z-index:2}
.door__thumb{position:absolute; inset:0; z-index:1; object-fit:contain; padding:14%; opacity:0}
.door.is-open .door__thumb{opacity:.22}
.door.is-locked{cursor:not-allowed; color:var(--muted-2); border-style:dashed}
.door.is-locked::after{content:"🔒"; position:absolute; bottom:6px; right:8px; font-size:.8rem; opacity:.6; z-index:3}
.door.is-open{border-color:rgba(244,166,60,.5)}
.door.is-open:hover{transform:translateY(-4px) scale(1.03); box-shadow:0 0 22px rgba(244,166,60,.55); border-color:var(--amber)}
.door.is-today{background:linear-gradient(155deg, rgba(244,166,60,.28), var(--night-3));
  border-color:var(--amber); animation:pulse 2.4s infinite ease-in-out}
@keyframes pulse{0%,100%{box-shadow:0 0 14px rgba(244,166,60,.45)}50%{box-shadow:0 0 30px rgba(193,39,45,.6)}}
.door.is-today .door__badge{position:absolute; top:6px; left:0; right:0; z-index:3; font-family:var(--body);
  font-size:.55rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--candy-soft)}

/* Modal */
.modal-backdrop{position:fixed; inset:0; z-index:2000; background:rgba(4,7,16,.82);
  display:none; align-items:center; justify-content:center; padding:1.2rem}
.modal-backdrop.open{display:flex}
.modal{background:var(--snow); color:var(--ink); border-radius:var(--radius); max-width:520px; width:100%;
  overflow:hidden; box-shadow:var(--shadow); animation:pop .25s var(--ease)}
@keyframes pop{from{transform:scale(.94); opacity:0}to{transform:scale(1); opacity:1}}
.modal__head{display:flex; justify-content:space-between; align-items:center; padding:1rem 1.3rem;
  background:var(--pine); color:#fff}
.modal__head h3{margin:0; color:#fff; font-size:1.5rem}
.modal__close{background:transparent; border:0; color:#fff; font-size:1.6rem; cursor:pointer; line-height:1}
.modal__img{background:#fff; aspect-ratio:8.5/11; display:grid; place-items:center; padding:12px}
.modal__img img{width:100%; height:100%; object-fit:contain}
.modal__actions{display:flex; flex-wrap:wrap; gap:.6rem; padding:1.1rem 1.3rem 1.4rem; justify-content:center}

/* =========================================================================
   How it works / schedule / about
   ========================================================================= */
.how{background:linear-gradient(180deg, var(--pine), #143528)}
.how .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.step__n{width:44px; height:44px; border-radius:50%; background:var(--amber); color:#3a2500;
  font-family:var(--display); font-weight:700; font-size:1.4rem; display:grid; place-items:center; margin-bottom:.8rem}
.table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line)}
table{width:100%; border-collapse:collapse; min-width:520px}
th,td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line)}
th{background:var(--night-3); color:var(--snow); font-family:var(--body); font-weight:800; font-size:.8rem;
  letter-spacing:.04em; text-transform:uppercase}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:#060a17; padding:2.4rem 0; text-align:center; color:var(--muted-2)}
.site-footer .brand{justify-content:center; margin-bottom:.6rem}

/* a11y / motion */
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:6px}
.skip{position:absolute; left:-999px; top:0; background:var(--amber); color:#3a2500; padding:.6rem 1rem; z-index:3000; border-radius:0 0 8px 0}
.skip:focus{left:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* Section header row */
.flex-between{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap}

/* Gallery (photos + videos) */
.photo-grid{columns:3 260px; column-gap:1rem; margin-top:1.4rem}
.photo-grid figure{break-inside:avoid; margin:0 0 1rem; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--line); background:var(--night-2)}
.photo-grid img{width:100%; display:block}
.photo-ph{aspect-ratio:4/3; display:grid; place-items:center; font-size:2.8rem;
  background:linear-gradient(135deg, var(--night-3), #0e1830); color:var(--muted-2)}
.photo-grid figcaption{padding:.6rem .85rem; font-size:.86rem; color:var(--muted)}
.video-embed{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-2); margin:1.4rem 0 .6rem; background:#000}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-credit{font-size:.85rem; color:var(--muted-2); margin:0 0 .2rem}

/* Build-your-own guide cards */
.guide{display:block; height:100%}
.guide h3{color:var(--snow)}
.guide .card__link{font-weight:800; color:var(--amber-soft)}
.guide .card__link::after{content:" \2192"}

/* Kids' Corner band */
.kids{background:linear-gradient(120deg, #7a1a1a, var(--candy) 55%, #d98a2b); text-align:center}
.kids h2{color:#fff} .kids .eyebrow{color:#ffe6b3} .kids p{color:#fff; opacity:.96}
.kids .btn--ghost{border-color:rgba(255,255,255,.6); color:#fff}
.kids .btn--ghost:hover{border-color:#fff; color:#fff}

/* Guestbook */
.gb-form{display:grid; gap:.8rem; grid-template-columns:1fr; margin-top:.4rem}
.gb-form .row{display:grid; grid-template-columns:1fr auto; gap:.8rem}
@media (max-width:560px){.gb-form .row{grid-template-columns:1fr}}
.gb-form input,.gb-form textarea{width:100%; font:inherit; padding:.75rem .9rem; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--snow)}
.gb-form input::placeholder,.gb-form textarea::placeholder{color:var(--muted-2)}
.gb-form textarea{min-height:90px; resize:vertical}
.gb-list{margin-top:1.4rem; display:grid; gap:.8rem}
.gb-entry{background:var(--night-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.9rem 1.1rem}
.gb-entry .head{display:flex; justify-content:space-between; align-items:baseline; gap:.6rem}
.gb-entry .who{font-weight:800; color:var(--amber-soft)}
.gb-entry .when{font-size:.76rem; color:var(--muted-2); white-space:nowrap}
.gb-entry p{margin:.3rem 0 0; color:#d7e0f2}
.gb-entry.mine{border-color:rgba(244,166,60,.4)}

/* Footer social */
.social{display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin:.4rem 0 1rem}
.social a{color:var(--muted); font-weight:700}

/* Other lights links */
.linklist{display:grid; margin-top:.6rem}
.linkrow{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem .2rem;
  border-bottom:1px solid var(--line); text-decoration:none}
.linkrow:last-child{border-bottom:0}
.linkrow .lr-name{display:block; font-weight:700; color:var(--snow)}
.linkrow .lr-note{display:block; font-size:.82rem; color:var(--muted-2); margin-top:.1rem}
.linkrow:hover{text-decoration:none}
.linkrow:hover .lr-name{color:var(--amber-soft)}
.linkrow .lr-arrow{color:var(--amber); font-size:1.1rem; flex:0 0 auto}

/* Print (coloring pages via hidden iframe handles most; this is a safety net) */
@media print{.topnav,.hero,.site-footer,.no-print{display:none!important}}

/* ---------- Multi-page additions ---------- */
.hdr-garland{display:flex; justify-content:space-around; align-items:flex-start; height:30px; overflow:hidden;
  padding:0 4px; background:linear-gradient(180deg, rgba(6,10,23,.95), transparent)}
.navlinks a.is-active{color:#3a2500; background:var(--amber)}
.navlinks a.is-active:hover{color:#3a2500; background:var(--amber)}
a.card{text-decoration:none; color:inherit; display:block}
a.card:hover{text-decoration:none}
a.card .go{display:inline-block; margin-top:.4rem; font-weight:800; color:var(--amber-soft)}