:root{--bg:#07080d;--text:#edf4f1;--teal:#2fa391;--teal-bright:#7ce0cf;--purple:#704bde;--line:rgba(58,163,145,.48);--aiko:#c26fe6;--akuma:#d56d63;--shell:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:radial-gradient(circle at top right,rgba(121,82,255,.18),transparent 25%),radial-gradient(circle at bottom left,rgba(42,151,139,.08),transparent 22%),var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;line-height:1.55}body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background:linear-gradient(180deg,transparent 0 8%,rgba(147,102,255,.18) 8% 8.1%,transparent 8.1% 100%),linear-gradient(180deg,transparent 0 34%,rgba(147,102,255,.12) 34% 34.1%,transparent 34.1% 100%),linear-gradient(180deg,transparent 0 61%,rgba(147,102,255,.15) 61% 61.1%,transparent 61.1% 100%),linear-gradient(180deg,transparent 0 88%,rgba(147,102,255,.12) 88% 88.1%,transparent 88.1% 100%)}body.no-scroll{overflow:hidden}img{display:block;max-width:100%;height:auto}a{color:inherit}.shell{width:min(calc(100% - 2rem),var(--shell));margin-inline:auto}.skip-link{position:fixed;left:1rem;top:.75rem;z-index:100;padding:.6rem .85rem;background:#fff;color:#000;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hero{position:relative;min-height:clamp(640px,90vh,920px);overflow:hidden;border-bottom:1px solid var(--line)}.hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 59%}.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.10) 36%,rgba(0,0,0,.24) 100%)}.hero__scanlines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 52px,rgba(144,96,255,.10) 52px 54px,transparent 54px 120px);mix-blend-mode:screen;opacity:.45}.nav{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.12)}.brand{text-decoration:none;font-weight:900;letter-spacing:.18em;color:var(--teal-bright)}.nav__links{display:flex;flex-wrap:wrap;gap:1rem 1.35rem}.nav__links a{text-decoration:none;color:#e1ebe7;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.nav__links a:hover,.nav__links a:focus-visible{text-decoration:underline;text-underline-offset:.35rem}.hero__meta{position:relative;z-index:2;display:flex;justify-content:flex-end;padding-top:3.2rem}.hero__badge{max-width:33rem;padding:1.2rem 1.3rem;background:linear-gradient(180deg,rgba(5,6,10,.48),rgba(5,6,10,.26));border:1px solid rgba(124,224,207,.25)}.eyebrow,.kicker,.panel-label,.file-id{margin:0 0 .6rem;color:var(--teal-bright);font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.hero__line{margin:.35rem 0}.hero__line--big{font-size:1.7rem;line-height:1.35}.section{position:relative;padding:4.3rem 0}.section::before{content:"";position:absolute;left:0;right:0;top:.75rem;height:1px;background:linear-gradient(90deg,transparent,rgba(143,102,255,.24),transparent)}.section--dark{background:linear-gradient(180deg,transparent,rgba(143,102,255,.04)),#05060a;border-block:1px solid rgba(58,163,145,.18)}.section-heading{display:flex;gap:1rem;align-items:baseline;margin-bottom:1.75rem}.section-heading span{color:var(--teal);font-size:.72rem;letter-spacing:.12em}.section-heading h2,.contact h2{margin:0;font-size:clamp(2rem,4.5vw,4.1rem);line-height:1;text-transform:uppercase;letter-spacing:-.04em}.terminal-panel{padding:1.15rem 1.25rem;border:2px solid var(--teal);background:rgba(10,12,18,.96);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,20px 100%,0 calc(100% - 20px))}.terminal-panel--wide{max-width:980px}.terminal-panel--purple{border-color:var(--purple)}.terminal-panel--solid{background:linear-gradient(180deg,#78e2d2,#57bdae);color:#081011}.terminal-panel--solid .panel-label{color:#081011}.logline{margin:0;font-size:clamp(1.1rem,2.1vw,1.8rem);line-height:1.5}.project-grid{margin-top:2.2rem;display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:start}.project-copy{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}.project-copy p{color:#d3dfdb}.project-side{display:grid;gap:1rem}.mini-frame{margin:0;border:1px solid rgba(126,91,255,.28);background:rgba(8,9,14,.96);padding:.75rem}.mini-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;background:#000}.mini-frame figcaption{margin-top:.55rem;color:#8cbab1;font-size:.75rem}.image-zoom{width:100%;padding:0;border:0;background:#000;cursor:zoom-in}.image-zoom:focus-visible{outline:3px solid #fff;outline-offset:4px}.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.character{--accent:var(--teal);border:2px solid var(--accent);background:rgba(8,10,15,.96);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,16px 100%,0 calc(100% - 16px))}.character--aiko{--accent:var(--aiko)}.character--akuma{--accent:var(--akuma)}.character__art{display:grid;grid-template-columns:1.05fr .95fr;gap:1px;background:var(--accent)}.character__art button{background:#000}.character__art img{width:100%;height:178px;background:#000}.art-left img{object-fit:cover;object-position:center}.art-right img{object-fit:contain;object-position:center}.character__body{padding:.85rem .95rem .95rem}.character h3{margin:0;font-size:1.5rem;line-height:1;text-transform:uppercase;color:var(--accent)}.character .role{margin:.35rem 0 .45rem;font-size:.7rem;text-transform:uppercase;color:#d4dfdb}.character__body>p:not(.file-id):not(.role){color:#c4d0cb;font-size:.86rem}.credit-line,.small-credit{margin-top:.8rem;color:#81bdb2;font-size:.74rem}.theme-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:1.25rem;align-items:center}.signal-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}.signal-list li{position:relative;padding-left:1.6rem;font-size:clamp(1rem,1.7vw,1.18rem)}.signal-list li::before{content:"+";position:absolute;left:0;color:var(--teal);font-weight:900}.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.status-grid p{color:#d0dbd7}.status-grid .terminal-panel--solid p{color:#071010}.world-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:1rem;align-items:start}.world-logo-card{display:inline-flex;align-items:center;justify-content:center;background:#f0f0f0;padding:.65rem .8rem;margin-bottom:1rem}.world-logo{width:min(205px,100%)}.lead{color:#eef8f4!important;font-size:1.1rem}.art-frame{margin:0;border:2px solid var(--teal);padding:.55rem;background:#000;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}.art-frame img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}.art-frame figcaption{margin-top:.6rem;color:#8ab8b0;font-size:.74rem}.dev-strip{margin-top:1rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.dev-strip .mini-frame img{aspect-ratio:16/9;object-fit:contain}.contact{background:linear-gradient(180deg,#6b49d8,#583fb1);color:#050608}.contact__inner{display:flex;justify-content:space-between;align-items:end;gap:2rem}.contact__links{display:flex;flex-direction:column;gap:.75rem;align-items:flex-end}.contact .kicker{color:#050608}.contact-note{margin:.9rem 0 0;max-width:38rem}.contact-link{display:inline-block;padding:.85rem 1rem;border:2px solid #050608;text-decoration:none;font-weight:800;background:rgba(255,255,255,.09)}.contact-link--ghost{background:rgba(255,255,255,.18)}.contact-link:hover,.contact-link:focus-visible{background:#050608;color:var(--text)}.footer{display:flex;justify-content:space-between;gap:1rem;padding:1.4rem 0 2rem;color:#8ea29d;font-size:.72rem}.footer p{margin:0}.lightbox{width:min(96vw,1250px);max-width:1250px;padding:1rem;border:1px solid rgba(124,224,207,.7);background:rgba(5,5,8,.97);color:var(--text)}.lightbox::backdrop{background:rgba(0,0,0,.84)}.lightbox__close{display:block;margin-left:auto;width:2.5rem;height:2.5rem;border:1px solid rgba(124,224,207,.7);background:#0a1110;color:var(--text);font-size:2rem;line-height:1;cursor:pointer}.lightbox__figure{margin:.75rem 0 0}.lightbox__figure img{width:100%;max-height:calc(90vh - 8rem);object-fit:contain;background:#000}.lightbox__figure figcaption{margin-top:.8rem;color:#b9d1ca;font-size:.88rem}:focus-visible{outline:3px solid #fff;outline-offset:4px}@media (max-width:1100px){.character-grid{grid-template-columns:1fr 1fr}.project-grid,.theme-grid,.world-grid,.status-grid{grid-template-columns:1fr}.project-copy{grid-template-columns:1fr 1fr}.dev-strip{grid-template-columns:1fr 1fr}}@media (max-width:720px){.shell{width:min(calc(100% - 1.25rem),var(--shell))}.hero{min-height:700px}.nav{display:block}.nav__links{margin-top:1rem;justify-content:flex-start;gap:.7rem 1rem}.nav__links a{font-size:.68rem}.hero__meta{justify-content:flex-start;padding-top:18rem}.hero__badge{max-width:none}.hero__line--big{font-size:1.2rem}.project-copy,.character-grid,.theme-grid,.status-grid,.world-grid,.dev-strip{grid-template-columns:1fr}.character__art img{height:180px}.contact__inner,.footer{display:block}.contact__links{margin-top:1.5rem;align-items:stretch}.contact-link{width:100%;text-align:center}.footer a{display:inline-block;margin-top:.5rem}}@media (max-width:420px){.terminal-panel,.character,.art-frame{clip-path:none}.lightbox{width:100vw;min-height:100vh;max-width:none;padding:.75rem}.lightbox__figure img{max-height:calc(100vh - 7rem)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v5.2 refinements */
.hero__meta{padding-top:2rem}
.hero__badge{width:max-content;max-width:calc(100vw - 3rem);padding:.95rem 1.15rem}
.hero__line--big{font-size:1.12rem;line-height:1.35;white-space:nowrap}
.hero__badge .eyebrow{margin-bottom:.55rem}

/* body copy uses a consistent reading size */
.project-copy p,.world-copy p,.status-grid p,.character__body>p:not(.file-id):not(.role){font-size:.96rem;line-height:1.6}
.world-copy .lead{font-size:.96rem!important;line-height:1.6}

/* more compact themes block */
#themes{padding-top:3.5rem;padding-bottom:3.5rem}
#themes .section-heading{margin-bottom:1.2rem}
.theme-grid{grid-template-columns:.9fr 1.1fr;gap:1rem}
.signal-list{gap:.65rem}
.signal-list li{font-size:1rem;line-height:1.45}
#themes .art-frame img{max-height:360px}

/* keep all three character cards visible together on desktop */
.character__art img{height:160px}
.character__body{padding:.75rem .9rem .85rem}
.character__body>p:not(.file-id):not(.role){margin-bottom:.25rem}
.character .file-id{font-size:.68rem}
.character h3{font-size:1.42rem}
.character .role{font-size:.68rem}

/* project storyboards are supporting material, not concept art */
.project-side{grid-template-columns:1fr 1fr;align-items:start}
.project-side .mini-frame{padding:.6rem}
.project-side .mini-frame img{aspect-ratio:16/9}
.project-side .mini-frame--mechanism{grid-column:1 / -1;max-width:72%;justify-self:end}
.project-side .mini-frame--mechanism img{max-height:190px;object-fit:contain}

/* World prioritises Luana Romero's world design */
.world-grid{grid-template-columns:.58fr 1.42fr;gap:1.2rem}
#world .art-frame img{aspect-ratio:auto;max-height:none;width:100%;object-fit:contain}
.world-logo-card{padding:.45rem .55rem;margin-bottom:.75rem}
.world-logo{width:170px}
.world-weapon{margin-top:1.15rem;padding:.55rem}
.world-weapon img{aspect-ratio:16/9;max-height:150px;object-fit:contain;background:#fff}
.world-weapon figcaption{font-size:.7rem}

/* status remains last content block before contact */
#status{padding-top:3.8rem;padding-bottom:3.8rem}

@media (max-width:1100px){
  .hero__line--big{font-size:1rem}
  .project-side{grid-template-columns:1fr 1fr}
  .project-side .mini-frame--mechanism{max-width:100%}
  .world-grid{grid-template-columns:1fr}
  .world-weapon{max-width:420px}
}
@media (max-width:720px){
  .hero__badge{width:auto;max-width:none}
  .hero__line--big{font-size:1rem;white-space:normal}
  .project-side{grid-template-columns:1fr}
  .project-side .mini-frame--mechanism{grid-column:auto;max-width:100%;justify-self:stretch}
  .theme-grid{grid-template-columns:1fr}
  .character__art img{height:175px}
}

/* v5.3 refinements */
.brand{font-size:1.6rem;letter-spacing:.16em}
.nav{padding:1rem 0 .95rem}

/* subtle glitch treatment across inner sections */
.section{overflow:hidden}
.section::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:
  radial-gradient(1200px 260px at 110% 20%, rgba(125,74,255,.18), transparent 60%),
  radial-gradient(900px 200px at -10% 75%, rgba(47,163,145,.12), transparent 58%),
  repeating-linear-gradient(180deg, transparent 0 72px, rgba(125,74,255,.08) 72px 73px, transparent 73px 146px),
  linear-gradient(90deg, transparent 0, rgba(255,0,140,.04) 30%, transparent 45%, rgba(0,255,255,.035) 72%, transparent 100%);
mix-blend-mode:screen}
.section > .shell,.section > .world-main,.section > .world-lower{position:relative;z-index:1}

/* project images: two main storyboard frames + smaller mechanism */
.project-side{grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.project-side .project-card-main{padding:.7rem}
.project-side .project-card-main img{aspect-ratio:16/9;object-fit:cover}
.project-side .mini-frame--mechanism{grid-column:2;max-width:62%;justify-self:end;padding:.55rem}
.project-side .mini-frame--mechanism img{max-height:150px;aspect-ratio:16/9;object-fit:contain}
.project-side .mini-frame--mechanism .panel-label{font-size:.68rem}
.project-side .mini-frame figcaption{font-size:.72rem}

/* themes more compact */
#themes{padding-top:2.75rem;padding-bottom:2.75rem}
#themes .section-heading{margin-bottom:1rem}
.theme-grid{grid-template-columns:.86fr 1.14fr;gap:.9rem;align-items:center}
.signal-list{gap:.5rem}
.signal-list li{font-size:.94rem;line-height:1.35}
#themes .art-frame{padding:.45rem}
#themes .art-frame img{max-height:300px}
#themes .art-frame figcaption{margin-top:.35rem}

/* characters: less cramped, more text */
.character__art img{height:170px}
.character__body{padding:.95rem 1rem 1rem}
.character .file-id{font-size:.69rem}
.character h3{font-size:1.5rem}
.character .role{font-size:.69rem;margin:.35rem 0 .5rem}
.character__body>p:not(.file-id):not(.role){font-size:.92rem;line-height:1.55;margin-bottom:0}

/* world: Luana first, text beneath, no empty void */
#world .section-heading{margin-bottom:1.2rem}
.world-main{margin-bottom:1rem}
.world-main .art-frame img{width:100%;max-height:620px;aspect-ratio:auto;object-fit:contain}
.world-lower{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;align-items:start}
.world-copy{min-height:100%}
.world-logo-card{margin-bottom:.85rem}
.world-copy p{font-size:.96rem;line-height:1.6}
.world-copy .lead{font-size:.96rem!important;line-height:1.6}
.world-weapon{margin:0;padding:.6rem;align-self:start}
.world-weapon img{aspect-ratio:16/9;max-height:175px;object-fit:contain;background:#fff}
.world-weapon figcaption{font-size:.72rem}

/* hero copy a touch cleaner */
.hero__badge{max-width:37rem}
.hero__line--big{font-size:1.05rem;line-height:1.32}

@media (max-width:1100px){
  .project-grid{grid-template-columns:1fr}
  .project-side .mini-frame--mechanism{grid-column:1 / -1;max-width:46%;justify-self:end}
  .world-lower{grid-template-columns:1fr}
  .world-weapon{max-width:420px}
}
@media (max-width:720px){
  .brand{font-size:1.35rem}
  .theme-grid,.project-side,.world-lower{grid-template-columns:1fr}
  .project-side .mini-frame--mechanism{grid-column:auto;max-width:100%;justify-self:stretch}
  #themes .art-frame img{max-height:none}
  .character__art img{height:180px}
}

/* v5.4 responsive + composition corrections */

/* Artwork-safe hero: full artwork is never cropped on large/wide screens. */
.hero{
  height:min(100vh,56.25vw);
  min-height:620px;
  max-height:920px;
  background:
    linear-gradient(rgba(4,4,8,.22),rgba(4,4,8,.22)),
    url("assets/hero.webp") center center/cover no-repeat;
}
.hero__image{
  object-fit:contain;
  object-position:center center;
  filter:contrast(1.03) saturate(1.04);
}
.hero__veil{background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.08) 38%,rgba(0,0,0,.20) 100%)}
.hero__meta{padding-top:2.1rem}
.hero__badge{max-width:38rem;padding:.9rem 1.1rem;background:rgba(5,6,10,.34);backdrop-filter:blur(1px)}
.hero__line--big{font-size:1.02rem;line-height:1.35;white-space:nowrap}
.brand{font-size:1.7rem}

/* Pitch-deck-like glitch: angular purple/cyan bars rather than generic scanlines. */
.section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.30;
  mix-blend-mode:screen;
  background:
    linear-gradient(132deg,transparent 0 38%,rgba(116,72,224,.20) 38% 44%,transparent 44% 100%) 5% 13%/360px 85px no-repeat,
    linear-gradient(-24deg,transparent 0 42%,rgba(117,78,228,.15) 42% 49%,transparent 49% 100%) 92% 28%/480px 90px no-repeat,
    linear-gradient(155deg,transparent 0 44%,rgba(47,163,145,.12) 44% 49%,transparent 49% 100%) 16% 72%/320px 70px no-repeat,
    linear-gradient(90deg,transparent 0 12%,rgba(133,85,245,.22) 12% 70%,transparent 70%) 73% 62%/250px 4px no-repeat,
    linear-gradient(90deg,transparent 0 8%,rgba(47,163,145,.18) 8% 58%,transparent 58%) 18% 39%/180px 3px no-repeat,
    repeating-linear-gradient(180deg,transparent 0 118px,rgba(126,78,232,.055) 118px 120px,transparent 120px 238px);
}
.section:nth-of-type(even)::after{
  background-position:91% 14%,8% 31%,83% 76%,22% 62%,78% 41%,0 0;
}
.section--dark::after{opacity:.36}

/* Project: two equal storyboard cards; mechanism is small but still landscape and readable. */
.project-side{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  align-items:start;
}
.project-side .project-card-main{width:100%;padding:.65rem}
.project-side .project-card-main img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.project-side .mini-frame--mechanism{
  grid-column:1 / -1;
  width:min(56%,320px);
  max-width:none;
  justify-self:end;
  padding:.5rem;
}
.project-side .mini-frame--mechanism img{
  width:100%;
  max-height:none;
  aspect-ratio:16/9;
  object-fit:contain;
}
.project-side .mini-frame--mechanism .panel-label{font-size:.64rem;line-height:1.35}
.project-side .mini-frame--mechanism figcaption{font-size:.68rem;line-height:1.35}

/* Themes: same composition, simply pulled up and tightened. */
#themes{padding-top:2.2rem;padding-bottom:2.4rem}
#themes .section-heading{margin-bottom:.65rem}
.theme-grid{grid-template-columns:.92fr 1.08fr;gap:.8rem;align-items:center}
.signal-list{gap:.42rem}
.signal-list li{font-size:.92rem;line-height:1.32}
#themes .art-frame{max-width:590px;justify-self:end;padding:.4rem}
#themes .art-frame img{width:100%;height:auto;max-height:320px;object-fit:contain}
#themes .art-frame figcaption{margin-top:.3rem}

/* Characters: readable, not over-compressed. */
.character__art img{height:175px}
.character__body{padding:.95rem 1rem 1rem}
.character__body>p:not(.file-id):not(.role){font-size:.92rem;line-height:1.52}

/* World: Luana is the hero; report copy sits below, logo anchored bottom-right. */
.world-main .art-frame{padding:.6rem}
.world-main .art-frame img{width:100%;height:auto;max-height:680px;object-fit:contain}
.world-lower{grid-template-columns:1.3fr .7fr;gap:1rem;align-items:start}
.world-copy{position:relative;padding-bottom:6.4rem;min-height:270px}
.world-report-logo{
  position:absolute;
  right:1rem;
  bottom:1rem;
  width:150px;
  padding:.35rem .45rem;
  background:#f5f5f5;
  border:1px solid rgba(255,255,255,.15);
}
.world-report-logo img{width:100%;height:auto}
.world-weapon{max-width:360px;justify-self:end}
.world-weapon img{width:100%;height:auto;max-height:190px;object-fit:contain;background:#fff}

/* Status stays last and visually compact. */
#status{padding-top:3.5rem;padding-bottom:3.5rem}

@media (min-width:1800px){
  :root{--shell:1320px}
  .hero{max-height:1080px}
  .hero__badge{max-width:42rem}
  .hero__line--big{font-size:1.08rem}
  .world-main .art-frame img{max-height:760px}
}

@media (max-width:1100px){
  .hero{height:min(100vh,60vw);min-height:600px}
  .hero__line--big{font-size:.98rem}
  .project-grid{grid-template-columns:1fr}
  .project-side .mini-frame--mechanism{width:min(48%,320px)}
  .world-lower{grid-template-columns:1fr}
  .world-weapon{justify-self:start;max-width:420px}
}

@media (max-width:720px){
  .hero{
    height:auto;
    min-height:0;
    padding-bottom:1rem;
    background:#07080d;
  }
  .hero__image{
    position:relative;
    width:100%;
    height:auto;
    object-fit:contain;
    z-index:0;
  }
  .hero__veil,.hero__scanlines{display:none}
  .nav{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(calc(100% - 1.25rem),var(--shell));background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0))}
  .hero__meta{padding-top:.6rem;justify-content:stretch}
  .hero__badge{width:100%;max-width:none;background:rgba(7,8,13,.96)}
  .hero__line--big{font-size:.98rem;white-space:normal}
  .brand{font-size:1.4rem}

  .project-side,.theme-grid,.world-lower{grid-template-columns:1fr}
  .project-side .mini-frame--mechanism{grid-column:auto;width:100%;justify-self:stretch}
  #themes{padding-top:2rem;padding-bottom:2rem}
  #themes .art-frame{max-width:none;justify-self:stretch}
  #themes .art-frame img{max-height:none}
  .world-copy{padding-bottom:5.7rem}
  .world-report-logo{width:125px;right:.8rem;bottom:.8rem}
  .world-weapon{max-width:none;width:100%}
  .character__art img{height:185px}
}

@media (max-width:430px){
  .nav__links{gap:.45rem .7rem}
  .nav__links a{font-size:.62rem}
  .project-copy{grid-template-columns:1fr}
  .character__art{grid-template-columns:1fr 1fr}
  .character__art img{height:165px}
  .world-report-logo{width:112px}
}
.section{isolation:isolate}
.section::after{z-index:0}
.section > *{position:relative;z-index:1}

/* v5.5 corrections */
/* Keep cover as before: no extra section-glitch on the hero itself. */
.hero::after,.hero::before{display:none !important}

/* Project: give the image column more room and organize the three images cleanly. */
#project .project-grid{grid-template-columns:.88fr 1.12fr;gap:1.25rem;align-items:start}
#project .project-copy{grid-template-columns:1fr 1fr;gap:1.25rem}
#project .project-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
#project .project-side .project-card-main{padding:.65rem}
#project .project-side .project-card-main img{display:block;width:100%;height:210px;aspect-ratio:auto;object-fit:contain;background:#000}
#project .project-side .project-card-main figcaption{margin-top:.45rem;font-size:.73rem}
#project .project-side .mini-frame--mechanism{grid-column:1 / -1;justify-self:center;width:min(62%,360px);max-width:none;padding:.5rem}
#project .project-side .mini-frame--mechanism img{display:block;width:100%;height:120px;object-fit:contain;background:#000}
#project .project-side .mini-frame--mechanism .panel-label{font-size:.64rem;line-height:1.3;margin-bottom:.35rem}
#project .project-side .mini-frame--mechanism figcaption{font-size:.68rem;line-height:1.35;margin-top:.4rem}

/* Themes: only tighten vertically, do not distort the artwork. */
#themes{padding-top:2rem;padding-bottom:2.15rem}
#themes .section-heading{margin-bottom:.55rem}
#themes .theme-grid{gap:.75rem;align-items:start}
#themes .signal-list{margin-top:.15rem}
#themes .art-frame{max-width:600px;justify-self:end;padding:.45rem}
#themes .art-frame img{width:100%;height:auto;max-height:310px;object-fit:contain}

/* Characters: restore fuller descriptions. */
#characters .character__body{padding:.95rem 1rem 1rem}
#characters .character__body > p:not(.file-id):not(.role){font-size:.91rem;line-height:1.52;margin:.38rem 0 0}

/* World: clean inverted logo anchored as a report mark in the lower-right corner. */
#world .world-copy{position:relative;padding-bottom:5.2rem}
#world .world-copy .small-credit{margin-bottom:0}
#world .world-report-logo{position:absolute;right:1rem;bottom:.85rem;width:150px;padding:0;background:none;border:0}
#world .world-report-logo img{width:100%;height:auto;display:block;filter:none}

/* Responsive adjustments */
@media (max-width:1180px){
  #project .project-grid{grid-template-columns:1fr}
  #project .project-side .project-card-main img{height:200px}
}
@media (max-width:820px){
  #project .project-copy{grid-template-columns:1fr}
  #project .project-side{grid-template-columns:1fr 1fr}
  #project .project-side .project-card-main img{height:180px}
  #project .project-side .mini-frame--mechanism{width:min(72%,360px)}
}
@media (max-width:720px){
  #project .project-side{grid-template-columns:1fr}
  #project .project-side .project-card-main img{height:auto;aspect-ratio:16/9}
  #project .project-side .mini-frame--mechanism{grid-column:auto;width:100%;justify-self:stretch}
  #project .project-side .mini-frame--mechanism img{height:auto;aspect-ratio:16/9}
  #themes .art-frame{max-width:none;justify-self:stretch}
  #world .world-report-logo{position:static;width:132px;margin:1rem 0 0 auto}
}


/* v5.6 — producer-facing hierarchy and source-clean character copy */

/* The cover already contains its own glitch treatment. Do not duplicate it behind the artwork. */
.hero{
  background:#07080d !important;
  min-height:clamp(640px, 90vh, 920px);
  height:auto;
  max-height:none;
}
.hero__image{
  object-fit:cover !important;
  object-position:center 48% !important;
}
.hero__scanlines{display:none !important}
.hero__veil{
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.07) 38%,rgba(0,0,0,.18) 100%) !important;
}
@media (min-aspect-ratio: 12/5){
  .hero{
    background:#05060a !important;
  }
  .hero__image{
    object-fit:contain !important;
    object-position:center center !important;
  }
}

/* Project: text first, then a single clear visual-development strip.
   The two storyboard frames are primary; the mechanism is supporting material. */
#project{padding-bottom:3.2rem}
#project .project-grid--producer{
  display:block !important;
  margin-top:1.9rem !important;
}
#project .project-copy{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:2rem !important;
  max-width:none !important;
}
#project .project-copy > div{
  max-width:34rem;
}
#project .project-visual-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(180px,.48fr);
  gap:1rem;
  align-items:end;
  margin-top:1.25rem;
}
#project .project-visual-strip__label{
  grid-column:1 / -1;
  border-top:1px solid rgba(124,224,207,.24);
  padding-top:.65rem;
}
#project .project-visual-strip__label .panel-label{margin:0}
#project .project-board{
  margin:0;
  padding:.65rem;
}
#project .project-board img{
  display:block;
  width:100%;
  background:#000;
  object-fit:contain;
}
#project .project-board--main img{
  height:250px;
}
#project .project-board--mechanism{
  padding:.5rem;
  align-self:end;
}
#project .project-board--mechanism img{
  height:145px;
}
#project .project-board figcaption{
  margin-top:.45rem;
  font-size:.72rem;
  line-height:1.35;
}

/* Themes should read in one glance rather than create a full-page pause. */
#themes{
  padding-top:1.7rem !important;
  padding-bottom:1.85rem !important;
}
#themes .section-heading{
  margin-bottom:.45rem !important;
}
#themes .theme-grid{
  grid-template-columns:.92fr 1.08fr !important;
  gap:.65rem !important;
  align-items:center !important;
}
#themes .signal-list{
  gap:.36rem !important;
}
#themes .signal-list li{
  font-size:.9rem !important;
  line-height:1.3 !important;
}
#themes .art-frame{
  max-width:500px !important;
  justify-self:end !important;
  padding:.4rem !important;
}
#themes .art-frame img{
  width:100% !important;
  height:auto !important;
  max-height:255px !important;
  object-fit:contain !important;
}
#themes .art-frame figcaption{
  margin-top:.28rem !important;
}

/* Character text and metadata come only from the supplied pitch deck. */
#characters .character__body > p:not(.file-id):not(.role){
  font-size:.89rem !important;
  line-height:1.48 !important;
  margin:.45rem 0 .7rem !important;
}
.character-meta{
  margin:.55rem 0 0;
}
.character-meta div{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  padding:.32rem 0;
  border-top:1px solid rgba(255,255,255,.09);
}
.character-meta dt,
.character-meta dd{
  font-size:.67rem;
  line-height:1.25;
}
.character-meta dt{
  color:#91a79f;
  text-transform:uppercase;
}
.character-meta dd{
  margin:0;
  text-align:right;
  text-transform:uppercase;
}

/* Inner-page glitch: broken angular report marks inspired by the pitch graphics.
   It stays behind content and does not affect the cover. */
main .section::after{
  opacity:.28 !important;
  background:
    linear-gradient(135deg,transparent 0 44%,rgba(113,72,220,.18) 44% 48%,transparent 48% 100%) 96% 9%/300px 80px no-repeat,
    linear-gradient(135deg,transparent 0 39%,rgba(113,72,220,.13) 39% 43%,transparent 43% 100%) 91% 12%/220px 56px no-repeat,
    linear-gradient(-25deg,transparent 0 45%,rgba(47,163,145,.11) 45% 49%,transparent 49% 100%) 5% 72%/260px 64px no-repeat,
    linear-gradient(90deg,rgba(118,78,225,.18),rgba(118,78,225,.18)) 82% 34%/120px 3px no-repeat,
    linear-gradient(90deg,rgba(47,163,145,.13),rgba(47,163,145,.13)) 11% 58%/95px 2px no-repeat;
  mix-blend-mode:screen;
}

/* Preserve the Vortica report-mark treatment. */
#world .world-report-logo{
  background:none !important;
  border:0 !important;
}
#world .world-report-logo img{
  display:block;
  width:100%;
  height:auto;
}

@media (max-width:1100px){
  #project .project-copy{
    grid-template-columns:1fr 1fr !important;
  }
  #project .project-visual-strip{
    grid-template-columns:1fr 1fr;
  }
  #project .project-board--mechanism{
    grid-column:2;
    width:min(72%,320px);
    justify-self:end;
  }
  #project .project-board--main img{height:220px}
}

@media (max-width:720px){
  .hero{
    min-height:0 !important;
    height:auto !important;
    padding-bottom:1rem;
  }
  .hero__image{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    order:0;
  }
  .hero__veil{display:none}
  .nav{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:min(calc(100% - 1.25rem),var(--shell));
  }
  .hero__meta{
    padding-top:1rem !important;
    display:block !important;
  }
  #project .project-copy{
    grid-template-columns:1fr !important;
    gap:.7rem !important;
  }
  #project .project-visual-strip{
    grid-template-columns:1fr !important;
  }
  #project .project-board--main img,
  #project .project-board--mechanism img{
    height:auto !important;
    aspect-ratio:16/9;
  }
  #project .project-board--mechanism{
    grid-column:auto;
    width:100%;
    justify-self:stretch;
  }
  #themes .theme-grid{
    grid-template-columns:1fr !important;
  }
  #themes .art-frame{
    max-width:none !important;
    justify-self:stretch !important;
  }
  #themes .art-frame img{
    max-height:none !important;
  }
}


/* v5.7 — final alignment, credits and responsive refinements */

/* Keep the cover clean and give the painted title more breathing room on the right. */
.hero{background:#05060a}
.hero__scanlines{display:none !important}
.hero__image{
  width:108% !important;
  left:-8% !important;
  right:auto !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* The nav links and project metadata share one visual rail above the painted BLAZ title. */
.nav__links{
  width:min(640px,52vw);
  margin-left:auto;
  justify-content:center;
}
.hero__meta{
  justify-content:flex-end !important;
  padding-top:2.7rem !important;
}
.hero__badge{
  width:min(640px,52vw);
  max-width:none !important;
  text-align:center;
  padding:1rem 1.15rem !important;
}
.hero__badge .eyebrow{white-space:nowrap}
.hero__line--big{
  font-size:1rem !important;
  line-height:1.35 !important;
  white-space:nowrap;
}
.brand{font-size:1.65rem !important}
.hero__cover-credit{
  position:absolute;
  z-index:3;
  right:max(1rem,calc((100vw - var(--shell))/2));
  bottom:.7rem;
  margin:0;
  color:#8fb9b1;
}

/* One credit size across the page. */
.credit-text,
.small-credit,
.character-section-credit,
.art-frame figcaption,
.mini-frame figcaption{
  font-size:.72rem !important;
  line-height:1.35 !important;
  color:#82b8ae;
}
.character-section-credit{
  margin:.75rem 0 0;
}

/* Akuma: show one full-body study only, without forcing an artificial wide crop. */
.character--akuma .art-right img{
  object-fit:contain !important;
  object-position:center !important;
}

/* Contact: the two actions are sufficient, no duplicate portfolio sentence. */
#contact .contact__inner{align-items:center}
#contact .contact__inner > div:first-child{align-self:center}

/* Cover and hero alignment on very wide screens: preserve the entire artwork instead of over-cropping it. */
@media (min-aspect-ratio: 2/1){
  .hero__image{
    width:100% !important;
    left:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}

@media (max-width: 980px){
  .nav__links,
  .hero__badge{
    width:min(560px,60vw);
  }
  .hero__badge .eyebrow{white-space:normal}
  .hero__line--big{white-space:normal}
}

@media (max-width: 720px){
  .hero__image{
    position:relative !important;
    width:100% !important;
    left:0 !important;
    height:auto !important;
    object-fit:contain !important;
  }
  .hero__meta{
    padding-top:.8rem !important;
    justify-content:stretch !important;
  }
  .hero__badge{
    width:100% !important;
    text-align:left;
  }
  .nav__links{
    width:100%;
    justify-content:flex-start;
  }
  .hero__cover-credit{
    position:static;
    width:min(calc(100% - 1.25rem),var(--shell));
    margin:.4rem auto 0;
  }
}


/* v5.8 hero alignment correction */
@media (min-width: 721px){
  .hero{min-height:clamp(680px,92vh,940px);background:#07080d !important;}
  /* avoid the left black bar: keep the artwork covering the frame and recenter it */
  .hero__image{object-fit:cover !important;object-position:52% 58% !important;left:0 !important;right:0 !important;width:100% !important;height:100% !important;}
  /* align navigation and info panel more with the painted title instead of pushing them to the far right */
  .nav{justify-content:space-between;}
  .nav__links{margin-left:auto;max-width:48%;justify-content:flex-start;}
  .hero__meta{justify-content:center !important;padding-top:2.25rem !important;}
  .hero__badge{margin-left:18vw !important;margin-right:auto !important;max-width:40rem !important;width:auto !important;}
}
@media (min-width: 1100px){
  .hero__badge{margin-left:22vw !important;}
}
@media (min-width: 1400px){
  .hero__badge{margin-left:24vw !important;}
}
@media (max-width: 720px){
  .hero__image{object-fit:cover !important;object-position:center 54% !important;}
}


/* v5.9 hero centering + seeking emphasis */
@media (min-width: 721px){
  /* Keep artwork full bleed and center the informational elements on the painted BLAZ title area. */
  .hero__image{object-fit:cover !important;object-position:center 58% !important;}
  .nav{display:grid !important;grid-template-columns:1fr auto 1fr !important;align-items:center !important;gap:0 !important;}
  .brand{grid-column:1;justify-self:start;}
  .nav__links{grid-column:2;justify-content:center !important;max-width:none !important;margin:0 auto !important;gap:1rem 1.35rem !important;}
  .hero__meta{justify-content:center !important;padding-top:2.15rem !important;}
  .hero__badge{margin:0 auto !important;max-width:42rem !important;width:auto !important;text-align:center !important;}
}
/* Stronger producer CTA in Status */
.status-panel--seeking{border:2px solid #fff !important;box-shadow:0 0 0 2px rgba(124,224,207,.28), 0 12px 40px rgba(0,0,0,.18) !important;}
.status-panel--seeking .panel-label{font-size:1rem !important;letter-spacing:.16em !important;font-weight:900 !important;margin-bottom:.45rem !important;}
.status-panel--seeking p:last-child{font-size:1.02rem !important;line-height:1.45 !important;font-weight:700 !important;}
@media (max-width:720px){
  .status-panel--seeking .panel-label{font-size:.9rem !important;}
  .status-panel--seeking p:last-child{font-size:.98rem !important;}
}


/* v5.10 hero axis correction: center nav and info block on the painted BLAZ title */
@media (min-width: 721px){
  :root{--hero-title-axis:53%;}
  .nav{display:block !important;position:relative !important;padding:1.1rem 0 !important;}
  .brand{position:absolute !important;left:0 !important;top:1.1rem !important;z-index:3;}
  .nav__links{display:flex !important;flex-wrap:wrap !important;width:max-content !important;max-width:none !important;gap:1rem 1.35rem !important;position:relative !important;left:var(--hero-title-axis) !important;transform:translateX(-50%) !important;margin:0 !important;justify-content:center !important;}
  .hero__meta{justify-content:flex-start !important;padding-top:2.2rem !important;}
  .hero__badge{width:max-content !important;max-width:min(42rem,calc(100vw - 3rem)) !important;margin:0 !important;position:relative !important;left:var(--hero-title-axis) !important;transform:translateX(-50%) !important;text-align:center !important;}
}
@media (min-width: 1400px){
  :root{--hero-title-axis:54%;}
}
@media (max-width: 720px){
  .brand{position:static !important;}
  .nav__links{left:auto !important;transform:none !important;width:auto !important;}
  .hero__badge{left:auto !important;transform:none !important;}
}


/* v5.11: align nav + info block to the visual center of the painted BLAZ lettering */
@media (min-width: 721px){
  :root{--hero-title-axis:64%;}
  .nav__links{
    left:var(--hero-title-axis) !important;
    transform:translateX(-50%) !important;
  }
  .hero__badge{
    left:var(--hero-title-axis) !important;
    transform:translateX(-50%) !important;
  }
}
@media (min-width: 1400px){
  :root{--hero-title-axis:63.5%;}
}
@media (min-width: 1750px){
  :root{--hero-title-axis:63%;}
}


/* v5.12: pin hero navigation and info panel to the right edge on desktop */
@media (min-width: 721px){
  .nav{
    display:flex !important;
    position:relative !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:1.5rem !important;
    padding:1.1rem 0 !important;
  }
  .brand{
    position:static !important;
    left:auto !important;
    top:auto !important;
    grid-column:auto !important;
    justify-self:auto !important;
  }
  .nav__links{
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:0 !important;
    justify-content:flex-end !important;
  }
  .hero__meta{
    display:flex !important;
    justify-content:flex-end !important;
    padding-top:2.2rem !important;
  }
  .hero__badge{
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    margin:0 !important;
    width:max-content !important;
    max-width:min(42rem,calc(100vw - 3rem)) !important;
    text-align:center !important;
  }
}