/* ==========================================================================
   LIVE New Wilmington — Storybook edition
   A hand-illustrated small-town feel: rolling-hill scenes, torn-paper
   textures, warm harvest palette, playful motion. Made by hand, for one town.
   Brand letters in the LIVE wordmark keep their original logo colors.
   ========================================================================== */
:root{
  /* logo letters stay true to the brand mark */
  --logo-gold:#D9A63F;
  --logo-slate:#6E6862;
  --logo-mint:#BCD8CB;
  --logo-taupe:#BCB4A6;
  /* site palette — warm, rural, a touch more saturated for storybook pop */
  --gold:#C68A2A;
  --gold-dark:#8F5F16;
  --gold-bright:#E7B84A;
  --sage:#5C7B45;
  --sage-dark:#46603A;
  --slate:#6E6862;
  --mint:#9DBFB0;
  --mint-light:#E7EEDC;
  --taupe:#B3A88F;
  --taupe-light:#F2E9D3;
  --clay:#B4553C;
  --clay-dark:#8F3F2C;
  --sky:#F7DEBD;
  --cream:#FAF3E2;
  --card:#FFFDF6;
  --ink:#2E2A22;
  --muted:#7C7260;
  --line:#E4D8BC;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 2px 10px rgba(70,55,30,.08);
  --shadow-lg:0 10px 30px rgba(70,55,30,.14);
  --font-head:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Lora',Georgia,serif;
  --font-ui:'Karla',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-hand:'Caveat','Bradley Hand',cursive;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --cream:#211D17;--ink:#EDE7DA;--muted:#A79D8B;
  --mint-light:#28302A;--taupe-light:#2C2820;
  --line:#48412F;--card:#2C2820;--sky:#2A2418;
  --gold-dark:#E7B84A;
  --shadow:0 2px 10px rgba(0,0,0,.4);--shadow-lg:0 10px 30px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--ink);background-color:var(--cream);
  /* faint paper grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.22 0 0 0 0 0.18 0 0 0 0 0.11 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  line-height:1.72;font-size:17px;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--gold-dark)}
.container{width:min(1120px,91%);margin:0 auto}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.15;color:var(--ink)}

/* handwritten section labels — the "made by hand" touch */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-hand);font-size:1.5rem;font-weight:600;letter-spacing:.01em;color:var(--gold-dark);margin-bottom:.35rem}
.eyebrow::before{content:"";width:26px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Cpath d='M2 8 C 8 2, 18 2, 24 7' fill='none' stroke='%23C68A2A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;flex:0 0 auto}
.section{padding:4.8rem 0;position:relative}
.section.tight{padding:3.2rem 0}
.section-head{max-width:690px;margin-bottom:2.6rem}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.6rem}
/* hand-drawn underline beneath section headings */
.section-head h2::after{content:"";display:block;width:150px;height:12px;margin-top:.6rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='12' viewBox='0 0 150 12'%3E%3Cpath d='M3 8 C 28 3, 55 10, 80 6 S 128 4, 147 8' fill='none' stroke='%23C68A2A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left/contain}
.center.section-head h2::after{margin-left:auto;margin-right:auto}
.section-head p{color:var(--muted);font-size:1.06rem}
.center{text-align:center}
.center.section-head{margin-left:auto;margin-right:auto}
.accent{font-style:italic;font-weight:400;color:var(--gold-dark)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--cream) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;gap:1rem}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.brand-live{font-family:var(--font-head);font-weight:700;font-size:1.8rem;letter-spacing:.03em}
.brand-live .c1{color:var(--logo-gold)}
.brand-live .c2{color:var(--logo-slate)}
.brand-live .c3{color:#9CC3B2}
.brand-live .c4{color:var(--logo-taupe)}
.brand-sub{font-family:var(--font-ui);font-size:.56rem;font-weight:700;letter-spacing:.36em;color:var(--slate);margin-top:.35rem}
.site-nav{display:flex;align-items:center;gap:1.3rem}
.site-nav a{font-family:var(--font-ui);color:var(--ink);font-weight:600;font-size:.92rem;text-decoration:none;padding:.35rem 0;position:relative}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;border-radius:3px;background:var(--gold);transition:right .25s var(--ease)}
.site-nav a:hover::after,.site-nav a.active::after{right:0}
.site-nav a:hover{color:var(--gold-dark)}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + .5rem);left:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.4rem 0;min-width:184px;display:none;flex-direction:column;box-shadow:var(--shadow-lg)}
.dropdown-menu a{padding:.5rem 1rem;white-space:nowrap}
.dropdown-menu a::after{display:none}
.dropdown-menu a:hover{background:var(--taupe-light)}
.dropdown:hover .dropdown-menu,.dropdown.open .dropdown-menu{display:flex}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:1.3rem;line-height:1;padding:.3rem .6rem;color:var(--ink);cursor:pointer}

/* ---------- hero (illustrated storybook scene) ---------- */
.hero{position:relative;min-height:60vh;display:flex;align-items:flex-end;overflow:hidden;
  background:#8AA46F url("../images/illustrations/hero-countryside.svg") center bottom/cover no-repeat}
.hero.short{min-height:44vh}
/* per-page illustrated scenes (set via data-scene on <body>) */
body[data-scene="market"] .hero{background-image:url("../images/illustrations/hero-market.svg")}
body[data-scene="donut"] .hero{background-image:url("../images/illustrations/hero-donut.svg")}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(40,32,18,.82) 0%,rgba(40,32,18,.42) 46%,rgba(40,32,18,.12) 82%,rgba(40,32,18,.28) 100%)}
.hero .container{position:relative;z-index:3;padding:4.5rem 0 3.4rem}
.hero h1{color:#FFF8EA;font-size:clamp(2.2rem,5vw,3.7rem);max-width:20ch;margin-bottom:.9rem;text-shadow:0 2px 18px rgba(30,22,10,.35)}
.hero p{color:rgba(255,248,234,.94);font-size:clamp(1rem,1.7vw,1.18rem);max-width:58ch;text-shadow:0 1px 10px rgba(30,22,10,.3)}
.hero .eyebrow{color:#F4D89C}
.hero .eyebrow::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Cpath d='M2 8 C 8 2, 18 2, 24 7' fill='none' stroke='%23F4D89C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.hero .accent{color:#FFF8EA}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-weight:700;font-size:.94rem;letter-spacing:.01em;padding:.8rem 1.6rem;border-radius:999px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s,color .2s,border-color .2s;border:2px solid var(--sage-dark);cursor:pointer;text-decoration:none;box-shadow:0 2px 0 var(--sage-dark)}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--sage-dark)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--sage-dark)}
.btn-gold{background:var(--sage);color:#FFF8EA;border-color:var(--sage-dark)}
.btn-gold:hover{background:var(--sage-dark);color:#fff}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:0 2px 0 rgba(46,42,34,.4)}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.btn-light{background:#FFF8EA;color:#2E2A22;border-color:#FFF8EA;box-shadow:0 2px 0 rgba(120,90,40,.35)}
.btn-light:hover{background:#fff;color:#2E2A22}
.btn-row{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.6rem}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--shadow-lg)}
.card-img{height:190px;width:100%;object-fit:cover;background:var(--taupe-light);border-bottom:1px solid var(--line)}
.card-body{padding:1.4rem 1.5rem 1.6rem;flex:1;display:flex;flex-direction:column;gap:.45rem}
.card-body h3{font-size:1.2rem}
.card-body .meta{font-size:.9rem;color:var(--muted);line-height:1.62}
.card-body .meta a{display:block;margin-top:.15rem}
.card-body>a:last-child{font-family:var(--font-ui);font-weight:700;font-size:.9rem;text-decoration:none;color:var(--sage-dark);margin-top:auto}
.card-body>a:last-child:hover{color:var(--gold-dark)}
.tag{font-family:var(--font-hand);font-size:1.25rem;font-weight:700;color:var(--clay);margin-bottom:.1rem}
/* storybook feature cards get a colored top ribbon + spot illustration */
.feature{position:relative;border-top:4px solid var(--gold);padding-top:.2rem}
.feature .card-body{padding-top:1.5rem}
.feature::after{content:"";position:absolute;top:14px;right:14px;width:38px;height:38px;opacity:.9;background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .3s var(--ease)}
.feature:hover::after{transform:rotate(10deg) scale(1.08)}
.grid-4>.feature:nth-child(1)::after{background-image:url("../images/illustrations/spot-leaf.svg")}
.grid-4>.feature:nth-child(2)::after{background-image:url("../images/illustrations/spot-apple.svg")}
.grid-4>.feature:nth-child(3)::after{background-image:url("../images/illustrations/spot-wheat.svg")}
.grid-4>.feature:nth-child(4)::after{background-image:url("../images/illustrations/spot-donut.svg")}

/* photo placeholder */
.img-ph{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-family:var(--font-hand);font-size:1.1rem;background:var(--taupe-light);border:2px dashed var(--taupe);padding:1rem;border-radius:var(--radius-sm)}

/* ---------- band sections ---------- */
.band-mint{background:var(--mint-light)}
.band-taupe{background:var(--taupe-light)}
.band-dark{background:#33291C;color:#EFE6D3;background-image:radial-gradient(circle at 20% 0%,rgba(198,138,42,.14),transparent 55%)}
.band-dark h2,.band-dark h3{color:#FFF8EA}
.band-dark p{color:rgba(239,230,211,.86)}
.band-dark .eyebrow{color:var(--gold-bright)}
.band-dark .btn-outline{color:#EFE6D3;border-color:#EFE6D3;box-shadow:0 2px 0 rgba(239,230,211,.3)}
.band-dark .btn-outline:hover{background:#EFE6D3;color:#33291C}
[data-theme="dark"] .band-dark{background:#17130E}

/* ---------- hill dividers (injected between banded sections by JS) ---------- */
.hill-divider{position:relative;height:44px;line-height:0;margin-bottom:-1px;pointer-events:none;overflow:hidden}
.hill-divider svg{display:block;width:100%;height:100%}
@media(max-width:600px){.hill-divider{height:30px}}

/* ---------- split layout ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center}
.split img{border:1px solid var(--line);border-radius:var(--radius);width:100%;height:410px;object-fit:cover;box-shadow:var(--shadow-lg)}
.split h2{font-size:clamp(1.7rem,2.9vw,2.4rem);margin-bottom:1rem}
.split p + p{margin-top:1rem}

/* ---------- filters & directory ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filter-btn{font-family:var(--font-ui);background:var(--card);border:1.5px solid var(--line);color:var(--ink);padding:.45rem 1.05rem;border-radius:999px;font-weight:600;font-size:.86rem;cursor:pointer;transition:.18s var(--ease)}
.filter-btn:hover{border-color:var(--sage);transform:translateY(-1px)}
.filter-btn.active{background:var(--sage);border-color:var(--sage);color:#FFF8EA}
.biz-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.2rem 1.3rem;box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.biz-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.biz-card h3{font-size:1.08rem;margin:.15rem 0 .4rem}
.biz-card .meta{font-size:.87rem;color:var(--muted);line-height:1.6}
.hidden{display:none!important}

/* ---------- events ---------- */
.event-list{display:flex;flex-direction:column;gap:.85rem}
.event-item{display:flex;gap:1.3rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.1rem 1.35rem;align-items:center;box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.event-item:hover{transform:translateX(4px);box-shadow:var(--shadow-lg)}
.event-date{flex:0 0 70px;text-align:center;border:2px solid var(--gold);border-radius:var(--radius-sm);padding:.5rem .3rem;background:var(--cream)}
.event-date .d{font-family:var(--font-head);font-size:1.6rem;font-weight:700;line-height:1;color:var(--ink)}
.event-date .m{font-family:var(--font-ui);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark)}
.event-info h3{font-size:1.1rem;margin-bottom:.15rem}
.event-info .meta{font-size:.87rem;color:var(--muted)}
.event-item.past{opacity:.5}
.past-badge{font-family:var(--font-ui);display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.1rem .55rem;margin-left:.5rem;vertical-align:middle}
.cal-btn{font-family:var(--font-ui);display:inline-block;font-size:.78rem;font-weight:600;border:1.5px solid var(--line);border-radius:999px;padding:.3rem .85rem;margin-top:.5rem;cursor:pointer;background:transparent;color:var(--muted);transition:.2s}
.cal-btn:hover{border-color:var(--sage);color:var(--sage-dark)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1rem;box-shadow:var(--shadow)}
.stat .num{font-family:var(--font-head);font-size:clamp(2.1rem,3.8vw,3.1rem);font-weight:700;color:var(--gold-dark);line-height:1}
.stat .lbl{font-size:.9rem;color:var(--muted);max-width:24ch;margin:.4rem auto 0}

/* ---------- checklist ---------- */
.checklist{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.checklist li{padding-left:1.9rem;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 11 l4 4 l10 -12' fill='none' stroke='%235C7B45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}

/* ---------- forms ---------- */
.form{display:grid;gap:1rem;background:var(--card);padding:1.9rem;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{font-family:var(--font-ui);font-size:.8rem;font-weight:700;display:block;margin-bottom:.3rem;color:var(--muted)}
.form input,.form textarea,.form select{width:100%;font-family:var(--font-body);font-size:1rem;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--cream);color:var(--ink)}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}

/* ---------- sponsors ---------- */
.sponsor-tier{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow)}
.sponsor-tier.silver{border-top-color:var(--taupe)}
.sponsor-tier.bronze{border-top-color:var(--sage)}
.sponsor-tier h3{margin-bottom:.3rem}
.sponsor-tier .price{font-family:var(--font-hand);color:var(--gold-dark);font-weight:700;font-size:1.3rem;margin-bottom:.7rem}

/* ---------- FAQ ---------- */
.faq{max-width:790px;margin:0 auto;display:flex;flex-direction:column}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.1rem;margin-bottom:.7rem;box-shadow:var(--shadow)}
.faq summary{font-family:var(--font-head);font-size:1.08rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--gold-dark);flex-shrink:0;font-family:var(--font-ui);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.7rem;color:var(--muted);font-size:.95rem}

/* ---------- countdown ---------- */
.countdown{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.cd-box{background:var(--card);border:2px solid var(--gold);border-radius:var(--radius-sm);min-width:80px;text-align:center;padding:.75rem .5rem;box-shadow:var(--shadow)}
.cd-num{font-family:var(--font-head);font-size:1.8rem;font-weight:700;color:var(--ink);line-height:1}
.cd-lbl{font-family:var(--font-ui);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.cd-done{font-family:var(--font-hand);font-size:1.4rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem 1.2rem}
.hero .cd-done{color:var(--ink)}

/* ---------- search ---------- */
.searchbar{max-width:430px;margin-bottom:1.1rem}
.searchbar input{width:100%;font-family:var(--font-body);font-size:1rem;padding:.75rem .95rem;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
.searchbar input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.count-note{font-family:var(--font-hand);font-size:1.2rem;color:var(--muted);margin-bottom:1.3rem}

/* ---------- spotlight ---------- */
.spotlight{display:flex;gap:1.6rem;align-items:center;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:var(--radius);padding:1.8rem 2rem;box-shadow:var(--shadow-lg)}
.spotlight-icon{flex-shrink:0;width:60px;height:60px;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.7rem;font-weight:700;color:var(--gold-dark);background:var(--cream)}
.spotlight h3{font-size:1.35rem;margin-bottom:.25rem}
.spotlight .meta{color:var(--muted);font-size:.9rem}
.spotlight-refresh{margin-left:auto;flex-shrink:0;background:none;border:1.5px solid var(--line);border-radius:50%;width:42px;height:42px;font-size:1.05rem;cursor:pointer;color:var(--muted);transition:.25s var(--ease)}
.spotlight-refresh:hover{border-color:var(--sage);color:var(--sage-dark);transform:rotate(90deg)}
@media(max-width:760px){.spotlight{flex-direction:column;text-align:center}.spotlight-refresh{margin:0 auto}}

/* ---------- instagram grid ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem}
.ig-item{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);display:block;background:var(--taupe-light)}
.ig-item img,.ig-item .img-ph{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.ig-item:hover img{transform:scale(1.06)}
.ig-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(46,42,34,.62);color:#FFF8EA;font-family:var(--font-ui);font-size:.78rem;font-weight:600;opacity:0;transition:.25s;text-align:center;padding:.5rem}
.ig-item:hover .ig-overlay{opacity:1}
@media(max-width:980px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.ig-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(26,22,15,.93);display:flex;align-items:center;justify-content:center;z-index:400;opacity:0;pointer-events:none;transition:.25s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92%;max-height:86%;border-radius:var(--radius)}
.lightbox .lb-close{position:absolute;top:20px;right:26px;font-size:1.9rem;color:#fff;background:none;border:none;cursor:pointer}
img[data-lightbox]{cursor:zoom-in}

/* ---------- footer ---------- */
.site-footer{background:#2C2417;color:rgba(239,230,211,.8);margin-top:0;position:relative}
[data-theme="dark"] .site-footer{background:#141009}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.6rem;padding:3.4rem 0 2.4rem}
.site-footer h4{font-family:var(--font-hand);color:#F4D89C;font-size:1.35rem;margin-bottom:.8rem;font-weight:700}
.site-footer a{color:rgba(239,230,211,.78);display:block;padding:.18rem 0;text-decoration:none;font-size:.95rem}
.site-footer a:hover{color:#F4D89C}
.footer-brand .brand-live{font-size:2.1rem}
.footer-brand p{margin-top:.8rem;max-width:34ch;font-size:.92rem}
.social-row{display:flex;gap:1.2rem;margin-top:1rem}
.social-row a{font-family:var(--font-ui);font-size:.85rem;font-weight:700;border-bottom:1px solid rgba(239,230,211,.4);padding:0 0 .15rem}
.footer-bottom{border-top:1px solid rgba(239,230,211,.16);padding:1.1rem 0;font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-family:var(--font-ui)}

/* ---------- controls ---------- */
.theme-btn{font-family:var(--font-ui);background:none;border:1.5px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:600;padding:.4rem .75rem;cursor:pointer;color:var(--muted);transition:.2s;flex-shrink:0}
.theme-btn:hover{border-color:var(--sage);color:var(--sage-dark)}
.backtop{position:fixed;bottom:22px;right:22px;width:46px;height:46px;border-radius:50%;background:var(--sage);color:#FFF8EA;border:2px solid var(--sage-dark);font-size:1.1rem;cursor:pointer;opacity:0;pointer-events:none;transition:.25s var(--ease);z-index:250;box-shadow:var(--shadow-lg)}
.backtop.show{opacity:1;pointer-events:auto}
.backtop:hover{transform:translateY(-3px)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--cream);padding:.7rem 1.2rem;z-index:999;font-family:var(--font-ui);font-weight:700}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}


/* floating decorative spot art */
.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){.floaty{animation:none}}

/* ---------- seasonal tints (light mode only, gentle) ---------- */
html:not([data-theme="dark"])[data-season="fall"]{--mint-light:#F2E6CE;--taupe-light:#F0E2C9;--cream:#FAF1DC}
html:not([data-theme="dark"])[data-season="fall"] .eyebrow,
html:not([data-theme="dark"])[data-season="fall"] .tag{color:#A85A24}
html:not([data-theme="dark"])[data-season="winter"]{--mint-light:#E8EEEF;--taupe-light:#ECEEED;--cream:#F5F7F5}
html:not([data-theme="dark"])[data-season="winter"] .eyebrow,
html:not([data-theme="dark"])[data-season="winter"] .tag{color:#4C6E7D}
html:not([data-theme="dark"])[data-season="spring"]{--mint-light:#E9F0DA;--taupe-light:#F1EFDA;--cream:#F8F7E7}
html:not([data-theme="dark"])[data-season="spring"] .eyebrow,
html:not([data-theme="dark"])[data-season="spring"] .tag{color:#5D7F42}

/* ---------- print ---------- */
@media print{
  .site-header,.site-footer,.backtop,.theme-btn,.nav-toggle,.cal-btn,.filter-bar,.searchbar,.btn,.hill-divider{display:none!important}
  .hero{min-height:auto}
  body{background:none;font-size:12pt}
  .reveal{opacity:1;transform:none}
  .card,.event-item,.biz-card{border:1px solid #bbb;break-inside:avoid}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:1.8rem}
  .split img{height:320px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;inset:0;top:64px;background:var(--cream);flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:2rem;gap:1.1rem;display:none;font-size:1.05rem;border-top:1px solid var(--line)}
  .site-nav.open{display:flex}
  .dropdown-menu{position:static;border:none;background:var(--taupe-light);width:100%;box-shadow:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:1.4rem}
  .footer-grid{grid-template-columns:1fr}
  .hero{min-height:66vh}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   SEASONAL WEATHER + HOLIDAY WEEKS
   The drifting canvas sits behind everything and ignores clicks.
   Holiday palettes only nudge the accent colors — the LIVE wordmark and
   the page's warm paper tones stay exactly as they are all year.
   ========================================================================== */
.sky-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
/* keep the page itself above the weather */
.hero,.section,.site-footer,.backtop,.skip-link,
.hill-divider,.marquee{position:relative; z-index:1}
/* the menu bar stays pinned and always sits above the page, banner and weather */
.site-header{position:sticky; top:0; z-index:200}
.dropdown-menu{z-index:210}
@media print{ .sky-canvas{display:none!important} }


/* ---------- seasons & holidays preview menu ---------- */
.look-picker{position:relative;flex-shrink:0}
.look-menu{
  position:absolute; top:calc(100% + .5rem); right:0; z-index:120;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm,8px);
  box-shadow:var(--shadow-lg); padding:.45rem; min-width:200px;
  max-height:min(70vh,460px); overflow-y:auto; display:none;
}
.look-picker.open .look-menu{display:block}
.look-group{
  font-family:var(--font-ui); font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:.55rem .7rem .25rem;
}
.look-group:empty{padding:0;border-top:1px solid var(--line);margin:.35rem .5rem 0}
.look-item{
  display:block; width:100%; text-align:left; font-family:var(--font-ui); font-size:.9rem;
  font-weight:600; color:var(--ink); background:none; border:0; border-radius:6px;
  padding:.45rem .7rem; cursor:pointer;
}
.look-item:hover{background:var(--taupe-light); color:var(--gold-dark)}
@media(max-width:760px){ .look-menu{right:auto;left:0} }

/* ---------- menu bar: keep everything on screen ----------
   The nav had grown wider than the window once the Seasons and Dark mode
   buttons were added, pushing them off the right edge and clipping the
   dropdown. Now the links shrink first, the controls stay put, and the
   panel is always allowed to hang below the header. */
.site-header{overflow:visible}
.nav-wrap{flex-wrap:nowrap;gap:.75rem}
.site-nav{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:1.05rem;flex-wrap:wrap}
.site-nav a{font-size:.88rem;white-space:nowrap}
.brand{flex:0 0 auto}

/* the two round controls, kept together at the far right */
.theme-btn,.look-picker{flex:0 0 auto}
.theme-btn{font-size:.72rem;padding:.38rem .62rem;white-space:nowrap}

.look-menu{
  z-index:200;
  max-width:min(240px,calc(100vw - 1.5rem));
  max-height:min(66vh,440px);
}

/* tighter still on mid-size screens, before the mobile menu kicks in */
@media(max-width:1180px){
  .site-nav{gap:.8rem}
  .site-nav a{font-size:.83rem}
  .theme-btn{font-size:.68rem;padding:.34rem .55rem}
}
@media(max-width:980px) and (min-width:761px){
  .site-nav{gap:.62rem}
  .site-nav a{font-size:.78rem}
}
/* on phones the links collapse into the ☰ menu, so the controls get room back */
@media(max-width:760px){
  .nav-wrap{gap:.5rem}
  .look-menu{right:0;left:auto}
}

/* ---------- seasons & holidays panel (centred overlay) ---------- */
.look-scrim{
  position:fixed; inset:0; z-index:9000;
  background:rgba(40,32,18,.5);
  display:none; align-items:center; justify-content:center; padding:1.25rem;
}
.look-scrim.open{display:flex}
.look-card{
  background:var(--card,#FFFDF6); color:var(--ink,#2E2A22);
  border:1px solid var(--line,#E4D8BC); border-radius:14px;
  box-shadow:0 18px 50px rgba(40,32,18,.35);
  width:min(560px,100%); max-height:min(86vh,720px); overflow-y:auto;
  padding:1.6rem 1.7rem 1.4rem; position:relative;
}
.look-card h2{font-family:var(--font-head,serif);font-size:1.45rem;margin-bottom:.15rem}
.look-sub{color:var(--muted,#7C7260);font-size:.92rem;margin-bottom:1.1rem}
.look-close{
  position:absolute; top:.7rem; right:.9rem;
  background:none; border:0; font-size:1.7rem; line-height:1;
  color:var(--muted,#7C7260); cursor:pointer; padding:.2rem .4rem;
}
.look-close:hover{color:var(--ink,#2E2A22)}
.look-head{
  font-family:var(--font-ui,sans-serif); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted,#7C7260);
  margin:1.1rem 0 .55rem;
}
.look-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.5rem}
.look-chip{
  font-family:var(--font-ui,sans-serif); font-size:.9rem; font-weight:600;
  text-align:left; padding:.6rem .8rem; cursor:pointer;
  background:var(--cream,#FAF3E2); color:var(--ink,#2E2A22);
  border:1px solid var(--line,#E4D8BC); border-radius:9px;
}
.look-chip:hover{border-color:var(--sage,#5C7B45);color:var(--sage-dark,#46603A)}
.look-chip.on{background:var(--sage,#5C7B45);border-color:var(--sage,#5C7B45);color:#FFF9EC}
.look-foot{margin-top:1.3rem;padding-top:.9rem;border-top:1px solid var(--line,#E4D8BC)}
.look-today{
  font-family:var(--font-ui,sans-serif); font-size:.86rem; font-weight:700;
  background:none; border:1px solid var(--ink,#2E2A22); color:var(--ink,#2E2A22);
  border-radius:9px; padding:.55rem 1.1rem; cursor:pointer;
}
.look-today:hover{background:var(--ink,#2E2A22);color:var(--cream,#FAF3E2)}
@media print{ .look-scrim{display:none!important} }

/* ==========================================================================
   HOLIDAY WEEKS — full dress
   Each holiday shifts the paper, the cards, the bands, the buttons and the
   hero light, so the week reads clearly without shouting. The LIVE wordmark
   keeps its own colors throughout.
   ========================================================================== */

html:not([data-theme="dark"])[data-holiday] .hero::after{
  background:linear-gradient(to top,
    var(--hero-wash,rgba(40,32,18,.82)) 0%,
    color-mix(in srgb,var(--hero-wash,rgba(40,32,18,.82)) 55%,transparent) 46%,
    rgba(40,32,18,.12) 82%, rgba(40,32,18,.28) 100%);
}

/* --- Christmas: proper red and green --- */
html:not([data-theme="dark"])[data-holiday="christmas"]{
  --cream:#F7F2E9; --card:#FFFCF5; --line:#D9CFC0;
  --gold:#C0242C; --gold-dark:#98181F; --gold-bright:#E04A4A;
  --sage:#1E6B3A; --sage-dark:#155029;
  --mint:#7FA98A; --mint-light:#DCEBDD; --taupe-light:#FAE0DE;
  --clay:#C0242C; --clay-dark:#98181F; --sky:#E7D9C4;
  --holiday-band:#1E6B3A; --holiday-ink:#FFF4E2; --hero-wash:rgba(18,48,30,.84);
}
/* hand-drawn heading underlines go cranberry red */
html:not([data-theme="dark"])[data-holiday="christmas"] .section-head h2::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='12' viewBox='0 0 150 12'%3E%3Cpath d='M3 8 C 28 3, 55 10, 80 6 S 128 4, 147 8' fill='none' stroke='%23C0242C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left/contain;
}
html:not([data-theme="dark"])[data-holiday="christmas"] .eyebrow::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Cpath d='M2 8 C 8 2, 18 2, 24 7' fill='none' stroke='%23C0242C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* --- New Year: midnight & gold --- */
html:not([data-theme="dark"])[data-holiday="new-year"]{
  --cream:#F7F3E7; --card:#FFFDF4; --gold:#B08F2C; --gold-dark:#876C1F;
  --sage:#3B4457; --sage-dark:#2E3543;
  --mint-light:#E8E9EE; --taupe-light:#F4EBD2;
  --holiday-band:#2E3543; --holiday-ink:#F3E4B0; --hero-wash:rgba(28,32,44,.84);
}
/* --- Valentine's: rose & cream --- */
html:not([data-theme="dark"])[data-holiday="valentines"]{
  --cream:#FBF1EF; --card:#FFFAF8; --line:#EAD5D2;
  --gold:#B5697A; --gold-dark:#94505F; --sage:#8C4A5A; --sage-dark:#733C49;
  --mint-light:#F6E4E6; --taupe-light:#F7E9E4;
  --holiday-band:#8C4A5A; --holiday-ink:#FDF0F0; --hero-wash:rgba(70,32,40,.8);
}
/* --- St. Patrick's: clover green --- */
html:not([data-theme="dark"])[data-holiday="st-patricks"]{
  --cream:#F3F5E9; --card:#FCFEF6; --line:#D8DFC6;
  --gold:#7B8F3C; --gold-dark:#5E6E2C; --sage:#3F6B37; --sage-dark:#32552C;
  --mint-light:#E3EDD6; --taupe-light:#EEF2E0;
  --holiday-band:#3F6B37; --holiday-ink:#F2F8E6; --hero-wash:rgba(28,50,28,.82);
}
/* --- Easter: pastel morning --- */
html:not([data-theme="dark"])[data-holiday="easter"]{
  --cream:#FAF6EE; --card:#FFFDF8; --line:#E4DCCC;
  --gold:#B08AA8; --gold-dark:#8C6A86; --sage:#6D8E72; --sage-dark:#57735B;
  --mint-light:#E6EFE4; --taupe-light:#F3E9F0;
  --holiday-band:#B08AA8; --holiday-ink:#FFF9F6; --hero-wash:rgba(60,48,58,.76);
}
/* --- Memorial Day: quiet navy, no falling weather --- */
html:not([data-theme="dark"])[data-holiday="memorial"]{
  --cream:#F5F4F0; --card:#FFFEFA; --line:#D8D6CE;
  --gold:#7C4A46; --gold-dark:#5F3936; --sage:#3A4A63; --sage-dark:#2E3A4E;
  --mint-light:#E5E8EE; --taupe-light:#EFEAE4;
  --holiday-band:#2E3A4E; --holiday-ink:#F0F1F4; --hero-wash:rgba(26,34,48,.84);
}
/* --- Independence Day: flag colors, handled with restraint --- */
html:not([data-theme="dark"])[data-holiday="independence"]{
  --cream:#F7F4EE; --card:#FFFDF8; --line:#D9D5CB;
  --gold:#A8433C; --gold-dark:#89352F; --sage:#3F5D82; --sage-dark:#324A69;
  --mint-light:#E4EAF1; --taupe-light:#F4E5E2;
  --holiday-band:#3F5D82; --holiday-ink:#FBF3EC; --hero-wash:rgba(28,42,62,.82);
}
/* --- Labor Day: end-of-summer denim & wheat --- */
html:not([data-theme="dark"])[data-holiday="labor"]{
  --cream:#F8F4E8; --card:#FFFDF5; --gold:#A87C33; --gold-dark:#836026;
  --sage:#4B6472; --sage-dark:#3B505B;
  --mint-light:#E5EBEC; --taupe-light:#F3EAD6;
  --holiday-band:#4B6472; --holiday-ink:#F6F2E6; --hero-wash:rgba(34,46,52,.82);
}
/* --- Halloween: pumpkin & dusk --- */
html:not([data-theme="dark"])[data-holiday="halloween"]{
  --cream:#F7EEDF; --card:#FFF9EE; --line:#E0D2B8;
  --gold:#C2661C; --gold-dark:#9A4D12; --sage:#4C3D5C; --sage-dark:#3C3049;
  --mint-light:#EAE2EE; --taupe-light:#F6E4C9;
  --holiday-band:#3C3049; --holiday-ink:#F7DCA8; --hero-wash:rgba(38,26,44,.86);
}
/* --- Thanksgiving: harvest table --- */
html:not([data-theme="dark"])[data-holiday="thanksgiving"]{
  --cream:#F8EFDD; --card:#FFFAEF; --line:#E2D3B4;
  --gold:#A85B26; --gold-dark:#84461D; --sage:#6B6440; --sage-dark:#565033;
  --mint-light:#EDE9D6; --taupe-light:#F6E6CB;
  --holiday-band:#84461D; --holiday-ink:#F9EBD2; --hero-wash:rgba(52,34,18,.84);
}

/* ---------- Around Town gallery ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.gal-item{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55rem .55rem .7rem}
.gal-item a{display:block;overflow:hidden;border-radius:6px;cursor:zoom-in}
.gal-item img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.gal-item.gal-wide{grid-column:span 2;grid-row:span 2}
.gal-item.gal-wide img{aspect-ratio:auto;height:100%;min-height:100%}
.gal-item.gal-wide a{height:calc(100% - 2.1rem)}
.gal-item figcaption{font-family:var(--font-ui);font-size:.84rem;color:var(--muted);margin-top:.55rem;line-height:1.35}
.gal-box{position:fixed;inset:0;z-index:9100;background:rgba(28,23,15,.94);display:flex;align-items:center;justify-content:center;padding:2.5rem 4.5rem}
.gal-box[hidden]{display:none}
.gal-box figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.gal-box img{max-width:100%;max-height:calc(100vh - 8rem);border-radius:6px;object-fit:contain}
.gal-box figcaption{font-family:var(--font-ui);color:#EDE5D3;font-size:.95rem;margin-top:.9rem;text-align:center}
.gal-close{position:absolute;top:.8rem;right:1.2rem;background:none;border:0;color:#FFF7E6;font-size:2.4rem;line-height:1;cursor:pointer}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,248,234,.12);border:1px solid rgba(255,248,234,.3);color:#FFF7E6;font-size:2rem;width:46px;height:46px;border-radius:50%;cursor:pointer;line-height:1}
.gal-nav:hover{background:rgba(255,248,234,.24)}
.gal-prev{left:1rem}.gal-next{right:1rem}
@media(max-width:820px){
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .gal-box{padding:3.2rem .8rem}
  .gal-nav{top:auto;bottom:1rem;transform:none}
}
@media(max-width:520px){
  .gal-grid{grid-template-columns:1fr}
  .gal-item.gal-wide{grid-column:auto;grid-row:auto}
  .gal-item.gal-wide img{aspect-ratio:3/2;height:auto}
  .gal-item.gal-wide a{height:auto}
}
/* homepage "around town" strip */
.town-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.town-strip a{display:block;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line)}
.town-strip img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media(max-width:720px){.town-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- real photographs in the hero ----------
   A photo is busier than the illustrated scene, so the words get a little
   more shade behind them and the handwritten label stays light. */
.hero:has(.hero-img[src]:not([style*="display: none"]))::after{
  background:
    linear-gradient(90deg, rgba(30,24,14,.62) 0%, rgba(30,24,14,.30) 48%, rgba(30,24,14,0) 78%),
    linear-gradient(to top, rgba(30,24,14,.80) 0%, rgba(30,24,14,.35) 45%, rgba(30,24,14,.10) 80%, rgba(30,24,14,.30) 100%);
}
.hero .eyebrow{color:#F7DFA6 !important;text-shadow:0 1px 8px rgba(20,15,8,.55)}


/* ==========================================================================
   HOLIDAY BANNER — the big greeting
   ========================================================================== */
.holiday-banner{position:relative;z-index:3;background:var(--holiday-band,#5C7B45);color:var(--holiday-ink,#FFF9EC);
  border-bottom:1px solid rgba(0,0,0,.12);padding:1.05rem 3rem .95rem;text-align:center;overflow:visible}
.hb-inner{display:flex;align-items:center;justify-content:center;gap:1.4rem;max-width:960px;margin:0 auto}
.hb-text{min-width:0}
.hb-main{font-family:var(--font-hand);font-weight:600;font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1;margin:0;
  text-shadow:0 2px 0 rgba(0,0,0,.14)}
.hb-sub{font-family:var(--font-ui);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin:.45rem 0 0;opacity:.82}
.hb-when{display:inline-block;margin:.6rem 0 0;font-family:var(--font-ui);font-size:.86rem;font-weight:700;
  padding:.28rem .85rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.hb-orn{flex:0 0 auto;width:58px;display:block}
.hb-orn svg{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.hb-r svg{transform:scaleX(-1)}
.hb-close{position:absolute;top:.5rem;right:.7rem;background:none;border:0;color:inherit;opacity:.6;font-size:1.5rem;
  line-height:1;cursor:pointer;padding:.2rem .4rem}
.hb-close:hover{opacity:1}

/* ---- on the day itself ---- */
.holiday-banner.is-today{padding:1.7rem 3rem 1.5rem}
.holiday-banner.is-today .hb-main{font-size:clamp(2.6rem,7vw,4.4rem)}
.holiday-banner.is-today .hb-orn{width:84px}
.holiday-banner.is-today .hb-when{font-size:1rem;background:rgba(255,255,255,.22)}
@media (prefers-reduced-motion:no-preference){
  .holiday-banner.is-today .hb-main{animation:hb-pop .9s cubic-bezier(.2,1.4,.4,1) both}
  .holiday-banner.is-today .hb-orn{animation:hb-bob 3.2s ease-in-out infinite}
  .holiday-banner.is-today .hb-r{animation-delay:-1.6s}
}
@keyframes hb-pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes hb-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}

/* ---- Memorial Day stays dignified ---- */
.holiday-banner.is-quiet .hb-main{font-family:var(--font-head);font-weight:600;font-size:clamp(1.4rem,3vw,1.9rem);text-shadow:none}
.holiday-banner.is-quiet.is-today .hb-main{font-size:clamp(1.7rem,4vw,2.4rem);animation:none}
.holiday-banner.is-quiet .hb-orn{width:44px;animation:none!important}

/* ---- Christmas: a string of lights along the top ---- */
.hb-christmas{padding-top:1.9rem}
.hb-christmas.is-today{padding-top:2.4rem}
.hb-lights{position:absolute;top:0;left:0;right:0;height:26px;overflow:hidden;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 2 Q20 15 40 2' fill='none' stroke='%23163E24' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 0;
  display:flex;padding-left:16px;gap:0}
.hb-lights i{flex:0 0 40px;position:relative}
.hb-lights i::before{content:"";position:absolute;left:0;top:7px;width:3px;height:4px;background:#2A3A2E;border-radius:1px}
.hb-lights i::after{content:"";position:absolute;left:-3px;top:10px;width:9px;height:13px;border-radius:50% 50% 46% 46%;
  background:var(--bulb,#E8463F);box-shadow:0 0 8px 2px var(--bulb,#E8463F)}
.hb-lights i:nth-child(4n+1){--bulb:#E8463F}
.hb-lights i:nth-child(4n+2){--bulb:#F2C14E}
.hb-lights i:nth-child(4n+3){--bulb:#4FB86B}
.hb-lights i:nth-child(4n+4){--bulb:#8FC3F0}
@media (prefers-reduced-motion:no-preference){
  .hb-lights i::after{animation:hb-twinkle 2.4s ease-in-out infinite}
  .hb-lights i:nth-child(3n+1)::after{animation-delay:-.8s}
  .hb-lights i:nth-child(3n+2)::after{animation-delay:-1.6s}
  .hb-lights i:nth-child(5n)::after{animation-duration:1.7s}
}
@keyframes hb-twinkle{0%,100%{opacity:1}50%{opacity:.45;box-shadow:0 0 3px 0 var(--bulb)}}
/* candy-cane edge under the Christmas banner */
.hb-christmas{border-bottom:5px solid transparent;
  border-image:repeating-linear-gradient(115deg,#C0242C 0 14px,#FFF4E2 14px 28px,#1E6B3A 28px 42px,#FFF4E2 42px 56px) 5}

/* ---- bunting hanging from the banner ---- */
.hb-bunting{position:absolute;left:0;right:0;bottom:-17px;height:17px;pointer-events:none;z-index:4}
.hb-bunting-usa{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='17'%3E%3Cpath d='M0 0h24L12 16z' fill='%23B3453C'/%3E%3Cpath d='M24 0h24L36 16z' fill='%23FBF3EC'/%3E%3Cpath d='M48 0h24L60 16z' fill='%233F5D82'/%3E%3C/svg%3E") repeat-x}
.hb-bunting-spooky{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='17'%3E%3Cpath d='M0 0h24L12 16z' fill='%23E8862A'/%3E%3Cpath d='M24 0h24L36 16z' fill='%235E4373'/%3E%3Cpath d='M48 0h24L60 16z' fill='%232B2230'/%3E%3C/svg%3E") repeat-x}

/* the celebration layer */
.party-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:8000}

/* week / day toggle in the Seasons panel */
.look-mode{display:flex;gap:.4rem;margin:0 0 .7rem;flex-wrap:wrap}
.look-mode button{font-family:var(--font-ui);font-size:.82rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.look-mode button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

@media (max-width:640px){
  .holiday-banner{padding:.9rem 2.2rem .85rem}
  .holiday-banner.is-today{padding:1.3rem 2rem 1.2rem}
  .hb-inner{gap:.6rem}
  .hb-orn{width:38px}
  .holiday-banner.is-today .hb-orn{width:50px}
  .hb-sub{font-size:.64rem;letter-spacing:.14em}
}
@media print{ .holiday-banner,.party-canvas{display:none} }

/* ---------- dropdowns stay open while you move into them ----------
   An invisible bridge covers the gap between the menu word and the list,
   and the list lingers a moment so a slightly wobbly mouse doesn't lose it. */
.dropdown-menu::before{content:"";position:absolute;left:-12px;right:-12px;top:-14px;height:14px}
@media (min-width:761px){
  .dropdown .dropdown-menu{display:flex;visibility:hidden;opacity:0;pointer-events:none;
    transition:opacity .15s ease .25s, visibility 0s linear .4s}
  .dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu,.dropdown.open .dropdown-menu{
    visibility:visible;opacity:1;pointer-events:auto;transition:opacity .12s ease 0s, visibility 0s}
}

/* ---------- homepage photography ---------- */
.feat-img{height:170px}
.card.feature{overflow:hidden}

.photo-band{z-index:1;position:relative;height:clamp(320px,56vh,580px);overflow:hidden;background:#3A3226}
.photo-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,20,12,.72) 0%,rgba(26,20,12,.25) 38%,rgba(26,20,12,0) 62%)}
.photo-band .container{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:2.3rem}
.photo-band .eyebrow{color:#F7DFA6}
.photo-band .pb-line{font-family:var(--font-head);font-size:clamp(1.25rem,2.4vw,1.75rem);color:#FFF8EA;max-width:34ch;margin:.2rem 0 .6rem;line-height:1.3}
.photo-band .pb-link{font-family:var(--font-ui);font-weight:700;font-size:.92rem;color:#FFF8EA;text-decoration-color:rgba(255,248,234,.5)}
.photo-band .pb-link:hover{color:#F7DFA6}

.events-split{display:grid;grid-template-columns:1.35fr .9fr;gap:2.6rem;align-items:start}
.events-photo{margin:0;padding:.6rem .6rem .75rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);transform:rotate(1.2deg);margin-top:3.2rem}
.events-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--radius) - 6px);display:block}
.events-photo figcaption{font-family:var(--font-hand);font-size:1.15rem;color:var(--muted);text-align:center;margin-top:.45rem}
@media(max-width:860px){.events-split{grid-template-columns:1fr}.events-photo{margin-top:0;transform:none;max-width:420px}}

.band-photo{position:relative;overflow:hidden;background:#2A2218}
.band-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.band-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(32,25,16,.55),rgba(32,25,16,.78))}
.band-photo .container{position:relative;z-index:2}
.band-photo{padding:6rem 0}
/* photo cards: the photo replaces the gold strip and the little drawn icon */
.feature:has(.feat-img){border-top:1px solid var(--line);padding-top:0}
.feature:has(.feat-img)::after{display:none}
.feature:has(.feat-img) .card-body{padding-top:1.2rem}

/* ---------- forms: spam trap, notes, thank-you ---------- */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{margin-top:.9rem;padding:.7rem .9rem;border-radius:10px;font-family:var(--font-ui);font-size:.9rem}
.form-note.is-info{background:var(--mint-light);border:1px solid var(--line)}
.form-note.is-error{background:#F8E3DD;border:1px solid #E2B5A8;color:#7A2E1E}
.form-thanks{text-align:center;padding:2rem 1rem}
.form-thanks .ft-hand{font-family:var(--font-hand);font-size:2.4rem;color:var(--sage-dark);margin:0 0 .4rem;line-height:1}

/* ---------- the LIVE logo ---------- */
.brand-logo{height:48px;width:auto;display:block}
.brand-logo-light{display:none}
html[data-theme="dark"] .brand-logo{display:none}
html[data-theme="dark"] .brand-logo-light{display:block}
.footer-logo{height:56px;width:auto;display:block}
@media(max-width:1180px){.brand-logo{height:42px}}
@media(max-width:760px){.brand-logo{height:38px}}

/* ==========================================================================
   PHONES — the menu, cleaned up
   (placed last so it overrides the laptop-sized menu rules above)
   ========================================================================== */
@media (max-width:760px){
  /* the blur effect traps a full-screen menu inside the bar, so phones get a solid bar */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream)}
  .nav-wrap{padding:.65rem 0;gap:.6rem}
  .brand-logo{height:36px}

  .nav-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
    font-size:1.45rem;border-radius:12px;background:var(--card);flex:0 0 auto;margin-left:auto}

  .site-nav{position:fixed;left:0;right:0;top:var(--nav-top,62px);bottom:0;z-index:300;
    display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;
    gap:0;padding:.6rem 1.2rem 2rem;background:var(--cream);border-top:1px solid var(--line);
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .site-nav.open{display:flex;animation:menu-in .18s ease-out}
  @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  .site-nav > a,.site-nav .dropdown > a{display:flex;align-items:center;justify-content:space-between;
    font-size:1.08rem!important;font-weight:600;padding:.95rem .3rem!important;border-bottom:1px solid var(--line);white-space:normal}
  .site-nav a::after{display:none}
  .site-nav a.active{color:var(--gold-dark)}

  .dropdown{position:static}
  .dropdown .dropdown-menu{position:static;display:none!important;visibility:visible!important;opacity:1!important;
    pointer-events:auto!important;border:0;border-radius:0;box-shadow:none;min-width:0;width:100%;
    background:var(--taupe-light);padding:.2rem 0;margin:0}
  .dropdown .dropdown-menu::before{display:none}
  .dropdown.open .dropdown-menu{display:flex!important}
  .dropdown-menu a{font-size:1rem!important;padding:.8rem 1.1rem!important;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
  .dropdown-menu a:last-child{border-bottom:0}
  .dropdown > a .chev{display:inline-block;transition:transform .2s;font-size:1rem;color:var(--muted)}
  .dropdown.open > a .chev{transform:rotate(180deg)}

  /* Seasons + Dark mode live at the bottom of the menu on phones */
  .nav-tools{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem;padding-top:.4rem}
  .nav-tools .theme-btn{font-size:.9rem!important;padding:.6rem 1rem!important;flex:1 1 auto;text-align:center}

  body.menu-open{overflow:hidden}

  /* comfortable reading on a small screen */
  .hero{min-height:58vh}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .section{padding:3.4rem 0}
  .section-head{margin-bottom:1.8rem}
  .btn-row{gap:.6rem}
  .btn-row .btn{flex:1 1 auto;text-align:center;justify-content:center}
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-btn{flex:0 0 auto}
  .hb-close{top:.3rem;right:.3rem}
}
@media (min-width:761px){ .nav-tools{display:contents} }
.dd-all{display:none!important}
@media (max-width:760px){ .dd-all{display:block!important} }

/* Visit page: the three trip tools */
.tool-card{text-decoration:none;color:inherit;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:inherit}
.tool-card h3{margin:.35rem 0 .3rem}
.tool-go{display:inline-block;margin-top:.6rem;font-family:var(--font-ui);font-weight:700;font-size:.9rem;color:var(--sage-dark)}

/* ---------- Visit page: show every business photo whole ----------
   The photo sits inside a fixed 4:3 frame without cropping, so signs are
   never cut off. Any leftover space is filled with a soft, blurred copy of
   the same photo instead of blank bars. */
.ph-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--taupe-light);border-bottom:1px solid var(--line)}
.ph-frame::before{content:"";position:absolute;inset:-24px;background:var(--ph) center/cover no-repeat;
  filter:blur(18px) saturate(.9) brightness(1.06);opacity:.85}
.ph-frame > .card-img{position:relative;width:100%;height:100%;object-fit:contain;border:0;background:transparent;display:block}
.nav-tools:empty{display:none}