/* Numachan craft layer: motion, texture and tactile detail on top of editorial.css.
   Every hidden/initial state is gated behind a class that JS adds (.aw / .split / .ir),
   so the page stays fully readable without JavaScript or with reduced motion. */

:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.76,0,.2,1);--red-deep:#7d2d1c}

/* ---------- Film grain (static, very light) ---------- */
.aw body:after{content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .1  0 0 0 0 .07  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- Intro curtain ---------- */
.intro{display:none}
.aw:not(.no-intro) .intro{display:block;position:fixed;inset:0;z-index:1000;pointer-events:none;animation:introGone 0s linear 2.2s forwards}
@keyframes introGone{to{visibility:hidden}}
.intro-panel{position:absolute;inset:0;border-radius:0 0 50% 50%/0 0 9vw 9vw;will-change:transform}
.intro-panel.a{background:var(--red);animation:curtain 1.05s var(--ease-io) 1.14s forwards}
.intro-panel.b{background:var(--paper);display:grid;place-items:center;align-content:center;gap:26px;animation:curtain 1.05s var(--ease-io) 1s forwards}
@keyframes curtain{to{transform:translateY(-112%)}}
.intro-mark{position:relative;width:96px;height:96px;display:grid;place-items:center;font-family:var(--serif);font-size:50px;color:var(--brown);transform:rotate(-7deg)}
.intro-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.intro-mark circle{fill:none;stroke:var(--brown);stroke-width:1.5;stroke-dasharray:302;stroke-dashoffset:302;animation:draw .85s var(--ease-out) .12s forwards}
.intro-mark b{font-weight:600;opacity:0;animation:fadeUp .6s var(--ease-out) .5s forwards}
.intro-name{font-family:var(--serif);font-size:15px;letter-spacing:.42em;color:var(--brown);padding-left:.42em;opacity:0;animation:fadeUp .7s var(--ease-out) .65s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Header ---------- */
.aw .header{transition:transform .7s var(--ease-out)}
.aw:not(.hero-go) .header{transform:translateY(-100%)}
.aw .header.hdr-hide{transform:translateY(-100%)}
.aw .nav a:after{display:none}
.aw .nav a{overflow:hidden;line-height:1.7;padding:2px 0}
.nav .rl{position:relative;display:block;transition:transform .55s var(--ease-out)}
.nav .rl:after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--red)}
.nav a:hover .rl,.nav a:focus-visible .rl{transform:translateY(-100%)}
.nav a:before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.nav a.on:before{transform:scaleX(1)}

/* ---------- Hero choreography ---------- */
.aw .hero-bg{transition:clip-path 1.5s var(--ease-io)}
.aw:not(.hero-go) .hero-bg{clip-path:inset(0 0 0 100%)}
.aw.hero-go .hero-bg{clip-path:inset(0)}
.aw .hero-bg img{animation:none;scale:1.1;translate:calc(var(--mx,0)*-1.4%) var(--py,0%);transition:transform 2.4s var(--ease-out) .1s}
.aw:not(.hero-go) .hero-bg img{transform:scale(1.18)}
.aw.hero-go .hero-bg img{transform:none}

.aw .hero h1.reveal{opacity:1;transform:none;transition:none}
.aw .hero h1 .ln{display:block;overflow:hidden;padding:.12em 0 .16em;margin:-.12em 0 -.16em}
.aw .hero h1 .ch{display:inline-block;transform:translateY(118%);transition:transform 1.15s var(--ease-out);transition-delay:calc(var(--c)*.05s + .25s)}
.aw.hero-go .hero h1 .ch{transform:none}

.aw .hero .reveal:not(h1){transition:opacity .9s ease,transform 1.1s var(--ease-out)}
.aw:not(.hero-go) .hero .reveal:not(h1){opacity:0;transform:translateY(26px)}
.aw.hero-go .hero .reveal:not(h1){opacity:1;transform:none}
.aw.hero-go .hero .eyebrow{transition-delay:.1s}
.aw.hero-go .hero-lead{transition-delay:.85s}
.aw.hero-go .hero .actions{transition-delay:1s}
.aw.hero-go .hero-card{transition-delay:1.25s}
.aw .scroll-cue{opacity:0;transition:opacity 1s ease 1.6s}
.aw.hero-go .scroll-cue{opacity:1}

/* ---------- Line-mask headings ---------- */
.split .ln{display:block;overflow:hidden;padding:.1em 0 .16em;margin:-.1em 0 -.16em}
.split .ln-in{display:block;transform:translateY(112%);transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--i)*.11s)}
.split.sp-in .ln-in{transform:none}
.split.reveal,.split.reveal.in{opacity:1;transform:none;transition:none}
.split small{opacity:0;transform:translateY(10px);transition:opacity .9s ease .35s,transform .9s var(--ease-out) .35s}
.split.sp-in small{opacity:1;transform:none}

/* section number rule draws itself */
.aw .no:before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .15s}
.aw .no.in:before{transform:none}

/* ---------- Image reveals + parallax ---------- */
.ir{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease-io);transition-delay:var(--d,0s)}
.ir.ir-in{clip-path:inset(0)}
.ir img{scale:1.3;translate:0 var(--py,0%);transition:scale 1.8s var(--ease-out);transition-delay:var(--d,0s)}
.ir.ir-in img{scale:1.12}
.ir.ir-in:hover img,.ir.ir-in:focus-within img{scale:1.18;transition-delay:0s;transition-duration:1.1s}
.ir img,.ir:hover img{transform:none!important}
.ir.reveal,.ir.reveal.in{opacity:1;transform:none}
.photo-strip figure.ir:nth-child(2){transform:translateY(52px)}

/* ---------- Japanese line breaking: break at phrase boundaries, never mid-word ---------- */
h1,h2,h3,.btn,.hero-lead,.quote,.use-copy p,.reason-card p,.voice-card p,.faq-item p,.story p,.space-text p,.final p{word-break:auto-phrase;line-break:strict}
h1,h2,h3,.quote{text-wrap:balance}
p,.faq-item p{text-wrap:pretty}

/* ---------- Scroll-lit quote + hero fade-away ---------- */
.sc{opacity:.2;transition:opacity .45s ease}
.sc.lit{opacity:1}
.aw .hero-copy{translate:0 calc(var(--hs,0)*-70px);opacity:calc(1 - var(--hs,0)*.9)}

/* ---------- Marquee band ---------- */
.intro-band{display:block;padding:0;overflow:hidden;min-height:0}
.mq-track{display:flex;align-items:center;width:max-content;min-height:106px;will-change:transform}
.mq-i{flex:none;font-family:var(--serif);font-size:clamp(34px,4.6vw,66px);line-height:1;letter-spacing:-.02em;padding-block:.28em .22em;white-space:nowrap}
.mq-i.sm{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.28em}
.mq-i.out{color:transparent;-webkit-text-stroke:1.2px rgba(247,242,232,.85)}
.mq-d{flex:none;width:11px;height:11px;margin-inline:clamp(26px,3.6vw,56px);border-radius:50%;background:var(--paper);opacity:.5}

/* ---------- Buttons: fill sweep + magnetic ---------- */
.aw .btn{overflow:hidden;--sw:var(--brown);
  background-image:linear-gradient(var(--sw),var(--sw))!important;background-repeat:no-repeat!important;background-position:0 100%!important;background-size:100% 0!important;
  transition:background-size .55s var(--ease-io),color .3s ease .05s,border-color .3s ease,translate .6s var(--ease-out)}
.aw .btn.primary{--sw:var(--red-deep)}
.aw .btn:hover,.aw .btn:focus-visible{background-size:100% 100%!important;color:#fff!important;border-color:var(--sw);transform:none}
.aw .btn span:last-child{transition:translate .45s var(--ease-out)}
.aw .btn:hover span:last-child{translate:5px -3px}
.aw .reserve{overflow:hidden}

/* ---------- Cards, FAQ, story micro-interactions ---------- */
.reason-card h3{transition:transform .5s var(--ease-out)}
.reason-card:hover h3{transform:translateX(8px)}
.reason-card .reason-num{display:inline-block;transition:transform .5s var(--ease-out)}
.reason-card:hover .reason-num{transform:translateY(-4px)}
.voice-card b{display:inline-block;transition:transform .5s var(--ease-out)}
.voice-card:hover b{transform:translateX(8px)}
.voice-card:before{transition:transform .5s var(--ease-out)}
.voice-card:hover:before{transform:scale(1.6)}
.faq-item{position:relative;transition:padding-left .5s var(--ease-out)}
.faq-item:hover{padding-left:12px}
.faq-item h3{transition:color .3s ease}
.faq-item:hover h3{color:var(--red)}

/* ---------- Final CTA ---------- */
.final:before{translate:0 var(--wy,0px);will-change:transform}

/* ---------- Custom cursor (fine pointers only) ---------- */
.cur{position:fixed;left:0;top:0;z-index:2000;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(166,63,42,.75);border-radius:50%;pointer-events:none;opacity:0;
  transition:opacity .3s ease,width .4s var(--ease-out),height .4s var(--ease-out),margin .4s var(--ease-out),background-color .3s ease,border-color .3s ease}
.cur.on{opacity:1}
.cur.link{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(166,63,42,.06)}
.cur.img{width:92px;height:92px;margin:-46px 0 0 -46px;border-color:rgba(255,248,237,.9);background:rgba(255,248,237,.1)}
.cur.hide{opacity:0}
.cur:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--red);transition:opacity .3s}
.cur.link:after,.cur.img:after{opacity:0}

@media(max-width:620px){
  .intro-panel{border-radius:0 0 50% 50%/0 0 14vw 14vw}
  .mq-track{min-height:68px}
  .mq-i{font-size:34px}
  .mq-i.sm{font-size:10px;letter-spacing:.18em}
  .mq-d{width:8px;height:8px;margin-inline:22px}
}
@media(prefers-reduced-motion:reduce){
  .aw .hero-bg,.aw .hero-bg img,.aw .header{transition:none!important}
  .aw:not(.hero-go) .hero-bg{clip-path:none}
  .aw:not(.hero-go) .hero-bg img{transform:none}
  .aw:not(.hero-go) .header{transform:none}
  .aw:not(.hero-go) .hero .reveal:not(h1){opacity:1;transform:none}
  .aw .hero h1 .ch{transform:none;transition:none}
  .aw .scroll-cue{opacity:1;transition:none}
  .ir,.ir img{clip-path:none;scale:1.02;transition:none}
  .split .ln-in{transform:none;transition:none}.split small{opacity:1;transform:none;transition:none}
  .aw .btn{transition:none}
  .aw .hero-copy{translate:none;opacity:1}
}
/* ---------- Typographic fixes: keep every heading on its intended lines ---------- */
.story h2{font-size:clamp(32px,3.7vw,56px);line-height:1.42}
@media(max-width:620px){
  .story h2{font-size:clamp(28px,8.6vw,40px)}
  .final h2{font-size:clamp(36px,11.6vw,72px);line-height:1.3}
}
@media(max-width:620px){
  .hero-bg{height:51%}
  .hero:after{height:52%}
}
@media(max-width:390px){
  .hero-bg{height:49%}
  .hero:after{height:50%}
}
/* ---------- Menu links on dark section ---------- */
.menu-links{margin-top:clamp(28px,3vw,44px)}
.menu .btn{--sw:var(--red);background-color:var(--paper);color:var(--brown);border-color:var(--paper)}
.menu .btn.primary{--sw:var(--red-deep);background-color:var(--red);color:#fff;border-color:var(--red)}
@media(max-width:620px){.menu-links{display:grid;grid-template-columns:1fr;gap:8px}}
.menu-note{margin:18px 0 0;font-size:15px;color:#f0dcca}
.menu-note a{margin-left:10px;color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px;font-weight:700;letter-spacing:.04em}