:root { --ink:#1c2636; --muted:#617086; --blue:#2d6d9f; --line:#d6e0e9; --paper:#f6f9fb; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, sans-serif; }
.intro { max-width:1120px; padding:7rem 1.5rem 2.5rem; margin:auto; } .eyebrow { letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; font-weight:bold; color:var(--blue); } h1 { font-size:clamp(2.35rem,6vw,5.5rem); line-height:.95; letter-spacing:-.045em; margin:.45rem 0 1.25rem; font-weight:400; } h1 em { font-family:Georgia,serif; } .intro > p:not(.eyebrow) { max-width:700px; font-size:1.08rem; line-height:1.65; color:var(--muted); } .disclosure { border-left:3px solid var(--blue); padding-left:1rem; font-size:.9rem !important; }
button { border:0; border-radius:99px; color:#fff; background:var(--blue); padding:.9rem 1.25rem; font-weight:bold; cursor:pointer; } button:focus-visible { outline:3px solid #1a2638; outline-offset:3px; }
.profiles { max-width:1120px; margin:auto; padding:0 1.5rem 4rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; } .profile { background:#fff; border:1px solid var(--line); border-radius:1rem; padding:1rem; min-width:0; } .portrait { width:100%; aspect-ratio:1; border-radius:.7rem; background-image:url('/images/community-preview-portraits.png'); background-size:500% 500%; background-repeat:no-repeat; margin-bottom:1rem; } .location { color:var(--muted); font-size:.78rem; margin:.2rem 0 .7rem; } h2 { margin:0; font-size:1.05rem; } h3 { font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:1rem 0 .25rem; } .profile p { font-size:.86rem; line-height:1.45; margin:.25rem 0; } .glasses { color:var(--muted); font-size:.78rem !important; border-top:1px solid var(--line); padding-top:.8rem; margin-top:1rem !important; } .status { text-align:center; padding:0 1.5rem 3rem; color:var(--muted); }
@media (max-width:900px) { .profiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .header-nav nav a:not(:first-child) { display:none; } } @media (max-width:520px) { .intro { padding-top:5.4rem; } .profiles { grid-template-columns:1fr; gap:.8rem; } .profile { display:grid; grid-template-columns:105px 1fr; column-gap:1rem; } .portrait { grid-row:span 4; margin:0; } .profile h3, .profile .glasses { grid-column:2; } }