/* ============================================================
   ARVIO · typography.css
   Tre famiglie, nessuna sostituzione. woff2 locali sottoinsiemizzati
   (Latin + Latin Ext-A + punteggiatura tipografica + accentate italiane).
   ============================================================ */

/* ---------------- @font-face ---------------- */

@font-face {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-sc-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500.woff2') format('woff2');
}

/* ---------------- Base ---------------- */

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--navy);
  background-color: var(--white);
}

/* ---------------- Titoli ---------------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: inherit;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
}

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

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

/* ---------------- Corpo editoriale ---------------- */

p {
  max-width: 68ch;
}

.measure :is(p, ul, ol),
p.measure {
  max-width: var(--container-prose);
}

.flow > * + * {
  margin-top: var(--space-s);
}

.flow--tight > * + * {
  margin-top: var(--space-xs);
}

em,
i {
  font-style: italic;
}

strong,
b {
  font-weight: 400;
  color: var(--copper-text);
}

/* ---------------- Ruoli tipografici (utility) ---------------- */

/* Display e titoli non spezzano mai una parola a meta */
.t-display,
.t-h1,
.t-h2,
.t-h3 {
  overflow-wrap: normal;
  hyphens: manual;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); }
.t-h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }

.t-h3-italic {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.t-body-large {
  font-family: var(--font-body);
  font-size: var(--fs-body-large);
  line-height: var(--lh-body);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body-large);
  line-height: var(--lh-tight);
  color: var(--stone);
}

.t-small { font-size: var(--fs-small); }
.t-micro { font-size: var(--fs-micro); }

/* ---------------- UI / Jost ---------------- */

.label,
.meta {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-sc);
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------------- Eyebrow (componente 7.6) ---------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--copper-text);
  margin-bottom: var(--space-xs);
}

.eyebrow--light {
  color: var(--copper-light);
}

@media (min-width: 768px) {
  .eyebrow {
    font-size: var(--fs-small);
  }
}

/* ---------------- Link inline ---------------- */

.prose a,
a.link-inline {
  color: var(--copper-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-medium), color var(--t-medium);
}

.prose a:hover,
a.link-inline:hover {
  color: var(--copper-light);
  border-bottom-color: var(--copper-light);
}

/* ---------------- Quote editoriale (componente 7.7) ---------------- */

.quote-editorial {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body-large);
  line-height: 1.5;
  padding-left: var(--space-s);
  border-left: 3px solid var(--copper);
  color: inherit;
}

.quote-editorial cite {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-sc);
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------------- Drop cap (sezione 8.2 / 8.7) ---------------- */

.has-dropcap::first-letter {
  font-family: var(--font-display);
  color: var(--copper-text);
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding-right: 0.08em;
  margin-top: 0.06em;
}

/* ---------------- Numero grande (componente 7.8) ---------------- */

.big-numeral {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--copper-text);
  font-feature-settings: "tnum" 1, "lnum" 1;
}