.hero { background-image: linear-gradient(90deg, #163b2bbb, #315b3544 70%), url('assets/gallery/hydrangea-walk.png'); background-position: center 48%; }
.hero-character { display: none; }
.costume-grid { grid-template-columns: repeat(6, 1fr); }
.costume-card img { object-position: center top; }
.masonry { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(9, 250px); }
.gallery-guide { max-width: 1100px; margin: -18px auto 22px; color: #71835b; text-align: right; font-size: 11px; }
.masonry figure { cursor: zoom-in; box-shadow: 0 7px 18px #42563a18; }
.gallery-modal { width: min(94vw, 920px); max-width: 920px; padding: 32px; }
.gallery-modal img { width: auto; max-width: 100%; max-height: 76vh; object-fit: contain; mix-blend-mode: normal; }
.gallery-modal p { margin-bottom: 0; color: #71835b; }
.masonry .scene img { object-fit: cover; mix-blend-mode: normal; }
.masonry .tall.scene { grid-row: span 2; }
.masonry .tall.scene img { object-fit: cover; background: none; }
.masonry figure:not(.scene) img { object-fit: contain; background: #edf0d9; }
.gallery-scenes { max-width: 1100px; margin: 0 auto; display: grid; gap: 48px; }
.gallery-scene { border-top: 1px solid #d8dfba; padding-top: 18px; }
.scene-heading { display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: start; margin-bottom: 17px; }
.scene-heading > span { color: #b39a48; font: 13px 'DM Serif Display', serif; letter-spacing: .08em; padding-top: 7px; }
.scene-heading h3 { margin: 0; color: #456438; font: 500 clamp(24px, 3vw, 32px)/1.4 var(--serif); letter-spacing: .06em; }
.scene-heading p { margin: 2px 0 0; color: #71835b; font-size: 11px; }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.scene-grid figure { position: relative; aspect-ratio: 1 / .78; margin: 0; overflow: hidden; cursor: zoom-in; background: #e2e6c7; box-shadow: 0 7px 18px #42563a18; }
.scene-grid figure:nth-child(1) { grid-column: span 2; aspect-ratio: 1.55 / 1; }
.scene-grid figure:nth-child(4n + 1) { grid-column: auto; aspect-ratio: 1 / .78; }
.scene-grid img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; transition: transform .4s ease; }
.scene-grid figure:not(.scene) img { object-fit: contain; background: #edf0d9; mix-blend-mode: multiply; }
.scene-grid figure:hover img { transform: scale(1.04); }
.scene-grid figcaption { position: absolute; inset: auto 0 0; padding: 11px 13px; color: #fff; background: #29432baa; font-size: 10px; display: flex; justify-content: space-between; }
.scene-grid figcaption b { font-weight: 500; }
.scene-grid figcaption span { font-size: 8px; }
.character-sheet-album { background: #f7f5e8; border: 1px solid #d8dfba; padding: 24px; }
.character-sheet-album .scene-heading { margin-bottom: 23px; }
.character-sheet-groups { display: grid; gap: 29px; }
.character-sheet-group { border-top: 1px dashed #d8cfad; padding-top: 16px; }
.character-sheet-group:first-child { border-top: 0; padding-top: 0; }
.character-sheet-group header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.character-sheet-group h4 { margin: 0; color: #557342; font: 500 20px var(--serif); letter-spacing: .05em; }
.character-sheet-group p { margin: 0; color: #71835b; font-size: 10px; }
.character-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.character-sheet { position: relative; aspect-ratio: 1.15 / 1; margin: 0; overflow: hidden; background: #fffdf6; border: 1px solid #e4dec3; cursor: zoom-in; box-shadow: 0 5px 12px #786e4914; }
.character-sheet img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s ease; }
.character-sheet:hover img { transform: scale(1.035); }
.character-sheet figcaption { position: absolute; inset: auto 0 0; padding: 8px 9px; color: #fff; background: #29432bc7; font-size: 9px; display: flex; justify-content: space-between; gap: 6px; }
.character-sheet figcaption b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-sheet figcaption span { flex: none; font-size: 8px; }
.filters span { border: 1px solid #d0d9b3; border-radius: 20px; color: #667a4a; font-size: 10px; letter-spacing: .13em; padding: 5px 11px; }
@media (max-width: 900px) { .costume-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .costume-grid { grid-template-columns: repeat(2, 1fr); }.gallery-guide { margin: -7px 0 17px; text-align: left; }.scene-heading { grid-template-columns: 1fr; gap: 1px; }.scene-heading > span { padding: 0; }.scene-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.scene-grid figure, .scene-grid figure:nth-child(1), .scene-grid figure:nth-child(4n + 1) { grid-column: auto; aspect-ratio: 1 / 1; }.scene-grid figure:nth-child(1) { grid-column: span 2; aspect-ratio: 1.45 / 1; }.gallery-scenes { gap: 37px; }.character-sheet-album { padding: 15px 10px; }.character-sheet-group header { display: block; }.character-sheet-group p { margin-top: 2px; }.character-sheet-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }.character-sheet { aspect-ratio: 1 / 1; }.gallery-modal { padding: 24px 16px; }.gallery-modal img { max-height: 70vh; } }