/* Gallery and viewer primitives; the shared site stylesheet owns the theme. */
.filters{display:flex;justify-content:space-between;align-items:center;gap:20px}
#filterButtons{display:flex;flex-wrap:wrap;gap:8px}.filters button{font:inherit;cursor:pointer}.filters button span{margin-left:8px}
.grid{display:grid}.card{min-width:0}.card[hidden]{display:none}.preview-button{position:relative;width:100%;display:block;border:0;text-align:left;cursor:pointer}.preview-button img{display:block;width:100%;height:auto}.preview-button::after{position:absolute}.card-meta{display:flex;justify-content:space-between;gap:16px}.card-meta h2{margin:0 0 8px}.card-meta p{margin:0}
.viewerbar{display:flex;align-items:center;height:72px;padding:12px 20px}.viewerbar>div:nth-child(2){flex:1;min-width:0}.viewerbar strong{display:block;font-size:13px}.viewerbar span{display:block;font-size:11px;margin-top:4px}.size-switch{display:flex}.viewerbody{height:calc(100% - 72px);display:grid;grid-template-columns:260px minmax(0,1fr)}.viewerbody aside{padding:30px 24px;overflow:auto}.viewerbody h2{font:32px/1.15 Georgia,serif;margin:20px 0 30px}.viewerbody dt{font-size:11px;letter-spacing:.6px;margin-top:24px}.viewerbody dd{font-size:14px;line-height:1.7;margin:8px 0}.note{font-size:12px;line-height:1.7;margin-top:30px}.stage{position:relative;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:24px}iframe{width:600px;max-width:100%;height:100%;min-height:0;flex-shrink:1;border:0}dialog{width:calc(100vw - 40px);max-width:1320px}.viewer-status{position:absolute;inset:0;display:grid;place-content:center;font-size:14px;margin:0;background:#0d0f0b;z-index:1}.viewer-status[hidden]{display:none}.viewerbar a{font-size:11px}
@media(max-width:1000px){.viewerbody{grid-template-columns:210px minmax(0,1fr)}.viewerbody aside{padding:24px 18px}.stage{padding:16px}}

/* Give the campaign itself the whole gallery surface. */
.portfolio-page .preview-button:has(.campaign-cover){height:auto;aspect-ratio:4/7;padding:0;display:block;overflow:hidden;background:transparent;border-radius:0}
.portfolio-page .preview-button .campaign-cover{width:100%;height:100%!important;object-fit:cover;object-position:center top;box-shadow:none!important}
.portfolio-page .preview-button:has(.campaign-cover)::before{display:none}

/* Website concepts extend the existing portfolio, preserving the email gallery. */
.portfolio-categories{display:flex;gap:28px;padding-block:10px 30px}.portfolio-categories a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:5px;font-weight:600}
.website-portfolio{padding-block:36px 62px;border-top:1px solid var(--line)}.website-work-heading{display:flex;gap:40px;justify-content:space-between;align-items:start;margin-bottom:32px}.website-work-heading h2{max-width:10ch}.website-work-heading p{max-width:49ch}.website-projects{display:grid;grid-template-columns:1fr 1fr;gap:40px 28px;margin-bottom:30px}.website-project{min-width:0}.website-project>a{display:block}.website-project img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;background:var(--surface)}.website-project-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px}.website-project h3{font:400 28px/1.25 Georgia,serif;margin:0 0 7px}.website-project p{font-size:12px}.website-project .text-link{font-size:11px;white-space:nowrap}.website-project>a:hover .text-link{text-decoration:underline}.email-work-heading{padding-top:42px;border-top:1px solid var(--line)}.email-work-heading p{margin-top:16px}
@media(max-width:700px){.website-work-heading{display:block}.website-work-heading h2{max-width:none}.website-work-heading p{margin-top:22px}.website-projects{grid-template-columns:1fr;gap:18px}.website-project-meta{padding-block:18px;gap:10px}.website-project h3{font-size:25px}.website-portfolio{padding-block:24px 40px}.website-project .text-link{font-size:10px}.email-work-heading{padding-top:32px}}