/* ------------------------------------------------------------------
   Base: fonts, reset, typography, focus states, shells, the HER device.
   ------------------------------------------------------------------ */

/* Self-hosted fonts. Fraunces stands in for The Seasons until the licensed
   kit arrives (brief 18.1); the @font-face swap is one file drop away. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-v38-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-v38-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Client direction (2 Sep 2026): headers in Bold, not Extra Bold.
     The 700 slot serves the semibold file so headings render one step
     lighter; Recoleta Bold takes this slot when the licensed kit lands. */
  font-family: "Fraunces";
  src: url("../fonts/fraunces-v38-latin-600.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/pt-sans-v18-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/pt-sans-v18-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v24-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v24-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v24-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  /* Client spec (3 Sep 2026): "-10" tracking, read as Figma's
     thousandths-of-an-em convention (-10 = -1% = -0.01em), 1.25
     line-height. Confirm the unit with the client before final sign-off. */
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }

/* Typography */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;              /* tight; a display face carries it */
  letter-spacing: -0.02em;        /* negative tracking at display sizes */
  word-spacing: -0.01em;          /* pulls the words together */
  text-wrap: balance;
  hyphens: none;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
.display { font-size: var(--fs-display); }

/* Client direction (2 Sep 2026): every header in the display face.
   PT Sans stays for the menubar, labels and UI. */
h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { max-width: 68ch; }

.lead {
  font-size: var(--fs-lead);
  /* Matches the client's body-copy line-height spec (3 Sep 2026). */
  line-height: 1.25;
  max-width: 56ch;
}

a { color: var(--tfhp-blue); }

strong { font-weight: 600; }

/* The HER brand device. Casing is authored, never transformed. */
.her { color: var(--tfhp-blue); font-weight: 700; }
.podcast-context .her { color: var(--tfhp-teal); }
.on-dark .her,
.s-dark .her { color: var(--tfhp-sky); }
.podcast-context.s-dark .her,
.s-dark .podcast-context .her { color: var(--tfhp-sky); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tfhp-blue);
}
.s-dark .eyebrow { color: var(--tfhp-sky); }
.s-sand .eyebrow { color: var(--tfhp-blue-deep); }

/* Shells */
.shell { width: var(--shell); margin-inline: auto; }
.shell-narrow { width: var(--shell-narrow); margin-inline: auto; }

/* Section grounds: paper (default), sand (warm break), navy (dark statement).
   Never two dark sections adjacent. */
.section { padding-block: var(--section-y); background: var(--c-bg); }
.s-sand { background: var(--tfhp-sand); }
.s-dark { background: var(--tfhp-navy); color: var(--tfhp-white); }
.s-dark p { color: rgba(255, 255, 255, 0.85); }

/* Focus: visible, always. 2px blue outline with offset. */
:focus-visible {
  outline: 2px solid var(--tfhp-blue);
  outline-offset: 2px;
}
.s-dark :focus-visible { outline-color: var(--tfhp-sky); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--tfhp-navy);
  color: var(--tfhp-white);
  font-family: var(--font-ui);
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Article body: longer measure, looser leading, editorial details */
.article-body { font-size: var(--fs-body); }
.article-body > * { margin-block: 0 var(--sp-5); }
.article-body p { line-height: 1.25; max-width: 68ch; }
.article-body h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-7);
}
.article-body h3 { margin-top: var(--sp-6); }
.article-body img { border-radius: var(--radius); }
.article-body figcaption {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--c-text-mute);
  margin-top: var(--sp-2);
}
.article-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Drop cap on the first paragraph: the detail that reads as editorial. */
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.2em;
  line-height: 0.85;
  float: left;
  padding-right: 0.12em;
  color: var(--tfhp-blue);
}

/* Blockquotes inside body copy */
.article-body blockquote {
  border-left: 2px solid var(--tfhp-coral);
  padding-left: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--tfhp-blue-deep);
}

/* Tables never break the shell */
.table-scroll { overflow-x: auto; }

::selection { background: var(--tfhp-amber); color: var(--tfhp-navy); }