/* Layout: an album sleeve. Full-bleed night video, credits in the corners, the name set huge along the bottom edge; the back of the sleeve below. The privacy and not-found pages are the inner sleeve: the same night, plain text. */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin-variable.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --night: #07080d;      /* the page, and the shadows in the clip */
  --sleeve: #0e1019;     /* the back of the sleeve */
  --chalk: #f6f3ec;      /* the name and headings */
  --mist: #b9b6c4;       /* running text */
  --dim: #7d7a8a;        /* small print */
  --amber: #f0b54a;      /* the streetlights: one accent, used sparingly */
  --rule: rgba(246, 243, 236, 0.16);
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --body: "Archivo", "Segoe UI", system-ui, sans-serif;
  --label: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --edge: clamp(1rem, 3vw, 2.25rem);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); }
body { margin: 0; background: var(--night); color: var(--mist); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--chalk); text-decoration-color: var(--amber); text-underline-offset: .2em; }
a:hover { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.label { font: 500 .72rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--chalk); }

/* ---------- The sleeve ---------- */
/* --cover-h is the screen's height when the page loaded, set by site.js, so the cover doesn't grow and shrink with a phone's toolbars as you scroll. */
.cover { position: relative; min-height: max(36rem, var(--cover-h, 100svh)); display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--edge) + env(safe-area-inset-top, 0px)) var(--edge) var(--edge); overflow: hidden; isolation: isolate; background: var(--night) url("hero-poster.jpg") 74% 40% / cover no-repeat; }
.cover video, .cover .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 40%; z-index: -2; }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(7, 8, 13, .92) 0%, rgba(7, 8, 13, .55) 30%, rgba(7, 8, 13, 0) 58%),
    linear-gradient(to bottom, rgba(7, 8, 13, .55) 0%, rgba(7, 8, 13, 0) 18%); }

.topline { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topline .amber { color: var(--amber); }

.spine { position: absolute; top: 50%; writing-mode: vertical-rl; color: rgba(246, 243, 236, .7); }
.spine.left { left: calc(var(--edge) * .55); transform: translateY(-50%) rotate(180deg); }

.title { align-self: end; display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
/* Archivo, black and fully expanded, sets UBASTI at 4.91 times its font size. On wide screens the name fills 62% of the width, stopping short of the cat; on phones it runs edge to edge below her. */
.name { --share: .62; margin: 0 0 0 -.03em; font: 900 calc((100vw - 2 * var(--edge)) * var(--share) / 4.91)/.8 var(--display); font-stretch: 125%; letter-spacing: -.02em; color: var(--chalk); text-transform: uppercase; white-space: nowrap; }
.credits { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 2rem; border-top: 1px solid var(--rule); padding-top: .9rem; }
.credits .what { margin: 0; color: var(--chalk); }
.credits .what span { color: var(--mist); }
.pause { color: var(--chalk); background: transparent; border: 1px solid var(--rule); border-radius: 999px; min-height: 44px; padding: .45rem .9rem; cursor: pointer; display: inline-flex; gap: .5rem; align-items: center; }
.pause:hover { border-color: var(--amber); color: var(--amber); }
.pause i { width: .55rem; height: .6rem; display: inline-block; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.pause[data-paused="true"] i { border: 0; width: 0; height: 0; border-left: .55rem solid currentColor; border-top: .32rem solid transparent; border-bottom: .32rem solid transparent; }

/* ---------- The back of the sleeve ---------- */
.back { background: var(--sleeve); padding: clamp(3rem, 8vw, 6rem) var(--edge) var(--edge); display: grid; gap: clamp(3rem, 7vw, 5rem); }
.liner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); max-width: 76rem; }
.liner h2 { margin: 0 0 1.25rem; font: 800 clamp(1.6rem, 3.2vw, 2.6rem)/1.08 var(--display); font-stretch: 112%; letter-spacing: -.02em; color: var(--chalk); text-wrap: balance; max-width: 18ch; }
.liner p { margin: 0 0 1rem; max-width: 60ch; }
.notes { display: grid; gap: 1.6rem; align-content: start; }
.notes dl { margin: 0; display: grid; gap: 1.6rem; }
.notes dt { color: var(--dim); margin-bottom: .35rem; }
.notes dd { margin: 0; color: var(--chalk); }

.smallprint { border-top: 1px solid var(--rule); padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; font: 500 .74rem/1.6 var(--label); letter-spacing: .04em; color: var(--dim); }
.smallprint p { margin: 0; max-width: 70ch; }
.smallprint a { color: var(--dim); }
.smallprint a:hover { color: var(--amber); }

/* ---------- The inner sleeve: privacy and not-found ---------- */
.masthead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: calc(var(--edge) + env(safe-area-inset-top, 0px)) var(--edge) var(--edge); border-bottom: 1px solid var(--rule); }
.wordmark { font: 900 1.35rem/1 var(--display); font-stretch: 125%; letter-spacing: -.02em; color: var(--chalk); text-decoration: none; }
.page { background: var(--night); padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.prose { max-width: 42rem; }
.prose h1 { margin: 0 0 .75rem; font: 800 clamp(2rem, 5vw, 3.4rem)/1.04 var(--display); font-stretch: 112%; letter-spacing: -.02em; color: var(--chalk); }
.prose h2 { margin: 2.5rem 0 .75rem; font: 600 1.2rem/1.3 var(--body); color: var(--chalk); }
.prose p, .prose ul { margin: 0 0 1rem; }
.prose li { margin-bottom: .4rem; }
.prose strong { color: var(--chalk); font-weight: 600; }
.prose .updated { color: var(--dim); margin-bottom: 2rem; }
.optout { display: inline-flex; align-items: center; min-height: 44px; margin: .5rem 0 0; padding: .45rem .9rem; color: var(--chalk); background: transparent; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; }
.optout:hover { border-color: var(--amber); color: var(--amber); }
.optout-state { color: var(--chalk); }

@media (max-width: 44rem) {
  .spine { display: none; }
  .name { --share: 1; }
  .cover { background-position: 86% 40%; }
  .cover video, .cover .still { object-position: 86% 40%; }
  .credits { grid-template-columns: 1fr auto; }
  .credits .what { grid-column: 1 / -1; }
  .pause { justify-self: start; }
  .liner { grid-template-columns: 1fr; }
}
/* Reduce motion: if the script hasn't run to pause the film, hide it and show the still behind it. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .cover video:not([data-ready]) { display: none; } }