/* Pons Tier - tokens locked off the approved art (avatar.png sampled)
   ink #171310 (door interior)  sky #90c4d0  wall #f9d094
   awning #7c966a  door #af8054  steps #cda779  queue-orange #f47e48
   type: Familjen Grotesk (display) + IBM Plex Mono (CA / data), self-hosted, no CDN
   spacing scale: 8 / 12 / 20 / 32 / 48px   radius: 2px (flat, no rounding)   motion: one drifting leaf only */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #171310;
  --sky: #90c4d0;
  --wall: #f9d094;
  --awning: #7c966a;
  --door: #af8054;
  --steps: #cda779;
  --queue: #f47e48;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--wall);
  color: var(--ink);
}

body {
  font-family: "Familjen Grotesk", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wall {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 16px;
}

.tag {
  align-self: flex-start;
  margin: 0 auto 0 0;
  position: relative;
  left: 0;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: var(--sky);
  border: 2px solid var(--ink);
  padding: 4px 10px;
  width: max-content;
}

.frame {
  position: relative;
  width: min(92vw, 980px);
  aspect-ratio: 3 / 1;
  border: 3px solid var(--ink);
  background: var(--wall);
  overflow: hidden;
}

.scene {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaf {
  position: absolute;
  top: 71%;
  left: 60%;
  width: 10px;
  height: 14px;
  background: var(--queue);
  border: 1.5px solid var(--ink);
  border-radius: 0 70% 0 70%;
  transform-origin: center;
  animation: drift 11s ease-in-out infinite;
  pointer-events: none;
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(22px, -4px) rotate(35deg); }
  50%  { transform: translate(8px, 3px) rotate(-15deg); }
  75%  { transform: translate(-18px, -2px) rotate(20deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.caption {
  margin: 0;
  max-width: 640px;
  text-align: center;
  font-size: clamp(15px, 2.4vw, 19px);
  line-height: 1.45;
  font-weight: 500;
}

.plaque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ca {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: clamp(13px, 2.6vw, 16px);
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--steps);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 14px;
  cursor: pointer;
  user-select: all;
}

.ca:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
.ca.copied { background: var(--queue); color: var(--ink); }

.links {
  display: flex;
  gap: 8px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 12px;
}

.tab:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
.tab-pons { background: var(--awning); }
.tab-x { background: var(--door); padding: 10px; }

@media (prefers-reduced-motion: reduce) {
  .leaf { animation: none; top: 73%; left: 61%; }
}