:root{--accent:#6b3520;--night:#15100c;--night-rgb:21,16,12;--cream:#efe7dc;--on-dark-label:#a8998a;--on-dark-sub:#bfb1a2;--on-dark-num:#8f8173;--on-dark-hi:#e9b46a;--on-dark-quiet:#a8998a;--paper:#ece3d6}.open{background:#b09076}.open .photo{object-position:50% 78%;transform-origin:66% 80%}.motion .open .photo,.motion.grown .open .photo{animation:arrive 2.4s cubic-bezier(.2,.7,.1,1) both}@keyframes arrive{0%{opacity:0;filter:brightness(1.12) blur(6px)}to{opacity:1;filter:none}}.open .grain{opacity:.07}.open .otext{top:52%;width:min(420px,30vw)}.open .otext .kick{color:#4a3d31}.open h1{font-size:clamp(42px,5vw,80px);line-height:.95}.open .lede{font-size:17px;color:#40362c;max-width:40ch}.open .glance dt{color:#4a3d31}.open .cue{left:var(--gut);bottom:calc(22px + env(safe-area-inset-bottom,0px));color:#6a5b4d}.trio .ch .im{padding:0;background:#f3e9da}.trio .ch .im img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}.focus .big{padding:0;background:#f3e9da}.focus .big img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}.focus .dr{background:#fff}@media(max-width:860px){.trio .ch .im{aspect-ratio:auto}.trio .ch .im img{height:auto}}.table{aspect-ratio:1186/1122;max-width:680px}.turn{margin:var(--gap) var(--gut) 0;padding:clamp(80px,14vh,160px) clamp(20px,5vw,80px);background:#e3d8c9;overflow:hidden}.turn .grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}.turn h2{font-size:clamp(32px,4.4vw,60px);line-height:1.02;margin:14px 0}.turn .sub{color:#5d5246;max-width:36ch}.spinbox{display:grid}.spin{position:relative;aspect-ratio:1000/1211;max-height:78vh;justify-self:center;width:100%;max-width:560px;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}.spin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;-webkit-user-drag:none}.spin img:first-child{opacity:1}.ticks{display:flex;justify-content:space-between;gap:6px;margin-top:22px;max-width:560px;justify-self:center;width:100%}.ticks button{flex:1;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:left;transition:color .3s}.ticks button.on{color:var(--ink)}.ticks button:before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#1e191533;margin-bottom:10px;transition:background .3s}.ticks button.on:before{background:var(--ink)}.drag-hint{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}@media(max-width:860px){.turn .grid{grid-template-columns:minmax(0,1fr)}.open{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:calc(64px + env(safe-area-inset-top,0px)) var(--gut) calc(64px + env(safe-area-inset-bottom,0px))}.open{background:#d4b496}.open .photo{position:relative;inset:auto;flex:none;width:calc(100% + 2 * var(--gut));max-width:none;height:min(54svh,520px);margin:calc(-64px - env(safe-area-inset-top,0px)) calc(-1 * var(--gut)) 0;object-position:68% 74%;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}.open .otext{position:relative;left:auto;top:auto;transform:none;width:100%;margin-top:28px}}@media(max-width:720px){.open h1{font-size:40px}.open .lede{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
