/* MELLOW design system
   Warm minimalism. Brand colors are used as tokens; do not introduce extra hues. */

/* Fonts */
@font-face {
    font-family: "DM Serif Display";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/dm-serif-display-latin-400.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: "DM Serif Display";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/dm-serif-display-latin-400-italic.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: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-latin-400.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: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-latin-500.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: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-latin-600.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;
}

/* Brand tokens */
:root {
    --color-cream: #F5F0E8;
    --color-sand: #E6D7C3;
    --color-espresso: #49372D;
    --color-terracotta: #A66A45;
    --color-sage: #879078;
    --color-white: #FFFFFF;

    --color-bg: var(--color-cream);
    --color-bg-alt: var(--color-sand);
    --color-surface: var(--color-white);
    --color-text: var(--color-espresso);
    --color-text-muted: color-mix(in srgb, var(--color-espresso) 82%, var(--color-cream));
    --color-accent: var(--color-terracotta);
    /* Terracotta deepened just enough for small text and button labels to reach 4.5:1 contrast. */
    --color-accent-text: color-mix(in srgb, var(--color-terracotta) 70%, var(--color-espresso));
    --color-accent-strong: color-mix(in srgb, var(--color-terracotta) 88%, var(--color-espresso));
    --color-decorative: var(--color-sage);
    --color-line: color-mix(in srgb, var(--color-espresso) 14%, transparent);
    --color-cream-muted: color-mix(in srgb, var(--color-cream) 78%, var(--color-espresso));
    --color-cream-line: color-mix(in srgb, var(--color-cream) 16%, transparent);

    --font-display: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-body: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --text-hero: clamp(2.75rem, 1.4rem + 4.6vw, 6rem);
    --text-page: clamp(2.5rem, 1.3rem + 3.2vw, 5rem);
    --text-section: clamp(2.125rem, 1.15rem + 2.6vw, 4rem);
    --text-card: clamp(1.375rem, 1.2rem + 0.4vw, 1.75rem);
    --text-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
    --text-label: clamp(0.75rem, 0.7rem + 0.12vw, 0.8125rem);

    --leading-display: 1.05;
    --leading-body: 1.65;

    --container-max: 1320px;
    --page-padding: clamp(1.25rem, 0.6rem + 2.2vw, 2.75rem);
    --section-space: clamp(3.75rem, 1rem + 6.5vw, 8.75rem);

    --radius-card: 16px;
    --radius-panel: 24px;
    --radius-button: 14px;
    --button-height: 3.25rem;

    --shadow-card: 0 16px 36px -24px color-mix(in srgb, var(--color-espresso) 55%, transparent);

    --motion-duration: 280ms;
    --motion-duration-slow: 640ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --header-height: 5.5rem;
    --header-height-scrolled: 4.5rem;
}

/* Base */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    scrollbar-gutter: stable;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--leading-body);
    text-rendering: optimizeLegibility;
}

body.nav-open,
body.modal-open {
    overflow: hidden;
}

[hidden] {
    display: none !important;
}

/* Typography */
h1,
h2,
h3,
.heading-hero,
.heading-page,
.heading-section,
.heading-card {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: var(--leading-display);
}

.heading-hero {
    margin: 0;
    font-size: var(--text-hero);
}

.heading-page {
    margin: 0;
    font-size: var(--text-page);
}

.heading-section {
    margin: 0;
    max-width: 20ch;
    font-size: var(--text-section);
}

.heading-card {
    margin: 0;
    font-size: var(--text-card);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.heading-italic {
    font-style: italic;
}

p {
    margin: 0;
}

::selection {
    background: var(--color-sand);
    color: var(--color-espresso);
}

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

.site-footer :focus-visible,
.section-espresso :focus-visible,
.photo-panel :focus-visible {
    outline-color: var(--color-cream);
}

/* Layout */
.site-container {
    width: min(var(--container-max), calc(100% - (var(--page-padding) * 2)));
    margin-inline: auto;
}

.section {
    padding-block: var(--section-space);
}

.section-sand {
    --color-accent-text: color-mix(in srgb, var(--color-terracotta) 55%, var(--color-espresso));
    background: var(--color-bg-alt);
}

.section-espresso {
    background: var(--color-espresso);
    color: var(--color-cream);
}

.section-espresso :is(.heading-hero, .heading-page, .heading-section, .heading-card, .eyebrow, .text-link) {
    color: var(--color-cream);
}

/* Labels */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: var(--color-espresso);
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 1.35rem;
    height: 1px;
    flex: 0 0 auto;
    background: var(--color-terracotta);
}

/* Buttons and links */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--button-height);
    padding: 0.75rem 1.45rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--motion-duration) var(--motion-ease),
        color var(--motion-duration) var(--motion-ease),
        border-color var(--motion-duration) var(--motion-ease),
        transform 120ms var(--motion-ease);
}

.btn:active:not(:disabled, [aria-disabled="true"]) {
    transform: scale(0.97);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.btn-primary {
    background: var(--color-accent-strong);
    color: var(--color-white);
}

.btn-primary:hover {
    background: color-mix(in srgb, var(--color-terracotta) 72%, var(--color-espresso));
    color: var(--color-white);
}

.btn-secondary {
    background: transparent;
    border-color: color-mix(in srgb, var(--color-espresso) 28%, transparent);
    color: var(--color-espresso);
}

.btn-secondary:hover {
    background: var(--color-sand);
    border-color: var(--color-espresso);
    color: var(--color-espresso);
}

.section-espresso .btn-secondary,
.btn-secondary.on-dark {
    border-color: color-mix(in srgb, var(--color-cream) 48%, transparent);
    color: var(--color-cream);
}

.section-espresso .btn-secondary:hover,
.btn-secondary.on-dark:hover {
    background: var(--color-cream);
    border-color: var(--color-cream);
    color: var(--color-espresso);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-espresso);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}

.text-link-label {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size var(--motion-duration) var(--motion-ease);
}

.text-link-arrow {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    transition: transform var(--motion-duration) var(--motion-ease);
}

.text-link:hover .text-link-label,
.text-link:focus-visible .text-link-label {
    background-size: 100% 1px;
}

.text-link:hover .text-link-arrow,
.text-link:focus-visible .text-link-arrow {
    transform: translateX(5px);
}

/* Compact links keep their look but get a touch area at least 44px tall. */
.text-link,
.logo,
.event-card-more,
.article-back,
.article-category {
    position: relative;
}

.text-link::after,
.logo::after,
.event-card-more::after,
.article-back::after,
.article-category::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: max(100%, 44px);
    transform: translateY(-50%);
}

/* Cards */
.article-card,
.event-card,
.contact-card {
    align-self: start;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-espresso);
    transition:
        transform var(--motion-duration) var(--motion-ease),
        box-shadow var(--motion-duration) var(--motion-ease);
}

.article-card:hover,
.event-card:hover,
.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.article-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.media-zoom {
    overflow: hidden;
    border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
    aspect-ratio: 4 / 3;
    background: var(--color-sand);
}

.article-card .media-zoom {
    aspect-ratio: 16 / 10;
}

.media-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform var(--motion-duration-slow) var(--motion-ease);
}

.article-card:hover .media-zoom img,
.article-card:focus-within .media-zoom img {
    transform: scale(1.045);
}

.article-card-body {
    display: grid;
    gap: 0.55rem;
    padding: 1.15rem 1.25rem 1.3rem;
}

.article-card-excerpt {
    color: var(--color-text-muted);
    font-size: var(--text-body);
}

/* Photo panel: a full-bleed photo under an espresso overlay, with copy on top */
.photo-panel {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-panel);
    background: var(--color-espresso);
    color: var(--color-cream);
}

.photo-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--photo-panel-overlay);
}

.photo-panel-copy {
    position: relative;
    z-index: 1;
}

.photo-panel .eyebrow {
    color: var(--color-cream);
}

/* Page shell */
.skip-link {
    position: absolute;
    left: var(--page-padding);
    top: 0.75rem;
    z-index: 80;
    transform: translateY(-160%);
    padding: 0.7rem 1rem;
    border-radius: var(--radius-button);
    background: var(--color-espresso);
    color: var(--color-cream);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    transform: none;
}

.site-main {
    flex: 1 0 auto;
}

.site-main:focus {
    outline: none;
}

/* Header and navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-cream);
}

.site-header.is-scrolled {
    --header-height: var(--header-height-scrolled);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-espresso) 12%, transparent);
}

.site-header-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    height: var(--header-height);
    background: var(--color-cream);
    transition: height var(--motion-duration) var(--motion-ease);
}

.logo,
.footer-wordmark {
    color: inherit;
    text-decoration: none;
}

.logo {
    display: inline-flex;
    align-items: baseline;
    color: var(--color-espresso);
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1;
    transition: font-size var(--motion-duration) var(--motion-ease);
}

.site-header.is-scrolled .logo {
    font-size: 1.45rem;
}

.logo-word {
    letter-spacing: 0.045em;
}

.logo-dot {
    display: inline-block;
    color: var(--color-terracotta);
    transition: transform var(--motion-duration) var(--motion-ease);
}

.logo:hover .logo-dot,
.footer-wordmark:hover .logo-dot {
    transform: translateY(-0.08em);
}

.desktop-nav,
.nav-toggle {
    display: none;
}

.desktop-nav {
    align-items: center;
    gap: 1.5rem;
}

.desktop-nav ul,
.mobile-nav-list,
.footer-links,
.social-list,
.noscript-nav ul {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link,
.mobile-link,
.footer-link,
.social-list a,
.footer-contact a {
    color: inherit;
    text-decoration: none;
}

.nav-link {
    position: relative;
    color: var(--color-espresso);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.4rem;
    left: 0;
    height: 1px;
    background: var(--color-terracotta);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-duration) var(--motion-ease);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
    transform: scaleX(1);
}

.site-header .btn {
    min-height: 3rem;
    padding: 0.65rem 1.15rem;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.75rem;
    padding: 0.35rem 0;
    border: 0;
    background: transparent;
    color: var(--color-espresso);
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.nav-toggle-icon {
    position: relative;
    width: 1.3rem;
    height: 0.85rem;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after,
.nav-toggle-icon span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition:
        transform var(--motion-duration) var(--motion-ease),
        opacity var(--motion-duration) var(--motion-ease),
        top var(--motion-duration) var(--motion-ease);
}

.nav-toggle-icon::before {
    top: 0;
}

.nav-toggle-icon span {
    top: 50%;
    transform: translateY(-50%);
}

.nav-toggle-icon::after {
    bottom: 0;
}

.site-header.is-open .nav-toggle-icon::before,
.site-header.is-open .nav-toggle-icon::after {
    top: 50%;
    bottom: auto;
}

.site-header.is-open .nav-toggle-icon::before {
    transform: translateY(-50%) rotate(40deg);
}

.site-header.is-open .nav-toggle-icon::after {
    transform: translateY(-50%) rotate(-40deg);
}

.site-header.is-open .nav-toggle-icon span {
    opacity: 0;
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height);
    background: var(--color-cream);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.6rem);
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration-slow) var(--motion-ease),
        visibility 0s linear var(--motion-duration);
}

/* Visible at once on open so the script can move focus into the menu. */
.mobile-nav.is-open {
    transition-delay: 0s;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.mobile-nav-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(var(--container-max), calc(100% - (var(--page-padding) * 2)));
    margin-inline: auto;
    padding-block: 0.5rem 2rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.mobile-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.mobile-nav-list li {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration-slow) var(--motion-ease);
}

.mobile-nav.is-open .mobile-nav-list li {
    opacity: 1;
    transform: none;
    transition-delay: calc(80ms + var(--reveal-delay, 0ms));
}

.mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-espresso);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
}

.mobile-link.is-active::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-terracotta);
}

.mobile-nav .header-cta {
    width: 100%;
}

.noscript-nav {
    padding-bottom: 1.5rem;
}

.noscript-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

/* Footer */
.site-footer {
    background: var(--color-espresso);
    color: var(--color-cream);
    padding-block: clamp(4.25rem, 8vw, 7.5rem) 1.5rem;
}

.site-footer .eyebrow {
    color: var(--color-cream);
    margin-bottom: 1.15rem;
}

.footer-brand {
    display: grid;
    gap: 1.15rem;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid var(--color-cream-line);
}

.footer-wordmark {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: clamp(3.75rem, 9vw, 7rem);
    letter-spacing: -0.04em;
    line-height: 0.82;
}

.footer-tagline {
    max-width: 28ch;
    color: var(--color-cream-muted);
    font-size: 1.05rem;
}

.social-list {
    gap: 0.75rem 1.4rem;
}

.social-list a,
.footer-link,
.footer-contact a {
    color: var(--color-cream-muted);
    font-weight: 500;
    transition: color var(--motion-duration) var(--motion-ease);
}

.social-list a:hover,
.footer-link:hover,
.footer-contact a:hover,
.footer-link.is-active,
.footer-contact a:focus-visible,
.social-list a:focus-visible {
    color: var(--color-white);
}

.footer-link.is-active {
    text-decoration: underline;
    text-decoration-color: var(--color-terracotta);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.32em;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.15fr 0.9fr;
    gap: 2.5rem 3rem;
    padding-block: 2.5rem 2.75rem;
}

.footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.footer-contact {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    color: var(--color-cream-muted);
    font-style: normal;
}

.hours {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.hours div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-cream-line);
}

.hours dt,
.hours dd {
    margin: 0;
}

.hours dt {
    color: var(--color-cream-muted);
}

.hours dd {
    color: var(--color-cream);
    font-weight: 500;
    white-space: nowrap;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-cream-line);
    color: var(--color-cream-muted);
    font-size: var(--text-label);
    letter-spacing: 0.02em;
}

@media (min-width: 980px) {
    .desktop-nav {
        display: flex;
    }

    .nav-toggle,
    .mobile-nav,
    .noscript-nav {
        display: none;
    }
}

@media (max-width: 860px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}

/*
 * Scroll reveal and shared animations.
 * Hero content uses .enter / .enter-image, which play on load from CSS alone so above-the-fold copy never flashes before the script runs.
 * Entrances fill backwards only, so once they finish the element's own hover transforms work again.
 */
.js-motion .reveal:not(.is-inview) {
    opacity: 0;
    transform: translateY(12px);
}

.js-motion .reveal-image:not(.is-inview) {
    clip-path: inset(14% 0 0 0 round var(--radius-card));
}

.js-motion .reveal-image:not(.is-inview) img {
    transform: scale(1.06);
}

.js-motion .reveal.is-inview,
.enter {
    animation: fade-up var(--motion-duration-slow) var(--motion-ease) var(--reveal-delay, 0ms) backwards;
}

.js-motion .reveal-image.is-inview,
.enter-image {
    animation: image-reveal 1s var(--motion-ease) var(--reveal-delay, 0ms) backwards;
}

.js-motion .reveal-image.is-inview img,
.enter-image img {
    animation: image-settle 1.4s var(--motion-ease) var(--reveal-delay, 0ms) backwards;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes image-reveal {
    from {
        clip-path: inset(14% 0 0 0 round var(--radius-card));
    }

    to {
        clip-path: inset(-3rem round var(--radius-card));
    }
}

@keyframes image-settle {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}

@keyframes float-soft {
    50% {
        transform: translateY(-6px);
    }
}

@keyframes scroll-dot {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateY(2.5rem);
        opacity: 0;
    }
}

/* Homepage: hero */
.hero {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3.5rem, 8vw, 5rem);
    overflow: clip;
}

.hero-grid {
    display: grid;
    gap: clamp(2.25rem, 6vw, 3.5rem);
}

.hero-copy {
    display: grid;
    justify-items: start;
    gap: 1.4rem;
}

.hero-title {
    margin: 0;
    max-width: 12ch;
    font-size: clamp(2.6rem, 0.2rem + 6vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.hero-title-accent {
    font-style: italic;
}

.hero-lead {
    max-width: 34ch;
    color: var(--color-text-muted);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.scroll-cue {
    display: none;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.75rem;
    color: var(--color-text-muted);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

.scroll-cue-track {
    position: relative;
    width: 1px;
    height: 2.75rem;
    overflow: hidden;
    background: var(--color-line);
}

.scroll-cue-track::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-terracotta);
    animation: scroll-dot 2.2s var(--motion-ease) infinite;
}

.scroll-cue:hover {
    color: var(--color-espresso);
}

.hero-media {
    position: relative;
    padding-bottom: 1.75rem;
}

.hero-media::before {
    content: "";
    position: absolute;
    top: -1.25rem;
    right: -1.25rem;
    width: clamp(5rem, 12vw, 9rem);
    aspect-ratio: 1;
    border: 1px solid var(--color-sage);
    border-radius: 50%;
    opacity: 0.7;
}

.hero-photo-main,
.hero-photo-inset,
.intro-photo-main,
.intro-photo-inset {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-sand);
}

.hero-photo-main img,
.hero-photo-inset img,
.intro-photo-main img,
.intro-photo-inset img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-photo-main {
    height: clamp(17rem, 58vw, 32rem);
}

.hero-photo-main img {
    object-position: 50% 62%;
}

.hero-photo-inset {
    position: absolute;
    left: 1rem;
    bottom: 0;
    width: clamp(6.5rem, 24vw, 11rem);
    aspect-ratio: 1;
    border: 6px solid var(--color-cream);
    box-shadow: var(--shadow-card);
}

.hero-float {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    background: var(--color-cream);
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--color-espresso) 70%, transparent);
    color: var(--color-espresso);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    text-wrap: balance;
    animation: float-soft 6s ease-in-out infinite;
}

.hero-float-mark {
    color: var(--color-terracotta);
    font-size: 0.9rem;
    letter-spacing: 0;
}

/* Homepage: brand introduction */
.intro-grid {
    display: grid;
    gap: clamp(3rem, 8vw, 4.5rem);
}

.intro-copy {
    display: grid;
    justify-items: start;
    gap: 1.35rem;
}

.intro-title {
    max-width: 12ch;
}

.intro-title-accent {
    position: relative;
    display: inline-block;
    font-style: italic;
}

.intro-underline {
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 100%;
    height: 0.28em;
    color: var(--color-terracotta);
}

.intro-lead {
    max-width: 30ch;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
    line-height: 1.3;
}

.intro-body {
    max-width: 46ch;
    color: var(--color-text-muted);
}

.intro-moments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.75rem;
    width: 100%;
    max-width: 30rem;
    margin: 0.5rem 0 0.75rem;
    padding: 0;
    list-style: none;
}

.intro-moments li {
    display: grid;
    gap: 0.2rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-line);
}

.intro-moment-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.2;
}

.intro-moment-text {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.intro-media {
    position: relative;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}

.intro-media::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    left: -1.5rem;
    width: clamp(7rem, 22vw, 12rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-sage) 22%, var(--color-cream));
}

.intro-photo-main {
    aspect-ratio: 4 / 3;
}

.intro-photo-inset {
    position: absolute;
    right: 0.75rem;
    bottom: 0;
    width: clamp(7.5rem, 30vw, 14rem);
    aspect-ratio: 9 / 11;
    border: 6px solid var(--color-cream);
    box-shadow: var(--shadow-card);
}

.intro-note {
    position: absolute;
    top: 0;
    left: 0.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0;
    color: var(--color-terracotta);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    font-style: italic;
    line-height: 1;
    transform: rotate(-4deg);
    transform-origin: left center;
}

.intro-note svg {
    width: 2.6rem;
    height: 1.75rem;
    margin-top: 0.45rem;
}

/* Homepage: transition into the next section */
.brew-transition {
    padding-block: clamp(1rem, 3vw, 2rem) clamp(3.75rem, 8vw, 6.5rem);
}

.brew-transition-inner {
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
}

.brew-transition-line {
    width: 1px;
    height: clamp(3rem, 8vw, 5.5rem);
    background: linear-gradient(to bottom, transparent, var(--color-line));
}

.brew-transition-bean {
    width: 1.75rem;
    height: 2.45rem;
    color: var(--color-sage);
    transform: rotate(18deg);
}

.brew-transition .eyebrow::after {
    content: "";
    width: 1.35rem;
    height: 1px;
    flex: 0 0 auto;
    background: var(--color-terracotta);
}

.brew-transition-text {
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
    line-height: 1.15;
}

@media (min-width: 640px) {
    .hero-photo-inset {
        left: 1.5rem;
    }

    .hero-float {
        top: 1.5rem;
        left: 1.5rem;
        padding-inline: 1rem;
        letter-spacing: 0.14em;
    }
}

@media (min-width: 1024px) {
    .hero {
        display: flex;
        align-items: center;
        min-height: calc(88vh - var(--header-height));
        min-height: calc(88svh - var(--header-height));
        padding-block: 1.5rem 3rem;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: center;
        gap: clamp(3rem, 5vw, 6rem);
    }

    .hero-copy {
        gap: 1.6rem;
    }

    .scroll-cue {
        display: inline-flex;
    }

    .hero-media {
        justify-self: end;
        width: min(100%, 35rem);
        padding-bottom: 0;
    }

    .hero-media::before {
        top: -2.25rem;
        right: -2.25rem;
    }

    .hero-photo-main {
        height: clamp(28rem, 72vh, 44rem);
    }

    .hero-photo-inset {
        left: clamp(-7rem, -8vw, -3.5rem);
        bottom: clamp(-3rem, -4vh, -1.5rem);
        width: clamp(10rem, 15vw, 14rem);
        border-width: 8px;
    }

    .hero-float {
        top: 2.5rem;
        left: clamp(-4.5rem, -5vw, -2.5rem);
    }

    .intro-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: center;
        gap: clamp(4rem, 7vw, 7.5rem);
    }

    .intro-media {
        grid-column: 1;
        grid-row: 1;
        padding-right: 3rem;
    }

    .intro-copy {
        grid-column: 2;
    }

    .intro-photo-main {
        aspect-ratio: 5 / 4;
    }

    .intro-photo-inset {
        right: 0;
        bottom: 0;
        width: clamp(11rem, 16vw, 15rem);
        border-width: 8px;
    }

    .intro-media::before {
        left: -3rem;
    }
}

/* Homepage: signature coffee collection */
.signature-header {
    display: grid;
    gap: 1.25rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.signature-heading {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
}

.signature-intro {
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.coffee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 0.9rem;
}

.coffee-card-link {
    display: grid;
    gap: 0.9rem;
    color: inherit;
    text-decoration: none;
}

.coffee-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-card);
    background: var(--color-cream);
}

.coffee-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-duration-slow) var(--motion-ease);
}

.coffee-card-number {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: var(--color-cream);
    color: var(--color-espresso);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.1;
}

.coffee-card-body {
    display: grid;
    gap: 0.4rem;
}

.coffee-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.coffee-card-category {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.coffee-card-category::before {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-terracotta);
}

.coffee-card-price {
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

.coffee-card-title {
    margin: 0;
    font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.coffee-card-text {
    max-width: 34ch;
    color: var(--color-text-muted);
    font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
    line-height: 1.5;
}

.coffee-card-more {
    display: none;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.coffee-card-link:hover .coffee-card-media img,
.coffee-card-link:focus-visible .coffee-card-media img {
    transform: scale(1.05);
}

.coffee-card-link:hover .text-link-arrow,
.coffee-card-link:focus-visible .text-link-arrow {
    transform: translateX(5px);
}

.coffee-card-link:focus-visible {
    outline-offset: 6px;
    border-radius: var(--radius-card);
}

.signature-footer {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    margin-top: clamp(3rem, 7vw, 5rem);
    text-align: center;
}

.signature-note {
    color: var(--color-text-muted);
    font-size: var(--text-label);
    letter-spacing: 0.04em;
}

@media (min-width: 640px) {
    .coffee-grid {
        gap: 3rem 1.5rem;
    }

    .coffee-grid > :nth-child(even) {
        margin-top: 3rem;
    }

    .coffee-card-number {
        top: 0.9rem;
        left: 0.9rem;
        padding: 0.35rem 0.7rem;
        font-size: 0.875rem;
    }

    .coffee-card-more {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .signature-header {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        align-items: end;
        gap: 3rem;
    }

    .signature-intro {
        justify-self: end;
    }

    .coffee-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4rem clamp(1.5rem, 2.5vw, 2.5rem);
    }

    .coffee-grid > :nth-child(even) {
        margin-top: 0;
    }

    .coffee-grid > :nth-child(3n + 2) {
        margin-top: 4.5rem;
    }
}

/* Homepage: coffee mood quiz */
.mood {
    position: relative;
    overflow: clip;
}

.mood-deco {
    position: absolute;
    right: -3rem;
    bottom: -2.5rem;
    width: clamp(11rem, 26vw, 20rem);
    color: var(--color-cream);
    opacity: 0.07;
    pointer-events: none;
}

.mood-grid {
    position: relative;
    display: grid;
    gap: clamp(2.25rem, 6vw, 3.5rem);
}

.mood-intro {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 1.15rem;
}

.mood-lead {
    max-width: 40ch;
    color: var(--color-cream-muted);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.mood-panel {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--color-cream-line);
    border-radius: var(--radius-panel);
    background: color-mix(in srgb, var(--color-cream) 6%, var(--color-espresso));
    container: mood-panel / inline-size;
}

.mood-noscript a {
    color: var(--color-cream);
}

.mood-progress {
    display: grid;
    gap: 0.6rem;
}

.mood-progress-label {
    color: var(--color-cream-muted);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mood-progress-track {
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-cream-line);
}

.mood-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--color-terracotta);
    transition: width var(--motion-duration-slow) var(--motion-ease);
}

.mood-form {
    display: grid;
    gap: 1.25rem;
}

.mood-step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    animation: fade-up var(--motion-duration-slow) var(--motion-ease) both;
}

.mood-question {
    margin-bottom: 1.25rem;
    padding: 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
    line-height: 1.15;
}

.mood-options {
    display: grid;
    gap: 0.75rem;
}

.mood-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.mood-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mood-option-body {
    position: relative;
    display: grid;
    gap: 0.2rem;
    min-height: 100%;
    padding: 1rem 3rem 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--color-cream) 22%, transparent);
    border-radius: var(--radius-button);
    transition:
        background-color var(--motion-duration) var(--motion-ease),
        border-color var(--motion-duration) var(--motion-ease),
        color var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease);
}

.mood-option-title {
    font-weight: 600;
    line-height: 1.3;
}

.mood-option-hint {
    color: var(--color-cream-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.mood-option-check {
    position: absolute;
    top: 50%;
    right: 1.1rem;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--color-cream) 45%, transparent);
    border-radius: 50%;
    transform: translateY(-50%);
}

.mood-option:hover .mood-option-body {
    border-color: color-mix(in srgb, var(--color-cream) 55%, transparent);
    transform: translateY(-2px);
}

.mood-option input:focus-visible + .mood-option-body {
    outline: 2px solid var(--color-cream);
    outline-offset: 3px;
}

.mood-option input:checked + .mood-option-body {
    border-color: var(--color-cream);
    background: var(--color-cream);
    color: var(--color-espresso);
}

.mood-option input:checked + .mood-option-body .mood-option-hint {
    color: var(--color-text-muted);
}

.mood-option input:checked + .mood-option-body .mood-option-check {
    border: 5px solid var(--color-terracotta);
    background: var(--color-white);
}

.mood-step.is-invalid .mood-option-body {
    border-color: color-mix(in srgb, var(--color-terracotta) 80%, var(--color-cream));
}

.mood-error {
    min-height: 1.5em;
    color: var(--color-cream);
    font-size: 0.9375rem;
    font-weight: 500;
}

.mood-error:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: var(--color-terracotta);
    vertical-align: 0.12em;
}

.mood-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.mood-controls [data-quiz-back] {
    margin-right: auto;
}

.mood-result {
    display: grid;
    gap: 1.5rem;
    animation: fade-up var(--motion-duration-slow) var(--motion-ease) both;
}

.mood-result-media {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--color-cream) 10%, var(--color-espresso));
}

.mood-result-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mood-result-body {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 0.8rem;
}

.mood-result-name {
    margin: 0;
    font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
}

.mood-result-name:focus {
    outline: none;
}

.mood-result-tags {
    color: var(--color-cream-muted);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mood-result-text {
    max-width: 42ch;
    color: var(--color-cream-muted);
}

.mood-result-status {
    padding: 0.6rem 0.85rem;
    border-left: 2px solid var(--color-terracotta);
    background: color-mix(in srgb, var(--color-cream) 7%, transparent);
    font-size: 0.9375rem;
}

.mood-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.mood-change {
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: var(--color-cream-muted);
    font: inherit;
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    cursor: pointer;
}

.mood-change:hover {
    color: var(--color-cream);
}

@container mood-panel (min-width: 420px) {
    .mood-options-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container mood-panel (min-width: 520px) {
    .mood-options:not(.mood-options-four) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container mood-panel (min-width: 560px) {
    .mood-result {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: center;
    }

    .mood-result-media {
        aspect-ratio: 4 / 5;
    }
}

@media (min-width: 1024px) {
    .mood-grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: start;
        gap: clamp(3rem, 6vw, 6rem);
    }

    .mood-intro {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
    }
}

/* Homepage: the space */
.space-header {
    display: grid;
    gap: 1.5rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.space-heading {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
}

.space-heading .heading-section {
    max-width: 14ch;
}

.space-copy {
    display: grid;
    justify-items: start;
    align-content: end;
    gap: 1.5rem;
}

.space-lead {
    max-width: 44ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.space-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.space-tags li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.space-tags li::before {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--color-sage);
}

.space-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: start;
}

.space-photo,
.community-photo,
.visit-photo,
.story-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-sand);
}

.space-photo img,
.community-photo img,
.visit-photo img,
.story-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.space-photo figcaption {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-cream) 92%, transparent);
    color: var(--color-espresso);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.space-photo-lounge {
    grid-column: 1 / -1;
    aspect-ratio: 7 / 5;
}

.space-photo-counter {
    grid-row: span 2;
    align-self: stretch;
}

.space-photo-detail {
    aspect-ratio: 1;
}

.space-photo-work {
    aspect-ratio: 4 / 3;
}

/* Homepage: what makes MELLOW different */
.difference-grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
}

.difference-intro {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 1.1rem;
}

.difference-intro .heading-section {
    max-width: 12ch;
}

.difference-lead {
    max-width: 32ch;
    color: var(--color-text-muted);
}

.difference-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}

.difference-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.4rem 1.1rem;
    padding-block: clamp(1.4rem, 3vw, 2rem);
    border-bottom: 1px solid var(--color-line);
}

.difference-number {
    color: var(--color-terracotta);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
}

.difference-icon {
    grid-row: span 3;
    order: -1;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0.55rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-cream) 70%, var(--color-sand));
    color: var(--color-espresso);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    align-self: start;
    transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}

.difference-title {
    margin: 0;
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem);
    line-height: 1.15;
}

.difference-text {
    color: var(--color-text-muted);
}

.difference-item:hover .difference-icon {
    background: var(--color-espresso);
    color: var(--color-cream);
}

/* Homepage: community */
.community-header {
    display: grid;
    justify-items: center;
    gap: 1.1rem;
    max-width: 40rem;
    margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}

.community-lead {
    max-width: 38ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.community-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.community-photo {
    aspect-ratio: 4 / 3;
}

.community-photo img {
    object-position: 40% 50%;
}

.community-quotes {
    display: grid;
    gap: 1.5rem;
}

.community-quotes-label {
    color: var(--color-text-muted);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.community-quote {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-sand);
}

.community-quote:nth-of-type(2) {
    border-left-color: var(--color-terracotta);
}

.community-quote blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem);
    line-height: 1.3;
}

.community-quote figcaption {
    font-size: 0.875rem;
    font-weight: 600;
}

.community-quote figcaption span {
    color: var(--color-text-muted);
    font-weight: 400;
}

.community-disclaimer {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

.community-social {
    margin-top: clamp(3.5rem, 8vw, 6rem);
}

.community-social-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.community-handle {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    line-height: 1;
}

.community-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.community-gallery li {
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--radius-card);
    background: var(--color-sand);
}

.community-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-duration-slow) var(--motion-ease);
}

.community-gallery li:hover img {
    transform: scale(1.06);
}

/* Homepage: journal */
.journal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.journal-header > div {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
}

.journal-grid {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.journal-card {
    align-self: stretch;
}

.journal-card .article-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.35rem 1.4rem 1.4rem;
}

.journal-card .eyebrow {
    color: var(--color-accent-text);
}

.journal-card .eyebrow::before {
    display: none;
}

.journal-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.875rem;
}

.journal-card-time {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.journal-card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    white-space: nowrap;
}

.journal-card:hover .text-link-arrow,
.journal-card:focus-within .text-link-arrow {
    transform: translateX(5px);
}

/* Homepage: visit call to action */
.visit {
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.visit-panel {
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-panel);
}

.visit-copy {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 1.25rem;
    padding: clamp(2rem, 6vw, 4.5rem);
}

.visit-copy .heading-section {
    max-width: 13ch;
}

.visit-lead {
    color: var(--color-cream-muted);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
}

.visit-copy .btn {
    margin-top: 0.5rem;
}

.visit-note {
    color: var(--color-cream-muted);
    font-size: 0.8125rem;
}

.visit-photo {
    order: -1;
    aspect-ratio: 4 / 3;
    border-radius: 0;
}

@media (min-width: 640px) {
    .community-gallery {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .community-gallery li:nth-child(even) {
        margin-top: 1.5rem;
    }

    .difference-item {
        grid-template-columns: auto auto 1fr;
    }

    .difference-icon {
        grid-row: span 2;
    }

    .difference-number {
        grid-row: span 2;
        order: -2;
        align-self: start;
        min-width: 1.75rem;
        padding-top: 0.85rem;
    }
}

@media (min-width: 640px) {
    .journal-grid .article-card-link {
        flex-direction: row;
    }

    .journal-grid .media-zoom {
        flex: 0 0 40%;
        aspect-ratio: auto;
        border-radius: calc(var(--radius-card) - 1px) 0 0 calc(var(--radius-card) - 1px);
    }
}

@media (min-width: 860px) {
    .journal-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .journal-grid > .journal-card:first-child {
        grid-row: span 2;
    }

    .journal-grid > .journal-card:first-child .article-card-link {
        flex-direction: column;
    }

    .journal-grid > .journal-card:first-child .media-zoom {
        flex: none;
        aspect-ratio: 4 / 3;
        border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
    }

    .visit-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        min-height: 32rem;
    }

    .visit-photo {
        order: 0;
        aspect-ratio: auto;
    }
}

@media (min-width: 1024px) {
    .space-header {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 4rem;
    }

    .space-gallery {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .space-photo-lounge {
        grid-column: 1 / 9;
        grid-row: 1;
    }

    .space-photo-lounge figcaption {
        left: auto;
        right: 0.75rem;
    }

    .space-photo-counter {
        grid-column: 9 / 13;
        grid-row: 1 / 3;
        margin-top: 6rem;
    }

    .space-photo-detail {
        z-index: 1;
        grid-column: 2 / 5;
        grid-row: 2;
        margin-top: -5rem;
        border: 6px solid var(--color-cream);
        box-shadow: var(--shadow-card);
    }

    .space-photo-work {
        grid-column: 5 / 9;
        grid-row: 2;
    }

    .difference-grid {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
        gap: clamp(3rem, 7vw, 7rem);
    }

    .difference-intro {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
    }

    .difference-item {
        grid-template-columns: 2.5rem auto minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 1.5rem;
    }

    .difference-number,
    .difference-icon {
        grid-row: auto;
        align-self: center;
        padding-top: 0;
    }

    .difference-icon {
        padding: 0.55rem;
    }

    .community-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .community-photo {
        aspect-ratio: 5 / 4;
    }
}

/* Page hero: copy beside a photo, shared by the Menu, Events and Visit pages */
.page-hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
}

.page-hero-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.5rem, 7vw, 4rem);
}

.page-hero-copy {
    display: grid;
    justify-items: start;
    gap: 1.2rem;
}

.page-hero-copy .heading-hero {
    max-width: 14ch;
    font-size: clamp(2.75rem, 1.8rem + 4vw, 5.25rem);
}

.page-hero-lead {
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

.page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 0.5rem;
}

.page-hero-media {
    position: relative;
}

@media (min-width: 1024px) {
    .page-hero-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
}

/* Menu page */
.menu-hero .heading-hero {
    max-width: 11ch;
}

.menu-hero-photo {
    aspect-ratio: 5 / 4;
    border-radius: var(--radius-panel);
}

.menu-list {
    padding-top: clamp(2rem, 4vw, 3rem);
}

.filter-bar {
    position: sticky;
    top: var(--header-height-scrolled);
    z-index: 20;
    margin-inline: calc(var(--page-padding) * -1);
    padding: 0.75rem var(--page-padding);
    background: color-mix(in srgb, var(--filter-bar-bg, var(--color-sand)) 94%, transparent);
    backdrop-filter: blur(8px);
}

.filter-track {
    position: relative;
    display: flex;
    gap: 0.25rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.3rem;
    overflow-x: auto;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-cream);
    scrollbar-width: none;
}

.filter-track::-webkit-scrollbar {
    display: none;
}

.filter-indicator {
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: var(--color-espresso);
}

.filter-indicator.is-ready {
    transition:
        transform 420ms var(--motion-ease),
        width 420ms var(--motion-ease);
}

.filter-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.55rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--color-espresso);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--motion-duration) var(--motion-ease);
}

.filter-btn:hover {
    color: var(--color-accent-text);
}

.filter-btn[aria-pressed="true"] {
    color: var(--color-cream);
}

.filter-btn:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: -2px;
}

.filter-count {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.6;
}

.menu-category {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.is-filtered [data-filter-group] {
    animation: fade-up var(--motion-duration-slow) var(--motion-ease) both;
}

.menu-category-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-line);
}

.menu-category-number {
    color: var(--color-terracotta);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: italic;
}

.menu-category-title {
    margin: 0;
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
    line-height: 1.05;
}

.menu-category-intro {
    grid-column: 2;
    color: var(--color-text-muted);
}

.menu-grid {
    --menu-gap-x: 0.9rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem var(--menu-gap-x);
}

/* A lone last card spans the row; its photo stays one column wide. */
.menu-grid > .menu-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.menu-grid > .menu-item:last-child:nth-child(odd) .coffee-card-link {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--menu-gap-x);
    align-items: center;
}

.menu-item {
    scroll-margin-top: calc(var(--header-height-scrolled) + 6rem);
}

.filter-empty {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    border: 1px dashed color-mix(in srgb, var(--color-espresso) 25%, transparent);
    border-radius: var(--radius-card);
    color: var(--color-text-muted);
    text-align: center;
}

.filter-empty .heading-card {
    color: var(--color-espresso);
}

.filter-empty .btn {
    margin-top: 0.5rem;
}

.menu-note {
    margin-top: clamp(3rem, 7vw, 5rem);
    color: var(--color-text-muted);
    font-size: var(--text-label);
    letter-spacing: 0.04em;
    text-align: center;
}

.menu-finder {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.menu-finder-inner {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: clamp(3rem, 7vw, 5rem) 1.5rem;
    border-radius: var(--radius-panel);
    text-align: center;
}

.menu-finder-icon {
    width: 3rem;
    height: 3rem;
    fill: none;
    stroke: var(--color-terracotta);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-finder-lead {
    margin-bottom: 0.75rem;
    color: var(--color-cream-muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
}

@media (min-width: 640px) {
    .menu-grid {
        --menu-gap-x: 1.5rem;
        row-gap: 3rem;
    }
}

@media (min-width: 900px) {
    .menu-category-header {
        grid-template-columns: auto auto 1fr;
    }

    .menu-category-intro {
        grid-column: auto;
        justify-self: end;
        text-align: right;
    }
}

@media (min-width: 1024px) {
    .menu-hero-photo {
        aspect-ratio: 4 / 5;
        max-height: 40rem;
        margin-left: auto;
    }
}

@media (min-width: 768px) {
    .menu-grid {
        --menu-gap-x: clamp(1.5rem, 2.5vw, 2.5rem);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 3.5rem;
    }

    .menu-grid > .menu-item:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .menu-grid > .menu-item:last-child:nth-child(odd) .coffee-card-link {
        grid-template-columns: none;
    }

    .menu-grid > .menu-item:last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }

    .menu-grid > .menu-item:last-child:nth-child(3n + 1) .coffee-card-link {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--menu-gap-x);
        align-items: center;
    }

    .menu-grid > .menu-item:last-child:nth-child(3n + 1) .coffee-card-body {
        grid-column: span 2;
        max-width: 26rem;
    }
}

/* Our story page */
.story-hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}

.story-hero-head {
    display: grid;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.story-hero-heading {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
}

.story-hero-title {
    max-width: 13ch;
}

.story-hero-lead {
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
}

.story-hero-photo {
    aspect-ratio: 4 / 3;
}

.story-hero-photo img {
    object-position: 70% 50%;
}

.story-hero-photo figcaption,
.story-statement-copy .eyebrow {
    font-family: var(--font-display);
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
}

.story-hero-photo figcaption {
    position: absolute;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    color: var(--color-cream);
    font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}

.story-intro-grid {
    display: grid;
    gap: clamp(3rem, 7vw, 5rem);
}

.story-intro-media {
    position: relative;
    padding-bottom: clamp(4rem, 14vw, 7rem);
}

.story-intro-steam {
    width: 72%;
    aspect-ratio: 4 / 5;
}

.story-intro-cafe {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58%;
    aspect-ratio: 4 / 3;
    border: 6px solid var(--color-cream);
    box-shadow: var(--shadow-card);
}

.story-intro-copy {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 1.25rem;
}

.story-intro-copy .heading-section {
    max-width: 16ch;
}

.story-prose {
    display: grid;
    gap: 1.15rem;
    max-width: 36rem;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    line-height: 1.75;
}

.story-dropcap::first-letter,
.article-body > p:first-child::first-letter {
    float: left;
    margin: 0.35rem 0.6rem 0 0;
    color: var(--color-terracotta);
    font-family: var(--font-display);
    font-size: 4.2rem;
    line-height: 0.8;
}

.story-quote {
    margin: 0.75rem 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-terracotta);
    color: var(--color-espresso);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
    font-style: italic;
    line-height: 1.25;
}

.philosophy-header {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
    margin-bottom: clamp(3rem, 7vw, 5rem);
}

.philosophy-list {
    display: grid;
    gap: clamp(2.5rem, 5vw, 3rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.philosophy-item {
    display: grid;
    justify-items: start;
    gap: 0.9rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--color-espresso) 22%, transparent);
}

.philosophy-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.5rem;
    fill: none;
    stroke: var(--color-terracotta);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.philosophy-number {
    color: var(--color-terracotta);
    font-family: var(--font-display);
    font-style: italic;
}

.philosophy-title {
    margin: 0;
    max-width: 11ch;
    font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem);
    line-height: 1.02;
}

.philosophy-text {
    max-width: 26ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
}

.brew-story-header {
    display: grid;
    justify-items: center;
    gap: 1.1rem;
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
    text-align: center;
}

.brew-story-header .heading-section {
    max-width: 16ch;
}

.brew-stages {
    --brew-progress: 0;
    --brew-track-x: 0.45rem;
    position: relative;
}

.brew-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--brew-track-x);
    width: 2px;
    background: var(--color-line);
}

.brew-track-fill {
    display: block;
    height: 100%;
    background: var(--color-terracotta);
    transform: scaleY(var(--brew-progress));
    transform-origin: top;
}

.brew-stage-list {
    display: grid;
    gap: clamp(3.5rem, 9vw, 7rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.brew-stage {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding-left: 2.5rem;
}

.brew-stage-dot {
    position: absolute;
    top: 0;
    left: calc(var(--brew-track-x) - 0.4rem + 1px);
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid var(--color-terracotta);
    border-radius: 50%;
    background: var(--color-cream);
    transition: background-color var(--motion-duration-slow) var(--motion-ease);
}

.brew-stage.is-inview .brew-stage-dot {
    background: var(--color-terracotta);
}

.brew-stage-photo {
    aspect-ratio: 4 / 5;
    max-height: 36rem;
}

.brew-stage-copy {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 0.9rem;
}

.brew-stage-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    color: var(--color-accent-text);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.brew-stage-label span {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    letter-spacing: 0;
}

.brew-stage-title {
    margin: 0;
    max-width: 14ch;
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
    line-height: 1.08;
}

.brew-stage-text {
    max-width: 38ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    line-height: 1.7;
}

.people-header {
    display: grid;
    gap: 1.25rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.people-header > div {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
}

.people-header .heading-section {
    max-width: 15ch;
}

.people-lead {
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.people-grid {
    display: grid;
    gap: 2.5rem 1.5rem;
}

.people-card {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.people-photo {
    aspect-ratio: 4 / 5;
}

.people-card figcaption {
    display: grid;
    gap: 0.35rem;
}

.people-role {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.9rem);
    line-height: 1.15;
}

.people-text {
    max-width: 34ch;
    color: var(--color-text-muted);
}

.people-note {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    color: var(--color-text-muted);
    font-size: var(--text-label);
    letter-spacing: 0.04em;
}

.story-statement-section {
    padding-top: clamp(3rem, 7vw, 5rem);
}

.story-statement {
    --photo-panel-overlay: linear-gradient(to top, color-mix(in srgb, var(--color-espresso) 92%, transparent) 30%, color-mix(in srgb, var(--color-espresso) 20%, transparent));
    min-height: clamp(30rem, 70vw, 40rem);
}

.story-statement > img {
    object-position: 30% 50%;
}

.story-statement-copy {
    display: grid;
    justify-items: start;
    align-content: end;
    gap: 1.25rem;
    padding: clamp(2rem, 6vw, 4.5rem);
}

.story-statement-copy .eyebrow {
    font-size: 1.2rem;
}

.story-statement-copy .eyebrow::before {
    display: none;
}

.story-statement-title {
    margin: 0 0 0.5rem;
    max-width: 12ch;
    color: var(--color-cream);
    font-size: var(--text-hero);
    line-height: 1;
}

@media (min-width: 640px) {
    .people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .people-card:first-child {
        grid-column: 1 / -1;
    }

    .people-card:first-child .people-photo {
        aspect-ratio: 16 / 10;
    }

    .philosophy-item {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2rem;
    }

    .philosophy-item > * {
        grid-column: 1;
    }

    .philosophy-item > .philosophy-text {
        grid-column: 2;
        grid-row: 3;
    }
}

@media (min-width: 900px) {
    .story-hero-photo {
        aspect-ratio: 21 / 9;
    }

    .story-intro-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }

    .brew-stages {
        --brew-track-x: 50%;
    }

    .brew-stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(4rem, 9vw, 8rem);
        padding-left: 0;
    }

    .brew-stage-dot {
        top: 50%;
        margin-top: -0.4rem;
    }

    .brew-stage-photo {
        justify-self: end;
        width: 100%;
    }

    .brew-stage:nth-child(even) .brew-stage-photo {
        order: 2;
        justify-self: start;
    }

    .brew-stage:nth-child(even) .brew-stage-copy {
        justify-items: end;
        text-align: right;
    }

    .people-header {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        align-items: end;
        gap: 3rem;
    }

    .people-lead {
        justify-self: end;
    }

    .story-statement {
        --photo-panel-overlay: linear-gradient(to left, color-mix(in srgb, var(--color-espresso) 94%, transparent) 38%, color-mix(in srgb, var(--color-espresso) 10%, transparent) 75%);
    }

    .story-statement-copy {
        justify-self: end;
        align-content: center;
        width: min(36rem, 55%);
    }
}

@media (min-width: 1024px) {
    .story-hero-head {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
        align-items: end;
        gap: 3rem;
    }

    .story-intro-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: clamp(4rem, 8vw, 7rem);
    }

    .philosophy-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 3.5rem);
    }

    .philosophy-item {
        grid-template-columns: none;
    }

    .philosophy-item > *,
    .philosophy-item > .philosophy-text {
        grid-column: auto;
        grid-row: auto;
    }

    .philosophy-item:nth-child(2) {
        margin-top: 4rem;
    }

    .philosophy-item:nth-child(3) {
        margin-top: 8rem;
    }

    .people-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .people-card:first-child {
        grid-column: auto;
    }

    .people-card:first-child .people-photo {
        aspect-ratio: 4 / 5;
    }

    .people-card:nth-child(2) {
        margin-top: 5rem;
    }

    .people-card:nth-child(3) {
        margin-top: 10rem;
    }
}

/* The space page */
.space-hero {
    padding-block: clamp(1rem, 3vw, 2rem) clamp(3.5rem, 7vw, 6rem);
}

/* On phones the copy fills most of the panel, so the whole photo needs a scrim. */
.space-hero-panel {
    --photo-panel-overlay: linear-gradient(to top, color-mix(in srgb, var(--color-espresso) 92%, transparent) 20%, color-mix(in srgb, var(--color-espresso) 60%, transparent) 70%, color-mix(in srgb, var(--color-espresso) 40%, transparent));
    min-height: min(52rem, calc(100svh - var(--header-height) - 2rem));
}

@media (min-width: 768px) {
    .space-hero-panel {
        --photo-panel-overlay: linear-gradient(to top, color-mix(in srgb, var(--color-espresso) 90%, transparent) 15%, color-mix(in srgb, var(--color-espresso) 45%, transparent) 60%, transparent);
    }
}

.space-hero-panel > img {
    object-position: 50% 40%;
}

.space-hero-copy {
    display: grid;
    justify-items: start;
    align-content: end;
    gap: 1.25rem;
    max-width: 44rem;
    padding: clamp(1.75rem, 6vw, 4.5rem);
}

.space-hero-lead {
    max-width: 38ch;
    margin-bottom: 0.5rem;
    color: var(--color-cream-muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
}

.atmos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
}

.atmos-header {
    display: grid;
    grid-column: 1 / -1;
    justify-items: start;
    gap: 1.1rem;
}

.atmos-header .heading-section {
    max-width: 14ch;
}

.atmos-lead {
    max-width: 34ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.atmos-item {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.atmos-item .story-photo {
    aspect-ratio: 4 / 5;
}

.atmos-seating,
.atmos-bar {
    grid-column: 1 / -1;
}

.atmos-seating .story-photo,
.atmos-bar .story-photo {
    aspect-ratio: 4 / 3;
}

.atmos-item figcaption {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.spot-number {
    color: var(--color-terracotta);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

.gallery-header {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.gallery-header > div {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
}

.gallery-hint,
.spots-note {
    color: var(--color-text-muted);
    font-size: var(--text-label);
    letter-spacing: 0.04em;
}

.gallery-grid {
    --gallery-gap: clamp(0.9rem, 1.6vw, 1.25rem);
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--gallery-gap);
    list-style: none;
}

.gallery-item {
    margin-bottom: var(--gallery-gap);
    break-inside: avoid;
}

.gallery-item figure {
    position: relative;
    margin: 0;
}

.gallery-link {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-espresso);
    cursor: zoom-in;
}

.gallery-link:focus-visible {
    outline: 3px solid var(--color-cream);
    outline-offset: -6px;
}

.gallery-link img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--motion-duration-slow) var(--motion-ease);
}

.gallery-link:hover img,
.gallery-link:focus-visible img {
    transform: scale(1.05);
}

.gallery-caption {
    padding-top: 0.45rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.3;
}

.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--color-espresso) 97%, black);
    color: var(--color-cream);
    overscroll-behavior: contain;
}

.lightbox[open] {
    animation: lightbox-in var(--motion-duration) var(--motion-ease);
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox-stage {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 4.5rem 1rem 6rem;
}

.lightbox-figure {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    margin: 0;
}

.lightbox-figure img {
    max-width: 100%;
    max-height: calc(100svh - 13rem);
    border-radius: var(--radius-card);
}

.lightbox-caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    width: 100%;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
}

.lightbox-count {
    color: var(--color-cream-muted);
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-style: normal;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.lightbox-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--color-cream-line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-white) 6%, transparent);
    color: var(--color-cream);
    cursor: pointer;
    transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}

.lightbox-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lightbox-btn:hover {
    background: var(--color-cream);
    color: var(--color-espresso);
}

.lightbox-btn:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 3px;
}

.lightbox-close {
    top: 1rem;
    right: 1rem;
}

.lightbox-prev,
.lightbox-next {
    bottom: 1.25rem;
}

.lightbox-prev {
    right: calc(50% + 0.5rem);
}

.lightbox-next {
    left: calc(50% + 0.5rem);
}

@keyframes lightbox-in {
    from {
        opacity: 0;
    }
}

.spots-header {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.spots-grid {
    display: grid;
    gap: 3rem;
}

.spot {
    display: grid;
    gap: 1.25rem;
}

.spot-photo {
    aspect-ratio: 4 / 5;
}

.spot-copy {
    display: grid;
    justify-items: start;
    gap: 0.4rem;
}

.spot-title {
    margin: 0;
    font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
    line-height: 1.05;
}

.spot-text {
    max-width: 26ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
}

.spots-note {
    margin-top: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 640px) {
    .atmos-grid {
        gap: 2.5rem 1.5rem;
    }

    .spot {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(1.5rem, 4vw, 2.5rem);
    }

    .gallery-caption {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 3rem 1.1rem 1rem;
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent);
        color: var(--color-cream);
        font-size: 1.15rem;
        pointer-events: none;
    }
}

@media (min-width: 900px) {
    .gallery-header {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .lightbox-stage {
        padding: 4.5rem 6.5rem;
    }

    .lightbox-figure img {
        max-height: calc(100svh - 11rem);
    }

    .lightbox-prev,
    .lightbox-next {
        top: 50%;
        bottom: auto;
        margin-top: -1.5rem;
    }

    .lightbox-prev {
        right: auto;
        left: 1.5rem;
    }

    .lightbox-next {
        right: 1.5rem;
        left: auto;
    }

    .spots-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .spot {
        grid-template-columns: none;
        align-items: start;
        gap: 1.25rem;
    }

    .spot:nth-child(2) .spot-copy {
        order: -1;
        margin-top: 2rem;
    }
}

@media (min-width: 1024px) {
    .atmos-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 3rem clamp(1rem, 2vw, 1.75rem);
    }

    .atmos-header {
        grid-column: 1 / 6;
        grid-row: 1;
        align-self: center;
    }

    .atmos-seating {
        grid-column: 6 / 13;
        grid-row: 1;
    }

    .atmos-light {
        grid-column: 1 / 5;
        grid-row: 2;
    }

    .atmos-bar {
        grid-column: 5 / 10;
        grid-row: 2;
        margin-top: 5rem;
    }

    .atmos-details {
        grid-column: 10 / 13;
        grid-row: 2;
        margin-top: 10rem;
    }

    .atmos-corner {
        grid-column: 2 / 6;
        grid-row: 3;
    }

    .atmos-social {
        grid-column: 6 / 13;
        grid-row: 3;
        align-self: end;
    }

    .atmos-social .story-photo {
        aspect-ratio: 7 / 4;
    }

    .gallery-grid {
        columns: 3;
    }
}

/* Journal listing */
.journal-hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 3.5rem);
}

.journal-hero-inner {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
}

.journal-hero .heading-hero {
    max-width: 12ch;
}

.journal-hero-lead {
    max-width: 38ch;
    color: var(--color-text-muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
}

.featured-story {
    display: grid;
    gap: 1.75rem;
}

.featured-story-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-panel);
    background: var(--color-sand);
}

.featured-story-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-duration-slow) var(--motion-ease);
}

.featured-story:hover .featured-story-media img {
    transform: scale(1.04);
}

.featured-story-copy {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 1rem;
}

.featured-story-kicker,
.article-category {
    color: var(--color-accent-text);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.featured-story-kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.featured-story-kicker span {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--color-espresso);
    color: var(--color-cream);
}

.featured-story-title {
    margin: 0;
    max-width: 16ch;
    font-size: var(--text-section);
    line-height: 1.05;
}

.featured-story-title a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    color: inherit;
    text-decoration: none;
    transition: background-size var(--motion-duration-slow) var(--motion-ease);
}

.featured-story:hover .featured-story-title a,
.featured-story-title a:focus-visible {
    background-size: 100% 1px;
}

.featured-story-excerpt {
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
}

.featured-story-meta {
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.journal-stories {
    --filter-bar-bg: var(--color-cream);
}

.journal-stories .filter-track {
    background: var(--color-white);
}

.journal-stories-header {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
    margin-bottom: 1.25rem;
}

.journal-list {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.journal-stories .journal-list {
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.journal-note {
    margin-top: clamp(3rem, 7vw, 4.5rem);
    color: var(--color-text-muted);
    font-size: var(--text-label);
    letter-spacing: 0.04em;
    text-align: center;
}

/* Journal article */
.article {
    padding-block: clamp(1.5rem, 4vw, 3rem) clamp(4rem, 9vw, 6.5rem);
}

.article-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.25rem;
    max-width: 54rem;
    text-align: center;
}

.breadcrumbs {
    max-width: 100%;
    margin-bottom: 0.75rem;
}

.breadcrumbs ol {
    display: flex;
    margin: 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    list-style: none;
}

.breadcrumbs li {
    white-space: nowrap;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-inline: 0.55rem;
    opacity: 0.5;
}

.breadcrumbs [aria-current] {
    min-width: 0;
    overflow: hidden;
    color: var(--color-espresso);
    text-overflow: ellipsis;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color var(--motion-duration) var(--motion-ease);
}

.breadcrumbs a:hover,
.article-back:hover {
    color: var(--color-accent-text);
}

.article-category {
    padding: 0.4rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-terracotta) 45%, transparent);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}

.article-category:hover {
    background: var(--color-accent-text);
    color: var(--color-cream);
}

.article-title {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.5rem);
    font-weight: 400;
    line-height: 1.04;
}

.article-lead {
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
    line-height: 1.55;
}

.article-byline {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.5rem;
    text-align: left;
}

.article-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-espresso);
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: 1.25rem;
}

.article-byline p {
    display: grid;
    gap: 0.1rem;
}

.article-author {
    font-size: 0.95rem;
    font-weight: 600;
}

.article-meta {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.article-cover {
    max-width: 75rem;
    margin: clamp(2.5rem, 6vw, 4.5rem) auto;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-panel);
    background: var(--color-sand);
}

.article-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-body {
    display: grid;
    gap: 1.4rem;
    max-width: 42rem;
    margin-inline: auto;
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    line-height: 1.8;
}

.article-body h2 {
    margin: 1.25rem 0 -0.4rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: 400;
    line-height: 1.15;
}

.article-quote {
    margin: 1.25rem 0;
    padding: 2rem 0;
    border-block: 1px solid var(--color-line);
    text-align: center;
}

.article-quote::before {
    content: "“";
    display: block;
    height: 2.25rem;
    color: var(--color-terracotta);
    font-family: var(--font-display);
    font-size: 4.5rem;
    line-height: 1;
}

.article-quote p {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    font-style: italic;
    line-height: 1.25;
}

.article-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-espresso);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--motion-duration) var(--motion-ease);
}

.article-back svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform var(--motion-duration) var(--motion-ease);
}

.article-back:hover svg {
    transform: translateX(-4px);
}

/* Not found */
.not-found-inner {
    display: grid;
    justify-items: center;
    gap: 1.1rem;
    max-width: 46rem;
    text-align: center;
}

.not-found-code {
    color: var(--color-terracotta);
    font-family: var(--font-display);
    font-size: clamp(6rem, 3.5rem + 11vw, 11rem);
    line-height: 0.9;
}

.not-found-inner .heading-page {
    max-width: 16ch;
}

.not-found-lead {
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.75rem;
    margin-top: 0.75rem;
}

.not-found-stories {
    display: grid;
    gap: 1.5rem;
    margin-top: clamp(4rem, 9vw, 6rem);
}

@media (min-width: 640px) {
    .journal-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .journal-hero-inner {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
        column-gap: 3rem;
    }

    .journal-hero-inner .eyebrow {
        grid-column: 1 / -1;
    }

    .journal-hero-lead {
        align-self: end;
    }

    .featured-story {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: clamp(2.5rem, 5vw, 4.5rem);
    }

    .journal-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .article-cover {
        aspect-ratio: 2 / 1;
    }

    .article-quote {
        margin-inline: -5rem;
        padding-inline: 2rem;
    }
}

/* Events and Visit pages */
.featured-event-card,
.community-invite-grid {
    display: grid;
    gap: clamp(2.5rem, 7vw, 4rem);
}

.featured-event-copy,
.community-invite-copy {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 1.2rem;
}

.featured-event-lead,
.community-invite-lead,
.upcoming-lead,
.visit-section-lead {
    max-width: 40ch;
    color: var(--color-text-muted);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

.featured-event-actions,
.community-invite-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 0.5rem;
}

.events-hero .page-hero-media {
    padding-bottom: 2.5rem;
}

.events-hero-main {
    width: 86%;
    margin-left: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-panel);
}

.events-hero-friends {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42%;
    aspect-ratio: 1;
    border: 6px solid var(--color-cream);
    box-shadow: var(--shadow-card);
}

.events-hero .hero-float {
    right: 1rem;
    left: auto;
}

.featured-event-photo {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-panel);
}

.event-date-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: grid;
    justify-items: center;
    min-width: 4rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-button);
    background: var(--color-cream);
    box-shadow: var(--shadow-card);
    color: var(--color-espresso);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.event-date-badge strong {
    margin-bottom: 0.25rem;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 400;
    letter-spacing: 0;
}

.featured-event-copy .heading-section {
    max-width: 14ch;
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
}

.event-category,
.event-meta dt,
.event-dialog-subtitle {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.event-category {
    color: var(--color-accent-text);
}

.event-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-espresso);
    font-size: 0.75rem;
    font-weight: 600;
}

.event-status::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-sage);
}

.event-status.is-few::before {
    background: var(--color-terracotta);
}

.event-status.is-full {
    color: var(--color-text-muted);
}

.event-status.is-full::before {
    background: var(--color-text-muted);
}

.event-meta {
    display: grid;
    gap: 0.7rem;
    width: 100%;
    margin: 0.25rem 0 0;
    padding: 1.1rem 0;
    border-block: 1px solid var(--color-line);
}

.event-meta div {
    display: grid;
    grid-template-columns: 6rem 1fr;
    align-items: baseline;
    gap: 1rem;
}

.event-meta dt {
    color: var(--color-text-muted);
}

.event-meta dd {
    margin: 0;
    font-weight: 500;
}

.event-note,
.events-note,
.visit-card-note {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.upcoming-header {
    display: grid;
    gap: 1.25rem;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.upcoming-header > div {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
}

.event-grid {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2rem);
}

.event-card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    overflow: hidden;
}

.event-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-sand);
}

.event-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-duration-slow) var(--motion-ease);
}

.event-card:hover .event-card-media img {
    transform: scale(1.045);
}

.event-card-media .event-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.event-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.4rem 1.5rem 1.5rem;
}

.event-card-when {
    font-size: 0.875rem;
    font-weight: 600;
}

.event-card-text {
    color: var(--color-text-muted);
}

.event-card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.6rem 0 0;
    border: 0;
    background: none;
    color: var(--color-espresso);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--motion-duration) var(--motion-ease);
}

.event-card-more:hover {
    color: var(--color-accent-text);
}

.event-card-more:hover .text-link-arrow,
.event-card-more:focus-visible .text-link-arrow {
    transform: translateX(5px);
}

.upcoming-events .events-note {
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
    text-align: center;
}

.community-invite-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0.75rem;
}

.community-invite-photos img {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-card);
    object-fit: cover;
}

.community-invite-photos img:nth-child(2) {
    margin-top: 3rem;
}

.community-invite-photos img:nth-child(3) {
    margin-top: 1.5rem;
}

.community-invite-copy .heading-section {
    max-width: 16ch;
}

.event-dialog {
    width: min(44rem, calc(100% - 2rem));
    max-width: none;
    max-height: calc(100svh - 2rem);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-panel);
    background: var(--color-cream);
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.5);
    color: var(--color-espresso);
}

.event-dialog[open] {
    display: flex;
    animation: dialog-in var(--motion-duration) var(--motion-ease);
}

.event-dialog::backdrop {
    background: color-mix(in srgb, var(--color-espresso) 70%, transparent);
    backdrop-filter: blur(3px);
}

.event-dialog-panel {
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.event-dialog-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--color-cream);
    box-shadow: var(--shadow-card);
    color: var(--color-espresso);
    cursor: pointer;
    transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}

.event-dialog-close svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.event-dialog-close:hover {
    background: var(--color-espresso);
    color: var(--color-cream);
}

.event-dialog-close:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 2px;
}

.event-dialog-photo {
    margin: 0;
    aspect-ratio: 16 / 9;
    background: var(--color-sand);
}

.event-dialog-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-dialog-body {
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.event-dialog-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem);
    font-weight: 400;
    line-height: 1.08;
}

.event-dialog-text {
    color: var(--color-text-muted);
    line-height: 1.7;
}

.event-dialog-subtitle {
    margin: 0.25rem 0 0;
    font-family: var(--font-body);
}

.event-dialog-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-dialog-list li {
    position: relative;
    padding-left: 1.5rem;
}

.event-dialog-list li::before {
    content: "✦";
    position: absolute;
    top: 0.1rem;
    left: 0;
    color: var(--color-terracotta);
    font-size: 0.8rem;
}

.event-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.event-register-placeholder,
.visit-placeholder-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.6rem 1.1rem;
    border: 1px dashed color-mix(in srgb, var(--color-espresso) 30%, transparent);
    border-radius: var(--radius-button);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

@keyframes dialog-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@media (min-width: 720px) {
    .event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .upcoming-header {
        grid-template-columns: 1fr auto;
        align-items: end;
    }
}

@media (min-width: 1024px) {
    .featured-event-card {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(3rem, 6vw, 5rem);
    }

    .community-invite-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: center;
    }
}

/* Visit page */
.visit-hero-photo {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-panel);
}

.visit-hero .hero-float {
    top: auto;
    bottom: 1.25rem;
}

.visit-section-header {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.visit-info-grid {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.visit-card {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.visit-card-title,
.visit-map-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    font-weight: 400;
    line-height: 1.1;
}

.visit-details,
.visit-hours-list {
    display: grid;
    margin: 0;
}

.visit-details div {
    display: grid;
    gap: 0.4rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-line);
}

.visit-details div:first-child {
    padding-top: 0;
    border-top: 0;
}

.visit-details dt,
.contact-card-label {
    color: var(--color-text-muted);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.visit-details dt {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.visit-details dd {
    margin: 0;
    font-weight: 500;
}

.visit-details address {
    font-style: normal;
}

.visit-details a {
    color: var(--color-espresso);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-terracotta) 55%, transparent);
    text-underline-offset: 0.2em;
    transition: color var(--motion-duration) var(--motion-ease);
}

.visit-details a:hover {
    color: var(--color-accent-text);
}

.visit-icon {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.visit-details dt .visit-icon,
.visit-placeholder-pill .visit-icon {
    color: var(--color-terracotta);
}

.visit-hours {
    background: var(--color-espresso);
    color: var(--color-cream);
}

.visit-hours-list div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding: 1.1rem 0;
    border-bottom: 1px dashed var(--color-cream-line);
}

.visit-hours-list dt {
    color: var(--color-cream-muted);
    font-weight: 500;
    white-space: nowrap;
}

.visit-hours-list dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
    white-space: nowrap;
}

.visit-hours .visit-card-note {
    color: var(--color-cream-muted);
}

.visit-map-frame {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-panel);
    background: var(--color-sand);
}

.visit-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.visit-map-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.85rem;
    padding: 2rem;
    background-image:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-cream) 90%, transparent) 0 8rem, transparent 15rem),
        linear-gradient(28deg, transparent calc(22% - 7px), color-mix(in srgb, var(--color-white) 70%, transparent) calc(22% - 7px) calc(22% + 7px), transparent calc(22% + 7px)),
        repeating-linear-gradient(0deg, transparent 0 86px, color-mix(in srgb, var(--color-white) 45%, transparent) 86px 92px),
        repeating-linear-gradient(90deg, transparent 0 132px, color-mix(in srgb, var(--color-white) 45%, transparent) 132px 138px);
    text-align: center;
}

.visit-map-pin {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--color-terracotta);
    box-shadow: var(--shadow-card);
    color: var(--color-cream);
}

.visit-map-pin .visit-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.visit-map-text {
    max-width: 34ch;
    color: var(--color-text-muted);
}

.contact-grid {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    gap: 0.35rem 1rem;
    height: 100%;
    padding: 1.5rem;
    text-decoration: none;
}

.contact-card > :not(.contact-card-icon) {
    grid-column: 2;
}

.contact-card:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 3px;
}

.contact-card-icon {
    display: grid;
    place-items: center;
    grid-row: span 3;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-sand);
    color: var(--color-terracotta);
}

.contact-card-icon .visit-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.contact-card-value {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 0.9rem + 1.1vw, 1.4rem);
    overflow-wrap: anywhere;
}

.contact-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-weight: 600;
    transition: color var(--motion-duration) var(--motion-ease);
}

.contact-card:hover .contact-card-action {
    color: var(--color-accent-text);
}

.contact-card:hover .text-link-arrow,
.contact-card:focus-visible .text-link-arrow {
    transform: translateX(5px);
}

.visit-contact-note {
    margin-top: 2rem;
    text-align: center;
}

.visit-closing-panel {
    --photo-panel-overlay: linear-gradient(color-mix(in srgb, var(--color-espresso) 70%, transparent), color-mix(in srgb, var(--color-espresso) 88%, transparent));
    place-items: center;
    min-height: clamp(24rem, 50vw, 32rem);
    padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 4rem);
    text-align: center;
}

.visit-closing-copy {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
}

.visit-closing-copy .heading-section {
    max-width: 14ch;
    font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.25rem);
}

.visit-closing-tagline {
    margin-bottom: 0.5rem;
    color: var(--color-cream-muted);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

@media (min-width: 640px) {
    .visit-details div {
        grid-template-columns: 9.5rem 1fr;
        align-items: baseline;
        gap: 1rem;
    }

    .visit-map-frame {
        aspect-ratio: 16 / 10;
    }
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.75rem;
    }

    .contact-card > :not(.contact-card-icon) {
        grid-column: auto;
    }

    .contact-card-icon {
        grid-row: auto;
        margin-bottom: 0.75rem;
    }
}

@media (min-width: 900px) {
    .visit-info-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    .visit-hero-photo {
        aspect-ratio: 8 / 7;
    }

    .visit-map-frame {
        aspect-ratio: 21 / 9;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .community-gallery li:hover img,
    .journal-card:hover .text-link-arrow {
        transform: none;
    }

    .mood-option:hover .mood-option-body {
        transform: none;
    }

    .mobile-nav,
    .logo-dot {
        transform: none;
    }

    .article-card:hover,
    .article-card:hover .media-zoom img,
    .text-link:hover .text-link-arrow,
    .coffee-card-link:hover .coffee-card-media img,
    .coffee-card-link:focus-visible .coffee-card-media img,
    .coffee-card-link:hover .text-link-arrow,
    .coffee-card-link:focus-visible .text-link-arrow,
    .gallery-link:hover img,
    .gallery-link:focus-visible img,
    .featured-story:hover .featured-story-media img,
    .article-back:hover svg,
    .event-card:hover,
    .event-card:hover .event-card-media img,
    .event-card-more:hover .text-link-arrow,
    .event-card-more:focus-visible .text-link-arrow,
    .contact-card:hover,
    .contact-card:hover .text-link-arrow,
    .contact-card:focus-visible .text-link-arrow {
        transform: none;
    }

    .reveal-image,
    .reveal-image img,
    .hero-float,
    .scroll-cue-track::after {
        clip-path: none;
        transform: none;
    }
}