body:is([data-view="archive"], [data-view="project"]) { background: var(--paper); color: var(--ink); }
body[data-view="project"] { overflow: hidden; }
.archive-view { padding: 158px 12px 36px; }
.archive-welcome { position: relative; height: clamp(260px, 25vw, 400px); margin: 32px -12px 100px; overflow: hidden; }
.archive-welcome-static { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25em; height: 100%; padding: 30px 24px; font: 400 clamp(30px, 5vw, 72px) / 1.15 Arial, sans-serif; letter-spacing: -.045em; text-align: center; }
.archive-welcome-static img { display: block; width: 1em; height: 1em; border-radius: .12em; object-fit: contain; }
.archive-welcome-stage { display: none; position: absolute; inset: 0; overflow: hidden; font: 400 clamp(50px, 7vw, 128px) / 1 Arial, sans-serif; letter-spacing: -.035em; user-select: none; }
.archive-welcome.is-animated .archive-welcome-static { display: none; }
.archive-welcome.is-animated .archive-welcome-stage { display: block; }
.archive-welcome-glyph { position: absolute; top: 0; left: 0; display: block; white-space: pre; transform-origin: center; will-change: transform; }
.archive-welcome-image { width: 1.08em; height: 1.08em; border-radius: .12em; object-fit: contain; }
.archive-welcome-toggle { display: none; position: absolute; right: 2vw; bottom: 12px; border: 0; padding: 8px; background: transparent; color: #666; font-size: 11px; }
.archive-welcome.is-animated .archive-welcome-toggle { display: block; }
.archive-welcome-toggle:hover { color: var(--ink); }
.archive-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; gap: 56px 12px; }
.archive-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 12px; align-self: stretch; min-width: 0; cursor: zoom-in; opacity: 1; transition: opacity .35s ease; animation: archive-enter .65s cubic-bezier(.2,.75,.2,1) backwards; animation-delay: calc(var(--tile-index) * 18ms); }
.archive-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 22px; margin: 0; color: var(--ink); font-size: clamp(11px, .95vw, 14px); line-height: 1.5; font-weight: 500; }
.archive-card-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.archive-card-title:empty::before { content: '\00a0'; }
.archive-card-number { flex-shrink: 0; color: #666; font-size: 12px; font-variant-numeric: tabular-nums; }
.archive-card img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; filter: none; transition: transform .65s cubic-bezier(.2,.75,.2,1); }
.archive-card .archive-card-image { display: block; align-self: start; padding: 0; overflow: hidden; background: #e0e0dd; }
.archive-card:hover span { color: inherit; }
.archive-card:is(:hover, .is-group-active) img { filter: none; }
.archive-grid.is-highlighting .archive-card:not(.is-group-active) { opacity: .18; }
.archive-card.is-group-active img { transform: scale(1.025); }
.archive-card.is-group-active .archive-card-number { color: var(--ink); }
.archive-footer { display: flex; justify-content: space-between; padding-top: 90px; margin-bottom: 20px; color: #92928f; font-size: 11px; }
.archive-footer a:hover { color: var(--ink); }
.project-overlay { --project-surface: rgb(235 235 235 / 80%); width: 100vw; max-width: none; height: 100svh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; box-shadow: none; opacity: 1; transform: none; }
.project-overlay[open] { opacity: 1; transform: none; }
.project-overlay::backdrop { background: transparent; backdrop-filter: blur(12px); opacity: 0; transition: opacity 1s ease, backdrop-filter 1s ease, display 1s allow-discrete, overlay 1s allow-discrete; }
.project-overlay[open]::backdrop { opacity: 1; }
@starting-style { .project-overlay[open]::backdrop { opacity: 0; } }
.project-overlay.is-paper-transition { overflow: visible; background: transparent; box-shadow: none; }
.project-overlay.is-paper-transition .project-overlay-shell { overflow: hidden; }
.project-overlay.is-paper-preparing .project-overlay-shell { opacity: 0; }
.project-overlay.is-paper-transition .project-gallery { pointer-events: none; }
.project-overlay.is-paper-transition .project-gallery figure { visibility: hidden; }
.project-overlay.is-paper-preparing::backdrop { opacity: 0; backdrop-filter: blur(0); }
.project-overlay.is-paper-closing::backdrop { opacity: 0; backdrop-filter: blur(0); transition-duration: 1s; }
.paper-source-hidden { visibility: hidden !important; }
.paper-transition-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5; overflow: hidden; pointer-events: none; perspective: 1600px; }
.paper-sheet { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: center; backface-visibility: hidden; background: var(--paper); will-change: transform, width, height; }
.paper-sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
.paper-mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .project-overlay::backdrop { transition: none; }
}
.project-overlay-shell { display: grid; grid-template-columns: minmax(260px, 29%) minmax(0, 1fr); height: 100%; background: var(--project-surface); }
.project-information { --project-inset: 24px; display: flex; flex-direction: column; padding: var(--project-inset); overflow-y: auto; }
.project-dismiss { flex: 1; min-height: 120px; margin: 24px calc(-1 * var(--project-inset)); padding: 0; border: 0; background: transparent; cursor: zoom-out; }
.project-dismiss:focus-visible { outline: 1px dashed #777; outline-offset: -8px; }
.project-information .project-title { margin: 0 0 30px; color: var(--ink); font-size: clamp(22px, 1.75vw, 32px); font-weight: 500; letter-spacing: -.025em; line-height: 1.5; overflow-wrap: anywhere; }
.project-description { margin: 0; color: #4d4d49; font-size: 14px; line-height: 1.9; }
.project-description p { margin: 0; }
.project-description .project-period { margin: -16px 0 32px; color: #777773; font-size: 14px; font-variant-numeric: tabular-nums; }
.project-description section + section { margin-top: 28px; }
.project-description h3 { margin: 0 0 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.project-information > div:first-child, .project-information-footer { flex-shrink: 0; }
.project-information-footer { display: flex; flex-direction: column; align-items: start; gap: 22px; }
.project-keywords { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.project-keywords[hidden] { display: none; }
.project-keywords li { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 19px; border: 1px solid #858581; border-radius: 999px; color: #4d4d49; font-size: 14px; line-height: 1.5; white-space: nowrap; }
.project-information-footer .next-project { margin: 0; padding: 0; color: var(--ink); border: 0; font-size: 16px; letter-spacing: 0; }
.project-information-footer .next-project:hover { color: #92928f; }
.project-work { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.project-gallery { position: relative; display: block; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 24px; scrollbar-width: thin; scrollbar-color: #b8b8b2 transparent; overscroll-behavior: contain; scroll-behavior: auto; }
.project-gallery:focus-visible { outline: none; }
.project-gallery figure { margin: 0 0 10px; width: 100%; }
.project-gallery figure:last-child { margin-bottom: 0; }
.project-gallery img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; background: #e0e0dd; }
@keyframes archive-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
  .archive-view { padding-top: 130px; }
  .archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 12px; }
  .archive-card-heading { font-size: 13px; }
  .project-overlay-shell { grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .archive-view { padding: 146px 12px 28px; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 12px; }
  .archive-welcome { margin: 32px -12px 72px; }
  .archive-welcome-toggle { right: 16px; }
  .archive-card-heading { font-size: 12px; }
  .archive-footer { padding-top: 60px; font-size: 10px; }
  .project-overlay-shell { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .project-information { overflow: visible; }
  .project-dismiss { flex: none; min-height: 64px; margin-top: 16px; margin-bottom: 16px; }
  .project-information .project-title { margin-bottom: 20px; font-size: 25px; }
  .project-description { font-size: 13px; }
  .project-description .project-period { margin-top: -8px; margin-bottom: 24px; }
  .project-information-footer { gap: 15px; }
  .project-gallery { overflow: visible; padding: 0 24px 24px; }
}