.annotated-cad{position:relative;width:94vw;max-width:1500px;margin:80px auto 110px;aspect-ratio:1200 / 780;isolation:isolate}
.cad-frost{position:absolute;left:23%;top:22%;width:54%;height:53%;z-index:1;background:transparent}
.cad-pair{position:absolute;left:-5.5555556%;width:111.1111111%;height:100%;display:flex;align-items:center;justify-content:center;gap:8%;padding:5% 6%}
.cad-pair img{width:46%;height:100%;object-fit:contain;max-width:none;filter:none}
.cad-note{position:absolute;z-index:3;width:20%;height:auto;object-fit:contain;filter:none}
.note-elastic{left:0;top:1%;width:25%}.note-deep{right:0;top:0;width:27%}
.note-vent{left:0;top:48%;width:22%}.note-pocket{right:0;top:48%;width:22%}.note-flatlock{left:36%;top:86%;width:29%}
.note-split{left:0;top:43%;width:22%}.note-lockstitch{right:0;top:45%;width:22%}
.cad-arrows{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.cad-arrows path{stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.outer-cad{margin-top:30px;aspect-ratio:1200 / 670}.outer-cad .cad-frost{top:17%;height:66%}.outer-cad .cad-arrows{height:116.4%}
@media(max-width:700px){.annotated-cad{width:96vw;margin-top:55px;margin-bottom:65px}.cad-arrows path{stroke-width:.9}.cad-pair{gap:5%;padding:6% 4%}}



.final-presentation-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;width:min(100%,calc((100svh - 180px)*1.6));margin:40px auto 80px}.final-presentation-pair img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}

.annotated-cad::before{content:'';position:absolute;top:0;bottom:-20px;left:50%;width:100vw;transform:translateX(-50%);background:#505052;z-index:-1;pointer-events:none}
.final-presentation-pair{display:block;position:relative;padding-bottom:64px}
.final-presentation-pair img:first-child{width:50%}
.final-presentation-pair img:last-child{position:absolute;top:64px;right:calc((100% - 100vw)/2);width:min(50%,calc(50vw - 24px))}

/* Centre the first set of handwriting within its panel. */
.inner-cad::before{top:-4%;bottom:calc(4% - 20px)}

/* Fit each complete annotated layout below the header; panels remain viewport-wide. */
.annotated-cad{width:min(94vw,calc((100svh - 230px)*1.53846154));max-width:1200px}
@media(max-width:700px){.annotated-cad{width:min(96vw,calc((100svh - 170px)*1.53846154))}}