/* =============================================================
   The Neville Wears Prada — Colors & Type
   Editorial fashion-magazine elegance meets matchday atmosphere.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Bodoni+Moda:ital,opsz,wght@0,6..96,700;1,6..96,400;1,6..96,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap");

/* DM Serif Display ships in a single weight only (400 / 400 italic).
   Disable browser bold-synthesis so any leftover 600/700 declarations
   don't render as smeared fake-bold. */
* { font-synthesis-weight: none; }

:root {
  /* ---------- Core palette ---------- */
  --tnwp-black-green:   #141F18; /* primary dark — pitch at night */
  --tnwp-near-black:    #2C2C28; /* body text, deep contrast */
  --tnwp-faded-green:   #4A5C4E; /* secondary text, quiet workhorse */
  --tnwp-parchment:     #EDE9E0; /* body backgrounds — warm editorial */
  --tnwp-parchment-2:   #E4DFD2; /* deeper parchment for cards on cards */
  --tnwp-dusty-rose:    #B8908A; /* opinion / personality accent */
  --tnwp-muted-gold:    #A89968; /* steady / grounded accent */

  /* ---------- Extended tints (oklch-tuned) ---------- */
  --tnwp-rose-deep:     #8C6963; /* rose on parchment, hover */
  --tnwp-rose-soft:     #D3B5B0; /* rose tint backgrounds */
  --tnwp-gold-deep:     #7E7148; /* gold on parchment, hover */
  --tnwp-gold-soft:     #C7BA94; /* gold tint backgrounds */
  --tnwp-green-soft:    #233027; /* between black-green and near-black */
  --tnwp-rule:          rgba(20, 31, 24, 0.18); /* hairline rules */
  --tnwp-rule-strong:   rgba(20, 31, 24, 0.55);
  --tnwp-rule-light:    rgba(237, 233, 224, 0.25); /* on dark */

  /* ---------- Semantic foreground / background ---------- */
  --tnwp-bg:            var(--tnwp-parchment);
  --tnwp-bg-alt:        var(--tnwp-parchment-2);
  --tnwp-bg-dark:       var(--tnwp-black-green);
  --tnwp-bg-dark-alt:   var(--tnwp-green-soft);

  --tnwp-fg:            var(--tnwp-near-black);
  --tnwp-fg-2:          var(--tnwp-faded-green);
  --tnwp-fg-3:          rgba(44, 44, 40, 0.55);
  --tnwp-fg-on-dark:    var(--tnwp-parchment);
  --tnwp-fg-on-dark-2:  rgba(237, 233, 224, 0.7);
  --tnwp-fg-on-dark-3:  rgba(237, 233, 224, 0.45);

  /* ---------- Type families ----------
     Two-serif system, magazine-style:
     - DM Serif Display — cover/headline serif. The newsstand voice.
         Single weight (400 + italic). Used for h1–h4, masthead, wordmark, deck.
     - Bodoni Moda italic — interior/quote serif. The Didone in the article.
         Higher contrast, refined where DM Serif Display would be too blunt.
         Used for pull quotes, bylines, italic numerals. Italic only.
  */
  --tnwp-serif:         "DM Serif Display", "Bodoni Moda", "Didot", "GT Sectra", Georgia, serif;
  --tnwp-serif-quote:   "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --tnwp-sans:          "DM Sans", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tnwp-mono:          "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- Type scale (fluid where useful) ---------- */
  --tnwp-text-xs:    12px;
  --tnwp-text-sm:    14px;
  --tnwp-text-base:  16px;
  --tnwp-text-lg:    18px;
  --tnwp-text-xl:    21px;
  --tnwp-text-2xl:   26px;
  --tnwp-text-3xl:   34px;
  --tnwp-text-4xl:   46px;
  --tnwp-text-5xl:   62px;
  --tnwp-text-6xl:   84px;
  --tnwp-text-7xl:   112px;

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

  --tnwp-radius-none: 0;
  --tnwp-radius-sm: 2px;
  --tnwp-radius-md: 4px;
  --tnwp-radius-lg: 8px;
  --tnwp-radius-pill: 999px;

  /* Borders / shadows — restrained, editorial, no soft puffs */
  --tnwp-border: 1px solid var(--tnwp-rule);
  --tnwp-border-strong: 1px solid var(--tnwp-rule-strong);
  --tnwp-border-dark: 1px solid var(--tnwp-rule-light);

  --tnwp-shadow-print: 0 1px 0 rgba(20,31,24,0.06), 0 14px 28px -18px rgba(20,31,24,0.25);
  --tnwp-shadow-card:  0 1px 0 rgba(20,31,24,0.04), 0 22px 40px -28px rgba(20,31,24,0.30);

  /* ---------- Motion ---------- */
  --tnwp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tnwp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tnwp-dur-fast: 140ms;
  --tnwp-dur: 220ms;
  --tnwp-dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --tnwp-max-w: 1200px;
  --tnwp-prose-w: 660px;
}

/* =============================================================
   Semantic typography roles
   Use these directly: class="tnwp-h1", class="tnwp-eyebrow", etc.
   ============================================================= */

.tnwp-eyebrow {
  font-family: var(--tnwp-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tnwp-faded-green);
}

.tnwp-eyebrow--rose { color: var(--tnwp-rose-deep); }
.tnwp-eyebrow--gold { color: var(--tnwp-gold-deep); }

.tnwp-h1, h1.tnwp {
  font-family: var(--tnwp-serif);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--tnwp-near-black);
  text-wrap: balance;
}

.tnwp-h2, h2.tnwp {
  font-family: var(--tnwp-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--tnwp-near-black);
  text-wrap: balance;
}

.tnwp-h3, h3.tnwp {
  font-family: var(--tnwp-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tnwp-near-black);
}

.tnwp-h4, h4.tnwp {
  font-family: var(--tnwp-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--tnwp-near-black);
}

.tnwp-deck {
  font-family: var(--tnwp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: var(--tnwp-faded-green);
  text-wrap: pretty;
}

.tnwp-lede {
  font-family: var(--tnwp-sans);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.5;
  color: var(--tnwp-near-black);
  text-wrap: pretty;
}

.tnwp-body, p.tnwp {
  font-family: var(--tnwp-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tnwp-near-black);
  text-wrap: pretty;
}

.tnwp-small {
  font-family: var(--tnwp-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tnwp-faded-green);
}

.tnwp-pullquote {
  font-family: var(--tnwp-serif-quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--tnwp-near-black);
  text-wrap: balance;
}

.tnwp-meta {
  font-family: var(--tnwp-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--tnwp-faded-green);
}

.tnwp-byline {
  font-family: var(--tnwp-serif-quote);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--tnwp-faded-green);
}

.tnwp-eyebrow-num {
  font-family: var(--tnwp-serif-quote);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--tnwp-dusty-rose);
}

/* =============================================================
   Series accent classes — apply to article cards, post headers, dots
   ============================================================= */
[data-series="rundown"]        { --series-accent: var(--tnwp-muted-gold);  --series-accent-deep: var(--tnwp-gold-deep); --series-accent-soft: var(--tnwp-gold-soft);}
[data-series="window-shopping"]{ --series-accent: var(--tnwp-muted-gold);  --series-accent-deep: var(--tnwp-gold-deep); --series-accent-soft: var(--tnwp-gold-soft);}
[data-series="love-letter"]    { --series-accent: var(--tnwp-muted-gold);  --series-accent-deep: var(--tnwp-gold-deep); --series-accent-soft: var(--tnwp-gold-soft);}
[data-series="considered-loudly"] { --series-accent: var(--tnwp-dusty-rose);  --series-accent-deep: var(--tnwp-rose-deep); --series-accent-soft: var(--tnwp-rose-soft);}
[data-series="absolute-scenes"]{ --series-accent: var(--tnwp-dusty-rose);  --series-accent-deep: var(--tnwp-rose-deep); --series-accent-soft: var(--tnwp-rose-soft);}

/* =============================================================
   Base resets useful when this file is used as the foundation
   ============================================================= */
.tnwp-root {
  background: var(--tnwp-bg);
  color: var(--tnwp-fg);
  font-family: var(--tnwp-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tnwp-root--dark {
  background: var(--tnwp-bg-dark);
  color: var(--tnwp-fg-on-dark);
}
.tnwp-root--dark .tnwp-h1,
.tnwp-root--dark .tnwp-h2,
.tnwp-root--dark .tnwp-h3,
.tnwp-root--dark .tnwp-h4,
.tnwp-root--dark .tnwp-lede,
.tnwp-root--dark .tnwp-body,
.tnwp-root--dark .tnwp-pullquote { color: var(--tnwp-fg-on-dark); }
.tnwp-root--dark .tnwp-small,
.tnwp-root--dark .tnwp-deck,
.tnwp-root--dark .tnwp-byline,
.tnwp-root--dark .tnwp-meta { color: var(--tnwp-fg-on-dark-2); }
.tnwp-root--dark .tnwp-eyebrow { color: var(--tnwp-fg-on-dark-2); }