/* CNG Studios house style, part 2: components shared by the subpages
   (store, coloring books, publishing, style guide). Uses the tokens in house.css. */

nav ul a[aria-current=page]{background:var(--yl)}
.page-hero{position:relative;padding:48px 0 130px}
.page-hero h1{font-size:clamp(4rem,14vw,12.5rem);line-height:.84;color:var(--hc,var(--bl));letter-spacing:-.01em}
.page-hero .hand{font-size:clamp(1.6rem,3vw,2.5rem);max-width:24ch;margin-top:24px;rotate:-2deg}
.page-hero .lead{max-width:46ch;margin:16px 0 24px;font-weight:600;font-size:1.15rem}
.page-hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.cluster .sub{max-width:52ch;margin-top:14px;font-weight:600}
.sticky-chips{position:sticky;top:54px;z-index:40;padding:10px 0;background:rgba(246,243,234,.92);backdrop-filter:blur(8px)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{font:800 15px Karla,sans-serif;padding:9px 16px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;rotate:-1deg;transition:rotate .15s}
.chip:nth-child(even){rotate:1deg}
.chip:hover{rotate:0deg}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}

/* product card: a taped polaroid. Same markup on the store and the coloring books page */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:40px 26px;margin-top:44px}
.prod{position:relative;background:#fff;padding:12px 12px 18px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);display:flex;flex-direction:column;color:var(--ink)}
.prod:nth-child(4n+1){rotate:-1.4deg}.prod:nth-child(4n+2){rotate:1deg}.prod:nth-child(4n+3){rotate:-.6deg}.prod:nth-child(4n){rotate:1.5deg}
.prod .cov{display:grid;place-items:center;aspect-ratio:4/5;background:#eef0f6;overflow:hidden;margin-bottom:14px}
.prod .cov img{width:100%;height:100%;object-fit:contain}
.prod .cov.photo img{object-fit:cover}
.prod .cov.q{background:repeating-linear-gradient(-45deg,#f6f3ea 0 14px,#ece8dc 14px 28px);font:400 5.4rem/1 Anton,sans-serif;color:var(--or)}
.prod h3{font:800 1.2rem/1.2 Karla,sans-serif;text-transform:none;letter-spacing:0}
.prod .by{font:400 1.12rem/1.2 "Patrick Hand",cursive;margin-top:2px}
.prod p{font-size:.95rem;margin:8px 0 6px}
.prod .fmt{font-size:.85rem;font-weight:700;color:#4a4a55}
.prod .price{font:400 1.7rem/1 Anton,sans-serif;margin-top:8px}
.prod .buys{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px}
.prod .more{font-size:.9rem;font-weight:800;margin-top:10px}
.bbtn{display:inline-block;font:800 .92rem/1 Karla,sans-serif;text-decoration:none;padding:10px 14px;background:var(--ink);color:#fff;border:0;cursor:pointer;transition:translate .12s}
.bbtn:hover{translate:0 -2px}
.bbtn.alt{background:var(--yl);color:var(--ink)}
.bbtn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.sticker{position:absolute;z-index:3;top:-14px;right:-10px;rotate:8deg;padding:6px 12px;font:400 1rem/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);background:var(--yl);box-shadow:0 6px 10px -6px rgba(0,0,0,.4)}
.sticker.new{background:var(--gr)}.sticker.soon{background:var(--pk)}.sticker.adult{background:var(--ink);color:#fff}
.prod.soon{background:#fdfcf8;box-shadow:0 0 0 3px #ddd8ca inset,0 14px 22px -12px rgba(22,22,29,.3)}

/* peek inside */
dialog.peek{border:0;padding:22px;background:#fff;color:var(--ink);width:min(900px,94vw);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
dialog.peek::backdrop{background:rgba(22,22,29,.72)}
.peek h2{font-size:2rem;margin:0 50px 14px 0}
.peek .imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.peek figure{margin:0}.peek img{width:100%;border:1px solid #ddd}
.peek figcaption{font:400 1.3rem "Patrick Hand",cursive;text-align:center;margin-top:6px}
.peek .x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;background:var(--ink);color:#fff;font:400 24px/1 Karla,sans-serif;cursor:pointer}

/* music */
.artists{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.artist{background:#fff;padding:26px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);color:var(--ink)}
.artist:first-child{rotate:-1deg}.artist:nth-child(2){rotate:1.2deg}
.artist h3{font-size:2.6rem}
.artist p{margin:8px 0 16px;font-weight:600}
.artist .buys{display:flex;flex-wrap:wrap;gap:8px}
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px;margin-top:34px}
.album{display:block;background:#fff;padding:8px 8px 12px;text-decoration:none;color:var(--ink);box-shadow:0 12px 18px -10px rgba(22,22,29,.45);transition:rotate .2s,translate .2s}
.album:nth-child(odd){rotate:-2deg}.album:nth-child(even){rotate:2deg}
.album:hover,.album:focus-visible{rotate:0deg;translate:0 -6px}
.album b{display:block;font:400 1.15rem/1.15 "Patrick Hand",cursive;margin-top:8px}
.album small{font-weight:700;font-size:.82rem}
.fine{font-size:.9rem;font-weight:600;margin-top:30px}

/* publishing */
.imprint{display:grid;grid-template-columns:auto auto 1fr;gap:34px;align-items:end;margin-top:44px}
.book{display:flex;align-items:stretch;filter:drop-shadow(0 20px 18px rgba(22,22,29,.35));rotate:-3deg}
.book .spine{width:46px;background:#1d1631;color:#f2d38a;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:space-between;padding:12px 0;font:400 14px/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.book .spine b{font:inherit;color:var(--yl)}
.book img{width:210px;height:auto}
.imp-card{background:#fff;padding:20px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);max-width:300px;rotate:1.5deg}
.imp-card label{display:block;font:400 1.35rem/1.15 "Patrick Hand",cursive;margin-bottom:10px}
.imp-card input{width:100%;padding:12px;border:3px solid var(--ink);font:800 1.05rem Karla,sans-serif;color:var(--ink);background:#fff}
.imp-card small{display:block;margin-top:8px;font-weight:600;font-size:.85rem}
.copyright{background:var(--yl);padding:18px 20px;font:400 1.25rem/1.3 "Patrick Hand",cursive;box-shadow:0 10px 14px -8px rgba(22,22,29,.4);max-width:340px;rotate:-2deg}
.copyright b{font-weight:400;text-decoration:underline wavy;text-underline-offset:4px}
.sheet-table{background:#fff;padding:10px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);margin-top:40px;overflow-x:auto;rotate:-.4deg}
.sheet-table table{border-collapse:collapse;width:100%;min-width:680px;color:var(--ink)}
.sheet-table th,.sheet-table td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:2px dashed #e2ddd0;font-weight:600}
.sheet-table thead th{font:400 1.3rem/1.05 Anton,sans-serif;text-transform:uppercase;border-bottom:3px solid var(--ink)}
.sheet-table thead th:last-child,.sheet-table td:last-child{background:#fff6c4}
.sheet-table tbody th{font-weight:800}
.quiz{background:#fff;padding:28px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);margin-top:36px;max-width:820px;color:var(--ink)}
.quiz .count{font:400 1.2rem "Patrick Hand",cursive}
.quiz h3{font:800 1.6rem/1.2 Karla,sans-serif;text-transform:none;letter-spacing:0;margin:4px 0}
.quiz .hint{font-weight:600;font-size:.95rem;margin-bottom:8px}
.quiz [hidden]{display:none!important}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.opt{font:800 1rem/1.25 Karla,sans-serif;text-align:left;padding:14px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:translate .12s}
.opt small{display:block;font-weight:600;font-size:.85rem;margin-top:4px}
.opt:hover{translate:0 -2px}
.opt[aria-pressed=true]{background:var(--ink);color:#fff}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.linkbtn{background:none;border:0;font:800 1rem Karla,sans-serif;text-decoration:underline;cursor:pointer;color:var(--ink)}
.quiz .result h3{font:400 3rem/1 Anton,sans-serif;text-transform:uppercase}
.quiz .result ul{margin:14px 0 18px 20px;font-weight:600}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.tier{position:relative;background:#fff;padding:26px 22px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);display:flex;flex-direction:column;color:var(--ink);transition:translate .2s}
.tier:nth-child(odd){rotate:-1deg}.tier:nth-child(even){rotate:1deg}
.tier h3{font-size:1.8rem}
.tier .line{font:400 1.2rem "Patrick Hand",cursive;margin:4px 0 10px}
.tier .price{font:400 3.8rem/1 Anton,sans-serif}
.tier .price small{font:800 .95rem Karla,sans-serif;margin-left:6px}
.tier ul{margin:16px 0 22px 18px;font-weight:600;font-size:.95rem;display:grid;gap:6px}
.tier .bbtn{margin-top:auto;align-self:flex-start}
.tier.rec{translate:0 -10px;box-shadow:0 0 0 4px var(--ink),0 24px 30px -14px rgba(22,22,29,.5)}
.tier .sticker{display:none}.tier.rec .sticker{display:block}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;counter-reset:s}
.steps li{background:#fff;padding:22px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);counter-increment:s;color:var(--ink)}
.steps li:nth-child(odd){rotate:-1deg}.steps li:nth-child(even){rotate:1.2deg}
.steps li::before{content:counter(s);display:block;font:400 3.4rem/1 Anton,sans-serif;color:var(--or)}
.steps b{display:block;font:800 1.15rem Karla,sans-serif;margin:8px 0 6px}
.faq{display:grid;gap:14px;margin-top:36px;max-width:860px}
.faq details{background:#fff;padding:16px 20px;box-shadow:0 10px 16px -10px rgba(22,22,29,.4);color:var(--ink)}
.faq summary{font:800 1.1rem Karla,sans-serif;cursor:pointer}
.faq p{margin-top:10px;font-weight:500}
.partners{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--ink);padding:18px 22px;margin-top:16px}
.partners img{height:44px;width:auto}
.call{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.host{display:flex;gap:14px;align-items:center;margin:20px 0}
.host img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 14px -8px rgba(0,0,0,.5)}
.host span{display:block;font-size:.95rem;font-weight:600}
.what{margin:12px 0 0 20px;font-weight:600}
.form{position:relative;background:#fff;padding:26px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);display:grid;gap:14px;color:var(--ink)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-weight:800;font-size:.95rem;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;padding:11px;border:3px solid var(--ink);font:600 1rem Karla,sans-serif;color:var(--ink);background:#fff}
.form textarea{min-height:110px}
.form .hp{position:absolute;left:-9999px}
.form .msg{font-weight:800}
.answers{display:none;background:var(--yl);padding:10px 12px;font-weight:700;font-size:.92rem}
.answers.on{display:block}

/* style guide page */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin-top:30px}
.swatch{background:#fff;padding:10px;box-shadow:0 10px 16px -10px rgba(22,22,29,.4)}
.swatch i{display:block;height:90px;margin-bottom:8px}
.swatch b{display:block}.swatch code{font-size:.85rem}
.specimen{background:#fff;padding:22px;margin-top:20px;box-shadow:0 10px 16px -10px rgba(22,22,29,.4)}
.specimen small{display:block;font:700 .85rem Karla,sans-serif;margin-top:6px;color:#4a4a55}

@media (max-width:900px){
 .sticky-chips{top:50px}
 .prods{grid-template-columns:1fr 1fr;gap:30px 16px}
 .prod{rotate:0deg!important}
 .prod p{display:none}
 .artists,.call{grid-template-columns:1fr}
 .imprint{grid-template-columns:1fr;justify-items:start}
 .opts{grid-template-columns:1fr}
 .tiers,.steps{grid-template-columns:1fr 1fr}
 .form .two{grid-template-columns:1fr}
 .peek .imgs{grid-template-columns:1fr}
}
@media (max-width:560px){
 .tiers,.steps{grid-template-columns:1fr}
 .prod .buys .bbtn{padding:9px 10px;font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){
 .page-hero{padding-bottom:100px}
 .page-hero .pin{position:relative;right:auto!important;top:auto!important;display:inline-block;vertical-align:middle;width:21%!important;margin:26px 1.5% 0}
}

/* hero split: text on the left, the mystery box (ui/mystery.css) top right */
.page-hero .split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}
.page-hero .mystery{justify-self:end;margin-top:22px}
@media (max-width:900px){
 .page-hero .split{grid-template-columns:1fr;gap:10px}
 .page-hero .mystery{justify-self:start;margin-top:16px}
}

/* ---------- news archive (/news.html): the home news card (.xs-card in ui/extras.css), one torn sheet per year ---------- */
.news-page .nums{margin-top:26px}
.news-page [data-shelf]{scroll-margin-top:70px}
.news-page .cluster h2{font-size:clamp(3.4rem,10vw,8rem)}
.news-page .xs-news{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.news-page .xs-card:nth-child(4n+1){rotate:-.6deg}.news-page .xs-card:nth-child(4n+3){rotate:.6deg}
.news-page .xs-card p{font-size:.98rem}
.news-page .xs-tag{--mx-accent:var(--yl)}
.news-page .xs-tag[data-tag="News"]{--mx-accent:#8fdcff}
.news-page .xs-tag[data-tag="Films and shorts"]{--mx-accent:var(--pk)}
a.chip{text-decoration:none;display:inline-block}
@media (max-width:700px){.news-page .chips{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}.news-page .chip{flex:0 0 auto}.news-page .nums{gap:24px}.news-page .nums b{font-size:2.5rem}}

/* ---------- clicker comics (/clickers/comics/): strips in four languages, speech bubbles over the art ---------- */
.comics .t{display:none}
html[data-lang="en"] .comics .t[lang="en"],html[data-lang="es"] .comics .t[lang="es"],
html[data-lang="pt"] .comics .t[lang="pt"],html[data-lang="fr"] .comics .t[lang="fr"]{display:inline}
.comics .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.comics .page-hero h1{font-size:clamp(3.2rem,10vw,9rem);line-height:.9}
.comics .page-hero h1 em{font-style:normal;color:var(--or);display:inline-block}
.comic-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.comic-bar .lbl{font:400 1.3rem "Patrick Hand";margin-right:4px}
.comic-jump{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px}
.comic-jump a{display:flex;flex-direction:column;align-items:center;gap:6px;width:108px;text-decoration:none;font:800 .9rem/1.2 Karla,sans-serif;text-align:center}
.comic-jump img{width:84px;height:84px;object-fit:contain;background:#fff;padding:6px;box-shadow:0 10px 16px -8px rgba(22,22,29,.45);rotate:-3deg;transition:rotate .15s}
.comic-jump a:nth-child(even) img{rotate:3deg}
.comic-jump a:hover img{rotate:0deg}
.comic{scroll-margin-top:60px}
.comic .who{margin-top:12px;font:400 1.5rem "Patrick Hand"}
.comic .who b{display:inline-block;margin-right:8px;padding:2px 10px;background:var(--ink);color:#fff;font:800 .85rem/1.6 Karla,sans-serif}
.panels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:30px}
@media (max-width:1100px){.panels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.panels{grid-template-columns:minmax(0,1fr)}}
.pn{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:#fff;border:4px solid var(--ink);box-shadow:0 14px 22px -10px rgba(22,22,29,.45);container-type:inline-size;rotate:-.8deg}
.pn:nth-child(even){rotate:.8deg}
.pn>img{width:100%;height:100%;object-fit:cover}
.pn .num{position:absolute;left:8px;bottom:6px;font:800 .8rem/1 Karla,sans-serif;background:#fff;padding:3px 6px}
.pn .bb{position:absolute;top:3.5%;left:3.5%;right:3.5%;display:flex;gap:3%;align-items:flex-start}
.pn .b{position:relative;margin:0;max-width:56%;padding:2.6cqw 3.6cqw;border-radius:6cqw;background:#fff;color:var(--ink);border:max(2px,.6cqw) solid var(--ink);font:800 max(12px,4.6cqw)/1.22 Karla,system-ui,sans-serif;text-align:center}
.pn .b:only-child{max-width:74%}
.pn .b-R{margin-left:auto}.pn .b-C{margin:0 auto}
.pn .b::after{content:"";position:absolute;bottom:-3.2cqw;width:4cqw;height:4cqw;background:#fff;border-right:max(2px,.6cqw) solid var(--ink);border-bottom:max(2px,.6cqw) solid var(--ink);transform:rotate(45deg) skew(12deg,12deg)}
.pn .b-L::after{left:22%}.pn .b-R::after{right:22%}.pn .b-C::after{left:calc(50% - 2cqw)}
.pn .sfx{position:absolute;left:36%;top:33%;margin:0;transform:translate(-50%,-50%) rotate(-8deg);white-space:nowrap;font:400 max(22px,10.5cqw)/1 Anton,Impact,sans-serif;color:var(--or);pointer-events:none;
 text-shadow:0 .5cqw 0 #fff,.5cqw 0 0 #fff,-.5cqw 0 0 #fff,0 -.5cqw 0 #fff,0 1.4cqw 0 rgba(0,0,0,.2)}
.pn.press{cursor:pointer}
.pn.press.go{animation:comic-squish .18s ease-out}
.pn.press.go .sfx{animation:comic-pop .5s ease-out}
@keyframes comic-pop{0%{transform:translate(-50%,-50%) rotate(-8deg) scale(.5)}60%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.25)}100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
@keyframes comic-squish{50%{scale:.97}}
.pn .presser{position:absolute;right:8px;bottom:8px;padding:8px 14px;border:0;background:var(--yl);color:var(--ink);font:800 .9rem/1 Karla,sans-serif;cursor:pointer;box-shadow:0 0 0 3px var(--ink);rotate:-2deg}
.pn .presser:hover{rotate:1deg}
@media (max-width:560px){.pn,.pn:nth-child(even){rotate:0deg}.comic-jump{gap:10px}.comic-jump a{width:76px;font-size:.8rem}.comic-jump img{width:64px;height:64px}}