/* ==========================================================================
   MERIDIAN — Home
   A narrative in six movements: thesis, mission, the consultant, the creed,
   the consequence, the handoff. Composition is asymmetric throughout; the
   reader's eye is pulled left, then right, then centre.
   ========================================================================== */

/* ---- 1. Overture ------------------------------------------------------- */

.overture{
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gap-s);
  padding-top: clamp(7rem, 16vh, 11rem);
  padding-bottom: var(--gap-m);
}

.overture__note{
  grid-column: 1 / -1;
  align-self: start;
}

.overture__thesis{
  grid-column: 1 / span 9;
  align-self: center;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  max-width: 18ch;
}
/* Emphasis lives on the line, not on an inline <em>: splitWords() rewrites the
   line's textContent, so any inline markup inside it would be destroyed. */
.overture__thesis [data-line]{ display: block; }
.overture__thesis .is-em{
  font-style: italic;
  color: var(--cobalt);
}

/* The meridian: one hairline, drawn on load, echoed by the page transition. */
.overture__rule{
  grid-column: 1 / span 9;
  align-self: center;
  margin-top: var(--gap-m);
  transform: scaleX(0);
  transform-origin: left center;
}

.overture__foot{
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-s);
}

.overture__attrib{
  text-align: right;
  max-width: 26ch;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--obsidian-62);
}

@media (max-width: 900px){
  .overture__thesis,
  .overture__rule{ grid-column: 1 / -1; max-width: none; }
  .overture__attrib{ display: none; }
}

/* ---- 2. Mission -------------------------------------------------------- */

.mission{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap-s);
  padding-block: var(--gap-xl);
}

.mission__note{
  grid-column: 1 / span 2;
  padding-top: .6rem;
}

.mission__panel{
  grid-column: 4 / span 8;
  padding: clamp(2rem, 4vw, 3.4rem);
}

.mission__text{
  font-family: var(--serif);
  font-size: var(--t-h3);
  line-height: 1.5;
  color: var(--obsidian-82);
  max-width: 40ch;
}

@media (max-width: 900px){
  .mission__note{ grid-column: 1 / -1; margin-bottom: var(--gap-s); }
  .mission__panel{ grid-column: 1 / -1; }
}

/* ---- 3. The consultant ------------------------------------------------- */

.consultant{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap-s);
  padding-block: var(--gap-xl);
  border-top: 1px solid var(--obsidian-08);
}

.consultant__aside{
  grid-column: 1 / span 4;
}
.consultant__sticky{
  position: sticky;
  top: 22vh;
}

.consultant__name{
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  margin-top: var(--gap-xs);
}

.consultant__role{
  margin-top: var(--gap-s);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--cobalt);
}

.consultant__body{
  grid-column: 6 / span 7;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}
.consultant__body p{ max-width: 62ch; }

.credentials{
  margin: var(--gap-s) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--obsidian-08);
}
.credentials li{
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--gap-s);
  padding: .95rem 0;
  border-bottom: 1px solid var(--obsidian-08);
  font-size: var(--t-small);
}
.credentials dt,
.credentials .credentials__key{
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--obsidian-62);
}
.credentials__val{ color: var(--obsidian-82); line-height: 1.6; }

@media (max-width: 900px){
  .consultant__aside,
  .consultant__body{ grid-column: 1 / -1; }
  .consultant__sticky{ position: static; }
  .consultant__body{ margin-top: var(--gap-m); }
  .credentials li{ grid-template-columns: 1fr; gap: .2rem; }
}

/* ---- 4. The creed ------------------------------------------------------ */

.creed{
  padding-block: var(--gap-xl);
  display: grid;
  place-items: center;
}

.creed__panel{
  max-width: 46rem;
  padding: clamp(2.5rem, 5vw, 4.2rem);
}

.creed__text{
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.62;
  color: var(--obsidian-82);
  margin-top: var(--gap-s);
}
.creed__text em{ font-style: italic; color: var(--cobalt); }

/* ---- 5. The consequence ------------------------------------------------ */

.consequence{
  padding-block: var(--gap-xl);
  border-top: 1px solid var(--obsidian-08);
}

.consequence__text{
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.5;
  max-width: 24ch;
  margin-top: var(--gap-m);
  color: var(--obsidian-82);
}

/* Figures read as part of the sentence, not as a stat grid bolted beside it. */
.figure{
  font-family: var(--mono);
  font-weight: 500;
  font-size: .82em;
  color: var(--cobalt);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.consequence__source{
  margin-top: var(--gap-m);
  font-size: var(--t-small);
  color: var(--obsidian-62);
  max-width: 54ch;
}
.consequence__source a{ border-bottom: 1px solid var(--obsidian-18); }
.consequence__source a:hover{ color: var(--cobalt); border-color: var(--cobalt); }