body { max-width: 740px; margin: 56px auto; padding: 0 24px; color: #222; background: white; font: 16px/1.6 system-ui, sans-serif; }
#project-alphawrite figure img { max-width: 640px; }
h1 { font-size: 28px; line-height: 1.3; margin: 0 0 16px; font-weight: 600; }
h2 { font-size: 21px; margin: 40px 0 16px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; margin: 0; }
p { margin: 6px 0 0; }
a { color: #25579b; text-underline-offset: 2px; }
nav { margin-top: 14px; }
nav a { display: inline-block; margin-right: 16px; }
.years { margin-bottom: 28px; font-size: 14px; }
.year { scroll-margin-top: 20px; }
.year > h2 { border-bottom: 1px solid #e6e6e6; padding-bottom: 8px; }
article { margin: 0 0 32px; }
.dates { font-size: 13px; color: #666; margin-top: 2px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.gallery.thumbnails { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery.thumbnails figure:first-child { grid-column: auto; }
.gallery.thumbnails img { max-width: 200px; }
figure { margin: 0; min-width: 0; }
figure:first-child.landscape { grid-column: 1 / -1; }
figure img { display: block; width: 100%; height: auto; }
figure.portrait img { width: auto; height: 290px; max-width: 100%; object-fit: contain; object-position: left top; }
figcaption { font-size: 12px; line-height: 1.5; color: #666; margin-top: 7px; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid #e6e6e6; color: #777; font-size: 13px; }
:focus-visible { outline: 2px solid #25579b; outline-offset: 4px; }
@media (max-width: 600px) { body { margin: 28px auto; padding: 0 20px; } h1 { font-size: 25px; } .gallery, .gallery.thumbnails { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } figure.portrait img { height: 230px; } figure.landscape { grid-column: 1 / -1; } .gallery.thumbnails figure { grid-column: auto; } }

.group { margin-top: 38px; padding-top: 20px; border-top: 1px solid #e6e6e6; scroll-margin-top: 20px; }
.group > h2 { margin: 0; }
details { margin-top: 14px; }
summary { cursor: pointer; color: #25579b; font-size: 14px; }
.details-body { margin-top: 25px; }
.collection { margin-bottom: 24px; }
.collection p { font-size: 15px; }

/* Compact selectable screenshot collections; full images remain linked. */
.gallery.compact-screens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery.compact-screens figure { grid-column: auto; }
.gallery.compact-screens figure img { width: 100%; height: auto; max-width: 100%; }
.gallery.compact-screens figcaption { font-size: 11px; }
.capture-note { font-size: 12px; color: #666; margin-top: 10px; }
.gallery.compact-walking { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery.compact-walking figure { grid-column: auto; }
.gallery.compact-walking figure img { width: 100%; height: 180px; max-width: 100%; object-fit: contain; object-position: center; }
@media (max-width: 600px) {
 .gallery.compact-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
 .gallery.compact-screens figure { grid-column: auto; }
 .gallery.compact-walking { gap: 8px; }
 .gallery.compact-walking figure { grid-column: auto; }
 .gallery.compact-walking figure img { height: 140px; }
 .gallery.compact-walking figcaption { font-size: 11px; }
}

/* Show disclosure hierarchy with a small inset and a plain vertical rule. */
.details-body, .screenshot-body { border-left: 1px solid #e4e4e4; padding-left: 18px; }
.screenshot-body { margin-top: 12px; padding-left: 14px; }
.project-video { position: relative; aspect-ratio: 16 / 9; width: 100%; margin-top: 18px; }
.project-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption, .video-fallback { font-size: 12px; color: #666; }
@media (max-width: 600px) { .details-body { padding-left: 12px; } .screenshot-body { padding-left: 10px; } }

/* Compact original photo/artwork sets, linked to larger images. */
.gallery.compact-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery.compact-photos figure { grid-column: auto; }
.gallery.compact-photos figure img { width: 100%; height: 290px; object-fit: contain; object-position: left top; }
@media (max-width: 600px) { .gallery.compact-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery.compact-photos figure img { height: 230px; } }

/* Continuous App Store artwork: equal scale, no wrapping, nine-pixel seams. */
.gallery.store-row { display: flex; flex-wrap: nowrap; gap: 9px; align-items: flex-start; }
.gallery.store-row figure { flex: 1 1 0; min-width: 0; }
.gallery.store-row figure img { display: block; width: 100%; height: auto; max-width: none; object-fit: fill; }
.gallery.store-row figcaption { font-size: 11px; }

/* Visible archival image sets and deliberately paired product views. */
.image-set { margin-top: 18px; }
.image-set h4 { margin: 0; font-size: 13px; font-weight: 500; color: #666; }
.image-set .gallery { margin-top: 8px; }
.gallery.equal-height { display: grid; grid-template-columns: minmax(0,0.56221889fr) minmax(0,1.77777778fr); gap: 20px; align-items: start; }
.gallery.equal-height figure { grid-column: auto; }
.gallery.equal-height figure img { width: 100%; height: auto; max-width: none; }
.gallery.mobile-row { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.gallery.mobile-row figure { grid-column: auto; }
.gallery.mobile-row figure img { width: 100%; height: 360px; object-fit: contain; object-position: left top; }
.gallery.website-preview { display: block; }
.gallery.website-preview figure img { width: auto; height: 640px; max-width: 100%; object-fit: contain; object-position: left top; }
@media(max-width:600px) {
 .gallery.equal-height { gap: 12px; }
 .gallery.mobile-row { gap: 9px; }
 .gallery.mobile-row figure img { height: 200px; }
 .gallery.website-preview figure img { height: 520px; }
}