#headliners .indie-panel{margin-top:36px;padding:28px 30px;background:color-mix(in srgb,var(--cyan) 13%,var(--cream));scroll-margin-top:240px}
#headliners .indie-heading{margin-bottom:20px}
#headliners .indie-heading h2{font-size:clamp(30px,3.2vw,44px);line-height:1.12;margin:0}
#headliners .indie-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;list-style:none;padding:0;margin:0}
#headliners .indie-list li{min-width:0;margin:0;padding:0;border:0}
#headliners .indie-person{display:flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;border:0;color:var(--ink);padding:5px 0;font-size:17px;line-height:1.3}
#headliners .indie-person img{width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover}
#headliners .indie-person span{min-width:0;overflow-wrap:normal;hyphens:none}
#headliners .indie-person:hover span{text-decoration:underline;text-underline-offset:4px}
#headliners .indie-person:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#headliners .headliner-more{margin-top:32px}
@media(max-width:900px){#headliners .indie-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}}
@media(max-width:580px){#headliners .indie-panel{padding:22px 16px;margin-top:28px;scroll-margin-top:180px}
#headliners .indie-list{gap:8px 16px}
#headliners .indie-person{gap:9px;font-size:15px;align-items:flex-start}
#headliners .indie-person img{width:30px;height:30px}
#headliners .indie-heading{margin-bottom:18px}}
#headliners .indie-v4 .indie-list li{grid-column:var(--col3);grid-row:var(--row3)}
#headliners .indie-v4 .indie-person img{width:54px;height:54px}
#headliners .indie-v4{padding:0;background:transparent;margin-top:40px}
#headliners .indie-v4 .indie-heading{margin-bottom:20px}
#headliners .indie-v4 .indie-heading h2{display:inline-block;padding:12px 20px;background:var(--orange);color:var(--cream)}
@media(max-width:900px){#headliners .indie-v4 .indie-list li{grid-column:var(--col2);grid-row:var(--row2)}}
@media(max-width:620px){#headliners .indie-v4 .indie-list{grid-template-columns:minmax(0,1fr);gap:6px}
#headliners .indie-v4 .indie-list li{grid-column:auto;grid-row:auto}
#headliners .indie-v4 .indie-person{align-items:center}}
@media(max-width:580px){#headliners .indie-v4 .indie-person img{width:45px;height:45px}
#headliners .indie-v4 .indie-heading h2{padding:10px 14px}}
@media(min-width:381px) and (max-width:440px){#headliners .indie-v4 .indie-person img{width:39px;height:39px}}
#headliners .indie-v4 .indie-person{font-size:18px}
@media(max-width:580px){#headliners .indie-v4 .indie-person{font-size:16px}}
@media(min-width:381px) and (max-width:440px){#headliners .indie-v4 .indie-person{font-size:15px}}

/* The same nineteen projects remain a full grid above the phone breakpoint. */
#headliners .indie-page{display:contents;list-style:none;padding:0;margin:0}
#headliners .indie-controls[hidden]{display:none}
@media(max-width:620px){
 #headliners .indie-paged .indie-list{display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0}
 #headliners .indie-paged .indie-list::-webkit-scrollbar{display:none}
 #headliners .indie-paged .indie-page{display:flex;flex-direction:column;gap:6px;flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
 #headliners .indie-paged .indie-person span{overflow-wrap:anywhere}
 #headliners .indie-paged .indie-list:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
 #headliners .indie-controls{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,16px);margin:24px auto 4px;max-width:100%;padding:3px 4px 5px}
 #headliners .indie-controls button{display:grid;place-items:center;width:58px;min-height:52px;border:2px solid var(--ink);border-radius:4px;background:var(--cyan);color:var(--ink);font:inherit;font-size:32px;font-weight:900;line-height:1;box-shadow:4px 4px 0 var(--ink);cursor:pointer;flex:none}
 #headliners .indie-controls [data-indie-previous]{background:var(--yellow);transform:rotate(-4deg)}
 #headliners .indie-controls [data-indie-next]{transform:rotate(4deg)}
 #headliners .indie-controls button:active:not(:disabled){box-shadow:1px 1px 0 var(--ink);translate:2px 2px}
 #headliners .indie-controls button:disabled{opacity:.35;box-shadow:none;cursor:default;transform:none}
 #headliners .indie-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
 #headliners .indie-controls span{flex:0 0 auto;padding:12px 14px;background:var(--orange);color:var(--ink);font-size:18px;font-weight:900;line-height:1.15;min-width:76px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;transform:rotate(-2deg)}
}