:root{--frame-ink:#101a20;--frame-paper:#f8f4eb;--frame-muted:#b4c2c4;--frame-gold:#e9c48c}
html{scroll-behavior:auto}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--frame-gold);outline-offset:4px}
.frames-section{background:var(--frame-ink);color:var(--frame-paper)}
.frames-intro{padding:58px 48px 42px;max-width:1500px;margin:auto}.frames-intro .eyebrow{color:var(--frame-gold);font-size:16px}.frames-intro h2{font-family:Georgia,serif;font-size:clamp(38px,4vw,58px);line-height:1.1;font-weight:400;letter-spacing:-.025em}.frames-intro>p:not(.eyebrow){font-size:19px;color:var(--frame-muted);margin-top:24px;max-width:60ch}.section-links{display:flex;gap:14px 32px;flex-wrap:wrap;margin-top:24px;font-size:16px}.section-links a{text-decoration:underline;text-underline-offset:5px}
.frames-track{display:none;height:492svh}.sequence-mode .frames-track{display:block}.frames-pin{height:100svh;position:sticky;top:0;padding:8px 24px 0;background:var(--frame-ink)}
#frame-stage{margin:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}.frame-canvas{min-width:0;min-height:0;display:flex;justify-content:center;align-items:center;position:relative}#frame-picture{display:contents}#frame-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;flex:0 1 auto}#frame-loading{position:absolute;font-size:18px;background:var(--frame-ink);padding:14px}
.frame-toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px;padding:13px 8px 19px}.frame-heading{display:flex;align-items:center;gap:22px;min-width:0}.frame-heading p{font-size:18px;line-height:1.35;max-width:64ch}#frame-counter{font-size:16px;color:var(--frame-gold);font-variant-numeric:tabular-nums;white-space:nowrap}.frame-actions{display:flex;gap:8px;flex-shrink:0}.frame-actions button{border:1px solid #53676d;background:transparent;color:var(--frame-paper);min-height:42px;padding:8px 14px;font-size:15px;white-space:nowrap}.frame-actions button:hover{background:#26383d}.frame-actions button:disabled{opacity:.4;cursor:default}.frame-actions #frame-prev,.frame-actions #frame-next{min-width:42px;font-size:20px;padding:5px 10px}.frame-index{display:flex;gap:5px;position:absolute;bottom:0;left:8px;right:8px;height:3px}.frame-index i{flex:1;background:#34474e}.frame-index i.current{background:var(--frame-gold)}
.sequence-mode .static-frames{display:none}.static-frames{padding:0 36px;max-width:1600px;margin:auto}.static-frames figure{margin:0;padding:40px 0 56px;border-top:1px solid #34474e}.static-frames picture img{display:block;width:100%;height:auto;max-height:none}.static-frames figcaption{padding:28px 16px 0;max-width:1000px;margin:auto}.static-frames h3{font-size:30px;line-height:1.2;font-weight:500}.static-frames h4{font-size:20px;margin:22px 0 6px}.static-frames p,.static-frames li{font-size:18px;color:var(--frame-muted)}.static-frames p{margin-top:14px}.static-frames ul{padding-left:24px;margin:8px 0}.static-frames .original-links{font-size:16px;display:flex;gap:22px;margin-top:20px;text-decoration:underline}
.frames-resolution{padding:64px 48px 72px;max-width:1500px;margin:auto;border-top:1px solid #34474e}.frames-resolution>p{font:400 clamp(32px,4vw,52px)/1.15 Georgia,serif;letter-spacing:-.025em}.frames-resolution>span{display:block;margin-top:24px;color:var(--frame-muted);font-size:18px}.frames-resolution>a{display:inline-block;margin-top:24px;font-size:16px;text-decoration:underline;text-underline-offset:5px}footer{background:#0d171b;color:var(--frame-muted)}
#frame-dialog,#reading-dialog{border:1px solid #566d74;background:var(--frame-ink);color:var(--frame-paper);padding:22px;width:calc(100vw - 32px);max-width:1500px;max-height:94dvh;box-sizing:border-box}#frame-dialog[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:94dvh;gap:14px}#reading-dialog{max-width:820px;overflow:auto}dialog::backdrop{background:#061014e8}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.dialog-heading .eyebrow{font-size:14px;margin-bottom:8px;color:var(--frame-gold)}.dialog-heading h2{font-size:28px;line-height:1.2;font-weight:500;letter-spacing:-.025em}.dialog-heading button,.inspect-tools button{background:transparent;color:inherit;border:1px solid #5d7279;font-size:16px;padding:8px 14px;min-height:44px;white-space:nowrap}.inspect-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;font-size:16px}.inspect-tools span{font-size:15px;color:var(--frame-muted)}.inspect-tools button[aria-pressed=true]{background:var(--frame-paper);color:var(--frame-ink)}.inspect-tools a{text-decoration:underline}.inspector-viewport{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;background:#0c1418;display:flex;align-items:center;justify-content:center}.inspector-viewport img{display:block;max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}.inspector-viewport.actual{display:block}.inspector-viewport.actual img{max-width:none;max-height:none;width:auto;height:auto}#reading-content{padding:28px 4px 12px}#reading-content>p{font-size:20px;color:var(--frame-muted)}#reading-content h3{font-size:22px;margin:28px 0 8px;line-height:1.25}#reading-content ul{padding-left:23px;margin:8px 0}#reading-content li{font-size:18px;line-height:1.65;margin:8px 0;color:var(--frame-muted)}
@media(max-width:1000px){.frame-heading p{font-size:16px}.frame-toolbar{gap:16px}.frame-heading{gap:12px}.frame-actions button{padding:8px 10px}.frames-pin{padding-left:12px;padding-right:12px}}
@media(max-width:800px){.frames-intro{padding:42px 24px 28px}.frames-intro h2{font-size:38px}.frames-intro>p:not(.eyebrow){font-size:17px}.frames-pin{padding:4px 10px 0}.frame-toolbar{display:grid;gap:9px;padding:10px 4px 15px;min-height:102px}.frame-heading{justify-content:space-between;gap:14px}.frame-heading p{font-size:15px;text-align:right;line-height:1.25}.frame-actions{justify-content:space-between}.frame-actions button{font-size:14px;min-height:40px;padding:7px 11px}.frame-actions #frame-prev,.frame-actions #frame-next{font-size:20px;min-width:40px}.static-frames{padding:0 16px}.static-frames figcaption{padding:24px 4px 0}.static-frames h3{font-size:26px}.static-frames h4{font-size:20px}.static-frames p,.static-frames li{font-size:17px}.frames-resolution{padding:44px 24px 52px}.frames-resolution>span{font-size:17px}#frame-dialog,#reading-dialog{padding:14px;width:calc(100vw - 16px)}.dialog-heading h2{font-size:22px}.dialog-heading .eyebrow{font-size:14px;max-width:26ch}.dialog-heading button{padding:6px 9px}.inspect-tools{gap:8px 14px}.inspect-tools span{font-size:14px}.inspect-tools a{font-size:15px}#reading-content{padding:22px 4px 8px}#reading-content>p,#reading-content li{font-size:17px}#reading-content h3{font-size:21px}}
@media(max-width:359px){.frames-intro{padding:36px 18px 24px}.frames-intro h2{font-size:32px}.frame-heading p{font-size:14px}.frame-actions{gap:5px}.frame-actions button{padding:7px 8px}.frames-pin{padding-left:4px;padding-right:4px}.dialog-heading h2{font-size:20px}.inspect-tools span{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Reserve two title lines in every portrait state so the image never changes scale. */
@media(max-width:800px){.frame-toolbar{grid-template-rows:42px 40px}.frame-heading{height:42px}.frame-heading p{margin:0}}

/* R4.3: locked artwork is the canvas; controls occupy one compact strip. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0}
.frames-pin{padding:0;height:100svh}
#frame-stage{grid-template-rows:minmax(0,1fr) 52px}
.frame-toolbar{display:flex;grid-template-rows:none;min-height:52px;height:52px;padding:4px 16px 5px;gap:12px}
.frame-heading{height:auto;display:block}.frame-actions{gap:8px}.frame-actions button{min-height:40px;padding:6px 14px;font-size:15px}.frame-actions #frame-prev,.frame-actions #frame-next{min-width:40px;padding:4px 10px}
.frame-index{left:0;right:0;height:2px}.frame-canvas{background:#06121a}
@media(max-width:800px){.frames-pin{padding:0}.frame-toolbar{display:flex;grid-template-rows:none;height:52px;min-height:52px;padding:4px 10px 5px;gap:8px}.frame-heading{height:auto}.frame-actions{gap:6px}.frame-actions button{font-size:14px;padding:6px 10px}#frame-counter{font-size:14px}.frames-intro{padding-bottom:32px}}
@media(max-width:359px){.frame-toolbar{padding-left:8px;padding-right:8px}.frame-actions{gap:4px}.frame-actions button{padding-left:8px;padding-right:8px}}