/* Spooligan brand layer, shared by the home page and the docs: fonts, palette, role tokens and the receipt kit.
   Colours are the brand guide's; the dark theme, the paper grain and the motion stage tint are proposals that stay
   inside the palette. URLs are relative, so the same file works at /assets/brand/ and /docs/assets/brand/. */

/* ---------------------------------------------------------------- fonts (Latin subsets, SIL Open Font License) */
@font-face { font-family: "Alfa Slab One"; src: url(../fonts/AlfaSlabOne-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/Inter-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/JetBrainsMono-Variable.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url(../fonts/NotoSerifDisplay-MediumItalic.woff2) format("woff2"); font-style: italic; font-weight: 500; font-display: swap; }
@font-face { font-family: "Playpen Sans"; src: url(../fonts/PlaypenSans-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(../fonts/Caveat-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }

/* ---------------------------------------------------------------- palette and roles */
:root {
  /* The palette. Proportion: cream 60, green 20, charcoal 12, tan 5, red 3. */
  --sp-cream: #F7F3E7; --sp-green: #2F5D46; --sp-ink: #2B2B2B; --sp-tan: #D4A574; --sp-red: #C7463B;
  --sp-navy: #1F3A5F; --sp-gray: #E0DDD6; --sp-white: #FFFFFF;
  --sp-stage: #EFE8D8; /* the motion loops' own background, so the video's edges vanish */
  --sp-ink-soft: color-mix(in srgb, var(--sp-ink) 72%, var(--sp-cream));
  --sp-green-soft: color-mix(in srgb, var(--sp-green) 12%, var(--sp-cream));
  --sp-tan-soft: color-mix(in srgb, var(--sp-tan) 28%, var(--sp-cream));
  /* the older names, kept for the docs */
  --receipt-cream: var(--sp-cream); --office-green: var(--sp-green); --navy: var(--sp-navy); --golden-tan: var(--sp-tan);
  --warm-red: var(--sp-red); --paper-gray: var(--sp-gray); --ink-charcoal: var(--sp-ink); --white: var(--sp-white);
  --brand-tagline: "Your Personal Paper Pusher.";

  --font-display: "Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-tag: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --font-hand: "Playpen Sans", "Comic Sans MS", system-ui, sans-serif;
  --font-note: "Caveat", "Bradley Hand", cursive;
  --tear: 10px; --mm: 4px; --ease-print: steps(14, end);

  /* roles */
  --bg: var(--sp-cream); --bg-2: var(--sp-stage); --panel: var(--sp-white); --paper: var(--sp-white); --receipt: var(--sp-white);
  --line: var(--sp-gray); --line-2: color-mix(in srgb, var(--sp-ink) 22%, var(--sp-cream));
  --ink: var(--sp-ink); --muted: var(--sp-ink-soft); --heading: var(--sp-green);
  --accent: var(--sp-green); --accent-2: #3F7A5D; --accent-soft: var(--sp-green-soft);
  --hi: var(--sp-red); --tan: var(--sp-tan); --link: var(--sp-navy); --enum: var(--sp-navy);
  --code-bg: var(--sp-ink); --code-ink: var(--sp-cream);
  --shadow: 0 1px 0 rgba(43, 43, 43, .10), 0 8px 14px -4px rgba(43, 43, 43, .12);
  --radius: 6px;
  --font: var(--font-sans); --serif: var(--font-display); --mono: var(--font-mono);
  color-scheme: light;
}
/* Dark theme (a proposal: the guide has none). Charcoal ground, cream text, tan for headings and links, and the
   colour logo on a cream plate instead of a recoloured one. */
:root[data-theme="dark"] {
  --bg: var(--sp-ink); --bg-2: #262626; --panel: #343434; --paper: var(--sp-cream); --receipt: var(--sp-cream);
  --line: #444; --line-2: #555; --ink: var(--sp-cream); --muted: color-mix(in srgb, var(--sp-cream) 70%, var(--sp-ink));
  --heading: var(--sp-tan); --accent: var(--sp-tan); --accent-2: #E2BD94; --accent-soft: color-mix(in srgb, var(--sp-tan) 16%, var(--sp-ink));
  --hi: #E0766B; --link: var(--sp-tan); --enum: #E2BD94; --code-bg: #1F1F1F; --code-ink: var(--sp-cream);
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 22px -8px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- type */
html { font-synthesis-weight: none; } /* Alfa Slab One has one weight: never fake a bold */
.sp-kicker { font: 700 .78rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem; }
.sp-kicker b { color: var(--hi); font-weight: 700; }
.sp-tagline { font: italic 500 clamp(1.6rem, 1.05rem + 2.1vw, 2.6rem)/1.12 var(--font-tag); color: var(--ink); letter-spacing: -.005em; margin: 0; }
.sp-hand { font: 500 1.0625rem/1.4 var(--font-hand); color: var(--ink); }
.sp-note { font: 600 1.6rem/1 var(--font-note); color: var(--sp-red); transform: rotate(-5deg); display: inline-block; } /* margin notes only */
:root[data-theme="dark"] .sp-note { color: #E0766B; }
::selection { background: var(--sp-tan-soft); color: var(--sp-ink); }

/* ---------------------------------------------------------------- receipt paper */
.sp-receipt { position: relative; background: var(--receipt); color: var(--sp-ink); padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 32px) calc(clamp(20px, 3vw, 34px) + var(--tear));
  filter: drop-shadow(0 1px 0 rgba(43, 43, 43, .10)) drop-shadow(0 8px 14px rgba(43, 43, 43, .08)); }
.sp-receipt.sp-tear-y { padding-top: calc(clamp(20px, 3vw, 34px) + var(--tear)); }
.sp-tear-b { -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - var(--tear)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/calc(var(--tear) * 2) var(--tear) repeat-x;
  mask: linear-gradient(#000 0 0) top/100% calc(100% - var(--tear)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/calc(var(--tear) * 2) var(--tear) repeat-x; }
.sp-tear-t { -webkit-mask: linear-gradient(#000 0 0) bottom/100% calc(100% - var(--tear)) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/calc(var(--tear) * 2) var(--tear) repeat-x;
  mask: linear-gradient(#000 0 0) bottom/100% calc(100% - var(--tear)) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/calc(var(--tear) * 2) var(--tear) repeat-x; }
.sp-tear-y { -webkit-mask: linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--tear)) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/calc(var(--tear) * 2) var(--tear) repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/calc(var(--tear) * 2) var(--tear) repeat-x;
  mask: linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--tear)) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/calc(var(--tear) * 2) var(--tear) repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/calc(var(--tear) * 2) var(--tear) repeat-x; }
/* the guide's Paper Gray tear strip, as a section divider */
.sp-tearline { height: var(--tear); background: linear-gradient(-45deg, var(--line) var(--tear), transparent 0) 0 0/calc(var(--tear) * 2) calc(var(--tear) * 2) repeat-x, linear-gradient(45deg, var(--line) var(--tear), transparent 0) 0 0/calc(var(--tear) * 2) calc(var(--tear) * 2) repeat-x; }
/* a dotted thermal rule, and mono line items with dot leaders */
.sp-rule { border: 0; height: 2px; margin: 1.1em 0; color: var(--sp-ink); opacity: .55; background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 50%/7px 2px repeat-x; }
.sp-line { display: flex; gap: .5ch; align-items: baseline; font: 400 .9375rem/1.7 var(--font-mono); margin: 0; }
.sp-line > :first-child, .sp-line > :last-child { flex: none; }
.sp-line .sp-dots { flex: 1; min-width: 2ch; border-bottom: 2px dotted color-mix(in srgb, var(--sp-ink) 40%, transparent); transform: translateY(-.3em); }
.sp-slip-head { text-align: center; font: 700 .8125rem/1.5 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
/* paper grain (a proposal): a CSS noise texture, multiplied over the section's own colour */
.sp-grain { position: relative; isolation: isolate; }
.sp-grain::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .17 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .sp-grain::before { mix-blend-mode: screen; opacity: .12; }

/* ---------------------------------------------------------------- buttons: ticket stubs */
.sp-btn { --b: var(--sp-green); --t: var(--sp-cream); --e: var(--sp-ink);
  display: inline-flex; align-items: stretch; min-height: 52px; border: 2px solid var(--e); border-radius: var(--radius); box-sizing: border-box;
  background: var(--b); color: var(--t); text-decoration: none; cursor: pointer; font: 700 1.0625rem/1.1 var(--font-sans); letter-spacing: -.005em;
  box-shadow: 0 4px 0 var(--e); transition: transform .12s ease, box-shadow .12s ease; }
.sp-btn > span { display: inline-flex; align-items: center; gap: .5em; padding: 0 1.2em; }
.sp-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sp-btn .sp-stub { font: 700 .78rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 0 calc(.9em + 4px) 0 .9em;
  background: radial-gradient(circle, var(--e) 2.2px, transparent 2.6px) right center/4px 9px repeat-y; }
.sp-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--e); color: var(--t); }
.sp-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--e); }
.sp-btn--paper { --b: var(--sp-white); --t: var(--sp-ink); }
.sp-btn--paper .sp-stub { color: var(--sp-green); }
.sp-btn--sm { min-height: 40px; font-size: .95rem; box-shadow: 0 3px 0 var(--e); }
.sp-btn--sm > span { padding: 0 .9em; }
:root[data-theme="dark"] .sp-btn { --e: #141414; }
:root[data-theme="dark"] .sp-btn--paper { --b: var(--sp-cream); }

/* ---------------------------------------------------------------- motion */
.sp-stage { position: relative; background: var(--sp-stage); border-radius: 24px; overflow: hidden; }
.sp-stage video, .sp-stage img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.sp-stage.sp-tear-b { border-radius: 28px 28px 0 0; }
/* print-in: a receipt feeds out of the printer when it scrolls in (script adds .is-printed; without it, all shows) */
.js .sp-print { clip-path: inset(0 0 100% 0); transform: translateY(-6px); }
.js .sp-print.is-printed { animation: sp-print 900ms var(--ease-print) forwards; }
@keyframes sp-print { to { clip-path: inset(0 0 0 0); transform: none; } }
.js .sp-tick { stroke-dasharray: 30; stroke-dashoffset: 30; }
.js .is-printed .sp-tick { animation: sp-tick 320ms ease-out forwards; animation-delay: calc(700ms + var(--i, 0) * 180ms); }
@keyframes sp-tick { to { stroke-dashoffset: 0; } }
.sp-lift { transition: transform .18s ease, filter .18s ease; }
@media (hover: hover) { .sp-lift:hover { transform: translateY(-4px) rotate(0deg) !important; } }

/* ---------------------------------------------------------------- the logo on dark */
:root[data-theme="dark"] .sp-logo-plate { background: var(--sp-cream); border-radius: 10px; padding: 6px 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .sp-print { clip-path: none; transform: none; }
  .js .sp-tick { stroke-dashoffset: 0; }
  .sp-btn:hover, .sp-lift:hover { transform: none !important; }
}