/* ═══════════════════════════════════════════════════════════
   Kelana — shared stylesheet
   Loaded by all five pages. No build step.
   ═══════════════════════════════════════════════════════════ */

/* ============ tokens ============ */
:root{
  --void:#04060C;                     /* page ground, outside the frame */
  --ink:#05070C; --astro:#141B3A; --dawn:#5E3730;
  --sulfur:#E8C24A; --ash:#E9E5DB;
  --day:#E4E0D6; --day-ink:#17191F; --day-dim:#5F5C55;
  --day-rule:rgba(23,25,31,.17); --day-accent:#7A4A12; --day-surface:#DBD6C8;
  --linen:#CFC7B8;

  --fg:var(--ash);
  --dim:#9A968D;
  --rule:rgba(233,229,219,.15);

  /* glass, for anything floating over a photograph */
  --glass:rgba(233,229,219,.10);
  --glass-line:rgba(233,229,219,.24);
  --on-photo:rgba(233,229,219,.78);

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Newsreader','Iowan Old Style',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --s--1:.775rem; --s-0:1.0625rem; --s-1:1.28rem;
  --s-2:clamp(1.5rem,3vw,2rem); --s-3:clamp(1.9rem,4.2vw,3rem);
  --s-4:clamp(2.3rem,5.6vw,4.4rem);   /* hero display */

  --gutter:clamp(1.25rem,5vw,3.5rem);
  /* Backgrounds, heroes and photographs run edge to edge; the words do
     not. --col is the reading column: wide enough to feel roomy, narrow
     enough that a line of text is still one glance across. Raise it to
     1440px if the page wants more air, but past that the grids go thin
     and the timeline pulls apart. */
  --col:1240px;
  --bar:clamp(3.5rem,6vw,4.75rem);

  /* the frame — full bleed. Set these back to clamp(.5rem,2.2vw,2.25rem)
     and clamp(18px,2.2vw,30px) to get the floating rounded card back. */
  --inset:0;
  --r-frame:0;
  --r-card:16px;
  --r-pill:999px;

  --p:0;  /* scroll progress through the night, 0..1 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--void); color:var(--fg);
  font-family:var(--body); font-size:var(--s-0); line-height:1.62;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sulfur); color:#14161C}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--sulfur); outline-offset:3px; border-radius:2px}

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

/* available to assistive tech, absent from the page */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.skip{
  position:absolute; left:var(--gutter); top:.5rem; z-index:30;
  transform:translateY(-200%); transition:transform .18s ease;
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; border-radius:var(--r-pill);
  background:var(--sulfur); color:#14161C; padding:.6rem 1.15rem;
}
.skip:focus{transform:translateY(0)}

/* ============ the frame ============
   Every page runs edge to edge. The margin and radius come from --inset
   and --r-frame, both 0, so this stays one switch rather than a rewrite. */
.frame{
  position:relative; isolation:isolate;
  margin:var(--inset);
  min-height:calc(100vh - var(--inset) * 2);
  border-radius:var(--r-frame);
  overflow:clip;
}
body.day .frame{background:var(--day)}

/* ============ the sky ============
   Fixed to the frame's bounds and rounded to match, so it reads as the
   frame's own backdrop rather than a page background. */
.sky{
  position:fixed; inset:var(--inset); z-index:-2;
  border-radius:var(--r-frame); overflow:hidden;
  background:linear-gradient(180deg,#05070C 0%,#090C15 55%,#0D1018 100%);
}
.sky span{position:absolute; inset:0; display:block}
.sky .astro{background:linear-gradient(180deg,#080D22 0%,#141B3A 60%,#1C2140 100%); opacity:var(--l1,0)}
.sky .dawn{background:linear-gradient(180deg,#16193A 0%,#2A2648 55%,#4A3140 85%,#5E3730 100%); opacity:var(--l2,0)}
.sky .morning{background:linear-gradient(180deg,#243154 0%,#3A4460 55%,#6B5A55 88%,#8A6B4E 100%); opacity:var(--l3,0)}
#stars{
  position:fixed; inset:var(--inset); z-index:-1;
  border-radius:var(--r-frame);
  opacity:calc(1 - var(--p)*1.9); pointer-events:none;
}

/* ============ masthead ============ */
.mast{
  position:absolute; inset:0 0 auto 0; z-index:12; height:var(--bar);
  display:flex; align-items:center;
}
.mast .wrap{display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem)}
.mast nav{display:flex; flex-wrap:wrap; gap:clamp(.9rem,2.4vw,2rem); margin-inline:auto}
.mast .brand{
  font-family:var(--display); font-variation-settings:'wdth' 118,'wght' 500;
  font-size:var(--s-1); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; line-height:1; white-space:nowrap;
}
.mast nav a{
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.15em;
  text-transform:uppercase; text-decoration:none; color:var(--on-photo);
  padding-block:.35rem; transition:color .18s ease;
}
.mast nav a:hover{color:var(--ash)}
.mast nav a[aria-current="page"]{color:var(--sulfur)}

/* the glass pill at the right of the nav */
.mast .pill{
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  padding:.65rem 1.35rem; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--glass-line); color:var(--ash);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .18s ease,border-color .18s ease;
}
.mast .pill:hover{background:rgba(233,229,219,.18); border-color:var(--ash)}

/* The masthead sits over a photograph on every page, daylight ones included,
   so it keeps the light treatment throughout — never the day-ink palette. */
body.day .mast .brand{color:var(--ash)}
body.day .mast nav a{color:var(--on-photo)}
body.day .mast nav a:hover{color:var(--ash)}
body.day .mast nav a[aria-current="page"]{color:#E8C24A}

/* ============ shared type ============ */
.eyebrow{
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); margin:0;
}
/* the reference eyebrow: a short rule, then accent caps */
.eyebrow--rule{
  display:flex; align-items:center; gap:.9rem; color:var(--sulfur);
}
.eyebrow--rule::before{
  content:""; width:clamp(1.75rem,4vw,3.25rem); height:1px;
  background:currentColor; opacity:.75; flex:none;
}
.eyebrow--rule.is-centred{justify-content:center}
/* over a photograph the accent is always the night sulfur, never day-accent */
.hero .eyebrow--rule,.pagehero .eyebrow--rule{color:#E8C24A}

h1,h2,h3{text-wrap:balance; margin:0; font-weight:400}
p{margin:0}
.lede{color:var(--dim); max-width:54ch}

/* ============ hero (home) ============ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(36rem,92vh,56rem);
  display:flex; flex-direction:column;
  padding-block:var(--bar) clamp(1.25rem,3vw,2.25rem);
}
.hero-media{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  /* night sky with the first warmth of dawn sitting low, behind the ridge */
  background:
    radial-gradient(120% 55% at 50% 80%,rgba(224,132,58,.30) 0%,rgba(224,132,58,.06) 55%,rgba(224,132,58,0) 75%),
    linear-gradient(180deg,#070B18 0%,#0E1630 36%,#1B2547 60%,#3A3558 82%,#5C4652 100%);
}
.hero-media img{width:100%; height:100%; object-fit:cover; display:block}

/* With no photograph in the slot, the opaque gradient above is just a
   second, duller copy of the sky already fixed behind the frame — and it
   hides the starfield. On the night pages, drop it and keep only the dawn
   warmth, so the real sky and its stars come through behind the ridge.
   Scoped away from body.day, whose pages carry no starfield to reveal. */
body:not(.day) .hero-media.is-empty{
  background:radial-gradient(120% 55% at 50% 80%,
    rgba(224,132,58,.34) 0%,rgba(224,132,58,.07) 55%,rgba(224,132,58,0) 75%);
}
/* and lift the scrim off them: it exists to keep white type legible over a
   photograph, and there is no photograph here to fight. */
body:not(.day) .hero-media.is-empty::after{
  background:linear-gradient(180deg,rgba(4,6,12,.38) 0%,rgba(4,6,12,.06) 30%,
    rgba(4,6,12,.06) 60%,rgba(4,6,12,.58) 100%);
}

/* The caldera in silhouette — the standing hero background, and the one
   thing on this page that moves. A photograph, if one ever lands, wins. */
.hero-ridge{display:block; position:absolute; left:0; right:0; bottom:0; width:100%; height:auto}
.hero-media:has(img) .hero-ridge{display:none}
.hero-media.is-empty .hero-ridge{display:block}

/* Bromo is still venting up there, about every twenty minutes.
   The plume lives inside the SVG so it scales with the ridge
   instead of drifting off the crater on a wide screen. */
.hero-ridge .vent circle{
  transform-box:fill-box; transform-origin:50% 50%;
  opacity:0; animation:hero-vent 11s linear infinite;
}
.hero-ridge .vent circle:nth-child(2){animation-delay:3.7s}
.hero-ridge .vent circle:nth-child(3){animation-delay:7.4s}
@keyframes hero-vent{
  0%{transform:translate(0,0) scale(.45); opacity:0}
  18%{opacity:.9}
  100%{transform:translate(34px,-152px) scale(2.2); opacity:0}
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(4,6,12,.78) 0%,rgba(4,6,12,.30) 24%,
      rgba(4,6,12,.12) 46%,rgba(4,6,12,.52) 78%,rgba(4,6,12,.90) 100%);
}

.hero-body{
  /* margin-block:auto centres it vertically in the flex column;
     margin-inline must stay auto or it overrides .wrap and sticks left */
  position:relative; z-index:2; margin-block:auto;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1rem,2.4vw,1.6rem); text-align:center;
  padding-block:clamp(1.5rem,5vw,3rem);
}
.hero h1{
  font-family:var(--body); font-weight:300;
  font-size:var(--s-4); line-height:1.08; letter-spacing:-.015em;
  max-width:17ch; color:var(--ash);
}
.hero h1 em{font-style:italic; color:var(--sulfur)}
.hero .sub{color:var(--on-photo); max-width:46ch; font-size:var(--s-1); line-height:1.5}

.scroll-cue{
  display:inline-flex; align-items:center; gap:.65rem; text-decoration:none;
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-photo); margin-top:.4rem;
  transition:color .18s ease;
}
.scroll-cue:hover{color:var(--sulfur)}
.scroll-cue i{display:block; font-style:normal; animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}

/* ---- side rails ---- */
.rail{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
/* the frame used to hold these off the edge; now they do it themselves */
.rail--l{left:clamp(1rem,1.8vw,2.25rem)}
.rail--r{right:clamp(1rem,1.8vw,2.25rem); align-items:flex-end}
.rail .vtext{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-photo);
}
.rail a{color:var(--on-photo); display:block; transition:color .18s ease}
.rail a:hover{color:var(--sulfur)}
.rail svg{display:block; width:16px; height:16px; fill:currentColor}
.rail .stem{width:1px; height:clamp(2rem,6vh,3.5rem); background:var(--glass-line)}

/* the right rail is the night's three marks, not decoration */
.hourrail{
  display:flex; flex-direction:column; align-items:flex-end; gap:.85rem;
  border-right:1px solid var(--glass-line); padding-right:1rem;
  font-family:var(--mono); font-size:var(--s--1); font-variant-numeric:tabular-nums;
  color:rgba(233,229,219,.5); list-style:none; margin:0;
}
.hourrail li{transition:color .18s ease}
.hourrail .now{color:var(--sulfur)}

/* ---- trust flags ----
   Stacked down the left of the hero, each one a banner with a chevron
   bitten out of its leading edge. The shape is a clip-path, so the
   1px edge is drawn as a second layer underneath rather than a border
   (a border would be clipped away with the corner). */
.chips{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.45rem; margin-bottom:clamp(1.25rem,3vw,2rem);
}
.chip{
  --notch:15px;
  position:relative; isolation:isolate;
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ash);
  padding:.68rem 1.5rem .68rem calc(var(--notch) + 1.1rem);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--notch) 50%);
  background:rgba(233,229,219,.55);   /* reads as the hairline edge */
}
.chip::before{
  content:""; position:absolute; inset:1px; z-index:-1;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--notch) 50%);
  background:rgba(6,9,16,.32);
}
body.day .chip{background:rgba(23,25,31,.35); color:var(--day-ink)}
body.day .chip::before{background:rgba(255,255,255,.72)}

/* ---- the enquiry bar ----
   A solid white rail sitting on the photograph, each field its own
   soft pill, the action in near-black at the end. */
.bookbar{
  position:relative; z-index:2;
  width:min(100%,68rem); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:stretch; gap:.4rem;
  padding:.5rem; border-radius:var(--r-pill);
  background:#FBFAF8; border:1px solid rgba(20,22,28,.06);
  box-shadow:0 22px 60px rgba(4,6,12,.34);
}
.bookbar label{
  flex:1 1 11rem; display:flex; flex-direction:column; gap:.1rem;
  padding:.72rem 1.4rem; border-radius:var(--r-pill); min-width:0;
  background:#F1EFEA; transition:background .18s ease;
}
.bookbar label:focus-within{background:#E7E4DD}
.bookbar span{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:#75787F;
}
.bookbar select{
  appearance:none; -webkit-appearance:none; background:transparent; border:0;
  color:#14161C; font-family:var(--body); font-size:var(--s-0);
  padding:0; margin:0; width:100%; cursor:pointer; line-height:1.5;
}
.bookbar select option{background:#FBFAF8; color:#14161C}
.bookbar .cta{
  flex:0 0 auto; align-self:stretch; display:flex; align-items:center;
  padding-inline:clamp(1.9rem,4vw,2.9rem);
  background:#14161C; border-color:#14161C; color:#F4F2EC;
}
.bookbar .cta:hover{background:#2C2F38; border-color:#2C2F38; color:#FFF}

/* ============ calls to action ============ */
.cta{
  display:inline-block; font-family:var(--mono); font-size:var(--s--1); letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; text-align:center;
  padding:.95rem 1.9rem; border-radius:var(--r-pill);
  background:var(--sulfur); color:#14161C; border:1px solid var(--sulfur);
  cursor:pointer; transition:background .18s ease,color .18s ease;
}
.cta:hover{background:transparent; color:var(--sulfur)}
.cta--quiet{background:transparent; color:var(--fg); border-color:var(--glass-line)}
.cta--quiet:hover{border-color:var(--sulfur); color:var(--sulfur)}

.more{
  display:inline-block; font-family:var(--mono); font-size:var(--s--1);
  letter-spacing:.13em; text-transform:uppercase; color:var(--dim);
  text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:.3rem;
  transition:color .18s ease,border-color .18s ease;
}
.more:hover{color:var(--sulfur); border-color:var(--sulfur)}
.more::after{content:" \2192"}

/* ============ interior page header ============ */
.pagehero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(20rem,46vh,30rem);
  display:flex; align-items:flex-end;
  padding-block:calc(var(--bar) + 1rem) clamp(2rem,5vw,3.25rem);
}
.pagehero .hero-media::after{
  background:linear-gradient(180deg,rgba(4,6,12,.74) 0%,rgba(4,6,12,.34) 40%,rgba(4,6,12,.82) 100%);
}
.pagehero .wrap{display:flex; flex-direction:column; gap:.9rem}
.pagehero h1{
  font-family:var(--body); font-weight:300; color:var(--ash);
  font-size:var(--s-3); line-height:1.1; letter-spacing:-.012em; max-width:20ch;
}
.pagehero .lede{color:var(--on-photo)}

/* ============ section furniture ============ */
.head{
  display:flex; flex-wrap:wrap; gap:.6rem clamp(1.5rem,4vw,3rem); align-items:baseline;
  border-bottom:1px solid var(--rule); padding-bottom:1.2rem; margin-bottom:clamp(2.5rem,6vw,4rem);
}
.head h2{
  font-family:var(--display); font-variation-settings:'wdth' 122,'wght' 500;
  font-size:var(--s-2); letter-spacing:-.005em;
}
.head p{max-width:46ch; color:var(--dim); font-size:var(--s-0); margin-left:auto}

/* ============ image slots ============ */
.shot{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:var(--ar,3/2); border-radius:var(--r-card);
  background:linear-gradient(160deg,#0E1220 0%,#161B2C 48%,#0B0E18 100%);
}
body.day .shot{background:linear-gradient(160deg,var(--linen) 0%,#BFB6A4 55%,var(--linen) 100%)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot.is-empty::after,.hero-media.is-empty::after{
  content:attr(data-slot); position:absolute; inset:auto 0 0 0; padding:1rem 1.25rem;
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); opacity:.5;
}
.hero-media.is-empty::after{opacity:.35}
/* where the ridge stands in, the slot is a finished picture, not a gap —
   so it needs no "drop a photo here" label */
.hero-media.is-empty:has(.hero-ridge)::after{content:none}
.shot figcaption{
  position:absolute; left:0; bottom:0; padding:.9rem 1.15rem; width:100%;
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ash); opacity:.8;
  background:linear-gradient(0deg,rgba(5,7,12,.7) 0%,rgba(5,7,12,0) 100%);
}
.shot--wide{--ar:16/7}
.shot--tall{--ar:4/5}

/* a band that escapes .wrap but stays inside the frame */
.bleed{
  width:100%; border-radius:0;
  margin-block:clamp(2.5rem,7vw,5rem);
}

/* ============ the hours ============ */
.hours{padding-block:clamp(3.5rem,9vw,6rem) clamp(5rem,14vw,9rem)}
.hours ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}

.hour{
  position:relative; display:grid;
  grid-template-columns:minmax(7.5rem,9.5rem) 1px minmax(0,1fr);
  gap:0 clamp(1.25rem,3.5vw,2.75rem);
  padding-block:clamp(1.75rem,4vw,2.6rem);
}
.hour .spine{background:var(--rule); position:relative}
.hour .spine::before{
  content:""; position:absolute; left:50%; top:clamp(.55rem,1.6vw,.85rem);
  width:7px; height:7px; margin-left:-3.5px; border-radius:50%;
  background:var(--ink); border:1px solid var(--dim);
}
.hour:first-of-type .spine{background:linear-gradient(180deg,transparent 0,var(--rule) clamp(.55rem,1.6vw,.85rem))}
.hour:last-of-type .spine{background:linear-gradient(180deg,var(--rule) 0,var(--rule) 2.2rem,transparent 100%)}

.mark{display:flex; flex-direction:column; gap:.2rem; padding-top:.05em}
.mark time{
  font-family:var(--display); font-variation-settings:'wdth' 112,'wght' 520;
  font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.mark dl{
  margin:.45rem 0 0; display:grid; grid-template-columns:auto auto; gap:.1rem .7rem;
  justify-content:start; font-family:var(--mono); font-size:var(--s--1); color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.mark dt{letter-spacing:.1em; text-transform:uppercase; opacity:.72}
.mark dd{margin:0; color:var(--fg)}

.note h3{
  font-family:var(--display); font-variation-settings:'wdth' 120,'wght' 480;
  font-size:var(--s-1); letter-spacing:.005em; margin-bottom:.55rem;
}
.note p{max-width:60ch; color:#D6D2C8}
.note p + p{margin-top:.9rem}

/* the one entry on the page that is an event, not a place */
.hour--sunrise .note h3{color:var(--sulfur)}
.hour--sunrise .spine::before{background:var(--sulfur); border-color:var(--sulfur); box-shadow:0 0 0 5px rgba(232,194,74,.16)}
.hour--sunrise::after{
  content:""; position:absolute; left:50%; bottom:0; width:min(118%,1700px); height:230px;
  transform:translateX(-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%,rgba(224,132,58,.30) 0%,rgba(224,132,58,.10) 45%,rgba(224,132,58,0) 78%);
}

/* the transfers between stops: same rail, quieter voice */
.hour--leg{padding-block:clamp(.9rem,2.2vw,1.4rem)}
.hour--leg .mark time{font-size:clamp(1.05rem,2vw,1.3rem); font-variation-settings:'wdth' 108,'wght' 460; color:var(--dim)}
.hour--leg .mark dl{margin-top:.3rem}
.hour--leg .note h3{
  font-variation-settings:'wdth' 112,'wght' 420;
  font-size:var(--s-0); color:var(--dim); margin-bottom:0; padding-top:.15em;
}
.hour--leg .spine::before{
  width:5px; height:5px; margin-left:-2.5px; top:clamp(.4rem,1.2vw,.6rem);
  background:var(--rule); border-color:transparent;
}
.day .hour--leg .spine::before{background:var(--rule)}
.hours .interlude{list-style:none; padding-block:clamp(1rem,3vw,2rem)}

/* ============ the peaks diagram ============
   The ridgeline, relocated out of the hero to where it reads as information. */
.peaks{padding-block:clamp(2.5rem,7vw,4.5rem)}
.ridge{position:relative; width:100%; margin-top:clamp(1.5rem,4vw,2.5rem)}
.ridge svg{display:block; width:100%; height:auto; border-radius:var(--r-card)}

.plume{position:absolute; left:58.2%; bottom:47%; width:0; height:0; pointer-events:none}
.plume i{
  position:absolute; left:0; bottom:0; width:82px; height:82px; margin-left:-41px;
  border-radius:50%; background:radial-gradient(circle,rgba(226,222,210,.34) 0%,rgba(226,222,210,0) 68%);
  filter:blur(7px); opacity:0; animation:vent 11s linear infinite;
}
.plume i:nth-child(2){animation-delay:3.7s; width:104px; height:104px; margin-left:-52px}
.plume i:nth-child(3){animation-delay:7.4s; width:68px; height:68px; margin-left:-34px}
@keyframes vent{
  0%{transform:translate(0,0) scale(.45); opacity:0}
  18%{opacity:.85}
  100%{transform:translate(46px,-190px) scale(2.1); opacity:0}
}

.peak{position:absolute; bottom:2%; transform:translateX(-50%); text-align:center; pointer-events:none}
.peak::before{
  content:""; display:block; width:1px; height:var(--h); margin:0 auto .5rem;
  background:linear-gradient(180deg,rgba(233,229,219,0) 0%,rgba(233,229,219,.4) 100%);
}
.peak b{
  display:block; font-family:var(--mono); font-weight:400; font-size:var(--s--1);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.peak i{
  display:block; font-family:var(--mono); font-style:normal; font-size:var(--s--1);
  color:var(--fg); font-variant-numeric:tabular-nums; opacity:.8;
}

/* ============ daylight ============ */
.day,body.day{
  --fg:var(--day-ink); --dim:var(--day-dim); --rule:var(--day-rule); --sulfur:var(--day-accent);
  --glass-line:var(--day-rule);
  color:var(--day-ink);
}
.day ::selection{background:var(--day-accent); color:var(--day)}
.day .cta{background:var(--day-accent); border-color:var(--day-accent); color:var(--day)}
.day .cta:hover{background:transparent; color:var(--day-accent)}
.day .cta--quiet{background:transparent; color:var(--day-ink); border-color:var(--day-rule)}
.day .cta--quiet:hover{border-color:var(--day-accent); color:var(--day-accent)}
.day .note p{color:#33363E}
.day .hour .spine::before{background:var(--day)}

/* the home page's dawn-into-daylight transition */
.day--fade{
  background:linear-gradient(180deg,rgba(228,224,214,0) 0,var(--day) 210px,var(--day) 100%);
  padding-top:210px;
}

/* ============ teaser (home) ============ */
.teaser{padding-block:clamp(2.5rem,7vw,4.5rem)}
.teaser .wrap{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.teaser h2{
  font-family:var(--display); font-variation-settings:'wdth' 122,'wght' 480;
  font-size:var(--s-2); line-height:1.14; margin-block:.7rem 1rem; max-width:18ch;
}

/* ============ inclusions ============ */
.kit{padding-block:clamp(2.5rem,7vw,4.5rem)}
.kit .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:clamp(2rem,5vw,4rem)}
.kit h2{
  font-family:var(--display); font-variation-settings:'wdth' 122,'wght' 500;
  font-size:var(--s-1); border-bottom:1px solid var(--rule); padding-bottom:.75rem; margin-bottom:1.2rem;
}
.kit ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8rem}
.kit li{display:grid; grid-template-columns:1.6rem 1fr; align-items:baseline}
.kit li::before{content:"\2014"; font-family:var(--mono); font-size:var(--s--1); color:var(--sulfur)}
.kit em{font-style:normal; font-family:var(--mono); font-size:var(--s--1); color:var(--dim); white-space:nowrap}

/* ============ cards ============ */
.cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1rem,2.5vw,1.5rem);
}
.card{
  border-radius:var(--r-card); padding:clamp(1.35rem,3vw,1.85rem);
  background:rgba(233,229,219,.04); border:1px solid var(--rule);
}
body.day .card{background:rgba(23,25,31,.035); border-color:var(--day-rule)}
.card h3{
  font-family:var(--display); font-variation-settings:'wdth' 120,'wght' 500;
  font-size:var(--s-1); margin-bottom:.6rem;
}
.card p{color:var(--dim); max-width:44ch}
.card .eyebrow{margin-bottom:.55rem; letter-spacing:.15em}

/* ============ katalog tour ============
   Satu kartu per trip. Urutannya disengaja: gambar dulu, lalu dua angka
   yang sebenarnya menentukan keputusan orang (durasi dan harga), baru
   isi harinya. */
.tours{
  list-style:none; margin:clamp(1.75rem,4vw,2.5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.5rem,3.5vw,2.25rem);
}
.tour{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-card); border:1px solid var(--rule);
  background:rgba(233,229,219,.04);
}
body.day .tour{background:rgba(23,25,31,.035); border-color:var(--day-rule)}
.tour .shot{border-radius:0}

.tour-body{display:flex; flex-direction:column; flex:1; padding:clamp(1.25rem,2.8vw,1.7rem)}
.tour-meta{
  display:flex; flex-wrap:wrap; gap:.35rem .85rem;
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim);
}
.tour h3{
  font-family:var(--display); font-variation-settings:'wdth' 120,'wght' 500;
  font-size:var(--s-1); margin:.7rem 0 .5rem;
}
.tour-body p{color:var(--dim); max-width:42ch}
.tour ul{
  list-style:none; margin:1.1rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.45rem;
  font-family:var(--mono); font-size:var(--s--1); color:var(--dim); line-height:1.5;
}
.tour li{display:grid; grid-template-columns:1.15rem 1fr; align-items:baseline}
.tour li::before{content:"\2014"; color:var(--sulfur)}

.tour-foot{
  margin-top:auto; padding-top:clamp(1.35rem,3vw,1.75rem);
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:.85rem 1rem;
}
.tour .price{
  font-family:var(--display); font-variation-settings:'wdth' 118,'wght' 500;
  font-size:clamp(1.2rem,2.4vw,1.45rem); line-height:1.1;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--fg);
}
.tour .price small{
  display:block; margin-top:.3rem; color:var(--dim);
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.08em;
  font-variation-settings:normal;
}
.tour .more{margin-bottom:.2rem}

/* ============ departures ============ */
.depart{padding-block:clamp(2.5rem,7vw,4.5rem) clamp(4rem,10vw,7rem)}
.depart h2{
  font-family:var(--display); font-variation-settings:'wdth' 125,'wght' 500;
  font-size:var(--s-2); margin-bottom:.5rem;
}

.rate{
  border-radius:var(--r-card); padding:clamp(1.5rem,4vw,2.25rem);
  /* a light tint: this panel now sits on the night sky, where a wash of
     black would simply disappear */
  background:rgba(233,229,219,.04); border:1px solid var(--rule);
  margin-block:0 clamp(2.5rem,6vw,3.5rem);
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:1.25rem clamp(1.25rem,3vw,2.25rem);
}
.rate .figure{
  flex:0 1 auto; font-family:var(--display); font-variation-settings:'wdth' 118,'wght' 500;
  font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.rate .figure small{font-size:var(--s-1); font-variation-settings:'wdth' 110,'wght' 400; color:var(--dim)}
/* the <br>s set the line breaks; nothing else should re-break them */
.rate .terms{flex:0 1 auto; font-family:var(--mono); font-size:var(--s--1); color:var(--dim); line-height:1.9; white-space:nowrap}
.rate .cta{margin-left:auto}

.dates{list-style:none; margin:0 0 clamp(2.5rem,6vw,3.5rem); padding:0; border-top:1px solid var(--rule)}
.dates li{
  display:grid; grid-template-columns:minmax(6rem,9rem) minmax(0,1fr) auto;
  gap:.4rem clamp(1rem,3vw,2rem); align-items:center;
  border-bottom:1px solid var(--rule); padding-block:1.15rem;
}
.dates .d{font-family:var(--mono); font-size:var(--s-0); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.dates .n{color:var(--dim); font-size:var(--s--1); font-family:var(--mono)}
.dates .n.gone{opacity:.65}
.dates a{
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--rule); color:var(--fg);
  padding:.6rem 1.25rem; display:inline-block; white-space:nowrap; border-radius:var(--r-pill);
  transition:border-color .18s ease,color .18s ease;
}
.dates a:hover{border-color:var(--sulfur); color:var(--sulfur)}
.dates span.closed{
  font-family:var(--mono); font-size:var(--s--1); letter-spacing:.11em; text-transform:uppercase;
  color:var(--dim); opacity:.45; padding:.6rem 1.25rem; display:inline-block; white-space:nowrap;
}
.dates li[data-state="full"] .d{text-decoration:line-through; text-decoration-thickness:1px; opacity:.55}

/* ============ questions ============ */
.faq{border-top:1px solid var(--rule); margin-top:clamp(2.5rem,6vw,4rem)}
.faq details{border-bottom:1px solid var(--rule); padding-block:1.15rem}
.faq summary{
  cursor:pointer; list-style:none; display:flex; gap:1rem; align-items:baseline;
  font-family:var(--display); font-variation-settings:'wdth' 118,'wght' 480;
  font-size:var(--s-1);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; margin-left:auto; font-family:var(--mono); color:var(--sulfur);
  font-size:var(--s-1); line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq details p{max-width:62ch; color:var(--dim); margin-top:.8rem}

/* ============ journal ============ */
.posts{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.posts li{border-bottom:1px solid var(--rule)}
.posts a{
  display:grid; grid-template-columns:minmax(6rem,9rem) minmax(0,1fr);
  gap:.5rem clamp(1rem,3vw,2rem); align-items:baseline;
  padding-block:1.5rem; text-decoration:none; transition:opacity .18s ease;
}
.posts a:hover{opacity:.62}
.posts time{font-family:var(--mono); font-size:var(--s--1); color:var(--dim); letter-spacing:.1em; text-transform:uppercase}
.posts h3{
  font-family:var(--display); font-variation-settings:'wdth' 120,'wght' 480;
  font-size:var(--s-1); margin-bottom:.35rem;
}
.posts p{color:var(--dim); max-width:58ch; font-size:var(--s-0)}

.post{padding-block:clamp(2.5rem,6vw,4rem); border-bottom:1px solid var(--rule)}
.post h2{
  font-family:var(--display); font-variation-settings:'wdth' 122,'wght' 480;
  font-size:var(--s-2); margin-block:.55rem 1.1rem;
}
.post p{max-width:64ch}
.post p + p{margin-top:1.1rem}

/* ============ closing band ============ */
.close{border-top:1px solid var(--rule); padding-block:clamp(3.5rem,9vw,6rem)}
.close .wrap{display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.5rem clamp(2rem,5vw,4rem)}
.close h2{
  font-family:var(--body); font-weight:300;
  font-size:var(--s-3); line-height:1.14; max-width:18ch;
}
.close .cta{margin-left:auto}

/* ============ footer ============ */
footer{border-top:1px solid var(--rule); padding-block:2rem 3rem; color:var(--dim)}
footer .wrap{display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between; font-family:var(--mono); font-size:var(--s--1)}
/* the two links that used to live on the hero's left rail */
footer .social{display:flex; gap:1.25rem}
footer .social a{
  color:var(--dim); text-decoration:none; letter-spacing:.1em;
  border-bottom:1px solid var(--rule); padding-bottom:.15rem;
  transition:color .18s ease,border-color .18s ease;
}
footer .social a:hover{color:var(--sulfur); border-color:var(--sulfur)}

/* ============ narrow ============ */
@media (max-width:980px){
  .rail{display:none}                 /* rails need edge room they do not have */
}
@media (max-width:860px){
  /* the masthead stays absolute over the image — the hero simply makes
     room for the nav once it wraps onto a second row */
  .mast{height:auto; padding-block:.9rem}
  .mast .wrap{flex-wrap:wrap; gap:.6rem 1rem}
  .mast nav{margin-inline:0; gap:.75rem 1.1rem; order:3; width:100%}
  .mast .pill{margin-left:auto}
  .hero{padding-top:8.5rem}
  .pagehero{padding-top:9rem}
  .bookbar{border-radius:var(--r-card)}
  .bookbar label{flex:1 1 100%; border-radius:var(--r-card)}
  .bookbar .cta{width:100%; align-self:stretch; justify-content:center}
}
@media (max-width:720px){
  .hour{grid-template-columns:1px minmax(0,1fr); gap:0 1.25rem}
  .hour .spine{grid-column:1; grid-row:1 / span 2}
  .hour .mark{grid-column:2; padding-bottom:.75rem}
  .hour .note{grid-column:2}
  .peak b,.peak i{font-size:.66rem}
  .head p{margin-left:0}
  .rate .cta,.close .cta{margin-left:0; width:100%}
  .rate .terms{flex-basis:100%; white-space:normal}
  .dates li{grid-template-columns:minmax(0,1fr) auto}
  .dates .n{grid-column:1; grid-row:2}
  .dates a,.dates span.closed{grid-column:2; grid-row:1 / span 2}
  .posts a{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:430px){ .peak--batok{display:none} }

@media (prefers-reduced-motion:reduce){
  .plume i{animation:none; opacity:.42; transform:translate(18px,-70px) scale(1.5)}
  .hero-ridge .vent circle{animation:none; opacity:.45; transform:translate(14px,-58px) scale(1.6)}
  .scroll-cue i{animation:none}
  *{transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }