[id] { scroll-margin-top: 100px; }
.project-figure { min-width: 0; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.image-open { display: block; position: relative; width: 100%; padding: 0; overflow: hidden; color: var(--ink); background: #fff; border: 0; cursor: zoom-in; }
.image-open img { display: block; width: 100%; height: auto; }
.image-open::after { content: "↗"; position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 34px; height: 34px; color: #000; background: #fff; border: 1px solid #ddd; border-radius: 50%; font: 600 1.1rem var(--ui); }
.image-open:hover::after { color: #fff; background: var(--accent); border-color: var(--accent); }
.image-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }
.project-figure figcaption { padding: 24px; }
.project-figure .label { display: block; color: var(--accent); font-size: .67rem; letter-spacing: .12em; }
.project-figure h3 { margin-top: 12px; font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.15; letter-spacing: -.025em; }
.project-figure figcaption p { margin-top: 10px; color: var(--muted); font-size: .91rem; line-height: 1.5; }
.hero-collage { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: center; padding: 24px; background: #222629; border: 1px solid #555; border-radius: 26px; }
.hero-support { display: grid; gap: 18px; }
.hero-support .image-open img { aspect-ratio: 16 / 9; object-fit: cover; }
.hero-support .project-figure figcaption { padding: 14px 18px; }
.research-layout { grid-template-columns: 1fr; }
.research-artifacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; padding: 24px; background: #f8f8f8; }
.research-artifacts .project-figure { border-radius: 14px; }
.research-artifacts .project-figure figcaption { padding: 18px; }
.research-artifacts .image-open img { aspect-ratio: 4 / 3; object-fit: contain; }
.research-artifacts .context .image-open img { object-fit: cover; object-position: 45% 35%; }
.research-layout .research-artifacts { border-bottom: 1px solid var(--line); }
.research-note { display: grid; grid-template-columns: .5fr 1.2fr 1fr; gap: 28px; align-items: center; }
.research-note .label, .research-note p { margin: 0; }
.paper-photos { display: grid; gap: 0; background: #f8f8f8; border-right: 1px solid var(--line); }
.paper-photos .image-open img { aspect-ratio: 16 / 10; object-fit: cover; }
.paper-photos .image-open + .image-open { border-top: 5px solid #fff; }
.sketch-board .image-open img { aspect-ratio: 2 / 1; object-fit: cover; object-position: bottom; }
.system-board { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; padding: 24px; background: #fff8ee; border-radius: 26px; }
.system-support { display: grid; gap: 22px; }
.system-support .image-open img { aspect-ratio: 4 / 3; object-fit: contain; }
.creator-collage { display: grid; grid-template-columns: .65fr 1.35fr; gap: 22px; align-items: center; padding: 24px; background: #fff0e7; border: 1px solid #eed9cb; border-radius: 26px; }
.creator-collage .selector .image-open img { max-height: 640px; object-fit: contain; }
.story-frame img { aspect-ratio: 4 / 3; object-fit: contain; }
.story-frame.scene-choice img { object-fit: cover; }
.scene-choice img { object-position: bottom; }
.fidelity .project-figure { display: flex; flex-direction: column; }
.fidelity .image-open img { aspect-ratio: 4 / 3; object-fit: cover; }
.fidelity .blueprint img { object-position: bottom; }
.fidelity .product-screen img { object-fit: contain; }
/* These supplied boards have different proportions; show every composition in full. */
.project-figure .image-open img.replacement-art { aspect-ratio: auto var(--art-ratio); height: auto; max-height: none; object-fit: contain; object-position: center; }
.replacement-art[src$="new_kafshdoozak7.webp"] { --art-ratio:1594 / 1428; }
.replacement-art[src$="new_kafshdoozak9.webp"] { --art-ratio:2114 / 1000; }
.replacement-art[src$="new_kafshdoozak5.webp"] { --art-ratio:2214 / 1430; }
.replacement-art[src$="new_kafshdoozak_10.webp"] { --art-ratio:1066 / 1522; }
.replacement-art[src$="new_kafshdoozak6.webp"] { --art-ratio:1594 / 1492; }
.replacement-art[src$="new_kafshdoozak8.webp"] { --art-ratio:1594 / 1506; }
.replacement-art[src$="new_kafshdoozak3.webp"] { --art-ratio:1378 / 1522; }
.replacement-art[src$="new_kafshdoozak11.webp"] { --art-ratio:1055 / 1839; }
.replacement-art[src$="new_kafshdoozak12.webp"] { --art-ratio:1055 / 1362; }
.replacement-art[src$="new_kafshdoozak10.webp"] { --art-ratio:2028 / 926; }
.replacement-art[src$="28.webp"] { --art-ratio:1920 / 1080; }
.replacement-art[src$="kafshdoozak_oops.webp"] { --art-ratio:1122 / 1402; }
.project-figure .story-video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:var(--section-dark); }
.story-video:focus-visible { outline:3px solid var(--accent); outline-offset:-4px; }
.world-collage { display: grid; grid-template-columns: 1.4fr .6fr; gap: 22px; padding: 24px; background: #fff0e7; border-radius: 26px; }
.world-main { display: grid; gap: 20px; align-content: start; }
.product-film { overflow: hidden; background: #f9dce2; border: 1px solid var(--line); border-radius: 20px; }
.product-film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #f9dce2; }
.product-film figcaption { padding: 20px 24px; color: var(--ink); background: #fff; }
.product-film figcaption .label { display: block; color: var(--accent); margin-bottom: 8px; }
.world-discovery .image-open img { max-height: 810px; object-fit: contain; }
.image-viewer { width: min(1500px, 96vw); max-width: 96vw; max-height: 94dvh; margin: auto; padding: 54px 18px 18px; color: #fff; background: var(--section-dark); border: 1px solid #555; border-radius: 18px; }
.image-viewer::backdrop { background: rgba(10,12,14,.9); }
.viewer-canvas { overflow: hidden; border-radius: 8px; background: #fff; }
.image-viewer img { display: block; width: 100%; height: auto; max-height: 75dvh; object-fit: contain; }
.image-viewer p { max-width: 1000px; margin: 16px auto 0; color: #ccc; font-size: .9rem; }
.viewer-close { position: absolute; top: 10px; right: 14px; padding: 8px 16px; color: #fff; background: transparent; border: 1px solid #888; border-radius: 999px; font: 600 .85rem var(--ui); cursor: pointer; }
.viewer-close:focus-visible { outline: 3px solid #a99eff; outline-offset: 3px; }
@media (min-width: 601px) {
  .research-artifacts .project-figure .image-open img.replacement-art { aspect-ratio: 4 / 3; }
}
@media (max-width: 900px) {
  .research-note { grid-template-columns: 1fr; gap: 20px; }
  .research-layout .research-artifacts, .paper-layout .paper-photos { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-collage, .system-board, .creator-collage, .world-collage { grid-template-columns: 1fr; }
  .hero-support, .system-support { grid-template-columns: repeat(2, 1fr); }
  .creator-collage .selector .image-open img { max-height: 480px; }
  .world-discovery .image-open img { max-height: 650px; }
}
@media (max-width: 600px) {
  .hero-collage, .system-board, .creator-collage, .world-collage { padding: 14px; gap: 18px; }
  .hero-support, .system-support { grid-template-columns: 1fr; }
  .research-artifacts { grid-template-columns: 1fr; padding: 20px; }
  .research-artifacts .image-open img { max-height: 400px; }
  .project-figure figcaption { padding: 22px; }
  .image-viewer { padding: 55px 10px 16px; }
  .image-viewer p { padding: 0 8px; font-size: .8rem; }
}