/* ============================================================
   STANZA EXPERIENCE — Design System v4 (dark, cinematic — on brand)
   Palette from official brand dossier: ice / steel / petrol / navy
   Typography: Plus Jakarta Sans (stand-in for Grifti) + Space Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ice:          #bddef2;
  --steel:        #6b9fbf;
  --petrol:       #074259;
  --navy:         #011826;

  --paper:        var(--navy);
  --paper-2:      #0a3446;
  --ink:          var(--ice);
  --ink-dim:      #86adc4;
  --line:         #123241;
  --line-strong:  #1f4b60;
  --amber:        var(--ice);
  --amber-tint:   rgba(189,222,242,0.08);
  --violet:       var(--steel);
  --violet-tint:  rgba(107,159,191,0.1);
  --radius: 2px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

::selection{ background:var(--ice); color:var(--navy); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ice);
}

.eyebrow.violet{ color:var(--steel); }

.mono{ font-family:'Space Mono', monospace; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- NAV ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  background:rgba(1,24,38,0.85);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.site-nav .brand{
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:1.1rem; letter-spacing:0.01em; color:var(--ink);
}
.site-nav .brand small{
  display:block; font-family:'Space Mono',monospace; font-size:0.58rem; font-weight:400;
  letter-spacing:0.14em; color:var(--steel); text-transform:uppercase; margin-top:2px;
}
.site-nav ul{
  list-style:none; display:flex; gap:30px; flex-wrap:wrap;
}
.site-nav a{
  font-family:'Space Mono', monospace; font-size:0.7rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--steel);
  position:relative; padding-bottom:4px;
  transition:color .25s ease;
}
.site-nav a:hover, .site-nav a.active{ color:var(--ice); }
.site-nav a.active::after{
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:var(--ice);
}
.nav-toggle{ display:none; background:none; border:none; color:var(--ink); font-size:1.4rem; cursor:pointer; }

@media (max-width:900px){
  .site-nav ul{
    position:fixed; inset:0; top:0; background:var(--navy);
    flex-direction:column; justify-content:center; align-items:center; gap:30px;
    display:none;
  }
  .site-nav ul.open{ display:flex; }
  .nav-toggle{ display:block; z-index:110; }
  .site-nav ul a{ font-size:1rem; }
}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
  padding:140px 32px 80px;
  background:
    linear-gradient(to bottom, var(--navy) 0%, rgba(1,24,38,0.35) 38%, rgba(1,24,38,0.88) 100%),
    url('hero-atmosphere.jpg') center 30%/cover no-repeat,
    var(--navy);
  border-bottom:1px solid var(--line);
}
.hero-inner{ max-width:1180px; margin:0 auto; width:100%; }
.hero h1{
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  color:var(--ink);
  text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,0.4);
}
.hero h1 em{
  font-style:normal; font-weight:800; color:var(--ice);
}
.hero .tagline{
  margin-top:22px; font-size:1.1rem; color:var(--ice); opacity:0.85; max-width:520px; font-weight:500;
}
.hero .meta-row{
  margin-top:52px; display:flex; gap:40px; flex-wrap:wrap;
  border-top:1px solid rgba(189,222,242,0.2); padding-top:22px;
}
.hero .meta-row div{ font-family:'Space Mono',monospace; font-size:0.75rem; color:var(--steel); }
.hero .meta-row strong{ display:block; color:var(--ice); font-size:0.9rem; margin-bottom:4px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;}

/* ---------- WAVEFORM PLAYER ---------- */
.player{
  margin-top:44px;
  display:flex; align-items:center; gap:18px;
  border:1px solid rgba(189,222,242,0.3); border-radius:var(--radius);
  padding:16px 20px; background:rgba(1,24,38,0.55); backdrop-filter:blur(4px);
  max-width:640px;
}
.player button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--ice);
  background:transparent; color:var(--ice); cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .2s ease, color .2s ease;
}
.player button:hover{ background:var(--ice); color:var(--navy); }
.player canvas{ width:100%; height:44px; }
.player .p-label{ font-family:'Space Mono',monospace; font-size:0.68rem; color:var(--steel); white-space:nowrap; letter-spacing:0.08em;}

/* ---------- SECTIONS ---------- */
section{ padding:110px 32px; border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.7rem); margin-top:14px; color:var(--ink); }
.section-head p{ margin-top:18px; color:var(--ink-dim); font-size:1.05rem; }

.lede{
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:500; font-size:1.35rem; line-height:1.55;
  color:var(--ink); max-width:820px;
}
.lede strong{ color:var(--ice); font-weight:700; }
.lede strong.v{ color:var(--steel); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:44px; }
@media (max-width:860px){ .grid-2,.grid-4{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr; } }

.card{
  background:var(--paper-2); padding:38px 34px;
}
.card .num{ font-family:'Space Mono',monospace; font-size:0.7rem; color:var(--ice); letter-spacing:0.1em; }
.card h3{ font-size:1.25rem; margin-top:14px; color:var(--ink); }
.card p{ margin-top:12px; color:var(--ink-dim); font-size:0.95rem; }

.pillar{ padding:0; }
.pillar h3{ font-size:1.2rem; color:var(--ink); margin-top:16px; }
.pillar p{ color:var(--ink-dim); margin-top:10px; font-size:0.95rem; }
.pillar .tag{
  font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.12em;
  text-transform:uppercase; padding:4px 9px; border:1px solid var(--line-strong); display:inline-block; color:var(--ink-dim);
}
.pillar .tag.amber{ color:var(--ice); border-color:var(--ice); background:var(--amber-tint); }
.pillar .tag.violet{ color:var(--steel); border-color:var(--steel); background:var(--violet-tint); }

/* Acts timeline */
.acts{ display:flex; flex-direction:column; }
.act{
  display:grid; grid-template-columns:160px 1fr; gap:40px;
  padding:38px 0; border-top:1px solid var(--line);
  align-items:start;
}
.act:last-child{ border-bottom:1px solid var(--line); }
.act .phase{ font-family:'Space Mono',monospace; font-size:0.7rem; color:var(--steel); letter-spacing:0.1em; text-transform:uppercase; }
.act.core .phase{ color:var(--ice); }
.act h3{ font-size:1.4rem; color:var(--ink); }
.act.core h3{ color:var(--ice); }
.act p{ color:var(--ink-dim); margin-top:10px; max-width:600px; }
.act .duration{ font-family:'Space Mono',monospace; font-size:0.75rem; color:var(--steel); margin-top:8px; display:block;}
@media (max-width:700px){ .act{ grid-template-columns:1fr; gap:10px; } }

/* stat strip */
.stats{ display:flex; gap:0; border:1px solid var(--line); }
.stat{ flex:1; padding:30px 28px; border-right:1px solid var(--line); background:var(--paper-2); }
.stat:last-child{ border-right:none; }
.stat .n{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:2.2rem; color:var(--ice); }
.stat .l{ font-family:'Space Mono',monospace; font-size:0.68rem; color:var(--ink-dim); letter-spacing:0.08em; text-transform:uppercase; margin-top:6px; }
@media (max-width:700px){ .stats{ flex-direction:column; } .stat{ border-right:none; border-bottom:1px solid var(--line); } }

/* rider table */
.rider-table{ width:100%; border-collapse:collapse; }
.rider-table th{
  text-align:left; font-family:'Space Mono',monospace; font-size:0.68rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ice);
  padding:12px 0; border-bottom:1px solid var(--line);
}
.rider-table td{ padding:16px 0; border-bottom:1px solid var(--line); color:var(--ink-dim); vertical-align:top; }
.rider-table td:first-child{ color:var(--ink); font-weight:700; width:220px; }

/* format cards (booking) */
.format-card{
  border:1px solid var(--line-strong); padding:44px; position:relative; background:var(--paper-2);
}
.format-card.large{ border-color:var(--steel); }
.format-card .badge{
  font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--steel); margin-bottom:18px; display:block;
}
.format-card h3{ font-size:1.8rem; color:var(--ink); }
.format-card ul{ list-style:none; margin-top:26px; }
.format-card li{ padding:10px 0; border-top:1px solid var(--line); color:var(--ink-dim); font-size:0.92rem; }
.format-card li:first-child{ border-top:none; }
.format-card li::before{ content:'— '; color:var(--ice); }

/* product cards (merch) */
.product-card{
  border:1px solid var(--line); background:var(--paper-2); overflow:hidden;
}
.product-card .swatch{
  aspect-ratio:1/1; background:linear-gradient(135deg, var(--paper-2), var(--petrol) 140%);
  display:flex; align-items:center; justify-content:center;
}
.product-card .swatch span{
  font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel);
}
.product-card .info{ padding:22px 24px; }
.product-card h3{ font-size:1.05rem; }
.product-card p{ color:var(--ink-dim); font-size:0.85rem; margin-top:8px; }

/* availability banner */
.availability{
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  border:1px solid var(--ice); padding:34px 40px; margin-top:60px;
  background:var(--amber-tint);
}
.availability .dot{ width:8px; height:8px; border-radius:50%; background:var(--ice); display:inline-block; margin-right:10px;
  box-shadow:0 0 0 0 rgba(189,222,242,0.6); animation:pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(189,222,242,0.5); }
  70%{ box-shadow:0 0 0 10px rgba(189,222,242,0); }
  100%{ box-shadow:0 0 0 0 rgba(189,222,242,0); }
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--ice); color:var(--ice);
  transition:background .2s ease, color .2s ease; cursor:pointer; background:transparent;
}
.btn:hover{ background:var(--ice); color:var(--navy); }
.btn.solid{ background:var(--ice); color:var(--navy); }
.btn.solid:hover{ background:transparent; color:var(--ice); }
.btn.violet{ border-color:var(--steel); color:var(--steel); }
.btn.violet:hover{ background:var(--steel); color:var(--navy); }

/* forms */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); }
.field input, .field select, .field textarea{
  background:var(--paper-2); border:1px solid var(--line-strong); color:var(--ink);
  padding:13px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ice); }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

/* footer */
footer{
  padding:60px 32px 40px;
}
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; }
.footer-grid h4{ font-size:1.05rem; color:var(--ink); margin-bottom:16px; font-weight:700; }
.footer-grid p, .footer-grid a{ color:var(--ink-dim); font-size:0.9rem; display:block; margin-bottom:6px; }
.footer-grid a:hover{ color:var(--ice); }
.foot-bottom{
  margin-top:50px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:'Space Mono',monospace; font-size:0.68rem; color:var(--ink-dim); letter-spacing:0.05em;
}

/* interior page hero (shorter) */
.page-hero{
  padding:150px 32px 70px; border-bottom:1px solid var(--line);
  background:linear-gradient(160deg, var(--navy) 0%, var(--paper-2) 260%);
}
.page-hero .wrap{ max-width:1180px; }
.page-hero h1{ font-size:clamp(2.2rem,5.5vw,3.6rem); text-transform:uppercase; }
.page-hero p{ margin-top:18px; color:var(--ink-dim); max-width:600px; font-size:1.05rem; }

/* fade-in on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* quote block */
.quote-block{
  font-family:'Plus Jakarta Sans',sans-serif; font-style:italic; font-weight:600; font-size:clamp(1.5rem,3vw,2.2rem);
  color:var(--ink); max-width:900px; line-height:1.4; border-left:2px solid var(--ice); padding-left:36px;
}

/* story / origin-of-name section */
.story-mark{ display:none; }
.story-grid{
  display:grid; grid-template-columns:1fr 1px 1fr; gap:56px; margin-top:44px; position:relative;
}
.story-divider{ background:var(--line-strong); }
.story-lede{
  font-family:'Plus Jakarta Sans',sans-serif; font-style:italic; font-weight:600;
  font-size:1.7rem; line-height:1.45; color:var(--ice);
}
.story-body p{ color:var(--ink-dim); font-size:1.02rem; line-height:1.8; }
.story-body p + p{ margin-top:20px; }
.story-tagline{
  margin-top:56px; display:flex; align-items:center; gap:16px;
}
.story-tagline .line{ height:1px; flex:1; background:var(--line-strong); }
.story-tagline span{
  font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel);
}
@media (max-width:860px){
  .story-grid{ grid-template-columns:1fr; }
  .story-divider{ display:none; }
}

/* gallery frames */
.frame{ border:1px solid var(--line); overflow:hidden; position:relative; background:var(--paper-2); }
.frame img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.95) contrast(1.02); transition:transform .6s ease; }
.frame:hover img{ transform:scale(1.04); }
.frame .cap{ position:absolute; bottom:0; left:0; right:0; padding:14px 16px; background:linear-gradient(to top, rgba(1,24,38,0.9), transparent);
  font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ice); }