@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-500.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-600.ttf") format("truetype")}
:root{--accent:#81EBB2;--accent-hover:#C2FFD7;--fg:#fff}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16pt}
@media (max-width:1680px){html{font-size:12pt}}
body{margin:0;min-height:100vh;background:#000;color:var(--fg);font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1;display:flex;justify-content:center;align-items:center;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:0;background:url("../videos/bg.mp4.jpg") center/cover no-repeat}
.bg video{width:100%;height:100%;object-fit:cover;display:block}
.bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.29)}
.page{position:relative;z-index:1;width:61rem;max-width:100%;padding:3rem}
.hero{display:flex;align-items:center;gap:3rem}
.avatar{flex:0 0 auto;width:calc(40% - 1.5rem);max-width:100%;height:auto;aspect-ratio:1;border-radius:50%;border:10px solid #fff;object-fit:cover;-webkit-user-drag:none;user-select:none}
.intro{flex:1 1 auto}
h1{margin:0 0 1.25rem;font-size:4.25em;font-weight:600;letter-spacing:-.075rem;line-height:1}
.tagline{margin:0;font-size:1.125em;font-weight:500;letter-spacing:-.025rem;line-height:1.5}
.icons{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1rem;font-size:1.5em}
.icons a{display:flex;align-items:center;justify-content:center;width:2em;height:2em;border-radius:50%;background:var(--accent);transition:transform .5s ease,background-color .5s ease}
.icons a:hover,.icons a:focus-visible{background:var(--accent-hover);transform:translateY(-4.25%)}
.icons a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.icons svg{width:60%;height:60%;fill:rgba(0,0,0,.651)}
.divider{border:0;height:4px;background:#fff;margin:.75rem 0;width:100%}
.post{max-width:600px;font-family:system-ui,sans-serif;border:1px solid #ddd;border-radius:12px;padding:16px;background:#fff;color:#222;text-align:left;line-height:1.5}
.post p{margin:0}
.post .date{font-size:13px;color:#666;margin-bottom:8px}
.post .body{font-size:16px;margin-bottom:12px}
.post .tag{color:#2563eb}
.post .imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:12px}
.post .imgs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.post a{color:#2563eb;text-decoration:none;font-size:14px}
.post a:hover{text-decoration:underline}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:980px){html{font-size:10pt}}
@media (max-width:736px){
  html{font-size:12pt}
  .page{padding:3rem 2rem}
  .hero{flex-direction:column;text-align:center;gap:1.25rem}
  .avatar{width:10.75rem}
  h1{font-size:2.625em;letter-spacing:-.065625rem}
  .icons{justify-content:center;font-size:1.375em;margin-top:1.3125rem}
  .post{margin:0 auto}
}
@media (max-width:360px){.page{padding:2.5rem 1.5rem}}
@media (prefers-reduced-motion:reduce){.bg video{display:none}.icons a{transition:none}}
.post .photo{display:block;margin:0 0 12px}
.post .photo img{width:100%;max-height:420px;object-fit:cover;border-radius:8px;display:block}
.post .body{white-space:pre-line}
.post .links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem}