/**
 * Teamed Blog — /blog-posts/ index, category archives, single post.
 *
 * Own file, loaded only on blog screens. NOT appended to the 634KB custom.css.
 * Every token is --tb- prefixed so it cannot collide with the brand variables
 * already on the page, or with --tr- in css/research.css.
 *
 * The blog is PHOTO-led; /research/ is chart-led. That is why there is no dark
 * hero here — the index header is light, and the images carry the page.
 *
 * !! TEAL IS FOR ACTION ONLY, per the design system: links, buttons, chips in
 * their on state, hover and focus. Not eyebrows, not headings, not rules. The
 * handoff put the eyebrow and the italic H1 word in teal; both are --tb-mid and
 * --tb-ink here, matching the decision taken on /research/.
 */

:root {
  --tb-teal:#00A896; --tb-teal-dark:#007A6E; --tb-teal-light:#E6F7F5;
  --tb-ink:#1A2B2A; --tb-mid:#3D5250; --tb-gray:#6B7B7A;
  --tb-ground:#FFFFFF; --tb-surface:#F5F9F8; --tb-border:#E2EEEC; --tb-muted:#D0E0DD;
  --tb-display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --tb-sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --tb-ease:cubic-bezier(.2,.8,.2,1);
  --tb-shadow:0 8px 24px rgba(0,122,110,.10);
  --tb-ring:0 0 0 3px rgba(0,168,150,.28);
}

/* ── shell ─────────────────────────────────────────────────────────────── */
/* !! Every element js/blog.js hides with the `hidden` attribute is given a
   display by a rule below — .tb-card is block, .tb-feat and .tb-grid are grid,
   .tb-research is flex. An author `display` beats the UA stylesheet's
   [hidden]{display:none} no matter the specificity, so without this line the
   attribute does nothing at all: no card ever hides, "show 9" shows 146, and
   the featured row stays up while a filter is active. */
.tb-page [hidden] { display:none !important; }
.tb-page { font-family:var(--tb-sans); color:var(--tb-mid); background:var(--tb-ground); }
.tb-in { max-width:1100px; margin:0 auto; padding-left:24px; padding-right:24px; }
.tb-page h1,.tb-page h2,.tb-page h3 { font-family:var(--tb-display); font-weight:400;
  color:var(--tb-ink); margin:0; text-wrap:balance; }
.tb-page a { color:var(--tb-teal-dark); text-decoration:none; transition:color .12s var(--tb-ease); }
.tb-page a:hover { color:var(--tb-teal); }
.tb-page a:focus-visible,.tb-page button:focus-visible,.tb-page input:focus-visible {
  outline:2px solid var(--tb-teal); outline-offset:2px; border-radius:4px; }
.tb-eyebrow { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tb-mid); display:block; }

/* ── index header ──────────────────────────────────────────────────────── */
.tb-head { background:var(--tb-surface); border-bottom:1px solid var(--tb-border); padding:56px 0 0; }
.tb-head__top { display:flex; gap:32px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; padding-bottom:32px; }
.tb-head h1 { font-size:clamp(32px,4.6vw,52px); line-height:1.1; max-width:640px; margin-top:12px; }
.tb-head h1 em { font-style:italic; }
.tb-head__sub { font-size:17px; line-height:1.6; max-width:640px; margin:16px 0 0; }
.tb-head__sub a { font-weight:600; }

.tb-search { position:relative; flex:0 1 340px; min-width:240px; }
.tb-search input { width:100%; height:48px; border:1px solid var(--tb-border); border-radius:8px;
  background:var(--tb-ground); padding:0 14px 0 42px; font-family:var(--tb-sans); font-size:15px;
  color:var(--tb-ink); }
.tb-search input::placeholder { color:var(--tb-gray); }
.tb-search input:focus { border-color:var(--tb-teal); box-shadow:var(--tb-ring); outline:none; }
.tb-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke:var(--tb-gray); fill:none; stroke-width:2; pointer-events:none; }

.tb-tabs { display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; margin-bottom:-1px; }
.tb-tabs::-webkit-scrollbar { display:none; }
/* The underline is a box-shadow, not a border. The theme's global button rules
   put a 1px rounded border on every <button>, which re-drew this tab as a
   boxed pill; `border:0 !important` kills that and the shadow draws the rule
   the design asks for. */
.tb-tab { display:inline-flex; align-items:center; gap:8px; padding:14px 16px; font-size:15px;
  font-weight:500; color:var(--tb-mid); white-space:nowrap; border:0 !important;
  border-radius:0 !important; background:none; cursor:pointer;
  font-family:var(--tb-sans); min-height:44px; box-shadow:none; }
.tb-tab:hover { color:var(--tb-ink); }
.tb-tab.is-on { font-weight:600; color:var(--tb-ink);
  box-shadow:inset 0 -2px 0 0 var(--tb-teal); }
.tb-tab b { font-size:12px; font-weight:600; color:var(--tb-gray); background:var(--tb-ground);
  border-radius:999px; padding:2px 8px; }
.tb-tab.is-on b { background:var(--tb-teal-light); }

/* ── featured ──────────────────────────────────────────────────────────── */
.tb-feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:24px; padding:56px 0 24px; }
.tb-feat__lead { grid-column:span 2; }
@media (max-width:860px){ .tb-feat__lead { grid-column:span 1; } }
.tb-feat__side { display:flex; flex-direction:column; gap:24px; }

.tb-card { display:block; }
.tb-card img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:14px;
  border:1px solid var(--tb-border); display:block;
  transition:transform .2s var(--tb-ease); background:var(--tb-surface); }
.tb-feat__lead img { aspect-ratio:16/9; }
.tb-card:hover img { transform:translateY(-2px); box-shadow:var(--tb-shadow); }
.tb-card h2,.tb-card h3 { transition:color .12s var(--tb-ease); }
.tb-card:hover h2,.tb-card:hover h3 { color:var(--tb-teal-dark); }
.tb-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px;
  color:var(--tb-gray); margin:14px 0 8px; }
.tb-meta__aud { color:var(--tb-teal-dark); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.tb-guest { font-size:12px; font-weight:600; color:var(--tb-mid); border:1px solid var(--tb-border);
  border-radius:999px; padding:1px 8px; }
.tb-feat__lead h2 { font-size:clamp(26px,3vw,36px); line-height:1.15; }
.tb-feat__side h3 { font-size:22px; line-height:1.25; }
.tb-excerpt { font-size:16px; line-height:1.6; color:var(--tb-mid); margin:10px 0 0; max-width:640px; }

/* ── research panel ────────────────────────────────────────────────────── */
.tb-research { display:flex; gap:32px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; background:var(--tb-teal-light); border-radius:14px; padding:32px 36px;
  transition:transform .2s var(--tb-ease),box-shadow .2s var(--tb-ease); }
.tb-research:hover { transform:translateY(-2px); box-shadow:var(--tb-shadow); }
.tb-research h2 { font-size:28px; line-height:1.2; margin:10px 0 8px; }
.tb-research p { font-size:15px; line-height:1.6; margin:0; max-width:52ch; }
.tb-research__stats { display:flex; gap:28px; align-items:flex-end; }
.tb-research__stats b { display:block; font-family:var(--tb-display); font-size:40px; line-height:1;
  color:var(--tb-ink); font-variant-numeric:tabular-nums; }
.tb-research__stats b.is-muted { color:var(--tb-gray); }
.tb-research__stats span { display:block; font-size:12px; color:var(--tb-mid); margin-top:6px; }

/* ── list ──────────────────────────────────────────────────────────────── */
.tb-list { padding:40px 0 80px; }
.tb-listhead { display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; border-bottom:1px solid var(--tb-border); padding-bottom:16px; margin-bottom:32px; }
.tb-listhead h2 { font-size:28px; }
.tb-chips { display:flex; gap:8px; flex-wrap:wrap; }
.tb-chip { font-family:var(--tb-sans); font-size:13px; font-weight:500; padding:6px 12px;
  border-radius:999px !important; border:1px solid var(--tb-border) !important;
  background:var(--tb-ground); box-shadow:none;
  color:var(--tb-mid); cursor:pointer; transition:all .12s var(--tb-ease); min-height:32px; }
.tb-chip:hover { border-color:var(--tb-muted); color:var(--tb-ink); }
.tb-chip.is-on { background:var(--tb-teal); border-color:var(--tb-teal) !important; color:#fff; }

.tb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  row-gap:40px; column-gap:24px; }
.tb-grid h3 { font-size:22px; line-height:1.25; }
.tb-grid .tb-excerpt { font-size:15px; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; }

.tb-more { text-align:center; margin-top:48px; }
.tb-more__count { font-size:13px; color:var(--tb-gray); margin-bottom:12px; }
.tb-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--tb-sans); font-size:15px; font-weight:600; border-radius:8px;
  padding:11px 24px; min-height:44px; cursor:pointer; border:1px solid var(--tb-teal);
  background:transparent; color:var(--tb-teal-dark); transition:all .15s var(--tb-ease); }
.tb-btn:hover { background:var(--tb-teal); color:#fff; }
.tb-btn--solid { background:var(--tb-teal); border-color:var(--tb-teal); color:#fff; }
.tb-btn--solid:hover { background:var(--tb-teal-dark); border-color:var(--tb-teal-dark); color:#fff; }
.tb-empty { text-align:center; padding:56px 0; }
.tb-empty h3 { font-size:24px; margin-bottom:12px; }

/* ── contributor + newsletter ──────────────────────────────────────────── */
.tb-panels { background:var(--tb-surface); border-top:1px solid var(--tb-border); padding:64px 0; }
.tb-panels__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:24px; }
.tb-panel { background:var(--tb-ground); border:1px solid var(--tb-border); border-radius:14px; padding:32px; }
.tb-panel h2 { font-size:28px; line-height:1.2; margin:10px 0 12px; }
.tb-panel p { font-size:15px; line-height:1.65; margin:0 0 18px; }
.tb-audchips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.tb-audchips span { font-size:13px; background:var(--tb-surface); border-radius:999px; padding:6px 12px; color:var(--tb-mid); }
.tb-panel__cta { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.tb-form { display:flex; gap:10px; flex-wrap:wrap; }
.tb-form input[type=email] { flex:1 1 220px; height:48px; border:1px solid var(--tb-border);
  border-radius:8px; padding:0 14px; font-family:var(--tb-sans); font-size:15px; color:var(--tb-ink); }
.tb-form input[type=email]:focus { border-color:var(--tb-teal); box-shadow:var(--tb-ring); outline:none; }
.tb-form .tb-btn { height:48px; }
.tb-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tb-note { font-size:14px; line-height:1.55; margin-top:14px; padding:12px 14px; border-radius:8px;
  background:var(--tb-surface); color:var(--tb-mid); }
.tb-note--ok { background:var(--tb-teal-light); color:var(--tb-ink); }

/* ── single post ───────────────────────────────────────────────────────── */
.tb-post { padding:40px 0 0; }
.tb-post__head { max-width:760px; margin:0 auto; }
.tb-crumb { font-size:13px; color:var(--tb-gray); margin-bottom:14px; }
.tb-post h1 { font-size:clamp(30px,4.6vw,52px); line-height:1.1; }
.tb-dek { font-size:20px; line-height:1.55; color:var(--tb-mid); margin:18px 0 0; }
.tb-byline { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--tb-border); border-bottom:1px solid var(--tb-border);
  padding:16px 0; margin-top:28px; }
.tb-avatar { width:40px; height:40px; border-radius:50%; background:var(--tb-teal-light);
  display:flex; align-items:center; justify-content:center; font-family:var(--tb-display);
  font-size:18px; color:var(--tb-teal-dark); flex:none; overflow:hidden; }
.tb-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.tb-byline__who { flex:1 1 auto; min-width:0; }
.tb-byline__who b { display:block; font-size:14px; font-weight:600; color:var(--tb-ink); }
.tb-byline__who span { font-size:13px; color:var(--tb-gray); }
.tb-copy { background:none; border:0; font-family:var(--tb-sans); font-size:13px; font-weight:600;
  color:var(--tb-teal-dark); cursor:pointer; padding:8px; min-height:44px; }
.tb-copy:hover { color:var(--tb-teal); }

.tb-hero { max-width:1100px; margin:32px auto 0; }
.tb-hero img { width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:14px; display:block; }

.tb-body { max-width:680px; margin:0 auto; padding:40px 0 64px; }
.tb-body p { font-size:18px; line-height:1.75; margin:0 0 20px; }
.tb-body h2 { font-size:30px; line-height:1.25; margin:40px 0 16px; }
.tb-body h3 { font-size:21px; margin:28px 0 10px; }
.tb-body ul,.tb-body ol { font-size:18px; line-height:1.75; margin:0 0 20px; padding-left:22px; }
.tb-body li { margin-bottom:8px; }
.tb-body img { max-width:100%; height:auto; border-radius:14px; }
.tb-body blockquote { margin:28px 0; }
.tb-lede { font-size:20px; line-height:1.6; color:var(--tb-mid); }

/* body components */
.tb-rcard { display:block; border:1px solid var(--tb-border); border-radius:14px; padding:24px;
  margin:28px 0; transition:border-color .2s var(--tb-ease); }
.tb-rcard:hover { border-color:var(--tb-teal); }
.tb-rcard__top { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.tb-rcard__top span:last-child { font-size:12px; color:var(--tb-gray); }
.tb-rcard__finding { font-size:17px; font-weight:600; color:var(--tb-ink); margin-bottom:14px; }
.tb-rbar { display:grid; grid-template-columns:minmax(90px,30%) 1fr auto; gap:12px; align-items:center;
  font-size:13px; margin-bottom:8px; }
.tb-rbar__t { height:10px; background:var(--tb-surface); border-radius:3px; overflow:hidden; }
.tb-rbar__f { height:100%; border-radius:3px; background:var(--tb-muted); }
.tb-rbar__f.is-lead { background:var(--tb-teal); }
.tb-rcard__foot { font-size:13px; color:var(--tb-teal-dark); font-weight:600; margin-top:14px; }

.tb-steps { background:var(--tb-surface); border-radius:14px; padding:20px; margin:28px 0;
  display:flex; flex-direction:column; gap:18px; }
.tb-step { display:flex; gap:14px; align-items:flex-start; }
.tb-step__n { width:44px; height:44px; border-radius:10px; background:var(--tb-teal-light);
  display:flex; align-items:center; justify-content:center; font-family:var(--tb-display);
  font-size:22px; color:var(--tb-teal-dark); flex:none; }
.tb-step b { display:block; font-size:17px; font-weight:600; color:var(--tb-ink); margin-bottom:4px; }
.tb-step p { font-size:16px; line-height:1.6; margin:0; }

.tb-quote { font-family:var(--tb-display); font-size:28px; line-height:1.3; color:var(--tb-ink);
  margin:32px 0; }
.tb-quote cite { display:block; font-family:var(--tb-sans); font-size:14px; font-style:normal;
  color:var(--tb-gray); margin-top:12px; }
.tb-practice { font-size:14px; color:var(--tb-gray); border-top:1px solid var(--tb-border);
  padding-top:14px; margin-top:32px; }

.tb-keep { background:var(--tb-surface); padding:64px 0 80px; }
.tb-keep__head { display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:28px; }
.tb-keep h2 { font-size:30px; }
.tb-keep .tb-grid { row-gap:32px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .tb-in { padding-left:20px; padding-right:20px; }
  .tb-head { padding-top:40px; }
  .tb-feat { padding-top:32px; }
  .tb-list { padding:32px 0 56px; }
  .tb-panels { padding:48px 0; }
  .tb-panel { padding:24px; }
  .tb-research { padding:24px; }
  .tb-research__stats { gap:20px; }
  .tb-body p,.tb-body ul,.tb-body ol { font-size:17px; }
  .tb-keep { padding:48px 0 56px; }
  .tb-form .tb-btn { width:100%; }
}
@media (max-width:480px) { .tb-in { padding-left:16px; padding-right:16px; } }

@media (prefers-reduced-motion: reduce) {
  .tb-page *,.tb-card img { transition:none !important; }
  .tb-card:hover img,.tb-research:hover { transform:none; }
}

@media print {
  .tb-head,.tb-panels,.tb-keep,.tb-copy,.tb-chips,.tb-tabs,.tb-more { display:none; }
  .tb-body { max-width:none; }
}