/* Homepage prototype (Nov 2026). Loaded after site.css on index.html only.
   Goal: one large thing per view, real changes of scale between sections,
   the portrait and the sketch given room, one dark band. Tokens only. */

/* ---------- Hero: statement left, portrait bled to the right edge ---------- */
.h-hero {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  min-height: calc(100svh - 76px);
  border-bottom: 1px solid var(--rule-strong);
}
.h-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-5);
  padding-block: var(--space-8) var(--space-8);
  padding-left: max(var(--page-margin), calc((100vw - var(--page-max)) / 2 + var(--page-margin)));
  padding-right: var(--space-7);
  min-width: 0;
}
.h-hero__statement { margin-bottom: var(--space-2); }
.h-hero__lede { max-width: 32rem; }
.h-hero__briefing { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); max-width: 40rem; }
.h-hero__line { font-family: var(--font-ui); font-size: var(--step-2); line-height: 1.5; color: var(--text-2); margin-bottom: var(--space-4); }
.h-hero__line .label { display: block; margin-bottom: var(--space-2); }
.h-hero__fields { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.1fr) auto; align-items: end; }
.h-hero__fields .btn { min-height: 52px; }
.h-hero__story { margin-left: var(--space-4); color: var(--text); font-family: var(--font-sans); font-weight: 500; }

.h-hero__portrait { position: relative; min-height: 100%; overflow: hidden; background: var(--ink); }
.h-hero__portrait picture, .h-hero__portrait img:not(.h-hero__signoff) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.h-hero__signoff { position: absolute; left: var(--space-6); bottom: var(--space-6); width: 150px; height: auto; }

.h-hero__statement, .h-hero__portrait { animation: rise var(--dur-3) var(--ease) both; }

/* ---------- Proof band ---------- */
.h-proof { padding-block: var(--space-8); border-bottom: 1px solid var(--rule); }
.h-proof__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-6); }
.h-proof__n { font-size: var(--step-7); }

/* ---------- Manifesto: big, wide, alone ---------- */
.h-manifesto { padding-block: var(--space-11); }
.h-manifesto__fig { max-width: 62rem; margin-inline: auto; }
.h-manifesto__text {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: var(--step-7); line-height: 1.08; letter-spacing: -0.018em;
  text-indent: -0.4em; text-wrap: balance;
}
.h-manifesto__text em { font-style: normal; }
.h-manifesto__source { margin-top: var(--space-6); }

/* ---------- Split: heading left, text right ---------- */
.h-split { grid-column: 3 / span 10; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-6); }
.h-split__head { grid-column: 1 / span 5; }
.h-split__body { grid-column: 6 / span 5; padding-top: var(--space-2); }
.h-split__coda { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--rule-strong); }

/* ---------- The dark band ---------- */
/* The band takes the sketch's own ground (#121212) so the drawing has no visible box edge. */
.h-built { --bg: #121212; margin-top: var(--space-10); padding-block: var(--space-10); }
.h-built__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-7); align-items: center; }
.h-built__sketch { grid-column: 1 / span 7; }
.h-built__sketch img { width: 100%; height: auto; }
.h-built__sketch .caption { margin-top: var(--space-3); }
.h-built__copy { grid-column: 9 / span 4; display: grid; gap: var(--space-5); }
.h-built__list { margin-top: var(--space-2); }
.h-built .prose { color: var(--text-2); }

/* ---------- Latest writing ---------- */
.h-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.h-reading .reading-list__row { padding-block: var(--space-5); }
.h-reading .reading-list__title { font-size: var(--step-5); line-height: 1.22; }

/* ---------- Rows with a larger title ---------- */
.h-rows .rows__row { padding-block: var(--space-7); }
.h-rows .rows__title { font-size: var(--step-6); line-height: 1.06; letter-spacing: -0.014em; }

.h-timeline { margin-top: var(--space-2); }

/* ---------- Closing ---------- */
.h-closing { padding-bottom: var(--space-8); }
.h-closing__inner { max-width: 54rem; display: grid; gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--rule-strong); }
.h-closing__form { margin-top: var(--space-3); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .h-hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .h-hero__text { padding-right: var(--space-7); }
  .h-hero__fields { grid-template-columns: 1fr 1fr; }
  .h-hero__fields .btn { grid-column: 1 / -1; justify-self: start; }
  .h-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-built__sketch { grid-column: 1 / -1; }
  .h-built__copy { grid-column: 1 / span 8; }
}
@media (max-width: 860px) {
  .h-hero { grid-template-columns: 1fr; min-height: 0; }
  .h-hero__text { padding: var(--space-6) var(--page-margin) var(--space-7); order: 1; }
  .h-hero__portrait { order: 2; aspect-ratio: 4 / 5; }
  .h-hero__fields { grid-template-columns: 1fr; }
  .h-hero__fields .btn { width: 100%; }
  .h-hero__story { display: block; margin: var(--space-3) 0 0; }
  .h-manifesto { padding-block: var(--space-9); }
  .h-split, .h-split__head, .h-split__body { grid-column: 1 / -1; }
  .h-split { grid-template-columns: 1fr; }
  .h-built { padding-block: var(--space-8); }
  .h-built__copy { grid-column: 1 / -1; }
  .h-head { flex-direction: column; gap: var(--space-3); }
  .h-reading .reading-list__title { font-size: var(--step-4); }
}