/* Extend the existing archive without changing the product grid. */
.work-types{position:fixed;z-index:32;top:var(--header-height);left:var(--page-gutter);height:42px;display:flex;align-items:center;gap:22px;pointer-events:none}
.work-types>a{display:flex;align-items:center;min-height:40px;font-size:9px;line-height:1;pointer-events:auto}
.work-types>a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.work-types>a:hover{text-decoration:none}
.work-page .catalog-main{min-height:100svh}
.work-page .portfolio-grid{align-items:start}
.work-photo{display:block;position:absolute;inset:9%;width:auto;height:auto}
.work-photo>img{object-fit:contain}
.campaign-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:0 var(--page-gutter);overflow:hidden}
.campaign-top{display:flex;align-items:center;justify-content:space-between;min-height:64px;font-size:10px}
.campaign-stage{min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.campaign-stage{position:relative}
.campaign-stage>img{width:100%;height:100%;max-width:1600px;object-fit:contain}
.campaign-caption{position:static;inset:auto;display:grid;grid-template-columns:1fr minmax(0,3fr) 1fr;align-items:center;gap:20px;min-height:100px;padding:20px 0;color:#000;text-shadow:none}
.campaign-caption>div{text-align:center}
.campaign-caption h2{font-size:11px;line-height:1.4;font-weight:400}
.campaign-caption p,.campaign-caption a{font-size:9px;line-height:1.5}
.campaign-caption p{margin-top:5px}
.campaign-caption a{display:inline-flex;align-items:center;min-height:36px;margin-top:5px}
.campaign-caption>button{font-size:10px;min-height:44px;padding:0;justify-self:start}
.campaign-caption>button:last-child{justify-self:end}
.websites-page .catalog-main{display:flex;flex-direction:column}
.websites-page .shared-footer{margin-top:auto}
.websites-page .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.websites-page .portfolio-image{aspect-ratio:1.25}
.campaign-caption>button:disabled{visibility:hidden}
@media(max-width:720px){
  .work-types{left:0;right:0;justify-content:center;gap:26px}
  .work-page:not(.campaigns-page):not(.websites-page) .filters{top:calc(var(--header-height) + 38px)}
  .work-page:not(.campaigns-page):not(.websites-page) .catalog-main{padding-top:calc(var(--header-height) + 85px)}
  .campaign-top{min-height:60px}
  .campaign-caption{min-height:110px;grid-template-columns:1fr minmax(0,3fr) 1fr;gap:12px;padding:20px 0 max(20px,env(safe-area-inset-bottom))}
  .campaign-caption h2{font-size:10px}
  .campaign-caption>button{font-size:9px}
  .websites-page .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){.websites-page .portfolio-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .campaign-caption h2{font-size:11px}
  .campaign-caption p,.campaign-caption a{font-size:10px}
  .campaign-caption>button{min-width:44px}
  .campaign-caption{gap:8px;min-height:120px;padding:12px 0}
  .campaign-caption a{min-height:44px}
}
@media(max-height:500px) and (orientation:landscape){
  .campaign-top{min-height:44px}
  .campaign-caption,.taste-page .campaign-caption{min-height:64px;padding:4px 0}
  .campaign-caption p{margin-top:0}
  .campaign-caption a{margin-top:0;min-height:28px}
}

@media(max-width:1000px){
  .campaign-dialog[open]{padding:env(safe-area-inset-top,0px) var(--page-gutter) env(safe-area-inset-bottom,0px)}
}
@media(max-width:720px){
  .work-types{height:44px;gap:22px}
  .work-types>a{font-size:11px;min-height:44px;min-width:44px;justify-content:center}
  .work-page:not(.campaigns-page):not(.websites-page) .filters{top:calc(var(--header-height) + 44px);height:44px;gap:16px}
  .catalog-page .filters button{font-size:10px;min-width:44px;min-height:44px}
  .work-page:not(.campaigns-page):not(.websites-page) .catalog-main{padding-top:calc(var(--header-height) + 100px)}
  .campaign-top{min-height:60px;font-size:11px}
  .campaign-caption{padding:16px 0;gap:14px;min-height:110px;grid-template-columns:64px minmax(0,1fr) 64px}
  .campaign-caption>button{font-size:11px;min-width:64px;min-height:44px}
  .campaign-caption>button:last-child{text-align:right}
  .campaign-caption h2{font-size:12px;line-height:1.4}
  .campaign-caption p,.campaign-caption a{font-size:10px;line-height:1.5}
  .campaign-caption a{min-width:44px;justify-content:center}
}
@media(max-height:500px) and (orientation:landscape){
  .campaign-top{min-height:44px}
  .campaign-caption,.taste-page .campaign-caption{min-height:64px;padding:4px 0}
}