/* ─────────────────────────────────────────────────────────────
   alkapov.com — technical panel grid
   ───────────────────────────────────────────────────────────── */

/* Self-hosted latin subsets, straight from the Google Fonts release
   (Archivo v25, JetBrains Mono v24). Both are variable: Archivo carries the
   wdth and wght axes the display type uses. Filenames carry the version so
   they can be cached immutably. */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/unbounded-v12-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-v24-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #090909;
  --ink: #0b0b0b;
  --bone: #e8e4da;

  --amber: #e9a24c;
  --brick: #c4564a;
  --sage: #90a97c;
  --steel: #b5b5b2;

  /* Fluid type scale. One ramp from a 375px viewport to 3840px; every size on
     the page is a step on it, so the proportions hold at any width instead of
     each element having its own hand-picked bounds. --type-scale tunes the
     whole ramp at once — it is set below 1 where the layout is height-tight. */
  --type-scale: 1;
  --fs-micro: calc(clamp(9.5px, 0.30vw + 8.4px, 20px) * var(--type-scale));
  --fs-xs: calc(clamp(11px, 0.36vw + 9.6px, 23px) * var(--type-scale));
  --fs-s: calc(clamp(12px, 0.42vw + 10.4px, 26px) * var(--type-scale));
  --fs-m: calc(clamp(14px, 0.50vw + 12.1px, 30px) * var(--type-scale));
  --fs-l: calc(clamp(17px, 0.64vw + 14.3px, 38px) * var(--type-scale));
  --fs-xl: calc(clamp(22px, 1.00vw + 17.8px, 56px) * var(--type-scale));

  --display: "Unbounded", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gap: clamp(8px, 0.8vw, 24px);
  --radius: clamp(14px, 1.7vw, 24px);
  --pad: clamp(14px, 1.8vw, 58px);
  --hair: 1.5px solid var(--ink);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--display);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
dl,
dd,
ol,
ul {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

::selection {
  background: var(--amber);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* ── film grain ───────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── stage grid ───────────────────────────────────────────── */
.stage {
  width: 100%;
  padding: var(--gap);
  flex: 1 0 auto;
  width: 100%;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-template-areas:
    "hero hero hero hero hero hero hero hero conn  conn  conn  conn"
    "trc  trc  trc  trc  work work work work work focus focus focus";
}

.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: var(--pad);
  background: var(--panel, var(--steel));
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel--hero {
  grid-area: hero;
  --panel: var(--amber);
  gap: clamp(10px, 1.1vw, 18px);
}

.panel--connect {
  grid-area: conn;
  --panel: var(--brick);
  flex-direction: row;
  gap: clamp(10px, 1.2vw, 18px);
}

.panel--trace {
  grid-area: trc;
  --panel: var(--sage);
  --pad: clamp(13px, 1.5vw, 24px);
  gap: clamp(8px, 1vw, 14px);
}

.panel--work {
  grid-area: work;
  --panel: transparent;
  border: 1px solid rgba(232, 228, 218, .15);
  color: var(--bone);
  --pad: clamp(15px, 1.7vw, 26px);
  gap: 0;
}

.panel--focus {
  grid-area: focus;
  --panel: var(--steel);
  --pad: clamp(13px, 1.5vw, 24px);
  gap: clamp(10px, 1.1vw, 16px);
}

/* ── shared micro-type ────────────────────────────────────── */
.tag,
.hero__domain,
.mark,
.index__coord,
.colophon {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── 01 · connect panel ───────────────────────────────────── */
.connect__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 16px);
}

.connect__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.connect__row {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-areas: "stack";
}

.connect__row > * {
  grid-area: stack;
}

/* Overlay layer. Its ground is the panel's brick, so the code reads as punched
   through the cell field to the panel beneath — and keeps the polarity a
   scanner needs: ink modules on a lighter ground, ~4.2:1. */
.connect__qr {
  place-self: center;
  width: min(62%, 27svh);
  max-width: 300px;
}

.qr {
  width: 100%;
  height: auto;
  display: block;
}

.qr__bg {
  fill: var(--brick);
}

.qr__fg {
  fill: var(--ink);
}

.index__viz {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(90deg, rgba(11, 11, 11, .14) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg, rgba(11, 11, 11, .14) 0 1px, transparent 1px 24px);
}

.index__viz__cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), 1fr);
  gap: clamp(2px, .28vw, 4px);
  align-content: start;
  overflow: hidden;
}

.index__viz i {
  aspect-ratio: 1;
  border-radius: 1px;
  background: var(--ink);
  opacity: var(--o, .1);
}

.index__viz i.is-hot {
  animation: pulse 4.5s var(--delay, 0s) infinite ease-in-out;
}

@keyframes pulse {

  0%,
  100% {
    opacity: .12;
  }

  45% {
    opacity: .62;
  }
}

.connect__link {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(9px, 1vw, 13px) clamp(11px, 1.2vw, 16px);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-variation-settings: "wght" 700;
  font-size: var(--fs-m);
  letter-spacing: -.015em;
  transition: background-color .18s ease, color .18s ease;
}

.connect__link .arrow--sm {
  width: 15px;
  margin-left: auto;
  stroke: currentColor;
  stroke-width: 13;
  transition: transform .18s ease;
}

.connect__link:hover,
.connect__link:focus-visible {
  background: var(--ink);
  color: var(--brick);
}

.connect__link:hover .arrow--sm {
  transform: translate(2px, -2px);
}

.index__word {
  font-family: var(--display);
  font-variation-settings: "wght" 800;
  font-size: var(--fs-s);
  letter-spacing: .01em;
  line-height: 1;
  writing-mode: vertical-rl;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
}

.index__word span {
  font-variation-settings: "wght" 400;
  opacity: .68;
}

.index__coord {
  opacity: .85;
}

/* ── 02 · hero panel ──────────────────────────────────────── */
.hero__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: .1em;
  line-height: .84;
}

.wordmark__first {
  font-family: var(--mono);
  font-size: var(--fs-l);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding-left: .3em;
}

.wordmark__last {
  font-variation-settings: "wght" 800;
  font-size: clamp(2.2rem, min(8.5vw, 11.4svh), 8rem);
  letter-spacing: -.035em;
  white-space: nowrap;
}

.dot {
  display: inline-block;
  width: .16em;
  height: .16em;
  border-radius: 50%;
  background: var(--brick);
  vertical-align: .62em;
  margin-left: .1em;
}

.arrow {
  width: clamp(42px, 5.7vw, 86px);
  flex: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 13;
  stroke-linecap: square;
}

.hero__body {
  flex: none;
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr) minmax(150px, .38fr);
  align-items: stretch;
}

.box {
  border: var(--hair);
  border-radius: calc(var(--radius) * .34);
  padding: clamp(10px, 1vw, 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.box--clock {
  justify-content: center;
  gap: 4px;
  align-self: stretch;
  text-align: right;
}

.clock__date {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

.clock {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clock__time {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-l);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.clock__zone {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
  white-space: nowrap;
}

.box--spec {
  gap: 12px;
  justify-content: center;
}

.spec {
  justify-content: center;
}

.spec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(9px, 1vw, 15px);
}

.spec__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.spec dt {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .62;
  width: 4.6em;
  flex: none;
}

.spec dd {
  font-variation-settings: "wght" 600;
  font-size: var(--fs-m);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.hero__note {
  font-size: var(--fs-l);
  line-height: 1.38;
  letter-spacing: -.005em;
  max-width: 44ch;
}

.hero__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 34px);
  border-top: var(--hair);
  padding-top: clamp(7px, .75vw, 11px);
  justify-content: space-between;
}

.hero__domain {
  font-size: var(--fs-l) !important;
  font-weight: 700;
  letter-spacing: .06em;
  flex: none;
}

/* Code 39, actually scannable — it reads ALKAPOV.COM */
.barcode {
  height: clamp(20px, 2.2vw, 30px);
  flex: 1;
  max-width: 250px;
  fill: var(--ink);
  display: block;
}

.phases {
  display: flex;
  gap: 7px;
  flex: none;
}

.phase {
  width: 15px;
  height: 15px;
  border: var(--hair);
  border-radius: 50%;
}

.phase--1 {
  background: conic-gradient(var(--ink) 0 25%, transparent 0);
}

.phase--2 {
  background: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
}

/* ── 03 · trajectory panel ────────────────────────────────── */
.trace__head,
.focus__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.trace__head h2 {
  font-variation-settings: "wght" 800;
  font-size: var(--fs-xl);
  letter-spacing: -.02em;
  line-height: 1;
}

.mark {
  opacity: .7;
  flex: none;
}

/* A real Gantt: every bar is positioned and scaled by its actual dates
   on a shared 2015 → 2027 axis, so the overlaps are the true ones. */
.gantt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(11px, 1.35vw, 20px);
  padding-top: clamp(6px, .7vw, 10px);
  background-image: repeating-linear-gradient(90deg,
      rgba(11, 11, 11, .12) 0 1px, transparent 1px 8.3333%);
}

.lane {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
}

.lane__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.lane__head b {
  font-variation-settings: "wght" 800;
  font-size: var(--fs-l);
  letter-spacing: -.02em;
  line-height: 1;
}

.lane__head time {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  white-space: nowrap;
}

.lane__desc {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  line-height: 1.25;
  opacity: .8;
}

.lane__track {
  grid-column: 1 / -1;
  position: relative;
  height: clamp(10px, 1.15vw, 16px);
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(11, 11, 11, .14);
}

.lane__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: rgba(11, 11, 11, .55);
}


/* Bar geometry lives here rather than in style attributes: the page's own
   Content-Security-Policy forbids inline styles. These are the real dates
   mapped onto a 2015 → 2027 axis, and they are the no-JS rendering only —
   app.js recomputes all three against an axis that ends next year, so the
   numbers below date from whenever this file was last touched by hand. The
   dates themselves live on the lanes' data-from/data-to in index.html. */
.lane--google .lane__bar {
  left: 60.42%;
  width: 36.67%;
}
.lane--yandex .lane__bar {
  left: 38.33%;
  width: 22.08%;
}
.lane--susu .lane__bar {
  left: 5.83%;
  width: 48.33%;
}

.lane__bar.is-now {
  background: var(--ink);
}

.lane__bar.is-edu {
  background: rgba(11, 11, 11, .34);
}

.gantt__axis {
  display: flex;
  justify-content: space-between;
  border-top: var(--hair);
  padding-top: 7px;
  margin-top: auto;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  opacity: .62;
}


/* ── the gopher ───────────────────────────────────────────────
   A nod to the language most of the work above is written in. The mascot is
   Renée French's Go gopher (CC BY 3.0), in /assets/gopher.png. The file wants
   a transparent background — a sticker cut-out on a white plate would read as
   a light box sitting on the panel.
   It rides behind the panel's content as texture, bleeding off the right edge
   where the panel's own overflow:hidden and border-radius clip it. The filter
   drops it to the panel's own grey so it reads as printing on the card rather
   than as a picture pasted onto it. */
.gopher {
  position: absolute;
  right: -11%;
  bottom: -8%;
  height: 62%;
  width: auto;
  opacity: .14;
  filter: grayscale(1) contrast(1.15);
  pointer-events: none;
  user-select: none;
}

/* The gopher is positioned, so without this the panel's in-flow content would
   paint beneath it. */
.panel--focus > :not(.gopher) {
  position: relative;
}

/* ── 04 · focus panel ─────────────────────────────────────── */
.focus__kicker {
  font-variation-settings: "wght" 400;
  font-size: var(--fs-l);
  line-height: 1.06;
  letter-spacing: -.02em;
}

.chev {
  width: clamp(26px, 3vw, 40px);
  flex: none;
  fill: var(--ink);
  transform: translateX(6px);
}

.focus__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(7px, .9vw, 13px);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.focus__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .88;
}

.focus__list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--ink);
  flex: none;
}

.focus__block h3 {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 5px;
}

.focus__block p {
  font-variation-settings: "wght" 500;
  font-size: var(--fs-m);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.focus__block b {
  font-variation-settings: "wght" 800;
}

.focus__note {
  font-variation-settings: "wght" 400 !important;
  font-size: var(--fs-xs) !important;
  opacity: .6;
  margin-top: 4px;
}

.focus__block:first-of-type {
  margin-top: auto;
}

.focus__block + .focus__block {
  border-top: 1px solid rgba(11, 11, 11, .18);
  padding-top: clamp(9px, 1vw, 14px);
}

/* ── 05 · work panel ──────────────────────────────────────── */
.mod__title {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: clamp(8px, .9vw, 12px);
}

.mod__title--rule {
  border-top: 1px solid rgba(232, 228, 218, .15);
  padding-top: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(12px, 1.4vw, 18px);
}

.panel--work p {
  font-size: var(--fs-s);
  line-height: 1.55;
  color: #cbc7be;
  max-width: 62ch;
}

.work__cite {
  margin-top: auto;
  padding-top: clamp(12px, 1.4vw, 18px);
  font-family: var(--mono);
  font-size: var(--fs-micro) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7 !important;
  opacity: .62;
}

.work__cite a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 228, 218, .4);
  padding-bottom: 1px;
  white-space: nowrap;
}

.work__cite a:hover {
  border-bottom-color: var(--bone);
}

.work__cite .arrow--sm {
  width: 10px;
  stroke: currentColor;
  stroke-width: 15;
}

/* ── colophon ─────────────────────────────────────────────── */
.colophon {
  line-height: 1.2;
  width: 100%;
  padding: 0 calc(var(--gap) * 2) calc(var(--gap) * .55);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  color: var(--bone);
  opacity: .42;
}

.colophon__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.colophon__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

/* ── entrance ─────────────────────────────────────────────── */
.panel {
  animation: rise .6s cubic-bezier(.22, .68, .3, 1) backwards;
}

.panel--hero {
  animation-delay: .08s;
}

.panel--trace {
  animation-delay: .16s;
}

.panel--focus {
  animation-delay: .22s;
}

.panel--link {
  animation-delay: .3s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ── type scale by viewport height ────────────────────────── */
/* The desktop layout holds one screen, so how large the type can go is set by
   the viewport's height, not its width. These steps are the measured ceilings:
   above each, the page still fits with no scrolling. Stacked layouts below
   1100px scroll by design and keep --type-scale at 1. */
@media (min-width: 1100px) {
  :root {
    --type-scale: .7;
  }
}

@media (min-width: 1100px) and (max-height: 770px) {
  :root {
    --type-scale: .62;
    --pad: clamp(12px, 1.4vw, 20px);
  }
}

@media (min-width: 1100px) and (min-height: 820px) {
  :root {
    --type-scale: .75;
  }
}

@media (min-width: 1100px) and (min-height: 900px) {
  :root {
    --type-scale: .8;
  }
}

@media (min-width: 1100px) and (min-height: 1000px) {
  :root {
    --type-scale: .88;
  }
}

@media (min-width: 1100px) and (min-height: 1080px) {
  :root {
    --type-scale: .95;
  }
}

@media (min-width: 1100px) and (min-height: 1300px) {
  :root {
    --type-scale: 1.08;
  }
}

@media (min-width: 1100px) and (min-height: 1600px) {
  :root {
    --type-scale: 1.2;
  }
}

@media (min-width: 1100px) and (min-height: 2000px) {
  :root {
    --type-scale: 1.35;
  }
}

/* ── responsive ───────────────────────────────────────────── */
@media (min-width: 1100px) {
  /* Auto rows, not fr: panels are scroll containers (overflow:hidden), whose
     automatic minimum size is zero, and WebKit and Blink disagree about the
     min-content of a flex column inside such a track — which collapsed the
     trajectory panel in Safari. Auto rows size to content in both, and
     align-content spreads any leftover height so the page holds one screen. */
  .stage {
    min-height: calc(100svh - var(--gap) * 2 - 30px);
    align-content: stretch;
  }
}

/* Wide screens: the two-row grid starts to stretch, so the brick panel becomes
   a full-height right column — the first build's tall column, mirrored — and
   the focus panel moves up into the top row beside the hero. */
@media (min-width: 1600px) {
  .stage {
    grid-template-areas:
      "hero hero hero hero hero hero focus focus focus conn conn conn"
      "trc  trc  trc  trc  work work work  work  work  conn conn conn";
  }

  /* the hero is six columns here, not eight, so the wordmark needs a tighter cap */
  .wordmark__last {
    font-size: min(6.4vw, 13svh);
  }

  /* the tall column has room for a QR this large */
  .connect__qr {
    width: min(62%, 34svh);
    max-width: 480px;
  }
}

@media (min-width: 1100px) and (max-height: 880px) {
  :root {
    --gap: 10px;
    --pad: clamp(13px, 1.5vw, 22px);
  }

  .panel--hero {
    gap: clamp(8px, .9vw, 14px);
  }
}

@media (max-width: 1100px) {
  /* the focus panel turns wide and short here, so the gopher is sized off the
     panel's width instead and bleeds further off the bottom */
  .gopher {
    height: auto;
    width: 34%;
    right: -6%;
    bottom: -22%;
  }

  .stage {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "hero hero hero hero conn conn"
      "trc  trc  trc  work work work"
      "foc  foc  foc  work work work";
  }

  .panel--focus {
    grid-area: foc;
  }
}

@media (max-width: 900px) {
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "hero"
      "conn"
      "trc"
      "work"
      "focus";
  }

  .panel--focus {
    grid-area: focus;
  }

  .panel--connect {
    min-height: 190px;
  }

  .index__word {
    writing-mode: vertical-rl;
  }

  .wordmark__last {
    font-size: clamp(2.2rem, 11.6vw, 4.4rem);
  }

  .hero__foot {
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .barcode {
    max-width: 120px;
  }
}

@media (max-width: 560px) {
  .hero__body {
    grid-template-columns: 1fr;
  }

  .box--clock {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .connect__row {
    flex-direction: column;
  }

  .connect__qr {
    height: auto;
    width: 100%;
    max-width: 210px;
    align-self: center;
  }

  .index__viz {
    min-height: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── 404 ──────────────────────────────────────────────────── */
.stage--lost {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "hero";
  place-items: stretch;
}

.lost {
  gap: clamp(18px, 3vw, 40px);
  justify-content: space-between;
}

.lost__code {
  font-variation-settings: "wght" 800;
  font-size: clamp(4rem, 18vw, 13rem);
  letter-spacing: -.05em;
  line-height: .82;
}

.lost__msg {
  font-size: var(--fs-s);
  max-width: 42ch;
  line-height: 1.5;
}

.lost__back {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: var(--hair);
  padding-bottom: 6px;
  width: fit-content;
}