/* Case library: cards, project/gallery grids, case detail and viewer. */
.lib-section { max-width:1320px; }
.lib-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:30px; }
.lib-heading h2 { font-size:clamp(30px,3.2vw,46px); }
.lib-heading>div:last-child { max-width:420px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.lib-heading p { font-size:15px; line-height:1.7; }
.lib-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.lib-chips button { min-height:44px; padding:8px 20px; border:1px solid var(--line); border-radius:30px; background:transparent; font-size:14px; }
.lib-chips button span { color:var(--muted); font-size:12px; margin-left:6px; }
.lib-chips button:hover { border-color:var(--deep); }
.lib-chips button[aria-pressed="true"] { background:var(--deep); color:#fff; border-color:var(--deep); }
.lib-chips button[aria-pressed="true"] span { color:#d9cbe0; }

.lib-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.lib-card { display:flex; flex-direction:column; background:#fff; border:1px solid #ebe5ec; border-radius:18px; overflow:hidden; transition:box-shadow .25s,transform .25s; }
.lib-card:hover { box-shadow:0 18px 40px #4a37521a; transform:translateY(-3px); }
.lib-pair { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:3px; background:#fff; }
.lib-pair figure { position:relative; margin:0; aspect-ratio:3/4; overflow:hidden; background:#efeaf0; }
.lib-pair img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.lib-pair figure:first-child img { object-position:50% 22%; }
.lib-card:hover .lib-pair img { transform:scale(1.035); }
.lib-pair figcaption { position:absolute; left:10px; bottom:10px; padding:3px 11px; border-radius:20px; background:#ffffffe6; color:var(--deep); font-size:11px; letter-spacing:.5px; backdrop-filter:blur(4px); }
.lib-pair figure+figure figcaption { background:#514357e0; color:#fff; }
.lib-single { grid-template-columns:1fr; }
.lib-single figure { aspect-ratio:3/2; padding:14px; background:#f3f0f2; }
.lib-single img { object-fit:contain; }
.lib-video-badge { position:absolute; top:10px; right:10px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#ffffffe6; color:var(--deep); font-size:11px; padding-left:2px; }
.lib-body { padding:18px 22px 22px; display:flex; flex-direction:column; gap:6px; }
.lib-meta { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); letter-spacing:.5px; }
.lib-code { color:var(--purple); letter-spacing:1.5px; }
.lib-card h3 { display:flex; justify-content:space-between; align-items:center; gap:10px; font:22px/1.4 var(--serif); }
.lib-card .link-icon { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; transition:background .2s; }
.lib-card:hover .link-icon { background:var(--lavender); }
.lib-card p { font-size:13px; line-height:1.6; }
.lib-extras { display:block; color:#9a8e9c; font-size:12px; margin-top:2px; }
.lib-more { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:40px; }
.lib-more[hidden] { display:none; }
.lib-more p { font-size:13px; }
.lib-more-button { border-color:var(--line); gap:16px; }
.lib-disclaimer { margin-top:34px; font-size:12px; line-height:1.8; max-width:760px; }
#case-results .lib-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Case detail */
.lib-case-page { max-width:1320px; margin:auto; }
.lib-crumbs { display:flex; flex-wrap:wrap; gap:10px; padding:30px 6% 0; font-size:13px; color:var(--muted); }
.lib-crumbs a:hover { color:var(--purple); text-decoration:underline; }
.lib-crumbs [aria-current] { color:var(--ink); }
.lib-case-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:56px; padding:26px 6% 40px; align-items:start; }
.lib-compare { display:grid; grid-template-columns:1fr 1fr; gap:6px; border-radius:22px; overflow:hidden; }
.lib-shot { position:relative; padding:0; border:0; aspect-ratio:3/4; background:#efeaf0; cursor:zoom-in; overflow:hidden; }
.lib-shot img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.lib-shot:first-child img { object-position:50% 22%; }
.lib-shot:hover img { transform:scale(1.03); }
.lib-shot span { position:absolute; left:14px; bottom:14px; padding:4px 14px; border-radius:20px; background:#ffffffe6; color:var(--deep); font-size:13px; }
.lib-shot+.lib-shot span { background:#514357e0; color:#fff; }
.lib-case-info { position:sticky; top:150px; }
.lib-case-info h1 { font-size:clamp(36px,4vw,56px); line-height:1.2; }
.lib-case-lead { margin:18px 0 26px; font-size:15px; line-height:1.8; }
.lib-case-info dl { display:grid; grid-template-columns:110px 1fr; margin:0 0 30px; border-top:1px solid var(--line); }
.lib-case-info dt,.lib-case-info dd { margin:0; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; }
.lib-case-info dt { color:var(--muted); }
.lib-case-info dd a { text-decoration:underline; text-underline-offset:3px; }
.lib-case-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.lib-record { padding-top:40px; }
.lib-record-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.lib-record-video { grid-row:span 2; background:#f1edf2; border-radius:16px; padding:14px; display:flex; flex-direction:column; justify-content:center; }
.lib-record-video .media-screen { width:100%; }
.lib-thumb { padding:0; border:0; border-radius:14px; overflow:hidden; aspect-ratio:3/4; background:#efeaf0; cursor:zoom-in; }
.lib-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s,opacity .2s; }
.lib-thumb:hover img { transform:scale(1.04); }
.lib-pager { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:20px; padding-bottom:20px; }
.lib-pager a { display:flex; flex-direction:column; gap:4px; padding:22px 26px; border:1px solid var(--line); border-radius:16px; transition:background .2s; }
.lib-pager a:hover { background:var(--lavender); }
.lib-pager a span { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.lib-pager a strong { font:400 22px/1.4 var(--serif); color:var(--deep); }
.lib-pager .next { text-align:right; align-items:flex-end; }

/* Viewer */
.lib-viewer { width:min(1100px,94vw); max-width:none; max-height:94vh; padding:16px 20px 20px; border-radius:18px; background:#1d1721; color:#fff; }
.lib-viewer::backdrop { background:#110c15e6; }
.lib-viewer-bar { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#cbbfd0; min-height:44px; }
.lib-viewer .close { position:static; color:#fff; }
.lib-viewer-stage { display:grid; grid-template-columns:52px 1fr 52px; align-items:center; gap:10px; }
.lib-viewer-stage img { max-height:76vh; max-width:100%; margin:auto; border-radius:10px; object-fit:contain; }
.lib-viewer-nav { width:48px; height:48px; border-radius:50%; border:1px solid #ffffff40; background:#ffffff14; color:#fff; display:grid; place-items:center; }
.lib-viewer-nav:hover { background:#ffffff2e; }
.lib-viewer-nav .ui-icon { width:22px; height:22px; }
.lib-viewer p { text-align:center; color:#cbbfd0; font-size:13px; margin-top:12px; }

@media(max-width:1024px) {
  .lib-grid,#case-results .lib-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .lib-case-hero { grid-template-columns:1fr; gap:34px; }
  .lib-case-info { position:static; }
  .lib-record-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:640px) {
  .lib-heading { flex-direction:column; align-items:flex-start; gap:14px; }
  .lib-grid,#case-results .lib-grid { grid-template-columns:1fr; gap:18px; }
  .lib-chips { flex-wrap:nowrap; overflow-x:auto; margin:0 -6% 22px; padding:0 6% 4px; scrollbar-width:none; }
  .lib-chips button { flex:none; }
  .lib-crumbs { padding:18px 16px 0; }
  .lib-case-hero { padding:18px 16px 30px; }
  .lib-compare { border-radius:16px; gap:3px; }
  .lib-shot span { left:8px; bottom:8px; font-size:11px; padding:3px 10px; }
  .lib-case-info dl { grid-template-columns:96px 1fr; }
  .lib-record-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .lib-record-video { grid-column:1/-1; grid-row:auto; }
  .lib-record-video .media-screen { width:min(100%,280px); }
  .lib-pager { grid-template-columns:1fr 1fr; gap:10px; }
  .lib-pager a { padding:16px; }
  .lib-pager a strong { font-size:17px; }
  .lib-viewer { padding:10px; width:100vw; max-height:100vh; border-radius:0; }
  .lib-viewer-stage { grid-template-columns:1fr; }
  .lib-viewer-nav { display:none; }
}
@media(prefers-reduced-motion:reduce) { .lib-card,.lib-pair img,.lib-shot img,.lib-thumb img { transition:none; } }
.lib-compare-video { margin:0; }
.lib-compare-video .media-screen { width:100%; height:100%; aspect-ratio:3/4 !important; border-radius:0; }
.lib-compare-video .media-screen video { object-fit:cover; }
.lib-record-video.is-landscape { grid-row:auto; grid-column:span 2; }
@media(max-width:640px) { .lib-record-video.is-landscape { grid-column:1/-1; } .lib-record-video.is-landscape .media-screen { width:100%; } }
/* Sensitive procedures: blur post-procedure images until the visitor chooses to view */
.lib-sensitive figure+figure img { filter:blur(18px) saturate(.6); transform:scale(1.15); }
.lib-card:hover .lib-sensitive figure+figure img { transform:scale(1.15); }
.lib-gate { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:22px 6% 0; padding:18px 24px; border-radius:16px; background:var(--lavender); }
.lib-gate p { font-size:14px; color:var(--ink); }
.lib-gate .button { flex:none; min-height:44px; border-color:var(--line); }
.is-sensitive:not(.revealed) :is(.lib-shot+.lib-shot img,.lib-thumb img,.lib-compare-video,.lib-record-video .media-screen) { filter:blur(22px) saturate(.6); pointer-events:none; }
.is-sensitive:not(.revealed) :is(.lib-shot+.lib-shot,.lib-thumb,.lib-record-video) { pointer-events:none; overflow:hidden; }
.is-sensitive:not(.revealed) .lib-shot+.lib-shot span { filter:none; }
@media(max-width:640px) { .lib-gate { flex-direction:column; align-items:flex-start; margin:16px 16px 0; padding:16px; gap:12px; } }