/* ==========================================================================
   Why It Matters — one issue, on the web
   Loads after site.css and inherits every token from it. Nothing here
   introduces a colour, a face or a radius that DESIGN.md has not already
   committed to; this file only arranges them for a weekly letter.

   Taken from prototypes/newsletter.css, which is where the design was reviewed.
   The prototype-only rules — the specimen banner and the dotted marker for
   links that were not built yet — are the only things left behind. Keep the two
   files in step: the prototype is the record of what was approved.
   ========================================================================== */

.wim {
  --wim-frame: 980px;      /* the board, the rules, the furniture */
  --wim-measure: 68ch;     /* the reading column */
  /* Muted (#857F74) on warm paper is 3.19:1 and on the sink 2.99:1 — under
     AA for text this size. Every date, scope and caption on this page is
     load-bearing (the per-figure dates ARE the honesty claim), so they take a
     darkened derivation of the same token rather than the token itself. */
  --wim-meta: color-mix(in srgb, var(--neutral) 66%, var(--ink));
}

.wim-frame {
  max-width: var(--wim-frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wim-col { max-width: var(--wim-measure); }

/* ---------- Masthead ------------------------------------------------------
   Not a sub-brand. "Why It Matters" is a title line set in the firm's own
   type over a gold rule — the periodical device — so the letter reads as
   published *by* Rai Wealth Management rather than by a second identity
   competing with the emblem in the header two centimetres above it. */

.wim-mast { padding-block: clamp(34px, 5vw, 62px) 0; }

.wim-title-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-bottom: 11px;
}
.wim-wordmark {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.7vw, 18px);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0;
}
.wim-issue {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wim-meta);
}
.wim-rule { height: 2px; background: var(--gold); border: 0; margin: 0; opacity: .85; }

.wim-head { padding-block: clamp(26px, 3.6vw, 42px) 0; }
.wim-head h1 {
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.017em;
  text-wrap: balance;
  max-width: 20ch;
}
.wim-standfirst {
  margin-top: 18px;
  color: var(--ink-soft);
  max-width: 60ch;
}

.wim-meta {
  margin-top: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 14px;
  color: var(--wim-meta);
}
.wim-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hairline); }

.wim-byline { display: flex; align-items: center; gap: 11px; }
.wim-byline img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; object-position: center 16%;
  border: 1px solid var(--hairline);
}
.wim-byline .who {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.25;
}
.wim-byline .who span {
  display: block;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 500; font-size: 12.5px; color: var(--wim-meta);
  letter-spacing: .01em;
}
.wim-byline:hover .who { color: var(--gold-ink); }

/* ---------- The board -----------------------------------------------------
   The week's state, at scale, before a word of argument. Ruled paper, not a
   card: a 1px grid drawn by the gap, cells on the page ground. Each cell that
   has a section below it is a link to it — the board is the index. */

.wim-board { padding-block: clamp(28px, 3.6vw, 44px) 0; }

.wim-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 14px;
}
.wim-board-head h2 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-ink);
}
.wim-board-head p { font-size: 12.5px; color: var(--wim-meta); }

.wim-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.wim-cell {
  background: var(--ground);
  padding: 15px 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  transition: background .25s var(--ease);
}
a.wim-cell:hover, a.wim-cell:focus-visible { background: var(--raised); }
a.wim-cell:hover .bc-k { color: var(--gold-ink); }

.bc-k {
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.35;
  /* Two lines are reserved whether the label needs them or not, so every
     figure in a row sits on the same baseline. A board whose numbers do not
     line up is a table pretending to be a board. */
  min-height: 2.7em;
}
.bc-v {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600;
  /* The documented card-headline step. Board figures need to carry the first
     viewport, so they sit above the title step and below the headline. */
  font-size: clamp(25px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
}
/* A target expressed as a range is twice as long as a rate. It drops one
   step rather than wrapping and breaking the row. */
.bc-v.is-range { font-size: clamp(20px, 2vw, 24px); }
.bc-f {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin-top: auto;
  padding-top: 5px;
}
.bc-ch { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.bc-as { font-size: 11.5px; color: var(--wim-meta); }

/* ---------- Commentary ----------------------------------------------------
   The one prose section, and the only place the page changes surface. A
   raised band, used exactly once, marks it as the different thing without
   quoting it out of the argument. */

.wim-commentary {
  margin-top: clamp(46px, 6vw, 76px);
  background: var(--raised);
  border-block: 1px solid var(--hairline);
  padding-block: clamp(44px, 6vw, 72px);
}
/* Left-aligned with every other block on the page. A centred column here
   would shift the reading edge twice in one scroll. */
.wim-commentary .wim-col { margin-inline: 0; }
.wim-commentary h2 {
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.28;
  max-width: 24ch;
  margin-bottom: 24px;
}
.wim-prose p {
  line-height: 1.72;
  color: var(--ink);
  margin-bottom: 20px;
}
.wim-prose p:last-child { margin-bottom: 0; }
.wim-prose strong { font-weight: 600; }

.wim-sign {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.wim-sign .who {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.wim-sign .who span {
  display: block;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 500; font-size: 13px; color: var(--wim-meta);
  margin-top: 2px;
}

/* ---------- Sections ------------------------------------------------------
   Five stacks of bullets in a row is the failure mode. Each section head
   carries its own scope on the right of a full-width hairline, so the eye
   gets a second axis to travel and every section announces what it covers
   before the first sentence. */

.wim-body { padding-block: clamp(46px, 6vw, 74px) 0; }

/* Breathing room only. The sticky header itself is cleared by
   `scroll-padding-top: var(--header-h)` on the root in site.css; this used to
   be a flat 96px doing that job by hand, which stacked on top of the root
   padding and pushed a jump two headers down. A .wim-sec has no padding of its
   own, so without these 20px its first line would sit flush against the bar. */
.wim-sec { scroll-margin-top: 20px; }
.wim-sec + .wim-sec { margin-top: clamp(38px, 4.6vw, 58px); }

.wim-sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 22px;
}
.wim-sec-head h2 {
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wim-sec-head .scope {
  margin-left: auto;
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--wim-meta);
  text-align: right;
}

.wim-bul { list-style: none; margin: 0; padding: 0; max-width: var(--wim-measure); }
.wim-bul li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
  margin-bottom: 13px;
}
.wim-bul li:last-child { margin-bottom: 0; }
.wim-bul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 13px; height: 1px;
  background: var(--gold);
  opacity: .75;
}
.wim-bul strong { color: var(--ink); font-weight: 600; }

/* Footnote markers on any figure whose source has to be named. */
.fn {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  font-weight: 600;
  color: var(--gold-ink);
  padding-left: 1px;
}
.fn:hover { text-decoration: underline; }
/* The marker is 8px of ink. The hit area is not: padding gives it a target
   a thumb can actually reach without disturbing the line. */
.fn { padding: 10px 6px 10px 1px; margin: -10px -6px -10px -1px; }

/* ---------- Chart ---------------------------------------------------------
   Present only when the week warrants one. Licensed-free series only, and
   every figure in it also appears as text in a bullet above. */

.wim-chart {
  margin: 30px 0 4px;
  max-width: var(--wim-measure);
}
.wim-chart .plate {
  background: var(--ground-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 20px 20px 14px;
}
.wim-chart svg { display: block; width: 100%; height: auto; }
.wim-chart figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--wim-meta);
  line-height: 1.55;
}

/* ---------- Furniture -----------------------------------------------------
   Sources, disclosure, author, close. The Full-Size-Disclosure Rule applies:
   the risk warning is set at reading size, not shrunk into a footer. */

.wim-foot { padding-block: clamp(50px, 6.4vw, 80px) clamp(60px, 8vw, 100px); }

.wim-notes { max-width: var(--wim-measure); }
.wim-notes h2 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 16px;
}
.wim-notes ol { margin: 0; padding-left: 1.35em; }
.wim-notes li {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 9px;
}
.wim-notes li:target { color: var(--ink); }
.wim-notes a { border-bottom: 1px solid var(--hairline); }
.wim-notes a:hover { border-bottom-color: var(--gold); color: var(--ink); }
.wim-notes .back {
  border: 0; color: var(--wim-meta);
  display: inline-flex; vertical-align: -2px; margin-left: 5px;
}
.wim-notes .back:hover { color: var(--gold-ink); }
/* Corrections. Absent from the prototype because the specimen issue had none,
   and they take the Sources treatment rather than a device of their own: a
   correction is the same kind of thing as a source note, which is a reader
   checking a figure and being told where it stands. */
.wim-corrections { margin-bottom: clamp(34px, 4vw, 46px); }
.wim-corrections ul { margin: 0; padding-left: 1.35em; }
.wim-corrections li { list-style: square; }
.wim-corrections .tnum { color: var(--ink); font-weight: 600; }

.wim-notes .ogl {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--wim-meta);
  line-height: 1.6;
}

.wim-author {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(34px, 4vw, 46px);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.wim-author img {
  width: 108px; height: 135px;
  border-radius: var(--r-md);
  object-fit: cover; object-position: center 14%;
  border: 1px solid var(--hairline);
}
.wim-author h2 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 4px; }
.wim-author .role { font-size: 13.5px; color: var(--wim-meta); margin-bottom: 14px; }
.wim-author p { font-size: 15.5px; color: var(--ink-soft); max-width: 62ch; margin-bottom: 14px; }
.wim-author .creds {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wim-author .creds li {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-ink);
  background: var(--gold-tint);
  border-radius: var(--r-pill, 999px);
  padding: 6px 13px;
}
.wim-author .links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; }
.wim-author .links a { color: var(--ink-soft); border-bottom: 1px solid var(--hairline); }
.wim-author .links a:hover { color: var(--ink); border-bottom-color: var(--gold); }
/* The LinkedIn link in this row carries the mark inside the anchor, as the
   footer's does, so the logo is part of the click target. Only this one: the
   two links either side of it point at pages on this site and have no logo to
   carry. Same inline-flex/8px gap as .foot-social and .who-links, so the three
   places the site sets a mark beside a word all set it the same way. This row
   sits on the page ground (#EAE6DE) with no surface of its own, so the mark
   takes the blue colourway — 4.57:1, clear of the 3:1 floor. */
.wim-author .links a.li-link { display: inline-flex; align-items: center; gap: 8px; }

.wim-close {
  margin-top: clamp(34px, 4vw, 48px);
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 62ch;
}
.wim-close a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.wim-close a:hover { border-bottom-width: 2px; }

.wim-disclosure {
  /* Hug the reading column rather than stretch the full frame: the box was as
     wide as the figures board while its text stopped at the measure, so its
     right half sat empty. Cap it to the same measure the commentary above it
     uses so the box ends where the text does. The var falls back across the
     two pages that reuse this block — the issue page (.wim) and the archive
     (.lib) — which both set the measure to 68ch. */
  max-width: var(--wim-measure, var(--lib-measure, 68ch));
  margin-top: clamp(40px, 5vw, 58px);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--navy);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
}
.wim-disclosure h2 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 16px;
}
.wim-disclosure p {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.62;
  max-width: 72ch;
}
.wim-disclosure p + p { margin-top: 16px; }
.wim-disclosure strong { color: var(--ink); font-weight: 600; }
.wim-disclosure a { border-bottom: 1px solid var(--hairline); }
.wim-disclosure a:hover { border-bottom-color: var(--gold); color: var(--ink); }

/* ---------- Issue navigation ---------------------------------------------- */

.wim-pager {
  margin-top: clamp(40px, 5vw, 58px);
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 26px;
  font-size: 14.5px;
}
.wim-pager a { color: var(--ink-soft); display: flex; align-items: center; gap: 9px; }
.wim-pager a:hover { color: var(--ink); }
.wim-pager svg { transition: transform .3s var(--ease); }
.wim-pager .prev:hover svg { transform: translateX(-3px); }
.wim-pager .next:hover svg { transform: translateX(3px); }
.wim-pager .all { margin-left: auto; }

/* ---------- Responsive ----------------------------------------------------
   Most of this is read on a phone on a Monday morning. The board keeps two
   columns rather than collapsing to a list, because a single column of ten
   figures becomes a scroll rather than a glance. */

@media (max-width: 900px) {
  .wim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wim-author { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; }
  .wim-author img { width: 88px; height: 110px; }
}

@media (max-width: 640px) {
  .wim { --wim-measure: 100%; }
  /* The separator dots strand at the end of a wrapped line and read as
     stray punctuation, so the meta row becomes a short stack instead. */
  .wim-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wim-meta .dot { display: none; }
  .wim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wim-cell { padding: 13px 13px 11px; }
  .bc-v { font-size: 22px; }
  .wim-sec-head { flex-direction: column; align-items: flex-start; gap: 7px; }
  .wim-sec-head h2 { white-space: normal; }
  .wim-sec-head .scope { margin-left: 0; text-align: left; }
  .wim-prose p { line-height: 1.68; }
  /* A month of daily yields cannot be read at 285px. The plate scrolls
     sideways inside itself rather than shrinking the axis into decoration;
     every figure in it is also written out in the bullets above. */
  .wim-chart .plate { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wim-chart svg { min-width: 600px; }
  .wim-chart .plate:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
  .wim-author { grid-template-columns: 1fr; }
  .wim-author img { width: 96px; height: 120px; }
  .wim-pager { flex-direction: column; gap: 14px; }
  .wim-pager .all { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wim-cell, .wim-pager svg { transition: none; }
}