:root {
  --accent: #402820;
  --bg: color-mix(in srgb, var(--accent) 65%, #000);
  --ink: #f4f1ec;
  --muted: #bfb3ac;
  --rule: rgba(244, 241, 236, 0.25);
  --sans: "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ts-body: clamp(17px, 0.21vw + 14.8px, 21px);
  --ts-read: clamp(18.5px, 0.31vw + 15.3px, 24px);
  --ts-h1: clamp(34px, 5.2vw, 84px);
  --ts-small: 14px;
  --space: clamp(64px, 7vw, 120px);
  --gutter: max(20px, 6.25vw);
  --hero-foot: clamp(32px, 6svh, 96px);
  --measure-read: min(100%, clamp(560px, 7.7vw + 529px, 730px));
}

@font-face {
  font-family: "Acumin Pro";
  src: url(/assets/fonts/acumin.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro";
  src: url(/assets/fonts/acumin-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro";
  src: url(/assets/fonts/acumin-bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--ink);
  font: 400 var(--ts-body)/1.44 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
p, figure, blockquote, ul { margin: 0; padding: 0; }
p + p { margin-top: 1.44em; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 700; }
h1 { font-size: var(--ts-h1); letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.02em; }
[hidden] { display: none !important; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
.c-text, .c-quote { width: 100%; max-width: 1215px; }
.prose, .quote blockquote p { max-width: var(--measure-read); }
.prose p, .quote blockquote p { font-size: var(--ts-read); line-height: 1.425; }
.work, .quote blockquote p { font-style: italic; }
.skip-link { position: absolute; top: 12px; left: var(--gutter); z-index: 5; padding: 12px; background: var(--bg); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* The painting and film title carry the identity; the header has two links. */
.site-header { position: absolute; inset: 0 0 auto; z-index: 3; padding: clamp(20px, 4svh, 48px) var(--gutter); }
.site-header__nav { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; font-size: clamp(16px, 1.2vw, 20px); }
.site-header__nav a { display: inline-flex; align-items: center; min-height: 44px; }

.hero { position: relative; min-height: 100svh; display: grid; }
.hero__shot { position: absolute; inset: 0; }
.hero__shot picture { display: block; height: 100%; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Static shading keeps the navigation and text legible over the watercolour. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 27%),
    linear-gradient(to bottom, transparent 28%, rgba(0,0,0,.35) 55%, var(--bg) 100%);
}
.hero__content { position: relative; z-index: 1; align-content: end; padding-top: 180px; padding-bottom: var(--hero-foot); }
.hero__body { max-width: 900px; }
.hero__artist { margin-bottom: 18px; font-size: clamp(20px, 2vw, 28px); }
.hero__meta { margin-top: 16px; font-size: 12px; line-height: 1.5; letter-spacing: 0.055em; text-transform: uppercase; font-weight: 700; }
.hero__intro { max-width: 700px; margin-top: 26px; }

.prod-article { padding-top: var(--space); }
.prod-article > * { margin-bottom: var(--space); }
.prod-article .show-lede { margin-bottom: 48px; }
.quote blockquote p + p { margin-top: 1.44em; }
.quote + .quote { margin-top: var(--space); }
.quote__source { margin-top: 20px; color: var(--muted); }
.section > h2 + * { margin-top: 30px; }
.credits__cols { columns: 1; column-gap: 32px; }
.credits__group { break-inside: avoid; margin-bottom: 30px; }
.credits__role { margin-bottom: 8px; color: var(--muted); font-size: var(--ts-small); font-weight: 400; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; }
.credits__names { list-style: none; }
.credits__names a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.credits__names a:hover { text-decoration-color: currentColor; }
.credits__note, .credits__image { font-size: var(--ts-small); line-height: 1.4; color: var(--muted); }
.credits__note { display: block; }

.pagefoot { padding-bottom: var(--hero-foot); }
.colophon { display: flex; flex-wrap: wrap; gap: 28px 64px; font-size: 14px; line-height: 1.7; }
.colophon p + p { margin-top: 4px; }
.colophon a { overflow-wrap: anywhere; }
.colophon__label { color: var(--muted); }
.legal { margin-top: 36px; font-size: 11px; line-height: 1.5; color: var(--muted); }

@media (min-width: 768px) { .credits__cols { columns: 2; } }
@media (min-width: 1024px) { .credits__cols { columns: 3; } }
@media (max-width: 767px) {
  .hero__shot img { object-position: 50% 50%; }
  .hero__meta { max-width: 340px; font-size: 11px; }
  .hero__intro { font-size: 17px; }
}

/* Static fragments of the hero painting continue behind the text. */
.page-ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;

  --pw: min(max(96vw, 780px), 2300px);

  --ar: 1.4998;

  --gs: 0.62;

  --m-ink:   url(/assets/images/ground-ink.png);
  --m-drift: url(/assets/images/ground-drift.png);
  --m-bloom: url(/assets/images/ground-bloom.png);
  --m-run:   url(/assets/images/ground-run.png);

  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 100svh, #000 125svh);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 100svh, #000 125svh);
}

.ground-piece {
  --cx: 0; --cy: 0; --cw: 0; --ch: 0; --op: 0; --k: 0; --px: 0;
  --m1: none; --m2: none;
  position: absolute;
  display: block;
  overflow: hidden;
  pointer-events: none;

  --bw: min(calc(var(--cw) * var(--pw)), 94vw);
  width: var(--bw);
  height: calc(var(--ch) * var(--pw) / var(--ar));

  top: calc(100svh + var(--k) * max(0px, 100% - 100svh - var(--ch) * var(--pw) / var(--ar)));
  opacity: calc(var(--op) * var(--gs));

  -webkit-mask-image: var(--m1), var(--m1), var(--m2);
          mask-image: var(--m1), var(--m1), var(--m2);

  --m2s: 84%;
  --m2p: 50% 50%;
  -webkit-mask-size: 100% 100%, 100% 100%, var(--m2s) var(--m2s);
          mask-size: 100% 100%, 100% 100%, var(--m2s) var(--m2s);
  -webkit-mask-position: 0 0, 0 0, var(--m2p);
          mask-position: 0 0, 0 0, var(--m2p);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.page-ground .ground-piece picture { display: block; }
.page-ground .ground-piece img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  width: var(--pw);
  height: auto;
  margin-left: calc(-1 * var(--cx) * var(--pw));
  margin-top:  calc(-1 * var(--cy) * var(--pw) / var(--ar));
}

.ground-piece { left: calc(var(--px) * max(0px, 100% - var(--bw))); }

.ground-piece--1 {  --cx:.677; --cy:.251; --cw:.323; --ch:.538; --op:.42; --k:.04;  --m1:var(--m-drift); --m2:var(--m-ink); --m2s:92%; --m2p:38% 30%; --px:1.04; }
.ground-piece--2 {  --cx:.099; --cy:.522; --cw:.702; --ch:.327; --op:.36; --k:.17;  --m1:var(--m-run);   --m2:var(--m-bloom); --m2s:78%; --m2p:62% 58%; --px:0.12; }
.ground-piece--3 {  --cx:.393; --cy:.152; --cw:.453; --ch:.397; --op:.34; --k:.32; --m1:var(--m-bloom); --m2:var(--m-ink); --m2s:88%; --m2p:30% 64%; --px:0.58; }
.ground-piece--4 {  --cx:0; --cy:.199; --cw:.37; --ch:.641; --op:.37; --k:.45; --m1:var(--m-drift); --m2:var(--m-run); --m2s:74%; --m2p:66% 34%; --px:-0.05; }
.ground-piece--5 {  --cx:.514; --cy:.448; --cw:.472; --ch:.445; --op:.48; --k:.58; --m1:var(--m-run);   --m2:var(--m-ink); --m2s:90%; --m2p:44% 70%; --px:0.78; }
.ground-piece--6 {  --cx:0; --cy:.566; --cw:.726; --ch:.269; --op:.34; --k:.70; --m1:var(--m-bloom); --m2:var(--m-drift); --m2s:80%; --m2p:58% 26%; --px:0.3; }
.ground-piece--7 {  --cx:.504; --cy:.329; --cw:.472; --ch:.262; --op:.66; --k:.82;  --m1:var(--m-drift); --m2:var(--m-ink); --m2s:86%; --m2p:34% 44%; --px:0.94; }
.ground-piece--8 {  --cx:0; --cy:.685; --cw:.774; --ch:.315; --op:.70; --k:.95;  --m1:var(--m-run);   --m2:var(--m-bloom); --m2s:76%; --m2p:70% 62%; --px:0.06; }