/* =========================================================================
   base.css, global element styles + reusable atoms.
   Everything references SEMANTIC tokens from tokens.css. Zero raw hex.
   Class prefix: nam-
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500;600&family=Fraunces:ital,wght@0,300;0,400;1,300;1,400&display=swap');

*{ box-sizing:border-box; }
html,body,#root{ margin:0; padding:0; min-height:100%; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg-dark);
  color:var(--fg-on-dark-2);
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--fs-16);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:#fff; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ cursor:pointer; color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* Layout */
.nam-container{ max-width:1280px; margin:0 auto; padding:0 var(--sp-12); }
@media(max-width:720px){ .nam-container{ padding:0 var(--sp-6); } }

.nam-section{ padding:var(--sp-24) 0; position:relative; }
.nam-section--tight{ padding:var(--sp-16) 0; }

/* Surfaces */
.nam-surface-void{ background:var(--bg-dark); }
.nam-surface-elev{ background:var(--bg-dark-elev); }

/* Starfield, drop into any void hero for atmospheric depth */
.nam-stars{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background:
    radial-gradient(1px 1px at 12% 24%, rgba(var(--glow-rgb),.55), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgba(var(--glow-rgb),.35), transparent 60%),
    radial-gradient(1px 1px at 64% 18%, rgba(var(--glow-rgb),.40), transparent 60%),
    radial-gradient(1px 1px at 82% 46%, rgba(var(--glow-rgb),.32), transparent 60%),
    radial-gradient(2px 2px at 48% 80%, rgba(var(--glow-rgb),.40), transparent 60%),
    radial-gradient(1px 1px at 90% 74%, rgba(var(--glow-rgb),.30), transparent 60%);
}

/* Typography */
.nam-display{
  font-family:var(--font-heading); font-weight:200;
  font-size:clamp(56px,7vw,96px); line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:0;
  text-wrap:balance;
}
.nam-display--lg{ font-weight:300; font-size:clamp(44px,5.4vw,72px); }
.nam-h1{ font-family:var(--font-heading); font-weight:300; font-size:clamp(40px,4.6vw,64px);
  line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:0; text-wrap:balance; }
.nam-h2{ font-family:var(--font-heading); font-weight:300; font-size:clamp(32px,3.6vw,48px);
  line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:0; text-wrap:balance; }
.nam-h3{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-32);
  line-height:var(--lh-snug); letter-spacing:-.01em; color:var(--fg-on-dark-1); margin:0; }
.nam-h4{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-24);
  line-height:var(--lh-snug); color:var(--fg-on-dark-1); margin:0; }

/* The single glow-pop clause inside a headline */
.nam-pop{
  color:var(--accent-hover); font-weight:400;
  text-shadow:0 0 18px rgba(var(--glow-rgb),.55), 0 0 48px rgba(var(--glow-rgb),.28);
}
/* Editorial italic emphasis (the one warmth lever) */
.nam-em{ font-family:var(--font-edit); font-style:italic; font-weight:400; color:var(--fg-on-dark-1); letter-spacing:var(--tracking-tight); }

.nam-eyebrow{
  font-family:var(--font-heading); font-weight:500;
  font-size:var(--fs-12); letter-spacing:var(--tracking-wider); text-transform:uppercase;
  color:var(--fg-on-dark-2);
}
.nam-eyebrow--accent{ color:var(--accent-hover); }

.nam-lede{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-18);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; }
.nam-body{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-16);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.nam-tagline{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-13);
  letter-spacing:var(--tracking-widest); text-transform:uppercase; color:var(--fg-on-dark-2); }

/* Accent rule under an eyebrow */
.nam-rule{ width:56px; height:2px; background:var(--accent); box-shadow:var(--glow-sm); border:0; margin:var(--sp-5) 0 var(--sp-6); }

/* Section head atom */
.nam-head{ max-width:54ch; margin-bottom:var(--sp-12); }
.nam-head .nam-h2{ margin-top:var(--sp-4); }
.nam-head .nam-lede{ margin-top:var(--sp-5); }

/* Buttons */
.nam-btn{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  padding:17px 30px; border-radius:var(--r-sm); border:1px solid transparent;
  color:#fff; transition:background var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}
.nam-btn__arrow{ font-size:14px; transform:translateY(-1px); }
.nam-btn--primary{ background:var(--accent); box-shadow:var(--glow-sm); }
.nam-btn--primary:hover{ background:var(--accent-hover); box-shadow:var(--glow-md); }
.nam-btn--primary:active{ background:var(--accent-pressed); }
.nam-btn--ghost{ background:transparent; color:var(--fg-on-dark-1); border-color:var(--border-on-dark-strong); }
.nam-btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--fg-on-dark-1); }

.nam-arrow-link{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-heading); font-weight:500; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  color:var(--accent-hover); border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color var(--dur-base), border-color var(--dur-base);
}
.nam-arrow-link:hover{ color:var(--fg-on-dark-1); border-bottom-color:var(--accent-hover); }

/* Review stars */
.nam-stars-row{ display:inline-flex; align-items:center; gap:var(--sp-3); }
.nam-stars-row__icons{ display:inline-flex; gap:2px; color:var(--accent-hover); }
.nam-stars-row__text{ font-family:var(--font-body); font-size:var(--fs-13); color:var(--fg-on-dark-3); }

/* Cinematic reveal, RESILIENT: content is never permanently gated on JS/animation.
   The hidden state applies only when motion is welcome AND scripting is on; a CSS
   failsafe auto-reveals anything the observer hasn't reached, and print / no-JS /
   reduced-motion always show content. (Review P1: reveal resilience.) */
@media (prefers-reduced-motion: no-preference){
  .nam-reveal{ opacity:0; transform:translateY(26px);
    transition:opacity var(--dur-cinema) var(--ease-out), transform var(--dur-cinema) var(--ease-out);
    animation:nam-reveal-failsafe .01s linear 2s forwards; }
  .nam-reveal.is-in{ opacity:1; transform:none; animation:none; }
}
@keyframes nam-reveal-failsafe{ to{ opacity:1; transform:none; } }
/* Always-visible fallbacks, content must never depend on the animation to be seen. */
@media (prefers-reduced-motion: reduce){ .nam-reveal{ opacity:1 !important; transform:none !important; } }
@media (scripting: none){ .nam-reveal{ opacity:1 !important; transform:none !important; animation:none !important; } }
@media print{ .nam-reveal{ opacity:1 !important; transform:none !important; animation:none !important; } }

/* Hairline divider */
.nam-hr{ height:1px; background:var(--border-on-dark); border:0; }