.story { width: min(100% - 48px, 940px); margin: 70px auto; }
.story h1, .collection h1 { font-weight: 400; font-size: clamp(2.3rem,6vw,4.5rem); line-height: 1.15; margin-bottom: 28px; }
.story-intro { font-size: 1.25rem; color: var(--muted); margin: 24px 0 36px; }
.story-date { color: var(--muted); }
.story-cover { width: 100%; height: auto; max-height: 650px; object-fit: cover; margin-bottom: 40px; }
.story-body { max-width: 740px; margin: 0 auto 40px; }
.story-body p { margin-bottom: 24px; }
.collection { width: min(100% - 48px,1300px); margin: 70px auto; }
.collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin: 32px 0; }
.project-tile { border: 1px solid var(--border); padding: 20px; }
.project-tile img, .gallery-photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.project-tile h2 { font-size: 1.5rem; margin: 18px 0 12px; }
.project-tile p { color: var(--muted); margin-bottom: 20px; }
.project-tile:hover { border-color: var(--accent); }
.gallery-photo { border: 0; background: var(--background-light); cursor: zoom-in; }
.photo-dialog { background: var(--background); border: 1px solid var(--border); margin: auto; max-width: 94vw; max-height: 94dvh; padding: 48px 12px 12px; }
.photo-dialog::backdrop { background: rgba(0,0,0,.85); }
.photo-dialog img { max-height: 80dvh; max-width: 88vw; width: auto; height: auto; object-fit: contain; }
.photo-close { position: absolute; right: 12px; top: 4px; border: 0; color: var(--text); background: transparent; font-size: 32px; cursor: pointer; }
.preview-note { color: var(--accent); border: 1px solid var(--border); padding: 12px; margin-bottom: 24px; }
.managed-image { position: relative; overflow: hidden; }
.managed-image > img, .managed-image > a { position: absolute; inset: 0; width: 100%; height: 100%; }
.managed-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-image img { opacity: 1; transition: opacity 1.8s ease; }
.hero-image img.hero-next { opacity: 0; }
.hero-image img.hero-next.is-visible { opacity: 1; }
.gallery-grid.managed-gallery { display: flex; overflow-x: auto; gap: 24px; scroll-snap-type: x proximity; }
.managed-gallery a { flex: 0 0 calc((100% - 48px)/3); scroll-snap-align: start; }
.managed-gallery img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.gallery-controls { display: flex; justify-content: flex-end; gap: 12px; margin: 16px 0; }
.gallery-controls button { background: var(--background-light); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; font: inherit; cursor: pointer; }
@media(max-width:800px) { .collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .managed-gallery a { flex-basis: 65%; } }
@media(max-width:500px) { .collection-grid { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion:reduce) { .hero-image img { transition: none; } }
.hero-pause { position: absolute; right: 16px; bottom: 16px; z-index: 1; background: rgba(9,11,11,.85); color: var(--text); border: 1px solid var(--border); padding: 8px 12px; font: inherit; font-size: .75rem; cursor: pointer; }
.project-gallery { margin: 40px 0; }
.project-gallery-photo { color: var(--text); font: inherit; text-align: left; }
.project-photo-caption { display:block; padding:12px; white-space:pre-wrap; }
.project-photo-dialog { margin:auto; width:min(94vw,1250px); max-height:94dvh; overflow:auto; background:var(--background-light); color:var(--text); border:1px solid var(--border); padding:48px 24px 24px; }
.project-photo-dialog::backdrop { background:rgba(0,0,0,.85); }
.project-photo-view { display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,1fr); gap:28px; align-items:center; }
.project-photo-view img { width:100%; height:auto; max-height:75dvh; object-fit:contain; }
.project-photo-view aside { min-width:0; }
#projectPhotoCaption { white-space:pre-wrap; overflow-wrap:anywhere; margin:20px 0; }
#projectPhotoCount { color:var(--muted); margin-bottom:16px; }
.project-photo-navigation { display:flex; flex-wrap:wrap; gap:12px; }
.project-photo-navigation button { background:var(--background); color:var(--text); border:1px solid var(--border); padding:12px; font:inherit; cursor:pointer; }
.project-photo-navigation button:disabled { opacity:.4; cursor:default; }
@media(max-width:700px) { .project-photo-view { grid-template-columns:1fr; } .project-photo-view img { max-height:50dvh; } }