/* Inter case previews. Load after style.css. */
.project-card {
  --card-line: #d9d9d3;
  --card-surface: #f0f0ed;
  display: block;
  container-type: inline-size;
  color: #151515;
  background: var(--card-surface);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  padding: 7px;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  transition: border-color .2s, background-color .2s, opacity .25s;
}

.project-label.project-card {
  width: 260px;
  padding: 7px;
  border: 1px solid var(--card-line);
  background: var(--card-surface);
  pointer-events: auto;
}

.project-card .card-topline,
.project-card .card-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-card .card-topline { min-height: 27px; padding: 2px 4px 8px; }
.project-card .card-title { font-size: 14px; font-weight: 500; letter-spacing: -.35px; }
.project-card .card-status { width: 5px; height: 5px; flex: 0 0 5px; border: 1px solid #797972; border-radius: 50%; }
.project-card .card-media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #d5d5ce; border-radius: 6px; background: #fff; }
.project-card .case-cover-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.project-card:hover .case-cover-image { transform: scale(1.025); }
.project-card .card-bottomline { min-height: 24px; padding: 8px 4px 1px; }
.project-card .card-number,
.project-card .card-note { font: 8px var(--mono, monospace); letter-spacing: -.15px; white-space: nowrap; }
.project-card .card-number { color: #575750; }
.project-card .card-note { color: #7a7a73; }
.project-card:hover,
.project-card:focus-visible { border-color: #92928a; background: #eaeae5; }
.project-card:hover .case-cover,
.project-card:focus-visible .case-cover { transform: scale(1.025); }
.project-card:focus-visible { outline: 1px solid #151515; outline-offset: 4px; }

/* Covers are provisional graphic studies, not client imagery. */
.project-card .case-cover { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fafaf7; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.2,.65,.3,1); }
.project-card .cover-kicker,
.project-card .cover-caption { position: absolute; z-index: 3; left: 7%; font: clamp(4px, 2cqw, 8px) var(--mono, monospace); letter-spacing: .04em; white-space: nowrap; }
.project-card .cover-kicker { top: 9%; }
.project-card .cover-caption { bottom: 9%; opacity: .6; }
.project-card .cover-number { position: absolute; z-index: 2; left: 6%; top: 24%; font-size: clamp(32px, 32cqw, 145px); font-weight: 500; line-height: .85; letter-spacing: -.085em; }
.project-card .cover-interface { position: absolute; }
.project-card .cover-interface i { display: block; position: absolute; font-style: normal; }

/* 01 — a typographic sheet and a small registration mark. */
.project-card .cover-01 { background: #eeeae1; }
.project-card .cover-01::after { content: ''; position: absolute; top: 0; right: 25%; width: 1px; height: 100%; background: #c7c4bc; }
.project-card .cover-01 .cover-number { top: 29%; left: 8%; }
.project-card .cover-01 .cover-interface { width: 23%; height: 45%; right: 8%; top: 30%; }
.project-card .cover-01 .cover-interface i:nth-child(1) { width: 100%; height: 13%; top: 0; background: #242421; }
.project-card .cover-01 .cover-interface i:nth-child(2) { width: 67%; height: 13%; top: 23%; background: #a4a298; }
.project-card .cover-01 .cover-interface i:nth-child(3) { width: 18%; aspect-ratio: 1; bottom: 0; right: 0; border: 1px solid #242421; border-radius: 50%; }

/* 02 — a wireframe window on a faint technical grid. */
.project-card .cover-02 { background-color: #f7f7f2; background-image: linear-gradient(#e7e7df 1px, transparent 1px), linear-gradient(90deg, #e7e7df 1px, transparent 1px); background-size: 8.5% 13.6%; }
.project-card .cover-02 .cover-number { font-size: clamp(22px, 14cqw, 62px); top: auto; bottom: 10%; left: auto; right: 8%; color: #8c8c81; }
.project-card .cover-02 .cover-interface { inset: 24% 13% 21%; border: 1px solid #96968d; border-radius: 2px; background: #fafaf6; }
.project-card .cover-02 .cover-interface::before { content: ''; position: absolute; inset: 0 0 auto; height: 17%; border-bottom: 1px solid #c7c7bd; background: #edede5; }
.project-card .cover-02 .cover-interface i:nth-child(1) { left: 7%; top: 31%; width: 23%; height: 51%; border: 1px solid #c1c1b6; }
.project-card .cover-02 .cover-interface i:nth-child(2) { left: 37%; top: 32%; width: 48%; height: 8%; background: #45453d; }
.project-card .cover-02 .cover-interface i:nth-child(3) { left: 37%; top: 53%; width: 36%; height: 24%; border-top: 1px solid #b8b8ad; border-bottom: 1px solid #b8b8ad; }

/* 03 — a restrained archive of three floating sheets. */
.project-card .cover-03 { background: #e3e4df; }
.project-card .cover-03 .cover-number { left: 7%; top: 30%; font-size: clamp(27px, 24cqw, 110px); color: #55574d; }
.project-card .cover-03 .cover-interface { top: 25%; right: 12%; width: 37%; height: 54%; }
.project-card .cover-03 .cover-interface i { width: 81%; height: 92%; border: 1px solid #92958a; background: #f1f2eb; }
.project-card .cover-03 .cover-interface i:nth-child(1) { left: 0; top: 0; transform: rotate(-12deg); }
.project-card .cover-03 .cover-interface i:nth-child(2) { left: 12%; top: 2%; transform: rotate(-3deg); }
.project-card .cover-03 .cover-interface i:nth-child(3) { left: 23%; top: 5%; transform: rotate(8deg); background: repeating-linear-gradient(0deg, #fafbf4 0 17%, #c6c9bd 17% 18%, #fafbf4 18% 28%); }

/* 04 — a dark editorial layout with a pale interface panel. */
.project-card .cover-04 { color: #eaeae3; background: #252622; }
.project-card .cover-04 .cover-number { top: 31%; left: 7%; font-size: clamp(29px, 27cqw, 120px); }
.project-card .cover-04 .cover-interface { top: 26%; right: 8%; width: 40%; height: 48%; border: 1px solid #7b7d71; background: #363831; }
.project-card .cover-04 .cover-interface::before { content: ''; position: absolute; top: 13%; left: 12%; width: 30%; height: 6%; background: #eaeae1; }
.project-card .cover-04 .cover-interface i:nth-child(1) { top: 32%; left: 12%; width: 76%; height: 31%; background: #c6c9bb; }
.project-card .cover-04 .cover-interface i:nth-child(2) { bottom: 17%; left: 12%; width: 46%; height: 1px; background: #929587; }
.project-card .cover-04 .cover-interface i:nth-child(3) { bottom: 11%; left: 12%; width: 31%; height: 1px; background: #929587; }

/* 05 — concentric forms and an index strip. */
.project-card .cover-05 { background: #ecebe7; }
.project-card .cover-05 .cover-number { top: auto; bottom: 23%; left: 7%; font-size: clamp(25px, 19cqw, 88px); }
.project-card .cover-05 .cover-interface { width: 47%; aspect-ratio: 1; top: 13%; right: 8%; }
.project-card .cover-05 .cover-interface i { border: 1px solid #71736b; border-radius: 50%; }
.project-card .cover-05 .cover-interface i:nth-child(1) { inset: 0; }
.project-card .cover-05 .cover-interface i:nth-child(2) { inset: 19%; }
.project-card .cover-05 .cover-interface i:nth-child(3) { inset: 39%; background: #4c4e46; }
.project-card .cover-05::after { content: ''; position: absolute; left: 0; right: 0; bottom: 17%; height: 1px; background: #b9bab2; }

/* 06 — a modular sheet of unequal columns. */
.project-card .cover-06 { background: #f5f1e8; }
.project-card .cover-06 .cover-number { top: 27%; left: 8%; font-size: clamp(29px, 28cqw, 126px); }
.project-card .cover-06 .cover-interface { inset: 24% 8% 23% 48%; display: flex; align-items: stretch; gap: 7%; }
.project-card .cover-06 .cover-interface i { position: relative; flex: 1; border: 1px solid #b1aa9c; background: #e1dbce; }
.project-card .cover-06 .cover-interface i:nth-child(1) { margin-top: 36%; background: #44433b; border-color: #44433b; }
.project-card .cover-06 .cover-interface i:nth-child(2) { margin-bottom: 21%; }
.project-card .cover-06 .cover-interface i:nth-child(3) { margin-top: 18%; margin-bottom: 10%; background: #faf8f2; }

/* Distant scene cards keep the same silhouette with less metadata. */
.project-label.project-card:not(.is-active) { width: 128px; padding: 5px; border-color: #dfdfd9; }
.project-label.project-card:not(.is-active) .card-topline { min-height: 16px; padding: 1px 2px 4px; }
.project-label.project-card:not(.is-active) .card-title { font-size: 9px; letter-spacing: -.15px; }
.project-label.project-card:not(.is-active) .card-status { width: 4px; height: 4px; flex-basis: 4px; }
.project-label.project-card:not(.is-active) .card-bottomline { min-height: 12px; padding: 3px 2px 0; }
.project-label.project-card:not(.is-active) .card-number { font-size: 6px; }
.project-label.project-card:not(.is-active) .card-note { display: none; }

/* Full catalogue uses ordinary flow, independent of scene transforms. */
.project-index:has(.case-grid) { z-index: 40; padding: 110px 32px 40px; background: #fff; }
.catalog-header { position: fixed; inset: 0 0 auto; z-index: 1; display: flex; align-items: flex-start; padding: 25px 32px; background: #fff; pointer-events: none; }
.index-is-open .site-header { background: #fff; }
.index-is-open .site-header .index-toggle,
.index-is-open .scene-footer { visibility: hidden; }
.index-close { position: fixed; top: 25px; right: 32px; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 0; background: #fff; border: 0; font-size: 12px; }
.index-close span:last-child { font-size: 21px; line-height: .9; }
.project-index:has(.case-grid) .index-heading,
.project-index:has(.case-grid) .index-note { max-width: 1440px; margin-left: auto; margin-right: auto; }
.project-index ol.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1440px; margin: 0 auto; padding: 0; list-style: none; }
.project-index .case-grid > li,
.project-index .case-grid > li:last-child { min-width: 0; padding: 0; border: 0; }
.case-grid .catalog-card.project-card { position: relative; width: 100%; height: 100%; padding: 9px; }
.case-grid .project-card .card-topline { min-height: 31px; padding: 3px 5px 10px; }
.case-grid .project-card .card-title { font-size: 15px; }
.case-grid .project-card .card-bottomline { min-height: 29px; padding: 10px 5px 3px; }
.case-grid .project-card .card-number,
.case-grid .project-card .card-note { font-size: 9px; }

@media (max-width: 1050px) {
  .project-index ol.case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 700px) {
  .catalog-header { padding: 23px 20px; }
  .index-close { top: 23px; right: 20px; font-size: 10px; gap: 11px; }
  .project-label.project-card { width: 170px; padding: 5px; border-radius: 8px; }
  .project-label.project-card .card-topline { min-height: 22px; padding: 1px 3px 6px; }
  .project-label.project-card .card-title { font-size: 11px; letter-spacing: -.2px; }
  .project-label.project-card .card-status { width: 4px; height: 4px; flex-basis: 4px; }
  .project-label.project-card .card-media { border-radius: 4px; }
  .project-label.project-card .card-bottomline { min-height: 18px; padding: 6px 3px 1px; gap: 4px; }
  .project-label.project-card .card-number,
  .project-label.project-card .card-note { font-size: 6px; letter-spacing: -.1px; }
  .project-label.project-card:not(.is-active) { display: none; }
  .project-index:has(.case-grid) { padding: 105px 20px 35px; }
  .project-index ol.case-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .case-grid .catalog-card.project-card { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-card .case-cover { transition: none; }
  .project-card:hover .case-cover,
  .project-card:focus-visible .case-cover { transform: none; }
}

.project-card .card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }