/* ============================================================
   NaadLabs — shared design system
   "A precision robotics lab inside the soul of an ancient instrument."
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root{
  /* surfaces — warm near-black, tuned to melt into the render */
  --void:   #0c0a09;
  --char:   #131010;
  --char2:  #1a1612;
  --raise:  #211b16;

  /* type */
  --ink:    #ece3d4;   /* warm cream */
  --ink-2:  #b8ab98;   /* muted warm */
  --ink-3:  #7c7264;   /* faint */

  /* metals */
  --gold:    #c9a24e;
  --gold-hi: #e6c47e;
  --copper:  #b06a3c;
  --brass:   #9c7e3f;
  --plum:    #7a4574;  /* heritage accent, used sparingly */

  /* lines */
  --hair:    rgba(201,162,78,0.16);
  --hair-2:  rgba(236,227,212,0.09);
  --hair-3:  rgba(201,162,78,0.30);

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  font-size:17px;
  letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* faint blueprint grid wash over the whole page */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(201,162,78,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,78,0.035) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(120% 120% at 50% 0%, #000 0%, transparent 75%);
  pointer-events:none;
  z-index:0;
  opacity:.7;
}

a{ color:inherit; text-decoration:none; }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
img{ display:block; max-width:100%; }
picture{ display:block; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); position:relative; z-index:1; }

/* ---------- type primitives ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--hair-3);
  display:inline-block;
}
.eyebrow.center::before{ display:none; }

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
  font-size:clamp(40px, 7vw, 92px);
}
.display em{ font-style:italic; color:var(--gold-hi); font-weight:500; }

h2.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(30px, 4.4vw, 54px);
  line-height:1.06;
  letter-spacing:-0.01em;
  margin:0;
}
h2.section-title em{ font-style:italic; color:var(--gold-hi); }

.lede{
  font-size:clamp(18px, 1.7vw, 21px);
  color:var(--ink-2);
  line-height:1.62;
  max-width:60ch;
  font-weight:300;
}
p{ color:var(--ink-2); }
strong{ color:var(--ink); font-weight:500; }

.mono-note{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.04em;
  color:var(--ink-3);
  line-height:1.7;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:15px 24px;
  border-radius:2px;
  border:1px solid var(--hair-3);
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
  position:relative;
}
.btn .arrow{ transition:transform .35s ease; }
.btn:hover .arrow{ transform:translateX(5px); }
.btn.primary{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  color:#1c1408;
  border-color:transparent;
  font-weight:500;
}
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(201,162,78,0.22); }
.btn.ghost:hover{ border-color:var(--gold); color:var(--gold-hi); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* link with growing underline */
.ul{ position:relative; color:var(--ink); }
.ul::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.ul:hover{ color:var(--gold-hi); }
.ul:hover::after{ transform:scaleX(1); }

/* ---------- hairline section separators ---------- */
.rule{ height:1px; background:var(--hair); border:0; margin:0; }
section{ position:relative; }

/* blueprint corner ticks for framed plates */
.plate{ position:relative; }
.plate::before, .plate::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border-color:var(--hair-3); border-style:solid;
}
.plate::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.plate::after{  bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

/* ---------- header / nav ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.site-head.solid{
  background:rgba(12,10,9,0.82);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--hair);
}
.head-inner{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand img{ width:38px; height:38px; }
.brand .wm{
  font-family:var(--sans); font-weight:600; font-size:17px;
  letter-spacing:0.22em; color:var(--ink);
}
.brand .wm b{ color:var(--gold); font-weight:600; }
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-family:var(--mono); font-size:13px; letter-spacing:0.06em; color:var(--ink-2);
  transition:color .3s ease;
}
.nav a:hover, .nav a.active{ color:var(--gold-hi); }
.nav a:focus-visible, .nav-cta:focus-visible{
  outline:2px solid var(--gold); outline-offset:4px; border-radius:2px; color:var(--gold-hi);
}
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--hair-3); border-radius:2px; color:var(--ink);
  transition:border-color .3s ease, color .3s ease;
}
.nav-cta:hover{ border-color:var(--gold); color:var(--gold-hi); }

/* primary nav — uses <details>/<summary> so basic open/close works without JS */
.primary-nav{ display:inline-block; }
.primary-nav > summary{
  list-style:none; cursor:pointer; padding:8px;
  background:none; border:0; color:var(--ink);
  display:none;  /* hidden by default on desktop */
}
.primary-nav > summary::-webkit-details-marker{ display:none; }
.primary-nav > summary::marker{ content:''; }
.primary-nav > summary:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* desktop: always show nav inline, regardless of details open/close state */
@media (min-width: 901px){
  details.primary-nav > nav.nav{ display:flex; }
}

@media (max-width: 900px){
  .primary-nav > summary{
    display:inline-flex; align-items:center; z-index:61; position:relative;
  }
  details.primary-nav > nav.nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,360px);
    background:rgba(12,10,9,0.97); backdrop-filter:blur(16px);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:40px var(--pad); gap:26px;
    border-left:1px solid var(--hair); z-index:60;
  }
  /* drawer visible only when <details open> — falls back to UA default when closed */
  details.primary-nav[open] > nav.nav{ display:flex; }
  details.primary-nav > nav.nav a,
  details.primary-nav > nav.nav .nav-cta{ font-size:16px; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--hair); margin-top:0; }
.foot-inner{ padding:64px 0 48px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot-brand{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.foot-brand img{ width:46px; height:46px; }
.foot-brand .wm{ font-weight:600; letter-spacing:0.22em; }
.foot-brand .wm b{ color:var(--gold); }
.foot-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-weight:500; }
.foot-col a{ display:block; color:var(--ink-2); font-size:14.5px; margin-bottom:11px; transition:color .3s; }
.foot-col a:hover{ color:var(--gold-hi); }
.foot-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:24px 0 56px; border-top:1px solid var(--hair-2); }
.foot-bottom span{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:0.03em; }
@media (max-width:760px){ .foot-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-inner{ grid-template-columns:1fr; } }

/* utility */
.center{ text-align:center; }
.spacer-xl{ height:clamp(80px,11vw,150px); }
.spacer-lg{ height:clamp(56px,8vw,104px); }
.fade-edges{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),
                     linear-gradient(0deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}