/* ============================================
   WRITINGs page — page-specific styles.
   All selectors prefixed `writings-` to avoid collisions.
   ============================================ */

/* --- LONG FORM section --- */
.writings-longform-section {
  padding-top: 0;
}

.writings-longform-title {
  padding-left: var(--margin-photos);
  margin-bottom: 0.4vw;
  line-height: 1;
}

.writings-longform-banner {
  display: block;
  width: 100%;
  height: auto;
}

/* --- SHORT FORM section (tweet grid) --- */
.writings-shortform-section {
  padding-top: 3vw;
}

.writings-shortform-title {
  padding-left: var(--margin-photos);
  margin-bottom: 0.6vw;
  line-height: 1;
}

/* CSS columns (NOT CSS Grid) — chosen for masonry packing. Grid forces
   row-baseline alignment, leaving visible gaps below shorter tweets while
   the row waits for the tallest card. Columns pack each column top-down
   independently, so a short tweet snugs up under the one above. Don't
   "modernize" this back to grid without restoring that behavior. */
.writings-tweets-grid {
  column-count: 6;
  column-gap: var(--gap-photos);
  padding: 0 var(--margin-photos);
}

.writings-tweets-grid > .tweet-container {
  break-inside: avoid;
  display: block;
  width: 100%;
  margin-bottom: var(--gap-photos);
}