[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; }
.media-stage { padding: 24px; background: #eaf0df; border: 1px solid #d5ddca; border-radius: 26px; }
.dark .media-stage, .metrics .media-stage { background: #222629; border-color: #555; }
.hero-composition { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: center; }
.hero-composition > .project-figure { grid-column: 1 / -1; }
.hero-composition .hero-details { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; gap: 20px; }
.hero-details .image-open img { aspect-ratio: 16 / 9; object-fit: contain; object-position: center; }
.research-layout { grid-template-columns: 1fr; }
.research-artifacts { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 20px; padding: 24px; background: #f8f7fc; border-bottom: 1px solid var(--line); }
.research-artifacts .image-open img { aspect-ratio: 4 / 3; object-fit: contain; }
.research-artifacts .journey .image-open img { object-fit: cover; object-position: left; }
.research-note { display: grid; grid-template-columns: .5fr 1.2fr 1fr; gap: 28px; align-items: center; }
.research-note .label, .research-note p { margin: 0; }
.architecture-composition { display: grid; grid-template-columns: 1.5fr .8fr; gap: 20px; align-items: center; }
.architecture-composition .image-open img { aspect-ratio: 4 / 3; object-fit: contain; }
.experiment-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.experiment-composition .image-open img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.experiment-composition .prototype .image-open img { object-fit: contain; }
.experiment-composition .trial .image-open img { object-fit: contain; }
.pivot-artifacts { align-items: center; }
.artifact-stack { display: grid; gap: 20px; min-width: 0; }
.artifact-stack .image-open img { aspect-ratio: 16 / 9; object-fit: contain; object-position: center; }
.focused-product { background: #eaf0df; padding: 20px; border: 1px solid #d5ddca; border-radius: 24px; }
.focused-product .image-open img { height: auto; }
.focused-product > p { padding: 22px 4px 4px; color: #344638; font-size: 1.04rem; font-weight: 600; }
.flow { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); }
.flow .project-figure { display: flex; flex-direction: column; }
.flow .image-open img { aspect-ratio: 4 / 3; object-fit: contain; object-position: center; }
.logic-card { display: flex; flex-direction: column; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.logic-card .label { font-size: .67rem; }
.logic-card h3 { margin: 22px 0; font-size: 1.65rem; letter-spacing: -.025em; line-height: 1.1; }
.grade-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grade-list span { padding: 9px 5px; color: #123c24; background: #d0dc88; border: 1px solid #a1b359; border-radius: 7px; font-size: .76rem; font-weight: 700; text-align: center; }
.grade-list span:first-child { color: #fff; background: #174e2b; border-color: #174e2b; }
.grade-list span:nth-child(3) { color: #463700; background: #ffe393; border-color: #c7aa50; }
.grade-list span:last-child { color: #6f2119; background: #ffb8a9; border-color: #d77a6d; }
.logic-arrow { margin: 18px 0; color: var(--accent); font-size: 1.6rem; text-align: center; }
.logic-result { padding: 18px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.logic-card p { margin-top: 20px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.build-artifacts .image-open img { aspect-ratio: 4 / 3; object-fit: contain; object-position: center; }
.build-artifacts .odoo .image-open img { object-fit: contain; }
.outcome-sequence { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.outcome-sequence .book-detail { grid-row: span 2; }
.book-detail .image-open img { aspect-ratio: .72; object-fit: cover; object-position: right; }
.outcome-sequence .input-detail .image-open img { aspect-ratio: 16 / 9; object-fit: cover; object-position: bottom; }
.outcome-sequence .recipe-grades .image-open img { aspect-ratio: 16 / 9; object-fit: cover; object-position: bottom; }
.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 (max-width: 900px) {
  .architecture-composition, .research-artifacts, .research-note { grid-template-columns: 1fr; }
  .research-note { gap: 20px; }
  .flow { grid-template-columns: 1fr; gap: 18px; }
  .architecture-composition .image-open img { max-height: 600px; }
}
@media (max-width: 600px) {
  .media-stage, .focused-product { padding: 14px; }
  .hero-composition .hero-details, .experiment-composition, .outcome-sequence { grid-template-columns: 1fr; }
  .hero-composition > .project-figure, .hero-composition .hero-details { grid-column: auto; }
  .hero-composition { grid-template-columns: 1fr; }
  .research-artifacts { padding: 18px; }
  .outcome-sequence .book-detail { grid-row: auto; }
  .book-detail .image-open img { aspect-ratio: .95; }
  .project-figure figcaption { padding: 22px; }
  .image-viewer { padding: 55px 10px 16px; }
  .image-viewer p { padding: 0 8px; font-size: .8rem; }
}