/* tokens, sampled straight off the approved art
   wood dark (frame edge): #0a0400   wood mid: #4c3800
   plate (flash-blown, faint lime white-balance cast): #cad7c3
   ink: #1c130a   paper: #f1ece0   chain accent (earned, the art's own flash cast): #ccff00
   type: Special Elite only (true monospace, typewriter face doubles as the receipt printer
   and the CA face, no second font needed for one small slip of paper)
   corner radius: 0. torn paper, not UI.
   motion: none. the lane is explicit, nothing on this page moves.
*/

@font-face {
  font-family: "Special Elite";
  src: url("assets/fonts/special-elite-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }

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

.table {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slip {
  position: absolute;
  left: 7%;
  bottom: 6%;
  width: clamp(148px, 27vw, 232px);
  transform: rotate(-6deg);
  background: #f1ece0;
  color: #1c130a;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
  clip-path: polygon(
    0% 9%, 6% 0%, 12% 9%, 18% 0%, 25% 9%, 31% 0%, 37% 9%, 43% 0%,
    50% 9%, 56% 0%, 62% 9%, 68% 0%, 75% 9%, 81% 0%, 87% 9%, 93% 0%, 100% 9%,
    100% 100%, 0% 100%
  );
}

.slip__title,
.slip__line,
.slip__label,
.slip__ca {
  font-family: "Special Elite", "Courier New", ui-monospace, monospace;
  margin: 0;
}

.slip__title {
  font-size: clamp(13px, 2vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-top: 2px solid #ccff00;
  padding-top: 10px;
}

.slip__line {
  margin-top: 6px;
  font-size: clamp(10px, 1.4vw, 12px);
  color: #4a4132;
}

.slip__rule {
  margin: 10px 0;
  border-top: 1px dashed #9a9384;
}

.slip__label {
  font-size: clamp(9px, 1.2vw, 10px);
  letter-spacing: 0.08em;
  color: #6b6151;
}

.slip__ca {
  display: block;
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0 0;
  width: 100%;
  text-align: left;
  color: #1c130a;
  font-size: clamp(11px, 1.7vw, 14px);
  word-break: break-all;
  cursor: pointer;
}

.slip__ca:hover,
.slip__ca:focus-visible {
  color: #4a5f14;
}

.slip__ca:focus-visible {
  outline: 2px dashed #ccff00;
  outline-offset: 3px;
}

.slip__ca.copied::after {
  content: " (copied)";
  color: #6b6151;
}

@media (max-width: 480px) {
  .slip { left: 5%; bottom: 5%; width: clamp(130px, 44vw, 190px); padding: 11px 11px 10px; }
  .slip__title { padding-top: 8px; }
}