/* JOY'S BOX V24 — archive reel, detail study, refined metrics */
:root{
  --v24-paper:#f0ede4;
  --v24-ink:#15130f;
  --v24-gold:#a9852b;
  --v24-line:rgba(21,19,15,.16);
  --v24-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- AT A GLANCE / METRICS ---------- */
.intro-v24__stats{
  margin-top:clamp(58px,6.5vw,98px)!important;
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  border-top:1px solid var(--v24-line)!important;border-bottom:1px solid var(--v24-line)!important;
  gap:0!important;
}
.intro-v24__stats article{
  position:relative!important;min-height:clamp(190px,16vw,270px)!important;
  padding:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px) clamp(25px,2.5vw,38px)!important;
  border:0!important;border-right:1px solid var(--v24-line)!important;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important;align-items:flex-start!important;
  overflow:hidden!important;background:transparent!important;
}
.intro-v24__stats article:last-child{border-right:0!important}
.intro-v24__stats article::before{
  content:"";position:absolute;inset:auto 0 0;height:0;background:#17140f;
  transition:height .62s var(--v24-ease);z-index:0;
}
.intro-v24__stats article>*{position:relative;z-index:1}
.intro-v24__stats strong{
  grid-column:auto!important;margin:0!important;color:var(--v24-ink)!important;
  font:500 clamp(76px,8vw,128px)/.74 var(--cond)!important;letter-spacing:-.055em!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  transition:color .45s ease,transform .62s var(--v24-ease)!important;
}
.intro-v24__stats span{
  grid-column:auto!important;margin:0!important;max-width:none!important;color:#6e685f!important;
  font:700 8px/1.25 var(--sans)!important;letter-spacing:.18em!important;
  transition:color .45s ease,transform .62s var(--v24-ease)!important;
}
.intro-v24__stats i{
  position:absolute!important;right:22px;top:22px;width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(169,133,43,.7);transition:background .35s ease,transform .55s var(--v24-ease);
}
.intro-v24__stats article:hover::before{height:100%}
.intro-v24__stats article:hover strong{color:#f3efe5!important;transform:translateY(-4px)!important}
.intro-v24__stats article:hover span{color:#cfc7b8!important;transform:translateY(-3px)!important}
.intro-v24__stats article:hover i{background:#c8a64b;transform:scale(1.3)}

/* ---------- PROJECT ARCHIVE / HORIZONTAL REEL ---------- */
.archive-v24{
  --archive-pad:max(var(--pad),28px);
  position:relative;min-height:100svh;padding:clamp(96px,7vw,124px) 0 26px;
  background:#090908;color:#f3efe7;overflow:hidden;isolation:isolate;
}
.archive-v24::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 38vw at 72% 16%,rgba(188,150,62,.08),transparent 72%),linear-gradient(180deg,#0a0a09 0%,#090908 100%);
}
.archive-v24__head{
  position:relative;z-index:2;padding:0 var(--archive-pad);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.38fr);
  gap:clamp(36px,6vw,105px);align-items:end;
}
.archive-v24__kicker{display:block;margin-bottom:17px;color:#c9ad63;font:700 8px/1 var(--sans);letter-spacing:.18em}
.archive-v24__head h2{margin:0;font:600 clamp(82px,10.2vw,165px)/.69 var(--cond);letter-spacing:-.055em;text-transform:uppercase}
.archive-v24__head h2 span,.archive-v24__head h2 i{display:block;font-style:normal}
.archive-v24__head h2 i{color:#c8a64c;font-family:var(--serif);font-weight:400;letter-spacing:-.038em;text-transform:none;line-height:.78}
.archive-v24__note{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.13)}
.archive-v24__note>span{display:block;margin-bottom:14px;color:#d4ba75;font:700 7px/1 var(--sans);letter-spacing:.16em}
.archive-v24__note p{max-width:390px;margin:0 0 16px;color:#918d84;font:500 12px/1.72 var(--sans)}
.archive-v24__viewport{position:relative;z-index:2;margin-top:clamp(42px,4.6vw,70px);overflow:visible}
.archive-v24__track{
  display:flex;gap:clamp(18px,2vw,30px);width:max-content;padding:0 var(--archive-pad);will-change:transform;
}
.archive-v24__card{
  --lift:0px;position:relative;flex:0 0 clamp(580px,63vw,1050px);height:clamp(520px,63vh,760px);
  border-radius:clamp(18px,1.7vw,28px);overflow:hidden;background:#171612;border:1px solid rgba(255,255,255,.12);
  transform:translateY(var(--lift));transition:border-color .45s ease,transform .65s var(--v24-ease);isolation:isolate;
}
.archive-v24__card:nth-child(even){--lift:28px}
.archive-v24__media{position:absolute;inset:0;overflow:hidden}
.archive-v24__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08) 43%,rgba(0,0,0,.84) 100%),linear-gradient(90deg,rgba(0,0,0,.3),transparent 62%)}
.archive-v24__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.02);transform:scale(1.025);transition:transform 1.2s var(--v24-ease),filter .55s ease}
.archive-v24__card::before{
  content:attr(data-index);position:absolute;z-index:3;right:18px;top:-.08em;color:rgba(255,255,255,.09);
  font:600 clamp(120px,15vw,250px)/1 var(--cond);letter-spacing:-.08em;pointer-events:none;
}
.archive-v24__meta{position:absolute;z-index:4;left:clamp(22px,2.7vw,42px);right:clamp(22px,2.7vw,42px);bottom:clamp(22px,2.8vw,42px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:end}
.archive-v24__meta::before{content:"";grid-column:1/-1;height:1px;background:rgba(255,255,255,.25);margin-bottom:4px;transform-origin:left;transform:scaleX(.34);transition:transform .8s var(--v24-ease)}
.archive-v24__meta span{grid-column:1/-1;color:#d7bd77;font:700 7px/1 var(--sans);letter-spacing:.16em}
.archive-v24__meta h3{margin:0;max-width:820px;color:#fff;font:600 clamp(58px,6.7vw,112px)/.73 var(--cond);letter-spacing:-.048em;text-transform:uppercase}
.archive-v24__meta small{align-self:end;max-width:230px;text-align:right;color:rgba(255,255,255,.67);font:700 7px/1.5 var(--sans);letter-spacing:.12em}
.archive-v24__card.is-active{border-color:rgba(210,177,91,.4)}
.archive-v24__card.is-active .archive-v24__media img,.archive-v24__card:hover .archive-v24__media img{transform:scale(1.055);filter:saturate(1) contrast(1.03)}
.archive-v24__card.is-active .archive-v24__meta::before,.archive-v24__card:hover .archive-v24__meta::before{transform:scaleX(1)}
.archive-v24__footer{position:relative;z-index:3;margin:clamp(30px,3vw,48px) var(--archive-pad) 0;display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:20px;color:#77736b;font:700 7px/1 var(--sans);letter-spacing:.15em}
.archive-v24__footer>div{height:1px;background:rgba(255,255,255,.14);overflow:hidden}.archive-v24__footer i{display:block;width:100%;height:100%;background:#c4a253;transform:scaleX(.125);transform-origin:left}
.archive-v24__footer strong{color:#c8ad68;font:700 8px/1 var(--sans);letter-spacing:.15em}

/* ---------- DETAILS / ASYMMETRIC DETAIL STUDY ---------- */
.details-v24{position:relative;padding:clamp(108px,8vw,155px) var(--pad) clamp(126px,10vw,185px);background:var(--v24-paper);color:var(--v24-ink);overflow:hidden}
.details-v24::before{content:"DETAILS";position:absolute;left:-.035em;top:.06em;color:rgba(21,19,15,.028);font:700 31vw/.8 var(--cond);letter-spacing:-.075em;pointer-events:none;white-space:nowrap}
.details-v24__head{position:relative;z-index:2}
.details-v24__title{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.36fr);gap:clamp(42px,7vw,112px);align-items:end;margin-top:clamp(30px,3vw,46px)}
.details-v24__title h2{margin:0;color:var(--v24-ink);font:600 clamp(78px,9.7vw,158px)/.73 var(--cond);letter-spacing:-.055em;text-transform:uppercase}
.details-v24__title h2 i{font-family:var(--serif);font-weight:400;font-style:italic;color:#9e7c27;text-transform:none;letter-spacing:-.038em}
.details-v24__title p{justify-self:end;max-width:390px;margin:0 0 8px;color:#59544b;font:500 13px/1.72 var(--sans)}
.details-v24__mosaic{position:relative;z-index:2;margin-top:clamp(70px,7vw,110px);display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,minmax(44px,5.4vw));gap:clamp(12px,1.25vw,20px)}
.detail-fragment-v24{position:relative;margin:0;overflow:hidden;background:#1a1814;border-radius:clamp(13px,1.2vw,20px);isolation:isolate;cursor:pointer;box-shadow:0 18px 46px rgba(33,26,13,.08)}
.detail-fragment-v24--a{grid-column:1/7;grid-row:1/7}.detail-fragment-v24--b{grid-column:8/13;grid-row:1/5}.detail-fragment-v24--c{grid-column:7/11;grid-row:5/10}.detail-fragment-v24--d{grid-column:1/5;grid-row:8/13}.detail-fragment-v24--e{grid-column:5/9;grid-row:10/13}.detail-fragment-v24--f{grid-column:10/13;grid-row:10/13}
.detail-fragment-v24 img{width:100%;height:calc(100% + 34px);object-fit:cover;transform:translateY(var(--py,0px)) scale(1.025);filter:saturate(.88) contrast(1.02);transition:transform .9s var(--v24-ease),filter .5s ease}
.detail-fragment-v24::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(9,8,6,.78) 100%);opacity:.72;transition:opacity .45s ease}
.detail-fragment-v24 figcaption{position:absolute;z-index:2;left:clamp(16px,1.8vw,26px);right:clamp(16px,1.8vw,26px);bottom:clamp(15px,1.7vw,24px);display:grid;grid-template-columns:auto 1fr;gap:4px 13px;align-items:end;color:#fff;transform:translateY(5px);transition:transform .55s var(--v24-ease)}
.detail-fragment-v24 figcaption span{grid-row:1/3;color:#d0ad54;font:700 7px/1 var(--sans);letter-spacing:.14em;padding-bottom:2px}
.detail-fragment-v24 figcaption b{font:600 clamp(28px,3vw,48px)/.8 var(--cond);letter-spacing:-.03em}
.detail-fragment-v24 figcaption small{font:700 6.5px/1.25 var(--sans);letter-spacing:.13em;color:rgba(255,255,255,.66);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .55s var(--v24-ease)}
.detail-fragment-v24:hover img{transform:translateY(var(--py,0px)) scale(1.07);filter:saturate(1) contrast(1.03)}
.detail-fragment-v24:hover::after{opacity:.88}.detail-fragment-v24:hover figcaption{transform:none}.detail-fragment-v24:hover figcaption small{opacity:1;transform:none}
.details-v24__stamp{grid-column:11/13;grid-row:5/9;align-self:center;justify-self:center;width:min(100%,180px);aspect-ratio:1;border:1px solid rgba(21,19,15,.18);border-radius:50%;display:grid;place-content:center;text-align:center;gap:8px;transform:rotate(-7deg);color:#635d54}
.details-v24__stamp span,.details-v24__stamp small{font:700 6.5px/1 var(--sans);letter-spacing:.18em}.details-v24__stamp b{font:600 clamp(24px,2.2vw,34px)/.82 var(--cond);letter-spacing:-.03em;color:#26221d}

/* Footer copy: enough width for the new phrase without clipping. */
.closing-v17__content h2{max-width:min(1450px,94vw)}
.closing-v17__content h2 i{white-space:nowrap}

@media (max-width:980px){
  .intro-v24__stats{grid-template-columns:1fr 1fr!important}.intro-v24__stats article:nth-child(2){border-right:0!important}.intro-v24__stats article:nth-child(-n+2){border-bottom:1px solid var(--v24-line)!important}
  .archive-v24{padding-top:100px;min-height:auto}.archive-v24__head{grid-template-columns:1fr;gap:26px}.archive-v24__note{max-width:470px}.archive-v24__viewport{overflow-x:auto;scrollbar-width:none;padding-bottom:8px}.archive-v24__viewport::-webkit-scrollbar{display:none}.archive-v24__track{padding-right:var(--archive-pad)}.archive-v24__card{flex-basis:min(82vw,760px);height:66svh;min-height:520px}.archive-v24__footer{display:none}
  .details-v24__title{grid-template-columns:1fr;gap:28px}.details-v24__title p{justify-self:start}.details-v24__mosaic{grid-template-rows:repeat(13,minmax(40px,7vw))}.detail-fragment-v24--a{grid-column:1/8;grid-row:1/7}.detail-fragment-v24--b{grid-column:8/13;grid-row:1/5}.detail-fragment-v24--c{grid-column:7/13;grid-row:5/10}.detail-fragment-v24--d{grid-column:1/7;grid-row:7/12}.detail-fragment-v24--e{grid-column:7/10;grid-row:10/14}.detail-fragment-v24--f{grid-column:10/13;grid-row:10/14}.details-v24__stamp{display:none}
}
@media (max-width:700px){
  .intro-v24__stats{margin-top:48px!important}.intro-v24__stats article{min-height:145px!important;padding:22px 16px!important}.intro-v24__stats strong{font-size:62px!important}.intro-v24__stats span{font-size:7px!important;letter-spacing:.14em!important}.intro-v24__stats i{right:14px;top:14px}
  .archive-v24{--archive-pad:18px;padding-top:90px}.archive-v24__head h2{font-size:20vw;line-height:.72}.archive-v24__card{flex-basis:88vw;height:67svh;min-height:500px;border-radius:18px}.archive-v24__card:nth-child(even){--lift:0px}.archive-v24__meta{left:18px;right:18px;bottom:20px;grid-template-columns:1fr}.archive-v24__meta h3{font-size:14.4vw}.archive-v24__meta small{text-align:left;max-width:none}.archive-v24__card::before{font-size:34vw;right:9px}
  .details-v24{padding-left:18px;padding-right:18px}.details-v24__title h2{font-size:18vw}.details-v24__mosaic{display:flex;flex-direction:column;gap:14px;margin-top:54px}.detail-fragment-v24{height:72vw;min-height:270px}.detail-fragment-v24:nth-child(2n){height:58vw}.detail-fragment-v24 img{height:calc(100% + 24px)}.detail-fragment-v24 figcaption small{opacity:.72;transform:none}
  .closing-v17__content h2 i{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.archive-v24__track{transform:none!important}.detail-fragment-v24 img{transform:none!important;transition:none!important}.intro-v24__stats article::before{display:none}}