@font-face{font-family:Spectral;src:url("assets/fonts/spectral-light.ttf") format("truetype");font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Spectral;src:url("assets/fonts/spectral-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
*{box-sizing:border-box}
html{background:#151b18;color:#fff}
body{margin:0;font-family:Spectral,Georgia,serif;font-weight:300;-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}h1,h2{font-weight:300}
.page{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:clamp(80px,20svh,280px) clamp(28px,5.55vw,142px) clamp(25px,3svh,42px)}
.photograph{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,16,12,.16),rgba(8,16,12,.48) 25%,rgba(8,16,12,.72) 45%,rgba(8,16,12,.76)),url("assets/temple.jpg") center center/cover no-repeat}
.content{width:100%;max-width:1440px;margin-top:auto}
h1{font-size:clamp(32px,2.5vw,48px);line-height:1.3;letter-spacing:-.035em}
main{padding-top:clamp(20px,2.2svh,32px)}
h2{font-size:clamp(32px,3.1vw,64px);line-height:1.15;letter-spacing:-.035em}
h2 span{display:inline-block}
.thought{font-size:clamp(21px,1.6vw,28px);line-height:1.5;letter-spacing:-.015em;margin-top:16px}
.mobile-break{display:none}
.introduction{max-width:100%;margin-top:clamp(22px,2.4svh,32px);font-size:clamp(17px,1.18vw,22px);line-height:1.65}
.introduction p+p{margin-top:14px}
.keep-together{white-space:nowrap}
.coming{font-size:clamp(17px,1.18vw,22px);line-height:1.65;margin-top:20px}
.signature{font-size:clamp(19px,1.32vw,24px);letter-spacing:.13em;margin-top:18px;line-height:1.5}
footer{margin-top:clamp(48px,7svh,90px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font-size:clamp(14px,1vw,18px);line-height:1.7;letter-spacing:.015em}
footer>p:first-child{max-width:calc(100% - 130px)}footer span{display:inline-block}footer [lang=ja]{font-family:serif;font-size:.93em}.location{font-size:clamp(15px,1.05vw,19px);white-space:nowrap}
/* The content remains in normal flow; short screens scroll without overlap. */
@media(min-width:651px) and (max-width:1100px){.page{padding-top:clamp(96px,23svh,250px)}.content{max-width:100%}footer{gap:20px}}
@media(max-width:650px){
 .page{padding:29px 26px 25px}
 .content{margin-top:0}
 .photograph{background:linear-gradient(180deg,rgba(8,16,12,.45) 0%,rgba(8,16,12,.08) 20%,rgba(21,27,24,.1) 32%,rgba(21,27,24,.83) 59%,#151b18 83%),url("assets/temple.jpg") 48% 0/auto 530px no-repeat;background-color:#151b18;height:650px}
 h1{font-size:29px}
 main{padding-top:285px}
 h2{font-size:39px;line-height:1.12}h2 span{display:block}
 .thought{font-size:21px;line-height:1.5;margin-top:27px}.mobile-break{display:block}
 .introduction{font-size:16px;line-height:1.75;margin-top:31px}.introduction p+p{margin-top:20px}
 .coming{font-size:16px;line-height:1.65;margin-top:31px}
 .signature{font-size:18px;margin-top:28px}
 footer{display:block;margin-top:57px;font-size:14px;line-height:1.75;max-width:100%}
 footer>p:first-child{max-width:340px}footer [lang=ja]{font-size:13px}.location{font-size:15px;margin-top:17px}
}

/* Preserve the previous wordmark line box and the supplied SVG proportions. */
.brand{height:1.3em}
.brand img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center}