:root{color-scheme:dark;--bg:#141516;--surface:#1d1f21;--ink:#f3f3ef;--muted:#aeb0b2;--line:#36383b;--accent:#ffc329}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{background:var(--bg);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}main,.header,footer{width:min(1400px,90%);margin:0 auto}.header{padding:25px 0 21px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-weight:800;font-size:24px;letter-spacing:-.05em;line-height:1.05}.brand img{object-fit:contain;image-rendering:pixelated}.brand-sub{display:block;font-size:10px;font-weight:400;letter-spacing:.16em;color:var(--muted);margin-top:8px}.edition{font-size:12px;letter-spacing:.11em;color:var(--muted)}.intro{padding:40px 0 33px;display:flex;justify-content:space-between;align-items:baseline;gap:24px}h1{font-size:clamp(38px,4.8vw,66px);font-weight:800;letter-spacing:-.055em;line-height:1.05;margin:0}h1 span{font-weight:300;color:#b9bbbc}.intro p{color:var(--muted);font-weight:300;margin:0;font-size:16px}.category-nav{display:flex;gap:35px;position:sticky;top:0;z-index:2;background:#141516f5;backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0}.category-nav a{font-size:14px;font-weight:600;white-space:nowrap;position:relative}.category-nav a span{color:#929699;font-weight:400;font-size:12px;margin-left:7px}.category-nav a.active{color:var(--accent)}.category-nav a.active:after{content:'';height:2px;background:var(--accent);position:absolute;bottom:-18px;left:0;right:0}.category{padding:38px 0 52px;scroll-margin-top:0}.section-heading{display:flex;align-items:center;gap:18px;margin-bottom:22px}.section-heading>span{color:var(--accent);font-size:12px}.section-heading h2{font-size:24px;letter-spacing:-.03em;font-weight:700;margin:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 26px}.music-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card{min-width:0}.card-open{display:block;border:0;background:var(--surface);width:100%;padding:0;position:relative;overflow:hidden}.stage{height:auto;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}.stage img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.music-grid .stage{aspect-ratio:4/5;background:#e9e9e3}.music-grid .stage img{object-fit:cover;object-position:top}.music-grid .card:first-child .stage img{object-fit:contain}.logos-grid .stage{background:#ecece7;padding:36px}.logos-grid .stage img{object-fit:contain}.image-count{position:absolute;right:12px;bottom:12px;padding:5px 11px;border-radius:30px;background:#141516e8;color:#f3f3ef;border:1px solid #ffffff40;font-size:12px;display:flex;gap:10px;align-items:center}.card-open:hover .stage>img{transform:scale(1.025)}.card-open:hover .image-count{background:var(--accent);color:#111;border-color:var(--accent)}.card-info{padding:16px 0 0}.card-top{display:flex;justify-content:space-between;gap:14px;align-items:baseline}.card-info h3{font-size:22px;font-weight:750;line-height:1.15;letter-spacing:-.025em;margin:0}.client{font-size:14px;color:#d3d4d4;margin:7px 0 2px;font-weight:400}.description{font-size:14px;line-height:1.5;color:var(--muted);font-weight:300;margin:0}.external{font-size:13px;display:inline-block;margin-top:10px;border-bottom:1px solid #727579;line-height:1.5}.external:hover{color:var(--accent)}.category+.category{border-top:1px solid var(--line)}.campaign-stack{display:flex;height:100%;width:100%;gap:12px;padding:20px;background:#222528;align-items:flex-start;overflow:hidden}.campaign-stack img{width:calc((100% - 24px)/3);height:auto!important;object-fit:contain!important;box-shadow:0 8px 18px #0006}.campaign-stack img:nth-child(2){margin-top:28px}.campaign-stack img:nth-child(3){margin-top:56px}.tools{border-top:1px solid var(--line);padding:34px 0 40px;display:flex;justify-content:space-between;gap:25px}.tools h2{font-size:16px;font-weight:700;margin:0;white-space:nowrap}.tools p{display:flex;flex-wrap:wrap;gap:14px 28px;margin:0;color:var(--muted);font-size:14px;font-weight:300}footer{border-top:1px solid var(--line);padding:23px 0 30px;display:flex;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.footer-note,footer a{font-weight:400;color:var(--muted)}dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#101112;color:var(--ink)}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#101112}.viewer-head{padding:18px 4%;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-shrink:0;border-bottom:1px solid #303234}.viewer-head h2{font-size:20px;letter-spacing:-.025em;margin:0;font-weight:700}.viewer-head p{font-size:13px;color:var(--muted);margin:3px 0 0}.viewer-head button,#detail{border:1px solid #55595b;border-radius:6px;background:transparent;padding:8px 15px;font-size:14px}.viewer-head button span{font-size:20px;padding-left:12px}.viewer-body{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:20px 4%;background:#1a1c1e}.viewer-body>img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}.viewer-body.zoom{display:block;text-align:center}.viewer-body.zoom>img{width:min(100%,1400px);height:auto;max-height:none;max-width:100%;margin:auto}.viewer-bottom{padding:13px 4% 10px;flex-shrink:0}.image-info{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:12px}#detail[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.viewer-nav{display:flex;justify-content:center;align-items:center;gap:16px}.viewer-nav>button{border:1px solid #4c4f51;background:transparent;border-radius:50%;height:38px;width:38px;font-size:26px;line-height:1}#thumbnails{display:flex;gap:10px}#thumbnails button{width:54px;height:54px;padding:3px;border:1px solid #444;background:#25282a;border-radius:4px}#thumbnails button[aria-pressed=true]{border:2px solid var(--accent)}#thumbnails img{width:100%;height:100%;object-fit:contain}.viewer-tip{text-align:center;font-size:12px;color:#919597;margin:8px 0 0}body:has(dialog[open]){overflow:hidden}@media(min-width:1500px){.stage{aspect-ratio:3/2}}@media(max-width:1000px){.intro{display:block}.intro p{margin-top:12px}.music-grid{gap:20px}.music-grid .card-info h3{font-size:20px}.tools{display:block}.tools p{margin-top:15px}.category-nav{gap:25px}}@media(max-width:700px){main,.header,footer{width:90%}.edition{display:none}.header{padding:18px 0}.brand{font-size:23px}.intro{padding:28px 0}.intro p{font-size:14px}.category-nav{overflow-x:auto;gap:24px;padding:15px 0;scrollbar-width:none}.category-nav a{font-size:13px}.category-nav a.active:after{bottom:-16px}.grid,.music-grid{grid-template-columns:1fr;gap:30px}.music-grid .stage{aspect-ratio:4/3}.music-grid .card:first-child .stage{aspect-ratio:4/4.2}.music-grid .card-info h3{font-size:22px}.category{padding:28px 0 36px}.section-heading h2{font-size:22px}.stage{aspect-ratio:4/3}.logos-grid .stage{padding:28px}.campaign-stack{padding:18px 30px}.viewer-head{padding:14px 5%}.viewer-head h2{font-size:18px}.viewer-head button{padding:6px 10px}.viewer-head button span{padding-left:6px}.viewer-body{padding:14px 3%}.viewer-tip{display:none}.viewer-bottom{padding-bottom:18px}.tools p{display:grid;gap:8px}footer{font-size:13px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Keep every supplied cover and mockup visible in full. */
.grid:not(.music-grid) .stage img{object-fit:contain}
