/* Nanquim · Dragão: camadas, topo (hero) e manifesto do protótipo aprovado. As medidas do topo e do manifesto
   definem o caminho do dragão: mude com cuidado e confira a descida. */

/* v4.3: o dragão é uma pincelada. Cabeça do logo e três fitas no mesmo pincel seco.
   Sai do ensō no topo e desce pelo manifesto, que tem uma parte escura e uma clara: sobre o claro a tinta do dragão fica preta.
   Antes do conteúdo denso ele sai pela lateral direita e não volta. */
:root{
  --sumi:#111110; --sumi2:#1A1917; --linha:#353534; --washi:#F4F3F0; --tinta:#F4F3F0; --haizumi:#A2A29F; --usuzumi:#51504F; --shu:#C23A22; --shu-claro:#D9573C; --shoji:#E6DFD0;
  --f-display:"Instrument Serif",Georgia,serif; --f-jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; --f-ui:"Hanken Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sym:min(64vmin,660px);
  color-scheme:dark;
}
html{background:var(--sumi)}
body{background:transparent;color:var(--washi);margin:0}
body{font:400 16px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(56px,env(safe-area-inset-left,0px));padding-right:max(56px,env(safe-area-inset-right,0px))}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lbl{display:block;font:600 10px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase}

/* camadas: papel claro (z -1) → dragão (z 0) → texto (z 1). Por isso main não cria contexto de empilhamento. */
#drg{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;pointer-events:none;display:block;z-index:0}
main{position:relative}
footer{position:relative;z-index:1}
.hero-txt,.hint,main section>*{position:relative;z-index:1}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid}
.sym-slot{position:absolute;aspect-ratio:1;width:var(--sym);right:max(4vw,calc(50vw - 640px));top:50%;translate:0 -52%}
.hero-txt{position:relative;align-self:end;padding-bottom:clamp(56px,11vh,120px);display:grid;gap:18px;justify-items:start;max-width:560px}
.wm{margin:0;line-height:0}
.wm svg{width:min(440px,72vw);height:auto;fill:var(--tinta);display:block}
.kj-row{display:flex;align-items:center;gap:18px}
.kj-row .kj{font:500 clamp(22px,2.4vw,30px)/1 var(--f-jp);color:var(--shu-claro);letter-spacing:.35em;margin:0}
.kj-row svg{width:44px;height:44px;color:var(--shu);rotate:-4deg;background:linear-gradient(#F4F3F0,#F4F3F0) center/82% 82% no-repeat}
.tag{margin:0;color:var(--haizumi);font-size:15px;letter-spacing:.02em}
.hint{position:absolute;left:50%;bottom:22px;translate:-50% 0;font:600 10px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--haizumi);display:flex;flex-direction:column;align-items:center;gap:12px}
.hint i{display:block;width:1px;height:36px;background:linear-gradient(var(--haizumi),transparent);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero-txt>*{opacity:0;translate:0 14px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.ready .hero-txt>*{opacity:1;translate:0 0}
.ready .hero-txt>*:nth-child(2){transition-delay:.12s}
.ready .hero-txt>*:nth-child(3){transition-delay:.24s}
.hint{opacity:0;transition:opacity 1s .6s}
.ready .hint{opacity:1}
@media (max-width:759px){
  :root{--sym:min(92vw,460px)}
  .sym-slot{left:50%;right:auto;top:max(11svh,72px);translate:-50% 0}
  .hero-txt{padding-bottom:88px}
}

/* ---------- manifesto ---------- */
.tinta{position:relative;min-height:160svh;padding-block:14svh 22svh;display:grid;align-content:space-between;gap:40svh}
.tinta.clara{color:var(--sumi);padding-block:26svh 34svh}
.tinta.clara::before{content:"";position:absolute;inset:0;background:var(--washi);z-index:-1}
.m{margin:0;max-width:16ch;font:400 clamp(40px,6.4vw,92px)/1.02 var(--f-display);color:var(--tinta);text-wrap:balance}
.clara .m{color:var(--sumi)}
.clara .m .lbl{color:var(--usumi)}
.m em{font-style:italic}
.m.small{max-width:24ch;font-size:clamp(26px,3.2vw,44px);line-height:1.14}
.m.r{justify-self:end;text-align:right}
.m .lbl{margin-bottom:22px;color:var(--haizumi)}
.next{position:relative;min-height:90svh;display:grid;align-content:center;gap:16px;border-top:1px solid var(--linha);padding-block:12svh}
.next h2,.resto h2{margin:0;font:400 clamp(34px,5vw,64px)/1 var(--f-display)}
.next p,.resto p{margin:0;color:var(--haizumi);max-width:56ch}
.next .lbl{color:var(--shu-claro)}
.resto{min-height:110svh;display:grid;align-content:center;gap:16px;border-top:1px solid var(--linha)}
.resto .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:20px}
.resto .grade i{display:block;aspect-ratio:4/5;background:var(--sumi2);border:1px solid var(--linha)}

/* ---------- rodapé: o dragão fecha o ensō em volta do hanko ---------- */
.fim{display:grid;justify-items:center;padding-block:16svh calc(32px + env(safe-area-inset-bottom,0px));gap:22px;border-top:1px solid var(--linha)}
.fim .hk{width:52px;rotate:-4deg;color:var(--shu);background:linear-gradient(#F4F3F0,#F4F3F0) center/82% 82% no-repeat}
.fim .hk svg{display:block;width:100%;height:auto}
.fim-txt{display:grid;justify-items:center;gap:10px;text-align:center}
.fim-txt p{margin:0;color:var(--haizumi);font-size:15px}
.fim-txt .lbl{color:var(--haizumi)}

/* ---------- painel de teste ---------- */
.hud{position:fixed;z-index:8;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;align-items:center}
.hud span,.hud button{font:600 10px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--haizumi);background:var(--sumi);border:1px solid var(--linha);padding:10px 11px;font-variant-numeric:tabular-nums}
.hud button{cursor:pointer;min-height:36px}
.hud button:focus-visible{outline:2px solid var(--shu-claro);outline-offset:2px}
.still .hud,.still .hint{display:none}
@media (prefers-reduced-motion:reduce){.hint i{animation:none}.pane,.hero-txt>*{transition:none}}