/* ============================================================================
   editorial.css — article layer for The Long View

   The brief keeps the dark base: the homepage console is the thing the client
   likes, and it earns the darkness. What changes is everything that made the
   articles read as machine-made.

   Diagnosis this answers, counted across the site:
     405 tracked-out uppercase labels
     354 links with an arrow appended to the text
     1377 uses of the monospace face for ordinary labels
     155 meta strings joined with middle dots
     0 photographs in 23 articles
     Inter + Space Grotesk — the commonest generated pairing there is

   Decisions:

   TYPE. Body moves to Newsreader, a serif built for screen reading. Serif body
   on a dark ground is uncommon and reads as written rather than generated. It
   also lets the measure breathe — 66 characters, not the full column width.
   Space Grotesk stays for headings so the brand is continuous with the
   homepage. Two families, clearly distinct, which is the whole budget.

   MARGIN NOTES. The signature element, and the reason this looks like nobody
   else: an adviser annotates. Short notes sit in the right rail beside the
   paragraph they answer, set in the author's voice, the way a consultant marks
   up a document before handing it back. On narrow screens they fold inline as
   indented asides rather than disappearing.

   CHROME REMOVED. No uppercase eyebrow above the headline, no mono meta line,
   no arrows appended to link text. Those encode nothing here; they were
   decoration wearing the costume of structure.

   MOTION. None added. The answer console is the one orchestrated moment on the
   page and a second effect would compete with it.
   ========================================================================== */

/* ---- column ------------------------------------------------------------
   The first version put notes in a permanent right-hand rail. With three or
   four notes in a long piece the rail is empty for most of the scroll, and a
   column of black beside the text reads as an unfinished page rather than as
   a margin. Single centred column instead; the notes become insets that
   interrupt the text deliberately, which is what an annotation does anyway.
--------------------------------------------------------------------- */
.prose-wrap .wrap { max-width: 860px; }
.prose { max-width: 720px; margin: 0 auto; }

/* ---- body type --------------------------------------------------------- */
.prose {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 20px;
  line-height: 1.62;              /* serif wants more air than sans */
  color: #d6dee8;
  letter-spacing: .002em;
}
.prose p {
  font-size: 20px;
  line-height: 1.62;
  margin: 0 0 1.35em;
  max-width: 66ch;
}
.prose p + p {
  margin-top: -.2em;              /* paragraphs read as a run, not as blocks */
}

/* The opening paragraph carries the piece. Larger, lighter, wider measure. */
.prose > p:first-of-type {
  font-size: 23.5px;
  line-height: 1.55;
  color: #eef3f9;
  margin-bottom: 1.5em;
}

.prose h2 {
  font-family: var(--display, 'Space Grotesk', sans-serif);
  font-size: 27px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text, #f9fbfe);
  margin: 2.4em 0 .7em;
  max-width: 24ch;                /* headings break early, like a magazine */
}
.prose h2:first-child { margin-top: 0; }

.prose strong { color: #f2f6fb; font-weight: 600; }
.prose em { font-style: italic; color: #e3eaf3; }

.prose a {
  color: #d6dee8;
  text-decoration: underline;
  text-decoration-color: rgba(45, 212, 255, .5);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--cyan, #2dd4ff); }

/* ---- annotations ------------------------------------------------------
   Set against the grain of the body: sans, smaller, tinted panel. They read
   as the author stopping to say something aside from the argument.
--------------------------------------------------------------------- */
.mnote {
  font-family: var(--body, Inter, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted, #ccd6e2);
  background: rgba(45, 212, 255, .05);
  border-left: 3px solid var(--cyan, #2dd4ff);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 30px 0;
  max-width: none;
}
.mnote b {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cyan, #2dd4ff);
  font-weight: 500;
  margin-bottom: 7px;
}

/* ---- figure: a number given room ---------------------------------------
   Long-form needs somewhere for the eye to rest that is not another
   paragraph. One statistic, set large, does that and carries meaning.
--------------------------------------------------------------------- */
.figure {
  margin: 38px 0;
  padding: 26px 0;
  border-top: 1px solid var(--line, #36414f);
  border-bottom: 1px solid var(--line, #36414f);
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: wrap;
}
.figure .n {
  font-family: var(--display, 'Space Grotesk', sans-serif);
  font-size: clamp(42px, 7vw, 66px);
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--cyan, #2dd4ff);
  flex: 0 0 auto;
}
.figure .t {
  font-family: var(--body, Inter, sans-serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted-dim, #aab6c4);
  max-width: 34ch;
}

/* ---- byline with a face ------------------------------------------------
   The single most humanising asset on the site is a photograph of the person
   whose forty years of judgement is the product. It appeared in no article.
--------------------------------------------------------------------- */
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.byline img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-bright, #465365);
  flex: 0 0 auto;
}
.byline .who {
  font-family: var(--body, Inter, sans-serif);
  font-size: 15.5px;
  color: var(--text, #f9fbfe);
  line-height: 1.35;
}
.byline .who span {
  display: block;
  font-size: 14px;
  color: var(--muted-dim, #aab6c4);
}

/* ---- hero -------------------------------------------------------------- */
.article-hero .article-h {
  font-size: clamp(34px, 5.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -.028em;
  max-width: 17ch;
  margin-bottom: 0;
}
.article-hero .crumb {
  font-family: var(--body, Inter, sans-serif);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;           /* was a tracked-out uppercase label */
  color: var(--muted-dim, #aab6c4);
  margin-bottom: 20px;
}

/* A photograph under the headline, not a gradient. */
.hero-figure {
  margin: 34px 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line, #36414f);
  position: relative;
}
.hero-figure img {
  display: block;
  width: 100%;
  height: clamp(240px, 34vw, 420px);
  object-fit: cover;
}
/* Bright MLS photography on a near-black page reads as a pasted-in lightbox.
   The scrim grades the lower edge into the page so the two belong together. */
.hero-figure::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(4, 6, 10, 0) 0%, rgba(4, 6, 10, .55) 100%);
  pointer-events: none;
}
.hero-figure figcaption {
  position: relative;
  z-index: 1;
  font-family: var(--body, Inter, sans-serif);
  font-size: 14px;
  color: var(--muted-dim, #aab6c4);
  padding: 12px 16px;
  background: var(--panel, #06080c);
  border-top: 1px solid var(--line, #36414f);
  margin: 0;
}

/* ---- pull quote --------------------------------------------------------
   Set in the heading face at display size, not in quotation marks. One per
   article at most; it is the loudest thing on the page after the headline.
--------------------------------------------------------------------- */
.pull {
  font-family: var(--display, 'Space Grotesk', sans-serif);
  font-size: clamp(25px, 3.4vw, 33px);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--text, #f9fbfe);
  max-width: 18ch;
  margin: 1.7em 0;
  padding-left: 22px;
  border-left: 3px solid var(--cyan, #2dd4ff);
}

@media (max-width: 720px) {
  .prose, .prose p { font-size: 18.5px; }
  .prose > p:first-of-type { font-size: 21px; }
  .prose h2 { font-size: 24px; max-width: none; }
}

@media (max-width: 1079px) {
  .console-pair { display: grid; gap: 16px; }
}

/* Consoles break the measure slightly — they are the signature element. */
.prose > .ansbox, .prose > .console-pair { max-width: none; }
@media (min-width: 900px) {
  .prose > .ansbox, .prose > .console-pair {
    width: calc(100% + 120px);
    margin-left: -60px;
  }
}
.console-pair { display: grid; gap: 18px; margin: 34px 0; }
@media (min-width: 900px) { .console-pair { grid-template-columns: 1fr 1fr; } }
.console-pair .ansbox { margin: 0; }