/* ==========================================================================
   Angora Grill
   Loaded after Bootstrap 5.3 (trimmed to what the page uses; see
   tools/copy-vendor.mjs). Bootstrap supplies the grid, a few utilities and the
   off-canvas menu; everything visual is defined here.

   1. Fonts and tokens   4. Header and menu   7. Menu        10. Contact
   2. Base               5. Opening film      8. Room        11. Footer, back to top
   3. Shared pieces      6. About             9. Gallery     12. Reduced motion
   ========================================================================== */

/* 1. Fonts and tokens ----------------------------------------------------- */

/* Self-hosted. "latin-ext" carries the Turkish letters (ş, ğ, İ). */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root,
[data-bs-theme="dark"] {
    /* colour: black, bone white, one red. Fire colours belong to the film. */
    --obsidian: #000;
    --charcoal: #0B0B0B;
    --brown: #151515;
    --ivory: #F5F2EA;
    --beige: #A9A39A;
    --accent: #D8412F;
    --ivory-rgb: 245, 242, 234;
    --obsidian-rgb: 0, 0, 0;
    --accent-rgb: 216, 65, 47;
    --fire-rgb: 201, 105, 50;
    --hair: rgba(var(--ivory-rgb), 0.16);

    /* type: a heavy condensed face in capitals for names and headings (the voice of a
       butcher's sign), its plain sibling for everything that is read as a sentence */
    --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;

    /* type: one scale, six steps. Nothing on the page is set outside it
       except the brand name itself. */
    --fs-small: 0.875rem;
    --fs-body: 1.0625rem;
    --fs-lead: clamp(1.25rem, 0.5vw + 1.05rem, 1.5rem);
    --fs-h3: clamp(1.75rem, 1.6vw + 1.1rem, 2.75rem);
    --fs-h2: clamp(2.5rem, 3.4vw + 1rem, 5.25rem);
    --fs-dish: clamp(2.75rem, 4.6vw + 0.9rem, 6.5rem);

    --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
    --section: clamp(5rem, 10vw, 10rem);
    --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

    /* 0 to 1, written by the film script: how hot the fire on screen is */
    --heat: 0;

    --bs-body-bg: var(--obsidian);
    --bs-body-color: var(--ivory);
    --bs-body-font-family: var(--sans);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: 1.65;
    --bs-emphasis-color: var(--ivory);
    --bs-border-color: var(--hair);
    --bs-link-color: var(--ivory);
    --bs-link-color-rgb: var(--ivory-rgb);
    --bs-link-hover-color: var(--ivory);
    --bs-link-hover-color-rgb: var(--ivory-rgb);
}

/* 2. Base ----------------------------------------------------------------- */

html {
    /* text grows a little with the screen, so it holds its own beside large headings */
    font-size: clamp(16px, 0.42vw + 12px, 21px);
    background: var(--obsidian);
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Lenis */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--accent);
    color: var(--ivory);
}

picture { display: block; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { text-decoration: none; }
address { margin: 0; font-style: normal; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 0.95;
    text-transform: uppercase;
    text-wrap: balance;
}

:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 5px;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 200;
    padding: 0.7rem 1rem;
    background: var(--ivory);
    color: var(--obsidian);
    font-size: var(--fs-small);
}

/* 3. Shared pieces -------------------------------------------------------- */

.wrap { padding-inline: var(--gutter); }

/* every section heading is the same size */
.h-section {
    font-size: var(--fs-h2);
    line-height: 1.02;
    letter-spacing: 0.005em;
}

/* underline that draws in from the left and leaves to the right */
.link-line {
    position: relative;
    display: inline-block;
    color: inherit;
}
.link-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.25em;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.5s var(--ease);
}
.link-line:hover::after,
.link-line:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* a plain text link: red underline, nothing appended */
.text-link {
    display: inline-block;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--accent);
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ivory);
    transition: color 0.3s ease;
}
.text-link:hover,
.text-link:focus-visible { color: var(--accent); }

.btn-ember {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0 2.25rem;
    overflow: hidden;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: var(--fs-body);
    font-weight: 500;
    isolation: isolate;
    transition: color 0.4s var(--ease);
}
.btn-ember::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    transform: translateY(101%);
    transition: transform 0.5s var(--ease);
}
.btn-ember:hover,
.btn-ember:focus-visible { color: var(--ivory); }
.btn-ember:hover::before,
.btn-ember:focus-visible::before { transform: translateY(0); }

/* photograph frames */
.frame {
    position: relative;
    overflow: hidden;
    background: var(--brown);
}
.frame picture,
.frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 3 / 2; }

/* shown instead of a photograph whose file has not been added yet (build-time aid) */
.img-missing {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 12rem;
    padding: 1rem;
    border: 1px dashed var(--accent);
    background: var(--brown);
    color: var(--beige);
    font-size: var(--fs-small);
    text-align: center;
}

/* film grain over everything: a screen-sized box clipping a larger, moving texture */
.grain {
    position: fixed;
    inset: 0;
    z-index: 150;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.085;
    mix-blend-mode: overlay;
}
.grain::before {
    content: "";
    position: absolute;
    inset: -60%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 0.9s steps(5) infinite;
}
@media (max-width: 767.98px) {
    .grain::before {
        inset: 0;
        animation: none;
    }
}
@keyframes grain {
    0% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(-4%, 6%, 0); }
    40% { transform: translate3d(7%, -3%, 0); }
    60% { transform: translate3d(-6%, -8%, 0); }
    80% { transform: translate3d(5%, 4%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* 4. Header and menu ------------------------------------------------------ */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    transition: transform 0.6s var(--ease), background-color 0.5s ease, box-shadow 0.5s ease;
}
.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.4rem var(--gutter);
    transition: padding 0.5s var(--ease);
}
.site-header.is-solid {
    background: rgba(var(--obsidian-rgb), 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(var(--ivory-rgb), 0.08);
}
.site-header.is-solid .site-header__bar { padding-block: 0.9rem; }
.site-header.is-hidden { transform: translateY(-101%); }

/* the brand name is the one thing set in capitals */
.wordmark {
    margin: 0;
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ivory);
    white-space: nowrap;
}
a.wordmark:hover { color: var(--ivory); }

.site-nav {
    gap: clamp(1.5rem, 2.6vw, 2.75rem);
    margin-left: auto;
}
.site-nav a,
.reserve-link {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--ivory);
}
.reserve-link {
    margin-left: clamp(0rem, 1.5vw, 1.5rem);
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.reserve-link:hover,
.reserve-link:focus-visible {
    background: var(--accent);
    color: var(--ivory);
}
@media (max-width: 991.98px) {
    .reserve-link { margin-left: auto; }
}

.menu-toggle {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    background: none;
}
.burger {
    position: relative;
    display: grid;
    gap: 0.4375rem;
    width: 1.75rem;
}
.burger i {
    display: block;
    height: 1.5px;
    background: var(--ivory);
    transition: transform 0.4s var(--ease), background-color 0.3s ease;
}
.burger--close {
    height: 1.75rem;
    gap: 0;
}
.burger--close i {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}
.burger--close i:first-child { transform: rotate(45deg); }
.burger--close i:last-child { transform: rotate(-45deg); }

/* mobile menu: a black panel that slides in from the right */
.site-menu.offcanvas {
    --bs-offcanvas-width: min(22.5rem, 88vw);
    --bs-offcanvas-bg: #000;
    display: flex;
    flex-direction: column;
    border: 0;
    border-left: 1px solid rgba(var(--accent-rgb), 0.28);
    background: #000;
    color: #fff;
    transition-duration: 0.5s;
    transition-timing-function: var(--ease);
}
.offcanvas-backdrop { background-color: #000; }
.offcanvas-backdrop.show { opacity: 0.72; }
.site-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.75rem;
}
.site-menu .wordmark {
    font-size: 1.2rem;
    color: #fff;
}
.site-menu .burger i { background: var(--accent); }
.site-menu__nav {
    display: grid;
    align-content: start;
    flex: 1;
    padding: 1.5rem 1.75rem 0;
    overflow-y: auto;
}
.site-menu__nav a {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--display);
    font-size: var(--fs-h3);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.1;
    color: #fff;
    transition: color 0.3s ease;
}
.site-menu__nav a:hover,
.site-menu__nav a:focus-visible { color: var(--accent); }
.site-menu__foot { padding: 1.75rem 1.75rem calc(1.75rem + env(safe-area-inset-bottom)); }
.site-menu__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: var(--fs-body);
    font-weight: 500;
}
.site-menu__cta:hover,
.site-menu__cta:focus-visible {
    background: var(--accent);
    color: var(--ivory);
}

/* 5. Opening film --------------------------------------------------------- */

.fire {
    position: relative;
    height: 100vh;
    height: 100svh;
    background: #000;
}
/* the length of the scroll is the length of the film */
.js .fire { height: 580vh; }
@media (max-width: 767.98px) {
    .js .fire { height: 460svh; }
}

.fire__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.fire__layers,
.fire__layer {
    position: absolute;
    inset: 0;
}
.fire__layer { will-change: transform, opacity; }
.fire__layer picture,
.fire__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.js .fire__layer {
    visibility: hidden;
    opacity: 0;
}

/* the footage: a still for first paint, then the frame sequence on a canvas */
.fire__film {
    position: absolute;
    inset: -14px; /* room for the focus blur, so its soft edge stays off screen */
    will-change: filter;
}
.fire__poster,
.fire__frames {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fire__frames { opacity: 0; }
.fire__frames.is-live { opacity: 1; }
.no-js .fire__layer,
.no-js .fire__frames { display: none; }

.fire__haze,
.fire__glow,
.fire__canvas,
.fire__shade,
.fire__flash,
.fire__curtain {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* heat haze: soft patches of blur drifting up. Wide screens only. */
.fire__haze { display: none; }
@media (min-width: 992px) and (hover: hover) {
    .fire__haze {
        display: block;
        inset: 12% 0 22% 0;
        opacity: calc(var(--heat) * 0.9);
        -webkit-backdrop-filter: blur(2.5px);
        backdrop-filter: blur(2.5px);
        -webkit-mask-image: radial-gradient(18% 30% at 22% 80%, #000, transparent 70%), radial-gradient(22% 36% at 52% 70%, #000, transparent 70%), radial-gradient(16% 28% at 78% 84%, #000, transparent 70%), radial-gradient(20% 30% at 38% 30%, #000, transparent 70%), radial-gradient(18% 26% at 68% 20%, #000, transparent 70%);
        mask-image: radial-gradient(18% 30% at 22% 80%, #000, transparent 70%), radial-gradient(22% 36% at 52% 70%, #000, transparent 70%), radial-gradient(16% 28% at 78% 84%, #000, transparent 70%), radial-gradient(20% 30% at 38% 30%, #000, transparent 70%), radial-gradient(18% 26% at 68% 20%, #000, transparent 70%);
        -webkit-mask-size: 100% 200%;
        mask-size: 100% 200%;
        animation: haze 7s linear infinite;
    }
}
@keyframes haze {
    from { -webkit-mask-position: 0 0; mask-position: 0 0; }
    to { -webkit-mask-position: 0 -200%; mask-position: 0 -200%; }
}

.fire__glow {
    inset: auto -10% -35% -10%;
    height: 90%;
    background: radial-gradient(50% 60% at 50% 100%, rgba(var(--fire-rgb), 0.6), rgba(158, 79, 41, 0.2) 45%, transparent 72%);
    mix-blend-mode: screen;
    opacity: 0;
}
.fire__canvas {
    width: 100%;
    height: 100%;
}
.fire__shade {
    background:
        radial-gradient(125% 95% at 50% 55%, transparent 30%, rgba(var(--obsidian-rgb), 0.78) 100%),
        linear-gradient(to top, rgba(var(--obsidian-rgb), 0.9), transparent 42%),
        linear-gradient(to bottom, rgba(var(--obsidian-rgb), 0.6), transparent 24%);
}
.fire__flash {
    background: radial-gradient(65% 55% at 50% 66%, rgba(255, 190, 110, 0.6), rgba(var(--fire-rgb), 0.22) 50%, transparent 76%);
    mix-blend-mode: screen;
    opacity: 0;
}
.fire__curtain {
    background: #000;
    opacity: 0;
}
.js .fire__curtain { opacity: 1; }

/* opening title */
.fire__hero {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--gutter) clamp(5rem, 12vh, 8rem);
}
.fire__title {
    display: grid;
    font-size: clamp(5rem, min(21vw, 37vh), 24rem);
    line-height: 0.86;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}
.fire__title > span {
    display: block;
    overflow: hidden;
    padding-top: 0.06em;
}
.fire__title-b {
    justify-self: end;
    margin-top: -0.02em;
}
.fire__tagline {
    order: -1;
    margin-bottom: 1.25rem;
    font-family: var(--sans);
    font-size: var(--fs-lead);
    line-height: 1.2;
}
@media (min-width: 768px) {
    .fire__tagline {
        position: absolute;
        left: var(--gutter);
        bottom: clamp(5.4rem, 13vh, 8.6rem);
        margin: 0;
    }
}

.fire__hint,
.fire__skip {
    position: absolute;
    z-index: 5;
    right: var(--gutter);
    bottom: 1.75rem;
    font-size: var(--fs-small);
    color: rgba(var(--ivory-rgb), 0.75);
}
.fire__hint {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.fire__hint i {
    position: relative;
    width: 2.75rem;
    height: 1px;
    overflow: hidden;
    background: rgba(var(--ivory-rgb), 0.2);
}
.fire__hint i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    animation: hint 2.4s var(--ease) infinite;
}
@keyframes hint {
    0% { transform: translateX(-101%); }
    55%, 100% { transform: translateX(101%); }
}
.fire__skip {
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(var(--ivory-rgb), 0.4);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.fire__skip:hover,
.fire__skip:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
}
.js .fire__skip {
    visibility: hidden;
    opacity: 0;
}
.no-js .fire__hint,
.no-js .fire__skip { display: none; }

/* lines over the film */
.fire__captions {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}
.fire__cap {
    position: absolute;
    left: var(--gutter);
    bottom: clamp(4.75rem, 12vh, 8rem);
    max-width: min(36rem, 86vw);
    visibility: hidden;
    opacity: 0;
}
.fire__cap h2 {
    margin-bottom: 1rem;
    font-size: var(--fs-dish);
    line-height: 0.95;
}
.fire__cap p {
    max-width: 30ch;
    font-size: var(--fs-lead);
    line-height: 1.4;
    color: rgba(var(--ivory-rgb), 0.92);
}

.fire__final {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--gutter) clamp(4.5rem, 10vh, 7rem);
    visibility: hidden;
    pointer-events: none;
}
.fire__mark {
    font-family: var(--display);
    font-size: clamp(5rem, min(15vw, 34vh), 17rem);
    font-weight: 600;
    line-height: 0.88;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fire__mark > span {
    display: inline-block;
    overflow: hidden;
    padding-top: 0.06em;
    vertical-align: bottom;
}
.fire__closing {
    order: -1;
    margin-bottom: clamp(1.25rem, 2.8vw, 2.75rem);
    font-family: var(--sans);
    font-size: var(--fs-lead);
}
@media (max-width: 767.98px) {
    .fire__mark {
        font-size: 29vw;
        white-space: normal;
    }
    .fire__mark > span { display: block; }
    .fire__hint,
    .fire__skip { left: var(--gutter); right: auto; }
    .fire__hero { padding-bottom: 5.5rem; }
    .fire__title {
        font-size: 29vw;
        white-space: nowrap;
    }
    .fire__title-b { justify-self: start; }
}

/* 6. About ---------------------------------------------------------------- */

.intro {
    padding-block: var(--section);
    background: var(--obsidian);
}
/* sized so the heading sits on exactly two lines beside the photograph */
@media (min-width: 992px) {
    .intro .h-section { font-size: min(var(--fs-h2), 3.7vw); }
}
.intro__copy {
    display: grid;
    gap: 1.1rem;
    max-width: 32rem;
    margin-block: clamp(1.75rem, 3vw, 2.5rem);
    color: rgba(var(--ivory-rgb), 0.86);
}
.intro__figure { aspect-ratio: 4 / 5; }
@media (max-width: 991.98px) {
    .intro__figure {
        aspect-ratio: 4 / 3;
        margin-top: 3.5rem;
    }
}

/* 7. Menu ----------------------------------------------------------------- */

/* signature dishes: stacked by default (no JavaScript, or reduced motion) */
.sig {
    position: relative;
    background: var(--charcoal);
    padding-top: var(--section);
}
.sig__label {
    padding: 0 var(--gutter) 2.5rem;
    font-family: var(--sans);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
}
.sig__item {
    display: grid;
    gap: 1.5rem;
    padding: 0 var(--gutter) clamp(3.5rem, 8vw, 6rem);
}
.sig__figure {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--brown);
}
.sig__figure picture,
.sig__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sig__name h3 {
    font-size: var(--fs-dish);
    line-height: 0.92;
    letter-spacing: 0.005em;
}
.sig__body {
    max-width: 30rem;
    margin-top: 1rem;
}
.sig__line {
    font-family: var(--sans);
    font-size: var(--fs-lead);
    line-height: 1.3;
}
.sig__cut {
    margin-top: 0.6rem;
    font-size: var(--fs-small);
    color: var(--beige);
}
.sig__index,
.sig__peek { display: none; }

/* pinned version (class added by signature.js): the photograph fills the screen,
   the words sit over it the way the captions sit over the opening film */
.sig.is-pinned {
    height: calc(var(--sig-count) * 160vh);
    padding: 0;
}
.sig.is-pinned .sig__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.sig.is-pinned .sig__label {
    color: var(--ivory); /* over a photograph: the red would not read */
    position: absolute;
    z-index: 4;
    top: clamp(5.25rem, 12vh, 7rem);
    left: 0;
    padding-bottom: 0;
}
.sig.is-pinned .sig__item {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
}
.sig.is-pinned .sig__figure {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    will-change: clip-path;
}
.sig.is-pinned .sig__figure picture { will-change: transform; }
/* shade under the words: dark at the bottom and on the left, clear over the food */
.sig.is-pinned .sig__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(var(--obsidian-rgb), 0.92), rgba(var(--obsidian-rgb), 0.35) 38%, transparent 62%),
        linear-gradient(to right, rgba(var(--obsidian-rgb), 0.55), transparent 48%),
        linear-gradient(to left, rgba(var(--obsidian-rgb), 0.9), rgba(var(--obsidian-rgb), 0.5) 18%, transparent 36%),
        linear-gradient(to bottom, rgba(var(--obsidian-rgb), 0.6), transparent 22%);
}
.sig.is-pinned .sig__text {
    position: absolute;
    z-index: 3;
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(4.5rem, 11vh, 7rem);
}
.sig.is-pinned .sig__name {
    overflow: hidden;
    padding: 0.35rem 0 0.2rem;
}
.sig.is-pinned .sig__name h3 { font-size: clamp(3rem, 6vw + 1rem, 9rem); }
.sig.is-pinned .sig__body { margin-top: 0.75rem; }

/* the list of dishes. On a phone it is a row of short bars under the header. */
.sig.is-pinned .sig__index {
    position: absolute;
    z-index: 4;
    top: calc(clamp(5.25rem, 12vh, 7rem) + 2.4rem);
    left: var(--gutter);
    right: var(--gutter);
    display: flex;
    gap: 0.4rem;
}
.sig.is-pinned .sig__index li { flex: 1; }
.sig__index button {
    display: block;
    width: 100%;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-top: 2px solid rgba(var(--ivory-rgb), 0.28);
    background: none;
    color: transparent;
    font-size: 0;
    transition: border-color 0.4s ease, color 0.4s ease;
}
.sig__index button.is-done { border-color: rgba(var(--ivory-rgb), 0.7); }
.sig__index button.is-on { border-color: var(--accent); }

@media (min-width: 992px) {
    .sig.is-pinned .sig__text {
        right: auto;
        width: min(52rem, 58vw);
    }
    /* on wide screens the list is spelled out, top right; the preview sits bottom right */
    .sig.is-pinned .sig__index {
        top: clamp(5.25rem, 12vh, 7rem);
        left: auto;
        right: var(--gutter);
        display: grid;
        justify-items: end;
        gap: 0.1rem;
        width: auto;
    }
    .sig__index button {
        display: inline-flex;
        align-items: center;
        gap: 0.9rem;
        width: auto;
        height: auto;
        padding: 0.45rem 0;
        border: 0;
        font-family: var(--display);
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(var(--ivory-rgb), 0.7);
    }
    .sig__index button::after {
        content: "";
        width: 1.25rem;
        height: 1px;
        background: currentColor;
        transition: width 0.4s var(--ease);
    }
    .sig__index button:hover,
    .sig__index button:focus-visible { color: var(--ivory); }
    .sig__index button.is-done { color: rgba(var(--ivory-rgb), 0.7); }
    .sig__index button.is-on { color: var(--accent); }
    .sig__index button.is-on::after { width: 3rem; }

    /* the next dish, small, in the corner */
    .sig.is-pinned .sig__peek {
        position: absolute;
        z-index: 4;
        right: var(--gutter);
        bottom: clamp(4.5rem, 11vh, 7rem);
        display: block;
        width: clamp(11rem, 13vw, 15rem);
        transition: opacity 0.5s ease;
    }
    .sig__peek.is-off { opacity: 0; }
    /* on short screens there is no room for both the list and the preview */
    @media (max-height: 760px) {
        .sig.is-pinned .sig__peek { display: none; }
    }
    .sig__peek p {
        margin-bottom: 0.6rem;
        font-size: var(--fs-small);
        color: rgba(var(--ivory-rgb), 0.75);
    }
    .sig__peek figure {
        position: absolute;
        left: 0;
        right: 0;
        opacity: 0;
        transition: opacity 0.6s ease;
    }
    .sig__peek figure.is-on {
        position: relative;
        opacity: 1;
    }
    .sig__peek picture,
    .sig__peek img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    .sig__peek picture { border: 1px solid rgba(var(--ivory-rgb), 0.25); }
    .sig__peek figcaption {
        margin-top: 0.6rem;
        font-family: var(--display);
        font-weight: 600;
        text-transform: uppercase;
        font-size: var(--fs-lead);
        line-height: 1.1;
    }
}

/* the rest of the menu: a plain list */
.menu {
    position: relative;
    padding-block: var(--section);
    background: var(--charcoal);
}
.menu__list {
    margin-top: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid var(--hair);
}
.menu__row {
    position: relative;
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-template-areas: "thumb name" "thumb line";
    align-items: center;
    gap: 0.2rem 1.1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--hair);
}
.menu__thumb {
    grid-area: thumb;
    width: 4rem;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--brown);
}
.menu__thumb picture,
.menu__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu__name {
    grid-area: name;
    font-size: var(--fs-h3);
}
.menu__line {
    grid-area: line;
    font-size: var(--fs-body);
    color: var(--beige);
}
.menu__foot { margin-top: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 992px) {
    .menu__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "name line";
        gap: 2.5rem;
        padding: 1.6rem 0;
        transition: opacity 0.4s ease;
    }
}
@media (min-width: 992px) and (hover: hover) {
    /* the photograph follows the pointer; its position is set in menu.js */
    .menu__thumb {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        width: clamp(15rem, 21vw, 22rem);
        aspect-ratio: 4 / 5;
        pointer-events: none;
        clip-path: inset(100% 0 0 0);
        transition: clip-path 0.6s var(--ease);
    }
    .menu__row:hover .menu__thumb { clip-path: inset(0 0 0 0); }
    .menu__list:hover .menu__row:not(:hover) { opacity: 0.35; }
}
@media (min-width: 992px) and (hover: none) {
    .menu__thumb { display: none; }
}

/* 8. Room ----------------------------------------------------------------- */

.room { background: var(--obsidian); }
.room__lead {
    position: relative;
    height: clamp(28rem, 92vh, 60rem);
    overflow: hidden;
}
.room__lead-img {
    position: absolute;
    inset: 0;
}
.room__lead-img picture,
.room__lead-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.room__lead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--obsidian) 2%, rgba(var(--obsidian-rgb), 0.35) 45%, rgba(var(--obsidian-rgb), 0.5) 80%, var(--obsidian));
}
.room__lead-text {
    position: absolute;
    z-index: 2;
    inset: auto 0 clamp(2.5rem, 7vw, 6rem) 0;
}
.room__lead-text .h-section { max-width: 16ch; }

/* 9. Gallery -------------------------------------------------------------- */

.gallery {
    padding-block: var(--section);
    background: var(--obsidian);
    overflow: hidden;
}
.gallery__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.gallery__nav {
    display: flex;
    gap: 0.75rem;
}
.gallery__arrow {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 1px solid rgba(var(--ivory-rgb), 0.35);
    background: none;
    color: var(--ivory);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
/* only where there is a real pointer: on touch screens a tapped button would stay lit */
@media (hover: hover) {
    .gallery__arrow:hover:not(:disabled) {
        border-color: var(--accent);
        background: var(--accent);
        color: var(--ivory);
    }
}
.gallery__arrow:active:not(:disabled) { border-color: var(--accent); }
.gallery__arrow:disabled { opacity: 0.3; }
/* how far along the strip you are */
.gallery__bar {
    height: 2px;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--hair);
}
.gallery__bar i {
    display: block;
    height: 100%;
    background: var(--accent);
    transform: scaleX(0.12);
    transform-origin: left center;
    transition: transform 0.2s linear;
}
/* Swiper's own stylesheet is fetched on demand and so arrives after this one;
   the selectors below carry one more class than Swiper's so they keep winning. */
.gallery .gallery__strip {
    --strip: clamp(19rem, 62vh, 42rem);
    height: var(--strip);
    padding-inline: var(--gutter);
    overflow: visible;
}
.gallery .gallery__strip .swiper-wrapper {
    display: flex;
    align-items: flex-end;
    height: 100%;
}
/* before Swiper arrives (or without JavaScript) the strip simply scrolls sideways */
.gallery .gallery__strip:not(.is-enhanced) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.gallery .gallery__strip:not(.is-enhanced)::-webkit-scrollbar { display: none; }
.gallery__strip .gallery__slide {
    flex: none;
    height: 100%;
    margin-right: clamp(0.75rem, 1.6vw, 1.75rem);
    overflow: hidden;
    background: var(--brown);
}
.gallery__strip .gallery__slide--tall { width: calc(var(--strip) * 0.72); }
.gallery__strip .gallery__slide--wide {
    width: calc(var(--strip) * 1.28);
    height: 84%;
}
.gallery__strip .gallery__slide--square {
    width: calc(var(--strip) * 0.62);
    height: 62%;
    align-self: flex-start;
}
.gallery__link,
.gallery__link picture,
.gallery__link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 767.98px) {
    .gallery__strip .gallery__slide--wide { width: calc(var(--strip) * 1.05); }
}

/* the library's stylesheet loads after this one and sets a white caption bar, so these are one class more specific */
.glightbox-container.glightbox-clean .gslide-description { background: var(--obsidian); }
.glightbox-container.glightbox-clean .gdesc-inner { padding: 1rem 0; }
.glightbox-container.glightbox-clean .gslide-desc {
    font-family: var(--sans);
    font-size: var(--fs-small);
    color: var(--beige);
}
.goverlay { background: rgba(5, 4, 3, 0.96); }

/* 10. Contact ------------------------------------------------------------- */

.contact {
    position: relative;
    overflow: hidden;
    padding-block: var(--section);
    background: var(--obsidian);
    isolation: isolate;
}
.contact__bg {
    position: absolute;
    z-index: -2;
    inset: 0;
}
.contact__bg picture,
.contact__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(to right, rgba(var(--obsidian-rgb), 0.94), rgba(var(--obsidian-rgb), 0.8));
}
.contact__lead {
    max-width: 30ch;
    margin-block: 1.5rem 2.25rem;
    font-family: var(--sans);
    font-size: var(--fs-lead);
    line-height: 1.35;
}
.contact__facts { border-top: 1px solid var(--hair); }
@media (max-width: 991.98px) {
    .contact__facts { margin-top: 3rem; }
}
.contact__fact {
    display: grid;
    grid-template-columns: 9rem 1fr;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--hair);
}
.contact__fact dt {
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--beige);
}
.contact__fact dd {
    font-family: var(--sans);
    font-size: var(--fs-lead);
    line-height: 1.3;
}
.contact__fact .text-link {
    margin-top: 0.9rem;
    font-family: var(--sans);
}
.contact__hours {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}
@media (max-width: 575.98px) {
    .contact__fact {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}

/* 11. Footer, back to top ------------------------------------------------- */

.site-footer {
    padding-top: clamp(3rem, 5vw, 4.5rem);
    background: var(--charcoal);
    font-size: var(--fs-small);
    color: rgba(var(--ivory-rgb), 0.8);
}
.site-footer .wordmark { font-size: 1.2rem; }
.site-footer__about {
    max-width: 34ch;
    margin-top: 1.1rem;
    line-height: 1.6;
}
.site-footer__sign {
    margin-top: 1.25rem;
    font-family: var(--sans);
    font-size: var(--fs-lead);
    font-weight: 500;
    color: var(--ivory);
}
.site-footer__head {
    margin-bottom: 0.9rem;
    font-family: var(--sans);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    color: var(--accent);
}
.site-footer__list {
    display: grid;
    gap: 0.45rem;
}
.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    border-top: 1px solid var(--hair);
    /* leaves room on the right for the fixed back-to-top button */
    padding: 1.25rem 4rem 1.25rem 0;
    font-size: 0.8125rem;
    color: var(--beige);
}

/* back to top: fixed, bottom right, appears once the page has been scrolled */
.to-top {
    position: fixed;
    z-index: 90;
    right: var(--gutter);
    bottom: 1.25rem;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(var(--ivory-rgb), 0.3);
    background: rgba(var(--obsidian-rgb), 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ivory);
    transition: opacity 0.4s ease, visibility 0.4s, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.to-top:hover,
.to-top:focus-visible {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--ivory);
}
.js .to-top {
    visibility: hidden;
    opacity: 0;
}
.js .to-top.is-on {
    visibility: visible;
    opacity: 1;
}
@media (max-width: 767.98px) {
    .to-top {
        bottom: 1rem;
        width: 2.75rem;
        height: 2.75rem;
    }
}
/* wide screens: the button lives in the page margin, so it never sits on top of text */
@media (min-width: 1200px) {
    .to-top {
        right: calc((var(--gutter) - 2.5rem) / 2);
        width: 2.5rem;
        height: 2.5rem;
    }
}
/* in between, it shares the corner with the film's skip link, which steps aside */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .fire__hint,
    .fire__skip { right: calc(var(--gutter) + 4.25rem); }
}

/* 12. Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .grain::before,
    .fire__haze,
    .fire__hint i::after { animation: none; }
    .js .fire { height: 460vh; }
    .btn-ember::before,
    .link-line::after,
    .menu__thumb { transition-duration: 0.01s; }
}