/* Archivo, self-hosted variable font (latin subset): weight 100-900, width 62-125%. */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(/fonts/archivo.woff2) format("woff2"); }

/*
 * STLmint design tokens and base components, shared by the studio (index.html) and every server-rendered page.
 * The world is a gift-shop name rack: pegboard ground, metal pegs, white backer cards hung by a euro slot,
 * yellow header cards for signage, red price stickers and primary actions, black ink.
 * Ink law: board, white card, black ink, yellow signage, red for price and the one action that matters. Nothing else.
 * Radii: cards 6px, controls 10px, stickers and pegs round.
 * Light pegboard by default; black-painted pegboard from the system dark preference. Cards stay white in both.
 */
:root {
  --board: #dde1e6;
  --board-hole: #aab1ba;
  --board-glint: rgb(255 255 255 / 0.55);
  --board-text: #121316;
  --board-muted: #444a53;
  --board-line: #c3c8cf;

  --card: #fbfbfa;
  --card-2: #eff0f2;
  --ink: #121316;
  --ink-2: #33373e;
  --muted: #59606a;
  --line: #d9dce1;
  --field-line: #b9bec6;

  --yellow: #ffd400;
  --yellow-2: #f2c800;
  --red: #e3262f;
  --red-press: #c71d25;
  --focus: #121316;
  --danger: #c71d25;

  --metal: radial-gradient(circle at 35% 30%, #ffffff 0%, #c9ced5 38%, #7d858f 100%);
  --hang-shadow: drop-shadow(0 1px 1px rgb(18 19 22 / 0.18)) drop-shadow(0 12px 14px rgb(18 19 22 / 0.2));
  --lift-shadow: 0 1px 2px rgb(18 19 22 / 0.12), 0 18px 32px -14px rgb(18 19 22 / 0.4);

  --r-card: 6px;
  --r-control: 10px;
  --r-pill: 999px;
  --pitch: 24px;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: var(--ease-out);

  color-scheme: light;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--board-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: dark) {
  :root {
    --board: #1b1d21;
    --board-hole: #08090a;
    --board-glint: rgb(255 255 255 / 0.07);
    --board-text: #eef0f3;
    --board-muted: #a9b0ba;
    --board-line: #30333a;
    --focus: #ffd400;
    --hang-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.5)) drop-shadow(0 14px 16px rgb(0 0 0 / 0.55));
    --lift-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 32px -14px rgb(0 0 0 / 0.8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* The pegboard: a dark hole with a faint glint on its lower lip, every 24px. */
body, .board {
  background-color: var(--board);
  background-image:
    radial-gradient(circle at 50% 50%, var(--board-hole) 0 2.6px, transparent 3.1px),
    radial-gradient(circle at 50% 58%, var(--board-glint) 0 2.8px, transparent 3.3px);
  background-size: var(--pitch) var(--pitch);
  background-position: 0 0, 0 0;
}
#root { min-height: 100dvh; }
h1, h2, h3, h4 { margin: 0; font-weight: 750; letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--yellow); color: #121316; }
html { scrollbar-color: var(--board-hole) var(--board); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- signage type: condensed heavy caps, as printed on a rack header card ---------- */
.sign { font-stretch: 72%; font-weight: 860; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.92; }

/* ---------- pegs, cards and header cards ---------- */
/* A metal peg seen end-on. Sits in front of whatever hangs from it. */
.peg { position: absolute; z-index: 2; width: 13px; height: 13px; border-radius: 50%; background: var(--metal); box-shadow: 0 2px 2px rgb(0 0 0 / 0.35); pointer-events: none; }
/* The hook's arm, coming down from its hole in the board to the tip that carries the card. */
.peg::before { content: ""; position: absolute; left: 3.5px; bottom: 6px; width: 6px; height: 24px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #6f7781, #eef0f2 45%, #8a929c); box-shadow: 1px 0 1px rgb(0 0 0 / 0.2); }
.peg::after { content: ""; position: absolute; left: -2px; bottom: 26px; width: 17px; height: 6px; border-radius: 3px; background: linear-gradient(#eef0f2, #7d858f); box-shadow: 0 1px 1px rgb(0 0 0 / 0.3); }
/* Something hanging from one peg: the wrapper carries the shadow (so it follows the slot) and swings about the peg. */
.hang { position: relative; filter: var(--hang-shadow); transform-origin: 50% 15px; }
.hang > .peg { top: 9px; left: calc(50% - 6.5px); }
/* A white backer card with a euro hang slot cut out of its top. */
.tag {
  position: relative; display: block; background: var(--card); color: var(--ink); border-radius: var(--r-card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Crect x='5' y='5' width='30' height='6' rx='3'/%3E%3Ccircle cx='20' cy='8' r='5'/%3E%3C/svg%3E") 50% 4px / 50px 20px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Crect x='5' y='5' width='30' height='6' rx='3'/%3E%3Ccircle cx='20' cy='8' r='5'/%3E%3C/svg%3E") 50% 4px / 50px 20px no-repeat exclude, linear-gradient(#000 0 0);
  padding-top: 30px;
}
/* A yellow header card, hung by two round holes near its top corners. */
.header-card {
  position: relative; background: var(--yellow); color: #121316; border-radius: var(--r-card);
  -webkit-mask: radial-gradient(circle 5px at 26px 16px, transparent 4.5px, #000 5px), radial-gradient(circle 5px at calc(100% - 26px) 16px, transparent 4.5px, #000 5px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 5px at 26px 16px, transparent 4.5px, #000 5px), radial-gradient(circle 5px at calc(100% - 26px) 16px, transparent 4.5px, #000 5px);
  mask-composite: intersect;
}
.header-hang { position: relative; filter: var(--hang-shadow); }
.header-hang > .peg:nth-of-type(1) { top: 10px; left: 20px; }
.header-hang > .peg:nth-of-type(2) { top: 10px; right: 20px; }
/* Round price sticker, slapped on a little crooked. */
.sticker {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--red); color: #fff; font-stretch: 70%; font-weight: 850; font-size: 19px; line-height: 1; letter-spacing: -0.01em;
  transform: rotate(-9deg); box-shadow: 0 1px 1px rgb(0 0 0 / 0.18); font-variant-numeric: tabular-nums;
}
.sticker small { display: block; font-size: 10px; font-weight: 700; font-stretch: 85%; letter-spacing: 0.02em; text-transform: uppercase; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: var(--r-control);
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink);
  font-weight: 680; font-size: 16px; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.button:active:not(:disabled) { transform: scale(0.97); }
.button:disabled { opacity: 0.5; cursor: default; }
.button.primary { background: var(--red); border-color: var(--red); color: #fff; }
.button.ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.button.ghost { background: transparent; border-color: transparent; color: inherit; }
.button.large { height: 54px; padding: 0 26px; font-size: 17px; }
.button.wide { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled) { background: var(--card-2); }
  .button.primary:hover:not(:disabled) { background: var(--red-press); border-color: var(--red-press); }
  .button.ink:hover:not(:disabled) { background: #2a2d33; border-color: #2a2d33; }
  .button.ghost:hover:not(:disabled) { background: rgb(127 127 127 / 0.14); }
}
.icon-button {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-control);
  border: none; background: transparent; color: var(--muted); cursor: pointer; transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.icon-button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .icon-button:hover { background: var(--card-2); color: var(--ink); } }
.text-link { background: none; border: none; padding: 0; color: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--red); }
.text-link:hover { text-decoration-thickness: 2.5px; }
.text-link:disabled { opacity: 0.5; cursor: default; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 14px; font-weight: 650; color: var(--ink-2); }
.field input, .field select, .field textarea {
  height: 48px; padding: 0 14px; border-radius: var(--r-control);
  border: 1.5px solid var(--field-line); background: #fff; color: var(--ink); font-size: 16px; width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6b717b; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(255 212 0 / 0.75); }
.field-error { color: var(--danger); font-size: 14px; font-weight: 600; }

/* ---------- logo: a little yellow header card ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.logo-mark { position: relative; display: block; width: 26px; height: 30px; border-radius: 4px; background: var(--yellow); box-shadow: 0 1px 1px rgb(0 0 0 / 0.2); }
.logo-mark::before { content: ""; position: absolute; top: 5px; left: 9px; width: 8px; height: 4px; border-radius: 2px; background: var(--board-hole); }
.logo-mark::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 6px; height: 9px; border-radius: 1.5px; background: var(--red); }
.logo-word { font-stretch: 72%; font-weight: 880; font-size: 23px; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; }

/* ---------- dialog ---------- */
.dialog-back {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgb(10 11 13 / 0.55); transition: opacity 200ms ease;
  @starting-style { opacity: 0; }
}
.dialog {
  position: relative; width: min(420px, 100%); max-height: 88dvh; overflow: auto; display: flex; flex-direction: column; gap: 16px;
  padding: 30px 28px 28px; border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: var(--lift-shadow);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(10px) scale(0.97); }
}
.dialog.wide { width: min(680px, 100%); }
.dialog h2 { font-size: 30px; }
.dialog-lead { color: var(--muted); }
.dialog-close { position: absolute; top: 14px; right: 14px; }

/* ---------- picture of a design (server render) ---------- */
.shot { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.shot-img { width: 100%; height: 100%; object-fit: contain; transition: opacity 220ms ease, filter 220ms ease; }
.shot.is-loading .shot-img { opacity: 0.6; filter: blur(2px) saturate(0.7); }
.shot-skeleton { width: 64%; aspect-ratio: 4 / 3; border-radius: var(--r-card); background: linear-gradient(90deg, var(--card-2) 25%, #f7f8f9 50%, var(--card-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.shot-error { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--r-control); background: var(--card); color: var(--danger); font-size: 14px; font-weight: 600; box-shadow: var(--lift-shadow); max-width: 90%; text-align: center; }

@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* A card settling on its peg: one damped swing. */
@keyframes swing { 0% { transform: rotate(0); } 22% { transform: rotate(var(--swing, 2.4deg)); } 48% { transform: rotate(calc(var(--swing, 2.4deg) * -0.55)); } 72% { transform: rotate(calc(var(--swing, 2.4deg) * 0.22)); } 100% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}