/* ==========================================================================
   fonts.css — the ONE file that decides which typeface every piece of text
   on the site is set in. Nothing else in the CSS declares a font-family.

   To restyle the site's type you only ever touch this file, in three steps:

     1. LOAD   — point the @font-face blocks at your files in assets/fonts/.
     2. CHOOSE — name each family as a stack in :root.
     3. ASSIGN — hand a stack to each role token (--font-body, --font-heading,
                 --font-display, ...). Every selector in the APPLY section
                 below already reads from those tokens, so one edit up here
                 changes every matching piece of text on every page.

   Sizes, weights, letter-spacing and text-transform are NOT here — those stay
   with the components in base.css / layout.css / pages.css, because they are
   part of each component's layout rather than a choice of typeface.
   ========================================================================== */


/* --- 1. LOAD -------------------------------------------------------------
   Self-hosted only — nothing is fetched from the internet.

   Drop your font files into assets/fonts/, then point the src: lines below
   at them. Paths are relative to THIS file, so a file saved as
   assets/fonts/whatever.woff2 is written here as ../assets/fonts/whatever.woff2

   'SiteSans' below is just an internal label, not the font's real name. You
   never need to change it — leave it alone and only edit the src: URLs and
   the filenames will follow. (If you'd rather see the real name in devtools,
   rename it here AND in --font-sans under section 2.)

   Format: .woff2 is the one to use if you can — it's roughly half the size of
   .ttf/.otf and every browser this site targets supports it. If your files are
   .ttf or .otf, change both the extension in the url() and the word inside
   format() to 'truetype' or 'opentype' to match.

   Weights: the design uses 300, 400, 500, 600, 700 and 800. Any weight you
   leave without a file gets faked by the browser (synthetic bold), which looks
   noticeably worse — so supply what you can. Delete the blocks for weights you
   genuinely don't have rather than leaving them pointing at missing files.

   Got a single VARIABLE font file instead of one file per weight? Delete all
   six blocks and use one block like this instead:

       @font-face {
           font-family: 'SiteSans';
           src: url('../assets/fonts/site-sans-variable.woff2') format('woff2-variations');
           font-weight: 300 800;      <- the range the file covers
           font-style: normal;
           font-display: swap;
       }
   ------------------------------------------------------------------------ */

/* Poppins carries every weight the design asks for (300-800), plus the two
   italics that are actually rendered slanted: with no real italic face the
   browser shears the upright one, which reads noticeably worse. */

@font-face {
    font-family: 'SiteSans';
    src: url('../assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SiteSans';
    src: url('../assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SiteSans';
    src: url('../assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SiteSans';
    src: url('../assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SiteSans';
    src: url('../assets/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SiteSans';
    src: url('../assets/fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SiteSans';
    src: url('../assets/fonts/Poppins/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SiteSans';
    src: url('../assets/fonts/Poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* --- The display face ----------------------------------------------------
   LEMON MILK ships as a single Bold cut, so its weight is declared as the
   range 400-900: whatever weight the display selectors ask for (they use
   800) resolves to this one file instead of being synthetically emboldened.
   ------------------------------------------------------------------------ */

@font-face {
    font-family: 'SiteDisplay';
    src: url('../assets/fonts/LEMONMILK/LEMONMILK-Bold.otf') format('opentype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}


:root {

    /* --- 2. CHOOSE ------------------------------------------------------
       The actual families. Always keep the fallbacks after your font so
       text still renders if the webfont fails to load.
       -------------------------------------------------------------------- */

    --font-sans: 'SiteSans', 'Segoe UI', system-ui, sans-serif;

    /* The fallbacks after 'SiteSans' are what shows if a font file is missing
       or still loading. Keep at least one, and end with a generic keyword
       (sans-serif / serif) so text always renders. */

    --font-display-face: 'SiteDisplay', 'Segoe UI', system-ui, sans-serif;


    /* --- 3. ASSIGN ------------------------------------------------------
       Roles, not places. Change the right-hand side to restyle every piece
       of text in that role across the whole site.
       -------------------------------------------------------------------- */

    /* Running text: paragraphs, intro copy, project summaries. */
    --font-body:    var(--font-sans);

    /* Section and card headings, names, titles. */
    --font-heading: var(--font-sans);

    /* The oversized headings: reflected section titles, hero type. */
    --font-display: var(--font-display-face);

    /* The links in the top navigation bar. */
    --font-nav:     var(--font-sans);

    /* Interactive chrome: buttons, filter pills, carousel arrows. */
    --font-ui:      var(--font-sans);

    /* Small tracked-out uppercase labels and eyebrows. */
    --font-label:   var(--font-sans);

    /* Fine print: roles, captions, contact details, spec tables. */
    --font-meta:    var(--font-sans);

    /* Large standalone numerals: 01, 02, edition numbers. */
    --font-number:  var(--font-heading);

    /* The foreword carousel quote cards. */
    --font-quote:   var(--font-body);
}


/* ==========================================================================
   APPLY — every text style on the site, grouped by the role it belongs to.

   Adding a new component? Add its class to the group it belongs to so it
   keeps following the tokens above. Do not put font-family in the other
   stylesheets, or this file stops being the single source of truth.
   ========================================================================== */


/* --- Body: the default every element inherits unless listed below -------- */

body,
.body-copy {
    font-family: var(--font-body);
}


/* --- Display: the oversized headings ------------------------------------ */

.reflect,                   /* reflected section titles (and .reflect--sm)  */
.edition-list__label,       /* "SAA AWARDS" rows under Previous editions    */
.vote-panel__title,         /* projects.php vote panel                      */
.not-found__title {         /* 404 state on project.php                     */
    font-family: var(--font-display);
}


/* --- Headings, names and card titles ------------------------------------ */

h1, h2, h3, h4,
.reflect-sub,               /* subtitle under a reflected heading           */
.modal__title,
.nominee-tile__name,        /* landing page nominee grid                    */
.project-card__title,       /* projects.php grid                            */
.foreword-row__name {
    font-family: var(--font-heading);
}


/* --- Navigation --------------------------------------------------------- */

.site-nav__link {
    font-family: var(--font-nav);
}


/* --- Interactive chrome -------------------------------------------------
   These need class-level specificity to beat `button { font: inherit }`
   in base.css, which would otherwise reset the family.
   ------------------------------------------------------------------------ */

.btn,
.filter-bar__btn,
.carousel__arrow,
.modal__close {
    font-family: var(--font-ui);
}


/* --- Small uppercase labels and eyebrows -------------------------------- */

.project-card__student,
.foreword-row__role,
.vote-panel__copy,
.filter-empty {
    font-family: var(--font-label);
}


/* --- Large numerals ----------------------------------------------------- */

.project-card__number,
.edition-list__number {
    font-family: var(--font-number);
}


/* --- Foreword carousel quote cards --------------------------------------
   Listed last, and .quote-card .body-copy outranks the plain .body-copy
   rule at the top, so quotes can carry their own family.
   ------------------------------------------------------------------------ */

.quote-card .body-copy,
.quote-card__name,
.quote-card__role {
    font-family: var(--font-quote);
}