/* V27: compact typed hero, WebGL/noise field story, stronger full-stack reading design, no Story/Project quick buttons. */
:root{--v27-cyan:#5accf5;--v27-red:#f55a6b;--v27-green:#7dffb0;--v27-ink:#06090e;--v27-ease:cubic-bezier(.2,1,.3,1)}
/* Home hero: keep the JJK shell, but stop the giant text from dominating the screen. */
.home-v20 .project-hero-v20{min-height:clamp(640px,82dvh,900px);place-items:center;overflow:hidden;}
.home-v20 .project-hero-v20 .hero-v18__content{margin:clamp(70px,8vw,110px) auto clamp(1rem,3vw,2rem);padding-top:clamp(.75rem,2vw,1.25rem);}
.home-v20 .home-intro-v25{opacity:.92;transform:translateY(-.25rem);}
.home-v20 .project-hero-v20 .hero-v18__title{font-size:clamp(3.25rem,10.8vw,8.2rem)!important;line-height:.84!important;letter-spacing:-.055em;margin:.15rem auto .15rem;max-width:min(100%,960px);}
.home-v20 .project-hero-v20 .hero-v18__jp{font-size:clamp(2.05rem,6.4vw,4.8rem)!important;line-height:.92!important;margin:.12rem auto .35rem;max-width:min(96%,900px);}
.home-v20 .project-hero-v20 .hero-v18__sub{font-size:clamp(.72rem,1.34vw,1rem);letter-spacing:.16em;margin:.55rem auto 0;max-width:850px;}
.hero-title-typed-v27{display:inline-block;min-width:min(92vw,700px);white-space:normal;}
.hero-title-typed-v27 .typed-cursor{font-size:.7em;color:var(--v27-cyan);text-shadow:0 0 18px var(--v27-cyan),2px 0 var(--v27-red)}
/* Remove card-style Story/Project buttons from the home surface. Navigation + arrows remain. */
.home-v20 .hero-actions-v19,.home-v20 .quick-v18{display:none!important;}
.home-v20 .footer-v18{padding-top:2rem;}
/* Add a compact full-stack signal strip so the hero is informative without becoming huge. */
.v27-signal-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:.85rem auto 0;max-width:880px;}
.v27-signal-strip span{display:inline-flex;align-items:center;min-height:30px;padding:.35rem .62rem;border-radius:999px;border:1px solid rgba(90,204,245,.36);background:linear-gradient(90deg,rgba(90,204,245,.10),rgba(245,90,107,.08));color:#effcff;font:900 clamp(.64rem,1vw,.8rem)/1 ui-sans-serif,system-ui;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 16px rgba(255,255,255,.035),0 0 20px rgba(90,204,245,.08)}
/* WebGL background layer inspired by the supplied shader/file-grid layout. */
.v27-noise-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.42;mix-blend-mode:screen;filter:saturate(1.25) contrast(1.08);pointer-events:none;}
.project-hero-v20 .v27-noise-canvas{opacity:.32;}
.story-hero-v25 .v27-noise-canvas{opacity:.46;border-radius:inherit;}
.story-hero-v25>*:not(.v27-noise-canvas){position:relative;z-index:4;}
.story-hero-v25{min-height:auto;padding:clamp(1.35rem,3.4vw,2.6rem)!important;border-color:rgba(90,204,245,.44)!important;background:linear-gradient(115deg,rgba(1,9,14,.84),rgba(4,33,41,.74)),url('/jjk/character_bg.jpg') center/cover!important;}
.story-hero-v25:before{background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(90,204,245,.06),rgba(0,0,0,.52)),repeating-linear-gradient(0deg,rgba(125,255,176,.055) 0 1px,transparent 1px 8px)!important;opacity:.85!important;}
.story-profile-v25{grid-template-columns:minmax(0,1fr);gap:.75rem;}
.story-profile-v25 .hello-v25{font-size:clamp(.7rem,1vw,.86rem);padding:.35rem .65rem;letter-spacing:.13em;}
.story-profile-v25 h1{font-size:clamp(2.75rem,7.4vw,6rem)!important;line-height:.86!important;margin:.05rem 0 .15rem!important;max-width:min(100%,820px);}
.role-line-v25{gap:.42rem;margin:.15rem 0 .55rem;}
.role-line-v25 span{min-height:32px;padding:.42rem .62rem;font-size:clamp(.72rem,1vw,.86rem);}
.story-profile-v25 .lead-v25{font-size:clamp(.94rem,1.25vw,1.08rem);line-height:1.68;max-width:820px;}
.story-page-v22 .hero-actions-v19{display:none!important;}
.story-file-grid-v27{display:grid;grid-template-columns:repeat(6,minmax(74px,1fr));gap:.7rem;margin:1rem 0 0;max-width:920px;}
.file-icon-v27{position:relative;display:grid;place-items:center;gap:.25rem;min-height:92px;padding:.72rem .48rem;border-radius:1rem;border:1px solid rgba(125,255,176,.25);background:linear-gradient(180deg,rgba(6,18,16,.54),rgba(3,10,14,.72));color:var(--v27-green);text-align:center;text-shadow:0 0 10px rgba(125,255,176,.45);box-shadow:inset 0 0 20px rgba(125,255,176,.035),0 0 28px rgba(90,204,245,.05);transition:opacity .55s ease,filter .55s ease,transform .42s var(--v27-ease),border-color .25s ease;cursor:pointer;overflow:hidden;}
.file-icon-v27:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(125,255,176,.14) 0 1px,transparent 1px 6px),radial-gradient(circle at 50% 0,rgba(90,204,245,.20),transparent 44%);opacity:.22;mix-blend-mode:screen;pointer-events:none;}
.file-icon-v27 b{font-size:1.62rem;line-height:1;filter:drop-shadow(0 0 8px rgba(125,255,176,.4));}
.file-icon-v27 span{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:#d9fff0;font-weight:900;line-height:1.1;}
.file-icon-v27:hover{transform:translateY(-5px) scale(1.035);border-color:rgba(125,255,176,.72);box-shadow:0 0 34px rgba(125,255,176,.14),0 0 42px rgba(90,204,245,.10);}
.file-icon-v27.decaying{opacity:.22;filter:blur(4px) saturate(1.6);transform:scale(1.18) rotate(2deg);}
.viewer-v27{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);width:min(340px,92%);z-index:7;border-radius:1rem;border:1px solid rgba(125,255,176,.38);background:rgba(3,14,11,.82);box-shadow:0 0 34px rgba(125,255,176,.14),inset 0 0 24px rgba(125,255,176,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .42s ease,transform .42s var(--v27-ease);}
.viewer-v27.hidden{opacity:0;pointer-events:none;transform:translateY(12px) scale(.94);}
.viewer-header-v27{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.78rem 1rem;border-bottom:1px solid rgba(125,255,176,.22);font-size:.78rem;font-weight:900;letter-spacing:.08em;color:#baffd2;text-transform:uppercase;}
.viewer-header-v27 button{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;border:1px solid rgba(125,255,176,.28);background:transparent;color:#baffd2;cursor:pointer;}
.viewer-body-v27{padding:.9rem 1rem;color:#dfffee;font-size:.88rem;line-height:1.5;}
/* Make full-stack explanation cards less monotonous and more like readable system files. */
.crit-grid-v22{gap:1rem;}
.crit-grid-v22 article{min-height:190px;padding:1.05rem!important;background:linear-gradient(180deg,rgba(7,15,21,.88),rgba(4,23,30,.74))!important;border-color:rgba(90,204,245,.40)!important;}
.crit-grid-v22 article:nth-child(2n){background:linear-gradient(180deg,rgba(13,14,28,.86),rgba(7,25,34,.74))!important;}
.crit-grid-v22 article span{box-shadow:0 0 18px rgba(255,255,255,.28);}
.crit-grid-v22 h2{font-size:clamp(1.55rem,2.5vw,2.35rem)!important;line-height:.9!important;margin:.82rem 0 .5rem!important;}
.crit-grid-v22 p{line-height:1.62!important;color:#dcecff!important;}
.timeline-v22{background:linear-gradient(90deg,rgba(5,18,24,.90),rgba(8,34,42,.58),rgba(4,13,18,.90))!important;}
.timeline-v22 h2{font-size:clamp(1.6rem,3.4vw,3.1rem)!important;}
.timeline-v22 ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;}
.timeline-v22 li{padding:.8rem .9rem;border-radius:.85rem;border:1px solid rgba(90,204,245,.22);background:rgba(0,0,0,.24);list-style:none;}
/* Arrow controls: stronger bottom-left utility, no competing hero buttons needed. */
.arrow-nav-v26{left:clamp(.65rem,1.6vw,1rem);bottom:clamp(.65rem,1.6vw,1rem);gap:.55rem;}
.arrow-nav-v26 a{width:58px;height:58px;background:rgba(0,8,14,.88);border-color:rgba(125,249,255,.68);}
.arrow-nav-v26 svg{width:36px;}
.arrow-nav-v26 .arrow-label{padding:.45rem .65rem;border-radius:999px;border:1px solid rgba(125,249,255,.28);background:rgba(0,8,14,.66);}
/* Brighter scenic overlay for the root/about island pool page without removing the pool composition. */
body.root-about-v27::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,130,214,.13),transparent 24%,rgba(48,222,255,.14) 58%,rgba(30,120,72,.16)),radial-gradient(ellipse at 18% 23%,rgba(112,194,255,.30),transparent 26%),radial-gradient(ellipse at 82% 24%,rgba(255,106,214,.25),transparent 25%),linear-gradient(100deg,transparent 0 8%,rgba(118,196,255,.10) 18%,transparent 32%,rgba(86,255,173,.08) 58%,transparent 74%,rgba(255,230,140,.10));mix-blend-mode:screen;opacity:.72;}
body.root-about-v27 #main{filter:saturate(1.18) brightness(1.06) contrast(1.03);}
body.root-about-v27 .scenic-label-v27{position:fixed;right:clamp(1rem,2vw,1.4rem);bottom:clamp(1rem,2vw,1.4rem);z-index:4;max-width:min(360px,calc(100vw - 2rem));padding:.82rem 1rem;border:1px solid rgba(255,255,255,.24);border-radius:1rem;background:rgba(3,14,26,.46);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#effcff;font-weight:800;line-height:1.45;box-shadow:0 0 34px rgba(90,204,245,.16);}
body.root-about-v27 .scenic-label-v27 b{display:block;color:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin-bottom:.25rem;}
@media(max-width:920px){.story-file-grid-v27{grid-template-columns:repeat(3,minmax(0,1fr));}.timeline-v22 ol{grid-template-columns:repeat(2,minmax(0,1fr));}.home-v20 .project-hero-v20 .hero-v18__title{font-size:clamp(3rem,15vw,6.2rem)!important}.home-v20 .project-hero-v20 .hero-v18__jp{font-size:clamp(2rem,10vw,3.7rem)!important}}
@media(max-width:560px){.story-file-grid-v27{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.file-icon-v27{min-height:78px}.viewer-v27{position:relative;right:auto;bottom:auto;margin:1rem 0 0;width:100%}.timeline-v22 ol{grid-template-columns:1fr}.home-v20 .project-hero-v20{min-height:78dvh}.home-v20 .project-hero-v20 .hero-v18__title{font-size:clamp(2.8rem,17vw,4.8rem)!important}.v27-signal-strip span{font-size:.62rem}.arrow-nav-v26 .arrow-label{display:none}}
@media(prefers-reduced-motion:reduce){.v27-noise-canvas,.file-icon-v27,.hero-title-typed-v27 .typed-cursor{animation:none!important;transition:none!important}}