/* Home page only. Shared components live in site.css. */

/* ---------- hero: the sign, then the statement beside the tile ---------- */
.hero { padding-top: clamp(28px, 4.4vw, 64px); }
.hero-sign {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--ep-space-4) var(--ep-space-6);
  padding-bottom: clamp(20px, 2.6vw, 36px); border-bottom: 1px solid var(--ep-rule-strong);
}
.hero-lockup { display: block; width: min(100%, 58vw, 820px); height: auto; aspect-ratio: 205.01 / 30; fill: var(--ep-mark); }
.hero-meta {
  display: grid; gap: 2px; justify-items: end; text-align: right; max-width: none;
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; line-height: 1.6; color: var(--ep-text-3);
}
.hero-meta b { font-weight: 500; color: var(--ep-text-2); }

.hero-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap);
  grid-template-areas:
    "text text text text text text tile tile tile tile tile tile"
    "spec spec spec spec spec spec tile tile tile tile tile tile";
  grid-template-rows: auto 1fr;
  row-gap: var(--ep-space-7);
  padding-top: clamp(24px, 3vw, 40px);
}
.hero-text { grid-area: text; display: grid; gap: var(--ep-space-5); align-content: start; min-width: 0; padding-right: clamp(0px, 2vw, 32px); }
.hero-text .statement { max-width: 15.5ch; }
.hero-text .lead { max-width: 46ch; color: var(--ep-text-2); }
.hero-text .actions { margin-top: var(--ep-space-2); }
.hero-spec { grid-area: spec; align-self: end; margin-right: clamp(0px, 2vw, 32px); }
.hero-tile { grid-area: tile; align-self: start; width: 100%; max-width: 640px; justify-self: end; }

@media (max-width: 1100px) {
  .hero-lockup { width: min(100%, 72vw); }
}
@media (max-width: 900px) {
  .hero-sign { align-items: flex-start; }
  .hero-lockup { width: 100%; }
  .hero-meta { justify-items: start; text-align: left; grid-auto-flow: row; }
  .hero-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "tile" "spec";
    grid-template-rows: auto;
    row-gap: var(--ep-space-6);
  }
  .hero-text, .hero-spec { padding-right: 0; margin-right: 0; }
  .hero-tile { justify-self: stretch; max-width: none; }
}
@media (max-width: 620px) {
  .hero-meta { grid-auto-flow: row; }
  .hero-text { gap: var(--ep-space-4); }
  .hero-text .actions .btn { flex: 1 1 auto; }
  .hero-spec { grid-template-columns: minmax(0, 1fr); }
  .hero-spec dd { border-top: 0; padding-top: 0; }
  .hero-spec dt { padding-bottom: 4px; }
}

/* ---------- live strip sits close under the hero ---------- */
.strip-section { padding-top: clamp(48px, 6vw, 88px); }

/* ---------- what we run ---------- */
.run { align-items: stretch; }
.run-plate { gap: var(--ep-space-5); padding: clamp(20px, 2.6vw, 32px); grid-template-rows: auto auto auto 1fr auto; }
.run-ic { width: 28px; height: 28px; color: var(--ep-text-2); }
.run-title { font-stretch: var(--ep-width-display); font-weight: 520; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -.01em; max-width: 22ch; }
.run-kv { align-self: end; }
.run-band { display: grid; gap: var(--ep-space-2); align-self: end; }
.run-plate .link-arrow { justify-self: start; }

/* ---------- how the guardian decides ---------- */
.decide-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ep-space-4) var(--ep-space-7);
  margin-top: var(--ep-space-6); padding-top: var(--ep-space-5); border-top: 1px solid var(--ep-rule);
}
.decide-foot .note-line { max-width: 70ch; }

/* ---------- the trust assumption, set apart ---------- */
.assume { padding-top: var(--ep-section); }
.assume-band { background: var(--ep-panel); border-block: 1px solid var(--ep-rule); padding-block: clamp(56px, 7vw, 104px); }
.assume-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-5);
  grid-template-areas:
    "lbl lbl lbl lbl lbl lbl lbl lbl lbl lbl lbl lbl"
    "h h h h h h h h h h h h"
    "lead lead lead lead lead lead fig fig fig fig fig fig";
  align-items: end;
}
.assume-lbl { grid-area: lbl; }
.assume-h { grid-area: h; max-width: none; }
.assume-line { display: block; }
.assume-lead { grid-area: lead; color: var(--ep-text-2); max-width: 46ch; align-self: start; margin-top: var(--ep-space-5); }
.assume-fig { grid-area: fig; display: grid; gap: 0; min-width: 0; margin-top: var(--ep-space-6); }
.assume-points { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ep-rule-strong); padding-top: var(--ep-space-5); column-gap: clamp(24px, 3vw, 48px); row-gap: var(--ep-space-6); }
.assume-points p { font-size: 15.5px; }
@media (max-width: 900px) {
  .assume-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lbl" "h" "lead" "fig"; }
  .assume-lead { margin-top: var(--ep-space-2); }
  .assume-fig { margin-top: var(--ep-space-4); max-width: 560px; }
}
@media (max-width: 900px) {
  .assume-points { grid-template-columns: minmax(0, 1fr); }
}

/* the section after the band keeps its own rhythm */
.close { padding-top: var(--ep-section); }

@media (max-width: 620px) {
  .strip-cell .bigfig { font-size: 22px; }
}