/* India's Wide-Body Window
   Bain visual identity. One red per view, generous whitespace, minimal chrome.
   The red is a signal, not a decoration: if everything is emphasised, nothing is. */

:root {
  --red: #CC0000;
  --accent: #EE3224;
  --ink: #1A1A1A;
  --grey: #999999;
  --light: #E6E6E6;
  --paper: #FFFFFF;
  --wash: #FAFAFA;

  /* Serif for display, sans for body and data. This is how published analysis is
     actually set (Bain Insights, McKinsey Quarterly, FT long-form): the serif
     carries authority in headlines, the sans stays legible at small sizes and in
     chart labels. IBM Plex is used because the two are drawn as one superfamily,
     so they share proportions, and Plex Sans has true tabular numerals, which the
     reconciliation table needs to align. */
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1180px;
  --gutter: 32px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--wash);
  padding: 1px 5px;
  border-radius: 3px;
}
a { color: var(--red); text-decoration: none; border-bottom: 1px solid var(--light); }
a:hover { border-bottom-color: var(--red); }

/* ---------------------------------------------------------------- hero */

.hero {
  padding: 100px 0 72px;
  border-bottom: 1px solid var(--light);
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(42px, 6.5vw, 76px);
  font-weight: 700;
  margin-bottom: 20px;
}

/* The case question is the second most important line on the page, so it takes
   the display face too. Everything below the answer stays in the sans. */
.question {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 27px);
  color: var(--ink);
  max-width: 30ch;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 44px;
}

/* The governing thought. Set apart by a hairline rule and type scale rather
   than a thick coloured bar: the red eyebrow already carries the emphasis, and
   a heavy side accent repeated across components reads as ornament. */
.answer {
  border-top: 1px solid var(--ink);
  padding: 22px 0 0;
  max-width: 68ch;
  margin-bottom: 56px;
}

.answer-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

/* The governing thought. Serif, because it is the one sentence the whole page
   exists to deliver. */
.answer p {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.5;
  margin: 0;
}

/* Who is deciding, and what. Set as a definition list rather than prose because
   a reader scanning for "is this a real decision or a market study" should find
   the answer without reading a paragraph. Deliberately quiet: it is scaffolding
   for the argument above it, not a competing headline, so no red and no rules. */
/* Four fields, so the min track is sized to fit all four on one row at the wrap
   width and fall to two rather than stranding one on a line of its own. */
/* NAME IS TAKEN. This is the decision list only. The two-page brief uses
   `.brief-doc`, because a body carrying this class becomes a grid container and
   Chrome then ignores every forced page break inside it. See the print block
   near the end of this file. */
.brief {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px 40px;
  margin: 0 0 52px;
}

.brief div { margin: 0; }

.brief dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 6px;
}

.brief dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--light);
  border: 1px solid var(--light);
}

.kpi { background: var(--paper); padding: 26px 22px; }

/* Hero numbers stay in the sans: Plex Sans has tabular figures, so the four
   cards align on the decimal rather than drifting. */
.kpi .num {
  display: block;
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--red);
  line-height: 1;
  margin-bottom: 10px;
}

.kpi .lbl { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.kpi .note { display: block; font-size: 13px; color: var(--grey); line-height: 1.45; }

.hero-links {
  margin: 28px 0 0;
  font-size: 15px;
}

.hero-links a { font-weight: 600; }
.hero-links span { color: var(--grey); font-size: 14px; }

/* ------------------------------------------------------------- scrolly */

.scrolly { padding: 0 0 40px; }

.scrolly-inner {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 56px;
  align-items: start;
}

.steps { padding: 40px 0; }

.step {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  opacity: 0.32;
  transition: opacity 0.35s ease;
  border-left: 3px solid transparent;
  padding-left: 22px;
}

.step.is-active { opacity: 1; border-left-color: var(--red); }

.step h2 { font-size: 27px; font-weight: 600; }
.step p { color: #333; }

.step .aside {
  font-size: 15px;
  color: var(--grey);
  border-top: 1px solid var(--light);
  padding-top: 12px;
  margin-top: 6px;
}

/* Pivot callouts: where the evidence turned the analysis against itself.
   Deliberately not styled as a warning. These are the strongest content on the
   page, so they read as an annotation in the margin of the argument rather than
   as an erratum bolted onto it. The accent, not the primary red, because the red
   belongs to the chart the reader is looking at while this sits beside it. */
.pivot {
  margin-top: 18px;
  padding: 14px 0 14px 16px;
  border-left: 2px solid var(--accent);
  background: var(--wash);
  padding-right: 16px;
}

.pivot-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.pivot p {
  font-size: 15px;
  line-height: 1.55;
  color: #333;
  margin: 0;
}

.pivot a { color: var(--ink); text-decoration-color: var(--grey); }
.pivot a:hover { color: var(--accent); }

/* Column, not row. This was a flex row carrying one child; adding the data
   table put the table beside the chart instead of under it. */
.sticky-graphic {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chart { width: 100%; height: 68vh; flex: 0 0 auto; }

.chart-fallback {
  font-size: 14px;
  color: var(--grey);
  border: 1px dashed var(--light);
  padding: 20px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- proof */

.proof {
  background: var(--wash);
  border-top: 1px solid var(--light);
  border-bottom: 1px solid var(--light);
  padding: 84px 0;
}

.proof h2 { font-size: 34px; font-weight: 700; max-width: 22ch; }

.lede { font-size: 19px; max-width: 72ch; color: #333; margin-bottom: 40px; }

.recon {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  margin-bottom: 40px;
  font-size: 15px;
}

.recon th {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 600;
  padding: 14px 18px;
  border-bottom: 2px solid var(--light);
}

.recon th:first-child, .recon td:first-child { text-align: left; }
.recon td { text-align: right; padding: 12px 18px; border-bottom: 1px solid var(--light); }
.recon td.good { color: var(--grey); }
.recon tr.flagged td { background: #FFF6F6; }
.recon td.bad { color: var(--red); font-weight: 600; }
.recon tr.total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none; }

/* Sits on the grey proof band, so a plain white card with a hairline border
   separates it. Emphasis comes from the heading colour, not from a side bar. */
.callout {
  background: var(--paper);
  border: 1px solid var(--light);
  padding: 28px 32px;
  max-width: 80ch;
}

.callout h3 { font-size: 19px; font-weight: 600; color: var(--red); }
.callout p:last-child { margin-bottom: 0; }

/* --------------------------------------------------- recommendation */

/* On the wash, like the proof band, because both are "here is the evidence
   behind the claim" sections rather than narrative. The scrolly between them
   stays on paper. */
.reco {
  background: var(--wash);
  border-top: 1px solid var(--light);
  padding: 84px 0;
}

.reco h2 { font-size: 34px; font-weight: 700; max-width: 24ch; }
.reco h3 { font-size: 20px; font-weight: 600; margin: 44px 0 8px; }
.reco > .wrap > p { max-width: 80ch; }

/* The option and risk tables carry sentences, not figures, so they cannot use
   the reconciliation table's right-aligned tabular treatment. */
.options { font-size: 14px; margin-bottom: 20px; }
.options th, .options td { text-align: left; vertical-align: top; }
.options td { padding: 13px 18px; }
.options th { text-align: left; }
.options tr.chosen td { background: #FFF6F6; }
.options tr.chosen td:first-child { box-shadow: inset 3px 0 0 var(--red); }

/* ------------------------------------------------------------- pivots */

/* Sits on paper, between the grey proof band and the grey-free method footer,
   so it reads as its own chapter rather than a continuation of the sources. */
.pivots { padding: 84px 0; }
.pivots h2 { font-size: 34px; font-weight: 700; max-width: 26ch; }

.pivot-list {
  list-style: none;
  counter-reset: pivot;
  padding: 0;
  margin: 0 0 48px;
}

.pivot-list li {
  counter-increment: pivot;
  position: relative;
  padding: 0 0 34px 76px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--light);
  max-width: 88ch;
}

.pivot-list li:last-child { border-bottom: none; }

/* The numeral is the only red in this section. Set large and in the display
   face so the five read as a sequence at a glance, which is the point: the
   count matters as much as any single entry. */
.pivot-list li::before {
  content: counter(pivot);
  position: absolute;
  left: 0;
  top: -6px;
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.pivot-list h3 { font-size: 21px; font-weight: 600; margin-bottom: 14px; max-width: 44ch; }
.pivot-list p { font-size: 16px; color: #333; margin-bottom: 10px; }
.pivot-list p:last-child { margin-bottom: 0; }
.pivot-list strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- method */

.method { padding: 84px 0 100px; }
.method h2 { font-size: 30px; font-weight: 700; margin-bottom: 36px; }
.method h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; }

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  margin-bottom: 48px;
}

.method ul { margin: 0 0 1em; padding-left: 20px; }
.method li { margin-bottom: 12px; color: #333; }
.method .small { font-size: 14px; color: var(--grey); }

.written {
  border-top: 1px solid var(--light);
  padding-top: 32px;
  margin-bottom: 48px;
  max-width: 88ch;
}

.doclinks { list-style: none; padding: 0; margin: 24px 0 0; }

.doclinks li {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 11px 0;
  border-bottom: 1px solid var(--light);
  margin: 0;
}

.doclinks a { font-weight: 600; border-bottom: none; }
.doclinks a:hover { color: var(--red); }
.doclinks span { font-size: 14px; color: var(--grey); line-height: 1.45; }

.units-note {
  border-top: 1px solid var(--light);
  padding-top: 32px;
  max-width: 80ch;
}

.colophon {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--light);
  font-size: 14px;
  color: var(--grey);
  max-width: 80ch;
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }

  .hero { padding: 56px 0 44px; }

  .scrolly-inner { grid-template-columns: 1fr; gap: 0; }

  /* Sticky graphic sits above the prose on small screens, so the chart is
     visible while its explanation scrolls underneath it. */
  .sticky-graphic {
    position: sticky;
    top: 0;
    height: 56vh;
    background: var(--paper);
    border-bottom: 1px solid var(--light);
    z-index: 2;
    order: -1;
  }

  .chart { height: 54vh; }
  .step { min-height: auto; padding: 32px 0 32px 16px; opacity: 1; border-left-width: 2px; }
  .step.is-active { border-left-color: var(--red); }
  .step h2 { font-size: 22px; }

  .recon { font-size: 13px; display: block; overflow-x: auto; white-space: nowrap; }
  .recon th, .recon td { padding: 10px 12px; }

  /* The option and risk tables carry sentences, not figures, so they must NOT
     inherit the reconciliation table's nowrap. Left alone, one cell of prose
     stretched to 839px and the table to 1300px on a 335px screen. They still
     scroll, because four columns will not fit either way, but each cell wraps
     so the scroll is short rather than a paragraph wide. */
  .options { white-space: normal; min-width: 620px; font-size: 13px; }
  .options td { padding: 10px 12px; }
  .reco { padding: 56px 0; }
  .reco h2 { font-size: 26px; }
  .reco h3 { font-size: 18px; margin-top: 32px; }

  .pivots { padding: 56px 0; }
  .pivots h2 { font-size: 26px; }

  /* The numeral moves above the heading rather than beside it. At 76px of left
     padding on a 320px screen the text column collapses to nothing. */
  .pivot-list li { padding: 0 0 28px; margin-bottom: 28px; }
  .pivot-list li::before { position: static; display: block; font-size: 34px; margin-bottom: 6px; }
  .pivot-list h3 { font-size: 19px; }

  .brief { gap: 20px; margin-bottom: 36px; }

  .doclinks li { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .step { transition: none; }
}

/* -------------------------------------------------------------- report */

/* report.html reuses every rule above and only needs a linear layout in place
   of the sticky scrolly, plus print rules. It holds no prose of its own: it
   reads index.html at load and rebuilds the same content in reading order, so
   there is one copy of the narrative and it cannot drift. */

.report-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--light);
  margin-bottom: 44px;
}

.report-bar button {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
  background: var(--red);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.report-bar button:hover { background: var(--accent); }

.report-cover { padding-bottom: 48px; border-bottom: 1px solid var(--light); }
.report-cover h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 700; margin-bottom: 18px; }
.report-cover .question { max-width: 44ch; margin-bottom: 36px; }

/* The steps carry the opacity and left rule that the scrolly uses to show which
   one is active. In a linear document nothing is inactive, so both come off. */
.report-step {
  padding: 52px 0 16px;
  border-top: 1px solid var(--light);
  max-width: 84ch;
  opacity: 1;
  min-height: 0;
}

.report-step:first-child { border-top: none; }
.report-step h2 { font-size: 26px; font-weight: 600; max-width: 30ch; }

.report-chart {
  width: 100%;
  max-width: 900px;
  margin: 24px 0 8px;
}

.report-block { padding: 56px 0 0; }
.report-block.reco, .report-block.proof { background: none; border: none; }
.report-block > h2 { font-size: 28px; }

.loading { color: var(--grey); font-size: 15px; }

@media print {
  /* Chrome prints backgrounds off by default; the layout must survive that, so
     nothing here relies on a fill to be legible. */
  .report-bar { display: none; }

  body { font-size: 11pt; line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }

  .report-cover { page-break-after: always; }

  /* Keep a step's argument with the exhibit that proves it. */
  .report-step { page-break-inside: avoid; padding: 22pt 0 8pt; max-width: none; }
  .report-step h2 { font-size: 15pt; page-break-after: avoid; }
  .report-chart { page-break-inside: avoid; max-width: none; margin: 12pt 0; }

  .report-block { page-break-before: always; padding: 0; }
  .pivot-list li { page-break-inside: avoid; }
  .callout, .pivot { page-break-inside: avoid; }

  /* Four columns of prose do not fit a printed page at a readable size. */
  .options { min-width: 0; font-size: 8.5pt; white-space: normal; }
  .options td { padding: 5pt 7pt; }
  .recon { font-size: 9pt; white-space: normal; display: table; }

  /* A URL after every link turns the source list into unreadable noise; the
     documents are named in the text and the repo is on the colophon. */
  a { text-decoration: none; color: var(--ink); }
  a[href^="http"]::after { content: ""; }
}

/* ---------------------------------------------------------------- deck */

/* One claim and one exhibit per screen. Scroll-snap rather than hijacked
   scrolling: the keys are a convenience, not a cage, so a reader who prefers to
   scroll still can and the browser's own find and zoom keep working. */
.deck { overflow-x: hidden; }

.deck-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--light);
  font-size: 13px;
}

.deck-bar a { font-weight: 600; border-bottom: none; }
.deck-bar #counter { color: var(--grey); font-variant-numeric: tabular-nums; }

#slides { scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; }

.slide {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 64px var(--gutter) 40px;
  border-bottom: 1px solid var(--light);
}

.slide-inner { max-width: var(--wrap); margin: 0 auto; width: 100%; }

.slide-split {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  gap: 48px;
  align-items: center;
}

.slide-text h2 { font-size: 30px; font-weight: 600; margin-bottom: 18px; }
.slide-text p { font-size: 16px; color: #333; }
.slide-chart { width: 100%; height: 70vh; min-height: 380px; }

.slide-title h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 700; margin-bottom: 18px; }
.slide-title .question { margin-bottom: 36px; }
.deck-hint { margin-top: 40px; font-size: 13px; color: var(--grey); }

@media (max-width: 900px) {
  .slide { padding: 72px 20px 32px; }
  .slide-split { grid-template-columns: 1fr; gap: 20px; }
  .slide-text h2 { font-size: 22px; }
  .slide-text p { font-size: 15px; }
  .slide-chart { height: 46vh; min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) { #slides { scroll-behavior: auto; } }

/* --------------------------------------------------------------- brief */

/* Two pages, each standing alone: one for someone deciding whether the
   ANALYSIS deserves a colleague's time, one for someone deciding whether the
   PERSON deserves an interview. Sized so Chrome prints each to its own sheet,
   which is the whole point: an attachment forwards, a link asks for effort. */
.brief-doc { font-size: 15px; }

.brief-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--light);
  font-size: 13px;
}

.brief-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 44px var(--gutter) 56px;
  border-bottom: 1px solid var(--light);
}

.brief-page:last-child { border-bottom: none; }
.brief-page h1 { font-size: 38px; font-weight: 700; margin-bottom: 12px; }
.brief-page h2 { font-size: 19px; font-weight: 600; margin: 26px 0 10px; }
.brief-page h3 { font-size: 15px; font-weight: 600; color: var(--red); margin-bottom: 8px; }

.brief-q {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  color: #333;
  max-width: 62ch;
  margin-bottom: 24px;
}

.brief-doc .answer { margin-bottom: 26px; padding-top: 16px; }
.brief-doc .answer p { font-size: 19px; }

.brief-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--light);
}

.brief-nums strong {
  display: block;
  font-size: 32px;
  font-weight: 600;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 5px;
}

.brief-nums span { font-size: 13px; color: #333; line-height: 1.45; }

.brief-list { margin: 0 0 18px; padding-left: 20px; }
.brief-list li { margin-bottom: 9px; color: #333; }

.brief-check {
  background: var(--wash);
  border-left: 2px solid var(--accent);
  padding: 16px 18px;
  margin-top: 24px;
}

.brief-check p { font-size: 14px; color: #333; margin-bottom: 8px; }
.brief-link { font-size: 13px; color: var(--grey); margin: 0; }
.brief-table { font-size: 13px; margin-top: 12px; }
.brief-table td { padding: 9px 12px; }

@media print {
  .brief-bar { display: none; }
  .brief-doc { font-size: 10pt; }
  /* One audience per sheet. Without this the two run together and the second
     page stops being something you can send on its own.

     Both spellings, because `page-break-after` is the legacy one and
     `break-after` the current one. Neither worked for two commits, and the
     reason was not the syntax: the page carried `<body class="brief">`, which
     collided with the decision-list `.brief` above and made the body a GRID
     CONTAINER. Chrome does not honour a forced break between grid items, so
     both properties were correct and both inert. The body is `.brief-doc` now.
     A test pins it. */
  .brief-page {
    page-break-after: always;
    break-after: page;
    border-bottom: none;
    padding: 0 0 12pt;
    max-width: none;
  }
  .brief-page:last-child { page-break-after: auto; break-after: auto; }
  .brief-page h1 { font-size: 22pt; }
  .brief-nums strong { font-size: 18pt; }
  .brief-check { page-break-inside: avoid; }
}