.page { position:relative; z-index:1; min-height:100lvh; display:flex; flex-direction:column; }
.page-main { flex:1;
  padding:calc(var(--h-topbar) + clamp(16px,4vh,40px)) var(--space-4)
          calc(var(--space-12) + var(--toolbar-gap) + env(safe-area-inset-bottom));
  display:flex; justify-content:center; }
.sheet.static-sheet { position:static; margin:0; align-self:auto; max-height:none; animation:none; display:block; }
.static-sheet .sheet-body { overflow:visible; }
.rp-brand { text-decoration:none; color:inherit; }
.rp-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-user-drag:none; user-drag:none; }

.back-all { display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:13px; font-weight:var(--w-medium); color:var(--color-accent); margin-bottom:var(--space-3); }
.back-all:hover { text-decoration:underline; }
.crumbs { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; color:var(--color-text-secondary); margin-bottom:var(--space-6); }
.crumbs .sep { color:var(--color-text-disabled); }

.sheet-credit { font-size:13px; color:var(--color-text-secondary); margin:var(--space-3) 0 0; }
.sheet-credit b { color:var(--color-text-primary); font-weight:var(--w-medium); }

/* Where the review was published -- a dateline above the prose, not a
   footnote below it. Its own element rather than a first paragraph, so it is
   not read as the reviewer's opening sentence, and quieter than the body.

   NO UNDERLINE, AND THE WHOLE LINE WARMS ON HOVER -- the same effect the
   artist heading uses (.sheet-artist-link in styles.css). A line that reads
   as a note and turns out to be clickable, rather than one shouting that it
   is a link. */
.sheet-source { margin:0 0 var(--space-6); font-size:13px;
                color:var(--color-text-secondary); }
/* "(archived copy)" -- a qualification of the link, not part of the name, so
   it stays at the sentence's weight while the publication is picked out. */
.sheet-source-note { color:inherit; }
.sheet-source a { color:inherit; text-decoration:none; border-radius:4px;
                  transition:color var(--dur-fast) var(--ease); }
/* Opus stays picked out of the sentence, exactly as the reviewer's name is in
   the credit line above -- same weight, same colour, so the two read as one
   family of note rather than two decisions. */
.sheet-source b { color:var(--color-text-primary); font-weight:var(--w-medium); }
.sheet-source a:hover, .sheet-source a:hover b { color:var(--color-accent-pressed); }
.sheet-source a:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-accent-subtle); }
@media (prefers-color-scheme: dark) {
  .sheet-source a:hover, .sheet-source a:hover b { color:var(--color-accent-hover); }
}

/* Replaces the modal's close button: somewhere to go next. */
.explore { margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--color-border-subtle); }
.explore h2 { margin:var(--space-6) 0 var(--space-3); font-size:13px; font-weight:var(--w-semibold);
  letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-tertiary); }
.explore h2:first-child { margin-top:0; }
.xlink { display:flex; gap:var(--space-3); align-items:flex-start; text-decoration:none; color:inherit;
  padding:var(--space-3); margin:0 calc(var(--space-3) * -1);
  border-radius:var(--radius-glass-md); transition:background var(--dur-fast) var(--ease); }
.xlink:hover { background:var(--color-bg-inset); }
.x-thumb { flex:none; width:72px; height:72px; border-radius:var(--radius-glass-sm);
  overflow:hidden; background:var(--color-bg-inset); }
/* A cropped cover is positioned against its box, so the box has to be one.
   Only when cropped: every other thumbnail keeps the layout it had. */
.x-thumb.is-cropped { position:relative; }
.x-thumb img { width:100%; height:100%; object-fit:cover; display:block;
  -webkit-user-drag:none; user-drag:none; }
.x-text { min-width:0; display:flex; flex-direction:column; gap:3px; }
.x-kicker { font-size:11px; font-weight:var(--w-semibold); letter-spacing:.03em;
  text-transform:uppercase; color:var(--color-accent); }
.x-title { font-size:14px; font-weight:var(--w-medium); color:var(--color-text-primary); }

/* Every card grid on the sheet: six releases, two columns, three rows.
   "Similar sounding releases", "More from ..." and "Also in ..." all use it.
   Reuses .xlink so a card here and a row of "Other coverage" are one object.
   One column under 560px -- two 72px covers plus two lines of text each stop
   fitting well before the sheet does. */
.rgrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-1); }
@media (max-width:560px) { .rgrid { grid-template-columns:1fr; } }
/* THE HOVER HAS TO STAY IN ITS OWN CELL. .xlink carries a negative horizontal
   margin so its background bleeds into the sheet's padding on both sides --
   correct for a single column, and wrong for two, where the left card's
   right-hand bleed is drawn over the right card. So in two columns the bleed
   is kept only on the OUTER edges. That also keeps the covers aligned with the
   section heading above them, which is what the negative left margin was for.
   Scoped to the two-column breakpoint rather than overridden inside the
   one-column one, so nth-child never has to out-specify a plain class. */
@media (min-width:561px) {
  .rgrid .xlink { margin:0; }
  .rgrid .xlink:nth-child(odd)  { margin-left:calc(var(--space-3) * -1); }
  .rgrid .xlink:nth-child(even) { margin-right:calc(var(--space-3) * -1); }
}
.x-album { font-size:13px; line-height:1.4; color:var(--color-text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A card whose release has no cover still needs the 72px box, or its text
   sits flush left and the column stops being a column. */
.rgrid .x-thumb { background:var(--color-bg-inset); }

/* THE COLUMNS ARE ONLY EQUAL IF THE CARDS CAN SHRINK. A grid item defaults to
   min-width:auto, which means it refuses to go narrower than its content -- so
   one long title ("Live At Cornerstone 2000: Gene Eugene / Adam Again") pushed
   its column wide and the two columns stopped lining up between sections. The
   same missing min-width is what let the text run out of the card instead of
   being cut. One fix, both symptoms. */
.rgrid .xlink { min-width:0; }
.rgrid .x-text { min-width:0; }
.rgrid .x-title,
.rgrid .x-album { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.x-snip { font-size:13px; line-height:1.55; color:var(--color-text-secondary);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; max-height:calc(1.55em * 2); }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip { font-size:12px; text-decoration:none; color:var(--color-text-secondary);
  background:var(--color-bg-inset); border-radius:var(--radius-pill); padding:5px 12px;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.chip:hover { background:var(--color-accent-subtle); color:var(--color-accent-pressed); }

.sheet-facts .link, .sheet-tags .tag-link, .crumbs a { text-decoration:none; }
.sheet-facts .link b { color:var(--color-accent); }
.sheet-facts .link:hover b { text-decoration:underline; }
.crumbs a { color:var(--color-text-secondary); }
.crumbs a:hover { color:var(--color-accent); text-decoration:underline; }

.fb-title { font-size:20px; font-weight:var(--w-semibold); letter-spacing:-.01em; margin:0; }
.fb-sub { font-size:13px; color:var(--color-text-secondary); margin:4px 0 var(--space-6); }
.fb-intro {
  font-size:15px; line-height:1.6; color:var(--color-text-primary);
  margin:0 0 var(--space-6); padding-top:var(--space-6);
  border-top:1px solid var(--color-border-subtle); max-width:60ch;
}
.field i { font-style:normal; color:var(--color-text-tertiary); font-weight:var(--w-regular); }

.fb-back { justify-self:start; }