@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap');
@font-face{font-family:'Shippori Mincho';src:url('assets/fonts/ShipporiMincho-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Belleza';src:url('assets/fonts/Belleza-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--black:#0b0b0a;--paper:#e9e5dd;--muted:#aba59a;--gold:#b49a76}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--black);color:var(--paper);font-family:'Shippori Mincho','Yu Mincho','游明朝',serif;font-weight:300;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:1px solid var(--gold);outline-offset:7px}.skip{position:fixed;left:20px;top:-100px;z-index:10;background:var(--black);padding:15px}.skip:focus{top:20px}header{position:absolute;z-index:5;top:0;width:100%;padding:48px 5%;display:flex;align-items:center;justify-content:space-between}.brand{font-family:Optima,'Belleza',Candara,sans-serif;letter-spacing:.48em;font-size:17px}.menu-toggle{border:0;background:none;width:44px;height:44px;display:grid;align-content:center;gap:9px;cursor:pointer;padding:7px}.menu-toggle span{height:1px;width:30px;background:var(--paper);transition:transform .3s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-5px) rotate(-45deg)}nav{position:absolute;z-index:4;right:3%;top:104px;padding:34px 44px;background:rgba(14,13,12,.96);border:1px solid #38332b;min-width:220px}nav:not([hidden]){display:grid;gap:26px}nav a{font-size:16px;letter-spacing:.2em}nav a:hover{color:var(--gold)}.hero{position:relative;min-height:750px;height:100svh;overflow:hidden}.hero-image,.hero-shade{position:absolute;inset:0}.hero-image{background:url('assets/light-contour.png') center center/cover no-repeat;animation:breathe 18s ease-in-out infinite alternate}.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 65%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 30%)}.hero-copy{position:absolute;left:12%;top:43%;text-align:center;width:48%;animation:appear 1.8s ease both}.hero h1{font-size:clamp(26px,2.6vw,44px);font-weight:300;letter-spacing:.3em;line-height:1.9;margin:0}.hero h1 span{white-space:nowrap}.hairline{height:1px;width:45px;background:#d0c4b260;margin:43px auto}.hero-date{font-family:Optima,'Belleza',Candara,sans-serif;font-size:15px;letter-spacing:.36em;line-height:2.2;margin:0}.hero-date span{display:block}.scroll{position:absolute;bottom:35px;left:36%;display:flex;flex-direction:column;align-items:center;gap:17px;font:12px Optima,'Belleza',Candara,sans-serif;letter-spacing:.38em}.scroll span{height:58px;width:1px;background:linear-gradient(transparent,#d0c4b2);transform-origin:top;animation:scroll-line 2.8s ease-in-out infinite}.story{padding:125px 10% 100px;max-width:1600px;margin:auto}.section-mark{display:flex;align-items:center;gap:26px;font-family:Optima,'Belleza',Candara,sans-serif;color:var(--muted);font-size:12px;letter-spacing:.18em}.section-mark>span{border-bottom:1px solid #6a6051;padding-bottom:8px}.section-mark p{margin:0}.story-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;padding-top:90px}.story h2,.letter h2{font-size:clamp(26px,3vw,42px);font-weight:300;line-height:2.1;letter-spacing:.17em;margin:0}.story-text{padding-top:8px;font-size:17px;letter-spacing:.12em;line-height:2.7}.story-text p{margin:0 0 40px}.detail-strip{margin-top:95px;border-top:1px solid #302a22;padding-top:37px;display:flex;gap:50px;align-items:center}.detail-strip>span{font-size:20px;letter-spacing:.2em}.detail-strip p{margin:0 0 0 auto;font-size:14px;letter-spacing:.18em;color:var(--muted)}.letter{border-top:1px solid #302a22;padding:80px 10% 105px;background:radial-gradient(ellipse at 50% 100%,#29201850,transparent 65%)}.letter-inner{text-align:center;max-width:700px;margin:85px auto 0}.eyebrow{font-size:15px;letter-spacing:.2em;color:var(--muted);margin-bottom:32px}.letter-description{font-size:16px;line-height:2.4;letter-spacing:.12em;margin:32px 0 40px}.letter-button{padding:22px 30px;border:1px solid #71604a;display:inline-flex;gap:38px;align-items:center;font-size:16px;letter-spacing:.15em;transition:background .25s,border-color .25s}.button-line{display:block;height:1px;width:32px;background:#b49a76}.letter-button:hover{background:#b49a7618;border-color:#b49a76}.mail-note{font-size:12px;color:var(--muted);line-height:2;margin:18px 0 0;letter-spacing:.05em}.location{margin-top:85px}.location span{font:12px Optima,'Belleza',Candara,sans-serif;letter-spacing:.22em;color:var(--muted)}.location p{font-size:15px;letter-spacing:.2em;margin-top:18px}footer{border-top:1px solid #302a22;padding:45px 5%;display:flex;align-items:center;justify-content:space-between}footer p,.back-top{font:12px Optima,'Belleza',Candara,sans-serif;color:var(--muted);letter-spacing:.15em}.reveal{opacity:0;transform:translateY(20px);transition:opacity 1s,transform 1s}.reveal.visible{opacity:1;transform:none}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes breathe{to{transform:scale(1.025)}}@keyframes scroll-line{0%,100%{opacity:.4;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:700px){header{padding:30px 7%}.brand{font-size:15px}.hero{height:100svh;min-height:650px}.hero-image{background-position:65% center}.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.32),transparent),linear-gradient(0deg,rgba(0,0,0,.3),transparent 40%)}.hero-copy{width:86%;left:7%;top:39%}.hero h1{font-size:28px;line-height:2.2;letter-spacing:.25em}.hero h1 span{display:block}.hairline{margin:35px auto}.hero-date{font-size:14px}.scroll{left:50%;transform:translateX(-50%);bottom:28px;gap:14px}.scroll span{height:43px}.story{padding:75px 8% 70px}.section-mark{font-size:12px;gap:18px;letter-spacing:.08em}.story-layout{display:block;padding-top:55px}.story h2,.letter h2{font-size:27px;letter-spacing:.1em}.story-text{margin-top:48px;font-size:16px;line-height:2.6}.story-text p{margin-bottom:30px}.detail-strip{margin-top:55px;gap:30px;flex-wrap:wrap}.detail-strip p{margin:8px 0 0;width:100%;font-size:14px}.letter{padding:65px 8% 70px}.letter-inner{margin-top:60px}.letter-description{font-size:16px}.letter-button{padding:20px;gap:20px}.mail-note{max-width:260px;margin:18px auto}.location{margin-top:65px}footer{padding:35px 8%;flex-wrap:wrap;gap:25px}footer .brand{width:100%}}
/* A long, pinned opening lets light emerge from the new moon. */
html{scroll-behavior:auto}
.hero{height:210svh;min-height:0;overflow:visible}
.hero-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.hero-image{filter:brightness(var(--moon-light,.06));animation:none;transform:scale(var(--moon-scale,1.035));will-change:filter,transform}
.hero-copy{animation:none}
.scroll{bottom:35px}
@media(max-width:700px){.hero{height:210svh;min-height:0}.hero-stage{min-height:600px}.scroll{bottom:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.hero{height:100svh}.hero-image{filter:brightness(.65);transform:none}}

.story{padding:0;max-width:none;height:620svh;background:rgb(var(--story-bg,11),var(--story-bg,11),var(--story-bg,11));color:rgb(var(--story-fg,233),var(--story-fg,233),var(--story-fg,233))}
.story-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.story .section-mark{position:absolute;top:12%;left:10%;color:inherit;opacity:.65}
.story-track{display:flex;width:300%;height:100%;transform:translate3d(var(--story-x,0px),0,0);will-change:transform}
.story-panel{width:33.333333%;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 10vw}
.story h2{font-size:clamp(28px,3.7vw,52px);line-height:2.1}
.story-text{margin:0;padding:0;font-size:clamp(17px,2.1vw,28px);line-height:2.7}
.story-text p{margin:0 0 35px}.story-text p:last-child{margin:0}
.story-line{display:block;opacity:var(--line-opacity,0);transform:translateY(var(--line-y,24px));filter:blur(var(--line-blur,5px));will-change:opacity,transform}
.story-rule{width:50px;height:1px;background:currentColor;opacity:.35;margin-top:35px}
.story-progress{position:absolute;bottom:10%;left:10%;width:80%;height:1px;background:#8884}
.story-progress span{display:block;height:1px;background:currentColor;width:100%;transform:scaleX(var(--story-progress,0));transform-origin:left}
@media(max-width:700px){.story{height:580svh}.story-panel{padding:0 8vw}.story .section-mark{left:8%;top:12%}.story h2{font-size:27px}.story-text{font-size:16px;letter-spacing:.06em}.story-progress{left:8%;width:84%}}
@media(prefers-reduced-motion:reduce){.story{height:auto;background:#fff;color:#171717}.story-stage{height:auto;min-height:0;position:relative;padding:70px 8%}.story .section-mark{position:static}.story-track{display:block;width:100%;height:auto;transform:none}.story-panel{width:100%;padding:60px 0 0}.story-line{opacity:1;transform:none;filter:none}.story-progress{display:none}}

/* Light arrives from the next panel on the right. */
.story{background:none}
.story-stage{background:linear-gradient(90deg,rgb(var(--story-left,11),var(--story-left,11),var(--story-left,11)) 0%,rgb(var(--story-left,11),var(--story-left,11),var(--story-left,11)) 22%,rgb(var(--story-right,25),var(--story-right,25),var(--story-right,25)) 100%)}
@media(prefers-reduced-motion:reduce){.story-stage{background:#fff}}

/* Poetic edition: five chapters, each with room to read. */
.hero-copy{left:7%;width:60%}.hero h1{font-size:clamp(24px,2.4vw,38px)}.hero h1 span{display:block}
.story{height:1500svh}.story-track{width:500%}.story-panel{width:20%;padding:9vh 10vw 4vh;justify-content:center}.story h2{font-size:clamp(25px,2.7vw,37px);line-height:1.9;letter-spacing:.1em}.story-rule{margin:20px 0}.story-text{font-size:16px;line-height:2;letter-spacing:.08em}.story-text p{margin-bottom:16px}.story .section-mark{top:5%}.story-progress{bottom:4%}
@media(max-width:700px){.hero-copy{left:7%;width:86%}.hero h1{font-size:24px;letter-spacing:.13em}.story{height:1450svh}.story-panel{padding:9vh 7vw 5vh}.story h2{font-size:23px;line-height:1.75}.story-text{font-size:15px;line-height:1.85}.story-text p{margin-bottom:14px}.story-rule{margin:17px 0}.story .section-mark{top:4%;left:7%}.story-stage{min-height:740px}.story-progress{bottom:3%}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.story-track{width:100%}.story-panel{width:100%;padding:55px 0}.story-stage{min-height:0}}
/* A quieter measure and generous space around each verse. */
.story-panel{align-items:center;padding:10vh 10vw 6vh}
.story-panel h2,.story-panel .story-text,.story-panel .story-rule{width:min(100%,520px)}
.story h2{font-size:clamp(23px,2vw,28px);line-height:2.05;letter-spacing:.12em;font-weight:300}
.story-text{font-size:16px;line-height:2.2;letter-spacing:.1em}
.story-text p{margin-bottom:24px}.story-rule{max-width:40px;margin:26px 0 30px;align-self:center;position:relative;left:calc(-1 * min(240px,30vw))}
@media(max-width:700px){
.story{height:auto;position:relative;background:linear-gradient(90deg,rgb(var(--story-left,11),var(--story-left,11),var(--story-left,11)) 22%,rgb(var(--story-right,25),var(--story-right,25),var(--story-right,25)))}
.story-stage{height:auto;min-height:0;position:relative;overflow:visible;background:none;padding:80px 0 100px}
.story .section-mark{position:static;margin:0 9% 85px}
.story-track{width:100%;display:block;height:auto;transform:none!important}
.story-panel{width:100%;min-height:0;display:block;padding:60px 9% 110px}
.story-panel:last-child{padding-bottom:50px}
.story-panel h2,.story-panel .story-text{width:100%;max-width:440px;margin-left:auto;margin-right:auto}
.story h2{font-size:22px;line-height:2.05;letter-spacing:.07em;overflow-wrap:anywhere}
.story-text{font-size:16px;line-height:2.25;letter-spacing:.055em}
.story-text p{margin-bottom:30px;overflow-wrap:anywhere}
.story-rule{left:0;max-width:36px;margin:30px 0 38px}
.story-progress{display:none}.letter-inner{max-width:440px}.letter-description{line-height:2.4}
}
@media(max-width:360px){.story h2{font-size:20px;letter-spacing:.025em}.story-panel{padding-left:8%;padding-right:8%}}
@media(prefers-reduced-motion:reduce){.story{height:auto;background:#fff}.story-stage{background:#fff}.story-panel{width:100%;padding:65px 0}.story-line{color:#171717!important}}

.mobile-only{display:none}
@media(max-width:700px){.mobile-only{display:block}.story h2{font-size:20px;letter-spacing:.04em}}
/* Small, deliberate typography lets the empty space carry the poem. */
.story-panel{padding:12vh 14vw 8vh}
.story-panel h2,.story-panel .story-text{width:min(100%,420px)}
.story h2{font-size:20px;line-height:2.35;letter-spacing:.09em;font-weight:300}
.story-text{font-size:16px;line-height:2.35;letter-spacing:.055em}
.story-text p{margin-bottom:32px}
.story-rule{max-width:30px;margin:30px 0 38px;left:-195px}
.hero h1{font-size:clamp(22px,2vw,30px);letter-spacing:.2em}
.letter h2{font-size:26px;line-height:2.2;letter-spacing:.1em}
.letter-inner{max-width:510px}.letter-description{font-size:16px;line-height:2.5}
@media(max-width:700px){
.hero h1{font-size:22px;letter-spacing:.1em}
.story-stage{padding-top:85px;padding-bottom:130px}
.story .section-mark{margin:0 12% 105px;font-size:12px;letter-spacing:.03em}
.story-panel{padding:55px 12% 155px}
.story-panel h2,.story-panel .story-text{max-width:360px;width:100%}
.story h2{font-size:18px;line-height:2.35;letter-spacing:.04em}
.story-text{font-size:16px;line-height:2.3;letter-spacing:0}
.story-text p{margin-bottom:38px}.story-rule{left:0;margin:34px 0 44px;max-width:26px}
.letter{padding-left:12%;padding-right:12%}.letter h2{font-size:23px;line-height:2.2}.letter-description{font-size:16px;letter-spacing:0}
.letter-button{font-size:14px;letter-spacing:.04em;padding:20px 16px;gap:12px}
}
@media(max-width:360px){.story-panel{padding-left:11%;padding-right:11%}.story h2{font-size:18px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.story-panel{padding:65px 0}}

.qa-story{height:900svh}.qa-scenes{width:300%}.qa-scene{width:33.333333%;text-align:left;align-items:center}.qa-scene .q-mark,.qa-scene .qa-copy,.qa-scene .answer-button{width:min(100%,420px)}.q-mark{font:14px Optima,'Belleza',Candara,sans-serif;opacity:.6;margin:0 0 25px}.qa-copy{font-size:16px;line-height:2.35;letter-spacing:.04em;margin:35px 0}.answer-button{border:0;border-bottom:1px solid #8887;background:transparent;color:inherit;font:14px 'Shippori Mincho','Yu Mincho','游明朝',serif;line-height:2;letter-spacing:.03em;cursor:pointer;text-align:left;padding:12px 0}.answer-button span:first-child{font:16px Optima,'Belleza',Candara,sans-serif;margin-right:8px}.plus{margin-left:14px}
.answer-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;border:0;background:#f8f8f6;color:#242424;overflow:auto;overscroll-behavior:contain;padding:0}.answer-dialog::backdrop{background:#0009}
.answer-toolbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;background:#f8f8f6f5;padding:24px 6%;z-index:2;border-bottom:1px solid #ddd}
.answer-toolbar>span{font:12px Optima,'Belleza',Candara,sans-serif;letter-spacing:.16em}.answer-close{border:0;background:none;color:inherit;font:14px 'Shippori Mincho','Yu Mincho','游明朝',serif;cursor:pointer;padding:10px}
.answer-essay{max-width:650px;margin:auto;padding:70px 30px 120px}.answer-essay h2{font-size:24px;line-height:1.9;font-weight:400;margin:0 0 55px}.answer-essay>p:not(.eyebrow){font-size:16px;line-height:2.35;letter-spacing:.04em;margin:0 0 32px}.essay-return{border-bottom:1px solid #aaa;margin-top:20px}

@media(max-width:700px){.qa-story{height:auto}.qa-scenes{width:100%;display:block}.qa-scene{width:100%;display:block;text-align:left}.qa-scene .q-mark,.qa-scene .qa-copy,.qa-scene .answer-button{width:100%;max-width:360px}.qa-copy{font-size:16px;line-height:2.3}.answer-essay{padding:45px 9% 90px}.answer-essay h2{font-size:21px}.answer-toolbar{padding:15px 5%}}
@media(prefers-reduced-motion:reduce){.qa-story{height:auto}.qa-scenes{width:100%}.qa-scene{width:100%}}

/* Five verses restore the selected narrative without Q/A labels. */
.story{height:1500svh}.story-track{width:500%}.story-panel{width:20%}
.answer-button{width:min(100%,420px);font-size:13px;letter-spacing:.04em;margin-top:24px;padding:10px 0;opacity:var(--line-opacity,0)}
.story-panel{padding-top:8vh;padding-bottom:6vh}.story h2{font-size:20px;line-height:2.1}.story-text{line-height:2.15}.story-text p{margin-bottom:22px}
@media(max-width:700px){.story{height:auto}.story-track{width:100%;display:block}.story-panel{width:100%;padding:55px 12% 155px}.story h2{font-size:18px;line-height:2.3}.story-text{line-height:2.3}.story-text p{margin-bottom:38px}.answer-button{width:100%;max-width:360px}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.story-track{width:100%}.story-panel{width:100%}.answer-button{opacity:1}}
@media(min-width:701px) and (max-height:800px){.story{height:auto}.story-stage{height:auto;min-height:0;position:relative;padding:80px 0;overflow:visible}.story .section-mark{position:static;margin:0 10% 70px}.story-track{width:100%;display:block;transform:none!important}.story-panel{width:100%;padding:70px 10% 130px}.story-progress{display:none}}

.passage{position:fixed;inset:-10%;z-index:1000;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 60% 45%,#fff 0%,#faf8f1 38%,#e1d5bc 100%)}
.passage.into-dark{background:radial-gradient(ellipse at 60% 45%,#050505 0%,#10100e 45%,#222019 100%)}
.passage.passing{pointer-events:all}
.answer-dialog{transition:none}
.answer-dialog.dark-essay{background:#0b0b0a;color:#e9e5dd}.dark-essay .answer-toolbar{background:#0b0b0af5;border-bottom-color:#38332b}.dark-essay .eyebrow{color:#aba59a}

.passage{border:0;margin:0;width:auto;height:auto;max-width:none;max-height:none}.passage::backdrop{background:transparent;pointer-events:none}

/* ZEN is revealed as the project's concept in the final chapter. */
.brand{display:flex;align-items:center;gap:16px;letter-spacing:.32em}.brand-divider{font-size:12px;opacity:.5;letter-spacing:0}.brand-maker{font-size:12px;letter-spacing:.26em}
.story .zen-name{font-family:Optima,'Belleza',Candara,sans-serif;font-size:46px;letter-spacing:.28em;line-height:1.4;margin-bottom:42px}.zen-reveal .story-text{line-height:2.6}.zen-reveal .zen-concept{font-size:19px;letter-spacing:.1em;margin-bottom:48px}.zen-reveal .zen-location{font-size:15px;margin-top:44px}.zen-essay>p:not(.eyebrow){line-height:2.8;margin-bottom:50px}.zen-essay{max-width:620px}
@media(max-width:700px){.brand{gap:12px}.brand-maker{font-size:12px}.story .zen-name{font-size:38px;margin-bottom:34px}.zen-reveal .zen-concept{font-size:17px;letter-spacing:.04em}.zen-reveal{padding-top:100px}.zen-essay{padding-left:8%;padding-right:8%}.zen-essay>p:not(.eyebrow){letter-spacing:0}}

.sound-control{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));right:24px;z-index:8;display:flex;align-items:center;gap:18px;padding:8px 16px;border:1px solid #8d806650;border-radius:3px;background:#11110ee8;color:#e9e5dd;backdrop-filter:blur(12px);max-width:calc(100% - 32px)}
.sound-control button{display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;font-size:14px;letter-spacing:.03em;padding:8px 0;cursor:pointer;min-height:44px}.sound-symbol{font-size:23px;color:#c5b598}.sound-control label{display:flex;align-items:center;gap:8px;font-size:12px}.sound-control label[hidden]{display:none}.sound-control input{width:76px;accent-color:#c5b598}.sound-status:empty{display:none}.sound-status{font-size:12px;max-width:150px;line-height:1.6}
@media(max-width:700px){.sound-control{right:16px;bottom:max(16px,env(safe-area-inset-bottom));gap:12px;padding:5px 12px}.sound-control button{font-size:12px}.sound-control input{width:60px}.sound-control label span{display:none}footer{padding-bottom:110px}}

/* Three chapters, with a longer reveal inside each chapter. */
@media(min-width:701px) and (min-height:801px){.story{height:900svh}.story-track{width:300%}.story-panel{width:33.3333333333%}}
.zen-prelude{width:min(100%,420px);font-size:18px;line-height:2.3;letter-spacing:.08em;margin:0 0 40px}.story .zen-name{font-size:40px;margin-bottom:28px}.zen-reveal .zen-concept{margin-bottom:30px}.zen-reveal .zen-location{margin-top:28px}
@media(max-width:700px){.zen-prelude{max-width:360px;font-size:17px;margin:0 auto 55px}.story .zen-name{font-size:36px}.zen-reveal .zen-concept{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.story-track{width:100%}.story-panel{width:100%}}

/* Intimate type for the optional full essays, as requested. */
.answer-essay{max-width:550px;padding-top:90px;padding-bottom:130px}
.answer-essay h2{font-size:18px;line-height:2.2;letter-spacing:.07em;margin-bottom:55px}
.answer-essay>p:not(.eyebrow){font-size:12px;line-height:2.8;letter-spacing:.07em;margin-bottom:34px}
.answer-essay .eyebrow{font-size:11px;margin-bottom:28px}
.zen-essay>p:not(.eyebrow){font-size:12px;line-height:3;margin-bottom:42px}
@media(max-width:700px){.answer-essay{padding:65px 13% 100px}.answer-essay h2{font-size:16px;line-height:2.4;margin-bottom:46px}.answer-essay>p:not(.eyebrow){font-size:12px;line-height:2.8;letter-spacing:.035em}.zen-essay>p:not(.eyebrow){line-height:3;letter-spacing:0}}

/* Smaller type throughout every full-text page. */
.answer-essay h2{font-size:14px;line-height:2.6}
.answer-essay>p:not(.eyebrow),.zen-essay>p:not(.eyebrow){font-size:10px;line-height:3;letter-spacing:.07em}
.answer-essay .eyebrow{font-size:10px}
@media(max-width:700px){.answer-essay h2{font-size:13px;line-height:2.6}.answer-essay>p:not(.eyebrow),.zen-essay>p:not(.eyebrow){font-size:10px;line-height:3;letter-spacing:.035em}}

/* Increase the selected full-text sizes by one pixel. */
.answer-essay h2{font-size:15px}
.answer-essay>p:not(.eyebrow),.zen-essay>p:not(.eyebrow),.answer-essay .eyebrow{font-size:11px}
@media(max-width:700px){.answer-essay h2{font-size:14px}.answer-essay>p:not(.eyebrow),.zen-essay>p:not(.eyebrow),.answer-essay .eyebrow{font-size:11px}}

/* Main story body and reading links: two pixels smaller across all chapters. */
.story-text{font-size:14px}
.answer-button{font-size:11px}
.zen-prelude{font-size:16px}
.zen-reveal .zen-concept{font-size:17px}
.zen-reveal .zen-location{font-size:13px}
@media(max-width:700px){.story-text{font-size:14px}.answer-button{font-size:11px}.zen-prelude{font-size:15px}.zen-reveal .zen-concept{font-size:15px}.zen-reveal .zen-location{font-size:13px}}

/* Hero: one shared axis for the message, date and scroll cue. */
.hero-copy{left:37%;top:46%;width:min(60%,600px);transform:translate(-50%,-50%);text-align:center}
.hero h1{font-size:clamp(22px,1.9vw,28px);line-height:2.3;letter-spacing:.14em;font-weight:300}
.hero h1 span{display:block;white-space:normal}
.hero-copy .hairline{width:28px;margin:32px auto 28px;background:#d0c4b24d}
.hero-date{font-size:13px;letter-spacing:.28em;line-height:1.8;font-variant-numeric:tabular-nums}
.hero-date span{font-size:11px;letter-spacing:.36em;margin-top:12px;opacity:.72}
.hero .scroll{left:37%;transform:translateX(-50%);bottom:46px;font-size:10px;letter-spacing:.3em;gap:15px;padding:12px;opacity:.7}
.hero .scroll span{height:42px}
@media(max-width:700px){.hero-copy{left:50%;top:46%;width:84%;transform:translate(-50%,-50%)}.hero h1{font-size:20px;line-height:2.4;letter-spacing:.09em}.hero-copy .hairline{margin:30px auto 26px;width:24px}.hero-date{font-size:12px;letter-spacing:.24em}.hero-date span{font-size:10px;margin-top:12px}.hero .scroll{left:50%;bottom:72px;font-size:9px;gap:13px}.hero .scroll span{height:34px}}
@media(max-width:360px){.hero h1{font-size:18px;letter-spacing:.06em}}

/* A single continuous background transition, then a slow text reveal. */
.answer-dialog::backdrop{background:transparent}
.answer-toolbar{background:transparent}
.dark-essay .answer-toolbar{background:transparent}

/* Keep intended Japanese line breaks comfortable on narrow screens. */
.hero h1,.story h2,.letter h2{line-break:strict;word-break:normal;overflow-wrap:normal;text-wrap:balance}
.story-text p,.letter-description,.answer-essay p{line-break:strict;word-break:normal;overflow-wrap:break-word;text-wrap:pretty}
.story-panel h2,.story-panel .story-text,.answer-button{max-width:100%}
@media(max-width:700px){
.story-panel{padding-left:10%;padding-right:10%}
.story h2{font-size:clamp(16px,4.6vw,18px);letter-spacing:.025em}
.story-text{font-size:clamp(13px,3.6vw,14px);letter-spacing:0}
.story-text p{overflow-wrap:normal}
.hero h1{font-size:clamp(17px,5.1vw,20px);letter-spacing:.06em}
.hero-copy{width:86%}
.zen-prelude{font-size:clamp(14px,3.9vw,15px);letter-spacing:.035em}
.zen-reveal .zen-concept{font-size:clamp(14px,3.9vw,15px);letter-spacing:.025em}
.letter h2{font-size:clamp(20px,5.8vw,23px);letter-spacing:.035em}
.letter-description{font-size:clamp(14px,4vw,16px);letter-spacing:0}
.answer-essay h2{letter-spacing:.025em;text-wrap:balance}
.answer-essay>p:not(.eyebrow){letter-spacing:.02em}
}
@media(max-width:360px){.story-panel{padding-left:10%;padding-right:10%}.story h2{font-size:16px;letter-spacing:0}.hero h1{font-size:17px;letter-spacing:.04em}}

/* A quiet milky invitation, responding to hover or touch-screen scrolling. */
.letter-button{position:relative;isolation:isolate;overflow:visible;border-color:#94877b80;transition:background 1.4s ease,border-color 1.4s ease,box-shadow 1.4s ease;color:#eee9e1}
.letter-button::before{content:'';position:absolute;inset:-16px;z-index:-1;pointer-events:none;border-radius:18px;background:radial-gradient(ellipse at center,rgba(255,253,242,.3) 0%,rgba(245,240,218,.13) 45%,transparent 74%);filter:blur(15px);opacity:0;transition:opacity 1.5s ease}
.letter-button:focus-visible{background:rgba(255,253,242,.15);border-color:#fff8e8b3;box-shadow:inset 0 0 24px #fff9e714,0 0 32px #fff8e719}
.letter-button:focus-visible::before{opacity:1}
@media(hover:hover) and (pointer:fine){.letter-button:hover{background:rgba(255,253,242,.15);border-color:#fff8e8b3;box-shadow:inset 0 0 24px #fff9e714,0 0 32px #fff8e719}.letter-button:hover::before{opacity:1}}
@media(hover:none),(pointer:coarse){.letter-button{background:rgba(255,253,242,calc(var(--invitation-glow,0)*.15));border-color:rgba(255,248,232,calc(.35 + var(--invitation-glow,0)*.4));box-shadow:0 0 32px rgba(255,248,231,calc(var(--invitation-glow,0)*.12));transition:background .6s ease,border-color .6s ease,box-shadow .6s ease}.letter-button::before{opacity:var(--invitation-glow,0);transition:opacity .6s ease}}
@media(prefers-reduced-motion:reduce){.letter-button,.letter-button::before{transition:none}}

/* A radiant invitation, with a clear change in text color. */
.letter-button{transition:background 1.3s ease,color 1.3s ease,border-color 1.3s ease,box-shadow 1.3s ease}
.letter-button::before{inset:-38px;background:radial-gradient(ellipse at center,rgba(255,253,240,.75) 0%,rgba(255,249,223,.38) 42%,transparent 74%);filter:blur(24px)}
.letter-button .button-line{transition:background 1.3s ease}
.letter-button:focus-visible{color:#302d27;background:rgba(255,253,243,.94);border-color:#fffbea;box-shadow:inset 0 0 28px #fffdf580,0 0 42px #fff9dc66,0 0 90px #fff5cd33}
.letter-button:focus-visible .button-line{background:#6c6251}
@media(hover:hover) and (pointer:fine){.letter-button:hover{color:#302d27;background:rgba(255,253,243,.94);border-color:#fffbea;box-shadow:inset 0 0 28px #fffdf580,0 0 42px #fff9dc66,0 0 90px #fff5cd33}.letter-button:hover .button-line{background:#6c6251}}
@media(hover:none),(pointer:coarse){.letter-button{color:rgb(calc(238 - var(--invitation-glow,0)*190),calc(233 - var(--invitation-glow,0)*188),calc(225 - var(--invitation-glow,0)*186));background:rgba(255,253,243,calc(var(--invitation-glow,0)*.94));border-color:rgba(255,251,234,calc(.35 + var(--invitation-glow,0)*.65));box-shadow:0 0 42px rgba(255,249,220,calc(var(--invitation-glow,0)*.4)),0 0 90px rgba(255,245,205,calc(var(--invitation-glow,0)*.2))}.letter-button .button-line{background:currentColor}}

/* The audio control shares the invitation's milky glow. */
.sound-control{isolation:isolate;transition:background 1.3s ease,color 1.3s ease,border-color 1.3s ease,box-shadow 1.3s ease}
.sound-control::before{content:'';position:absolute;inset:-32px;z-index:-1;pointer-events:none;border-radius:18px;background:radial-gradient(ellipse at center,rgba(255,253,240,.75),rgba(255,249,223,.38) 42%,transparent 74%);filter:blur(24px);opacity:0;transition:opacity 1.3s ease}
.sound-control .sound-symbol{color:inherit;transition:color 1.3s ease}
.sound-control:focus-within{color:#302d27;background:rgba(255,253,243,.94);border-color:#fffbea;box-shadow:0 0 42px #fff9dc66,0 0 90px #fff5cd33}
.sound-control:focus-within::before{opacity:1}
@media(hover:hover) and (pointer:fine){.sound-control:hover{color:#302d27;background:rgba(255,253,243,.94);border-color:#fffbea;box-shadow:0 0 42px #fff9dc66,0 0 90px #fff5cd33}.sound-control:hover::before{opacity:1}}
@media(hover:none),(pointer:coarse){.sound-control{color:rgb(calc(233 - var(--sound-glow,0)*185),calc(229 - var(--sound-glow,0)*184),calc(221 - var(--sound-glow,0)*182));background:color-mix(in srgb,#11110e calc((1 - var(--sound-glow,0))*100%),#fffdf3);border-color:rgba(255,251,234,calc(.3 + var(--sound-glow,0)*.7));box-shadow:0 0 42px rgba(255,249,220,calc(var(--sound-glow,0)*.4)),0 0 90px rgba(255,245,205,calc(var(--sound-glow,0)*.2))}.sound-control::before{opacity:var(--sound-glow,0)}}
@media(prefers-reduced-motion:reduce){.sound-control,.sound-control::before{transition:none}}

/* Mobile repair: meaningful phrases, an opaque sticky toolbar and a quiet sound control. */
.reading-phrase{display:inline}
.answer-toolbar,.dark-essay .answer-toolbar{background:inherit}
.letter h2{opacity:1;transform:none;filter:none}
.sound-symbol{display:flex;align-items:center;justify-content:center}
.sound-symbol svg{width:18px;height:18px;display:block}
#sound-toggle[aria-pressed="false"] .speaker-wave{display:none}
#sound-toggle[aria-pressed="true"] .speaker-mute{display:none}
@media(max-width:700px){
.reading-phrase{display:inline-block;white-space:nowrap;text-wrap:nowrap}
.answer-essay{padding-left:9%;padding-right:9%;padding-top:55px}
.answer-essay>p:not(.eyebrow){line-height:2.6;letter-spacing:0;text-wrap:wrap;overflow-wrap:normal}
.answer-essay h2{line-height:2.3;letter-spacing:0}
.answer-toolbar{padding:12px 6%;gap:12px}
.answer-toolbar>span{font-size:10px;letter-spacing:.08em}
.answer-close{font-size:12px;min-height:44px;flex-shrink:0}
.letter .eyebrow{font-size:13px;letter-spacing:.045em;line-height:2.2}
.letter-description{font-size:14px;letter-spacing:0;line-height:2.5;text-wrap:wrap}
.letter .letter-inner{margin-top:60px}
.sound-control,.sound-control:focus-within,.sound-control:hover{background:#11110ee8;color:#e9e5dd;border-color:#8d806650;box-shadow:none;padding:4px 10px;gap:10px}
.sound-control::before,.sound-control:focus-within::before,.sound-control:hover::before{opacity:0;display:none}
.sound-control button{font-size:11px;gap:8px}
.sound-control input{width:52px}
}
@media(hover:none),(pointer:coarse){
.sound-control,.sound-control:focus-within,.sound-control:hover{background:#11110ee8;color:#e9e5dd;border-color:#8d806650;box-shadow:none}
.sound-control::before,.sound-control:focus-within::before,.sound-control:hover::before{opacity:0;display:none}
}

/* Concept typography: fine Mincho, restrained tracking and generous paragraph space. */
body{font-weight:400}
.hero h1,.story h2,.letter h2,.answer-essay h2{font-weight:400;font-feature-settings:"palt";letter-spacing:.1em;line-height:1.7}
.hero h1{font-size:clamp(20px,1.8vw,26px);line-height:2.1;letter-spacing:.09em}
.story h2{font-size:20px;line-height:1.7;margin-bottom:36px}
.story-text,.zen-reveal .story-text{font-size:14px;line-height:1.7;letter-spacing:.055em;font-feature-settings:"palt"}
.story-text p{margin-bottom:28px}
.zen-prelude{font-size:16px;line-height:1.8;letter-spacing:.055em}
.zen-reveal .zen-concept{font-size:17px;line-height:1.7;letter-spacing:.06em}
.zen-reveal .zen-location{font-size:14px;line-height:1.7}
.answer-button{font-size:12px;line-height:1.7;letter-spacing:.04em;margin-top:28px;padding:12px 0}
.answer-essay{max-width:650px;padding:88px 30px 130px}
.answer-essay h2{font-size:20px;line-height:1.5;letter-spacing:.1em;margin-bottom:40px}
.answer-essay>p:not(.eyebrow),.zen-essay>p:not(.eyebrow){font-size:14px;line-height:1.7;letter-spacing:.055em;font-feature-settings:"palt";margin-bottom:38px}
.answer-essay .eyebrow{font-size:11px;line-height:1.7;letter-spacing:.12em;margin-bottom:24px}
.letter h2{font-size:24px;line-height:1.7;letter-spacing:.08em}
.letter-description{font-size:14px;line-height:1.7;letter-spacing:.055em;font-feature-settings:"palt"}
.letter .eyebrow{font-size:14px;line-height:1.7;letter-spacing:.055em}
.letter-button{font-size:14px;line-height:1.7;letter-spacing:.04em}
.letter-note{font-size:12px;line-height:1.8;letter-spacing:.02em}
@media(max-width:700px){
.hero h1{font-size:clamp(17px,4.8vw,20px);line-height:2.1;letter-spacing:.055em}
.story h2{font-size:clamp(17px,4.6vw,20px);line-height:1.8;letter-spacing:.045em;margin-bottom:36px}
.story-text,.zen-reveal .story-text{font-size:clamp(13px,3.6vw,14px);line-height:1.8;letter-spacing:.02em}
.story-text p{margin-bottom:32px}
.zen-prelude{font-size:14px;line-height:1.8;letter-spacing:.04em}
.zen-reveal .zen-concept{font-size:15px;line-height:1.8;letter-spacing:.04em}
.zen-reveal .zen-location{font-size:14px;line-height:1.8}
.answer-essay{padding:56px 8% 100px}
.answer-essay h2{font-size:20px;line-height:1.5;letter-spacing:.06em;margin-bottom:40px}
.answer-essay>p:not(.eyebrow),.zen-essay>p:not(.eyebrow){font-size:14px;line-height:1.8;letter-spacing:.025em;margin-bottom:36px}
.reading-phrase{display:inline;white-space:normal;text-wrap:wrap}
.answer-essay p{line-break:strict;word-break:normal;overflow-wrap:normal;text-wrap:pretty}
.letter h2{font-size:20px;line-height:1.8;letter-spacing:.05em}
.letter .eyebrow,.letter-description{font-size:14px;line-height:1.8;letter-spacing:.025em}
.letter-button{font-size:13px;letter-spacing:.025em}
}

/* Japanese editorial type, humanist Latin lettering and clear interface labels. */
:root{--font-editorial:'Shippori Mincho','Yu Mincho','游明朝',serif;--font-latin:Optima,'Belleza',Candara,sans-serif;--font-ui:'Yu Gothic','游ゴシック','Noto Sans JP',sans-serif}
body,.hero h1,.story h2,.story-text,.zen-prelude,.answer-essay,.answer-essay h2,.letter h2,.letter-description,.letter .eyebrow{font-family:var(--font-editorial);font-weight:400}
.brand,.brand-maker,.hero-date,.scroll,.section-mark,.story .zen-name,.answer-toolbar>span,.answer-essay .eyebrow,.location>span,footer{font-family:var(--font-latin);font-weight:400}
nav a,.answer-button,.answer-close,.letter-button,.letter-note,.sound-control,.sound-control button,.sound-control label{font-family:var(--font-ui);font-weight:400}
.story .zen-name{letter-spacing:.25em}

/* Reading links wax from a crescent toward a full moon. */
.moon-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:14px;vertical-align:middle;flex-shrink:0}
.moon-mark svg{width:24px;height:24px;display:block;overflow:visible}
.moon-rim{fill:none;stroke:currentColor;stroke-width:.6;opacity:.25}
.moon-shadow{transform:translateX(var(--moon-start,-4px));transition:transform 2.8s cubic-bezier(.22,.61,.36,1)}
.answer-button:focus-visible .moon-shadow,.answer-button:active .moon-shadow{transform:translateX(-22px)}
@media(hover:hover) and (pointer:fine){.answer-button:hover .moon-shadow{transform:translateX(-22px)}}
@media(hover:none),(pointer:coarse){.moon-shadow{transform:translateX(calc(var(--moon-start,-4px) - var(--moon-arrival,0)*6px));transition:transform 1.8s ease}}
@media(prefers-reduced-motion:reduce){.moon-shadow{transition:none}}

/* Let the illuminated face grow throughout the reading interval. */
.moon-shadow{transform:translateX(calc(var(--moon-start,-4px)*(1 - var(--moon-progress,0)) - 22px*var(--moon-progress,0)));transition:transform .7s ease-out}
@media(hover:none),(pointer:coarse){.moon-shadow{transform:translateX(calc(var(--moon-start,-4px)*(1 - var(--moon-progress,0)) - 22px*var(--moon-progress,0)));transition:transform .7s ease-out}}
@media(hover:hover) and (pointer:fine){.answer-button:hover .moon-shadow{transform:translateX(-22px);transition-duration:2.8s}}
.answer-button:focus-visible .moon-shadow{transform:translateX(-22px)}
@media(prefers-reduced-motion:reduce){.moon-shadow{transition:none}}

/* A compact reading invitation, with one axis for label, moon and hairline. */
.answer-button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;width:fit-content;max-width:100%;min-height:52px;border:0;padding:10px 0 17px;margin-top:32px;line-height:1.8;text-align:left}
.answer-button>span:first-child{font:inherit;margin:0}
.answer-label{display:block;min-width:0;line-break:strict;text-wrap:balance}
.answer-button .moon-mark{margin:0;width:22px;height:22px;flex:0 0 22px}
.answer-button .moon-mark svg{width:22px;height:22px}
.answer-button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.24;transition:opacity 1s ease}
.answer-button:focus-visible::after{opacity:.6}
@media(hover:hover) and (pointer:fine){.answer-button:hover::after{opacity:.6}}
@media(max-width:700px){.answer-button{width:fit-content;max-width:100%;gap:24px;margin-top:34px;padding:10px 0 16px}.answer-button .moon-mark{width:20px;height:20px;flex-basis:20px}.answer-button .moon-mark svg{width:20px;height:20px}}

/* Audio glows once in the hero, then only under a desktop pointer. */
.sound-control,.sound-control:focus-within,.sound-control:hover{background:#11110ee8;color:#e9e5dd;border-color:#8d806650;box-shadow:none}
.sound-control::before,.sound-control:focus-within::before,.sound-control:hover::before{display:none;opacity:0}
.sound-control.sound-intro{animation:sound-welcome 5.5s ease-in-out .8s both}
@keyframes sound-welcome{0%,100%{background:#11110ee8;color:#e9e5dd;border-color:#8d806650;box-shadow:none}35%,50%{background:#fffdf3;color:#302d27;border-color:#fffbea;box-shadow:0 0 32px #fff9dc66,0 0 68px #fff5cd33}}
@media(hover:hover) and (pointer:fine){.sound-control:hover{animation:none;background:#fffdf3;color:#302d27;border-color:#fffbea;box-shadow:0 0 32px #fff9dc66,0 0 68px #fff5cd33}}
@media(prefers-reduced-motion:reduce){.sound-control.sound-intro{animation:none}}

/* Mobile reading invitations sit to the right, with a balanced extended rule. */
@media(max-width:700px){
.answer-button{align-self:flex-end;margin-left:auto;margin-right:0;padding-left:16px;padding-right:16px;max-width:100%;gap:24px}
.answer-button::after{left:0;right:0}
}

/* The moon continues into the reading page, slightly larger than its link. */
.answer-essay .essay-moon{width:32px;height:32px;margin:0 0 30px;color:inherit}
.essay-moon svg{width:32px;height:32px;display:block}
@media(max-width:700px){.answer-essay .essay-moon{width:30px;height:30px;margin-bottom:28px}.essay-moon svg{width:30px;height:30px}}

/* Today's moon also opens the navigation. */
.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:54px;gap:5px;padding:4px;color:var(--paper)}
.menu-moon{display:block;width:28px;height:28px;overflow:visible}
.menu-moon .moon-rim{opacity:.4;stroke-width:.7}
.menu-caption{font-family:var(--font-latin);font-size:8px;line-height:1;letter-spacing:.15em;font-weight:400}
.menu-toggle[aria-expanded=true] .moon-rim{opacity:.9}
@media(max-width:700px){.menu-moon{width:26px;height:26px}}

/* The second reading room uses a quiet grey background and white text. */
#answer-1{background:#555854;color:#f5f3ed}
#answer-1 .answer-toolbar{background:inherit;border-bottom-color:#f5f3ed30}
#answer-1 .answer-essay .eyebrow{color:#dddcd5}
#answer-1 .answer-essay .essay-moon{color:inherit}

/* A barely visible paper/film surface, confined to illuminated areas. */
.story-stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;background:url('assets/paper-grain.svg') repeat;background-size:256px 256px;opacity:.12;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,rgba(0,0,0,var(--paper-left,0)) 0%,rgba(0,0,0,var(--paper-left,0)) 22%,rgba(0,0,0,var(--paper-right,0)) 100%)}
.answer-dialog:not(.dark-essay):not(#answer-1)::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:5;background:url('assets/paper-grain.svg') repeat;background-size:256px 256px;opacity:.12;mix-blend-mode:multiply}
@media(prefers-reduced-motion:reduce){.story-stage::after{mask-image:none}}

/* Experience edition: the same restrained typography, now with a clear invitation. */
.experience-invitation{padding-bottom:100px}
.experience-invitation .letter-inner{max-width:640px;margin-top:90px}
.experience-intro h2{font-size:24px;line-height:1.9;letter-spacing:.065em;margin:32px 0 48px}
.experience-intro .letter-description{line-height:2.1}
.experience-moments{margin:76px auto 92px;font-family:var(--font-editorial);font-size:14px;line-height:2.1;letter-spacing:.045em}
.experience-moments p{margin:0 0 36px}
.experience-details{padding:44px 0;border-top:1px solid #e9e5dd25;border-bottom:1px solid #e9e5dd25}
.experience-invitation h3{font-family:var(--font-editorial);font-size:18px;line-height:1.9;font-weight:400;letter-spacing:.04em;margin:0 0 28px}
.experience-limit{font-size:14px;letter-spacing:.08em;margin-bottom:25px}
.experience-facts{display:flex;justify-content:center;gap:45px;font-family:var(--font-ui);font-size:12px;line-height:1.8;margin:0}
.experience-facts div{display:grid;gap:5px}.experience-facts dt{opacity:.6}.experience-facts dd{margin:0}
.experience-entry{margin-top:90px}.experience-entry .eyebrow{font-family:var(--font-latin);font-size:10px;letter-spacing:.2em;opacity:.6;margin-bottom:27px}
.experience-entry>p:not(.eyebrow):not(.mail-note){font-size:14px;line-height:2;letter-spacing:.035em}
.experience-benefits{list-style:none;padding:25px 0 0;margin:0;line-height:2.1;font-size:13px;letter-spacing:.04em}
.experience-benefits li+li{margin-top:8px}.experience-entry .delivery-note{margin-top:25px;opacity:.7}
.experience-invitation .letter-button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:68px;margin-top:32px;max-width:100%;padding:20px 30px}
.experience-invitation .mail-note{font-family:var(--font-ui);font-size:11px;line-height:1.8;margin-top:22px;opacity:.65}
.registration-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#f8f8f6;color:#242424;overflow:auto;overscroll-behavior:contain;font-family:var(--font-editorial)}
.registration-dialog::backdrop{background:#0b0b0a}
.registration-dialog::after{content:'';position:fixed;inset:0;pointer-events:none;background:url('assets/paper-grain.svg');opacity:.12;mix-blend-mode:multiply}
.registration-toolbar{position:sticky;top:0;z-index:2;background:#f8f8f6;border-bottom:1px solid #24242420;padding:24px 6%;display:flex;justify-content:space-between;align-items:center;gap:18px}
.registration-toolbar>span{font-family:var(--font-latin);font-size:11px;letter-spacing:.15em}
.registration-toolbar button{background:none;border:0;padding:10px;color:inherit;font:12px var(--font-ui);cursor:pointer}
.registration-inner{max-width:560px;margin:auto;padding:65px 28px 90px}
.registration-moon{font-size:30px;display:block;margin-bottom:30px}
.registration-inner .eyebrow{font-size:13px;letter-spacing:.06em}
.registration-inner h2{font-size:23px;font-weight:400;line-height:1.8;margin:18px 0 25px;letter-spacing:.06em}
.registration-lead{font-size:14px;line-height:1.9;margin-bottom:30px}
.connection-note{font:11px/1.9 var(--font-ui);padding:14px 16px;border-left:1px solid #a8a397;color:#68675f;background:#eae8e140;margin:24px 0 34px}
.form-field{display:block;margin:0 0 30px;font:13px/1.8 var(--font-ui)}
.form-field>span{display:block;margin-bottom:10px}small{font-size:10px;margin-left:12px;opacity:.6;font-weight:400}
.form-field input{width:100%;border:1px solid #24242430;border-radius:0;background:#ffffff60;padding:14px 16px;min-height:50px;color:#242424;font:16px var(--font-ui);box-sizing:border-box}
.form-field input::placeholder{color:#8c8a83;font-size:13px}
.registration-dialog input:focus-visible,.registration-dialog button:focus-visible{outline:1px solid #8b7750;outline-offset:4px}
.interest-field{border:0;border-top:1px solid #24242420;padding:25px 0;margin:5px 0 20px;font:12px/1.8 var(--font-ui)}
.interest-field legend{padding-right:10px;font-size:13px}.interest-field label{display:flex;align-items:center;gap:10px;padding:8px 0;min-height:32px}
.registration-dialog input[type=checkbox]{width:16px;height:16px;accent-color:#706b5f;flex-shrink:0}
.consent-field{display:flex;align-items:flex-start;gap:10px;font:11px/1.9 var(--font-ui);margin:24px 0 35px}.consent-field a{color:inherit;text-underline-offset:4px}
.registration-primary{display:block;width:100%;padding:18px 15px;min-height:58px;border:1px solid #24242455;background:transparent;color:inherit;font:13px/1.7 var(--font-ui);cursor:pointer;transition:background .6s}
.registration-primary:hover:not(:disabled){background:#e6e2d8}.registration-primary:disabled{opacity:.4;cursor:not-allowed}
.form-footnote{font:11px/1.8 var(--font-ui);text-align:center;color:#77756c;margin-top:18px}
#registration-confirmation h3{font-size:18px;font-weight:400;margin:30px 0}
#registration-summary{font:13px/1.9 var(--font-ui)}#registration-summary dt{font-size:11px;color:#77756c;margin-top:24px}#registration-summary dd{margin:7px 0 0;overflow-wrap:anywhere}
.registration-edit{display:block;border:0;border-bottom:1px solid #24242440;background:none;color:inherit;font:12px var(--font-ui);padding:12px 0;margin:24px auto;cursor:pointer}
@media(max-width:700px){.experience-invitation .letter-inner{margin-top:65px;max-width:100%}.experience-intro h2{font-size:20px;letter-spacing:.03em;line-height:1.9}.experience-moments{margin:60px 0 70px;font-size:13px;letter-spacing:.02em}.experience-invitation h3{font-size:16px}.experience-details{padding:35px 0}.experience-facts{gap:25px;font-size:11px}.experience-entry{margin-top:65px}.experience-invitation .letter-button{font-size:12px;padding:18px 14px;gap:14px;width:100%;min-height:64px}.experience-invitation .letter-button .button-line{width:20px}.experience-entry>p:not(.eyebrow):not(.mail-note){font-size:13px}.registration-inner{padding:45px 7% 65px}.registration-inner h2{font-size:20px}.registration-toolbar{padding:18px 5%}.registration-toolbar>span{font-size:9px;letter-spacing:.1em}}
.experience-invitation .letter-button{background:rgba(255,253,243,calc(var(--invitation-glow,0)*.94));color:rgb(calc(238 - var(--invitation-glow,0)*190),calc(233 - var(--invitation-glow,0)*188),calc(225 - var(--invitation-glow,0)*186))}
.experience-invitation .letter-button .button-line{background:currentColor}
@media(hover:hover) and (pointer:fine){.experience-invitation .letter-button{background:transparent;color:#eee9e1}.experience-invitation .letter-button:hover{background:rgba(255,253,243,.94);color:#302d27}}
.experience-invitation .letter-button:focus-visible{background:#fffdf3;color:#302d27}

.form-field textarea{width:100%;border:1px solid #24242430;border-radius:0;background:#ffffff60;padding:14px 16px;color:#242424;font:16px/1.8 var(--font-ui);resize:vertical;box-sizing:border-box}.form-field textarea::placeholder{font-size:13px;color:#8c8a83}#send-registration-mail{text-align:center}.registration-dialog textarea:focus-visible{outline:1px solid #8b7750;outline-offset:4px}

.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}#registration-status{font:12px/1.9 var(--font-ui);color:#68675f;margin-top:20px}#registration-success{margin-top:30px;padding-top:20px;border-top:1px solid #24242425}#registration-success p{font-size:14px;line-height:2}.registration-primary:disabled{cursor:wait;opacity:.55}.registration-toolbar button:disabled{opacity:.4}
.registration-dialog [hidden]{display:none!important}
