@font-face {
  font-family: "Skanto";
  src:
    url("skanto-regular.woff2") format("woff2"),
    url("skanto-regular.woff") format("woff"),
    url("skanto-regular.ttf") format("truetype");
}

:root{
  --bg: #ffffff;
  --fg: #0b0b0b;
  --muted: #5a5a5a;
  --pad: clamp(18px, 3vw, 44px);
  --playFill: #4c5dff;
}

*{ box-sizing: border-box; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Arial, Helvetica, sans-serif;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.top{ padding: var(--pad); }

.title{
  margin: 0;
  font-size: clamp(24px, 3.8vw, 48px);
  font-weight: 900;
}

.sub{ margin-top: 8px; opacity: 0.6; }

.layout{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 3vw, 36px);
  padding: var(--pad);
}

.block{ grid-column: 2 / -2; }

.full-bleed{
  grid-column: 1 / -1;
}

.full-bleed img{
  display: block;
  width: 100%;
  height: auto;
}

.word{
  grid-column: 1 / -1;
  font-family: "Skanto", Arial, Helvetica, sans-serif;
  font-size: clamp(60px, 10vw, 150px);
  line-height: 0.9;
  padding: 40px 0;
}

.w-impure{ grid-column: 1 / 9; }
.w-eskaton{ grid-column: 4 / -1; text-align: right; }
.w-experimental{ grid-column: 2 / -2; }
.w-human{ grid-column: 1 / 8; }

.lead{
  font-size: 15px;
  line-height: 1.55;
  max-width: 80ch;
}

.tinykicker{
  font-size: 11px;
  letter-spacing: 0.24em;
  opacity: 0.6;
  margin-bottom: 10px;
}

.artifact-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.figure{ grid-column: span 6; margin: 0; }
.figure.wide{ grid-column: 1 / -1; }

.figure img{ width: auto; max-width: 100%; height: auto; }

.video-native video{
  width: auto;
  max-width: 100%;
  height: auto;
}

.player{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  max-width: 860px;
}

.progress{
  height: 18px;
  background: #000;
  position: relative;
}

.progressFill{
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--playFill);
}

.btn{
  background: none;
  border: none;
  font-size: 12px;
  letter-spacing: 0.22em;
  cursor: pointer;
}

.time{ font-size: 12px; }

.phases{
  padding-left: 18px;
  line-height: 1.6;
}

.foot{
  grid-column: 1 / -1;
  opacity: 0.6;
  padding: 24px 0;
}