/* ============================================================
   NOW OR NEVER — FOUNDATIONS
   Monochrome. Geist Mono only. Dark-first.
   ============================================================ */

/* --- Fonts --------------------------------------------------- */
@font-face { font-family: "Geist Mono"; font-weight: 100; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-Thin.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 200; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-ExtraLight.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 300; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-Light.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-Regular.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: italic;  font-display: swap; src: url("./fonts/GeistMono-Italic.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-Medium.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: italic;  font-display: swap; src: url("./fonts/GeistMono-MediumItalic.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-SemiBold.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-Bold.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 700; font-style: italic;  font-display: swap; src: url("./fonts/GeistMono-BoldItalic.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 800; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-ExtraBold.otf") format("opentype"); }
@font-face { font-family: "Geist Mono"; font-weight: 900; font-style: normal; font-display: swap; src: url("./fonts/GeistMono-Black.otf") format("opentype"); }

:root {
  /* --- Grayscale ramp (dark-first) -------------------------- */
  /* true black → true white. No hue, no warmth, no cool. */
  --gray-0:  #000000;   /* ink black / canvas */
  --gray-1:  #070707;
  --gray-2:  #0E0E0E;   /* panel */
  --gray-3:  #141414;
  --gray-4:  #1C1C1C;   /* surface raised */
  --gray-5:  #242424;   /* hairline strong */
  --gray-6:  #2E2E2E;   /* hairline */
  --gray-7:  #3A3A3A;
  --gray-8:  #525252;   /* muted fg */
  --gray-9:  #6B6B6B;   /* caption */
  --gray-10: #8A8A8A;   /* secondary fg */
  --gray-11: #A8A8A8;
  --gray-12: #C9C9C9;
  --gray-13: #E4E4E4;
  --gray-14: #F4F4F4;
  --gray-15: #FFFFFF;   /* paper white */

  /* --- Semantic — dark (default) ---------------------------- */
  --bg:           var(--gray-0);
  --bg-panel:     var(--gray-2);
  --bg-raised:    var(--gray-4);
  --bg-inset:     var(--gray-1);
  --bg-hover:     var(--gray-3);
  --bg-active:    var(--gray-5);

  --fg:           var(--gray-15);   /* primary text */
  --fg-1:         var(--gray-13);   /* body */
  --fg-2:         var(--gray-10);   /* secondary */
  --fg-3:         var(--gray-9);    /* tertiary / caption */
  --fg-4:         var(--gray-8);    /* muted / metadata */
  --fg-disabled:  var(--gray-7);

  --border:       var(--gray-6);    /* standard hairline */
  --border-soft:  var(--gray-5);
  --border-strong:var(--gray-8);
  --border-hi:    var(--gray-15);

  --accent:       var(--gray-15);   /* inverted chips / focus */
  --accent-fg:    var(--gray-0);

  --status-dot:   var(--gray-15);
  --status-open-source: var(--gray-11);
  --status-free:  var(--gray-11);

  --selection-bg: var(--gray-15);
  --selection-fg: var(--gray-0);

  /* --- Type — families -------------------------------------- */
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Type — scale (tight, editorial/terminal) ------------- */
  /* 4px baseline. -2% letter-spacing on displays (mono benefits) */
  --fs-9:   72px;   /* hero display */
  --fs-8:   56px;
  --fs-7:   44px;   /* h1 */
  --fs-6:   32px;   /* h2 */
  --fs-5:   24px;   /* h3 */
  --fs-4:   18px;   /* h4 / lead */
  --fs-3:   15px;   /* body */
  --fs-2:   13px;   /* small / UI */
  --fs-1:   11px;   /* caption / label */
  --fs-0:   10px;   /* meta / overline */

  --lh-tight:   1.00;
  --lh-snug:    1.10;
  --lh-normal:  1.35;
  --lh-body:    1.55;
  --lh-loose:   1.75;

  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.14em; /* overlines, eyebrow labels */

  --fw-thin:       100;
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* --- Spacing (4px base) ----------------------------------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* --- Radius — minimal. Mostly sharp. ---------------------- */
  --r-0: 0;          /* sharp — default for cards, panels, buttons */
  --r-1: 2px;        /* hairline rounding */
  --r-2: 4px;        /* inputs, small chips */
  --r-3: 8px;        /* modals only */
  --r-full: 999px;   /* status dots */

  /* --- Borders ---------------------------------------------- */
  --bw-hairline: 1px;
  --bw-strong:   2px;
  --bw-heavy:    3px;

  /* --- Shadows — we mostly DO NOT use shadows. -------------- */
  /* Elevation is communicated with flat borders + bg shifts.  */
  --shadow-0: none;
  --shadow-1: 0 0 0 1px var(--border);               /* ring */
  --shadow-2: 0 0 0 1px var(--border-strong);        /* focus ring */
  --shadow-3: 0 16px 40px -12px rgba(0,0,0,0.8);     /* modal only */
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* --- Motion ----------------------------------------------- */
  --dur-instant: 60ms;
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-step:   steps(6, end);   /* terminal/ticker feel */

  /* --- Layout ----------------------------------------------- */
  --container:     1200px;
  --container-tight: 880px;
  --gutter:        24px;
  --grid-line:     1px solid var(--border);

  /* --- Focus ------------------------------------------------ */
  --focus-ring: 0 0 0 2px var(--gray-0), 0 0 0 4px var(--gray-15);
}

/* Light mode — inverted. Use sparingly; dark is primary. */
:root[data-theme="light"],
.theme-light {
  --bg:           var(--gray-15);
  --bg-panel:     var(--gray-14);
  --bg-raised:    var(--gray-15);
  --bg-inset:     var(--gray-13);
  --bg-hover:     var(--gray-14);
  --bg-active:    var(--gray-13);

  --fg:           var(--gray-0);
  --fg-1:         var(--gray-2);
  --fg-2:         var(--gray-7);
  --fg-3:         var(--gray-8);
  --fg-4:         var(--gray-9);
  --fg-disabled:  var(--gray-12);

  --border:       var(--gray-12);
  --border-soft:  var(--gray-13);
  --border-strong:var(--gray-9);
  --border-hi:    var(--gray-0);

  --accent:       var(--gray-0);
  --accent-fg:    var(--gray-15);
}

/* ============================================================
   Semantic element styles
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss02", "cv11"; /* Geist Mono stylistic alts */
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h1 { font-size: var(--fs-7); font-weight: var(--fw-regular); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-6); font-weight: var(--fw-regular); }
h3 { font-size: var(--fs-5); font-weight: var(--fw-medium); letter-spacing: var(--ls-normal); }
h4 { font-size: var(--fs-4); font-weight: var(--fw-medium); letter-spacing: var(--ls-normal); }
h5 { font-size: var(--fs-3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
h6 { font-size: var(--fs-1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--fg-3); }

p { margin: 0; font-size: var(--fs-3); line-height: var(--lh-body); color: var(--fg-1); }
small, .small { font-size: var(--fs-2); color: var(--fg-2); }
.caption { font-size: var(--fs-1); color: var(--fg-3); letter-spacing: var(--ls-wide); }
.overline {
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

/* Display — hero type */
.display     { font-size: var(--fs-9); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-regular); }
.display-xl  { font-size: clamp(56px, 10vw, 128px); line-height: 0.95; letter-spacing: -0.03em; font-weight: var(--fw-regular); }

/* Mono / code — already mono everywhere; this is for inline "terminal" emphasis */
code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.94em;
}
code {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--r-1);
  color: var(--fg);
}
pre {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: var(--s-4);
  overflow-x: auto;
  font-size: var(--fs-2);
  line-height: var(--lh-normal);
}
kbd {
  display: inline-block;
  font-size: var(--fs-1);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  background: var(--bg-panel);
  border-radius: var(--r-2);
  color: var(--fg-1);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg); text-decoration-color: var(--fg); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}

/* Ticker / eyebrow — for urgent, kinetic labels */
.ticker {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Number — tabular-nums everywhere numbers matter */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

/* Crosshair — reusable element, inspired by brutalist grid marks */
.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: var(--border-strong);
}

/* ============================================================
   RESPONSIVE
   Mobile-first overrides. Components wear opt-in classes; the
   media queries below reshape them at well-known breakpoints.
   Breakpoints: 1024 (lg), 880 (existing helper), 768 (md), 480 (sm).
   ============================================================ */

html, body { overflow-x: hidden; }

/* Hero */
.nn-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
}
.nn-hero-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* Product grid: card minimum scales with viewport so a single card
   always fits a phone and we never get a horizontal overflow. */
.nn-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

/* ProductCard — hover styling already inline; tap targets only */
.nn-product-card { -webkit-tap-highlight-color: transparent; }

/* ProductDetail — slide-in side panel by default, full-screen on mobile */
.nn-detail-panel {
  width: min(720px, 100%);
  height: 100%;
}
.nn-detail-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Manifesto */
.nn-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 64px;
}
.nn-manifesto-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 200px) 1fr;
  gap: 24px;
  align-items: baseline;
}

/* BuildLog */
.nn-buildlog-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nn-buildlog-grid {
  display: grid;
  grid-template-columns: 120px 88px minmax(0, 180px) 1fr;
  gap: 20px;
  align-items: baseline;
}

/* Subscribe form */
.nn-subscribe-form {
  display: flex;
  gap: 0;
  max-width: 560px;
  border: 1px solid var(--border-strong);
}
.nn-subscribe-form > input { flex: 1; min-width: 0; }

/* Footer */
.nn-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, 1fr);
  gap: 48px;
}

/* Ticker */
.nn-ticker {
  display: inline-flex;
  gap: 40px;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--fg);
  letter-spacing: -0.01em;
  white-space: nowrap;
  animation: nn-ticker 36s linear infinite;
}

/* Filter tabs */
.nn-filter-tabs { display: flex; gap: 0; }

/* Nav */
.nn-nav-list { display: flex; align-items: center; gap: 4px; }
.nn-nav-icons { display: inline-flex; gap: 4px; }
.nn-nav-burger {
  all: unset;
  display: none;
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--border);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nn-nav-burger:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* ===== md: ≤1024px — tighten spacing slightly ===== */
@media (max-width: 1024px) {
  .nn-manifesto-grid { gap: 48px; }
}

/* ===== ≤880px (matches existing helper) ===== */
@media (max-width: 880px) {
  .nn-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== md: ≤768px — phones / small tablets ===== */
@media (max-width: 768px) {
  :root { --gutter: 16px; }

  /* Nav: collapse links into a drop panel; show burger */
  .nn-nav-burger { display: inline-flex; align-items: center; gap: 6px; }
  .nn-nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    display: none;
  }
  .nn-nav-list[data-open="true"] { display: flex; }
  .nn-nav-list > a,
  .nn-nav-list > .nn-nav-link {
    padding: 14px 8px !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--border);
  }
  .nn-nav-list > a:last-child,
  .nn-nav-list > .nn-nav-link:last-child { border-bottom: none; }
  .nn-nav-list .nn-nav-divider { display: none; }
  .nn-nav-icons {
    display: flex !important;
    gap: 10px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
  }

  /* Manifesto: stack aside + list, collapse 3-col rows to 2-line stack */
  .nn-manifesto-grid { grid-template-columns: 1fr; gap: 32px; }
  .nn-manifesto-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 16px;
  }
  .nn-manifesto-row > :nth-child(1) { grid-row: 1; grid-column: 1; }
  .nn-manifesto-row > :nth-child(2) { grid-row: 1; grid-column: 2; }
  .nn-manifesto-row > :nth-child(3) { grid-row: 2; grid-column: 1 / -1; }

  /* BuildLog: keep table format, but allow horizontal scroll */
  .nn-buildlog-grid { min-width: 560px; }

  /* ProductDetail: full-screen overlay */
  .nn-detail-panel { width: 100%; }
  .nn-detail-meta { grid-template-columns: repeat(2, 1fr); }
  .nn-detail-meta > div:nth-child(1),
  .nn-detail-meta > div:nth-child(2) { border-bottom: 1px solid var(--border); }
  .nn-detail-meta > div:nth-child(2) { border-right: none !important; }

  /* Footer: 2-up at tablet width */
  .nn-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Filter tabs: scrollable, larger tap targets */
  .nn-filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nn-filter-tabs > button { padding: 16px 14px !important; flex-shrink: 0; }

  /* Ticker: smaller type, faster wrap */
  .nn-ticker { font-size: 16px; gap: 24px; }
  .nn-ticker > span { gap: 24px !important; }
}

/* ===== sm: ≤480px — small phones ===== */
@media (max-width: 480px) {
  /* Hero meta stat: 2-col still works at 4 boxes, but reduce padding */
  .nn-hero-meta > div { padding: 14px !important; }

  /* Product detail: meta to 1-col */
  .nn-detail-meta { grid-template-columns: 1fr; }
  .nn-detail-meta > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .nn-detail-meta > div:last-child { border-bottom: none !important; }

  /* Footer: full stack */
  .nn-footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Subscribe form: stack input + button */
  .nn-subscribe-form { flex-direction: column; }
  .nn-subscribe-form > button {
    border-left: none !important;
    border-top: 1px solid var(--border-strong);
    padding: 14px 22px !important;
    justify-content: center;
    width: 100%;
  }

  /* Caption legibility bump */
  :root { --fs-0: 11px; --fs-1: 12px; }
}