/* Green Mountain Cabin — public site
   Fluid by default: type and spacing scale with the viewport via clamp(),
   layouts use auto-fit grids and container queries rather than fixed breakpoints. */

:root{
  color-scheme:dark;
  --bg:#0b0d0a;
  --bg-2:#121410;
  --bg-3:#181b16;
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.14);
  --text:#e9e7df;
  --text-2:#c4c3b8;
  --text-3:#9c9e92;
  --forest:oklch(0.62 0.08 148);
  --green:oklch(0.68 0.12 150);
  --amber:oklch(0.74 0.13 75);
  --blue:oklch(0.70 0.08 220);

  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --gutter:clamp(16px,4vw,48px);
  --maxw:1320px;
  --radius:8px;
  --step--1:clamp(10px,0.62rem + 0.1vw,11px);
  --step-0:clamp(14px,0.85rem + 0.15vw,16px);
  --step-2:clamp(28px,1.2rem + 2.4vw,48px);
  --step-4:clamp(40px,1.6rem + 4.5vw,88px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--step-0);line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em}
.eyebrow{font-family:var(--mono);font-size:var(--step--1);letter-spacing:0.24em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
.live{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s ease-in-out infinite;flex:none}
.live.stale{background:var(--amber);box-shadow:0 0 8px var(--amber)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:clamp(14px,2.4vw,30px) var(--gutter);
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.topbar.solid{background:rgba(11,13,10,0.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line);padding-block:12px}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-decoration:none;opacity:.85}
.mark .dot{width:5px;height:5px;border-radius:50%;background:var(--forest);box-shadow:0 0 12px var(--forest)}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,0.78);transition:color .2s}
.nav a:hover{color:#fff}
.wxpill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,0.32);border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;text-decoration:none;white-space:nowrap;
}
.wxpill .t{font-family:var(--serif);font-size:15px;letter-spacing:0}
.wxpill .c{opacity:.75}
@media (max-width:640px){ .nav .link{display:none} .wxpill .c{display:none} }

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#000}
.slides{position:absolute;inset:0}
.slides .s{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.slides .s.on{opacity:1}
.slides img{width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.04);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{0%{transform:scale(1.04)}100%{transform:scale(1.09) translate(-1%,-0.8%)}}
.veil{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 60%,rgba(0,0,0,0.7) 100%),
    linear-gradient(to bottom,rgba(11,13,10,0.45) 0%,rgba(11,13,10,0.1) 30%,rgba(11,13,10,0.1) 55%,rgba(11,13,10,0.85) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay;opacity:.5}
.hero-foot{
  position:absolute;inset:auto var(--gutter) clamp(28px,6vh,64px) var(--gutter);z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
}
.wordmark{color:#f0ede3}
.wordmark .eyebrow{color:rgba(255,255,255,0.6);margin-bottom:14px}
.wordmark h1{font-family:var(--serif);font-weight:400;font-size:var(--step-4);line-height:.95;letter-spacing:-0.015em}
.frame-info{display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.dots{display:flex;gap:6px}
.dots button{width:14px;height:12px;border:0;background:none;cursor:pointer;position:relative}
.dots button::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,0.22);transition:background .3s}
.dots button.on::after{background:rgba(255,255,255,0.75)}
@media (max-width:640px){ .frame-info{display:none} }

/* ---------- sections ---------- */
.section{padding:clamp(64px,10vw,140px) var(--gutter)}
.wrap{max-width:var(--maxw);margin-inline:auto}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,44px)}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:var(--step-2);line-height:1;letter-spacing:-0.01em;margin-top:12px}
.sec-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:0.04em;color:var(--text-2)}
.badge{white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:rgba(255,255,255,0.06);color:var(--text-2)}
.badge.warn{color:var(--amber);background:color-mix(in oklch,var(--amber) 12%,transparent)}

.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0)),var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);container-type:inline-size}
.k{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3)}
.v{font-family:var(--serif);font-weight:400;font-size:clamp(24px,1.2rem + 1vw,32px);letter-spacing:-0.01em;line-height:1.1}
.v small{font-family:var(--mono);font-size:13px;color:var(--text-3);margin-left:3px;letter-spacing:0.04em}
.sub{font-family:var(--mono);font-size:13px;color:var(--text-2);letter-spacing:0.02em}
.up{color:var(--green)} .dn{color:var(--amber)}

/* ---------- weather ---------- */
.wx-grid{
  display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.wx-now{grid-column:span 5;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.wx-now::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--forest)}
.wx-now .big{display:flex;align-items:flex-start;gap:6px;font-family:var(--serif);font-size:clamp(72px,3rem + 6vw,136px);line-height:.85;letter-spacing:-0.03em}
.wx-now .big .u{font-family:var(--mono);font-size:16px;color:var(--text-2);margin-top:.6em;letter-spacing:0}
.wx-now .cond{font-size:clamp(19px,1rem + 0.5vw,24px);color:var(--text)}
.wx-now .hilo{display:flex;gap:18px;font-family:var(--mono);font-size:15px;color:var(--text-2);margin-top:6px}
.wx-now .sun{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:14px;color:var(--text-2);letter-spacing:0.06em;border-top:1px solid var(--line);padding-top:16px}

.wx-stats{grid-column:span 7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:inherit}
@media (max-width:560px){ .wx-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stat{padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-height:118px;position:relative}
.stat .row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.compass{position:absolute;top:14px;right:14px;width:34px;height:34px;color:var(--text-2)}
.compass .needle{transform-origin:50% 50%;transition:transform .8s cubic-bezier(.3,.7,.3,1)}

.wx-chart{grid-column:span 8;padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:14px;min-width:0}
.wx-chart .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.chart{position:relative;width:100%;aspect-ratio:16/6;min-height:200px}
.chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart .axis text{fill:var(--text-2);font-family:var(--mono);font-size:12px}
.chart .area{fill:url(#tempFill)}
.chart .line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .cross{stroke:var(--line-2);stroke-width:1}
.chart .pt{fill:var(--blue);stroke:var(--bg-2);stroke-width:2}
.chart .hit{fill:transparent;cursor:crosshair}
.tip{position:absolute;pointer-events:none;background:var(--bg-3);border:1px solid var(--line-2);border-radius:6px;padding:6px 10px;font-family:var(--mono);font-size:13px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .15s}
.tip b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--text);margin-right:6px}
.tip span{color:var(--text-2)}

.wx-fc{grid-column:span 4;padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:6px}
.wx-fc .list{flex:1;display:flex;flex-direction:column;justify-content:space-around}
.fc-row{display:grid;grid-template-columns:4.2em 1fr auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.fc-row:first-of-type{border-top:none}
.fc-day{font-family:var(--mono);font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-2)}
.fc-cond{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text);min-width:0}
.fc-cond svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fc-cond .p{font-family:var(--mono);font-size:13px;color:var(--blue)}
.fc-t{font-family:var(--mono);font-size:15px;white-space:nowrap}
.fc-t .lo{color:var(--text-2);margin-left:8px}

/* Fluid reflow: tablet stacks into two rows, phone into one column. */
@media (max-width:1080px){
  .wx-now{grid-column:span 12}
  .wx-stats{grid-column:span 12}
  .wx-chart{grid-column:span 12}
  .wx-fc{grid-column:span 12}
}
@media (min-width:700px) and (max-width:1080px){
  .wx-now{grid-column:span 5} .wx-stats{grid-column:span 7}
  .wx-chart{grid-column:span 12} .wx-fc{grid-column:span 12}
}
@container (min-width:560px){
  .wx-fc .list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
  .wx-fc .fc-row{grid-template-columns:1fr;justify-items:start;border-top:none;border-left:1px solid var(--line);padding:4px 0 4px 14px;gap:8px}
  .wx-fc .fc-row:first-of-type{border-left:none;padding-left:0}
  .wx-fc .fc-cond{flex-wrap:wrap;row-gap:2px}
}
.wx-note{margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--text-2);letter-spacing:0.04em}

/* ---------- cabin / photos ---------- */
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(24px,5vw,80px);align-items:end}
.about p{font-size:clamp(17px,0.9rem + 0.5vw,22px);line-height:1.55;color:var(--text-2);max-width:46ch}
.about p + p{margin-top:1em}
.gallery{margin-top:clamp(40px,6vw,80px);display:grid;gap:clamp(8px,1vw,14px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.gallery figure{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:var(--bg-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.8);text-shadow:0 1px 8px rgba(0,0,0,0.6)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:28px var(--gutter);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3)}

/* ---------- private sign-in (over the hero) ---------- */
.nav .signin-btn{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.32);background:rgba(0,0,0,0.28);color:#f3f1ea;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.nav .signin-btn:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.6)}
.nav .signin-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.signin{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px 16px;background:rgba(6,8,6,0.55);
  animation:signin-in .35s ease both}
.signin[hidden]{display:none}
@keyframes signin-in{from{opacity:0}to{opacity:1}}
.signin-card{position:relative;width:min(380px,100%);padding:28px 24px 24px;border-radius:16px;background:rgba(14,16,13,0.98);
  border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,0.5);
  animation:signin-up .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes signin-up{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.signin-card .eyebrow{margin-bottom:8px;color:var(--text-2)}
.signin-card h2{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1;margin-bottom:20px;color:#f3f1ea}
.signin-card label{display:grid;gap:6px;margin-bottom:14px;font-size:13px;font-weight:500;color:var(--text-2)}
.signin-card input{font:inherit;font-size:16px;color:#f3f1ea;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:10px;padding:11px 12px;min-height:46px;width:100%}
.signin-card input:focus{outline:2px solid var(--forest);outline-offset:1px;border-color:transparent}
.signin-go{width:100%;margin-top:6px;font:600 15px/1 var(--sans);color:var(--bg);background:#f3f1ea;border:0;border-radius:10px;padding:14px;min-height:48px;cursor:pointer;transition:background .2s,opacity .2s}
.signin-go:hover{background:#fff}
.signin-go:disabled{opacity:.7;cursor:progress}
.signin-go:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.signin-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--text-2);font-size:22px;line-height:1;cursor:pointer}
.signin-x:hover{background:rgba(255,255,255,0.08);color:#fff}
.signin-err{margin:0 0 14px;padding:10px 12px;border-radius:10px;font-size:13.5px;color:oklch(0.78 0.14 30);border:1px solid currentColor}
.signin-card.shake{animation:signin-shake .4s}
@keyframes signin-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* the hand-off to the 3D model: the page clears away to the bare photo, framed exactly as /cabin shows it */
.arrive-photo{position:fixed;inset:0;z-index:50;background:#000;opacity:0;transition:opacity .7s ease;pointer-events:none}
.arrive-photo.on{opacity:1}
.arrive-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
body.leaving .topbar,body.leaving .signin{opacity:0;transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){ .signin,.signin-card{animation:none} .arrive-photo{transition-duration:.2s} }
.hero:has(.signin:not([hidden])) .hero-foot{opacity:.18;transition:opacity .35s}
.wordmark .enter{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:12px 20px;border-radius:999px;background:#f3f1ea;color:#0b0d0a;
  font:600 14px/1 var(--sans);letter-spacing:.01em;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:background .2s,transform .2s}
.wordmark .enter:hover{background:#fff;transform:translateY(-1px)}
.wordmark .enter:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.wordmark .enter span{transition:transform .2s}
.wordmark .enter:hover span{transform:translateX(3px)}

/* the 3D cabin, built out of sight while the slideshow plays (signin.js), shown by Explore Cabin */
.cabin-pre { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; background: #000;
  opacity: 0; pointer-events: none; z-index: -1; transition: opacity .45s ease; }
.cabin-pre.on { opacity: 1; pointer-events: auto; z-index: 1000; }
html.cabin-open, html.cabin-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cabin-pre { transition: none; } }

/* Netlify's free-plan "Powered by Netlify" badge, injected into every page: not on this site */
#nl-badge-frame,#nl-hud-frame{display:none!important}