/* Halftone fork. Ambient ink, full-width titles and the shared archive. */
main{position:relative;z-index:1}
.work .project-meta h3{width:100%;max-width:none;font-size:clamp(20px,2.05vw,31px);line-height:1.13;white-space:normal;word-break:normal;overflow-wrap:break-word;text-wrap:pretty}
.work .project-meta>div:first-child{min-width:0;max-width:none;width:100%}
/* Project-only archive panel, sharing the case-study frame. */
#project-dialog #story-dock{min-height:0;padding-bottom:0}
#project-dialog .project-layout{padding-bottom:0}
#project-dialog .project-tcg-section{box-sizing:border-box;width:min(1200px,var(--content-width));max-width:none;margin:32px auto 80px;padding:52px 60px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(140deg,#ffffff09,#ffffff03)}
.project-tcg-section>.section-label{width:100%;max-width:none;margin:0 0 32px;padding-bottom:24px;border-bottom:1px solid var(--line);gap:16px}
#project-tcg-slot{width:100%;min-width:0}
#project-tcg-slot .tcg-showcase{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,60px);width:100%;max-width:none;margin:0}
#project-tcg-slot .tcg-stage{width:100%;min-width:0}
#project-tcg-slot .tcg-caption{width:100%;max-width:none;min-width:0;text-align:left;margin:0}
#project-tcg-slot .tcg-caption-title{font-size:clamp(18px,1.8vw,26px);white-space:normal;justify-content:flex-start}
#project-tcg-slot .tcg-instruction{font-size:15px;line-height:1.8;text-align:left;margin:18px 0 0}
@media(max-width:700px){
 .work .project-meta h3{font-size:clamp(20px,5.5vw,28px)}
 #project-dialog .project-tcg-section{padding:28px 24px;margin-top:24px}
 .project-tcg-section>.section-label{flex-wrap:wrap;margin-bottom:28px}
 #project-tcg-slot .tcg-showcase{grid-template-columns:minmax(0,1fr);gap:28px}
 #project-tcg-slot .tcg-stage{max-width:390px;margin:auto}
}
/* Keep the description at its original inset. The collection sits above it. */
#project-dialog:has(.collection-dock:not([hidden])) .story-card.story-floating{bottom:48px}
#project-dialog .collection-dock{bottom:var(--collection-story-bottom,24px);z-index:12}
#project-dialog .collection-minimize{bottom:calc(var(--collection-story-bottom,24px) + 136px);z-index:13}
@media(max-width:700px){
 #project-dialog:has(.collection-dock:not([hidden])) .story-card.story-floating{bottom:calc(28px + env(safe-area-inset-bottom,0px))}
 #project-dialog .collection-minimize{bottom:calc(var(--collection-story-bottom,24px) + 114px)}
}