/* ==========================================================================
   riff — style system
   Underground audio hardware meets experimental editorial design.
   ========================================================================== */

@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/archivo-variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('assets/fonts/hanken-grotesk-variable.woff2') format('woff2');
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* color */
  --c-black:#0b0b0c;
  --c-graphite-1:#151517;
  --c-graphite-2:#2b2b2f;
  --c-graphite-3:#46464b;
  --c-offwhite:#f2ede3;
  --c-ink:#17171a;
  --c-ink-muted:#5c584f;
  --c-ink-line:rgba(23,23,26,0.14);
  --c-silver:#c7cbd1;
  --c-silver-bright:#eef0f1;
  --c-white:#f5f3ee;
  --c-muted:#94949a;
  --c-active:#f5f3ee;
  --c-active-dim:#38383c;

  /* type */
  --font-display:'Archivo', Arial Black, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

  --fs-hero: clamp(3.4rem, 4.4vw + 2.1rem, 8.4rem);
  --fs-h2: clamp(2.1rem, 1.6vw + 1.5rem, 3.6rem);
  --fs-h3: clamp(1.3rem, 0.7vw + 1.05rem, 1.7rem);
  --fs-lead: clamp(1.125rem, 0.4vw + 1rem, 1.4rem);
  --fs-body: 1rem;
  --fs-label: 0.8125rem;
  --fs-num: clamp(2.6rem, 3vw + 1rem, 5.5rem);

  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:140px;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1440px;

  /* motion */
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-fast:150ms; --dur-med:420ms; --dur-slow:900ms;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  background:var(--c-black);
  color:var(--c-white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}
button{font:inherit;}

::selection{background:var(--c-active); color:var(--c-black);}
.principles ::selection{background:var(--c-ink); color:var(--c-offwhite);}

:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--c-active);
  outline-offset:4px;
}
.principles :focus-visible{
  outline-color:var(--c-ink);
}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---- skip link ---- */
.skip-link{
  position:absolute;
  left:var(--sp-4);
  top:-60px;
  background:var(--c-white);
  color:var(--c-black);
  padding:12px 18px;
  font-family:var(--font-mono);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  z-index:200;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:var(--sp-4);}

/* ---- meta label / eyebrow ---- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--c-muted);
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}
.eyebrow::before{
  content:"";
  width:20px;
  height:1px;
  background:var(--c-graphite-3);
  display:inline-block;
}

/* ---- header ---- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:var(--sp-5);
  padding:18px var(--gutter);
  background:rgba(11,11,12,0);
  border-bottom:1px solid transparent;
  transition:background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.site-header.is-scrolled{
  background:rgba(11,11,12,0.86);
  border-bottom-color:var(--c-graphite-2);
}
@supports (backdrop-filter: blur(6px)){
  .site-header.is-scrolled{ backdrop-filter:blur(6px); }
}
.site-header nav{justify-self:end;}
@media (max-width:1180px){
  .site-header{grid-template-columns:auto 1fr; row-gap:6px; padding-top:12px; padding-bottom:12px;}
  .site-header nav{grid-column:2; grid-row:1;}
  .header-notice{grid-column:1 / -1; grid-row:2;}
}
.brand{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-height:44px;
}
.brand img{
  height:24px;
  width:auto;
}
.brand:focus-visible{outline-offset:6px;}

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
}
.nav-links a{
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--c-muted);
  padding:10px 2px;
  position:relative;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:6px;
  height:1px;
  background:var(--c-silver-bright);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-med) var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible{
  color:var(--c-white);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{
  transform:scaleX(1);
}
.nav-icon{width:16px; height:16px; vertical-align:-3px; margin-right:6px;}

@media (max-width:480px){
  .nav-links{gap:var(--sp-4);}
  .nav-label{display:none;}
  .nav-icon{margin-right:0;}
  .brand img{height:20px;}
}

/* ---- text links ---- */
.text-link{
  text-decoration:none;
  font-weight:600;
  color:var(--c-white);
  background-image:linear-gradient(var(--c-silver-bright), var(--c-silver-bright));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  padding-bottom:3px;
  transition:background-size var(--dur-med) var(--ease);
}
.text-link:hover, .text-link:focus-visible{background-size:100% 1px;}
.text-link--muted{color:var(--c-muted);}

/* ---- buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font-family:var(--font-mono);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.09em;
  text-decoration:none;
  padding:15px 24px;
  min-height:44px;
  border:1px solid var(--c-silver-bright);
  background:var(--c-silver-bright);
  color:var(--c-black);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover, .btn:focus-visible{background:transparent; color:var(--c-silver-bright);}
.btn.ghost{background:transparent; color:var(--c-white); border-color:var(--c-graphite-3);}
.btn.ghost:hover, .btn.ghost:focus-visible{border-color:var(--c-silver-bright); color:var(--c-silver-bright);}

/* ---- status ---- */
.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--c-muted);
}
.status .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-graphite-3);
  flex:none;
}
.status.is-live .dot{
  background:var(--c-active);
  box-shadow:0 0 0 4px rgba(245,243,238,0.18);
}
.status.is-live{color:var(--c-silver-bright);}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:calc(var(--sp-9) + 20px) 0 var(--sp-9);
  border-bottom:1px solid var(--c-graphite-2);
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-8);
}
.hero-copy{
  max-width:640px;
}
.hero-copy .eyebrow{margin-bottom:var(--sp-6);}
.hero h1{
  font-size:var(--fs-hero);
  line-height:0.86;
  text-transform:lowercase;
  color:var(--c-silver-bright);
  margin-bottom:var(--sp-5);
}
.hero-statement{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h3);
  color:var(--c-white);
  text-transform:lowercase;
  max-width:20ch;
  margin-bottom:var(--sp-5);
  letter-spacing:-0.01em;
}
.hero-lead{
  font-size:var(--fs-lead);
  color:var(--c-muted);
  max-width:46ch;
  margin-bottom:var(--sp-7);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-6);
  margin-bottom:var(--sp-8);
}
.hero-status-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-5);
  align-items:center;
  padding-top:var(--sp-6);
  border-top:1px solid var(--c-graphite-2);
}

.sculpture-wrap{
  position:relative;
  width:100%;
  height:clamp(220px, 32vw, 420px);
  margin-top:var(--sp-4);
  perspective:1400px;
}
.sculpture{
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.3s var(--ease);
  will-change:transform;
}
.sculpture svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.ribbon-anim{
  transform-box:fill-box;
  transform-origin:center;
  animation:ribbonBob 9s ease-in-out infinite;
}
@keyframes ribbonBob{
  0%,100%{ transform:translateY(0) scaleY(1); }
  50%{ transform:translateY(-6px) scaleY(1.015); }
}
.anim-paused .ribbon-anim{ animation-play-state:paused; }

.hero h1{
  animation:heroResolve 1.1s var(--ease) both;
}
@keyframes heroResolve{
  from{ opacity:0; clip-path:inset(0 0 100% 0); }
  to{ opacity:1; clip-path:inset(0 0 0% 0); }
}

.sculpture-fallback-note{
  position:absolute;
  bottom:-2px;
  right:0;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--c-graphite-3);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ==========================================================================
   NOTICE
   ========================================================================== */
.header-notice{
  justify-self:center;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:var(--c-silver-bright);
}
.notice-label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.14em;
  margin-right:6px;
  white-space:nowrap;
}
.notice-label::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  background:var(--c-silver-bright);
  margin-right:7px;
  vertical-align:1px;
}
.notice-link{
  color:var(--c-silver-bright);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */
section{position:relative;}
.section-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--sp-6);
  margin-bottom:var(--sp-8);
}
.section-head h2{
  font-size:var(--fs-h2);
  line-height:1.02;
  text-transform:lowercase;
  color:var(--c-silver-bright);
  max-width:14ch;
}
.section-note{
  max-width:36ch;
  color:var(--c-muted);
  font-size:0.95rem;
}

/* ==========================================================================
   HOW IT WORKS — signal path
   ========================================================================== */
.how{
  padding:var(--sp-10) 0;
  border-bottom:1px solid var(--c-graphite-2);
}
.signal-path{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-6);
  padding-top:var(--sp-6);
}
.signal-path::before{
  content:"";
  position:absolute;
  left:0; right:0; top:32px;
  height:1px;
  background:linear-gradient(90deg, var(--c-graphite-3), var(--c-silver) 20%, var(--c-silver) 80%, var(--c-graphite-3));
}
.signal-step{
  position:relative;
  padding-top:var(--sp-7);
}
.signal-step::before{
  content:"";
  position:absolute;
  top:24px; left:0;
  width:16px; height:16px;
  background:var(--c-black);
  border:2px solid var(--c-silver);
  border-radius:50%;
}
.signal-step:first-child::before{background:var(--c-active); border-color:var(--c-active);}
.signal-num{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--c-muted);
  letter-spacing:0.1em;
  display:block;
  margin-bottom:var(--sp-3);
}
.signal-step h3{
  font-size:1.3rem;
  text-transform:lowercase;
  margin-bottom:var(--sp-3);
  color:var(--c-silver-bright);
}
.signal-step p{
  color:var(--c-muted);
  font-size:0.98rem;
  max-width:34ch;
}
.how-note{
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  border-top:1px solid var(--c-graphite-2);
  max-width:64ch;
  color:var(--c-muted);
  font-size:0.95rem;
}
.how-note strong{color:var(--c-silver-bright); font-weight:600;}

@media (max-width:860px){
  .signal-path{
    grid-template-columns:1fr;
    gap:var(--sp-7);
  }
  .signal-path::before{
    left:7px; right:auto; top:0; bottom:0; width:1px; height:auto;
    background:linear-gradient(180deg, var(--c-graphite-3), var(--c-silver) 15%, var(--c-silver) 85%, var(--c-graphite-3));
  }
  .signal-step{padding-top:0; padding-left:var(--sp-7);}
  .signal-step::before{top:4px; left:0;}
}

/* ==========================================================================
   PRINCIPLES — manifesto
   ========================================================================== */
.principles{
  padding:var(--sp-10) 0;
  background:var(--c-offwhite);
  color:var(--c-ink);
  border-bottom:1px solid var(--c-graphite-2);
}
.principles .section-head h2{color:var(--c-ink);}
.principles .section-note{color:var(--c-ink-muted);}
.manifesto{
  border-top:1px solid var(--c-ink-line);
}
.manifesto li{
  border-bottom:1px solid var(--c-ink-line);
  padding:var(--sp-5) 0;
  display:flex;
  align-items:baseline;
  gap:var(--sp-5);
}
.manifesto li span.idx{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--c-ink-muted);
  width:2.4em;
  flex:none;
}
.manifesto li p{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.3rem, 1.6vw + 1rem, 2.2rem);
  text-transform:lowercase;
  letter-spacing:-0.01em;
}
.principles-note{
  margin-top:var(--sp-7);
  max-width:66ch;
  color:var(--c-ink-muted);
  font-size:0.95rem;
  padding-top:var(--sp-6);
  border-top:1px solid var(--c-ink-line);
}

/* ==========================================================================
   ROADMAP
   ========================================================================== */
.roadmap{
  padding:var(--sp-10) 0;
  border-bottom:1px solid var(--c-graphite-2);
}
.roadmap-list{
  position:relative;
  border-top:1px solid var(--c-graphite-2);
}
.roadmap-track{
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background:var(--c-graphite-2);
}
.roadmap-progress{
  position:absolute;
  left:0; top:0;
  width:1px;
  height:0%;
  background:var(--c-active);
  transition:height 0.2s linear;
}
.roadmap-item{
  position:relative;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:var(--sp-6);
  padding:var(--sp-7) 0;
  border-bottom:1px solid var(--c-graphite-2);
  padding-left:var(--sp-6);
}
.roadmap-item::before{
  content:"";
  position:absolute;
  left:-4px; top:var(--sp-7);
  width:9px; height:9px;
  background:var(--c-black);
  border:1px solid var(--c-graphite-3);
  border-radius:50%;
}
.roadmap-item.is-active::before{
  background:var(--c-active);
  border-color:var(--c-active);
  box-shadow:0 0 0 5px rgba(245,243,238,0.16);
}
.roadmap-num{
  font-family:var(--font-mono);
  font-size:var(--fs-num);
  line-height:0.9;
  color:var(--c-graphite-3);
}
.roadmap-item.is-active .roadmap-num{color:var(--c-active);}
.roadmap-body h3{
  font-size:clamp(1.4rem, 1.2vw + 1.1rem, 2rem);
  text-transform:lowercase;
  color:var(--c-silver-bright);
  margin-bottom:var(--sp-3);
}
.roadmap-item:not(.is-active) h3{color:var(--c-muted);}
.roadmap-body p{
  color:var(--c-muted);
  max-width:56ch;
  margin-bottom:var(--sp-4);
}

@media (max-width:640px){
  .roadmap-item{grid-template-columns:1fr; gap:var(--sp-3);}
  .roadmap-num{font-size:2.4rem;}
}

/* ==========================================================================
   UPDATES
   ========================================================================== */
.updates{
  padding:var(--sp-10) 0;
  border-bottom:1px solid var(--c-graphite-2);
}
.updates .container{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--sp-9);
  align-items:end;
}
.updates h2{
  font-size:var(--fs-h2);
  line-height:1.02;
  text-transform:lowercase;
  color:var(--c-silver-bright);
}
.updates-body p{
  color:var(--c-muted);
  max-width:44ch;
  margin-bottom:var(--sp-6);
  font-size:var(--fs-lead);
}
.updates-links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-6);
  padding-top:var(--sp-5);
  border-top:1px solid var(--c-graphite-2);
}
.updates-links a{
  font-family:var(--font-mono);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

@media (max-width:860px){
  .updates .container{grid-template-columns:1fr; gap:var(--sp-6);}
}

/* ==========================================================================
   DISCLAIMER
   ========================================================================== */
.disclaimer{
  padding:var(--sp-8) 0;
  border-bottom:1px solid var(--c-graphite-2);
}
.disclaimer p{
  font-size:0.9rem;
  color:var(--c-muted);
  max-width:80ch;
  line-height:1.7;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  padding:var(--sp-7) 0 var(--sp-8);
}
.footer-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--sp-6);
}
.footer-brand{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.6rem;
  text-transform:lowercase;
  color:var(--c-silver-bright);
}
.footer-meta{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--c-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:right;
}
.footer-links{
  display:flex;
  gap:var(--sp-5);
  margin-top:var(--sp-6);
  padding-top:var(--sp-6);
  border-top:1px solid var(--c-graphite-2);
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--c-graphite-2);
  text-decoration:none;
  color:var(--c-muted);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer-links a:hover, .footer-links a:focus-visible{
  border-color:var(--c-silver-bright);
  color:var(--c-silver-bright);
}
.footer-links svg{width:18px; height:18px;}

@media (max-width:640px){
  .footer-meta{text-align:left; align-items:flex-start;}
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease), clip-path 0.7s var(--ease);
  clip-path:inset(0 0 8% 0);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  clip-path:inset(0 0 0% 0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; clip-path:none; transition:none;}
}

/* ==========================================================================
   REDUCED MOTION / NO-JS GLOBAL GUARDS
   ========================================================================== */
.no-js .reveal{opacity:1; transform:none; clip-path:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* generic film-grain texture, extremely low opacity, decorative only */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.035;
  mix-blend-mode:overlay;
  background-image:url('assets/grain.svg');
  background-size:180px;
}

/* ==========================================================================
   RESPONSIVE — large screens
   ========================================================================== */
@media (min-width:1600px){
  :root{ --gutter:96px; }
}

/* ---- utility ---- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}