/* Adrenalin Adventure: shared foundation (tokens, type, print-world components).
   Used by index.html and marke/index.html. Page-specific layout lives in page.css / marke.css. */

@font-face { font-family: "Protest Riot"; src: url("fonts/ProtestRiot-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Protest Strike"; src: url("fonts/ProtestStrike-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Inks. Pink and acid are fixed brand inks; paper/ink swap for the night edition. */
  --pink: #FF1F8F;
  --acid: #B4FF1E;
  --press: #111111;      /* fixed press black, for text on pink/acid */
  --newsprint: #F6F5F1;  /* fixed paper white, for text on black */

  --paper: #F6F5F1;
  --paper-2: #EAE9E3;
  --ink: #111111;
  --ink-2: #34342F;
  --ink-3: #5A5A55;
  --pink-text: #C8006A;  /* pink for small text on paper (AA, incl. grain) */
  --rule: #111111;
  --grain-opacity: .07;

  --f-marker: "Protest Riot", "Arial Narrow", sans-serif;
  --f-strike: "Protest Strike", "Arial Narrow", sans-serif;
  --f-type: "Courier Prime", "Courier New", monospace;

  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --t-2xl: clamp(2.1rem, 1.3rem + 3vw, 3.75rem);
  --t-3xl: clamp(2.7rem, 1.4rem + 5.2vw, 5.75rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 68px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-slap: cubic-bezier(.12, .9, .16, 1);

  color-scheme: light;
}

/* Night edition: follows the system unless the visitor picked an edition. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-tape: var(--acid); --lg-tapetext: var(--press);
    --paper: #121211; --paper-2: #1D1D1B; --ink: #F3F2EC; --ink-2: #D2D1CA; --ink-3: #A9A8A1;
    --pink-text: #FF5CAB; --rule: #F3F2EC; --grain-opacity: .09; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --lg-tape: var(--acid); --lg-tapetext: var(--press);
  --paper: #121211; --paper-2: #1D1D1B; --ink: #F3F2EC; --ink-2: #D2D1CA; --ink-3: #A9A8A1;
  --pink-text: #FF5CAB; --rule: #F3F2EC; --grain-opacity: .09; color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-type);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--pink);
  scrollbar-color: var(--ink) var(--paper);
  overflow-x: clip;
}
/* Newsprint grain: one fixed layer, never on scrolling containers */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] body::after { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; } }

[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
::selection { background: var(--acid); color: var(--press); }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: var(--pink); }
a:hover { text-decoration-color: currentColor; }

/* Focus colour follows the surface: sections override --focus / --focus-strong */
:focus-visible { outline: 3px solid var(--focus, var(--pink-text)); outline-offset: 3px; }
.btn:focus-visible, .chip:focus-visible { outline-color: var(--focus-strong, var(--ink)); }

a, button, input, select, textarea, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--acid); color: var(--press); padding: var(--s-3) var(--s-4);
  font-family: var(--f-strike); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }

.icon { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

/* ---------- Type ---------- */
.marker { font-family: var(--f-marker); font-weight: 400; line-height: .95; letter-spacing: -.005em; }
.strike { font-family: var(--f-strike); font-weight: 400; letter-spacing: .04em; }
.caps { text-transform: uppercase; }
.typed { font-family: var(--f-type); }

.h-cover { font-family: var(--f-marker); font-size: var(--t-3xl); line-height: .92; text-transform: uppercase; }
.h-section { font-family: var(--f-marker); font-size: var(--t-2xl); line-height: .95; text-transform: uppercase; }
.h-sub { font-family: var(--f-marker); font-size: var(--t-xl); line-height: 1; text-transform: uppercase; }
.lede { font-size: var(--t-lg); line-height: 1.5; max-width: 52ch; color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.muted { color: var(--ink-3); }

/* Misregistered plates: pink and acid slip out from under the black plate */
.misprint {
  text-shadow: -.035em -.025em 0 var(--acid), .045em .03em 0 var(--pink);
}

/* Highlighter marker */
.hl {
  color: var(--press);
  background: linear-gradient(100deg, transparent .15em, var(--acid) .15em, var(--acid) calc(100% - .1em), transparent calc(100% - .1em)) 0 55% / 100% 78% no-repeat;
  padding-inline: .18em;
  margin-inline: -.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl--pink { background-image: linear-gradient(100deg, transparent .15em, var(--pink) .15em, var(--pink) calc(100% - .1em), transparent calc(100% - .1em)); }

/* Brush swoosh under a word (colour via background, shape via mask) */
.swoosh { position: relative; display: inline-block; z-index: 0; }
.swoosh::before {
  content: "";
  position: absolute; z-index: -1;
  left: -.12em; right: -.2em; bottom: -.05em; height: .42em;
  background: var(--pink);
  -webkit-mask: url("img/grafik/swoosh-kurz.svg") center / 100% 100% no-repeat;
  mask: url("img/grafik/swoosh-kurz.svg") center / 100% 100% no-repeat;
}

/* ---------- Buttons: two plates, the black one offset like a misprint ---------- */
.btn {
  --plate: var(--press);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px;
  padding: .7em 1.35em .62em;
  border: 2px solid var(--press);
  border-radius: 0;
  background: var(--pink);
  color: var(--press);
  font-family: var(--f-strike);
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 5px 5px 0 0 var(--plate);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s;
}
:root[data-theme="dark"] .btn { --plate: var(--acid); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { --plate: var(--acid); } }
@media (hover: hover) {
  .btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 0 var(--plate); }
  .btn:hover .icon--arrow { transform: translateX(3px); }
}
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 0 var(--plate); }
.btn .icon { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease-out); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: 5px 5px 0 0 var(--plate); }

.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
  box-shadow: none;
}
@media (hover: hover) {
  .btn--ghost:hover { background: var(--acid); color: var(--press); border-color: var(--press); transform: none; box-shadow: none; }
}
.btn--ghost:active { transform: translate(2px, 2px); box-shadow: none; }
.btn--small { min-height: 44px; font-size: .9375rem; padding: .6em 1em .52em; box-shadow: 4px 4px 0 0 var(--plate); }
.btn--ghost.btn--small { box-shadow: none; }

/* ---------- Stickers, tape, burst ---------- */
.sticker {
  display: inline-block;
  padding: .42em .7em .34em;
  font-family: var(--f-strike);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.02;
  background: var(--pink);
  color: var(--press);
  transform: rotate(var(--tilt, -4deg));
}
.sticker--acid { background: var(--acid); color: var(--press); }
.sticker--ink { background: var(--ink); color: var(--paper); }
.sticker--paper { background: var(--paper); color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px; }

.tape {
  display: inline-block;
  padding: .3em 1em .24em;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-strike);
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-mask: url("img/grafik/tape.svg") center / 100% 100% no-repeat;
  mask: url("img/grafik/tape.svg") center / 100% 100% no-repeat;
  transform: rotate(var(--tilt, -3deg));
}
.tape--acid { background: var(--acid); color: var(--press); }
.tape--pink { background: var(--pink); color: var(--press); }

.burst {
  display: grid; place-items: center; text-align: center;
  width: var(--size, 9.5rem); aspect-ratio: 1;
  background: var(--acid); color: var(--press);
  font-family: var(--f-strike); text-transform: uppercase; line-height: 1;
  -webkit-mask: url("img/grafik/burst.svg") center / contain no-repeat;
  mask: url("img/grafik/burst.svg") center / contain no-repeat;
  transform: rotate(var(--tilt, 8deg));
}

/* Dietary tags on clippings */
.tag {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .2em .5em .14em;
  font-family: var(--f-strike); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid currentColor;
}
.tag--vegan { background: var(--acid); color: var(--press); border-color: var(--press); }

/* Motion: stickers slap on once when they enter */
@media (prefers-reduced-motion: no-preference) {
  .js [data-slap] { opacity: 0; transform: rotate(var(--tilt, -4deg)) scale(1.35); }
  .js [data-slap].is-in {
    opacity: 1; transform: rotate(var(--tilt, -4deg)) scale(1);
    transition: transform .42s var(--ease-slap) var(--delay, 0s), opacity .12s linear var(--delay, 0s);
  }
}

/* ---------- Inline logos (from _assets/tools/out, fills as classes) ---------- */
.logo svg { width: 100%; height: auto; overflow: visible; }
.lg-ink { fill: var(--ink); }
.lg-paper { fill: var(--paper); }
.lg-pink { fill: var(--pink); }
.lg-acid { fill: var(--acid); }
.lg-ink-s { stroke: var(--ink); }
.lg-paper-s { stroke: var(--paper); }
.lg-pink-s { stroke: var(--pink); }
.lg-acid-s { stroke: var(--acid); }