.words{max-width:var(--wide);margin:72px auto 0;padding:0 var(--gutter);display:grid;gap:24px;align-items:center}.words h2,.projects h2,.research h2{font-size:clamp(48px,9vw,104px)}.words-copy{display:grid;gap:16px;align-content:start}.words-copy>p:not(.edge){max-width:44ch;color:var(--ink-2)}.words-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.words-form .field{flex:1 1 240px}.faces{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2);max-width:520px}.faces button{display:grid;gap:2px;text-align:left;padding:10px 10px 8px 0;background:none;border:0;border-top:3px solid transparent;margin-top:-2px;cursor:pointer;font:400 30px/1 var(--display);color:var(--ink-3)}.faces button span{font:500 13px/1.2 var(--text);color:var(--ink-3)}.faces button[aria-selected=true]{color:var(--ink);border-top-color:var(--signal)}.proof{min-height:1.3em;color:var(--ink-3);font-size:12px}.block{position:relative;aspect-ratio:1;width:min(100%,640px);justify-self:center;--bleed: 40px;cursor:grab;touch-action:pan-y}.block canvas{position:absolute;inset:calc(var(--bleed) * -1);width:calc(100% + var(--bleed) * 2);height:calc(100% + var(--bleed) * 2)}.block:focus-visible{outline:2px solid var(--signal);outline-offset:6px}.block.is-grabbing{cursor:grabbing}@media(min-width:960px){.words{grid-template-columns:5fr 6fr}}.projects{max-width:var(--wide);margin:96px auto 0;padding:0 var(--gutter);display:grid;gap:20px}.projects-head,.research-head{display:grid;gap:14px}.projects-head>p:not(.edge){max-width:52ch;color:var(--ink-2)}.strips{display:grid;gap:34px;margin-top:8px}.strip{display:grid;gap:10px}.strip-label{display:grid;gap:4px;font-size:clamp(30px,4.6vw,46px)}.strip-label .edge{font-size:12px}.film{--hole: #000;list-style:none;margin:8px 0 0;padding:34px 14px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 12px;background:radial-gradient(circle at 50% 50%,var(--room) 0 3.2px,transparent 3.6px) 0 9px / 22px 14px repeat-x,radial-gradient(circle at 50% 50%,var(--room) 0 3.2px,transparent 3.6px) 0 calc(100% - 9px) / 22px 14px repeat-x,var(--film);border-radius:2px}@media(min-width:640px){.strips{display:grid;gap:34px;margin-top:8px}.strip{display:grid;gap:10px}.strip-label{display:grid;gap:4px;font-size:clamp(30px,4.6vw,46px)}.strip-label .edge{font-size:12px}.film{grid-template-columns:repeat(3,1fr)}}@media(min-width:1000px){.strips{display:grid;gap:34px;margin-top:8px}.strip{display:grid;gap:10px}.strip-label{display:grid;gap:4px;font-size:clamp(30px,4.6vw,46px)}.strip-label .edge{font-size:12px}.film{grid-template-columns:repeat(4,1fr)}}.frame a{display:grid;gap:8px;text-decoration:none;color:#f1d9c6}.frame-pic{display:block;aspect-ratio:3 / 4;background:#1b1412;overflow:hidden}.frame canvas{width:100%;height:100%;filter:invert(1) sepia(.55) saturate(2.1) hue-rotate(-18deg) brightness(.92) contrast(.92);transition:filter 1.1s var(--ease),transform .3s var(--ease)}.frame.is-printed canvas{filter:none}.frame a:hover canvas,.frame a:focus-visible canvas{transform:scale(1.03)}.frame-cap{display:grid;gap:2px}.frame-cap .edge{color:var(--film-ink);font-size:11px}.frame-cap strong{font:400 26px/1 var(--display);color:#fff3ea}.frame-cap span:last-child{font-size:13px;color:#c9a593}.frame a:hover strong{color:#ff6a46}.research{max-width:var(--wide);margin:96px auto 0;padding:0 var(--gutter);display:grid;gap:22px}.interests{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}.interests div{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}.interests dt{font:700 12px/1.2 var(--edge);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.interests dd{margin:0;font-size:22px}.interests dd a{text-decoration:none}.interests dd a:hover{text-decoration:underline}.studies{list-style:none;margin:0;padding:0;display:grid;gap:12px}.study-empty{border:1px dashed var(--line-2);padding:16px;display:grid;gap:6px;color:var(--ink-2);max-width:560px}.words-copy{position:relative;z-index:2}.block:before{content:"";position:absolute;inset:-3%;background:#f3efe7;border-radius:2px;opacity:0;transition:opacity .4s var(--ease)}.block.is-code:before{opacity:1}@media(max-width:959px){.block{width:min(100% - 32px,640px)}}.twelfth{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-top:28px;padding:16px;background:var(--film);border-radius:2px;max-width:760px}.frame-blank{width:96px;aspect-ratio:3 / 4;border:1px dashed #f4c79e66;display:grid;place-items:end start;padding:6px}.frame-blank .edge{color:var(--film-ink);font-size:11px}.twelfth.is-done .frame-blank{border-style:solid;background:radial-gradient(circle at 50% 45%,#ffd36b55,transparent 70%)}.twelfth-words{display:grid;gap:8px;color:var(--film-ink)}.twelfth-words h3{font:400 30px/1 var(--display);color:#fff1df;display:grid;gap:6px}.twelfth-words .edge{color:#f4c79eaa;font-size:11px}.twelfth-words p{font-size:15px;max-width:54ch}.piece{display:inline-block;margin-left:6px;font-weight:600}.interest-line{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:16px;color:var(--ink-2)}.interest-line .edge{color:var(--ink-3);margin-right:4px}.strips{position:relative}.strip-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.strips.is-live3d .film{cursor:grab;touch-action:pan-y}.strips.is-live3d .frame canvas{transition:opacity .9s var(--ease),filter 1.1s var(--ease)}.strips.is-live3d .frame.has-figure canvas{opacity:.22}.roll{position:relative;margin-top:18px;min-width:0;width:100%;max-width:100%}.roll .strips{display:block;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding:30px 0 14px;background:var(--film);border-radius:2px;scrollbar-width:thin;scrollbar-color:#f4c79e55 transparent;cursor:grab}.roll .strips.is-dragging{cursor:grabbing;scroll-snap-type:none}.roll .film{display:flex;gap:14px;width:max-content;padding:0 18px;margin:0;background:none;grid-template-columns:none}.roll .frame{position:relative;flex:0 0 clamp(190px,21vw,290px);scroll-snap-align:start}.roll .frame[data-group]:before{content:attr(data-group);position:absolute;left:0;top:-24px;white-space:nowrap;font:700 11px/1 var(--edge);letter-spacing:.12em;text-transform:uppercase;color:#f4c79ecc}.roll .frame-twelve .frame-pic{display:grid;place-items:center;border:1px dashed #f4c79e66;background:#120c0a}.twelve-mark{font:700 28px/1 var(--edge);color:#f4c79e55}.roll .strip-gl{z-index:2}.shelf{list-style:none;margin:26px 0 0;padding:26px 0 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 18px;background:radial-gradient(circle at 50% 50%,#0006 2.2px,transparent 2.8px) 0 0 / 26px 26px,linear-gradient(var(--room-2),var(--room-2));border-top:1px solid var(--line)}@media(min-width:700px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:54px 26px}}@media(min-width:1100px){.shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}.pack{position:relative;display:grid;gap:12px;justify-items:center;--tear: 0;--sway: 0deg;--lean: 0deg;--shine: 30%}.peg{position:absolute;top:-18px;left:50%;width:16px;height:16px;margin-left:-8px;z-index:4;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9cfc6,#6c625b 60%,#2a2320);box-shadow:0 3px 5px #0008}.pack-body{position:relative;width:100%;max-width:280px;aspect-ratio:3 / 4.15;transform-origin:50% -10px;transform:rotate(var(--sway)) rotateX(var(--lean));transition:transform .5s var(--ease);perspective:900px}.pack-sheet{position:absolute;left:7%;right:7%;top:4%;aspect-ratio:3 / 4;z-index:1;background:#f6f3ec;box-shadow:0 1px 2px #0005;transition:transform .9s cubic-bezier(.2,.9,.25,1.1),box-shadow .9s}.pack-sheet canvas{display:block;width:100%;height:100%}.pack-face{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:13% 47% 1fr;filter:drop-shadow(0 14px 18px #000a);pointer-events:none}.pack-face>span{background:#17110e}.pack-top{border-radius:10px 10px 0 0;background:linear-gradient(#211915,#17110e)!important}.pack-mid{display:grid;grid-template-columns:9% 1fr 9%;background:transparent!important}.pack-mid>span:not(.pack-window){background:#17110e}.pack-window{background:transparent;box-shadow:inset 0 0 0 2px #0009,inset 0 6px 14px #0007}.pack-label{display:grid;align-content:start;gap:3px;padding:10px 12px 12px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,var(--accent) 0 7px,#f2b52c 7px)!important;color:#17110e}.pack-label strong{font:400 clamp(22px,2.3vw,30px)/1 var(--display);margin-top:4px}.pack-label>span{font-size:13px}.pack-no{font:700 12px/1 var(--edge);letter-spacing:.1em}.pack-small{font:700 11px/1.2 var(--edge)!important;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:4px}.pack-face:after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;background:linear-gradient(105deg,transparent calc(var(--shine) - 18%),#ffffff14 var(--shine),transparent calc(var(--shine) + 18%))}.pack-strip{position:absolute;z-index:3;left:0;right:0;top:3.5%;height:7%;display:flex;align-items:center;padding:0 12px;border:0;border-top:1px dashed #0006;border-bottom:1px dashed #0006;background:#d8411e;color:#fff3ea;cursor:ew-resize;touch-action:none;font:700 11px/1 var(--edge);letter-spacing:.12em;text-transform:uppercase;clip-path:inset(0 0 0 calc(var(--tear) * 100%));transition:clip-path .25s}.pack-strip span:after{content:" \2192"}.pack-strip:focus-visible{outline:2px solid var(--signal);outline-offset:3px}.pack-out{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;visibility:hidden;opacity:0;transition:opacity .4s .5s;min-height:1.6em;font-size:15px}.pack-out a{font-weight:600}.pack.is-open .pack-out{visibility:visible;opacity:1}.pack.is-open .pack-strip{clip-path:inset(0 0 0 100%);pointer-events:none}.pack.is-open .pack-sheet{z-index:3;transform:translateY(-38%) rotate(-1.5deg);box-shadow:0 18px 30px #000a}.pack.is-open .pack-body{margin-top:30%}.pack:not(.is-printed) .pack-sheet{background:repeating-linear-gradient(45deg,#efe9df 0 6px,#f6f3ec 6px 12px)}:root[data-room=light] .shelf{background:radial-gradient(circle at 50% 50%,#0002 2.2px,transparent 2.8px) 0 0 / 26px 26px,linear-gradient(#ebe5da,#ebe5da)}@media(prefers-reduced-motion:reduce){.pack-body,.pack-sheet,.pack-strip{transition:none}}.pack-window{-webkit-backdrop-filter:blur(7px) saturate(.7);backdrop-filter:blur(7px) saturate(.7);background:linear-gradient(160deg,#ffffff30,#ffffff0c 60%,#fff2)}.pack.is-open .pack-window{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent}.pack-out{flex-direction:column;align-items:center;gap:4px}.shelf{align-items:start}.pack-body{max-width:calc(300px * var(--size, .84));transform:rotate(calc(var(--rest, 0deg) + var(--sway))) rotateX(var(--lean))}.pack-label strong{font-size:calc(clamp(22px,2.3vw,30px) * (.8 + .2 * var(--size, .84)))}.pack-out{max-width:100%;text-align:center;font-size:clamp(13px,3.4vw,15px)}.pack-out a,.pack-out button{overflow-wrap:anywhere}@media(max-width:700px){.block{--bleed: 0px}}
