:root{
      --max: 960px;
      --pad: 20px;
      --radius: 16px;
      --border: rgba(0,0,0,0.08);
      --text: #111;
      --muted: #555;
      --muted2: #777;
}
    *{ box-sizing: border-box; }

    body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.65;
  color:var(--text);
  background:
  radial-gradient(900px 500px at 15% 10%, rgba(255,255,255,0.25) 0%, transparent 60%),
  radial-gradient(900px 500px at 85% 20%, rgba(0,0,0,0.12) 0%, transparent 55%),
  linear-gradient(135deg,#0b1f3a 0%,#1e4f8a 40%,#7fb3ff 100%);
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(900px 500px at 15% 10%, rgba(255,255,255,0.25) 0%, transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(0,0,0,0.12) 0%, transparent 55%);
}

    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 64px var(--pad);
      position: relative;
}

    .hero,
    .card{
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(2px);
      border: 1px solid var(--border);
      border-radius: var(--radius);
}

    .hero{
      margin-top: 14px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 18px;
      backdrop-filter: blur(12px);
      border-color: rgba(255,255,255,0.35);
}
    .name{ margin: 0 0 6px; font-size: 30px; }
    .tagline{ margin: 0 0 10px; color: var(--muted); }
    .portraitWrap{
      width: 147px;
      height: 212px;
      align-self: start;
      margin-top: -8px;
      justify-self: center;
      position: relative;
      z-index: 0;
}
.portraitWrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background: transparent;
  backdrop-filter: none;
}

    .portrait{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      border-radius: 16px;
      border: none;
      display: block;
      background: transparent;
      filter: drop-shadow(0 14px 28px rgba(0,0,0,0.10));
      transform: translateZ(0);
mask-image:
  linear-gradient(to bottom, black 100%, transparent 100%),
  linear-gradient(to right, black 100%, transparent 100%);
mask-composite: intersect;

-webkit-mask-image:
  linear-gradient(to bottom, black 98%, transparent 100%),
  linear-gradient(to right, black 98%, transparent 100%);
-webkit-mask-composite: source-in;
}
    .card{
      padding: 18px;
      margin-top: 14px;
      backdrop-filter: blur(8px);
      border-color: rgba(255,255,255,0.35);
}

    h2{
      margin: 0 0 10px;
      font-size: 13px;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: var(--muted2);
}

    ul{ margin: 0; padding-left: 18px; }
    li{ margin: 6px 0; }

    .muted{ color: var(--muted2); font-size: 14px; }

    .btnRow{ display: flex; gap: 10px; flex-wrap: wrap; }
    .btn{
      padding: 10px 12px;
      border: 1px solid var(--text);
      border-radius: 12px;
      text-decoration: none;
      color: var(--text);
      background: transparent;
}
    .btnGhost{
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      text-decoration: none;
      color: var(--text);
      background: transparent;
}

    footer{
      margin-top: 26px;
      padding-top: 10px;
      border-top: 1px solid rgba(0,0,0,0.06);
      color: var(--muted2);
      font-size: 13px;
}

    @media (min-width: 820px){
      .hero{
        grid-template-columns: 1.35fr auto;
        align-items: start;
}
    .name{ font-size: 34px;
}
}
    .langSwitch{
      position: absolute;
      top: 10px;
      right: 18px;
      left: auto;
      display: flex;
      gap: 10px;
      z-index: 20;
      padding: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(2px);
      border: 1px solid var(--border);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 8px 20px rgba(0,0,0,0.08);

}
    .langSwitch img{
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: block;
      object-fit: cover;
      transition: transform .15s ease;
}
    .langSwitch a{
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.langSwitch img:hover{
  transform: scale(1.06);
}
.langSwitch a:active img{ transform: scale(0.96); }

/* Step 2 — share button: make <button> look like link-buttons */
button.btn, button.btnGhost{
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
button.btnGhost.shareBtn:active{
  transform: translateY(1px);
}