/* One visual language for a professional, game-inspired creative portfolio. */
:root{--paper:#f4f1e8;--panel:#fffdf7;--panel-solid:#fffdf7;--ink:#17323c;--muted:#52676e;--line:#17323c26;--accent:#8b631f;--gold:#d5ad60;--stage:#e2e9e4;--focus-ring:#986619;--radius-panel:10px;--radius-control:6px;--font-display:Georgia,'Times New Roman',serif;--shadow-panel:0 16px 50px #17323c08;scroll-padding-top:110px}
html[data-theme=dark]{--paper:#101e28;--panel:#172c37;--panel-solid:#172c37;--ink:#f5f0e4;--muted:#b6c8cb;--line:#c3d4d52e;--accent:#e3bd76;--gold:#dfb76e;--stage:#1c3541;--focus-ring:#ebc47c;--shadow-panel:0 18px 46px #0002}
body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;background:var(--paper);color:var(--ink)}
body:not([data-chapter=menu]){background-image:radial-gradient(ellipse at 90% 0%,#729e9910,transparent 48%)}
body>header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;height:86px;padding:14px clamp(22px,4.4vw,72px);background:var(--paper);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
body:has(.menu:not([hidden]))>header{background:#101e2bf5}
header .wordmark{gap:10px;flex-shrink:0}.personal-lockup b{font-size:13px}.personal-lockup small{font-size:7px;letter-spacing:1.5px}
header .personal-monogram{border-radius:6px!important;box-shadow:inset 0 0 0 3px var(--paper)}
.global-navigation{display:flex;gap:4px;align-items:center;margin:auto}
.global-navigation a{display:flex;align-items:center;gap:8px;min-height:43px;padding:10px 13px;border:1px solid transparent;border-radius:6px;color:var(--muted);text-decoration:none;font-size:12px;white-space:nowrap;transition:background .18s,border-color .18s}
.navigation-icon{display:none}.navigation-number{font-size:9px;opacity:.65;font-variant-numeric:tabular-nums}.navigation-label{font-weight:500}
.global-navigation a:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.global-navigation a[aria-current=page]{color:var(--ink);background:var(--panel);border-color:var(--line);box-shadow:0 2px 0 var(--gold)}
body[data-chapter=menu] .global-navigation a{color:#c0cfce}body[data-chapter=menu] .global-navigation a:hover{background:#ffffff0b;color:#fff5df}body[data-chapter=menu] .global-navigation a[aria-current=page]{color:#f5d49a;background:#ffffff08;border-color:#ddbb7659}
.settings{flex-shrink:0;gap:5px}.settings>button{min-width:37px;width:37px;height:37px;padding:8px;border-radius:6px;font-size:15px}.settings>button>span{display:none}.settings .language-switch{border-radius:6px}.settings .language-switch button{border-radius:4px;min-height:29px;min-width:29px}
main{padding:0 clamp(22px,4.4vw,72px)}
.screen:not(.menu){max-width:1240px;margin:0 auto;padding-bottom:28px}.screenhead{display:block;padding:35px 0 30px;margin:0;max-width:none;border-bottom:1px solid var(--line)}
.screenhead .back[hidden],.screenhead .quicknav[hidden]{display:none!important}
.chapter-kicker{font-size:10px;letter-spacing:1.9px;font-weight:600;color:var(--accent);margin-bottom:11px}
.screenhead h1{font:400 clamp(33px,3.4vw,49px)/1.15 var(--font-display);letter-spacing:-1.4px;text-align:left;margin:0;color:var(--ink)}
.chapter-description{font-size:14px;line-height:1.8;color:var(--muted);max-width:660px;margin:13px 0 0}
.pagefoot{max-width:1240px;padding:22px 0;margin:0 auto;border-top:1px solid var(--line);font-size:10px;letter-spacing:1px}
button,a,input,summary{-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}
:where(button,a,input,summary):focus-visible{outline:2px solid var(--focus-ring)!important;outline-offset:4px}
h1:focus{outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-content{position:fixed;top:8px;left:8px;transform:translateY(-160%);z-index:100;background:var(--panel);padding:12px 18px;color:var(--ink);border:1px solid var(--accent);border-radius:6px}.skip-content:focus{transform:none}
/* The same stage and gold chapter accents carry through the opening screen. */
.menu{min-height:calc(100svh - 86px);padding-bottom:64px}.menu .title-menu{padding-left:2%;gap:16px}.menu .gametitle{font-weight:600;letter-spacing:-5px;line-height:.96;font-size:clamp(66px,7vw,104px)}
.menu .title-lockup .eyebrow{font-size:10px;letter-spacing:2.2px}.menu .work-descriptor{font-size:11px;line-height:1.9;letter-spacing:.4px}.menu-direct-actions a{border-radius:6px;min-height:47px;min-width:166px;transition:transform .18s,background .18s}.menu-direct-actions a:hover{transform:translateY(-2px)}
.menu .game-controls{min-height:122px}.menu .press-start{font-size:12px;letter-spacing:1.2px;animation:none;opacity:.9}.menu .press-start span{font-size:10px;letter-spacing:.2px}.menu #game-menu button{font-size:20px;min-height:42px}.menu #game-menu small{font-size:9px}.menu .menu-character{width:min(100%,470px);max-height:calc(100svh - 160px)}
/* Character sheet: figure, role, and readable information share one rhythm. */
[data-screen=profil] .profilegrid{grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:28px;max-width:none;margin:30px 0 40px;align-items:start}
.profile-character-stage{position:sticky;top:112px;height:610px;max-height:calc(100svh - 140px);min-height:440px;border-radius:10px;border:1px solid #8da7a74d;box-shadow:var(--shadow-panel)}
.profiletext{padding:30px;border:1px solid var(--line);background:var(--panel);border-radius:10px;box-shadow:var(--shadow-panel)}
.profiletext h2{font:400 clamp(34px,3.2vw,48px)/1.12 var(--font-display);letter-spacing:-1.4px;margin:20px 0 14px}.character-class{color:var(--accent);font-size:12px;letter-spacing:0;line-height:1.9;max-width:470px}
.character-tabs{margin-top:24px;border-color:var(--line);gap:0}.character-tabs button{font-size:12px;flex:1;padding:13px 9px;white-space:normal}.character-tabpanel{padding:4px 0 0}.character-tabs button[aria-selected=true]{border-bottom-color:var(--accent)}
.character-education h3{font:400 23px/1.35 var(--font-display)}.profiletext .character-bio{font-size:14px;line-height:1.9}.profile-actions{margin-top:20px;gap:9px}.profile-primary,.profile-secondary,.project-visit,.project-contact{border-radius:6px;min-height:46px;font-size:12px}
.profile-primary,.project-visit{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}.profile-primary:hover,.project-visit:hover{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.profile-secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}.profile-secondary:hover{border-color:var(--accent);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.character-experience{padding:20px 0;border-bottom:1px solid var(--line)}.character-experience h3{font:400 23px/1.3 var(--font-display);margin:0 0 8px}.character-experience p{font-size:13px;line-height:1.8;color:var(--muted);margin:5px 0}.character-experience .experience-role{color:var(--ink);font-weight:600}.character-experience .experience-period{font-size:11px;color:var(--accent)}
.training-item h4{font-size:14px}.training-count{font-variant-numeric:tabular-nums}
/* Selected projects become the collection's three clear entry points. */
.featured-work{margin:26px 0}.featured-options{gap:14px}.featured-options button{position:relative;min-height:139px;padding:22px;background:var(--panel);border-color:var(--line);border-radius:8px;gap:9px;box-shadow:var(--shadow-panel);transition:transform .18s,border-color .18s}
.featured-options button:before{content:'';width:26px;height:2px;background:var(--gold);margin-bottom:3px}.featured-options button:hover{transform:translateY(-3px);border-color:var(--accent)}.featured-options button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--gold) 7%,var(--panel))}.featured-options b{font:400 23px/1.25 var(--font-display)}.featured-options span{font-size:10px;letter-spacing:.6px}.featured-options small{font-size:11px}
[data-screen=portofolio] .sectionbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;padding:20px 0}.sectionbar>.tiny{display:none}.filters{gap:4px;flex-wrap:wrap}[data-screen=portofolio] .filter{padding:10px 13px;border:1px solid transparent;border-radius:5px;font-size:12px}[data-screen=portofolio] .filter.active{border-color:var(--accent);background:var(--panel)}
.project-search{position:relative;min-width:220px;max-width:320px;flex:1}.project-search>span{position:absolute;top:12px;left:12px;width:18px;height:18px;color:var(--muted);pointer-events:none}.project-search svg{width:100%;height:100%}.project-search input{width:100%;min-height:44px;padding:10px 12px 10px 39px;font:12px Arial,sans-serif;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}.project-search input::placeholder{color:var(--muted);opacity:1}
[data-screen=portofolio] .project{border-radius:10px;box-shadow:var(--shadow-panel);border-color:var(--line);grid-template-columns:minmax(0,1.1fr) minmax(310px,1fr)}[data-screen=portofolio] .stage{padding:24px;align-self:stretch;background:var(--stage)}.projectinfo{padding:29px!important}.projectinfo h2{font:400 35px/1.15 var(--font-display);letter-spacing:-.8px}.projectinfo .desc{font-size:14px;line-height:1.9}.projectinfo .details p{font-size:13px;line-height:1.85}.projectinfo .details small{font-size:10px;letter-spacing:.8px;color:var(--accent)}.project-case summary{font-size:13px;min-height:44px}.project-actions{gap:10px}.project-case[open] summary>span{transform:rotate(45deg)}
.content-gallery{margin:24px 0 40px}.content-stage,.content-info{border-radius:10px;box-shadow:var(--shadow-panel)}.content-heading h2{font:400 34px/1.2 var(--font-display);letter-spacing:-.8px}.content-info>h3{font:400 29px/1.25 var(--font-display)}.content-stage{background:var(--stage);padding:24px}.content-info{padding:27px}.content-thumbs button{opacity:.75}.content-thumbs button[aria-pressed=true]{opacity:1}.content-formats button{border-radius:5px}
/* A legible shared-node skill tree with quieter passive connections. */
.rpg-skills{margin:28px 0 36px}.rpg-attributes{gap:10px}.rpg-attribute{padding:19px 16px;border-radius:8px;box-shadow:var(--shadow-panel)}.rpg-stat-heading{gap:6px}.rpg-attribute h3{font-size:13px}.rpg-attribute p{font-size:12px;line-height:1.75}.rpg-graph-heading{margin-top:36px}.rpg-intro h2,.rpg-graph-heading h2{font:400 32px/1.25 var(--font-display);letter-spacing:-.7px}.rpg-board{border-radius:10px;background:var(--stage);padding:30px 24px}.rpg-connections path{opacity:.15}.rpg-connections path.is-active{opacity:1}.rpg-root{background:var(--panel);border-color:var(--line);border-radius:7px}.rpg-branch{background:var(--panel);border-radius:7px;min-height:87px}.rpg-branch b{font-size:12px;line-height:1.6}.rpg-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.rpg-tool{background:var(--panel);border-radius:7px;padding:21px 16px 17px}.rpg-tool h3{font-size:14px;margin-top:8px}.rpg-tool .rpg-inspect{font-size:10px}.rpg-emblem{width:51px;height:51px}.rpg-emblem img{width:30px;height:30px}.rpg-tool.unrelated{opacity:.3}.rpg-approach{border-radius:9px}.rpg-approach h3{font:400 29px/1.25 var(--font-display)}.journey-details{margin:25px 0}.journey-details>summary{border-top:1px solid var(--line);padding:20px 0;color:var(--ink)}
/* One clear conversation action, with familiar alternative channels. */
.about-contact{max-width:none;margin:32px 0 40px;gap:34px;grid-template-columns:1fr 1.12fr;align-items:start}.contact-intro h2{font:400 clamp(32px,3.5vw,47px)/1.15 var(--font-display);letter-spacing:-1px}.contact-intro>p{font-size:14px;line-height:1.9}.contact-hub{padding:28px;border-radius:10px;box-shadow:var(--shadow-panel);border:1px solid var(--line);background:var(--panel)}.contact-hub h3{font:400 29px/1.3 var(--font-display);margin-top:12px}.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-option{margin:0!important;padding:16px 13px;border:1px solid var(--line);border-radius:6px;min-width:0;min-height:88px;gap:10px}.contact-option b{font-size:13px}.contact-option small{font-size:11px;overflow-wrap:anywhere}.contact-option .contact-symbol{flex-shrink:0;width:29px;height:29px;display:grid;place-items:center}.contact-symbol img{width:24px;height:24px;object-fit:contain}.contact-option-primary{grid-column:1/-1;border-color:var(--accent);background:color-mix(in srgb,var(--gold) 10%,var(--panel));padding:21px 16px;min-height:93px}.contact-option-primary b{font-size:16px}.contact-option-primary small{font-size:12px}.studio-note{border-color:var(--line);border-radius:6px}.studio-note img{object-fit:contain}
/* Modal controls and native disclosures follow the same control sizing. */
dialog{border-radius:10px!important;border-color:var(--line)!important;background:var(--panel);color:var(--ink);box-shadow:0 30px 100px #0005}dialog::backdrop{background:#071923b8;backdrop-filter:blur(5px)}.close,.skill-close,.content-dialog-close{min-width:42px;min-height:42px;background:var(--panel);border-color:var(--line);color:var(--ink)}
@media(min-width:1500px){.menu .title-menu{padding-left:7%}.menu .menu-character{width:490px}}
@media(max-width:1180px) and (min-width:1051px){body>header{gap:10px;padding-inline:28px}.global-navigation a{padding:10px;font-size:11px}.navigation-number{display:none}.personal-lockup small{display:none}}
@media(max-width:1050px){body{padding-bottom:88px}body>header{height:75px;padding:14px 5%;gap:12px}.global-navigation{position:fixed;bottom:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;background:#102633f5;border-top:1px solid #adc5c530;padding:8px max(9px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));height:76px;margin:0;box-shadow:0 -8px 30px #07192315;backdrop-filter:blur(16px)}.global-navigation a,.global-navigation a:hover,.global-navigation a[aria-current=page],body[data-chapter=menu] .global-navigation a{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px 2px;min-height:54px;border:0;background:none;box-shadow:none;color:#b6c9ca;font-size:10px;border-radius:5px}.global-navigation a[aria-current=page],body[data-chapter=menu] .global-navigation a[aria-current=page]{color:#f0ce91;background:#ffffff0c;box-shadow:inset 0 2px #e3bd76}.navigation-icon{display:block;width:20px;height:20px}.navigation-icon svg{width:100%;height:100%}.navigation-number{display:none}.screenhead{padding-top:27px}.menu{min-height:calc(100svh - 163px)}.menu .menu-character{max-height:calc(100svh - 200px)}.profile-character-stage{top:100px;height:560px}.rpg-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-options{grid-template-columns:1fr}.contact-option{min-height:70px}.contact-option-primary{min-height:88px}}
@media(max-width:760px){:root{scroll-padding-top:94px}main{padding-inline:20px}.screenhead{padding:25px 0 23px}.screenhead h1{font-size:34px;letter-spacing:-.8px;flex-basis:auto;text-align:left;order:0}.chapter-kicker{font-size:9px;letter-spacing:1.6px;margin-bottom:10px}.chapter-description{font-size:13px;line-height:1.85;margin-top:12px}.personal-lockup b{font-size:12px}.personal-lockup small{font-size:6px}.settings{gap:4px}.settings>button{height:34px;min-width:32px;width:32px;padding:7px;font-size:14px}.settings .language-switch button{min-width:27px}.pagefoot{font-size:9px;line-height:1.7;gap:8px}.menu .title-lockup{padding-top:28px}.menu .title-lockup .eyebrow{font-size:8px}.menu .gametitle{font-size:clamp(47px,13vw,68px);letter-spacing:-2.5px}.menu .work-descriptor{font-size:9px;max-width:330px;line-height:1.9}.menu .menu-character{max-height:none;width:220px;margin:10px 0 -5px}.menu .game-controls{min-height:112px}.menu .press-start{font-size:11px}.menu .menu-footer{font-size:8px;letter-spacing:.3px}.menu-direct-actions a{font-size:11px;min-width:0;min-height:45px}.menu .title-menu{gap:14px}.menu #game-menu button{font-size:19px}.menu #game-menu small{font-size:8px}.menu .menu-footer{padding:15px 0}.profile-character-stage{position:relative;top:auto;width:100%;max-width:420px;height:480px;max-height:none;min-height:0}.profile-figure{height:calc(100% - 150px);top:42px}.profile-stage-caption b{font-size:26px}[data-screen=profil] .profilegrid{display:flex;gap:20px;margin:23px 0 30px}.profiletext{padding:24px 20px}.profiletext h2{font-size:36px;letter-spacing:-1px}.character-class{font-size:12px;line-height:1.9}.character-tabs button{font-size:11px;padding:12px 5px}.character-experience h3{font-size:21px}.profilefacts{grid-template-columns:1fr 1fr}.featured-work{margin:23px 0 18px}.featured-options{grid-template-columns:1fr;gap:9px}.featured-options button{display:grid;grid-template-columns:1fr auto;gap:6px 15px;padding:18px;min-height:110px}.featured-options button:before{display:none}.featured-options span{grid-column:1/-1}.featured-options b{font-size:23px;min-width:0}.featured-options small{align-self:center;font-size:10px}.project-search{max-width:none;min-width:0;flex-basis:100%}.filters{width:100%;gap:3px}[data-screen=portofolio] .filter{font-size:11px;padding:9px 11px;min-height:42px}[data-screen=portofolio] .sectionbar{gap:12px;padding:18px 0 14px}[data-screen=portofolio] .project{grid-template-columns:1fr}[data-screen=portofolio] .stage{padding:17px}.projectinfo{padding:24px 20px!important}.projectinfo h2{font-size:31px}.projectinfo .desc{font-size:13px}.content-heading h2{font-size:29px}.content-stage{padding:17px}.content-info{padding:24px 20px}.content-info>h3{font-size:27px}.content-layout{gap:17px}.rpg-intro h2,.rpg-graph-heading h2{font-size:28px}.rpg-attributes{grid-template-columns:1fr 1fr;gap:9px}.rpg-attribute{padding:16px 13px}.rpg-attribute:last-child{grid-column:1/-1}.rpg-attribute p{font-size:12px;line-height:1.7}.rpg-stat-heading h3{font-size:13px}.rpg-graph-heading{margin-top:27px}.rpg-board{padding:22px 13px}.rpg-tool-grid{grid-template-columns:1fr 1fr;gap:10px}.rpg-tool{padding:18px 11px 15px}.rpg-tool h3{font-size:13px}.rpg-branch{min-height:78px}.rpg-branch b{font-size:12px}.rpg-emblem{width:47px;height:47px}.rpg-emblem img{width:28px;height:28px}.rpg-approach{padding:24px 20px}.rpg-approach h3{font-size:26px}.about-contact{grid-template-columns:1fr;gap:24px;margin-top:23px}.contact-intro h2{font-size:36px;letter-spacing:-.8px}.contact-hub{padding:23px 20px}.contact-hub h3{font-size:28px}.contact-options{gap:9px}.contact-option{min-height:72px;padding:15px 13px}.contact-option-primary{min-height:90px}.contact-intro .studio-note{padding:16px}.contact-option small{font-size:12px}}
@media(max-width:380px){main{padding-inline:16px}.personal-lockup small{display:none}.personal-lockup b{font-size:11px}.global-navigation a{font-size:9px}.menu .menu-character{width:205px}.featured-options b{font-size:21px}.featured-options small{font-size:9px}.filters{gap:1px}[data-screen=portofolio] .filter{padding-inline:8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
body[data-chapter=menu] header .personal-monogram{box-shadow:none}
.project-collection{margin:0 0 24px;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:0 20px}.project-collection>summary{display:flex;align-items:center;gap:12px;min-height:58px;cursor:pointer;list-style:none;font-size:13px;font-weight:600}.project-collection>summary::-webkit-details-marker{display:none}.project-collection>summary small{font-size:11px;font-weight:400;color:var(--muted)}.project-collection>summary b{margin-left:auto;font-size:19px;font-weight:400;color:var(--accent)}.project-collection[open]>summary{border-bottom:1px solid var(--line)}.project-collection[open]>summary b{transform:rotate(45deg)}.project-collection .sectionbar{padding-top:16px}.project-collection .hint{padding-bottom:12px}.project-collection .selector{margin-top:0!important}
@media(max-width:760px){.project-collection{padding-inline:14px;margin-bottom:20px}.project-collection>summary{font-size:12px;min-height:56px}.project-collection>summary small{font-size:10px}}