.wrap{
  min-height:100%;
  display:grid;
  gap:var(--gap-5);
  padding:var(--gap-3);

  max-width: 1440px;
  margin: 0 auto;

  position: relative;
  z-index: 1;
}

@media (max-width:499px){
  .mobile-bar, .mobile-bar.expanded{ height:48px; padding:6px 10px }
  .mobile-bar .brand img, .mobile-bar.expanded .brand img{ width:24px; height:24px }
  .mobile-bar .name, .mobile-bar.expanded .name{ font-size:14px; }
  .mobile-bar .sub, .mobile-bar.expanded .sub{ display:none }

  .mobile-bar .actions .btn-resume .label, .mobile-bar.expanded .actions .btn-resume .label{ display:inline }
}
@media (min-width:1200px){
  .wrap{ grid-template-columns:360px 1fr; }


  .en-name { font-family: 'Orbitron', sans-serif; }
}

.role, h1, h2, h3 { font-family: 'Orbitron', sans-serif; }

.iconbar{ display:flex; gap: 10px; margin: 14px 0 0; }

.panel{
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 12px 28px rgba(0,0,0,.35);
}
.panel.sticky{ position:sticky; top:var(--gap-3); align-self:start }
.panel-inner{ padding:var(--gap-4) }

.content{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-2); align-content:start }

@media (min-width:1200px){
  .content{
    max-width: 1040px;
    margin: 0 auto;
  }
}

.hero{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:var(--card);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  overflow:hidden;
}
.hero-top{ display:flex; align-items:flex-end; justify-content:space-between; padding:var(--gap-4) var(--gap-4) 0px }
.hero-media{
  height:340px;
  color:rgba(255,255,255,.78);
}

.grid{ display:grid; gap:var(--gap-4) }
@media (min-width:720px){ .grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

.mobile-bar{ display:none; }

@media (max-width:1199px){
  .content{ margin-top: 16px }

  .mobile-bar{
    view-transition-name: mobile-bar;
    position:sticky; top:0; z-index:70;
    background:rgba(14,21,29,.94);
    backdrop-filter:saturate(120%) blur(6px);
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; gap:12px;
    transition: height .24s ease, padding .24s ease, background .2s ease;
    overflow:hidden;
  }
  .mobile-bar .brand{ display:flex; align-items:center; gap:12px; min-width:0 }
  .mobile-bar .brand{ text-decoration:none; color:inherit }
  .mobile-bar .brand img{
    border-radius:10px; object-fit:cover;
    border:1px solid rgba(255,255,255,.18);
    transition: width .24s ease, height .24s ease;
  }
  .mobile-bar .name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition: font-size .24s ease }
  .mobile-bar .sub{ opacity:.85; font-size:12px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }


  .mobile-bar.expanded{ height:96px; padding:10px 12px }
  .mobile-bar.expanded .brand img{ width:64px; height:64px }
  .mobile-bar.expanded .name{ font-size:20px }

  .mobile-bar.expanded .name{ font-family: 'Orbitron', sans-serif }


  .mobile-bar.expanded + .wrap .en-name,
  .mobile-bar.expanded + .wrap .role,
  .mobile-bar.expanded + .wrap h1,
  .mobile-bar.expanded + .wrap h2,
  .mobile-bar.expanded + .wrap h3 {
    font-family: 'Orbitron', sans-serif;
  }


  .mobile-bar.compact{ height:48px; padding:6px 10px }
  .mobile-bar.compact .brand img{ width:24px; height:24px }
  .mobile-bar.compact .name{ font-size:14px }

  .mobile-bar.compact{ font-family: inherit }
  .mobile-bar.compact .sub{ display:none }

  .mobile-bar .actions{ margin-left:auto; display:flex; gap:8px; overflow: hidden; margin-right: 4px;}
  .mobile-bar .actions a{ padding:8px 10px; font-size:12px; border-radius:10px }

  .mobile-bar .actions .label{ display:none }
  .mobile-bar .actions .btn-resume .label{ display:inline }

  .mobile-bar.compact .actions .label{ display:none }
  .mobile-bar.compact .actions { margin-right: 0px }


  .panel.sticky{ display:none }
  .wrap{ grid-template-columns:1fr; padding-top:0 }
}

@media (min-width:1200px) {
  .panel .iconbar { display: flex; align-items: center; }

  .panel .iconbar .btn-resume {
    order: -1;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 0 14px;
  }

  .panel .iconbar .btn-resume .label { display: inline; }
}