/* ============ 12 VISUAL BRANDING — novel palette, mood board, genre ============ */
.vb{position:relative;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");--dfont:'Bebas Neue','Noto Sans JP',Impact,sans-serif;--dmono:'DM Mono','IBM Plex Mono',ui-monospace,monospace;--lac:#c1652d;padding-bottom:14vh}
.vb .cast-tag{color:var(--lac)}.vb .cast-tag::before{background:var(--lac)}
.vb .lore-head h2 .out{color:transparent;-webkit-text-stroke:2px var(--lac)}
.vb-lede{max-width:60ch;margin-top:1.4rem;color:#cfcad8;line-height:1.75;font-size:clamp(.9rem,1.4vw,1.02rem)}
.vb-wrap{max-width:1180px;margin:0 auto;padding:0 6vw}
.vb-h{font:400 .72rem var(--dmono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin:4.5rem 0 1.4rem;display:flex;gap:1rem;align-items:baseline}
.vb-h small{font-size:.6rem;letter-spacing:.16em;opacity:.7;text-transform:none}
.vb-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.vb-sw{display:flex;flex-direction:column;gap:.35rem;padding:0 0 1rem;background:rgba(40,28,20,.35);border:1px solid rgba(201,191,166,.1);
  opacity:0;transform:translateY(34px) rotate(calc((var(--k) - 4) * .6deg));transition:opacity .9s ease calc(var(--k)*90ms),transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--k)*90ms)}
.vb-pal.in .vb-sw{opacity:1;transform:none}
.vb-chip{position:relative;display:block;height:120px;margin-bottom:.5rem;overflow:hidden;background:var(--c);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) calc(var(--k)*90ms + .25s)}
.vb-pal.in .vb-chip{clip-path:polygon(0 3%,14% 0,38% 4%,61% 0,83% 3%,100% 0,100% 97%,82% 100%,57% 96%,33% 100%,12% 97%,0 100%)}
.vb-chip::before{content:'';position:absolute;inset:-40%;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:180px;animation:vbGrain 9s steps(8) infinite}
.vb-chip::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 70%,rgba(255,190,110,.35),transparent 70%);mix-blend-mode:soft-light;animation:vbBreath 5.5s ease-in-out infinite;animation-delay:calc(var(--k) * -.7s)}
.vb-chip i{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,230,190,.22) 50%,transparent 65%);transform:translateX(-120%);animation:vbSheen 7s ease-in-out infinite;animation-delay:calc(var(--k) * .8s + 1.4s)}
.vb-sn{font:400 1.25rem/1 var(--dfont);letter-spacing:.04em;color:var(--ink);padding:0 .9rem}
.vb-hex{font:400 .66rem var(--dmono);letter-spacing:.14em;color:var(--mute);padding:0 .9rem;text-transform:uppercase}
.vb-sd{font-size:.74rem;line-height:1.5;color:#bdb2a0;padding:0 .9rem}
@keyframes vbGrain{0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(5%,-5%)}75%{transform:translate(-4%,-3%)}100%{transform:translate(0,0)}}
@keyframes vbBreath{0%,100%{opacity:.35;transform:translateX(-18%)}50%{opacity:1;transform:translateX(18%)}}
@keyframes vbSheen{0%,70%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
.vb-tile::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:200px;opacity:.28;mix-blend-mode:overlay}
@media (prefers-reduced-motion:reduce){.vb-sw,.vb-chip{transition:none;opacity:1;transform:none;clip-path:none}.vb-chip::before,.vb-chip::after,.vb-chip i{animation:none}}
.vb-board{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:12px;grid-auto-flow:dense}
.vb-tile{position:relative;margin:0;overflow:hidden;background:#1c1f24}
.vb-tile.tall{grid-row:span 2}
.vb-tile.t-aurora{grid-column:span 2}
.vb-tile>svg,.vb-typebox{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vb-tile:hover>svg,.vb-tile:hover .vb-typebox{transform:scale(1.05)}
.vb-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .8rem;background:linear-gradient(transparent,rgba(8,8,10,.88));display:flex;flex-direction:column;gap:.15rem}
.vb-tile figcaption b{font:400 1.2rem/1 var(--dfont);letter-spacing:.05em;color:#fff}
.vb-tile figcaption span{font-size:.72rem;color:#d4d0dc}
.vb-typebox{background:#dfe2e6;display:flex;align-items:center;justify-content:center}
.vb-bigk{font:900 9rem/1 'Noto Serif JP','Noto Sans JP',serif;color:#e3263a;opacity:.9}
.vb-bubble{position:absolute;top:16%;left:9%;background:#fff;color:#1c1f24;border:2px solid #1c1f24;border-radius:999px;padding:.35rem .9rem;font:700 .8rem 'Noto Sans JP',sans-serif}
.vb-bubble.b2{top:auto;bottom:34%;left:auto;right:9%}
.vb-genre{display:grid;grid-template-columns:1.1fr 1fr;gap:14px}
.vb-primary,.vb-comp{background:rgba(40,28,20,.35);border:1px solid rgba(201,191,166,.12);padding:1.6rem}
.vb-primary{border-top:2px solid var(--lac)}
.vb-primary h4{font:400 clamp(2rem,4vw,3rem)/1 var(--dfont);color:var(--ink);margin:.4rem 0 .9rem}
.vb-primary p{color:#cfcad8;line-height:1.75;font-size:.92rem}
.vb-sub{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem!important}
.vb-sub b{color:var(--ink);font-weight:600}
.vb-comps{display:grid;gap:10px}
.vb-comp{padding:1rem 1.2rem}
.vb-comp h4{font:400 1.35rem/1 var(--dfont);letter-spacing:.03em;color:var(--ink);margin:.3rem 0 .45rem}
.vb-comp p{font-size:.78rem;line-height:1.6;color:#b9b4c6}
.vb-ct{font:400 .58rem var(--dmono);letter-spacing:.2em;text-transform:uppercase;color:var(--lac)}
.vb-rules{list-style:none;counter-reset:r;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:0}
.vb-rules li{counter-increment:r;padding:1.2rem;border-left:2px solid var(--lac);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:.4rem}
.vb-rules li::before{content:counter(r,decimal-leading-zero);font:400 .62rem var(--dmono);letter-spacing:.2em;color:var(--lac)}
.vb-rules b{font:400 1.2rem/1.05 var(--dfont);letter-spacing:.03em;color:var(--ink)}
.vb-rules span{font-size:.78rem;line-height:1.6;color:#b9b4c6}
#neutralwash{background:radial-gradient(60vw 50vh at 20% 10%,rgba(193,101,45,.10),transparent 70%),radial-gradient(60vw 55vh at 90% 90%,rgba(70,81,47,.18),transparent 70%),linear-gradient(180deg,#120e0b,#0c0907 60%,#140f0b)}
@media (max-width:820px){.vb-board{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.vb-tile.t-aurora{grid-column:span 2}.vb-genre{grid-template-columns:1fr}}
@media (max-width:520px){.vb-board{grid-template-columns:1fr}.vb-tile.t-aurora{grid-column:auto}.vb-tile.tall{grid-row:span 2}}

.vb-prose{list-style:none;padding:0;display:grid;gap:10px}
.vb-prose li{display:grid;grid-template-columns:minmax(150px,.7fr) 2rem 2fr;align-items:center;gap:1rem;padding:1.1rem 1.3rem;background:rgba(40,28,20,.35);border:1px solid rgba(201,191,166,.12);
  opacity:0;transform:translateX(-24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.vb-prose li.in{opacity:1;transform:none}
.vp-from{font:400 .66rem var(--dmono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.vp-arrow{color:var(--lac);font-size:1.2rem;text-align:center}
.vp-to{display:flex;flex-direction:column;gap:.3rem}
.vp-to b{font:400 1.3rem/1 var(--dfont);letter-spacing:.03em;color:var(--ink)}
.vp-to span{font-size:.8rem;line-height:1.6;color:#bdb2a0}
@media (max-width:640px){.vb-prose li{grid-template-columns:1fr}.vp-arrow{display:none}}
@media (prefers-reduced-motion:reduce){.vb-prose li{opacity:1;transform:none;transition:none}}