/* Color contexts. Components read these variables instead of hard-coding colors,
   so the same markup works on dark and light sections. */
body,
.ws-section--dark,
.ws-section--dark-2{
  --ws-bg:var(--ws-dark);
  --ws-fg:var(--ws-white);
  --ws-fg-muted:var(--ws-text-muted);
  --ws-fg-dim:var(--ws-text-dim);
  --ws-accent-text:var(--ws-red);
  --ws-line:var(--ws-border-dark);
  --ws-surface:var(--ws-dark-3);
  --ws-focus:var(--ws-white);
}
.ws-section--dark-2{ --ws-bg:var(--ws-dark-2); }
.ws-section--light,
.ws-section--off-white{
  --ws-bg:var(--ws-white);
  --ws-fg:var(--ws-dark);
  --ws-fg-muted:var(--ws-dark);
  --ws-fg-dim:var(--ws-gray-mid);
  --ws-accent-text:var(--ws-red-ui);
  --ws-line:var(--ws-border-light);
  --ws-surface:var(--ws-off-white);
  --ws-focus:var(--ws-dark);
}
.ws-section--off-white{ --ws-bg:var(--ws-off-white); --ws-surface:var(--ws-white); }

/* Container */
.ws-wrap{
  width:100%;
  max-width:var(--ws-wrap);
  margin-inline:auto;
  padding-inline:24px;
}
@media (min-width:768px){ .ws-wrap{ padding-inline:48px; } }

/* 12-column grid */
.ws-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--ws-space-2);
}
.ws-grid > *{ grid-column:1 / -1; }
@media (min-width:992px){
  .ws-grid{ gap:var(--ws-space-3); }
  .ws-reading{ grid-column:3 / 11; }
}

/* Sections. Rhythm down a page: dark, light, dark, off-white (BRAND.md 3.2). */
.ws-section{
  --ws-section-pad:var(--ws-space-5);
  padding-block:var(--ws-section-pad);
  background:var(--ws-bg);
  color:var(--ws-fg);
}
@media (min-width:768px){ .ws-section{ --ws-section-pad:var(--ws-space-6); } }
@media (min-width:1200px){ .ws-section{ --ws-section-pad:var(--ws-space-7); } }

/* Two light sections in a row are separated by a line. */
:is(.ws-section--light,.ws-section--off-white) + :is(.ws-section--light,.ws-section--off-white){
  border-top:1px solid var(--ws-border-light);
}

/* The header overlays the first section, so the first section makes room for it. */
.ws-main > .ws-section:first-child{
  padding-top:calc(var(--ws-nav-h) + var(--ws-section-pad));
}
.ws-main:focus{ outline:none; }

/* A text link that closes a section, below its main block ("All work", "How I de-risk…"). */
.ws-section__more{ margin-top:var(--ws-space-5); }