:root{
  --bg: #0a0c14;
  --surface-solid: #12152a;
  --text: #f6f5f2;
  --text-dim: #b9bcc9;
  --accent-gold: #e69221;
  --accent-blue: #6c89b8;
  --line: #3a4066;
  --line-soft: #262b48;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--accent-gold);
  text-shadow:0 0 28px rgba(230,146,33,0.25);
}
.mono{ font-family:'JetBrains Mono', monospace; }
.readout{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.06em;
  color:var(--accent-gold);
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:0.5em;
}
.readout::before{
  content:'';
  width:5px; height:5px;
  background:var(--accent-gold);
  border-radius:50%;
  box-shadow:0 0 6px var(--accent-gold);
}
a{color:inherit; text-decoration:none;}

/* NAV */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw;
  background:linear-gradient(to bottom, rgba(10,12,20,0.9), transparent);
  backdrop-filter:blur(6px);
  transition:padding 0.3s ease, background 0.3s ease;
}
nav.scrolled{
  padding:14px 5vw;
  background:rgba(10,12,20,0.85);
  border-bottom:1px solid var(--line-soft);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces', serif;
  font-size:1.05rem;
  letter-spacing:0.02em;
  color:var(--accent-gold);
}
.brand-mark{ width:20px; height:20px; position:relative; }
.brand-mark::before, .brand-mark::after{ content:''; position:absolute; background:var(--accent-gold); }
.brand-mark::before{ left:9px; top:0; width:2px; height:20px; }
.brand-mark::after{ top:9px; left:0; width:20px; height:2px; }
.nav-links{ display:flex; gap:2.2rem; font-size:0.82rem; letter-spacing:0.03em; }
.nav-links a{ color:var(--text-dim); position:relative; padding-bottom:4px; transition:color 0.25s ease; }
.nav-links a:hover, .nav-links a.current{ color:var(--text); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent-gold); transition:width 0.25s ease;
}
.nav-links a:hover::after, .nav-links a.current::after{ width:100%; }
.nav-toggle{display:none;}

/* HERO (home only) */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:0 5vw 8vw; overflow:hidden;
}
#starfield{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 100%, rgba(217,142,74,0.10), transparent 55%),
             linear-gradient(to top, rgba(10,12,20,1) 0%, rgba(10,12,20,0.2) 45%, transparent 75%);
  pointer-events:none;
}
.hero-content{position:relative; z-index:2; max-width:780px;}
.hero .readout{margin-bottom:22px;}
.hero h1{ font-size:clamp(2.8rem, 7.2vw, 5.4rem); font-weight:600; line-height:1.02; margin-bottom:22px; }
.hero h1 em{ font-style:italic; color:var(--text); }
.hero p{ color:var(--text-dim); max-width:520px; font-size:1rem; margin-bottom:36px; }
.scroll-cue{
  position:absolute; bottom:36px; right:5vw; z-index:2;
  font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--text-dim);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue .line{width:1px; height:38px; background:linear-gradient(var(--accent-gold), transparent);}

/* PAGE HEAD (subpages) */
.page-hero{
  padding:160px 5vw 60px;
  border-bottom:1px solid var(--line);
}
.page-hero h1{ font-size:clamp(2.4rem, 5.5vw, 4rem); font-weight:600; margin-bottom:14px; }
.page-hero p{ color:var(--text-dim); max-width:600px; font-size:1.05rem; }

/* ORIGIN / SAGAN SECTION */
.origin{
  padding:0; position:relative; min-height:78vh; display:flex; align-items:center;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.origin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; width:100%; padding:100px 5vw; }
.origin-quote{ font-family:'Fraunces', serif; font-weight:400; font-style:italic; font-size:clamp(1.3rem, 2.2vw, 1.7rem); line-height:1.5; color:var(--text); }
.origin-quote cite{ display:block; margin-top:24px; font-family:'JetBrains Mono', monospace; font-style:normal; font-size:0.72rem; color:var(--text-dim); letter-spacing:0.04em; }
.voyager-panel{ position:relative; aspect-ratio:1/1; max-width:420px; margin:0 auto; }
.voyager-panel img{ width:100%; height:100%; object-fit:cover; display:block; border:1px solid var(--line); }
.voyager-caption{ text-align:center; margin-top:18px; font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--text-dim); letter-spacing:0.04em; }
@media (max-width:820px){ .origin-grid{grid-template-columns:1fr; padding:80px 6vw; gap:48px;} }

section{ padding:72px 5vw; position:relative; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;
  margin-bottom:40px; border-bottom:1px solid var(--line); padding-bottom:22px;
}
.section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:400; }
.section-num{ font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--accent-gold); letter-spacing:0.05em; }

/* SETUP - datasheet */
.setup-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.setup-card{ background:var(--bg); padding:32px 28px; transition:background 0.3s ease, box-shadow 0.3s ease; position:relative; }
.setup-card:hover{ background:var(--surface-solid); box-shadow:inset 3px 0 0 var(--accent-gold); }
.setup-card .label{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; color:var(--accent-blue); text-transform:uppercase; margin-bottom:14px; display:block; }
.setup-card ul{list-style:none;}
.setup-card li{ font-size:0.92rem; color:var(--text-dim); padding:6px 0; border-bottom:1px dashed var(--line-soft); }
.setup-card li:last-child{border-bottom:none;}
.setup-note{ margin-top:28px; font-size:0.9rem; color:var(--text-dim); max-width:640px; border-left:2px solid var(--accent-gold); padding-left:20px; }
.setup-intro{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:48px; align-items:center; margin-bottom:56px; }
.setup-hero{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); }
.setup-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.setup-intro-text p{ color:var(--text-dim); font-size:1.08rem; margin-bottom:16px; }
.setup-intro-text p:last-child{ margin-bottom:0; }
@media (max-width:760px){ .setup-intro{grid-template-columns:1fr;} }

/* OBSERVATORY - split */
.split{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:56px; align-items:center; }
.obs-visual{
  height:0; padding-bottom:85%; border-radius:2px;
  background:radial-gradient(circle at 65% 30%, rgba(217,142,74,0.35), transparent 45%),
             radial-gradient(circle at 30% 70%, rgba(108,137,184,0.35), transparent 50%),
             linear-gradient(160deg, #171c33, #0a0c14);
  position:relative; overflow:hidden; border:1px solid var(--line);
}
.obs-visual .tag{ position:absolute; bottom:18px; left:18px; }
.split-text p{color:var(--text-dim); margin-bottom:18px; font-size:1.08rem;}
.obs-detail{ margin-top:56px; max-width:720px; }
.obs-detail-img{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); }
.obs-detail-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.obs-detail-caption{ margin-top:14px; font-size:0.85rem; color:var(--text-dim); font-family:'JetBrains Mono', monospace; letter-spacing:0.01em; line-height:1.5; }
.obs-gallery{ margin-top:32px; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.obs-gallery-item{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line); transition:border-color 0.3s ease; }
.obs-gallery-item:hover{ border-color:var(--accent-gold); }
.obs-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.obs-gallery-item:hover img{ transform:scale(1.06); }
@media (max-width:760px){ .obs-gallery{grid-template-columns:repeat(2, 1fr);} }

/* GALLERY */
.gallery-intro{max-width:600px; color:var(--text-dim); margin-bottom:48px; font-size:1.05rem;}
.gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:160px; gap:14px; margin-bottom:48px; }
.plate{
  position:relative; border:1px solid var(--line); overflow:hidden; cursor:pointer;
  grid-column:span 1; grid-row:span 2; transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.plate:hover{border-color:var(--accent-gold); box-shadow:0 0 24px rgba(230,146,33,0.2);}
.plate.wide{grid-column:span 2;}
.plate.tall{grid-row:span 3;}
.plate.big{grid-column:span 2; grid-row:span 3;}
.plate.full{grid-column:1 / -1; grid-row:span 3;}
@media (max-width:760px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:130px;}
  .plate.big, .plate.wide{grid-column:span 2;}
  .plate.full{grid-column:1 / -1;}
}
.plate .field{ position:absolute; inset:0; transition:transform 0.6s ease; }
.plate:hover .field{transform:scale(1.08);}
.plate1 .field{background:radial-gradient(circle at 50% 45%, #e8955a 0%, #4a2e5c 35%, #0a0c14 75%);}
.plate2 .field{background:radial-gradient(circle at 40% 60%, #6c89b8 0%, #24263f 40%, #0a0c14 75%);}
.plate3 .field{background:radial-gradient(circle at 60% 40%, #b8567a 0%, #2c2450 40%, #0a0c14 75%);}
.plate4 .field{background:radial-gradient(circle at 50% 50%, #d98e4a 0%, #33244a 45%, #0a0c14 78%);}
.plate5 .field{background:radial-gradient(circle at 45% 55%, #7a4fa0 0%, #b8567a 30%, #241f42 55%, #0a0c14 78%);}
.plate::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,20,0.9), transparent 55%); }
.plate .coord{ position:absolute; bottom:12px; left:14px; right:14px; z-index:2; font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--text-dim); }
.plate .coord strong{display:block; color:var(--text); font-size:0.85rem; font-weight:500; font-family:'Fraunces', serif;}
.plate .coord .sub{display:block; margin-top:1px;}
.plate .coord .meta{ display:block; margin-top:6px; font-size:0.62rem; color:#6b7290; letter-spacing:0.03em; }
.gallery-cta{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px;
  padding:48px; border:1.5px solid var(--accent-gold); background:var(--surface-solid);
  box-shadow:0 0 40px rgba(230,146,33,0.12);
}
.gallery-cta h3{ font-size:1.5rem; margin-bottom:8px; }
.gallery-cta p{color:var(--text-dim); max-width:460px; font-size:1.08rem;}
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:20px 40px;
  border:2px solid var(--accent-gold); color:var(--accent-gold);
  font-family:'JetBrains Mono', monospace; font-size:0.92rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  transition:background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  white-space:nowrap; box-shadow:0 0 0 rgba(230,146,33,0);
}
.btn:hover{background:var(--accent-gold); color:#0a0c14; box-shadow:0 0 40px rgba(230,146,33,0.55); transform:translateY(-2px);}

/* ABOUT */
.about-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:start; }
.about-portrait{
  height:0; padding-bottom:133.33%; background:linear-gradient(160deg, #171c33, #0a0c14);
  border:1px solid var(--line); position:relative;
}
.about-portrait::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, rgba(108,137,184,0.25), transparent 60%); }
.about-text p{color:var(--text-dim); margin-bottom:18px; font-size:1.1rem; max-width:600px;}
.about-text .signature{ font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem; color:var(--text); margin-top:28px; }

/* FRIENDS */
.friends-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.friend-card{
  background:var(--bg); padding:26px 28px; display:flex; align-items:center; gap:16px;
  transition:background 0.25s ease; color:var(--text);
}
.friend-card:hover{background:var(--surface-solid);}
.friend-icon{ flex-shrink:0; width:30px; height:30px; color:var(--accent-blue); transition:color 0.25s ease, transform 0.35s ease; }
.friend-icon svg{ width:100%; height:100%; display:block; }
.friend-card:hover .friend-icon{ color:var(--accent-gold); transform:rotate(-8deg) scale(1.1); }
.friend-card-body{ flex:1; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.friend-card span{font-size:0.95rem;}
.friend-card .arrow{color:var(--accent-gold); font-family:'JetBrains Mono', monospace;}

/* FOOTER */
footer{
  padding:56px 5vw 40px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
footer .mono{color:var(--text-dim); font-size:0.75rem;}
.socials{display:flex; gap:20px;}
.socials a{
  color:var(--text-dim); font-family:'JetBrains Mono', monospace; font-size:0.75rem;
  border-bottom:1px solid transparent; transition:border-color 0.25s ease, color 0.25s ease;
}
.socials a:hover{color:var(--text); border-color:var(--accent-gold);}

@media (max-width:860px){
  .split, .about-grid{grid-template-columns:1fr;}
  .about-portrait{max-width:280px;}
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--surface-solid); flex-direction:column; justify-content:center; gap:2rem;
    padding:0 40px; transform:translateX(100%); transition:transform 0.35s ease;
    border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:110; padding:6px; }
  .nav-toggle span{width:22px; height:1.5px; background:var(--text);}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}