/* ─────────────────────────────────────────────────────────────
   diegotap.com — a shell session.
   Two colours. One font stack. No rule, no radius, no gradient.
   Photographs are drawn in ASCII from their own pixels, then replaced.
   ───────────────────────────────────────────────────────────── */

:root {
  --bg:   #000;
  --fg:   #fff;
  --dim:  #8a8a8a;              /* 7.6:1 on black — ASCII underdrawing only */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --size: 13px;
  --pad:  clamp(16px, 2.6vw, 40px);
  --cellratio: 411 / 547;       /* the original site's grid cell */
}

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

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--size);
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ── the console block, top right ────────────────────────── */
.screen { min-height: 100svh; padding: var(--pad); }

.console {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
  margin-left: auto;
  width: max-content; max-width: 100%;
}

.login { margin: 0; white-space: nowrap; }

/* the prompt is the control that opens the menu */
.prompt {
  appearance: none; background: none; border: 0;
  margin: 0.2em 0 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  white-space: nowrap; cursor: pointer;
}
.prompt:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

.cursor {
  display: inline-block;
  width: 0.6em; height: 1.05em;
  background: var(--fg);
  vertical-align: text-bottom;
  animation: blink 1.06s steps(1) infinite;
}
.prompt[aria-expanded="true"] .cursor { animation: none; opacity: 0.28; }
@keyframes blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

.menu { display: flex; flex-direction: column; align-items: flex-start; }
.menu[hidden] { display: none; }

.cmd {
  appearance: none; background: none; border: 0;
  margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  /* printed in sequence when the prompt opens */
  opacity: 0;
  animation: type .001s steps(1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes type { to { opacity: 1 } }
.cmd:hover,
.cmd:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.cmd[aria-current="true"] { text-decoration: underline; text-underline-offset: 3px; }
.cmd:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

/* ── output, below the block ─────────────────────────────── */
.out:empty { display: none; }
.out { margin-top: clamp(28px, 6vh, 72px); }
.out:focus { outline: none; }

/* ── the grid, as on the original site: three up, uniform cells ── */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 0.9vw, 14px);
}
.grid--three { grid-template-columns: repeat(3, 1fr); gap: var(--pad); }

.cell {
  position: relative;
  aspect-ratio: var(--cellratio);
  overflow: hidden;
  background: var(--bg);
}
/* posters keep their own proportions — they are artwork, not frames */
.grid--three .cell { aspect-ratio: var(--ar, 0.75); }

/* opacity is driven by scroll position, so no transition — a transition here
   would smear behind the scroll instead of tracking it */
.cell img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
.grid--three .cell img { object-fit: contain; }

/* the terminal's own underdrawing of the frame */
/* canvas, like the film — one renderer for every ASCII drawing on the site */
.ascii {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

/* source is 1280x720 — enlarging past that only softens it */
.reelvid { width: 100%; max-width: 1280px; height: auto; background: var(--bg); }
.reelvid[hidden] { display: none; }

.cv {
  font: inherit;
  margin: 0;
  white-space: pre-wrap;
  max-width: 68ch;
}
.cv a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cv a:hover, .cv a:focus-visible { text-decoration-thickness: 2px; }

/* ── the theatre ─────────────────────────────────────────── */
.theater { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4em; }
/* canvas, because the film is drawn in colour ten times a second and the DOM
   is the wrong tool for that */
.frame { display: block; align-self: stretch; width: 100%; height: auto; }
/* an explicit display beats the UA's [hidden] rule, so restore it */
.frame[hidden] { display: none; }
.ctrls { margin: 0; display: flex; align-items: baseline; gap: 2.4ch; }
.tc { font-variant-numeric: tabular-nums; color: var(--dim); }
.shell[disabled] { color: var(--dim); cursor: default; text-decoration: none; }

/* a command line you copy rather than follow */
.shell {
  appearance: none; background: none; border: 0;
  margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-style: dotted;
}
.shell::before { content: "% "; }
.shell:hover, .shell:focus-visible { text-decoration-style: solid; }
.shell:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
/* copy confirms in inverse video — the terminal's own acknowledgement */
.shell.is-copied { background: var(--fg); color: var(--bg); text-decoration: none; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  :root { --size: 12px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid--three { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .cmd { opacity: 1; animation: none; }
  .cell img { transition: none; }
  .ascii { transition: none; }
}