/* ==========================================================================
   THE ZACK STATIC SECT — DESIGN C: DISCHORD
   Bone on black. No texture, no rotation, no ornament. A tight utilitarian
   grid and one red accent used sparingly. Fugazi / Dischord house style.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Archivo:wght@400;500;600&display=swap');

:root {
    --black: #101010;
    --bone:  #e6e4dd;
    --dim:   #8a8880;
    --line:  #2e2e2c;
    --red:   #c9412c;

    /* lightbox */
    --lb-paper: #e6e4dd;
    --lb-accent: #c9412c;
    --lb-ink: #101010;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.dischord {
    background: var(--black);
    color: var(--bone);
    font-family: 'Archivo', system-ui, sans-serif;
    min-height: 100vh;
    padding-block: clamp(2rem, 6vw, 4.5rem);
    padding-left: 16px;
    padding-right: 16px;
}

.jump { position: absolute; left: -9999px; }
.jump:focus { left: 1rem; top: 1rem; background: var(--bone); color: var(--black); padding: 0.5rem 1rem; z-index: 10; }

.sheet {
    max-width: 680px;
    margin: 0 auto;
}

/* --- Masthead ----------------------------------------------------------- */
.masthead { margin-bottom: clamp(2.5rem, 8vw, 4.5rem); }

.origin {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: clamp(0.85rem, 3vw, 1.5rem);
}

.name {
    display: flex;
    flex-direction: column;
    font-family: 'Barlow Condensed', 'Archivo Narrow', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: 0.005em;
}
.name span:nth-child(1) { font-size: clamp(0.9rem, 3vw, 1.3rem); letter-spacing: 0.22em; color: var(--dim); font-weight: 500; }
.name span:nth-child(2),
.name span:nth-child(3) { font-size: clamp(2.6rem, 12vw, 6rem); }

.rule-line {
    height: 0;
    border-top: 1px solid var(--line);
    margin-top: clamp(1.25rem, 4vw, 2rem);
}

/* --- Section bars: a label and a hairline, nothing more ----------------- */
.band-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.55rem;
    margin-top: clamp(2.25rem, 7vw, 3.5rem);
    margin-bottom: clamp(0.85rem, 3vw, 1.4rem);
}
.band-bar h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(0.78rem, 2.4vw, 0.92rem);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    line-height: 1.2;
    /* Same accent as the venue underlines. */
    color: var(--red);
}

.switch { display: flex; gap: 1rem; }
.switch a {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
    text-decoration: none;
}
.switch a:hover { color: var(--bone); }
.switch a[aria-current="page"] { color: var(--bone); }

/* --- Show list: a plain register --------------------------------------- */
.gigs { list-style: none; }

.gig {
    display: grid;
    grid-template-columns: auto 4rem 1fr auto;
    align-items: baseline;
    gap: clamp(0.75rem, 3vw, 1.5rem);
    padding: clamp(0.8rem, 2.6vw, 1.05rem) 0;
    border-bottom: 1px solid var(--line);
}

/* The date stamp. Two lines, always: MONTH DAY over YEAR. The day is
   zero-padded and the figures are tabular, so every stamp in the column
   is the same width and nothing can reflow between rows. */
.gig-date {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}
.d-month,
.d-year {
    font-size: clamp(0.7rem, 2.1vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--dim);
}
.d-month { margin-right: 0.3em; }
.d-day {
    font-size: clamp(1.3rem, 4.3vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.d-year { display: block; margin-top: 0.15rem; }

.gig-main { min-width: 0; }
.venue {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 4.4vw, 1.8rem);
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0.01em;
}
.venue a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--red);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}
.venue a:hover { color: var(--red); text-decoration-color: var(--red); }

.with {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(0.88rem, 2.8vw, 1.05rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bone);
    margin-top: 0.4rem;
}

.where {
    font-size: clamp(0.68rem, 2.1vw, 0.76rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    margin-top: 0.3rem;
}

.when { text-align: right; }
.when span {
    display: block;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}
.when strong {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(0.9rem, 2.8vw, 1.1rem);
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

@media (max-width: 540px) {
    .gig { grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; }
    /* The button is the grid item now, not the image inside it. */
    .gig-poster-btn,
    .gig-poster-none { grid-row: 1 / span 4; align-self: start; }
    .when { text-align: left; }
    .when span, .when strong { display: inline; }
    .when strong { margin-left: 0.4rem; }
}

.note {
    padding: 1.25rem 0;
    font-size: 0.95rem;
    color: var(--dim);
    border-bottom: 1px solid var(--line);
}

/* --- Outlets: outlined buttons ------------------------------------------ */
.outlets {
    list-style: none;
    display: grid;
    /* Even columns that drop to two, then one, as the screen narrows. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(0.6rem, 2vw, 1rem);
}
.outlets a {
    display: block;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(1.35rem, 4.4vw, 1.9rem);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.1;
    color: var(--bone);
    text-decoration: none;
    border: 2px solid var(--dim);
    padding: clamp(0.85rem, 3vw, 1.25rem) 1rem clamp(0.95rem, 3.2vw, 1.35rem);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.outlets a:hover,
.outlets a:focus-visible {
    border-color: var(--red);
    background: var(--red);
    color: var(--black);
    outline: none;
}

/* --- Poster wall -------------------------------------------------------- */
.wall {
    list-style: none;
    /* A real grid, not CSS columns: multi-column flows DOWN each column, so a
       reader scanning across a row sees the years jump around. This fills row
       by row, which is the order the posters are actually sorted in. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: clamp(0.6rem, 2vw, 1.1rem);
    align-items: start;
}
.wall li {
    display: flex;
    flex-direction: column;
}
.wall img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    filter: grayscale(1) contrast(1.1);
    transition: filter 0.2s ease;
}
.wall li:hover img { filter: none; }
.wall p {
    margin-top: 0.35rem;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
}

/* --- Footer ------------------------------------------------------------- */



/* --- Poster stub on each show row --------------------------------------- */
.gig-poster-btn {
    width: clamp(30px, 7vw, 40px);
    flex: 0 0 auto;
    cursor: zoom-in;
}
.gig-poster {
    display: block;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    border: 1px solid var(--line); filter: grayscale(1) contrast(1.1);
}
.gig-poster-none {
    width: clamp(30px, 7vw, 40px);
    /* Keeps the columns aligned for shows with no poster yet. */
    aspect-ratio: 1;
    border-color: transparent;
    background: none;
}
@media (max-width: 540px) {
    .gig-poster-btn { width: 28px; }
}