/* Our Tahoe Cabin: the front door of ourtahoecabin.com.
   One calm "family" look (pine night, snow text, string-light gold). Each story card borrows its app's own style. */

:root {
  color-scheme: dark;
  --pine: #0d1311;          /* page */
  --pine-2: #141c19;        /* raised panels */
  --snow: #eef0ea;          /* text */
  --granite: #a3aca6;       /* quieter text */
  --bulb: #f6c56b;          /* the accent: string-light gold */
  --bulb-glow: rgba(246, 197, 107, .55);
  --sand: #ebdaa6;          /* booktruckee.com's tree color, for the shared pine logo */
  --line: rgba(238, 240, 234, .14);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --gutter: clamp(16px, 5vw, 56px);
  --wide: 1180px;
}

* { box-sizing: border-box; }
html { background: var(--pine); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pine);
  color: var(--snow);
  font: 400 1.05rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--bulb); outline-offset: 3px; border-radius: 4px; }

.eyebrow {
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bulb);
}

/* ---------- The cover ---------- */
.cover {
  position: relative;
  height: 88vh;             /* backup for browsers that don't know svh (Chrome before 108, Safari before 15.4) */
  height: 88svh;
  min-height: 560px;
  max-height: 940px;
  overflow: hidden;
  isolation: isolate;
}
.slides, .cover-shade { position: absolute; inset: 0; z-index: -1; }
.slides { bottom: 2px; }   /* stops a 1px sliver of photo peeking out at the cover's bottom edge */
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2.2s ease;
}
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
/* Each photo drifts in slowly for as long as it shows, ending at normal size, so the fade-out never jumps */
.slide.is-on { opacity: 1; animation: drift var(--dur, 7s) linear forwards; }
@keyframes drift { from { transform: scale(1.07); } to { transform: scale(1); } }

/* "Lights come on": warm glows sit on the real lights of the winter photo. app.js sizes .lights to exactly
   cover the photo as it's cropped, so the positions (% of the photo) line up on any screen. */
.lights { position: absolute; pointer-events: none; }
.lights i {
  --rest: .5;
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w, 1.8) * 1%); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 224, 150, .95), rgba(255, 176, 76, .5) 45%, rgba(255, 150, 50, 0));
  mix-blend-mode: screen;
  opacity: var(--rest);
}
.lights .bulb { --rest: .6; }
.lights .win { --rest: .3; aspect-ratio: auto; height: calc(var(--h) * 1%); }
.lights .strip { --rest: .45; aspect-ratio: auto; height: calc(var(--h) * 1%); background: radial-gradient(closest-side, rgba(255, 110, 80, .9), rgba(255, 70, 50, 0)); }

/* Seasonal weather: a drawing layer over the photos (under the shading, so text stays easy to read) */
.weather { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* The opening (plays once): the scene starts dim, the lights switch on one by one, then the title rises in.
   app.js adds .intro to the cover and removes it when the opening is over. */
.cover.intro .slide:first-child img { animation: exposure 3.2s ease-in-out both; }
@keyframes exposure { 0%, 30% { filter: brightness(.3) saturate(.7); } 100% { filter: none; } }
.cover.intro .lights i { animation: light-on .9s ease-out both; animation-delay: calc(var(--d) * 1ms); }
@keyframes light-on { 0% { opacity: 0; } 35% { opacity: 1; } 50% { opacity: .35; } 65% { opacity: 1; } 100% { opacity: var(--rest); } }
.cover.intro .cover-copy > * { animation: rise .9s var(--ease) both; }
/* (each line needs .cover-copy in its selector to outrank the rule above, which would reset the delay) */
.cover.intro .cover-copy .coords { animation-delay: 2.5s; }
.cover.intro .cover-copy h1 { animation-delay: 2.65s; }
.cover.intro .cover-copy .tagline { animation-delay: 2.85s; }
.cover.intro .cover-copy .scroll-cue { animation-delay: 3.05s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cover.intro .seasons { animation: fade-in .8s ease 3.1s both; }
.cover.intro .season i::after { animation: none; transform: scaleX(0); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.cover-shade {
  background:
    linear-gradient(180deg, rgba(13, 19, 17, .55) 0%, rgba(13, 19, 17, 0) 22%),
    linear-gradient(0deg, var(--pine) 0%, rgba(13, 19, 17, .82) 24%, rgba(13, 19, 17, .15) 62%);
}

.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--gutter) 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.brand svg { width: 19px; height: 27px; fill: var(--sand); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
.top-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.top-link {
  font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: rgba(238, 240, 234, .85);
  padding: 8px 0; border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.top-link:hover { color: var(--snow); border-color: var(--bulb); }
.top-book {
  font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid rgba(246, 197, 107, .6);
  border-radius: 999px;
  color: var(--bulb);
  background: rgba(13, 19, 17, .35);
  backdrop-filter: blur(6px);
  transition: background .3s, border-color .3s, color .3s;
}
.top-book:hover, .top-book:focus-visible { background: var(--bulb); border-color: var(--bulb); color: var(--pine); }

.cover-copy {
  position: absolute; left: 0; right: 0;
  bottom: clamp(84px, 13vh, 120px);
  bottom: clamp(84px, 13svh, 120px);
  padding-inline: var(--gutter);
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin-inline: auto;
}
.coords {
  font: 500 .8rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--snow); opacity: .85;
  font-variant-numeric: tabular-nums;
}
h1 {
  margin-top: .5rem;
  font: 400 clamp(3.4rem, 12vw, 7.8rem)/.9 var(--serif);
  letter-spacing: -.01em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
h1 em { font-style: italic; font-weight: 300; }
.tagline {
  margin-top: .7rem;
  max-width: 36ch;
  font: italic 400 clamp(1.45rem, 3.4vw, 2.2rem)/1.15 var(--serif);
  color: var(--snow);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}
.scroll-cue {
  display: inline-flex; gap: .5em; align-items: center;
  margin-top: 1.1rem;
  font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--bulb);
}
.scroll-cue span { display: inline-block; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } }

/* Season picker: which photo is showing, and how long until the next */
.seasons {
  position: absolute; left: 0; right: 0;
  bottom: clamp(24px, 4vh, 40px);
  bottom: clamp(24px, 4svh, 40px);
  display: flex; gap: clamp(14px, 3vw, 28px);
  padding-inline: var(--gutter);
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin-inline: auto;
}
.season {
  position: relative;
  padding: 8px 0 10px;
  min-width: 64px;
  background: none; border: 0; cursor: pointer;
  font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-align: left;
  color: rgba(238, 240, 234, .55);
  transition: color .4s;
}
.season.is-on { color: var(--snow); }
.season i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(238, 240, 234, .22); overflow: hidden; }
.season i::after { content: ""; position: absolute; inset: 0; background: var(--bulb); transform: scaleX(0); transform-origin: left; }
.season.is-on i::after { animation: season-fill var(--dur, 7s) linear forwards; }
.seasons.paused .season.is-on i::after { animation: none; transform: scaleX(1); }
@keyframes season-fill { to { transform: scaleX(1); } }

/* ---------- Sections ---------- */
.wrap { max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.stories { padding-block: clamp(36px, 6vw, 72px) clamp(64px, 9vw, 112px); }
.soon { padding-bottom: clamp(72px, 10vw, 128px); }
.sec-head { display: grid; gap: .7rem; margin-bottom: clamp(24px, 3.4vw, 40px); }
.sec-head h2 { font: 500 clamp(2rem, 4.6vw, 3.1rem)/1.05 var(--serif); }

/* The two story cards: one frame and one typeface. Each keeps its app's colors. */
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.story {
  display: grid; grid-template-rows: auto 1fr;
  text-decoration: none;
  overflow: hidden;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 16px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.story:hover { transform: translateY(-3px); border-color: var(--edge-hover); box-shadow: 0 22px 60px -24px var(--glow-c); }
.story-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.story-photo img, .story-video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.story-video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease, transform 1.2s var(--ease); }
.story-video.live { opacity: 1; }
.story:hover .story-photo img, .story:hover .story-video { transform: scale(1.04); }
.story-body { display: grid; align-content: start; gap: .75rem; padding: clamp(22px, 2.8vw, 32px); }
.kicker {
  display: flex; align-items: center; gap: 12px; min-height: 16px;
  font: 600 .7rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--kicker);
}
.story h3 { font: 500 clamp(2.2rem, 4vw, 2.9rem)/1 var(--serif); }
.story h3 em { font-style: italic; font-weight: 400; color: var(--accent); }
.story-body p:not(.kicker) { max-width: 40ch; font: 500 clamp(1.14rem, 1.6vw, 1.26rem)/1.45 var(--serif); color: var(--soft); }
.cta {
  justify-self: start; margin-top: .6rem;
  padding: 14px 24px; border-radius: 999px;
  font: 700 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cta-ink); background: var(--cta-bg);
  box-shadow: 0 0 0 5px var(--ring), 0 16px 40px -12px var(--glow-c);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.story:hover .cta, .story:focus-visible .cta { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 9px var(--ring-2), 0 22px 50px -12px var(--glow-c); }

/* Sprout to Spark: ember colors */
.story.fire {
  --card: radial-gradient(120% 90% at 50% 0%, #1d130d 0%, #0c0907 70%);
  --edge: rgba(255, 179, 92, .32); --edge-hover: rgba(255, 179, 92, .6); --glow-c: rgba(232, 118, 43, .6);
  --text: #f3e6d0; --soft: rgba(243, 230, 208, .8); --kicker: #c9a36a; --accent: #ffb35c;
  --cta-bg: linear-gradient(180deg, #ffb35c, #e8762b); --cta-ink: #0c0907;
  --ring: rgba(255, 179, 92, .15); --ring-2: rgba(255, 179, 92, .2);
}
/* The Heights Games: scoreboard colors and the five pixel squares */
.story.games {
  --card: linear-gradient(180deg, #0f111a 0%, #07080d 70%);
  --edge: rgba(255, 255, 255, .12); --edge-hover: rgba(255, 178, 26, .55); --glow-c: rgba(255, 178, 26, .5);
  --text: #f6f3ec; --soft: rgba(246, 243, 236, .78); --kicker: #b9bcc6; --accent: #ffb21a;
  --cta-bg: linear-gradient(180deg, #ffc84a, #ffb21a); --cta-ink: #140d00;
  --ring: rgba(255, 178, 26, .15); --ring-2: rgba(255, 178, 26, .18);
}
.px-row { display: inline-flex; align-items: center; gap: 5px; }
.px-row i { width: 11px; height: 11px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.story.games:hover .px-row i { animation: px-blink .9s steps(2) calc(var(--n, 0) * 90ms) 2; }
.px-row i:nth-child(2) { --n: 1; } .px-row i:nth-child(3) { --n: 2; } .px-row i:nth-child(4) { --n: 3; } .px-row i:nth-child(5) { --n: 4; }
@keyframes px-blink { 50% { opacity: .25; } }
.px-trophy { width: 13px; height: 13px; margin-left: 3px; fill: #f4c64e; filter: drop-shadow(0 0 5px rgba(244, 198, 78, .7)); shape-rendering: crispEdges; }

/* Coming soon: quieter tiles */
.soon-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.tile { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--pine-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.8); transition: filter .6s, transform 1.2s var(--ease); }
.tile:hover img { filter: saturate(.95) brightness(.9); transform: scale(1.03); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 19, 17, .92) 0%, rgba(13, 19, 17, 0) 55%); }
.tile-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .5rem; padding: 20px; }
.tag {
  justify-self: start;
  font: 600 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--snow);
  border: 1px solid rgba(238, 240, 234, .4); border-radius: 999px; padding: 6px 9px;
}
.tile h3 { font: 500 1.75rem/1.02 var(--serif); }

/* Book: a full-width band over a photo of the great room */
.book { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(88px, 12vw, 150px); }
/* The photo stops 2px short of the band's edges, so no sliver of it can peek out above or below the fades */
.book-bg { position: absolute; inset: 2px 0; z-index: -2; width: 100%; height: calc(100% - 4px); object-fit: cover; object-position: 50% 45%; }
.book-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--pine) 0%, rgba(13, 19, 17, 0) 22%),
    linear-gradient(0deg, var(--pine) 0%, rgba(13, 19, 17, 0) 22%),
    linear-gradient(90deg, rgba(13, 19, 17, .92) 0%, rgba(13, 19, 17, .8) 48%, rgba(13, 19, 17, .5) 100%);
}
.book-inner { display: grid; gap: clamp(28px, 4vw, 40px); justify-items: start; }
.book-words { display: grid; gap: .8rem; justify-items: start; }
.book h2 { font: 500 clamp(2.5rem, 5.6vw, 3.9rem)/1.02 var(--serif); }
.book h2 em { display: block; font-style: italic; font-weight: 400; color: var(--bulb); }
.reviews { display: grid; margin-top: 1.2rem; }
.review { grid-area: 1 / 1; margin: 0; display: grid; gap: .6rem; align-content: start; opacity: 0; transition: opacity .9s ease; }
.review.is-on { opacity: 1; }
.review p { font: italic 400 clamp(1.25rem, 2.3vw, 1.5rem)/1.35 var(--serif); max-width: 32ch; }
.review footer { font: 500 .85rem/1.3 var(--sans); color: var(--granite); }
.stars { color: var(--bulb); letter-spacing: .1em; margin-right: .3em; }
/* The Games' buttons, in the cabin's gold: a glowing pill with a halo ring that grows on hover,
   "Book direct" as a second line, and Airbnb as an outlined pill beside it */
.book-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.book-btn {
  display: inline-grid; justify-items: center; gap: 7px;
  padding: 17px 34px 15px;
  border-radius: 999px;
  text-decoration: none;
  font: 700 1.1rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: #1a1204;
  background: linear-gradient(180deg, #ffdb8e, var(--bulb));
  box-shadow: 0 0 0 6px rgba(246, 197, 107, .15), 0 20px 50px -10px rgba(246, 197, 107, .6);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.book-btn:hover, .book-btn:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 10px rgba(246, 197, 107, .18), 0 26px 60px -10px rgba(246, 197, 107, .75); }
.book-btn small { font: 600 .68rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(26, 18, 4, .72); }
.alt-btn {
  display: inline-block; padding: 13px 22px; border-radius: 999px;
  border: 1px solid rgba(238, 240, 234, .4);
  text-decoration: none;
  font: 700 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--snow); background: rgba(13, 19, 17, .6);
  transition: border-color .3s, color .3s;
}
.alt-btn:hover, .alt-btn:focus-visible { border-color: var(--bulb); color: var(--bulb); }

/* Footer */
.site-foot {
  padding-block: clamp(44px, 6vw, 68px) calc(env(safe-area-inset-bottom, 0px) + 30px);
  font-size: .95rem; color: var(--granite);
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 32px 48px; }
.foot-brand { display: grid; gap: .55rem; justify-items: start; align-content: start; }
.foot-brand svg { width: 21px; height: 30px; fill: var(--sand); }
.foot-name { font: 500 1.7rem/1 var(--serif); color: var(--snow); }
.foot-col { display: grid; gap: .65rem; align-content: start; }
.foot-h { margin-bottom: .2rem; font: 600 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bulb); }
.foot-col a { color: var(--snow); text-decoration: none; text-underline-offset: 3px; }
.foot-col a:hover { text-decoration: underline; }
.foot-fine { margin-top: clamp(32px, 5vw, 52px); font-size: .8rem; }

/* Smaller screens */
@media (max-width: 820px) {
  .book-shade { background: linear-gradient(180deg, var(--pine) 0%, rgba(13, 19, 17, .82) 20%, rgba(13, 19, 17, .82) 80%, var(--pine) 100%); }
}
@media (max-width: 760px) {
  .top-link { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tile { aspect-ratio: 16 / 10; }
  .cover-copy { bottom: 86px; }
}
@media (max-width: 380px) {
  .brand span { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide, .review { transition: opacity .01s; }
  .slide.is-on, .scroll-cue span, .season.is-on i::after { animation: none; }
  .story, .story-photo img, .story-video, .tile img, .cta, .book-btn { transition: none; }
}

/* The Airbnb rating under the reviews (4.94, Guest favorite: checked 2026-09-29) */
.rating { margin-top: .4rem; font: 500 .85rem/1.3 var(--sans); letter-spacing: .02em; color: var(--snow); opacity: .85; }