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

:root {
  color-scheme:dark;
  --ground:#0b0c0b;
  --paper:#f3f2ea;
  --muted:#a5a69e;
  --line:#33362f;
  --red:#d2352c;
}

* {
  box-sizing:border-box;
}

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

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

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

a:focus-visible,button:focus-visible,input: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 {
  font-family:Ash Mono,monospace;
}

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

main {
  position:relative;
  min-height:510px;
  height:calc(100svh - 260px);
  max-height:1050px;
  isolation:isolate;
}

.artwork {
  position:absolute;
  inset:0;
  margin:0;
  overflow:hidden;
  z-index:-1;
}

#art {
  display:block;
  width:100%;
  height:100%;
  touch-action:pan-y;
}

.art-fallback {
  position:absolute;
  inset:40% 8% auto 45%;
  font-size:28px;
  line-height:1.5;
  color:var(--muted);
}

.art-fallback span {
  font:12px Ash Mono,monospace;
}

.art-fallback[hidden] {
  display:none;
}

.title-block {
  pointer-events:none;
  position:absolute;
  left:7.2%;
  bottom:78px;
}

.eyebrow {
  color:var(--muted);
  font-size:9px;
  letter-spacing:2px;
  margin:0 0 14px;
}

h1 {
  font-weight:400;
  font-size:32px;
  line-height:.89;
  letter-spacing:-.035em;
  margin:0;
}

h1 i {
  font-weight:400;
  font-size:.67em;
  color:var(--muted);
  margin-left:8px;
}

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

.art-caption {
  position:absolute;
  bottom:25px;
  left:7.2%;
  right:7.2%;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:8px;
  letter-spacing:1.7px;
  color:var(--muted);
  pointer-events:none;
}

.live-dot {
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--red);
}

.interaction-hint {
  margin-left:auto;
}

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

.controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:80px;
  gap:32px;
  font-size:11px;
}

.transport {
  display:flex;
  gap:24px;
}

button {
  font:inherit;
  min-height:44px;
  padding:8px 0;
  border:0;
  background:none;
  color:var(--paper);
  cursor:pointer;
  white-space:nowrap;
}

button:disabled {
  color:var(--muted);
  cursor:default;
  opacity:.6;
}

button span {
  margin-left:10px;
  color:var(--muted);
}

.erosion-control {
  display:flex;
  align-items:center;
  gap:20px;
  width:380px;
  max-width:44%;
}

.erosion-control label {
  color:var(--muted);
}

input[type=range] {
  width:100%;
  min-width:40px;
  height:44px;
  margin:0;
  accent-color:var(--paper);
  cursor:pointer;
}

output {
  width:4ch;
  flex-shrink:0;
  font-size:10px;
  color:var(--muted);
}

.colophon {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding:15px 0 20px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:1px;
}

.colophon p {
  margin:0;
  line-height:1.7;
}

.colophon span {
  padding:0 8px;
}

.colophon a {
  text-decoration-color:#55594f;
}

#notice {
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 16px;
}

#notice:empty {
  display:none;
}

@media(hover:hover) and (pointer:fine) {
  button:hover:not(:disabled),a:hover {
    color:#fff;
  }
}

@media(max-width:700px) {
  .masthead {
    height:74px;
    margin:0 6%;
  }
  .signature span {
    margin-left:12px;
    font-size:8px;
  }
  .edition {
    font-size:8px;
    letter-spacing:.5px;
  }
  main {
    height:calc(100svh - 275px);
    min-height:500px;
    max-height:850px;
  }
  .title-block {
    top:35px;
    bottom:auto;
    left:7%;
  }
  .eyebrow {
    font-size:8px;
    margin-bottom:18px;
    letter-spacing:1.6px;
  }
  h1 {
    font-size:30px;
  }
  .art-caption {
    left:7%;
    right:7%;
    bottom:22px;
    font-size:7px;
    letter-spacing:1px;
  }
  .interaction-hint {
    max-width:115px;
    text-align:right;
    line-height:1.6;
  }
  footer {
    margin:0 6%;
  }
  .controls {
    flex-wrap:wrap;
    gap:4px 25px;
    padding:12px 0;
  }
  .transport {
    gap:22px;
  }
  .erosion-control {
    order:3;
    width:100%;
    max-width:none;
    gap:18px;
  }
  .erosion-control input {
    flex:1;
  }
  .colophon {
    font-size:7px;
    letter-spacing:.6px;
    gap:16px;
  }
  .colophon p:first-child {
    max-width:165px;
  }
  .colophon p:last-child {
    text-align:right;
  }
  .colophon span {
    padding:0 3px;
  }
  .art-fallback {
    inset:50% 10% auto;
    font-size:22px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto;
  }
}

@media print {
  body {
    color: #222a22;
    --muted: #525b50;
  }
  .artwork, .art-caption, .controls {
    display: none;
  }
  main {
    height: auto;
    min-height: 0;
  }
  .title-block {
    position: static;
    margin: 40px 7.2%;
  }
}