:root{
  --bg:#070707;
  --panel:#0d0d0d;
  --panel2:#111111;
  --text:#f2eee5;
  --muted:#8f8a80;
  --gold:#c79a4b;
  --gold2:#e6c47f;
  --line:rgba(230,196,127,.18);
  --line2:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%}
body{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(199,154,75,.08), transparent 28%),
    linear-gradient(180deg,#080808 0%,#050505 100%);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.04) 0 1px, transparent 1.5px);
  background-size:24px 24px, 31px 31px;
  mix-blend-mode:soft-light;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block}

.shell{
  width:100%;
  height:100dvh;
  padding:14px 18px 12px;
  display:grid;
  grid-template-rows:54px minmax(0,1fr) 34px;
  gap:10px;
}

.header,
.footer{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line2);
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.header-left{justify-self:start}
.header-right{justify-self:end}
.brand{
  justify-self:center;
  font-family:Georgia,'Times New Roman',serif;
  font-size:26px;
  letter-spacing:.16em;
  color:var(--gold2);
}

.experience{
  min-height:0;
  display:grid;
  grid-template-columns:180px minmax(0,1fr) 180px;
  gap:20px;
  align-items:center;
}

.rail{
  height:min(680px,82vh);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:14px;
}
.rail-line{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  margin:6px 0;
}
.rail-caption{
  color:#5f5b54;
  font-size:8px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
  margin:4px 0;
}

.side-link{
  position:relative;
  min-height:96px;
  padding:18px 18px 16px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  border:1px solid var(--line2);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    #0c0c0c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 18px 38px rgba(0,0,0,.18);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.side-link::after{
  content:"";
  position:absolute;
  inset:auto 14px 10px;
  height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  opacity:.28;
}
.side-link:hover{
  transform:translateY(-3px);
  border-color:rgba(230,196,127,.34);
  background:#101010;
  box-shadow:0 24px 50px rgba(0,0,0,.28);
}
.side-link.primary{
  border-color:rgba(230,196,127,.30);
  background:
    linear-gradient(135deg, rgba(230,196,127,.10), transparent 45%),
    #11100e;
}
.side-num{
  font-size:8px;
  letter-spacing:.16em;
  color:#6f685e;
}
.side-name{
  font-family:Georgia,'Times New Roman',serif;
  font-size:24px;
  color:#ede4d5;
}
.side-arrow{
  color:var(--gold2);
  font-size:18px;
}
.is-disabled{
  opacity:.34;
  cursor:default;
  filter:saturate(.4);
}

.center{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  justify-items:center;
  gap:16px;
}
.portrait-wrap{
  position:relative;
  width:min(100%, calc(100dvh - 190px), 690px);
  aspect-ratio:1/1;
  padding:12px;
  background:#0b0b0b;
  border:1px solid rgba(230,196,127,.22);
  box-shadow:
    0 42px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.02);
  transform-style:preserve-3d;
  transition:transform .12s ease-out;
}
.portrait-wrap::before,
.portrait-wrap::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.portrait-wrap::before{
  inset:-8px;
  border:1px solid rgba(199,154,75,.10);
}
.portrait-wrap::after{
  inset:20px;
  border:1px solid rgba(255,255,255,.035);
}
.gold-frame{
  position:absolute;
  inset:7px;
  border:1px solid rgba(199,154,75,.32);
  pointer-events:none;
  z-index:2;
}
.portrait-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.portrait-badge{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:3;
  padding:9px 12px;
  border:1px solid rgba(230,196,127,.26);
  background:rgba(7,7,7,.72);
  backdrop-filter:blur(12px);
  color:var(--gold2);
  font-size:10px;
  font-weight:800;
  letter-spacing:.20em;
}

.contract{
  width:min(100%,720px);
  border:1px solid var(--line2);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent),
    rgba(13,13,13,.94);
  padding:12px 14px 12px 16px;
  box-shadow:0 20px 44px rgba(0,0,0,.26);
}
.contract-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 8px;
  color:#6f6a62;
  font-size:8px;
  font-weight:800;
  letter-spacing:.18em;
}
.live-mark{
  color:var(--gold);
}
.contract-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.contract-row code{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:#d9d2c6;
}
.contract-row button{
  min-width:90px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(230,196,127,.26);
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),
    #15130f;
  color:var(--gold2);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:.18s ease;
}
.contract-row button:hover{
  transform:translateY(-1px);
  border-color:rgba(230,196,127,.46);
  background:#19160f;
}

.footer{
  font-size:8px;
}
.footer span:nth-child(2){justify-self:center;color:#777169}
.footer a{justify-self:end;color:var(--gold2)}

@media(max-width:1040px){
  body{overflow:auto}
  .shell{height:auto;min-height:100dvh;grid-template-rows:50px auto 30px}
  .experience{
    grid-template-columns:1fr;
    gap:10px;
  }
  .center{order:1}
  .rail{height:auto;flex-direction:row;order:2}
  .rail-right{order:3}
  .rail-line,.rail-caption{display:none}
  .side-link{flex:1;min-height:76px}
  .portrait-wrap{width:min(100%,680px)}
}
@media(max-width:640px){
  .shell{padding:8px;gap:8px}
  .header-left,.header-right{display:none}
  .header{grid-template-columns:1fr}
  .brand{justify-self:center}
  .rail{gap:8px}
  .side-link{min-height:66px;padding:12px;border-radius:18px}
  .side-name{font-size:18px}
  .portrait-wrap{padding:8px}
  .contract{border-radius:16px}
  .footer span:nth-child(2){display:none}
}