/* The map is sized against BOTH the available width and height. */
.portfolio-home{height:100svh;min-height:620px;display:grid;grid-template-rows:64px minmax(0,1fr) 34px}
.portfolio-home>header{padding:0 3vw;min-width:0}
.portfolio-home .identity span{font-size:9px;margin-left:22px}
.portfolio-home>footer{padding:0 3vw 12px;align-items:end;font-size:10px}
.portfolio-home .portfolio-layout{display:grid;grid-template-columns:clamp(250px,22vw,320px) minmax(0,1fr);gap:clamp(12px,1.2vw,22px);width:100%;max-width:none;min-height:0;margin:0;padding:12px 3vw 8px}
.intro-column{min-width:0;min-height:0;align-self:center}
.portfolio-home .heading{padding:0 0 28px;background:none}
.portfolio-home h1{font-size:clamp(25px,2.1vw,32px);line-height:1.35;letter-spacing:.02em;margin:0;font-weight:350;white-space:nowrap}
.portfolio-home .preview{display:block;width:100%;padding:0;margin:0;min-width:0}
.portfolio-home .preview>.overline{font-size:11px;letter-spacing:.12em}
.portfolio-home .preview-media{height:clamp(105px,20svh,180px);width:100%;aspect-ratio:auto;margin-top:14px;overflow:hidden;background:#171717}
.portfolio-home .preview-media img{display:block;width:100%;height:100%;object-fit:contain}
.portfolio-home .preview-media img[hidden]{display:none}
.portfolio-home .preview h2{font-size:21px;line-height:1.45;margin:19px 0 12px;font-weight:400}
.portfolio-home .preview p{font-size:14px;line-height:1.85;margin:0;color:#aaa}
.portfolio-home .preview .metadata{font-size:12px;line-height:1.7;margin-top:16px;color:#888}
.portfolio-home .enter{font-size:13px;margin-top:14px;padding:12px 0}
.portfolio-home .note{font-size:11px;line-height:1.6;margin-top:10px}
.map-column{display:grid;grid-template-rows:minmax(0,1fr) 30px;min-width:0;min-height:0}
.map-stage{min-width:0;min-height:0;container-type:size;display:grid;place-items:center}
.portfolio-home .scene{width:min(100%,150cqh);max-width:none;flex-shrink:1;margin:0;aspect-ratio:3/2;overflow:visible}
.portfolio-home .campus{width:100%;height:auto}
.portfolio-home .map-footer{margin:0;padding:6px 0 0;border:0;justify-content:center;align-items:center;font-size:10px;line-height:1.4;color:#777}
/* Short desktop windows retain complete text without shrinking the map offscreen. */
@media(min-width:901px) and (max-height:740px){
.portfolio-home{grid-template-rows:48px minmax(0,1fr) 28px;min-height:560px}
.portfolio-home .portfolio-layout{padding-top:6px;padding-bottom:4px}
.portfolio-home .heading{padding-bottom:18px}
.portfolio-home h1{font-size:25px}
.portfolio-home .preview-media{height:110px;margin-top:10px}
.portfolio-home .preview h2{font-size:19px;margin:13px 0 8px}
.portfolio-home .preview p{font-size:13px;line-height:1.75}
.portfolio-home .preview .metadata{margin-top:10px;font-size:11px}
.portfolio-home .enter{margin-top:9px;padding:9px 0}
.portfolio-home .note{margin-top:8px;font-size:10px}
.portfolio-home>footer{padding-bottom:8px}
}
/* Narrow screens flow naturally: title, map, then selected project. */
@media(max-width:900px){
.portfolio-home{display:block;height:auto;min-height:100svh}
.portfolio-home>header{padding:20px 5vw 12px}
.portfolio-home .portfolio-layout{display:flex;flex-direction:column;gap:0;padding:18px 5vw 0}
.intro-column{display:contents}
.portfolio-home .heading{order:0;padding:0 0 22px}
.portfolio-home h1{font-size:26px}
.map-column{order:1;display:block;width:100%}
.map-stage{display:block;container-type:normal}
.portfolio-home .scene{width:100%;margin:0;max-width:none;aspect-ratio:3/2}
.portfolio-home .map-footer{padding:16px 0 20px;text-align:center}
.portfolio-home .preview{order:2;display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);column-gap:20px;margin:12px 0 30px}
.portfolio-home .preview>.overline{grid-column:1/-1}
.portfolio-home .preview-media{grid-column:1;grid-row:2/5;width:100%;height:auto;aspect-ratio:16/10;margin-top:15px;align-self:start}
.portfolio-home .preview h2{grid-column:2;font-size:19px;margin:12px 0 8px}
.portfolio-home .preview p{grid-column:2;font-size:13px}
.portfolio-home .preview .metadata{grid-column:2;margin-top:10px}
.portfolio-home .enter,.portfolio-home .note{grid-column:1/-1}
.portfolio-home>footer{padding:10px 5vw 22px}
}
/* Fixed preview slots: changing a project never reflows another field. */
@media(min-width:901px){
.portfolio-home .intro-column{align-self:start;display:grid;grid-template-rows:64px auto;padding-top:12px}
.portfolio-home .heading{padding:0;align-self:start}
.portfolio-home .preview{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:18px clamp(110px,18svh,156px) 52px 104px 42px 38px 36px;row-gap:8px}
.portfolio-home .preview>*{min-width:0;margin:0!important;align-self:start}
.portfolio-home .preview>.overline{grid-row:1}
.portfolio-home .preview .preview-media{grid-row:2;height:100%;align-self:stretch}
.portfolio-home .preview h2{grid-row:3;font-size:21px;line-height:1.4}
.portfolio-home #preview-description{grid-row:4;line-height:1.75}
.portfolio-home .preview .metadata{grid-row:5;line-height:1.7}
.portfolio-home .preview .enter{grid-row:6;align-self:stretch;padding:8px 0}
.portfolio-home .preview .note{grid-row:7;line-height:1.6}
}
@media(min-width:901px) and (max-height:740px){
.portfolio-home{min-height:610px}
.portfolio-home .intro-column{grid-template-rows:44px auto;padding-top:8px}
.portfolio-home .preview{grid-template-rows:16px 90px 46px 88px 34px 34px 28px;row-gap:6px}
.portfolio-home .preview h2{font-size:19px}
.portfolio-home #preview-description{font-size:13px;line-height:1.65}
}
.portfolio-home .map-stage{padding:8px;overflow:visible;background:none}
.portfolio-home .scene{width:min(100%,calc(150cqh - 24px));background:none}
.portfolio-home .campus{clip-path:polygon(1.6927% 46.7773%,29.2969% 21.7773%,31.7708% 23.9258%,31.7708% 18.6523%,50.3906% 2.4414%,66.6667% 16.0156%,67.7083% 15.4297%,72.7214% 15.4297%,73.7630% 16.2109%,73.7630% 14.6484%,78.6458% 10.3516%,78.6458% 8.7891%,79.6224% 7.9102%,80.4688% 8.6914%,81.3802% 8.0078%,81.3802% 6.5430%,82.4219% 5.7617%,83.3333% 6.5430%,84.3099% 5.6641%,84.3099% 4.1992%,85.4818% 3.3203%,86.3932% 4.0039%,86.8490% 3.5156%,86.8490% 2.4414%,87.7604% 1.9531%,88.5417% 2.9297%,99.05% 11.5234%,99.05% 21.25%,86.0026% 31.8359%,90.0391% 37.2070%,90.0391% 43.0664%,71.1589% 58.4961%,70.3125% 58.0078%,70.3125% 56.4453%,68.8151% 59.4727%,72.6562% 62.9883%,72.6562% 66.8945%,70.5729% 68.7500%,72.0052% 72.2656%,72.0052% 78.0273%,45.5078% 99.7070%,1.6927% 51.1719%);background:transparent}
@media(max-width:900px){
.portfolio-home .scene{width:100%}
.portfolio-home .map-stage{padding:0}
.portfolio-home .preview{grid-template-rows:22px 62px 110px 46px 42px 34px;row-gap:8px}
.portfolio-home .preview>*{margin:0!important;min-width:0}
.portfolio-home .preview>.overline{grid-row:1}
.portfolio-home .preview .preview-media{grid-row:2/5;height:140px;aspect-ratio:auto}
.portfolio-home .preview h2{grid-row:2;align-self:start}
.portfolio-home #preview-description{grid-row:3;align-self:start;font-size:13px;line-height:1.7}
.portfolio-home .preview .metadata{grid-row:4;align-self:start}
.portfolio-home .preview .enter{grid-row:5}
.portfolio-home .preview .note{grid-row:6}
}

/* Center the combined rail and height-constrained map, not a full-width empty grid. */
@media(min-width:901px){
 .portfolio-home{--rail-width:clamp(250px,20vw,300px);--column-gap:clamp(24px,2vw,36px);--map-width:calc(150svh - 246px);--frame-width:min(94vw,calc(var(--rail-width) + var(--column-gap) + var(--map-width)))}
 .portfolio-home>header,.portfolio-home>footer{width:var(--frame-width);margin-inline:auto;padding-inline:0}
 .portfolio-home .portfolio-layout{width:var(--frame-width);margin-inline:auto;padding:12px 0 8px;grid-template-columns:var(--rail-width) minmax(0,1fr);gap:var(--column-gap)}
 .portfolio-home .intro-column{align-self:center;padding-top:0}
 .portfolio-home .map-stage{place-items:center;padding:8px 0}
 .portfolio-home .scene{width:100%;max-width:calc(150cqh - 24px);margin-inline:auto}
}
@media(min-width:901px) and (max-height:740px){
 .portfolio-home{--map-width:max(702px,calc(150svh - 213px))}
 .portfolio-home .portfolio-layout{padding-top:6px;padding-bottom:4px}
}

.portfolio-home .heading h1{position:relative;top:-8px}