/* Hallmark · genre: editorial · macrostructure: Catalogue · theme: Saluuna (dark editorial re-cut)
 * REDESIGN of the previous build (atmospheric · Marquee Hero · Midnight · N5 · Ft5).
 * Catalogue knobs: rows=6, rule density=every row, next-night highlighted on bone
 * nav: N6 Newspaper masthead (issue line above · wordmark 3xl · double rule)
 * footer: Ft4 Dense colophon (body face · single block · address + date)
 * enrichment: user-supplied photography (cover + secondary), no generated imagery
 * tone: warm dim · audience: bar customers · use: what's on, when open, where
 * anchor hue: 45 · accent: hot ember (38), under 3% of viewport
 * axes — paper: dark · display: heavy-serif (Fraunces 700–900) · accent: hot warm
 * type: 2 families (Fraunces display + Geist body), no outlier
 * contrast: pass (40–41), measured per element · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 50–57)
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 */

/* ══════════════ Reset + ground ══════════════ */

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

html {
  overflow-x: clip;
  scroll-padding-top: var(--space-xl);
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 350;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* One warm bloom, top-centred behind the masthead — the lamp over the door.
 * Editorial genre keeps this restrained: a single source, fixed, no animation. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(70% 40% at 50% -6%,
      color-mix(in oklch, var(--color-accent) 30%, transparent) 0%,
      color-mix(in oklch, var(--color-accent) 9%, transparent) 46%,
      transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer, section { position: relative; z-index: var(--z-base); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-md);
  z-index: var(--z-modal);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bone);
  color: var(--color-bone-ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.skip:focus-visible { inset-block-start: var(--space-md); }

/* Small tracked label register — carried by the body face, not a third font. */
.label,
.mast__issue,
.head__meta,
.note,
.facts dt,
.gig__tag,
.sample {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

.note {
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.5;
}

.gutter,
.mast,
.facts,
.programme,
.talo,
.band,
.colophon {
  padding-inline: var(--page-gutter);
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* Slot still waiting on a real value. */
.ph {
  display: inline-block;
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  background: var(--color-paper-3);
  border: var(--rule-hair) dashed var(--color-rule-strong);
  border-radius: var(--radius-xs);
  padding: var(--space-3xs) var(--space-xs);
}

/* ══════════════ N6 · Newspaper masthead ══════════════ */

.mast {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-lg) 0;
  text-align: center;
}

.mast__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
  font-weight: 700;
  font-size: var(--text-mast);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  min-width: 0;
}

.mast__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  padding-block-start: var(--space-2xs);
}

.mast__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.mast__nav a:hover { color: var(--color-accent); }
.mast__nav a:active { color: var(--color-ink); }

.mast__rule {
  border: 0;
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  border-block-end: var(--rule-hair) solid var(--color-rule-strong);
  height: 4px;
  width: 100%;
  margin-block-start: var(--space-sm);
}

/* ══════════════ The room — full-bleed cover ══════════════ */

.cover {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 58%;
}

/* Hands the photograph off to the dark page instead of butting it against a hard edge. */
.cover::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 28%;
  pointer-events: none;
  background-image: linear-gradient(to bottom,
    transparent 0%,
    var(--color-paper) 100%);
}

@media (min-width: 46rem) {
  .cover img { aspect-ratio: 16 / 7; }
}

/* ══════════════ Info bar ══════════════ */

.facts { padding-block: var(--space-lg) var(--space-2xl); }

.facts__grid {
  display: grid;
  gap: var(--space-lg);
}

.facts__cell {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}

.facts__big {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.sample { color: var(--color-neutral); }

@media (min-width: 46rem) {
  .facts__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-xl); }
}

/* ══════════════ Catalogue · the programme ══════════════ */

.programme { padding-block: 0 var(--space-3xl); }

.head { padding-block-end: var(--space-lg); }

.head h2 {
  font-variation-settings: "opsz" 100, "WONK" 1;
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.head__meta { padding-block-start: var(--space-sm); }

.gigs { border-block-start: var(--rule-hair) solid var(--color-rule); }

.gig {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas:
    "tag  tag"
    "day  name"
    "date name"
    "date meta";
  column-gap: var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.gig__tag {
  grid-area: tag;
  padding-block-end: var(--space-sm);
  color: var(--color-accent);
}
.gig:not([data-next]) .gig__tag { display: none; }

.gig__day {
  grid-area: day;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

.gig__date {
  grid-area: date;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "WONK" 1;
  font-weight: 800;
  font-size: var(--text-date);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  white-space: nowrap;
}

.gig__name {
  grid-area: name;
  font-variation-settings: "opsz" 110, "WONK" 1;
  font-weight: 600;
  font-size: var(--text-gig);
  line-height: 1.08;
  letter-spacing: -0.025em;
  padding-block-end: var(--space-xs);
}

.gig__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.gig__time { font-variant-numeric: tabular-nums; }
/* Accent earns its place here: it marks the ticketed nights — the ones you'd
 * plan around — so it stays a signal instead of decorating every row. */
.gig__price { color: var(--color-accent); }
.gig__price--free { color: var(--color-muted); }
.gig__price::before { content: "· "; color: var(--color-rule-strong); }

/* The next night sits on bone — the page's one light surface.
 * Dark ink swaps in on the same rule, so nothing inherits light-on-light. */
.gig[data-next] {
  background: var(--color-bone);
  color: var(--color-bone-ink);
  /* Full-bleed: the negative margin matches the gutter exactly, so the band
   * reaches both edges without pushing the document past the viewport. */
  padding-inline: var(--page-gutter);
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  margin-inline: calc(var(--page-gutter) * -1);
  border-block-end-color: transparent;
}
.gig[data-next] .gig__name,
.gig[data-next] .gig__date { color: var(--color-bone-ink); }
.gig[data-next] .gig__day,
.gig[data-next] .gig__meta { color: var(--color-bone-muted); }
.gig[data-next] .gig__tag { color: var(--color-bone-ink); }
/* Accent measures 2.4:1 on bone — too weak for text, so the highlighted row
 * carries its price in bone ink instead. */
.gig[data-next] .gig__price { color: var(--color-bone-ink); }
.gig[data-next] .gig__price::before { color: var(--color-bone-muted); }

.programme .note { padding-block-start: var(--space-lg); }

@media (min-width: 52rem) {
  .gig {
    /* max-content, not a ch value: `ch` resolves against the row's inherited
     * 16px, but the date renders at ~3.75rem and would overflow its track
     * straight into the event name. */
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "day  tag   ."
      "date name  meta";
    column-gap: var(--space-xl);
    padding-block: var(--space-xl);
  }
  .gig__tag { padding-block-end: 0; align-self: end; }
  .gig__day { align-self: end; padding-block-end: var(--space-2xs); }
  .gig__meta { justify-content: flex-end; text-align: end; white-space: nowrap; }
  .gig__name { padding-block-end: 0; }
}

/* ══════════════ Talo ══════════════ */

.talo {
  padding-block: var(--space-2xl) var(--space-3xl);
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.talo__text { display: grid; gap: var(--space-md); }

.talo__figure { margin: 0; display: grid; gap: var(--space-sm); }

.talo__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--radius-xs);
}

@media (min-width: 60rem) {
  /* minmax(0, …), never bare 1fr — an image track sized by `auto` minimum
   * takes the file's intrinsic width and shoves the layout past the viewport. */
  .talo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
  .talo__line { max-width: 40ch; }
  .talo__figure img { aspect-ratio: 5 / 4; }
}

.talo__line {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 90, "SOFT" 20;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 34ch;
  color: var(--color-muted);
}

/* ══════════════ Aukiolo ══════════════ */

.band { padding-block: 0 var(--space-3xl); }

.hours { max-width: 40rem; border-block-start: var(--rule-hair) solid var(--color-rule); }

.hours__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.hours__row dt {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.hours__row dt::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--space-lg);
  border-block-end: var(--rule-hair) dotted var(--color-rule);
  transform: translateY(-0.3em);
}

.hours__row dd {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

/* ══════════════ Ft4 · Dense colophon ══════════════ */

.colophon {
  padding-block: 0 var(--space-2xl);
  padding-block-end: max(var(--space-2xl), env(safe-area-inset-bottom));
}

.colophon__rule {
  border: 0;
  border-block-start: var(--rule-hair) solid var(--color-rule-strong);
  margin: 0 0 var(--space-lg);
}

.colophon p {
  max-width: 68ch;
  font-size: var(--text-xs);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--color-neutral);
}

.colophon b {
  font-weight: 500;
  color: var(--color-muted);
}

/* ══════════════ Motion — editorial is near-static ══════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-delay: 0ms !important;
    transition-duration: 150ms !important;
  }
  html { scroll-behavior: auto; }
}