/* NAMING: the user-facing label for this section is **Insights**
   (nav item, page heading, insights.html). The stylesheet, the script and the
   CSS class names deliberately still say "note"/"notes" — renaming them would
   mean editing the <link> and <script> tags on all 28 pages and re-bumping every
   ?v= number, for zero user-visible benefit. Label and internals are allowed to
   differ here; do not "tidy" this. */
/* ============================================================
   notes.css — Notes index, note cards, and article pages.
   Own stylesheet, linked only by notes.html, blog/*.html and
   index.html (for the homepage Notes row).

   WHY ITS OWN FILE: index.html carries an inline <style> and the
   other pages use style.css, so neither can host a component that
   must appear on both. The community tab learned this the hard way
   — it existed twice and the two copies drifted. Do not duplicate
   these rules into style.css.

   Tokens are read from whichever stylesheet is already loaded, with
   fallbacks so this file renders correctly on its own.
   ============================================================ */

:root{
  --n-paper:#FAF8F4; --n-paper-alt:#F1EEE7;
  --n-ink:#12243D; --n-ink-2:#2B3A4E; --n-slate:#5A6676;
  --n-rule:#DFD9CD; --n-rule-2:#C9C1B1;
  --n-signal:#0E5B54; --n-ember:#A84B21;
  --n-serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --n-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* ---------- shared: section head ---------- */
.notes-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--n-ink);
  padding-bottom:.8rem;margin-bottom:0;
}
.notes-head h2,.notes-head h3{margin:0;font-family:var(--n-serif);color:var(--n-ink)}
.notes-head .notes-all{
  font-family:var(--n-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--n-signal);text-decoration:none;
  border-bottom:1px solid var(--n-rule-2);padding-bottom:2px;
}
.notes-head .notes-all:hover{border-color:var(--n-signal)}

/* ---------- the list ---------- */
.notes-list{list-style:none;margin:0;padding:0}

.note{
  display:grid;grid-template-columns:138px 1fr auto;
  gap:1.5rem;align-items:start;
  padding:1.55rem 0;border-bottom:1px solid var(--n-rule);
}
.note__meta{
  font-family:var(--n-mono);font-size:.72rem;color:var(--n-slate);
  letter-spacing:.04em;padding-top:.3rem;
}
.note__cat{
  display:block;color:var(--n-ember);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;margin-bottom:.25rem;
}
/* Briefings are time-bound rather than evergreen — teal marks the
   distinction without adding a third accent colour. */
.note__cat--briefing{color:var(--n-signal)}

.note__title{
  font-family:var(--n-serif);font-size:1.22rem;line-height:1.3;
  margin:0 0 .4rem;font-weight:600;
}
.note__title a{
  color:var(--n-ink);text-decoration:none;
  border-bottom:1px solid var(--n-rule-2);
}
.note__title a:hover{color:var(--n-signal);border-color:var(--n-signal)}
.note__dek{margin:0;font-size:.93rem;color:var(--n-ink-2);max-width:62ch;line-height:1.6}
.note__read{
  font-family:var(--n-mono);font-size:.7rem;color:var(--n-slate);
  white-space:nowrap;padding-top:.45rem;
}
.note__li{
  display:inline-flex;align-items:center;gap:.32rem;
  font-family:var(--n-mono);font-size:.64rem;letter-spacing:.06em;
  color:var(--n-slate);margin-top:.55rem;text-decoration:none;
}
.note__li svg{width:11px;height:11px;fill:currentColor;flex:none}
.note__li:hover{color:var(--n-signal)}

/* Hidden until its publish date — see js/notes.js. The attribute is the
   single source of truth; never hard-code display:none on a note. */
.note[hidden]{display:none}

/* ---------- article page ---------- */
.note-hero{
  background:var(--n-ink);color:#fff;
  padding:3.25rem 0 2.75rem;
}
.note-hero__cat{
  font-family:var(--n-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#9FD8D0;margin-bottom:.9rem;
}
.note-hero h1{
  color:#fff;font-family:var(--n-serif);font-weight:600;
  font-size:clamp(1.65rem,4vw,2.4rem);line-height:1.18;
  margin:0;max-width:24ch;
}
.note-hero__dek{
  color:#BCC6D2;margin:1rem 0 0;max-width:62ch;font-size:1.02rem;line-height:1.6;
}
.note-hero__line{
  display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center;
  margin-top:1.6rem;padding-top:1.1rem;
  border-top:1px solid #5C6E8E;
  font-family:var(--n-mono);font-size:.72rem;color:#8E9BAA;letter-spacing:.04em;
}
.note-hero__line a{color:#9FD8D0;text-decoration:none;border-bottom:1px solid #5C6E8E}

.note-body{padding:2.75rem 0 3.25rem}
.note-body .note-col{max-width:68ch}
.note-body p{font-size:1.02rem;line-height:1.72;color:var(--n-ink-2);margin:0 0 1.15rem}
.note-body h2{
  font-family:var(--n-serif);font-size:1.4rem;color:var(--n-ink);
  margin:2.3rem 0 .7rem;line-height:1.25;
}
.note-body h3{
  font-family:var(--n-serif);font-size:1.12rem;color:var(--n-ink);
  margin:1.8rem 0 .5rem;
}
.note-body ul,.note-body ol{margin:0 0 1.3rem;padding-left:1.15rem}
.note-body li{font-size:1.02rem;line-height:1.7;color:var(--n-ink-2);margin-bottom:.55rem}
.note-body strong{color:var(--n-ink)}
.note-body a{color:var(--n-signal)}

/* Pull-out: the one action worth taking. Ember = tension, per the
   accent semantics in 04-DESIGN-SYSTEM.md §2.3. */
.note-callout{
  border-left:3px solid var(--n-ember);
  background:#F7EDE6;
  padding:1.1rem 1.25rem;margin:1.7rem 0 1.9rem;border-radius:2px;
}
.note-callout p{margin:0;font-size:.97rem;color:var(--n-ink-2)}
.note-callout strong{display:block;margin-bottom:.3rem;color:var(--n-ember);
  font-family:var(--n-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}

/* Reporting numbers — repeated across the advisories, so it is a component */
.note-report{
  border:1px solid var(--n-rule-2);border-radius:2px;
  padding:1.1rem 1.25rem;margin:1.9rem 0;background:#fff;
}
.note-report h4{
  font-family:var(--n-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n-slate);margin:0 0 .6rem;font-weight:500;
}
.note-report p{margin:0;font-size:.95rem}
.note-report b{font-family:var(--n-mono);color:var(--n-ink);font-size:1.05rem}

.note-foot{
  margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--n-rule);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
}
.note-foot .back{
  font-family:var(--n-mono);font-size:.74rem;color:var(--n-signal);
  text-decoration:none;border-bottom:1px solid var(--n-rule-2);padding-bottom:2px;
}

/* ---------- homepage row sits on paper-alt ---------- */
.notes-band{background:var(--n-paper-alt);padding:3.25rem 0 3.75rem}
.notes-band .note{border-bottom-color:var(--n-rule-2)}
.notes-band .note:last-child{border-bottom:none}

@media(max-width:760px){
  .note{grid-template-columns:1fr;gap:.45rem;padding:1.3rem 0}
  .note__read{display:none}
  .note__meta{padding-top:0}
  .note__cat{display:inline;margin-right:.6rem}
  .note-hero{padding:2.4rem 0 2rem}
}

@media print{
  .note-hero{background:#fff;color:#000}
  .note-hero h1,.note-hero__dek{color:#000}
}

/* Long-form articles that live on LinkedIn. Slate rather than a third accent
   colour — brand rule 10 rations colour, and these are a source distinction,
   not a severity one. */
.note__cat--article{color:var(--n-slate)}
.note__li--src{opacity:.75}
.note__title a[target="_blank"] span[aria-hidden]{font-size:.85em;color:var(--n-slate);margin-left:.1em}
.note__title a[target="_blank"]:hover span[aria-hidden]{color:var(--n-signal)}

/* Visually hidden, still read aloud — tells a screen-reader user the link
   leaves the site, which the arrow glyph alone does not convey. */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}