/* ==========================================================================
   BEER PRESSURE™
   Shared Site Styles

   Design direction:
   - Neighborhood tavern
   - Vintage sports page
   - Scoreboard utility graphics
   - Editorial newspaper composition
   - Zero generic restaurant-card-template energy
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
    --ink: #171512;
    --ink-soft: #27231e;

    --paper: #f2e6cf;
    --paper-light: #fbf3e3;
    --paper-dark: #dfcfaf;

    --gold: #d49a2a;
    --red: #8c3028;
    --green: #24442e;

    --white: #ffffff;
    --black: #000000;

    --text: #1d1a16;
    --text-muted: #625a4f;

    --rule: rgba(23, 21, 18, 0.28);
    --rule-light: rgba(242, 230, 207, 0.22);

    --font-display: "Barlow Condensed", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    --container: 1240px;
    --wide: 1480px;

    --header-height: 82px;

    --ease: 180ms ease;

    --shadow-paper:
        0 18px 50px rgba(23, 21, 18, 0.14);

    --shadow-heavy:
        0 28px 80px rgba(0, 0, 0, 0.28);
}


/* ==========================================================================
   2. Reset / Base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background:
        linear-gradient(
            rgba(23, 21, 18, 0.018) 1px,
            transparent 1px
        ),
        var(--paper);

    background-size: 100% 4px;

    color: var(--text);

    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.nav-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
blockquote,
figure {
    margin-top: 0;
}

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

address {
    font-style: normal;
}

::selection {
    background: var(--gold);
    color: var(--ink);
}


/* ==========================================================================
   3. Accessibility
   ========================================================================== */

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 9999;

    padding: 0.75rem 1rem;

    transform: translateY(-220%);

    border: 3px solid var(--ink);

    background: var(--paper-light);
    color: var(--ink);

    font-weight: 800;
    text-decoration: none;

    transition: transform var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 4px solid var(--gold);
    outline-offset: 4px;
}


/* ==========================================================================
   4. Shared Typography
   ========================================================================== */

.eyebrow {
    margin-bottom: 0.8rem;

    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.display-heading {
    max-width: 12ch;
    margin-bottom: 1.25rem;

    font-family: var(--font-display);
    font-size: clamp(3.25rem, 5.8vw, 5.75rem);
    font-weight: 900;
    line-height: 0.86;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.display-heading--xl {
    max-width: 10ch;

    font-size: clamp(4rem, 7vw, 7rem);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.text-link::after {
    content: "→";

    transition: transform var(--ease);
}

.text-link:hover::after {
    transform: translateX(0.35rem);
}


/* ==========================================================================
   5. Layout
   ========================================================================== */

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin-inline: auto;
}

.section {
    position: relative;

    padding-block: clamp(5rem, 9vw, 9rem);

    border-top: 2px solid var(--ink);
}

.section--cream,
.section--dark,
.section--green,
.section--gold,
.section--red {
    background: transparent;
    color: var(--text);
}

.section-heading {
    margin-bottom: 3rem;
}

.section-heading--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
}


/* ==========================================================================
   6. Buttons
   ========================================================================== */

.button {
    display: inline-flex;
    min-height: 3.15rem;

    align-items: center;
    justify-content: center;

    padding: 0.8rem 1.2rem;

    border: 3px solid var(--ink);
    border-radius: 0;

    background: var(--ink);
    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;

    box-shadow:
        5px 5px 0 var(--gold);

    cursor: pointer;

    transition:
        transform var(--ease),
        box-shadow var(--ease),
        background var(--ease),
        color var(--ease);
}

.button:hover {
    transform: translate(3px, 3px);

    box-shadow:
        2px 2px 0 var(--gold);
}

.button--secondary {
    background: transparent;
    color: var(--ink);
}

.button--secondary:hover {
    background: var(--ink);
    color: var(--paper-light);
}

.button--cream {
    background: var(--paper-light);
    color: var(--ink);
}

.button--dark {
    background: var(--ink);
    color: var(--paper-light);
}

.button--small {
    min-height: 2.8rem;

    padding-inline: 1rem;

    font-size: 0.7rem;
}


/* ==========================================================================
   7. Header
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 100;

    background: var(--ink);
    color: var(--paper-light);
}

.site-header__inner {
    width: min(calc(100% - 2rem), var(--wide));
    min-height: var(--header-height);
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}


/* ==========================================================================
   8. Logo
   ========================================================================== */

.site-logo {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-weight: 900;

    line-height: 0.74;

    text-decoration: none;
    text-transform: uppercase;
}

.site-logo__beer {
    font-size: 1.42rem;

    letter-spacing: 0.11em;
}

.site-logo__pressure {
    font-size: 2.3rem;

    letter-spacing: 0.01em;

    margin-top: 0.10em;
}

.site-logo__pressure span {
    position: relative;
    top: -0.55rem;

    margin-left: 0.1rem;

    font-family: var(--font-body);
    font-size: 0.5rem;
    font-weight: 700;
}


/* ==========================================================================
   9. Desktop Navigation
   ========================================================================== */

.primary-nav {
    display: flex;
    align-items: center;

    gap: 1.6rem;
}

.primary-nav__list {
    display: flex;
    align-items: center;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.primary-nav__list li {
    position: relative;
}

.primary-nav__list li + li::before {
    content: "/";

    display: inline-block;

    margin-inline: 0.8rem;

    color: rgba(242, 230, 207, 0.42);

    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.primary-nav__list a {
    position: relative;

    padding-block: 0.25rem;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.69rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
}

.primary-nav__list a::after {
    content: "";

    position: absolute;
    right: 100%;
    bottom: -0.28rem;
    left: 0;

    height: 3px;

    background: var(--gold);

    transition: right var(--ease);
}

.primary-nav__list a:hover::after,
.primary-nav__list a[aria-current="page"]::after {
    right: 0;
}

.primary-nav__cta {
    position: relative;

    min-width: 9.8rem;

    box-shadow: none;
}

.primary-nav__cta::before {
    content: "TONIGHT";

    position: absolute;
    top: -0.48rem;
    left: 0.55rem;

    padding-inline: 0.25rem;

    background: var(--ink);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 800;

    letter-spacing: 0.09em;
}


/* ==========================================================================
   10. Mobile Navigation Toggle
   ========================================================================== */

.nav-toggle {
    display: none;

    width: 3rem;
    height: 3rem;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 0.34rem;

    border: 2px solid var(--paper-light);

    background: transparent;
    color: var(--paper-light);

    cursor: pointer;
}

.nav-toggle__line {
    width: 1.45rem;
    height: 2px;

    background: currentColor;

    transition:
        transform var(--ease),
        opacity var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
    transform: translateY(0.42rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
    transform: translateY(-0.42rem) rotate(-45deg);
}


/* ==========================================================================
   11. Announcement / Sports Ticker
   ========================================================================== */

.announcement-bar {
    overflow: hidden;

    border-top: 1px solid var(--rule-light);
    border-bottom: 1px solid var(--rule-light);

    background: var(--green);
}

.announcement-bar__inner {
    width: min(calc(100% - 2rem), var(--wide));
    min-height: 2.7rem;
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.85rem;

    color: var(--paper-light);

    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    white-space: nowrap;
    text-transform: uppercase;
}


/* ==========================================================================
   12. Homepage Hero
   ========================================================================== */

.hero {
    position: relative;

    display: grid;

    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);

    grid-template-rows:
        minmax(38rem, auto)
        auto;

    overflow: hidden;

    border-bottom: 4px solid var(--ink);

    background: var(--paper);
    color: var(--ink);
}

.hero__media {
    grid-column: 2;
    grid-row: 1;

    position: relative;

    min-height: 38rem;

    border-left: 4px solid var(--ink);

    background: var(--ink);
}

.hero__media::after {
    content: "FIG. 01 / A PLACE WHERE THE TAB OUTLIVES YOUR PLANS";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    padding: 0.65rem 0.8rem;

    background: rgba(23, 21, 18, 0.92);
    color: var(--paper-light);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hero__media img {
    width: 100%;
    height: 100%;

    min-height: 38rem;

    object-fit: cover;
    object-position: center;
}

.hero__overlay {
    display: none;
}

.hero__content {
    grid-column: 1;
    grid-row: 1;

    width: auto;
    max-width: 900px;
    margin: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(2rem, 5vw, 5rem)
        clamp(4rem, 7vw, 7rem)
        max(
            1rem,
            calc((100vw - var(--container)) / 2)
        );
}

.hero__content .eyebrow {
    width: fit-content;

    margin-bottom: 1.2rem;
    padding-bottom: 0.35rem;

    border-bottom: 2px solid var(--ink);
}

.hero__title {
    margin: 0;

    max-width: none;

    font-family: var(--font-display);
    font-weight: 900;
    line-height: 0.71;

    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.hero__title-top,
.hero__title-bottom {
    display: block;

    margin-top: 0.08em;
}

.hero__title-top {
    font-size: clamp(4.75rem, 7.5vw, 7.5rem);

    letter-spacing: 0.02em;
}

.hero__title-bottom {
    font-size: clamp(5.5rem, 8.75vw, 8.75rem);
}

.hero__title-bottom span {
    position: relative;
    top: -2.8rem;

    margin-left: 0.15rem;

    font-family: var(--font-body);
    font-size: clamp(0.75rem, 1vw, 1rem);
    font-weight: 700;
}

.hero__tagline {
    width: fit-content;

    margin: 1.6rem 0 0.35rem;

    font-size: clamp(1.4rem, 2vw, 1.9rem);
    font-style: italic;
    font-weight: 700;
}

.hero__statement {
    margin-bottom: 2rem;

    font-family: var(--font-mono);
    font-size: clamp(0.78rem, 1.1vw, 0.95rem);
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 2rem;
}

.hero__stamp {
    width: fit-content;

    margin: 0;

    padding: 0.55rem 0.7rem;

    transform: rotate(-1.5deg);

    border: 3px solid var(--red);

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero__utility {
    grid-column: 1 / -1;
    grid-row: 2;

    position: relative;

    border-top: 4px solid var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.hero__utility-inner {
    min-height: 4.1rem;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    align-items: center;
}

.hero__utility-inner span {
    padding: 0.7rem 1rem;

    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.055em;
    text-align: center;
    text-transform: uppercase;
}

.hero__utility-inner span + span {
    border-left: 1px solid var(--rule-light);
}


/* ==========================================================================
   13. Opening Statement / Newspaper Masthead
   ========================================================================== */

.statement-section {
    padding-top: clamp(3.5rem, 6vw, 6rem);
    padding-bottom: clamp(5rem, 8vw, 8rem);
}

.statement-section__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(16rem, 0.65fr);

    gap: clamp(3rem, 7vw, 7rem);

    align-items: end;
}

.statement-section .eyebrow {
    grid-column: 1 / -1;

    margin-bottom: -0.5rem;
}

.statement-section .display-heading {
    max-width: 11ch;

    margin: 0;

    font-size: clamp(3.8rem, 6.5vw, 6.5rem);
}

.statement-section__copy {
    position: relative;

    padding-top: 1rem;

    border-top: 4px solid var(--ink);

    font-size: 1rem;
}

.statement-section__copy::before {
    content: "EST. WHENEVER SOMEBODY HAD THE IDEA";

    display: block;

    margin-bottom: 1rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.statement-section__copy p {
    margin-bottom: 1rem;
}


/* ==========================================================================
   14. Featured Menu
   ========================================================================== */

.featured-menu {
    overflow: hidden;
}

.featured-menu::before {
    content: "FOOD / FOOD / FOOD / FOOD / FOOD / FOOD / FOOD / FOOD";

    position: absolute;
    top: 1rem;
    left: 0;

    width: 100%;

    overflow: hidden;

    color: rgba(23, 21, 18, 0.08);

    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 9rem);
    line-height: 1;

    letter-spacing: 0.02em;
    white-space: nowrap;
}

.featured-menu .section-heading {
    position: relative;
    z-index: 1;

    padding-bottom: 1.5rem;

    border-bottom: 4px solid var(--ink);
}

.featured-menu .display-heading {
    max-width: 10ch;
}

.featured-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(20rem, 0.9fr);

    grid-template-rows: repeat(3, auto);

    gap: 0 3rem;

    align-items: start;
}


/* First item becomes the editorial photo feature */

.feature-card:first-child {
    grid-column: 1;
    grid-row: 1 / 4;

    min-width: 0;

    padding-right: 1rem;
}

.feature-card:first-child .feature-card__image {
    position: relative;

    margin-bottom: 1.2rem;

    overflow: visible;
}

.feature-card:first-child .feature-card__image::after {
    content: "FIG. 02 / EAT SOMETHING";

    position: absolute;
    right: -1rem;
    bottom: -0.8rem;

    padding: 0.45rem 0.6rem;

    background: var(--red);
    color: var(--paper-light);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.feature-card:first-child img {
    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    filter:
        saturate(0.9)
        contrast(1.04);
}

.feature-card:first-child .feature-card__content {
    max-width: 34rem;
}

.feature-card:first-child .feature-card__category {
    margin-bottom: 0.35rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.feature-card:first-child h3 {
    margin-bottom: 0.5rem;

    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 900;
    line-height: 0.92;

    text-transform: uppercase;
}

.feature-card:first-child p:last-child {
    max-width: 30rem;
}


/* Remaining menu items become printed menu rows */

.feature-card:not(:first-child) {
    grid-column: 2;

    border-top: 2px solid var(--ink);
}

.feature-card:not(:first-child):last-child {
    border-bottom: 2px solid var(--ink);
}

.feature-card__link {
    color: inherit;
    text-decoration: none;
}

.feature-card:not(:first-child) .feature-card__link {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 1rem;

    padding-block: 1.35rem;
}

.feature-card:not(:first-child) .feature-card__image {
    display: none;
}

.feature-card:not(:first-child) .feature-card__content {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap: 1.25rem;
}

.feature-card:not(:first-child) .feature-card__category {
    grid-column: 1 / -1;

    margin-bottom: -0.35rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.feature-card:not(:first-child) h3 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(2.3rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 0.92;

    text-transform: uppercase;
}

.feature-card:not(:first-child) p:last-child {
    margin: 0;

    color: var(--text-muted);

    font-size: 0.92rem;
}


/* ==========================================================================
   15. Events / Scoreboard
   ========================================================================== */


/* ==========================================================================
   Featured Menu - House Report
   ========================================================================== */

.featured-menu .section-heading--split {
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(18rem, 0.8fr);

    align-items: end;

    gap: clamp(3rem, 7vw, 7rem);
}

.menu-report {
    width: 100%;
    max-width: 27rem;

    justify-self: end;

    padding:
        1rem
        0
        0.9rem;

    border-top: 4px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

.menu-report__eyebrow {
    margin-bottom: 0.85rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-report__stamp {
    width: fit-content;

    margin-bottom: 1.35rem;
    padding: 0.4rem 0.55rem;

    transform: rotate(-1deg);

    border: 2px solid var(--red);

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.59rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.menu-report__list {
    margin: 0;
}

.menu-report__list > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 1rem;

    padding-block: 0.65rem;

    border-top: 1px solid var(--rule);
}

.menu-report__list > div:last-child {
    border-bottom: 1px solid var(--rule);
}

.menu-report__list dt,
.menu-report__list dd {
    margin: 0;

    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.menu-report__list dt {
    color: var(--ink);
}

.menu-report__list dd {
    color: var(--text-muted);

    text-align: right;
}

.menu-report__kitchen {
    margin:
        1rem
        0
        0.9rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.menu-report__link {
    font-size: 0.68rem;
}
.events-preview {
    background: var(--green);
    color: var(--paper-light);
}

.events-preview__background {
    position: absolute;
    z-index: 0;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.events-preview__background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 45%;

    opacity: 0.42;

    filter:
        grayscale(0.25)
        saturate(0.72)
        contrast(1.05);
}

.events-preview__background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(36, 68, 46, 0.92) 0%,
            rgba(36, 68, 46, 0.82) 28%,
            rgba(36, 68, 46, 0.58) 58%,
            rgba(36, 68, 46, 0.68) 100%
        );
}

.events-preview > .container {
    position: relative;
    z-index: 2;
}

.events-preview::before {
    content: "";

    position: absolute;
    inset: 1.2rem;

    pointer-events: none;

    border: 1px solid rgba(242, 230, 207, 0.22);
}

.events-preview .container {
    position: relative;
    z-index: 1;
}

.events-preview .section-heading {
    padding-bottom: 1.5rem;

    border-bottom: 4px solid var(--paper-light);
}

.events-preview .eyebrow {
    color: var(--gold);
}

.events-preview .display-heading {
    max-width: 11ch;
}

.events-preview .button {
    border-color: var(--paper-light);

    background: var(--paper-light);
    color: var(--green);

    box-shadow:
        5px 5px 0 var(--gold);
}

.events-grid {
    display: block;

    border-top: 2px solid var(--paper-light);
}

.event-card {
    min-height: 0;

    display: grid;

    grid-template-columns:
        9rem
        7rem
        minmax(16rem, 0.65fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid rgba(242, 230, 207, 0.34);
}

.event-card__day,
.event-card__time {
    margin: 0;

    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.event-card__day {
    color: var(--gold);
}

.event-card__time {
    color: rgba(242, 230, 207, 0.68);
}

.event-card h3 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 3.5rem);
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.event-card p:last-child {
    margin: 0;

    color: rgba(242, 230, 207, 0.7);

    font-size: 0.9rem;
}


/* ==========================================================================
   16. Happy Hour / Fake Newspaper Ad
   ========================================================================== */

.happy-hour {
    padding-block: clamp(5rem, 8vw, 8rem);
}

.happy-hour__inner {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(18rem, 0.85fr);

    gap: clamp(3rem, 7vw, 7rem);

    padding:
        clamp(2rem, 5vw, 4rem);

    border: 6px double var(--paper-light);

    background: var(--red);
    color: var(--paper-light);

    box-shadow:
        14px 14px 0 var(--ink);
}

.happy-hour__inner::before {
    content: "PAID ADVERTISEMENT";

    position: absolute;
    top: -0.85rem;
    left: 2rem;

    padding: 0.25rem 0.6rem;

    background: var(--paper);
    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.57rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.happy-hour__content .eyebrow {
    color: var(--gold);
}

.happy-hour__content .display-heading {
    max-width: 9ch;
}

.happy-hour__content > p:not(.eyebrow) {
    max-width: 35rem;

    margin-bottom: 1.75rem;

    font-size: 1rem;
}

.happy-hour .button {
    border-color: var(--paper-light);

    background: var(--paper-light);
    color: var(--red);

    box-shadow:
        5px 5px 0 var(--ink);
}


/* ==========================================================================
   17. Pressure Gauge
   ========================================================================== */

.pressure-gauge {
    align-self: center;

    padding: clamp(1.5rem, 4vw, 2.5rem);

    transform: rotate(1.2deg);

    border: 4px solid var(--paper-light);

    background: var(--paper-light);
    color: var(--ink);

    box-shadow:
        8px 8px 0 rgba(23, 21, 18, 0.55);
}

.pressure-gauge__title {
    margin-bottom: 1rem;

    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.pressure-gauge__dial {
    position: relative;

    width: min(20rem, 100%);
    aspect-ratio: 2 / 1;

    margin-inline: auto;

    overflow: hidden;

    border:
        1rem solid
        var(--ink);

    border-bottom: 0;
    border-radius: 999rem 999rem 0 0;
}

.pressure-gauge__dial::before {
    content: "";

    position: absolute;
    inset: 13%;
    bottom: 0;

    border:
        0.55rem solid
        rgba(23, 21, 18, 0.18);

    border-bottom: 0;
    border-radius: 999rem 999rem 0 0;
}

.pressure-gauge__needle {
    position: absolute;
    left: 50%;
    bottom: -0.1rem;

    width: 42%;
    height: 0.32rem;

    transform: rotate(-22deg);
    transform-origin: left center;

    background: var(--red);
}

.pressure-gauge__needle::before {
    content: "";

    position: absolute;
    top: 50%;
    left: -0.45rem;

    width: 0.9rem;
    height: 0.9rem;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--ink);
}

.pressure-gauge__labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 0.5rem;

    margin-top: 1rem;

    font-family: var(--font-mono);
    font-size: 0.61rem;
    font-weight: 800;

    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
}


/* ==========================================================================
   18. Sports Feature
   ========================================================================== */

.sports-feature {
    position: relative;

    min-height: 48rem;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr);

    overflow: hidden;

    border-top: 4px solid var(--ink);
    border-bottom: 4px solid var(--ink);

    background: var(--paper);
    color: var(--ink);
}

.sports-feature__media,
.sports-feature__content {
    position: relative;
    z-index: 1;
}

.sports-feature__media {
    grid-column: 2;
    grid-row: 1;

    position: relative;

    border-left: 4px solid var(--ink);

    z-index: 1;
}

.sports-feature__media::after {
    content: "14 SCREENS / 12 TAPS / 1 GUY BLAMING THE REF";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    padding: 0.7rem;

    background: var(--ink);
    color: var(--paper-light);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.sports-feature__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.82)
        contrast(1.08);
}

.sports-feature__overlay {
    display: none;
}

.sports-feature__content {
    grid-column: 1;
    grid-row: 1;

    width: min(calc(100% - 2rem), 980px);
    margin-left: max(
        1rem,
        calc((100vw - var(--container)) / 2)
    );

    align-self: center;

    padding:
        clamp(5rem, 9vw, 9rem)
        clamp(2rem, 6vw, 6rem)
        clamp(5rem, 9vw, 9rem)
        0;

    position: relative;

    z-index: 1;
}

.sports-feature__content .eyebrow {
    color: var(--red);
}

.sports-feature__content .display-heading {
    max-width: 8.5ch;

    margin-bottom: 1.5rem;

    font-size: clamp(4rem, 6.75vw, 6.75rem);
}

.sports-feature__content > p:not(.eyebrow) {
    max-width: 34rem;

    margin-bottom: 1.8rem;

    color: var(--text-muted);
}


/* ==========================================================================
   19. About Preview / Newspaper Feature Story
   ========================================================================== */

.about-preview {
    overflow: hidden;
}

.about-preview::after {
    content: "LOCAL / PEOPLE / POOR JUDGMENT";

    position: absolute;
    right: -3rem;
    bottom: 2rem;

    transform: rotate(-90deg);
    transform-origin: bottom right;

    color: rgba(23, 21, 18, 0.12);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;
}

.about-preview .split-layout {
    display: grid;

    grid-template-columns: minmax(320px, 0.48fr) minmax(0, 0.52fr);

    gap: clamp(2.5rem, 6vw, 6rem);

    align-items: start;
}

.about-preview .split-layout__media {
    position: relative;

    margin-top: 3rem;
}

.about-preview .split-layout__media::before {
    content: "FIG. 03 / YOUR OTHER LIVING ROOM";

    position: absolute;
    z-index: 2;
    top: -1.6rem;
    left: 0;

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.about-preview .split-layout__media img {
    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    border-radius: 0;

    box-shadow: none;
}

.about-preview .split-layout__content {
    padding-top: 1rem;

    border-top: 4px solid var(--ink);
}

.about-preview .display-heading {
    max-width: 10ch;
}

.about-preview .split-layout__content > p:not(.eyebrow) {
    max-width: none;

    column-count: 2;
    column-gap: 2rem;

    color: var(--text-muted);
}

.about-preview .text-link {
    margin-top: 1.4rem;
}


/* ==========================================================================
   20. Parties / Ticket Insert
   ========================================================================== */

.parties-preview {
    padding-block: clamp(5rem, 8vw, 8rem);
}

.parties-preview .split-layout {
    position: relative;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr);

    gap: 0;

    overflow: hidden;

    border: 4px solid var(--ink);

    background: var(--gold);
    color: var(--ink);

    box-shadow:
        12px 12px 0 var(--red);
}

.parties-preview .split-layout::before,
.parties-preview .split-layout::after {
    content: "";

    position: absolute;
    z-index: 5;
    top: 50%;

    width: 2.5rem;
    height: 2.5rem;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--paper);
}

.parties-preview .split-layout::before {
    left: -1.35rem;
}

.parties-preview .split-layout::after {
    right: -1.35rem;
}

.parties-preview .split-layout__content {
    order: 1;

    padding:
        clamp(2rem, 5vw, 4rem);

    border-right: 3px dashed var(--ink);
}

.parties-preview .split-layout__media {
    order: 2;
}

.parties-preview .split-layout__media img {
    width: 100%;
    height: 100%;
    min-height: 100%;

    aspect-ratio: auto;

    object-fit: cover;

    border-radius: 0;

    box-shadow: none;
}

.parties-preview .eyebrow {
    margin-bottom: 1rem;
}

.parties-preview .eyebrow::before {
    content: "ADMIT ONE / ";

    color: var(--red);
}

.parties-preview .display-heading {
    max-width: 8ch;

    font-size: clamp(3.8rem, 6vw, 6rem);
}

.parties-preview .split-layout__content > p:not(.eyebrow) {
    max-width: 38rem;

    color: var(--ink);
}

.parties-preview .button {
    margin-top: 0.8rem;

    background: var(--ink);
    color: var(--paper-light);
}


/* ==========================================================================
   21. Location Preview
   ========================================================================== */

.location-preview {
    background: var(--paper-light);
}

.location-preview__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 3rem 6rem;
}

.location-preview__inner > div:first-child {
    padding-top: 1rem;

    border-top: 4px solid var(--ink);
}

.location-preview__details {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.5rem;

    padding-top: 1rem;

    border-top: 4px solid var(--ink);
}

.location-preview__details > div + div {
    padding-left: 1.5rem;

    border-left: 1px solid var(--rule);
}

.location-preview__details h3 {
    margin-bottom: 0.7rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.location-preview__details p,
.location-preview__details address {
    margin: 0;

    color: var(--text-muted);

    font-size: 0.9rem;
}

.location-preview__details a {
    color: var(--ink);

    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

.location-preview__actions {
    grid-column: 2;

    display: flex;
    flex-wrap: wrap;

    gap: 1rem;
}


/* ==========================================================================
   22. Footer
   ========================================================================== */

.site-footer {
    background: var(--ink);
    color: var(--paper-light);
}

.site-footer__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        repeat(3, minmax(0, 0.75fr));

    gap: clamp(2rem, 5vw, 4rem);

    padding-block: 4.5rem;

    border-bottom: 1px solid var(--rule-light);
}

.site-logo--footer {
    margin-bottom: 1rem;
}

.site-footer__tagline {
    margin-bottom: 0.45rem;

    font-style: italic;
    font-weight: 700;
}

.site-footer__brand > p:not(.site-footer__tagline) {
    color: rgba(242, 230, 207, 0.65);
}

.site-footer__heading {
    margin-bottom: 1rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer__links,
.site-footer__legal,
.social-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.site-footer__links li + li {
    margin-top: 0.45rem;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--gold);
}

.site-footer address,
.site-footer__hours,
.site-footer__grid p {
    color: rgba(242, 230, 207, 0.68);
}

.social-links {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 1.2rem;

    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ==========================================================================
   23. Footer Punchline
   ========================================================================== */

.site-footer__punchline {
    padding-block: clamp(2.5rem, 6vw, 5rem);

    overflow: hidden;

    border-bottom: 1px solid var(--rule-light);
}

.site-footer__punchline p {
    width: 100%;
    max-width: none;

    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(3.8rem, 6.4vw, 6.5rem);
    font-weight: 900;
    line-height: 0.86;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}


/* ==========================================================================
   24. Footer Bottom
   ========================================================================== */

.site-footer__bottom {
    background: #0e0d0b;
}

.site-footer__bottom-inner {
    min-height: 4.6rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    color: rgba(242, 230, 207, 0.45);

    font-family: var(--font-mono);
    font-size: 0.62rem;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.site-footer__bottom-inner p {
    margin: 0;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;

    gap: 1.2rem;
}


/* ==========================================================================
   25. Responsive — Large Tablet
   ========================================================================== */

@media (max-width: 1180px) {
    .primary-nav {
        gap: 1rem;
    }

    .primary-nav__list li + li::before {
        margin-inline: 0.5rem;
    }

    .primary-nav__list a {
        font-size: 0.63rem;
    }

    .hero {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(320px, 0.85fr);
    }

    .hero__title-top {
        font-size: clamp(4.5rem, 7.5vw, 6.8rem);
    }

    .hero__title-bottom {
        font-size: clamp(5.1rem, 8.75vw, 7.7rem);
    }

    .featured-grid {
        gap-right: 2rem;
    }

    .event-card {
        grid-template-columns:
            7rem
            6rem
            minmax(12rem, 0.7fr)
            minmax(0, 1fr);
    }

    .site-footer__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================================
   26. Responsive — Tablet / Mobile Navigation
   ========================================================================== */

@media (max-width: 980px) {
    :root {
        --header-height: 72px;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .primary-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;

        display: none;

        padding:
            1.5rem
            max(
                1rem,
                calc((100vw - var(--container)) / 2)
            )
            2rem;

        border-top: 1px solid var(--rule-light);
        border-bottom: 3px solid var(--gold);

        background: var(--ink);

        box-shadow: var(--shadow-heavy);
    }

    .primary-nav.is-open {
        display: block;
    }

    .primary-nav__list {
        display: block;

        margin-bottom: 1.5rem;
    }

    .primary-nav__list li + li::before {
        display: none;
    }

    .primary-nav__list li + li {
        border-top: 1px solid var(--rule-light);
    }

    .primary-nav__list a {
        display: block;

        padding: 0.9rem 0;

        font-size: 0.85rem;
    }

    .primary-nav__list a::after {
        display: none;
    }

    .primary-nav__cta {
        width: 100%;
    }

    .announcement-bar__inner {
        justify-content: flex-start;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .announcement-bar__inner::-webkit-scrollbar {
        display: none;
    }

    .hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.65fr);
    }

    .hero__content {
        padding-left: 1rem;
    }

    .hero__title-top {
        font-size: clamp(4.2rem, 8vw, 6.2rem);
    }

    .hero__title-bottom {
        font-size: clamp(4.8rem, 9.25vw, 7rem);
    }

    .statement-section__inner {
        grid-template-columns: 1fr;
    }

    .statement-section .eyebrow {
        grid-column: auto;
    }

    .featured-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 2.5rem;
    }

    .feature-card:first-child {
        grid-column: auto;
        grid-row: auto;

        padding-right: 0;
    }

    .feature-card:not(:first-child) {
        grid-column: auto;
    }

    .happy-hour__inner {
        grid-template-columns: 1fr;
    }

    .sports-feature {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 0.34fr);
    }

    .sports-feature__content {
        margin-left: 1rem;
    }

    .about-preview .split-layout {
        grid-template-columns:
            minmax(220px, 0.42fr)
            minmax(0, 0.58fr);
    }

    .about-preview .split-layout__content > p:not(.eyebrow) {
        column-count: 1;
    }

    .parties-preview .split-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(240px, 0.4fr);
    }

    .location-preview__inner {
        grid-template-columns: 1fr;
    }

    .location-preview__actions {
        grid-column: auto;
    }
}


/* ==========================================================================
   27. Responsive — Small Tablet
   ========================================================================== */

@media (max-width: 760px) {
    .container {
        width: min(calc(100% - 1.4rem), var(--container));
    }

    .site-header__inner,
    .announcement-bar__inner {
        width: min(calc(100% - 1.4rem), var(--wide));
    }

    .section {
        padding-block: 4.5rem;
    }

    .section-heading--split {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .display-heading {
        font-size: clamp(3rem, 11vw, 4.8rem);
    }

    .display-heading--xl {
        font-size: clamp(3.5rem, 13vw, 5.5rem);
    }

    .hero {
        display: block;

        border-bottom: 4px solid var(--ink);
    }

    .hero__content {
        max-width: none;

        padding:
            4rem
            0.7rem
            4rem;
    }

    .hero__title-top {
        font-size: clamp(4rem, 16vw, 6rem);
    }

    .hero__title-bottom {
        font-size: clamp(4.6rem, 18.5vw, 6.8rem);
    }

    .hero__title-bottom span {
        top: -1.7rem;
    }

    .hero__media {
        min-height: 31rem;

        border-top: 4px solid var(--ink);
        border-left: 0;
    }

    .hero__media img {
        min-height: 31rem;
    }

    .hero__utility-inner {
        grid-template-columns: 1fr;
    }

    .hero__utility-inner span {
        text-align: left;
    }

    .hero__utility-inner span + span {
        border-top: 1px solid var(--rule-light);
        border-left: 0;
    }

    .statement-section .display-heading {
        font-size: clamp(3.5rem, 13vw, 5.5rem);
    }

    .feature-card:not(:first-child) .feature-card__content {
        grid-template-columns: 1fr;
    }

    .event-card {
        grid-template-columns:
            1fr
            auto;

        gap: 0.5rem 1rem;
    }

    .event-card__day {
        grid-column: 1;
    }

    .event-card__time {
        grid-column: 2;

        text-align: right;
    }

    .event-card h3 {
        grid-column: 1 / -1;
    }

    .event-card p:last-child {
        grid-column: 1 / -1;
    }

    .happy-hour__inner {
        padding: 2rem 1.4rem;

        box-shadow:
            8px 8px 0 var(--ink);
    }

    .sports-feature {
        display: block;
    }

    .sports-feature__content {
        width: auto;
        margin: 0;

        padding:
            4.5rem
            0.7rem;
    }

    .sports-feature__content .display-heading {
        font-size: clamp(3.8rem, 14vw, 5.8rem);
    }

    .sports-feature__media {
        min-height: 24rem;

        border-top: 4px solid var(--ink);
        border-left: 0;
    }

    .sports-feature__media img {
        height: 24rem;
    }

    .about-preview .split-layout {
        grid-template-columns: 1fr;
    }

    .about-preview .split-layout__media {
        margin-top: 2rem;
    }

    .about-preview .split-layout__media img {
        max-height: 34rem;
    }

    .parties-preview .split-layout {
        grid-template-columns: 1fr;
    }

    .parties-preview .split-layout__content {
        border-right: 0;
        border-bottom: 3px dashed var(--ink);
    }

    .parties-preview .split-layout__media {
        min-height: 22rem;
    }

    .parties-preview .split-layout__media img {
        min-height: 22rem;
    }

    .location-preview__details {
        grid-template-columns: 1fr;
    }

    .location-preview__details > div + div {
        padding-top: 1rem;
        padding-left: 0;

        border-top: 1px solid var(--rule);
        border-left: 0;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__punchline p {
        font-size: clamp(3.5rem, 13vw, 5.5rem);
    }

    .site-footer__bottom-inner {
        display: block;

        padding-block: 1.2rem;
    }

    .site-footer__legal {
        margin-top: 0.8rem;
    }
}


/* ==========================================================================
   28. Responsive — Phones
   ========================================================================== */

@media (max-width: 480px) {
    .site-logo__beer {
        font-size: 1.18rem;
    }

    .site-logo__pressure {
        font-size: 1.9rem;
    }

    .announcement-bar__inner {
        min-height: 2.5rem;

        font-size: 0.6rem;
    }

    .hero__content {
        padding-top: 3.2rem;
        padding-bottom: 3.5rem;
    }

    .hero__title-top {
        font-size: clamp(3.45rem, 16vw, 4.8rem);
    }

    .hero__title-bottom {
        font-size: clamp(3.95rem, 18.5vw, 5.5rem);
    }

    .hero__tagline {
        font-size: 1.2rem;
    }

    .hero__statement {
        font-size: 0.7rem;
    }

    .hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero__actions .button,
    .location-preview__actions .button {
        width: 100%;
    }

    .hero__media {
        min-height: 25rem;
    }

    .hero__media img {
        min-height: 25rem;
    }

    .pressure-gauge {
        transform: none;
    }

    .pressure-gauge__labels {
        font-size: 0.53rem;
    }

    .location-preview__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .site-footer__legal {
        display: grid;

        gap: 0.5rem;
    }
}


/* ==========================================================================
   29. Reduced Motion
   ========================================================================== */


@media (max-width: 760px) {
    .featured-menu .section-heading--split {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .menu-report {
        max-width: none;

        justify-self: stretch;
    }

    .menu-report__list > div {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   BEER PRESSURE - MENU PAGE
   ========================================================================== */


/* ==========================================================================
   Menu Hero
   ========================================================================== */

.menu-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(4.5rem, 9vw, 8rem);

    border-bottom: 4px solid var(--ink);

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.035) 1px,
            transparent 1px
        ),
        var(--paper);

    background-size:
        34px 100%,
        auto;
}

.menu-hero::before {
    content: "MENU / MENU / MENU / MENU / MENU";

    position: absolute;
    top: -1.4rem;
    left: 0;

    width: 100%;

    overflow: hidden;

    color: rgba(23, 21, 18, 0.055);

    font-family: var(--font-display);
    font-size: clamp(8rem, 18vw, 18rem);
    font-weight: 900;
    line-height: 0.8;

    letter-spacing: 0.01em;
    white-space: nowrap;
    text-transform: uppercase;

    pointer-events: none;
}

.menu-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(19rem, 0.65fr);

    align-items: end;

    gap: clamp(3rem, 8vw, 8rem);
}

.menu-hero__copy {
    min-width: 0;
}

.menu-hero__copy .eyebrow {
    width: fit-content;

    padding-bottom: 0.4rem;

    border-bottom: 2px solid var(--ink);

    color: var(--red);
}

.menu-hero__title {
    max-width: 10ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size: clamp(4.8rem, 9vw, 9rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.menu-hero__intro {
    max-width: 42rem;

    margin: 0;

    color: var(--text-muted);

    font-size: clamp(1rem, 1.4vw, 1.15rem);
}


/* ==========================================================================
   Menu Hero Report
   ========================================================================== */

.menu-hero__report {
    align-self: end;

    padding:
        1.35rem
        0
        1.1rem;

    border-top: 5px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

.menu-hero__report-label {
    margin-bottom: 1rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-hero__stats {
    margin: 0;
}

.menu-hero__stats > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 1rem;

    padding-block: 0.7rem;

    border-top: 1px solid var(--rule);
}

.menu-hero__stats > div:last-child {
    border-bottom: 1px solid var(--rule);
}

.menu-hero__stats dt,
.menu-hero__stats dd {
    margin: 0;

    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.menu-hero__stats dd {
    color: var(--text-muted);

    text-align: right;
}

.menu-hero__stamp {
    width: fit-content;

    margin:
        1.25rem
        0
        0;

    padding: 0.45rem 0.6rem;

    transform: rotate(-1deg);

    border: 2px solid var(--red);

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* ==========================================================================
   Menu Category Jump Bar
   ========================================================================== */

.menu-jump {
    position: sticky;
    top: 0;
    z-index: 40;

    border-bottom: 2px solid var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.menu-jump__inner {
    min-height: 3.8rem;

    display: flex;
    align-items: center;

    gap: 1.25rem;

    overflow-x: auto;

    scrollbar-width: none;
}

.menu-jump__inner::-webkit-scrollbar {
    display: none;
}

.menu-jump__label {
    flex: 0 0 auto;

    padding-right: 1rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-jump a {
    position: relative;

    flex: 0 0 auto;

    padding:
        1.15rem
        0;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.menu-jump a::after {
    content: "";

    position: absolute;
    right: 100%;
    bottom: 0.7rem;
    left: 0;

    height: 3px;

    background: var(--gold);

    transition: right var(--ease);
}

.menu-jump a:hover::after,
.menu-jump a:focus-visible::after {
    right: 0;
}


/* ==========================================================================
   Menu Category Architecture
   ========================================================================== */

.menu-category {
    scroll-margin-top: 4rem;

    padding-block:
        clamp(4.5rem, 8vw, 7.5rem);

    border-bottom: 3px solid var(--ink);

    background: var(--paper);
    color: var(--ink);
}

.menu-category__grid {
    display: grid;

    grid-template-columns:
        minmax(16rem, 0.72fr)
        minmax(0, 1.28fr);

    align-items: start;

    gap: clamp(3rem, 8vw, 8rem);
}

.menu-category__heading {
    position: sticky;
    top: 6rem;

    min-width: 0;
}

.menu-category__number {
    margin-bottom: 1.7rem;

    color: rgba(23, 21, 18, 0.14);

    font-family: var(--font-display);
    font-size: clamp(5rem, 9vw, 9rem);
    font-weight: 900;
    line-height: 0.7;
}

.menu-category__heading .eyebrow {
    margin-bottom: 0.8rem;

    color: var(--red);
}

.menu-category__heading h2 {
    max-width: 8ch;

    margin-bottom: 1.2rem;

    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 900;
    line-height: 0.86;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.menu-category__heading > p:last-child {
    max-width: 26rem;

    margin-bottom: 0;

    color: var(--text-muted);
}


/* ==========================================================================
   Menu Items
   ========================================================================== */

.menu-list {
    border-top: 4px solid var(--ink);
}

.menu-item {
    padding:
        1.4rem
        0
        1.5rem;

    border-bottom: 1px solid var(--rule);
}

.menu-item__heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 1.5rem;

    align-items: baseline;
}

.menu-item h3 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 900;
    line-height: 0.95;

    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.menu-item__price {
    margin: 0;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.05em;
}

.menu-item > p:not(.menu-item__label) {
    max-width: 44rem;

    margin:
        0.55rem
        0
        0;

    color: var(--text-muted);

    font-size: 0.94rem;
}

.menu-item__label {
    margin-bottom: 0.55rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.menu-item--note {
    position: relative;

    padding-left: 1.25rem;

    border-left: 5px solid var(--gold);
}


/* ==========================================================================
   Dark Wings Category
   ========================================================================== */

.menu-category--dark {
    background: var(--ink);
    color: var(--paper-light);
}

.menu-category--dark .menu-category__number {
    color: rgba(242, 230, 207, 0.12);
}

.menu-category--dark .menu-category__heading .eyebrow,
.menu-category--dark .menu-item__price,
.menu-category--dark .menu-item__label {
    color: var(--gold);
}

.menu-category--dark .menu-category__heading > p:last-child,
.menu-category--dark .menu-item > p:not(.menu-item__label) {
    color: rgba(242, 230, 207, 0.68);
}

.menu-category--dark .menu-list {
    border-top-color: var(--paper-light);
}

.menu-category--dark .menu-item {
    border-bottom-color: rgba(242, 230, 207, 0.22);
}


/* ==========================================================================
   Green Main Event Category
   ========================================================================== */

.menu-category--green {
    background: var(--green);
    color: var(--paper-light);
}

.menu-category--green .menu-category__number {
    color: rgba(242, 230, 207, 0.12);
}

.menu-category--green .menu-category__heading .eyebrow,
.menu-category--green .menu-item__price {
    color: var(--gold);
}

.menu-category--green .menu-category__heading > p:last-child,
.menu-category--green .menu-item > p {
    color: rgba(242, 230, 207, 0.7);
}

.menu-category--green .menu-list {
    border-top-color: var(--paper-light);
}

.menu-category--green .menu-item {
    border-bottom-color: rgba(242, 230, 207, 0.22);
}


/* ==========================================================================
   Compact Sides
   ========================================================================== */

.menu-category--compact {
    background: var(--paper-light);
}

.menu-list--compact .menu-item {
    padding-block: 1rem;
}

.menu-list--compact .menu-item h3 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}


/* ==========================================================================
   Red Dessert Category
   ========================================================================== */

.menu-category--red {
    background: var(--red);
    color: var(--paper-light);
}

.menu-category--red .menu-category__number {
    color: rgba(242, 230, 207, 0.13);
}

.menu-category--red .menu-category__heading .eyebrow,
.menu-category--red .menu-item__price {
    color: var(--gold);
}

.menu-category--red .menu-category__heading > p:last-child,
.menu-category--red .menu-item > p {
    color: rgba(242, 230, 207, 0.76);
}

.menu-category--red .menu-list {
    border-top-color: var(--paper-light);
}

.menu-category--red .menu-item {
    border-bottom-color: rgba(242, 230, 207, 0.24);
}


/* ==========================================================================
   Menu Photo Break
   ========================================================================== */

.menu-photo-break {
    position: relative;

    min-height: clamp(28rem, 55vw, 48rem);

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    border-bottom: 4px solid var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.menu-photo-break__image {
    position: absolute;
    inset: 0;
}

.menu-photo-break__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(23, 21, 18, 0.05) 0%,
            rgba(23, 21, 18, 0.24) 45%,
            rgba(23, 21, 18, 0.9) 100%
        );
}

.menu-photo-break__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 58%;
}

.menu-photo-break__content {
    position: relative;
    z-index: 1;

    padding-bottom:
        clamp(2rem, 5vw, 4rem);
}

.menu-photo-break__content p {
    margin-bottom: 0.7rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.menu-photo-break__content h2 {
    max-width: 8ch;

    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 900;
    line-height: 0.84;

    text-transform: uppercase;
}


/* ==========================================================================
   Drinks CTA
   ========================================================================== */

.menu-drinks-cta {
    padding-block:
        clamp(5rem, 10vw, 9rem);

    border-bottom: 4px solid var(--ink);

    background: var(--gold);
    color: var(--ink);
}

.menu-drinks-cta__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(16rem, 0.55fr);

    gap:
        1rem
        clamp(3rem, 8vw, 8rem);

    align-items: end;
}

.menu-drinks-cta__inner .eyebrow {
    grid-column: 1 / -1;

    color: var(--red);
}

.menu-drinks-cta__inner h2 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(5rem, 10vw, 10rem);
    font-weight: 900;
    line-height: 0.78;

    text-transform: uppercase;
}

.menu-drinks-cta__inner > p:not(.eyebrow) {
    align-self: end;

    max-width: 30rem;

    margin-bottom: 1rem;
}

.menu-drinks-cta__inner .button {
    grid-column: 2;

    width: fit-content;

    margin-top: 0.5rem;
}


/* ==========================================================================
   Menu Page Responsive
   ========================================================================== */

@media (max-width: 980px) {
    .menu-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(17rem, 0.6fr);

        gap: 3rem;
    }

    .menu-category__grid {
        grid-template-columns:
            minmax(14rem, 0.65fr)
            minmax(0, 1.35fr);

        gap: 3rem;
    }

    .menu-category__heading {
        top: 5rem;
    }
}


@media (max-width: 760px) {
    .menu-hero {
        padding-block: 4rem;
    }

    .menu-hero::before {
        font-size: 10rem;
    }

    .menu-hero__grid {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .menu-hero__title {
        font-size: clamp(4rem, 17vw, 6.4rem);
    }

    .menu-hero__report {
        max-width: none;
    }

    .menu-jump__inner {
        gap: 1rem;
    }

    .menu-jump__label {
        display: none;
    }

    .menu-category {
        padding-block: 4rem;
    }

    .menu-category__grid {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .menu-category__heading {
        position: static;
    }

    .menu-category__number {
        margin-bottom: 1rem;

        font-size: 5rem;
    }

    .menu-category__heading h2 {
        max-width: 10ch;

        font-size: clamp(3.5rem, 15vw, 5.5rem);
    }

    .menu-item__heading {
        gap: 1rem;
    }

    .menu-photo-break {
        min-height: 34rem;
    }

    .menu-photo-break__content h2 {
        font-size: clamp(4rem, 17vw, 6.5rem);
    }

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

    .menu-drinks-cta__inner .eyebrow,
    .menu-drinks-cta__inner .button {
        grid-column: auto;
    }

    .menu-drinks-cta__inner h2 {
        font-size: clamp(4.5rem, 19vw, 7rem);
    }
}


@media (max-width: 480px) {
    .menu-hero__stats > div {
        grid-template-columns: 1fr;

        gap: 0.15rem;
    }

    .menu-hero__stats dd {
        text-align: left;
    }

    .menu-item__heading {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .menu-item h3 {
        font-size: 2rem;
    }

    .menu-photo-break {
        min-height: 28rem;
    }

    .menu-photo-break__content h2 {
        font-size: clamp(3.8rem, 18vw, 5.6rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - MENU KITCHEN SHOT
   ========================================================================== */

.menu-kitchen-shot {
    position: relative;

    min-height: clamp(28rem, 52vw, 43rem);

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    border-bottom: 4px solid var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.menu-kitchen-shot__image {
    position: absolute;
    inset: 0;
}

.menu-kitchen-shot__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.88) 0%,
            rgba(23, 21, 18, 0.56) 32%,
            rgba(23, 21, 18, 0.14) 66%,
            rgba(23, 21, 18, 0.05) 100%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.72) 0%,
            rgba(23, 21, 18, 0) 52%
        );
}

.menu-kitchen-shot__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.menu-kitchen-shot__content {
    position: relative;
    z-index: 1;

    width: 100%;

    padding-bottom:
        clamp(2.5rem, 6vw, 5rem);
}

.menu-kitchen-shot__content p {
    width: fit-content;

    margin:
        0
        0
        0.85rem;

    padding-bottom: 0.4rem;

    border-bottom: 2px solid var(--gold);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.menu-kitchen-shot__content h2 {
    max-width: 8.5ch;

    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(3.8rem, 7.5vw, 7.5rem);
    font-weight: 900;
    line-height: 0.84;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}


/* Menu Kitchen Shot - Responsive */

@media (max-width: 760px) {
    .menu-kitchen-shot {
        min-height: 32rem;
    }

    .menu-kitchen-shot__image::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.9) 0%,
                rgba(23, 21, 18, 0.58) 45%,
                rgba(23, 21, 18, 0.08) 100%
            );
    }

    .menu-kitchen-shot__image img {
        object-position: 62% center;
    }

    .menu-kitchen-shot__content h2 {
        max-width: 7.5ch;

        font-size: clamp(3.6rem, 16vw, 6rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - MENU BURGER EDITORIAL
   ========================================================================== */

.menu-burger-editorial {
    padding-block:
        clamp(4.5rem, 8vw, 7.5rem);

    overflow: hidden;

    border-bottom: 4px solid var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}

.menu-burger-editorial__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(18rem, 0.82fr);

    align-items: center;

    gap: clamp(3rem, 7vw, 7rem);
}

.menu-burger-editorial__figure {
    margin: 0;
}

.menu-burger-editorial__figure img {
    width: 100%;
    aspect-ratio: 16 / 10;

    display: block;

    object-fit: cover;
    object-position: center;

    border: 3px solid var(--ink);
}

.menu-burger-editorial__figure figcaption {
    display: flex;
    align-items: center;

    gap: 0.8rem;

    margin-top: 0.75rem;

    color: var(--text-muted);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.menu-burger-editorial__figure figcaption::before {
    content: "";

    width: 2rem;
    height: 2px;

    flex: 0 0 auto;

    background: var(--red);
}

.menu-burger-editorial__copy {
    position: relative;

    padding-top: 1.3rem;

    border-top: 5px solid var(--ink);
}

.menu-burger-editorial__copy .eyebrow {
    margin-bottom: 1rem;

    color: var(--red);
}

.menu-burger-editorial__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size: clamp(3.8rem, 6.5vw, 6.75rem);
    font-weight: 900;
    line-height: 0.84;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.menu-burger-editorial__copy > p:not(.eyebrow):not(.menu-burger-editorial__stamp) {
    max-width: 29rem;

    margin:
        0
        0
        1.6rem;

    color: var(--text-muted);

    font-size: 0.98rem;
    line-height: 1.7;
}

.menu-burger-editorial__stamp {
    width: fit-content;

    margin: 0;

    padding:
        0.5rem
        0.65rem;

    transform: rotate(-1deg);

    border: 2px solid var(--red);

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.59rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* Burger Editorial - Responsive */

@media (max-width: 840px) {
    .menu-burger-editorial__grid {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .menu-burger-editorial__figure {
        max-width: 46rem;
    }

    .menu-burger-editorial__copy {
        max-width: 42rem;
    }

    .menu-burger-editorial__copy h2 {
        max-width: 10ch;

        font-size: clamp(3.8rem, 11vw, 6rem);
    }
}


@media (max-width: 520px) {
    .menu-burger-editorial {
        padding-block: 3.5rem;
    }

    .menu-burger-editorial__figure img {
        aspect-ratio: 4 / 3;
    }

    .menu-burger-editorial__copy h2 {
        font-size: clamp(3.3rem, 15vw, 5rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - BURGER CINEMATIC FEATURE
   ========================================================================== */

.menu-burger-editorial {
    position: relative;

    min-height: clamp(34rem, 58vw, 48rem);

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    padding: 0;

    border-bottom: 4px solid var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.menu-burger-editorial__grid {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: inherit;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    padding-top:
        clamp(4rem, 8vw, 7rem);

    padding-bottom:
        clamp(3rem, 6vw, 5rem);
}

.menu-burger-editorial__figure {
    position: absolute;
    inset: 0;
    z-index: -1;

    margin: 0;
}

.menu-burger-editorial__figure::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.08) 0%,
            rgba(23, 21, 18, 0.14) 32%,
            rgba(23, 21, 18, 0.58) 62%,
            rgba(23, 21, 18, 0.94) 100%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.78) 0%,
            rgba(23, 21, 18, 0.08) 48%,
            rgba(23, 21, 18, 0.12) 100%
        );
}

.menu-burger-editorial__figure img {
    width: 100%;
    height: 100%;

    display: block;

    aspect-ratio: auto;

    object-fit: cover;
    object-position: center;

    border: 0;
}

.menu-burger-editorial__figure figcaption {
    position: absolute;
    z-index: 2;

    left: clamp(1.25rem, 4vw, 4rem);
    bottom: clamp(1.25rem, 3vw, 2.5rem);

    display: flex;
    align-items: center;

    gap: 0.75rem;

    margin: 0;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.menu-burger-editorial__figure figcaption::before {
    content: "";

    width: 2rem;
    height: 2px;

    flex: 0 0 auto;

    background: var(--gold);
}

.menu-burger-editorial__copy {
    width: min(100%, 34rem);

    margin-left: auto;

    padding:
        1.4rem
        0
        0;

    border-top: 4px solid var(--paper-light);

    color: var(--paper-light);
}

.menu-burger-editorial__copy .eyebrow {
    margin-bottom: 1rem;

    color: var(--gold);
}

.menu-burger-editorial__copy h2 {
    max-width: 8.5ch;

    margin:
        0
        0
        1.5rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size: clamp(4rem, 6.5vw, 6.8rem);
    font-weight: 900;
    line-height: 0.83;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.menu-burger-editorial__copy > p:not(.eyebrow):not(.menu-burger-editorial__stamp) {
    max-width: 29rem;

    margin:
        0
        0
        1.6rem;

    color: rgba(242, 230, 207, 0.78);

    font-size: 0.98rem;
    line-height: 1.65;
}

.menu-burger-editorial__stamp {
    width: fit-content;

    margin: 0;

    padding:
        0.5rem
        0.65rem;

    transform: rotate(-1deg);

    border: 2px solid var(--gold);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.59rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* Burger Cinematic Feature - Responsive */

@media (max-width: 760px) {
    .menu-burger-editorial {
        min-height: 39rem;
    }

    .menu-burger-editorial__grid {
        justify-content: flex-start;

        padding-top: 12rem;
        padding-bottom: 3rem;
    }

    .menu-burger-editorial__figure::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.96) 0%,
                rgba(23, 21, 18, 0.72) 45%,
                rgba(23, 21, 18, 0.08) 82%
            );
    }

    .menu-burger-editorial__figure img {
        object-position: 42% center;
    }

    .menu-burger-editorial__copy {
        width: 100%;
        max-width: 31rem;

        margin-left: 0;
    }

    .menu-burger-editorial__copy h2 {
        max-width: 9ch;

        font-size: clamp(3.8rem, 15vw, 6rem);
    }

    .menu-burger-editorial__figure figcaption {
        display: none;
    }
}

/* ==========================================================================
   BEER PRESSURE - BURGER HEADLINE REBALANCE
   ========================================================================== */

.menu-burger-editorial__copy h2 {
    max-width: 11ch;

    font-size: clamp(3.4rem, 5.4vw, 5.6rem);
    line-height: 0.88;
}

@media (max-width: 760px) {
    .menu-burger-editorial__copy h2 {
        max-width: 10ch;

        font-size: clamp(3.25rem, 12vw, 5rem);
        line-height: 0.88;
    }
}

/* ==========================================================================
   BEER PRESSURE - MENU DESSERT EDITORIAL
   ========================================================================== */

.menu-dessert-editorial {
    position: relative;

    min-height: clamp(34rem, 58vw, 47rem);

    display: flex;
    align-items: center;

    overflow: hidden;

    padding-block:
        clamp(3.5rem, 7vw, 6rem);

    border-bottom: 4px solid var(--ink);

    background: var(--ink);
    color: var(--ink);
}

.menu-dessert-editorial__figure {
    position: absolute;
    inset: 0;

    margin: 0;
}

.menu-dessert-editorial__figure::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.42) 0%,
            rgba(23, 21, 18, 0.18) 38%,
            rgba(23, 21, 18, 0.04) 70%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.42) 0%,
            rgba(23, 21, 18, 0) 48%
        );
}

.menu-dessert-editorial__figure img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 67% center;
}

.menu-dessert-editorial__content {
    position: relative;
    z-index: 2;

    width: 100%;
}

.menu-dessert-editorial__content::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: min(37rem, 52vw);

    background:
        repeating-linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.025) 0,
            rgba(23, 21, 18, 0.025) 1px,
            transparent 1px,
            transparent 28px
        ),
        var(--paper-light);

    border-top: 5px solid var(--ink);
    border-bottom: 3px solid var(--ink);

    box-shadow:
        12px 12px 0 rgba(23, 21, 18, 0.28);

    pointer-events: none;
}

.menu-dessert-editorial__content > * {
    position: relative;
    z-index: 1;

    width: min(32rem, 44vw);

    margin-left: 2.25rem;
}

.menu-dessert-editorial__figure-label {
    padding-top: 2rem;
    margin-bottom: 1.6rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.61rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.menu-dessert-editorial__content .eyebrow {
    margin-bottom: 0.8rem;

    color: var(--gold-dark, var(--gold));
}

.menu-dessert-editorial__content h2 {
    max-width: 7.5ch;

    margin-bottom: 1.35rem;

    font-family: var(--font-display);
    font-size: clamp(4rem, 6.8vw, 6.8rem);
    font-weight: 900;
    line-height: 0.84;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.menu-dessert-editorial__description {
    max-width: 27rem;

    margin-bottom: 1.6rem;

    color: var(--text-muted);

    font-size: 0.96rem;
    line-height: 1.65;
}

.menu-dessert-editorial__stamp {
    width: fit-content;

    margin-bottom: 2rem;

    padding:
        0.5rem
        0.65rem;

    transform: rotate(-1deg);

    border: 2px solid var(--red);

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* Dessert Editorial - Responsive */

@media (max-width: 820px) {
    .menu-dessert-editorial {
        min-height: 42rem;

        align-items: flex-end;

        padding-top: 15rem;
        padding-bottom: 2rem;
    }

    .menu-dessert-editorial__figure::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.74) 0%,
                rgba(23, 21, 18, 0.12) 58%,
                rgba(23, 21, 18, 0.02) 100%
            );
    }

    .menu-dessert-editorial__figure img {
        object-position: 64% center;
    }

    .menu-dessert-editorial__content::before {
        right: 1rem;
        left: 1rem;

        width: auto;

        box-shadow:
            8px 8px 0 rgba(23, 21, 18, 0.3);
    }

    .menu-dessert-editorial__content > * {
        width: auto;

        margin-right: 2.25rem;
        margin-left: 2.25rem;
    }

    .menu-dessert-editorial__content h2 {
        max-width: 9ch;

        font-size: clamp(3.7rem, 13vw, 5.8rem);
    }
}


@media (max-width: 520px) {
    .menu-dessert-editorial {
        min-height: 40rem;

        padding-top: 13rem;
    }

    .menu-dessert-editorial__content::before {
        right: 0.75rem;
        left: 0.75rem;
    }

    .menu-dessert-editorial__content > * {
        margin-right: 1.6rem;
        margin-left: 1.6rem;
    }

    .menu-dessert-editorial__content h2 {
        font-size: clamp(3.4rem, 15vw, 5rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - DESSERT FULL BLEED OVERRIDE
   ========================================================================== */

.menu-dessert-editorial {
    min-height: clamp(34rem, 56vw, 46rem);

    align-items: flex-end;

    padding-block: 0;

    color: var(--paper-light);
}

.menu-dessert-editorial__figure::after {
    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.94) 0%,
            rgba(23, 21, 18, 0.76) 30%,
            rgba(23, 21, 18, 0.38) 55%,
            rgba(23, 21, 18, 0.06) 82%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.72) 0%,
            rgba(23, 21, 18, 0.05) 54%
        );
}

.menu-dessert-editorial__figure img {
    object-position: 68% center;
}

.menu-dessert-editorial__content {
    padding-bottom:
        clamp(3rem, 6vw, 5rem);
}

.menu-dessert-editorial__content::before {
    display: none;
}

.menu-dessert-editorial__content > * {
    width: min(100%, 34rem);

    margin-left: 0;
}

.menu-dessert-editorial__figure-label {
    width: fit-content;

    padding-top: 0;
    padding-bottom: 0.45rem;

    margin-bottom: 1.2rem;

    border-bottom: 2px solid var(--gold);

    color: var(--gold);
}

.menu-dessert-editorial__content .eyebrow {
    color: var(--gold);
}

.menu-dessert-editorial__content h2 {
    max-width: 8.5ch;

    margin-bottom: 1.35rem;

    color: var(--paper-light);

    font-size: clamp(3.8rem, 6vw, 6rem);
    line-height: 0.86;
}

.menu-dessert-editorial__description {
    max-width: 28rem;

    color: rgba(242, 230, 207, 0.82);
}

.menu-dessert-editorial__stamp {
    border-color: var(--gold);

    color: var(--gold);
}


/* Dessert Full Bleed - Responsive */

@media (max-width: 820px) {
    .menu-dessert-editorial {
        min-height: 40rem;

        padding-top: 14rem;
        padding-bottom: 0;
    }

    .menu-dessert-editorial__figure::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.96) 0%,
                rgba(23, 21, 18, 0.72) 48%,
                rgba(23, 21, 18, 0.08) 82%
            );
    }

    .menu-dessert-editorial__figure img {
        object-position: 67% center;
    }

    .menu-dessert-editorial__content {
        padding-bottom: 3rem;
    }

    .menu-dessert-editorial__content > * {
        width: min(100%, 32rem);

        margin-right: 0;
        margin-left: 0;
    }

    .menu-dessert-editorial__content h2 {
        max-width: 9ch;

        font-size: clamp(3.6rem, 13vw, 5.5rem);
    }
}


@media (max-width: 520px) {
    .menu-dessert-editorial {
        min-height: 38rem;

        padding-top: 12rem;
    }

    .menu-dessert-editorial__content > * {
        margin-right: 0;
        margin-left: 0;
    }

    .menu-dessert-editorial__content h2 {
        font-size: clamp(3.3rem, 15vw, 4.8rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - DESSERT COPY POSITION
   ========================================================================== */

.menu-dessert-editorial__content > * {
    margin-left: clamp(3rem, 7vw, 8.5rem);
}

@media (min-width: 1500px) {
    .menu-dessert-editorial__content > * {
        margin-left: clamp(6rem, 9vw, 10rem);
    }
}

@media (max-width: 820px) {
    .menu-dessert-editorial__content > * {
        margin-left: 0;
    }
}

/* ==========================================================================
   BEER PRESSURE - MENU KITCHEN SHOT POSITION
   ========================================================================== */

.menu-kitchen-shot__content {
    padding-left: clamp(2.5rem, 6vw, 7rem);
}

@media (min-width: 1500px) {
    .menu-kitchen-shot__content {
        padding-left: clamp(4rem, 8vw, 9rem);
    }
}

@media (max-width: 760px) {
    .menu-kitchen-shot__content {
        padding-left: 0;
    }
}

/* ==========================================================================
   BEER PRESSURE - MENU DRINKS CTA PHOTO
   ========================================================================== */

.menu-drinks-cta {
    position: relative;

    min-height: clamp(31rem, 43vw, 38rem);

    display: flex;
    align-items: center;

    overflow: hidden;

    padding-block:
        clamp(4.5rem, 8vw, 7rem);
}

.menu-drinks-cta__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    width: 43%;

    margin: 0;

    overflow: hidden;

    border-left: 4px solid var(--ink);

    background: var(--ink);
}

.menu-drinks-cta__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.28) 0%,
            rgba(23, 21, 18, 0.06) 28%,
            rgba(23, 21, 18, 0) 60%
        );
}

.menu-drinks-cta__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.92)
        contrast(1.04);
}

.menu-drinks-cta__inner {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 0;

    padding-right: 48%;
}

.menu-drinks-cta__inner .eyebrow {
    grid-column: auto;

    margin-bottom: 1.15rem;
}

.menu-drinks-cta__inner h2 {
    max-width: 7ch;

    margin:
        0
        0
        1.45rem;

    font-size: clamp(5.5rem, 10vw, 10rem);
    line-height: 0.8;
}

.menu-drinks-cta__inner > p:not(.eyebrow) {
    max-width: 31rem;

    margin:
        0
        0
        1.6rem;

    font-size: 1rem;
    line-height: 1.65;
}

.menu-drinks-cta__inner .button {
    grid-column: auto;

    width: fit-content;

    margin-top: 0;
}


/* Drinks CTA Photo - Wide Screens */

@media (min-width: 1500px) {
    .menu-drinks-cta__media {
        width: 42%;
    }

    .menu-drinks-cta__inner {
        padding-right: 46%;
    }

    .menu-drinks-cta__inner h2 {
        font-size: clamp(6rem, 8vw, 9rem);
    }
}


/* Drinks CTA Photo - Tablet */

@media (max-width: 900px) {
    .menu-drinks-cta {
        min-height: 34rem;
    }

    .menu-drinks-cta__media {
        width: 45%;
    }

    .menu-drinks-cta__inner {
        padding-right: 49%;
    }

    .menu-drinks-cta__inner h2 {
        font-size: clamp(4.8rem, 11vw, 7rem);
    }
}


/* Drinks CTA Photo - Mobile */

@media (max-width: 700px) {
    .menu-drinks-cta {
        min-height: 0;

        display: block;

        padding:
            0
            0
            4rem;
    }

    .menu-drinks-cta__media {
        position: relative;

        width: 100%;
        height: 20rem;

        border-left: 0;
        border-bottom: 4px solid var(--ink);
    }

    .menu-drinks-cta__media::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.3) 0%,
                rgba(23, 21, 18, 0) 48%
            );
    }

    .menu-drinks-cta__media img {
        object-position: 60% center;
    }

    .menu-drinks-cta__inner {
        padding-top: 3.5rem;
        padding-right: var(--container-padding, 1rem);
    }

    .menu-drinks-cta__inner h2 {
        max-width: none;

        font-size: clamp(4.5rem, 20vw, 7rem);
    }

    .menu-drinks-cta__inner > p:not(.eyebrow) {
        max-width: 30rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - DRINKS CTA CONTENT POSITION
   ========================================================================== */

.menu-drinks-cta__inner {
    padding-left: clamp(2.5rem, 6vw, 7rem);
}

@media (min-width: 1500px) {
    .menu-drinks-cta__inner {
        padding-left: clamp(5rem, 8vw, 10rem);
    }
}

@media (max-width: 700px) {
    .menu-drinks-cta__inner {
        padding-left: clamp(1.25rem, 5vw, 2rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - DRINKS CTA GREEN TREATMENT
   ========================================================================== */

.menu-drinks-cta {
    background: var(--green);
    color: var(--paper-light);
}

.menu-drinks-cta__media {
    border-left-color: var(--gold);
}

.menu-drinks-cta__inner .eyebrow {
    color: var(--gold);
}

.menu-drinks-cta__inner h2 {
    color: var(--paper-light);
}

.menu-drinks-cta__inner > p:not(.eyebrow) {
    color: rgba(242, 230, 207, 0.82);
}

.menu-drinks-cta__inner .button {
    border-color: var(--gold);

    background: var(--gold);
    color: var(--ink);
}

.menu-drinks-cta__inner .button:hover,
.menu-drinks-cta__inner .button:focus-visible {
    border-color: var(--paper-light);

    background: var(--paper-light);
    color: var(--ink);
}

@media (max-width: 700px) {
    .menu-drinks-cta__media {
        border-bottom-color: var(--gold);
    }
}

/* ==========================================================================
   BEER PRESSURE - DRINKS CTA FULL BLEED
   ========================================================================== */

.menu-drinks-cta {
    position: relative;

    min-height: clamp(32rem, 50vw, 43rem);

    overflow: hidden;

    background: var(--ink);
    color: var(--paper-light);
}

.menu-drinks-cta__media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    border: 0;

    background: var(--ink);
}

.menu-drinks-cta__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.96) 0%,
            rgba(23, 21, 18, 0.84) 28%,
            rgba(23, 21, 18, 0.48) 52%,
            rgba(23, 21, 18, 0.12) 76%,
            rgba(23, 21, 18, 0.04) 100%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.72) 0%,
            rgba(23, 21, 18, 0.04) 55%
        );
}

.menu-drinks-cta__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 68% center;

    filter:
        saturate(0.92)
        contrast(1.04);
}

.menu-drinks-cta__inner {
    position: relative;
    z-index: 2;

    width: 100%;

    padding-right: 0;
    padding-left: clamp(3rem, 7vw, 8rem);
}

.menu-drinks-cta__inner .eyebrow {
    width: fit-content;

    margin-bottom: 1.1rem;
    padding-bottom: 0.45rem;

    border-bottom: 2px solid var(--gold);

    color: var(--gold);
}

.menu-drinks-cta__inner h2 {
    max-width: 7ch;

    margin:
        0
        0
        1.4rem;

    color: var(--paper-light);

    font-size: clamp(5rem, 8vw, 8.5rem);
    line-height: 0.82;
}

.menu-drinks-cta__inner > p:not(.eyebrow) {
    max-width: 30rem;

    margin-bottom: 1.7rem;

    color: rgba(242, 230, 207, 0.82);

    line-height: 1.65;
}

.menu-drinks-cta__inner .button {
    border: 2px solid var(--gold);

    background: rgba(23, 21, 18, 0.55);
    color: var(--gold);
}

.menu-drinks-cta__inner .button:hover,
.menu-drinks-cta__inner .button:focus-visible {
    border-color: var(--paper-light);

    background: var(--paper-light);
    color: var(--ink);
}


/* Drinks CTA Full Bleed - Wide Screens */

@media (min-width: 1500px) {
    .menu-drinks-cta__inner {
        padding-left: clamp(6rem, 9vw, 11rem);
    }

    .menu-drinks-cta__inner h2 {
        font-size: clamp(5.5rem, 7vw, 8rem);
    }
}


/* Drinks CTA Full Bleed - Mobile */

@media (max-width: 700px) {
    .menu-drinks-cta {
        min-height: 38rem;

        display: flex;
        align-items: flex-end;

        padding-bottom: 3.5rem;
    }

    .menu-drinks-cta__media {
        position: absolute;

        width: 100%;
        height: 100%;

        border: 0;
    }

    .menu-drinks-cta__media::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.96) 0%,
                rgba(23, 21, 18, 0.72) 48%,
                rgba(23, 21, 18, 0.08) 82%
            );
    }

    .menu-drinks-cta__media img {
        object-position: 63% center;
    }

    .menu-drinks-cta__inner {
        padding-top: 12rem;
        padding-right: clamp(1.25rem, 5vw, 2rem);
        padding-left: clamp(1.25rem, 5vw, 2rem);
    }

    .menu-drinks-cta__inner h2 {
        max-width: none;

        font-size: clamp(4.5rem, 20vw, 7rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - DRINKS PAGE
   ========================================================================== */


/* ==========================================================================
   Drinks Hero
   ========================================================================== */

.drinks-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom: 4px solid var(--ink);

    background:
        repeating-linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.025) 0,
            rgba(23, 21, 18, 0.025) 1px,
            transparent 1px,
            transparent 42px
        ),
        var(--paper);

    color: var(--ink);
}

.drinks-hero::before {
    content: "DRINKS / DRINKS / DRINKS";

    position: absolute;
    top: -1.2rem;
    left: 0;

    width: 100%;

    overflow: hidden;

    color: rgba(23, 21, 18, 0.05);

    font-family: var(--font-display);
    font-size: clamp(8rem, 17vw, 17rem);
    font-weight: 900;
    line-height: 0.8;

    white-space: nowrap;
    text-transform: uppercase;

    pointer-events: none;
}

.drinks-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(21rem, 0.85fr);

    gap: clamp(3rem, 8vw, 8rem);

    align-items: end;
}

.drinks-hero__copy {
    min-width: 0;
}

.drinks-hero__copy .eyebrow {
    width: fit-content;

    margin-bottom: 1rem;
    padding-bottom: 0.4rem;

    border-bottom: 2px solid var(--red);

    color: var(--red);
}

.drinks-hero__title {
    max-width: 9ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size: clamp(4.5rem, 8vw, 8rem);
    font-weight: 900;
    line-height: 0.84;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.drinks-hero__intro {
    max-width: 42rem;

    margin:
        0
        0
        1.8rem;

    color: var(--text-muted);

    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
}

.drinks-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        1rem
        1.5rem;
}


/* ==========================================================================
   Tonight's Scoreboard
   ========================================================================== */

.drinks-scoreboard {
    position: relative;

    overflow: hidden;

    border:
        5px
        solid
        var(--ink);

    background: var(--green);
    color: var(--paper-light);

    box-shadow:
        10px
        10px
        0
        var(--gold);
}

.drinks-scoreboard::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.06;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 5px,
            var(--paper-light) 5px,
            var(--paper-light) 6px
        );

    pointer-events: none;
}

.drinks-scoreboard__top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        3px
        solid
        var(--paper-light);

    background: var(--ink);
}

.drinks-scoreboard__top p {
    margin: 0;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.drinks-scoreboard__top span {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    color: var(--paper-light);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.drinks-scoreboard__top span::before {
    content: "";

    width: 0.5rem;
    height: 0.5rem;

    border-radius: 50%;

    background: var(--red);
}

.drinks-scoreboard__stats {
    position: relative;
    z-index: 1;

    margin: 0;
}

.drinks-scoreboard__stats > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.28);
}

.drinks-scoreboard__stats dt,
.drinks-scoreboard__stats dd {
    margin: 0;

    font-family: var(--font-mono);

    text-transform: uppercase;
}

.drinks-scoreboard__stats dt {
    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.06em;
}

.drinks-scoreboard__stats dd {
    color: var(--gold);

    font-size: clamp(1.4rem, 2.5vw, 2.25rem);
    font-weight: 800;

    line-height: 1;
}

.drinks-scoreboard__status {
    position: relative;
    z-index: 1;

    margin: 0;

    padding:
        1rem
        1.2rem;

    background: var(--gold);
    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.61rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ==========================================================================
   Draft Pour Feature
   ========================================================================== */

.drinks-pour-feature {
    position: relative;

    min-height: clamp(34rem, 58vw, 48rem);

    display: flex;
    align-items: center;

    overflow: hidden;

    border-bottom: 4px solid var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.drinks-pour-feature__media {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 48%;

    margin: 0;
}

.drinks-pour-feature__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.68) 0%,
            rgba(23, 21, 18, 0.08) 38%,
            rgba(23, 21, 18, 0) 70%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.35) 0%,
            transparent 55%
        );
}

.drinks-pour-feature__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.95)
        contrast(1.05);
}

.drinks-pour-feature__content {
    position: relative;
    z-index: 2;

    padding-right: 52%;
}

.drinks-pour-feature__figure {
    width: fit-content;

    margin:
        0
        0
        1.2rem;

    padding-bottom: 0.45rem;

    border-bottom: 2px solid var(--gold);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.drinks-pour-feature__content .eyebrow {
    margin-bottom: 0.8rem;

    color: var(--gold);
}

.drinks-pour-feature__content h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.4rem;

    font-family: var(--font-display);
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.84;

    text-transform: uppercase;
}

.drinks-pour-feature__content > p:last-child {
    max-width: 31rem;

    margin: 0;

    color: rgba(242, 230, 207, 0.76);

    line-height: 1.7;
}


/* ==========================================================================
   Drinks Jump Bar
   ========================================================================== */

.drinks-jump {
    position: sticky;
    top: 0;
    z-index: 40;

    border-bottom: 2px solid var(--gold);

    background: var(--ink);
}

.drinks-jump__inner {
    min-height: 3.8rem;

    display: flex;
    align-items: center;

    gap: 1.4rem;

    overflow-x: auto;

    scrollbar-width: none;
}

.drinks-jump__inner::-webkit-scrollbar {
    display: none;
}

.drinks-jump__label {
    flex: 0 0 auto;

    padding-right: 1rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.drinks-jump a {
    position: relative;

    flex: 0 0 auto;

    padding-block: 1.1rem;

    color: var(--paper-light);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.035em;
    text-decoration: none;
    text-transform: uppercase;
}

.drinks-jump a::after {
    content: "";

    position: absolute;
    right: 100%;
    bottom: 0.65rem;
    left: 0;

    height: 3px;

    background: var(--gold);

    transition: right var(--ease);
}

.drinks-jump a:hover::after,
.drinks-jump a:focus-visible::after {
    right: 0;
}


/* ==========================================================================
   Drinks Category Framework
   ========================================================================== */

.drinks-category {
    scroll-margin-top: 4rem;

    padding-block:
        clamp(4.5rem, 8vw, 7.5rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--paper);
    color: var(--ink);
}

.drinks-category__grid {
    display: grid;

    grid-template-columns:
        minmax(15rem, 0.62fr)
        minmax(0, 1.38fr);

    gap: clamp(3rem, 7vw, 7rem);

    align-items: start;
}

.drinks-category__heading {
    position: sticky;
    top: 6rem;
}

.drinks-category__number {
    margin-bottom: 1.4rem;

    color: rgba(23, 21, 18, 0.13);

    font-family: var(--font-display);
    font-size: clamp(5rem, 9vw, 9rem);
    font-weight: 900;
    line-height: 0.7;
}

.drinks-category__heading .eyebrow {
    margin-bottom: 0.7rem;

    color: var(--red);
}

.drinks-category__heading h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.1rem;

    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 900;
    line-height: 0.85;

    text-transform: uppercase;
}

.drinks-category__heading > p:last-child {
    max-width: 25rem;

    margin: 0;

    color: var(--text-muted);

    line-height: 1.7;
}


/* ==========================================================================
   Tap Board
   ========================================================================== */

.tap-board {
    border:
        4px
        solid
        var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.tap-board__header,
.tap-row {
    display: grid;

    grid-template-columns:
        minmax(15rem, 1.5fr)
        minmax(9rem, 0.8fr)
        5rem
        4.5rem;

    align-items: center;

    gap: 1rem;
}

.tap-board__header {
    padding:
        0.8rem
        1rem;

    border-bottom:
        3px
        solid
        var(--gold);

    background: var(--green);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tap-row {
    padding:
        1rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}

.tap-row:last-child {
    border-bottom: 0;
}

.tap-row:hover {
    background: rgba(212, 154, 42, 0.08);
}

.tap-row__name {
    display: flex;
    align-items: center;

    gap: 0.8rem;
}

.tap-row__number {
    min-width: 2rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;
}

.tap-row h3 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 900;
    line-height: 0.95;

    text-transform: uppercase;
}

.tap-row__style,
.tap-row__abv,
.tap-row__price {
    margin: 0;

    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.tap-row__style {
    color: rgba(242, 230, 207, 0.68);
}

.tap-row__abv {
    color: var(--paper-light);
}

.tap-row__price {
    color: var(--gold);

    text-align: right;
}


/* ==========================================================================
   Happy Hour Scoreboard
   ========================================================================== */

.drinks-happy-hour {
    overflow: hidden;

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--red);
    color: var(--paper-light);
}

.drinks-happy-hour__grid {
    display: grid;

    grid-template-columns:
        minmax(18rem, 0.75fr)
        minmax(0, 1.25fr);

    min-height: clamp(31rem, 46vw, 40rem);
}

.drinks-happy-hour__time {
    display: grid;
    align-content: center;
    justify-items: center;

    padding:
        clamp(3rem, 6vw, 5rem);

    border-right:
        4px
        solid
        var(--ink);

    background: var(--gold);
    color: var(--ink);

    text-align: center;
}

.drinks-happy-hour__time p {
    margin:
        0
        0
        0.4rem;

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.drinks-happy-hour__time strong {
    font-family: var(--font-display);
    font-size: clamp(8rem, 16vw, 15rem);
    font-weight: 900;
    line-height: 0.72;
}

.drinks-happy-hour__time span {
    margin-top: 1rem;

    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.drinks-happy-hour__copy {
    align-self: center;

    padding:
        clamp(3rem, 7vw, 7rem);
}

.drinks-happy-hour__copy .eyebrow {
    color: var(--gold);
}

.drinks-happy-hour__copy h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.7rem;

    font-family: var(--font-display);
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.84;

    text-transform: uppercase;
}

.drinks-happy-hour__deals {
    max-width: 33rem;

    margin: 0;
    padding: 0;

    list-style: none;

    border-top:
        2px
        solid
        var(--paper-light);
}

.drinks-happy-hour__deals li {
    padding-block: 0.8rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.28);

    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}


/* ==========================================================================
   Drinks Lists
   ========================================================================== */

.drinks-list {
    border-top:
        4px
        solid
        var(--ink);
}

.drink-item {
    padding-block:
        1.35rem;

    border-bottom:
        1px
        solid
        var(--rule);
}

.drink-item__heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 1.5rem;

    align-items: baseline;
}

.drink-item h3 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 900;
    line-height: 0.95;

    text-transform: uppercase;
}

.drink-item__price {
    margin: 0;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
}

.drink-item > p:not(.drink-item__ingredients) {
    max-width: 40rem;

    margin:
        0.5rem
        0
        0;

    color: var(--text-muted);
}

.drink-item__ingredients {
    margin:
        0.5rem
        0
        0;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}


/* ==========================================================================
   Cocktails
   ========================================================================== */

.drinks-category--cocktails {
    background: var(--green);
    color: var(--paper-light);
}

.drinks-category--cocktails .drinks-category__number {
    color: rgba(242, 230, 207, 0.12);
}

.drinks-category--cocktails .drinks-category__heading .eyebrow,
.drinks-category--cocktails .drink-item__price,
.drinks-category--cocktails .drink-item__ingredients {
    color: var(--gold);
}

.drinks-category--cocktails .drinks-category__heading > p:last-child,
.drinks-category--cocktails .drink-item > p:not(.drink-item__ingredients) {
    color: rgba(242, 230, 207, 0.72);
}

.drinks-category--cocktails .drinks-list {
    border-top-color: var(--paper-light);
}

.drinks-category--cocktails .drink-item {
    border-bottom-color: rgba(242, 230, 207, 0.22);
}


/* ==========================================================================
   Bar Tab Feature
   ========================================================================== */

.bar-tab-feature {
    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 30px,
            rgba(23, 21, 18, 0.035) 30px,
            rgba(23, 21, 18, 0.035) 31px
        ),
        var(--paper-light);
}

.bar-tab-feature__inner {
    display: grid;

    grid-template-columns:
        minmax(18rem, 0.75fr)
        minmax(0, 1.25fr);

    align-items: center;

    gap: clamp(3rem, 8vw, 8rem);
}

.bar-tab-feature__ticket {
    position: relative;

    padding:
        1.5rem;

    border:
        3px
        solid
        var(--ink);

    background: var(--paper);

    box-shadow:
        9px
        9px
        0
        var(--ink);

    transform: rotate(-1deg);
}

.bar-tab-feature__ticket::before {
    content: "BEER PRESSURE";

    display: block;

    margin-bottom: 1rem;

    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 900;

    text-align: center;
    text-transform: uppercase;
}

.bar-tab-feature__label {
    margin:
        0
        0
        1rem;

    padding-bottom: 0.8rem;

    border-bottom:
        2px
        dashed
        var(--ink);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.bar-tab-feature__line,
.bar-tab-feature__total {
    display: flex;
    justify-content: space-between;

    gap: 1rem;

    padding-block: 0.75rem;

    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;

    text-transform: uppercase;
}

.bar-tab-feature__line {
    border-bottom:
        1px
        solid
        var(--rule);
}

.bar-tab-feature__line strong {
    color: var(--red);
}

.bar-tab-feature__total {
    margin-top: 1rem;
    padding-top: 1rem;

    border-top:
        3px
        solid
        var(--ink);

    font-weight: 800;
}

.bar-tab-feature__copy .eyebrow {
    color: var(--red);
}

.bar-tab-feature__copy h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.2rem;

    font-family: var(--font-display);
    font-size: clamp(4.5rem, 8vw, 8rem);
    font-weight: 900;
    line-height: 0.82;

    text-transform: uppercase;
}

.bar-tab-feature__copy > p:last-child {
    max-width: 31rem;

    margin: 0;

    color: var(--text-muted);

    line-height: 1.7;
}


/* ==========================================================================
   Shots Fired
   ========================================================================== */

.drinks-category--shots {
    background: var(--ink);
    color: var(--paper-light);
}

.drinks-category--shots .drinks-category__number {
    color: rgba(242, 230, 207, 0.1);
}

.drinks-category--shots .drinks-category__heading .eyebrow {
    color: var(--gold);
}

.drinks-category--shots .drinks-category__heading > p:last-child {
    color: rgba(242, 230, 207, 0.68);
}

.shots-board {
    border-top:
        4px
        solid
        var(--gold);
}

.shot-item {
    display: grid;

    grid-template-columns:
        3rem
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 1rem;

    padding-block: 1.1rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.22);
}

.shot-item__number {
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;
}

.shot-item h3 {
    margin:
        0
        0
        0.15rem;

    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 900;
    line-height: 0.95;

    text-transform: uppercase;
}

.shot-item p {
    margin: 0;

    color: rgba(242, 230, 207, 0.62);

    font-size: 0.8rem;
}

.shot-item > strong {
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.72rem;
}


/* ==========================================================================
   Responsible Section
   ========================================================================== */

.responsible-section {
    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}

.responsible-section__grid {
    display: grid;

    grid-template-columns:
        minmax(16rem, 0.7fr)
        minmax(0, 1.3fr);

    gap: clamp(3rem, 8vw, 8rem);
}

.responsible-section__copy .eyebrow {
    color: var(--green);
}

.responsible-section__copy h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.2rem;

    font-family: var(--font-display);
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.84;

    text-transform: uppercase;
}

.responsible-section__copy > p:last-child {
    max-width: 27rem;

    margin: 0;

    color: var(--text-muted);

    line-height: 1.7;
}

.responsible-board {
    border-top:
        4px
        solid
        var(--green);
}

.responsible-item {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 1rem;

    align-items: center;

    padding-block: 1rem;

    border-bottom:
        1px
        solid
        var(--rule);
}

.responsible-item h3 {
    margin:
        0
        0
        0.2rem;

    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;

    text-transform: uppercase;
}

.responsible-item p {
    margin: 0;

    color: var(--text-muted);

    font-size: 0.82rem;
}

.responsible-item strong {
    color: var(--green);

    font-family: var(--font-mono);
    font-size: 0.72rem;
}


/* ==========================================================================
   Closing CTA
   ========================================================================== */

.drinks-closing {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 10vw, 9rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--gold);
    color: var(--ink);
}

.drinks-closing::after {
    content: "FOOD / FOOD / FOOD";

    position: absolute;
    right: -1rem;
    bottom: -2rem;

    color: rgba(23, 21, 18, 0.08);

    font-family: var(--font-display);
    font-size: clamp(7rem, 16vw, 16rem);
    font-weight: 900;
    line-height: 0.75;

    white-space: nowrap;
    text-transform: uppercase;

    pointer-events: none;
}

.drinks-closing__inner {
    position: relative;
    z-index: 1;
}

.drinks-closing__inner .eyebrow {
    color: var(--red);
}

.drinks-closing__inner h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.3rem;

    font-family: var(--font-display);
    font-size: clamp(5rem, 9vw, 9rem);
    font-weight: 900;
    line-height: 0.8;

    text-transform: uppercase;
}

.drinks-closing__inner > p:not(.eyebrow) {
    max-width: 33rem;

    margin-bottom: 1.7rem;

    line-height: 1.65;
}


/* ==========================================================================
   Drinks Page Responsive
   ========================================================================== */

@media (max-width: 980px) {
    .drinks-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(18rem, 0.7fr);

        gap: 3rem;
    }

    .drinks-category__grid {
        grid-template-columns:
            minmax(13rem, 0.55fr)
            minmax(0, 1.45fr);

        gap: 3rem;
    }

    .tap-board__header,
    .tap-row {
        grid-template-columns:
            minmax(12rem, 1.4fr)
            minmax(7rem, 0.8fr)
            4rem
            4rem;
    }
}


@media (max-width: 780px) {
    .drinks-hero {
        padding-block: 4rem;
    }

    .drinks-hero__grid {
        grid-template-columns: 1fr;

        gap: 2.75rem;
    }

    .drinks-scoreboard {
        max-width: 34rem;
    }

    .drinks-pour-feature {
        min-height: 42rem;

        align-items: flex-end;
    }

    .drinks-pour-feature__media {
        width: 100%;
    }

    .drinks-pour-feature__media::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.96) 0%,
                rgba(23, 21, 18, 0.62) 48%,
                rgba(23, 21, 18, 0.06) 82%
            );
    }

    .drinks-pour-feature__media img {
        object-position: center 38%;
    }

    .drinks-pour-feature__content {
        padding-top: 14rem;
        padding-right: var(--container-padding, 1rem);
        padding-bottom: 3rem;
    }

    .drinks-category__grid,
    .responsible-section__grid,
    .bar-tab-feature__inner {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .drinks-category__heading {
        position: static;
    }

    .drinks-category__number {
        margin-bottom: 1rem;

        font-size: 5rem;
    }

    .tap-board {
        overflow-x: auto;
    }

    .tap-board__header,
    .tap-row {
        min-width: 42rem;
    }

    .drinks-happy-hour__grid {
        grid-template-columns: 1fr;
    }

    .drinks-happy-hour__time {
        min-height: 23rem;

        border-right: 0;
        border-bottom:
            4px
            solid
            var(--ink);
    }

    .drinks-happy-hour__time strong {
        font-size: clamp(8rem, 30vw, 12rem);
    }

    .bar-tab-feature__ticket {
        max-width: 34rem;
    }
}


@media (max-width: 560px) {
    .drinks-hero__title {
        font-size: clamp(4rem, 17vw, 6rem);
    }

    .drinks-hero__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .drinks-jump__label {
        display: none;
    }

    .drinks-scoreboard {
        box-shadow:
            6px
            6px
            0
            var(--gold);
    }

    .drinks-pour-feature__content h2 {
        font-size: clamp(3.8rem, 16vw, 5.6rem);
    }

    .drinks-category {
        padding-block: 4rem;
    }

    .drinks-category__heading h2,
    .responsible-section__copy h2 {
        font-size: clamp(3.6rem, 15vw, 5.4rem);
    }

    .drink-item h3 {
        font-size: 2rem;
    }

    .shot-item {
        grid-template-columns:
            2rem
            minmax(0, 1fr)
            auto;
    }

    .bar-tab-feature__copy h2 {
        font-size: clamp(4rem, 17vw, 6rem);
    }

    .drinks-closing__inner h2 {
        font-size: clamp(4.5rem, 20vw, 7rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - COCKTAIL EDITORIAL FEATURE
   ========================================================================== */

.cocktail-editorial {
    position: relative;

    min-height: clamp(34rem, 56vw, 47rem);

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    border-bottom: 4px solid var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.cocktail-editorial__media {
    position: absolute;
    inset: 0;

    margin: 0;
}

.cocktail-editorial__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.95) 0%,
            rgba(23, 21, 18, 0.82) 28%,
            rgba(23, 21, 18, 0.43) 55%,
            rgba(23, 21, 18, 0.08) 80%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.72) 0%,
            rgba(23, 21, 18, 0.05) 54%
        );
}

.cocktail-editorial__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 68% center;

    filter:
        saturate(0.96)
        contrast(1.04);
}

.cocktail-editorial__content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-left:
        clamp(3rem, 7vw, 8rem);
}

.cocktail-editorial__figure {
    width: fit-content;

    margin:
        0
        0
        1.15rem;

    padding-bottom: 0.45rem;

    border-bottom: 2px solid var(--gold);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.61rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.cocktail-editorial__content .eyebrow {
    margin-bottom: 0.8rem;

    color: var(--gold);
}

.cocktail-editorial__content h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.35rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size: clamp(3.8rem, 6vw, 6.2rem);
    font-weight: 900;
    line-height: 0.86;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.cocktail-editorial__content > p:not(.cocktail-editorial__figure):not(.eyebrow):not(.cocktail-editorial__stamp) {
    max-width: 29rem;

    margin:
        0
        0
        1.6rem;

    color: rgba(242, 230, 207, 0.8);

    font-size: 0.98rem;
    line-height: 1.65;
}

.cocktail-editorial__stamp {
    width: fit-content;

    margin: 0;

    padding:
        0.5rem
        0.65rem;

    transform: rotate(-1deg);

    border: 2px solid var(--red);

    background: rgba(23, 21, 18, 0.38);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* Cocktail Editorial - Wide Screens */

@media (min-width: 1500px) {
    .cocktail-editorial__content {
        padding-left:
            clamp(6rem, 9vw, 11rem);
    }

    .cocktail-editorial__content h2 {
        font-size: clamp(4rem, 5.5vw, 6rem);
    }
}


/* Cocktail Editorial - Tablet */

@media (max-width: 820px) {
    .cocktail-editorial {
        min-height: 41rem;

        padding-top: 14rem;
    }

    .cocktail-editorial__media::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.97) 0%,
                rgba(23, 21, 18, 0.72) 48%,
                rgba(23, 21, 18, 0.08) 82%
            );
    }

    .cocktail-editorial__media img {
        object-position: 66% center;
    }

    .cocktail-editorial__content {
        padding-right:
            clamp(1.5rem, 5vw, 2.5rem);

        padding-left:
            clamp(1.5rem, 5vw, 2.5rem);

        padding-bottom: 3rem;
    }

    .cocktail-editorial__content h2 {
        max-width: 10ch;

        font-size: clamp(3.7rem, 13vw, 5.7rem);
    }
}


/* Cocktail Editorial - Mobile */

@media (max-width: 520px) {
    .cocktail-editorial {
        min-height: 39rem;

        padding-top: 12rem;
    }

    .cocktail-editorial__content h2 {
        font-size: clamp(3.3rem, 15vw, 5rem);
    }

    .cocktail-editorial__stamp {
        max-width: 100%;
    }
}

/* ==========================================================================
   BEER PRESSURE - SHOTS EDITORIAL FEATURE
   ========================================================================== */

.shots-editorial {
    position: relative;

    min-height: clamp(36rem, 58vw, 49rem);

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    border-bottom: 4px solid var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}

.shots-editorial__media {
    position: absolute;
    inset: 0;

    margin: 0;
}

.shots-editorial__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.96) 0%,
            rgba(23, 21, 18, 0.88) 27%,
            rgba(23, 21, 18, 0.28) 56%,
            rgba(23, 21, 18, 0.05) 80%
        );
}

.shots-editorial__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 48%;

    filter:
        saturate(0.92)
        contrast(1.06);
}

.shots-editorial__content {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(10rem, 0.72fr)
        minmax(18rem, 1.3fr)
        minmax(16rem, 0.88fr);

    grid-template-rows: auto auto;

    align-items: end;

    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 0.8rem;

    padding-top:
        clamp(3rem, 6vw, 5rem);

    padding-bottom:
        clamp(2.5rem, 5vw, 4rem);

    border-top:
        3px
        solid
        rgba(242, 230, 207, 0.72);
}

.shots-editorial__figure {
    grid-column: 1;
    grid-row: 1;

    width: fit-content;

    margin: 0;

    padding-bottom: 0.4rem;

    border-bottom: 2px solid var(--gold);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.59rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.shots-editorial__content .eyebrow {
    grid-column: 1;
    grid-row: 2;

    align-self: start;

    margin: 0;

    color: var(--gold);
}

.shots-editorial__content h2 {
    grid-column: 2;
    grid-row: 1 / 3;

    align-self: center;

    max-width: 8ch;

    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size: clamp(3.8rem, 5.8vw, 6rem);
    font-weight: 900;
    line-height: 0.85;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.shots-editorial__content > p:not(.shots-editorial__figure):not(.eyebrow):not(.shots-editorial__stamp) {
    grid-column: 3;
    grid-row: 1;

    align-self: end;

    max-width: 27rem;

    margin: 0;

    color: rgba(242, 230, 207, 0.76);

    font-size: 0.92rem;
    line-height: 1.65;
}

.shots-editorial__stamp {
    grid-column: 3;
    grid-row: 2;

    align-self: start;

    width: fit-content;

    margin: 0;

    padding:
        0.48rem
        0.62rem;

    transform: rotate(-1deg);

    border: 2px solid var(--gold);

    background: rgba(23, 21, 18, 0.58);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* Shots Editorial - Tablet */

@media (max-width: 900px) {
    .shots-editorial {
        min-height: 43rem;
    }

    .shots-editorial__content {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(14rem, 0.85fr);

        grid-template-rows: auto auto auto;

        column-gap: 2rem;
    }

    .shots-editorial__figure {
        grid-column: 1;
        grid-row: 1;
    }

    .shots-editorial__content .eyebrow {
        grid-column: 2;
        grid-row: 1;

        align-self: end;
    }

    .shots-editorial__content h2 {
        grid-column: 1;
        grid-row: 2 / 4;

        max-width: 8.5ch;

        font-size: clamp(3.7rem, 9vw, 5.5rem);
    }

    .shots-editorial__content > p:not(.shots-editorial__figure):not(.eyebrow):not(.shots-editorial__stamp) {
        grid-column: 2;
        grid-row: 2;
    }

    .shots-editorial__stamp {
        grid-column: 2;
        grid-row: 3;
    }
}


/* Shots Editorial - Mobile */

@media (max-width: 620px) {
    .shots-editorial {
        min-height: 42rem;
    }

    .shots-editorial__media::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.98) 0%,
                rgba(23, 21, 18, 0.82) 50%,
                rgba(23, 21, 18, 0.08) 82%
            );
    }

    .shots-editorial__media img {
        object-position: 60% center;
    }

    .shots-editorial__content {
        display: block;

        padding-top: 14rem;
        padding-bottom: 2.75rem;

        border-top: 0;
    }

    .shots-editorial__figure {
        margin-bottom: 1rem;
    }

    .shots-editorial__content .eyebrow {
        margin-bottom: 0.75rem;
    }

    .shots-editorial__content h2 {
        max-width: 9ch;

        margin-bottom: 1.25rem;

        font-size: clamp(3.5rem, 15vw, 5rem);
    }

    .shots-editorial__content > p:not(.shots-editorial__figure):not(.eyebrow):not(.shots-editorial__stamp) {
        max-width: 29rem;

        margin-bottom: 1.35rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - SHOTS MIDLINE FIX
   ========================================================================== */

.shots-editorial__content {
    border-top: 0;
}

/* ==========================================================================
   BEER PRESSURE - LATE NIGHT EDITORIAL FEATURE
   ========================================================================== */

.late-night-editorial {
    position: relative;

    min-height: clamp(32rem, 52vw, 44rem);

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    border-bottom: 4px solid var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.late-night-editorial__media {
    position: absolute;
    inset: 0;

    margin: 0;
}

.late-night-editorial__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.96) 0%,
            rgba(23, 21, 18, 0.82) 30%,
            rgba(23, 21, 18, 0.46) 55%,
            rgba(23, 21, 18, 0.08) 82%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.68) 0%,
            rgba(23, 21, 18, 0.04) 58%
        );
}

.late-night-editorial__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 68% center;

    filter:
        saturate(0.82)
        contrast(1.03)
        brightness(0.92);
}

.late-night-editorial__content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-left:
        clamp(3rem, 7vw, 8rem);
}

.late-night-editorial__figure {
    width: fit-content;

    margin:
        0
        0
        1.1rem;

    padding-bottom: 0.45rem;

    border-bottom: 2px solid var(--gold);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.late-night-editorial__content .eyebrow {
    margin-bottom: 0.75rem;

    color: var(--gold);
}

.late-night-editorial__content h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.25rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size: clamp(3.6rem, 5.5vw, 5.7rem);
    font-weight: 900;
    line-height: 0.88;

    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.late-night-editorial__content > p:not(.late-night-editorial__figure):not(.eyebrow):not(.late-night-editorial__stamp) {
    max-width: 29rem;

    margin:
        0
        0
        1.5rem;

    color: rgba(242, 230, 207, 0.78);

    font-size: 0.96rem;
    line-height: 1.68;
}

.late-night-editorial__stamp {
    width: fit-content;

    margin: 0;

    padding:
        0.48rem
        0.62rem;

    transform: rotate(-1deg);

    border: 2px solid var(--gold);

    background: rgba(23, 21, 18, 0.46);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.57rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* Late Night Editorial - Wide Screens */

@media (min-width: 1500px) {
    .late-night-editorial__content {
        padding-left:
            clamp(6rem, 9vw, 11rem);
    }

    .late-night-editorial__content h2 {
        font-size: clamp(3.8rem, 5vw, 5.5rem);
    }
}


/* Late Night Editorial - Tablet */

@media (max-width: 820px) {
    .late-night-editorial {
        min-height: 40rem;

        padding-top: 13rem;
    }

    .late-night-editorial__media::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.97) 0%,
                rgba(23, 21, 18, 0.7) 48%,
                rgba(23, 21, 18, 0.08) 82%
            );
    }

    .late-night-editorial__media img {
        object-position: 65% center;
    }

    .late-night-editorial__content {
        padding-right:
            clamp(1.5rem, 5vw, 2.5rem);

        padding-left:
            clamp(1.5rem, 5vw, 2.5rem);

        padding-bottom: 3rem;
    }

    .late-night-editorial__content h2 {
        max-width: 10ch;

        font-size: clamp(3.5rem, 12vw, 5.2rem);
    }
}


/* Late Night Editorial - Mobile */

@media (max-width: 520px) {
    .late-night-editorial {
        min-height: 38rem;

        padding-top: 12rem;
    }

    .late-night-editorial__content h2 {
        font-size: clamp(3.2rem, 14vw, 4.7rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - DRINKS FOOD CTA FULL BLEED
   ========================================================================== */

.drinks-closing {
    position: relative;

    min-height: clamp(34rem, 54vw, 46rem);

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    padding-block: 0;

    background: var(--ink);
    color: var(--paper-light);
}

.drinks-closing::after {
    display: none;
}

.drinks-closing__media {
    position: absolute;
    inset: 0;
    z-index: 0;

    margin: 0;

    background: var(--ink);
}

.drinks-closing__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.96) 0%,
            rgba(23, 21, 18, 0.84) 29%,
            rgba(23, 21, 18, 0.48) 54%,
            rgba(23, 21, 18, 0.11) 80%,
            rgba(23, 21, 18, 0.03) 100%
        ),
        linear-gradient(
            0deg,
            rgba(23, 21, 18, 0.7) 0%,
            rgba(23, 21, 18, 0.04) 58%
        );
}

.drinks-closing__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 68% center;

    filter:
        saturate(0.94)
        contrast(1.05);
}

.drinks-closing__inner {
    position: relative;
    z-index: 2;

    width: 100%;

    padding-top:
        clamp(5rem, 9vw, 8rem);

    padding-right: 0;

    padding-bottom:
        clamp(3.5rem, 7vw, 6rem);

    padding-left:
        clamp(3rem, 7vw, 8rem);
}

.drinks-closing__inner .eyebrow {
    width: fit-content;

    margin-bottom: 1rem;
    padding-bottom: 0.45rem;

    border-bottom: 2px solid var(--gold);

    color: var(--gold);
}

.drinks-closing__inner h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.35rem;

    color: var(--paper-light);

    font-size: clamp(4.6rem, 7.5vw, 7.8rem);
    line-height: 0.83;
}

.drinks-closing__inner > p:not(.eyebrow) {
    max-width: 31rem;

    margin-bottom: 1.7rem;

    color: rgba(242, 230, 207, 0.82);

    font-size: 0.98rem;
    line-height: 1.65;
}

.drinks-closing__inner .button {
    border: 2px solid var(--gold);

    background: rgba(23, 21, 18, 0.58);
    color: var(--gold);
}

.drinks-closing__inner .button:hover,
.drinks-closing__inner .button:focus-visible {
    border-color: var(--paper-light);

    background: var(--paper-light);
    color: var(--ink);
}


/* Drinks Food CTA - Wide Screens */

@media (min-width: 1500px) {
    .drinks-closing__inner {
        padding-left:
            clamp(6rem, 9vw, 11rem);
    }

    .drinks-closing__inner h2 {
        font-size: clamp(5rem, 6.8vw, 7.5rem);
    }
}


/* Drinks Food CTA - Tablet */

@media (max-width: 820px) {
    .drinks-closing {
        min-height: 40rem;
    }

    .drinks-closing__media::after {
        background:
            linear-gradient(
                0deg,
                rgba(23, 21, 18, 0.97) 0%,
                rgba(23, 21, 18, 0.7) 49%,
                rgba(23, 21, 18, 0.08) 82%
            );
    }

    .drinks-closing__media img {
        object-position: 64% center;
    }

    .drinks-closing__inner {
        padding-top: 14rem;

        padding-right:
            clamp(1.5rem, 5vw, 2.5rem);

        padding-left:
            clamp(1.5rem, 5vw, 2.5rem);

        padding-bottom: 3.5rem;
    }

    .drinks-closing__inner h2 {
        max-width: 9ch;

        font-size: clamp(4rem, 13vw, 6rem);
    }
}


/* Drinks Food CTA - Mobile */

@media (max-width: 520px) {
    .drinks-closing {
        min-height: 38rem;
    }

    .drinks-closing__inner {
        padding-top: 12rem;
    }

    .drinks-closing__inner h2 {
        font-size: clamp(3.7rem, 16vw, 5.3rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - HAPPY HOUR PHOTO TREATMENT
   ========================================================================== */

.drinks-happy-hour {
    position: relative;

    background: var(--ink);
}

.drinks-happy-hour__background {
    position: absolute;
    inset: 0;
    z-index: 0;

    margin: 0;

    overflow: hidden;
}

.drinks-happy-hour__background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.24) 0%,
            rgba(23, 21, 18, 0.08) 38%,
            rgba(23, 21, 18, 0.22) 100%
        ),
        rgba(23, 21, 18, 0.14);
}

.drinks-happy-hour__background img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.72)
        contrast(1.05)
        brightness(0.72);
}

.drinks-happy-hour__grid {
    position: relative;
    z-index: 2;
}

.drinks-happy-hour__time {
    background: rgba(212, 154, 42, 0.80);
}

.drinks-happy-hour__copy {
    background: rgba(140, 48, 40, 0.82);
}

.drinks-happy-hour__time,
.drinks-happy-hour__copy {
    position: relative;
}

.drinks-happy-hour__time::after,
.drinks-happy-hour__copy::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.08;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 7px,
            currentColor 7px,
            currentColor 8px
        );

    pointer-events: none;
}

.drinks-happy-hour__time > *,
.drinks-happy-hour__copy > * {
    position: relative;
    z-index: 1;
}


/* Happy Hour Photo - Mobile */

@media (max-width: 780px) {
    .drinks-happy-hour__background img {
        object-position: 60% center;
    }

    .drinks-happy-hour__time {
        background: rgba(212, 154, 42, 0.84);
    }

    .drinks-happy-hour__copy {
        background: rgba(140, 48, 40, 0.86);
    }
}

/* ==========================================================================
   BEER PRESSURE - HAPPY HOUR BACKGROUND FIX
   ========================================================================== */

/*
   Use the tavern photograph directly as the section background.
   The HTML figure remains available semantically but is removed from layout
   so it cannot render as a giant standalone image.
*/

.drinks-happy-hour {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(23, 21, 18, 0.34),
            rgba(23, 21, 18, 0.34)
        ),
        url("../images/drinks/happy-hour-background.png")
        center / cover
        no-repeat;
}

.drinks-happy-hour__background {
    display: none;
}

.drinks-happy-hour__grid {
    position: relative;
    z-index: 2;
}

.drinks-happy-hour__time {
    background: rgba(212, 154, 42, 0.82);
}

.drinks-happy-hour__copy {
    background: rgba(140, 48, 40, 0.84);
}

@media (max-width: 780px) {
    .drinks-happy-hour {
        background-position: 60% center;
    }

    .drinks-happy-hour__time {
        background: rgba(212, 154, 42, 0.86);
    }

    .drinks-happy-hour__copy {
        background: rgba(140, 48, 40, 0.88);
    }
}

/* ==========================================================================
   BEER PRESSURE - HAPPY HOUR POLISH PASS
   ========================================================================== */

.drinks-happy-hour {
    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.42) 0%,
            rgba(23, 21, 18, 0.30) 40%,
            rgba(23, 21, 18, 0.36) 100%
        ),
        url("../images/drinks/happy-hour-background.png")
        62% center / cover
        no-repeat;
}

.drinks-happy-hour__time {
    background: rgba(212, 154, 42, 0.90);
}

.drinks-happy-hour__copy {
    background: rgba(140, 48, 40, 0.90);
}

.drinks-happy-hour__time::after,
.drinks-happy-hour__copy::after {
    opacity: 0.04;
}

@media (max-width: 780px) {
    .drinks-happy-hour {
        background-position: 66% center;
    }

    .drinks-happy-hour__time {
        background: rgba(212, 154, 42, 0.92);
    }

    .drinks-happy-hour__copy {
        background: rgba(140, 48, 40, 0.92);
    }
}

/* ==========================================================================
   BEER PRESSURE - HAPPY HOUR NEUTRAL PHOTO
   ========================================================================== */

.drinks-happy-hour {
    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.42) 0%,
            rgba(23, 21, 18, 0.22) 48%,
            rgba(23, 21, 18, 0.38) 100%
        ),
        url("../images/drinks/happy-hour-background.png")
        62% center / cover
        no-repeat;
}

.drinks-happy-hour__time {
    background: rgba(23, 21, 18, 0.52);
}

.drinks-happy-hour__copy {
    background: rgba(23, 21, 18, 0.64);
}

.drinks-happy-hour__time::after,
.drinks-happy-hour__copy::after {
    opacity: 0.025;
}

.drinks-happy-hour__time {
    color: var(--paper-light);
}

.drinks-happy-hour__time .drinks-happy-hour__number,
.drinks-happy-hour__time strong {
    color: var(--paper-light);
}

.drinks-happy-hour__copy {
    color: var(--paper-light);
}

.drinks-happy-hour__copy h2 {
    color: var(--paper-light);
}

@media (max-width: 780px) {
    .drinks-happy-hour {
        background-position: 66% center;
    }

    .drinks-happy-hour__time {
        background: rgba(23, 21, 18, 0.58);
    }

    .drinks-happy-hour__copy {
        background: rgba(23, 21, 18, 0.68);
    }
}

/* ==========================================================================
   BEER PRESSURE - COLD CONTAINED PHOTO
   ========================================================================== */

.drinks-cold-contained__media {
    position: relative;

    width: min(100%, 23rem);
    aspect-ratio: 4 / 5;

    margin:
        clamp(2rem, 3vw, 3rem)
        0
        0;

    overflow: hidden;

    border-top: 3px solid var(--ink);
    border-bottom: 1px solid var(--rule);

    background: var(--ink);
}

.drinks-cold-contained__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(23, 21, 18, 0.08) 0%,
            rgba(23, 21, 18, 0) 48%,
            rgba(23, 21, 18, 0.28) 100%
        );

    pointer-events: none;
}

.drinks-cold-contained__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 58%;

    filter:
        saturate(0.88)
        contrast(1.04);
}


/* Cold & Contained Photo - Wide Screens */

@media (min-width: 1500px) {
    .drinks-cold-contained__media {
        width: min(100%, 25rem);
    }
}


/* Cold & Contained Photo - Tablet / Mobile */

@media (max-width: 900px) {
    .drinks-cold-contained__media {
        width: min(100%, 32rem);
        aspect-ratio: 16 / 10;

        margin-top: 2rem;
    }

    .drinks-cold-contained__media img {
        object-position: center 60%;
    }
}

@media (max-width: 560px) {
    .drinks-cold-contained__media {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
}

/* ==========================================================================
   BEER PRESSURE - COLD CONTAINED EDITORIAL RAIL
   ========================================================================== */

/*
   Cold & Contained becomes a full-height photographic editorial rail.
   The right-side drink list remains the clean newsprint menu.
*/

.drinks-category--contained .drinks-category__grid {
    grid-template-columns:
        minmax(20rem, 0.72fr)
        minmax(0, 1.28fr);

    gap: 0;

    align-items: stretch;
}


/* --------------------------------------------------------------------------
   Photographic Left Rail
   -------------------------------------------------------------------------- */

.drinks-category--contained .drinks-category__heading {
    position: relative;
    top: auto;

    min-height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding:
        clamp(2.5rem, 4vw, 4.5rem)
        clamp(2rem, 3.5vw, 4rem);

    overflow: hidden;

    border-right: 3px solid var(--ink);

    background: var(--ink);

    color: var(--paper-light);
}


/* Actual photograph */

.drinks-category--contained .drinks-cold-contained__media {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    aspect-ratio: auto;

    margin: 0;

    overflow: hidden;

    border: 0;

    background: var(--ink);
}

.drinks-category--contained .drinks-cold-contained__media::after {
    display: none;
}

.drinks-category--contained .drinks-cold-contained__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 53% center;

    filter:
        saturate(0.78)
        contrast(1.08)
        brightness(0.82);
}


/* Controlled editorial shading */

.drinks-category--contained .drinks-category__heading::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(23, 21, 18, 0.24) 0%,
            rgba(23, 21, 18, 0.08) 32%,
            rgba(23, 21, 18, 0.30) 58%,
            rgba(23, 21, 18, 0.92) 100%
        ),
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.34) 0%,
            rgba(23, 21, 18, 0.04) 72%
        );

    pointer-events: none;
}


/* Keep all copy above the photograph */

.drinks-category--contained
.drinks-category__heading
> :not(.drinks-cold-contained__media) {
    position: relative;
    z-index: 2;
}


/* --------------------------------------------------------------------------
   Section Number
   -------------------------------------------------------------------------- */

.drinks-category--contained .drinks-category__number {
    position: absolute;
    top: clamp(1.75rem, 3vw, 3rem);
    left: clamp(2rem, 3.5vw, 4rem);

    margin: 0;

    color: rgba(242, 230, 207, 0.34);

    font-size: clamp(6rem, 9vw, 9rem);

    line-height: 0.72;
}


/* --------------------------------------------------------------------------
   Editorial Copy
   -------------------------------------------------------------------------- */

.drinks-category--contained .drinks-category__heading .eyebrow {
    margin-bottom: 0.8rem;

    color: var(--gold);
}

.drinks-category--contained .drinks-category__heading h2 {
    max-width: 7ch;

    margin:
        0
        0
        1.25rem;

    color: var(--paper-light);

    font-size: clamp(4rem, 5.7vw, 6rem);

    text-shadow:
        0
        2px
        20px
        rgba(23, 21, 18, 0.28);
}

.drinks-category--contained .drinks-category__heading h2 + p {
    max-width: 23rem;

    margin: 0;

    color: rgba(242, 230, 207, 0.82);

    font-size: 1rem;
    line-height: 1.65;
}


/* --------------------------------------------------------------------------
   Right-Side Menu Alignment
   -------------------------------------------------------------------------- */

.drinks-category--contained .drinks-list {
    min-width: 0;

    padding-left: clamp(2.5rem, 5vw, 5rem);
}


/* --------------------------------------------------------------------------
   Wide Screens
   -------------------------------------------------------------------------- */

@media (min-width: 1500px) {
    .drinks-category--contained .drinks-category__grid {
        grid-template-columns:
            minmax(24rem, 0.74fr)
            minmax(0, 1.26fr);
    }

    .drinks-category--contained .drinks-category__heading {
        padding-right: 4.5rem;
        padding-left: 4.5rem;
    }

    .drinks-category--contained .drinks-category__number {
        left: 4.5rem;
    }
}


/* --------------------------------------------------------------------------
   Tablet / Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .drinks-category--contained .drinks-category__grid {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .drinks-category--contained .drinks-category__heading {
        min-height: clamp(32rem, 82vw, 42rem);

        padding:
            3rem
            clamp(1.5rem, 6vw, 3rem);

        border-right: 0;
        border-bottom: 3px solid var(--ink);
    }

    .drinks-category--contained .drinks-category__number {
        top: 2rem;
        left: clamp(1.5rem, 6vw, 3rem);
    }

    .drinks-category--contained .drinks-category__heading h2 {
        font-size: clamp(4rem, 13vw, 6rem);
    }

    .drinks-category--contained .drinks-list {
        padding-left: 0;
    }

    .drinks-category--contained .drinks-cold-contained__media img {
        object-position: center 60%;
    }
}


@media (max-width: 560px) {
    .drinks-category--contained .drinks-category__heading {
        min-height: 34rem;

        padding-bottom: 2.5rem;
    }

    .drinks-category--contained .drinks-category__heading h2 {
        font-size: clamp(3.8rem, 15vw, 5rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - COLD CONTAINED BOTTOM SPACING
   ========================================================================== */

.drinks-category--contained {
    padding-bottom: clamp(2rem, 3vw, 3rem);
}

@media (max-width: 900px) {
    .drinks-category--contained {
        padding-bottom: 2.5rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - MIXED FEELINGS COCKTAIL LEDGER
   ========================================================================== */

/*
   Mixed Feelings becomes a split editorial spread:
   cream introduction on the left, deep-green cocktail ledger on the right.
*/

.drinks-category--cocktails {
    position: relative;

    padding-block: 0;

    overflow: hidden;

    background: var(--paper);
    color: var(--ink);
}

.drinks-category--cocktails .drinks-category__grid {
    position: relative;

    grid-template-columns:
        minmax(18rem, 0.62fr)
        minmax(0, 1.38fr);

    gap: 0;

    align-items: stretch;
}


/* --------------------------------------------------------------------------
   Left Editorial Column
   -------------------------------------------------------------------------- */

.drinks-category--cocktails .drinks-category__heading {
    position: relative;
    top: auto;

    padding:
        clamp(4.5rem, 8vw, 7.5rem)
        clamp(3rem, 5vw, 5rem)
        clamp(4.5rem, 8vw, 7.5rem)
        0;

    background: var(--paper);

    color: var(--ink);
}

.drinks-category--cocktails .drinks-category__number {
    color: rgba(23, 21, 18, 0.12);
}

.drinks-category--cocktails .drinks-category__heading .eyebrow {
    color: var(--red);
}

.drinks-category--cocktails .drinks-category__heading h2 {
    color: var(--ink);
}

.drinks-category--cocktails
.drinks-category__heading
> p:last-child {
    max-width: 24rem;

    color: rgba(23, 21, 18, 0.72);
}


/* --------------------------------------------------------------------------
   Right Cocktail Ledger
   -------------------------------------------------------------------------- */

.drinks-category--cocktails .drinks-list {
    position: relative;
    z-index: 1;

    min-width: 0;

    padding:
        clamp(4.5rem, 8vw, 7.5rem)
        0
        clamp(4.5rem, 8vw, 7.5rem)
        clamp(3rem, 5vw, 5rem);

    border-top: 0;
    border-left: 3px solid var(--ink);

    background: var(--green);
}


/*
   Extend the green ledger from the menu column all the way to
   the right edge of the viewport without affecting the cream left side.
*/

.drinks-category--cocktails .drinks-list::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    bottom: 0;
    left: 0;

    width: 100vw;

    background: var(--green);

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Cocktail Typography
   -------------------------------------------------------------------------- */

.drinks-category--cocktails .drink-item {
    border-bottom-color: rgba(242, 230, 207, 0.22);
}

.drinks-category--cocktails .drink-item:first-child {
    border-top:
        3px
        solid
        var(--paper-light);
}

.drinks-category--cocktails .drink-item h3 {
    color: var(--paper-light);
}

.drinks-category--cocktails .drink-item__price,
.drinks-category--cocktails .drink-item__ingredients {
    color: var(--gold);
}

.drinks-category--cocktails
.drink-item
> p:not(.drink-item__ingredients) {
    color: rgba(242, 230, 207, 0.78);
}


/* --------------------------------------------------------------------------
   Wide Screens
   -------------------------------------------------------------------------- */

@media (min-width: 1500px) {
    .drinks-category--cocktails .drinks-category__grid {
        grid-template-columns:
            minmax(22rem, 0.64fr)
            minmax(0, 1.36fr);
    }

    .drinks-category--cocktails .drinks-category__heading {
        padding-right: 6rem;
    }

    .drinks-category--cocktails .drinks-list {
        padding-left: 6rem;
    }
}


/* --------------------------------------------------------------------------
   Tablet / Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .drinks-category--cocktails {
        overflow: hidden;
    }

    .drinks-category--cocktails .drinks-category__grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .drinks-category--cocktails .drinks-category__heading {
        padding:
            4rem
            0;
    }

    .drinks-category--cocktails .drinks-list {
        padding:
            4rem
            0;

        border-left: 0;
        border-top:
            3px
            solid
            var(--ink);
    }

    .drinks-category--cocktails .drinks-list::before {
        left: 50%;

        width: 100vw;

        transform: translateX(-50%);
    }
}

/* ==========================================================================
   BEER PRESSURE - SHOTS HEADING ALIGNMENT
   ========================================================================== */

/*
   Center the Shots Fired editorial heading against the shot board.
   No changes to the board, rows, colors, typography, or section spacing.
*/

.drinks-category--shots .drinks-category__heading {
    position: relative;
    top: auto;

    align-self: center;
}


/* Mobile returns to normal document flow. */

@media (max-width: 900px) {
    .drinks-category--shots .drinks-category__heading {
        align-self: stretch;
    }
}

/* ==========================================================================
   BEER PRESSURE - RESPONSIBLE SECTION POLISH
   ========================================================================== */

/*
   Tighten the calm reset after the late-night photo feature.
   Keep the board, rows, prices, green rule, and copy unchanged.
*/

.responsible-section {
    padding-top: clamp(3rem, 5vw, 4.5rem);
    padding-bottom: clamp(4rem, 6vw, 5.5rem);
}

.responsible-section__grid {
    align-items: start;
}

.responsible-section__copy h2 {
    max-width: 9ch;

    font-size: clamp(3.6rem, 5.6vw, 5.8rem);

    line-height: 0.86;
}


/* Tablet / Mobile */

@media (max-width: 900px) {
    .responsible-section {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }

    .responsible-section__copy h2 {
        max-width: 9ch;

        font-size: clamp(3.5rem, 13vw, 5rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - EVENTS FOUNDATION
   ========================================================================== */


/* ==========================================================================
   Events Hero
   ========================================================================== */

.events-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(23, 21, 18, 0.035) 34px,
            rgba(23, 21, 18, 0.035) 35px
        ),
        var(--paper);

    color: var(--ink);
}

.events-hero::before {
    content: "WEEKLY BULLETIN";

    position: absolute;
    top: clamp(2rem, 4vw, 3.5rem);
    right: clamp(2rem, 5vw, 5rem);

    color: rgba(23, 21, 18, 0.06);

    font-family: var(--font-display);
    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 900;
    line-height: 0.8;

    letter-spacing: -0.03em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.events-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(20rem, 0.75fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.events-hero__copy {
    max-width: 52rem;
}

.events-hero__copy .eyebrow {
    margin-bottom: 1.1rem;

    color: var(--red);
}

.events-hero__copy h1 {
    max-width: 9ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size:
        clamp(5rem, 9vw, 9rem);
    font-weight: 900;
    line-height: 0.78;

    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.events-hero__lede {
    max-width: 37rem;

    margin:
        0
        0
        2rem;

    color: var(--text-muted);

    font-size:
        clamp(1rem, 1.3vw, 1.15rem);

    line-height: 1.7;
}

.events-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1.4rem;
}


/* ==========================================================================
   Events Scoreboard
   ========================================================================== */

.events-scoreboard {
    position: relative;

    border:
        4px
        solid
        var(--ink);

    background: var(--ink);
    color: var(--paper-light);

    box-shadow:
        0.8rem
        0.8rem
        0
        rgba(23, 21, 18, 0.12);
}

.events-scoreboard::before {
    content: "";

    position: absolute;
    inset: 0.45rem;

    border:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    pointer-events: none;
}

.events-scoreboard__top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.22);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.events-scoreboard__top strong {
    display: inline-block;

    padding:
        0.35rem
        0.55rem;

    background: var(--red);
    color: var(--paper-light);

    font-size: 0.58rem;
}

.events-scoreboard__stats {
    position: relative;
    z-index: 1;

    margin: 0;
}

.events-scoreboard__stats > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}

.events-scoreboard__stats dt {
    color:
        rgba(242, 230, 207, 0.72);

    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.events-scoreboard__stats dd {
    margin: 0;

    color: var(--gold);

    font-family: var(--font-display);
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 0.85;

    text-transform: uppercase;
}

.events-scoreboard__status {
    position: relative;
    z-index: 1;

    margin: 0;

    padding:
        0.9rem
        1.2rem;

    background: var(--gold);
    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ==========================================================================
   Events Jump Navigation
   ========================================================================== */

.events-jump {
    position: sticky;
    top: 0;
    z-index: 40;

    border-bottom:
        2px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}

.events-jump__inner {
    min-height: 3.8rem;

    display: flex;
    align-items: center;

    gap: 0;

    overflow-x: auto;

    scrollbar-width: none;
}

.events-jump__inner::-webkit-scrollbar {
    display: none;
}

.events-jump__label {
    flex: 0 0 auto;

    margin-right: 1rem;
    padding-right: 1rem;

    border-right:
        1px
        solid
        var(--rule-light);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.events-jump a {
    flex: 0 0 auto;

    display: block;

    padding:
        1.45rem
        1rem;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color var(--ease),
        background var(--ease);
}

.events-jump a:hover,
.events-jump a:focus-visible {
    background:
        rgba(242, 230, 207, 0.08);

    color: var(--gold);
}


/* ==========================================================================
   Weekly Lineup
   ========================================================================== */

.weekly-lineup {
    scroll-margin-top: 4rem;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}

.events-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(16rem, 0.75fr);

    align-items: end;

    gap:
        clamp(2rem, 6vw, 6rem);

    margin-bottom:
        clamp(2.5rem, 5vw, 4.5rem);

    padding-bottom: 1.5rem;

    border-bottom:
        4px
        solid
        var(--ink);
}

.events-section-heading .eyebrow {
    margin-bottom: 0.8rem;

    color: var(--red);
}

.events-section-heading h2 {
    max-width: 10ch;

    margin: 0;

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.events-section-heading > p {
    max-width: 28rem;

    margin: 0;

    color: var(--text-muted);

    line-height: 1.7;
}


/* ==========================================================================
   Schedule Board
   ========================================================================== */

.schedule-board {
    border-top:
        5px
        solid
        var(--ink);
}

.schedule-row {
    display: grid;

    grid-template-columns:
        8rem
        minmax(0, 1fr)
        minmax(7rem, auto);

    align-items: center;

    min-height:
        clamp(8rem, 11vw, 10rem);

    border-bottom:
        1px
        solid
        var(--rule);
}

.schedule-row__day {
    align-self: stretch;

    display: grid;
    align-content: center;

    gap: 0.3rem;

    padding:
        1.4rem
        1.2rem;

    border-right:
        1px
        solid
        var(--rule);

    background:
        rgba(23, 21, 18, 0.035);
}

.schedule-row__day span {
    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;
}

.schedule-row__day strong {
    color:
        rgba(23, 21, 18, 0.14);

    font-family: var(--font-display);
    font-size: 4.4rem;
    font-weight: 900;
    line-height: 0.72;
}

.schedule-row__event {
    padding:
        1.5rem
        clamp(1.5rem, 4vw, 3.5rem);
}

.schedule-row__category {
    margin:
        0
        0
        0.35rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.schedule-row__event h3 {
    margin:
        0
        0
        0.35rem;

    font-family: var(--font-display);
    font-size:
        clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 900;
    line-height: 0.88;

    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.schedule-row__event > p:last-child {
    max-width: 42rem;

    margin: 0;

    color: var(--text-muted);

    font-size: 0.86rem;
    line-height: 1.55;
}

.schedule-row > time,
.schedule-row__time {
    justify-self: stretch;
    align-self: stretch;

    min-width: 7rem;

    display: grid;
    place-items: center;

    padding: 1rem;

    border-left:
        1px
        solid
        var(--rule);

    color: var(--green);

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.schedule-row--weekend {
    background: var(--ink);
    color: var(--paper-light);
}

.schedule-row--weekend .schedule-row__day {
    border-right-color:
        rgba(242, 230, 207, 0.2);

    background:
        rgba(242, 230, 207, 0.035);
}

.schedule-row--weekend .schedule-row__day strong {
    color:
        rgba(242, 230, 207, 0.12);
}

.schedule-row--weekend .schedule-row__event > p:last-child {
    color:
        rgba(242, 230, 207, 0.68);
}

.schedule-row--weekend .schedule-row__time {
    border-left-color:
        rgba(242, 230, 207, 0.2);

    color: var(--gold);
}


/* ==========================================================================
   Events Foundation - Tablet
   ========================================================================== */

@media (max-width: 980px) {
    .events-hero__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .events-hero__copy h1 {
        max-width: 8ch;

        font-size:
            clamp(5rem, 13vw, 8rem);
    }

    .events-scoreboard {
        width: min(100%, 36rem);
    }

    .events-section-heading {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .schedule-row {
        grid-template-columns:
            6.5rem
            minmax(0, 1fr)
            6.5rem;
    }

    .schedule-row__day strong {
        font-size: 3.8rem;
    }
}


/* ==========================================================================
   Events Foundation - Mobile
   ========================================================================== */

@media (max-width: 680px) {
    .events-hero {
        padding-block:
            4rem;
    }

    .events-hero::before {
        display: none;
    }

    .events-hero__copy h1 {
        font-size:
            clamp(4.2rem, 17vw, 6.2rem);
    }

    .events-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .events-hero__actions .button {
        width: 100%;
    }

    .events-jump__label {
        display: none;
    }

    .events-jump a {
        padding-inline: 0.85rem;
    }

    .weekly-lineup {
        padding-block: 4rem;
    }

    .events-section-heading h2 {
        font-size:
            clamp(3.8rem, 16vw, 5.4rem);
    }

    .schedule-row {
        grid-template-columns:
            5rem
            minmax(0, 1fr);

        min-height: 0;
    }

    .schedule-row__day {
        grid-row:
            1
            / span 2;

        padding:
            1.2rem
            0.8rem;
    }

    .schedule-row__day strong {
        font-size: 3rem;
    }

    .schedule-row__event {
        padding:
            1.4rem
            1.2rem
            0.9rem;
    }

    .schedule-row__event h3 {
        font-size:
            clamp(2rem, 10vw, 2.8rem);
    }

    .schedule-row > time,
    .schedule-row__time {
        grid-column: 2;

        min-width: 0;

        display: block;

        padding:
            0
            1.2rem
            1.3rem;

        border-left: 0;

        text-align: left;
    }
}

/* ==========================================================================
   BEER PRESSURE - EVENTS LOWER HALF
   ========================================================================== */


/* ==========================================================================
   Game Day
   ========================================================================== */

.events-game-day {
    scroll-margin-top: 4rem;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}

.events-game-day__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(20rem, 0.95fr);

    align-items: center;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.events-game-day__copy .eyebrow {
    margin-bottom: 1rem;

    color: var(--gold);
}

.events-game-day__copy h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.4rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.events-game-day__copy > p:not(.eyebrow) {
    max-width: 34rem;

    margin:
        0
        0
        2rem;

    color:
        rgba(242, 230, 207, 0.72);

    line-height: 1.7;
}


/* Game Day scoreboard */

.game-day-board {
    border:
        4px
        solid
        var(--gold);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 26px,
            rgba(242, 230, 207, 0.035) 26px,
            rgba(242, 230, 207, 0.035) 27px
        ),
        #11100e;
}

.game-day-board__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.25rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    color:
        rgba(242, 230, 207, 0.72);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-day-board__top strong {
    padding:
        0.35rem
        0.55rem;

    background: var(--red);
    color: var(--paper-light);

    font-size: 0.58rem;
}

.game-day-board dl {
    margin: 0;
}

.game-day-board dl > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    min-height: 5.5rem;

    gap: 2rem;

    padding:
        1rem
        1.25rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.15);
}

.game-day-board dl > div:last-child {
    border-bottom: 0;
}

.game-day-board dt {
    color:
        rgba(242, 230, 207, 0.66);

    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.game-day-board dd {
    margin: 0;

    color: var(--gold);

    font-family: var(--font-display);
    font-size:
        clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    line-height: 0.85;

    text-transform: uppercase;
}


/* ==========================================================================
   House Rules
   ========================================================================== */

.events-house-rules {
    scroll-margin-top: 4rem;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}

.events-house-rules__grid {
    display: grid;

    grid-template-columns:
        minmax(15rem, 0.62fr)
        minmax(0, 1.38fr);

    align-items: start;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.events-house-rules .eyebrow {
    margin-bottom: 0.8rem;

    color: var(--red);
}

.events-house-rules h2 {
    max-width: 7ch;

    margin: 0;

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.house-rules-list {
    margin: 0;
    padding: 0;

    border-top:
        4px
        solid
        var(--ink);

    list-style: none;

    counter-reset: house-rules;
}

.house-rules-list li {
    position: relative;

    min-height:
        clamp(6.5rem, 9vw, 8rem);

    display: grid;
    align-items: center;

    padding:
        1.5rem
        1rem
        1.5rem
        clamp(5rem, 8vw, 7rem);

    border-bottom:
        1px
        solid
        var(--rule);

    counter-increment: house-rules;

    font-size:
        clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 600;
    line-height: 1.5;
}

.house-rules-list li::before {
    content:
        "0"
        counter(house-rules);

    position: absolute;
    left: 0;

    color:
        rgba(23, 21, 18, 0.16);

    font-family: var(--font-display);
    font-size:
        clamp(3.2rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1;
}


/* ==========================================================================
   Parties Closing CTA
   ========================================================================== */

.events-parties {
    scroll-margin-top: 4rem;

    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        linear-gradient(
            90deg,
            var(--green) 0%,
            var(--green) 58%,
            #1a3323 58%,
            #1a3323 100%
        );

    color: var(--paper-light);
}

.events-parties::before {
    content: "GROUP DECISION";

    position: absolute;
    right: -0.04em;
    bottom: -0.14em;

    color:
        rgba(242, 230, 207, 0.055);

    font-family: var(--font-display);
    font-size:
        clamp(6rem, 15vw, 14rem);
    font-weight: 900;
    line-height: 0.75;

    letter-spacing: -0.035em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.events-parties__inner {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.events-parties .eyebrow {
    margin-bottom: 0.9rem;

    color: var(--gold);
}

.events-parties h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.3rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.events-parties__inner > div > p:last-child {
    max-width: 38rem;

    margin: 0;

    color:
        rgba(242, 230, 207, 0.75);

    line-height: 1.7;
}

.events-parties .button {
    min-width: 12rem;

    background: var(--gold);
    color: var(--ink);
}


/* ==========================================================================
   Events Lower Half - Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .events-game-day__grid,
    .events-house-rules__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .game-day-board {
        width: min(100%, 38rem);
    }

    .events-parties {
        background: var(--green);
    }

    .events-parties__inner {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 2rem;
    }

    .events-parties .button {
        width: fit-content;
    }
}


/* ==========================================================================
   Events Lower Half - Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .events-game-day,
    .events-house-rules,
    .events-parties {
        padding-block: 4rem;
    }

    .events-game-day__copy h2,
    .events-house-rules h2,
    .events-parties h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .game-day-board dl > div {
        min-height: 4.7rem;
    }

    .house-rules-list li {
        min-height: 6rem;

        padding-left: 4.5rem;
    }

    .events-parties::before {
        display: none;
    }

    .events-parties .button {
        width: 100%;
    }
}

/* ==========================================================================
   BEER PRESSURE - GAME DAY BOTTOM SPACING
   ========================================================================== */

.events-game-day {
    padding-bottom: clamp(2.75rem, 4vw, 4rem);
}

@media (max-width: 600px) {
    .events-game-day {
        padding-bottom: 3rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - EVENTS PARTIES PHOTO SPLIT
   ========================================================================== */

/*
   Editorial green copy rail on the left.
   Existing party photograph becomes a full-height right-side image.
*/

.events-parties {
    position: relative;

    min-height: clamp(36rem, 48vw, 44rem);

    display: flex;
    align-items: stretch;

    padding-block: 0;

    overflow: hidden;

    background: var(--green);
}


/* Right-side photography */

.events-parties::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;
    bottom: 0;

    width: 42%;

    border-left: 3px solid var(--ink);

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.30) 0%,
            rgba(23, 21, 18, 0.06) 42%,
            rgba(23, 21, 18, 0.10) 100%
        ),
        url("../images/parties/party-table-spread.png")
        center / cover
        no-repeat;

    pointer-events: none;
}


/* Remove previous oversized GROUP DECISION decoration */

.events-parties::after {
    content: none;
}


/* Main split */

.events-parties__inner {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 58%)
        minmax(16rem, 42%);

    align-items: end;

    gap: 0;

    padding-top:
        clamp(5rem, 8vw, 7rem);

    padding-bottom:
        clamp(4rem, 7vw, 6rem);
}


/* Left editorial copy */

.events-parties__inner > div {
    grid-column: 1;

    max-width: 43rem;

    padding-right:
        clamp(3rem, 7vw, 7rem);
}

.events-parties .eyebrow {
    color: var(--gold);
}

.events-parties h2 {
    max-width: 9ch;

    color: var(--paper-light);
}

.events-parties__inner > div > p:last-child {
    max-width: 36rem;

    color: rgba(242, 230, 207, 0.78);
}


/* CTA lives inside the photo side */

.events-parties .button {
    grid-column: 2;

    justify-self: start;
    align-self: end;

    min-width: 12rem;

    margin-left:
        clamp(2rem, 4vw, 4rem);

    border-color: var(--ink);

    background: var(--gold);
    color: var(--ink);

    box-shadow:
        0.4rem
        0.4rem
        0
        rgba(23, 21, 18, 0.86);
}


/* Wide screens */

@media (min-width: 1500px) {
    .events-parties::before {
        width: 44%;
    }

    .events-parties__inner {
        grid-template-columns:
            minmax(0, 56%)
            minmax(18rem, 44%);
    }

    .events-parties__inner > div {
        padding-right: 8rem;
    }
}


/* Tablet: photograph becomes a strong top banner */

@media (max-width: 900px) {
    .events-parties {
        min-height: 0;

        display: block;

        padding-top: clamp(20rem, 58vw, 28rem);
        padding-bottom: 0;
    }

    .events-parties::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: clamp(18rem, 54vw, 26rem);

        border-left: 0;
        border-bottom: 3px solid var(--ink);

        background:
            linear-gradient(
                180deg,
                rgba(23, 21, 18, 0.06) 0%,
                rgba(23, 21, 18, 0.28) 100%
            ),
            url("../images/parties/party-table-spread.png")
            center / cover
            no-repeat;
    }

    .events-parties__inner {
        grid-template-columns: 1fr;

        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .events-parties__inner > div {
        grid-column: 1;

        padding-right: 0;
    }

    .events-parties .button {
        grid-column: 1;

        justify-self: start;

        margin-top: 2rem;
        margin-left: 0;
    }
}


/* Mobile */

@media (max-width: 600px) {
    .events-parties {
        padding-top: 17rem;
    }

    .events-parties::before {
        height: 17rem;

        background-position: 62% center;
    }

    .events-parties__inner {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .events-parties .button {
        width: 100%;
    }
}

/* ==========================================================================
   BEER PRESSURE - HOUSE RULES BOTTOM SPACING
   ========================================================================== */

.events-house-rules {
    padding-bottom: clamp(2rem, 3vw, 3rem);
}

@media (max-width: 600px) {
    .events-house-rules {
        padding-bottom: 2.5rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - ABOUT TOP HALF
   ========================================================================== */


/* ==========================================================================
   About Hero
   ========================================================================== */

.about-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(23, 21, 18, 0.035) 34px,
            rgba(23, 21, 18, 0.035) 35px
        ),
        var(--paper);

    color: var(--ink);
}

.about-hero::before {
    content: "LOCAL PROFILE";

    position: absolute;
    top: clamp(2rem, 4vw, 3.5rem);
    right: clamp(2rem, 5vw, 5rem);

    color: rgba(23, 21, 18, 0.055);

    font-family: var(--font-display);
    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 900;
    line-height: 0.8;

    letter-spacing: -0.035em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.about-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(20rem, 0.7fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.about-hero__copy {
    max-width: 54rem;
}

.about-hero__copy .eyebrow {
    margin-bottom: 1rem;

    color: var(--red);
}

.about-hero__copy h1 {
    max-width: 11ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size:
        clamp(4.5rem, 7.8vw, 7.8rem);
    font-weight: 900;
    line-height: 0.8;

    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.about-hero__lede {
    max-width: 40rem;

    margin: 0;

    color: var(--text-muted);

    font-size:
        clamp(1rem, 1.3vw, 1.15rem);

    line-height: 1.7;
}


/* ==========================================================================
   House File
   ========================================================================== */

.about-house-file {
    border:
        4px
        solid
        var(--ink);

    background: var(--ink);
    color: var(--paper-light);

    box-shadow:
        0.75rem
        0.75rem
        0
        rgba(23, 21, 18, 0.12);
}

.about-house-file__label {
    margin: 0;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.2);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.about-house-file dl {
    margin: 0;
}

.about-house-file dl > div {
    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.17);
}

.about-house-file dl > div:last-child {
    border-bottom: 0;
}

.about-house-file dt {
    color:
        rgba(242, 230, 207, 0.55);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.about-house-file dd {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;

    text-align: right;
}


/* ==========================================================================
   About Editorial Feature
   ========================================================================== */

.about-editorial {
    position: relative;

    min-height:
        clamp(40rem, 58vw, 52rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(22rem, 0.8fr);

    overflow: hidden;

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.about-editorial__media {
    position: relative;

    min-height: inherit;

    margin: 0;

    overflow: hidden;

    border-right:
        3px
        solid
        var(--ink);
}

.about-editorial__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.08) 0%,
            rgba(23, 21, 18, 0.02) 62%,
            rgba(23, 21, 18, 0.35) 100%
        );

    pointer-events: none;
}

.about-editorial__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.86)
        contrast(1.05)
        brightness(0.82);
}

.about-editorial__media figcaption {
    position: absolute;
    z-index: 2;

    left:
        clamp(1.5rem, 4vw, 4rem);

    bottom:
        clamp(1.5rem, 3vw, 2.5rem);

    margin: 0;

    padding:
        0.45rem
        0.65rem;

    background: var(--ink);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.about-editorial__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(3rem, 6vw, 6rem);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 30px,
            rgba(242, 230, 207, 0.035) 30px,
            rgba(242, 230, 207, 0.035) 31px
        ),
        var(--green);
}

.about-editorial__content .eyebrow {
    margin-bottom: 1rem;

    color: var(--gold);
}

.about-editorial__content h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.5rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 6vw, 6.4rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.about-editorial__content > p:not(.eyebrow) {
    max-width: 31rem;

    margin:
        0
        0
        1.25rem;

    color:
        rgba(242, 230, 207, 0.76);

    line-height: 1.7;
}

.about-editorial__note {
    max-width: 30rem;

    margin-top: 1.5rem;

    padding-top: 1rem;

    border-top:
        2px
        solid
        var(--gold);
}

.about-editorial__note span {
    display: block;

    margin-bottom: 0.55rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-editorial__note strong {
    display: block;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
}


/* ==========================================================================
   About Top Half - Tablet
   ========================================================================== */

@media (max-width: 980px) {
    .about-hero__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .about-house-file {
        width: min(100%, 38rem);
    }

    .about-editorial {
        min-height: 0;

        grid-template-columns: 1fr;
    }

    .about-editorial__media {
        min-height:
            clamp(26rem, 62vw, 38rem);

        border-right: 0;
        border-bottom:
            3px
            solid
            var(--ink);
    }

    .about-editorial__content {
        padding:
            4.5rem
            clamp(2rem, 6vw, 4rem);
    }
}


/* ==========================================================================
   About Top Half - Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .about-hero {
        padding-block: 4rem;
    }

    .about-hero::before {
        display: none;
    }

    .about-hero__copy h1 {
        font-size:
            clamp(3.9rem, 15vw, 5.4rem);
    }

    .about-house-file dl > div {
        grid-template-columns: 1fr;

        gap: 0.35rem;
    }

    .about-house-file dd {
        text-align: left;
    }

    .about-editorial__media {
        min-height: 24rem;
    }

    .about-editorial__content {
        padding:
            3.5rem
            1.5rem;
    }

    .about-editorial__content h2 {
        font-size:
            clamp(3.7rem, 15vw, 5rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - ABOUT HOUSE PHILOSOPHY
   ========================================================================== */

.about-philosophy {
    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}


/* Section heading */

.about-section-heading {
    display: grid;

    grid-template-columns:
        minmax(18rem, 0.72fr)
        minmax(0, 1.28fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-bottom: 1.5rem;

    border-bottom:
        4px
        solid
        var(--ink);
}

.about-section-heading .eyebrow {
    margin:
        0
        0
        0.8rem;

    color: var(--red);
}

.about-section-heading h2 {
    grid-column: 1 / -1;

    max-width: 11ch;

    margin: 0;

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}


/* Principle list */

.about-principles {
    margin: 0;
    padding: 0;

    border-top:
        4px
        solid
        var(--ink);

    list-style: none;
}

.about-principles li {
    display: grid;

    grid-template-columns:
        clamp(6rem, 11vw, 10rem)
        minmax(0, 1fr);

    align-items: center;

    min-height:
        clamp(8rem, 12vw, 11rem);

    border-bottom:
        1px
        solid
        var(--rule);
}

.about-principles__number {
    align-self: stretch;

    display: flex;
    align-items: center;

    padding-right:
        clamp(1.5rem, 3vw, 3rem);

    border-right:
        1px
        solid
        var(--rule);

    color:
        rgba(23, 21, 18, 0.14);

    font-family: var(--font-display);
    font-size:
        clamp(4.5rem, 8vw, 7rem);
    font-weight: 900;
    line-height: 0.8;
}

.about-principles li > div {
    padding:
        1.75rem
        clamp(1.5rem, 4vw, 4rem);
}

.about-principles h3 {
    margin:
        0
        0
        0.45rem;

    font-family: var(--font-display);
    font-size:
        clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 900;
    line-height: 0.9;

    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.about-principles p {
    max-width: 43rem;

    margin: 0;

    color: var(--text-muted);

    font-size: 0.9rem;
    line-height: 1.6;
}


/* Tablet */

@media (max-width: 900px) {
    .about-section-heading {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .about-principles li {
        grid-template-columns:
            6rem
            minmax(0, 1fr);
    }

    .about-principles__number {
        font-size: 4.5rem;
    }
}


/* Mobile */

@media (max-width: 600px) {
    .about-philosophy {
        padding-block: 4rem;
    }

    .about-section-heading h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .about-principles li {
        grid-template-columns:
            4.5rem
            minmax(0, 1fr);

        min-height: 7rem;
    }

    .about-principles__number {
        padding-right: 0.8rem;

        font-size: 3.4rem;
    }

    .about-principles li > div {
        padding:
            1.4rem
            1.2rem;
    }

    .about-principles h3 {
        font-size:
            clamp(2rem, 9vw, 2.8rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - ABOUT BY THE NUMBERS
   ========================================================================== */

.about-numbers {
    padding-block:
        clamp(4.5rem, 8vw, 7rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}


/* Main split */

.about-numbers__grid {
    display: grid;

    grid-template-columns:
        minmax(18rem, 0.7fr)
        minmax(0, 1.3fr);

    align-items: start;

    gap:
        clamp(3rem, 8vw, 8rem);
}


/* Editorial heading */

.about-numbers__heading .eyebrow {
    margin:
        0
        0
        0.8rem;

    color: var(--gold);
}

.about-numbers__heading h2 {
    max-width: 7ch;

    margin:
        0
        0
        1.3rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 6.5vw, 6.5rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.about-numbers__heading > p:last-child {
    max-width: 28rem;

    margin: 0;

    color:
        rgba(242, 230, 207, 0.66);

    line-height: 1.7;
}


/* Statistics board */

.about-stats {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin: 0;

    border-top:
        4px
        solid
        var(--gold);

    border-left:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}

.about-stats > div {
    min-height:
        clamp(10rem, 15vw, 13rem);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        clamp(1.5rem, 3vw, 2.5rem);

    border-right:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}

.about-stats dt {
    color:
        rgba(242, 230, 207, 0.58);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-stats dd {
    margin: 0;

    color: var(--gold);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 8vw, 7rem);
    font-weight: 900;
    line-height: 0.76;

    letter-spacing: -0.025em;
    text-transform: uppercase;
}


/* Give the final statistic a different editorial emphasis */

.about-stats > div:last-child dd {
    color: var(--paper-light);

    font-size:
        clamp(2.8rem, 5vw, 4.8rem);
}


/* Tablet */

@media (max-width: 900px) {
    .about-numbers__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .about-numbers__heading {
        max-width: 36rem;
    }
}


/* Mobile */

@media (max-width: 600px) {
    .about-numbers {
        padding-block: 4rem;
    }

    .about-numbers__heading h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

    .about-stats > div {
        min-height: 8rem;
    }

    .about-stats dd {
        font-size:
            clamp(4rem, 18vw, 6rem);
    }

    .about-stats > div:last-child dd {
        font-size:
            clamp(2.8rem, 13vw, 4.2rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - ABOUT NEIGHBORHOOD OFFICE
   ========================================================================== */

.about-neighborhood {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(23, 21, 18, 0.035) 34px,
            rgba(23, 21, 18, 0.035) 35px
        ),
        var(--paper);

    color: var(--ink);
}

.about-neighborhood::before {
    content: "WESTVALE";

    position: absolute;

    right: clamp(1rem, 4vw, 4rem);
    bottom: -0.12em;

    color:
        rgba(23, 21, 18, 0.045);

    font-family: var(--font-display);
    font-size:
        clamp(7rem, 16vw, 15rem);
    font-weight: 900;
    line-height: 0.75;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}


/* Main layout */

.about-neighborhood__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(21rem, 0.95fr);

    align-items: center;

    gap:
        clamp(3rem, 8vw, 8rem);
}


/* Left editorial copy */

.about-neighborhood__copy .eyebrow {
    margin:
        0
        0
        0.9rem;

    color: var(--red);
}

.about-neighborhood__copy h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.4rem;

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.about-neighborhood__copy > p {
    max-width: 39rem;

    margin:
        0
        0
        1.8rem;

    color: var(--text-muted);

    line-height: 1.7;
}


/* Address treatment */

.about-neighborhood__copy address {
    width: fit-content;

    margin:
        0
        0
        1.4rem;

    padding:
        1rem
        1.2rem;

    border-top:
        3px
        solid
        var(--ink);

    border-bottom:
        1px
        solid
        var(--rule);

    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.65;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.about-neighborhood__copy .text-link {
    color: var(--red);
}


/* ==========================================================================
   Posted Hours Board
   ========================================================================== */

.about-hours {
    position: relative;

    border:
        4px
        solid
        var(--ink);

    background: var(--green);
    color: var(--paper-light);

    box-shadow:
        0.75rem
        0.75rem
        0
        rgba(23, 21, 18, 0.12);
}

.about-hours::before {
    content: "";

    position: absolute;
    inset: 0.45rem;

    border:
        1px
        solid
        rgba(242, 230, 207, 0.16);

    pointer-events: none;
}

.about-hours__top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.25rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.2);

    color:
        rgba(242, 230, 207, 0.72);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-hours__top strong {
    display: inline-block;

    padding:
        0.35rem
        0.55rem;

    background: var(--gold);
    color: var(--ink);

    font-size: 0.58rem;
}

.about-hours dl {
    position: relative;
    z-index: 1;

    margin: 0;
}

.about-hours dl > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    min-height: 5.2rem;

    gap: 2rem;

    padding:
        1rem
        1.25rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}

.about-hours dt {
    color:
        rgba(242, 230, 207, 0.68);

    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.about-hours dd {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 0.9;

    text-align: right;
    text-transform: uppercase;
}

.about-hours > p {
    position: relative;
    z-index: 1;

    margin: 0;

    padding:
        1rem
        1.25rem;

    background: var(--ink);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    line-height: 1.5;
    text-transform: uppercase;
}


/* Tablet */

@media (max-width: 900px) {
    .about-neighborhood__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .about-neighborhood__copy {
        max-width: 42rem;
    }

    .about-hours {
        width: min(100%, 40rem);
    }
}


/* Mobile */

@media (max-width: 600px) {
    .about-neighborhood {
        padding-block: 4rem;
    }

    .about-neighborhood::before {
        display: none;
    }

    .about-neighborhood__copy h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .about-neighborhood__copy address {
        width: 100%;
    }

    .about-hours dl > div {
        min-height: 4.7rem;

        gap: 1rem;
    }

    .about-hours dd {
        font-size:
            clamp(1.7rem, 8vw, 2.2rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - ABOUT CLOSING
   ========================================================================== */

.about-closing {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(4rem, 7vw, 6rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}

.about-closing::before {
    content: "LAST CALL";

    position: absolute;

    right: clamp(1rem, 4vw, 4rem);
    bottom: -0.15em;

    color:
        rgba(242, 230, 207, 0.045);

    font-family: var(--font-display);
    font-size:
        clamp(6rem, 14vw, 13rem);
    font-weight: 900;
    line-height: 0.75;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.about-closing__inner {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(16rem, 0.75fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.about-closing .eyebrow {
    margin:
        0
        0
        0.8rem;

    color: var(--gold);
}

.about-closing h2 {
    max-width: 10ch;

    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 6.5vw, 6.5rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}


/* Actions */

.about-closing__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 1.4rem;
}

.about-closing .button {
    background: var(--gold);
    color: var(--ink);
}

.about-closing .text-link {
    color: var(--paper-light);
}


/* Tablet */

@media (max-width: 900px) {
    .about-closing__inner {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 2rem;
    }

    .about-closing__actions {
        justify-content: flex-start;
    }
}


/* Mobile */

@media (max-width: 600px) {
    .about-closing {
        padding-block: 4rem;
    }

    .about-closing::before {
        display: none;
    }

    .about-closing h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .about-closing__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .about-closing .button {
        width: 100%;
    }
}

/* ==========================================================================
   BEER PRESSURE - PARTIES TOP HALF
   ========================================================================== */


/* ==========================================================================
   Parties Hero
   ========================================================================== */

.parties-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(23, 21, 18, 0.035) 34px,
            rgba(23, 21, 18, 0.035) 35px
        ),
        var(--paper);

    color: var(--ink);
}

.parties-hero::before {
    content: "GROUP BOOKING";

    position: absolute;

    top:
        clamp(2rem, 4vw, 3.5rem);

    right:
        clamp(2rem, 5vw, 5rem);

    color:
        rgba(23, 21, 18, 0.055);

    font-family: var(--font-display);
    font-size:
        clamp(5rem, 11vw, 10rem);
    font-weight: 900;
    line-height: 0.78;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.parties-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.22fr)
        minmax(20rem, 0.78fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.parties-hero__copy {
    max-width: 54rem;
}

.parties-hero__copy .eyebrow {
    margin-bottom: 1rem;

    color: var(--red);
}

.parties-hero__copy h1 {
    max-width: 9ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size:
        clamp(4.8rem, 8.2vw, 8.2rem);
    font-weight: 900;
    line-height: 0.79;

    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.parties-hero__lede {
    max-width: 39rem;

    margin:
        0
        0
        2rem;

    color: var(--text-muted);

    font-size:
        clamp(1rem, 1.3vw, 1.15rem);

    line-height: 1.7;
}

.parties-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1.4rem;
}


/* ==========================================================================
   Party Ticket
   ========================================================================== */

.party-ticket {
    position: relative;

    border:
        4px
        solid
        var(--ink);

    background: var(--gold);
    color: var(--ink);

    box-shadow:
        0.75rem
        0.75rem
        0
        rgba(23, 21, 18, 0.12);
}

.party-ticket::before,
.party-ticket::after {
    content: "";

    position: absolute;

    left: -0.7rem;

    width: 1.15rem;
    height: 1.15rem;

    border:
        3px
        solid
        var(--ink);

    border-radius: 50%;

    background: var(--paper);
}

.party-ticket::before {
    top: 30%;
}

.party-ticket::after {
    bottom: 30%;
}

.party-ticket__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        2px
        dashed
        rgba(23, 21, 18, 0.5);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.party-ticket__top strong {
    padding:
        0.35rem
        0.55rem;

    background: var(--ink);
    color: var(--paper-light);

    font-size: 0.55rem;
}

.party-ticket dl {
    margin: 0;
}

.party-ticket dl > div {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    align-items: center;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(23, 21, 18, 0.28);
}

.party-ticket dt {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.party-ticket dd {
    margin: 0;

    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 800;

    text-align: right;
}

.party-ticket__status {
    margin: 0;

    padding:
        0.95rem
        1.2rem;

    background: var(--red);
    color: var(--paper-light);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* ==========================================================================
   Parties Jump Navigation
   ========================================================================== */

.parties-jump {
    position: sticky;
    top: 0;
    z-index: 40;

    border-bottom:
        2px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}

.parties-jump__inner {
    min-height: 3.8rem;

    display: flex;
    align-items: center;

    overflow-x: auto;

    scrollbar-width: none;
}

.parties-jump__inner::-webkit-scrollbar {
    display: none;
}

.parties-jump__label {
    flex: 0 0 auto;

    margin-right: 1rem;
    padding-right: 1rem;

    border-right:
        1px
        solid
        var(--rule-light);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.parties-jump a {
    flex: 0 0 auto;

    display: block;

    padding:
        1.45rem
        1rem;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color var(--ease),
        background var(--ease);
}

.parties-jump a:hover,
.parties-jump a:focus-visible {
    background:
        rgba(242, 230, 207, 0.08);

    color: var(--gold);
}


/* ==========================================================================
   Party Editorial Feature
   ========================================================================== */

.party-editorial {
    position: relative;

    min-height:
        clamp(42rem, 60vw, 54rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(22rem, 0.75fr);

    overflow: hidden;

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--ink);
    color: var(--paper-light);
}

.party-editorial__media {
    position: relative;

    min-height: inherit;

    margin: 0;

    overflow: hidden;

    border-right:
        3px
        solid
        var(--ink);
}

.party-editorial__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 21, 18, 0.04) 0%,
            rgba(23, 21, 18, 0.02) 58%,
            rgba(23, 21, 18, 0.38) 100%
        ),
        linear-gradient(
            180deg,
            rgba(23, 21, 18, 0.04) 0%,
            rgba(23, 21, 18, 0.22) 100%
        );

    pointer-events: none;
}

.party-editorial__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 54% center;

    filter:
        saturate(0.9)
        contrast(1.05)
        brightness(0.84);
}

.party-editorial__media figcaption {
    position: absolute;
    z-index: 2;

    left:
        clamp(1.5rem, 4vw, 4rem);

    bottom:
        clamp(1.5rem, 3vw, 2.5rem);

    margin: 0;

    padding:
        0.45rem
        0.65rem;

    background: var(--ink);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* Right editorial rail */

.party-editorial__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(3rem, 6vw, 6rem);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 30px,
            rgba(242, 230, 207, 0.035) 30px,
            rgba(242, 230, 207, 0.035) 31px
        ),
        var(--red);
}

.party-editorial__content .eyebrow {
    margin-bottom: 1rem;

    color: var(--gold);
}

.party-editorial__content h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.5rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(3.8rem, 5.8vw, 6rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.party-editorial__content > p:not(.eyebrow) {
    max-width: 31rem;

    margin:
        0
        0
        1.25rem;

    color:
        rgba(242, 230, 207, 0.8);

    line-height: 1.7;
}

.party-editorial__note {
    max-width: 30rem;

    margin-top: 1.5rem;

    padding-top: 1rem;

    border-top:
        2px
        solid
        var(--gold);
}

.party-editorial__note span {
    display: block;

    margin-bottom: 0.55rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.party-editorial__note strong {
    display: block;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
}


/* ==========================================================================
   Parties Top Half - Tablet
   ========================================================================== */

@media (max-width: 980px) {
    .parties-hero__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .party-ticket {
        width: min(100%, 38rem);
    }

    .party-editorial {
        min-height: 0;

        grid-template-columns: 1fr;
    }

    .party-editorial__media {
        min-height:
            clamp(28rem, 64vw, 40rem);

        border-right: 0;
        border-bottom:
            3px
            solid
            var(--ink);
    }

    .party-editorial__content {
        padding:
            4.5rem
            clamp(2rem, 6vw, 4rem);
    }
}


/* ==========================================================================
   Parties Top Half - Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .parties-hero {
        padding-block: 4rem;
    }

    .parties-hero::before {
        display: none;
    }

    .parties-hero__copy h1 {
        font-size:
            clamp(4rem, 16vw, 5.6rem);
    }

    .parties-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .parties-hero__actions .button {
        width: 100%;
    }

    .party-ticket dl > div {
        grid-template-columns: 1fr;

        gap: 0.35rem;
    }

    .party-ticket dd {
        text-align: left;
    }

    .parties-jump__label {
        display: none;
    }

    .parties-jump a {
        padding-inline: 0.85rem;
    }

    .party-editorial__media {
        min-height: 25rem;
    }

    .party-editorial__content {
        padding:
            3.5rem
            1.5rem;
    }

    .party-editorial__content h2 {
        font-size:
            clamp(3.6rem, 15vw, 5rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - PARTY SITUATIONS
   ========================================================================== */

.party-situations {
    scroll-margin-top: 4rem;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}


/* ==========================================================================
   Situations Section Heading
   ========================================================================== */

.party-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(16rem, 0.85fr);

    align-items: end;

    gap:
        clamp(2rem, 6vw, 6rem);

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-bottom: 1.5rem;

    border-bottom:
        4px
        solid
        var(--ink);
}

.party-section-heading .eyebrow {
    margin:
        0
        0
        0.8rem;

    color: var(--red);
}

.party-section-heading h2 {
    max-width: 9ch;

    margin: 0;

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.party-section-heading > p {
    max-width: 28rem;

    margin: 0;

    color: var(--text-muted);

    line-height: 1.7;
}


/* ==========================================================================
   Situation Records
   ========================================================================== */

.party-situation-list {
    border-top:
        5px
        solid
        var(--ink);
}

.party-situation {
    display: grid;

    grid-template-columns:
        clamp(6rem, 10vw, 9rem)
        minmax(0, 1fr)
        minmax(9rem, auto);

    align-items: center;

    min-height:
        clamp(9rem, 13vw, 11rem);

    border-bottom:
        1px
        solid
        var(--rule);
}


/* Number rail */

.party-situation__number {
    align-self: stretch;

    display: flex;
    align-items: center;

    padding-right:
        clamp(1rem, 2vw, 2rem);

    border-right:
        1px
        solid
        var(--rule);

    color:
        rgba(23, 21, 18, 0.14);

    font-family: var(--font-display);
    font-size:
        clamp(4.5rem, 8vw, 7rem);
    font-weight: 900;
    line-height: 0.78;
}


/* Main copy */

.party-situation__copy {
    padding:
        1.6rem
        clamp(1.5rem, 4vw, 4rem);
}

.party-situation__label {
    margin:
        0
        0
        0.4rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.party-situation h3 {
    margin:
        0
        0
        0.45rem;

    font-family: var(--font-display);
    font-size:
        clamp(2.4rem, 4vw, 3.8rem);
    font-weight: 900;
    line-height: 0.88;

    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.party-situation__copy > p:last-child {
    max-width: 42rem;

    margin: 0;

    color: var(--text-muted);

    font-size: 0.88rem;
    line-height: 1.6;
}


/* Status stamp */

.party-situation__stamp {
    justify-self: end;

    margin-right:
        clamp(1rem, 3vw, 2.5rem);

    padding:
        0.7rem
        0.85rem;

    border:
        2px
        solid
        var(--red);

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-align: center;
    text-transform: uppercase;

    transform: rotate(-1deg);
}


/* Slight variation so the list feels printed, not templated */

.party-situation:nth-child(even)
.party-situation__stamp {
    transform: rotate(1deg);
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .party-section-heading {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .party-situation {
        grid-template-columns:
            6rem
            minmax(0, 1fr);
    }

    .party-situation__stamp {
        grid-column: 2;

        justify-self: start;

        margin:
            0
            0
            1.5rem
            clamp(1.5rem, 4vw, 4rem);
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .party-situations {
        padding-block: 4rem;
    }

    .party-section-heading h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .party-situation {
        grid-template-columns:
            4.5rem
            minmax(0, 1fr);

        min-height: 0;
    }

    .party-situation__number {
        padding-right: 0.75rem;

        font-size: 3.4rem;
    }

    .party-situation__copy {
        padding:
            1.5rem
            1.2rem
            1rem;
    }

    .party-situation h3 {
        font-size:
            clamp(2.1rem, 10vw, 2.9rem);
    }

    .party-situation__stamp {
        margin:
            0
            0
            1.4rem
            1.2rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - PARTY FOOD DRINK LEDGER
   ========================================================================== */

.party-food-drink {
    scroll-margin-top: 4rem;

    padding-block: 0;

    overflow: hidden;

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--green);
    color: var(--paper-light);
}


/* ==========================================================================
   Main Split
   ========================================================================== */

.party-food-drink__grid {
    display: grid;

    grid-template-columns:
        minmax(18rem, 0.68fr)
        minmax(0, 1.32fr);

    gap: 0;

    align-items: stretch;
}


/* ==========================================================================
   Left Editorial Rail
   ========================================================================== */

.party-food-drink__heading {
    padding:
        clamp(5rem, 9vw, 8rem)
        clamp(3rem, 6vw, 6rem)
        clamp(5rem, 9vw, 8rem)
        0;

    background: var(--green);
}

.party-food-drink__heading .eyebrow {
    margin:
        0
        0
        0.9rem;

    color: var(--gold);
}

.party-food-drink__heading h2 {
    max-width: 8ch;

    margin:
        0
        0
        1.4rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 6.5vw, 6.5rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.party-food-drink__heading > p:last-child {
    max-width: 30rem;

    margin: 0;

    color:
        rgba(242, 230, 207, 0.72);

    line-height: 1.7;
}


/* ==========================================================================
   Catering Ledger
   ========================================================================== */

.party-food-board {
    position: relative;

    padding:
        clamp(5rem, 9vw, 8rem)
        0
        clamp(5rem, 9vw, 8rem)
        clamp(3rem, 6vw, 6rem);

    border-left:
        3px
        solid
        var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}


/*
   Extend cream board all the way to the viewport edge.
*/

.party-food-board::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    bottom: 0;
    left: 0;

    width: 100vw;

    background: var(--paper-light);

    pointer-events: none;
}

.party-food-board > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   Food Rows
   ========================================================================== */

.party-food-board article {
    display: grid;

    grid-template-columns:
        clamp(5rem, 8vw, 7rem)
        minmax(0, 1fr);

    align-items: center;

    min-height:
        clamp(7rem, 10vw, 9rem);

    border-top:
        1px
        solid
        var(--rule);
}

.party-food-board article:first-child {
    border-top:
        4px
        solid
        var(--ink);
}

.party-food-board article > span {
    align-self: stretch;

    display: flex;
    align-items: center;

    padding-right:
        clamp(1rem, 2vw, 2rem);

    border-right:
        1px
        solid
        var(--rule);

    color:
        rgba(23, 21, 18, 0.14);

    font-family: var(--font-display);
    font-size:
        clamp(3.6rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 0.8;
}

.party-food-board article > div {
    padding:
        1.4rem
        clamp(1.5rem, 4vw, 3.5rem);
}

.party-food-board h3 {
    margin:
        0
        0
        0.35rem;

    font-family: var(--font-display);
    font-size:
        clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight: 900;
    line-height: 0.9;

    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.party-food-board article p {
    margin: 0;

    color: var(--text-muted);

    font-size: 0.86rem;
    line-height: 1.55;
}


/* ==========================================================================
   Ledger Links
   ========================================================================== */

.party-food-board__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1.5rem;

    padding-top: 1.5rem;

    border-top:
        4px
        solid
        var(--ink);
}

.party-food-board__links .text-link {
    color: var(--red);
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .party-food-drink__grid {
        grid-template-columns: 1fr;
    }

    .party-food-drink__heading {
        padding:
            4.5rem
            0;
    }

    .party-food-board {
        padding:
            4.5rem
            0;

        border-top:
            3px
            solid
            var(--ink);

        border-left: 0;
    }

    .party-food-board::before {
        left: 50%;

        width: 100vw;

        transform: translateX(-50%);
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .party-food-drink__heading h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .party-food-board article {
        grid-template-columns:
            4.25rem
            minmax(0, 1fr);

        min-height: 6.5rem;
    }

    .party-food-board article > span {
        padding-right: 0.75rem;

        font-size: 3.2rem;
    }

    .party-food-board article > div {
        padding:
            1.3rem
            1.2rem;
    }

    .party-food-board h3 {
        font-size:
            clamp(2rem, 9vw, 2.7rem);
    }

    .party-food-board__links {
        align-items: flex-start;
        flex-direction: column;

        gap: 1rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - PARTY PROCESS
   ========================================================================== */

.party-process {
    scroll-margin-top: 4rem;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}


/* ==========================================================================
   Dark Section Heading
   ========================================================================== */

.party-process .party-section-heading {
    border-bottom-color: var(--paper-light);
}

.party-process .party-section-heading .eyebrow {
    color: var(--gold);
}

.party-process .party-section-heading h2 {
    color: var(--paper-light);
}

.party-process .party-section-heading > p {
    color:
        rgba(242, 230, 207, 0.68);
}


/* ==========================================================================
   Three-Step Procedure
   ========================================================================== */

.party-process__steps {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin: 0;
    padding: 0;

    border-top:
        4px
        solid
        var(--gold);

    border-left:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    list-style: none;
}

.party-process__steps li {
    position: relative;

    min-height:
        clamp(22rem, 30vw, 28rem);

    display: flex;
    flex-direction: column;

    padding:
        clamp(2rem, 4vw, 3.5rem);

    border-right:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    overflow: hidden;
}


/* Giant background step number */

.party-process__number {
    display: block;

    margin-bottom: auto;

    color:
        rgba(242, 230, 207, 0.09);

    font-family: var(--font-display);
    font-size:
        clamp(6rem, 11vw, 10rem);
    font-weight: 900;
    line-height: 0.72;

    letter-spacing: -0.04em;
}


/* Utility label */

.party-process__label {
    margin:
        2rem
        0
        0.65rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* Step title */

.party-process h3 {
    max-width: 10ch;

    margin:
        0
        0
        1rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(2.6rem, 4.5vw, 4rem);
    font-weight: 900;
    line-height: 0.86;

    letter-spacing: -0.025em;
    text-transform: uppercase;
}


/* Step description */

.party-process__steps li div > p:last-child {
    max-width: 24rem;

    margin: 0;

    color:
        rgba(242, 230, 207, 0.7);

    font-size: 0.88rem;
    line-height: 1.65;
}


/* Small printed mark */

.party-process__steps li::after {
    content: "PROCEDURE";

    position: absolute;

    top: 1.25rem;
    right: 1.25rem;

    color:
        rgba(242, 230, 207, 0.3);

    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .party-process__steps {
        grid-template-columns: 1fr;
    }

    .party-process__steps li {
        min-height: 0;

        display: grid;

        grid-template-columns:
            7rem
            minmax(0, 1fr);

        gap: 2rem;

        align-items: center;
    }

    .party-process__number {
        margin: 0;

        font-size: 6rem;
    }

    .party-process__label {
        margin-top: 0;
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .party-process {
        padding-block: 4rem;
    }

    .party-process__steps li {
        grid-template-columns:
            4.5rem
            minmax(0, 1fr);

        gap: 1.2rem;

        padding:
            1.75rem
            1.25rem;
    }

    .party-process__number {
        font-size: 4rem;
    }

    .party-process h3 {
        font-size:
            clamp(2.3rem, 11vw, 3.2rem);
    }

    .party-process__steps li::after {
        display: none;
    }
}

/* ==========================================================================
   BEER PRESSURE - PARTY INQUIRY
   ========================================================================== */

.party-inquiry {
    scroll-margin-top: 4rem;

    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(23, 21, 18, 0.035) 34px,
            rgba(23, 21, 18, 0.035) 35px
        ),
        var(--paper);

    color: var(--ink);
}


/* Oversized editorial background */

.party-inquiry::before {
    content: "BOOK IT";

    position: absolute;

    right:
        clamp(1rem, 4vw, 4rem);

    bottom: -0.12em;

    color:
        rgba(23, 21, 18, 0.045);

    font-family: var(--font-display);
    font-size:
        clamp(7rem, 17vw, 16rem);
    font-weight: 900;
    line-height: 0.74;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   Main Layout
   ========================================================================== */

.party-inquiry__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(20rem, 0.85fr);

    align-items: center;

    gap:
        clamp(3rem, 8vw, 8rem);
}


/* ==========================================================================
   Copy
   ========================================================================== */

.party-inquiry__copy .eyebrow {
    margin:
        0
        0
        0.9rem;

    color: var(--red);
}

.party-inquiry__copy h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.4rem;

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.party-inquiry__copy > p:last-child {
    max-width: 39rem;

    margin: 0;

    color: var(--text-muted);

    line-height: 1.7;
}


/* ==========================================================================
   Contact Dossier
   ========================================================================== */

.party-inquiry__contact {
    border:
        4px
        solid
        var(--ink);

    background: var(--green);
    color: var(--paper-light);

    box-shadow:
        0.75rem
        0.75rem
        0
        rgba(23, 21, 18, 0.12);
}

.party-inquiry__contact > div {
    padding:
        1.4rem
        1.4rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}

.party-inquiry__contact > div span {
    display: block;

    margin-bottom: 0.45rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.party-inquiry__contact > div a {
    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 1;

    letter-spacing: -0.02em;
    text-decoration: none;
    text-transform: uppercase;
}

.party-inquiry__contact > div a:hover,
.party-inquiry__contact > div a:focus-visible {
    color: var(--gold);
}


/* CTA footer */

.party-inquiry__contact > .button {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 4.8rem;

    border: 0;
    border-top:
        3px
        solid
        var(--ink);

    background: var(--gold);
    color: var(--ink);

    box-shadow: none;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .party-inquiry__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .party-inquiry__copy {
        max-width: 42rem;
    }

    .party-inquiry__contact {
        width: min(100%, 40rem);
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .party-inquiry {
        padding-block: 4rem;
    }

    .party-inquiry::before {
        display: none;
    }

    .party-inquiry__copy h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .party-inquiry__contact > div a {
        font-size:
            clamp(1.55rem, 7vw, 2rem);

        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   BEER PRESSURE - PARTY INQUIRY FINAL FIX
   ========================================================================== */


/* Remove excessive dead space after the process board */

.party-process {
    padding-bottom: clamp(2.75rem, 4vw, 4rem);
}


/* Keep long contact information inside the dossier */

.party-inquiry__contact > div a {
    display: block;

    max-width: 100%;

    font-size:
        clamp(1.45rem, 2.35vw, 2.15rem);

    line-height: 1.05;

    overflow-wrap: anywhere;
    word-break: normal;
}


/* Email needs slightly tighter typography than the phone number */

.party-inquiry__contact > div:first-child a {
    font-size:
        clamp(1.25rem, 2vw, 1.85rem);

    letter-spacing: -0.025em;
}


/* Mobile */

@media (max-width: 600px) {
    .party-process {
        padding-bottom: 2.75rem;
    }

    .party-inquiry__contact > div a,
    .party-inquiry__contact > div:first-child a {
        font-size:
            clamp(1.25rem, 6vw, 1.75rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - CONTACT HERO
   ========================================================================== */

.contact-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(23, 21, 18, 0.035) 34px,
            rgba(23, 21, 18, 0.035) 35px
        ),
        var(--paper);

    color: var(--ink);
}


/* Oversized directory watermark */

.contact-hero::before {
    content: "HOUSE DIRECTORY";

    position: absolute;

    top:
        clamp(2rem, 4vw, 3.5rem);

    right:
        clamp(2rem, 5vw, 5rem);

    color:
        rgba(23, 21, 18, 0.05);

    font-family: var(--font-display);
    font-size:
        clamp(5rem, 10vw, 9.5rem);
    font-weight: 900;
    line-height: 0.78;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}


/* Main hero grid */

.contact-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(21rem, 0.8fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}


/* Hero copy */

.contact-hero__copy {
    max-width: 52rem;
}

.contact-hero__copy .eyebrow {
    margin-bottom: 1rem;

    color: var(--red);
}

.contact-hero__copy h1 {
    max-width: 9ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size:
        clamp(4.8rem, 8vw, 8rem);
    font-weight: 900;
    line-height: 0.79;

    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.contact-hero__lede {
    max-width: 39rem;

    margin:
        0
        0
        2rem;

    color: var(--text-muted);

    font-size:
        clamp(1rem, 1.3vw, 1.15rem);

    line-height: 1.7;
}

.contact-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1.4rem;
}


/* ==========================================================================
   Contact Directory Board
   ========================================================================== */

.contact-directory {
    position: relative;

    border:
        4px
        solid
        var(--ink);

    background: var(--green);
    color: var(--paper-light);

    box-shadow:
        0.75rem
        0.75rem
        0
        rgba(23, 21, 18, 0.12);
}


/* Inner printed border */

.contact-directory::before {
    content: "";

    position: absolute;
    inset: 0.45rem;

    border:
        1px
        solid
        rgba(242, 230, 207, 0.16);

    pointer-events: none;
}


/* Directory header */

.contact-directory__top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.2);

    color:
        rgba(242, 230, 207, 0.72);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-directory__top strong {
    padding:
        0.35rem
        0.55rem;

    background: var(--gold);
    color: var(--ink);

    font-size: 0.56rem;
}


/* Directory entries */

.contact-directory dl {
    position: relative;
    z-index: 1;

    margin: 0;
}

.contact-directory dl > div {
    display: grid;

    grid-template-columns:
        minmax(5.5rem, 0.55fr)
        minmax(0, 1.45fr);

    align-items: center;

    gap: 1rem;

    min-height: 5.3rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}

.contact-directory dt {
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.contact-directory dd {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;

    text-align: right;
}

.contact-directory dd a {
    color: inherit;

    text-decoration: none;

    overflow-wrap: anywhere;
}

.contact-directory dd a:hover,
.contact-directory dd a:focus-visible {
    color: var(--gold);
}


/* Status strip */

.contact-directory__status {
    position: relative;
    z-index: 1;

    margin: 0;

    padding:
        0.95rem
        1.2rem;

    background: var(--ink);
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    line-height: 1.4;
    text-transform: uppercase;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 980px) {
    .contact-hero__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .contact-directory {
        width: min(100%, 40rem);
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .contact-hero {
        padding-block: 4rem;
    }

    .contact-hero::before {
        display: none;
    }

    .contact-hero__copy h1 {
        font-size:
            clamp(4rem, 16vw, 5.6rem);
    }

    .contact-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-hero__actions .button {
        width: 100%;
    }

    .contact-directory dl > div {
        grid-template-columns: 1fr;

        gap: 0.4rem;
    }

    .contact-directory dd {
        text-align: left;
    }
}

/* ==========================================================================
   BEER PRESSURE - CONTACT ROUTES
   ========================================================================== */

.contact-routes {
    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}


/* ==========================================================================
   Section Heading
   ========================================================================== */

.contact-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(16rem, 0.85fr);

    align-items: end;

    gap:
        clamp(2rem, 6vw, 6rem);

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-bottom: 1.5rem;

    border-bottom:
        4px
        solid
        var(--paper-light);
}

.contact-section-heading .eyebrow {
    margin:
        0
        0
        0.8rem;

    color: var(--gold);
}

.contact-section-heading h2 {
    max-width: 9ch;

    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.contact-section-heading > p {
    max-width: 28rem;

    margin: 0;

    color:
        rgba(242, 230, 207, 0.68);

    line-height: 1.7;
}


/* ==========================================================================
   Routing Board
   ========================================================================== */

.contact-route-list {
    border-top:
        4px
        solid
        var(--gold);
}

.contact-route {
    display: grid;

    grid-template-columns:
        clamp(6rem, 10vw, 9rem)
        minmax(0, 1fr)
        minmax(10rem, auto);

    align-items: center;

    min-height:
        clamp(9rem, 13vw, 11rem);

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}


/* Number rail */

.contact-route__number {
    align-self: stretch;

    display: flex;
    align-items: center;

    padding-right:
        clamp(1rem, 2vw, 2rem);

    border-right:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    color:
        rgba(242, 230, 207, 0.09);

    font-family: var(--font-display);
    font-size:
        clamp(4.5rem, 8vw, 7rem);
    font-weight: 900;
    line-height: 0.78;
}


/* Main copy */

.contact-route > div {
    padding:
        1.6rem
        clamp(1.5rem, 4vw, 4rem);
}

.contact-route__label {
    margin:
        0
        0
        0.4rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.contact-route h3 {
    margin:
        0
        0
        0.5rem;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(2.4rem, 4vw, 3.8rem);
    font-weight: 900;
    line-height: 0.88;

    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.contact-route > div > p:last-child {
    max-width: 44rem;

    margin: 0;

    color:
        rgba(242, 230, 207, 0.66);

    font-size: 0.88rem;
    line-height: 1.6;
}


/* Action route */

.contact-route > .text-link {
    justify-self: end;

    margin-right:
        clamp(1rem, 3vw, 2.5rem);

    padding:
        0.8rem
        0;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-align: right;
    text-transform: uppercase;
}

.contact-route > .text-link:hover,
.contact-route > .text-link:focus-visible {
    color: var(--paper-light);
}


/* Small variation for the lost + found row */

.contact-route:last-child {
    background:
        rgba(242, 230, 207, 0.035);
}

.contact-route:last-child .contact-route__label,
.contact-route:last-child > .text-link {
    color: var(--red);
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .contact-section-heading {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .contact-route {
        grid-template-columns:
            6rem
            minmax(0, 1fr);
    }

    .contact-route > .text-link {
        grid-column: 2;

        justify-self: start;

        margin:
            0
            0
            1.5rem
            clamp(1.5rem, 4vw, 4rem);
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .contact-routes {
        padding-block: 4rem;
    }

    .contact-section-heading h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .contact-route {
        grid-template-columns:
            4.5rem
            minmax(0, 1fr);

        min-height: 0;
    }

    .contact-route__number {
        padding-right: 0.75rem;

        font-size: 3.4rem;
    }

    .contact-route > div {
        padding:
            1.5rem
            1.2rem
            1rem;
    }

    .contact-route h3 {
        font-size:
            clamp(2.1rem, 10vw, 2.9rem);
    }

    .contact-route > .text-link {
        margin:
            0
            0
            1.4rem
            1.2rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - CONTACT LOCATION
   ========================================================================== */

.contact-location {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(23, 21, 18, 0.035) 34px,
            rgba(23, 21, 18, 0.035) 35px
        ),
        var(--paper);

    color: var(--ink);
}


/* Giant address marker */

.contact-location::before {
    content: "2148";

    position: absolute;

    left:
        clamp(1rem, 4vw, 4rem);

    bottom: -0.18em;

    color:
        rgba(23, 21, 18, 0.045);

    font-family: var(--font-display);
    font-size:
        clamp(10rem, 23vw, 22rem);
    font-weight: 900;
    line-height: 0.72;

    letter-spacing: -0.05em;

    pointer-events: none;
}


/* ==========================================================================
   Main Grid
   ========================================================================== */

.contact-location__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(21rem, 0.95fr);

    align-items: center;

    gap:
        clamp(3rem, 8vw, 8rem);
}


/* ==========================================================================
   Address Dossier
   ========================================================================== */

.contact-location__copy .eyebrow {
    margin:
        0
        0
        0.9rem;

    color: var(--red);
}

.contact-location__copy h2 {
    max-width: 7ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size:
        clamp(4.2rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.contact-location__copy address {
    width: fit-content;

    margin:
        0
        0
        1.5rem;

    padding:
        1.1rem
        1.25rem;

    border-top:
        4px
        solid
        var(--ink);

    border-bottom:
        1px
        solid
        var(--rule);

    color: var(--ink);

    font-family: var(--font-mono);
    font-size:
        clamp(0.72rem, 1vw, 0.82rem);
    font-style: normal;
    font-weight: 800;
    line-height: 1.7;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.contact-location__copy > p:not(.eyebrow) {
    max-width: 36rem;

    margin:
        0
        0
        1.5rem;

    color: var(--text-muted);

    line-height: 1.7;
}

.contact-location__copy .text-link {
    color: var(--red);
}


/* ==========================================================================
   Posted Hours Board
   ========================================================================== */

.contact-hours {
    position: relative;

    border:
        4px
        solid
        var(--ink);

    background: var(--ink);
    color: var(--paper-light);

    box-shadow:
        0.75rem
        0.75rem
        0
        rgba(23, 21, 18, 0.12);
}

.contact-hours::before {
    content: "";

    position: absolute;
    inset: 0.45rem;

    border:
        1px
        solid
        rgba(242, 230, 207, 0.14);

    pointer-events: none;
}

.contact-hours__top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.25rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    color:
        rgba(242, 230, 207, 0.7);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-hours__top strong {
    padding:
        0.35rem
        0.55rem;

    background: var(--red);
    color: var(--paper-light);

    font-size: 0.56rem;
}


/* Hours rows */

.contact-hours dl {
    position: relative;
    z-index: 1;

    margin: 0;
}

.contact-hours dl > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    min-height: 5.4rem;

    gap: 2rem;

    padding:
        1rem
        1.25rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.16);
}

.contact-hours dt {
    color:
        rgba(242, 230, 207, 0.62);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-hours dd {
    margin: 0;

    color: var(--gold);

    font-family: var(--font-display);
    font-size:
        clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 900;
    line-height: 0.88;

    text-align: right;
    text-transform: uppercase;
}


/* Kitchen note */

.contact-hours > p {
    position: relative;
    z-index: 1;

    margin: 0;

    padding:
        1rem
        1.25rem;

    background: var(--green);
    color: var(--paper-light);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .contact-location__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .contact-location__copy {
        max-width: 42rem;
    }

    .contact-hours {
        width: min(100%, 40rem);
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .contact-location {
        padding-block: 4rem;
    }

    .contact-location::before {
        display: none;
    }

    .contact-location__copy h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .contact-location__copy address {
        width: 100%;
    }

    .contact-hours dl > div {
        min-height: 4.8rem;

        gap: 1rem;
    }

    .contact-hours dd {
        font-size:
            clamp(1.8rem, 8vw, 2.3rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - CONTACT MESSAGE FORM
   ========================================================================== */

.contact-message {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}


/* Oversized editorial mark */

.contact-message::before {
    content: "WRITTEN STATEMENT";

    position: absolute;

    left:
        clamp(1rem, 4vw, 4rem);

    bottom: -0.13em;

    color:
        rgba(23, 21, 18, 0.045);

    font-family: var(--font-display);
    font-size:
        clamp(6rem, 13vw, 12rem);
    font-weight: 900;
    line-height: 0.76;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}


/* Main layout */

.contact-message__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(24rem, 1.2fr);

    align-items: start;

    gap:
        clamp(3rem, 8vw, 8rem);
}


/* Copy */

.contact-message__copy {
    padding-top: 1rem;
}

.contact-message__copy .eyebrow {
    margin:
        0
        0
        0.9rem;

    color: var(--red);
}

.contact-message__copy h2 {
    max-width: 7ch;

    margin:
        0
        0
        1.4rem;

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 7rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.contact-message__copy > p:not(.eyebrow) {
    max-width: 30rem;

    margin:
        0
        0
        2rem;

    color: var(--text-muted);

    line-height: 1.7;
}


/* Faster option notice */

.contact-message__note {
    max-width: 28rem;

    padding-top: 1rem;

    border-top:
        3px
        solid
        var(--ink);
}

.contact-message__note span {
    display: block;

    margin-bottom: 0.45rem;

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-message__note strong {
    display: block;

    font-size: 0.92rem;
    line-height: 1.5;
}


/* ==========================================================================
   Form Panel
   ========================================================================== */

.contact-form {
    padding:
        clamp(2rem, 4vw, 3.5rem);

    border:
        4px
        solid
        var(--ink);

    background: var(--green);
    color: var(--paper-light);

    box-shadow:
        0.75rem
        0.75rem
        0
        rgba(23, 21, 18, 0.12);
}


/* Fields */

.contact-form__field {
    margin-bottom: 1.4rem;
}

.contact-form__field label {
    display: block;

    margin-bottom: 0.5rem;

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;

    display: block;

    margin: 0;

    padding:
        0.9rem
        1rem;

    border:
        2px
        solid
        var(--ink);

    border-radius: 0;

    outline: 0;

    background: var(--paper-light);
    color: var(--ink);

    font: inherit;
}

.contact-form__field input,
.contact-form__field select {
    min-height: 3.35rem;
}

.contact-form__field textarea {
    min-height: 12rem;

    resize: vertical;
}


/* Focus state */

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    border-color: var(--gold);

    box-shadow:
        0
        0
        0
        2px
        var(--gold);
}


/* Submit */

.contact-form > .button {
    width: 100%;

    min-height: 4.5rem;

    margin-top: 0.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-color: var(--ink);

    background: var(--gold);
    color: var(--ink);
}


/* Help text */

.contact-form__help {
    margin:
        1rem
        0
        0;

    color:
        rgba(242, 230, 207, 0.62);

    font-family: var(--font-mono);
    font-size: 0.54rem;
    line-height: 1.5;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .contact-message__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .contact-message__copy {
        max-width: 40rem;
    }

    .contact-form {
        width: min(100%, 44rem);
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .contact-message {
        padding-block: 4rem;
    }

    .contact-message::before {
        display: none;
    }

    .contact-message__copy h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .contact-form {
        padding:
            1.5rem;
    }
}

/* ==========================================================================
   BEER PRESSURE - CONTACT QUICK ANSWERS
   ========================================================================== */

.contact-before-you-ask {
    padding-block:
        clamp(5rem, 8vw, 7rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}


/* Main layout */

.contact-before-you-ask__grid {
    display: grid;

    grid-template-columns:
        minmax(17rem, 0.65fr)
        minmax(0, 1.35fr);

    align-items: start;

    gap:
        clamp(3rem, 8vw, 8rem);
}


/* Heading */

.contact-before-you-ask header .eyebrow {
    margin:
        0
        0
        0.9rem;

    color: var(--gold);
}

.contact-before-you-ask header h2 {
    max-width: 8ch;

    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 6.5vw, 6.5rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}


/* ==========================================================================
   Quick Answers
   ========================================================================== */

.contact-quick-answers {
    margin: 0;

    border-top:
        4px
        solid
        var(--gold);

    counter-reset: contact-answer;
}

.contact-quick-answers > div {
    position: relative;

    display: grid;

    grid-template-columns:
        clamp(4rem, 7vw, 6rem)
        minmax(12rem, 0.8fr)
        minmax(0, 1.2fr);

    align-items: center;

    min-height:
        clamp(7rem, 10vw, 9rem);

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    counter-increment: contact-answer;
}


/* Number */

.contact-quick-answers > div::before {
    content:
        "0"
        counter(contact-answer);

    color:
        rgba(242, 230, 207, 0.1);

    font-family: var(--font-display);
    font-size:
        clamp(3.2rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 0.8;
}


/* Question */

.contact-quick-answers dt {
    padding:
        1.5rem
        clamp(1rem, 3vw, 2.5rem);

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 0.95;

    text-transform: uppercase;
}


/* Answer */

.contact-quick-answers dd {
    margin: 0;

    padding:
        1.5rem
        0
        1.5rem
        clamp(1rem, 3vw, 2.5rem);

    border-left:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    color:
        rgba(242, 230, 207, 0.68);

    font-size: 0.9rem;
    line-height: 1.65;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {
    .contact-before-you-ask__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .contact-before-you-ask header {
        max-width: 36rem;
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .contact-before-you-ask {
        padding-block: 4rem;
    }

    .contact-before-you-ask header h2 {
        font-size:
            clamp(3.8rem, 15vw, 5.2rem);
    }

    .contact-quick-answers > div {
        grid-template-columns:
            4rem
            minmax(0, 1fr);

        align-items: start;

        padding-block: 1.25rem;
    }

    .contact-quick-answers > div::before {
        grid-row:
            1
            / span 2;

        padding-top: 0.35rem;

        font-size: 3rem;
    }

    .contact-quick-answers dt {
        padding:
            0
            0
            0.65rem
            1rem;

        font-size:
            clamp(1.7rem, 8vw, 2.2rem);
    }

    .contact-quick-answers dd {
        grid-column: 2;

        padding:
            0
            0
            0
            1rem;

        border-left: 0;
    }
}

/* ==========================================================================
   BEER PRESSURE - LEGAL PRIVACY DOCUMENT
   ========================================================================== */


/* ==========================================================================
   Legal Hero
   ========================================================================== */

.legal-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 34px,
            rgba(23, 21, 18, 0.035) 34px,
            rgba(23, 21, 18, 0.035) 35px
        ),
        var(--paper);

    color: var(--ink);
}

.legal-hero::before {
    content: "HOUSE POLICY";

    position: absolute;

    top:
        clamp(2rem, 4vw, 3.5rem);

    right:
        clamp(2rem, 5vw, 5rem);

    color:
        rgba(23, 21, 18, 0.05);

    font-family: var(--font-display);
    font-size:
        clamp(5rem, 11vw, 10rem);
    font-weight: 900;
    line-height: 0.78;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.legal-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(21rem, 0.8fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.legal-hero__copy {
    max-width: 53rem;
}

.legal-hero__copy .eyebrow {
    margin:
        0
        0
        1rem;

    color: var(--red);
}

.legal-hero__copy h1 {
    max-width: 9ch;

    margin:
        0
        0
        1.5rem;

    font-family: var(--font-display);
    font-size:
        clamp(4.8rem, 8vw, 8rem);
    font-weight: 900;
    line-height: 0.79;

    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.legal-hero__lede {
    max-width: 40rem;

    margin:
        0
        0
        1.75rem;

    color: var(--text-muted);

    font-size:
        clamp(1rem, 1.3vw, 1.15rem);

    line-height: 1.7;
}

.legal-hero__updated {
    width: fit-content;

    margin: 0;

    padding-top: 0.75rem;

    border-top:
        2px
        solid
        var(--ink);

    color: var(--red);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* ==========================================================================
   Privacy File Summary
   ========================================================================== */

.legal-summary {
    position: relative;

    border:
        4px
        solid
        var(--ink);

    background: var(--ink);
    color: var(--paper-light);

    box-shadow:
        0.75rem
        0.75rem
        0
        rgba(23, 21, 18, 0.12);
}

.legal-summary::before {
    content: "";

    position: absolute;
    inset: 0.45rem;

    border:
        1px
        solid
        rgba(242, 230, 207, 0.15);

    pointer-events: none;
}

.legal-summary__top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    color:
        rgba(242, 230, 207, 0.7);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-summary__top strong {
    padding:
        0.35rem
        0.55rem;

    background: var(--green);
    color: var(--paper-light);

    font-size: 0.55rem;
}

.legal-summary dl {
    position: relative;
    z-index: 1;

    margin: 0;
}

.legal-summary dl > div {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    align-items: center;

    min-height: 4.8rem;

    gap: 1rem;

    padding:
        0.9rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.16);
}

.legal-summary dt {
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legal-summary dd {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 800;

    text-align: right;
}

.legal-summary__status {
    position: relative;
    z-index: 1;

    margin: 0;

    padding:
        0.95rem
        1.2rem;

    background: var(--gold);
    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1.5;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ==========================================================================
   Legal Jump Navigation
   ========================================================================== */

.legal-jump {
    position: sticky;
    top: 0;
    z-index: 40;

    border-bottom:
        2px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}

.legal-jump__inner {
    min-height: 3.8rem;

    display: flex;
    align-items: center;

    overflow-x: auto;

    scrollbar-width: none;
}

.legal-jump__inner::-webkit-scrollbar {
    display: none;
}

.legal-jump__label {
    flex: 0 0 auto;

    margin-right: 1rem;
    padding-right: 1rem;

    border-right:
        1px
        solid
        var(--rule-light);

    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-jump a {
    flex: 0 0 auto;

    display: block;

    padding:
        1.45rem
        1rem;

    color: var(--paper-light);

    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color var(--ease),
        background var(--ease);
}

.legal-jump a:hover,
.legal-jump a:focus-visible {
    background:
        rgba(242, 230, 207, 0.08);

    color: var(--gold);
}


/* ==========================================================================
   Legal Document
   ========================================================================== */

.legal-document {
    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background: var(--paper-light);
    color: var(--ink);
}

.legal-document__grid {
    display: grid;

    grid-template-columns:
        minmax(13rem, 0.38fr)
        minmax(0, 1.62fr);

    align-items: start;

    gap:
        clamp(3rem, 7vw, 7rem);
}


/* Left policy rail */

.legal-document__rail {
    position: sticky;
    top: 6rem;

    padding-top: 1rem;

    border-top:
        4px
        solid
        var(--ink);
}

.legal-document__rail .eyebrow {
    margin:
        0
        0
        1rem;

    color: var(--red);
}

.legal-document__rail > p:last-child {
    max-width: 15rem;

    margin: 0;

    color: var(--text-muted);

    font-size: 0.82rem;
    line-height: 1.65;
}


/* Main legal content */

.legal-document__content {
    border-top:
        5px
        solid
        var(--ink);
}

.legal-section {
    scroll-margin-top: 5rem;

    display: grid;

    grid-template-columns:
        clamp(5rem, 8vw, 7rem)
        minmax(0, 1fr);

    border-bottom:
        1px
        solid
        var(--rule);
}

.legal-section__number {
    align-self: stretch;

    display: flex;
    align-items: flex-start;

    margin: 0;

    padding:
        clamp(2rem, 4vw, 3rem)
        1rem
        0
        0;

    border-right:
        1px
        solid
        var(--rule);

    color:
        rgba(23, 21, 18, 0.14);

    font-family: var(--font-display);
    font-size:
        clamp(3.4rem, 6vw, 5.2rem);
    font-weight: 900;
    line-height: 0.8;
}

.legal-section > div {
    padding:
        clamp(2rem, 4vw, 3rem)
        0
        clamp(2rem, 4vw, 3rem)
        clamp(1.5rem, 4vw, 3.5rem);
}

.legal-section h2 {
    max-width: 18ch;

    margin:
        0
        0
        1.1rem;

    font-family: var(--font-display);
    font-size:
        clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 900;
    line-height: 0.9;

    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.legal-section p {
    max-width: 50rem;

    margin:
        0
        0
        1rem;

    color: var(--text-muted);

    font-size: 0.92rem;
    line-height: 1.75;
}

.legal-section p:last-child {
    margin-bottom: 0;
}


/* Contact information at end of policy */

.legal-section address {
    width: fit-content;

    margin:
        1.25rem
        0;

    padding:
        1rem
        1.2rem;

    border-top:
        3px
        solid
        var(--ink);

    border-bottom:
        1px
        solid
        var(--rule);

    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.7;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.legal-section a {
    color: var(--red);

    font-weight: 700;
}

.legal-section--contact {
    background:
        rgba(23, 21, 18, 0.025);
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 980px) {
    .legal-hero__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .legal-summary {
        width: min(100%, 40rem);
    }

    .legal-document__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .legal-document__rail {
        position: static;

        max-width: 34rem;
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
    .legal-hero {
        padding-block: 4rem;
    }

    .legal-hero::before {
        display: none;
    }

    .legal-hero__copy h1 {
        font-size:
            clamp(4rem, 16vw, 5.6rem);
    }

    .legal-summary dl > div {
        grid-template-columns: 1fr;

        gap: 0.35rem;
    }

    .legal-summary dd {
        text-align: left;
    }

    .legal-jump__label {
        display: none;
    }

    .legal-jump a {
        padding-inline: 0.85rem;
    }

    .legal-document {
        padding-block: 4rem;
    }

    .legal-section {
        grid-template-columns:
            4rem
            minmax(0, 1fr);
    }

    .legal-section__number {
        padding-right: 0.6rem;

        font-size: 3rem;
    }

    .legal-section > div {
        padding:
            1.75rem
            0
            1.75rem
            1.2rem;
    }

    .legal-section h2 {
        font-size:
            clamp(2.1rem, 9vw, 2.8rem);
    }
}

/* ==========================================================================
   BEER PRESSURE - LEGAL CLOSING
   ========================================================================== */

.legal-closing {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(4rem, 7vw, 6rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background: var(--green);
    color: var(--paper-light);
}

.legal-closing::before {
    content: "FILE CLOSED";

    position: absolute;

    right:
        clamp(1rem, 4vw, 4rem);

    bottom: -0.14em;

    color:
        rgba(242, 230, 207, 0.055);

    font-family: var(--font-display);
    font-size:
        clamp(6rem, 14vw, 13rem);
    font-weight: 900;
    line-height: 0.74;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.legal-closing__inner {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        auto;

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.legal-closing .eyebrow {
    margin:
        0
        0
        0.8rem;

    color: var(--gold);
}

.legal-closing h2 {
    max-width: 10ch;

    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(3.8rem, 6vw, 6rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.legal-closing .button {
    min-width: 12rem;

    background: var(--gold);
    color: var(--ink);
}


/* Tablet */

@media (max-width: 800px) {
    .legal-closing__inner {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 2rem;
    }

    .legal-closing .button {
        width: fit-content;
    }
}


/* Mobile */

@media (max-width: 600px) {
    .legal-closing {
        padding-block: 4rem;
    }

    .legal-closing::before {
        display: none;
    }

    .legal-closing h2 {
        font-size:
            clamp(3.6rem, 15vw, 5rem);
    }

    .legal-closing .button {
        width: 100%;
    }
}

/* ==========================================================================
   BEER PRESSURE - 404 PAGE
   ========================================================================== */


/* ==========================================================================
   404 Hero
   ========================================================================== */

.error-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 9vw, 8rem);

    border-bottom:
        4px
        solid
        var(--ink);

    background:
        linear-gradient(
            115deg,
            rgba(23, 21, 18, 0.025),
            rgba(23, 21, 18, 0)
        ),
        var(--paper);

    color: var(--ink);
}

.error-hero::before {
    content: "MISSED CALL";

    position: absolute;

    top:
        clamp(1.5rem, 4vw, 3rem);

    right:
        clamp(1rem, 4vw, 4rem);

    color:
        rgba(23, 21, 18, 0.045);

    font-family: var(--font-display);
    font-size:
        clamp(5rem, 12vw, 11rem);
    font-weight: 900;
    line-height: 0.75;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.error-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(20rem, 0.75fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.error-hero__copy {
    max-width: 55rem;
}

.error-hero__copy .eyebrow {
    margin:
        0
        0
        1rem;

    color: var(--red);
}

.error-hero__number {
    margin:
        0
        0
        -0.1em;

    color: var(--gold);

    font-family: var(--font-display);
    font-size:
        clamp(6rem, 14vw, 12rem);
    font-weight: 900;
    line-height: 0.7;

    letter-spacing: -0.05em;
}

.error-hero h1 {
    max-width: 10ch;

    margin:
        1.2rem
        0
        1.5rem;

    font-family: var(--font-display);
    font-size:
        clamp(4rem, 7vw, 6.8rem);
    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.error-hero__lede {
    max-width: 42rem;

    margin:
        0
        0
        2rem;

    color: var(--text-muted);

    font-size:
        clamp(1rem, 1.35vw, 1.15rem);

    line-height: 1.7;
}

.error-hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 0.8rem;
}


/* ==========================================================================
   Incident Ticket
   ========================================================================== */

.error-ticket {
    position: relative;

    border:
        4px
        solid
        var(--ink);

    background: var(--green);
    color: var(--paper-light);

    box-shadow:
        0.8rem
        0.8rem
        0
        rgba(23, 21, 18, 0.14);
}

.error-ticket::before,
.error-ticket::after {
    content: "";

    position: absolute;
    left: -0.8rem;

    width: 1.25rem;
    height: 1.25rem;

    border:
        3px
        solid
        var(--ink);

    border-radius: 50%;

    background: var(--paper);
}

.error-ticket::before {
    top: 2.2rem;
}

.error-ticket::after {
    bottom: 2.2rem;
}

.error-ticket__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.2);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.error-ticket__top span {
    color:
        rgba(242, 230, 207, 0.72);
}

.error-ticket__top strong {
    padding:
        0.35rem
        0.55rem;

    background: var(--red);
    color: var(--paper-light);

    font-size: 0.55rem;
}

.error-ticket dl {
    margin: 0;
}

.error-ticket dl > div {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    min-height: 4.8rem;

    gap: 1rem;

    padding:
        0.9rem
        1.2rem;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);
}

.error-ticket dt {
    color: var(--gold);

    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.error-ticket dd {
    margin: 0;

    color: var(--paper-light);

    font-size: 0.78rem;
    font-weight: 800;

    text-align: right;
}

.error-ticket__stamp {
    margin: 0;

    padding:
        1rem
        1.2rem;

    background: var(--gold);
    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1.5;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ==========================================================================
   Recovery Board
   ========================================================================== */

.error-recovery {
    padding-block:
        clamp(5rem, 8vw, 7rem);

    border-bottom:
        4px
        solid
        var(--gold);

    background: var(--ink);
    color: var(--paper-light);
}

.error-recovery__inner {
    display: grid;

    grid-template-columns:
        minmax(15rem, 0.45fr)
        minmax(0, 1.55fr);

    align-items: start;

    gap:
        clamp(3rem, 7vw, 7rem);
}

.error-recovery__heading {
    border-top:
        4px
        solid
        var(--gold);

    padding-top: 1rem;
}

.error-recovery__heading .eyebrow {
    margin:
        0
        0
        1rem;

    color: var(--gold);
}

.error-recovery__heading h2 {
    max-width: 9ch;

    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(3.4rem, 5.5vw, 5.4rem);
    font-weight: 900;
    line-height: 0.83;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.error-recovery__links {
    border-top:
        4px
        solid
        var(--paper-light);
}

.error-recovery__links a {
    display: grid;

    grid-template-columns:
        4rem
        minmax(8rem, 0.5fr)
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(1rem, 3vw, 2rem);

    min-height: 6.3rem;

    padding:
        1rem
        0;

    border-bottom:
        1px
        solid
        rgba(242, 230, 207, 0.18);

    color: var(--paper-light);

    text-decoration: none;

    transition:
        color var(--ease),
        padding-left var(--ease);
}

.error-recovery__links a:hover,
.error-recovery__links a:focus-visible {
    padding-left: 0.7rem;

    color: var(--gold);
}

.error-recovery__links span {
    color:
        rgba(242, 230, 207, 0.3);

    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
}

.error-recovery__links strong {
    font-family: var(--font-display);
    font-size:
        clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;

    text-transform: uppercase;
}

.error-recovery__links small {
    max-width: 28rem;

    color:
        rgba(242, 230, 207, 0.65);

    font-size: 0.78rem;
    line-height: 1.55;
}


/* ==========================================================================
   404 Closing
   ========================================================================== */

.error-closing {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(4rem, 7vw, 6rem);

    background: var(--red);
    color: var(--paper-light);
}

.error-closing::before {
    content: "LAST CALL";

    position: absolute;

    right:
        clamp(1rem, 4vw, 4rem);

    bottom: -0.12em;

    color:
        rgba(242, 230, 207, 0.055);

    font-family: var(--font-display);
    font-size:
        clamp(6rem, 14vw, 13rem);
    font-weight: 900;
    line-height: 0.72;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: nowrap;

    pointer-events: none;
}

.error-closing__inner {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap:
        clamp(3rem, 7vw, 7rem);
}

.error-closing .eyebrow {
    margin:
        0
        0
        0.8rem;

    color: var(--gold);
}

.error-closing h2 {
    max-width: 11ch;

    margin: 0;

    color: var(--paper-light);

    font-family: var(--font-display);
    font-size:
        clamp(3.6rem, 6vw, 5.8rem);
    font-weight: 900;
    line-height: 0.83;

    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.error-closing .button {
    min-width: 11rem;

    background: var(--gold);
    color: var(--ink);
}


/* ==========================================================================
   404 Responsive
   ========================================================================== */

@media (max-width: 950px) {
    .error-hero__grid,
    .error-recovery__inner {
        grid-template-columns: 1fr;
    }

    .error-ticket {
        width: min(100%, 40rem);
    }

    .error-recovery__heading {
        max-width: 34rem;
    }
}


@media (max-width: 760px) {
    .error-closing__inner {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 2rem;
    }
}


@media (max-width: 600px) {
    .error-hero {
        padding-block: 4rem;
    }

    .error-hero::before,
    .error-closing::before {
        display: none;
    }

    .error-hero__number {
        font-size:
            clamp(5.5rem, 26vw, 8rem);
    }

    .error-hero h1 {
        font-size:
            clamp(3.5rem, 15vw, 5rem);
    }

    .error-hero__actions {
        display: grid;
    }

    .error-hero__actions .button {
        width: 100%;
    }

    .error-ticket dl > div {
        grid-template-columns: 1fr;

        gap: 0.3rem;
    }

    .error-ticket dd {
        text-align: left;
    }

    .error-recovery {
        padding-block: 4rem;
    }

    .error-recovery__links a {
        grid-template-columns:
            3.2rem
            minmax(0, 1fr);

        gap: 1rem;
    }

    .error-recovery__links small {
        grid-column: 2;
    }

    .error-recovery__links span {
        font-size: 2.2rem;
    }

    .error-closing {
        padding-block: 4rem;
    }

    .error-closing h2 {
        font-size:
            clamp(3.3rem, 14vw, 4.8rem);
    }

    .error-closing .button {
        width: 100%;
    }
}