/* ============================================================
   LAYOUT — Dashboard console grid (Seed A=6)
   12-col, tight gutters, ruled tabular rows, left index rail.
   Every section owns a DIFFERENT internal layout.
   ============================================================ */

.page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* Module header: [index] · LABEL · ruled line — the tabular signature */
.module-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-4);
  border-top: var(--rule) solid var(--border-strong);
  padding-top: var(--space-3);
  margin-bottom: var(--space-6);
}
.module-head .idx {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}
.module-head .line {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-subtle) 0 6px, transparent 6px 12px);
}

/* ============================================================
   1 · HERO — inline contextual nav (Seed E=7). No nav bar.
   Top row = wordmark + inline links. Giant claim bleeds the grid.
   ============================================================ */
.hero { position: relative; padding-top: var(--space-6); padding-bottom: var(--space-7); }

.hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: var(--rule) solid var(--border-strong);
}
.hero__nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); flex-wrap: wrap; }

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
  margin-top: var(--space-7);
}
.hero__head { grid-column: 1 / 9; }
.hero__meta { grid-column: 9 / 13; align-self: end; }

.hero__kicker { margin-bottom: var(--space-4); display: inline-flex; align-items: center; gap: 12px; }
.hero__kicker::before { content: ""; width: 40px; height: 1px; background: var(--brand-primary); }

.hero h1 {
  font-size: var(--text-hero);
  font-weight: 600;
}
.hero h1 em {
  font-style: normal;
  color: var(--brand-primary);
}

/* the hero visual breaks out of the container on the right (mandatory: overflow) */
.hero__visual {
  grid-column: 8 / 13;
  position: relative;
  margin-top: var(--space-6);
  aspect-ratio: 16 / 10;
  margin-right: calc(-1 * var(--gutter));
}
.hero__visual .media { position: absolute; inset: 0; }

/* meta readout panel (dashboard instrument) */
.readout {
  border: var(--rule) solid var(--border-strong);
  background: var(--surface-raised);
}
.readout__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--rule) solid var(--border-subtle);
}
.readout__row:last-child { border-bottom: 0; }
.readout__row dt { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-secondary); margin: 0; }
.readout__row dd { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ============================================================
   2 · INDEX — the five, tabulated (dashboard rows)
   ============================================================ */
.index-strip { padding-block: var(--space-7); }
.index-rows { border-top: var(--rule) solid var(--border-strong); }
.index-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--rule) solid var(--border-subtle);
}
.index-row .k { font-family: var(--font-display); font-weight: 600; color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.index-row p { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.35; }
.index-row .meta { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-secondary); }

/* ============================================================
   3 · MANIFESTO — narrow column beside vast empty space (asymmetry)
   with a giant background numeral (decorative typographic texture)
   ============================================================ */
.manifesto { position: relative; padding-block: var(--space-8); overflow: clip; }
.manifesto__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.manifesto__body { grid-column: 2 / 7; }        /* narrow column, vast void to the right */
.manifesto__body p { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; }
.manifesto__body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 4.2em;
  line-height: 0.72;
  float: left;
  margin: 6px 14px 0 0;
  color: var(--brand-primary);
}
.manifesto__ghost {
  position: absolute;
  right: -2vw; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40vw;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-subtle);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   4 · THE FIVE WAYS — dossier rows (index numeral overlaps image)
   ============================================================ */
.dossier { padding-block: var(--space-7); }
.entry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: center;
  border-top: var(--rule) solid var(--border-strong);
  padding-block: var(--space-7);
}
.entry__num {
  grid-column: 1 / 4;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--numeral);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border-copper);
  align-self: start;
}
.entry__body { grid-column: 4 / 9; }
.entry__visual {
  grid-column: 9 / 13;
  aspect-ratio: 4 / 5;
  position: relative;
}
.entry__visual .media { position: absolute; inset: 0; }

/* Alternating rhythm: even rows mirror + numeral overlaps the plate */
.entry:nth-child(even) .entry__num { grid-column: 10 / 13; text-align: right; order: 3; position: relative; z-index: 2; margin-left: -30%; }
.entry:nth-child(even) .entry__body { grid-column: 5 / 10; order: 2; }
.entry:nth-child(even) .entry__visual { grid-column: 1 / 5; order: 1; }

.entry__note { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--rule) solid var(--border-subtle); }

/* ============================================================
   5 · NEWSLETTER — full-bleed brand-primary (mandatory moment)
   ============================================================ */
.cta-band {
  position: relative;
  background: var(--surface-inverse);
  color: var(--text-on-copper);
  overflow: clip;
  margin-top: var(--space-8);
}
.cta-band::before {
  /* dot grid inverted onto copper */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(25, 21, 18, 0.16) 1px, transparent 1px);
  background-size: var(--dot-size) var(--dot-size);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
  padding-block: var(--space-8);
}
.cta-band__head { grid-column: 1 / 8; }
.cta-band__form { grid-column: 8 / 13; align-self: end; }
.cta-band h2 { color: var(--text-on-copper); font-size: var(--text-h1); }
.cta-band .eyebrow { color: var(--text-inverse); }
.cta-band__ghost {
  position: absolute;
  left: -1vw; bottom: -12vw;
  font-family: var(--font-display); font-weight: 600;
  font-size: 34vw; line-height: 0.8;
  color: rgba(25, 21, 18, 0.10);
  pointer-events: none;
}

/* ============================================================
   6 · FOOTER — brand statement + giant wordmark, distinct ground
   ============================================================ */
.site-footer { background: var(--surface-sunken); border-top: var(--rule) solid var(--border-copper); margin-top: 0; }
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  padding-block: var(--space-7) var(--space-6);
  align-items: start;
}
.footer-statement { grid-column: 1 / 7; }
.footer-statement p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.2; color: var(--text-primary); }
.footer-contact { grid-column: 7 / 10; }
.footer-nav { grid-column: 10 / 13; }
.footer-wordmark { padding-block: var(--space-4) var(--space-6); overflow: clip; }
.footer-disclosures { border-top: var(--rule) solid var(--border-subtle); padding-block: var(--space-5); }
.footer-bottom { border-top: var(--rule) solid var(--border-subtle); padding-block: var(--space-4) var(--space-6); }

/* ============================================================
   LEGAL / CONTENT pages — narrow ledger column
   ============================================================ */
.ledger { padding-block: var(--space-7) var(--space-8); }
.ledger__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.ledger__head { grid-column: 1 / 5; position: sticky; top: var(--space-5); align-self: start; }
.ledger__body { grid-column: 6 / 12; }
.ledger__body h2 { font-size: var(--text-h3); margin: var(--space-6) 0 var(--space-2); color: var(--brand-primary); }
.ledger__body h2:first-child { margin-top: 0; }
.ledger__body p { color: var(--text-secondary); }
.ledger__body a[href] { color: var(--brand-accent); border-bottom: 1px solid var(--border-copper); }

.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: var(--space-5); }

/* ============================================================
   RESPONSIVE — dashboard collapses to stacked ledger
   ============================================================ */
@media (max-width: 1000px) {
  .hero__head, .hero__meta { grid-column: 1 / 13; }
  .hero__visual { grid-column: 1 / 13; margin-right: 0; }
  .manifesto__body { grid-column: 1 / 10; }
  .entry, .entry:nth-child(even) { grid-template-columns: 1fr; }
  .entry__num, .entry:nth-child(even) .entry__num { grid-column: 1; margin: 0; text-align: left; order: 0; }
  .entry__body, .entry:nth-child(even) .entry__body { grid-column: 1; order: 1; }
  .entry__visual, .entry:nth-child(even) .entry__visual { grid-column: 1; order: 2; aspect-ratio: 16/10; }
  .cta-band__head, .cta-band__form { grid-column: 1 / 13; }
  .ledger__head { position: static; grid-column: 1 / 13; }
  .ledger__body { grid-column: 1 / 13; }
  .footer-statement, .footer-contact, .footer-nav { grid-column: 1 / 13; }
}
@media (max-width: 620px) {
  .index-row { grid-template-columns: 2.2rem 1fr; }
  .index-row .meta { display: none; }
  .contact-cards { grid-template-columns: 1fr; }
  .hero__nav { gap: 14px; }
}