/* static/css/pages/home.css
   Page-layout rules for the home view only. Shared component rules
   (.card*, .btn*, .legend*, .panel*, .empty, .hero, .hero__stand) live in
   components.css.
   Numbers are artboard 2 design px; comments give the artboard coordinate. */
.home {
  display: grid;
  grid-template-rows: calc(480.7 * var(--u)) 1fr;   /* split rule y=600.5 (rendered rows 600–601) */
  height: 100%;
}

/* ---- Top band: hero | eye-drop | latest observation --------------------- */
.home__top {
  display: grid;
  grid-template-columns: calc(532.3 * var(--u)) calc(436 * var(--u)) 1fr calc(714.1 * var(--u));
  align-items: start;
  border-bottom: var(--rule-strong) solid var(--ink);
  margin-right: calc(-2.4 * var(--u));              /* rule ends x=1866.7 */
  padding-right: calc(2.4 * var(--u));
}
.home__hero { padding-top: calc(44.2 * var(--u)); }
.hero__dashes {                                     /* x 55.7–168.1 at y=422.9 */
  width: calc(112.4 * var(--u));
  height: var(--rule-strong);
  margin: calc(30.35 * var(--u)) 0 0;
  border: 0;
  background: repeating-linear-gradient(to right,
    var(--ink) 0 calc(6.04 * var(--u)),
    transparent calc(6.04 * var(--u)) calc(17.2 * var(--u)),
    var(--ink) calc(17.2 * var(--u)) calc(22.32 * var(--u)));
}
.hero__kicker {                                     /* baseline 487.8 */
  margin: calc(43.05 * var(--u)) 0 0 calc(-0.9 * var(--u));
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  line-height: calc(26 * var(--u));
  letter-spacing: -.0657em;
}
.hero__note {                                       /* baselines 513.0 / 535.1 */
  margin: calc(2.65 * var(--u)) 0 0 calc(-0.9 * var(--u));
  font-size: var(--fs-note);
  line-height: calc(22.1 * var(--u));
  letter-spacing: -.0683em;
}

.home__mark {                                       /* crosshairs at x 599.8/1012.2, y 187.9/485.7 */
  --xh-size: calc(22 * var(--u));
  position: relative;
  width: calc(434.4 * var(--u));
  height: calc(319.8 * var(--u));
  margin: calc(55.1 * var(--u)) 0 0 calc(0.8 * var(--u));
}
.home__mark .home__eye {                                   /* eye 651.5–957.5, stem 191.2–480.3 */
  position: absolute;
  left: calc(58.7 * var(--u));
  top: calc(10.3 * var(--u));
  width: calc(314.04 * var(--u));
  height: auto;
}

.home__latest { grid-column: 4; padding-top: calc(42.65 * var(--u)); }
.home__latest-head {                                /* baseline 179.4, x 1151.2 → 1861.8 */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 calc(2.5 * var(--u)) 0 calc(1 * var(--u));
  font-size: var(--fs-latest);
  font-weight: var(--fw-medium);
  line-height: calc(20 * var(--u));
}
.home__latest-head h2 { margin: 0; font: inherit; }
.home__latest-head p { position: relative; top: calc(1 * var(--u)); margin: 0; }  /* '01' sits 1px low */
.home__latest-body {                                /* box 1151.2–1863.2 x 201.7–565.5 */
  --xh-size: calc(19 * var(--u));
  --xh-inset: calc(10.3 * var(--u));
  position: relative;
  display: grid;
  grid-template-columns: calc(417.3 * var(--u)) 1fr;
  height: calc(365.8 * var(--u));
  margin-top: calc(16.25 * var(--u));
  border: var(--rule-strong) solid var(--ink);
}
.home__latest-body::after {                         /* card | legend rule x=1570, y 229.1–535.3 */
  content: "";
  position: absolute;
  left: calc(417.3 * var(--u));
  top: calc(26.4 * var(--u));
  width: var(--rule);
  height: calc(306.2 * var(--u));
  background: var(--ink);
}

/* ---- Bottom band: recent cards | project panel -------------------------- */
.home__bottom {
  display: grid;
  grid-template-columns: calc(961.2 * var(--u)) 1fr;   /* divider x=1017.9 */
  align-items: start;
}
.home__label {                                      /* baseline 647.1, x 52.9 */
  margin: calc(28.3 * var(--u)) 0 0 calc(-2.8 * var(--u));
  font-size: var(--fs-section-sm);
  font-weight: var(--fw-medium);
  line-height: calc(20 * var(--u));
  letter-spacing: -.019em;
}
.home__cards {                                      /* cards x 52.9 / 290.6 / 528.3 / 766, y 670.9–917.9 */
  display: grid;
  grid-template-columns: repeat(4, calc(222.8 * var(--u)));
  column-gap: calc(14.9 * var(--u));
  height: calc(248 * var(--u));
  margin: calc(19.6 * var(--u)) 0 0 calc(-3.3 * var(--u));
}
.home__project { position: relative; }
.home__project::before {                            /* divider y 632.2–917.9 */
  content: "";
  position: absolute;
  left: 0;
  top: calc(29.7 * var(--u));
  width: var(--rule-strong);
  height: calc(285.7 * var(--u));
  background: var(--ink);
}
.home__project .home__label {                       /* baseline 649.7, x 1060.9 */
  margin: calc(30.25 * var(--u)) 0 0 calc(44 * var(--u));
  font-size: var(--fs-section);
  letter-spacing: -.063em;
}
.home__project .panel { margin: calc(17.15 * var(--u)) 0 0 calc(43 * var(--u)); }