:root{
  --bg:#05070c;
  --fg:#dfe6f2;
  --mut:#8a96ab;
  --acc:#9ec0ff;
  --line:rgba(158,192,255,.14);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --glow:158,192,255;
  --slide-w:min(72vw,720px);
  --slide-h:min(62vh,560px);
}
*{box-sizing:border-box}
html{background-color:var(--bg)}
html,body{
  margin:0;padding:0;min-height:100%;
  background-color:var(--bg);
  color:var(--fg);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  position:relative;
}
/* Fixed atmospheric field — GK blue-silver (live-site palette), understated */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 48% 36% at 22% 68%, rgba(150,175,210,.11) 0%, transparent 68%),
    radial-gradient(ellipse 42% 30% at 78% 32%, rgba(140,165,205,.10) 0%, transparent 66%),
    radial-gradient(ellipse 70% 48% at 50% 42%, rgba(158,192,255,.13) 0%, rgba(19,32,58,.28) 46%, transparent 72%),
    radial-gradient(ellipse at 70% -10%, #13203a 0%, #0a1220 42%, var(--bg) 68%);
}
/* Slow drifting blue-silver light + faint silvery sheen behind/around media */
body::after{
  content:"";
  position:fixed;inset:-22%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 28% at 36% 48%, rgba(170,200,235,.14) 0%, transparent 62%),
    radial-gradient(ellipse 34% 24% at 64% 40%, rgba(160,185,225,.11) 0%, transparent 64%),
    radial-gradient(ellipse 26% 18% at 52% 58%, rgba(201,214,234,.08) 0%, transparent 70%),
    linear-gradient(118deg, transparent 0%, rgba(220,230,245,.04) 44%, rgba(201,214,234,.055) 50%, transparent 58%);
  animation:driftGlow 38s ease-in-out infinite alternate;
  will-change:transform,opacity;
  mix-blend-mode:screen;
  opacity:.9;
}
@keyframes driftGlow{
  0%{transform:translate3d(-2.8%,-1.8%,0) scale(1);opacity:.82}
  50%{transform:translate3d(2.2%,1.4%,0) scale(1.035);opacity:.95}
  100%{transform:translate3d(3.2%,-1.2%,0) scale(1.015);opacity:.88}
}
.top,.hero,.gallery{position:relative;z-index:1}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.skip{position:absolute;left:-999px;top:0;background:var(--acc);color:#05070c;padding:8px 14px;z-index:100}
.skip:focus{left:0}

.top{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:calc(12px + var(--safe-t)) 5vw 2px;
  opacity:.72;
}
.hero{
  text-align:center;
  padding:6px 5vw 4px;
  max-width:640px;
  margin:0 auto 2px;
}
.hero-title, .hero #info-title, #info-title{
  margin:0;
  font-weight:400;
  font-size:clamp(11px, 2.6vw, 13px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:transparent;
  background:linear-gradient(90deg,#e8eef8,#9ec0ff 55%,#c9d6ea);
  -webkit-background-clip:text;background-clip:text;
}
.hero-lead, .hero #info-lead, #info-lead{
  margin:6px auto 0;
  color:rgba(201,214,234,.62);
  font-size:clamp(10.5px, 2.4vw, 12px);
  max-width:420px;
  line-height:1.45;
  letter-spacing:.03em;
  font-weight:400;
}
@media (max-width:600px){
  .top{padding:calc(10px + var(--safe-t)) 4vw 0}
  .hero{padding:4px 4vw 2px}
  .hero-title, .hero #info-title, #info-title{letter-spacing:.18em}
  .gallery{padding-top:4px}
}

.brand{
  margin:0;letter-spacing:.28em;font-size:11px;text-transform:uppercase;
  background:linear-gradient(90deg,#fff,#9ec0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{margin:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

.gallery{
  position:relative;
  padding:4px 0 10px;
  min-height:calc(var(--slide-h) + 110px);
}
.glow{
  pointer-events:none;
  position:absolute;left:50%;top:42%;
  width:min(110vw,980px);height:min(82vh,640px);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 50% 48%, rgba(var(--glow),.32) 0%, rgba(var(--glow),.14) 30%, rgba(var(--glow),.04) 52%, transparent 70%),
    radial-gradient(ellipse at 58% 38%, rgba(201,214,234,.14) 0%, transparent 58%),
    radial-gradient(ellipse at 40% 58%, rgba(150,175,210,.10) 0%, transparent 55%);
  filter:blur(42px);
  opacity:.98;
  transition:background .9s ease, opacity .7s ease;
  z-index:0;
  animation:glowBreath 18s ease-in-out infinite alternate;
}
@keyframes glowBreath{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.78}
  100%{transform:translate(-51.5%,-48.5%) scale(1.05);opacity:1}
}

.stage{
  position:relative;z-index:1;
  outline:none;
  width:100%;
  height:var(--slide-h);
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.stage:focus-visible{outline:1px solid rgba(158,192,255,.35);outline-offset:-2px}

.viewport{
  position:absolute;inset:0;
  perspective:1600px;
  perspective-origin:50% 50%;
  overflow:visible;
  /* soft side falloff so peeking neighbours never show a hard crop */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.track{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}
.track.dragging .slide{transition:none}

.slide{
  position:absolute;
  left:50%;top:50%;
  width:var(--slide-w);
  height:var(--slide-h);
  margin:0;
  display:flex;align-items:center;justify-content:center;
  transform-style:flat; /* flat so z-index reliably stacks active above neighbours */
  transition:transform .7s cubic-bezier(.22,.7,.2,1), opacity .55s ease, filter .55s ease;
  will-change:transform,opacity,filter;
  pointer-events:none;
  z-index:1;
}
.slide.is-active{pointer-events:auto;z-index:20}
.slide.is-near{z-index:4;pointer-events:none}
.slide.is-far{z-index:2;pointer-events:none}
/* Soft-fade the inward edge of neighbours so they never read as a hard rectangle */
.slide.is-near.is-right,
.slide.is-far.is-right{
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 100%);
}
.slide.is-near.is-left,
.slide.is-far.is-left{
  -webkit-mask-image:linear-gradient(270deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 100%);
  mask-image:linear-gradient(270deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 100%);
}
.slide.is-active{
  -webkit-mask-image:none;
  mask-image:none;
}
/* Soft underplate — keeps neighbours from showing through the media vignette */
.slide.is-active::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:70%;height:70%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(5,7,12,.4) 0%, rgba(5,7,12,.12) 48%, transparent 74%);
  z-index:0;pointer-events:none;
}
.slide.is-active > *{position:relative;z-index:1}


.media{
  position:relative;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  display:block;
  background:transparent;
  /* soft vignette blend into the page — no hard frame */
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 52%, rgba(0,0,0,.55) 72%, transparent 100%);
  mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 52%, rgba(0,0,0,.55) 72%, transparent 100%);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.42)) drop-shadow(0 0 48px rgba(158,192,255,.10));
}
.slide img.media{
  object-fit:contain;
  border-radius:2px;
}

/* Video: size to footage aspect — no letterbox black box; controls only on hover/tap */
.video-shell{
  position:relative;
  max-width:100%;max-height:100%;
  width:fit-content;height:fit-content;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  /* gentle edge feather only — keep footage fully visible (no fake letterbox) */
  -webkit-mask-image:radial-gradient(ellipse 96% 96% at 50% 50%, #000 78%, rgba(0,0,0,.75) 90%, transparent 100%);
  mask-image:radial-gradient(ellipse 96% 96% at 50% 50%, #000 78%, rgba(0,0,0,.75) 90%, transparent 100%);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.42)) drop-shadow(0 0 48px rgba(158,192,255,.10));
}
.slide video.media{
  width:auto;height:auto;
  max-width:100%;max-height:100%;
  object-fit:contain;
  background:transparent !important;
  border-radius:2px;
  /* video itself: no second mask/shadow (shell owns the blend) */
  -webkit-mask-image:none;
  mask-image:none;
  filter:none;
}
.video-shell.show-controls{
  -webkit-mask-image:radial-gradient(ellipse 98% 98% at 50% 50%, #000 82%, rgba(0,0,0,.8) 92%, transparent 100%);
  mask-image:radial-gradient(ellipse 98% 98% at 50% 50%, #000 82%, rgba(0,0,0,.8) 92%, transparent 100%);
}
.video-shell:not(.show-controls) video.media::-webkit-media-controls-panel,
.video-shell:not(.show-controls) video.media::-webkit-media-controls-enclosure{
  opacity:0 !important;
  pointer-events:none;
}
.video-shell .play-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:999px;
  background:rgba(8,12,20,.35);
  border:1px solid rgba(201,214,234,.28);
  color:rgba(223,230,242,.9);
  display:grid;place-items:center;
  font-size:14px;letter-spacing:.02em;
  pointer-events:none;
  opacity:0;transition:opacity .25s ease;
  backdrop-filter:blur(6px);
}
.video-shell .play-hint::before{content:"▶";margin-left:2px}
.slide.is-active .video-shell:not(.is-playing):not(.show-controls) .play-hint{opacity:.7}
.video-shell.show-controls .play-hint,
.video-shell.is-playing .play-hint{opacity:0}

/* Collection mosaics — in-flow cells, tap to step */
.mosaic, .eyes{
  position:relative;
  width:min(100%, var(--slide-w));
  height:min(100%, var(--slide-h));
  display:grid;
  gap:7px;
  padding:4px;
  -webkit-mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, #000 48%, rgba(0,0,0,.5) 74%, transparent 100%);
  mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, #000 48%, rgba(0,0,0,.5) 74%, transparent 100%);
  cursor:pointer;
}
.mosaic .cell, .eyes .cell{
  position:relative;overflow:hidden;border-radius:3px;
  min-height:0;min-width:0;
  background:#05070c;
}
.mosaic .cell img.tile-media,
.mosaic .cell video.tile-media,
.eyes .cell img,
.eyes .cell img.tile-media,
.eyes .cell video.tile-media{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
  opacity:.92;transition:opacity .55s ease, filter .55s ease, transform .7s ease;
  filter:saturate(.95) brightness(.92);
  transform-origin:center;
  background:transparent;
}
.mosaic .cell.is-focus img.tile-media,
.mosaic .cell.is-focus video.tile-media,
.eyes .cell.is-focus img,
.eyes .cell.is-focus img.tile-media,
.eyes .cell.is-focus video.tile-media{
  opacity:1;filter:saturate(1.05) brightness(1.05);
  transform:scale(1.02);
}
.mosaic .cell:not(.is-focus) img.tile-media,
.mosaic .cell:not(.is-focus) video.tile-media,
.eyes .cell:not(.is-focus) img,
.eyes .cell:not(.is-focus) img.tile-media,
.eyes .cell:not(.is-focus) video.tile-media{
  opacity:.55;filter:saturate(.7) brightness(.72)
}

/* Eyes ×8: tall 01 left, six mid cells, landscape 02 bottom */
.mosaic-eyes8, .eyes.mosaic-eyes8, .eyes{
  grid-template-columns:1fr 0.9fr 0.9fr 1.8fr;
  grid-template-rows:1fr 1fr 1.15fr;
}
.mosaic-eyes8 > .cell:nth-child(1),
.eyes.mosaic-eyes8 > .cell:nth-child(1){grid-column:1;grid-row:1 / 4}
.mosaic-eyes8 > .cell:nth-child(2){grid-column:2;grid-row:1}
.mosaic-eyes8 > .cell:nth-child(3){grid-column:3;grid-row:1}
.mosaic-eyes8 > .cell:nth-child(4){grid-column:4;grid-row:1}
.mosaic-eyes8 > .cell:nth-child(5){grid-column:2;grid-row:2}
.mosaic-eyes8 > .cell:nth-child(6){grid-column:3;grid-row:2}
.mosaic-eyes8 > .cell:nth-child(7){grid-column:4;grid-row:2}
.mosaic-eyes8 > .cell:nth-child(8){grid-column:2 / 5;grid-row:3}
/* Desktop-only (≥601px): animated eye 09 mid-right framing — do not affect mobile */
@media (min-width:601px){
  .mosaic-eyes8 > .cell[data-n="09"] img.tile-media,
  .mosaic-eyes8 > .cell[data-n="09"] video.tile-media,
  .eyes.mosaic-eyes8 > .cell[data-n="09"] video.tile-media,
  .mosaic-eyes8 > .cell:nth-child(7) video.tile-media{
    object-fit:cover;
    object-position:75% 48%;
  }
}




/* Markings pair */
.mosaic-pair{
  grid-template-columns:1fr 1.15fr;
  grid-template-rows:1fr;
}
.mosaic-pair > .cell:nth-child(1){grid-column:1;grid-row:1}
.mosaic-pair > .cell:nth-child(2){grid-column:2;grid-row:1}

/* Light stills 2×2 */
.mosaic-grid2x2{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
}

.mosaic-hint, .eyes-hint{
  position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(223,230,242,.45);pointer-events:none;z-index:3;
}
.mosaic-dots, .eyes-dots{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:3;pointer-events:none;flex-wrap:wrap;justify-content:center;max-width:90%;
}
.mosaic-dots i, .eyes-dots i{
  width:4px;height:4px;border-radius:999px;background:rgba(158,192,255,.28);
}
.mosaic-dots i.on, .eyes-dots i.on{background:var(--acc)}

.nav{
  position:absolute;z-index:6;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:999px;
  color:rgba(223,230,242,.55);font-size:26px;line-height:1;
  display:grid;place-items:center;
  opacity:0;transition:opacity .25s ease, color .2s ease, background .2s ease;
  background:rgba(8,12,20,.2);
}
.stage:hover .nav,
.stage:focus-within .nav,
.nav:focus-visible{opacity:.85}
.nav:hover,.nav:focus-visible{color:#fff;background:rgba(158,192,255,.16);outline:none}
.nav:disabled{opacity:0 !important;pointer-events:none}
.nav.prev{left:max(8px, 2vw)}
.nav.next{right:max(8px, 2vw)}
@media (pointer:coarse){
  .nav{opacity:.45}
}

.chrome{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 5vw 0;text-align:center;
}
.meta-line{
  margin:0;font-size:12px;letter-spacing:.06em;color:rgba(223,230,242,.7);
  display:flex;align-items:center;gap:8px;min-height:1.2em;
}
.meta-line .label{font-weight:500;color:rgba(223,230,242,.88)}
.meta-line .sep{opacity:.35}
.meta-line .counter{font-variant-numeric:tabular-nums;color:var(--mut);letter-spacing:.1em;font-size:11px}
.caption{
  margin:2px 0 0;
  max-width:min(520px, 92vw);
  font-size:11px;line-height:1.45;
  letter-spacing:.01em;
  color:rgba(201,214,234,.72);
  min-height:0;opacity:1;
  text-wrap:pretty;
}
.caption.is-placeholder{font-style:italic;opacity:.45;color:var(--mut)}
.caption:empty{display:none}
.quote{
  margin:10px 0 0;
  max-width:min(480px, 90vw);
  padding-top:10px;
  border-top:1px solid rgba(158,192,255,.14);
  font-size:11px;line-height:1.45;
  font-style:italic;
  letter-spacing:.015em;
  color:rgba(170,196,230,.62);
  text-wrap:pretty;
}
.quote[hidden],.quote:empty{display:none !important}

.dots{display:flex;justify-content:center;gap:6px;padding:4px 0 2px}
.dots button{
  width:5px;height:5px;border-radius:999px;
  background:rgba(158,192,255,.22);transition:transform .2s, background .2s, opacity .2s;
  opacity:.7;
}
.dots button[aria-selected="true"]{background:var(--acc);transform:scale(1.35);opacity:1}
.dots button:focus-visible{outline:1px solid var(--acc);outline-offset:3px}

.info{display:none !important}
.info h1{margin:0 0 6px;font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.lead{margin:4px auto 0;color:rgba(201,214,234,.68);font-size:11px;max-width:420px;line-height:1.5;letter-spacing:.02em;font-style:normal;opacity:1}
.lead.is-placeholder{font-style:italic;opacity:.65;color:var(--mut)}
.lead[hidden],.lead:empty{display:none !important}

.foot{display:none !important}
.foot p{margin:0}

.ph{color:var(--mut);font-size:13px}

@media (max-width:640px){
  :root{
    --slide-w:min(86vw,420px);
    --slide-h:min(56vh,460px);
  }
  .nav{width:34px;height:34px;font-size:24px;opacity:.4}
  .mosaic,.eyes{gap:5px}
  .caption{font-size:10.5px;line-height:1.4;max-width:92vw}
  .quote{font-size:10.5px;line-height:1.4;max-width:90vw;margin-top:8px;padding-top:8px}
  .meta-line{font-size:11px;flex-wrap:wrap;justify-content:center}
  .chrome{gap:5px;padding:4px 4vw 0}
  /* stronger soft side fade on mobile so the peek never hard-crops */
  .viewport{
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  .slide.is-near.is-right,
  .slide.is-far.is-right{
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 28%, #000 58%, #000 100%);
    mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 28%, #000 58%, #000 100%);
  }
  .slide.is-near.is-left,
  .slide.is-far.is-left{
    -webkit-mask-image:linear-gradient(270deg, transparent 0%, rgba(0,0,0,.12) 28%, #000 58%, #000 100%);
    mask-image:linear-gradient(270deg, transparent 0%, rgba(0,0,0,.12) 28%, #000 58%, #000 100%);
  }
}

/* Mobile-only Eyes mosaic (≤600px). Desktop rules above stay untouched. */
@media (max-width:600px){
  .mosaic-eyes8, .eyes.mosaic-eyes8, .eyes{
    grid-template-columns:0.95fr 1fr 1fr;
    grid-template-rows:1.05fr 1.05fr 1.2fr 0.9fr;
    gap:5px;
  }
  /* 01 tall-left spanning 2 rows — cell AR ≈ source 0.58, natural not squashed */
  .mosaic-eyes8 > .cell:nth-child(1),
  .eyes.mosaic-eyes8 > .cell:nth-child(1){
    grid-column:1;
    grid-row:1 / 3;
  }
  .mosaic-eyes8 > .cell:nth-child(1) img.tile-media,
  .eyes.mosaic-eyes8 > .cell:nth-child(1) img.tile-media{
    object-fit:cover;
    object-position:center center;
  }
  /* top-right pair */
  .mosaic-eyes8 > .cell:nth-child(2){grid-column:2;grid-row:1} /* 07 */
  .mosaic-eyes8 > .cell:nth-child(3){grid-column:3;grid-row:1} /* 04 */
  /* mid-right pair */
  .mosaic-eyes8 > .cell:nth-child(4){grid-column:2;grid-row:2} /* 05 */
  .mosaic-eyes8 > .cell:nth-child(5){grid-column:3;grid-row:2} /* 06 */
  /* row 3: 08 + wide 09 (landscape) so GIF halo fits horizontally, no bars */
  .mosaic-eyes8 > .cell:nth-child(6){grid-column:1;grid-row:3} /* 08 */
  .mosaic-eyes8 > .cell:nth-child(7){grid-column:2 / 4;grid-row:3} /* 09 */
  .mosaic-eyes8 > .cell[data-n="09"] img.tile-media,
  .mosaic-eyes8 > .cell[data-n="09"] video.tile-media,
  .mosaic-eyes8 > .cell:nth-child(7) video.tile-media{
    object-fit:cover !important;
    object-position:52% 48% !important; /* full-width row: keep whole iris + right halo in frame */
  }
  /* row 4: soft 02 full width */
  .mosaic-eyes8 > .cell:nth-child(8){grid-column:1 / 4;grid-row:4}
  .mosaic-eyes8 > .cell:nth-child(8) img.tile-media{
    object-fit:cover;
    object-position:center center;
  }
}

@media (min-width:900px){
  :root{
    --slide-w:min(54vw,640px);
    --slide-h:min(64vh,560px);
  }
}
@media (prefers-reduced-motion:reduce){
  .slide,.eyes .cell img,.mosaic .cell img,.mosaic .cell video,.glow,.nav{transition:none !important}
  body::after,.glow{animation:none !important}
}

/* BUILD float1794253052 */