/* Backstop. One screenprinted poster: white ink on a black grained field, three voices of type
   (a wood type slab, a script, a letterspaced slab at text size) and nothing else. */

@font-face { font-family: "Slab"; src: url("/fonts/alfaslabone-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ink"; src: url("/fonts/arvo-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ink"; src: url("/fonts/arvo-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Hand"; src: url("/fonts/satisfy-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #ffffff;
  --ground: #181818;
  --dim: #b9b9b9;
  --sheet: min(1180px, 84vw);
  --machine-w: min(740px, 58vh);
  --display: clamp(56px, min(15.4vw, 22vh), 198px);
  --display-sub: clamp(38px, min(9.6vw, 13vh), 122px);
  --display-sec: clamp(40px, 7.4vw, 104px);
  --script: clamp(26px, min(4vw, 5.6vh), 54px);
  --script-sec: clamp(22px, 2.5vw, 34px);
  --body: 20px;
  --label: 17px;
  --band-gap: clamp(78px, 9vw, 136px);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--body)/1.7 "Ink", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

#sheet { position: relative; z-index: 1; width: var(--sheet); margin: 0 auto; padding: 0 0 clamp(90px, 10vw, 150px); }

.band { text-align: center; padding-top: var(--band-gap); }
.band-hero { padding: clamp(22px, 2.4vw, 38px) 0 0; }

/* ---- the three voices ---- */
.display {
  font: 400 var(--display-sec)/0.98 "Slab", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 2px 0 0;
}
.display-hero { font-size: var(--display); margin-top: -0.05em; }
.display-sub { font-size: var(--display-sub); }

.script { font: 400 var(--script-sec)/1.1 "Hand", cursive; margin: 0; }
.script-hero { font-size: var(--script); margin-bottom: -0.16em; }

.leaf {
  max-width: 29em;
  margin: clamp(22px, 2.4vw, 34px) auto 0;
  font-weight: 700;
  font-size: var(--body);
  line-height: 1.75;
  letter-spacing: 0.055em;
  text-wrap: balance;
}

/* ---- hairline oval badges, the poster's own device ---- */
.oval {
  display: inline-block;
  margin: 0;
  padding: 15px 42px;
  font: 700 var(--label)/1.3 "Ink", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  background: url("/img/oval.png") center/100% 100% no-repeat;
}
.oval b { font-weight: 700; }
.oval-key { margin-top: clamp(26px, 3vw, 44px); padding: 0; background: none; }
.oval-key a {
  display: inline-block; padding: 19px 56px; color: var(--ink); text-decoration: none;
  background: url("/img/oval.png") center/100% 100% no-repeat;
  transition: transform .12s ease, filter .12s ease;
}
.oval-key a:hover { transform: scale(1.035); filter: drop-shadow(0 0 14px rgba(255,255,255,.35)); }
.oval-key a:active { transform: scale(0.995); }

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

/* ---- the index of sections ---- */
.index {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(14px, 1.6vw, 24px);
}
.index a {
  font: 700 var(--label)/1 "Ink", Georgia, serif;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink); text-decoration: none;
  padding: 14px 18px 12px;
  border-bottom: 2px solid transparent;
}
.index a:hover, .index a:focus-visible, .index a[aria-current="true"] { border-bottom-color: var(--ink); }
.star { width: 16px; height: 16px; background: url("/img/star.png") center/contain no-repeat; display: block; flex: 0 0 auto; }

/* ---- the machine ---- */
.stage { position: relative; margin-top: clamp(18px, 2.2vw, 34px); }
.machine { position: relative; width: var(--machine-w); max-width: 100%; margin: 0 auto; }
.machine-body { position: relative; }
.machine-art { display: block; width: 100%; height: auto; position: relative; z-index: 2; }

.burst {
  position: absolute; z-index: 1;
  left: 70%; top: -4%; width: 48%; aspect-ratio: 1;
  background: url("/img/starburst.png") center/contain no-repeat;
  transform: scale(.92);
  transition: transform .25s ease;
}
.burst[data-on="1"] { transform: scale(1.18); }

.sparkle { position: absolute; top: 36%; width: clamp(26px, 3vw, 46px); aspect-ratio: 1; background: url("/img/star.png") center/contain no-repeat; }
.sparkle-l { left: 0; }
.sparkle-r { right: 0; }

.screen {
  position: absolute; z-index: 3;
  left: 28.5%; top: 14%; width: 44.5%; height: 43%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 16px; text-align: center;
}
.screen .face { width: clamp(44px, 7.4%, 92px); width: 26%; height: auto; margin-bottom: 4px; display: none; }
.machine[data-face="1"] .face { display: block; }
.machine[data-face="1"] #screen-top { display: none; }
.face-screen { display: none; position: absolute; z-index: 3; left: 41%; top: 26%; width: 19%; height: auto; }
.screen-label { margin: 0; font: 700 clamp(13px, 1.3vw, 17px)/1.3 "Ink", Georgia, serif; text-transform: uppercase; letter-spacing: 0.15em; color: var(--dim); }
.screen-figure { margin: 0; display: flex; align-items: baseline; gap: .22em; font: 400 clamp(30px, 4.4vw, 60px)/1.05 "Slab", Georgia, serif; }
.screen-figure .unit { font-size: 0.4em; letter-spacing: 0.04em; }

.tank { position: absolute; z-index: 3; left: 83.4%; top: 9.4%; width: 12.2%; height: 60.6%; display: flex; align-items: flex-end; }
.tank-fill { position: relative; width: 100%; height: 0; background: var(--ink); transition: height 1.2s ease; }
.tank-fill[data-on="1"] .tank-wave { display: block; }
.tank-wave { display: none; position: absolute; left: 0; right: 0; bottom: 100%; height: 9px; background: url("/img/wave.png") bottom/100% 100% no-repeat; }

.plinth { position: absolute; z-index: 3; left: 27%; top: 76.5%; width: 56%; height: 16%; display: flex; align-items: center; justify-content: center; }
.mint { margin: 0; font: 700 clamp(12px, 1.25vw, 16px)/1.4 "Ink", Georgia, serif; letter-spacing: 0.05em; word-break: break-all; }
.mint[data-state="empty"] { color: var(--dim); text-transform: uppercase; letter-spacing: 0.13em; word-break: normal; }

/* ---- the keyboard: the links are the machine's own keys ---- */
.keyboard {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  width: min(760px, 100%); margin: clamp(14px, 1.6vw, 22px) auto 0;
}
.key {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 62px; padding: 16px 18px;
  font: 700 var(--label)/1.15 "Ink", Georgia, serif;
  text-transform: uppercase; letter-spacing: 0.055em;
  color: #111; text-align: center; text-decoration: none; white-space: nowrap;
  background: none; cursor: pointer;
  border: 0; border-image: url("/img/key.png") 96 fill / 24px / 0 stretch;
  transition: transform .1s ease, filter .1s ease;
}
.key img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.key:hover:not([disabled]):not([aria-disabled="true"]) { transform: translateY(-2px); filter: drop-shadow(0 0 12px rgba(255,255,255,.3)); }
.key:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }
.key[disabled], .key[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
/* the keycap is a picture, so it needs its own focus ring: the browser's sits under the plate */
.key:focus-visible, .oval-key a:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.key-wide { min-width: 280px; }

/* ---- numbers off the chain ---- */
.sheetnums {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 26px);
  margin-top: clamp(26px, 3vw, 44px);
}
.sheetnums p { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 18px; }
.sheetnums b { font: 400 clamp(30px, 3.4vw, 46px)/1 "Slab", Georgia, serif; }
.sheetnums span { font: 700 var(--label)/1.2 "Ink", Georgia, serif; text-transform: uppercase; letter-spacing: 0.15em; color: var(--dim); }

/* ---- printed tables ---- */
.table { margin-top: clamp(26px, 3vw, 42px); text-align: left; }
.thead, .trow { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1.1fr 1fr; align-items: center; gap: 20px; padding: 20px 24px; }
.thead { font: 700 var(--label)/1 "Ink", Georgia, serif; text-transform: uppercase; letter-spacing: 0.15em; color: var(--dim); border-bottom: 2px solid var(--ink); }
.trow { border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px; }
.trow .coin { display: flex; align-items: center; gap: 16px; min-width: 0; }
.trow .coin img { width: 48px; height: 48px; object-fit: cover; flex: 0 0 auto; }
.trow .coin b { display: block; font-weight: 700; overflow-wrap: anywhere; }
.trow .coin span { display: block; font-size: 15px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.table .empty { margin: 0; padding: 30px 24px 0; color: var(--dim); font-size: var(--body); line-height: 1.7; max-width: 40em; }
.table[data-state="filled"] .empty { display: none; }
.table[data-state="empty"] .thead { opacity: .5; }

/* ---- forms ---- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(26px, 3vw, 42px); text-align: left; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field-wide, .field-note, .actions { grid-column: 1 / -1; }
.field label, .field .label { font: 700 var(--label)/1.3 "Ink", Georgia, serif; text-transform: uppercase; letter-spacing: 0.15em; color: var(--dim); }
.field input {
  min-height: 60px; padding: 14px 22px; color: var(--ink); background: rgba(255,255,255,.06);
  border: 2px solid var(--ink); border-radius: 0; font: 400 var(--body)/1.4 "Ink", Georgia, serif;
}
.offscreen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.key-file { width: 100%; max-width: 420px; }
.offscreen:focus-visible + .key-file { outline: 3px solid var(--ink); outline-offset: 3px; }
.field input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.field-note p { margin: 0; max-width: 46em; color: var(--dim); font-size: var(--body); line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.note { margin: 0; color: var(--dim); font-size: var(--label); letter-spacing: .04em; }

/* ---- how ---- */
.steps { list-style: none; margin: clamp(26px, 3vw, 42px) 0 0; padding: 0; text-align: left; display: grid; gap: 2px; }
.steps li { display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: start; padding: 40px 36px; border-top: 1px solid rgba(255,255,255,.3); }
.steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
.steps b { font: 400 clamp(38px, 4vw, 56px)/1 "Slab", Georgia, serif; }
.steps p { margin: 0; max-width: 42em; font-size: var(--body); line-height: 1.7; }
.risk { margin: clamp(30px, 3.4vw, 46px) auto 0; max-width: 44em; color: var(--dim); font-size: var(--label); line-height: 1.8; letter-spacing: .03em; }

/* ---- phone: the poster is redrawn, not squeezed ---- */
@media (max-width: 1100px) {
  .keyboard { grid-template-columns: 1fr 1fr; width: min(540px, 100%); }
}

@media (max-width: 900px) {
  :root { --sheet: min(1180px, 88vw); --machine-w: 100%; --body: 19px; }
  .badges { flex-direction: column; gap: 12px; }
  .index { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; justify-items: center; }
  .star { display: none; }
  .sparkle { display: none; }
  .keyboard { grid-template-columns: 1fr 1fr; }
  .sheetnums { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr; }
  .thead { display: none; }
  .trow { grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 22px 18px; }
  .trow .coin { grid-column: 1 / -1; }
  .steps li { grid-template-columns: 1fr; gap: 10px; padding: 30px 28px; }
  .steps b { font-size: 26px; }

  /* the readouts step out of the machine and are set under it, at full size */
  .screen, .plinth { position: static; width: auto; height: auto; padding: 0; }
  .screen { margin-top: 22px; gap: 6px; }
  .screen .face { display: none !important; }
  .machine[data-face="1"] .face-screen { display: block; }
  .screen .face { width: 76px; }
  .screen-label { font-size: 16px; }
  .screen-figure { font-size: 54px; }
  .plinth { margin-top: 18px; }
  .mint { font-size: 16px; }
  .burst { top: -2%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}