/* =========================================================
   spif.amsterdam — LIVE page
   Dark, saturated variant of the monograph system.
   Loaded AFTER styles.css. Base palette = data-mood="velvet".
   Everything here is scoped to body.live so the portfolio
   (styles.css) is never touched.
   ========================================================= */

body.live {
  /* This page has no right-rail sidenav — reclaim the reserved space. */
  padding-right: 0;

  /* Live accents: electric coil-blue + warm tent-practical orange,
     sampled from the photographs. */
  --coil-blue:  oklch(0.74 0.15 245);
  --coil-glow:  oklch(0.74 0.15 245 / 0.55);
  --tent-amber: oklch(0.74 0.17 55);
  --tent-glow:  oklch(0.74 0.17 55 / 0.5);
}

/* Deep vignette ground so the imagery reads as lit-in-the-dark. */
html[data-mood="velvet"] body.live {
  background:
    radial-gradient(130% 90% at 50% -10%, oklch(0.20 0.06 300) 0%, var(--ink) 48%, var(--ink-deep) 100%);
}

/* Full-bleed helper — robust regardless of any rail width. */
.bleed {
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; max-width: 100vw;
}

/* ---------- Top bar (over the hero) ---------- */
.live-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.25rem, 4vw, 3.5rem);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.live-topbar .mark {
  color: var(--paper);
  letter-spacing: 0.34em;
  font-weight: 500;
}
.live-topbar nav { display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); flex-wrap: wrap; }
.live-topbar a { color: color-mix(in oklch, var(--paper) 80%, transparent); transition: color 0.18s ease; }
.live-topbar a:hover { color: var(--paper); }
.live-topbar .to-works { color: var(--tent-amber); }
@media (max-width: 560px) {
  .live-topbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .live-topbar nav { gap: 0.9rem 1.2rem; }
}

/* ---------- Hero ---------- */
.live-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 6px solid var(--ink-deep);
  isolation: isolate;
}
.live-hero-media { position: absolute; inset: 0; z-index: 0; }
.live-hero-media img,
.live-hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Video sits over the poster and fades in once it can play (JS adds .playing). */
.live-hero-video { opacity: 0; transition: opacity 0.9s ease; }
.live-hero-media.playing .live-hero-video { opacity: 1; }

/* Legibility scrim: darken bottom-left where the title lives,
   plus a whole-frame cool wash so type never fights a bright practical. */
.live-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, oklch(0.10 0.04 300 / 0.92) 0%, oklch(0.10 0.04 300 / 0.35) 42%, transparent 72%),
    linear-gradient(105deg, oklch(0.10 0.04 300 / 0.55) 0%, transparent 55%);
}

.live-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2.75rem, 6vw, 5rem);
}
.live-hero .eyebrow-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.9vw, 0.76rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1.5px solid color-mix(in oklch, var(--paper) 70%, transparent);
  padding: 0.4rem 0.85rem;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  backdrop-filter: blur(2px);
}
.live-hero h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(5rem, 17vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--paper);
  margin: 0 0 0 -0.03em;
  text-shadow: 0 3px 26px oklch(0.08 0.04 300 / 0.92), 0 0 90px oklch(0.08 0.04 300 / 0.65);
}
.live-hero-tag {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.7vw, 1.35rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin: clamp(1rem, 2vw, 1.6rem) 0 0;
}
.live-hero-tag .sep { color: var(--coil-blue); padding: 0 0.4em; }
.live-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  line-height: 1.25;
  color: var(--paper-dim);
  max-width: 34ch;
  margin: clamp(0.6rem, 1.2vw, 1rem) 0 0;
}
.live-hero-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin-top: clamp(1.4rem, 3vw, 2.25rem);
}
/* Two-column hero on wider screens: SPIF | (subtitle + copy), top-aligned —
   keeps the wordmark clear of the lightning in the background video. */
@media (min-width: 800px) {
  .live-hero-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .live-hero-inner > h1 { font-size: clamp(4.5rem, 12vw, 11rem); }
  .live-hero-copy { align-self: start; }
  .live-hero-copy > :first-child { margin-top: 0; }
}
.live-hero .location-pill { background: var(--ink-deep); color: var(--paper); border-color: var(--ink-deep); }
.live-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-deep);
  background: var(--tent-amber);
  border: 2px solid var(--tent-amber);
  padding: 0.7rem 1.1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 0 0 var(--tent-glow);
}
.live-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--tent-glow); }
.live-cta .arw { transition: transform 0.18s ease; }
.live-cta:hover .arw { transform: translateY(2px); }

/* ---------- Highlighter: text on the selection swatch, always on ----------
   Same warm orange + dark ink as ::selection. box-decoration-break clone so
   multi-line phrases each get their own hugging band. */
body.live .hl {
  background: oklch(0.72 0.20 45);
  color: var(--ink-deep);
  padding: 0.04em 0.28em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 1px;
}
body.live .hl .sep { color: var(--ink-deep); opacity: 0.55; }
/* Cool variant — electric coil-blue swatch, for the subtitle + its paragraph,
   so secondary copy reads distinct from the warm-orange titles. */
body.live .hl-cool {
  background: var(--coil-blue);
  color: var(--ink-deep);
  padding: 0.04em 0.28em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 1px;
}
/* Hero eyebrow chip becomes a solid highlighted stamp instead of an outline. */
.live-hero .eyebrow-chip.hl {
  border-color: transparent;
  backdrop-filter: none;
}

/* ---------- Shared section kicker ---------- */
.live-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coil-blue);
  margin: 0 0 0.75rem;
}
.live-section-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  color: var(--paper);
  margin: 0;
}
.live-section-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }

/* ---------- The Set (SoundCloud) ---------- */
#set { padding-top: clamp(3.5rem, 8vw, 6rem); }

.sc-embed { border: 1px solid var(--rule); background: var(--ink-deep); }
.sc-embed iframe { display: block; width: 100%; border: 0; }

/* Placeholder that reads as an intentional player until the real embed lands. */
.sc-placeholder {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--rule);
  background:
    radial-gradient(120% 160% at 0% 0%, oklch(0.22 0.06 300) 0%, var(--ink-deep) 60%);
  text-decoration: none;
  color: var(--paper);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sc-placeholder:hover { border-color: var(--coil-blue); transform: translateY(-2px); }
.sc-play {
  width: clamp(56px, 9vw, 84px);
  height: clamp(56px, 9vw, 84px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tent-amber);
  color: var(--ink-deep);
  box-shadow: 0 0 0 8px var(--tent-glow);
  flex: none;
}
.sc-play svg { width: 42%; height: 42%; margin-left: 8%; }
.sc-copy .sc-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.05; color: var(--paper); display: block;
}
.sc-copy .sc-status {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-faint); margin-top: 0.5rem; display: block;
}
.sc-copy .sc-status b { color: var(--coil-blue); font-weight: 500; }
.sc-follow {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
  border: 1.5px solid color-mix(in oklch, var(--paper) 55%, transparent);
  padding: 0.7rem 1rem; white-space: nowrap; flex: none;
}
.sc-placeholder:hover .sc-follow { border-color: var(--paper); }
@media (max-width: 620px) {
  .sc-placeholder { grid-template-columns: auto 1fr; }
  .sc-follow { grid-column: 1 / -1; text-align: center; }
}
.live-set-note {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 1.1rem;
}

/* ---------- Gallery (masonry) ---------- */
.live-gallery {
  column-count: 3;
  column-gap: clamp(0.6rem, 1.4vw, 1rem);
}
@media (max-width: 900px) { .live-gallery { column-count: 2; } }
@media (max-width: 540px) { .live-gallery { column-count: 1; } }
.live-shot {
  break-inside: avoid;
  margin: 0 0 clamp(0.6rem, 1.4vw, 1rem);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ink-deep);
  isolation: isolate;
}
.live-shot img { width: 100%; height: auto; display: block; }
.live-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.8rem 0.9rem 0.85rem;
  background: linear-gradient(to top, oklch(0.08 0.03 300 / 0.9), transparent);
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in oklch, var(--paper) 82%, transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
  .live-shot:hover figcaption { opacity: 1; transform: translateY(0); }
}
@media (hover: none) { .live-shot figcaption { opacity: 1; } }

/* ---------- Full-bleed light-trail divider ---------- */
.live-divider {
  height: clamp(42vh, 60vw, 72vh);
  background-size: cover;
  background-position: center;
  border-top: 6px solid var(--ink-deep);
  border-bottom: 6px solid var(--ink-deep);
  position: relative;
  display: grid;
  place-items: end center;   /* header sits bottom, block centered then left-inset */
}
.live-divider::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 90% at 50% 50%, transparent 30%, oklch(0.08 0.04 300 / 0.55));
}
.live-divider-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) { .live-divider-video { display: none; } }
.live-divider blockquote {
  position: relative; z-index: 1;
  margin: 0; max-width: 22ch; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.15;
  color: var(--paper);
  text-shadow: 0 2px 40px oklch(0.08 0.05 300 / 0.9);
  padding: 0 1rem;
}
/* Divider carries the "what it is" section header — same serif/size as
   .live-section-head h2, orange highlight (.hl), layered over the video. */
.live-divider-head {
  position: relative; z-index: 1;
  margin: 0;
  width: 100%; max-width: var(--maxw);
  text-align: left;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.98;
  color: var(--paper);
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}

/* ---------- What it is ---------- */
.live-about-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .live-about-grid { grid-template-columns: 1fr; } }
.live-about-grid .lede { color: var(--paper-dim); }
.live-about-grid p { max-width: 60ch; color: var(--paper-dim); }
.live-about-grid p + p { margin-top: 1rem; }
.live-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.75rem; row-gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
.live-facts dt { color: var(--paper-faint); }
.live-facts dd { margin: 0; color: var(--paper); }
.live-facts dd .hi { color: var(--coil-blue); }

/* ---------- Book (warm bookend — echoes the tent practicals) ----------
   velvet mood remaps --amber to violet, so force the warm tent-orange here
   to tie the banner to the hero CTA + the play button. Kill the base
   section padding/rule so the banner bleeds cleanly. */
.live-book { padding: 0; border-top: 0; }
.live-book .contact-banner { background: var(--tent-amber); }
.live-book .contact-banner-inner {
  max-width: calc(var(--maxw));
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

/* ---------- Footer cross-link ---------- */
.live-foot {
  border-top: 1px solid var(--rule);
  max-width: var(--maxw); margin: 0 auto;
  padding: 2.25rem clamp(1.25rem, 4vw, 3.5rem) 3rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem;
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-faint);
}
.live-foot a { color: var(--paper); border-bottom: 1px solid var(--brass); padding-bottom: 1px; }
.live-foot a:hover { color: var(--coil-blue); border-color: var(--coil-blue); }

/* Honour reduced motion — freeze the ambient hero video on its poster. */
@media (prefers-reduced-motion: reduce) {
  .live-hero-video { display: none; }
}