@font-face{font-family:Instrument Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/instrument-sans-latin.woff2) format("woff2")}@font-face{font-family:Instrument Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/instrument-sans-latin.woff2) format("woff2")}@font-face{font-family:Instrument Sans;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/fonts/instrument-sans-latin.woff2) format("woff2")}:root{color-scheme:dark;--canvas: #0e100f;--panel: #16191a;--paper: #f7f3ea;--ink: #16181a;--ink-66: rgba(22, 24, 26, .66);--ink-line: rgba(22, 24, 26, .16);--cream: #fffce1;--cream-82: rgba(255, 252, 225, .82);--cream-70: rgba(255, 252, 225, .7);--cream-62: rgba(255, 252, 225, .62);--rule: rgba(255, 252, 225, .14);--rule-2: rgba(255, 252, 225, .26);--accent: #e8b44a;--font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;--ease: cubic-bezier(.22, 1, .36, 1);--maxw: 1180px;--gutter: 24px;--section: 96px}@media(max-width:900px){:root{--gutter: 20px;--section: 64px}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--cream-82);font-family:var(--font);font-size:17px;font-weight:400;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}h1,h2,h3{margin:0;color:var(--cream);font-weight:600;letter-spacing:0;text-wrap:balance}p{text-wrap:pretty}a{color:inherit}img,svg{display:block;max-width:100%}::selection{background:var(--accent);color:var(--ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;padding:10px 14px;border-radius:6px;background:var(--cream);color:var(--ink);font-size:14px;text-decoration:none}.hair{height:1px;background:var(--rule)}.nav{position:sticky;top:0;z-index:30;background:#0e100fdb;backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule);transition:border-color .2s var(--ease),background-color .2s var(--ease)}.nav.is-scrolled{border-bottom-color:var(--rule-2);background:#0e100ff2}.nav__inner{display:flex;align-items:center;justify-content:flex-end;gap:24px;height:64px}.nav__list{display:flex;gap:28px;margin:0;padding:0;list-style:none;font-size:15px}.nav__link{position:relative;display:inline-block;padding:6px 0;color:var(--cream-70);text-decoration:none}.nav__link:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}.nav__link[aria-current=page]{color:var(--cream)}.nav__link[aria-current=page]:after{transform:scaleX(1)}@media(hover:hover)and (pointer:fine){.nav__link:hover{color:var(--cream)}.nav__link:hover:after{transform:scaleX(1)}}@media(max-width:900px){.nav__inner{height:58px;gap:16px}.nav__list{gap:18px;font-size:14px}}.hero{padding-block:clamp(32px,5vw,64px) clamp(18px,2.4vw,28px)}.hero h1{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.3}.hero__line{display:block;overflow:hidden}.hero__line>span{display:block}.hero__emoji{margin-left:.12em;font-size:.78em;vertical-align:.06em}.section{padding-block:var(--section)}.section--first{padding-top:clamp(24px,3vw,40px)}.section__title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--cream-70);letter-spacing:.04em}.section__title:before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:2px;background:var(--cat, var(--accent))}.cat-read{--cat: #8fb08a}.cat-listen{--cat: #e8b44a}.cat-podcast{--cat: #b6a6dc}.cat-draw{--cat: #e3a6a6}.works{display:grid;gap:clamp(40px,6vw,80px);margin:0;padding:0;list-style:none}.work{display:grid;gap:clamp(18px,2.6vw,40px);align-items:end;color:inherit;text-decoration:none}.frame{position:relative;--cover-cap: 340px;width:min(100%,var(--cover-cap),42vh);aspect-ratio:var(--cover-ratio, 3 / 4);padding:clamp(8px,1vw,12px);background:var(--paper);border-radius:8px;overflow:hidden;transition:transform .24s var(--ease)}@media(max-width:900px){.frame{--cover-cap: 100%}}.slides{display:flex;height:100%;transition:transform .55s var(--ease)}.slides img{flex:0 0 100%;width:100%;height:100%;object-fit:contain}.work__text{display:grid;gap:10px;padding-bottom:6px;transition:transform .24s var(--ease)}.work__idx{font-size:13px;color:var(--cream-62);font-variant-numeric:tabular-nums;letter-spacing:.06em}.work__title{font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.45}.work__summary{font-size:15px;color:var(--cream-70)}.work__text{max-width:46ch}@media(min-width:900px){.work{grid-template-columns:minmax(0,360px) minmax(0,1fr)}.work--flip{grid-template-columns:minmax(0,1fr) minmax(0,360px)}.work--flip .frame{order:2}.work--flip .work__text{order:1}.work--wide{grid-template-columns:minmax(0,380px) minmax(0,1fr)}}@media(hover:hover)and (pointer:fine){.work:hover .frame{transform:translateY(-4px)}.work:hover .work__text{transform:translate(6px)}}.page-head{padding-block:clamp(24px,3.5vw,44px) clamp(20px,2.6vw,28px)}.page-head h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.32}.page-head p{margin:18px 0 0;max-width:46ch;color:var(--cream-70)}.gap-list{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}.gap-list li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-inline:-12px;padding:14px 12px;border-bottom:1px solid var(--rule);font-size:15px;transition:background-color .2s var(--ease)}.gap-list .row-idx{min-width:1.7em;font-size:12px;font-variant-numeric:tabular-nums;color:var(--cream-62);transition:color .2s var(--ease)}.gap-list b,.gap-list a{display:inline-block;color:var(--cream);font-weight:500;text-decoration:none;transition:transform .24s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}.gap-list .row-note{color:var(--cream-70)}.gap-list .row-ext{margin-left:4px;font-size:.82em;color:var(--cream-62)}.gap-list a{border-bottom:1px solid var(--rule-2)}@media(hover:hover)and (pointer:fine){.gap-list li:hover{background-color:#fffce10d}.gap-list li:hover .row-idx{color:var(--cat, var(--accent))}.gap-list li:hover b,.gap-list li:hover a{transform:translate(4px)}.gap-list a:hover{color:var(--cat, var(--accent));border-bottom-color:var(--cat, var(--accent))}}.pair{display:grid;gap:clamp(28px,4vw,56px)}@media(min-width:760px){.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.pair__col h2{margin-bottom:16px}.pair__group+.pair__group{margin-top:clamp(30px,4vw,52px)}.strip-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.strip-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border:1px solid var(--rule-2);border-radius:9999px;background:transparent;color:var(--cream-70);font:inherit;font-size:13px;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease)}.strip-toggle:before{content:"❙❙";font-size:10px;letter-spacing:.1em}.strip-toggle[aria-pressed=true]:before{content:"▶";font-size:11px}@media(hover:hover)and (pointer:fine){.strip-toggle:hover{color:var(--cream);border-color:var(--cream)}}.strip{--strip-visible: 3;--strip-gap: 24px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.strip::-webkit-scrollbar{display:none}.strip:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:10px}@media(max-width:900px){.strip{--strip-visible: 2;--strip-gap: 16px}}@media(max-width:560px){.strip{--strip-visible: 1.25;--strip-gap: 12px}}.strip__track{display:flex;gap:var(--strip-gap);margin:0;padding:0;list-style:none}.tile{flex:0 0 auto;width:calc((100% - (var(--strip-visible) - 1) * var(--strip-gap)) / var(--strip-visible))}.tile__btn{display:grid;gap:10px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.tile__frame{display:grid;place-items:center;aspect-ratio:1 / 1;padding:10px;background:var(--paper);border-radius:8px;overflow:hidden;transition:transform .24s var(--ease)}.tile__frame img{width:100%;height:100%;object-fit:contain}.tile__ph{width:58%;aspect-ratio:1;border:1px solid var(--ink-line);border-radius:4px}.tile__cap{display:block;margin:0;font-size:13px;color:var(--cream-62)}@media(hover:hover)and (pointer:fine){.tile__btn:hover .tile__frame{transform:translateY(-4px)}}.lightbox{width:min(94vw,1100px);max-width:none;padding:0;border:0;background:transparent;color:var(--cream);overscroll-behavior:contain}.lightbox::backdrop{background:#080908e0}.lightbox__figure{display:grid;gap:14px;justify-items:center;margin:0}.lightbox__img{width:auto;max-width:100%;max-height:76vh;height:auto;border-radius:8px;background:var(--paper)}.lightbox__cap{font-size:14px;color:var(--cream-70)}.lightbox__btn{position:fixed;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule-2);border-radius:9999px;background:#0e100fb8;color:var(--cream);font:inherit;font-size:18px;line-height:1;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}.lightbox__close{top:18px;right:18px;font-size:15px}.lightbox__prev{top:50%;left:18px;transform:translateY(-50%)}.lightbox__next{top:50%;right:18px;transform:translateY(-50%)}@media(hover:hover)and (pointer:fine){.lightbox__btn:hover{border-color:var(--cream);background:var(--cream);color:var(--ink)}}.about{display:grid;gap:clamp(14px,2vw,22px);max-width:46ch}.about__line{overflow:hidden;margin:0;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.95;color:var(--cream-82)}.about__line>span{display:block}.about__line:first-child{font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.75;color:var(--cream)}.has-js [data-lines]>span{opacity:0;transform:translateY(110%);transition:transform .9s var(--ease) var(--d, 0ms),opacity .6s linear var(--d, 0ms)}.has-js [data-lines].is-in>span{opacity:1;transform:none}@media(hover:hover)and (pointer:fine){.about__line:hover{color:var(--cream)}}.empty-note{margin:0;font-size:15px;color:var(--cream-62)}.back{display:inline-block;margin-bottom:28px;font-size:14px;color:var(--cream-70);text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:2px}.detail__intro{display:grid;gap:12px;margin-top:20px;max-width:46ch}.detail__intro p{margin:0;font-size:16px;line-height:1.85;color:var(--cream-70)}.detail__actions{margin:clamp(22px,3vw,32px) 0 0}.gallery{display:grid;align-items:start;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));margin-top:clamp(28px,5vw,52px)}.gallery__item{margin:0;padding:clamp(8px,1vw,12px);background:var(--paper);border-radius:8px}.gallery__item img{display:block;width:100%;height:auto;border-radius:4px}.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 22px;border:1px solid var(--rule-2);border-radius:9999px;background:transparent;color:var(--cream);font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease),transform .12s var(--ease)}.pill:active{transform:translateY(1px)}@media(hover:hover)and (pointer:fine){.pill:hover{border-color:var(--cream);background:var(--cream);color:var(--ink)}}.foot{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;justify-content:space-between;margin-top:var(--section);padding:28px 0 56px;border-top:1px solid var(--rule);font-size:13px;color:var(--cream-62)}.foot a{padding-bottom:2px;border-bottom:1px solid var(--rule-2);text-decoration:none}@media(hover:hover)and (pointer:fine){.foot a:hover{color:var(--cream);border-bottom-color:var(--cream)}}@keyframes lineUp{0%{transform:translateY(104%)}to{transform:translateY(0)}}.has-js .hero__line>span{animation:lineUp .9s var(--ease) both;animation-delay:var(--d, 0ms)}.has-js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) var(--d, 0ms),transform .7s var(--ease) var(--d, 0ms)}.has-js [data-reveal].is-in{opacity:1;transform:none}.has-js [data-mask]{position:relative;overflow:hidden}.has-js [data-mask]:after{content:"";position:absolute;inset:0;background:var(--canvas);transform:translateY(0);transition:transform .9s var(--ease) .05s}.has-js [data-mask].is-in:after{transform:translateY(-101%)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.has-js [data-reveal],.has-js [data-mask]{opacity:1!important;transform:none!important}.has-js [data-mask]:after{display:none!important}.has-js [data-lines]>span{opacity:1!important;transform:none!important}}
