/* UGLY MAGAZINE — maximalist, textured, anti-clean */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0d0a10; --paper:#f4efe4;
  --mag:#ff2fb3; --gold:#ffc93c; --teal:#2de1c2; --org:#ff7a1a; --pur:#9b30ff;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 750px at 12% -5%, rgba(255,45,149,.13), transparent 60%),
    radial-gradient(900px 650px at 96% 28%, rgba(57,255,20,.055), transparent 60%),
    radial-gradient(1000px 900px at 50% 112%, rgba(0,200,220,.10), transparent 62%),
    radial-gradient(700px 500px at 88% 88%, rgba(255,120,40,.06), transparent 60%),
    url("https://8h0dhu1cvwgnyv9u.public.blob.vercel-storage.com/art/tex-dark.webp") center top / cover fixed,
    #0d0a10;
  color:#f4efe4;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; overflow-x:hidden;
}
/* film grain overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
/* glitter sparkle overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:9991;pointer-events:none;opacity:.16;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 8%, var(--gold) 50%, transparent 51%),
    radial-gradient(2px 2px at 84% 64%, var(--mag) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 78%, var(--teal) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 88%, var(--org) 50%, transparent 51%);
  background-size:420px 420px,520px 520px,380px 380px,460px 460px,600px 600px,340px 340px;
}
::selection{background:var(--mag);color:#000}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}

/* ---------- type ---------- */
.display{
  font-family:"Arial Black",Impact,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.02em;
}
.pop{background:linear-gradient(100deg,var(--mag) 5%,var(--org) 30%,var(--gold) 52%,var(--teal) 78%,var(--pur) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(255,47,179,.35));}
.pop-soft{background:linear-gradient(100deg,var(--gold),var(--mag) 60%,var(--pur));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.kicker{font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.lede{font-size:clamp(16px,2.4vw,20px);color:#d8d2c4;max-width:640px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:100;background:rgba(10,7,14,.92);backdrop-filter:blur(8px);
  border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--mag),var(--gold),var(--teal)) 1;}
.nav-in{max-width:1140px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.brand{font-family:"Arial Black",Impact,sans-serif;font-weight:900;font-size:22px;letter-spacing:-.02em;
  text-decoration:none}
.brand .u{background:linear-gradient(90deg,var(--mag),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .m{color:#f4efe4;font-size:13px;letter-spacing:.3em;display:block;line-height:1;margin-top:2px}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;border-radius:99px;border:2px solid transparent}
.nav-links a:hover{border-color:var(--mag);color:var(--gold)}
.nav-links a.cta{background:linear-gradient(90deg,var(--mag),var(--org));color:#0d0a10;border-color:#000}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;
  background:#000 url("images/ugly-3.jpg") center/cover no-repeat;}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,7,14,.55) 0%,rgba(10,7,14,.25) 40%,rgba(10,7,14,.92) 100%);}
.hero-in{position:relative;z-index:2;padding:110px 0 90px}
.hero h1{font-size:clamp(52px,11vw,150px);margin:10px 0 18px}
.hero .tag{font-size:clamp(15px,2.6vw,22px);font-weight:700;color:#fff;max-width:620px;
  text-shadow:0 2px 14px #000}
.btn{display:inline-block;text-decoration:none;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  font-size:14px;padding:16px 30px;margin:8px 10px 0 0;border-radius:6px;
  border:3px solid #000;box-shadow:5px 5px 0 #000;transition:transform .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
.btn-hot{background:linear-gradient(90deg,var(--mag),var(--org));color:#0d0a10}
.btn-ghost{background:#0d0a10;color:var(--gold);border-color:var(--gold)}

/* ---------- marquee ---------- */
.marquee{background:linear-gradient(90deg,var(--mag),var(--pur),var(--teal),var(--mag));background-size:300% 100%;
  animation:slide 14s linear infinite;border-top:3px solid #000;border-bottom:3px solid #000;overflow:hidden}
.marquee div{white-space:nowrap;padding:12px 0;font-family:"Arial Black",Impact,sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;color:#0d0a10;font-size:18px;animation:tick 22s linear infinite}
@keyframes slide{to{background-position:300% 0}}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:84px 0;position:relative}
.sec-head{margin-bottom:44px}
.sec-head h2{font-size:clamp(34px,6vw,64px)}
.sticker{background:#141018;border:3px solid var(--gold);border-radius:14px;padding:30px;
  box-shadow:8px 8px 0 rgba(255,47,179,.35);position:relative}
.tilt-l{transform:rotate(-1.2deg)} .tilt-r{transform:rotate(1.1deg)}

/* issue cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px}
.issue{background:#16111c;border:3px solid #2b2233;border-radius:12px;overflow:hidden;
  transition:transform .18s,border-color .18s}
.issue:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--mag)}
.issue:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
.issue img{width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:3px solid #2b2233}
.issue-body{padding:22px}
.issue-body .vol{font-size:11px;letter-spacing:.3em;color:var(--teal);text-transform:uppercase}
.issue-body h3{font-family:"Arial Black",Impact,sans-serif;font-size:24px;margin:6px 0 4px;text-transform:uppercase}
.issue-body .date{font-size:13px;color:#9a93a8}
.issue-body p{font-size:14.5px;color:#cfc9bd;margin:10px 0 14px}
.price-row{display:flex;align-items:center;justify-content:space-between}
.price{font-family:"Arial Black",Impact,sans-serif;font-size:22px;color:var(--gold)}
.mini-btn{text-decoration:none;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--mag);color:#0d0a10;padding:10px 18px;border-radius:6px;border:2px solid #000;box-shadow:3px 3px 0 #000}

/* gallery strip */
.strip{display:flex;gap:18px;overflow-x:auto;padding:10px 4px 26px;scroll-snap-type:x mandatory}
.strip figure{flex:0 0 280px;scroll-snap-align:start;border:3px solid #2b2233;border-radius:10px;overflow:hidden;
  transform:rotate(-1deg)}
.strip figure:nth-child(even){transform:rotate(1.2deg)}
.strip img{aspect-ratio:1/1;object-fit:cover;width:100%}
.strip figcaption{padding:10px 14px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);background:#16111c}

/* manifesto */
.mani p{font-size:clamp(17px,2.6vw,22px);margin-bottom:26px;color:#e8e2d4;max-width:760px}
.mani p strong{color:var(--gold)}
.pull{font-family:"Arial Black",Impact,sans-serif;font-size:clamp(26px,5vw,46px);text-transform:uppercase;
  line-height:1.05;margin:44px 0;padding-left:22px;border-left:8px solid var(--mag)}
.mani-art{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.mani-art img{border:3px solid var(--gold);border-radius:12px;box-shadow:10px 10px 0 rgba(45,225,194,.25);transform:rotate(1.4deg)}
@media(max-width:820px){.mani-art{grid-template-columns:1fr}}

/* forms */
form.ugly{max-width:560px}
label{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:18px 0 6px}
input,textarea,select{width:100%;background:#0d0a10;border:2px solid #4a3f58;color:#f4efe4;
  padding:14px 16px;border-radius:8px;font-size:16px;font-family:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--mag);box-shadow:0 0 0 3px rgba(255,47,179,.25)}
textarea{min-height:130px;resize:vertical}
.form-note{font-size:13px;color:#9a93a8;margin-top:14px}
.form-ok{display:none;background:#123322;border:2px solid var(--teal);color:#d8ffe9;
  padding:16px 20px;border-radius:8px;margin-top:18px;font-weight:700}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin:40px 0}
.tier{background:#16111c;border:3px solid #2b2233;border-radius:14px;padding:32px 28px;text-align:center;position:relative}
.tier.hot{border-color:var(--mag);transform:scale(1.03);box-shadow:0 0 34px rgba(255,47,179,.25)}
.tier .tname{font-family:"Arial Black",Impact,sans-serif;font-size:20px;text-transform:uppercase;letter-spacing:.05em}
.tier .tprice{font-family:"Arial Black",Impact,sans-serif;font-size:46px;color:var(--gold);margin:12px 0}
.tier ul{list-style:none;text-align:left;margin:18px 0;font-size:14.5px;color:#cfc9bd}
.tier li{margin-bottom:8px;padding-left:24px;position:relative}
.tier li::before{content:"✦";position:absolute;left:0;color:var(--mag)}
.badge{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(90deg,var(--mag),var(--org));color:#0d0a10;font-weight:900;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;padding:6px 16px;border-radius:99px;border:2px solid #000}

/* guidelines */
.guide{background:#16111c;border:3px solid #2b2233;border-radius:12px;padding:26px;margin-bottom:20px}
.guide h3{font-family:"Arial Black",Impact,sans-serif;text-transform:uppercase;font-size:19px;color:var(--gold);margin-bottom:8px}
.guide p,.guide li{font-size:15px;color:#cfc9bd}
.guide ul{margin:8px 0 0 20px}

/* footer */
footer{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--mag),var(--gold),var(--teal)) 1;
  background:#0a0710;padding:54px 0 34px;margin-top:40px}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot-tag{font-family:"Arial Black",Impact,sans-serif;font-size:22px;text-transform:uppercase;max-width:340px}
.foot-links a{display:block;text-decoration:none;font-size:14px;color:#9a93a8;margin-bottom:8px}
.foot-links a:hover{color:var(--gold)}
.copy{margin-top:36px;font-size:12px;color:#5f586e;letter-spacing:.1em}

@media(max-width:640px){
  .nav-links{margin-left:0}
  section{padding:60px 0}
  .hero-in{padding:90px 0 70px}
}

/* logo lockups */
.brand-logo{height:52px;width:auto;display:block;border-radius:8px}
.foot-logo{height:110px;width:auto;display:block;border-radius:10px;margin-bottom:12px}
@media(max-width:640px){.brand-logo{height:40px}.foot-logo{height:84px}}

/* featured art */
.feature-art{margin:56px auto}
.art-feature img{width:100%;height:auto;display:block;border-radius:14px}
.art-feature figcaption{margin-top:10px;color:#cfc6da;font-size:14px;font-style:italic}

/* logo wall */
.page-hero{padding:64px 0 8px}
.wall{columns:2;column-gap:22px;margin-top:8px}
@media(max-width:700px){.wall{columns:1}}
.wall-item{break-inside:avoid;margin:0 0 22px;background:#14101c;border:1px solid #2b2138;border-radius:14px;overflow:hidden}
.wall-item img{width:100%;height:auto;display:block}
.wall-item figcaption{padding:14px 16px;color:#cfc6da;font-size:14px;line-height:1.5}
.wall-item figcaption b{color:#fff}
.wall-note{margin:26px 0 10px;color:#cfc6da}
.wall-note a{color:#ff2d95}

/* ===== LICKABLE TEXTURES — grain, grunge, depth everywhere ===== */

/* global film grain over everything */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");}

/* textured body + hero — layered grunge depth */
body{background:
  radial-gradient(1100px 750px at 12% -5%, rgba(255,45,149,.13), transparent 60%),
  radial-gradient(900px 650px at 96% 28%, rgba(57,255,20,.055), transparent 60%),
  radial-gradient(1000px 900px at 50% 112%, rgba(0,200,220,.10), transparent 62%),
  radial-gradient(700px 500px at 88% 88%, rgba(255,120,40,.06), transparent 60%),
  url("https://8h0dhu1cvwgnyv9u.public.blob.vercel-storage.com/art/tex-dark.webp") center top / cover fixed,
  #0b0910;}
.hero{background:linear-gradient(rgba(8,5,12,.72),rgba(8,5,12,.55)),url("https://8h0dhu1cvwgnyv9u.public.blob.vercel-storage.com/art/tex-hero.webp") center/cover;border-bottom:3px solid #1d1426;}

/* torn divider between hero and content */
.tear{height:26px;background:
  linear-gradient(-45deg,transparent 12px,#0b0910 0) 0 0/26px 26px repeat-x,
  linear-gradient(45deg,transparent 12px,#0b0910 0) 13px 0/26px 26px repeat-x;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));}

/* tactile cards and panels */
.strip figure,.wall-item,.mani-art,.art-feature{background:
  linear-gradient(rgba(20,14,28,.92),rgba(20,14,28,.94)),url("https://8h0dhu1cvwgnyv9u.public.blob.vercel-storage.com/art/tex-dark.webp") center/cover;
  border:2px solid #33244a;border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -3px 8px rgba(0,0,0,.5);}
.strip figure{padding:10px}
.strip figure img,.wall-item img{border-radius:8px}

/* glossy 3D buttons */
.btn{box-shadow:0 5px 0 rgba(0,0,0,.45),0 10px 18px rgba(0,0,0,.5),inset 0 2px 2px rgba(255,255,255,.35),inset 0 -4px 8px rgba(0,0,0,.35);
  text-shadow:0 2px 3px rgba(0,0,0,.6);border:2px solid rgba(0,0,0,.5);transform:translateY(0);transition:transform .12s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45),inset 0 2px 6px rgba(0,0,0,.5)}

/* carved display type */
.display{text-shadow:0 2px 0 #000,0 4px 0 rgba(0,0,0,.6),0 8px 22px rgba(255,45,149,.28),0 0 46px rgba(255,45,149,.16);}
.pop{filter:drop-shadow(0 6px 10px rgba(0,0,0,.7));}

/* nav: brushed metal bar */
nav{background:linear-gradient(#241a33,#171021);border-bottom:2px solid #000;box-shadow:0 4px 14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);}
.nav-links a{text-shadow:0 2px 2px #000;}

/* marquee: hazard tape */
.marquee{background:repeating-linear-gradient(-45deg,#ff2d95 0 26px,#14101c 26px 52px);border-top:3px solid #000;border-bottom:3px solid #000;
  text-shadow:0 2px 3px #000;}
.marquee div{background:rgba(0,0,0,.45);}

/* footer: dark concrete */
footer{background:linear-gradient(rgba(10,7,14,.94),rgba(10,7,14,.96)),url("https://8h0dhu1cvwgnyv9u.public.blob.vercel-storage.com/art/tex-dark.webp") center/cover;border-top:3px solid #1d1426;}

/* sticker-style section kickers */
.kicker{display:inline-block;background:#ff2d95;color:#0b0910;font-weight:800;padding:5px 14px;border-radius:999px;
  transform:rotate(-1.5deg);box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5);text-shadow:none;letter-spacing:.08em;}
.sec-head .kicker{margin-bottom:14px}

/* polaroid tilt on art images */
.art-feature img{transform:rotate(-.6deg);box-shadow:0 14px 30px rgba(0,0,0,.65);}
.feature-art:nth-of-type(even) .art-feature img{transform:rotate(.6deg);}