/* Source images are untouched captures; annotations sit on an independent layer. */
.design-atlas{--annotation:#95623d;--annotation-light:rgba(149,98,61,.12);margin:0;padding-block:3rem 4rem;border-block-start:1px solid var(--line);container-type:inline-size;container-name:atlas}
.design-atlas>figcaption{font:400 clamp(1.65rem,3vw,2.5rem)/1.15 var(--serif);letter-spacing:-.02em;margin:0 0 1rem}
.design-atlas .plate-copy{font:1rem/1.8 var(--serif);max-inline-size:70ch;margin:0 0 1.4rem;text-wrap:wrap}
.design-plate{margin-block-start:2.75rem;padding-block-start:1.75rem;border-block-start:1px solid var(--line)}
.design-atlas h3{font:400 clamp(1.25rem,2vw,1.65rem)/1.3 var(--serif);margin:0 0 1rem;letter-spacing:-.01em}
.design-atlas h4{font:400 .8rem/1.6 var(--mono);margin:0 0 .8rem;color:var(--muted);overflow-wrap:anywhere}
.plate-image-link{display:block;min-inline-size:0;border:0!important}
.plate-image-link img{display:block;inline-size:100%;block-size:auto;max-inline-size:100%}
.plate-image-link:focus-visible{outline:3px solid var(--annotation);outline-offset:4px}
.plate-overlay{position:relative;background:#faf9f6}
.plate-overlay>svg{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:visible}
.plate-gridline{stroke:#95623d;stroke-width:1;stroke-opacity:.2;fill:none}
.plate-outline{stroke:#95623d;stroke-opacity:.65;stroke-width:1;fill:none}
.plate-dot{fill:#825332;stroke:#fff;stroke-width:1}
.plate-number{font:12px var(--mono);fill:#fff;text-anchor:middle;letter-spacing:0}
.plate-leader{stroke:#95623d;stroke-width:1.5;fill:none}
.plate-source{display:inline-block;font:.75rem/1.6 var(--mono);margin-block:.8rem 0;max-inline-size:100%;overflow-wrap:anywhere}
.plate-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.5rem 0 2rem;padding:1rem 0;border-block:1px solid var(--line)}
.plate-metrics dt,.plate-type-metrics dt{font:.72rem/1.5 var(--mono);color:var(--muted);margin:0 0 .3rem}
.plate-metrics dd{font:.95rem/1.5 var(--mono);margin:0;overflow-wrap:anywhere}
.plate-responsive{display:grid;grid-template-columns:minmax(0,335px) minmax(0,1fr);gap:clamp(2rem,6cqi,6rem);align-items:start;margin-block-start:2rem}
.plate-responsive>.plate-view{max-inline-size:335px}
.plate-responsive>div:last-child{padding-block-start:2rem}
.plate-key{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1rem}
.plate-key li{display:flex;align-items:baseline;gap:1rem;font:1rem/1.6 var(--serif);border-block-end:1px solid var(--line);padding-block-end:1rem}
.plate-key span,.plate-index{font:.8rem/1.5 var(--mono);color:var(--annotation);flex:none}
.plate-type-row{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:2rem;border-block-start:1px solid var(--line);padding-block:1.75rem}
.plate-type-reading{min-inline-size:0}
.design-atlas .measured-type{margin:1rem 0 0;overflow-wrap:anywhere;text-wrap:wrap}
.plate-type-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0;align-content:start}
.plate-type-metrics>div:last-child{grid-column:1/-1}
.plate-type-metrics dd{margin:0;font:.85rem/1.6 var(--mono);overflow-wrap:anywhere}
.plate-anatomy{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(1.5rem,5cqi,5rem);max-inline-size:66rem;margin:2rem auto}
.plate-strip{min-inline-size:0}
.plate-strip-art{position:relative;padding-inline-end:12.7273%;background:#fff}
.plate-strip-art>svg{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none}
.plate-strip img{image-rendering:pixelated}
.plate-callouts{list-style:none;padding:1rem 0;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
.plate-callouts li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.5rem;border-block-start:1px solid var(--line);padding-block-start:1rem}
.design-atlas .plate-callouts h4{color:var(--ink);font:1.15rem/1.4 var(--serif);margin:0 0 .65rem}
.design-atlas .plate-callouts p{font-size:.95rem;margin:0;line-height:1.75}
.plate-widths{margin-block:2rem;display:grid;gap:.5rem}
.plate-width-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:center;gap:1.2rem;padding-block:.75rem;border-block-end:1px solid var(--line)}
.plate-width-row h4{margin:0;color:var(--ink)}
.plate-width-row svg{inline-size:100%;block-size:auto}
.plate-width-row p{font:.85rem/1.6 var(--mono);margin:0}.plate-width-row p span{color:var(--muted);white-space:nowrap}
.paper-outline{fill:#fff;stroke:#99978d;stroke-width:1}
.image-outline{fill:rgba(149,98,61,.12);stroke:#b3a28f;stroke-width:1}
.design-atlas .plate-footnote{font:.85rem/1.7 var(--serif);color:var(--muted);max-inline-size:75ch;margin:1.2rem 0 0}
.plate-till-grid{max-inline-size:768px;margin:2rem auto 0;background:#fff}
.pixel-proof img{image-rendering:pixelated;background:#fff}
.plate-cell-ruler{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));margin-inline:3.125%;border-block:1px solid #bda68d}
.plate-cell-ruler span{border-inline-start:1px solid #d6c7b5;text-align:center;font:9px/2.1 var(--mono);color:#704b2e}
.plate-glyph-detail{display:grid;grid-template-columns:132px minmax(0,1fr);gap:2.5rem;align-items:center;max-inline-size:54rem;margin:2.5rem auto}
.plate-glyph svg{inline-size:132px;block-size:auto}
.plate-glyph-detail .pixel-proof{max-inline-size:768px}
.plate-font-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin:2rem 0}
.plate-font-pair>div{min-inline-size:0}.plate-font-pair .pixel-proof{border-block:1px solid var(--line)!important;padding-block:1rem}
@container atlas (max-width:48rem){
 .plate-responsive{grid-template-columns:minmax(0,335px) minmax(0,1fr);gap:1.5rem}
 .plate-type-row{grid-template-columns:minmax(0,1fr)}
 .plate-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .plate-anatomy{grid-template-columns:minmax(0,1fr)}
 .plate-strip{inline-size:min(100%,440px);justify-self:center}
 .plate-callouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
 .plate-font-pair{grid-template-columns:minmax(0,1fr)}
 .plate-font-pair .pixel-proof{max-inline-size:704px}
}
@container atlas (max-width:33rem){
 .plate-responsive{grid-template-columns:minmax(0,1fr)}
 .plate-responsive>div:last-child{padding-block-start:0}
 .plate-callouts{grid-template-columns:minmax(0,1fr)}
 .plate-width-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,7.25rem),1fr));gap:.4rem 1rem}
 .plate-width-row svg{grid-column:1/-1;grid-row:2}.plate-width-row p{text-align:end}
 .plate-glyph-detail{grid-template-columns:minmax(0,1fr);gap:1.5rem}.plate-glyph{justify-self:center}
 .plate-cell-ruler{display:none}
}
@media(max-width:620px){.plate-anatomy,.plate-responsive,.plate-type-row,.plate-font-pair{grid-template-columns:minmax(0,1fr)}.plate-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.plate-strip{max-inline-size:440px}.plate-callouts{gap:1.5rem}}
html[data-reading-simple] :is(.plate-anatomy,.plate-responsive,.plate-type-row,.plate-font-pair,.plate-callouts){display:block}
html[data-reading-simple] :is(.plate-callouts li,.plate-type-metrics,.plate-font-pair>div){margin-block:1.5rem}
html[data-reading-sans] .design-atlas .measured-type{font-family:var(--readable-sans)!important}
html[data-reading-large] .design-atlas .measured-type{font-size:1.35rem!important;line-height:1.8!important}
html[data-reading-spacing] .design-atlas .measured-type{letter-spacing:.08em!important;line-height:1.9!important}
html[data-reading-contrast] .design-atlas{--annotation:var(--ink)}
@media(prefers-color-scheme:dark){.design-atlas{--annotation:#d6a67d}}
@media(forced-colors:active){.plate-outline,.plate-gridline{stroke:CanvasText}.plate-dot{fill:CanvasText}.plate-number{fill:Canvas}}
.design-atlas>figcaption h2{font:inherit;margin:0;letter-spacing:inherit}
.plate-till-grid>svg{display:block;inline-size:100%;block-size:auto}
.plate-field-number{font:10px var(--mono);fill:#825332;text-anchor:middle}
/* Distribute the notes against the measured field positions, allowing each
   note its intrinsic height rather than fixing text into absolute boxes. */
@container atlas (min-width:48.001rem){
 .plate-callouts{display:grid;grid-template-rows:minmax(min-content,.09fr) minmax(min-content,.125fr) minmax(min-content,.225fr) minmax(min-content,.075fr) minmax(min-content,.175fr) minmax(min-content,.31fr);gap:0;padding-block:3.5rem 0}
 .plate-callouts li{align-self:start}
}