/* Lily Lake Resort: one skin, Neon (Ed, Oct 10). The :root tokens are the base; .skin-neon on <html> sets the Neon tokens. */
/* =========================================================
   Lily Lake Resort — clean layout system (reference for Claude Code)
   One layout. Four skins change only tokens + a few signature rules.
   ========================================================= */
@font-face{font-family:Atkinson;src:url(/fonts/atkinson-400.woff2);font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url(/fonts/atkinson-700.woff2);font-weight:700;font-display:swap}
@font-face{font-family:Shoulders;src:url(/fonts/big-shoulders-800.woff2);font-weight:800;font-display:swap}
@font-face{font-family:Yellowtail;src:url(/fonts/yellowtail-400.woff2);font-display:block}
/* Oct 9: no fallback flash on the neon H1 */
/* ---------- Tokens: spacing, type, layout ---------- */
:root{
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem; --s7:8rem;   /* 8/16/24/40/64/96/128 */
  --max:75rem;          /* 1200px content width */
  --text:40rem;         /* ~65 characters for paragraphs */
  --gutter:clamp(1rem,4vw,2rem);
  --radius:6px;
  --body:1.1875rem;     /* 19px (18px on phones, below) */
  --lead:clamp(1.25rem,1.1rem + .4vw,1.375rem);   /* 20-22px */
  --h1:clamp(2.75rem,1.8rem + 3.6vw,4.5rem);      /* 44-72px */
  --h2:clamp(2.125rem,1.6rem + 1.6vw,2.875rem);   /* 34-46px */
  --h3:clamp(1.5rem,1.3rem + .6vw,1.75rem);       /* 24-28px */
  --eyebrow:.9375rem;   /* 15px */
  --small:1rem;         /* 16px: the floor for notes, captions, labels */
  --section:clamp(3.5rem,2rem + 5vw,6rem);        /* 56-96px vertical padding of a section */
  --section-tight:clamp(2.5rem,1.75rem + 3vw,4rem); /* 40-64px: one-line, table or single-quote sections */

  /* Color and font tokens (base values; .skin-neon overrides them) */
  --bg:#FBF3E4; --bg-alt:#F4E7CF; --ink:#1B2433; --muted:#4A5468; --head:#1F3456;
  --accent:#F4B731; --on-accent:#1F3456; --link:#1E52A0; --rule:rgba(31,52,86,.14);
  --dark:#1F3456; --on-dark:#FFFFFF; --on-dark-muted:#C9D3E6; --dark-accent:#F4B731;
  --head-font:Lilita,system-ui,sans-serif; --head-weight:400; --head-case:none; --head-track:0;
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--body)/1.6 Atkinson,system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.18em}
h1,h2,h3{font-family:var(--head-font);font-weight:var(--head-weight);text-transform:var(--head-case);letter-spacing:var(--head-track);color:var(--head);line-height:1.05;margin:0 0 var(--s2)}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);line-height:1.2}
p{margin:0 0 var(--s2);max-width:var(--text)}
.lead{font-size:var(--lead);line-height:1.5;color:var(--ink)}
.muted{color:var(--muted)}
.eyebrow{font:700 var(--eyebrow)/1.3 Atkinson,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--head);margin:0 0 var(--s1)}
@media (max-width:40rem){:root{--body:1.125rem;--eyebrow:.875rem}}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.section{padding-block:var(--section)}
.section.tight{padding-block:var(--section-tight)}
.alt{background:var(--bg-alt)}
.dark{background:var(--dark);color:var(--on-dark)}
.dark h2,.dark h3{color:var(--on-dark)}
.dark p{color:var(--on-dark-muted)}
.dark a{color:var(--dark-accent)}
.center{text-align:center}
.center p{margin-inline:auto}
/* ---------- Buttons: one primary per section, secondary is a text link ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:3.25rem;padding:.875rem 1.5rem;border-radius:var(--radius);background:var(--accent);color:var(--on-accent);font:700 1.125rem/1.1 Atkinson,sans-serif;text-decoration:none;border:0}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.textlink{display:inline-block;padding-block:.5rem;font-weight:700;text-decoration:none;color:var(--link)}
.textlink:after{content:" →"}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s3)}
/* ---------- Header ---------- */
.demo{background:#111;color:#ddd;font-size:.8rem;text-align:center;padding:.35rem}
.hdr{background:var(--bg);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:4.75rem}
.brand{font-family:var(--head-font);font-weight:var(--head-weight);font-size:1.9rem;color:var(--head);text-decoration:none;line-height:1;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.brand small{font:700 .7rem/1 Atkinson,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:1.4rem;font-weight:700;font-size:1.0625rem}
.nav a,.nav summary{color:var(--head);text-decoration:none;display:inline-block;padding-block:.7rem}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--accent)}
.hdr .btn{min-height:3rem;padding:.7rem 1.1rem;font-size:1.0625rem}
.menu-btn{display:none}
@media (max-width:40rem){.brand{font-size:1.6rem}.brand small{display:none}.hdr .wrap{min-height:4rem}}
@media (max-width:60rem){.nav,.hdr .btn{display:none}.menu-btn{display:inline-flex;align-items:center;min-height:2.75rem;font:700 1.0625rem Atkinson,sans-serif;border:2px solid var(--head);color:var(--head);background:transparent;border-radius:var(--radius);padding:.5rem 1rem}}
/* ---------- Hero: photo leads, text sits low-left on a short scrim ---------- */
.hero{position:relative;min-height:min(88svh,52rem);display:grid;align-items:end;color:#fff;overflow:hidden;background:var(--hero-bg,var(--dark))}
.hero>img,.hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(to top,rgba(10,14,20,.55),rgba(10,14,20,0))}
.hero .wrap{position:relative;z-index:1;padding-block:var(--s5)}
.hero h1{color:#fff;max-width:14ch;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero p{color:#fff;font-size:var(--lead);max-width:34rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero .btn.ghost{color:#fff}
.hero.short{min-height:min(60svh,36rem)}
.hero.short h1{max-width:20ch}
@media (max-width:40rem){.hero{min-height:auto;display:block;background:var(--hero-bg,var(--dark))}.hero>img,.hero>picture>img{position:static;height:40svh;min-height:15rem}.hero:after{display:none}.hero .wrap{padding-block:var(--s3) var(--s4)}.hero h1,.hero p{text-shadow:none}}
/* ---------- Pattern: three ways in (photo tiles, no boxes) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.tile img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:var(--radius);margin-bottom:var(--s3)}
.tile h3{margin-bottom:var(--s1)}
.tile p{color:var(--ink);margin-bottom:0}
/* Phones: compact rows (square photo left, text right) instead of three tall stacked tiles */
@media (max-width:48rem){.tiles{grid-template-columns:1fr;gap:var(--s3)}.tile{display:grid;grid-template-columns:7.5rem 1fr;column-gap:var(--s2);align-items:start}.tile img{grid-column:1;grid-row:1/span 3;aspect-ratio:1;margin:0}.tile>:not(picture){grid-column:2}.tile h3{font-size:1.375rem;margin:0}.tile p{font-size:1rem;line-height:1.45}.tile .textlink{padding-block:.35rem}}
/* ---------- Pattern: full-bleed photo band with one line ---------- */
.band{position:relative;min-height:clamp(18rem,40vw,34rem);display:grid;align-items:end;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band:after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(10,14,20,.5),transparent)}
.band .wrap{position:relative;z-index:1;padding-block:var(--s5)}
.band h2{color:#fff;font-size:clamp(2.4rem,1.5rem + 4vw,4.5rem);margin:0;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.band p{color:#fff;font-size:var(--lead);margin:.5rem 0 0}
/* ---------- Pattern: split (photo 7 cols / text 5 cols) ---------- */
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.split>div:not(.media):not(.mosaic)>p:not(.eyebrow):not(.note):not(.lead){font-size:var(--lead);line-height:1.5}
.split.flip{grid-template-columns:5fr 7fr}
.split.flip>.media{order:2}
.split .media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
@media (max-width:48rem){.split,.split.flip{grid-template-columns:1fr}.split.flip>.media{order:0}}
/* ---------- Pattern: mosaic (1 large + 2 small) ---------- */
.mosaic{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--s2);height:clamp(22rem,40vw,36rem)}
.mosaic img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:var(--radius)}
.mosaic>img:first-child,.mosaic>picture:first-child>img{grid-row:1/3}
@media (max-width:40rem){.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}.mosaic img{aspect-ratio:1}.mosaic>img:first-child,.mosaic>picture:first-child>img{grid-column:1/3;grid-row:auto;aspect-ratio:3/2}}
/* ---------- Pattern: simple list with small markers ---------- */
.list{list-style:none;padding:0;margin:0 0 var(--s3)}
.list li{padding:.55rem 0 .55rem 1.6rem;position:relative;border-bottom:1px solid var(--rule)}
.list li:before{content:"";position:absolute;left:0;top:1.05rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.6rem 1.5rem;padding:0;margin:var(--s3) 0 0;list-style:none;font-weight:700;color:var(--head)}
.facts li{position:relative;padding-left:1.25rem}
.facts li:before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:50%;background:var(--head)}
@media (max-width:40rem){.facts{grid-template-columns:1fr 1fr}}
/* ---------- Pattern: reviews (no boxes) ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.review{margin:0}
.review .stars{color:var(--accent);letter-spacing:.15em;font-size:1.2rem;margin-bottom:var(--s1)}
.review blockquote{margin:0 0 var(--s2);font-size:1.25rem;line-height:1.5;color:var(--ink)}
.review figcaption{font-size:var(--small);color:var(--muted)}
.reviews{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}
.reviews .review:first-child{grid-column:1/-1;max-width:52rem}
.reviews .review:first-child blockquote{font-size:clamp(1.5rem,1.2rem + 1vw,1.75rem);line-height:1.4;color:var(--head)}
.placeholder{color:var(--muted);font-style:italic}
@media (max-width:48rem){.reviews{grid-template-columns:1fr}}
/* ---------- Pattern: menu lines ---------- */
.menu-lines{list-style:none;padding:0;margin:0 0 var(--s3);max-width:34rem}
.menu-lines li{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;padding:.65rem 0;border-bottom:1px solid var(--rule)}
.menu-lines b{font-weight:700}
.menu-lines span{font-weight:700;color:var(--head);white-space:nowrap}
.note{font-size:var(--small);color:var(--muted)}
.verify{font:700 .65rem/1 Atkinson,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:#FFE58A;color:#5a4500;padding:.25rem .4rem;border-radius:3px;vertical-align:middle}
/* ---------- Pattern: two-column room types / rates ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.cols2>div{border-top:3px solid var(--head);padding-top:var(--s3)}
@media (max-width:48rem){.cols2{grid-template-columns:1fr;gap:var(--s4)}}
.rates{width:100%;border-collapse:collapse;font-size:1.125rem}
.rates th,.rates td{text-align:left;padding:.8rem .5rem;border-bottom:1px solid var(--rule)}
.rates th{font-size:var(--small);letter-spacing:.06em;text-transform:uppercase;color:var(--head)}
.rates td:not(:first-child){font-weight:700;color:var(--head)}
/* ---------- Form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.form label{display:block;font-weight:700;margin-bottom:.35rem}
.form input,.form select,.form textarea{width:100%;font:inherit;padding:.8rem;border:1px solid #b9b2a3;border-radius:var(--radius);background:#fff}
.form .full{grid-column:1/-1}
@media (max-width:40rem){.form{grid-template-columns:1fr}}
/* ---------- Visit block ---------- */
.visit{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.visit dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem}
.visit dt{font-weight:700;color:var(--head);font-size:var(--small);letter-spacing:.06em;text-transform:uppercase;padding-top:.25rem}
.visit dd{margin:0;font-size:1.1875rem}
.visit dd a[href^="tel:"]{font-family:var(--head-font);font-weight:var(--head-weight);font-size:var(--h3);text-decoration:none;display:inline-block;padding-block:.25rem}
.visit img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
@media (max-width:48rem){.visit{grid-template-columns:1fr}}
/* ---------- Closing tagline + footer ---------- */
.tagline{padding-block:clamp(3.5rem,2.5rem + 4vw,6rem)}
.tagline p{color:var(--ink)}
.tagline h2{margin:0}
.ftr{background:var(--dark);color:var(--on-dark-muted);padding-block:var(--s5) var(--s4);font-size:1.0625rem}
.ftr .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:var(--s4)}
.ftr b{color:var(--on-dark)}
.ftr a{color:var(--on-dark);text-decoration:none}
.ftr ul{list-style:none;margin:0;padding:0;line-height:1.4}
.ftr ul a,.ftr p a{display:inline-block;padding-block:.7rem}
.ftr img{width:150px}
@media (max-width:48rem){.ftr .wrap{grid-template-columns:1fr 1fr}}
/* ---------- Sticky call bar (phones only, after hero) ---------- */
.callbar{display:none}
/* JS adds .show once the hero's call button scrolls out of view (IntersectionObserver) */
@media (max-width:40rem){.callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--accent);color:var(--on-accent);text-align:center;font-weight:700;padding:.9rem;text-decoration:none;transform:translateY(100%);visibility:hidden;transition:transform .2s,visibility .2s}.callbar.show{transform:none;visibility:visible}}
/* =========================================================
   SKINS — tokens + at most 2 signature rules each
   ========================================================= */

/* Neon: dark page, neon glow on H1 only */
.skin-neon{--bg:#121619;--bg-alt:#1A1F23;--ink:#EDEAE3;--muted:#B9B4AA;--head:#F5EEDC;--accent:#45DA4A;--on-accent:#121619;--link:#7BE87F;--rule:rgba(255,255,255,.12);
  --dark:#1C2227;--on-dark:#F5EEDC;--on-dark-muted:#E2D6C6;--dark-accent:#FFB547;--hero-bg:#121619;
  --head-font:Shoulders,system-ui,sans-serif;--head-weight:800;--head-case:uppercase;--head-track:.02em}
.skin-neon .hero h1{font-family:Yellowtail,cursive;text-transform:none;font-weight:400;letter-spacing:0;color:#EFFBF0;text-shadow:0 0 6px #45DA4A,0 0 18px #45DA4A,0 0 42px rgba(69,218,74,.75);max-width:16ch}
.skin-neon .brand{font-family:Yellowtail,cursive;text-transform:none;color:#EFFBF0;text-shadow:0 0 6px #45DA4A,0 0 16px rgba(69,218,74,.7);font-weight:400}
.skin-neon .hdr{border-bottom:0;background:#121619;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.skin-neon .tagline{background:radial-gradient(circle at 50% 55%,#FFB547 0 4px,transparent 5px) 0 0/46px 30px repeat-x,var(--bg)}
/* Oct 9 (audit): dim the busy bar photo, a stronger scrim, smaller script H1, readable eyebrow */
.skin-neon .hero>picture>img{filter:brightness(.65) saturate(1.1)}
.skin-neon .hero:after{height:75%;background:linear-gradient(to top,rgba(10,12,14,.55),rgba(10,12,14,0))}
.skin-neon .hero h1{font-size:clamp(2.75rem,1.9rem + 3vw,4rem);line-height:1.1}
.skin-neon .hero .eyebrow{font:800 1rem/1.2 Shoulders,system-ui,sans-serif;letter-spacing:.1em;color:#F5EEDC}
.skin-neon .btn{font-family:Shoulders,system-ui,sans-serif;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:1.1875rem}
/* =========================================================
   SITE ADDITIONS (not in the mockups). Same tokens, no new looks.
   ========================================================= */
picture{display:contents}
/* layout rules above target the <img> */
picture>source{display:none}
/* or it takes a grid cell */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:20;background:var(--accent);color:var(--on-accent);padding:.5rem 1rem}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a[href^="tel:"]{white-space:nowrap}
/* Demo banner: one line (demo only) */
.demo{display:flex;justify-content:center;align-items:center;gap:.75rem;white-space:nowrap;overflow:hidden}
.demo>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.demo label{font-weight:700}
.demo select{font:inherit;padding:.05rem .3rem;border-radius:3px;border:1px solid #777;background:#fff;color:#111;margin-left:.3rem}
/* Brand: the neon-sign wordmark */
.brand .wm-neon{display:none}
.skin-neon .brand .wm-neon{display:inline}
.brand .wm small{margin-left:.5rem}
.skin-neon .brand small{text-shadow:none;color:var(--muted)}
.hdr .wrap{min-height:5.5rem}
@media (max-width:40rem){.hdr .wrap{min-height:4rem}}
/* Nav: the Groups menu, and the phone menu */
.nav{align-items:center}
.nav-group{position:relative}
.nav-group summary{cursor:pointer;list-style:none;color:var(--head)}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary:after{content:" ▾";font-size:.8em}
.nav-group summary.is-current{box-shadow:inset 0 -3px 0 var(--accent)}
.nav-group div{position:absolute;top:calc(100% + .75rem);left:-1rem;z-index:10;display:grid;gap:.6rem;min-width:13rem;padding:var(--s2);background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.menu-btn{cursor:pointer}
@media (max-width:60rem){.hdr .wrap{flex-wrap:wrap}.nav.open{display:grid;gap:0;width:100%;padding-bottom:var(--s2);order:3}.nav.open>a,.nav.open summary{padding:.7rem 0;border-top:1px solid var(--rule)}.nav.open .nav-group div{position:static;box-shadow:none;border:0;padding:0 0 .5rem 1rem;background:none;min-width:0}}
/* Reviews: the rating line links to the Google listing */
a.rating{text-decoration:none;color:inherit;width:fit-content}
.review .review-name{font-weight:700;color:var(--ink)}
.review-single{max-width:44rem;margin:0 auto}
.review-single blockquote{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);line-height:1.4;color:var(--head)}
/* Menu page */
.jump{display:flex;flex-wrap:wrap;gap:0 1.25rem;list-style:none;padding:0;margin:0}
.jump a{font-weight:700;text-decoration:none;display:inline-block;padding-block:.6rem}
.menu-block{padding-block:0 var(--s4);break-inside:avoid;scroll-margin-top:5rem}
.menu-block h2{font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);margin-bottom:var(--s1)}
.menu-lines{max-width:none}
.menu-lines li{flex-wrap:wrap}
@media (max-width:40rem){.menu-lines span{white-space:normal;text-align:right}}
.menu-lines .desc{flex-basis:100%;font-weight:400;color:var(--muted);font-size:var(--small);white-space:normal}
/* Forms (the .form grid is from the mockup) */
.form .hint{font-weight:400;color:var(--muted)}
.form .hp{position:absolute;left:-5000px}
.form .btn{cursor:pointer}
/* Gallery + lightbox */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.gallery figure{margin:0}
.gallery figcaption{font-size:var(--small);color:var(--muted);margin-top:.4rem}
.gallery-group+.gallery-group{margin-top:var(--s5)}
@media (max-width:48rem){.gallery{grid-template-columns:1fr 1fr}}
.lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
.lightbox::backdrop{background:rgba(10,15,25,.92)}
.lightbox img{max-width:96vw;max-height:82vh;width:auto;margin:0 auto;border-radius:4px}
.lightbox p{color:#fff;text-align:center;margin:.6rem auto 0}
.lightbox button{position:fixed;top:.75rem;right:.75rem;font:700 1rem Atkinson,sans-serif;background:#fff;color:#111;border:0;border-radius:6px;padding:.5rem 1rem;cursor:pointer}
/* Small helpers used across pages */
.cols2 figure{margin:0}
.cols2 figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.cols2 figcaption{font-size:var(--small);color:var(--muted);margin-top:.5rem}
.big-phone{font-family:var(--head-font);font-weight:var(--head-weight);font-size:var(--h2);color:var(--head);text-decoration:none}
.ftr .tagline-line{margin-top:1rem}
@media (prefers-reduced-motion:reduce){.callbar{transition:none}}
.ftr .flogo{display:none}
.ftr .flogo-compact{display:block}
/* Contrast fixes found by Lighthouse (not visible design changes) */
.menu-lines .verify{color:#5a4500;white-space:nowrap}
/* Oct 9 brief: photo row (three 4:3 photos), sticky menu links, two-column menu */
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.photo-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
@media (max-width:40rem){.photo-row{grid-template-columns:1fr 1fr}.photo-row>picture:first-child>img,.photo-row>img:first-child{grid-column:1/-1}}
.jump-bar{position:sticky;top:0;z-index:4;background:var(--bg);border-block:1px solid var(--rule)}
.jump-bar .jump{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:none}
.jump-bar .jump::-webkit-scrollbar{display:none}
@media (min-width:60.01rem){.menu-columns{columns:2;column-gap:var(--s5)}}
.menu-columns .menu-block{display:inline-block;width:100%}
/* Oct 9 brief, acceptance fixes: 16 px floor for labels too; taller tap area on the rating link;
   phones get shorter photo crops, tighter sections and a 3-column footer (Home <= ~5,800 px) */
:root{--eyebrow:1rem}
@media (max-width:40rem){:root{--eyebrow:1rem}}
@media (max-width:40rem){:root{--section:3rem;--section-tight:2.5rem;--lead:1.1875rem}.split>div:not(.media):not(.mosaic)>p:not(.eyebrow):not(.note):not(.lead){font-size:var(--body)}.split .media img,.visit img{aspect-ratio:3/2}.split{gap:var(--s3)}.list li{padding-block:.45rem}.reviews{gap:var(--s3)}.review blockquote{font-size:1.125rem}.reviews .review:first-child blockquote,.review-single blockquote{font-size:1.375rem}.ftr .wrap{grid-template-columns:1fr 1fr;gap:var(--s3)}.ftr .wrap>div:first-child{grid-column:1/-1;display:flex;align-items:center;gap:var(--s2)}.ftr .wrap>div:first-child img{width:96px}.ftr .tagline-line{margin:0}.ftr ul a{padding-block:.65rem}.tagline{padding-top:var(--s5)}}
.skin-neon .brand small{font-size:1rem}
@media (max-width:40rem){.visit>picture,.visit>img{display:none}.band{min-height:14rem}.tagline{padding-top:var(--s4)}}

/* (2) Chalkboards: the Sunset Grill specials list and the tagline band.
   Give the specials <ul> class="list board" on the home and Sunset Grill pages. */

.hdr{position:relative}
.callbar{z-index:8}
h1 em,h2 em{font-style:normal}

/* --- Reviews (Ed, Oct 9): big gold stars on each quote, drawn to the exact rating; a large
   rating line from reviews.json with no stars next to Google's name; "Read them all on Google →". --- */
:root{--star:#F2A51A;--star-off:rgba(120,120,120,.35)}
.skin-neon{--star:#FFB547;--star-off:rgba(255,255,255,.25)}
.stars-bar{display:inline-block;letter-spacing:.06em;line-height:1;color:transparent;
  background:linear-gradient(90deg,var(--star) var(--pct,100%),var(--star-off) var(--pct,100%));-webkit-background-clip:text;background-clip:text}
.review .stars{font-size:1.75rem;margin-bottom:var(--s2);color:inherit;letter-spacing:0}
.rating{display:block;font-size:1.25rem;line-height:1.4;color:var(--ink);margin:0 0 var(--s4)}
.rating .rating-value{font-family:var(--head-font);font-weight:var(--head-weight);color:var(--head);line-height:1}
.rating-big .rating-value{display:inline-block;font-size:clamp(3.5rem,2.5rem + 3vw,5.25rem);margin-right:.35rem;vertical-align:-.12em}
.rating-big{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);font-weight:700}
.rating-big .rating-asof{font-weight:400;color:var(--muted)}
.rating-small{margin:var(--s3) 0 0;font-size:1.125rem}
.rating-small .rating-value{font-size:1.75rem;vertical-align:-.1em}
.g-logo{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-right:.25em}
.rating-more{margin:var(--s3) 0 0}
.rating-more a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;color:var(--link)}
.hero-rating{display:inline-block;margin-top:var(--s2);padding-block:.6rem;color:inherit;text-decoration:none;font-size:1.0625rem;line-height:1.4}
.hero-rating .rating-value{font-size:1.5rem;color:inherit;vertical-align:-.08em}
.hero-rating:hover{text-decoration:underline}
/* Verify tags never break */
.verify{white-space:nowrap;display:inline-block}
.rating-asof{white-space:nowrap}
/* Jill's frog logo above the tagline (Ed, Oct 10) */
.tagline-logo img{display:block;width:clamp(150px,20vw,220px);height:auto;margin:0 auto var(--s3)}
/* Home hero video loop (site.js): same box as the hero photo, fades in once it's playing */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s;filter:brightness(.65) saturate(1.1)}
.hero.has-video .hero-video{opacity:1}
.hero-pause{position:absolute;right:var(--gutter);bottom:var(--s3);z-index:2;min-height:2.75rem;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(10,12,14,.55);color:#fff;font:700 1rem Atkinson,sans-serif;cursor:pointer}
.hero-pause:hover,.hero-pause:focus-visible{background:rgba(10,12,14,.8)}
/* Phones: the hero photo is a strip on top with the text below, so the video and Pause button sit in that strip */
@media (max-width:40rem){
  .hero-video{inset:0 0 auto 0;height:max(40svh,15rem)}
  .hero-pause{top:calc(max(40svh,15rem) - 3.5rem);bottom:auto;right:var(--s2)}
}
/* Brief 1.3: a darker scrim so the neon H1 and lead read over busy bar photos and the video */
.skin-neon .hero:after{height:80%;background:linear-gradient(to top,rgba(10,12,14,.75),rgba(10,12,14,.35) 60%,rgba(10,12,14,0))}
.hero-video{filter:brightness(.6) saturate(1.1)}
/* Brief 1.5: the band's white text over bright trees on phones */
.band:after{content:"";position:absolute;inset:auto 0 0 0;height:70%;background:linear-gradient(to top,rgba(10,12,14,.6),rgba(10,12,14,0));pointer-events:none}
@media (max-width:44.99rem){.band:after{height:100%;background:linear-gradient(to top,rgba(10,12,14,.8),rgba(10,12,14,.35) 70%,rgba(10,12,14,.15))}}
/* Events (brief 4.2): dated event cards and the email signup */
.event-card .event-date{font:800 1rem/1.3 Shoulders,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--dark-accent);margin:var(--s2) 0 .25rem}
.event-card h3 a{color:inherit;text-decoration:none}
.event-card h3 a:hover{text-decoration:underline}
.event-card .event-actions{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center}
.event-card .event-actions a{display:inline-flex;align-items:center;min-height:2.75rem}
.signup-form{max-width:32rem;margin:var(--s3) auto 0;text-align:left}
.signup-form label{display:block;font-weight:700;margin-bottom:var(--s1)}
.signup-row{display:flex;gap:var(--s1);flex-wrap:wrap}
.signup-row input{flex:1 1 14rem;min-height:3.25rem;padding:.75rem 1rem;border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg-alt);color:var(--ink);font:inherit}
/* Things to Do dropdown (brief 5.4): long lists flow into two columns on desktop */
@media (min-width:60.01rem){.nav-group div:has(> a:nth-child(9)){grid-template-columns:repeat(2,minmax(12rem,1fr));min-width:28rem;left:auto;right:-1rem}}

/* Menu section links: wrap onto two lines on wider screens so nothing is cut off; on phones keep one
   swipeable row with a fade on the right edge as the "there's more" hint */
@media (min-width:45rem){.jump-bar .jump{flex-wrap:wrap;white-space:normal;overflow:visible;row-gap:0}}
@media (max-width:44.99rem){.jump-bar .jump{-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);padding-right:2rem}}
/* Phones (Ed, Oct 10): the hero text sits below the photo, so show the photo and video at full brightness
   (the dimming is only for text laid over the image on larger screens) */
@media (max-width:40rem){.skin-neon .hero>picture>img,.skin-neon .hero>img,.hero-video{filter:none}}
/* Phone spacing pass (Ed, Oct 11) */
.menu-lines .desc{text-align:left}                 /* item descriptions read left, under the name */
@media (max-width:40rem){
  /* Footer: logo row, then the address full width, then the two link lists side by side, tighter rows */
  .ftr{padding-block:var(--s4) var(--s3)}
  .ftr .wrap{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s3)}
  .ftr .wrap>div:nth-child(2){grid-column:1/-1}
  .ftr .wrap>div:nth-child(2) p{margin:.35rem 0}
  .ftr .wrap>div:nth-child(2) p a{padding-block:.35rem}
  .ftr ul a{padding-block:.4rem;line-height:1.3}
  /* Rate tables: shorter rows, lighter season dividers, tighter gaps */
  .rates{font-size:1.0625rem}
  .rates th,.rates td{padding:.55rem .35rem}
  .rates th:first-child,.rates td:first-child{padding-left:0}
  .rates .note{display:block;font-size:.9375rem}
  .cols2{gap:var(--s3)}
  .cols2>div{border-top-width:2px;padding-top:var(--s2)}
  /* Room features: one even column instead of ragged pairs */
  .facts{grid-template-columns:1fr;gap:.35rem}
}
@media (max-width:40rem){
  /* Show "Resort" next to the neon "Lily Lake" on phones too (Ed, Oct 11), a little smaller */
  .brand small,.skin-neon .brand small{display:inline;font-size:.8125rem;letter-spacing:.14em;margin-left:.5rem}
  /* Rate tables: less space around each season's heading and dates */
  .cols2>div>h3{margin-bottom:.15rem}
  .cols2>div>h3+.note{margin:0 0 .35rem}
}
/* Rooms rates: Blue Light Specials and Worker Rates sit in the same grid as Summer/Winter, text instead of a table */
.cols2>.rate-text p{font-size:var(--lead);line-height:1.5;margin-top:var(--s1)}

.cols2>.rate-text .textlink{display:inline;padding:0;min-height:0}
/* Facebook call to action in the tagline band (Ed, Oct 11). Facebook blue #1877F2 with white text is 4.2:1 at
   large bold text; we use the darker #0F5FD1 (5.8:1) so it passes AA at any size. */
.fb-cta{margin-top:var(--s4);display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.fb-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:3.25rem;padding:.8rem 1.6rem;border-radius:999px;background:#0F5FD1;color:#fff;font:700 1.125rem/1.1 Atkinson,sans-serif;text-decoration:none;box-shadow:0 6px 20px rgba(15,95,209,.35);transition:transform .15s,box-shadow .15s}
.fb-btn:hover,.fb-btn:focus-visible{transform:translateY(-1px);box-shadow:0 8px 26px rgba(15,95,209,.5)}
.fb-cta p{margin:0;color:var(--on-dark-muted,var(--muted));max-width:30rem}

/* Room features (Ed, Oct 11): an even grid instead of auto-fill's six skinny columns.
   Desktop 4 columns (7 items = 4 + 3), tablet 2, phone 1 (set above). */
@media (min-width:40.01rem){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 2rem;max-width:44rem}}
@media (min-width:60.01rem){.facts{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
@media (min-width:40.01rem){.split .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.5rem}}
/* Two-column text sections (Ed, Oct 11: no dead space beside text-only sections) */
.text-2col{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s4) var(--s6);align-items:start}
.text-2col>div>*{max-width:none!important}
@media (min-width:48.01rem){.text-2col-aside{padding-top:var(--s5)}}
@media (max-width:48rem){.text-2col{grid-template-columns:1fr}}
/* Menu: one photo per section (Ed, Oct 11) */
.menu-photo{margin:var(--s2) 0 var(--s3)}
.menu-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}

.ftr picture.flogo img{display:block;width:150px;height:auto}
/* beehiiv signup (brief 6) */
.signup-block{max-width:32rem;margin:var(--s4) auto 0;text-align:center}
.signup-block h3{margin-bottom:var(--s1)}
.signup-block p{margin:0 0 var(--s3)}
.signup-block p.signup-small{margin-bottom:var(--s2)}
.signup-small{font-size:var(--small);color:var(--on-dark-muted,var(--muted))}
.beehiiv-embed{max-width:100%}
.beehiiv-embed iframe{max-width:100%}

.signup-block .beehiiv-embed{max-width:21rem;margin:0 auto var(--s3)}
/* /newsletter/: photo fills the column beside the form, no dead space (Ed, Oct 11) */
@media (min-width:48.01rem){.newsletter-split{align-items:stretch}.newsletter-split .media{position:relative;min-height:24rem}.newsletter-split .media picture{position:absolute;inset:0}.newsletter-split .media img{height:100%;aspect-ratio:auto}}
.beehiiv-page{margin-top:var(--s3)}
/* Spacing and alignment pass (Ed, Oct 11) */
.nowrap{white-space:nowrap}
@media (min-width:48.01rem){.text-2col-aside{padding-top:0}}
.text-2col-aside>h3:first-child,.text-2col-aside>h3:first-of-type{margin-top:0}
.rates th:first-child,.rates td:first-child{padding-left:0}
.rates td:first-child{font-weight:700;color:var(--head)}
@media (min-width:60.01rem){.facts:has(li:nth-child(5)){grid-template-columns:repeat(2,max-content);column-gap:var(--s5);max-width:none}}
@media (min-width:75rem){.facts:has(li:nth-child(5)){grid-template-columns:repeat(3,max-content);column-gap:var(--s5);max-width:none}}
@media (min-width:60.01rem) and (max-width:75rem){.hdr .wrap{gap:var(--s2)}.nav{gap:.85rem;font-size:1rem}.hdr .btn{padding:.6rem .8rem;font-size:1rem}.brand{font-size:1.75rem}}
.nav a,.nav summary{white-space:nowrap}
@media (min-width:60.01rem) and (max-width:68rem){.hdr .brand small{display:none}.nav{gap:.7rem}}
/* EEAT byline at the end of a page's content (Ed, Oct 12) */
.byline{padding-block:var(--s3)}
.byline p{margin:0;font-size:var(--small);color:var(--muted)}
/* Rating date as a footnote (Ed, Oct 17) */
.rating-star{font-size:.8em;vertical-align:super;line-height:0;margin-left:.05em}
.ftr .ftr-bottom{display:block}
.ftr .rating-note{margin:var(--s3) 0 0;font-size:.8125rem;opacity:.75}
/* Event flyers: shown whole, never cropped; tap opens full size (Ed, Oct 17) */
.flyer img,.split .media.flyer img,.tile.has-flyer img{height:auto;object-fit:contain}
.split .media.flyer-tall{max-width:28rem;width:100%;justify-self:center}
.flyer{display:block;cursor:zoom-in}
.split .media.flyer a{display:block;cursor:pointer}
.event-card{scroll-margin-top:6rem}
@media (max-width:48rem){.tile.has-flyer{display:block}.tile.has-flyer img{margin:0 0 var(--s2)}}
/* Footer link groups (Ed, Oct 17): four short columns on wide screens, tap-to-open lists on phones */
.ftr .wrap{grid-template-columns:1.1fr 1fr 2.6fr}
.ftr-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.fgroup summary{list-style:none;font:800 .9375rem/1.3 Shoulders,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark);margin-bottom:.35rem}
.fgroup summary::-webkit-details-marker{display:none}
.ftr .fgroup ul a{padding-block:.4rem}
@media (min-width:48.01rem){.fgroup summary{pointer-events:none}}
@media (max-width:48rem){
  .ftr .wrap{grid-template-columns:1fr}
  .ftr-links{grid-column:1/-1;display:block;border-top:1px solid rgba(255,255,255,.12)}
  .fgroup{border-bottom:1px solid rgba(255,255,255,.12)}
  .fgroup summary{display:flex;justify-content:space-between;align-items:center;min-height:3rem;margin:0;cursor:pointer}
  .fgroup summary::after{content:"+";font-size:1.4rem;font-weight:400}
  .fgroup[open] summary::after{content:"\2212"}
  .fgroup ul{padding-bottom:var(--s2)}
  .ftr .fgroup ul a{padding-block:.6rem}
}