/* ============================================================
   CINEMATIC SCROLL ENGINE — stylesheet template
   Retheme by editing the :root tokens only. Structure below is
   generic; the inca/ABYSSAL builds are just different token sets.
   ============================================================ */

/* RETHEMED to "The High Route". Every token below maps onto a token from the
   site design system (assets/css/main.css), which this page loads FIRST — so the
   scroll film and the rest of salkantay.org share one palette and one type set.
   Structure below this block is the untouched generic engine. */
:root {
  --bg-deep:  #0F1F17;   /* = --puna     — page + loader ground */
  --bg-mid:   #55645B;   /* = --stone    — secondary text on paper */
  --accent:   #3FC1B6;   /* = --laguna   — HUD numbers, hairline, rules (dark ctx) */
  --accent-ink: #166F68; /* = --laguna-ink — accent where it must be TEXT on paper */
  --paper:    #EFF3EE;   /* = --glacier  — panels + resolve section */
  --ink:      #10241A;   /* = --ink      — body text on paper */
  --serif: "Fraunces", Georgia, serif;                       /* = --f-serif */
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;  /* = --f-mono */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif; /* = --f-display */

  --paper-90: rgba(239,243,238,.92);
  --paper-70: rgba(239,243,238,.74);
}

/* NOTE: brand type + accent overrides live at the BOTTOM of this file, after the
   generic engine rules. At equal specificity the later rule wins, so putting them
   up here silently lost `font-style` and `font-weight` to the engine's own
   `#hero h1` (line ~94) and faux-obliqued Archivo. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body { background: var(--bg-deep); color: var(--paper); font-family: var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.mono { font-family: var(--mono); }

/* ---------- Loader ---------- */
#loader { position: fixed; inset: 0; z-index: 100; background: var(--bg-deep); display: flex; align-items: center; justify-content: center; transition: opacity .9s ease, visibility .9s; }
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; width: min(70vw, 420px); }
.loader-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .35em; color: var(--accent); margin-bottom: 14px; }
.loader-title { font-size: 28px; font-style: italic; margin-bottom: 26px; }
.loader-bar { height: 1px; background: rgba(236,234,225,.25); position: relative; overflow: hidden; }
.loader-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--accent); transition: transform .25s ease; }
.loader-pct { margin-top: 12px; font-size: 11px; letter-spacing: .2em; color: var(--paper-70); }

/* ---------- Progress hairline ---------- */
#progressHairline { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 50; pointer-events: none; font-family: var(--mono); opacity: 0; transition: opacity .5s ease; }
.hud-block { position: absolute; }
.hud-left { top: 28px; left: 30px; }
.hud-primary { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.hud-primary-label { font-size: 11px; letter-spacing: .3em; color: var(--paper-70); }
.hud-primary-value { font-size: 46px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 300; }
.hud-primary-of { font-size: 13px; color: var(--paper-70); }
.hud-row { display: flex; justify-content: space-between; gap: 24px; width: 238px; padding: 5px 0; border-top: 1px solid rgba(236,234,225,.18); font-size: 11.5px; letter-spacing: .12em; }
.hud-key { color: var(--paper-70); }
.hud-val { color: var(--paper); font-variant-numeric: tabular-nums; }
.hud-right { top: 32px; right: 30px; text-align: right; }
.hud-brand { font-size: 12px; letter-spacing: .3em; line-height: 1.7; }
.hud-route { margin-top: 10px; font-size: 9.5px; letter-spacing: .22em; color: var(--paper-70); }
.hud-zone { bottom: 30px; left: 30px; }
.hud-zone-label { font-size: 11px; letter-spacing: .3em; color: var(--accent); border-left: 1px solid var(--accent); padding-left: 12px; transition: opacity .45s ease; }
.hud-zone-label.fading { opacity: 0; }

/* ---------- Stage ---------- */
#ascent { position: relative; }
#stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(20,22,12,.55) 100%); }
#grain { position: absolute; inset: -50%; pointer-events: none; opacity: .05; 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: grainShift .9s steps(4) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,2%)} 100%{transform:translate(0,0)} }

/* ---------- Hero ---------- */
.overlay { position: absolute; inset: 0; pointer-events: none; }
#hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 5; }
.hero-kicker { font-size: 11px; letter-spacing: .4em; color: var(--accent); margin-bottom: 26px; padding: 0 16px; }
#hero h1 { font-size: clamp(44px, 8vw, 104px); font-weight: 400; font-style: italic; line-height: 1.04; letter-spacing: -.01em; text-shadow: 0 2px 40px rgba(20,22,12,.6); }
.hero-sub { margin-top: 40px; font-size: 10px; letter-spacing: .4em; color: var(--paper-70); }
.hero-arrow { display: block; margin-top: 12px; color: var(--accent); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ---------- Pinned zone panels ---------- */
.panel { position: absolute; z-index: 6; left: clamp(24px,6vw,90px); bottom: clamp(90px,16vh,160px); width: min(480px,82vw); background: var(--paper-90); color: var(--bg-deep); padding: 30px 34px 24px; opacity: 0; transform: translateY(46px); pointer-events: none; box-shadow: 0 30px 80px rgba(20,22,12,.35); }
.panel::before { content: ""; position: absolute; top: 0; left: 34px; right: 34px; height: 1px; background: var(--accent); }
.panel:nth-child(even of .panel) { left: auto; right: clamp(24px,6vw,90px); }
.panel-meta { font-size: 10px; letter-spacing: .28em; color: var(--bg-mid); margin-bottom: 14px; }
.panel h2 { font-size: clamp(26px,3.2vw,38px); font-weight: 400; font-style: italic; color: var(--bg-deep); margin-bottom: 12px; line-height: 1.1; }
.panel p { font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.panel p em { color: var(--bg-mid); font-style: italic; }
.panel-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(201,162,75,.55); font-size: 9px; letter-spacing: .22em; color: var(--bg-mid); }

/* ---------- Resolve / booking section ---------- */
#book { position: relative; z-index: 10; background: var(--paper); color: var(--bg-deep); }
.book-inner { max-width: 880px; margin: 0 auto; padding: clamp(80px,12vh,140px) 28px 60px; text-align: center; }
.book-kicker { font-size: 10.5px; letter-spacing: .35em; color: var(--bg-mid); margin-bottom: 26px; }
.book-title { font-size: clamp(34px,5.4vw,62px); font-weight: 400; font-style: italic; line-height: 1.12; margin-bottom: 56px; color: var(--bg-deep); }
.spec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(201,162,75,.5); border: 1px solid rgba(201,162,75,.5); margin-bottom: 50px; }
.spec-grid > div { background: var(--paper); padding: 26px 10px 20px; }
.spec-num { display: block; font-family: var(--serif); font-size: clamp(28px,3.4vw,42px); color: var(--bg-deep); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.spec-key { font-size: 9px; letter-spacing: .2em; color: var(--bg-mid); }
.book-line { font-size: 20px; font-style: italic; color: var(--ink); margin-bottom: 46px; }
.book-line strong { color: var(--bg-deep); }
#ctaForm { max-width: 560px; margin: 0 auto; }
.form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.form-row input, .form-row select { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--bg-deep); background: transparent; border: 1px solid rgba(92,95,58,.45); padding: 13px 14px; border-radius: 0; outline: none; transition: border-color .25s; }
.form-row input:focus, .form-row select:focus { border-color: var(--accent); }
.form-row input::placeholder { color: rgba(92,95,58,.75); }
#ctaForm [type=submit] { width: 100%; margin-top: 10px; cursor: pointer; font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--paper); background: var(--bg-deep); border: 1px solid var(--bg-deep); padding: 18px 20px; transition: background .3s, letter-spacing .3s; }
#ctaForm [type=submit]:hover { background: var(--bg-mid); letter-spacing: .02em; }
#ctaForm [type=submit]:disabled { opacity: .6; cursor: default; }
.form-note { margin-top: 22px; font-size: 9.5px; letter-spacing: .14em; line-height: 1.9; color: var(--bg-mid); max-width: 520px; margin: 22px auto 0; }
.form-note.confirmed { color: var(--bg-deep); }
.book-foot { margin-top: 90px; padding-top: 22px; border-top: 1px solid rgba(201,162,75,.5); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 9px; letter-spacing: .2em; color: var(--bg-mid); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .hud-right { display: none; }
  .hud-row { width: 178px; }
  .hud-primary-value { font-size: 36px; }
  .panel { left: 16px !important; right: 16px !important; width: auto; bottom: 84px; padding: 22px 22px 18px; }
  .spec-grid { grid-template-columns: repeat(2,1fr); }
  .form-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { #grain, .hero-arrow { animation: none; } }

/* ============================================================
   BRAND OVERRIDES — must stay LAST in this file.
   Equal-specificity rules above would otherwise win the cascade.
   ============================================================ */

/* Headings use the site's wide uppercase Archivo (Archivo has no true italic —
   the engine's `font-style: italic` faux-obliques it, so reset it explicitly). */
#hero h1,
.book-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .98;
  color: var(--paper);
}
.book-title { color: var(--bg-deep); }
@media (max-width: 600px) {
  #hero h1, .book-title { font-variation-settings: "wdth" 100; }
}

/* Panel voice keeps the serif italic — the same role .serif-lede plays on the site. */
.panel h2 { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* --accent (--laguna) is a GRAPHICS colour: it fails AA as text on paper.
   Anywhere it carries text on the light panels, use the text-safe teal. */
.panel-meta,
.spec-key { color: var(--accent-ink); }
.panel-foot { border-top-color: rgba(22,111,104,.45); color: var(--bg-mid); }

/* The resolve section reuses the site's own components (.index-list, .btn), so
   give it the site's reading width and let those components style themselves. */
#book .index-list { text-align: left; margin-top: var(--sp-4); }
#book .book-line { max-width: 62ch; margin-inline: auto; }
#book .book-foot a { color: var(--bg-deep); }