/* ==========================================================================
   The archive (/newsletter/) and the author page (/about/abhineet-rai/)
   Both load site.css, then newsletter.css, then this file. The archive reuses
   newsletter.css's board; the author page reuses its frame and its disclosure
   block. This file must come last of the three: .who-portrait overrides
   .firm-portrait's phone rule from site.css at equal specificity, so source
   order is what decides it. Nothing here introduces a colour, a face or a
   radius DESIGN.md has not committed to.
   ========================================================================== */

.lib {
  --lib-frame: 980px;     /* same measure as an issue, so the two pages register */
  --lib-measure: 68ch;
  /* Muted (#857F74) on warm paper is 3.19:1. Every date, source and "as at"
     on these pages is load-bearing, so meta text takes a darkened derivation
     of the token rather than the token itself. Same fix as newsletter.css. */
  --lib-meta: color-mix(in srgb, var(--neutral) 66%, var(--ink));
}
.lib-frame { max-width: var(--lib-frame); margin-inline: auto; padding-inline: var(--gutter); }
.lib-col { max-width: var(--lib-measure); }

/* ---------- Masthead ------------------------------------------------------
   The issue page sets "Why It Matters" as a small tracked title line because
   the issue headline is the h1 there. Here the periodical *is* the subject, so
   it takes the headline step over the same 2px gold rule — the same device,
   promoted, rather than a second one. */

.lib-mast { padding-block: clamp(38px, 5.4vw, 68px) 0; }
.lib-mast h1 {
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.017em;
  margin-bottom: 14px;
}
.lib-mast .rule { height: 2px; background: var(--gold); border: 0; margin: 0 0 20px; opacity: .85; }
.lib-standfirst { color: var(--ink-soft); max-width: 58ch; }

.lib-mast-meta {
  margin-top: 22px;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 14px;
  color: var(--lib-meta);
}
.lib-mast-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hairline); }
.lib-byline { display: flex; align-items: center; gap: 11px; }
.lib-byline img {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; object-position: center 16%;
  border: 1px solid var(--hairline);
}
.lib-byline .who {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.25;
}
.lib-byline:hover .who { color: var(--gold-ink); }

/* ---------- The latest issue ----------------------------------------------
   The archive's first job is to prove the letter is real, and the fastest
   proof is the same board the issue opens with. It is reproduced here as
   figures rather than as an index: on the issue page each cell links down to
   the section that explains it, but ten cells pointing at anchors on a
   different page would split one decision into ten. There is one action. */

.lib-latest { padding-block: clamp(34px, 4.4vw, 52px) 0; }

.lib-kicker {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.lib-kicker::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .55; }
.lib-kicker .when { color: var(--lib-meta); letter-spacing: .12em; }

.lib-latest h2 a { transition: color .25s; }
.lib-latest h2 a:hover, .lib-latest h2 a:focus-visible { color: var(--gold-ink); }
.lib-latest h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.017em;
  text-wrap: balance;
  max-width: 22ch;
  margin-bottom: 16px;
}
.lib-latest .lib-standfirst { font-size: 18px; }

/* The board, borrowed wholesale from newsletter.css. Only the link affordance
   is dropped, because the cells are no longer an index here. */
.lib-board { margin-top: clamp(26px, 3.2vw, 36px); }
.lib-board-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px;
}
.lib-board-head h3 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
}
.lib-board-head p { font-size: 12.5px; color: var(--lib-meta); }

/* The opening of the commentary, and only the opening. One paragraph is a
   specimen of the voice; a second would start reproducing the issue, and the
   issue page is where the whole argument belongs. */
.lib-taste {
  margin-top: clamp(28px, 3.4vw, 40px);
  max-width: var(--lib-measure);
}
.lib-taste p { line-height: 1.72; color: var(--ink); }
.lib-taste .lead {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: clamp(20px, 2vw, 24px);
  line-height: 1.28; letter-spacing: -0.01em;
  margin-bottom: 16px; max-width: 24ch;
}
.lib-read {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
  font-weight: 600; font-size: 15.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.lib-read svg { transition: transform .3s var(--ease); }
.lib-read:hover svg { transform: translateX(3px); }

/* ---------- Subscribe -----------------------------------------------------
   Placed after the latest issue and before the earlier ones: the archive is
   the pitch, so the ask comes after the proof rather than in front of it. One
   form on the page, never a dialog — a letter that opens by interrupting you
   is arguing against itself. */

.lib-sub {
  margin-top: clamp(52px, 6.4vw, 84px);
  background: var(--ground-2);
  border-block: 1px solid var(--hairline);
  padding-block: clamp(44px, 5.6vw, 68px);
}
.lib-sub-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  /* Centred against each other. The copy is three short lines and the form is
     tall; aligned to the top, the band opens a hole under the copy the size of
     the form. */
  align-items: center;
}
.lib-sub h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 16px; max-width: 18ch; }
.lib-sub p { color: var(--ink-soft); max-width: 46ch; }
.lib-sub p + p { margin-top: 14px; }

.lib-form {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 30px);
}
.lib-form .field { margin-bottom: 14px; }
.lib-form label {
  display: block;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.lib-form input[type="text"], .lib-form input[type="email"] {
  width: 100%;
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-family: inherit; font-size: 15.5px; color: var(--ink);
}
.lib-form input:focus-visible {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent);
}

/* The tracking consent is a separate, unticked box because the ICO treats an
   open pixel as a cookie: consent has to be specific and freely given, so it
   cannot ride on the subscribe button. */
.lib-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  margin: 18px 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.lib-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); }
.lib-consent span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.lib-form .note {
  margin-top: 14px;
  font-size: 13.5px; color: var(--lib-meta); line-height: 1.6;
}
.lib-form .note a { border-bottom: 1px solid var(--hairline); }
.lib-form .note a:hover { border-bottom-color: var(--gold); color: var(--ink); }

/* ---------- Earlier issues ------------------------------------------------
   Ruled rows on the page ground, not cards. Fifty cards would be a wall of
   identical containers; fifty ruled rows are a record. Each row carries the
   two or three figures that defined its week, which is what turns a list of
   headlines into something worth scrolling — and it is the one thing that
   gets *better* as the archive lengthens rather than longer and duller. */

.lib-earlier { padding-block: clamp(50px, 6vw, 78px) 0; }

.lib-sec-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.lib-sec-head h2 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
}
.lib-sec-head .aside { margin-left: auto; font-size: 12.5px; color: var(--lib-meta); }

/* A year heading appears only once a second calendar year exists. In the first
   year it would label the only group on the page, which is how an archive
   announces that it is small. */
.lib-year {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 15px;
  color: var(--lib-meta);
  letter-spacing: .04em;
  padding: 26px 0 6px;
}

.lib-rows { list-style: none; margin: 0; padding: 0; }
.lib-row { border-bottom: 1px solid var(--hairline); }
.lib-row > a {
  display: block;
  padding: 24px 0 22px;
  transition: background .25s var(--ease);
}
.lib-row > a:hover, .lib-row > a:focus-visible {
  background: color-mix(in srgb, var(--raised) 70%, transparent);
  box-shadow: 0 0 0 var(--gutter) color-mix(in srgb, var(--raised) 70%, transparent);
}
.lib-row .no {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--lib-meta);
  margin-bottom: 8px;
}
.lib-row h3 {
  font-size: clamp(20px, 2vw, 23px);
  letter-spacing: -0.01em;
  line-height: 1.24;
  max-width: 30ch;
  margin-bottom: 8px;
  transition: color .25s;
}
.lib-row > a:hover h3 { color: var(--gold-ink); }
.lib-row .sf {
  font-size: 15.5px; color: var(--ink-soft);
  max-width: 62ch;
  line-height: 1.55;
}

/* The figure tail. Three at most. From 820px it moves into the right margin as
   a small stack, so a row gets the same two axes the issue's section heads
   have — the week on the left, its figures on the right — and the archive
   reads as a ledger of Mondays rather than a column of headlines. Under 820px
   it drops beneath the text as one wrapping line with drawn hairline dots, so
   a screen reader never says "middot". */
.lib-figs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 7px 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--lib-meta);
}
@media (min-width: 821px) {
  .lib-row > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
    column-gap: 40px;
    align-items: start;
  }
  .lib-row .no, .lib-row h3, .lib-row .sf { grid-column: 1; }
  .lib-figs {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    margin-top: 3px;
    text-align: right;
  }
  .lib-figs .sep { display: none; }
  .lib-figs .f { gap: 8px; }
}
.lib-figs .f { display: inline-flex; align-items: baseline; gap: 6px; }
.lib-figs .f b {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 14px; color: var(--ink);
  font-variant-numeric: lining-nums proportional-nums;
}
.lib-figs .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--hairline); }

/* Pagination. Absent until there are more issues than one page should carry —
   see the note in the markup. */
.lib-pager {
  margin-top: 30px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px 24px;
  font-size: 14.5px; color: var(--ink-soft);
}
.lib-pager a { display: inline-flex; align-items: center; gap: 9px; }
.lib-pager a:hover { color: var(--ink); }

/* ---------- What is in every issue ---------------------------------------
   Permanent furniture, and the reason the page does not read as an empty shop
   at four issues: the format carries the weight the record cannot yet carry,
   and it stays useful at fifty. Nothing on this page counts the issues. */

.lib-format { padding-block: clamp(52px, 6vw, 80px) 0; }
.lib-format h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 8px; }
.lib-format .lib-intro { color: var(--ink-soft); max-width: 54ch; }

.lib-spec { margin-top: clamp(26px, 3vw, 34px); }
.lib-spec dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(190px, .58fr) minmax(0, 1.42fr);
}
.lib-spec dt, .lib-spec dd { border-top: 1px solid var(--hairline); padding: 15px 0; margin: 0; }
.lib-spec dt {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 15.5px; color: var(--ink);
  padding-right: 24px;
}
.lib-spec dd { font-size: 15px; color: var(--ink-soft); }
.lib-spec dt:last-of-type, .lib-spec dd:last-of-type { border-bottom: 1px solid var(--hairline); }
.lib-spec-foot {
  margin-top: 18px;
  font-size: 14.5px; color: var(--lib-meta);
  max-width: 62ch;
}

/* ---------- Author strip and close ---------------------------------------- */

.lib-foot { padding-block: clamp(50px, 6vw, 78px) clamp(60px, 8vw, 100px); }
/* The author strip carries its own top rule and margin on an issue page, where
   it follows the sources. Here .lib-foot has already opened the gap, and both
   together leave a hole. */
.lib-foot .wim-author { margin-top: 0; }

/* On the archive the close line follows the last row of the list and opens its
   own gap. On the author page it is the first thing inside .lib-foot, which has
   already opened one, and the two together leave a hole under "Why It Matters"
   — the same fault the .wim-author rule above fixes, in the other direction. */
.lib-foot > .lib-frame > .lib-close:first-child { margin-top: 0; }

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

/* ==========================================================================
   The author page
   ========================================================================== */

/* ---------- Masthead ------------------------------------------------------
   Portrait and name, then the four credentials as a ruled strip. The strip is
   the standfirst: it is the homepage's own approved wording, so the page opens
   on evidence without writing a second biography that can drift from the
   first. */

.who-mast { padding-block: clamp(38px, 5.4vw, 68px) 0; }
.who-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}
/* site.css centres .firm-portrait with margin-inline:auto under 960px, which is
   right in the homepage's one-column band. Here it collapses the frame to 2px:
   the portrait's only child is absolutely positioned, so an auto margin makes
   the grid item shrink-to-fit nothing. It keeps its own left edge instead. */
.who-portrait { max-width: 340px; width: 100%; margin-inline: 0; }
.who-mast h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.022em; margin-bottom: 10px; }
.who-role {
  font-size: 15px; font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: .04em;
  margin-bottom: 22px;
}

.who-creds { list-style: none; margin: 0; padding: 0; }
.who-creds li {
  border-top: 1px solid var(--hairline);
  padding: 14px 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.who-creds li:last-child { border-bottom: 1px solid var(--hairline); }
.who-creds svg { color: var(--gold-ink); margin-top: 3px; }
.who-creds strong {
  display: block;
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 16px; color: var(--ink);
}
.who-creds small { font-size: 13.5px; color: var(--ink-soft); }

.who-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; font-size: 15px; }
.who-links a { color: var(--ink-soft); border-bottom: 1px solid var(--hairline); display: inline-flex; align-items: center; gap: 8px; }
.who-links a:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- The biography -------------------------------------------------
   The homepage text, unchanged. One biography, in one voice, in two places. */

.who-bio { padding-block: clamp(48px, 5.6vw, 74px) 0; }
.who-bio h2 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 20px;
}
.who-bio p { line-height: 1.72; color: var(--ink); max-width: 68ch; }
.who-bio p + p { margin-top: 18px; }

/* ---------- On the record -------------------------------------------------
   The page's argument. Anyone can assert twenty years in private banking; what
   separates a credential from a claim is a register a stranger can open. Every
   line here is a public record with its own number, set at reading size under
   the Full-Size-Disclosure Rule rather than shrunk into a footer. */

.who-record { padding-block: clamp(48px, 5.6vw, 74px) 0; }
.who-record h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 10px; }
.who-record .lib-intro { color: var(--ink-soft); max-width: 56ch; }

.who-reg { margin-top: clamp(26px, 3vw, 34px); }
.who-reg dl { margin: 0; display: grid; grid-template-columns: minmax(200px, .6fr) minmax(0, 1.4fr); }
.who-reg dt, .who-reg dd { border-top: 1px solid var(--hairline); padding: 17px 0; margin: 0; }
.who-reg dt {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 15.5px; color: var(--ink);
  padding-right: 24px;
}
.who-reg dd { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.who-reg dt:last-of-type, .who-reg dd:last-of-type { border-bottom: 1px solid var(--hairline); }
.who-reg .num {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 600; color: var(--ink);
  font-variant-numeric: lining-nums proportional-nums;
}
.who-reg a { border-bottom: 1px solid var(--hairline); }
.who-reg a:hover { border-bottom-color: var(--gold); color: var(--ink); }
.who-reg .go { color: var(--ink-soft); white-space: nowrap; }

.who-standing {
  margin-top: clamp(28px, 3.4vw, 40px);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--navy);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
}
.who-standing h3 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 16px;
}
.who-standing p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.62; max-width: 72ch; }
.who-standing p + p { margin-top: 14px; }
.who-standing strong { color: var(--ink); font-weight: 600; }
.who-standing a { border-bottom: 1px solid var(--hairline); }
.who-standing a:hover { border-bottom-color: var(--gold); color: var(--ink); }
/* The dashed placeholder the service files use for an unconfirmed commercial
   fact, borrowed for the one gap in the ledger. It is not `.todo`: that class
   marks a note the firm wrote to itself, which test/publication-notes.test.mjs
   forbids on a published page for the reasons #58 records. This box is
   addressed to the reader — same treatment, opposite audience. */
.who-standing .gap {
  margin-top: 18px;
  border: 1px dashed color-mix(in srgb, var(--gold) 46%, var(--hairline));
  border-radius: var(--r-sm);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--gold-tint) 44%, transparent);
}
.who-standing .gap strong { color: var(--gold-ink); }

/* ---------- What he writes ------------------------------------------------
   The strongest evidence on the page is not the career; it is a run of dated,
   sourced letters anyone can read without giving an email address. The issues
   are built from Sanity into /newsletter/, so the section is a heading, a
   sentence and a way in — a hand-written copy of the list would be a week
   stale the first Monday after it shipped. */

.who-writes { padding-block: clamp(48px, 5.6vw, 74px) 0; }
.who-writes h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 10px; }
.who-writes .lib-intro { color: var(--ink-soft); max-width: 56ch; margin-bottom: 26px; }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 900px) {
  .lib-sub-grid { grid-template-columns: 1fr; }
  .lib-sub p { max-width: 60ch; }
  .who-grid { grid-template-columns: 1fr; }
  .who-portrait { max-width: 300px; }
}

@media (max-width: 640px) {
  .lib { --lib-measure: 100%; }
  .lib-mast-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lib-mast-meta .dot { display: none; }
  .lib-spec dl, .who-reg dl { grid-template-columns: 1fr; }
  .lib-spec dt, .who-reg dt { padding-bottom: 4px; }
  .lib-spec dd, .who-reg dd { border-top: 0; padding-top: 0; }
  .lib-spec dt:last-of-type, .who-reg dt:last-of-type { border-bottom: 0; }
  /* The full-bleed hover wash is drawn with a spread shadow sized to the
     gutter; at phone gutters that reads as a smear, so the row highlights
     inside its own box instead. */
  .lib-row > a:hover, .lib-row > a:focus-visible { box-shadow: none; }
  .lib-row h3 { max-width: none; }
  .lib-pager { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .lib-row > a, .lib-read svg, .lib-row h3 { transition: none; }
}