.framing-page{max-width:1200px;margin:auto;padding:56px 28px 80px}.framing-intro{max-width:760px;margin-bottom:56px}.framing-intro h1{font-size:clamp(38px,6vw,76px);line-height:1.02;margin:18px 0 24px}.framing-intro p,.framing-examples>p{font-size:18px;line-height:1.6}.framing-chooser{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;padding:40px 0;border-block:1px solid var(--line)}.framing-chooser h2,.framing-examples h2{font-size:30px;line-height:1.15;margin-bottom:24px}.framing-chooser label{display:block;margin-bottom:10px}.framing-chooser select{width:100%;padding:14px;background:var(--bg);color:var(--ink);border:1px solid var(--line);font:inherit}.framing-chooser dl{margin:24px 0}.framing-chooser dl>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}.framing-chooser dd{margin:0;text-align:right;white-space:nowrap}.framing-note{font-size:14px!important;line-height:1.6;color:var(--mute);margin:20px 0}.frame-diagram{margin:0;padding:24px;background:var(--tile);display:flex;flex-direction:column;align-items:center;gap:24px}.frame-scale{position:relative;background:#ede8df;box-shadow:0 0 0 4px #292720,0 12px 25px #0002;max-width:350px;transition:width .2s}.frame-aperture{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:white;box-shadow:0 0 0 1px #c7c0b6;overflow:hidden}.frame-aperture img{width:100%;height:100%;object-fit:contain;display:block}.frame-diagram figcaption{font-size:13px;line-height:1.5;color:var(--mute)}.framing-examples{margin-top:60px}.framing-scenes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0}.framing-scenes figure{margin:0}.framing-scenes img{width:100%;height:auto;display:block}.framing-scenes figcaption{padding:16px 0;line-height:1.6}.framing-scenes strong,.framing-scenes span{display:block}.framing-scenes span{font-size:14px;color:var(--mute)}@media(max-width:700px){.framing-page{padding:32px 20px 56px}.framing-chooser{grid-template-columns:1fr;gap:28px}.framing-scenes{grid-template-columns:1fr}.framing-chooser dl>div{flex-wrap:wrap;gap:4px}.framing-chooser dd{white-space:normal}.frame-scale{max-width:300px}}@media(prefers-reduced-motion:reduce){.frame-scale{transition:none}}
/* The shop header is sticky; the page introduction is ordinary document content. */
header.framing-intro{display:block;position:static;padding:0;border:0;background:transparent;z-index:auto}
.framing-scenes object{width:100%;aspect-ratio:1122/1402;display:block;border:0}.frame-diagram>select{max-width:100%;padding:10px;font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line)}

.frame-aperture img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}