/* A single bounded scrolling surface. Opaque backdrop prevents the homepage
   from showing through when Safari resizes its visual viewport. */
html.project-open{overflow:hidden;overscroll-behavior:none}
html.project-open body{position:fixed;top:var(--locked-scroll,0px);left:0;right:0;width:100%;overflow:hidden}
#project-dialog{inset:0;margin:0;padding:0;border:0;width:100%;height:100%;height:100dvh;max-height:none;max-width:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;transform:none;animation:none!important;background-color:#1e1e1e}
#project-dialog::backdrop,#lightbox::backdrop{background:#1e1e1e}
#project-dialog .detail-nav{top:calc(12px + env(safe-area-inset-top,0px))}
#project-dialog #project-detail{padding-top:calc(112px + env(safe-area-inset-top,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
#project-detail.has-illustrated-story .project-layout{margin-top:24px}
#project-dialog .story-card.story-illustrated{transform:none!important;position:relative;inset:auto;width:100%;height:auto;max-height:none;overflow:visible}
#project-dialog .story-illustrated .story-copy{display:block}
#project-dialog .story-illustrated .story-summary{max-width:64ch;margin:0 0 32px}
#project-dialog .story-illustrated .story-full{display:block;opacity:1}
#project-dialog .story-illustrated .story-full>div{overflow:visible}
#project-dialog .story-illustrated .case-study.cs-contained{padding:0;margin:0;max-width:none;width:100%;color:var(--paper)}
#project-dialog .cs-contained .cs-premise{padding:15px 0 20px}
#project-dialog .cs-contained .cs-moment{padding:32px 0}
#project-dialog .cs-contained .cs-label{margin-bottom:28px}
#project-dialog .cs-contained h2{font-size:clamp(26px,3vw,42px)}
#project-dialog .cs-contained .cs-ending{padding:30px 0 0}
#project-dialog .cs-contained .cs-reveal{opacity:1;transform:none}
#project-dialog .cs-contained .cs-figure img{display:block;height:auto;max-width:none}
#project-dialog .cs-contained .cs-detail img{height:100%}
#project-dialog .cs-contained .cs-caption-pair p,#project-dialog .cs-contained .cs-note p{font-size:16px;line-height:1.75}
#project-dialog .cs-contained .cs-next{color:var(--paper)}
@media(max-width:700px){
 #project-dialog #project-detail{padding-top:calc(100px + env(safe-area-inset-top,0px))}
 #project-dialog .story-card.story-illustrated{padding:24px 20px}
 #project-dialog .cs-contained .cs-caption-pair,#project-dialog .cs-contained .cs-two{grid-template-columns:1fr;gap:22px}
 #project-dialog .cs-contained .cs-contact{grid-template-columns:1fr}
 #project-dialog .cs-contained .cs-label{font-size:10px;gap:12px}
 #project-dialog .cs-contained .cs-label span:last-child{display:none}
 #project-dialog .story-illustrated .story-summary{font-size:16px}
 #project-dialog .cs-contained .cs-next img{width:66px}
 #project-dialog .cs-contained .cs-next strong{font-size:23px}
}
/* Grid children must be allowed to shrink around long captions and titles. */
#project-dialog .story-illustrated{grid-template-columns:minmax(0,1fr)}
#project-dialog .story-illustrated :is(.story-heading,.story-copy,.story-full,.story-full>div,.cs-caption-pair>*,.cs-two>*,.cs-next){min-width:0}
#project-dialog .cs-contained figcaption{overflow-wrap:anywhere}
/* Keep the illustrated narrative within the portfolio's own visual language. */
#project-dialog .cs-contained{--cs-accent:var(--red);font-family:Arial,Helvetica,sans-serif}
#project-dialog .cs-contained :is(.cs-atmosphere,.cs-midl-field,.cs-note,.cs-caption-pair){background:transparent}
#project-dialog .cs-contained h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(18px,1.6vw,24px);font-weight:700;line-height:1.3;letter-spacing:0;text-transform:uppercase;color:var(--paper);text-wrap:pretty;overflow-wrap:normal}
#project-dialog .cs-contained :is(.cs-label,.cs-micro,.cs-figure figcaption){font-family:monospace;letter-spacing:.04em}
#project-dialog .cs-contained .cs-premise{padding:0 0 16px}
#project-dialog .cs-contained .cs-moment{padding:20px 0}
#project-dialog .cs-contained .cs-caption-pair{gap:24px;margin-bottom:24px}
#project-dialog .cs-contained .cs-label{margin-bottom:22px;padding-top:16px}
#project-dialog .cs-contained .cs-note{padding:0}
#project-dialog .cs-contained .cs-note p{margin:16px 0}
#project-dialog .cs-contained .cs-offset-reverse{margin-top:24px}
#project-dialog .cs-contained .cs-wide{margin:20px 0}
#project-dialog .cs-contained :is(.cs-contact,.cs-sequence){margin-top:24px;gap:24px}
#project-dialog .cs-contained .cs-archive{margin:20px 0 0;padding:20px 0 0;border-bottom:0}
#project-dialog .cs-contained .cs-figure button{background:transparent}
#project-dialog .cs-contained .cs-moment:last-child{padding-bottom:0}
#project-dialog .cs-contained .cs-figure figcaption{padding:12px 0}
#project-dialog .cs-contained :is(.cs-caption-pair p,.cs-note p){color:inherit;opacity:.78;line-height:1.75}
@media(max-width:700px){
 #project-dialog .cs-contained .cs-moment{padding:14px 0}
 #project-dialog .cs-contained .cs-label{margin-bottom:18px}
 #project-dialog .cs-contained .cs-caption-pair{gap:16px;margin-bottom:20px}
 #project-dialog .cs-contained .cs-offset-reverse{margin-top:20px}
}
/* Shared outer frame for the narrative and its adjacent TCG section. */
#project-dialog #story-dock{width:min(1200px,var(--content-width));max-width:100%;margin-inline:auto}
#project-dialog .cs-contained .cs-figure{width:100%;max-width:760px;margin-inline:auto}
#project-dialog .cs-contained .cs-figure button{aspect-ratio:auto}
#project-dialog .cs-contained .cs-figure img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;transform:none;max-height:560px}
#project-dialog .cs-contained .cs-detail img{width:100%;height:auto;object-fit:contain;transform:none}
#project-dialog .cs-contained .cs-wide{max-width:760px}
#project-dialog .cs-contained .cs-figure figcaption>span:last-child{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;font-size:14px}
#project-dialog .cs-contained .cs-contact figcaption>span:last-child{display:none}
#project-dialog .cs-written{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 36px;margin:28px 0}
#project-dialog .cs-written h3{font-size:16px;line-height:1.4;text-transform:uppercase;margin:0 0 12px;font-weight:700;letter-spacing:0}
#project-dialog .cs-written p{font-size:16px;line-height:1.75;opacity:.78;margin:0}
@media(max-width:700px){#project-dialog .cs-written{grid-template-columns:1fr;gap:24px}#project-dialog .cs-contained .cs-figure img{max-height:none}}
#project-dialog .cs-contained .cs-figure{max-width:min(760px,calc(560px * var(--image-ratio,1.45)))}
/* Consistent, lightweight image affordances, including horizontal sequences. */
#project-dialog .cs-contained .cs-strip{align-items:flex-start;gap:24px}
#project-dialog .cs-contained .cs-strip .cs-figure{flex:0 0 min(68%,calc(440px * var(--image-ratio,1.45)));margin-inline:0;max-width:760px}
#project-dialog .cs-contained .cs-strip img{aspect-ratio:auto;max-height:440px}
#project-dialog .cs-contained .cs-figure figcaption>span:last-child{display:none}
#project-dialog [data-enlarge]{position:relative}
#project-dialog [data-enlarge]::after{content:'↗';position:absolute;right:16px;bottom:16px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;background:linear-gradient(135deg,#ffffff28,#22222265);box-shadow:inset 0 1px 1px #ffffff40,0 3px 12px #0002;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--paper);font:24px Arial,sans-serif;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;pointer-events:none}
#project-dialog [data-enlarge]:is(:hover,:focus-visible)::after{opacity:1;transform:none}
@media(hover:none){#project-dialog [data-enlarge]::after{opacity:1;transform:none;width:36px;height:36px;font-size:21px;right:12px;bottom:12px}}
@media(max-width:700px){#project-dialog .cs-contained .cs-strip .cs-figure{flex-basis:88%}#project-dialog .cs-contained .cs-strip img{max-height:none}}
@media(prefers-reduced-motion:reduce){#project-dialog [data-enlarge]::after{transition:none}}
/* Use the original portfolio control, including its SVG and glass surface. */
#project-dialog [data-enlarge]::after{content:none}
#project-dialog [data-enlarge] .open-label{opacity:0;pointer-events:none;transition:opacity .2s,transform .3s}
#project-dialog [data-enlarge]:is(:hover,:focus-visible) .open-label{opacity:1;transform:none}
#project-dialog .cs-contained .cs-strip{scrollbar-width:none;padding-bottom:14px}
#project-dialog .cs-contained .cs-strip::-webkit-scrollbar{display:none}
.cs-scroll-track{height:1px;background:var(--line);position:relative;margin:0 0 24px}
.cs-scroll-track>span{display:block;position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left}
@media(hover:none){#project-dialog [data-enlarge] .open-label{opacity:1;transform:none}}