/* ═══════════════════════════════════════════════════════════════════════
   Whitepaper and About.

   Everything shared with the home page is in styles.css and is used as-is:
   the palette, the pill, the reveal, the meta rules, the footer. This file
   only adds what these two pages need and the home page does not.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────── the header here ──── */

/*
  The header sits over these banners exactly as it sits over the home page's
  hero: transparent, with the wordmark reversed out, turning solid once the
  reader is past the picture. Drawing it solid from the first frame was a
  guess, and it puts a white bar across the top of a photograph that was
  composed to run to the edge.
*/
.nav__links a[aria-current="page"] { font-weight: 600; }

/* ───────────────────────────────────────────────────────────── banner ──── */

/*
  Shorter than the home page's hero, and deliberately.

  A hero has to carry the whole idea to somebody who arrived by accident.
  These pages were chosen from a menu, so the banner only has to say which
  page this is and then get out of the way of the reading.
*/
.banner {
  position: relative;
  isolation: isolate;
  /* Taller. The live banners run to about two thirds of the viewport, and
     the first pass cut them short enough that the photograph read as a strip
     behind a title rather than as a picture. */
  min-height: 66svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gutter);
  overflow: hidden;
  color: #fff;
  background: var(--ink);
}

.banner__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /*
    The source is a 1448x2172 portrait and the banner is a 1440x594 letterbox,
    so cover shows about a quarter of the picture and which quarter is
    entirely down to this line. At 32% it was framing the wall and the
    trailing plants and cutting the subject off at the chin.

    50% puts the face in the upper half with the title clearing it below,
    which is the arrangement the live page uses. Checked against 32, 42, 58
    and 66 side by side rather than nudged until it looked acceptable.
  */
  object-position: center 50%;
  z-index: -2;
}

/*
  Weighted to the bottom, where the type is, and almost absent at the top,
  where the header is and the photograph is doing the work. The first pass
  washed the whole frame evenly and turned a pale, soft picture grey.
*/
.banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 78%);
  z-index: -1;
  pointer-events: none;
}

.banner--soft .banner__bg { opacity: 1; object-position: center 40%; }

.banner__tag {
  display: block;
  /* Nearly body size on the live pages, not caption size. */
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  opacity: 0.92;
}

/* White, with the asterisk in green. The mark on the home page is the whole
   word in green; here the word is the page's name and the asterisk is the
   only piece of brand it needs. */
.banner__title {
  margin: 0;
  font-size: clamp(44px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #fff;
}
.banner__title em { font-style: normal; color: var(--green); }

/* The whitepaper's title is green throughout, asterisk included, where the
   About title is white with only the asterisk in green. Read off the live
   pages rather than assumed to match. */
.banner__title--green,
.banner__title--green em { color: var(--green); }

/* ───────────────────────────────────────────────────── wider meta rule ──── */

.meta--wide { max-width: var(--measure); }

/* ──────────────────────────────────────────────────────── about: sheet ──── */

.sheet {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 8vw, 110px) var(--gutter) clamp(50px, 6vw, 80px);
}
.sheet__inner { position: relative; z-index: 1; max-width: var(--measure); margin: 0 auto; }

/*
  Name on the left, the answers on the right.

  One column on a phone, because at that width a two column split gives the
  name a line of its own and then a column of text too narrow to read.
*/
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 36px);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.85fr 2fr; }
}

.split__name {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.022em;
}

.rows { margin: 0; }

/* A rule above each row rather than between them, which is the same device
   the home page's two columns use. */
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
@media (min-width: 720px) {
  .row { grid-template-columns: 0.8fr 2fr; gap: clamp(16px, 3vw, 40px); }
}
.row dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-80);
}
.row dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-55);
}

/* ───────────────────────────────────────────────────── about: the work ──── */

.work { padding: clamp(50px, 7vw, 90px) var(--gutter) clamp(60px, 8vw, 100px); }

.work__inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .work__inner { grid-template-columns: 1fr 1.15fr; }
}

.work__lede .display { margin-bottom: 18px; font-size: clamp(34px, 5vw, 62px); }
.work__lede p {
  margin: 0 0 18px;
  max-width: 300px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-55);
}

.tags { list-style: none; margin: 0; padding: 0; }
.tags li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-80);
}
.dot--green { background: var(--green); width: 9px; height: 9px; }

/* A stack of quiet rows rather than cards with borders: they are one list of
   roles, and four outlined boxes would read as four separate things. */
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.role {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--cream);
  transition: background var(--fast) var(--ease);
}
.role:hover { background: #efeeec; }
.role__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 8px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.role__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role__body strong { font-size: 13px; font-weight: 600; }
.role__body span { font-size: 11.5px; color: var(--ink-55); }

/* ──────────────────────────────────────────────────── full-bleed photo ──── */

.bleed { margin: 0; }
.bleed img {
  width: 100%;
  height: clamp(220px, 34vw, 430px);
  object-fit: cover;
  display: block;
}

/* ─────────────────────────────────────────────── about: the note grid ──── */

.edu {
  text-align: center;
  padding: clamp(56px, 8vw, 100px) var(--gutter) clamp(60px, 8vw, 110px);
}
.edu .display { margin-bottom: 16px; font-size: clamp(32px, 5.4vw, 58px); }
.edu__sub {
  margin: 0 auto clamp(30px, 4vw, 48px);
  max-width: 500px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-55);
}

.notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  max-width: var(--measure);
  margin: 0 auto;
  text-align: left;
}
@media (min-width: 640px) { .notes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .notes { grid-template-columns: repeat(3, 1fr); } }

.note {
  position: relative;
  margin: 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}
.note__icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-bottom: 26px;
  border-radius: 8px;
  background: var(--cream);
  font-size: 13px;
  font-weight: 700;
}

/*
  Five dots, and they are a counter.
  
  On the live cards the first note shows one green dot and four grey, the
  second shows two green, and so on: it is the note's place in the sequence,
  drawn the way a carousel draws its position. The first pass read them as
  decoration and rendered three identical marks, which is why they looked
  wrong in a way that was hard to name.

  Built from a flex row of five spans generated by ::before and box-shadow
  would not allow per-dot colours, so the markup carries data-step and the
  fill is a background gradient with a hard stop. One element, five dots,
  and the step decides where the green ends.
*/
.note__dots {
  position: absolute;
  top: 26px; right: 20px;
  width: 60px; height: 6px;
  /* Five 6px dots with 7px gaps, painted as repeating circles. */
  background-image: radial-gradient(circle 3px at 3px 3px, currentColor 100%, transparent 0);
  background-size: 13px 6px;
  background-repeat: repeat-x;
  color: #D8D8D8;
}
/* The green portion, laid over the grey and clipped to the step. */
.note__dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle 3px at 3px 3px, var(--green) 100%, transparent 0);
  background-size: 13px 6px;
  background-repeat: repeat-x;
  /* 13px per dot, so n dots is n*13 wide. */
  width: calc(var(--step, 1) * 13px);
}
.note__dots[data-step="1"] { --step: 1; }
.note__dots[data-step="2"] { --step: 2; }
.note__dots[data-step="3"] { --step: 3; }
.note__dots[data-step="4"] { --step: 4; }
.note__dots[data-step="5"] { --step: 5; }

.note h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.sq--red { background: #E5484D; }
.note__chip {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-55);
}
.note p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--ink-55);
}

/* One cell of the grid is a photograph rather than a note. */
.note--photo { padding: 0; border: 0; }
.note--photo img {
  width: 100%; height: 100%;
  min-height: 190px;
  object-fit: cover;
  border-radius: 14px;
}

/* ─────────────────────────────────────────────────── whitepaper: paper ──── */

/*
  The article.

  A measured column and a serif, which is what the live page sets and what
  4,000 words asks for. Everything else on this site is arranged; this is
  set, and the only job is that it can be read straight through.
*/
.paper {
  max-width: 660px;
  margin: 0 auto;
  padding: clamp(46px, 6vw, 80px) var(--gutter) clamp(50px, 7vw, 90px);
}

.paper__title {
  margin: 0 0 10px;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.paper__date {
  margin: 0 0 clamp(26px, 4vw, 40px);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-55);
}

.paper__body {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 16.5px;
  line-height: 1.78;
  color: rgba(9, 9, 9, 0.78);
}
.paper__body p { margin: 0 0 1.35em; }
.paper__body strong { color: var(--ink); font-weight: 600; }

/* The section headings stay in the sans. They are signposts through the
   argument rather than part of it, and the change of face is what makes
   them scannable when somebody is looking for one section. */
.paper__body h3 {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  margin: 2em 0 0.9em;
  font-size: clamp(21px, 2.8vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
}
.paper__body h4 {
  margin: 1.9em 0 0.8em;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}
/* One subheading is a statement rather than a letter-numbered step, so it
   takes the sans to say so. */
.paper__standard {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 18px !important;
  letter-spacing: -0.02em;
}

.paper__list { margin: 0 0 1.35em; padding-left: 1.1em; }
.paper__list li { margin-bottom: 0.9em; }

.paper__quote {
  margin: 1.6em 0;
  padding-left: 18px;
  border-left: 2px solid var(--green);
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
}
.paper__quote span { display: block; margin-top: 0.7em; }

/* Data, so it is set in the sans. Scrolls inside its own box rather than
   pushing the article sideways on a phone. */
.paper__tablewrap { margin: 1.8em 0; overflow-x: auto; }
.paper__table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
}
.paper__table th {
  text-align: left;
  padding: 0 16px 14px 0;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.paper__table td {
  padding: 9px 16px 9px 0;
  color: var(--ink-80);
  font-variant-numeric: tabular-nums;
}
.paper__table tbody tr:first-child td { padding-top: 4px; }

.paper__rule {
  margin: 2.4em 0 1.6em;
  border: 0;
  border-top: 1px solid var(--line);
}

.paper__refs {
  margin: 0;
  padding-left: 1.2em;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-55);
}
.paper__refs li { margin-bottom: 0.7em; }

/* ────────────────────────────────────────────── the footer's wordmark ──── */

/* Both pages close on the mark at size, which the home page does not do. */
.foot__wordmark {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(24px, 4vw, 44px);
}
.foot__wordmark img {
  width: clamp(200px, 42vw, 520px);
  height: auto;
}