.architecture-story{--drawing-paper:#f5f4ed;--drawing-ink:#203847;display:grid;grid-template-columns:64% 36%;background:var(--drawing-paper);color:var(--drawing-ink);border-block:1px solid #c8d1cb;position:relative;align-items:start}
.architecture-visual{position:sticky;top:76px;height:calc(100svh - 76px);min-height:520px;isolation:isolate}
.architecture-heading{position:absolute;top:37px;left:8%;right:8%;z-index:2;pointer-events:none}
.architecture-heading .eyebrow{font-size:12px;letter-spacing:.14em;color:#7e704e;margin-bottom:17px}
.immersive .architecture-heading h2{font-size:clamp(33px,3.3vw,49px);line-height:1.1;margin:0}
.architecture-art{position:absolute;inset:185px 0 84px}
.architecture-fallback{display:block;width:87%;height:100%;margin:auto;object-fit:cover;filter:grayscale(1);mix-blend-mode:multiply}
.architecture-canvas,.architecture-canvas canvas{display:block;width:100%;height:100%}
.architecture-canvas{position:absolute;inset:0;opacity:0}
.architecture-ready .architecture-canvas{opacity:1}
.architecture-ready .architecture-fallback{display:none}
.architecture-navigation{position:absolute;left:8%;bottom:60px;display:flex;gap:10px;z-index:4}
.architecture-navigation>a{font:16px/1 Georgia,serif;width:43px;height:43px;display:flex;align-items:center;justify-content:center;border:1px solid #b9c6c7;border-radius:50%;color:#536873;background:var(--drawing-paper);text-decoration:none}
.architecture-navigation>a[aria-current="step"]{background:#203847;color:#f5f4ed;border-color:#203847}
.architecture-navigation>a:hover{border-color:#203847}
.architecture-caption{position:absolute;left:8%;right:6%;bottom:21px;font-size:12px;line-height:1.6;color:#6a797f;margin:0}
.architecture-progress{position:absolute;left:8%;right:8%;bottom:0;height:1px;background:#cbd3cd}
.architecture-progress>span{display:block;height:100%;width:100%;background:#95815a;transform:scaleX(0);transform-origin:left}
.architecture-chapters{border-left:1px solid #cbd3cd;padding:0 14% 0 11%}
.architecture-chapter{min-height:76svh;padding:70px 0;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #becbc9;scroll-margin-top:110px}
.architecture-chapter:last-child{border:0}
.architecture-number{font:italic 46px/1 Georgia,serif;color:#879a9e;display:block;margin-bottom:28px;transition:color .3s}
.architecture-chapter.is-current .architecture-number{color:#8b713f}
.immersive .architecture-chapter h3{font-size:clamp(28px,2.65vw,39px);line-height:1.16;letter-spacing:-.025em;margin:0 0 23px}
.architecture-chapter p{font-size:17px;line-height:1.85;color:#536770;margin:0}
.college-pins{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.college-pin{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;display:flex;align-items:center;justify-content:center;width:35px;height:35px;font:14px/1 Georgia,serif;border:1px solid #74878e;border-radius:50%;background:#f5f4ed;color:#203847;box-shadow:0 4px 0 -3px #203847;text-decoration:none}
.college-pin[aria-current="step"]{background:#203847;color:#f5f4ed;outline:4px solid #f5f4edb3}
.college-pin[hidden]{display:none}
@media(max-width:1100px){.architecture-story{grid-template-columns:59% 41%}.architecture-chapters{padding-inline:10%}.architecture-art{inset:155px 0 95px}.architecture-chapter p{font-size:16px}.architecture-heading{left:7%}}
@media(max-width:760px){
.architecture-story{display:block}
.architecture-visual{height:490px;min-height:0;position:relative;top:auto;border-bottom:1px solid #cbd3cd}
.architecture-heading{top:25px;left:7%;right:7%}
.architecture-heading .eyebrow{font-size:11px;margin-bottom:13px}
.immersive .architecture-heading h2{font-size:32px;line-height:1.1}
.architecture-art{inset:126px 0 83px}
.architecture-navigation{left:7%;bottom:38px;gap:8px}
.architecture-navigation>a{width:36px;height:36px;font-size:14px}
.architecture-caption{left:7%;bottom:12px;font-size:10px;line-height:1.4}
.architecture-chapters{padding:0 7%;border:0}
.architecture-chapter{min-height:0;padding:42px 0;scroll-margin-top:95px}
.architecture-number{font-size:37px;margin-bottom:20px}
.immersive .architecture-chapter h3{font-size:31px;margin-bottom:20px}
.architecture-chapter p{font-size:16px;line-height:1.8}
.college-pin{width:30px;height:30px;font-size:12px}
}
@media(max-width:760px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
.architecture-ready .architecture-visual{position:sticky;top:76px;height:44svh;min-height:315px;background:var(--drawing-paper);z-index:5}
.architecture-ready .architecture-heading{top:17px}
.architecture-ready .architecture-heading .eyebrow{font-size:10px;margin:0 0 8px}
.immersive .architecture-ready .architecture-heading h2{font-size:25px;line-height:1.04}
.architecture-ready .architecture-art{inset:95px 0 48px}
.architecture-ready .architecture-navigation{bottom:11px;left:auto;right:6%;gap:6px}
.architecture-ready .architecture-navigation>a{width:31px;height:31px;font-size:13px}
.architecture-ready .architecture-caption{left:6%;right:55%;bottom:10px;font-size:9px;line-height:1.4}
.architecture-ready .architecture-chapter{min-height:53svh;padding:42px 0;scroll-margin-top:calc(44svh + 105px)}
.architecture-ready .architecture-number{font-size:34px;margin-bottom:20px}
}
@media(min-width:761px) and (max-height:650px){.architecture-visual{min-height:0}.architecture-heading{top:23px}.immersive .architecture-heading h2{font-size:31px}.architecture-art{inset:135px 0 80px}.architecture-heading .eyebrow{margin-bottom:12px}.architecture-chapter{min-height:100svh}}
@media(prefers-reduced-motion:reduce){.architecture-visual{position:relative;top:auto}.architecture-chapter{min-height:0;padding-block:45px}.architecture-number{transition:none}}

.college-fallback{display:flex;align-items:center;justify-content:center;text-align:center;border-block:1px solid #cbd3cd;font:28px/1.4 Georgia,serif;color:#536873}
[data-college-landmark]{color:#203847}