/* Noisy Neighbor Studio — design system
   Tokens and primitives imported from Claude Design project "Noisy neighbor studio review".
   Source of truth for values: DESIGN.md + design-project tokens/*.css */

@layer reset, theme, base, components, responsive;

@layer reset {
  html { box-sizing: border-box; scroll-behavior: smooth; }
  *, *::before, *::after { box-sizing: inherit; }
  body, h1, h2, h3, p, figure, blockquote { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }
  img, svg { display: block; max-inline-size: 100%; }
}

@layer theme {
  :root {
    color-scheme: dark;

    /* ---- Base palette ---- */
    --nn-charcoal: #0D0D0D;
    --nn-ink: #0A0A0A;
    --nn-panel: #161615;
    --nn-raised: #1F1F1D;
    --nn-etch: #2A2A27;
    --nn-bone: #EDEDE6;
    --nn-bone-dim: #B8B7B0;
    --nn-concrete: #7A7A74;
    --nn-safety-yellow: #FFEA00;
    --nn-toxic-orange: #FF3D00;

    /* ---- Semantic ---- */
    --surface-page: var(--nn-charcoal);
    --surface-sunk: var(--nn-ink);
    --surface-card: var(--nn-panel);
    --surface-raised: var(--nn-raised);
    --surface-invert: var(--nn-bone);

    --text-heading: var(--nn-bone);
    --text-body: var(--nn-bone-dim);
    --text-muted: var(--nn-concrete);
    --text-on-accent: var(--nn-charcoal);
    --text-on-invert-muted: #5C5C56;

    --border: rgba(237, 237, 230, 0.12);
    --border-strong: rgba(237, 237, 230, 0.28);
    --border-dashed: rgba(237, 237, 230, 0.20);

    /* Accent is a single hook so the whole page can be re-keyed (yellow / heat / bone) */
    --accent: var(--nn-safety-yellow);
    --accent-hot: var(--nn-toxic-orange);
    --accent-glow: rgba(255, 234, 0, 0.35);
    --accent-wash: rgba(255, 234, 0, 0.10);

    /* ---- Type ---- */
    --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
    --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-display-1: clamp(3.5rem, 9vw, 9.75rem);     /* 132px → 156px on wide */
    --fs-display-2: clamp(2.75rem, 6.6vw, 5.25rem);  /* 84px section */
    --fs-display-3: clamp(3.25rem, 9.4vw, 7.5rem);   /* 120px closer */
    --fs-heading:   clamp(2.125rem, 3.6vw, 2.875rem);/* 46px card title */
    --fs-title:     clamp(1.75rem, 2.6vw, 2.75rem);  /* 44px row title */
    --fs-subhead:   clamp(1.5rem, 2.2vw, 2rem);      /* 32px step title */
    --fs-stat:      clamp(3.25rem, 6.6vw, 5.25rem);  /* 84px numeral */
    --fs-marquee:   clamp(1.25rem, 2.4vw, 1.625rem);

    --lh-display: 0.9;
    --ls-display: 0.02em;

    --fs-label: 0.75rem;   --ls-label: 0.18em;
    --fs-meta: 0.8125rem;  --ls-meta: 0.04em;
    --ls-caps: 0.16em;
    --fs-body: 0.9375rem;
    --fs-body-lg: 1.0625rem;
    --lh-body: 1.6;

    /* ---- Space & shape ---- */
    --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
    --space-9: 96px; --space-10: 128px;

    /* Section backgrounds go full-bleed; content is contained. 1200px (the
       design's authored width) is a narrow strip on a wide display, but an
       uncapped shell strands the hero copy and the panel at opposite edges
       on ultrawide. 1840 fills a 1920 screen edge-to-edge and still holds
       a composition at 2560+. */
    --gutter: clamp(20px, 5vw, 96px);
    --maxw: 1600px;
    /* Fluid, not stepped: the header logo and bar scale continuously with the
       viewport so there is no width where the lockup is illegible or collides. */
    --logo-h: clamp(46px, 5.6vw, 88px);
    --nav-h: calc(var(--logo-h) + clamp(24px, 2.4vw, 36px));
    --section-y: clamp(64px, 8vw, 120px);

    --radius-1: 2px;
    --radius-2: 3px;
    --radius-3: 4px;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
    --dur-fast: 0.15s;
    --dur: 0.28s;

    /* ---- Motifs ---- */
    --tape: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--nn-charcoal) 14px 28px);
    --glow: 0 0 24px var(--accent-glow);
  }
}

@layer base {
  /* Background lives on html, not just body: WebKit stops propagating body's
     background to the canvas once body is a scroll container, which leaves a
     white gap under the footer and on overscroll. Clipping belongs here too. */
  html {
    min-block-size: 100%;
    overflow-x: clip;
    background: var(--surface-page);
  }

  body {
    min-block-size: 100%;
    background: var(--surface-page);
    color: var(--text-heading);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-display);
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a { color: var(--accent); text-decoration: none; }
  a:hover { color: var(--accent-hot); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  ::selection { background: var(--accent); color: var(--text-on-accent); }

  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-4);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }
  .skip-link:focus { inset-block-start: var(--space-4); color: var(--text-on-accent); }
}

@layer components {
  /* ---------- Layout ---------- */
  .shell {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section { padding-block: var(--section-y); }

  /* ---------- Section rail ---------- */
  .label {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .label-accent { color: var(--accent); }

  .section-title {
    margin: 0 0 var(--space-7);
    font-size: var(--fs-display-2);
    line-height: 0.94;
  }
  .label + .section-title { margin-block-start: var(--space-4); }

  /* ---------- Buttons ---------- */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    max-inline-size: 100%;
    padding: 14px var(--space-6) 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    line-height: 1;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out);
  }
  .button:hover { transform: translateY(-3px); }
  .button:active { transform: translateY(0); }

  .button-primary {
    background: var(--accent);
    color: var(--text-on-accent);
  }
  .button-primary:hover { color: var(--text-on-accent); box-shadow: var(--glow); }

  .button-ghost {
    border-color: var(--border-strong);
    color: var(--text-heading);
  }
  .button-ghost:hover { border-color: var(--text-heading); color: var(--text-heading); }

  /* Fluid so the long email CTA cannot outgrow a 320px viewport. */
  .button-lg { font-size: clamp(1.05rem, 4.4vw, 1.375rem); padding: 16px var(--space-6) 12px; }
  .button-sm { font-size: 1.125rem; padding: 9px 18px 6px; min-block-size: 36px; }

  /* ---------- Tag ---------- */
  .tag {
    font-size: var(--fs-label);
    letter-spacing: 0.12em;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-1);
    padding: 6px 10px;
  }

  /* ---------- Stencil block (numbered chip) ---------- */
  .stencil {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-on-accent);
    background: var(--accent);
    padding: 5px 9px 2px;
    border-radius: var(--radius-1);
  }

  /* ---------- Hazard tape ---------- */
  .tape-edge {
    block-size: 8px;
    background: var(--tape);
  }

  .marquee {
    overflow: hidden;
    border-block: 1px solid var(--border);
    background: var(--surface-page);
  }
  .marquee-track {
    display: flex;
    inline-size: max-content;
    padding-block: var(--space-4);
    will-change: transform;
    animation: nn-tape 40s linear infinite;
  }
  .marquee-group {
    display: flex;
    gap: 44px;
    padding-inline-end: 44px;
    font-family: var(--font-display);
    font-size: var(--fs-marquee);
    letter-spacing: 0.1em;
    white-space: nowrap;
    color: var(--text-heading);
  }
  .marquee-group span:nth-child(even) { color: var(--accent); }

  /* ---------- Workshop card ---------- */
  .card {
    background: var(--surface-page);
    padding: var(--space-7) var(--space-6);
    transition: background var(--dur) var(--ease-out);
  }
  .card:hover { background: var(--surface-card); }

  /* ---------- Panel ---------- */
  .panel {
    border: 1px solid var(--border);
    background: var(--surface-card);
    border-radius: var(--radius-3);
    padding: var(--space-5);
  }

  .rule-dashed {
    border: 0;
    border-block-start: 1px dashed var(--border-dashed);
    margin-block: var(--space-4) 0;
  }

  /* ---------- Motion primitives ---------- */
  .rise { animation: nn-up 0.6s var(--ease-out) both; }
  .rise-delay { animation-delay: 0.12s; }
}

@keyframes nn-tape {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes nn-eq {
  0%, 100% { transform: scaleY(0.18); }
  50% { transform: scaleY(1); }
}
@keyframes nn-flicker {
  0%, 42%, 48%, 71%, 76%, 100% { opacity: 1; }
  45% { opacity: 0.25; }
  73% { opacity: 0.4; }
}
@keyframes nn-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .button:hover { transform: none; }
}