/* tokens
   bg: #fdf7e6 (sampled straight off the drawing's own flat off-white)
   ink: #141311   litter grey: #85868a   sand: #e9c079   red: #e81a33   scoop blue: #4d9dda
   accent: #ccff00 (the chain's own neon, one hairline underline only, never a fill)
   type: Pixelify Sans (crude mouse-typed labels/copy), DM Mono (CA value + footer data, real case, copyable)
   corner radius: 0 everywhere, this is a paint canvas, not a UI
   spacing scale: 8 / 12 / 16 / 24 / 32 px
   motion: none idle - the drawing is already the action, only click feedback moves
*/

@font-face {
  font-family: "Pixelify Sans";
  src: url("assets/fonts/pixelify-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("assets/fonts/pixelify-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("assets/fonts/dm-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("assets/fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #fdf7e6;
  color: #141311;
  overflow: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vh 16px 1.4vh;
  font-family: "Pixelify Sans", ui-sans-serif, sans-serif;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

.page {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4vh;
}

.art {
  display: block;
  width: auto;
  height: min(52vh, 62vw, 460px);
  max-width: 92vw;
  flex-shrink: 1;
  min-height: 0;
}

.labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  text-align: center;
  flex-shrink: 0;
}

.ticker {
  margin: 0;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 5.4vw, 34px);
  letter-spacing: 0.02em;
  transform: rotate(-1deg);
}

.line {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(12px, 2.6vw, 15px);
  line-height: 1.35;
  color: rgba(20, 19, 17, 0.78);
}

.ca {
  margin-top: 0.2em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  background: transparent;
  border: 2px solid #141311;
  border-bottom: 4px solid #ccff00;
  padding: 7px 12px;
  cursor: pointer;
  color: #141311;
}
.ca:hover { background: rgba(232, 26, 51, 0.08); }

.ca-label {
  font-family: "Pixelify Sans", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(20, 19, 17, 0.62);
}

.ca-value {
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.chrome {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.55em;
  padding-top: 1vh;
  font-family: "Pixelify Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(20, 19, 17, 0.75);
}

.chrome a { color: #141311; text-decoration: none; border-bottom: 1px solid rgba(20, 19, 17, 0.4); }
.chrome a:hover { border-bottom-color: #e81a33; }
.sep { color: rgba(20, 19, 17, 0.32); }

.status { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0; }

@media (max-height: 700px), (max-width: 380px) {
  html, body { overflow: auto; }
  .art { height: min(38vh, 55vw, 320px); }
  .line { display: none; }
}