/* Halaman /link/ (bio link Instagram). Sama persis dengan desain. */
:root{
  --bg:#F7F2EC; --paper:#FFFDF9; --sand:#EADBC8; --tan:#C7A985; --bronze:#A67C52; --ink:#2B1E15; --stone:#6F6C66; --line:#E3D6C4;
  --feat:#2B1E15; --feat-ink:#F7F2EC; --feat-muted:#C9B9A6; --glow:#EFE3D3;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Jost","Helvetica Neue",Arial,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#1C1410;--paper:#261B15;--sand:#3A2B21;--tan:#C7A985;--bronze:#D2B89C;--ink:#F3EADF;--stone:#B7AA9A;--line:#43342A;--feat:#D2B89C;--feat-ink:#1C1410;--feat-muted:#4A3A2E;--glow:#2A1F18;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1C1410;--paper:#261B15;--sand:#3A2B21;--tan:#C7A985;--bronze:#D2B89C;--ink:#F3EADF;--stone:#B7AA9A;--line:#43342A;--feat:#D2B89C;--feat-ink:#1C1410;--feat-muted:#4A3A2E;--glow:#2A1F18;color-scheme:dark}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 60% at 50% 0%,var(--glow) 0%,var(--bg) 62%)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
a{color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
main{max-width:500px;margin:0 auto;padding:44px 20px 40px}
header{text-align:center}
.photo{position:relative;width:150px;margin:0 auto;isolation:isolate}
.photo img{display:block;width:150px;height:200px;object-fit:cover;object-position:45% 22%;border-radius:999px 999px 14px 14px;filter:sepia(.12) saturate(.92)}
.photo::after{content:"";position:absolute;inset:-9px -9px 9px 9px;border:1px solid var(--tan);border-radius:999px 999px 18px 18px;z-index:-1}
.mono{position:absolute;right:-18px;bottom:-12px;width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:var(--bronze);font-size:19px;letter-spacing:-.04em}
h1{font-family:var(--serif);font-weight:500;font-size:38px;line-height:1.05;letter-spacing:.02em;margin:30px 0 0}
.role{margin:10px 0 0;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:500}
.bio{margin:14px auto 0;max-width:38ch;color:var(--stone);font-weight:300;font-size:15.5px}
.orn{display:flex;align-items:center;gap:12px;max-width:200px;margin:20px auto 0;color:var(--bronze);font-size:13px}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:var(--tan);opacity:.8}
ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.lk{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:14px 16px 14px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px 10px 28px 10px;text-decoration:none;transition:border-color .2s,transform .2s,background .2s}
.lk:hover{border-color:var(--tan);transform:translateY(-1px)}
.lk:active{transform:translateY(0)}
.ic{width:44px;height:44px;border-radius:50%;background:var(--sand);display:grid;place-items:center}
.ic svg{width:21px;height:21px;fill:none;stroke:var(--bronze);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tx b{display:block;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.15}
.tx small{display:block;margin-top:2px;font-size:13.5px;color:var(--stone);line-height:1.4}
.badge{font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--tan);color:var(--bronze);white-space:nowrap}
.lk.feat{background:var(--feat);border-color:var(--feat);color:var(--feat-ink)}
.lk.feat .ic{background:var(--tan)}
.lk.feat .ic svg{stroke:#2B1E15}
.lk.feat small{color:var(--feat-muted)}
.lk.feat .badge{background:var(--tan);border-color:var(--tan);color:#2B1E15}
.lk.feat:hover{border-color:var(--tan)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lk.feat small{color:#4A3A2E}}
.social{display:flex;justify-content:center;gap:10px;margin-top:30px}
.social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:var(--paper)}
.social a:hover{border-color:var(--tan)}
.social svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
footer{text-align:center;margin-top:22px;font-size:13px;color:var(--stone)}
footer p{margin:0}
footer i{font-family:var(--serif);font-size:17px;color:var(--ink)}
footer a{color:var(--stone)}
@media (max-width:380px){.tx b{font-size:19px}.badge{display:none}}
