/* landing.css — the front page, for a reader who has not met this wire.
 *
 * WHAT THIS IS. index.html carries the terminal AND, hidden until landing.js
 * decides, the front page: what the wire is, the instruments shown large and
 * captured from the real reader, the limits stated plainly, and one way in.
 * landing.js reveals it (html[data-landing]) when the address carries no
 * route, so `newenergywire.com/` opens on it and `#wire` — every link, every
 * bookmark, every share — goes straight to the terminal as it always has.
 *
 * WHERE IT CAME FROM. Entertainment built this page on 5 Sep 2026 and Defense
 * followed on 17 Sep (AQ-264); New Energy had no front page at all and put a
 * stranger straight into the terminal (AQ-292). The anatomy and the type are
 * the siblings', so the three front pages read as one house. Nothing else is
 * shared: this wire has no gate, no trial and no price, so it has no sign-in
 * hero, no plan cards and no comparison table — the sections that carry those
 * on the siblings are not reproduced empty here. See docs/PROVENANCE.md.
 *
 * WHY ITS OWN FILE. app.css is the terminal; this is a page a stranger reads
 * once. Everything here is scoped to .land or to html[data-landing], reads
 * app.css's tokens so both themes come for free, and never restyles the
 * terminal.
 */

/* ---- the chrome in landing mode -------------------------------------------
   The masthead stays, because it says "terminal" before a word is read, but
   everything on it that leads into the reader goes: the route links, the
   search field, the filters and the LATEST tape all address a page the
   visitor has not opened yet. The clocks stay for the same reason the
   wordmark does.

   THE FOOTER'S KEYBOARD LEGEND STAYS TOO, and this is deliberate. It reads
   oddly on a page with no search to press "/" in, and the sibling wires do
   hide theirs here — but AQ-275 made that strip permanent on every New Energy
   page after it was found missing from eleven of them, and tests/test_footer.py
   fails any stylesheet that takes it away. A front page is not an exception
   worth reopening that for. */
html[data-landing] #workspace,
html[data-landing] #controls-home,
html[data-landing] .ticker-wrap,
html[data-landing] .status-strip,
html[data-landing] .skip-link,
html[data-landing] .site-header .primary-nav { display: none !important; }

.land-tools { display: none; align-items: center; gap: 8px; }
html[data-landing] .land-tools { display: flex; }
.land-tools .btn { white-space: nowrap; }
/* On a phone the masthead keeps one row: the way in, and the theme control. */
@media (max-width: 620px) {
  html[data-landing] .land-tools-inside { display: none; }
}

/* ---- the page ------------------------------------------------------------- */
.land { display: block; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.land[hidden] { display: none; }
.land * { box-sizing: border-box; }
.land-wrap { max-width: 1360px; margin: 0 auto; padding: 0 20px; }
.land-narrow { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
/* :where(), so this reset weighs nothing and every single-class margin below
   still wins — app.css sets `p{margin-bottom:16px}` globally. */
:where(.land) p { margin: 0; }

.land-eyebrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.land-sec .land-eyebrow { font-size: 13px; }
.land-h1, .land-h2, .land-h3, .land-h4 {
  margin: 0; font-family: var(--serif); font-weight: 600; color: var(--text);
  text-wrap: balance;
}
.land-h1 { font-size: clamp(44px, 5.3vw, 76px); line-height: 1.0; letter-spacing: -.03em; max-width: 16ch; }
.land-h2 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -.02em; max-width: 22ch; }
.land-h3 { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.08; letter-spacing: -.015em; }
.land-h3--pair { font-size: clamp(26px, 2.4vw, 34px); }
.land-h4 { font-size: clamp(24px, 2vw, 28px); line-height: 1.12; letter-spacing: -.01em; }
.land-lede { font-size: 20px; line-height: 1.55; color: var(--text-dim); max-width: 54ch; }
.land-lede--s { font-size: 18px; max-width: 58ch; }
.land-lede--m { font-size: 17px; max-width: 60ch; }
.land-p { font-size: 15.5px; line-height: 1.55; color: var(--text-dim); }
/* 12px, not the siblings' 11.5: this repo's browser acceptance holds every
   reader-visible string to 12px or more, and the front page is not exempt. */
.land-fine { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; line-height: 1.6; color: var(--faint); }
.land-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.land-fine a:hover { color: var(--brand); }

/* the two button weights this page uses, in Inter — a reader's action, not a
   terminal control, so they do not borrow .btn's mono uppercase */
.land-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 26px; border-radius: 12px;
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--grid); color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.land-cta:hover { border-color: var(--brand-dark); color: var(--brand); text-decoration: none; }
.land-cta--primary { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.land-cta--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; filter: brightness(1.1); }
.land-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---- a section: eyebrow, statement, lede — centred, at scale -------------- */
.land-sec { padding: 0 20px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.land-air { height: 128px; }
.land-air--s { height: 24px; }
@media (max-width: 780px) {
  .land-air { height: 72px; }
  .land-sec { padding-bottom: 36px; }
  .land-lede { font-size: 16px; }
  .land-lede--s, .land-lede--m { font-size: 16px; }
}

/* ---- hero ----------------------------------------------------------------- */
.land-hero { padding: 96px 20px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.land-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; margin-top: 6px; }
@media (max-width: 560px) {
  .land-hero { padding-top: 56px; }
}

/* ---- a screen: the instrument itself, large --------------------------------
   Every capture sits in the same frame: the terminal's own navy behind it, a
   hairline and a shadow that lifts it off the page. The frame fixes the shape
   — 3:2, the shape tools/landing_shots.py shoots to — so a pair of screens is
   a pair of equal boxes whatever a re-shoot returns, and the crop, when there
   is one, keeps the top, which is where the masthead is. */
.land-screen {
  border-radius: 14px; overflow: hidden; background: #0A2032;
  box-shadow: 0 40px 100px -50px rgba(10,32,50,.55), 0 0 0 1px rgba(10,32,50,.08);
}
.land-screen img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; }
/* the close-ups: an organization's card, a project's dated evidence. Shot at a
   narrow viewport and twice the density, then shown wide, so a date or a
   figure reads at least as large here as it does in the terminal — and at
   their own height, because a crop would cut the sentence the picture exists
   to show. */
.land-screen--close img { aspect-ratio: auto; object-fit: fill; }
.land-shot-cap { margin: -18px 0 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.land-hero-screen { padding: 24px 20px 0; }
.land-caption { margin: 14px 20px 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); line-height: 1.6; }
.land-caption time { color: inherit; }

/* ---- how it reads: three commitments, one anatomy -------------------------- */
.land-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 32px; }
.land-state { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--grid); }
.land-state-title { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.01em; color: var(--text); min-height: 68px; }
.land-rule { margin: 0 auto; padding: 0 20px; text-align: center; font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--text); max-width: 46ch; }
@media (max-width: 900px) {
  .land-states { grid-template-columns: 1fr; gap: 24px; }
  .land-state-title { min-height: 0; }
  .land-rule { font-size: 20px; }
}

/* ---- what is inside: the instruments, weighted by what they are ------------- */
.land-show { display: flex; flex-direction: column; gap: 32px; padding-bottom: 120px; }
.land-show-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.land-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 8px 20px 0; }
.land-mark { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--grid); }
.land-mark b { font-weight: 600; font-size: 16px; color: var(--text); }
.land-mark span { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.land-pair-item { display: flex; flex-direction: column; gap: 14px; }
.land-beside { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; padding-bottom: 120px; }
.land-beside--flip { grid-template-columns: 5fr 7fr; }
.land-beside--flip > .land-screen { order: 2; }
.land-beside .land-pair-item .land-p { max-width: 52ch; }
.land-show--tight { padding-bottom: 64px; }
@media (max-width: 1000px) {
  .land-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .land-show, .land-beside { padding-bottom: 64px; gap: 24px; }
  .land-beside, .land-beside--flip { grid-template-columns: 1fr; }
  .land-beside--flip > .land-screen { order: 0; }
  .land-marks { grid-template-columns: 1fr; gap: 18px; padding: 0; }
}

/* ---- the limits ------------------------------------------------------------
   The siblings carry plan cards here. This wire has nothing to sell, and the
   honest thing to put in a stranger's eyeline instead is what the wire does
   not yet cover — the same list README.md and the reader's own Sources view
   carry, in the same words. Two columns of bands, same anatomy as a plan card
   minus the price. */
.land-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 72px; }
.land-band { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border-radius: 18px; background: var(--panel); }
.land-band-name { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--text); }
.land-band .land-p { font-size: 14.5px; }
@media (max-width: 640px) {
  .land-bands { grid-template-columns: 1fr; padding-bottom: 48px; }
}

/* ---- the close ------------------------------------------------------------- */
.land-close { padding: 0 20px 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.land-close .land-h2 { font-size: clamp(32px, 3.4vw, 48px); }
.land-close-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
@media (max-width: 780px) {
  .land-close { padding-bottom: 64px; }
  .land-close-ctas { width: 100%; flex-direction: column; }
  .land-close-ctas .land-cta, .land-hero-ctas .land-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .land-cta { transition: none; }
}