.coverit-reference-overview,.coverit-reference-navigation { width:calc(100% - 2 * var(--coverit-gutter)); max-width:var(--coverit-width); margin-inline:auto; }
.coverit-reference-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.coverit-reference-card { min-width:0; display:flex; flex-direction:column; }
.coverit-reference-card[hidden],.coverit-reference-navigation[hidden],.coverit-reference-projects[hidden] { display:none; }
.coverit-content > .frame:has(> .coverit-reference-navigation[hidden]) { display:none; }
.coverit-reference-card img { width:100%; height:280px; object-fit:cover; }
.coverit-reference-card h2 { border:0; padding:0; margin:0; color:var(--coverit-accent); font:italic 600 clamp(18px,1.4vw,22px)/1.3 Montserrat,sans-serif; }
.coverit-reference-card__link { display:flex; flex:1; flex-direction:column; color:inherit; text-decoration:none; }
.coverit-reference-card__link:focus-visible { outline:2px solid var(--coverit-accent); outline-offset:3px; }
.coverit-reference-read,.coverit-reference-back { display:flex; gap:20px; align-items:center; justify-content:center; font:600 16px/1.25 Montserrat,sans-serif; padding:20px 18px; border:1px solid var(--coverit-border); color:var(--coverit-muted); text-decoration:none; }
.coverit-reference-read { margin-top:auto; }
.coverit-reference-card__link:is(:hover,:focus-visible) .coverit-reference-read,.coverit-reference-back:hover { background:var(--coverit-muted); color:var(--coverit-background); }
.coverit-reference-gallery__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.coverit-reference-image { display:block; overflow:hidden; }
.coverit-reference-image img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.coverit-reference-back { width:fit-content; margin-top:var(--coverit-detail-gap); }
.coverit-reference-dialog { inset:12px; margin:0; width:calc(100vw - 24px); max-width:none; height:calc(100dvh - 24px); max-height:none; padding:20px 24px; border:1px solid var(--coverit-line); color:var(--coverit-text); background:var(--coverit-background); overflow:auto; }
.coverit-reference-dialog[open] { display:flex; flex-direction:column; gap:14px; animation:reference-enter var(--coverit-overlay-duration) ease-out; }
.coverit-reference-dialog::backdrop { background:var(--coverit-backdrop); }
.coverit-reference-close { position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; background:var(--coverit-accent); color:var(--coverit-background); font-size:32px; }
.coverit-reference-close:hover,.coverit-reference-close:focus-visible { background:var(--coverit-background); color:var(--coverit-accent); }
.coverit-reference-projects { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--coverit-border); padding:0 56px 16px 0; min-height:52px; flex:none; }
.coverit-reference-projects div { min-width:0; }
.coverit-reference-projects:has(> div:empty) { grid-template-columns:minmax(0,1fr); }
.coverit-reference-projects > div:empty { display:none; }
.coverit-reference-projects > div:empty + div { border-left:0; }
.coverit-reference-projects div+div { border-left:1px solid var(--coverit-border); text-align:right; }
.coverit-reference-projects a { display:flex; align-items:center; gap:14px; text-decoration:none; font-size:clamp(14px,1.2vw,20px); min-height:44px; padding-inline:8px; overflow-wrap:anywhere; }
.coverit-reference-projects div+div a { justify-content:flex-end; }
.coverit-reference-stage { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; flex:1; min-height:200px; }
.coverit-reference-stage figure { margin:0; min-width:0; min-height:0; display:flex; flex-direction:column; }
.coverit-reference-stage img { display:block; min-height:0; flex:1; width:100%; object-fit:contain; touch-action:pan-y; user-select:none; }
.coverit-reference-stage figcaption { font:600 clamp(16px,1.563vw,24px)/1.4 Montserrat,sans-serif; padding-top:16px; overflow-wrap:anywhere; }
.coverit-reference-stage button { border:0; background:transparent; color:var(--coverit-accent); font-size:40px; padding:0; }
.coverit-reference-stage button:disabled { color:var(--coverit-unavailable); cursor:default; }
.coverit-reference-dots { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; flex:none; }
.coverit-reference-dots button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid transparent; background:transparent; }
.coverit-reference-dots button::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--coverit-line); }
.coverit-reference-dots button[aria-current=true] { border-color:var(--coverit-accent); }
.coverit-reference-dots button[aria-current=true]::before { background:var(--coverit-accent); }
.coverit-reference-share { display:flex; align-items:center; flex-wrap:wrap; gap:12px; flex:none; }
.coverit-reference-share .coverit-reference-count { margin-right:auto; }
.coverit-reference-share [data-reference-status]:empty { display:none; }
.coverit-reference-share button { border:1px solid var(--coverit-text); background:transparent; color:var(--coverit-text); padding:11px; min-width:44px; min-height:44px; }
.coverit-reference-share svg { width:20px; height:20px; fill:currentColor; }
.coverit-reference-share p { margin:0; font-size:.875rem; }
body:has(.coverit-reference-dialog[open]) { overflow:hidden; }
@keyframes reference-enter { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media(max-width:1024px) { .coverit-reference-cards,.coverit-reference-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .coverit-reference-gallery__grid { gap:10px; } .coverit-reference-dialog { padding:16px 18px; } }
@media(max-width:767px) { .coverit-reference-cards,.coverit-reference-gallery__grid { grid-template-columns:1fr; } .coverit-reference-gallery__grid { gap:8px; } .coverit-reference-card img { height:240px; } .coverit-reference-read,.coverit-reference-back { padding:16px 12px; font-size:14px; } .coverit-reference-dialog { inset:8px; width:calc(100vw - 16px); height:calc(100dvh - 16px); padding:12px; gap:10px; } .coverit-reference-projects { padding-bottom:12px; } .coverit-reference-stage { grid-template-columns:44px minmax(0,1fr) 44px; } .coverit-reference-stage button { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { .coverit-reference-dialog[open] { animation:none; } }

.coverit-reference-card { border:1px solid var(--coverit-border); }
.coverit-reference-card__copy { display:flex; flex:1; flex-direction:column; justify-content:space-between; gap:16px; padding:20px; }
.coverit-reference-read svg { width:18px; height:18px; fill:currentColor; }
.coverit-reference-back svg { width:1em; height:1em; fill:currentColor; }
.coverit-reference-close svg { width:22px; height:22px; fill:currentColor; }
.coverit-reference-projects svg { width:22px; height:22px; flex-shrink:0; fill:var(--coverit-accent); }
.coverit-reference-stage button svg { width:26px; height:26px; fill:currentColor; }
@media(max-width:767px) { .coverit-reference-card__copy { padding:16px; } .coverit-reference-stage button svg { width:22px; height:22px; } .coverit-reference-projects svg { width:18px; height:18px; } }

.coverit-reference-overview .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.coverit-reference-overview { max-width:var(--coverit-shell); padding-bottom:var(--coverit-section-end); }
.coverit-reference-overview .collection-toolbar { margin-top:0; }
.coverit-reference-overview .collection-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.coverit-reference-overview .collection-options label { min-width:0; }
@media(max-width:1024px) { .coverit-reference-overview .collection-options { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { .coverit-reference-overview .collection-options { grid-template-columns:1fr; } }

.coverit-reference-dialog :is(button,a):focus-visible,.coverit-reference-image:focus-visible { outline:2px solid var(--coverit-text); outline-offset:2px; }
.coverit-reference-dialog button { cursor:pointer; }
.coverit-reference-gallery__grid a:hover { outline:2px solid var(--coverit-accent); outline-offset:-2px; }

.coverit-reference-card:is(:hover,:focus-within) { border-color:var(--coverit-accent); }

.coverit-reference-notice { margin:0; padding-top:8px; color:var(--coverit-muted); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }