/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables */
:root {
    --color-bg: #f8f5ef;
    --color-text: #4b4848;
    --color-text-light: #6b6767;
    --color-accent: #c0392b;
    --color-border: #d4cfc5;
    --color-input-bg: #faf8f4;
    --color-special-bg: #fbf1ee;
    --color-veg: #4f7a3f;
    --color-veg-bg: #eef3ea;
    --color-veg-border: #cbdcc2;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    padding-top: 220px;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

a {
    color: var(--color-text);
    text-decoration: underline;

    &:hover {
        text-decoration: none;
    }
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    z-index: 1000;
    padding: 8px 0;
    transition: padding 0.3s ease;

    &.scrolled {
        padding: 6px 0;
        border-bottom: 3px solid var(--color-text);

        .logo-circle {
            height: 100px;
        }
    }

    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.logo-circle {
    height: 240px;
    width: auto;
    transition: height 0.3s ease;
}

.main-nav {
    ul {
        list-style: none;
        display: flex;
        gap: 24px;
    }

    a {
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.02em;
        text-transform: uppercase;

        &:hover {
            text-decoration: underline;
        }
    }
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;

    span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-text);
        transition: all 0.3s ease;
    }
}

/* Hero */
.hero {
    padding: 80px 0 0;
    text-align: center;

    h1 {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 2.2rem;
        line-height: 1.3;
        color: var(--color-text);
    }
}

.hero-sub {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--color-text-light);
    margin-top: 12px;
}

.hero-image {
    display: block;
    margin: 40px auto 0;

    img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
}

/* Section interstitial — small decorative mark between sections */
.section-interstitial {
    text-align: center;
    color: var(--color-text-light);
    line-height: 0;
    margin: -44px 0;

    img {
        height: 36px;
        width: auto;
        transform: rotate(270deg);
    }
}

/* Section break images */
.section-image {
    display: block;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;

    img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
}

/* About */
.about {
    padding: 64px 0;

    .section-image + & {
        padding-top: 32px;
    }

    &:has(+ .section-image) {
        padding-bottom: 32px;
    }

    h2 {
        font-family: var(--font-heading);
        font-weight: 900;
        font-size: 1.8rem;
        margin-bottom: 24px;
    }

    h3 {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1.3rem;
        margin-top: 32px;
        margin-bottom: 12px;
    }

    h3,
    h3 + p,
    h3 ~ p {
        padding-left: 20px;
    }

    p {
        margin-bottom: 16px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.event-list {
    margin: 0 0 16px 24px;
    padding: 0;
}

.event-list li {
    margin-bottom: 10px;
}

.event-list li:last-child {
    margin-bottom: 0;
}

.steps-list {
    padding-left: 4px;
}

.menu-list strong {
    font-weight: 600;
}

.event-menu-grid {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.event-menu-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 22px;
    background: var(--color-input-bg);
}

.event-menu-card h3 {
    padding-left: 0;
    margin-top: 0;
}

.event-menu-card p,
.event-menu-card .event-list {
    padding-left: 0;
}

.event-menu-card p {
    color: var(--color-text-light);
}

.trust-grid {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.trust-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 18px;
    background: var(--color-input-bg);
}

.trust-card h3,
.trust-card p {
    padding-left: 0;
}

.trust-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.trust-card p {
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.55;
}

.box-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.box-quick-links a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.box-quick-links a:hover {
    border-color: var(--color-text);
}

.box-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.box-flavour-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 18px;
    background: var(--color-input-bg);
}

.box-flavour-card h3,
.box-flavour-card p {
    padding-left: 0;
}

.box-flavour-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.box-flavour-card p {
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.55;
}

.box-note {
    margin-top: 20px;
    padding: 14px 16px;
    border-left: 3px solid var(--color-text);
    background: var(--color-input-bg);
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.55;
}

/* Contact */
.contact {
    padding: 64px 0;
    border-top: 1px solid var(--color-border);

    h2 {
        font-family: var(--font-heading);
        font-weight: 900;
        font-size: 1.8rem;
        margin-bottom: 16px;
    }

    > .container > p {
        margin-bottom: 32px;
    }
}

.contact-form {
    max-width: 480px;
}

.contact-alt {
    margin-top: 32px;
    font-size: 16px;
    color: var(--color-text-light);
}

/* Form elements */
.form-group {
    margin-bottom: 20px;

    label {
        display: block;
        font-weight: 600;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 6px;
        color: var(--color-text-light);
    }

    input,
    textarea {
        width: 100%;
        padding: 12px 14px;
        font-family: var(--font-body);
        font-size: 16px;
        color: var(--color-text);
        background: var(--color-input-bg);
        border: 1px solid var(--color-border);
        border-radius: 4px;

        &:focus {
            outline: none;
            border-color: var(--color-text);
        }
    }

    textarea {
        resize: vertical;
        min-height: 120px;
    }
}

.field-note {
    font-size: 14px;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* Fieldset reset */
fieldset.form-group {
    border: none;
    padding: 0;

    legend {
        display: block;
        font-weight: 600;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 10px;
        color: var(--color-text-light);
    }
}

/* Radio group */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    cursor: pointer;

    input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-text);
    }
}

/* Checkbox group */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    cursor: pointer;

    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-text);
    }
}

.other-text {
    width: 100%;
    display: none;
    margin-top: 4px;

    &.visible {
        display: block;
    }

    input {
        width: 100%;
        padding: 10px 14px;
        font-family: var(--font-body);
        font-size: 16px;
        color: var(--color-text);
        background: var(--color-input-bg);
        border: 1px solid var(--color-border);
        border-radius: 4px;

        &:focus {
            outline: none;
            border-color: var(--color-text);
        }
    }
}

/* Star rating */
.star-rating {
    display: flex;
    gap: 4px;
}

.star {
    background: none;
    border: none;
    font-size: 32px;
    color: var(--color-border);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s ease;

    &:hover,
    &.active {
        color: var(--color-text);
    }
}

/* Honeypot */
.ohnohoney {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
    overflow: hidden;
}

/* Button */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 32px;
    color: var(--color-bg);
    background: var(--color-text);
    border: 2px solid var(--color-text);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;

    &:hover {
        color: var(--color-text);
        background: transparent;
    }
}

.cta-row {
    text-align: center;
}

/* Simple pages (thanks, 404) */
.simple-page {
    padding: 120px 0 80px;
    text-align: center;

    h1 {
        font-family: var(--font-heading);
        font-weight: 900;
        font-size: 2rem;
        margin-bottom: 16px;
    }

    p {
        margin-bottom: 12px;
    }
}

/* Footer */
.site-footer {
    padding: 48px 0 32px;
    border-top: 1px solid var(--color-border);
    text-align: center;

    p {
        font-size: 14px;
        color: var(--color-text-light);
    }
}

/* Statutory company disclosure. Present on every page as the rules require,
   but sized to sit below the credit line rather than compete with it. */
.footer-legal {
    font-size: 13px;
    margin-top: 6px;
    opacity: 0.85;
}

/* Events */

/* The homepage upcoming block sits directly under the hero, ahead of any
   explanation of the business, so it needs to read as a distinct panel rather
   than the first of several prose sections. Border and tint match the other
   cards on the site rather than introducing a new treatment. */
.upcoming-panel {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-input-bg);
    padding: 28px;

    h2 {
        margin-bottom: 18px;
    }

    p:last-child {
        margin-bottom: 0;
    }
}

.upcoming-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;

    li {
        border-left: 3px solid var(--color-accent);
        padding: 4px 0 4px 18px;
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    p {
        margin-bottom: 2px;
        padding-left: 0;
    }
}

.upcoming-date,
.event-card-date {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.upcoming-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
}

.upcoming-where,
.event-card-where {
    color: var(--color-text-light);
}

.event-cards {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event-card {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 8px;
    background: var(--color-input-bg);
    padding: 26px;
    margin-bottom: 24px;

    &:last-child {
        margin-bottom: 0;
    }

    h2 {
        font-size: 1.5rem;
        margin: 6px 0 8px;
    }

    p {
        padding-left: 0;
    }
}

.event-card-time {
    color: var(--color-text-light);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Event page */
.event-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.event-facts {
    display: grid;
    gap: 16px;
    max-width: 640px;
    margin: 32px auto 24px;
    text-align: left;

    dt {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-text-light);
        margin-bottom: 2px;
    }

    dd {
        margin: 0;
    }
}

.event-calendar-link {
    font-size: 0.95rem;
}

.event-offer {
    border: 1px dashed var(--color-accent);
    border-radius: 8px;
    background: var(--color-input-bg);
    padding: 22px;
    margin-top: 28px;

    h3 {
        margin-top: 0;
        padding-left: 0;
    }

    p {
        padding-left: 0;
        margin-bottom: 0;
    }
}

.event-pizzas {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
}

.event-pizza {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-input-bg);
    overflow: hidden;
}

.event-pizza-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* The special. Borrows the accent border and eyebrow label already used on the
   event hero, so it reads as the same design language turned up rather than a
   new device bolted on. */
.event-pizza-special {
    border-color: var(--color-accent);
    box-shadow: 0 2px 16px rgba(192, 57, 43, 0.12);
    background: linear-gradient(var(--color-special-bg), var(--color-input-bg) 120px);
}

.event-pizza-flag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.about .event-pizza-special .event-pizza-flag {
    margin-bottom: 6px;
}

.event-pizza-body {
    padding: 22px;

    h3 {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 0;
        padding-left: 0;
    }

    p {
        padding-left: 0;
    }
}

.event-pizza-price {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
}

/* `.about h3 ~ p` indents paragraphs 20px to sit under a heading, which is right
   for prose sections and wrong inside a card, where it pushes the body text out
   of line with the heading above it. These selectors are deliberately compound
   to outweigh it — a bare `.event-pizza-body p` loses on specificity. */
.event-pizza .event-pizza-body p,
.about .event-offer p,
.about .event-addons p {
    padding-left: 0;
}

/* Dietary marker. Quiet enough not to compete with the pizza name, distinct
   enough to pick out when scanning a menu for something you can eat. Sits on
   its own line so the price column stays aligned whatever the pizza is called. */
.event-pizza-diet {
    margin: -4px 0 12px;
    padding-left: 0;
}

.diet-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-veg);
    background: var(--color-veg-bg);
    border: 1px solid var(--color-veg-border);
    border-radius: 999px;
    padding: 2px 9px 2px 7px;
}

.diet-leaf {
    flex: none;
}

.event-pizza-ingredients {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}

/* The add-on prompt on a pizza card. Accent-coloured so it reads as a
   suggestion rather than as more of the description, and quiet enough not to
   compete with the pizza name above it. It belongs to the event rather than the
   pizza, so it arrives as an include parameter, not a fragment field. */
.event-pizza-pairing {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 12px;
}

/* Add-ons get their own bordered block rather than more menu cards. The evidence
   for prompting a side (docs/menu-design.md) turns on it being visibly separate
   from the pizza choice, not on it sitting in the same list. Quieter than
   .event-offer, which is the one thing on the page allowed the accent border. */
.event-addons {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-input-bg);
    padding: 22px;

    h3 {
        margin-top: 0;
        padding-left: 0;
    }

    ul {
        list-style: none;
        margin: 0 0 14px;
        padding: 0;
    }

    li {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: baseline;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid var(--color-border);
    }

    li:last-child {
        border-bottom: 0;
    }
}

.event-addon-name {
    font-weight: 600;
}

.event-addon-note {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}

/* Where there's room, photographed pizzas run image-beside-text so a six item
   menu doesn't turn into six screens of scrolling. Cards without a photo stay
   as plain blocks. */
@media (min-width: 620px) {
    .event-pizza:has(.event-pizza-image) {
        display: grid;
        grid-template-columns: 240px 1fr;
    }

    .event-pizza-image img {
        height: 100%;
        object-fit: cover;
    }
}

/* Venue */
.event-venue p {
    padding-left: 0;
}

.event-venue-address strong {
    font-weight: 600;
}

.event-venue-map {
    margin: 24px 0;

    img {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid var(--color-border);
        border-radius: 8px;
    }

    figcaption {
        font-size: 0.8rem;
        color: var(--color-text-light);
        margin-top: 6px;
    }
}

/* Media pack (per-event promo assets) */

/* Page rhythm, scoped to the pack page so the rest of the site is untouched.
   Sections here stack several containers — heading, assets, caption — and
   without this they run together with no separation between the parts. */
.media-page {
    .about .container + .container {
        margin-top: 34px;
    }

    /* The site indents h3s under their heading, which is right for prose but
       wrong here: these are subsection headings and should align with the h2. */
    .about h3 {
        padding-left: 0;
        margin-top: 0;
    }

    .about h3 ~ p,
    .about h3 + p {
        padding-left: 0;
    }
}

/* Print is a different medium, not simply the next item in the list, so it gets
   a band of its own rather than another divider. */
.about--print {
    background: var(--color-input-bg);
    border-top: 1px solid var(--color-border);
    margin-top: 24px;
}

/* Format tabs. Radio inputs drive them so they work without JavaScript: the
   inputs sit before the panels, and each checked input reveals its sibling. */
.media-tabs {
    input { position: absolute; opacity: 0; pointer-events: none; }

    label {
        display: inline-block;
        padding: 8px 18px;
        margin: 0 4px 0 0;
        border: 1px solid var(--color-border);
        border-radius: 8px 8px 0 0;
        border-bottom-color: transparent;
        background: transparent;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-text-light);
        cursor: pointer;
    }

    input:checked + label {
        background: var(--color-input-bg);
        color: var(--color-accent);
        border-color: var(--color-border);
        border-bottom-color: var(--color-input-bg);
    }

    /* Keyboard focus has to be visible, since the input itself is hidden. */
    input:focus-visible + label {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }
}

.media-panel {
    display: none;
    border: 1px solid var(--color-border);
    border-radius: 0 8px 8px 8px;
    background: var(--color-input-bg);
    padding: 22px;
    margin-top: -1px;
}

/* The rule that reveals the checked format's panel is generated per page from
   the same list the tabs come from, so a new format cannot end up with a tab and
   no panel. See media-src/index.html.erb. */

.media-format-note {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

.media-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
}

.media-item {
    margin: 0;

    img {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid var(--color-border);
        border-radius: 8px;
    }

    figcaption {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        justify-content: space-between;
        align-items: baseline;
        font-size: 0.9rem;
        color: var(--color-text-light);
        margin-top: 8px;
    }
}

/* Service stamps: image and its caption side by side, so the words you'd paste
   sit next to the picture they belong to rather than in a separate list. */
.service-item {
    display: grid;
    gap: 18px;
    align-items: start;
    margin-bottom: 32px;

    &:last-child { margin-bottom: 0; }

    .media-caption { margin: 0; }
}

.service-image {
    margin: 0;

    img {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid var(--color-border);
        border-radius: 8px;
    }

    figcaption {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        justify-content: space-between;
        align-items: baseline;
        font-size: 0.9rem;
        color: var(--color-text-light);
        margin-top: 8px;
    }
}

@media (min-width: 620px) {
    .service-item {
        grid-template-columns: 260px 1fr;
    }
}

/* Two download links side by side. Separated by space rather than a middot,
   which would be indistinguishable from the ones inside each link. */
.service-downloads {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

/* Pre-wrap so the caption keeps its paragraph breaks when pasted straight into
   a post, rather than collapsing into one block. */
.media-caption {
    white-space: pre-wrap;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 8px;
    background: var(--color-input-bg);
    padding: 20px 22px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Inside a tab panel the panel already supplies the box, so the caption keeps
   only its accent edge rather than drawing a second border within the first. */
.media-panel .media-caption {
    border: 0;
    border-left: 4px solid var(--color-accent);
    border-radius: 0;
    background: none;
    padding: 2px 0 2px 16px;
}

@media (min-width: 620px) {
    .media-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Responsive */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        padding-top: 140px;
    }

    .logo-circle {
        height: 120px;
    }

    .site-header.scrolled .logo-circle {
        height: 60px;
    }

    .mobile-menu-toggle {
        display: flex;
        z-index: 200;

        &.active {
            span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            span:nth-child(2) {
                opacity: 0;
            }

            span:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }
        }
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 240px;
        height: 100vh;
        background: var(--color-bg);
        padding: 100px 40px 40px;
        transition: right 0.3s ease;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        z-index: 100;

        &.active {
            right: 0;
        }

        ul {
            flex-direction: column;
            gap: 24px;
        }

        a {
            font-size: 18px;
        }
    }

    .hero {
        padding: 48px 0 0;

        h1 {
            font-size: 1.8rem;
        }
    }

    .about,
    .contact {
        padding: 48px 0;
    }

    .about h2,
    .contact h2 {
        font-size: 1.5rem;
    }

    .box-menu-grid {
        grid-template-columns: 1fr;
    }

    .box-quick-links {
        align-items: stretch;
    }

    .box-quick-links a {
        flex: 1 1 160px;
        min-width: 0;
        text-align: center;
    }

    .section-interstitial {
        margin: -32px 0;

        img {
            height: 28px;
        }
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 120px;
    }

    .logo-circle {
        height: 100px;
    }

    .site-header.scrolled .logo-circle {
        height: 48px;
    }

    .hero h1 {
        font-size: 1.6rem;
    }
}