/* The light orbit belongs to the hero artwork, not the episode heading. */
#hero-title{isolation:isolate}
#hero-title>img:not(.title-handwriting){position:relative;z-index:1}
#hero-title .headline-ornament,#hero-title img.title-handwriting{z-index:2}
#hero-title .hero-title-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
#hero-title .hero-title-orbit path{fill:none;vector-effect:non-scaling-stroke}
#hero-title .hero-orbit-haze{stroke:url(#hero-title-orbit-gradient);stroke-width:5;opacity:.24;filter:blur(3px)}
#hero-title .hero-orbit-line{stroke:url(#hero-title-orbit-gradient);stroke-width:1.1;opacity:.88}
#hero-title .hero-orbit-glint{stroke:#75c9ff;stroke-width:1.65;stroke-linecap:round;stroke-dasharray:48 952;opacity:.85;animation:hero-title-orbit-flow 13s linear infinite}
#hero-title .hero-orbit-point{fill:#b2eaff;stroke:#619cee;stroke-width:1;filter:drop-shadow(0 0 4px #73baff)}
@keyframes hero-title-orbit-flow{to{stroke-dashoffset:-1000}}

/* Keep the shared gutter and the hero transition when the work order changes. */
.portfolio-content .portfolio-shell>section:first-of-type{margin-top:0}

/* Four selected visuals share one compact desktop row. */
@media(min-width:1051px){
 #design .aurora-curation .gallery{grid-template-rows:clamp(290px,25cqw,450px) clamp(290px,25cqw,450px) auto}
}
@media(min-width:761px) and (max-width:1050px){
 #design .aurora-curation .gallery{grid-template-rows:260px 260px auto}
}
#design .design-highlights{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.4cqw,26px);height:clamp(330px,24cqw,432px);min-width:0;scroll-margin-top:24px}
#design .aurora-curation .design-highlights>.project{grid-column:auto;grid-row:auto;height:100%;min-width:0}
#design .design-highlights .highlight-media{display:block;min-height:0;background:#e6eef0}
#design .design-highlights .highlight-cover{display:block;width:100%;height:100%;position:relative;isolation:isolate;background:#e8edef;overflow:hidden}
#design .design-highlights .highlight-cover:before{content:"";position:absolute;inset:-20px;background-image:var(--highlight-image);background-size:cover;background-position:center;filter:blur(18px);opacity:.65;z-index:0;pointer-events:none}
#design .design-highlights .highlight-cover>img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;transition:filter .2s}
#design .design-highlights :is(.book,.jewelry) .highlight-cover>img{object-fit:cover}
#design .design-highlights .book .highlight-cover>img{object-position:50% 50%}
#design .design-highlights .jewelry .highlight-cover>img{object-position:53% 50%}
#design .design-highlights .toothbrush .highlight-cover{background:#030e19}
#design .design-highlights .toothbrush .highlight-cover:before{opacity:.35}
#design .design-highlights .caption{height:64px;padding:8px 13px}
#design .design-highlights .title-line{gap:7px}
#design .design-highlights .project .title-line h3{font-size:clamp(16px,1.4vw,22px);letter-spacing:0;min-width:0;white-space:nowrap}
#design .design-highlights .caption p{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 0 0 0;font-size:11px}
#design .design-highlights .caption .tag{display:none}
@media(max-width:760px){
 .portfolio-content #series{margin-top:24px}
 #design .design-highlights{grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(230px,52vw,285px);height:auto;gap:16px 12px}
 #design .design-highlights .caption{height:58px;padding:7px 9px}
 #design .design-highlights .project .title-line h3{font-size:clamp(13px,3.5vw,18px)}
 #design .design-highlights .title-line{gap:4px}
 #design .design-highlights .arrow{min-width:22px;min-height:22px;font-size:16px}
 #design .design-highlights .caption p{font-size:10px}
}
@media(max-width:480px){#design .design-highlights .number{display:none}}
@media(prefers-reduced-motion:reduce){#design .design-highlights .highlight-cover>img{transition:none}}

@media(prefers-reduced-motion:reduce){#hero-title .hero-orbit-glint{animation:none}}

/* Center the identity over the visible body of the first hero glyph. */
.navigation .brand.personal-brand{left:calc(6.26vw - 16px);transform:translate(-50%,-50%)}
@media(max-width:760px){.navigation .brand.personal-brand{left:calc(13.66vw - 8px)}}
.portfolio-content #design{margin-bottom:0}