/* Hallmark · PMC design tokens
 * Official People's Media Co brand palette, converted hex → OKLCH.
 * The hex values in the live site are the source of truth; these are exact conversions.
 * Shared by all three redesign concepts — the brand is locked, structure is what varies.
 */

:root {
  /* ===== Colour — locked brand system ===== */
  --color-blue:       oklch(54.7% 0.250 264.0);  /* #1E5BFF brand Blue      */
  --color-blue-deep:  oklch(42.3% 0.218 264.6);  /* #0E37C2                 */
  --color-blue-ink:   oklch(31.7% 0.158 265.3);  /* #0A2380                 */
  --color-sky:        oklch(85.6% 0.071 267.2);  /* #BBCFFF                 */
  --color-paper:      oklch(98.2% 0.003 84.6);   /* #FAF9F7 brand Off White */
  --color-paper-2:    oklch(95.2% 0.007 88.6);   /* #F1EFEA                 */
  --color-sun:        oklch(85.3% 0.165 85.5);   /* #FFC52C brand Yellow    */
  --color-red:        oklch(67.1% 0.217 29.2);   /* #FF4D3D brand Red       */
  --color-ink:        oklch(17.8% 0.000 89.9);   /* #111111 brand Black     */

  /* Derived — never invent a colour mid-render, add it here first */
  --color-ink-2:      oklch(42.0% 0.000 89.9);   /* muted body              */
  --color-rule:       oklch(88.0% 0.004 88.0);   /* hairlines               */
  --color-rule-firm:  oklch(72.0% 0.006 88.0);   /* visible dividers        */
  --color-rule-dark:  oklch(35.0% 0.000 89.9);   /* hairlines on ink        */
  --color-shadow:     oklch(17.8% 0.000 89.9/.45); /* drop-shadow on imagery */
  --color-scrim:      oklch(17.8% 0.000 89.9/.55); /* top scrim over photography */
  --color-scrim-deep: oklch(17.8% 0.000 89.9/.78); /* bottom scrim, carries microtype */
  --color-sheen:      oklch(100% 0.000 89.9/.34);  /* travelling highlight on the 3D mark */

  /* Platform marks. Third-party brand colours, used only to identify the platforms
     PMC publishes on and to link out to them. Kept in the token block so nothing
     inlines a raw hex mid-render. */
  --brand-spotify:     oklch(68.9% 0.187 148.9);
  --brand-tiktok-cyan: oklch(87.6% 0.146 191.6);
  --brand-tiktok-red:  oklch(64.7% 0.238  17.7);
  --brand-ig-amber:    oklch(81.0% 0.148  71.1);
  --brand-ig-pink:     oklch(63.2% 0.248  28.3);
  --brand-ig-violet:   oklch(50.4% 0.188 308.6);
  --color-focus:      var(--color-blue);
  --color-accent-ink: var(--color-paper);

  /* ===== Type ===== */
  --font-display: "Archivo Expanded", "Arial Narrow", system-ui, sans-serif;
  --font-serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --font-grotesk: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-md:   1.0625rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-display-s: clamp(2.5rem, 6vw, 4.5rem);
  --text-display:   clamp(3rem, 11vw, 9rem);

  /* ===== Space — 4pt scale ===== */
  --space-3xs: 0.25rem;  --space-2xs: 0.5rem;   --space-xs:  0.75rem;
  --space-sm:  1rem;     --space-md:  1.5rem;   --space-lg:  2rem;
  --space-xl:  3rem;     --space-2xl: 4.5rem;   --space-3xl: 7rem;
  --space-4xl: 10rem;

  /* ===== Motion ===== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --dur-short:   180ms;
  --dur-mid:     320ms;

  /* ===== Shape ===== */
  --rule-hair: 1px;
  --rule-firm: 2px;
  --maxw:      1280px;
  --measure:   68ch;
}

/* ===== Self-hosted brand faces ===== */
@font-face {
  font-family: "Archivo Expanded";
  src: url("../assets/fonts/ArchivoExpanded-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Expanded";
  src: url("../assets/fonts/ArchivoExpanded-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../assets/fonts/SplineSansMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ===== Reset + universal safety ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }

/* Headings are ALWAYS roman — italic headers are a top-tier AI tell */
h1, h2, h3, h4, .display { font-style: normal; }

/* Display type must be able to break inside long words on narrow screens */
h1, h2, .display { overflow-wrap: anywhere; min-width: 0; }

/* Clickable text never wraps to two lines */
.btn, .navlink, .footlink { white-space: nowrap; }

/* Focus rings appear INSTANTLY — never transitioned */
:focus-visible {
  outline: var(--rule-firm) solid var(--color-focus);
  outline-offset: 3px;
}

/* Numbers in columns align */
.tabular { font-variant-numeric: tabular-nums; }

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