/* Full-width portfolio stack with image-only compositions. */
.topics-section{padding-top:110px;padding-bottom:80px;position:relative}
.archive-anchor{position:absolute;top:0;left:0;scroll-margin-top:110px}
.topics-section.page-pad{padding-inline:0}
.topic-nav{display:flex;flex-wrap:wrap;gap:6px clamp(16px,3vw,40px);padding-inline:var(--gutter);margin-bottom:28px}
.topic-nav[hidden]{display:none}
.topic-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:#fff5;text-underline-offset:.35em;font-size:clamp(13px,1.25vw,16px)}
.topic-nav a:hover,.topic-nav a:focus-visible{text-decoration-color:currentColor}
.topic-list{display:flex;flex-direction:column;isolation:isolate;--topic-gap:80px}
.topic-jump{position:relative;scroll-margin-top:112px;height:0}
.topic-jump:not(:first-child){margin-top:var(--topic-gap)}
.topic-card{--topic-canvas:clamp(360px,calc(100svh - 290px),760px);position:relative;min-width:0;padding:32px var(--gutter);background:#111114;border-radius:44px;scroll-margin-top:112px;box-shadow:0 -16px 36px #0003}
#collection-stories{background:#101719}
#collection-video-workflows{background:#131523}
#collection-video-workflows-title:focus{outline:none}
.topic-anchor{position:absolute;top:0;left:0;scroll-margin-top:112px}
.topic-card-heading{margin-bottom:28px}
.topic-card-heading h3{font-family:Studio Light,var(--font);font-size:clamp(26px,2.65vw,40px);font-weight:300;line-height:1.3;letter-spacing:-.025em}
.topic-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:18px;height:var(--topic-canvas);align-items:center;transform-origin:center top}
.topic-artwork{display:flex;align-items:center;justify-content:center;position:relative;min-width:0;min-height:0;width:100%;height:100%;padding:0;background:transparent;border-radius:12px;transition:transform .38s cubic-bezier(.16,1,.3,1),filter .38s cubic-bezier(.16,1,.3,1)}
.topic-artwork .media{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:transparent;overflow:visible}
.topic-artwork .media>img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform:none;border-radius:12px}
/* Trim the pale edge baked into the fan collage without resizing its card. */
.topic-artwork[data-id="portable-fan-detail"] img{scale:1.008;clip-path:inset(.4% round 12px)}
.image-preview-media img[src="assets/images/portable-fan-detail.webp"]{
 scale:1.008;clip-path:inset(.4% round clamp(16px,2vw,24px));
}
@media(min-width:901px){
 #collection-products{--topic-canvas:clamp(360px,min(37vw,calc(100svh - 255px)),700px)}
 #collection-products .topic-grid{grid-template-columns:repeat(2,minmax(0,1.65fr)) repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
 #collection-products .topic-artwork:nth-child(-n+2){grid-row:span 2}
 #collection-products .topic-artwork:nth-child(n+3):nth-child(-n+5) img{align-self:flex-end}
 #collection-products .topic-artwork:nth-child(n+6) img{align-self:flex-start}
 #collection-video-workflows{--topic-canvas:clamp(360px,min(34vw,calc(100svh - 255px)),680px)}
 #collection-video-workflows .topic-grid{grid-template-columns:repeat(2,minmax(0,1.75fr)) repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
 #collection-video-workflows .topic-artwork:nth-child(-n+2){grid-row:span 2}
 #collection-video-workflows .topic-artwork:nth-child(n+3):nth-child(-n+6) img{align-self:flex-end}
 #collection-video-workflows .topic-artwork:nth-child(n+7) img{align-self:flex-start}
 #collection-stories .topic-artwork:first-child{grid-area:1/1/7/4}
 #collection-stories .topic-artwork:nth-child(2){grid-area:1/4/7/7}
 #collection-stories .topic-artwork:nth-child(3){grid-area:1/7/7/9}
 #collection-stories .topic-artwork:nth-child(4){grid-area:1/9/4/11}
 #collection-stories .topic-artwork:nth-child(5){grid-area:4/9/7/11}
 #collection-stories .topic-artwork:nth-child(6){grid-area:1/11/7/13}
}
.topic-artwork:focus-visible{outline:2px solid #d3e1f6;outline-offset:5px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.topic-artwork:hover{transform:translateY(-6px);filter:brightness(1.06)}}
@media(min-width:901px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
 .topic-card{position:sticky;top:calc(100px + var(--topic-index)*6px)}
 .topic-grid{transform:scale(calc(1 - var(--sheet-recede,0)*.025));opacity:calc(1 - var(--sheet-recede,0)*.35)}
 .topic-list.keyboard-browsing .topic-card{position:relative;top:auto}
}
@media(max-width:900px){
 .topic-list{--topic-gap:36px}.topic-card{padding-block:28px 32px;border-radius:28px}
 .topic-grid{height:auto;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;gap:24px 16px;align-items:center}
 .topic-artwork{height:auto;aspect-ratio:var(--work-ratio);grid-column:span 2}
 .topic-artwork:nth-child(4n+1),.topic-artwork:nth-child(4n){grid-column:span 4}
 #collection-products .topic-artwork{grid-column:span 3}
 #collection-stories .topic-artwork:nth-child(n+5){grid-column:span 3}
 #collection-video-workflows .topic-artwork{grid-column:span 2}
 #collection-video-workflows .topic-artwork:nth-child(-n+2),
 #collection-video-workflows .topic-artwork:nth-last-child(-n+2){grid-column:span 3}
 .topic-card .topic-artwork .media{aspect-ratio:var(--work-ratio)!important}
 .topic-artwork .media>img{width:100%;height:100%}
}
@media(min-width:701px) and (max-width:900px){
 #collection-video-workflows .topic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 #collection-video-workflows .topic-artwork:nth-child(n){grid-column:span 1}
 #collection-video-workflows .topic-artwork:nth-child(-n+2){grid-column:span 2}
}
@media(max-width:520px){
 #collection-video-workflows .topic-artwork:nth-child(n){grid-column:span 3}
}
@media(max-width:700px){
 .topics-section{padding-top:64px;padding-bottom:56px}
 .topic-list{--topic-gap:24px}.topic-card{border-radius:24px}
 .topic-card-heading{margin-bottom:24px}.topic-card-heading h3{font-size:26px}
 .topic-grid{gap:22px 12px}.topic-artwork .media>img{border-radius:10px}
 .topic-artwork[data-id="portable-fan-detail"] img{clip-path:inset(.4% round 10px)}
}
@media(prefers-reduced-motion:reduce){.topic-artwork{transition:none}.topic-grid{transform:none;opacity:1}}