/* Metro Builders — Projects page: the Living Archive (CSS 3D, real text, no WebGL) and the photographs.
   Adapted from the approved concise storyboard (docs/projects-archive-storyboard-v2). */
.pg-projects { --warm: #f1e3c4; --cool: #dfe7ee; --champ: #d9c9a6; --ti: #8b8170; }
.pg-projects .kicker { font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ti); }
.pg-projects .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pg-projects button { font: inherit; color: inherit; }
p { margin: 0; }
.la { position: relative; height: 280vh; background: #12110f; }
.la__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--warm);
  perspective: var(--P, 1000px); perspective-origin: 50% 50%; isolation: isolate; }
.atm { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.atm--warm { background: radial-gradient(60% 75% at 50% 46%, #3a2f22 0%, #211b14 52%, #110f0c 100%); }
.atm--cool { background: radial-gradient(70% 70% at 58% 56%, #1f2a33 0%, #141a20 50%, #0b0e11 100%); opacity: var(--cool, 0); }
.atm--night { background: radial-gradient(80% 80% at 50% 50%, #1b1a18 0%, #121110 55%, #0a0a09 100%); opacity: var(--night, 0); }
.atm--shaft { background: linear-gradient(90deg, transparent 30%, rgba(255, 228, 184, .05) 44%, rgba(255, 228, 184, .08) 50%, rgba(255, 228, 184, .05) 56%, transparent 70%); opacity: calc(1 - var(--cool, 0)); }
.thresh { position: absolute; left: 0; right: 0; height: 34vh; top: calc(100% - var(--th, 0) * 134%); z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(232, 240, 246, .16) 46%, rgba(255, 246, 228, .5) 50%, rgba(232, 240, 246, .16) 54%, rgba(255, 255, 255, 0));
  opacity: calc(var(--th, 0) * (1 - var(--th, 0)) * 4); mix-blend-mode: screen; }
.world { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.nm, .g { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; backface-visibility: hidden; pointer-events: none; }
.nm { white-space: nowrap; font-weight: 200; letter-spacing: -.02em; line-height: 1; opacity: 0; text-align: center; }
.nm .tx { display: block; }
.nm[data-c="lift"] { color: var(--warm); }
.nm[data-c="esc"] { color: var(--cool); }
.nm.hi { font-weight: 200; letter-spacing: -.04em; white-space: normal; width: max-content; max-width: min(1100px, 84vw); }
.nm.hi .tx { text-shadow: 0 0 calc(var(--lit, 0) * 46px) rgba(255, 214, 150, calc(var(--lit, 0) * .55)); }
.nm[data-c="esc"].hi .tx { text-shadow: 0 0 calc(var(--lit, 0) * 46px) rgba(190, 220, 245, calc(var(--lit, 0) * .55)); }
.nm .cap { display: block; margin-top: .9em; font-size: max(11px, .17em); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; opacity: calc(var(--lit, 0) * var(--txt, 1)); color: rgba(255, 255, 255, .62); }
.nm .tx { opacity: var(--txt, 1); }
.nm .dot { position: absolute; left: 50%; top: 50%; width: calc(var(--ds, 4px)); height: calc(var(--ds, 4px)); margin: calc(var(--ds, 4px) / -2); border-radius: 50%;
  background: currentColor; box-shadow: 0 0 calc(var(--ds, 4px) * 2.4) currentColor; opacity: var(--dot, 0); }
.g { background: linear-gradient(180deg, rgba(255, 228, 184, 0), rgba(255, 228, 184, .45) 6%, rgba(255, 228, 184, .45) 94%, rgba(255, 228, 184, 0)); }
.g--land { background: linear-gradient(90deg, rgba(255, 228, 184, 0), rgba(255, 228, 184, .32) 30%, rgba(255, 228, 184, .32) 70%, rgba(255, 228, 184, 0)); }
.g--rail { background: linear-gradient(90deg, rgba(200, 222, 240, 0), rgba(214, 232, 246, .75) 8%, rgba(214, 232, 246, .75) 92%, rgba(200, 222, 240, 0)); box-shadow: 0 0 18px rgba(190, 220, 245, .35); }
.g--glass { background: linear-gradient(180deg, rgba(190, 220, 245, .10), rgba(190, 220, 245, 0)); }
.la__open, .la__end { position: absolute; z-index: 4; pointer-events: none; }
.la__open { inset: 0; display: grid; place-content: center; text-align: center; padding: 0 16px; opacity: var(--intro, 1); transform: translateY(calc((1 - var(--intro, 1)) * -40px)); }
.la__open .kicker { color: var(--champ); }
.la__open h2 { color: #f4efe5; font-size: clamp(2.4rem, 6vw, 5.6rem); font-weight: 200; margin-top: 18px; }
.la__open p { color: rgba(244, 239, 229, .62); max-width: 46ch; margin: 20px auto 0; font-size: 1rem; }
.la__open .hint { margin-top: 44px; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 239, 229, .45); }
.la__end { left: max(16px, 5vw); bottom: max(28px, 7vh); max-width: 30rem; opacity: var(--end, 0); transform: translateY(calc((1 - var(--end, 0)) * 24px)); }
.la__end .kicker { color: var(--champ); }
.la__end h2 { color: #f4efe5; font-size: clamp(1.9rem, 3.6vw, 3.2rem); font-weight: 200; margin-top: 12px; }
.la__end p { color: rgba(244, 239, 229, .62); margin-top: 12px; font-size: .95rem; }
.la__map { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: var(--lab, 0);
  background: none; border: 0; padding: 6px 10px; cursor: pointer; color: #f6f0e4;
  font-size: .7rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 18px rgba(255, 220, 160, .55); transition: color .3s, text-shadow .3s; }
.cty--sg { font-size: .9rem; letter-spacing: .34em; }
.cty:hover, .cty:focus-visible { color: #fff; text-shadow: 0 0 22px rgba(255, 226, 170, .95); }
.la__map.live .cty { pointer-events: auto; }
.ind { position: absolute; z-index: 6; top: calc(var(--nav-h) + 14px); right: max(16px, 3vw); display: flex; align-items: center; gap: 12px;
  padding: 9px 14px 9px 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 10, 9, .35); backdrop-filter: blur(6px);
  font-size: .62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 239, 229, .8); opacity: calc(1 - var(--intro, 1)); }
.ind svg { width: 16px; height: 16px; transform: rotate(var(--hd, 90deg)); stroke: currentColor; fill: none; stroke-width: 1.4; }
.ind span { min-width: 15ch; }
.arc-btn { position: absolute; z-index: 6; left: max(16px, 3vw); top: calc(var(--nav-h) + 14px); pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 10, 9, .35); backdrop-filter: blur(6px);
  color: #f4efe5; font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; transition: border-color .3s, background .3s; }
.arc-btn:hover { border-color: rgba(255, 236, 200, .7); background: rgba(40, 34, 26, .55); }
.arc-btn i { width: 7px; height: 7px; border-radius: 50%; background: var(--champ); box-shadow: 0 0 10px var(--champ); }
.skip { position: absolute; z-index: 6; left: max(16px, 3vw); bottom: max(18px, 3vh); padding: 8px 12px; color: rgba(244, 239, 229, .62); text-decoration: none;
  font-size: .62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; border-bottom: 1px solid rgba(244, 239, 229, .25); transition: color .3s, border-color .3s; }
.skip:hover, .skip:focus-visible { color: #fff; border-color: #fff; }
.la__stage.pulled .world { filter: blur(3px) brightness(.55); transition: filter .6s; }
.arc { width: min(1120px, calc(100vw - 24px)); max-height: min(860px, calc(100svh - 24px)); padding: 0; border: 1px solid rgba(255, 238, 205, .2);
  background: radial-gradient(120% 90% at 50% 0%, #26211a 0%, #171513 60%, #121110 100%); color: #f1ece3; overflow: hidden; }
.arc[open] { display: flex; flex-direction: column; animation: arcIn .7s var(--ease); }
@keyframes arcIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.arc::backdrop { background: rgba(6, 6, 5, .55); }
.arc__head { position: relative; padding-right: clamp(70px, 8vw, 96px) !important; padding: clamp(20px, 3vw, 32px) clamp(18px, 3.4vw, 40px) 16px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: end; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.arc__head .kicker { color: var(--champ); }
.arc__head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 200; margin-top: 8px; }
.modes { display: flex; flex-wrap: wrap; gap: 6px; }
.modes button { cursor: pointer; padding: 8px 13px; border: 1px solid rgba(255, 255, 255, .18); background: none; color: rgba(241, 236, 227, .75);
  font-size: .64rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; transition: all .3s; }
.modes button[aria-pressed="true"] { color: #17150f; background: #efe2c6; border-color: #efe2c6; }
.arc__x { position: absolute; top: clamp(16px, 2.6vw, 28px); right: clamp(14px, 3vw, 36px); cursor: pointer; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .18); background: none; color: #f1ece3; font-size: 1.2rem; line-height: 1; }
.arc__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px clamp(18px, 3.4vw, 40px) 28px; overscroll-behavior: contain; }
.arc__note { font-size: .78rem; color: rgba(241, 236, 227, .55); margin: 14px 0 4px; }
.grp { padding: 22px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 28px; scroll-margin-top: 12px; }
.grp:last-child { border-bottom: 0; }
.grp h3 { font-size: .68rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--champ); padding-top: .55em; }
.grp.flash h3 { animation: flash 1.6s ease; }
@keyframes flash { 30% { color: #fff; text-shadow: 0 0 18px rgba(255, 226, 170, .9); } }
.grp ul { margin: 0; padding: 0; list-style: none; line-height: 1.55; }
.grp li { display: inline-block; white-space: nowrap; margin-bottom: .1em; font-size: clamp(1.02rem, 1.5vw, 1.3rem); font-weight: 200; transition: opacity .5s, color .5s; }
.grp li.hi { font-size: clamp(1.3rem, 2.1vw, 1.85rem); font-weight: 300; }
.grp li::after { content: ""; display: inline-block; width: 1px; height: .8em; margin: 0 .8em; vertical-align: -.05em; background: rgba(255, 255, 255, .22); }
.grp li:last-child::after { display: none; }
.grp li[data-c="esc"] { color: var(--cool); }
.grp li.is-dim { opacity: .38; }
.la.rm .la__stage .world { transition: opacity .45s ease; }
.la.rm .la__stage.swap .world { opacity: 0; }
@media (max-width: 760px) {

  .la { height: 220vh; }

  .ind span { min-width: 0; }

  .ind { top: auto; bottom: 64px; right: 16px; }

  .skip { bottom: 64px; left: 10px; }

  .arc-btn { left: 16px; top: calc(var(--nav-h) + 8px); }

  .la__end { bottom: auto; top: calc(var(--nav-h) + 64px); right: 16px; }

  .grp { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
 .arc[open] { animation: none; }
}

/* ---------- intro, photographs, closing ---------- */
.pj-intro { padding: calc(var(--nav-h) + clamp(56px, 9vw, 120px)) 0 clamp(48px, 7vw, 96px); }
.pj-intro h1 { font-size: clamp(2.6rem, 6.4vw, 6rem); margin-top: 14px; max-width: 13ch; }
.pj-intro p.lead { color: var(--muted); max-width: 52ch; margin-top: 22px; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.pj-photos { padding: clamp(72px, 10vw, 140px) 0; background: var(--paper); outline: none; }
.pj-photos__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.pj-photos__head h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); margin-top: 10px; max-width: 16ch; }
.pj-photos__head p { color: var(--muted); max-width: 40ch; }
.pj-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.pj-grid figure { margin: 0; overflow: hidden; background: #d9d2c5; }
.pj-grid img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.pj-grid figure:hover img { transform: scale(1.0); }
.pj-grid figure { height: var(--h); }
.pj-grid .r1 { --h: clamp(280px, 34vw, 560px); }
.pj-grid .r2 { --h: clamp(240px, 27vw, 440px); }
.pj-grid .r3 { --h: clamp(220px, 23vw, 380px); }
.pj-grid .s8 { grid-column: span 8; } .pj-grid .s5 { grid-column: span 5; } .pj-grid .s4 { grid-column: span 4; } .pj-grid .s3 { grid-column: span 3; }
.pj-close { background: #171615; color: var(--on-image); padding: clamp(88px, 12vw, 168px) 0; text-align: center; }
.pj-close h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); max-width: 16ch; margin: 14px auto 0; }
.pj-close p { color: rgba(244, 241, 235, .62); margin: 18px auto 0; max-width: 46ch; }
.pj-close a.btn { display: inline-block; margin-top: 36px; padding: 15px 28px; border: 1px solid rgba(244, 241, 235, .45); font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; transition: background .4s, color .4s; }
.pj-close a.btn:hover { background: var(--on-image); color: #171615; }
@media (max-width: 760px) {
  .pj-grid figure.r1, .pj-grid figure.r2, .pj-grid figure.r3 { grid-column: span 6; --h: 62vw; }
  .pj-grid figure.r1.s8 { grid-column: span 12; --h: 64vw; }
}
@media (prefers-reduced-motion: reduce) { .pj-grid img { transition: none; transform: none; } }
.skip-kb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-kb:focus { position: fixed; z-index: 120; left: 16px; top: calc(var(--nav-h) + 12px); width: auto; height: auto; clip: auto; padding: 10px 14px; background: #171615; color: #fff; font-size: .8rem; }