@font-face {
  font-family:Ash Mono;
  src:url("/assets/fonts/ibm-plex-mono-regular.woff2") format("woff2");
  font-display:swap;
}

:root {
  color-scheme:dark;
  --ground:#05070f;
  --paper:#f3f2ea;
  --muted:#8d93a3;
  --line:#232a3d;
  --red:#d2352c;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--ground);
  color:var(--paper);
  font-family:Georgia,"Times New Roman",serif;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-underline-offset:4px;
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--paper);
  outline-offset:6px;
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:5;
  padding:12px;
  background:var(--paper);
  color:var(--ground);
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:translateY(0);
}

.masthead {
  height:96px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 4.3%;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:2;
}

.signature {
  text-decoration:none;
  font-size:25px;
  letter-spacing:-2px;
}

.signature span {
  font:10px Ash Mono,monospace;
  letter-spacing:2px;
  margin-left:20px;
  color:var(--muted);
}

.edition,.eyebrow,.art-caption,.controls,.colophon,#notice,.mono {
  font-family:Ash Mono,monospace;
}

.edition {
  font-size:10px;
  letter-spacing:1.8px;
  color:var(--muted);
}

main {
  position:relative;
  min-height:480px;
  height:calc(100svh - 300px);
  max-height:760px;
  isolation:isolate;
}

.artwork {
  position:absolute;
  inset:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:-1;
}

#art {
  display:block;
  width:min(100%, calc((100svh - 380px) * 1.853));
  max-width:941px;
  aspect-ratio:941/518;
  height:auto;
  image-rendering:pixelated;
  touch-action:pan-y;
}

.art-fallback {
  position:absolute;
  inset:38% 8% auto 8%;
  text-align:center;
  font-size:24px;
  line-height:1.5;
  color:var(--muted);
}

.artwork.live .art-fallback {
  display:none;
}

.title-block {
  position:absolute;
  left:4.3%;
  bottom:18px;
  z-index:2;
  pointer-events:none;
}

.eyebrow {
  font-size:10px;
  letter-spacing:2.2px;
  color:var(--muted);
  margin:0 0 10px;
}

h1 {
  margin:0;
  font-size:clamp(44px,7vw,84px);
  font-weight:400;
  letter-spacing:-2px;
  line-height:1;
  text-shadow:0 2px 24px rgba(5,7,15,0.9);
}

.full-stop {
  color:var(--red);
}

.art-caption {
  position:absolute;
  right:4.3%;
  bottom:26px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10px;
  letter-spacing:1.8px;
  color:var(--muted);
  text-align:right;
}

.live-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffb35c;
  box-shadow:0 0 8px 1px rgba(255,179,92,0.8);
  animation:live 2.4s ease-in-out infinite;
}

@keyframes live {
  50% { opacity:0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation:none; }
}

footer {
  border-top:1px solid var(--line);
  margin:0 4.3%;
  padding:34px 0 60px;
}

.controls {
  display:flex;
  align-items:center;
  gap:26px;
  margin-bottom:30px;
}

.transport button {
  font:11px Ash Mono,monospace;
  letter-spacing:2px;
  color:var(--paper);
  background:none;
  border:1px solid var(--line);
  padding:12px 22px;
  cursor:pointer;
}

.transport button:hover:not(:disabled) {
  border-color:var(--muted);
}

.transport button:disabled {
  opacity:0.4;
  cursor:default;
}

.colophon {
  display:flex;
  flex-wrap:wrap;
  gap:12px 60px;
  font-size:10px;
  line-height:2.1;
  letter-spacing:1.4px;
  color:var(--muted);
}

.colophon p {
  margin:0;
}

#notice {
  margin:18px 0 0;
  font-size:10px;
  letter-spacing:1.4px;
  color:var(--muted);
}

@media (max-width:640px) {
  .masthead { height:76px; }
  main { min-height:300px; height:auto; padding:12px 0 0; }
  .artwork { position:relative; inset:auto; }
  #art { width:100%; }
  .title-block { position:static; margin:26px 4.3% 0; }
  h1 { font-size:15vw; }
  .art-caption { position:static; margin:16px 4.3% 0; justify-content:flex-start; text-align:left; }
}