/* ============================================================
   AKIID MUSIQ
   Public site.
   Developed by Esomthathi Group

   Palette taken from the artist's own press assets: the near-black
   cover, the oxblood About page, the pale steel of the logo mark.
   ============================================================ */

:root {
    --ink:        #0b0b0d;
    --panel:      #141418;
    --panel-high: #1c1c22;
    --line:       #2a2a32;
    --oxblood:    #8e2230;
    --oxblood-lt: #b8404f;
    /* Lime, taken from the artist portfolio. Used sparingly: it is the
       loudest colour on the page, so it marks the few things that should
       shout, not everything. Oxblood stays the primary accent. */
    --lime:       #c3f60a;
    --lime-dim:   #9dc408;
    --steel:      #c6d3de;
    --ash:        #7a828c;
    --bone:       #f2f3f5;

    --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --gutter: clamp(1.25rem, 5vw, 5rem);
    --section: clamp(4rem, 10vw, 8rem);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--steel);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--bone); text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--oxblood-lt);
    outline-offset: 3px;
}

.skip {
    position: absolute;
    left: -9999px;
    background: var(--oxblood);
    color: var(--bone);
    padding: 0.75rem 1.25rem;
    z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------
   TYPE
   ------------------------------------------------------------ */

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.03;
    color: var(--bone);
    margin: 0;
}

h2 { font-size: clamp(2rem, 6vw, 3.6rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }

.eyebrow {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0 0 0.9rem;
}

.lede { font-size: clamp(1rem, 2.1vw, 1.2rem); color: var(--steel); max-width: 58ch; }
.muted { color: var(--ash); }
.small { font-size: 0.85rem; }

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */

.section {
    padding: var(--section) var(--gutter);
    position: relative;
    border-top: 1px solid var(--line);
}

.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.wrap { max-width: 1240px; margin: 0 auto; }

/* ------------------------------------------------------------
   HERO
   The scene is the thesis: the wordmark's own facets, extruded,
   moving to his music. Everything else on the page is quiet.
   ------------------------------------------------------------ */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 0 var(--gutter);
    overflow: hidden;
    border-top: none;
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* Painted before WebGL loads, and left in place if it never does.
   The dot layers mean the hero shows a starfield instantly, instead of
   a black void while the real scene is still waking up on a phone. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(1.6px 1.6px at 12% 24%, rgba(198,211,222,0.55), transparent 55%),
        radial-gradient(1.3px 1.3px at 28% 68%, rgba(242,243,245,0.4), transparent 55%),
        radial-gradient(1.8px 1.8px at 43% 15%, rgba(198,211,222,0.5), transparent 55%),
        radial-gradient(1.2px 1.2px at 57% 82%, rgba(184,64,79,0.5), transparent 55%),
        radial-gradient(1.5px 1.5px at 66% 38%, rgba(242,243,245,0.45), transparent 55%),
        radial-gradient(1.2px 1.2px at 74% 71%, rgba(198,211,222,0.4), transparent 55%),
        radial-gradient(1.7px 1.7px at 84% 22%, rgba(198,211,222,0.5), transparent 55%),
        radial-gradient(1.2px 1.2px at 91% 56%, rgba(184,64,79,0.45), transparent 55%),
        radial-gradient(1.4px 1.4px at 20% 88%, rgba(242,243,245,0.35), transparent 55%),
        radial-gradient(1.3px 1.3px at 50% 50%, rgba(198,211,222,0.35), transparent 55%),
        radial-gradient(ellipse 80% 60% at 30% 45%, rgba(142, 34, 48, 0.28), transparent 70%),
        radial-gradient(ellipse 60% 50% at 75% 60%, rgba(198, 211, 222, 0.07), transparent 70%),
        var(--ink);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 55%, rgba(11, 11, 13, 0.85) 92%, var(--ink) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    padding: 8rem 0 6rem;
}

.hero-logo {
    width: min(620px, 78vw);
    /* The img tag carries width and height attributes for layout stability.
       Without height auto here, the browser keeps the attribute height while
       CSS shrinks the width, and the logo distorts. */
    height: auto;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(14px);
    /* The entrance runs once, then the float takes over the transform and
       loops forever. Both are transform and filter only, which the browser
       animates on the compositor, so it stays smooth even on a phone that
       is busy building the 3D scene behind it. */
    animation:
        rise 1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s forwards,
        logoFloat 7s ease-in-out 1.2s infinite;
    will-change: transform;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 0 rgba(142, 34, 48, 0));
    }
    50% {
        transform: translateY(-9px);
        filter: drop-shadow(0 14px 34px rgba(142, 34, 48, 0.38));
    }
}

.hero-tag {
    font-family: var(--font-display);
    font-size: clamp(0.72rem, 1.7vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--steel);
    margin: 0 0 2.4rem;
    opacity: 0;
    animation: rise 1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.4s forwards;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    opacity: 0;
    animation: rise 1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.6s forwards;
}

@keyframes rise {
    to { opacity: 1; transform: translateY(0); }
}

.scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ash);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.scroll-cue span::after {
    content: '';
    display: block;
    width: 1px;
    height: 42px;
    margin: 0.6rem auto 0;
    background: linear-gradient(to bottom, var(--ash), transparent);
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1rem 1.9rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--steel);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn:hover { background: var(--panel-high); color: var(--bone); border-color: var(--ash); }

.btn-primary {
    background: var(--oxblood);
    border-color: var(--oxblood);
    color: var(--bone);
}
.btn-primary:hover { background: var(--oxblood-lt); border-color: var(--oxblood-lt); color: #fff; }

.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.68rem; }

/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem var(--gutter);
    transition: background 0.3s, border-color 0.3s;
    border-bottom: 1px solid transparent;
}

.nav.stuck {
    background: rgba(11, 11, 13, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}

.nav-logo img { height: 26px; width: auto; }

.nav-links { display: flex; gap: 1.6rem; align-items: center; }

.nav-links a {
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.nav-links a:hover { color: var(--bone); }

.nav-links .nav-signin {
    border: 1px solid var(--line);
    padding: 0.45rem 1rem;
    transition: border-color 0.2s, color 0.2s;
}
.nav-links .nav-signin:hover { border-color: var(--oxblood-lt); color: var(--bone); }

.nav-toggle { display: none; background: none; border: 0; color: var(--bone); cursor: pointer; padding: 0.5rem; }

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.about-body p { margin: 0 0 1.3rem; }
.about-body p:last-child { margin-bottom: 0; }

.fact-list { border-top: 1px solid var(--line); }

.fact {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}
.fact dt { color: var(--ash); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
.fact dd { margin: 0; color: var(--bone); text-align: right; }

/* ------------------------------------------------------------
   MIX PLAYER
   ------------------------------------------------------------ */

.player {
    border: 1px solid var(--line);
    background: var(--panel);
}

.player-now {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.player-btn {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid var(--oxblood);
    background: var(--oxblood);
    color: var(--bone);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.15s, background 0.2s;
}
.player-btn:hover { background: var(--oxblood-lt); transform: scale(1.05); }
.player-btn svg { width: 20px; height: 20px; fill: currentColor; }

.player-meta { min-width: 0; flex: 1; }
.player-title { color: var(--bone); font-weight: 600; margin: 0 0 0.2rem; }

.player-bar {
    height: 3px;
    background: var(--line);
    margin-top: 0.7rem;
    cursor: pointer;
    position: relative;
}
.player-fill { height: 100%; width: 0; background: var(--oxblood-lt); transition: width 0.1s linear; }

.mix-list { max-height: 320px; overflow-y: auto; }

.mix-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.9rem 1.5rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--steel);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mix-row:hover { background: var(--panel-high); color: var(--bone); }
.mix-row.playing { background: var(--panel-high); color: var(--bone); border-left: 2px solid var(--oxblood); }
.mix-row .num { color: var(--ash); font-size: 0.78rem; min-width: 1.5rem; }
.mix-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-row .len { color: var(--ash); font-size: 0.8rem; }

/* ------------------------------------------------------------
   CARD GRIDS
   ------------------------------------------------------------ */

.cards { display: grid; gap: 1.25rem; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
    border: 1px solid var(--line);
    background: var(--panel);
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s;
}
.card:hover { border-color: var(--ash); transform: translateY(-3px); }

.card-art { aspect-ratio: 1; background: var(--panel-high); object-fit: cover; width: 100%; }
.card-body { padding: 1.1rem; }
.card-title { color: var(--bone); font-weight: 600; margin: 0 0 0.3rem; font-size: 0.98rem; }
.card-sub { color: var(--ash); font-size: 0.82rem; margin: 0; }

.link-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }

.link-chip {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--line);
    color: var(--steel);
}
.link-chip:hover { border-color: var(--oxblood-lt); color: var(--bone); }

/* Video thumbnails keep their widescreen shape. */
.video-thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--panel-high); }

/* ------------------------------------------------------------
   GIGS
   ------------------------------------------------------------ */

.gig {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
}
.gig:first-child { border-top: 1px solid var(--line); }

.gig-date {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--bone);
    line-height: 1;
}
.gig-date .day { font-size: 2.1rem; display: block; letter-spacing: -0.03em; }
.gig-date .mon { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oxblood-lt); }

.gig-name { color: var(--bone); font-weight: 600; margin: 0 0 0.2rem; font-size: 1.05rem; }
.gig-where { color: var(--ash); font-size: 0.88rem; margin: 0; }

/* ------------------------------------------------------------
   VENUES PLAYED
   ------------------------------------------------------------ */

.venue-wall { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.venue {
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--line);
    color: var(--steel);
    font-size: 0.88rem;
}
.venue.intl { border-color: var(--oxblood); color: var(--bone); }
.venue.intl::after { content: ' \2197'; color: var(--oxblood-lt); }

/* ------------------------------------------------------------
   AVAILABILITY
   ------------------------------------------------------------ */

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 380px; }

.cal-head {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ash);
    text-align: center;
    padding: 0.4rem 0;
}

.cal-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    border: 1px solid var(--line);
    color: var(--steel);
}
.cal-day.empty { border-color: transparent; }
.cal-day.past { color: var(--line); border-color: transparent; }
.cal-day.taken { background: var(--oxblood); border-color: var(--oxblood); color: var(--bone); }

.cal-key { display: flex; gap: 1.25rem; margin-top: 1rem; font-size: 0.76rem; color: var(--ash); }
.cal-key i { display: inline-block; width: 11px; height: 11px; margin-right: 0.4rem; vertical-align: -1px; }
.cal-key .free { border: 1px solid var(--line); }
.cal-key .busy { background: var(--oxblood); }

/* ------------------------------------------------------------
   RIDER
   ------------------------------------------------------------ */

.rider { border: 1px solid var(--line); padding: 1.5rem; background: var(--panel); }
.rider h3 { margin-bottom: 1rem; }
.rider ul { list-style: none; margin: 0; padding: 0; }
.rider li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; display: flex; gap: 0.8rem; }
.rider li:last-child { border-bottom: 0; }
.rider .qty { color: var(--oxblood-lt); font-weight: 600; min-width: 1.8rem; }
.rider-section { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); margin: 1.25rem 0 0.5rem; }

/* ------------------------------------------------------------
   BOOKING FORM
   ------------------------------------------------------------ */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { margin-bottom: 1.1rem; }
.field.wide { grid-column: 1 / -1; }

.field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
    margin-bottom: 0.45rem;
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--ink);
    border: 1px solid var(--line);
    color: var(--bone);
    font-family: inherit;
    font-size: 0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--oxblood-lt); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }

/* Bots fill this. People never see it. */
.trap { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.notice { padding: 1rem 1.25rem; border-left: 3px solid; margin-bottom: 1.5rem; font-size: 0.92rem; }
.notice.good { background: rgba(63, 158, 106, 0.1); border-color: #3f9e6a; color: #a8dcc0; }
.notice.bad { background: rgba(142, 34, 48, 0.15); border-color: var(--oxblood); color: #eab5bc; }

/* ------------------------------------------------------------
   WHATSAPP BUTTON
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   WHATSAPP BUTTON
   A round button with the mark alone. The old one was a wide
   pill with a caption, which fought the corner of the screen and
   covered content on a phone. The words now appear on hover on a
   desktop, where there is room for them, and never on a phone.
   ------------------------------------------------------------ */

.wa {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #25d366;
    color: #0b1f12;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.5);
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.22s ease,
                background 0.2s ease;
}

.wa svg { width: 30px; height: 30px; fill: currentColor; display: block; }

.wa:hover,
.wa:focus-visible {
    background: #2ee071;
    color: #0b1f12;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 10px rgba(37, 211, 102, 0.14);
}

.wa:active { transform: translateY(-1px) scale(0.98); }

/* The caption slides out beside it, on a desktop only. */
.wa span {
    position: absolute;
    right: calc(100% + 0.75rem);
    white-space: nowrap;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--bone);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.6rem 0.9rem;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wa:hover span,
.wa:focus-visible span { opacity: 1; transform: translateX(0); }

/* A slow pulse the first few times, so it is noticed without nagging. */
@keyframes waPulse {
    0%   { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(37, 211, 102, 0.45); }
    70%  { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(37, 211, 102, 0); }
}
.wa { animation: waPulse 3.2s ease-out 2s 3; }
.wa:hover { animation: none; }

/* ------------------------------------------------------------
   RECORDINGS
   Two per row on desktop. justify-content centre means an odd
   last video sits centred on its own row with no extra rules,
   and the same property centres the single column on phones.
   ------------------------------------------------------------ */

.vid-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.vid {
    flex: 0 1 calc(50% - 0.75rem);
    min-width: 0;
}

.vid-face {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--panel);
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    transition: border-color 0.25s;
}

.vid-face:hover { border-color: var(--ash); }

.vid-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, opacity 0.3s;
    opacity: 0.85;
}

.vid-face:hover .vid-thumb { transform: scale(1.03); opacity: 1; }

.vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(142, 34, 48, 0.92);
    display: grid;
    place-items: center;
    transition: background 0.2s, transform 0.2s;
}

.vid-face:hover .vid-play { background: var(--oxblood-lt); transform: translate(-50%, -50%) scale(1.07); }
.vid-play svg { width: 26px; height: 26px; fill: var(--bone); margin-left: 3px; }

.vid iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    display: block;
    background: #000;
}

.vid-title {
    font-size: 0.98rem;
    color: var(--bone);
    font-weight: 600;
    margin: 0.8rem 0 0;
    letter-spacing: 0;
}

@media (max-width: 760px) {
    .vid {
        flex-basis: 100%;
        max-width: 560px;   /* one per row, centred by the container */
    }
    .vid-play { width: 56px; height: 56px; }
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.foot { padding: var(--section) var(--gutter) 2.5rem; border-top: 1px solid var(--line); }

.foot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.foot-logo { width: 190px; height: auto; margin-bottom: 1rem; }
.social-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.social {
    padding: 0.55rem 1rem;
    border: 1px solid var(--line);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}
.social:hover { border-color: var(--oxblood); color: var(--bone); }

.foot-base {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    font-size: 0.74rem;
    color: var(--ash);
    letter-spacing: 0.06em;
}

.credit a { color: var(--steel); border-bottom: 1px solid var(--oxblood); padding-bottom: 1px; }
.credit a:hover { color: var(--bone); }

/* ------------------------------------------------------------
   REVEAL ON SCROLL
   ------------------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.seen { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
    .cards-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .hero { min-height: min(100svh, 700px); }
    .hero-inner { padding: 6.5rem 0 3.25rem; }
    .hero-tag { margin-bottom: 1.8rem; }
    .scroll-cue { display: none; }

    .nav-links {
        position: fixed;
        inset: 0 0 auto;
        top: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--ink);
        padding: 5rem var(--gutter) 2rem;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        border-bottom: 1px solid var(--line);
    }
    .nav-links.open { transform: translateY(0); }
    .nav-links a { padding: 1rem 0; width: 100%; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
    .nav-links .nav-signin { border: 0; border-bottom: 1px solid var(--line); padding: 1rem 0; }

    .nav-toggle { display: block; z-index: 101; }

    .cards-4, .cards-3, .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: 1fr; }

    .gig { grid-template-columns: 74px 1fr; gap: 1rem; }
    .gig-date .day { font-size: 1.7rem; }
    .gig > :last-child { grid-column: 1 / -1; }

    .player-now { flex-wrap: wrap; }
    .wa { right: 1rem; bottom: 1rem; width: 54px; height: 54px; }
    .wa svg { width: 28px; height: 28px; }
    .wa span { display: none; }
}

@media (max-width: 460px) {
    .cards-4, .cards-3, .cards-2 { grid-template-columns: 1fr; }
    .hero-logo { width: 88vw; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
    .reveal { opacity: 1; transform: none; }
    .hero-logo, .hero-tag, .hero-actions { opacity: 1; transform: none; }
}


/* ------------------------------------------------------------
   PORTFOLIO BLOCKS
   Built from the artist's own 2026 portfolio: the lime keyline,
   the oversized statement type, the cut-out figures.
   ------------------------------------------------------------ */

.quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    color: var(--lime);
    letter-spacing: -0.01em;
    margin: 2.5rem 0 0;
    max-width: 34ch;
}

.statement {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 11vw, 8rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: var(--lime);
    margin: 0;
}
.statement em { font-style: italic; font-weight: 600; display: block; }

/* A cut-out figure, dropped in with no frame. The lime keyline is part
   of the photograph itself, so nothing is drawn around it. */
.figure-cut {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.6));
}

.about-figure {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 6vw, 4.5rem);
    align-items: center;
}

/* Career highlights, numbered the way the portfolio numbers them. */
.highlight {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.4rem;
    align-items: baseline;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line);
}
.highlight:first-of-type { border-top: 1px solid var(--line); }

.highlight-no {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--lime);
    letter-spacing: 0.1em;
}
.highlight-name { color: var(--bone); font-weight: 600; font-size: 1.1rem; margin: 0; }
.highlight-meta {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash);
}

/* Audience panel. */
.audience {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(2rem, 6vw, 4rem);
    align-items: start;
}
.audience-figure {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin-top: 2rem;
    border: 1px solid var(--line);
}

.audience-age {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3.4rem, 9vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--lime);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.tag {
    padding: 0.5rem 1rem;
    border: 1px solid var(--lime-dim);
    color: var(--lime);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Management block. */
.contact-card { border-left: 2px solid var(--lime); padding-left: 1.5rem; }
.contact-card a { color: var(--bone); border-bottom: 1px solid var(--lime-dim); }
.contact-card a:hover { color: var(--lime); }

@media (max-width: 860px) {
    .about-figure, .audience { grid-template-columns: 1fr; }
    .figure-cut { max-width: 300px; margin: 0 auto; }
}


/* ------------------------------------------------------------
   COVER BAND
   Full bleed, so it breaks the column rhythm of the page right
   before the booking form and gives the eye somewhere to land.
   ------------------------------------------------------------ */

.band {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--ink);
    display: flex;
    align-items: flex-end;
    /* A fixed, modest height. The old rule scaled with the viewport, so on
       a wide monitor the strip grew to most of the screen and pushed the
       booking form far below the fold. */
    height: clamp(220px, 26vw, 380px);
}

.band-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
}

/* The page is near black at both edges, so the photograph is faded into
   it rather than stopping at a hard line. */
.band-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(11,11,13,0.55) 0%, rgba(11,11,13,0) 30%,
                        rgba(11,11,13,0.35) 70%, rgba(11,11,13,0.92) 100%);
}

.band-line {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: var(--gutter);
    max-width: 22ch;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 4.2vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--bone);
    text-shadow: 0 2px 30px rgba(0,0,0,0.8);
}
.band-line::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 1.25rem;
    background: var(--lime);
}

@media (max-width: 760px) {
    .band { height: 210px; }
    .band-img { object-position: 68% 28%; }  /* keep him in frame, not the empty wall */
    .band-line { font-size: 1.25rem; padding: 1.25rem; }
    .band-line::after { width: 44px; height: 2px; margin-top: 0.8rem; }
}

/* ------------------------------------------------------------
   TRACK LISTS
   An album keeps its tracks folded away, so a row of releases still
   reads as covers rather than a wall of song titles.
   ------------------------------------------------------------ */

.tracklist { margin-top: 0.75rem; }

.tracklist summary {
    cursor: pointer;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
    list-style: none;
    padding: 0.35rem 0;
}
.tracklist summary::-webkit-details-marker { display: none; }
.tracklist summary::after { content: ' +'; }
.tracklist[open] summary::after { content: ' \2212'; }
.tracklist summary:hover { color: var(--bone); }

.tracklist ol {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    border-left: 1px solid var(--line);
    list-style: decimal;
}
.tracklist li { font-size: 0.84rem; color: var(--ash); padding: 0.22rem 0; }
.tracklist li a { color: var(--steel); }
.tracklist li a:hover { color: var(--bone); }

/* ------------------------------------------------------------
   PLAYABLE RELEASES
   ------------------------------------------------------------ */

.art-play {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
}
.art-play .card-art { transition: transform 0.35s ease, opacity 0.3s; }
.art-play:hover .card-art { transform: scale(1.04); opacity: 0.9; }

.art-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(142, 34, 48, 0.92);
    display: grid;
    place-items: center;
    transition: background 0.2s, transform 0.2s;
}
.art-play-icon svg { fill: var(--bone); margin-left: 2px; }
.art-play:hover .art-play-icon { background: var(--oxblood-lt); transform: translate(-50%, -50%) scale(1.08); }

.release-stage iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-bottom: 1px solid var(--line);
    display: block;
    background: #000;
}

.track-play {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--steel);
    text-align: left;
    cursor: pointer;
}
.track-play:hover { color: var(--bone); }
.track-play.playing { color: var(--lime); }
.track-play.playing::after { content: ' \25B6'; font-size: 0.7em; }

/* ------------------------------------------------------------
   SHOW MORE
   ------------------------------------------------------------ */

.show-more-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.show-more { min-width: 200px; justify-content: center; }
.show-more:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* Without JavaScript nothing is hidden, so the whole list stays readable. */
.paged > [hidden] { display: none; }

/* ------------------------------------------------------------
   MIX ROW TOOLS
   The row is a container now rather than one big button, because a
   button cannot legally hold another button or a link, and share and
   download have to sit inside the row.
   ------------------------------------------------------------ */

.mix-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--steel);
}
.mix-row:hover { background: var(--panel-high); }
.mix-row.playing { background: var(--panel-high); border-left: 2px solid var(--oxblood); }

.mix-play {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.9rem 0 0.9rem 1.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mix-play:hover { color: var(--bone); }
.mix-row.playing .mix-play { color: var(--bone); }

.mix-stats {
    display: flex;
    gap: 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ash);
    white-space: nowrap;
}

.mix-tools { display: flex; gap: 0.35rem; padding-right: 1rem; flex: 0 0 auto; }

.mix-tool {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ash);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.mix-tool:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-1px); }
.mix-tool svg { width: 15px; height: 15px; fill: currentColor; }
.mix-tool.copied { border-color: var(--lime); color: var(--lime); }

@media (max-width: 620px) {
    .mix-stats { display: none; }          /* the row is tight enough already */
    .mix-play { padding-left: 1rem; gap: 0.7rem; }
    .mix-tools { padding-right: 0.6rem; }
}

/* ------------------------------------------------------------
   GALLERY
   ------------------------------------------------------------ */

.shot-open {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
}
.shot-open .card-art { transition: transform 0.4s ease, opacity 0.3s; }
.shot-open:hover .card-art { transform: scale(1.05); opacity: 0.92; }

.shot-zoom {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: rgba(11, 11, 13, 0.72);
    border: 1px solid var(--line);
    color: var(--bone);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s, transform 0.25s;
}
.shot-zoom svg { fill: currentColor; }
.shot-open:hover .shot-zoom, .shot-open:focus-visible .shot-zoom { opacity: 1; transform: none; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(6, 6, 8, 0.94);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: clamp(1rem, 4vw, 3rem);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }

.lightbox-body { margin: 0; text-align: center; min-width: 0; }
.lightbox-body img {
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    object-fit: contain;
    border: 1px solid var(--line);
}
.lightbox-body figcaption {
    margin-top: 1rem;
    font-size: 0.86rem;
    color: var(--ash);
    letter-spacing: 0.04em;
}

.lightbox-close, .lightbox-prev, .lightbox-next {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--bone);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 0.2s, color 0.2s;
}
.lightbox-prev, .lightbox-next { width: 48px; height: 48px; font-size: 1.9rem; line-height: 1; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; font-size: 1.6rem; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { border-color: var(--lime); color: var(--lime); }

@media (max-width: 620px) {
    .lightbox { grid-template-columns: 1fr; padding: 1rem; }
    .lightbox-prev, .lightbox-next { display: none; }   /* swiping instead */
    .lightbox-body img { max-height: 70vh; }
    .shot-zoom { opacity: 1; transform: none; }
}