/* =========================================================
   Sprout to Spark v2
   MAIN ROAD  = real photos & video, "lodge editorial" type (Cormorant + Jost)
   SIDE TRAILS = animated stories, fun hand-lettered type (Bricolage + Nanum Pen)
   All colors live here as variables. Change one, and it changes everywhere.
   ========================================================= */
:root {
  --night:  #0c0907;
  --soot:   #15100c;
  --ember:  #e8762b;
  --glow:   #ffb35c;
  --brass:  #c9a36a;   /* lodge accent for labels and thin rules */
  --cream:  #f3e6d0;
  --ash:    #9a8b7a;
  --line:   rgba(201,163,106,.28);

  --serif: "Cormorant", Georgia, serif;
  --label: "Jost", "Futura", sans-serif;
  --fun:   "Bricolage Grotesque", system-ui, sans-serif;
  --hand:  "Nanum Pen Script", cursive;

  --ease: cubic-bezier(.22, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--night); color: var(--cream);
  font-family: var(--label); font-weight: 300;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, canvas { display: block; }
button { font: inherit; color: inherit; }

/* ---------- Atmosphere ---------- */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 90; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 89; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%); }

/* ---------- Top bar ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--cream); text-decoration: none; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.brand em { color: var(--brass); font-weight: 500; }
.skip {
  font: 500 .66rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream); background: rgba(12,9,7,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; cursor: pointer;
  transition: border-color .3s, background .3s;
}
.skip:hover { border-color: var(--brass); background: rgba(12,9,7,.8); }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 81; pointer-events: none; }
.progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #5a2a10, var(--ember) 80%, #fff2c4); box-shadow: 0 0 12px var(--ember); }

/* ---------- Main-road typography ---------- */
.eyebrow {
  display: flex; align-items: center; gap: .9em;
  font: 500 .68rem/1 var(--label); letter-spacing: .32em; text-transform: uppercase; color: var(--brass);
}
.eyebrow::before { content: ""; height: 1px; width: 2.4em; background: var(--brass); opacity: .6; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; height: 1px; width: 2.4em; background: var(--brass); opacity: .6; }
.head {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.5rem, 9vw, 5.4rem); line-height: .95; letter-spacing: -.01em;
  margin-top: .9rem; text-wrap: balance;
}
.head em { font-style: italic; font-weight: 500; color: var(--glow); }
.body { margin-top: 1rem; font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.6; color: rgba(243,230,208,.84); max-width: 32rem; }
.note {
  margin-top: 1.1rem; padding: .85rem 1rem; border-left: 2px solid var(--ember);
  background: rgba(232,118,43,.08); font-size: .98rem; line-height: 1.5; max-width: 30rem;
}
.note b { font-weight: 500; color: var(--glow); }

/* ---------- Shared stage (pinned full-screen scenes) ---------- */
.stage { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: hidden; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover { object-fit: cover; }
.shade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none; background: linear-gradient(transparent, rgba(12,9,7,.94)); z-index: 1; }
.caption { position: absolute; left: 16px; right: 16px; bottom: 9vh; z-index: 3; max-width: 36rem; opacity: 0; visibility: hidden; }
.caption .head { text-shadow: 0 2px 28px rgba(0,0,0,.6); }

/* ---------- 0. Cold open ---------- */
#open video { filter: brightness(var(--hero-dim, .5)) saturate(1.05) contrast(1.05); } /* --hero-dim comes from the HERO settings in index.html */
.title-wrap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 16px; }
.title { font-family: var(--serif); font-weight: 600; font-size: clamp(4rem, 17vw, 11rem); line-height: .82; letter-spacing: -.02em; margin: 1.4rem 0 1.2rem; }
.title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.title .line > span { display: inline-block; }
.title .to { font-style: italic; font-weight: 500; color: var(--brass); font-size: .45em; }
.tagline { font-size: clamp(1rem, 2.6vw, 1.15rem); color: rgba(243,230,208,.82); max-width: 26rem; line-height: 1.5; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; font: 500 .6rem/1 var(--label); letter-spacing: .32em; text-transform: uppercase; color: var(--ash); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--brass), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 1. Montage ---------- */
#montage .layer { position: absolute; inset: 0; opacity: 0; }
#montage .layer:first-child { opacity: 1; }
#montage img, #montage canvas { filter: brightness(.75) contrast(1.06); }

/* ---------- Side trails (the animated stories) ---------- */
.trails { max-width: 1100px; margin: 0 auto; padding: 7vh 16px; display: grid; gap: 12px; }
.trail-btn {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,179,92,.06), rgba(255,179,92,.02));
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.trail-btn:hover { border-color: var(--brass); transform: translateY(-1px); }
.trail-btn[aria-expanded="true"] { border-color: var(--ember); background: rgba(232,118,43,.1); }
.blaze { width: 26px; height: 34px; flex: none; }
.trail-btn .t-label { font: 500 .6rem/1 var(--label); letter-spacing: .28em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 7px; }
.trail-btn .t-title { font-family: var(--fun); font-weight: 700; font-size: clamp(1.08rem, 3.6vw, 1.35rem); line-height: 1.15; letter-spacing: -.01em; }
.trail-btn .chev { width: 20px; height: 20px; transition: transform .5s var(--ease); stroke: var(--brass); fill: none; stroke-width: 1.6; }
.trail-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.trail-btn.soon { cursor: default; opacity: .45; }
.trail-btn.soon:hover { transform: none; border-color: var(--line); }
.trail-btn.soon .chev { display: none; }
.trail-btn.soon .t-label::after { content: " · coming soon"; }

.trail-panel { height: 0; overflow: hidden; }
.trail-inner {
  position: relative; height: min(calc(100svh - 90px), 860px); min-height: 540px;
  background: radial-gradient(ellipse at 50% 15%, #22190f 0%, var(--soot) 70%);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-top: 4px;
}
.trail-inner svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-cap { position: absolute; left: 18px; right: 18px; top: 22px; z-index: 3; max-width: 32rem; opacity: 0; font-family: var(--fun); }
.t-cap h3 { font-weight: 700; font-size: clamp(1.6rem, 5.4vw, 2.7rem); line-height: 1.02; letter-spacing: -.02em; }
.t-cap p { margin-top: .5rem; font-size: 1rem; line-height: 1.45; opacity: .86; }
.t-cap .hand { display: block; font-family: var(--hand); color: var(--glow); font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1; margin-top: .45rem; }
.t-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(transparent, rgba(12,9,7,.85)); }
.t-bar { flex: 1; height: 3px; background: rgba(243,230,208,.15); border-radius: 3px; overflow: hidden; }
.t-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: var(--ember); }
.t-btn { background: rgba(243,230,208,.08); border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; cursor: pointer; font: 500 .62rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; }
.t-btn:hover { border-color: var(--brass); }
.star { fill: var(--cream); animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
@media (min-width: 820px) {
  .t-cap { left: 36px; top: 34px; }
}

/* ---------- Meet the stove ---------- */
#stove .stage { display: grid; grid-template-rows: auto 1fr; align-content: start; padding-top: 60px; }
.stove-photo { position: relative; aspect-ratio: 3/4; height: 56svh; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 12px; }
.stove-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) contrast(1.05); }
.spot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; z-index: 2; opacity: .4; transition: opacity .4s, transform .4s var(--ease); }
.spot::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 14px var(--ember); }
.spot::after { content: ""; position: absolute; inset: -6px; border: 1.5px solid var(--glow); border-radius: 50%; animation: ring 1.8s ease-out infinite; opacity: 0; }
.spot.on { opacity: 1; transform: scale(1.2); }
.spot.on::after { opacity: 1; }
@keyframes ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.stove-text { padding: 18px 16px 0; position: relative; z-index: 2; }
.stove-text .head { font-size: clamp(2rem, 7.5vw, 4rem); }
.spot-notes { position: relative; margin-top: 1rem; min-height: 8rem; }
.spot-note { position: absolute; inset: 0 0 auto 0; opacity: 0; }
.spot-note h4 { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; line-height: 1.1; }
.spot-note p { margin-top: .35rem; line-height: 1.5; color: rgba(243,230,208,.84); max-width: 28rem; }
.spot-note .idx { font: 500 .62rem/1 var(--label); letter-spacing: .28em; color: var(--brass); display: block; margin-bottom: .5rem; }
@media (min-width: 820px) {
  #stove .stage { grid-template-rows: none; grid-template-columns: auto 1fr; gap: 6vw; align-items: center; align-content: center; padding: 0 6vw; }
  .stove-photo { height: 80svh; }
  .stove-text { padding: 0; }
}

/* ---------- Pick your wood ---------- */
.woods { padding: 14vh 16px 2vh; max-width: 1100px; margin: 0 auto; }
.woods header { margin-bottom: 2.2rem; }
.woods figure { position: relative; border-radius: 14px; overflow: hidden; }
.woods figure img { width: 100%; height: auto; filter: brightness(.78) contrast(1.05); }
.woods figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(12,9,7,.62), transparent 50%); }
.tag { position: absolute; top: 6%; z-index: 2; transform: translateX(-50%); text-align: center; opacity: 0; }
.tag b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(1.2rem, 3.6vw, 2rem); line-height: 1; }
.tag small { display: block; margin-top: .4em; font: 500 clamp(.48rem, 1.4vw, .64rem)/1.2 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.tag i { display: block; width: 1px; height: clamp(16px, 5vw, 40px); background: var(--brass); margin: 8px auto 0; }
.punch { margin-top: 2rem; font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 5.5vw, 3rem); line-height: 1.05; }
.punch em { color: var(--glow); font-weight: 500; }

/* ---------- Lesson ---------- */
.lesson-intro { text-align: center; padding: 14vh 16px 2vh; }
.lesson-intro .head { font-size: clamp(3rem, 12vw, 7rem); }
.split-row { display: grid; gap: 28px; padding: 8vh 16px 2vh; max-width: 1100px; margin: 0 auto; align-items: center; }
.split-row figure { border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; }
.split-row figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; filter: brightness(.85); }
@media (min-width: 820px) { .split-row { grid-template-columns: 1fr 1fr; gap: 64px; } }

#build .stage, #feed .stage { display: grid; grid-template-rows: 1fr auto; }
.build-media, #feed .media { position: relative; overflow: hidden; }
.build-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.85) contrast(1.05); }
.build-media img:first-child { opacity: 1; }
.step-text { padding: 18px 16px 26px; background: linear-gradient(transparent, var(--night) 16%); margin-top: -60px; position: relative; z-index: 2; }
.step-text .head { font-size: clamp(2.2rem, 8vw, 4.4rem); }
.checklist { list-style: none; margin-top: 1.1rem; display: grid; gap: .6rem; }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.02rem; line-height: 1.4; opacity: .35; transition: opacity .5s; }
.checklist li.on { opacity: 1; }
.box { flex: 0 0 20px; height: 20px; border: 1px solid var(--brass); border-radius: 50%; position: relative; margin-top: 2px; transition: background .4s, border-color .4s; }
.checklist li.on .box { background: var(--ember); border-color: var(--ember); }
.box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.box svg path { stroke: var(--night); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s var(--ease); }
.checklist li.on .box svg path { stroke-dashoffset: 0; }
#light canvas { filter: brightness(.82) contrast(1.18) saturate(1.2); }
#feed canvas { filter: brightness(.85) contrast(1.1); }
@media (min-width: 820px) {
  #build .stage, #feed .stage { grid-template-rows: none; grid-template-columns: 1.1fr 1fr; }
  .step-text { margin-top: 0; align-self: center; padding: 0 56px; background: none; }
}

/* ---------- Glow ---------- */
#glow .stage img { transform-origin: 50% 60%; filter: brightness(.8) saturate(1.1); }
#glow .caption { opacity: 1; visibility: visible; }
#glow .head { font-size: clamp(3rem, 12vw, 7rem); }
.fire-btn {
  margin-top: 1.6rem; display: inline-flex; align-items: center; gap: .7rem;
  font: 500 .7rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase;
  color: var(--night); background: linear-gradient(180deg, var(--glow), var(--ember));
  border: 0; border-radius: 999px; padding: 17px 24px; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(232,118,43,.6); animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(232,118,43,0); } }
.fireplace { position: fixed; inset: 0; z-index: 100; background: #000; display: none; opacity: 0; transition: opacity .8s var(--ease); }
.fireplace.open { display: block; }
.fireplace.show { opacity: 1; }
.fireplace video { width: 100%; height: 100%; object-fit: cover; }
.fireplace .hint { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font: 500 .6rem/1 var(--label); letter-spacing: .3em; text-transform: uppercase; color: rgba(243,230,208,.5); }

.end { text-align: center; padding: 10vh 16px 16vh; color: var(--ash); }
.end .head { color: var(--cream); font-size: clamp(2rem, 7vw, 3.4rem); }
.end p { margin-top: 1rem; line-height: 1.6; }

@media (min-width: 820px) { .caption { left: 6vw; } }
@media (prefers-reduced-motion: reduce) {
  .grain, .scroll-cue i, .fire-btn, .spot::after, .star { animation: none; }
}

/* Wide screens: nudge side-trail drawings right so captions have room on the left */
@media (min-width: 820px) {
  .trail-inner svg.scene .shift { transform: translateX(170px); }
  .trail-inner svg.scene.portrait { left: auto; right: 3%; width: 50%; }
}


/* =========================================================
   v3: side-trail invitations (poster cards + in-scene chips)
   ========================================================= */
.poster {
  width: 100%; cursor: pointer; text-align: left; color: var(--cream);
  display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "art body" "art play"; gap: 6px 16px; align-items: center;
  padding: 14px; border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(232,118,43,.22), rgba(232,118,43,.04) 55%), var(--soot);
  border: 1px solid rgba(232,118,43,.45);
  box-shadow: 0 0 0 0 rgba(232,118,43,.0), 0 18px 40px -20px rgba(232,118,43,.45);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
  position: relative; overflow: hidden;
}
.poster::before { /* slow ember shimmer across the card */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,179,92,.12) 45%, transparent 60%);
  transform: translateX(-100%); animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer { 0%, 35% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }
.poster:hover { transform: translateY(-2px); border-color: var(--glow); box-shadow: 0 0 0 4px rgba(232,118,43,.12), 0 22px 50px -18px rgba(232,118,43,.6); }
.poster[aria-expanded="true"] { border-color: var(--ember); }
.poster-art { grid-area: art; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #2a1d12, #120d0a); border: 1px solid var(--line); }
.poster-art svg { width: 100%; height: 100%; display: block; }
.poster-body { grid-area: body; }
.poster .t-label { font: 500 .6rem/1 var(--label); letter-spacing: .28em; text-transform: uppercase; color: var(--glow); display: block; margin-bottom: 7px; }
.poster .t-title { font-family: var(--fun); font-weight: 700; font-size: clamp(1.12rem, 3.8vw, 1.45rem); line-height: 1.12; letter-spacing: -.01em; display: block; }
.poster .t-sub { display: block; margin-top: 4px; font-family: var(--hand); font-size: 1.35rem; line-height: 1; color: var(--brass); }
.play { grid-area: play; justify-self: start; display: inline-flex; align-items: center; gap: 10px; font: 500 .66rem/1 var(--label); letter-spacing: .26em; text-transform: uppercase; color: var(--cream); }
.play-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--glow), var(--ember)); box-shadow: 0 0 0 0 rgba(232,118,43,.6); animation: pulse 2.4s ease-in-out infinite; }
.play-dot svg { width: 16px; height: 16px; fill: var(--night); margin-left: 2px; }
.poster[aria-expanded="true"] .play-word::after { content: "ing"; }
.poster[aria-expanded="true"] .play-dot { animation: none; }
@media (min-width: 820px) {
  .poster { grid-template-columns: 132px 1fr auto; grid-template-areas: "art body play"; padding: 16px 22px 16px 16px; gap: 22px; }
  .poster-art { width: 132px; height: 132px; }
  .play { justify-self: end; }
  .play-dot { width: 54px; height: 54px; }
  .play-dot svg { width: 20px; height: 20px; }
}

/* Mini looping previews inside the poster art */
.pv-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: pvGrow 3.6s var(--ease) infinite; }
@keyframes pvGrow { 0% { transform: scale(.05); } 55%, 100% { transform: scale(1); } }
.pv-seed { animation: pvSeed 3.6s ease infinite; }
@keyframes pvSeed { 0%, 10% { opacity: 1; } 30%, 100% { opacity: 0; } }
.pv-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .18s ease-in-out infinite alternate; }
.pv-fl.f2 { animation-duration: .14s; } .pv-fl.f3 { animation-duration: .24s; }
@keyframes flick { to { transform: scaleY(1.15) scaleX(.92); } }
.pv-flow { animation: flow 1s linear infinite; }
.pv-a { animation: pvA 4s ease infinite; } .pv-b { animation: pvB 4s ease infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pvA { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pvB { 0%, 50% { opacity: 0; transform: scale(.2); } 65%, 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* Moving dashed "air" and "smoke" lines */
.flow { stroke-dasharray: 14 18; animation: flow 1.2s linear infinite; }
.flow.slow { animation-duration: 1.8s; }
@keyframes flow { to { stroke-dashoffset: -64; } }
[data-trail="breathe"].air-high .flow { animation-duration: .5s; }
[data-trail="breathe"].air-low .flow { animation-duration: 2.6s; }
[data-trail="breathe"].air-low .airWash, [data-trail="breathe"].air-low .airPilot { opacity: .35 !important; }

/* In-scene "Watch" chips */
.watch-chip {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  font: 500 .66rem/1.2 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); text-align: left;
  background: rgba(12,9,7,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,179,92,.6);
  box-shadow: 0 0 22px -4px rgba(232,118,43,.55);
  transition: background .3s, transform .3s var(--ease);
}
.watch-chip:hover { background: rgba(232,118,43,.2); transform: translateY(-1px); }
.wc-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--glow), var(--ember)); animation: pulse 2.4s ease-in-out infinite; }
.wc-dot svg { width: 12px; height: 12px; fill: var(--night); margin-left: 2px; }
.caption .watch-chip { pointer-events: auto; }

/* Stove aside + build callout */
.aside { margin-top: .8rem; font-size: .92rem; line-height: 1.5; color: var(--ash); max-width: 28rem; }
.callout { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.callout .circ { fill: none; stroke: var(--glow); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(232,118,43,.8)); }
.callout text { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .poster::before, .play-dot, .wc-dot, .pv-grow, .pv-seed, .pv-fl, .pv-flow, .pv-a, .pv-b, .flow { animation: none; }
}

/* =========================================================
   v4: peek-a-boo trail window, louder stove hotspots,
   blooper reel, cabin teasers
   ========================================================= */

/* ---- Peek-a-boo window (invites people into the wood side trail) ---- */
.peek {
  position: absolute; z-index: 4; right: 16px; top: 70px; width: 176px;
  display: grid; gap: 8px; padding: 8px; cursor: pointer; text-align: left; color: var(--cream);
  background: rgba(12,9,7,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,179,92,.7); border-radius: 16px;
  box-shadow: 0 0 0 0 rgba(232,118,43,.55), 0 20px 40px -18px rgba(0,0,0,.8);
  animation: peekPulse 2.6s ease-in-out infinite;
  opacity: 0; visibility: hidden;
}
@keyframes peekPulse { 50% { box-shadow: 0 0 0 10px rgba(232,118,43,0), 0 20px 40px -18px rgba(0,0,0,.8); } }
.peek:hover { border-color: var(--glow); }
.peek-screen { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 200/120; }
.peek-screen svg { width: 100%; height: 100%; display: block; }
.peek-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--glow), var(--ember)); box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.peek-play svg { width: 15px; height: 15px; fill: var(--night); margin-left: 2px; }
.peek-label { display: block; font: 500 .56rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--glow); }
.peek-title { display: block; margin-top: 5px; font-family: var(--fun); font-weight: 700; font-size: .98rem; line-height: 1.15; }
.pk-tree, .pk-oak { transform-box: fill-box; transform-origin: 50% 100%; animation: pkGrow 6s var(--ease) infinite; }
.pk-oak { animation-delay: .4s; }
@keyframes pkGrow { 0% { transform: scale(.05); } 35%, 92% { transform: scale(1); } 100% { transform: scale(.05); } }
.pk-trailer { animation: pkDrive 6s linear infinite; }
@keyframes pkDrive { 0%, 40% { transform: translate(-40px, 104px); } 90%, 100% { transform: translate(240px, 100px); } }
@media (min-width: 820px) {
  .peek { top: auto; bottom: 9vh; right: 6vw; width: 300px; padding: 10px; }
  .peek-title { font-size: 1.2rem; }
  .peek-label { font-size: .6rem; }
  .peek-play { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
}

/* ---- Louder stove hotspots ---- */
.stove-photo .zoom { position: absolute; inset: 0; will-change: transform; }
.stove-photo .spotlight {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(12,9,7,0) 0, rgba(12,9,7,0) 9%, rgba(12,9,7,.78) 24%);
}
.spot { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0; transform: scale(.4); transition: opacity .5s, transform .6s var(--ease); }
.spot::before { inset: 11px; background: #fff3d6; box-shadow: 0 0 0 4px var(--ember), 0 0 26px 8px rgba(255,150,60,.85); }
.spot::after { inset: -4px; border-width: 3px; border-color: var(--glow); }
.spot.on { opacity: 1; transform: scale(1); }
.spot.on::after { animation: ring 1.4s ease-out infinite; }
.spot.seen { opacity: .55; transform: scale(.5); }
.burst { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid var(--glow); pointer-events: none; z-index: 3; opacity: 0; }
.spot-count {
  position: absolute; left: 12px; top: 12px; z-index: 4;
  font: 500 .7rem/1 var(--label); letter-spacing: .2em; color: var(--cream);
  background: rgba(12,9,7,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; opacity: 0;
}
.spot-count b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--glow); letter-spacing: 0; }
.spot-note .idx { font-size: .66rem; }
.spot-note h4 { font-size: clamp(1.7rem, 5vw, 2.3rem); }

/* ---- Blooper reel ---- */
.reel { padding: 16vh 16px 6vh; max-width: 1000px; margin: 0 auto; }
.reel-head { text-align: center; }
.reel-kicker { font-family: var(--hand); color: var(--glow); font-size: clamp(1.8rem, 5vw, 2.4rem); display: block; }
.reel-head .head { font-size: clamp(3rem, 12vw, 6.4rem); }
.reel-head .body { margin: 1rem auto 0; }
.reel-rows { margin-top: 9vh; display: grid; gap: 11vh; }
.reel-row { display: grid; gap: 26px; justify-items: center; align-items: center; }
.polaroid {
  background: #f4efe6; padding: 12px 12px 16px; width: min(78vw, 360px);
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 34px 60px -24px rgba(0,0,0,.8), 0 2px 0 rgba(255,255,255,.4) inset;
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.92) contrast(1.05) sepia(.1); }
.polaroid figcaption { font-family: var(--hand); color: #2a2018; font-size: 1.75rem; line-height: 1; text-align: center; margin-top: 12px; }
.credit { text-align: center; }
.credit .role { display: block; font: 500 .68rem/1.4 var(--label); letter-spacing: .32em; text-transform: uppercase; color: var(--brass); }
.credit .name { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 6.5vw, 3.2rem); line-height: 1.05; margin-top: .35rem; }
.credit .name small { display: block; font-size: .45em; font-style: italic; font-weight: 500; color: var(--ash); margin-top: .2rem; }
.credits-roll { margin-top: 14vh; display: grid; gap: 6vh; }
.disclaimer { text-align: center; margin-top: 4vh; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 3vw, 1.4rem); color: var(--ash); line-height: 1.4; }
@media (min-width: 820px) {
  .reel-row { grid-template-columns: 1fr 1fr; gap: 60px; }
  .reel-row.flip .polaroid { order: 2; }
}

/* ---- More from the cabin (teasers) ---- */
.more { padding: 12vh 16px 4vh; max-width: 1100px; margin: 0 auto; }
.teasers {
  margin: 2.4rem -16px 0; padding: 0 16px 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.teasers::-webkit-scrollbar { display: none; }
.teaser { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; scroll-snap-align: start; border: 1px solid var(--line); }
.teaser img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.85); transition: transform 1.2s var(--ease), filter .6s; }
.teaser:hover img { transform: scale(1.05); filter: brightness(.7) saturate(1); }
.teaser-body { position: absolute; left: 16px; right: 16px; bottom: 18px; }
.soon { display: inline-block; font: 500 .58rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--glow); border: 1px solid rgba(255,179,92,.6); border-radius: 999px; padding: 6px 10px; }
.teaser h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.05; margin-top: .6rem; }
@media (min-width: 820px) {
  .teasers { margin: 2.4rem 0 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .peek, .pk-tree, .pk-oak, .pk-trailer, .spot.on::after { animation: none; }
}

/* =========================================================
   v4.1: real photobook: adventure wall, cabin tiles, lightbox
   ========================================================= */
.polaroid { cursor: zoom-in; }

/* "When we're not hauling wood" polaroid wall */
.offduty { margin-top: 14vh; text-align: center; }
.od-wall { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 14px; justify-items: center; }
.polaroid.mini { width: 100%; max-width: 230px; padding: 8px 8px 12px; }
.polaroid.mini figcaption { font-size: 1.3rem; margin-top: 8px; }
@media (min-width: 820px) { .od-wall { grid-template-columns: repeat(5, 1fr); gap: 40px 22px; } }

/* More from the cabin: banner + tiles */
.more-banner { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--line); }
.more-banner img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(1.05); }
.more-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(12,9,7,.9)); }
.more-banner-text { position: absolute; left: 18px; right: 18px; bottom: 22px; z-index: 2; }
@media (min-width: 820px) { .more-banner { aspect-ratio: 21/9; } .more-banner-text { left: 40px; bottom: 36px; } }

a.teaser { color: var(--cream); text-decoration: none; display: block; }
a.teaser[data-soon] { cursor: default; }
.teaser p { margin-top: .4rem; font-size: .95rem; line-height: 1.45; color: rgba(243,230,208,.82); max-width: 26rem; }
.teaser.featured { border-color: rgba(255,179,92,.55); }
.teaser .cycle { position: absolute; inset: 0; }
.teaser .cycle img { position: absolute; inset: 0; opacity: 0; animation: cycle 12s infinite; }
.teaser .cycle img:nth-child(2) { animation-delay: 3s; }
.teaser .cycle img:nth-child(3) { animation-delay: 6s; }
.teaser .cycle img:nth-child(4) { animation-delay: 9s; }
@keyframes cycle { 0% { opacity: 0; transform: scale(1.08); } 6%, 25% { opacity: 1; } 31%, 100% { opacity: 0; transform: scale(1); } }
.teaser .cycle img:first-child { opacity: 1; }
@media (min-width: 820px) {
  .teasers { grid-template-columns: repeat(4, 1fr); }
  .teaser.featured { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .teaser.featured h3 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
}

/* Lightbox: tap a polaroid to see it big */
.lightbox { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 60px 16px; background: rgba(8,6,4,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: zoom-out; }
.lightbox.open { display: grid; }
.lightbox figure { background: #f4efe6; padding: 12px 12px 18px; max-width: min(92vw, 720px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.lightbox img { max-width: 100%; max-height: 72svh; display: block; margin: 0 auto; }
.lightbox figcaption { font-family: var(--hand); color: #2a2018; font-size: 1.9rem; text-align: center; margin-top: 12px; }
.lb-hint { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font: 500 .6rem/1 var(--label); letter-spacing: .3em; text-transform: uppercase; color: rgba(243,230,208,.5); }

@media (prefers-reduced-motion: reduce) { .teaser .cycle img { animation: none; } }
.teaser::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 38%, rgba(12,9,7,.9)); pointer-events: none; }
.teaser-body { z-index: 2; }

/* =========================================================
   v5: The Fine Print: house rules, lights out, emergencies
   ========================================================= */
.top-actions { display: flex; gap: 8px; }
@media (max-width: 400px) { .skip { padding: 10px 11px; letter-spacing: .16em; } }

.fine { padding: 16vh 16px 4vh; max-width: 1100px; margin: 0 auto; }
.fine-head { position: relative; }
.swipe-hint { display: inline-block; margin-top: 1rem; font-family: var(--hand); font-size: 1.5rem; color: var(--glow); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.rules {
  margin: 2rem -16px 0; padding: 4px 16px 10px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rules::-webkit-scrollbar { display: none; }
.rule-card {
  scroll-snap-align: start; position: relative;
  padding: 20px 18px 22px; border-radius: 18px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(232,118,43,.14), transparent 55%), var(--soot);
  border: 1px solid var(--line);
}
.rule-icon { width: 76px; height: 76px; border-radius: 16px; background: #120d0a; border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 14px; }
.rule-icon svg { width: 64px; height: 64px; overflow: visible; }
.rule-card h3 { font-family: var(--fun); font-weight: 700; font-size: 1.35rem; line-height: 1.12; letter-spacing: -.01em; }
.rule-card p { margin-top: .45rem; line-height: 1.5; font-size: .98rem; color: rgba(243,230,208,.84); }
.rule-aside { display: block; margin-top: .5rem; font-family: var(--hand); font-size: 1.5rem; color: var(--glow); line-height: 1; }
@media (min-width: 820px) {
  .swipe-hint { display: none; }
  .rules { margin: 2.4rem 0 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}

/* little icon animations */
.ri-bob { animation: riBob 2.4s ease-in-out infinite; }
@keyframes riBob { 50% { transform: translateY(-4px); } }
.ri-spark { transform-box: fill-box; transform-origin: center; animation: riSpark 2.4s ease-in-out infinite; }
@keyframes riSpark { 0%, 100% { transform: scale(.4) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.ri-x path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: riX 2.6s ease-in-out infinite; }
.ri-x path:nth-child(2) { animation-delay: .25s; }
@keyframes riX { 15%, 70% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 80; } }
.ri-nope { transform-box: fill-box; transform-origin: 50% 100%; animation: riNope 2.2s ease-in-out infinite; }
@keyframes riNope { 0%, 40%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } 60% { transform: rotate(8deg); } 70% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.ri-back { animation: riBack 2.4s ease-in-out infinite; }
@keyframes riBack { 0%, 100% { transform: translateX(8px); } 50% { transform: translateX(-6px); } }
.ri-push { animation: riPush 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes riPush { 50% { transform: scaleX(1.12); } }
.ri-turn { animation: riTurn 2.6s ease-in-out infinite; }
@keyframes riTurn { 0%, 35% { transform: translate(18px, 40px) rotate(0deg); } 55%, 85% { transform: translate(18px, 40px) rotate(-90deg); } 100% { transform: translate(18px, 40px) rotate(0deg); } }
.ri-w1, .ri-w2, .ri-w3 { animation: riWave 1.6s ease-in-out infinite; }
.ri-w2 { animation-delay: .2s; } .ri-w3 { animation-delay: .4s; }
@keyframes riWave { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* Lights out (pinned, scroll-animated) */
#lightsout .stage { background: radial-gradient(ellipse at 50% 55%, #1a120c 0%, var(--night) 65%); }
.lo-scene { position: absolute; left: 0; right: 0; top: 56px; width: 100%; height: 58svh; }
@media (min-width: 820px) {
  .lo-scene { top: 0; left: auto; right: 4vw; width: 48vw; height: 100%; }
}

/* Emergency box: calm and clear */
.sos { padding: 10vh 16px 6vh; max-width: 900px; margin: 0 auto; }
.sos-box { border: 1px solid rgba(232,118,43,.6); border-left: 4px solid var(--ember); border-radius: 16px; padding: 26px 20px; background: rgba(232,118,43,.06); }
.sos-box .head { font-size: clamp(2rem, 7vw, 3.4rem); }
.sos-list { list-style: none; margin-top: 1.4rem; display: grid; gap: 1rem; }
.sos-list li { line-height: 1.55; font-size: 1.02rem; padding-left: 1.3rem; position: relative; color: rgba(243,230,208,.9); }
.sos-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.sos-list b { font-weight: 500; color: var(--glow); }
.sos-foot { margin-top: 1.3rem; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ash); }
@media (min-width: 820px) { .sos-box { padding: 40px 44px; } }

@media (prefers-reduced-motion: reduce) {
  .swipe-hint, .ri-bob, .ri-spark, .ri-x path, .ri-nope, .ri-back, .ri-push, .ri-turn, .ri-w1, .ri-w2, .ri-w3 { animation: none; }
}

/* Real coals footage inside Lights Out */
.lo-video { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.lo-video video { filter: brightness(.8) saturate(1.15); }
.lo-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(12,9,7,.92)); }

/* Phones: keep the top bar on one tidy line */
.skip, .brand { white-space: nowrap; }
@media (max-width: 480px) {
  .topbar { padding: 12px 12px; gap: 8px; }
  .brand { font-size: 1.12rem; }
  .top-actions { gap: 6px; }
  .skip { font-size: .56rem; letter-spacing: .12em; padding: 9px 10px; }
}

/* Video polaroids + lightbox media */
.polaroid video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: saturate(.92) contrast(1.05) sepia(.1); }
.lightbox .lb-media img, .lightbox .lb-media video { max-width: 100%; max-height: 72svh; display: block; margin: 0 auto; aspect-ratio: auto; filter: none; }

/* =========================================================
   v6: Trail-map navigation rail
   A fuse-like line on the right edge. Chapters are dots; side trails branch off.
   ========================================================= */
.rail {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  height: min(66vh, 580px); z-index: 82;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s;
}
.rail.show { opacity: 1; visibility: visible; }
.rail::before { /* soft dark panel behind the labels when the rail is expanded */
  content: ""; position: absolute; top: -24px; bottom: -24px; right: -14px; width: 330px;
  background: linear-gradient(to left, rgba(12,9,7,.9) 40%, rgba(12,9,7,0));
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.rail ol { list-style: none; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.rail-line { position: absolute; right: 7px; top: 8px; bottom: 8px; width: 2px; background: rgba(243,230,208,.14); border-radius: 2px; }
.rail-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 2px; background: linear-gradient(var(--ember), var(--glow)); box-shadow: 0 0 10px rgba(232,118,43,.8); }
.rail-fill::after { /* the burning tip of the fuse */
  content: ""; position: absolute; bottom: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #fff2c4; box-shadow: 0 0 10px 4px var(--ember); animation: tip 1.2s ease-in-out infinite;
}
@keyframes tip { 50% { box-shadow: 0 0 16px 7px var(--ember); } }
.rail button { position: relative; display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; background: none; border: 0; padding: 3px 0; cursor: pointer; color: var(--cream); }
.rail-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--night); border: 2px solid rgba(243,230,208,.35); transition: all .4s var(--ease); }
.rail-item.passed .rail-dot { border-color: var(--ember); background: var(--ember); }
.rail-item.active .rail-dot { border-color: var(--glow); background: var(--night); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(232,118,43,.25), 0 0 16px var(--ember); }
.rail-branch button { margin-right: 22px; }
.rail-branch button::after { /* dashed "branch" back to the main line */
  content: ""; position: absolute; right: -19px; top: 50%; width: 16px; border-top: 1.5px dashed rgba(201,163,106,.7);
}
.rail-blaze { flex: none; width: 9px; height: 13px; border-radius: 2px; background: var(--ember); opacity: .75; transition: all .3s; }
.rail-branch:hover .rail-blaze { opacity: 1; transform: scale(1.2); }
.rail-branch.done .rail-blaze { background: var(--glow); opacity: 1; box-shadow: 0 0 8px var(--ember); }
.rail-label, .rail-now {
  font: 500 .6rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--cream);
  background: rgba(12,9,7,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px;
  opacity: 0; transform: translateX(10px); transition: opacity .35s, transform .35s var(--ease); pointer-events: none;
}
.rail-label em { font-style: normal; color: var(--brass); margin-right: 5px; }
.rail-branch .rail-label { font-family: var(--fun); text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; }
.rail-branch .rail-label em { color: var(--glow); font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .56rem; font-weight: 500; }
.rail:hover::before, .rail.open::before { opacity: 1; }
.rail:hover .rail-label, .rail.open .rail-label { opacity: 1; transform: none; pointer-events: auto; }
.rail-now { position: absolute; right: 30px; top: 0; transform: translate(10px, -50%); }
.rail-now.flash { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 820px) {
  .rail-item.active .rail-label { opacity: 1; transform: none; }
  .rail-now { display: none; }
}
@media (max-width: 819px) {
  .rail { right: 5px; height: 58vh; }
  .rail-dot { width: 12px; height: 12px; }
  .rail-line { right: 5px; }
  .rail-branch button { margin-right: 18px; }
  .rail-branch button::after { right: -15px; width: 12px; }
  .rail.open { right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .rail-fill::after { animation: none; } }
.rail::before { width: 380px; right: -14px; background: radial-gradient(110% 62% at 100% 50%, rgba(12,9,7,.92) 30%, rgba(12,9,7,0) 72%); }
.rail ol, .rail-line { filter: drop-shadow(0 0 6px rgba(0,0,0,.85)); }
@media (max-width: 819px) {
  .rail.open::before { position: fixed; inset: 0; top: 0; bottom: 0; right: 0; width: auto; background: rgba(12,9,7,.82); }
}

/* =========================================================
   v7: prominent steps, Step 1 speed bump, milestone + pop-outs on the rail
   ========================================================= */
/* "Jump to: Build a Fire" button stands out from the others */
.skip.jump { border-color: rgba(255,179,92,.75); background: rgba(232,118,43,.22); }
.skip.jump:hover { background: rgba(232,118,43,.38); }
@media (max-width: 480px) { .skip.jump .long { display: none; } }

/* Big step tags: 01 + "Step 1 of 5" + progress bar + name */
.step-tag { display: flex; align-items: center; gap: 14px; }
.step-tag .big { font-family: var(--serif); font-weight: 600; font-size: clamp(3.6rem, 12vw, 5.6rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--glow); text-shadow: 0 0 30px rgba(232,118,43,.35); }
.step-tag .meta { display: grid; gap: 6px; }
.step-tag .of { font: 500 .72rem/1 var(--label); letter-spacing: .28em; text-transform: uppercase; color: var(--glow); }
.step-tag .stepbar { display: flex; gap: 4px; }
.step-tag .stepbar i { width: 22px; height: 4px; border-radius: 2px; background: rgba(243,230,208,.2); }
.step-tag .stepbar i.on { background: linear-gradient(90deg, var(--ember), var(--glow)); box-shadow: 0 0 8px rgba(232,118,43,.6); }
.step-tag .name { font: 500 .66rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }
.step-text .step-tag + .head, .caption .step-tag + .head, .air-text .step-tag + .head { margin-top: .6rem; }

/* Five-step preview under "Let's build a fire" */
.step-overview { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }
.step-overview li { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(232,118,43,.06); font: 500 .7rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.step-overview b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--glow), var(--ember)); color: var(--night); font: 600 .95rem/1 var(--serif); letter-spacing: 0; }

/* Step 1: pinned speed bump */
.air-stage { display: grid; grid-template-rows: 1fr auto; }
.air-photo { position: relative; overflow: hidden; margin: 0; }
.air-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; filter: brightness(.8); }
.air-text { padding: 18px 16px 28px; background: linear-gradient(transparent, var(--night) 14%); margin-top: -60px; position: relative; z-index: 2; }
.air-text .head { font-size: clamp(2.2rem, 8vw, 4.2rem); }
.air-check {
  margin-top: 1.2rem; width: 100%; max-width: 30rem; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(255,179,92,.75); background: rgba(232,118,43,.1); color: var(--cream);
  font: 500 1rem/1.3 var(--label); transition: background .3s, transform .3s var(--ease);
}
.air-check .box { flex: 0 0 28px; height: 28px; border-radius: 8px; border: 2px solid var(--glow); position: relative; }
.air-check .box svg { position: absolute; inset: 2px; }
.air-check .box path { stroke: var(--night); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .4s var(--ease) .1s; }
.air-check[aria-pressed="true"] { background: rgba(232,118,43,.28); }
.air-check[aria-pressed="true"] .box { background: var(--glow); }
.air-check[aria-pressed="true"] .box path { stroke-dashoffset: 0; }
.air-check.nudge { animation: nudgeBox .5s ease 3; }
@keyframes nudgeBox { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.air-hint { margin-top: .6rem; font-size: .88rem; color: var(--ash); }
@media (min-width: 820px) {
  .air-stage { grid-template-rows: none; grid-template-columns: 1fr 1fr; align-items: center; }
  .air-photo { height: 100%; }
  .air-text { margin-top: 0; padding: 0 56px; background: none; }
}

/* Rail: Build a Fire milestone */
.rail-item.milestone .rail-dot { width: 30px; height: 30px; display: grid; place-items: center; border-width: 2px; border-color: var(--glow); background: #1c130c; box-shadow: 0 0 14px rgba(232,118,43,.45); margin-right: -7px; }
.rail-item.milestone .rail-dot svg { width: 17px; height: 17px; fill: var(--ember); }
.rail-item.milestone.active .rail-dot { transform: scale(1.2); background: #2a1a10; }
.rail-item.milestone.passed .rail-dot { background: var(--ember); }
.rail-item.milestone.passed .rail-dot svg { fill: #fff2c4; }
.rail-steps { display: grid; gap: 3px; margin-right: -4px; }
.rail-steps i { width: 5px; height: 5px; border-radius: 50%; background: rgba(243,230,208,.25); transition: background .3s, box-shadow .3s; }
.rail-steps i.on { background: var(--glow); box-shadow: 0 0 6px var(--ember); }
.rail-item.milestone .rail-label { background: linear-gradient(180deg, var(--glow), var(--ember)); color: var(--night); border-color: transparent; }
.rail-item.milestone .rail-label em { color: var(--night); }
@media (max-width: 819px) {
  .rail-item.milestone .rail-dot { width: 24px; height: 24px; margin-right: -6px; }
  .rail-item.milestone .rail-dot svg { width: 13px; height: 13px; }
}

/* Side-trail pop-out next to the rail (the "peek" window, now for all 4 trails) */
.rail-pop {
  position: absolute; right: 34px; top: 0; width: 176px; padding: 8px; text-align: left; cursor: pointer; color: var(--cream);
  background: rgba(12,9,7,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,179,92,.75); border-radius: 16px;
  transform-origin: 100% 50%; transform: translateY(-50%) scale(.35); opacity: 0; visibility: hidden;
  transition: opacity .4s, transform .55s cubic-bezier(.34,1.56,.64,1), visibility .4s, top .5s var(--ease);
  animation: peekPulse 2.6s ease-in-out infinite;
}
.rail-pop.show { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.rp-screen { position: relative; display: block; height: 84px; border-radius: 10px; overflow: hidden; background: #120d0a; }
.rp-screen svg.art { width: 100%; height: 100%; display: block; }
.rp-screen .rp-play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--glow), var(--ember)); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.rp-screen .rp-play svg { width: 13px; height: 13px; fill: var(--night); margin-left: 2px; }
.rp-label { display: block; margin-top: 7px; font: 500 .52rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--glow); }
.rp-title { display: block; margin-top: 4px; font-family: var(--fun); font-weight: 700; font-size: .92rem; line-height: 1.15; }
.rail-pop.watched .rp-label::after { content: " · watched ✓"; color: var(--brass); }
@media (min-width: 820px) { .rail-pop { width: 220px; right: 40px; } .rp-screen { height: 110px; } .rp-title { font-size: 1.05rem; } }
/* mini preview animations (shared with the poster cards) */
.rp-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: pkGrow 4s var(--ease) infinite; }
.rp-flick { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .18s ease-in-out infinite alternate; }
/* Hovering the pop-out shouldn't open the whole contents view: only hovering the list does */
.rail:hover::before, .rail:hover .rail-label { opacity: 0; }
.rail:hover .rail-label { transform: translateX(10px); pointer-events: none; }
.rail:has(ol:hover)::before, .rail.open::before { opacity: 1; }
.rail:has(ol:hover) .rail-label, .rail.open .rail-label { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 820px) { .rail-item.active .rail-label { opacity: 1; transform: none; } }
/* the pop-out is a button inside the rail, so undo the rail's list-button layout */
.rail .rail-pop { display: block; padding: 8px; gap: 0; }
.rail .rail-pop { position: absolute; }

/* =========================================================
   v9: Steps on computer = full-screen footage with text over it
   (same language as the rest of the guide; phones keep the stacked layout)
   ========================================================= */
@media (min-width: 820px) {
  #air .stage, #build .stage, #feed .stage { display: block; grid-template-columns: none; }
  .air-photo, .build-media, #feed .media { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
  .air-photo img { object-position: 50% 68%; }
  .build-media img { object-position: 50% 58%; }
  #air .stage::after, #build .stage::after, #feed .stage::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(12,9,7,.9) 0%, rgba(12,9,7,.62) 34%, rgba(12,9,7,0) 62%),
      linear-gradient(transparent 55%, rgba(12,9,7,.7));
  }
  .air-text, #build .step-text, #feed .step-text {
    position: absolute; left: 6vw; bottom: 8vh; z-index: 3; max-width: 34rem;
    margin: 0; padding: 0; background: none; align-self: auto;
  }
}

/* =========================================================
   v9: House Rules pause: the section pins, cards slide past, and each rule lights up in turn
   ========================================================= */
.fine { max-width: none; margin: 0; padding: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.fine-head { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.fine-head .head { font-size: clamp(2.2rem, 7.5vw, 4.4rem); }
.fine .rules {
  display: flex; gap: 16px; width: max-content; margin: 1.6rem 0 0; padding: 6px 16px 10px;
  overflow: visible; scroll-snap-type: none; grid-auto-flow: unset; grid-template-columns: none;
  will-change: transform;
}
.fine .rule-card { flex: none; width: 76vw; max-width: 340px; opacity: .4; transform: scale(.94); transition: opacity .45s, transform .5s var(--ease), border-color .4s, box-shadow .4s; }
.fine .rule-card.seen { opacity: .6; }
.fine .rule-card.on { opacity: 1; transform: scale(1.03); border-color: rgba(255,179,92,.85); box-shadow: 0 0 0 1px rgba(255,179,92,.35), 0 20px 50px -20px rgba(232,118,43,.55); }
.rules-meter { display: flex; align-items: center; gap: 14px; margin-top: 1rem; }
.rm-count { font: 500 .7rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }
.rm-count b { color: var(--glow); font-weight: 500; }
.rm-dots { display: flex; gap: 5px; }
.rm-dots i { width: 16px; height: 3px; border-radius: 2px; background: rgba(243,230,208,.18); transition: background .3s; }
.rm-dots i.on { background: var(--ember); }
@media (min-width: 820px) {
  .fine .rules { padding-left: max(16px, calc((100vw - 1100px) / 2 + 16px)); padding-right: 30vw; }
  .fine .rule-card { width: 30vw; max-width: 360px; }
}
@media (max-height: 700px) { .fine-head .body { display: none; } }
/* Computers too: the chapter name flashes when you arrive, then gets out of the way */
@media (min-width: 820px) {
  .rail-item.active .rail-label { opacity: 0; transform: translateX(10px); }
  .rail:has(ol:hover) .rail-item.active .rail-label, .rail.open .rail-item.active .rail-label { opacity: 1; transform: none; }
  .rail-now { display: block; right: 44px; }
}

/* =========================================================
   v11: Three Piles: a spotlight slides across kindling -> splits -> keepers as you scroll
   ========================================================= */
.pile-light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse 22% 60% at var(--px, 17%) 62%, rgba(255,179,92,.16) 0%, rgba(12,9,7,0) 55%, rgba(12,9,7,.62) 100%);
}
.woods figure.lighting .pile-light { opacity: 1; }
.tag b, .tag small, .tag i { transition: opacity .45s, transform .5s var(--ease), color .4s; }
.woods figure.lighting .tag.dim b, .woods figure.lighting .tag.dim small, .woods figure.lighting .tag.dim i { opacity: .35; }
.tag.lit b { transform: scale(1.18); color: var(--glow); text-shadow: 0 0 18px rgba(232,118,43,.7); }
.tag.lit i { background: var(--glow); box-shadow: 0 0 8px var(--ember); }

/* Build it (computers): show each whole photo instead of a tight crop, over a soft blurred backdrop */
.build-backdrop { display: none; }
@media (min-width: 820px) {
  .build-backdrop { display: block; position: absolute; inset: -40px; background: url("assets/build/8164.jpg") center / cover; filter: blur(28px) brightness(.35) saturate(1.1); }
  .build-media img { object-fit: contain; object-position: 68% 50%; }
  .build-media img:not(:first-of-type) { opacity: 0; }
  .build-media .callout { left: auto; right: 0; width: 100%; }
}
.build-media img:first-of-type { opacity: 1; }
@media (min-width: 820px) {
  /* keep the paper-ball circle lined up with the whole (un-cropped) photo */
  .build-media .callout { width: 75svh; height: 100%; left: calc((100% - 75svh) * .68); right: auto; }
}

/* =========================================================
   v12: stability + desktop framing fixes
   ========================================================= */
/* Stove photo: explicit width so every browser sizes it (Safari can collapse aspect-ratio boxes in grids) */
.stove-photo { width: calc(56svh * .75); }
@media (min-width: 820px) { .stove-photo { width: calc(80svh * .75); } }

/* Three Piles photo keeps its shape while loading */
.woods figure img { aspect-ratio: 4 / 3; }

/* "Let's build a fire" gets a full screen of breathing room before Step 1 */
.lesson-intro { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10vh 16px; }

/* Step 1 on computers: whole photo (not zoomed), over a soft blurred copy */
.air-backdrop { display: none; }
@media (min-width: 820px) {
  .air-backdrop { display: block; position: absolute; inset: -40px; background: url("assets/photos/air.jpg") center 70% / cover; filter: blur(28px) brightness(.35) saturate(1.1); }
  .air-photo img { position: relative; object-fit: contain; object-position: 68% 50%; }
}

/* Phones: House Rules are a swipeable row (no scroll pause) */
@media (max-width: 819px) {
  .fine { height: auto; padding: 14vh 0 6vh; overflow: visible; }
  .fine .rules { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 12vw 12px; transform: none !important; }
  .fine .rules::-webkit-scrollbar { display: none; }
  .fine .rule-card { scroll-snap-align: center; }
  .swipe-cue { display: inline-block; font-family: var(--hand); font-size: 1.4rem; color: var(--glow); margin-left: 6px; animation: nudge 1.6s ease-in-out infinite; }
}
@media (min-width: 820px) { .swipe-cue { display: none; } }
@media (max-width: 819px) {
  .rm-count { white-space: nowrap; }
  .rules-meter { flex-wrap: wrap; row-gap: 6px; }
  .fine .rules { padding: 6px 14vw 12px; }
  .fine .rule-card { width: 72vw; }
}

.end-links { margin-top: 1.4rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 14px; font: 500 .7rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; }
.end-links a { color: var(--glow); text-decoration: none; border-bottom: 1px solid rgba(255,179,92,.4); padding-bottom: 4px; }
.end-links span { color: var(--ash); }

/* =========================================================
   v13: one clear action on the opening screen: a big glowing "scroll to begin" button
   ========================================================= */
.scroll-cue { display: none; }
.scroll-btn {
  position: absolute; left: 50%; bottom: calc(5vh + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: 0; cursor: pointer; color: var(--cream);
}
.sb-ring {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--glow), var(--ember) 70%);
  box-shadow: 0 0 0 0 rgba(232,118,43,.55), 0 10px 30px -8px rgba(232,118,43,.8);
  animation: sbBounce 2.2s cubic-bezier(.45,0,.25,1) infinite, sbPulse 2.2s ease-out infinite;
}
.sb-ring svg { width: 28px; height: 28px; stroke: var(--night); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sb-label { font: 500 .66rem/1 var(--label); letter-spacing: .32em; text-transform: uppercase; color: rgba(243,230,208,.85); }
.scroll-btn:hover .sb-ring { filter: brightness(1.08); }
@keyframes sbBounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(10px); } 65% { transform: translateY(2px); } }
@keyframes sbPulse { 0% { box-shadow: 0 0 0 0 rgba(232,118,43,.55), 0 10px 30px -8px rgba(232,118,43,.8); } 70%, 100% { box-shadow: 0 0 0 18px rgba(232,118,43,0), 0 10px 30px -8px rgba(232,118,43,.8); } }
@media (min-width: 820px) { .sb-ring { width: 76px; height: 76px; } }
@media (max-height: 640px) { .scroll-btn { bottom: 2.5vh; } .sb-ring { width: 56px; height: 56px; } }

/* The "Build a Fire" shortcut waits until you've started scrolling */
.topbar .skip.jump { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.topbar.at-top .skip.jump { opacity: 0; transform: translateY(-8px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sb-ring { animation: none; } }

/* =========================================================
   v14: Three Piles freeze-frame + phone trail-map button
   ========================================================= */
/* The piles photo pins in the middle of the screen, so on computers it must fit the screen height */
@media (min-width: 820px) {
  .woods figure { max-width: calc((100vh - 150px) * 4 / 3); margin-inline: auto; }
}
/* Phones: the trail is look-only until you tap the map button at its foot */
.rail-map { display: none; }
@media (hover: none) {
  .rail { pointer-events: none; }
  .rail.open, .rail .rail-pop, .rail .rail-map { pointer-events: auto; }
  .rail .rail-map {
    display: grid; place-items: center; position: absolute; right: -6px; bottom: -60px;
    width: 42px; height: 42px; padding: 0; border-radius: 50%;
    background: rgba(12,9,7,.8); border: 1px solid rgba(255,179,92,.65);
    box-shadow: 0 0 14px rgba(232,118,43,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .rail-map svg { width: 20px; height: 20px; fill: none; stroke: var(--glow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .rail-map .x, .rail.open .rail-map .m { display: none; }
  .rail.open .rail-map .x { display: block; }
  /* phones apply "hover" after a touch; never let that open the menu */
  .rail:not(.open)::before { opacity: 0; }
  .rail:not(.open) .rail-label { opacity: 0; transform: translateX(10px); pointer-events: none; }
}

/* v14: the "Scroll to begin" button is a little animated campfire */
.scroll-btn { gap: 6px; }
.sb-fire svg { display: block; width: 76px; height: 95px; overflow: visible; filter: drop-shadow(0 0 14px rgba(232,118,43,.55)); }
.sb-fl { transform-box: fill-box; transform-origin: 50% 100%; }
.sb-fl1 { animation: sbFlick 1.7s ease-in-out infinite; }
.sb-fl2 { animation: sbFlick 1.15s ease-in-out infinite reverse; }
.sb-fl3 { animation: sbFlick .8s ease-in-out infinite; }
.sb-glow { transform-box: fill-box; transform-origin: 50% 70%; animation: sbGlow 2.4s ease-in-out infinite; }
.sb-spark { fill: #ffd27a; opacity: 0; animation: sbSpark 2.6s ease-out infinite; }
.sb-chev svg { display: block; width: 22px; height: 22px; stroke: var(--glow); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: sbBounce 2.2s cubic-bezier(.45,0,.25,1) infinite; }
.scroll-btn:hover .sb-fire svg { filter: drop-shadow(0 0 20px rgba(255,154,60,.8)) brightness(1.1); }
@keyframes sbFlick {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(.95, 1.07) skewX(-3deg); }
  50% { transform: scale(1.04, .94) skewX(2deg); }
  75% { transform: scale(.97, 1.04) skewX(-1.5deg); }
}
@keyframes sbGlow { 50% { opacity: .55; transform: scale(.9); } }
@keyframes sbSpark {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--sx), -40px); opacity: 0; }
}
@media (min-width: 820px) { .sb-fire svg { width: 84px; height: 105px; } }
@media (max-height: 640px) { .sb-fire svg { width: 56px; height: 70px; } }
@media (prefers-reduced-motion: reduce) { .sb-fl, .sb-glow, .sb-spark, .sb-chev svg { animation: none; } }
/* Keep the title clear of the campfire: center it in the space between the top bar and the
   button, and let it shrink on short screens (laptops) as well as narrow ones */
.title { font-size: clamp(3.4rem, min(17vw, 16vh), 11rem); }
.title-wrap { padding: 56px 16px calc(5vh + 150px); }
@media (max-height: 640px) { .title-wrap { padding-bottom: calc(2.5vh + 118px); } }
/* Phones turned sideways: smaller title, and the campfire alone is the button */
@media (max-height: 500px) {
  .title { font-size: 12vh; margin: .8rem 0; }
  .sb-chev, .sb-label { display: none; }
  .title-wrap { padding-bottom: calc(2.5vh + 76px); }
}

/* =========================================================
   v15: simple navigation (straight line, chapter dots, side-trail marks)
   The v8 winding trail was removed; the v6 line + dots styles above are back in charge.
   ========================================================= */
.rail { width: 64px; }                 /* labels spill out to the left when the menu is open */
.rail-fill { transition: height .25s linear; }
@media (max-width: 819px) { .rail { width: 46px; } }

/* v16: the opening video sits in a wrapper; a "mix" stacks several videos inside it and fades between them.
   isolation keeps their stacking (z-index) inside the wrapper, under the title. */
.hero-media { isolation: isolate; z-index: 0; }

/* v16: the tagline's friendly aside sits on its own line, softer than the tagline itself */
.tag-aside { display: block; margin-top: .45em; font-style: italic; color: var(--glow); opacity: .9; }
.tagline { text-wrap: balance; } /* even out line lengths, so no single word sits alone on a line */

/* =========================================================
   v17 PROTOTYPE nav options (?nav=a | b | c): a little flame rides down a subtle dotted trail
   to where you are. Without ?nav= the page keeps today's line + dots.
   ========================================================= */
.rail-fire { display: none; }
[data-nav] .rail-line { background: repeating-linear-gradient(to bottom, rgba(243,230,208,.3) 0 2px, transparent 2px 8px); }
[data-nav] .rail-fire {
  display: block; position: absolute; right: 8px; top: 8px; z-index: 3; width: 24px; height: 24px;
  transform: translate(50%, -78%); pointer-events: none; transition: top .3s linear;
}
[data-nav] .rail-fire svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); transition: filter .8s; }
[data-nav] .rail-item.active .rail-dot { transform: none; }
[data-nav] .rail-blaze { width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); opacity: .55; }
[data-nav] .rail-branch button::after { border-top-color: rgba(201,163,106,.35); }
@media (max-width: 819px) { [data-nav] .rail-fire { right: 6px; } }

/* A "ember trail": where the flame has been glows faintly; chapters are tiny dots that light up as you pass */
[data-nav="a"] .rail-fill { background: linear-gradient(rgba(232,118,43,.1), rgba(232,118,43,.6)); box-shadow: none; }
[data-nav="a"] .rail-fill::after { display: none; }
[data-nav="a"] .rail-dot { width: 7px; height: 7px; margin-right: 4.5px; border: 0; background: rgba(243,230,208,.3); box-shadow: none; }
[data-nav="a"] .rail-item.passed .rail-dot { background: var(--ember); }
[data-nav="a"] .rail-item.active .rail-dot { background: var(--glow); box-shadow: 0 0 8px var(--ember); }
@media (max-width: 819px) { [data-nav="a"] .rail-dot { width: 6px; height: 6px; margin-right: 3px; } }

/* B "trail markers": small ticks with faint chapter numbers, like mile markers */
[data-nav="b"] .rail-fill { display: none; }
[data-nav="b"] .rail-dot { position: relative; width: 12px; height: 2px; margin-right: 2px; border: 0; border-radius: 1px; background: rgba(243,230,208,.35); box-shadow: none; }
[data-nav="b"] .rail-dot::after {
  content: attr(data-n); position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
  font: 500 .5rem/1 var(--label); letter-spacing: .08em; color: rgba(243,230,208,.4); transition: opacity .3s;
}
[data-nav="b"] .rail-item.passed .rail-dot { background: rgba(232,118,43,.8); }
[data-nav="b"] .rail-item.passed .rail-dot::after { color: rgba(232,118,43,.85); }
[data-nav="b"] .rail-item.active .rail-dot { background: var(--glow); box-shadow: 0 0 8px var(--ember); }
[data-nav="b"] .rail-item.active .rail-dot::after { color: var(--glow); }
[data-nav="b"] .rail.open .rail-dot::after, [data-nav="b"] .rail:has(ol:hover) .rail-dot::after { opacity: 0; }
@media (max-width: 819px) { [data-nav="b"] .rail-dot { width: 10px; margin-right: 1px; } [data-nav="b"] .rail-dot::after { right: 14px; } }

/* C "just the flame": only the dotted trail and the flame; milestones appear when you open the menu,
   and the chapter name flashes beside the flame as you arrive */
[data-nav="c"] .rail-fill { display: none; }
[data-nav="c"] .rail-dot, [data-nav="c"] .rail-blaze, [data-nav="c"] .rail-branch button::after { opacity: 0; transition: opacity .3s; }
[data-nav="c"] .rail.open .rail-dot, [data-nav="c"] .rail.open .rail-blaze, [data-nav="c"] .rail.open .rail-branch button::after,
[data-nav="c"] .rail:has(ol:hover) .rail-dot, [data-nav="c"] .rail:has(ol:hover) .rail-blaze,
[data-nav="c"] .rail:has(ol:hover) .rail-branch button::after { opacity: 1; }

/* v17b: the ember trail's traveler follows the story (railNav update sets data-stage, --flame and --heat):
   wood (a stack of log ends) -> flame (on its own, growing from 40% at Step 1 to full size at Step 5)
   -> coals at Lights Out (a pile that glows red, then cools to gray ash as the fire goes out) */
[data-nav] .rail-fire { width: 30px; height: 30px; transform: translate(50%, -72%); }
.rail-fire > svg > g { opacity: 0; transition: opacity .8s ease; }
.rail-fire[data-stage="wood"] .rf-wood, .rail-fire[data-stage="flame"] .rf-flame, .rail-fire[data-stage="coals"] .rf-coals { opacity: 1; }
.rf-logs circle { fill: #b98a55; stroke: #5e3b22; stroke-width: 1.1; }
.rf-rings circle { fill: none; stroke: #7e5230; stroke-width: .8; }
.rf-flame { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--flame, .4)); transition: opacity .8s ease, transform .35s ease-out; }
.rail-fire[data-stage="flame"] svg { filter: drop-shadow(0 0 6px rgba(232,118,43,.9)); }
.rf-ash ellipse { fill: #6f6861; stroke: #3d3935; stroke-width: .6; }
.rf-embers { opacity: var(--heat, 1); transition: opacity .4s linear; }
.rf-embers > ellipse { fill: #c7321a; stroke: #ff5a1f; stroke-width: .6; }
.rf-hot circle { fill: #ffb35c; animation: coalPulse 2.4s ease-in-out infinite alternate; }
.rf-hot circle:nth-child(2) { animation-delay: -1.2s; }
.rail-fire[data-stage="coals"] svg { filter: drop-shadow(0 0 5px rgba(255, 60, 20, calc(var(--heat, 1) * .85))); }
@keyframes coalPulse { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rf-hot circle { animation: none; } }
@media (max-width: 819px) { [data-nav] .rail-fire { width: 26px; height: 26px; } }

/* v17: the lighting step's three clips stack; the scroll fades from one to the next */
.clips > video { position: absolute; inset: 0; }

/* ---------- Site-wide navigation (2026-09-30, from the landing page project) ---------- */
/* Home pill: back to ourtahoecabin.com. The cabin's sand-gold pine is the same on every site. */
.top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.home-pill {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 14px 9px 11px; border-radius: 999px;
  border: 1px solid rgba(235, 218, 166, .5); background: rgba(12, 9, 7, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 .66rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: #ebdaa6;
  text-decoration: none; transition: background .3s, color .3s, border-color .3s;
}
.home-pill svg { width: 12px; height: 17px; fill: currentColor; }
.home-pill:hover, .home-pill:focus-visible { background: #ebdaa6; border-color: #ebdaa6; color: var(--night); }
@media (max-width: 560px) { .top-left { gap: 8px; } .home-pill { padding: 8px 10px; } .home-pill span { display: none; } }

/* The cabin footer: the same layout and words on every site, in this story's colors */
.cabin-foot { border-top: 1px solid var(--line); background: var(--night); color: var(--ash); font-size: .95rem; line-height: 1.5;
  padding: 44px 16px calc(env(safe-area-inset-bottom, 0px) + 30px); }
.cf-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 28px 44px; }
.cf-brand { display: grid; gap: .55rem; align-content: start; justify-items: start; }
.cf-brand p { margin: 0; }
.cf-home { display: grid; gap: .55rem; justify-items: start; text-decoration: none; }
.cf-home svg { width: 20px; height: 28px; fill: #ebdaa6; }
.cf-name { font: 500 1.7rem/1 var(--serif); color: var(--cream); }
.cf-col { display: grid; gap: .65rem; align-content: start; }
.cf-h { margin: 0 0 .2rem; font: 500 .66rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.cf-col a { color: var(--cream); text-decoration: none; text-underline-offset: 3px; }
.cf-col a:hover, .cf-home:hover .cf-name { text-decoration: underline; text-underline-offset: 4px; }
.cf-fine { max-width: 1100px; margin: 36px auto 0; font-size: .8rem; }
@media (max-width: 760px) { .cf-grid { grid-template-columns: 1fr 1fr; } .cf-brand { grid-column: 1 / -1; } }