/* The introduction stays pinned; project media keeps contained proportions. */
.work-section{overflow:hidden;overflow:clip}/* overflow:hidden fallback for browsers without overflow:clip (pre-2022) */
.work-stage{--nav-height:78px;--stage-gutter:24px;--card-gap:22px;--card-room:440px;position:relative;background:var(--paper)}
.work-viewport{overflow:hidden;overflow:clip}/* overflow:hidden fallback for browsers without overflow:clip */
.work-track{position:relative}
.project-copy h3{font-size:30px;font-weight:750;letter-spacing:-.045em;line-height:1.08}
.project-copy p{font-size:13px;line-height:1.65;margin-top:12px;max-width:54ch}
.project-top>span:last-child{max-width:none;text-align:left}
.project-top{font-size:10px;letter-spacing:.09em}
.project-copy .text-link{font-size:12px;margin-top:6px;min-height:44px}
.work-stage:not(.is-pinned) .work-track{display:grid;grid-template-columns:1fr}
.work-progress[hidden]{display:none}
.work-stage.is-pinned{height:calc(100vh - var(--nav-height));height:calc(100svh - var(--nav-height));display:flex;flex-direction:column;padding-bottom:8px}/* 100vh fallback first; 100svh (newer) overrides where supported */
/* Restore the original type scale. Only the outside spacing is fitted to the pin. */
.is-pinned>.section-head{flex:none;padding:16px var(--stage-gutter);display:block}
.is-pinned>.section-head h2{font-size:clamp(36px,6vw,64px);line-height:1.05;margin-top:12px}
.is-pinned>.section-head>p{font-size:14px;line-height:1.65;margin-top:10px;max-width:48ch}
.is-pinned .work-viewport{flex:1;min-height:0;display:flex;align-items:center}
.is-pinned .work-track{display:flex;align-items:center;width:max-content;padding:0 var(--stage-gutter);gap:var(--card-gap)}
/* No 1fr media row: taller viewports add breathing room, not giant letterboxes. */
.is-pinned .project{display:grid;grid-template-rows:auto auto auto;width:calc(100vw - 64px);height:auto;padding:0;flex-shrink:0;align-content:center}/* 100vw-64px = 100vw - 2*24px gutter - 16px; plain arithmetic (calc multiplication is Chrome 111+/Safari 16.4+ only) */
.is-pinned .project-top{border:0;padding:4px 0 10px;line-height:1.4}
.is-pinned .project-visual{height:auto;aspect-ratio:16/9;min-height:0;border-radius:3px;background:transparent}
.is-pinned .project-visual--video{aspect-ratio:16/9}
.is-pinned .project-visual>img,.is-pinned .project-visual>video{padding:0;object-fit:contain;background:transparent}
.is-pinned .project-visual--video>video{object-fit:cover}
.is-pinned .project-copy{padding-top:12px;min-height:135px}
.is-pinned .project-copy h3{font-size:clamp(25px,6.8vw,32px)}
.is-pinned .project-copy p{font-size:13px;line-height:1.6;margin-top:10px}
.is-pinned .project-copy .text-link{margin-top:4px}
.work-progress{height:48px;flex:none;padding:6px var(--stage-gutter) 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
.work-count{font-size:12px;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.work-count b{font-size:21px;font-weight:700}.work-count>span{color:#65695d}
.work-meter{height:3px;position:relative;background:#c6c8bb;overflow:hidden}
.work-meter-fill{display:block;height:100%;width:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}
.work-direction{font-size:9px;letter-spacing:.03em;white-space:nowrap}.work-direction>span{font-size:18px;margin-left:4px}
.planning-art{height:100%;width:100%;background:var(--red);display:grid;place-items:center;overflow:hidden}
.planning-art svg{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
.planning-art .art-label{font:10px var(--body);letter-spacing:1.2px}
.planning-art .art-title{font:italic 38px var(--serif);letter-spacing:-1px}
.project-03 .round-arrow{background:var(--ink);color:var(--paper)}
@media(min-width:768px){
 .work-stage{--stage-gutter:48px;--card-gap:36px}
 .work-stage:not(.is-pinned) .work-track{grid-template-columns:1fr 1fr}
 .is-pinned>.section-head{display:grid;grid-template-columns:1.2fr 1fr;column-gap:36px;padding-top:16px;padding-bottom:20px}
 .is-pinned>.section-head>.eyebrow{grid-column:1/-1}
 .is-pinned>.section-head>p{align-self:end;justify-self:end;margin:0 0 3px;max-width:36ch}
 .is-pinned .project{width:min(80vw,850px)}
 .is-pinned .project-visual{height:auto;aspect-ratio:16/9}
 .is-pinned .project-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding-top:16px;min-height:135px;align-content:center}
 .is-pinned .project-copy h3{font-size:clamp(30px,3vw,40px);grid-row:1/3}
 .is-pinned .project-copy p{margin-top:0;font-size:14px}
 .is-pinned .project-copy .text-link{justify-self:start;margin-top:8px}
 .work-progress{gap:28px;height:48px}.work-count{font-size:14px}.work-count b{font-size:26px}.work-direction{font-size:11px}
}
@media(min-width:1100px){.work-stage{--stage-gutter:6vw;--card-gap:4vw}}
@media(max-width:767px) and (max-height:740px){
 .is-pinned>.section-head{padding-top:10px;padding-bottom:12px}
 .is-pinned>.section-head>p{font-size:13px;line-height:1.5}
 .is-pinned .project-copy{padding-top:8px}
 .is-pinned .project-copy p{font-size:12px;line-height:1.45;margin-top:6px}
 .is-pinned .project-copy h3{font-size:25px}
 .work-progress{height:42px}
}
/* Short desktop windows: scale the stacked card down so it still fits the pin area
   and horizontal scroll stays engaged (keeps the vertical card layout). */
@media(min-width:768px) and (max-height:740px){
 .is-pinned>.section-head{padding-top:10px;padding-bottom:12px}
 .is-pinned>.section-head h2{font-size:clamp(30px,5vw,44px)}
 .is-pinned>.section-head>p{font-size:13px;line-height:1.5}
 .is-pinned .project{width:min(80vw,530px)}
}
@media(min-width:768px) and (min-height:741px) and (max-height:780px){
 .is-pinned .project{width:min(80vw,600px)}
}
@media(min-width:768px) and (min-height:781px) and (max-height:820px){
 .is-pinned .project{width:min(80vw,660px)}
}
@media(min-width:768px) and (min-height:821px) and (max-height:860px){
 .is-pinned .project{width:min(80vw,700px)}
}