/* =======================================================================
   The Midrey — shared stylesheet
   Editorial system: Bodoni Moda display + EB Garamond body + JetBrains Mono.
   Paired with the MR / MIDREY logo system (PNG assets in /Logos).
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Ink + paper — pure black & white */
  --ink:#000000;
  --ink-90:rgba(0,0,0,.90);
  --ink-80:rgba(0,0,0,.78);
  --ink-60:rgba(0,0,0,.58);
  --ink-40:rgba(0,0,0,.40);
  --ink-20:rgba(0,0,0,.18);
  --ink-12:rgba(0,0,0,.11);
  --ink-06:rgba(0,0,0,.05);

  --paper:#FFFFFF;       /* pure white — primary background */
  --paper-2:#F4F4F4;     /* light gray — surfaces, hovers */
  --paper-3:#E8E8E8;     /* deeper gray — dividers, plates */
  --white:#FFFFFF;

  /* Brand tones — strict greyscale */
  --navy:#000000;
  --navy-2:#0E0E0E;
  --navy-3:#1B1B1B;
  --accent:#000000;
  --accent-soft:rgba(0,0,0,.06);
  --gold:#000000;
  --red:#000000;
  --green:#000000;

  --mute:#6B6B6B;
  --mute-2:#383838;
  --rule:#D8D8D8;        /* neutral hairline rule */

  --max:1120px;
  --narrow:720px;

  /* Type system */
  --f-display:"Playfair Display","Bodoni Moda","Didot",Georgia,serif;
  --f-body:"EB Garamond","Baskerville Old Face","Baskerville","Libre Baskerville",Georgia,serif;
  --f-italic:"EB Garamond","Baskerville Old Face","Baskerville",Georgia,serif;
  --f-mark:"Bodoni Moda","Didot",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- Reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
}
a{color:var(--ink);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 40px}

/* Display headings — Bodoni Moda */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:clamp(48px,6vw,88px);line-height:1.02}
h2{font-size:clamp(32px,3.6vw,48px);line-height:1.08}
h3{font-size:clamp(22px,2.2vw,30px);line-height:1.18}

/* ---------- Logo / brand blocks ---------- */
.brand{display:inline-flex;align-items:center;gap:2px;text-decoration:none;color:var(--ink);line-height:1}
.brand .the{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:16px;color:var(--ink-60);letter-spacing:.01em;
  align-self:flex-start;margin-top:2px;
}
.brand img.mark{
  height:38px;width:auto;display:block;
}

/* Hero wordmark — transparent PNG, used in masthead */
.brand-hero{
  display:block;margin:0 auto;
  max-width:540px;width:58%;height:auto;
}

/* ---------- Masthead block ---------- */
.masthead{
  padding:8px 0 0;text-align:center;
}
.masthead-meta{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;color:var(--ink-80);
  padding:14px 4px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin-bottom:56px;
  /* Page chrome reads better with lining figures; the body still uses
     old-style figures for prose. */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
.masthead-meta > span:first-child{text-align:left}
.masthead-meta > span:last-child{text-align:right}
.masthead-meta .m-c{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:16px;letter-spacing:.01em;text-transform:none;
  color:var(--ink-60);
}
.masthead .brand-hero{margin:0 auto}
.masthead-double{
  position:relative;height:5px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin:36px auto 22px;max-width:680px;
}
.masthead-stand{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.8vw,24px);letter-spacing:.005em;color:var(--ink-80);
  text-align:center;margin:0 auto 64px;max-width:62ch;line-height:1.42;
}
@media (max-width:1000px){
  .masthead-meta{grid-template-columns:1fr;text-align:center;gap:8px;padding:14px 4px}
  .masthead-meta > span:first-child,
  .masthead-meta > span:last-child{text-align:center}
}

/* ---------- Ribbon ----------
   Two-row layout at every width: date and tagline read as a pair on row 1,
   ticker centred on row 2 underneath. Without explicit grid placement,
   auto-flow on a 2-column grid pushes .right onto its own row. */
.ribbon{background:var(--ink);color:rgba(255,255,255,.78)}
.ribbon-inner{
  /* Span the full width of the band; padding gives content breathing room
     from the screen edges. The 1440 cap that used to live here pinned the
     content to a centred 1440 column with whitespace either side, which
     made the dark band on wide displays read as two empty bookends. */
  width:100%;margin:0;padding:18px 40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:32px;row-gap:10px;
  font-family:var(--f-body);font-size:16px;letter-spacing:.005em;
  /* Lining figures: dateline numerals sit at cap-height instead of dipping
     below the baseline like old-style figures. Chrome convention. */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
.ribbon .left {grid-row:1;grid-column:1;justify-self:start;display:flex;gap:24px;align-items:center;white-space:nowrap;min-width:0;font-size:16px;color:rgba(255,255,255,.78)}
.ribbon .right{grid-row:1;grid-column:2;justify-self:end;  display:flex;gap:24px;align-items:center;white-space:nowrap;min-width:0;font-size:16px;color:rgba(255,255,255,.78)}
.ribbon .center{grid-row:2;grid-column:1/-1;justify-self:stretch;display:flex;align-items:center;min-width:0;max-width:100%;overflow:hidden}
.ribbon b{
  color:var(--paper);font-weight:500;font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;font-size:15px;margin-left:7px;
}
.ribbon .sep{width:1px;height:13px;background:rgba(255,255,255,.22);display:inline-block}

/* Ticker — live US index quotes.
   The renderer outputs each set of quotes twice; the marquee animation slides
   the doubled content from translateX(0) to translateX(-50%) so the second
   copy is in position right when the first one finishes scrolling off — a
   seamless infinite loop with no visible reset jump. Pauses on hover so the
   reader can actually read a quote they're interested in. */
.ticker{
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;white-space:nowrap;
  font-family:var(--f-mono);font-size:15px;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.88);
  width:max-content;
  flex-shrink:0;       /* don't let parent flex container compress us — we
                          NEED to overflow so the marquee can scroll */
  animation:ticker-scroll 15s linear infinite;
  will-change:transform;
}
/* Each set is one full pass of the quotes; the renderer mounts exactly two.
   padding-right on each set creates the gap that bridges set 1 -> set 2,
   matching the internal item-to-item spacing, so the loop is seamless. */
.ticker .t-set{
  display:inline-flex;
  align-items:center;
  gap:22px;
  padding-right:22px;
}
.ticker:hover{animation-play-state:paused}
@keyframes ticker-scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
/* Note: not disabling the animation under prefers-reduced-motion.
   A slow continuous horizontal scroll across a strip is one of the
   gentlest forms of motion and is the affordance that signals "live
   data". Killing it would make the tape look static and broken on
   any device with the OS-level Reduce Motion preference enabled. */
.ticker .t-item{display:inline-flex;gap:8px;align-items:baseline}
.ticker .t-label{color:rgba(255,255,255,.55);letter-spacing:.06em;font-weight:500}
.ticker .t-last{color:#fff;font-weight:500}
.ticker .t-chg{font-weight:500}
.ticker .t-chg.up{color:#22c55e}
.ticker .t-chg.down{color:#ef4444}
.ticker .t-sep{width:1px;height:14px;background:rgba(255,255,255,.18);align-self:center;flex-shrink:0}

/* ---------- Filings strip ----------
   A slim shelf showing recent SEC filings on covered companies (or recent
   filings across the market when coverage is empty). Sits between the nav
   and the main content. Different visual register from the dark price
   ribbon: paper-coloured, hairline-bordered, mono-flavoured. Reads as a
   running tape rather than a header band. */
.filings-strip{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font-family:var(--f-mono);font-size:14px;color:var(--ink-80);
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
.filings-strip .fs-inner{
  /* Same edge-to-edge treatment as the ribbon-inner: fill the band, padding
     provides side breathing. Maximises horizontal real estate for filings
     entries instead of cropping at a 1440 column. */
  width:100%;margin:0;padding:13px 40px;
  display:flex;align-items:center;gap:24px;overflow:hidden;
}
/* The label gets a stronger treatment than the body of the strip — darker
   ink, slightly heavier weight, and a vertical rule separating it from the
   filings list. Mimics the kicker pattern used elsewhere in the site. */
.filings-strip .fs-label{
  flex:0 0 auto;
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  padding-right:24px;
  border-right:1px solid var(--ink-20);
  /* Hairline gold underline = clickability cue. The site's brand chrome
     is monochrome (--gold resolves to #000000), so we use the actual
     gold #C9A96A directly — same shade as the revenue line on the
     tone chart. Keeps the data-accent palette consistent. */
  text-decoration:underline;
  text-decoration-color:#C9A96A;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  transition:color .15s,text-decoration-color .15s;
}
.filings-strip a.fs-label:hover{
  color:#C9A96A;
  text-decoration-color:#C9A96A;
}
/* The list is the marquee VIEWPORT — it stays put, takes whatever
   horizontal space remains in .fs-inner after the label, and clips
   overflow. The doubled content sits inside .fs-track which is what
   actually animates. Animating the list itself caused its box to
   translate left under the .fs-label sibling. */
.filings-strip .fs-list{
  flex:1 1 auto;
  display:flex;align-items:center;
  overflow:hidden;min-width:0;
  white-space:nowrap;
}
/* The track is the marquee. Two .fs-set children sit side-by-side; the
   animation slides the track by exactly -50% so the second copy lands
   at the start position the first one occupied — seamless infinite loop.
   flex-shrink:0 keeps the track at full content width regardless of
   parent constraints. */
.filings-strip .fs-track{
  display:flex;align-items:center;gap:0;
  width:max-content;flex-shrink:0;
  animation:filings-scroll 30s linear infinite;
  will-change:transform;
}
.filings-strip:hover .fs-track{animation-play-state:paused}
@keyframes filings-scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
/* See the same comment on the ticker — slow continuous horizontal scroll
   is the affordance that signals live data, kept on regardless of the
   OS-level reduce-motion preference. */
/* Each set holds one full pass of the 5 entries with internal gap and a
   matching trailing padding so the boundary between set 1 and set 2 has
   the same spacing as the boundary between any two adjacent items
   inside a set. */
.filings-strip .fs-set{
  display:inline-flex;align-items:center;
  gap:22px;
  padding-right:22px;
}
.filings-strip .fs-empty{
  font-style:italic;color:var(--mute);font-size:13.5px;
}
.filings-strip .fs-sep{
  flex:0 0 auto;width:1px;height:13px;background:var(--ink-12);
}
.filings-strip .fs-item{
  display:inline-flex;align-items:baseline;gap:10px;
  flex:0 0 auto;
  text-decoration:none;color:var(--ink-80);
  transition:color .15s;
}
.filings-strip .fs-item:hover{color:var(--ink)}
.filings-strip .fs-item:hover .fs-co{color:var(--accent)}
.filings-strip .fs-co{
  font-family:var(--f-body);font-size:14.5px;color:var(--ink);
}
.filings-strip .fs-form{
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--ink-80);
  padding:3px 8px;border:1px solid var(--ink-20);border-radius:1px;
  background:var(--paper);
}
.filings-strip .fs-form.urgent{
  /* 8-K — material event. Inverted pill so it pops against the gray strip. */
  color:var(--paper);border-color:var(--ink);background:var(--ink);
}
.filings-strip .fs-form.annual{
  /* 10-K / 20-F annual report */
  color:var(--ink);border-color:var(--ink-40);background:var(--paper);
}
.filings-strip .fs-form.stake{
  /* SC 13D / SC 13G — beneficial ownership */
  color:var(--ink);border-color:var(--ink-40);background:var(--paper);
}
.filings-strip .fs-time{
  font-size:12.5px;color:var(--mute);
}
/* Price block — ticker + last + percent change. Mono font, tabular numerals
   so digits align even as values change. Rendered between the form pill
   and the relative time. Up/down colour mirrors the price-ticker convention. */
.filings-strip .fs-price{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--f-mono);font-size:11.5px;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.filings-strip .fs-px-tkr{color:var(--mute);font-weight:500;letter-spacing:.04em}
.filings-strip .fs-px-last{color:var(--ink);font-weight:500}
.filings-strip .fs-price.up   .fs-px-chg{color:#16a34a}
.filings-strip .fs-price.down .fs-px-chg{color:#dc2626}
.filings-strip .fs-price.flat .fs-px-chg{color:var(--mute)}
@media (max-width:1000px){
  .filings-strip .fs-inner{padding:11px 22px;gap:20px}
  .filings-strip{font-size:13px}
  .filings-strip .fs-label{font-size:11px}
  .filings-strip .fs-co{font-size:13.5px}
  .filings-strip .fs-form{font-size:11px;padding:2px 7px}
  .filings-strip .fs-time{font-size:11.5px}
}
@media (max-width:620px){
  .filings-strip .fs-inner{padding:9px 18px;gap:14px}
  .filings-strip .fs-label{font-size:10.5px;letter-spacing:.16em}
  .filings-strip .fs-co{font-size:13px}
  .filings-strip .fs-form{font-size:10.5px;padding:2px 6px}
  .filings-strip .fs-time{font-size:11px}
  /* Tighter inter-item spacing on phone — keeps the marquee math correct
     (gap stays 0 on .fs-track, all spacing owned by .fs-set's gap +
     padding-right pair which must match for the seamless loop). */
  .filings-strip .fs-set{gap:16px;padding-right:16px}
}

/* ---------- Nav ---------- */
.nav{
  border-bottom:1px solid var(--rule);
  background:rgba(255,255,255,.92);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:18px 40px;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:40px;
}
.nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;gap:30px;align-items:center;justify-content:center;
}
.nav ul a{
  color:var(--ink);font-family:var(--f-body);
  font-size:15.5px;font-weight:400;font-style:italic;
  padding:6px 2px;position:relative;letter-spacing:.005em;
}
.nav ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav ul a:hover::after,.nav ul a.on::after{transform:scaleX(1)}
.nav ul li.divider{
  width:1px;height:14px;background:var(--ink-20);padding:0;
}
.nav .tools{display:flex;gap:14px;align-items:center}
.nav .cta{
  font-family:var(--f-body);font-size:14px;font-weight:500;
  letter-spacing:.04em;
  padding:10px 22px;background:var(--ink);color:var(--paper);
  border-radius:1px;transition:background .2s;
}
.nav .cta:hover{background:var(--navy);color:var(--paper)}
.nav .cta-ghost{
  font-family:var(--f-body);font-style:italic;
  font-size:15px;font-weight:400;color:var(--ink);
  padding:10px 14px;
}
.nav .cta-ghost:hover{color:var(--accent)}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-size:15.5px;font-weight:500;
  letter-spacing:.03em;
  padding:14px 28px;
  background:var(--ink);color:var(--paper);
  border-radius:1px;transition:background .2s;
  border:none;cursor:pointer;
}
.btn-primary:hover{background:var(--navy);color:var(--paper)}
.btn-primary .arr{transition:transform .2s}
.btn-primary:hover .arr{transform:translateX(4px)}
.btn-ghost{
  display:inline-flex;align-items:center;
  font-family:var(--f-body);font-style:italic;
  font-size:16px;font-weight:400;padding:14px 22px;
  color:var(--ink);border:1px solid var(--ink-20);
  border-radius:1px;transition:border-color .2s,color .2s;
  background:transparent;cursor:pointer;
}
.btn-ghost:hover{border-color:var(--ink);color:var(--accent)}

/* ---------- Section head ---------- */
.section{padding:112px 0 8px}
.section h2{margin:0 0 16px}
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:40px;margin-bottom:48px;
  padding-bottom:26px;border-bottom:1px solid var(--rule);
}
.section-head h2{margin-bottom:0}
.section-head .meta{
  font-family:var(--f-body);font-style:italic;
  font-size:14px;font-weight:400;color:var(--mute);white-space:nowrap;
}
.section-head .meta a{color:var(--ink);font-style:normal;font-weight:500}
.section-head .meta a:hover{color:var(--accent)}
.section-head .lede{
  font-size:16px;color:var(--ink-80);line-height:1.55;max-width:46ch;font-weight:400;
}

/* Eyebrow / kicker — small caps tracked */
.kicker, .eyebrow, .label{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);
}

/* ---------- Tier badges (free / paid) ---------- */
.badge{
  display:inline-block;font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;padding:3px 9px 2px;
  border:1px solid var(--ink);border-radius:1px;color:var(--ink);background:transparent;
  line-height:1;vertical-align:middle;
}
.badge.free{color:var(--ink);border-color:var(--ink);background:transparent}
.badge.paid{color:var(--paper);border-color:var(--ink);background:var(--ink)}
.badge.sub{color:var(--paper);border-color:var(--ink);background:var(--ink)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  max-width:var(--max);margin:28px auto 0;padding:0 40px;
  font-family:var(--f-body);font-style:italic;
  font-size:14px;color:var(--mute);
}
.breadcrumb a{color:var(--mute);font-style:italic}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{margin:0 10px;color:var(--ink-40);font-style:normal}
.breadcrumb .now{color:var(--ink);font-weight:500;font-style:italic}

/* ---------- Email capture ---------- */
.email-capture{
  margin-top:120px;padding:80px 0;
  background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.email-capture .ec-inner{
  max-width:var(--max);margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;
}
.email-capture .ec-text h3{
  font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3vw,40px);
  line-height:1.1;letter-spacing:-.012em;margin:0 0 12px;color:var(--ink);
}
.email-capture .ec-text p{
  font-size:16px;color:var(--ink-80);margin:0;line-height:1.55;max-width:54ch;
}
.email-capture .ec-text p em{font-family:var(--f-display);font-style:italic}
.email-capture form{display:flex;gap:10px;align-items:stretch;min-width:440px}
.email-capture input[type=email]{
  flex:1;font-family:var(--f-body);font-size:16px;
  background:var(--white);border:1px solid var(--ink-20);
  padding:14px 18px;outline:none;color:var(--ink);border-radius:1px;
  transition:border-color .2s;
}
.email-capture input[type=email]:focus{border-color:var(--ink)}
.email-capture input::placeholder{color:var(--ink-40);font-style:italic}
.email-capture button{
  font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:.04em;
  padding:0 26px;background:var(--ink);color:var(--paper);
  border:none;border-radius:1px;cursor:pointer;transition:background .2s;
  white-space:nowrap;
}
.email-capture button:hover{background:var(--navy)}
.email-capture .fine{
  font-family:var(--f-body);font-style:italic;
  font-size:13px;color:var(--mute);margin-top:14px;
}

/* ---------- Paywall wedge ---------- */
.paywall{
  max-width:var(--narrow);margin:48px auto 52px;
  padding:42px 46px 38px;
  background:var(--white);border:1px solid var(--ink-20);
  border-radius:1px;position:relative;
  box-shadow:0 24px 64px -38px rgba(17,17,17,.30);
}
.paywall::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--ink) 100%);
}
.paywall .pw-kick{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;
}
.paywall h3{
  font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.18;
  letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);
}
.paywall h3 em{font-family:var(--f-display);font-style:italic}
.paywall p{
  font-size:16px;line-height:1.6;color:var(--ink-80);margin:0 0 26px;max-width:56ch;
}
.paywall .pw-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.paywall .pw-primary{
  font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:.04em;
  padding:12px 24px;background:var(--ink);color:var(--paper);
  border-radius:1px;transition:background .2s;
}
.paywall .pw-primary:hover{background:var(--navy);color:var(--paper)}
.paywall .pw-ghost{
  font-family:var(--f-body);font-style:italic;font-size:15px;font-weight:400;
  padding:12px 18px;color:var(--ink);border:1px solid var(--ink-20);
  border-radius:1px;transition:border-color .2s,color .2s;
}
.paywall .pw-ghost:hover{border-color:var(--ink);color:var(--accent)}
.paywall .pw-sample{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);padding:12px 8px;
}
.paywall .pw-sample:hover{color:var(--accent)}
.paywall .pw-fine{
  font-family:var(--f-body);font-style:italic;
  font-size:13px;color:var(--mute);margin:0;padding-top:18px;border-top:1px solid var(--ink-12);
  line-height:1.5;
}
.paywall .pw-fine b{color:var(--ink);font-weight:500;font-style:normal}

/* ---------- Gated section ---------- */
.gated{position:relative;pointer-events:none}
.gated .prose,
.gated .chart-block,
.gated .table-wrap,
.gated .sens{
  filter:blur(3.4px) saturate(.7);opacity:.78;
  -webkit-user-select:none;user-select:none;
}
.gated .chart-block svg text,
.gated .table-wrap td:not(.case){filter:blur(2.6px)}
.gated .hd{opacity:.9}
.gated-note{
  max-width:var(--narrow);margin:-12px auto 0;padding:10px 16px;
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  display:flex;align-items:center;gap:10px;
}
.gated-note::before{
  content:"";width:18px;height:1px;background:var(--ink-20);display:inline-block;
}
.gated-ledger{
  max-width:var(--narrow);margin:22px auto 0;
  background:var(--white);border:1px solid var(--ink-20);padding:30px 34px;border-radius:1px;
  display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
}
.gated-ledger .count{
  font-family:var(--f-display);font-weight:400;font-size:48px;line-height:1;
  color:var(--ink);letter-spacing:-.018em;
}
.gated-ledger .count b{display:block;font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:8px}
.gated-ledger .desc{font-size:15px;color:var(--ink-80);line-height:1.55}
.gated-ledger .desc em{font-family:var(--f-display);font-style:italic;color:var(--ink)}
.gated-ledger .desc a{
  display:inline-block;margin-top:10px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}

/* ---------- Free-notes shelf ---------- */
.shelf{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.shelf-card{
  background:var(--white);border:1px solid var(--rule);
  padding:38px 38px 34px;display:flex;flex-direction:column;
  min-height:290px;border-radius:1px;color:var(--ink);
  transition:border-color .25s,transform .25s,box-shadow .25s;
  position:relative;
}
.shelf-card:hover{
  border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 18px 48px -24px rgba(17,17,17,.22);color:var(--ink);
}
.shelf-card .row{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;
}
.shelf-card .row .kicker{
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.shelf-card h3{
  font-family:var(--f-display);font-weight:400;font-size:32px;line-height:1.12;
  letter-spacing:-.012em;margin:0 0 14px;color:var(--ink);max-width:22ch;
}
.shelf-card p{
  font-size:16px;line-height:1.58;color:var(--ink-80);margin:0 0 24px;max-width:52ch;
}
.shelf-card .foot{
  margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;
  padding-top:18px;border-top:1px solid var(--ink-12);
  font-family:var(--f-mono);font-size:11.5px;color:var(--mute);
}
.shelf-card .foot .read{color:var(--ink);font-weight:500;font-family:var(--f-body);font-style:italic;font-size:14px;letter-spacing:0}
.shelf-card:hover .foot .read{color:var(--accent)}

/* ---------- Footer ---------- */
footer{
  margin-top:120px;background:var(--navy);color:rgba(255,255,255,.72);
  padding:80px 0 36px;
}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;
  max-width:var(--max);margin:0 auto;padding:0 40px;
}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start}
.foot-brand .brand{align-items:center;gap:2px}
.foot-brand .brand .the{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:18px;color:rgba(255,255,255,.55);letter-spacing:.01em;
  align-self:flex-start;margin-top:4px;
}
.foot-brand .brand img.mark{
  height:56px;width:auto;display:block;
}
.foot-brand p{
  margin:24px 0 0;font-family:var(--f-body);font-size:15px;line-height:1.6;
  color:rgba(255,255,255,.62);max-width:38ch;
}
.foot-col h5{
  margin:0 0 20px;font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper);
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:9px 0;font-family:var(--f-body);font-size:15px;font-style:italic}
.foot-col a{color:rgba(255,255,255,.72);font-style:italic}
.foot-col a:hover{color:var(--paper)}
.foot-base{
  max-width:var(--max);margin:52px auto 0;padding:22px 40px 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-family:var(--f-body);font-style:italic;
  font-size:13px;color:rgba(255,255,255,.55);
}
.foot-base .row{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- Editorial helpers ---------- */
.dropcap::first-letter{
  font-family:var(--f-display);font-weight:400;font-size:5.4em;
  float:left;line-height:.88;padding:6px 12px 0 0;color:var(--ink);
}
.pullquote{
  margin:48px 0;padding:24px 0 24px 32px;
  border-left:2px solid var(--ink);
  font-family:var(--f-display);font-style:italic;
  font-size:clamp(22px,2.4vw,30px);line-height:1.3;color:var(--ink);
  max-width:48ch;
}
.pullquote cite{
  display:block;margin-top:14px;font-family:var(--f-mono);font-style:normal;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
.swash{
  display:block;width:48px;height:1px;background:var(--ink);
  margin:32px auto;opacity:.6;
}

/* Hamburger button — shown only on mobile (see @media below). 44×44 hit
   target hits Apple HIG / WCAG touch-target minimum. The icon itself is
   smaller (18 px-wide bars) but the surrounding box is generous so it's
   easy to tap accurately. Three bars animate to a clean X when active. */
.nav-burger{
  display:none;
  width:44px;height:44px;padding:0;margin:0 0 0 10px;
  background:transparent;border:1px solid var(--ink-20);border-radius:2px;
  cursor:pointer;color:var(--ink);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:border-color .18s,background .18s,transform .12s;
  position:relative;
}
.nav-burger:hover{border-color:var(--ink);background:var(--paper-2)}
.nav-burger:active{transform:scale(.96)}
.nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-burger span{
  display:block;width:18px;height:1.4px;background:currentColor;
  transition:transform .25s ease,opacity .15s ease;
  transform-origin:center;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .nav-burger{display:inline-flex}

  /* Mobile menu panel.
     Always rendered (so it can be animated in/out). Visibility, opacity,
     and a small downward translate are toggled by the [data-open]
     attribute on <nav>. Animating these properties (rather than display)
     makes the panel slide in instead of pop. The pointer-events trick
     keeps the panel from intercepting clicks while invisible. */
  .nav ul{
    display:flex;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    align-items:stretch;justify-content:flex-start;
    background:var(--paper);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    padding:0;margin:0;
    box-shadow:0 14px 28px rgba(10,15,28,.08), 0 4px 8px rgba(10,15,28,.04);
    /* Hidden state — animated in/out */
    opacity:0;
    transform:translateY(-8px);
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav[data-open="true"] ul{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
  }
  .nav ul li{
    padding:0;display:block;
    border-bottom:1px solid var(--ink-12);
  }
  .nav ul li:last-child{border-bottom:none}
  /* Bring the divider back as a visual section break between Publications
     (Research/Coverage/Insights/Tools) and Firm (Methodology/About).
     A thin gold-tinted band, no clickable surface. */
  .nav ul li.divider{
    display:block;height:0;
    border-bottom:none;
    border-top:1px solid var(--gold);
    opacity:.45;
    margin:6px 0;
  }
  .nav ul a{
    display:flex;align-items:center;
    padding:18px 24px;
    font-family:var(--f-display);font-weight:400;
    font-size:19px;letter-spacing:-.005em;
    color:var(--ink);text-decoration:none;
    transition:background .15s ease, color .15s ease, padding-left .15s ease;
  }
  .nav ul a:hover,
  .nav ul a:focus-visible{
    background:var(--paper-2);
    color:var(--accent);
    padding-left:30px;
    outline:none;
  }
  .nav ul a::after{display:none}
  .nav ul a.on{color:var(--accent);font-style:italic}
  /* Per-item chevron — small, mute, animates rightward on hover. Gives
     the menu an editorial-list feel rather than a generic stack. */
  .nav ul a::before{
    content:'';
    display:inline-block;flex:0 0 auto;
    width:6px;height:6px;
    border-right:1.4px solid var(--ink-40);
    border-top:1.4px solid var(--ink-40);
    transform:rotate(45deg);
    margin-right:14px;
    transition:transform .18s ease, border-color .15s ease;
  }
  .nav ul a:hover::before,
  .nav ul a:focus-visible::before,
  .nav ul a.on::before{
    border-color:var(--accent);
    transform:rotate(45deg) translate(2px,-2px);
  }

  nav.nav{position:sticky}
  .nav-inner{grid-template-columns:auto 1fr;gap:16px;padding:14px 22px;position:relative}
  .ribbon-inner{
    column-gap:18px;row-gap:9px;padding:14px 22px;
    font-size:15px;
  }
  /* Both left and right same size + colour. Ticker stretches and scrolls
     horizontally if there are too many items for the width. */
  .ribbon .left {font-size:15px;color:rgba(255,255,255,.78)}
  .ribbon .right{font-size:15px;color:rgba(255,255,255,.78)}
  .ribbon b{font-size:14px}
  /* gap stays 0 on .ticker — the desktop value, mandatory for the marquee
     loop to land cleanly. Inter-item spacing is owned by .t-set. */
  .ticker{font-size:14px}
  .ticker .t-set{gap:18px;padding-right:18px}
  .ribbon .center{
    justify-self:stretch;
    overflow:hidden;
  }
  .wrap{padding:0 22px}
  .narrow{padding:0 22px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px;padding:0 22px}
  .foot-base{flex-direction:column;align-items:flex-start;gap:10px;padding:22px 22px 0}
  .email-capture{margin-top:80px;padding:56px 0}
  .email-capture .ec-inner{grid-template-columns:1fr;gap:24px}
  .email-capture form{min-width:0;width:100%;flex-wrap:wrap}
  .email-capture input[type=email]{flex:1 1 100%}
  .email-capture button{flex:1 1 100%;padding:14px 26px}
  .shelf{grid-template-columns:1fr}
  .paywall{padding:32px 28px 28px}
  .gated-ledger{grid-template-columns:1fr;gap:16px;padding:24px}
  .brand-hero{width:80%;margin-bottom:24px}
  .section{padding:88px 0 8px}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px}
  .nav .cta{padding:9px 16px;font-size:13px}
}
@media (max-width:620px){
  body{font-size:16.5px}

  /* Wrap padding — doubled selector specificity so it beats inline .hero
     and .page-hero rules whose padding shorthand zeroes horizontal padding. */
  .wrap.wrap, .narrow.narrow,
  section.wrap, section.narrow{padding-left:22px;padding-right:22px}

  /* Nav — keep brand + Sign in + Subscribe all visible above the fold */
  .nav-inner{padding:11px 16px;gap:10px}
  .nav .tools{justify-self:end;gap:6px;align-items:center}
  .nav .cta-ghost{
    display:inline-flex;font-size:13px;padding:8px 6px;
    font-style:italic;color:var(--ink-80);
  }
  .nav .cta{padding:8px 14px;font-size:12.5px;letter-spacing:.03em}
  /* Burger scales down to match the 28px wordmark on phone */
  /* Compact-but-still-tappable burger on phones. 40 px square keeps the
     thumb-friendly hit area; the icon scales down slightly. */
  .nav-burger{width:40px;height:40px;gap:4.5px;margin-left:8px}
  .nav-burger span{width:16px;height:1.3px}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
  /* Slightly tighter menu items on the small phone */
  .nav ul a{padding:16px 22px;font-size:18px}
  .nav ul a:hover,.nav ul a:focus-visible{padding-left:28px}
  .brand img.mark{height:28px}
  .brand .the{font-size:13px;margin-top:1px}

  /* Ribbon — explicit row placement: date + tagline both on row 1, ticker on row 2.
     Without explicit rows, auto-placement puts .center on row 2 and .right on row 3. */
  .ribbon-inner{
    padding:11px 16px;font-size:13.5px;gap:8px 12px;
    grid-template-rows:auto auto;
  }
  .ribbon .left {grid-row:1;grid-column:1;justify-self:start;font-size:13.5px;color:rgba(255,255,255,.78)}
  .ribbon .right{grid-row:1;grid-column:2;justify-self:end;font-size:13.5px;color:rgba(255,255,255,.78)}
  .ribbon .center{grid-row:2;grid-column:1/-1;padding:3px 0;font-size:13px}
  .ribbon b{font-size:13px}
  /* gap stays 0 on .ticker, inter-item spacing on .t-set, see <1000px note */
  .ticker{font-size:13px}
  .ticker .t-set{gap:16px;padding-right:16px}
  .ticker .t-item{gap:6px}
  .ticker .t-sep{height:11px}

  /* Masthead — tighten and let it breathe on phone */
  .masthead{padding:12px 0 0}
  .masthead-meta{font-size:9.5px;letter-spacing:.16em;padding:10px 4px;margin-bottom:32px}
  .masthead-meta .m-c{font-size:13px}
  .masthead-double{margin:24px auto 16px;max-width:90%}
  .masthead-stand{font-size:clamp(15px,4.4vw,18px);margin:0 auto 40px;padding:0 6px}
  .brand-hero{width:78%;max-width:340px}

  /* Section head + sections */
  .section{padding:56px 0 8px}
  .section-head{margin-bottom:24px;padding-bottom:18px}
  .section-head .lede{font-size:14.5px}
  .section-head .meta{font-size:12.5px}

  /* Headings */
  h1{font-size:clamp(34px,9vw,52px)}
  h2{font-size:clamp(26px,6.4vw,38px)}
  h3{font-size:clamp(19px,5vw,24px)}

  /* Cards / paywall / ledger */
  .shelf-card{padding:26px 24px 24px;min-height:0}
  .shelf-card h3{font-size:24px}
  .shelf-card p{font-size:15px}
  .paywall{padding:26px 22px 22px;margin:32px auto 36px}
  .paywall h3{font-size:22px}
  .paywall p{font-size:15px}
  .gated-ledger{padding:20px 22px}
  .gated-ledger .count{font-size:38px}
  .gated-ledger .desc{font-size:14.5px}

  /* Pullquote */
  .pullquote{margin:32px 0;padding:18px 0 18px 22px;font-size:clamp(18px,4.8vw,22px)}

  /* Buttons */
  .btn-primary{font-size:14px;padding:12px 22px;gap:8px}
  .btn-ghost{font-size:14.5px;padding:12px 18px}

  /* Email capture */
  .email-capture{margin-top:64px;padding:44px 0}
  .email-capture .ec-inner{padding:0 18px}
  .email-capture .ec-text h3{font-size:clamp(22px,6vw,28px)}
  .email-capture .ec-text p{font-size:15px}
  .email-capture input[type=email]{font-size:15px;padding:12px 14px}
  .email-capture button{font-size:13px;padding:0 18px}

  /* Footer */
  .foot-grid{grid-template-columns:1fr;gap:28px;padding:0 18px}
  .foot-brand .brand img.mark{height:42px}
  .foot-brand .brand .the{font-size:14px}
  .foot-brand p{font-size:14px}
  .foot-col h5{font-size:10.5px;margin-bottom:14px}
  .foot-col li{font-size:14px;margin:7px 0}
  footer{padding:56px 0 28px;margin-top:80px}
  .foot-base{padding:22px 18px 0;font-size:12px}
  .breadcrumb{padding:0 18px;font-size:13px}
}

/* Very narrow phones (≤ 380 pt: iPhone SE, older Androids) */
@media (max-width:380px){
  .nav-inner{padding:10px 12px;gap:8px}
  .nav .cta-ghost{font-size:12px;padding:6px 4px}
  .nav .cta{font-size:11.5px;padding:7px 11px;letter-spacing:.02em}
  .brand img.mark{height:25px}
  .brand .the{font-size:12px}
  .ribbon-inner{padding:9px 12px;font-size:12.5px}
  /* Keep .left and .right the same size and colour so they read as a pair */
  .ribbon .left {font-size:12.5px;color:rgba(255,255,255,.78)}
  .ribbon .right{font-size:12.5px;color:rgba(255,255,255,.78)}
  /* Same gap pattern — keep gap:0 on .ticker so the marquee math holds. */
  .ticker{font-size:12px}
  .ticker .t-set{gap:12px;padding-right:12px}
  .wrap.wrap, .narrow.narrow,
  section.wrap, section.narrow{padding-left:14px;padding-right:14px}
  .masthead-meta{font-size:9px;letter-spacing:.14em}
}

/* ---------- Print ---------- */
@media print{
  .ribbon,.nav,.breadcrumb,.email-capture,.paywall{display:none}
  body{background:#fff;color:#000}
  footer{background:#fff;color:#000}
  .foot-brand .brand img.mark{filter:invert(1)}
  .foot-brand .brand .the{color:#555}
  .foot-col h5,.foot-col a{color:#000}
  .foot-col a{color:#333}
  .gated{filter:none}
  .gated .prose,.gated .chart-block,.gated .table-wrap,.gated .sens{filter:none;opacity:1}
  @page{margin:22mm}
}