/* తెలుగు CLIPS — poster-press editorial.
   Ivory canvas, massive condensed black type, thick rules, hard shadows, one red.
   Anton (display caps) + Newsreader (titles) + Instrument Sans (UI) + Ramabhadra (Telugu script). */
:root {
  --paper:#f5efe2; --paper2:#ede5d2; --white:#fffdf7;
  --black:#15120e; --dim:#6f6757; --red:#1B32C9; --rule:#15120e;
  --shadow:6px 6px 0 #15120e;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { overflow-x:hidden; background:linear-gradient(180deg,#f8f3e8 0%,#f5efe2 30%,#f0e8d6 100%) fixed var(--paper); color:var(--black); font-family:'Instrument Sans',sans-serif; line-height:1.4; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }

/* header — poster lockup */
.hdr { display:flex; align-items:center; justify-content:space-between; padding:18px 0 14px; border-bottom:4px solid var(--black); }
.wordmark { display:flex; align-items:baseline; gap:8px; }
.wm-te { font-family:'Ramabhadra',sans-serif; font-size:27px; color:var(--red); line-height:1; }
.wm-en { font-family:'Anton',sans-serif; font-size:27px; letter-spacing:1px; color:var(--black); line-height:1; }
.hdr-nav a { font-family:'Anton',sans-serif; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; background:var(--black); color:var(--paper); padding:9px 16px; transition:background .15s; }
.hdr-nav a:hover { background:var(--red); }

/* ask — poster headline */
.ask { padding:30px 0 4px; }
.ask-eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--red); }
.ask-h { font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(36px,9.5vw,84px); line-height:.98; letter-spacing:.5px; margin-top:10px; }
.ask-h b { font-weight:400; color:var(--red); }

/* time picker — big bordered cells */
.timebar { display:flex; margin:26px 0 0; border:3px solid var(--black); background:var(--white); box-shadow:var(--shadow); }
.timebar .t { flex:1; text-align:center; padding:14px 4px 11px; border-right:2px solid var(--black); transition:background .15s; }
.timebar .t:last-child { border-right:none; }
.timebar .n { display:block; font-family:'Anton',sans-serif; font-size:26px; line-height:1; }
.timebar .l { display:block; font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--dim); margin-top:4px; }
.timebar .t.on { background:var(--red); }
.timebar .t.on .n { color:#fff; }
.timebar .t.on .l { color:#c7d0ff; }

/* categories — square chips */
.cats { display:flex; gap:8px; margin:22px 0 4px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; }
.cats::-webkit-scrollbar { display:none; }
.cat { flex:0 0 auto; font-family:'Anton',sans-serif; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; padding:10px 18px; color:var(--black); border:2px solid var(--black); background:transparent; transition:all .15s; }
.cat.on { color:var(--paper); background:var(--black); }

/* section heads — numbered, oversized */
.sect { display:flex; align-items:center; gap:14px; margin:34px 0 18px; }
.sect-no { font-family:'Anton',sans-serif; font-size:15px; color:#fff; background:var(--red); padding:5px 10px; line-height:1; }
.sect h2 { font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(20px,4.5vw,30px); letter-spacing:1px; white-space:nowrap; }
.sect-line { flex:1; height:3px; background:var(--black); }
.sect-more { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--red); white-space:nowrap; }

/* hero — framed poster */
.hero { display:block; position:relative; overflow:hidden; aspect-ratio:16/10; border:3px solid var(--black); box-shadow:var(--shadow); background:#000; }
.hero img { position:absolute; inset:0; }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,9,7,0) 32%, rgba(11,9,7,.5) 60%, rgba(11,9,7,.92) 100%); }
.hero-body { position:absolute; left:0; right:0; bottom:0; padding:18px 18px 20px; color:#fff; }
.hero-body h3 { font-family:'Newsreader',serif; font-weight:800; font-size:clamp(20px,4.8vw,36px); line-height:1.1; letter-spacing:-0.3px; margin-top:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-meta { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:13px; font-weight:600; color:#d8d2c4; }
.hero-play { width:40px; height:40px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; flex:0 0 auto; }

/* kickers */
.ck { font-size:10.5px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:var(--red); }
.ck em { font-style:normal; color:var(--dim); letter-spacing:1.2px; }
.ck.light { color:#a9b6ff; }

/* cards — bordered, hard shadow */
.grid { display:grid; grid-template-columns:1fr; gap:20px; margin-top:22px; }
.card { display:block; overflow:hidden; background:var(--white); border:2.5px solid var(--black); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--black); }
.cthumb { position:relative; aspect-ratio:16/9; background:#1a1712; overflow:hidden; border-bottom:2.5px solid var(--black); }
.cdur { position:absolute; bottom:0; right:0; font-family:'Anton',sans-serif; font-size:12.5px; letter-spacing:1px; background:var(--black); color:var(--paper); padding:6px 12px; }
.srctag { position:absolute; top:0; left:0; font-size:9px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; background:var(--black); padding:6px 11px; }
.srctag.yt { color:#ff9b91; }
.srctag.sp { color:#5ee08a; }
.cbody { padding:14px 16px 16px; }
.cbody h3 { font-family:'Newsreader',serif; font-weight:700; font-size:17.5px; line-height:1.22; margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card.big .cbody h3 { font-size:19px; }
.cby { font-size:12px; font-weight:500; color:var(--dim); margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* rail */
.rail { display:flex; gap:16px; overflow-x:auto; padding:4px 0 16px; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail .card { flex:0 0 74%; max-width:330px; }

/* briefs */
.briefs { border:2.5px solid var(--black); background:var(--white); box-shadow:var(--shadow); overflow:hidden; }
.brief { display:flex; gap:12px; padding:12px 14px; border-bottom:2px solid var(--paper2); align-items:center; transition:background .15s; }
.brief:hover { background:var(--paper2); }
.brief:last-child { border-bottom:none; }
.bthumb { width:106px; aspect-ratio:16/9; flex:0 0 auto; object-fit:cover; border:2px solid var(--black); }
.bmain { min-width:0; }
.brief h5 { font-family:'Newsreader',serif; font-weight:700; font-size:14.5px; line-height:1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.brief .m { font-size:11px; font-weight:600; color:var(--dim); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bdur { margin-left:auto; flex:0 0 auto; font-family:'Anton',sans-serif; font-size:14px; color:var(--red); }

/* footer */
.foot { margin-top:44px; border-top:4px solid var(--black); padding:20px 0 32px; }
.foot-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.foot-brand .wm-te { font-size:17px; }
.foot-brand .wm-en { font-size:17px; }
.foot-tag { font-size:12px; font-weight:600; color:var(--dim); }
.foot-row.dim { margin-top:10px; font-size:11px; color:var(--dim); }
.foot-row.dim a:hover { color:var(--red); }

/* detail */
.detail { padding-top:22px; }
.kicker-row { display:flex; gap:12px; align-items:center; }
.kicker { font-family:'Anton',sans-serif; font-size:12px; letter-spacing:2px; color:#fff; background:var(--red); padding:5px 12px; text-transform:uppercase; }
.kdur { font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--black); border:2px solid var(--black); padding:4px 12px; }
.dtitle { font-family:'Newsreader',serif; font-weight:800; font-size:clamp(27px,6vw,48px); line-height:1.06; margin-top:14px; letter-spacing:-0.6px; }
.dby { font-size:13px; font-weight:500; color:var(--dim); margin-top:10px; }
.dby b { color:var(--black); }
.player { margin-top:18px; aspect-ratio:16/9; overflow:hidden; border:3px solid var(--black); box-shadow:var(--shadow); background:#000; }
.player iframe { width:100%; height:100%; border:none; }
.share { display:flex; gap:10px; align-items:center; margin:18px 0 6px; flex-wrap:wrap; }
.share-l { font-family:'Anton',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin-right:4px; }
.share a { font-size:12px; font-weight:700; letter-spacing:.5px; border:2px solid var(--black); padding:8px 18px; transition:all .15s; }
.share a:hover { background:var(--black); color:var(--paper); }

/* desktop */
@media (min-width:1024px) {
  .wrap { padding:0 24px; }
  .hdr { padding:22px 0 18px; }
  .wm-te, .wm-en { font-size:34px; }
  .ask { padding:46px 0 6px; text-align:center; }
  .timebar { max-width:600px; margin:30px auto 0; }
  .cats { justify-content:center; }
  .hero { aspect-ratio:21/9; }
  .hero-body { padding:30px 34px; max-width:780px; }
  .grid { grid-template-columns:repeat(3,1fr); }
  .rail .card { flex:0 0 24%; }
  .detail .player { max-width:920px; }
}
@media (min-width:640px) and (max-width:1023px) {
  .grid { grid-template-columns:repeat(2,1fr); }
  .rail .card { flex:0 0 44%; }
}

/* ===== motion + gradient + no-horizontal-scroll layer ===== */

/* gradient depth on accent plates */
.sect-no, .kicker, .hero-play, .timebar .t.on, .hdr-nav a:hover {
  background-image:linear-gradient(135deg, #2b46e6 0%, var(--red) 45%, #101f8a 100%);
}
.hdr-nav a { background-image:none; }
.hdr-nav a:hover { background-color:transparent; }

/* ticker */
.ticker { background:var(--black); overflow:hidden; padding:7px 0; border-bottom:3px solid var(--black); }
.ticker-track { display:inline-block; white-space:nowrap; animation:tick 26s linear infinite; }
.ticker-track span { font-family:'Anton',sans-serif; font-size:11px; letter-spacing:3px; color:var(--paper); text-transform:uppercase; }
@keyframes tick { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* load reveal */
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.ask, .timebar, .cats { animation:rise .5s ease both; }
.sect, .hero, .briefs { animation:rise .6s ease both; }
.grid .card { animation:rise .6s ease both; }
.grid .card:nth-child(1) { animation-delay:.08s; }
.grid .card:nth-child(2) { animation-delay:.16s; }
.grid .card:nth-child(3) { animation-delay:.24s; }
.grid .card:nth-child(4) { animation-delay:.32s; }
.rail .card { animation:rise .6s ease both; }
.rail .card:nth-child(2) { animation-delay:.1s; }
.rail .card:nth-child(3) { animation-delay:.2s; }

/* hero ken burns + hover zooms */
.hero img { animation:kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform:scale(1); } to { transform:scale(1.07); } }
.cthumb img { transition:transform .5s ease; }
.card:hover .cthumb img { transform:scale(1.05); }

/* categories: wrap, never scroll */
.cats { flex-wrap:wrap; overflow:visible; padding-bottom:6px; }

/* rails: grid, never scroll */
.rail { display:grid; grid-template-columns:1fr; gap:16px; overflow:visible; padding:4px 0 8px; }
.rail .card { max-width:none; }
@media (max-width:639px) {
  .rail .card:nth-child(n+4) { display:none; }
}
@media (min-width:640px) and (max-width:1023px) {
  .rail { grid-template-columns:repeat(2,1fr); }
  .rail .card:nth-child(n+5) { display:none; }
}
@media (min-width:1024px) {
  .rail { grid-template-columns:repeat(3,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* stat line: views + upload recency */
.cstat { display:flex; gap:12px; margin-top:7px; font-size:11.5px; font-weight:600; color:var(--dim); flex-wrap:wrap; }
.stat { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.eye { display:inline-block; vertical-align:-2px; }
.hm { display:inline-flex; align-items:center; gap:5px; }
.dby .stat { display:inline-flex; }

/* mobile: section heads wrap instead of overflowing */
@media (max-width:639px) {
  .sect { flex-wrap:wrap; row-gap:6px; }
  .sect h2 { white-space:normal; line-height:1.05; }
  .sect-line { min-width:36px; }
}
.ticker { max-width:100%; }

/* ===== icons + app transitions layer ===== */
.cat, .ic-btn { display:inline-flex; align-items:center; gap:7px; }
.sect h2 { display:flex; align-items:center; gap:9px; }
.sect h2 svg { flex:0 0 auto; color:var(--red); }
.share a { display:inline-flex; align-items:center; justify-content:center; padding:10px 13px; }
.share a svg { display:block; }
.stat svg { flex:0 0 auto; opacity:.85; }
.hero-play svg { display:block; }
.foot-tag .te { font-family:'Ramabhadra',sans-serif; font-weight:400; color:var(--red); font-style:normal; }

/* mobile-app page transitions (cross-document view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation:vt-out .16s ease both; }
::view-transition-new(root) { animation:vt-in .24s ease both; }
@keyframes vt-out { to { opacity:0; transform:translateY(-10px) scale(.995); } }
@keyframes vt-in { from { opacity:0; transform:translateY(14px) scale(.995); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none !important; }
}

/* empty state when no video fits the chosen time */
.empty { border:2.5px dashed var(--rule); border-radius:var(--radius); padding:34px 22px; text-align:center; margin-top:8px; }
.empty p { font-family:'Newsreader',serif; font-style:italic; font-size:20px; color:var(--dim); }
.empty-cta { display:inline-block; margin:14px 8px 0; font-family:'Anton',sans-serif; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--paper); background:var(--black); padding:11px 20px; }
.empty-cta:hover { background:var(--red); }