/* Variant A, "the tape".
   Without scripts the page is a plain scroll: four stills, each with its text under it.
   With scripts (.js on <html>) one frame fills the screen and the text stands inside it. */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

h1, h2, p, ol, ul, blockquote { margin: 0; padding: 0; font-weight: 400; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }

.scene, .entry, .hud, .spot, .back { display: none; }

/* ---------- type ---------- */

.name { font-size: var(--fs-display-l); }
.i { margin-inline: -0.125em; }
.p { margin-left: -0.125em; margin-right: -0.25em; }
.line { margin-top: 12px; max-width: 17.5em; }
.name + .line { margin-top: 20px; }
.line + .line { margin-top: 4px; }
.title { font-size: var(--fs-display-m); margin-bottom: 24px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: var(--fs-display-m);
  transition: color 120ms var(--ease);
}
.tag__dot { width: 9px; height: 9px; background: var(--dim); transition: background-color 120ms var(--ease); }
.tag:hover, .tag:focus-visible, .tag.is-hot { color: var(--acc); }
.tag:hover .tag__dot, .tag:focus-visible .tag__dot, .tag.is-hot .tag__dot { background: var(--acc); }

/* made: rows, the open one shows its description and stack */
.row { border-top: 1px solid var(--line); }
.rows li:last-child .row { border-bottom: 1px solid var(--line); }
.row__head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 2px 16px;
  align-items: baseline;
  margin: 0 -8px;
  padding: 11px 8px;
  cursor: pointer;
  list-style: none;
}
.row__head::-webkit-details-marker { display: none; }
.row__num { font-size: var(--fs-display-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.row__name { font-size: var(--fs-display-s); transition: color 120ms var(--ease); }
.row__one { grid-column: 2; font-size: var(--fs-text-s); }
.row__head:hover .row__name, .row__head:focus-visible .row__name, .row[open] .row__name { color: var(--acc); }
.row__head:focus-visible { outline-offset: -2px; }
.row__body { padding: 0 0 16px 48px; max-width: 60ch; font-size: var(--fs-text-s); }
.row__kind, .row__stack { color: var(--muted); }
.row__text { margin: 6px 0; }

/* about */
.lead { max-width: 30em; }
.lead + .lead { margin-top: 12px; }
.quote {
  margin-top: 40px;
  max-width: 26em;
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
  -webkit-font-smoothing: none;
}

/* contact */
.link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  width: 100%;
  padding: 12px 0;
}
.link__name { font-size: var(--fs-display-s); transition: color 120ms var(--ease); }
.link--main .link__name { font-size: var(--fs-display-m); }
.link__val { font-size: var(--fs-text-s); color: var(--muted); }
.link__note { font-size: var(--fs-text-s); }
.link:hover .link__name, .link:focus-visible .link__name { color: var(--acc); }

/* ---------- no scripts: stills in a column ---------- */

.shot { position: relative; max-width: 960px; margin: 0 auto 96px; }
.still, .still img { display: block; }
.still img { width: 100%; height: auto; image-rendering: pixelated; }
.copy, .zone { padding: 24px 24px 0; }
.tags { display: flex; flex-wrap: wrap; gap: 0 32px; padding: 16px 24px 0; }

/* ---------- with scripts: one frame, text inside it ---------- */

.js, .js body { height: 100%; overflow: hidden; }

.js .scene {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  image-rendering: pixelated;
}

.js .tape { position: fixed; inset: 0; }
.js:not(.is-live) .tape, .js:not(.is-live) .hud { visibility: hidden; }
.js .still { display: none; }
.js .shot { position: absolute; inset: 0; max-width: none; margin: 0; }
.js .shot[hidden] { display: none; }

.js .spot { display: block; position: absolute; }
.js .tags { display: block; position: absolute; inset: 0; padding: 0; pointer-events: none; }
.js .tag { position: absolute; transform: translateY(-50%); white-space: nowrap; pointer-events: auto; }
.js .copy { position: absolute; left: max(24px, 2.2vw); left: round(max(24px, 2.2vw), 1px); bottom: 7vh; bottom: round(7vh, 1px); padding: 0; max-width: 400px; }
.js .zone { position: absolute; padding: 0; }

.js .back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  left: 4vw;
  left: round(4vw, 1px);
  top: 8px;
  z-index: 2;
  padding: 16px 0;
  font-size: var(--fs-display-s);
  color: var(--muted);
  transition: color 120ms var(--ease);
}
.back__mark { display: inline-block; transform: scaleX(-1); }
.back:hover, .back:focus-visible { color: var(--acc); }

/* the press shows at once, before the cut lands on the beat */
:root[data-going="made"] .tag[data-go="made"],
:root[data-going="about"] .tag[data-go="about"],
:root[data-going="contact"] .tag[data-go="contact"],
:root[data-going="wide"] .back { color: var(--acc); }
:root[data-going="made"] .tag[data-go="made"] .tag__dot,
:root[data-going="about"] .tag[data-go="about"] .tag__dot,
:root[data-going="contact"] .tag[data-go="contact"] .tag__dot { background: var(--acc); }

.js .shot--made .zone {
  left: 4vw;
  left: round(4vw, 1px);
  top: 72px;
  bottom: 5vh;
  width: min(46vw, 640px);
  display: flex;
  flex-direction: column;
}
.js .rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-left: -8px;
  padding: 0 16px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.js .shot--about .zone { left: 57vw; left: round(57vw, 1px); right: 5vw; top: 26vh; top: round(26vh, 1px); }
.js .shot--contact .zone { left: 4vw; left: round(4vw, 1px); top: 22vh; top: round(22vh, 1px); width: min(40vw, 480px); }

/* first screen: each line comes up on its own beat, typed, not faded */
.js .step { visibility: hidden; }
.js .step.on { visibility: visible; }
.js .type.on { animation: type 240ms steps(12, end) both; }
@keyframes type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* sound and language, one corner */
.js .hud {
  display: flex;
  gap: 12px;
  position: fixed;
  right: calc(4vw - 8px);
  right: round(4vw - 8px, 1px);
  top: 8px;
  z-index: 3;
}
.hud__btn { min-width: 44px; padding: 16px 8px; font-size: var(--fs-display-s); color: var(--muted); text-align: center; transition: color 120ms var(--ease); }
.hud__btn:hover, .hud__btn:focus-visible { color: var(--ink); }
.hud__btn[data-state="on"] { color: var(--acc); }
.hud__btn:disabled { cursor: default; color: var(--muted); }

/* entry: the name and two items under the reels */
.js .entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  inset: 0;
  z-index: 4;
  padding: 0 16px 9vh;
}
.js .entry[hidden] { display: none; }
.entry__name { font-size: var(--fs-display-xl); }
.entry__menu { display: flex; gap: 72px; min-height: 44px; margin-top: 28px; } /* the height is held before the items come */
.entry__item { position: relative; padding: 10px 0; font-size: var(--fs-display-m); color: var(--muted); }
.entry__item.is-sel { color: var(--acc); }
.entry__item.is-sel::before { content: "\25B6"; position: absolute; right: 100%; margin-right: 12px; }

/* ---------- sizes ---------- */

/* the name grows only where it still ends left of the rear wheel; it has one size from there up */
@media (min-width: 1340px) and (min-aspect-ratio: 4/5) {
  .name { font-size: var(--fs-display-xl); }
}

@media (min-width: 1100px) and (min-aspect-ratio: 4/5) {
  .title { font-size: var(--fs-display-l); }
  .row__head { grid-template-columns: 32px 216px minmax(0, 1fr); }
  .row__one { grid-column: 3; }
  .link__name { font-size: var(--fs-display-m); }
  .link--main .link__name { font-size: var(--fs-display-l); }
  .js .copy { max-width: 400px; }
}

/* portrait: tall frames, text in the lower part of the screen */
@media (max-aspect-ratio: 4/5) {
  .js .copy { left: 16px; right: 16px; bottom: 28px; max-width: none; }
  .js .back { left: 16px; top: 4px; }
  .js .hud { right: 8px; top: 4px; gap: 4px; }
  .js .shot--made .zone { left: 16px; right: 0; top: 35%; bottom: 0; width: auto; } /* top is set from the frame by script */
  .js .shot--made .title { margin-bottom: 12px; }
  .js .rows { padding: 0 16px 24px 8px; margin-left: -8px; }
  .js .shot--about .zone { left: 16px; right: 16px; top: 49%; }
  .js .shot--contact .zone { left: 16px; right: 16px; top: auto; bottom: 20px; width: auto; }
  .js .shot--contact .title { margin-bottom: 8px; }
  .row__body { padding-left: 48px; }
  .js .entry { padding-bottom: 12vh; }
  .entry__name { font-size: var(--fs-display-l); }
  .entry__menu { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 100px; margin-top: 24px; }
  .entry__item { padding: 12px 0; }
}

/* low landscape screens (a phone on its side): the name block is a narrow column left of the figure */
@media (max-height: 480px) and (min-aspect-ratio: 4/5) {
  .name { font-size: var(--fs-display-m); }
  .name + .line { margin-top: 12px; }
  .js .copy { bottom: 5vh; max-width: 184px; }
  .line { font-size: var(--fs-text-s); }
  .js .shot--made .zone { top: 56px; bottom: 0; }
  .js .shot--made .title { margin-bottom: 8px; }
  .js .shot--about .zone { top: 18vh; }
  .js .shot--contact .zone { top: 56px; }
  .js .entry { padding-bottom: 5vh; }
  .entry__name { font-size: var(--fs-display-l); }
  .entry__menu { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .type.on { animation: none; }
  .tag, .tag__dot, .row__name, .link__name, .back, .hud__btn, .plain { transition: none; }
}