/* 25 MacGyver Quotes - one screen, no scrolling, warm eighties television. */

@font-face {
  font-family: "Archivo Black";
  src: url("/static/fonts/archivo-black-v23-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/static/fonts/barlow-semi-condensed-v16-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/static/fonts/barlow-semi-condensed-v16-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-v20-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #150d0a;
  --panel: #20130e;
  --panel-hot: #2d1a12;
  --rule: #40241a;
  --ember: #e8451f;
  --amber: #ffb020;
  --cream: #f7e7ce;
  --sand: #d9bd97;

  --pad: clamp(0.55rem, 1.6vw, 1.6rem);
  --quote-size: clamp(0.62rem, 0.85vw + 0.95vh, 1.35rem);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.screen {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--pad);
  gap: clamp(0.5rem, 1.2vh, 1.1rem);
}

/* ---------- header ---------- */

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--rule);
  padding-bottom: clamp(0.35rem, 0.9vh, 0.8rem);
}

.head-text { min-width: 0; }

.eyebrow {
  margin: 0 0 0.35em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(0.5rem, 0.35vw + 0.35vh, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  text-wrap: balance;
}

.title {
  margin: 0;
  font-family: "Archivo Black", Impact, "Arial Black", sans-serif;
  font-size: clamp(1.45rem, 5vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;

  /* the eighties title card: cream, amber and ember bands cut through the type */
  background-image: linear-gradient(
    180deg,
    var(--cream) 0 30%,
    var(--amber) 30% 40%,
    var(--ink) 40% 44%,
    var(--amber) 44% 62%,
    var(--ember) 62% 74%,
    var(--ink) 74% 78%,
    var(--ember) 78% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0.06em 0.06em 0 rgba(232, 69, 31, 0.55));
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  flex: 0 0 auto;
  padding-bottom: 0.25em;
}
.bars span {
  display: block;
  width: clamp(2rem, 6vw, 5.5rem);
  height: clamp(0.2rem, 0.55vh, 0.5rem);
  transform: skewX(-18deg);
}
.bars span:nth-child(1) { background: var(--cream); }
.bars span:nth-child(2) { background: var(--amber); }
.bars span:nth-child(3) { background: var(--ember); }

/* ---------- the wall of quotes ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  min-height: 0;
}

.q {
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  padding: clamp(0.3rem, 0.9vh, 0.85rem) clamp(0.4rem, 0.7vw, 0.9rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: clamp(0.3rem, 0.5vw, 0.7rem);
  transition: background-color 0.18s ease;
}

.q:hover { background: var(--panel-hot); }
.q:hover .num { color: var(--ember); }

.num {
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(0.5rem, 0.3vw + 0.4vh, 0.8rem);
  line-height: 1.35;
  color: var(--amber);
  transition: color 0.18s ease;
}

.q blockquote {
  margin: 0;
  font-weight: 600;
  font-size: var(--quote-size);
  line-height: 1.22;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-wrap: pretty;
  hyphens: none;
  overflow-wrap: break-word;
}

/* ---------- footer ---------- */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid var(--rule);
  padding-top: clamp(0.25rem, 0.7vh, 0.6rem);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(0.45rem, 0.3vw + 0.3vh, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}

/* ---------- the tube ---------- */

.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.16) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  );
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    125% 105% at 50% 45%,
    rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* ---------- smaller screens ---------- */

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .q:last-child { grid-column: span 4; }
  .foot-right { display: none; }
}

@media (max-width: 640px) and (min-height: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .q:last-child { grid-column: auto; }
  .head { align-items: flex-start; }
  .bars { display: none; }
}

/* ---------- arrival ---------- */

@media (prefers-reduced-motion: no-preference) {
  .q {
    animation: tune-in 0.5s ease both;
    animation-delay: calc(var(--i) * 22ms);
  }
  @keyframes tune-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-contrast: more) {
  .crt { display: none; }
}