/* The PDF's visual language is scoped to this public architecture illustration. */
.architecture-story{--architecture-bg:#f5f5f7;--architecture-text:#1d1d1f;--architecture-muted:#6e6e73;--architecture-key:#0066cc;--architecture-line:#c7c7cc;--architecture-support:#aeaeb2;--architecture-main:#6e6e73;position:relative;isolation:isolate;width:min(1200px,calc(100% - var(--gutter)*2));height:640px;margin:32px auto 0;overflow:hidden;background:var(--architecture-bg);color:var(--architecture-text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}
.architecture-story:focus-visible{outline:2px solid var(--architecture-key);outline-offset:6px}
.architecture-canvas,.architecture-fallback{position:absolute;inset:0;width:100%;height:100%}
.architecture-canvas{display:block;touch-action:pan-y;cursor:grab}
.architecture-canvas:active{cursor:grabbing}
.architecture-fallback{pointer-events:none}
.architecture-fallback img,.architecture-fallback svg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.architecture-fallback img{left:36%;width:64%}
.architecture-fallback .architecture-plate-dark{display:none}
[data-architecture-status="ready"] .architecture-fallback{visibility:hidden}
.architecture-caption{position:absolute;z-index:2;top:32px;left:32px;width:380px;max-width:calc(100% - 64px);pointer-events:none;animation:architecture-caption-in .6s both}
.architecture-caption[hidden]{display:none}
.architecture-step{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 16px;font-size:13px;line-height:1.5;font-weight:600;color:var(--architecture-key)}
.architecture-caption h2{font-size:28px;line-height:1.12;font-weight:600;letter-spacing:-.035em;margin:0 0 16px;max-width:24ch}
.architecture-caption>p:last-child{font-size:16px;line-height:1.5;color:var(--architecture-muted);max-width:44ch;margin:0}
.architecture-footnote{position:absolute;z-index:2;bottom:32px;left:32px;right:32px;max-width:76ch;font-size:12px;line-height:1.5;color:var(--architecture-muted);pointer-events:none}
.architecture-footnote p{margin:0}
.architecture-footnote p+p{margin-top:8px}
@keyframes architecture-caption-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-color-scheme:dark){.architecture-story{--architecture-bg:#000000;--architecture-text:#f5f5f7;--architecture-muted:#a1a1a6;--architecture-key:#2997ff;--architecture-line:#3a3a3c;--architecture-support:#636366;--architecture-main:#a1a1a6}.architecture-fallback .architecture-plate-light{display:none}.architecture-fallback .architecture-plate-dark{display:block}}
/* At this viewport width the 32px page gutters leave a 720px figure. */
@media(max-width:784px){.architecture-story{display:grid;grid-template-rows:auto minmax(352px,1fr) auto;min-height:720px;height:auto}.architecture-caption{position:relative;grid-row:1;inset:auto;width:auto;max-width:none;margin:32px 32px 0}.architecture-fallback:has(> img){position:relative;grid-row:2;inset:auto}.architecture-fallback img{inset:0;width:100%;height:100%}.architecture-footnote{position:relative;grid-row:3;inset:auto;max-width:60ch;margin:0 32px 32px}}
@media(max-width:720px){.architecture-caption h2{font-size:22px}.architecture-caption>p:last-child{font-size:14px}}
@media(min-width:1920px){.architecture-story{width:min(1600px,calc(100% - var(--gutter)*2));height:800px}}
@media(min-width:3000px){.architecture-story{width:100%;max-width:3840px;height:auto;aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){.architecture-caption{animation:none!important}}
@media print{.architecture-story{width:100%;height:560px;break-inside:avoid}.architecture-canvas{display:none}.architecture-fallback{visibility:visible!important}.architecture-footnote p+p{display:none}}