/* ── Tripo Saints · cinematic scroll story ──
   The film: a fixed stage (canvas) plays the 3D India while scroll advances the story.
   Text arrives in beats. Every value is a token. If JS is absent or motion is reduced,
   the acts stack as a readable page — the story survives without the cinema. */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--f-text);background:var(--c-stage);color:var(--c-ink);
     font-size:var(--fs-body);line-height:var(--lh-text);overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-s);}
.skip{position:absolute;left:-9999px;top:0;background:var(--c-ink);color:var(--c-stage);
      padding:var(--sp-1) var(--sp-2);z-index:300;border-radius:0 0 var(--r-s) 0;font-weight:700;}
.skip:focus{left:0;}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad);}
/* header floats over the film */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;
    background:linear-gradient(rgba(11,12,10,.82),transparent);}
.hd-in{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;}
.hd-logo{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;font-size:var(--fs-small);}
.hd-logo img{width:30px;height:30px;border-radius:8px;}
.hd-nav{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center;}
.hd-nav a{color:var(--c-ink-dim);text-decoration:none;font-size:var(--fs-small);font-weight:600;}
.hd-nav a:hover{color:var(--c-ink);}
.hd-cta{background:var(--c-accent);color:#fff;text-decoration:none;font-weight:700;
        font-size:var(--fs-small);padding:.6em 1.4em;border-radius:999px;}
.hd-cta:hover{background:var(--c-accent-deep);}
/* ── the film ── */
.film{position:relative;}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
.stage canvas{display:block;width:100%;height:100%;}
.stage-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 62%,transparent 40%,rgba(11,12,10,.55) 100%);}
.acts{position:relative;z-index:2;margin-top:-100vh;}
.act{min-height:130vh;display:grid;place-items:center;padding:var(--sp-6) var(--page-pad);}
.act--tall{min-height:170vh;}
.beat{max-width:min(88vw,640px);text-align:center;opacity:0;transform:translateY(var(--m-rise));
      transition:opacity var(--m-slow) var(--m-ease),transform var(--m-slow) var(--m-ease);}
.beat.on{opacity:1;transform:none;}
.beat .kicker{letter-spacing:var(--track-caps);text-transform:uppercase;font-size:var(--fs-tiny);
      font-weight:700;color:var(--c-ember);}
.beat h1,.beat h2{font-family:var(--f-display);font-weight:600;font-size:var(--fs-beat);
      line-height:var(--lh-tight);margin:var(--sp-2) 0;}
.beat .mega{font-size:var(--fs-mega);}
.beat--mega{max-width:min(94vw,980px);}
.beat p{color:var(--c-ink-dim);font-size:var(--fs-lead);max-width:var(--measure-narrow);margin:0 auto;}
.beat .cta-row{display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-3);flex-wrap:wrap;}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:999px;
     padding:.9em 1.9em;font-size:var(--fs-small);transition:transform var(--m-fast) var(--m-ease),background var(--m-fast);}
.btn-primary{background:var(--c-accent);color:#fff;box-shadow:var(--glow-ember);}
.btn-primary:hover{background:var(--c-accent-deep);transform:translateY(-2px);}
.btn-ghost{border:1.5px solid var(--c-line);color:var(--c-ink);}
.btn-ghost:hover{border-color:var(--c-ink-dim);}
/* photography moments — floating cards inside the film */
.moment{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-soft);
        max-width:min(520px,84vw);margin:var(--sp-3) auto 0;}
.moment img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.moment figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-4) var(--sp-3) var(--sp-2);
  color:var(--c-ink);font-size:var(--fs-small);background:linear-gradient(transparent,rgba(0,0,0,.7));}
/* journeys gallery act */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);max-width:var(--page-max);width:100%;}
.card{position:relative;border-radius:var(--r-m);overflow:hidden;text-decoration:none;display:block;
      box-shadow:var(--shadow-soft);}
.card img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform 1s var(--m-ease);}
.card:hover img,.card:focus-visible img{transform:scale(1.05);}
.card-body{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-5) var(--sp-3) var(--sp-3);
  background:linear-gradient(transparent,rgba(0,0,0,.78));}
.card-body b{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h3);display:block;}
.card-body span{font-size:var(--fs-small);color:var(--c-ink-dim);}
/* ── after the film: flat reading sections (destinations pages share these) ── */
.sec{padding:var(--sp-6) 0;position:relative;z-index:2;background:var(--c-stage);}
.prose{max-width:var(--measure);color:var(--c-ink-dim);}
.prose p+p{margin-top:var(--sp-2);}
.chapter{display:grid;grid-template-columns:170px 1fr;gap:var(--sp-4);
         padding:var(--sp-5) 0;border-top:1px solid var(--c-line);}
.chapter:first-of-type{border-top:none;}
.chapter-n{font-family:var(--f-display);color:var(--c-ember);font-size:var(--fs-h3);}
.chapter-n small{display:block;font-family:var(--f-text);color:var(--c-ink-faint);font-size:var(--fs-tiny);
  letter-spacing:var(--track-caps);text-transform:uppercase;margin-top:6px;}
.chapter h3{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h3);margin-bottom:var(--sp-2);color:var(--c-ink);}
.fact-list{list-style:none;display:grid;gap:var(--sp-1);}
.fact-list li{display:grid;grid-template-columns:160px 1fr;gap:var(--sp-2);padding:var(--sp-1) 0;
  border-bottom:1px dashed var(--c-line);font-size:var(--fs-small);color:var(--c-ink-dim);}
.fact-list b{color:var(--c-ink-faint);font-weight:600;}
.dest-hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;}
.dest-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dest-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--c-stage) 2%,rgba(11,12,10,.45) 50%,rgba(11,12,10,.5) 100%);}
.dest-hero .wrap{position:relative;z-index:2;padding-bottom:var(--sp-5);width:100%;}
.dest-hero h1{font-family:var(--f-display);font-weight:600;font-size:var(--fs-mega);line-height:var(--lh-tight);}
.dest-hero .lead{color:var(--c-ink-dim);font-size:var(--fs-lead);margin-top:var(--sp-1);}
.kicker{letter-spacing:var(--track-caps);text-transform:uppercase;font-size:var(--fs-tiny);
        font-weight:700;color:var(--c-ember);}
.credit{position:absolute;right:var(--page-pad);bottom:var(--sp-2);z-index:2;
        font-size:var(--fs-tiny);color:var(--c-ink-faint);}
/* footer */
.ft{border-top:1px solid var(--c-line);padding:var(--sp-4) 0 var(--sp-5);
    font-size:var(--fs-small);color:var(--c-ink-faint);position:relative;z-index:2;background:var(--c-stage);}
.ft-in{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;}
.ft a{text-decoration:none;}
.ft a:hover{color:var(--c-ember);}
.ft .cr{margin-left:auto;}
/* reveal (reading sections) — scoped to html.js so nothing hides without JS */
.js .reveal{opacity:0;transform:translateY(var(--m-rise));
        transition:opacity var(--m-slow) var(--m-ease),transform var(--m-slow) var(--m-ease);}
.js .reveal.in{opacity:1;transform:none;}
/* beats likewise: only the cinema hides them */
html:not(.js) .beat{opacity:1;transform:none;}
/* ── responsive: redesigned per breakpoint ── */
@media (max-width:900px){
  .gallery{grid-template-columns:1fr;max-width:440px;}
  .chapter{grid-template-columns:1fr;gap:var(--sp-2);}
  .act{min-height:118vh;}
  .act--tall{min-height:150vh;}
  .hd-nav a:not(.hd-cta){display:none;}
}
@media (max-width:560px){
  .fact-list li{grid-template-columns:1fr;gap:2px;}
}
/* ── reduced motion: the film becomes a still — everything readable, nothing moves ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .beat,.js .reveal{opacity:1;transform:none;transition:none;}
  .card img,.btn{transition:none;}
  .act,.act--tall{min-height:0;padding:var(--sp-5) var(--page-pad);}
  .acts{margin-top:0;}
  .stage{position:relative;height:52vh;}
}