@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');
/* == projects.css == */
.pj-body{
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}

.pj-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 44% at calc(18% + var(--mx,0) * 6%) calc(8% + var(--my,0) * 4%),
      color-mix(in srgb, var(--accent) 13%, transparent), transparent 100%),
    radial-gradient(60% 52% at calc(86% - var(--mx,0) * 6%) calc(96% - var(--my,0) * 5%),
      rgba(28,52,44,.55), transparent 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(3,2,2,.6) 100%);
}

.pj-grain{
  position:fixed; inset:-2%; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.09; mix-blend-mode:overlay;
}

.pj-hand{
  font-family:'Caveat', cursive;
  font-weight:600;
  font-size:clamp(19px, 1.8vw, 27px);
  line-height:1.15;
  color:rgba(240,236,228,.88);
  letter-spacing:.01em;
  transform:rotate(var(--hr, var(--nr, 0deg)));
  display:inline-block;
}

.pj-arrow{
  width:clamp(54px, 6vw, 92px); height:auto;
  fill:none; stroke:rgba(240,236,228,.8); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
.pj-arrow-line{ stroke-dasharray:240; stroke-dashoffset:240; }
.pj-arrow-head{ opacity:0; }
.in .pj-arrow .pj-arrow-line, .in.pj-arrow .pj-arrow-line{
  animation:pjDraw 1.1s var(--ease) .25s forwards;
}
.in .pj-arrow .pj-arrow-head, .in.pj-arrow .pj-arrow-head{
  animation:pjHead .3s var(--ease) 1.15s forwards;
}
@keyframes pjDraw{ to{ stroke-dashoffset:0; } }
@keyframes pjHead{ to{ opacity:1; } }

.pj-star{
  position:absolute; font-size:clamp(18px, 1.6vw, 26px);
  color:rgba(240,236,228,.65);
  animation:pjTwinkle 3.4s ease-in-out infinite;
}
@keyframes pjTwinkle{ 0%,100%{ opacity:.65; transform:scale(1) rotate(0deg);} 50%{ opacity:.25; transform:scale(.82) rotate(18deg);} }

.pj-top{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
  background:linear-gradient(180deg, rgba(7,6,5,.85), transparent);
}
.pj-mark{ height:34px; width:auto; opacity:.9; }
.pj-back, .pj-contact{
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  padding:10px 2px; position:relative;
  transition:color .35s var(--ease);
}
.pj-back:hover, .pj-contact:hover{ color:var(--ink); }
.pj-back-arr{ display:inline-block; transition:transform .35s var(--ease); }
.pj-back:hover .pj-back-arr{ transform:translateX(-4px); }
.pj-contact::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:1px;
  background:linear-gradient(90deg, var(--accent), transparent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease);
}
.pj-contact:hover::after{ transform:scaleX(1); }

.pj-hero{
  position:relative; z-index:2;
  padding-top:clamp(140px, 20vh, 220px);
  padding-bottom:clamp(30px, 5vh, 60px);
}
.pj-hero-title{
  margin:18px 0 0;
  font-size:clamp(52px, 8.4vw, 128px);
  line-height:.98; letter-spacing:-.02em; font-weight:300;
}
.pj-hero-sub{
  margin:26px 0 0;
  max-width:44ch; color:var(--ink-soft);
  font-size:clamp(15px, 1.25vw, 19px); line-height:1.55;
  text-wrap:pretty;
}
.pj-hero-hand{
  position:absolute;
  right:clamp(20px, 14vw, 300px); top:clamp(150px, 22vh, 250px);
  font-size:clamp(22px, 2.2vw, 34px);
}
.pj-hero-arrow{
  position:absolute;
  right:clamp(60px, 16vw, 330px); top:clamp(200px, 28vh, 320px);
}
.pj-hero-star{ left:clamp(20px, 4vw, 70px); top:clamp(110px, 15vh, 170px); }

.pj-board{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:clamp(16px, 3vw, 54px);
  row-gap:clamp(48px, 9vh, 120px);
  padding-top:clamp(30px, 6vh, 70px);
  padding-bottom:clamp(70px, 10vh, 140px);
  align-items:start;
}

.pj-card{
  position:relative;
  grid-column:span var(--span, 6);
  margin-top:var(--off, 0vh);
  text-decoration:none; color:inherit;
  transform:rotate(var(--rot, 0deg)) translateY(var(--py, 0px));
  transition:transform .6s var(--ease);
  isolation:isolate;
}
.pj-card:hover{ z-index:5; }

.pj-ghost{
  position:absolute; inset:-4% -5%; z-index:-1; pointer-events:none;
  filter:blur(22px) saturate(1.35) brightness(.9);
  opacity:.55;
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.pj-ghost img{ width:100%; height:100%; object-fit:cover; display:block; }
.pj-card:hover .pj-ghost{ opacity:.9; transform:scale(1.05) translateY(1.5%); }

.pj-photo{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:var(--ar, 4/3); border-radius:6px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(236,234,229,.07);
  transform:translateZ(0);
}
.pj-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:blur(3px) saturate(1.22) contrast(1.06) brightness(.92);
  transform:scale(1.06);
  transition:filter .65s var(--ease), transform .9s var(--ease);
}
@media (prefers-reduced-motion: no-preference){
  .pj-photo img{ animation:pjBreathe 9s ease-in-out infinite alternate; }
}
@keyframes pjBreathe{
  from{ transform:scale(1.06) translate(0, 0); filter:blur(2px) saturate(1.22) contrast(1.06) brightness(.94); }
  to  { transform:scale(1.1) translate(-1.4%, 1%); filter:blur(4.4px) saturate(1.28) contrast(1.06) brightness(.9); }
}
.pj-card:hover .pj-photo img, .pj-card:focus-visible .pj-photo img{
  filter:blur(0px) saturate(1.05) contrast(1.02) brightness(1);
  animation:none;
}

.pj-photo::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.22; mix-blend-mode:overlay;
  transition:opacity .6s var(--ease);
}
.pj-card:hover .pj-photo::before{ opacity:.1; }
.pj-photo::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,4,3,.22), transparent 30%, transparent 62%, rgba(6,4,3,.55)),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, color-mix(in srgb, var(--g2, #111) 45%, transparent) 100%);
  transition:opacity .6s var(--ease);
}
.pj-card:hover .pj-photo::after{ opacity:.65; }

.pj-photo-grad{
  background:
    radial-gradient(110% 100% at 30% 10%, var(--g1), var(--g2) 66%, #0a0706);
}
.pj-photo-grad::before{ opacity:.3; }

.pj-idx{
  position:absolute; z-index:6; top:-16px; left:-10px;
  display:grid; place-items:center;
  width:64px; height:40px;
  font-size:13.5px; letter-spacing:.16em;
  color:rgba(240,236,228,.9);
  font-variant-numeric:tabular-nums;
}
.pj-idx svg{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:rgba(240,236,228,.55); stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:230; stroke-dashoffset:230;
  transform:rotate(var(--rot, 0deg));
}
.pj-card.in .pj-idx svg path{ animation:pjDraw 1s var(--ease) .5s forwards; }
.pj-card:hover .pj-idx{ color:#fff; }
.pj-card:hover .pj-idx svg{ stroke:color-mix(in srgb, var(--g1) 60%, #fff); }

.pj-cap{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 4px 0;
}
.pj-cap b{
  font-weight:400;
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .4s var(--ease);
}
.pj-cap .pj-hand{
  font-size:clamp(20px, 2vw, 28px);
  color:rgba(240,236,228,.75);
  transform:rotate(calc(var(--rot, 0deg) * -.4));
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.pj-card:hover .pj-cap b{ color:var(--ink); }
.pj-card:hover .pj-cap .pj-hand{
  color:#fff;
  transform:rotate(calc(var(--rot, 0deg) * -.4)) translateX(6px);
}

.pj-note{
  position:relative; z-index:4;
  color:rgba(240,236,228,.8);
  text-align:left;
}
.pj-note .pj-arrow{ display:block; margin-top:6px; }
.pj-note-in{ position:absolute; white-space:nowrap; }
.pj-underline{
  display:block; height:2px; margin-top:6px; width:78%;
  background:linear-gradient(90deg, rgba(240,236,228,.7), transparent);
  border-radius:2px;
  transform:rotate(-1deg);
}

.pj-sketch{
  position:relative; margin:0;
  grid-column:span 5;
  transform:rotate(var(--rot, 0deg));
  opacity:.92;
}
.pj-sketch img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 0 26px rgba(240,236,228,.06));
  transition:filter .6s var(--ease), transform .6s var(--ease);
}
.pj-sketch:hover img{
  filter:drop-shadow(0 0 34px rgba(240,236,228,.14)) brightness(1.2);
  transform:scale(1.02) rotate(-.6deg);
}
.pj-sketch figcaption{
  margin-top:2px; text-align:center;
  color:rgba(240,236,228,.7);
  font-size:clamp(19px, 1.8vw, 26px);
}

.pj-foot{
  position:relative; z-index:2;
  padding-top:clamp(30px, 6vh, 80px);
  padding-bottom:clamp(80px, 12vh, 140px);
  display:flex; flex-direction:column; align-items:center; gap:26px;
  text-align:center;
}
.pj-foot-hand{ font-size:clamp(22px, 2.2vw, 34px); color:rgba(240,236,228,.7); }
.pj-foot-line{
  margin:0; font-size:clamp(30px, 4.6vw, 64px); line-height:1.05; font-weight:300;
  max-width:22ch; text-wrap:balance;
}
.pj-foot-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.pj-foot-note{ color:var(--ink-faint); }

.pj-view{
  position:fixed; inset:0; z-index:80;
  background:var(--bg);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.pj-view.open{ opacity:1; visibility:visible; }
.pj-view-scroll{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; }

.pj-close{
  position:fixed; top:20px; right:clamp(20px, 4vw, 48px); z-index:90;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  font:inherit; font-size:17px; color:var(--ink);
  background:rgba(7,6,5,.55); border:1px solid var(--line-strong);
  cursor:pointer; opacity:0; transform:scale(.8);
  transition:opacity .4s var(--ease) .2s, transform .4s var(--ease) .2s, border-color .3s var(--ease);
}
.pj-view.open .pj-close{ opacity:1; transform:scale(1); }
.pj-close:hover{ border-color:var(--accent); }

.pj-cover{ position:relative; height:min(78vh, 760px); min-height:420px; overflow:hidden; }
.pj-cover-media{ position:absolute; inset:0; }
.pj-cover-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06);
  transition:transform 1.4s var(--ease);
}
.pj-view.open .pj-cover-media img{ transform:scale(1.0); }
.pj-cover-grad{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, var(--bg) 2%, transparent 46%),
    radial-gradient(90% 70% at 50% 110%, color-mix(in srgb, var(--vg1,#333) 30%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(7,6,5,.5), transparent 30%);
}
.pj-cover.no-photo .pj-cover-media{ display:none; }
.pj-cover.no-photo{
  background:
    radial-gradient(120% 100% at 50% 0%, var(--vg1,#333), var(--vg2,#111) 62%, var(--bg));
}
.pj-cover-cap{
  position:absolute; left:0; right:0; bottom:clamp(28px, 5vh, 58px); z-index:2;
}
.pj-view-title{
  margin:14px 0 0;
  font-size:clamp(38px, 6.4vw, 96px); line-height:1; letter-spacing:-.02em; font-weight:300;
  max-width:16ch;
}

.pj-view-body{
  display:grid; grid-template-columns:minmax(230px, 340px) 1fr;
  gap:clamp(28px, 5vw, 90px);
  padding-top:clamp(34px, 5vh, 64px);
  padding-bottom:clamp(24px, 4vh, 48px);
}
.pj-facts{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.pj-facts li{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 0; border-top:1px solid var(--line-soft);
}
.pj-facts li:last-child{ border-bottom:1px solid var(--line-soft); }
.pj-facts .k{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.pj-facts .v{ font-size:15.5px; color:var(--ink); line-height:1.45; }
.pj-desc{
  margin:0; align-self:start;
  font-family:var(--font-display);
  font-size:clamp(19px, 1.9vw, 28px); line-height:1.5; font-weight:300;
  color:var(--ink); max-width:36ch; text-wrap:pretty;
}
.pj-desc em{ color:var(--label-ink); }

.pj-gallery{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:clamp(10px, 1.4vw, 22px);
  padding-bottom:clamp(40px, 7vh, 90px);
}
.pj-shot{
  position:relative; margin:0; overflow:hidden; border-radius:8px;
  grid-column:span 3; aspect-ratio:4/3;
  cursor:pointer; isolation:isolate;
}
.pj-shot.wide{ grid-column:span 6; aspect-ratio:21/9; }
.pj-shot.third{ grid-column:span 2; aspect-ratio:3/4; }
.pj-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.85) brightness(.88) blur(1.5px);
  transform:scale(1.015);
  transition:filter .6s var(--ease), transform .9s var(--ease);
}
.pj-shot:hover img{ filter:saturate(1) brightness(1) blur(0); transform:scale(1.06); }
.pj-shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 62%, rgba(6,4,3,.45));
  opacity:.7; transition:opacity .5s var(--ease);
}
.pj-shot:hover::after{ opacity:.25; }
.pj-shot .pj-shot-cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:'Caveat', cursive; font-weight:600;
  font-size:clamp(18px, 1.6vw, 24px); letter-spacing:.01em;
  color:var(--ink); opacity:0; transform:translateY(8px) rotate(-1.5deg);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.pj-shot:hover .pj-shot-cap{ opacity:.95; transform:rotate(-1.5deg); }

.pj-view-nav{
  display:flex; justify-content:space-between; gap:16px;
  padding-bottom:clamp(60px, 9vh, 110px);
}
.pj-nav-btn{
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  background:none; border:0; padding:18px 6px; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
  border-top:1px solid var(--line-soft);
  flex:1; max-width:46%;
  transition:border-color .4s var(--ease);
}
.pj-nav-btn.next{ align-items:flex-end; text-align:right; }
.pj-nav-btn:hover{ border-color:var(--accent); }
.pj-nav-k{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); transition:color .35s var(--ease);
}
.pj-nav-btn:hover .pj-nav-k{ color:var(--label-ink); }
.pj-nav-v{
  font-family:var(--font-display);
  font-size:clamp(19px, 2vw, 30px); font-weight:300; line-height:1.1;
}

@media (prefers-reduced-motion: no-preference){
  .pj-board .pj-card, .pj-board .pj-sketch, .pj-board > .pj-note{
    animation:pjFloat var(--fdur, 12s) ease-in-out var(--fdel, 0s) infinite;
  }
  .pj-board > *:nth-child(2n){ --fdur:14.5s; --fx:-14px; --fy:-10px; --fr:-.9deg; --fdel:-4s; }
  .pj-board > *:nth-child(3n){ --fdur:11s;   --fx:10px;  --fy:-16px; --fr:.8deg;  --fdel:-7s; }
  .pj-board > *:nth-child(5n){ --fdur:16s;   --fx:-9px;  --fy:-13px; --fr:-.7deg; --fdel:-2s; }
  .pj-board .pj-card:hover, .pj-board .pj-sketch:hover{ animation-play-state:paused; }
}
@keyframes pjFloat{
  0%, 100%{ transform:rotate(var(--rot, 0deg)) translate3d(0, 0, 0) scale(.975); }
  33%{ transform:rotate(calc(var(--rot, 0deg) + var(--fr, 1deg)))
         translate3d(var(--fx, 14px), var(--fy, -20px), 0) scale(1.015); }
  66%{ transform:rotate(calc(var(--rot, 0deg) - var(--fr, 1deg)))
         translate3d(calc(var(--fx, 14px) * -.6), calc(var(--fy, -20px) * -.7), 0) scale(.99); }
}

.pj-card:hover .pj-photo, .pj-card:focus-visible .pj-photo{ transform:scale(1.045); }
.pj-photo{ transition:transform .6s var(--ease); }

.pj-hud{ display:none; }

body.pj-3d .pj-track{ position:relative; }
body.pj-3d .pj-stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:block; padding:0;
  perspective:1150px; perspective-origin:50% 46%;
}
body.pj-3d .pj-item{
  position:absolute; left:50%; top:50%;
  width:min(520px, 42vw);
  margin:0 !important;
  transition:none !important;
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--x, 0vw) + var(--camx, 0px)), calc(var(--y, 0vh) + var(--camy, 0px)), calc((var(--cz, 0) - var(--depth, 0)) * 1px))
    rotate(var(--rot, 0deg));
  will-change:transform, filter, opacity;
}
body.pj-3d .pj-note{
  width:max-content; max-width:38vw;
  font-size:clamp(24px, 2.4vw, 38px);
}
body.pj-3d .pj-note .pj-arrow{ display:none; }
body.pj-3d .pj-note-end{ text-align:center; font-size:clamp(28px, 3vw, 46px); }
body.pj-3d .pj-sketch{ width:min(430px, 34vw); }

body.pj-3d .pj-hud{
  display:flex; position:fixed; left:var(--pad); bottom:26px; z-index:20;
  flex-direction:column; align-items:flex-start; gap:7px;
  pointer-events:none;
}
.pj-hud-count{ font-size:12px; letter-spacing:.22em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.pj-hud-count b{ font-weight:400; color:var(--ink); }
.pj-hud-name{ font-size:clamp(20px, 1.9vw, 27px); color:rgba(240,236,228,.85); }
.pj-hud-bar{ width:190px; height:2px; background:rgba(236,234,229,.14); border-radius:2px; overflow:hidden; }
.pj-hud-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), #e8b26a);
  box-shadow:0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}

@media (min-width: 861px){
  .pj-board{
    display:block; position:relative;
    height:225vh; min-height:1500px;
  }
  
  .pj-board::before{
    content:""; position:absolute; left:50%; top:46%; z-index:0;
    width:56vw; height:56vw; transform:translate(-50%,-50%);
    background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, rgba(28,52,44,.22) 34%, transparent 68%);
    filter:blur(10px); pointer-events:none;
  }
  .pj-board::after{
    content:""; position:absolute; left:50%; top:46%; z-index:0;
    width:74vw; height:96vh; transform:translate(-50%,-50%) rotate(-8deg);
    border:1px dashed rgba(236,234,229,.09); border-radius:50%;
    pointer-events:none;
  }
  .pj-board > *{ position:absolute; margin:0 !important; z-index:1; }
  .pj-board > .pj-card{ width:clamp(250px, 23vw, 400px); }
  .pj-board > .pj-sketch{ width:clamp(210px, 17vw, 300px); opacity:.85; }

  
  .pj-board > :nth-child(1){ left:38%;  top:4%; }    
  .pj-board > :nth-child(2){ left:63%;  top:2%; }    
  .pj-board > :nth-child(3){ left:6%;   top:14%; }   
  .pj-board > :nth-child(4){ left:72%;  top:36%; }   
  .pj-board > :nth-child(5){ left:70%;  top:10%; }   
  .pj-board > :nth-child(6){ left:26%;  top:33%; }   
  .pj-board > :nth-child(7){ left:7%;   top:46%; }   
  .pj-board > :nth-child(8){ left:64%;  top:62%; }   
  .pj-board > :nth-child(9){ left:20%;  top:68%; }   
  .pj-board > :nth-child(10){ left:42%; top:38%; }   
  .pj-board > :nth-child(11){ left:42%; top:82%; }   
  .pj-board > :nth-child(12){ left:76%; top:84%; }   
  .pj-board > :nth-child(13){ left:34%; top:97%; }   
}

@media (max-width: 860px){
  .pj-board{ grid-template-columns:1fr 1fr; column-gap:16px; row-gap:56px; }
  .pj-card, .pj-sketch{ grid-column:span 2 !important; margin-top:0; }
  .pj-note{ grid-column:span 2 !important; }
  .pj-note-in{ display:none; }
  .pj-hero-hand, .pj-hero-arrow{ display:none; }
  .pj-view-body{ grid-template-columns:1fr; }
  .pj-desc{ max-width:none; }
  .pj-gallery{ grid-template-columns:1fr 1fr; }
  .pj-shot, .pj-shot.wide, .pj-shot.third{ grid-column:span 2; aspect-ratio:16/10; }
}

@media (prefers-reduced-motion: reduce){
  .pj-photo img{ filter:none; transform:none; animation:none; }
  .pj-ghost{ display:none; }
  .pj-star{ animation:none; }
  .pj-arrow-line{ stroke-dashoffset:0; }
  .pj-arrow-head{ opacity:1; }
  .pj-idx svg{ stroke-dashoffset:0; }
  .pj-cover-media img{ transition:none; transform:none; }
}

/* == galaxy.css == */
.pj-body{ background:var(--bg); color:var(--ink); min-height:100vh; overflow:hidden; }

.gx{
  position:fixed; inset:0; z-index:2;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  perspective:1150px;
  perspective-origin:50% 50%;
  --ember: var(--accent);
  --core-y: calc(50% - 3vh);   
}
.gx.dragging{ cursor:grabbing; }

.gx-stars{ position:absolute; inset:0; z-index:0; display:block; pointer-events:none; }

.gx-space{
  position:absolute; inset:0; z-index:1;
  transform-origin:50% 50%;
  will-change:transform;
}

.gx-center{ position:absolute; inset:0; z-index:2; pointer-events:none; transform-origin:50% 50%; will-change:transform; }

.gx-guides{ position:absolute; left:50%; top:var(--core-y); z-index:2; transform:translate(-50%,-50%); pointer-events:none; }
.gx-guide{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border:1px dashed rgba(236,234,229,.06);
  border-radius:50%;
}

.gx-core{
  position:absolute; left:50%; top:var(--core-y); z-index:2;
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  pointer-events:none;
}
.gx-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--disc-size,300px) * .85); height:calc(var(--disc-size,300px) * .85); border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--ember) 26%, transparent) 0%,
    color-mix(in srgb, var(--ember) 9%, transparent) 36%,
    transparent 66%);
  filter:blur(26px); opacity:.6;
  animation:gxHalo 7s ease-in-out infinite;
}
@keyframes gxHalo{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:.75; transform:translate(-50%,-50%) scale(1.06);} }

.gx-emblem{
  position:absolute; left:50%; top:50%;
  width:calc(var(--disc-size,300px) * 0.56);
  transform:translate(-50%,-50%);
  opacity:0; pointer-events:none;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 16px rgba(255,224,192,.55));
}

.gx-ignite{
  position:absolute; left:50%; top:50%;
  width:var(--disc-size,300px); height:var(--disc-size,300px);
  transform:translate(-50%,-50%) rotate(-14deg) scaleY(.92);
  pointer-events:none;
}
.gx-flick{ position:absolute; border-radius:50%; opacity:0; }
.gx-flick i{ position:absolute; inset:0; border-radius:50%; display:block; }

.gx-flick.f1{ inset:-1%; animation:gxIgnite 4.8s cubic-bezier(.22,.61,.3,1) forwards, gxFlickPulse 6.5s ease-in-out 5.2s infinite; }
.gx-flick.f1 i{
  background:conic-gradient(from 0deg,
    transparent 0 24%,
    rgba(122,42,12,.05) 34%,
    rgba(139,58,15,.18) 46%,
    rgba(194,66,15,.4) 58%,
    rgba(232,106,43,.62) 69%,
    rgba(255,142,77,.82) 78%,
    rgba(255,190,140,.94) 86%,
    rgba(255,231,208,1) 91%,
    #FFF8F0 93.5%,
    transparent 96%);
  -webkit-mask:radial-gradient(circle, transparent 0 calc(50% - 9px), #000 calc(50% - 6px) calc(50% - 1px), transparent 50%);
          mask:radial-gradient(circle, transparent 0 calc(50% - 9px), #000 calc(50% - 6px) calc(50% - 1px), transparent 50%);
  filter:blur(3px);
  animation:gxFlickTravel 16s ease-in-out infinite;
}

.gx-flick.f1 i::after{
  content:""; position:absolute; left:30.2%; top:4.1%;
  width:18px; height:18px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, #FFFDFA, rgba(255,226,196,.85) 38%, rgba(232,106,43,.4) 62%, transparent 76%);
  filter:blur(1.5px);
}

.gx-flick.f2{ inset:-9%; animation:gxIgniteSoft 4.8s cubic-bezier(.22,.61,.3,1) forwards, gxFlickPulse 7.5s ease-in-out 5.2s infinite; }
.gx-flick.f2 i{
  background:conic-gradient(from 0deg,
    transparent 0 30%,
    rgba(139,58,15,.12) 46%,
    rgba(194,66,15,.28) 62%,
    rgba(255,142,77,.42) 76%,
    rgba(255,210,170,.5) 88%,
    rgba(255,238,220,.55) 93%,
    transparent 96.5%);
  -webkit-mask:radial-gradient(circle, transparent 0 calc(50% - 24px), #000 calc(50% - 16px) calc(50% - 2px), transparent 50%);
          mask:radial-gradient(circle, transparent 0 calc(50% - 24px), #000 calc(50% - 16px) calc(50% - 2px), transparent 50%);
  filter:blur(20px);
  animation:gxFlickTravel 16s ease-in-out infinite;
}

@keyframes gxIgnite{
  0%{ transform:rotate(-318deg); opacity:0; }
  10%{ opacity:1; }
  82%{ transform:rotate(10deg); }
  100%{ transform:rotate(0deg); opacity:.85; }
}
@keyframes gxIgniteSoft{
  0%{ transform:rotate(-318deg); opacity:0; }
  14%{ opacity:.8; }
  82%{ transform:rotate(10deg); }
  100%{ transform:rotate(0deg); opacity:.55; }
}

@keyframes gxFlickTravel{
  0%{ transform:rotate(0deg) scale(1); }
  26%{ transform:rotate(126deg) scale(1.045); }
  46%{ transform:rotate(172deg) scale(.965); }
  62%{ transform:rotate(248deg) scale(1.02); }
  84%{ transform:rotate(322deg) scale(.975); }
  100%{ transform:rotate(360deg) scale(1); }
}
@keyframes gxFlickPulse{
  0%,100%{ opacity:.85; }
  45%{ opacity:.55; }
  60%{ opacity:.75; }
}

@media (prefers-reduced-motion: reduce){
  .gx-flick{ animation:none !important; opacity:.75; transform:none !important; }
  .gx-flick i{ animation:none !important; }
}

.gx-titlewrap{
  position:absolute; left:50%; top:var(--core-y); z-index:4;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.gx-title{
  position:absolute; left:50%; top:calc(50% + var(--disc-size,300px) * .62 + 30px);
  transform:translate(-50%,0); margin:0;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(18px, 2.2vw, 30px); letter-spacing:.4em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; text-align:center; pointer-events:none;
  text-shadow:0 0 26px rgba(255,236,214,.32), 0 2px 20px rgba(6,5,4,.7);
}

.gx-orbit{ position:absolute; left:50%; top:var(--core-y); z-index:3; width:0; height:0; }

.gx-planet{
  position:absolute; left:0; top:0; z-index:5;
  width:var(--size,160px);
  display:block; text-decoration:none; color:inherit;
  transform:translate(-50%,-50%);
  will-change:transform, opacity;
  transition:filter .6s var(--ease);
  filter:blur(var(--pblur,0px));
  -webkit-tap-highlight-color:transparent;
}
.gx-planet[data-depth="mid"]{ --pblur:1.4px; }
.gx-planet[data-depth="far"]{ --pblur:3.2px; }
.gx-planet[data-depth="near"],
.gx-planet.is-hover{ --pblur:0px; }

.gx-planet-photo{
  position:relative; margin:0; overflow:hidden;
  border-radius:10px;
  aspect-ratio:var(--ar,0.8);
  background:#0b0908;
  box-shadow:
    0 18px 44px -20px rgba(0,0,0,.85),
    0 0 0 1px rgba(236,234,229,.06) inset;
  transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
.gx-planet-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.82) contrast(1.02);
  transition:filter .6s var(--ease), transform 1.1s var(--ease);
  transform:scale(1.04);
}
.gx-planet.gx-grad .gx-planet-photo{
  background:radial-gradient(120% 100% at 50% 20%, var(--g1,#b9531e), var(--g2,#2a1408) 66%, #0a0605);
}

.gx-planet-glow{
  position:absolute; inset:-24%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--g1,#b9531e) 55%, transparent), transparent 68%);
  opacity:.0; filter:blur(20px);
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.gx-planet.is-hover .gx-planet-glow{ opacity:.6; }

.gx-planet-tag{
  position:absolute; left:50%; top:calc(100% + 12px); transform:translateX(-50%) translateY(4px);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--font-display); font-size:14px; letter-spacing:.02em; color:var(--ink);
  opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.gx-planet-tag b{
  font-size:10.5px; letter-spacing:.22em; color:var(--ember);
  border:1px solid color-mix(in srgb, var(--ember) 50%, transparent);
  border-radius:20px; padding:2px 7px;
}
.gx-planet.is-hover .gx-planet-tag{ opacity:1; transform:translateX(-50%) translateY(0); }

.gx-planet.is-hover .gx-planet-photo{
  box-shadow:
    0 30px 70px -24px rgba(0,0,0,.9),
    0 0 0 1px color-mix(in srgb, var(--ember) 50%, transparent) inset,
    0 0 40px -6px color-mix(in srgb, var(--ember) 40%, transparent);
}
.gx-planet.is-hover .gx-planet-photo img{ filter:saturate(1.05) brightness(1) contrast(1.02); transform:scale(1); }
.gx-planet.gx-dim{ opacity:.5 !important; }

.gx-chrome{ position:fixed; inset:0; z-index:20; pointer-events:none; }
.gx-chrome::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,5,4,.62), transparent 32%),
    linear-gradient(270deg, rgba(6,5,4,.5), transparent 26%),
    linear-gradient(0deg, rgba(6,5,4,.6), transparent 24%),
    radial-gradient(70% 42% at 50% 0%, rgba(6,5,4,.5), transparent 72%);
}
.gx-chrome > *{ pointer-events:auto; }

.gx-heading{
  position:fixed; left:clamp(20px,4vw,48px); top:clamp(78px,11vh,104px); z-index:20; max-width:min(38vw,420px);
}
.gx-heading .eyebrow{ display:block; margin-bottom:12px; }
.gx-heading h1{
  margin:0; font-family:var(--font-display); font-weight:300;
  font-size:clamp(30px,4.4vw,58px); line-height:.98; letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(6,5,4,.7);
}
.gx-heading h1 em{ font-style:italic; color:var(--label-ink); }
.gx-heading p{
  margin:16px 0 0; font-size:14px; line-height:1.55; color:var(--ink-soft); max-width:34ch;
}

.gx-brand{
  position:fixed; left:50%; top:clamp(46px, 6.5vh, 82px); transform:translateX(-50%);
  z-index:21; display:flex; flex-direction:column; align-items:center; gap:9px;
  pointer-events:none; text-align:center;
}
.gx-brand-mark{
  width:clamp(124px, 12.5vw, 188px); height:auto; opacity:.96;
  filter:drop-shadow(0 2px 26px rgba(6,5,4,.55));
}

.gx-brand-wrap{ position:relative; display:block; line-height:0;
  --cosmic:cubic-bezier(.19,1,.22,1); }
.gx-brand-wrap .gx-brand-mark{ position:relative; z-index:1; display:block;
  animation:gxLogoDawn 2.6s var(--cosmic) .15s both, gxLogoFloat 11s ease-in-out 2.9s infinite; }
.gx-brand-aura{ position:absolute; left:50%; top:52%; width:150%; aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.4); z-index:0; pointer-events:none; opacity:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,238,214,.5) 0%, rgba(242,166,90,.28) 20%, rgba(194,66,15,.16) 40%,
    rgba(120,60,150,.10) 62%, transparent 78%);
  filter:blur(14px); mix-blend-mode:screen;
  animation:gxAura 3.2s var(--cosmic) .15s both; }
.gx-brand-sheen{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  -webkit-mask:url("logos/es-logo.png") center/contain no-repeat;
          mask:url("logos/es-logo.png") center/contain no-repeat;
  background:linear-gradient(100deg, transparent 38%,
    rgba(214,224,255,.5) 46%, rgba(255,247,230,.98) 50%, rgba(255,236,206,.5) 55%, transparent 64%);
  background-repeat:no-repeat; background-size:280% 100%; background-position:150% 0;
  mix-blend-mode:screen;
  animation:gxSheen 2.6s var(--cosmic) .6s both; }
@keyframes gxLogoDawn{
  0%{ filter:brightness(.28) blur(9px) drop-shadow(0 2px 26px rgba(6,5,4,.55)); transform:scale(1.05); }
  60%{ filter:brightness(1.16) blur(0)
        drop-shadow(0 0 46px rgba(242,166,90,.5)) drop-shadow(0 2px 26px rgba(6,5,4,.55)); }
  100%{ filter:brightness(1) blur(0) drop-shadow(0 2px 26px rgba(6,5,4,.55)); transform:scale(1); }
}
@keyframes gxAura{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4); }
  45%{ opacity:1; }
  100%{ opacity:.42; transform:translate(-50%,-50%) scale(1.08); }
}
@keyframes gxSheen{
  0%{ opacity:0; background-position:150% 0; }
  18%{ opacity:1; }
  82%{ opacity:1; }
  100%{ opacity:0; background-position:-50% 0; }
}
@keyframes gxLogoFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-5px) scale(1.006); }
}
@media (prefers-reduced-motion: reduce){
  .gx-brand-wrap .gx-brand-mark{ animation:none; }
  .gx-brand-aura{ animation:none; opacity:.3; transform:translate(-50%,-50%) scale(1); }
  .gx-brand-sheen{ animation:none; opacity:0; }
}
.gx-brand-sub{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(11px, 1.2vw, 15px); letter-spacing:.5em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 74%, var(--ember) 26%);
  padding-left:.5em; text-shadow:0 2px 18px rgba(6,5,4,.7);
}

.gx-hud{
  position:fixed; left:50%; bottom:clamp(30px,6vh,68px); transform:translateX(-50%);
  z-index:21; text-align:center; width:min(90vw,560px); pointer-events:none;
}
.gx-hud-count{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint);
}
.gx-hud-count b{ color:var(--ember); font-weight:400; }
.gx-hud-name{
  display:block; margin-top:6px;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(24px,3vw,38px); line-height:1.05; letter-spacing:-.01em;
  color:var(--ink);
  text-shadow:0 2px 26px rgba(6,5,4,.8);
  transition:opacity .3s var(--ease);
}
.gx-hud-eyebrow{ display:none; }
.gx-hud-enter{ display:none; }
.gx-hud-enter .arr{ transition:transform .4s var(--ease); }

.gx-index{
  position:fixed; right:clamp(18px,3vw,40px); top:50%; transform:translateY(-50%);
  z-index:21; display:flex; flex-direction:column; gap:2px; align-items:flex-end;
}
.gx-idx-item{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  background:none; border:0; cursor:pointer; padding:7px 2px; white-space:nowrap;
  font-family:var(--font-display); font-size:13.5px; color:var(--ink-faint);
  text-shadow:0 1px 12px rgba(6,5,4,.9);
  transition:color .35s var(--ease), gap .35s var(--ease);
}
.gx-idx-item .n{ font-size:10px; letter-spacing:.16em; opacity:.7; font-variant-numeric:tabular-nums; }
.gx-idx-item .bar{ width:14px; height:1px; background:currentColor; opacity:.5; transition:width .35s var(--ease); }
.gx-idx-item:hover{ color:var(--ink-soft); gap:16px; }
.gx-idx-item.active{ color:var(--ink); }
.gx-idx-item.active .bar{ width:30px; background:var(--ember); opacity:1; }

.gx-controls{
  position:fixed; right:clamp(18px,3vw,40px); bottom:clamp(22px,4vh,42px); z-index:22;
  display:flex; align-items:center; gap:8px;
}
.gx-btn{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(15,12,11,.5); backdrop-filter:blur(8px);
  border:1px solid var(--line); color:var(--ink);
  font-size:18px; line-height:1; font-family:var(--font-display);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.gx-btn:hover{ border-color:var(--ember); transform:translateY(-2px); }
.gx-btn:active{ transform:translateY(0) scale(.94); }
.gx-zoom-read{
  min-width:56px; text-align:center; font-size:12px; letter-spacing:.14em;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.gx-btn.wide{ width:auto; padding:0 15px; border-radius:22px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; gap:8px; }
.gx-btn.wide .dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 8px var(--ember); }
.gx-btn.wide.paused .dot{ background:var(--ink-faint); box-shadow:none; }

.gx-hint{
  position:fixed; left:clamp(20px,4vw,48px); bottom:clamp(22px,4vh,42px); z-index:21;
  display:flex; gap:16px; flex-wrap:wrap; max-width:40vw;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.gx-hint span{ display:inline-flex; align-items:center; gap:7px; }
.gx-hint kbd{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0; text-transform:none;
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--ink-soft);
}

.gx-credit{
  position:fixed; left:50%; bottom:8px; transform:translateX(-50%); z-index:19;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(99,93,86,.6);
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .gx-halo{ animation:none; }
}

@media (max-width:900px){
  .gx-heading{ max-width:64vw; }
  .gx-index{ display:none; }
  .gx-title{ letter-spacing:.28em; font-size:clamp(15px,3.6vw,22px); }
  .gx-hint span:nth-child(n+3){ display:none; }
}
@media (max-width:620px){
  .gx-heading{ max-width:80vw; }
  .gx-heading p{ display:none; }
}