/* ============ ALTITUDE — shared design system ============ */
:root{
  --ink:#10202B;
  --ink-2:#0D1922;
  --paper:#ECE9DD;
  --paper-2:#E3E0D2;
  --strip:#F1E9D2;
  --amber:#C88A31;
  --amber-soft:#D89A3A;
  --teal:#2A6E7A;
  --brick:#A8412E;
  --cream:#EDE9DC;
  --text:#20241f;
  --text2:#4a4f47;
  --rule:#C6C0A9;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:'Lora', serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

h1,h2,h3{font-family:'Jost', sans-serif; font-weight:700; color:var(--ink); margin:0;}
.eyebrow{
  font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; font-size:12.5px; color:var(--amber-soft);
}
.eyebrow.on-paper{color:var(--teal);}
.lead{font-size:19px; color:var(--text2); font-style:italic; line-height:1.6;}
.mono{font-family:'JetBrains Mono', monospace;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:0.5px;
  text-transform:uppercase; font-size:14.5px; text-decoration:none;
  padding:15px 28px; border-radius:3px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--amber-soft); color:var(--ink-2); box-shadow:0 3px 0 #9c6a1f;}
.btn-primary:hover{background:#e2a951; box-shadow:0 4px 0 #9c6a1f;}
.btn-primary:active{transform:translateY(2px); box-shadow:0 1px 0 #9c6a1f;}
.btn-ghost{background:transparent; border-color:rgba(237,233,220,0.35); color:var(--cream);}
.btn-ghost:hover{background:rgba(237,233,220,0.08); border-color:rgba(237,233,220,0.6);}
.btn-outline-ink{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-outline-ink:hover{background:var(--ink); color:var(--cream);}
.btn-sm{padding:10px 18px; font-size:12.5px;}
.btn-block{width:100%; justify-content:center;}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(16,32,43,0.92); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(237,233,220,0.12);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  font-family:'Jost', sans-serif; font-weight:700; font-size:20px; letter-spacing:0.5px;
  color:var(--cream); text-decoration:none; display:flex; align-items:baseline; gap:8px;
}
.brand small{
  font-family:'Oswald', sans-serif; font-size:10.5px; letter-spacing:2px; font-weight:500;
  color:var(--amber-soft); text-transform:uppercase;
}
.nav-back{
  font-family:'Oswald', sans-serif; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  color:rgba(237,233,220,0.65); text-decoration:none;
}
.nav-back:hover{color:var(--cream);}
.nav-right{display:flex; align-items:center; gap:18px;}

/* ---------- dark hero band ---------- */
.hero{
  background:radial-gradient(circle at 85% 8%, #142434 0%, var(--ink-2) 60%);
  color:var(--cream); position:relative; overflow:hidden;
}
.hero .dial{position:absolute; border-radius:50%; border:1px solid rgba(237,233,220,0.12);}
.rule-dark{height:1px; background:rgba(237,233,220,0.18); border:none;}
.rule-light{height:1px; background:var(--rule); border:none;}

/* ---------- ticks (altimeter motif) ---------- */
.ticks{position:relative; padding-left:24px;}
.ticks::before{content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:rgba(237,233,220,0.28);}
.tick{position:relative; padding:10px 0 10px 16px; font-family:'JetBrains Mono', monospace; font-size:12px; color:rgba(237,233,220,0.55); letter-spacing:0.3px;}
.tick::before{content:''; position:absolute; left:-24px; top:50%; width:14px; height:1px; background:rgba(237,233,220,0.35);}

/* ---------- cards ---------- */
.card{background:#fff0; border:1.5px solid var(--ink); border-radius:3px;}
.strip-card{
  background:var(--strip); border:1.5px solid var(--ink); border-radius:2px;
  padding:18px 22px; position:relative;
}
.strip-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--teal);}

/* ---------- flight-plan list (chapters) ---------- */
.plan{border-top:2px solid var(--ink);}
.plan-row{
  display:flex; align-items:baseline; gap:18px; padding:16px 0;
  border-bottom:1px dotted var(--rule);
}
.plan-row .pn{font-family:'Jost',sans-serif; font-weight:700; color:var(--amber); font-size:16px; flex:0 0 28px;}
.plan-row .palt{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); flex:0 0 78px; letter-spacing:0.5px;}
.plan-row .ptxt{flex:1;}
.plan-row .ptxt b{font-family:'Oswald',sans-serif; font-weight:600; font-size:15.5px; color:var(--ink); letter-spacing:0.2px;}
.plan-row .ptxt span{display:block; font-size:14px; color:var(--text2); font-style:italic; margin-top:2px;}

/* ---------- sections ---------- */
section{padding:86px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:34px; line-height:1.15; margin-top:10px;}
.on-dark{background:var(--ink); color:var(--cream);}
.on-dark h2, .on-dark h3{color:var(--cream);}
.on-strip{background:var(--paper-2);}

/* ---------- hero split layout ---------- */
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;}

/* ---------- pain list ---------- */
.pain-list{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.pain-list li{
  display:flex; gap:16px; align-items:flex-start; padding:22px 0;
  border-bottom:1px solid var(--rule); font-size:18px;
}
.pain-list li:first-child{border-top:1px solid var(--rule);}
.pain-mark{font-family:'Jost',sans-serif; font-weight:700; color:var(--brick); font-size:20px; flex:0 0 26px;}

/* ---------- gallery ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.gallery figure{margin:0; cursor:zoom-in;}
.gallery img{
  border-radius:3px; border:1px solid var(--rule); box-shadow:0 10px 24px rgba(16,32,43,0.14);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gallery figure:hover img{transform:translateY(-4px); box-shadow:0 16px 30px rgba(16,32,43,0.2);}
.gallery figcaption{
  margin-top:10px; font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:0.5px;
  color:var(--text2); text-transform:uppercase;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(10,18,24,0.92); display:none;
  align-items:center; justify-content:center; z-index:200; padding:40px; cursor:zoom-out;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(90vw,720px); max-height:88vh; border-radius:4px; box-shadow:0 30px 60px rgba(0,0,0,0.5);}

/* ---------- badges ---------- */
.badges{display:flex; flex-wrap:wrap; gap:12px;}
.badge{
  font-family:'JetBrains Mono',monospace; font-size:13px; padding:9px 16px;
  border:1px solid var(--ink); border-radius:20px; color:var(--ink);
}

/* ---------- buy box ---------- */
.buybox{
  background:var(--ink); color:var(--cream); border-radius:6px; padding:44px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.buybox::after{content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; border:1px solid rgba(237,233,220,0.12);}
.buybox ul{list-style:none; margin:20px 0 28px; padding:0; display:grid; gap:10px;}
.buybox ul li{display:flex; gap:10px; font-size:15.5px; color:rgba(237,233,220,0.92);}
.buybox ul li::before{content:'✓'; color:var(--amber-soft); font-weight:700;}
.price-tag{font-family:'Jost',sans-serif; font-weight:700; font-size:52px; color:var(--cream); line-height:1;}
.price-tag sup{font-size:22px; top:-1.2em;}
.price-note{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:rgba(237,233,220,0.55); margin-top:8px;}

/* ---------- faq ---------- */
details.faq{border-bottom:1px solid var(--rule); padding:20px 0;}
details.faq summary{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:16.5px; color:var(--ink);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:'+'; font-family:'Jost',sans-serif; font-size:22px; color:var(--amber); margin-left:16px;}
details.faq[open] summary::after{content:'–';}
details.faq p{margin:14px 0 0; color:var(--text2); font-size:16px;}

/* ---------- contact form ---------- */
.field{margin-bottom:20px;}
.field label{
  display:block; font-family:'Oswald', sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); margin-bottom:8px;
}
.field input, .field textarea{
  width:100%; font-family:'Lora', serif; font-size:16px; color:var(--text);
  background:#fff; border:1.5px solid var(--ink); border-radius:3px; padding:12px 14px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(42,110,122,0.15);}
.field textarea{resize:vertical; min-height:130px; font-family:'Lora', serif;}
.form-note{font-size:13.5px; color:var(--text2); margin-top:14px;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-2); color:rgba(237,233,220,0.55); padding:44px 0; font-size:13.5px;}
.site-footer .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.site-footer a{color:rgba(237,233,220,0.75); text-decoration:none;}
.site-footer a:hover{color:var(--amber-soft);}

/* ---------- shop grid ---------- */
.shop-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; background:var(--ink-2, transparent);}
.product-card{
  display:grid; grid-template-columns:200px 1fr; gap:28px;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:6px; padding:26px; align-items:center;
}
.product-card img{border-radius:3px; box-shadow:0 12px 26px rgba(16,32,43,0.18);}
.product-card .pc-price{font-family:'Jost',sans-serif; font-weight:700; font-size:22px; color:var(--ink); margin:14px 0 18px;}
.product-card.soon{opacity:0.55; grid-template-columns:1fr;}
.product-card.soon .soon-inner{padding:30px; text-align:center; font-family:'Oswald',sans-serif; letter-spacing:1px; text-transform:uppercase; font-size:13px; color:var(--text2);}

/* ---------- content is always visible; no scroll-gated opacity ---------- */
.reveal{opacity:1;}

/* ============ responsive ============ */
@media (max-width:860px){
  .gallery{grid-template-columns:repeat(2,1fr);}
  .buybox{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:1fr;}
  .product-card{grid-template-columns:120px 1fr; padding:18px; gap:18px;}
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-grid > div:last-child{max-width:320px; margin:0 auto;}
  section{padding:60px 0;}
  .section-head h2{font-size:27px;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .gallery{grid-template-columns:repeat(2,1fr); gap:14px;}
  .nav-back{display:none;}
  .hero h1{font-size:30px !important; line-height:1.15 !important;}
  .price-tag{font-size:42px;}
  .product-card{grid-template-columns:1fr; text-align:center;}
  .product-card img{margin:0 auto;}
}