/* ==========================================================================
   Components
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.site-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

/* Over a full-bleed hero the header floats, unpainted, in white. */
.site-header--over { color: var(--paper); background: transparent; }

.site-header.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--rule);
}

/* Once the mobile sheet is open the header always sits on paper. */
.site-header.is-open { background: var(--paper); color: var(--ink); }

.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 48;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.2rem;
  font-weight: 500;
}

/* --- Navigation ----------------------------------------------------------- */

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.nav__link {
  position: relative;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding-block: 0.35rem;
}
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--hairline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current='page'] { opacity: 1; }

.nav-toggle {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  margin-right: -0.4rem;
}
.nav-toggle__bars { display: block; width: 1.375rem; height: 0.625rem; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: var(--hairline);
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: 100%; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { top: 50%; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { top: 50%; transform: rotate(-45deg); }

@media (max-width: 52rem) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    background: var(--paper);
    color: var(--ink);
    padding: var(--space-xl) var(--gutter) var(--space-l);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav__item { width: 100%; border-top: var(--hairline) solid var(--rule); }
  .nav__item:last-child { border-bottom: var(--hairline) solid var(--rule); }

  .nav__link {
    display: block;
    width: 100%;
    padding-block: var(--space-s);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    text-transform: none;
  }
  .nav__link::after { display: none; }

  .nav__meta { color: var(--stone); font-size: var(--text-sm); }
  .nav__meta a { text-decoration: underline; text-underline-offset: 3px; }
}

@media (min-width: 52.0625rem) {
  .nav__meta { display: none; }
}

/* --- Session status ------------------------------------------------------- */

/* The header carries no boxes, so this doesn't either — a dot and a tracked
   label, sized to sit level with the nav links.

   The dot is deliberately colourless. The header flips from white-over-hero to
   ink-on-paper as you scroll, and no single accent survives both a photograph
   and the plaster, so live vs upcoming is carried by fill and pulse instead:
   hollow ring = upcoming, filled + breathing = happening now. That also means
   the state doesn't depend on colour vision. */

/* An author `display` beats the UA sheet's [hidden] rule, so restate it. */
.session-status[hidden] { display: none; }

.session-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-inline-end: auto;   /* hug the wordmark, leave the nav on the right */
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.72;
  transition: opacity var(--dur) var(--ease);
}
.session-status:hover,
.session-status:focus-visible { opacity: 1; }
.session-status[data-state='live'] { opacity: 1; }

/* Shared by the header and the Sessions tracklist. */
.status-dot {
  position: relative;
  flex: none;
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--hairline) currentColor;
}
.status-dot--live { background: currentColor; }

/* The ring is a second circle scaled out from under the dot, so it costs no
   extra layout and animates on transform/opacity only. */
.status-dot--live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--hairline) currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .status-dot--live::after {
    animation: session-pulse 2.4s var(--ease-out) infinite;
  }
}

@keyframes session-pulse {
  0%        { transform: scale(1);   opacity: 0.6; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* At mobile widths the wordmark and the toggle already own the bar, so the
   full "next session" line has nowhere to go. It drops out, and the Sessions
   section carries it instead — but a session actually running is worth the
   room, so those states stay. */
@media (max-width: 52rem) {
  .session-status { font-size: 0.625rem; gap: var(--space-3xs); }
  .session-status[data-state='upcoming'] { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: hidden;

  /* Anything nested here (.btn, .cta, .link) must resolve against the dark. */
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-muted: color-mix(in srgb, var(--paper) 62%, transparent);
  --accent: var(--indigo-soft);
  --rule: color-mix(in srgb, var(--paper) 22%, transparent);
  background: var(--bg);
  color: var(--fg);
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(10 8 6 / 0.86) 0%, rgb(10 8 6 / 0.45) 32%, rgb(10 8 6 / 0.1) 62%, rgb(10 8 6 / 0.35) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* Top padding keeps the label clear of the fixed header when the content is
     taller than the window (short laptop screens, landscape phones). It does
     nothing on tall windows, where the content is bottom-aligned anyway. */
  padding: calc(var(--header-h) + var(--space-m)) var(--gutter) clamp(3.5rem, 2rem + 7vw, 7rem);
}

.hero__title {
  font-size: var(--text-3xl);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 144;
  max-width: 16ch;
  margin-block: var(--space-m) var(--space-m);
}
.hero__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
}

.hero__lede { max-width: 44ch; color: color-mix(in srgb, var(--paper) 82%, transparent); }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-l);
}

.hero__label { color: color-mix(in srgb, var(--paper) 72%, transparent); }

/* Scroll cue */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.scroll-cue::before {
  content: '';
  width: var(--hairline);
  height: 2.25rem;
  background: currentColor;
  transform-origin: top;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* --- Marquee -------------------------------------------------------------- */

.marquee {
  border-block: var(--hairline) solid var(--rule);
  overflow: hidden;
  padding-block: var(--space-s);
  background: var(--bg);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-l);
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-l);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.marquee__item::after { content: '\2022'; color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* --- Statement ------------------------------------------------------------ */

.statement__body {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
  max-width: 24ch;
}
.statement__body em {
  font-style: italic;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 96;
  color: var(--accent);
}

/* --- Feature (asymmetric image + text) ------------------------------------ */

.feature { align-items: center; row-gap: var(--space-xl); }

.feature__media { grid-column: 1 / span 6; }
.feature__body  { grid-column: 8 / span 5; }

.feature--flip .feature__media { grid-column: 7 / span 6; grid-row: 1; }
.feature--flip .feature__body  { grid-column: 1 / span 5; grid-row: 1; }

@media (max-width: 60rem) {
  .feature__media,
  .feature--flip .feature__media { grid-column: 1 / -1; grid-row: auto; }
  .feature__body,
  .feature--flip .feature__body  { grid-column: 1 / -1; grid-row: auto; }
}

.feature__body > * + * { margin-top: var(--space-m); }

.figure { margin: 0; }
.figure img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--plaster);
}
.figure figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.ratio-3-4 { aspect-ratio: 3 / 4; object-fit: cover; }
.ratio-4-3 { aspect-ratio: 4 / 3; object-fit: cover; }
.ratio-1-1 { aspect-ratio: 1 / 1; object-fit: cover; }
.ratio-9-16 { aspect-ratio: 9 / 16; object-fit: cover; }

/* Inner pages open below the fixed header rather than under a hero. */
.page-head {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 5vw, 6rem));
  padding-bottom: clamp(2rem, 1rem + 4vw, 4rem);
}
.page-head__title { font-size: var(--text-2xl); margin-top: var(--space-s); }
.page-head__lede { margin-top: var(--space-m); }

/* Section heading block used across the page. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: var(--hairline) solid var(--rule);
  margin-bottom: var(--space-xl);
}
.section-head__title { font-size: var(--text-lg); }

/* --- Ritual (menu teaser) ------------------------------------------------- */

.ritual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--gutter);
}

.ritual__item { position: relative; display: block; }

.ritual__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--plaster);
}
.ritual__media img {
  width: 100%;
  transition: transform 1.1s var(--ease-out), filter var(--dur) var(--ease);
}
.ritual__item:hover .ritual__media img { transform: scale(1.045); }

.ritual__title {
  font-size: var(--text-md);
  margin-top: var(--space-s);
}
.ritual__desc {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  max-width: 34ch;
}

/* --- Sessions (dark) ------------------------------------------------------ */

.sessions__grid { align-items: center; row-gap: var(--space-xl); }
.sessions__body { grid-column: 1 / span 5; }
.sessions__art  { grid-column: 7 / span 6; }
@media (max-width: 60rem) {
  .sessions__body, .sessions__art { grid-column: 1 / -1; }
}
.sessions__body > * + * { margin-top: var(--space-m); }

/* Schedule set like a sleeve's track listing. */
.tracklist { border-top: var(--hairline) solid var(--rule); }
.tracklist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-s);
  border-bottom: var(--hairline) solid var(--rule);
  font-size: var(--text-sm);
}
.tracklist__row dt { color: var(--fg); }
.tracklist__row dd { margin: 0; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* Prepended by site.js: the recurring rule stays in the rows below it, this one
   says what is true today. */
.tracklist__row--now dd {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.tracklist__row--live dd { color: var(--accent); }

/* The record — pure CSS, no image weight.
   Only the inner disc spins: rotating the outer box would swell its bounding
   rect by ~41% and push the page wider than the viewport. */
.record {
  position: relative;
  width: min(100%, 30rem);
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #191919 0 32%, #0d0d0d 32% 100%);
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.55), inset 0 0 4rem rgb(0 0 0 / 0.8);
}
/* Grooves are radially symmetric, so an off-centre sheen does the work of
   actually making the rotation legible. */
.record__disc {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgb(255 255 255 / 0)    0deg,
      rgb(255 255 255 / 0.08) 38deg,
      rgb(255 255 255 / 0)    96deg,
      rgb(255 255 255 / 0)    186deg,
      rgb(255 255 255 / 0.05) 224deg,
      rgb(255 255 255 / 0)    286deg),
    repeating-radial-gradient(circle at 50% 50%,
      rgb(255 255 255 / 0.045) 0 1px,
      transparent 1px 4px);
  animation: spin 4.2s linear infinite;
}
.record::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 32%;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.record::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: calc(50% - 0.45rem);
  border-radius: 50%;
  background: var(--ink);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .record__disc { animation: none; } }

.record-wrap { position: relative; }
.record-label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 3;
  text-align: center;
  pointer-events: none;
}
.record-label span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--paper);
}

/* --- Gallery -------------------------------------------------------------- */

/* Phones get a fixed 2-up so a long gallery stays scannable; above that,
   auto-fit (not auto-fill) so a short row — the homepage teaser — still
   stretches full width instead of leaving empty tracks hanging. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}
@media (min-width: 40rem) {
  .tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-s);
  }
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--plaster);
  cursor: zoom-in;
}
.tile img {
  width: 100%;
  transition: transform 1.1s var(--ease-out);
}
.tile:hover img { transform: scale(1.05); }

.tile__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-l) var(--space-s) var(--space-s);
  /* Photos vary, so the scrim has to carry the contrast on its own. */
  background: linear-gradient(to top, rgb(10 8 6 / 0.9) 0%, rgb(10 8 6 / 0.62) 45%, transparent 100%);
  color: var(--paper);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover .tile__caption,
.tile:focus-visible .tile__caption { opacity: 1; transform: none; }

/* Spans both phone columns, and two tracks on wider grids. */
.tile--feature { grid-column: span 2; }

/* --- Reels ---------------------------------------------------------------- */

.reel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}
@media (min-width: 40rem) {
  .reel-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-s);
  }
}

.reel {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
}
/* Poster carries the layout; the video only paints once it is asked for. */
.reel__poster { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.reel.is-playing video { opacity: 1; }

.reel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: linear-gradient(to top, rgb(10 8 6 / 0.5), rgb(10 8 6 / 0.12));
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.reel__play:hover { background: linear-gradient(to top, rgb(10 8 6 / 0.35), rgb(10 8 6 / 0.05)); }
.reel__play svg {
  width: 3rem; height: 3rem;
  transition: transform var(--dur) var(--ease-out);
}
.reel__play:hover svg { transform: scale(1.1); }
.reel.is-playing .reel__play { opacity: 0; pointer-events: none; }

/* --- Visit ---------------------------------------------------------------- */

.visit__grid { row-gap: var(--space-xl); }
.visit__info { grid-column: 1 / span 4; }
.visit__map  { grid-column: 6 / span 7; }
@media (max-width: 60rem) {
  .visit__info, .visit__map { grid-column: 1 / -1; }
}

.visit__info > * + * { margin-top: var(--space-l); }

.detail__label { margin-bottom: var(--space-3xs); }
.detail__value { font-size: var(--text-md); font-family: var(--font-display); }
.detail a:hover { color: var(--accent); }

.hours { border-top: var(--hairline) solid var(--rule); }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-2xs);
  border-bottom: var(--hairline) solid var(--rule);
  font-size: var(--text-sm);
}
.hours__row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--fg-muted); }

.map-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius);
  background: var(--plaster);
  filter: grayscale(1) contrast(0.92) brightness(1.03);
  transition: filter var(--dur-slow) var(--ease);
}
.map-frame:hover { filter: none; }
@media (max-width: 40rem) { .map-frame { aspect-ratio: 1; } }

.social {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--hairline) var(--rule);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.social a:hover { background: var(--fg); color: var(--bg); }
.social svg { width: 1.125rem; height: 1.125rem; }

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

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--space-2xl) var(--space-l);
}
.site-footer a:hover { color: var(--indigo-soft); }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-xl) var(--gutter);
  padding-bottom: var(--space-xl);
}
.footer__col > * + * { margin-top: var(--space-2xs); }
.footer__col .label { color: color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom: var(--space-s); }
.footer__col p, .footer__col a { font-size: var(--text-sm); color: color-mix(in srgb, var(--paper) 80%, transparent); }
.footer__col a { display: block; }

.footer__mark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: var(--hairline) solid color-mix(in srgb, var(--paper) 16%, transparent);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

/* The build credit. Deliberately the quietest thing in the footer: it inherits
   the bottom row's muted paper colour and is marked only by a hairline
   underline, so it reads as a signature rather than an advert on a client's
   site. */
.footer__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--paper) 28%, transparent);
}
.footer__credit a:hover { text-decoration-color: currentColor; }

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  color: var(--paper);
  overflow: hidden;
}
.lightbox::backdrop { background: rgb(10 8 6 / 0.9); }

.lightbox__inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-s);
  padding: var(--space-s) var(--gutter) var(--space-m);
}
.lightbox__figure {
  margin: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.lightbox__caption { font-size: var(--text-sm); color: color-mix(in srgb, var(--paper) 72%, transparent); }
.lightbox__nav { display: flex; gap: var(--space-2xs); }
.lightbox__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--hairline) color-mix(in srgb, var(--paper) 28%, transparent);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { background: var(--paper); color: var(--ink); }
.lightbox__btn svg { width: 1rem; height: 1rem; }

/* --- Coming soon (menu) --------------------------------------------------- */

.comingsoon {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  isolation: isolate;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);

  --bg: var(--ink);
  --fg: var(--paper);
  --fg-muted: color-mix(in srgb, var(--paper) 62%, transparent);
  --accent: var(--indigo-soft);
  --rule: color-mix(in srgb, var(--paper) 22%, transparent);
  background: var(--bg);
  color: var(--fg);
}
.comingsoon__media { position: absolute; inset: 0; z-index: -2; }
.comingsoon__media img { width: 100%; height: 100%; object-fit: cover; }
.comingsoon__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Narrow screens: text runs the full width, so the wash has to be even. */
  background: rgb(10 8 6 / 0.82);
}
@media (min-width: 60rem) {
  .comingsoon__scrim {
    background: linear-gradient(to right, rgb(10 8 6 / 0.9) 0%, rgb(10 8 6 / 0.7) 45%, rgb(10 8 6 / 0.42) 100%);
  }
}
.comingsoon__body { max-width: 34rem; }
.comingsoon__body > * + * { margin-top: var(--space-m); }

/* --- Errors --------------------------------------------------------------- */

.error {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--space-2xl)) var(--gutter) var(--space-2xl);
}
.error > div > * + * { margin-top: var(--space-m); }