/* Reset & Base */

/* Do not remove the font-family here. `.tour-table` and `.booking-form` further
   down both declare `font-family: sans-serif`, and the only reason the gig table
   and the booking form render in Roboto is that this universal selector matches
   their descendants directly rather than letting them inherit. Delete this and
   both flip to Helvetica. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
    font-family: 'Arial', sans-serif;
    color: #fff;
    background: #000;
}

a {
    color: #fff;
    text-decoration: none;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    background: black;
    z-index: 1000;
}

.nav-inner {
    width: 80vw;
    display: flex;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    align-items: center;
    width: 230px;
}

.nav-right {
    display: flex;
    align-items: center;
    width: 230px;
    text-align: right;
    justify-content: flex-end;
    font-size: 1.6em;
    font-weight: lighter;
}

nav a.social {
    font-size: 2.7em;
    margin-right: 0.5em;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

nav ul li {
    font-size: 1rem;
    display: flex;
}

nav ul li .logo {
    max-width: 200px;
    width: 100%;
}

nav ul li {
    font-size: 1rem;
    display: flex;
    align-content: center;
    align-items: center;
}

nav li a {
    font-size: 1.3em;
}

.button {
    background: #8C050B;
    color: white;
    padding: 1em;
    margin: 1em 0;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.3em;
    border: none;
}

/* Sections */
section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#hero {
    background-image: url('herobg.jpg');
    background-position: top;
}

@media screen and (max-width: 900px) {
  .parallax {
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: initial;
  }
}

.section-inner {
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
}

#hero .section-inner {
    margin-top: 8em;
}

#hero .section-inner .content {
    width: 60%;
    text-align: left;
}

#about, #tour-dates {
    background: #111;
}

#contact {
    background: #111;
}

/* Content */

h1 {
    font-size: 3em;
    margin-bottom: 20px;
    text-transform: uppercase;
    margin: 0 0 0.5em;
    line-height: 1.2em;
}

h2 {
    font-weight: 200;
    font-size: 2em;
    margin: 0 0 0.5em;
}

h3 {
    font-size: 1.5em;
    margin: 0 0 0.5em;

}

p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 1em;
    font-weight: 100;
}

section {
    scroll-margin-top: 130px;
}

/* Footer */
footer {
    background: #000;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
}

#about .section-inner .left {
    text-align: left;
}

#about .section-inner {
    text-align: left;
}

#about .section-inner > div {
    width: 50%;
    padding: 2em 0;
}

#about .section-inner .right img {
    width: 100%;
    max-width: 100%;
}

#about .section-inner .right {
    padding: 5.5em 0 0 3em;
}

.section-inner .flex-center {
    width: 100% !important;
    display: flex;
    justify-content: center;
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 2s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.tour-table {
    width: 100%;
    border-collapse: collapse;
    color: white;
    font-family: sans-serif;
}

.tour-table td {
    padding: 1em;
    border-bottom: 1px solid white;
    vertical-align: top;
    text-align: left;
}

.tour-table td:nth-child(1) {
    font-weight: bold;
    white-space: nowrap;
}

.tour-table td:nth-child(2) {
    font-weight: bold;
}

.tour-table td:nth-child(3) {
    text-align: right;
}

section#why {
    min-height: 70vh;
}

#why .left, #why .right {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

ul.custom-bullets {
    list-style: none;
    padding-left: 0;
}

ul.custom-bullets li {
    position: relative;
    padding-left: 60px;
    margin-bottom: 0.8em;
    text-align: left;
    font-size: 1.3em;
    font-weight: 200;
    line-height: 55px;
}

ul.custom-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 50px;
    height: 50px;
    background-image: url('sneaker-lightning-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

.gallery a {
    display: block;
    width: 200px;
    height: 133px; /* Aspect ratio ~3:2 */
    overflow: hidden;
    border: 2px solid white;
    transition: transform 0.2s ease;
}

.gallery a:hover {
    transform: scale(1.03);
}

.gallery img.thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

section#gallery .content {
    width: 70vw;
}

section#gallery {
    min-height: 60vh;
}

/* Lightbox backdrop */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Lightbox image */
.lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px #000;
}

/* Show when active */
.lightbox-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

/* Optional fade effect */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#contact .right {
    padding: 0 0 0 2em;
}

section#contact {
    flex-wrap: wrap;
    align-content: center;
}

.booking-form {
    max-width: 100%;
    margin: 2em 0;
    color: white;
    font-family: sans-serif;
}

.booking-form .form-group {
    margin-bottom: 1.2em;
}

.booking-form label {
    display: block;
    margin-bottom: 0.4em;
    font-weight: 400;
    text-align: left;
}

.booking-form input,
.booking-form textarea {
    width: 100%;
    padding: 0.7em;
    background: #111;
    border: 1px solid #555;
    color: white;
    border-radius: 4px;
    font-size: 1em;
}

.booking-form button:hover {
    cursor: pointer;
}

section#contact {
    flex-wrap: wrap;
    align-content: center;
    min-height: unset;
    margin-top: 220px; 
}

#contact h2 {
    text-align: left;
}

#contact ul.custom-bullets li {
    margin-bottom: 0;
}

#contact h1 {
    margin-top: 0.5em;
}

.mobonly {
    display: none;
}

@media screen and (max-width: 900px) {
    .mobhide {
        display: none;
    }

    .mobonly {
        display: block;
    }

    img.logo-mobile {
        width: 100px;
        margin-left: -1.7em;
    }

    label.burger-icon img {
        width: 70px;
    }

    .menu-wrapper {
        position: relative;
        z-index: 1000;
    }

    /* Burger icon */
    .burger-icon {
        position: fixed;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
        z-index: 1001;
    }

    .burger-icon img {
        width: 32px;
        height: auto;
    }

    /* Menu overlay */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: black;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: scale(0);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    /* Show overlay when checkbox is checked */
    #burger-toggle:checked ~ .menu-overlay {
        transform: scale(1);
        opacity: 1;
    }

    /* Close button */
    .close-icon {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 2rem;
        cursor: pointer;
        z-index: 1002;
    }

    /* Menu items */
    .menu-items {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .menu-items li {
        margin: 1rem 0;
    }

    .menu-items a {
        color: white;
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: bold;
    }

    #hero .section-inner .content {
        width: 100%;
        text-align: left;
    }

    .section-inner {
        width: 90vw;
    }

    #about .section-inner {
        display: flex;
        flex-wrap: wrap;
    }

    #about .section-inner > div {
        width: 100%;
    }

    #about .section-inner .right {
        padding: 0;
    }

    #why .section-inner {
        display: flex;
        flex-wrap: wrap;
    }

    #why .section-inner > div {
        width: 100%;
    }

    #why .section-inner .left {
        padding: 2em 0;
    }

    #why .section-inner .right {
        padding: 0;
    }

    #why .button-holder {
        width: 100%;
    }

    h1 {
        font-size: 2em;
    }

    table.tour-table {
        margin-bottom: 2em;
    }

    nav ul {
        display: block;
    }

    #contact .right {
        padding: 0;
    }

    #contact h2 {
        text-align: center;
    }
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2rem 0;
}

.blog-list-item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;

}

/* Left image side */
.blog-list-left img {
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Right text side */
.blog-list-right {
  flex: 1;
  text-align: left;
}

.blog-list-right h1 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.blog-list-right p {
  line-height: 1.6;
}   

/* Mobile layout */
@media (max-width: 768px) {
  .blog-list-item {
    flex-direction: column;
  }

  .blog-list-left img {
    max-width: 100%;
  }
}

.blog-article-content {
    color: #fff;
    line-height: 1.7;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: left;
}

.blog-article-content h2,
.blog-article-content h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #fff;
}

.blog-article-content img {
  width: 100%;
  border-radius: 6px;
  margin: 1.5rem 0;
  display: block;
}

.blog-article-content a {
  color: #ffb300;
  text-decoration: underline;
}
.blog-article ul {
    margin: 0 0 0 1.3em;
}

.section-inner.bookpage .left {
    width: 50%;
}
.section-inner.bookpage .right {
    width: 50%;
}

/* Mobile layout */
@media (max-width: 900px) {
  .section-inner.bookpage .left {
      width: 100%;
  }
  .section-inner.bookpage .right {
      width: 100%;
  }
}

#why ul.custom-bullets {
    width: 100%;
}
section#contact h1 {
    width: 100%;
}

/* ==========================================================================
   Appended 2026-08-04 — mobile/cosmetic pass, accessibility, tech spec page.

   Everything below is additive. Nothing above this line was edited except the
   removal of a dead #services placeholder rule and a comment on the universal
   selector. If any of this misbehaves, delete from this banner down and the
   stylesheet is provably back to where it was.

   Two things deliberately NOT changed, having been measured rather than assumed:
   - `section#contact { margin-top: 220px }` is not dead space on desktop. The
     nav logo renders 200x168 plus 20px padding top and bottom, so the fixed nav
     is ~208px tall and that margin is its clearance. Reduced on mobile only,
     where the nav is ~124px.
   - `img.logo-mobile { margin-left: -1.7em }` is deliberate optical trim that
     balances the logo against the fixed burger. Left alone.
   ========================================================================== */

/* --- Inline social icons, replacing the Font Awesome webfont ------------- */
nav a.social {
    display: inline-flex;
    align-items: center;
}

.social-icon {
    width: 32px;
    height: 32px;
    fill: currentColor;
    display: block;
}

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
}

.skip-link:focus {
    left: 0;
    padding: 0.75em 1.25em;
    background: #ffb300;
    color: #000;
    font-weight: 700;
}

#main {
    outline: none; /* skip-link target; it is focused programmatically */
}

/* --- Focus visibility --------------------------------------------------- */
/* There are no `outline: none` rules anywhere in this file, so this is purely
   additive: browsers without :focus-visible keep the UA ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
label.burger-icon:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

/* The burger is driven by a checkbox. It used to carry `hidden`, which made the
   entire mobile menu unreachable by keyboard. It is now offscreen but focusable,
   and the ring is drawn on the label the user can actually see. */
.burger-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.burger-toggle:focus-visible + .burger-icon {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

/* --- Hero legibility ---------------------------------------------------- */
/* A scrim, as a second background layer rather than a ::before. #hero is
   already `position: relative`, so a positioned pseudo-element would paint
   above the unpositioned .section-inner and hide the headline. Same (1,0,0)
   specificity as the rule it replaces, later in the file, so it wins.
   herobg.jpg is only 1024x770 and is upscaled on any desktop viewport; the
   scrim hides some of that softness but a larger source image would be better. */
#hero {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.30) 45%, rgba(0, 0, 0, 0.75) 100%),
        url('herobg.jpg');
}

/* --- Anchor offset ----------------------------------------------------- */
/* Was 130px against a ~208px nav, so every /#tour-dates jump landed under it. */
section {
    scroll-margin-top: 220px;
}

/* --- Gig list: styling for markup the database path emits --------------- */
/* .gig-time, .gig-tickets and .no-gigs had no rules at all, and the changeover
   switch is thrown, so stage times and ticket links were rendering unstyled. */
.gig-time {
    display: inline-block;
    font-weight: 400;
    font-size: 0.85em;
    color: #ffb300;
    white-space: nowrap;
}

.gig-tickets {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.15em 0.6em;
    border: 1px solid #ffb300;
    color: #ffb300;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.gig-tickets:hover,
.gig-tickets:focus-visible {
    background: #ffb300;
    color: #000;
}

.no-gigs {
    font-size: 1.1em;
}

.no-gigs a {
    color: #ffb300;
    text-decoration: underline;
}

/* --- Fade-in reveals: gate on the feature, not on JavaScript ------------- */
/* footer.php reveals these with IntersectionObserver. Where that is missing the
   script still runs, so gating on "has JS" would leave the gallery and the about
   photo invisible forever. header.php sets `.io` only if the API exists.
   Specificity ladder: (0,1,0) -> (0,2,0) -> (0,3,0). */
.fade-in {
    opacity: 1;
    transform: none;
}

.io .fade-in {
    opacity: 0;
    transform: translateY(30px);
}

.io .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Gig list — stacked cards on small screens.
   nth-child is the only hook shared by the database path (functions.php) and
   the legacy fallback (gigmanager/legacy-gig-list.html): both emit class-less
   three-<td> rows, verified 111 <td> across 37 <tr> in the legacy file.
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* Browsers insert a <tbody>, so target the descendant rather than a child. */
    .tour-table,
    .tour-table tbody,
    .tour-table tr,
    .tour-table td {
        display: block;
        width: auto;
    }

    .tour-table tr {
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-left: 3px solid #ffb300;
        padding: 0.9em 1em;
        margin-bottom: 0.75em;
        text-align: left;
    }

    .tour-table td {
        padding: 0;
        border-bottom: 0;
        /* Must override the nowrap on column one or the card can never shrink
           below the width of the longest date, which is what currently makes
           the homepage scroll sideways on a phone. */
        white-space: normal;
        text-align: left;
        vertical-align: baseline;
    }

    /* Date — the card's kicker line. */
    .tour-table td:nth-child(1) {
        font-size: 0.85em;
        font-weight: 400;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #ffb300;
        margin-bottom: 0.15em;
    }

    /* Venue or gig title, plus any .gig-time / .gig-tickets. */
    .tour-table td:nth-child(2) {
        font-size: 1.15em;
        font-weight: 700;
        line-height: 1.35;
    }

    /* Town. Needs its own text-align: the rule it overrides is nth-child too,
       so the generic `.tour-table td { text-align: left }` above is a weaker
       selector and loses to the desktop right-align. */
    .tour-table td:nth-child(3) {
        font-size: 0.95em;
        font-weight: 300;
        color: #cfcfcf;
        margin-top: 0.2em;
        text-align: left;
    }

    /* The database path emits <td></td> with no whitespace when a gig has no
       town, so :empty matches and the blank line is dropped. */
    .tour-table td:nth-child(3):empty {
        display: none;
    }

    table.tour-table {
        margin-bottom: 2em;
    }
}

/* ==========================================================================
   Mobile layout corrections. Appended so the existing 900px block above is
   left intact — these override it by source order.
   ========================================================================== */
@media screen and (max-width: 900px) {

    /* The hero used to render at the image's natural size on phones, showing a
       360px crop of its top-left corner, with `fixed` attachment that iOS
       either ignores or renders badly. */
    .parallax {
        background-size: cover;
        background-attachment: scroll;
    }

    /* h2 was 2em at every width; the hero strapline is the worst case. */
    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.25em;
    }

    /* Roboto Thin on black is hard to read on a phone. */
    p {
        font-weight: 300;
    }

    /* A fixed 55px line-height gave a wrapped bullet 110px of height with the
       icon stranded against the first line. Icon dropped to 44px and re-centred
       against a fluid line box. Mobile only: on desktop the 55px is load-bearing
       for the booking page's right column. */
    ul.custom-bullets li {
        line-height: 1.4;
        min-height: 50px;
        padding-top: 10px;
        padding-left: 56px;
        font-size: 1.15em;
    }

    ul.custom-bullets li::before {
        top: 0;
        width: 44px;
        height: 44px;
    }

    /* The desktop 220px is clearance for a ~208px fixed nav. The mobile nav is
       ~124px, so 220px left roughly 96px of dead black space above the booking
       page and blog headings. Kept as a margin, not swapped to padding: the
       strip shows the body's #000 rather than the section's #111. */
    section#contact {
        margin-top: 140px;
    }

    section {
        scroll-margin-top: 140px;
    }

    /* Repeats the full (1,1,1) selector deliberately — `#gallery .content` is
       (1,1,0) and would lose to the 70vw rule above. */
    section#gallery .content {
        width: 90vw;
    }

    /* The gallery was a hard 200x133 grid item at every width, so a 360px phone
       got a single column roughly 4,000px tall. Grid only below 900px: desktop
       stays on flex at 200px, because the thumbs are generated at exactly 200px
       and any wider track upscales them. Browsers without grid keep the flex. */
    .gallery {
        display: grid;
        /* 130px, not 140px: at 360px the container is 90vw = 324px, and two
           140px tracks plus the gap exceed that once padding is counted. */
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
        padding: 10px 0;
    }

    .gallery a {
        width: auto;
        height: auto;
        /* Square, not 3:2. Twelve of the twenty-eight thumbs are 200x250
           portrait, and 3:2 with object-fit: cover discards half their height. */
        aspect-ratio: 1 / 1;
    }

    @supports not (aspect-ratio: 1 / 1) {
        .gallery a {
            height: 150px;
        }
    }

    /* iOS counts the address bar in 100vh, so the closed overlay could sit
       slightly short. Browsers that cannot parse dvh keep the vh line. */
    .menu-overlay {
        height: 100vh;
        height: 100dvh;
    }

    /* The phone number lives in .mobhide, so mobile visitors never had it. */
    .menu-phone {
        margin-top: 2rem;
        font-size: 1.4rem;
        font-weight: 700;
        color: #ffb300;
    }
}

/* ==========================================================================
   Reduced motion.

   Deliberately targeted. The usual blanket
       *, *::before, *::after { transform: none !important }
   would be actively harmful here: .menu-overlay is hidden with
   `transform: scale(0)`, so forcing `transform: none` promotes it to scale(1)
   — a fixed, full-viewport black panel permanently covering the mobile site.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .fade-in,
    .io .fade-in,
    .io .fade-in.visible {
        transition: none;
        transform: none;
    }

    /* The scale toggle stays and simply becomes instant. transform is NOT reset. */
    .menu-overlay {
        transition: none;
    }

    .gallery a {
        transition: none;
    }

    .gallery a:hover {
        transform: none;
    }

    .lightbox-overlay.active {
        animation: none;
    }
}

/* ==========================================================================
   Technical specification page.

   `section` is a full-viewport centred flex box with `text-align: center`, and
   that centring is inherited by every list, table and paragraph. A long
   document needs out of all of it, hence the class rather than an id.
   ========================================================================== */
section.specpage {
    display: block;
    min-height: 0;
    text-align: left;
    background: #111;
    /* Clears the ~208px fixed desktop nav. */
    padding: 250px 0 4em;
}

/* 880px rather than something wider: the prose is capped at 70ch for
   readability, and a much wider container just left a big empty column to the
   right of everything. */
.spec-inner {
    width: 80vw;
    max-width: 880px;
    margin: 0 auto;
}

.spec-inner h2 {
    margin-top: 2.2em;
    font-weight: 300;
}

.spec-inner h3 {
    margin-top: 1.8em;
    font-weight: 400;
}

.spec-lead {
    font-size: 1.2em;
    font-weight: 300;
    max-width: 70ch;
}

.spec-inner p {
    max-width: 70ch;
}

.spec-inner .custom-bullets {
    margin-top: 1.2em;
}

/* Plain bulleted lists, for the sections where the lightning icon would be
   too shouty. */
.spec-plain-list {
    margin: 1em 0 0 1.2em;
    max-width: 70ch;
}

.spec-plain-list li {
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 0.7em;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Input list --------------------------------------------------------- */
.spec-table-wrap {
    margin: 1.5em 0;
    overflow-x: auto;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.spec-table th {
    padding: 0.7em 1em;
    border-bottom: 2px solid #ffb300;
    color: #ffb300;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

.spec-table td {
    padding: 0.85em 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 300;
    vertical-align: top;
}

.spec-table tbody tr td:first-child {
    font-weight: 400;
}

/* --- Stage plan --------------------------------------------------------- */
.stage-plan {
    margin: 1.5em 0 0;
}

.stage-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 760px;
    background: #0b0b0b;
    border: 1px solid #2c2c2c;
    border-radius: 8px;
}

/* Numbers stay legible when the diagram scales down; the names live in the key
   below rather than in the drawing, where they would be unreadable on a phone. */
.svg-num {
    font-size: 34px;
    font-weight: 700;
    fill: #fff;
}

.svg-num-dark {
    fill: #000;
}

.svg-num-amber {
    fill: #ffb300;
}

.svg-edge {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.18em;
    fill: #777;
}

.svg-side {
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.1em;
    fill: #ffb300;
}

/* The key is the text equivalent of the diagram, not a caption for it. */
.stage-key {
    margin: 1.5em 0 0 1.3em;
    max-width: 60ch;
}

.stage-key li {
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 0.5em;
}

.stage-key strong {
    font-weight: 700;
    color: #ffb300;
}

@media screen and (max-width: 900px) {

    section.specpage {
        padding: 150px 0 3em;
    }

    .spec-inner {
        width: 90vw;
    }

    .spec-lead {
        font-size: 1.1em;
    }

    /* The input list becomes labelled cards rather than a sideways scroll. The
       labels come from data-label on each cell. */
    .spec-table thead {
        display: none;
    }

    .spec-table,
    .spec-table tbody,
    .spec-table tr,
    .spec-table td {
        display: block;
        width: auto;
    }

    .spec-table tr {
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-left: 3px solid #ffb300;
        padding: 0.8em 1em;
        margin-bottom: 0.7em;
    }

    .spec-table td {
        padding: 0.15em 0;
        border-bottom: 0;
    }

    .spec-table td::before {
        content: attr(data-label) ": ";
        color: #ffb300;
        font-size: 0.8em;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    /* The source is the card's heading, so it doesn't need its own label. */
    .spec-table td:first-child {
        font-size: 1.1em;
        font-weight: 700;
        margin-bottom: 0.3em;
    }

    .spec-table td:first-child::before {
        content: none;
    }

    /* The drawing is only useful if the numbers survive the scale-down. */
    .svg-edge {
        font-size: 26px;
    }

    .svg-side {
        font-size: 25px;
    }

    .svg-num {
        font-size: 40px;
    }
}

/* ==========================================================================
   Homepage tidy-ups that go with the heading and markup changes in index.php.
   ========================================================================== */

/* "Gig Dates" and "Gallery" were both <h1>, giving the homepage three of them.
   They are <h2> now and this keeps them looking exactly as they did. */
.section-title {
    font-size: 3em;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.2em;
    margin: 0 0 0.5em;
}

@media screen and (max-width: 900px) {
    .section-title {
        font-size: 2em;
    }
}

/* #why .left is a flex container, so a new paragraph needs a full-width basis
   the same way #why ul.custom-bullets does. */
#why .why-techspec {
    width: 100%;
    text-align: left;
    font-size: 1em;
}

#why .why-techspec a,
#about .section-inner a {
    color: #ffb300;
    text-decoration: underline;
}

/* The gig table sits in a bare .content div with no width constraint anywhere,
   so on a phone its min-content width pushed the whole page sideways. */
#tour-dates .content {
    width: 80vw;
}

@media screen and (max-width: 900px) {
    #tour-dates .content {
        width: 90vw;
    }
}

/* The video had no bounds beyond width="100%", and no aspect ratio, so the
   space it occupies jumped around as it loaded. */
.video-placeholder video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* --- Footer / lightbox additions ---------------------------------------- */
.footer-credit {
    margin-top: 0.75em;
    font-size: 0.95em;
    text-align: center;
}

.footer-credit a {
    text-decoration: underline;
}

/* The lightbox previously had no way out but clicking the backdrop. */
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 1;
    background: none;
    border: 0;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    padding: 0.25em 0.5em;
    cursor: pointer;
}

.lightbox-close:hover {
    color: #ffb300;
}

/* --- Mobile menu: stop the burger and the close control colliding --------- */
/* Both sit at top right — the burger is 70x74 and the close cross is 24x38 on
   top of it, which made the cross unreadable against the white bars. Hide the
   burger while the menu is open; the cross is then the only control there. */
@media screen and (max-width: 900px) {
    #burger-toggle:checked ~ .burger-icon {
        opacity: 0;
        pointer-events: none;
    }

    .close-icon {
        line-height: 1;
        padding: 0.25em 0.5em;
    }
}

/* --- Desktop nav: stop the labels wrapping to two lines ------------------- */
/* .nav-left and .nav-right were both a fixed 230px, which left the menu too
   little room and broke "Gig Dates", "About Us" and "Contact Us" over two
   lines. Scoped to desktop so the mobile nav is untouched. */
@media screen and (min-width: 901px) {
    .nav-left,
    .nav-right {
        width: auto;
        min-width: 150px;
    }

    nav ul {
        gap: 22px;
    }

    nav li a {
        white-space: nowrap;
        font-size: 1.15em;
    }
}