/* slop.cobanov.dev: a dark gallery you walk through sideways. Time runs left to right along one axis;
   each model's clips hang down its own column under a white museum label. */
:root {
  --bg: #000;
  --ink: #ece9e2;
  --muted: #9c9a94;
  --rule: rgba(236, 233, 226, 0.2);
  --label: #fff;
  --label-ink: #1d201e;
  --brass: #d6b06a;
  --display: "Gloock", Georgia, serif;
  --text: "Schibsted Grotesk", system-ui, sans-serif;
  --axis: 4.5rem;          /* where the time axis runs across the screen */
  --nav: 3.25rem;          /* year bar at the bottom */
  --col: 340px;            /* a model column */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); }
html { font: 400 1.0625rem/1.6 var(--text); -webkit-text-size-adjust: 100%; }
a { color: var(--brass); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; }
p { margin: 0 0 1rem; }

/* The axis: fixed across the screen, filling up as you move toward the present. */
.axis { position: fixed; z-index: 2; left: 0; right: 0; top: var(--axis); height: 1px; background: var(--rule); pointer-events: none; }
.axis-fill { height: 1px; width: 100%; background: var(--brass); transform-origin: left; transform: scaleX(0); }

/* The track scrolls sideways; every panel is a column that scrolls down on its own. */
.track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline-offset: -4px; }
/* Each panel: a fixed head that holds its dot and year on the axis, and a body that scrolls down under it. */
.panel { flex: 0 0 auto; height: 100%; display: flex; flex-direction: column; padding-right: 3.5rem; }
.panel-head { position: relative; flex: 0 0 calc(var(--axis) + 1.6rem); }
.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  padding-bottom: calc(var(--nav) + 2.5rem);
}
.panel:first-child { padding-left: max(16px, 5vw); }
.panel:last-child { padding-right: max(16px, 8vw); }

/* A dot on the axis where each dated panel sits; the year rides above the axis when it changes. */
.entry .panel-head::after, .wall .panel-head::after { content: ""; position: absolute; top: calc(var(--axis) - 4px); left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.wall .panel-head::after { background: var(--muted); width: 7px; height: 7px; top: calc(var(--axis) - 3px); }
.year-mark { position: absolute; top: calc(var(--axis) - 3.6rem); left: 0; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--ink); }

/* Opening */
.intro { width: min(62rem, 92vw); }
.intro .panel-body, .feature .panel-body { display: flex; flex-direction: column; justify-content: flex-end; }
.title { font-size: clamp(7rem, 26vw, 22rem); line-height: 0.78; letter-spacing: -0.02em; margin: 0 0 0.3em -0.04em; }
@media (prefers-reduced-motion: no-preference) {
  .title { filter: url(#melt); }
}
.lede { max-width: 34ch; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; }
.hint { color: var(--muted); font-size: 0.9375rem; max-width: 40ch; margin: 0; }
.hero-work video { width: min(512px, 80vw); height: auto; }

/* Text panels */
.prose { width: min(36rem, 88vw); }
.prose h2, .compare h2, .archive h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 1.5rem; }
.prose p { font-size: 1.0625rem; }
.entry { width: min(25rem, 86vw); }
.entry time { display: block; color: var(--muted); font-size: 0.9375rem; }
.entry h3 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin: 0.2rem 0 0.9rem; }
.src, .note { color: var(--muted); font-size: 0.875rem; }
.note { max-width: 60ch; }
.foot { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }

/* A hung work: clip, shadow, white label. */
.work { margin: 0; }
.work video { display: block; background: #111; }
.open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.label { background: var(--label); color: var(--label-ink); padding: 0.6rem 0.8rem 0.65rem; margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.4; }
.label b { display: block; font-weight: 700; }
.label i, .label span { display: block; }
.label i { margin-bottom: 0.2rem; }

/* A model column: its label at the top, its clips running down. */
.wall { width: var(--col); }
.wall .series { margin: 0 0 1.75rem; }
.wall .work { margin-bottom: 1.75rem; }
.wall .work video { width: 100%; height: auto; }

/* Outside videos under an entry: the platform's still until pressed, then its own player. Credits sit on the label. */
.entry .ext { margin: 1.5rem 0 1.75rem; }
.facade, .ext iframe { position: relative; display: block; width: 100%; aspect-ratio: var(--r, 16/9); padding: 0; border: 0; background: #111; overflow: hidden; }
.facade { cursor: pointer; }
.facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.facade::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -10px; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.7)); }
.facade:hover::after { border-left-color: var(--brass); }
.ext iframe.reddit { aspect-ratio: auto; height: 34rem; }
.label a { color: var(--label-ink); }

/* Comparison: pick a prompt, the models line up sideways. */
.compare { width: auto; max-width: none; }
.prompt-picker { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 1.5rem 0 2rem; max-width: 60rem; }
.prompt-picker button { font: italic 400 1rem/1.4 var(--text); color: var(--muted); background: none; border: 0; border-bottom: 1px solid transparent; padding: 0.2rem 0; cursor: pointer; }
.prompt-picker button:hover { color: var(--ink); }
.prompt-picker button[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--brass); }
.compare-row { display: flex; gap: 1.75rem; align-items: flex-start; }
.compare-row .work { width: 260px; flex: 0 0 auto; }
.compare-row video { width: 100%; height: auto; }

/* Archive tables */
.archive { width: min(48rem, 92vw); }
.archive h3 { font-size: 1.4rem; margin: 2.25rem 0 0.75rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; font-size: 0.875rem; width: 100%; }
th { text-align: left; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--rule); padding: 0 1.25rem 0.5rem 0; }
td { padding: 0.5rem 1.25rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.num { text-align: right; white-space: nowrap; }
.empty td { color: var(--muted); }

/* Year bar */
.years { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--nav); display: flex; align-items: center; gap: 0.25rem 1.5rem; padding: 0 max(16px, 5vw); background: linear-gradient(transparent, #000 40%); overflow-x: auto; scrollbar-width: none; }
.years button { font: 400 1.0625rem var(--display); color: var(--muted); background: none; border: 0; padding: 0.25rem 0; cursor: pointer; white-space: nowrap; }
.years button:hover { color: var(--ink); }
.years button[aria-current="true"] { color: var(--ink); border-bottom: 1px solid var(--brass); }

/* Real-size viewer */
dialog { background: transparent; border: 0; padding: 0; color: var(--ink); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; }
dialog::backdrop { background: rgba(0, 0, 0, 0.92); }
dialog .label { width: max-content; max-width: 32ch; }
.close { display: block; margin: 0 0 1rem auto; font: 500 0.9375rem var(--text); color: var(--ink); background: none; border: 1px solid var(--rule); padding: 0.35rem 0.8rem; cursor: pointer; }

@media (max-width: 760px) {
  :root { --axis: 3.75rem; --col: 78vw; }
  .panel { padding-right: 2rem; }
  .year-mark { font-size: 2rem; top: calc(var(--axis) - 2.9rem); }
  .compare-row .work { width: 70vw; }
}