/* Fifty: the pinned card beside a scrolling list of stories (.fifty), and the
   river items that make up the list (.river-item). --mirror puts the list left
   and the card right; --inverse sets light type for the stone ground.
   Behaviour in assets/js/main.js ([data-fifty]).
*/

.fifty{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.fifty__sticky{ position:relative; }
@media (min-width:1100px){
  .fifty{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:64px; }
  .fifty__sticky{
    position:sticky;
    top:calc(var(--nav-h) + 24px);
    height:calc(100vh - var(--nav-h) - 56px);
    max-height:700px; min-height:520px;
    align-self:start;            /* stretch would defeat sticky */
    display:flex; flex-direction:column;
  }
  .fifty__sticky > .ocard{ flex:1; box-shadow:var(--shadow-card); }
}

/* counter + hairline riding on the pinned card */
.fifty__count{
  position:absolute; left:30px; top:26px; z-index:3;
  display:flex; align-items:baseline; gap:7px;
  font:500 11px/1 var(--sans); letter-spacing:.16em;
  color:var(--white);
  text-shadow:0 1px 14px rgba(10,10,10,.55);
}
.fifty__count b{
  font-family:var(--serif); font-weight:400; font-size:26px;
  color:#fff; letter-spacing:0;
}
.fifty__count s{ text-decoration:none; opacity:.5; }
.fifty__progress{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:rgba(255,255,255,.16);
}
.fifty__progress > i{
  display:block; height:100%; width:0%; background:var(--gold-lift);
  box-shadow:0 0 12px rgba(198,169,110,.6);
  transition:width .14s linear;
}

/* the half that scrolls */
.fifty__river{ display:flex; flex-direction:column; }
.river-item{
  position:relative;
  display:grid; grid-template-columns:248px minmax(0,1fr); gap:28px; align-items:center;
  padding:32px 0; border-bottom:1px solid var(--hair);
  transition:opacity .5s var(--ease);
}
.river-item:first-child{ padding-top:0; }
.river-item:last-child{ border-bottom:0; }
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .fifty__river:hover .river-item{ opacity:1; }
  .river-item{ opacity:.52; }
  .fifty--inverse .river-item{ opacity:.64; }
  /* .52 washes out on stone */
  .river-item.is-active{ opacity:1; }
  .river-item.is-active::before{
    content:""; position:absolute; left:-22px; top:50%; width:2px; height:34px;
    background:var(--gold); transform:translateY(-50%);
  }
  /* gold is ~1.05:1 on the stone ground — the marker has to be white there */
  .fifty--inverse .river-item.is-active::before{ background:#fff; }
}
.river-item__fig{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius); background:var(--paper-deep);
}
.river-item__fig img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.river-item:hover .river-item__fig img{ transform:scale(1.07); }
.river-item__rubric{
  font:600 10px/1 var(--sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--label);
}
.river-item__hed{
  font-family:var(--serif); font-weight:600; font-size:30px; line-height:30px;
  letter-spacing:-.005em; color:var(--text);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--ease-out);
}
h3:has(> .river-item__hed){ margin-top:10px; font-size:30px; line-height:30px; }

/* the h3's own line box would otherwise hold it open */
.river-item:hover .river-item__hed{ background-size:100% 1px; }
.river-item__dek{ font:400 var(--fs-body)/var(--lh-body) var(--sans); color:var(--text); margin-top:9px; letter-spacing:var(--ls-body); }
.river-item__meta{
  font:400 11px/1 var(--sans); letter-spacing:.04em; color:var(--label); margin-top:12px;
}

/* inverse variant — transparent rows, light type, for the stone ground.
   Ratios lifted off the base values so they hold against a mid-tone. */
.fifty--inverse .river-item{ border-bottom-color:var(--hair-light); }
.fifty--inverse .river-item__rubric{ color:var(--white); }
.fifty--inverse .river-item__hed{ color:#fff; }
.fifty--inverse .river-item__dek{ color:var(--white); }
.fifty--inverse .river-item__meta{ color:var(--white); }
@media (min-width:1100px){
  .fifty--mirror{ grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr); }
}
@media (min-width:1600px){
  .fifty--mirror{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); }
}
.fifty--mirror .river-item.is-active::before{ left:auto; right:-26px; }
@media (min-width:1600px){
  .fifty{ grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:72px; }
  .fifty__sticky{ max-height:clamp(700px,78vh,840px); }
  .river-item{ grid-template-columns:300px minmax(0,1fr); gap:34px; }
}
@media (max-width:1099px){
  .fifty{ grid-template-columns:1fr; gap:36px; }
  .river-item{ grid-template-columns:300px minmax(0,1fr); gap:32px; }
  .fifty__sticky{ height:auto; }
  .fifty__sticky > .ocard{ aspect-ratio:4/5; box-shadow:var(--shadow-card); }
  .fifty__progress,.fifty__count{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .river-item{ opacity:1 !important; }
}
@media (max-width:720px){
  .river-item{ grid-template-columns:var(--thumb-w) minmax(0,1fr); gap:18px; padding:22px 0; }
  .river-item__hed,h3:has(> .river-item__hed){ font-size:22px; line-height:25px; }
  .river-item__dek{ display:none; }
}