@charset "UTF-8";
:root{--paper:#f5f5f2;--ink:#111;--red:#e33125;--line:#c4c4bd;--mono:'Courier New',monospace;--display:Impact,'Arial Narrow','Helvetica Neue',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%}::selection{background:var(--red);color:white}:focus-visible{outline:3px solid var(--red);outline-offset:5px}a:hover{text-decoration:none}.skip{position:fixed;left:15px;top:-80px;background:white;padding:10px;z-index:20}.skip:focus{top:10px}.wrap{max-width:1440px;margin:auto;padding-inline:clamp(24px,5vw,72px)}.masthead{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--ink)}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}.brand{font-family:var(--display);font-size:27px;letter-spacing:-.8px;line-height:1}.brand span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:4px;margin-top:5px}.navlinks{display:flex;gap:30px;align-items:center;font-family:var(--mono);font-weight:bold;font-size:14px}.navlinks a:hover{color:var(--red)}.navlinks .shop{background:var(--ink);color:white;padding:9px 20px}.menu{display:none;border:1px solid var(--ink);background:none;padding:7px 12px;font-family:var(--mono);font-size:14px}.meta{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:1px;padding:20px 0}.hero{position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:5%;padding:58px 0 72px;align-items:center}.hero-copy{position:relative;z-index:1}.eyebrow{font:700 13px/1.5 var(--mono);letter-spacing:1.5px;text-transform:uppercase;margin:0 0 24px}.hero h1{font-family:var(--display);font-stretch:condensed;font-weight:900;line-height:.88;letter-spacing:-.045em;margin:0 0 30px;font-size:clamp(68px,8.7vw,134px)}.hero h1 span{display:block}.hero h1 .outline{color:var(--red);font-size:.8em;letter-spacing:-.01em}.hero h2{font-size:clamp(22px,2.15vw,32px);line-height:1.45;letter-spacing:.02em;margin:30px 0 20px}.intro{max-width:430px;color:#444;line-height:1.95;margin:0 0 30px}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 26px;border:1px solid var(--ink);font-size:14px;font-weight:bold;transition:background .2s,color .2s}.btn.dark{background:var(--ink);color:white}.btn.red{background:var(--red);color:white;border-color:var(--red)}.btn:hover{background:var(--red);color:white;border-color:var(--red)}.cover-stage{position:relative;padding:35px 40px 30px;background:#191919;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,#ffffff08 30px,#ffffff08 31px)}.cover-stage:before{content:'';position:absolute;inset:12px;border:1px solid #ffffff28;pointer-events:none}.cover-stage img{width:100%;max-height:470px;object-fit:contain;transform:rotate(-5deg);filter:drop-shadow(12px 14px 0 #00000066);transition:transform .35s}.cover-stage:hover img{transform:rotate(0)}.cover-stage button{width:100%;background:none;border:0;padding:0}.cover-caption{position:relative;display:flex;justify-content:space-between;align-items:center;color:white;margin-top:25px;font:13px/1.5 var(--mono);gap:16px}.stamp{position:absolute;right:-12px;top:-16px;background:var(--red);color:white;padding:10px 20px;transform:rotate(7deg);font:700 14px var(--mono);border:2px solid var(--paper);z-index:2}.ticker{background:var(--red);color:white;overflow:hidden;padding:15px 0;border-block:1px solid var(--ink)}.ticker p{margin:0;white-space:nowrap;font:24px/1 var(--display);letter-spacing:2px;word-spacing:18px;text-align:center}.section{padding-block:80px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:24px;margin-bottom:32px}.section h2{font:clamp(44px,5vw,72px)/1 var(--display);letter-spacing:-1px;margin:0}.section-head p{margin:0;color:#555;font-size:14px}.section-label{display:block;font:13px var(--mono);margin-bottom:14px;letter-spacing:1px}.filters{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}.filter{font:700 14px var(--mono);border:1px solid var(--line);background:none;min-height:44px;padding:8px 18px}.filter[aria-pressed=true]{color:white;background:var(--ink);border-color:var(--ink)}.filter:hover{border-color:var(--ink)}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 24px}.issue[hidden]{display:none}.cover-button{width:100%;display:block;padding:19px;border:1px solid #d5d5ce;background:#e5e5df;position:relative;transition:background .25s}.cover-button img{width:100%;aspect-ratio:5/6;object-fit:contain;transition:transform .25s}.cover-button:hover{background:#d5d5ce}.cover-button:hover img{transform:rotate(-3deg) scale(1.025)}.issue-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:13px}.issue h3{font:24px/1.2 var(--display);margin:0}.issue .details{font:12px var(--mono);border-bottom:1px solid #777}.artist{font-size:13px;line-height:1.7;color:#555;margin:8px 0 0}.more{display:block;margin:36px auto 0;min-width:220px;background:transparent}.count{font:13px var(--mono);color:#555;text-align:center;margin-top:18px}.about{background:var(--ink);color:var(--paper);padding:80px 0}.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:10%;align-items:start}.about h2{font:clamp(52px,5vw,76px)/.95 var(--display);margin:0;letter-spacing:-1px}.about h2 span{color:var(--red);display:block}.about .lead{font-size:26px;font-weight:700;line-height:1.6;margin:0 0 25px}.about p{color:#c8c8c2;line-height:2}.specs{display:flex;gap:32px;border-top:1px solid #444;margin-top:30px;padding-top:25px}.specs b{display:block;color:white;font:27px var(--display)}.specs span{font:12px var(--mono);color:#aaa}.store-band{display:grid;grid-template-columns:1.4fr 1fr;gap:10%;align-items:center}.store-band h2{font-size:clamp(50px,6vw,86px);line-height:.95}.store-band p{color:#555;max-width:450px;margin:24px 0}.store-links{border-top:1px solid var(--ink)}.store-links a{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--ink);padding:23px 0;font:700 20px var(--mono)}.store-links a:hover{color:var(--red)}.store-links span{font:13px var(--mono)}.contact{border-top:1px solid var(--line);padding:35px 0;display:flex;align-items:center;justify-content:space-between;gap:30px}.contact p{margin:5px 0 0;color:#555;font-size:14px}.contact h3{margin:0;font:24px var(--display)}footer{background:var(--ink);color:var(--paper);padding:45px 0 25px}.footer-logo{font:clamp(48px,12.4vw,175px)/.9 var(--display);letter-spacing:-.025em;border-bottom:1px solid #444;padding-bottom:28px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font:12px/1.6 var(--mono);margin-top:22px}.footer-bottom a:hover{color:var(--red)}dialog{width:min(900px,94vw);max-height:90dvh;padding:0;border:0;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#000c}.modal-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;padding:45px}.modal-img{width:100%;max-height:70dvh;object-fit:contain}.modal-text{align-self:center}.modal-text h2{font:40px var(--display);line-height:1.1}.modal-text p{font-size:15px;color:#555}.close{position:absolute;top:8px;right:10px;border:0;background:var(--paper);padding:8px 12px;font:14px var(--mono);min-height:40px}.modal-text .btn{margin-top:16px}body.modal-open{overflow:hidden}.noscript{padding:20px;border:1px solid var(--line);margin-bottom:25px}
@media(min-width:1600px){.hero h1{font-size:140px}}
@media(max-width:1000px){.hero{grid-template-columns:1.2fr 1fr;gap:4%;padding-top:44px}.hero h1{font-size:9vw}.cover-stage{padding:28px 25px}.navlinks{gap:18px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.about-grid{gap:7%}.hero h2{font-size:25px}}
@media(max-width:700px){html{scroll-padding-top:75px}.wrap{padding-inline:clamp(20px,6vw,42px)}.nav{min-height:65px}.brand{font-size:24px}.menu{display:block}.navlinks{display:none;position:absolute;top:65px;left:0;right:0;background:var(--paper);padding:20px 6%;border-bottom:1px solid var(--ink);flex-wrap:wrap;gap:20px}.navlinks.open{display:flex}.meta{padding:14px 0;font-size:12px;letter-spacing:0}.meta span:last-child{display:none}.hero{grid-template-columns:1fr;gap:40px;padding:35px 0 45px}.hero h1{font-size:15.8vw;margin-bottom:22px;letter-spacing:-.035em}.eyebrow{margin-bottom:20px}.hero h2{font-size:24px;margin:23px 0 16px}.intro{max-width:100%;font-size:16px;margin-bottom:24px}.cover-stage{margin:0 12px;padding:30px 35px 25px}.cover-stage img{max-height:390px}.ticker p{font-size:19px}.section{padding-block:50px}.section-head{align-items:start;flex-direction:column;gap:14px;padding-bottom:20px;margin-bottom:24px}.section h2{font-size:48px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}.cover-button{padding:10px}.issue h3{font-size:22px}.issue-meta{gap:6px;flex-wrap:wrap}.artist{font-size:13px}.about{padding:55px 0}.about-grid{grid-template-columns:1fr;gap:32px}.about h2{font-size:64px}.about .lead{font-size:23px}.specs{gap:25px;flex-wrap:wrap}.store-band{grid-template-columns:1fr;gap:22px}.store-band h2{font-size:58px}.contact{align-items:flex-start;flex-direction:column;padding:26px 0}.footer-logo{font-size:15.5vw}.footer-bottom{flex-wrap:wrap}.modal-inner{grid-template-columns:1fr;padding:45px 24px 28px;gap:12px}.modal-img{max-height:45dvh}.modal-text h2{font-size:32px;margin:8px 0}.modal-text p{margin:8px 0}.modal-text .btn{margin-top:10px}.stamp{right:-8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.more[hidden]{display:none}

/* Display the printed cover edge-to-edge, without the product photo surround. */
.cover-window{display:block;position:relative;overflow:hidden;aspect-ratio:300 / 426;width:100%}
.cover-window img{position:absolute;left:-26.666667%;top:-15.023474%;width:153.333333%;height:129.577465%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:fill;transform:none;filter:none}
.cover-stage .cover-window{max-width:331px;margin:auto;transform:rotate(-5deg);filter:drop-shadow(12px 14px 0 #00000066);transition:transform .35s}
.cover-stage:hover .cover-window{transform:rotate(0)}
.cover-stage:hover img,.cover-button:hover img{transform:none}
.cover-button{padding:0;border:0;background:transparent}
.cover-button:hover{background:transparent}
.cover-button:hover .cover-window{filter:brightness(.92)}
.modal-cover{align-self:center;justify-self:center;max-width:calc(70dvh * 300 / 426)}
.risograph-section{border-top:1px solid var(--line)}
.riso-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.riso-card>img{width:100%;aspect-ratio:5 / 6;object-fit:contain;background:#e6e6e0;transition:filter .2s}
.riso-card:hover>img{filter:brightness(.93)}
.riso-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px}
.riso-caption h3{font:clamp(22px,2.8vw,34px)/1.2 var(--display);margin:0}
.riso-caption span{font:13px var(--mono);white-space:nowrap}
.riso-card>p{font-size:14px;text-decoration:underline;text-underline-offset:5px;margin-top:12px}
.riso-end{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:35px}
.riso-end p{font-size:14px;color:#555}
@media(max-width:1000px){.navlinks{gap:14px}.navlinks .shop{padding:9px 12px}}
@media(max-width:700px){.cover-stage .cover-window{max-width:275px}.modal-cover{max-width:calc(45dvh * 300 / 426)}.riso-grid{gap:26px;grid-template-columns:1fr}.riso-card>img{max-height:480px}.riso-caption h3{font-size:28px}.riso-end{align-items:flex-start;flex-direction:column;gap:10px}}

.riso-card>.riso-artist{font:13px/1.7 var(--mono);color:#555;text-decoration:none;margin:9px 0 0}

/* Original JOOOINT artwork, placed throughout the page. */
.hero h1.hero-art-title{font-size:clamp(64px,7.2vw,112px);margin-bottom:30px}
.graffiti-logo{width:100%;height:auto;mix-blend-mode:multiply;margin:0 0 28px}
.hero-art-title .outline{font-size:.8em;letter-spacing:.015em}
.about-art{width:min(100%,340px);height:auto;margin:36px auto 0;filter:invert(1);mix-blend-mode:screen}
.store-visual{min-width:0}
.store-art{width:min(100%,300px);height:auto;margin:0 auto 28px;mix-blend-mode:multiply}
@media(max-width:1000px){.hero h1.hero-art-title{font-size:7.7vw}}
@media(max-width:700px){.hero h1.hero-art-title{font-size:13.2vw}.graffiti-logo{margin-bottom:20px}.about-art{width:min(76%,290px);margin-top:28px}.store-art{width:min(72%,270px);margin:12px auto 28px}}

/* Black-background artwork supplied for the logo and store section. */
.hero-art-title .graffiti-logo{mix-blend-mode:normal;margin:0;width:100%;height:auto}
.store-art{mix-blend-mode:normal}

/* JOOOINT film in the featured hero position. */
.film-stage{width:100%;max-width:360px;justify-self:center;background:#111;border:1px solid var(--ink);line-height:0}
.hero-film{display:block;width:100%;height:auto;aspect-ratio:512 / 910;object-fit:contain}
@media(max-width:700px){.film-stage{max-width:320px}}

/* Exhibition announcement. */
.exhibition{background:#e5eef0;border-bottom:1px solid var(--line)}
.exhibition .section-head h2{font-size:clamp(32px,4.7vw,64px);line-height:1.1;overflow-wrap:anywhere}
.exhibition-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;align-items:center}
.exhibition-poster{display:block;max-width:440px;width:100%;justify-self:center}
.exhibition-poster img{width:100%;height:auto}
.exhibition-info{min-width:0}
.exhibition-date{font:700 clamp(27px,3.3vw,46px)/1.5 var(--mono);letter-spacing:-1.5px;margin:0 0 30px}
.exhibition-details{margin:0 0 32px}
.exhibition-details div{border-top:1px solid #a5b5b9;padding:18px 0}
.exhibition-details dt{font:13px var(--mono);margin-bottom:8px}
.exhibition-details dd{font-size:18px;margin:0;overflow-wrap:anywhere}
@media(min-width:701px) and (max-width:1150px){.navlinks{gap:10px;font-size:12px}.navlinks .shop{padding:9px 10px}}
@media(max-width:700px){.exhibition{padding:45px 0}.exhibition-grid{grid-template-columns:1fr;gap:30px}.exhibition-poster{max-width:380px}.exhibition-date{font-size:clamp(24px,7vw,36px)}.exhibition-details dd{font-size:17px}}