/* ==========================================================================
   FIELD NOTES — the reading experience
   Shares tokens.css for every value and ../work/study.css for the chrome
   (nav, buttons, tlink, reveal, foot). This file only sets the article.

   The recipe, from the editorial study (Stripe, Linear, Craig Mod, Increment):
   a 660px measure, body at 85% contrast, one intermediate heading level,
   3:1 space-before to space-after on headings, a standfirst voice between
   title and body, and one element that breaks the column (the pull quote).
   The column sits left, Increment-style: the empty right margin is part of
   the design, and the pull quote is allowed to reach into it.
   ========================================================================== */

.note-page { padding-top: 132px; }

/* ---------- Opening stack: kicker, title, standfirst, meta ---------- */
.note-head { max-width: 780px; }
.note-head h1 {
  margin-top: 18px;
  font-size: var(--text-h2);
  line-height: 1.04; letter-spacing: -1.2px;
  max-width: 17ch; text-wrap: balance;
}
.note-dek {
  margin-top: 22px;
  font-size: var(--text-lead); line-height: 1.5;
  font-weight: var(--weight-medium); color: var(--ink-muted);
  max-width: 52ch; text-wrap: balance;
}
.note-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 28px;
  font-size: 12px; font-weight: var(--weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.note-meta i { font-style: normal; }
.note-meta i + i::before {
  content: ""; display: inline-block; width: 3px; height: 3px;
  border-radius: var(--radius-circle); background: #B6C1CC;
  margin-right: 10px; vertical-align: 3px;
}
.note-rule { border: 0; height: 1px; background: var(--hairline); margin: 44px 0 0; max-width: 780px; }

/* ---------- Body ---------- */
/* In ch, not px. The body steps 18px -> 16px at the 1199 breakpoint, so a
   fixed 660px column got LONGER as the screen got smaller: 67 characters at
   1512 and 87 from 1199 all the way down to 810, which is every iPad and
   every half-width window. In ch it tracks the font and holds ~68. */
.note-body { max-width: 68ch; margin-top: 52px; position: relative; }
.note-body p {
  margin: 0; font-size: var(--text-body); line-height: 1.68;
  font-weight: var(--weight-medium); color: var(--ink-muted);
}
.note-body p + p { margin-top: 22px; }
.note-body h2 {
  margin: 58px 0 16px;
  font-size: 25px; line-height: 1.25; letter-spacing: -0.4px;
  /* 26ch put eight of these headings on two lines with one word alone on the
     second. The h1 and the cards already balance; this was the one that did not. */
  max-width: 34ch; text-wrap: balance;
}
.note-body strong { color: var(--ink); font-weight: var(--weight-semibold); }
.note-body a {
  color: inherit; font-weight: var(--weight-semibold);
  text-decoration: underline; text-underline-offset: 3.5px;
  text-decoration-thickness: 1px; text-decoration-color: #B6C1CC;
  transition: text-decoration-color var(--dur-2) var(--ease-standard);
}
.note-body a:hover { text-decoration-color: var(--a); }

/* The one element allowed to leave the column: a display pull quote,
   bracketed by thin accent rules, reaching into the right margin. */
.note-pull {
  margin: 48px 0; padding: 30px 0;
  width: calc(100% + 170px);
  border-top: 1.5px solid var(--a); border-bottom: 1.5px solid var(--a);
  font-family: var(--font-display); font-size: 27px; font-weight: var(--weight-semibold);
  line-height: 1.35; letter-spacing: -0.4px; color: var(--ink);
}

/* A scene break: the short centered rule, not a full-width one. */
.note-break { border: 0; height: 1px; width: 150px; background: #C6D0DB; margin: 48px auto; }

/* ---------- Close: rule, byline, then one quiet next step ---------- */
.note-close {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  max-width: 660px; margin-top: 64px; padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.note-close span { font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink); }
.note-close em { font-style: normal; font-weight: var(--weight-medium); color: var(--ink-muted); }

/* ---------- More field notes: hand-picked rows, not a card grid ---------- */
.note-more { max-width: 780px; margin-top: 84px; }
.note-more-label {
  font-size: 12px; font-weight: var(--weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.note-more a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px;
  padding: 22px 2px; border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}
.note-more a:first-of-type { margin-top: 14px; border-top: 1px solid var(--hairline); }
.note-more b {
  display: block; font-family: var(--font-display); font-size: 22px;
  font-weight: var(--weight-semibold); letter-spacing: -0.4px; color: var(--ink);
  transition: color var(--dur-2) var(--ease-standard);
}
.note-more a:hover b { color: var(--a); }
.note-more small {
  display: block; margin-top: 6px;
  font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink-muted);
}
.note-more time { font-size: 13px; font-weight: var(--weight-medium); color: var(--ink-faint); white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .note-pull { width: 100%; }
  /* 17ch capped the title at 351px while the paragraphs under it ran 660px,
     so the headline sat in a narrow ragged stack beside a much wider column. */
  .note-head h1 { font-size: var(--text-h2-sm); max-width: 22ch; }
}
@media (max-width: 809px) {
  .note-page { padding-top: 108px; }
  .note-body h2 { font-size: 22px; }
  /* Held a step above the h2. At 22px they shared family, weight, colour and
     tracking, so the pull quote read as another section heading. */
  .note-pull { font-size: 26px; }
  .note-more a { grid-template-columns: 1fr; gap: 4px; }
}