/* jptb-skin.css — (whitespace + rules),
   while keeping palette. */
/* =========================
   Tokens
========================= */
:root {
    --paper: #F4F1E8;
    --ink: #111111;
    --muted: rgba(17,17,17,.62);
    --rule: rgba(17,17,17,.18);
    --red: #8B1E24;
    --card: #ffffff;

    /* Section slabs — set equal to --paper to remove visible striping */
    --band: var(--paper);
    --band-alt: var(--paper);
    --max: 72rem;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", Times, serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* =========================
   Base / reset
========================= */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.55;
    overflow-x: hidden;
}

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

p,
li,
a,
.mono {
    overflow-wrap: anywhere;
    word-break: break-word;
}

a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
}

a:hover {
    color: var(--red);
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* SVG sprite hidden */
.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Skip link */
.skip {
    position: absolute;
    left: -999px;
    top: 0;
    background: #fff;
    border: 1px solid var(--rule);
    padding: .5rem .75rem;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 999;
}

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

/* =========================
   Header
========================= */
.site {
    background: color-mix(in srgb, var(--paper) 88%, white);
    border-bottom: 1px solid var(--rule);
}

.topbar {
    max-width: var(--max);
    margin: 0 auto;
    padding: .9rem clamp(1.25rem, 2.5vw, 2rem);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    font-size: .95rem;
    white-space: nowrap;
}

.nav {
    display: flex;
    gap: .65rem;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 16rem;
}

.nav a {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    opacity: .9;
    white-space: nowrap;
}

.nav a + a::before {
    content: "|";
    margin-right: .65rem;
    opacity: .35;
}

.top-icons {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: flex-end;
}

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    color: rgba(17,17,17,.75);
    text-decoration: none;
}

.ico {
    height: 1.05rem;
    width: 1.05rem;

    /* lock aspect so nothing “floats” */
    display: block;
    color: currentColor;
}

.ico.yt {
    width: 1.25rem;

    /* wider box for YouTube */
    height: 1.05rem;
}

.icon-link:hover {
    color: var(--red);
}

/* =========================
   Layout helpers
========================= */
.grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.grid > * {
    min-width: 0;
}

.stack {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* internal tiles only */
@media (min-width: 900px){
    .grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================
   Sections + slabs
========================= */
.section,
.footer {
    position: relative;
    z-index: 0;
}

.band::before,
.band-alt::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
}

.band::before {
    background: var(--band);
}

.band-alt::before {
    background: var(--band-alt);
}

.section {
    padding: clamp(1.75rem, 3.2vw, 2.75rem) 0;
}

.section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.section-head.tight {
    margin-bottom: .85rem;
}

.section-head h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .95rem;
    white-space: nowrap;
}

.section-rule {
    height: 1px;
    flex: 1 1 auto;
    background: var(--rule);
}

/* =========================
   Panels
========================= */
.panel {
    background: var(--card);
    border: 1px solid var(--rule);
    padding: clamp(1rem, 2vw, 1.35rem);
}

/* =========================
   Hero
========================= */
:root {
    --font-h1: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", Arial, sans-serif;
}

.hero {
    padding-top: clamp(2rem, 6vw, 4rem);
    padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.kicker {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 .9rem;
    color: var(--muted);
}

h1 {
    font-family: var(--font-h1);
    font-weight: 400;

    /* Anton is single-weight */
    letter-spacing: 0.02em;

    /* optional */
}

.lead {
    margin: .9rem 0 0;
    max-width: 56ch;
    font-size: 1.05rem;
    color: rgba(17,17,17,.78);
}

.lineup {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    display: grid;
    gap: .35rem;
}

.cta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Hero image “parks” right (still stacked, not two columns) */
.hero-media {
    margin: clamp(1.25rem, 3vw, 2rem) 0 0 auto;
    max-width: 34rem;
    border: 1px solid var(--rule);
    background: #fff;
}

.hero-media img {
    width: 100%;
    height: auto;
}

/* =========================
   Buttons
========================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border: 1px solid rgba(17,17,17,.75);
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 0;
}

.btn:hover {
    border-color: var(--red);
    color: var(--red);
}

.btn.primary {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.btn.primary:hover {
    filter: brightness(.95);
    color: #fff;
}

/* =========================
   Text helpers
========================= */
.muted {
    color: var(--muted);
}

.small {
    font-size: .92rem;
}

.mono {
    font-family: var(--mono);
}

/* =========================
   Live
========================= */
.stamp {
    display: inline-flex;
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
    border: 1px solid var(--red);
    padding: .35rem .5rem;
}

.nextGig {
    margin-top: .9rem;
    padding: 1rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

/* Works whether you use class or just the id */
#gigList,
.gigList {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
}

.gig {
    display: grid;
    grid-template-columns: 9.5rem 1fr auto;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--rule);
}

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

.gig .date {
    font-family: var(--mono);
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(17,17,17,.8);
}

.gig .action a {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(17,17,17,.35);
}

/* =========================
   Links / press kit (tight + fills desktop)
========================= */
.linksPanel {
    padding: 1rem;
}

.linksGrid {
    margin-top: .75rem;
    display: grid;
    gap: .35rem;
}

.chanRow {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .35rem;
    text-decoration: none;
    border: 1px solid transparent;
}

.chanRow .ico {
    color: rgba(17,17,17,.72);
}

.chanRow:hover {
    border-color: var(--rule);
    background: color-mix(in srgb, var(--paper) 70%, white);
}

.chanRow:hover .ico {
    color: var(--red);
}

.chanName {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(17,17,17,.9);
}

.linksRule {
    height: 1px;
    background: var(--rule);
    margin: .9rem 0;
}

.pressKitRow {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .85rem;
    padding: .55rem .35rem;
}

.pressKitTitle {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pressKitDesc {
    margin-top: .2rem;
}

.pressKitBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .85rem;
    border: 1px solid rgba(17,17,17,.75);
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pressKitBtn:hover {
    border-color: var(--red);
    color: var(--red);
}

@media (min-width: 900px){
    .linksGrid {
        grid-template-columns: repeat(2, minmax(14rem, 1fr));
        column-gap: 1.25rem;
    }
}

/* =========================
   Embeds
========================= */
.embedWrap {
    margin-top: .85rem;
}

/* Centre the embed so it doesn’t look “stuck left” on wide screens */
.embedWrap.bcCenter {
    display: flex;
    justify-content: center;
}

.embed {
    width: 100%;
    border: 0;
    background: #fff;
}

/* Bandcamp: cap width so the iframe doesn’t sit in a huge white void */
.embed.bc {
    width: 100%;
    max-width: 44rem;
    border: 0;
    background: #fff;
}

/* Immediate fix with your current HTML (uses existing aria-labels on the wrapper) */
.embedWrap[aria-label="Current single"] .embed.bc { height: 472px; }
.embedWrap[aria-label="Current album"]  .embed.bc { height: 786px; }

/* Recommended going forward: add bc--track / bc--album classes on the iframe */
.embed.bc--track { height: 472px; }
.embed.bc--album { height: 786px; }

/* Backwards-compatible fallback: if no modifier/label matches, assume album height */
.embed.bc:not(.bc--track):not(.bc--album) { height: 786px; }

.embed.video {
    aspect-ratio: 16 / 9;
}

/* =========================
   Media thumbs / headings
========================= */
.thumb {
    margin: 0;
    border: 1px solid var(--rule);
    background: #fff;
}

.thumb img {
    width: 100%;
    height: auto;
}

.h3 {
    margin: 0 0 .5rem;
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .9rem;
}

/* =========================
   Form
========================= */
.field {
    width: 100%;
    padding: .75rem .8rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: #fff;
    font: inherit;
}

.field:focus {
    outline: 2px solid color-mix(in srgb, var(--red) 35%, transparent);
    outline-offset: 2px;
    border-color: rgba(17,17,17,.55);
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Keep Turnstile inside the panel on narrow screens */
.cf-turnstile,
.cf-turnstile > div,
.cf-turnstile iframe {
    max-width: 100% !important;
}

/* =========================
   Footer
========================= */
.footer {
    padding: 2.25rem 0 3rem;
}

.footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 2.5vw, 2rem);
}

.footer-rule {
    height: 1px;
    background: var(--rule);
    margin-bottom: 1rem;
}

/* Photos: masonry-style stagger (no JS) */
.photoMasonry {
    column-count: 1;
    column-gap: 1rem;
}

@media (min-width: 700px){
    .photoMasonry {
        column-count: 2;
    }
}

@media (min-width: 1100px){
    .photoMasonry {
        column-count: 3;
    }
}

.photoMasonry .thumb {
    break-inside: avoid;
    margin: 0 0 1rem;
    display: inline-block;

    /* required for columns */
    width: 100%;
    vertical-align: top;
}

/* Make images behave */
.photoMasonry .thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* Stagger: gentle offsets that don’t overlap */
@media (min-width: 1100px){
    .photoMasonry .thumb:nth-child(3n+2) {
        margin-top: .6rem;
    }

    .photoMasonry .thumb:nth-child(3n) {
        margin-top: 1.2rem;
    }
}

/* Masthead banner */
.masthead {
    background: #0f0f10;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.masthead .wrap {
    padding: .75rem 0;
}

.masthead-img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   Motion: scroll reveal (safe + subtle)
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(1px);
    transition: opacity 520ms ease,
    transform 520ms ease,
    filter 520ms ease;
    will-change: opacity, transform;
}

.reveal.in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Motion: micro-hover lift for buttons + thumbs
   ========================================================= */
.btn {
    transition: transform 180ms ease, filter 180ms ease;
}

.btn:hover {
    transform: translate3d(0, -2px, 0);
    filter: brightness(1.02);
}

.btn:active {
    transform: translate3d(0, 0, 0);
}

/* Photo thumbs: gentle tilt + zoom */
.thumb {
    overflow: hidden;
    border-radius: 14px;

    /* adjust to your taste */
}

.thumb img {
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform 260ms ease, filter 260ms ease;
    will-change: transform;
}

.thumb:hover img {
    transform: translate3d(0, -2px, 0) scale(1.03) rotate(-0.15deg);
    filter: contrast(1.03);
}

/* Optional: make the hero media feel “present” */
.hero-media img {
    transition: transform 320ms ease, filter 320ms ease;
}

.hero-media:hover img {
    transform: scale(1.01);
    filter: contrast(1.02);
}

/* Subtle animated grain overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: .08;

    /* tune 0.05–0.12 */
    background-image: url("/assets/img/grain.png");

    /* <- your path */
    background-repeat: repeat;
    mix-blend-mode: overlay;

    /* try soft-light if you prefer */
    animation: grainDrift 7s steps(7) infinite;
}

@keyframes grainDrift{
    0% {
        transform: translate3d(0,0,0);
    }

    100% {
        transform: translate3d(-2%, 2%, 0);
    }
}

@media (prefers-reduced-motion: reduce){
    body::before {
        animation: none;
    }
}

/* =========================
   Mobile: centred header + 3/2 nav
   + stop tiny-screen overflow in panels
========================= */
@media (max-width: 720px){
    /* tighten the site padding a touch */
    .wrap {
        padding: 1rem;
    }

    .panel {
        padding: .9rem;
    }

    /* keep existing non-header mobile tweaks */
    .gig {
        grid-template-columns: 1fr;
    }

    .hero-media {
        max-width: 100%;
        margin-left: 0;
    }

    .pressKitRow {
        grid-template-columns: 1fr;
    }

    .pressKitBtn {
        justify-self: start;
    }

    /* header layout */
    .topbar {
        justify-content: center;
        gap: .65rem 1rem;
    }

    .topbar > * {
        min-width: 0;
    }

    .brand {
        flex: 0 0 100%;
        text-align: center;
        white-space: normal;

        /* allow wrapping */
        overflow-wrap: anywhere;
        font-size: clamp(.9rem, 4vw, 1.05rem);
    }

    .nav {
        flex: 0 0 100%;
        min-width: 0;

        /* override the 16rem */
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: center;
        gap: .35rem .75rem;
        text-align: center;
    }

    /* remove the pipes on mobile */
    .nav a + a::before {
        content: none !important;
    }

    .nav a {
        padding: .25rem .35rem;
        white-space: nowrap;
    }

    .top-icons {
        flex: 0 0 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: .75rem;
    }
}