/* ---------------------------------------------------------------------------
   Arno Pro Display - the site's typeface, headings and body alike.

   Self-hosted, subset to Latin plus smart quotes and dashes: the source
   ArnoPro-Display.otf was 423 KB across 1011 codepoints; this is 34 KB across
   201. That subset was checked against what the site actually renders --
   digits, $ % & @ + =, smart quotes, en/em dash, ellipsis and accented Latin
   are all present. The only gaps are the bullet (list markers come from
   list-style) and arrows (those are Font Awesome glyphs), so nothing is
   missing in practice.

   ONE WEIGHT. This family is Regular (400) only and is NOT variable. Every
   rule below therefore states 400, and nothing should ask for 500, 600 or 700
   in this face -- the browser would answer with a synthesised fake bold, which
   on a high-contrast display serif looks smeared. Hierarchy is carried by size
   and by the navy heading colour instead.

   Replaces Cormorant Garamond. The theme's own @import of Space Grotesk stays
   commented out in asset/sass/style.css -- an @import is the worst place for a
   webfont, since the browser cannot discover it until that stylesheet has
   downloaded and parsed.
   --------------------------------------------------------------------------- */

@font-face {
    font-family: "arno-pro-display";
    src: url("../asset/fonts/ArnoPro-Display-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    /* Render immediately in the fallback serif and swap when loaded, so text
       is never invisible while the font downloads. */
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Site-wide application.

   The theme routes every one of its 11 font-family declarations through two
   custom properties (asset/sass/style.css:1050-1051), so redefining those two
   here re-faces the whole site -- headings, nav, cards, footer -- without
   touching the theme or chasing individual selectors. This file is linked
   after the theme stylesheet in _Layout, so these definitions win.
   --------------------------------------------------------------------------- */
:root {
    --body-font: "arno-pro-display", "Arno Pro", Garamond, Georgia, "Times New Roman", serif;
    --heading-font: "arno-pro-display", "Arno Pro", Garamond, Georgia, "Times New Roman", serif;
}

/* Body copy. The size stays where it was set for the previous serif -- Arno
   has a similarly small x-height, so 17px is still the right floor. Weight
   returns to 400: it is the only one the family has. */
body {
    font-size: 17px;
    line-height: 29px;
    font-weight: 400;
}

/* Headings keep their size but not a heavier weight -- see the note above.
   Stated explicitly so nothing inherits a bolder value from the theme. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

/* Paragraphs a step above the 17px body baseline. The increase is applied to
   <p> alone rather than by raising `body` again, because body size also
   governs nav, labels and other small UI text that should not grow with it.

   Footer and card text that sets its own size keeps it: those rules carry a
   class, so they outrank this bare element selector whatever the order. */
p {
    font-size: 19px;
    line-height: 32px;
}

/* Form controls and buttons do not inherit font-family from body, so they
   would otherwise keep rendering in the browser default sans. */
button,
input,
select,
textarea,
.btn,
.form-control {
    font-family: inherit;
}

/* Small UI text: held at the single available weight. The theme sets 500 or
   600 on some of these, which would synthesise a fake bold. */
.btn,
button,
label,
input,
select,
textarea,
.form-control,
small,
.small {
    font-weight: 400;
}
