/* ============================================================
   DJ Shufflemore — deliberately NOT the deck.
   The deck (site.css) is warm and archival: Deco frames, gold and
   oxblood, Limelight/Spectral, paper texture. This side is flat and
   modern: slate ground, one accent spent sparingly, a single
   geometric grotesk, hairline rules, no texture or gradients.
   ============================================================ */

:root {
    --ground: #0f1519;
    --raise: #18222a;
    --line: #27343d;
    --ink: #eef3f6;
    --muted: #91a3b0;
    --accent: #35e0c1;
    --accent-lift: #55f0d4;
    --accent-ink: #04231e;

    --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --shell: 64rem;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--ground);
    color: var(--ink);
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--accent); }

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

main {
    flex: 1;
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-block: 3rem 4rem;
    padding-inline: 1.5rem;
}

/* ------------------------------- chrome ------------------------------- */

.dj-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
    max-width: var(--shell);
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.dj-mark {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.dj-nav { display: flex; gap: 1.5rem; }

.dj-nav a {
    color: var(--muted);
    font-size: 0.95rem;
    text-decoration: none;
}

.dj-nav a:hover { color: var(--ink); }

.dj-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    max-width: var(--shell);
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9rem;
}

.dj-foot a { color: var(--muted); }

/* -------------------------------- hero --------------------------------
   Photo left: the eye enters top-left, and a face there makes him a
   person rather than a handle — the name then reads as its caption.
   Both columns carry similar weight, so the photo cannot strand itself
   the way it did beside a full-height column of bio text. */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    padding-bottom: 3rem;
}

.hero-figure { margin: 0; }

.hero-figure img {
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* the photographer's signature is in the frame; this repeats it legibly */
.hero-figure figcaption {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.hero-intro { min-width: 0; }

.hero h1 {
    margin: 0;
    font-size: clamp(2.4rem, 5.2vw, 3.9rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.035em;
}

.lead {
    margin: 0.9rem 0 0;
    font-size: 1.2rem;
    color: var(--muted);
}

/* the rule separates a live fact from the identity above it */
.next {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.next-label {
    display: block;
    font-size: 0.9rem;
    color: var(--muted);
}

.next-event {
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--accent);
}

.next-event a { color: inherit; text-decoration: none; }
.next-event a:hover { text-decoration: underline; text-decoration-color: currentColor; }

.next-meta { margin: 0.3rem 0 0; color: var(--muted); }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0 0;
}

.actions-hint { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--muted); }
.actions-hint a { color: var(--muted); }

.btn {
    display: inline-block;
    padding: 0.7rem 1.35rem;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    font-size: 0.98rem;
    border-radius: 2px;
    text-decoration: none;
}

.btn:hover { background: var(--accent-lift); }

.btn-quiet {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
}

.btn-quiet:hover { background: var(--raise); box-shadow: inset 0 0 0 1px var(--muted); }

/* --------------------------------- bio ---------------------------------
   Two independent paragraphs — history, then how he reads a floor — so
   they sit side by side without forcing a newspaper-style column jump,
   and neither runs past a comfortable measure. */

.bio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}

.bio p { margin: 0; color: var(--muted); }

/* -------------------------------- deck ---------------------------------
   The deck gets its own band, not a panel: three real card fronts dealt
   as a fanned hand. They are the only warm colour on the page, so the
   crossing into the deck's world is seen before it is read. Copy sits
   left on the page's text edge; the hand sits right, opposite the hero
   photo. Pointing at the band spreads the hand a little, like a hand
   being offered. */

.deck {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 3rem;
    align-items: center;
    margin-top: 2.75rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--line);
}

.deck h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.deck-lead { margin: 0.9rem 0 0; max-width: 30rem; color: var(--muted); }

.deck .actions { margin-top: 1.5rem; }

.fan {
    position: relative;
    display: block;
    width: 100%;
    max-width: 28rem;
    aspect-ratio: 28 / 18;
    justify-self: center;
}

/* Cards are 400x605; the rounding matches a printed card's corners. */
.fan img {
    position: absolute;
    left: 33%;
    top: 5%;
    width: 34%;
    height: auto;
    border-radius: 4.5% / 3%;
    box-shadow: 0 1.4rem 2.2rem -1rem rgb(0 0 0 / 0.8), 0 0 0 1px rgb(0 0 0 / 0.35);
    transform-origin: 50% 120%;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fan img:nth-child(1) { transform: translateX(-74%) rotate(-10deg); }
.fan img:nth-child(2) { z-index: 1; transform: translateY(-3%); }
.fan img:nth-child(3) { transform: translateX(74%) rotate(10deg); }

.deck:hover .fan img:nth-child(1),
.deck:focus-within .fan img:nth-child(1) { transform: translateX(-86%) rotate(-14deg); }
.deck:hover .fan img:nth-child(2),
.deck:focus-within .fan img:nth-child(2) { transform: translateY(-7%); }
.deck:hover .fan img:nth-child(3),
.deck:focus-within .fan img:nth-child(3) { transform: translateX(86%) rotate(14deg); }

/* ------------------------------- panels ------------------------------- */

.page-head h1 {
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 6vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.panel {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.panel h2 {
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--muted);
}

.panel-lead { max-width: 36rem; color: var(--muted); }

.empty { margin: 0; color: var(--muted); }
.more { margin: 1.5rem 0 0; }

/* -------------------------------- gigs -------------------------------- */

.gigs { list-style: none; margin: 0; padding: 0; }

.gig {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 0.25rem 2rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}

.gig:first-child { border-top: 1px solid var(--line); }

.gig-when {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-variant-numeric: tabular-nums;
}

.gig-when time { font-weight: 600; }

.gig-set { color: var(--muted); font-size: 0.9rem; }

.gig-what { min-width: 0; }

.gig-what h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.gig-what h3 a { text-decoration: none; }
.gig-what h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.gig-where { margin: 0.2rem 0 0; color: var(--muted); }
.gig-note { margin: 0.5rem 0 0; color: var(--muted); }

.gig-archive { margin: 0.5rem 0 0; font-size: 0.9rem; }
.gig-archive a { color: var(--muted); }

/* Upcoming / Played labels inside a panel. */
.sub {
    margin: 2rem 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.panel h2 + .sub, .series-head + .sub { margin-top: 0; }

/* A regular social: described once, then its dates. */
.series + .series { margin-top: 2.5rem; }

.series-head { margin-bottom: 1.25rem; }
.series-head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.series-head h3 a { text-decoration: none; }
.series-head h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.dates { list-style: none; margin: 0; padding: 0; }
.date {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 0.25rem 2rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.date:first-child { border-top: 1px solid var(--line); }
.date time { font-weight: 600; }
.date-note { grid-column: 2; color: var(--muted); }

/* ------------------------------ responsive ------------------------------
   Photo first when stacked: on a phone a face at the top reads better
   than one buried under the copy. */

@media (max-width: 56rem) {
    .hero {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding-bottom: 2.5rem;
    }
    .hero-figure { max-width: 16rem; }
    .bio { grid-template-columns: 1fr; gap: 1.25rem; }
    /* hand above the copy when stacked, as the photo sits above the name */
    .deck { grid-template-columns: 1fr; }
    .fan { order: -1; width: 88%; max-width: 22rem; }
}

@media (max-width: 34rem) {
    main { padding-inline: 1.25rem; }
    .dj-bar, .dj-foot { padding-inline: 1.25rem; }
    .gig { grid-template-columns: 1fr; gap: 0.35rem; }
    .gig-when { flex-direction: row; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
    .date { grid-template-columns: 1fr; gap: 0.15rem; }
    .date-note { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}