/* THE RIDGE, MASHOBRA — shared design system.
   Drawn from the brochure: cream paper, oxblood wine, Trajan-style serif,
   topographic contours, photography given room to breathe. */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#F3EEE6; --cream2:#ECE5D8; --paper:#F7F3EC;
  --wine:#5E1230; --wine2:#4A0D26; --winesoft:rgba(94,18,48,.08);
  --ink:#54464A; --ink2:#7A6A6E; --gold:#C9A15A; --goldhi:#E9C88F;
  --serif:'Marcellus',serif; --ital:'Cormorant Garamond',serif; --sans:'Jost',sans-serif;
}
html{overflow-x:clip}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden}
::selection{background:var(--wine);color:var(--cream)}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- film grain, very quiet ---------- */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:96;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}

/* ---------- progress hairline ---------- */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--wine);z-index:99;width:0}

/* ---------- navigation ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:26px;
    padding:16px 34px;background:linear-gradient(180deg,rgba(243,238,230,.94),rgba(243,238,230,.78));
    backdrop-filter:blur(10px);border-bottom:1px solid rgba(94,18,48,.12);
    transition:transform .45s cubic-bezier(.2,.7,.2,1)}
nav.hid{transform:translateY(-102%)}
nav .mark{font-family:var(--serif);font-size:17px;color:var(--wine);letter-spacing:3px;margin-right:auto;
          text-decoration:none;white-space:nowrap}
nav .mark small{display:block;font-size:8.5px;letter-spacing:4.5px;color:var(--ink2);margin-top:1px}
nav a.lnk{color:var(--ink2);text-decoration:none;font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
      position:relative;padding:4px 0;transition:color .25s;white-space:nowrap}
nav a.lnk::after{content:'';position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--wine);transition:width .3s}
nav a.lnk:hover{color:var(--wine)}
nav a.lnk:hover::after{width:100%}
nav a.lnk.on{color:var(--wine)}
nav a.lnk.on::after{width:100%}
@media(max-width:900px){
  nav{gap:16px;padding:12px 16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav .mark{font-size:14px;letter-spacing:2px}
  nav .mark small{font-size:7px;letter-spacing:3px}
  nav a.lnk{font-size:10.5px;letter-spacing:1.6px}
}

/* ---------- glide scaffolding ---------- */
#smooth.gliding{position:fixed;top:0;left:0;width:100%;will-change:transform;z-index:2}
section{position:relative}
.wrap{max-width:1120px;margin:0 auto;padding:110px 30px 90px;position:relative;z-index:2}

/* ---------- type ---------- */
.kicker{font-size:12.5px;letter-spacing:5px;text-transform:uppercase;color:var(--wine);margin-bottom:16px;font-weight:400}
.title{font-family:var(--serif);font-size:clamp(34px,4.6vw,54px);line-height:1.12;color:var(--wine);
       letter-spacing:2px;text-transform:uppercase;margin-bottom:22px;font-weight:400}
.lede{font-size:17.5px;line-height:1.75;color:var(--ink);max-width:620px}
.lede em,.poem em{font-family:var(--ital);font-style:italic}
.poem{font-family:var(--ital);font-style:italic;font-size:clamp(21px,2.4vw,28px);line-height:1.6;color:var(--wine);max-width:700px}
.note{font-size:11px;letter-spacing:1.5px;color:var(--ink2);text-transform:uppercase}

/* ---------- hero ---------- */
#hero{height:100vh;min-height:600px;display:flex;align-items:flex-end;overflow:hidden}
#herobg{position:absolute;inset:-10% 0 0 0;background-size:cover;background-position:center;
        will-change:transform;animation:heroin 2.4s cubic-bezier(.2,.7,.2,1)}
@keyframes heroin{from{transform:scale(1.07)}to{transform:scale(1)}}
#hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,8,18,.18) 0%,rgba(30,8,18,.04) 40%,rgba(30,8,18,.52) 100%)}
#hero .inner{position:relative;z-index:3;width:100%;max-width:1120px;margin:0 auto;padding:0 30px 100px;color:#F7F3EC}
#hero .eyebrow{font-size:13px;letter-spacing:6px;text-transform:uppercase;color:var(--goldhi);margin-bottom:18px}
#hero h1{font-family:var(--serif);font-size:clamp(38px,6.4vw,84px);line-height:1.08;letter-spacing:3px;
         text-transform:uppercase;font-weight:400;text-shadow:0 2px 30px rgba(20,5,12,.45)}
#hero .sub{margin-top:18px;font-size:16.5px;letter-spacing:.5px;line-height:1.7;max-width:560px;color:rgba(247,243,236,.92)}
#hero .cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:3.5px;
           text-transform:uppercase;color:rgba(247,243,236,.85);animation:cueFloat 2.6s ease-in-out infinite}
@keyframes cueFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.pagehero{height:78vh;min-height:480px}
.pagehero .inner{padding-bottom:76px}

/* ---------- wine chapter dividers with drifting contours ---------- */
.divider{background:var(--wine2);color:#F1E7DC;overflow:hidden}
.divider .wrap{padding:130px 30px;text-align:center}
.divider .dk{font-size:11.5px;letter-spacing:6px;text-transform:uppercase;color:var(--goldhi);margin-bottom:22px}
.divider h2{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);letter-spacing:4px;text-transform:uppercase;
            font-weight:400;line-height:1.3}
.divider .dsub{margin-top:20px;font-family:var(--ital);font-style:italic;font-size:19px;color:rgba(241,231,220,.85)}
.contours{position:absolute;inset:0;z-index:1;opacity:.5;overflow:hidden}
.contours svg{width:120%;height:100%;margin-left:-10%;animation:contourDrift 46s ease-in-out infinite alternate}
@keyframes contourDrift{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
.contours path{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.2}
.divider .wrap{position:relative;z-index:2}

/* ---------- full-bleed photography ---------- */
.photo{position:relative;height:82vh;min-height:440px;overflow:hidden}
.photo .img{position:absolute;inset:0;background-size:cover;background-position:center;
            animation:kenburns 44s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02) translateX(1%)}to{transform:scale(1.1) translateX(-1%)}}
.photo .img::before,.photo .img::after{content:'';position:absolute;inset:-15% -40%;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(38% 20% at 26% 30%,rgba(247,243,236,.14),transparent 70%),
             radial-gradient(28% 15% at 64% 16%,rgba(247,243,236,.10),transparent 70%);
  animation:mistA 64s ease-in-out infinite alternate}
.photo .img::after{
  background:radial-gradient(34% 18% at 70% 72%,rgba(247,243,236,.10),transparent 70%);
  animation:mistB 88s ease-in-out infinite alternate-reverse}
@keyframes mistA{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
@keyframes mistB{from{transform:translateX(4%) translateY(1.5%)}to{transform:translateX(-4%) translateY(-1.5%)}}
.photo .cap{position:absolute;right:18px;bottom:14px;z-index:3;font-family:var(--ital);font-style:italic;
            font-size:12.5px;color:rgba(247,243,236,.9);text-shadow:0 1px 8px rgba(20,5,12,.6)}
.photo .say{position:absolute;left:6%;top:14%;z-index:3;font-family:var(--serif);letter-spacing:3px;
            text-transform:uppercase;font-size:clamp(17px,2.1vw,26px);line-height:1.5;color:#F7F3EC;
            text-shadow:0 2px 24px rgba(20,5,12,.55);max-width:520px}
.photo.short{height:62vh;min-height:360px}

/* ---------- stat counters ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:34px 22px;margin-top:52px}
.stats .st{text-align:center}
.stats .n{font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);color:var(--wine);line-height:1}
.stats .n small{font-size:.55em}
.stats .l{margin-top:10px;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ink2);line-height:1.6}

/* ---------- editorial split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split .ph{position:relative;overflow:hidden;border-radius:2px}
.split .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.split .ph:hover img{transform:scale(1.045)}
.split .ph .cap{position:absolute;right:12px;bottom:10px;font-family:var(--ital);font-style:italic;
                font-size:11.5px;color:rgba(247,243,236,.92);text-shadow:0 1px 8px rgba(20,5,12,.6)}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}}

/* ---------- item lists (brochure bullet spreads) ---------- */
.plainlist{columns:2;column-gap:56px;margin-top:30px}
.plainlist li{list-style:none;padding:9px 0 9px 22px;position:relative;font-size:15px;letter-spacing:.4px;
              color:var(--ink);border-bottom:1px solid rgba(94,18,48,.08);break-inside:avoid}
.plainlist li::before{content:'';position:absolute;left:2px;top:16px;width:7px;height:7px;
                      border:1px solid var(--wine);transform:rotate(45deg)}
@media(max-width:700px){.plainlist{columns:1}}

/* ---------- numbered principles ---------- */
.numbers .row{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid rgba(94,18,48,.1)}
.numbers .no{font-family:var(--serif);font-size:30px;color:var(--gold)}
.numbers h4{font-family:var(--serif);font-size:19px;letter-spacing:1.5px;color:var(--wine);margin-bottom:8px;font-weight:400}
.numbers p{font-size:15px;line-height:1.7;color:var(--ink)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:44px}
.card{background:var(--paper);border:1px solid rgba(94,18,48,.1);padding:34px 28px;position:relative;
      transition:transform .4s,box-shadow .4s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(94,18,48,.1)}
.card h4{font-family:var(--serif);font-size:17px;letter-spacing:1.6px;color:var(--wine);margin-bottom:12px;font-weight:400}
.card p{font-size:14.5px;line-height:1.7;color:var(--ink)}
.card .cno{position:absolute;top:18px;right:20px;font-family:var(--ital);font-style:italic;font-size:15px;color:var(--gold)}

/* ---------- chapter tiles (home) ---------- */
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:50px}
.chap{position:relative;height:380px;overflow:hidden;text-decoration:none;display:block;border-radius:2px}
.chap .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}
.chap:hover .bg{transform:scale(1.06)}
.chap .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,8,18,.05) 30%,rgba(30,8,18,.68) 100%)}
.chap .tx{position:absolute;left:24px;right:24px;bottom:24px;color:#F7F3EC}
.chap .tk{font-size:9.5px;letter-spacing:3.5px;text-transform:uppercase;color:var(--goldhi);margin-bottom:8px}
.chap h3{font-family:var(--serif);font-size:21px;letter-spacing:2px;text-transform:uppercase;font-weight:400;line-height:1.35;min-height:2.7em;display:flex;flex-direction:column;justify-content:flex-end}
.chap .go{margin-top:10px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(247,243,236,.75);min-height:4.2em}
.chap:hover .go{color:var(--goldhi)}

/* ---------- comparison ---------- */
.alps{margin-top:44px}
.alps .arow{display:grid;grid-template-columns:150px 1fr 90px;gap:16px;align-items:center;padding:15px 0;
            border-bottom:1px solid rgba(94,18,48,.1)}
.alps .aname{font-family:var(--serif);font-size:16px;letter-spacing:1.5px;color:var(--ink)}
.alps .arow.ridge .aname,.alps .arow.ridge .aval{color:var(--wine);font-weight:400}
.alps .atrack{height:10px;background:rgba(94,18,48,.07);border-radius:4px;overflow:hidden}
.alps .afill{height:100%;width:0;background:linear-gradient(90deg,rgba(94,18,48,.45),var(--wine));border-radius:4px;
             transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.alps .arow.ridge .afill{background:linear-gradient(90deg,var(--gold),var(--wine))}
.alps .aval{font-family:var(--serif);font-size:15px;color:var(--ink2);text-align:right}
@media(max-width:700px){.alps .arow{grid-template-columns:96px 1fr 74px;gap:10px}.alps .aname{font-size:13px}}

/* ---------- drive times ---------- */
.drives{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:40px}
.drv{background:var(--paper);border:1px solid rgba(94,18,48,.1);padding:20px 22px;display:flex;
     justify-content:space-between;align-items:baseline;gap:10px}
.drv .d{font-size:14px;letter-spacing:.5px;color:var(--ink)}
.drv .t{font-family:var(--serif);font-size:15px;color:var(--wine);white-space:nowrap}

/* ---------- CTA band ---------- */
.cta{background:var(--wine2);color:#F1E7DC;text-align:center;overflow:hidden}
.cta .wrap{padding:120px 30px}
.cta h2{font-family:var(--serif);font-size:clamp(24px,3.4vw,40px);letter-spacing:3.5px;text-transform:uppercase;
        font-weight:400;line-height:1.4}
.cta .dsub{margin-top:18px;font-family:var(--ital);font-style:italic;font-size:19px;color:rgba(241,231,220,.85)}
.cta .btn{display:inline-block;margin-top:38px;padding:15px 44px;border:1px solid var(--goldhi);color:var(--goldhi);
          text-decoration:none;font-size:12px;letter-spacing:3.5px;text-transform:uppercase;transition:background .3s,color .3s}
.cta .btn:hover{background:var(--goldhi);color:var(--wine2)}

/* ---------- footer ---------- */
footer{background:#3D0A20;color:rgba(241,231,220,.7);font-size:12px;letter-spacing:.6px;line-height:1.9}
footer .wrap{padding:56px 30px 42px;display:grid;grid-template-columns:1fr auto;gap:30px}
footer .fmark{font-family:var(--serif);font-size:19px;letter-spacing:3px;color:#F1E7DC}
footer .fmark small{display:block;font-size:8.5px;letter-spacing:4.5px;color:rgba(241,231,220,.55);margin-top:3px}
footer .legal{margin-top:16px;max-width:640px;font-size:11px;color:rgba(241,231,220,.55)}
footer .fl{display:flex;flex-direction:column;gap:6px;text-align:right}
footer .fl a{color:rgba(241,231,220,.75);text-decoration:none;font-size:11.5px;letter-spacing:2px;text-transform:uppercase}
footer .fl a:hover{color:var(--goldhi)}
@media(max-width:700px){footer .wrap{grid-template-columns:1fr}footer .fl{text-align:left}}

/* ---------- altimeter + ascent hill + sound (site signatures) ---------- */
#alti{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;
      background:rgba(247,243,236,.88);backdrop-filter:blur(10px);border:1px solid rgba(94,18,48,.22);
      border-radius:40px;padding:9px 18px 9px 12px;opacity:0;transform:translateY(14px);animation:altin 1s 1.6s forwards}
#alti svg{width:20px;height:20px}
#alti .ft{font-family:var(--serif);font-size:17px;color:var(--wine);min-width:74px}
#alti .lbl{font-size:8.5px;letter-spacing:2px;color:var(--ink2);text-transform:uppercase}
#alti.summit{border-color:var(--gold);box-shadow:0 0 24px rgba(201,161,90,.45)}
@keyframes altin{to{opacity:1;transform:translateY(0)}}
#alti.pulse{animation:altipulse .6s}
@keyframes altipulse{30%{transform:scale(1.08)}}

#climb{position:fixed;right:0;bottom:0;height:50vh;z-index:59;opacity:0;animation:altin 1s 2s forwards;pointer-events:none}
#climb svg{height:100%;width:auto;display:block;overflow:visible}
#climb .hillfill{fill:rgba(94,18,48,.05)}
#climb .trail{stroke:rgba(94,18,48,.22);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
#climb .done{stroke:var(--wine);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
             filter:drop-shadow(0 0 4px rgba(201,161,90,.5))}
#climb .peaklbl{font-size:9.5px;letter-spacing:1.8px;fill:var(--ink2);font-family:'Jost',sans-serif}
#climb.summit .peaklbl{fill:var(--wine)}
#climb .dot{fill:var(--gold)}
#climb .halo{fill:none;stroke:rgba(201,161,90,.6);stroke-width:1;animation:haloPulse 2.4s ease-in-out infinite}
@keyframes haloPulse{0%,100%{opacity:.15}50%{opacity:.7}}

#snd{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;justify-content:center;
     width:44px;height:44px;padding:0;background:rgba(247,243,236,.88);backdrop-filter:blur(10px);
     border:1px solid rgba(94,18,48,.22);border-radius:50%;cursor:pointer;transition:border-color .3s;
     opacity:0;transform:translateY(14px);animation:altin 1s 1.7s forwards}
#snd:hover{border-color:var(--wine)}
#snd svg{width:20px;height:20px;display:block}
#snd .horn{stroke:var(--ink2);fill:none;transition:stroke .3s}
#snd.on .horn{stroke:var(--wine)}
#snd .wave{stroke:var(--wine);fill:none;opacity:0;transition:opacity .3s}
#snd.on .wave.w1{animation:wv 1.6s ease-in-out infinite}
#snd.on .wave.w2{animation:wv 1.6s ease-in-out .35s infinite}
@keyframes wv{0%,100%{opacity:.35}50%{opacity:1}}
#snd .mute{stroke:var(--ink2);opacity:1;transition:opacity .3s}
#snd.on .mute{opacity:0}

#builtby{position:fixed;right:74px;bottom:26px;z-index:60;font-size:9.5px;letter-spacing:2.5px;
         text-transform:uppercase;color:var(--wine);border:1px solid rgba(94,18,48,.22);
         background:rgba(247,243,236,.82);backdrop-filter:blur(8px);border-radius:30px;padding:7px 14px;
         opacity:0;animation:altin 1s 2.2s forwards;pointer-events:none}

/* ---------- interactive: city vs ridge duel ---------- */
.citychips{display:flex;flex-wrap:wrap;gap:11px;margin-top:36px}
.chip{padding:10px 20px;border:1px solid rgba(94,18,48,.3);border-radius:30px;background:transparent;
      color:var(--ink);font-family:var(--sans);font-size:14px;letter-spacing:.8px;cursor:pointer;
      transition:transform .2s,border-color .25s,color .25s,background .25s}
.chip:hover{border-color:var(--wine);color:var(--wine);transform:translateY(-2px)}
.chip.active{background:var(--wine);color:var(--cream);border-color:var(--wine);font-weight:400}
@media(max-width:768px){
  .citychips{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-top:24px;padding-bottom:12px;
             scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
             mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .citychips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:8px 15px;font-size:12.5px}
}
.vslayout{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;margin-top:44px}
@media(max-width:900px){.vslayout{grid-template-columns:1fr}}
#vsmapbox{background:var(--wine2);border-radius:4px;padding:18px 10px 8px;overflow:hidden}
#vsmap{width:100%;display:block}
#vsmap .ring{fill:none;stroke:rgba(241,231,220,.12)}
#vsmap .cdot{fill:rgba(241,231,220,.5);cursor:pointer;transition:fill .3s}
#vsmap .cdot:hover{fill:var(--goldhi)}
#vsmap .cdot.sel{fill:var(--goldhi)}
#vsmap .clbl{font-size:9px;letter-spacing:1px;fill:rgba(241,231,220,.45);font-family:'Jost',sans-serif;pointer-events:none}
#vsmap .clbl.sel{fill:var(--goldhi)}
#vsmap .arc{fill:none;stroke:url(#arcgrad);stroke-width:1.6;opacity:0}
#vsmap .arc.on{opacity:1}
#vsmap .kmlbl{font-size:10.5px;letter-spacing:1px;fill:var(--goldhi);font-family:'Marcellus',serif;opacity:0;transition:opacity .5s .5s}
#vsmap .kmlbl.on{opacity:1}
#vsprompt{margin-top:34px;font-family:var(--ital);font-style:italic;font-size:20px;color:var(--ink2)}
#vsgrid{display:none}
#vsgrid.on{display:block}
.duo{margin-bottom:22px}
.duo .dl{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.duorow{display:grid;grid-template-columns:92px 1fr 110px;gap:12px;align-items:center;padding:4px 0}
.duoname{font-size:12.5px;letter-spacing:1px;color:var(--ink2);text-transform:uppercase}
.duotrack{height:20px;background:rgba(94,18,48,.07);border-radius:4px;overflow:hidden}
.duofill{height:100%;width:0;border-radius:4px;transition:width 1.3s cubic-bezier(.2,.7,.2,1)}
.duofill.city{background:#A88B90}
.duofill.ridge{background:linear-gradient(90deg,var(--gold),var(--wine))}
.duoval{font-family:var(--serif);font-size:15px;color:var(--ink);text-align:right}
.duorow.ridge .duoname,.duorow.ridge .duoval{color:var(--wine)}
#vsverdict{margin-top:26px;font-family:var(--ital);font-style:italic;font-size:clamp(17px,2vw,21px);color:var(--wine);line-height:1.55}
@media(max-width:768px){.duorow{grid-template-columns:70px 1fr 88px;gap:8px}.duoname{font-size:10.5px}}

/* ---------- interactive: night sky ---------- */
#skyband{background:linear-gradient(180deg,var(--cream) 0%,#140A12 14%,#140A12 86%,var(--cream) 100%)}
#skyband .wrap{padding:130px 30px 110px}
#skyband .kicker{color:var(--goldhi)}
#skyband .title{color:#F1E7DC}
#skyband .lede{color:rgba(241,231,220,.8)}
#skycanvas{display:block;width:100%;height:clamp(280px,42vh,460px);cursor:crosshair;margin-top:36px;position:relative;z-index:2}
.skychips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.skychips .chip{border-color:rgba(233,200,143,.4);color:rgba(241,231,220,.85)}
.skychips .chip:hover{border-color:var(--goldhi);color:var(--goldhi)}
.skychips .chip.active{background:var(--goldhi);color:#140A12;border-color:var(--goldhi)}
#skynote{margin-top:18px;min-height:52px;font-family:var(--ital);font-style:italic;font-size:18px;color:var(--goldhi)}

/* ---------- interactive: found vs imagined slider ---------- */
.compare{position:relative;margin-top:44px;border-radius:4px;overflow:hidden;aspect-ratio:16/9;user-select:none;touch-action:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare .top{clip-path:inset(0 calc(100% - var(--cx,50%)) 0 0)}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--cx,50%);width:2px;background:var(--goldhi);z-index:3;
              box-shadow:0 0 14px rgba(233,200,143,.7)}
.compare .knob{position:absolute;top:50%;left:var(--cx,50%);transform:translate(-50%,-50%);z-index:4;
               width:46px;height:46px;border-radius:50%;background:var(--wine2);border:1.5px solid var(--goldhi);
               display:flex;align-items:center;justify-content:center;color:var(--goldhi);font-size:14px;letter-spacing:2px;cursor:ew-resize}
.compare .tag{position:absolute;bottom:12px;z-index:3;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
              color:rgba(247,243,236,.92);text-shadow:0 1px 8px rgba(20,5,12,.7);pointer-events:none}
.compare .tag.l{left:16px}.compare .tag.r{right:16px}

/* ---------- interactive: the story quiz ---------- */
#quizbox{margin-top:44px;background:var(--paper);border:1px solid rgba(94,18,48,.12);padding:40px 36px;border-radius:4px}
#quizbox .qk{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink2);margin-bottom:14px}
#quizbox .qq{font-family:var(--serif);font-size:clamp(19px,2.4vw,25px);color:var(--wine);line-height:1.45;margin-bottom:24px}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.qopts{grid-template-columns:1fr}}
.qopt{padding:16px 18px;border:1px solid rgba(94,18,48,.22);background:transparent;text-align:left;
      font-family:var(--sans);font-size:15px;color:var(--ink);cursor:pointer;border-radius:3px;
      transition:border-color .25s,background .25s,transform .2s}
.qopt:hover{border-color:var(--wine);transform:translateY(-2px)}
.qopt.good{background:var(--wine);border-color:var(--wine);color:var(--cream)}
.qopt.bad{border-color:#A85B47;color:#A85B47;text-decoration:line-through}
.qopt:disabled{cursor:default}
#quizfact{margin-top:20px;font-family:var(--ital);font-style:italic;font-size:17px;color:var(--wine);min-height:26px}
#quiznext{margin-top:22px;display:none;padding:12px 32px;border:1px solid var(--wine);background:transparent;color:var(--wine);
          font-size:11.5px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;border-radius:3px;transition:background .3s,color .3s}
#quiznext:hover{background:var(--wine);color:var(--cream)}
#quizscore{font-family:var(--serif);font-size:clamp(22px,3vw,30px);color:var(--wine);letter-spacing:1px}

/* ---------- fact drops ---------- */
#facttoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%) scale(.9);z-index:70;
  background:linear-gradient(135deg,#E9C88F,#D9B571);color:var(--wine2);
  border:1.5px solid var(--wine);border-radius:6px;
  padding:15px 24px;max-width:min(440px,86vw);text-align:center;pointer-events:none;
  box-shadow:0 16px 44px rgba(61,10,32,.4),0 0 34px rgba(233,200,143,.55);
  transition:transform .55s cubic-bezier(.2,.9,.25,1.2),opacity .4s;opacity:0}
#facttoast.on{transform:translate(-50%,0) scale(1);opacity:1;animation:factglow 2.2s ease-in-out infinite}
@keyframes factglow{0%,100%{box-shadow:0 16px 44px rgba(61,10,32,.4),0 0 26px rgba(233,200,143,.45)}
  50%{box-shadow:0 16px 44px rgba(61,10,32,.4),0 0 52px rgba(233,200,143,.85)}}
#facttoast .ftk{font-size:9.5px;letter-spacing:3px;color:var(--wine);margin-bottom:6px;font-weight:500}
#facttoast .ftx{font-family:var(--ital);font-style:italic;font-size:16px;line-height:1.5;font-weight:500}
@media(max-width:768px){#facttoast{bottom:70px;padding:11px 16px}#facttoast .ftx{font-size:13.5px}}

/* ---------- fact marquee ---------- */
.tick{overflow:hidden;white-space:nowrap;padding:18px 0;border-top:1px solid rgba(94,18,48,.14);
      border-bottom:1px solid rgba(94,18,48,.14);background:var(--cream2)}
.tick .in{display:inline-block;animation:tickmove 46s linear infinite;
  font-family:var(--serif);font-size:13.5px;letter-spacing:3.5px;color:var(--wine);text-transform:uppercase}
.tick:hover .in{animation-play-state:paused}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- summit pass ---------- */
#passchip{position:fixed;left:20px;bottom:74px;z-index:61;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--wine2);color:#F1E7DC;border:1px solid rgba(233,200,143,.4);border-radius:12px;
  padding:8px 16px;cursor:pointer;opacity:0;transform:translateY(14px);animation:altin 1s 2.4s forwards;
  transition:box-shadow .3s;font-family:var(--sans)}
#passchip:hover{box-shadow:0 8px 26px rgba(61,10,32,.35)}
#passchip .pc1{font-size:8px;letter-spacing:2.5px;color:var(--goldhi)}
#passchip .pc2{font-family:var(--serif);font-size:16px;letter-spacing:1px}
#passchip.pop{animation:passpop .6s}
@keyframes passpop{30%{transform:scale(1.12)}}
#passpanel{position:fixed;left:20px;bottom:132px;z-index:62;width:min(320px,86vw);
  background:var(--paper);border:1px solid rgba(94,18,48,.2);border-radius:6px;
  box-shadow:0 24px 60px rgba(61,10,32,.25);padding:20px 20px 14px;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s}
#passpanel.on{opacity:1;pointer-events:auto;transform:translateY(0)}
#passpanel .pph{font-family:var(--serif);font-size:17px;letter-spacing:2px;color:var(--wine);text-transform:uppercase}
#passpanel .ppsub{font-size:12px;color:var(--ink2);margin:6px 0 12px;line-height:1.5}
.pprow{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:1px solid rgba(94,18,48,.08);
  text-decoration:none;color:var(--ink)}
.pprow b{display:block;font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:1px;color:var(--ink)}
.pprow i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.5px;color:var(--ink2)}
.pprow .ppstamp{width:26px;height:26px;border-radius:50%;border:1px solid rgba(94,18,48,.25);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink2);flex:0 0 auto}
.pprow.got .ppstamp{background:var(--wine);border-color:var(--wine);color:var(--goldhi)}
.pprow.got b{color:var(--wine)}
#passwin{display:none;margin-top:12px;padding:10px;text-align:center;background:var(--wine);color:var(--goldhi);
  border-radius:4px;font-family:var(--serif);font-size:13px;letter-spacing:2px}
#passwin.on{display:block}
@media(max-width:768px){#passchip{left:12px;bottom:64px;padding:6px 12px}
  #passchip .pc2{font-size:14px}#passpanel{left:12px;bottom:116px}}

/* ---------- mini-games shared: they must read as PLAYABLE from a scroll away.
   the glow/pulse effects below animate only opacity, transform and border-color —
   never box-shadow spread — so they stay cheap and don't fight the scroll engine. ---------- */
.game{position:relative;margin-top:44px;border-radius:8px;overflow:hidden;background:var(--wine2);
  border:2px solid rgba(233,200,143,.4);box-shadow:0 30px 70px rgba(20,5,12,.35);
  animation:gameBorderPulse 3s ease-in-out infinite}
@keyframes gameBorderPulse{0%,100%{border-color:rgba(233,200,143,.35)}50%{border-color:rgba(233,200,143,.85)}}
.game canvas{display:block;width:100%;touch-action:none;cursor:pointer}
/* a badge that names the game as a game, visible the instant it scrolls into view */
.game .gtag{position:absolute;top:18px;left:18px;z-index:7;display:flex;align-items:center;gap:7px;
  background:var(--goldhi);color:var(--wine2);padding:8px 16px 8px 12px;border-radius:30px;
  font-size:10px;letter-spacing:2.8px;text-transform:uppercase;font-weight:600;
  box-shadow:0 8px 20px rgba(20,5,12,.4);animation:tagPulse 2.4s ease-in-out infinite}
.game .gtag svg{width:11px;height:11px}
.game .gtag path{fill:var(--wine2)}
@keyframes tagPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.game .gstart{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;background:rgba(61,10,32,.6);backdrop-filter:blur(3px);transition:opacity .4s}
.game .gstart.off{opacity:0;pointer-events:none}
.game .gstart h5{font-family:var(--serif);font-size:clamp(21px,2.9vw,30px);letter-spacing:3px;color:#F1E7DC;
  text-transform:uppercase;font-weight:400;text-align:center;padding:0 20px}
.game .gstart p{font-size:13.5px;letter-spacing:1px;color:rgba(241,231,220,.88);text-align:center;padding:0 24px;max-width:440px;line-height:1.7}
.game .gbtn{position:relative;padding:15px 42px;border:1.5px solid var(--goldhi);background:var(--goldhi);color:var(--wine2);
  font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:3px;
  transition:transform .25s;font-family:var(--sans)}
.game .gbtn:hover{transform:scale(1.04)}
.game .gbtn::after{content:'';position:absolute;inset:-2px;border-radius:3px;pointer-events:none;
  border:1.5px solid rgba(233,200,143,.75);opacity:.8;transform:scale(1);
  animation:btnRing 2s ease-out infinite}
@keyframes btnRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}}
.game .ghud{position:absolute;top:12px;left:16px;right:16px;z-index:4;display:flex;justify-content:space-between;
  pointer-events:none;font-family:var(--serif);font-size:14px;letter-spacing:2px;color:var(--goldhi)}
.game .gmsg{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;pointer-events:none;
  font-family:var(--ital);font-style:italic;font-size:15px;color:rgba(241,231,220,.95);text-align:center;width:92%}
.game .gwin{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:rgba(61,10,32,.72);backdrop-filter:blur(4px)}
.game .gwin.on{display:flex}
.game .gwin h5{font-family:var(--serif);font-size:clamp(21px,3vw,30px);letter-spacing:3px;color:var(--goldhi);text-transform:uppercase;font-weight:400}
.game .gwin p{font-size:13.5px;color:rgba(241,231,220,.9);text-align:center;max-width:420px;padding:0 20px;line-height:1.6}

/* ---------- the journey gallery: out to in, an unmistakable shelf of photographs ---------- */
#gal{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:40px;margin-bottom:8px}
#galstrip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 7vw;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#galstrip::-webkit-scrollbar{display:none}
.gslide{position:relative;flex:0 0 min(86vw,1180px);scroll-snap-align:center;
  height:80vh;min-height:480px;max-height:800px;border-radius:6px;overflow:hidden;
  background:var(--cream2);box-shadow:0 24px 56px rgba(20,5,12,.2);
  transition:transform .25s ease-out,opacity .25s ease-out}
/* the centred photograph is the story; its neighbours step back so nothing competes
   with it. opacity+transform only (no filter) keeps this cheap across 15 flex children,
   and the highlight is set by JS the instant a slide starts moving, not after it settles,
   so it's already sharp by the time it reaches centre. */
.gslide{transform:scale(.9);opacity:.4}
.gslide.active{transform:scale(1);opacity:1;z-index:2}
.gslide img{width:100%;height:100%;object-fit:cover;display:block}
.gslide .gsh{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,5,12,.64) 100%)}
.gslide .gtx{position:absolute;left:26px;right:26px;bottom:22px;color:#F7F3EC;
  opacity:0;transition:opacity .35s ease .1s}
.gslide.active .gtx{opacity:1}
.gslide .gstage{font-size:10.5px;letter-spacing:3.2px;text-transform:uppercase;color:var(--goldhi);margin-bottom:7px;font-weight:500}
.gslide .gline{font-family:var(--ital);font-style:italic;font-size:clamp(15px,1.8vw,19px);line-height:1.4;
  max-width:560px;text-shadow:0 1px 10px rgba(20,5,12,.5)}
.gslide .cap{position:absolute;right:18px;top:16px;font-family:var(--ital);font-style:italic;
  font-size:10.5px;color:rgba(247,243,236,.82);text-shadow:0 1px 8px rgba(20,5,12,.6);
  opacity:0;transition:opacity .35s ease .1s}
.gslide.active .cap{opacity:1}
/* the arrows: large, on the photograph itself, impossible to miss */
.galarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:54px;height:54px;border-radius:50%;background:rgba(20,5,12,.4);backdrop-filter:blur(6px);
  border:1.5px solid rgba(233,200,143,.6);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.galarrow:hover{background:var(--wine);border-color:var(--goldhi);transform:translateY(-50%) scale(1.08)}
.galarrow svg{width:20px;height:20px;display:block}
.galarrow path{stroke:#F1E7DC;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#galprev{left:3vw}
#galnext{right:3vw}
@media(max-width:900px){#galprev{left:8px}#galnext{right:8px}
  .galarrow{width:44px;height:44px}.galarrow svg{width:16px;height:16px}}
@media(max-width:768px){.gslide{flex-basis:90vw;height:58vh;min-height:360px}
  #galstrip{padding:0 5vw;gap:10px}
  .gslide .gline{font-size:13.5px}.gslide .gtx{left:18px;right:18px;bottom:18px}}

/* ---------- reveals ---------- */
.reveal{will-change:opacity,transform}

/* ---------- fx canvas ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:95}

/* ---------- mobile pass ---------- */
@media(max-width:768px){
  .wrap{padding:70px 20px 56px}
  .kicker{font-size:10.5px;letter-spacing:3.5px;margin-bottom:11px}
  .title{font-size:clamp(24px,6.6vw,32px);letter-spacing:1.4px;margin-bottom:15px}
  .lede{font-size:15px;line-height:1.65}
  .poem{font-size:18px}
  #hero .inner{padding-bottom:86px}
  #hero h1{font-size:clamp(30px,8.4vw,44px);letter-spacing:2px}
  #hero .sub{font-size:14px}
  .divider .wrap{padding:86px 22px}
  .cta .wrap{padding:86px 22px}
  .photo{height:56vh;min-height:300px}
  .photo.short{height:44vh}
  .chap{height:300px}
  .stats{gap:24px 14px;margin-top:36px}
  .numbers .row{grid-template-columns:44px 1fr;gap:14px;padding:20px 0}
  .numbers .no{font-size:23px}
  .grain{display:none}
  .photo .img::after{display:none}
  #alti{left:12px;bottom:12px;padding:7px 13px 7px 9px}
  #alti .ft{font-size:15px;min-width:64px}
  #snd{right:12px;bottom:12px;width:40px;height:40px}
  #builtby{right:60px;bottom:19px;font-size:8.5px;padding:6px 11px}
  #climb{height:34vh}
  #climb .peaklbl{font-size:8px;letter-spacing:1.2px}
}

/* ---------- HoABL statutory disclaimer band ---------- */
#hoabl-disc{background:var(--wine2);padding:20px 28px;text-align:center;position:relative;z-index:5}
#hoabl-disc::before{content:'';position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Ctext x='36' y='40' font-size='11' fill='%23C9A15A' text-anchor='middle'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E")}
#hoabl-disc p{position:relative;font-family:var(--serif);font-size:13.5px;line-height:1.7;color:var(--cream);letter-spacing:.3px;max-width:1100px;margin:0 auto}
@media(max-width:640px){#hoabl-disc p{font-size:11.5px}}

/* ---------- RERA QR (advertisement mandate) ---------- */
.rera-qr{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.rera-qr img{width:86px;height:86px;background:#fff;padding:5px;border-radius:3px}
.rera-qr .rq-t{font-size:10.5px;letter-spacing:1.2px;line-height:1.8;text-transform:uppercase;color:var(--cream);opacity:.85}
@media(max-width:640px){.rera-qr img{width:74px;height:74px}}