/* ============================================================
   SECTION 02 — the collection
   Split stage: circular plate two thirds, navy identity panel one third.
   ============================================================ */
.projects{ position:relative; background:var(--navy-900); }
.projects__spacer{ height:320vh; position:relative; }

.projects__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  display:grid;
  grid-template-columns:2fr 1fr;      /* two thirds / one third */
  overflow:hidden;
}

/* ============================================================
   LEFT — the plates
   The photograph lives inside a circle that grows out of a white
   disc and is wiped in by a radial sweep. Each project carries its
   own backdrop (data.js `theme`), so Maverick sits on white.
   ============================================================ */
@property --sweep { syntax:'<angle>'; inherits:false; initial-value:0deg; }

.projects__media{ position:relative; overflow:hidden; background:var(--navy-900); }
.projects__shots{ position:absolute; inset:0; }

.pshot{
  position:absolute; inset:0;
  --plate-bg:var(--navy-900);
  --plate-ink:var(--ivory-050);
  --plate-soft:rgba(247,244,238,.58);
  --plate-rule:rgba(247,244,238,.22);
  background:var(--plate-bg);
  color:var(--plate-ink);
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.pshot[data-theme='light']{
  --plate-bg:var(--ivory-100);
  --plate-ink:var(--char-900);
  --plate-soft:var(--warm-600);
  --plate-rule:var(--line-strong);
}

.pshot__inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(1rem,2.2vh,1.9rem);
  padding:calc(var(--header-h) + 2rem) clamp(1.5rem,3vw,3rem) clamp(1.75rem,3.4vh,2.75rem);
  will-change:transform;
}

/* ---------- the circle ---------- */
.pdisc-wrap{
  position:relative;
  width:min(44vh,30vw); aspect-ratio:1;
  flex:0 0 auto;
}
.pdisc{
  position:absolute; inset:0; margin:0;
  border-radius:50%;
  overflow:hidden;
  background:var(--ivory-050);
  transform:scale(0.26);
  opacity:0;
  transition:transform 1100ms var(--ease-out), opacity 520ms var(--ease-out);
}
.pshot[data-revealed] .pdisc{ transform:none; opacity:1; }

/* the white disc the photograph arrives into */
.pdisc__fill{
  position:absolute; inset:0; border-radius:50%;
  background:var(--ivory-050);
}
.pdisc__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border-radius:50%;
  opacity:0;
  --sweep:0deg;
  -webkit-mask-image:conic-gradient(from -45deg,#000 0deg,#000 var(--sweep),transparent var(--sweep));
          mask-image:conic-gradient(from -45deg,#000 0deg,#000 var(--sweep),transparent var(--sweep));
  transition:opacity 420ms var(--ease-out);
}
/* the sweep only runs for the photograph currently chosen */
.pshot[data-revealed] .pdisc__img[data-on]{
  opacity:1; --sweep:360deg;
  transition-delay:200ms,200ms;
}

/* centre mark and the leader running down toward the coordinates */
.pdisc__dot{
  position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--plate-ink);
  opacity:0; transform:scale(0.3);
  transition:opacity 400ms var(--ease-out) 900ms, transform 600ms var(--ease-out) 900ms;
}
.pshot[data-revealed] .pdisc__dot{ opacity:1; transform:none; }
.pdisc__leader{
  position:absolute; left:50%; top:50%;
  width:104%; height:1px;
  background:var(--plate-rule);
  transform-origin:left center;
  transform:rotate(133deg) scaleX(0);
  transition:transform 1000ms var(--ease-out) 960ms;
}
.pshot[data-revealed] .pdisc__leader{ transform:rotate(133deg) scaleX(1); }

/* the whole circle is the click target for its reservation */
.pdisc__hit{
  position:absolute; inset:0; z-index:3;
  border-radius:50%; background:transparent; border:0; cursor:pointer;
}
.pdisc__hit::after{
  content:''; position:absolute; inset:-14px;
  border:1px solid var(--plate-rule); border-radius:50%;
  opacity:0; transform:scale(0.97);
  transition:opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
}
.pdisc__hit:hover::after,.pdisc__hit:focus-visible::after{ opacity:1; transform:none; }
.pdisc__hit:focus-visible{ outline:none; }

/* ---------- coordinates, under the circle ---------- */
.pshot__coords{
  display:flex; gap:clamp(1rem,2.4vw,2.4rem);
  font-family:var(--f-mono);
  font-size:clamp(1rem,1.7vw,1.6rem);
  letter-spacing:0.04em;
  color:var(--plate-ink);
  font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(10px);
  transition:opacity 700ms var(--ease-out) 1040ms, transform 700ms var(--ease-out) 1040ms;
}
.pshot[data-revealed] .pshot__coords{ opacity:1; transform:none; }

/* ---------- the project's other photographs ---------- */
.pshot__thumbs{
  display:flex; gap:clamp(0.5rem,1vw,0.9rem);
  opacity:0; transform:translateY(12px);
  transition:opacity 700ms var(--ease-out) 1160ms, transform 700ms var(--ease-out) 1160ms;
}
.pshot[data-revealed] .pshot__thumbs{ opacity:1; transform:none; }
.pthumb{
  position:relative;
  width:clamp(44px,5.2vh,64px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  background:var(--plate-rule);
  filter:grayscale(0.28); opacity:0.78;
  transition:opacity var(--d-2) var(--ease-out), filter var(--d-2) var(--ease-out),
             transform var(--d-2) var(--ease-out);
}
.pthumb img{ width:100%; height:100%; object-fit:cover; }
.pthumb::after{
  content:''; position:absolute; inset:-4px;
  border:1px solid var(--plate-ink); border-radius:50%;
  opacity:0; transition:opacity var(--d-2) var(--ease-out);
}
.pthumb:hover,.pthumb:focus-visible{ opacity:1; filter:none; transform:translateY(-3px); }
.pthumb[data-active]{ opacity:1; filter:none; }
.pthumb[data-active]::after{ opacity:1; }

.pshot__cap{
  color:var(--plate-soft) !important;
  font-size:var(--t-xs); letter-spacing:0.14em; text-transform:uppercase;
  opacity:0; transition:opacity 600ms var(--ease-out) 1280ms;
}
.pshot[data-revealed] .pshot__cap{ opacity:1; }

/* ---------- the numbered index, at the left of the plate ---------- */
.collindex{
  position:absolute; z-index:4;
  left:clamp(1.25rem,2.6vw,3rem); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:clamp(0.9rem,2.2vh,1.9rem);
}
.collindex__b{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:0.2em;
  font-family:var(--f-mono);
  color:var(--warm-500);
  transition:color var(--d-2) var(--ease-out);
}
.collindex__n{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,2.2vw,2.2rem);
  line-height:1; letter-spacing:0.02em;
  font-variant-numeric:lining-nums;
}
.collindex__name{
  font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  opacity:0; transform:translateX(-4px);
  transition:opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.collindex__rule{ display:none; }
.collindex__b:hover,.collindex__b:focus-visible{ color:var(--ivory-100); }
.collindex__b:hover .collindex__name{ opacity:1; transform:none; }
.collindex__b[data-active]{ color:var(--ivory-050); }
.collindex__b[data-active] .collindex__name{ opacity:1; transform:none; }

/* the chrome flips when a light plate is on stage */
.projects__media[data-plate='light'] .collindex__b{ color:var(--warm-600); }
.projects__media[data-plate='light'] .collindex__b[data-active],
.projects__media[data-plate='light'] .collindex__b:hover{ color:var(--char-900); }

.projects__eyebrow{
  position:absolute; z-index:4;
  top:calc(var(--header-h) + 1.4rem);
  left:clamp(1.5rem,3vw,3rem);
  color:var(--ivory-050);
  pointer-events:none;
  transition:color var(--d-3) var(--ease-out);
}
.projects__media[data-plate='light'] .projects__eyebrow{ color:var(--char-900); }

/* thin progress bar, bottom of the plate */
.projects__meter{
  position:absolute; z-index:4;
  left:clamp(1.5rem,3vw,3rem); right:clamp(1.5rem,3vw,3rem);
  bottom:clamp(1.1rem,2vh,1.6rem);
  height:1px; background:rgba(247,244,238,.22);
  transition:background-color var(--d-3) var(--ease-out);
}
.projects__media[data-plate='light'] .projects__meter{ background:var(--line-strong); }
.projects__meter i{
  display:block; height:100%;
  background:var(--ivory-050);
  transform-origin:left center; transform:scaleX(0);
  will-change:transform;
}
.projects__media[data-plate='light'] .projects__meter i{ background:var(--char-900); }

/* ============================================================
   RIGHT — the navy identity panel
   ============================================================ */
.projects__panel{
  position:relative;
  background:var(--navy-800);
  color:var(--ivory-100);
  display:flex; flex-direction:column;
  padding:calc(var(--header-h) + clamp(1.5rem,3vh,2.5rem))
          clamp(1.75rem,2.6vw,3rem)
          clamp(1.5rem,2.6vh,2.25rem);
  overflow:hidden;
}
/* every token inside the panel flips to the light-on-navy set */
.projects__panel .label,
.projects__panel .meta{ color:rgba(247,244,238,.56); }

.projects__cards{ position:relative; flex:1 1 auto; min-height:0; }

.pcard{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;        /* the loop paints the real state */
  will-change:transform,opacity;
}
.pcard__eyebrow{ margin-bottom:var(--s-4); }
.pcard__name{
  font-size:clamp(2rem,3.1vw,3.1rem);
  line-height:1.02;
  color:var(--ivory-050);
  margin-bottom:var(--s-3);
}
.pcard__tagline{
  font-family:var(--f-display);
  font-style:italic;
  font-size:var(--t-lg);
  color:rgba(247,244,238,.78);
  margin-bottom:var(--s-4);
  text-wrap:balance;
}
.pcard__desc{
  font-size:var(--t-sm);
  line-height:1.62;
  color:rgba(247,244,238,.66);
  margin-bottom:var(--s-5);
}

/* compact spec row */
.pcard__specs{
  display:flex; gap:var(--s-5);
  padding-bottom:var(--s-4);
  border-bottom:1px solid rgba(247,244,238,.16);
  margin-bottom:var(--s-4);
}
.pcard__specs dt{ margin-bottom:0.3em; font-size:var(--t-xs); }
.pcard__specs dd{ margin:0; font-size:var(--t-sm); color:var(--ivory-100); }

/* geography */
.pcard__geo{
  display:flex; align-items:flex-start; gap:var(--s-4);
  padding-bottom:var(--s-5);
  border-bottom:1px solid rgba(247,244,238,.16);
}
.pcard__geo-body{ flex:1 1 auto; min-width:0; }
.pcard__coords{
  display:flex; flex-direction:column; gap:0.08em;
  font-family:var(--f-mono);
  font-size:clamp(0.9rem,1.05vw,1.05rem);
  font-weight:500; letter-spacing:0.02em;
  color:var(--ivory-050);
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--s-2);
}
.pcard__coords span{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 900ms var(--ease-out);
}
.pcard[data-active] .pcard__coords span{ clip-path:inset(0 0 0 0); }
.pcard[data-active] .pcard__coords span:nth-child(2){ transition-delay:110ms; }
.pcard__place{
  font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:rgba(247,244,238,.8);
  margin-bottom:0.5em;
}
.pcard__plot{ font-size:var(--t-xs); letter-spacing:0.08em; }
.pcard__mark{ flex:0 0 auto; }

/* survey mark, on navy */
.sitemark{ width:clamp(58px,4.4vw,74px); height:auto; overflow:visible; }
.sitemark__ring{
  fill:none; stroke:rgba(247,244,238,.30); stroke-width:1;
  transform-origin:60px 60px; transform:scale(0.2); opacity:0;
  transition:transform 1100ms var(--ease-out), opacity 700ms var(--ease-out);
  transition-delay:calc(var(--i) * 90ms + 120ms);
}
.pcard[data-active] .sitemark__ring{ transform:scale(1); opacity:1; }
.sitemark__cross{
  stroke:rgba(247,244,238,.42); stroke-width:1;
  stroke-dasharray:30; stroke-dashoffset:30;
  transition:stroke-dashoffset 900ms var(--ease-out) 380ms;
}
.pcard[data-active] .sitemark__cross{ stroke-dashoffset:0; }
.sitemark__dot{
  fill:var(--ivory-050); opacity:0;
  transform:scale(0.4); transform-origin:60px 60px;
  transition:opacity 500ms var(--ease-out) 660ms, transform 700ms var(--ease-out) 660ms;
}
.pcard[data-active] .sitemark__dot{ opacity:1; transform:scale(1); }

/* characteristics — back in the panel now the coordinates moved out */
.pcard__chars{ margin-bottom:var(--s-4); }
.pcard__char{
  display:grid; grid-template-columns:7.5em 1fr; gap:var(--s-3);
  padding:0.42em 0;
  border-bottom:1px solid rgba(247,244,238,.12);
  font-size:var(--t-sm);
}
.pcard__char dt{ color:rgba(247,244,238,.5); font-family:var(--f-mono); font-size:var(--t-xs); }
.pcard__char dd{ margin:0; color:rgba(247,244,238,.86); }

/* price + reserve */
.pcard__foot{ margin-top:auto; padding-top:var(--s-5); }
.pcard__price{ display:flex; flex-direction:column; gap:0.3em; margin-bottom:var(--s-4); }
.pcard__price-v{
  font-size:clamp(1.5rem,2.1vw,2rem);
  line-height:1; color:var(--ivory-050);
  font-variant-numeric:tabular-nums lining-nums;
  /* the number never animates */
}

/* long thin arrow CTA, after the reference */
.pcard__cta{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); width:100%;
  padding:0.95em 0;
  font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--ivory-050);
  border-top:1px solid rgba(247,244,238,.28);
  border-bottom:1px solid rgba(247,244,238,.28);
  transition:color var(--d-2) var(--ease-out);
}
.pcard__cta svg{
  width:46px; height:8px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1;
  transition:transform var(--d-3) var(--ease-out);
}
.pcard__cta::before{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:var(--ivory-050);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--d-3) var(--ease-out);
}
.pcard__cta:hover svg,.pcard__cta:focus-visible svg{ transform:translateX(6px); }
.pcard__cta:hover::before,.pcard__cta:focus-visible::before{ transform:scaleX(1); }

/* ============================================================
   PANEL FOOT — arrows, index numeral, project index
   ============================================================ */
.pnav{
  flex:0 0 auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-4);
  padding-top:var(--s-5);
}
.pnav__arrows{ display:flex; gap:var(--s-3); }
.pnav__btn{
  width:52px; height:34px;
  display:grid; place-items:center;
  border:1px solid rgba(247,244,238,.28);
  color:rgba(247,244,238,.78);
  transition:border-color var(--d-2) var(--ease-out),
             color var(--d-2) var(--ease-out),
             background-color var(--d-2) var(--ease-out);
}
.pnav__btn svg{ width:26px; height:10px; fill:none; stroke:currentColor; stroke-width:1; }
.pnav__btn:hover,.pnav__btn:focus-visible{
  background:var(--ivory-050); border-color:var(--ivory-050); color:var(--navy-800);
}
.pnav__btn:active{ transform:translateY(1px); }

.pnav__count{
  display:flex; align-items:baseline; gap:0.12em;
  font-family:var(--f-display);
  font-size:clamp(2.6rem,4.4vw,4rem);
  line-height:0.8;
  color:var(--ivory-050);
  font-variant-numeric:tabular-nums lining-nums;
}
.pnav__star{ font-size:0.4em; color:rgba(247,244,238,.5); }


/* Clip the photograph to the disc even on Safari's compositing path. */
.pdisc{clip-path:circle(50%); isolation:isolate;}
.pnav__btn{min-height:44px;}
.collindex__b{min-height:44px;}
@media (prefers-reduced-motion:reduce){
 .pdisc__img[data-on]{-webkit-mask-image:none;mask-image:none;}
}