/* Deep Blue — Artwork and Photography density-only editorial galleries.
   All items within a section have equal-sized image stages: no 'lead' tile.
   Photography cycles 3 / 6 / 2 / 5 in single desktop rows.
   Writing rules below are retained unchanged from the previous update. */
.db-editorial-archive {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.8vw, 55px);
}
.db-editorial-archive .gallery-tile { min-width: 0; }
.db-standard-grid, .db-compact-grid, .db-dense-grid {
  display: grid;
  align-items: start;
}
/* The calm larger format: three equally sized tiles per row. */
.db-standard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 29px 18px;
}
.db-editorial-archive .gallery-image-stage {
  aspect-ratio: 1 / 1;
  min-height: 0;
}
/* A restrained five-across section; no oversized image. */
.db-compact-band {
  padding: clamp(15px, 2.2vw, 26px);
  background: #edf2ef;
}
.db-compact-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 23px 13px;
}
.db-compact-grid .gallery-caption { padding-top: 8px; }
.db-compact-grid .gallery-caption strong {
  font-size: clamp(16px, 1.45vw, 21px);
}
/* More compact six-across section with just delicate framing rules. */
.db-dense-band {
  padding-block: clamp(10px, 1.5vw, 20px);
  border-top: 1px solid #d9e1db;
  border-bottom: 1px solid #d9e1db;
}
.db-dense-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px 11px;
}
.db-dense-grid .gallery-caption { padding-top: 8px; }
.db-dense-grid .gallery-caption strong {
  font-size: clamp(14px, 1.25vw, 19px);
}
.db-dense-grid .gallery-caption span { font-size: clamp(12px, 1.0vw, 15px); }
/* Photography: one-row sequence 3 / 6 / 2 / 5 on desktop. */
.db-photo-wide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 29px 18px;
  align-items: start;
}
/* A very slight cooler hue differentiates Photography's small-thumbnail band. */
.db-photo-archive .db-compact-band { background: #edf1f2; }
.db-photo-archive .db-dense-band { border-color: #d5e0e4; }

/* Keep all six photographs in one row at desktop widths, even on laptops. */
@media (min-width: 961px) {
  .db-photo-archive .db-dense-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Don't reduce readability or create awkwardly narrow columns on tablets. */
@media (max-width: 1180px) {
  .db-dense-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .db-compact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .db-dense-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .db-standard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-photo-wide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .db-dense-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* On phones, limit all sections to two columns, preserving usable art sizes. */
@media (max-width: 640px) {
  .db-editorial-archive { gap: 30px; }
  .db-standard-grid { gap: 22px 11px; }
  /* Keep the generous two-image row genuinely large on a narrow phone. */
  .db-photo-wide-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .db-compact-band { padding: 15px 10px; }
  .db-compact-grid, .db-dense-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 11px;
  }
  .db-compact-grid .gallery-caption strong,
  .db-dense-grid .gallery-caption strong {
    font-size: clamp(17px, 4.5vw, 22px);
  }
  .db-dense-grid .gallery-caption span { font-size: 14px; }
}

/* WRITING — varied groupings, but never microscopic text previews. */
.db-writing-editorial {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.6vw, 52px);
}
.db-writing-editorial .writing-card { min-width:0; }
.db-writing-standard-grid,
.db-writing-compact-grid,
.db-writing-feature-support {
  display:grid;
  align-items:stretch;
}
.db-writing-standard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.db-writing-compact-band { border-top:1px solid #d8e1da; border-bottom:1px solid #d8e1da; padding:22px 0; }
.db-writing-compact-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.db-writing-compact-grid .writing-card { padding:20px; min-height:260px; }
.db-writing-compact-grid .writing-card h2 { font-size:clamp(27px,2.75vw,37px); }
.db-writing-compact-grid .writing-snippet { font-size:16px; }
.db-writing-feature-band {
  display:grid;
  /* Match the exact column boundaries of the standard Writing grid above. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  /* No inset: the large and small cards both align with the cards above. */
  padding:clamp(16px,1.6vw,22px) 0 0;
  background:transparent;
  border-top:1px solid #d1dcd6;
}
.db-writing-feature-band > .db-writing-lead:only-child { grid-column:1/-1; max-width:780px; }
.db-writing-feature-band .db-writing-lead .writing-card { height:100%; min-height:390px; background:#dce7e2; padding:clamp(24px,3vw,45px); }
.db-writing-feature-band .db-writing-lead h2 { font-size:clamp(39px,4.7vw,71px); line-height:1; }
.db-writing-feature-support { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:18px; }
.db-writing-feature-support .writing-card { min-height:0; padding:23px; }
.db-writing-feature-support .writing-card h2 { font-size:clamp(29px,2.8vw,40px); margin-top:14px; }
.db-writing-feature-support .writing-snippet { font-size:16px; }

@media(max-width:1000px) {
  .db-writing-compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .db-writing-feature-band { grid-template-columns:minmax(0,1fr); }
  .db-writing-feature-band .db-writing-lead .writing-card { min-height:310px; }
  .db-writing-feature-support { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
}
@media(max-width:640px) {
  .db-writing-editorial { gap:28px; }
  .db-writing-standard-grid,
  .db-writing-compact-grid,
  .db-writing-feature-support { grid-template-columns:minmax(0,1fr); }
  .db-writing-standard-grid { gap:12px; }
  .db-writing-compact-grid { gap:12px; }
  .db-writing-feature-band { padding:16px 0 0; gap:12px; }
  .db-writing-feature-band .db-writing-lead .writing-card { min-height:230px; padding:26px; }
  .db-writing-feature-band .db-writing-lead h2 { font-size:clamp(37px,10vw,54px); }
  .db-writing-feature-support { gap:12px; }
  .db-writing-feature-support .writing-card { min-height:210px; }
}


/* October 18: featured Writing previews resize only in the highlighted position.
   The script in archive.html chooses a fitting font size for the text supplied
   in Pages CMS; other writing cards keep their existing typography. */
.db-writing-feature-band .db-writing-card--lead .writing-snippet {
  font-family: var(--serif, 'Instrument Serif', Georgia, serif);
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -.018em;
  min-height: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* October 19: On phones, Photography becomes one continuous two-column
   archive rather than preserving the desktop 3 / 6 / 2 / 5 bands.
   display:contents removes only the band boxes. It keeps the existing
   photo tile, caption, series badge, viewer templates, and post order.
   Art and Writing are not affected. */
@media (max-width: 640px) {
  .db-editorial-archive.db-photo-archive {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 11px;
    row-gap: 22px;
    align-items: start;
  }
  .db-photo-archive > .db-standard-grid,
  .db-photo-archive > .db-photo-wide-grid,
  .db-photo-archive > .db-compact-band,
  .db-photo-archive > .db-dense-band,
  .db-photo-archive .db-compact-grid,
  .db-photo-archive .db-dense-grid {
    display: contents;
  }
  .db-photo-archive .gallery-tile {
    min-width: 0;
    margin: 0;
  }
}