/* Citadot site: shared pixel toolkit (buttons, panels, icons, logo, footer) and the self-hosted pixel fonts.
   Each page sets its own colours with CSS variables. No build step. No third-party requests. */

/* ---- fonts: self-hosted (SIL Open Font License, see /fonts/LICENSES.txt). Latin only: the site is English. ---- */
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/silkscreen-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/silkscreen-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/pixelifysans-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pressstart2p-400-latin.woff2") format("woff2"); }

:root {
  --px: 4px;                                   /* one "chrome pixel": borders, shadows, notches */
  --ink: #2a2032;
  --font-ui: "Silkscreen", "Press Start 2P", ui-monospace, Menlo, Consolas, monospace;
  --font-body: "Pixelify Sans", ui-monospace, Menlo, Consolas, monospace;
  --focus: #ff3b6b;
}
@media (max-width: 480px) { :root { --px: 3px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; }
img, canvas, .ico { image-rendering: crisp-edges; image-rendering: pixelated; }
a { color: inherit; }
:focus-visible { outline: var(--px) solid var(--focus); outline-offset: calc(var(--px) * 1.5); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- icons (see icons.js) ---- */
.ico { display: inline-block; flex: none; width: calc(var(--iw, 8) * var(--s, 2) * 1px); height: calc(var(--ih, 8) * var(--s, 2) * 1px);
  background-repeat: no-repeat; background-size: 100% 100%; vertical-align: middle; }

/* ---- pixel picture (see pimg.js) ---- */
.pimg { display: block; width: 100%; aspect-ratio: var(--w, 1) / var(--h, 1); background-repeat: no-repeat; background-size: 100% 100%; background-color: rgba(0,0,0,.06); }

/* ---- logo (see logo.js) ---- */
.logo { display: inline-flex; align-items: flex-end; justify-content: center; line-height: 0; max-width: 100%; user-select: none; }
.logo-l { flex: none; width: calc(var(--w) * var(--ls, 6) * 1px); height: calc(var(--h) * var(--ls, 6) * 1px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.logo-l.hop { animation: logo-hop .5s steps(5) both; }
@keyframes logo-hop { 0% { transform: translateY(0); } 35% { transform: translateY(calc(var(--ls, 6) * -3px)); } 65% { transform: translateY(calc(var(--ls, 6) * -1px)); } 100% { transform: translateY(0); } }
.logo.wave .logo-l { animation: logo-wave 6s steps(1, end) infinite; animation-delay: calc(var(--i) * .09s); }
@keyframes logo-wave { 0%, 14%, 100% { transform: translateY(0); } 3% { transform: translateY(calc(var(--ls, 6) * -3px)); } 6% { transform: translateY(calc(var(--ls, 6) * -1px)); } 9% { transform: translateY(calc(var(--ls, 6) * -2px)); } 12% { transform: translateY(calc(var(--ls, 6) * -1px)); } }

/* ---- pixel button: notched outline + inner bevel + chunky slab underneath ---- */
.pbtn {
  --face: #ffcc4d; --hi: #fff0a8; --lo: #e39a1c; --edge: var(--ink); --fg: var(--ink); --d: calc(var(--px) * 2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--px) * 2);
  margin: var(--px) var(--px) calc(var(--px) * 3); padding: calc(var(--px) * 3) calc(var(--px) * 5);
  font: 400 15px/1.3 var(--font-ui); letter-spacing: .03em; text-transform: uppercase; text-align: center; text-decoration: none;
  color: var(--fg); background: var(--face); border: 0; border-radius: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
  box-shadow:
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 0 var(--lo),
    inset var(--px) var(--px) 0 0 var(--hi),
    0 var(--d) 0 0 var(--lo),
    calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), 0 calc(var(--px) * -1) 0 0 var(--edge),
    calc(var(--px) * -1) var(--d) 0 0 var(--edge), var(--px) var(--d) 0 0 var(--edge), 0 calc(var(--d) + var(--px)) 0 0 var(--edge);
}
.pbtn:hover { transform: translateY(calc(var(--px) * -1)); }
.pbtn:active, .pbtn.is-down { transform: translateY(var(--d)); --d: 0px; }
.pbtn.small { padding: calc(var(--px) * 2) calc(var(--px) * 3); font-size: 12px; --d: var(--px); }
.pbtn.blue { --face: #4a8cff; --hi: #9fc2ff; --lo: #2c5fc4; --fg: #fff; }
.pbtn.green { --face: #5ad17a; --hi: #a6f0b9; --lo: #2f9e52; }
.pbtn.dark { --face: #3b2f4a; --hi: #56466a; --lo: #221a2c; --fg: #fff4e0; --edge: #120d1a; }
.pbtn.pink { --face: #ff8fb6; --hi: #ffd0e2; --lo: #d66c94; }

/* ---- pixel panel ---- */
.pbox {
  --face: #fff; --hi: transparent; --lo: transparent; --edge: var(--ink);
  position: relative; margin: var(--px); padding: calc(var(--px) * 4); background: var(--face);
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 0 var(--lo),
    calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), 0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge);
}

/* ---- small pixel chip / badge ---- */
.chip {
  --face: #fff; --fg: var(--ink); --edge: var(--ink);
  display: inline-flex; align-items: center; gap: calc(var(--px) * 2); margin: var(--px); padding: calc(var(--px) * 1.5) calc(var(--px) * 3);
  font: 400 12px/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--fg); background: var(--face);
  box-shadow: calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), 0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge);
}

/* ---- footer (same words on every option) ---- */
.site-footer { font-family: var(--font-ui); font-size: 12px; line-height: 1.6; text-align: center; padding: calc(var(--px) * 8) 16px calc(var(--px) * 10); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px calc(var(--px) * 6); margin: 14px 0; }
.site-footer a { text-decoration: none; text-transform: uppercase; letter-spacing: .05em; padding: 4px 0; border-bottom: var(--px) solid currentColor; }
.site-footer a:hover { border-bottom-style: dotted; }
.site-footer small { display: block; opacity: .75; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition: none !important; }
}