/* Editorial project layouts. Every rule is isolated from photographic albums. */
#main .project-page .project-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;width:100%;max-width:none;margin-inline:auto;align-items:start}
#main .project-page .project-gallery+.project-gallery{margin-top:32px}
#main .project-page .project-gallery>.media{grid-column:auto;grid-row:auto;min-width:0;margin:0;align-self:start}
#main .project-page .project-gallery .media button{display:flex;align-items:center;justify-content:center;background:transparent;max-height:none;overflow:hidden}
#main .project-page .project-gallery .media img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;object-position:center}
#main .project-page .project-gallery .media figcaption{max-width:none;margin:12px 0 0;font-size:13px;line-height:1.5}
#main .project-page .project-opening-media .media button{background:transparent;max-height:none}
#main .project-page .project-opening-media .media img{display:block;width:100%;height:auto;max-height:74svh;object-fit:contain}
@media(min-width:761px){
 #main .project-page .project-opening-media{margin-bottom:48px}
 #main .project-page .project-opening-media .media img{max-height:min(76svh,760px)}
 #main .project-page .project-opening-media--photo .media img{height:min(56vw,72svh,760px);max-height:none;object-fit:cover}
 #main .project-page .project-gallery{--frame:clamp(260px,29vw,390px);column-gap:28px;row-gap:36px}
 #main .project-page .project-gallery--pair,#main .project-page .project-gallery--pair-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
 #main .project-page .project-gallery--trio{grid-template-columns:repeat(3,minmax(0,1fr));--frame:clamp(240px,25vw,340px)}
 #main .project-page .project-gallery--photo-cover{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);--frame:clamp(300px,32vw,420px)}
 #main .project-page :is(.project-gallery--pair,.project-gallery--trio,.project-gallery--photo-cover,.project-gallery--pair-compact) .media button{height:var(--frame)}
 #main .project-page :is(.project-gallery--pair,.project-gallery--trio,.project-gallery--photo-cover,.project-gallery--pair-compact) .media img{height:100%;max-height:100%;width:100%;object-fit:contain}
 #main .project-page .project-gallery--pair-compact{max-width:900px;--frame:340px}
 #main .project-page .project-gallery--feature .media img{width:100%;height:auto;max-height:640px}
 #main .project-page .project-gallery--compact{max-width:720px}
 #main .project-page .project-gallery--compact-small{max-width:480px}
 #main .project-page .project-gallery--poster{max-width:480px}
 #main .project-page :is(.project-gallery--compact,.project-gallery--compact-small,.project-gallery--poster) .media img{max-height:440px;width:auto;max-width:100%;margin:auto}
 #main .project-page .project-gallery--compact-small .media img{max-height:320px}
 #main .project-page .project-gallery--newsletters{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
 #main .project-page .project-gallery--newsletters .media button{position:relative;height:360px;padding:12px 12px 40px;background:#ecebe6}
 #main .project-page .project-gallery--newsletters .media img{height:100%;max-height:100%;object-fit:contain}
 #main .project-page .project-gallery--newsletters .full-image-hint{position:absolute;inset:auto 10px 10px;font-size:12px;text-align:center;line-height:1.3}
 #main .project-page .chapter-block{margin-top:44px}
 #main .project-page .chapter-copy{margin-bottom:24px}
 #main .project-page .project-chapter{margin-top:76px;padding-top:36px}
 #main .project-page .project-chapter--only{margin-top:0;padding-top:0}
 #main .project-page .print-video{max-width:720px;margin-left:0;margin-right:auto}
}
@media(min-width:761px) and (max-width:1000px){
 #main .project-page .project-gallery--newsletters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 #main .project-page .project-gallery{gap:26px;grid-template-columns:repeat(var(--portfolio-columns,1),minmax(0,1fr))}
 #main .project-page :is(.project-gallery--feature,.project-gallery--compact,.project-gallery--compact-small,.project-gallery--poster){grid-template-columns:minmax(0,1fr)}
 #main .project-page .project-gallery--feature .media img{max-height:none}
 #main .project-page .project-gallery--newsletters{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 #main .project-page .project-gallery--newsletters .media button{position:relative;height:300px;padding:10px 10px 46px;background:#ecebe6}
 #main .project-page .project-gallery--newsletters .media img{height:100%;max-height:100%;object-fit:contain}
 #main .project-page .project-gallery--newsletters .full-image-hint{position:absolute;inset:auto 10px 10px;font-size:12px;text-align:center}
}

/* OK TV: keep each format family together without oversized landscape frames. */
@media(min-width:761px){
 #main .project-page[data-project="ok-tv"] .project-gallery--landscape-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
 #main .project-page[data-project="ok-tv"] .project-gallery--landscape-pair .media img{width:100%;height:auto;max-height:320px;object-fit:contain}
 #main .project-page[data-project="ok-tv"] .project-gallery--quartet{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
 #main .project-page[data-project="ok-tv"] .project-gallery--quartet .media img{width:100%;height:auto;max-height:440px;object-fit:contain}
}
@media(min-width:761px) and (max-width:1000px){
 #main .project-page[data-project="ok-tv"] .project-gallery--quartet{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Align project artwork and its captions to the same desktop left edge. */
@media(min-width:761px){
 #main .project-page .project-opening-media .media img{object-position:left top}
 #main .project-page .project-gallery{margin-left:0;margin-right:auto}
 #main .project-page .project-gallery .media button{justify-content:flex-start;align-items:flex-start}
 #main .project-page .project-gallery .media img{object-position:left top;margin-left:0;margin-right:auto}
}

/* Use the homepage shell and column guides on every project detail. */
@media(min-width:761px){
 #main .project-page>.page-heading{grid-template-columns:1.15fr 1fr;gap:6%}
 #main .project-page .chapter-heading{grid-template-columns:minmax(0,1fr);gap:12px}
 #main .project-page .chapter-number{padding-top:0}
}

/* Prominent, evenly spaced section navigation across project pages. */
#main .project-page .chapter-nav{width:100%;justify-content:space-between;gap:20px 40px}
#main .project-page .chapter-nav button{font-size:clamp(20px,1.8vw,26px);font-weight:700;line-height:1.3;padding:12px 0;text-underline-offset:8px}
@media(max-width:760px){
 #main .project-page .chapter-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
 #main .project-page .chapter-nav button{font-size:20px}
}

/* Project descriptions stay directly beneath their heading at the left edge. */
#main .project-page .chapter-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:0 0 28px;text-align:left}
#main .project-page .chapter-copy h3{font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.2;letter-spacing:-.025em;margin:0}
#main .project-page .chapter-copy p{max-width:68ch;font-size:20px;line-height:1.55;margin:0}
#main .project-page .chapter-copy :is(h3,p):empty{display:none}
#main .project-page .chapter-heading{grid-template-columns:minmax(0,1fr);gap:12px;text-align:left}
#main .project-page .chapter-heading h2{font-weight:700;margin-bottom:20px}
#main .project-page .chapter-heading p{max-width:68ch}
#main .project-page .case-story{grid-template-columns:minmax(0,1fr);gap:32px;max-width:68ch;text-align:left}
#main .project-page .case-story h2{font-size:24px;font-weight:700;text-transform:none;letter-spacing:-.025em;margin-bottom:14px}
@media(max-width:760px){
 #main .project-page .chapter-copy{gap:12px;margin-bottom:24px}
 #main .project-page .chapter-copy p{font-size:18px}
 #main .project-page .chapter-block{margin-top:36px}
}

#main .project-page>.page-heading{grid-template-columns:minmax(0,1fr);gap:28px;text-align:left}
#main .project-page>.page-heading .lead{max-width:60ch}

/* Make authorship visible before the first project image. */
#main .project-page>.page-heading .role{font-size:clamp(21px,2.1vw,28px);font-weight:700;line-height:1.5;letter-spacing:-.015em;color:var(--ink);max-width:none;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:760px){#main .project-page>.page-heading .role{font-size:20px;line-height:1.5;margin-top:24px;padding-top:18px}}

/* The four longer Legendy chapter labels fit one desktop row. */
@media(min-width:1000px){
 #main .project-page[data-project="legendy"] .chapter-nav{flex-wrap:nowrap;gap:12px 20px}
 #main .project-page[data-project="legendy"] .chapter-nav button{font-size:clamp(14px,1.4vw,20px);white-space:nowrap}
}
@media(min-width:1000px){
 #main .project-page[data-project="auto-opat"] .chapter-nav{flex-wrap:nowrap;gap:12px 16px}
 #main .project-page[data-project="auto-opat"] .chapter-nav button{font-size:clamp(12px,1.2vw,18px);white-space:nowrap}
}