/* ============================================================
   GLOOBLE — ONE CONTINUOUS JOURNEY, WITH NESTED CATEGORIES
   ------------------------------------------------------------
   There are no hard "sections" in this build. A single fixed
   photographic canvas (.cinema-bg) sits behind everything for
   the entire page; as you scroll, one place cross-fades into
   the next and drifts in a slow, continuous zoom. The document
   itself is one long scroll of transparent "beats" — text
   moments that rise and fall over that canvas. Nothing cuts.
   The Altitude Line is the spine that proves it's one ascent.

   NESTED CATEGORIES: four main beats — Mountains, Adventure,
   Treks & Hikes, Lakes — each contain several sub-beats
   (data-category="mountains|adventure|treks|lakes"). Sub-beats
   read as "browsing inside one place" rather than "advancing the
   journey": a large category title (.category-heading) pins
   itself to the left of the screen and holds perfectly still —
   it only fades in/out at the category's edges, it never moves —
   while each sub-beat's own name slides in from the right side
   of the screen on the SAME easing curve the rest of the site
   uses to rise from below, just mirrored horizontally. A small
   bottom-center Category Rail (dots + label) tracks position
   among siblings for a quick "which one of N" glance. Both
   disappear the instant we're back to a plain main beat, and
   the next beat's text rises from below the normal way again.
   That's the site's "second" scroll experience, layered on top
   of the same single vertical scroll gesture (no swipe/gesture
   change, so it still behaves on mobile — the two-column layout
   simply steps aside below 760px).

   WP NOTE: this whole file becomes a single custom page
   template (page-home.php). The beat list below is the thing
   a client would want to edit — so in WordPress each beat's
   image + copy should be pulled from ACF fields in a
   Flexible Content field named "journey_beats", looped with
   get_field('journey_beats') instead of being hardcoded here.
   Sub-beats need an extra "category" sub-field (mountains /
   adventure / treks / lakes / none) so the Category Rail and
   the static Category Heading can group them.
   ============================================================ */
:root{
  --ink:        #100f0b;
  --paper:      #F4EFE4;
  --stone:      #a89c86;
  --stone-deep: #6e6252;
  --ember:      #b5643a;
  --ember-soft: #d99a6c;
  --hair: rgba(244,239,228,.22);

  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--ink); }
body{
  background:var(--ink); color:var(--paper); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; }
.eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ============================================================
   THE CINEMA — one fixed canvas behind the whole page.
   Every beat's photo lives here as a .layer; JS crossfades
   opacity + drives a slow continuous zoom. Nothing else in the
   page ever changes background colour — this is the only paint.
   A layer can also hold NO photo at all (just its own gradient
   "grade") — used sparingly, for beats that are meant to read as
   a calm, abstract close rather than another photograph.
   ============================================================ */
.cinema-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.cinema-bg .layer{ position:absolute; inset:0; opacity:0; }
.cinema-bg .layer .frame{ position:absolute; inset:-4%; width:108%; height:108%; }
.cinema-bg .layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.05) brightness(.86); transform:scale(1); }
.cinema-bg .layer .grade{ position:absolute; inset:0; mix-blend-mode:multiply; opacity:.5; background:var(--grade,#000); }
.cinema-bg .layer.no-photo .grade{ mix-blend-mode:normal; opacity:1; background:var(--grade); }
.cinema-bg .layer .sky-grain{ position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); }
/* constant readability scrim — identical on every beat, on purpose:
   the treatment never changes, which is part of what makes this
   read as one experience instead of a set of designed "sections".
   The Legibility Veil below (behind each text block) does the
   finer, localized darkening that keeps type readable. */
.cinema-scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,11,8,.62) 0%, rgba(12,11,8,.05) 22%, rgba(12,11,8,.05) 60%, rgba(12,11,8,.7) 100%);
}

/* ============================================================
   THE ALTITUDE LINE — unchanged in spirit: the one continuous
   thread confirming this is a single ascent, not separate pages.
   ============================================================ */
.altitude-line{ position:fixed; right:clamp(14px,2.4vw,34px); top:0; height:100vh; width:64px; z-index:60; display:flex; align-items:center; pointer-events:none; opacity:1; transition:opacity .5s var(--ease); }
.altitude-line.is-hidden{ opacity:0; }
@media (max-width:880px){ .altitude-line{ display:none; } }
.altitude-line .rail{ position:relative; width:1px; height:70vh; background:var(--hair); margin-inline:auto; }
.altitude-line .tick{ position:absolute; right:0; top:0; width:5px; height:1px; background:var(--hair); }
.altitude-line .tick.active{ background:var(--ember-soft); }
.altitude-line .marker{ position:absolute; right:-3px; width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 4px rgba(181,100,58,.18); top:0; transition:top .4s var(--ease); }
.altitude-line .readout{ position:absolute; right:16px; transform:translateY(-50%); text-align:right; white-space:nowrap; font-family:var(--mono); color:var(--ember-soft); top:0; opacity:0; transition:top .4s var(--ease), opacity .3s var(--ease); }
.altitude-line .readout.is-set{ opacity:1; }
.altitude-line .readout b{ display:block; font-size:.74rem; font-weight:500; }
.altitude-line .readout span{ display:block; font-size:.6rem; color:var(--stone); text-transform:uppercase; letter-spacing:.07em; margin-top:.2rem; }

/* ============================================================
   CATEGORY HEADING — the "second" scroll experience, primary
   half. While inside a category's sub-beats, this big title
   pins to the left of the screen and STAYS PUT: it only ever
   crossfades (opacity) when a category starts, changes, or
   ends — it never slides, rises or otherwise animates with
   scroll position the way normal beat text does. That stillness
   is what should make browsing within one category feel
   different from advancing the main journey.
   ============================================================ */
.category-heading{
  position:fixed; left:clamp(1.4rem,5.2vw,4.2rem); top:50%; transform:translateY(-50%);
  z-index:61; max-width:38vw; pointer-events:none; opacity:0; transition:opacity .55s var(--ease);
}
.category-heading.is-visible{ opacity:1; }
.category-heading .ch-eyebrow{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember-soft); display:block; margin-bottom:.7rem; }
.category-heading h3{ font-style:italic; font-weight:400; font-size:clamp(2.4rem,6.4vw,5rem); line-height:.98; color:rgba(244,239,228,.92); }
@media (max-width:760px){ .category-heading{ display:none; } }

/* ============================================================
   CATEGORY RAIL — the "second" scroll experience, secondary
   half: a small bottom-center pill giving a quick "which one of
   N" read among the current category's siblings. Visible only
   while inside a category, gone the moment we're back to a
   plain main beat.
   ============================================================ */
.category-rail{
  position:fixed; left:50%; bottom:clamp(20px,4vh,40px); transform:translate(-50%,10px);
  z-index:62; display:flex; align-items:center; gap:.7rem;
  padding:.55rem 1.15rem; border-radius:999px;
  background:rgba(16,15,11,.55); border:1px solid var(--hair); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.category-rail.is-visible{ opacity:1; transform:translate(-50%,0); }
.category-rail .cat-label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ember-soft); white-space:nowrap; }
.category-rail .cat-dots{ display:flex; gap:.4rem; }
.category-rail .cat-dot{ width:5px; height:5px; border-radius:50%; background:var(--hair); transition:background .3s var(--ease), transform .3s var(--ease); }
.category-rail .cat-dot.is-active{ background:var(--ember); transform:scale(1.4); }
@media (max-width:480px){ .category-rail{ bottom:14px; padding:.5rem .95rem; gap:.55rem; } .category-rail .cat-label{ font-size:.6rem; } }

/* ============================================================
   NAV — one constant treatment for the whole scroll. It never
   swaps to a solid bar, because nothing here is allowed to look
   like "a new page starting."
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:70; height:84px; display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(12,11,8,.5), transparent); backdrop-filter:blur(6px); }
.nav-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-inline:clamp(1.25rem,4vw,3rem); }
.wordmark{ font-family:var(--serif); font-size:1.5rem; letter-spacing:.02em; color:var(--paper); }
.nav-links{ display:flex; gap:2.1rem; }
.nav-links a{ font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(244,239,228,.82); position:relative; padding-bottom:4px; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ember-soft); transition:right .35s var(--ease); }
.nav-links a:hover{ color:var(--paper); } .nav-links a:hover::after{ right:0; }
.nav-cta{ font-family:var(--mono); font-size:.78rem; color:var(--paper); border:1px solid var(--hair); padding:.6rem 1.1rem; border-radius:999px; white-space:nowrap; }
.nav-cta:hover{ border-color:var(--ember-soft); background:rgba(217,154,108,.1); }
.nav-toggle{ display:none; background:none; border:0; color:var(--paper); font-size:1.4rem; z-index:80; position:relative; padding:.4rem; line-height:1; }
@media (max-width:860px){ .nav-links,.nav-cta{ display:none; } .nav-toggle{ display:block; } }
@media (max-width:480px){ .nav{ height:64px; } .wordmark{ font-size:1.25rem; } }

/* ============================================================
   MOBILE MENU — full-screen overlay opened by .nav-toggle on
   narrow viewports, since .nav-links/.nav-cta hide there.
   ============================================================ */
.mobile-menu{
  position:fixed; inset:0; z-index:68; background:rgba(12,11,8,.97); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4rem;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.mobile-menu-links{ display:flex; flex-direction:column; align-items:center; gap:1.7rem; }
.mobile-menu-links a{ font-family:var(--serif); font-size:clamp(1.6rem,7vw,2.2rem); color:var(--paper); }
.mobile-menu-cta{ font-family:var(--mono); font-size:.85rem; color:var(--paper); border:1px solid var(--hair); padding:.85rem 1.7rem; border-radius:999px; }

/* ============================================================
   BEATS — transparent moments stacked in normal document flow.
   Each one just holds text; the photograph belongs to the fixed
   canvas behind it, matched by data-bg.
   ============================================================ */
.journey{ position:relative; z-index:2; }
.beat{ min-height:100vh; display:flex; align-items:center; padding:0 clamp(1.25rem,4vw,4rem); }
.beat.tall{ min-height:150vh; align-items:flex-start; padding-top:32vh; }
.beat.center{ justify-content:center; text-align:center; }
.fade{ opacity:1; transform:translateY(0); will-change:opacity, transform; }

/* sub-beats (inside a category): the whole point is that these
   read as a second, distinct feel — content settles on the RIGHT
   side of the screen (mirroring the plain beats, which sit left),
   leaving the left side free for the static Category Heading. */
.beat[data-category]{ justify-content:flex-end; }
.tpl-name.sub{ text-align:right; margin-left:auto; }
/* the Altitude Line rail (64px wide, right:clamp(14px,2.4vw,34px), plus
   its own readout text) lives in this same right-hand edge on desktop —
   reserve clearance so a sub-beat's right-aligned heading/coord never
   overlaps the altitude readout. Not needed below 880px: the Altitude
   Line hides itself there. */
@media (min-width:881px){
  .beat[data-category]{ padding-right:calc(clamp(1.25rem,4vw,4rem) + 130px); }
}
@media (max-width:760px){
  .beat[data-category]{ justify-content:flex-start; }
  .tpl-name.sub{ text-align:left; margin-left:0; }
}

/* statement template: eyebrow + big serif line + short support */
.tpl-statement{ max-width:640px; }
.tpl-statement h2{ font-size:clamp(2.6rem,6.6vw,5.6rem); line-height:.98; margin-block:1rem 1.2rem; }
.tpl-statement h2 em{ display:block; font-style:italic; color:var(--ember-soft); }
.tpl-statement p{ font-size:1.05rem; color:var(--stone); max-width:44ch; line-height:1.65; }
.tpl-statement .facts{ margin-top:2rem; display:flex; gap:2rem; flex-wrap:wrap; }
.fact{ font-family:var(--mono); font-size:.72rem; color:var(--stone); border-left:1px solid var(--hair); padding-left:.8rem; }
.fact b{ display:block; font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--paper); font-weight:400; }
.cta-link{ margin-top:2rem; display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.85rem; padding-bottom:.3rem; border-bottom:1px solid var(--hair); transition:border-color .3s var(--ease), gap .3s var(--ease), color .3s var(--ease); }
.cta-link:hover{ border-color:var(--ember-soft); gap:.85em; color:var(--ember-soft); }
.hero-row{ display:flex; align-items:center; gap:2.5rem; flex-wrap:wrap; }
.scroll-cue{ font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; color:var(--stone); display:flex; align-items:center; gap:.6rem; }
.scroll-cue .bar{ width:1px; height:34px; background:linear-gradient(var(--ember-soft), transparent); animation:cueMove 2.4s ease-in-out infinite; }
@keyframes cueMove{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* name template: one place, one line, one coordinate */
.tpl-name{ max-width:560px; }
.tpl-name .index{ font-family:var(--mono); font-size:.7rem; color:var(--stone); }
.tpl-name h2{ font-size:clamp(3rem,9vw,7rem); line-height:.95; margin-block:.6rem; }
.tpl-name p{ font-size:1.05rem; color:var(--stone); }
.tpl-name .coord{ margin-top:1.4rem; font-family:var(--mono); font-size:.68rem; color:var(--stone-deep); letter-spacing:.04em; }

/* list template: sequential reveal inside one long beat, one photo */
.tpl-list{ max-width:620px; }
.tpl-list > .listhead{ margin-bottom:6vh; }
.tpl-list .item{ padding-block:3.5vh; border-top:1px solid var(--hair); }
.tpl-list .item:last-child{ border-bottom:1px solid var(--hair); }
.tpl-list .item .tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }
.tpl-list .item h4{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.7rem; margin-top:.3rem; }
.tpl-list .item p{ margin-top:.4rem; color:var(--stone); font-size:.94rem; max-width:46ch; }

/* ============================================================
   LEGIBILITY VEIL — a soft, feathered darkening anchored behind
   each text block instead of a flat scrim over the whole photo,
   so type stays readable without the image itself looking
   dimmed. Radial + blurred, so it reads as natural vignetting,
   not a box.
   ============================================================ */
.tpl-statement, .tpl-name, .tpl-list{ position:relative; isolation:isolate; }
.tpl-statement::before, .tpl-name::before, .tpl-list::before{
  content:""; position:absolute; z-index:-1; inset:-10% -12%;
  background:radial-gradient(ellipse 65% 60% at 28% 42%, rgba(8,7,5,.6) 0%, rgba(8,7,5,.38) 42%, rgba(8,7,5,0) 76%);
  filter:blur(6px); pointer-events:none;
}
.beat.center .tpl-statement::before{
  background:radial-gradient(ellipse 70% 62% at 50% 45%, rgba(8,7,5,.6) 0%, rgba(8,7,5,.38) 42%, rgba(8,7,5,0) 76%);
}
.tpl-name.sub::before{
  background:radial-gradient(ellipse 65% 60% at 72% 42%, rgba(8,7,5,.6) 0%, rgba(8,7,5,.38) 42%, rgba(8,7,5,0) 76%);
}
@media (max-width:760px){
  .tpl-name.sub::before{ background:radial-gradient(ellipse 65% 60% at 28% 42%, rgba(8,7,5,.6) 0%, rgba(8,7,5,.38) 42%, rgba(8,7,5,0) 76%); }
}

footer{ position:relative; z-index:2; padding-block:4rem 2rem; }
.footer-top{ display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; padding:0 clamp(1.25rem,4vw,4rem) 3rem; border-bottom:1px solid var(--hair); }
.footer-brand .wordmark{ font-size:2rem; }
.footer-brand p{ margin-top:1rem; max-width:38ch; color:var(--stone); font-size:.95rem; }
.footer-cols{ display:flex; gap:4rem; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-deep); margin-bottom:1rem; }
.footer-col a{ display:block; font-size:.92rem; color:var(--stone); padding-block:.35rem; }
.footer-col a:hover{ color:var(--paper); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.8rem clamp(1.25rem,4vw,4rem) 0; }
.footer-bottom p{ font-family:var(--mono); font-size:.68rem; color:var(--stone-deep); }

/* ============================================================
   SMALL-SCREEN TUNING — the .tall beats reserve extra scroll
   room for the parallax reveal, which reads fine on desktop but
   pushes content too far down a short mobile viewport; and a
   few gaps/paddings are trimmed so nothing crowds at the edges.
   ============================================================ */
@media (max-width:640px){
  .beat.tall{ min-height:auto; padding-top:16vh; padding-bottom:10vh; }
  .tpl-list .item{ padding-block:2.6vh; }
  .tpl-statement .facts{ gap:1.2rem; }
  .hero-row{ gap:1.4rem; }
  .footer-top{ gap:2rem; }
  .footer-cols{ gap:2.4rem; }
}
@media (max-width:380px){
  .tpl-name h2{ font-size:clamp(2.4rem,11vw,7rem); }
}