/* ─────────────────────────────────────────────────────────
   EXPLORE — the map page. All the doors at once.
   Reached via the "click to explore" hint on the hero (now
   wired to /explore.html). Big zigzag-arranged blocks on
   desktop, stacked single-column on mobile. Each block has
   a dimmed background canvas (placeholder gradient now,
   real imagery later — slot via .ex-bg's background-image)
   and a prominent bracketed CTA button.
   ───────────────────────────────────────────────────────── */

:root {
  --black: #000;
  --bright: #f5f3ec;
  --light: #c8c5b7;
  --mid: #8a8678;
  --dim: #555145;
  --text: #c8c5b7;
  --border: #1a1a1a;
  --border2: #2a2a2a;
  --red: #dc322f;
  --mono: 'Space Mono', monospace;
  --display: 'Chakra Petch', sans-serif;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--black);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; }

/* ── INTRO HEADER ─────────────────────────────────────── */
.ex-intro {
  margin-top: 44px;
  padding: 48px 32px 36px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(220, 50, 47, 0.05), transparent 60%),
    rgba(0, 0, 0, 0.4);
}
.ex-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 14px;
}
.ex-title {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--bright);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}
.ex-lede {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 14px;
  color: var(--light);
  line-height: 1.7;
  letter-spacing: 0.2px;
}
.ex-lede em { font-style: italic; color: var(--bright); }

/* ── BLOCKS ───────────────────────────────────────────── */
.ex-blocks {
  display: flex;
  flex-direction: column;
}
.ex-block {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.ex-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0a0808;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  transition: opacity 0.5s, transform 0.7s;
}
/* When the bg holds a real mosaic (images / videos), the per-section
   color gradients below aren't doing the visual job — let the mosaic
   speak through at full opacity instead. */
.ex-block .ex-bg:has(.ex-mosaic) {
  opacity: 1;
  background-image: none;
  background-color: #050505;
}
.ex-block:hover .ex-bg {
  opacity: 0.75;
  transform: scale(1.02);
}
.ex-block:hover .ex-bg:has(.ex-mosaic) {
  opacity: 1;
}

/* ─── MOSAIC ───
   Grid of pieces drawn from each section (gallery art, album covers,
   transmissions video). Dimmed + slightly desaturated so they read as
   atmosphere rather than focal point. The existing .ex-block::after
   scrim (further down) adds a black gradient on top so the title and
   CTA remain legible regardless of which images land in the grid. */
.ex-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  overflow: hidden;
}
.ex-mosaic > img,
.ex-mosaic > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Dim + desaturate so the mosaic reads as atmospheric backdrop, not
     a loud collage. Scrim above handles the rest. */
  filter: brightness(0.55) saturate(0.7) contrast(1.05);
  transition: filter 0.5s, transform 0.7s;
}
.ex-block:hover .ex-mosaic > img,
.ex-block:hover .ex-mosaic > video {
  filter: brightness(0.7) saturate(0.85) contrast(1.05);
  transform: scale(1.02);
}
/* Motion section — fewer videos, each fills half the width */
.ex-mosaic-motion {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

@media (max-width: 700px) {
  /* Tighten the mosaic on narrow viewports so each tile stays large
     enough to read as art rather than thumbnail noise. */
  .ex-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .ex-mosaic-motion { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }
}
/* Per-section tints applied as gradient overlays on the bg layer.
   When real images land later, the gradient blends with them — keeps
   each section visually distinct without depending on the image. */
.ex-block[data-section="art"] .ex-bg {
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(200, 162, 90, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(220, 50, 47, 0.10), transparent 50%),
    linear-gradient(135deg, #0a0808 0%, #1a0f0a 100%);
}
.ex-block[data-section="music"] .ex-bg {
  background-image:
    radial-gradient(ellipse at 70% 30%, rgba(220, 50, 47, 0.16), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(80, 60, 100, 0.18), transparent 60%),
    linear-gradient(135deg, #08080a 0%, #14101c 100%);
}
.ex-block[data-section="design"] .ex-bg {
  background-image:
    radial-gradient(ellipse at 30% 60%, rgba(160, 180, 200, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(220, 180, 100, 0.10), transparent 55%),
    linear-gradient(135deg, #08090a 0%, #14161c 100%);
}
.ex-block[data-section="motion"] .ex-bg {
  background-image:
    radial-gradient(ellipse at 40% 50%, rgba(255, 140, 60, 0.10), transparent 55%),
    radial-gradient(ellipse at 90% 20%, rgba(120, 80, 60, 0.16), transparent 50%),
    linear-gradient(135deg, #0a0806 0%, #1a1208 100%);
}
.ex-block[data-section="notes"] .ex-bg {
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(180, 160, 110, 0.10), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(80, 80, 100, 0.10), transparent 55%),
    linear-gradient(135deg, #08080a 0%, #14140e 100%);
}
.ex-block[data-section="about"] .ex-bg {
  background-image:
    radial-gradient(ellipse at 60% 40%, rgba(200, 130, 80, 0.14), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(80, 60, 50, 0.16), transparent 55%),
    linear-gradient(135deg, #0a0806 0%, #1a1410 100%);
}
.ex-block[data-section="contact"] .ex-bg {
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(220, 50, 47, 0.14), transparent 55%),
    linear-gradient(135deg, #0a0808 0%, #1a0a08 100%);
}

/* Overlay scrim — knocks back the background under the text. With
   real imagery/video now living in .ex-mosaic, the scrim picks up a
   bit more weight so the title and CTA always read on top regardless
   of the mosaic content's brightness. Also adds a side-vignette
   toward the text column so the headline area is the darkest part
   of the block. */
.ex-block::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
/* Sideways vignette anchored to whichever side the text sits on for
   that block, so the headline column gets an extra wash of dark. */
.ex-block:nth-child(odd)::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 100%);
}
.ex-block:nth-child(even)::after {
  background:
    linear-gradient(270deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 100%);
}
/* Subtle scanline texture, like the mobile drawer's */
.ex-block::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.018) 2px 3px);
  pointer-events: none;
}

.ex-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

/* Left-aligned blocks: content in left column. Right-aligned: right column.
   Alternating handled via :nth-child below. */
.ex-block:nth-child(odd) .ex-text { grid-column: 1; text-align: left; }
.ex-block:nth-child(odd) .ex-spacer { grid-column: 2; }
.ex-block:nth-child(even) .ex-text { grid-column: 2; text-align: left; }
.ex-block:nth-child(even) .ex-spacer { grid-column: 1; }

.ex-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ex-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--red);
  font-weight: 700;
}
.ex-name {
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--bright);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}
.ex-caption {
  font-family: var(--mono);
  font-size: 13px;
  /* Was var(--light) (#999) — too gray over the section background images,
     reading washed out. Bumped to var(--text) (#d4d0c8, the warm reading
     color) for more legibility without going full white/bold. Chris 2026-05-15. */
  color: var(--text);
  line-height: 1.6;
  max-width: 42ch;
  letter-spacing: 0.2px;
}
.ex-caption em { font-style: italic; color: var(--bright); }

/* CTA button — bracketed, large, brand-consistent.
   2026-05-16: arrow removed everywhere (was redundant w/ the bracketed
   < LABEL > treatment which already reads as interactive). Brackets now
   render RED at rest on every viewport — the persistent red `<` and `>`
   pair with the brighter border are the active-state cue, the way the
   site uses red dots elsewhere to mean "live/interactive." Hover keeps a
   subtle bump (red border, faint red bg wash) for desktop affordance. */
.ex-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--bright);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;   /* keep labels single-line at any viewport */
  border: 1px solid var(--mid);
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}
.ex-cta:hover {
  background: rgba(220, 50, 47, 0.12);
  border-color: var(--red);
}
/* Brackets in white (inherit from parent text color) — Chris is trying
   the all-white look 2026-05-16. Easy revert: set color: var(--red); */
.ex-cta .br { color: inherit; }

/* ── FOOTNOTE / OUTRO ─────────────────────────────────── */
.ex-outro {
  padding: 36px 32px;
  background: rgba(0, 0, 0, 0.45);
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mid);
}
.ex-outro a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid var(--red);
}
.ex-outro a:hover { opacity: 0.7; }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 900px) {
  .ex-intro { padding: 36px 22px 28px; margin-top: 28px; }
  .ex-content {
    grid-template-columns: 1fr;
    padding: 48px 22px;
    gap: 0;
  }
  .ex-block:nth-child(odd) .ex-text,
  .ex-block:nth-child(even) .ex-text {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
  }
  .ex-spacer { display: none; }
  .ex-block { min-height: 52vh; }
  .ex-name { letter-spacing: 3px; }
}
@media (max-width: 600px) {
  .ex-intro { padding: 28px 18px 22px; }
  .ex-title { font-size: 36px; letter-spacing: 4px; }
  .ex-name { font-size: 42px; letter-spacing: 2.5px; }
  .ex-content { padding: 40px 18px; }
  /* 2026-05-16 — mobile sizing for the CTAs. Red brackets + bright border
     come from the base .ex-cta rule above (they're not mobile-only now);
     we only adjust padding / font-size here. */
  .ex-cta {
    padding: 14px 20px;
    font-size: 11px;
    letter-spacing: 3px;
    border-color: var(--light);
    box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.18) inset, 0 0 12px rgba(192, 57, 43, 0.12);
  }
  .ex-block { min-height: 48vh; }
}