/* Self-hosted; display faces are cut to the letters on their cards (decision 61). */
@font-face { font-family: 'Archivo'; src: url('fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Abril Fatface'; src: url('fonts/abril-fatface.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url('fonts/special-elite.woff2') format('woff2'); font-display: swap; }

:root {
  --u: calc(100cqw / 1080);
  --cobalt: #1747c8;
  --cream: #e7dac0;
  --bark: #281c12;
  --evergreen: #0f5132;
  --amber: #f2a93b;
  --kraft: #dec89e;
  --ink: #1e1c18;
  --night: #0a0f24;
}

* { box-sizing: border-box; margin: 0; }
body { background: #101010; }

main {
  --gap: 8px;
  height: 100svh;
  padding: var(--gap);
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  justify-content: center;
  align-content: center;
  gap: var(--gap);
}

.stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.card {
  position: relative;
  width: min(calc(50vw - var(--gap) * 1.5), calc((50svh - var(--gap) * 1.5) * .8));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  container-type: inline-size;
}
.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
h2 { font-weight: 400; }

.tip {
  position: absolute;
  z-index: 5;
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  background: #fff;
  color: #111;
  font: 500 max(11px, calc(var(--u) * 24)) / 1.25 'IBM Plex Mono', monospace;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) rgb(0 0 0 / .3);
}

/* Card 1 */
.card-smoke { background: var(--cobalt); color: #fff; }
#plume text { font: 13px 'IBM Plex Mono', monospace; fill: #fff; cursor: default; }
#plume text.is-active { fill: var(--amber); fill-opacity: 1; font-weight: 500; }
.exhaust-stack, .exhaust-lip { position: absolute; background: var(--night); }
.exhaust-stack { left: calc(var(--u) * 990); top: calc(var(--u) * 1170); width: calc(var(--u) * 60); height: calc(var(--u) * 180); }
.exhaust-lip { left: calc(var(--u) * 978); top: calc(var(--u) * 1160); width: calc(var(--u) * 84); height: calc(var(--u) * 20); }
.smoke-title {
  position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 48); width: calc(var(--u) * 560);
  font: 400 calc(var(--u) * 176) / calc(var(--u) * 150) 'Instrument Serif', serif; letter-spacing: -.035em;
  pointer-events: none;
}
.smoke-body {
  position: absolute; left: calc(var(--u) * 48); top: calc(var(--u) * 1176); width: calc(var(--u) * 560);
  font: 400 max(11px, calc(var(--u) * 24)) / 1.33 'Archivo', sans-serif;
}

/* Card 2 */
.card-diary { background: var(--cream); color: var(--bark); }
#rings .ring { fill: none; stroke: var(--bark); stroke-width: 2; }
#rings .ring-major { stroke-width: 3; }
#rings .burn { fill: #d63a1c; stroke: transparent; stroke-width: 10; pointer-events: all; cursor: default; }
#rings .burn.is-active { fill: var(--bark); }
.diary-title {
  position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 985);
  font: 400 calc(var(--u) * 128) / calc(var(--u) * 120) 'Abril Fatface', serif; letter-spacing: -.015em; white-space: nowrap;
}
.diary-body {
  position: absolute; left: calc(var(--u) * 48); top: calc(var(--u) * 1246); width: calc(var(--u) * 680);
  font: 400 max(11px, calc(var(--u) * 23)) / 1.3 'Archivo', sans-serif;
}

/* Card 3 */
.card-wires { background: var(--evergreen); color: #fff; }
#wire-art path { fill: none; stroke-width: 2.4; }
#wire-art .wire-server { stroke: #fff; }
#wire-art .wire-overhead { stroke: var(--amber); }
#wire-art .server { fill: #06140e; }
.wires-title {
  position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 560);
  font: 800 calc(var(--u) * 120) / calc(var(--u) * 108) 'Archivo', sans-serif; letter-spacing: -.05em;
}
.wires-body {
  position: absolute; left: calc(var(--u) * 48); top: calc(var(--u) * 960); width: calc(var(--u) * 372);
  font: 400 max(11px, calc(var(--u) * 24)) / 1.33 'Archivo', sans-serif;
}
.wires-control { position: absolute; left: calc(var(--u) * 48); top: calc(var(--u) * 1170); width: calc(var(--u) * 372); display: block; }
.wires-label { display: block; margin-bottom: 4px; font: 500 max(13px, calc(var(--u) * 24)) / 1.3 'IBM Plex Mono', monospace; }
output { color: var(--amber); }
input[type='range'] { width: 100%; min-height: 32px; accent-color: var(--amber); display: block; cursor: pointer; }
input[type='range']:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }

/* Card 4 */
.card-stamp { background: url('assets/kraft.jpg') center / cover var(--kraft); color: var(--ink); cursor: crosshair; }
.stamp-title {
  position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 48); width: calc(var(--u) * 1010);
  font: 400 calc(var(--u) * 146) / calc(var(--u) * 136) 'Special Elite', serif; letter-spacing: -.035em;
}
.stamp { position: absolute; pointer-events: none; mix-blend-mode: multiply; height: auto; }
.stamp-first { left: calc(var(--u) * -150); top: calc(var(--u) * 530); width: calc(var(--u) * 1500); transform: rotate(-13deg); }
.stamp-body {
  position: absolute; left: calc(var(--u) * 48); top: calc(var(--u) * 1208); width: calc(var(--u) * 560);
  font: 400 max(11px, calc(var(--u) * 24)) / 1.33 'Special Elite', serif;
}
.stamp-actions {
  position: absolute; right: calc(var(--u) * 48); top: calc(var(--u) * 1208);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 6);
}
button:focus-visible { outline-color: var(--ink); }
button {
  min-height: 32px; padding: 0 2px; border: 0; border-bottom: 2px solid currentColor; background: none; color: var(--ink);
  font: 400 max(13px, calc(var(--u) * 24)) / 1.2 'Special Elite', serif; cursor: pointer;
}

/* Motion: everything is finished by default, and only animates once a card arrives */
@media (prefers-reduced-motion: no-preference) {
  .js .card:not(.has-arrived) #plume text,
  .js .card:not(.has-arrived) .burn,
  .js .card:not(.has-arrived) .wire-overhead { opacity: 0; }
  .js .card:not(.has-arrived) .ring { stroke-dashoffset: 1; }
  .js .card:not(.has-arrived) .stamp-first { opacity: 0; }

  .card.has-arrived #plume text { animation: appear .35s both; animation-delay: var(--delay); }
  .card.has-arrived .burn { animation: appear .2s both; animation-delay: var(--delay); }
  .card .ring { stroke-dasharray: 1; }
  .card.has-arrived .ring { animation: draw .7s ease-out both; animation-delay: var(--delay); }
  .card.has-arrived .wire-overhead.is-arriving { animation: draw .55s ease-in-out both; animation-delay: var(--delay); stroke-dasharray: 1; }
  .card-stamp.has-arrived .stamp-first { animation: slam .18s cubic-bezier(.3, 0, .9, .6) both .25s; }
  .card-stamp.has-arrived { animation: jolt .2s linear .43s; }
  .stamp-new { animation: slam-new .15s cubic-bezier(.3, 0, .9, .6) both; }
}

@keyframes appear { from { opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes slam { from { opacity: 0; transform: rotate(-13deg) scale(1.7); } to { opacity: 1; transform: rotate(-13deg) scale(1); } }
@keyframes slam-new { from { opacity: 0; scale: 1.6; } to { opacity: 1; scale: 1; } }
@keyframes jolt { 30% { transform: translate(calc(var(--u) * -3), calc(var(--u) * 5)); } 65% { transform: translate(calc(var(--u) * 2), calc(var(--u) * -2)); } }

@media (forced-colors: active) {
  #wire-art .wire-server, #wire-art .wire-overhead { stroke: CanvasText; }
}

/* On small cards the wires blur into bands, so they touch and read as one clean ribbon */
@container (max-width: 700px) {
  .tip { white-space: normal; max-width: 90%; }
  #wire-art path { stroke-width: 3.6; }
  .smoke-body { width: calc(var(--u) * 860); top: calc(var(--u) * 1176); }
  .wires-body { top: calc(var(--u) * 900); }
  .diary-body { width: calc(var(--u) * 960); }
}

/* On a phone's half-width card the small text gives way, but stays available to screen readers */
@container (max-width: 300px) {
  .smoke-body, .diary-body, .wires-body, .stamp-body {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .wires-control {
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    padding: 4px calc(var(--u) * 48) 2px; background: var(--evergreen);
  }
  .stamp-actions { top: auto; bottom: 2px; }
}