/* Work corridor: two live Black Track sites + six concept mini-sites.
   Default: a simple grid (no JS / reduced motion).
   .is-3d (set by js/motion.js): sticky 3D corridor driven by native scroll. Adapted from the studio's
   earlier corridor; panels are CSS mini-sites, not screenshots, so they stay sharp at any size. */

.gallery { --n: 8; position: relative; padding-block: var(--space-section); border-top: 1px solid var(--line); }
.gallery__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.5rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.gallery__meta .muted { font-size: 1rem; max-width: 32rem; }
.gallery__count { margin-top: 1.25rem; color: var(--ivory); }
.gallery__count span { color: var(--lime); }
.gallery__bar { margin-top: .75rem; height: 2px; background: var(--line); max-width: 32rem; overflow: hidden; }
.gallery__bar span { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(var(--gp, 0)); }
.gallery__index { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; max-width: 34rem; }
.gallery__index a {
  position: relative; z-index: 3; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 3px;
  color: var(--muted); font: 500 .75rem/1 var(--font-mono); letter-spacing: .03em; text-decoration: none;
  transition: border-color var(--fast), color var(--fast), background-color var(--fast);
}
.gallery__index a span { margin-right: .45rem; color: var(--lime); }
.gallery__index a:hover, .gallery__index a.is-current { border-color: var(--lime); color: var(--ivory); }
.gallery__index a.is-current { background: rgb(201 247 85 / .08); }

.gallery__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 2.5rem 1.5rem; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.gpanel { position: relative; display: grid; gap: 1rem; }
.gwin { container-type: inline-size; border: 1px solid #343731; border-radius: 10px; overflow: hidden; background: var(--raised); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8); }
.gwin__bar { display: flex; align-items: center; gap: 6px; padding: .55rem .8rem; border-bottom: 1px solid #2c2f2b; background: #151714; }
.gwin__bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3d38; }
.gwin__bar i:first-child { background: var(--red); }
.gwin__bar span { margin-inline: auto; padding: .2rem .8rem; border-radius: 3px; background: #1f221e; color: var(--muted); font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .04em; }
.gpanel__cap { display: grid; gap: .4rem; }
.gpanel__cap .tag { justify-self: start; }
.gpanel__cap h3 { font-size: 1.375rem; margin-top: .35rem; }
.gpanel__cap p { color: var(--muted); font-size: .9375rem; max-width: 34rem; }
.gpanel__link { justify-self: start; margin-top: .25rem; color: var(--lime); font-weight: 600; text-decoration: none; }
.gpanel__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gpanel__link span { display: inline-block; transition: transform var(--fast) var(--ease); }
.gpanel:hover .gpanel__link span, .gpanel__link:focus-visible span { transform: translateX(4px); }
.gpanel:hover .gwin { border-color: var(--line-strong); }
.gpanel:has(.gpanel__link:focus-visible) .gwin { outline: 3px solid var(--lime); outline-offset: 4px; }
.gpanel__link:focus-visible { outline: none; }

/* Mini-site scaffolding, in container units so each site scales with its window */
.gsite { aspect-ratio: 16 / 10; display: flex; flex-direction: column; font-size: 2.2cqi; overflow: hidden; position: relative; }
.gsite__nav { display: flex; align-items: center; gap: 3.2cqi; padding: 2.6cqi 4cqi; font-size: 1.9cqi; }
.gsite__nav b { margin-right: auto; font: 700 2.4cqi/1 var(--font-display); letter-spacing: .02em; }
.gsite__nav span { opacity: .8; }
.gsite__nav em, .gsite__hero em { font-style: normal; font-weight: 600; padding: 1.2cqi 2.2cqi; border-radius: .8cqi; }
.gsite__hero { display: flex; flex-direction: column; align-items: flex-start; gap: 2cqi; padding: 2cqi 4cqi; }
.gsite__hero small { font: 500 1.6cqi/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.gsite__hero strong { font: 700 6.2cqi/1 var(--font-display); letter-spacing: -.03em; max-width: 13ch; }
.gsite__hero em { font-size: 1.9cqi; }

/* Live 01: Black Track Group (serif on black, red runway) */
.gsite--group { color: #ece7dd; background: #070707; }
.gsite--group .gsite__nav b { font: 400 2.6cqi/1 Georgia, serif; letter-spacing: 0; }
.gsite--group .gsite__nav span { font-size: 1.5cqi; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.gsite--group .gsite__nav em { font-style: normal; padding: 1cqi 2cqi; border-radius: 999px; background: #ece7dd; color: #111; font-weight: 600; }
.gsite__ghero { display: grid; gap: 2.4cqi; padding: 5cqi 5cqi 0; position: relative; z-index: 1; }
.gsite__ghero small { font: 500 1.4cqi/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.gsite__ghero strong { font: 400 7.2cqi/1 Georgia, "Times New Roman", serif; max-width: 10ch; }
.gsite__runway { position: absolute; left: 50%; bottom: -10%; width: 55cqi; height: 46cqi; transform: translateX(-30%) perspective(40cqi) rotateX(58deg); background: repeating-linear-gradient(0deg, transparent 0 4cqi, rgb(0 0 0 / .35) 4cqi 4.6cqi), linear-gradient(90deg, transparent 49%, #ff4d4d 49% 51%, transparent 51%), linear-gradient(180deg, #5c1010, #b3201c); }

/* Live 02: Black Track Studio (call sheet) */
.gsite--studio { color: #f3efe6; background: linear-gradient(90deg, rgb(12 12 11 / .95) 45%, rgb(12 12 11 / .55)), repeating-linear-gradient(90deg, #1d1d1b 0 6cqi, #242421 6cqi 12cqi); }
.gsite--studio .gsite__nav b { font: 700 2.3cqi/1 var(--font-body); }
.gsite--studio .gsite__nav em { font-style: normal; padding: 1.2cqi 2cqi; background: #e5372d; color: #fff; font-weight: 600; border-radius: .4cqi; }
.gsite__shero { flex: 1; display: grid; align-content: center; gap: 2.4cqi; padding: 0 5cqi; }
.gsite__shero small { justify-self: start; padding: 1cqi 1.6cqi; border: 1px solid rgb(243 239 230 / .5); font: 500 1.4cqi/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.gsite__shero strong { font: 600 7.6cqi/.95 var(--font-body); letter-spacing: -.04em; max-width: 9ch; }
.gsite__sheet { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(243 239 230 / .2); }
.gsite__sheet span { padding: 2cqi 3cqi; font: 500 1.4cqi/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; border-right: 1px solid rgb(243 239 230 / .12); }

/* 03 Industrial */
.gsite--industrial { color: #f1f2ee; background: linear-gradient(90deg, rgb(10 11 9 / .92) 30%, rgb(10 11 9 / .2)), url("../images/demos/industrial/hero-sm.jpg") center / cover; }
.gsite--industrial .gsite__nav em, .gsite--industrial .gsite__hero em { background: var(--lime); color: var(--graphite); }
.gsite--industrial .gsite__hero { flex: 1; justify-content: center; }
.gsite__row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(255 255 255 / .14); background: rgb(10 11 9 / .7); }
.gsite__row span { padding: 2.2cqi 4cqi; font-size: 1.7cqi; border-right: 1px solid rgb(255 255 255 / .1); }

/* 04 Hospitality */
.gsite--hospitality { color: #fff8ee; background: linear-gradient(180deg, rgb(20 12 20 / .55), transparent 35%, rgb(20 12 20 / .55)), url("../images/demos/hospitality/hero-sm.jpg") center / cover; font-family: Georgia, "Times New Roman", serif; }
.gsite--hospitality .gsite__nav b { font: italic 400 2.8cqi/1 Georgia, serif; letter-spacing: 0; }
.gsite--hospitality .gsite__nav em { border: 1px solid rgb(255 248 238 / .6); }
.gsite--hospitality .gsite__hero { flex: 1; justify-content: flex-end; padding-bottom: 5cqi; }
.gsite--hospitality .gsite__hero strong { font: 400 7cqi/1 Georgia, serif; letter-spacing: -.01em; }
.gsite--hospitality .gsite__hero small { font-family: var(--font-body); }
.gsite--hospitality .gsite__hero em { background: #fff8ee; color: #3b2230; font-family: var(--font-body); }

/* 05 Real estate */
.gsite--realestate { color: #1d2026; background: #efece5; }
.gsite--realestate .gsite__nav { border-bottom: 1px solid #d6d1c5; }
.gsite--realestate .gsite__nav em, .gsite--realestate .gsite__hero em { background: #1d2026; color: #efece5; }
.gsite__split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.gsite__split .gsite__hero { justify-content: center; }
.gsite__img { background: url("../images/demos/realestate/hero-sm.jpg") 30% center / cover; }
.gsite__chips { display: flex; flex-wrap: wrap; gap: 1cqi; }
.gsite__chips span { padding: .8cqi 1.6cqi; border: 1px solid #b9b3a5; border-radius: .6cqi; font-size: 1.6cqi; }

/* 06 Restaurant */
.gsite--restaurant { color: #f6efe4; background: linear-gradient(180deg, rgb(25 18 14 / .8), rgb(25 18 14 / .45) 45%, rgb(25 18 14 / .8)), url("../images/demos/restaurant/hero-sm.jpg") center / cover; }
.gsite--restaurant .gsite__nav b { margin-inline: auto; font: italic 400 2.8cqi/1 Georgia, serif; }
.gsite--restaurant .gsite__nav em { background: #e9a356; color: #231c17; border-radius: 999px; }
.gsite__rhero { flex: 1; display: grid; grid-template-rows: auto 1fr auto; padding: 1cqi 4cqi 3.5cqi; }
.gsite__rhero strong { font: 400 11cqi/.85 Georgia, "Times New Roman", serif; letter-spacing: -.03em; text-transform: uppercase; }
.gsite__rhero small { align-self: center; justify-self: center; font: 500 1.4cqi/1.5 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.gsite__rhero .gsite__rhero-end { justify-self: end; font-style: italic; text-transform: none; color: #f0b06a; }

/* 07 Healthcare */
.gsite--clinic { color: #17312e; padding-top: 2.4cqi; background: radial-gradient(ellipse 80% 70% at 50% 0%, #f6d27d, rgb(246 210 125 / .35) 45%, transparent 75%), #fdf8ee; }
.gsite__pill { display: flex; align-items: center; gap: 2.4cqi; margin-inline: 7cqi; padding: .9cqi .9cqi .9cqi 2.4cqi; background: rgb(255 255 255 / .85); border: 1px solid #e6dcc6; border-radius: 999px; font-size: 1.5cqi; }
.gsite__pill b { margin-right: auto; font: 400 2.1cqi/1 Georgia, serif; }
.gsite__pill b i, .gsite__chero strong i { color: #1d6a63; }
.gsite__pill em, .gsite__chero em { font-style: normal; font-weight: 600; background: #1d6a63; color: #fff; border-radius: 999px; }
.gsite__pill em { padding: .9cqi 1.8cqi; }
.gsite__chero { display: grid; justify-items: center; gap: 2.2cqi; padding: 4cqi 6cqi 3cqi; text-align: center; }
.gsite__chero strong { max-width: 18ch; font: 400 5.6cqi/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.gsite__chero em { padding: 1.2cqi 2.4cqi; font-size: 1.7cqi; }
.gsite__cphoto { flex: 1; margin-inline: 5cqi; border-radius: 2.6cqi 2.6cqi 0 0; background: url("../images/demos/clinic/hero-sm.jpg") center 30% / cover; }

/* 08 Education */
.gsite--education { color: #fff; background: linear-gradient(180deg, rgb(16 17 15 / .55), rgb(16 17 15 / .3) 40%, rgb(16 17 15 / .85)), url("../images/demos/education/hero-sm.jpg") center / cover; }
.gsite--education .gsite__nav b { font: 400 2.6cqi/1 Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .02em; }
.gsite--education .gsite__nav em, .gsite__ehero em { font-style: normal; font-weight: 600; background: var(--lime); color: var(--graphite); border-radius: 0; }
.gsite__ehero { margin-top: auto; display: grid; justify-items: start; gap: 2.4cqi; padding: 0 4cqi 4cqi; }
.gsite__ehero strong { font: 400 10cqi/.86 Impact, "Arial Narrow Bold", "Arial Narrow", sans-serif; text-transform: uppercase; }
.gsite__ehero strong i { font-style: normal; color: var(--lime); }
.gsite__ehero em { padding: 1.1cqi 2cqi; font-size: 1.6cqi; }
.gsite__sticker { position: absolute; right: 5cqi; top: 11cqi; display: grid; place-items: center; width: 11cqi; aspect-ratio: 1; border-radius: 50%; background: var(--lime); color: var(--graphite); font: 400 3.4cqi/1 Impact, sans-serif; transform: rotate(-12deg); }

/* ---------- 3D corridor ---------- */
.gallery.is-3d { height: calc((var(--n) * 70vh + 100vh) / var(--page-zoom, 1)); padding: 0; }
.gallery.is-3d .gallery__sticky {
  position: sticky; top: 0; height: calc(100vh / var(--page-zoom, 1)); height: calc(100svh / var(--page-zoom, 1)); overflow: hidden; display: flex; flex-direction: column;
  padding-top: clamp(4.5rem, 3rem + 4vh / var(--page-zoom, 1), 6.5rem);
  padding-bottom: 4.75rem;
}
.gallery.is-3d .gallery__head { margin-bottom: 1.25rem; position: relative; z-index: 2; }
.gallery.is-3d .gallery__head .h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.9rem); }
.gallery.is-3d .gallery__stage { overflow-anchor: none; position: relative; flex: 1; min-height: 0; overflow: hidden; perspective: 1100px; perspective-origin: 50% 45%; }
/* Each panel carries its own perspective() (motion.js) and an explicit z-index by depth; a shared
   preserve-3d scene let far panels bleed through near ones and steal clicks. */
.gallery.is-3d .gallery__track { position: absolute; inset: 0; display: block; padding: 0; max-width: none; pointer-events: none; }
.gallery.is-3d .gpanel { position: absolute; left: 50%; top: 50%; width: var(--pw, min(620px, 74vw)); will-change: transform, opacity; pointer-events: auto; }
.gallery.is-3d .gpanel__cap { transition: opacity 300ms var(--ease); opacity: 0; }
.gallery.is-3d .gpanel.is-active .gpanel__cap { opacity: 1; }
.gallery.is-3d .gpanel.is-active .gwin { box-shadow: 0 50px 100px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(201 247 85 / .35); }
.gallery.is-3d .gallery__stage::before {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 90px 90px; background-position: 0 var(--floor, 0px);
  transform: rotateX(78deg); transform-origin: bottom; opacity: .55;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
/* The intro paragraph still exists for screen readers; in the sticky 3D stage it would steal panel height */
@media (max-height: 1000px) {
  .gallery.is-3d .gallery__meta .muted { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gallery.is-3d .gallery__count { margin-top: 0; }
  .gallery.is-3d .gallery__head { margin-bottom: .75rem; }
}
@media (max-height: 720px) {
  .gallery.is-3d .gpanel__cap p { display: none; }
  .gallery.is-3d .gallery__sticky { padding-bottom: 4.25rem; }
}
@media (max-width: 880px) {
  .gallery__head { grid-template-columns: 1fr; }
  .gallery.is-3d .gallery__head .muted { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gallery.is-3d .gallery__index { display: none; }
}