html,body{height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
body{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
.site-header{position:relative;inset:auto;min-height:58px}
main{position:relative;min-height:0;overflow:hidden;outline:none}
main>section{position:absolute;inset:0;min-height:0!important;height:100%;border:0;padding:0!important;overflow:hidden;display:grid;align-items:center}
main>section[hidden]{display:none!important}
main>section>.wrap{width:100%;transform-origin:top center}
main>section.hero{display:flex;justify-content:center}
.hero-grid{width:100%;flex:0;padding-top:20px;padding-bottom:24px;align-items:center}
.hero h1{font-size:clamp(2.6rem,min(7.4vw,11vh),7rem)}
.portrait{width:min(100%,320px,37vh)}
.hero-bio{margin-top:1rem}.hero-cta{gap:.6rem;margin-top:1rem}
.marquee{flex-shrink:0}.marquee .display{font-size:clamp(1.3rem,3vw,2.6rem)}
.section-title{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:1rem}
.eyebrow{margin-bottom:.7rem}.lede{max-width:52em}
.player-card{margin:1.4rem 0 0;padding:1.4rem}.skills{margin-top:.5rem}
.about-grid{gap:2rem}.profile>div{padding:.5em 0}
.quest button{padding:.65rem 0}.quest .qd{padding-bottom:.7rem;font-size:.95em}
.roadmap{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem}.roadmap:before{display:none}.roadmap li{margin-bottom:.7rem}
.inv-layout{margin-top:1rem}.inv-grid{grid-template-columns:repeat(4,1fr);gap:8px}.slot{aspect-ratio:auto;min-height:68px}.slot .ic{margin-bottom:12px}.detail{position:static}.detail .big{width:64px;margin-bottom:.6rem}
#inventory .tabs{margin-top:1rem!important;margin-bottom:.6rem}
.contact-grid{gap:2rem}.field{margin-top:.5rem}.contact-input{padding:.4rem 0}textarea.contact-input{resize:none}.contact-grid .lede{margin-bottom:1rem!important}
.page-controls{position:relative;display:flex;justify-content:center;align-items:center;min-height:76px;border-top:1px solid var(--line);padding:10px 20px;background:var(--bg);z-index:10}
.next-page{min-width:142px;justify-content:center}.previous-page{position:absolute;left:clamp(16px,3vw,40px);background:none;border:0;color:var(--fg);font:inherit;cursor:pointer;padding:12px 0}.previous-page:disabled{opacity:.3;cursor:default}.page-count{position:absolute;right:clamp(16px,3vw,40px);font-family:var(--mono);color:var(--mute);font-size:.8rem}
.site-footer{padding:9px clamp(16px,3vw,40px);font-size:.75rem}.site-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
@media(max-width:760px){.site-header{min-height:48px;padding:10px 12px}.site-nav{gap:1.1rem;font-size:.9rem}.hero-grid{grid-template-columns:1fr;gap:8px;padding-top:8px;padding-bottom:14px}.portrait-wrap{order:-1}.portrait{width:min(30vw,17vh)}.hero h1{font-size:clamp(2.4rem,8vw,3.6rem)}.hero h1 .ln{white-space:nowrap}.hero-bio{margin-top:.6rem;font-size:.95rem}.term{margin-bottom:.5rem;font-size:.85rem}.hero-cta{gap:.4rem}.hero-cta .btn{font-size:.85rem;padding:.6em .85em}.hero-bio .eyebrow{font-size:.7rem}.section-title{font-size:2.7rem}.about-text p{font-size:1rem;line-height:1.5}.about-grid{grid-template-columns:1fr}.profile{gap:0 1rem}.profile dd{font-size:1rem}.player-card{grid-template-columns:auto 1fr;gap:1rem;padding:1rem}.lvl-ring{width:85px}.skills{grid-template-columns:1fr 1fr;gap:.8rem}.inv-layout{grid-template-columns:1fr;gap:.8rem}.slot{min-height:58px}.detail{padding:.8rem;display:grid;grid-template-columns:48px 1fr;gap:.3rem .8rem}.detail .big{grid-row:1/4;width:48px;margin:0}.detail h3{font-size:1.35rem}.detail>p{grid-column:2;font-size:.85rem}.detail .fx{margin:0;padding-top:.3rem}.legend{font-size:.6rem;gap:.5rem;margin-top:.6rem}.inv-stats{font-size:.75rem;gap:1rem;margin-top:.5rem}.inv-stats b{font-size:1rem}.roadmap{grid-template-columns:1fr;gap:0}.roadmap li{margin-bottom:.8rem}.roadmap p{font-size:.9rem}.contact-grid{grid-template-columns:1fr;gap:.7rem}.contact-grid .lede{font-size:.9rem;margin-bottom:.5rem!important}.contact-big{font-size:1.35rem;margin-bottom:.2rem}.contact-grid p[style*="margin-top"]{margin-top:.3rem!important;font-size:.8rem}.page-controls{min-height:66px}.site-footer span:last-child{display:none}.site-footer{justify-content:center}.quest button{grid-template-columns:1.7rem 1fr auto;gap:.5rem}.quest .qt{font-size:1rem}.status{font-size:.6rem}.tabs{gap:.3rem}.tab{font-size:.8rem;padding:.3em .7em}}
@media(prefers-reduced-motion:reduce){.portrait img{clip-path:none}}
[hidden]{display:none!important}
#about .about-grid{grid-template-columns:1fr;max-width:850px}
#character .profile{max-width:900px;margin-inline:auto}

/* Large chapter cards keep About me readable; full content opens on demand. */
#about>.wrap{width:100%;max-width:1200px;padding:20px 32px}
#about>.wrap>.section-title{font-size:clamp(3rem,6vw,5rem);margin-bottom:4px}
.about-hint{color:var(--mute);margin-bottom:24px;font-size:1.1rem}
.combined-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.content-card{position:relative;min-width:0;min-height:180px;padding:20px;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;transition:background .2s,border-color .2s}
.content-card:hover{background:var(--bg);border-color:var(--fg)}
.card-number{font-family:var(--mono);font-size:.75rem;color:var(--mute);margin-bottom:12px}
.card-title{font-family:var(--display);font-size:1.8rem;line-height:1.1;margin-bottom:10px}
.card-summary{font-size:.95rem;line-height:1.4;color:var(--mute)}
.card-open{margin-top:auto;padding-top:16px;font-size:.8rem;letter-spacing:.05em}
.content-card:first-child{grid-column:span 2}
.content-popup{position:fixed;inset:0;width:min(1100px,calc(100vw - 32px));height:calc(100dvh - 40px);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid var(--line);background:var(--bg);color:var(--fg);overflow:hidden;box-shadow:0 24px 100px #0006}
.content-popup::backdrop{background:rgb(20 18 16 / .72);backdrop-filter:blur(5px)}
.content-popup[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.popup-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line)}
.popup-header h2{font-family:var(--display);font-size:1.8rem;font-weight:400;margin:0}
.popup-close{font:inherit;color:var(--fg);background:transparent;border:1px solid var(--line);padding:8px 14px;cursor:pointer}
.popup-close:hover{border-color:var(--fg)}
.popup-viewport{position:relative;min-height:0;overflow:hidden}
.popup-content{position:absolute;left:50%;top:50%;width:920px;padding:16px 24px;transform-origin:center}
.popup-content>section,.popup-content>article{position:static;height:auto;min-height:0;padding:0;border:0}
.popup-content .section-title{font-size:3.2rem;margin-bottom:16px}
.popup-content .about-text{font-size:1.3rem;line-height:1.7}
.popup-content .profile{gap:0 32px}
.popup-content .profile dd{font-size:1.25rem}
.popup-content .roadmap{grid-template-columns:1fr 1fr}
.popup-content .player-card{grid-template-columns:auto 1fr}
.popup-content .skills{grid-template-columns:1fr 1fr}
.popup-content .inv-layout{grid-template-columns:1.3fr .7fr}
.popup-content .contact-grid{grid-template-columns:1fr 1fr}
.popup-content .detail{display:block;padding:20px}
.popup-content .detail .big{width:64px;margin-bottom:12px}
.popup-content .detail h3{font-size:1.8rem}
.popup-content .detail p{font-size:1rem}
@media(max-width:760px){
  #about>.wrap{padding:12px 18px}
  .about-hint{margin-bottom:12px;font-size:1rem}
  .combined-grid{grid-template-columns:1fr 1fr;gap:10px}
  .content-card{min-height:112px;padding:12px}
  .content-card:first-child{grid-column:span 1}
  .content-card:last-child{grid-column:span 2}
  .card-number{font-size:.65rem;margin-bottom:6px}
  .card-title{font-size:1.5rem;margin-bottom:6px}
  .card-summary{font-size:.85rem}
  .card-open{padding-top:8px;font-size:.7rem}
  .content-popup{width:calc(100vw - 16px);height:calc(100dvh - 20px)}
  .popup-header{padding:12px 16px}
  .popup-header h2{font-size:1.5rem}
  .popup-content{width:560px;padding:16px}
  .popup-content .roadmap,.popup-content .contact-grid,.popup-content .inv-layout{grid-template-columns:1fr}
  .popup-content .about-text{font-size:1.2rem}
  .popup-content .section-title{font-size:2.7rem}
}

/* An editorial player profile with restrained game-inspired motion. */
#about{isolation:isolate}
#about::before,#about::after{content:"";position:absolute;pointer-events:none;z-index:-1;border:1px solid var(--line);border-radius:50%;width:480px;height:480px;opacity:.4}
#about::before{right:-200px;top:-230px}
#about::after{left:-330px;bottom:-280px;width:650px;height:650px}
#about>.wrap{padding-block:16px}
#about>.wrap>.section-title{font-size:clamp(3rem,5vw,4.4rem)}
.about-hint{margin-bottom:14px}
.player-overview{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:32px;padding:14px 0 18px;margin-bottom:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.overview-story .eyebrow{font-size:.7rem;margin-bottom:5px;letter-spacing:.13em}
.overview-name{font-family:var(--display);font-size:1.75rem;line-height:1.15;margin-bottom:6px}
.overview-description{color:var(--mute);font-size:.95rem;line-height:1.45;max-width:56ch}
.overview-level{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.8rem}
.overview-level strong{font-family:var(--display);font-size:2.2rem;font-weight:400}
.overview-xp{height:5px;margin:10px 0;background:var(--line);overflow:hidden}
.overview-xp>span{display:block;width:64%;height:100%;background:var(--fg);transform-origin:left}
.overview-progress>p{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.65rem;color:var(--mute)}
.content-card{min-height:196px;overflow:hidden;transition:transform .25s ease,background .25s,border-color .25s,box-shadow .25s}
.content-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgb(160 150 128 / .13) 48%,transparent 70%);transform:translateX(-130%);transition:transform .7s ease}
.content-card:hover::after,.content-card:focus-visible::after{transform:translateX(130%)}
.content-card:hover,.content-card:focus-visible{transform:translateY(-4px);border-color:var(--fg);box-shadow:0 10px 24px rgb(30 25 20 / .08)}
.content-card:active{transform:translateY(-1px) scale(.985)}
.card-fact{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.66rem;line-height:1.5;color:var(--mute);width:100%}
.card-open{transition:transform .25s ease}
.content-card:hover .card-open,.content-card:focus-visible .card-open{transform:translateX(5px)}
#about:not([hidden]) .content-card>span{animation:chapter-reveal .55s both;animation-delay:var(--chapter-delay)}
#about:not([hidden]) .player-overview{animation:chapter-reveal .6s both}
#about:not([hidden]) .overview-xp>span{animation:xp-fill 1.1s .15s both}
.content-popup[open]{animation:popup-reveal .28s ease-out both}
.content-popup[open]::backdrop{animation:backdrop-reveal .28s ease-out both}
.popup-content>section:not([hidden]),.popup-content>article:not([hidden]){animation:chapter-reveal .35s .06s both}
@keyframes chapter-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes xp-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes popup-reveal{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:760px){
  .player-overview{grid-template-columns:1fr;gap:10px;margin-bottom:12px;padding:10px 0}
  .overview-story .eyebrow{font-size:.65rem}
  .overview-name{font-size:1.5rem}
  .overview-description{font-size:.85rem;max-width:none}
  .overview-level strong{font-size:1.5rem}
  .overview-xp{margin:6px 0}
  .content-card{min-height:138px}
  .card-fact{font-size:.6rem;margin-top:8px;padding-top:6px}
  .card-summary{font-size:.8rem}
  .card-title{font-size:1.4rem}
  .about-hint{font-size:.9rem;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  #about *,#about *::after,.content-popup,.content-popup::backdrop,.popup-content>*{animation:none!important;transition:none!important}
  .content-card:hover,.content-card:focus-visible,.content-card:active,.content-card:hover .card-open{transform:none}
}

/* Personal details remain visible on Home within the fitted page. */
.hero-details{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px 20px;margin:1rem 0 0;padding-top:12px;border-top:1px solid var(--line)}
.hero-details>div{min-width:0}
.hero-details dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.hero-details dd{margin:0;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}
.hero-details a{text-underline-offset:3px}
@media(max-width:760px){.hero-details{gap:8px 12px;margin-top:.7rem;padding-top:9px}.hero-details dt{font-size:.6rem}.hero-details dd{font-size:.8rem}}