:root { --page-accent: var(--blue); --page-accent-2: var(--purple); }
.about-hero { padding-top:clamp(70px,8vw,105px); min-height:calc(100vh - 64px); display:grid; align-items:center; }
.about-hero-grid { display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); gap:clamp(40px,7vw,90px); align-items:center; }
.about-portrait { position:relative; overflow:hidden; padding:10px; transform:rotate(-1.5deg); }
.about-portrait img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; }
.portrait-tag { position:absolute; right:24px; bottom:24px; left:24px; padding:12px 14px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(2,3,8,.68); color:#fff; font:800 8px/1 var(--display); letter-spacing:.12em; text-align:center; backdrop-filter:blur(12px); }
.story-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.story-card { padding:clamp(27px,4vw,44px); border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(70,116,255,.05),rgba(145,104,255,.025)); }
.story-card h2 { margin:0; font:800 clamp(28px,3vw,42px)/1 var(--display); letter-spacing:-.04em; text-transform:uppercase; }
.story-card p:not(.eyebrow) { color:var(--muted); font-size:13px; }
.about-community { overflow:hidden; }
.about-community-grid { display:grid; grid-template-columns:minmax(250px,430px) 1fr; gap:50px; align-items:center; padding:clamp(24px,5vw,58px); }
.about-community-grid > img { width:100%; max-height:430px; object-fit:contain; }
.about-community-grid > div > p:not(.eyebrow) { color:var(--muted); font-size:13px; }
.mini-links { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mini-links a { display:grid; gap:8px; min-height:190px; align-content:end; padding:24px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); transition:transform .2s ease,border-color .2s ease; }
.mini-links a:hover,.mini-links a:focus-visible { transform:translateY(-5px); border-color:var(--page-accent); outline:none; }
.mini-links small { color:var(--page-accent); font:800 8px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; }
.mini-links strong { font:800 24px/1 var(--display); text-transform:uppercase; }
.mini-links span { color:var(--muted); font-size:11px; }
@media(max-width:880px){.about-hero-grid{grid-template-columns:1fr}.about-portrait{max-width:560px;margin-inline:auto}.story-grid{grid-template-columns:1fr}.about-community-grid{grid-template-columns:1fr}.mini-links{grid-template-columns:1fr}.mini-links a{min-height:150px}}
@media(max-width:620px){.about-hero{padding-top:60px}.about-portrait{transform:none}.story-card{padding:24px 20px}.about-community-grid{padding:24px 20px 0}}