/* =============================================================
   Artsy Bodrum Loft — standalone static site stylesheet
   All paths are relative. No CDN dependencies.
   ============================================================= */

/* ----- Fonts ------------------------------------------------- */

/* Brandon Grotesque Light W05 (Condensed Light) — body + headings */
@font-face {
    font-family: "Brandon Grotesque Light";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("./fonts/brandon-grot-w05-light.woff2") format("woff2");
    font-synthesis: style;
}
/* Brandon Grotesque W01 Light — CTA links */
@font-face {
    font-family: "Brandon Grotesque W01";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("./fonts/brandon-grot-w01-light.woff2") format("woff2");
    font-synthesis: style;
}

/* Cinzel — self-hosted from Google Fonts (downloaded for offline portability) */
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/cinzel-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Cinzel";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/cinzel-400-latin.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: "Cinzel";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("./fonts/cinzel-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Cinzel";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("./fonts/cinzel-500-latin.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: "Cinzel";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("./fonts/cinzel-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Cinzel";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("./fonts/cinzel-600-latin.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: "Cinzel";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/cinzel-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Cinzel";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/cinzel-700-latin.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;
}

/* ----- Tokens ------------------------------------------------ */

:root {
    --bg: #f2f2f2;
    --ink: #363636;
    --accent: #edd65f;
    --accent-deep: #b89db4;
    --pink: #d8c0d4;
    --dark: #1a1a1a;
    --frame-pad: 5vw;
    --row-gap: 16px;
}
@media (max-width: 768px) {
    :root {
        --frame-pad: 5vw;
        --row-gap: 12px;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family:
        "Brandon Grotesque Light", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.015em;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

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

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

a {
    color: var(--ink);
    text-decoration: none;
    transition:
        color 240ms ease,
        text-decoration-color 240ms ease;
}

/* ----- Layout helpers ---------------------------------------- */

.frame {
    padding-left: var(--frame-pad);
    padding-right: var(--frame-pad);
}

.row {
    display: grid;
    gap: var(--row-gap);
    margin-top: var(--row-gap);
}
.row.row-50-50 {
    grid-template-columns: 1fr 1fr;
}
.row.row-33-33-33 {
    grid-template-columns: 1fr 1fr 1fr;
}
.row.row-66-33 {
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 900px) {
    .row.row-50-50,
    .row.row-33-33-33,
    .row.row-66-33 {
        grid-template-columns: 1fr;
    }
}

/* ----- Header ------------------------------------------------ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(242, 242, 242, 0.6);
    transition: background 400ms ease;
}
.site-header.scrolled {
    background: rgba(242, 242, 242, 0.92);
}
.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
    position: relative;
}
@media (min-width: 901px) {
    /* desktop: grid — menu button LEFT, logo CENTER, right RIGHT */
    .site-header .header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .site-header .header-inner .menu-btn-left {
        grid-column: 1;
        justify-self: start;
    }
    .site-header .header-inner .logo {
        grid-column: 2;
        justify-self: center;
    }
    .site-header .header-inner .right {
        grid-column: 3;
        justify-self: end;
    }
    /* hide the mobile-position button on desktop */
    .site-header .menu-btn-right {
        display: none !important;
    }
}
.site-header .logo img {
    height: 36px;
    width: auto;
}
@media (max-width: 900px) {
    /* mobile: hide left button, use the one inside .right */
    .site-header .menu-btn-left {
        display: none;
    }
}
.site-header .right {
    display: flex;
    align-items: center;
    gap: 28px;
}
.site-header .text-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
}
.site-header .text-stack a {
    font-family:
        "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    color: var(--ink);
}
.site-header .text-stack a:first-child {
    letter-spacing: 0.09em;
}
.site-header .text-stack a:hover {
    color: var(--accent-deep);
}
@media (max-width: 640px) {
    .site-header .text-stack {
        display: none;
    }
    /* show the same stack inside the menu strip instead when menu opens */
}
.menu-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
}
.menu-btn span {
    display: block;
    width: 28px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 300ms ease, opacity 300ms ease;
}
.menu-btn.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.menu-btn.open span:nth-child(2) {
    opacity: 0;
}
.menu-btn.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ----- Menu strip ------------------------------------------- */

/* Default state: collapsed (hidden) */
.menu-strip {
    max-height: 0;
    overflow: hidden;
    transition: max-height 450ms cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg);
    border-top: 1px solid rgba(54, 54, 54, 0);
}

.site-header.menu-open .menu-strip {
    max-height: 220px;
}

.menu-strip nav ul {
    list-style: none;
    padding: 36px var(--frame-pad);
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 72px;
}

.menu-strip nav ul li a {
    font-family: "Brandon Grotesque W01", "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-size: 26px;
    letter-spacing: 0.02em;
    color: var(--ink);
    transition: color 300ms ease;
}

.menu-strip nav ul li a.primary {
    color: var(--accent);
}

.menu-strip nav ul li a:hover {
    color: var(--accent-deep);
}

.menu-strip nav ul li a.primary:hover {
    color: var(--ink);
}

.menu-strip .secondary-stack {
    display: none;
}

/* MOBILE: full-screen overlay */
@media (max-width: 900px) {
    .site-header.menu-open .menu-strip {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 56px);
        height: calc(100vh - 56px);
        z-index: 30;
        background: var(--bg);
        overflow: auto;
    }
    .menu-strip nav ul {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 18px;
        padding: 48px 24px 24px;
    }
    .menu-strip nav ul li a {
        font-size: 20px;
        letter-spacing: 0.02em;
    }
    /* Reservations / See You at Artsy secondary stack inside menu — mobile only */
    .menu-strip .mobile-secondary {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-top: 28px;
        padding: 24px 24px 0;
        border-top: 1px solid rgba(54, 54, 54, 0.12);
        width: calc(100% - 48px);
        margin-left: auto;
        margin-right: auto;
    }
    .menu-strip .mobile-secondary a {
        font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 16px;
        color: var(--ink);
        letter-spacing: 0.04em;
    }
    .menu-strip .mobile-secondary a:first-child {
        letter-spacing: 0.09em;
    }
}
@media (min-width: 901px) {
    .menu-strip .mobile-secondary {
        display: none;
    }
}

/* ----- Hero -------------------------------------------------- */

.hero {
    padding-top: 80px;
}
@media (max-width: 768px) {
    .hero {
        padding-top: 72px;
    }
}
.hero .row {
    margin-top: 0;
}
.hero .pic {
    overflow: hidden;
    aspect-ratio: 3/2;
}
@media (max-width: 1024px) {
    .hero .pic {
        aspect-ratio: 4/3;
    }
}
.hero .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- Yellow content block --------------------------------- */

.text-box {
    background: var(--accent);
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 1024px) {
    .text-box {
        padding: 48px 48px;
    }
}
@media (max-width: 768px) {
    .text-box {
        padding: 40px 32px;
    }
}
.text-box h2 {
    font-family: "Cinzel", serif;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 5.5px;
    margin: 0 0 20px;
}
@media (max-width: 768px) {
    .text-box h2 {
        font-size: 17px;
        letter-spacing: 3px;
    }
}
.text-box .sep {
    width: 48px;
    height: 1px;
    background: rgba(54, 54, 54, 0.6);
    margin-bottom: 24px;
}
.text-box p {
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin: 0 0 16px;
}
.text-box p:nth-last-of-type(1) {
    margin-bottom: 28px;
}
.text-box .cta {
    font-family: "Brandon Grotesque W01", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--ink);
    align-self: flex-start;
    transition: color 300ms ease;
}
.text-box .cta:hover {
    color: var(--accent-deep);
}
.text-box .cta span.arrow {
    display: inline-block;
    margin-left: 8px;
    transition: transform 300ms ease;
}
.text-box .cta:hover span.arrow {
    transform: translateX(4px);
}
.text-box .wave {
    width: 64px;
    margin-bottom: 16px;
    opacity: 0.9;
}

/* Gallery cells */
.cell {
    overflow: hidden;
    min-height: 280px;
}
.cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1200ms ease-out;
}
.cell:hover img {
    transform: scale(1.03);
}

.row.row-33-33-33 .cell,
.row.row-66-33 .cell {
    min-height: 320px;
}

/* ----- Footer upper ----------------------------------------- */

.footer-upper {
    background: var(--bg);
    padding-top: 96px;
    padding-bottom: 96px;
}
@media (max-width: 768px) {
    .footer-upper {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}
.footer-upper .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}
@media (max-width: 900px) {
    .footer-upper .grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}
.footer-upper h2,
.footer-upper h3 {
    font-family: "Cinzel", serif;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ink);
    letter-spacing: 5.5px;
    line-height: 1.3;
    margin: 0 0 24px;
}
.footer-upper h2 {
    font-size: 30px;
}
.footer-upper h3 {
    font-size: 30px;
}
.footer-upper p,
.footer-upper address {
    font-size: 18px;
    line-height: 1.85;
    letter-spacing: 0.05em;
    color: var(--ink);
    font-style: normal;
    margin: 0 0 16px;
    max-width: 65ch;
}
.contact-section .phone,
.contact-section .email,
.contact-section .get-directions,
.contact-section .hours {
    line-height: 1.85;
}

/* Newsletter form */
.newsletter form {
    text-align: left;
}
.newsletter input[type="email"] {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink);
    padding: 10px 0;
    font-size: 16px;
    color: var(--ink);
    font-family: inherit;
    border-radius: 0;
}
.newsletter input[type="email"]:focus {
    outline: none;
    border-bottom-color: var(--accent-deep);
}
.newsletter input[type="email"]::placeholder {
    color: var(--ink);
    opacity: 0.6;
}
.newsletter .subscribe-btn {
    margin-top: 28px;
    background: var(--accent);
    color: var(--ink);
    border: 0;
    border-radius: 0;
    padding: 14px 28px;
    font-family: "Brandon Grotesque W01", sans-serif;
    font-weight: 300;
    letter-spacing: 0.08em;
    font-size: 15px;
    cursor: pointer;
    min-width: 240px;
    text-align: left;
    transition:
        background 240ms ease,
        color 240ms ease;
}
.newsletter .subscribe-btn:hover {
    background: var(--ink);
    color: var(--accent);
}

/* Contact column */
.contact-section {
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(54, 54, 54, 0.15);
}
.contact-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.contact-section .link-underline,
.footer-upper a.link-underline {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.contact-section .link-underline:hover,
.footer-upper a.link-underline:hover {
    text-decoration-color: var(--ink);
}
.contact-section .phone {
    font-size: 20px;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 8px;
}
.contact-section .email {
    font-size: 18px;
    letter-spacing: 0.05em;
    display: inline-block;
}
.contact-section .get-directions {
    font-family: "Brandon Grotesque W01", sans-serif;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.contact-section .get-directions:hover {
    text-decoration-color: var(--ink);
}
.contact-section .get-directions .arrow {
    text-decoration: none;
    display: inline-block;
}
.contact-section .hours {
    font-family: "Brandon Grotesque W01", sans-serif;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin: 0 0 4px;
}
.contact-section .italic-phrase {
    font-style: italic;
}

/* Pulse highlights */
@keyframes pulse-line {
    0% {
        background-color: rgba(237, 214, 95, 0);
        transform: scale(1);
    }
    20% {
        background-color: rgba(237, 214, 95, 1);
        transform: scale(1.04);
        box-shadow: 0 0 0 10px rgba(237, 214, 95, 0.35);
    }
    60% {
        background-color: rgba(237, 214, 95, 0.9);
        transform: scale(1.02);
        box-shadow: 0 0 0 16px rgba(237, 214, 95, 0);
    }
    100% {
        background-color: rgba(237, 214, 95, 0);
        transform: scale(1);
    }
}
.pulse-line {
    animation: pulse-line 2.4s ease-out 1;
    border-radius: 6px;
    padding: 2px 8px;
    margin: -2px -8px;
}
@keyframes pulse-block {
    0% {
        background-color: rgba(237, 214, 95, 0);
        box-shadow:
            inset 0 0 0 0 rgba(237, 214, 95, 0),
            0 0 0 0 rgba(237, 214, 95, 0);
    }
    25% {
        background-color: rgba(237, 214, 95, 0.85);
        box-shadow:
            inset 0 0 0 1px rgba(237, 214, 95, 1),
            0 0 0 8px rgba(237, 214, 95, 0.25);
    }
    100% {
        background-color: rgba(237, 214, 95, 0);
        box-shadow:
            inset 0 0 0 0 rgba(237, 214, 95, 0),
            0 0 0 0 rgba(237, 214, 95, 0);
    }
}
.pulse-block {
    animation: pulse-block 2.6s ease-out 1;
    border-radius: 6px;
    padding: 8px 12px;
    margin: -8px -12px;
}

/* ----- Dark footer ------------------------------------------ */

.dark-footer {
    background: var(--dark);
    color: var(--bg);
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative;
    overflow: hidden;
}
.dark-footer .star-bg {
    position: absolute;
    top: -64px;
    right: -64px;
    width: 320px;
    height: 320px;
    opacity: 0.04;
    filter: invert(1);
    pointer-events: none;
}
.dark-footer .desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}
/* Tinted star (uses CSS mask so the SVG can be coloured) */
.star-tint {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: #edd65f;
    -webkit-mask: url("./assets/star.svg") no-repeat center / contain;
    mask: url("./assets/star.svg") no-repeat center / contain;
    flex-shrink: 0;
}
.dark-footer .brand {
    text-align: left;
}
.dark-footer .brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 7px;
}
.dark-footer .brand-row .star-tint {
    width: 28px;
    height: 28px;
    background-color: #edd65f;
    -webkit-mask: url("./assets/star.svg") no-repeat center / contain;
    mask: url("./assets/star.svg") no-repeat center / contain;
    flex-shrink: 0;
}
.dark-footer .brand-title {
    font-family: "Cinzel", serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #edd65f;
    font-size: 16px;
    letter-spacing: 0.22em;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}
.dark-footer .summer {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-synthesis: style;
    color: var(--bg);
    font-size: 18px;
    margin: 0;
    padding-left: 40px;
}
.dark-footer .follow {
    text-align: left;
}
.dark-footer .follow .label {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-synthesis: style;
    color: var(--bg);
    font-size: 18px;
    margin: 0 0 12px;
}
.dark-footer .follow .ig-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.dark-footer .follow .ig-row a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--bg);
    font-size: 16px;
}
.dark-footer .follow .ig-row a:hover {
    color: var(--pink);
}
.dark-footer .follow .ig-row svg {
    width: 22px;
    height: 22px;
}
.dark-footer .legal {
    text-align: left;
}
.dark-footer .legal p {
    margin: 0 0 16px;
    color: rgba(242, 242, 242, 0.7);
    font-size: 15px;
    line-height: 1.6;
}
.dark-footer .legal .policy-links {
    font-size: 15px;
}
.dark-footer .legal .policy-links a {
    color: var(--pink);
}
.dark-footer .legal .policy-links a:hover {
    color: var(--bg);
}
.dark-footer .legal .policy-links span {
    color: rgba(242, 242, 242, 0.4);
    margin: 0 8px;
}

.dark-footer .mobile-only {
    display: none;
}
@media (max-width: 900px) {
    .dark-footer .desktop-grid {
        display: none;
    }
    .dark-footer .mobile-only {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .dark-footer .mobile-only .star-inline {
        width: 24px;
        height: 24px;
        margin-bottom: 16px;
    }
    .dark-footer .mobile-only .brand-title {
        font-size: 24px;
        letter-spacing: 0.22em;
    }
    .dark-footer .mobile-only .summer {
        font-size: 18px;
        margin: 8px 0 40px;
        padding-left: 0;
    }
    .dark-footer .mobile-only .follow {
        margin-bottom: 40px;
    }
    .dark-footer .mobile-only .follow .label {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .dark-footer .mobile-only .divider {
        width: 96px;
        height: 1px;
        background: rgba(242, 242, 242, 0.2);
        margin-bottom: 24px;
    }
}

/* ----- WhatsApp button -------------------------------------- */

.whatsapp-btn {
    position: fixed;
    z-index: 50;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition:
        transform 300ms ease,
        background 300ms ease;
}
.whatsapp-btn:hover {
    background: #1ebd5d;
    transform: scale(1.1);
}
.whatsapp-btn svg {
    width: 30px;
    height: 30px;
    z-index: 2;
}
@media (min-width: 768px) {
    .whatsapp-btn {
        width: 64px;
        height: 64px;
        right: 32px;
        bottom: 32px;
    }
    .whatsapp-btn svg {
        width: 34px;
        height: 34px;
    }
}

/* ----- Mobile tweaks ---------------------------------------- */

@media (max-width: 900px) {
    .cocktails-block .row.row-66-33 {
        grid-template-areas: "img" "text";
    }
}

/* prevent body scroll when menu open */
body.no-scroll {
    overflow: hidden;
}

/* ----- ABOUT PAGE ------------------------------------------- */

.about-header-spacer {
    height: 88px;
    background: var(--bg);
}
@media (min-width: 768px) {
    .about-header-spacer { height: 96px; }
}

.about-section {
    background: var(--bg);
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}
.about-card {
    background: #ffffff;
    padding: 32px 24px 48px;
}
@media (min-width: 768px) {
    .about-card { padding: 56px 48px 64px; }
}
@media (min-width: 1024px) {
    .about-card { padding: 56px 80px 64px; }
}

.about-title {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: var(--ink);
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.04em;
    margin: 0 0 40px;
}
@media (min-width: 768px) { .about-title { font-size: 28px; margin-bottom: 56px; } }
@media (min-width: 1024px) { .about-title { font-size: 34px; } }

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
}
@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }
}
@media (min-width: 1024px) {
    .about-grid { gap: 80px; }
}

.about-copy { padding-top: 8px; }
.about-copy .rule {
    display: block;
    width: 48px;
    height: 2px;
    background: #edd65f;
    margin-bottom: 32px;
}
.about-copy p {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: 0.03em;
    margin: 0 0 28px;
}
@media (min-width: 768px) {
    .about-copy p { font-size: 18px; }
}
.about-copy p.signoff {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    text-transform: none;
    font-size: 16px;
    letter-spacing: 0.03em;
    line-height: 1.4;
    margin-top: 32px;
}
@media (min-width: 768px) {
    .about-copy p.signoff { font-size: 17px; }
}

.about-image {
    margin-top: 8px;
}
.about-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4 / 5;
    display: block;
}

/* ----- INSTAGRAM FEED --------------------------------------- */

.ig-feed {
    background: var(--bg);
}
.ig-card {
    background: #ffffff;
}
.ig-title-band {
    background: var(--bg);
    padding: 20px 24px;
}
@media (min-width: 768px) {
    .ig-title-band { padding: 24px 48px; }
}
@media (min-width: 1024px) {
    .ig-title-band { padding: 24px 80px; }
}
.ig-feed-title {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: var(--ink);
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.03em;
    margin: 0;
}
@media (min-width: 768px) {
    .ig-feed-title { font-size: 20px; }
}
.ig-feed-title a {
    color: inherit;
    transition: color 200ms;
}
.ig-feed-title a:hover { color: var(--pink); }

.ig-grid-wrap {
    padding: 0 0 44px;
}
@media (min-width: 768px) {
    .ig-grid-wrap { padding: 0 0 64px; }
}
.ig-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 768px) {
    .ig-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}
.ig-grid .ig-post {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #e8e8e8;
}
.ig-grid .ig-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}
.ig-grid .ig-post:hover img {
    transform: scale(1.05);
}

/* ----- PRIVATE EVENTS PAGE ---------------------------------- */

/* sub-italic heading used at the top of the copy column */
.about-copy .sub-italic,
.pe-subsection .sub-italic {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-synthesis: style;
    color: var(--ink);
    font-size: 20px;
    letter-spacing: 0.03em;
    margin: 0 0 28px;
}
@media (min-width: 768px) {
    .about-copy .sub-italic,
    .pe-subsection .sub-italic { font-size: 22px; }
}
.pe-subsection .sub-italic.centered {
    text-align: center;
    font-size: 22px;
    margin-bottom: 40px;
}
@media (min-width: 768px) {
    .pe-subsection .sub-italic.centered { font-size: 26px; }
}

/* small uppercase italic intro before a list */
.about-copy .list-intro,
.pe-subsection .list-intro {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-synthesis: style;
    color: var(--ink);
    font-size: 17px;
    letter-spacing: 0.03em;
    margin: 0 0 12px;
}
@media (min-width: 768px) {
    .about-copy .list-intro,
    .pe-subsection .list-intro { font-size: 18px; }
}

/* lists with small gold round bullets */
.gold-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: 0.03em;
}
@media (min-width: 768px) {
    .gold-bullets { font-size: 18px; }
}
.gold-bullets li {
    position: relative;
    padding-left: 18px;
}
.gold-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #edd65f;
}
@media (min-width: 640px) {
    .gold-bullets.two-col {
        column-count: 2;
        column-gap: 32px;
    }
    .gold-bullets.two-col li {
        break-inside: avoid;
    }
}

/* image variants — desktop vs mobile */
.pe-image .pe-image-desktop { display: none; }
.pe-image .pe-image-mobile { display: block; }
@media (min-width: 768px) {
    .pe-image .pe-image-desktop { display: block; }
    .pe-image .pe-image-mobile { display: none; }
}
.pe-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

/* Bar Catering subsection — centered narrow column with top divider */
.pe-subsection {
    max-width: 860px;
    margin: 64px auto 0;
    padding-top: 48px;
    border-top: 1px solid rgba(54, 54, 54, 0.1);
}
@media (min-width: 768px) {
    .pe-subsection {
        margin-top: 96px;
        padding-top: 64px;
    }
}
.pe-subsection p {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: 0.03em;
    margin: 0 0 28px;
}
@media (min-width: 768px) {
    .pe-subsection p { font-size: 18px; }
}

/* uppercase kicker label */
.pe-subsection .kicker,
.pe-contact .kicker {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--ink);
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.22em;
    margin: 0 0 16px;
}
@media (min-width: 768px) {
    .pe-subsection .kicker,
    .pe-contact .kicker { font-size: 14px; }
}

/* Contact block */
.pe-contact {
    max-width: 860px;
    margin: 48px auto 0;
    padding-top: 40px;
    border-top: 1px solid rgba(54, 54, 54, 0.1);
    text-align: center;
}
@media (min-width: 768px) {
    .pe-contact {
        margin-top: 64px;
        padding-top: 48px;
    }
}
.pe-contact p {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: 0.03em;
    margin: 0 0 24px;
}
@media (min-width: 768px) {
    .pe-contact p { font-size: 18px; }
}
.pe-contact .pe-contact-lines .sep {
    color: rgba(54, 54, 54, 0.3);
    margin: 0 12px;
}

/* ----- EVENTS PAGE ------------------------------------------ */

.about-copy .events-intro {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-synthesis: style;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin: 0 0 40px;
}
@media (min-width: 768px) {
    .about-copy .events-intro { font-size: 22px; }
}

.events-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}
.events-list li {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(54, 54, 54, 0.1);
}
.events-list li:last-child {
    border-bottom: none;
}
@media (min-width: 768px) {
    .events-list li { gap: 24px; }
}
.events-list .ev-date {
    display: flex;
    flex-direction: column;
    min-width: 78px;
}
@media (min-width: 768px) {
    .events-list .ev-date { min-width: 96px; }
}
.events-list .ev-day {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: var(--ink);
    font-size: 18px;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .events-list .ev-day { font-size: 20px; }
}
.events-list .ev-weekday {
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-synthesis: style;
    color: rgba(54, 54, 54, 0.6);
    font-size: 13px;
    letter-spacing: 0.02em;
    margin-top: 4px;
}
@media (min-width: 768px) {
    .events-list .ev-weekday { font-size: 14px; }
}
.events-list .ev-title {
    flex: 1;
    font-family: "Brandon Grotesque Light", "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: 0.02em;
}
@media (min-width: 768px) {
    .events-list .ev-title { font-size: 18px; }
}

.ev-poster {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}