/* self-hosted variable fonts: one file per family/subset covers the full
   weight range — the range descriptor lets the browser dial the axis */
@font-face{
  font-family:'Yuji Syuku';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/yuji-syuku-400-k2.woff2') format('woff2');
  unicode-range:U+2d9, U+21d4, U+301d, U+515c, U+52fe, U+5420, U+5750, U+5766, U+5954, U+5b95, U+5f8a, U+5f98, U+620c, U+621f, U+641c, U+66d9, U+676d, U+6775, U+67f5, U+694a, U+6a02, U+6a3a, U+6a80, U+6c23, U+6c72, U+6dcb, U+6faa, U+707c, U+71c8, U+7422, U+74e2, U+7791, U+7825, U+7a14, U+7a1c, U+7c95, U+7fc1, U+82a5, U+82db, U+8304, U+853d, U+8cd3, U+8de8, U+8f0c, U+8f3f, U+9091, U+91c7, U+929a, U+98af, U+9913;
}
@font-face{
  font-family:'Noto Serif JP';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('assets/fonts/noto-serif-jp-400-k2.woff2') format('woff2');
  unicode-range:U+2d9, U+21d4, U+301d, U+515c, U+52fe, U+5420, U+5750, U+5766, U+5954, U+5b95, U+5f8a, U+5f98, U+620c, U+621f, U+641c, U+66d9, U+676d, U+6775, U+67f5, U+694a, U+6a02, U+6a3a, U+6a80, U+6c23, U+6c72, U+6dcb, U+6faa, U+707c, U+71c8, U+7422, U+74e2, U+7791, U+7825, U+7a14, U+7a1c, U+7c95, U+7fc1, U+82a5, U+82db, U+8304, U+853d, U+8cd3, U+8de8, U+8f0c, U+8f3f, U+9091, U+91c7, U+929a, U+98af, U+9913;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/cormorant-macron.woff2') format('woff2');
  unicode-range:U+0100-017F;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/cormorant-macron-i.woff2') format('woff2');
  unicode-range:U+0100-017F;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/cormorant-garamond-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/cormorant-garamond-400i.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Noto Serif JP';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('assets/fonts/noto-serif-jp-400.woff2') format('woff2');
  unicode-range:U+971d, U+9721-9724, U+9728, U+972a, U+9730-9731, U+9733, U+9736, U+9738-9739, U+973b, U+973d-973e, U+9741-9744, U+9746-974a, U+974d-974f, U+9751, U+9755, U+9757-9758, U+975a-975c, U+9760-9761, U+9763-9764, U+9766-9768, U+976a-976b, U+976e, U+9771, U+9773, U+9776-977d, U+977f-9781, U+9785-9786, U+9789, U+978b, U+978f-9790, U+9795-9797, U+9799-979a, U+979c, U+979e-97a0, U+97a2-97a3, U+97a6, U+97a8, U+97ab-97ac, U+97ae, U+97b1-97b6, U+97b8-97ba, U+97bc, U+97be-97bf, U+97c1, U+97c3-97ce, U+97d0-97d1, U+97d4, U+97d7-97d9, U+97db-97de, U+97e0-97e1, U+97e4, U+97e6, U+97ed-97ef, U+97f1-97f2, U+97f4-97f8, U+97fa, U+9804, U+9807, U+980a, U+980c-980f, U+9814, U+9816-9817, U+9819-981a, U+981c, U+981e, U+9820-9821, U+9823-9826, U+982b, U+982e-9830, U+9832-9835, U+9837, U+9839, U+983d-983e, U+9844, U+9846-9847, U+984a-984b, U+984f, U+9851-9853, U+9856-9857, U+9859-985b, U+9862-9863, U+9865-9866, U+986a-986c, U+986f-9871, U+9873-9875, U+98aa-98ab, U+98ad-98ae, U+98b0-98b1, U+98b4, U+98b6-98b8, U+98ba-98bc, U+98bf, U+98c2-98c8, U+98cb-98cc, U+98ce, U+98dc, U+98de, U+98e0-98e1, U+98e3, U+98e5-98e7, U+98e9-98ea;
}
@font-face{
  font-family:'Yuji Syuku';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/yuji-syuku-400.woff2') format('woff2');
  unicode-range:U+971d, U+9721-9724, U+9728, U+972a, U+9730-9731, U+9733, U+9736, U+9738-9739, U+973b, U+973d-973e, U+9741-9744, U+9746-974a, U+974d-974f, U+9751, U+9755, U+9757-9758, U+975a-975c, U+9760-9761, U+9763-9764, U+9766-9768, U+976a-976b, U+976e, U+9771, U+9773, U+9776-977d, U+977f-9781, U+9785-9786, U+9789, U+978b, U+978f-9790, U+9795-9797, U+9799-979a, U+979c, U+979e-97a0, U+97a2-97a3, U+97a6, U+97a8, U+97ab-97ac, U+97ae, U+97b1-97b6, U+97b8-97ba, U+97bc, U+97be-97bf, U+97c1, U+97c3-97ce, U+97d0-97d1, U+97d4, U+97d7-97d9, U+97db-97de, U+97e0-97e1, U+97e4, U+97e6, U+97ed-97ef, U+97f1-97f2, U+97f4-97f8, U+97fa, U+9804, U+9807, U+980a, U+980c-980f, U+9814, U+9816-9817, U+9819-981a, U+981c, U+981e, U+9820-9821, U+9823-9826, U+982b, U+982e-9830, U+9832-9835, U+9837, U+9839, U+983d-983e, U+9844, U+9846-9847, U+984a-984b, U+984f, U+9851-9853, U+9856-9857, U+9859-985b, U+9862-9863, U+9865-9866, U+986a-986c, U+986f-9871, U+9873-9875, U+98aa-98ab, U+98ad-98ae, U+98b0-98b1, U+98b4, U+98b6-98b8, U+98ba-98bc, U+98bf, U+98c2-98c8, U+98cb-98cc, U+98ce, U+98dc, U+98de, U+98e0-98e1, U+98e3, U+98e5-98e7, U+98e9-98ea;
}
:root{
  --paper:#f2eee3;
  --paper-deep:#e9e2d2;
  --ink:#1c1a16;
  --ink-soft:#4a463c;
  --ink-faint:#655f50;
  --vermilion:#a83c26;
  --line:#d8d0bc;
}
*{margin:0;padding:0;box-sizing:border-box}
/* keep load-time transforms (tracking titles, blooms) from ever widening
   the page — on mobile Safari an early horizontal overflow makes the whole
   site sit offset until the animations land and it snaps back to center */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:19px;
  line-height:1.75;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.46 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.jp{font-family:'Noto Serif JP',serif}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;justify-content:center;align-items:center;
  padding:1.1rem 2.2rem;
  background:var(--paper);
}
.nav-links{display:flex;gap:2rem;list-style:none;font-size:1.02rem;letter-spacing:.06em;flex-wrap:wrap;justify-content:center}
.nav-links a{color:var(--ink-soft);text-decoration:none;transition:color .3s}
.nav-links a:hover{color:var(--vermilion)}
.nav-links a.active{color:var(--vermilion)}

.hamburger{
  display:none;position:fixed;top:1rem;right:1.3rem;z-index:70;
  background:none;border:0;cursor:pointer;padding:.7rem;
}
.hamburger span{
  display:block;width:26px;height:1.5px;background:var(--ink);
  margin:7px 0;transition:transform .35s ease,opacity .35s ease;
}
.hamburger.open span:first-child{transform:translateY(4.25px) rotate(45deg)}
.hamburger.open span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

.menu-overlay{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;
}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-overlay a{
  font-size:2rem;color:var(--ink);text-decoration:none;letter-spacing:.04em;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease,color .3s;
}
.menu-overlay.open a{opacity:1;transform:none}
.menu-overlay.open a:nth-child(1){transition-delay:.06s}
.menu-overlay.open a:nth-child(2){transition-delay:.12s}
.menu-overlay.open a:nth-child(3){transition-delay:.18s}
.menu-overlay.open a:nth-child(4){transition-delay:.24s}
.menu-overlay.open a:nth-child(5){transition-delay:.30s}
.menu-overlay a:hover{color:var(--vermilion)}
.menu-overlay .fine{margin-top:2.5rem;font-size:.9rem;color:var(--ink-faint);letter-spacing:.08em;opacity:0;transition:opacity .5s ease .45s}
.menu-overlay.open .fine{opacity:1}

.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;padding:5.5rem 2rem 3.5rem;text-align:center;
}
.hero-quote{
  font-style:italic;font-size:clamp(1.08rem,2vw,1.3rem);line-height:1.58;
  max-width:880px;color:var(--ink-soft);margin-top:1.9rem;
  padding:0 1rem;position:relative;
}
.hero-quote cite{
  display:block;margin-top:.9rem;font-style:normal;
  font-size:.95rem;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase;
}
.hero{--tree:min(97vw,680px,calc(100vh - 350px));--tree:min(97vw,680px,max(260px,calc(100svh - 350px)))}
.tree-wrap{width:var(--tree);aspect-ratio:1/1;margin:0 0 .9rem}
.hero-text{margin-top:calc(var(--tree,600px) * -0.07)}
/* guard the first frame: the svg's inner animations may paint one unstyled
   frame (full tree) before their fills apply. A fade-in can't hide that —
   the unstyled tree just fades in with the wrap. Hold the wrap fully
   hidden for a beat instead; the seed's own fade-in is the gentle opening */
.js .tree-wrap{visibility:hidden;animation:wrapShow .01s ease-out .18s forwards}
@keyframes wrapShow{to{visibility:visible}}
/* the young tree holds at 38% scale briefly — the animation file's own
   stylesheet keeps it hidden until growth truly begins (growIn lives in
   the SVG, so the tree's gating and growth share the file's one timeline;
   there is no restated duration here to keep in sync) */
.hero h1{
  font-size:clamp(1.75rem,4.2vw,2.6rem);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;line-height:1.3;
}
.hero .sub{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  margin-top:1.2rem;color:var(--vermilion);letter-spacing:.3em;font-size:1.05rem;
  text-transform:uppercase;font-weight:500;white-space:nowrap;
}
.hero .sub .sub-rule{width:min(56px,13vw);height:auto;flex-shrink:0}

.page-head{padding:9rem 2rem 0;text-align:center;max-width:1060px;margin:0 auto}
.page-head .lede{max-width:36rem;margin:1.8rem auto 0;font-size:1.12rem;line-height:1.75;color:var(--ink-soft)}
.mail-mark,.treat-mark,.coin-mark,.shield-mark{display:flex;justify-content:center;margin-bottom:1.8rem}
.rates{max-width:40rem;margin:0 auto;padding:0 0 1rem}
.kanji-mark{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:'Yuji Syuku','Noto Serif JP',serif;
  font-size:3rem;letter-spacing:.22em;line-height:1;
  color:var(--ink);opacity:.88;margin:0 auto 2rem;
}
.page-head h1{
  font-size:clamp(1.65rem,3.4vw,2.25rem);font-weight:500;letter-spacing:.06em;line-height:1.3;
}
/* router moves focus to headings on view change; they are never tab stops, so no outline */
.view h1:focus{outline:none}
.page-body{padding:4rem 2rem 8rem;max-width:660px;margin:0 auto}

.prose{max-width:660px}
.prose p{margin-bottom:1.4rem;color:var(--ink-soft)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--vermilion);text-underline-offset:3px}
.prose a:hover{color:var(--vermilion)}
.prose p.lead{font-size:1.3rem;color:var(--ink);font-style:italic}
.prose em{font-style:italic}

.prose h3.subhead{font-size:1.3rem;font-weight:500;letter-spacing:.05em;margin:3.2rem 0 1.4rem;color:var(--ink)}
.about-photo{display:flex;justify-content:center;margin:0 0 2.6rem}
.about-photo img{width:min(300px,64vw);height:auto;display:block}
.view[data-view="contact"] .page-body{padding-top:1.4rem}
.contact-rule{display:flex;justify-content:center}
.contact-rule svg{width:min(64px,15vw);height:auto}
.contact-lines{margin-top:1.4rem;display:flex;flex-direction:column;gap:2rem;align-items:center;text-align:center}
.contact-line{display:flex;flex-direction:column;gap:.4rem;align-items:center}
.contact-label{font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}
.contact-lines a{
  color:var(--ink);text-decoration:none;font-size:1.18rem;font-weight:500;letter-spacing:.03em;
  padding:.1rem 0;transition:color .3s;
}
.contact-lines a:hover{color:var(--vermilion)}

.rates-subhead{font-size:1.5rem;font-weight:500;letter-spacing:.04em;margin:0 0 1.4rem;color:var(--ink)}
.rates-subhead span{display:block;font-size:1.02rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:.5rem}
.rate-list{list-style:none;margin:0 0 4rem;padding:0}
.rate-list li{margin:0 0 1.5rem}
.rate-row{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.rate-name{font-size:1.3rem;letter-spacing:.02em}
.rate-row .dots{flex:1;border-bottom:2px dotted var(--ink-faint);opacity:.5;transform:translateY(-5px);min-width:1.5rem}
.rate-price{font-size:1.3rem;color:var(--vermilion);white-space:nowrap}
.rate-note{font-size:1rem;color:var(--ink-soft);font-style:italic;margin-top:.25rem}
.rates-cta{text-align:center;font-size:1.1rem;color:var(--ink-soft);margin:1rem 0 3rem}
.rates-cta a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--vermilion);text-underline-offset:4px}
.rates-cta a:hover{color:var(--vermilion)}

.reveal{transition:opacity .8s ease,transform .8s ease;transition-delay:calc(var(--rd,0s) + var(--rvd,0s))}
.js .reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none}

.site-nav{opacity:0;animation:bloomIn 1.2s ease-out .3s forwards}
.hero h1,.hero .sub{opacity:0;animation:riseIn 1s cubic-bezier(.22,.8,.3,1) forwards}
.hero h1{animation-delay:1.4s}
.hero .sub{animation-delay:2s}
.hero-quote{opacity:0;animation:riseIn 1.1s cubic-bezier(.22,.8,.3,1) 2.8s forwards}
.page-head h1 .chi{display:inline-block;animation:trackChar 1.2s cubic-bezier(.2,.7,.25,1) both;animation-delay:calc(.35s + var(--i)*.02s)}
.page-head .lede{opacity:0;animation:riseIn 1s cubic-bezier(.22,.8,.3,1) .8s both}
/* images bloom into focus with the same motion as the titles */
@keyframes focusBloom{
  from{opacity:0;filter:blur(14px);transform:scale(1.07)}
  55%{opacity:1;filter:blur(3px)}
  to{opacity:1;filter:blur(0);transform:scale(1)}
}
/* marks: opacity settles back to each mark's own base (kanji is muted at .88) */
@keyframes kanjiBloom{
  from{opacity:0;filter:blur(14px);transform:scale(1.07)}
  55%{opacity:.88;filter:blur(3px)}
  to{opacity:.88;filter:blur(0);transform:scale(1)}
}
.page-head .mail-mark,.page-head .treat-mark,.page-head .coin-mark,.page-head .shield-mark{opacity:0;animation:focusBloom 1.1s cubic-bezier(.2,.7,.25,1) .3s both}
.page-head .kanji-mark{opacity:0;animation:kanjiBloom 1.1s cubic-bezier(.2,.7,.25,1) .3s both}
.js .bloom-img{opacity:0;filter:blur(14px);transform:scale(1.06)}
.bloom-img.in{animation:focusBloom 1.4s cubic-bezier(.2,.7,.25,1) both}
@keyframes bloomIn{to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes trackChar{
  from{opacity:0;transform:translateX(calc((var(--i) - (var(--n) - 1)/2)*.5em));filter:blur(12px)}
  60%{opacity:1;filter:blur(2px)}
  to{opacity:1;transform:translateX(0);filter:blur(0)}
}
/* home boot: blank paper, the seed grows, then the words bloom around the open tree */
.js.boot:not(.settled) .site-nav{animation:bloomIn 1.6s ease-out 3.8s both}
.js.boot:not(.settled) .hamburger{opacity:0;animation:bloomIn 1.6s ease-out 3.8s both}
/* returning to home: the opening already played — settle in with a gentle fade */
.js.settled .tree-wrap{visibility:visible;animation:settleFade .9s ease-out both}
.js.settled .hero-text{animation:none;opacity:1}
.js.settled .hero h1{animation:none;opacity:1}
.js.settled .hero h1 .wi{display:inline-block}
.js.settled .hero h1 .chi{animation:none;opacity:1;transform:none;filter:none}
.js.settled .hero .sub{animation:riseIn 1s cubic-bezier(.22,.8,.3,1) .15s both}
.js.settled .hero-quote{animation:riseIn 1.1s cubic-bezier(.22,.8,.3,1) .35s both}
.js.settled .site-nav,
.js.settled .hamburger{animation:settleFade 1s ease-out .3s both}
@keyframes settleFade{from{opacity:0}to{opacity:1}}
.js.boot .hero h1{animation:none;opacity:1}
.js.boot .hero h1 .w{display:inline-block;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.js.boot:not(.settled) .hero h1 .wi{display:inline-block}
.js.boot:not(.settled) .hero h1 .chi{display:inline-block;animation:trackChar 1.5s cubic-bezier(.2,.7,.25,1) both;animation-delay:calc(3.2s + var(--i)*.025s)}
.js.boot:not(.settled) .hero .sub{animation:riseIn 1.1s cubic-bezier(.22,.8,.3,1) 3.8s both}
.js.boot:not(.settled) .hero-quote{animation:riseIn 1.2s cubic-bezier(.22,.8,.3,1) 4.4s both}
@media (prefers-reduced-motion:reduce){
  .site-nav,.hamburger,.tree-wrap,.hero h1,.hero h1 .chi,.hero .sub,.hero-quote,.hero-text,.page-head .lede,.page-head h1 .chi,.page-head .mail-mark,.page-head .treat-mark,.page-head .kanji-mark,.page-head .coin-mark,.page-head .shield-mark,.bloom-img{animation:none;opacity:1;visibility:visible;transform:none;filter:none;-webkit-mask:none;mask:none;clip-path:none}
  .reveal{transition:none;opacity:1;transform:none}
  .menu-overlay,.menu-overlay a,.menu-overlay .fine,.hamburger span{transition:none}
}

@media(max-width:760px){
  .site-nav{display:none}
  .nav-links{display:none}
  .hamburger{display:block}
  .hero{padding-top:2.5rem}
  .page-head{padding-top:7rem}
  .page-body{padding:3rem 1.4rem 6rem}
  .hero-quote{font-size:1.13rem;line-height:1.55;padding:0 .4rem}
  .contact-lines a{font-size:1.12rem}
}

.js .view{display:none}
.view.active{display:block}.tree-anim{position:relative;width:100%;aspect-ratio:1/1;color:var(--ink)}
.tree-anim img{position:absolute;inset:0;width:100%;height:100%;display:block}
.js .tree-anim img{visibility:hidden}