/* ──────────────────────────────────────────────────────────────
   TicketHub brand typography — self-hosted faces + role tokens.

   The mockups (media/disign/*.pdf) use five faces. Two ship with the repo
   already; three could not:

     Raintion Black       -> in repo. Hero headline, event card titles.
     Blackout Midnight    -> in repo. Reserved display weight.
     HelveticaNeue 97 BlkCnObl -> licensed. Substituted with Archivo,
                             whose wdth + ital axes reach the same cut.
     Effra VF (Trial)     -> trial licence. Substituted with Hanken Grotesk.
     Intan Regular        -> folded into the Hanken Grotesk role.

   Archivo and Hanken Grotesk are SIL OFL (licences alongside the files).
   Both are variable; Archivo carries a real width axis, which is what the
   condensed section headlines and the italic eyebrow rely on.

   Only the latin and latin-ext subsets are shipped — the site is en + sr_Latn,
   so nothing needs Cyrillic.
   ────────────────────────────────────────────────────────────── */

/* ── Archivo (variable: wght 100-900, wdth 62-125, roman + italic) ── */
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo/Archivo-latin.2f7ea45bad3a.woff2") format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo/Archivo-latin-ext.cde95d2797df.woff2") format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo/Archivo-Italic-latin.f1de6d9ea318.woff2") format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo/Archivo-Italic-latin-ext.29c26d4a91e0.woff2") format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Hanken Grotesk (variable: wght 100-900, roman + italic) ── */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url("../fonts/HankenGrotesk/HankenGrotesk-latin.a6b899943e31.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url("../fonts/HankenGrotesk/HankenGrotesk-latin-ext.a3a0917757d7.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url("../fonts/HankenGrotesk/HankenGrotesk-Italic-latin.1edbd51f5ac7.woff2") format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url("../fonts/HankenGrotesk/HankenGrotesk-Italic-latin-ext.5bbe7a10adab.woff2") format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Repo faces ── */
@font-face {
  font-family: 'Raintion Black';
  src: url("../fonts/RaintionBlack.f5c8e6c0fa50.ttf") format('truetype');
  font-weight: 100 900; /* single heavy file; full range stops synth-bolding */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Blackout Midnight';
  src: url("../fonts/BlackoutMidnight.b89e9bfa2da9.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Compressed';
  src: url("../fonts/HelveticaCompressed.bec59aa5a94f.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Outward (display only — three separate faces, deliberately not one family)

   Ultra-condensed decorative display face from the Panjko handoff. Measured
   from the source SVG fonts:

     units-per-em 1000 · ascent 800 · descent -200  (line box exactly 1.000em)
     cap height 0.700em · default advance 158/1000 (I=79, G/Q=198, M/N/T/W=237)
     avg uppercase advance 0.170em — Raintion Black is 0.701em, so Outward is
     3.9x narrower at the same font-size.
     Ink is x[0..146] of a 158 advance: NO left sidebearing, 12 units right.
     Counters are a single 12/1000-em slot = 1.2% of font-size, so the face
     turns to solid bars below ~64px. That is why --font-outward carries a
     size floor and is never used for UI text.

   Three families rather than the handoff's one-family weight/style mapping
   (Block=normal, Borders=bold, Round=italic), because font-synthesis:none
   below stops the browser FABRICATING a bold — it does not stop face
   SELECTION. h1-h6 default to font-weight:bold and base.css never resets it,
   so under the handoff's mapping any switched heading would silently render
   in Borders (the hollow outline cut), and anything with font-style:italic
   would silently render in Round. Separate names make that impossible.

   font-weight: 100 900 on a single file is the same guard used for Raintion
   Black above: every weight request becomes an exact match, so nothing is
   ever synth-bolded.

   font-display: block, not swap — Outward is ~3.9x narrower than its Archivo
   fallback, so swap would visibly re-wrap a heading and snap it back. Paired
   with the per-page preload in base.html the block window is ~0ms.

   Round's ink runs x[-40..+275] against a 158 advance, overflowing its own
   box by ~0.74 advance, so it clips inside overflow:hidden containers
   (.section--slab, .coincidence, .event-card__media, .nav-dropdown__menu).
   Declared for completeness, deliberately unused. An unreferenced @font-face
   is never downloaded, so it costs nothing. */
@font-face {
  font-family: 'Outward Block';
  src: url("../fonts/Outward/outward-block-webfont.5847ee23c89e.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Outward Borders';
  src: url("../fonts/Outward/outward-borders-webfont.a1654d7ee984.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Outward Round';
  src: url("../fonts/Outward/outward-round-webfont.38107ee9bd8a.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* Inter is no longer used by the public site, but admin.css, eventmaker.css and
   dashboard-sidebar.css still name it directly. Declaring it costs nothing —
   an unreferenced @font-face is never downloaded — and keeps those safe. */
@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/Inter_18pt-Regular.37dcabff629c.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/Inter_18pt-Medium.8540f35bf8ac.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/Inter_18pt-SemiBold.e5532d993e2d.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/Inter_18pt-Bold.f77ce9588dcc.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* No element should ever get a synthesised bold or italic — every face here
   ships real weights, and the display faces are already at their heaviest. */
html {
  font-synthesis: none;
  font-synthesis-weight: none;
}

/* ──────────────────────────────────────────────────────────────
   Role tokens
   ────────────────────────────────────────────────────────────── */
:root {
  /* Hero headline and event card titles */
  --font-hero: 'Raintion Black', 'Archivo', Impact, sans-serif;

  /* Section headlines, nav links, the italic eyebrow — condensed via wdth */
  --font-condensed: 'Archivo', 'Helvetica Compressed', 'Arial Narrow', sans-serif;

  /* Body, UI, footer */
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Display only — large headings and decorative type. Outward's counters are
     a 12/1000-em slot (1.2% of font-size), so it is legible only well above
     ~64px: at 30px the counter is 0.36px and the word renders as one black
     slab. Never point UI or body text at this.
     Archivo is the fallback rather than Raintion Black deliberately: Raintion
     is missing C-caron, C-acute and D-stroke (205 codepoints), which Outward
     has, so falling back to Archivo keeps Serbian text in one face. */
  --font-outward: 'Outward Block', 'Archivo', Impact, sans-serif;

  /* Legacy names — still referenced by unmigrated templates. Remapped onto
     the roles above so nothing renders in a fallback while Phase 4 runs. */
  --font-h1: var(--font-hero);
  --font-display: var(--font-condensed);
  --font-compressed: var(--font-condensed);
  --font-body: var(--font-ui);
}

/* ──────────────────────────────────────────────────────────────
   Type utilities

   The condensed roles set font-stretch explicitly: Archivo defaults to 100%
   width, so without it the section headlines render at normal width and lose
   the whole character of the mockup.
   ────────────────────────────────────────────────────────────── */

.t-hero {
  font-family: var(--font-hero);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.t-headline {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-stretch: 75%;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.t-eyebrow-italic {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-stretch: 75%;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.005em;
}

/* Small red uppercase section label — "ON THE PROGRAM" */
.t-eyebrow {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-stretch: 85%;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

/* Small uppercase body copy used in the editorial blocks */
.t-micro {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-stretch: 90%;
  font-size: 0.82rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Nav links */
.t-nav {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-stretch: 88%;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Legacy utility classes kept for unmigrated templates */
.font-h1 { font-family: var(--font-h1); }
.font-display { font-family: var(--font-display); }
.font-hero { font-family: var(--font-hero); }
.font-compressed { font-family: var(--font-compressed); }
.font-body { font-family: var(--font-body); }

h1 { font-family: var(--font-hero); }