/* ============================================================
   SOLENIC — FEED
   The reusable listing pattern. News uses it first; Publications and
   Industry Publications use the same file. A tweak here reaches all
   of them, which is the point — there is no per-section copy.

   THE READABILITY CONTRACT
   The audience is older patients and clinicians, so legibility is a
   requirement rather than a preference. Every number below is
   deliberate and none of them should be changed casually:

     leading   1.65  — house floor is 1.6; light type on a dark ground
                       optically thickens, so this buys a little air back
     measure   66ch  — inside the 50–66 range. Past roughly 75 the return
                       sweep between lines starts losing readers
     size      19px on a phone rising to 28px on a wide screen. A flat 28
                       gives 22 characters per line at 393px, which fails
                       the reader in the opposite direction
     ink       0.84  — floor is 0.78
     weight    500 on display type, never 700: heavy weights bloom on dark

   THE RULE THAT MATTERS MOST
   Widen a paragraph by raising type size, never by adding characters per
   line. That is why the body is large — it fills the column AND reads more
   easily, where a wider measure trades one for the other.

   RETHEMING A SECTION
   Override the --feed-* properties on the section wrapper. Do not fork
   this file.
   ============================================================ */

:root{
  --feed-max:        1272px;
  --feed-inset:      clamp(24px, 5vw, 64px);
  --feed-rhythm:     clamp(2.25rem, 4vh, 3.25rem);
  --feed-body:       clamp(1.0094rem, 0.8925rem + 0.935vw, 1.4875rem); /* 15% below its prior clamp, on request 2026-08-31 */
  --feed-measure:    66ch;
  --feed-lead:       1.65;
  --feed-ink:        .84;
  --feed-scale:      1;      /* set by the reader text-size control */
  --feed-ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

.feed-wrap{max-width:var(--feed-max);margin:0 auto;padding:0 var(--feed-inset)}

/* ── masthead ──────────────────────────────────────────────────────────────── */
.feed-masthead{padding:clamp(48px,8vh,96px) 0 clamp(24px,3.5vh,36px)}
.feed-eyebrow{
  font-family:'Space Mono',monospace;font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(var(--c-ink-rgb),.68);margin:0 0 1.25rem;
}
.feed-masthead h1{
  font-size:clamp(2.25rem,4.4vw,3.5rem);font-weight:500;line-height:1.08;
  letter-spacing:-.015em;color:var(--c-ink-strong);margin:0 0 1rem;
}
.feed-lede{
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:var(--feed-lead);
  color:rgba(var(--c-ink-rgb),var(--feed-ink));max-width:62ch;margin:0;
}

/* ── filter rail ───────────────────────────────────────────────────────────── */
.feed-rail{
  position:sticky;top:var(--snav-h,74px);z-index:20;
  background:linear-gradient(var(--c-ground-deep) 82%,rgba(10,8,6,0));
  padding-top:.75rem;
}
.feed-rail-inner{
  display:flex;align-items:baseline;gap:clamp(14px,2.2vw,30px);
  border-bottom:1px solid rgba(var(--c-ink-rgb),.14);padding-bottom:.85rem;
}
.feed-filters{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem clamp(14px,2.2vw,30px);
  flex:1 1 auto;min-width:0;
}
.feed-filter{
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:.9375rem;letter-spacing:.04em;
  color:rgba(var(--c-ink-rgb),.7);
  padding:.55rem 0 .5rem;min-height:44px;      /* touch target */
  /* Most labels are short enough to stay on one line; a couple of the longer
     Industry Publications category names are not, and on a narrow viewport
     can be wider than the whole row on their own. Wrapping keeps that case
     fully visible instead of silently running past the edge under the
     page's overflow-x:hidden (scrollWidth checks miss that — it clips, it
     doesn't scroll). max-width stops the button box itself from ever being
     wider than the row has to give. */
  white-space:normal;max-width:100%;text-align:left;position:relative;transition:color .2s var(--feed-ease);
}
.feed-filter .n{font-size:.75rem;color:rgba(var(--c-ink-rgb),.45);margin-left:.35em}
.feed-filter:hover{color:var(--c-ink-strong)}
.feed-filter:hover .n{color:rgba(var(--c-ink-rgb),.7)}
.feed-filter[aria-pressed="true"]{color:var(--c-accent)}
.feed-filter[aria-pressed="true"] .n{color:rgba(var(--c-accent-rgb),.75)}
.feed-filter[aria-pressed="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.9rem;height:2px;background:var(--c-accent);
}
/* Where you are, as distinct from what you filtered. With "All" selected a reader
   can scroll 35 items with nothing saying which year they are in, and by the time
   they surface they have forgotten the years are clickable at all. This lights up
   the year under the reader as they scroll — quieter than the selected state, so
   the two never read as the same thing. */
.feed-filter[data-current="true"]:not([aria-pressed="true"]){color:var(--c-ink-strong)}
.feed-filter[data-current="true"]:not([aria-pressed="true"]) .n{color:rgba(var(--c-ink-rgb),.65)}
.feed-filter[data-current="true"]:not([aria-pressed="true"])::after{
  content:"";position:absolute;left:0;right:0;bottom:-.9rem;height:2px;
  background:rgba(var(--c-ink-rgb),.32);
}
.feed-filter:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px;border-radius:2px}

/* ── reader text size ──────────────────────────────────────────────────────—
   A reader control, not chrome. 28px suits most of this audience and is too
   large for some, so the page lets them say which. Scales body copy only, so
   the hierarchy survives every step, and the measure stays 66ch because ch
   scales with the type. */
.feed-textsize{display:flex;align-items:center;gap:.5rem;margin-left:auto;padding-left:1.5rem}
.feed-textsize .lbl{
  font-family:'Space Mono',monospace;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(var(--c-ink-rgb),.45);white-space:nowrap;
}
.feed-textsize button{
  appearance:none;background:none;cursor:pointer;
  border:1px solid rgba(var(--c-ink-rgb),.2);color:rgba(var(--c-ink-rgb),.72);
  font-family:'Arimo',Arial,sans-serif;font-weight:500;line-height:1;
  min-width:38px;min-height:38px;padding:0 .4rem;
  transition:border-color .2s var(--feed-ease),color .2s var(--feed-ease);
}
.feed-textsize button:hover{color:var(--c-ink-strong);border-color:rgba(var(--c-ink-rgb),.4)}
.feed-textsize button[aria-pressed="true"]{color:var(--c-accent);border-color:var(--c-accent)}
.feed-textsize button:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.feed-textsize button[data-size="s"]{font-size:.8125rem}
.feed-textsize button[data-size="m"]{font-size:1rem}
.feed-textsize button[data-size="l"]{font-size:1.25rem}
html[data-feed-size="s"]{--feed-scale:.72}
html[data-feed-size="l"]{--feed-scale:1.18}

/* ── the list ──────────────────────────────────────────────────────────────── */
.feed-list{padding:clamp(28px,4.5vh,48px) 0 clamp(72px,12vh,140px)}
.feed-count{
  font-family:'Space Mono',monospace;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(var(--c-ink-rgb),.5);margin:0 0 2.5rem;
}

/* Year marker. Only meaningful while the whole archive is showing — filtered to a
   single year it would be repeating the button you just pressed, so it hides. */
.feed-group{
  font-family:'Space Mono',monospace;font-size:.8125rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(var(--c-ink-rgb),.5);
  margin:0 0 1.75rem;padding-top:.25rem;
  display:flex;align-items:center;gap:1rem;
}
.feed-group::after{
  content:"";flex:1;height:1px;background:rgba(var(--c-ink-rgb),.12);
}
.feed-group[hidden]{display:none}
.feed-item + .feed-group{margin-top:.5rem}

.feed-item{
  padding:0 0 var(--feed-rhythm);margin-bottom:var(--feed-rhythm);
  border-bottom:1px solid rgba(var(--c-ink-rgb),.09);
}
.feed-item:last-child{border-bottom:0;margin-bottom:0}
.feed-item[hidden]{display:none}

/* The dateline, promoted out of the paragraph. It is the native furniture of a
   press release, so using it as structure is the form's own vernacular rather
   than decoration. Degrades on its own: many items carry no city and no wire
   service, and the line still reads deliberately with a single field. */
.feed-meta{
  font-family:'Space Mono',monospace;font-size:.8125rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(var(--c-ink-rgb),.68);
  margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.4em .75em;
}
.feed-meta .sep{color:rgba(var(--c-ink-rgb),.3)}

/* ® and ™ set as real superscripts. Left inline they render at full type size,
   which at a 42px headline is a glyph the size of a letter. Sized in em so it
   tracks whatever the surrounding text is doing, and line-height:0 keeps the
   raised mark from opening up the line it sits on. */
.feed-mark{
  font-size:.42em; vertical-align:.62em; line-height:0;
  letter-spacing:0; margin-left:.02em; font-weight:400;
}

.feed-headline{margin:0 0 1rem}
.feed-headline a,.feed-headline span{
  /* 2px above .feed-excerpt's own size, and same --feed-scale/--feed-body
     terms — so the Text Size control (s/m/l) moves both together and the
     2px gap holds at every size, not just the default. */
  font-size:calc(var(--feed-scale) * var(--feed-body) + 2px);font-weight:500;line-height:1.28;
  letter-spacing:-.01em;color:var(--c-ink-strong);text-decoration:none;
  text-underline-offset:.18em;text-decoration-thickness:1px;
}
.feed-headline a:hover{color:var(--c-em);text-decoration:underline}
.feed-headline a:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

.feed-excerpt{
  font-size:calc(var(--feed-scale) * var(--feed-body));
  line-height:var(--feed-lead);
  color:rgba(var(--c-ink-rgb),var(--feed-ink));
  max-width:var(--feed-measure);margin:0 0 1.15rem;
}

.feed-dest{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:'Space Mono',monospace;font-size:.875rem;letter-spacing:.06em;
  color:rgba(var(--c-ink-rgb),.72);text-decoration:none;
  padding:.4rem 0;min-height:38px;
}
.feed-dest .arrow{transition:transform .2s var(--feed-ease)}
.feed-dest:hover{color:var(--c-accent)}
.feed-dest:hover .arrow{transform:translate(2px,-2px)}
.feed-dest:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

.feed-empty{color:rgba(var(--c-ink-rgb),.6);font-size:1.0625rem;line-height:var(--feed-lead)}

/* ── teaser ────────────────────────────────────────────────────────────────—
   The homepage panel version. A panel is one viewport tall and the deck moves
   panel by panel, so it cannot scroll internally — which means excerpts do not
   fit at any count or type size (measured: 3 items with 2-line excerpts still
   overflow a 1440x800 panel by 228px). So the teaser is metadata plus headline:
   it announces that there is news and what the latest is, and the page does the
   reading. Its own smaller scale, because a lead-in is not a reading surface.

   Same classes as the page, so a change to the item pattern reaches both. */
/* .panel-content caps at a reading measure and its left padding grows with the
   viewport, which is right for a paragraph panel and wrong here: the teaser is
   headlines, and headlines want the width. Take the panel's own grid inset
   instead, so the edges land where the nav and the rest of the site land. */
.feed-teaser{height:100%;display:flex;flex-direction:column;justify-content:center}
/* Two-class compound, matching how home.css already overrides .panel-content for
   the video, careers and investors panels. Single-class would lose on source
   order, since home.css loads after this file. */
.panel-content.feed-teaser{
  max-width:none;width:100%;
  padding:0 var(--grid-inset,clamp(24px,5vw,64px));
}
.feed-teaser .feed-masthead{padding:0 0 clamp(18px,2.6vh,30px)}
.feed-teaser .feed-masthead h1{font-size:clamp(1.75rem,3vw,2.5rem)}
.feed-teaser .feed-lede{font-size:1.0625rem;max-width:58ch}

.feed-teaser .feed-item{
  padding:0 0 clamp(14px,1.8vh,22px);
  margin-bottom:clamp(14px,1.8vh,22px);
}
.feed-teaser .feed-meta{font-size:.75rem;margin-bottom:.6rem}
.feed-teaser .feed-headline{margin:0}
/* Same "2px above the description" relationship as the standalone-page rule
   above. The teaser hides .feed-excerpt (it doesn't fit a one-viewport
   panel), but --feed-body is still the site's one definition of "description
   size" — kept in terms of it here so both places move together if it ever
   changes, rather than drifting apart as two separately-tuned numbers. */
.feed-teaser .feed-headline a{font-size:calc(var(--feed-scale) * var(--feed-body) + 2px);line-height:1.3}
/* no excerpt and no per-item destination in the teaser — see note above */
.feed-teaser .feed-excerpt,
.feed-teaser .feed-dest{display:none}

.feed-more{
  margin-top:clamp(16px,2.4vh,28px);align-self:flex-start;
  font-family:'Space Mono',monospace;font-size:.9375rem;letter-spacing:.06em;
  color:var(--c-accent);text-decoration:none;
  display:inline-flex;gap:.6em;align-items:center;min-height:44px;
}
.feed-more .arrow{transition:transform .2s var(--feed-ease)}
.feed-more:hover{color:var(--c-em)}
.feed-more:hover .arrow{transform:translateX(3px)}
.feed-more:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .feed-filter,.feed-dest .arrow,.feed-textsize button,.feed-more .arrow{transition:none}
}