:root{color-scheme:dark;font-family:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;background:#10181c;color:#edf1f1;font-size:16px}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1520px;margin:auto;padding-left:40px;padding-right:40px}header{padding-top:36px;padding-bottom:24px;border-bottom:1px solid #344047}.brand{font-size:.875rem;letter-spacing:.18em;color:#9dadb6}.brand span{color:#eab769;letter-spacing:.06em;margin-left:10px}h1{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;margin:14px 0 10px;letter-spacing:.02em}header p{margin:0;color:#a8b9c1;font-size:1rem}main{padding-top:24px;padding-bottom:36px}.filters{display:grid;gap:20px}.days,.categories{display:flex;gap:8px;flex-wrap:wrap}button,select{font:inherit;font-size:.875rem;border:1px solid #43545e;border-radius:6px;color:#cbd8de;background:#18252d;padding:10px 15px;cursor:pointer}button:hover,select:hover{border-color:#d7a357;color:#fff}button[aria-pressed="true"]{background:#eab769;color:#192127;border-color:#eab769}button:focus-visible,select:focus-visible{outline:3px solid #fff;outline-offset:3px}.filter-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.filter-row label{color:#abbcc5;font-size:.875rem;display:flex;align-items:center;gap:10px}select{max-width:250px}.result{display:flex;align-items:center;justify-content:space-between;margin:27px 0 18px;gap:15px}h2{margin:0;font-size:1.125rem;font-weight:500}#count{color:#aabac3;font-size:.875rem}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}.photo{padding:0;border:none;border-radius:0;background:none;text-align:left;min-width:0;display:block;width:100%;color:#e4eaee}.photo:hover{color:#eab769}.photo figure{margin:0}.photo .image{height:auto;aspect-ratio:4/3;background:#080c0e;display:flex;align-items:center;justify-content:center;overflow:hidden}.photo img{width:100%;height:100%;object-fit:contain}.photo figcaption{padding-top:10px;display:flex;align-items:baseline;gap:8px;justify-content:space-between}.photo .subject{font-size:.95rem;overflow-wrap:anywhere}.photo .day{font-size:.8125rem;color:#9fadb5;white-space:nowrap}.photo .filename{font-size:.8125rem;color:#869da9;display:block;margin-top:4px}footer{padding-top:20px;padding-bottom:32px;border-top:1px solid #344047;color:#96a9b3;font-size:.875rem;display:flex;justify-content:space-between;gap:20px}dialog{padding:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;border:0;background:#080d11;color:#fff}dialog::backdrop{background:#080d11}.viewer-head{height:85px;display:flex;align-items:center;justify-content:space-between;padding:15px 28px;gap:15px}.viewer-head strong{font-size:1.0625rem}.viewer-head span{display:block;color:#acbec9;font-size:.875rem;margin-top:5px}.stage{height:calc(100dvh - 154px);display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;padding:0 12px}.stage img{width:100%;height:100%;min-height:0;object-fit:contain}.move{font-size:2.25rem;background:transparent;border:0;padding:8px}.viewer-bottom{height:69px;display:flex;align-items:center;justify-content:center;gap:25px;color:#afc1cc;font-size:.875rem}.viewer-bottom span:last-child{color:#8a9da8}#empty{padding:60px 0;text-align:center;color:#aabac3}body.modal-open{overflow:hidden}[hidden]{display:none!important}@media(min-width:1700px){.gallery{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:1000px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}header,main,footer{padding-left:24px;padding-right:24px}}@media(max-width:640px){header,main,footer{padding-left:16px;padding-right:16px}header{padding-top:24px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.days button{padding:9px 11px}.categories button{padding:9px 12px}.filter-row{gap:16px}.filter-row label{width:100%}select{flex:1;max-width:none}.photo figcaption{display:block}.photo .day{display:block;margin-top:4px}.viewer-head{padding:12px 16px;height:95px}.stage{height:calc(100dvh - 175px);grid-template-columns:35px minmax(0,1fr) 35px;padding:0}.move{padding:0}.viewer-bottom{height:80px;gap:14px;flex-wrap:wrap}.viewer-bottom span:last-child{display:none}footer{display:block}footer span{display:block;margin-top:8px}}
/* Photo collage */ main{padding-top:28px}.result{justify-content:flex-end;margin:18px 0 14px}.gallery{display:block;column-count:4;column-gap:10px}.photo{break-inside:avoid;margin:0 0 10px;position:relative}.photo .image{aspect-ratio:auto;display:block;background:none}.photo img{height:auto;display:block;object-fit:contain}.photo figcaption{position:absolute;bottom:0;left:0;right:0;padding:24px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:white;pointer-events:none}.photo .subject{font-size:.875rem}.filters{padding-bottom:15px;border-bottom:1px solid #344047}@media(min-width:1700px){.gallery{column-count:5}}@media(max-width:1000px){.gallery{column-count:3}}@media(max-width:640px){.gallery{column-count:2;column-gap:7px}.photo{margin-bottom:7px}.photo figcaption{padding:20px 7px 7px}.photo .subject{font-size:.8125rem}}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:4px;column-gap:10px;row-gap:8px;grid-auto-flow:row}.photo{margin:0;align-self:start;grid-row-end:span 20}@media(min-width:1700px){.gallery{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:1000px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:7px}.photo{margin:0}}
.gallery .photo-wide{grid-column:1/-1}.photo-wide img{width:100%;height:auto;object-fit:contain}

/* Aligned collage rows preserve photo order and eliminate masonry gaps. */
.gallery{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;column-count:auto}.gallery .photo{width:calc(25% - 6px);margin:0;grid-row-end:auto}.gallery .photo-wide{width:100%;flex-basis:100%}.photo .image{width:100%;height:auto}.photo img{width:100%;height:auto}.days button{padding:9px 12px}.result{margin-top:18px}@media(max-width:640px){.gallery .photo{width:calc(50% - 4px)}}

.gallery .photo-hero{width:100%;flex-basis:100%}.photo-hero .image{height:clamp(320px,60vh,640px)}.photo-hero img{height:100%;object-fit:cover;object-position:50% 70%}@media(max-width:640px){.photo-hero .image{height:430px}}

/* Portrait lead image keeps the complete frame in both all-days and Day02. */
.gallery .photo-hero{width:100%;flex-basis:100%;display:flex;justify-content:center}.photo-hero figure{width:min(480px,100%);position:relative}.photo-hero .image{height:auto;aspect-ratio:auto}.photo-hero img{width:100%;height:auto;object-fit:contain;object-position:center}.photo-hero figcaption{position:absolute}@media(max-width:640px){.photo-hero .image{height:auto}.photo-hero figure{width:min(360px,100%)}}

/* Lead photo stays inside the collage instead of occupying its own row. */
.gallery.integrated-lead{display:block;position:relative}.gallery.integrated-lead .photo{margin:0;display:block}.gallery.integrated-lead .photo-hero{flex-basis:auto;display:block;justify-content:initial}.gallery.integrated-lead .photo-hero figure{width:100%}.gallery.integrated-lead .photo-hero .image{height:auto}.gallery.integrated-lead .photo-hero img{width:100%;height:auto;object-fit:contain}