/* ==========================================================================
   Kami No Kan Dojo — foglio di stile condiviso da tutte le pagine
   Sumi (nero inchiostro) · Washi (carta) · Oro del logo · Shu (vermiglio)
   ========================================================================== */

.knk{
  --sumi:#0d0c0a; --sumi-2:#141210; --sumi-3:#1d1a16;
  --washi:#ece5d6; --muted:#b0a898; --line:rgba(236,229,214,.14);
  --oro:#cda44c; --shu:#c8402a;
  --serif:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
  --sans:"Zen Kaku Gothic New","Yu Gothic","Hiragino Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5.5vw,80px);
  position:relative; overflow-x:clip;
  background:var(--sumi); color:var(--washi);
  font-family:var(--sans); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
:where(.knk) *,:where(.knk) *::before,:where(.knk) *::after{box-sizing:border-box}
:where(.knk) :is(h1,h2,h3,p,figure,blockquote,ul,dl,dd){margin:0;padding:0}
:where(.knk) ul{list-style:none}
:where(.knk) img{display:block;max-width:100%}
:where(.knk) a{color:inherit;text-decoration:none}
:where(.knk) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.knk :focus-visible{outline:2px solid var(--oro);outline-offset:4px}

/* ---------- tipografia ---------- */
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--oro)}
.eyebrow::before{content:"";flex:none;width:36px;height:1px;background:currentColor}
.eyebrow--c{justify-content:center}
.display{font-family:var(--serif);font-weight:500;font-size:clamp(46px,7.4vw,112px);line-height:1.04;letter-spacing:-.01em}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,66px);line-height:1.12}
.h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.3vw,34px);line-height:1.22}
.lead{font-family:var(--serif);font-size:clamp(20px,1.7vw,25px);line-height:1.6;text-wrap:pretty}
.txt{color:var(--muted);max-width:62ch;text-wrap:pretty}
.txt + .txt{margin-top:1.1em}
.oro{color:var(--oro)}
.small{font-size:13px;letter-spacing:.06em;color:var(--muted)}
.ph-note{display:inline-block;padding:10px 14px;border:1px dashed var(--oro);color:var(--oro);font-size:13px;letter-spacing:.08em}
.ja{font-family:var(--serif);font-weight:500}
.hanko{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;background:var(--shu);color:var(--washi);font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:0;writing-mode:horizontal-tb}

.ico{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ring{fill:none;stroke:currentColor;stroke-width:1.5}
.ring--dash{stroke-width:9;stroke-dasharray:1.5 16.85}

/* ritardi a scalare: .i1–.i12 per le animazioni in sequenza, .d1–.d4 per le comparse */
.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}.i8{--i:8}.i9{--i:9}.i10{--i:10}.i11{--i:11}.i12{--i:12}
.d1{--d:150ms}.d2{--d:300ms}.d3{--d:450ms}.d4{--d:600ms}

/* linee di testo che salgono da una maschera */
.line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.line > span{display:block}

/* ---------- pulsanti e link ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 30px;border:1px solid var(--oro);color:var(--oro);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--oro);translate:0 101%;transition:translate .6s var(--ease)}
.btn:hover{color:var(--sumi)}
.btn:hover::before{translate:0 0}
.btn--solid{background:var(--oro);color:var(--sumi)}
.btn--solid::before{background:var(--washi)}
.btn--sm{min-height:46px;padding:0 22px}
.btn svg,.more svg{flex:none;width:18px;height:18px;transition:translate .5s var(--ease)}
.btn:hover svg,.more:hover svg{translate:6px 0}
.more{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:46px;font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--washi)}
.more::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--oro);scale:.22 1;transform-origin:left;transition:scale .7s var(--ease)}
.more:hover::after{scale:1 1}
.more svg{color:var(--oro)}

/* ---------- barra di avanzamento ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--oro);transform-origin:left;scale:var(--prog,0) 1}

/* ---------- navigazione ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:translate .7s var(--ease),background .4s,border-color .4s}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1360px;margin-inline:auto;padding:22px var(--pad);transition:padding .6s var(--ease)}
.nav.is-solid{background:rgba(13,12,10,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.is-solid .nav__in{padding-block:10px}
.nav.is-hidden{translate:0 -101%}
.nav.is-open{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.brand{display:flex;align-items:center;gap:14px;min-height:48px}
.brand img{width:52px;height:52px;transition:rotate 1.4s var(--ease)}
.brand:hover img{rotate:120deg}
.brand span{font-family:var(--serif);font-size:18px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.1vw,36px)}
.nav__links a:not(.btn){position:relative;display:inline-flex;align-items:center;min-height:46px;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--oro);scale:0 1;transform-origin:right;transition:scale .6s var(--ease)}
.nav__links a:not(.btn):hover::after,.nav__links a[aria-current]::after{scale:1 1;transform-origin:left}
.nav__links a[aria-current]{color:var(--oro)}
.burger{display:none;position:relative;width:48px;height:48px}
.burger i{position:absolute;left:11px;right:11px;height:1px;background:var(--washi);transition:translate .5s var(--ease),rotate .5s var(--ease)}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:28px}
.nav.is-open .burger i:nth-child(1){translate:0 4.5px;rotate:45deg}
.nav.is-open .burger i:nth-child(2){translate:0 -4.5px;rotate:-45deg}
.menu{position:fixed;inset:0;z-index:49;display:flex;flex-direction:column;gap:2px;padding:120px var(--pad) 40px;overflow-y:auto;background:var(--sumi-2);clip-path:circle(0 at calc(100% - 44px) 46px);visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s .9s}
.menu.is-open{clip-path:circle(160% at calc(100% - 44px) 46px);visibility:visible;transition:clip-path 1s var(--ease),visibility 0s}
.menu a{display:flex;align-items:baseline;gap:16px;min-height:56px;font-family:var(--serif);font-size:clamp(28px,7.6vw,44px);line-height:1.3;opacity:0;translate:0 26px;transition:opacity .5s var(--ease),translate .8s var(--ease)}
.menu a small{font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--oro)}
.menu.is-open a{opacity:1;translate:0 0;transition-delay:calc(var(--i,0)*60ms + 220ms)}
@media (max-width:1100px){
  .nav__links{display:none}
  .burger{display:block}
}

/* ---------- intro: le porte shoji si aprono ---------- */
.intro{position:absolute;top:0;left:0;right:0;height:min(100vh,860px);min-height:640px;z-index:60;overflow:hidden;pointer-events:none;animation:introOff .01s 3s forwards}
.intro__door{position:absolute;top:0;bottom:0;width:50.5%;background-color:var(--sumi-2);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:100% 25%,33.34% 100%}
.intro__door--l{left:0;border-right:1px solid var(--oro);animation:doorL 1.4s 1.5s var(--ease) forwards}
.intro__door--r{right:0;border-left:1px solid var(--oro);animation:doorR 1.4s 1.5s var(--ease) forwards}
.intro__logo{position:absolute;left:50%;top:50%;width:min(46vw,250px);margin:calc(min(46vw,250px) / -2) 0 0 calc(min(46vw,250px) / -2);animation:introLogo 1.9s var(--ease) forwards}
@keyframes doorL{to{translate:-101% 0}}
@keyframes doorR{to{translate:101% 0}}
@keyframes introLogo{0%{opacity:0;scale:.8;rotate:-50deg}45%{opacity:1;scale:1;rotate:0deg}78%{opacity:1;scale:1;rotate:0deg}100%{opacity:0;scale:1.1;rotate:0deg}}
@keyframes introOff{to{visibility:hidden}}

/* ---------- animazioni al caricamento ---------- */
.onload .line > span{translate:0 112%;animation:lineUp 1.3s var(--ease) forwards;animation-delay:calc(var(--i,0)*130ms + var(--t0,.25s))}
.fadeup{opacity:0;translate:0 26px;animation:fadeUp 1.2s var(--ease) forwards;animation-delay:calc(var(--i,0)*130ms + var(--t0,.25s))}
@keyframes lineUp{to{translate:0 0}}
@keyframes fadeUp{to{opacity:1;translate:0 0}}
@keyframes kenburns{from{scale:1.16}to{scale:1}}
@keyframes marquee{to{translate:-50% 0}}
@keyframes spin{to{rotate:360deg}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- hero della home ---------- */
.hero{--t0:2.2s;position:relative;min-height:max(640px,min(100vh,860px));padding-top:120px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(46% 62% at 70% 50%,rgba(205,164,76,.14),rgba(13,12,10,0) 72%)}
.hero__drago{position:absolute;z-index:-1;right:9%;top:50%;width:min(42vw,600px);aspect-ratio:1063/1300;margin-top:calc(min(42vw,600px) * -.6115);translate:calc(var(--mx,0) * -30px) calc(var(--my,0) * -22px);transition:translate 1.4s var(--ease)}
.hero__drago img{width:100%;height:100%;opacity:0;animation:dragoIn 2.6s 1.9s var(--ease) forwards,float 12s 4.5s ease-in-out infinite alternate}
.hero__enso{position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1;margin:-56% 0 0 -56%;color:var(--oro);opacity:.55;rotate:-90deg;translate:calc(var(--mx,0) * 16px) calc(var(--my,0) * 12px);transition:translate 1.8s var(--ease)}
.hero__enso circle{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.4s 1.9s var(--ease) forwards}
@keyframes dragoIn{from{opacity:0;scale:.9}to{opacity:.62;scale:1}}
@keyframes float{from{translate:0 -10px;rotate:-1.2deg}to{translate:0 14px;rotate:1.4deg}}
.hero__in{position:relative;width:100%;padding-bottom:clamp(84px,12vw,128px)}
.hero__title{margin-top:26px}
.hero__sub{margin-top:26px;max-width:44ch;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;margin-top:38px}
.hero__tate{position:absolute;right:max(var(--pad),calc(50% - 680px + var(--pad)));top:clamp(108px,13vw,150px);display:flex;flex-direction:column;align-items:center;gap:18px;font-family:var(--serif);font-size:clamp(24px,2.5vw,36px);line-height:1}
.hero__tate span{display:block}
.hero__tate .hanko{display:grid}
.hero__foot{position:absolute;left:max(var(--pad),calc(50% - 680px + var(--pad)));right:max(var(--pad),calc(50% - 680px + var(--pad)));bottom:28px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.cue{display:flex;align-items:center;gap:14px}
.cue i{display:block;width:64px;height:1px;background:var(--line);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--oro);translate:-101% 0;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{60%,100%{translate:101% 0}}
@media (max-width:860px){
  .hero__drago{right:-18%;top:42%;width:92vw;margin-top:calc(92vw * -.6115)}
  .hero__drago img{animation-name:dragoInSoft,float}
  .hero__foot span:last-child{display:none}
}
@keyframes dragoInSoft{from{opacity:0;scale:.9}to{opacity:.24;scale:1}}

/* ---------- hero delle pagine interne ---------- */
.phero{--t0:.3s;position:relative;min-height:660px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-block:180px 76px}
.phero__media{position:absolute;inset:-12% 0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover;translate:0 var(--py,0px);animation:kenburns 12s var(--ease) both}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--sumi) 3%,rgba(13,12,10,.5) 55%,rgba(13,12,10,.78))}
.phero__kanji{position:absolute;right:max(var(--pad),calc(50% - 680px + var(--pad)));bottom:60px;writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(64px,9.6vw,140px);line-height:1;letter-spacing:.06em;color:var(--washi);opacity:.2}
.phero--sm{min-height:520px;padding-top:170px}
.phero .beat{left:74%;top:48%}
.phero__title{margin-top:22px;max-width:14ch}
.phero__sub{margin-top:22px;max-width:46ch}
.crumb{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.crumb a{display:inline-flex;align-items:center;min-height:44px}
.crumb span{display:inline-flex;align-items:center;min-height:44px;color:var(--oro)}

/* ---------- sezioni ---------- */
.sec{position:relative;padding-block:clamp(72px,7.5vw,116px)}
.sec--alt{background:var(--sumi-2)}
.sec--tight{padding-block:clamp(56px,6vw,96px)}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 64px;margin-bottom:clamp(32px,4vw,56px)}
.sec__head .h2{margin-top:18px}
.sec__head .txt{max-width:44ch}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:clamp(40px,7vw,110px);align-items:center}
.split--top{align-items:start}
.stack{display:flex;flex-direction:column;gap:22px}
.stack--lg{gap:34px}
.stack > .txt + .txt{margin-top:0}
.stack > :is(.more,.btn,.ph-note,.chap){align-self:flex-start}
.stack--c{align-items:center;text-align:center}
.stack--c > :is(.more,.btn,.ph-note,.chap){align-self:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:24px}
/* staff: quattro colonne su schermi larghi, due sul tablet, una sul telefono */
.grid4{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:640px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rule{height:1px;background:var(--line)}
.mt{margin-top:clamp(40px,5vw,72px)}
@media (min-width:980px){
  .split--rev > :first-child{order:2}
  .sticky{position:sticky;top:120px;align-self:start}
}

/* ---------- immagini ---------- */
.ph{position:relative;overflow:hidden;background:var(--sumi-3)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--px img{position:absolute;left:0;top:-13%;height:126%;translate:0 var(--py,0px)}
.ph figcaption,.cap{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
figure > .cap{display:block;margin-top:14px}
.lead + .rows{margin-top:24px}
.r94{aspect-ratio:9/4}.r34{aspect-ratio:3/4}.r45{aspect-ratio:4/5}.r11{aspect-ratio:1}.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}.r169{aspect-ratio:16/9}.r219{aspect-ratio:21/9}
.collage{position:relative;padding:0 15% 17% 0}
.collage .ph--b{position:absolute;right:0;bottom:0;width:46%;outline:10px solid var(--sumi)}
.sec--alt .collage .ph--b{outline-color:var(--sumi-2)}
.duo{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:end}

.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.mosaic > *{grid-column:span 12}
.fill{min-height:300px}
.fill img{position:absolute;inset:0}
@media (min-width:800px){
  .m4{grid-column:span 4}.m5{grid-column:span 5}.m6{grid-column:span 6}.m7{grid-column:span 7}.m8{grid-column:span 8}
}
.kokoro{display:block;width:min(100%,860px);margin-inline:auto;opacity:.92}
.sig{display:flex;align-items:center;gap:16px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--washi)}
.sig b{display:block;font-weight:500;color:var(--oro)}
.sig--c{justify-content:center}
.credit{display:flex;align-items:center;gap:16px}
.credit img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover}
.credit span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.credit b{display:block;font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--washi)}

/* ---------- respiro: cerchi che si espandono lentamente ---------- */
.breath{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;text-align:center}
.breath i{position:absolute;inset:0;border:1px solid var(--oro);border-radius:50%;animation:breath 9s ease-in-out infinite}
.breath i:nth-child(2){inset:14%;opacity:.6;animation-delay:.5s}
.breath i:nth-child(3){inset:28%;opacity:.35;animation-delay:1s}
.breath span{max-width:13ch;font-family:var(--serif);font-size:clamp(20px,1.9vw,27px);line-height:1.4}
@keyframes breath{0%,100%{scale:.82}50%{scale:1}}

/* ---------- portale: la foto si apre scorrendo ---------- */
.portal{position:relative;height:1750px}
.is-static .portal,.no-motion .portal{height:auto}
.is-static .portal__pin{height:560px}
.portal__pin{position:sticky;top:0;height:min(100vh,900px);min-height:560px;overflow:hidden;display:grid;place-items:center}
.portal__img{position:absolute;inset:0;clip-path:inset(calc((1 - var(--p,1)) * 21%) calc((1 - var(--p,1)) * 31%))}
.portal__img img{width:100%;height:100%;object-fit:cover;scale:calc(1.3 - var(--p,1) * .3)}
.portal__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--sumi),rgba(13,12,10,.3) 30%,rgba(13,12,10,.3) 70%,var(--sumi))}
.portal__txt{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding-inline:var(--pad);text-align:center;opacity:calc(var(--p,1) * 2.6 - 1.4);translate:0 calc((1 - var(--p,1)) * 50px)}
.portal__txt .ja{font-size:clamp(30px,3vw,44px);letter-spacing:.4em;margin-right:-.4em;color:var(--oro)}
.portal__hint{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);opacity:calc(1 - var(--p,1) * 4)}

/* ---------- nastro di parole ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(26px,3.4vw,46px)}
.marquee__track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.marquee:hover .marquee__track,.reel:hover .reel__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;gap:clamp(26px,4vw,60px);padding-right:clamp(26px,4vw,60px);font-family:var(--serif);font-size:clamp(44px,7vw,100px);line-height:1.15;white-space:nowrap}
.marquee__set .o{color:transparent;-webkit-text-stroke:1px var(--muted)}
.marquee__set i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--oro)}

/* ---------- le Vie: pannelli che si allargano ---------- */
.vie{display:flex;gap:12px;height:580px}
.via{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;transition:flex-grow 1s var(--ease)}
.via > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(.75) brightness(.6);scale:1.1;transition:filter 1s var(--ease),scale 1.8s var(--ease)}
.via::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(13,12,10,.95),rgba(13,12,10,0) 64%)}
.via:hover,.via:focus-visible{flex-grow:1.9}
.via:hover > img,.via:focus-visible > img{filter:grayscale(0) brightness(.85);scale:1}
.via__in{display:block;width:100%;padding:clamp(22px,2.6vw,40px)}
.via__num{display:block;font-size:12px;letter-spacing:.3em;color:var(--oro)}
.via__kanji{position:absolute;top:clamp(20px,2.4vw,36px);right:clamp(20px,2.4vw,36px);writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(40px,4.6vw,70px);line-height:1;letter-spacing:.1em}
.via__t{display:block;margin-top:10px;font-family:var(--serif);font-size:clamp(28px,2.8vw,42px);line-height:1.12}
.via__list{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.via__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease)}
.via__more > span{display:block;overflow:hidden}
.via__more > span > span{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;color:var(--washi);font-size:16px;min-width:300px}
.via__more svg{flex:none;width:22px;height:22px;color:var(--oro)}
.via:hover .via__more,.via:focus-visible .via__more{grid-template-rows:1fr}
@media (max-width:900px),(hover:none){
  .via__more{grid-template-rows:1fr}
  .via__more > span > span{min-width:0}
  .via > img{filter:grayscale(.2) brightness(.7)}
}
@media (max-width:900px){
  .vie{flex-direction:column;height:auto}
  .via{flex:none;min-height:400px}
}

/* ---------- Bushido interattivo ---------- */
.bushido{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(36px,6vw,100px);align-items:center}
.stage{position:relative;width:100%;max-width:500px;aspect-ratio:1;margin-inline:auto}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage__ticks{color:var(--line);animation:spin 90s linear infinite;transform-origin:center}
.stage__prog{color:var(--oro);rotate:-90deg;transform-origin:center}
.stage__prog circle{stroke-dasharray:1;stroke-dashoffset:1}
.stage__prog.a circle{animation:draw 5.2s linear forwards}
.stage__prog.b circle{animation:drawB 5.2s linear forwards}
@keyframes drawB{to{stroke-dashoffset:0}}
.glyph{position:absolute;inset:14%;opacity:0;scale:.84;filter:blur(12px);transition:opacity .6s var(--ease),scale 1.2s var(--ease),filter .7s var(--ease)}
.glyph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.glyph.is-active{opacity:1;scale:1;filter:blur(0)}
.virtues{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.virtue{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:baseline;column-gap:14px;width:100%;min-height:62px;padding:14px 0;border-top:1px solid var(--line);text-align:left;color:var(--muted);transition:color .5s}
.virtue:hover{color:var(--washi)}
.virtue__n{font-size:12px;letter-spacing:.2em}
.virtue__t{font-family:var(--serif);font-size:clamp(22px,2vw,29px);line-height:1.2}
.virtue__s{font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-align:right}
.virtue__d{grid-column:2 / -1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.virtue__d > span{display:block;overflow:hidden}
.virtue__d > span > span{display:block;padding-top:8px;font-size:16px;line-height:1.6;color:var(--muted);max-width:44ch}
.virtue.is-active{color:var(--washi)}
.virtue.is-active .virtue__n{color:var(--oro)}
.virtue.is-active .virtue__d{grid-template-rows:1fr}

/* ---------- citazione a tutta larghezza ---------- */
.quote{position:relative;min-height:620px;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:110px var(--pad);text-align:center}
.quote__bg{position:absolute;inset:-16% 0;z-index:-2}
.quote__bg img{width:100%;height:100%;object-fit:cover;translate:0 var(--py,0px)}
.quote::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--sumi),rgba(13,12,10,.58) 26%,rgba(13,12,10,.58) 74%,var(--sumi))}
.quote blockquote{font-family:var(--serif);font-size:clamp(23px,2.9vw,42px);line-height:1.45;max-width:23em;text-wrap:balance}
.quote__by{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:38px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--washi);text-align:left}
.quote__by b{display:block;font-weight:500;color:var(--oro)}
.bigquote{font-family:var(--serif);font-size:clamp(22px,2.3vw,33px);line-height:1.5;text-wrap:pretty}
.bigquote::before{content:"“";display:block;height:.55em;font-size:3.4em;line-height:1;color:var(--oro)}
.bigquote--sm{font-size:clamp(19px,1.75vw,25px);line-height:1.6}
.bigquote--sm::before{font-size:4.4em}

/* ---------- card con immagine ---------- */
.card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;padding:clamp(22px,2.4vw,36px);overflow:hidden;isolation:isolate}
.card > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;scale:1.03;transition:scale 1.8s var(--ease)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(13,12,10,.95) 6%,rgba(13,12,10,.12) 72%)}
.card:hover > img{scale:1.1}
.card__date{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.card__t{margin-top:10px;font-family:var(--serif);font-size:clamp(23px,2.3vw,34px);line-height:1.18}
.card__d{margin-top:8px;max-width:46ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
.ev-home{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:20px;height:580px}
.ev-home .card{min-height:0}
.ev-home .card:first-child{grid-row:1 / 3}
@media (max-width:900px){
  .ev-home{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .ev-home .card{min-height:380px}
  .ev-home .card:first-child{grid-row:auto}
}

/* ---------- pellicola di foto che scorre ---------- */
.reel{overflow:hidden}
.reel__track{display:flex;width:max-content;animation:marquee 90s linear infinite}
.reel__set{display:flex;align-items:flex-start;gap:20px;padding-right:20px;height:380px}
.reel__set img{flex:none;height:380px;width:auto;max-width:none}
.reel__set img:nth-child(even){height:290px;margin-top:70px}

/* ---------- invito finale ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(96px,10vw,150px);text-align:center}
.cta__bg{position:absolute;inset:-16% 0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover;translate:0 var(--py,0px)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--sumi),rgba(13,12,10,.72) 30%,rgba(13,12,10,.72) 70%,var(--sumi))}
.cta__in{display:flex;flex-direction:column;align-items:center;gap:26px}
.cta__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 34px;margin-top:12px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:72px 34px}
.foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:44px}
.foot__brand{display:flex;flex-direction:column;gap:18px;max-width:34ch}
.foot__brand img{width:96px;height:96px}
.foot h3{margin-bottom:10px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.foot li a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);transition:color .3s}
.foot li a:hover{color:var(--washi)}
.foot li{color:var(--muted)}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;margin-top:54px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:980px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}

/* ---------- persone ---------- */
.person{display:flex;flex-direction:column;gap:18px}
.person__role{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.person .txt{font-size:15.5px;line-height:1.7}
.ph--empty{display:grid;place-items:center;align-content:center;gap:14px;border:1px solid var(--line);text-align:center}
.ph--empty b{font-family:var(--serif);font-weight:500;font-size:clamp(64px,7vw,104px);line-height:1;color:var(--oro)}

/* ---------- capitoli e liste ---------- */
.chap{display:flex;align-items:baseline;gap:18px}
.chap .ja{font-size:clamp(36px,4vw,60px);line-height:1;color:var(--oro)}
.verse{display:flex;flex-direction:column;gap:.5em;font-family:var(--serif);font-size:clamp(20px,2vw,29px);line-height:1.5;text-align:center;text-wrap:balance}
.verse{max-width:31em;margin-inline:auto}
.verse .dim{color:var(--muted)}
.card .ph-note{align-self:flex-start;margin-top:14px;background:rgba(13,12,10,.6)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{display:flex;flex-direction:column;gap:12px;min-height:250px;padding:28px;background:var(--sumi);transition:background .6s var(--ease)}
.sec--alt .tile{background:var(--sumi-2)}
.tile:hover{background:var(--sumi-3)}
.tile img{align-self:flex-start;flex:none;height:92px;width:auto;max-width:none;object-fit:contain;margin-bottom:auto;transition:scale .9s var(--ease);transform-origin:left bottom}
.tile:hover img{scale:1.12}
.tile__s{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.tile--txt{min-height:170px;justify-content:space-between;font-family:var(--serif);font-size:clamp(19px,1.6vw,23px);line-height:1.35}
.tile--ja{align-items:center;justify-content:center;text-align:center}
.tile--ja .ja{font-size:clamp(48px,5vw,76px);line-height:1.1;color:var(--oro)}
.form__ok{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--oro)}
.tile p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.trio > div{padding:clamp(28px,4vw,56px) clamp(16px,2vw,32px);background:var(--sumi);text-align:center;font-family:var(--serif);font-size:clamp(24px,2.6vw,38px);line-height:1.2}
.sec--alt .trio > div{background:var(--sumi-2)}
.trio small{display:block;margin-top:10px;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.card--xl{min-height:560px}
.card--xl .card__t{font-size:clamp(28px,3.6vw,54px);max-width:18ch}
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1.1s var(--ease)}
.fold > div{overflow:hidden}
.fold.is-open{grid-template-rows:1fr}
.fold__in{display:flex;flex-direction:column;gap:1.1em;padding-top:30px}

/* ---------- onde del tamburo ---------- */
.beat{position:absolute;z-index:-1;left:50%;top:50%;width:min(70vw,620px);aspect-ratio:1;margin:calc(min(70vw,620px) / -2) 0 0 calc(min(70vw,620px) / -2);pointer-events:none}
.beat i{position:absolute;inset:0;border:1px solid var(--oro);border-radius:50%;opacity:0;animation:beat 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.beat i:nth-child(2){animation-delay:.45s}
.beat i:nth-child(3){animation-delay:1.8s}
.beat i:nth-child(4){animation-delay:2.25s}
@keyframes beat{0%{opacity:.7;scale:.28}100%{opacity:0;scale:1.5}}

/* ---------- cronologia eventi ---------- */
.year{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(20px,4vw,72px);padding-block:40px;border-top:1px solid var(--line)}
.year__n{position:sticky;top:110px;align-self:start;font-family:var(--serif);font-size:clamp(60px,8vw,116px);line-height:.95;color:transparent;-webkit-text-stroke:1px var(--oro)}
.ev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px;align-items:center;padding-block:24px}
.ev + .ev{border-top:1px solid var(--line)}
.ev__when{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.ev__t{margin-top:8px;font-family:var(--serif);font-size:clamp(22px,2.2vw,31px);line-height:1.22}
.ev__d{margin-top:6px;font-size:15.5px;color:var(--muted)}
.ev .ph{transition:scale 1.2s var(--ease)}
.ev:hover .ph{scale:1.03}
@media (max-width:760px){
  .year{grid-template-columns:1fr;gap:10px}
  .year__n{position:static}
  .ev{grid-template-columns:1fr}
}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 30px;padding-block:20px;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows b{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.7vw,24px);color:var(--washi)}
.rows span{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}

/* ---------- galleria ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:48px;padding:0 22px;border:1px solid var(--line);font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .4s,background .4s,border-color .4s}
.chip:hover{color:var(--washi);border-color:var(--muted)}
.chip.is-on{background:var(--oro);border-color:var(--oro);color:var(--sumi)}
.masonry{columns:3 300px;column-gap:16px}
.shot{position:relative;display:block;width:100%;margin-bottom:16px;break-inside:avoid;overflow:hidden;cursor:zoom-in;animation:shotIn .9s var(--ease) both}
.shot img{width:100%;height:auto;transition:scale 1.6s var(--ease)}
.shot:hover img{scale:1.06}
.shot span{position:absolute;left:0;right:0;bottom:0;padding:36px 16px 14px;background:linear-gradient(0deg,rgba(13,12,10,.92),rgba(13,12,10,0));font-size:13px;letter-spacing:.06em;text-align:left;color:var(--washi);translate:0 100%;transition:translate .6s var(--ease)}
.shot:hover span,.shot:focus-visible span{translate:0 0}
@keyframes shotIn{from{opacity:0;translate:0 30px;scale:.97}}
/* alternando .a e .b sulla griglia l'animazione riparte a ogni cambio di filtro */
.masonry.b .shot{animation-name:shotInB}
@keyframes shotInB{from{opacity:0;translate:0 30px;scale:.97}}
@media (hover:none){.shot span{translate:0 0}}
.lightbox{position:fixed;inset:0;z-index:80;display:grid;grid-template-rows:1fr auto;place-items:center;gap:18px;padding:76px var(--pad) 28px;background:rgba(13,12,10,.97);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .5s}
.lightbox img{max-width:100%;max-height:min(76vh,860px);object-fit:contain;scale:.96;transition:scale .9s var(--ease)}
.lightbox.is-open img{scale:1}
.lightbox__bar{display:flex;align-items:center;justify-content:center;gap:22px;color:var(--muted);font-size:14px}
.iconbtn{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);color:var(--washi);transition:border-color .4s,color .4s}
.iconbtn:hover{border-color:var(--oro);color:var(--oro)}
.iconbtn svg{width:20px;height:20px}
.lightbox__x{position:absolute;top:18px;right:var(--pad)}

/* ---------- contatti ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(40px,7vw,110px);align-items:start}
.info{display:flex;flex-direction:column}
.info > div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;padding-block:22px;border-top:1px solid var(--line)}
.info > div:last-child{border-bottom:1px solid var(--line)}
.info dt{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);padding-top:6px}
.info dd{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.45}
.info dd a{display:inline-flex;align-items:center;min-height:44px;transition:color .3s}
.info dd a:hover{color:var(--oro)}
.info dd small{display:block;font-family:var(--sans);font-size:14px;color:var(--muted)}
.form{display:grid;gap:22px;padding:clamp(24px,3.4vw,48px);background:var(--sumi-2);border:1px solid var(--line)}
.field{display:grid;gap:6px}
.field label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.field :is(input,select,textarea){width:100%;min-height:54px;padding:12px 0;border:0;border-bottom:1px solid var(--muted);border-radius:0;background:transparent;color:var(--washi);font:inherit;transition:border-color .4s}
.field textarea{min-height:132px;resize:vertical}
.field select option{color:#141210}
.field :is(input,select,textarea):focus{outline:none;border-bottom:2px solid var(--oro)}
.map{position:relative;min-height:440px;display:grid;place-items:center;overflow:hidden;isolation:isolate;border:1px solid var(--line);text-align:center;padding:40px var(--pad)}
.map::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.6}
.pin{position:relative;width:18px;height:18px;border-radius:50%;background:var(--shu)}
.pin::before,.pin::after{content:"";position:absolute;inset:0;border:1px solid var(--shu);border-radius:50%;animation:beat 3s cubic-bezier(.2,.6,.3,1) infinite}
.pin::after{animation-delay:1.5s}

/* ---------- comparsa allo scorrimento ----------
   Lo script aggiunge .in agli elementi [data-rv] quando entrano nella finestra. */
.is-motion [data-rv]{opacity:0;translate:0 40px}
.is-motion [data-rv].in{opacity:1;translate:0 0;transition:opacity 1.1s var(--ease) var(--d,0ms),translate 1.3s var(--ease) var(--d,0ms)}
.is-motion [data-rv="fade"],.is-motion [data-rv="rise"]{translate:0 0}
.is-motion [data-rv="rise"]{opacity:1}
.is-motion [data-rv="rise"] .line > span{translate:0 112%}
.is-motion [data-rv="rise"].in .line > span{translate:0 0;transition:translate 1.3s var(--ease) calc(var(--i,0)*120ms + var(--d,0ms))}
.is-motion [data-rv="img"]{opacity:1;translate:0 0;clip-path:inset(0 0 100% 0)}
.is-motion [data-rv="img"] img{scale:1.24}
.is-motion [data-rv="img"].in{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--ease) var(--d,0ms)}
.is-motion [data-rv="img"].in img{scale:1;transition:scale 2.2s var(--ease) var(--d,0ms)}
.is-motion [data-rv="line"]{opacity:1;translate:0 0;scale:0 1;transform-origin:left}
.is-motion [data-rv="line"].in{scale:1 1;transition:scale 1.5s var(--ease) var(--d,0ms)}
/* rete di sicurezza: se lo script non parte, dopo 4 secondi tutto diventa visibile */
.is-motion:not(.is-live) [data-rv],.is-motion:not(.is-live) [data-rv] img,.is-motion:not(.is-live) [data-rv] .line > span{animation:failsafe .01s 4s forwards}
@keyframes failsafe{to{opacity:1;translate:0 0;scale:1;clip-path:inset(0 0 0 0)}}

/* ---------- animazioni disattivate (dal pannello Tweaks o dal sistema) ---------- */
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important;transition:none!important}
.no-motion .intro{display:none}
.no-motion .onload .line > span,.no-motion .fadeup{opacity:1;translate:0 0}
.no-motion .hero__drago img{opacity:.62}
.no-motion .hero__enso circle,.no-motion .stage__prog circle{stroke-dashoffset:0}
.no-motion .beat i{opacity:.25;scale:1}
@media (prefers-reduced-motion:reduce){
  .knk *,.knk *::before,.knk *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .portal{height:auto}
}

/* ==========================================================================
   Solo sito pubblicato (regole che sul canvas di design non servono)
   ========================================================================== */
html{background:#0d0c0a;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#0d0c0a}
html.no-scroll{overflow:hidden}
:where(.knk) img{height:auto}
@view-transition{navigation:auto}

/* link per saltare al contenuto con la tastiera */
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:14px 18px;background:#cda44c;color:#0d0c0a;font:700 14px/1 system-ui,sans-serif;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}

/* il portale occupa tutta l'altezza dello schermo, anche sui monitor grandi */
.portal__pin{height:100vh;height:100svh}

.shot[hidden],.form__ok[hidden]{display:none}
.lightbox img:not([src]){visibility:hidden}

/* l'intro con le porte shoji compare una sola volta per visita */
.intro-seen .intro{display:none}
.intro-seen .hero{--t0:.35s}
.intro-seen .hero__drago img{animation-delay:.2s,2.8s}
.intro-seen .hero__enso circle{animation-delay:.2s}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   Elementi disegnati a mano: ensō, pennellate, sigilli, cornici, mitsudomoe
   ========================================================================== */

/* --- tratto a pennello: ogni setola (.enso__b) si disegna da sola ---
   --D durata del tratto, --T0 attesa iniziale, --s e --l (frazioni) per le setole che partono dopo */
.enso{overflow:visible}
.enso__b{fill:none;stroke:currentColor;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw calc(var(--D,2.8s) * var(--l,1)) calc(var(--T0,0s) + var(--D,2.8s) * var(--s,0)) cubic-bezier(.45,.05,.25,1) forwards}
.enso__blot{fill:currentColor;opacity:0;animation:blot .35s var(--T0,0s) forwards}
@keyframes blot{to{opacity:.9}}
@keyframes blotB{to{opacity:.9}}
/* dentro un blocco che compare allo scorrimento, il pennello parte quando il blocco è visibile */
.is-motion [data-rv] .enso__b,.is-motion [data-rv] .enso__blot{animation-play-state:paused}
.is-motion [data-rv].in .enso__b,.is-motion [data-rv].in .enso__blot{animation-play-state:running}
.no-motion .enso__b{stroke-dashoffset:0}
.no-motion .enso__blot{opacity:.9}

/* ensō attorno al drago */
.enso.hero__enso{width:132%;margin:-66% 0 0 -66%;opacity:.8;rotate:none;--D:2.9s;--T0:1.9s}
@media (min-width:861px){
  .hero{--edge:max(var(--pad),calc(50% - 680px + var(--pad)))}
  .hero__drago{right:calc(var(--edge) + 78px);width:min(38vw,540px);margin-top:calc(min(38vw,540px) * -.6115)}
  .enso.hero__enso{width:126%;margin:-63% 0 0 -63%}
  /* sugli schermi bassi il titolo si riduce con l'altezza, così il blocco resta sotto la barra di navigazione */
  .hero__title{font-size:clamp(46px,min(7vw,11vh),102px)}
  .hero__in{padding-bottom:clamp(84px,min(12vw,14vh),128px)}
}
@media (max-width:860px){.enso.hero__enso{opacity:.32}}
/* telefono: la scritta in alto non passa sotto i kanji a destra e tutto il blocco, con «Scorri», sta nella prima schermata */
@media (max-width:600px){
  /* sui telefoni alti la sezione non occupa tutto lo schermo: il blocco sale e sotto si intravede la sezione successiva */
  .hero{padding-top:106px;min-height:min(100vh,700px);min-height:min(100svh,700px)}
  .hero__in{padding-bottom:72px}
  .hero__in .eyebrow{max-width:calc(100% - 64px);font-size:11px;letter-spacing:.16em;line-height:1.6}
  .hero__in .eyebrow::before{width:22px}
  .hero__title{margin-top:14px}
  .hero__sub{margin-top:16px;font-size:17px;line-height:1.55}
  .hero__cta{margin-top:24px;gap:10px 28px}
  .hero__tate{top:104px;gap:9px;font-size:20px}
  .hero__tate .hanko{width:32px;height:32px;font-size:19px}
}
.intro-seen .hero__enso{--T0:.2s}

/* ensō del Bushido: si ridipinge a ogni virtù e fa da contatore */
.stage .stage__prog.enso{inset:-7%;width:114%;height:114%;rotate:none;--D:5.2s;--T0:0s}
.stage__prog.enso .enso__b{animation-timing-function:linear}
.stage__prog.b .enso__b{animation-name:drawB}
.stage__prog.b .enso__blot{animation-name:blotB}

/* pennellata sotto i titoli delle pagine interne */
.brush{display:block;width:clamp(130px,15vw,210px);height:auto;margin-top:22px;color:var(--oro);--D:1.1s;--T0:1.2s}

/* --- sigillo: compare come un timbro --- */
.hanko{rotate:-4deg;border-radius:3px 5px 4px 6px}
.is-motion [data-rv] .hanko{opacity:0;scale:1.7;rotate:-16deg}
.is-motion [data-rv].in .hanko{opacity:1;scale:1;rotate:-4deg;transition:opacity .2s .9s,scale .5s .9s cubic-bezier(.2,1.5,.4,1),rotate .5s .9s var(--ease)}
.ph__seal{position:absolute;right:18px;bottom:18px;z-index:2;width:38px;height:38px;font-size:22px}

/* --- cornici per le foto --- */
/* filetto oro interno, che si assesta dopo la comparsa della foto */
.ph--line::after{content:"";position:absolute;inset:14px;z-index:1;border:1px solid rgba(234,217,166,.8);pointer-events:none}
.is-motion [data-rv="img"].ph--line::after{opacity:0;inset:0}
.is-motion [data-rv="img"].ph--line.in::after{opacity:1;inset:14px;transition:opacity .8s 1s,inset 1.3s 1s var(--ease)}
/* angoli oro, come un passe-partout */
@property --cs{syntax:"<length>";inherits:false;initial-value:30px}
.ph--corners::after{content:"";position:absolute;inset:12px;z-index:1;pointer-events:none;--c:#ead9a6;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--cs) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--cs) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--cs) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--cs) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--cs) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--cs) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--cs) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--cs) no-repeat}
.is-motion [data-rv="img"].ph--corners::after{--cs:0px;opacity:0}
.is-motion [data-rv="img"].ph--corners.in::after{--cs:30px;opacity:1;transition:--cs 1.1s 1s var(--ease),opacity .3s 1s}

/* --- passaggio da una pagina all'altra: la nuova si apre dal centro, come le porte shoji --- */
::view-transition-old(root){animation:vtOut .45s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vtIn .75s cubic-bezier(.16,1,.3,1) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}

/* --- il menu ha una voce in più: sotto i 1280 px si usa il menu a comparsa --- */
@media (max-width:1280px){
  .nav__links{display:none}
  .burger{display:block}
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}