/* ============================================================
   СРАЗИМСЯ 5х5 — shared street/zine stylesheet
   Black ink · concrete paper · scooter red · acid green
   ============================================================ */

:root{
  --ink:#0E0E0E;
  --ink-2:#1B1A17;
  --paper:#E9E3D6;
  --paper-2:#D8D0BE;
  --paper-3:#C7BDA6;
  --red:#E5241B;
  --red-dk:#B01209;
  --acid:#C8FF2E;
  --acid-dk:#9ED400;
  --blue:#2660FF;
  --muted:#6B6555;

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-red: 6px 6px 0 var(--red);

  --fz-display: clamp(56px, 11vw, 190px);
  --maxw: 1240px;

  --ff-display:'Oswald', 'Arial Narrow', sans-serif;
  --ff-mark:'Caveat', cursive;
  --ff-body:'Rubik', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* paper grain + halftone over the page */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.55;
}

a{color:inherit}
img{max-width:100%;display:block}

/* ---------- type ---------- */
.display{
  font-family:var(--ff-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.01em;
  margin:0;
}
.mark{ font-family:var(--ff-mark); font-weight:700; line-height:1; }
.kicker{
  font-family:var(--ff-display);
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.28em;
  font-size:13px;
}
.outline-text{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
}
.hl{ background:var(--acid); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hl-red{ background:var(--red); color:var(--paper); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; position:relative; z-index:1; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  font-family:var(--ff-display);
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.04em;
  font-size:19px;
  display:inline-flex;align-items:center;gap:.6ch;
  background:var(--bg); color:var(--fg);
  border:3px solid var(--ink);
  padding:15px 30px;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-hard-sm);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.btn--red{ --bg:var(--red); --fg:var(--paper); }
.btn--acid{ --bg:var(--acid); --fg:var(--ink); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); box-shadow:none; }

/* ---------- tags / chips ---------- */
.tag{
  font-family:var(--ff-display);
  text-transform:uppercase;
  font-weight:600;letter-spacing:.06em;
  font-size:13px;
  border:2px solid var(--ink);
  padding:5px 11px;
  display:inline-flex;align-items:center;gap:.5ch;
  background:var(--paper);
  white-space:nowrap;
  flex:0 0 auto;
}
.tag--red{ background:var(--red); color:var(--paper); border-color:var(--ink); }
.tag--acid{ background:var(--acid); }
.tag--ink{ background:var(--ink); color:var(--paper); }

/* ---------- cards ---------- */
.card{
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  position:relative;
}
.tape{
  position:absolute;width:104px;height:30px;
  background:rgba(200,255,46,.55);
  border:1px dashed rgba(14,14,14,.4);
  box-shadow:0 1px 6px rgba(0,0,0,.18);
  left:50%;top:-15px;transform:translateX(-50%) rotate(-3deg);
  z-index:3;mix-blend-mode:multiply;
}
.tape--red{ background:rgba(229,36,27,.4); }
.tape--l{ left:18px;transform:rotate(-7deg); }
.tape--r{ left:auto;right:18px;transform:rotate(6deg); }

/* big stencil number */
.stencil{
  font-family:var(--ff-display);font-weight:700;
  -webkit-text-stroke:2px var(--ink);color:transparent;
  line-height:.8;
}

/* spray underline */
.spray{
  background-image:linear-gradient(var(--red),var(--red));
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:100% .28em;
}

/* divider strip */
.ticker{
  background:var(--ink);color:var(--paper);
  font-family:var(--ff-display);text-transform:uppercase;
  letter-spacing:.18em;font-weight:600;font-size:15px;
  padding:11px 0;overflow:hidden;white-space:nowrap;border-block:3px solid var(--ink);
}
.ticker__row{ display:inline-flex;gap:30px;animation:slidex 26s linear infinite; }
.ticker__row .sponsors{ display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px; }
.ticker__row span{ display:inline-flex;gap:30px;align-items:center; }
@keyframes slidex{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- forms ---------- */
.field{ margin-bottom:22px; }
.field label{
  display:block;font-family:var(--ff-display);text-transform:uppercase;
  font-weight:600;letter-spacing:.04em;font-size:15px;margin-bottom:7px;
}
.field .req{ color:var(--red); }
.input, textarea.input, select.input{
  width:100%;font-family:var(--ff-body);font-size:16px;
  background:var(--paper);
  border:3px solid var(--ink);
  padding:13px 15px;color:var(--ink);
  box-shadow:inset 2px 2px 0 rgba(14,14,14,.06);
}
.input::placeholder{ color:var(--muted); }
.input:focus{ outline:none;border-color:var(--red);box-shadow:3px 3px 0 var(--red); }
select.input{ appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 12px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat; }

.choice-row{ display:flex;flex-wrap:wrap;gap:9px; }
.choice{
  font-family:var(--ff-display);text-transform:uppercase;font-weight:600;
  letter-spacing:.03em;font-size:15px;
  border:3px solid var(--ink);padding:10px 16px;cursor:pointer;background:var(--paper);
  user-select:none;transition:transform .06s ease;
}
.choice:hover{ transform:translate(-1px,-1px); }
.choice input{ display:none; }
.choice.is-on{ background:var(--acid); box-shadow:var(--shadow-hard-sm); }

/* ---------- utility ---------- */
.grid{ display:grid;gap:22px; }
.flex{ display:flex; }
.between{ display:flex;justify-content:space-between;align-items:center; }
.center{ text-align:center; }
.rotate-l{ transform:rotate(-2deg); }
.rotate-r{ transform:rotate(2deg); }
.nowrap{ white-space:nowrap; }

/* scrollbar */
::-webkit-scrollbar{ width:12px;height:12px; }
::-webkit-scrollbar-thumb{ background:var(--ink); }
::-webkit-scrollbar-track{ background:var(--paper-2); }