/* A quiet dark room for the art: near-black background, warm off-white
   serif text, small monospace labels, and one centred column. */

:root {
  --bg: #0b0b0c;
  --text: #ece8e1;
  --muted: #8d8981;
  --faint: #55524d;
  --line: rgba(236, 232, 225, 0.12);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --column: 920px;
  --radius: 14px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-time: 1.4s;

  /* Set by gallery.js: the viewport size and how far each frame shrinks it. */
  --stage-w: 100vw;
  --stage-h: 100vh;
  --scale: 0.6;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scrollbar-gutter: stable;
}

html.is-locked {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.3rem/1.5 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ intro */

.intro {
  min-height: 100svh;
  max-width: var(--column);
  margin: 0 auto;
  padding: 18vh max(20px, env(safe-area-inset-left)) 12vh max(20px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.eyebrow,
.piece__meta,
.hint,
.scroll-cue,
.back {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 1.6rem;
  color: var(--muted);
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

h1 em,
h2 em,
p em {
  font-style: italic;
}

.lede {
  max-width: 34em;
  margin: 2.4rem 0 0;
  color: var(--text);
  opacity: 0.86;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.45;
}

.hint {
  margin: 2.2rem 0 0;
  color: var(--muted);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  translate: -50% 0;
  color: var(--faint);
}

.scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 36px;
  margin: 12px auto 0;
  background: linear-gradient(var(--faint), transparent);
}

/* ----------------------------------------------------------------- pieces */

.pieces {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
}

.piece {
  padding: 14vh 0;
  border-top: 1px solid var(--line);
}

.piece__text {
  max-width: 38em;
}

.piece__meta {
  margin: 0 0 1rem;
  color: var(--muted);
}

.piece__meta span {
  color: var(--text);
  margin-right: 1.2em;
}

h2 {
  margin: 0 0 0.9rem;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.quote {
  margin: 1.4rem 0 0;
  padding: 0 0 0 1.3rem;
  border-left: 1px solid var(--line);
}

.quote p {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.35;
  opacity: 0.88;
}

.quote footer {
  margin-top: 0.9rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.quote footer::before {
  content: "\2014\00a0";
}

.quote cite {
  font-style: normal;
  color: var(--faint);
}

/* ------------------------------------------------------------------ frame */

/* The frame shows the art page at the full size of the screen, scaled
   down: opening it only removes the scaling, so the art never has to
   redraw itself at a new size. */
.frame {
  position: relative;
  width: calc(var(--stage-w) * var(--scale));
  height: calc(var(--stage-h) * var(--scale));
  margin: 3rem 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #050505;
  box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform: scale(var(--scale));
  transform-origin: 0 0;
  border-radius: calc(var(--radius) / var(--scale));
  overflow: hidden;
  background: #050505;
}

.stage.is-floating {
  position: fixed;
  z-index: 50;
}

.stage__poster,
.stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.stage__poster {
  object-fit: cover;
}

.stage iframe {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.stage iframe.is-ready {
  opacity: 1;
}

.stage.is-interactive iframe {
  pointer-events: auto;
}

.frame__open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
}

.frame__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(236, 232, 225, 0);
  transition: box-shadow 0.4s ease;
}

.frame__open:hover::after,
.frame__open:focus-visible::after {
  box-shadow: inset 0 0 0 1px rgba(236, 232, 225, 0.35);
}

.frame__open:focus-visible {
  outline: none;
}

/* ------------------------------------------------------------- full screen */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-out);
}

.backdrop.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.back {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.1em 0.75em 0.9em;
  border: 1px solid rgba(236, 232, 225, 0.18);
  border-radius: 999px;
  background: rgba(11, 11, 12, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 0.5s ease, translate 0.5s var(--ease-out), background 0.3s ease, border-color 0.3s ease;
}

.back.is-shown {
  opacity: 1;
  translate: 0 0;
}

.back:hover,
.back:focus-visible {
  background: rgba(30, 30, 32, 0.75);
  border-color: rgba(236, 232, 225, 0.4);
  outline: none;
}

.back svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------------- reveal */

/* Text and frames drift up and fade in once, as they scroll into view.
   The visible state has no transform at all, so an opened frame can be
   positioned against the screen. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--reveal-time) var(--ease-out),
    transform var(--reveal-time) var(--ease-out);
  transition-delay: calc(var(--order, 0) * 110ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.lede.reveal.is-visible {
  opacity: 0.86;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: opacity 0.6s ease;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1.18rem;
  }

  .piece {
    padding: 10vh 0;
  }

  .frame {
    margin-top: 2rem;
  }
}