/* data-centers.css
   Scoped skin for the "Data Centers, Water & Power" position page.
   Reuses site primitives (.container/.btn/.card/.prose/.eyebrow/.headline)
   and depends ONLY on tokens.css custom properties, so it follows the
   light/dark theme. Everything is namespaced under .dc to avoid collisions.

   Emphasis blocks (.dc-dark / .dc-question / .dc-got / .dc-basin / .dc-engage)
   intentionally hold fixed near-black colors with the bright signal orange
   so the drama survives in light theme, matching the source design's intent. */

.dc { padding-bottom: var(--space-80); }
.dc > section { margin-top: var(--space-64); }

/* ── section header ─────────────────────────────────────────────────────── */
.dc-leadnum {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.dc-head { max-width: 64ch; margin-bottom: var(--space-32); }
.dc-head h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  margin-top: var(--space-12);
  color: var(--fg);
}
.dc-head h2 em { font-style: italic; color: var(--orange); }
.dc-head p {
  margin-top: var(--space-16);
  color: var(--fg-2);
  font-size: var(--text-subheading);
  line-height: var(--leading-body);
  max-width: 60ch;
}

/* ── hero extras ────────────────────────────────────────────────────────── */
.dc .link-row { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }
.dc .byline {
  margin-top: var(--space-32);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); align-items: center;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dc .byline strong { color: var(--fg-2); }
.dc .byline .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--hair-active); flex: none; }

/* phones: the doc-hero uses the fixed-40px .headline; shrink it so the longest
   words fit as whole words instead of clipping under body's overflow-x: clip. */
@media (max-width: 640px) {
  .dc .headline { font-size: clamp(27px, 8vw, 40px); overflow-wrap: break-word; }
  .dc-head h2 { overflow-wrap: break-word; }
}

/* ── figure ticker ──────────────────────────────────────────────────────── */
.dc-figs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hair); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface);
}
.dc-fig { padding: var(--space-24); border-right: 1px solid var(--hair); }
.dc-fig:last-child { border-right: none; }
.dc-fig-num {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(30px, 4vw, 46px); line-height: 1;
  letter-spacing: var(--tracking-heading); color: var(--fg);
}
.dc-fig-num .u {
  font-family: var(--font-mono); font-size: 0.4em; font-weight: var(--fw-medium);
  color: var(--muted); margin-left: 0.35em; letter-spacing: 0;
}
.dc-fig-lab {
  font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.5;
  color: var(--muted); margin-top: var(--space-12);
  text-transform: uppercase; letter-spacing: 0.08em;
}
@media (max-width: 820px) {
  .dc-figs { grid-template-columns: repeat(2, 1fr); }
  .dc-fig:nth-child(2) { border-right: none; }
  .dc-fig:nth-child(1), .dc-fig:nth-child(2) { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 480px) {
  .dc-figs { grid-template-columns: 1fr; }
  .dc-fig { border-right: none; border-bottom: 1px solid var(--hair); }
  .dc-fig:last-child { border-bottom: none; }
}

/* ── position split + pullquote ─────────────────────────────────────────── */
.dc-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-48); align-items: start; }
.dc-split p { color: var(--fg-2); line-height: var(--leading-body); }
.dc-split p + p { margin-top: var(--space-16); }
.dc-split strong { color: var(--fg); }
@media (max-width: 880px) { .dc-split { grid-template-columns: 1fr; gap: var(--space-32); } }
.dc-pull {
  background: var(--surface); border: 1px solid var(--hair);
  border-left: 3px solid var(--orange); border-radius: var(--radius-md);
  padding: var(--space-32);
}
.dc-pull .q {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.32;
  letter-spacing: var(--tracking-heading); color: var(--fg);
}
.dc-pull .who {
  font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6;
  color: var(--muted); margin-top: var(--space-20);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dc-pull .who strong { color: var(--orange); }

/* ── emphasis dark blocks ───────────────────────────────────────────────── */
.dc-dark { background: #0B0D11; border: 1px solid #20242B; border-radius: var(--radius-lg); color: #E7E7E2; }
.dc-question { padding: var(--space-40); border-left: 4px solid #FF6B35; }
.dc-question .lab { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: #9A9A8E; }
.dc-question .q {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.18;
  letter-spacing: var(--tracking-heading); margin-top: var(--space-16);
  color: #fff; max-width: 24ch;
}
.dc-question .sub { margin-top: var(--space-24); color: #C9C9C0; font-size: var(--text-subheading); line-height: var(--leading-body); max-width: 64ch; }
.dc-question .sub strong { color: #fff; }
.dc-qmeta { display: flex; flex-wrap: wrap; gap: var(--space-32); margin-top: var(--space-32); padding-top: var(--space-24); border-top: 1px solid #20242B; }
.dc-qmeta .n { font-family: var(--font-mono); font-size: 26px; color: #FF6B35; font-weight: var(--fw-semibold); }
.dc-qmeta .l { font-family: var(--font-mono); font-size: 0.6rem; color: #9A9A8E; margin-top: var(--space-4); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── give / got ledger ──────────────────────────────────────────────────── */
.dc-ledger { display: grid; grid-template-columns: 1.55fr 0.8fr; gap: var(--space-20); }
@media (max-width: 880px) { .dc-ledger { grid-template-columns: 1fr; } }
.dc-gave { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-sm); overflow: hidden; }
.dc-gave .hd, .dc-got .hd {
  padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--hair);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.dc-gave .hd .t { color: var(--fg); font-weight: var(--fw-bold); }
.dc-gave .hd .c { color: var(--muted); }
.dc-li { padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--hair); display: flex; gap: var(--space-16); align-items: flex-start; }
.dc-li:last-child { border-bottom: none; }
.dc-li .k { font-family: var(--font-mono); font-size: 0.7rem; color: var(--orange); font-weight: var(--fw-semibold); flex: none; width: 24px; padding-top: 2px; }
.dc-li .v { font-size: var(--text-body); line-height: 1.5; color: var(--fg-2); }
.dc-li .v strong { color: var(--fg); }
.dc-got { background: #0B0D11; border: 1px solid #20242B; border-radius: var(--radius-sm); overflow: hidden; color: #E7E7E2; }
.dc-got .hd { border-bottom-color: #20242B; }
.dc-got .hd .t { color: #fff; font-weight: var(--fw-bold); }
.dc-got .hd .c { color: #9A9A8E; }
.dc-got .big { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(48px, 8vw, 76px); line-height: 0.92; letter-spacing: var(--tracking-display); padding: var(--space-24) var(--space-24) 0; color: #fff; }
.dc-got .cap { font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6; color: #C9C9C0; padding: var(--space-12) var(--space-24) var(--space-24); }
.dc-got .cap strong { color: #fff; }
.dc-got .dc-li { border-color: #20242B; }
.dc-got .dc-li .k { color: #9A9A8E; }
.dc-got .dc-li .v { color: #C9C9C0; }
.dc-surrender { margin-top: var(--space-20); background: var(--lift); border: 1px solid var(--hair); border-radius: var(--radius-md); padding: var(--space-24) var(--space-32); }
.dc-surrender .hd { font-family: var(--font-mono); font-size: 0.6rem; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); margin-bottom: var(--space-16); }
.dc-surrender .g { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-32); }
@media (max-width: 680px) { .dc-surrender .g { grid-template-columns: 1fr; } }
.dc-surrender .item { display: flex; gap: var(--space-12); font-size: var(--text-body); line-height: 1.5; color: var(--fg-2); }
.dc-surrender .item .x { color: var(--orange); font-family: var(--font-mono); font-weight: var(--fw-bold); flex: none; }
.dc-surrender .item strong { color: var(--fg); }
.dc-note { margin-top: var(--space-20); font-size: var(--text-body); color: var(--fg-3); font-style: italic; max-width: 74ch; }

/* ── regional cards ─────────────────────────────────────────────────────── */
.dc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
@media (max-width: 900px) { .dc-cards { grid-template-columns: 1fr; } }
.dc-cards .loc { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dc-cards .nm { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 28px; letter-spacing: var(--tracking-heading); margin: var(--space-8) 0 var(--space-4); color: var(--fg); }
.dc-cards .tg { font-family: var(--font-mono); font-size: 0.65rem; color: var(--orange); font-weight: var(--fw-semibold); }
.dc-cards .st { margin-top: var(--space-20); border-top: 1px solid var(--hair); padding-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.dc-cards .row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.dc-cards .row .sl { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); max-width: 60%; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; }
.dc-cards .row .sv { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 20px; text-align: right; color: var(--fg); }
.dc-cards .row .sv small { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); font-weight: var(--fw-medium); }
.dc-basin { margin-top: var(--space-20); padding: var(--space-32); display: grid; grid-template-columns: auto 1fr; gap: var(--space-32); align-items: center; }
@media (max-width: 720px) { .dc-basin { grid-template-columns: 1fr; gap: var(--space-16); } }
.dc-basin .big { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(32px, 5vw, 50px); line-height: 1; color: #FF6B35; letter-spacing: var(--tracking-heading); white-space: nowrap; }
.dc-basin p { color: #C9C9C0; font-size: var(--text-body); line-height: var(--leading-body); }
.dc-basin p strong { color: #fff; }

/* ── asks ───────────────────────────────────────────────────────────────── */
.dc-asks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20); }
@media (max-width: 820px) { .dc-asks { grid-template-columns: 1fr; } }
.dc-ask { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: var(--space-24); display: flex; gap: var(--space-20); transition: border-color 0.2s ease, transform 0.2s ease; }
.dc-ask:hover { border-color: var(--orange); transform: translateY(-2px); }
.dc-ask .n { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 36px; line-height: 1; color: var(--orange); flex: none; }
.dc-ask h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-subheading); margin-bottom: var(--space-8); color: var(--fg); }
.dc-ask p { font-size: var(--text-body); color: var(--fg-2); line-height: 1.5; }
.dc-ask.full { grid-column: 1 / -1; }

/* ── work / docs ────────────────────────────────────────────────────────── */
.dc-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20); }
@media (max-width: 820px) { .dc-docs { grid-template-columns: 1fr; } }
.dc-doc { display: flex; gap: var(--space-20); align-items: flex-start; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: var(--space-24); transition: border-color 0.18s ease, transform 0.18s ease; text-decoration: none; }
a.dc-doc:hover { border-color: var(--hair-active); transform: translateY(-2px); }
.dc-doc .ic { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--canvas); border: 1px solid var(--hair); display: grid; place-items: center; flex: none; font-family: var(--font-mono); font-size: 0.6rem; font-weight: var(--fw-bold); color: var(--orange); letter-spacing: 0.04em; }
.dc-doc .k { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.dc-doc h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-subheading); margin: var(--space-4) 0; color: var(--fg); }
.dc-doc p { font-size: var(--text-body); color: var(--fg-2); line-height: 1.5; }
.dc-doc .go { font-family: var(--font-mono); font-size: 0.65rem; color: var(--orange); font-weight: var(--fw-semibold); margin-top: var(--space-12); display: inline-block; text-transform: uppercase; letter-spacing: 0.06em; }
.dc-doc.soon { opacity: 0.85; }
.dc-doc.soon .ic, .dc-doc.soon .go { color: var(--muted); }
.dc-packet { margin-top: var(--space-20); background: var(--lift); border: 1px solid var(--hair); border-radius: var(--radius-md); padding: var(--space-24) var(--space-32); }
.dc-packet .hd { font-family: var(--font-mono); font-size: 0.6rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); margin-bottom: var(--space-16); }
.dc-packet .parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
@media (max-width: 720px) { .dc-packet .parts { grid-template-columns: 1fr; } }
.dc-packet .pn { font-family: var(--font-mono); font-size: 0.6rem; color: var(--orange); font-weight: var(--fw-semibold); }
.dc-packet .pt { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-body); margin: var(--space-4) 0; color: var(--fg); }
.dc-packet .parts p { font-size: var(--text-body); color: var(--fg-2); line-height: 1.5; }

/* ── timeline ───────────────────────────────────────────────────────────── */
.dc-tl { margin-top: var(--space-8); }
.dc-tl-item { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-24); padding: var(--space-20) 0; border-top: 1px solid var(--hair); align-items: start; }
.dc-tl-item:first-child { border-top: none; }
@media (max-width: 640px) { .dc-tl-item { grid-template-columns: 1fr; gap: var(--space-8); } }
.dc-tl .date { font-family: var(--font-mono); font-size: 0.7rem; color: var(--orange); font-weight: var(--fw-semibold); padding-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.dc-tl h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-subheading); margin-bottom: var(--space-4); color: var(--fg); }
.dc-tl p { font-size: var(--text-body); color: var(--fg-2); line-height: 1.5; }
.dc-tl .src { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); margin-top: var(--space-8); }

/* ── discussion ─────────────────────────────────────────────────────────── */
.dc-disc h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-subheading); margin-bottom: var(--space-8); color: var(--fg); }
.dc-disc > p { color: var(--fg-2); font-size: var(--text-body); max-width: 66ch; line-height: var(--leading-body); }
.dc-disc ul { list-style: none; margin: var(--space-20) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.dc-disc li a { display: flex; align-items: center; gap: var(--space-16); font-family: var(--font-mono); font-size: 0.72rem; padding: var(--space-12) var(--space-16); background: var(--canvas); border: 1px solid var(--hair); border-radius: var(--radius-sm); color: var(--fg-2); text-decoration: none; transition: border-color 0.18s ease, transform 0.18s ease; }
.dc-disc li a:hover { border-color: var(--hair-active); color: var(--fg); transform: translateX(3px); }
.dc-disc li a .tag { color: var(--orange); font-weight: var(--fw-semibold); flex: none; text-transform: uppercase; }
.dc-disc li a .arr { margin-left: auto; color: var(--muted); }

/* ── engage ─────────────────────────────────────────────────────────────── */
.dc-engage { padding: var(--space-48); text-align: center; }
.dc-engage .lab { color: #FF9B6B; }
.dc-engage h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(28px, 5vw, 48px); line-height: 1.06; letter-spacing: var(--tracking-heading); max-width: 18ch; margin: var(--space-12) auto 0; color: #fff; }
.dc-engage p { color: #C9C9C0; font-size: var(--text-subheading); max-width: 56ch; margin: var(--space-20) auto 0; line-height: var(--leading-body); }
.dc-engage p strong { color: #fff; }
.dc-engage .free { display: inline-flex; align-items: center; gap: var(--space-8); margin-top: var(--space-16); font-family: var(--font-mono); font-size: 0.7rem; color: #5fd6a6; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; }
.dc-engage .link-row { justify-content: center; margin-top: var(--space-32); }
.dc-engage .btn-primary { background: #FF6B35; border-color: #FF6B35; }
.dc-engage .btn-secondary { color: #E7E7E2; border-color: #3A3A36; }

/* ── footnote ───────────────────────────────────────────────────────────── */
.dc-disclaimer { margin-top: var(--space-32); font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.7; color: var(--muted); max-width: 88ch; }
.dc-disclaimer strong { color: var(--fg-2); }