/* Four homepage modules. The brand, editor and template previews keep their own styles. */
.home-needs,.home-showcase,.home-reveal,.home-closing{color:var(--ink);background:var(--bg)}
.story-heading{padding:0 max(6vw,24px);display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}
.story-heading .m-mono{color:#91968a;margin:0 0 22px}
.story-heading h2{font-size:clamp(38px,4.2vw,66px);font-weight:500;line-height:1.25;letter-spacing:-.06em;margin:0}
.story-heading h2 span{color:#888e80}
.story-heading>p{font-size:15px;line-height:1.9;color:#969b90;margin:0 0 5px}
.home-needs{padding:90px 0 105px;overflow:hidden}
.needs-track{--card-width:min(82vw,1180px);position:relative;display:flex;gap:24px;padding:14px calc((100% - var(--card-width))/2) 24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--card-width))/2);scrollbar-width:none;overscroll-behavior-x:contain;outline-offset:-5px}
.needs-track::-webkit-scrollbar{display:none}
.needs-track:focus-visible{outline:1px solid #d5f66b88}
.need-card{--caption-x:0px;--caption-opacity:0;--media-x:0px;position:relative;isolation:isolate;flex:0 0 var(--card-width);aspect-ratio:1.84;border-radius:32px;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:normal;container-type:inline-size;background:#bcc6bc}
.need-card:first-child{--caption-opacity:1}
.need-visual{position:absolute;inset:0;overflow:hidden;transform:translate3d(var(--media-x),0,0);pointer-events:none}
.need-caption{position:absolute;z-index:3;left:5.5%;top:8%;max-width:48%;color:#1c261e;transform:translate3d(var(--caption-x),0,0);opacity:var(--caption-opacity);pointer-events:none}
.need-caption>p{font:11px/1.5 ui-monospace,monospace;letter-spacing:.1em;margin:0 0 26px}
.need-caption h3{font-size:clamp(32px,4.2vw,62px);font-weight:500;letter-spacing:-.065em;line-height:1.25;margin:0 0 24px}
.need-caption>span{display:block;font-size:clamp(12px,1.2vw,16px);line-height:1.9;opacity:.7}
.need-hello{position:absolute;bottom:7%;left:4%;font-size:20cqw;line-height:.9;letter-spacing:-.09em;font-weight:500;color:#899a8e;opacity:.25}
.need-portrait{position:absolute;width:65%;height:111%;right:-3%;bottom:-18%;object-fit:contain;object-position:right bottom}
.need-profile-note{position:absolute;bottom:9%;left:6%;font:10px ui-monospace,monospace;letter-spacing:.08em;color:#344839;display:grid;grid-template-columns:6px 1fr;gap:9px;align-items:center}
.need-profile-note>i{height:5px;width:5px;border-radius:50%;background:#3b6241}
.need-profile-note>span{grid-column:2;font-size:11px;line-height:1.5;letter-spacing:0;color:#5f7565}
.need-orbit{position:absolute;right:5%;top:7%;font:9px/1.5 ui-monospace,monospace;letter-spacing:.07em;color:#4d6051;display:flex;align-items:center;gap:18px}
.need-orbit>b{font-size:26px;font-weight:400}
.need-card--work{background:radial-gradient(ellipse at 72% 80%,#26384b,#182331 64%)}
.need-card--work .need-caption{color:#f0f2f4}
.need-project{position:absolute;background:#e9edf4;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px #040b1670;width:54%}
.need-project>div{height:25px;background:#e9edf6;color:#5e6e83;font:8px ui-monospace,monospace;padding:0 10px;display:flex;gap:7px;align-items:center}
.need-project i{width:4px;height:4px;background:#8ba4cb;border-radius:50%}
.need-project>div>span{margin-left:auto}
.need-project img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top}
.need-project--one{top:10%;right:-1%;transform:rotate(-8deg)}
.need-project--two{right:11%;bottom:-8%;transform:rotate(8deg);width:48%}
.need-work-note{position:absolute;bottom:9%;left:5.5%;font:9px ui-monospace,monospace;letter-spacing:.1em;color:#7f94ae}
.need-life-photo{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.need-card--life .need-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0e202cb8,transparent 70%),linear-gradient(0deg,#0b1c2255,transparent 45%)}
.need-card--life .need-caption{color:#f2f3ef}
.need-memory{position:absolute;z-index:1;right:4.5%;bottom:7%;padding:23px 26px;transform:rotate(4deg);background:#f0eee3f2;color:#3b483d;box-shadow:0 12px 30px #0b1c2233}
.need-memory>span{font:7px ui-monospace,monospace;letter-spacing:.09em;color:#778372}
.need-memory>p{font-size:20px;line-height:1.6;letter-spacing:-.03em;margin:14px 0 15px}
.need-memory>small{font-size:9px;color:#7b8374}
.need-life-date{position:absolute;bottom:9%;left:5.5%;z-index:1;font:9px ui-monospace,monospace;letter-spacing:.1em;color:#d6e1df99}
.needs-navigation{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px max(6vw,24px) 0}
.needs-help{font-size:12px;color:#7f8777}
.needs-navigation>div{display:flex;align-items:center;gap:12px}
.needs-count{font:11px ui-monospace,monospace;margin-right:18px;color:#e0e4d9}
.needs-count>b{font-weight:400}.needs-count>span{color:#69715f}
.needs-navigation button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff16;background:#ffffff07;color:#e5e7df;font-size:22px;line-height:1;transition:background .2s,color .2s}
.needs-navigation button:hover:not(:disabled){color:#1a2112;background:var(--lime)}
.needs-navigation button:disabled{opacity:.24;cursor:default}

.home-reveal{--story-top:124px;position:relative;height:330svh;isolation:isolate}
.world-stage{position:sticky;top:var(--story-top);height:calc(100svh - var(--story-top));overflow:hidden;isolation:isolate;background:var(--bg)}
.world-label{position:absolute;left:max(6vw,24px);top:26px;z-index:2;margin:0;color:#e0e4d1b3;font-size:9px;text-shadow:0 1px 10px #0008}
.world-media{position:absolute;inset:0;opacity:var(--world-mask-opacity,1)}
.world-svg{display:block;width:100%;height:100%;overflow:hidden}
.world-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 24px;opacity:var(--world-copy-opacity,0);transform:translate3d(0,var(--world-copy-y,24px),0);pointer-events:none}
.world-copy>.m-mono{font-size:10px;color:#8d9880;letter-spacing:.15em;margin:0 0 30px}
.world-copy h2{font-size:clamp(56px,7.5vw,112px);line-height:1.2;letter-spacing:-.07em;font-weight:500;margin:0 0 34px}
.world-copy h2>span{color:var(--lime)}
.world-copy>p{font-size:16px;line-height:1.8;margin:0;color:#929b85}

.home-showcase{padding-top:105px}
.home-showcase .story-heading{margin-bottom:70px}
.showcase-frame{--frame-inset:6.25%;--frame-radius:40px;--frame-scale:.9;position:relative;width:100%;aspect-ratio:1.44;overflow:hidden;background:#999e9e;clip-path:inset(var(--frame-inset) round var(--frame-radius));isolation:isolate}
.showcase-media{position:absolute;inset:0;transform:scale(var(--frame-scale));transform-origin:center}
.showcase-media img{display:block;width:100%;height:100%;object-fit:cover}
.showcase-caption{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px max(6vw,24px) 0}
.showcase-caption>span{font:12px ui-monospace,monospace;letter-spacing:.05em}
.showcase-caption small{display:block;color:#838b79;font:11px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:0;margin-top:7px}
.showcase-caption .m-text-link{font-size:13px;color:#d2dcc3}
.home-closing{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:110px max(6vw,24px) 90px}
.home-closing .m-mono{font-size:9px;color:#808d6e;margin:0 0 18px}
.home-closing h2{font-size:clamp(32px,4.3vw,64px);font-weight:500;line-height:1.25;letter-spacing:-.06em;margin:0}

@media(min-width:1700px){.need-caption h3{font-size:68px}.need-caption>span{font-size:17px}.need-card{border-radius:38px}.need-profile-note{font-size:13px}.need-profile-note>span{font-size:12px}.need-orbit{font-size:11px}}
@media(max-width:1000px){.story-heading{gap:25px}.story-heading>p{font-size:13px}.needs-track{--card-width:85vw;gap:18px}.need-card{aspect-ratio:1.65;border-radius:26px}.need-caption{max-width:52%}.need-caption h3{font-size:4.5vw}.need-caption>p{font-size:9px;margin-bottom:21px}.need-caption>span{font-size:12px}.need-orbit{display:none}.need-portrait{width:69%;right:-6%}.need-memory{padding:18px 20px}.need-memory>p{font-size:17px}.need-project--one{top:14%;right:-10%;width:60%}.need-project--two{right:1%;bottom:-1%;width:55%}.home-showcase .story-heading{margin-bottom:48px}}
@media(max-width:720px){
  .story-heading{display:block;padding-inline:22px;margin-bottom:32px}.story-heading .m-mono{font-size:8px;margin-bottom:21px}.story-heading h2{font-size:37px}.story-heading>p{font-size:13px;line-height:1.85;margin-top:23px}
  .home-needs{padding:62px 0 70px}.needs-track{--card-width:88vw;gap:14px;padding-top:8px;padding-bottom:15px}.need-card{aspect-ratio:.78;border-radius:25px}.need-caption{top:7%;left:8%;max-width:84%}.need-caption h3{font-size:clamp(30px,8.3vw,46px);margin-bottom:18px;line-height:1.25}.need-caption>p{font-size:9px;margin-bottom:19px}.need-caption>span{font-size:12px;line-height:1.8}.need-portrait{width:100%;height:72%;right:-16%;bottom:-19%}.need-hello{font-size:25cqw;bottom:8%;left:4%}.need-profile-note{left:8%;bottom:8%;font-size:8px;gap:7px;max-width:42%}.need-profile-note>span{font-size:9px}.need-project--one{top:46%;right:-10%;width:88%;transform:rotate(-8deg)}.need-project--two{width:75%;right:20%;bottom:-6%;transform:rotate(8deg)}.need-project>div{height:18px;font-size:6px;padding-inline:7px}.need-work-note{font-size:7px;left:8%;bottom:4%}.need-card--work .need-caption>span{max-width:95%}.need-life-photo{object-position:60% 50%}.need-card--life .need-visual:after{background:linear-gradient(180deg,#102634d1,transparent 75%)}.need-memory{right:7%;bottom:9%;padding:17px 20px}.need-memory>p{font-size:17px;margin:12px 0}.need-memory>span{font-size:6px}.need-memory>small{font-size:8px}.need-life-date{font-size:6px;left:8%;bottom:4%}.needs-navigation{padding:8px 22px 0;gap:12px}.needs-help{font-size:10px;max-width:45%}.needs-count{font-size:10px;margin-right:5px}.needs-navigation>div{gap:8px}.needs-navigation button{width:44px;height:44px;font-size:19px}
  .home-reveal{height:auto;padding:20px 0 35px}.world-stage{position:relative;top:auto;height:auto}.world-label{font-size:7px;top:0;left:22px}.world-media{position:relative;inset:auto;height:300px;opacity:1}.world-copy{position:relative;inset:auto;padding:18px 22px 38px;opacity:1;transform:none}.world-copy>.m-mono{font-size:7px;margin-bottom:20px}.world-copy h2{font-size:clamp(37px,10vw,56px);margin-bottom:23px;line-height:1.25}.world-copy>p{font-size:12px;line-height:1.8;max-width:280px}.world-svg{height:100%}
  .home-showcase{padding-top:62px}.home-showcase .story-heading{margin-bottom:37px}.showcase-frame{aspect-ratio:1.05;clip-path:inset(0 12px round 24px)!important}.showcase-media{transform:none!important}.showcase-media img{object-position:47% 50%}.showcase-caption{align-items:flex-start;padding:20px 22px 0;gap:12px}.showcase-caption>span{font-size:10px}.showcase-caption small{font-size:9px;margin-top:5px}.showcase-caption .m-text-link{font-size:12px;gap:8px;padding-top:0;min-height:44px;align-self:center}.showcase-caption .m-text-link>span{font-size:17px}
  .home-closing{padding:70px 22px 60px;align-items:flex-start;flex-direction:column;gap:26px}.home-closing .m-mono{font-size:8px;margin-bottom:14px}.home-closing h2{font-size:36px}.home-closing .m-button{font-size:12px;gap:42px;min-height:50px}
}
@media(max-width:440px){body[data-view="home"] #site-count{display:none}}
@media(max-width:360px){.story-heading h2{font-size:32px}.need-caption h3{font-size:29px}.need-caption>span{font-size:11px}.need-caption{left:7%;top:6%}.need-card{aspect-ratio:.72}.need-profile-note{font-size:7px}.need-memory{right:6%;padding:14px 16px}.need-memory>p{font-size:15px}.needs-help{font-size:9px}.world-media{height:260px}.world-copy h2{font-size:36px}.showcase-caption{gap:8px}.showcase-caption .m-text-link{font-size:11px;gap:5px}}
@media(prefers-reduced-motion:reduce){
  .needs-track{scroll-behavior:auto}.need-caption{opacity:1!important;transform:none!important}.need-visual{transform:none!important}.needs-navigation button{transition:none}
  .home-reveal{height:auto;padding-block:45px}.world-stage{position:relative;top:auto;height:auto}.world-media{position:relative;inset:auto;height:min(48vw,460px);min-height:260px;opacity:1}.world-copy{position:relative;inset:auto;opacity:1;transform:none;padding-block:40px}.world-label{top:0}.world-copy h2{font-size:clamp(38px,6vw,80px)}.showcase-frame{clip-path:inset(0 round 20px)}.showcase-media{transform:none}
}

/* Deliberate PC gallery input; only the arrows sit below the artwork. */
.needs-type-line{display:block}
.needs-phrase{position:relative;display:inline-grid;white-space:nowrap;color:#b3bba4}
.needs-phrase>span{grid-area:1/1}
.typing-reserve{visibility:hidden}
[data-typing-word]{text-align:left;transition:opacity .2s}
[data-typing-word].is-changing{opacity:.65}
.needs-track.is-switching{scroll-snap-type:none;scroll-behavior:auto}
.needs-gallery{position:relative}
.needs-input{position:absolute;inset:0;z-index:5}
.needs-navigation{justify-content:center;padding-top:16px}
.needs-navigation>div{gap:35px}
.needs-navigation button{border:0;border-radius:0;background:none;width:50px;height:48px;font-size:30px;color:#a9afa0;text-shadow:0 0 2px #d5f66b38;transition:color .3s,transform .3s}
.needs-navigation button:hover:not(:disabled){background:none;color:#e1e9d2;transform:scale(1.1)}
.needs-navigation button:active:not(:disabled){transform:scale(.96)}
@media(min-width:721px){.needs-track{overflow-x:hidden;overscroll-behavior-x:none}}
@media(max-width:720px){.needs-input{display:none}}

/* One continuous stage: the image word survives both reading holds and exits with them. */
@media(min-width:721px){
  .home-reveal{height:470svh}
  .world-media{opacity:1}
  .world-copy{inset:57% 4vw auto;padding:26px 0 0;justify-content:flex-start}
  .world-copy--first{opacity:var(--world-copy-a,0)}
  .world-copy--second{opacity:var(--world-copy-b,0)}
  .world-copy h2{font-size:clamp(36px,min(5vw,7.4svh),78px);line-height:1.35;margin-bottom:24px}
  .world-copy>p{font-size:clamp(13px,1.2vw,18px);color:#929b85}
}
@media(prefers-reduced-motion:reduce){
  .home-reveal{height:auto}
  .world-copy--first{opacity:1;position:relative;inset:auto;transform:none}
  .world-copy--second{display:none}
}
@media(max-width:720px){.world-copy--second{display:none}}

/* Six screens carry a real running page without stealing the main wheel. */
.showcase-scroll{position:relative;height:600svh}
.showcase-stage{position:sticky;top:124px;height:calc(100svh - 124px)}
.showcase-frame{height:100%;aspect-ratio:auto;background:#151617}
.showcase-media{opacity:0;transition:opacity .5s}
.showcase-frame.is-ready .showcase-media{opacity:1}
.showcase-media iframe{position:absolute;left:0;top:0;display:block;border:0;transform-origin:top left;pointer-events:none;background:#999e9e}
.showcase-loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;color:#91968a}
.showcase-loading>span{font-size:clamp(35px,7vw,100px);letter-spacing:-.06em;color:#e0e4d9}
.showcase-loading p{font-size:14px;margin:0}
.showcase-loading a{font-size:12px;text-decoration:underline;text-underline-offset:5px}
@media(max-width:720px),(prefers-reduced-motion:reduce){.showcase-scroll{height:auto}.showcase-stage{position:relative;top:auto;height:70svh;min-height:400px}.showcase-media{transition:none}}

/* Round two: three logical cards with hidden visual bookends. */
.need-card{box-shadow:0 0 2px 1px #c6dbbe18,inset 0 0 2px 1px #ffffff1a}
.need-card:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 2px 1px #d9e8cf1c;z-index:4}
.needs-input[data-edge=true]{cursor:pointer}
.need-card--profile .need-caption h3{font-size:clamp(38px,4.55vw,72px);font-weight:500;color:#3b4b3f}
.need-caption h3 strong{font-size:1.13em;font-weight:600;color:#1a2e1f}
.need-orbit{right:4%;top:10%;max-width:24%;font-size:clamp(13px,1.7vw,27px);font-weight:750;letter-spacing:-.035em;line-height:1.35;display:block;background:linear-gradient(125deg,#55766555,#62788a50,#846b7755);color:transparent;background-clip:text}
.need-hello.light-label{position:absolute;bottom:7%;left:4%;font-size:20cqw;line-height:.9;font-family:inherit;font-weight:500;letter-spacing:-.09em;text-transform:none;color:#899a8e40;opacity:1}
.need-hello .light-label-glow{color:#233c2a;opacity:calc(var(--label-light)*.10);mask-image:radial-gradient(ellipse 60px 65px at var(--label-x) var(--label-y),#000,transparent 100%);transition:opacity .85s ease .3s}
.need-hello[data-lit=true] .light-label-glow{transition:opacity .2s ease}
.need-card--work .need-caption{color:#a4b4c5}
.need-project{box-shadow:0 15px 35px #040b1640,0 0 2px 1px #d7e3ff20}
.need-project:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 2px 1px #ffffff21;border-radius:inherit;pointer-events:none}
.need-card--life .need-caption{color:rgb(242 243 239 / .8)}
.need-card--life .need-caption>span{font-size:clamp(18px,2.1vw,31px);opacity:.75}
.need-life-date{bottom:auto;left:auto;top:8%;right:5%;color:#243b43a6;font-weight:600;font-size:clamp(9px,.85vw,14px)}
@media(max-width:1000px){.need-card--profile .need-caption h3{font-size:4.8vw}.need-orbit{display:block;font-size:1.8vw}}
@media(max-width:720px){.need-card--profile .need-caption h3{font-size:8.4vw}.need-orbit{font-size:3vw;top:auto;bottom:12%;max-width:24%}.need-hello.light-label{font-size:25cqw}.need-card--life .need-caption>span{font-size:4.15vw}}

/* Round two: a full-photo hold, a photo-word hold, then restrained opaque glass. */
@media(min-width:721px){.home-reveal{height:calc(677svh - 124px)}}
.world-image{opacity:var(--world-photo,1)}
.world-glass,.world-shadow{display:none;pointer-events:none}
.home-reveal[data-glass=true] .world-glass{display:block;opacity:var(--world-glass,0)}
.home-reveal[data-glass=true] .world-shadow{display:block;opacity:calc(var(--world-glass,0)*.24)}
.world-label.light-label{opacity:var(--world-label-opacity,0);transition:opacity .28s ease}
.world-label.light-label[data-light-disabled=true]{visibility:hidden}
.world-subtitle.light-label{font:600 clamp(19px,min(2.5vw,3.7svh),39px)/1.65 "Kaiti SC","STKaiti","KaiTi","Songti SC",serif;letter-spacing:.025em;color:rgb(221 224 207 / .35);text-transform:none;max-width:88%;margin:0}
.world-subtitle .light-label-glow{color:#d8dfcb;opacity:calc(var(--label-light)*.3);mask-image:radial-gradient(ellipse 90px 60px at var(--label-x) var(--label-y),#000,transparent 100%)}
@media(max-width:720px){.world-subtitle.light-label{font-size:20px;max-width:90%}}
@media(prefers-reduced-motion:reduce){.home-reveal{height:auto}.world-label.light-label{transition:none}}

/* Round two: reveal the frame before browsing, then release at its real content end. */
@media(min-width:721px){
  .showcase-scroll{height:calc(100svh - 16px + 2600px);overflow-anchor:none}
  .showcase-stage{top:16px;height:calc(100svh - 16px)}
}
.home-ending{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;background:var(--bg);position:relative;isolation:isolate}
.home-ending .home-closing{flex:1;min-height:0;padding-top:130px;padding-bottom:90px}
.home-ending .m-footer{flex-shrink:0}
@media(max-width:720px){.home-ending .home-closing{padding-top:100px;padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){.showcase-scroll{height:auto!important}.showcase-stage{top:auto;height:70svh}}