/* =========================================================================
   Creations by Gitta — stylesheet
   ---------------------------------------------------------------------------
   Authored, designed and built by: Yonatan Baruh Ibragimov
   Build identifier: YBI-CBG-2026
   Copyright © Yonatan Baruh Ibragimov. All rights reserved.

   This stylesheet is the original work of Yonatan Baruh Ibragimov and is
   licensed exclusively to Creations by Gitta. Unauthorized reproduction,
   redistribution, or rehosting — in whole or in part — is prohibited.
   ---------------------------------------------------------------------------
   Aesthetic borrowed from annalacivitadesigns.ca:
   restrained, feminine luxury. Bone whites, soft grays,
   dusty rose accent, generous whitespace, tracked uppercase nav,
   serif display headings.
   ========================================================================= */

:root {
    /* ----- Authorship signature (kept as live custom properties so the
       value survives into the CSSOM and can be read at runtime via
       getComputedStyle(document.documentElement).getPropertyValue('--site-author')) ----- */
    --site-author:    "Yonatan Baruh Ibragimov";
    --site-author-id: "YBI-CBG-2026";
    --site-copyright: "© Yonatan Baruh Ibragimov — All rights reserved";

    /* Palette */
    --bone:        #fdfcfa;
    --paper:       #f6f3ef;
    --mist:        #eae9e9;
    --line:        #e0dede;
    --text:        #2b2b2b;
    --text-soft:   #5a5a5a;
    --text-mute:   #8a8a8a;
    --rose:        #b9675e;
    --rose-deep:   #9a4f47;
    --blush:       #f7d9d7;
    --blush-soft:  #ffe9e8;
    --coral:       #ffbcb8;

    /* Typography */
    --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Layout */
    --max-w: 1320px;
    --pad-x: clamp(20px, 5vw, 64px);
    --section-pad-y: clamp(72px, 10vw, 140px);

    /* Motion */
    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bone);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color .25s var(--ease);
}

a:hover {
    color: var(--rose);
}

button {
    font-family: inherit;
    cursor: pointer;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--text);
    line-height: 1.15;
    margin: 0 0 .5em 0;
    letter-spacing: .005em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

p {
    margin: 0 0 1em 0;
    color: var(--text-soft);
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--rose);
    margin: 0 0 1.2em 0;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    border: 1px solid var(--text);
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    padding: 18px 38px;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
    cursor: pointer;
}

.btn:hover {
    background: var(--text);
    color: var(--bone);
    border-color: var(--text);
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(253, 252, 250, 0.94);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

/* ---- Top utility strip: contact + social, sits above the brand row ---- */
.header-contact {
    background: var(--text);
    color: var(--bone);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.header-contact-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 9px var(--pad-x);
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 26px);
    flex-wrap: wrap;
    font-size: 12px;
    letter-spacing: .04em;
}

.header-contact-spacer {
    flex: 1;
    min-width: 12px;
}

.header-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bone);
    text-decoration: none;
    font-weight: 400;
    transition: color .25s var(--ease), opacity .25s var(--ease);
    white-space: nowrap;
}

.header-contact-item svg {
    width: 14px;
    height: 14px;
    color: var(--rose);
    flex-shrink: 0;
}

.header-contact-item:hover {
    color: var(--rose);
}

.header-contact-item--muted {
    opacity: .7;
    font-size: 11px;
}

.header-contact-tag {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rose);
    padding-right: 4px;
}

.header-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--bone);
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.header-contact-icon svg {
    width: 13px;
    height: 13px;
}

.header-contact-icon:hover {
    background: var(--rose);
    border-color: var(--rose);
    color: var(--bone);
}

@media (max-width: 720px) {
    .header-contact-inner {
        padding: 8px var(--pad-x);
        gap: 12px 16px;
        justify-content: center;
        font-size: 11px;
    }
    .header-contact-spacer { display: none; }
    .header-contact-item--muted { display: none; }
    .header-contact-item span:not(.header-contact-tag) {
        /* Keep email + main phone visible but tighten on phones */
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .header-contact-item span:not(.header-contact-tag) {
        display: none;
    }
    .header-contact-item {
        width: 28px;
        height: 28px;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .18);
    }
    .header-contact-item svg { color: var(--bone); }
}

.header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 14px var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 160px;
}

@media (max-width: 760px) {
    .header-inner {
        min-height: 96px;
    }
}

.brand {
    display: flex;
    align-items: center;
}

.brand-logo {
    height: 108px;
    width: auto;
    max-width: 560px;
    object-fit: contain;
    transition: transform .35s var(--ease);
}

@media (max-width: 760px) {
    .brand-logo {
        height: 78px;
        max-width: 340px;
    }
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 38px;
}

.site-nav a {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--text);
    position: relative;
    padding: 6px 0;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--rose);
    transition: width .35s var(--ease), left .35s var(--ease);
}

.site-nav a:hover::after {
    width: 100%;
    left: 0;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--text);
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Hero — full-bleed background image with editorial text overlay
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: clamp(560px, 78vh, 820px);
    padding: clamp(110px, 16vw, 180px) var(--pad-x) clamp(110px, 14vw, 180px);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--bone);
}

/* The actual photographic background — pulled from one of Gitta's
   own images so the hero is on-brand from the first frame. */
/* The drifting collage. Four columns side by side, each one a tall
   stack of un-zoomed images that animate vertically. Because the
   images render at their natural width-to-height ratio (no scale,
   no background-size: cover), they stay sharp — the previous fixed
   background-size: cover hero zoomed crops which is what made it
   look blurry. */
.hero-collage {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    overflow: hidden;
    padding: 0;
    background: #1a1818;
}

.hero-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    will-change: transform;
}

.hero-col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* No transform/scale on the images themselves — keeps them sharp. */
}

/* Each column drifts at a slightly different speed and alternating
   direction so the wall feels alive without ever syncing up.
   Animation goes from 0 to -50% (or back) so the duplicated half
   of the column lines up exactly where the first half started,
   making the loop seamless. */
.hero-col-1 { animation: drift-up   72s linear infinite; }
.hero-col-2 { animation: drift-down 96s linear infinite; }
.hero-col-3 { animation: drift-up   84s linear infinite; }
.hero-col-4 { animation: drift-down 108s linear infinite; }

@keyframes drift-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes drift-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

/* Two-stop dark veil over the collage so the editorial type is
   always legible. The middle band is darker because the brightest
   elements of most wedding photos sit in the visual centre. */
.hero-veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(20, 18, 18, 0.55) 0%,
            rgba(20, 18, 18, 0.62) 45%,
            rgba(20, 18, 18, 0.72) 100%);
}

/* Drop to 3 columns on tablet, 2 on mobile so the collage doesn't
   become 4 ribbon-thin slivers. */
@media (max-width: 980px) {
    .hero-collage { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .hero-col-4   { display: none; }
}

@media (max-width: 640px) {
    .hero-collage { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .hero-col-3   { display: none; }
    .hero-col-4   { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-col { animation: none !important; }
}

.hero-content {
    max-width: 940px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero .eyebrow {
    color: var(--blush);
}

.hero-title {
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--bone);
    margin: 0 0 30px 0;
    letter-spacing: -.005em;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

.hero-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--blush);
    display: block;
    margin-top: 6px;
}

.hero-sub {
    font-size: 1.1rem;
    color: rgba(253, 252, 250, 0.88);
    max-width: 660px;
    margin: 0 auto 50px;
    font-weight: 300;
    text-shadow: 0 1px 14px rgba(0,0,0,.35);
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-light {
    background: var(--bone);
    color: var(--text);
    border-color: var(--bone);
}

.btn-light:hover {
    background: transparent;
    color: var(--bone);
    border-color: var(--bone);
}

.btn-ghost {
    border-color: rgba(253, 252, 250, 0.7);
    color: var(--bone);
}

.btn-ghost:hover {
    background: var(--bone);
    color: var(--text);
    border-color: var(--bone);
}

.hero-divider {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: 1px;
    height: 64px;
    background: linear-gradient(to bottom, transparent, rgba(253, 252, 250, 0.6));
    z-index: 2;
}

@media (max-width: 760px) {
    .hero {
        min-height: 78vh;
    }
}

/* -------------------------------------------------------------------------
   Section heads
   ------------------------------------------------------------------------- */
.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(48px, 6vw, 80px);
}

.section-head h2 {
    margin: 0 0 .35em 0;
}

.section-sub {
    color: var(--text-mute);
    font-size: .95rem;
    letter-spacing: .01em;
}

/* Understated keyword row — mentions smaller specialties without bloating
   the main tagline. Used right under .section-sub in the Services section. */
.section-tags {
    margin-top: 14px;
    color: var(--text-mute);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1.8;
}

/* -------------------------------------------------------------------------
   Services — three-card row
   ------------------------------------------------------------------------- */
.services {
    padding: var(--section-pad-y) var(--pad-x);
    background: var(--bone);
}

.services-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 44px);
}

.services-grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px) { .services-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .services-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .services-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .services-grid-5 { grid-template-columns: 1fr; } }

/* Signature draping section — a minimal list, not a paragraph dump. */
.draping {
    padding: var(--section-pad-y) var(--pad-x);
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.draping-body {
    max-width: 820px;
    margin: 0 auto;
}
.draping-lede {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 400;
    font-style: italic;
    margin: 0 0 clamp(36px, 5vw, 64px);
    color: var(--text);
}
.draping-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 640px) { .draping-list { grid-template-columns: 1fr; } }
.draping-list li {
    padding: 22px 0;
    border-top: 1px solid var(--line);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--text-mute);
}
.draping-list li strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text);
    letter-spacing: .01em;
}

/* -------------------------------------------------------------------------
   Specialty Detail Grid
   Each service category gets the same anatomy as the original draping
   block: a glyph at the top, an editorial italic lede, and a two-column
   list where each item is "Label" + short description.
   ------------------------------------------------------------------------- */
.specialty-detail-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 3.6vw, 44px);
}

@media (max-width: 880px) {
    .specialty-detail-grid { grid-template-columns: 1fr; }
}

.specialty-detail {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(36px, 4.4vw, 56px) clamp(28px, 3.6vw, 44px);
    transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}

.specialty-detail:hover {
    border-color: var(--rose);
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -34px rgba(43, 43, 43, 0.18);
}

.specialty-detail .service-glyph {
    width: 56px;
    height: 56px;
    margin: 0 0 22px;
}

.specialty-detail h3 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 500;
    margin: 0 0 10px;
    color: var(--text);
    letter-spacing: -.005em;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.specialty-tag {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--rose);
    border: 1px solid var(--rose);
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
}

.specialty-lede {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--text);
    margin: 0 0 24px;
}

.specialty-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.specialty-list li {
    padding: 18px 0;
    border-top: 1px solid var(--line);
    font-size: .94rem;
    line-height: 1.6;
    color: var(--text-mute);
}

.specialty-list li:last-child { padding-bottom: 0; }

.specialty-list li strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--text);
    letter-spacing: .01em;
}

.service-card {
    background: var(--paper);
    padding: clamp(36px, 5vw, 60px) clamp(28px, 4vw, 44px);
    text-align: center;
    border: 1px solid var(--line);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}

.service-card:hover {
    transform: translateY(-4px);
    background: var(--bone);
    box-shadow: 0 30px 60px -30px rgba(43, 43, 43, 0.18);
}

.service-glyph {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    color: var(--rose);
}

.service-glyph svg {
    width: 100%;
    height: 100%;
}

.service-card h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0 0 14px 0;
    color: var(--text);
}

.service-card p {
    font-size: .95rem;
    color: var(--text-soft);
    line-height: 1.75;
    margin: 0;
}

.specialties-also {
    max-width: 760px;
    margin: clamp(40px, 5vw, 56px) auto 0;
    text-align: center;
    font-size: .95rem;
    color: var(--text-soft);
    line-height: 1.8;
    font-style: italic;
}

/* -------------------------------------------------------------------------
   Featured Collections — named cover cards
   ------------------------------------------------------------------------- */
.collections {
    padding: var(--section-pad-y) var(--pad-x);
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.collections-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 36px);
}

@media (max-width: 980px) { .collections-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .collections-grid { grid-template-columns: 1fr; } }

.collection-card {
    display: block;
    background: var(--bone);
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: transform .5s var(--ease);
    font: inherit;
    color: inherit;
    text-decoration: none;
}

.collection-card:hover {
    transform: translateY(-4px);
}

.collection-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--mist);
}

/* Each preview image is absolutely positioned on top of the others.
   The currently-active one fades in (.is-active); the rest sit at
   opacity 0. main.js cycles which one has .is-active on a slow timer,
   producing a crossfade slideshow inside each card. */
.collection-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 1.4s var(--ease), transform 1.6s var(--ease), filter .6s var(--ease);
}

.collection-preview.is-active {
    opacity: 1;
}

.collection-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(20,18,18,.45) 100%);
    opacity: 0;
    transition: opacity .5s var(--ease);
    z-index: 2;
}

.collection-card:hover .collection-preview.is-active {
    transform: scale(1.06);
    filter: brightness(.96);
}

.collection-card:hover .collection-cover::after {
    opacity: 1;
}

.collection-meta {
    padding: 22px 4px 6px;
    text-align: center;
}

.collection-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 6px 0;
    line-height: 1.2;
}

.collection-count {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin: 0;
}

/* -------------------------------------------------------------------------
   Work / gallery
   ------------------------------------------------------------------------- */
.work {
    padding: var(--section-pad-y) var(--pad-x);
    background: var(--bone);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 6px;
    max-width: var(--max-w);
    margin: 0 auto clamp(40px, 5vw, 64px);
}

.filter-chip {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 12px 22px;
    border-radius: 999px;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.filter-chip:hover {
    color: var(--text);
    border-color: var(--text-mute);
}

.filter-chip.is-active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bone);
}

.gallery {
    max-width: var(--max-w);
    margin: 0 auto;
    column-count: 4;
    column-gap: 14px;
}

@media (max-width: 1100px) { .gallery { column-count: 3; } }
@media (max-width: 760px)  { .gallery { column-count: 2; } }
@media (max-width: 480px)  { .gallery { column-count: 1; } }

.tile {
    position: relative;
    margin: 0 0 14px;
    overflow: hidden;
    background: var(--mist);
    break-inside: avoid;
    cursor: zoom-in;
    border-radius: 2px;
}

.tile img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .9s var(--ease), filter .6s var(--ease);
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(43,43,43,.55) 100%);
    opacity: 0;
    transition: opacity .4s var(--ease);
    pointer-events: none;
}

.tile-label {
    position: absolute;
    left: 18px;
    bottom: 18px;
    right: 18px;
    color: var(--bone);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
    z-index: 2;
}

.tile:hover img {
    transform: scale(1.05);
    filter: brightness(.95);
}

.tile:hover::after {
    opacity: 1;
}

.tile:hover .tile-label {
    opacity: 1;
    transform: translateY(0);
}

/* fade-in for newly inserted tiles */
.tile {
    opacity: 0;
    animation: tileIn .5s var(--ease) forwards;
}

@keyframes tileIn {
    to { opacity: 1; }
}

.gallery-empty {
    text-align: center;
    color: var(--text-mute);
    font-style: italic;
    padding: 40px 0;
}

/* -------------------------------------------------------------------------
   About — soft blush field with a centered editorial column
   ------------------------------------------------------------------------- */
.about {
    padding: var(--section-pad-y) var(--pad-x);
    background:
        radial-gradient(ellipse at top, var(--blush-soft) 0%, transparent 60%),
        var(--bone);
    text-align: center;
}

.about-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.about-inner h2 {
    margin-bottom: 28px;
}

.about-inner p {
    font-size: 1.05rem;
    color: var(--text-soft);
    line-height: 1.85;
}

.about-inner .btn {
    margin-top: 24px;
}

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */
.contact {
    padding: var(--section-pad-y) var(--pad-x);
    background: var(--bone);
    border-top: 1px solid var(--line);
}

.contact-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: stretch;
}

@media (max-width: 980px) {
    .contact-inner {
        grid-template-columns: 1fr;
    }
}

.contact-copy h2 {
    margin-bottom: 24px;
}

.contact-copy > p {
    color: var(--text-soft);
    max-width: 440px;
}

.contact-meta {
    list-style: none;
    margin: 36px 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-meta li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-meta-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.contact-meta a,
.contact-meta span:not(.contact-meta-label):not(.contact-meta-lines):not(.contact-meta-fax),
.contact-meta address {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text);
    font-style: normal;
    line-height: 1.5;
}

.contact-meta a:hover {
    color: var(--rose);
}

.contact-meta-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-meta-lines a {
    display: inline-block;
    width: max-content;
}

.contact-meta-fax {
    font-family: var(--font-body);
    font-size: .82rem;
    letter-spacing: .08em;
    color: var(--text-mute);
    margin-top: 4px;
}

/* ---- Social row in contact section ---- */
.social-row-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin: 8px 0 12px;
}

.social-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 11px 18px 11px 14px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text);
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.social-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.social-link:hover {
    background: var(--text);
    color: var(--bone);
    border-color: var(--text);
    transform: translateY(-2px);
}

/* ---- Button arrow shared with mailto CTA ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.btn-arrow {
    display: inline-block;
    transition: transform .35s var(--ease);
}

.btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* ---- Mailto CTA card (replaces the old form column) ---- */
.contact-cta {
    display: flex;
    align-items: stretch;
}

.contact-cta-card {
    position: relative;
    flex: 1;
    padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
    background: var(--bone);
    border: 1px solid var(--line);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    font-weight: 500;
    color: var(--text);
    margin: 0;
    letter-spacing: -.005em;
}

.contact-cta-lede {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-soft);
    margin: 0;
    max-width: 44ch;
}

.contact-cta-btn {
    align-self: flex-start;
    margin-top: 6px;
    padding: 16px 32px;
    background: var(--text);
    color: var(--bone);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--text);
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

.contact-cta-btn:hover {
    background: var(--rose);
    border-color: var(--rose);
    color: var(--bone);
}

.contact-cta-foot {
    margin: auto 0 0;
    padding-top: 12px;
    font-size: .82rem;
    color: var(--text-mute);
    letter-spacing: .04em;
}

.contact-cta-foot a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: border-color .25s var(--ease), color .25s var(--ease);
}

.contact-cta-foot a:hover {
    color: var(--rose);
    border-bottom-color: var(--rose);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: clamp(56px, 8vw, 96px) var(--pad-x);
    text-align: center;
}

.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
}

.footer-logo {
    height: 160px;
    width: auto;
    max-width: 680px;
    margin: 0 auto 18px;
    object-fit: contain;
}

@media (max-width: 760px) {
    .footer-logo {
        height: 110px;
        max-width: 460px;
    }
}

.footer-address {
    font-size: .82rem;
    color: var(--text-soft);
    margin: 4px 0 14px;
    letter-spacing: .04em;
    line-height: 1.7;
    text-align: center;
}

.footer-copy {
    font-size: .8rem;
    color: var(--text-mute);
    margin: 0;
    letter-spacing: .04em;
}

/* Subtle developer credit — small, muted, low visual weight.
   Sits below the copyright in every footer. */
.dev-credit {
    margin: 14px 0 0;
    font-size: .68rem;
    color: var(--text-mute);
    opacity: .55;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 400;
    transition: opacity .25s var(--ease);
}

.dev-credit:hover { opacity: .85; }

.dev-credit a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.dev-credit a:hover { color: var(--rose); }

/* Slim footer variant — used on sub-pages (gallery.html) where the
   full multi-row footer would feel heavy. Just a thin line of credit. */
.site-footer--slim {
    padding: 28px var(--pad-x) 32px;
    text-align: center;
}

.site-footer--slim .footer-inner { padding: 0; }
.site-footer--slim .dev-credit { margin: 0; }

/* -------------------------------------------------------------------------
   Dedicated gallery pages (gallery/<slug>.html)
   ------------------------------------------------------------------------- */
.page-hero {
    padding: clamp(120px, 14vw, 180px) var(--pad-x) clamp(56px, 7vw, 88px);
    text-align: center;
    background:
        radial-gradient(ellipse at top, var(--blush-soft) 0%, transparent 60%),
        var(--bone);
}

.page-hero-inner {
    max-width: 880px;
    margin: 0 auto;
}

.page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    font-weight: 300;
    line-height: 1.05;
    margin: 0 0 24px;
    color: var(--text);
    letter-spacing: -.005em;
}

.page-hero-lede {
    color: var(--text-soft);
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 640px;
    margin: 0 auto 32px;
}

.page-hero-back {
    margin: 0;
}

.page-hero-back a {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--text-mute);
    transition: color .3s var(--ease);
}

.page-hero-back a:hover {
    color: var(--rose);
}

.page-gallery {
    padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(72px, 10vw, 120px);
    background: var(--bone);
}

/* Per-category grid: CSS grid + per-tile row-span (set by JS) gives a true
   packed masonry — each image keeps its natural aspect ratio, columns fill
   without forcing uniform crops, and there are no white balance gaps. */
.page-gallery-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    column-count: unset;
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 8px;
    gap: 14px;
}
.page-gallery-grid .tile {
    margin: 0;
    /* grid-row span set inline by gallery-page.js once each image loads. */
}
.page-gallery-grid .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 1100px) { .page-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .page-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .page-gallery-grid { grid-template-columns: 1fr; } }

.other-collections {
    padding: var(--section-pad-y) var(--pad-x);
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.other-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}

@media (max-width: 980px) { .other-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .other-grid { grid-template-columns: 1fr; } }

.other-card {
    display: block;
    background: var(--bone);
    color: inherit;
    text-decoration: none;
    transition: transform .5s var(--ease);
}

.other-card:hover {
    transform: translateY(-4px);
}

.other-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--mist);
}

.other-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.other-card:hover .other-cover img {
    transform: scale(1.06);
}

.other-meta {
    padding: 18px 4px 6px;
    text-align: center;
}

.other-meta h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0 0 4px;
    color: var(--text);
}

.other-meta p {
    margin: 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.page-cta {
    padding: var(--section-pad-y) var(--pad-x);
    background: var(--bone);
    text-align: center;
}

.page-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}

.page-cta h2 {
    margin-bottom: 18px;
}

.page-cta p {
    color: var(--text-soft);
    margin-bottom: 32px;
}

/* -------------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 18, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: clamp(20px, 6vw, 80px);
}

.lightbox.is-open {
    display: flex;
    animation: fadeIn .3s var(--ease);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    display: block;
    box-shadow: 0 40px 100px rgba(0,0,0,.5);
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    transition: color .2s var(--ease), transform .2s var(--ease);
}

.lightbox-close {
    top: 24px;
    right: 28px;
    font-size: 38px;
    line-height: 1;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
}

.lightbox-prev { left: 28px; }
.lightbox-next { right: 28px; }

.lightbox-close:hover,
.lightbox-nav:hover {
    color: #fff;
    border-color: rgba(255,255,255,.45);
}

.lightbox-caption {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,.7);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    margin: 0;
}

@media (max-width: 600px) {
    .lightbox-nav { width: 44px; height: 44px; font-size: 22px; }
    .lightbox-prev { left: 12px; }
    .lightbox-next { right: 12px; }
}

/* -------------------------------------------------------------------------
   Responsive nav
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .nav-toggle {
        display: flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--bone);
        border-bottom: 1px solid var(--line);
        padding: 12px 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s var(--ease);
    }

    .site-nav.is-open {
        max-height: 280px;
    }

    .site-nav a {
        padding: 14px var(--pad-x);
        text-align: center;
    }

    .site-nav a::after {
        display: none;
    }

    .header-inner {
        position: relative;
    }

    .brand-logo {
        height: 60px;
        max-width: 280px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* -------------------------------------------------------------------------
   Event Partner
   Single horizontal card showcasing an active industry partnership
   (e.g. a trade show). Logo on the left, name + note on the right,
   subtle "visit" cue on hover.
   ------------------------------------------------------------------------- */
.partner {
    padding: clamp(56px, 7vw, 96px) var(--pad-x);
    background: var(--paper);
    border-top: 1px solid var(--line);
}

.partner-inner {
    max-width: var(--max-w);
    margin: 0 auto;
}

.partner-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(20px, 3vw, 32px) clamp(24px, 3.5vw, 44px);
    background: var(--bone);
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}

.partner-card:hover {
    border-color: var(--rose);
    transform: translateY(-2px);
    box-shadow: 0 24px 50px -28px rgba(20, 18, 18, 0.18);
}

.partner-eyebrow {
    position: absolute;
    top: -12px;
    left: clamp(20px, 3vw, 36px);
    background: var(--paper);
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--rose);
    border: 1px solid var(--line);
}

.partner-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    max-width: 200px;
}

.partner-logo {
    display: block;
    max-width: 100%;
    max-height: 88px;
    width: auto;
    object-fit: contain;
}

.partner-wordmark {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-style: italic;
    font-weight: 500;
    color: var(--text);
    letter-spacing: .02em;
    line-height: 1.2;
    text-align: center;
}

.partner-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.partner-name {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -.005em;
}

.partner-note {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--text-soft);
}

.partner-cue {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--rose);
    white-space: nowrap;
    transition: gap .3s var(--ease), color .3s var(--ease);
}

.partner-card:hover .partner-cue { color: var(--text); }

@media (max-width: 720px) {
    .partner-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 32px;
    }
    .partner-media { margin: 0 auto; }
    .partner-body { align-items: center; }
}

/* -------------------------------------------------------------------------
   Press / Recognition
   Sits between About and Collections. Restrained, typography-led: hairline
   borders, large serif figures, no loud badges — every claim here links to
   a real, externally-sourced page.
   ------------------------------------------------------------------------- */
.press {
    padding: var(--section-pad-y) var(--pad-x);
    background: var(--bone);
    border-top: 1px solid var(--line);
}

.press-stats {
    max-width: var(--max-w);
    margin: 0 auto clamp(48px, 6vw, 72px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

@media (max-width: 880px) { .press-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .press-stats { grid-template-columns: 1fr; } }

.press-stat {
    text-align: center;
    padding: clamp(28px, 4vw, 44px) 20px;
    border-right: 1px solid var(--line);
}

.press-stat:last-child { border-right: 0; }

@media (max-width: 880px) {
    .press-stat:nth-child(2n) { border-right: 0; }
    .press-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 480px) {
    .press-stat { border-right: 0; border-bottom: 1px solid var(--line); }
    .press-stat:last-child { border-bottom: 0; }
}

.press-stat-figure {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .06em;
    font-family: var(--font-body);
    font-size: clamp(2.4rem, 4.2vw, 3.2rem);
    font-weight: 300;
    color: var(--text);
    line-height: 1;
    letter-spacing: -.015em;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.press-stat-figure em {
    font-style: normal;
    color: var(--rose);
    font-size: .72em;
    font-weight: 400;
    line-height: 1;
}

.press-stat-figure--word {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 2.7rem);
    letter-spacing: .005em;
    color: var(--rose);
}

.press-stat-label {
    display: block;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.press-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
}

@media (max-width: 980px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .press-grid { grid-template-columns: 1fr; } }

.press-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(28px, 3.6vw, 40px) clamp(24px, 3vw, 36px);
    color: var(--text);
    text-decoration: none;
    transition:
        transform .5s var(--ease),
        background .5s var(--ease),
        border-color .5s var(--ease),
        box-shadow .5s var(--ease);
    min-height: 220px;
}

.press-card:hover {
    transform: translateY(-3px);
    background: var(--bone);
    border-color: var(--rose);
    color: var(--text);
    box-shadow: 0 30px 60px -34px rgba(43, 43, 43, 0.22);
}

.press-card-logo {
    display: block;
    max-height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 4px;
    opacity: .82;
    transition: opacity .35s var(--ease);
}

.press-card:hover .press-card-logo { opacity: 1; }

.press-card-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--rose);
}

.press-card-name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--text);
}

.press-card-note {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--text-soft);
    flex-grow: 1;
}

.press-card-cue {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-mute);
    transition: color .35s var(--ease), transform .35s var(--ease);
}

.press-card:hover .press-card-cue {
    color: var(--rose);
    transform: translateX(3px);
}

.awards-head {
    max-width: var(--max-w);
    margin: clamp(56px, 7vw, 80px) auto clamp(24px, 3vw, 36px);
    text-align: center;
}

.awards-heading {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 500;
    color: var(--text);
    margin-top: 6px;
}

.awards-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.6vw, 32px);
}

@media (max-width: 880px) { .awards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .awards-grid { grid-template-columns: 1fr; } }

.award-card {
    margin: 0;
    padding: clamp(28px, 3.4vw, 40px) clamp(24px, 2.8vw, 32px);
    background: var(--paper);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    transition: border-color .4s var(--ease), transform .4s var(--ease);
}

.award-card:hover {
    border-color: var(--rose);
    transform: translateY(-2px);
}

.award-logo {
    display: block;
    max-height: 110px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.award-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.award-name {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    font-weight: 500;
    color: var(--text);
    line-height: 1.25;
}

.award-year {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.press-venues {
    max-width: 980px;
    margin: clamp(56px, 7vw, 80px) auto 0;
    text-align: center;
    padding-top: clamp(32px, 4vw, 44px);
    border-top: 1px solid var(--line);
}

.press-venues-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--rose);
    margin: 0 0 14px 0;
}

.press-venues-list {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.7;
    color: var(--text-soft);
    margin: 0;
}