/* ============================================================
   जन समर्पण — राष्ट्रीय हिन्दी समाचार पत्र
   Design system  |  RNI No. UPHIN/2013/59333
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari:wght@400;500;600;700;800;900&family=Mukta:wght@300;400;500;600;700;800&display=swap');

:root{
  --brand:#C8102E;
  --brand-dark:#8E0A1F;
  --brand-soft:#FBEDEF;
  --blue:#0B63A8;
  --gold:#B08421;

  --ink:#15171C;
  --ink-2:#3A404A;
  --muted:#6E7480;
  --faint:#9AA0AA;

  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F5F3EE;
  --line:#E6E2D9;
  --line-2:#D3CEC2;
  --night:#14161B;
  --night-2:#1D2027;

  --shadow-sm:0 1px 2px rgba(20,22,27,.06), 0 1px 3px rgba(20,22,27,.05);
  --shadow-md:0 4px 12px rgba(20,22,27,.08), 0 2px 4px rgba(20,22,27,.04);
  --shadow-lg:0 18px 40px rgba(20,22,27,.13), 0 4px 10px rgba(20,22,27,.06);

  --serif:'Noto Serif Devanagari', 'Tiro Devanagari Hindi', Georgia, serif;
  --sans:'Mukta', 'Noto Sans Devanagari', 'Segoe UI', system-ui, sans-serif;

  --wrap:1240px;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:var(--sans); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.wrap-wide{width:min(100% - 2.5rem, 1440px); margin-inline:auto}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:800; line-height:1.28; margin:0; letter-spacing:-.005em}
.hd-xl{font-size:clamp(2rem, 3.6vw, 3.1rem); font-weight:900; line-height:1.18}
.hd-lg{font-size:clamp(1.5rem, 2.2vw, 2.05rem); font-weight:800; line-height:1.24}
.hd-md{font-size:clamp(1.2rem, 1.5vw, 1.45rem); font-weight:700; line-height:1.3}
.dek{font-family:var(--sans); font-weight:500; color:var(--ink-2); font-size:1.02rem; line-height:1.6}

.kicker{
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
}

/* ---------- top utility bar ---------- */
.topbar{background:var(--night); color:#CFD3DA; font-size:.8rem}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:38px; min-width:0}
.topbar__left{display:flex; align-items:center; gap:1.1rem; min-width:0}
.topbar__date{color:#EDEFF2; font-weight:500; white-space:nowrap}
.topbar__rni{color:#8B919C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__right{display:flex; align-items:center; gap:.35rem}
.tb-link{
  padding:.3rem .7rem; border-radius:2px; color:#CFD3DA; font-weight:500;
  transition:background .18s, color .18s; white-space:nowrap;
}
.tb-link:hover{background:rgba(255,255,255,.09); color:#fff}
.tb-link--cta{background:var(--brand); color:#fff; font-weight:700}
.tb-link--cta:hover{background:#E01536; color:#fff}

/* ---------- masthead ---------- */
.masthead{background:var(--surface); border-bottom:1px solid var(--line)}
.masthead__in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1.5rem; padding:1.7rem 0 1.25rem;
}
.masthead__logo{justify-self:center; text-align:center}
.masthead__logo img{width:min(430px, 62vw); margin-inline:auto}
.mh-meta{font-size:.82rem; line-height:1.65; color:var(--muted)}
.mh-meta b{color:var(--ink); font-weight:700}
.mh-meta--right{text-align:right}
.mh-chip{
  display:inline-block; background:var(--surface-2); border:1px solid var(--line);
  padding:.15rem .55rem; border-radius:2px; font-size:.76rem; font-weight:600; color:var(--ink-2);
}
.masthead__rule{height:3px; background:var(--brand)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:60; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm)}
.nav__in{display:flex; align-items:center; gap:.15rem; height:52px}
.nav__brand{display:none; align-items:center; margin-right:1rem; flex:none}
.nav__brand img{height:24px; width:auto}
.nav.is-stuck .nav__brand{display:flex}
.nav__list{display:flex; align-items:center; gap:.1rem; list-style:none; margin:0; padding:0; min-width:0; overflow-x:auto; scrollbar-width:none}
.nav__list::-webkit-scrollbar{display:none}
.nav__link{
  position:relative; display:block; padding:.55rem .78rem; font-size:.95rem; font-weight:600;
  color:var(--ink-2); white-space:nowrap; border-radius:2px; transition:color .18s, background .18s;
}
.nav__link:hover{color:var(--brand); background:var(--brand-soft)}
.nav__link.is-active{color:var(--brand)}
.nav__link.is-active::after{
  content:''; position:absolute; left:.78rem; right:.78rem; bottom:-1px; height:3px; background:var(--brand);
}
.nav__spacer{margin-left:auto}
.nav__search{
  display:flex; align-items:center; gap:.45rem; border:1px solid var(--line-2); border-radius:2px;
  padding:.32rem .7rem; color:var(--muted); font-size:.88rem; background:var(--surface-2);
  transition:border-color .18s, color .18s; white-space:nowrap;
}
.nav__search:hover{border-color:var(--brand); color:var(--brand)}

/* ---------- ticker ---------- */
.ticker{display:flex; align-items:stretch; background:var(--night-2); color:#EDEFF2; overflow:hidden}
.ticker__label{
  display:flex; align-items:center; gap:.5rem; background:var(--brand); color:#fff;
  padding:.6rem 1.5rem .6rem 1rem; font-weight:800; font-size:.82rem; letter-spacing:.06em;
  white-space:nowrap; flex:none; clip-path:polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.ticker__dot{width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ticker__viewport{flex:1 1 0; min-width:0; overflow:hidden; position:relative}
.ticker__track{display:flex; gap:2.5rem; white-space:nowrap; padding:.6rem 0; width:max-content; animation:slide 55s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{font-size:.9rem; color:#DEE1E6; transition:color .2s}
.ticker__item::before{content:'\25C6'; color:var(--brand); font-size:.6rem; margin-right:.55rem; vertical-align:2px}
.ticker__item:hover{color:#fff}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- section heading ---------- */
.sec-head{display:flex; align-items:center; gap:1rem; margin:0 0 1.4rem}
.sec-head__title{
  font-family:var(--serif); font-size:1.4rem; font-weight:800; color:var(--ink);
  padding-left:.85rem; border-left:5px solid var(--brand); line-height:1.15;
}
.sec-head__line{flex:1; height:1px; background:var(--line-2)}
.sec-head__more{font-size:.86rem; font-weight:700; color:var(--brand); white-space:nowrap}
.sec-head__more:hover{text-decoration:underline}

/* ---------- lead / hero ---------- */
.lead{padding:2.2rem 0 2.6rem}
.lead__grid{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:2.4rem}
.lead__side{display:flex; flex-direction:column; gap:1.35rem}

.story-lead__media{position:relative; overflow:hidden; border-radius:var(--r); background:var(--surface-2)}
.story-lead__media img{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.story-lead:hover .story-lead__media img{transform:scale(1.035)}
.story-lead__tag{
  position:absolute; top:1rem; right:1rem; background:var(--brand); color:#fff;
  font-size:.74rem; font-weight:700; letter-spacing:.09em; padding:.3rem .7rem; border-radius:2px;
}
.story-lead__body{padding-top:1.1rem}
.story-lead h2{margin:.5rem 0 .6rem}
.story-lead .dek{border-left:3px solid var(--brand); padding-left:.85rem; margin:.8rem 0 0}
.byline{display:flex; align-items:center; gap:.55rem; font-size:.83rem; color:var(--muted); margin-top:1rem; flex-wrap:wrap}
.byline b{color:var(--ink-2); font-weight:700}
.byline span::before{content:'\00B7'; margin-right:.55rem; color:var(--line-2)}

.story-side{display:grid; grid-template-columns:104px 1fr; gap:.95rem; align-items:start}
.story-side img{width:104px; height:80px; object-fit:cover; border-radius:2px; background:var(--surface-2)}
.story-side h3{font-size:1.02rem; font-weight:700; line-height:1.4; transition:color .18s}
.story-side:hover h3{color:var(--brand)}
.story-side .kicker{display:block; margin-bottom:.25rem; font-size:.68rem}
.side-divider{height:1px; background:var(--line)}

.story-feat img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); background:var(--surface-2)}
.story-feat h3{margin:.7rem 0 .35rem; font-size:1.22rem; transition:color .18s}
.story-feat:hover h3{color:var(--brand)}
.story-feat p{margin:0; font-size:.93rem; color:var(--muted); line-height:1.6}

/* ---------- card grid ---------- */
.grid{display:grid; gap:1.9rem 1.8rem}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}

.card{display:flex; flex-direction:column}
.card__media{overflow:hidden; border-radius:var(--r); background:var(--surface-2)}
.card__media img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding-top:.85rem}
.card h3{font-size:1.1rem; font-weight:700; line-height:1.4; margin:.35rem 0 .4rem; transition:color .18s}
.card:hover h3{color:var(--brand)}
.card p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.62}
.card .byline{margin-top:.7rem; font-size:.79rem}
.card--flat{border-top:2px solid var(--ink); padding-top:.8rem}
.card--flat h3{font-size:1.02rem}

.band{padding:2.8rem 0; border-top:1px solid var(--line)}
.band--tint{background:var(--surface); border-block:1px solid var(--line)}

/* ---------- e-paper strip ---------- */
.epstrip{background:var(--night); color:#E9EBEF; padding:2.6rem 0; position:relative; overflow:hidden}
.epstrip::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(900px 340px at 12% 0%, rgba(200,16,46,.24), transparent 62%);
}
.epstrip__in{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:2.6rem; align-items:center}
.epstrip__pages{display:flex; flex:none}
.epstrip__pages img{
  width:126px; border-radius:2px; box-shadow:0 12px 30px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12); transition:transform .35s ease;
}
.epstrip__pages img:nth-child(2){margin-left:-58px; transform:rotate(3.5deg)}
.epstrip__pages img:nth-child(3){margin-left:-58px; transform:rotate(7deg)}
.epstrip__pages:hover img:nth-child(1){transform:translateX(-14px) rotate(-3deg)}
.epstrip__pages:hover img:nth-child(3){transform:rotate(10deg) translateX(10px)}
.epstrip h2{color:#fff; font-size:1.85rem; margin-bottom:.5rem}
.epstrip p{color:#A8AEB9; margin:0; max-width:52ch; font-size:.98rem}
.epstrip .kicker{color:#FF7A8E}

.btn{
  display:inline-flex; align-items:center; gap:.55rem; padding:.72rem 1.5rem; border-radius:2px;
  font-weight:700; font-size:.95rem; border:1px solid transparent; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn--brand{background:var(--brand); color:#fff}
.btn--brand:hover{background:#E01536}
.btn--ghost{border-color:rgba(255,255,255,.28); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--outline{border-color:var(--line-2); color:var(--ink)}
.btn--outline:hover{border-color:var(--brand); color:var(--brand)}
.btn--lg{padding:.85rem 1.9rem; font-size:1rem}

/* ---------- editorial block ---------- */
.editorial{background:var(--surface); border-block:1px solid var(--line); padding:3rem 0}
.editorial__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:3rem}
.edit-main{border-right:1px solid var(--line); padding-right:3rem}
.edit-stamp{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--brand); color:#fff;
  padding:.32rem .85rem; font-size:.75rem; font-weight:700; letter-spacing:.13em; border-radius:2px;
}
.edit-main h2{margin:1rem 0 .9rem; font-size:2rem}
.edit-main p{color:var(--ink-2); font-size:1.02rem; line-height:1.8; margin:0 0 1rem}
.drop p:first-of-type::first-letter{
  float:left; font-family:var(--serif); font-size:3.4rem; line-height:.86; font-weight:800;
  color:var(--brand); margin:.32rem .6rem 0 0;
}
.edit-side img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r)}
.edit-side h3{margin:1rem 0 .55rem; font-size:1.5rem}
.edit-side p{color:var(--ink-2); line-height:1.78; margin:0 0 .9rem}

/* ---------- editor's desk ---------- */
.desk{background:var(--night); color:#E9EBEF; padding:3.4rem 0; position:relative; overflow:hidden}
.desk::before{content:''; position:absolute; inset:0; background:radial-gradient(700px 400px at 85% 50%, rgba(11,99,168,.28), transparent 65%)}
.desk__in{position:relative; display:grid; grid-template-columns:290px 1fr; gap:3rem; align-items:center}
.desk__photo{position:relative}
.desk__photo img{position:relative; z-index:2; width:100%; border-radius:var(--r); object-fit:cover; aspect-ratio:3/4; box-shadow:var(--shadow-lg)}
.desk__photo::after{content:''; position:absolute; inset:16px -16px -16px 16px; border:2px solid var(--brand); border-radius:var(--r); z-index:1}
.desk blockquote{
  margin:0; font-family:var(--serif); font-size:clamp(1.25rem,1.9vw,1.7rem); line-height:1.6; color:#fff; font-weight:600;
}
.desk blockquote::before{content:'\201C'; color:var(--brand); font-size:3.2rem; line-height:0; vertical-align:-.35em; margin-right:.15rem}
.desk__who{margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.16)}
.desk__who b{display:block; font-family:var(--serif); font-size:1.15rem; color:#fff; font-weight:700}
.desk__who span{font-size:.9rem; color:#9AA1AD}

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:12px}
.gal a{overflow:hidden; border-radius:var(--r); background:var(--surface-2); position:relative; display:block}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gal a:hover img{transform:scale(1.06)}
.gal a::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);
  opacity:0; transition:opacity .3s;
}
.gal a:hover::after{opacity:1}
.gal__cap{
  position:absolute; left:14px; right:14px; bottom:12px; color:#fff; font-size:.85rem; font-weight:600;
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; z-index:2;
}
.gal a:hover .gal__cap{opacity:1; transform:none}
.gal .t2{grid-column:span 2}
.gal .r2{grid-row:span 2}

.video-wrap{position:relative; border-radius:var(--r); overflow:hidden; background:#000; box-shadow:var(--shadow-lg)}
.video-wrap video{width:100%; display:block; aspect-ratio:16/9; object-fit:cover}

/* ---------- e-paper page ---------- */
.ep-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem}
.ep-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .25s, transform .25s; cursor:pointer; text-align:left; padding:0; width:100%}
.ep-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px)}
.ep-card img{width:100%; display:block; border-bottom:1px solid var(--line)}
.ep-card__foot{display:flex; justify-content:space-between; align-items:center; padding:.7rem .9rem; font-size:.86rem}
.ep-card__no{font-weight:800; color:var(--brand); font-family:var(--serif)}
.ep-card__sec{color:var(--muted); font-weight:600}

.lightbox{position:fixed; inset:0; background:rgba(10,11,14,.94); z-index:200; display:none; padding:1.2rem}
.lightbox.is-open{display:flex; flex-direction:column}
.lightbox__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#E9EBEF; padding:.2rem .4rem 1rem}
.lightbox__title{font-family:var(--serif); font-weight:700}
.lightbox__stage{flex:1; overflow:auto; display:flex; justify-content:center; align-items:flex-start}
.lightbox__stage img{max-width:min(1000px,100%); height:auto; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-btn{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; padding:.45rem .95rem; border-radius:2px; cursor:pointer; font-weight:600; font-size:.9rem}
.lb-btn:hover{background:rgba(255,255,255,.2)}
.lb-btn[disabled]{opacity:.35; cursor:default}

/* ---------- article page ---------- */
.crumbs{font-size:.83rem; color:var(--muted); padding:1.2rem 0}
.crumbs a:hover{color:var(--brand)}
.crumbs em{font-style:normal; margin:0 .45rem; color:var(--line-2)}

.article{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:3.5rem; padding-bottom:3rem}
.article__head h1{margin:.7rem 0 .8rem}
.article__figure{margin:1.8rem 0 1.6rem}
.article__figure img{width:100%; max-height:560px; border-radius:var(--r); object-fit:cover}
.article__figure figcaption{font-size:.83rem; color:var(--muted); padding-top:.6rem; border-bottom:1px solid var(--line); padding-bottom:.8rem}
.prose{font-size:1.06rem; line-height:1.9; color:var(--ink-2)}
.prose p{margin:0 0 1.15rem}
.prose p:first-of-type::first-letter{
  float:left; font-family:var(--serif); font-size:3.5rem; line-height:.86; font-weight:800;
  color:var(--brand); margin:.3rem .6rem 0 0;
}
.pullquote{
  border-left:4px solid var(--brand); background:var(--surface-2); padding:1.2rem 1.4rem; margin:1.8rem 0;
  font-family:var(--serif); font-size:1.15rem; line-height:1.6; font-weight:600; color:var(--ink);
}
.article__foot{margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap}
.tagrow{display:flex; gap:.5rem; flex-wrap:wrap}
.tag{background:var(--surface-2); border:1px solid var(--line); padding:.25rem .7rem; font-size:.8rem; font-weight:600; color:var(--ink-2); border-radius:2px}
.tag:hover{border-color:var(--brand); color:var(--brand)}

.aside{position:sticky; top:70px; align-self:start; display:flex; flex-direction:column; gap:2rem}
.aside__box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.3rem}
.aside__title{font-family:var(--serif); font-size:1.05rem; font-weight:800; padding-bottom:.65rem; border-bottom:2px solid var(--brand); margin-bottom:.9rem}
.aside__list{list-style:none; margin:0; padding:0}
.aside__list li{padding:.7rem 0; border-bottom:1px dashed var(--line)}
.aside__list li:last-child{border-bottom:0; padding-bottom:0}
.aside__list a{display:grid; grid-template-columns:26px 1fr; gap:.7rem; font-weight:600; font-size:.95rem; line-height:1.45; transition:color .18s}
.aside__list i{font-style:normal; font-family:var(--serif); font-weight:800; color:var(--brand); font-size:1.15rem; line-height:1.2}
.aside__list a:hover{color:var(--brand)}

/* ---------- generic page hero ---------- */
.phero{background:var(--surface); border-bottom:1px solid var(--line); padding:2.6rem 0 2.2rem}
.phero h1{font-size:clamp(2rem,3vw,2.7rem); margin:.5rem 0 .6rem}
.phero p{margin:0; color:var(--muted); max-width:70ch; font-size:1.02rem}

/* ---------- info / contact ---------- */
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.info-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; transition:box-shadow .25s, border-color .25s}
.info-card:hover{box-shadow:var(--shadow-md); border-color:var(--line-2)}
.info-card__ic{width:42px; height:42px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); border-radius:2px; margin-bottom:.9rem}
.info-card h3{font-size:1.12rem; margin-bottom:.4rem}
.info-card p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.7}
.info-card a{color:var(--blue); font-weight:600}
.info-card a:hover{text-decoration:underline}

.form{display:grid; gap:1rem}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field{display:flex; flex-direction:column; gap:.35rem}
.field label{font-size:.85rem; font-weight:700; color:var(--ink-2)}
.field input,.field select,.field textarea{
  font:inherit; font-size:.97rem; padding:.7rem .85rem; border:1px solid var(--line-2); border-radius:2px;
  background:var(--surface); color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(200,16,46,.12);
}
.form__note{font-size:.83rem; color:var(--muted)}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center}
.stat b{display:block; font-family:var(--serif); font-size:2.4rem; font-weight:900; color:var(--brand); line-height:1.1}
.stat span{font-size:.9rem; color:var(--muted); font-weight:600}

.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem}
.team-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.team-card img{width:100%; aspect-ratio:4/3; object-fit:cover}
.team-card__b{padding:1.1rem 1.2rem}
.team-card h3{font-size:1.08rem; margin-bottom:.2rem}
.team-card span{font-size:.87rem; color:var(--brand); font-weight:700}
.team-card p{margin:.6rem 0 0; font-size:.92rem; color:var(--muted); line-height:1.65}

/* ---------- newsletter ---------- */
.subscribe{background:var(--surface-2); border-block:1px solid var(--line); padding:2.8rem 0}
.subscribe__in{display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:center}
.subscribe h2{font-size:1.6rem; margin-bottom:.4rem}
.subscribe p{margin:0; color:var(--muted)}
.sub-form{display:flex; gap:.6rem}
.sub-form input{
  font:inherit; padding:.75rem 1rem; border:1px solid var(--line-2); border-radius:2px; min-width:280px; background:#fff;
}
.sub-form input:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(200,16,46,.12)}

/* ---------- footer ---------- */
.footer{background:var(--night); color:#A8AEB9; padding:3.2rem 0 0; font-size:.92rem}
.footer__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2.5rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.1)}
.footer__logo img{width:230px; margin-bottom:1rem}
.footer p{margin:0 0 .7rem; line-height:1.75}
.footer h4{font-family:var(--serif); color:#fff; font-size:1rem; font-weight:700; margin-bottom:1rem}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.footer a{transition:color .18s}
.footer a:hover{color:#fff}
.footer__imprint{padding:1.4rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.82rem; line-height:1.85; color:#868D99}
.footer__imprint b{color:#C6CBD3; font-weight:600}
.footer__bar{display:flex; justify-content:space-between; gap:1rem; padding:1.2rem 0 1.6rem; font-size:.84rem; color:#767D89; flex-wrap:wrap}
.footer__social{display:flex; gap:.5rem}
.footer__social a{
  width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16);
  border-radius:2px; transition:background .2s, border-color .2s, color .2s;
}
.footer__social a:hover{background:var(--brand); border-color:var(--brand); color:#fff}

/* ---------- misc ---------- */
.divider{height:1px; background:var(--line); margin:2.6rem 0}
.center{text-align:center}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.demo-note{
  background:#FFF8E1; border:1px solid #F0DFA8; border-left:4px solid var(--gold);
  padding:.85rem 1.1rem; font-size:.88rem; color:#6B5312; border-radius:2px; line-height:1.7;
}


/* ---------- WhatsApp ---------- */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:150;
  display:inline-flex; align-items:center; gap:.5rem;
  background:#25D366; color:#fff; font-weight:700; font-size:.95rem;
  padding:.7rem 1.15rem .7rem .95rem; border-radius:999px;
  box-shadow:0 8px 24px rgba(37,211,102,.38), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .2s, box-shadow .2s;
}
.wa-fab:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,211,102,.48); color:#fff}
.wa-fab svg{flex:none}
.btn--wa{background:#25D366; color:#fff}
.btn--wa:hover{background:#1EBE5A; color:#fff}
.info-card--wa{border-color:#BFE9CE; background:linear-gradient(180deg,#F4FDF7,var(--surface))}
.info-card--wa .info-card__ic{background:#DFF6E7; color:#128C4A}
.info-grid--4{grid-template-columns:repeat(4,1fr)}

@media (max-width:1080px){ .info-grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .info-grid--4{grid-template-columns:1fr}
  .wa-fab{right:14px; bottom:14px; padding:.7rem; border-radius:50%}
  .wa-fab span{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lead__grid{grid-template-columns:1fr; gap:2rem}
  .editorial__grid{grid-template-columns:1fr; gap:2.2rem}
  .edit-main{border-right:0; padding-right:0; border-bottom:1px solid var(--line); padding-bottom:2rem}
  .article{grid-template-columns:1fr; gap:2.5rem}
  .aside{position:static}
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .ep-grid{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1fr 1fr; gap:2rem}
  .epstrip__in{grid-template-columns:1fr; gap:1.8rem}
  .desk__in{grid-template-columns:220px 1fr; gap:2rem}
}
@media (max-width:820px){
  body{font-size:16px}
  .masthead__in{grid-template-columns:1fr; gap:.9rem; padding:1.3rem 0 1rem}
  .mh-meta{display:none}
  .masthead__logo img{width:min(340px,78vw)}
  .grid-3,.grid-4,.grid-2{grid-template-columns:repeat(2,1fr)}
  .ep-grid{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px}
  .gal .t2{grid-column:span 2}
  .info-grid,.team-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr); gap:1.6rem}
  .subscribe__in{grid-template-columns:1fr; gap:1.2rem}
  .sub-form{flex-direction:column}
  .sub-form input{min-width:0}
  .form__row{grid-template-columns:1fr}
  .desk__in{grid-template-columns:1fr; gap:1.6rem}
  .desk__photo{max-width:230px}
  .topbar__rni{display:none}
  .topbar__left{flex:1 1 auto; min-width:0}
  .topbar__date{overflow:hidden; text-overflow:ellipsis}
  .topbar__right .tb-link:not(.tb-link--cta){display:none}
  .topbar__right{flex:none}
}
@media (max-width:560px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .ep-grid{grid-template-columns:repeat(2,1fr)}
  .story-side{grid-template-columns:88px 1fr}
  .story-side img{width:88px; height:70px}
  .epstrip__pages img{width:96px}
  .footer__top{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}