:root{
  --cream:#f6f1ea;
  --cream-2:#efe7db;
  --wine:#5c2430;
  --wine-2:#7a3241;
  --sage:#a9ad93;
  --ink:#33261f;
  --ink-soft:#6b5c50;
  --gold:#b79a6b;
  --card-bg:#ffffff;
  --card-border:#e7ddcd;
  --shadow: 0 8px 24px rgba(92,36,48,0.08);
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  min-height:100%;
}

.bg-texture{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 15% 0%, rgba(169,173,147,0.18), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(92,36,48,0.10), transparent 45%),
    var(--cream);
  z-index:-1;
}

.page{
  max-width:520px;
  margin:0 auto;
  padding:56px 20px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.profile{
  text-align:center;
  margin-bottom:36px;
}

.avatar-ring{
  width:116px;
  height:116px;
  border-radius:50%;
  padding:4px;
  margin:0 auto 18px;
  background: linear-gradient(135deg, var(--gold), var(--wine) 55%, var(--sage));
}

.avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  border-radius:50%;
  border:3px solid var(--cream);
  display:block;
}

.name{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:34px;
  letter-spacing:0.02em;
  margin:0 0 4px;
  color:var(--wine);
}

.role{
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 16px;
  font-weight:500;
}

.bio{
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  max-width:360px;
  margin:0 auto;
  font-weight:300;
}

.links{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:16px 18px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(92,36,48,0.14);
  border-color:var(--wine-2);
}

.card--primary{
  background: linear-gradient(135deg, var(--wine), var(--wine-2));
  border-color:var(--wine);
  color:var(--cream);
}
.card--primary .card-sub{ color:rgba(246,241,234,0.75); }
.card--primary .card-icon{ background:rgba(255,255,255,0.14); color:var(--cream); }
.card--primary .card-arrow{ color:var(--cream); }

.card-icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--cream-2);
  color:var(--wine);
  display:flex;
  align-items:center;
  justify-content:center;
}

.card-text{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
}

.card-title{
  font-size:15.5px;
  font-weight:500;
}

.card-sub{
  font-size:12.5px;
  color:var(--ink-soft);
  margin-top:2px;
}

.card-arrow{
  font-size:18px;
  color:var(--wine);
  flex:0 0 auto;
}

.card--disabled{
  opacity:0.55;
  cursor:not-allowed;
  filter:grayscale(0.3);
}
.card--disabled .card-icon{
  background:#eee6d8;
  color:var(--ink-soft);
}

.card-tag{
  flex:0 0 auto;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--cream-2);
  color:var(--ink-soft);
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--card-border);
}

.footer{
  margin-top:44px;
  font-size:11.5px;
  color:var(--ink-soft);
  text-align:center;
  opacity:0.8;
}

@media (max-width:380px){
  .name{ font-size:29px; }
  .card{ padding:14px; }
}