:root {
  --paper: #f2f0e9;
  --bright: #fbfaf6;
  --ink: #18201c;
  --muted: #677069;
  --line: #cbc6ba;
  --red: #bd2d2a;
  --green: #214f3e;
  --dark: #101f19;
  --yellow: #e2b33f;
  --shell: min(1180px, calc(100vw - 80px));
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; overflow-x: hidden; background: var(--paper); line-height: 1.7; }
body.lightbox-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button, a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.archive-shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 8px 14px; color: #fff; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.reading-progress { position: fixed; z-index: 500; inset: 0 0 auto; height: 3px; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; }

.archive-header { position: fixed; z-index: 300; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 40px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.28); transition: color 180ms, background 180ms; }
.archive-header.scrolled { color: var(--ink); background: rgba(242,240,233,.96); border-color: var(--line); }
.archive-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.archive-brand > span { display: grid; place-items: center; width: 35px; height: 35px; color: #fff; background: var(--red); font-family: "STKaiti", "KaiTi", serif; font-size: 21px; font-weight: 700; }
.archive-brand strong { font-size: 14px; }
.back-home { font-size: 12px; font-weight: 700; text-decoration: none; }

.archive-hero { position: relative; min-height: 72svh; overflow: hidden; color: #fff; background: var(--dark); isolation: isolate; }
.archive-hero > img, .archive-hero-shade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.archive-hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(7,21,16,.85), rgba(7,21,16,.42) 54%, rgba(7,21,16,.14)), linear-gradient(0deg, rgba(7,21,16,.84), transparent 44%); }
.archive-hero-index { position: absolute; top: 108px; right: 5vw; left: 5vw; display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.4); font-size: 10px; font-weight: 700; }
.archive-hero-copy { display: flex; flex-direction: column; justify-content: center; min-height: 72svh; width: 90vw; margin: auto; padding: 135px 0 125px; }
.archive-hero-copy > p:first-child { margin: 0 0 20px; color: #efc760; font-size: 11px; font-weight: 800; }
.archive-hero h1 { max-width: 900px; margin: 0; font-family: "STSong", "SimSun", serif; font-size: 78px; font-weight: 700; line-height: 1.08; letter-spacing: 0; }
.archive-hero-lead { max-width: 600px; margin: 30px 0 0; color: rgba(255,255,255,.78); font-size: 17px; }
.archive-hero-motion { display: inline-flex; align-items: center; gap: 18px; align-self: flex-start; margin-top: 28px; padding-bottom: 8px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.55); font-size: 11px; font-weight: 800; text-decoration: none; }
.archive-hero-motion b { color: #efc760; font-size: 18px; }
.archive-hero-stats { position: absolute; right: 5vw; bottom: 30px; left: 5vw; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.35); }
.archive-hero-stats div { display: flex; align-items: baseline; gap: 12px; padding: 19px 0; }
.archive-hero-stats strong { color: #efc760; font-family: Georgia, serif; font-size: 32px; }
.archive-hero-stats span { font-size: 11px; }

.motion-archive { padding: 130px 0; color: #fff; background: var(--dark); }
.motion-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 55px; }
.motion-heading .section-index { width: 155px; margin-bottom: 20px; }
.motion-heading h2 { margin: 0; font-family: "STSong", "SimSun", serif; font-size: 54px; line-height: 1.18; letter-spacing: 0; }
.motion-mode { display: flex; border-bottom: 1px solid rgba(255,255,255,.28); }
.motion-mode button, .motion-mode a { min-width: 92px; padding: 12px 15px; color: rgba(255,255,255,.58); text-align: center; text-decoration: none; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; }
.motion-mode button.active { color: #fff; border-bottom-color: var(--yellow); }
.motion-mode a:hover, .motion-mode a:focus-visible { color: #fff; }
.motion-stage { position: relative; width: min(1500px, calc(100vw - 48px)); height: 86svh; min-height: 650px; margin: auto; overflow: hidden; border: 1px solid rgba(255,255,255,.28); background: #030907 url("/assets/generated/darkroom-field.webp") center / cover no-repeat; box-shadow: 0 35px 90px rgba(0,0,0,.35); scroll-margin-top: 76px; isolation: isolate; }
.motion-stage::before { position: absolute; z-index: -1; inset: 0; content: ""; background: rgba(4,14,10,.18); pointer-events: none; }
.stage-toolbar { position: absolute; z-index: 30; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.2); background: rgba(7,20,15,.82); }
.stage-toolbar p { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.stage-toolbar span { color: #efc760; font-size: 11px; font-weight: 800; }
.stage-toolbar b { color: rgba(255,255,255,.58); font-size: 10px; font-weight: 500; }
.stage-toolbar button { padding: 8px 12px; color: #fff; border: 1px solid rgba(255,255,255,.42); background: transparent; cursor: pointer; }

.meteor-field { position: absolute; inset: 64px 0 0; overflow: hidden; cursor: crosshair; background-image: radial-gradient(circle at center, rgba(255,255,255,.92) 0 1px, transparent 1.4px), radial-gradient(circle at center, rgba(239,199,96,.72) 0 1px, transparent 1.5px); background-size: 91px 83px, 157px 131px; background-position: 19px 12px, 73px 41px; }
.meteor-field::before, .meteor-field::after { position: absolute; z-index: 0; width: 42vw; height: 1px; content: ""; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), rgba(239,199,96,.9)); box-shadow: 0 0 8px rgba(239,199,96,.75), 0 0 24px rgba(255,255,255,.3); transform: rotate(24deg); animation: ambient-comet 7s linear infinite; }
.meteor-field::before { top: 18%; left: -50%; }
.meteor-field::after { top: 68%; left: -65%; width: 30vw; animation-delay: -3.6s; animation-duration: 9s; }
.meteor-card { --card-width: calc(62px + var(--depth) * 74px); position: absolute; z-index: calc(1 + var(--depth) * 8); top: calc(var(--y) * 1%); left: calc(var(--x) * 1%); width: var(--card-width); aspect-ratio: 4 / 3; padding: 0; overflow: visible; border: 0; background: #15251e; opacity: calc(.35 + var(--depth) * .65); cursor: pointer; animation: meteor-flight var(--duration) linear var(--delay) infinite; will-change: transform; }
.meteor-card::before { position: absolute; z-index: -1; top: 50%; right: calc(100% + 2px); width: calc(90px + var(--depth) * 230px); height: calc(1px + var(--depth) * 2px); content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(239,199,96,.95)); box-shadow: 0 0 8px rgba(239,199,96,.65); transform: translateY(-50%); }
.meteor-card::after { position: absolute; z-index: 2; top: 50%; left: -3px; width: 7px; height: 7px; border-radius: 50%; content: ""; background: #fff7d1; box-shadow: 0 0 8px #fff, 0 0 18px #efc760; transform: translate(-50%, -50%); }
.meteor-card img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid rgba(255,255,255,.72); box-shadow: 0 12px 30px rgba(0,0,0,.48), 0 0 14px rgba(239,199,96,.16); pointer-events: none; }
.meteor-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.meteor-field.assembled { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-content: start; gap: 5px; padding: 16px; overflow-y: auto; cursor: default; scrollbar-color: var(--yellow) transparent; }
.meteor-field.assembled .meteor-card { position: static; z-index: auto; width: auto; opacity: 1; animation: none; transform: none; box-shadow: none; }
.meteor-field.assembled .meteor-card::before, .meteor-field.assembled .meteor-card::after { display: none; }

.film-field { position: absolute; inset: 64px 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(5,15,11,.44); }
.film-field:not([hidden]) { display: grid; }
.film-column { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid rgba(239,199,96,.35); background: #080b09 url("/assets/generated/film-lightleak.webp") center / cover; }
.film-column::after { position: absolute; z-index: 3; inset: 54px 0 0; content: ""; background: linear-gradient(90deg, rgba(238,71,35,.16), transparent 23%, transparent 76%, rgba(239,199,96,.12)); mix-blend-mode: screen; pointer-events: none; }
.film-column:last-child { border-right: 0; }
.film-column.paused { box-shadow: inset 0 0 0 2px var(--yellow); }
.film-column-head { position: absolute; z-index: 5; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 28px 1fr 24px; align-items: center; width: 100%; min-height: 54px; padding: 9px 12px; color: #fff; text-align: left; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); background: rgba(7,18,13,.9); cursor: pointer; }
.film-column-head span { color: #efc760; font-family: Georgia, serif; font-size: 10px; }
.film-column-head strong { font-family: "STSong", "SimSun", serif; font-size: 17px; }
.film-column-head b { color: rgba(255,255,255,.62); text-align: right; font-size: 12px; }
.film-column.paused .film-column-head b { color: var(--yellow); }
.film-viewport { position: absolute; inset: 54px 0 0; overflow: hidden; }
.film-track { position: relative; display: grid; gap: 12px; padding: 18px 20px; background: rgba(5,8,6,.82); will-change: transform; }
.film-track::before, .film-track::after { position: absolute; z-index: 2; top: 0; bottom: 0; width: 8px; content: ""; background: repeating-linear-gradient(to bottom, #d8cba5 0 7px, transparent 7px 15px); opacity: .75; pointer-events: none; }
.film-track::before { left: 5px; }
.film-track::after { right: 5px; }
.film-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 1px solid rgba(246,232,188,.58); background: #182720; box-shadow: 0 0 0 3px #090b09; cursor: pointer; }
.film-frame::after { position: absolute; right: 5px; bottom: 3px; content: attr(data-frame); color: rgba(255,245,204,.8); font-family: Georgia, serif; font-size: 8px; text-shadow: 0 1px 2px #000; }
.film-frame:nth-child(5n) { aspect-ratio: 16 / 9; }
.film-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); transition: filter 180ms; }
.film-frame:hover img, .film-frame:focus-visible img { filter: saturate(1.08) contrast(1); }
.film-frame:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

@keyframes meteor-flight {
  0% { transform: translate3d(-135vw, -82vh, 0) rotate(5deg); }
  100% { transform: translate3d(135vw, 82vh, 0) rotate(5deg); }
}
@keyframes ambient-comet { from { translate: 0 -20vh; } to { translate: 190vw 85vh; } }

.archive-intro { padding: 135px 0 0; }
.intro-grid { display: grid; grid-template-columns: 170px 1fr; gap: 70px; margin-bottom: 90px; }
.section-index { margin: 0; padding-top: 8px; color: var(--red); border-top: 2px solid var(--red); font-size: 11px; font-weight: 800; }
.section-index.light { color: #efc760; border-color: #efc760; }
.intro-grid h2, .browser-heading h2 { margin: 0; font-family: "STSong", "SimSun", serif; font-size: 54px; line-height: 1.2; letter-spacing: 0; }
.intro-grid > div > p { max-width: 710px; margin: 30px 0 0; color: var(--muted); font-size: 15px; }
.path-list { border-top: 1px solid var(--line); }
.path-list button { display: grid; grid-template-columns: 32vw 1fr; width: 100%; min-height: 260px; padding: 0; color: var(--ink); text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
.path-list img { width: 100%; height: 260px; object-fit: cover; filter: saturate(.82); transition: filter 220ms, transform 400ms; }
.path-list button > span { display: grid; grid-template-columns: 150px 1fr 1fr; align-items: center; gap: 35px; padding: 30px 6vw; }
.path-list small { color: var(--red); font-family: Georgia, serif; font-size: 10px; }
.path-list strong { font-family: "STSong", "SimSun", serif; font-size: 34px; }
.path-list b { color: var(--muted); font-size: 13px; font-weight: 500; }
.path-list button:hover img, .path-list button:focus-visible img { filter: saturate(1); }
.path-list button:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

.archive-browser { padding: 130px 0; color: #fff; background: var(--dark); }
.browser-heading { display: grid; grid-template-columns: 1fr 380px; gap: 80px; align-items: end; margin-bottom: 65px; }
.browser-heading .section-index { width: 150px; margin-bottom: 22px; }
.browser-heading > p { margin: 0; color: rgba(255,255,255,.62); font-size: 13px; }
.archive-toolbar { position: sticky; z-index: 100; top: 76px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 13px 40px; color: var(--ink); border-bottom: 1px solid var(--line); background: rgba(242,240,233,.97); }
.filter-scroll { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-scroll button, .toolbar-actions > button { flex: 0 0 auto; padding: 8px 12px; color: var(--muted); border: 1px solid var(--line); background: transparent; cursor: pointer; }
.filter-scroll button.active { color: #fff; border-color: var(--ink); background: var(--ink); }
.filter-scroll button span { margin-left: 5px; font-family: Georgia, serif; font-size: 9px; }
.toolbar-actions { display: flex; align-items: center; gap: 10px; }
.toolbar-actions > button { color: var(--ink); }
.density-control { display: flex; border: 1px solid var(--line); }
.density-control button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--muted); border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.density-control button:last-child { border-right: 0; }
.density-control button.active { color: #fff; background: var(--green); }
.archive-results { width: min(1440px, calc(100vw - 48px)); margin: 45px auto 0; }
.result-meta { display: flex; justify-content: space-between; margin-bottom: 18px; color: rgba(255,255,255,.56); font-size: 11px; }
.result-meta p { margin: 0; }
.result-meta strong { color: #efc760; font-family: Georgia, serif; font-size: 18px; }
.photo-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.photo-wall.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.archive-photo { position: relative; aspect-ratio: 4 / 3; min-width: 0; padding: 0; overflow: hidden; color: #fff; text-align: left; border: 0; background: #24342d; cursor: zoom-in; }
.archive-photo.portrait { aspect-ratio: 3 / 4; }
.archive-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity 240ms, transform 450ms; }
.archive-photo.loading img { opacity: 0; }
.archive-photo::after { position: absolute; inset: 55% 0 0; content: ""; background: linear-gradient(transparent, rgba(5,14,10,.78)); opacity: 0; transition: opacity 180ms; }
.archive-photo span { position: absolute; z-index: 1; right: 12px; bottom: 10px; left: 12px; display: flex; justify-content: space-between; align-items: end; opacity: 0; transition: opacity 180ms; }
.archive-photo span b { font-size: 12px; }
.archive-photo span small { color: rgba(255,255,255,.7); font-family: Georgia, serif; font-size: 9px; }
.archive-photo:hover::after, .archive-photo:hover span, .archive-photo:focus-visible::after, .archive-photo:focus-visible span { opacity: 1; }
.archive-photo:hover img { transform: scale(1.025); }
.archive-photo:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.load-sentinel { height: 2px; }
.load-more { display: block; min-width: 190px; margin: 35px auto 0; padding: 12px 20px; color: #fff; border: 1px solid rgba(255,255,255,.45); background: transparent; cursor: pointer; }
.load-more[hidden] { display: none; }

.archive-note { padding: 130px 0; }
.archive-note .archive-shell { display: grid; grid-template-columns: 170px 1fr; gap: 70px; }
.archive-note blockquote { max-width: 850px; margin: 0; font-family: "STSong", "SimSun", serif; font-size: 46px; line-height: 1.4; }
.archive-note .archive-shell > div { grid-column: 2; display: flex; align-items: start; justify-content: space-between; gap: 50px; padding-top: 35px; border-top: 1px solid var(--line); }
.archive-note .archive-shell > div p { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; }
.archive-note a { flex: 0 0 auto; color: var(--red); font-size: 12px; font-weight: 800; text-decoration: none; }
.archive-footer { color: #fff; background: var(--green); }
.archive-footer .archive-shell { display: flex; justify-content: space-between; gap: 24px; padding-block: 25px; font-size: 10px; }
.archive-footer a { color: inherit; text-decoration: none; }

.archive-lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; overflow: hidden; color: #fff; border: 0; background: rgba(5,12,9,.97); }
.archive-lightbox::backdrop { background: rgba(5,12,9,.97); }
.archive-lightbox[open] { display: grid; grid-template-columns: 78px 1fr 78px; place-items: center; }
.archive-lightbox figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: min(1120px, calc(100vw - 200px)); height: calc(100vh - 65px); margin: 0; }
.lightbox-image-wrap { display: grid; place-items: center; min-height: 0; }
.lightbox-image-wrap img { width: 100%; height: 100%; object-fit: contain; }
.archive-lightbox figcaption { display: flex; justify-content: space-between; gap: 30px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.2); }
.archive-lightbox figcaption small { color: #efc760; font-size: 10px; }
.archive-lightbox figcaption h2 { margin: 3px 0 0; font-family: "STSong", "SimSun", serif; font-size: 24px; }
.archive-lightbox figcaption > span { font-family: Georgia, serif; font-size: 13px; }
.lightbox-close, .lightbox-nav { display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; cursor: pointer; }
.lightbox-close { position: fixed; z-index: 2; top: 20px; right: 22px; width: 44px; height: 44px; font-size: 24px; }
.lightbox-nav { width: 48px; height: 48px; font-size: 23px; }

@media (max-width: 900px) {
  :root { --shell: calc(100vw - 40px); }
  .archive-header { height: 70px; padding: 0 20px; }
  .archive-hero h1 { font-size: 58px; }
  .motion-heading h2 { font-size: 43px; }
  .motion-stage { width: calc(100vw - 24px); min-height: 610px; }
  .meteor-field.assembled { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .intro-grid { grid-template-columns: 120px 1fr; gap: 35px; }
  .intro-grid h2, .browser-heading h2 { font-size: 43px; }
  .path-list button { grid-template-columns: 40vw 1fr; }
  .path-list button > span { grid-template-columns: 1fr; gap: 10px; padding: 30px; }
  .path-list strong { font-size: 29px; }
  .browser-heading { grid-template-columns: 1fr; gap: 25px; }
  .archive-toolbar { top: 70px; padding-inline: 20px; }
  .toolbar-actions > button { display: none; }
  .photo-wall { grid-template-columns: repeat(3, 1fr); }
  .photo-wall.compact { grid-template-columns: repeat(5, 1fr); }
  .archive-note .archive-shell { grid-template-columns: 120px 1fr; gap: 35px; }
  .archive-note blockquote { font-size: 38px; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100vw - 32px); }
  .archive-brand strong { font-size: 13px; }
  .back-home { font-size: 10px; }
  .archive-hero { min-height: 72svh; }
  .archive-hero > img { object-position: 58% center; }
  .archive-hero-index { top: 92px; right: 16px; left: 16px; }
  .archive-hero-copy { min-height: 72svh; width: calc(100vw - 32px); padding: 125px 0 135px; }
  .archive-hero h1 { font-size: 45px; line-height: 1.16; }
  .archive-hero-lead { font-size: 14px; }
  .archive-hero-stats { right: 16px; bottom: 16px; left: 16px; }
  .archive-hero-stats div { display: block; padding: 12px 4px; }
  .archive-hero-stats strong { display: block; font-size: 25px; }
  .archive-hero-stats span { font-size: 9px; }
  .motion-archive { padding: 85px 0; }
  .motion-heading { display: block; margin-bottom: 35px; }
  .motion-heading h2 { font-size: 35px; }
  .motion-mode { margin-top: 28px; overflow-x: auto; }
  .motion-mode button, .motion-mode a { flex: 1 0 auto; min-width: 88px; }
  .motion-stage { width: 100vw; height: 78svh; min-height: 580px; border-right: 0; border-left: 0; }
  .stage-toolbar { min-height: 58px; padding-inline: 12px; }
  .stage-toolbar b { display: none; }
  .meteor-field { inset: 58px 0 0; }
  .meteor-card { --card-width: calc(46px + var(--depth) * 48px); }
  .meteor-field.assembled { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 6px; }
  .film-field { inset: 58px 0 0; }
  .film-column-head { grid-template-columns: 18px 1fr; padding: 8px 5px; }
  .film-column-head strong { font-size: 12px; line-height: 1.3; }
  .film-column-head b { display: none; }
  .film-track { gap: 3px; padding: 3px; }
  .archive-intro { padding-top: 85px; }
  .intro-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 60px; }
  .section-index { width: 100px; }
  .intro-grid h2, .browser-heading h2 { font-size: 35px; }
  .path-list button { grid-template-columns: 42% 58%; min-height: 190px; }
  .path-list img { height: 190px; }
  .path-list button > span { gap: 7px; padding: 18px; }
  .path-list strong { font-size: 24px; }
  .path-list b { font-size: 11px; }
  .archive-browser { padding: 85px 0; }
  .browser-heading { margin-bottom: 42px; }
  .archive-toolbar { align-items: stretch; padding: 9px 10px; }
  .filter-scroll { margin-right: -8px; }
  .filter-scroll button { padding: 8px 10px; }
  .density-control { display: none; }
  .archive-results { width: calc(100vw - 12px); margin-top: 25px; }
  .result-meta { padding-inline: 5px; }
  .photo-wall, .photo-wall.compact { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .archive-photo.portrait { aspect-ratio: 3 / 4; }
  .archive-photo::after, .archive-photo span { opacity: 1; }
  .archive-photo span { right: 8px; bottom: 7px; left: 8px; }
  .archive-photo span b { font-size: 10px; }
  .archive-note { padding: 85px 0; }
  .archive-note .archive-shell { grid-template-columns: 1fr; gap: 32px; }
  .archive-note blockquote { font-size: 31px; }
  .archive-note .archive-shell > div { grid-column: 1; display: block; }
  .archive-note a { display: inline-block; margin-top: 25px; }
  .archive-footer .archive-shell { display: block; }
  .archive-footer span, .archive-footer a { display: block; margin: 4px 0; }
  .archive-lightbox[open] { display: grid; grid-template-columns: 1fr; }
  .archive-lightbox figure { width: calc(100vw - 24px); height: calc(100vh - 90px); padding-top: 42px; }
  .lightbox-nav { position: fixed; z-index: 2; bottom: 15px; width: 44px; height: 44px; }
  .lightbox-nav.prev { left: 15px; }
  .lightbox-nav.next { right: 15px; }
  .lightbox-close { top: 10px; right: 12px; }
  .archive-lightbox figcaption { padding: 12px 55px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .meteor-card { animation-duration: 55s; }
  .meteor-field::before, .meteor-field::after { animation-duration: 22s; }
  .film-viewport { overflow-y: auto; }
}