/* =========================================================
   INKWELL COLLECTIVE TATTOO – MAIN STYLES
   (component styles; the reusable classes live in utilities.css)
   ========================================================= */


/* ===== Reset ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== Brand colours & fonts ===== */
:root {
    --color-bg: #0b0b0b;
    --color-text: #f2f2f2;
    --color-accent: #c9a227;

    --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
    --font-body: "Inter", Arial, Helvetica, sans-serif;

    --header-height: 72px;
}

/* ===== Base ===== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

ul {
    list-style: none;
}

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


/* =========================================================
   HEADER
   ========================================================= */
.site-header {
    position: fixed;          /* stays at the top while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;            /* sits above everything else */
    height: var(--header-height);
    background-color: transparent;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Added by JavaScript once you scroll down */
.site-header.scrolled {
    background-color: rgba(11, 11, 11, 0.95);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Nav links + CTA */
.main-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    padding: 0.25rem 0;
}

/* Gold underline that grows on hover */
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-accent);
    transition: width 0.25s;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Hamburger button – hidden on desktop */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--color-text);
    transition: transform 0.3s, opacity 0.3s;
}

/* Turns the 3 lines into an X when the menu is open */
.menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ===== Mobile header (below 1024px – the 4 links + button need desktop width) ===== */
@media (max-width: 1023px) {
    .menu-toggle {
        display: flex;
    }

    /* Full-screen menu that slides down */
    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        flex-direction: column;
        justify-content: center;
        gap: 2.5rem;
        background-color: var(--color-bg);
        transform: translateY(-110%);
        visibility: hidden;           /* hidden links can't be tabbed to */
        transition: transform 0.35s ease, visibility 0.35s;
    }

    .main-nav.open {
        transform: translateY(0);
        visibility: visible;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 1.75rem;
    }

    .nav-links a {
        font-family: var(--font-display);
        font-size: 2.5rem;
        letter-spacing: 0.05em;
    }

    .header-cta {
        font-size: 1rem;
        padding: 0.9em 2em;
    }

    /* Keep header solid while the menu is open */
    .site-header.menu-open {
        background-color: var(--color-bg);
    }

    body.no-scroll {
        overflow: hidden;
    }
}


/* =========================================================
   HERO – full-screen kinetic typography loop (js/hero-kinetic.js)
   ---------------------------------------------------------
   Each .kt-scene fills the whole screen. It plays its entrance
   when it gets .is-active and its exit when it gets .is-leaving.
   Words marked data-fit are sized by JS to fill the width.
   ========================================================= */
.kt {
    --kt-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --kt-snap: cubic-bezier(0.77, 0, 0.18, 1);
    --kt-h: 100svh;                      /* set to the real height by JS */
    --kt-bone: #ecebe7;
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: var(--color-bg);
    isolation: isolate;
}

/* ----- Background: faint B&W video, vignette and film grain ----- */
.kt-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.kt-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
}

.kt-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.1);
    opacity: 0;
    transition: opacity 1.5s ease;
}

.kt.has-video .kt-video { opacity: 0.18; }

.kt-grain {
    position: absolute;
    inset: -50%;
    will-change: transform;
    z-index: 10;
    opacity: 0.08;
    background-image: var(--kt-grain);   /* drawn by js/hero-kinetic.js */
    animation: ktGrain 0.9s steps(6) infinite;
    pointer-events: none;
}

@keyframes ktGrain {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-6%, 4%); }
    40%  { transform: translate(5%, -7%); }
    60%  { transform: translate(-8%, -3%); }
    80%  { transform: translate(7%, 6%); }
    100% { transform: translate(0, 0); }
}

/* ----- Stage & scenes (full screen) ----- */
.kt-stage {
    position: absolute;
    inset: 0;
    transform: translate3d(var(--kt-mx, 0), var(--kt-my, 0), 0) scale(1.02);
    transition: transform 0.6s ease-out;
}

.kt-scene {
    position: absolute;
    inset: 0;
    padding: var(--header-height) 0 4.5rem;   /* type stays clear of the header & bottom bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

.kt-scene.is-active,
.kt-scene.is-leaving {
    opacity: 1;
    visibility: visible;
}

/* Arriving shot: fades in while the "camera" slowly pushes in */
.kt-scene.is-active {
    z-index: 2;
    will-change: transform, opacity;
    animation:
        ktFadeIn 0.55s ease-out both,
        ktPush var(--dur, 3s) cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

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

@keyframes ktPush {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* Leaving shot: keeps its finished state (nothing jumps back),
   eases away and fades under the next one */
.kt-scene.is-active.is-leaving {
    z-index: 1;
    animation: ktOut 0.65s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes ktOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
}

/* Idle shots snap back to their start, ready to replay */
.kt-scene:not(.is-active):not(.is-leaving),
.kt-scene:not(.is-active):not(.is-leaving) * {
    transition: none !important;
    animation: none !important;
}

/* ----- Screen-filling words ----- */
.kt-fit {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: min(17vw, 30svh);         /* fallback – JS sets the exact size */
    line-height: 0.84;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text);
}

.kt-fit .ch {
    display: inline-block;
}

.kt-stroke {
    color: transparent;
    -webkit-text-stroke: 2px var(--color-text);
}

.kt-gold {
    color: var(--color-accent);
}

/* Default letter entrance: rise from below */
.kt-scene [data-split] .ch {
    transform: translateY(105%);
    transition: transform 0.75s var(--kt-ease);
    transition-delay: calc(var(--d, 0s) + var(--i) * 40ms);
}

.kt-scene [data-split] {
    overflow: hidden;
    padding-top: 0.06em;
}

.is-active [data-split] .ch {
    transform: none;
}

/* ----- Small text ----- */
.kt-kicker,
.kt-sub,
.kt-mini,
.kt-type {
    position: relative;
    z-index: 3;
    font-size: clamp(0.72rem, 1.1vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-accent);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.6s var(--kt-ease);
    transition-delay: var(--d, 0.25s);
}

.is-active .kt-kicker,
.is-active .kt-sub,
.is-active .kt-mini,
.is-active .kt-type {
    opacity: 1;
    transform: none;
}

.kt-kicker { margin-bottom: 1.2rem; }

/* =========================================================
   01 · INKWELL – ink drop spreads into rows of moving type
   ========================================================= */
.kt-rows {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
}

/* Each row glides in from alternate sides after the drop lands
   (transform + opacity only, so it stays smooth) */
.kt-rows > div {
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(var(--from, -6%), 0, 0);
    transition: opacity 0.9s ease, transform 1.2s var(--kt-ease);
    transition-delay: calc(0.5s + var(--r, 0) * 80ms);
}

.kt-rows > div:nth-child(1) { --r: 2; --from: -6%; }
.kt-rows > div:nth-child(2) { --r: 1; --from: 6%; }
.kt-rows > div:nth-child(3) { --r: 0; --from: -4%; }
.kt-rows > div:nth-child(4) { --r: 1; --from: 6%; }
.kt-rows > div:nth-child(5) { --r: 2; --from: -6%; }

.is-active .kt-rows > div {
    opacity: 1;
    transform: none;
}

.from-loop .kt-rows > div {
    transition-delay: calc(0.25s + var(--r, 0) * 80ms);
}

.kt-track {
    flex-shrink: 0;
    will-change: transform;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: calc(var(--kt-h) / 5 * 1.08);
    line-height: 1;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
}

.kt-track b {
    font-weight: 400;
    font-size: 0.3em;
    vertical-align: middle;
    color: var(--color-accent);
    -webkit-text-stroke: 0;
    padding: 0 0.3em;
}

.kt-row-main .kt-track {
    color: var(--color-text);
    -webkit-text-stroke: 0;
}

/* Rows drift slowly in opposite directions (the track holds 6 copies,
   moving by 2 copies = -33.333% keeps the loop seamless) */
.is-active .kt-rows > div:nth-child(odd) .kt-track  { animation: ktRowL 12s linear infinite; }
.is-active .kt-rows > div:nth-child(even) .kt-track { animation: ktRowR 12s linear infinite; }
.is-active .kt-rows .kt-row-main .kt-track          { animation-duration: 17s; }

@keyframes ktRowL {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-33.3333%, 0, 0); }
}

@keyframes ktRowR {
    from { transform: translate3d(-33.3333%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.kt-drop {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 32px;
    margin: -16px 0 0 -11px;
    background: var(--color-accent);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    opacity: 0;
}

.is-active .kt-drop {
    animation: ktDrop 0.5s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

/* When the loop comes round, the drop is already there (from shot 05) – it just bursts */
.from-loop .kt-drop,
.from-loop .kt-ripple {
    left: var(--dx, 50%);
    top: var(--dy, 50%);
}

.from-loop .kt-drop {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
}

.from-loop.is-active .kt-drop {
    animation: ktBurst 0.55s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

@keyframes ktBurst {
    0%   { opacity: 1; transform: scale(1); }
    35%  { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(3.5); }
}

@keyframes ktDrop {
    0%   { opacity: 1; transform: translateY(-55vh) scaleY(1.5); }
    90%  { opacity: 1; transform: translateY(0) scaleY(1.2); }
    100% { opacity: 0; transform: translateY(0) scale(1.8, 0.3); }
}

.kt-ripple {
    position: absolute;
    z-index: 3;
    will-change: transform, opacity;
    left: 50%;
    top: 50%;
    width: 120vmax;
    height: 120vmax;
    margin: -60vmax 0 0 -60vmax;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
}

.is-active .kt-ripple {
    animation: ktRipple 1.4s cubic-bezier(0.2, 0.6, 0.3, 1) 0.45s forwards;
}

.from-loop.is-active .kt-ripple {
    animation-delay: 0.1s;
}

@keyframes ktRipple {
    0%   { opacity: 0.9; transform: scale(0); }
    100% { opacity: 0;   transform: scale(1); }
}

/* =========================================================
   02 · COLLECTIVE – light frame, letters slam in
   ========================================================= */
.kt-panel {
    position: absolute;
    inset: 0;
    background: var(--kt-bone);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.6s var(--kt-snap);
}

.is-active .kt-panel {
    transform: none;
}

.kt-s2 .kt-fit {
    position: relative;
    color: #0b0b0b;
    overflow: visible;
}

.kt-s2 .kt-slam .ch {
    opacity: 0;
    transform: translateY(18%) scale(1.35) skewX(-8deg);
    transition: transform 0.8s var(--kt-ease), opacity 0.35s ease;
    transition-delay: calc(0.3s + var(--i) * 40ms);
}

.is-active .kt-slam .ch {
    opacity: 1;
    transform: none;
}

.kt-s2 .kt-mini {
    color: #0b0b0b;
    margin: 1rem 0;
    --d: 0.6s;
}

/* =========================================================
   03 · PRIVATE / STUDIO – halves slide in from opposite sides
   ========================================================= */
.kt-s4 {
    justify-content: space-evenly;
}

.kt-half {
    position: relative;
    z-index: 2;
    transition: transform 0.7s var(--kt-snap);
}

.kt-half--top { transform: translateX(-110%); }
.kt-half--bot { transform: translateX(110%); transition-delay: 0.08s; }

.is-active .kt-half {
    transform: none;
}

/* keep drifting apart slowly once in place */
.is-active .kt-half--top .kt-fit { animation: ktDriftL var(--dur, 3s) linear both; }
.is-active .kt-half--bot .kt-fit { animation: ktDriftR var(--dur, 3s) linear both; }

@keyframes ktDriftL { to { transform: translateX(-4%); } }
@keyframes ktDriftR { to { transform: translateX(4%); } }

.kt-mid {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kt-mid-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.8s var(--kt-snap) 0.5s;
}

.is-active .kt-mid-line {
    transform: none;
}

.kt-type {
    padding: 0.5em 1.2em;
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 1.4em;
    --d: 0.7s;
}

.kt-type::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 2px;
    margin-left: 0.2em;
    background: var(--color-accent);
    animation: ktCaret 0.8s steps(2) infinite;
}

@keyframes ktCaret {
    50% { opacity: 0; }
}

.kt-one {
    position: absolute;
    will-change: transform, opacity;
    left: 50%;
    top: 50%;
    font-family: var(--font-display);
    font-size: calc(var(--kt-h) * 1.15);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(201, 162, 39, 0.3);
    transform: translate(-50%, -46%) scale(1.5);
    opacity: 0;
    transition: opacity 0.8s ease, transform 2.4s var(--kt-ease);
}

.is-active .kt-one {
    opacity: 1;
    transform: translate(-50%, -46%) scale(1);
}

/* =========================================================
   04 · CUSTOM TO YOUR … NEEDS – outline lands and gets shaded in,
   then the last word cycles (driven by JS)
   ========================================================= */
.kt-shade .ch {
    color: transparent;
    -webkit-text-stroke: 2px var(--color-text);
}

.is-active .kt-shade .ch {
    color: var(--color-text);
    transition:
        transform 0.75s var(--kt-ease) calc(var(--i) * 40ms),
        color 0.25s ease calc(0.9s + var(--i) * 90ms);
}

.kt-s6 .kt-kicker { color: #9a9a9a; margin-bottom: 0.8rem; }

.kt-to {
    margin: 0.5rem 0 0.2rem;
    font-family: var(--font-display);
    font-size: calc(var(--kt-avail, 70svh) * 0.07);
    line-height: 1;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #9a9a9a;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease 1.1s, transform 0.6s var(--kt-ease) 1.1s;
}

.is-active .kt-to {
    opacity: 1;
    transform: none;
}

.kt-cycle {
    position: relative;
    width: 100%;
    height: calc(var(--kt-avail, 70svh) * 0.3);
}

.kt-cycle .kt-fit {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    opacity: 0;
    transform: translateY(-50%) scale(1.25);
}

.kt-cycle .kt-fit.is-on {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition: transform 0.35s var(--kt-ease), opacity 0.08s linear;
}

.kt-cycle .kt-fit.is-off {
    opacity: 0;
    transform: translateY(-50%) scale(0.85);
    transition: transform 0.2s ease, opacity 0.15s ease;
}

/* =========================================================
   05 · LOCK-UP – at the end the text folds away and the gold
   rule shrinks into a drop of ink, which bursts into shot 01
   ========================================================= */
.kt-rule {
    display: block;
    width: 90%;
    height: 2px;
    margin: 0.8rem 0;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 1s var(--kt-snap) 0.5s;
}

.is-active .kt-rule {
    transform: none;
}

.kt-s8 [data-split]:last-of-type { --d: 0.2s; }

.kt-s8.is-ending .kt-fit,
.kt-s8.is-ending .kt-kicker,
.kt-s8.is-ending .kt-sub {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.45s ease, transform 0.6s ease;
    transition-delay: 0s;
}

.kt-s8.is-ending .kt-rule {
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    transition-delay: 0.1s;
}

.kt-dot {
    position: absolute;
    left: var(--dx, 50%);
    top: var(--dy, 50%);
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0;
    transform: scale(0);
}

.kt-s8.is-ending .kt-dot {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1) 0.55s, opacity 0.1s linear 0.55s;
}

.kt-sub {
    margin-top: 1.6rem;
    color: #bdbdbd;
    letter-spacing: 0.22em;
    --d: 1.1s;
}

/* ----- Bottom bar ----- */
.kt-hud {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    z-index: 12;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1.5rem;
    transition: color 0.3s;
}

.kt-now {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #9a9a9a;
}

#ktNum { color: var(--color-accent); }

.kt-now-sep {
    width: 24px;
    height: 1px;
    background: currentColor;
}

.kt-progress {
    display: flex;
    gap: 5px;
}

.kt-progress button {
    position: relative;
    width: clamp(20px, 3vw, 40px);
    height: 14px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.kt-progress button::before,
.kt-progress button i {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.kt-progress button i {
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
}

.kt-progress button.is-done i { transform: none; }

.kt-progress button.is-current i {
    animation: ktFill var(--dur, 3s) linear forwards;
}

.kt.is-paused .kt-progress button.is-current i {
    animation-play-state: paused;
}

@keyframes ktFill { to { transform: none; } }

.kt-progress button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.kt-hud .scroll-down {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text);
    opacity: 0.7;
}

/* On light shots: darker bar, dark backing behind the header */
.kt.is-light .kt-now,
.kt.is-light .kt-hud .scroll-down { color: #333; }
.kt.is-light .kt-progress button::before { background: rgba(0, 0, 0, 0.2); }
.kt.is-light .scroll-line { background: linear-gradient(to bottom, #333, transparent); }

html.kt-light .site-header:not(.scrolled) {
    background-color: rgba(11, 11, 11, 0.92);
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--color-text), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
    50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ----- Phones ----- */
@media (max-width: 767px) {
    .kt-hud { grid-template-columns: 1fr auto; }
    .kt-hud .scroll-down { display: none; }
    .kt-now { font-size: 0.6rem; letter-spacing: 0.16em; }
    .kt-progress { gap: 3px; }
    .kt-progress button { width: 16px; }
    .kt-stroke, .kt-shade .ch { -webkit-text-stroke-width: 1.5px; }
    .kt-type { letter-spacing: 0.18em; font-size: 0.62rem; }
}

/* ----- Without JavaScript: just show the final lock-up ----- */
.kt:not(.kt-ready) .kt-final {
    opacity: 1;
    visibility: visible;
}

.kt:not(.kt-ready) .kt-final .kt-kicker,
.kt:not(.kt-ready) .kt-final .kt-sub,
.kt:not(.kt-ready) .kt-final .ch,
.kt:not(.kt-ready) .kt-final .kt-rule {
    opacity: 1;
    transform: none;
}

/* ----- Reduced motion: still lock-up, no loop ----- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .kt-grain,
    .scroll-line { animation: none; }
    .kt-progress { display: none; }
    .kt * {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   STUDIO INFO (location, hours, contact)
   ========================================================= */
.studio-info {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: var(--header-height);   /* stops the fixed header covering it */
}

.info-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Small gold heading with a short line above it */
.info-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    padding-top: 1rem;
    border-top: 2px solid var(--color-accent);
    margin-bottom: 0.5rem;
}

.info-main {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}

.info-main a {
    color: var(--color-text);
    overflow-wrap: anywhere;      /* long emails wrap on small screens */
    transition: color 0.2s;
}

.info-main a:hover {
    color: var(--color-accent);
}

/* Small grey text, e.g. "(By appointment only)" */
.info-note {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9a9a9a;
}

/* Name label above each extra email */
.info-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9a9a9a;
}

.info-link {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.info-link:hover {
    text-decoration: underline;
}


/* =========================================================
   SHARED SECTION HEADINGS (reuse on any section)
   ========================================================= */
.section-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.9;
    text-transform: uppercase;
}


/* =========================================================
   ARTISTS (expanding panels)
   ========================================================= */
.artists {
    scroll-margin-top: var(--header-height);
}

.artists-head {
    align-items: flex-start;
}

@media (min-width: 768px) {
    .artists-head { align-items: flex-end; }
    .artists-intro { max-width: 38ch; }
}

/* ----- Rows of panels (max 3 artists per row) ----- */
.artist-panels {
    display: flex;
    flex-direction: column;
    gap: 1rem;                            /* space between rows */
}

.artist-row {
    display: flex;
    gap: 1rem;                            /* space between panels */
    height: clamp(560px, 80vh, 760px);
}

.artist-panel {
    position: relative;
    flex: 1;                              /* closed width */
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    background-color: #141414;
    cursor: pointer;
    outline: none;
    transition: flex 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.artist-panel.is-active {
    flex: 3;                              /* open panel is 3x wider */
    cursor: default;
}

.artist-panel:focus-visible {
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* ----- Background: placeholder + photo ----- */
.artist-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, #2a2a2a 0%, #141414 70%);
}

/* Giant faded initial – only visible until you add a photo */
.artist-bg::before {
    content: attr(data-initial);
    position: absolute;
    right: -0.05em;
    bottom: -0.2em;
    font-family: var(--font-display);
    font-size: clamp(16rem, 40vw, 34rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
}

.artist-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    filter: grayscale(100%) brightness(0.6);
    transform: scale(1.08);
    transition: filter 0.8s, transform 1.2s ease;
}

.artist-panel.is-active .artist-photo {
    filter: grayscale(0%) brightness(0.85);
    transform: scale(1);
}

/* Dark fade at the bottom so the text is readable */
.artist-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.1) 100%);
}

/* ----- Closed state: number + sideways name ----- */
.artist-collapsed {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem;
    transition: opacity 0.4s;
}

.artist-vertical-name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transition: color 0.3s;
}

.artist-panel:not(.is-active):hover .artist-vertical-name {
    color: var(--color-accent);
}

.artist-panel.is-active .artist-collapsed {
    opacity: 0;
    pointer-events: none;
}

.artist-num {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* ----- Open state: full details ----- */
.artist-details {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem;
    max-width: 620px;
    min-width: 420px;                     /* stops text squashing mid-animation */
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}

.artist-panel.is-active .artist-details {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.5s 0.35s, transform 0.5s 0.35s;   /* waits for panel to open */
}

.artist-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0.5rem 0 1rem;
}

.artist-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.artist-tags li {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}

.artist-bio {
    color: #cfcfcf;
    max-width: 46ch;
    margin-bottom: 1.25rem;
}

/* Mini portfolio thumbnails */
.artist-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 330px;
    margin-bottom: 1.5rem;
}

.work-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background-color: #222;
}

/* Placeholder label until you add images */
.work-thumb::before {
    content: "Work";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #555;
}

.work-thumb span {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s;
}

.work-thumb:hover span {
    transform: scale(1.1);
}

.artist-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.artist-ig {
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}

.artist-ig:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}


/* ----- Phones & tablets: panels stack and open downwards -----
   (side-by-side panels need desktop width, especially with 3+ artists) */
@media (max-width: 1023px) {
    .artist-row {
        flex-direction: column;
        height: auto;
    }

    .artist-panel {
        flex: none;
        height: 96px;                     /* closed height */
        transition: height 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .artist-panel.is-active {
        flex: none;
        height: 640px;                    /* open height */
    }

    /* Closed bar: number on the left, name on the right */
    .artist-collapsed {
        flex-direction: row;
        align-items: center;
        padding: 0 1.25rem;
    }

    .artist-vertical-name {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 2.5rem;
    }

    .artist-details {
        min-width: 0;
        padding: 1.5rem;
    }

    .artist-bg::before {
        font-size: 20rem;
    }

    /* Stronger fade: text covers more of the photo on phones */
    .artist-shade {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.15) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .artist-panel,
    .artist-photo,
    .artist-details {
        transition: none !important;
    }
}


/* =========================================================
   ARTISTS PAGE (artists.html)
   ========================================================= */

/* ----- Page intro ----- */
.page-intro {
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: 3rem;
}

.page-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(4rem, 14vw, 11rem);
    line-height: 0.85;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.page-lead {
    font-size: 1.05rem;
    margin-bottom: 3rem;
}

/* ----- Artist index (big list of names) ----- */
.artist-index {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.index-item {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text);
    transition: padding 0.3s, color 0.3s;
}

.index-num {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-accent);
}

.index-name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 1;
    text-transform: uppercase;
}

.index-styles {
    display: none;                         /* shown from tablet up */
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.index-arrow {
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.index-item:hover {
    color: var(--color-accent);
    padding-left: 1rem;
}

.index-item:hover .index-arrow {
    transform: translateY(4px);
}

@media (min-width: 768px) {
    .index-item {
        grid-template-columns: 4rem 1fr auto auto;
        gap: 2rem;
    }
    .index-styles { display: block; }
}

/* Floating photo preview */
.index-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 220px;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 30% 20%, #2e2e2e, #141414);
    transition: opacity 0.25s;
}

.index-preview.is-visible { opacity: 1; }

.index-preview::before {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.08);
}

.index-preview span {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}


/* ----- One artist profile ----- */
.profile {
    padding: 5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: var(--header-height);
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.profile-media {
    position: relative;
}

.profile-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 75vh;
    border-radius: 8px;
    overflow: hidden;
    background: radial-gradient(circle at 30% 20%, #2a2a2a 0%, #141414 70%);
}

/* Big faded letter until a photo is added */
.profile-photo::before {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: clamp(12rem, 30vw, 22rem);
    color: rgba(255, 255, 255, 0.05);
}

.profile-photo span {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}

/* Outlined number overlapping the photo */
.profile-bignum {
    position: absolute;
    right: 1rem;
    bottom: -0.35em;
    font-family: var(--font-display);
    font-size: clamp(6rem, 14vw, 11rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-accent);
    pointer-events: none;
}

.profile-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(4rem, 10vw, 8rem);
    line-height: 0.85;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.profile-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 40ch;
    margin: 1.25rem 0 2rem;
}

/* Quick facts */
.profile-stats {
    display: grid;
    grid-auto-flow: column;               /* one column per stat, however many there are */
    grid-auto-columns: 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 2.5rem;
}

.stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.25rem 1rem 1.25rem 0;
}

.stat + .stat {
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.stat-value {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1;
    color: var(--color-accent);
}

.stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #9a9a9a;
}

/* Sub-sections: background, portfolio */
.profile-block {
    margin-bottom: 2.5rem;
}

.block-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.block-title span {
    font-weight: 500;
    color: #9a9a9a;
    letter-spacing: 0.1em;
}

.profile-text p {
    color: #cfcfcf;
    max-width: 60ch;
    margin-bottom: 1rem;
}

/* Portfolio grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 600px) {
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

.portfolio-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    background-color: #1c1c1c;
    cursor: zoom-in;
    padding: 0;
}

.portfolio-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #555;
}

.portfolio-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

/* Gold border + zoom on hover */
.portfolio-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-accent);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s;
}

.portfolio-item:hover .portfolio-img { transform: scale(1.08); }
.portfolio-item:hover::after,
.portfolio-item:focus-visible::after { opacity: 1; }

/* Contact card */
.contact-card {
    padding: 2rem;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1), rgba(201, 162, 39, 0) 60%);
}

.contact-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.contact-text {
    color: #cfcfcf;
    max-width: 55ch;
    margin-bottom: 1.5rem;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

/* ----- Desktop: two columns, photo sticks while you scroll ----- */
@media (min-width: 1024px) {
    .profile {
        padding: 7rem 0;
    }

    .profile-grid {
        grid-template-columns: 5fr 7fr;
        gap: 5rem;
        align-items: start;
    }

    .profile-media {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
    }

    /* Every second artist: photo on the right.
       The columns are flipped too, so both profiles are the same size. */
    .profile.is-flipped .profile-grid { grid-template-columns: 7fr 5fr; }
    .profile.is-flipped .profile-media { order: 2; }
    .profile.is-flipped .profile-bignum { right: auto; left: 1rem; }
}

/* Closing CTA */
.closing-cta {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}



/* ----- Lightbox ----- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    background-color: rgba(5, 5, 5, 0.96);
}

.lightbox[hidden] { display: none; }

.lightbox-figure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
}

.lightbox-figure img {
    max-width: min(90vw, 1000px);
    max-height: 78vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-placeholder {
    display: none;
    width: min(80vw, 500px);
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #1c1c1c;
    color: #666;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.lightbox.is-missing img { display: none; }
.lightbox.is-missing .lightbox-placeholder { display: flex; }

.lightbox-caption {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.lightbox-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: var(--color-text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    z-index: 1;
}

.lightbox-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.lightbox-close { top: 1rem; right: 1rem; font-size: 1.75rem; }
.lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Phones: arrows sit at the bottom */
@media (max-width: 767px) {
    .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: 1rem;
        transform: none;
    }
    .lightbox-prev { left: calc(50% - 60px); }
    .lightbox-next { right: calc(50% - 60px); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}


/* =========================================================
   NAV BADGE ("Soon" next to Shop)
   Delete the <span class="nav-badge"> in the HTML once the shop is live.
   ========================================================= */
.nav-badge {
    display: inline-block;
    margin-left: 0.35em;
    padding: 0.15em 0.5em;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;
    vertical-align: middle;
    color: var(--color-bg);
    background-color: var(--color-accent);
    border-radius: 999px;
}

/* In the full-screen mobile menu the links are much bigger */
@media (max-width: 1023px) {
    .nav-links .nav-badge {
        font-size: 0.75rem;
        vertical-align: super;
    }
}


/* =========================================================
   THE STUDIO (home page)
   ========================================================= */
.studio {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: var(--header-height);
}

/* ----- Scrolling text strip ----- */
.marquee {
    overflow: hidden;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee-track {
    display: flex;
    gap: 2.5rem;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.marquee-track span {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}

.marquee-track span:nth-child(even) {
    color: var(--color-accent);          /* the ✦ symbols */
    -webkit-text-stroke: 0;
}

/* Moves exactly half its width (one copy of the text), then repeats */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 1.25rem)); }
}

/* ----- Story + collage ----- */
.studio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 5rem;
}

.studio-story .section-title {
    margin-bottom: 1.5rem;
}

.studio-lead {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.4;
    max-width: 26ch;
    margin-bottom: 1.5rem;
}

.studio-text {
    color: #cfcfcf;
    max-width: 52ch;
    margin-bottom: 1rem;
}

.studio-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 2px;
}

/* Collage: one tall photo + two stacked */
.studio-collage {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem;
    height: clamp(420px, 60vw, 620px);
}

.collage-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: radial-gradient(circle at 30% 20%, #262626, #141414);
}

.collage-main {
    grid-row: span 2;
}

/* Placeholder label until photos are added */
.collage-item::before {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #555;
}

.collage-item span {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(40%);
    transition: transform 0.8s ease, filter 0.8s ease;
}

.collage-item:hover span {
    transform: scale(1.06);
    filter: grayscale(0%);
}

/* Stagger the photos fading in */
.collage-item:nth-child(2) { transition-delay: 0.15s; }
.collage-item:nth-child(3) { transition-delay: 0.3s; }

@media (min-width: 1024px) {
    .studio-grid {
        grid-template-columns: 5fr 7fr;
        gap: 5rem;
        align-items: center;
    }
}

/* ----- What to expect ----- */
.values-heading {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
}

.value-card {
    position: relative;
    padding: 1.75rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Gold line that grows across the top on hover */
.value-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.5s ease;
}

.value-card:hover::before {
    width: 100%;
}

.value-num {
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-accent);
    margin-bottom: 1rem;
}

.value-title {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.value-text {
    color: #b5b5b5;
    font-size: 0.95rem;
}

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


/* =========================================================
   ENQUIRY FORM (home page)
   ========================================================= */
.enquiry {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: var(--header-height);
}

.enquiry-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .enquiry-grid {
        grid-template-columns: 5fr 7fr;
        gap: 5rem;
        align-items: start;
    }
}

/* ----- Left column ----- */
.enquiry-intro .section-title {
    margin-bottom: 1.5rem;
}

.enquiry-lead {
    color: #cfcfcf;
    max-width: 42ch;
    margin-bottom: 2rem;
}

.enquiry-steps {
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 2rem;
}

.enquiry-steps li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 500;
}

.enquiry-steps span {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-accent);
    min-width: 2.5rem;
}

.enquiry-alt {
    font-size: 0.9rem;
    color: #9a9a9a;
}

.enquiry-alt a:hover {
    text-decoration: underline;
}

/* ----- The form ----- */
.enquiry-form {
    padding: 2rem 1.5rem;
    background-color: #121212;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

@media (min-width: 768px) {
    .enquiry-form { padding: 2.5rem; }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.25rem;
}

@media (min-width: 600px) {
    .form-row { grid-template-columns: 1fr 1fr; }
}

.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.field label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b5b5b5;
    margin-bottom: 0.5rem;
}

.req {
    color: var(--color-accent);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;                       /* 16px stops iPhones zooming in */
    color: var(--color-text);
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    transition: border-color 0.2s, background-color 0.2s;
}

.field textarea {
    resize: vertical;
    min-height: 130px;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #666;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: #1f1f1f;
}

/* Custom dropdown arrow */
.field select {
    appearance: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
                      linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

/* Age checkbox */
.field-check label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #cfcfcf;
    cursor: pointer;
}

.field-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--color-accent);
}

/* Error messages (hidden until needed) */
.field-error {
    display: none;
    font-size: 0.8rem;
    color: #e06c5c;
    margin-top: 0.4rem;
}

.field.has-error .field-error { display: block; }

.field.has-error input:not([type="checkbox"]),
.field.has-error textarea {
    border-color: #e06c5c;
}

/* Submit button */
.enquiry-submit {
    width: 100%;
    margin-top: 0.5rem;
}

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

/* Success / error box */
.form-status {
    font-size: 0.9rem;
    margin-top: 1rem;
}

.form-status:empty { display: none; }

.form-status.is-success,
.form-status.is-error {
    padding: 0.85rem 1rem;
    border-radius: 4px;
}

.form-status.is-success {
    color: #a8e0a0;
    background-color: rgba(120, 200, 110, 0.1);
    border: 1px solid rgba(120, 200, 110, 0.35);
}

.form-status.is-error {
    color: #f0a598;
    background-color: rgba(224, 108, 92, 0.1);
    border: 1px solid rgba(224, 108, 92, 0.35);
}


/* =========================================================
   FORM – agreement tick boxes
   ========================================================= */
.form-checks {
    padding-top: 1.25rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.form-checks .field {
    margin-bottom: 0.9rem;
}

.field-check a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.field-check a:hover {
    color: var(--color-text);
}


/* =========================================================
   LEGAL PAGES (terms.html, privacy.html)
   ========================================================= */
.legal-intro {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-intro .page-title {
    font-size: clamp(3.5rem, 10vw, 8rem);
}

.legal-updated {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-bottom: 1rem;
}

.legal-intro .page-lead {
    margin-bottom: 0;
}

.legal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 3rem;
    padding-bottom: 5rem;
}

/* Contents list */
.legal-toc {
    padding: 1.5rem;
    background-color: #121212;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.legal-toc-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.legal-toc ol {
    list-style: none;
}

.legal-toc a {
    display: block;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: #b5b5b5;
    transition: color 0.2s, padding-left 0.2s;
}

.legal-toc a:hover,
.legal-toc a.is-current {
    color: var(--color-accent);
    padding-left: 0.35rem;
}

@media (min-width: 1024px) {
    .legal-layout {
        grid-template-columns: 280px 1fr;
        gap: 5rem;
        align-items: start;
    }

    .legal-toc {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
    }
}

/* Main text */
.legal-content {
    max-width: 72ch;
}

.legal-section {
    padding-bottom: 2.25rem;
    margin-bottom: 2.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.legal-section:last-child {
    border-bottom: none;
}

.legal-section h2 {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.legal-section h2 span {
    font-size: 0.6em;
    color: var(--color-accent);
}

.legal-section p,
.legal-section li {
    color: #cfcfcf;
    margin-bottom: 0.9rem;
}

.legal-section ul {
    list-style: none;
    margin-bottom: 1rem;
}

.legal-section li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.legal-section li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.legal-section a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* =========================================================
   SITE FOOTER (built by js/footer.js)
   ========================================================= */
.site-footer {
    background-color: #070707;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #b5b5b5;
    font-size: 0.95rem;
}

.site-footer a {
    color: inherit;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: var(--color-accent);
}

/* ----- Info + map ----- */
.footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.footer-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
}

.footer-brand {
    grid-column: 1 / -1;                  /* full width */
}

.footer-logo {
    display: inline-block;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text) !important;
    margin-bottom: 0.75rem;
}

.footer-brand p {
    max-width: 36ch;
    margin-bottom: 1rem;
}

.footer-ig {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 2px;
}

.footer-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.footer-col address {
    font-style: normal;
    line-height: 1.7;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.footer-link-accent {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent) !important;
}

.footer-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text);
}

.footer-hours li span:first-child {
    color: #9a9a9a;
}

.footer-note {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
    margin-top: 0.6rem;
}

.footer-contact li,
.footer-nav li {
    margin-bottom: 0.5rem;
}

.footer-contact a {
    color: var(--color-text);
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .footer-info {
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
    }
}

/* Map */
.footer-map {
    position: relative;
    min-height: 320px;
    border-radius: 8px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #1e1e1e, #111);   /* shows while loading */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* Turns Google's light map dark to match the site */
    filter: grayscale(1) invert(0.92) contrast(0.9) brightness(0.95);
    transition: filter 0.4s;
}

/* Full colour when you interact with it */
.footer-map:hover iframe {
    filter: grayscale(0.2) invert(0) contrast(1);
}

/* Floating label on the map */
.map-card {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    background-color: rgba(7, 7, 7, 0.92);
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
    backdrop-filter: blur(4px);
}

.map-card strong {
    display: block;
    color: var(--color-text);
    font-size: 0.9rem;
}

.map-card-arrow {
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--color-accent);
}

/* Pulsing gold dot */
.map-pin {
    position: relative;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.map-pin::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--color-accent);
    animation: pinPulse 2s ease-out infinite;
}

@keyframes pinPulse {
    from { transform: scale(1);   opacity: 0.7; }
    to   { transform: scale(3.2); opacity: 0; }
}

@media (min-width: 540px) {
    .map-card {
        right: auto;
        max-width: 360px;
    }
}

@media (min-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: stretch;
    }

    .footer-info {
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
    }

    .footer-map {
        min-height: 420px;
    }
}

/* ----- Bottom bar ----- */
.footer-bottom {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    color: #777;
}

.footer-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

@media (min-width: 768px) {
    .footer-bottom-inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

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


/* =========================================================
   GALLERY PAGE (gallery.html)
   ========================================================= */
.gallery-intro {
    padding-bottom: 2rem;
}

.gallery-intro-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gallery-intro .page-lead {
    margin-bottom: 0;
}

.gallery-count {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9a9a9a;
    white-space: nowrap;
}

.gallery-count span {
    color: var(--color-accent);
    font-size: 2.5rem;
    margin-right: 0.25rem;
}

@media (min-width: 768px) {
    .gallery-intro-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

/* ----- Filter bar (sticks under the header) ----- */
.gallery-filters {
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    background-color: rgba(11, 11, 11, 0.95);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filters-inner {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.filter-label {
    flex-shrink: 0;
    width: 3.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #777;
}

/* Chips scroll sideways on small screens */
.filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
}

.filter-chips::-webkit-scrollbar { display: none; }

.chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #cfcfcf;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.chip span {
    font-size: 0.7rem;
    color: #777;
}

.chip:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.chip.is-active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}

.chip.is-active span {
    color: rgba(0, 0, 0, 0.55);
}

@media (min-width: 1024px) {
    .filters-inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
    }
    .filter-label { width: auto; }
}

/* ----- Masonry grid ----- */
.gallery-section {
    padding: 2rem 0 5rem;
}

.gallery-grid {
    column-count: 2;
    column-gap: 0.6rem;
}

@media (min-width: 768px) {
    .gallery-grid { column-count: 3; column-gap: 0.9rem; }
}

@media (min-width: 1200px) {
    .gallery-grid { column-count: 4; }
}

.g-item {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 0.6rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    break-inside: avoid;
    aspect-ratio: var(--shape);           /* placeholder shape */
    background: radial-gradient(circle at 30% 20%, #242424, #141414);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    animation: tileIn 0.6s ease forwards;
    animation-delay: var(--delay);
}

@media (min-width: 768px) {
    .g-item { margin-bottom: 0.9rem; }
}

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

/* Once the real photo loads, use its own shape */
.g-item.has-image {
    aspect-ratio: auto;
}

.g-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease, filter 0.7s ease;
}

.g-item.has-image img {
    position: static;
    height: auto;
}

.g-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4a4a4a;
}

/* Info that slides up on hover */
.g-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 55%);
    opacity: 0;
    transition: opacity 0.35s;
}

.g-overlay > * {
    transform: translateY(10px);
    transition: transform 0.35s;
}

.g-num {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-accent);
}

.g-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0.25rem 0;
}

.g-meta {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bdbdbd;
}

.g-item:hover img,
.g-item:focus-visible img {
    transform: scale(1.05);
}

.g-item:hover .g-overlay,
.g-item:focus-visible .g-overlay {
    opacity: 1;
}

.g-item:hover .g-overlay > *,
.g-item:focus-visible .g-overlay > * {
    transform: none;
}

.g-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Touch screens: always show a small label */
@media (hover: none) {
    .g-overlay { opacity: 1; }
    .g-overlay > * { transform: none; }
    .g-title { font-size: 1.15rem; }
    .g-meta { display: none; }
}

/* Empty + load more */
.gallery-empty {
    padding: 4rem 0;
    text-align: center;
    color: #9a9a9a;
}

.gallery-reset {
    display: block;
    margin: 1rem auto 0;
    font: inherit;
    font-weight: 700;
    color: var(--color-accent);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.gallery-more {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.gallery-more [hidden] { display: none; }

/* ----- "View" circle that follows the mouse ----- */
.view-cursor {
    position: fixed;
    top: -44px;
    left: -44px;
    z-index: 60;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-bg);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    scale: 0.4;
    transition: opacity 0.2s, scale 0.25s;
}

.view-cursor.is-visible {
    opacity: 1;
    scale: 1;
}

/* ----- Viewer ----- */
.gviewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    grid-template-rows: 1fr auto;
    background-color: rgba(5, 5, 5, 0.97);
    overflow-y: auto;
}

.gviewer[hidden] { display: none; }

.gviewer-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 4.5rem 1rem 1rem;
}

.gviewer-figure img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 4px;
}

.gviewer-placeholder {
    display: none;
    width: min(80vw, 480px);
    aspect-ratio: 4 / 5;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: radial-gradient(circle at 30% 20%, #242424, #141414);
    color: #666;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.gviewer.is-missing .gviewer-figure img { display: none; }
.gviewer.is-missing .gviewer-placeholder { display: flex; }

.gviewer-close { top: 1rem; right: 1rem; font-size: 1.75rem; position: fixed; }
.gviewer-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.gviewer-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

.gviewer-info {
    min-width: 0;
    padding: 1.5rem 1.5rem 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #0d0d0d;
}

.gviewer-counter {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.gviewer-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 4vw, 3rem);
    overflow-wrap: break-word;
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.gviewer-meta {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.25rem;
}

.gviewer-meta div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gviewer-meta dt {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.gviewer-meta dd a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gviewer-text {
    color: #b5b5b5;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.gviewer-cta {
    width: 100%;
}

/* Phones: arrows sit at the bottom of the photo */
@media (max-width: 767px) {
    .gviewer-prev,
    .gviewer-next {
        top: auto;
        bottom: -0.5rem;
        transform: none;
    }
    .gviewer-stage { padding-bottom: 3.5rem; }
    .gviewer-prev { left: calc(50% - 60px); }
    .gviewer-next { right: calc(50% - 60px); }
}

/* Desktop: photo on the left, info panel on the right */
@media (min-width: 1024px) {
    .gviewer {
        grid-template-rows: none;
        grid-template-columns: 1fr 380px;
        overflow: hidden;
    }

    .gviewer-stage {
        padding: 2rem 5rem;
    }

    .gviewer-figure img {
        max-height: 88vh;
    }

    .gviewer-placeholder {
        width: min(50vw, 560px);
    }

    .gviewer-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 2.5rem;
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .gviewer-close { right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .g-item { animation: none; opacity: 1; transform: none; }
}


/* =========================================================
   SHOP TEASER (home page)
   ========================================================= */
.shop-teaser {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: var(--header-height);
    background:
        radial-gradient(ellipse at 85% 20%, rgba(201, 162, 39, 0.08), transparent 55%),
        var(--color-bg);
}

.shop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .shop-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 5rem;
        align-items: center;
    }
}

.shop-intro .section-title {
    font-size: clamp(3rem, 5vw, 5rem);
    margin-bottom: 1.5rem;
}

.shop-lead {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.5;
    max-width: 34ch;
    margin-bottom: 1rem;
}

.shop-text {
    color: #b5b5b5;
    max-width: 40ch;
    margin-bottom: 2rem;
}

.shop-actions .btn {
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Product cards */
.shop-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 600px) {
    .shop-items { grid-template-columns: repeat(3, 1fr); }
}

/* On phones, the 3rd card spans full width so the grid stays even */
@media (max-width: 599px) {
    .shop-item:nth-child(3) { grid-column: 1 / -1; }
    .shop-item:nth-child(3) .shop-img { aspect-ratio: 16 / 9; }
}

.shop-item {
    transition-delay: calc(var(--i, 0) * 0.1s);
}

.shop-item:nth-child(2) { --i: 1; }
.shop-item:nth-child(3) { --i: 2; }

.shop-img {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px),
        radial-gradient(circle at 30% 20%, #262626, #131313);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Placeholder label until a photo is added */
.shop-img::before {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #3a3a3a;
}

.shop-img span {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(30%) brightness(0.85);
    transition: transform 0.7s ease, filter 0.7s ease;
}

.shop-item:hover .shop-img span {
    transform: scale(1.05);
    filter: grayscale(0%) brightness(1);
}

/* "Coming soon" tag on each product */
.shop-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.3rem 0.7rem;
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-bg);
    background-color: var(--color-accent);
    border-radius: 999px;
}

.shop-name {
    margin-top: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.shop-meta {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #9a9a9a;
}


/* =========================================================
   CONTACT PAGE (contact.html)
   ========================================================= */
/* The form is the first section, so leave room for the fixed header */
.contact-first {
    padding-top: calc(var(--header-height) + 3.5rem);
    border-top: none;
}

/* Hours box in the form section */
.contact-hours {
    max-width: 360px;
    padding: 1.25rem 1.5rem;
    background-color: #121212;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.contact-hours .footer-heading {
    margin-bottom: 0.75rem;
}

/* ----- Visit: map + directions ----- */
.visit {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: var(--header-height);
}

.visit-head {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .visit-head {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.visit-address {
    font-style: normal;
    line-height: 1.7;
    color: #cfcfcf;
}

.visit-address strong {
    color: var(--color-text);
}

.visit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .visit-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
        align-items: start;
    }
}

.visit-map {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.visit-map-frame {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: radial-gradient(circle at 50% 50%, #1e1e1e, #111);   /* shows while the map loads */
}

.visit-map iframe {
    display: block;
    width: 100%;
    height: clamp(320px, 45vw, 480px);
    border: 0;
    /* Dark map to match the site; full colour on hover */
    filter: grayscale(1) invert(0.92) contrast(0.9) brightness(0.95);
    transition: filter 0.4s;
}

.visit-map iframe:hover {
    filter: none;
}

.visit-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Directions tabs */
.directions {
    padding: 1.5rem;
    background-color: #121212;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

@media (min-width: 768px) {
    .directions { padding: 2rem; }
}

.dir-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.dir-tab {
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cfcfcf;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.dir-tab:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.dir-tab.is-active {
    color: var(--color-bg);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.dir-panel.is-active {
    animation: dirIn 0.35s ease;
}

@keyframes dirIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.dir-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

/* Numbered steps with gold circles */
.dir-steps {
    list-style: none;
    counter-reset: step;
}

.dir-steps li {
    position: relative;
    padding: 0 0 1.1rem 2.75rem;
    color: #cfcfcf;
    counter-increment: step;
}

.dir-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -0.1rem;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 50%;
}

/* Dotted line joining the steps */
.dir-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 1.9rem;
    bottom: 0.2rem;
    border-left: 1px dashed rgba(201, 162, 39, 0.4);
}

.dir-steps strong {
    color: var(--color-text);
}

.dir-note {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: #9a9a9a;
}


/* Footer without the map (contact page): info spreads across the full width */
.footer-main.no-map {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .footer-main.no-map .footer-info {
        grid-template-columns: 1.4fr repeat(4, 1fr);
    }
    .footer-main.no-map .footer-brand {
        grid-column: auto;
    }
}


/* =========================================================
   SCROLL ANIMATIONS (all pages)
   Elements get these classes automatically from js/main.js.
   You can also add class="reveal" or "reveal-img" by hand.
   ========================================================= */
:root {
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* fast start, soft landing */
}

/* Text & cards: fade up */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 0.9s var(--reveal-ease),
        transform 0.9s var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Photos, maps & big panels: rise up while unmasking from the bottom */
.reveal-img {
    opacity: 0;
    transform: translateY(48px) scale(0.97);
    clip-path: inset(18% 0 0 0);
    transition:
        opacity 1s var(--reveal-ease),
        transform 1.1s var(--reveal-ease),
        clip-path 1.1s var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal-img.is-visible {
    opacity: 1;
    transform: none;
    clip-path: inset(-24px -24px -24px -24px);   /* slightly outside, so focus rings & shadows aren't cut off */
}

/* ----- Big headings: letters slide up one by one ----- */
.reveal-title .st-word {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;                    /* the mask each letter slides up behind */
    padding-bottom: 0.08em;              /* room for descenders (g, y, p) */
    margin-bottom: -0.08em;
    vertical-align: top;
}

.reveal-title .st-char {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.9s var(--reveal-ease);
    transition-delay: calc(var(--reveal-delay, 0s) + var(--ci, 0) * 0.028s);
}

.reveal-title.is-visible .st-char {
    transform: none;
}

/* ----- Paragraphs: line by line ----- */
.reveal-lines {
    opacity: 0;                          /* hidden until the lines are measured */
}

.reveal-lines:has(.sl-line) {
    opacity: 1;
}

.sl-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.sl-line-in {
    display: block;
    transform: translateY(105%);
    transition: transform 0.9s var(--reveal-ease);
    transition-delay: calc(var(--reveal-delay, 0s) + var(--li, 0) * 0.09s + 0.1s);
}

.reveal-lines.is-visible .sl-line-in {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-img,
    .reveal-lines,
    .reveal-title,
    .reveal-title .st-char,
    .sl-line-in {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}


/* =========================================================
   PAGE LOADER & PAGE TRANSITIONS (all pages)
   1. INKWELL is outlined like tattoo linework, then filled in gold
   2. The screen clears as 5 shutters that lift one after another
   3. Clicking to another page: the shutters close back in, then the page changes
   Controlled by js/main.js (classes on <html>: pt-loaded / pt-leaving).
   ========================================================= */
.pt {
    --pt-draw: 1s;                       /* linework speed (JS shortens it on later pages) */
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    /* safety net: if JavaScript fails, hide the loader after 4 seconds */
    animation: ptSafety 0s linear 4s forwards;
}

@keyframes ptSafety {
    to { visibility: hidden; }
}

/* ----- Shutters ----- */
.pt-strips {
    position: absolute;
    inset: 0;
    display: flex;
}

.pt-strips span {
    flex: 1;
    height: 100%;
    margin-right: -1px;                  /* no hairline gaps between strips */
    background-color: var(--color-bg);
    transform: translateY(0);
}

/* ----- Wordmark + counter ----- */
.pt-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.pt-word {
    width: min(78vw, 560px);
    overflow: visible;
}

.pt-word text {
    font-family: var(--font-display);
    font-size: 150px;
    letter-spacing: 6px;
    fill: var(--color-accent);
    fill-opacity: 0;
    stroke: var(--color-text);
    stroke-width: 1.5;
    stroke-dasharray: 800;               /* roughly one letter's outline */
    stroke-dashoffset: 800;
    /* 1. linework: the outline draws itself  2. packing: gold fills in */
    animation:
        ptLine var(--pt-draw) cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards,
        ptFill 0.5s ease calc(var(--pt-draw) + 0.05s) forwards;
}

@keyframes ptLine {
    to { stroke-dashoffset: 0; }
}

@keyframes ptFill {
    to { fill-opacity: 1; stroke: var(--color-accent); }
}

.pt-meta {
    display: flex;
    justify-content: space-between;
    width: min(78vw, 560px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.pt-count {
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.pt-bar {
    width: min(78vw, 560px);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.pt-bar span {
    display: block;
    height: 100%;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
}

/* ----- Page ready: wordmark lifts away, then shutters open left to right ----- */
html.pt-loaded .pt-content {
    opacity: 0;
    transform: translateY(-40px);
}

html.pt-loaded .pt-strips span {
    transform: translateY(-100%);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

html.pt-loaded .pt-strips span:nth-child(1) { transition-delay: 0.15s; }
html.pt-loaded .pt-strips span:nth-child(2) { transition-delay: 0.21s; }
html.pt-loaded .pt-strips span:nth-child(3) { transition-delay: 0.27s; }
html.pt-loaded .pt-strips span:nth-child(4) { transition-delay: 0.33s; }
html.pt-loaded .pt-strips span:nth-child(5) { transition-delay: 0.39s; }

html.pt-done .pt {
    visibility: hidden;
}

/* ----- Leaving: shutters rise from the bottom to close over the page ----- */
html.pt-leaving .pt {
    visibility: visible;
    pointer-events: auto;                /* blocks double clicks while leaving */
    animation: none;
}

html.pt-leaving .pt-content {
    opacity: 0;
    transition: none;
}

html.pt-leaving .pt-strips span {
    animation: ptClose 0.6s cubic-bezier(0.76, 0, 0.24, 1) both;
}

html.pt-leaving .pt-strips span:nth-child(2) { animation-delay: 0.05s; }
html.pt-leaving .pt-strips span:nth-child(3) { animation-delay: 0.1s; }
html.pt-leaving .pt-strips span:nth-child(4) { animation-delay: 0.15s; }
html.pt-leaving .pt-strips span:nth-child(5) { animation-delay: 0.2s; }

@keyframes ptClose {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Hold the hero's scroll hint until the loader has moved away */
html:not(.pt-loaded) .scroll-line {
    animation-play-state: paused;
}

/* Reduced motion: no drawing or shutters, just a quick fade */
@media (prefers-reduced-motion: reduce) {
    .pt-word text {
        animation: none;
        fill-opacity: 1;
        stroke: none;
    }
    html.pt-loaded .pt {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    html.pt-loaded .pt-strips span,
    html.pt-leaving .pt-strips span {
        transform: none;
        transition: none;
        animation: none;
    }
}



/* =========================================================
   FAQ (home page) – tabs + accordion
   ========================================================= */
.faq {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: var(--header-height);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 1024px) {
    .faq-grid {
        grid-template-columns: 5fr 7fr;
        gap: 5rem;
        align-items: start;
    }

    /* Intro stays in view while you read the questions */
    .faq-intro {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
    }
}

.faq-intro .section-title {
    margin-bottom: 1.5rem;
}

.faq-lead {
    color: #cfcfcf;
    max-width: 42ch;
    margin-bottom: 1.75rem;
}

.faq-ask {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-accent);
    transition: opacity 0.2s;
}

.faq-ask:hover {
    opacity: 0.75;
}

/* ----- Tabs ----- */
.faq-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.faq-tab {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #a8a8a8;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.7rem 1.25rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.faq-tab:hover {
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.35);
}

.faq-tab.is-active {
    color: #0b0b0b;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.faq-tab:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Fade the list in when switching tabs */
.faq-list:not([hidden]) {
    animation: faqFade 0.45s ease;
}

@keyframes faqFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ----- Questions ----- */
.faq-list {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.faq-q {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.2s;
}

.faq-item summary:hover .faq-q,
.faq-item[open] .faq-q {
    color: var(--color-accent);
}

/* Plus sign that turns into a minus when open */
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: border-color 0.2s, transform 0.35s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    background-color: var(--color-text);
    transform: translate(-50%, -50%);
    transition: transform 0.35s ease;
}

.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon {
    border-color: var(--color-accent);
    transform: rotate(180deg);
}

.faq-item[open] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* While closing, the icon and colour switch back straight away */
.faq-item.is-closing .faq-q { color: var(--color-text); }
.faq-item.is-closing .faq-icon { border-color: rgba(255, 255, 255, 0.2); transform: none; }
.faq-item.is-closing .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Answer */
.faq-a {
    overflow: hidden;
}

.faq-a p {
    color: #bdbdbd;
    max-width: 62ch;
    padding: 0 3rem 1.5rem 0;
}

.faq-a a {
    text-decoration: underline;
}

.faq-a strong {
    color: var(--color-accent);
    font-weight: 700;
}

/* "Myth" label */
.faq-tag {
    flex-shrink: 0;
    align-self: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.faq-myth .faq-q {
    font-style: italic;
}

@media (max-width: 599px) {
    .faq-tab {
        flex: 1;
        padding: 0.7rem 0.75rem;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }

    .faq-q {
        font-size: 1rem;
    }

    .faq-a p {
        padding-right: 0;
    }

    .faq-item summary {
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-list:not([hidden]) { animation: none; }
    .faq-icon,
    .faq-icon::before,
    .faq-icon::after { transition: none; }
}


/* =========================================================
   PLAIN FALLBACKS – only seen without JavaScript
   (search engines, AI assistants, very old browsers).
   JavaScript replaces these with the designed versions.
   ========================================================= */
.footer-fallback,
.artists-fallback {
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: #bdbdbd;
    line-height: 1.7;
}

.footer-fallback p,
.footer-fallback address,
.artists-fallback p {
    margin-bottom: 0.75rem;
    font-style: normal;
}

.artists-fallback h2,
.artists-fallback h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2rem;
    color: var(--color-text);
    margin: 1.5rem 0 0.5rem;
}