@font-face{font-family:WC-Bahnschrift;src:url('assets/bahnschrift.ttf') format('truetype');font-weight:100 900}
@font-face{font-family:WC-Agency;src:url('assets/agency-r.ttf') format('truetype');font-weight:400}
@font-face{font-family:WC-Script;src:url('assets/segoe-script.ttf') format('truetype');font-weight:400}

:root{
  --orange:#ff671f;
  --paper:#c9bdad;
  --muted:#8e8275;
  --line:#725c49;
  --cyan:#62bdc6;
  --panel:rgba(2,12,16,.88);
  --font:WC-Bahnschrift,'Arial Narrow',sans-serif;
}

body{font-family:var(--font);font-stretch:condensed}
.scene{background-position:center 46%;background-size:cover}
.scene:before{background:linear-gradient(90deg,rgba(0,8,11,.96) 0%,rgba(2,12,16,.67) 45%,rgba(1,9,12,.72) 100%),linear-gradient(0deg,rgba(0,6,8,.88),transparent 52%);backdrop-filter:saturate(.48) contrast(1.06)}
.scene:after{background-image:linear-gradient(rgba(95,120,120,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(95,120,120,.035) 1px,transparent 1px),radial-gradient(circle at 48% 39%,transparent 0,rgba(0,0,0,.48) 79%);background-size:30px 30px,30px 30px,100% 100%}

.ui{grid-template-columns:178px minmax(0,1fr);grid-template-rows:70px 773px 74px;padding:0 30px 24px;column-gap:20px}
.topbar{grid-template-columns:430px 1fr 520px;letter-spacing:1.15px}
.brand{gap:27px;font-family:'Segoe UI',sans-serif;font-size:19px;letter-spacing:.3px}
.world,.server{font-family:WC-Agency,var(--font);font-size:13px;letter-spacing:1.45px;color:#8b7c6f}
.online{font-family:WC-Agency,var(--font);font-size:19px}

.side{height:773px}
.crest{height:178px;flex-basis:178px}
.crest-mark{position:relative;width:78px;height:58px;margin:0 auto;color:#b9aea1;filter:none;font-size:0}
.crest-mark:before{content:"";position:absolute;left:6px;right:6px;bottom:6px;height:45px;background:repeating-linear-gradient(90deg,#b9aea1 0 8px,transparent 8px 15px);clip-path:polygon(0 17%,17% 17%,17% 0,36% 0,36% 17%,50% 17%,50% 0,68% 0,68% 17%,85% 17%,85% 0,100% 0,100% 55%,50% 100%,0 55%)}
.crest-mark:after{content:"";position:absolute;left:10px;right:10px;bottom:23px;border-top:1px solid #061014;box-shadow:0 9px 0 #061014}
.crest strong{font-family:WC-Agency,var(--font);font-size:17px;font-weight:400;letter-spacing:4px;margin-top:11px}
.crest small{font-family:WC-Agency,var(--font);font-size:11px;letter-spacing:1px}
.nav-btn{min-height:54px;padding:0 10px 0 59px;font-family:WC-Agency,var(--font);font-size:17px;font-weight:400;letter-spacing:2.3px}
.nav-btn .svg-icon{position:absolute;left:21px;top:50%;transform:translateY(-50%);width:23px;height:23px;color:#c6baaa}
.nav-btn.active .svg-icon{color:var(--orange)}
.nav-btn .nav-label{position:static;display:block;transform:none;font-size:inherit;line-height:1.05;letter-spacing:inherit}
.system{font-family:WC-Agency,var(--font);font-size:12px;line-height:1.45;letter-spacing:1.1px}

.content{padding-top:12px;padding-right:7px;height:773px}
.profile-layout{grid-template-columns:minmax(0,1fr) 368px;gap:35px}
.main{gap:0}
.profile-hero{height:369px;flex:0 0 369px}
.page-title{top:10px;left:4px;font-family:WC-Agency,var(--font);font-size:39px;font-weight:400;letter-spacing:4px;line-height:1}
.map-lines{inset:0 0 0 0;opacity:.65;background:repeating-radial-gradient(ellipse at 28% 49%,transparent 0 22px,rgba(140,129,112,.14) 23px 24px);transform:rotate(-6deg) scale(1.22)}
.portrait{left:68px;top:51px;bottom:auto;width:266px;height:323px;object-fit:cover;object-position:center;filter:none;mix-blend-mode:normal;mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 91%,transparent 100%)}
.signature{left:7px;bottom:7px;font-family:WC-Script,cursive;font-size:42px;font-weight:400;color:#b79c7e;letter-spacing:-2px}
.identity{left:46.7%;top:69px;width:52.6%}
.identity h2{font-family:var(--font);font-size:30px;font-weight:560;letter-spacing:.1px;line-height:1}
.identity .id{font-family:WC-Agency,var(--font);font-size:20px;letter-spacing:1px;margin:4px 0 8px}
.badge{font-family:WC-Agency,var(--font);font-size:14px;line-height:1;padding:4px 10px}
.facts{margin-top:18px}
.fact{padding:7px 24px 10px 0;margin-right:24px}
.fact:nth-child(n+4){padding-top:11px}
.label,.panel h3{font-family:WC-Agency,var(--font);font-size:12px;letter-spacing:1.25px}
.value{font-family:WC-Agency,var(--font);font-size:17px;margin-top:5px}
.metrics{left:38.5%;right:0;bottom:2px;height:65px;background:rgba(2,12,15,.71)}
.metric{gap:13px;padding:9px 14px}
.metric-icon{font-family:WC-Agency,var(--font);font-size:31px;font-weight:400}
.metric .value{font-size:17px;margin-top:2px}
.metric.money .value{font-size:19px}

.cards{height:392px;grid-template-rows:205px 178px;gap:9px}
.panel{padding:14px 16px 42px;background:linear-gradient(135deg,rgba(4,16,20,.94),rgba(2,10,13,.88));border-color:rgba(125,97,72,.82);clip-path:polygon(4% 0,96% 0,100% 7%,100% 100%,0 100%,0 7%)}
.panel h3{font-size:16px;font-weight:400;letter-spacing:1.8px;margin-bottom:9px}
.panel p{font-family:WC-Agency,var(--font);font-size:14px;line-height:1.43;color:#b7aa9b}
.bio p{font-size:15px;line-height:1.4;letter-spacing:.12px}
.panel-btn{height:30px;font-family:WC-Agency,var(--font);font-size:15px;letter-spacing:.2px;padding:0 14px}
.doc{grid-template-columns:27px 1fr auto;gap:7px;padding:4px 0;font-family:WC-Agency,var(--font);font-size:12px}
.doc-icon{font-size:19px}
.doc span small{font-size:11px}
.doc em{font-size:11px}
.skill{grid-template-columns:63px 1fr 31px;gap:8px;font-family:WC-Agency,var(--font);font-size:12px;margin:7px 0}
.track{height:3px}
.vehicle-wrap,.property-wrap{gap:13px;align-items:flex-start}
.thumb{width:53%;height:91px;object-fit:cover;filter:none;border:0;background:#071014}
.item-title{font-family:WC-Agency,var(--font);font-size:17px;margin:1px 0 5px}
.vehicle-wrap small,.property-wrap small,.item-note{font-family:WC-Agency,var(--font);font-size:12px}
.item-note{line-height:1.25}
.ach{font-family:WC-Agency,var(--font);font-size:12px;padding:5px 0}
.ach b{font-size:17px}

.rail{gap:10px;height:762px}
.rail .panel{clip-path:polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%)}
.chronology{height:315px;flex:0 0 315px}
.city-events{height:249px;flex:0 0 249px}
.actions{height:178px;flex:0 0 178px}
.timeline{margin-left:16px;padding-left:27px}
.timeline-item{font-family:WC-Agency,var(--font);font-size:12px;line-height:1.12;margin-bottom:11px}
.timeline-item small{font-size:11px}
.timeline-item:before{left:-40px;width:27px;height:27px}
.event{height:48px;grid-template-columns:68px 1fr auto;font-family:WC-Agency,var(--font);font-size:12px;margin:7px 0}
.event-img{width:68px;height:46px;object-fit:cover;filter:none;border:0}
.event small{display:block;font-size:11px}
.event time{font-size:10px}
.action-btn{height:34px;font-family:WC-Agency,var(--font);font-size:15px;margin:7px 0}

.footer{height:58px}
.hint{font-family:WC-Agency,var(--font);font-size:14px;letter-spacing:.3px}
.key{font-family:WC-Agency,var(--font);font-size:17px;padding:6px 11px}

.svg-icon{width:24px;height:24px}
.generic h1{font-family:WC-Agency,var(--font);font-weight:400}

@media(max-aspect-ratio:1.5/1){
  .ui{transform-origin:top left;transform:scale(.78);width:128.2%;height:128.2%}
}