/* ═══════════════════════════════════════════════════════════════
   nycz.club — two modes on one page
   電 lain     : the wired. black, dithered, crt.
   刀 vagabond : sumi ink on washi. manga panels.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#050505;--fg:#d9d7cb;--hi:#f1efe4;--dim:#77756d;--faint:#26251f;--line:#1a1915;
  --red:#c8302a;--red-dim:#5a1714;--ok:#8fb98a;--ink:#0f0e0c;--paper:#ece5d3;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"MS Gothic",monospace;
  --jp:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","MS Mincho",serif;
  --brush:"Yuji Boku","Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --body:var(--mono);
}
[data-mode=vagabond]{
  --bg:#ece5d3;--fg:#24211c;--hi:#0e0d0b;--dim:#6f6756;--faint:#c4b99f;--line:#2a2620;
  --red:#a92a1f;--red-dim:#a92a1f;--ok:#44703c;
  --body:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",Georgia,serif;
  color-scheme:light;
}
[data-mode=lain] .vg,[data-mode=vagabond] .ln{display:none!important}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);font:13px/1.7 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed}
body{min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse 80% 50% at 50% 0%,#0f0e0c 0%,transparent 70%),radial-gradient(ellipse 120% 40% at 50% 100%,#1a0807 0%,transparent 60%),var(--bg)}
::selection{background:var(--red);color:var(--hi)}
a{color:inherit;text-decoration:none}
.jp{font-family:var(--jp)}
.defs{position:absolute;width:0;height:0}

/* ── mode toggle ── */
.mode{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:6px;padding:6px 10px;background:none;border:0;cursor:pointer;font:400 15px/1 var(--jp);color:var(--dim);-webkit-tap-highlight-color:transparent}
.mode .k{position:relative;display:grid;place-items:center;width:30px;height:30px;transition:color .3s,background .3s,transform .3s}
.mode .k::after{content:"";position:absolute;left:50%;bottom:-3px;width:4px;height:4px;background:var(--red);transform:translateX(-50%) scale(0);transition:transform .3s}
.mode .s{width:16px;height:1px;background:var(--faint)}
.mode:hover .k{color:var(--fg)}
[data-mode=lain] .mode .k1{color:var(--hi);text-shadow:0 0 10px rgba(241,239,228,.45)}
[data-mode=lain] .mode .k1::after{transform:translateX(-50%) scale(1);box-shadow:0 0 6px var(--red)}
[data-mode=vagabond] .mode{font-family:var(--brush);font-size:17px}
[data-mode=vagabond] .mode .k2{color:var(--paper);transform:rotate(-4deg)}
[data-mode=vagabond] .mode .k2::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);filter:url(#ink)}
[data-mode=vagabond] .mode .s{background:var(--ink);height:2px;filter:url(#ink)}
.mode:focus-visible{outline:1px dashed var(--red);outline-offset:2px}

/* ── fx layers ── */
.fx{position:fixed;inset:0;pointer-events:none;z-index:50}
.scan{background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.28) 2px 3px)}
.grain{inset:-50%;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,-2%)}}
.paper{mix-blend-mode:multiply;background:
  radial-gradient(ellipse 75% 65% at 50% 45%,transparent 55%,rgba(92,70,40,.22) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .06' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .38 -.14'/%3E%3C/filter%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E")}
.focus{z-index:55;opacity:0;background:
  repeating-conic-gradient(from 0deg at 50% 38%,var(--ink) 0 .3deg,transparent .3deg 2.1deg),
  repeating-conic-gradient(from 1deg at 50% 38%,var(--ink) 0 .7deg,transparent .7deg 6.7deg);
  -webkit-mask:radial-gradient(circle at 50% 38%,transparent 24%,#000 64%);mask:radial-gradient(circle at 50% 38%,transparent 24%,#000 64%)}
.focus.flash{animation:focus 1s cubic-bezier(.2,.7,.3,1)}
@keyframes focus{0%{opacity:0;transform:scale(1.3)}18%{opacity:.92}100%{opacity:0;transform:scale(1)}}

/* ── rails ── */
.rail{position:fixed;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--jp);font-size:15px;letter-spacing:.9em;color:var(--faint);user-select:none;z-index:1}
.rail.l{left:28px}.rail.r{right:28px}
.rail b{color:var(--red-dim);font-weight:400}
[data-mode=vagabond] .rail{font:400 19px var(--brush);letter-spacing:.55em;color:#b3a88e}
@media (max-width:900px){.rail{display:none}}

main{position:relative;z-index:2;max-width:600px;margin:0 auto;padding:0 16px}

/* ═════════════════ 電 lain ═════════════════ */
header{text-align:center;padding:72px 0 40px}
.sky{position:relative;width:300px;height:300px;margin:0 auto;cursor:crosshair;touch-action:none}
.sky .ghost{position:absolute;inset:-60px;display:grid;place-items:center;font:400 330px/1 var(--jp);color:transparent;-webkit-text-stroke:1px #15140f;user-select:none;pointer-events:none}
#moon{position:relative;width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 0 28px rgba(241,239,228,.07))}
.orbit{position:absolute;inset:-22px;border:1px solid var(--line);border-radius:50%;animation:spin 80s linear infinite;pointer-events:none}
.orbit::after{content:"";position:absolute;top:50%;left:-3px;width:5px;height:5px;background:var(--red);box-shadow:0 0 8px var(--red)}
.orbit.o2{inset:-44px;border-style:dashed;border-color:#121110;animation-duration:140s;animation-direction:reverse}
.orbit.o2::after{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.phase{margin-top:30px;color:var(--dim);font-size:11px;letter-spacing:.12em;min-height:1.7em}
.phase .jp{color:var(--fg);font-size:13px;margin-right:.6em}

h1{position:relative;display:inline-block;margin-top:34px;font:300 54px/1 var(--mono);letter-spacing:.55em;margin-right:-.55em;color:var(--hi);text-transform:lowercase}
h1::before,h1::after{content:attr(data-t);position:absolute;inset:0;opacity:0}
h1::before{color:var(--red);clip-path:inset(0 0 58% 0);animation:g1 5s steps(1) infinite}
h1::after{color:#9fb7b4;clip-path:inset(52% 0 0 0);animation:g2 5s steps(1) infinite}
@keyframes g1{0%,90%{opacity:0;transform:none}91%{opacity:.9;transform:translate(-4px,-1px)}93%{transform:translate(3px,0)}95%{opacity:0}}
@keyframes g2{0%,91%{opacity:0;transform:none}92%{opacity:.8;transform:translate(4px,1px)}94%{transform:translate(-2px,0)}96%{opacity:0}}
.reboot main{animation:jitter .5s steps(4)}
.reboot h1::before,.reboot h1::after{animation-duration:.25s}
@keyframes jitter{0%{transform:translate(-6px,2px);clip-path:inset(10% 0 30% 0)}25%{transform:translate(5px,-3px);clip-path:inset(40% 0 5% 0)}50%{transform:translate(-2px,1px);clip-path:none;filter:invert(1)}75%{transform:translate(2px,0);filter:none}}
.type{margin-top:20px;min-height:1.7em;color:var(--fg)}
.type i{font-style:normal;color:var(--red);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tags{margin-top:18px;color:var(--dim);font-size:11px;letter-spacing:.08em}
.tags>span{margin:0 .5em}
.tags .jp{color:var(--fg)}

section{padding:34px 0}
h2{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;font-weight:400;font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:lowercase}
h2 .n{font:400 12px var(--jp);color:var(--red)}
h2 .jp{font-size:20px;letter-spacing:.15em;color:var(--hi)}
h2::after{content:"";flex:1;height:1px;align-self:center;background:linear-gradient(90deg,var(--faint),transparent)}
.js section{opacity:0;transform:translateY(10px);transition:opacity .7s,transform .7s}
.js section.in{opacity:1;transform:none}

.row{display:flex;align-items:baseline;gap:10px;padding:5px 8px;margin:0 -8px;position:relative;transition:background .12s,color .12s}
.row .k{min-width:7ch;color:var(--dim)}
.row .k b{font:400 12px var(--jp);color:var(--fg);margin-right:.5em}
.row .d{flex:1;min-width:12px;border-bottom:1px dotted var(--faint);transform:translateY(-4px)}
.row .v{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.row .a{color:var(--red);opacity:0;transform:translateX(-4px);transition:.15s}
.row:hover,.row:focus-visible{background:var(--hi);color:var(--bg);outline:0}
.row:hover *,.row:focus-visible *{color:var(--bg)!important;border-color:transparent}
.row:hover .a,.row:focus-visible .a{opacity:1;transform:none}

.repos{display:grid;gap:2px}
.repo{display:block;padding:10px 12px;border-left:1px solid var(--faint);transition:border-color .15s,background .15s,padding .15s}
.repo:hover{border-color:var(--red);background:linear-gradient(90deg,rgba(200,48,42,.08),transparent 70%);padding-left:16px}
.repo .t{display:flex;justify-content:space-between;gap:12px}
.repo .t b{font-weight:400;color:var(--hi)}
.repo .t span{color:var(--dim);font-size:11px;white-space:nowrap}
.repo p{color:var(--dim);font-size:12px;margin-top:2px}
.more{display:inline-block;margin-top:12px;color:var(--dim);font-size:11px}
.more:hover{color:var(--red)}
.wait{color:var(--dim)}.wait::after{content:"▮";color:var(--red);margin-left:4px;animation:blink 1s steps(1) infinite}
.err{color:var(--red-dim)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cell{padding:12px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell .l{font-size:10px;letter-spacing:.14em;color:var(--dim)}
.cell .l .jp{color:var(--fg);margin-right:.4em;font-size:11px}
.cell .v{font-size:22px;color:var(--hi);font-weight:300;font-variant-numeric:tabular-nums}
.cell.w2{grid-column:span 2}.cell.w4{grid-column:span 4}
.cell .v.sm{font-size:13px;line-height:1.6;padding-top:4px;font-family:var(--body)}
.langs div{display:grid;grid-template-columns:11ch 1fr 4ch;gap:10px;font-size:12px}
.langs .bar{color:var(--red);letter-spacing:-.05em;overflow:hidden;white-space:nowrap}
.langs .bar s{color:var(--faint);text-decoration:none}
.langs .p{text-align:right;color:var(--dim)}
.sig{color:var(--fg)}.sig em,.cell em{font-style:normal;color:var(--dim)}

.svc .v::before{content:"○";margin-right:8px;color:var(--dim)}
.svc.up .v::before{content:"●";color:var(--ok);text-shadow:0 0 6px var(--ok)}
.svc.down .v::before{content:"●";color:var(--red);text-shadow:0 0 6px var(--red)}
.svc .ms{color:var(--dim);font-size:11px;min-width:7ch;text-align:right}

.wires,.grass{position:relative;z-index:2;display:block;width:100%;height:220px;margin-top:40px}
.wires .pole{stroke:#2e2c26;fill:none}
.wires .w{stroke:#3a3830;fill:none;stroke-width:1}
.wires .pulse{stroke:var(--red);fill:none;stroke-width:1.4;stroke-dasharray:8 1600;stroke-dashoffset:1608;animation:pulse 6s linear infinite;filter:drop-shadow(0 0 3px var(--red))}
@keyframes pulse{to{stroke-dashoffset:0}}

footer{position:relative;z-index:2;text-align:center;padding:10px 16px 44px;color:var(--dim);font-size:11px;letter-spacing:.08em;border-top:1px solid var(--line);background:#030303}
footer .q{font-family:var(--jp);color:var(--fg);font-size:12px;letter-spacing:.25em;margin:18px 0 6px}
footer .lal{color:var(--red-dim);font-size:10px;margin-top:10px;transition:color .3s}
footer .lal:hover{color:var(--red)}

#boot{position:fixed;inset:0;z-index:100;background:var(--bg);padding:28px;font:12px/1.7 var(--mono);color:var(--dim);transition:opacity .45s;cursor:pointer}
#boot b{color:var(--fg);font-weight:400}#boot em{font-style:normal;color:var(--red)}
#boot.out{opacity:0;pointer-events:none}
body.inv{filter:invert(1) hue-rotate(180deg)}

@media (max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}.cell.w4{grid-column:span 2}.sky{width:240px;height:240px}h1{font-size:40px}}

/* ═════════════════ 刀 vagabond ═════════════════ */
[data-mode=vagabond] body{background:radial-gradient(ellipse 70% 50% at 50% 20%,#f3eee2 0%,transparent 70%),var(--bg)}
[data-mode=vagabond] main{max-width:720px;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:16px;padding-bottom:10px}

/* hero splash panel */
[data-mode=vagabond] header{grid-column:1/-1;position:relative;container-type:inline-size;aspect-ratio:600/640;margin-top:64px;padding:0;background:#efe9da;overflow:hidden;text-align:left}
[data-mode=vagabond] header::after{content:"";position:absolute;inset:2px;border:4px solid var(--ink);filter:url(#ink);pointer-events:none;z-index:6}
/* hero art: ink-toned like the plates, colour bleeds in on hover */
[data-mode=vagabond] header::before{content:"";position:absolute;inset:0;background:var(--lq) center/cover;filter:blur(16px) grayscale(1) contrast(1.2);transform:scale(1.15);opacity:.5;transition:opacity .8s}
[data-mode=vagabond] header.ok::before{opacity:0}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:0;
  filter:grayscale(1) sepia(.18) contrast(1.28) brightness(1.08);
  transition:opacity .9s,filter 1.4s cubic-bezier(.2,.7,.2,1),transform 8s cubic-bezier(.2,.7,.2,1)}
header.ok .hero-img{opacity:1}
header:hover .hero-img,header.lit .hero-img{filter:grayscale(0) sepia(0) contrast(1.04) brightness(1.02);transform:scale(1.03)}
.credit{position:absolute;z-index:5;right:4.5cqw;bottom:4.5cqw;writing-mode:vertical-rl;font:400 max(9px,1.5cqw)/1 var(--body);letter-spacing:.14em;color:var(--paper);background:var(--ink);padding:.7em .35em;opacity:.85}
.rain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(104deg,transparent 0 23px,rgba(15,14,12,.18) 23px 24px),repeating-linear-gradient(101deg,transparent 0 41px,rgba(15,14,12,.14) 41px 42px);
  background-size:120px 600px,180px 900px;animation:rain .5s linear infinite;
  -webkit-mask:linear-gradient(transparent 5%,#000 45%,#000 70%,transparent);mask:linear-gradient(transparent 5%,#000 45%,#000 70%,transparent)}
@keyframes rain{to{background-position:-34px 600px,-46px 900px}}
[data-mode=vagabond] .sky{position:absolute;left:34.17%;top:8.6%;width:31.67%;height:auto;aspect-ratio:1;margin:0;z-index:2}
[data-mode=vagabond] .sky::before{content:"";position:absolute;inset:1.5%;border-radius:50%;background:#f3eee2;box-shadow:0 0 50px 14px rgba(243,238,226,.55)}
[data-mode=vagabond] #moon{image-rendering:auto;filter:blur(.6px)}
.enso{position:absolute;left:-14%;top:-14%;width:128%;height:128%;overflow:visible;pointer-events:none}
.enso .reveal{stroke-dasharray:1 1;stroke-dashoffset:0}
.enso.draw .reveal{animation:enso 1.7s cubic-bezier(.55,.05,.25,1) both}
@keyframes enso{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

[data-mode=vagabond] .title{position:absolute;left:5cqw;top:4.5cqw;z-index:3;display:flex;flex-direction:column;align-items:center;gap:2.6cqw}
[data-mode=vagabond] h1{margin:0;writing-mode:vertical-rl;text-orientation:upright;font:400 12.5cqw/1 var(--brush);letter-spacing:-.04em;color:var(--ink);text-transform:none;filter:url(#ink)}
[data-mode=vagabond] h1::before,[data-mode=vagabond] h1::after{display:none}
.seal{display:grid;grid-template-columns:1fr 1fr;gap:.04em .1em;padding:.28em;font:400 max(11px,3cqw)/1.05 var(--brush);color:var(--paper);background:var(--red);transform:rotate(-5deg);filter:url(#ink);box-shadow:inset 0 0 0 .1em var(--red),inset 0 0 0 .16em var(--paper)}

[data-mode=vagabond] .phase{position:absolute;right:4.5cqw;top:4.5cqw;z-index:3;margin:0;min-height:0;writing-mode:vertical-rl;padding:1em .45em;background:#f6f2e8;border:2px solid var(--ink);font-size:max(10px,1.9cqw);letter-spacing:.18em;color:var(--ink)}
[data-mode=vagabond] .phase .jp{font:400 max(13px,3.4cqw)/1 var(--brush);color:var(--ink);margin:0;margin-block-end:.5em;display:block}
[data-mode=vagabond] .ph-en{display:none}
[data-mode=vagabond] .narr{position:absolute;left:4.5cqw;bottom:4.5cqw;z-index:5;max-width:46cqw;padding:1.6cqw 2.4cqw;background:#f6f2e8;border:2px solid var(--ink)}
[data-mode=vagabond] .type{margin:0;min-height:0;font-size:max(12px,2.5cqw);line-height:1.5;color:var(--ink)}
[data-mode=vagabond] .type i{color:var(--red)}
[data-mode=vagabond] .tags{margin:.5em 0 0;font-size:max(10px,1.75cqw);letter-spacing:.1em}
[data-mode=vagabond] .tags>span:first-child{margin-left:0}
[data-mode=vagabond] .tags .jp{font-family:var(--brush);color:var(--red)}

/* panels */
[data-mode=vagabond] section{grid-column:1/-1;position:relative;isolation:isolate;margin:0;padding:40px 22px 22px;background:#efe9da}
[data-mode=vagabond] section::before{content:"";position:absolute;inset:0;border:3px solid var(--ink);filter:url(#ink);pointer-events:none}
[data-mode=vagabond] #p-links{grid-column:1/4;order:1}
[data-mode=vagabond] #p-svcs{grid-column:4/7;order:1}
[data-mode=vagabond] #pl-water{grid-column:1/4;order:2;aspect-ratio:1}
[data-mode=vagabond] #pl-blind{grid-column:4/7;order:2;aspect-ratio:1}
#pl-blind img{object-position:50% 22%}
[data-mode=vagabond] #p-works{order:3}
[data-mode=vagabond] #p-stats{grid-column:1/5;order:4}
[data-mode=vagabond] #pl-sakura{grid-column:5/7;order:4}
[data-mode=vagabond] #p-works::after,[data-mode=vagabond] #p-stats::after{content:"";position:absolute;z-index:-1;pointer-events:none;background:radial-gradient(circle,var(--ink) 1px,transparent 1.4px) 0 0/6px 6px;opacity:.28}
[data-mode=vagabond] #p-works::after{right:3px;top:3px;width:55%;height:75%;-webkit-mask:linear-gradient(215deg,#000,transparent 65%);mask:linear-gradient(215deg,#000,transparent 65%)}
[data-mode=vagabond] #p-stats::after{left:3px;bottom:3px;width:60%;height:60%;-webkit-mask:linear-gradient(35deg,#000,transparent 60%);mask:linear-gradient(35deg,#000,transparent 60%)}
[data-mode=vagabond] h2{position:absolute;top:-15px;left:14px;z-index:2;margin:0;gap:9px;padding:5px 12px 6px;background:var(--ink);color:#a9a08c;font-size:10px;transform:rotate(-1.2deg);align-items:center}
[data-mode=vagabond] h2::after{display:none}
[data-mode=vagabond] h2 .n{font:400 12px var(--brush);color:#e35a4c}
[data-mode=vagabond] h2 .jp{font:400 19px/1 var(--brush);color:var(--paper);letter-spacing:.12em}
[data-mode=vagabond] .row .k b{font-family:var(--brush);color:var(--red)}
[data-mode=vagabond] .row .d{border-bottom:1px solid var(--faint)}
[data-mode=vagabond] .repo{border-left-width:3px}
[data-mode=vagabond] .repo:hover{background:linear-gradient(90deg,rgba(169,42,31,.1),transparent 70%)}
[data-mode=vagabond] .repo .t b{font-weight:600}
[data-mode=vagabond] .grid{border-width:2px}
[data-mode=vagabond] .cell{border-width:0 2px 2px 0;background:rgba(239,233,218,.6)}
[data-mode=vagabond] .cell .l .jp{font-family:var(--brush);color:var(--red)}
[data-mode=vagabond] .cell .v{font:400 30px/1.2 var(--brush);color:var(--ink)}
[data-mode=vagabond] .langs .bar{color:var(--ink)}
[data-mode=vagabond] .cell .v.sm{font:13px/1.6 var(--body);color:var(--fg)}
.seal i{font-style:normal}
[data-mode=vagabond] .svc.up .v::before,[data-mode=vagabond] .svc.down .v::before{text-shadow:none}
[data-mode=vagabond] .wait::after{content:"墨"}

/* manga plates — ink-toned on the paper, colour bleeds in on hover (or when centred on touch screens) */
.plate{position:relative;isolation:isolate;overflow:hidden;margin:0;min-height:200px;background:#e6dfcb}
.plate::before{content:"";position:absolute;inset:0;z-index:0;background:var(--lq) center/cover;filter:blur(14px) grayscale(1) contrast(1.2);transform:scale(1.15);opacity:.55;transition:opacity .8s}
.plate::after{content:"";position:absolute;inset:0;z-index:4;border:3px solid var(--ink);filter:url(#ink);pointer-events:none}
.plate img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:0;
  filter:grayscale(1) sepia(.18) contrast(1.32) brightness(1.06);
  transition:opacity .9s,filter 1.4s cubic-bezier(.2,.7,.2,1),transform 7s cubic-bezier(.2,.7,.2,1)}
.plate.ok img{opacity:1}.plate.ok::before{opacity:0}
.plate:hover img,.plate.lit img{filter:grayscale(0) sepia(0) contrast(1.06) brightness(1.02);transform:scale(1.035)}
#pl-sakura img{object-position:50% 40%}
.plate .cap{position:absolute;z-index:3;top:16px;left:16px;writing-mode:vertical-rl;padding:.8em .45em;background:#f6f2e8;border:2px solid var(--ink);font:400 15px/1.35 var(--brush);letter-spacing:.14em;color:var(--ink)}
#pl-blind .cap{left:auto;right:16px}
#pl-sakura .cap{font-size:13px}
.plate small{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:9px 14px 10px;background:var(--ink);color:var(--paper);font:italic 12px/1.4 var(--body);letter-spacing:.04em;transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.plate:hover small,.plate.lit small{transform:none}
.sfx{position:absolute;z-index:3;left:5%;top:30%;writing-mode:vertical-rl;font:400 76px/.95 var(--brush);color:var(--ink);-webkit-text-stroke:7px #f6f2e8;paint-order:stroke fill;transform:rotate(-9deg) scale(.6);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1) .5s,opacity .2s .5s}
.plate.in .sfx{transform:rotate(-9deg);opacity:1}
.js .plate{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.js .plate.in{clip-path:inset(0)}
.js #pl-water{transition-delay:.12s}.js #pl-blind{transition-delay:.24s}

[data-mode=vagabond] .grass{height:240px;margin-top:60px}
.grass .sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4.5s ease-in-out infinite alternate}
@keyframes sway{from{transform:skewX(-5deg)}to{transform:skewX(4deg)}}
[data-mode=vagabond] footer{background:var(--ink);border:0;color:#8f8775}
[data-mode=vagabond] footer .q{font:400 26px/1.4 var(--brush);color:var(--paper);letter-spacing:.2em;margin-top:6px}
[data-mode=vagabond] footer .lal{color:#c4473a}

@media (max-width:600px){
  [data-mode=vagabond] main{grid-template-columns:1fr;gap:26px}
  [data-mode=vagabond] main>*{grid-column:1/-1!important;grid-row:auto!important}
  [data-mode=vagabond] #pl-sakura{aspect-ratio:4/5}
  [data-mode=vagabond] .sfx{font-size:58px}
  [data-mode=vagabond] .narr{max-width:62cqw}
}

/* ── ink-blot transition (view transitions api) ── */
::view-transition-old(root){animation:none}
::view-transition-new(root){
  animation:ink 1.05s cubic-bezier(.7,0,.3,1) both;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3C/filter%3E%3Cg filter='url(%23b)'%3E%3Ccircle cx='100' cy='100' r='66'/%3E%3Ccircle cx='170' cy='60' r='7'/%3E%3Ccircle cx='38' cy='160' r='9'/%3E%3Ccircle cx='160' cy='158' r='5'/%3E%3Ccircle cx='30' cy='44' r='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3C/filter%3E%3Cg filter='url(%23b)'%3E%3Ccircle cx='100' cy='100' r='66'/%3E%3Ccircle cx='170' cy='60' r='7'/%3E%3Ccircle cx='38' cy='160' r='9'/%3E%3Ccircle cx='160' cy='158' r='5'/%3E%3Ccircle cx='30' cy='44' r='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}
@keyframes ink{
  from{-webkit-mask-size:0 0;mask-size:0 0;-webkit-mask-position:var(--vx) var(--vy);mask-position:var(--vx) var(--vy)}
  to{-webkit-mask-size:340vmax 340vmax;mask-size:340vmax 340vmax;-webkit-mask-position:calc(var(--vx) - 170vmax) calc(var(--vy) - 170vmax);mask-position:calc(var(--vx) - 170vmax) calc(var(--vy) - 170vmax)}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js section{opacity:1;transform:none}.js .plate{clip-path:none}.sfx{opacity:1;transform:rotate(-9deg)}}