/* ============================================================
   Studio — an ongoing, loosely-themed collection
   Hayley Bance Portfolio

   Extends styles/chapter.css. Loaded after it; relies on its
   tokens (palette, type, --frame-max, --essay-max, --breath-*)
   and its shared components (.railed, .rail, .overline, .plate,
   .placeholder, .quote-mid, .reflection, .chapter-nav).

   This file adds only what the chapter system doesn't already
   have: a loose, variable-size collection grid for entries that
   were never meant to be a case-study accordion or a photo grid
   of uniform tiles — a notebook, not a dashboard.
   ============================================================ */

/* -- Theme groupings (Observations / Systems / Experiments / Writing) --
   Quiet separation only: a rule and breathing room, not a heavy header.
   The label lives in the rail, same device used everywhere else on
   the site for section names. */
.theme {
  margin-top: var(--breath-lg);
  padding-top: var(--breath-sm);
  border-top: 1px solid var(--rule);
}
.theme:first-of-type { margin-top: var(--breath-md); }

.theme-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.55;
  color: var(--olive-deep);
  max-width: 44ch;
  margin: 0;
}

/* -- Collection: the loose, variable-size layout ---------------------
   A 12-column measure gives entries a shared alignment to sit on
   without ever making them the same size. Items are placed by hand
   (span-*) rather than auto-packed, so the asymmetry is deliberate —
   a large photograph next to a short note next to almost nothing. */
.collection {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(24px, 3.5vw, 40px);
  row-gap: clamp(3.5rem, 7vw, 6rem);
  align-items: start;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
.collection > * { min-width: 0; }

.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-12 { grid-column: span 12; }

/* A slight downward drift on select items — the difference between a
   grid and a collection. Used sparingly. */
.drop-sm { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.drop-md { margin-top: clamp(2.5rem, 5vw, 4rem); }

.collection .essay { max-width: none; }
.collection .plate { margin: 0; }

/* -- Sentence captions ("an image with one sentence") -----------------
   A caption that is the entry, not a description of it — set larger,
   in the display italic, closer to a dek than a figure label. */
figure.plate figcaption.cue {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  color: var(--charcoal);
  margin-top: 16px;
  max-width: 34ch;
}

/* Chapter.css only styles .overline inside .story (case-study cards).
   Studio uses the same small mono label outside that context, so it
   needs its own rule here — same spec, wider reach. */
.note .overline,
.writing-piece .overline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-mute);
  margin: 0 0 14px;
}

/* -- Notes: a text-only entry, no card, no border ---------------------
   The plainest unit in the collection — a thought, kept. */
.note p {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.6vw + 0.75rem, 1.02rem);
  line-height: 1.75;
  color: var(--charcoal);
  margin: 10px 0 0;
}
.note .overline { margin-bottom: 0; }

/* A note set in the display italic — for the entries that read more
   like a line from a notebook than a paragraph of prose. */
.note.voiced p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--charcoal-soft);
}

/* -- Side-by-side plate: a smaller image with its caption set beside it
   rather than beneath it. Used sparingly, for a plate that reads more
   like an aside than a full evidence photo. -------------------------- */
.plate-side {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
}
.plate-side .plate { margin: 0; }
.plate-side .plate-side__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0;
}
@media (max-width: 900px) {
  .plate-side { grid-template-columns: 1fr; }
  .plate-side .plate-side__caption { margin-top: 16px; }
}

/* -- Writing entries: a short essay standing on its own, not inside
   a details/story accordion — Studio essays are read in full. -------- */
.writing-piece { max-width: var(--essay-max); }
.writing-piece .overline { margin-bottom: 14px; }
.writing-piece h2 { font-size: clamp(1.5rem, 2.8vw, 1.95rem); line-height: 1.2; margin-bottom: 22px; }

/* -- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .collection { grid-template-columns: 1fr; row-gap: 3rem; }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-12 {
    grid-column: span 1;
  }
  .drop-sm, .drop-md { margin-top: 0; }
  .theme { margin-top: var(--breath-md); }
}