/* TehranWeb Articles Hub v4 — final approved page
 * Visual system: dark navy, calm contrast, cyan/gold accents.
 * Performance: transform/opacity animations only, content-visibility below fold.
 */
:root {
  --tw-blog-bg:#03111b;
  --tw-blog-bg-2:#061925;
  --tw-blog-panel:#071b29;
  --tw-blog-panel-2:#0a2132;
  --tw-blog-panel-3:#0d283a;
  --tw-blog-line:rgba(62,171,214,.25);
  --tw-blog-line-soft:rgba(117,170,199,.13);
  --tw-blog-text:#f6f9fc;
  --tw-blog-muted:#a6b7c5;
  --tw-blog-muted-2:#7f95a7;
  --tw-blog-gold:#f6bd3e;
  --tw-blog-gold-2:#ffd867;
  --tw-blog-cyan:#15c9e8;
  --tw-blog-cyan-2:#77ebfa;
  --tw-blog-red:#ff5064;
  --tw-blog-radius:.88rem;
  --tw-blog-radius-lg:1.18rem;
  --tw-blog-shadow:0 18px 48px rgba(0,0,0,.24);
}

.tw-articles-hub {
  position:relative;
  isolation:isolate;
  overflow:clip;
  min-block-size:70vh;
  padding-block:1rem 2rem;
  color:var(--tw-blog-text);
  background:
    radial-gradient(circle at 80% 22%, rgba(18,116,154,.08), transparent 30rem),
    linear-gradient(180deg,#03111b 0,#051824 48rem,#03111b 100%);
}
.tw-articles-hub::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(22,198,230,.02),transparent 24%,transparent 76%,rgba(242,189,67,.018));
}
.tw-articles-hub .tw-shell { inline-size:min(calc(100% - 2.25rem),88rem); margin-inline:auto; }
.tw-articles-hub * { min-inline-size:0; }
.tw-articles-hub img { display:block; max-inline-size:100%; }
.tw-articles-hub a { color:inherit; text-decoration:none; }
.tw-articles-hub button,.tw-articles-hub input,.tw-articles-hub select { font:inherit; }
.tw-articles-hub svg { display:block; }
.tw-articles-section,.tw-articles-stats { content-visibility:auto; contain-intrinsic-size:800px; }

/* reveal animation */
[data-reveal] { opacity:0; transform:translate3d(0,18px,0); transition:opacity .65s cubic-bezier(.2,.75,.25,1),transform .65s cubic-bezier(.2,.75,.25,1); }
[data-reveal].is-visible { opacity:1; transform:none; }

/* HERO v4.5 — approved coded composition: copy on the physical left, visual on the physical right. */
.tw-articles-hero { padding-top:.25rem; }
.tw-articles-hero__panel {
  position:relative;
  min-block-size:20.2rem;
  overflow:hidden;
  border:1px solid rgba(31,182,225,.46);
  border-radius:1rem;
  background:#041522;
  box-shadow:0 18px 46px rgba(0,0,0,.22);
}
.tw-articles-hero__visual {
  position:absolute;
  top:0;
  right:-18px;
  bottom:-1px;
  width:calc(66% + 18px);
  overflow:hidden;
  background:#071925;
}
.tw-articles-hero__visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:56% 50%;
  filter:saturate(.98) contrast(1.02) brightness(.98);
  transform:scale(1.055);
  transform-origin:center right;
  animation:twHeroScene 16s ease-in-out infinite alternate;
}
.tw-articles-hero__panel::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,#041522 0%,#041522 28%,rgba(4,21,34,.99) 37%,rgba(4,21,34,.92) 45%,rgba(4,21,34,.56) 54%,rgba(4,21,34,.16) 64%,rgba(4,21,34,0) 75%),
    linear-gradient(0deg,rgba(3,15,25,.1),transparent 42%);
}
.tw-articles-hero__content {
  position:relative;
  z-index:3;
  width:54%;
  min-block-size:20.2rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  margin-right:auto;
  margin-left:0;
  padding:1.75rem 1.8rem 1.85rem 2.25rem;
  direction:rtl;
  text-align:right;
}
.tw-articles-hero__eyebrow {
  display:flex;
  align-items:center;
  gap:.68rem;
  margin:0 0 .58rem;
  color:#f5f7f8;
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.17em;
  direction:ltr;
}
.tw-articles-hero__eyebrow::after {
  content:"";
  width:4rem;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.45),transparent);
}
.tw-articles-hero__title {
  max-width:39rem;
  margin:0;
  color:#fff;
  font-size:clamp(2rem,3vw,3.15rem);
  line-height:1.18;
  font-weight:950;
  letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 4px 26px rgba(0,0,0,.26);
}
.tw-articles-hero__title-accent { color:var(--tw-blog-gold-2); }
.tw-articles-hero__highlight {
  max-width:39rem;
  margin:.68rem 0 0;
  color:var(--tw-blog-gold-2);
  font-size:clamp(.95rem,1.35vw,1.13rem);
  line-height:1.78;
  font-weight:900;
}
.tw-articles-hero__description {
  max-width:36rem;
  margin:.45rem 0 0;
  color:#c3d0da;
  font-size:.84rem;
  line-height:1.9;
}
.tw-articles-hero__beam {
  position:absolute;
  z-index:4;
  width:5.2rem;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--tw-blog-gold-2),transparent);
  box-shadow:0 0 14px rgba(255,216,103,.72);
  opacity:.88;
  pointer-events:none;
  animation:twBeam 6.5s ease-in-out infinite;
}
.tw-articles-hero__beam--top { top:-1px; right:8%; }
.tw-articles-hero__beam--bottom { bottom:-1px; right:18%; animation-delay:-3.2s; }

/* DISCOVERY */
.tw-articles-discovery { padding-top:1rem; }
.tw-article-search {
  position:relative;
  z-index:25;
  padding:.82rem .9rem .72rem;
  border:1px solid var(--tw-blog-line-soft);
  border-radius:1.05rem;
  background:linear-gradient(180deg,rgba(7,27,41,.98),rgba(5,22,34,.98));
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.tw-article-search__row { display:grid; grid-template-columns:9.4rem minmax(0,1fr); gap:.75rem; direction:ltr; }
.tw-article-search__topic-trigger {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-block-size:3.2rem;
  border:1px solid rgba(116,176,205,.38);
  border-radius:.78rem;
  background:#0a2030;
  color:#f1f6f9;
  font-weight:850;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.tw-article-search__topic-trigger:hover { border-color:rgba(242,189,67,.62); background:#0c2637; transform:translateY(-1px); }
.tw-article-search__topic-trigger svg { inline-size:1rem; }
.tw-article-search__form {
  display:grid;
  grid-template-columns:minmax(0,1fr) 3.35rem;
  align-items:center;
  gap:.4rem;
  min-block-size:3.2rem;
  padding:.28rem .3rem .28rem 1rem;
  direction:rtl;
  border:1px solid rgba(22,198,230,.33);
  border-radius:.78rem;
  background:#061724;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.tw-article-search__form:focus-within { border-color:rgba(22,198,230,.8); box-shadow:0 0 0 3px rgba(22,198,230,.07),0 0 24px rgba(22,198,230,.06); }
.tw-article-search__form input { min-inline-size:0; inline-size:100%; border:0; outline:0; background:transparent; color:#fff; font-size:.94rem; }
.tw-article-search__form input::placeholder { color:#778e9f; }
.tw-article-search__form button {
  display:grid;
  place-items:center;
  inline-size:2.8rem;
  block-size:2.8rem;
  border:0;
  border-radius:.68rem;
  background:linear-gradient(135deg,#ffd96d,#eeb432);
  color:#10161b;
  box-shadow:0 7px 20px rgba(242,189,67,.18);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.tw-article-search__form button:hover { transform:translateY(-1px) scale(1.02); box-shadow:0 10px 26px rgba(242,189,67,.25); }
.tw-article-search__form button svg { inline-size:1.3rem; }
.tw-article-search__popular { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:.45rem; margin-top:.65rem; color:var(--tw-blog-muted-2); font-size:.72rem; }
.tw-article-search__popular strong { color:#c9d5dd; margin-inline-end:.25rem; }
.tw-article-search__popular button { padding:.26rem .66rem; border:1px solid var(--tw-blog-line-soft); border-radius:999px; background:#071a28; color:#aebeca; cursor:pointer; transition:border-color .18s ease,color .18s ease,transform .18s ease; }
.tw-article-search__popular button:hover { border-color:rgba(22,198,230,.38); color:#fff; transform:translateY(-1px); }
.tw-article-search__panel {
  position:absolute;
  inset-inline:.9rem;
  inset-block-start:calc(100% - .15rem);
  z-index:80;
  max-block-size:min(31rem,68vh);
  overflow:auto;
  padding:.55rem;
  border:1px solid rgba(22,198,230,.28);
  border-radius:.9rem;
  background:#04131f;
  box-shadow:0 28px 70px rgba(0,0,0,.48);
}
.tw-article-search__panel[hidden] { display:none; }
.tw-article-search__status { padding:.7rem .8rem; color:var(--tw-blog-muted); font-size:.78rem; }
.tw-article-search__results { display:grid; gap:.25rem; }
.tw-live-result { display:grid; grid-template-columns:5rem minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.5rem; border:1px solid transparent; border-radius:.7rem; transition:background .18s ease,border-color .18s ease; }
.tw-live-result:hover,.tw-live-result.is-active { background:rgba(22,198,230,.055); border-color:rgba(22,198,230,.2); }
.tw-live-result__image,.tw-live-result__fallback { inline-size:5rem; block-size:3.7rem; object-fit:cover; border-radius:.58rem; background:#0b2638; }
.tw-live-result__fallback { display:grid; place-items:center; color:var(--tw-blog-gold-2); font-weight:950; }
.tw-live-result__body { min-inline-size:0; }
.tw-live-result__title { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:850; color:#fff; }
.tw-live-result__meta { display:flex; gap:.55rem; margin-top:.25rem; color:var(--tw-blog-muted-2); font-size:.7rem; }
.tw-live-result__arrow { color:var(--tw-blog-cyan); }
.tw-article-search__all { display:flex; justify-content:center; margin-top:.3rem; padding:.6rem; color:var(--tw-blog-cyan-2); border-top:1px solid var(--tw-blog-line-soft); font-size:.76rem; font-weight:850; }

/* HORIZONTAL TOPIC BAR — entire bar visible on desktop */
.tw-topic-rail {
  display:grid;
  grid-template-columns:minmax(6.1rem,.72fr) repeat(7,minmax(0,1fr));
  gap:0;
  margin-top:.8rem;
  overflow:hidden;
  border:1px solid rgba(55,165,207,.27);
  border-radius:.82rem;
  background:#071a28;
}
.tw-topic-rail button { min-inline-size:0; }
.tw-topic-rail__filter,.tw-topic-rail__item {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  min-block-size:3.2rem;
  padding:.55rem .5rem;
  border:0;
  border-inline-end:1px solid rgba(65,166,207,.22);
  background:transparent;
  color:#edf4f7;
  cursor:pointer;
  font-size:.82rem;
  font-weight:850;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.tw-topic-rail > :last-child { border-inline-end:0; }
.tw-topic-rail__filter { color:#fff; background:rgba(8,31,47,.9); }
.tw-topic-rail__filter svg { inline-size:1.25rem; color:var(--tw-blog-cyan); }
.tw-topic-rail__item.is-active { color:var(--tw-blog-gold-2); background:linear-gradient(180deg,rgba(242,189,67,.11),rgba(242,189,67,.025)); box-shadow:inset 0 0 0 1px rgba(242,189,67,.78),0 0 22px rgba(242,189,67,.07); }
.tw-topic-rail__item:hover,.tw-topic-rail__filter:hover { background:rgba(18,64,86,.35); }
.tw-topic-rail__icon { display:grid; place-items:center; inline-size:1.35rem; block-size:1.35rem; color:var(--tw-blog-cyan); }
.tw-topic-rail__icon svg { inline-size:100%; block-size:100%; }
.tw-topic-rail__item.is-active .tw-topic-rail__icon { color:var(--tw-blog-gold-2); }

/* ADVANCED FILTER DRAWER */
.tw-advanced-filters { margin-top:.72rem; padding:.9rem; border:1px solid rgba(22,198,230,.24); border-radius:.9rem; background:#071a28; box-shadow:0 16px 40px rgba(0,0,0,.2); }
.tw-advanced-filters[hidden] { display:none; }
.tw-advanced-filters.is-opening { animation:twFilterOpen .28s ease both; }
.tw-advanced-filters__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--tw-blog-line-soft); }
.tw-advanced-filters__head strong { display:block; font-size:.95rem; }
.tw-advanced-filters__head span { display:block; margin-top:.2rem; color:var(--tw-blog-muted-2); font-size:.7rem; }
.tw-advanced-filters__head button { inline-size:2rem; block-size:2rem; border:1px solid var(--tw-blog-line); border-radius:.55rem; background:#071725; color:#cbd7df; cursor:pointer; font-size:1.2rem; }
.tw-articles-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:.65rem; align-items:end; padding-top:.8rem; }
.tw-articles-filters label { display:grid; gap:.32rem; }
.tw-articles-filters label > span { color:#9fb0bd; font-size:.68rem; font-weight:750; }
.tw-articles-filters select { inline-size:100%; min-block-size:2.65rem; border:1px solid var(--tw-blog-line); border-radius:.62rem; outline:0; background:#061724; color:#edf4f7; padding-inline:.7rem; }
.tw-articles-filters__reset { min-block-size:2.65rem; padding-inline:.85rem; border:1px solid rgba(242,189,67,.36); border-radius:.62rem; background:rgba(242,189,67,.08); color:var(--tw-blog-gold-2); cursor:pointer; font-weight:850; }

/* SECTION / FEATURE + NEWS */
.tw-articles-section { padding-top:1rem; }
.tw-articles-lead-grid { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(18rem,.88fr); gap:.8rem; direction:ltr; }
.tw-articles-lead-grid > * { direction:rtl; }
.tw-article-card { position:relative; overflow:hidden; border:1px solid var(--tw-blog-line-soft); border-radius:.86rem; background:#071a28; box-shadow:0 8px 26px rgba(0,0,0,.12); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.tw-article-card:hover { transform:translateY(-3px); border-color:rgba(22,198,230,.3); box-shadow:0 16px 38px rgba(0,0,0,.2); }
.tw-article-card__media { position:relative; display:block; overflow:hidden; background:#0a2232; }
.tw-article-card__media img { inline-size:100%; block-size:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease; }
.tw-article-card:hover .tw-article-card__media img { transform:scale(1.035); filter:saturate(1.05); }
.tw-article-card__placeholder { display:grid; place-items:center; inline-size:100%; block-size:100%; min-block-size:10rem; color:var(--tw-blog-gold-2); background:linear-gradient(135deg,#0c2638,#061826); font-weight:950; }
.tw-article-card--feature { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(18rem,.88fr); min-block-size:19.8rem; direction:ltr; }
.tw-article-card--feature .tw-article-card__body { direction:rtl; text-align:right; }
.tw-article-card--feature .tw-article-card__media { min-block-size:19.8rem; }
.tw-article-card--feature .tw-article-card__body { display:flex; flex-direction:column; justify-content:center; padding:1.5rem; }
.tw-article-card__featured-badge { position:absolute; inset-block-start:.8rem; inset-inline-start:.8rem; z-index:2; display:inline-flex; align-items:center; gap:.35rem; min-block-size:2rem; padding-inline:.72rem; border:1px solid rgba(242,189,67,.65); border-radius:.6rem; background:rgba(53,40,8,.78); color:var(--tw-blog-gold-2); box-shadow:0 0 18px rgba(242,189,67,.11); font-size:.74rem; font-weight:900; }
.tw-article-card__progress { position:absolute; inset-inline:0; inset-block-end:0; block-size:3px; background:rgba(255,255,255,.12); }
.tw-article-card__progress > span { display:block; block-size:100%; background:linear-gradient(90deg,var(--tw-blog-cyan),var(--tw-blog-gold)); }
.tw-article-card__body { padding:1rem; }
.tw-article-card__meta { display:flex; flex-wrap:wrap; gap:.38rem; margin-bottom:.6rem; }
.tw-article-card__category,.tw-article-card__type { display:inline-flex; align-items:center; min-block-size:1.55rem; padding-inline:.55rem; border-radius:999px; font-size:.62rem; font-weight:850; }
.tw-article-card__category { color:#7ceaf8; background:rgba(22,198,230,.1); border:1px solid rgba(22,198,230,.17); }
.tw-article-card__type { color:#d8e4eb; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.tw-article-card__title { margin:0; color:#fff; font-size:1.04rem; line-height:1.65; font-weight:900; }
.tw-article-card--feature .tw-article-card__title { font-size:clamp(1.45rem,2.2vw,2rem); line-height:1.55; }
.tw-article-card__excerpt { margin:.55rem 0 0; color:var(--tw-blog-muted); font-size:.78rem; line-height:1.9; }
.tw-article-card--feature .tw-article-card__excerpt { font-size:.88rem; line-height:2; }
.tw-article-card__author { display:flex; align-items:center; gap:.55rem; margin-top:.9rem; }
.tw-article-card__avatar { inline-size:2rem; block-size:2rem; border-radius:50%; }
.tw-article-card__author span { display:grid; }
.tw-article-card__author strong { font-size:.72rem; }
.tw-article-card__author small { color:var(--tw-blog-muted-2); font-size:.6rem; }
.tw-article-card__footer { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; margin-top:auto; padding-top:.75rem; color:#98aab7; font-size:.66rem; }
.tw-article-card__reading { display:inline-flex; align-items:center; gap:.28rem; }
.tw-article-card__reading svg { inline-size:1rem; }
.tw-article-card__rating { color:var(--tw-blog-gold-2); }
.tw-article-card__read-button { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; inline-size:max-content; min-block-size:2.75rem; margin-top:.9rem; padding-inline:1.2rem; border-radius:.7rem; background:linear-gradient(135deg,#ffda6f,#efb42f); color:#10161a; font-weight:950; box-shadow:0 9px 25px rgba(242,189,67,.17); }
.tw-article-card__read-button::after,.tw-smart-filter__button::after,.tw-community-card__content > a::after { content:""; position:absolute; inset-block:-80%; inline-size:1.2rem; background:rgba(255,255,255,.35); transform:skewX(-18deg) translateX(-10rem); transition:transform .65s ease; }
.tw-article-card__read-button:hover::after,.tw-smart-filter__button:hover::after,.tw-community-card__content > a:hover::after { transform:skewX(-18deg) translateX(16rem); }

.tw-news-panel { overflow:hidden; border:1px solid var(--tw-blog-line-soft); border-radius:.86rem; background:#071a28; }
.tw-news-panel__head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.85rem 1rem; border-bottom:1px solid var(--tw-blog-line-soft); }
.tw-news-panel__head > div { display:flex; align-items:center; gap:.5rem; }
.tw-news-panel__head h2 { margin:0; font-size:1.2rem; }
.tw-news-panel__head a { color:var(--tw-blog-cyan-2); font-size:.68rem; font-weight:850; }
.tw-news-panel__live-dot { inline-size:.55rem; block-size:.55rem; border-radius:50%; background:var(--tw-blog-gold); box-shadow:0 0 0 0 rgba(242,189,67,.42); animation:twLivePulse 2.1s ease-out infinite; }
.tw-news-panel__list { display:grid; }
.tw-news-item { display:grid; grid-template-columns:4.5rem minmax(0,1fr); align-items:center; gap:.65rem; padding:.58rem .72rem; border-bottom:1px solid var(--tw-blog-line-soft); }
.tw-news-item:last-child { border-bottom:0; }
.tw-news-item__media { inline-size:4.5rem; block-size:3.5rem; overflow:hidden; border-radius:.55rem; background:#0b2638; }
.tw-news-item__media img { inline-size:100%; block-size:100%; object-fit:cover; transition:transform .35s ease; }
.tw-news-item:hover .tw-news-item__media img { transform:scale(1.05); }
.tw-news-item__topline { display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-bottom:.22rem; color:#8ea2b1; font-size:.56rem; }
.tw-news-item__topline span { padding:.08rem .36rem; border:1px solid rgba(255,80,100,.4); border-radius:.3rem; color:#ff8896; background:rgba(255,80,100,.08); }
.tw-news-item h3 { margin:0; font-size:.75rem; line-height:1.65; font-weight:850; }
.tw-news-panel__empty { padding:1rem; color:var(--tw-blog-muted); font-size:.78rem; }

/* LATEST */
.tw-section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.tw-section-head h2 { margin:0; font-size:1.28rem; }
.tw-section-head p { margin:.22rem 0 0; color:var(--tw-blog-muted-2); font-size:.72rem; }
.tw-section-head > a { color:var(--tw-blog-cyan-2); font-size:.72rem; font-weight:850; }
.tw-articles-filter-status { min-block-size:1rem; margin-bottom:.35rem; color:#8ea4b4; font-size:.66rem; }
.tw-articles-grid { display:grid; gap:.78rem; }
.tw-articles-grid--latest { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tw-articles-grid--latest .tw-article-card__media { aspect-ratio:16/9; }
.tw-articles-grid--latest .tw-article-card__title { min-block-size:3.35rem; }
.tw-articles-grid--latest .tw-article-card__excerpt { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.tw-articles-grid.is-loading { opacity:.55; pointer-events:none; }
.tw-articles-load-more-wrap { display:flex; justify-content:center; margin-top:.8rem; }
.tw-articles-load-more { min-block-size:2.65rem; padding-inline:1rem; border:1px solid var(--tw-blog-line); border-radius:.68rem; background:#071a28; color:#dce7ed; cursor:pointer; font-weight:850; }
.tw-articles-load-more:hover { border-color:rgba(22,198,230,.5); color:#fff; }
.tw-articles-load-more[hidden] { display:none; }
.tw-articles-empty { grid-column:1/-1; padding:2rem; border:1px dashed var(--tw-blog-line); border-radius:.8rem; color:var(--tw-blog-muted); text-align:center; }

/* UTILITY TRIO */
.tw-articles-utility__grid { display:grid; grid-template-columns:1.05fr .78fr 1.05fr; gap:.78rem; }
.tw-ai-spotlight,.tw-smart-filter,.tw-community-card { min-block-size:15rem; overflow:hidden; border:1px solid var(--tw-blog-line-soft); border-radius:.88rem; background:#071a28; }
.tw-card-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem 1rem; border-bottom:1px solid var(--tw-blog-line-soft); }
.tw-card-head h2 { margin:0; font-size:1.08rem; }
.tw-card-head a { color:var(--tw-blog-cyan-2); font-size:.66rem; font-weight:850; }
.tw-card-head__icon { color:var(--tw-blog-cyan); }
.tw-ai-spotlight__list { display:grid; }
.tw-ai-row { display:grid; grid-template-columns:4.7rem minmax(0,1fr) 2rem; align-items:center; gap:.7rem; padding:.62rem .72rem; border-bottom:1px solid var(--tw-blog-line-soft); transition:background .18s ease; }
.tw-ai-row:last-child { border-bottom:0; }
.tw-ai-row:hover { background:rgba(22,198,230,.035); }
.tw-ai-row__media { display:grid; place-items:center; inline-size:4.7rem; block-size:3.45rem; overflow:hidden; border-radius:.55rem; background:#0a2637; color:var(--tw-blog-cyan-2); font-weight:900; }
.tw-ai-row__media img { inline-size:100%; block-size:100%; object-fit:cover; }
.tw-ai-row__body { display:grid; gap:.2rem; min-inline-size:0; }
.tw-ai-row__body strong { overflow:hidden; font-size:.72rem; line-height:1.6; white-space:nowrap; text-overflow:ellipsis; }
.tw-ai-row__body small { color:var(--tw-blog-muted-2); font-size:.58rem; }
.tw-ai-row__badge { display:grid; place-items:center; inline-size:1.8rem; block-size:1.8rem; border:1px solid rgba(242,189,67,.35); border-radius:50%; color:var(--tw-blog-gold-2); background:rgba(242,189,67,.06); font-size:.8rem; }

.tw-smart-filter { padding-bottom:.8rem; }
.tw-smart-filter__summary { display:grid; gap:.5rem; padding:.8rem 1rem; }
.tw-smart-filter__summary > div { display:flex; align-items:center; justify-content:space-between; gap:.8rem; min-block-size:2.3rem; padding:.35rem .65rem; border:1px solid var(--tw-blog-line-soft); border-radius:.55rem; background:#061724; }
.tw-smart-filter__summary span { color:#8fa2b0; font-size:.64rem; }
.tw-smart-filter__summary strong { font-size:.67rem; }
.tw-smart-filter__button { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:.45rem; inline-size:calc(100% - 2rem); min-block-size:2.65rem; margin:.15rem 1rem 0; border:0; border-radius:.62rem; background:linear-gradient(135deg,#ffd96b,#eeb334); color:#11181d; cursor:pointer; font-weight:950; }
.tw-smart-filter__button svg { inline-size:1rem; }

.tw-community-card { position:relative; display:grid; align-items:end; min-block-size:15rem; background:#071a28; }
.tw-community-card__visual { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,17,27,.97) 0%,rgba(4,17,27,.45) 55%,rgba(4,17,27,.12) 100%),url('../../images/articles/articles-hero-scene.webp') center/cover no-repeat; filter:saturate(.85) brightness(.78); transform:scale(1.03); }
.tw-community-card__content { position:relative; z-index:2; padding:1rem; }
.tw-community-card__icon { display:grid; place-items:center; inline-size:2.15rem; block-size:2.15rem; margin-bottom:.45rem; border-radius:.65rem; background:linear-gradient(135deg,#ffd96b,#eeb334); color:#111; font-size:1rem; }
.tw-community-card h2 { margin:0; font-size:1.13rem; line-height:1.5; }
.tw-community-card h2 em { color:var(--tw-blog-gold-2); font-style:normal; }
.tw-community-card p { margin:.45rem 0 .75rem; color:#bdcbd5; font-size:.7rem; line-height:1.8; }
.tw-community-card__content > a { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-block-size:2.45rem; padding-inline:1rem; border-radius:.6rem; background:linear-gradient(135deg,#ffd96b,#eeb334); color:#11171c; font-size:.72rem; font-weight:950; }

/* STATS */
.tw-articles-stats { padding-top:1rem; }
.tw-articles-stats__grid { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid rgba(242,189,67,.18); border-radius:.85rem; background:linear-gradient(180deg,#071b29,#061722); }
.tw-articles-stats__grid > div { display:grid; grid-template-columns:auto auto; grid-template-areas:"i n" "i l"; align-items:center; justify-content:center; column-gap:.6rem; min-block-size:5.7rem; border-inline-end:1px solid var(--tw-blog-line-soft); text-align:right; }
.tw-articles-stats__grid > div:last-child { border-inline-end:0; }
.tw-articles-stats__icon { grid-area:i; display:grid; place-items:center; width:2.45rem; height:2.45rem; color:var(--tw-blog-gold-2); text-shadow:0 0 18px rgba(242,189,67,.25); }
.tw-articles-stats__icon svg { width:2rem; height:2rem; }
.tw-articles-stats__grid strong { grid-area:n; font-size:1rem; }
.tw-articles-stats__grid small { grid-area:l; color:var(--tw-blog-muted); font-size:.65rem; }

.tw-articles-mobile-nav { display:none; }

/* TABLET */
@media (max-width:72rem) {
  .tw-articles-hub .tw-shell { inline-size:min(calc(100% - 1.4rem),88rem); }
  .tw-topic-rail { grid-template-columns:minmax(5.6rem,.7fr) repeat(7,minmax(5.9rem,1fr)); overflow-x:auto; scrollbar-width:thin; }
  .tw-articles-grid--latest { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tw-articles-utility__grid { grid-template-columns:1fr 1fr; }
  .tw-community-card { grid-column:1/-1; min-block-size:13rem; }
}

/* MOBILE — priority, hardened for narrow screens */
@media (max-width:47.99rem) {
  .tw-articles-hub { overflow-x:clip; padding-block:.45rem calc(5.25rem + env(safe-area-inset-bottom)); }
  .tw-articles-hub *, .tw-articles-hub *::before, .tw-articles-hub *::after { box-sizing:border-box; }
  .tw-articles-hub img { max-inline-size:100%; }
  .tw-articles-hub .tw-shell { inline-size:calc(100% - .75rem); max-inline-size:42rem; }
  .tw-articles-section,.tw-articles-stats { content-visibility:visible; }

  .tw-articles-hero { padding-top:0; }
  .tw-articles-hero__panel {
    min-block-size:22rem;
    border-radius:.92rem;
  }
  .tw-articles-hero__visual {
    top:0;
    right:0;
    bottom:auto;
    width:100%;
    height:11.5rem;
  }
  .tw-articles-hero__visual img {
    width:100%;
    height:100%;
    object-position:61% 50%;
    transform:scale(1.015);
  }
  .tw-articles-hero__panel::before {
    z-index:2;
    background:linear-gradient(0deg,#041522 0%,#041522 38%,rgba(4,21,34,.95) 48%,rgba(4,21,34,.42) 67%,rgba(4,21,34,.05) 88%);
  }
  .tw-articles-hero__content {
    width:100%;
    min-block-size:22rem;
    align-items:center;
    justify-content:flex-end;
    margin:0;
    padding:10.5rem .9rem 1rem;
    text-align:center;
  }
  .tw-articles-hero__eyebrow { margin-bottom:.3rem; font-size:.53rem; letter-spacing:.14em; }
  .tw-articles-hero__eyebrow::after { width:2.1rem; }
  .tw-articles-hero__title { max-width:21rem; font-size:1.48rem; line-height:1.38; letter-spacing:-.025em; }
  .tw-articles-hero__highlight { max-width:22rem; margin-top:.3rem; font-size:.8rem; line-height:1.68; }
  .tw-articles-hero__description { max-width:24rem; margin-top:.26rem; font-size:.67rem; line-height:1.72; }
  .tw-articles-hero__beam { width:3rem; }

  .tw-articles-discovery { padding-top:.55rem; }
  .tw-article-search { padding:.5rem; border-radius:.82rem; }
  .tw-article-search__row { grid-template-columns:1fr; gap:.42rem; }
  .tw-article-search__topic-trigger { display:none; }
  .tw-article-search__form { min-block-size:3rem; padding-inline:.32rem .55rem; border-radius:.68rem; }
  .tw-article-search__form input { min-inline-size:0; font-size:.77rem; }
  .tw-article-search__form button { inline-size:2.48rem; block-size:2.48rem; }
  .tw-article-search__popular {
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    padding-block:.08rem .15rem;
    gap:.35rem;
    white-space:nowrap;
  }
  .tw-article-search__popular::-webkit-scrollbar { display:none; }
  .tw-article-search__popular strong { flex:0 0 auto; font-size:.62rem; }
  .tw-article-search__popular button { flex:0 0 auto; font-size:.6rem; }
  .tw-article-search__panel { inset-inline:.5rem; max-block-size:55vh; }
  .tw-live-result { grid-template-columns:4.2rem minmax(0,1fr); }
  .tw-live-result__image,.tw-live-result__fallback { inline-size:4.2rem; block-size:3.1rem; }
  .tw-live-result__arrow { display:none; }
  .tw-live-result__title { font-size:.76rem; }

  .tw-topic-rail {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-flow:row;
    gap:.38rem;
    overflow:visible;
    padding:.43rem;
    border-radius:.8rem;
  }
  .tw-topic-rail__filter,.tw-topic-rail__item {
    min-inline-size:0;
    min-block-size:4rem;
    flex-direction:column;
    gap:.2rem;
    padding:.32rem .16rem;
    border:1px solid var(--tw-blog-line-soft);
    border-radius:.66rem;
    font-size:.58rem;
    line-height:1.25;
    text-align:center;
    white-space:normal;
  }
  .tw-topic-rail__filter { position:static; z-index:auto; background:#092132; box-shadow:0 0 0 1px rgba(242,189,67,.16); }
  .tw-topic-rail__filter svg,.tw-topic-rail__icon { inline-size:1.22rem; block-size:1.22rem; }
  .tw-topic-rail__item.is-active { box-shadow:inset 0 0 0 1px rgba(242,189,67,.65); }

  .tw-advanced-filters {
    position:fixed;
    inset-inline:.45rem;
    inset-block:auto calc(4.75rem + env(safe-area-inset-bottom));
    z-index:140;
    max-block-size:min(70vh,34rem);
    overflow:auto;
    margin:0;
    padding:.72rem;
    border-radius:1rem;
    box-shadow:0 28px 70px rgba(0,0,0,.55);
  }
  .tw-articles-filters { grid-template-columns:1fr; }

  .tw-articles-section { padding-top:.65rem; }
  .tw-articles-lead-grid { grid-template-columns:1fr; gap:.58rem; }
  .tw-articles-lead-grid > * { min-inline-size:0; }
  .tw-article-card--feature { display:block; min-block-size:0; }
  .tw-article-card--feature .tw-article-card__media { min-block-size:0; aspect-ratio:16/10; }
  .tw-article-card--feature .tw-article-card__body { padding:.82rem; }
  .tw-article-card--feature .tw-article-card__title { font-size:1.08rem; line-height:1.62; }
  .tw-article-card--feature .tw-article-card__excerpt { display:-webkit-box; overflow:hidden; font-size:.71rem; line-height:1.8; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .tw-article-card__author { display:none; }
  .tw-article-card__read-button { inline-size:100%; min-block-size:2.5rem; margin-top:.6rem; }

  .tw-news-panel { min-inline-size:0; }
  .tw-news-panel__head { padding:.68rem .75rem; }
  .tw-news-panel__head h2 { font-size:.98rem; }
  .tw-news-item { grid-template-columns:4.25rem minmax(0,1fr); padding:.52rem .62rem; }
  .tw-news-item__media { inline-size:4.25rem; block-size:3.15rem; }
  .tw-news-item h3 { font-size:.69rem; line-height:1.55; }

  .tw-section-head { align-items:center; min-inline-size:0; }
  .tw-section-head h2 { font-size:1.03rem; }
  .tw-section-head p { display:none; }
  .tw-section-head > a { flex:0 0 auto; font-size:.61rem; }
  .tw-articles-grid--latest { grid-template-columns:1fr; gap:.48rem; }
  .tw-articles-grid--latest .tw-article-card { min-inline-size:0; display:grid; grid-template-columns:7rem minmax(0,1fr); min-block-size:6.85rem; }
  .tw-articles-grid--latest .tw-article-card__media { block-size:100%; min-block-size:6.85rem; aspect-ratio:auto; }
  .tw-articles-grid--latest .tw-article-card__body { min-inline-size:0; display:flex; flex-direction:column; padding:.56rem .62rem; }
  .tw-articles-grid--latest .tw-article-card__meta { margin-bottom:.22rem; }
  .tw-articles-grid--latest .tw-article-card__category { min-block-size:1.25rem; font-size:.52rem; }
  .tw-articles-grid--latest .tw-article-card__type,.tw-articles-grid--latest .tw-article-card__excerpt { display:none; }
  .tw-articles-grid--latest .tw-article-card__title { min-block-size:0; display:-webkit-box; overflow:hidden; font-size:.76rem; line-height:1.58; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .tw-articles-grid--latest .tw-article-card__footer { gap:.35rem; margin-top:auto; padding-top:.28rem; font-size:.54rem; }
  .tw-articles-grid--latest .tw-article-card__footer time { display:none; }

  .tw-articles-utility__grid { grid-template-columns:1fr; gap:.52rem; }
  .tw-ai-spotlight,.tw-smart-filter,.tw-community-card { min-block-size:0; min-inline-size:0; }
  .tw-community-card { min-block-size:12rem; }
  .tw-articles-stats__grid { grid-template-columns:1fr 1fr; }
  .tw-articles-stats__grid > div { min-block-size:4.65rem; border-bottom:1px solid var(--tw-blog-line-soft); }
  .tw-articles-stats__grid > div:nth-child(2n) { border-inline-end:0; }
  .tw-articles-stats__icon { width:2.1rem; height:2.1rem; }
  .tw-articles-stats__icon svg { width:1.72rem; height:1.72rem; }

  .tw-articles-mobile-nav {
    position:fixed;
    inset-inline:.4rem;
    inset-block-end:max(.35rem,env(safe-area-inset-bottom));
    z-index:120;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-block-size:4rem;
    padding:.3rem;
    border:1px solid rgba(89,171,208,.28);
    border-radius:1rem;
    background:rgba(3,16,26,.97);
    box-shadow:0 18px 50px rgba(0,0,0,.48);
    backdrop-filter:blur(10px);
  }
  .tw-articles-mobile-nav a { min-inline-size:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.14rem; padding:.15rem; border-radius:.62rem; color:#92a7b6; font-size:.52rem; font-weight:800; text-align:center; }
  .tw-articles-mobile-nav a.is-active { color:var(--tw-blog-gold-2); background:rgba(242,189,67,.07); }
  .tw-articles-mobile-nav svg { inline-size:1.08rem; block-size:1.08rem; }
}

@media (max-width:25rem) {
  .tw-articles-hub .tw-shell { inline-size:calc(100% - .55rem); }
  .tw-articles-hero__panel { min-block-size:21rem; }
  .tw-articles-hero__visual { height:10.5rem; }
  .tw-articles-hero__content { min-block-size:21rem; padding:9.7rem .72rem .85rem; }
  .tw-articles-hero__title { font-size:1.34rem; }
  .tw-articles-hero__highlight { font-size:.75rem; }
  .tw-articles-hero__description { font-size:.64rem; }
  .tw-topic-rail__filter,.tw-topic-rail__item { min-block-size:3.8rem; font-size:.55rem; }
  .tw-articles-grid--latest .tw-article-card { grid-template-columns:6.25rem minmax(0,1fr); }
}

@keyframes twHeroScene { from { transform:scale(1.015); } to { transform:scale(1.035); } }
@keyframes twBeam { 0%,100% { opacity:.36; transform:translateX(-12px) scaleX(.72); } 50% { opacity:1; transform:translateX(12px) scaleX(1.05); } }
@keyframes twFilterOpen { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes twLivePulse { 0% { box-shadow:0 0 0 0 rgba(242,189,67,.38); } 70% { box-shadow:0 0 0 9px rgba(242,189,67,0); } 100% { box-shadow:0 0 0 0 rgba(242,189,67,0); } }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-reveal] { opacity:1!important; transform:none!important; }
}