/* Graphics: pop poster. Yellow hero, stickers, hard shadows, tape, a moving ticker, bento grids */
[data-page="graphics"]{--y:#FFD84D;--sky:#8EC9FF;--rose:#FFC2D6}
[data-page="graphics"] .t{transition:transform .2s,box-shadow .2s}
[data-page="graphics"] .t:hover{transform:rotate(-1deg) translate(-2px,-2px);box-shadow:8px 8px 0 var(--text)}
.hgfx{position:relative;overflow:hidden;padding:var(--s8) 0 calc(var(--s9) + 20px);background:var(--y);border-bottom:3px solid var(--text)}
.hgfx::before{content:"";position:absolute;right:-90px;top:-90px;width:460px;height:460px;border-radius:50%;background:radial-gradient(var(--accent) 22%,transparent 24%) 0 0/22px 22px}
.hgfx .wrap{position:relative;display:grid;gap:var(--s7);align-items:center}
@media(min-width:900px){.hgfx .wrap{grid-template-columns:1.1fr .9fr}}
.hgfx h1{font-size:clamp(2.4rem,6.6vw,5.6rem);line-height:.95;margin:var(--s5) 0;text-transform:uppercase;text-shadow:5px 5px 0 var(--accent)}
.hgfx .k{display:inline-block;background:var(--text);color:var(--bg);padding:4px 12px;transform:rotate(-2deg)}.hgfx .k::before{display:none}
.hgfx .lead{color:var(--text)}
.hgfx .pile{position:relative}
.hgfx .pile .t{position:relative}
.hgfx .pile .t::before{content:"";position:absolute;top:-12px;left:50%;width:58px;height:20px;margin-left:-29px;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.12);transform:rotate(-4deg);z-index:2}
.burst{position:absolute;right:2%;bottom:-14%;width:128px;height:128px;background:var(--accent);display:grid;place-items:center;text-align:center;font:700 .72rem/1.15 var(--display);text-transform:uppercase;transform:rotate(12deg);clip-path:polygon(50% 0,61% 12%,76% 6%,80% 21%,95% 25%,89% 40%,100% 50%,89% 60%,95% 75%,80% 79%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 79%,5% 75%,11% 60%,0 50%,11% 40%,5% 25%,20% 21%,24% 6%,39% 12%)}
.gm{position:relative;z-index:2;overflow:hidden;white-space:nowrap;margin:-22px -3% 0;padding:14px 0;background:var(--text);color:var(--bg);font:700 1.3rem var(--display);text-transform:uppercase;transform:rotate(-1.2deg);border-block:3px solid var(--text)}
.gm-t{display:inline-flex;animation:gm 30s linear infinite}.gm-t span{padding:0 var(--s5)}.gm-t span::after{content:"✱";margin-left:var(--s6);color:var(--accent)}
@keyframes gm{to{transform:translateX(-50%)}}
.sec h2{display:inline-block;background:var(--accent);border:3px solid var(--text);box-shadow:6px 6px 0 var(--text);padding:.15em .55em;transform:rotate(-1.2deg);font-size:clamp(1.3rem,3.4vw,2.2rem)}
.sec.bg-s{background:var(--sky);border-block:3px solid var(--text)}.sec.bg-r{background:var(--rose);border-block:3px solid var(--text)}.sec.bg-y{background:var(--y);border-block:3px solid var(--text)}
.gcard{background:var(--y);border:3px solid var(--text);box-shadow:8px 8px 0 var(--text);padding:var(--s5);margin-bottom:var(--s7)}
.gcard.p{background:var(--rose)}.gcard .t{box-shadow:none}
.gcard figcaption{display:inline-block;background:var(--text);color:var(--bg);font:700 .72rem var(--display);text-transform:uppercase;padding:4px 10px;transform:rotate(-2deg);margin-top:var(--s3)}
.gcard .flow>.ico,.gcard .pair>.ico{width:56px;height:56px;color:var(--text)}
.bento{display:grid;gap:var(--s4);grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(130px,19vw,250px)}
.bento .b2{grid-column:span 2}.bento .t{height:100%;aspect-ratio:auto!important}
@media(max-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
.mosaic{display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.mosaic{grid-template-columns:repeat(4,1fr)}}
.mosaic .big{grid-column:span 2;grid-row:span 2}.mosaic .t{width:100%}
.duo .t{background:#000}
@media(min-width:660px){.duo .t{aspect-ratio:9/16!important}}
.duo video,.duo .m img{object-fit:contain}
.g-sm>a:nth-child(odd) .t{transform:rotate(-1deg)}.g-sm>a:nth-child(even) .t{transform:rotate(1deg)}
.step{border:3px solid var(--text);padding:var(--s4);box-shadow:5px 5px 0 var(--text);background:var(--surface)}
.step .num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);border:3px solid var(--text);font:700 .8rem var(--display);color:var(--text)}
.step p{color:var(--text)}
[data-page="graphics"] main{overflow-x:clip}

.bento .b>a.zoom,.mosaic>div>a.zoom{display:block;height:100%}
.gcard a.zoom{display:block}

/* Logo to 3D animation: the logo tile is exactly as tall as the video */
@media(min-width:701px){
  .gcard.p .pair{grid-template-columns:calc((100% - 56px - 2*var(--s4))*.36) 56px calc((100% - 56px - 2*var(--s4))*.64);gap:var(--s4);align-items:start}
  .gcard.p .pair>.ico{align-self:center;margin-top:calc(-1 * var(--s6))}
}
@media(max-width:700px){
  .gcard.p .pair>figure:first-child .t{aspect-ratio:16/9!important}
  .gcard.p .pair>figure:first-child img{object-fit:contain;background:#fff}
}

/* logos: the hover lift works again, and the cursor stays a normal arrow */
[data-page="graphics"] a.zoom{cursor:default}
[data-page="graphics"] a.zoom:hover .t{transform:rotate(-1deg) translate(-2px,-2px);box-shadow:8px 8px 0 var(--text)}