/* V23 /links/: grouped personal bio hub inspired by category-led link pages,
   while preserving Ayodiran's editorial studio palette and lightweight HTML. */
:root{--paper:#f6f6ef;--ink:#202420;--lime:#d4ff65;--line:#d4d7cd;--muted:#5e685d;--display:'Manrope',sans-serif;--sans:'DM Sans',sans-serif;--serif:'Instrument Serif',Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body.links-body{margin:0;min-height:100svh;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #8aaf3e;outline-offset:4px}
.page-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 720px 530px at 50% -75px,rgba(212,255,101,.18),transparent 80%)}
.link-page{position:relative;width:min(calc(100% - 38px),620px);margin:0 auto;padding:27px 0 26px;min-height:100svh;display:flex;flex-direction:column}
.bio-header{text-align:center}
.top-brand{display:flex;justify-content:center;align-items:center;gap:14px;min-height:42px;padding-inline:50px;flex-wrap:wrap}
.brand-word{font:800 29px/.98 var(--display);letter-spacing:-2px}
.brand-dot{color:#86a533}
.brand-detail{font:800 9px var(--sans);letter-spacing:2px;color:#747e70;white-space:nowrap}
.photo-ring{width:140px;height:140px;margin:34px auto 24px;padding:5px;position:relative;background:#fff;border-radius:50%;box-shadow:0 0 0 1px #d8ddcc,0 18px 40px rgba(29,33,23,.09)}
.photo-ring picture{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.portrait{width:100%;height:100%;object-fit:cover;object-position:center 31%;display:block}
.portrait-spark{position:absolute;bottom:-8px;right:-10px;width:43px;height:43px;background:var(--lime);color:#41552a;display:grid;place-items:center;border-radius:50%;font:30px var(--serif);transform:rotate(-14deg)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;letter-spacing:1.4px;font-weight:800;color:#687264;margin:0 0 16px}
.status-dot{height:8px;width:8px;background:#95b93f;border-radius:50%;box-shadow:0 0 0 4px #e2edcb;flex:0 0 auto}
h1{font:800 clamp(39px,7vw,55px)/1.13 var(--display);letter-spacing:-.078em;margin:0 0 13px}
h1 em,h2 em{font:italic 1.12em var(--serif);letter-spacing:-.04em;white-space:nowrap}
.intro{font:400 15px/1.74 var(--sans);color:#596256;max-width:500px;margin:0 auto}
.link-collections{margin-top:52px;display:grid;gap:49px}
.link-group{margin:0;min-width:0}
.group-heading{margin-bottom:16px}
.group-index{display:flex;align-items:center;gap:13px;color:#65735d;font-size:10px;letter-spacing:1.5px;font-weight:800}
.group-index::after{content:'';height:1px;flex:1;background:#d1d6c8}
h2{font:800 clamp(26px,4.8vw,34px)/1.17 var(--display);letter-spacing:-.06em;margin:16px 0 8px}
.group-heading p{margin:0;color:#697265;font-size:13px;line-height:1.5}
.link-stack{display:grid;gap:10px}
.bio-link{min-height:84px;padding:14px 17px;border:1px solid #d8ddd1;border-radius:14px;background:#fffef9;box-shadow:0 4px 14px rgba(22,34,21,.025);display:flex;align-items:center;gap:17px;transition:background-color .22s ease,transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.bio-link:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(25,30,21,.08);border-color:#9faf89}
.bio-link-primary{background:#202420;color:#fff;border-color:#202420;min-height:91px}
.bio-link-primary:hover{background:#333d31;border-color:#333d31}
.link-icon{width:47px;height:47px;flex:0 0 47px;background:#eaf0de;border-radius:12px;display:grid;place-items:center;color:#536546}
.link-icon svg{display:block;width:23px;height:23px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.bio-link-primary .link-icon{background:var(--lime);color:#263521}
.link-text{min-width:0;display:flex;flex:1;flex-direction:column;gap:5px}
.link-text strong{font:800 12px/1.25 var(--display);letter-spacing:.52px}
.link-text small{font:400 12px/1.45 var(--sans);color:#667164}
.bio-link-primary .link-text small{color:#d7e0d2}
.link-arrow{font-size:23px;line-height:1;color:inherit;flex:0 0 auto;transition:transform .22s ease}
.bio-link:hover .link-arrow{transform:translate(3px,-3px)}
.affiliate-note{font:400 11px/1.65 var(--sans);color:#727d6d;margin:36px 4px 0}
.link-footer{border-top:1px solid #d4dbce;margin-top:26px;padding:25px 0 4px;display:flex;align-items:center;justify-content:center;gap:19px;color:#7c8877;font-size:9px;font-weight:800;letter-spacing:1.25px}
.link-footer span:nth-child(2){font-size:18px;color:#a1bc60}
/* Keep the existing nav-positioned theme toggle, but give the bio page room on small screens. */
.link-page .theme-toggle{position:absolute;top:19px;right:0;width:42px;height:42px;z-index:2}
html[data-theme="dark"] body.links-body{background:#151b17;color:#f0f3e9}
html[data-theme="dark"] .page-glow{background:radial-gradient(ellipse 720px 530px at 50% -75px,rgba(154,208,87,.13),transparent 80%)}
html[data-theme="dark"] .brand-dot{color:#b9df72}
html[data-theme="dark"] .brand-detail,html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .group-index{color:#bdcbb6}
html[data-theme="dark"] .intro,html[data-theme="dark"] .group-heading p{color:#bbcbb7}
html[data-theme="dark"] .group-index::after{background:#475448}
html[data-theme="dark"] .photo-ring{background:#303c33;box-shadow:0 0 0 1px #50614e,0 18px 40px rgba(0,0,0,.25)}
html[data-theme="dark"] .bio-link{background:#263229;border-color:#425546;color:#f0f3e9;box-shadow:none}
html[data-theme="dark"] .bio-link:hover{background:#303e33;border-color:#a4c074}
html[data-theme="dark"] .bio-link .link-icon{background:#3b4c3c;color:#cfe3ba}
html[data-theme="dark"] .bio-link .link-text small{color:#beceb9}
html[data-theme="dark"] .bio-link-primary{background:#d4ff65;border-color:#d4ff65;color:#202420}
html[data-theme="dark"] .bio-link-primary:hover{background:#e7ffab;border-color:#e7ffab}
html[data-theme="dark"] .bio-link-primary .link-icon{background:#243422;color:#d4ff65}
html[data-theme="dark"] .bio-link-primary .link-text small{color:#39482f}
html[data-theme="dark"] .affiliate-note,html[data-theme="dark"] .link-footer{color:#b3c4ad}
html[data-theme="dark"] .link-footer{border-color:#455648}
@media(max-width:560px){.link-page{width:calc(100% - 32px);padding-top:20px}.top-brand{min-height:47px;gap:8px;padding-left:38px;padding-right:38px}.brand-word{font-size:27px}.brand-detail{font-size:8px;letter-spacing:1.4px}.photo-ring{width:126px;height:126px;margin:29px auto 24px}.eyebrow{font-size:9px;letter-spacing:1px}.link-collections{margin-top:44px;gap:43px}.bio-link{padding:13px 14px;gap:13px;min-height:81px}.link-icon{width:44px;height:44px;flex-basis:44px}.bio-link-primary{min-height:88px}.link-text strong{font-size:12px}.link-text small{font-size:11.5px}.link-page .theme-toggle{top:20px}.intro{font-size:14px;line-height:1.7}.group-heading h2{margin-top:13px}}
@media(max-width:355px){.top-brand{justify-content:flex-start;padding-inline:2px 43px}.brand-detail{display:none}.bio-link{padding-inline:11px;gap:11px}.link-icon{width:40px;height:40px;flex-basis:40px}.link-text strong{font-size:11px}.link-text small{font-size:11px}.link-footer{gap:9px;font-size:8px}}
@media(hover:none){.bio-link:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}