/* R32.7 — Frozen shared Reading Room row contract.
   One geometry for every story property; no property-specific rescue rules. */
.reading-room .shelf-items>.shelf-spine-with-thumb,
.stills-reading-room .shelf-items>.stills-spine{
  display:grid;
  grid-template-columns:52px 3.25rem minmax(0,1fr) auto;
  grid-template-rows:auto;
  grid-template-areas:none;
  column-gap:.9rem;row-gap:0;align-items:start;width:100%;min-width:0;
}
.reading-room .shelf-items>.shelf-spine-with-thumb .shelf-thumb-frame,
.stills-reading-room .shelf-items>.stills-spine .stills-thumb-frame{
  width:48px;inline-size:48px;min-width:48px;max-width:48px;max-height:72px;
  justify-self:start;align-self:start;grid-column:1;grid-row:1;
}
.reading-room .shelf-items>.shelf-spine-with-thumb .spine-num,
.stills-reading-room .shelf-items>.stills-spine .spine-num{
  grid-column:2;grid-row:1;align-self:start;min-width:0;padding-top:0;white-space:nowrap;
}
.reading-room .shelf-items>.shelf-spine-with-thumb .spine-copy,
.stills-reading-room .shelf-items>.stills-spine .spine-copy{
  grid-column:3;grid-row:1;align-self:start;min-width:0;width:auto;
}
.reading-room .shelf-items>.shelf-spine-with-thumb .spine-copy h3,
.stills-reading-room .shelf-items>.stills-spine .spine-copy h3{margin-top:0}
.reading-room .shelf-items>.shelf-spine-with-thumb .spine-action,
.stills-reading-room .shelf-items>.stills-spine .spine-action{
  grid-column:4;grid-row:1;align-self:start;justify-self:end;white-space:nowrap;width:auto;margin:0;text-align:right;
}
@media(max-width:640px){
  .reading-room .shelf-items>.shelf-spine-with-thumb,
  .stills-reading-room .shelf-items>.stills-spine{
    grid-template-columns:44px 3.25rem minmax(0,1fr);
    grid-template-rows:auto auto;column-gap:.7rem;row-gap:.4rem;align-items:start;
  }
  .reading-room .shelf-items>.shelf-spine-with-thumb .shelf-thumb-frame,
  .stills-reading-room .shelf-items>.stills-spine .stills-thumb-frame{
    width:40px;inline-size:40px;min-width:40px;max-width:40px;max-height:60px;grid-column:1;grid-row:1 / span 2;
  }
  .reading-room .shelf-items>.shelf-spine-with-thumb .spine-num,
  .stills-reading-room .shelf-items>.stills-spine .spine-num{grid-column:2;grid-row:1;align-self:start;padding-top:0}
  .reading-room .shelf-items>.shelf-spine-with-thumb .spine-copy,
  .stills-reading-room .shelf-items>.stills-spine .spine-copy{grid-column:3;grid-row:1;min-width:0}
  .reading-room .shelf-items>.shelf-spine-with-thumb .spine-action,
  .stills-reading-room .shelf-items>.stills-spine .spine-action{grid-column:3;grid-row:2;justify-self:start;text-align:left;white-space:normal;margin-top:.15rem}
}

/* Season-shelf collapse (R-40–R-46, server-side as of 2026-10-24) — additive
   only, does not touch the frozen row geometry above. Once a property has
   three or more publicly commenced seasons, the server renders every season
   older than the current and immediately-previous commenced one as a native
   <details>/<summary> element instead of a plain <div>/<header>; every
   released story stays reachable in the DOM either way, this only changes
   what's expanded by default. Script-free: no JS needed for the toggle. */
details.shelf{display:block}
details.shelf>summary.shelf-header{
  cursor:pointer;list-style:none;display:flex;align-items:center;
}
details.shelf>summary.shelf-header::-webkit-details-marker{display:none}
details.shelf>summary.shelf-header::after{
  content:"+";margin-left:auto;font-size:.95rem;line-height:1;
  color:var(--ink-soft,#6b5f47);border:1px solid var(--line,rgba(44,37,25,.16));
  border-radius:3px;padding:.15rem .5rem;
}
details.shelf[open]>summary.shelf-header::after{content:"\2212"}
details.shelf>summary.shelf-header:hover::after,
details.shelf>summary.shelf-header:focus-visible::after{
  border-color:var(--gold,#b2843e);color:var(--ink,#2c2519);
}