/* Morrison Sites. */
/* Blocks: the custom sections from blocks/, their shared break-outs and the core block overrides, loaded after style.css. */

/* Break-outs. A section escapes .page-content or .page-xl to the viewport edge; html clips the scrollbar overflow. */
.full-bleed,
.page-content .alignfull,
.page-xl .alignfull {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.page-content .alignwide,
.page-xl .alignwide {
    width: min(100vw - 2 * var(--md-gutter), var(--md-wide));
    max-width: none;
    margin-left: calc(50% - min(50vw - var(--md-gutter), var(--md-wide) / 2));
    margin-right: calc(50% - min(50vw - var(--md-gutter), var(--md-wide) / 2));
}

/* Eyebrow above a section heading. Also a Paragraph block with this class in the editor. */
.section-label {
    display: block;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--md-text-color);
    margin: 0 0 0.75rem;
}

/* A small ship's wheel (images/wheel.svg) leads every eyebrow: the brand in the one place each section repeats. */
.section-label::before {
    content: "";
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    margin-right: 0.55em;
    vertical-align: -0.35em;
    background-color: currentColor;
    -webkit-mask: var(--md-mask-wheel, url("../images/wheel.svg")) center / contain no-repeat;
    mask: var(--md-mask-wheel, url("../images/wheel.svg")) center / contain no-repeat;
}

/* Section titles from the wireframe: uppercase slab with light tracking. Also a Heading block with this class. */
.section-heading,
.page-content .section-heading {
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 2rem;
}

/* A pasted Google Maps embed fills its column at 4:3 whatever size Google wrote on it. */
iframe[src*="google.com/maps"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 0;
}

/* Core blocks: square, flat, on the theme's lines. */
.wp-block-image img,
.wp-block-cover,
.wp-block-cover__image-background,
.wp-block-media-text__media img,
.wp-block-group,
.wp-block-columns {
    border-radius: 0;
}

/* Core's "Enlarge on click" button carries z-index 100; isolating each image keeps it over its photo but under the sticky
   header (10) and the menu overlay (9). The opened lightbox is its own fixed layer and still covers everything. */
.wp-lightbox-container {
    isolation: isolate;
}

.wp-block-separator {
    border: none;
    border-top: 1px solid var(--md-line-color);
    margin: 2.5rem auto;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    width: 6rem;
}

.wp-block-quote,
.page-content .wp-block-quote {
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--md-accent-color);
    font-style: italic;
}

.wp-block-quote cite {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--md-muted-color);
}

.wp-block-pullquote {
    border-top: 3px solid var(--md-accent-color);
    border-bottom: 3px solid var(--md-accent-color);
    padding: 2rem 0;
}

.wp-block-table td,
.wp-block-table th {
    border: 1px solid var(--md-line-color);
    padding: 0.6rem 0.8rem;
}

.wp-block-table th {
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}

/* The core Search block borrows the theme's form frame. */
.wp-block-search__input {
    border: 3px solid var(--md-accent-color);
    border-radius: 0;
    padding: 0.6rem 0.9rem;
}

.wp-block-search__button {
    border-radius: 0;
}

/* blocks/cta.php. */
/* Placed last from the editor, the panel runs flush into the footer rather than floating above it. */
.page-main:has(> .page-content > .cta:last-child),
.page-main:has(> .canvas > .cta:last-child) {
    padding-bottom: 0;
}

.cta {
    padding-block: clamp(3rem, 6vw, 5rem);
    background-color: var(--md-panel-color);
}

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

.page-content .cta-heading,
.cta-heading {
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    line-height: 1.08;
    margin: 0 0 1rem;
}

.page-content .cta-body,
.cta-body {
    max-width: 46ch;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.page-content .cta-meta,
.cta-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--md-muted-color);
}

/* Measured: a call and an email button need 437px, so they wrap below a 485px viewport inside .page-l. */
@media (max-width: 30.5rem) {
    .cta-actions .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* blocks/feature.php. */
.feature {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.feature-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.feature-content,
.feature-visual {
    flex: 1 1 50%;
    min-width: 0;
    width: 100%;
}

.page-content .feature-heading,
.feature-heading {
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    line-height: 1.08;
    margin: 0 0 1.25rem;
}

.feature-body {
    max-width: 52ch;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.feature-body > :last-child {
    margin-bottom: 0;
}

.feature-link {
    display: inline-block;
    font-family: var(--md-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}

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

/* Holds the space until an image is chosen; it reads as a gap, not a broken image. */
.feature-placeholder {
    aspect-ratio: 4 / 3;
    border: 3px dashed var(--md-line-color);
    background-color: var(--md-bg-color);
}

@media (min-width: 48rem) {
    .feature-grid {
        flex-direction: row;
        gap: 4rem;
    }

    .feature--right .feature-grid {
        flex-direction: row-reverse;
    }
}

/* blocks/action-bar.php. Phones only: a nav pinned to the bottom edge with three or four equal targets. */
.action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    display: flex;
    background-color: var(--md-bg-color);
    border-top: 3px solid var(--md-accent-color);
    padding-bottom: env(safe-area-inset-bottom);
}

.action-bar-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 56px;
    padding: 0.4rem 0.25rem;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--md-text-color);
}

.action-bar-link + .action-bar-link {
    border-left: 1px solid var(--md-line-color);
}

.action-bar-link:focus-visible {
    outline-offset: -3px;
}

.action-bar-icon {
    width: 22px;
    height: 22px;
}

.action-bar-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The bar covers the bottom 56px on phones, so the page ends above it. */
@media (max-width: 47.9375rem) {
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
}

@media (min-width: 48rem) {
    .action-bar {
        display: none;
    }
}

body.md-menu-open .action-bar {
    display: none;
}

@media print {
    .action-bar {
        display: none;
    }
}

/* blocks/hours.php. */
.hours-heading,
.page-content .hours-heading {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}

.hours-main,
.page-content .hours-main {
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.hours-holidays,
.page-content .hours-holidays {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--md-muted-color);
}

.hours-holidays li {
    margin: 0 0 0.25rem;
}

/* inc/business-info.php: the hours table, a hairline between days, closed days muted. */
.md-hours--table {
    width: 100%;
    max-width: 24rem;
    border-collapse: collapse;
}

.md-hours__day,
.md-hours__value {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--md-line-color);
    text-align: left;
    vertical-align: top;
}

.md-hours__day {
    padding-right: 1rem;
    font-weight: 600;
}

.md-hours__row.is-closed .md-hours__value {
    color: var(--md-muted-color);
}

/* blocks/menu.php. */
/* Wider than the text column, so two dishes sit side by side on desktop. --md-menu-stick is where stuck things stop: under the header and the section links. */
.menu {
    --md-menu-bar: 0px;
    /* Each stuck layer tucks 1px under the one above, so a subpixel header height can never open a hairline gap that flickers. */
    --md-menu-stick: calc(var(--md-header-h) + var(--md-menu-bar) - 2px);
    max-width: 75rem;
    margin: 0 auto;
}

.menu:has(> .menu-jump) {
    --md-menu-bar: 2.75rem;
}

/* The section links glide to their section, unless the reader has asked for less motion; then they jump as before. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.menu-jump) {
        scroll-behavior: smooth;
    }
}

/* Jump targets land below everything stuck at the top; a sub-section's also clears its parent's heading. */
.menu [id] {
    scroll-margin-top: calc(var(--md-menu-stick) + 0.5rem);
}

.menu .menu-section .menu-section {
    scroll-margin-top: calc(var(--md-menu-stick) + var(--md-menu-head, 2.75rem));
}

.menu-empty {
    text-align: center;
}

/* The section links: one slim row that sticks under the header like a second shelf of it, cream edge to edge with a hairline below. */
.menu-jump {
    position: sticky;
    top: calc(var(--md-header-h) - 1px);
    z-index: 5;
    height: var(--md-menu-bar);
    margin: 0 0 3rem;
    background-color: var(--md-bg-color);
    /* Paints the cream and the hairline out to the window's edges without widening the page. */
    border-image: linear-gradient(to top, var(--md-line-color) 1px, var(--md-bg-color) 1px) fill 0 / 0 / 0 100vw;
}

/* One row that scrolls sideways when it can't fit; the auto margins centre it when it can, without hiding its start. */
.menu-jump ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.menu-jump ul::-webkit-scrollbar {
    display: none;
}

.menu-jump li:first-child {
    margin-left: auto;
}

.menu-jump li:last-child {
    margin-right: auto;
}

/* Fades an edge that has more links past it (js/menu.js marks which). */
.menu-jump.has-more-end ul {
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.menu-jump.has-more-start ul {
    mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}

.menu-jump.has-more-start.has-more-end ul {
    mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.menu-jump a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 44px;
    padding: 0 0.75rem;
    border-bottom: 3px solid transparent;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--md-muted-color);
}

.menu-jump a:hover,
.menu-jump a:focus-visible {
    color: var(--md-text-color);
}

.menu-jump a:focus-visible {
    outline-offset: -3px;
}

/* The section in view: navy with a navy rule, so it reads without colour alone. */
.menu-jump a[aria-current] {
    color: var(--md-text-color);
    border-bottom-color: var(--md-accent-color);
}

@media (min-width: 48rem) {
    .menu-jump a {
        padding: 0 1rem;
        font-size: 0.75rem;
    }
}

.menu-group + .menu-group {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 3px solid var(--md-accent-color);
}

.menu-group-heading,
.page-content .menu-group-heading {
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 2rem;
}

/* A group's lead photograph: 4:3 on phones, a wide 21:9 band from 768px, on the offset gold frame. */
.menu-group > .menu-group-photo {
    aspect-ratio: 4 / 3;
    margin-bottom: calc(2.5rem + var(--md-frame-offset));
    background-color: var(--md-panel-color);
}

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

@media (min-width: 48rem) {
    .menu-group > .menu-group-photo {
        aspect-ratio: 21 / 9;
    }
}

.menu-section + .menu-section {
    margin-top: 3rem;
}

.menu-section .menu-section {
    margin-top: 2rem;
}

/* Section headings stick under the section links while their dishes scroll past, on a cream ground the dishes slide beneath. */
.menu-section-heading,
.page-content .menu-section-heading {
    position: sticky;
    top: var(--md-menu-stick);
    z-index: 3;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem;
    padding: 0.75rem 0 0.5rem;
    background-color: var(--md-bg-color);
    border-bottom: 1px solid var(--md-line-color);
}

/* A sub-section's heading stops just under its parent's (js/menu.js measures it), so both stay in view. */
.menu-section .menu-section .menu-section-heading {
    top: calc(var(--md-menu-stick) + var(--md-menu-head, 2.75rem) - 1px);
    z-index: 2;
    font-size: 1.05rem;
    padding: 0.5rem 0;
    border-bottom: 0;
}

.menu-section-note,
.page-content .menu-section-note {
    margin: 0 0 1rem;
    font-style: italic;
    color: var(--md-muted-color);
}

.menu-list,
.page-content .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A section's photo: 4:3 above it on phones, then a sticky 4:5 column beside its dishes from 768px that crops any shot well. */
.menu-section-photo {
    aspect-ratio: 4 / 3;
    margin: 0 0 1.25rem;
    overflow: hidden;
    background-color: var(--md-panel-color);
}

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

/* Holds the space for a photograph still to be taken; set "Photo to come" on the section in the admin. */
.menu-section-placeholder {
    box-sizing: border-box;
    border: 3px dashed var(--md-line-color);
}

/* Phones: a group's lead photo and its first section's photo would stack back to back, so the second one goes. */
@media (max-width: 47.9375rem) {
    .menu-group-photo + .menu-section > .menu-section-photo {
        display: none;
    }
}

/* Phones: an empty slot needs less height than a photograph to make its point. */
.menu-section-placeholder {
    aspect-ratio: 3 / 1;
}

@media (min-width: 48rem) {
    .menu-section--photo {
        display: grid;
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
        column-gap: 2rem;
        align-items: start;
    }

    .menu-section--photo > .menu-section-photo {
        position: sticky;
        top: calc(var(--md-menu-stick) + 1rem);
        aspect-ratio: 4 / 5;
        margin: 0;
    }
}

@media (min-width: 60rem) {
    .menu-section--photo {
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        column-gap: 3rem;
    }
}

/* Two dishes a row on desktop. Each keeps its own rule, so the rows line up across both columns. */
@media (min-width: 60rem) {
    .menu-list,
    .page-content .menu-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3rem;
    }
}

/* Scoped under .menu-list: WordPress puts menu-item on every navigation <li> as well. */
.menu-list > .menu-item {
    position: relative;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--md-line-color);
}

/* A dish's own photo: a square to the left of its name, or a dashed one where a photo is still to be taken. */
.menu-list > .menu-item--photo {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
}

.menu-item-photo {
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--md-panel-color);
}

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

.menu-item-placeholder {
    box-sizing: border-box;
    border: 2px dashed var(--md-line-color);
}

@media (min-width: 48rem) {
    .menu-list > .menu-item--photo {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        column-gap: 1.25rem;
    }
}

/* The whale leaps up beside a dish's name on hover and stays until the pointer leaves. Mouse only, so its slot is held only there. */
.menu-item-whale {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .menu-item-whale {
        display: inline-block;
        width: 1.9rem;
        aspect-ratio: 434 / 296;
        margin-left: 0.4rem;
        vertical-align: -0.1em;
        background-color: var(--md-accent-color);
        mask: var(--md-mask-whale, url("../images/whale.svg")) center / contain no-repeat;
        opacity: 0;
    }

    .menu-list > .menu-item:hover .menu-item-whale {
        opacity: 1;
        animation: md-leap 600ms cubic-bezier(0.3, 0.7, 0.4, 1) both;
    }
}

@keyframes md-leap {
    0% {
        opacity: 0;
        transform: translate(-0.4rem, 0.75rem) rotate(35deg) scale(0.5);
    }
    55% {
        opacity: 1;
        transform: translate(0.1rem, -0.45rem) rotate(-10deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* Under reduced motion it simply appears. */
@media (prefers-reduced-motion: reduce) {
    .menu-list > .menu-item:hover .menu-item-whale {
        animation: none;
    }
}

/* A thumbnail with a photo is a button that opens it large; it keeps the look of the plain square. */
button.menu-item-photo {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: zoom-in;
}

button.menu-item-photo img {
    transition: scale 250ms ease;
}

button.menu-item-photo:hover img {
    scale: 1.06;
}

@media (prefers-reduced-motion: reduce) {
    button.menu-item-photo img {
        transition: none;
    }
}

/* The large photo: a cream frame over the dimmed, blurred page, captioned with the dish. */
.menu-lightbox {
    box-sizing: border-box;
    width: min(100% - 2rem, 48rem);
    max-width: none;
    max-height: calc(100svh - 2rem);
    padding: 0;
    border: 0;
    background-color: var(--md-bg-color);
    color: var(--md-text-color);
    overflow: hidden;
}

.menu-lightbox::backdrop {
    background-color: color-mix(in srgb, var(--md-accent-color) 75%, transparent);
    backdrop-filter: blur(8px);
}

.menu-lightbox[open] {
    animation: md-lightbox-in 220ms ease-out;
}

.menu-lightbox[open]::backdrop {
    animation: md-fade-in 220ms ease-out;
}

@keyframes md-lightbox-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

@keyframes md-fade-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-lightbox[open],
    .menu-lightbox[open]::backdrop {
        animation: none;
    }
}

.menu-lightbox-figure {
    margin: 0;
}

.menu-lightbox-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100svh - 6.5rem);
    object-fit: contain;
    background-color: var(--md-panel-color);
}

.menu-lightbox-caption {
    padding: 0.9rem 1.25rem;
    font-family: var(--md-font-heading);
    font-weight: 700;
}

/* A navy square in the photo's corner with a cream cross drawn from two bars, like the menu toggle's. */
.menu-lightbox-close {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background-color: var(--md-accent-color);
    color: var(--md-bg-color);
    cursor: pointer;
}

.menu-lightbox-close span,
.menu-lightbox-close span::after {
    content: "";
    grid-area: 1 / 1;
    width: 22px;
    height: 3px;
    background-color: currentColor;
    rotate: 45deg;
}

.menu-lightbox-close span {
    display: grid;
}

.menu-lightbox-close span::after {
    rotate: 90deg;
}

.menu-lightbox-close:focus-visible {
    outline: 3px solid var(--md-bg-color);
    outline-offset: -6px;
}

.menu-item-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.menu-item-name {
    font-family: var(--md-font-heading);
    font-weight: 700;
}

.price {
    font-family: var(--md-font-heading);
    font-weight: 700;
    white-space: nowrap;
}

/* A unit ("each") drops under its price, so every price keeps the right edge and the column stays even. */
.price--unit {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.price-unit {
    font-weight: 400;
    font-size: 0.75em;
    color: var(--md-muted-color);
}

.menu-item-desc,
.page-content .menu-item-desc {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--md-muted-color);
}

.menu-variants,
.page-content .menu-variants {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.95rem;
}

/* Short options as even columns, the label over its price, with the prices level even when a label wraps. */
.menu-variants--grid,
.page-content .menu-variants--grid {
    display: grid;
    grid-template-columns: repeat(var(--md-variants), minmax(0, 7rem));
    gap: 0.75rem;
}

.menu-variants--grid li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.1rem;
}

.menu-variants--grid .menu-variant-label {
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--md-muted-color);
}

.menu-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.35rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--md-accent-color);
    font-size: 0.6rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.menu-add-ons,
.page-content .menu-add-ons {
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

.menu-add-ons-label {
    margin-right: 0.35rem;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Back to top on the menu page: a square whale button that surfaces bottom right once the reader is two screens down. */
.to-top {
    position: fixed;
    /* Phones: the same 1.5rem from the edge and from the 72px action bar. */
    right: 1.5rem;
    bottom: calc(1.5rem + 72px + env(safe-area-inset-bottom));
    z-index: 7;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    box-sizing: border-box;
    background-color: var(--md-bg-color);
    border: 3px solid var(--md-accent-color);
    color: var(--md-text-color);
    opacity: 0;
    visibility: hidden;
    translate: 0 150%;
    transition:
        translate 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 250ms ease,
        visibility 0s linear 500ms;
}

.to-top.is-up {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
}

.to-top-whale {
    display: block;
    width: 2.2rem;
    height: auto;
    fill: currentColor;
    transform: scaleX(-1) rotate(-12deg);
    transition: translate 250ms ease;
}

.to-top:hover .to-top-whale,
.to-top:focus-visible .to-top-whale {
    translate: 0 -0.2rem;
}

@media (min-width: 48rem) {
    .to-top {
        right: 1.5rem;
        bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .to-top,
    .to-top-whale {
        transition: none;
    }
}

body.md-menu-open .to-top {
    display: none;
}

/* The print masthead: hidden on screen. */
.menu-print-brand {
    display: none;
}

/* The menu on paper: two columns, sections kept whole, nothing to click, the brandmark across the top. */
@media print {
    /* Lifted above the page's own title and intro to the head of the sheet: the page makes room at its top. */
    .canvas:has(.menu-print-brand),
    .page-content:has(.menu-print-brand) {
        position: relative;
        padding-top: 3.4cm;
    }

    .menu-print-brand {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: var(--md-text-color);
    }

    /* With the photos hidden, a section is one column again. */
    .menu-section--photo {
        display: block;
    }

    .menu-print-logo {
        height: 2.2cm;
        margin: 0 auto 0.2cm;
    }

    .menu-print-brand p {
        margin: 0;
        font-size: 9pt;
    }

    .menu-jump,
    .menu-section-photo,
    .menu-group-photo,
    .menu-item-photo,
    .menu-item-whale,
    .menu-lightbox,
    .to-top {
        display: none;
    }

    .menu-list > .menu-item--photo {
        display: block;
    }

    .menu-section-heading,
    .page-content .menu-section-heading {
        position: static;
        background: none;
    }

    .menu-list,
    .page-content .menu-list {
        display: block;
    }

    .menu {
        max-width: none;
        column-count: 2;
        column-gap: 2rem;
        font-size: 10pt;
    }

    .menu-section {
        break-inside: avoid;
    }

    .menu-group + .menu-group {
        margin-top: 2rem;
        padding-top: 1rem;
    }

    .menu-list > .menu-item {
        padding: 0.3rem 0;
    }

    .menu-item-desc,
    .menu-section-note {
        color: #333;
    }
}

/* blocks/menu-featured.php. */
.menu-featured,
.page-content .menu-featured {
    list-style: none;
    max-width: var(--md-content);
    margin: 0 auto 2.5rem;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    text-align: left;
}

.menu-featured-item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.menu-featured-photo {
    flex: 0 0 6rem;
    aspect-ratio: 1;
    overflow: hidden;
}

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

.menu-featured-placeholder {
    box-sizing: border-box;
    border: 3px dashed var(--md-line-color);
    background-color: var(--md-panel-color);
}

.menu-featured-body {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-featured-name,
.page-content .menu-featured-name {
    font-size: 1.1rem;
    margin: 0 0 0.15rem;
}

.menu-featured-price {
    display: block;
    margin: 0 0 0.35rem;
}

.menu-featured-desc,
.page-content .menu-featured-desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--md-muted-color);
}

.menu-teaser {
    padding-block: clamp(3rem, 6vw, 6rem);
}

@media (min-width: 48rem) {
    .menu-featured,
    .page-content .menu-featured {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 3rem;
    }

    .menu-featured-photo {
        flex-basis: 7.5rem;
    }
}

/* The offset gold frame: a gold rule set down and right behind a photograph, tuned per use by --md-frame-offset and --md-frame-width. */
.framed,
.closing-visual,
.visit-photo,
.menu-group-photo {
    --md-frame-offset: 0.9rem;
    --md-frame-width: 6px;
    position: relative;
    isolation: isolate;
    margin-right: var(--md-frame-offset);
    margin-bottom: var(--md-frame-offset);
}

.framed::before,
.closing-visual::before,
.visit-photo::before,
.menu-group-photo::before {
    content: "";
    position: absolute;
    inset: var(--md-frame-offset) calc(-1 * var(--md-frame-offset)) calc(-1 * var(--md-frame-offset)) var(--md-frame-offset);
    z-index: -1;
    border: var(--md-frame-width) solid var(--md-gold-color);
    pointer-events: none;
}

@media (min-width: 48rem) {
    .framed,
    .closing-visual,
    .menu-group-photo {
        --md-frame-offset: 1.25rem;
    }
}

/* blocks/hero.php. */
/* 16:9 on wider screens, never taller than the space under the header, so a short laptop screen gets a thinner band. */
.hero {
    --md-hero-frame: 6px;
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - var(--md-header-h));
    overflow: hidden;
    background-color: var(--md-panel-color);
}

/* A 32px copy of the photograph, inlined by blocks/hero.php and blurred, paints its colours on the first frame instead of a flat field; scaled so the blur's soft edges stay outside the box. */
.hero:not(.hero--empty)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--md-hero-placeholder, none) var(--md-hero-pos, 50% 50%) / cover no-repeat;
    filter: blur(24px);
    transform: scale(1.15);
}

@media (max-width: 47.9375rem) {
    .hero:not(.hero--empty)::before {
        background-image: var(--md-hero-placeholder-mobile, var(--md-hero-placeholder, none));
        background-position: 50% 50%;
    }
}

/* With JS the photograph waits for its load event, then fades in over the stand-in; without JS it simply paints as it arrives. */
html.js .hero-img:not(.is-loaded) {
    opacity: 0;
}

.hero-img {
    transition: opacity 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .hero-img {
        transition: none;
    }
}

/* Phones: 9:16, a portrait reel, fitted between the header and the action bar. */
@media (max-width: 47.9375rem) {
    .hero {
        aspect-ratio: 9 / 16;
        max-height: calc(100svh - var(--md-header-h) - 56px - env(safe-area-inset-bottom));
    }
}

/* Phones, on a page that opens with the hero: the photograph fills the whole screen, running up under the header and
   down under the action bar, and the gold frame keeps its old place between the two bars. */
@media (max-width: 47.9375rem) {
    .canvas > .hero-section:first-child {
        margin-top: calc(-1 * var(--md-header-h));
    }

    /* --md-hero-h is the screen height at load (js/app.js); 100svh stands in without JS. */
    .canvas > .hero-section:first-child .hero {
        aspect-ratio: auto;
        height: var(--md-hero-h, 100svh);
        max-height: none;
    }

    /* The action bar is 72px tall with its rule (56px targets plus padding), so the frame clears it by the same gap it leaves under the header. */
    .canvas > .hero-section:first-child .hero-frame {
        --md-hero-gap: clamp(1.4rem, 2.5vw + 0.5rem, 2.25rem);
        inset: calc(var(--md-header-h) + var(--md-hero-gap)) var(--md-hero-gap) calc(72px + env(safe-area-inset-bottom) + var(--md-hero-gap));
    }

    /* A navy fade at the photo's top and bottom edges, under the frame: it lifts the gold toggle past 3:1 on the sky and the gold
       action-bar labels past 4.5:1 on the street, without putting a bar back behind them. */
    .canvas > .hero-section:first-child .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--md-accent-color) 55%, transparent) 0,
            transparent calc(var(--md-header-h) + 3rem),
            transparent calc(100% - 13rem),
            color-mix(in srgb, var(--md-accent-color) 88%, transparent) 100%
        );
    }

    .canvas > .hero-section:first-child .hero-frame,
    .canvas > .hero-section:first-child .hero-ring {
        z-index: 1;
    }

    /* At the very top (js/app.js adds md-scrolled from the first pixel of scroll): the logo, toggle and action bar turn
       gold with no bar behind them, over the sky and the street; scrolling brings back the cream bars in navy. */
    header,
    .action-bar,
    .action-bar-link {
        transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease;
    }

    html.js body:has(.canvas > .hero-section:first-child):not(.md-scrolled):not(.md-menu-open) header {
        color: var(--md-gold-color);
    }

    html.js body:has(.canvas > .hero-section:first-child):not(.md-scrolled):not(.md-menu-open) header .backdrop {
        opacity: 0;
    }

    html.js body:has(.canvas > .hero-section:first-child):not(.md-scrolled) .action-bar {
        background-color: transparent;
        border-top-color: transparent;
    }

    html.js body:has(.canvas > .hero-section:first-child):not(.md-scrolled) .action-bar-link {
        color: var(--md-gold-color);
        border-left-color: transparent;
    }
}

@media (max-width: 47.9375rem) and (prefers-reduced-motion: reduce) {
    header,
    .action-bar,
    .action-bar-link {
        transition: none;
    }
}

/* Diagonal hatching on navy marks the slot until a photograph is chosen; it is not a design element. */
.hero--empty {
    background-color: var(--md-text-color);
}

.hero--empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.06) 18px 20px);
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* js/hero.js scales it on scroll; the hero's overflow keeps the growth inside the frame. */
    will-change: transform;
}

/* The shortcode's pos: which part of the photograph a wide desktop viewport keeps. Phones keep their own crop centred. */
@media (min-width: 48rem) {
    .hero-img {
        object-position: var(--md-hero-pos, 50% 50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-img {
        will-change: auto;
    }
}

/* The CSS frame is the fallback and the geometry: js/hero.js reads its box and stroke, then draws over it. */
.hero-frame {
    position: absolute;
    inset: clamp(1.4rem, 2.5vw + 0.5rem, 2.25rem);
    border: var(--md-hero-frame) solid var(--md-gold-color);
    pointer-events: none;
}

.hero-est,
.hero-ring-text {
    font-family: var(--md-font-heading);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* Without the script: one stamp tucked inside the bottom-right corner, as before. */
.hero-est {
    position: absolute;
    right: 0.9rem;
    bottom: 0.7rem;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--md-gold-color);
}

/* With the script, the SVG ring replaces both. The frame keeps its box, since the script measures it. */
.hero--ring .hero-frame {
    border-color: transparent;
}

.hero--ring .hero-est {
    display: none;
}

.hero-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.hero-ring-line {
    fill: none;
    stroke: var(--md-gold-color);
}

.hero-ring-text {
    font-size: clamp(0.85rem, 0.6rem + 0.5vw, 1.15rem);
    fill: var(--md-gold-color);
}

/* In the mask: each copy in black with a stroke round it, so the gold rule breaks a little wider than the letters. */
.hero-ring-gap {
    fill: #000;
    stroke: #000;
    stroke-width: 1.1em;
    stroke-linejoin: round;
}

/* The h1 and its line, below the photograph rather than over it. */
.hero-intro {
    display: grid;
    gap: 1rem;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--md-line-color);
}

/* A hairline a whale leaps along on scroll (js/rule-whale.js): the track ends at the line, so the whale surfaces from it and dives back in. */
.hero-intro,
.has-rule-whale {
    position: relative;
}

/* Room above the line for the whales' leap (the track's 4.5rem plus a gap), so they never cross the text; only where they swim. */
@media (prefers-reduced-motion: no-preference) {
    html.js .hero-intro:not(.screen-reader-text),
    html.js .has-rule-whale {
        padding-bottom: 5.25rem;
    }
}

.rule-whale {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.5rem;
    overflow: hidden;
    pointer-events: none;
}

.rule-whale-body {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.5rem;
    aspect-ratio: 434 / 296;
    background-color: var(--md-line-color);
    mask: var(--md-mask-whale, url("../images/whale.svg")) center / contain no-repeat;
    transform: translateY(100%);
}

@media print {
    .rule-whale {
        display: none;
    }
}

.hero-heading,
.page-content .hero-heading {
    max-width: 20ch;
    margin: 0;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hero-sub,
.page-content .hero-sub {
    max-width: 46ch;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--md-muted-color);
}

/* The logo sits over the subheading, left-aligned with it. The placeholder is the logo's space until it is ready. */
.hero-aside {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
}

.hero-logo {
    display: block;
    width: auto;
    max-width: min(16rem, 100%);
    max-height: 7rem;
}

/* The inline brandmark has no intrinsic size, so it is given its height. */
.hero-logo.brand-logo {
    height: 7rem;
    max-width: 100%;
}

.hero-logo--placeholder {
    width: 14rem;
    height: 6rem;
    max-width: 100%;
    box-sizing: border-box;
    border: 3px dashed var(--md-line-color);
    background-color: var(--md-panel-color);
}

@media (min-width: 48rem) {
    .hero-intro {
        grid-template-columns: 1.4fr 1fr;
        /* The h1 sits level with the middle of the logo and line beside it. */
        align-items: center;
        gap: 3rem;
    }
}

/* blocks/banner.php. */
/* The box is as tall as the 5deg band needs across the viewport (8.75vw) plus the band, so change the tilt and 8.75vw together. */
.banner {
    --md-banner-tilt: -5deg;
    position: relative;
    height: calc(8.75vw + 3.2em + 16px);
    margin-block: calc(-1 * clamp(0.75rem, 1.5vw, 1.5rem));
    overflow: hidden;
    /* Clipped sideways only, so the breaching whale can leap above the box; browsers without clip keep hidden. */
    overflow: clip visible;
    font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem);
    pointer-events: none;
}

/* Wider than the viewport, so the tilted ends always run off both edges. */
.banner-band {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 115vw;
    translate: -50% -50%;
    rotate: var(--md-banner-tilt);
    padding-block: 0.75em;
    background-color: var(--md-awning-color);
    border-top: 0.18em solid var(--md-white-color);
    color: var(--md-white-color);
}

/* The shaded slope of the awning above its white stripe; without it the stripe vanishes into the cream page. */
.banner-band::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.35em;
    margin-bottom: 0.18em;
    background-color: var(--md-awning-deep-color);
}

.banner-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.banner-unit {
    display: flex;
    align-items: center;
    gap: 1.1em;
    padding-right: 1.1em;
}

.banner-item {
    font-family: "Arvo", var(--md-font-heading);
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Round, like the awning's painted dots: the one circle on a square-cornered site, on purpose. */
.banner-dot {
    flex: none;
    width: 0.32em;
    height: 0.32em;
    border-radius: 50%;
    background-color: var(--md-white-color);
}

@media print {
    .banner {
        display: none;
    }
}

/* blocks/whales.php. */
/* The awning banner mirrored at +5deg, as tall as the tilt (8.75vw) plus a bobbing whale, so change the tilt and 8.75vw together. */
.whales {
    --md-whales-tilt: 5deg;
    --md-whale-h: clamp(4.5rem, 3.2rem + 4.8vw, 7.5rem);
    position: relative;
    height: calc(8.75vw + var(--md-whale-h) * 1.6);
    margin-block: calc(-1 * clamp(0.75rem, 1.5vw, 1.5rem));
    overflow: hidden;
    pointer-events: none;
}

.whales-defs {
    position: absolute;
    width: 0;
    height: 0;
}

/* Wider than the viewport so the tilted ends always run off both edges. */
.whales-band {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 115vw;
    translate: -50% -50%;
    rotate: var(--md-whales-tilt);
}

.whales-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.whales-unit {
    display: flex;
    align-items: center;
    gap: calc(var(--md-whale-h) * 1.1);
    padding-right: calc(var(--md-whale-h) * 1.1);
}

/* The awning's blue. Flipped to face right, the way they swim. Sizes and bobs vary so the pod doesn't march. */
.whale {
    display: block;
    flex: none;
    height: var(--md-whale-h);
    width: calc(var(--md-whale-h) * 433.74 / 296.3);
    fill: var(--md-awning-color);
    transform: scaleX(-1);
    animation: md-whale-bob 3.2s ease-in-out infinite;
}

.whale-wrap:nth-child(3n + 2) .whale {
    height: calc(var(--md-whale-h) * 0.72);
    width: calc(var(--md-whale-h) * 0.72 * 433.74 / 296.3);
    animation-duration: 2.6s;
    animation-delay: -0.8s;
}

.whale-wrap:nth-child(3n) .whale {
    height: calc(var(--md-whale-h) * 0.86);
    width: calc(var(--md-whale-h) * 0.86 * 433.74 / 296.3);
    animation-duration: 3.8s;
    animation-delay: -1.7s;
}

@keyframes md-whale-bob {
    0%, 100% { translate: 0 0.18em; rotate: -2deg; }
    50% { translate: 0 -0.18em; rotate: 2deg; }
}

@media (prefers-reduced-motion: reduce) {
    .whale {
        animation: none;
    }
}

@media print {
    .whales {
        display: none;
    }
}

/* blocks/visit.php. */
.visit {
    padding-block: clamp(3rem, 6vw, 6rem);
}

.visit-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

/* Photos side by side 16px apart; the padding gives js/visit.js room to drift them without reaching the next section. */
.visit-photos {
    --md-visit-drift: 3.25rem;
    display: flex;
    gap: 1.25rem;
    width: 100%;
    max-width: 40rem;
    padding-block: var(--md-visit-drift);
    box-sizing: border-box;
}

.visit-photo {
    --md-frame-offset: 0.6rem;
    --md-frame-width: 4px;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 4 / 5;
    will-change: transform;
}

@media (min-width: 48rem) {
    .visit-photo {
        --md-frame-offset: 0.9rem;
        --md-frame-width: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .visit-photo {
        will-change: auto;
    }
}

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

.visit-placeholder {
    box-sizing: border-box;
    border: 3px dashed var(--md-line-color);
    background-color: var(--md-panel-color);
}

.visit-content {
    width: 100%;
    text-align: center;
}

.visit-heading,
.page-content .visit-heading {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    margin: 0 0 1rem;
}

.visit-landmark,
.visit-hours,
.page-content .visit-landmark,
.page-content .visit-hours {
    margin: 0 0 0.5rem;
}

.visit-hours {
    color: var(--md-muted-color);
}

/* Directions is the primary, Call us the outlined secondary; they stack only when the column is too narrow. */
.visit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* The photographs take the larger share of the row, so they read at a useful size beside the address. */
@media (min-width: 48rem) {
    .visit-inner {
        flex-direction: row;
        gap: clamp(2.5rem, 4vw, 4rem);
    }

    .visit-photos {
        flex: 1 1 58%;
        max-width: none;
    }

    .visit-content {
        flex: 1 1 42%;
    }
}

/* blocks/instagram.php. */
.instagram {
    padding-block: clamp(3rem, 6vw, 6rem);
    text-align: center;
}

/* The kicker is a link to the profile here, so it keeps the kicker's look and gains an underline on hover. */
.instagram-handle {
    display: inline-block;
    text-decoration: none;
}

.instagram-handle:hover,
.instagram-handle:focus-visible {
    text-decoration: underline;
}

/* Stacked after another padded section, one gap is enough rather than both paddings. */
.closing + .instagram,
.closing + .map-embed--section,
.instagram + .map-embed--section,
.visit + .map-embed--section,
.map-embed--section + .closing {
    padding-top: 0;
}

/* Two across on phones, three from 768px, six in one row from 1200px. */
.instagram-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 48rem) {
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 75rem) {
    .instagram-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.instagram-tile {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--md-panel-color);
}

.instagram-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease;
}

.instagram-tile:hover img,
.instagram-tile:focus-visible img {
    transform: scale(1.04);
}

.instagram-tile:focus-visible {
    outline: 3px solid var(--md-accent-color);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .instagram-tile img {
        transition: none;
    }
}

.instagram-follow {
    margin: 2rem 0 0;
}

/* blocks/map.php. */
/* On its own it fills its column at 4:3; as a section it takes the page's width and a wider frame from 768px. */
.map-embed--section {
    padding-block: clamp(3rem, 6vw, 6rem);
}

.map-embed-intro {
    text-align: center;
}

.map-canvas {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--md-panel-color);
}

@media (min-width: 48rem) {
    .map-embed--section .map-canvas {
        aspect-ratio: 16 / 9;
        max-height: 80svh;
    }
}

/* A refused key leaves Google's error in the box; the link below says the same thing better. */
.map-canvas--failed {
    display: none;
}

.map-link {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

.map-embed--section .map-link {
    text-align: center;
}

/* blocks/awards.php. */
/* A panel band of square plaques: the years in the "Best" slab and storefront blue, a gold rule, then the award. */
.awards {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    background-color: var(--md-panel-color);
}

.awards-intro {
    text-align: center;
}

.awards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.award {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    background-color: var(--md-bg-color);
    border: 3px solid var(--md-accent-color);
    text-align: center;
}

/* The ship's wheel embossed faintly in the corner, cut off by the plaque's edge like a seal. Navy at 7%. */
.award::after {
    content: "";
    position: absolute;
    right: -1.6rem;
    bottom: -1.6rem;
    z-index: -1;
    width: 6.5rem;
    aspect-ratio: 1;
    background-color: var(--md-accent-color);
    opacity: 0.07;
    -webkit-mask: var(--md-mask-wheel, url("../images/wheel.svg")) center / contain no-repeat;
    mask: var(--md-mask-wheel, url("../images/wheel.svg")) center / contain no-repeat;
    pointer-events: none;
}

.award-years,
.awards .award-years {
    margin: 0;
    font-family: "Alfa Slab One", var(--md-font-heading);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    color: var(--md-blue-color);
}

/* The gold rule is a fill between the years and the title, never text; without years it heads the plaque alone. */
.award-years::after,
.award-rule {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin: 1rem auto;
    background-color: var(--md-gold-color);
}

.award-rule {
    margin-top: 0;
}

.award-title,
.page-content .award-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.award-from,
.awards .award-from {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--md-muted-color);
}

.awards-quote {
    max-width: 44rem;
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    text-align: center;
}

.awards-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-style: italic;
    line-height: 1.5;
}

.awards-quote blockquote p {
    margin: 0;
}

.awards-quote blockquote p::before { content: "\201C"; }
.awards-quote blockquote p::after { content: "\201D"; }

.awards-quote figcaption {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--md-muted-color);
}

/* Source links keep the muted colour and read as links by their underline. */
.award-from a,
.awards-quote figcaption a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

/* Columns on the text pages get more air than core's 2em, with each column's first heading level with the other's top. */
.wp-block-columns.page-columns {
    gap: 2rem 3.5rem;
    margin-block: 0 2.5rem;
}

.page-columns > .wp-block-column > :first-child {
    margin-top: 0;
}

.page-columns .contact-form {
    max-width: none;
}

/* blocks/photo-pair.php. The Visit us photos (their rules above) beside a heading and text, inside any page. */
.photo-pair {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-block: 3rem;
}

.photo-pair .visit-photos {
    max-width: 34rem;
}

.photo-pair-heading,
.page-content .photo-pair-heading {
    margin: 0.25rem 0 1rem;
}

.photo-pair-content > p:last-child {
    margin-bottom: 0;
}

@media (min-width: 48rem) {
    .photo-pair {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }

    .photo-pair .visit-photos {
        flex: 1 1 55%;
        max-width: none;
    }

    .photo-pair-content {
        flex: 1 1 45%;
    }

    .photo-pair--reverse {
        flex-direction: row-reverse;
    }
}

/* blocks/closing.php. */
.closing {
    padding-block: clamp(3rem, 6vw, 6rem);
}

.closing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

.closing-content {
    text-align: center;
}

.closing-heading,
.page-content .closing-heading {
    display: grid;
    justify-items: center;
    margin: 0 0 2rem;
    line-height: 1;
}

.closing-line {
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Storefront blue on cream (7.1:1), the letters tilted at the sign's jaunty angles but still readable at a glance. */
.best {
    display: block;
    margin: 0.12em 0 0.2em;
    font-family: "Alfa Slab One", var(--md-font-heading);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(4.5rem, 12vw, 9rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--md-blue-color);
}

.best-letters {
    display: inline-flex;
}

.best-letters span {
    display: inline-block;
}

.best-letters span:nth-child(4n + 1) { transform: rotate(-7deg) translateY(0.04em); }
.best-letters span:nth-child(4n + 2) { transform: rotate(4deg) translateY(-0.06em); }
.best-letters span:nth-child(4n + 3) { transform: rotate(-3deg) translateY(0.03em); }
.best-letters span:nth-child(4n + 4) { transform: rotate(6deg) translateY(-0.04em); }

.closing-kicker {
    margin: -1rem 0 2rem;
}

.closing-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* The photograph is the star: full width on phones, the larger share of the row from 768px, on the offset frame. */
.closing-visual {
    width: 100%;
    max-width: 40rem;
}

.closing-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.closing-placeholder {
    aspect-ratio: 4 / 3;
    box-sizing: border-box;
    border: 3px dashed var(--md-line-color);
    background-color: var(--md-panel-color);
}

@media (min-width: 48rem) {
    .closing-inner {
        flex-direction: row;
    }

    .closing-content {
        flex: 1 1 42%;
    }

    .closing-visual {
        flex: 1 1 58%;
        max-width: none;
    }

}

/* Contact Form 7 styling for the theme's own field markup, covering everything the disabled plugin stylesheet would have. */
.contact-form {
    max-width: 34rem;
}

/* The plugin's live-region copy of the result, for screen readers only. */
.wpcf7 .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wpcf7 .hidden-fields-container {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Off-screen, not display:none, so a bot still finds and fills it. */
.contact-form-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
}

.contact-form-field label {
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-form .wpcf7-form-control-wrap {
    display: block;
}

.contact-form-field input,
.contact-form-field textarea {
    width: 100%;
}

.contact-form-field textarea {
    resize: vertical;
}

/* An error is text beside its field, never colour alone. */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.contact-form-submit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wpcf7-submit:disabled {
    cursor: wait;
    opacity: 0.6;
}

/* Square, like everything else: shown only while the message is on its way. */
/* The ship's wheel turns while the form sends, masked to take the navy token and held still under reduced motion. */
.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: 0.75rem;
    vertical-align: middle;
    background-color: var(--md-accent-color);
    -webkit-mask: var(--md-mask-wheel, url("../images/wheel.svg")) center / contain no-repeat;
    mask: var(--md-mask-wheel, url("../images/wheel.svg")) center / contain no-repeat;
    animation: md-spin 1.6s linear infinite;
}

.wpcf7 form.submitting .wpcf7-spinner {
    visibility: visible;
}

@keyframes md-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpcf7-spinner {
        animation: none;
    }
}

.contact-form-privacy,
.page-content .contact-form-privacy {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--md-muted-color);
}

/* The result after sending: thanks, or what went wrong. Hidden until there is one. */
.wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border: 3px solid var(--md-accent-color);
    background-color: var(--md-panel-color);
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
    display: none;
}

/* A message that did not send gets a dashed rule as well as its words, so the two outcomes differ in shape. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    border-style: dashed;
}

/* blocks/bento.php. Food photos in an uneven grid: one large tile with the rest around it, square corners, no text. */
.bento {
    max-width: 75rem;
    margin: 4rem auto;
}

.bento-head {
    margin-bottom: 2rem;
    text-align: center;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(8rem, 38vw, 12rem);
    grid-auto-flow: dense;
    gap: 0.75rem;
}

.bento-tile {
    margin: 0;
    overflow: hidden;
    background-color: var(--md-panel-color);
}

.bento-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 600ms ease;
}

.bento-tile:hover img {
    scale: 1.04;
}

/* Phones: the first tile runs the full width, and an odd last tile does too, so no gap is left at the end. */
.bento-tile--1 {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-grid--2 .bento-tile--2,
.bento-grid--4 .bento-tile--4,
.bento-grid--6 .bento-tile--6 {
    grid-column: span 2;
}

@media (min-width: 48rem) {
    .bento-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: clamp(10rem, 16vw, 15rem);
        gap: 1rem;
    }

    .bento-grid--2 .bento-tile--2 {
        grid-column: span 2;
        grid-row: span 2;
    }

    .bento-grid--4 .bento-tile--4,
    .bento-grid--6 .bento-tile--4 {
        grid-column: span 2;
    }

    .bento-grid--6 .bento-tile--5,
    .bento-grid--6 .bento-tile--6 {
        grid-column: span 2;
    }

    .bento--reverse .bento-tile--1 {
        grid-column: 3 / span 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bento-tile img {
        transition: none;
    }
}

/* blocks/history.php. A framed archive photo beside a short story and a gold-ruled timeline, then a strip of smaller photos. */
.history {
    max-width: 75rem;
    margin: 5rem auto;
}

.history-main {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.history-photo {
    margin: 0;
}

.history-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.history-photo figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--md-muted-color);
}

.history-heading,
.page-content .history-heading {
    margin: 0.25rem 0 1rem;
}

.history-timeline {
    list-style: none;
    margin: 1.5rem 0 2rem;
    padding: 0 0 0 1.25rem;
    border-left: 3px solid var(--md-gold-color);
}

.history-timeline li + li {
    margin-top: 0.6rem;
}

.history-year {
    display: inline-block;
    min-width: 3.5rem;
    font-family: var(--md-font-heading);
    font-weight: 900;
}

.history-strip {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.history-strip img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

@media (min-width: 48rem) {
    .history-main {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 4rem;
    }

    .history-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}


/* Gold stars (md_reviews_stars): a navy-edged empty row with a gold row clipped to the rating on top, so a 4.6 fills four and a bit. */
.stars {
    --star: 1rem;
    position: relative;
    display: inline-flex;
    flex: none;
    vertical-align: middle;
    line-height: 0;
}

.stars--large {
    --star: 1.5rem;
}

.stars-empty,
.stars-full {
    display: inline-flex;
    gap: calc(var(--star) * 0.12);
}

.stars-full {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--fill, 100%);
    overflow: hidden;
    white-space: nowrap;
}

/* In the reviews section the gold sweeps in as the section comes into view, each star giving a small pop as it fills. */
.reviews .stars-full {
    transition: width 1.3s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.js .reviews:not(.visible) .stars-full {
    width: 0;
}

.reviews.visible .stars-full svg {
    animation: md-star-pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.reviews.visible .stars-full svg:nth-child(2) { animation-delay: 0.22s; }
.reviews.visible .stars-full svg:nth-child(3) { animation-delay: 0.44s; }
.reviews.visible .stars-full svg:nth-child(4) { animation-delay: 0.66s; }
.reviews.visible .stars-full svg:nth-child(5) { animation-delay: 0.88s; }

.review-card:nth-child(2) .stars-full { transition-delay: 0.2s; }
.review-card:nth-child(3) .stars-full { transition-delay: 0.4s; }

@keyframes md-star-pop {
    0% {
        transform: scale(0.4);
    }
    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews .stars-full {
        transition: none;
    }

    .js .reviews:not(.visible) .stars-full {
        width: var(--fill, 100%);
    }

    .reviews.visible .stars-full svg {
        animation: none;
    }
}

.stars svg {
    flex: none;
    width: var(--star);
    height: var(--star);
    stroke: var(--md-accent-color);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.stars-empty svg {
    fill: transparent;
}

.stars-full svg {
    fill: var(--md-gold-color);
}

/* blocks/reviews.php. The rating, review cards on the panel colour under a gold rule, then the prompt to leave one. */
.reviews {
    max-width: 75rem;
    margin: 5rem auto;
}

.reviews-head {
    margin-bottom: 2.5rem;
    text-align: center;
}

.reviews-summary {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0 0;
}

.reviews-score {
    font-family: var(--md-font-heading);
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1;
}

.reviews-count {
    color: var(--md-muted-color);
}

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

.review-card figure {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--md-panel-color);
    border-top: 4px solid var(--md-gold-color);
}

.review-card blockquote {
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
}

.review-card blockquote p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
}

.review-card figcaption {
    font-family: var(--md-font-heading);
    font-weight: 700;
}

.review-when {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--md-font-body);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--md-muted-color);
}

.reviews-credit {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--md-muted-color);
}

.reviews-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding: 3rem 1rem 0;
    border-top: 1px solid var(--md-line-color);
    text-align: center;
}

/* Alone (no reviews yet, or count="0"), the prompt is its own panel band. */
.reviews--prompt .reviews-prompt {
    margin-top: 0;
    padding: 3rem 1.5rem;
    border-top: 0;
    background-color: var(--md-panel-color);
}

.reviews-prompt-text,
.page-content .reviews-prompt-text {
    margin: 0;
    max-width: 28rem;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.3;
}

@media (min-width: 60rem) {
    .reviews-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The footer's review link: small stars beside the words, a 44px target, held to the left like the address above it. */
.footer-review {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

.footer-review .stars {
    --star: 0.95rem;
}

@media print {
    .reviews-prompt,
    .footer-review {
        display: none;
    }
}

/* The history print falls onto the page like a photo dropped on a table: it drops in from above, larger and turned 15 degrees,
   picks up speed, lands with a small bounce and comes to rest at a slight tilt; the caption follows. Transforms only. */
.history-print {
    /* How large the print starts its fall: bigger is nearer the eye. Phones start smaller, since a 15-degree turn at
       full size already pushes the corners past the screen edge, and even unseen that widens the page. */
    --md-fall-scale: 1.15;
    transform: rotate(-3deg);
}

@media (max-width: 47.9375rem) {
    .history-print {
        --md-fall-scale: 0.95;
    }
}

.js .drop-in .history-print {
    opacity: 0;
    transform: translateY(-3rem) rotate(15deg) scale(var(--md-fall-scale));
}

.js .drop-in.visible .history-print {
    animation: md-print-fall 1.1s both;
}

.js .drop-in figcaption {
    opacity: 0;
    transition: opacity 0.5s ease-out 0.8s;
}

.js .drop-in.visible figcaption {
    opacity: 1;
}

@keyframes md-print-fall {
    0% {
        opacity: 0;
        transform: translateY(-3rem) rotate(15deg) scale(var(--md-fall-scale));
        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }
    35% {
        opacity: 1;
    }
    62% {
        transform: translateY(0) rotate(-5deg) scale(0.985);
        animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
    }
    80% {
        transform: rotate(-2.2deg) scale(1.006);
    }
    100% {
        opacity: 1;
        transform: rotate(-3deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .drop-in .history-print,
    .js .drop-in.visible .history-print {
        opacity: 1;
        transform: rotate(-3deg);
        animation: none;
    }

    .js .drop-in figcaption {
        opacity: 1;
        transition: none;
    }
}

/* Phones: the history block's button runs the full width of the column, like the paired buttons elsewhere. */
@media (max-width: 47.9375rem) {
    .history-content .btn {
        display: flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}