/* ============================================================================
   ARTICLE — S0 title block + S1 the opening question
   Restraint per §2: the draggable footprint (S2) is the signature; S0/S1 stay
   quiet — paper ground, serif display, generous whitespace, hairline rules.
   ========================================================================== */

/* --- S0 · Title block (§S0) --------------------------------------------- */
.title-block {
  text-align: center;
  /* Top: the page's own opening breathing room. Bottom: the shared inter-chapter
     gap, so header→01 matches every other chapter boundary exactly. */
  padding-block: clamp(3rem, 9vw, 6rem) var(--gap-chapter);
}
.title-block__hed {
  margin-inline: auto;
  max-width: 15ch;                 /* keep the display line count tight */
}
.title-block__dek {
  margin: var(--space-md) auto 0;
  max-width: 46ch;
}

/* Hero (§29) — screenshot of the S2 map (Colossus over Lower Manhattan) at full
   column width. The figure is revealed by JS once the image loads. */
.hero {
  margin: var(--space-lg) auto 0;
  max-width: var(--measure-text);
}
.hero__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-warmgray-100);
}
.hero__caption { margin-top: var(--space-sm); }
/* Byline block — stacked, matching the orosei.ai project pattern (§A.3):
   author / "an orosei.ai project" / date. */
.title-block__byline {
  margin-top: var(--space-lg);
  font-family: var(--font-sans);
}
.title-block__author {
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin: 0;
}
.title-block__project {
  font-size: var(--fs-annotation);
  color: var(--color-ink-70);
  margin: var(--space-3xs) 0 0;
}
.title-block__project a { color: var(--color-ink-70); text-decoration-color: var(--color-warmgray-300); }
.title-block__project a:hover { text-decoration-color: var(--color-amber); }
.title-block__date {
  font-size: var(--fs-annotation);
  color: var(--color-ink-55);
  margin: var(--space-3xs) 0 0;
}
.byline__date--pending {
  color: var(--color-ink-40);
  font-style: italic;
}

/* Contents jump links (§A.4) — tappable chapter anchors under the byline. */
.title-block__contents {
  margin-top: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  line-height: 1.9;
  color: var(--color-ink-55);
}
.title-block__contents a {
  color: var(--color-ink-70);
  text-decoration-color: var(--color-warmgray-300);
  padding: 0.15em 0;
}
.title-block__contents a:hover { text-decoration-color: var(--color-amber); }
.contents__sep { color: var(--color-ink-40); margin-inline: 0.5em; }
/* Standfirst methods note (§S0: "standfirst note linking to methods") */
.title-block__methods {
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-55);
}
.title-block__methods a {
  color: var(--color-ink-70);
  text-decoration-color: var(--color-warmgray-300);
}

/* --- S1 · The opening question (§S1) ------------------------------------ */
.s1__answer {
  font-size: var(--fs-body-lg);
  max-width: var(--measure-text);
}
.s1__answer .answer-no {
  font-weight: var(--weight-bold);
}

/* Two-panel comparison — side by side on desktop, stacked on mobile (§5). */
.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-block: var(--space-lg);
  align-items: stretch;
}
@media (min-width: 720px) {
  .panels { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}

.panel {
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-paper);
}
.panel--ai { border-color: rgba(208, 138, 46, 0.45); }

.panel__kind {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-55);
}
.panel--ai .panel__kind { color: var(--color-amber); }

.panel__chip-label {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}
.panel__watts {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.panel--ai .panel__watts { color: var(--color-amber); }
.panel__desc {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-70);
  margin: 0;
}

/* Appliance comparison line (illustrative — typical appliance wattages) */
.panel__compare {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-55);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
}
.panel--ai .panel__compare { color: var(--color-ink-70); }
.illus-tag {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  color: var(--color-ink-40);
  border: 1px solid var(--color-warmgray-100);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.4em;
}

/* The power-gap visual — a shared-scale tower of unit blocks (the one idea). */
.powerbar { margin-top: auto; }         /* push visual to a common baseline */
.powerbar svg { width: 100%; height: auto; display: block; }
.powerbar .unit-trad { fill: var(--color-warmgray-300); }
.powerbar .unit-ai   { fill: var(--amber-fill-operational); stroke: var(--amber-stroke); stroke-width: 1; }
.powerbar .unit-base { fill: none; stroke: var(--color-warmgray-100); stroke-width: 1; }

/* Setup line above the cards — defines "server" before the figures (§S1 order). */
.s1__setup {
  max-width: var(--measure-text);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  margin-block: var(--space-sm) var(--space-lg);
}

/* Shared power-gap bars — one idea, the 10x gap, to scale (1:10). */
.power-gap {
  max-width: var(--measure-text);
  margin-block: var(--space-lg) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.power-gap__row {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) 1fr auto;
  align-items: center;
  gap: var(--space-sm);
}
.power-gap__name {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-70);
}
.power-gap__track {
  display: block;
  height: 26px;
  background: rgba(183, 176, 164, 0.18);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.power-gap__bar {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--amber-fill-operational);
  border-right: 2px solid var(--amber-stroke);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.power-gap__bar--ai { background: var(--color-amber); border-right: none; }
.power-gap__val {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  white-space: nowrap;
}

/* Closing line below the cards — the multiplication → megawatts (§S1 order). */
.s1__closing {
  max-width: var(--measure-text);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  margin-block: var(--space-md) 0;
}

/* --- S1 four-beat narrative (§S1 rework) — generous whitespace ----------- */
.s1-beats {
  max-width: var(--measure-text);
  margin-top: var(--space-lg);
}
.beat {
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  margin: 0 0 var(--space-xl) 0;
}
/* The one-word answer that opens S1 ("No.") — display-weight, quiet space. */
.beat--answer {
  font-size: var(--fs-section);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  color: var(--color-amber);
  margin-bottom: var(--space-lg);
}
.beat--conclude {
  font-size: var(--fs-dek);
  line-height: var(--lh-dek);
  margin-bottom: 0;
}
.beat--conclude strong {
  color: var(--color-amber);
  font-weight: var(--weight-semibold);
}
.power-gap-fig {
  margin: 0 0 var(--space-xl) 0;
}

figure { margin: 0; }
.figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-55);
  margin-top: var(--space-sm);
}

/* Scope-declaration line — closes S1 (§S1 "this piece is about the new kind"). */
.scope-line {
  font-family: var(--font-serif);
  font-size: var(--fs-dek);
  line-height: var(--lh-dek);
  max-width: var(--measure-text);
  margin-block: var(--space-lg) 0;
  padding-top: var(--space-lg);
  border-top: var(--rule-hairline);
}
.scope-line strong { font-weight: var(--weight-semibold); }

/* --- S6 · The numbers that went wrong (myths card) ---------------------- */
.s6__intro { max-width: var(--measure-text); }
.myths {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block: var(--space-lg);
}
.myth {
  border: var(--rule-hairline);
  border-left: 3px solid var(--color-warmgray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.myth[data-dir="scary"] { border-left-color: var(--color-amber); }
.myth[data-dir="reassuring"] { border-left-color: var(--color-water); }
.myth[data-dir="own"] { border-left-color: var(--color-warmgray-300); }

/* The whole collapsed row is the tap target (≥44px): eyebrow + quoted claim +
   the ▾ affordance. It's a real <button> for keyboard + screen-reader parity. */
.myth__bar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--space-md);
  margin: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.myth__head { flex: 1 1 auto; }
.myth__dir {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-55);
  margin: 0 0 var(--space-2xs);
}
.myth[data-dir="scary"] .myth__dir { color: var(--color-amber); }
.myth[data-dir="reassuring"] .myth__dir { color: var(--color-water); }
.myth__claim {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
  margin: 0;
}
.myth__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 2rem;
  font-family: var(--font-sans);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-ink-70);
}

/* Animated open/close via grid-rows; instant under reduced motion. Chips inside
   are removed from the tab order while collapsed (visibility:hidden). */
.myth__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-mid) var(--ease-out);
}
.myth.is-open .myth__body { grid-template-rows: 1fr; }
.myth__body-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-mid);
}
.myth.is-open .myth__body-inner { visibility: visible; transition-delay: 0s; }
.myth__correction {
  color: var(--color-ink-70);
  margin: 0 var(--space-md) var(--space-md);
}
.myth__chips {
  display: flex;
  gap: var(--space-2xs);
  margin: 0 var(--space-md) var(--space-md);
}
@media (prefers-reduced-motion: reduce) {
  .myth__body, .myth__body-inner { transition: none; }
}

/* --- S7 · Close + methods + disclosure ---------------------------------- */
/* International-scope note (§26) — a short card just before the final close. */
.intl-note {
  max-width: var(--measure-text);
  border: var(--rule-hairline);
  border-left: 3px solid var(--color-warmgray-300);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-block: 0 var(--space-xl);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-ink-70);
}
.intl-note p { margin: 0 0 var(--space-2xs); }
.intl-note p:last-child { margin-bottom: 0; }
.intl-note__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-55);
}
.intl-note__next {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink);
}
.s7-reframe {
  max-width: var(--measure-text);
  font-family: var(--font-serif);
  font-size: var(--fs-dek);
  line-height: var(--lh-dek);
  margin-block: 0 var(--gap-section);
}
.methods {
  border-top: var(--rule-hairline);
  padding-top: var(--space-lg);
}
.methods__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-55);
  margin: var(--space-lg) 0 var(--space-xs);
}
.methods__notes ul {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  padding-left: 1.1em;
  max-width: var(--measure-text);
}
.methods__notes li { margin-bottom: var(--space-2xs); }
/* Collapsed sources dropdown (§25) — "Sources (N)", closed by default. */
.sources-details { margin-top: var(--space-xs); }
.sources-summary {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-70);
  cursor: pointer;
  padding: var(--space-2xs) 0;
  list-style: revert;
}
.sources-summary:hover { color: var(--color-amber); }
.sources-details[open] .sources-summary { margin-bottom: var(--space-xs); }
.sources-list { list-style: none; margin: 0; padding: 0; }
.sources-list li {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-70);
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-hairline);
}
.src-name { color: var(--color-ink); font-weight: var(--weight-medium); }
.src-nolink { color: var(--color-ink-55); font-style: italic; }
.src-lens { display: block; color: var(--color-ink-55); margin-top: 2px; }
.disclosure {
  margin-top: var(--space-xl);
  max-width: var(--measure-text);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-ink-70);
}
.disclosure p { margin-bottom: var(--space-sm); }
.disclosure__contact { color: var(--color-ink-55); }

/* Corrections & contact — Netlify form (progressively enhanced to inline success) */
.contact-form {
  max-width: var(--measure-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.contact-form__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-70);
  margin: 0;
}
/* Honeypot — off-screen, never shown to humans. */
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  flex: 1 1 12rem;
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-55);
}
.contact-form__field em { font-style: italic; color: var(--color-ink-40); }
.contact-form input,
.contact-form textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-mid);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.contact-form__send { align-self: flex-start; }
.contact-form__success {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-amber);
  font-weight: var(--weight-medium);
  margin: 0;
}

/* --- Site footer -------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-xl) var(--space-2xl);
  border-top: var(--rule-hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-55);
}
.site-footer__attr { margin: 0 0 var(--space-2xs); }
.site-footer__series { margin: 0; color: var(--color-ink-40); }