:root {
  color-scheme: light;
  --paper: oklch(95% 0.025 95);
  --paper-deep: oklch(90% 0.04 90);
  --ink: oklch(23% 0.026 102);
  --soft-ink: oklch(42% 0.03 100);
  --moss: oklch(37% 0.065 139);
  --line: oklch(75% 0.035 98 / 0.72);
  --rust: oklch(54% 0.09 48);
  --mono: "DM Mono", monospace;
  --serif: "Noto Serif TC", "Newsreader", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }

.page-shell { width: min(100%, 1120px); margin: 0 auto; padding: 0 clamp(20px, 5vw, 68px) 110px; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 74px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-size: 15px; font-weight: 700; text-decoration: none; letter-spacing: .04em; }
.wordmark-mark { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: var(--paper); background: var(--moss); font-family: "Newsreader", serif; font-size: 18px; font-style: italic; }
.icon-button, .viewer-close { display: grid; width: 44px; height: 44px; place-items: center; cursor: pointer; color: inherit; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-family: var(--mono); font-size: 17px; }
.icon-button:active, .filter-chip:active, .nav-item:active, .action-button:active { transform: scale(.97); }

.intro { max-width: 680px; padding: clamp(51px, 10vw, 118px) 0 clamp(58px, 10vw, 118px); }
.eyebrow { margin: 0 0 15px; color: var(--moss); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .13em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 600px; margin-bottom: 22px; font-size: clamp(39px, 8.2vw, 92px); font-weight: 600; line-height: 1.13; letter-spacing: -.065em; }
.intro-copy { max-width: 340px; margin-bottom: 0; color: var(--soft-ink); font-size: 16px; line-height: 1.85; }

.collection { border-top: 1px solid var(--ink); padding-top: 20px; }
.collection-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.collection-heading .eyebrow { margin-bottom: 8px; }
.collection h2 { margin: 0; font-size: clamp(27px, 4vw, 45px); font-weight: 600; letter-spacing: -.05em; }
.count { padding-bottom: 5px; color: var(--soft-ink); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.filter-row { display: flex; gap: 8px; overflow-x: auto; margin: 28px -20px 29px; padding: 2px 20px 5px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { min-height: 40px; flex: 0 0 auto; padding: 0 15px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; color: var(--soft-ink); background: transparent; font-size: 14px; }
.filter-chip.is-selected { border-color: var(--moss); color: var(--paper); background: var(--moss); }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 27px 14px; }
.image-entry { min-width: 0; animation: reveal .55s both cubic-bezier(.16, 1, .3, 1); }
.image-entry:nth-child(2) { animation-delay: .08s; }
.image-entry[hidden] { display: none; }
.image-card { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in; border: 0; background: var(--paper-deep); aspect-ratio: 2 / 3; }
.image-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.16, 1, .3, 1); }
.image-card:focus-visible img, .image-card:hover img { transform: scale(1.035); }
.image-card-label { position: absolute; right: 9px; bottom: 9px; padding: 6px 7px; color: oklch(97% 0.01 95); background: oklch(17% 0.02 100 / .6); font-family: var(--mono); font-size: 8px; letter-spacing: .04em; }
.image-meta { padding-top: 11px; }
.image-meta h3 { margin-bottom: 4px; font-size: 17px; font-weight: 600; letter-spacing: -.035em; }
.image-meta p { margin: 0; color: var(--soft-ink); font-size: 13px; }
.empty-state { padding: 35px 0; color: var(--soft-ink); font-size: 15px; }

.bottom-nav { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: clamp(17px, 7vw, 48px); min-height: 68px; padding: 7px max(20px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-right)); border-top: 1px solid oklch(75% 0.035 98 / .7); background: oklch(95% 0.025 95 / .92); backdrop-filter: blur(14px); }
.nav-item { display: inline-flex; min-width: 58px; align-items: center; justify-content: center; gap: 5px; padding: 0; cursor: pointer; border: 0; color: var(--soft-ink); background: transparent; font-family: var(--serif); font-size: 13px; text-decoration: none; }
.nav-item span { color: var(--moss); font-family: var(--mono); font-size: 12px; }.nav-item.is-active { color: var(--ink); font-weight: 700; }

dialog { max-width: none; color: var(--ink); border: 0; background: var(--paper); } dialog::backdrop { background: oklch(17% 0.02 100 / .7); backdrop-filter: blur(3px); }
.image-viewer { width: min(100%, 940px); height: min(100dvh, 930px); padding: 58px 20px 24px; }
.viewer-close { position: absolute; z-index: 1; top: 12px; right: 13px; background: var(--paper); font-size: 25px; line-height: 1; }
.viewer-content { display: grid; height: 100%; gap: 22px; overflow: auto; }
.viewer-content > img { width: 100%; max-height: 59dvh; object-fit: contain; background: var(--paper-deep); }
.viewer-details { max-width: 540px; padding: 0 2px; }
.viewer-details h2, .about-sheet h2 { margin-bottom: 10px; font-size: clamp(28px, 6vw, 48px); line-height: 1.14; letter-spacing: -.055em; }.viewer-details > p:not(.eyebrow), .about-sheet p { margin-bottom: 23px; color: var(--soft-ink); font-size: 15px; line-height: 1.8; }
.viewer-actions { display: grid; gap: 9px; }.action-button { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 15px; border: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 14px; text-decoration: none; }.action-button-primary { cursor: pointer; border-color: var(--moss); color: var(--paper); background: var(--moss); }
.about-sheet { width: min(100%, 580px); padding: 72px clamp(25px, 7vw, 58px) 48px; }.about-sheet code { padding: 2px 5px; color: var(--moss); background: var(--paper-deep); font-family: var(--mono); font-size: .78em; }

@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 720px) { .gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 54px clamp(30px, 7vw, 96px); }.image-entry-shift { margin-top: clamp(30px, 8vw, 110px); }.filter-row { margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; }.viewer-content { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: center; gap: 38px; }.viewer-content > img { max-height: calc(100dvh - 120px); }.bottom-nav { display: none; }.page-shell { padding-bottom: 74px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }