*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#fff;color:#111;font-family:system-ui,Inter,Helvetica,Arial,sans-serif;}
.site-header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;z-index:20;background:linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.5), rgba(255,255,255,0));backdrop-filter:saturate(150%) blur(6px);}
.logo{height:24px;width:auto;cursor:pointer;display:block;}.site-nav a{margin-left:16px;color:#111;text-decoration:none;opacity:.8}.site-nav a:hover{opacity:1}
.viewport{position:relative;width:100vw;height:100vh;overflow:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;padding-top:64px;}
@media (min-width:1024px){.viewport{display:flex;flex-direction:row;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;}.story,.subscribe{scroll-snap-align:start;min-width:100vw;min-height:100vh;padding-top:64px;}.story{display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;}}
@media (max-width:1023px){.story,.subscribe{scroll-snap-align:start;min-height:100vh;}.story{height:auto;min-height:100vh;overflow-y:visible;}}
.story{padding:88px 6vw 120px;}.story-title{font-size:clamp(18px,2vw,24px);font-weight:600;margin:0 0 20px 0;letter-spacing:.01em;}.story-inner{max-width:1400px;margin:0 auto;}
.masonry{column-count:3;column-gap:16px;}.masonry figure{break-inside:avoid;margin:0 0 16px 0;position:relative;cursor:zoom-in;}.masonry img{width:100%;height:auto;display:block;border-radius:6px;}
.masonry figcaption{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.9);padding:4px 6px;font-size:12px;color:#333;border-radius:4px;opacity:0;transition:opacity .2s;}.masonry figure:hover figcaption{opacity:1;}
@media (max-width:900px){.masonry{column-count:2;}}@media (max-width:600px){.masonry{column-count:1;}}
.masonry figcaption a{text-decoration:none;border-bottom:1px dotted rgba(0,0,0,.4);display:inline-flex;align-items:center;gap:6px;padding-right:2px;}
.masonry figcaption a::after{content:'\1F517';font-size:12px;opacity:.8;}.masonry figure:hover figcaption a{border-bottom-color:rgba(0,0,0,.8);}
.subscribe{display:flex;align-items:center;justify-content:center;background:#f7f7f7;}.subscribe-inner{text-align:center;padding:40px;}.subscribe-btn{border:1px solid #222;background:#111;color:#fff;padding:10px 14px;border-radius:999px;cursor:pointer;}.subscribe-btn:hover{opacity:.9;}
.player{position:fixed;left:0;right:0;bottom:0;height:56px;background:rgba(17,17,17,.94);color:#fff;display:flex;align-items:center;gap:12px;padding:0 14px;z-index:30;}
.player button{background:transparent;color:#fff;border:0;font-size:18px;width:36px;height:36px;cursor:pointer;border-radius:6px;}.player button:hover{background:rgba(255,255,255,.08);}
.player .track-title{flex:1;font-size:14px;opacity:.9;}.player .scrubber{width:260px;height:6px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden;}.player .scrub-fill{width:0%;height:100%;background:#fff;}.player .timecode{width:48px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px;opacity:.85;}
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50;touch-action:none;}.lightbox[data-open="true"]{display:flex;}.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);}
.lightbox-content{position:relative;max-width:92vw;max-height:86vh;z-index:51;margin:0;box-shadow:0 10px 40px rgba(0,0,0,.5);}.lightbox-content img{display:block;max-width:100%;max-height:86vh;border-radius:10px;}
.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:52;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;}.lightbox-prev{left:24px;}.lightbox-next{right:24px;}.lightbox-arrow:hover{background:rgba(255,255,255,.2);}
.month-panel{position:fixed;top:64px;right:20px;width:320px;max-width:92vw;background:#fff;border:1px solid #e6e6e6;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.08);z-index:40;padding:14px;}.month-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.month-header h3{margin:0;font-size:14px;font-weight:600;letter-spacing:.01em;}.month-header button{border:0;background:#111;color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;}
.month-list{list-style:none;margin:0;padding:0;max-height:50vh;overflow:auto;}.month-list li{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;cursor:pointer;}.month-list li:hover{background:#f5f5f5;}.month-list .active{background:#111;color:#fff;}.month-hint{font-size:12px;color:#555;margin-top:8px;}
.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;z-index:9999;opacity:1;transition:opacity .4s ease;}.loader-overlay.hidden{opacity:0;pointer-events:none;}
.loader-text{font-family:monospace;font-size:14px;letter-spacing:.05em;text-transform:lowercase;animation:blink 1s steps(2,start) infinite;}@keyframes blink{to{visibility:hidden;}}