/* ==========================================================================
   Mariola Brillowska — site styles
   --------------------------------------------------------------------------
   A single stylesheet built on custom properties, CSS grid and container
   queries.  The palette keeps the neon identity of the original site
   (cyan headline glow on near-black, mono labels) but every control is real
   text, a real link, or a real <video> — no image buttons, no Flash.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --ink: #f2f5f7;
  --ink-dim: #a7b4bd;
  --ink-faint: #6f7d87;
  --bg: #05070a;
  --bg-raise: #0b0f15;
  --bg-sink: #020305;
  --line: color-mix(in oklab, var(--cyan) 22%, transparent);
  --line-soft: color-mix(in oklab, var(--ink) 14%, transparent);

  --cyan: #22d3ee;
  --cyan-soft: #7ce7f5;
  --magenta: #e935c1;
  --red: #ff2d55;
  --teal: #3cbba6;
  --amber: #ffb347;

  --accent: var(--cyan);
  --on-accent: #04121a;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-1: clamp(1.13rem, 1.06rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.5rem + 2.8vw, 4rem);

  --gap: clamp(0.9rem, 0.7rem + 0.9vw, 1.6rem);
  --pad: clamp(1rem, 0.6rem + 2vw, 2.4rem);
  --radius: 4px;
  --radius-lg: 10px;
  --shell: 78rem;
  --measure: 68ch;

  --glow: 0 0 18px color-mix(in oklab, var(--cyan) 45%, transparent);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Wordmark plate geometry, shared by the masthead and the menu bar. */
  --plate-max: 1600px;
  --plate-w: min(100vw, var(--plate-max));
  --plate-h: calc(var(--plate-w) * 143 / 700);
  /* How far the bar rides up over the plate.  The wordmark ends around 52% of
     the plate height, so the lift stays under that and never clips a letter;
     as a percentage it holds at every width. */
  --plate-lift: calc(var(--plate-h) * 0.44);

  /* Width of the column reserved for the section artwork on a wide screen.
     It lives on :root rather than on .page-bg because the page furniture has
     to step around it too, and those are siblings, not parent and child. */
  --art-w: 0px;
  /* Breathing room between the reading column and the picture.  It is taken
     out of --art-w rather than added to it, so the space the page furniture
     has to fit into stays exactly as calculated and the menu bar cannot be
     squeezed out of its single line. */
  --art-gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

/* --- reset -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep anchored jumps clear of the sticky, half transparent menu bar. */
  scroll-padding-top: 4.5rem;
  scrollbar-color: var(--cyan) var(--bg-sink);
}

body {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
}

/* The section's own photograph, stitched back together from the two files the
   old right-hand column used.  How much room it gets is set further down, in
   the artwork column section, which also moves the page furniture out of it. */
.page-bg {
  position: fixed;
  top: 4.5rem;
  bottom: 0;
  right: 0;
  z-index: 0;
  /* The gap is carved out of the reserved strip, so the picture stands clear
     of the content boxes instead of butting up against them. */
  width: calc(var(--art-w) - var(--art-gap));
  overflow: hidden;
  pointer-events: none;
}

/* Half of the sections are mirrored left to right, but that is baked into the
   stitched file by the image pipeline rather than done here: the picture is
   turned once, so every way of showing it agrees. */
.page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.82;
  filter: brightness(1.18) saturate(1.08) contrast(1.02);
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  background: var(--bg-raise);
}

h1, h2, h3, h4 {
  line-height: 1.15;
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--cyan);
  text-decoration-color: color-mix(in oklab, var(--cyan) 40%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.06em;
}

a:hover {
  color: var(--teal);
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--cyan);
  color: var(--bg);
}

hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
}

/* --- utilities ---------------------------------------------------------- */

.mono {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--cyan);
  color: var(--bg);
  font-weight: 600;
  border-radius: var(--radius);
  transition: top 0.18s var(--ease);
}

.skip-link:focus {
  top: 0.5rem;
}

/* Available to any component that needs a label only for assistive tech. */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- header ------------------------------------------------------------- */

/* The wordmark plate is the artist's own artwork, so it keeps its proportions
   at every width.  The menu bar is pulled up over its lower half; the lift is
   derived from the rendered plate height.  These live on :root because the bar
   is a sibling of the masthead and cannot inherit from it. */
.masthead {
  /* Clip the plate to the part that stays above the bar, so the rest reads as
     sliding underneath it rather than peeking out below. */
  height: calc(var(--plate-h) - var(--plate-lift));
  overflow: hidden;
  padding: 0;
  background: var(--bg);
}

.masthead__plate {
  display: block;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
}

.masthead__plate a {
  display: block;
  line-height: 0;
}

.masthead__plate img {
  display: block;
  width: 100%;
  max-width: var(--plate-max);
  height: auto;
  margin-inline: auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* The masthead clips the plate to the part above the bar, so the bar simply
     continues the header: the rest of the artwork reads as having slid
     underneath it.  Half transparent, so the plate and the section artwork
     stay visible through it. */
  background: color-mix(in oklab, var(--bg) 50%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block: 1px solid var(--line);
}

.topbar__inner {
  width: min(100% - 2 * var(--pad), var(--shell));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem var(--gap);
  padding-block: 0.45rem;
}

.topbar__mark {
  margin-right: auto;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  text-shadow: 0 0 10px color-mix(in oklab, var(--cyan) 55%, transparent);
  white-space: nowrap;
  /* Hidden until the masthead has scrolled out of view */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.3rem);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.topbar[data-scrolled] .topbar__mark {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.topbar__mark:hover {
  color: var(--cyan-soft);
}

.topbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.topbar__list a {
  display: block;
  padding: 0.35rem 0.55rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.topbar__list a:hover {
  color: var(--cyan);
  border-color: var(--line);
}

.topbar__list a[aria-current="page"] {
  color: var(--bg);
  background: var(--cyan);
  border-color: var(--cyan);
}

.nav-toggle {
  display: none;
  align-items: center;
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

@media (max-width: 56rem) {
  .topbar__mark {
    font-size: 0.72rem;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .topbar__list {
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
  }

  .topbar__list:not([data-open]) {
    display: none;
  }

  .topbar__list[data-open] {
    border-top: 1px solid var(--line-soft);
    margin-top: 0.4rem;
    padding-top: 0.3rem;
  }

  .topbar__list a {
    padding: 0.55rem 0.4rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
}

/* --- shell -------------------------------------------------------------- */

.shell {
  flex: 1;
  width: min(100% - 2 * var(--pad), var(--shell));
  margin-inline: auto;
  padding-block: clamp(1.4rem, 1rem + 2vw, 3rem);
  min-width: 0;
}

/* --- page header -------------------------------------------------------- */

.page-head {
  margin-bottom: var(--gap);
  padding-bottom: var(--gap);
  border-bottom: 1px solid var(--line-soft);
}

.page-head h1 {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
  color: var(--ink-faint);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.35rem;
  opacity: 0.5;
}

.breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--cyan);
}

/* --- prose -------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 0.9em;
}

.prose h2,
.prose h3 {
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--cyan);
  margin-top: 1.6em;
}

.prose a {
  color: var(--cyan);
}

.prose strong,
.prose b {
  color: #fff;
}

.prose ul {
  padding-left: 1.1rem;
}

.prose li + li {
  margin-top: 0.25em;
}

.verse {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step-0);
  line-height: 1.9;
  white-space: pre-line;
  color: var(--ink);
}

/* --- details ------------------------------------------------------------ */

details.more {
  margin-top: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--bg-raise) 70%, transparent);
}

details.more > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

details.more > summary::-webkit-details-marker {
  display: none;
}

details.more > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.2em;
  line-height: 1;
}

details.more[open] > summary::after {
  content: "\2212";
}

details.more > summary:hover {
  color: var(--teal);
}

details.more .more__body {
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.9rem;
  color: var(--ink-dim);
}

details.more .more__body > * + * {
  margin-top: 0.8em;
}

/* --- cards -------------------------------------------------------------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  container-type: inline-size;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.card {
  display: flex;
}

/* The cards adapt to the width of the grid they sit in, not the viewport, so
   the same component works in a full page or a narrow column. */
@container (min-width: 34rem) {
  .cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  }
}

.card > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

.card > a:hover,
.card > a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--card-accent, var(--cyan));
  box-shadow: 0 10px 30px -18px color-mix(in oklab, var(--card-accent, var(--cyan)) 80%, transparent);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-sink);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}

.card > a:hover .card__media img {
  transform: scale(1.04);
  filter: saturate(1.1);
}

.card__title {
  display: block;
  padding: 0.6rem 0.7rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--card-ink, #fff);
  background: var(--card-accent, var(--line-soft));
  border-top: 1px solid color-mix(in oklab, var(--card-ink, #fff) 25%, transparent);
  margin-top: auto;
}

/* --- pagination --------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--line-soft);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0 0.7rem;
  font-family: ui-monospace, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.pagination a:hover {
  color: var(--bg);
  background: var(--cyan);
  border-color: var(--cyan);
}

.pagination [aria-current="page"] {
  color: var(--bg);
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 700;
}

/* --- work navigation ---------------------------------------------------- */

.work-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--line-soft);
}

.work-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.1rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.work-nav a:hover {
  color: var(--bg);
  background: var(--cyan);
  border-color: var(--cyan);
}

/* --- media / player ----------------------------------------------------- */

.meta {
  margin-top: 0.5rem;
  color: var(--ink-faint);
}

.page-head .meta {
  color: var(--cyan);
}

.work {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 58rem) {
  .work {
    grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr);
    align-items: start;
  }

  .work--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.work__side {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.work__side .prose > :first-child {
  margin-top: 0;
}

.player {
  --accent: var(--cyan);
  margin: 0;
}

.player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent),
    0 24px 60px -40px color-mix(in oklab, var(--accent) 90%, transparent);
}

.player__frame video,
.player__frame .plyr {
  width: 100%;
  height: 100%;
}

.player__frame video {
  object-fit: contain;
  background: #000;
}

.player__frame .plyr__poster-wrapper {
  background: var(--accent);
}

/* The canvas is the transport: clicking anywhere on the picture plays, and
   clicking it again while the film runs pauses.  That is only discoverable if
   the frame looks like a control, so the video carries a pointer and, once
   playing, a pause mark that appears on hover -- the pause mark is what tells
   you the click will stop it.  Drawn from gradients, so it needs no icon font
   and no extra file.  Both rules sit under Plyr's own class names, so with
   scripting off the native controls are used and neither applies. */
.player__frame video {
  cursor: pointer;
}

.player__frame .plyr__video-wrapper {
  cursor: pointer;
}

.player__frame .plyr--playing .plyr__video-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.6rem;
  height: 3.6rem;
  transform: translate(-50%, -50%) scale(0.85);
  border-radius: 50%;
  background-color: rgb(5 7 10 / 0.6);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.55);
  /* Two bars, offset either side of the centre: a pause mark. */
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-size: 0.32rem 1.5rem, 0.32rem 1.5rem;
  background-position: calc(50% - 0.44rem) center, calc(50% + 0.44rem) center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  pointer-events: none;
}

.player__frame .plyr--playing:hover .plyr__video-wrapper::after,
.player__frame .plyr--playing .plyr__video-wrapper:focus-within::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* A smaller frame for the front page, where the still should sit beside the
   text rather than fill the column. */
.player--compact .player__frame {
  aspect-ratio: 16 / 9;
}

.player__caption {
  margin-top: 0.55rem;
  color: var(--ink-faint);
}

.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.linklist a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: ui-monospace, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.linklist a::after {
  content: "\2197";
  color: var(--cyan);
  font-size: 0.9em;
}

.linklist a:hover {
  color: var(--teal);
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.buttons a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  font-family: ui-monospace, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--cyan);
  border-radius: var(--radius);
}

.buttons li:nth-child(2) a {
  background: var(--red);
  color: #fff;
}

.buttons li:nth-child(3) a {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan);
}

.buttons a:hover {
  filter: brightness(1.12);
}

/* --- gallery ------------------------------------------------------------ */

.gallery-block {
  margin-top: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  padding-top: var(--gap);
  border-top: 1px solid var(--line-soft);
}

.gallery-block > h2 {
  color: var(--cyan);
  margin-bottom: 0.7rem;
}

.gallery {
  list-style: none;
  margin: var(--gap) 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}

.gallery a {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-sink);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: zoom-in;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.gallery a:hover,
.gallery a:focus-visible {
  border-color: var(--cyan);
  transform: scale(1.03);
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__count {
  margin-top: 0.5rem;
  color: var(--ink-faint);
}

.lightbox {
  width: min(100vw - 2rem, 70rem);
  max-width: none;
  max-height: 100dvh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #000;
  color: var(--ink);
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 0.88);
  backdrop-filter: blur(4px);
}

.lightbox img {
  max-height: 78dvh;
  width: auto;
  margin-inline: auto;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--line-soft);
}

.lightbox__bar span {
  margin-right: auto;
  color: var(--ink-faint);
}

.lightbox button {
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.lightbox button:hover {
  color: var(--bg);
  background: var(--cyan);
  border-color: var(--cyan);
}

/* --- chronology sections ------------------------------------------------ */

.chronology > section + section {
  margin-top: clamp(1.6rem, 1rem + 2vw, 2.8rem);
}

.chronology h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  font-family: ui-monospace, monospace;
  font-size: var(--step-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.2rem;
}

/* The key that explains the * markers runs above the list, not beside a year. */
.chron__legend {
  margin: 0.2rem 0 0.6rem;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* Year in its own column on the left, so the dates line up. */
.chron {
  margin: 0.4rem 0 0;
  display: grid;
  gap: 0;
}

.chron__row {
  display: grid;
  grid-template-columns: clamp(4.6rem, 13vw, 6.4rem) minmax(0, 1fr);
  gap: 0 1.1rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-top: 1px solid var(--line-soft);
}

.chron__row:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.chron__year {
  font-family: ui-monospace, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--cyan);
  white-space: nowrap;
  padding-left: 0.6rem;
  border-left: 2px solid color-mix(in oklab, var(--cyan) 45%, transparent);
}

.chron__year:empty {
  border-left-color: transparent;
}

.chron__entry {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* Sections whose first column held category labels rather than years. */
.chron__list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.chron__list li {
  padding: 0.3rem 0 0.3rem 0.9rem;
  border-left: 1px solid var(--line-soft);
  color: var(--ink-dim);
  font-size: var(--step--1);
  line-height: 1.5;
}

/* --- press -------------------------------------------------------------- */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: var(--gap);
  /* Stays inside the reading column so it never runs over the section art. */
  max-width: 26rem;
}

.filter label {
  color: var(--ink-faint);
}

.filter form {
  flex: 1 1 12rem;
  min-width: 0;
}

.filter input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.filter input:focus {
  border-color: var(--cyan);
  outline: none;
}

.press {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.press li {
  border-bottom: 1px solid var(--line-soft);
}

.press a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  padding: 0.5rem 0.3rem;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--step-0);
}

.press a::after {
  content: "\2197";
  color: var(--ink-faint);
  font-size: 0.85em;
}

.press a:hover {
  color: var(--cyan);
  background: color-mix(in oklab, var(--cyan) 8%, transparent);
}

.press .source {
  font-family: ui-monospace, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.press a:hover .source {
  color: var(--cyan);
}

.press__empty {
  padding: 1rem 0;
  color: var(--ink-faint);
}

mark {
  background: color-mix(in oklab, var(--cyan) 30%, transparent);
  color: #fff;
  border-radius: 2px;
}

/* --- contact ------------------------------------------------------------ */

.contact-card {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 34rem) {
  .contact-card {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

.contact-card__portrait img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.contact-card .prose section + section {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.contact-card .prose h3.mono {
  margin: 0 0 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --- front page --------------------------------------------------------- */

/* Lead story: one player beside its text. */
.lead {
  display: grid;
  gap: var(--gap);
  margin-bottom: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem);
  padding: clamp(1.1rem, 0.8rem + 1.6vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(130deg, color-mix(in oklab, var(--magenta) 14%, transparent), transparent 60%),
    color-mix(in oklab, var(--bg-raise) 80%, transparent);
}

@media (min-width: 56rem) {
  .lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
  }
}

.lead__text {
  min-width: 0;
}

.lead__eyebrow {
  color: var(--cyan);
  margin-bottom: 0.4rem;
}

.lead h2 {
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lead .prose {
  margin-top: 0.6rem;
  color: var(--ink-dim);
}

.lead__media {
  min-width: 0;
}

/* Section heading with a "see all" link. */
.section + .section {
  margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.4rem);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  margin-bottom: var(--gap);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.section__head h2 {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.section__blurb {
  flex: 1 1 14rem;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

.section__more {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  white-space: nowrap;
}

.section__more:hover {
  color: var(--cyan);
}

/* A horizontally scrolling row of small stills. */
.strip {
  list-style: none;
  margin: 0;
  padding: 0 0 0.4rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(8.5rem, 22vw, 12.5rem);
  gap: 0.7rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.strip__item {
  scroll-snap-align: start;
  min-width: 0;
}

.strip__item > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}

.strip__item > a:hover,
.strip__item > a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--card-accent, var(--cyan));
}

.strip__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-sink);
}

.strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}

.strip__item > a:hover .strip__media img {
  transform: scale(1.05);
}

.strip__title {
  display: block;
  margin-top: auto;
  padding: 0.45rem 0.5rem;
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--card-ink, #fff);
  background: var(--card-accent, var(--line-soft));
}

/* News entries, still-led rather than player-led. */
.news {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.4rem, 1rem + 2vw, 2.6rem);
}

.news__item {
  display: grid;
  gap: var(--gap);
  padding-bottom: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 48rem) {
  .news__item {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    align-items: start;
  }

  /* No still to sit beside, so the text takes the whole width rather than
     leaving a gap where the picture would have been. */
  .news__item--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.news__media {
  min-width: 0;
  display: grid;
  gap: 0.7rem;
}

/* The archive only kept 80px news thumbnails, so these stills keep their own
   proportions and stay small rather than being blown up. */
.news__still {
  max-width: 11rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--bg-raise);
}

.news__still img {
  width: 100%;
  height: auto;
  filter: saturate(1.05);
}

.news__body {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
}

/* The archive stored some entries as a catalogue record -- author, title,
   extent, dimensions, publisher, ISBN, one field per line.  In a single narrow
   ribbon beside the player that made the box far taller than the film it
   describes, so those lines flow into two columns and the whole record sits
   next to a still of roughly the same height.  Only the line-per-field entries
   are marked; running prose stays in one column, where balancing would just
   add a line. */
@media (min-width: 48rem) {
  .prose--lines {
    columns: 2;
    column-gap: var(--gap);
  }
}

.news__body h3 {
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.news__body .prose {
  margin-top: 0.5rem;
  color: var(--ink-dim);
}

.news .meta {
  color: var(--ink-faint);
}

.schedule {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.1rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  font-family: ui-monospace, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

/* --- footer ------------------------------------------------------------- */

/* Centred, and carrying only the three off-site destinations: the section
   links all live in the menu bar a few pixels above.  The inner wrapper takes
   the same width and margins as the reading column, so the footer lines up
   with the page above it instead of centring in a wider box. */
.site-footer {
  margin-top: clamp(2rem, 1.5rem + 2vw, 4rem);
  /* No horizontal padding here: the inner wrapper already carries the gutter,
     and counting it twice would shift the footer a padding's width to the left
     of the reading column once the artwork column makes the margins lopsided. */
  padding: var(--gap) 0 2rem;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg-sink) 70%, transparent);
  color: var(--ink-faint);
  font-size: var(--step--1);
  text-align: center;
}

.footer__inner {
  width: min(100% - 2 * var(--pad), var(--shell));
  margin-inline: auto;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.4rem;
}

.site-footer a {
  color: var(--ink-dim);
  text-decoration: none;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer a:hover {
  color: var(--cyan);
}

/* One single line where there is width for it.  The notice is long, so it is set
   a step smaller than the links above it and held on one line from 68rem up.
   That threshold is not a guess: the text needs about 996px, and 68rem is the
   narrowest viewport whose reading column is still wider than that.  Below it
   the notice wraps -- holding it to one line there would push the page sideways,
   and shrinking it far enough to fit would make it unreadable. */
.footer__note {
  max-width: none;
  margin: 0.9rem auto 0;
  font-size: var(--step--1);
  text-wrap: balance;
}

@media (min-width: 68rem) {
  .footer__note {
    font-size: 0.72rem;
    white-space: nowrap;
  }
}

/* --- section artwork column ---------------------------------------------- */
/* The stitched section photograph is a central graphic element, so on a wide
   screen it is given a column of its own instead of being tucked behind the
   text.  Nothing can cover it, and it never covers anything either: the
   reading column, the menu bar and the footer all stop short of it.
   These rules come after the base layout so they take precedence over the
   centred defaults without needing to out-specify them.

   The menu bar and the artwork compete for the same row, and the bar's items
   need about 960px on their own.  84rem is the width at which a full column
   and a one-line bar both fit with room to spare; below it the picture goes
   back to being a wash behind the content rather than the bar wrapping. */

@media (min-width: 84rem) {
  :root {
    --art-w: clamp(16rem, 22vw, 23rem);
  }

  .shell,
  .topbar__inner,
  .footer__inner {
    width: min(100% - 2 * var(--pad) - var(--art-w), 64rem);
    margin-inline: auto;
  }

  /* The plate stays full bleed -- it is the artist's own artwork and is meant
     to run the full width -- but it is lifted above the section picture so the
     two never cut each other off. */
  .masthead {
    position: relative;
    z-index: 40;
  }
}

/* Below that there is no room for a column, so the picture goes back to being a
   faint wash behind the content rather than a competing element. */
@media (min-width: 46.01rem) and (max-width: 83.99rem) {
  :root {
    --art-w: clamp(13rem, 34vw, 26rem);
  }

  .page-bg img {
    opacity: 0.4;
    mask-image: linear-gradient(to left, #000 30%, transparent);
    -webkit-mask-image: linear-gradient(to left, #000 30%, transparent);
  }
}

/* On a phone it would only get in the way. */
@media (max-width: 46rem) {
  .page-bg {
    display: none;
  }
}

/* --- Plyr skin ---------------------------------------------------------- */

/* Icon symbols are inlined once per page; keep them out of the layout without
   display:none, which would stop <use> resolving them. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.plyr {
  /* The site's cyan drives the chrome; each title's own colour stays on the
     frame so the controls never turn neon green or unreadable. */
  --plyr-color-main: var(--cyan);
  --plyr-border-radius: var(--radius);
  --plyr-font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --plyr-font-size-base: 0.78rem;
  --plyr-control-spacing: 0.55rem;
  --plyr-control-radius: var(--radius);
  --plyr-video-background: #000;
  --plyr-range-track-height: 0.28rem;
  --plyr-range-thumb-height: 0.7rem;
}

/* A real bar, not controls floating on the picture: a solid strip that stays
   legible over any footage. */
.plyr--video .plyr__controls {
  padding: 0.35rem 0.5rem 0.4rem;
  background: rgb(4 6 9 / 0.92);
  border-top: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
  transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease);
}

/* Keep it on screen even when idle, so the bar is always discoverable. */
.plyr--video[data-plyr-embed="false"] .plyr__controls[data-hidden="false"],
.plyr--full-ui .plyr__controls,
.plyr__controls[data-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Icons are <use> references, so they take their fill from the button. */
.plyr__control svg {
  fill: currentColor;
}

.plyr__control--overlaid {
  background: color-mix(in oklab, var(--cyan) 92%, transparent);
  color: #fff;
}

.plyr__control--overlaid:hover,
.plyr__control--overlaid:focus-visible {
  background: var(--cyan);
  color: #fff;
}

.plyr__control:hover,
.plyr__control:focus-visible {
  color: var(--cyan);
  background: color-mix(in oklab, var(--cyan) 16%, transparent);
}

.plyr__control--overlay,
.plyr__control--seek-tooltip {
  display: none;
}

.plyr__time,
.plyr__volume {
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.plyr__progress,
.plyr__volume {
  --plyr-range-fill-background: var(--cyan);
  --plyr-range-thumb-background: var(--cyan);
  --plyr-range-background: color-mix(in oklab, var(--ink) 22%, transparent);
}

.plyr--full-ui input[type="range"] {
  color: var(--cyan);
}

.plyr__captions-button,
.plyr__menu {
  color: var(--ink-dim);
}

.plyr__menu {
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--ink);
}

.plyr__menu-item {
  background: transparent;
  color: var(--ink);
}

.plyr__menu-item:hover {
  background: var(--cyan);
  color: var(--bg);
}

/* --- motion &amp; print --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .topbar,
  .masthead__plate,
  .site-footer,
  .pagination,
  .work-nav,
  .filter,
  .nav-toggle {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}