@font-face{font-family:Space;src:url(assets/space-grotesk.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Instrument;src:url(assets/instrument-italic.woff2) format('woff2');font-style:italic;font-display:swap}
:root{--ink:#302720;--ground:#eeeae0;--quiet:#655a52;--line:#c8bfb1;--ox:#602f35;background:var(--ground);color:var(--ink);font:16px/1.5 Space,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}[hidden]{display:none!important}body,p,h1,figure,dl,dd{margin:0}
button,a{font:inherit}button{touch-action:manipulation;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #78414a;outline-offset:3px}
.shell{max-width:1600px;width:calc(100% - clamp(36px,8vw,128px));margin:auto}
.mast{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:23px 0 19px}
.brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:650;letter-spacing:-.065em}
.edition-mark{display:flex;align-items:center;gap:2px;transform:skew(-16deg)}.edition-mark b{width:5px;height:16px;background:var(--ox);display:block}.edition-mark b:nth-child(2){height:23px}.edition-mark b:nth-child(3){height:19px}
.mast>span:last-child,.edition,figcaption,.light-controls>span{font:11px/1.3 Consolas,'Courier New',monospace;letter-spacing:.08em}
.mast>span:last-child,.edition{text-transform:uppercase}.mast>span:last-child{color:var(--quiet)}
.specimen{display:grid;grid-template-columns:minmax(255px,.66fr) minmax(0,1.64fr);gap:clamp(24px,4.7vw,80px);align-items:center;padding:clamp(26px,5vw,78px) 0}
.essay{min-width:0}.edition{display:flex;align-items:center;gap:11px;color:var(--ox);font-weight:600}
.edition:before{content:'';width:27px;height:2px;background:var(--ox)}
h1{font-family:Instrument,Georgia,serif;font-weight:400;font-style:italic;font-size:clamp(74px,7.3vw,122px);line-height:1.06;letter-spacing:-.05em;margin:6px 0 12px}h1 span{color:var(--ox)}
.lede{max-width:31ch;font-size:clamp(14px,1.2vw,17px);color:#4f453e;line-height:1.55}
.spec{margin:24px 0;color:var(--quiet);font-size:13px}
.spec>div{border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 0}.spec>div:last-child{border-bottom:1px solid var(--line)}
.spec dd{color:var(--ink);font-weight:500}
.controls{max-width:370px}.modes{display:grid;grid-template-columns:1fr 1fr;border:1px solid #8f8070;padding:3px;border-radius:5px}
.modes button{border:0;border-radius:3px;color:var(--ink);background:transparent;min-height:38px;font-size:13px;font-weight:600}
.modes [aria-pressed="true"]{background:var(--ink);color:#fbf5e9}
.light-controls{margin-top:18px}.light-controls>span{color:var(--quiet);letter-spacing:.03em}
.positions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:7px}
.positions button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:4px;border:1px solid var(--line);border-radius:3px;color:var(--ink);background:none;font-size:13px}
.positions button i{font-style:normal;color:var(--ox);font-size:18px}
.positions [aria-pressed="true"]{background:#e6d8cb;border-color:#815f58}
.light-controls[data-still="true"] .positions button{opacity:.5;cursor:default}
.viewer{align-self:center;min-width:0}
#surface{isolation:isolate;position:relative;overflow:hidden;width:100%;aspect-ratio:10 / 7;background:#734e4e;border-radius:3px;box-shadow:inset 0 0 0 1px #4d3435;display:grid;place-items:center;color:#fff9ed}
#surface img,#surface canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
#surface[data-live="true"]{cursor:crosshair}
.detail{position:absolute;z-index:2;right:13px;top:13px;display:flex;align-items:center;gap:4px;padding:7px 11px;min-height:36px;border:1px solid #f4e6cf8f;border-radius:3px;color:#fff8e8;background:#493332e8;letter-spacing:.015em;font-size:12px}
.detail>span:first-child{font:19px/1 Georgia}.detail:focus-visible{outline-color:#fff4d7}
.detail[aria-pressed="true"]{background:#f1e6d8;color:#3c2829}
#surface[data-detail="true"] img{transform:scale(1.85);transform-origin:center}
.mark{pointer-events:none;position:absolute;width:13px;height:13px;border-color:#e6d4bb94;border-style:solid}
.mark.tl{top:17px;left:17px;border-width:1px 0 0 1px}.mark.br{bottom:17px;right:17px;border-width:0 1px 1px 0}
figcaption{display:flex;justify-content:space-between;gap:10px;padding:11px 0 0;color:#584a42;font-size:10px;letter-spacing:.035em}
.fallback-note{color:var(--quiet);font-size:14px;margin:0 0 20px}.fallback-note a{color:var(--ox)}
.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@media(max-width:800px){
 .shell{width:calc(100% - 32px)}.mast{padding:13px 0}.brand{font-size:21px}
 .specimen{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:22px 0 27px}
 .essay{display:contents}.edition{order:0}h1{order:1;font-size:clamp(61px,13vw,86px);line-height:.98;margin:5px 0 9px}
 .lede{order:2;font-size:14px;max-width:49ch;margin-bottom:16px}
 .viewer{order:3;width:100%}.controls{order:4;max-width:none;margin:15px 0 0}.spec{order:5;margin:16px 0 0;font-size:13px}
 .light-controls{margin-top:9px}.positions button,.modes button{min-height:42px}
 #surface{aspect-ratio:1.08}.mark.tl{top:10px;left:10px}.mark.br{bottom:10px;right:10px}
 figcaption{font-size:9px;padding-top:6px}
}
@media(max-width:355px){.shell{width:calc(100% - 24px)}figcaption span:last-child{display:none}.mast>span:last-child{font-size:9px}}