:root{
  --bg:#DEDBD3;
  --bg-elevated:#E8E5DD;
  --text:#2A2823;
  --text-muted:#726C61;
  --accent:#35405C;
  --border:#CDC9BE;
}
body{ background:var(--bg); color:var(--text); }

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top: var(--header-pad, 14px);      /* headerPadding in PAGE_LAYOUT */
  padding-bottom: var(--header-pad, 14px);
  border-bottom:1px solid var(--border);
}
/* Same typeface as "Antonio Sbrolli" everywhere else it appears — the
   landing page's big name and the Biography dialog's name (see
   .center-mark .name in index.html and .bio-name in base.css). */
.site-title{
  font-family: var(--font-body);
  font-weight:500;
  font-size:1.2rem;
}
.site-nav{
  display:flex;
  align-items:center;
  gap: var(--space-3);
}
.site-nav a, .site-nav button{
  background:none;
  border:none;
  padding:0;
  font-family: inherit;
  color: var(--text-muted);
  font-size:0.95rem;
  border-bottom:1px solid transparent;
  cursor:pointer;
}
.site-nav a:hover, .site-nav button:hover{ color:var(--accent); border-color:var(--accent); }

/* Space between one album and the next (--album-gap, from PAGE_LAYOUT in
   constants.js): half above the dividing line, half below. The left/right
   padding is set in css/base.css. */
.album-section{
  padding-top: calc(var(--album-gap, 160px) / 2);
  padding-bottom: calc(var(--album-gap, 160px) / 2);
  /* albumDivider in PAGE_LAYOUT: thickness of the line (0 = no line) */
  border-bottom: var(--album-divider, 1px) solid var(--border);
}
.album-layout{
  display:grid;
  /* albumCoverSize / albumCoverGap in PAGE_LAYOUT */
  grid-template-columns: var(--album-cover-size, 260px) minmax(0, 1fr);
  gap: var(--album-cover-gap, 48px);
  align-items:start;
}
.album-cover{
  position:relative;
  aspect-ratio:1/1;
  border-radius: 10px;
  overflow:hidden;
  background: var(--bg-elevated);
  border:1px solid var(--border);
  box-shadow: 0 12px 30px -18px rgba(27,27,27,0.35);
}
.album-cover img{ width:100%; height:100%; object-fit:cover; }
.album-cover.placeholder::after{
  content: attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding: var(--space-2);
  font-family: var(--font-display);
  font-style:italic;
  color: var(--text-muted);
}
.album-title{
  font-family: var(--font-display);
  font-weight:500;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  margin-bottom: var(--space-1);
}
.album-desc{ color: var(--text-muted); margin-bottom: var(--space-3); max-width:38rem; }

.track-list{ list-style:none; }
/* A track's cover is half as big as its album's cover (albumCoverSize in
   PAGE_LAYOUT), so it follows it on every kind of screen. */
.album-section{ --track-cover-size: calc(var(--album-cover-size, 260px) / 2); }
.track-row{
  display:grid;
  grid-template-columns: var(--track-cover-size) minmax(0, 1fr) auto auto;
  align-items:center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom:1px solid var(--border);
}
.track-embed-row{ border-bottom:1px solid var(--border); padding: 0 0 var(--space-2) 0; list-style:none; }
.track-embed-row[hidden]{ display:none; }
.track-embed-row:has(+ .track-row:last-child){ border-bottom:none; }
.track-embed-missing{
  font-size:0.85rem;
  color: var(--text-muted);
  padding: var(--space-1) 0;
}
.track-preview-buttons{ display:flex; gap: var(--space-1); }
.track-preview-missing{
  font-size:0.8rem;
  color: var(--text-muted);
  white-space:nowrap;
}
.track-preview-btn, .track-link-btn{
  display:inline-flex; align-items:center; gap:0.45rem;
  border:1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size:0.85rem;
  line-height:1.2;
  padding:0.4rem 0.9rem 0.4rem 0.5rem;
  border-radius:999px;
  white-space:nowrap;
  text-decoration:none;
}
.track-preview-btn .brand-logo, .track-link-btn .brand-logo{ width:1.35em; height:1.35em; flex:none; }
.track-preview-btn:hover, .track-link-btn:hover{ border-color: var(--accent); color: var(--accent); }
/* On this page the buttons are just the logos, on a transparent background:
   the name ("Spotify", "Hide"…) stays for screen readers and as a tooltip,
   and the open player's button gets a ring around its logo. */
.track-preview-buttons{ align-items:center; gap:0.6rem; }
.track-preview-btn, .track-link-btn{
  padding:0; border:none; background:transparent; border-radius:9px;
  width:32px; height:32px; justify-content:center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.track-preview-btn .brand-logo, .track-link-btn .brand-logo{ width:28px; height:28px; }
.track-preview-btn span, .track-link-btn span{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.track-preview-btn:hover, .track-link-btn:hover{ transform: translateY(-2px); }
.track-preview-btn.active{ background:transparent; box-shadow: 0 0 0 2px var(--accent); }
.track-preview-btn:focus-visible, .track-link-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.track-preview-btn.active{ background: var(--accent); color:#fff; border-color: var(--accent); }
.track-cover{
  position:relative;
  width: var(--track-cover-size); height: var(--track-cover-size);
  border-radius:8px;
  overflow:hidden;
  background: var(--bg-elevated);
  border:1px solid var(--border);
  flex-shrink:0;
}
.track-cover img{ width:100%; height:100%; object-fit:cover; }
.track-cover.placeholder::after{
  content:'♪';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-muted);
  font-size:0.9rem;
}
.track-desc{
  font-size:0.85rem;
  color: var(--text-muted);
  margin-top:2px;
}
.track-info .track-title{ font-weight:500; }
.track-related{ font-size:0.82rem; margin-top:2px; }
.track-related-btn{
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:inherit;
  color: var(--accent);
  border-bottom:1px solid var(--accent);
  margin-right: var(--space-1);
}
.track-duration{ color: var(--text-muted); font-size:0.9rem; font-variant-numeric: tabular-nums; }

/* Lightbox for a related photo, opened right here instead of navigating to
   the photography page — same shell as the photography page's own
   lightbox, just simpler content (no "related tracks" section, to avoid
   nesting one lightbox's related links inside another). */
.lightbox{
  position:fixed; inset:0;
  background: rgba(59,57,52,0.94);
  display:none;
  align-items:center; justify-content:center;
  padding: var(--space-3);
  z-index:50;
}
.lightbox.open{ display:flex; }
/* Sized to what's actually inside it, not a fixed box — see the matching
   comment in photography.css. */
.lightbox-content{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: var(--space-4);
  max-width:92vw;
  max-height:90vh;
}
.lightbox-image{
  position:relative;
  background: var(--bg-elevated);
  border:1px solid var(--border);
  max-width:min(54rem, 62vw);
  max-height: 70vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.lightbox-image img{ max-width:100%; max-height:70vh; width:auto; height:auto; object-fit:contain; }
/* max-width only (no fixed width): a photo with little or no location or
   description gets a narrower column that hugs that little bit of text,
   instead of always reserving a full 22rem next to the photo regardless of
   how much is actually in it. */
.lightbox-info{ max-width:min(22rem, 85vw); max-height:70vh; overflow-y:auto; }
/* A fixed width here (not 100%) matters: 100% would resolve against
   .lightbox-content's own width, which is itself sized to fit its
   children — that circular sizing is what was making the whole dialog
   balloon out to its maximum possible size while a photo failed to load,
   instead of just reserving a normal, modest box for the missing-photo
   label. */
.lightbox-image.placeholder{ aspect-ratio: 4/5; min-height:240px; width:16rem; }
.lightbox-image.placeholder::after{
  content: attr(data-label);
  font-family: var(--font-display);
  font-style:italic;
  color: var(--text-muted);
  padding: var(--space-3);
  text-align:center;
}
.lightbox-location{
  color: var(--accent);
  font-size:0.9rem;
  margin-bottom: var(--space-2);
}
.lightbox-desc{ color: var(--text-muted); }
/* Sits just outside the dialog's own box (which now sizes to its content,
   not to a fixed full-width panel), so it's always right at its corner
   instead of pinned to a distant corner of the screen. */
.lightbox-close{
  position:absolute; top:-2.4rem; right:-0.4rem;
  background:none; border:none; color:#fff;
  font-size:1.6rem; line-height:1;
}

/* Narrow screens (phones): photo on top, details underneath, in one
   column that never wraps into a second, off-screen column; the lightbox
   scrolls if they don't both fit. */
@media (max-width: 720px){
  .lightbox{
    align-items:flex-start;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-top: calc(var(--space-3) + 2.4rem);
  }
  .lightbox-content{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap: var(--space-2); max-height:none; margin: auto 0; }
  .lightbox-image{ max-width:100%; align-self:center; }
  .lightbox-image img{ max-height:62vh; }
  .lightbox-info{ width:100%; max-width:none; max-height:none; overflow:visible; }
}

/* Up to 900 px wide there's no room for the album's cover beside its tracks:
   the cover goes above them (the tracks would otherwise spill past the edge). */
@media (max-width: 900px){
  .album-layout{ grid-template-columns: minmax(0, 1fr); }
  .album-cover{ max-width: var(--album-cover-size, 12rem); }
}
@media (max-width: 640px){
  .track-row{
    grid-template-columns: var(--track-cover-size) minmax(0, 1fr);
    row-gap: var(--space-1);
  }
  .track-duration{ display:none; }
  .track-preview-buttons, .track-preview-missing{
    grid-column: 1 / -1;
  }
}

/* Smartwatch (the "watch" row of PAGE_LAYOUT in constants.js): smaller
   album title and cover so the track list fits the tiny screen. */
html[data-layout="watch"] .album-title{ font-size:1.25rem; }
html[data-layout="watch"] .album-desc{ font-size:0.8rem; }
html[data-layout="watch"] .track-title{ font-size:0.85rem; }
html[data-layout="watch"] .track-desc{ font-size:0.72rem; }