/* wesbecher.llc · shared base
 * The pieces every route must agree on: the typeface, the accent, the primary
 * button, and the footer. Each page keeps its own layout and neutrals; these
 * are the things a visitor reads as "same site" or "four different sites".
 * Loaded after each page's own styles, so it settles disagreements.
 */

@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  /* Electric Studio canon. Every route resolves to these exact values. */
  --wl-ink: #0A0A0A;
  --wl-paper: #FFFFFF;
  --wl-blue: #4361EE;
  --wl-blue-dark: #2E43B8;
  --wl-blue-light: #8FA3FF;
  --wl-muted: #5B6472;
  --wl-line: #E3E6EC;
  --wl-line-dark: #363B45;
  --wl-muted-dark: #9AA3B2;
  --wl-on-blue: #F2F5FF;
  --wl-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------- shared footer ---------------- */

.wl-foot {
  background: var(--wl-ink);
  color: var(--wl-muted-dark);
  font-family: var(--wl-font);
  position: relative;
  padding: 44px 0 calc(40px + 4px);
}
.wl-foot-in {
  max-width: var(--gnav-w, 1180px);
  margin: 0 auto;
  padding: 0 var(--gnav-pad, 24px);
}
.wl-foot-lockup { display: block; height: 26px; width: auto; margin-bottom: 26px; }

.wl-foot-nav {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--wl-line-dark);
}
.wl-foot-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--wl-muted-dark); text-decoration: none;
}
.wl-foot-nav a:hover { color: var(--wl-on-blue); }
/* an uppercased email address reads as a typo */
.wl-foot-nav a.wl-plain { text-transform: none; letter-spacing: 0.02em; }

.wl-foot-note {
  font-size: 0.8rem; line-height: 1.6; color: var(--wl-muted-dark);
  max-width: 88ch; margin-bottom: 10px;
}
.wl-foot-note a { color: var(--wl-muted-dark); }
.wl-foot-legal { font-size: 0.8rem; color: var(--wl-muted-dark); }
.wl-foot .wl-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--wl-blue);
}
.wl-foot a:focus-visible { outline: 2px solid var(--wl-blue-light); outline-offset: 3px; }

@media (max-width: 640px) {
  .wl-foot-nav { gap: 0 22px; }
}
@media print { .wl-foot { display: none !important; } }


/* ---------------- wide tables become cards on phones ----------------
 * Only for tables whose rows are records. Shaded matrices (the capacity
 * staircase, the milestone grid) keep their grid, because there the
 * position of a cell is the information. */
@media (max-width: 640px) {
  .wl-cards table { display: block; width: 100%; min-width: 0 !important; }
  .wl-cards thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wl-cards tbody { display: block; }
  .wl-cards tbody tr {
    display: block; margin-bottom: 10px; padding: 10px 14px;
    border: 1px solid var(--wl-line); border-left: 3px solid var(--wl-blue); border-radius: 8px;
  }
  .wl-cards tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    width: auto; text-align: right; white-space: normal;
    padding: 6px 0; border: 0; border-bottom: 1px solid var(--wl-line);
  }
  .wl-cards tbody tr td:last-child { border-bottom: 0; }
  .wl-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 40%; text-align: left;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--wl-muted);
  }
  .wl-cards tbody td[data-label=""]::before { display: none; }
  .wl-cards .scroll-cue { display: none !important; }
  .wl-cards .table-scroll { overflow-x: visible; }
}