/* ============================================================
   PROJECT PAGE (new) — requires foundation.css + nav.css.
   Two rooms: the dark screening room (stills), then a hard cut
   to the light wall (text), like a museum wall label beside a work.
   The homepage's red line runs down the whole page as the spine.
   ============================================================ */

body.project {
  --wall: #e6e6e3;
  --ink: #141414;
  --ink-dim: rgba(20, 20, 20, 0.55);
  --ink-faint: rgba(20, 20, 20, 0.28);
  --spine: 44%;               /* same position as the homepage's red line */
  position: relative;
  background: var(--wall);
}

/* the red line, full page height */
.spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--spine);
  width: 1px;
  background: var(--color-red);
  opacity: 0.85;
  z-index: 5;
  pointer-events: none;
}

/* nav turns dark once it's over the wall */
body.on-wall .site-nav__mark { color: var(--ink); }
body.on-wall .site-nav__links a { color: rgba(20, 20, 20, 0.5); }
body.on-wall .site-nav__links a[aria-current="page"] { color: var(--ink); }
.site-nav__mark,
.site-nav__links a { transition: color 0.3s var(--ease); }

/* ---- Room 1: the screening room ---- */
/* stops short of the bottom so a strip of the wall always shows
   underneath — the cue that there's more below */
.screen {
  position: relative;
  height: calc(100vh - 3.25rem);
  height: calc(100svh - 3.25rem);
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-fg);
}

.screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

.screen img.is-active { opacity: 1; }

/* a soft shadow rising from the bottom edge, so the title stays
   readable over light stills; the top of the image is untouched */
.screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.62) 0%, rgba(10, 10, 10, 0.28) 45%, rgba(10, 10, 10, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.screen__title { text-shadow: 0 0 40px rgba(0, 0, 0, 0.25); }

/* and a faint one along the top, so the menu stays readable too */
.screen::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7rem;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0));
  z-index: 1;
  pointer-events: none;
}

.screen__title {
  position: absolute;
  left: 1.75rem;
  right: 1.75rem;
  bottom: 1.5rem;
  margin: 0;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 10vw, 9.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.screen__title .sl {
  font-weight: 300;
  color: rgba(242, 240, 236, 0.4);
  margin: 0 0.1em;
}

.screen__title .original {
  color: rgba(242, 240, 236, 0.55);
}

/* ---- Room 2: the wall ---- */
.wall {
  display: grid;
  grid-template-columns: var(--spine) 1fr;
  color: var(--ink);
  padding: 5rem 0 0;
}

/* left of the red line: the label details, and the quote hanging off the line */
.label {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 0 2.5rem 0 1.75rem;
  font-size: var(--size-meta);
  line-height: 1.6;
}

.label p { margin: 0; }

.label__medium {
  color: var(--ink);
}

.label__line {
  color: var(--ink-dim);
}

.label__request a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-faint);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.label__request a:hover,
.label__request a:focus-visible {
  color: var(--color-red);
  border-color: var(--color-red);
}

.label .sl {
  color: var(--ink-faint);
  margin: 0 0.35em;
}

.label__heading {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.label sup {
  margin-left: 0.35em;
  font-size: 0.6em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  vertical-align: text-top;
}

/* the quote hangs against the red line, set off-level with the synopsis */
.hook {
  margin: 0.55em 0 1.5rem;
  text-align: right;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink-dim);
}

/* right of the red line: the synopsis */
.synopsis {
  padding: 0 1.75rem 0 2.5rem;
  max-width: calc(34em + 4.25rem);
  font-size: var(--size-body);
  line-height: 1.55;
}

.synopsis p { margin: 0 0 1em; }
.synopsis p:last-child { margin-bottom: 0; }

.synopsis__start {
  display: grid;
  grid-template-columns: 1fr;
}

/* ---- The ending: a quiet pointer to the next work, lined up
   under the synopsis so it reads as the end of the text,
   not as a second title ---- */
.next {
  position: relative;
  z-index: 6;               /* sits above the red line */
  display: grid;
  grid-template-columns: var(--spine) 1fr;
  background: var(--wall);
  padding: 5rem 0 1.5rem;
  color: var(--ink);
}

.next__inner {
  grid-column: 2;
  padding: 0 1.75rem 0 2.5rem;
}

.next__label {
  margin: 0 0 0.3rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.next a.next__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  transition: color 0.2s var(--ease);
}

.next a.next__title:hover,
.next a.next__title:focus-visible { color: var(--color-red); }

.next__footer {
  grid-column: 1 / -1;
  margin: 4rem 0 0;
  padding: 0 1.75rem;
  font-size: 0.75rem;
}

.next__footer a { color: var(--ink-dim); }
.next__footer a:hover,
.next__footer a:focus-visible { color: var(--color-red); }

/* ---- Phones: one column, the red line moves to the right edge ---- */
@media (max-width: 720px) {
  body.project { --spine: calc(100% - 0.5rem); }
  .screen__title { left: 1rem; right: 1rem; font-size: clamp(3rem, 15vw, 4.5rem); }
  .wall {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    padding-top: 3rem;
  }
  .label { padding: 0 3rem 0 1rem; }
  .hook { text-align: left; }
  .synopsis { padding: 0 3rem 0 1rem; }
  .next { grid-template-columns: 1fr; padding: 4rem 0 1rem; }
  .next__inner { grid-column: 1; padding: 0 3rem 0 1rem; }
  .next__footer { padding: 0 1rem; }
}

/* ---- Additions for the other project pages ---- */

/* long titles step down a size so they don't swallow the image */
.screen__title--long {
  font-size: clamp(2.75rem, 6.5vw, 6.5rem);
  line-height: 0.98;
  max-width: 14em;
}

/* a work with no still yet: the dark room stays empty */
.screen--empty { background: var(--color-bg); }

/* external links in the label, styled like the screener link */
.label__link a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-faint);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.label__link a:hover,
.label__link a:focus-visible {
  color: var(--color-red);
  border-color: var(--color-red);
}

/* titles of other works, books and poems inside the synopsis */
.synopsis em { font-style: italic; }
.synopsis a {
  border-bottom: 1px solid var(--ink-faint);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.synopsis a:hover,
.synopsis a:focus-visible { color: var(--color-red); border-color: var(--color-red); }

/* a curatorial quote closing the synopsis */
.synopsis blockquote {
  margin: 2rem 0 0;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-dim);
}
.synopsis blockquote p { margin: 0 0 0.5em; }
.synopsis blockquote footer {
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 720px) {
  .screen__title--long { font-size: clamp(2.25rem, 10vw, 3.25rem); }
}

/* bilingual titles ("echo"): English, a slash, then the original
   title in the faded grey of the work page's filtered titles */
.screen__title--echo {
  font-size: clamp(2.6rem, 6vw, 6.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: none;
}
.screen__title--echo .sl {
  color: rgba(242, 240, 236, 0.35);
  font-weight: 300;
  margin: 0 0.12em;
}
.screen__title--echo .screen__bs { color: rgba(242, 240, 236, 0.42); }

@media (max-width: 720px) {
  .screen__title--echo { font-size: clamp(2.25rem, 10vw, 3.25rem); }
}

/* the two facts a reader looks for first (what it is, how long),
   singled out by scale and colour rather than bold */
.label__key {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.45vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.label__key .sl { color: var(--ink-faint); margin: 0 0.3em; }

/* ---- The reading room: an excerpt of a performed text, one line
   at a time as you scroll, like surtitles above a stage ---- */
.excerpt {
  position: relative;
  background: var(--color-bg);
  color: var(--color-fg);
}

.excerpt__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.excerpt__meta {
  position: absolute;
  top: 5rem;
  left: 1.75rem;
  right: 1.75rem;
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 240, 236, 0.45);
}

.excerpt__lines {
  position: absolute;
  left: 1.75rem;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.excerpt__lines li {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% + 1.5rem));
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), color 0.7s var(--ease);
}

/* the new line arrives just after the old one has lifted away,
   so the two never sit on top of each other */
.excerpt__lines li.is-now {
  opacity: 1;
  transform: translateY(-50%);
  transition-delay: 0.3s;
}

.excerpt__lines li.is-past {
  opacity: 0;
  transform: translateY(calc(-50% - 2.5rem));
  transition-duration: 0.35s;
}

.excerpt__end {
  position: absolute;
  left: 1.75rem;
  bottom: 2.5rem;
  margin: 0;
  font-size: 0.8125rem;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.excerpt.is-done .excerpt__end { opacity: 1; }

.excerpt__end a {
  color: var(--color-fg);
  border-bottom: 1px solid rgba(242, 240, 236, 0.3);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.excerpt__end a:hover,
.excerpt__end a:focus-visible { color: var(--color-red); border-color: var(--color-red); }

/* without the script, or with reduced motion: just the lines, in order */
.excerpt.is-static .excerpt__stage { position: static; height: auto; padding: 5rem 1.75rem 4rem; }
.excerpt.is-static .excerpt__meta,
.excerpt.is-static .excerpt__lines,
.excerpt.is-static .excerpt__end { position: static; transform: none; opacity: 1; }
.excerpt.is-static .excerpt__meta { margin-bottom: 2rem; }
.excerpt.is-static .excerpt__lines li {
  position: static; transform: none; opacity: 1; margin-bottom: 0.6em;
}
.excerpt.is-static .excerpt__end { margin-top: 2rem; }

@media (max-width: 720px) {
  .excerpt__meta, .excerpt__lines, .excerpt__end { left: 1rem; right: 3rem; }
  .excerpt__lines li { font-size: clamp(1.75rem, 8.5vw, 2.5rem); }
}