:root {
    /* Straight from the logo artwork. */
    --brand-red: #a91e38;
    --brand-blue: #254f83;

    /* Dark theme: the logo blue itself as the ground, with the surfaces
       stepped darker and lighter around it. */
    --bg: #254f83;
    --bg-alt: #1d4069;
    --card: #2b5a93;
    --card-alt: #3266a5;
    --border: #40719f;
    --text: #f2f6fd;
    --muted: #c2d5ec;
    /* Pale blue reads as a link on a mid-blue ground; the lifted logo blue
       would not. */
    --accent: #b6d3f4;
    --accent-dark: #9cc0e8;
    --accent-soft: rgba(255,255,255,0.12);
    /* The logo red, likewise lifted, for calls to action. */
    --cta: #cf3a53;
    --cta-dark: #b62c44;
    --cta-ink: #ffffff;
    --gold: #f0c05a;
    --on-bg: #f4f8fe;
    --on-bg-muted: #c6d8ef;
    --rule: rgba(255,255,255,0.16);
    --ink: #16233d;
    --line-light: #e2e8f4;
    /* Header and footer bar. */
    --bar: rgb(250, 250, 255);
    --radius: 0;
    --shadow: 0 8px 24px rgba(0,0,0,0.35);
    --page: 1280px;
    --gutter: 24px;
}

/* Light theme. The switch in the header stores the choice, so only these
   tokens are redefined and every component follows automatically. */
:root[data-theme="light"] {
    /* Light theme: the same blue, warmed down to paper. */
    --bg: #ffffff;
    --bg-alt: #ffffff;
    --card: #ffffff;
    --card-alt: #e7edf8;
    --border: #d7e0ef;
    --text: #16233d;
    --muted: #5a6789;
    --accent: #2b5794;
    --accent-dark: #1e4272;
    --accent-soft: rgba(43,87,148,0.10);
    --cta: #a81f38;
    --cta-dark: #8d1830;
    --gold: #c08a00;
    /* Back to dark type: at 5% the ground is a tint, not a colour to sit
       white text on. */
    --on-bg: #16233d;
    --on-bg-muted: #5a6789;
    --rule: #d7e0ef;
}
:root[data-theme="light"] .card {
    border-color: #dfe5f1;
    box-shadow: 0 2px 10px rgba(20,36,72,0.07);
}
:root[data-theme="light"] .btn-primary { color: #ffffff; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

.container {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.accent { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
}
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.btn-primary { background: var(--cta); color: var(--cta-ink); }
.btn-primary:hover { background: var(--cta-dark); }
.btn-outline { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--accent-soft); }
.btn-ghost { color: var(--text); border-color: var(--border); background: transparent; }
.btn-ghost:hover { background: var(--card-alt); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Site header (light bar, carries the logo) ---------- */
.site-header {
    background: var(--bar);
    border-bottom: 1px solid var(--line-light);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 58px;
}
.logo { display: flex; align-items: center; }
.logo img { height: 35px; width: auto; }
.logo .on-blue { display: none; }
.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a {
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: #16345f; }
.main-nav a.active { color: var(--brand-blue); border-color: var(--brand-blue); }
.header-actions { display: flex; gap: 10px; align-items: center; }

/* Theme switch: shows the theme it will move you to, not the current one. */
.theme-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.site-header .theme-toggle { border-color: #d5dae8; color: var(--ink); }
.site-header .theme-toggle:hover { color: var(--brand-red); border-color: var(--brand-red); }
.theme-icon { display: none; line-height: 0; }
.theme-icon.light { display: block; }
:root[data-theme="light"] .theme-icon.light { display: none; }
:root[data-theme="light"] .theme-icon.dark { display: block; }
.site-header .btn { padding: 7px 16px; font-size: 0.85rem; }
.site-header .btn-ghost { color: var(--brand-blue); border-color: rgba(37,79,131,0.4); }
.site-header .btn-ghost:hover { background: #f3f5fa; }
.site-header .btn-outline { color: var(--brand-blue); border-color: var(--brand-blue); }
.site-header .btn-outline:hover { background: rgba(37,79,131,0.08); }

/* ---------- Hero slider ---------- */
.hero {
    position: relative;
    overflow: hidden;
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--page) - 2 * var(--gutter));
    /* A breath between the bar and the banner, rather than the banner running
       straight into the nav. */
    margin: 10px auto 0;
    height: clamp(240px, 21vw, 330px);
    background: #1a3a61;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .7s ease;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* On very wide screens the band crops the photograph top and bottom, so
       bias the crop upward and keep the performer's head in frame. */
    object-position: 50% 22%;
}
.hero-slide::after {
    /* A single flat scrim, just enough for the headline to hold. No fade into
       the page: that washed the bottom of the photograph out. */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11,20,37,0.42);
}
.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    /* Fills the banner exactly, with matching padding on all four sides, so
       the headline sits dead centre left to right. The heavier top padding
       drops the block slightly below the middle, clear of the arrows. */
    padding: 56px 76px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}
.hero-content h1 {
    margin: 0;
    /* Always white: the headline sits on a photograph, not on the page. */
    color: #fff;
    font-size: clamp(1.5rem, 2.9vw, 2.4rem);
    line-height: 1.15;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 3px 18px rgba(0,0,0,0.6);
}
.btn-hero {
    font-size: 0.9rem;
    padding: 12px 28px;
    border-radius: 0;
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 4px;
    border-radius: 50%;
    background: rgba(10,14,26,0.42);
    border: 1px solid rgba(255,255,255,0.38);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.hero-arrow:hover { background: rgba(10,14,26,0.72); border-color: #fff; }
.hero-arrow.prev { left: 14px; }
.hero-arrow.next { right: 14px; }

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 9px;
}
.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    background: transparent;
    cursor: pointer;
}
.hero-dot.is-active { background: var(--accent); border-color: var(--accent); }

/* ---------- Category strip ---------- */
/* A row of what the platform covers, sitting between the banner and the
   sections: icon over label, evenly spread, wrapping on narrow screens. */
.category-strip {
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--page) - 2 * var(--gutter));
    margin: 0 auto;
    padding: 28px 0 26px;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
}
.category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 6px 10px;
    max-width: 118px;
    justify-self: center;
    width: 100%;
    /* A hairline box around icon and label, lifted off the page by a soft
       shadow rather than a heavy rule. */
    border: 1px solid rgba(37,79,131,0.28);
    border-radius: 0;
    background: var(--bg-alt);
    text-align: center;
    box-shadow: 0 1px 3px rgba(18,34,68,0.08), 0 4px 12px rgba(18,34,68,0.06);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.category .ico {
    width: 38px;
    height: 38px;
    background-image: var(--ico);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.category .label {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--brand-blue);
}
a.category:hover {
    transform: translateY(-2px);
    border-color: rgba(169,30,56,0.55);
    box-shadow: 0 2px 6px rgba(18,34,68,0.10), 0 10px 22px rgba(18,34,68,0.16);
}
/* The logo's GIG red, on the icon and the label together. */
a.category:hover .ico { background-image: var(--ico-hover); }
a.category:hover .label { color: var(--brand-red); }
.category.is-static { cursor: default; }

@media (max-width: 1100px) {
    .category-strip { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 700px) {
    .category-strip { grid-template-columns: repeat(3, 1fr); }
    .category .ico { width: 34px; height: 34px; }
    .category .label { font-size: 0.66rem; }
}

/* ---------- Sections ---------- */
.section { padding: 32px 0; }

/* Headings share one baseline across a row, so the cards below them line up
   whether or not a column carries a subtitle. */
.section-head {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rule);
    text-align: center;
}
.section-head h2 { margin: 0; font-size: 1.3rem; color: var(--on-bg); }
.section-head::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1px;
    width: 62px;
    height: 3px;
    border-radius: 0;
    background: var(--cta);
}

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Column rows keep the same left and right edge as the header and footer. */
.sections-row {
    /* Same box as the banner, so the row's top rule ends exactly where the
       banner does instead of poking out into the gutters. */
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--page) - 2 * var(--gutter));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule);
    /* Outer rules as well as the ones between the columns, so the row reads as
       a framed block rather than three columns floating in the gutter. */
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-top: 0;
}
.sections-row-wide { grid-template-columns: 2fr 1fr; }
/* A little air between stacked rows so they read as two blocks, not one grid. */
.sections-row + .sections-row { margin-top: 22px; }
.sections-row > .section {
    padding: 18px 30px 32px;
    border-right: 1px solid var(--rule);
}
.sections-row > .section:last-child { border-right: none; }

/* ---------- Homepage panels ---------- */
/* One per tile in the category strip. The scroll offset keeps a heading clear
   of the sticky header when a tile jumps to it. */
.panel {
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--page) - 2 * var(--gutter));
    margin: 0 auto;
    padding: 34px 0 38px;
    border-top: 1px solid var(--rule);
    scroll-margin-top: 74px;
}
.panel-lead {
    max-width: 62ch;
    margin: 0 auto 20px;
    text-align: center;
    color: var(--muted);
}
.panel-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}
.panel-points li {
    padding: 12px 16px 12px 34px;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-alt);
    font-size: 0.86rem;
}
.panel-points li::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--cta);
}
.panel-action { text-align: center; margin: 20px 0 0; }

/* Anchors from the strip glide rather than jump. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---------- Cards ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 16px;
}

.gig-card { display: flex; gap: 14px; align-items: flex-start; }
.gig-card .thumb {
    width: 74px;
    height: 74px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
}
.gig-card .body { flex: 1; min-width: 0; }
.gig-card h3 { margin: 0 0 5px; font-size: 1rem; line-height: 1.3; }
.gig-card p { margin: 2px 0; font-size: 0.85rem; }
.gig-card .meta { color: var(--muted); }
.card .actions { margin-top: 12px; }

.talent-card { display: flex; gap: 14px; align-items: flex-start; }
.talent-card .avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.talent-card .body { flex: 1; min-width: 0; }
.talent-card h3 { margin: 0 0 5px; font-size: 1rem; }
.talent-card p { margin: 2px 0; font-size: 0.85rem; color: var(--muted); }
.stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 1px; }

/* Venue rows put the room's photograph on the right, as in the reference. */
.venue-card { display: flex; gap: 14px; align-items: center; }
.venue-card .body { flex: 1; min-width: 0; }
.venue-card h3 { margin: 0 0 5px; font-size: 1rem; }
.venue-card p { margin: 2px 0; font-size: 0.85rem; color: var(--muted); }
.venue-card .shot {
    width: 94px;
    height: 74px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
}

.showcase-card { padding: 0; overflow: hidden; }
.showcase-card .shot { width: 100%; height: 170px; object-fit: cover; }
.showcase-card .body { padding: 16px; }
.showcase-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.showcase-card p { margin: 4px 0; font-size: 0.85rem; color: var(--muted); }

/* Full-width listing cards on the interior pages. */
.venue-card.stacked { display: block; padding: 0; overflow: hidden; }
.venue-card.stacked .shot { width: 100%; height: 150px; border-radius: 0; }
.venue-card.stacked .body { padding: 16px; }

/* ---------- Module sections on the homepage ---------- */
/* Each module gets a screen of its own: copy and steps beside a photograph
   with a small mock of the interface, then figures drawn from live data. */
.module-panel {
    min-height: calc(100vh - 58px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px 0;
}
.module-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.module-tagline {
    margin: 0 0 12px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}
.module-body { margin: 0 0 22px; color: var(--muted); line-height: 1.7; }
.module-steps-list {
    counter-reset: step;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 24px;
}
.module-steps-list li {
    counter-increment: step;
    position: relative;
    padding-left: 44px;
}
.module-steps-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cta);
    color: var(--cta-ink);
    font-weight: 700;
    font-size: 0.85rem;
}
.module-steps-list strong { display: block; font-size: 0.98rem; margin-bottom: 2px; }
.module-steps-list span { font-size: 0.86rem; color: var(--muted); line-height: 1.6; }
.module-more { margin: 0; }

.module-visual { position: relative; }
.module-visual img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 0;
}
/* The mock sits over the photograph, as a screen would in a case study. */
.module-preview {
    position: absolute;
    right: -10px;
    bottom: -18px;
    width: 232px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    border-radius: 0;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(14,30,60,0.22);
    font-size: 0.78rem;
}
.preview-head { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.preview-field {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
}
.preview-field em { font-style: normal; color: var(--text); font-weight: 600; }
.preview-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--border);
}
.preview-row:last-of-type { border-bottom: none; }
.preview-row em { font-style: normal; }
.preview-row b { font-weight: 700; color: var(--brand-blue); }
.preview-row.is-muted { color: var(--muted); }
.preview-row.is-done b { color: var(--cta); }
.preview-btn {
    margin-top: 2px;
    padding: 8px 10px;
    border-radius: 0;
    background: var(--cta);
    color: var(--cta-ink);
    text-align: center;
    font-weight: 700;
}
.preview-foot { font-size: 0.72rem; color: var(--muted); }

.module-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid var(--rule);
}
.stat { text-align: center; }
.stat-value {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--brand-blue);
    line-height: 1.1;
}
.stat-label { font-size: 0.8rem; color: var(--muted); }

@media (max-width: 900px) {
    .module-panel { min-height: 0; }
    .module-split { grid-template-columns: 1fr; gap: 28px; }
    .module-visual img { height: 260px; }
    .module-preview { position: static; width: auto; margin-top: 12px; box-shadow: none; }
    .module-stats { grid-template-columns: 1fr; gap: 18px; }
}

/* Each module below is laid out differently on purpose; only the heading, the
   figures strip and the Learn more link are shared. */

/* Registration: photograph left, form right. */
.module-split.reversed .module-visual { order: -1; }
.reg-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 330px;
    padding: 16px;
    margin-bottom: 22px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-alt);
    box-shadow: 0 8px 22px rgba(14,30,60,0.08);
    font-size: 0.82rem;
}
.reg-head { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.reg-field {
    display: flex;
    justify-content: space-between;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--muted);
}
.reg-field em { font-style: normal; color: var(--text); font-weight: 600; }
.reg-btn {
    padding: 9px 10px;
    border-radius: 0;
    background: var(--cta);
    color: var(--cta-ink);
    text-align: center;
    font-weight: 700;
}
.reg-note { font-size: 0.74rem; color: var(--muted); }

/* Ticketing: priced tiers across the width. */
.module-lead-center {
    max-width: 76ch;
    margin: 0 auto 26px;
    text-align: center;
    font-weight: 700;
    color: var(--text);
}
.module-lead-center .muted { font-weight: 400; }
.tier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier {
    position: relative;
    padding: 22px 18px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-alt);
    text-align: center;
}
.tier.is-live { border-color: var(--cta); box-shadow: 0 8px 22px rgba(169,30,56,0.12); }
.tier-name { display: block; font-size: 0.82rem; color: var(--muted); }
.tier-price { display: block; margin: 6px 0 4px; font-size: 2rem; font-weight: 800; color: var(--brand-blue); }
.tier-note { display: block; font-size: 0.78rem; color: var(--muted); }
.tier-flag {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: 0;
    background: var(--cta);
    color: var(--cta-ink);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.tier-foot, .kit-foot {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    margin-top: 28px;
}
.tier-foot .module-steps-list, .kit-foot .module-steps-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
}

/* Check-in: a dark panel, because it is used with the lights down. */
.door-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: center;
    padding: 34px;
    border-radius: 0;
    background: #101b30;
    color: #eaf1fc;
}
.door-panel .module-tagline { color: #fff; }
.door-panel .module-body { color: #a9bcdd; }
.door-list {
    padding: 16px;
    border-radius: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 0.86rem;
}
.door-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9fb4d8;
}
.door-count { color: var(--gold); }
.door-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.door-row:last-of-type { border-bottom: none; }
.door-row.is-done { color: #9fb4d8; }
.door-row.is-done b { color: #6ee7c8; }
.door-action {
    padding: 5px 12px;
    border-radius: 0;
    background: var(--cta);
    color: var(--cta-ink);
    font-size: 0.76rem;
}
.door-bar {
    height: 6px;
    margin-top: 14px;
    border-radius: 0;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
}
.door-bar span { display: block; height: 100%; background: var(--gold); }

/* Ecommerce: the actual stock. */
.shop-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shop-mini {
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-alt);
    display: flex;
    flex-direction: column;
}
.shop-mini img { width: 100%; height: 92px; object-fit: cover; }
.shop-name { padding: 10px 12px 0; font-size: 0.85rem; font-weight: 600; }
.shop-price { padding: 2px 12px 12px; font-size: 0.85rem; font-weight: 700; color: var(--brand-blue); }
.shop-all {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--brand-blue);
    padding: 8px;
}
.shop-all:hover { color: var(--cta); }

/* Equipment: an inventory sheet. */
.kit-sheet {
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-alt);
    font-size: 0.86rem;
}
.kit-head, .kit-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr 0.8fr;
    gap: 14px;
    padding: 11px 16px;
    align-items: center;
}
.kit-head {
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--card-alt);
}
.kit-row { border-top: 1px solid var(--border); }
.kit-status {
    justify-self: start;
    padding: 3px 10px;
    border-radius: 0;
    font-size: 0.74rem;
    font-weight: 600;
}
.kit-status.is-out { background: rgba(169,30,56,0.10); color: var(--cta); }
.kit-status.is-booked { background: rgba(37,79,131,0.10); color: var(--brand-blue); }
.kit-status.is-service { background: rgba(192,138,0,0.14); color: #8a6300; }
.kit-status.is-free { background: rgba(20,120,90,0.12); color: #147a5a; }

/* Payments: the split, drawn as a split. */
.split-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-alt);
    box-shadow: 0 10px 26px rgba(14,30,60,0.10);
}
.split-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.split-head b { color: var(--brand-blue); }
.split-row {
    display: grid;
    grid-template-columns: 116px 1fr 56px;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.85rem;
}
.split-party em { font-style: normal; color: var(--muted); }
.split-bar { height: 10px; border-radius: 0; background: var(--card-alt); overflow: hidden; }
.split-bar span { display: block; height: 100%; border-radius: 0; background: var(--brand-blue); }
.split-row:nth-child(3) .split-bar span { background: var(--cta); }
.split-row:nth-child(4) .split-bar span { background: var(--gold); }
.split-row b { text-align: right; }
.split-foot { padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--muted); }

@media (max-width: 900px) {
    .tier-row { grid-template-columns: 1fr; }
    .tier-foot, .kit-foot { grid-template-columns: 1fr; gap: 18px; }
    .tier-foot .module-steps-list, .kit-foot .module-steps-list { grid-template-columns: 1fr; }
    .door-panel { grid-template-columns: 1fr; padding: 22px; }
    .kit-head, .kit-row { grid-template-columns: 1.6fr 1fr; }
    .kit-head span:last-child, .kit-row .kit-status { grid-column: 2; justify-self: end; }
}

/* ---------- Module pages ---------- */
.module-hero {
    position: relative;
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--page) - 2 * var(--gutter));
    margin: 10px auto 0;
    height: clamp(190px, 17vw, 260px);
    overflow: hidden;
    border-radius: 0;
}
.module-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}
.module-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11,20,37,0.52);
}
.module-hero-text {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 40px;
    text-align: center;
    color: #fff;
}
.module-hero-text h1 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.2rem); text-transform: uppercase; letter-spacing: 0.5px; }
.module-hero-text p { margin: 0; font-size: 0.95rem; opacity: 0.92; }

.module-lead {
    max-width: 68ch;
    margin: 30px auto 0;
    text-align: center;
    font-size: 1rem;
    color: var(--muted);
}
.module-section { padding: 34px 0; }
.module-section .section-head { margin-bottom: 20px; }

.step-card { position: relative; padding-top: 22px; }
.step-number {
    position: absolute;
    top: -14px;
    left: 16px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cta);
    color: var(--cta-ink);
    font-weight: 700;
    font-size: 0.85rem;
}
.step-card h3, .feature-card h3 { margin: 0 0 6px; font-size: 1rem; }
.step-card p, .feature-card p { margin: 0; font-size: 0.86rem; color: var(--muted); }

.module-detail {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    align-items: center;
}
.detail-copy h2 { margin: 0 0 12px; font-size: 1.3rem; }
.detail-copy p { margin: 0 0 16px; color: var(--muted); line-height: 1.7; }
.detail-points { grid-template-columns: 1fr 1fr; max-width: none; margin: 0; }
.detail-shot { width: 100%; height: 260px; object-fit: cover; border-radius: 0; }

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
    position: relative;
    padding-right: 26px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    position: absolute;
    right: 2px;
    top: -2px;
    font-size: 1.2rem;
    color: var(--cta);
    line-height: 1;
}
.faq[open] summary::after { content: '\2212'; }
.faq p { margin: 10px 0 0; font-size: 0.88rem; color: var(--muted); line-height: 1.7; }

.module-cta { text-align: center; padding: 30px 20px; margin-bottom: 40px; }
.module-cta h2 { margin: 0 0 6px; font-size: 1.2rem; }
.module-cta p { margin: 0; }
.module-cta-actions { margin-top: 16px !important; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
    .module-detail { grid-template-columns: 1fr; }
    .detail-points { grid-template-columns: 1fr; }
}

/* ---------- Upcoming events ---------- */
.event-row { display: flex; align-items: center; gap: 16px; }
.event-date {
    flex-shrink: 0;
    width: 58px;
    padding: 8px 0;
    text-align: center;
    border-radius: 0;
    background: var(--cta);
    color: var(--cta-ink);
    line-height: 1.1;
}
.event-date .day { display: block; font-size: 1.4rem; font-weight: 800; }
.event-date .month { display: block; font-size: 0.68rem; letter-spacing: 1px; }
.event-row .thumb { width: 66px; height: 66px; border-radius: 0; object-fit: cover; flex-shrink: 0; }
.event-row .body { flex: 1; min-width: 0; }
.event-row h3 { margin: 0 0 5px; font-size: 1rem; }
.event-row p { margin: 2px 0; font-size: 0.83rem; }
.event-row .meta { color: var(--muted); }
.event-action { flex-shrink: 0; }

@media (max-width: 700px) {
    .event-row { flex-wrap: wrap; }
    .event-row .body { flex-basis: 100%; order: 3; }
}

/* ---------- GigNews and GigShop ---------- */
.post-card, .product-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.post-card .shot, .product-card .shot { width: 100%; height: 150px; object-fit: cover; }
.post-card .body, .product-card .body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.post-card h3, .product-card h3 { margin: 6px 0 6px; font-size: 1rem; line-height: 1.3; }
.post-card p, .product-card p { margin: 0 0 8px; font-size: 0.85rem; color: var(--muted); }
.post-meta { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.2px; }
.post-card .actions { margin-top: auto; }

.product-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.price { font-weight: 700; color: var(--brand-blue); }

.post { max-width: 720px; margin: 0 auto 40px; }
.post .post-cover { width: 100%; height: 300px; object-fit: cover; border-radius: 0; margin: 14px 0 22px; }
.post p { line-height: 1.7; }
.post-back { margin-top: 26px; }

/* ---------- Auth pages ---------- */
.auth-wrap {
    max-width: 400px;
    margin: 60px auto;
    padding: 32px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
}
.auth-wrap h1 { margin-top: 0; font-size: 1.4rem; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 0.85rem; color: var(--muted); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    /* Textareas default to a monospace face, which made typed text and the
       placeholder look nothing like the rest of the page. */
    font-family: inherit;
    font-size: 0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.form-error {
    background: rgba(220,80,80,0.12);
    border: 1px solid rgba(220,80,80,0.4);
    color: #ff9c9c;
    padding: 10px 14px;
    border-radius: 0;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.form-success {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 10px 14px;
    border-radius: 0;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.auth-switch { margin-top: 16px; font-size: 0.85rem; text-align: center; }
.auth-switch a { color: var(--accent); font-weight: 600; }

/* ---------- Page header (listing pages) ---------- */
.page-head {
    position: relative;
    padding: 40px 0 18px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--rule);
}
.page-head h1 { margin: 0 0 6px; font-size: 1.8rem; color: var(--on-bg); }
.page-head p { margin: 0; color: var(--on-bg-muted); }
.page-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 62px;
    height: 3px;
    border-radius: 0;
    background: var(--accent);
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--line-light);
    padding: 14px 0;
    background: var(--bar);
    color: var(--ink);
}
.site-footer .muted { color: #5c688a; }
/* One line: mark, promise, copyright. */
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
}
.footer-logo { height: 26px; width: auto; }

@media (max-width: 700px) {
    .footer-inner { justify-content: center; text-align: center; }
}

/* ---------- Dashboard shell ---------- */
.dash-body { background: var(--bg); }
.dash-shell { display: flex; min-height: 100vh; }
.dash-sidebar {
    width: 68px;
    background: var(--bg-alt);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 84px 0 18px;
    flex-shrink: 0;
}
.dash-icon-nav { display: flex; flex-direction: column; gap: 14px; }
.dash-icon-nav a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: var(--muted);
    transition: background .15s ease, color .15s ease;
}
.dash-icon-nav a:hover { background: var(--card-alt); color: var(--text); }
.dash-icon-nav a.active { background: var(--accent-soft); color: var(--accent); }

.dash-main { flex: 1; min-width: 0; }
.dash-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 26px;
    height: 84px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}
.dash-brand { display: flex; align-items: center; }
.dash-brand img { height: 34px; width: auto; }
.dash-brand .on-light { display: none; }
:root[data-theme="light"] .dash-brand .on-dark { display: none; }
:root[data-theme="light"] .dash-brand .on-light { display: block; }

/* Icon above label, with the active item underlined in teal. */
.dash-top-nav {
    display: flex;
    justify-content: center;
    gap: 38px;
    flex: 1;
}
.dash-top-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
    border-bottom: 2px solid transparent;
}
.dash-top-nav a:hover { color: var(--text); }
.dash-top-nav a.active { color: var(--accent); border-color: var(--accent); }

.dash-user { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--muted); }

.dash-content {
    /* The dashboard is an app screen: it fills the window rather than sitting
       in the marketing site's centred column. */
    padding: 30px 32px;
    max-width: 1720px;
}
.dash-columns {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 30px;
    align-items: start;
}
.dash-columns h2 { margin: 0 0 18px; font-size: 1.35rem; color: var(--on-bg); }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* Gig board rows: picture, detail, and the action pinned to the right. */
.gig-row { display: flex; gap: 16px; align-items: center; }
.gig-row .thumb {
    width: 66px;
    height: 66px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
}
.gig-row .body { flex: 1; min-width: 0; }
.gig-row h3 { margin: 0 0 5px; font-size: 1rem; }
.gig-row p { margin: 2px 0; font-size: 0.82rem; }
.gig-row .meta { color: var(--muted); }
.gig-row .apply { flex-shrink: 0; margin: 0; }

/* Calendar widget */
.calendar-widget {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 16px;
    margin-top: 20px;
}
.calendar-widget .cal-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px; font-weight: 600; font-size: 0.9rem;
}
.calendar-widget .cal-head .small { font-weight: 500; }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-size: 0.78rem;
}
.cal-grid .dow { color: var(--muted); font-weight: 600; padding-bottom: 4px; }
.cal-grid .day {
    padding: 6px 0;
    border-radius: 0;
    color: var(--text);
}
.cal-grid .day.muted-day { color: #4a527a; }
.cal-grid .day.today { background: var(--cta); color: var(--cta-ink); font-weight: 700; }
.cal-grid .day.event { border: 1px solid var(--accent); }

.upcoming-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 0.85rem;
}
.upcoming-box h4 { margin: 0 0 6px; font-size: 0.9rem; }
.upcoming-box p { margin: 2px 0; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .main-nav { gap: 18px; }
    .main-nav a { font-size: 0.86rem; }
}

@media (max-width: 900px) {
    .sections-row, .sections-row-wide { grid-template-columns: 1fr; }
    .sections-row > .section {
        border-right: none;
        border-bottom: 1px solid var(--rule);
        padding: 26px 18px;
    }
    .sections-row > .section:last-child { border-bottom: none; }
    .dash-columns { grid-template-columns: 1fr; }
    .main-nav { display: none; }
    .hero-content { padding: 0 64px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

/* ---------------------------------------------------------------------------
   Photo strip on the homepage, and the motion on any card carrying an image.
   Square corners throughout: the movement does the work instead.
   --------------------------------------------------------------------------- */
.photo-strip {
    max-width: var(--page);
    margin: 40px auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}
.photo-tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #0b1526;
}
.photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease, filter .5s ease;
    filter: saturate(.9) brightness(.82);
}
.photo-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(to top, rgba(6, 12, 24, .85), transparent);
}
.photo-label {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.photo-tile:hover img,
.photo-tile:focus-visible img {
    transform: scale(1.07);
    filter: saturate(1.1) brightness(1);
}
.photo-tile:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* Cards with photography: hold the image still, let it breathe on hover. */
.gig-card, .venue-card, .showcase-card, .post-card, .product-card { overflow: hidden; }
.gig-card .thumb, .venue-card .shot, .showcase-card .shot,
.post-card .shot, .product-card .shot {
    transition: transform .45s ease;
}
.gig-card:hover .thumb, .venue-card:hover .shot, .showcase-card:hover .shot,
.post-card:hover .shot, .product-card:hover .shot { transform: scale(1.05); }
.card { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.gig-card:hover, .venue-card:hover, .talent-card:hover,
.showcase-card:hover, .post-card:hover, .product-card:hover {
    border-color: var(--cta);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

@media (prefers-reduced-motion: reduce) {
    .photo-tile img, .gig-card .thumb, .venue-card .shot, .showcase-card .shot,
    .post-card .shot, .product-card .shot, .card { transition: none; }
    .photo-tile:hover img, .gig-card:hover .thumb, .venue-card:hover .shot,
    .showcase-card:hover .shot, .post-card:hover .shot,
    .product-card:hover .shot { transform: none; }
}

@media (max-width: 900px) {
    .photo-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
    .photo-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Photo credits page. */
.credit-list { display: grid; gap: 2px; }
.credit-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--card);
}
.credit-row img { width: 90px; height: 60px; object-fit: cover; flex-shrink: 0; }
.credit-title { margin: 0 0 2px; font-weight: 600; font-size: 0.92rem; }
.credit-row .meta { margin: 0; }

/* ---------------------------------------------------------------------------
   Column alignment inside the homepage rows. A column with two cards used to
   stop well short of the one beside it with four, leaving the row ragged along
   the bottom. Each column is now a flex column whose card area grows, and the
   cards share that height between them, so every column ends on the same line.
   --------------------------------------------------------------------------- */
.sections-row > .section { display: flex; flex-direction: column; }
.sections-row > .section > .stack,
.sections-row > .section > .grid,
.sections-row > .section > .card { flex: 1; }
.sections-row > .section > .stack > .card { flex: 1; }
/* The card grids keep their natural height: their rows are already equal, and
   the column beside them stretches its photograph to meet them. */
.sections-row > .section > .grid { grid-auto-rows: 1fr; }

/* Cards spend the height they gain on their photograph rather than on empty
   space under the text. */
.sections-row .gig-card { align-items: stretch; }
.sections-row .gig-card .thumb { height: auto; min-height: 74px; max-height: 120px; }
.sections-row .venue-card .shot { height: auto; min-height: 74px; max-height: 110px; align-self: stretch; }
/* The showcase card spends its extra height on the photograph rather than on
   empty space under the text. */
.sections-row .showcase-card { display: flex; flex-direction: column; }
/* flex-basis 0 rather than the image's intrinsic height, so the photograph
   fills the space that is left instead of asking for more and growing the row. */
.sections-row .showcase-card .shot { flex: 1 1 0; height: 0; min-height: 170px; }

@media (max-width: 900px) {
    /* Stacked columns have no neighbour to line up with. */
    .sections-row > .section > .stack > .card,
    .sections-row > .section > .grid { flex: initial; }
    .sections-row > .section > .grid { grid-auto-rows: auto; }
    .sections-row .showcase-card .shot { flex: initial; height: 170px; }
}

/* ---------------------------------------------------------------------------
   Editorial pages. A single column at a readable measure, photographs with
   captions, and headings that sit left where the eye returns to them. Written
   pages should read as writing, not as a grid of feature boxes.
   --------------------------------------------------------------------------- */
.essay {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px var(--gutter) 72px;
}
.essay-head { margin-bottom: 34px; }
.essay-kicker {
    margin: 0 0 10px;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cta);
}
.essay h1 {
    margin: 0 0 14px;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--on-bg);
}
.essay-standfirst {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--muted);
}
.essay h2 {
    margin: 44px 0 14px;
    font-size: 1.22rem;
    color: var(--on-bg);
}
.essay p {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.75;
}
.essay p strong { color: var(--on-bg); }
.essay a { text-decoration: underline; text-underline-offset: 3px; }

.essay-figure { margin: 30px 0 34px; }
.essay-figure img { width: 100%; height: 340px; object-fit: cover; display: block; }
.essay-figure figcaption {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--muted);
    border-left: 2px solid var(--cta);
    padding-left: 10px;
}

.essay-quote {
    margin: 34px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--cta);
    font-size: 1.16rem;
    line-height: 1.6;
    color: var(--on-bg);
}

.essay-qa { margin: 0 0 8px; }
.essay-qa dt { margin-top: 20px; font-weight: 600; color: var(--on-bg); }
.essay-qa dd { margin: 5px 0 0; color: var(--muted); line-height: 1.7; }

.essay-sign {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}

@media (max-width: 640px) {
    .essay { padding-top: 32px; }
    .essay-figure img { height: 220px; }
}

/* Contact page: one narrow column. Nothing here needs a sidebar. */
.contact-page { max-width: 560px; margin: 0 auto; padding: 48px var(--gutter) 72px; }
.contact-page h1 { margin: 0 0 10px; font-size: 1.8rem; color: var(--on-bg); }
.contact-lead { margin: 0 0 28px; color: var(--muted); line-height: 1.7; }
.contact-foot {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 0.9rem;
    color: var(--muted);
}
.contact-foot a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   GigNews and the Blog: a banner, two featured pieces, then a grid. Cards
   carry a category chip over the picture and the writer at the foot.
   --------------------------------------------------------------------------- */
.journal-banner {
    background: var(--brand-blue, #264e83);
    color: #fff;
    text-align: center;
    padding: 54px var(--gutter) 58px;
}
.journal-banner h1 {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    letter-spacing: -0.01em;
    color: #fff;
}
.journal-banner p {
    margin: 0 auto;
    max-width: 620px;
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

.journal { max-width: var(--page); margin: 0 auto; padding: 40px var(--gutter) 72px; }
.journal-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 10px 0 18px;
}
.journal-section-head h2 { margin: 0; font-size: 1.35rem; color: var(--on-bg); }
.journal-dateline {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.post-grid { display: grid; gap: 20px; margin-bottom: 44px; }
.post-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.post-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background: var(--card);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.post-tile:hover { border-color: var(--cta); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }

.post-tile-shot { position: relative; display: block; }
.post-tile-shot img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.post-tile.is-featured .post-tile-shot img { height: 260px; }
.post-tile:hover .post-tile-shot img { transform: scale(1.05); }
.post-tag {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 4px 10px;
    background: var(--cta);
    color: var(--cta-ink, #fff);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.post-tile-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.post-tile-body h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--on-bg);
}
.post-tile.is-featured .post-tile-body h3 { font-size: 1.3rem; }
.post-tile:hover .post-tile-body h3 { color: var(--cta); }
.post-tile-body p {
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--muted);
}
.post-tile-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; }
.post-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-blue, #264e83);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .post-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .post-grid-2, .post-grid-3 { grid-template-columns: 1fr; }
    .post-tile.is-featured .post-tile-shot img { height: 200px; }
}

/* Article page: the essay column, plus a byline and a short read-next list. */
/* Scoped to .essay so these beat the plain paragraph rule above. */
.essay .post-byline { margin: 0; font-size: 0.85rem; color: var(--muted); }
.essay .post-standfirst {
    font-size: 1.14rem;
    line-height: 1.65;
    color: var(--on-bg);
    margin-bottom: 24px;
}
.post-more { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); }
.post-more h2 { margin: 0 0 12px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cta); }
.post-more ul { list-style: none; margin: 0; padding: 0; }
.post-more li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; }
.post-more a { text-decoration: none; }
.post-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
    .journal-lead img { height: 220px; }
    .journal-list a { flex-direction: column; gap: 12px; }
    .journal-list img { width: 100%; height: 180px; }
    .post-more li { flex-direction: column; gap: 2px; }
}

/* ---------- Product-style gig tiles (Explore Gigs) ---------- */
/* The listing reads like a catalogue: photograph on top, chips for the states
   worth spotting from across the grid, then title, venue, rating, fee, and the
   action row along the bottom. Every tile in a row ends level because the body
   is a column with the actions pushed to the foot. */
.grid-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.gig-tile {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.tile-shot {
    background: var(--card-alt);
    border-bottom: 1px solid var(--border);
}
.tile-shot img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
}

.tile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid var(--border);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--muted);
}
.tag.is-featured { border-color: var(--accent); color: var(--accent); }
.tag.is-urgent { border-color: var(--cta); color: var(--cta); }
.tag.is-soon { border-color: var(--gold); color: var(--gold); }
.tag.is-full { background: var(--card-alt); border-color: var(--border); color: var(--muted); }

.tile-title {
    margin: 0 0 4px;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--accent);
}
.tile-sub {
    margin: 0 0 8px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
}

.tile-rating { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.tile-rating .rating-value { font-size: 0.78rem; color: var(--muted); }

/* The fee is the headline number, so it gets the rule above it and the weight,
   the way the price sits in a product tile. */
.tile-price {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}
.tile-when { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.tile-note {
    margin: 6px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
}

.tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}
.tile-actions form { margin: 0; }

.tile-foot {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.76rem;
    color: var(--muted);
}

.gig-tile.is-closed .tile-shot img { opacity: 0.55; }

@media (max-width: 1000px) {
    .grid-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .grid-tiles { grid-template-columns: 1fr; }
}