/* Rocky Mountain A-Frame, main stylesheet.
   Single file, no build step. Order: tokens, reset, type, layout, header,
   hero, components, page sections, motion, reduced motion. */

/* ------------------------------------------------------------------ */
/* 1. Tokens (verbatim from brand-guidelines.md, plus layout scale)     */
/* ------------------------------------------------------------------ */

:root {
  --bluebird: #3d9ee2;
  --midnight: #0f2433;
  --snow: #f7fafc;
  --powder: #dcedf9;
  --ink: #14181d;
  --glow: #f2a33c;
  --pine: #2f5d45;
  --slate: #5b6b77;
  --font-display: "Archivo", sans-serif;
  --font-body: "Source Serif 4", serif;
  --font-mono: "Space Mono", monospace;

  /* layout scale */
  --wrap: 78rem;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4rem, 9vw, 8rem);
  --header-h: 7rem; /* exact: 96px logo + 0.5rem padding each side */
  --radius: 10px;
  --border: 4px;

  /* type scale, brand guidelines */
  --t-h1: clamp(3rem, 8vw, 7.5rem);
  --t-h2: clamp(2rem, 4vw, 3.5rem);
  --t-h3: clamp(1.25rem, 2vw, 1.6rem);
  --t-body: 1.125rem;
  --t-eyebrow: 0.8125rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ */
/* 2. Reset                                                            */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

table { border-collapse: collapse; }

/* ------------------------------------------------------------------ */
/* 3. Base type                                                        */
/* ------------------------------------------------------------------ */

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--snow);
  /* clip, not hidden: hidden makes body a scroll container and kills every
     position:sticky descendant, which is exactly the jump nav. */
  overflow-x: clip;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.92;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h3 { font-size: var(--t-h3); line-height: 1.02; letter-spacing: -0.005em; }

/* Archivo is a variable width face, so a section headline can breathe in
   a little under the pointer. Narrower only, which can never rewrap it. */
h2 {
  font-size: var(--t-h2);
  transition: font-stretch 0.45s var(--ease);
}
h2:hover { font-stretch: 118%; }

p { max-width: 80ch; }
p + p { margin-top: 1.1em; }

strong { font-weight: 600; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--slate);
  display: block;
  margin-bottom: 1.25rem;
}

.lead {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.5;
  max-width: 66ch;
}

/* Visually hidden but read by assistive tech. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus, always visible. */
:focus-visible {
  outline: 3px solid var(--glow);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--glow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.9rem 1.4rem;
  text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* ------------------------------------------------------------------ */
/* 4. Layout                                                           */
/* ------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec-y); }

.section--dark {
  background: var(--midnight);
  color: var(--snow);
}
.section--dark .eyebrow { color: var(--bluebird); }

.section--field {
  background: var(--bluebird);
  color: var(--midnight);
}
.section--field .eyebrow { color: var(--midnight); }

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head p { margin-top: 1.5rem; }

/* Signage divider: a solid bar with three solid marker blocks. */
.rule {
  display: block;
  width: 100%;
  height: 14px;
  color: var(--bluebird);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.section--dark .rule { color: rgba(247, 250, 252, 0.32); }
.wrap > .rule:first-child { margin-top: 0; }

.grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ------------------------------------------------------------------ */
/* 5. Buttons                                                          */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

/* A button sits on a hard shadow and depresses into it, the way a real
   one gives under a thumb. The arrow leans forward as it goes. */
.btn:hover { transform: translateY(2px); }
.btn:active { transform: translateY(4px); }
.btn svg { transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: var(--glow);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(20, 24, 29, 0.3);
}
.btn--primary:hover { background: #ffb85a; box-shadow: 0 2px 0 rgba(20, 24, 29, 0.3); }
.btn--primary:active { box-shadow: 0 0 0 rgba(20, 24, 29, 0.3); }

.btn--ghost {
  border-color: currentColor;
  color: inherit;
}
.btn--ghost:hover {
  background: var(--snow);
  color: var(--ink);
  border-color: var(--snow);
}

.section:not(.section--dark) .btn--ghost:hover {
  background: var(--ink);
  color: var(--snow);
  border-color: var(--ink);
}

.btn--sm { padding: 0.7rem 1.1rem; font-size: 0.75rem; }

.btn svg { flex: none; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* Text link with a drafting underline. */
.tlink {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.25rem;
  color: var(--bluebird);
}
.section--dark .tlink { color: var(--glow); }
.tlink:hover { color: var(--ink); }
.section--dark .tlink:hover { color: var(--snow); }
.tlink svg { transition: transform 0.25s var(--ease); }
.tlink:hover svg { transform: translateX(3px); }

/* Sliding underline, drawn straight over the rule a link already sits on. */
.tlink,
.footer-links a,
.book-note a { position: relative; }

.book-note a {
  text-decoration: none;
  border-bottom: 2px solid rgba(15, 36, 51, 0.4);
}

.tlink::after,
.footer-links a::after,
.book-note a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
}
.tlink:hover::after,
.footer-links a:hover::after,
.book-note a:hover::after { transform: scaleX(1); }

/* Signage pictograms: solid shapes, no strokes, the way the Warming Hut
   sign draws its hut. Size comes from each svg's own attributes. */
.i {
  fill: currentColor;
  stroke: none;
  flex: none;
}

/* ------------------------------------------------------------------ */
/* 6. Header and navigation                                            */
/* ------------------------------------------------------------------ */

.site-header {
  view-transition-name: site-header;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--midnight);
  color: var(--snow);
}
.site-header.is-stuck { box-shadow: 0 10px 30px rgba(15, 36, 51, 0.28); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Exact height, not min-height: the jump nav pins itself to the header's
     bottom edge via --header-h, so the header must be exactly that tall. */
  height: var(--header-h);
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand img {
  /* Brand rule: the lockup never renders below 96px wide. */
  width: 96px;
  height: auto;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(247, 250, 252, 0.35);
  border-radius: var(--radius);
  color: var(--snow);
}
.nav-toggle .bar {
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .bar-1 { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar-2 { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar-3 { transform: translateY(-5px) rotate(-45deg); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
}

.nav-menu a:not(.btn) {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--snow);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav-menu a:not(.btn):hover,
.nav-menu a[aria-current="page"] { border-bottom-color: var(--glow); }

/* A small chevron slides in beside the link. It is positioned out of
   flow, so nothing on the row shifts when it appears. */
.nav-menu a:not(.btn)::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  margin-top: -4px;
  border-left: 5px solid var(--glow);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.nav-menu a:not(.btn):hover::before { opacity: 1; transform: translateX(0); }

@media (max-width: 47.99em) {
  html.js .nav-toggle { display: inline-flex; }
  html.js .nav-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--midnight);
    padding: 1rem var(--gut) 1.75rem;
    border-top: 2px solid rgba(247, 250, 252, 0.16);
  }
  html.js .nav-menu[data-open="true"] { display: flex; }
  .nav { position: relative; }
  html.js .nav-menu .btn { margin-top: 0.5rem; }
}

/* ------------------------------------------------------------------ */
/* 7. Hero                                                             */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--midnight);
  color: var(--snow);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}

/* Static fallback: pure CSS dusk gradient plus the inline SVG ridgeline. */
.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: none;
  background: linear-gradient(
    to bottom,
    #08131f 0%,
    var(--midnight) 42%,
    #1d4f70 78%,
    #2f7ba8 100%
  );
}
.hero__fallback svg {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: auto;
}
.hero--static #hero-canvas { display: none; }
.hero--static .hero__fallback { display: block; }

/* Photo backdrop variant. Dormant until the hero figure in index.html is
   uncommented and assets/photos/hero.jpg exists. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Photo hero: the picture stays exactly as it is, and the dimmed sky
   canvas rides over its dark upper band in a screen blend, so the stars
   and the occasional streak read as part of the photograph's own sky.
   The mask keeps the blend well clear of the headline. */
.hero--photo #hero-canvas {
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 44%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 44%);
}
.hero--photo .hero__content { z-index: 2; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(15, 36, 51, 0.34) 0%,
    rgba(15, 36, 51, 0.08) 30%,
    rgba(15, 36, 51, 0.68) 100%
  );
  pointer-events: none;
}

.hero__content { position: relative; }
.hero .eyebrow { color: var(--bluebird); }
.hero h1 { max-width: 16ch; }
.hero__sub {
  margin-top: 1.75rem;
  font-size: clamp(1.1rem, 1.8vw, 1.375rem);
  line-height: 1.5;
  max-width: 44ch;
  color: rgba(247, 250, 252, 0.92);
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  color: rgba(247, 250, 252, 0.6);
}
.hero__cue svg { animation: cue 2.6s ease-in-out infinite; }

/* On a phone the hero content reaches the bottom edge, so the cue would
   collide with the secondary CTA. */
@media (max-width: 47.99em) {
  .hero__cue { display: none; }
}

@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(7px); opacity: 1; }
}

/* Short hero strip used on subpages. */
.hero-strip {
  position: relative;
  /* isolate makes the section background paint beneath the negative z-index
     photo, same trick the home hero uses. */
  isolation: isolate;
  background: var(--midnight);
  color: var(--snow);
  padding-block: clamp(4rem, 10vw, 8rem);
  overflow: hidden;
}
/* Photo behind the strip headline, dimmed enough that the white type keeps
   its contrast over any part of the image. */
.hero-strip .hero__photo { z-index: -2; }
.hero-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(15, 36, 51, 0.55),
    rgba(15, 36, 51, 0.78)
  );
}
.hero-strip::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--bluebird) 0%,
    var(--glow) 45%,
    var(--bluebird) 100%
  );
}
.hero-strip h1 { max-width: 18ch; }
.hero-strip .hero__sub { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ */
/* 8. Marquee                                                          */
/* ------------------------------------------------------------------ */

.marquee {
  background: var(--bluebird);
  color: var(--midnight);
  border-block: var(--border) solid var(--ink);
  overflow: hidden;
  padding-block: 0.9rem;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: 1.25rem;
  padding-right: 1.25rem;
}
.marquee__word {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  letter-spacing: 0.02em;
  line-height: 1;
}
.marquee__sep { flex: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Every other word runs as an outline, so the strip reads as a rhythm
   rather than a wall. Guarded, since a hollow word needs the stroke. */
@supports (-webkit-text-stroke: 2px #000) {
  .marquee__word:nth-of-type(even) {
    color: transparent;
    -webkit-text-stroke: 2px var(--midnight);
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ */
/* 9. Trail-sign component                                             */
/* ------------------------------------------------------------------ */

/* The real sign, anchoring the steps that borrow its shape. */
.sign-art {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.sign-art img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(15, 36, 51, 0.14);
}

.signs {
  display: grid;
  gap: 1rem;
}

.sign {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #ffffff;
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 4.5rem;
  transform-origin: 10% 0;
  transition: transform 0.55s cubic-bezier(0.2, 1.5, 0.4, 1),
    box-shadow 0.3s var(--ease);
}

/* Hung from its left end, a trail sign tips when you brush past it. */
.sign:hover {
  transform: translateY(-3px) rotate(-1.5deg);
  box-shadow: 0 8px 0 rgba(20, 24, 29, 0.16);
}
.sign__arrow { transition: transform 0.25s var(--ease); }
.sign:hover .sign__arrow { transform: translateX(3px); }

.sign__tile {
  flex: none;
  width: 4.25rem;
  display: grid;
  place-items: center;
  background: var(--bluebird);
  border-right: var(--border) solid var(--ink);
  color: #ffffff;
}

.sign__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1;
  padding: 0.85rem 1.15rem;
}

.sign__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

.sign__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  white-space: nowrap;
}

.sign__note {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--slate);
  margin-top: 0.35rem;
  max-width: 52ch;
}

.sign__arrow { flex: none; color: var(--ink); }

.after-grid { margin-top: clamp(2rem, 4vw, 3rem); }

.sign-head {
  display: flex;
  justify-content: space-between;
  max-width: none;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--slate);
  padding: 0 1.15rem 0.75rem;
}

/* ------------------------------------------------------------------ */
/* 10. Cards                                                           */
/* ------------------------------------------------------------------ */

.card {
  --card-pad: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--powder);
  border-radius: var(--radius);
  padding: var(--card-pad);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card h3 { margin-bottom: 0.9rem; }
.card p { max-width: none; }
.card__icon { color: var(--bluebird); margin-bottom: 1.25rem; }

/* Photo header: the picture runs edge to edge above the copy, pulled out
   to the card's own padding rather than boxed inside it. */
.card--photo { padding-top: 0; overflow: hidden; }
.card__photo {
  width: calc(100% + var(--card-pad) * 2);
  max-width: none;
  margin-inline: calc(var(--card-pad) * -1);
  margin-bottom: var(--card-pad);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.card--photo:hover .card__photo { transform: scale(1.04); }

.card--season {
  background: var(--snow);
  border: 2px solid var(--powder);
}
.card--season h3 { color: var(--midnight); }
.card--season .card__icon { color: var(--pine); }

.stakes {
  display: grid;
  gap: 0.9rem;
  margin-top: 2rem;
}
.stakes li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 62ch;
}
.stakes svg { flex: none; margin-top: 0.5rem; color: var(--bluebird); }

/* Amenities and favorites lists */
.amen {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.amen__group h3 {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--powder);
}
.amen__group li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding-block: 0.3rem;
  font-size: 1.0625rem;
}
.amen__group svg { flex: none; margin-top: 0.55rem; color: var(--bluebird); }

.favs { display: grid; gap: 1.1rem; }
#favorites > .wrap > .favs { align-items: start; }
@media (min-width: 40em) {
  #favorites > .wrap > .favs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.favs li {
  background: var(--powder);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
}
.favs p { max-width: none; }
.favs strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 1.0625rem;
}

/* Jump nav: trail-sign row of anchors under the hero. Sticky so long pages
   stay navigable; scroll-margin keeps targets clear of it when it is stuck. */
.jumpnav {
  position: sticky;
  /* The site header is sticky too (z-index 100, height --header-h), so this
     bar sticks directly beneath it rather than fighting it at top: 0. */
  top: var(--header-live, var(--header-h));
  z-index: 40;
  background: var(--snow);
  border-bottom: 2px solid var(--ink);
}
.jumpnav ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: clamp(1rem, 3vw, 2.25rem);
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  margin: 0 auto;
  max-width: var(--wrap);
}
.jumpnav a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--slate);
  transition: color 0.2s var(--ease);
}
.jumpnav a:hover { color: var(--ink); }
.section[id] { scroll-margin-top: calc(var(--header-live, var(--header-h)) + 4.5rem); }

/* Itinerary pages: the downloadable minute-by-minute weekends. */
.itin-page { padding-block: clamp(2.5rem, 5vw, 4rem); }
.itin-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.itin-head h1 {
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.itin-day { margin-block: clamp(2rem, 4vw, 3rem); }
.itin-day h2 {
  font-size: 1.5rem;
  border-bottom: 4px solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}
.slot {
  display: grid;
  grid-template-columns: 8.75rem minmax(0, 1fr);
  gap: 1rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(15, 36, 51, 0.15);
}
.slot:last-child { border-bottom: none; }
.slot-time {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--slate);
  padding-top: 0.2rem;
  max-width: none;
}
.slot-body h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.slot-body p { max-width: 65ch; }
.slot-body ul { margin-top: 0.5rem; padding-left: 1.25rem; list-style: square; }
.slot-body li { margin-block: 0.3rem; max-width: 62ch; }
@media (max-width: 40em) {
  .slot { grid-template-columns: 1fr; gap: 0.25rem; }
}
.itin-foot { margin-top: 2.5rem; }
.itin-credit {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate);
  margin-top: 0.75rem;
}
.print-btn { margin-block: 1.5rem; cursor: pointer; }

@media print {
  .site-header, .jumpnav, .site-footer, .print-btn, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .itin-page { padding: 0; }
  .slot { break-inside: avoid; }
  .itin-day h2 { break-after: avoid; }
  a { text-decoration: none; color: inherit; }
}

/* Itineraries: three weekend shapes, one card each. */
.itins {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.itin {
  background: var(--powder);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem);
}
.itin .eyebrow { margin-bottom: 0.6rem; }
.itin h3 { margin-bottom: 1rem; }
.itin p { max-width: none; }
.itin p + p { margin-top: 0.85em; }

.itin-more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 1.1rem;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.15rem;
}
.itin-more > summary::-webkit-details-marker { display: none; }
.itin-more > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.itin-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.itin-more[open] > summary { margin-bottom: 0.9rem; }
.itin-more p + p { margin-top: 0.85em; }

/* Field Notes article: one measure for headline and body, clear separation
   from the section lead. Without this the paragraphs cap at the global 62ch
   while the H3 spans the full wrap, and the two edges never agree. */
#field-notes article { max-width: 80ch; margin-top: 3rem; }
#field-notes article p { max-width: none; }
#field-notes article h3 { margin-bottom: 1rem; }

/* Favorites: ten curated picks, then the rest of the valley behind a native
   <details> so the whole list is still there with JavaScript switched off. */
.favs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid rgba(61, 158, 226, 0.55);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.favs a:hover { color: var(--bluebird); border-bottom-color: var(--bluebird); }

.favs-more { margin-top: 1.6rem; }
.favs-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  color: var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    transform 0.18s var(--ease);
}
.favs-more > summary::-webkit-details-marker { display: none; }
.favs-more > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.favs-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.favs-more > summary:hover { background: var(--ink); color: var(--snow); }
.favs-more > summary:active { transform: translateY(1px); }
.favs-more[open] > summary { margin-bottom: 2rem; }

.favs-grid { display: grid; column-gap: clamp(1.6rem, 3vw, 2.4rem); row-gap: 3.25rem; grid-template-columns: 1fr; }
@media (min-width: 40em) {
  .favs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.favs-cat { margin-bottom: 1.1rem; }
.favs-grid .favs { gap: 0.7rem; }
.favs-grid .favs li { padding: 0.95rem 1.15rem; }

.do-list { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.do-list li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  max-width: 68ch;
}
.do-list svg { flex: none; margin-top: 0.45rem; }

.do-head {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--slate);
  margin-top: 2rem;
  display: block;
}

.season-block { padding-block: clamp(2rem, 4vw, 3rem); }
.season-block + .season-block { border-top: 2px solid var(--powder); }
.season-block h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.season-block h3 svg { flex: none; color: var(--bluebird); }

/* On wide screens the prose and the do-this list sit side by side, so the
   page is not one narrow column down the left. */
@media (min-width: 62em) {
  .season-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .season-block h3 { grid-column: 1 / -1; grid-row: 1; }
  .season-block > p { grid-column: 1; grid-row: 2 / span 2; }
  .season-block .do-head { grid-column: 2; grid-row: 2; margin-top: 0; }
  .season-block .do-list { grid-column: 2; grid-row: 3; margin-top: 1rem; }
}

.notes { display: grid; gap: 1.5rem; }
@media (min-width: 40em) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 3vw, 2.4rem); }
}
.notes p { max-width: none; }
.notes strong {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--midnight);
}

/* ------------------------------------------------------------------ */
/* 11. Photo placeholders                                              */
/* ------------------------------------------------------------------ */

.ph {
  position: relative;
  transition: transform 0.45s var(--ease);
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(140deg, var(--powder) 0%, var(--bluebird) 100%);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
}
.ph--portrait { aspect-ratio: 3 / 4; }

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--snow);
  background: linear-gradient(to top, rgba(15, 36, 51, 0.86), rgba(15, 36, 51, 0));
  padding: 2rem 1rem 0.85rem;
}

/* Empty state: the gradient plus the label centered. */
.ph--empty img { display: none; }
.ph--empty figcaption {
  position: static;
  margin: auto;
  background: none;
  color: var(--midnight);
  text-align: center;
  padding: 1rem;
}

/* Photo beside prose, one column until there is room for two. */
.hosts-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 62em) {
  .hosts-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* Full-bleed photo band between sections. */
.band {
  position: relative;
  margin: 0;
  height: clamp(15rem, 34vw, 26rem);
  overflow: hidden;
  background: var(--midnight);
}
/* Crop above centre, so a wide band keeps the sky and the roofline. */
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 36, 51, 0.42) 0%,
    rgba(15, 36, 51, 0.06) 42%,
    rgba(15, 36, 51, 0.52) 100%
  );
}

/* Photos lean in a touch under the pointer, captions come up with them. */
.gallery .ph img,
.preview-grid .ph img { transition: transform 0.45s var(--ease); }
.gallery .ph:hover img,
.preview-grid .ph:hover img { transform: scale(1.04); }
.preview-grid .ph figcaption {
  opacity: 0.8;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.preview-grid .ph:hover figcaption { opacity: 1; transform: translateY(0); }
.preview-grid .ph--empty figcaption { opacity: 1; transform: none; }

.gallery { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-template-columns: 1fr; }
@media (min-width: 30em) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.preview-grid { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
@media (min-width: 40em) { .preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .preview-grid { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------------ */
/* 12. Reviews                                                         */
/* ------------------------------------------------------------------ */

.quotes {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.quote {
  background: #ffffff;
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.3rem;
  position: relative;
}
.quote p {
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: none;
}
.quote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate);
}
.quote__mark {
  position: absolute;
  top: -14px;
  left: 1.4rem;
  width: 30px;
  height: 30px;
  background: var(--bluebird);
  border: var(--border) solid var(--ink);
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #ffffff;
}

.rating {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--snow);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.rating svg { color: var(--glow); flex: none; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.chips li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 2px solid rgba(247, 250, 252, 0.4);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  color: var(--snow);
}

/* ------------------------------------------------------------------ */
/* 13. Book section and footer                                         */
/* ------------------------------------------------------------------ */

.book-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}

.platform {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--snow);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.platform:hover { transform: translateY(-4px); box-shadow: 0 12px 0 rgba(20, 24, 29, 0.2); }
.platform__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.platform p { max-width: none; font-size: 1.0625rem; }
.platform__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.book-note { margin-top: clamp(2rem, 4vw, 3rem); }
.book-note a { font-weight: 600; }

.site-footer {
  background: var(--midnight);
  color: var(--snow);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.site-footer img { width: 76px; height: auto; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-bottom: 2px solid rgba(247, 250, 252, 0.25);
  padding-bottom: 0.25rem;
}
.footer-links a:hover { border-bottom-color: var(--glow); }
.footer-legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 2px solid rgba(247, 250, 252, 0.16);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(247, 250, 252, 0.7);
}

/* ------------------------------------------------------------------ */
/* 14. 404                                                             */
/* ------------------------------------------------------------------ */

.lost {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  background: var(--midnight);
  color: var(--snow);
  padding-block: var(--sec-y);
}
.lost svg { color: var(--bluebird); margin-bottom: 2rem; }
.lost p { margin-top: 1.5rem; font-size: 1.25rem; }

/* ------------------------------------------------------------------ */
/* 15. Scroll reveals (only ever active when JS is running)             */
/* ------------------------------------------------------------------ */

/* Short and shallow on purpose. The observer fires 30% of a viewport
   early, so by the time a block is on screen it has already arrived. */
html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Per-line masked rise. The mask only exists once JS has split the text. */
html.js .split .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
html.js .split .line-inner {
  display: block;
  transform: translateY(105%);
  transition: transform 0.4s var(--ease);
  transition-delay: calc(var(--l, 0) * 55ms);
}
html.js .split.in .line-inner { transform: translateY(0); }

/* Anything already on screen at load or after a back-forward restore is
   simply there. No fade, so a fast scroll can never outrun the page.
   The class is dropped a moment later, once it has served its purpose. */
html.js .reveal.in-now,
html.js .split.in-now .line-inner { transition: none; }

/* A revealed element rests at transform: none, which outranks a plain
   hover rule, so the hover language is restated here at full strength.
   Springy on the way in; the reveal transition carries it back. */
html.js .signs .sign:hover {
  transform: translateY(-3px) rotate(-1.5deg);
  transition: transform 0.55s cubic-bezier(0.2, 1.5, 0.4, 1),
    box-shadow 0.3s var(--ease);
}
html.js .platform:hover { transform: translateY(-4px); }
html.js .cta-row .btn:hover { transform: translateY(2px); }
html.js .cta-row .btn:active { transform: translateY(4px); }

/* ------------------------------------------------------------------ */
/* 16. Cross-document view transitions                                 */
/* ------------------------------------------------------------------ */

@view-transition {
  navigation: auto;
}

@keyframes vt-out {
  to { opacity: 0; }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(12px); }
}

::view-transition-old(root) {
  animation: vt-out 300ms var(--ease) both;
}
::view-transition-new(root) {
  animation: vt-in 300ms var(--ease) both;
}

/* ------------------------------------------------------------------ */
/* 17. Reduced motion                                                  */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* No marquee autoplay, no scroll cue bob. */
  .marquee__track { animation: none; transform: none; }
  .hero__cue svg { animation: none; }

  /* Nothing is ever hidden waiting for a reveal. */
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .split .line-inner { transform: none; }

  /* None of the hover language runs: no tip, no press, no nudge, no
     slide, no scale, no width shift. The html.js selectors are repeated
     here so they outrank the restated rules above. */
  .sign:hover,
  .platform:hover,
  .btn:hover,
  .btn:active,
  .btn:hover svg,
  .tlink:hover svg,
  .sign:hover .sign__arrow,
  .gallery .ph:hover img,
  .preview-grid .ph:hover img,
  .card--photo:hover .card__photo,
  html.js .signs .sign:hover,
  html.js .platform:hover,
  html.js .cta-row .btn:hover,
  html.js .cta-row .btn:active { transform: none; }

  .btn--primary:hover,
  .btn--primary:active { box-shadow: 0 4px 0 rgba(20, 24, 29, 0.3); }

  h2:hover { font-stretch: 125%; }

  .tlink::after,
  .footer-links a::after,
  .book-note a::after,
  .nav-menu a:not(.btn)::before { display: none; }

  .preview-grid .ph figcaption { opacity: 1; transform: none; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ------------------------------------------------------------------ */
/* 18. Print                                                           */
/* ------------------------------------------------------------------ */

@media print {
  .site-header,
  .hero__cue,
  .marquee { display: none; }
  body { background: #ffffff; color: #000000; }
}

/* Wide real-photo band (difference section aerial) */
.ph--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; margin-top: 2.5rem; }
.ph--wide img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.photo-cap { position: static; margin-top: .6rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; text-transform: none; color: var(--slate); background: none; }
.ph--wide.ph--empty .photo-cap { position: absolute; }
.sign-foot { font-family: var(--font-mono); font-size: .75rem; color: var(--slate); text-align: right; margin-top: .5rem; }
.hero--photo .hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero--photo .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero--photo .hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,36,51,.82) 0%, rgba(15,36,51,.45) 45%, rgba(15,36,51,.15) 100%); }

/* ------------------------------------------------------------------ */
/* 19. Lightbox (native dialog, full gallery)                          */
/* ------------------------------------------------------------------ */

.glink { display: block; width: 100%; height: 100%; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: transparent;
  color: var(--snow);
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(15, 36, 51, 0.92); }

.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.lightbox__img {
  max-width: min(84vw, 78rem);
  max-height: 74vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__cap {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(247, 250, 252, 0.85);
  text-align: center;
  max-width: 60ch;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 36, 51, 0.6);
  color: var(--snow);
  transition: background-color 0.25s var(--ease);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: var(--bluebird); }

.lightbox__close { top: clamp(0.5rem, 3vw, 1.5rem); right: clamp(0.5rem, 3vw, 1.5rem); }
.lightbox__prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

@media (max-width: 40em) {
  .lightbox__prev, .lightbox__next { width: 38px; height: 38px; }
}