/* ========================================================================== *
 *  Artàxerxes — Teletext Art Archive
 *  Stylesheet. Classic 8-colour teletext look, optimised for touch but with
 *  desktop keyboard parity. Edit freely; the structure is intentionally plain.
 * ========================================================================== */

/* --- Authentic teletext palette (the only 8 colours teletext has) ---------- */
:root {
  --tt-black:   #000000;
  --tt-red:     #ed0000;   /* very slightly toned from pure #f00 for screens   */
  --tt-green:   #00e700;
  --tt-yellow:  #ffe700;
  --tt-blue:    #0000e7;
  --tt-magenta: #e700e7;
  --tt-cyan:    #00e7e7;
  --tt-white:   #ffffff;
}

/* --- Web font: Bedstead = the Mullard SAA5050 / BBC Mode 7 character set -- */
@font-face {
  font-family: "Bedstead";
  src: url("./fonts/bedstead.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bedstead";
  src: url("./fonts/bedstead-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: var(--tt-white);
}

body {
  font-family: "Bedstead", "Courier New", monospace;
  /* Teletext text is rendered bright/bold; default to the bold weight. */
  font-weight: 700;
  /* Crisp pixel edges — no anti-aliasing softens the authentic blocky look. */
  -webkit-font-smoothing: none;
  font-smooth: never;
  /* The inner .screen scrolls; lock the body so touch feels like an app. */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  text-rendering: geometricPrecision;
}

button {
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /* Remove the 300ms tap delay on mobile. */
  touch-action: manipulation;
}

/* ========================================================================== *
 *  App frame: header bar · scrollable screen · footer bar.
 *  Fills the viewport and centres a fixed-width teletext "page".
 * ========================================================================== */
.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Fill the width, but never wider than 4:3 -- a teletext/CRT page is 4:3,
     so on wide screens the page is capped to 4/3 of the viewport height and
     centred on black. On phones (taller than 4:3) this never binds. */
  max-width: min(100%, 133.333dvh);
  /* IMPORTANT: fixed height (not min-height) so the flex container is exactly
     the viewport. Header/footer pin to top/bottom and .screen becomes the
     only scroll region. min-height would let .app grow with its content and
     break overflow-y on .screen. */
  height: 100vh;
  height: 100dvh;          /* dynamic viewport: handles mobile URL bars */
  margin: 0 auto;
  /* Base type scale: bigger on bigger screens, never tiny on phones. */
  font-size: clamp(15px, 4.4vw, 22px);
  line-height: 1.35;
}

/* --- Service header / footer bars (white & yellow text on blue) ----------- */
.bar {
  flex: 0 0 auto;
  background: var(--tt-blue);
  color: var(--tt-white);
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.6em;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.bar__page  { color: var(--tt-yellow); }
.bar__title { flex: 1 1 auto; text-align: center; color: var(--tt-white);
              overflow: hidden; text-overflow: ellipsis; }
.bar__clock { color: var(--tt-yellow); }

/* Footer = blue hint strip + a thin breadcrumb line on black beneath it. */
.bar--foot {
  background: transparent;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.bar__hint { background: var(--tt-blue); color: var(--tt-yellow);
             display: flex; align-items: center; gap: 0.6em;
             padding: 0.35em 0.5em; }
.bar__hint-txt { flex: 1 1 auto; text-align: center; }
/* Prominent, always-visible BACK button — the main touch affordance for
   going back (desktop can also use Esc / ←). */
.back-btn { background: var(--tt-red); color: var(--tt-white);
            padding: 0.32em 0.8em; white-space: nowrap;
            border: 1px solid #ff5454; }
.back-btn:hover { filter: brightness(1.15); }
.crumb     { color: var(--tt-cyan); padding: 0.28em 0.7em; font-size: 0.82em;
             user-select: none; }

/* ========================================================================== *
 *  Scrollable content region (native scroll = touch friendly)
 * ========================================================================== */
.screen {
  flex: 1 1 auto;
  /* min-height:0 lets a flex item shrink below its content size, which is
     what makes overflow-y actually kick in inside a fixed-height .app.
     Without it the text forces .screen (and thus .app) to grow, and nothing
     scrolls. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0.7em 0.9em 1.2em;
  /* Thin teletext-ish scrollbar. */
  scrollbar-width: thin;
  scrollbar-color: var(--tt-blue) #000;
}
.screen::-webkit-scrollbar { width: 10px; }
.screen::-webkit-scrollbar-track { background: #000; }
.screen::-webkit-scrollbar-thumb { background: var(--tt-blue); border: 2px solid #000; }

/* === separators (a full row of "=" characters, teletex style) ============= */
.sep {
  color: var(--tt-cyan);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  letter-spacing: 0;
}

/* ========================================================================== *
 *  HOME / splash
 * ========================================================================== */
.home__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 100%;
  text-align: center;
  gap: 1.4em;
  padding: 1em 0;
}
.splash {
  margin: 0;
  color: var(--tt-yellow);
  text-shadow: 0 0 4px rgba(255, 231, 0, 0.45);   /* faint phosphor bloom   */
  white-space: pre;
  line-height: 1.04;
  /* Scale the 49-column wordmark to fit narrow screens, cap it on desktop. */
  font-size: clamp(7px, calc(100vw / 50), 19px);
}
.splash__sub {
  color: var(--tt-cyan);
  letter-spacing: 0.12em;
  font-size: 0.95em;
}
.menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35em;
  width: 100%;
  max-width: 16em;
}
.menu__item {
  padding: 0.62em 1em;
  text-align: center;
  color: var(--tt-white);
  border: 1px solid transparent;
}
.menu__item.is-selected,
.menu__item:hover {
  background: var(--tt-red);
  color: var(--tt-white);
}

/* ========================================================================== *
 *  ABOUT + WORK body text (shared)
 * ========================================================================== */
.body { color: var(--tt-white); }
.body p { margin: 0 0 0.7em; word-break: break-word; hyphens: auto; }
.body h1, .body h2, .body h3 {
  margin: 0.9em 0 0.4em;
  line-height: 1.2;
}
.body h1 { color: var(--tt-yellow); font-size: 1.15em; }
.body h2 { color: var(--tt-cyan);  font-size: 1.05em; }
.body h3 { color: var(--tt-cyan);  font-size: 1em; }

/* ========================================================================== *
 *  WORK detail
 * ========================================================================== */
.work__title {
  text-align: center;
  color: var(--tt-yellow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.2em 0 0.8em;
  text-shadow: 0 0 4px rgba(255, 231, 0, 0.4);
}
.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.2em;
  row-gap: 0.3em;
  margin-bottom: 1em;
}
.meta__label { color: var(--tt-cyan); white-space: nowrap; }
.meta__value { color: var(--tt-white); word-break: break-word; }
.work__gap { height: 0.6em; }

/* ========================================================================== *
 *  INDEX
 * ========================================================================== */
.index__title { text-align: center; color: var(--tt-yellow); margin: 0.3em 0 0.7em; }
.cols, .row {
  display: grid;
  grid-template-columns: 3.2em 1fr auto;
  column-gap: 0.9em;
  align-items: baseline;
  width: 100%;
}
.cols {
  color: var(--tt-cyan);
  padding: 0 0.5em 0.25em;
  border-bottom: 1px solid #1a1a4a;
}
.list { display: flex; flex-direction: column; }
.row {
  background: transparent;
  color: var(--tt-white);
  text-align: left;
  padding: 0.6em 0.5em;
  border: 0;
}
.row:hover { background: #1c0000; }
.row.is-selected { background: var(--tt-red); }
.row__pg    { color: var(--tt-yellow); }
.row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__artist { color: var(--tt-cyan); text-align: right;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Keep selected text readable on red. */
.row.is-selected .row__pg,
.row.is-selected .row__artist { color: var(--tt-white); }

/* "No matches / loading" fallback message. */
.msg { color: var(--tt-cyan); text-align: center; padding: 2em 0; }

/* ========================================================================== *
 *  Responsive: drop the artist column on very narrow screens so rows stay
 *  easy to tap, and grow tap targets.
 * ========================================================================== */
@media (max-width: 430px) {
  .cols, .row { grid-template-columns: 3em 1fr; }
  .cols__artist, .row__artist { display: none; }
  .row { padding: 0.75em 0.5em; }
}

/* ========================================================================== *
 *  Responsive: wide screens (desktop / tablet landscape).
 *
 *  The page width is already capped to 4:3 in .app above, so on wide screens
 *  it centres on black rather than stretching out. Here we only let the type
 *  grow with the page up to the 1000px mark (32px); past that the page just
 *  gains columns instead of getting bigger. 3.2vw ≈ 22px at the 680px
 *  breakpoint, so the handoff from the base (mobile) scale is seamless.
 * ========================================================================== */
@media (min-width: 680px) {
  .app {
    font-size: clamp(22px, 3.2vw, 32px);
  }
}

/* Respect users who prefer less motion / no CRT shimmer. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ========================================================================== *
 *  Cosmetic CRT scanline overlay (purely visual; remove the <div class="crt">
 *  in index.html, or this whole rule, for a flat look). pointer-events:none
 *  so it never interferes with touch.
 * ========================================================================== */
.crt {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.22) 3px
    );
  opacity: 0.55;
  mix-blend-mode: multiply;
}
/* A soft vignette so the page reads as lit glass. */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 50%,
              rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%);
}