:root{--black:#090909;--ink:#111;--paper:#f2f0ea;--blue:#0877ff;--yellow:#ffd321;--line:rgba(255,255,255,.17)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:#fff;font-family:Manrope,Arial,sans-serif;font-size:16px}button,a{font:inherit}button{cursor:pointer}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);position:relative;z-index:3}.brand{display:flex;color:#fff;text-decoration:none;font:700 2rem/1 Oswald,sans-serif;letter-spacing:-.1em}.brand span:first-child{color:var(--blue)}.brand span:last-child{color:var(--yellow)}nav{display:flex;gap:2rem}nav a,footer a{color:#fff;text-decoration:none;font-size:.85rem;font-weight:700;text-transform:uppercase}.cart-button{background:#fff;color:#000;border:0;padding:.8rem 1rem;text-transform:uppercase;font-weight:800}.cart-button b{display:inline-grid;place-items:center;background:var(--yellow);border-radius:50%;width:24px;height:24px;margin-left:.4rem}.hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:.82fr 1.18fr;padding:4vw;gap:4vw;align-items:center;background:radial-gradient(circle at 15% 30%,#15355e55,transparent 35%)}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.18em;margin:0 0 1.25rem;color:#a9a9a9}.hero h1{font:700 clamp(4.3rem,10vw,9.8rem)/.78 Oswald,sans-serif;letter-spacing:-.06em;margin:0 0 2rem}.hero h1 i{font-style:normal;color:var(--yellow);-webkit-text-stroke:2px var(--yellow);-webkit-text-fill-color:transparent}.lead{font-size:1.15rem;max-width:340px;color:#c9c9c9;margin-bottom:2rem}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--yellow);color:#080808;border:0;text-decoration:none;text-transform:uppercase;font-weight:800;padding:1rem 1.25rem;min-height:52px}.primary span{font-size:1.4rem}.hero-visual{margin:0;position:relative;transform:rotate(1.5deg)}.hero-visual:before{content:"";position:absolute;inset:-10px;border:1px solid #ffffff33;transform:rotate(-2deg)}.hero-visual img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;filter:contrast(1.07)}.hero-visual figcaption{display:flex;justify-content:space-between;background:#fff;color:#000;padding:.8rem 1rem;font-size:.7rem;font-weight:800;letter-spacing:.12em}.ticker{overflow:hidden;background:var(--blue);color:#fff;padding:.75rem 0;white-space:nowrap;font:700 1.1rem Oswald,sans-serif;letter-spacing:.08em}.ticker div{width:max-content;animation:ticker 22s linear infinite}@keyframes ticker{to{transform:translateX(-50%)}}.shop{background:var(--paper);color:var(--ink);padding:7rem 4vw}.section-head{display:flex;justify-content:space-between;align-items:end;border-bottom:2px solid #111;padding-bottom:1.5rem}.section-head h2,.manifesto h2,dialog h2{font:700 clamp(3rem,7vw,6rem)/.95 Oswald,sans-serif;text-transform:uppercase;margin:0}.section-head>p{font-size:.85rem;font-weight:700;line-height:1.5}.filters{display:flex;gap:.5rem;margin:1.5rem 0 2rem}.filter{border:1px solid #111;background:transparent;padding:.65rem 1rem;font-weight:700}.filter.active{background:#111;color:#fff}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.product-card{position:relative}.product-art{aspect-ratio:4/5;background:#d9d7d1 url('merch-1214.png') center/cover no-repeat;position:relative;overflow:hidden}.product-card:nth-child(2) .product-art{background-position:20% center}.product-card:nth-child(3) .product-art{background-position:5% 85%}.badge{position:absolute;left:.8rem;top:.8rem;background:var(--yellow);font-size:.7rem;font-weight:800;padding:.45rem .55rem}.product-info{display:flex;justify-content:space-between;padding:.9rem 0;gap:1rem}.product-info h3{margin:0 0 .2rem;font:600 1.25rem Oswald,sans-serif;text-transform:uppercase}.product-info p{margin:0;font-size:.75rem;color:#555}.product-info b{white-space:nowrap}.add{position:absolute;right:.8rem;bottom:5.5rem;border:0;background:#fff;width:46px;height:46px;font-size:1.5rem;box-shadow:0 4px 20px #0003;transition:.2s}.add:hover{background:var(--yellow);transform:rotate(90deg)}.manifesto{padding:8rem 4vw;background:linear-gradient(135deg,#0b1523,#090909 55%);min-height:680px;display:flex;flex-direction:column;justify-content:space-between}.statement{font:600 clamp(3rem,8vw,8rem)/.98 Oswald,sans-serif;text-transform:uppercase;margin:3rem 0}.statement span{color:var(--blue);text-shadow:3px 3px 0 var(--yellow)}.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.facts div{display:flex;gap:2rem;padding:1.5rem 1rem 0 0;border-right:1px solid var(--line)}.facts b{color:var(--yellow)}.facts span{font-size:.9rem;line-height:1.5;color:#bbb}footer{display:flex;align-items:center;justify-content:space-between;padding:3rem 4vw;border-top:1px solid var(--line)}footer p{font-size:.7rem;letter-spacing:.1em}.overlay{position:fixed;inset:0;background:#000b;z-index:10}.drawer{position:fixed;z-index:11;right:0;top:0;width:min(460px,100%);height:100%;background:#f2f0ea;color:#111;padding:1.5rem;transform:translateX(105%);transition:.3s;display:flex;flex-direction:column}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #111}.drawer-head h2{font:700 2.2rem Oswald,sans-serif;text-transform:uppercase}.drawer-head button,.dialog-close{border:0;background:transparent;font-size:2rem}.cart-items{overflow:auto;flex:1;padding:1rem 0}.empty{text-align:center;color:#666;padding:5rem 1rem}.cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid #ccc}.cart-thumb{width:64px;height:80px;background:url('merch-1214.png') center/cover}.cart-row h3{font:600 1rem Oswald,sans-serif;margin:0 0 .3rem;text-transform:uppercase}.cart-row p{margin:0;font-size:.75rem;color:#666}.remove{background:none;border:0;text-decoration:underline;font-size:.75rem}.total{display:flex;justify-content:space-between;font-size:1.25rem;padding:1rem 0}.full{width:100%}dialog{border:0;width:min(560px,calc(100% - 2rem));padding:2.2rem;background:var(--paper);color:#111}dialog::backdrop{background:#000c}.dialog-close{position:absolute;right:1rem;top:1rem}dialog h2{font-size:3.5rem;margin-bottom:1rem}dialog>div>p{color:#555;line-height:1.5}form{display:grid;gap:1rem;margin-top:1.5rem}label{font-size:.78rem;font-weight:800;text-transform:uppercase}input{width:100%;padding:.9rem;border:1px solid #999;background:#fff;margin-top:.4rem;font-size:1rem}.success{text-align:center;padding:2rem 0}.success>span{display:grid;place-items:center;margin:auto;background:var(--yellow);width:70px;height:70px;border-radius:50%;font-size:2rem}.toast{position:fixed;left:50%;bottom:1.5rem;z-index:20;transform:translate(-50%,150%);background:#fff;color:#111;padding:.8rem 1.1rem;font-weight:700;transition:.25s;box-shadow:0 10px 30px #0007}.toast.show{transform:translate(-50%,0)}
@media(max-width:800px){.topbar{height:66px}.topbar nav{display:none}.hero{grid-template-columns:1fr;padding:3rem 1rem;min-height:auto}.hero h1{font-size:22vw}.hero-visual{margin-top:1rem}.shop,.manifesto{padding:5rem 1rem}.section-head{align-items:start}.section-head>p{display:none}.products{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.facts div{border-right:0;border-bottom:1px solid var(--line);padding:1.2rem 0}.manifesto{min-height:600px}.statement{font-size:15vw}footer{padding:2rem 1rem;flex-wrap:wrap;gap:1rem}footer p{order:3;width:100%}}
/* Readable typography, including narrow screens and fallback fonts. */
body { line-height: 1.5; }
.brand { letter-spacing: .02em; line-height: 1.15; gap: .04em; }
.hero { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.hero-copy { min-width: 0; container-type: inline-size; }
.hero h1 {
  font-size: clamp(2rem, 5.5vw, 7rem);
  font-size: clamp(1rem, 16cqi, 7rem);
  line-height: 1.15;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
}
.hero h1 > span, .hero h1 > i { display: block; }
.hero h1 i { -webkit-text-stroke-width: 1px; }
.section-head { gap: 1.5rem; flex-wrap: wrap; }
.section-head h2, .manifesto h2, dialog h2 {
  line-height: 1.15;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.statement {
  line-height: 1.2;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.product-info h3, .cart-row h3, .drawer-head h2 { line-height: 1.3; letter-spacing: .01em; }
.product-info > div, .cart-row > div { min-width: 0; overflow-wrap: anywhere; }
.product-info { flex-wrap: wrap; }
.filters { flex-wrap: wrap; }
.primary, .cart-button, .filter, label { line-height: 1.5; }
dialog h2 { font-size: clamp(1.5rem, 7vw, 3rem); }
.topbar { min-height: 78px; height: auto; gap: 1rem; padding-block: 1rem; flex-wrap: wrap; }
@media (max-width: 800px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 14vw; font-size: clamp(1rem, 16cqi, 7rem); }
  .statement { font-size: clamp(1.75rem, 10vw, 4rem); }
  .section-head h2 { font-size: clamp(2rem, 9vw, 4rem); }
  .topbar { min-height: 66px; }
  dialog { padding: 2.5rem 1.25rem 1.5rem; }
}
/* Spray-painted display lettering; shopping controls remain plain text. */
.brand, .hero h1, .section-head h2, .statement {
  font-family: 'Rubik Spray Paint', Oswald, Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .035em;
  line-height: 1.3;
}
.brand { gap: .08em; }
.hero h1 {
  font-size: clamp(1rem, 4.5vw, 6rem);
  font-size: clamp(1rem, 13cqi, 6rem);
  padding: .08em .12em .12em 0;
  text-shadow: .025em .035em 0 var(--blue);
}
.hero h1 i {
  color: var(--yellow);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}
.hero h1 > span:last-child { color: var(--blue); text-shadow: .025em .035em 0 var(--yellow); }
.section-head h2 {
  font-size: clamp(2rem, 5.5vw, 5rem);
  text-shadow: .025em .035em 0 var(--yellow);
}
.statement { font-size: clamp(1.5rem, 5.5vw, 6rem); }
.statement span { color: var(--yellow); text-shadow: .025em .035em 0 var(--blue); }
@media (max-width: 800px) {
  .hero h1 { font-size: 11vw; font-size: clamp(1rem, 13cqi, 6rem); }
  .section-head h2 { font-size: clamp(1.75rem, 7vw, 3.5rem); }
  .statement { font-size: clamp(1.5rem, 7vw, 3.5rem); }
}
/* Real paint texture stays behind selectable, accessible heading text. */
.hero h1 > span, .hero h1 > i, .section-head h2, .statement {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
}
.hero h1 > span::before, .hero h1 > i::before,
.section-head h2::before, .statement::before {
  content: '';
  position: absolute;
  inset: -.18em 0;
  z-index: -2;
  pointer-events: none;
  background: url('heading-paint-splatter.png') center / 100% 100% no-repeat;
  opacity: .65;
}
.hero h1 > i::before { transform: scaleY(-1); }
.hero h1 > span:last-child::before { transform: scaleX(-1); }
.hero h1 > span, .hero h1 > i {
  text-shadow: 1px 1px 0 var(--black), -1px -1px 0 var(--black), .025em .035em 0 var(--blue);
}
.hero h1 > span:last-child {
  text-shadow: 1px 1px 0 var(--black), -1px -1px 0 var(--black), .025em .035em 0 var(--yellow);
}
.section-head h2::before { opacity: .45; }
.statement::before { opacity: .5; background-size: 100% auto; }
.statement, .statement span { text-shadow: 1px 1px 0 var(--black), -1px -1px 0 var(--black); }
@media (forced-colors: active) {
  .hero h1 > span::before, .hero h1 > i::before, .section-head h2::before, .statement::before { display: none; }
}
/* Reference-inspired hand-painted wordmarks retain semantic image text. */
.hero h1.graffiti-art, .section-head h2.graffiti-art, .statement.graffiti-art {
  padding: 0;
  width: 100%;
  max-width: 100%;
  line-height: 1.2;
  text-shadow: none;
}
.graffiti-art::before { display: none; }
.graffiti-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) sepia(1) saturate(8) hue-rotate(315deg);
}
.brand span:first-child { color: #e32332; }
.brand span:last-child { color: #151515; -webkit-text-stroke: .7px #e8e8e8; }
.hero h1.graffiti-art-hero { max-width: 32rem; }
.section-head > div { min-width: 0; max-width: 100%; }
.section-head h2.graffiti-art-shop { width: min(30rem, 84vw); }
.statement.graffiti-art-manifesto { max-width: 58rem; }
.manifesto {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(227,35,50,.16), transparent 28%),
    radial-gradient(circle at 86% 66%, rgba(130,12,24,.1), transparent 26%),
    linear-gradient(135deg,#180b0e,#090909 58%);
}
.statement.graffiti-art-manifesto img {
  mix-blend-mode: screen;
}
.shop { background-image: radial-gradient(circle at 8% 6%, rgba(255,211,33,.2), transparent 18%); }
.primary, .cart-button, .filter.active { box-shadow: -4px 4px 0 #000; }
.primary, .cart-button, .filter { border-radius: 999px; }
.add, .drawer-head button, .dialog-close { border-radius: 50%; }
.product-card { transition: transform .2s ease; }
.product-card:hover { transform: translateY(-4px) rotate(-.25deg); }
@media (max-width: 800px) {
  .hero h1.graffiti-art-hero { max-width: 28rem; }
}
/* Display only the mural area of the supplied screenshot, without modifying it.
   A minimum 220% height keeps browser chrome outside the viewport at all ratios. */
body { isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(9,9,9,.54), rgba(9,9,9,.72)),
    url('graffiti-wall.jpeg');
  background-repeat: no-repeat;
  background-size: 100% 100%, auto max(220vh, 216.34vw);
  background-position: center, 50% 32%;
}
.topbar, footer { background: rgba(9,9,9,.68); }
.hero { background: transparent; }
.manifesto { background: rgba(9,9,9,.22); }
.shop { background: rgba(242,240,234,.9); }
.hero .eyebrow, .manifesto .eyebrow { color: #e5e5e5; }
.hero .lead, .facts span { color: #eee; }
.topbar { height: auto; min-height: 78px; gap: 1rem; flex-wrap: wrap; padding-block: .75rem; }
.topbar nav { align-items: center; flex-wrap: wrap; gap: 1rem; }
.contacts-button { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .8rem; border: 1px solid #ffffff66; border-radius: 999px; background: #090909; color: #fff; font-size: .875rem; font-weight: 700; }
.contacts-button:hover { background: #262626; }
.contacts-button:focus-visible, .contact-list a:focus-visible { outline: 2px solid #e32332; outline-offset: 4px; }
.contacts-dialog { background: #101010; color: #fff; border: 1px solid #444; border-radius: 20px; max-height: 85dvh; overflow-y: auto; }
.contacts-dialog h2 { padding-right: 2rem; }
.contacts-dialog > p { color: #ccc; line-height: 1.5; }
.contacts-dialog .dialog-close { color: #fff; min-width: 44px; min-height: 44px; }
.contact-list { display: grid; gap: .75rem; font-style: normal; margin-top: 1.5rem; }
.contact-list a { display: grid; gap: .5rem; padding: 1rem; border: 1px solid #444; border-radius: 14px; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { background: #242424; border-color: #e32332; }
.contact-list span { font-size: .875rem; color: #ccc; }
.contact-list strong { font-size: 1rem; line-height: 1.5; }
@media (max-width: 600px) { .topbar nav { order: 3; width: 100%; justify-content: center; } }
@media (forced-colors: active) { body::before, body::after { display: none; } }
.topbar { background: #000; }
.icon-panel { display: flex; align-items: center; justify-content: space-between; gap: clamp(.4rem, 2vw, 1.5rem); }
.icon-panel .icon-button, .icon-panel .contacts-button { position: relative; display: inline-grid; place-items: center; width: 48px; height: 52px; min-width: 44px; padding: 7px; border: 0; border-radius: 8px; background: transparent; color: #fff; box-shadow: none; }
.icon-panel svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-panel .contacts-button span { display: none; }
.icon-panel button:hover { background: #202020; }
.icon-panel button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.icon-panel .icon-count, .icon-panel #cartCount { position: absolute; top: 0; right: -2px; display: grid; place-items: center; min-width: 18px; width: auto; height: 18px; padding: 0 4px; border-radius: 50%; background: #e32332; color: white; font: 700 12px/1 Manrope, sans-serif; margin: 0; }
.icon-panel [hidden] { display: none; }
.panel-dialog { width: min(580px, calc(100% - 2rem)); }
.panel-dialog input { border-radius: 10px; color: #111; }
.np-hint { font-size: .875rem; line-height: 1.5; margin: 0; color: #555; }
.panel-dialog .np-hint { color: #ccc; }
.panel-dialog > label { display: block; margin-top: 1rem; }
.panel-products { display: grid; gap: 1rem; }
.panel-product { padding: 1rem 0; border-top: 1px solid #444; }
.panel-product h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.panel-product p { color: #ccc; line-height: 1.5; }
.panel-product-actions { display: flex; gap: 1rem; align-items: center; }
.favorite-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 9px; border: 1px solid #777; border-radius: 50%; color: #111; background: #fff; }
.favorite-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.favorite-toggle[aria-pressed="true"] { color: #c51228; }
.favorite-toggle[aria-pressed="true"] svg { fill: currentColor; }
.product-art .favorite-toggle { position: absolute; bottom: 12px; left: 12px; }
.profile-clear { min-height: 44px; background: transparent; color: #fff; border: 1px solid #777; border-radius: 999px; padding: .7rem 1rem; }
@media (max-width: 800px) { .topbar nav { order: 2; width: auto; } .icon-panel { order: 3; width: 100%; max-width: 440px; margin: .25rem auto 0; } }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.ticker div{animation:none}.drawer{transition:none}}