/* Hidden Roots – Typography
   Nelson (Adobe Fonts kit ykv5kqx, loaded without blocking render from
   inc/load-assets.php) carries every heading – it is the brand. Manrope is the
   body face and Cormorant Garamond italic the flourish; both are self-hosted
   latin subsets (fonts/), preloaded. */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../../fonts/manrope-variable-latin.woff2') format('woff2');
    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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500 600;
    font-display: swap;
    src: url('../../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
    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;
}

body {
    font:  var(--text-17mr);
    color: var(--color-walnut);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

h1, h2, h3, h4, h5, h6 {
    color:          var(--color-bark);
    margin-top:     0;
    margin-bottom:  var(--space-md);
    font-weight:    700;
    letter-spacing: 0.01em;
    text-wrap:      balance;
}

h1, .h1 {
    font: var(--text-44nb);

    @media (min-width: 992px) {
        font: var(--text-84nb);
    }
}

h2, .h2 {
    font: var(--text-32nb);

    @media (min-width: 768px) {
        font: var(--text-52nb);
    }
}

h3, .h3 {
    font: var(--text-24nb);

    @media (min-width: 768px) {
        font: var(--text-32nb);
    }
}

h4, .h4 {
    font: var(--text-24nb);
}

p {
    margin-top:    0;
    margin-bottom: var(--space-md);
    text-wrap:     pretty;
}

a {
    color:      var(--color-moss);
    transition: color var(--transition-fast);

    &:hover {
        color: var(--color-bark);
    }
}

strong, b {
    font-weight: 600;
}

::selection {
    background: var(--color-sage);
    color:      var(--color-bark);
}

/* Small uppercase label with a short rule before it */
.eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            12px;
    margin:         0 0 var(--space-md);
    font:           var(--text-12ms);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--color-moss);

    &::before {
        content:    '';
        width:      28px;
        height:     1px;
        background: currentColor;
    }

    .on-dark & {
        color: var(--color-sage);
    }
}

/* Cormorant italic – for the words that carry the story: bespoke, crafted… */
.flourish {
    font-family:    var(--font-cormorant);
    font-style:     italic;
    font-weight:    500;
    letter-spacing: 0;
    text-transform: none;
    color:          var(--color-moss);

    .on-dark & {
        color: var(--color-ochre);
    }
}

.text-intro {
    font: var(--text-20mr);
}

.text-small {
    font:  var(--text-14mr);
    color: var(--color-stone);
}

/* Light text on the dark sections */
.on-dark {
    color: var(--color-paper-70);

    h1, h2, h3, h4 {
        color: var(--color-paper);
    }

    a:not(.button) {
        color: var(--color-sage);

        &:hover {
            color: var(--color-paper);
        }
    }
}