/* Native-scroll showcase. The base layout is a readable, linked no-JS gallery. */
.project-gallery { --gallery-ink:#f3f2ee; --gallery-muted:#b1b0aa; --gallery-paper:#08090a; --gallery-accent:#52726b; position:relative; isolation:isolate; margin:0; background:var(--gallery-paper); color:var(--gallery-ink); scroll-margin-top:calc(var(--header-h,88px) + 20px); }
.project-gallery__intro { max-width:850px; margin:0 auto; padding:clamp(3rem,6vw,6rem) 24px clamp(2rem,4vw,4rem); text-align:center; color:#f6f5f2; }
.project-gallery__eyebrow { display:flex; align-items:center; justify-content:center; gap:10px; color:#aaa9a3; font-size:.75rem; margin-bottom:20px; }
.project-gallery__eyebrow > span { width:6px; height:6px; border-radius:50%; background:#ff763f; }
.project-gallery__intro h2 { font-size:clamp(2rem,4.7vw,4.5rem); line-height:1.07; font-weight:500; letter-spacing:-.055em; text-wrap:balance; color:inherit; }
.project-gallery__text { max-width:48ch; margin:20px auto 0; font-size:.9375rem; line-height:1.75; color:#aaa9a3; }
.project-gallery__pin { position:relative; background:var(--gallery-paper); padding:24px clamp(20px,4vw,64px); }
.project-gallery__stage { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.project-gallery__plane { display:block; min-width:0; color:var(--gallery-ink); text-decoration:none; border-radius:18px; outline-offset:7px; }
.project-gallery__surface { margin:0; background:#121415; border:1px solid #ffffff20; border-radius:18px; box-shadow:0 12px 36px -24px #24272455; }
.project-gallery__image { position:relative; border-radius:17px 17px 0 0; overflow:clip; }
.project-gallery__image img { display:block; width:100%; height:auto; aspect-ratio:1.6; object-fit:cover; object-position:top; }
.project-gallery__surface figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:20px; }
.project-gallery__surface figcaption > span:first-child { font-size:1.2rem; font-weight:500; }
.project-gallery__surface figcaption > span:nth-child(2) { color:var(--gallery-muted); font-size:.8125rem; }
.project-gallery__surface figcaption p { flex-basis:100%; font-size:.8125rem; line-height:1.6; color:var(--gallery-muted); }
.project-gallery__topbar,.project-gallery__environment,.project-gallery__details,.project-gallery__scroll { display:none; }
.project-gallery__footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px clamp(22px,4vw,64px) 40px; color:#aaa9a3; font-size:.75rem; scroll-margin-top:calc(var(--header-h,88px) + 24px); }
.project-gallery__footer a { display:inline-flex; align-items:center; gap:20px; min-height:44px; color:#f6f5f2; }
.project-gallery a:focus-visible { outline:2px solid #ff986b; outline-offset:5px; }

/* Sticky belongs to the document. No fixed positioning, snapping or wheel interception. */
.project-gallery.is-helix-ready .project-gallery__track { height:var(--gallery-scroll-height); position:relative; }
.project-gallery.is-helix-ready .project-gallery__pin { position:sticky; top:var(--header-h,88px); height:calc(100svh - var(--header-h,88px)); min-height:520px; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; padding:18px clamp(22px,4vw,64px) 20px; overflow:clip; }
/* The environment travels upward at a different speed to the previews. */
.project-gallery.is-helix-ready .project-gallery__environment { display:block; position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:0; user-select:none; }
.project-gallery__light { position:absolute; inset:-40% -10%; background:radial-gradient(ellipse at 82% 75%,#ff763f10,transparent 42%),radial-gradient(ellipse at 14% 28%,#c4c6bd15,transparent 45%); transform:translate3d(0,var(--gallery-light-y,0px),0); will-change:transform; }
.project-gallery__depth { position:absolute; inset:0; transform:translate3d(0,var(--gallery-depth-y,0px),0); will-change:transform; }
.project-gallery__depth-mark { position:absolute; top:calc(var(--depth-index,0) * var(--gallery-depth-step,650px)); left:1.5vw; font-size:clamp(13rem,36vw,35rem); font-weight:400; line-height:.85; letter-spacing:-.09em; color:#fff; opacity:.075; }
.project-gallery__depth-mark:nth-child(even) { left:auto; right:3vw; }

.project-gallery__topbar { position:relative; z-index:3; display:none; align-items:center; justify-content:space-between; gap:16px; min-height:36px; font-size:.75rem; color:var(--gallery-muted); }
.is-helix-ready .project-gallery__topbar { display:flex; }
.project-gallery__topbar p { display:flex; align-items:center; gap:18px; }
.project-gallery__topbar [data-gallery-count] { font-variant-numeric:tabular-nums; color:var(--gallery-ink); }
.project-gallery__topbar a { display:inline-flex; align-items:center; gap:14px; min-height:36px; color:var(--gallery-muted); text-decoration:none; }
.project-gallery__topbar a:hover { color:#ffb28e; }
.project-gallery.is-helix-ready .project-gallery__stage { display:block; min-height:0; width:100%; height:100%; margin:0 auto; overflow:clip; perspective:1500px; z-index:1; perspective-origin:50% 50%; transform-style:preserve-3d; }
.project-gallery.is-helix-ready .project-gallery__plane { position:absolute; left:50%; top:50%; width:var(--gallery-card-width,65%); transform-origin:50% 50%; transform-style:preserve-3d; transform:translate(-50%,-50%) translate3d(var(--x,0px),var(--y,0px),var(--z,0px)) rotateY(var(--rotate-y,0deg)); opacity:var(--plane-opacity,0); transition:none !important; will-change:transform,opacity; pointer-events:none; }
.project-gallery.is-helix-ready .project-gallery__plane[data-gallery-active='true'] { pointer-events:auto; }
.project-gallery.is-helix-ready .project-gallery__plane::before { content:''; position:absolute; inset:4px 0 -4px; background:#343735; border-radius:18px; transform:translateZ(-7px); box-shadow:0 40px 70px -22px #000c; pointer-events:none; }
.project-gallery.is-helix-ready .project-gallery__surface { border:1px solid #ffffff50; border-radius:18px; box-shadow:0 1px 2px #ffffff30,0 24px 65px -25px #000d; transform-style:preserve-3d; }
.project-gallery.is-helix-ready .project-gallery__image { border-radius:17px; }
.project-gallery.is-helix-ready .project-gallery__image img { filter:brightness(var(--plane-shade,1)); }
.project-gallery.is-helix-ready .project-gallery__image::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px #151a1720; pointer-events:none; background:linear-gradient(100deg,#00000015,transparent 35%,#ffffff05 65%,#00000012); }
.project-gallery.is-helix-ready .project-gallery__surface figcaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.project-gallery__details { position:relative; z-index:3; display:none; grid-template-columns:minmax(140px,1fr) minmax(0,1.5fr) auto; align-items:center; gap:28px; border-top:1px solid #ffffff24; padding:18px 0 12px; background:transparent; }
.is-helix-ready .project-gallery__details { display:grid; }
.project-gallery__category { display:flex; align-items:center; gap:8px; color:var(--gallery-muted); font-size:.6875rem; margin-bottom:5px; }
.project-gallery__category::before { content:''; width:6px; height:6px; background:var(--gallery-accent); border-radius:50%; }
.project-gallery__identity h3 { font-size:clamp(1.2rem,2vw,1.7rem); font-weight:500; letter-spacing:-.04em; line-height:1.2; }
.project-gallery__details > p { max-width:56ch; font-size:.8125rem; line-height:1.65; color:var(--gallery-muted); }
.project-gallery__open { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 18px; border-radius:999px; min-height:46px; border:1px solid #ffffff55; color:var(--gallery-ink); text-decoration:none; font-size:.8125rem; white-space:nowrap; }
.project-gallery__open:hover { color:#08090a; background:#f3f2ee; border-color:#f3f2ee; }
.project-gallery__open > span { color:#ff986b; font-size:1.1rem; }
.project-gallery__open:hover > span { color:#a13b16; }
.project-gallery__scroll { position:relative; z-index:3; display:none; gap:14px; align-items:center; color:var(--gallery-muted); font-size:.625rem; padding-top:5px; }
.is-helix-ready .project-gallery__scroll { display:flex; }
.project-gallery__progress { flex:1; height:1px; background:#ffffff25; overflow:clip; }
.project-gallery__progress > span { display:block; width:100%; height:100%; background:#ff986b; transform-origin:left; transform:scaleX(var(--gallery-progress,0)); }
.project-gallery.is-helix-ready[data-gallery-mode='reduced'] .project-gallery__environment { display:none; }
.project-gallery.is-helix-ready[data-gallery-mode='reduced'] .project-gallery__plane { transform:translate(-50%,-50%) !important; }
@media (max-width:749px) {
  .project-gallery__stage { grid-template-columns:1fr; max-width:560px; margin:auto; }
  .project-gallery__intro { padding:48px 16px 32px; }
  .project-gallery__intro h2 { font-size:clamp(2rem,6vw,3rem); }
  .project-gallery__text { font-size:.8125rem; }
  .project-gallery__footer { align-items:flex-start; flex-direction:column; gap:0; }
  .project-gallery.is-helix-ready .project-gallery__pin { padding-inline:20px; }
  .project-gallery.is-helix-ready .project-gallery__stage { perspective:850px; max-width:none; }
  .project-gallery.is-helix-ready .project-gallery__details { grid-template-columns:1fr auto; column-gap:16px; row-gap:10px; padding-top:16px; }
  .project-gallery__details > p { grid-column:1/-1; grid-row:2; max-width:none; font-size:.75rem; line-height:1.6; min-height:3.2em; }
  .project-gallery__identity h3 { font-size:1.35rem; }
  .project-gallery__open { gap:12px; padding:10px 15px; }
  .project-gallery__topbar { font-size:.6875rem; }
  .project-gallery__depth-mark { font-size:65vw; opacity:.09; }
  .project-gallery__topbar p { gap:8px; }
  .project-gallery__topbar a { gap:7px; }
}
/* Phone GPUs should composite the preview once, not run a changing image
   filter and two large blurred shadow surfaces during every native swipe.
   The static edge gradient and shallow shadow retain the 3D depth cues. */
@media (hover:none), (max-width:749px) {
  .project-gallery.is-helix-ready .project-gallery__image img { filter:none; }
  .project-gallery.is-helix-ready .project-gallery__plane::before { display:none; }
  .project-gallery.is-helix-ready .project-gallery__surface { box-shadow:0 10px 22px -14px #000a; }
}
@media print {
  .project-gallery.is-helix-ready .project-gallery__track { height:auto !important; }
  .project-gallery.is-helix-ready .project-gallery__pin { position:static; height:auto; min-height:0; display:block; padding:20px; }
  .project-gallery.is-helix-ready .project-gallery__stage { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; height:auto; perspective:none; }
  .project-gallery.is-helix-ready .project-gallery__plane { position:static; width:auto; transform:none !important; opacity:1 !important; visibility:visible !important; }
  .project-gallery.is-helix-ready .project-gallery__surface figcaption { position:static; width:auto; height:auto; padding:15px; white-space:normal; clip-path:none; }
  .project-gallery { background:#fff; color:#242724; }
  .project-gallery__surface { background:#fff; color:#242724; }
  .project-gallery__topbar,.project-gallery__environment,.project-gallery__details,.project-gallery__scroll { display:none !important; }
}