/* Press pages stylesheet (/company/press, /company/press/podcasts,
   /company/press-kit). Loaded only by those pages, after styles.css, via
   PressHead in src/components/v17/press-chrome.tsx. Moved out of styles.css on
   2026-10-20 (LAW-1158): every selector here is press-only, so the rest of the
   site no longer downloads it, and press work stops colliding with other
   branches that append to the end of styles.css. Shared pieces the press pages
   reuse (the glass card recipe, .ct-chip, .blog-more-btn, .sec.deep, the hero
   shell) stay in styles.css. */

/* ════════════════════════════════════════════════════════════════════
   PRESS PAGES · /company/press, /company/press/podcasts, /company/press-kit
   Card chrome comes from the shared recipe above (.pr-card is folded into
   it) so this block only carries layout and ink.

   Two rules from design-guardrails govern the choices here:
   1. Uppercase is brand for eyebrows and CTA buttons only, so the outlet
      name is sentence case, not a tracked all-caps label.
   2. The live day/night theme does NOT redefine --navy or
      --muted-foreground -- it overrides per selector. Every ink rule
      below therefore needs its own [data-theme="dark"] mirror or it goes
      dark-on-dark. Both are mirrored at the end of this block.
   ══════════════════════════════════════════════════════════════════ */

.pr-list{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.pr-card{display:block;padding:22px 24px;text-decoration:none}
.pr-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:7px}
.pr-outlet{font-family:'Montserrat',sans-serif;font-size:var(--fs-12);font-weight:700;color:var(--navy);margin:0}
.pr-date{font-size:var(--fs-13);color:var(--muted-foreground);white-space:nowrap;flex:none;margin:0}
.pr-title{font-family:'Montserrat',sans-serif;font-size:var(--fs-16);font-weight:400;line-height:1.42;color:var(--navy);margin:0}
.pr-note{font-size:var(--fs-13);color:var(--muted-foreground);line-height:1.6;margin:9px 0 0}
/* Hover signals with a gold underline, not gold ink: no LAWCLERK gold
   clears 3:1 on a light ground (see design-guardrails), but gold as a
   graphic rule carries no contrast duty. */
.pr-card:hover .pr-title,.pr-card:focus-visible .pr-title{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--gold)}
.pr-card:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(198,178,93,.45)}

/* Featured band. Sits on section.sec.deep, which is the page's dark
   anchor, so no card chrome here -- white ink straight on the navy. */
.pr-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-top:8px}
.pr-feat-item{border-top:1px dashed rgba(255,255,255,.18);padding-top:16px}
/* Ink on this band is white, not gold, and that is measured rather than
   assumed. section.sec.deep does NOT render as --navy-deep: it carries a
   gradient and the rendered pixel here is rgb(70,92,110), light enough that
   --gold-light at 11.5px bold reaches only 3.47:1 and its link only 3.98:1.
   Both need 4.5:1. Per design-guardrails the fix is to move the gold off
   ink duty, not to darken the band or change the token, so gold survives
   only as the link underline, which is a graphic and carries no duty. */
.pr-feat-outlet{font-family:'Montserrat',sans-serif;font-size:var(--fs-12);font-weight:700;color:#fff;margin:0 0 8px}
.pr-feat-quote{font-family:'Montserrat',sans-serif;font-size:var(--fs-16);font-weight:300;line-height:1.45;color:#fff;margin:0 0 10px}
.pr-feat-meta{font-size:var(--fs-13);color:rgba(255,255,255,.82);margin:0}
.pr-feat-meta a{color:#fff;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--gold)}
.pr-feat-meta a:hover{text-decoration-color:var(--gold-light)}

/* Press kit: fact rows and the downloadable asset list. */
.pr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0;padding:0}
/* Chrome from the shared glass recipe (LAW-1158 audit): these were the
   only flat 14px panels on a page whose founder cards are glass. */
.pr-fact{padding:20px 22px;margin:0}
.pr-fact dt{font-size:var(--fs-13);color:var(--muted-foreground);margin:0 0 6px}
.pr-fact dd{font-family:'Montserrat',sans-serif;font-size:var(--fs-16);font-weight:600;color:var(--navy);margin:0}
.pr-boiler{padding:26px}
.pr-boiler p{font-size:var(--fs-14);line-height:1.75;color:var(--muted-foreground);margin:0 0 14px}
.pr-boiler p:last-child{margin-bottom:0}

@media(max-width:560px){
  .pr-card{padding:18px 18px}
  .pr-card-head{flex-direction:column;gap:2px}
  .pr-date{white-space:normal}
}

/* ─── Dark mirrors. Required: the live theme does not reassign the
       --navy / --muted-foreground tokens these rules read. ───────── */
:root[data-theme="dark"] .pr-outlet{color:var(--gold-light)}
:root[data-theme="dark"] .pr-title{color:#fff}
:root[data-theme="dark"] .pr-date,
:root[data-theme="dark"] .pr-note{color:rgba(255,255,255,.66)}
:root[data-theme="dark"] .pr-fact dd{color:#fff}
:root[data-theme="dark"] .pr-fact dt,
:root[data-theme="dark"] .pr-boiler p{color:rgba(255,255,255,.72)}

/* ─── Press page, outlet-grouped editorial layout ──────────────────
   Grouped by publication rather than by year, because the question a
   press page answers is "who covered you", not "what happened in 2019".

   Two things here are deliberately borrowed rather than invented:
   the masthead strip reuses .trust / .trust-logo (styles.css:432), which
   already existed for exactly this job and was unused; and .pr-quote
   echoes .post-body blockquote (styles.css:5145) so an excerpt on this
   page and a pull quote in a blog post read as the same device. ───── */

.pr-og{padding:0 0 34px;margin:0 0 34px;border-bottom:1px solid var(--border)}
.pr-og:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.pr-og-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.pr-og-name{font-family:'Montserrat',sans-serif;font-size:var(--fs-19);font-weight:500;color:var(--navy);margin:0;line-height:1.3}
.pr-og-count{font-size:var(--fs-13);color:var(--muted-foreground);white-space:nowrap;flex:none;margin:0}

.pr-item{margin:0 0 24px}
.pr-item:last-child{margin-bottom:0}
.pr-item-title{display:inline-block;font-family:'Montserrat',sans-serif;font-size:var(--fs-16);font-weight:400;line-height:1.42;color:var(--navy);text-decoration:none;margin:0}
.pr-item-title:hover,.pr-item-title:focus-visible{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--gold)}
.pr-item-title:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 3px rgba(198,178,93,.45)}
/* Gold is the rule down the side, never the letters. No LAWCLERK gold
   clears 3:1 on a light ground; as a graphic it carries no duty. */
.pr-quote{margin:10px 0 0;padding:1px 0 1px 16px;border-left:2px solid var(--gold);font-family:'Montserrat',sans-serif;font-weight:300;font-size:var(--fs-15);line-height:1.62;color:var(--navy)}
.pr-item-meta{font-size:var(--fs-13);color:var(--muted-foreground);margin:8px 0 0}
.pr-sep{opacity:.45;padding:0 7px}

/* The single large quote carried on the dark anchor band. */
.pr-lead{max-width:800px}
.pr-lead-q{font-family:'Montserrat',sans-serif;font-weight:300;font-size:clamp(21px,2.5vw,29px);line-height:1.38;color:#fff;margin:0 0 20px}
/* .92 not .82: measured 4.4:1 at .82 against this band's rendered
   rgb(70,92,110), which misses the 4.5 floor for 13.5px text. */
.pr-lead-cite{font-size:var(--fs-14);color:rgba(255,255,255,.92);margin:0}
.pr-lead-cite a{color:#fff;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--gold)}
.pr-lead-cite a:hover{text-decoration-color:var(--gold-light)}

/* Masthead. .trust paints --bg; on this page it sits between two light
   sections, so let the page backdrop through like every other light band. */
[data-theme="light"] .pr-masthead{background:transparent}
.pr-masthead .trust-in{gap:22px}
.pr-masthead .trust-logos{gap:22px 26px}

@media(max-width:560px){
  .pr-og-head{flex-direction:column;gap:2px}
  .pr-og-count{white-space:normal}
  .pr-quote{font-size:var(--fs-14);padding-left:13px}
}

/* ─── Dark mirrors. The live theme does not reassign --navy or
       --muted-foreground, so each of these is required. ──────────── */
:root[data-theme="dark"] .pr-og{border-bottom-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .pr-og-name{color:#fff}
:root[data-theme="dark"] .pr-item-title{color:#fff}
:root[data-theme="dark"] .pr-quote{color:rgba(255,255,255,.84)}
:root[data-theme="dark"] .pr-og-count,
:root[data-theme="dark"] .pr-item-meta{color:rgba(255,255,255,.70)}
:root[data-theme="dark"] .pr-masthead .trust-logo{color:#fff}

/* ─── Newsroom (/company/press) ────────────────────────────────────
   Structure follows the references David gave (mycase.com/in-the-news,
   harvey.ai/newsroom, legora.com/newsroom). Three things they share and
   that are reproduced here:

     1. FLAT reverse-chronological. Not grouped by year and not grouped by
        outlet. Harvey and MyCase both run a single dated run, newest first.
     2. The date is the only right-hand metadata, right-aligned, so the dates
        form a column you can scan straight down. That is what turns a list
        of links into a dated record.
     3. Rows, not cards. Both references use a hairline between borderless
        entries; neither boxes anything.

   Neither reference uses publication LOGOS as images, which is lucky: we
   have no logo files and licensing them is not quick. Outlet name as text.
   ────────────────────────────────────────────────────────────────── */

.nr-count{font-size:var(--fs-13);color:var(--muted-foreground);margin:0 0 6px;font-variant-numeric:tabular-nums}

/* The lead announcement. Only the newest own release gets this. */
.nr-lead{
  display:grid;grid-template-columns:1fr;gap:14px;
  padding:0 0 34px;margin:0 0 10px;border-bottom:1px solid var(--border);
}
.nr-lead-tag{
  display:inline-block;font-family:'Montserrat',sans-serif;font-size:var(--fs-11);font-weight:600;
  letter-spacing:.06em;color:var(--navy);background:var(--gold-tint);
  border:1px solid rgba(168,152,68,.34);border-radius:3px;padding:3px 10px;width:fit-content;
}
.nr-lead-t{
  font-family:'Montserrat',sans-serif;font-weight:300;font-size:clamp(22px,2.7vw,31px);
  line-height:1.24;letter-spacing:-.01em;color:var(--navy);text-decoration:none;margin:0;
  display:block;max-width:24ch;text-wrap:balance;
}
.nr-lead-t:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--gold)}
.nr-lead-x{font-size:var(--fs-15);line-height:1.66;color:var(--muted-foreground);margin:0;max-width:62ch}
.nr-lead-d{font-size:var(--fs-13);color:var(--muted-foreground);margin:0;font-variant-numeric:tabular-nums}

/* One entry. Grid so every date lands on the same right-hand axis. */
.nr-row{
  display:grid;grid-template-columns:1fr 128px;gap:10px 24px;align-items:start;
  padding:22px 0;border-top:1px solid var(--border);
}
.nr-row:first-of-type{border-top:0}
.nr-src{
  font-family:'Montserrat',sans-serif;font-size:var(--fs-13);font-weight:600;color:var(--navy);
  margin:0 0 5px;grid-column:1;
}
.nr-t{
  font-family:'Montserrat',sans-serif;font-size:var(--fs-16);font-weight:400;line-height:1.4;
  color:var(--navy);text-decoration:none;margin:0;grid-column:1;display:block;
}
.nr-t:hover,.nr-t:focus-visible{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--gold)}
.nr-t:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 3px rgba(198,178,93,.45)}
.nr-x{
  font-size:var(--fs-14);line-height:1.62;color:var(--muted-foreground);margin:8px 0 0;
  grid-column:1;max-width:66ch;
}
.nr-d{
  grid-column:2;grid-row:1 / span 3;text-align:right;font-size:var(--fs-13);
  color:var(--muted-foreground);margin:0;white-space:nowrap;font-variant-numeric:tabular-nums;
  padding-top:1px;
}
.nr-flags{grid-column:1;display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.nr-flag{
  font-size:var(--fs-11);font-weight:500;padding:2px 8px;border-radius:3px;
  background:var(--cream);color:var(--muted-foreground);border:1px solid var(--border);
}

@media(max-width:640px){
  .nr-row{grid-template-columns:1fr;gap:0}
  .nr-d{grid-column:1;grid-row:auto;text-align:left;margin-top:9px}
  .nr-lead-t{max-width:none}
}

/* ─── Dark mirrors. Required: the live theme reassigns neither --navy
       nor --muted-foreground. ─────────────────────────────────────── */
:root[data-theme="dark"] .nr-lead{border-bottom-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .nr-row{border-top-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .nr-lead-t,
:root[data-theme="dark"] .nr-t{color:#fff}
:root[data-theme="dark"] .nr-src{color:var(--gold-light)}
:root[data-theme="dark"] .nr-lead-x,
:root[data-theme="dark"] .nr-x{color:rgba(255,255,255,.80)}
:root[data-theme="dark"] .nr-count,
:root[data-theme="dark"] .nr-lead-d,
:root[data-theme="dark"] .nr-d{color:rgba(255,255,255,.70)}
:root[data-theme="dark"] .nr-lead-tag{background:rgba(213,196,123,.14);border-color:rgba(213,196,123,.34);color:var(--gold-light)}
:root[data-theme="dark"] .nr-flag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}

/* ══ Newsroom (/company/press) — editorial register ═════════════════════
   APPEND to public/v17/css/styles.css after the existing .nr-* block
   (file currently ends at 6760). Every rule below is later in source than
   the rule it supersedes, and each is at least as specific.

   Serif rule, stated once and held everywhere:
     Cormorant Garamond ITALIC = a verbatim quotation from a published
       source (.nr-x, .pr-quote, and the one band item that is a quotation).
     Cormorant Garamond ROMAN  = display furniture that names things
       (hero standfirst, outlet masthead, .pr-og-name).
     Montserrat = every headline and every label.
     Geist = our own prose (the lead dek).

   Gold never becomes ink on a light ground. Measured on this page's real
   grounds (page backdrop ranges #D6E4EC L.758 to #EAE8E7 L.810):
     --gold      1.63-2.12:1   --gold-deep 2.23-2.90:1   --ink3 2.90-3.76:1
   all three fail, so gold here is only a rule, a border, a diamond, a wash,
   an underline, a focus ring or one decorative glyph. --ink3 is never used.
   Every muted string is --muted-foreground (#5D5D5D): 5.07:1 on the bluest
   ground, 6.58:1 on white. Body ink is --navy (6.92-8.98:1) or --post-ink
   (6.78-8.80:1).

   Gold becomes a letter in exactly one place, and only because the ground
   is changed to earn it: see "the navy band" below.

   Grounds assumed: .sec.cream / .sec.white render as the page backdrop at
   about 0.77 relative luminance in light mode, #2A3845 (.sec.cream) and
   #243341 (.sec.white) in dark. :root[data-theme="dark"] reassigns only
   --post-ink (styles.css:6129) — not --navy, --muted-foreground, --border
   or any gold — so every ink rule below carries an explicit dark mirror.
   ══════════════════════════════════════════════════════════════════════ */

.nr-lead,
.nr-row{--nr-rail:164px;--nr-gap:32px;--nr-text:calc(var(--nr-rail) + var(--nr-gap))}

/* (The Cormorant "standfirst" that used to sit here was removed on
   2026-10-15: the press kit and podcasts headers now use the site's own
   .pghead subhead, like /company/contact/.) */

/* ── The folio line. Count on the left, hairline out to the measure. ─── */
.nr-count{
  display:flex;align-items:center;gap:14px;max-width:880px;
  font-family:'Montserrat',sans-serif;font-size:var(--fs-13);font-weight:500;
  letter-spacing:.01em;line-height:1.5;color:var(--muted-foreground);
  margin:0 0 16px;font-variant-numeric:tabular-nums;
}
.nr-count::after{content:'';flex:1 1 auto;height:1px;background:var(--border-soft)}

/* ── The pinned lead announcement. ────────────────────────────────────
   A front-page lead item: gold rule over, hairline under, and a 216px
   right rail whose vertical rule is what makes the block read as set
   type rather than as a taller stack. ───────────────────────────────── */
.nr-lead{
  display:grid;grid-template-columns:minmax(0,1fr) 216px;gap:18px 48px;
  align-items:start;max-width:880px;padding:30px 0 40px;margin:0 0 4px;
  border-top:2px solid var(--gold-deep);border-bottom:1px solid var(--border);
}
/* The gold-tint pill is gone: it was the only filled, bordered, rounded
   object on a page made of hairlines. One 6px diamond on the single
   newest item, reusing the keyframe at styles.css:354, is the signal. */
.nr-lead-tag{
  grid-column:1;grid-row:1;
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  font-family:'Montserrat',sans-serif;font-size:var(--fs-13);font-weight:600;
  letter-spacing:.02em;line-height:1.4;color:var(--navy);
  background:none;border:0;border-radius:0;padding:0;
}
.nr-lead-tag::before{
  content:'';width:6px;height:6px;flex:none;border-radius:1px;
  background:var(--gold);transform:rotate(45deg);
  animation:lc-diamond-bob 1.9s ease-in-out infinite;
}
/* One step under .s-h2's clamp(30px,3.8vw,46px) so the lead is the
   section's biggest item without competing with the section title. */
.nr-lead-t{
  grid-column:1;grid-row:2;display:block;margin:0;text-decoration:none;
  font-family:'Montserrat',sans-serif;font-weight:300;
  font-size:clamp(27px,3.2vw,40px);line-height:1.14;letter-spacing:-.015em;
  color:var(--navy);max-width:20ch;text-wrap:balance;
}
.nr-lead-t:hover,.nr-lead-t:focus-visible{
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:6px;text-decoration-color:var(--gold);
}
.nr-lead-t:focus-visible{outline:none;border-radius:3px;box-shadow:0 0 0 3px rgba(198,178,93,.45)}
/* Geist, not serif: this is our dek, not a quotation. --post-ink, not
   --muted-foreground: a real dek is nearly body ink, not grey. */
.nr-lead-x{
  grid-column:1;grid-row:3;margin:0;
  font-size:var(--fs-16);line-height:1.72;color:var(--post-ink);max-width:62ch;
}
.nr-lead-d{
  grid-column:2;grid-row:2 / span 2;align-self:start;margin:0;
  padding-left:22px;border-left:1px solid var(--border);
  font-family:'Montserrat',sans-serif;font-size:var(--fs-13);font-weight:400;
  line-height:1.7;color:var(--muted-foreground);font-variant-numeric:tabular-nums;
}

/* ── One row. A two-column dateline, not a stack. ─────────────────────
   Moving the outlet out of the reading column puts all 42 headlines on
   one left edge and turns the dates into a left-hand numeral column you
   read down instead of a right-hand one you hunt for.

   164px, not 152px: measured against the real data, the rail carries 26
   outlet names and the longest run 34-37 characters ("Legal Talk Today
   (Legal Talk Network)", "Thinking Like a Lawyer (Above the Law)",
   "LawNext Legal Technology Directory"). At 152px those break to three
   lines; at 164px they break to two — rendered, 25 outlets take one line
   and 17 take two, and none takes three. ───────────────────────────── */
.nr-row{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:var(--nr-rail) 1fr;gap:0 var(--nr-gap);
  align-items:start;max-width:880px;margin:0;padding:26px 0;
  border-top:0;
}
.nr-row > *{position:relative;z-index:1}

/* The separator ticks the content column only and never crosses the rail,
   so the rail stays one continuous field instead of 42 stripes ruling the
   page. Kept on background-image rather than border-top so the hover wash
   (a pseudo-element) cannot overwrite it.

   --border (#C8D5DE), NOT --border-soft: ticking only the content column
   already breaks the grid effect, so weakening the ink as well leaves a
   rule you cannot see. #DCE5EC on this page's ~#E2E8EC ground measures
   about 1.05:1 and rendered as nothing. */
.nr-row + .nr-row{
  background-image:linear-gradient(90deg,
    transparent 0 var(--nr-text),
    var(--border) var(--nr-text) 100%);
  background-repeat:no-repeat;background-position:0 0;background-size:100% 1px;
}
/* The run opens on a gold rule, full measure. --gold-deep rather than
   --gold on the two structural head rules: as a rule (no text duty) it
   carries 2.38:1 against the page ground where --gold carries 1.73:1, so
   it actually reads. --gold stays on the 38 quote rules and the diamonds,
   which is a deliberate two-tier weight: the darker gold opens a run, the
   lighter gold marks a quotation. */
.nr-row:first-of-type{border-top:2px solid var(--gold-deep);padding-top:24px}
/* When a lead precedes the run the folio's own hairline is the separator,
   so the run does not also open on a rule: three horizontal marks inside
   60px was the clutter. */
.nr-lead ~ * .nr-row:first-of-type{border-top:0;padding-top:26px}
.nr-quiet .nr-row:first-of-type{border-top-color:var(--border)}

/* Hover wash and gold bar, bled 20px past the text edge on both sides so
   they overshoot the column the way a newspaper rule overshoots its.
   Gold .11 over the lightest ground gives #E6E2D8, where --navy is
   6.95:1 and --muted-foreground 5.09:1, so nothing loses contrast on
   hover. The global prefers-reduced-motion block at styles.css:99
   already flattens both transitions and the diamond's keyframe. */
.nr-row::before,
.nr-row::after{content:'';position:absolute;z-index:0;opacity:0;transition:opacity .18s ease;pointer-events:none}
.nr-row::before{
  inset:0 -20px;
  background:linear-gradient(90deg,rgba(198,178,93,.11) 0%,rgba(198,178,93,0) 72%);
}
.nr-row::after{left:-20px;top:0;bottom:0;width:2px;background:var(--gold)}
.nr-row:hover::before,.nr-row:focus-within::before,
.nr-row:hover::after,.nr-row:focus-within::after{opacity:1}

/* ── The rail. The 3px nudge is measured, not guessed: at 12.5px/1.35
   against a 19px/1.34 headline the rail's cap-height lands 2.8px high;
   with the padding it lands 0.22px off. ───────────────────────────── */
.nr-src{
  grid-column:1;grid-row:1;margin:0 0 6px;padding-top:3px;
  font-family:'Montserrat',sans-serif;font-size:var(--fs-13);font-weight:600;
  line-height:1.35;letter-spacing:.005em;color:var(--navy);
}
.nr-d{
  grid-column:1;grid-row:2;align-self:start;text-align:left;margin:0;
  white-space:normal;
  font-family:'Montserrat',sans-serif;font-size:var(--fs-13);font-weight:400;
  line-height:1.5;color:var(--muted-foreground);font-variant-numeric:tabular-nums;
}
/* Our own announcements render no .nr-src, so .nr-t is the row's first
   child and the date takes row 1. Sibling combinator rather than :has(),
   so there is no modern-selector dependency at all. */
.nr-t:first-child ~ .nr-d{grid-row:1;padding-top:2px}

/* ── The content column. text-wrap:pretty, not balance: balance is the
   right call for one headline and the wrong one for 42. ───────────── */
.nr-t{
  grid-column:2;grid-row:1;display:block;margin:0;text-decoration:none;
  font-family:'Montserrat',sans-serif;font-size:var(--fs-19);font-weight:400;
  line-height:1.34;letter-spacing:-.005em;color:var(--navy);
  max-width:44ch;text-wrap:pretty;
}
.nr-t:hover,.nr-t:focus-visible{
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:4px;text-decoration-color:var(--gold);
}
.nr-t:focus-visible{outline:none;border-radius:3px;box-shadow:0 0 0 3px rgba(198,178,93,.45)}

/* ── THE MOVE. Fires on 38 of the 42 outside rows and on the bylines.
   The recipe is .ldoc-quote (styles.css:3690) — 20px Cormorant italic in
   --navy behind a gold left rule — applied to the items that are
   literally quotations. Weight 400 and full-strength --navy, not 500 and
   not --post-ink: at 20px across 38 stacked blocks the navy reads as ink
   rather than as a watermark, and gold stays a rule instead of a letter.
   58ch measure, not 52ch: measured, the 38 excerpts run 73-228 characters
   (median 150, mean 147, none over 260), so the median is ~2.6 lines and
   only one item reaches four. ─────────────────────────────────────── */
.nr-x,
.pr-quote{
  margin:12px 0 0;padding:2px 0 2px 18px;
  border-left:2px solid var(--gold);
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-style:italic;font-weight:400;font-size:var(--fs-20);line-height:1.5;
  letter-spacing:.002em;color:var(--navy);max-width:58ch;
}
.nr-x{grid-column:2;grid-row:2}

/* Meta line: 5px gold diamonds between items. No pills, no cream chips —
   the old .nr-flag background was var(--cream) on a cream section. */
.nr-flags{
  grid-column:2;grid-row:3;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:12px 0 0;
}
.nr-flag{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-13);font-weight:400;line-height:1.5;color:var(--muted-foreground);
  background:none;border:0;border-radius:0;padding:0;
}
.nr-flag + .nr-flag::before{
  content:'';width:5px;height:5px;flex:none;border-radius:1px;
  background:var(--gold);transform:rotate(45deg);
}

/* ── The navy band. ───────────────────────────────────────────────────
   Flattened to the brand token, scoped to this page's band only.
   [data-theme="light"] section.sec.deep:not(.prods-glass) at styles.css
   :2603 paints this band as a gradient #445A6C -> #536A7E -> #647C92.
   Measured on that gradient's light end #647C92: plain white is 4.34:1
   and the band's own .pr-feat-meta at rgba(255,255,255,.82) is 3.54:1 —
   both under the 4.5 floor for 12.5px text, and that is a failure
   shipping today, which the note at styles.css:6575 half-diagnosed and
   then worked around by keeping gold off ink duty.

   Flat --navy-deep #2A3845: white 12.00:1, --gold-light 6.86:1,
   --gold 5.67:1. Both selectors below are (0,4,1), tying 2603 and
   winning on source order. One gold radial, capped at .12 and not
   stacked: the brightest pixel it produces is #3D4748, where white is
   9.57:1 and --gold-light is 5.48:1. Two stacked radials would drop
   gold-light to 4.47:1, so there is exactly one.

   This is the only place on the page where gold is a letter, and the
   ground was changed to earn it rather than the token. ─────────────── */
section.sec.deep.nr-band,
[data-theme="light"] section.sec.deep.nr-band{
  background:
    radial-gradient(58% 52% at 14% 12%, rgba(198,178,93,.12) 0%, transparent 68%),
    var(--navy-deep);
  color:#fff;
}

.pr-feat{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:14px;border-top:1px solid rgba(255,255,255,.20);
}
/* Solid hairline with a 28px gold tick, not a dashed border. */
.pr-feat-item{
  position:relative;border-top:0;
  border-left:1px solid rgba(255,255,255,.14);padding:24px 34px 0;
}
.pr-feat-item:first-child{border-left:0;padding-left:0}
.pr-feat-item::before{
  content:'';position:absolute;top:-1px;left:0;width:28px;height:2px;
  border-radius:1px;background:var(--gold);
}
.pr-feat-item:not(:first-child)::before{left:34px}
/* 6.86:1 on the flat band, 5.48:1 at the radial's brightest pixel. */
.pr-feat-outlet{
  font-family:'Montserrat',sans-serif;font-size:var(--fs-13);font-weight:600;
  letter-spacing:.015em;line-height:1.4;color:var(--gold-light);margin:0 0 12px;
}
/* The two factual items stay Montserrat. "Rated 4.6 out of 5" is not
   something anybody said, and typesetting it as a quotation would be a lie. */
.pr-feat-quote{
  font-family:'Montserrat',sans-serif;font-size:var(--fs-19);font-weight:300;
  line-height:1.42;color:#fff;margin:0 0 12px;
}
/* The one item whose text is a verbatim quotation. */
.pr-feat-quote.pr-feat-said{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-style:italic;font-weight:400;font-size:clamp(22px,2.2vw,27px);
  line-height:1.34;letter-spacing:-.005em;
}
/* A large decorative quotation mark whose legibility explicitly does not
   matter, and it is on the band anyway. */
.pr-feat-said::before{
  content:'\201C';display:block;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;
  font-size:56px;line-height:.5;color:var(--gold-light);margin:8px 0 16px;
}
.pr-feat-meta{font-size:var(--fs-13);line-height:1.6;color:rgba(255,255,255,.88);margin:0}

/* Masthead: serif outlet names, gold diamonds between them. */
.pr-masthead{margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.20)}
.pr-masthead .trust-in{gap:0;justify-content:flex-start}
.pr-masthead .trust-logos{column-gap:0;row-gap:14px;justify-content:flex-start;opacity:1}
.pr-masthead .trust-logo{
  gap:0;font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:var(--fs-20);font-weight:500;font-style:normal;letter-spacing:.01em;
  text-transform:none;color:rgba(255,255,255,.94);
}
.pr-masthead .trust-logo + .trust-logo::before{
  content:'';width:5px;height:5px;flex:none;border-radius:1px;
  background:var(--gold);transform:rotate(45deg);margin:0 20px;
}

/* ── Founder bylines: the same system, outlet name in roman serif.
   .pr-og-head keeps display:flex from styles.css:6626 — only the
   properties below are redeclared. ────────────────────────────────── */
.pr-og-head{
  position:relative;padding-bottom:12px;margin-bottom:22px;
  border-bottom:1px solid var(--border-soft);
}
.pr-og-head::after{
  content:'';position:absolute;left:0;bottom:-1px;width:44px;height:2px;
  border-radius:1px;background:var(--gold);
}
.pr-og-name{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:var(--fs-24);font-weight:500;letter-spacing:.01em;line-height:1.25;
  color:var(--navy);margin:0;
}
.pr-og-count{font-size:var(--fs-13);line-height:1.5;color:var(--muted-foreground);white-space:nowrap;flex:none;margin:0}
.pr-item{margin:0 0 26px}
.pr-item-title{font-size:var(--fs-16);line-height:1.38}

/* ── Responsive ───────────────────────────────────────────────────── */
@media(max-width:900px){
  .nr-lead,.nr-row{--nr-rail:138px;--nr-gap:26px}
}
@media(max-width:820px){
  .nr-lead{grid-template-columns:1fr;gap:16px}
  .nr-lead-d{grid-column:1;grid-row:auto;padding-left:0;border-left:0;padding-top:4px}
  .pr-feat{grid-template-columns:1fr;border-top:0}
  .pr-feat-item{
    border-left:0;border-top:1px solid rgba(255,255,255,.16);
    padding:22px 0 0;margin-top:22px;
  }
  .pr-feat-item:first-child{margin-top:0}
  .pr-feat-item:not(:first-child)::before{left:0}
}
@media(max-width:640px){
  .nr-lead,.nr-row{--nr-rail:0px;--nr-gap:0px;--nr-text:0px}
  .nr-row{grid-template-columns:1fr;padding:22px 0}
  .nr-row + .nr-row{background-image:linear-gradient(90deg,var(--border) 0 100%)}
  .nr-row::before{inset:0 -14px}
  .nr-row::after{left:-14px}
  .nr-src{grid-column:1;grid-row:1;padding-top:0}
  .nr-t{grid-column:1;grid-row:2;max-width:none;margin-top:4px;font-size:var(--fs-18)}
  .nr-x{grid-column:1;grid-row:3}
  /* The 560px .pr-quote rule at styles.css:6659 is now dead — the
     unqualified .pr-quote above is later in source and wins at every
     width — so the narrow size is restated here for both. */
  .nr-x,.pr-quote{font-size:var(--fs-18);padding-left:14px;max-width:none}
  .nr-flags{grid-column:1;grid-row:4}
  .nr-d{grid-column:1;grid-row:5;margin-top:10px}
  .nr-t:first-child ~ .nr-d{grid-row:5;padding-top:0}
  .pr-masthead .trust-logo{font-size:var(--fs-17)}
  .pr-masthead .trust-logo + .trust-logo::before{margin:0 13px}
  .pr-og-name{font-size:var(--fs-21)}
}

/* ══ Dark mirrors ══════════════════════════════════════════════════════
   Required: :root[data-theme="dark"] reassigns only --post-ink
   (styles.css:6129). Grounds are #2A3845 for .sec.cream (the lead, the
   bylines) and #243341 for .sec.white (outside press, paid). Worst ink
   below is --gold-light on #2A3845 at 6.86:1; white at .72 is 7.06:1 on
   #2A3845 and 7.52:1 on #243341, at .88 it is 9.68:1 / 10.42:1. ────── */
:root[data-theme="dark"] .nr-count{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .nr-count::after{background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .nr-lead{border-bottom-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .nr-lead-tag{color:#fff;background:none;border:0}
:root[data-theme="dark"] .nr-lead-t,
:root[data-theme="dark"] .nr-t{color:#fff}
:root[data-theme="dark"] .nr-lead-x{color:rgba(255,255,255,.82)}
:root[data-theme="dark"] .nr-lead-d{color:rgba(255,255,255,.72);border-left-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .nr-row + .nr-row{
  background-image:linear-gradient(90deg,
    transparent 0 var(--nr-text),
    rgba(255,255,255,.11) var(--nr-text) 100%);
}
:root[data-theme="dark"] .nr-row:first-of-type{border-top-color:var(--gold)}
:root[data-theme="dark"] .nr-lead ~ * .nr-row:first-of-type{border-top:0}
:root[data-theme="dark"] .nr-quiet .nr-row:first-of-type{border-top-color:rgba(255,255,255,.22)}
:root[data-theme="dark"] .nr-row::before{
  background:linear-gradient(90deg,rgba(213,196,123,.10) 0%,rgba(213,196,123,0) 72%);
}
:root[data-theme="dark"] .nr-row::after{background:var(--gold-light)}
:root[data-theme="dark"] .nr-src{color:var(--gold-light)}
:root[data-theme="dark"] .nr-d{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .nr-flag{background:none;border:0;color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .nr-flag + .nr-flag::before{background:var(--gold-light)}
:root[data-theme="dark"] .nr-x,
:root[data-theme="dark"] .pr-quote{color:rgba(255,255,255,.88);border-left-color:var(--gold-light)}
:root[data-theme="dark"] section.sec.deep.nr-band{
  background:
    radial-gradient(58% 52% at 14% 12%, rgba(198,178,93,.10) 0%, transparent 68%),
    #1B2630;
}
:root[data-theme="dark"] .pr-og-head{border-bottom-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .pr-og-name{color:#fff}
:root[data-theme="dark"] .pr-og-count{color:rgba(255,255,255,.72)}
/* styles.css:1556 dims every .trust-logos to .45 in dark and :1557 forces
   its spans to #fff. This masthead is content, not a logo wall, so it opts
   out; both selectors below out-specify those. */
:root[data-theme="dark"] .pr-masthead .trust-logos{opacity:1}
:root[data-theme="dark"] .pr-masthead .trust-logo{color:rgba(255,255,255,.94)}
:root[data-theme="dark"] .pr-masthead{border-top-color:rgba(255,255,255,.20)}
@media(max-width:640px){
  :root[data-theme="dark"] .nr-row + .nr-row{background-image:linear-gradient(90deg,rgba(255,255,255,.11) 0 100%)}
}


/* ─── Correction to the spec above, found by the design panel's eye judge
       and not fixed by the synthesis. ─────────────────────────────────

   .nr-x sets every excerpt in Cormorant italic behind a gold rule, which is
   the right treatment for a passage SOMEONE ELSE wrote. But NewsroomRow also
   renders our own 12 non-lead announcements, whose .nr-x holds our own PR
   Newswire dek. Left alone, our boilerplate renders as though a publication
   said it, behind the same gold quote rule as a verbatim Ambrogi line.

   This repo has a fabricated-quote incident on record and a standing rule
   that every quote trace to someone who actually said it. A typographic
   treatment that says "this is a quotation" is subject to that rule too, so
   our own prose stays in the body face with no quote rule. */
.nr-row.is-ours .nr-x{
  border-left:0;padding-left:0;
  font-family:inherit;font-style:normal;font-size:var(--fs-15);
  line-height:1.66;color:var(--muted-foreground);max-width:64ch;
}
:root[data-theme="dark"] .nr-row.is-ours .nr-x{color:rgba(255,255,255,.80)}


/* ─── Newsroom cards ───────────────────────────────────────────────
   Shell is the shared glass recipe (styles.css:1177); .nr-card is in all
   four of its selector lists, so blur, border, hover lift and the dark
   mirrors are inherited and cannot drift from .atty / .tc / .pr-card.

   The cover is drawn, not photographed. Readability rules, both measured:
     - Cover ink is #fff on a navy field. Gold never becomes a letter here.
     - Body ink sits on the pale glass, where --navy measures ~7:1.
   ────────────────────────────────────────────────────────────────── */

.nr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;align-items:start}
@media(max-width:980px){.nr-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.nr-grid{grid-template-columns:1fr;gap:20px}}

.nr-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;border-radius:16px}

/* ── Cover ───────────────────────────────────────────────────────
   A 16:9 navy field carrying the outlet name. The gold is a wash and a
   baseline rule, never ink. Four tints keyed on what the item IS. */
.nr-cover{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:16/9;padding:18px 20px;overflow:hidden;
  background:
    radial-gradient(120% 110% at 88% 8%, rgba(198,178,93,.30) 0%, transparent 58%),
    linear-gradient(152deg, #2F4052 0%, #3A4B5B 46%, #46596B 100%);
}
/* The photo sits under a navy scrim. The scrim is what makes the cover ink
   legible: a raw photograph behind white text is a contrast lottery that
   changes with every image, so the gradient is opaque navy where the text
   actually sits and only thins out at the top. Measured, not eyeballed. */
.nr-cover-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.nr-card:hover .nr-cover-img{transform:scale(1.045)}
.nr-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(24,33,44,.30) 0%,
    rgba(24,33,44,.58) 38%,
    rgba(24,33,44,.86) 70%,
    rgba(24,33,44,.94) 100%);
}
.nr-cover::after{
  content:'';position:absolute;left:20px;right:20px;bottom:0;height:2px;background:var(--gold);opacity:.85;z-index:2;
}
.nr-cover-src{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-style:italic;font-weight:500;font-size:clamp(21px,2vw,26px);line-height:1.12;
  color:#fff;letter-spacing:-.005em;position:relative;z-index:2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.nr-cover-kind{
  font-family:'Montserrat',sans-serif;font-size:var(--fs-11);font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.92);margin-top:7px;position:relative;z-index:2;
}
/* Tints. Each shifts the field, never the ink. */
/* Tints now ride ON the scrim, so they shift the photo's cast rather
   than replacing it. Applied to ::before, which sits above the img. */
.nr-cover.t-own .nr-scrim{background:linear-gradient(180deg,rgba(30,41,53,.30) 0%,rgba(30,41,53,.58) 38%,rgba(30,41,53,.86) 70%,rgba(30,41,53,.95) 100%)}
.nr-cover.t-pod .nr-scrim{background:linear-gradient(180deg,rgba(22,36,50,.30) 0%,rgba(22,36,50,.58) 38%,rgba(22,36,50,.86) 70%,rgba(22,36,50,.95) 100%)}
.nr-cover.t-rev .nr-scrim{background:linear-gradient(180deg,rgba(38,44,58,.30) 0%,rgba(38,44,58,.58) 38%,rgba(38,44,58,.86) 70%,rgba(38,44,58,.95) 100%)}

/* ── Body ────────────────────────────────────────────────────────── */
.nr-body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px;flex:1 1 auto}
.nr-src{font-family:'Montserrat',sans-serif;font-size:var(--fs-12);font-weight:600;color:var(--navy);line-height:1.35}
.nr-t{
  font-family:'Montserrat',sans-serif;font-size:var(--fs-17);font-weight:500;line-height:1.32;
  letter-spacing:-.01em;color:var(--navy);text-wrap:balance;
}
.nr-card:hover .nr-t{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--gold)}
.nr-x{
  padding:2px 0 2px 15px;border-left:2px solid var(--gold);
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-style:italic;font-weight:400;font-size:var(--fs-18);line-height:1.46;color:var(--navy);
}
/* Our own dek is our prose, not a quotation: body face, no quote rule. */
.nr-dek{font-size:var(--fs-14);line-height:1.62;color:var(--muted-foreground)}
.nr-meta{margin-top:auto;padding-top:6px;font-size:var(--fs-12);color:var(--muted-foreground);font-variant-numeric:tabular-nums}

/* ── Lead: cover beside the body, spanning the grid ──────────────── */
.nr-cardlead{grid-column:1 / -1;flex-direction:row}
.nr-cardlead .nr-cover{flex:0 0 38%;aspect-ratio:auto;min-height:230px;padding:26px 28px}
.nr-cardlead .nr-cover-src{font-size:clamp(26px,3vw,36px)}
/* A year is 4 characters; give it the scale a wordmark cannot take. */
.nr-cover.t-own .nr-cover-src{font-size:clamp(30px,3.4vw,40px);letter-spacing:.01em}
.nr-cardlead .nr-cover.t-own .nr-cover-src{font-size:clamp(38px,4.4vw,54px)}
.nr-cardlead .nr-body{justify-content:center;gap:12px;padding:32px 34px}
.nr-cardlead .nr-t{font-size:clamp(22px,2.5vw,29px);font-weight:300;line-height:1.2;letter-spacing:-.012em}
.nr-cardlead .nr-dek{font-size:var(--fs-15);line-height:1.7;max-width:60ch}
@media(max-width:780px){
  .nr-cardlead{flex-direction:column}
  .nr-cardlead .nr-cover{flex:none;aspect-ratio:16/9;min-height:0}
  .nr-cardlead .nr-body{padding:22px 22px 22px}
}

/* ── Dark mirrors. The shell's are inherited; these are for the
       ink this block introduces. The cover is navy in BOTH themes, so
       its white ink needs no mirror. ──────────────────────────────── */
:root[data-theme="dark"] .nr-t{color:#fff}
:root[data-theme="dark"] .nr-src{color:var(--gold-light)}
:root[data-theme="dark"] .nr-x{color:rgba(255,255,255,.88)}
:root[data-theme="dark"] .nr-dek{color:rgba(255,255,255,.80)}
:root[data-theme="dark"] .nr-meta{color:rgba(255,255,255,.72)}


/* ─── Newsroom hero ────────────────────────────────────────────────
   Shell is .hero.hero-bg-video.hero-sub.hero-blog, inherited from the blog.
   Only the stat strip is new. It sits on the hero's slate tint, so the ink
   is white and gold-light, both of which clear 4.5 there. */
.nr-hero .hero-lede{max-width:560px}
.nr-hero-stats{
  display:flex;flex-wrap:wrap;gap:0 34px;margin:26px 0 0;padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.22);max-width:560px;
}
.nr-hero-stats div{display:flex;flex-direction:column;gap:2px}
.nr-hero-stats dt{
  font-family:'Montserrat',sans-serif;font-weight:300;font-size:var(--fs-30);line-height:1;
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.015em;margin:0;
}
.nr-hero-stats dd{
  margin:0;font-size:var(--fs-13);line-height:1.4;color:rgba(255,255,255,.88);
}
@media(max-width:560px){
  .nr-hero-stats{gap:0 22px;margin-top:20px}
  .nr-hero-stats dt{font-size:var(--fs-25)}
}

/* ═══════════════════════════════════════════════════════════════════════
   NEWSROOM POLISH, final
   Appended after the existing newsroom block in public/v17/css/styles.css.
   No new class, no new card family, no token changed, no copy touched.

   TWO IDEAS, and everything below is one of them.

   1. SET TYPE, NOT BLOCKS. The page is spaced uniformly, so nothing is
      grouped and nothing is separated. A wide row gutter against a tight
      column gutter binds three cards into a course; stretching the row
      levels every bottom edge; and once the rows are level the meta line
      can carry a rule that runs the full width of the card, so the three
      footers draw ONE continuous register straight across the page. That
      register is the page's new structure and it costs four declarations.

   2. THE PLATE IS STOPPED DOWN, AND OPENS WHEN YOU REACH FOR IT. 75
      licensed photographs are on this page and the shipping scrim (.30 at
      the top, .58 by 38%) buries every one of them, so 54 cards read as a
      wall of dark rectangles. Here the ramp spends its opacity where the
      letters are instead of spreading it over the picture, and the
      unifying job it was doing badly is done properly by two things that
      can be taken away: a flat navy veil and a desaturating filter. On
      hover or keyboard focus both lift and the card you are pointing at
      is the only frame on the page in full colour.

   SCOPE. .nr-* lives only in newsroom-list.tsx, which only /company/press
   renders, so those selectors are safe unqualified. .pr-feat, .pr-og-* and
   section.sec.deep.nr-band are NOT. /company/press-kit and
   /company/press/podcasts carry their own copies, so every rule that
   touches them is qualified with `.nr-hero ~`, and .nr-hero exists on this
   page and nowhere else. Same for .s-h2 / .s-sub, which are site-wide.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 1 · The lattice ──────────────────────────────────────────────────
   26/22 becomes 58/30. The row gap is nearly twice the column gap because
   a row break is a semantic break and a column break is not; equal gaps
   tell the eye those two divisions are the same thing, which is a lie.

   align-items:stretch (was: start) is the other half, and it is the single
   loudest cheap-looking detail on the page today. In the current
   screenshots the three cards of a row finish up to 73px apart. Stretched,
   every bottom edge in a row is flush and, because .nr-meta already carried
   margin-top:auto, every date lands on one baseline.

   border-radius back to 22px: .nr-card is the seventh selector in the
   shared glass recipe at styles.css:1177, which sets 22, and the newsroom
   block quietly overrode it to 16, the one card on the site with a
   different corner. This deletes a design-system inconsistency rather than
   adding one. ─────────────────────────────────────────────────────────── */
.nr-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:58px 30px;
  align-items:stretch;
}
.nr-card{height:100%;border-radius:22px}
@media(max-width:980px){.nr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 26px}}
@media(max-width:640px){.nr-grid{grid-template-columns:minmax(0,1fr);gap:40px}}

/* Focus is a first-class state, not an afterthought: .nr-card is already an
   <a>, so the reveal below works with no JS and no tabindex.

   The ring is --navy, NOT gold. A focus indicator is the one border on this
   page that owes WCAG 1.4.11's 3:1 against its own ground, and every LAWCLERK
   gold fails it there: --gold-deep #A89844 on the rendered section ground
   rgb(226,232,236) measures 2.35:1. --navy on the same ground is 7.27:1, and
   --gold-light on the dark ground is 7.81:1. Gold stays on decoration duty,
   where the guardrail puts it. */
.nr-card:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
}
.nr-card:focus:not(:focus-visible){outline:none}


/* ─── 2 · The cover ────────────────────────────────────────────────────
   The stack is declared explicitly so it cannot drift:
     z0  .nr-cover-img   the photograph
     z1  ::before        the stop, a flat navy veil that lifts on reveal
     z2  .nr-scrim       the reading ramp. This is the measured part and
                         it deliberately does not animate
     z3  ::after         the gold baseline
     z4  the type
   ::before was free (only ::after had a rule) and both are absolutely
   positioned, so neither becomes a flex item on this flex container. */
.nr-cover{
  aspect-ratio:2/1;
  padding:20px 24px;
  isolation:isolate;
  background:
    radial-gradient(120% 120% at 86% 4%, rgba(198,178,93,.26) 0%, transparent 62%),
    linear-gradient(158deg, #334456 0%, #3A4B5B 44%, #4A5D70 100%);
}

/* PROPORTION. 16:9 on a 375px column is 211px of cover carrying one line of
   type, so the cover outweighed the body. 2:1 is 187px, and more to the
   point 2:1 is a band where 16:9 is a box: it reads as a masthead
   photograph over a column of text, which is what it is. Deliberately NOT
   20:9: at 169px the outlet name climbs into the thin part of the ramp
   and collides with the headlines a few source photographs have burnt into
   their own top-right corner. */

/* THE RAMP. Old: .30 at the top, .58 by 38%, so the image was half gone
   before it had a chance to read. New: light at the top, then a knee into
   the text zone.

   THE KNEE IS MEASURED, NOT GUESSED. Hide the glyphs, composite the real
   page, and take the BRIGHTEST pixel inside each cover's own text rect,
   the true worst case for white type. Numbers are in the audit below; the
   short version is that the photographs come back AND the measured floor
   goes up, so this is not a trade.

   Written once with the tint as --sc so the curve cannot drift between the
   four kinds. The compound selectors are restated because the tint rules at
   styles.css:7277 set `background` at (0,3,0) and would otherwise outrank a
   bare .nr-scrim. */
.nr-scrim,
.nr-cover.t-own .nr-scrim,
.nr-cover.t-pod .nr-scrim,
.nr-cover.t-rev .nr-scrim{
  z-index:2;
  background:linear-gradient(180deg,
    rgba(var(--sc),.07)  0%,
    rgba(var(--sc),.21) 22%,
    rgba(var(--sc),.58) 38%,
    rgba(var(--sc),.86) 54%,
    rgba(var(--sc),.93) 70%,
    rgba(var(--sc),.96) 88%,
    rgba(var(--sc),.96) 100%);
}
.nr-scrim{--sc:24,33,44}
.nr-cover.t-own .nr-scrim{--sc:30,41,53}
.nr-cover.t-pod .nr-scrim{--sc:22,36,50}
.nr-cover.t-rev .nr-scrim{--sc:38,44,58}

/* THE STOP. Flat, because a flat overlay is the only thing here that can be
   animated (a gradient's stops cannot), and because compressing 75 frames
   toward one colour is exactly the luminance unification a multiplicative
   brightness() cannot give you. This is what the old blanket scrim was
   doing badly, done in a layer that can be taken away. */
.nr-cover::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#16212C;opacity:.10;
  transition:opacity .45s ease;
}

/* THE GRADE. Uncovering the photographs has a cost the old scrim was
   hiding: 75 stock frames with 75 unrelated palettes, one of them a
   saturated lemon-yellow block and another a cyan arrow, colours nowhere in
   this brand. The grade is what makes the run a set: the yellow settles
   into an ochre that sits beside --gold-tint, the cyan into slate.
   Deliberately below unity in every term: saturate(1.08) on 75 arbitrary
   frames is how you get the loudest pixel on the page. */
.nr-cover-img{
  z-index:0;
  filter:grayscale(.18) saturate(.63) contrast(1.05) brightness(.94);
  transform:scale(1.006);
  transition:transform .75s cubic-bezier(.22,1,.36,1), filter .55s ease;
}
/* The reveal. Four things move on a short stagger and retract instantly,
   because the delays are declared on the reveal rule only. Everything is
   transform / opacity / filter; nothing lays out. */
.nr-card:hover .nr-cover-img,
.nr-card:focus-visible .nr-cover-img{
  transform:scale(1.035);
  filter:grayscale(0) saturate(1) contrast(1.02) brightness(1.02);
  transition-delay:60ms;
}
.nr-card:hover .nr-cover::before,
.nr-card:focus-visible .nr-cover::before{opacity:0}

/* The gold baseline, full bleed. It was inset 20px at each end, which at
   card scale reads as a rule that failed to reach rather than as a margin.
   Run it wall to wall and it stops being a decoration and becomes the hinge
   the card folds on, and across three equal columns on a stretched row it is
   the line that makes a row a row. Gold as a rule: legal. */
.nr-cover::after{left:0;right:0;height:2px;opacity:1;z-index:3}

/* Cover type. It does not move on reveal; the light behind it changes
   instead, which is the whole idea. The shadow is insurance for the rare
   three-line outlet name, which starts higher up the ramp than the rest. */
.nr-cover-src{
  z-index:4;
  font-size:clamp(20px,1.7vw,24px);line-height:1.14;
  text-shadow:0 1px 1px rgba(10,16,23,.45), 0 2px 16px rgba(10,16,23,.55);
}
.nr-cover-kind{
  z-index:4;
  font-size:var(--fs-12);letter-spacing:.02em;margin-top:8px;
  text-shadow:0 1px 10px rgba(10,16,23,.60);
}


/* ─── 3 · Four type steps: 12 / 15 / 17 / 20 ───────────────────────────
   Was five (11.5, 14, 17, 18.5, 12), and 17 against 18.5 is not a step,
   it is a wobble. All four below are sizes this stylesheet already leans on
   (12px x67, 15px x28, 17px x13, 20px x9).
       12  label and meta
       15  our own dek
       17  headline
       20  the quoted excerpt
   The quote moves 18.5 -> 20 to open a real interval against the 17px
   headline: it is the one place on the card where two voices sit adjacent
   and have to be told apart. ────────────────────────────────────────── */
.nr-src{font-size:var(--fs-12);letter-spacing:.01em}
.nr-t{font-size:var(--fs-17);line-height:1.34}
.nr-dek{font-size:var(--fs-15);line-height:1.66}
.nr-x{font-size:var(--fs-20);line-height:1.44;padding:1px 0 1px 16px}

/* Internal rhythm: the gap between headline and excerpt is a different kind
   of gap from the one between excerpt and date, so it is a different size.
   The body carries no bottom padding; the meta supplies it, which is what
   lets the rule below run edge to edge. */
.nr-body{gap:11px;padding:22px 24px 0}

/* THE FOOTER REGISTER, and the reason 1 and 3 belong in the same pass.
   Stretching the cards flushed every bottom edge, which is what the page
   needed, but it moves the raggedness inside the card: a two-line excerpt
   leaves 120px of air above its date and a five-line one leaves none. A
   hairline turns that air into the end of a text column rather than a hole.
   And because this rule is pulled out to the card's own edges, the three
   of them in a row draw ONE continuous line across the page. That detail is
   only available once the rows are equal height.

   margin-top MUST stay auto. That is what pins the rule to the bottom of
   the card and therefore to the same height in all three; writing the
   shorthand with a length here silently unpins it and the rules land at
   three different heights, which is worse than not drawing them. */
.nr-meta{
  margin:auto -24px 0;padding:14px 24px 16px;
  border-top:1px solid rgba(58,75,91,.16);
  font-size:var(--fs-12);line-height:1.5;letter-spacing:.005em;
}

/* Excerpts clamp; headlines never do. A clamped headline hides words the
   reader came for, but the excerpts are already elided in the data, so the
   ceiling only stops one long quotation setting an entire row's height.
   Five lines, not four: at four, a 20px Cormorant quote in a 375px column
   cut mid-word on a real card ("...affordable for growin"). */
.nr-x,.nr-dek{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:5;
}


/* ─── 4 · The lead ─────────────────────────────────────────────────────
   Same recipe, more air. The photograph earns 42% and a 320px floor because
   at that size it is the only photograph on the page a reader actually
   looks at, and the body's padding steps up with it, so the lead is
   distinguished by its proportions rather than by any new ornament.
   Deliberately not a fifth type size: the dek stays at the grid card's 15px
   and lets the 32px headline and the 58ch measure do the work. ────────── */
.nr-cardlead .nr-cover{flex:0 0 42%;min-height:320px;padding:30px 32px;aspect-ratio:auto}
/* On a stacked card the seam between plate and sheet is the cover's bottom
   edge, and that is where the gold rule belongs. On the lead the cover is
   BESIDE the body, so the seam is its right edge, and at the bottom the
   card's own 22px corner radius was eating the rule at both ends anyway.
   Same rule, rotated to follow the geometry. */
.nr-cardlead .nr-cover::after{left:auto;right:0;top:0;bottom:0;width:2px;height:auto}
.nr-cardlead .nr-cover::before{opacity:.08}
.nr-cardlead .nr-body{padding:42px 46px;gap:14px}
.nr-cardlead .nr-t{font-size:clamp(23px,2.6vw,32px);line-height:1.18}
.nr-cardlead .nr-dek{font-size:var(--fs-15);line-height:1.78;max-width:58ch;-webkit-line-clamp:7}
.nr-cardlead .nr-src{margin-bottom:2px}
.nr-cardlead .nr-cover-src{font-size:clamp(26px,3vw,34px)}
.nr-cover.t-own .nr-cover-src{font-size:clamp(28px,3.2vw,36px);letter-spacing:.012em}
.nr-cardlead .nr-cover.t-own .nr-cover-src{font-size:clamp(40px,4.6vw,56px);letter-spacing:.015em}
/* The lead's body is vertically centred against a 460px photograph, so its
   text block already ends where it should. The grid cards need the footer
   rule to agree with their neighbours; the lead has no row to agree with,
   and the same rule there would be a line floating in the middle of a
   panel. It goes. */
.nr-cardlead .nr-meta{margin:6px 0 0;padding:20px 0 0;border-top:0}
@media(max-width:780px){
  .nr-cardlead .nr-cover{flex:none;aspect-ratio:2/1;min-height:0;padding:20px 22px}
  /* stacked again, so the seam goes back to the bottom */
  .nr-cardlead .nr-cover::after{left:0;right:0;top:auto;bottom:0;width:auto;height:2px}
  .nr-cardlead .nr-body{padding:26px 24px 0}
  .nr-cardlead .nr-meta{margin:6px 0 0;padding:20px 0 26px}
}

/* Paid placements are advertising, and the section already says so in
   words. Holding their plates one stop further down says it typographically
   for one declaration, and they still open on hover, so nothing is hidden. */
.nr-quiet .nr-cover-img{filter:grayscale(.55) saturate(.28) contrast(1.04) brightness(.88)}
.nr-quiet .nr-card:hover .nr-cover-img,
.nr-quiet .nr-card:focus-visible .nr-cover-img{filter:grayscale(.05) saturate(.9) contrast(1.02) brightness(1)}


/* ─── 5 · The folio line ───────────────────────────────────────────────
   "13 announcements since 2018" was an orphan floating above a grid. It
   already had a hairline running out to the measure: the idea was right,
   the hairline was --border-soft on cream and invisible. Make it visible,
   run it the full measure, and give it the space of a real section rule: a
   generous gap above (it is a caption to what follows, not a footnote to
   what precedes) and a measured one below. ──────────────────────────── */
.nr-count{
  max-width:none;gap:18px;margin:0 0 30px;
  font-size:var(--fs-12);letter-spacing:.02em;
}
.nr-count::after{background:var(--border)}
.nr-cardlead + .nr-count{margin-top:56px}


/* ─── 6 · The hero stat strip ──────────────────────────────────────────
   Three numbers in a flex row with a 34px gap and no column structure: the
   widths were set by the label lengths, so 13/42/26 read as a ragged
   cluster. Equal columns with a hairline between them make it a measured
   strip, and it borrows the band's exact vocabulary (hairline plus 28px
   gold tick, .pr-feat-item) rather than inventing a hero-only idea.

   width:100% is load-bearing: .hero-copy is a flex column, so the <dl> was
   shrinking to its content (279px) and max-width alone did nothing.
   Verified by reading back the computed grid-template-columns. */
.nr-hero-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;width:100%;max-width:516px;align-self:stretch;
  margin:34px 0 0;padding:26px 0 0;
  position:relative;border-top:1px solid rgba(255,255,255,.26);
}
.nr-hero-stats::before{
  content:'';position:absolute;top:-1px;left:0;width:28px;height:2px;
  border-radius:1px;background:var(--gold);
}
.nr-hero-stats div{
  padding-left:26px;border-left:1px solid rgba(255,255,255,.16);gap:6px;
}
.nr-hero-stats div:first-child{padding-left:0;border-left:0}
.nr-hero-stats dt{font-size:36px;letter-spacing:-.02em}
.nr-hero-stats dd{font-size:var(--fs-12);letter-spacing:.02em;color:rgba(255,255,255,.86)}
.nr-hero .hero-lede{max-width:540px}
@media(max-width:560px){
  .nr-hero-stats{max-width:none;margin-top:26px;padding-top:20px}
  .nr-hero-stats div{padding-left:16px}
  .nr-hero-stats dt{font-size:27px}
}


/* ─── 7 · Section rhythm ───────────────────────────────────────────────
   Every section on this page has the same 88px top and bottom and the same
   56px under the sub-head, so the page arrives at each new idea at exactly
   the same speed. Let the two long card runs open wider than the short
   sections, and close the gap between a sub-head and the run it introduces
   so the heading sits WITH its grid rather than floating equidistant
   between two things. :has() is already used eight times in this sheet, and
   .nr-grid exists on this page only. ───────────────────────────────── */
section.sec:has(.nr-grid){padding-top:104px;padding-bottom:104px}
section.sec:has(.nr-grid) .s-h2{margin-bottom:18px}
section.sec:has(.nr-grid) .s-sub{margin-bottom:40px}


/* ─── 8 · The navy band ────────────────────────────────────────────────
   SCOPE. .pr-feat is not newsroom-only. /company/press-kit and
   /company/press/podcasts each carry their own `section.sec.deep.nr-band`
   with three .pr-feat-item children, so neither `.pr-feat` nor
   `.nr-band .pr-feat` may be restyled from here. `.nr-hero ~` is safe.

   The band is the page's pause and should feel like one: tighter than the
   card runs above and below, so entering it is a compression and leaving it
   a release. ───────────────────────────────────────────────────────── */
.nr-hero ~ section.sec.deep.nr-band{padding-top:84px;padding-bottom:74px}
.nr-hero ~ section.sec.deep.nr-band .s-sub{margin-bottom:0}

/* Three equal columns held one long pull-quote and two one-line facts, so
   two thirds of the band was a vertical hairline dropping into nothing.
   Give the quotation the width it is worth: at 1.4fr its measure widens, it
   sets in fewer lines, and the three columns come out close enough in
   height that the rules stop advertising the imbalance.

   minmax(0,…) on every track, not a bare 1.4fr: a bare fr floors at
   min-content, and an earlier version of this rule pushed the band 108px
   past the viewport at 390px wide. */
.nr-hero ~ .nr-band .pr-feat{
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  margin-top:46px;
}
.nr-hero ~ .nr-band .pr-feat-item{padding:26px 40px 0}
.nr-hero ~ .nr-band .pr-feat-item:first-child{padding-left:0}
.nr-hero ~ .nr-band .pr-feat-item:not(:first-child)::before{left:40px}
.nr-hero ~ .nr-band .pr-feat-quote.pr-feat-said{font-size:clamp(22px,2.1vw,26px);line-height:1.36}

/* The quotation mark was 56px on its own line with a 16px bottom margin, so
   it pushed the quote down and the quote no longer began on the same
   baseline as "Rated 4.6 out of 5" beside it. Floated and hung 22px into
   the left margin it does what a drop quote is for, and about 70px of dead
   navy goes with it. It is a large decorative quotation mark on the navy
   band, which the guardrail names explicitly, and the existing rule already
   records that its legibility is not load-bearing. */
.nr-hero ~ .nr-band .pr-feat-said::before{
  float:left;font-size:64px;line-height:.46;margin:4px 10px 0 -22px;
}
/* The three-column band collapses at 820 in the block at styles.css:7115.
   The re-proportioned columns above are later in source at equal-or-higher
   specificity, so they would out-rank that media rule at every width and
   leave three 90px columns on a phone. The collapse is restated inside this
   pass's own query rather than left to a rule this pass just beat. */
@media(max-width:820px){
  .nr-hero ~ .nr-band .pr-feat{grid-template-columns:minmax(0,1fr);border-top:0;margin-top:24px}
  .nr-hero ~ .nr-band .pr-feat-item{
    border-left:0;border-top:1px solid rgba(255,255,255,.16);
    padding:22px 0 0;margin-top:24px;
  }
  .nr-hero ~ .nr-band .pr-feat-item:first-child{margin-top:0;border-top:0}
  .nr-hero ~ .nr-band .pr-feat-item:not(:first-child)::before{left:0}
  .nr-hero ~ .nr-band .pr-feat-said::before{margin-left:-14px}
}
@media(max-width:560px){
  .nr-hero ~ .nr-band .pr-feat-said::before{float:none;margin:0 0 6px;font-size:46px;line-height:.6}
}

/* THE MASTHEAD. Two faults, one cause, and it is a 72px number rather than
   a taste argument: .pr-masthead is also a .trust, and .trust at
   styles.css:431 carries `padding:22px var(--gutter)`, 72px at desktop. So
   the eight outlet names began 72px right of the eyebrow, the heading and
   the hairline directly above them, a step nothing on the page explains,
   and the row was short enough that "The Florida Bar" dropped to a line of
   its own.

   The separator was drawn by `.trust-logo + .trust-logo::before`, i.e. on
   the item that FOLLOWS, so that orphan line OPENED with a gold diamond
   pointing at nothing. Moving it to a trailing ::after inside the nowrap
   span means a line can only ever END on a diamond, which is the newspaper
   convention for a run that continues, and unlike shrinking the type
   until eight names happen to fit, it stays correct at any width and any
   number of outlets. */
.nr-hero ~ .nr-band .pr-masthead{margin-top:48px;padding:28px 0 0}
.nr-hero ~ .nr-band .pr-masthead .trust-in{max-width:none;gap:0}
.nr-hero ~ .nr-band .pr-masthead .trust-logos{justify-content:flex-start;width:100%;row-gap:16px}
.nr-hero ~ .nr-band .pr-masthead .trust-logo{font-size:var(--fs-20);letter-spacing:.012em}
.nr-hero ~ .nr-band .pr-masthead .trust-logo + .trust-logo::before{content:none}
.nr-hero ~ .nr-band .pr-masthead .trust-logo:not(:last-child)::after{
  content:'';width:5px;height:5px;flex:none;border-radius:1px;
  background:var(--gold);transform:rotate(45deg);margin:0 17px;
}
@media(max-width:640px){
  .nr-hero ~ .nr-band .pr-masthead .trust-logo{font-size:var(--fs-18)}
  .nr-hero ~ .nr-band .pr-masthead .trust-logo:not(:last-child)::after{margin:0 12px}
}


/* ─── 9 · Founder bylines ──────────────────────────────────────────────
   Same scale discipline, nothing more. A 90-character byline title ran the
   full 1180px measure; 64ch stops it. Hero-scoped because PressOutlets also
   renders on /company/press/podcasts. ──────────────────────────────── */
.nr-hero ~ section.sec .pr-item-title{max-width:64ch}


/* ═══ 10 · Dark mirrors ════════════════════════════════════════════════
   Guardrail 3. :root[data-theme="dark"] does NOT reassign --navy or
   --muted-foreground, it overrides per selector, so every ink rule and
   every hairline above must be restated here or it silently goes
   dark-on-dark. Restated in full for each selector this pass touches,
   including the ones whose colour it did not change, so the set is
   auditable in one place rather than split across two blocks.

   The cover needs none, deliberately: it is a navy scrim over a photograph
   in BOTH themes, not a themed surface, so its white ink and its gold rule
   are correct in both. Same for the hero strip, which sits on a photographic
   hero the theme does not touch. ─────────────────────────────────────── */
:root[data-theme="dark"] .nr-t{color:#fff}
:root[data-theme="dark"] .nr-src{color:var(--gold-light)}
:root[data-theme="dark"] .nr-x{color:rgba(255,255,255,.88)}
:root[data-theme="dark"] .nr-dek{color:rgba(255,255,255,.80)}
:root[data-theme="dark"] .nr-meta{color:rgba(255,255,255,.72);border-top-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .nr-cardlead .nr-meta{border-top-color:transparent}
:root[data-theme="dark"] .nr-count{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] .nr-count::after{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] .nr-card:focus-visible{outline-color:var(--gold-light)}
:root[data-theme="dark"] .nr-hero ~ .nr-band .pr-masthead .trust-logo:not(:last-child)::after{background:var(--gold-light)}
/* In dark mode the glass body darkens until it is nearly the value of the
   scrim and the card loses the seam between photograph and text, visible
   in the current dark render, where the cover bleeds into the body. The
   gold rule is the only thing holding that joint, so it carries a hairline
   of light under it. Gold as a rule, on a dark ground: legal. */
:root[data-theme="dark"] .nr-cover::after{box-shadow:0 1px 0 rgba(255,255,255,.10)}


/* ═══ 11 · Touch ═══════════════════════════════════════════════════════
   A reveal only hover can fire is a reveal a phone never gets, and the
   whole grid would sit stopped down forever on the device most of this
   page's traffic arrives on. Where the pointer cannot hover the plate rests
   half open: the photography is legible, the choreography simply has
   nothing left to choreograph. ────────────────────────────────────────── */
@media(hover:none){
  .nr-cover::before,.nr-cardlead .nr-cover::before{opacity:.06}
  .nr-cover-img{filter:grayscale(.10) saturate(.82) contrast(1.03) brightness(.97)}
  .nr-quiet .nr-cover-img{filter:grayscale(.45) saturate(.40) contrast(1.03) brightness(.92)}
}


/* ═══ 12 · Reduced motion ══════════════════════════════════════════════
   The reveal is choreography, not information. Nothing translates or
   scales; the card still answers hover and focus, in colour only. */
@media(prefers-reduced-motion:reduce){
  .nr-card,.nr-cover-img,.nr-cover::before{transition:none}
  .nr-card:hover,.nr-card:focus-visible{transform:none}
  .nr-cover-img,
  .nr-card:hover .nr-cover-img,
  .nr-card:focus-visible .nr-cover-img{transform:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   NEWSROOM, second pass (LAW-1158, 2026-10-14)
   The page was 16,000px of one idea: 54 cards of the same shape. This pass
   keeps every item and every word of press, and gives each part of the page
   its own form so the eye has somewhere to change gear:

     hero          three real clippings, linked, pinned to the empty right half
     announcements the lead card, then a dated log grouped by year
     navy band     the pull quote becomes five, in turn
     outside press type chips, the newest nine, then "Show all"
     bylines       two columns of outlets instead of one long rule-ruled list
     paid          rows, so advertising looks less like press than press does
     close         the site's cta-final, with a route to a human

   Gold stays graphic: ticks, rules, progress bars, the active chip's ring is
   navy. Every ink below has a dark mirror in "Dark" at the end.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero clippings ───────────────────────────────────────────────────
   Paper is --gold-tint #F2EED9, used as a ground, never as ink. Inks are
   fixed literals, not --navy, so no theme can repaint them: #2A3845 on the
   paper is 10.9:1, #5D5D5D is 5.7:1. Rotation lives on the link through
   --r so hover and focus can straighten it; the bob lives on the li. */
.nr-hero .hero-in{align-items:center}
.nr-clips{
  position:relative;list-style:none;margin:0;padding:0;
  width:min(100%,484px);height:298px;justify-self:end;
}
.nr-clip-li{position:absolute;width:296px;animation:lc-bob 9s ease-in-out infinite}
.nr-clip-li.c3{left:0;top:12px;z-index:1;--r:-4.5deg;animation-delay:-3s}
.nr-clip-li.c2{left:184px;top:0;z-index:2;--r:3.5deg;animation-delay:-6s}
.nr-clip-li.c1{left:86px;top:146px;z-index:3;--r:-1.5deg}
.nr-clip-li:hover,.nr-clip-li:focus-within{z-index:5}
.nr-clip{
  display:block;padding:16px 18px 14px;border-radius:6px;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 46%),#F2EED9;
  box-shadow:0 22px 44px -20px rgba(8,14,22,.62),0 2px 6px rgba(8,14,22,.20);
  transform:rotate(var(--r,0deg));
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.nr-clip:hover,.nr-clip:focus-visible{
  transform:translateY(-6px) rotate(0deg);
  box-shadow:0 30px 54px -22px rgba(8,14,22,.70),0 3px 8px rgba(8,14,22,.22);
}
.nr-clip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nr-clip-outlet{
  position:relative;display:block;padding-bottom:8px;margin-bottom:10px;
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:var(--fs-22);font-weight:600;line-height:1.1;color:#2A3845;
  border-bottom:1px solid rgba(42,56,69,.16);
}
.nr-clip-outlet::after{
  content:'';position:absolute;left:0;bottom:-1px;width:28px;height:2px;
  border-radius:1px;background:var(--gold-deep);
}
.nr-clip-t{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  font-family:'Montserrat',sans-serif;font-size:var(--fs-14);font-weight:500;line-height:1.4;color:#2A3845;
}
.nr-clip-d{display:block;margin-top:8px;font-size:var(--fs-12);color:#5D5D5D}
@media(max-width:980px){.nr-clips{display:none}}

/* ── Announcements: the year log ─────────────────────────────────────── */
.nr-log{display:grid;gap:40px;margin-top:64px}
.nr-log-h{
  position:relative;display:flex;align-items:baseline;gap:18px;
  margin:0 0 4px;padding-bottom:12px;border-bottom:1px solid var(--border);
}
.nr-log-h::after{
  content:'';position:absolute;left:0;bottom:-1px;width:28px;height:2px;
  border-radius:1px;background:var(--gold);
}
.nr-log-y{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:40px;font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--navy);
}
.nr-log-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;
}
.nr-log-list li{border-bottom:1px solid var(--border-soft)}
.nr-log-row{
  display:grid;grid-template-columns:112px minmax(0,1fr) 18px;gap:18px;align-items:center;
  margin:0 -12px;padding:14px 12px;border-radius:14px;text-decoration:none;color:inherit;
  transition:background .2s ease;
}
.nr-log-row:hover{background:rgba(255,255,255,.55)}
.nr-log-row:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.nr-log-thumb{
  display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;
  background:linear-gradient(158deg,#334456 0%,#4A5D70 100%);
}
.nr-log-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) saturate(.6) contrast(1.03);
  transition:filter .3s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.nr-log-row:hover .nr-log-thumb img,.nr-log-row:focus-visible .nr-log-thumb img{filter:none;transform:scale(1.05)}
.nr-log-d{display:block;margin-bottom:4px;font-size:var(--fs-12);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.nr-log-t{
  display:block;font-family:'Montserrat',sans-serif;font-size:var(--fs-15);font-weight:400;
  line-height:1.4;color:var(--navy);text-wrap:pretty;
}
.nr-log-go{
  font-size:var(--fs-16);color:var(--navy);opacity:0;transform:translate(-4px,4px);
  transition:opacity .2s ease,transform .25s ease;
}
.nr-log-row:hover .nr-log-go,.nr-log-row:focus-visible .nr-log-go{opacity:1;transform:none}
/* One column wherever the card grid has two or fewer (980px, the hero's
   breakpoint too): at 768 two columns squeezed titles to about 160px. */
@media(max-width:980px){.nr-log-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
  .nr-log-row{grid-template-columns:88px minmax(0,1fr) 18px;gap:14px}
  .nr-log-y{font-size:34px}
}

/* ── Navy band: the quote reel ───────────────────────────────────────
   Two columns now: the reel, and the two facts stacked beside it. Every
   slide sits in the same grid cell, so the stage is as tall as the longest
   quote and nothing below it moves when a slide changes. */
.nr-hero ~ .nr-band .pr-feat.nr-feat{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.nr-feat-side{border-left:1px solid rgba(255,255,255,.14)}
.nr-hero ~ .nr-band .nr-feat .nr-feat-side > .pr-feat-item{border-left:0;padding:26px 0 0 40px}
.nr-hero ~ .nr-band .nr-feat .nr-feat-side > .pr-feat-item::before{left:40px}
.nr-hero ~ .nr-band .nr-feat .nr-feat-side > .pr-feat-item + .pr-feat-item{
  margin-top:26px;border-top:1px solid rgba(255,255,255,.14);
}
.nr-hero ~ .nr-band .nr-feat .nr-feat-side > .pr-feat-item + .pr-feat-item::before{top:-1px}
.nr-hero ~ .nr-band .nr-feat .nr-reel{padding-right:48px}
.nr-reel-stage{display:grid}
.nr-reel-slide{
  grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
}
.nr-reel-slide.on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s ease .12s,transform .5s ease .12s,visibility 0s;
}
.nr-reel-slide .pr-feat-meta a{color:#fff;text-underline-offset:3px;text-decoration-color:var(--gold)}
.nr-reel-ctl{display:flex;align-items:center;gap:10px;margin-top:24px}
.nr-reel-btn{
  display:grid;place-items:center;width:36px;height:36px;flex:none;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid rgba(255,255,255,.30);background:transparent;color:#fff;
  font-size:var(--fs-16);transition:border-color .2s,background .2s;
}
.nr-reel-btn:hover{border-color:var(--gold-light);background:rgba(255,255,255,.06)}
.nr-reel-btn:focus-visible,.nr-reel-dot:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.nr-reel-dots{display:flex;gap:2px;list-style:none;margin:0 4px;padding:0}
.nr-reel-dot{
  position:relative;display:block;width:30px;height:28px;padding:0;border:0;
  background:none;cursor:pointer;border-radius:4px;
}
.nr-reel-dot::before,.nr-reel-fill{
  content:'';position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;border-radius:1px;
}
.nr-reel-dot::before{background:rgba(255,255,255,.28)}
.nr-reel-fill{background:var(--gold-light);transform-origin:left center}
.nr-reel[data-auto] .nr-reel-fill{animation:nrReelFill 7s linear forwards}
.nr-reel:hover .nr-reel-fill,.nr-reel:focus-within .nr-reel-fill,.nr-reel[data-paused] .nr-reel-fill{animation-play-state:paused}
@keyframes nrReelFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nr-reel-n{margin-left:6px;font-size:var(--fs-12);color:rgba(255,255,255,.80);font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .nr-hero ~ .nr-band .pr-feat.nr-feat{grid-template-columns:minmax(0,1fr)}
  .nr-hero ~ .nr-band .nr-feat .nr-reel{padding-right:0}
  .nr-feat-side{border-left:0}
  .nr-hero ~ .nr-band .nr-feat .nr-feat-side > .pr-feat-item{
    margin-top:24px;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.16);
  }
  .nr-hero ~ .nr-band .nr-feat .nr-feat-side > .pr-feat-item::before{left:0}
}

/* ── Outside press: chips and "Show all" ─────────────────────────────
   .nr-cell is display:contents so each card is still the grid item and
   the lattice above is untouched. Collapsed cards carry data-off (see
   newsroom-filter.tsx for why it is not the hidden attribute). */
.nr-cell{display:contents}
.nr-cell[data-off]{display:none}
/* margin-bottom only: a margin shorthand would reset .blog-chips' mobile
   margin-right, which lets the scrolling row bleed to the screen edge. */
.nr-chips{margin-bottom:30px}

/* ── Founder bylines: two columns of outlets ─────────────────────────── */
.nr-bylines{margin-top:38px;columns:2;column-gap:64px}
.nr-bylines .pr-og{break-inside:avoid;margin-bottom:34px}
.nr-bylines .pr-og:last-child{border-bottom:1px solid var(--border);padding-bottom:34px;margin-bottom:34px}
@media(max-width:900px){.nr-bylines{columns:1}}

/* ── Dark ─────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .nr-clip{filter:brightness(.93)}
:root[data-theme="dark"] .nr-log-h{border-bottom-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .nr-log-y,
:root[data-theme="dark"] .nr-log-t,
:root[data-theme="dark"] .nr-log-go{color:#fff}
:root[data-theme="dark"] .nr-log-d{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .nr-log-list li{border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .nr-log-row:hover{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .nr-log-row:focus-visible{outline-color:var(--gold-light)}
:root[data-theme="dark"] .nr-bylines .pr-og:last-child{border-bottom-color:rgba(255,255,255,.12)}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .nr-clip-li{animation:none}
  .nr-clip,.nr-log-thumb img,.nr-log-go,.nr-reel-slide,.nr-reel-slide.on{transition:none}
  .nr-clip:hover,.nr-clip:focus-visible{transform:rotate(0deg)}
  .nr-log-row:hover .nr-log-thumb img{transform:none}
  .nr-reel-slide{transform:none}
  .nr-reel-fill{animation:none}
}


/* ═══ NEWSROOM, small motion pass (LAW-1158, 2026-10-15) ═════════════════
   Three touches, none of which changes layout or copy. All three stand
   still under reduced motion. */

/* 1 · The hero clippings land one at a time, back to front, like being
   pinned up, then settle into their resting tilt. fill-mode is backwards,
   not both: a finished animation that holds its last frame would override
   the hover transform and the card could never straighten. */
@keyframes nrClipIn{
  0%  {opacity:0;transform:translateY(-34px) rotate(calc(var(--r,0deg) - 7deg)) scale(1.05)}
  62% {opacity:1;transform:translateY(4px) rotate(calc(var(--r,0deg) + .8deg)) scale(.995)}
  100%{opacity:1;transform:rotate(var(--r,0deg))}
}
.nr-clip{animation:nrClipIn .7s cubic-bezier(.2,.8,.2,1) backwards}
.nr-clip-li.c3 .nr-clip{animation-delay:.15s}
.nr-clip-li.c2 .nr-clip{animation-delay:.4s}
.nr-clip-li.c1 .nr-clip{animation-delay:.65s}

/* 2 · The outlet row drifts. The list is rendered twice and the track
   moves by half its width, so the loop has no seam; the site's own
   trust-scroll keyframes do the moving. Every name carries its trailing
   diamond, the last included, because in a loop nothing is last. */
.nr-hero ~ .nr-band .nr-marquee .trust-in{display:block;overflow:hidden}
.nr-hero ~ .nr-band .nr-marquee .nr-marquee-track{
  width:max-content;flex-wrap:nowrap;justify-content:flex-start;
  animation:trust-scroll 46s linear infinite;
}
.nr-hero ~ .nr-band .pr-masthead.nr-marquee .trust-logo::after{
  content:'';width:5px;height:5px;flex:none;border-radius:1px;
  background:var(--gold);transform:rotate(45deg);margin:0 17px;
}
@media(max-width:640px){.nr-hero ~ .nr-band .pr-masthead.nr-marquee .trust-logo::after{margin:0 12px}}
.nr-hero ~ .nr-band .nr-marquee:hover .nr-marquee-track{animation-play-state:paused}
/* Faded at both ends. On .trust-in, not the masthead, so the hairline
   above the row still runs the full measure. */
.nr-hero ~ .nr-band .nr-marquee .trust-in{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
:root[data-theme="dark"] .nr-hero ~ .nr-band .pr-masthead.nr-marquee .trust-logo::after{background:var(--gold-light)}

/* 3 · Behind each quote, its outlet's name, very large and very faint.
   It sits inside the slide, so it fades in and out with the quote. The
   inset box clips it to the slide; the hanging quote mark is outside
   that box and is unaffected. White at .06 lifts the band from #2A3845 to
   about #37444F, where the quote stays above 9:1 (measured). */
.nr-reel-slide{position:relative}
.nr-reel-mark{
  position:absolute;inset:-10px 0 0;overflow:hidden;pointer-events:none;z-index:0;
  display:flex;align-items:flex-end;justify-content:flex-end;
}
.nr-reel-mark span{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(64px,7.4vw,112px);line-height:.8;letter-spacing:-.01em;white-space:nowrap;
  color:rgba(255,255,255,.06);transform:translateY(.08em);
}
.nr-reel-slide > :not(.nr-reel-mark){position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .nr-clip{animation:none}
  .nr-hero ~ .nr-band .nr-marquee .nr-marquee-track{animation:none;flex-wrap:wrap;width:auto}
  .nr-hero ~ .nr-band .nr-marquee .trust-logo[aria-hidden="true"]{display:none}
  .nr-hero ~ .nr-band .nr-marquee .trust-in{-webkit-mask-image:none;mask-image:none}
}


/* ═══ NEWSROOM, audit fixes (LAW-1158, 2026-10-15) ══════════════════════
   From a seven-lens audit of the three press pages, each finding
   re-checked in the running page before it was fixed. */


/* Links inside a section subhead (press kit, podcasts page): navy ink,
   gold as the underline only. */
.nr-hero ~ section .s-sub a{
  color:var(--navy);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:var(--gold);
}
.nr-hero ~ section .s-sub a:hover{text-decoration-color:var(--gold-deep)}
:root[data-theme="dark"] .nr-hero ~ section .s-sub a{color:#fff}
:root[data-theme="dark"] .nr-hero ~ section .s-sub a:hover{text-decoration-color:var(--gold-light)}

/* Hero clippings. The ABA card's title runs under the Tribune card and
   read as a broken headline; end it on an ellipsis before the overlap.
   Between 981 and 1180px the cluster outgrew the column and the screen
   edge cut the Tribune card, so it scales down from its right edge. */
.nr-clip-li.c3 .nr-clip-t{max-width:150px;-webkit-line-clamp:2}
/* Its date ran under the LawSites card ("March 1, 20"); the back card
   shows outlet and headline only. */
.nr-clip-li.c3 .nr-clip-d{display:none}
@media(max-width:1180px){.nr-clips{width:484px;transform:scale(.8);transform-origin:right center}}
/* Focus ring: navy reads on the paper of a neighbouring clipping, the
   white outline on the photo. */
.nr-clip:focus-visible{box-shadow:0 0 0 5px #2A3845,0 30px 54px -22px rgba(8,14,22,.70)}

/* Press kit: the logo download and email were indistinguishable from the
   paragraph, and the phone number was not a link. */
.pr-boiler a{
  color:var(--navy);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:var(--gold);
}
.pr-boiler a:hover{text-decoration-color:var(--gold-deep)}
:root[data-theme="dark"] .pr-boiler a{color:#fff}
:root[data-theme="dark"] .pr-boiler a:hover{text-decoration-color:var(--gold-light)}
.pr-feat-quote a{
  color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:var(--gold);
}
/* 11.5px was off the --fs-* scale. */
.pr-outlet{font-size:var(--fs-12)}

/* Byline links: the translucent gold ring measured 1.26:1. */
.pr-item-title:focus-visible{outline:2px solid var(--navy);outline-offset:2px;box-shadow:none;border-radius:2px}
:root[data-theme="dark"] .pr-item-title:focus-visible{outline-color:var(--gold-light)}

/* Reel dots: the idle track was 2.38:1, under the 3:1 a control needs.
   The current dot also gets a thicker bar, a shape cue as well as colour. */
.nr-reel-dot::before{background:rgba(255,255,255,.40)}
.nr-reel-dot[aria-current] .nr-reel-fill{height:4px;margin-top:-2px}
.nr-reel-n{white-space:nowrap}
@media(max-width:360px){.nr-reel-n{display:none}}

/* Dark mode: two log thumbnails were the brightest things on the page. */
:root[data-theme="dark"] .nr-log-thumb img{filter:grayscale(.35) saturate(.6) contrast(1.03) brightness(.72)}
:root[data-theme="dark"] .nr-log-row:hover .nr-log-thumb img,
:root[data-theme="dark"] .nr-log-row:focus-visible .nr-log-thumb img{filter:none}

/* Touch screens never see the hover arrow, so they do not keep its column. */
@media(hover:none){
  .nr-log-row{grid-template-columns:112px minmax(0,1fr)}
  .nr-log-go{display:none}
}
@media(hover:none) and (max-width:760px){.nr-log-row{grid-template-columns:88px minmax(0,1fr)}}

/* Tablet: the stacked lead photo filled most of the first screen, and the
   blog-hero clamp set the h1 smaller (28px) than on a phone (33px). */
@media(max-width:780px){.nr-cardlead .nr-cover{max-height:240px}}
.nr-hero h1{font-size:clamp(33px,3.2vw,40px)}


/* The closing line left "to need" alone on its second line. */
#media .cta-in p{text-wrap:balance}

/* Reduced motion shows one copy of the outlet row, which then ended on a
   diamond pointing at nothing. */
@media(prefers-reduced-motion:reduce){
  .nr-hero ~ .nr-band .pr-masthead.nr-marquee .trust-logo:not([aria-hidden]):has(+ .trust-logo[aria-hidden])::after{content:none}
  /* .nr-reel[data-auto] .nr-reel-fill (0,3,0) outranked the plain reset, so
     the fill still ran for 0.01ms and could fire animationend. */
  .nr-reel[data-auto] .nr-reel-fill{animation:none}
}


/* ═══ NEWSROOM, David's four calls (LAW-1158, 2026-10-15) ═══════════════ */

/* 1 · Serif only for quotations (and the hero clippings, which are paper).
   Outlet names, year heads and the outlet row go to the site's Montserrat. */
.nr-hero ~ section .nr-log-y{font-family:'Montserrat',sans-serif;font-weight:300;letter-spacing:-.015em}
.nr-hero ~ section .pr-og-name,
section .pr-og .pr-og-name{font-family:'Montserrat',sans-serif;font-size:var(--fs-19);font-weight:500;letter-spacing:0}
.nr-card .nr-cover .nr-cover-src{font-family:'Montserrat',sans-serif;font-style:normal;font-weight:600;font-size:var(--fs-19);letter-spacing:0}
.nr-card .nr-cover.t-own .nr-cover-src,
.nr-cardlead .nr-cover .nr-cover-src{font-weight:300;letter-spacing:-.01em}
.nr-hero ~ .nr-band .pr-masthead .trust-logo{font-family:'Montserrat',sans-serif;font-size:var(--fs-14);font-weight:600;letter-spacing:.02em}

/* 2 · The band takes the site's slate dark anchor (the same gradient as
   every other light-mode sec.deep) instead of the flat navy slab. Small
   ink on it goes to white: gold-light and translucent white fall under
   4.5:1 on the gradient's light end. Gold stays on the ticks and marks. */
section.sec.deep.nr-band,
[data-theme="light"] section.sec.deep.nr-band{
  background:linear-gradient(135deg, #445A6C 0%, #536A7E 50%, #647C92 100%);
}
:root[data-theme="dark"] section.sec.deep.nr-band{
  background:linear-gradient(135deg, #1B2630 0%, #243341 55%, #2E3F4E 100%);
}
[data-theme="light"] .nr-hero ~ .nr-band .pr-feat-outlet,
[data-theme="light"] .nr-hero ~ .nr-band .pr-feat-meta,
[data-theme="light"] .nr-hero ~ .nr-band .nr-reel-n{color:#fff}
[data-theme="light"] .nr-hero ~ .nr-band .pr-masthead .trust-logo{color:#fff}

/* 3 · Motion. The clippings still land, but no longer bob forever; the
   outlet row gets a pause button (WCAG 2.2.2). */
.nr-clip-li{animation:none}
.nr-hero ~ .nr-band .nr-marquee{display:flex;align-items:center;gap:16px}
.nr-hero ~ .nr-band .nr-marquee .trust-in{flex:1;min-width:0}
.nr-marquee-btn{width:32px;height:32px;font-size:var(--fs-14)}
.nr-hero ~ .nr-band .nr-marquee[data-paused] .nr-marquee-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.nr-marquee-btn{display:none}}


/* ═══ PODCASTS PAGE (/company/press/podcasts, LAW-1158, 2026-10-16) ═════
   A feed, not a bibliography. Reuses the newsroom's vocabulary: the year
   heads (.nr-log-h), the covers.json thumbnails with the same desaturated
   plate that opens on hover, Cormorant only for the quoted description,
   gold only as a graphic (the play disc, rules, underlines). */
.pc-feed{display:grid;gap:44px;margin-top:40px}
.pc-list{list-style:none;margin:0;padding:0}
.pc-list li{border-bottom:1px solid var(--border-soft)}
.pc-row{
  display:grid;grid-template-columns:168px minmax(0,1fr) 150px;gap:26px;align-items:center;
  margin:0 -16px;padding:20px 16px;border-radius:16px;text-decoration:none;color:inherit;
  transition:background .2s ease;
}
.pc-row:hover{background:rgba(255,255,255,.55)}
.pc-row:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pc-thumb{
  position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:linear-gradient(158deg,#334456 0%,#4A5D70 100%);
}
.pc-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) saturate(.6) contrast(1.03) brightness(.88);
  transition:filter .3s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.pc-row:hover .pc-thumb img,.pc-row:focus-visible .pc-thumb img{filter:none;transform:scale(1.05)}
/* The play disc: gold as a filled shape, navy glyph inside it. */
.pc-play{
  position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--gold);color:var(--navy-deep);font-size:var(--fs-18);
  box-shadow:0 6px 18px rgba(10,16,23,.35);
  transition:transform .25s ease;
}
.pc-play i{margin-left:2px}
.pc-row:hover .pc-play,.pc-row:focus-visible .pc-play{transform:scale(1.1)}
.pc-body{display:grid;gap:5px;min-width:0}
.pc-show{font-family:'Montserrat',sans-serif;font-size:var(--fs-12);font-weight:600;letter-spacing:.01em;color:var(--muted-foreground)}
.pc-t{font-family:'Montserrat',sans-serif;font-size:var(--fs-17);font-weight:400;line-height:1.38;color:var(--navy);text-wrap:pretty}
.pc-x{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-style:italic;
  font-size:var(--fs-17);line-height:1.5;color:var(--post-ink,#3F4C58);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  max-width:68ch;margin-top:2px;
}
.pc-side{display:grid;gap:10px;justify-items:end;text-align:right}
.pc-d{font-size:var(--fs-12);color:var(--muted-foreground);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-listen{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Montserrat',sans-serif;font-size:var(--fs-13);font-weight:600;color:var(--navy);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--gold);
}
.pc-row:hover .pc-listen{text-decoration-color:var(--gold-deep)}

/* Featured band: the three Listen links become play buttons. */
.pc-feat-listen{display:inline-flex;align-items:center;gap:10px;margin-left:4px;font-weight:600}
.pr-feat-meta .pc-feat-listen{text-decoration:none}
.pc-feat-play{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--gold);color:var(--navy-deep);font-size:var(--fs-14);
  transition:transform .2s ease;
}
.pc-feat-play i{margin-left:2px}
.pc-feat-listen:hover .pc-feat-play{transform:scale(1.1)}
.pc-feat-listen:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px}

@media(max-width:860px){
  .pc-row{grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:start}
  .pc-side{grid-column:2;justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;gap:16px;align-items:center}
}
@media(max-width:560px){
  .pc-row{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:16px 12px;margin:0 -12px}
  .pc-play{width:32px;height:32px;margin:-16px 0 0 -16px;font-size:var(--fs-14)}
  .pc-t{font-size:var(--fs-15)}
  .pc-x{font-size:var(--fs-16)}
}

:root[data-theme="dark"] .pc-list li{border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .pc-row:hover{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .pc-row:focus-visible{outline-color:var(--gold-light)}
:root[data-theme="dark"] .pc-thumb img{filter:grayscale(.35) saturate(.6) contrast(1.03) brightness(.72)}
:root[data-theme="dark"] .pc-row:hover .pc-thumb img{filter:none}
:root[data-theme="dark"] .pc-show,
:root[data-theme="dark"] .pc-d{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .pc-t,
:root[data-theme="dark"] .pc-listen{color:#fff}
:root[data-theme="dark"] .pc-x{color:rgba(255,255,255,.84)}
:root[data-theme="dark"] .pc-play,
:root[data-theme="dark"] .pc-feat-play{background:var(--gold-light)}
@media(prefers-reduced-motion:reduce){
  .pc-row,.pc-thumb img,.pc-play,.pc-feat-play{transition:none}
  .pc-row:hover .pc-thumb img{transform:none}
}

/* Podcasts follow-ups: the newsroom's font and band-ink rules were scoped
   to .nr-hero (the newsroom only). Restated for every press page. */
section .nr-log-h .nr-log-y{font-family:'Montserrat',sans-serif;font-weight:300;letter-spacing:-.015em}
[data-theme="light"] section.sec.deep.nr-band .pr-feat-outlet,
[data-theme="light"] section.sec.deep.nr-band .pr-feat-meta{color:#fff}
.pr-feat-meta .pc-feat-listen{display:flex;width:fit-content;margin:14px 0 0}
.pc-listen{text-decoration:none}
.pc-listen-tx{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--gold)}
.pc-row:hover .pc-listen-tx{text-decoration-color:var(--gold-deep)}

/* Podcasts hero (second pass, 2026-10-16): the newsroom's hero shell and
   clippings, as episode cards with a small player line. */
.pc-hero .hero-in{align-items:center}
.pc-hero h1{font-size:clamp(33px,3.2vw,40px)}
.pc-clip-player{display:flex;align-items:center;gap:8px;margin-top:10px}
.pc-clip-play{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:#2A3845;font-size:var(--fs-12);flex:none;
}
.pc-clip-play i{margin-left:1px}
.pc-clip-listen{font-family:'Montserrat',sans-serif;font-size:var(--fs-12);font-weight:600;color:#2A3845}
.pc-clip-d{margin-left:auto;font-size:var(--fs-12);color:#5D5D5D}
/* The back card shows show and title only, like the newsroom's. */
.pc-clips .nr-clip-li.c3 .pc-clip-player{display:none}

/* Featured band: Listen buttons sit on one line across the three items. */
section.sec.deep.nr-band .pr-feat-item:has(.pc-feat-listen){display:flex;flex-direction:column}
section.sec.deep.nr-band .pr-feat-item:has(.pc-feat-listen) .pr-feat-meta{flex:1;display:flex;flex-direction:column}
section.sec.deep.nr-band .pr-feat-meta .pc-feat-listen{margin-top:auto;padding-top:16px}
/* The middle card: two title lines and no date, so nothing runs under the
   front card. */
.pc-clips .nr-clip-li.c2 .nr-clip-t{-webkit-line-clamp:2}
.pc-clips .nr-clip-li.c2 .pc-clip-d{display:none}