/* The reference's 680px sheets and divided product rows, using native dialog. */
body:has(.case-dialog[open]) { overflow: hidden; }
html:has(.case-dialog[open]), html[data-motion="off"] { scroll-behavior: auto; }
.case-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 64px));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}
.case-dialog::backdrop {
  background: rgb(0 0 0 / .3);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.case-dialog .case-sheet {
  position: relative; max-height: inherit; border-radius: 32px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .25);
}
/* One scroll surface for every project: preview and story move together. */
.case-dialog:not(.projects-dialog) .case-sheet {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 68px;
}
.case-dialog:not(.projects-dialog) .case-sheet-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
}
.case-dialog:not(.projects-dialog) .case-sheet-body { overflow: visible; }
.case-dialog[open] .case-sheet,
.case-dialog[open]::backdrop { animation-duration: 180ms; }
.case-dialog .case-sheet-top { flex: none; padding: 18px 24px 12px 32px; }
.case-dialog .case-close {
  position: relative; width: 32px; height: 32px; font-size: 0;
  background: var(--card2); color: var(--muted);
}
.case-dialog .case-close::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.case-dialog .case-close::after { content: ""; position: absolute; inset: -6px; }
.case-dialog .case-close:focus-visible { outline: 1px solid color-mix(in srgb, var(--muted) 55%, #000); outline-offset: 3px; }
.case-dialog .case-sheet-body { padding: 8px 32px 32px; overscroll-behavior: contain; }
.case-dialog h2 { font-size: 34px; font-weight: 700; line-height: 1.05; text-wrap: balance; }
.case-dialog .case-sheet-body p { font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.case-dialog .case-sheet-art:is(.coffee, .discover) { margin-inline: 32px; border-radius: 16px; }
.case-dialog .case-sheet-foot { gap: 16px; }
.case-dialog .case-sheet-foot .btn { min-height: 44px; font-family: inherit; }
.projects-dialog .case-sheet-top { background: var(--card2); }
.projects-dialog .case-sheet-body { padding-top: 0; }
.projects-dialog h2 { background: var(--card2); margin: 0 -32px; padding: 4px 32px 0; }
.projects-dialog #projects-dialog-description {
  background: var(--card2); margin: 0 -32px 20px; padding: 6px 32px 26px;
  font-size: 17px; line-height: 1.35;
}
.project-directory li { padding-block: 6px; }
.project-directory a { gap: 14px; padding: 12px 10px; border-radius: 12px; }
.project-directory a:focus-visible { outline-offset: -2px; }
.project-directory a:hover .project-directory-arrow { color: var(--text); }
.project-directory .mini-icon { width: 44px; height: 44px; border-radius: 11px; }
.project-directory-copy { gap: 4px; }
.project-directory-copy strong { font-size: 16px; line-height: 1.3; }
.project-directory-copy > span { font-size: 14px; line-height: 1.42; }
.project-directory-arrow { padding-inline: 4px; }
.case-dialog.is-instant[open] .case-sheet,
.case-dialog.is-instant[open]::backdrop { animation: none; }
@media (max-width: 640px) {
  .case-dialog {
    width: 100%; margin: auto 0 0; inset: auto 0 0;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top));
  }
  .case-dialog .case-sheet { border-radius: 30px 30px 0 0; }
  .case-dialog .case-sheet-top { padding: 18px 22px 12px; }
  .case-dialog .case-sheet-body { padding: 8px 22px calc(28px + env(safe-area-inset-bottom)); }
  .case-dialog h2 { font-size: 28px; }
  .case-dialog .case-sheet-art:is(.coffee, .discover) { margin-inline: 22px; }
  .projects-dialog .case-sheet-body { padding-top: 0; }
  .projects-dialog h2 { margin-inline: -22px; padding-inline: 22px; }
  .projects-dialog #projects-dialog-description { margin-inline: -22px; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .case-dialog[open] .case-sheet,
  html:not([data-motion="full"]) .case-dialog[open]::backdrop { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .case-dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(0 0 0 / .5); }
}

/* Small visual close control; the pseudo-element retains its 44px hit area. */
.case-dialog .case-close { min-width: 32px; min-height: 32px; flex: 0 0 32px; }
/* Landscape phones scroll the entire case, keeping the action reachable. */
@media (max-height: 500px) {
  .case-dialog:not(.projects-dialog) { max-height: calc(100dvh - 24px); }
  .case-dialog:not(.projects-dialog) .case-sheet { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .case-dialog:not(.projects-dialog) .case-sheet-top { position: sticky; top: 0; z-index: 1; background: var(--card); }
  .case-dialog:not(.projects-dialog) .case-sheet-art { max-height: 30dvh; }
  .case-dialog:not(.projects-dialog) .case-sheet-art.serious { font-size: 30px; }
  .case-dialog:not(.projects-dialog) .case-sheet-body { overflow: visible; }
}
/* Backdrops are not covered by the general *, ::before and ::after motion reset. */
html[data-motion="off"] .case-dialog::backdrop { animation: none !important; transition: none !important; }

/* Expanded contributions keep their paragraphs; the actual preview is uncropped in the sheet. */
#case-dialog-copy { white-space: pre-line; }
body .case-dialog .case-sheet-art.serious {
  width: calc(100% - 64px);
  height: auto;
  aspect-ratio: 1440 / 1000;
  max-height: none;
  margin-inline: 32px;
  border-radius: 0;
  background: transparent url('assets/serious-science-preview.png') center / contain no-repeat;
}
@media (max-width: 640px) {
  body .case-dialog .case-sheet-art.serious { width: calc(100% - 44px); margin-inline: 22px; }
}
@media (max-height: 500px) {
  body .case-dialog:not(.projects-dialog) .case-sheet-art.serious { max-height: none; }
}