/* ══════════ LOOK GROSS — PUNK / XEROX LAYER ══════════
   Sits on top of pop.css (same pages, same color bands). Built from the studio's
   own PUNK zine templates + moodboard: black zine-cover heroes, heavy condensed
   caps (Anton), typewriter labels (Courier Prime), Sharpie logo, real paper and
   torn-paper textures, xerox scans, flat punk-pop color blocks.
   Textures: Resource Boy + Texturelabs (commercial use OK, not redistributed alone). */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:wght@400;700&family=Permanent+Marker&display=swap");

:root{
  --ink:#0f0e0d;
  --paper:#efe9dc;
  --red:#e3261c;
  --hi:#e4ff1f;          /* highlighter */
  --yellow:#ffd21a;
  --blue:#2643ff;
  --pink:#ff4fa3;
  /* pop.css palette, re-inked */
  --lime:var(--hi);
  --cobalt:var(--blue);
  --hotpink:var(--pink);
  --marigold:var(--yellow);
  --grape:var(--ink);
  --magenta:var(--red);
  --cream:var(--paper);
  --charcoal:var(--ink);
  --charcoal-soft:#26231f;
  --eggplant:var(--red);
  --eggplant-light:#ff3b2e;
  --border:var(--ink);
  --cond:"Anton","Archivo Narrow",Impact,"Arial Narrow",sans-serif;
  --type:"Courier Prime","Courier New",ui-monospace,monospace;
  --marker:"Permanent Marker","Comic Sans MS",cursive;
  --pop-display:var(--cond);
  --pop-mono:var(--type);
  --black-paper:url("punk/paper-black.jpg");
}

/* ---------- paper texture: a background layer UNDER all content ----------
   Fixed layer at z-index:-1 in the root stacking context: it sits on top of the
   page color but beneath every band, photo and button. */
html{background:var(--paper)}
html,body{overflow-x:clip}
body{background:transparent!important;color:var(--charcoal-soft)}
body::after{display:block!important;content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("punk/paper-crumple.jpg") center/cover;mix-blend-mode:multiply;opacity:.55}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
  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='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 -.35'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}

/* ---------- type ---------- */
h1,h2,.hero h1,.hero-h1,.intro h1,.section-title,.gallery-label .title,.intro-text h2,.services-head h2,
.split-text h2,.strip-head h2,.cta-strip h2,.pitch h2,.confirmation h2,.form-card h2,.tile-title,.prod-head h2,
.prod-hero h1,h3,blockquote,.rate .amount{
  font-family:var(--cond)!important;font-weight:400!important;font-stretch:100%!important;font-style:normal!important;
  text-transform:uppercase;letter-spacing:-.005em;line-height:.86;-webkit-text-stroke:0!important;text-shadow:none;
}
h1 em,h2 em,.hero-h1 em,.prod-head h2 em{font-style:normal;color:var(--red)}
.post-body h2,.post-body h3{line-height:.95}
.eyebrow,.tile-num,.section-sub,.role,.video-label,.section-num,.photo-tag,.nav-links a,.nav-book,.mobile-menu a,
.footer-links a,.footer-bottom,.btn-primary,.btn-secondary,.cta-actions a,button[type="submit"],.pitch-cta,.hero-cta,
.jump-link,.topic,.cat,.prod-chips span,.tile-arrow,.tile-price,.strip-grid figcaption,.gallery-label .sub,.promo-strip,
.hero-services li,.submit-note,.crumbs,.post-meta,.field label{
  font-family:var(--type)!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase;font-style:normal!important}

/* label-maker tape instead of pills */
.eyebrow,.tile-num,.section-sub,.role,.video-label,.section-num,.photo-tag,.cat,.hero-photo .photo-tag{
  border-radius:0!important;background:var(--ink)!important;color:var(--paper)!important;border:0!important;
  padding:5px 10px 4px!important;box-shadow:none!important;transform:rotate(-1.5deg);font-size:11px!important}
.pop-band .eyebrow,.pop-band .section-num{color:var(--paper)!important}
.cat{transform:none}
/* chips: hard rectangles */
.jump-link,.topic,.hero-services li,.prod-chips span{border-radius:0!important;border:2px solid currentColor!important;box-shadow:none!important;background:transparent!important}
.jump-link:hover,.topic:hover{background:var(--ink)!important;color:var(--hi)!important}

/* ---------- brutalist nav ---------- */
nav{background:var(--paper)!important;border-bottom:2px solid var(--ink)!important;padding-right:0!important;backdrop-filter:none}
.nav-logo img{height:34px!important;width:auto}
.nav-links{gap:0!important;align-self:stretch;align-items:stretch}
.nav-links li{display:flex;align-items:center;border-left:2px solid var(--ink);padding:0 18px}
.nav-links a{font-size:11px!important;color:var(--ink)!important}
.nav-links a:hover,.nav-links a.active{background:var(--hi)!important;box-shadow:0 0 0 5px var(--hi)!important}
.nav-book,.nav-book:hover{align-self:stretch;display:flex!important;align-items:center;border:0!important;border-left:2px solid var(--ink)!important;
  border-radius:0!important;box-shadow:none!important;background:var(--red)!important;color:var(--paper)!important;padding:0 26px!important;transform:none!important}
.nav-book::after{content:" \2197";margin-left:6px}
.nav-book:hover{background:var(--ink)!important;color:var(--hi)!important}
.promo-strip{background:var(--ink)!important;color:var(--paper)!important;border-bottom:2px solid var(--ink)}
.promo-strip .ps-hot{color:var(--hi)!important}
.promo-strip .ps-cta{background:var(--red)!important;color:var(--paper)!important}
.mobile-menu{background:var(--paper)!important}
.mobile-menu a.book,.mobile-menu a.book-link{background:var(--red)!important;color:var(--paper)!important}

/* ---------- buttons: flat blocks with arrows ---------- */
.btn-primary,button[type="submit"],.pitch-cta,.cta-actions a.primary,.hero-cta,.prod-hero .btn-primary{
  background:var(--red)!important;color:var(--paper)!important;border:2px solid var(--ink)!important;border-radius:0!important;box-shadow:none!important}
.btn-secondary,.cta-actions a.secondary{background:transparent!important;color:inherit!important;border:2px solid currentColor!important;border-radius:0!important;box-shadow:none!important}
.btn-primary::after,.btn-secondary::after,.cta-actions a::after,.pitch-cta::after,.hero-cta::after{content:" \2197"}
.btn-primary:hover,button[type="submit"]:hover,.pitch-cta:hover,.cta-actions a.primary:hover,.hero-cta:hover{background:var(--ink)!important;color:var(--hi)!important;transform:none!important}
.btn-secondary:hover,.cta-actions a.secondary:hover{background:var(--hi)!important;color:var(--ink)!important;border-color:var(--ink)!important;transform:none!important}

/* ---------- bands: full-bleed without vertical clipping (so torn paper can overlap seams) ---------- */
:is(.features,.services,.intro-text,.strip,.quote-section,.cta-strip,.pitch,.split,.videos,.mini-promo,.blog-hero,
    .post-head,.jump-links,.pop-band,.prod-band,.hero-statement,.page .hero,.prod-hero){
  box-shadow:none!important;clip-path:none!important;
  border-image:linear-gradient(var(--band,transparent) 0 0) fill 0 / / 0 100vmax}
.pop-band .gallery-label{border-image:none}
.pop-band::after,.features::after,.split::after,.pitch::after,.mini-promo::after,.jump-links::after,.blog-hero::after,
.services::after,.strip::after,.videos::after{height:2px!important}
/* torn paper strip ripped across the top seam of each band */
:is(.pop-band,.prod-band,.services,.cta-strip,.pitch,.split,.videos,.strip,.mini-promo,.blog-hero)::before{
  content:"";position:absolute;z-index:5;left:-6%;right:-6%;top:-22px;height:46px;pointer-events:none;
  background:url("punk/torn-60.webp") center/100% 100% no-repeat;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}
:is(.pop-band,.prod-band):nth-of-type(3n+1)::before{background-image:url("punk/torn-40.webp");transform:rotate(-.6deg)}
:is(.pop-band,.prod-band):nth-of-type(3n+2)::before{background-image:url("punk/torn-30.webp");transform:rotate(.5deg);left:-10%;right:30%}
:is(.pop-band,.prod-band):nth-of-type(3n)::before{background-image:url("punk/torn-4.webp");left:25%;right:-8%;transform:rotate(-1deg)}

/* ---------- MONOCHROME bands, color only as splash ----------
   Sections alternate black zine pages and cream paper. Color lives in edges,
   buttons, tape, stickers and small special blocks. */
.pop-band:nth-of-type(odd),.services,.split,.videos,.pitch,.mini-promo,.jump-links,.post-head,.prod-band:nth-of-type(odd){
  --band:var(--ink);--bh:var(--paper);--bt:#d9d2c2;border-image:var(--black-paper) 0 fill / / 0 100vmax!important;color:#d9d2c2}
.pop-band:nth-of-type(even),.features,.strip,.blog-hero,.cta-strip,.prod-band:nth-of-type(even),.book.pop-band{
  --band:transparent;--bh:var(--ink);--bt:var(--ink);border-image:none!important;color:var(--ink)}
.book.pop-band{border-image:none!important}
/* headings + body text follow the band */
:is(.pop-band,.prod-band,.services,.split,.videos,.pitch,.mini-promo,.strip,.blog-hero,.cta-strip) :is(h1,h2,.title,.section-title){color:var(--bh,var(--ink))!important}
:is(.pop-band,.prod-band,.services,.split,.videos,.pitch,.mini-promo,.strip,.blog-hero,.cta-strip) :is(h1,h2,.title,.section-title) em{color:var(--red)!important}
.services .tile-title,.split-text h2,.videos .strip-head h2,.pitch h2,.mini-promo h2{color:var(--paper)!important}
.services .tile-desc,.split-text p,.pitch p,.pitch-right p,.mini-promo p,.mini-promo li,.mini-stats *{color:#d9d2c2!important}
.services-head h2,.videos .strip-head h2{color:var(--paper)!important}
.services .tile-arrow,.services .tile-price{color:var(--hi)!important}
.mini-promo h2 em,.pitch h2 em{color:var(--red)!important}
.strip-grid figcaption{background:var(--paper)!important;color:var(--ink)!important}
.cta-strip h2{color:var(--ink)!important}
.blog-hero h1{color:var(--ink)!important}
.post-head h1{color:var(--paper)!important}
.post-head h1 em{color:var(--hi)!important}
.jump-links .jump-link{color:var(--paper)!important}
.features .feature p,.features .feature p strong{color:var(--ink)!important}
.feature .dot{background:var(--red)!important;color:var(--paper)!important}
/* light sections: links stay readable */
.pop-band:nth-of-type(even) :is(p,li) a:not([class]){color:var(--red)!important}
.pop-band:nth-of-type(odd) :is(p,li) a:not([class]){color:var(--hi)!important}
/* cards keep ink on paper */
.pop-band:nth-of-type(even) :is(.faq-item,.party){background:#f7f3ea!important}

/* color EDGES: a thick colored rule along the bottom of every section, cycling inks */
.pop-band::after,.prod-band::after,.services::after,.split::after,.videos::after,.pitch::after,.mini-promo::after,
.strip::after,.features::after,.jump-links::after,.blog-hero::after{
  content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:6px!important;background:var(--edge,var(--red))!important;pointer-events:none}
.pop-band:nth-of-type(4n+1),.prod-band:nth-of-type(4n+1),.services{--edge:var(--red)}
.pop-band:nth-of-type(4n+2),.prod-band:nth-of-type(4n+2),.features,.strip{--edge:var(--hi)}
.pop-band:nth-of-type(4n+3),.prod-band:nth-of-type(4n+3),.split,.blog-hero{--edge:var(--blue)}
.pop-band:nth-of-type(4n),.prod-band:nth-of-type(4n),.videos,.pitch,.mini-promo{--edge:var(--pink)}
.jump-links{--edge:var(--hi)}
.features{border-block:0!important}

/* ---------- zine-cover heroes (every page opens black, like the PUNK templates) ---------- */
:is(.page .hero,.hero-statement,.prod-hero,body > .hero){
  --band:var(--ink);border-image:var(--black-paper) 0 fill / / 0 100vmax!important;color:var(--paper);position:relative}
body > .hero{max-width:none!important;padding-left:max(48px,calc((100vw - 1180px)/2))!important;padding-right:max(48px,calc((100vw - 1180px)/2))!important}
:is(.page .hero,.hero-statement,.prod-hero,body > .hero) :is(h1,.hero-h1){color:var(--paper)!important}
:is(.page .hero,.hero-statement,.prod-hero,body > .hero) :is(p,.lead,.hero-tagline,.hero-desc,.hero-sub,li){color:#d9d2c2!important}
:is(.page .hero,.hero-statement,.prod-hero,body > .hero) :is(p,.lead,.hero-tagline,.hero-desc) strong{color:var(--paper)!important}
:is(.page .hero,.hero-statement,.prod-hero,body > .hero) .eyebrow{background:var(--hi)!important;color:var(--ink)!important}
:is(.page .hero,.hero-statement,.prod-hero,body > .hero) .btn-secondary{color:var(--paper)!important}
:is(.page .hero,.hero-statement,.prod-hero,body > .hero) .effective{color:var(--hi)!important}
.hero-services li{color:var(--paper)!important}
/* vertical spine text, like the template covers */
:is(.page .hero,.hero-statement,.prod-hero,body > .hero)::after{content:"PHOTOGRAPHY \2014  LOOK GROSS \2014  ISSUE 01 \2014  MMXXVI";
  position:absolute;left:calc(-1 * max(0px,(100vw - 100%)/2) + 14px);top:50%;transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center;font:700 9.5px/1 var(--type);letter-spacing:.22em;color:#8d8679;white-space:nowrap;pointer-events:none}
@media (max-width:1100px){:is(.page .hero,.hero-statement,.prod-hero,body > .hero)::after{display:none}}

/* ---------- photos ---------- */
.tile-photo,.gallery-item,.featured-img,.split-media,.strip-grid figure,.video-embed,.mini-photo,.pcard .ph,.fig,.prod-shot,.prod-stack figure{
  border:2px solid var(--ink)!important;box-shadow:none!important;border-radius:0!important;transform:none!important}
.gallery-item:hover,.tile:hover .tile-photo,.strip-grid figure:hover,.prod-shot:hover{transform:translate(-3px,-3px)!important;box-shadow:6px 6px 0 var(--red)!important}
.tilt .prod-shot{transform:none!important}
.pop-band .gallery-item,.pop-band .featured-img{border-color:var(--ink)!important}
/* example photos always show in full color; xerox scans are background layers only */

/* ---------- home cover ---------- */
.punk-cover{position:relative;overflow:visible!important;border:0!important;box-shadow:none!important;transform:none!important;background:none!important}
.punk-cover .cover-photo{border:2px solid var(--paper);transform:rotate(1.5deg);background:var(--ink)}
.punk-cover .cover-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.punk-cover .tape{position:absolute;z-index:4;width:150px;height:34px;background:url("punk/torn-60.webp") center/100% 100%;opacity:.95}
.punk-cover .tape.t1{top:-14px;left:28%;transform:rotate(-4deg)}
.punk-cover .tape.t2{bottom:16px;right:-26px;transform:rotate(68deg);width:120px}
.punk-cover .photo-tag{position:absolute;z-index:5;left:-14px;bottom:26px;background:var(--paper)!important;color:var(--ink)!important}
.punk-note{position:absolute;z-index:5;left:-150px;top:50%;font:400 22px/1.05 var(--marker);color:var(--hi);transform:rotate(-8deg);text-align:right;pointer-events:none}
.punk-drip{position:absolute;z-index:1;left:47%;top:-6px;width:230px;pointer-events:none;mix-blend-mode:screen}
/* highlighter scribble around a word */
.scribble{position:relative;display:inline;white-space:nowrap}
.scribble svg{position:absolute;left:-9%;top:-12%;width:118%;height:122%;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--hi);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.92}

/* starburst sticker */
.pop-sticker{width:118px!important;height:118px!important;border:0!important;border-radius:0!important;background:var(--red)!important;color:var(--paper)!important;
  font-family:var(--cond)!important;font-weight:400!important;font-size:21px!important;line-height:.95!important;letter-spacing:.01em;text-transform:uppercase;
  clip-path:polygon(50% 0,58% 13%,72% 5%,74% 21%,90% 18%,84% 33%,100% 38%,88% 50%,100% 62%,84% 67%,90% 82%,74% 79%,72% 95%,58% 87%,50% 100%,42% 87%,28% 95%,26% 79%,10% 82%,16% 67%,0 62%,12% 50%,0 38%,16% 33%,10% 18%,26% 21%,28% 5%,42% 13%);
  top:-34px!important;right:-30px!important;transform:rotate(12deg)!important;z-index:6!important}

/* zine bar under the home cover */
.punk-zinebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;justify-content:space-between;
  padding:14px max(48px,calc((100vw - 1180px)/2));background:var(--paper);border-block:2px solid var(--ink);
  font:700 11px/1.3 var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);position:relative;z-index:2}
.punk-zinebar .price{font:400 26px/1 var(--cond);letter-spacing:0;color:var(--red)}
.punk-zinebar .barcode{width:120px;height:30px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 3px,var(--ink) 3px 4px,transparent 4px 7px,var(--ink) 7px 10px,transparent 10px 11px,var(--ink) 11px 12px,transparent 12px 15px)}

/* marquee: highlighter tape, slightly askew */
.pop-marquee{background:var(--hi)!important;color:var(--ink)!important;border-block:2px solid var(--ink)!important;transform:rotate(-1.2deg);
  width:104%;margin-left:-2%;margin-block:-6px;position:relative;z-index:3}
.pop-marquee span{font-family:var(--cond)!important;font-weight:400!important;font-stretch:100%!important;letter-spacing:.01em!important;font-size:clamp(28px,4.4vw,56px)!important}
.pop-marquee i{color:var(--red)!important}

/* zine-page of xerox scans (home) */
.punk-xerox{--band:var(--paper);position:relative;border-image:linear-gradient(var(--paper) 0 0) fill 0 / / 0 100vmax;padding-block:64px 80px;border-bottom:2px solid var(--ink)}
.punk-xerox .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-bottom:34px}
.punk-xerox h2{font-size:clamp(48px,8vw,120px)!important;color:var(--ink)!important;margin:0}
.punk-xerox h2 em{color:var(--red)}
.punk-xerox .head p{font:700 11px/1.5 var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);max-width:30ch;margin:0}
.punk-xerox .sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:start}
.punk-xerox figure{margin:0;position:relative;background:#fff;padding:10px;border:1px solid #cfc8b8;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.punk-xerox figure img{display:block;width:100%;filter:contrast(1.15)}
.punk-xerox figure:nth-child(1){grid-column:1 / span 4;transform:rotate(-2deg);margin-top:30px}
.punk-xerox figure:nth-child(2){grid-column:5 / span 5;transform:rotate(1deg)}
.punk-xerox figure:nth-child(3){grid-column:10 / span 3;transform:rotate(3deg);margin-top:60px}
.punk-xerox figure:nth-child(4){grid-column:2 / span 5;transform:rotate(1.5deg);margin-top:-40px}
.punk-xerox figure:nth-child(5){grid-column:8 / span 4;transform:rotate(-2.5deg);margin-top:-10px}
.punk-xerox figure::before{content:"";position:absolute;z-index:2;top:-12px;left:30%;width:42%;height:26px;background:url("punk/torn-60.webp") center/100% 100%;transform:rotate(-3deg)}
.punk-xerox figcaption{font:400 17px/1.1 var(--marker);color:var(--ink);margin-top:8px;transform:rotate(-1deg)}
@media (max-width:820px){
  .punk-xerox .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .punk-xerox figure:nth-child(n){grid-column:auto;margin-top:0}
  .punk-xerox figure:nth-child(5){grid-column:1 / -1}
}

/* ---------- product page: same monochrome alternation (handled above) ---------- */
.prod-chips span{color:inherit}

/* ---------- cards ---------- */
.faq-item,.party,.include-col,.note-block,.callout,.toc,.author-box,.form-card,.rate,.faq-highlight{border-radius:0!important;border:2px solid var(--ink)!important;box-shadow:none!important}
.faq-item,.party{background:var(--paper)!important}
.form-card{box-shadow:10px 10px 0 var(--ink)!important}
.rate,.note-block,.callout{background:var(--hi)!important}
.pcard{border:2px solid var(--ink)!important;box-shadow:none!important;border-radius:0!important;background:var(--paper)!important}
.pcard:hover{box-shadow:6px 6px 0 var(--red)!important;transform:translate(-3px,-3px)!important}
.pcard .ph{border:0!important;border-bottom:2px solid var(--ink)!important}
.pcard .cat{background:var(--ink)!important;color:var(--paper)!important}

/* ---------- footer: giant Sharpie wordmark ---------- */
footer{--band:var(--ink);background:var(--ink) var(--black-paper) center/cover!important;border-top:2px solid var(--ink)!important;position:relative;z-index:1}
footer .footer-logo{font-size:0!important;width:min(520px,70vw);aspect-ratio:796/162;
  background:url("punk/logo-c.png") left center/contain no-repeat;filter:invert(1) sepia(.25) brightness(.96)}
footer .footer-links a{color:var(--paper)!important}
footer .footer-links a:hover{color:var(--hi)!important}
footer .footer-bottom{color:#a59e90!important;border-top:2px solid #2c2925!important}
footer .footer-bottom::after{content:"ISSUE 01 \00B7  MMXXVI \00B7  $6.66";color:var(--hi);margin-left:auto}

/* ---------- headline sizes for the condensed face (sized to their column) ---------- */
@media (min-width:641px){
  .page .hero h1,.page .intro h1{font-size:clamp(52px,17cqi,168px)}
  .hero > div:first-child:has(> h1) h1{font-size:clamp(52px,16cqi,150px)}
  .hero-h1{font-size:clamp(52px,calc((60cqi - 20px) * .17),140px)}
  .prod-hero h1{font-size:clamp(52px,16cqi,150px)}
  .intro-text h2,.services-head h2,.split-text h2,.strip-head h2,.section-title,.gallery-label .title,.prod-head h2{font-size:clamp(48px,8vw,124px)}
  .cta-strip h2,.pitch h2{font-size:clamp(52px,8.6vw,140px)}
  .tile-title{font-size:40px}
  .faq-group .section-title,.policy .section-title{font-size:clamp(44px,6vw,88px)}
}
@media (max-width:900px){.cta-strip{grid-template-columns:1fr;flex-direction:column;align-items:flex-start}}
@media (max-width:640px){
  h1,.hero h1,.hero-h1,.intro h1,.hero > div:first-child h1,.prod-hero h1{font-size:clamp(46px,15vw,72px)}
  h2,.intro-text h2,.services-head h2,.split-text h2,.strip-head h2,.section-title,.gallery-label .title,.cta-strip h2,.pitch h2,.prod-head h2{font-size:clamp(40px,12.5vw,60px)}
  .nav-links li{border-left:0}
  .punk-note{left:auto;right:6px;top:auto;bottom:-46px;font-size:18px}
  .punk-drip{width:200px;right:-20px}
  .pop-sticker{width:96px!important;height:96px!important;font-size:17px!important;right:-8px!important}
  .punk-zinebar{padding-inline:max(16px,env(safe-area-inset-left,0px))}
  body > .hero{padding-left:max(20px,env(safe-area-inset-left,0px))!important;padding-right:max(20px,env(safe-area-inset-right,0px))!important}
}
@media (prefers-reduced-motion:reduce){.services .tile-photo img{transition:none}}
.punk-xerox{max-width:1180px;margin-inline:auto;padding-inline:48px}
@media (max-width:640px){.punk-xerox{padding-inline:20px}}

.hero h1{line-height:.9!important}
body > .hero{position:relative}
body > .hero > div:has(> h1){position:relative;z-index:2}
body > .hero .lead{margin-top:34px!important}

/* ---------- ghosted xerox scans as BACKGROUND layers ---------- */
.xerox-bg{position:absolute!important;top:0;bottom:0;right:-4vw;width:60%;z-index:0;pointer-events:none;
  background:var(--x) center 30%/cover no-repeat;filter:grayscale(1) contrast(1.35);opacity:.2;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.xerox-bg.on-light{mix-blend-mode:multiply;opacity:.2;width:52%}
:is(body > .hero,.page .hero,.hero-statement,.prod-hero,.mini-promo,.blog-hero,.cta-strip){position:relative}
:is(body > .hero,.page .hero,.hero-statement,.prod-hero,.mini-promo,.blog-hero,.cta-strip) > :not(.xerox-bg):not(.punk-drip){position:relative;z-index:1}
/* index cover: the photo column already has its own layout, keep it on top */
body > .hero > .hero-photo{z-index:2}
.mini-promo h2 em{color:var(--hi)!important}
@media (max-width:640px){.xerox-bg{width:100%;right:0;opacity:.14}.xerox-bg.on-light{opacity:.14}}

.mini-promo .xerox-bg,.services .xerox-bg{mix-blend-mode:screen!important}
.pop-band:nth-of-type(odd) .gallery-item,.pop-band:nth-of-type(odd) .featured-img{border-color:var(--paper)!important}
.prod-band:nth-of-type(odd) .prod-shot{border-color:#d9d2c2!important}

/* headline columns are sized by whichever child holds the h1 (a background layer may come first) */
:is(body > .hero,.prod-hero) > div:has(> h1){container-type:inline-size}
@media (min-width:641px){
  body > .hero > div:has(> h1) h1,.prod-hero > div:has(> h1) h1{font-size:clamp(52px,16cqi,150px)!important}
}
@media (max-width:1180px){.nav-book{display:none!important}nav{padding-right:16px!important}}
@media (max-width:900px){.punk-note{display:none}}


/* ══════════ CLEAN-WITH-TEXTURE PASS ══════════
   Like the reference: clean cream paper with a fine grain, flat blacks, crisp rules.
   Texture is felt, not seen. */
:root{--paper:#ece6da;--black-paper:linear-gradient(#141312,#141312)}
/* page: fine grain only, no crumples */
body::after{background:none!important;opacity:0!important}
body::before{opacity:.1!important}
/* black sections: flat ink + a whisper of grain */
:is(.pop-band:nth-of-type(odd),.services,.split,.videos,.pitch,.mini-promo,.jump-links,.post-head,.prod-band:nth-of-type(odd),
    .page .hero,.hero-statement,.prod-hero,body > .hero){
  border-image:linear-gradient(#141312,#141312) fill 0 / / 0 100vmax!important}
footer{background:#141312!important}
/* no torn strips across seams: clean colored rules do that job */
:is(.pop-band,.prod-band,.services,.cta-strip,.pitch,.split,.videos,.strip,.mini-promo,.blog-hero)::before{content:none!important}
/* ghosted scans: only behind the page tops, and much quieter */
.xerox-bg{opacity:.09!important}
:is(.cta-strip,.blog-hero) > .xerox-bg{display:none!important}
.mini-promo > .xerox-bg{opacity:.07!important}
/* crisper, thinner rules; colored edges stay as the splash */
.pop-band::after,.prod-band::after,.services::after,.split::after,.videos::after,.pitch::after,.mini-promo::after,
.strip::after,.features::after,.jump-links::after,.blog-hero::after{height:4px!important}
nav,.punk-zinebar{border-color:var(--ink)!important}
/* the drip stays as the one messy splash on the homepage, a bit smaller */
.punk-drip{width:180px!important;opacity:.95}
body > .hero h1{line-height:.96!important}
.book.pop-band{border-image:none!important;--bh:var(--ink);--bt:var(--ink);color:var(--ink)}
.book.pop-band a:not([class]){color:var(--red)!important}
/* footer: the one place the folded black paper texture comes back */
footer{background:#141312 url("punk/paper-black.jpg") center/cover no-repeat!important}
footer .footer-bottom{display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
footer .footer-bottom::after{margin-left:auto}
.page .book.pop-band.band-marigold :is(p,li,span,div) a{color:var(--red)!important}
/* ghost scans: zoomed way in so the photocopy grain itself becomes the texture.
   Full-bleed behind the hero, soft-faded edges (no visible box). */
.xerox-bg{left:-100vmax!important;right:-100vmax!important;width:auto!important;
  background-size:max(220vw,2400px) auto!important;background-position:var(--xp,62% 38%)!important;
  opacity:.17!important;image-rendering:auto;
  -webkit-mask-image:radial-gradient(ellipse 60% 85% at 72% 50%,#000 35%,transparent 100%)!important;
          mask-image:radial-gradient(ellipse 60% 85% at 72% 50%,#000 35%,transparent 100%)!important}
@media (max-width:640px){.xerox-bg{background-size:520vw auto!important;opacity:.14!important;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 100%)!important;
          mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 100%)!important}}
/* make the scan grit obvious: harder contrast, stronger layer */
.xerox-bg{opacity:.3!important;filter:grayscale(1) contrast(1.9) brightness(1.05)!important}
.xerox-bg.on-light{opacity:.2!important}
@media (max-width:640px){.xerox-bg{opacity:.22!important}}
.xerox-bg[style*="--xs"]{background-size:max(var(--xs),3200px) auto!important}

/* ══ hero texture: sharp photocopier grit from the pack (Texturelabs Grunge 279, 2560px) ══
   Replaces the blown-up scans as the main texture; scans stay as a softer ghost at modest zoom. */
:is(body > .hero,.page .hero,.hero-statement,.prod-hero,.mini-promo)::before{
  content:""!important;position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;z-index:0;pointer-events:none;
  background:url("punk/grit-dark.jpg") center/max(100vw,1600px) auto repeat-y;mix-blend-mode:screen;opacity:.55;height:auto;filter:none;transform:none}
.xerox-bg,.xerox-bg[style*="--xs"]{background-size:max(115vw,1300px) auto!important;opacity:.16!important;filter:grayscale(1) contrast(1.25)!important}
@media (max-width:640px){.xerox-bg,.xerox-bg[style*="--xs"]{background-size:260vw auto!important;opacity:.12!important}
  :is(body > .hero,.page .hero,.hero-statement,.prod-hero,.mini-promo)::before{background-size:1400px auto;opacity:.5}}

/* ---- readability on dark sections ---- */
/* bold runs inside body copy were inheriting near-black ink */
:is(.split,.videos,.services,.pitch,.mini-promo,.post-head,.prod-band:nth-of-type(odd),.pop-band:nth-of-type(odd),
    body > .hero,.page .hero,.hero-statement,.prod-hero) :is(p,li) :is(strong,b){color:var(--paper)!important}
:is(.split,.videos,.services,.pitch,.mini-promo) :is(p,.section-sub-text,.strip-head p){color:#d9d2c2!important}
/* small hero copy gets a soft dark halo so the scan behind never swallows it */
:is(body > .hero,.page .hero,.hero-statement,.prod-hero,.mini-promo) :is(p,.lead,.hero-tagline,.hero-desc,.hero-sub,.effective){
  text-shadow:0 0 14px #141312,0 0 4px #141312,0 1px 2px #000;font-weight:500}
.page .book.pop-band :is(p,li) :is(strong,b){color:var(--ink)!important}
.pop-band:nth-of-type(odd) .topic{color:var(--paper)!important;border-color:var(--paper)!important}
.pop-band:nth-of-type(odd) .topic:hover{background:var(--hi)!important;color:var(--ink)!important;border-color:var(--hi)!important}

/* ══ FAQ accordion: clean, even spacing ══ */
.faq-group{display:flex;flex-direction:column;gap:12px}
.faq-item{margin:0!important}
.faq-q{padding:18px 22px!important;gap:20px!important;align-items:center!important}
.faq-q-text{font:600 16px/1.35 "Archivo",system-ui,sans-serif!important;color:var(--ink)!important;letter-spacing:0!important;text-transform:none!important}
.faq-icon{font:400 26px/1 var(--cond)!important;width:24px;text-align:center;color:var(--red)!important}
.faq-a{padding:2px 22px 22px!important;font-size:15.5px!important;line-height:1.65!important;color:#2b2724!important;max-width:68ch}
.faq-a > *{margin:0!important}
.faq-a > * + *{margin-top:12px!important}
.faq-a :is(ul,ol){padding-left:22px!important;display:flex;flex-direction:column;gap:8px}
.faq-a li{margin:0!important;padding-left:4px;line-height:1.55!important}
.faq-a li::marker{color:var(--red);font-weight:700}
.faq-item.open{border-color:var(--ink)!important;box-shadow:5px 5px 0 var(--red)!important}
.faq-item.open .faq-q{border-bottom:1px dashed rgba(15,14,13,.25);margin-bottom:14px}
/* section head: number tag centred against the headline instead of sinking to the baseline */
.faq-group,.policy{scroll-margin-top:90px}
.section-head:has(.section-num){display:flex!important;align-items:center!important;gap:16px!important;margin-bottom:22px!important}
.section-head .section-num{transform:none!important;flex-shrink:0;margin:0!important;align-self:center}
.include-grid{gap:14px!important;margin:4px 0!important}
.include-col{padding:16px 18px!important}
@media (max-width:640px){.faq-q{padding:16px!important}.faq-a{padding:2px 16px 18px!important;font-size:15px!important}.faq-q-text{font-size:15px!important}}
.faq-a{max-width:none!important}
.faq-a .include-col :is(ul,ol){padding-left:0!important;list-style:none;gap:0}.faq-a .include-col li{padding:7px 0!important}
/* cream cards inside dark sections keep ink-colored bold text */
html body :is(.faq-item,.party,.form-card,.rate,.note-block,.include-col,.pcard,.callout,.toc,.author-box,.faq-highlight) :is(strong,b){color:var(--ink)!important}
:is(.faq-item,.party,.form-card,.rate,.note-block,.include-col,.pcard,.callout,.toc,.author-box,.faq-highlight):is(div,section,article,aside,a):not(#x):not(#y) :is(strong,b){color:var(--ink)!important}
:is(.faq-item,.party,.form-card,.rate,.note-block,.include-col,.pcard,.callout,.toc,.author-box,.faq-highlight):is(div,section,article,aside,a):not(#x):not(#y) a:not([class]){color:var(--red)!important}
:is(.faq-item,.party,.form-card,.rate,.note-block,.include-col,.pcard,.callout,.toc,.author-box,.faq-highlight):is(div,section,article,aside,a):not(#x):not(#y) a:not([class]) :is(strong,b){color:inherit!important}