/* One foundation for every portfolio page outside Home.
   The page grid owns spacing; components only arrange their own contents. */
body.portfolio-page{
 --paper:#fff;
 --portfolio-panel:#f5f6f7;
 --portfolio-gap:24px;
 --portfolio-section-gap:clamp(36px,4vw,56px);
 --portfolio-panel-pad:24px;
 --portfolio-feature-height:clamp(280px,calc(100svh - 240px),480px);
 --card-radius:10px;
 --card-pad:var(--portfolio-panel-pad);
 --card-shadow:none;
 background:#fff;
 color:var(--ink);
 height:auto;
 min-height:100svh;
 font:400 15px/1.7 var(--font);
}
.portfolio-page .portfolio-main{
 display:block;
 width:100%;
 max-width:var(--page-width,1720px);
 min-width:0;
 margin:0 auto;
 padding:0 var(--gutter,clamp(18px,2.5vw,44px));
 color:var(--ink);
 background:transparent;
 font:400 15px/1.7 var(--font);
}
.portfolio-main :where(section,header,article,figure,div,nav,dl,dd){min-width:0}
.portfolio-main :where(p){margin:0 0 14px;font-size:inherit;line-height:inherit;overflow-wrap:break-word;text-wrap:pretty}
.portfolio-main :where(p:last-child){margin-bottom:0}
.portfolio-main :where(figure,blockquote,dl,dd){margin:0}
.portfolio-main :where(.panel){border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.portfolio-page .portfolio-main :is(h1,h2,h3){font-family:var(--font);font-style:normal;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
.portfolio-page .portfolio-main h1{font-family:var(--title-font,var(--font));font-size:clamp(32px,2.8vw,36px);font-weight:400;line-height:1.14;letter-spacing:-.025em;max-width:22ch;margin:0 0 16px}
.portfolio-page .portfolio-main h2{font-size:clamp(22px,1.8vw,26px);font-weight:450;line-height:1.25;letter-spacing:-.02em;margin:0 0 14px}
.portfolio-page .portfolio-main h3{font-size:17px;font-weight:450;line-height:1.35;letter-spacing:-.01em;margin:0 0 10px}
.portfolio-main :where(.eyebrow){font:450 12px/1.5 var(--font);color:var(--muted);letter-spacing:.035em;margin:0 0 12px}
.portfolio-main :where(.lede){font-size:16px;line-height:1.55;letter-spacing:-.01em;max-width:46ch;margin:0 0 16px;text-wrap:pretty;color:var(--ink)}
.portfolio-main :where(figcaption,.figure-caption){font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 0;max-width:68ch;text-wrap:pretty;overflow-wrap:break-word}
.portfolio-main :where(.text-link){font-size:13px;line-height:1.45;min-height:44px;color:var(--blue)}
.portfolio-main :where(a){overflow-wrap:break-word}

/* The same opening: five columns of context, seven columns of work. */
.portfolio-page .project-opening{
 display:grid;
 grid-template-columns:repeat(12,minmax(0,1fr));
 gap:var(--portfolio-gap);
 align-items:center;
 width:100%;
 min-width:0;
 min-height:0;
 margin:0;
 padding:24px 0 40px;
 border:0;
 border-radius:0;
 background:transparent;
 box-shadow:none;
}
.portfolio-page .project-opening-copy{grid-column:1/span 5;grid-row:1;min-width:0;max-width:none;margin:0;padding:0;align-self:center;background:transparent;border:0;border-radius:0;box-shadow:none}
.portfolio-page .project-opening-copy>h1{max-width:22ch}
.portfolio-page .project-opening-copy>.eyebrow{margin-bottom:12px}
.portfolio-page .project-opening-copy>.lede{font-size:16px;line-height:1.55;margin:0 0 16px;max-width:46ch}
.portfolio-page .project-feature{grid-column:6/span 7;grid-row:1;min-width:0;width:100%;max-width:none;margin:0;padding:0;align-self:center;background:transparent;border:0;border-radius:0;box-shadow:none}
.portfolio-page .project-feature .image-button{display:block;width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.portfolio-page .project-feature img{display:block;width:100%;height:var(--portfolio-feature-height);max-width:100%;max-height:none;margin:0;object-fit:contain}
.portfolio-page .project-feature figcaption{max-width:none;margin:8px 0 0;font-size:12px;line-height:1.5}
.portfolio-page .project-opening-context{min-width:0;margin:0;padding:0}
/* Evidence may lead, or occupy a whole spread; the underlying grid stays shared. */
.portfolio-page .project-opening.is-image-first .project-feature{grid-column:1/8;grid-row:1}
.portfolio-page .project-opening.is-image-first .project-opening-copy{grid-column:8/-1;grid-row:1}
.portfolio-page .project-opening.is-gallery{align-items:start}
.portfolio-page .project-opening.is-gallery .project-opening-copy{grid-column:1/span 6;grid-row:1;align-self:start}
.portfolio-page .project-opening.is-gallery .project-opening-context{grid-column:7/span 6;grid-row:1;align-self:start}
.portfolio-page .project-opening.is-gallery .project-feature{grid-column:1/-1;grid-row:2}
.portfolio-page .project-opening.is-about .project-opening-copy{grid-column:1/span 3;grid-row:1;align-self:start}
.portfolio-page .project-opening.is-about :is(.project-feature,.project-opening-context){grid-column:4/span 9;grid-row:1;align-self:start}

/* A single gap between sections. The opening already supplies its first gap. */
.portfolio-page .editorial-section{
 display:grid;
 grid-template-columns:repeat(12,minmax(0,1fr));
 gap:var(--portfolio-gap);
 align-items:start;
 min-width:0;
 margin:var(--portfolio-section-gap) 0 0;
 padding:0;
 border:0;
 border-radius:0;
 background:transparent;
 box-shadow:none;
 scroll-margin-top:24px;
}
.portfolio-page .project-opening+.editorial-section{margin-top:0}
.portfolio-page .editorial-section:first-child{margin-top:24px}
.portfolio-page .editorial-section-heading{grid-column:1/span 3;min-width:0;margin:0;padding:0;border:0;background:transparent}
.portfolio-page .editorial-section-body{grid-column:4/span 9;min-width:0;margin:0;padding:0}
.portfolio-page .editorial-section.is-wide :is(.editorial-section-heading,.editorial-section-body){grid-column:1/-1}
.portfolio-page .editorial-section.is-wide .editorial-section-heading{max-width:68ch}
.portfolio-page .editorial-section.is-essay .editorial-section-heading{grid-column:1/span 3}
.portfolio-page .editorial-section.is-essay .editorial-section-body{grid-column:4/span 9}
.portfolio-page .editorial-wide{grid-column:1/-1;min-width:0;width:100%;margin:0;padding:0}
.portfolio-page .editorial-copy{max-width:68ch}
.portfolio-page .editorial-copy>:last-child{margin-bottom:0}
.portfolio-page .editorial-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--portfolio-gap);align-items:start;min-width:0}
.portfolio-page .editorial-pair>*{min-width:0;margin-block:0}
.portfolio-page .editorial-panel{min-width:0;margin:0;padding:var(--portfolio-panel-pad);background:var(--portfolio-panel);border:0;border-radius:10px;box-shadow:none}
.portfolio-page .editorial-panel .editorial-panel{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.portfolio-page .editorial-panel>:last-child{margin-bottom:0}
.portfolio-page .editorial-meta{display:flex;flex-wrap:wrap;gap:8px 24px;min-width:0;max-width:100%;margin:16px 0 0;padding:0;border:0;font:400 12px/1.5 var(--font)}
.portfolio-page .editorial-meta>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0;max-width:100%;margin:0;padding:0}
.portfolio-page .editorial-meta dt{margin:0;font:inherit;color:var(--blue)}
.portfolio-page .editorial-meta dd{min-width:0;margin:0;font:inherit;color:var(--ink);overflow-wrap:break-word}
.portfolio-page .site-footer{width:100%;max-width:var(--page-width,1720px);min-height:44px;margin:16px auto 0;padding:8px var(--gutter,clamp(18px,2.5vw,44px)) 16px;gap:4px 16px;color:var(--muted);font:400 12px/1.5 var(--font);border:0;background:transparent}
.portfolio-page .site-footer::before{display:none}
.portfolio-page .site-footer>a{min-height:36px}

@media(min-width:761px) and (max-width:1000px){
 body.portfolio-page{--portfolio-feature-height:clamp(260px,calc(100svh - 260px),420px)}
 .portfolio-page .portfolio-main h1{font-size:32px}
 .portfolio-page .project-opening-copy>.lede{font-size:15px}
}
@media(max-width:760px){
 body.portfolio-page{--portfolio-gap:18px;--portfolio-panel-pad:18px;--portfolio-feature-height:clamp(200px,56svh,360px)}
 .portfolio-page .portfolio-main{font-size:15px}
 .portfolio-page .portfolio-main h1{font-size:clamp(28px,6.4vw,32px);line-height:1.16;max-width:24ch;margin-bottom:14px}
 .portfolio-page .portfolio-main h2{font-size:22px;line-height:1.25}
 .portfolio-page .portfolio-main h3{font-size:16px}
 .portfolio-page .project-opening{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 0 36px}
 .portfolio-page .project-opening-copy,.portfolio-page .project-feature{grid-column:1;grid-row:auto;align-self:start}
 /* Narrow screens follow the authored DOM order, including image-led openings. */
 .portfolio-page .project-opening:is(.is-image-first,.is-gallery,.is-about) :is(.project-opening-copy,.project-opening-context,.project-feature){grid-column:1;grid-row:auto;align-self:start}
 .portfolio-page .project-opening-copy>.lede{font-size:15px;line-height:1.6;max-width:none}
 .portfolio-page .project-feature img{height:auto;max-height:360px;object-fit:contain}
 .portfolio-page .editorial-section{grid-template-columns:minmax(0,1fr);gap:18px}
 .portfolio-page .editorial-section-heading,.portfolio-page .editorial-section-body,.portfolio-page .editorial-wide{grid-column:1}
 .portfolio-page .editorial-section:is(.is-wide,.is-essay) :is(.editorial-section-heading,.editorial-section-body){grid-column:1}
 .portfolio-page .editorial-pair{grid-template-columns:minmax(0,1fr)}
 .portfolio-page .editorial-meta{gap:8px 18px;margin-top:14px}
 .portfolio-page .site-footer{font-size:12px;margin-top:12px;padding-bottom:12px}
}
@media print{
 body.portfolio-page{min-height:0;--portfolio-feature-height:90mm}
 .portfolio-page .portfolio-main{max-width:none;padding:0}
 .portfolio-page .editorial-panel{background:transparent;border:1px solid var(--line)}
 .portfolio-page .project-feature img{height:auto;max-height:90mm}
}