/* ══ Kick Off Club · Venue page styles ════════════════════════════
   Loaded by soho.html / brixton.html / hackneywick.html.
   Pairs with index.html design tokens (--koc-*); each page defines
   its own --accent via a body[data-venue="…"] selector at the bottom.
══════════════════════════════════════════════════════════════════ */

/* ── Fonts (mirrors index.html so the venue pages are self-sufficient
       — same files, swapped to display:swap so no blocking) ── */
@font-face {
    font-family: 'Anton';
    src: url('../fonts/anton-latin.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Anton';
    src: url('../fonts/anton-latin-ext.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-latin.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --koc-red:     #D21F3C;
    --koc-red-dk:  #A7122B;
    --koc-blue:    #1D4BCC;
    --koc-blue-dk: #0A2D8C;
    --koc-cream:   #F4EEE0;
    --koc-cream-dk:#E8E0CC;
    --koc-ink:     #111111;
    --koc-white:   #FFFFFF;
    --accent:      var(--koc-red);  /* per-venue overrides */
    --accent-ink:  var(--koc-white);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 400;
    color: var(--koc-ink);
    background: var(--koc-cream);
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.45;
    position: relative;
}
body::before {
    content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background-image: radial-gradient(circle, rgba(17,17,17,0.1) 0.8px, transparent 0.9px);
    background-size: 5px 5px; opacity: 0.5;
}
body::after {
    content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}
.page { position: relative; z-index: 3; }

/* ══ NAV — logo + 3 venue pills ════════════════════════════════════ */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--koc-red); color: var(--koc-white);
    border-bottom: 3px solid var(--koc-ink);
    box-shadow: 0 4px 0 var(--koc-ink);
    padding: 10px 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px;
}
.nav-logo-link { display: inline-flex; line-height: 0; text-decoration: none; flex-shrink: 0; }
.nav-logo { height: 56px; display: block; transition: transform 0.15s; }
.nav-logo-link:hover .nav-logo { transform: translate(-1px, -1px); }
.nav-buy { display: flex; align-items: center; gap: 14px; }
.nav-buy-label {
    font-family: 'Anton', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 19px; line-height: 1;
    color: var(--koc-white);
    text-shadow: 2px 2px 0 var(--koc-ink);
    white-space: nowrap;
}
.nav-pills { display: flex; gap: 10px; }
.nav-pill {
    font-family: 'Anton', sans-serif; font-weight: 900;
    text-transform: uppercase; font-size: 17px; letter-spacing: 0.06em;
    color: var(--koc-white); background: var(--koc-ink);
    padding: 9px 18px 8px; text-decoration: none;
    border: 2px solid var(--koc-ink);
    box-shadow: 3px 3px 0 var(--koc-white), 3px 3px 0 1.5px var(--koc-ink);
    transition: transform 0.15s, background 0.15s, color 0.15s;
    position: relative; line-height: 1.05;
}
.nav-pill:hover { transform: translate(-1px, -1px); background: var(--accent); }
.nav-pill[aria-current="page"] {
    background: var(--koc-cream); color: var(--koc-ink);
    box-shadow: 3px 3px 0 var(--koc-ink);
}
.nav-pill[aria-current="page"]::after {
    content: '●'; color: var(--accent);
    position: absolute; top: -6px; right: -4px; font-size: 14px;
    line-height: 1; text-shadow: 1px 1px 0 var(--koc-ink);
}

@media (max-width: 720px) {
    .nav { flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
    .nav-logo { height: 42px; }
    .nav-buy { width: 100%; flex-direction: column; gap: 6px; align-items: stretch; }
    .nav-buy-label { font-size: 14px; letter-spacing: 0.16em; text-align: center; }
    .nav-pills { width: 100%; gap: 6px; }
    .nav-pill { flex: 1 1 0; text-align: center; font-size: 14px; padding: 9px 6px; letter-spacing: 0.04em; }
}

/* ══ HERO — artwork left, venue title right ════════════════════════
   Background = the same fan/crowd collage used on the homepage hero
   so the venue pages feel continuous with the brand, plus a cream
   bottom-fade so text contrast stays high. */
.v-hero {
    padding: 56px 24px 48px;
    position: relative; overflow: hidden;
    background:
        linear-gradient(180deg, rgba(244,238,224,0.45) 0%, rgba(244,238,224,0.78) 70%, var(--koc-cream) 100%),
        url('../images/collage.webp') center top / cover no-repeat;
}
.v-hero::after {
    /* Bottom-edge ink fade so the hero meets the dark countdown band
       cleanly without a hard seam. */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
    background: linear-gradient(180deg, transparent 0%, rgba(17,17,17,0.18) 100%);
    pointer-events: none;
}
.v-hero-inner {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: 60px; align-items: center;
}
.v-art-frame {
    position: relative; aspect-ratio: 1 / 1;
    background: var(--koc-ink);
    padding: 14px 14px 56px;
    border: 3px solid var(--koc-ink);
    box-shadow: 10px 10px 0 var(--accent), 10px 10px 0 3px var(--koc-ink);
    transform: rotate(-1.5deg);
    transition: transform 0.4s cubic-bezier(0.18, 1.4, 0.3, 1);
}
.v-art-frame:hover { transform: rotate(-0.5deg) translateY(-4px); }
.v-art-frame img {
    display: block; width: 100%; height: auto; aspect-ratio: 1/1;
    object-fit: cover; border: 2px solid var(--koc-cream);
}
.v-art-caption {
    position: absolute; left: 14px; right: 14px; bottom: 12px;
    color: var(--koc-cream); font-family: 'Archivo', sans-serif;
    font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em;
    font-size: 12px; display: flex; justify-content: space-between;
}
.v-art-stamp {
    position: absolute; top: -22px; right: -22px;
    width: 110px; height: 110px; border-radius: 50%;
    background: var(--koc-cream); color: var(--koc-ink);
    border: 3px solid var(--koc-ink);
    box-shadow: 4px 4px 0 var(--koc-ink);
    display: grid; place-items: center; text-align: center;
    font-family: 'Anton', sans-serif; font-size: 16px; line-height: 0.95;
    text-transform: uppercase; letter-spacing: 0.04em;
    transform: rotate(10deg);
    animation: stampSpin 1.1s cubic-bezier(0.18, 1.4, 0.3, 1) 0.4s both;
    z-index: 4;
}
.v-art-stamp span { display: block; }
.v-art-stamp .big { font-size: 24px; color: var(--accent); }

@keyframes stampSpin {
    0%   { opacity: 0; transform: rotate(-120deg) scale(0.3); }
    70%  { opacity: 1; transform: rotate(16deg) scale(1.1); }
    100% { opacity: 1; transform: rotate(10deg) scale(1); }
}

.v-eyebrow {
    display: inline-block;
    font-family: 'Archivo', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px;
    color: var(--koc-white); background: var(--koc-ink);
    padding: 6px 14px; margin-bottom: 22px;
    transform: rotate(-1deg);
    box-shadow: 3px 3px 0 var(--accent);
}
.v-name {
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: clamp(54px, 8.5vw, 124px); line-height: 0.85;
    text-transform: uppercase; letter-spacing: -0.01em;
    color: var(--koc-ink);
    text-shadow:
        2px 2px 0 var(--koc-cream),
        4px 4px 0 var(--accent),
        7px 7px 0 var(--koc-ink);
    margin-bottom: 6px;
}
.v-name .br { display: block; }
.v-name .br + .br { color: var(--accent); text-shadow: 2px 2px 0 var(--koc-ink); }

.v-sub {
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: clamp(20px, 2.6vw, 28px); letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--koc-white);
    background: var(--koc-ink);
    display: inline-block; padding: 8px 16px 7px;
    border: 3px solid var(--koc-ink); box-shadow: 4px 4px 0 var(--accent);
    margin: 18px 0 26px; transform: rotate(-1deg);
}

.v-cta {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Archivo', sans-serif; font-weight: 900;
    font-size: 22px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--koc-white); background: var(--accent);
    padding: 18px 30px; text-decoration: none;
    border: 3px solid var(--koc-ink);
    box-shadow: 6px 6px 0 var(--koc-ink);
    transition: transform 0.15s, box-shadow 0.15s;
}
.v-cta:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--koc-ink); }
.v-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--koc-ink); }
.v-cta .arrow { font-size: 26px; transition: transform 0.2s; }
.v-cta:hover .arrow { transform: translateX(4px); }

/* Spec strip — capacity / doors / tube / postcode
   Lives as a full-width band beneath the hero artwork + text grid
   so all four cells fit on one row even on narrow desktop columns. */
.v-spec {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
    border: 3px solid var(--koc-ink);
    background: var(--koc-white);
    box-shadow: 5px 5px 0 var(--koc-ink);
}
.v-spec dt, .v-spec dd { display: block; }
.v-spec-cell {
    padding: 14px 16px;
    border-right: 2px dashed var(--koc-ink);
    min-width: 0;  /* allow grid track to shrink without overflow */
}
.v-spec-cell:last-child { border-right: 0; }
.v-spec-cell dt {
    font-family: 'Archivo', sans-serif; font-weight: 900;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--koc-ink); opacity: 0.55;
}
.v-spec-cell dd {
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: 22px; line-height: 1.1; text-transform: uppercase;
    color: var(--koc-ink); margin-top: 3px;
}

@media (max-width: 900px) {
    .v-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .v-art-frame { max-width: 460px; margin: 0 auto; }
    .v-art-stamp { width: 92px; height: 92px; font-size: 13px; top: -16px; right: -16px; }
    .v-art-stamp .big { font-size: 19px; }
    .v-text { text-align: center; }
    .v-eyebrow { margin-bottom: 16px; }
    .v-spec { grid-template-columns: repeat(2, 1fr); }
    .v-spec-cell { border-right: 2px dashed var(--koc-ink); }
    .v-spec-cell:nth-child(2n) { border-right: 0; }
    .v-spec-cell:nth-child(-n+2) { border-bottom: 2px dashed var(--koc-ink); }
}
@media (max-width: 520px) {
    .v-hero { padding: 32px 16px 24px; }
    .v-cta { font-size: 18px; padding: 16px 24px; }
}

/* ══ COUNTDOWN ═════════════════════════════════════════════════════ */
.v-countdown {
    background: var(--koc-ink); color: var(--koc-cream);
    padding: 36px 20px;
    border-top: 4px solid var(--koc-ink);
    border-bottom: 4px solid var(--koc-ink);
    position: relative; overflow: hidden;
}
.v-countdown::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 18px,
            rgba(255,255,255,0.025) 18px, rgba(255,255,255,0.025) 36px);
    pointer-events: none;
}
.v-countdown-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
    position: relative;
}
.v-countdown-label {
    font-family: 'Anton', sans-serif; font-weight: 900;
    text-transform: uppercase; line-height: 0.9;
    font-size: clamp(28px, 4vw, 42px);
    color: var(--koc-cream);
}
.v-countdown-label .accent { color: var(--accent); display: block; }
.v-countdown-label small {
    display: block; font-family: 'Archivo', sans-serif; font-weight: 700;
    font-size: 13px; letter-spacing: 0.12em; opacity: 0.65;
    margin-top: 8px; line-height: 1.3;
}
.v-countdown-cells {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.v-cd-cell {
    background: var(--koc-cream); color: var(--koc-ink);
    border: 3px solid var(--koc-cream);
    padding: 14px 6px 10px; text-align: center;
    box-shadow: 4px 4px 0 var(--accent);
    position: relative;
}
.v-cd-num {
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: clamp(34px, 5.6vw, 64px); line-height: 0.9;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.v-cd-lbl {
    font-family: 'Archivo', sans-serif; font-weight: 900;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    margin-top: 6px; opacity: 0.7;
}
@media (max-width: 760px) {
    .v-countdown-inner { grid-template-columns: 1fr; gap: 18px; text-align: center; }
    .v-countdown-label { text-align: center; }
    .v-cd-cell { padding: 12px 4px 8px; }
}

/* ══ TICKER (reused from homepage style) ══════════════════════════ */
.v-ticker {
    background: var(--accent); color: var(--koc-white);
    border-top: 4px solid var(--koc-ink);
    border-bottom: 4px solid var(--koc-ink);
    overflow: hidden; padding: 14px 0;
}
.v-ticker-track {
    display: flex; width: max-content;
    animation: tickerScroll 38s linear infinite;
    will-change: transform;
}
.v-ticker-group { display: flex; flex-shrink: 0; align-items: center; white-space: nowrap; }
.v-ticker-group > span {
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: clamp(20px, 3vw, 28px); letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 var(--koc-ink);
    padding: 0 24px;
}
.v-ticker-group .star {
    color: var(--koc-white); text-shadow: 3px 3px 0 var(--koc-ink);
    font-size: 1.4em; padding: 0 6px;
}
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ══ Generic section/heading ═══════════════════════════════════════ */
.v-section {
    max-width: 1100px; margin: 0 auto;
    padding: 72px 24px;
}
.v-section.bg-cream-dk { background: var(--koc-cream-dk); max-width: none; padding-left: 0; padding-right: 0; }
.v-section.bg-cream-dk .v-section-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.v-h {
    font-family: 'Anton', sans-serif; font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(36px, 5.6vw, 64px); line-height: 0.9;
    letter-spacing: -0.005em;
    color: var(--koc-ink);
    text-shadow: 3px 3px 0 var(--accent);
    margin-bottom: 8px;
}
.v-h-sub {
    font-family: 'Archivo', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px;
    color: var(--koc-ink); opacity: 0.7;
    margin-bottom: 32px;
}

/* ── About ── */
.v-about {
    display: grid; grid-template-columns: 0.85fr 1fr; gap: 50px;
    align-items: start;
}
.v-about-img {
    background: var(--koc-ink);
    padding: 8px;
    border: 3px solid var(--koc-ink);
    box-shadow: 8px 8px 0 var(--accent);
    transform: rotate(1.5deg);
    transition: transform 0.4s;
}
.v-about-img:hover { transform: rotate(0.5deg) translateY(-2px); }
.v-about-img img { display: block; width: 100%; height: auto; }
.v-about-body p {
    font-size: 17px; line-height: 1.55; margin-bottom: 14px;
}
.v-about-body p:first-of-type {
    font-family: 'Archivo', sans-serif; font-weight: 700;
    font-size: 20px; line-height: 1.45;
}
.v-about-body p:first-of-type::first-letter {
    font-family: 'Anton', sans-serif;
    font-size: 64px; float: left; line-height: 0.85;
    padding: 4px 10px 0 0; color: var(--accent);
}
.v-about-tags {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
}
.v-tag {
    font-family: 'Archivo', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
    background: var(--koc-cream); border: 2px solid var(--koc-ink);
    padding: 6px 11px; box-shadow: 2px 2px 0 var(--koc-ink);
}
@media (max-width: 820px) {
    .v-about { grid-template-columns: 1fr; gap: 28px; }
    .v-about-img { max-width: 380px; margin: 0 auto; }
    .v-section { padding: 48px 20px; }
}

/* ══ Tickets / Skiddle embed ══════════════════════════════════════ */
.v-tickets {
    background: var(--koc-ink); color: var(--koc-cream);
    padding: 80px 20px; position: relative; overflow: hidden;
}
.v-tickets::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
        135deg, transparent 0, transparent 36px,
        rgba(255,255,255,0.025) 36px, rgba(255,255,255,0.025) 72px);
    pointer-events: none;
}
.v-tickets-inner { max-width: 980px; margin: 0 auto; position: relative; }
.v-tickets .v-h { color: var(--koc-cream); text-shadow: 3px 3px 0 var(--accent); }
.v-tickets .v-h-sub { color: var(--koc-cream); opacity: 0.6; }
.v-embed-frame {
    background: var(--koc-cream); color: var(--koc-ink);
    border: 4px solid var(--accent);
    box-shadow: 12px 12px 0 var(--accent), 12px 12px 0 4px var(--koc-cream);
    padding: 26px;
    position: relative;
}
.v-embed-stamp {
    position: absolute; top: -20px; left: -20px;
    background: var(--accent); color: var(--koc-white);
    padding: 8px 16px; border: 3px solid var(--koc-ink);
    font-family: 'Anton', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 16px; transform: rotate(-3deg);
    box-shadow: 3px 3px 0 var(--koc-ink);
    z-index: 3;
}
.v-embed-frame iframe { display: block; width: 100%; min-height: 1200px; border: 0; }
@media (max-width: 720px) {
    .v-embed-frame iframe { min-height: 1100px; }
}
/* Placeholder until Skiddle code lands */
.v-embed-placeholder {
    border: 3px dashed var(--koc-ink);
    padding: 60px 30px;
    text-align: center;
    background: repeating-linear-gradient(45deg,
        transparent 0, transparent 12px,
        rgba(0,0,0,0.04) 12px, rgba(0,0,0,0.04) 24px);
}
.v-embed-placeholder strong {
    display: block; font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: 34px; text-transform: uppercase; letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.v-embed-placeholder small {
    display: block; font-size: 13px; opacity: 0.6;
    letter-spacing: 0.06em; text-transform: uppercase;
    font-family: 'Archivo', sans-serif; font-weight: 700;
}

/* ══ Getting there — map + travel ═════════════════════════════════ */
.v-travel {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
    align-items: stretch;
}
.v-map {
    background: var(--koc-ink); padding: 8px;
    border: 3px solid var(--koc-ink);
    box-shadow: 8px 8px 0 var(--accent);
    aspect-ratio: 4 / 3; position: relative;
}
.v-map iframe {
    display: block; width: 100%; height: 100%; border: 0;
    filter: contrast(1.05) saturate(0.85);
}
.v-travel-info {
    display: flex; flex-direction: column; gap: 16px;
}
.v-tube {
    background: var(--koc-white);
    border: 3px solid var(--koc-ink);
    box-shadow: 4px 4px 0 var(--koc-ink);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
}
.v-tube-line {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 50%; border: 3px solid var(--koc-ink);
    display: grid; place-items: center;
    background: var(--tube-color, #0019A8);
    color: var(--koc-white);
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: 11px; text-transform: uppercase;
    text-align: center; line-height: 1; padding: 4px;
}
.v-tube-meta {
    font-family: 'Anton', sans-serif; font-weight: 900;
    text-transform: uppercase;
}
.v-tube-meta .station { font-size: 22px; line-height: 1; }
.v-tube-meta .walk {
    font-family: 'Archivo', sans-serif; font-weight: 700;
    font-size: 13px; letter-spacing: 0.06em; opacity: 0.7;
    margin-top: 4px; text-transform: uppercase;
}
.v-address {
    background: var(--koc-cream); padding: 16px 18px;
    border: 3px solid var(--koc-ink); box-shadow: 4px 4px 0 var(--koc-ink);
}
.v-address .label {
    font-family: 'Archivo', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
    opacity: 0.6; margin-bottom: 4px;
}
.v-address .addr {
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: 18px; line-height: 1.25; text-transform: uppercase;
}
.v-address .copy-btn {
    background: none; border: 0; padding: 0; margin-top: 10px;
    font-family: 'Archivo', sans-serif; font-weight: 900;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}
.v-address .copy-btn.copied { color: var(--koc-ink); }

@media (max-width: 820px) {
    .v-travel { grid-template-columns: 1fr; gap: 24px; }
}

/* ══ Fixtures scaffold ════════════════════════════════════════════ */
.v-fixtures-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.v-fix-card {
    background: var(--koc-white);
    border: 3px solid var(--koc-ink);
    box-shadow: 5px 5px 0 var(--koc-ink);
    padding: 18px 16px;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
}
.v-fix-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--accent); }
.v-fix-card .fix-date {
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 4px;
}
.v-fix-card .fix-match {
    font-family: 'Anton', sans-serif; font-weight: 900;
    font-size: 22px; line-height: 1.05; text-transform: uppercase;
}
.v-fix-card .fix-stage {
    font-family: 'Archivo', sans-serif; font-weight: 700;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    opacity: 0.6; margin-top: 6px;
}
.v-fix-tba {
    position: absolute; top: -10px; right: -8px;
    background: var(--koc-ink); color: var(--koc-cream);
    padding: 4px 10px 3px; transform: rotate(6deg);
    font-family: 'Archivo', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px;
}
.v-fix-note {
    margin-top: 22px; font-size: 14px; opacity: 0.7;
    font-style: italic;
}

/* ══ Share + WhatsApp ═════════════════════════════════════════════ */
.v-share-row {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; margin-top: 16px;
}
.v-share-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Archivo', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px;
    background: var(--koc-white); color: var(--koc-ink);
    padding: 12px 18px; text-decoration: none; cursor: pointer;
    border: 3px solid var(--koc-ink); box-shadow: 4px 4px 0 var(--koc-ink);
    transition: transform 0.15s;
}
.v-share-btn:hover { transform: translate(-1px, -1px); }
.v-share-btn.whatsapp { background: #25D366; color: var(--koc-white); }
.v-share-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ══ Sticky buy-tickets bar (appears after hero) ══════════════════ */
.v-sticky-buy {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--accent); color: var(--koc-white);
    border-top: 3px solid var(--koc-ink);
    box-shadow: 0 -4px 0 var(--koc-ink);
    padding: 12px 18px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; z-index: 60;
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.v-sticky-buy.visible { transform: translateY(0); }
.v-sticky-buy .label {
    font-family: 'Anton', sans-serif; font-weight: 900;
    text-transform: uppercase; font-size: 18px; letter-spacing: 0.04em;
}
.v-sticky-buy .label small {
    display: block; font-family: 'Archivo', sans-serif; font-weight: 700;
    font-size: 11px; letter-spacing: 0.1em; opacity: 0.85;
}
.v-sticky-buy .go {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Archivo', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px;
    color: var(--koc-white); background: var(--koc-ink);
    padding: 12px 18px; text-decoration: none;
    border: 2px solid var(--koc-ink);
    box-shadow: 3px 3px 0 var(--koc-cream);
    transition: transform 0.15s;
}
.v-sticky-buy .go:hover { transform: translate(-1px, -1px); }
.v-sticky-buy .go .arrow { font-size: 18px; }
@media (max-width: 520px) {
    .v-sticky-buy { padding: 10px 12px; }
    .v-sticky-buy .label { font-size: 15px; }
    .v-sticky-buy .label small { font-size: 10px; }
    .v-sticky-buy .go { font-size: 13px; padding: 10px 12px; }
}

/* ══ Footer — verbatim from homepage, kept in sync ══════════════════
   The bottom padding includes extra room so the sticky buy-tickets
   bar never overlaps the legal copy / built-by credit. */
.footer {
    position: relative;
    background: var(--koc-ink);
    color: var(--koc-cream);
    margin-top: 60px;
    border-top: 4px solid var(--koc-red);
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(244,238,224,0.06) 0.8px, transparent 0.9px);
    background-size: 5px 5px;
    pointer-events: none;
    z-index: 0;
}
.footer-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    /* Bottom padding accounts for the fixed .v-sticky-buy bar (~70px)
       plus breathing room so the built-by credit isn't flush against it. */
    padding: 54px 24px 110px;
    text-align: center;
}
.footer-logo {
    height: 92px; width: auto;
    margin: 0 auto 28px;
    display: block;
    filter: invert(1) brightness(1.5);
}
@media (max-width: 600px) {
    .footer-inner { padding: 42px 20px 100px; }
    .footer-logo { height: 70px; margin-bottom: 22px; }
}

.footer-follow {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 14px;
    font-family: 'Anton', 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--koc-cream);
    margin-bottom: 4px;
}
.footer-follow::before,
.footer-follow::after {
    content: '';
    width: 38px; height: 3px;
    background: var(--koc-red);
    display: inline-block;
}
@media (max-width: 600px) {
    .footer-follow { font-size: 24px; gap: 10px; }
    .footer-follow::before, .footer-follow::after { width: 26px; height: 2px; }
}
.footer-follow-sub {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--koc-cream);
    opacity: 0.55;
    margin-bottom: 26px;
}

.footer-socials {
    display: flex; justify-content: center; gap: 20px;
    margin-bottom: 42px;
}
.footer-social {
    width: 54px; height: 54px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--koc-cream);
    color: var(--koc-ink);
    border: 2px solid var(--koc-ink);
    border-radius: 50%;
    box-shadow: 4px 4px 0 var(--koc-red), 4px 4px 0 1.5px var(--koc-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-decoration: none;
}
.footer-social:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--koc-red), 6px 6px 0 1.5px var(--koc-ink);
    background: var(--koc-white);
}
.footer-social:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--koc-red), 1px 1px 0 1.5px var(--koc-ink);
}
.footer-social svg { width: 22px; height: 22px; display: block; }

.footer-stitch {
    border: 0; height: 0;
    border-top: 2px dashed var(--koc-red);
    opacity: 0.7;
    max-width: 380px;
    margin: 0 auto 22px;
}

.footer-legal {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--koc-cream);
    opacity: 0.72;
    line-height: 1.9;
}
.footer-legal a {
    color: var(--koc-cream);
    text-decoration: none;
    border-bottom: 1px solid rgba(244,238,224,0.4);
    padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
}
.footer-legal a:hover {
    color: var(--koc-red);
    border-bottom-color: var(--koc-red);
}

.footer-built {
    margin-top: 28px;
    display: flex; justify-content: center;
}
.footer-built a {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(244,238,224,0.5);
    text-decoration: none;
    background: rgba(244,238,224,0.05);
    border: 1px solid rgba(244,238,224,0.12);
    padding: 7px 14px;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.footer-built a:hover {
    color: var(--koc-cream);
    background: rgba(244,238,224,0.1);
    border-color: rgba(244,238,224,0.24);
}
.footer-built img { height: 14px; width: auto; display: block; opacity: 0.9; }

/* ══ Reveal-on-scroll utility (used by venue.js) ══════════════════ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.18, 1.2, 0.3, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
    .v-art-stamp, .v-art-frame, .v-cta { animation: none !important; transition: none !important; }
}

/* ══ Per-venue accent overrides — pulled from the artwork itself ══
   These hues are sampled directly from each square poster so the page
   chrome (shadows, stamps, CTA) echoes the artwork rather than fighting it.
   Tube colours stay set as TfL conventions in the inline style attributes. */
body[data-venue="soho"]        { --accent: #2257D1; }  /* Soho blue */
body[data-venue="brixton"]     { --accent: #C43940; }  /* Brixton red */
body[data-venue="hackneywick"] { --accent: #3EA25B; }  /* Hackney green */