@font-face{font-family:SFMono;src:url('/assets/fonts/SFMono-Regular.otf') format('opentype');font-weight:400;font-display:swap}
:root{--paper:#f4f4f2;--ink:#111111;--accent:#a35a34;--ease-mech:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}body{margin:0;font-family:SFMono,monospace;font-size:11px;line-height:1.6}a{color:inherit;text-decoration:none}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible,[role=slider]:focus-visible{outline:1px solid var(--accent);outline-offset:8px}a:active,button:active{opacity:.65}button{font:inherit;color:inherit;background:none;border:0;padding:10px 0;cursor:pointer}::selection{color:var(--paper);background:var(--ink)}
.page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:32px clamp(24px,4vw,70px) max(26px,env(safe-area-inset-bottom));gap:30px}.top,.bottom{display:flex;justify-content:space-between;align-items:center;gap:24px}.top{font-size:10px;letter-spacing:.07em;text-transform:uppercase}.status{display:flex;align-items:center;gap:9px}.status:before{content:'';height:5px;width:5px;border-radius:50%;background:var(--accent)}
.scene{position:relative;display:grid;place-items:center;min-height:490px}.identity{text-align:center;padding:42px 100px;width:100%}.brand{display:block;width:clamp(240px,36vw,530px);height:auto;max-width:100%;margin:0 auto 40px;filter:blur(0px);transform:translateZ(0)}h1{font-size:13px;font-weight:400;letter-spacing:.01em;margin:0 0 7px}.subtitle{margin:0;color:#64645f;font-size:11px}.focus-instrument{position:absolute;left:clamp(0px,4vw,65px);top:50%;height:260px;width:64px;transform:translateY(-50%);cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none}.gauge{width:64px;height:100%;position:relative;overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}.scale{position:absolute;inset:0}.tick{position:absolute;top:0;left:0;height:2px;width:8px;background:currentColor;border-radius:2px;transform-origin:left center}.tick.major{width:15px;height:3px}.mark{position:absolute;top:0;right:8px;font-size:12px;line-height:1;transform-origin:left center}.witness{position:absolute;top:50%;left:-16px;width:11px;height:11px;background:var(--accent);clip-path:polygon(3% 7%,100% 49%,7% 95%,13% 65%,0 42%);transform:translateY(-50%) rotate(-3deg)}.unit{white-space:nowrap;position:absolute;top:-32px;left:0;font-size:9px;letter-spacing:.1em;color:#777}.readout{position:absolute;bottom:-34px;left:0;width:100%;font-variant-numeric:tabular-nums;font-size:11px}.control-note{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;font-size:9px;color:#777}.control-note button{font-size:9px;margin-left:12px;text-decoration:underline;text-underline-offset:4px}.bottom{font-size:10px}.bottom .links{display:flex;gap:30px}.bottom .location{color:#777}.bottom a{padding:8px 0;border-bottom:1px solid #ccc}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover) and (pointer:fine){a:hover,button:hover{color:var(--accent)}.focus-instrument:hover .witness{background:var(--ink)}}
@media(prefers-reduced-motion:reduce){.brand{filter:none!important;transform:none}.scale *{transition:none}}

/* Native page scrolling drives the focus while the composition stays in view. */
.scroll-stage{min-height:180svh;position:relative}.page{position:sticky;top:0}

/* Touch and reading refinements: preserve the sparse composition. */
.top{font-size:11px}.bottom{font-size:11px}
h1{font-size:15px}.subtitle{font-size:12px;color:#62625d}
.control-note{font-size:11px;color:#62625d;display:flex;align-items:center;justify-content:center;gap:16px;width:max-content;max-width:100%}
.control-note button{font-size:11px;min-height:44px;margin-left:0;white-space:nowrap;transition:transform 160ms var(--ease-mech),color 160ms ease}
.control-note button:active{transform:scale(.97)}
.bottom a{min-height:44px;display:inline-flex;align-items:center}
.focus-instrument:after{content:'';position:absolute;inset:-12px -12px;cursor:ns-resize}
.focus-instrument:focus-visible{outline:2px solid var(--accent);outline-offset:12px;border-radius:4px}
@media(max-height:720px){
 .page{gap:12px;padding-top:18px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .scene{min-height:310px}.identity{padding-top:12px;padding-bottom:78px}
 .brand{max-height:32svh;width:auto;object-fit:contain;margin-bottom:16px}
 .focus-instrument{height:160px}.unit{top:-25px}.readout{bottom:-27px}
}
@media(prefers-reduced-motion:reduce){.control-note button{transition:none}.control-note button:active{transform:none}}

/* Phone composition: explicit columns for the lens and artwork, then full-width copy.
   The scale's labels and touch area stay inside a reserved gutter. */
@media(max-width:650px){
 .page{padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));gap:24px}
 .top{font-size:10px;letter-spacing:.025em;gap:16px;align-items:center}
 .status{gap:6px;white-space:nowrap}
 .scene{width:100%;max-width:350px;margin:0 auto;min-height:400px;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:32px;grid-template-rows:auto auto auto auto;align-content:center;justify-items:center}
 .identity{display:contents}
 .brand{grid-column:2;grid-row:1;width:100%;max-width:236px;max-height:none;height:auto;margin:0;align-self:center}
 .focus-instrument{grid-column:1;grid-row:1;position:relative;left:auto;top:auto;transform:none;width:44px;height:154px;margin:32px 0;align-self:center;justify-self:end}
 .gauge{width:44px}.mark{right:0;font-size:10px}.tick{width:5px}.tick.major{width:11px}
 .witness{left:-10px;width:8px;height:9px}.unit{top:-25px;font-size:8px}.readout{bottom:-25px;font-size:10px}
 h1{grid-column:1/-1;grid-row:2;margin:24px 0 7px;font-size:14px;line-height:1.5;text-align:center;letter-spacing:-.025em}
 .subtitle{grid-column:1/-1;grid-row:3;font-size:11px;max-width:27ch;text-align:center;line-height:1.7;margin:0}
 .control-note{grid-column:1/-1;grid-row:4;position:static;transform:none;display:flex;flex-direction:column;gap:2px;margin-top:24px;width:100%;font-size:11px;line-height:1.5;white-space:normal}
 .control-note button{font-size:11px;min-height:44px;padding:10px 8px}
 .bottom{display:grid;grid-template-columns:1fr auto;gap:0 16px;align-items:center;padding-top:12px;border-top:1px solid #d5d5d0;font-size:11px}
 .bottom .links{display:contents}.bottom a{border:0;padding:8px 0;min-height:44px;width:fit-content}
 .bottom a:first-child{grid-column:1/-1}.bottom a:nth-child(2){grid-column:1;grid-row:2}
 .bottom .location{grid-column:2;grid-row:2;max-width:none;padding:0;text-align:right;font-size:10px;white-space:nowrap}
}
@media(max-width:650px) and (max-height:700px){
 .page{gap:16px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .scene{min-height:350px}.focus-instrument{height:130px;margin:28px 0}.brand{max-width:210px}
 h1{margin-top:18px}.control-note{margin-top:16px}
}
@media(max-width:350px){
 .page{padding-left:20px;padding-right:20px}.top{font-size:9px;gap:12px}
 .scene{column-gap:24px;grid-template-columns:44px minmax(0,1fr)}
 h1{font-size:13px}.bottom{font-size:9px}
}