*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--page)}
body{margin:0;background:var(--page);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.stage{position:relative;width:100%;line-height:0}
.stage>img{display:block;width:100%;height:auto;margin:0}
.hotspot{position:absolute;z-index:50;display:block;background:transparent;cursor:pointer}
.hotspot:hover{background:rgba(255,255,255,.05)}
.hotspot:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* Content inside the boxes already drawn into the topper. */
.image-content{position:absolute;z-index:10;line-height:1.5;top:var(--box-top)}
.box1-overlay{left:var(--left-margin);width:var(--box1-width);padding:28px 48px 0}
.box2-overlay{left:calc(var(--left-margin) + var(--box1-width) + var(--gap));width:var(--box2-width);padding:28px 34px 0}

/* Exact continuation of those same columns. */
.columns{
 display:grid;
 grid-template-columns:var(--left-margin) var(--box1-width) var(--gap) var(--box2-width) var(--right-margin);
 margin:0;padding:0;background:var(--page);align-items:stretch;min-height:1500px
}
.box1-continuation{
 grid-column:2;background:var(--blue);margin:-1px 0 0;padding:28px 48px 100px;min-width:0;
 border-left:var(--stroke) solid var(--blue-edge);border-right:var(--stroke) solid var(--blue-edge);
 border-top:0;border-bottom:0
}
.box2-continuation{
 grid-column:4;background:var(--tan);margin:-1px 0 0;padding:28px 34px 100px;min-width:0;
 border-left:var(--stroke) solid var(--tan-edge);border-right:var(--stroke) solid var(--tan-edge);
 border-top:0;border-bottom:0
}
section{padding:30px 0 48px}
section+section{border-top:1px solid rgba(16,54,61,.15)}
h1,h2,h3{color:var(--ink);text-transform:uppercase;letter-spacing:.075em}
h1{font-size:clamp(30px,2.6vw,46px);line-height:1.05;margin:0 0 15px}
h2{font-size:clamp(22px,1.9vw,31px);line-height:1.1;margin:26px 0 11px}
h3{font-size:18px;line-height:1.2;margin:22px 0 8px}
p{font-size:16px;line-height:1.58;margin:0 0 12px}
a.inline{color:inherit;font-weight:700}

@media(max-width:800px){
 .image-content{position:static;width:auto!important;padding:26px!important;line-height:1.5}
 .box1-overlay{background:var(--blue);margin:0 12px;border-left:var(--stroke) solid var(--blue-edge);border-right:var(--stroke) solid var(--blue-edge)}
 .box2-overlay{background:var(--tan);margin:12px;border-left:var(--stroke) solid var(--tan-edge);border-right:var(--stroke) solid var(--tan-edge)}
 .columns{display:block;padding:0 12px;min-height:0}
 .box1-continuation,.box2-continuation{margin:0;padding:24px 26px 60px}
 .box2-continuation{margin-top:12px}
}