/* ============================================================
   Nav City Surf — RETRO SURF vibe layer
   Everything gated on body[data-vibe="retro"] so it's a clean
   Tweaks toggle. Pairs warm sunset tones (the sun) with the
   existing Gulf-blue + ocean-navy we already use.
   ============================================================ */

body[data-vibe="retro"]{
  /* warm, sun-faded paper + lines (override mono tokens in-scope) */
  --paper:#f3e8d2;
  --paper-2:#ecdcbd;
  --line:#d8c39c;
  --ink:#2b2117;          /* warm near-black instead of cold #141414 */
  --ink-2:#7c6a4f;
  --ink-3:#a08a66;
  /* sunset set */
  --sun:#e3a437;          /* faded gold */
  --gold-2:#d98a32;
  --coral:#d2703f;
  --rust:#bd512e;         /* burnt sienna */
  --teal:#2f8a82;         /* faded surf teal */
  /* keep ocean blue (--accent) + navy from home.css */
}

/* warm the page + give it a touch of vintage saturation */
body[data-vibe="retro"]{
  background:var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(227,164,55,.10), transparent 60%);
}

/* ---------- FILM GRAIN (global, retro-only) ---------- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;
  mix-blend-mode:multiply;
  background-image:url("grain.svg");
  background-size:200px 200px;
  transition:opacity .4s ease;
}
body[data-vibe="retro"] .grain{opacity:.07;}

/* ---------- TYPE-DETAIL ACCENTS go sun-gold ---------- */
body[data-vibe="retro"] .sec-head .num{color:var(--rust);}
body[data-vibe="retro"] .feature .f-label{color:var(--rust);}
body[data-vibe="retro"] .arrow{border-color:var(--rust);}
body[data-vibe="retro"] .arrow:hover{color:var(--rust);}
body[data-vibe="retro"] .eyebrow{color:var(--rust);}
body[data-vibe="retro"] .hero-typographic h1 .accent{color:var(--rust);}
body[data-vibe="retro"] .strip-track span::after{content:"\2600";color:var(--gold-2);} /* ☀ */

/* keep buttons oceanic but warm the ghost border */
body[data-vibe="retro"] .btn-ghost{border-color:var(--ink);}

/* ---------- MARQUEE → sunset ribbon ---------- */
body[data-vibe="retro"] .strip{
  background:linear-gradient(90deg,var(--sun),var(--coral) 50%,var(--rust));
  border:0;position:relative;
}
body[data-vibe="retro"] .strip::before,
body[data-vibe="retro"] .strip::after{
  content:"";position:absolute;left:0;right:0;height:7px;z-index:2;
  background:repeating-linear-gradient(90deg,
     var(--rust) 0 14.28%, var(--coral) 14.28% 28.57%, var(--gold-2) 28.57% 42.85%,
     var(--sun) 42.85% 57.14%, #e9c66a 57.14% 71.42%, var(--teal) 71.42% 85.71%, #2f6f8a 85.71% 100%);
}
body[data-vibe="retro"] .strip::before{top:0;}
body[data-vibe="retro"] .strip::after{bottom:0;}
body[data-vibe="retro"] .strip-track span{color:#fff6e6;text-shadow:0 1px 0 rgba(120,50,20,.35);
  font-family:"Staatliches","Bricolage Grotesque",sans-serif;font-weight:400;font-size:18px;letter-spacing:.2em;}

/* ---------- TYPOGRAPHIC HERO: slatted retro sun ---------- */
body[data-vibe="retro"] .hero-typographic{position:relative;}
body[data-vibe="retro"] .hero-typographic::before{
  content:"";position:absolute;z-index:0;right:7%;top:10%;
  width:min(34vw,420px);height:min(34vw,420px);border-radius:50%;
  background-image:
    repeating-linear-gradient(180deg, rgba(243,232,210,.92) 0 6px, transparent 6px 20px),
    linear-gradient(180deg, var(--sun), var(--coral) 62%, var(--rust));
  opacity:.5;pointer-events:none;
}
body[data-vibe="retro"] .hero-typographic .ghost{color:transparent;-webkit-text-stroke:1.5px var(--rust);opacity:.5;}

/* ---------- IMMERSIVE HERO: warm sun-glow over the navy ---------- */
body[data-vibe="retro"] .hero-immersive .scrim{
  background:
    radial-gradient(70% 50% at 78% 30%, rgba(227,164,55,.28), transparent 60%),
    linear-gradient(180deg,rgba(20,16,8,.42) 0%,rgba(20,16,8,0) 30%,rgba(14,28,40,0) 46%,rgba(11,22,34,.9) 100%);
}

/* ---------- SPLIT HERO: warm photo ground + sun tag ---------- */
body[data-vibe="retro"] .hero-split .sp-media{background:#ef; background:#f0e2c6;}
body[data-vibe="retro"] .hero-split .sp-tag{background:var(--sun);color:#3a2410;}
body[data-vibe="retro"] .hero-split .sp-meta .mk{color:var(--rust);}

/* ---------- VINTAGE BADGE (rotating stamp) ---------- */
.retro-badge{display:none;}
body[data-vibe="retro"] .manifesto{position:relative;padding-top:176px;}
body[data-vibe="retro"] .retro-badge{
  display:block;position:absolute;top:24px;right:8px;width:128px;height:128px;z-index:3;
}
.retro-badge svg{width:100%;height:100%;}
.retro-badge .spin{animation:badgeSpin 26s linear infinite;transform-origin:64px 64px;}
.retro-badge .ring-text{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:2.4px;fill:var(--rust);text-transform:uppercase;}
.retro-badge .sun-core{fill:var(--sun);}
.retro-badge .sun-slat{stroke:#f3e8d2;stroke-width:3;}
.retro-badge .core-num{font-family:var(--display);font-weight:800;font-size:26px;fill:#3a2410;}
@keyframes badgeSpin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.retro-badge .spin{animation:none;}}

/* ---------- CTA: retro slatted sun behind the headline ---------- */
.cta .retro-sun{display:none;}
body[data-vibe="retro"] .cta .retro-sun{
  display:block;position:absolute;z-index:1;right:7%;top:50%;transform:translateY(-50%);
  width:300px;height:300px;border-radius:50%;pointer-events:none;
  background-image:
    repeating-linear-gradient(180deg, rgba(15,28,40,.55) 0 7px, transparent 7px 22px),
    linear-gradient(180deg, var(--sun), var(--coral) 60%, var(--rust));
  opacity:.9;
  box-shadow:0 0 80px rgba(227,164,55,.35);
}
body[data-vibe="retro"] .cta .overlay{
  background:linear-gradient(180deg,rgba(189,81,46,.12),rgba(11,22,34,.82));
}
body[data-vibe="retro"] .cta .stat{color:#f0d9a8;}

/* ---------- STORY block: warm the navy slightly + gold eyebrow ---------- */
body[data-vibe="retro"] .story{
  background:linear-gradient(160deg,#0e2b41,#123a3a);
}
body[data-vibe="retro"] .story .eyebrow{color:var(--sun);}

/* ---------- WAVE divider → sunset stroke ---------- */
body[data-vibe="retro"] .wave svg path{stroke:var(--rust) !important;}
body[data-vibe="retro"] .stats .sv{color:var(--rust);}

/* ---------- NAV: thin sunset hairline under the bar ---------- */
body[data-vibe="retro"] header.nav{border-bottom:0;box-shadow:0 2px 0 rgba(189,81,46,.18);}
body[data-vibe="retro"] header.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:repeating-linear-gradient(90deg,
     var(--rust) 0 16.6%, var(--coral) 16.6% 33.3%, var(--gold-2) 33.3% 50%,
     var(--sun) 50% 66.6%, var(--teal) 66.6% 83.3%, #2f6f8a 83.3% 100%);
}

/* ---------- INNER PAGE HERO → deep-ocean navy top (mirrors the home immersive hero) ---------- */
body[data-vibe="retro"] .page-hero{
  position:relative;overflow:hidden;border-bottom:0;
  padding:90px 0 80px;color:#fff;
  background:
    radial-gradient(56% 92% at 80% 22%, rgba(227,164,55,.22), transparent 60%),
    radial-gradient(72% 120% at 10% 6%, rgba(47,138,130,.18), transparent 56%),
    linear-gradient(165deg,#16415f 0%,#0e2b41 52%,#0a1d2e 100%);
}
body[data-vibe="retro"] .page-hero .wrap{position:relative;z-index:2;}
body[data-vibe="retro"] .page-hero .eyebrow{color:var(--sun);}
body[data-vibe="retro"] .page-hero h1{color:#fff;}
body[data-vibe="retro"] .page-hero p{color:#cbdcea;}
/* faint slatted sun glow, low-right, echoing the home hero */
body[data-vibe="retro"] .page-hero::before{
  content:"";position:absolute;z-index:1;right:6%;top:50%;transform:translateY(-50%);
  width:min(28vw,360px);height:min(28vw,360px);border-radius:50%;pointer-events:none;
  background-image:
    repeating-linear-gradient(180deg, rgba(10,29,46,.55) 0 6px, transparent 6px 20px),
    linear-gradient(180deg, var(--sun), var(--coral) 60%, var(--rust));
  opacity:.32;
}
/* sunset hairline under the hero, echoing the nav bar */
body[data-vibe="retro"] .page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:repeating-linear-gradient(90deg,
     var(--rust) 0 16.6%, var(--coral) 16.6% 33.3%, var(--gold-2) 33.3% 50%,
     var(--sun) 50% 66.6%, var(--teal) 66.6% 83.3%, #2f6f8a 83.3% 100%);
}

@media(max-width:900px){
  body[data-vibe="retro"] .manifesto{padding-top:128px;}
  body[data-vibe="retro"] .retro-badge{width:92px;height:92px;top:18px;}
  body[data-vibe="retro"] .hero-typographic::before{opacity:.35;}
  body[data-vibe="retro"] .cta .retro-sun{width:200px;height:200px;right:4%;}
  body[data-vibe="retro"] .page-hero{padding:64px 0 56px;}
  body[data-vibe="retro"] .page-hero::before{width:200px;height:200px;opacity:.22;}
}

/* ---------- IMAGE SLOT: warm letterbox ground for fit=contain photos ---------- */
/* A contained photo shows margins where its aspect ratio differs from the slot.
   Tint that ground to the warm paper tone so the gaps read as intentional. */
body[data-vibe="retro"] image-slot::part(frame){background:var(--paper-2);}