/* ============================================================
   CYGNUS DESIGN SYSTEM — single source of truth.
   Every page links this file. Change a token here, it changes
   everywhere. Page-specific CSS lives in that page's <style>.
   ============================================================ */

:root{
    /* colour */
    --bg:#050505; --bg-raise:#0b0b0b;
    --text:#f0f0f0; --text-dim:#8c8c8c; --text-mute:#555;
    --accent:#c5a059; --accent-soft:rgba(197,160,89,.45);
    --hairline:rgba(255,255,255,.09);

    /* WORDMARK GOLD — the CYGNUS title gradient.
       --gold-hi is the top, --gold-lo the bottom.
         warmer:  #ecdcae / #cfae72   (closer to true accent gold)
         current: #f4ead2 / #d8bd85   (pale champagne, reads gold, stays legible)
         cooler:  #f8f3e6 / #e4d3a8   (barely gold, mostly warm white) */
    --gold-hi:#f4ead2; --gold-lo:#d8bd85;

    /* type scale */
    --t-display:clamp(2.8rem,11vw,8rem);
    --t-h2:clamp(1.7rem,4.4vw,3rem);
    --t-lede:clamp(1.2rem,2.6vw,1.9rem);
    --t-body:1.02rem; --t-label:.62rem;
    --measure:34rem;                      /* reading column, ~66 characters */

    /* motion + layout */
    --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.5,0,.2,1);
    --gutter:clamp(24px,6vw,80px); --maxw:1280px;

    /* legacy aliases so older page CSS keeps resolving */
    --bg-color:var(--bg); --text-color:var(--text); --accent-color:var(--accent);
    --txt:var(--text); --gold:var(--accent); --dim:var(--text-dim);
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body,html{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Manrope',sans-serif;font-weight:300;overflow-x:hidden;}
h1,h2,h3,.disp{font-family:'Inter',sans-serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.label{font-size:var(--t-label);letter-spacing:.34rem;text-transform:uppercase;
  color:var(--text-dim);font-family:'Inter';}
.wrap{max-width:var(--maxw);margin:0 auto;}

/* ---------- cinematic overlays ---------- */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9000;
  opacity:.045;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(3) infinite;}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:8999;
  background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5) 100%);}

/* ---------- scroll progress + nav ---------- */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);
  z-index:9700;transition:width .1s linear;}
.nav-bar{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:center;
  gap:clamp(20px,4vw,44px);padding:26px 0;z-index:9600;
  transition:background .5s,backdrop-filter .5s,padding .5s,border-color .5s;
  border-bottom:1px solid transparent;}
.nav-bar.scrolled{background:rgba(5,5,5,.72);backdrop-filter:blur(10px);
  border-bottom-color:var(--hairline);padding:16px 0;}
.nav-bar a{font-size:.68rem;letter-spacing:.3rem;text-transform:uppercase;color:var(--text);
  transition:color .3s;font-family:'Inter';opacity:.85;}
.nav-bar a:hover{color:var(--accent);opacity:1;}
.nav-bar a[aria-current="page"],
.nav-bar a.active{color:var(--accent);opacity:1;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.12s;} .d2{transition-delay:.24s;} .d3{transition-delay:.36s;}
.d4{transition-delay:.48s;} .d5{transition-delay:.60s;}

/* ---------- the wordmark ---------- */
.wordmark{font-family:'Inter',sans-serif;font-weight:100;text-transform:uppercase;
  color:var(--gold-hi);
  background:linear-gradient(175deg,var(--gold-hi) 0%,var(--gold-hi) 38%,var(--gold-lo) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 20px rgba(197,160,89,.28)) drop-shadow(0 2px 3px rgba(0,0,0,.55));}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark{color:var(--gold-hi);-webkit-text-fill-color:currentColor;background:none;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 42px;
  border:1px solid var(--accent-soft);color:var(--accent);font-family:'Inter';
  font-size:.66rem;letter-spacing:.28rem;text-transform:uppercase;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);}
.btn .arw{transition:transform .35s var(--ease);}
.btn:hover{background:var(--accent);color:#000;border-color:var(--accent);}
.btn:hover .arw{transform:translateX(5px);}

/* ---------- footer ---------- */
footer{padding:clamp(70px,12vh,120px) var(--gutter);text-align:center;
  border-top:1px solid var(--hairline);}
footer .mark{font-family:'Inter';font-weight:100;font-size:1.1rem;letter-spacing:.6rem;
  padding-left:.6rem;color:var(--text-dim);}
footer .fine{margin-top:20px;font-size:.6rem;letter-spacing:.24rem;text-transform:uppercase;
  color:#3f3f3f;font-family:'Inter';}
/* the About page lives in the footer on purpose: it keeps the main nav in-world */
footer .fine-links{margin-top:14px;font-size:.6rem;letter-spacing:.24rem;
  text-transform:uppercase;font-family:'Inter';}
footer .fine-links a{color:#5a5a5a;border-bottom:1px solid transparent;
  padding-bottom:3px;transition:color .3s,border-color .3s;}
footer .fine-links a:hover{color:var(--accent);border-bottom-color:var(--accent-soft);}

/* ---------- ambient audio toggle ---------- */
#audio-toggle{position:fixed;bottom:24px;right:26px;z-index:9600;display:flex;
  align-items:center;gap:9px;background:none;border:none;cursor:pointer;
  color:var(--text-dim);font-family:'Inter';font-size:.58rem;letter-spacing:.22rem;
  text-transform:uppercase;transition:color .3s;}
#audio-toggle:hover{color:var(--accent);}
.eq{display:flex;align-items:flex-end;gap:2px;height:12px;}
.eq span{width:2px;height:3px;background:currentColor;}
#audio-toggle.on .eq span{animation:eq 1s ease-in-out infinite;}
#audio-toggle.on .eq span:nth-child(2){animation-delay:.15s;}
#audio-toggle.on .eq span:nth-child(3){animation-delay:.3s;}
#audio-toggle.on .eq span:nth-child(4){animation-delay:.45s;}
@keyframes eq{0%,100%{height:3px;}50%{height:12px;}}

/* ---------- accessibility ---------- */
:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  .grain{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}