/* Section 03 — Visual Archive */
.visual-archive {
  --archive-fast: 180ms;
  --archive-base: 460ms;
  --archive-morph: 860ms;
  --archive-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  min-height: 100svh;
  overflow: clip;
  padding: clamp(7.5rem, 9vw, 9rem) 0 clamp(5rem, 8vw, 7.5rem);
  scroll-margin-top: 5rem;
  isolation: isolate;
}

.archive-ambient { position: absolute; z-index: -2; inset: -8%; overflow: hidden; opacity: .92; pointer-events: none; transform: scale(1); transition: opacity 520ms var(--archive-ease), transform 760ms var(--archive-ease); }
.archive-ambient span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.archive-ambient span:nth-child(1) { top: 4%; left: 14%; width: 36rem; height: 30rem; background: rgba(213, 248, 235, .54); }
.archive-ambient span:nth-child(2) { top: -5%; right: 8%; width: 46rem; height: 38rem; background: rgba(206, 232, 255, .68); }
.archive-ambient span:nth-child(3) { right: 20%; bottom: 0; width: 34rem; height: 28rem; background: rgba(255, 241, 204, .46); }
.archive-ambient span:nth-child(4) { bottom: -8%; left: 28%; width: 30rem; height: 26rem; background: rgba(235, 226, 255, .42); }

.archive__inner {
  display: grid;
  width: min(90rem, calc(100% - 2 * var(--page-gutter)));
  min-height: 46rem;
  margin-inline: auto;
  grid-template-columns: minmax(16rem, .55fr) minmax(44rem, 1.75fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.archive__intro { position: relative; z-index: 12; max-width: 19rem; transition: opacity 360ms var(--archive-ease), transform 560ms var(--archive-ease); }
.archive__title { display: grid; margin: 0; color: var(--color-text-display); font-family: var(--font-display); font-size: clamp(3.5rem, 5vw, 4.9rem); font-weight: var(--weight-bold); letter-spacing: -.04em; line-height: .96; }
.archive__title [lang="en"] { margin-top: .5rem; color: #52627b; font-size: .45em; font-weight: var(--weight-semibold); letter-spacing: .005em; }
.archive__statement { margin: 2rem 0 0; color: var(--color-text-primary); font-size: clamp(1.18rem, 1.45vw, 1.42rem); font-weight: var(--weight-semibold); letter-spacing: -.018em; line-height: 1.48; }
.archive__description { margin: 1.25rem 0 0; color: var(--color-text-secondary); font-size: .94rem; line-height: 1.78; }
.archive__meta { margin: 1.35rem 0 0; color: #8190a3; font-size: .62rem; font-weight: var(--weight-medium); letter-spacing: .2em; }

.archive-space { position: relative; min-width: 0; height: 46rem; perspective: 1500px; }
.archive-orbit-field { position: absolute; inset: 0; transform-style: preserve-3d; }
.archive-orbit-field::before,
.archive-orbit-field::after { position: absolute; top: 48%; left: 50%; width: 76%; height: 49%; border: 1px solid rgba(255, 255, 255, .46); border-radius: 48% 52% 46% 54%; box-shadow: 0 0 52px rgba(174, 215, 251, .17); content: ""; opacity: .7; transform: translate(-50%, -50%) rotate(-7deg); pointer-events: none; }
.archive-orbit-field::after { width: 92%; height: 65%; border-color: rgba(181, 214, 242, .18); opacity: .52; transform: translate(-50%, -50%) rotate(8deg); }

.archive-core {
  --glass-x: 50%;
  --glass-y: 50%;
  position: absolute;
  z-index: 15;
  top: 48%;
  left: 50%;
  display: grid;
  width: clamp(12.5rem, 16vw, 15rem);
  aspect-ratio: 1;
  padding: 1.4rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 46% 54% 49% 51% / 53% 47% 53% 47%;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, .66), transparent 36%),
    linear-gradient(145deg, rgba(237, 251, 255, .58), rgba(255, 255, 255, .3) 43%, rgba(223, 239, 255, .5) 72%, rgba(240, 231, 255, .42));
  box-shadow: 0 32px 78px rgba(76, 105, 135, .17), inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 -2px 12px rgba(120, 165, 207, .12), 0 0 0 10px rgba(255, 255, 255, .18);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: border-color var(--archive-base) var(--archive-ease), box-shadow var(--archive-base) var(--archive-ease), opacity var(--archive-base) var(--archive-ease), transform var(--archive-morph) var(--archive-ease);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
}
.archive-core::before { position: absolute; inset: 8%; border: 1px solid rgba(255, 255, 255, .66); border-radius: 53% 47% 49% 51%; box-shadow: inset 0 0 22px rgba(196, 228, 255, .18); content: ""; }
.archive-core__aura { position: absolute; inset: -34%; border-radius: 50%; background: conic-gradient(from 110deg, rgba(222, 248, 239, .5), rgba(212, 235, 255, .58), rgba(255, 240, 202, .44), rgba(235, 226, 255, .46), rgba(222, 248, 239, .5)); filter: blur(26px); opacity: .46; }
.archive-core__refraction { position: absolute; inset: 4%; border-radius: inherit; background: radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, .48), transparent 36%), linear-gradient(122deg, rgba(255, 255, 255, .42), transparent 38%, rgba(184, 220, 255, .19) 68%, rgba(255, 255, 255, .3)); mix-blend-mode: screen; }
.archive-core__content { position: relative; z-index: 2; display: grid; place-items: center; color: var(--color-text-primary); text-align: center; }
.archive-core__content small { font-size: .56rem; font-weight: var(--weight-semibold); letter-spacing: .12em; }
.archive-core__content strong { margin-top: .55rem; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.02; letter-spacing: -.02em; }
.archive-core__content > span { margin-top: .62rem; color: #66778c; font-size: .64rem; letter-spacing: .05em; }
.archive-core__content b { display: inline-flex; min-width: 6.8rem; min-height: 2.55rem; align-items: center; justify-content: center; gap: .55rem; margin-top: 1rem; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--radius-pill); background: var(--glass-fill-dark); box-shadow: var(--glass-shadow-primary); color: #fff; font-size: .74rem; font-weight: var(--weight-semibold); letter-spacing: .01em; transition: transform var(--motion-feedback) var(--ease-out); }
.archive-core__content b svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; transition: transform var(--motion-feedback) var(--ease-out); }
.archive-core:focus-visible { outline: 3px solid rgba(49, 92, 201, .5); outline-offset: 6px; }

.archive-material-list { position: absolute; inset: 0; transform-style: preserve-3d; }
.archive-material {
  --archive-shift-x: 0px;
  --archive-shift-y: 0px;
  position: absolute;
  z-index: 3;
  top: var(--orbit-y);
  left: var(--orbit-x);
  width: var(--orbit-w);
  aspect-ratio: var(--material-ratio);
  padding: 0;
  border: 0;
  border-radius: clamp(14px, 1.5vw, 22px);
  background: transparent;
  cursor: default;
  transform: translate3d(calc(-50% + var(--archive-shift-x)), calc(-50% + var(--archive-shift-y)), var(--archive-z, 0px)) rotate(var(--orbit-r));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: opacity var(--archive-base) var(--archive-ease), filter var(--archive-base) var(--archive-ease);
  -webkit-tap-highlight-color: transparent;
}
.archive-material--portrait { --material-ratio: .64; }
.archive-material--landscape { --material-ratio: 1.65; }
.archive-material--square { --material-ratio: 1; }
.archive-material[data-layer="foreground"] { opacity: 1; filter: none; }
.archive-material[data-layer="midground"] { opacity: .94; filter: saturate(.94); }
.archive-material[data-layer="background"] { opacity: .78; filter: blur(.55px) saturate(.88); }
.archive-material__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit; cursor: pointer; }
.archive-material__motion,
.archive-material__float { display: block; width: 100%; height: 100%; border-radius: inherit; }
.archive-material__float { animation: archive-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate; }
.archive-material__frame { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .82); border-radius: inherit; background: rgba(255, 255, 255, .34); box-shadow: 0 16px 34px rgba(57, 82, 108, .14), inset 0 1px 0 rgba(255, 255, 255, .92); transition: box-shadow var(--archive-base) var(--archive-ease), filter var(--archive-base) var(--archive-ease), transform var(--archive-base) var(--archive-ease); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.archive-media { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; background: #dce8ef; }
.archive-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: filter var(--archive-base) var(--archive-ease), transform 720ms var(--archive-ease); }
.archive-material__veil { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(150px circle at var(--glass-x, 50%) var(--glass-y, 50%), rgba(255, 255, 255, .4), transparent 66%), linear-gradient(180deg, rgba(8, 20, 34, .02) 35%, rgba(8, 20, 34, .68) 100%); opacity: .58; transition: opacity var(--archive-base) var(--archive-ease); }
.archive-material__overlay { position: absolute; z-index: 2; right: .72rem; bottom: .65rem; left: .72rem; display: grid; color: #fff; opacity: .74; text-align: left; text-shadow: 0 2px 10px rgba(8, 20, 34, .44); transform: translateY(5px); transition: opacity var(--archive-base) var(--archive-ease), transform var(--archive-base) var(--archive-ease); }
.archive-material__overlay small { font-size: .48rem; font-weight: var(--weight-semibold); letter-spacing: .13em; }
.archive-material__overlay strong { margin-top: .16rem; overflow: hidden; font-size: clamp(.68rem, 1vw, .88rem); font-weight: var(--weight-semibold); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.archive-material__overlay span { margin-top: .14rem; font-size: .47rem; letter-spacing: .08em; opacity: .82; }
.archive-material__focus-icon { position: absolute; z-index: 3; top: .55rem; right: .55rem; display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border: 1px solid rgba(255, 255, 255, .54); border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; font-size: .68rem; opacity: 0; transform: translateY(3px); transition: opacity var(--archive-fast) var(--archive-ease), transform var(--archive-fast) var(--archive-ease); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.archive-material__focus-icon svg { width: .85rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.archive-material__open:focus-visible { outline: 3px solid rgba(49, 92, 201, .56); outline-offset: 5px; }
.archive-favorite { position: absolute; z-index: 7; top: .58rem; left: .58rem; display: grid; width: 2rem; height: 2rem; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, .54); border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; cursor: pointer; opacity: 0; transform: translateY(4px) scale(.96); transition: background-color var(--archive-fast) var(--archive-ease), opacity var(--archive-fast) var(--archive-ease), transform var(--archive-fast) var(--archive-ease); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); }
.archive-favorite svg { width: 1rem; fill: transparent; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: fill var(--archive-fast) var(--archive-ease), transform var(--archive-fast) var(--archive-ease); }
.archive-favorite[aria-pressed="true"] { background: rgba(255, 255, 255, .84); color: #925b6e; opacity: 1; transform: translateY(0) scale(1); }
.archive-favorite[aria-pressed="true"] svg { fill: currentColor; transform: scale(.92); }
.archive-favorite:focus-visible { outline: 3px solid rgba(49, 92, 201, .58); outline-offset: 3px; opacity: 1; }
.visual-archive.is-morphing .archive-material__motion { will-change: transform, opacity; }
.visual-archive[data-archive-state="expanding"] .archive-ambient,
.visual-archive[data-archive-state="gallery"] .archive-ambient,
.visual-archive[data-archive-state="returning"] .archive-ambient { opacity: 1; transform: scale(1.055); }

.archive-gallery-tools { position: absolute; z-index: 20; top: 0; right: 0; left: 0; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 360ms var(--archive-ease), transform 520ms var(--archive-ease); }
.archive-gallery-tools__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.archive-gallery-tools__top > div { display: grid; }
.archive-gallery-tools__top strong { font-size: 1.2rem; }
.archive-gallery-tools__top span { color: var(--color-text-muted); font-size: .68rem; letter-spacing: .08em; }
.archive-return { display: inline-flex; min-height: 2.8rem; align-items: center; gap: .48rem; padding: .55rem 1rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .5); cursor: pointer; }
.archive-return svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.archive-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.archive-filters button { min-height: 2.3rem; padding: .42rem .9rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .36); color: #5a6879; cursor: pointer; font-size: .72rem; transition: background-color var(--archive-base) var(--archive-ease), color var(--archive-base) var(--archive-ease), transform var(--archive-fast) var(--archive-ease); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.archive-filters button.is-active { background: var(--glass-fill-dark); color: #fff; }
.archive-filters button:disabled,
.archive-return:disabled { cursor: default; }
.archive-filters button:focus-visible,
.archive-return:focus-visible { outline: 3px solid rgba(49, 92, 201, .48); outline-offset: 3px; }

.visual-archive.is-gallery-mode .archive__inner { grid-template-columns: 1fr; align-items: start; }
.visual-archive.is-gallery-mode .archive__intro { position: absolute; opacity: 0; pointer-events: none; transform: translateY(-12px); }
.visual-archive.is-gallery-mode .archive-space { height: 52rem; }
.visual-archive.is-gallery-mode .archive-core { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.86); }
.visual-archive.is-gallery-mode .archive-orbit-field::before,
.visual-archive.is-gallery-mode .archive-orbit-field::after { opacity: 0; }
.visual-archive[data-archive-state="gallery"] .archive-gallery-tools { opacity: 1; pointer-events: auto; transform: translateY(0); }
.visual-archive.is-gallery-mode .archive-material-list { top: 6.7rem; display: grid; height: 42rem; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: 8.2rem; gap: .8rem; transform-style: flat; }
.visual-archive.is-gallery-mode .archive-material { position: relative; top: auto; left: auto; width: auto; height: 100%; aspect-ratio: auto; opacity: 1; transform: none; }
.visual-archive.is-gallery-mode .archive-material__float { animation: none; }
.visual-archive.is-gallery-mode .archive-material__frame { border-radius: 20px; }
.visual-archive.is-gallery-mode .archive-material__overlay { opacity: 1; transform: translateY(0); }
.visual-archive[data-archive-state="gallery"] .archive-favorite { opacity: .86; transform: translateY(0) scale(1); }
.visual-archive.is-gallery-mode .archive-material[data-layer] { opacity: 1; filter: none; }
.visual-archive.is-morphing .archive-favorite { opacity: 0; pointer-events: none; transform: translateY(4px) scale(.96); transition: none; }
.visual-archive.is-gallery-mode .archive-material--g1 { grid-column: span 3; grid-row: span 2; }
.visual-archive.is-gallery-mode .archive-material--g2 { grid-column: span 4; grid-row: span 1; }
.visual-archive.is-gallery-mode .archive-material--g3 { grid-column: span 3; grid-row: span 2; }
.visual-archive.is-gallery-mode .archive-material--g4 { grid-column: span 2; grid-row: span 1; }
.visual-archive.is-gallery-mode .archive-material--g5 { grid-column: span 4; grid-row: span 1; }
.visual-archive.is-gallery-mode .archive-material--g6 { grid-column: span 3; grid-row: span 2; }
.visual-archive.is-gallery-mode .archive-material--g7 { grid-column: span 2; grid-row: span 2; }
.visual-archive.is-gallery-mode .archive-material--g8 { grid-column: span 3; grid-row: span 1; }
.visual-archive.is-gallery-mode .archive-material--g9 { grid-column: span 2; grid-row: span 1; }
.visual-archive.is-gallery-mode .archive-material--g10 { grid-column: span 3; grid-row: span 1; }
.visual-archive.is-gallery-mode .archive-material--g11 { grid-column: span 2; grid-row: span 2; }
.visual-archive.is-gallery-mode .archive-material--g12 { grid-column: span 2; grid-row: span 1; }
.archive-material.is-filtered-out { display: none !important; }

.visual-archive.is-motion-primed:not(.is-in-view) .archive__intro { opacity: 0; transform: translateY(22px); }
.visual-archive.is-motion-primed:not(.is-in-view) .archive-core { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
.visual-archive.is-motion-primed:not(.is-in-view) .archive-material { opacity: 0; filter: blur(7px); }
.visual-archive.is-in-view .archive-core { transition-delay: 120ms; }
.visual-archive.is-in-view .archive-material { transition-delay: calc(var(--archive-order, 0) * 24ms + 180ms); }

.archive-viewer { width: min(68rem, calc(100% - 2rem)); max-width: none; max-height: calc(100svh - 2rem); padding: 0; border: 0; background: transparent; overflow: visible; }
.archive-viewer::backdrop { background: rgba(23, 31, 43, .42); -webkit-backdrop-filter: blur(12px) saturate(85%); backdrop-filter: blur(12px) saturate(85%); }
.archive-viewer__shell { position: relative; display: grid; min-height: min(74vh, 40rem); padding: 1rem; grid-template-columns: minmax(0, 1.75fr) minmax(14rem, .65fr); overflow: hidden; border: 1px solid rgba(255, 255, 255, .48); border-radius: 32px; background: rgba(21, 31, 43, .78); box-shadow: 0 38px 100px rgba(14, 25, 38, .36), inset 0 1px 0 rgba(255, 255, 255, .2); color: #fff; -webkit-backdrop-filter: blur(28px) saturate(115%); backdrop-filter: blur(28px) saturate(115%); }
.archive-viewer__media { position: relative; min-height: 32rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .3); border-radius: 24px; touch-action: pan-y; transform-origin: center; }
.archive-viewer__picture { inset: 0; }
.archive-viewer__picture img { transform: scale(1.002); }
.archive-viewer__media::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 64%, rgba(8, 16, 28, .22)); content: ""; pointer-events: none; }
.archive-viewer__meta { display: flex; min-width: 0; padding: 2rem 1.7rem; flex-direction: column; justify-content: center; }
.archive-viewer__meta small { color: rgba(221, 235, 248, .72); font-size: .64rem; letter-spacing: .14em; }
.archive-viewer__meta h3 { margin: .65rem 0 0; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.03em; }
.archive-viewer__meta p { margin: 1rem 0 0; color: rgba(237, 244, 250, .76); font-size: .86rem; line-height: 1.68; }
.archive-viewer__demo { width: fit-content; margin-bottom: 1rem; padding: .35rem .6rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); color: rgba(238, 246, 255, .72); font-size: .56rem; font-weight: var(--weight-semibold); letter-spacing: .13em; }
.archive-viewer__meta dl { display: grid; gap: .7rem; margin: 1.35rem 0 0; }
.archive-viewer__meta dl div { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .65rem; padding-top: .68rem; border-top: 1px solid rgba(255, 255, 255, .11); }
.archive-viewer__meta dt { color: rgba(214, 231, 245, .54); font-size: .54rem; letter-spacing: .13em; }
.archive-viewer__meta dd { min-width: 0; margin: 0; color: rgba(255, 255, 255, .88); font-size: .72rem; line-height: 1.4; }
.archive-viewer__favorite { display: inline-flex; width: fit-content; min-height: 2.65rem; align-items: center; gap: .55rem; margin-top: 1.35rem; padding: .55rem .88rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.archive-viewer__favorite svg { width: 1rem; fill: transparent; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: fill var(--archive-fast) var(--archive-ease), transform var(--archive-fast) var(--archive-ease); }
.archive-viewer__favorite[aria-pressed="true"] { background: rgba(255, 255, 255, .9); color: #925b6e; }
.archive-viewer__favorite[aria-pressed="true"] svg { fill: currentColor; transform: scale(.92); }
.archive-viewer__close,
.archive-viewer__nav { position: absolute; z-index: 6; display: grid; width: 2.8rem; height: 2.8rem; padding: 0; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; }
.archive-viewer__close { top: 1.4rem; right: 1.4rem; }
.archive-viewer__nav { top: 50%; transform: translateY(-50%); }
.archive-viewer__nav--prev { left: 1.6rem; }
.archive-viewer__nav--next { right: calc(32% + 1.2rem); }
.archive-viewer__close svg,
.archive-viewer__nav svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.archive-viewer__close:focus-visible,
.archive-viewer__nav:focus-visible { outline: 3px solid rgba(205, 230, 255, .7); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .archive-core:hover { border-color: rgba(255, 255, 255, .98); box-shadow: 0 38px 86px rgba(76, 105, 135, .2), inset 0 2px 1px rgba(255, 255, 255, 1), inset 0 -2px 12px rgba(120, 165, 207, .14), 0 0 0 12px rgba(255, 255, 255, .2); transform: translate(-50%, -50%) scale(1.015); }
  .archive-core:hover .archive-core__content b svg { transform: translateX(3px); }
  .visual-archive:not(.is-morphing) .archive-material-list:has(.archive-material:hover) .archive-material:not(:hover) { filter: saturate(.78); opacity: .66; }
  .visual-archive:not(.is-morphing) .archive-material:hover { z-index: 22; }
  .visual-archive:not(.is-morphing) .archive-material:hover .archive-material__frame { box-shadow: 0 28px 58px rgba(50, 77, 106, .22), inset 0 1px 0 rgba(255, 255, 255, .98); filter: brightness(1.035) saturate(1.04); transform: translateY(-10px) scale(1.065); }
  .visual-archive:not(.is-morphing) .archive-material:hover .archive-media img { transform: scale(1.045); }
  .visual-archive:not(.is-morphing) .archive-material:hover .archive-material__veil { opacity: .48; }
  .visual-archive:not(.is-morphing) .archive-material:hover .archive-material__overlay,
  .visual-archive:not(.is-morphing) .archive-material:hover .archive-material__focus-icon,
  .visual-archive:not(.is-morphing) .archive-material:hover .archive-favorite { opacity: 1; transform: translateY(0) scale(1); }
  .archive-favorite:hover { background: rgba(255, 255, 255, .72); color: #925b6e; }
  .archive-viewer__favorite:hover { background: rgba(255, 255, 255, .22); }
  .archive-filters button:hover,
  .archive-return:hover { transform: translateY(-2px); }
}

.visual-archive[data-archive-state="focus"] .archive-material-list .archive-material:not(.is-material-focused) { filter: saturate(.76); opacity: .64; }
.archive-material.is-material-focused { z-index: 24; }
.archive-material.is-material-focused .archive-material__frame { box-shadow: 0 30px 64px rgba(50, 77, 106, .24), inset 0 1px 0 rgba(255, 255, 255, .98); filter: brightness(1.04) saturate(1.04); transform: translateY(-10px) scale(1.07); }
.archive-material.is-material-focused .archive-material__overlay,
.archive-material.is-material-focused .archive-material__focus-icon { opacity: 1; transform: translateY(0); }
.archive-material-list:has(.archive-material__open:focus-visible) .archive-material:not(:focus-within) { filter: saturate(.78); opacity: .68; }
.archive-material:focus-within { z-index: 23; }
.archive-material:focus-within .archive-material__frame { box-shadow: 0 26px 56px rgba(50, 77, 106, .21), inset 0 1px 0 rgba(255, 255, 255, .98); filter: brightness(1.03); transform: translateY(-8px) scale(1.055); }
.archive-material:focus-within .archive-material__overlay,
.archive-material:focus-within .archive-material__focus-icon { opacity: 1; transform: translateY(0); }

@keyframes archive-float {
  0% { transform: translate3d(0, 0, 0) rotate(0); }
  52% { transform: translate3d(var(--float-x), var(--float-y), 14px) rotate(var(--float-r)); }
  100% { transform: translate3d(var(--float-y), var(--float-x), 7px) rotate(0); }
}

.visual-archive:not(.is-archive-visible) .archive-material__float,
.is-page-hidden .archive-material__float,
.visual-archive:not([data-archive-state="orbit"]) .archive-material__float,
.visual-archive.is-orbit-cooling .archive-material__float { animation-play-state: paused; }

@media (max-width: 1100px) {
  .archive__inner { width: min(64rem, calc(100% - 2 * var(--page-gutter))); grid-template-columns: minmax(15rem, .55fr) minmax(35rem, 1.45fr); }
  .archive-space { height: 42rem; }
  .archive-core { width: 12.5rem; }
  .visual-archive.is-gallery-mode .archive-space { height: 50rem; }
  .visual-archive.is-gallery-mode .archive-material-list { grid-auto-rows: 7.7rem; }
}

@media (max-width: 820px) {
  .visual-archive { padding-top: 6.5rem; }
  .archive__inner { width: min(44rem, calc(100% - 2rem)); grid-template-columns: 1fr; align-items: start; gap: 2rem; }
  .archive__intro { max-width: 34rem; }
  .archive__title { font-size: clamp(3.2rem, 10vw, 4.25rem); }
  .archive-space { height: 39rem; }
  .visual-archive.is-gallery-mode .archive-space { height: 56rem; }
  .visual-archive.is-gallery-mode .archive-material-list { top: 7.4rem; height: 46rem; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 7.1rem; }
  .visual-archive.is-gallery-mode .archive-material { grid-column: span 2; }
  .visual-archive.is-gallery-mode .archive-material--g1,
  .visual-archive.is-gallery-mode .archive-material--g3,
  .visual-archive.is-gallery-mode .archive-material--g6 { grid-column: span 3; }
  .archive-viewer__shell { grid-template-columns: 1fr; }
  .archive-viewer__media { min-height: min(58vh, 32rem); }
  .archive-viewer__meta { padding: 1.25rem .75rem .75rem; }
  .archive-viewer__nav--next { right: 1.6rem; }
}

@media (max-width: 520px) {
  .visual-archive { padding: 6rem 0 4.5rem; }
  .archive__inner { width: calc(100% - 2rem); min-height: auto; }
  .archive__title { font-size: clamp(3rem, 15vw, 3.8rem); }
  .archive__title [lang="en"] { font-size: .46em; }
  .archive__statement { margin-top: 1.55rem; font-size: 1.18rem; }
  .archive__description { margin-top: 1rem; }
  .archive-space { height: 34rem; overflow: hidden; }
  .archive-core { width: 11.25rem; }
  .archive-core__content strong { font-size: 1.35rem; }
  .archive-core__content > span { font-size: .57rem; }
  .archive-material { width: min(var(--orbit-w), 25vw); }
  .archive-material--g9,
  .archive-material--g10,
  .archive-material--g11,
  .archive-material--g12 { display: none; }
  .visual-archive.is-gallery-mode .archive-space { height: 67rem; overflow: visible; }
  .visual-archive.is-gallery-mode .archive-material-list { top: 8.3rem; height: 57rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 7.2rem; gap: .65rem; }
  .visual-archive.is-gallery-mode .archive-material { display: block; grid-column: span 1; }
  .visual-archive[data-archive-state="gallery"] .archive-favorite { width: 2.35rem; height: 2.35rem; opacity: 1; }
  .visual-archive.is-gallery-mode .archive-material--portrait { grid-row: span 2; }
  .visual-archive.is-gallery-mode .archive-material--landscape { grid-column: span 2; grid-row: span 1; }
  .visual-archive.is-gallery-mode .archive-material--square { grid-row: span 1; }
  .archive-gallery-tools__top { align-items: flex-start; }
  .archive-gallery-tools__top > div { display: none; }
  .archive-return { margin-left: auto; }
  .archive-filters { gap: .4rem; }
  .archive-filters button { min-height: 2.75rem; padding-inline: .75rem; }
  .archive-viewer { width: calc(100% - 1rem); }
  .archive-viewer__shell { min-height: 76svh; padding: .65rem; border-radius: 25px; }
  .archive-viewer__media { min-height: 52svh; border-radius: 20px; }
  .archive-viewer__meta { padding: 1.05rem .65rem .65rem; }
  .archive-viewer__meta dl { margin-top: 1rem; }
  .archive-viewer__meta dl div { grid-template-columns: 4rem minmax(0, 1fr); }
  .archive-viewer__close { top: 1rem; right: 1rem; }
  .archive-viewer__nav--prev { left: 1rem; }
  .archive-viewer__nav--next { right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-material__float { animation: none !important; }
  .archive-core__aura { transform: none !important; }
  .archive-material,
  .archive-material__frame,
  .archive-media img,
  .archive-core,
  .archive-gallery-tools,
  .archive__intro { transition-duration: .01ms !important; }
}