/* Boise porch: trim, door, enamel plaques, clapboard, brass figures. */

@font-face {
    font-family: "Literata";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/literata-latin-f7659a86.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: "Literata";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/literata-latin-ext-698a507a.woff2") format("woff2");
    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: "Literata";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/literata-latin-italic-14b52dde.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: "Literata";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/literata-latin-ext-italic-07d61b9f.woff2") format("woff2");
    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;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-padding-top: 108px;
}

body {
    /* Column that fills the viewport, so the footer sits at the bottom of a
       short page (the 404) instead of leaving a band of background below it. */
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--trim-white);
    color: var(--umber-ink);
    font-family: var(--serif);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.65;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--umber-ink);
    accent-color: var(--door-juniper);
}

body > main {
    flex: 1 0 auto;
}

.utility-bar,
.site-footer,
.cta-band,
.front-door,
.home-cta,
.door-panel,
.plaque,
.city-numbers {
    -webkit-font-smoothing: auto;
}

::selection {
    background: rgba(var(--lamp), 0.35);
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
}

a {
    color: var(--door-juniper);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

a:hover {
    color: var(--door-deep);
    text-decoration-thickness: 2px;
}

/* A phone number never breaks across lines. */
a[href^="tel:"] {
    white-space: nowrap;
}

h1,
h2,
h3,
h4 {
    font-weight: 500;
    line-height: 1.12;
    color: var(--umber-ink);
    text-wrap: balance;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 60, "wght" 500;
}

h1 {
    font-size: var(--type-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 72, "wght" 500;
}

h2 {
    font-size: var(--type-headline);
}

h3 {
    font-size: var(--type-title);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 36, "wght" 500;
}

p {
    text-wrap: pretty;
}

ul,
ol {
    padding-left: 1.25rem;
}

:focus-visible {
    outline: 2px solid var(--umber-ink);
    outline-offset: 3px;
}

/* <main> takes focus only as a landing spot after the recall bar closes
   (report_recall_controller), so it draws no ring around the whole page. */
#main:focus {
    outline: none;
}

@media (max-width: 600px) {
    body {
        font-size: 1rem;
    }

    h1 {
        font-size: 2.125rem;
    }

    h2 {
        font-size: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Every transition on the site, rather than a list that drifts out of date:
       the section tabs and the map paths were each missed by the old enumeration. */
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}