/* =========================================================================
   NEXXPOUR DESIGN SYSTEM — v2 "Editorial Minimalism, With a Wink"
   References: Parcelle Wine (palette + type), Aesop (restraint + motion),
   Oatly (voice). Philosophy: one hero move per screen, hairlines not shadows,
   typography does the work, motion is a whisper.

   Positioning: a wine app for New York, for drinkers not students.
   Voice: witty, confident, never preachy. Visuals quiet, copy loud.
   ========================================================================= */

:root {
  /* ── Palette — restrained, warm ── */
  --nx-bg: #FAF4EA;               /* warmer paper */
  --nx-card: #FFFFFF;
  --nx-ink: #1F1612;               /* near-black w/ warm undertone */
  --nx-ink-2: #6C5F57;             /* secondary warm grey */
  --nx-ink-3: #A39689;             /* tertiary / disabled */
  --nx-line: #E8DECC;              /* warm hairline */
  --nx-line-soft: #F0E7D3;
  --nx-line-strong: #D4C4A8;

  --nx-garnet: #7A1E2A;            /* restrained oxblood */
  --nx-garnet-deep: #5C1620;
  --nx-gold: #B8892A;              /* mustard gold */
  --nx-gold-ink: #6C4F17;
  --nx-cream: #F5ECD5;

  /* Accents — one per flow, never mixed */
  --nx-lavender: #6B5C82;          /* experiences */
  --nx-olive: #6B7A4A;              /* achievements / completion */

  /* Legacy alias (keep v1 var names working so styles.css doesn't break) */
  --bg-primary: var(--nx-bg);
  --bg-card: var(--nx-card);
  --bg-input: var(--nx-card);
  --text-primary: var(--nx-ink);
  --text-secondary: var(--nx-ink-2);
  --accent-oxblood: var(--nx-garnet-deep);
  --accent-garnet: var(--nx-garnet);
  --accent-bright: var(--nx-gold);
  --accent-lime: var(--nx-olive);
  --accent-cream: var(--nx-cream);
  --border-subtle: var(--nx-line);
  --border-input: var(--nx-line-strong);

  /* ── Type ── */
  --nx-font-display: 'Fraunces', Georgia, serif;
  --nx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Motion — slow and confident ── */
  --nx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nx-ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ── Radii — restrained ── */
  --nx-r-sm: 6px;
  --nx-r-md: 10px;
  --nx-r-lg: 16px;
  --nx-r-pill: 999px;
}

/* =========================================================================
   SIGNATURE GESTURE — gold hairline reveal
   The one motion for the whole system. Applied to .nx-mark spans.
   ========================================================================= */

.nx-mark {
  position: relative;
  display: inline;
}
.nx-mark::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0.04em;
  height: 1.5px;
  background: var(--nx-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--nx-ease-out) 0.2s;
}
.nx-mark.nx-mark--in::after { transform: scaleX(1); }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */

.nx-display {
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--nx-ink);
}
.nx-display em {
  font-style: italic;
  font-weight: 300;
  color: var(--nx-garnet);
}

.nx-editorial {
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--nx-ink);
}
.nx-editorial em { font-style: italic; font-weight: 300; color: var(--nx-garnet); }

.nx-lede {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--nx-ink-2);
  max-width: 44ch;
}

.nx-eyebrow {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nx-ink-2);
}
.nx-eyebrow--garnet { color: var(--nx-garnet); }
.nx-eyebrow--gold { color: var(--nx-gold-ink); }

.nx-caption {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--nx-ink-2);
}

.nx-pullquote {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.2;
  color: var(--nx-ink);
  letter-spacing: -0.015em;
  padding-left: 24px;
  border-left: 2px solid var(--nx-garnet);
  max-width: 28ch;
}

/* Drop cap — editorial move for manifesto / lead paras */
.nx-drop::first-letter {
  font-family: var(--nx-font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 5.5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em 0 -0.05em;
  color: var(--nx-garnet);
}

/* Inline aside — italic garnet side note with left border */
.nx-aside {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--nx-garnet);
  padding: 2px 10px;
  border-left: 2px solid var(--nx-garnet);
  margin-left: 4px;
  display: inline-block;
}

/* =========================================================================
   BUTTONS — minimal, confident, no offset shadows
   ========================================================================= */

.nx-btn {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: var(--nx-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1;
  transition: background 0.3s var(--nx-ease), color 0.3s var(--nx-ease), border-color 0.3s var(--nx-ease), transform 0.5s var(--nx-ease-out);
}

.nx-btn--primary {
  background: var(--nx-ink);
  color: var(--nx-bg);
}
.nx-btn--primary:hover {
  background: var(--nx-garnet);
  transform: translateY(-1px);
}

.nx-btn--gold {
  background: var(--nx-gold);
  color: var(--nx-ink);
}
.nx-btn--gold:hover {
  background: var(--nx-gold-ink);
  color: var(--nx-bg);
  transform: translateY(-1px);
}

.nx-btn--ghost {
  background: transparent;
  color: var(--nx-ink);
  border-color: var(--nx-ink);
}
.nx-btn--ghost:hover {
  background: var(--nx-ink);
  color: var(--nx-bg);
  transform: translateY(-1px);
}

.nx-btn--onDark {
  background: transparent;
  color: var(--nx-bg);
  border-color: var(--nx-bg);
}
.nx-btn--onDark:hover {
  background: var(--nx-bg);
  color: var(--nx-ink);
}

.nx-btn--link {
  background: transparent;
  color: var(--nx-ink);
  padding: 14px 0;
  position: relative;
  border-radius: 0;
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
}
.nx-btn--link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: var(--nx-ink);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 0.5s var(--nx-ease-out);
}
.nx-btn--link:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}
.nx-btn--link:hover { color: var(--nx-garnet); }

.nx-btn--tiny { padding: 8px 16px; font-size: 0.8125rem; }
.nx-btn--block { width: 100%; }

/* =========================================================================
   CARDS — hairline grid, soft fade on hover, title-underline reveal
   ========================================================================= */

.nx-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--nx-line);
  border-left: 1px solid var(--nx-line);
}

.nx-card {
  background: transparent;
  border-right: 1px solid var(--nx-line);
  border-bottom: 1px solid var(--nx-line);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.5s var(--nx-ease);
  position: relative;
}
.nx-card:hover { background: var(--nx-card); }
.nx-card:hover .nx-card__title::after { transform: scaleX(1); }
.nx-card:hover .nx-card__arrow { transform: translateX(4px); }

/* Standalone card (not in a grid) — hairline box */
.nx-card--solo {
  background: var(--nx-card);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-lg);
  padding: 28px;
}

.nx-card__eyebrow {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nx-garnet);
}

.nx-card__title {
  font-family: var(--nx-font-display);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--nx-ink);
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  align-self: flex-start;
}
.nx-card__title em { font-style: italic; font-weight: 300; color: var(--nx-garnet); }
.nx-card__title::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--nx-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--nx-ease-out);
}

.nx-card__body {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nx-ink-2);
  max-width: 32ch;
}

.nx-card__foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--nx-font-body);
  font-size: 0.8125rem;
  color: var(--nx-ink-2);
}
.nx-card__foot strong {
  color: var(--nx-ink);
  font-family: var(--nx-font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.nx-card__arrow {
  color: var(--nx-ink);
  transition: transform 0.4s var(--nx-ease-out);
  display: inline-block;
}

/* =========================================================================
   CHIPS — pill hairlines, ink-on-paper active
   ========================================================================= */

.nx-chip {
  font-family: var(--nx-font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: var(--nx-r-pill);
  border: 1px solid var(--nx-line);
  background: transparent;
  color: var(--nx-ink-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.3s var(--nx-ease), color 0.3s var(--nx-ease), border-color 0.3s var(--nx-ease);
}
.nx-chip:hover { border-color: var(--nx-ink); color: var(--nx-ink); }
.nx-chip--active,
.nx-chip.active {
  background: var(--nx-ink);
  color: var(--nx-bg);
  border-color: var(--nx-ink);
}

/* =========================================================================
   STATS — oversized Fraunces numbers, hairline grid
   ========================================================================= */

.nx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--nx-line);
  border-left: 1px solid var(--nx-line);
}

.nx-stat {
  padding: 32px 28px;
  border-right: 1px solid var(--nx-line);
  border-bottom: 1px solid var(--nx-line);
  background: transparent;
}
.nx-stat__num {
  font-family: var(--nx-font-display);
  font-weight: 300;
  font-size: 4.5rem;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--nx-ink);
  margin-bottom: 8px;
}
.nx-stat__num em { font-style: italic; color: var(--nx-garnet); }
.nx-stat__label {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--nx-ink-2);
}
.nx-stat__trend {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--nx-line-soft);
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-garnet);
}

/* Progress bar — thin hairline fill */
.nx-progress {
  height: 2px;
  background: var(--nx-line);
  overflow: hidden;
  position: relative;
  border-radius: 0;
}
.nx-progress__fill {
  height: 100%;
  background: var(--nx-gold);
  transition: width 0.8s var(--nx-ease-out);
}

/* =========================================================================
   FORM FIELDS — underline-only, italic values
   ========================================================================= */

.nx-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nx-field__label {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nx-garnet);
}
.nx-field__input,
.nx-field__select,
.nx-field__textarea {
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--nx-line);
  background: transparent;
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--nx-ink);
  width: 100%;
  transition: border-color 0.3s var(--nx-ease);
}
.nx-field__input:focus,
.nx-field__select:focus,
.nx-field__textarea:focus {
  outline: none;
  border-bottom-color: var(--nx-ink);
  border-bottom-width: 2px;
  margin-bottom: -1px;
}
.nx-field__input::placeholder,
.nx-field__textarea::placeholder {
  color: var(--nx-ink-3);
  font-style: italic;
  font-weight: 300;
}
.nx-field__textarea { resize: vertical; min-height: 80px; }

/* Filled-input variant (when inputs need a box, like search) */
.nx-field--boxed .nx-field__input {
  padding: 14px 18px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-md);
  background: var(--nx-card);
}
.nx-field--boxed .nx-field__input:focus { border-color: var(--nx-ink); border-width: 1px; margin-bottom: 0; }

/* =========================================================================
   EDITORIAL SPOTLIGHT — the one drama beat per page
   ========================================================================= */

.nx-spotlight {
  background: var(--nx-ink);
  color: var(--nx-bg);
  padding: 72px 40px;
  border-radius: var(--nx-r-lg);
  position: relative;
  overflow: hidden;
}
.nx-spotlight::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(184, 137, 42, 0.22), transparent 65%);
  pointer-events: none;
}

.nx-spotlight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--nx-font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nx-gold);
  margin-bottom: 28px;
}
.nx-spotlight__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--nx-gold);
}

.nx-spotlight__venue {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0625rem;
  color: rgba(250, 244, 234, 0.7);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.nx-spotlight__title {
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.025em;
  color: inherit;
  position: relative;
  z-index: 1;
  max-width: 16ch;
}
.nx-spotlight__title em { font-style: italic; font-weight: 300; color: var(--nx-gold); }

.nx-spotlight__body {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(250, 244, 234, 0.78);
  max-width: 44ch;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.nx-spotlight__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 20px 0;
  border-top: 1px solid rgba(250, 244, 234, 0.16);
  border-bottom: 1px solid rgba(250, 244, 234, 0.16);
  margin-bottom: 32px;
  font-family: var(--nx-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 244, 234, 0.55);
  position: relative;
  z-index: 1;
}
.nx-spotlight__meta__item { display: flex; flex-direction: column; gap: 4px; }
.nx-spotlight__meta__item strong {
  color: var(--nx-gold);
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  text-transform: none;
}

.nx-spotlight__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--nx-ink);
  background: var(--nx-gold);
  text-decoration: none;
  border-radius: var(--nx-r-pill);
  position: relative;
  z-index: 1;
  transition: background 0.35s var(--nx-ease), color 0.35s var(--nx-ease), gap 0.4s var(--nx-ease-out);
}
.nx-spotlight__cta:hover {
  background: var(--nx-bg);
  gap: 18px;
}

/* =========================================================================
   INK STAMP — once-per-page "signed off" mark
   ========================================================================= */
.nx-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1.5px solid var(--nx-garnet);
  border-radius: 3px;
  font-family: var(--nx-font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nx-garnet);
  background: transparent;
  transform: rotate(-2deg);
}
.nx-stamp__mark {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
.nx-stamp--gold {
  border-color: var(--nx-gold);
  color: var(--nx-gold);
}
.nx-stamp--onDark {
  border-color: var(--nx-gold);
  color: var(--nx-gold);
}

/* =========================================================================
   MANIFESTO — "We're for / We're done with"
   ========================================================================= */
.nx-manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--nx-ink);
  border-bottom: 1px solid var(--nx-ink);
}
@media (max-width: 640px) { .nx-manifesto { grid-template-columns: 1fr; } }

.nx-manifesto__col {
  padding: 32px 28px;
  border-right: 1px solid var(--nx-line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nx-manifesto__col:last-child { border-right: none; }
@media (max-width: 640px) {
  .nx-manifesto__col { border-right: none; border-bottom: 1px solid var(--nx-line); }
  .nx-manifesto__col:last-child { border-bottom: none; }
}

.nx-manifesto__label {
  font-family: var(--nx-font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nx-garnet);
}
.nx-manifesto__col--against .nx-manifesto__label { color: var(--nx-ink-3); }

.nx-manifesto__item {
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--nx-ink);
}
.nx-manifesto__item em { font-style: italic; font-weight: 300; color: var(--nx-garnet); }
.nx-manifesto__col--against .nx-manifesto__item {
  color: var(--nx-ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--nx-ink-3);
  text-decoration-thickness: 1px;
}

/* =========================================================================
   ARCHETYPE CARDS — "The eight moods" brand system
   ========================================================================= */
.nx-archetypes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--nx-line);
  border-left: 1px solid var(--nx-line);
}
.nx-archetype {
  padding: 24px 22px;
  border-right: 1px solid var(--nx-line);
  border-bottom: 1px solid var(--nx-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.4s var(--nx-ease);
  text-decoration: none;
  color: inherit;
}
.nx-archetype:hover { background: var(--nx-card); }
.nx-archetype__num {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--nx-ink-3);
}
.nx-archetype__name {
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--nx-ink);
}
.nx-archetype__name em { font-style: normal; font-weight: 400; color: var(--nx-garnet); }
.nx-archetype__caption {
  font-family: var(--nx-font-body);
  font-size: 0.8125rem;
  color: var(--nx-ink-2);
  line-height: 1.55;
  margin-top: auto;
  padding-top: 10px;
}

/* =========================================================================
   BOROUGH / NEIGHBORHOOD CHIPS
   ========================================================================= */
.nx-borough {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-pill);
  font-family: var(--nx-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--nx-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s var(--nx-ease), border-color 0.3s var(--nx-ease);
  --nx-borough-dot: var(--nx-garnet);
}
.nx-borough::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
  background: var(--nx-borough-dot);
}
.nx-borough:hover {
  border-color: var(--nx-ink);
  background: rgba(31, 22, 18, 0.03);
}
.nx-borough--manhattan { --nx-borough-dot: #7A1E2A; }
.nx-borough--brooklyn { --nx-borough-dot: #B8892A; }
.nx-borough--queens { --nx-borough-dot: #6B7A4A; }
.nx-borough--bronx { --nx-borough-dot: #6B5C82; }
.nx-borough--staten { --nx-borough-dot: #6C5F57; }
.nx-borough--active {
  background: var(--nx-ink);
  color: var(--nx-bg);
  border-color: var(--nx-ink);
}
.nx-borough--active::before { background: var(--nx-gold); }

/* Neighborhood (smaller, subtler) */
.nx-hood {
  font-family: var(--nx-font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 0.82rem;
  padding: 7px 14px;
  color: var(--nx-ink-2);
}
.nx-hood::before { background: var(--nx-ink-3); }
.nx-hood:hover { color: var(--nx-ink); }
.nx-hood--active {
  background: var(--nx-ink);
  color: var(--nx-bg);
  border-color: var(--nx-ink);
}

/* =========================================================================
   SECTION LABEL (numbered, magazine-style)
   ========================================================================= */
.nx-section-label {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nx-garnet);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.nx-section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--nx-garnet);
  display: inline-block;
}
.nx-section-label--ink { color: var(--nx-ink); }
.nx-section-label--ink::before { background: var(--nx-ink); }

/* =========================================================================
   RULES / DIVIDERS
   ========================================================================= */
.nx-rule {
  height: 1px;
  background: var(--nx-line);
  margin: 48px 0;
  border: 0;
}
.nx-rule--strong {
  background: var(--nx-ink);
}

/* SVG flourish divider — used max once per page */
.nx-flourish {
  display: flex;
  justify-content: center;
  padding: 32px 0;
  color: var(--nx-garnet);
  opacity: 0.5;
}
.nx-flourish svg { width: 56px; height: 14px; }

/* =========================================================================
   TAGLINE PILL — for brand moments (landing, etc.)
   ========================================================================= */
.nx-tagline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border: 1px solid var(--nx-ink);
  border-radius: var(--nx-r-pill);
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--nx-ink);
  background: transparent;
}
.nx-tagline__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nx-garnet);
  animation: nxPulse 2.2s var(--nx-ease) infinite;
}
@keyframes nxPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* =========================================================================
   MOTION — entrance utilities (kept sparingly)
   ========================================================================= */
@keyframes nxIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.nx-in { animation: nxIn 0.9s var(--nx-ease-out) both; }
.nx-in-d1 { animation-delay: 0.12s; }
.nx-in-d2 { animation-delay: 0.24s; }
.nx-in-d3 { animation-delay: 0.36s; }
.nx-in-d4 { animation-delay: 0.48s; }
.nx-in-d5 { animation-delay: 0.60s; }

/* =========================================================================
   LEGACY ALIASES — maintain v1 class names for backwards compat during
   migration, re-mapped to v2 patterns. Pages will get cleaned over time.
   ========================================================================= */

/* v1 had .nx-wobble, .nx-confetti-piece, .nx-skeleton etc. — kept as no-ops
   to avoid breakage; visuals now quiet. */
.nx-wobble:hover { animation: none; }
.nx-confetti-piece { display: none !important; }

/* Old v1 utility aliases */
.nx-editorial { font-family: var(--nx-font-display); }

/* =========================================================================
   V2 MIGRATION — site-wide reset of v1 playful moves
   Forces quiet v2 behavior on v1 class names across all pages without
   requiring per-page edits. Page-by-page cleanup happens next.
   ========================================================================= */

/* 1. Kill default card tilts — v1 had every card rotating */
.discover-card,
.nx-card,
.today-stat, .attn-card, .journey-stat-card,
.bottle-card, .post-card, .exp-card, .item-card, .pour-card, .venue-card,
.ins-stat, .stat-card, .challenge-card, .journey-badge,
.quiz-option, .quiz-pill, .discover-option, .exp-card,
.venue-post-card, .nx-stat {
  transform: none !important;
}
.discover-card:hover, .nx-card:hover, .today-stat:hover, .attn-card:hover,
.journey-stat-card:hover, .bottle-card:hover, .post-card:hover, .exp-card:hover,
.item-card:hover, .pour-card:hover, .venue-card:hover,
.ins-stat:hover, .stat-card:hover, .challenge-card:hover, .journey-badge:hover,
.quiz-option:hover, .quiz-pill:hover, .discover-option:hover,
.venue-post-card:hover {
  transform: translateY(-1px) !important;
}
.discover-card:active, .nx-card:active,
.quiz-option:active, .quiz-pill:active, .discover-option:active {
  transform: none !important;
}

/* 2. Kill every sparkle — the ✦ after section titles, card icons etc. */
.journey-section-title::after,
.profile-section-title::after,
.challenges-section__title::after,
.today-section::after,
.edit-section::after,
.acct-section__title::after,
.section-label::after,
.time-group__label::after,
.admin-section__title::after,
.section-label-editorial::after,
.glance-section__title::after,
.venue-sheet__title::after,
.discover-cards-label::before,
.discover-cards-label::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* 3. Kill chunky offset press-shadows on buttons — replace with flat */
.nx-btn:not(.nx-btn--primary):not(.nx-btn--gold):not(.nx-btn--ghost):not(.nx-btn--onDark):not(.nx-btn--link),
.discover-next-btn,
.post-create-btn,
.edit-save-btn,
.acct-btn,
.header-btn,
.profile-action-btn,
.btn-primary,
.lp-fab,
.post-action,
.vd-pill.selected,
.type-pill.selected,
.bottle-flavor-pill.selected {
  box-shadow: none !important;
}

/* 4. Kill wobble animations and idle pulses everywhere */
.streak-card__fire,
.discover-card::after,
.tonights-pick__tag,
.tonights-pick__match-sticker,
.all-set__icon,
.emptyBob,
.bottle-badge {
  animation: none !important;
  transform: none !important;
}

/* Kill decorative rotated stickers (badges, chips) */
.venue-card__nexxstop,
.venue-card__first-pour,
.top-pick-badge,
.bottle-badge,
.today-badge,
.badge,
.item-card__badge,
.pour-card__type-badge,
.bd-tag,
.venue-tag,
.admin-badge,
.stamp-reward,
.post-card__cat,
.post-card__status-badge,
.exp-card__cat {
  transform: none !important;
  box-shadow: none !important;
}

/* 5. Kill tape + sparkle decorations on Tonight's Pick */
.tonights-pick__tape,
.tonights-pick__sparkle,
.tonights-pick__match-sticker {
  display: none !important;
}

/* Soften Tonight's Pick card — remove chunky press-shadow and tilt */
.tonights-pick {
  transform: none !important;
  box-shadow: 0 8px 32px rgba(31, 22, 18, 0.15) !important;
  border-radius: 16px !important;
}
.tonights-pick:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(31, 22, 18, 0.2) !important;
}

/* 6. Flatten chunky press-shadows on nav/dropdowns (from v1 playful pattern) */
.profile-dropdown,
.explore-dropdown,
.dash-dropdown,
.lp-fab-menu {
  box-shadow: 0 1px 0 var(--nx-line), 0 12px 32px rgba(31, 22, 18, 0.10) !important;
  border-radius: var(--nx-r-md) !important;
  transform: translateY(-8px) !important;
}
.profile-dropdown.open,
.explore-dropdown.open,
.dash-dropdown.open,
.lp-fab-menu.open {
  transform: translateY(0) !important;
}

/* Flatten profile menu button (was rotated garnet pill) */
.profile-menu-btn,
.explore-menu-btn,
.dash-menu-btn {
  background: transparent !important;
  border: 1px solid var(--nx-line) !important;
  color: var(--nx-ink-2) !important;
}
.profile-menu-btn:hover,
.explore-menu-btn:hover,
.dash-menu-btn:hover {
  transform: none !important;
  border-color: var(--nx-ink) !important;
  color: var(--nx-ink) !important;
  background: transparent !important;
}

/* Kill pulsing dot after nav title */
.profile-nav__title::after,
.explore-nav__brand::after,
.dash-nav__title::after,
.nav-title-main::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Flatten bottom nav sparkle */
.btm-nav__tab--active::before,
.dash-btm-nav__tab--active::before {
  content: none !important;
  display: none !important;
}

/* 7. Ensure body text uses v2 palette globally via legacy vars */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =========================================================================
   V2 MIGRATION — PHASE 2
   Second-pass cleanup for gaps not caught by phase 1 selectors.
   ========================================================================= */

/* 8. Kill static/idle rotation on nav titles and related text */
.nav-title-main,
.nav-title-sub {
  transform: none !important;
}

/* 9. Convert dashed dividers to solid hairlines site-wide */
.profile-dropdown__user,
.profile-dropdown__sep,
.explore-dropdown__user,
.explore-dropdown__sep,
.dash-dropdown__user,
.dash-dropdown__sep,
.streak-pours,
.streak-recap,
.venue-card__stats,
.pour-card__meta,
.item-card__meta,
.acct-row,
.bd-divider,
.bd-row {
  border-style: solid !important;
  border-color: var(--nx-line) !important;
}

/* 10. Fill-in: chunky pill borders (1.5px / 2px) across shared classes */
.mpc__chip,
.mpc__cta-secondary,
.item-card__badge,
.challenge-card,
.journey-badge,
.cru-feed-empty,
.my-cru-find,
.stamp,
.stamp--filled,
.stamp-reward,
.lp-input,
.type-pill,
.lp-notes,
.bottle-flavor-pill,
.vd-pill,
.exp-filter-btn,
.attn-card,
.today-stat {
  border-width: 1px !important;
  border-style: solid !important;
}

/* Dashed -> solid specifically (class subset that used dashed) */
.mpc__chip,
.cru-feed-empty,
.my-cru-find,
.stamp {
  border-color: var(--nx-line) !important;
}

/* 11. Kill remaining chunky press-shadows on interactive elements */
.mpc__cta-secondary,
.profile-action-btn,
.profile-action-btn--primary,
.profile-action-btn--secondary,
.trend-toggle,
.trend-toggle.active,
.stamp-reward,
.stamp--filled,
.lp-submit,
.lp-chip.selected,
.bottle-flavor-pill.selected,
.type-pill.selected,
.vd-pill.selected,
.exp-filter-btn.active,
.exp-filter-btn.selected,
.acct-btn,
.venue-sheet__toggle,
.map-popup__cta,
.bd-action-btn--log,
.wine-card__log-pour {
  box-shadow: none !important;
}

/* 12. Kill residual rotations on stamps, badges, pills */
.stamp--filled,
.stamp-reward,
.mpc__chip,
.acct-chip,
.item-card__badge,
.challenges-section__title::after,
.lp-chip,
.attn-card {
  transform: none !important;
}
.stamp--filled:hover,
.stamp-reward:hover {
  transform: none !important;
}

/* 13. Emoji sparkle pseudos that slipped through (content: '✦' etc.) */
.journey-badge::after,
.challenge-card::after,
.streak-card__fire::after,
.profile-section-title::before,
.journey-section-title::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* 14. Flatten page-local hover lifts on cards (translateY press animations) */
.pour-card:hover,
.venue-card:hover,
.item-card:hover,
.challenge-card:hover,
.journey-badge:hover,
.today-stat:hover,
.attn-card:hover,
.stamp-reward:hover {
  box-shadow: none !important;
}

/* =========================================================================
   V2 AUTH EDITORIAL — shared across all auth / signup pages
   Applied via body.quiz-page scope so every register-*, login,
   forgot-password, reset-password page inherits the same treatment.
   Uses !important on high-specificity selectors so page-local styles
   can't silently reintroduce chunky buttons or boxed inputs.
   ========================================================================= */

body.quiz-page {
  background: var(--nx-bg) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Editorial masthead — inserted above the quiz-body */
body.quiz-page .nx-auth-masthead {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  padding: 8px 24px 0;
  position: relative;
  z-index: 2;
}
body.quiz-page .nx-auth-masthead__rule {
  height: 1px;
  background: var(--nx-ink);
  opacity: 0.85;
}
body.quiz-page .nx-auth-masthead__rule--double { position: relative; }
body.quiz-page .nx-auth-masthead__rule--double::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 1px;
  background: var(--nx-ink);
  opacity: 0.85;
}
body.quiz-page .nx-auth-masthead__brand {
  display: block;
  text-align: center;
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: 1.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nx-ink) !important;
  text-decoration: none;
  padding: 12px 0 10px;
}

/* Top bar back arrow */
body.quiz-page .quiz-topbar {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  padding: 18px 22px !important;
}
body.quiz-page .quiz-topbar__back {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--nx-ink-2) !important;
  text-transform: none !important;
  padding: 6px 10px 6px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body.quiz-page .quiz-topbar__back:hover { color: var(--nx-ink) !important; }
body.quiz-page .quiz-topbar__back svg { width: 16px !important; height: 16px !important; stroke-width: 1.5 !important; }
body.quiz-page .quiz-topbar__step {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--nx-ink-2) !important;
}

/* Eyebrow */
body.quiz-page .screen0-eyebrow,
body.quiz-page .signup-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--nx-garnet) !important;
  text-align: center;
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px !important;
}
body.quiz-page .screen0-eyebrow::before,
body.quiz-page .screen0-eyebrow::after,
body.quiz-page .signup-eyebrow::before,
body.quiz-page .signup-eyebrow::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--nx-garnet);
  display: inline-block;
}

/* Headline + subtitle */
body.quiz-page .screen0-title,
body.quiz-page .signup-title {
  font-family: var(--nx-font-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(2rem, 6.5vw, 2.75rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  color: var(--nx-ink) !important;
  text-align: center;
  margin-bottom: 14px !important;
}
body.quiz-page .screen0-title em,
body.quiz-page .signup-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--nx-garnet);
}
body.quiz-page .screen0-subtitle,
body.quiz-page .signup-subtitle {
  font-family: var(--nx-font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 1rem !important;
  color: var(--nx-ink-2) !important;
  text-align: center;
  max-width: 34ch;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 28px !important;
  line-height: 1.5 !important;
}

/* Card wrapper — hairline top/bottom, no boxed blur */
body.quiz-page .quiz-reg-card {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--nx-line) !important;
  border-bottom: 1px solid var(--nx-line) !important;
  border-radius: 0 !important;
  padding: 28px 0 !important;
  backdrop-filter: none !important;
  width: 100%;
  box-shadow: none !important;
}

/* Inputs — underline only, Fraunces values, tight + neat */
body.quiz-page .quiz-input {
  padding: 9px 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--nx-line-strong) !important;
  border-radius: 0 !important;
  color: var(--nx-ink) !important;
  font-family: var(--nx-font-display) !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  transition: border-color 0.3s var(--nx-ease) !important;
  box-shadow: none !important;
}
body.quiz-page .quiz-input::placeholder {
  color: var(--nx-ink-3) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  opacity: 1 !important;
}
body.quiz-page .quiz-input:focus {
  outline: none !important;
  border-bottom-color: var(--nx-ink) !important;
  border-bottom-width: 2px !important;
  padding-bottom: 8px !important;
  box-shadow: none !important;
}
body.quiz-page textarea.quiz-input { min-height: 72px; resize: vertical; }

/* Select dropdowns use the same underline treatment */
body.quiz-page select.quiz-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nx-ink-2) 50%),
                    linear-gradient(135deg, var(--nx-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 26px !important;
}

/* Buttons — single editorial template (primary / ghost / onDark) */
body.quiz-page .quiz-btn-next,
body.quiz-page .quiz-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em !important;
  border-radius: 100px !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.3s var(--nx-ease), color 0.3s var(--nx-ease), border-color 0.3s var(--nx-ease) !important;
  line-height: 1.2;
}
body.quiz-page .quiz-btn-next {
  color: var(--nx-bg) !important;
  background: var(--nx-ink) !important;
  border: 1px solid var(--nx-ink) !important;
}
body.quiz-page .quiz-btn-next:hover:not(:disabled) {
  background: var(--nx-garnet) !important;
  border-color: var(--nx-garnet) !important;
  transform: none !important;
}
body.quiz-page .quiz-btn-ghost {
  color: var(--nx-ink) !important;
  background: transparent !important;
  border: 1px solid var(--nx-line-strong) !important;
}
body.quiz-page .quiz-btn-ghost:hover:not(:disabled) {
  background: rgba(31, 22, 18, 0.04) !important;
  border-color: var(--nx-ink) !important;
  transform: none !important;
}
/* Variant used on dark video overlays (venue intro etc.) */
body.quiz-page .quiz-btn-next--onDark {
  color: var(--nx-ink) !important;
  background: var(--nx-bg) !important;
  border-color: var(--nx-bg) !important;
}
body.quiz-page .quiz-btn-next--onDark:hover:not(:disabled) {
  background: var(--nx-gold, #B8892A) !important;
  border-color: var(--nx-gold, #B8892A) !important;
  color: var(--nx-ink) !important;
}

/* Google button — hairline outline */
body.quiz-page .quiz-google-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--nx-ink) !important;
  background: transparent !important;
  border: 1px solid var(--nx-line-strong) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  padding: 13px 16px !important;
  transition: background 0.3s var(--nx-ease), border-color 0.3s var(--nx-ease) !important;
}
body.quiz-page .quiz-google-btn:hover:not(:disabled) {
  background: rgba(31, 22, 18, 0.04) !important;
  border-color: var(--nx-ink) !important;
  transform: none !important;
}

/* "or" divider */
body.quiz-page .quiz-or {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--nx-ink-3) !important;
}
body.quiz-page .quiz-or::before,
body.quiz-page .quiz-or::after {
  background: var(--nx-line) !important;
}

/* Error banner — editorial side rule */
body.quiz-page .quiz-error,
body.quiz-page .signup-error {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid #c44 !important;
  border-radius: 0 !important;
  color: #a33 !important;
  font-family: var(--nx-font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  padding: 10px 14px !important;
  font-size: 0.875rem !important;
}

/* Footer */
body.quiz-page .login-footer,
body.quiz-page .signup-footer {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--nx-ink-3) !important;
  border-top: 1px solid var(--nx-line);
  max-width: 480px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
}
body.quiz-page .login-footer a,
body.quiz-page .signup-footer a {
  color: var(--nx-ink-2) !important;
  text-decoration: none !important;
}
body.quiz-page .login-footer a:hover,
body.quiz-page .signup-footer a:hover { color: var(--nx-ink) !important; }

/* Secondary / skip link */
body.quiz-page .login-skip,
body.quiz-page .signup-skip,
body.quiz-page .quiz-skip {
  font-family: var(--nx-font-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 0.9rem !important;
  color: var(--nx-ink-2) !important;
  border: none !important;
  background: none !important;
  padding-bottom: 2px !important;
  border-bottom: 1px solid var(--nx-line-strong) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: color 0.3s var(--nx-ease), border-color 0.3s var(--nx-ease) !important;
}
body.quiz-page .login-skip:hover,
body.quiz-page .signup-skip:hover,
body.quiz-page .quiz-skip:hover {
  color: var(--nx-ink) !important;
  border-bottom-color: var(--nx-ink) !important;
  text-decoration: none !important;
}

/* =========================================================================
   A11Y: reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .nx-mark::after { transform: scaleX(1) !important; }
}