/* Focused additions to the original design system. Original proto.css stays intact. */
.refinement{--faint:rgba(28,23,16,.68)}
.refinement .nav ul{row-gap:0}
.skip-link{position:absolute;top:8px;left:48px;z-index:60;background:var(--paper);color:var(--ink);padding:9px 14px;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.menu-toggle{display:none;font:500 12px/1.6 'Plex Mono',monospace;letter-spacing:.06em;background:transparent;border:1px solid var(--rule);border-radius:999px;color:var(--ink);padding:10px 16px;min-height:44px}
.intro{margin:13px 0 0;font-size:16px;line-height:1.7;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:17px 0 12px}
.hero-actions .pill{padding:10px 18px;min-height:44px;font-size:13px;letter-spacing:.025em}
.participation{margin-top:42px}
.participation .label{border-top:1px solid var(--hair);padding-top:26px}
.participation .bio{font-size:15px}
.log .t{text-decoration-color:var(--gold);text-underline-offset:4px}
.refinement .media figcaption{font-size:12px;letter-spacing:.11em}
.refinement .collage .gallery-wide-photo img{height:auto;aspect-ratio:auto;object-fit:contain;flex:none}
.refinement .collage .gallery-portrait-photo{width:100%;max-width:620px;justify-self:center;scroll-margin-top:24px}
.refinement .prov,.refinement .micro{font-size:13px}
.refinement .log td.d{font-size:13px}
.refinement .portrait:hover::after{opacity:0}
.support-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin-top:20px;align-items:start}
.support-proof .support-photo{margin:0}
.support-proof>div>.bio:first-child{margin-top:0}
.support-photo figcaption{line-height:1.6}
.refinement .instrument-caption{font-size:12px;letter-spacing:.11em}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.offer h3.oname{margin-top:5px;line-height:1.65}
button.pill{font-family:inherit;background:transparent;cursor:pointer;margin-top:20px}
@media(max-width:700px){
 .refinement .head{padding:14px 20px 12px;min-height:78px;gap:12px;flex-wrap:wrap}
 .refinement .head .live{display:none}
 .js .refinement .menu-toggle{display:inline-flex;align-items:center;gap:12px}
 .refinement .nav{border-top:0}
 .js .refinement .nav:not(.is-open){display:none}
 .refinement .nav ul{gap:0;display:grid;grid-template-columns:1fr 1fr;padding:7px 18px 15px}
 .refinement .nav a{padding:12px 8px;min-height:44px;letter-spacing:.15em}
 .refinement .hero{display:flex}
 .refinement .hero .bio{margin-top:18px}
 .refinement .hero-actions{gap:10px}
 .refinement .hero-actions .pill{font-size:12px;padding:10px 14px}
 .refinement .ledgerband{width:100%}
 .refinement .log td.d{white-space:normal;min-width:82px}
 .refinement .log td{padding-right:8px}
}
@media(max-width:380px){.refinement .hero-actions{display:grid;grid-template-columns:1fr}.refinement .hero-actions .pill{justify-content:space-between}}
@media(max-width:580px){.support-proof{grid-template-columns:1fr;gap:20px}.support-proof .support-photo{max-width:290px;width:100%;margin:0 auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.refinement .collage .gallery-piece video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.gallery-piece-link{position:relative;display:block;color:inherit;text-decoration:none}
.gallery-piece-cta{position:absolute;left:14px;bottom:14px;padding:9px 12px;font:600 11px/1 "Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#f3eee2;background:rgba(0,0,0,.55);border:1px solid rgba(243,238,226,.35);border-radius:2px;transition:background .2s,border-color .2s}
.gallery-piece-link:hover .gallery-piece-cta,.gallery-piece-link:focus-visible .gallery-piece-cta{background:rgba(0,0,0,.78);border-color:var(--gold)}
/* Research fig. 2: the bent-ring loop is portrait, so it sits centred at a readable width (22 Oct 2026). */
.refinement .media--loop{width:min(100%,360px,max(200px,calc((100vh - 140px)/2)));margin:30px auto 0}
.refinement .media--loop video{display:block;width:100%;height:auto;background:var(--ink)}
@media(max-width:700px){.refinement .media--loop{width:min(100%,300px,max(200px,calc((100vh - 140px)/2)))}}
/* Figure numbers stay on one line when a caption wraps at phone widths, so "fig. 2" never splits (23 Oct 2026). */
.refinement .media figcaption span+span{white-space:nowrap;margin-left:14px}