body { min-height:100svh; display:flex; flex-direction:column; --muted:#636b61; }
.friends-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:28px; border-bottom:1px solid var(--line); }
.back-home { font-size:12px; white-space:nowrap; }
.back-home:hover,.friends-footer a:hover { color:var(--red); }
.friends-main { flex:1; padding-block:76px 80px; }
.friends-intro .eyebrow { margin:0 0 22px; font-size:10px; letter-spacing:.16em; }
.friends-intro h1 { margin:0; font:400 clamp(42px,5vw,64px)/1.3 var(--serif); letter-spacing:-.04em; }
.friends-intro h1>span { color:var(--red); }
.friends-lead { margin:20px 0 0; color:var(--muted); font-size:14px; line-height:1.9; }
.friends-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:42px 0 0; padding:0; list-style:none; }
.friends-grid li { min-width:0; }
.friend-card { display:flex; align-items:center; gap:16px; height:100%; min-height:132px; padding:24px 20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.friend-avatar { flex:none; width:56px; height:56px; border-radius:50%; background:var(--paper); }
.friend-copy { display:block; min-width:0; }
.friend-name { display:block; font-size:14px; font-weight:600; line-height:1.7; overflow-wrap:anywhere; }
.friend-description { display:block; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.8; }
.friend-domain { display:block; margin-top:12px; color:var(--muted); font:11px/1.5 var(--sans); letter-spacing:.04em; }
.friend-arrow { align-self:flex-start; margin-left:auto; color:var(--red); font-size:19px; }
.friend-card:hover,.friend-card:focus-visible { border-color:var(--red); box-shadow:0 8px 24px #303e370b; transform:translateY(-3px); }
.friend-card:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.friend-details { max-width:600px; margin-top:64px; border-block:1px solid var(--line); }
.friend-details summary { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:64px; font-size:13px; cursor:pointer; list-style:none; }
.friend-details summary::-webkit-details-marker { display:none; }
.friend-details summary>span { color:var(--red); font-size:20px; transition:transform .2s ease; }
.friend-details details[open] summary>span { transform:rotate(45deg); }
.friend-details summary:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.site-info { padding-bottom:24px; font-size:13px; line-height:1.9; }
.site-info p { color:var(--muted); margin:0 0 20px; }
.site-info dl { margin:0; }
.site-info dl>div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; margin-top:10px; }
.site-info dt { color:var(--muted); }
.site-info dd { margin:0; overflow-wrap:anywhere; }
.site-info a { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.site-info a:hover { color:var(--red); }
.friends-footer { display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding-block:24px; color:var(--muted); font-size:11px; }
@media(max-width:1100px) { .friends-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) {
  .wrap { width:calc(100% - 40px); }
  .friends-header { padding-block:22px; }
  .friends-main { padding-block:48px 56px; }
  .friends-grid { grid-template-columns:minmax(0,1fr); margin-top:30px; }
  .friend-card { padding:22px 18px; }
  .friends-lead { font-size:13px; }
  .friend-details { margin-top:40px; }
  .brand-caption { font-size:7px; }
}
@media(prefers-reduced-motion:reduce) { .friend-card:hover,.friend-card:focus-visible { transform:none; } }