/* ==========================================================================
   Wednesday Club — Ghost theme
   Blue all week. On Wednesday during opening hours the site switches on:
   warm moving light, lit neon, photos in colour.
   Everything you might want to change lives in the :root tokens below.
   ========================================================================== */

/* Fonts (self-hosted, no requests to Google) ------------------------------ */
/* The @font-face rules live in default.hbs. There they use the same
   versioned URLs ({{asset}} adds ?v=…) as the preload links, so each font is
   downloaded once, early, instead of twice and late. */

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

:root {
    color-scheme: dark;

    /* Brand colours */
    --wc-white: #efefef;
    --wc-ink: #231f20;
    --wc-blue: #0021e0;
    --wc-orange: #f37a20;
    --wc-ink-hover: #2e292a;
    --wc-ember: #2a0500;

    /* Ghost's Brand > Typography setting overrides these when used */
    --font-display: var(--gh-font-heading, "MuseoModerno WC"), "MuseoModerno", system-ui, sans-serif;
    --font-body: var(--gh-font-body, "Inter WC"), "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Grid: 12 columns, 4 visible guides */
    --max: 1600px;
    --gutter: max(16px, 4.5vw);
    --col-gap: clamp(12px, 1.6vw, 24px);
    --space: clamp(96px, 12vw, 192px);
    --header-h: 64px;

    /* Type scale */
    --fs-label: 0.8125rem;
    --fs-body: 1.125rem;
    --fs-lead: clamp(1.3rem, 2vw, 1.75rem);
    --fs-m: clamp(1.7rem, 3.4vw, 3.5rem);
    --fs-l: clamp(2.6rem, 7vw, 7.25rem);

    /* The poster look */
    --stroke: max(1.5px, 0.032em);
    /* One line spacing for every poster headline: the lines just touch.
       MuseoModerno's capitals are 0.703em tall; the outline adds half a stroke
       above and below. Outlined and solid letters meet edge to edge, with a
       hair of overlap. Lengths in em, so it follows every headline size
       (the fitted ones included). */
    --leading: calc(0.703em + var(--stroke) / 2 - 0.006em);
    --glow-rgb: 239, 239, 239;
    --glow-white: drop-shadow(0 0 1px rgba(239, 239, 239, 0.7)) drop-shadow(0 0 0.07em rgba(239, 239, 239, 0.5));
    --glow-hot-white: drop-shadow(0 0 1px #fff) drop-shadow(0 0 0.12em rgba(239, 239, 239, 0.85)) drop-shadow(0 0 0.4em rgba(239, 239, 239, 0.35));
    --glow: var(--glow-white);
    --glow-hot: var(--glow-hot-white);

    /* Warm light (fallback for the animated canvas) */
    --warm-glow:
        radial-gradient(42% 38% at 82% 12%, rgba(255, 186, 52, 0.7), transparent 70%),
        radial-gradient(38% 34% at 8% 58%, rgba(243, 122, 32, 0.6), transparent 72%),
        radial-gradient(55% 45% at 64% 78%, rgba(243, 122, 32, 0.55), transparent 72%),
        radial-gradient(60% 55% at 28% 18%, rgba(150, 18, 0, 0.9), transparent 75%),
        linear-gradient(165deg, #3d0300 0%, #7a1802 38%, #a8480a 70%, #5a0e00 100%);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Closed look (blue) */
    --bg: var(--wc-blue);
    --header-bg: var(--wc-blue);
    --menu-bg: var(--wc-blue);
    --guide: rgba(255, 255, 255, 0.1);
    --muted: rgba(255, 255, 255, 0.78);
    --tint: var(--wc-blue);

    /* Foreground: text, outlines, rules and buttons on the page. White here;
       the Orange and White page templates switch it to black (see "Page colours"). */
    --fg: var(--wc-white);
    --fg-contrast: var(--wc-ink); /* text on a --fg fill: buttons, hovers */
    --rule: 2px solid var(--fg);
    --soft: rgba(255, 255, 255, 0.14); /* code background */
    --hairline: rgba(255, 255, 255, 0.3); /* table lines */
    /* The editor's accent colour (blue, like the page) is replaced by this */
    --accent: var(--wc-orange);
    --on-accent: var(--wc-ink);
    /* The NEW sticker */
    --sticker: var(--wc-orange);
    --sticker-text: var(--wc-ink);
    --sticker-rgb: 243, 122, 32;
}

/* Open look (warm). Set by the theme on Wednesday during opening hours,
   or always with Settings > Design & branding > Background > Always warm. */
.look-warm {
    --bg: var(--wc-ember);
    --header-bg: rgba(42, 5, 0, 0.55);
    --menu-bg: #2a0500;
    --guide: rgba(255, 230, 200, 0.12);
    --glow-rgb: 255, 214, 160;
}

/* Boxes that are black on every page (news rows, the countdown banner, the
   footer, black editor cards) keep white type, also on orange or white pages */
.site-footer,
.news-row,
.club-banner__box,
.gh-content :is(.kg-callout-card-grey, .kg-callout-card-blue, .kg-callout-card-green, .kg-callout-card-yellow, .kg-callout-card-red, .kg-callout-card-pink, .kg-callout-card-purple, .kg-toggle-card, .kg-bookmark-container, .kg-product-card-container, .kg-file-card-container, .kg-audio-card) {
    --fg: var(--wc-white);
    --fg-contrast: var(--wc-ink);
    --rule: 2px solid var(--wc-white);
    --muted: rgba(255, 255, 255, 0.78);
    color: var(--fg);
    --glow: var(--glow-white);
    --glow-hot: var(--glow-hot-white);
    --glow-rgb: 239, 239, 239;
}

/* Base -------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color 1.2s ease;
}

/* Warm light behind everything (the canvas from main.js draws over it) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--warm-glow);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.look-warm::before {
    opacity: 1;
}
.glow-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.look-warm .glow-canvas.is-running {
    opacity: 1;
}

/* Film grain over everything */
body::after {
    content: "";
    position: fixed;
    inset: -120px;
    z-index: 90;
    background-image: var(--grain);
    opacity: 0.07;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: wc-grain 0.9s steps(4) infinite;
}
.look-warm::after {
    opacity: 0.13;
}
@keyframes wc-grain {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-40px, 25px); }
    50% { transform: translate(30px, -45px); }
    75% { transform: translate(-15px, 35px); }
    100% { transform: translate(0, 0); }
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

::selection {
    background: var(--fg);
    color: var(--bg);
}

:focus-visible {
    outline: 3px solid var(--fg);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--fg);
    color: var(--fg-contrast);
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus {
    top: 12px;
}

.site {
    position: relative;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main {
    position: relative;
    flex: 1 0 auto;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
}

.section {
    padding-block: var(--space);
}

/* Four quiet column guides behind the content */
.site-main {
    background-image: linear-gradient(var(--guide), var(--guide)), linear-gradient(var(--guide), var(--guide)),
        linear-gradient(var(--guide), var(--guide));
    background-repeat: no-repeat;
    background-size: 1px 100%;
    --inner: min(100vw, var(--max)) - 2 * var(--gutter);
    --left: calc((100vw - min(100vw, var(--max))) / 2 + var(--gutter));
    background-position:
        calc(var(--left) + (var(--inner)) * 0.25 + var(--col-gap) * 0.25) 0,
        calc(var(--left) + (var(--inner)) * 0.5 + var(--col-gap) * 0.5) 0,
        calc(var(--left) + (var(--inner)) * 0.75 + var(--col-gap) * 0.75) 0;
}
@media (max-width: 860px) {
    .site-main {
        background-image: none;
    }
}

/* Small uppercase labels (dates, "When", "Where" …) */
.label {
    margin: 0;
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-lead {
    max-width: 34em;
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.25;
}

/* Letters like g and q hang below the tight poster lines: leave room */
.mixed + .page-lead {
    margin-top: clamp(16px, 2.6vw, 44px);
}

.caption {
    margin-top: 0.8em;
    font-size: 0.875rem;
    color: var(--muted);
}

/* The poster type: outline + solid + glow --------------------------------- */
/* Write *asterisks* around words in a title to make them solid. */

.mixed {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading);
    letter-spacing: -0.005em;
    text-transform: uppercase;
    text-wrap: balance;
    color: transparent;
    -webkit-text-stroke: var(--stroke) var(--type, var(--fg));
    filter: var(--glow);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.mixed .solid {
    font-weight: 900;
    color: var(--type, var(--fg));
    /* zero width, but keep the stroke colour: while the neon flickers, an
       "off" word shows as an outline instead of disappearing */
    -webkit-text-stroke: 0 var(--type, var(--fg));
}
.mixed .w {
    transition: color 0.12s ease;
}
/* Avoid a flash of raw *asterisks* before the script runs (shown anyway after 2s).
   Headings of the editor's header and sign-up cards wait too, so they don't
   show in Ghost's own type first. */
.js .js-mixed:not(.is-ready),
.js .gh-content :is(.kg-header-card-heading, .kg-header-card h2, .kg-signup-card-heading):not(.js-mixed) {
    visibility: hidden;
    animation: wc-reveal 0s 2s forwards;
}
@keyframes wc-reveal {
    to {
        visibility: visible;
    }
}

/* Neon switch-on: solid words start as outlines and flicker on when seen */
.mixed.neon:not(.is-lit) .solid {
    color: transparent;
    -webkit-text-stroke: var(--stroke) var(--type, var(--fg));
}
.mixed.neon.is-lit .solid {
    animation: wc-neon 1.1s steps(1, end) both;
    animation-delay: calc(var(--i, 0) * 160ms + 120ms);
}
@keyframes wc-neon {
    0% { color: transparent; -webkit-text-stroke-width: var(--stroke); }
    10% { color: var(--type, var(--fg)); }
    16% { color: transparent; }
    30% { color: var(--type, var(--fg)); }
    35% { color: transparent; }
    48% { color: var(--type, var(--fg)); }
    100% { color: var(--type, var(--fg)); -webkit-text-stroke-width: 0; }
}

/* Play the sign: pointing at a word switches it on (outline) or off (solid) */
.mixed .line .w.is-hot {
    color: var(--type, var(--fg));
}
.mixed .solid .w.is-hot {
    color: transparent;
    -webkit-text-stroke: var(--stroke) var(--type, var(--fg));
}

/* Dark poster type (e.g. black text on a light card from the editor): no glow */
.mixed--dark,
.mixed--dark .w {
    filter: none !important;
}

/* Logo -------------------------------------------------------------------- */

.wordmark {
    position: relative;
    display: inline-block;
    width: 7.5em;
    height: 3.62em;
    background: var(--wc-ink);
    color: var(--wc-white);
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 0.69;
    text-transform: uppercase;
    vertical-align: middle;
}
.wordmark__stack {
    position: absolute;
    left: 0.36em;
    bottom: 0.36em;
    display: flex;
    flex-direction: column;
    letter-spacing: -0.01em;
}
.wordmark__club {
    position: absolute;
    right: 0.36em;
    bottom: 0.36em;
    font-size: 1.06em;
    text-transform: none;
}
.wordmark--small {
    font-size: 10px;
}
.wordmark--medium {
    font-size: 16px;
}
.wordmark--large {
    font-size: clamp(18px, 2.6vw, 36px);
}

.logo-img {
    display: block;
    width: auto;
}
.logo-img--small {
    height: 36px;
}
.logo-img--medium {
    height: 58px;
}
.logo-img--large {
    height: clamp(66px, 9.5vw, 130px);
}

/* Header (sticky) --------------------------------------------------------- */

.site-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 60;
    background: var(--header-bg);
    border-bottom: var(--rule);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 calc(-1 * env(safe-area-inset-top, 0px)) 0 0 var(--header-bg);
    transition: background-color 1.2s ease;
    view-transition-name: header;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 16px 32px;
    min-height: calc(var(--header-h) - 2px);
    padding-block: 10px;
}
.site-header__brand {
    display: block;
    flex: none;
    margin-right: auto;
    line-height: 0;
}

.nav {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}
.site-nav .nav a,
.site-footer__nav .nav a {
    display: block;
    padding: 6px 0;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.site-nav .nav a:hover,
.site-nav .nav-current a,
.site-footer__nav .nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}

/* Live status: next club / tonight / open now */
.status {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.85em;
    border: var(--rule);
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.status__dot {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: wc-pulse 2.4s ease-in-out infinite;
}
.status:hover,
.status.is-open {
    background: var(--fg);
    color: var(--fg-contrast);
}
.status.is-open {
    box-shadow: 0 0 24px rgba(var(--glow-rgb), 0.75);
}
.status.is-open .status__dot {
    animation-duration: 0.9s;
}
@keyframes wc-pulse {
    50% {
        opacity: 0.3;
    }
}

.menu-toggle {
    display: none;
    padding: 0.55em 0.9em;
    border: var(--rule);
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.menu-toggle__close,
.menu-open .menu-toggle__open {
    display: none;
}
.menu-open .menu-toggle__close {
    display: inline;
}

/* Full-screen menu (phones) */
.menu {
    position: fixed;
    inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: 32px max(32px, env(safe-area-inset-bottom, 0px));
    background: var(--menu-bg);
    overflow-y: auto;
}
.menu[hidden] {
    display: none;
}
.menu .nav {
    flex-direction: column;
    gap: 0;
    white-space: normal;
}
.menu .nav li {
    border-bottom: var(--rule);
}
.menu .nav a {
    display: block;
    padding: 0.18em 0 0.08em;
    font-family: var(--font-display);
    font-size: clamp(3rem, 15vw, 6rem);
    font-weight: 600;
    line-height: 0.9;
    text-transform: uppercase;
    text-decoration: none;
    color: transparent;
    -webkit-text-stroke: var(--stroke) var(--fg);
    filter: var(--glow);
}
.menu .nav a:hover,
.menu .nav a:active,
.menu .nav-current a {
    color: var(--fg);
}
.menu__foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;
}
html.menu-open {
    overflow: hidden;
}

@media (max-width: 860px) {
    :root {
        --header-h: 58px;
    }
    .site-nav,
    .site-header .status {
        display: none;
    }
    .menu-toggle {
        display: block;
    }
}
@media (min-width: 861px) {
    .menu {
        display: none !important;
    }
}

/* Buttons: hard edges, invert on hover ------------------------------------ */

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 1em 1.4em 0.95em;
    border: var(--rule);
    border-radius: 0;
    background: var(--fg);
    color: var(--fg-contrast);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.button:hover {
    background: transparent;
    color: var(--fg);
}
/* Orange call to action (WhatsApp Community) */
.button--accent {
    border-color: var(--wc-orange);
    background: var(--wc-orange);
    color: var(--wc-ink);
}
.button--accent:hover {
    background: transparent;
    color: var(--wc-orange);
}

/* Photos: blue-tinted while closed, in colour when open or pointed at ----- */

.photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    background: var(--wc-ink);
}
.photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.06);
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tint);
    mix-blend-mode: color;
    opacity: 1;
    transition: opacity 0.7s ease;
    pointer-events: none;
}
.look-warm .photo::after {
    opacity: 0;
}
@media (hover: hover) {
    .photo:hover::after {
        opacity: 0;
    }
    .photo:hover img {
        transform: scale(1.03);
    }
}

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

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 64px);
    padding-block: clamp(14px, 1.6vw, 22px) clamp(48px, 6vw, 96px);
}
.hero__strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--col-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hero__strip li {
    min-width: 0;
}
.hero__title {
    --fill-max: 260;
    --fill-max-h: 58;
    font-size: clamp(3rem, 12.5vw, 12rem);
    text-wrap: wrap;
}
.hero__foot {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 40px;
    align-items: end;
    padding-top: clamp(20px, 2vw, 28px);
    border-top: var(--rule);
}
.hero__clock {
    grid-column: 1 / 7;
    align-self: start;
}
.hero__caption {
    margin-bottom: clamp(14px, 1.6vw, 22px);
}
.hero__text {
    grid-column: 7 / 10;
    align-self: start;
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.22;
}
.hero__media {
    grid-column: 10 / 13;
    aspect-ratio: 4 / 5;
}
/* Without the photo the text moves to the last column */
.hero__foot--no-photo .hero__text {
    grid-column: 8 / 13;
    max-width: 22em;
    justify-self: end;
}

@media (max-width: 860px) {
    .hero__strip {
        grid-template-columns: 1fr 1fr;
        row-gap: 4px;
    }
    .hero__foot {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    .hero__clock,
    .hero__text,
    .hero__media,
    .hero__foot--no-photo .hero__text {
        grid-column: auto;
    }
}

/* The clock (MuseoModerno with tabular figures) */
.clock {
    --leading: 0.8;
    display: flex;
    align-items: flex-start;
    padding-bottom: 1.9rem;
    gap: 0.06em;
    font-size: clamp(2.5rem, 5.6vw, 5.9rem);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    filter: none;
}
.clock__cell {
    position: relative;
}
.clock__num,
.clock__sep {
    filter: var(--glow);
}
.clock__sep {
    opacity: 0.85;
}
.clock__unit {
    position: absolute;
    left: 0;
    top: calc(100% + 0.7rem);
    white-space: nowrap;
    letter-spacing: 0.06em;
    color: var(--fg);
    -webkit-text-stroke: 0;
    font-family: var(--font-body);
    filter: none;
}
.clock.no-days .clock__cell--d,
.clock.no-days .clock__sep--d {
    display: none;
}
.is-open .clock__num {
    color: var(--fg);
    -webkit-text-stroke: 0;
    font-weight: 900;
    filter: var(--glow-hot);
}

/* Ticker ------------------------------------------------------------------ */

.ticker {
    overflow: hidden;
    padding: 0.7em 0 0.62em;
    border-block: var(--rule);
    font-size: clamp(0.95rem, 1.8vw, 1.35rem);
    white-space: nowrap;
}
.ticker__track {
    display: flex;
    width: max-content;
    line-height: 1;
    animation: wc-ticker 60s linear infinite;
    will-change: transform;
}
.ticker.is-scripted .ticker__track {
    animation: none;
}
.ticker__group {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding-right: 0.6em;
}
/* The star is drawn, not typed: phones turn the ✳ character into an emoji */
.ticker__star {
    flex: none;
    width: 0.5em;
    height: 0.5em;
    background: var(--fg);
    -webkit-mask: var(--star) center / contain no-repeat;
    mask: var(--star) center / contain no-repeat;
    --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6v18.8M2.6 12h18.8M5.35 5.35l13.3 13.3M18.65 5.35l-13.3 13.3' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.t-open,
.is-open .t-closed {
    display: none;
}
.is-open .t-open {
    display: inline;
}
@keyframes wc-ticker {
    to {
        transform: translateX(-50%);
    }
}

/* Section heads: label on the first guide, title from the second ---------- */

.section-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 18px;
    align-items: start;
    margin-bottom: clamp(40px, 5vw, 80px);
}
.section-head > .label:first-child {
    grid-column: 1 / 4;
    padding-top: 0.4em;
}
.section-head > .mixed,
.section-head > .page-lead {
    grid-column: 4 / 13;
}
.section-head__link {
    grid-column: 4 / 13;
    justify-self: start;
    text-decoration: none;
}
.section-head__link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}
.section-title {
    font-size: clamp(2.4rem, 5.6vw, 5.6rem);
}
.section-head--page > .mixed {
    grid-column: 1 / 13;
}
.page-title {
    --fill-max: 220;
    --fill-max-h: 60;
    font-size: var(--fs-l);
}
@media (max-width: 860px) {
    .section-head > * {
        grid-column: 1 / -1 !important;
    }
}

/* News: a list of black rows. The newest post gets the orange sticker. -- */

.news-list {
    display: grid;
    gap: 6px;
}
.news-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 6px;
    align-items: center;
    padding: clamp(20px, 2.2vw, 32px) clamp(16px, 1.8vw, 28px);
    background: var(--wc-ink);
    color: var(--wc-white);
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.news-row__date {
    grid-column: 1 / 3;
    grid-row: 1;
    align-self: end;
    font-variant-numeric: tabular-nums;
}
.news-row__tag {
    grid-column: 1 / 3;
    grid-row: 2;
    align-self: start;
    color: var(--muted);
}
.news-row__title {
    grid-column: 3 / 12;
    grid-row: 1 / 3;
    font-size: var(--fs-m);
    transition: filter 0.2s ease;
}
.news-row__arrow {
    grid-column: 12 / 13;
    grid-row: 1 / 3;
    justify-self: end;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.news-row__thumb {
    display: none;
}
.news-row:hover,
.news-row:focus-visible {
    background: var(--wc-ink-hover);
}
.news-row:hover .news-row__title .w,
.news-row:focus-visible .news-row__title .w {
    color: var(--wc-white);
}
.news-row:hover .news-row__title,
.news-row:focus-visible .news-row__title {
    filter: var(--glow-hot);
}
.news-row:hover .news-row__arrow,
.news-row:focus-visible .news-row__arrow {
    transform: translateX(-10px);
}
.news-row:focus-visible {
    outline-offset: 4px;
}

/* The newest post: orange "New" sticker on the edge of the row */
.news-row--new {
    padding-block: clamp(26px, 2.8vw, 40px);
}
.news-row__sticker {
    position: absolute;
    top: 0;
    right: clamp(64px, 8vw, 132px);
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(64px, 6.4vw, 96px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sticker);
    color: var(--sticker-text);
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.25vw, 1.3rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    transform: translateY(-45%) rotate(-14deg);
    transition: transform 0.45s cubic-bezier(0.3, 1.7, 0.5, 1);
    animation: wc-sticker 2.6s ease-in-out infinite;
}
.news-row--new:hover .news-row__sticker {
    transform: translateY(-45%) rotate(8deg) scale(1.1);
}
@keyframes wc-sticker {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sticker-rgb), 0.55); }
    60% { box-shadow: 0 0 0 14px rgba(var(--sticker-rgb), 0); }
}
.news-list:has(.news-row--new) {
    margin-top: clamp(24px, 3vw, 44px);
}

/* Phones and touch screens: date and tag on top, photo in the row */
@media (max-width: 860px), (hover: none) {
    .news-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "date tag"
            "title thumb";
        row-gap: 14px;
        align-items: start;
    }
    .news-row__date { grid-area: date; align-self: start; }
    .news-row__tag { grid-area: tag; justify-self: end; align-self: start; }
    .news-row__title { grid-area: title; font-size: clamp(1.6rem, 6.6vw, 2.6rem); }
    .news-row:not(.has-image) .news-row__title {
        grid-area: auto;
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .news-row__arrow { display: none; }
    .news-row__thumb {
        grid-area: thumb;
        display: block;
        width: clamp(64px, 18vw, 110px);
        aspect-ratio: 4 / 5;
    }
    .news-row--new .news-row__tag {
        padding-right: clamp(64px, 18vw, 90px);
    }
    .news-row__sticker {
        right: 16px;
    }
}

/* Photo that follows the cursor */
.news-float {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 45;
    width: clamp(200px, 19vw, 300px);
    aspect-ratio: 4 / 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    will-change: transform;
}
.news-float .photo {
    width: 100%;
    height: 100%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.news-float .photo img {
    transition: none;
}
.news-float .photo::after {
    opacity: 0;
}
.news-float.is-on {
    opacity: 1;
}
@media (hover: none), (max-width: 860px) {
    .news-float {
        display: none;
    }
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(40px, 5vw, 72px);
}
.pagination .button {
    background: transparent;
    color: var(--fg);
}
.pagination .button:hover {
    background: var(--fg);
    color: var(--fg-contrast);
}
.pagination__info {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Visit ------------------------------------------------------------------- */

.visit {
    border-top: var(--rule);
}
.visit__title {
    font-size: var(--fs-l);
}
.visit__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 32px;
    align-items: start;
}
.visit__media {
    grid-column: 1 / 10;
    aspect-ratio: 3 / 2;
}
.visit__facts {
    grid-column: 10 / 13;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}
.visit__facts > div {
    padding-block: 16px 22px;
    border-top: var(--rule);
}
.visit__facts > div:first-child {
    padding-top: 0;
    border-top: 0;
}
/* Without the photo the facts sit in a row, one per column guide */
.visit__grid--no-photo .visit__facts {
    grid-column: 1 / 13;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--col-gap);
}
.visit__grid--no-photo .visit__facts > div,
.visit__grid--no-photo .visit__facts > div:first-child {
    padding-top: 16px;
    border-top: var(--rule);
}
.visit__facts dt {
    margin-bottom: 0.5em;
    color: var(--muted);
}
.visit__facts dd {
    margin: 0;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.visit__facts dd a {
    text-decoration: none;
}
.visit__facts dd a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}
.visit__facts .is-open dd {
    text-shadow: 0 0 0.35em rgba(var(--glow-rgb), 0.9);
}

/* The address, as big as the page is wide. The whole line is the map link. */
.visit__address {
    display: block;
    margin: clamp(56px, 7vw, 112px) 0 0;
    padding-top: clamp(16px, 1.6vw, 24px);
    border-top: var(--rule);
    text-decoration: none;
}
.visit__address-line {
    display: block;
    font-size: clamp(2.2rem, 9vw, 9rem);
    line-height: var(--leading);
    white-space: nowrap;
}
.visit__directions {
    display: inline-flex;
    gap: 0.6em;
    margin-top: 18px;
    transition: transform 0.25s ease;
}
a.visit__address:hover .visit__address-line {
    color: var(--fg);
    filter: var(--glow-hot);
}
a.visit__address:hover .visit__directions {
    transform: translateX(10px);
}

@media (max-width: 860px) {
    .visit__grid {
        grid-template-columns: 1fr;
    }
    .visit__grid--no-photo .visit__facts {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
    }
    .visit__media,
    .visit__facts {
        grid-column: auto;
    }
    .visit__address-line {
        white-space: normal;
        font-size: clamp(2.4rem, 13vw, 4.5rem);
    }
}

/* Post, page, archive and 404 heads: built like the homepage hero ------- */

.page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 64px);
    padding-block: clamp(14px, 1.6vw, 22px) clamp(40px, 5vw, 80px);
}
.hero__strip a {
    text-decoration: none;
}
.hero__strip a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}
.page-hero__title {
    --fill-max: 210;
    --fill-max-h: 58;
    font-size: var(--fs-l);
    text-wrap: wrap;
}
.page-hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px 48px;
    padding-top: clamp(20px, 2vw, 28px);
    border-top: var(--rule);
}
.page-hero__lead {
    max-width: 34em;
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.25;
}
.page-hero__foot .status {
    margin-left: auto;
}
.page-hero__foot--media {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 32px;
    align-items: start;
}
.page-hero__info {
    grid-column: 1 / 7;
    display: grid;
    gap: 24px;
    justify-items: start;
}
.page-hero__info .status {
    margin-left: 0;
}
.page-hero__media {
    grid-column: 8 / 13;
    margin: 0;
}
.page-hero__media .photo img {
    height: auto;
    max-height: 70vh;
}
@media (max-width: 860px) {
    .page-hero__foot--media {
        grid-template-columns: minmax(0, 1fr);
    }
    .page-hero__info,
    .page-hero__media {
        grid-column: auto;
    }
    .page-hero__media .photo img {
        max-height: 60vh;
    }
}
.error-page .page-hero__inner {
    min-height: min(78svh, 900px);
    align-content: start;
}
.news-archive__list {
    padding-top: 0;
}

/* The text column. Editor cards set to "wide" span the page grid,
   "full width" cards span the whole screen. */
.entry__main {
    padding-block: clamp(48px, 6vw, 104px) clamp(72px, 9vw, 144px);
}
.page-hero + .entry__main {
    padding-top: 0;
}
.canvas {
    --inner: min(100%, var(--max)) - 2 * var(--gutter);
    --col: (var(--inner) - 11 * var(--col-gap)) / 12;
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, calc(var(--col) * 3 + var(--col-gap) * 3))
        [main-start] minmax(0, calc(var(--col) * 6 + var(--col-gap) * 5))
        [main-end] minmax(0, calc(var(--col) * 3 + var(--col-gap) * 3))
        [wide-end] minmax(var(--gutter), 1fr)
        [full-end];
}
.canvas > * {
    grid-column: main-start / main-end;
    min-width: 0;
}
.canvas > .kg-width-wide,
.canvas > .kg-gallery-card {
    grid-column: wide-start / wide-end;
}
.canvas > .kg-width-full,
.canvas > .ticker {
    grid-column: full-start / full-end;
}
.canvas > .kg-width-full img {
    width: 100%;
}
/* Cards with a background (header, sign-up, call to action): the colour runs
   edge to edge, the content stays on the page grid, centred */
.canvas > :is(.kg-header-card, .kg-signup-card, .kg-cta-card).kg-width-full {
    padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) !important;
    padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) !important;
}
.canvas > :is(.kg-header-card, .kg-signup-card, .kg-cta-card):is(.kg-width-full, .kg-width-wide) {
    padding-block: clamp(56px, 9vw, 144px) !important;
}
.canvas > .kg-width-wide:is(.kg-header-card, .kg-signup-card, .kg-cta-card) {
    padding-inline: clamp(24px, 4vw, 64px) !important;
}
.canvas > :is(.kg-header-card, .kg-signup-card, .kg-cta-card):is(.kg-width-full, .kg-width-wide) > * {
    width: 100%;
    max-width: calc(50% - var(--col-gap) / 2); /* same as the text column */
    margin-inline: auto !important;
    padding-inline: 0 !important;
}
.canvas > :is(.kg-header-card, .kg-signup-card).kg-content-wide > *,
.canvas > :is(.kg-header-card, .kg-signup-card):has(img) > * {
    max-width: none;
}
@media (max-width: 860px) {
    .canvas > :is(.kg-header-card, .kg-signup-card, .kg-cta-card):is(.kg-width-full, .kg-width-wide) > * {
        max-width: none;
    }
}
.canvas + .canvas {
    margin-top: clamp(40px, 5vw, 72px);
}
@media (max-width: 860px) {
    .canvas {
        grid-template-columns:
            [full-start] var(--gutter)
            [wide-start main-start] minmax(0, 1fr)
            [main-end wide-end] var(--gutter)
            [full-end];
    }
}

.entry__media {
    margin: 0;
}
.entry__media .photo img {
    height: auto;
}

/* Share: plain links in black boxes */
.share {
    display: grid;
    gap: 14px;
}
.share {
    padding-top: 20px;
    border-top: var(--rule);
}
.share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.share__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.95em 1.1em;
    border: 0;
    border-radius: 0;
    background: var(--wc-ink);
    color: var(--wc-white);
    font: inherit;
    font-size: var(--fs-label);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.share__btn[hidden] {
    display: none;
}
a.share__btn::after {
    content: "\2197";
    font-size: 1.1em;
    letter-spacing: 0;
}
.share__btn:hover {
    background: var(--wc-white);
    color: var(--wc-ink);
}
.share__copy.is-done {
    background: var(--wc-orange);
    color: var(--wc-ink);
}
.share__btn {
    flex: 1 1 auto;
}
@media (max-width: 860px) {
    .share__btn {
        flex: 1 1 calc(50% - 6px);
    }
}

/* Next-club banner (posts and pages) */
.club-banner {
    padding-bottom: clamp(24px, 4vw, 64px);
}
.club-banner__box {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 32px;
    align-items: end;
    padding: clamp(24px, 3.4vw, 56px);
    background: var(--wc-ink);
    transition: box-shadow 0.6s ease;
}
.club-banner__box.is-open {
    box-shadow: 0 0 80px rgba(243, 122, 32, 0.45);
}
.club-banner__clock {
    grid-column: 1 / 9;
}
.club-banner__clock > .label {
    margin-bottom: clamp(14px, 1.6vw, 22px);
}
.club-banner .clock {
    font-size: clamp(2.5rem, 5.6vw, 6rem);
}
.club-banner__side {
    grid-column: 9 / 13;
    display: grid;
    gap: 22px;
    justify-items: start;
}
.club-banner__where {
    margin: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.3;
}
@media (max-width: 860px) {
    .club-banner__box {
        grid-template-columns: minmax(0, 1fr);
    }
    .club-banner__clock,
    .club-banner__side {
        grid-column: auto;
    }
}

/* Content from the Ghost editor ------------------------------------------- */

.gh-content {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    line-height: 1.65;
    overflow-wrap: break-word;
}
/* Dividers from the editor become the moving banner (see main.js) */
.gh-content > .ticker {
    margin-block: clamp(40px, 6vw, 96px);
}
.gh-content > * {
    margin-top: 0;
    margin-bottom: 0;
}
.gh-content > * + * {
    margin-top: 1.25em;
}
.gh-content > :is(h2, h3, h4) {
    margin-top: 2.2em;
}
.gh-content :is(h2, h3, h4) {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: var(--leading);
    text-transform: uppercase;
}
.gh-content h2 {
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem);
}
.gh-content h3 {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
}
.gh-content h4 {
    font-size: 1.25rem;
}
.gh-content a {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}
.gh-content a:hover {
    text-decoration-thickness: 3px;
}
.gh-content strong {
    font-weight: 700;
}
.gh-content :is(ul, ol) {
    padding-left: 1.3em;
}
.gh-content li + li {
    margin-top: 0.45em;
}
.gh-content blockquote:not(.kg-blockquote-alt) {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1em;
    border-left: 4px solid var(--fg);
    font-size: 1.3rem;
    font-weight: 600;
}
.gh-content .kg-blockquote-alt {
    margin-left: 0;
    margin-right: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-style: normal;
    font-weight: 600;
    line-height: var(--leading);
    text-align: left;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: var(--stroke) var(--fg);
    filter: var(--glow);
}
.gh-content hr {
    height: 2px;
    border: 0;
    background: var(--fg);
}
.gh-content figure {
    margin-left: 0;
    margin-right: 0;
}
.gh-content img {
    display: block;
}
.gh-content figcaption {
    margin-top: 0.7em;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
}
.gh-content :not(pre) > code {
    padding: 0.1em 0.35em;
    background: var(--soft);
    font-size: 0.9em;
}
.gh-content pre {
    overflow-x: auto;
    padding: 1em 1.2em;
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.9rem;
}
.gh-content table {
    width: 100%;
    border-collapse: collapse;
}
.gh-content :is(th, td) {
    padding: 0.5em 0.6em;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
}
.gh-content .kg-button-card .kg-btn {
    border-radius: 0;
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
}

/* Ghost editor cards in the club look: hard edges, poster type, brand colours.
   Colours you pick in the editor are kept, except pure black becomes #231f20,
   pure white #efefef, and the accent colour (blue, like the page) becomes orange. */
.gh-content :is(.kg-btn, .kg-product-card-button, .kg-signup-card-button, .kg-cta-button, .kg-header-card-button) {
    border-radius: 0 !important;
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0;
}
/* (the button's own accent class: a white button on an accent card stays white) */
.gh-content :is(.kg-btn-accent, .kg-header-card-button.kg-style-accent) {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
}
.gh-content .kg-btn:hover {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(239, 239, 239, 0.5));
}
.gh-content :is(.kg-signup-card-input, .kg-signup-card-fields, .kg-header-card input, .kg-callout-card, .kg-toggle-card, .kg-bookmark-container, .kg-product-card-container, .kg-file-card-container, .kg-audio-card, .kg-cta-card, .kg-header-card, .kg-signup-card, .kg-image-card img, .kg-gallery-image img, .kg-bookmark-thumbnail img) {
    border-radius: 0 !important;
}
.gh-content :is(.kg-callout-card-grey, .kg-callout-card-blue, .kg-callout-card-green, .kg-callout-card-yellow, .kg-callout-card-red, .kg-callout-card-pink, .kg-callout-card-purple),
.gh-content :is(.kg-toggle-card, .kg-bookmark-card .kg-bookmark-container, .kg-product-card-container, .kg-file-card-container, .kg-audio-card) {
    border: 0 !important;
    background: var(--wc-ink) !important;
    color: var(--wc-white) !important;
    box-shadow: none !important;
}
.gh-content .kg-callout-card {
    padding: clamp(20px, 2.4vw, 32px);
}
.gh-content .kg-callout-card-accent {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
}
.gh-content .kg-callout-card-white {
    background: var(--wc-white) !important;
    color: var(--wc-ink) !important;
}
.gh-content .kg-callout-text {
    font-weight: 600;
}
.gh-content .kg-toggle-card {
    padding: 20px 24px;
}
.gh-content .kg-toggle-card svg {
    color: var(--wc-white);
}
.gh-content :is(.kg-bookmark-description, .kg-bookmark-metadata, .kg-file-card-caption, .kg-file-card-metadata) {
    color: var(--muted) !important;
}
.gh-content :is(.kg-header-card, .kg-signup-card, .kg-cta-card, .kg-callout-card)[data-background-color="#000000"],
.gh-content :is(.kg-header-card, .kg-signup-card, .kg-cta-card, .kg-callout-card)[data-background-color="#000"],
.gh-content [style*="background-color: #000000"],
.gh-content [style*="background-color: rgb(0, 0, 0)"],
.gh-content .kg-header-card.kg-style-dark {
    background-color: var(--wc-ink) !important;
}
.gh-content :is(.kg-header-card, .kg-signup-card, .kg-cta-card)[data-background-color="#ffffff"],
.gh-content [style*="background-color: #ffffff"],
.gh-content .kg-header-card.kg-style-light {
    background-color: var(--wc-white) !important;
}
.gh-content [style*="color: #000000"] {
    color: var(--wc-ink) !important;
}
.gh-content :is(.kg-header-card, .kg-signup-card).kg-style-accent,
.gh-content :is(.kg-header-card, .kg-signup-card)[data-background-color="accent"] {
    background-color: var(--accent) !important;
}

/* Headings inside cards: poster type that scales with the screen (main.js also
   shrinks anything that would still stick out) */
.gh-content :is(.kg-toggle-heading-text, .kg-bookmark-title, .kg-product-card-title, .kg-file-card-title, .kg-audio-title) {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
    color: inherit;
}
.gh-content :is(.kg-header-card-heading, .kg-header-card h2, .kg-signup-card-heading, .kg-cta-card h2) {
    font-family: var(--font-display) !important;
    line-height: var(--leading) !important;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    overflow-wrap: normal;
    hyphens: none;
}
.gh-content :is(.kg-header-card-heading, .kg-header-card h2, .kg-signup-card-heading) {
    font-size: clamp(2.2rem, 1rem + 5.5vw, 7rem) !important;
}
.gh-content :is(.kg-header-card-subheading, .kg-header-card h3, .kg-signup-card-subheading) {
    font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem) !important;
    line-height: 1.3 !important;
}

/* Sign-up card: Ghost draws a white field but sets no text colour, and the
   site's dark colour scheme made the typed address white on white.
   Black #231f20 on white #efefef, like the rest of the brand. */
.gh-content .kg-signup-card-fields {
    border: 2px solid var(--wc-ink) !important;
    background: var(--wc-white) !important;
}
.gh-content .kg-signup-card-fields:focus-within {
    outline: 3px solid var(--wc-orange);
    outline-offset: 2px;
}
.gh-content .kg-signup-card-input {
    color-scheme: light;
    background: var(--wc-white) !important;
    color: var(--wc-ink) !important;
    -webkit-text-fill-color: var(--wc-ink);
    caret-color: var(--wc-ink);
    font-family: var(--font-body);
    font-weight: 600;
}
.gh-content .kg-signup-card-input::placeholder {
    color: rgba(35, 31, 32, 0.55);
    -webkit-text-fill-color: rgba(35, 31, 32, 0.55);
    opacity: 1;
}
.gh-content .kg-signup-card-input:-webkit-autofill {
    -webkit-text-fill-color: var(--wc-ink);
    box-shadow: inset 0 0 0 100px var(--wc-white);
}
/* Phones: the address gets the full width, the button sits below it */
@media (max-width: 600px) {
    .gh-content .kg-signup-card-fields {
        flex-direction: column;
        gap: 3px;
    }
    .gh-content .kg-signup-card-input {
        margin: 0;
    }
    .gh-content .kg-signup-card-button {
        justify-content: center;
        min-height: 48px;
    }
    .canvas > .kg-signup-card:is(.kg-width-wide, .kg-width-full) .kg-signup-card-text {
        padding-inline: 0;
    }
}

/* Editor card widths are handled by .canvas above */
.kg-width-wide img,
.kg-width-full img {
    width: 100%;
}

/* Footer (always #231f20) & newsletter -------------------------------------- */

.site-footer {
    position: relative;
    z-index: 1;
    background: var(--wc-ink);
    color: var(--wc-white);
    --glow-rgb: 239, 239, 239;
}
.site-footer .wordmark {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.signup {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 28px;
    padding-block: var(--space) clamp(64px, 8vw, 128px);
}
.signup > .label {
    grid-column: 1 / 4;
    padding-top: 0.4em;
}
.signup__title {
    grid-column: 4 / 13;
    font-size: clamp(2.4rem, 5.6vw, 5.6rem);
}
/* WhatsApp Community: one orange button, the privacy line under it */
.community__join {
    grid-column: 4 / 11;
    margin-top: 12px;
}
.signup__note {
    grid-column: 4 / 10;
    max-width: 36em;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
.signup__note strong {
    font-weight: 700;
    color: var(--wc-white);
}
.signup__note a {
    color: var(--wc-white);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
@media (max-width: 860px) {
    .signup > * {
        grid-column: 1 / -1 !important;
    }
}

/* WEDNESDAY across the full width; letters light up under the cursor */
.footer-mark {
    display: block;
    padding: 0 max(var(--gutter), env(safe-area-inset-left, 0px)) clamp(24px, 3vw, 48px);
    overflow: hidden;
    text-decoration: none;
}
.footer-mark__word {
    display: block;
    font-size: 17.5vw;
    line-height: 0.82;
    white-space: nowrap;
}
.footer-mark .ch {
    transition: color 0.9s ease, filter 0.9s ease;
}
.footer-mark .ch.is-hot {
    color: var(--wc-white);
    transition: color 0.06s ease, filter 0.06s ease;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 36px;
    padding-block: 28px max(36px, env(safe-area-inset-bottom, 0px));
    border-top: 2px solid rgba(255, 255, 255, 0.9);
}
.site-footer__brand {
    line-height: 0;
}
.site-footer__nav .nav {
    flex-wrap: wrap;
    gap: 6px 28px;
}
.site-footer__copy {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 860px) {
    .site-footer__copy {
        width: 100%;
        margin-left: 0;
    }
}

/* Error ------------------------------------------------------------------- */

.error-page .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    justify-items: start;
}

/* Page colours ------------------------------------------------------------ */
/* The templates Orange, White and Black give a post or page a fixed colour.
   The internal tags #orange, #white and #black do the same on any template
   (e.g. Full width + #orange). Fixed-colour pages don't switch to the warm
   look on Wednesday nights; the clock and status still say "Open now". */

body:is(.wc-orange, .wc-white, .wc-black, .tag-hash-orange, .tag-hash-white, .tag-hash-black) {
    --page-color: fixed; /* read by main.js */
    --header-bg: var(--bg);
    --menu-bg: var(--bg);
}

/* Orange and white: black type, outlines and rules, no glow */
body:is(.wc-orange, .wc-white, .tag-hash-orange, .tag-hash-white) {
    color-scheme: light;
    --fg: var(--wc-ink);
    --fg-contrast: var(--wc-white);
    --rule: 2px solid var(--wc-ink);
    --guide: rgba(35, 31, 32, 0.14);
    --muted: rgba(35, 31, 32, 0.74);
    --soft: rgba(35, 31, 32, 0.08);
    --hairline: rgba(35, 31, 32, 0.3);
    --glow: none;
    --glow-hot: none;
}
body:is(.wc-orange, .tag-hash-orange) {
    --bg: var(--wc-orange);
    --tint: var(--wc-orange);
    --glow-rgb: 243, 122, 32;
    /* orange is taken: the accent colour and the NEW sticker turn blue */
    --accent: var(--wc-blue);
    --on-accent: var(--wc-white);
    --sticker: var(--wc-blue);
    --sticker-text: var(--wc-white);
    --sticker-rgb: 0, 33, 224;
}
body:is(.wc-white, .tag-hash-white) {
    --bg: var(--wc-white);
    --tint: var(--wc-ink); /* photos in black and white */
    --glow-rgb: 239, 239, 239;
}

/* Black: white type as usual; the black boxes get a white edge */
body:is(.wc-black, .tag-hash-black) {
    --bg: var(--wc-ink);
    --tint: var(--wc-ink);
}
body:is(.wc-black, .tag-hash-black) :is(.news-row, .club-banner__box, .share__btn),
body:is(.wc-black, .tag-hash-black) .gh-content :is(.kg-callout-card-grey, .kg-callout-card-blue, .kg-callout-card-green, .kg-callout-card-yellow, .kg-callout-card-red, .kg-callout-card-pink, .kg-callout-card-purple, .kg-toggle-card, .kg-bookmark-container, .kg-product-card-container, .kg-file-card-container, .kg-audio-card) {
    outline: 2px solid var(--wc-white);
    outline-offset: -2px;
}
body:is(.wc-black, .tag-hash-black) .site-footer {
    border-top: var(--rule);
}

/* Full width template: the content spans the page grid (forms, embeds,
   galleries); running text keeps a readable line length */
.entry--full .canvas > * {
    grid-column: wide-start / wide-end;
}
.entry--full .canvas > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote:not(.kg-blockquote-alt), pre, table) {
    max-width: 46rem;
}
.entry--full .canvas > :is(.kg-width-full, .ticker) {
    grid-column: full-start / full-end;
}
.entry--full .canvas > :is(iframe, .heyform__embed) {
    width: 100%;
}

/* Page transitions: the new page flickers on like a neon tube ------------- */

@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: wc-vt-out 0.18s ease-in both;
}
::view-transition-new(root) {
    animation: wc-vt-in 0.55s linear both;
}
@keyframes wc-vt-out {
    to { opacity: 0; }
}
@keyframes wc-vt-in {
    0% { opacity: 0; }
    14% { opacity: 0.9; }
    22% { opacity: 0.15; }
    34% { opacity: 1; }
    42% { opacity: 0.55; }
    56%, 100% { opacity: 1; }
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    body::after,
    .news-row__sticker,
    .ticker__track,
    .status__dot,
    .mixed .solid {
        animation: none !important;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
    .button,
    .photo img,
    .news-row__arrow,
    .visit__directions {
        transition: none;
    }
}