.hero {
    position: relative;
    min-height: min(58rem, 92vh);
    display: grid;
    align-items: end;
    overflow: hidden;
    background: var(--color-navy);
    color: var(--color-white);
}
.hero__media,
.hero__shade { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.hero__shade {
    background:
        linear-gradient(180deg, rgba(9,24,27,0.5) 0%, rgba(9,24,27,0.1) 32%, rgba(9,24,27,0.78) 100%),
        linear-gradient(90deg, rgba(9,24,27,0.5), transparent 60%);
}
.hero__inner {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--header-height) + 5rem);
    padding-bottom: 7.5rem;
}
.hero__content { max-width: 53rem; }
.hero__eyebrow {
    margin-bottom: 1rem;
    color: #f0bf78;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.hero__title { max-width: 11ch; margin-bottom: 1.2rem; font-size: var(--step-5); color: var(--color-white); }
.hero__text { max-width: 42rem; margin-bottom: 2rem; color: rgba(255,255,255,0.78); font-size: var(--step-1); }

.hero-search {
    display: grid;
    gap: 0.6rem;
    max-width: 50rem;
    padding: 0.55rem;
    background: var(--color-paper);
    color: var(--color-ink);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-float);
}
.hero-search__field {
    position: relative;
    min-width: 0;
    padding: 0.55rem 0.5rem 0.55rem 3rem;
}
.hero-search__icon { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--color-terracotta); }
.hero-search__field label { display: block; margin-bottom: 0.05rem; font-size: 0.72rem; font-weight: 800; }
.hero-search__field input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: 0.94rem; }
.hero-search__field input::placeholder { color: #7a8586; }
.hero-search__button {
    display: inline-flex;
    min-height: 3.4rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding-inline: 1.25rem;
    border: 0;
    border-radius: 0.95rem;
    background: var(--color-terracotta);
    color: var(--color-white);
    font-weight: 800;
    cursor: pointer;
}
.hero-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; font-size: 0.78rem; }
.hero-topics > span { color: rgba(255,255,255,0.62); }
.hero-topics a { padding: 0.4rem 0.7rem; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius-pill); background: rgba(15,34,37,0.22); text-decoration: none; backdrop-filter: blur(8px); }
.hero-topics a:hover { background: rgba(255,255,255,0.13); }
.hero__trust {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    border-top: 1px solid rgba(255,255,255,0.14);
    background: rgba(12,31,34,0.58);
    backdrop-filter: blur(14px);
}
.hero__trust-inner { display: flex; flex-wrap: wrap; gap: 0.8rem 1.7rem; padding-block: 1rem; color: rgba(255,255,255,0.75); font-size: 0.76rem; font-weight: 700; }
.hero__trust-inner span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__trust-inner .icon { color: #f0bf78; }

.section--districts { background: var(--color-cream); }
.district-grid { display: grid; gap: 1rem; }
.district-card {
    position: relative;
    min-height: 17rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    color: var(--color-white);
    text-decoration: none;
    isolation: isolate;
}
.district-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(0.2,0.7,0.2,1); }
.district-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,25,28,0.82), rgba(9,25,28,0.05) 65%); z-index: 1; }
.district-card__content { position: absolute; inset: auto 1.15rem 1.1rem; z-index: 2; }
.district-card__content strong { display: block; font-size: 1.5rem; }
.district-card__content small { display: block; margin-top: 0.2rem; color: rgba(255,255,255,0.72); font-size: 0.77rem; }
.district-card__arrow { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.16); backdrop-filter: blur(10px); }
.district-card:hover img { transform: scale(1.045); }

.section--featured { background: var(--color-paper); }

.section--manifesto { background: var(--color-navy); color: var(--color-white); }
.manifesto { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.manifesto__image { position: relative; min-height: 28rem; overflow: hidden; border-radius: var(--radius-xl); }
.manifesto__image img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,25,28,0.35), transparent 55%); }
.manifesto__stamp { position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 2; display: grid; width: 6.3rem; height: 6.3rem; place-items: center; border-radius: 50%; background: var(--color-gold); color: var(--color-navy); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; transform: rotate(-8deg); }
.manifesto__content .eyebrow { color: #f0bf78; }
.manifesto__content h2 { max-width: 12ch; margin-bottom: 1.3rem; }
.manifesto__content > p { max-width: 36rem; color: rgba(255,255,255,0.7); }
.manifesto__list { display: grid; gap: 0.75rem; margin: 1.6rem 0 2rem; padding: 0; list-style: none; }
.manifesto__list li { display: flex; gap: 0.65rem; align-items: center; color: rgba(255,255,255,0.86); }
.manifesto__list .icon { color: #f0bf78; }

.section--collections { background: var(--color-cream); }
.collection-grid { display: grid; gap: 1rem; }
.collection-card {
    position: relative;
    min-height: 25rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    color: var(--color-white);
    text-decoration: none;
    isolation: isolate;
}
.collection-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(0.2,0.7,0.2,1); }
.collection-card__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(9,25,28,0.9), rgba(9,25,28,0.06) 62%); }
.collection-card__content { position: absolute; inset: auto 1.3rem 1.3rem; z-index: 2; }
.collection-card__content small { display: block; margin-bottom: 0.45rem; color: #f0bf78; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.collection-card__content strong { display: block; margin-bottom: 0.55rem; font-size: 1.65rem; line-height: 1.08; }
.collection-card__content > span { display: block; max-width: 27rem; color: rgba(255,255,255,0.72); font-size: 0.85rem; }
.collection-card__icon { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.17); backdrop-filter: blur(10px); }
.collection-card:hover img { transform: scale(1.04); }

.section--closing { padding-top: 0; background: var(--color-cream); }
.closing-card {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 5rem);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(100deg, rgba(18,42,45,0.97), rgba(18,42,45,0.78)),
        url('../images/photos/food.webp') center/cover;
    color: var(--color-white);
}
.closing-card__content { max-width: 46rem; }
.closing-card .eyebrow { color: #f0bf78; }
.closing-card h2 { max-width: 13ch; margin-bottom: 1rem; }
.closing-card p:not(.eyebrow) { max-width: 37rem; color: rgba(255,255,255,0.7); }
.closing-search { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.closing-search input { flex: 1 1 17rem; min-height: 3.25rem; padding: 0.75rem 1rem; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill); background: rgba(255,255,255,0.1); color: var(--color-white); }
.closing-search input::placeholder { color: rgba(255,255,255,0.55); }

.archive-header { max-width: 53rem; margin-bottom: var(--space-6); }
.archive-title { margin-bottom: 1rem; font-size: var(--step-4); }
.archive-description { max-width: 42rem; color: var(--color-ink-soft); font-size: var(--step-1); }
.archive-search { margin-top: 1.5rem; }
.entry-header { margin-bottom: var(--space-5); }
.entry-header--center { text-align: center; }
.entry-title { margin-bottom: 1rem; }
.entry-title--display { font-size: var(--step-4); }
.entry-kicker { margin-bottom: 1rem; color: var(--color-terracotta-dark); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.entry-kicker a { text-decoration: none; }
.entry-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; color: var(--color-ink-soft); font-size: 0.83rem; }
.entry-hero { overflow: hidden; margin-bottom: var(--space-6); border-radius: var(--radius-lg); background: var(--color-sand); }
.entry-hero--wide { width: min(64rem, calc(100vw - 2rem)); margin-inline: 50%; transform: translateX(-50%); }
.entry-hero__image { width: 100%; aspect-ratio: 1.55; object-fit: cover; }
.entry-footer { margin-top: var(--space-5); }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-list a { padding: 0.45rem 0.75rem; background: var(--color-sand-light); border-radius: var(--radius-pill); font-size: 0.8rem; text-decoration: none; }
.post-navigation { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; text-align: left; }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { display: block; text-decoration: none; }
.nav-subtitle { display: block; margin-bottom: 0.35rem; color: var(--color-ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.nav-title { font-size: var(--step-1); font-weight: 750; line-height: 1.2; }
.comments-area { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.comment-list { padding-left: 1.2rem; }
.comment-body { margin-bottom: 1.5rem; padding: 1rem; background: var(--color-paper); border-radius: var(--radius-md); }
.comment-form input:not([type="checkbox"]),
.comment-form textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-paper); }
.form-submit .submit { padding: 0.85rem 1.25rem; border: 0; border-radius: var(--radius-pill); background: var(--color-terracotta); color: var(--color-white); font-weight: 750; cursor: pointer; }
.empty-state { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-5); background: var(--color-paper); border-radius: var(--radius-xl); }
.empty-state img { border-radius: var(--radius-lg); }
.error-page { display: grid; min-height: calc(100vh - var(--header-height)); place-items: center; padding-block: var(--space-6); }
.error-page__inner { display: grid; gap: var(--space-5); align-items: center; }
.error-page__art img { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.error-page__content h1 { font-size: var(--step-4); }
.error-page__content p:not(.eyebrow) { max-width: 34rem; color: var(--color-ink-soft); }

@media (min-width: 42rem) {
    .hero-search { grid-template-columns: minmax(0,1fr) auto; border-radius: var(--radius-pill); }
    .hero-search__button { border-radius: var(--radius-pill); }
    .district-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .collection-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .collection-card:first-child { grid-column: 1 / -1; min-height: 30rem; }
    .empty-state,
    .error-page__inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 64rem) {
    .hero__inner { padding-bottom: 8.5rem; }
    .hero__content { max-width: 60rem; }
    .district-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .district-card:nth-child(2),
    .district-card:nth-child(4) { transform: translateY(1.8rem); }
    .manifesto { grid-template-columns: minmax(0,0.95fr) minmax(0,0.85fr); }
    .manifesto__image { min-height: 38rem; }
    .collection-grid { grid-template-columns: 1.25fr 0.75fr 0.75fr; }
    .collection-card:first-child { grid-column: auto; min-height: 31rem; }
    .collection-card { min-height: 31rem; }
    .entry-hero--wide { width: min(68rem, calc(100vw - 4rem)); }
}

/* Tavern directory page. */
.michellis-listings-page {
    background: var(--color-background, #f7f4ee);
}

.listings-hero {
    padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--color-primary, #17243c);
    color: #fff;
}

.listings-hero__inner {
    max-width: 820px;
}

.listings-hero .eyebrow {
    color: #e7a477;
}

.listings-hero__title {
    margin: .5rem 0 1rem;
    color: inherit;
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: .95;
    letter-spacing: -.055em;
}

.listings-hero__description {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.listings-content .entry-content {
    max-width: none;
}