/* =========================================================
   SHARED SINGLE PROJECT
   Used by BOTH Work items and Experiment items.
   Change this file once -> both page types change.
   ========================================================= */

:root{
  --single-ink:#111;
  --single-soft:rgba(17,17,17,.48);
  --single-line:rgba(17,17,17,.28);
  --single-sidebar-width:min(245px,20vw);
  --single-viewport-left:min(25vw,350px);
  --single-panel-gap:40px;
  --single-info-height:238px;
}

*{box-sizing:border-box}

html,
body{
  margin:0;
  color:var(--single-ink);
  font-family:Arial,Helvetica,sans-serif;
  scrollbar-width:none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

body{
  min-height:520vh;
  animation:singlePageEnter 320ms cubic-bezier(.22,.72,.18,1) both;
}

.single-scroll-spacer{
  height:520vh;
  pointer-events:none;
}

/* Visible project canvas stays fixed while page scroll drives horizontal movement. */
.single-shell{
  position:fixed;
  inset:8px;
  overflow:hidden;
  z-index:10;
}

.single-info{
  position:absolute;
  left:16px;
  top:84px;
  width:var(--single-sidebar-width);
  height:var(--single-info-height);
  z-index:30;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.22,.72,.18,1);
}

.single-info.is-changing{
  opacity:0;
  transform:translateY(-4px);
}

.single-counter{
  margin-bottom:12px;
  font-size:12px;
  color:var(--single-soft);
}

.single-title{
  margin:0 0 18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  line-height:.98;
  font-weight:400;
  letter-spacing:-.025em;
}

.single-tags,
.single-place{
  font-size:12px;
  line-height:1.35;
}

.single-tags{
  padding-bottom:9px;
  border-bottom:1px solid var(--single-line);
}

.single-place{
  padding-top:8px;
}


/* Other items list */
.single-list{
  position:absolute;
  left:16px;
  top:auto;
  bottom:24px;
  width:var(--single-sidebar-width);
  height:auto;
  z-index:30;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}

.single-list::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.single-list-item{
  border-bottom:1px solid rgba(17,17,17,.10);
  transition:border-color 180ms ease;
}

.single-list-head{
  display:grid;
  grid-template-columns:48px 1fr;
  align-items:baseline;
}

.single-list-number{
  font-size:10px;
  color:var(--single-soft);
  opacity:.58;
  transition:opacity 180ms ease,color 180ms ease;
}

.single-list-button{
  appearance:none;
  width:100%;
  margin:0;
  padding:8px 0 9px;
  border:0;
  background:transparent;
  color:var(--single-ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1;
  font-weight:400;
  text-align:left;
  cursor:pointer;
  opacity:.24;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.22,.72,.18,1);
}

.single-list-button:hover,
.single-list-button:focus-visible{
  opacity:1;
  transform:none;
  outline:none;
}

.single-list-item:hover .single-list-number{
  opacity:1;
  color:var(--single-ink);
}

.single-list-item.is-active .single-list-button{
  opacity:.72;
}

.single-list-item.is-active .single-list-number{
  opacity:.82;
  color:var(--single-ink);
}

.single-list-detail{
  display:grid;
  grid-template-rows:0fr;
  padding:0 0 0 48px;
  opacity:0;
  transition:
    grid-template-rows 260ms cubic-bezier(.22,.72,.18,1),
    opacity 180ms ease,
    padding 260ms cubic-bezier(.22,.72,.18,1);
}

.single-list-detail > div{overflow:hidden}

.single-list-meta{
  padding-bottom:8px;
  font-size:10px;
  line-height:1.4;
  color:var(--single-soft);
}

.single-list-item:hover .single-list-detail,
.single-list-button:focus-visible + .single-list-detail{
  grid-template-rows:1fr;
  opacity:1;
}

.single-list-item:hover{
  border-bottom-color:rgba(17,17,17,.22);
}

/* Horizontal story */
.single-viewport{
  position:absolute;
  left:var(--single-viewport-left);
  right:0;
  top:58px;
  bottom:0;
  overflow:hidden;
}

.single-track{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:var(--single-panel-gap);
  padding:38px 58px 38px 26px;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.single-panel{
  flex:0 0 auto;
}

.single-image-panel{
  height:calc(100vh - 146px);
  min-height:470px;
  width:auto;
  aspect-ratio:var(--single-image-ratio, auto);
  margin:0;
  overflow:hidden;
}

.single-image-panel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.single-text-panel{
  width:min(420px,32vw);
  padding:0 8px;
}

.single-eyebrow{
  margin-bottom:18px;
  font-size:11px;
  color:var(--single-soft);
  text-transform:uppercase;
}

.single-text-panel h2{
  margin:0 0 20px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
  line-height:1.05;
  font-weight:400;
}

.single-text-panel p{
  margin:0;
  max-width:390px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px;
  line-height:1.6;
}

.single-next{
  width:240px;
  padding-right:30px;
}

.single-next a{
  color:inherit;
  text-decoration:none;
  font-size:12px;
}

.single-next .arrow{
  display:inline-block;
  transition:transform 220ms cubic-bezier(.22,.72,.18,1);
}

.single-next a:hover .arrow{
  transform:translateX(4px);
}

.single-progress{
  position:absolute;
  left:var(--single-viewport-left);
  right:0;
  bottom:24px;
  height:1px;
  background:rgba(17,17,17,.12);
  z-index:35;
}

.single-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--single-ink);
}

body.is-leaving{
  opacity:0;
  transition:opacity 240ms ease;
  animation:none;
}

@keyframes singlePageEnter{
  from{opacity:0}
  to{opacity:1}
}




/* Custom sidebar scrollbar shared by Work + Experiments */
.single-list-scrollbar{
  position:absolute;
  left:calc(16px + var(--single-sidebar-width) + 9px);
  top:auto;
  bottom:24px;
  width:8px;
  z-index:36;
  display:none;
  cursor:pointer;
}

.single-list-scrollbar.is-visible{
  display:block;
}

.single-list-scrollbar::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%) scaleX(.55);
  transform-origin:center;
  background:rgba(17,17,17,.13);
}

.single-list-scrollbar-thumb{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  min-height:26px;
  border-radius:999px;
  transform:translateX(-50%);
  background:rgba(17,17,17,.48);
  cursor:grab;
  transition:
    width 160ms ease,
    background 160ms ease;
}

.single-list-scrollbar-thumb:hover,
.single-list-scrollbar-thumb:focus-visible{
  width:3px;
  background:rgba(17,17,17,.70);
  outline:none;
}

.single-list-scrollbar-thumb.is-dragging{
  cursor:grabbing;
  width:3px;
  background:rgba(17,17,17,.78);
}


/* Subtle first-interaction cue for each single project/experiment */
.single-scroll-hint{
  position:absolute;
  right:26px;
  bottom:8px;
  z-index:42;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
  opacity:0;
  transform:translateX(5px);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(.22,.72,.18,1);
}

.single-scroll-hint.is-visible{
  opacity:.54;
  transform:translateX(0);
}

.single-scroll-hint-inner{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--single-ink);
}

.single-scroll-hint-arrow{
  display:inline-block;
  font-size:12px;
  transform:translateX(0);
  animation:singleScrollHintNudge 1.2s ease-in-out infinite;
}

@keyframes singleScrollHintNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(5px)}
}

/* Mobile is kept functional for now; desktop remains the design priority. */
@media(max-width:900px){
  body{min-height:auto}

  .single-scroll-spacer{display:none}

  .single-shell{
    position:relative;
    inset:auto;
    min-height:100vh;
    overflow:visible;
  }

  .single-info{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    height:auto;
    padding:96px 20px 18px;
  }

  .single-list{display:none}
  .single-list-scrollbar{display:none !important}
  .single-scroll-hint{display:none !important}

  .single-viewport{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    overflow:visible;
  }

  .single-track{
    position:relative;
    height:auto;
    display:block;
    padding:0 20px 28px;
    transform:none !important;
  }

  .single-panel{margin-bottom:22px}

  .single-image-panel{
    height:auto;
    min-height:0;
  }

  .single-image-panel img,
  .single-image-panel.square img,
  .single-image-panel.wide img,
  .single-image-panel.portrait img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
  }

  .single-text-panel{
    width:auto;
    padding:18px 0;
  }

  .single-progress{display:none}
}


@media (prefers-reduced-motion: reduce){
  .single-scroll-hint-arrow{
    animation:none !important;
  }
}

/* Keep the hovered single-page menu row anchored under the pointer.
   Expanding its detail may push later rows down, but the hovered row itself
   must not be scroll-anchored away by the browser. */
.single-list{
  overflow-anchor:none;
}
.single-list-item,
.single-list-head,
.single-list-button{
  overflow-anchor:none;
}

/* Single-page sidebar: fixed rows, no expanding hover detail */
.single-list-item{
  min-height:38px;
}
.single-list-head{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  min-height:38px;
}
.single-list-button{
  padding:8px 0 9px;
  transform:none !important;
  font-weight:400;
}
.single-list-button:hover,
.single-list-button:focus-visible{
  opacity:1;
  font-weight:400;
  transform:none !important;
}
.single-list-item:hover .single-list-number{
  opacity:1;
}
.single-list-year{
  padding-left:10px;
  font-size:8px;
  line-height:1;
  letter-spacing:.02em;
  color:var(--single-soft);
  opacity:.55;
  white-space:nowrap;
}
.single-list-item:hover .single-list-year,
.single-list-item.is-active .single-list-year{
  opacity:.8;
}
.single-list-detail{
  display:none !important;
}


.single-collaborators{
  display:block;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--single-line);
}

.single-collaborator-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:8px;
  padding:2px 0;
  font-size:12px;
  line-height:1.35;
}

.single-collaborator-role{
  color:var(--single-soft);
}


.single-collaborator-row a{
  color:inherit;
  text-decoration:none;
}
.single-collaborator-row a:hover,
.single-collaborator-row a:focus-visible{
  text-decoration:underline;
  text-underline-offset:2px;
}


/* Shared editorial project/experiment details overlay */
.single-read-more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:18px;
  padding:0 0 4px;
  border:0;
  border-bottom:1px solid currentColor;
  border-radius:0;
  background:transparent;
  font:inherit;
  font-size:12px;
  color:var(--single-ink);
  cursor:pointer;
}
.single-read-more .ui-arrow{vertical-align:middle;}
.single-read-more:hover,.single-read-more:focus-visible{opacity:.58}
.single-read-more[hidden],.single-detail-overlay[hidden]{display:none !important}
.single-detail-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  justify-content:flex-end;
}
.single-detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,10,.28);
}
.single-detail-dialog{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(570px,45vw);
  height:100%;
  padding:clamp(24px,4vw,56px);
  padding-top:max(28px,env(safe-area-inset-top));
  background:var(--site-bg,#d8d8d8);
  color:var(--single-ink);
  box-shadow:-12px 0 36px rgba(0,0,0,.075);
  overflow-y:auto;
  overscroll-behavior:contain;
  outline:none;
}
.single-detail-close{
  align-self:flex-end;
  padding:4px 0 8px;
  border:0;
  background:none;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.single-detail-close:hover,.single-detail-close:focus-visible{opacity:.6}
.single-detail-content{padding:clamp(32px,6vh,78px) 0 40px}
.single-detail-text{width:100%;padding:0;margin:0 0 54px}
.single-detail-text:last-child{margin-bottom:0}
.single-detail-text h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.12;margin:0 0 20px}
.single-detail-text p{font-family:Georgia,"Times New Roman",serif;font-size:clamp(17px,1.5vw,20px);line-height:1.65;white-space:pre-wrap;margin:0}
.single-details-open{overflow:hidden}
@media(max-width:900px){
  .single-detail-dialog{width:min(100%,620px);padding:24px 22px;padding-top:max(24px,env(safe-area-inset-top));}
  .single-detail-content{padding-top:32px}
  .single-read-more{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  .single-detail-dialog{scroll-behavior:auto}
}