/* market.trosfy.com — site layout + design-system foundation.
   Tokens only (--trosfie-*); no raw hex for color. trosfie.css is locked
   and vendored — everything here composes its tokens or adds new
   --site-*/--gate-* custom properties. */

/* ── FONTS ─────────────────────────────────────────────────────────── */
/* Newsreader — self-hosted, latin subset, variable (weight 400-700). */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/Newsreader-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/Newsreader-Italic-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/Newsreader-Italic-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ── TOKENS ────────────────────────────────────────────────────────── */
:root {
  --site-font-masthead: "Newsreader", Georgia, "Times New Roman", serif;
  --site-font-data: var(--trosfie-font-mono);

  --site-max: min(var(--trosfie-max-content), 1200px);
  --site-measure: 68ch;

  --site-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Gate-state semantic tokens — WATCH/PASS/QUIET/FAIL/BUY each get their
     own fg/bg/border trio so a signal is never read off color alone. */
  --gate-buy-fg:     var(--trosfie-sage-700);
  --gate-buy-bg:      var(--trosfie-sage-50);
  --gate-buy-border:  var(--trosfie-sage-300);

  --gate-watch-fg:     var(--trosfie-orange-700);
  --gate-watch-bg:     var(--trosfie-orange-100);
  --gate-watch-border: var(--trosfie-orange-200);

  --gate-pass-fg:     var(--trosfie-brown-800);
  --gate-pass-bg:     var(--trosfie-brown-100);
  --gate-pass-border: var(--trosfie-brown-300);

  --gate-quiet-fg:     var(--trosfie-brown-700);
  --gate-quiet-bg:     var(--trosfie-gold-0);
  --gate-quiet-border: var(--trosfie-brown-300);

  --gate-fail-fg:     var(--trosfie-red-700);
  --gate-fail-bg:     var(--trosfie-red-100);
  --gate-fail-border: var(--trosfie-red-200);
}

[data-theme="dark"] {
  --gate-buy-fg:     var(--trosfie-sage-200);
  --gate-buy-bg:     var(--trosfie-sage-900);
  --gate-buy-border: var(--trosfie-sage-700);

  --gate-watch-fg:     var(--trosfie-orange-200);
  --gate-watch-bg:     var(--trosfie-orange-900);
  --gate-watch-border: var(--trosfie-orange-700);

  --gate-pass-fg:     var(--trosfie-brown-300);
  --gate-pass-bg:     var(--trosfie-brown-800);
  --gate-pass-border: var(--trosfie-brown-700);

  --gate-quiet-fg:     var(--trosfie-brown-400);
  --gate-quiet-bg:     var(--trosfie-brown-900);
  --gate-quiet-border: var(--trosfie-brown-700);

  --gate-fail-fg:     var(--trosfie-red-200);
  --gate-fail-bg:     var(--trosfie-red-900);
  --gate-fail-border: var(--trosfie-red-700);
}

/* ── BASE ──────────────────────────────────────────────────────────── */
body { font-size: 16px; line-height: 1.6; }

h1, h2 {
  font-family: var(--site-font-masthead);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--trosfie-surface);
  color: var(--trosfie-text-action);
  padding: var(--trosfie-space-sm) var(--trosfie-space-lg);
  border-radius: var(--trosfie-radius-sm);
  font: 600 14px/1 var(--trosfie-font-godwit);
  box-shadow: var(--trosfie-shadow-2);
}
.skip-link:focus {
  left: var(--trosfie-space-lg);
  top: var(--trosfie-space-lg);
}

:focus-visible {
  outline: 2px solid var(--trosfie-border-focus);
  outline-offset: 2px;
}

/* ── CHROME — header ───────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--trosfie-border-subtle); background: var(--trosfie-surface); }
.site-header__inner {
  max-width: var(--site-max); margin: 0 auto;
  padding: var(--trosfie-space-lg) var(--trosfie-space-xl);
  display: flex; align-items: center; gap: var(--trosfie-space-xl); flex-wrap: wrap;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--trosfie-space-sm);
  font-family: var(--site-font-masthead);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.008em;
  color: var(--trosfie-text-high);
}
/* Brand mark carries its own ink tile; the radius here just softens the
   corner where the tile meets light surfaces. */
.brand-mark { flex-shrink: 0; border-radius: 6px; }
/* House icon glyphs (assets/icons.svg sprite) — inherit link color. */
.icon { vertical-align: -2px; margin-right: var(--trosfie-space-xs); flex-shrink: 0; }
.site-header__brand:hover { color: var(--trosfie-text-action); }
.site-nav { display: flex; gap: var(--trosfie-space-lg); }
/* type comes from .tr-ui-large (templates); only the idle/active color is site-specific */
/* Tap target: .tr-ui-large is 14px/20px, so 12px vertical padding reaches the
   44px effective height; a matching negative margin cancels the added box
   size out of the flex layout so the visible gap between links is unchanged. */
.site-nav a {
  color: var(--trosfie-text-subtle);
  padding: var(--trosfie-space-md) var(--trosfie-space-xs);
  margin: calc(var(--trosfie-space-md) * -1) calc(var(--trosfie-space-xs) * -1);
}
.site-nav a:hover { color: var(--trosfie-text-action); }
.site-nav a[aria-current="page"] {
  color: var(--trosfie-text-action);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--trosfie-text-action);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

#theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0; border: 0; border-radius: var(--trosfie-radius-pill);
  background: transparent; color: var(--trosfie-text-subtle);
  cursor: pointer;
  transition: background var(--trosfie-dur-quick) var(--trosfie-ease-in-out),
              color var(--trosfie-dur-quick) var(--trosfie-ease-in-out);
}
#theme-toggle:hover { background: var(--trosfie-bg-hover); color: var(--trosfie-text-high); }
#theme-toggle .theme-toggle__sun { display: none; }
#theme-toggle .theme-toggle__moon { display: block; }
[data-theme="dark"] #theme-toggle .theme-toggle__sun { display: block; }
[data-theme="dark"] #theme-toggle .theme-toggle__moon { display: none; }

/* ── CHROME — main + footer ───────────────────────────────────────── */
.site-main { max-width: var(--site-max); margin: 0 auto; padding: var(--trosfie-space-3xl) var(--trosfie-space-xl) var(--trosfie-space-3xl); }

.site-footer { border-top: 1px solid var(--trosfie-border-subtle); background: var(--trosfie-surface-subtle); margin-top: var(--trosfie-space-5xl); }
.site-footer__inner {
  max-width: var(--site-max); margin: 0 auto;
  padding: var(--trosfie-space-2xl) var(--trosfie-space-xl);
  display: flex; flex-direction: column; gap: var(--trosfie-space-lg);
}
/* disclosure copy lives in a .tr-callout (templates); this only mutes its running text */
.site-footer p { color: var(--trosfie-text-subtle); }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: var(--trosfie-space-sm) var(--trosfie-space-2xl);
  max-width: 420px;
}
.site-footer__group { display: flex; flex-direction: column; gap: var(--trosfie-space-sm); }
/* link type comes from .tr-ui-normal (templates); color/decoration come free from trosfie.css's global `a` rule */
/* Tap target: .tr-ui-normal is 12px/16px, so 16px top/bottom padding reaches
   the 44px effective height; a matching negative margin keeps the stacked
   gap between links visually the same as before. */
.site-footer__group a {
  padding: var(--trosfie-space-lg) 0;
  margin: calc(var(--trosfie-space-lg) * -1) 0;
}

/* ── COMPONENTS — signal chip (gate-state) ────────────────────────── */
.signal-chip {
  display: inline-flex; align-items: center;
  padding: var(--trosfie-space-xs) var(--trosfie-space-sm);
  border-radius: var(--trosfie-radius-sm);
  border: 1px solid;
  font: 600 12px/16px var(--trosfie-font-godwit);
  letter-spacing: 0.012em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.signal-chip--buy   { color: var(--gate-buy-fg);   background: var(--gate-buy-bg);   border-color: var(--gate-buy-border); }
.signal-chip--watch { color: var(--gate-watch-fg); background: var(--gate-watch-bg); border-color: var(--gate-watch-border); }
.signal-chip--pass  { color: var(--gate-pass-fg);  background: var(--gate-pass-bg);  border-color: var(--gate-pass-border); }
.signal-chip--quiet { color: var(--gate-quiet-fg); background: var(--gate-quiet-bg); border-color: var(--gate-quiet-border); font-weight: 400; }
.signal-chip--fail  { color: var(--gate-fail-fg);  background: var(--gate-fail-bg);  border-color: var(--gate-fail-border); }

/* ── COMPONENTS — content prose ───────────────────────────────────── */
.prose { display: flex; flex-direction: column; gap: var(--trosfie-space-lg); }
.prose h2 { margin-top: var(--trosfie-space-xl); }
.prose h3 { margin-top: var(--trosfie-space-lg); }
.prose ul, .prose ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: var(--trosfie-space-xs); }
.prose li { font: 400 16px/1.6 var(--trosfie-font-godwit); letter-spacing: 0.012em; color: var(--trosfie-text-high); }
.prose p { font-size: 16px; line-height: 1.6; }
/* Editorial pull-quote: rule + serif italic, not a boxed callout. */
.prose blockquote {
  margin: var(--trosfie-space-xl) 0;
  padding: var(--trosfie-space-xs) 0 var(--trosfie-space-xs) var(--trosfie-space-xl);
  border-left: 3px solid var(--trosfie-gold-300);
  color: var(--trosfie-text-high);
}
.prose blockquote p {
  font: 500 20px/1.5 var(--site-font-masthead); font-style: italic; color: inherit;
}
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th { text-align: left; font: 600 12px/16px var(--trosfie-font-godwit); letter-spacing: 0.04em; text-transform: uppercase; color: var(--trosfie-text-subtle); padding: 8px 12px; border-bottom: 1px solid var(--trosfie-border); }
.prose td { padding: 8px 12px; border-bottom: 1px solid var(--trosfie-border-subtle); }
.prose figure { margin: 0; }
.prose figcaption, .prose .asof { font-size: 12px; color: var(--trosfie-text-muted); }
.prose .footnotes { border-top: 1px solid var(--trosfie-border-subtle); padding-top: var(--trosfie-space-lg); font-size: 13px; color: var(--trosfie-text-subtle); }
.prose .footnotes h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--trosfie-text-subtle); font-family: var(--trosfie-font-godwit);
  margin-top: 0;
}
.prose .footnotes li { font-size: 13px; }
.prose code { background: var(--trosfie-surface-muted); padding: 1px 5px; border-radius: var(--trosfie-radius-xs); font-family: var(--site-font-data); }
.prose pre { background: var(--trosfie-surface-muted); padding: var(--trosfie-space-lg); border-radius: var(--trosfie-radius-md); overflow-x: auto; }

/* Reading column — article/static-page bodies keep a comfortable measure
   even though .site-main has widened; listing/landing sections (which
   render as <section>, not <article>) and the screener dashboard (which
   needs the full width for its tables) opt out below. */
.site-main > article > .article-head,
.site-main > article > .key-facts,
.site-main > article > .prose {
  max-width: var(--site-measure);
  margin-left: auto;
  margin-right: auto;
}
/* The screener-day dashboard is a data page, not a reading column: let it
   use the full site width. Individual prose paragraphs inside opt back into
   a readable measure via .measure. */
.site-main > article.screener-day > .article-head,
.site-main > article.screener-day > .prose {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.measure { max-width: var(--site-measure); }

/* Table wrapper — wide tables scroll inside, never the page */
.table-scroll { overflow-x: auto; }
.td-data { font-family: var(--site-font-data); font-variant-numeric: tabular-nums; }

/* Article header */
.article-head { display: flex; flex-direction: column; gap: var(--trosfie-space-md); margin-bottom: var(--trosfie-space-2xl); }
.article-head h1 { font-size: 34px; }
.byline { font: 500 13px/150% var(--trosfie-font-godwit); color: var(--trosfie-text-subtle); }
.byline a { font-weight: 600; }
/* .positions-note (build.py-generated disclosure paragraph) mirrors .tr-callout's
   box model — radius-md, callout padding — but can't carry the class itself since
   the markup is assembled in build.py, outside this template/CSS-only pass. */
.positions-note {
  font: 500 13px/150% var(--trosfie-font-godwit); color: var(--trosfie-text-subtle);
  background: var(--trosfie-surface-list); border: 1px solid var(--trosfie-border-subtle);
  border-radius: var(--trosfie-radius-md); padding: var(--trosfie-space-md) var(--trosfie-space-lg);
}

/* Key facts (GEO extract block) — a callout-family block (see Map); internals
   stay site-specific per the DS contract, but the radius now matches the
   callout scale (radius-md) instead of the card scale. */
.key-facts {
  background: var(--trosfie-surface-subtle); border: 1px solid var(--trosfie-border-subtle);
  border-radius: var(--trosfie-radius-md); padding: var(--trosfie-space-xl);
  display: flex; flex-direction: column; gap: var(--trosfie-space-sm);
  margin-bottom: var(--trosfie-space-2xl);
}
.key-facts h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--trosfie-text-subtle); margin: 0; font-family: var(--trosfie-font-godwit); }
.key-facts .thesis { font: 600 16px/150% var(--trosfie-font-godwit); }
.key-facts ul { margin: 0; padding-left: 20px; }
.key-facts li { font-size: 14px; }
.key-facts .asof { font-size: 12px; color: var(--trosfie-text-muted); }

/* Listings — flex/gap now come from .tr-stack.tr-gap-m on the <ul> (templates);
   this is just the list reset. */
.post-list { list-style: none; padding: 0; margin: 0; }
/* .post-list__item (build.py-generated) is card-component shaped: identical
   box model to .tr-card (surface/border-subtle/radius-lg/space-xl padding).
   Kept here only because the <li> markup is assembled in build.py's
   article_item()/day_item() helpers, outside this template/CSS-only pass —
   rename to `tr-card` there to finish the migration and delete this rule. */
.post-list__item { border: 1px solid var(--trosfie-border-subtle); border-radius: var(--trosfie-radius-lg); padding: var(--trosfie-space-xl); background: var(--trosfie-surface); }
/* Card heading is an <h2> for outline correctness (these list items sit
   directly under the page's single h1), but keeps trosfie.css's h3 size —
   26px/32px masthead serif would read as a second page title, not a card
   label. */
.post-list__item h2 {
  margin: 0 0 var(--trosfie-space-xs);
  font: 600 18px/28px var(--trosfie-font-display);
  letter-spacing: 0.012em;
}
.post-list__meta { font-size: 12px; color: var(--trosfie-text-muted); }
.post-list__meta time { font-family: var(--site-font-data); font-variant-numeric: tabular-nums; }

/* Landing/listing lede — type comes from .tr-p-large (templates); color/measure stay site-specific. */
.lede { color: var(--trosfie-text-subtle); max-width: 64ch; }

/* Ad slots — reserved, hidden until [ads] enabled */
.ad-slot[hidden] { display: none; }
.ad-slot--enabled { min-height: 250px; display: flex; align-items: center; justify-content: center; background: var(--trosfie-surface-subtle); border-radius: var(--trosfie-radius-md); }

/* Market tab strips (.tr-tabs is the DS component; layout-only spacing here). */
.tr-tabs { margin-bottom: var(--trosfie-space-xl); }

/* Roster/screener sections on a screener day page. */
.section-note { color: var(--trosfie-text-subtle); font-size: 14px; margin-top: 0; }
.roster-quiet-heading { margin-bottom: var(--trosfie-space-sm); }
.quiet-roster { display: flex; flex-wrap: wrap; gap: var(--trosfie-space-sm); margin-bottom: var(--trosfie-space-xl); }
.chip-score { opacity: 0.7; font-weight: 400; margin-left: var(--trosfie-space-xs); }
.empty-note { color: var(--trosfie-text-subtle); font-style: italic; }

/* Screener-day summary strip — real per-tier counts, built in build.py. */
.screener-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--trosfie-space-sm) var(--trosfie-space-md);
  padding: var(--trosfie-space-lg) var(--trosfie-space-xl);
  background: var(--trosfie-surface-subtle); border: 1px solid var(--trosfie-border-subtle);
  border-radius: var(--trosfie-radius-md); margin-bottom: var(--trosfie-space-2xl);
}
.screener-summary__total { font: 600 13px/1 var(--trosfie-font-godwit); color: var(--trosfie-text-high); }
.screener-summary__asof { color: var(--trosfie-text-subtle); margin-left: auto; }

/* Data tables: ticker/quality-gate go mono; mobile reflow to stacked cards. */
.table-reflow .signal-chip { white-space: nowrap; }
@media (max-width: 639px) {
  .table-reflow thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
  }
  .table-reflow, .table-reflow tbody, .table-reflow tr, .table-reflow td { display: block; width: 100%; }
  .table-reflow tr {
    border: 1px solid var(--trosfie-border-subtle); border-radius: var(--trosfie-radius-md);
    margin-bottom: var(--trosfie-space-md); padding: var(--trosfie-space-sm) var(--trosfie-space-md);
  }
  .table-reflow tr:last-child { margin-bottom: 0; }
  .table-reflow td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--trosfie-space-md);
    padding: var(--trosfie-space-xs) 0; border: 0; text-align: right;
  }
  .table-reflow td::before {
    content: attr(data-th); color: var(--trosfie-text-subtle); text-align: left;
    font: 600 11px/1 var(--trosfie-font-godwit); text-transform: uppercase; letter-spacing: 0.04em;
  }
}

/* ── BENTO (landing) ───────────────────────────────────────────────────
   12-col grid. Cell/span map, in DOM order:
     1 hero          span 7, row 2   ┐ rows 1-2: 7 + 5 = 12
     2 screen-us     span 5, row 2   ┘
     3 screen-idx    span 3          ┐
     4 article-lead  span 5          │ row 3: 3 + 5 + 4 = 12
     5 article #1    span 4          ┘
     6 article #2    span 5          ┐
     7 method        span 4          │ row 4: 5 + 4 + 3 = 12
     8 positions     span 3          ┘
   Editorial cells (hero/article-lead/article) use the calmer default
   surface and serif headlines; data cells (screen-us/screen-idx/method)
   use the subtle surface and mono for numbers/tickers. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--trosfie-space-xl);
  margin-bottom: var(--trosfie-space-2xl);
}
.bento__cell {
  display: flex; flex-direction: column; gap: var(--trosfie-space-md);
  padding: var(--trosfie-space-xl);
  border-radius: var(--trosfie-radius-md);
  border: 1px solid var(--trosfie-border-subtle);
  background: var(--trosfie-surface);
  min-width: 0;
}
.bento__span-3 { grid-column: span 3; }
.bento__span-4 { grid-column: span 4; }
.bento__span-5 { grid-column: span 5; }
.bento__span-7 { grid-column: span 7; }
.bento__row-2  { grid-row: span 2; }

.bento__cell-title { margin: 0; font: 600 14px/1.3 var(--trosfie-font-godwit); text-transform: uppercase; letter-spacing: 0.06em; color: var(--trosfie-text-subtle); }
.bento__cell-title a { color: inherit; }
.bento__cell-date { margin: 0; font-size: 12px; color: var(--trosfie-text-muted); font-family: var(--site-font-data); }

/* Hero — dark chocolate treatment, serif h1 already global. */
.bento__cell--hero {
  background: var(--trosfie-surface-hero);
  color: var(--trosfie-text-on-color);
  border-color: transparent;
  justify-content: center;
  align-items: flex-start;
}
.bento__cell--hero h1 { color: var(--trosfie-text-on-color); margin: 0; }
.bento__cell--hero .lede { color: var(--trosfie-text-on-color); max-width: 46ch; }
[data-theme="dark"] .bento__cell--hero {
  /* --trosfie-surface-hero coincides with --trosfie-action-primary in dark
     mode, which would make the primary CTA button blend into the card; the
     always-inverted surface keeps the button visible in both themes. */
  background: var(--trosfie-surface-invert);
}

/* Screen tiles + method legend — data family: subtle surface, mono numbers. */
.bento__cell--screen-us, .bento__cell--screen-idx, .bento__cell--method {
  background: var(--trosfie-surface-subtle);
}
.bento-picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--trosfie-space-sm); }
.bento-pick { display: flex; align-items: center; gap: var(--trosfie-space-sm); font-family: var(--site-font-data); font-size: 14px; }
.bento-pick__ticker { flex: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.bento-pick__score { color: var(--trosfie-text-subtle); font-variant-numeric: tabular-nums; }
.bento-summary { display: flex; flex-wrap: wrap; gap: var(--trosfie-space-xs); }
/* Card actions pin to the cell bottom (standard card pattern); content above
   flows from the top so short cells don't open a void mid-cell. The hero is
   excluded: its content is vertically centered as a unit. */
.bento__cell--screen-us > .tr-btn:last-child,
.bento__cell--screen-idx > .tr-btn:last-child,
.bento__cell--method > .tr-btn:last-child { margin-top: auto; align-self: flex-start; }
.bento__cell--article .bento__cell-date,
.bento__cell--article-lead .bento__cell-date { margin-top: auto; }
/* Guard against a future long thesis re-inflating the lead cell. */
.bento-pullquote p {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Editorial cells — serif headline, calmer surface, no mono/chips. */
.bento__cell--article-lead .bento__cell-title,
.bento__cell--article .bento__cell-title {
  font-family: var(--site-font-masthead); font-size: 20px; font-weight: 600;
  text-transform: none; letter-spacing: -0.008em; color: var(--trosfie-text-high);
}
.bento__cell--article-lead .bento__cell-title { font-size: 24px; }
.bento-pullquote {
  margin: 0; padding-left: var(--trosfie-space-lg);
  border-left: 3px solid var(--trosfie-gold-300);
  font: 500 italic 17px/1.5 var(--site-font-masthead);
  color: var(--trosfie-text-subtle);
}

/* Method legend. */
.bento-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--trosfie-space-sm); }
.bento-legend__item { display: flex; align-items: center; gap: var(--trosfie-space-sm); font-size: 13px; color: var(--trosfie-text-subtle); }

/* Disclosure cell — muted, quiet utility panel. */
.bento__cell--positions { background: var(--trosfie-surface-subtle); }
.bento__cell--positions .bento-callout,
.bento__cell--positions .positions-note { font-size: 12px; background: none; border: 0; padding: 0; }
.bento__cell--positions .bento-callout { margin: 0; }

/* ── MOTION ────────────────────────────────────────────────────────── */
/* Color/background fades aid comprehension (hover/active state legibility)
   and are safe under reduced motion, so they stay ungated; only actual
   movement (transform/box-shadow, below) is gated on no-preference. */
.tr-btn, #theme-toggle, .post-list__item, .tr-card {
  transition: background 160ms var(--site-ease-out), color 160ms var(--site-ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .post-list__item,
    .tr-card,
    .bento > .bento__cell--screen-us,
    .bento > .bento__cell--screen-idx,
    .bento > .bento__cell--article-lead,
    .bento > .bento__cell--article {
      transition: transform 160ms var(--site-ease-out), box-shadow 160ms var(--site-ease-out);
    }
    .post-list__item:hover,
    .tr-card:hover,
    .bento > .bento__cell--screen-us:hover,
    .bento > .bento__cell--screen-idx:hover,
    .bento > .bento__cell--article-lead:hover,
    .bento > .bento__cell--article:hover {
      transform: translateY(-2px);
      box-shadow: var(--trosfie-shadow-2);
    }
  }

  .tr-btn, #theme-toggle, .post-list__item, .tr-card {
    transition: transform 120ms var(--site-ease-out), box-shadow 160ms var(--site-ease-out);
  }
  .tr-btn:active, #theme-toggle:active, .post-list__item:active, .tr-card:active {
    transform: scale(0.97);
  }

  /* Entrance stagger — homepage bento. */
  @keyframes site-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .bento > * {
    animation: site-fade-in 300ms ease-out backwards;
    animation-delay: calc(var(--cell-i, 0) * 40ms);
  }
}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > .bento__cell { grid-column: span 1; grid-row: auto; }
  .bento > .bento__cell--hero { grid-column: span 2; }
}
@media (max-width: 639px) {
  .bento { grid-template-columns: 1fr; }
  .bento > .bento__cell { grid-column: span 1; }
  .screener-summary__asof { margin-left: 0; }

  /* Header: brand + toggle stay on row 1, .site-nav becomes its own
     full-width row 2 instead of wrapping mid-strip.
     Fit check at a 375px viewport: the 4 labels (Outlook/Screener/
     Methodology/About = 31 characters) at 14px Poppins SemiBold
     (.tr-ui-large) average roughly 0.58em/char => ~252px of text, plus the
     xs (4px) horizontal tap-padding on each link (.site-nav a, above) =>
     ~284px of content. Available width is 375px minus the header's
     2x space-xl (24px) side padding = 327px, so it fits with ~43px of
     slack left for justify-content to distribute as inter-link gaps. */
  .site-header__brand { order: 1; }
  #theme-toggle { order: 2; }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    gap: 0;
    justify-content: space-between;
  }
}
@media (max-width: 640px) {
  .site-main { padding: var(--trosfie-space-xl) var(--trosfie-space-lg) var(--trosfie-space-3xl); }
  .article-head h1 { font-size: 26px; }
  .site-footer__grid { grid-template-columns: 1fr; max-width: none; }
}