/* new-home base: reset, typography, layout primitives, the two doors (buttons), a11y helpers, reveal.
 * Uses semantic tokens from tokens.css only. Sections build on these classes; they do not restyle them.
 *
 *   .nh-container / --wide / --text     centred content with the page gutter
 *   .nh-eyebrow .nh-mega .nh-display .nh-h2 .nh-h3 .nh-lead .nh-muted   type roles
 *   .nh-btn + --primary / --secondary / --ghost / --sm / --lg / --icon   buttons and link-buttons
 *   .nh-link                            inline text link with an animated underline
 *   .nh-sr-only                         visually hidden, read aloud
 *   [data-nh-reveal]                    fades + rises in once visible (app.js adds .nh-in);
 *                                       data-nh-reveal="fade" (no rise), style="--nh-delay:120ms" to stagger
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--nh-bg);
  color: var(--nh-text);
  overflow-x: clip;
  scroll-padding-top: calc(var(--nh-nav-h) + 12px);
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--nh-bg);
  color: var(--nh-text);
  font-family: var(--nh-font-text);
  font-size: var(--nh-fs-base);
  font-weight: var(--nh-weight-regular);
  line-height: var(--nh-lh-text);
  letter-spacing: var(--nh-tracking-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  transition: background-color var(--nh-dur-slow) var(--nh-ease-in-out), color var(--nh-dur-slow) var(--nh-ease-in-out);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--nh-font-display);
  color: var(--nh-heading);
  font-weight: var(--nh-weight-medium);
  line-height: var(--nh-lh-heading);
  letter-spacing: var(--nh-tracking-heading);
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
a { color: var(--nh-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--nh-accent); color: var(--nh-bg); }
[hidden] { display: none !important; }

/* ---------- main + sections ---------- */
main { display: block; outline: none; }
.nh-section {
  position: relative;
  isolation: isolate;
  /* reserved height: the frame is there before the section script paints it (no layout shift) */
  min-height: 80vh;
  min-height: 80svh;
}
#nh-hero { min-height: 100vh; min-height: 100svh; }
.nh-section[data-mounted] { min-height: 0; }
#nh-hero[data-mounted] { min-height: 100vh; min-height: 100svh; }

/* server-rendered fallback (no JS, or a part that failed): calm, readable, on-brand */
.nh-fallback {
  max-width: var(--nh-container);
  margin-inline: auto;
  padding: var(--nh-section-y) var(--nh-gutter);
  display: grid;
  gap: var(--nh-space-4);
  align-content: center;
  min-height: inherit;
}
.nh-fallback h1 { font-size: var(--nh-fs-display); letter-spacing: var(--nh-tracking-display); line-height: var(--nh-lh-tight); max-width: 14ch; }
.nh-fallback h2 { font-size: var(--nh-fs-3xl); max-width: 20ch; }
.nh-fallback p { color: var(--nh-text-muted); font-size: var(--nh-fs-lg); max-width: var(--nh-measure); }
.nh-fallback p:has(.nh-btn) { display: flex; flex-wrap: wrap; gap: var(--nh-space-3); margin-top: var(--nh-space-4); }
html.nh-js .nh-section:not([data-mounted]):not([data-nh-error]) .nh-fallback { opacity: 0; animation: nh-fallback-in var(--nh-dur-slow) var(--nh-ease-out) 1.6s forwards; }
@keyframes nh-fallback-in { to { opacity: 1; } }

/* ---------- layout ---------- */
.nh-container { width: 100%; max-width: calc(var(--nh-container) + 2 * var(--nh-gutter)); margin-inline: auto; padding-inline: var(--nh-gutter); }
.nh-container--wide { max-width: calc(var(--nh-container-wide) + 2 * var(--nh-gutter)); }
.nh-container--text { max-width: calc(var(--nh-container-text) + 2 * var(--nh-gutter)); }
.nh-pad-y { padding-block: var(--nh-section-y); }
.nh-stack { display: grid; gap: var(--nh-space-4); }
.nh-cluster { display: flex; flex-wrap: wrap; gap: var(--nh-space-3); align-items: center; }

/* ---------- type roles ---------- */
.nh-eyebrow {
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-xs);
  font-weight: var(--nh-weight-medium);
  letter-spacing: var(--nh-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nh-accent);
}
.nh-mega {
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-mega);
  font-weight: var(--nh-weight-medium);
  line-height: 0.96;
  letter-spacing: var(--nh-tracking-mega);
  color: var(--nh-heading);
}
.nh-display {
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-display);
  font-weight: var(--nh-weight-medium);
  line-height: var(--nh-lh-tight);
  letter-spacing: var(--nh-tracking-display);
  color: var(--nh-heading);
}
.nh-h2 { font-size: var(--nh-fs-3xl); line-height: var(--nh-lh-heading); letter-spacing: var(--nh-tracking-display); }
.nh-h3 { font-size: var(--nh-fs-2xl); line-height: var(--nh-lh-snug); }
.nh-h4 { font-size: var(--nh-fs-xl); line-height: var(--nh-lh-snug); }
.nh-lead { font-size: var(--nh-fs-lg); line-height: 1.55; color: var(--nh-text-muted); max-width: var(--nh-measure); }
.nh-muted { color: var(--nh-text-muted); }
.nh-subtle { color: var(--nh-text-subtle); font-size: var(--nh-fs-sm); }
.nh-accent { color: var(--nh-accent); }
.nh-highlight { color: var(--nh-highlight); }
.nh-light { font-weight: var(--nh-weight-light); }
.nh-num { font-variant-numeric: tabular-nums; }

/* ---------- inline link ---------- */
.nh-link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--nh-dur-base) var(--nh-ease-out), color var(--nh-dur-fast);
  padding-block: 2px;
}
.nh-link:hover { background-size: 100% 1px; color: var(--nh-accent); }

/* ---------- the two doors (buttons) ---------- */
.nh-btn {
  --nh-btn-h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: var(--nh-btn-h);
  min-width: var(--nh-tap);
  padding: 0 1.5em;
  border: 1px solid transparent;
  border-radius: var(--nh-radius-pill);
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-base);
  font-weight: var(--nh-weight-medium);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--nh-dur-fast) var(--nh-ease-out),
    border-color var(--nh-dur-fast) var(--nh-ease-out),
    color var(--nh-dur-fast) var(--nh-ease-out),
    box-shadow var(--nh-dur-base) var(--nh-ease-out),
    transform var(--nh-dur-base) var(--nh-ease-out);
}
.nh-btn:hover { text-decoration: none; }
.nh-btn:active { transform: scale(calc(1 - 0.03 * var(--nh-move))); }
.nh-btn .nh-icon { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--nh-dur-base) var(--nh-ease-out); }
.nh-btn:hover .nh-icon--nudge { transform: translateX(calc(3px * var(--nh-move))); }
.nh-btn--primary { background: var(--nh-btn-primary-bg); color: var(--nh-btn-primary-text); }
.nh-btn--primary:hover { background: var(--nh-btn-primary-bg-hover); box-shadow: var(--nh-shadow-glow); }
.nh-btn--secondary {
  background: var(--nh-btn-secondary-bg);
  color: var(--nh-btn-secondary-text);
  border-color: var(--nh-btn-secondary-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nh-btn--secondary:hover { background: var(--nh-btn-secondary-bg-hover); border-color: var(--nh-text); }
.nh-btn--ghost { background: transparent; color: var(--nh-text); padding-inline: 0.9em; }
.nh-btn--ghost:hover { background: var(--nh-accent-soft); }
.nh-btn--sm { --nh-btn-h: 44px; font-size: var(--nh-fs-sm); padding-inline: 1.15em; }
.nh-btn--lg { --nh-btn-h: 60px; font-size: var(--nh-fs-lg); padding-inline: 1.8em; }
.nh-btn--icon { padding: 0; width: var(--nh-btn-h); }
.nh-btn--block { width: 100%; }
.nh-btn[aria-disabled="true"], .nh-btn:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- focus: always visible for keyboard, never for mouse ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--nh-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--nh-focus-halo);
  border-radius: var(--nh-radius-xs);
}
.nh-btn:focus-visible { border-radius: var(--nh-radius-pill); }
main:focus-visible { outline: none; box-shadow: none; }

/* ---------- skip link: visually hidden until it has keyboard focus (never shows in a screenshot) ---------- */
.nh-skip {
  position: fixed;
  left: var(--nh-gutter);
  top: 10px;
  z-index: var(--nh-z-skip);
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-radius: var(--nh-radius-pill);
  background: var(--nh-btn-primary-bg);
  color: var(--nh-btn-primary-text);
  font-family: var(--nh-font-display);
  font-weight: var(--nh-weight-medium);
  text-decoration: none;
}
.nh-skip:focus, .nh-skip:focus-visible {
  width: auto;
  height: auto;
  min-height: var(--nh-tap);
  margin: 0;
  padding: 12px 18px;
  overflow: visible;
  clip-path: none;
  display: inline-flex;
  align-items: center;
}

/* ---------- a11y helpers ---------- */
.nh-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nh-icon { flex: none; }

/* ---------- reveal ---------- */
html.nh-js [data-nh-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--nh-reveal-distance), 0);
  transition:
    opacity var(--nh-dur-slower) var(--nh-ease-out) var(--nh-delay, 0ms),
    transform var(--nh-dur-slower) var(--nh-ease-out) var(--nh-delay, 0ms);
}
html.nh-js [data-nh-reveal="fade"] { transform: none; }
html.nh-js [data-nh-reveal="scale"] { transform: scale(calc(1 - 0.04 * var(--nh-move))); }
html.nh-js [data-nh-reveal].nh-in { opacity: 1; transform: none; }

/* ---------- reduced motion: movement becomes fades ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .nh-btn:active { transform: none; }
}

/* ---------- forced colors (Windows high contrast) ---------- */
@media (forced-colors: active) {
  .nh-btn { border: 1px solid ButtonText; }
  :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}

/* ---------- print ---------- */
@media print {
  #nh-nav, .nh-skip { display: none !important; }
  html, body { background: #fff; color: #000; }
  .nh-section { min-height: 0 !important; break-inside: avoid; }
}

/* ---------- the CoVince lockup: "C" + mark + "Vince" ---------- */
.nh-lockup {
  display: inline-flex;
  align-items: center;
  font-family: var(--nh-font-display);
  font-weight: var(--nh-weight-regular);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--nh-heading);
  white-space: nowrap;
}
.nh-lockup__mark { width: 0.9em; height: 0.9em; margin: 0 0.02em 0 0.03em; transform: translateY(0.02em); }
.nh-mark { overflow: visible; }