@import url("https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@1&family=Permanent+Marker&family=Special+Elite&display=swap");
/* Warren & Wing split hero: Warren skin (punk / underground). The script builds this skin as a copy of the Wing markup. */
:root {
  --ww-poster: "Anton", Impact, "Arial Narrow", sans-serif;
  --ww-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --ww-marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --ww-type: "Special Elite", "Courier New", Courier, monospace;
  --ww-serif-italic: "Instrument Serif", Georgia, serif;
}
.ww-skin-warren{background:var(--ww-wa-bg);color:var(--ww-wa-fg);font-family:var(--ww-mono);font-size:16px;line-height:1.55}
.ww-skin-warren::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");content:"";inset:0;mix-blend-mode:screen;opacity:.16;pointer-events:none;position:absolute;z-index:2}
.ww-skin-warren .ww-brand{background:var(--ww-wa-amber);color:var(--ww-wa-bg);font-family:var(--ww-poster);font-size:20px;letter-spacing:.06em;padding:4px 12px 2px 8px;text-transform:uppercase;transform:rotate(-2deg)}
.ww-skin-warren .ww-links{gap:8px}
.ww-skin-warren .ww-links a{background:var(--ww-wa-rust);border-radius:2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);color:var(--ww-wa-paper);font-size:12px;letter-spacing:.22em;padding:14px 10px;text-transform:uppercase}
.ww-skin-warren .ww-links li:nth-child(odd) a{transform:rotate(-2deg)}
.ww-skin-warren .ww-links li:nth-child(even) a{transform:rotate(1.5deg)}
.ww-skin-warren .ww-ventures a{color:var(--ww-wa-fg);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ww-skin-warren .ww-ventures a::before{color:var(--ww-wa-scrawl);content:"/ "}
.ww-skin-warren .ww-kicker{background:var(--ww-wa-tape);clip-path:polygon(0 10%,5% 0,95% 8%,100% 0,98% 90%,100% 100%,3% 92%,0 100%);color:var(--ww-wa-bg);font-family:var(--ww-type);font-size:15px;letter-spacing:.14em;padding:5px 16px 3px;text-transform:uppercase}
.ww-skin-warren .ww-copy-left .ww-kicker{align-self:flex-start;transform:rotate(-3deg)}
.ww-skin-warren .ww-copy-right .ww-kicker{align-self:flex-end;transform:rotate(2deg)}
.ww-skin-warren h2{color:var(--ww-wa-fg);display:flex;flex-wrap:wrap;font-family:var(--ww-poster);font-size:clamp(40px,4.5vw,64px);font-weight:400;gap:8px .12em;letter-spacing:normal;line-height:1;text-transform:none}
.ww-skin-warren .ww-copy-right h2{justify-content:flex-end}
.ww-skin-warren .ww-word{display:inline-flex;gap:3px;white-space:nowrap}
.ww-skin-warren .ww-gap{display:inline-block;white-space:pre;width:.18em}
.ww-skin-warren .ww-rn{display:inline-block;padding:.08em .12em .02em}
.ww-skin-warren .ww-rn-a{background:var(--ww-wa-paper);color:var(--ww-wa-bg);font-family:var(--ww-poster)}
.ww-skin-warren .ww-rn-b{background:var(--ww-wa-scrawl);color:var(--ww-wa-bg);font-family:var(--ww-poster)}
.ww-skin-warren .ww-rn-c{border:3px solid var(--ww-wa-paper);color:var(--ww-wa-paper);font-family:var(--ww-type)}
.ww-skin-warren .ww-rn-d{background:var(--ww-wa-amber);color:var(--ww-wa-bg);font-family:var(--ww-serif-italic);font-style:italic}
.ww-skin-warren .ww-rn-e{color:var(--ww-wa-paper);font-family:var(--ww-marker)}
.ww-skin-warren .ww-copy p{background:var(--ww-wa-paper);box-shadow:6px 6px 0 var(--ww-wa-rust);color:var(--ww-wa-bg);font-family:var(--ww-type);font-size:14px;letter-spacing:.01em;line-height:1.45;padding:10px 14px;position:relative;transform:rotate(-1.2deg)}
.ww-skin-warren .ww-copy-right p{transform:rotate(1.4deg)}
.ww-skin-warren .ww-copy p::before,.ww-skin-warren .ww-copy p::after{background:var(--ww-wa-muted);border-radius:1px;content:"";height:3px;position:absolute;top:-1px;width:20px}
.ww-skin-warren .ww-copy p::before{left:14px;transform:rotate(-8deg)}
.ww-skin-warren .ww-copy p::after{right:16px;transform:rotate(6deg)}
.ww-skin-warren .ww-wordmark{color:var(--ww-wa-fg);font-family:var(--ww-poster);font-size:36px;font-weight:400;letter-spacing:.05em;text-shadow:4px 3px 0 var(--ww-wa-rust);text-transform:uppercase;transform:rotate(-2deg)}
.ww-skin-warren .ww-wordmark i{color:var(--ww-wa-amber);font-family:var(--ww-marker);font-size:1.3em;font-style:normal;margin:0 .12em;text-shadow:none}
.ww-skin-warren .ww-tagline{color:var(--ww-wa-scrawl);font-family:var(--ww-marker);font-size:21px;letter-spacing:.02em;transform:rotate(-1.5deg)}
.ww-skin-warren .ww-stencil{color:var(--ww-wa-rust);font-family:var(--ww-poster);font-size:min(28vw,330px);left:-3%;letter-spacing:.02em;line-height:.8;opacity:.17;position:absolute;text-transform:uppercase;top:44%;transform:rotate(-7deg);white-space:nowrap}
.ww-skin-warren .ww-halftone{-webkit-mask-image:linear-gradient(200deg,#000 10%,transparent 62%);background-image:radial-gradient(var(--ww-wa-rust) 1.5px,transparent 1.8px);background-size:9px 9px;height:80%;mask-image:linear-gradient(200deg,#000 10%,transparent 62%);opacity:.55;position:absolute;right:-6%;top:-12%;width:62%}
.ww-skin-warren .ww-poster{color:var(--ww-wa-bg);font-family:var(--ww-poster);line-height:.86;opacity:.24;padding:14px 18px 40px;position:absolute;text-transform:uppercase}
.ww-skin-warren .ww-poster small{display:block;font-family:var(--ww-type);font-size:13px;letter-spacing:.2em;margin-top:8px}
.ww-skin-warren .ww-stamp{border:5px double var(--ww-wa-scrawl);border-radius:6px;bottom:20%;color:var(--ww-wa-scrawl);font-family:var(--ww-poster);font-size:30px;letter-spacing:.12em;opacity:.75;padding:6px 14px;position:absolute;right:6%;text-transform:uppercase;transform:rotate(-12deg)}
@media (max-width: 760px) {
  .ww-skin-warren .ww-wordmark{font-size:28px}
  .ww-skin-warren h2{font-size:34px}
  .ww-skin-warren .ww-copy-right h2{justify-content:flex-start}
  .ww-skin-warren .ww-copy-right .ww-kicker{align-self:flex-start}
  .ww-skin-warren .ww-copy p{font-size:13px}
  .ww-skin-warren .ww-links a{font-size:11px;letter-spacing:.14em;padding:14px 7px}
  .ww-skin-warren .ww-ventures a{font-size:12px;padding:6px 0}
}
