/* =========================================================
   RISO ZINE — shared design system
   Used by the landing page and (later) every lesson deck.
   Rule of thumb: small text is always ink-black. The colored
   inks are for fills, big display type, and decoration.
   ========================================================= */
@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/BricolageGrotesque.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(../fonts/SpaceMono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(../fonts/SpaceMono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(../fonts/Caveat.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  /* Ink library: close matches to real Riso drum colors */
  --ink-black: #231f20;
  --ink-pink: #ff48b0;      /* Fluorescent Pink */
  --ink-blue: #0078bf;      /* Blue */
  --ink-green: #00a95c;     /* Green */
  --ink-orange: #ff6c2f;    /* Orange */
  --ink-sunflower: #ffb511; /* Sunflower */
  --ink-purple: #765ba7;    /* Purple */
  --ink-teal: #00838a;      /* Teal */
  --ink-red: #ff665e;       /* Bright Red */
  --ink-yellow: #ffe800;    /* Yellow */
  --ink-mint: #82d8d5;      /* Mint */
  --ink-federal: #3d5588;   /* Federal Blue */
  --ink-burgundy: #914e72;  /* Burgundy */
  --ink-forest: #006b3f;    /* Deep green: a darker Green for readable type */
  --ink-medblue: #3255a4;   /* Medium Blue: darker Blue for type on pink */
  --ink-deepteal: #005f63;  /* Deep teal: darker Teal for type on red */

  --paper: #f6f1e7;
  --paper-deep: #e9e0cf;
  --rule: rgba(35, 31, 32, .22);

  /* The active two-ink pair. Lessons override these. */
  --a: var(--ink-pink);
  --b: var(--ink-blue);

  --f-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --f-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-hand: "Caveat", "Bradley Hand", cursive;

  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* speckled print grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .12 0 0 0 0 .12 0 0 0 -1.6 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-black);
  font: 400 1.0625rem/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* paper grain printed over everything (inks included) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background-image: var(--grain); opacity: .32; mix-blend-mode: multiply;
}
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ink-black); outline-offset: 3px; }
::selection { background: var(--ink-yellow); color: var(--ink-black); }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- display text ----------
   Headlines print in one solid ink (the darker ink B) so they stay easy
   to read. Riso texture lives in the art, halftones, and shadows. */
.ink { color: var(--b); }

/* ---------- halftone fills ---------- */
.halftone {
  background-image: radial-gradient(var(--hc, var(--b)) 0 var(--hr, 1.6px), transparent calc(var(--hr, 1.6px) + .5px));
  background-size: var(--hs, 6px) var(--hs, 6px);
}

/* ---------- tape, stamps ---------- */
.tape {
  position: absolute; z-index: 4; width: 104px; height: 28px; pointer-events: none;
  background: color-mix(in srgb, var(--tc, var(--ink-yellow)) 70%, transparent);
  mix-blend-mode: multiply;
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 2%, 82% 0, 88% 9%, 94% 1%, 100% 7%, 97% 50%, 100% 93%, 94% 100%, 88% 91%, 82% 100%, 18% 98%, 12% 90%, 6% 100%, 0 92%, 3% 50%);
}
.stamp {
  display: inline-block; font: 700 .8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-black); border: 3px solid currentColor; padding: .45em .65em .4em;
  rotate: -7deg; mix-blend-mode: multiply; opacity: .88;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 700 .88rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-black); background: var(--a); text-decoration: none;
  border: 2px solid var(--ink-black); padding: 1em 1.25em; cursor: pointer;
  box-shadow: 5px 5px 0 var(--b);
  transition: translate .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { translate: 2px 2px; box-shadow: 3px 3px 0 var(--b); }
.btn:active { translate: 5px 5px; box-shadow: 0 0 0 var(--b); }
.btn.ghost { background: var(--paper); box-shadow: none; }
.btn.ghost:hover { background: color-mix(in srgb, var(--a) 22%, var(--paper)); translate: none; }
.btn[aria-disabled="true"] { background: var(--paper-deep); box-shadow: none; cursor: not-allowed; translate: none; }
.btn .arrow { display: inline-block; transition: translate .2s var(--ease-pop); }
.btn:hover .arrow { translate: 4px 0; }

/* ---------- SVG illustrations (see js/riso.js) ---------- */
.riso-art { display: block; width: 100%; height: auto; overflow: visible; }
.riso-art .fa { fill: var(--a); }
.riso-art .fb { fill: var(--b); }
.riso-art .fp { fill: var(--paper); }
.riso-art .fk { fill: var(--ink-black); }
.riso-art .sa { stroke: var(--a); }
.riso-art .sb { stroke: var(--b); }
.riso-art .mx { mix-blend-mode: multiply; }
.riso-art .blink { animation: blink 1.1s steps(1) infinite; }
.riso-art .orbit { transform-box: view-box; transform-origin: 210px 215px; animation: spin 36s linear infinite; }
.riso-art .counter { transform-box: fill-box; transform-origin: center; animation: spin 36s linear infinite reverse; }
.riso-art .plug { animation: plug 2.6s ease-in-out infinite; }
.riso-art .bob { animation: bob 3.2s ease-in-out infinite; }
.riso-art .twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite alternate; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes plug { 50% { translate: 0 7px; } }
@keyframes bob { 50% { translate: 0 -6px; } }
@keyframes twinkle { from { scale: .7; rotate: -15deg; } to { scale: 1.1; rotate: 10deg; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}