@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&family=Caveat:wght@700&display=swap");
/* Общий словарь «гранж-плаката» для всех макетов */
:root {
  --ink: #141414; --paper: #efebe3; --sheet: #faf8f3; --y: #f2b705; --mute: #66625a; --line: #d3cdc0;
  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --hand: "Caveat", cursive;
  --brush-black: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><filter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'><feTurbulence type='fractalNoise' baseFrequency='.035 .6' numOctaves='3' seed='4'/><feDisplacementMap in='SourceGraphic' scale='14'/></filter><rect x='10' y='9' width='380' height='42' fill='%23141414' filter='url(%23r)'/></svg>");
  --brush-yellow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><filter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'><feTurbulence type='fractalNoise' baseFrequency='.03 .7' numOctaves='3' seed='9'/><feDisplacementMap in='SourceGraphic' scale='16'/></filter><rect x='10' y='12' width='380' height='36' fill='%23f2b705' filter='url(%23r)'/></svg>");
  --brush-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><filter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'><feTurbulence type='fractalNoise' baseFrequency='.035 .6' numOctaves='3' seed='2'/><feDisplacementMap in='SourceGraphic' scale='14'/></filter><rect x='10' y='9' width='380' height='42' fill='%23efebe3' filter='url(%23r)'/></svg>");
  --splat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='7'/><feDisplacementMap in='SourceGraphic' scale='60'/></filter><circle cx='100' cy='100' r='52' fill='%23141414' filter='url(%23s)'/><g fill='%23141414'><circle cx='30' cy='40' r='4'/><circle cx='170' cy='30' r='3'/><circle cx='180' cy='150' r='5'/><circle cx='25' cy='160' r='3'/><circle cx='150' cy='185' r='2.5'/><circle cx='60' cy='12' r='2'/></g></svg>");
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .14  0 0 0 .22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --tear: polygon(0 4px, 8% 0, 19% 4px, 33% 1px, 47% 5px, 61% 0, 76% 4px, 89% 1px, 100% 4px, calc(100% - 3px) 35%, 100% 70%, calc(100% - 4px) 100%, 84% calc(100% - 4px), 68% 100%, 52% calc(100% - 5px), 37% 100%, 21% calc(100% - 3px), 6% 100%, 0 calc(100% - 4px), 3px 50%);
}
* { box-sizing: border-box; margin: 0; }
body { font: 400 16px/1.5 "Roboto", system-ui, sans-serif; color: var(--ink); background: var(--paper) var(--noise); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.display { font-family: var(--display); text-transform: uppercase; line-height: .9; font-weight: 700; }
.hand { font-family: var(--hand); font-weight: 700; }
.label { font: 500 .78rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .14em; }
.y { color: var(--y); }
.brush { display: inline-block; padding: .4em 1.3em .4em 1em; background: var(--brush-black) center/100% 100% no-repeat; color: #fff; font: 600 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; }
.brush.y-text { color: var(--y); }
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::after { content: ""; position: absolute; z-index: -1; left: -.1em; right: -.1em; bottom: -.05em; height: .5em; background: var(--brush-yellow) center/100% 100% no-repeat; transform: rotate(-1.5deg); }
.sheet { position: relative; isolation: isolate; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg, var(--sheet)); clip-path: var(--tear); }
.sheet.dark { --bg: var(--ink); color: #fff; }
.tape::after { content: ""; position: absolute; top: -10px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: var(--tape, rgba(242,183,5,.88)); transform: rotate(var(--tr, -4deg)); clip-path: polygon(0 6%, 3% 0, 97% 0, 100% 9%, 97% 22%, 100% 37%, 96% 52%, 100% 68%, 97% 84%, 100% 100%, 3% 100%, 0 90%, 3% 74%, 0 58%, 4% 42%, 0 27%, 3% 14%); }
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.6rem; background: var(--ink); color: #fff; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--y); font: 600 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; }
.btn.alt { background: transparent; color: var(--ink); box-shadow: none; }
.btn.yel { background: var(--y); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.halftone { position: absolute; pointer-events: none; background: radial-gradient(var(--ink) 30%, transparent 33%) 0 0/9px 9px; opacity: .22; }
.logo { display: inline-flex; align-items: center; gap: .75rem; }
.logo b { display: grid; place-items: center; width: 44px; height: 44px; font: 700 1.1rem/1 var(--display);
  --c: currentColor; background: linear-gradient(var(--c),var(--c)) 0 0/11px 3px, linear-gradient(var(--c),var(--c)) 0 0/3px 11px, linear-gradient(var(--c),var(--c)) 100% 0/11px 3px, linear-gradient(var(--c),var(--c)) 100% 0/3px 11px, linear-gradient(var(--c),var(--c)) 0 100%/11px 3px, linear-gradient(var(--c),var(--c)) 0 100%/3px 11px, linear-gradient(var(--c),var(--c)) 100% 100%/11px 3px, linear-gradient(var(--c),var(--c)) 100% 100%/3px 11px; background-repeat: no-repeat; }
.logo .mark { width: 50px; height: auto; flex: none; }
.logo span { font: 600 1.65rem/1 var(--display); letter-spacing: .03em; }
.logo small { border-left: 2px solid currentColor; padding-left: .75rem; font: 500 .62rem/1.25 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.ico { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: "Roboto Mono", monospace; }
/* мини-«скриншот» сгенерированного сайта */
.site { background: #fff; border: 2px solid var(--ink); overflow: hidden; }
.site i { display: block; height: 18px; border-bottom: 2px solid var(--ink); background: radial-gradient(circle, var(--ink) 2.5px, transparent 3px) 6px 50%/12px 12px repeat-x; background-size: 12px 12px; background-repeat: no-repeat, no-repeat; }
.site .bar { height: 18px; border-bottom: 2px solid var(--ink); display: flex; gap: 4px; align-items: center; padding: 0 6px; }
.site .bar u { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.site .hero { height: 46%; background: var(--c1, #c9d6c3); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; gap: 5px; }
.site .hero s { display: block; height: 7px; background: var(--ink); width: 70%; text-decoration: none; }
.site .hero s + s { width: 45%; height: 5px; opacity: .55; }
.site .rows { padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.site .rows em { display: block; height: 34px; background: var(--c2, #eee); }
.foot { background: var(--ink); color: #fff; }