/* The owner's desk on service-area pages: business-magazine pieces.
   Inherits the page's type and ink; --cd-accent is set per page. Prefix cd-.
   Variants: spread (lead beside briefs), column (one reading column),
   ledger (lead across the top, briefs in pairs). */
.cd { padding: clamp(64px, 8vw, 112px) 0; border-block: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.cd * { box-sizing: border-box; }
.cd :where(h2, h3, p, table) { margin: 0; }
.cd-shell { width: min(100%, 1240px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.cd-head { max-width: 820px; }
.cd-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cd-accent, currentColor); }
.cd-head h2 { margin-top: 12px; font-size: clamp(2.1rem, 3.8vw, 3.5rem); line-height: 1.04; text-wrap: balance; }
.cd-dek { margin-top: 16px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; opacity: 0.86; max-width: 66ch; }
.cd-stories { display: grid; gap: clamp(28px, 3.5vw, 48px); margin-top: clamp(36px, 5vw, 60px); }
.cd-story { display: grid; gap: 12px; align-content: start; min-width: 0; }
.cd-story > p:not(.cd-tag):not(.cd-move):not(.cd-links) { font-size: 16.5px; line-height: 1.65; opacity: 0.9; max-width: 68ch; }
.cd-tag { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cd-accent, currentColor); }
.cd-story h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.15; text-wrap: balance; }
.cd-lead h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.06; }
.cd-lead > p:not(.cd-tag):not(.cd-move):not(.cd-links) { font-size: 17.5px; }
.cd-move { padding: 14px 16px; border-left: 4px solid var(--cd-accent, currentColor); background: color-mix(in srgb, currentColor 5%, transparent); font-size: 15.5px; line-height: 1.55; max-width: 68ch; }
.cd-move strong { font-weight: 800; }
.cd-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; font-size: 14px; }
.cd-links a { color: inherit; text-underline-offset: 4px; }
.cd-source { opacity: 0.72; }
.cd-next { font-weight: 800; color: var(--cd-accent, currentColor) !important; }
.cd-table { overflow-x: auto; margin-top: 4px; }
.cd-table:focus-visible { outline: 2px solid var(--cd-accent, currentColor); outline-offset: 4px; }
.cd-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.cd-table caption { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; padding-bottom: 10px; }
.cd-table th, .cd-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.cd-table thead th { font-size: 13px; font-weight: 800; border-bottom: 2px solid currentColor; }
.cd-table thead th:last-child { color: var(--cd-accent, currentColor); }
.cd-table tbody th { font-weight: 700; width: 24%; }

/* spread: lead story on the left, briefs stacked on the right, the rest below */
.cd--spread .cd-stories { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cd--spread .cd-lead { grid-row: span 2; padding-right: clamp(0px, 3vw, 40px); border-right: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.cd--spread .cd-story:not(.cd-lead) { padding-top: 22px; border-top: 2px solid currentColor; }
.cd--spread .cd-story:nth-child(n + 4) { grid-column: span 1; }

/* column: one reading column, the tag hangs in the margin */
.cd--column .cd-stories { max-width: 980px; gap: 0; }
.cd--column .cd-story { grid-template-columns: 170px minmax(0, 1fr); column-gap: clamp(20px, 4vw, 48px); padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.cd--column .cd-story > * { grid-column: 2; }
.cd--column .cd-tag { grid-column: 1; grid-row: 1 / span 3; padding-top: 6px; }
.cd--column .cd-lead { border-top: 3px solid currentColor; }

/* ledger: lead across the top in two columns of text, briefs in pairs */
.cd--ledger .cd-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd--ledger .cd-lead { grid-column: 1 / -1; padding: clamp(24px, 3vw, 40px); border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-top: 5px solid var(--cd-accent, currentColor); background: color-mix(in srgb, currentColor 3%, transparent); }
.cd--ledger .cd-story:not(.cd-lead) { padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }

@media (max-width: 900px) {
  .cd--spread .cd-stories, .cd--ledger .cd-stories { grid-template-columns: minmax(0, 1fr); }
  .cd--spread .cd-lead { grid-row: auto; padding-right: 0; border-right: 0; }
  .cd--column .cd-story { grid-template-columns: minmax(0, 1fr); }
  .cd--column .cd-story > *, .cd--column .cd-tag { grid-column: 1; grid-row: auto; }
}

/* A story that carries a comparison table always gets the full width. */
.cd--spread .cd-stories, .cd--ledger .cd-stories { grid-auto-flow: row dense; }
.cd--spread .cd-story:has(.cd-table), .cd--ledger .cd-story:has(.cd-table) { grid-column: 1 / -1; }
.cd--spread .cd-story:has(.cd-table) > p:not(.cd-tag):not(.cd-move):not(.cd-links) { max-width: 76ch; }