/* /glamping/ — Whinberry Huts. An illustrated hillside that redraws itself from the live weather (glamping.js).
   The scene's colours are CSS vars on .wb-scene; the defaults below are a mild grey day, so it still looks right without JS.
   html.wb-move (not reduced motion) switches on smoke, swaying and drifting fog. */
@font-face { font-family: "Bitter"; src: url(/assets/fonts/bitter-normal-300-800.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url(/assets/fonts/nunito-sans-normal-300-800.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url(/assets/fonts/martian-mono-normal-300-600.woff2) format("woff2"); font-weight: 300 600; font-display: swap; }

.wb-page {
  --f-display: "Bitter", Georgia, serif; --f-body: "Nunito Sans", system-ui, sans-serif; --f-mono: "Martian Mono", ui-monospace, monospace; --h-weight: 700;
  --pg-bg: #f3f0e8; --pg-ink: #1f2a24; --berry: #4f3a75; --berry-2: #7b62a8; --moss: #4d6b3c; --muted: #5b6660; --line: rgba(31, 42, 36, .14);
  --bar-bg: #1b2320; --bar-fg: #f3f0e8; --tag: #c8b3ec; --btn-bg: #4f3a75; --btn-fg: #fff;
}
.wb-page h1, .wb-page h2, .wb-page h3 { letter-spacing: -.02em; }

/* ---------- the scene ---------- */
/* the site header (~74px) and the business bar sit above, so the whole hero fits the first screen */
.wb-hero { position: relative; height: clamp(560px, calc(100svh - var(--bar-h) - 74px), 980px); overflow: hidden; color: #f7f4ec; isolation: isolate; }
.wb-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(110% 80% at 0% 0%, rgba(8, 12, 16, var(--scrim, .4)), rgba(8, 12, 16, calc(var(--scrim, .4) * .45)) 40%, transparent 65%); }
.wb-scene {
  --sky-top: #8fa4b6; --sky-bot: #d4dde2; --far1: #a3b2b2; --far2: #879d88; --ridge: #6c8a55; --front: #4f733f; --wall: #5b6b55;
  --tree: #3e5f37; --trunk: #4a3e33; --fog: 0; --fogc: #e9eef0; --sway: 1.2; --swayd: 3.4s; --px: 0; --py: 0;
  position: absolute; inset: 0; z-index: 0;
}
.wb-sky { position: absolute; inset: 0; background: linear-gradient(var(--sky-top), var(--sky-bot) 78%); }
.wb-back, .wb-precip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wb-precip { pointer-events: none; }
.wb-far, .wb-near, .wb-front { position: absolute; left: -2%; width: 104%; bottom: 0; height: 100%; display: block; }
.wb-far { translate: calc(var(--px) * -6px) calc(var(--py) * -3px); }
.wb-near { translate: calc(var(--px) * -14px) calc(var(--py) * -6px); }
.wb-front { translate: calc(var(--px) * -26px) calc(var(--py) * -10px); }
.wb-far1 { fill: var(--far1); } .wb-far2 { fill: var(--far2); }
.wb-ridge { fill: var(--ridge); } .wb-field { fill: var(--front); }
.wb-wall { fill: none; stroke: var(--wall); stroke-width: 7; stroke-dasharray: 9 4; stroke-linecap: round; }
.wb-trunk { fill: none; stroke: var(--trunk); stroke-width: 8; stroke-linecap: round; }
.wb-leaves { fill: var(--tree); }
.wb-grass path { fill: none; stroke: color-mix(in srgb, var(--front) 70%, #000); stroke-width: 3; stroke-linecap: round; }
.wb-flash { position: absolute; inset: 0; background: #e8ecff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }

/* fog: a haze plus soft bands that drift sideways */
.wb-fog { position: absolute; inset: 0; pointer-events: none; opacity: var(--fog); }
.wb-fog i { position: absolute; left: -30%; width: 160%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, var(--fogc), transparent); filter: blur(8px); }
.wb-fog--back { background: linear-gradient(transparent 22%, color-mix(in srgb, var(--fogc) 75%, transparent) 62%); }
.wb-fog--back i:nth-child(1) { top: 46%; } .wb-fog--back i:nth-child(2) { top: 58%; height: 26%; left: -50%; }
.wb-fog--front { opacity: calc(var(--fog) * .75); background: linear-gradient(transparent 50%, color-mix(in srgb, var(--fogc) 55%, transparent) 85%); }
.wb-fog--front i:nth-child(1) { top: 64%; height: 30%; } .wb-fog--front i:nth-child(2) { top: 76%; height: 36%; left: -10%; }
.wb-move .wb-fog i { animation: wb-drift 38s ease-in-out infinite alternate; }
.wb-move .wb-fog i:nth-child(2) { animation-duration: 52s; animation-direction: alternate-reverse; }
@keyframes wb-drift { to { translate: 14% 0; } }
.wb-move .wb-sway, .wb-move .wb-grass path { transform-box: fill-box; transform-origin: 50% 100%; animation: wb-sway var(--swayd) ease-in-out infinite alternate; }
@keyframes wb-sway { from { rotate: calc(var(--sway) * -.35deg); } to { rotate: calc(var(--sway) * 1deg); } }

/* ---------- the huts: real photos standing on the hill (links to each hut below) ---------- */
.wb-pins { --pw: clamp(130px, 12.5vw, 240px); --gx: max(16px, (100vw - 1160px) / 2);
  position: absolute; inset: 0; z-index: 2; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.wb-pin { position: absolute; width: var(--pw); pointer-events: auto; }
.wb-pin--1 { left: var(--gx); bottom: 7%; rotate: -2.5deg; }
.wb-pin--2 { left: calc(var(--gx) + var(--pw) * 1.18); bottom: 14%; rotate: 1.5deg; }
.wb-pin--3 { left: calc(var(--gx) + var(--pw) * 2.36); bottom: 6%; rotate: -1deg; }
.wb-pin a { display: block; color: inherit; text-decoration: none; transition: translate .35s cubic-bezier(.3, 1.4, .5, 1); }
.wb-pin a::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -10px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(8px); z-index: -1; }
.wb-pin__frame { position: relative; display: block; padding: 6px; border-radius: 12px; background: #fbf8f1;
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .55), 0 0 calc(var(--glow, 0) * 46px) calc(var(--glow, 0) * 6px) rgba(255, 186, 96, calc(var(--glow, 0) * .55)); transition: box-shadow 1s; }
.wb-pin__frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; filter: brightness(var(--photo-light, 1)) saturate(calc(.75 + var(--photo-light, 1) * .25)); transition: filter 1s; }
.wb-pin__frame::after { content: ""; position: absolute; inset: 6px; border-radius: 7px; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(rgba(255, 170, 80, .55), rgba(255, 120, 60, .35)); opacity: var(--photo-warm, 0); transition: opacity 1s; }
.wb-pin__label { display: flex; justify-content: space-between; gap: .4rem; margin: .45rem 2px 0; padding: .3rem .6rem; border-radius: 999px; background: rgba(16, 22, 24, .72); backdrop-filter: blur(6px);
  font-size: .78rem; color: #f5f2ea; white-space: nowrap; }
.wb-pin__label b { font-family: var(--f-display); font-size: .9rem; }
.wb-pin a:hover, .wb-pin a:focus-visible { translate: 0 -6px; }
.wb-pin a:focus-visible .wb-pin__frame { outline: 3px solid #c8b3ec; outline-offset: 3px; }
/* arriving from a hut on the hill: a soft glow that fades, so you can see which one you picked */
.wb-card:target { animation: wb-picked 2.4s ease-out; }
@keyframes wb-picked { 0%, 35% { box-shadow: 0 0 0 3px var(--berry), 0 20px 40px -24px rgba(79, 58, 117, .6); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ---------- words over the sky ---------- */
.wb-copy { position: relative; z-index: 2; padding: clamp(1.6rem, 6vh, 4.5rem) max(16px, (100vw - 1160px) / 2) 0; max-width: calc(60rem + max(16px, (100vw - 1160px) / 2)); }
.wb-kick { margin: 0 0 .9rem; font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.wb-hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.wb-hero h1 span { display: block; font-weight: 400; font-style: italic; }
.wb-mood { margin: 1.1rem 0 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45; max-width: 34rem; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); transition: opacity .4s; }
.wb-mood.is-swap { opacity: 0; }

/* readout + "try another sky" */
.wb-hud { position: absolute; z-index: 3; right: clamp(16px, 2.2vw, 40px); bottom: clamp(1rem, 3.5vh, 2.2rem); width: min(26rem, 33vw); display: grid; gap: .6rem; pointer-events: none; }
.wb-now, .wb-try { pointer-events: auto; border-radius: 18px; padding: 1rem 1.15rem; color: #f5f2ea; background: rgba(16, 22, 24, .55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
.wb-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 1rem; }
.wb-now__kick { flex-basis: 100%; }
.wb-now__place { flex-basis: 100%; margin: .25rem 0 0; display: flex; align-items: center; gap: .4rem; font-size: .8rem; line-height: 1.3; opacity: .85; }
.wb-now__place svg { width: 9px; height: 12px; flex: none; fill: #c8b3ec; }
.wb-now__place span { opacity: .7; white-space: nowrap; }
.wb-now__kick { margin: 0; font: 500 .66rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85; display: flex; align-items: center; gap: .4rem; }
.wb-dot { width: 7px; height: 7px; border-radius: 50%; background: #7ee08f; box-shadow: 0 0 0 0 rgba(126, 224, 143, .6); }
.wb-move .wb-dot { animation: wb-ping 2s infinite; }
.wb-now.is-preview .wb-dot { background: #f2c14e; animation: none; }
@keyframes wb-ping { 70% { box-shadow: 0 0 0 8px rgba(126, 224, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 224, 143, 0); } }
.wb-now__temp { margin: .2rem 0; display: flex; align-items: baseline; gap: .7rem; }
.wb-now__temp b { font: 600 2.6rem/1 var(--f-display); letter-spacing: -.03em; }
.wb-now__label { font-size: .95rem; line-height: 1.25; }
.wb-now__dl { display: flex; gap: 1.4rem; margin: 0; }
.wb-now__dl div { display: grid; }
.wb-now__dl dt { font: 500 .6rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.wb-now__dl dd { margin: 0; font-size: .9rem; font-weight: 600; }

.wb-try__h { margin: 0 0 .6rem; font: 500 .66rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.wb-seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.wb-seg button { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: inherit; border-radius: 999px; padding: .38rem .78rem; font: 600 .82rem var(--f-body); cursor: pointer; transition: background .2s, color .2s; }
.wb-seg button:hover { background: rgba(255, 255, 255, .16); }
.wb-seg button[aria-pressed="true"] { background: #f5f2ea; color: #1b2320; border-color: #f5f2ea; }
.wb-time { display: grid; gap: .3rem; margin-top: .8rem; font-size: .8rem; }
.wb-time span { display: flex; justify-content: space-between; opacity: .9; }
.wb-time output { font: 500 .78rem var(--f-mono); }
.wb-time input { width: 100%; accent-color: #c8b3ec; }

/* ---------- sections below ---------- */
.wb-sec { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.wb-page .wb-sec h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin: .6rem 0 clamp(1.6rem, 3vw, 2.4rem); }
.wb-page .dm-eyebrow { color: var(--berry); }
.wb-intro { padding-bottom: 1rem; }
.wb-intro__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 4rem; align-items: end; }
.wb-page .wb-intro__grid h2 { margin-bottom: 0; }
.wb-intro__grid > p { margin: 0; color: var(--muted); font-size: 1.1rem; }

.wb-acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.wb-act { position: relative; padding: 1.4rem 1.4rem 1.6rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s, border-color .3s; }
.wb-page .wb-act h3 { font-size: 1.35rem; line-height: 1.1; margin: 1rem 0 .6rem; }
.wb-act p { margin: 0; font-size: .95rem; color: var(--muted); }
.wb-act__badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font: 500 .64rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; background: #ebe7de; color: var(--muted); }
.wb-act.is-good { border-color: var(--moss); box-shadow: 0 18px 34px -24px rgba(77, 107, 60, .7); transform: translateY(-4px); }
.wb-act.is-good .wb-act__badge { background: var(--moss); color: #fff; }

.wb-fc { background: #e9e5da; }
.wb-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.wb-day { position: relative; display: grid; gap: .2rem; justify-items: start; padding: 1.2rem; border-radius: 18px; background: var(--pg-bg); }
.wb-day--empty { grid-column: 1 / -1; color: var(--muted); }
.wb-day b { font: 700 1.15rem var(--f-display); }
.wb-day svg { width: 64px; height: 64px; margin: .2rem 0; }
.wb-day__t { font: 500 .95rem var(--f-mono); }
.wb-day__t span { color: var(--muted); }
.wb-day__w { font-size: .9rem; color: var(--muted); }
.wb-day__best { position: absolute; top: 1rem; right: 1rem; padding: .22rem .55rem; border-radius: 999px; background: var(--berry); color: #fff; font: 500 .6rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }

.wb-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.wb-card { padding: 1.2rem 1.3rem 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.wb-card__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin-bottom: 1rem; background: #e3ded2; }
.wb-page .wb-card h3 { font-size: 1.6rem; line-height: 1.1; margin: .3rem 0 .5rem; }
.wb-page .wb-card__meta { margin: 0 0 1rem; font: 500 .78rem var(--f-mono); color: var(--berry); }
.wb-card p { color: var(--muted); }
.wb-card__feats { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wb-card__feats li { padding: .3rem .65rem; border-radius: 999px; background: #efece4; font-size: .82rem; font-weight: 600; }
.wb-small { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }

.wb-book { background: #1b2320; color: #f3f0e8; }
.wb-book .dm-eyebrow { color: #c8b3ec; }
.wb-book__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem 4rem; align-items: center; }
.wb-book__grid > div > p { color: rgba(243, 240, 232, .75); }
.wb-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; padding: 1.4rem; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.wb-form label { display: grid; gap: .35rem; font: 500 .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 240, 232, .75); }
.wb-form input, .wb-form select { min-height: 46px; padding: 0 .75rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: #232c29; color: #f3f0e8; font: 500 1rem var(--f-body); color-scheme: dark; }
.wb-form .dm-btn { grid-column: 1 / -1; --btn-bg: #c8b3ec; --btn-fg: #1b2320; }
.wb-page .wb-form .dm-btn { color: #1b2320; }
.wb-form .dm-note { grid-column: 1 / -1; margin: 0; color: #f3f0e8; }
.wb-form .dm-note a { color: #c8b3ec; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .wb-acts, .wb-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-cards { grid-template-columns: 1fr; max-width: 34rem; }
  .wb-intro__grid, .wb-book__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* the scene keeps the top of the screen; the readout and sky picker sit underneath it */
  .wb-hero { height: auto; display: flex; flex-direction: column; }
  .wb-scene { position: relative; order: 0; height: 72svh; min-height: 460px; }
  /* the three huts in a row along the bottom of the hill */
  .wb-pins { --pw: calc((100vw - 32px - 16px) / 3); bottom: auto; height: 72svh; min-height: 460px; }
  .wb-pin--1, .wb-pin--2, .wb-pin--3 { bottom: 14px; rotate: 0deg; }
  .wb-pin--1 { left: 16px; } .wb-pin--2 { left: calc(16px + var(--pw) + 8px); bottom: 26px; } .wb-pin--3 { left: calc(16px + var(--pw) * 2 + 16px); }
  .wb-pin__frame { padding: 4px; border-radius: 9px; }
  .wb-pin__label { justify-content: center; padding: .22rem .45rem; font-size: 0; }   /* name only on phones */
  .wb-pin__label b { font-size: .78rem; }
  .wb-copy { position: absolute; left: 0; right: 0; top: 0; }
  .wb-hud { position: relative; right: auto; bottom: auto; width: auto; padding: 1rem 16px 1.2rem; background: #1b2320; pointer-events: auto; }
  .wb-now, .wb-try { max-width: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .05); }
  .wb-form { grid-template-columns: 1fr 1fr; }
  .wb-form label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .wb-acts, .wb-days { grid-template-columns: 1fr; }
  .wb-hero h1 { font-size: 2.3rem; }
}

/* ?scene=only: just the hillside, filling the window (used for screenshots) */
.wb-shot .wb-hero { position: fixed; inset: 0; height: auto; z-index: 2147483000; }
.wb-shot .cur-dot, .wb-shot .cur-ring, .wb-shot .grain { display: none !important; }
.wb-shot .wb-copy, .wb-shot .wb-hud { display: none; }
.wb-shot .wb-scene { height: 100%; }