/* atrament.us shared layer — tokens, fonts, and a small opt-in component kit.
   Every page links this first, then its own stylesheet. Keep it small: this is
   a toolkit, not a theme. Rationale lives in docs/STYLE_GUIDE.md. */

/* ---------- fonts (self-hosted, see fonts/LICENSES.txt) ---------- */
@font-face { font-family: 'Origami Mommy'; src: url('../fonts/origami-mommy.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Pixel Square'; src: url('../fonts/pixel-square.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Pixel Operator'; src: url('../fonts/PixelOperator.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pixel Operator'; src: url('../fonts/PixelOperator-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Pixel Operator Mono'; src: url('../fonts/PixelOperatorMono.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Pixel Operator 8'; src: url('../fonts/PixelOperator8.ttf') format('truetype'); font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* set "petal": the Closet's warm pastel family (loud end) */
  --petal-bg: #ffe5d9;
  --petal-panel: #fff6f0;
  --petal-panel-2: #ffcad4;
  --petal-accent: #f4acb7;
  --petal-line: #9d8189;
  --petal-gold: #f0b884;
  --petal-sage: #8fae9c;
  --petal-text: #4a3639;
  --petal-text-dim: #6e575b;
  --petal-ink: #2e2124;
  --petal-dark: #3f1219;
  --petal-dark-2: #5c1f28;
  --petal-checker: #efd7da;

  /* set "hub": the Neocities blog pages (calm end) */
  --hub-card: #ffffff;
  --hub-text: #000000;
  --hub-link: #000000;
  --hub-link-hover: #888888;
  --hub-radius: 20px;
  --hub-shadow: 2px 2px 5px #ccc;
  --hub-font: Tahoma, sans-serif;

  /* set "meadow": starting proposal for Pets (cartoony outdoors, child's
     digital drawing). Refine in Phase 5 against real pet art. */
  --meadow-sky: #a7dcff;
  --meadow-grass: #8fd16a;
  --meadow-grass-2: #5fae45;
  --meadow-sun: #ffd94a;
  --meadow-dirt: #b47a4c;
  --meadow-cloud: #fffdf5;
  --meadow-ink: #2b2a33;

  /* fonts */
  --font-display: 'Origami Mommy', 'Comic Sans MS', sans-serif;
  --font-body-pixel: 'Pixel Square', 'Comic Sans MS', sans-serif;
  --font-label: 'Pixel Operator', sans-serif;
  --font-meta: 'Pixel Operator Mono', ui-monospace, monospace;
  --font-bitmap: 'Pixel Operator 8', ui-monospace, monospace;
}

/* ---------- components (all opt-in by class) ---------- */

/* Window: bordered panel with a title bar and typed-in ─ ▢ ✕ glyphs. */
.window {
  border: 2px solid var(--petal-ink);
  background: var(--petal-panel);
  color: var(--petal-text);
  box-shadow: 3px 3px 0 var(--petal-line);
  border-radius: 6px;
  overflow: hidden;
}
.window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  background: var(--petal-accent);
  color: var(--petal-ink);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  border-bottom: 2px solid var(--petal-ink);
}
.window-title .wc { font-family: var(--font-meta); font-weight: 400; opacity: .8; user-select: none; }
.window-body { padding: 12px 14px; }
.window.dark { background: var(--petal-dark); color: #fff1f0; border-color: var(--petal-ink); }
.window.dark .window-title { background: var(--petal-dark-2); color: #fff1f0; }

/* Checker strip: the 11px hard ribbon from the Closet. */
.checker-strip {
  height: 11px;
  width: 100%;
  background-color: var(--petal-gold);
  background-image:
    linear-gradient(45deg, var(--petal-ink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--petal-ink) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--petal-ink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--petal-ink) 75%);
  background-size: 11px 11px;
  background-position: 0 0, 0 5.5px, 5.5px -5.5px, -5.5px 0;
}

/* Divider: a centered decorative image at natural size or smaller. */
.divider { display: block; text-align: center; margin: 18px auto; line-height: 0; }
.divider img { max-width: 100%; height: auto; display: inline-block; }

/* Blinkie strip: 150x20 badges, never stretched. */
.blinkie-strip { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; }
.blinkie-strip img { display: block; height: 20px; width: auto; image-rendering: pixelated; }

/* Stamp shelf: ~99x56 stamps with an inset border. */
.stamp-shelf { display: flex; flex-wrap: wrap; gap: 6px; }
.stamp-shelf img { display: block; width: 99px; height: auto; border: 1px solid rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px #fff; }

/* Pixel icon: 16-28px pixel gifs beside links and list items. */
.pixel-icon { image-rendering: pixelated; vertical-align: middle; margin-right: .35em; }
.pixel-icon.x2 { width: 32px; height: 32px; }

/* Hanging charm: pinned to a side rail or card corner, one per page. */
.charm { position: absolute; top: 0; pointer-events: none; }
.charm.left { left: 8px; }
.charm.right { right: 8px; }

/* Back link used by Study, Read, Closet, Pets. */
.site-nav-back {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  opacity: .85;
}
.site-nav-back:hover { opacity: 1; text-decoration: underline; }
.site-nav-back::before { content: "\2039 "; }

/* Pixel star: literal bitmap glyph, twinkles unless motion is reduced. */
.pixel-star { display: inline-block; font-family: var(--font-bitmap); color: var(--petal-gold); animation: twinkle 1.6s ease-in-out infinite; }
.pixel-star::before { content: "\2605"; }
.pixel-star.pink { color: var(--petal-accent); animation-delay: .3s; }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .pixel-star { animation: none; } }