/* Timber's Nest. Seasonal themes are CSS custom properties on html[data-season]. */
:root {
  --bg: #fbf9f4;
  --ink: #1c2320;
  --ink-soft: #4a5550;
  --rule: #e2ded3;
  --card: #ffffff;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 20px;
  --max: 1160px;
  --radius: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* season tokens (default = winter) */
  --deep: #13222d;
  --accent: #8cc3e6;
  --on-accent: #0d1a24;
  --accent-ink: #1d5f8a;
  --tint: #edf3f7;
}
html[data-season="winter"] { --deep:#13222d; --accent:#8cc3e6; --on-accent:#0d1a24; --accent-ink:#1d5f8a; --tint:#edf3f7; }
html[data-season="spring"] { --deep:#1c3326; --accent:#a8cc7a; --on-accent:#14260f; --accent-ink:#3f6b1e; --tint:#f1f4ea; }
html[data-season="summer"] { --deep:#15332b; --accent:#f0b44c; --on-accent:#2a1a00; --accent-ink:#8a5a00; --tint:#f7f2e6; }
html[data-season="fall"]   { --deep:#34190f; --accent:#e07b4a; --on-accent:#2a0e04; --accent-ink:#a23f14; --tint:#f8efe6; }

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color: inherit; }
h1,h2,h3 { font-family: var(--serif); font-weight: 500; line-height:1.1; letter-spacing:-0.015em; margin:0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 7.5vw, 4.6rem); }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.9rem); }
h3, .h3 { font-size: 1.35rem; letter-spacing:-0.01em; }
p, li, .lede { text-wrap: pretty; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin:0 auto; padding: 0 var(--gutter); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-999px; top:8px; background:#fff; color:#000; padding:10px 14px; z-index:100; border-radius:8px; }
.skip:focus { left:8px; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .backdoor :focus-visible, .book :focus-visible, .site-header :focus-visible, .distances :focus-visible, .sticky-cta :focus-visible, .site-footer :focus-visible, dialog#lightbox :focus-visible { outline-color: #fff; }
.eyebrow { font:600 .78rem/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color: var(--accent-ink); margin:0 0 14px; }
.fine { font-size:.85rem; color: var(--ink-soft); }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }
.link { color: var(--accent-ink); font-weight:600; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding: 0 22px; border-radius: 999px; border:1.5px solid transparent; font:600 1rem/1 var(--sans); text-decoration:none; cursor:pointer; transition: transform .2s var(--ease), background-color .3s, color .3s, border-color .3s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { color:#fff; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-lg { min-height: 54px; padding: 0 28px; font-size:1.05rem; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size:.9rem; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color:#fff; transition: background-color .3s, box-shadow .3s; }
.site-header.solid { background: color-mix(in srgb, var(--deep) 94%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.bar { display:flex; align-items:center; gap: 18px; height: 64px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font: 500 1.25rem/1 var(--serif); margin-right:auto; }
.nav { display:none; gap: 18px; white-space:nowrap; font-size:.92rem; font-weight:500; }
.nav a { text-decoration:none; opacity:.9; padding: 8px 0; }
.nav a:hover { opacity:1; text-decoration: underline; text-underline-offset: 6px; }
.header-switch { display:none; }
.header-switch .switch button span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.header-switch .switch button { padding:0 10px; }
.brand span, .bar > .btn-sm { white-space:nowrap; }
.site-header .wrap { max-width:1320px; }
.menu-btn { width:44px; height:44px; background:none; border:0; color:inherit; cursor:pointer; display:grid; place-items:center; }
.menu-ico, .menu-ico::before, .menu-ico::after { display:block; width:22px; height:2px; background:currentColor; border-radius:2px; position:relative; transition: transform .25s; }
.menu-ico::before, .menu-ico::after { content:""; position:absolute; left:0; }
.menu-ico::before { top:-7px; } .menu-ico::after { top:7px; }
.nav.open { display:flex; flex-direction:column; gap:0; position:absolute; top:64px; left:0; right:0; background: var(--deep); padding: 8px var(--gutter) 18px; }
.nav.open a { padding: 14px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:1.05rem; }
.bar > .btn-sm { display:none; }

/* Season switch (segmented control) */
.switch { display:inline-flex; padding:5px; gap:4px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); max-width:100%; }
.switch button { appearance:none; border:0; background:transparent; color:#fff; font:600 .95rem/1 var(--sans); min-height:46px; padding:0 16px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition: background-color .3s, color .3s; white-space:nowrap; }
.switch button svg { width:18px; height:18px; flex:none; }
.switch button:hover { background: rgba(255,255,255,.16); }
.switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.switch.compact button { min-height:34px; padding:0 12px; font-size:.85rem; }
.switch.compact { padding:3px; }
.switch.on-light { background: var(--card); border-color: var(--rule); }
.switch.on-light button { color: var(--ink); }
.switch.on-light button:hover { background: var(--tint); }
.switch.on-light button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* Hero */
.hero { position:relative; min-height: 100svh; display:flex; align-items:flex-end; color:#fff; background: var(--deep); overflow:hidden; }
.hero-media { position:absolute; inset:0; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; opacity:0; transition: opacity 1s ease; }
.hero-img.is-on { display:block; opacity:1; }
.hero-img.is-in { display:block; z-index:2; }
.hero-scrim { position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%),
  linear-gradient(0deg, color-mix(in srgb, var(--deep) 92%, transparent) 0%, color-mix(in srgb, var(--deep) 75%, transparent) 45%, rgba(0,0,0,.05) 80%); z-index:3; transition: background .6s; }
.hero-inner { position:relative; z-index:4; padding-top: 120px; padding-bottom: 36px; width:100%; }
.hero .eyebrow, .hero-sub { text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.hero .eyebrow { color:#fff; opacity:.9; }
.hero h1 { max-width: 15ch; margin-bottom: .35em; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero-sub { font-size: 1.1rem; max-width: 52ch; opacity:.95; }
.hero-tag { font: italic 400 1.3rem/1.35 var(--serif); max-width: 30ch; margin: 18px 0 26px; padding-left:16px; border-left: 3px solid var(--accent); transition: opacity .3s; }
.switch-label { font:600 .75rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px; opacity:.85; }
.switch-block { margin-bottom: 0; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }

/* Facts */
.facts { background: var(--deep); color:#fff; }
.facts-list { list-style:none; margin:0 auto; padding: 22px var(--gutter); display:grid; grid-template-columns: repeat(2,1fr); gap: 18px 16px; }
.facts-list li { display:flex; flex-direction:column; line-height:1.25; }
.facts-list b { font: 500 1.7rem/1 var(--serif); color: var(--accent); margin-bottom:4px; }
.facts-list span { font-size:.88rem; opacity:.85; }

/* Sections */
.section { padding: 72px 0; }
.section .eyebrow + h2 { max-width: 20ch; }
.intro { display:grid; gap: 28px; }
.intro h2 { max-width: 22ch; }
.prose p { font-size:1.08rem; color: var(--ink-soft); max-width: 60ch; }
.stories { display:grid; gap: 56px; margin-top: 64px; }
.story { display:grid; gap: 22px; align-items:center; }
.story figure { margin:0; border-radius: var(--radius); overflow:hidden; background: var(--tint); aspect-ratio: 4/3; }
.story figure img { width:100%; height:100%; object-fit:cover; }
.story-text p { color: var(--ink-soft); max-width: 46ch; }
.story-text strong, .trio strong { color: var(--ink); font-weight:600; }
.trio { display:grid; gap: 28px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rule); }
.trio-item h3 { font-size:1.2rem; }
.trio-item p { color: var(--ink-soft); font-size:.98rem; margin:0; }
.gallery-title { margin-top: 64px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 18px; }
.chip { min-height:44px; appearance:none; background: transparent; color: var(--ink); border:1.5px solid var(--rule); font:600 .88rem/1 var(--sans); padding:0 16px; border-radius:999px; cursor:pointer; }
.chip[aria-pressed="true"] { background: var(--deep); color:#fff; border-color: var(--deep); }
.gallery { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery li[hidden] { display:none; }
.gallery button { display:block; width:100%; padding:0; border:0; background: var(--tint); cursor: zoom-in; border-radius: 10px; overflow:hidden; aspect-ratio: 1; }
.gallery img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.gallery button:hover img { transform: scale(1.04); }

/* Back door */
.backdoor { position:relative; min-height: 78vh; display:flex; align-items:flex-end; color:#fff; background: var(--deep); overflow:hidden; }
.backdoor-media, .backdoor-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.backdoor-media img { transition: opacity .5s; }
.backdoor-scrim { position:absolute; inset:0; background: linear-gradient(0deg, color-mix(in srgb, var(--deep) 90%, transparent) 0%, color-mix(in srgb, var(--deep) 35%, transparent) 55%, rgba(0,0,0,.1) 100%); }
.backdoor-inner { position:relative; padding-top: 140px; padding-bottom: 48px; width:100%; }
.backdoor .eyebrow { color:#fff; }
.backdoor h2 { max-width: 16ch; }
.backdoor p { max-width: 48ch; font-size:1.1rem; }
.backdoor .todo { font-size:.82rem; }
.backdoor .caption { font-size:.8rem; opacity:.75; margin-top: 18px; }
.todo { background:#fff3cd; color:#5b4400; border:1px dashed #b88a00; border-radius:8px; padding:8px 12px; font-size:.82rem; line-height:1.4; max-width: 60ch; }
.todo::before { content:"Owner note: "; font-weight:700; }
#book-todo::before { content:""; }

/* Season section */
.season-section { background: var(--tint); transition: background-color .6s; }
.season-head { display:grid; gap: 22px; margin-bottom: 20px; }
.season-head h2 { max-width: none; }
.weather { padding: 14px 18px; background: var(--card); border-left: 4px solid var(--accent); border-radius: 8px; max-width: 70ch; margin: 22px 0; font-size:.98rem; }
.season-photos { list-style:none; padding:0; margin: 0 0 28px; display:grid; gap:8px; grid-template-columns: repeat(2,1fr); }
.season-photos li { border-radius:12px; overflow:hidden; background:#ddd; aspect-ratio: 4/3; }
.season-photos li:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.season-photos.single li { grid-column:1/-1; aspect-ratio: 16/8; }
.season-photos img { width:100%; height:100%; object-fit:cover; }
.legend { display:flex; flex-wrap:wrap; gap: 6px 22px; font-size:.82rem; color: var(--ink-soft); margin: 8px 0 34px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.group { margin-bottom: 44px; }
.group h3 { font-size: 1.5rem; display:flex; align-items:center; gap:12px; margin-bottom: 16px; }
.group h3::after { content:""; flex:1; height:1px; background: var(--rule); }
.cards { list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.cards:has(> li:only-child) .card { max-width:640px; }
.card { background: var(--card); border-radius: var(--radius); padding: 20px 20px 18px; border:1px solid var(--rule); display:flex; flex-direction:column; gap:8px; }
.card h4 { font: 500 1.2rem/1.2 var(--serif); margin:0; display:flex; gap:8px; align-items:flex-start; justify-content:space-between; }
.card p { margin:0; font-size:.95rem; color: var(--ink-soft); line-height:1.55; }
.card .note { font-size:.85rem; border-top:1px dashed var(--rule); padding-top:8px; }
.meta { display:flex; flex-wrap:wrap; gap: 6px 14px; font-size:.8rem; font-weight:600; color: var(--ink); margin-top:auto; padding-top:6px; }
.meta span { display:inline-flex; align-items:center; gap:6px; }
.meta svg { width:14px; height:14px; color: var(--accent-ink); }
.card a.more { color: var(--accent-ink); font-weight:600; font-size:.85rem; }
.chk { display:inline-grid; place-items:center; flex:none; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--accent-ink); color: var(--accent-ink); font: italic 700 .72rem/1 var(--serif); }
.fam { display:inline-block; width:11px; height:11px; border-radius:50%; background: var(--accent-ink); }
.fam-kids { background: linear-gradient(90deg, var(--accent-ink) 50%, transparent 50%); border:1.5px solid var(--accent-ink); }
.fam-teen { background: transparent; border:1.5px solid var(--accent-ink); }
.fam-pro { background: transparent; border:1.5px dashed var(--ink-soft); }
.alerts { display:grid; gap:10px; margin-top: 8px; }
.alert { background: var(--card); border:1px solid var(--rule); border-left:4px solid var(--accent-ink); border-radius:8px; padding: 12px 16px; font-size:.92rem; margin:0; }

/* Trip */
.trip-grid { display:grid; gap: 40px; }
.itinerary { list-style:none; padding:0; margin: 24px 0; counter-reset: d; }
.itinerary li { display:grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); }
.itinerary li:last-child { border-bottom: 1px solid var(--rule); }
.itinerary b { font: 500 1.2rem/1.2 var(--serif); color: var(--accent-ink); }
.itinerary p { margin:0; color: var(--ink-soft); }
.pack { background: var(--tint); border-radius: var(--radius); padding: 26px; align-self:start; transition: background-color .6s; }
.pack ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.pack li { padding-left: 26px; position:relative; font-size:.97rem; }
.pack li::before { content:""; position:absolute; left:0; top:.5em; width:12px; height:7px; border-left:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink); transform: rotate(-45deg); }

/* Distances */
.distances { background: var(--deep); color:#fff; }
.distances .eyebrow { color: var(--accent); }
.distances .lede { color: rgba(255,255,255,.8); }
.bars { list-style:none; margin: 28px 0; padding:0; display:grid; gap: 12px; }
.bars li { display:grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items:center; }
.bars .n { font-weight:600; }
.bars .t { font-size:.88rem; opacity:.85; font-variant-numeric: tabular-nums; }
.bars .track { grid-column: 1 / -1; height:8px; border-radius: 8px; background: rgba(255,255,255,.12); position:relative; overflow:hidden; }
.bars .fill { position:absolute; top:0; bottom:0; border-radius:8px; background: var(--accent); min-width: 8px; }
.distances .link { color: var(--accent); }

/* Getting there */
.get-grid { display:grid; gap: 36px; }
.get-grid h2 { max-width: 18ch; }
.callout { background: var(--tint); border-radius: var(--radius); padding: 26px; border-left: 5px solid var(--accent-ink); align-self:start; transition: background-color .6s; }
.callout h3 { font-size:1.25rem; }
.callout p:last-child { margin:0; }

/* Why + FAQ */
.why { background: var(--tint); transition: background-color .6s; }
.why-grid { display:grid; gap: 48px; }
.ticks { list-style:none; margin: 20px 0 0; padding:0; display:grid; gap: 12px; }
.ticks li { padding-left: 30px; position:relative; }
.ticks li::before { content:""; position:absolute; left:2px; top:.45em; width:14px; height:8px; border-left:2.5px solid var(--accent-ink); border-bottom:2.5px solid var(--accent-ink); transform: rotate(-45deg); }
details { border-top: 1px solid var(--rule); padding: 4px 0; }
details:last-child { border-bottom: 1px solid var(--rule); }
summary { cursor:pointer; list-style:none; font-weight:600; padding: 16px 32px 16px 0; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:4px; top:12px; font-size:1.5rem; font-weight:400; color: var(--accent-ink); transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ink-soft); margin: 0 0 16px; max-width: 60ch; }

/* Book */
.book { position:relative; background: var(--deep); color:#fff; padding: 88px 0 100px; text-align:center; transition: background-color .6s; }
.book h2 { max-width: 18ch; margin-inline:auto; }
.book p { max-width: 40ch; margin-inline:auto; opacity:.9; margin-bottom: 28px; }
.book .eyebrow { color: var(--accent); }
.book .todo { margin: 22px auto 0; text-align:left; }
.site-footer { background: #0f1512; color: #cdd3cf; padding: 36px 0 110px; }
.site-footer .fine { color:#9ba49f; max-width: 70ch; }
.brand-foot { font: 500 1.2rem var(--serif); color:#fff; }

.ns { background: var(--tint); }

/* Sticky mobile CTA */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--deep) 95%, transparent); backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .35s var(--ease); display:flex; }
.sticky-cta.show { transform:none; }
.sticky-cta .btn { flex:1; }

/* Lightbox */
dialog#lightbox { border:0; padding:0; background: rgba(8,12,10,.96); color:#fff; width:100%; max-width:none; height:100%; max-height:none; }
dialog#lightbox[open] { display:grid; grid-template-columns: 48px 1fr 48px; align-items:center; padding: 16px; }
#lightbox form { display:contents; } /* the close button is fixed; keep the form out of the 3-column grid */
#lightbox figure { margin:0; text-align:center; min-width:0; }
#lightbox img { width:auto; max-width:100%; max-height: 80vh; margin:0 auto; border-radius:8px; object-fit:contain; }
#lightbox figcaption { margin-top:12px; font-size:.9rem; opacity:.85; max-width:70ch; margin-inline:auto; }
.lb-nav, .lb-close { background: rgba(255,255,255,.12); color:#fff; border:0; width:44px; height:44px; border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer; }
.lb-close { position:fixed; top:14px; right:14px; z-index:2; }
dialog::backdrop { background: rgba(0,0,0,.8); }

/* Season swap fade */
.swap { animation: swapIn .5s var(--ease); }
@keyframes swapIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

/* Larger screens */
@media (min-width: 700px) {
  :root { --gutter: 32px; }
  .facts-list { grid-template-columns: repeat(4,1fr); padding-block: 30px; }
  .trio { grid-template-columns: repeat(2,1fr); gap: 36px 48px; }
  .gallery { grid-template-columns: repeat(3,1fr); gap:12px; }
  .season-photos { grid-template-columns: repeat(4,1fr); }
  .season-photos li:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio:auto; }
  .season-photos li { aspect-ratio: 4/3; }
  .season-photos.single li, .season-photos.single li:first-child { grid-column:1/-1; grid-row:auto; aspect-ratio:16/7; }
  .hero-scrim { background: linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 70%), linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%), linear-gradient(0deg, color-mix(in srgb, var(--deep) 92%, transparent) 0%, color-mix(in srgb, var(--deep) 60%, transparent) 38%, rgba(0,0,0,.05) 75%); }
  .backdoor-scrim { background: linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 65%), linear-gradient(0deg, color-mix(in srgb, var(--deep) 90%, transparent) 0%, color-mix(in srgb, var(--deep) 35%, transparent) 55%, rgba(0,0,0,.1) 100%); }
  .sticky-cta { display:none; }
  .site-footer { padding-bottom: 40px; }
  .bar > .btn-sm { display:inline-flex; }
}
@media (min-width: 1000px) {
  body { font-size:18px; }
  .section { padding: 112px 0; }
  .intro { grid-template-columns: 1.1fr 1fr; gap: 80px; align-items:end; }
  .story { grid-template-columns: 1.2fr 1fr; gap: 72px; }
  .story.flip figure { order: 2; }
  .trio { grid-template-columns: repeat(4,1fr); gap: 32px; }
  .gallery { grid-template-columns: repeat(4,1fr); }
  .season-head { grid-template-columns: 1.4fr 1fr; align-items:end; }
  .season-switch-inline { justify-self:end; }
  .trip-grid { grid-template-columns: 1.4fr 1fr; gap: 80px; }
  .get-grid { grid-template-columns: 1.2fr 1fr; gap: 80px; }
  .why-grid { grid-template-columns: 1fr 1.1fr; gap: 90px; }
  .hero-inner { padding-bottom: 64px; }
  .bars li { grid-template-columns: 220px 1fr 120px; }
  .bars .track { grid-column:auto; grid-row:1; grid-column:2; }
  .bars .t { grid-column:3; text-align:right; }
  .bars .n { grid-column:1; }
}
@media (max-width: 520px) {
  .switch { display:grid; grid-template-columns: repeat(4, auto); width:100%; border-radius: 18px; }
  .switch button { flex-direction:column; justify-content:center; gap:4px; min-height:56px; padding:0 4px; font-size:.82rem; }
}
@media (min-width: 1180px) {
  .nav { display:flex; }
  .menu-btn { display:none; }
}
@media (min-width: 1360px) {
  .site-header.solid .header-switch { display:block; }
}
@media (max-width: 1179px) { .bar { gap:10px; } }
@media (max-width: 699px) {
  html { scroll-padding-bottom: 84px; }
  .section { padding: 56px 0; }
  .stories, .trio { margin-top: 48px; }
  .chips { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { flex:none; scroll-snap-align:start; }
  .hero-inner { padding-top: 96px; }
  .hero-tag { margin: 14px 0 18px; }
}
.book .todo { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Review fixes: hidden attr, collapsible activity groups, booking message */
[hidden] { display:none !important; }
details.group { border-top:0; padding:0; }
details.group:last-child { border-bottom:0; }
details.group > summary { padding:0 36px 0 0; font-weight:inherit; }
details.group > summary::after { top:50%; margin-top:-.8rem; }
details.group > summary h3 { margin:0 0 16px; }
details.group[open] > summary h3 { margin-bottom:16px; }
details.group > summary:focus-visible { outline-offset:6px; }
.book-pending { font-weight:600; font-size:1.1rem; }
.why-grid { align-items:start; }
.gallery button { aspect-ratio: 4/3; }

/* ---- Copy review + town content pass ---- */
.hero-chips { list-style:none; margin:0 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.hero-chips li { font:600 .85rem/1 var(--sans); padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.trip-len { margin:8px 0 6px; }
.trip-len .chip { min-width:84px; }
.group-link { margin:-4px 0 0; }

/* Davis and Thomas */
.towns { background:#fff; border-top:1px solid var(--rule); }
.towns-head { display:grid; gap:22px; margin-bottom:26px; }
.towns-head h2 { max-width:none; }
.town-ids { list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:1fr; align-content:start; }
.town-ids li { background:var(--tint); border-left:4px solid var(--accent-ink); border-radius:10px; padding:16px 18px; transition:background-color .6s; }
.town-ids h3 { font-size:1.2rem; margin:0 0 4px; }
.town-ids p { margin:0; font-size:.93rem; color:var(--ink-soft); line-height:1.5; }
.towns-now { margin:0 0 16px; font-size:.98rem; color:var(--ink-soft); max-width:62ch; }
.towns-now b { color:var(--ink); }
.towns-filters { display:grid; gap:10px; margin-bottom:22px; }
.tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tabs .chip { padding:0 6px; text-align:center; }
.fam-toggle { justify-self:start; padding:0 18px; }
.tcard .kind { font:600 .72rem/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.tcard .when { font-weight:600; color:var(--ink); }
.tcard .hours { font-size:.88rem; }
.tcard .hours b { color:var(--ink); font-weight:600; }
.town-empty { grid-column:1/-1; padding:22px; border:1px dashed var(--rule); border-radius:var(--radius); color:var(--ink-soft); }
.town-cards { margin-bottom:18px; }
.fine-dark { font-size:.85rem; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:8px; }
.distances .chk, .route-tips .chk, .bars .chk { vertical-align:middle; }
.distances .chk { color:var(--accent); border-color:var(--accent); }
.bars .n .chk { margin-left:6px; }

/* Getting there */
.route { list-style:none; margin:22px 0 14px; padding:0; counter-reset:r; display:grid; gap:12px; }
.route li { counter-increment:r; display:grid; grid-template-columns:34px 1fr; gap:2px 14px; padding:14px 16px; background:var(--tint); border-radius:12px; transition:background-color .6s; }
.route li::before { content:counter(r); grid-row:1 / span 2; width:34px; height:34px; border-radius:50%; background:var(--accent-ink); color:#fff; font:600 1rem/34px var(--serif); text-align:center; }
.route b { font:500 1.1rem/1.3 var(--serif); }
.route span { color:var(--ink-soft); font-size:.95rem; line-height:1.5; }
.route-note { font-size:.95rem; color:var(--ink-soft); }
.route-tips { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.95rem; }
.route-tips li { padding-left:18px; position:relative; }
.route-tips li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--accent-ink); }
.route-tips b { font-weight:600; }

@media (min-width: 700px) {
  .town-ids { grid-template-columns:1fr 1fr; }
  .tabs { display:flex; flex-wrap:wrap; }
  .tabs .chip { padding:0 18px; }
  .towns-filters { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
}
@media (min-width: 1000px) {
  .towns-head { grid-template-columns:1fr 1.2fr; gap:60px; align-items:end; }
  .town-ids { grid-template-columns:1fr 1fr; }
}
@media (max-width: 699px) {
  .chips.trip-len { flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0; }
}

/* Photo placement: per-image crops (desktop --pos, phone --pos-m), season strip layouts by photo count, story captions. */
.pos { object-position: var(--pos-m, var(--pos, 50% 50%)); }
.season-photos[hidden] { display: none; }
.season-photos.n2 li, .season-photos.n2 li:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.season-photos.n4 li:first-child { grid-column: auto; aspect-ratio: 4/3; }
.story figure { position: relative; }
.story figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; font-size: .82rem; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0)); }
.trio { align-items: start; }
.trio-item figure { margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; background: var(--tint); aspect-ratio: 4/3; }
.trio-item figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) {
  .pos { object-position: var(--pos, 50% 50%); }
  .season-photos.n2 li, .season-photos.n2 li:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; }
  .season-photos.n3 li:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16/7; }
  .season-photos.n3 li { grid-column: span 2; }
  .season-photos.n4 li, .season-photos.n4 li:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.story figure img.inset { position: absolute; right: 12px; bottom: 12px; width: 38%; height: auto; aspect-ratio: 2/1; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }

/* ---------- Canaan Loop ---------- */
.loop { background: var(--tint); }
.loop-head { display:grid; gap:28px; margin-bottom: 24px; }
.loop-head .lede { max-width: 52ch; }
.loop-facts { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.loop-facts li { display:inline-flex; align-items:center; gap:8px; background: var(--card); border:1px solid var(--rule); border-radius:999px; padding:8px 14px; font-size:.86rem; font-weight:600; white-space:nowrap; }
.loop-photo { margin:0; border-radius: var(--radius); overflow:hidden; position:relative; aspect-ratio: 4 / 3; background: var(--deep); }
.loop-photo[hidden] { display:none; }
.loop-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.loop-photo figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px 16px 12px; color:#fff; font-size:.8rem; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0)); }
.loop-now { margin: 0 0 20px; padding: 14px 18px; background: var(--card); border:1px solid var(--rule); border-left:4px solid var(--accent-ink); border-radius:8px; font-size:.98rem; max-width: 75ch; }
.stags { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.stags li { font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--rule); color: var(--ink-soft); }
.stags li.now { background: var(--deep); border-color: var(--deep); color:#fff; }
.loop-check { margin-top: 28px; background: var(--card); border:1px solid var(--rule); border-radius: var(--radius); padding: 20px 20px 8px; }
.loop-check h3 { font-size:1.3rem; margin:0 0 12px; }
.loop-check ul { list-style:none; margin:0; padding:0; display:grid; gap:10px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.loop-check li { font-size:.92rem; color: var(--ink-soft); line-height:1.5; padding-bottom:10px; }
.loop-check li b { color: var(--ink); }
.loop-check .chk, .loop-facts .chk { vertical-align:middle; }
@media (max-width: 999px) { .loop-photo { aspect-ratio: 16 / 9; } }
@media (min-width: 1000px) {
  .loop-head { grid-template-columns: 1.1fr .9fr; align-items:center; gap:48px; }
}

/* ---------- Mobile image display (phones, and tablets held upright) ----------
   Photos are landscape (4:3 / 3:2). Full-viewport or square boxes with object-fit:cover showed a thin vertical slice on a phone.
   Here each slot uses the photo's own aspect ratio so the whole composition shows; desktop (landscape, 1000px+) is unchanged. */
@media (max-width: 699px), (max-width: 999px) and (orientation: portrait) {
  /* Hero (phones): the photo is full-bleed and tall (4:5, capped at 64% of the screen height; 54% on short screens).
     The eyebrow and headline are overlaid on its lower edge over a bottom gradient, the review quote sits as plain text
     directly under the photo (never over it), then the CTA and the rest of the copy. The Airbnb badge floats at the photo's top-left. */
  .hero { --hph: min(125vw, 64svh); }
  .hero { align-items: flex-start; }
  .hero-media { inset: auto; top: 0; left: 0; right: 0; height: var(--hph); }
  .hero-scrim { background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,0) 110px),
    linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(var(--hph) - 270px), color-mix(in srgb, var(--deep) 55%, transparent) calc(var(--hph) - 150px), color-mix(in srgb, var(--deep) 88%, transparent) calc(var(--hph) - 60px), var(--deep) var(--hph)); }
  .hero-inner { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--hph); }
  .hero-inner .hero-chips { position: absolute; top: 78px; left: var(--gutter); margin: 0; display: grid; width: max-content; max-width: calc(100% - var(--gutter) * 2); gap: 6px; }
  .hero-inner .hero-chips li { white-space: nowrap; }
  .hero-inner .eyebrow { order: 1; margin: -118px 0 6px; position: relative; }
  .hero-inner h1 { order: 2; margin-bottom: 18px; }
  .hero-reviews { order: 3; }
  .hero-inner .hero-cta { order: 4; margin: 0 0 22px; }
  .hero-inner .hero-sub { order: 5; }
  .hero-inner .hero-tag { order: 7; }
  .hero-inner .switch-block { order: 8; }
  /* Back door: photo shown at its natural ratio (capped at 66% of the screen height), copy underneath. */
  .backdoor { display: block; min-height: 0; }
  .backdoor-media { position: relative; inset: auto; display: block; }
  .backdoor-media img { position: static; display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 5 / 4; object-fit: cover; object-position: var(--pos-m, 50% 50%); }
  .backdoor-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(0deg, var(--deep), rgba(0,0,0,0)); pointer-events: none; }
  .backdoor-scrim { display: none; }
  .backdoor-inner { padding-top: 12px; padding-bottom: 48px; }
  /* Stories: natural photo ratio instead of a fixed 4:3 box (the night exterior is 2:1, the bathroom is portrait). */
  /* Stories: full-bleed (edge to edge), 5:4 instead of a small rounded 4:3; the crop follows each photo's --pos. Captions sit over the lower edge in the normal gutter. */
  .story figure { aspect-ratio: auto; margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .story figure img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
  .story figcaption { padding-inline: var(--gutter); }
}
@media (max-width: 699px) {
  /* The fireplace photo stacks under the main story photo instead of covering part of it. */
  .story figure img.inset { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; margin-top: 6px; border: 0; border-radius: 0; box-shadow: none; }
  .story figure img.inset { aspect-ratio: 4 / 3; }
  /* Gallery: one column of full-bleed tiles (4:3; lead 3:2; ultra-wide 3:2 cropped by --pos; portrait photos 3:4 so nothing is cut). */
  .gallery { grid-template-columns: 1fr; gap: 6px; margin-inline: calc(var(--gutter) * -1); }
  .gallery button { aspect-ratio: 4 / 3; border-radius: 0; }
  .gallery li.lead button, .gallery li.wide button { aspect-ratio: 3 / 2; }
  .gallery li.port button { aspect-ratio: 3 / 4; }
  /* Season photo strips: full-bleed single column, 4:3 (portrait 3:4). */
  .season-photos { grid-template-columns: 1fr; gap: 6px; margin-inline: calc(var(--gutter) * -1); }
  .season-photos li, .season-photos li:first-child, .season-photos.single li, .season-photos.n2 li, .season-photos.n2 li:first-child, .season-photos.n4 li:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: 0; }
  .season-photos li:has(img.por) { aspect-ratio: 3 / 4; }
  /* Canaan Loop photo: full-bleed 4:3. */
  .loop-photo { margin-inline: calc(var(--gutter) * -1); border-radius: 0; aspect-ratio: 4 / 3; }
  .loop-photo img { height: 100%; }
  .loop-photo figcaption { padding-inline: var(--gutter); }
  /* Bedroom and game-room trio: full-bleed 4:3. */
  .trio-item figure { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  /* Lightbox: the whole photo, full width; arrows float at the bottom corners within thumb reach. */
  dialog#lightbox[open] { grid-template-columns: 1fr; align-content: center; padding: 60px 0 96px; }
  #lightbox img { width: 100%; max-height: 70svh; border-radius: 0; }
  #lightbox figcaption { padding: 0 20px; }
  .lb-nav { position: fixed; bottom: 22px; z-index: 2; }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
}
@media (min-width: 700px) and (max-width: 999px) { .loop-photo { aspect-ratio: 4 / 3; } }

/* Google Maps link on in-town cards */
.tcard .meta .maplink { margin-left:auto; font-weight:700; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; min-height: 24px; display:inline-flex; align-items:center; }
.tcard .meta .maplink:hover { text-decoration-thickness: 2px; }

/* Hero proof points: the Airbnb 4.95 pill and the drive-time chip are one matched pair at the top of the hero text (text link, no Airbnb artwork) */
.hero-chips { margin:0 0 16px; }
.hero-chips li { background:rgba(8,12,10,.66); border-color:rgba(255,255,255,.4); font-size:.92rem; box-shadow:0 2px 12px rgba(0,0,0,.25); -webkit-backdrop-filter:blur(6px); }
.hero-chips .chip-fav { font-weight:700; }
.hero-chips .chip-fav span { color:#ffd479; }
@media (max-width: 999px) and (max-height: 700px) { .hero { --hph: min(125vw, 54svh); } }
/* Airbnb Guest favorite proof points */
.hero-chips .chip-link { color: inherit; text-decoration: none; }
.hero-chips .chip-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.book .trust { margin-top: -10px; font-size: .95rem; }

/* Guest reviews */
.reviews .lede { margin-bottom: 28px; }
.review-grid { display:grid; gap:16px; }
.review { margin:0; background: var(--card); border:1px solid var(--rule); border-radius:14px; padding: 22px 22px 18px; display:flex; flex-direction:column; gap:14px; }
.review blockquote { margin:0; }
.review p { margin:0; font: 500 1.12rem/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }
.review figcaption { margin-top:auto; font: 600 .78rem/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color: var(--accent-ink); }
.review-more { margin-top: 22px; }
@media (min-width: 760px) { .review-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.review-lead p { font-size: 1.35rem; }
@media (min-width: 760px) { .review-lead { grid-column: 1 / -1; text-align:center; align-items:center; padding-block: 28px; } .review-lead p { font-size: 1.6rem; } }

/* ---------- Hero review carousel (built by js/app.js from #reviews .review[data-hero]) ----------
   No panel: plain light text with a soft shadow. Desktop and landscape: low in the hero's lower right, clear of the
   left-hand headline block, over the existing bottom scrim. Phones and upright tablets (the 4:3 photo box): the
   photo is left completely clear and the quote sits in the copy area directly below it. All slides stack in one grid
   cell, so the block is always as tall as its longest quote and nothing jumps when the quote changes. */
.js-only { display: none; }
html.js .js-only { display: revert; }
.hero-reviews { position:absolute; right:var(--gutter); bottom:64px; width:min(480px, calc(100% - var(--gutter) * 2)); box-sizing:border-box; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.65), 0 2px 18px rgba(0,0,0,.6); }
.hr-slides { display:grid; }
.hr-slide { grid-area:1 / 1; margin:0; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s; }
.hr-slide.on { opacity:1; visibility:visible; transition:opacity .6s ease, visibility 0s; }
.hr-slide blockquote { margin:0; }
.hr-slide p { margin:0; font:italic 400 1.06rem/1.38 var(--serif); letter-spacing:-.005em; text-wrap:pretty; }
.hr-slide figcaption { margin-top:6px; font:600 .72rem/1.2 var(--sans); letter-spacing:.07em; text-transform:uppercase; opacity:.9; }
.hr-slide figcaption::before { content:"\2014\00a0"; }
.hr-fav { display:none; }
.hr-bar { display:flex; align-items:center; gap:2px; margin-top:2px; opacity:.6; transition:opacity .2s; }
.hero-reviews:hover .hr-bar, .hero-reviews:focus-within .hr-bar { opacity:1; }
.hr-dots, .hr-ctl { display:flex; align-items:center; }
.hr-dot { width:20px; height:30px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.hr-dot span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); box-shadow:0 0 4px rgba(0,0,0,.5); transition:background .2s, transform .2s; }
.hr-dot[aria-current] span { background:#fff; transform:scale(1.3); }
.hr-btn { width:30px; height:30px; padding:0; border:0; border-radius:50%; background:none; color:#fff; cursor:pointer; display:grid; place-items:center; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.hr-btn:hover { background-color:rgba(255,255,255,.18); }
.hr-btn svg { width:16px; height:16px; }
.hr-ctl { margin-left:6px; }
.hr-more { margin-left:auto; font:600 .72rem/1 var(--sans); color:#fff; text-decoration:underline; text-underline-offset:3px; }
.hero-reviews :focus-visible { outline:2px solid #fff; outline-offset:1px; }
@media (max-width: 999px) { .hero-reviews { width:min(380px, calc(100% - var(--gutter) * 2)); bottom:28px; } }
@media (max-width: 699px), (max-width: 999px) and (orientation: portrait) {
  .hero-reviews { position:relative; right:auto; bottom:auto; width:auto; max-width:520px; margin:6px 0 18px; min-height:7.4rem; text-shadow:none; }
  .hr-slide p { font-size:1.08rem; line-height:1.36; }
  .hr-slide figcaption { font-size:.7rem; margin-top:8px; }
  .hr-bar { opacity:1; margin-top:6px; margin-left:-12px; }
  .hr-dot { width:22px; height:44px; }
  .hr-btn { width:44px; height:44px; filter:none; }
  .hr-more { display:none; }
}
@media (max-width: 360px) { .hr-dot { width:18px; } }

/* Soak story: the whirlpool inset stacks under the hot tub photo on phones, so the overlay caption (which describes only the hot tub) is hidden there; both photos have alt text and the copy names both. */
@media (max-width: 699px) { .story figcaption.cap-desk { display: none; } }

/* ---------- Winter hero (cabin-snow-dusk, 3:2, 1536 px): text must never cover the photo ----------
   Everything here is winter-only; the other seasons' heroes are untouched.
   Phones and upright tablets (<700px, or <1000px portrait): the whole photo is shown uncropped (3:2 at full width) below the chip pair, over a blurred copy of itself, with the
   headline on the blurred/dark area under it. A 4:5 cover crop cannot hold the chimney AND the evergreens, so contain is used.
   Desktop (1000px+): the photo fills the right ~64% of the hero and fades into the dark left, where the text block sits. */
html[data-season="winter"] .hero-media::before { content:""; position:absolute; inset:-30px; background:url(../assets/images/cabin-snow-dusk-480.jpg) 0 0/260% auto; filter:blur(22px) brightness(.7) saturate(1.1); }
@media (max-width: 699px), (max-width: 999px) and (orientation: portrait) {
  html[data-season="winter"] .hero { --hph: calc(156px + 66.67vw + 112px); }
  html[data-season="winter"] .hero-media { overflow:hidden; }
  html[data-season="winter"] .hero-scrim { background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 90px),
    linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(var(--hph) - 140px), color-mix(in srgb, var(--deep) 55%, transparent) calc(var(--hph) - 100px), color-mix(in srgb, var(--deep) 90%, transparent) calc(var(--hph) - 50px), var(--deep) var(--hph)); }
  .hero-img[data-s="winter"] { inset:auto; top:156px; left:0; width:100%; height:66.67vw; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10%); mask-image:linear-gradient(180deg, transparent 0, #000 10%); }
}
@media (min-width: 1000px) {
  html[data-season="winter"] .hero-inner .hero-chips { max-width: 380px; }
  html[data-season="winter"] .hero-sub { max-width: 30ch; }
  html[data-season="winter"] .hero-tag { max-width: 24ch; }
  .hero-img[data-s="winter"] { inset:0 0 0 auto; width:60%; --pos:30% 28%; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16%); mask-image:linear-gradient(90deg, transparent 0, #000 16%); }
  html[data-season="winter"] .hero-scrim { background:
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(0deg, color-mix(in srgb, var(--deep) 70%, transparent) 0%, rgba(0,0,0,0) 30%); }
}