/* ════════════════════════════════════════════════════════════════════════
   Graceland Salon — public site

   Mobile first, one screen, no page scroll. The home view is the logo, four
   section tiles and a Book / Call dock pinned under the thumb. Everything
   else lives in drawers that slide in from the sides; only drawers scroll.

   Motion rules: transforms and opacity only (GPU-composited, never layout),
   short durations with a fast-out ease so things feel like they snap into
   place rather than float. All of it switches off under reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Cinzel";
    src: url("fonts/cinzel-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Cinzel";
    src: url("fonts/cinzel-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant";
    src: url("fonts/cormorant-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant";
    src: url("fonts/cormorant-400i.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant";
    src: url("fonts/cormorant-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

:root {
    --black: #000;
    --ink: #0a0608;
    --panel: #0e090c;
    --panel-2: #160e13;
    --line: rgba(255, 236, 228, 0.09);
    --gold: #d6b25e;
    --gold-hi: #f3dc9a;
    --gold-lo: #a67c2e;
    --gold-line: rgba(214, 178, 94, 0.42);
    --pink: #f0529c;
    --blush: #f6b5d8;
    --ivory: #f6ece4;
    --text: #e6d9d3;
    --muted: #a8969e;

    --display: "Cinzel", "Trajan Pro", Georgia, serif;
    --serif: "Cormorant", "Cormorant Garamond", Garamond, Georgia, serif;
    /* Plain sans for information people need to read at a glance —
       addresses, hours, phone numbers — where the display serif is too
       delicate at small sizes. System fonts: nothing extra to download. */
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-drawer: 280ms;
    --t-quick: 140ms;

    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    margin: 0;
}
body {
    background: var(--black);
    color: var(--text);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    overscroll-behavior: none;
}
img {
    max-width: 100%;
    display: block;
}
a {
    color: var(--gold-hi);
}
button {
    font: inherit;
    color: inherit;
}
h1,
h2,
h3 {
    margin: 0;
    font-weight: 500;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
[hidden] {
    display: none !important;
}

.ic {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ic--sm {
    width: 15px;
    height: 15px;
}

/* ── Backdrop: the salon's harlequin wall, top and bottom ─────────────────
   The diamonds are an SVG tile drawn from the actual wall's colours. Each
   band is masked to fade into black toward the middle, where the content
   sits, and dimmed so the gold of the logo still reads as the brightest
   thing on screen. */
.harlequin {
    position: fixed;
    left: 0;
    right: 0;
    height: 25vh;
    height: 25dvh;
    background: url("img/harlequin.svg") center / 432px auto repeat;
    opacity: 0.78;
    pointer-events: none;
    z-index: 0;
    animation: fade-in 900ms var(--ease) both;
}
.harlequin--top {
    top: 0;
    -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.4) 30%, transparent 85%);
    mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.4) 30%, transparent 85%);
}
.harlequin--bottom {
    bottom: 0;
    background-position: center bottom;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.4) 30%, transparent 85%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.4) 30%, transparent 85%);
}
/* Soft pink glow behind the logo — the salon's neon underlighting. */
.shell::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: 120vmin;
    height: 80vmin;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(240, 82, 156, 0.13), transparent 70%);
    pointer-events: none;
}

/* Only on the preview copy (app/env.php 'preview' => true). */
.preview-badge {
    position: fixed;
    top: calc(8px + var(--safe-t));
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid var(--gold-line);
    color: var(--gold-hi);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    pointer-events: none;
    white-space: nowrap;
}

/* ── Home view ──────────────────────────────────────────────────────────── */
.shell {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
    transition:
        transform var(--t-drawer) var(--ease),
        filter var(--t-drawer) var(--ease);
}
body.has-drawer .shell {
    transform: scale(0.97);
    filter: brightness(0.55);
}

.stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3dvh, 32px);
    padding: 16px 16px 8px;
    /* Only on absurdly short screens (landscape phone) does this ever
       scroll — better than clipping the tiles. */
    overflow-y: auto;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: rise 520ms var(--ease) both;
}
.brand__logo {
    width: min(64vw, 40dvh, 380px);
    height: auto;
    filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
}
.brand__tag {
    margin: clamp(6px, 1.4dvh, 14px) 0 0;
    font-style: italic;
    font-size: clamp(17px, 2.5dvh, 22px);
    color: var(--blush);
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px #000;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: min(100%, 420px);
}
.tiles[data-count="3"] {
    grid-template-columns: repeat(3, 1fr);
}
.tile {
    --i: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: clamp(62px, 10.5dvh, 94px);
    border: 1px solid var(--gold-line);
    border-radius: 14px;
    background: rgba(12, 7, 10, 0.74);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ivory);
    text-decoration: none;
    font-family: var(--display);
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition:
        transform var(--t-quick) var(--ease),
        border-color var(--t-quick),
        background-color var(--t-quick);
    animation: rise 520ms var(--ease) both;
    animation-delay: calc(90ms + var(--i) * 45ms);
}
.tile__ic {
    color: var(--gold);
    width: 22px;
    height: 22px;
}
.tile:hover {
    border-color: var(--gold);
    background: rgba(24, 13, 19, 0.82);
}
.tile:active {
    transform: scale(0.96);
    transition-duration: 60ms;
}

.where {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 14px;
    animation: fade-in 700ms 280ms var(--ease) both;
}
.where a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 4px;
    color: var(--muted);
    text-decoration: none;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.where a:hover {
    color: var(--ivory);
}
.where .ic {
    color: var(--gold);
}

/* The dock sits under the thumb and is the only thing a visitor in a hurry
   needs. Book is the gold one; Call is secondary. */
.dock {
    position: relative;
    display: flex;
    gap: 10px;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 10px 16px calc(12px + var(--safe-b));
    animation: rise 520ms 200ms var(--ease) both;
}
.dock .btn--gold {
    flex: 1.5 1 0;
}
.dock .btn--line {
    flex: 1 1 0;
    background: rgba(12, 7, 10, 0.74);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition:
        transform var(--t-quick) var(--ease),
        filter var(--t-quick),
        border-color var(--t-quick);
}
.btn:active {
    transform: scale(0.97);
    transition-duration: 60ms;
}
.btn--gold {
    color: #1a1006;
    background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-lo) 100%);
    box-shadow:
        0 6px 22px rgba(214, 178, 94, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--gold:hover {
    filter: brightness(1.07);
}
.btn--line {
    color: var(--ivory);
    border-color: var(--gold-line);
    background: transparent;
}
.btn--line .ic {
    color: var(--gold);
}
.btn--line:hover {
    border-color: var(--gold);
}
.btn--block {
    display: flex;
    width: 100%;
}


.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ivory);
    cursor: pointer;
    transition:
        background-color var(--t-quick),
        transform var(--t-quick) var(--ease);
}
.icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}
.icon-btn:active {
    transform: scale(0.9);
}
.icon-btn .ic {
    width: 22px;
    height: 22px;
}

/* ── Drawers ───────────────────────────────────────────────────────────────
   [hidden] until opened so closed drawers cost nothing and are out of the
   tab order. site.js removes [hidden], waits a frame, then adds .is-open so
   the transform actually animates. */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity var(--t-drawer) var(--ease);
}
.scrim.is-open {
    opacity: 1;
}

.drawer {
    --w: min(92vw, 440px);
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--w);
    z-index: 30;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(240, 82, 156, 0.05), transparent 30%),
        var(--panel);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
    transition: transform var(--t-drawer) var(--ease);
    will-change: transform;
    outline: none;
}
.drawer--right {
    right: 0;
    border-left: 1px solid var(--gold-line);
    transform: translate3d(100%, 0, 0);
    padding-right: var(--safe-r);
}
.drawer--left {
    left: 0;
    border-right: 1px solid var(--gold-line);
    transform: translate3d(-100%, 0, 0);
    padding-left: var(--safe-l);
}
.drawer--sub {
    z-index: 31;
}
.drawer--wide {
    --w: 100vw;
}
.drawer.is-open {
    transform: translate3d(0, 0, 0);
}
.drawer.is-dragging {
    transition: none;
}

.drawer__head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 60px;
    padding: calc(8px + var(--safe-t)) 8px 8px 20px;
    border-bottom: 1px solid var(--line);
}
.drawer__head:has(> [data-back]) {
    padding-left: 8px;
}
.drawer__head h2 {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 20px calc(28px + var(--safe-b));
}
.drawer__body > * + * {
    margin-top: 18px;
}

.lede {
    margin: 0;
    font-size: 19px;
    color: var(--ivory);
}
.fine {
    margin: 0;
    font-size: 16px;
    color: var(--muted);
}
.fine a {
    color: var(--gold-hi);
}

/* Things inside an opening drawer arrive a beat after it. */
.drawer.is-open .people li,
.drawer.is-open .book-list li {
    animation: rise 380ms var(--ease) both;
    animation-delay: calc(70ms + var(--i, 0) * 35ms);
}

/* ── Book ──────────────────────────────────────────────────────────────── */
/* Same readable sans as Visit for the sentences and details; names and
   the Book/Call labels keep the display face. */
#book .drawer__body {
    font-family: var(--sans);
}
#book .lede {
    font-size: 17px;
    line-height: 1.5;
}
#book .fine {
    font-size: 15px;
    line-height: 1.5;
}
#book .book-row__txt small {
    font-size: 14px;
    margin-top: 2px;
}
/* Breathing room: the panel is a short list people scan, not a form. */
#book .drawer__body {
    padding-top: 26px;
}
#book .drawer__body > * + * {
    margin-top: 26px;
}
#book .book-list {
    gap: 16px;
}
#book .book-row {
    gap: 18px;
    padding: 16px 20px 16px 16px;
}
#book .book-row__txt {
    gap: 4px;
}
#book .book-row__txt strong {
    letter-spacing: 0.06em;
}
#book .book-row__go {
    margin-top: 6px;
}
#book .book-list + .fine,
#book .btn + .fine {
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
#book .fine + .fine {
    margin-top: 12px;
}
.book-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.book-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-2);
    color: var(--text);
    text-decoration: none;
    transition:
        border-color var(--t-quick),
        transform var(--t-quick) var(--ease);
}
.book-row:hover {
    border-color: var(--gold-line);
}
.book-row:active {
    transform: scale(0.98);
}
.book-row img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--gold-line);
}
.book-row__txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.book-row__txt strong {
    font-family: var(--display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--ivory);
}
.book-row__txt small {
    font-size: 15px;
    line-height: 1.3;
    color: var(--muted);
}
.book-row__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── Stylists ──────────────────────────────────────────────────────────── */
.people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
}
.person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    color: var(--text);
    text-decoration: none;
}
.person__ph {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 8px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--panel-2);
    box-shadow:
        0 0 0 1px var(--gold-line),
        0 0 0 5px var(--panel),
        0 0 0 6px rgba(214, 178, 94, 0.18);
    transition: transform var(--t-quick) var(--ease);
}
.person__ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.person:active .person__ph {
    transform: scale(0.96);
}
.person strong {
    font-family: var(--display);
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: 0.08em;
    color: var(--ivory);
}
.person small {
    font-size: 15px;
    line-height: 1.3;
    color: var(--muted);
}

.bio__ph {
    width: min(100%, 300px);
    height: auto; /* the width/height attributes would otherwise win over aspect-ratio */
    aspect-ratio: 1;
    object-fit: cover;
    margin: 4px auto 18px;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px var(--gold-line),
        0 0 0 7px var(--panel),
        0 0 0 8px rgba(214, 178, 94, 0.2);
}
.bio__title {
    margin: 0;
    text-align: center;
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.bio__spec {
    margin: 6px 0 0;
    text-align: center;
    font-style: italic;
    color: var(--blush);
}
.bio__txt {
    margin-top: 14px;
    font-size: 19px;
    color: var(--text);
}
.bio__txt p {
    margin: 0 0 12px;
}

/* Phone and email as plain, readable text (still tappable) — the buttons
   below are for one-tap actions; this is for reading or copying. */
.contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-family: var(--sans);
    font-size: 17px;
}
.contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.contact .ic {
    color: var(--gold);
    flex: 0 0 auto;
}
.contact a {
    color: var(--ivory);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.contact a:hover {
    color: var(--gold-hi);
    text-decoration: underline;
}
.contact--center {
    margin-top: 28px !important;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.contact--center li {
    justify-content: center;
}

.actions {
    display: grid;
    gap: 10px;
}
.actions__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.actions__row .btn {
    flex: 1 1 130px;
    padding: 0 14px;
}

/* ── Services ──────────────────────────────────────────────────────────── */
.svc h3,
.loc h3 {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.svc dl {
    margin: 0;
}
.svc__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--line);
}
.svc__row dt {
    flex: 1 1 auto;
    color: var(--ivory);
}
.svc__row dt small {
    display: block;
    font-size: 14.5px;
    color: var(--muted);
}
.svc__row dd {
    margin: 0;
    flex: 0 0 auto;
    text-align: right;
    color: var(--gold-hi);
    font-weight: 600;
}

/* ── Visit ─────────────────────────────────────────────────────────────── */
#visit .drawer__body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
}
#visit .loc address {
    font-size: 18px;
    line-height: 1.45;
}
#visit .loc__tel {
    margin: 0;
}
#visit .loc__tel a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-hi);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}
#visit .loc__tel .ic {
    color: var(--gold);
}
#visit .fine,
#visit .social a {
    font-size: 15px;
}
#visit .hours caption {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 600;
}
#visit .hours th,
#visit .hours td {
    padding: 7px 0;
}
.loc > * + * {
    margin-top: 14px;
}
.loc address {
    font-style: normal;
    font-size: 20px;
    color: var(--ivory);
    display: flex;
    flex-direction: column;
}
.hours {
    width: 100%;
    border-collapse: collapse;
}
.hours caption {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 6px;
}
.hours th,
.hours td {
    padding: 5px 0;
    border-bottom: 1px dotted var(--line);
    text-align: left;
    font-weight: 400;
}
.hours td {
    text-align: right;
    color: var(--ivory);
}

/* Location photo panel: the gallery's grid, in a right-hand sub-drawer. */
.drawer--album .drawer__body {
    padding: 4px 4px calc(16px + var(--safe-b));
}
.drawer--album .drawer__body > * + * {
    margin-top: 0;
}
.album__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 12px 14px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--muted);
}
.album__sub .ic {
    color: var(--gold);
}
.album__sub small {
    margin-left: auto;
    font-size: 13px;
    white-space: nowrap;
}
a.thumb {
    display: block;
}
@media (min-width: 760px) {
    .drawer--album {
        --w: min(88vw, 760px);
    }
}

/* Location album: a strip of up to four thumbnails, then a button. */
.loc__photos {
    display: grid;
    gap: 12px;
}
.loc__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.loc__strip[data-count="1"] {
    grid-template-columns: 1fr;
}
.loc__strip[data-count="1"] .loc__thumb {
    aspect-ratio: 16 / 9;
}
.loc__strip[data-count="2"] {
    grid-template-columns: repeat(2, 1fr);
}
.loc__strip[data-count="3"] {
    grid-template-columns: repeat(3, 1fr);
}
.loc__thumb {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel-2);
    transition: transform var(--t-quick) var(--ease);
}
.loc__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.loc__thumb:active {
    transform: scale(0.96);
}
.map {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    background:
        repeating-linear-gradient(45deg, rgba(214, 178, 94, 0.05) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(214, 178, 94, 0.05) 0 1px, transparent 1px 22px),
        var(--panel-2);
}
.map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: invert(0.9) hue-rotate(180deg) saturate(0.6) brightness(0.95);
    animation: fade-in 400ms var(--ease) both;
}
.map__btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ivory);
}
.map__btn .ic {
    color: var(--gold);
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.social a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ivory);
    text-decoration: none;
    font-size: 16px;
}
.social .ic {
    color: var(--gold);
}

/* ── Gallery ───────────────────────────────────────────────────────────── */
.gal-filter {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
}
/* Search box with a dropdown list of every event, client and tag. The
   list overlays the photos rather than pushing them down, so opening it
   never makes the grid jump. */
.gsearch {
    position: relative;
    display: flex;
    align-items: center;
}
.gsearch__ic {
    position: absolute;
    left: 16px;
    color: var(--gold);
    pointer-events: none;
}
.gsearch input {
    width: 100%;
    min-height: 46px;
    padding: 0 48px 0 46px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    background: var(--ink);
    color: var(--ivory);
    font: 18px/1 var(--serif); /* ≥16px, or iOS zooms the page on focus */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--t-quick);
}
.gsearch input::placeholder {
    color: var(--muted);
    font-style: italic;
}
.gsearch input::-webkit-search-cancel-button {
    display: none;
}
.gsearch input:focus {
    outline: none;
    border-color: var(--gold);
}
.gsearch__clear {
    position: absolute;
    right: 2px;
}

.taglist {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    max-height: min(52vh, 420px);
    max-height: min(52dvh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--gold-line);
    border-radius: 16px;
    background: var(--panel-2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
    animation: drop 160ms var(--ease) both;
}
.taglist__group {
    padding: 10px 18px 4px;
    font-family: var(--display);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.taglist__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 18px;
    cursor: pointer;
    color: var(--ivory);
    font-size: 18px;
    transition: background-color var(--t-quick);
}
.taglist__item small {
    color: var(--muted);
    font-size: 15px;
}
.taglist__item:hover,
.taglist__item[aria-selected="true"] {
    background: rgba(214, 178, 94, 0.12);
}
.taglist__empty {
    padding: 12px 18px;
    color: var(--muted);
    font-size: 16px;
}

.gpicked {
    display: flex;
}
.gpicked__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--blush);
    color: #1a0c13;
    cursor: pointer;
    font-size: 17px;
    animation: fade-in 160ms var(--ease) both;
}
.gpicked__pill small {
    font-family: var(--display);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
}
.gpicked__pill i {
    font-style: normal;
    font-size: 12px;
    opacity: 0.7;
}
.gpicked__pill:active {
    transform: scale(0.96);
}

#gallery .drawer__body {
    padding: 4px 4px calc(12px + var(--safe-b));
}
.gal-h {
    padding: 14px 12px 10px;
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}
.gal-featured .gal-h {
    padding-top: 8px;
}
.gal-seeall {
    width: calc(100% - 24px) !important;
    margin: 18px 12px 8px;
}
.gal-all .gal-h {
    margin-top: 18px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.grid .fine {
    grid-column: 1 / -1;
    padding: 24px 16px;
    text-align: center;
}
.thumb {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--panel-2);
    cursor: zoom-in;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition:
        opacity 260ms var(--ease),
        transform 260ms var(--ease);
}
.thumb img.is-loaded {
    opacity: 1;
    transform: none;
}
.thumb:active img {
    transform: scale(0.97);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: #000; /* solid: at 97% the panel text behind ghosted through */
    opacity: 0;
    transition: opacity 180ms var(--ease);
    touch-action: pan-y;
}
.lightbox.is-open {
    opacity: 1;
}
.lb__fig {
    margin: 0;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 0 var(--safe-b);
}
.lb__fig img {
    max-width: 100vw;
    max-height: 80vh;
    max-height: 80dvh;
    object-fit: contain;
    transition:
        transform 200ms var(--ease),
        opacity 200ms var(--ease);
}
.lb__fig figcaption {
    padding: 0 20px;
    text-align: center;
    color: var(--text);
    font-size: 17px;
}
.lb__fig figcaption small {
    display: block;
    color: var(--muted);
    font-size: 14.5px;
}
.lb__close {
    position: absolute;
    top: calc(8px + var(--safe-t));
    right: 8px;
}
.lb__prev,
.lb__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
}
.lb__prev {
    left: 6px;
}
.lb__next {
    right: 6px;
}
.lightbox.is-single .lb__prev,
.lightbox.is-single .lb__next {
    display: none;
}
.lb__prev:active,
.lb__next:active {
    transform: translateY(-50%) scale(0.9);
}

/* ── Home: theme banner and social icons ─────────────────────────────── */
/* One short line under the tagline: the holiday theme's message, or a
   pinned Events article. Clamped to two lines so it can never push the
   tiles off a small phone. */
.notice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: min(92vw, 470px);
    margin-top: clamp(6px, 1.3dvh, 14px);
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--th-c1, var(--gold-line));
    background: rgba(12, 7, 10, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ivory);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 0 22px color-mix(in srgb, var(--th-glow, var(--pink)) 22%, transparent);
    animation: rise 520ms 160ms var(--ease) both;
    transition: transform var(--t-quick) var(--ease);
}
.notice span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.notice:active {
    transform: scale(0.97);
}
.notice[data-nolink] {
    cursor: default;
}
.notice__ic {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: var(--th-c1, var(--pink));
}

.social-home {
    display: inline-flex;
    gap: 2px;
}
/* .where's own link styles are for text links; these are icon buttons. */
.where .social-home a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--muted);
    transition: color var(--t-quick), transform var(--t-quick) var(--ease);
}
.where .social-home a:hover {
    color: var(--gold-hi);
}
.where .social-home a:active {
    transform: scale(0.9);
}
.where .social-home .ic {
    width: 18px;
    height: 18px;
    color: inherit;
}

/* Room for the banner on short screens: the logo gives up a little
   height, and the banner keeps to one line. */
.brand:has(.notice:not([hidden])) .brand__logo {
    width: min(64vw, 34dvh, 380px);
}
@media (max-height: 720px) {
    .stage:has(.notice:not([hidden])) {
        gap: clamp(8px, 1.8dvh, 32px);
        padding-top: 10px;
    }
    .notice {
        margin-top: 6px;
        padding: 5px 13px;
        font-size: 12.5px;
    }
    .notice span {
        -webkit-line-clamp: 1;
    }
}

/* Five tiles: 3 + 2 on phones (the 2 centred), one row on wider screens. */
.tile span {
    text-align: center;
    line-height: 1.3;
    padding: 0 4px;
}
.tiles[data-count="5"] {
    grid-template-columns: repeat(6, 1fr);
}
.tiles[data-count="5"] .tile {
    grid-column: span 2;
}
.tiles[data-count="5"] .tile:nth-child(4) {
    grid-column: 2 / span 2;
}

/* ── Holiday themes ────────────────────────────────────────────────────
   A theme sets --th-c1/c2/c3/--th-glow and data-backdrop/data-motif on
   <html> (baked in by the build; site.js changes them if the date moves on
   before the next rebuild, and for the admin's preview).

   Backdrop layers are child <i>s of each harlequin band, so the band's
   own fade-to-black mask still applies on top of them:
     diamonds  the wall's pinks / whites / golds (diamonds-a/b/c.svg) as
               masks, filled with c1 / c2 / c3 — the salon's own pattern in
               the holiday's colours
     motifs    two staggered motif tiles in c1 and c3 over a dark c2 tint
     image     the owner's own picture */
.harlequin > i {
    position: absolute;
    inset: 0;
    display: none;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
}
.harlequin--bottom > i {
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}
html[data-backdrop="diamonds"] .harlequin,
html[data-backdrop="motifs"] .harlequin,
html[data-backdrop="image"] .harlequin {
    background: none;
}
html[data-backdrop="diamonds"] .harlequin > i:not(.h-img) {
    display: block;
    -webkit-mask-size: 432px auto;
    mask-size: 432px auto;
}
/* Flat colour first; the sheen (like the real wall's metallic diamonds)
   where color-mix() is supported. */
html[data-backdrop="diamonds"] .h-a {
    background-color: var(--th-c1);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--th-c1) 72%, #fff), var(--th-c1) 50%, color-mix(in srgb, var(--th-c1) 72%, #000));
    -webkit-mask-image: url("img/diamonds-a.svg?v=1");
    mask-image: url("img/diamonds-a.svg?v=1");
}
html[data-backdrop="diamonds"] .h-b {
    background-color: var(--th-c2);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--th-c2) 72%, #fff), var(--th-c2) 50%, color-mix(in srgb, var(--th-c2) 72%, #000));
    -webkit-mask-image: url("img/diamonds-b.svg?v=1");
    mask-image: url("img/diamonds-b.svg?v=1");
}
html[data-backdrop="diamonds"] .h-c {
    background-color: var(--th-c3);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--th-c3) 60%, #fff), var(--th-c3) 50%, color-mix(in srgb, var(--th-c3) 65%, #000));
    -webkit-mask-image: url("img/diamonds-c.svg?v=1");
    mask-image: url("img/diamonds-c.svg?v=1");
}
html[data-backdrop="motifs"] .harlequin {
    background: color-mix(in srgb, var(--th-c2) 26%, #000);
}
html[data-backdrop="motifs"] .h-a,
html[data-backdrop="motifs"] .h-b {
    display: block;
    -webkit-mask-size: 168px 168px;
    mask-size: 168px 168px;
}
html[data-backdrop="motifs"] .h-a {
    background-color: var(--th-c1);
}
html[data-backdrop="motifs"] .h-b {
    background-color: var(--th-c3);
}
html[data-backdrop="image"] .h-img {
    display: block;
    background-size: cover;
    background-position: center;
}
html[data-backdrop="motifs"][data-motif="heart"] .h-a { -webkit-mask-image: url("img/motifs/heart-a.svg?v=1"); mask-image: url("img/motifs/heart-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="heart"] .h-b { -webkit-mask-image: url("img/motifs/heart-b.svg?v=1"); mask-image: url("img/motifs/heart-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="shamrock"] .h-a { -webkit-mask-image: url("img/motifs/shamrock-a.svg?v=1"); mask-image: url("img/motifs/shamrock-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="shamrock"] .h-b { -webkit-mask-image: url("img/motifs/shamrock-b.svg?v=1"); mask-image: url("img/motifs/shamrock-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="star"] .h-a { -webkit-mask-image: url("img/motifs/star-a.svg?v=1"); mask-image: url("img/motifs/star-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="star"] .h-b { -webkit-mask-image: url("img/motifs/star-b.svg?v=1"); mask-image: url("img/motifs/star-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="sparkle"] .h-a { -webkit-mask-image: url("img/motifs/sparkle-a.svg?v=1"); mask-image: url("img/motifs/sparkle-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="sparkle"] .h-b { -webkit-mask-image: url("img/motifs/sparkle-b.svg?v=1"); mask-image: url("img/motifs/sparkle-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="burst"] .h-a { -webkit-mask-image: url("img/motifs/burst-a.svg?v=1"); mask-image: url("img/motifs/burst-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="burst"] .h-b { -webkit-mask-image: url("img/motifs/burst-b.svg?v=1"); mask-image: url("img/motifs/burst-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="confetti"] .h-a { -webkit-mask-image: url("img/motifs/confetti-a.svg?v=1"); mask-image: url("img/motifs/confetti-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="confetti"] .h-b { -webkit-mask-image: url("img/motifs/confetti-b.svg?v=1"); mask-image: url("img/motifs/confetti-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="snowflake"] .h-a { -webkit-mask-image: url("img/motifs/snowflake-a.svg?v=1"); mask-image: url("img/motifs/snowflake-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="snowflake"] .h-b { -webkit-mask-image: url("img/motifs/snowflake-b.svg?v=1"); mask-image: url("img/motifs/snowflake-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="ornament"] .h-a { -webkit-mask-image: url("img/motifs/ornament-a.svg?v=1"); mask-image: url("img/motifs/ornament-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="ornament"] .h-b { -webkit-mask-image: url("img/motifs/ornament-b.svg?v=1"); mask-image: url("img/motifs/ornament-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="tree"] .h-a { -webkit-mask-image: url("img/motifs/tree-a.svg?v=1"); mask-image: url("img/motifs/tree-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="tree"] .h-b { -webkit-mask-image: url("img/motifs/tree-b.svg?v=1"); mask-image: url("img/motifs/tree-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="pumpkin"] .h-a { -webkit-mask-image: url("img/motifs/pumpkin-a.svg?v=1"); mask-image: url("img/motifs/pumpkin-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="pumpkin"] .h-b { -webkit-mask-image: url("img/motifs/pumpkin-b.svg?v=1"); mask-image: url("img/motifs/pumpkin-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="bat"] .h-a { -webkit-mask-image: url("img/motifs/bat-a.svg?v=1"); mask-image: url("img/motifs/bat-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="bat"] .h-b { -webkit-mask-image: url("img/motifs/bat-b.svg?v=1"); mask-image: url("img/motifs/bat-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="leaf"] .h-a { -webkit-mask-image: url("img/motifs/leaf-a.svg?v=1"); mask-image: url("img/motifs/leaf-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="leaf"] .h-b { -webkit-mask-image: url("img/motifs/leaf-b.svg?v=1"); mask-image: url("img/motifs/leaf-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="egg"] .h-a { -webkit-mask-image: url("img/motifs/egg-a.svg?v=1"); mask-image: url("img/motifs/egg-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="egg"] .h-b { -webkit-mask-image: url("img/motifs/egg-b.svg?v=1"); mask-image: url("img/motifs/egg-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="flower"] .h-a { -webkit-mask-image: url("img/motifs/flower-a.svg?v=1"); mask-image: url("img/motifs/flower-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="flower"] .h-b { -webkit-mask-image: url("img/motifs/flower-b.svg?v=1"); mask-image: url("img/motifs/flower-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="skull"] .h-a { -webkit-mask-image: url("img/motifs/skull-a.svg?v=1"); mask-image: url("img/motifs/skull-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="skull"] .h-b { -webkit-mask-image: url("img/motifs/skull-b.svg?v=1"); mask-image: url("img/motifs/skull-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="bowtie"] .h-a { -webkit-mask-image: url("img/motifs/bowtie-a.svg?v=1"); mask-image: url("img/motifs/bowtie-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="bowtie"] .h-b { -webkit-mask-image: url("img/motifs/bowtie-b.svg?v=1"); mask-image: url("img/motifs/bowtie-b.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="gift"] .h-a { -webkit-mask-image: url("img/motifs/gift-a.svg?v=1"); mask-image: url("img/motifs/gift-a.svg?v=1"); }
html[data-backdrop="motifs"][data-motif="gift"] .h-b { -webkit-mask-image: url("img/motifs/gift-b.svg?v=1"); mask-image: url("img/motifs/gift-b.svg?v=1"); }

/* The pink neon glow behind the logo takes the theme's glow colour. */
html[data-theme] .shell::before {
    background: radial-gradient(closest-side, color-mix(in srgb, var(--th-glow) 17%, transparent), transparent 70%);
}

/* Falling decorations (site.js adds the pieces). Behind the content,
   transforms only, and off entirely for reduced motion. */
.falling {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.fall {
    position: absolute;
    top: 0;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    color: var(--c);
    opacity: 0.8;
    will-change: transform;
    animation: fall var(--d) linear var(--delay) infinite;
}
.fall > svg,
.fall > i {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    animation: sway calc(var(--d) / 3.2) ease-in-out var(--delay) infinite alternate;
}
.fall > i {
    width: 60%;
    background: currentColor;
    border-radius: var(--r, 1px);
}
@keyframes fall {
    from {
        transform: translate3d(0, -8vh, 0);
    }
    to {
        transform: translate3d(0, 108vh, 0);
    }
}
@keyframes sway {
    from {
        transform: translate3d(-16px, 0, 0) rotate(-28deg);
    }
    to {
        transform: translate3d(16px, 0, 0) rotate(28deg);
    }
}


/* String lights along the top and bottom (site.js draws them to fit the
   screen): a wire in swags, with a bulb every so often. Each bulb is a
   socket + a shape from motifs.svg filled with its colour, and a soft
   halo behind it; "twinkle" breathes the halos (opacity only). Top bulbs
   hang down from the wire; bottom bulbs stand up on it. */
.lights {
    position: fixed;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 0;
    pointer-events: none;
    animation: lights-on 900ms 250ms var(--ease) both;
}
.lights--top {
    top: var(--safe-t);
}
.lights--bottom {
    bottom: 0;
}
/* Phones: Book / Call sit on the bottom edge, so the bottom string hangs
   just above them, like a garland over the buttons. */
@media (max-width: 899px) {
    .lights--bottom {
        bottom: calc(66px + var(--safe-b));
    }
}
.lights svg.lights__wire {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.bulb {
    position: absolute;
    width: var(--bs, 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%) rotate(var(--r, 0deg));
    transform-origin: 50% 0;
}
.lights--bottom .bulb {
    flex-direction: column-reverse;
    transform: translate(-50%, -100%) rotate(var(--r, 0deg));
    transform-origin: 50% 100%;
}
.bulb__socket {
    width: 34%;
    height: calc(var(--bs, 16px) * 0.3);
    border-radius: 1.5px;
    background: linear-gradient(90deg, #2a2a2a, #6b6b6b 45%, #2a2a2a);
}
.bulb__shape {
    display: block;
    width: 100%;
    height: var(--bs, 16px);
    margin-top: -2px;
    fill: var(--c);
    filter: drop-shadow(0 0 2px var(--c));
}
.lights--bottom .bulb__shape {
    margin: 0 0 -2px;
}
/* A real bulb points away from its socket: flip it on the bottom string. */
.lights--bottom .bulb--classic .bulb__shape,
.lights--bottom .bulb--globe .bulb__shape {
    transform: rotate(180deg);
}
.bulb__glow {
    position: absolute;
    left: 50%;
    top: 60%;
    width: 300%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--c), transparent);
    opacity: 0.45;
    z-index: -1;
}
.lights--bottom .bulb__glow {
    top: 40%;
}
.lights[data-twinkle] .bulb__glow {
    animation: twinkle var(--tw, 2.6s) ease-in-out var(--twd, 0s) infinite alternate;
}
.lights[data-twinkle] .bulb:nth-child(4n + 2) .bulb__shape {
    animation: twinkle-bulb var(--tw, 2.6s) ease-in-out var(--twd, 0s) infinite alternate;
}
@keyframes twinkle {
    from {
        opacity: 0.15;
    }
    to {
        opacity: 0.6;
    }
}
@keyframes twinkle-bulb {
    from {
        opacity: 0.55;
    }
    to {
        opacity: 1;
    }
}
@keyframes lights-on {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}

/* Fireworks: each burst is a rocket trail that climbs, then sparks that fly
   out (rotate + translateX) and sag a little (the outer <b> drops — a
   separate transform, so "down" stays down whatever the spark's angle).
   site.js moves each burst somewhere new every time it goes round. */
.fireworks {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.fw {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 0;
    height: 0;
}
.fw__trail {
    position: absolute;
    left: -1px;
    top: 0;
    width: 2px;
    height: 34px;
    border-radius: 2px;
    background: linear-gradient(var(--c), transparent);
    opacity: 0;
    animation: fw-trail var(--d) cubic-bezier(0.2, 0.6, 0.4, 1) var(--delay) infinite;
}
.fw b {
    position: absolute;
    left: 0;
    top: 0;
    animation: fw-drop var(--d) ease-in var(--delay) infinite;
}
.fw b i {
    position: absolute;
    left: 0;
    top: -1.25px;
    width: 14px;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--c) 60%, #fff);
    box-shadow: 0 0 6px var(--c);
    transform-origin: 0 50%;
    opacity: 0;
    animation: fw-spark var(--d) cubic-bezier(0.12, 0.75, 0.3, 1) var(--delay) infinite;
}
@keyframes fw-trail {
    0% {
        transform: translateY(60vh);
        opacity: 0;
    }
    4% {
        opacity: 0.9;
    }
    30% {
        transform: translateY(0);
        opacity: 0.9;
    }
    33%,
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes fw-spark {
    0%,
    31% {
        transform: rotate(var(--a)) translateX(0) scale(1.4);
        opacity: 0;
    }
    32% {
        opacity: 1;
    }
    70% {
        opacity: 0.85;
    }
    100% {
        transform: rotate(var(--a)) translateX(var(--rr)) scale(0.3);
        opacity: 0;
    }
}
@keyframes fw-drop {
    0%,
    32% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(26px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fireworks {
        display: none;
    }
    .lights[data-twinkle] .bulb__glow,
    .lights[data-twinkle] .bulb .bulb__shape {
        animation: none;
    }
}

/* ── Events & Sales ─────────────────────────────────────────────────── */
.ev-filter {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
}
.ev-chips {
    display: flex;
    gap: 8px;
    margin: 0 -16px;
    padding: 0 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ev-chips::-webkit-scrollbar {
    display: none;
}
.chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--t-quick), background-color var(--t-quick), transform var(--t-quick) var(--ease);
}
.chip:active {
    transform: scale(0.95);
}
.chip.is-on {
    border-color: var(--pink);
    background: rgba(240, 82, 156, 0.16);
    color: var(--ivory);
}
.ev-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.drawer.is-open .ev-item {
    animation: rise 380ms var(--ease) both;
    animation-delay: 70ms;
}
.ev-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--panel-2);
    color: var(--text);
    text-decoration: none;
    transition: transform var(--t-quick) var(--ease), border-color var(--t-quick);
}
.ev-card:hover {
    border-color: var(--gold-line);
}
.ev-card:active {
    transform: scale(0.98);
}
.ev-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.ev-card__txt {
    display: grid;
    gap: 5px;
    padding: 12px 14px 14px;
    font-family: var(--sans);
}
.ev-card strong {
    font-family: var(--display);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.35;
    color: var(--ivory);
}
.ev-card small {
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--muted);
}
.ev-card--past {
    opacity: 0.75;
}
.ev-card--past img {
    filter: grayscale(0.5);
}
.ev-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--muted);
}
.ev-kind {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ev-kind--event {
    color: var(--gold-hi);
    border-color: var(--gold-line);
}
.ev-kind--sale {
    color: #fff;
    background: var(--pink);
    border-color: var(--pink);
}
.ev-kind--news {
    color: var(--blush);
    border-color: rgba(246, 181, 216, 0.4);
}
.ev-pin {
    color: var(--gold);
    font-size: 12px;
}
.ev-pin::before {
    content: "★ ";
}
.ev-pastbtn .ic {
    color: var(--gold);
}
.ev-none {
    color: var(--muted);
}
.follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 14px;
}
.follow span {
    margin-right: 6px;
}
.follow a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--gold);
}

/* One article, stacked over the list. */
.drawer--article .drawer__body {
    font-family: var(--serif);
}
.art__img {
    width: calc(100% + 40px);
    max-width: none;
    height: auto;
    margin: -20px -20px 0;
}
.art__title {
    font-family: var(--display);
    font-size: 21px;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--ivory);
}
.art__over {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 14.5px;
}
.art__facts {
    justify-content: flex-start;
}
.art__body a {
    color: var(--gold-hi);
    word-break: break-word;
}
.art__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* Photo viewer: "View on Instagram" under a synced photo. */
.lb__src {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--gold-hi);
    font-family: var(--sans);
    font-size: 14px;
    text-decoration: none;
}

@media (min-width: 760px) {
    .tiles[data-count="5"] {
        grid-template-columns: repeat(5, 1fr);
        width: min(100%, 780px);
    }
    .tiles[data-count="5"] .tile,
    .tiles[data-count="5"] .tile:nth-child(4) {
        grid-column: auto;
    }
    .drawer--events,
    .drawer--article {
        --w: min(92vw, 560px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .falling {
        display: none;
    }
}

/* ── Larger screens ────────────────────────────────────────────────────── */
@media (min-width: 560px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 760px) {
    .tiles,
    .tiles[data-count="3"] {
        grid-template-columns: repeat(var(--cols, 4), 1fr);
        width: min(100%, 640px);
    }
    .tiles[data-count="3"] {
        --cols: 3;
    }
    .tiles[data-count="2"] {
        --cols: 2;
    }
    .drawer--wide {
        --w: min(88vw, 1100px);
    }
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 6px;
    }
    #gallery .drawer__body {
        padding: 8px 8px 16px;
    }
    .harlequin {
        background-size: 520px auto;
    }
}
/* ── Desktop ───────────────────────────────────────────────────────────────
   Phones keep Book/Call pinned under the thumb; on a desktop there's no
   thumb, so the dock joins the centred group under the tiles, a size up.

   The backdrop bands also get an eased fade here. A straight linear fade
   ends with a sudden change in slope, which the eye reads as a faint
   horizontal line on a big monitor (a Mach band). Many stops approximate
   an ease-out curve that reaches pure black well before the band ends. */
@media (min-width: 900px) {
    .shell {
        justify-content: center;
    }
    .stage {
        flex: 0 0 auto;
    }
    .dock {
        width: min(100%, 640px);
        padding: 18px 16px calc(24px + var(--safe-b));
        gap: 14px;
    }
    .dock .btn {
        min-height: 62px;
        font-size: 14.5px;
        gap: 12px;
    }
    .dock .btn .ic {
        width: 22px;
        height: 22px;
    }
    .harlequin--top {
        -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.72) 10%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.1) 46%, rgba(0, 0, 0, 0.03) 56%, transparent 64%);
        mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.72) 10%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.1) 46%, rgba(0, 0, 0, 0.03) 56%, transparent 64%);
    }
    .harlequin--bottom {
        -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.72) 10%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.1) 46%, rgba(0, 0, 0, 0.03) 56%, transparent 64%);
        mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.72) 10%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.1) 46%, rgba(0, 0, 0, 0.03) 56%, transparent 64%);
    }
}

@media (hover: none) {
    .tile:hover,
    .btn--line:hover,
    .book-row:hover {
        border-color: var(--gold-line);
    }
}

/* ── Motion ────────────────────────────────────────────────────────────── */
@keyframes rise {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes drop {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
    body.has-drawer .shell {
        transform: none;
    }
}