/* ============================================================
   DailyPost.live — public stylesheet
   Tokens: ink #10141F · paper #fff · bg #F5F6F8 · live #E02B2B
           accent #1450E0 · muted #5B6474 · line #E4E7EC
   Type:   Archivo (display/UI) · Source Serif 4 (deks/body)
   ============================================================ */

:root{
  --ink:#10141F; --paper:#FFFFFF; --bg:#F5F6F8; --line:#E4E7EC;
  --muted:#5B6474; --live:#E02B2B; --accent:#1450E0; --accent-ink:#0E3AA8;
  --disp:"Archivo",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --r:10px;
  --shadow:0 1px 2px rgba(16,20,31,.05),0 8px 24px -12px rgba(16,20,31,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--disp);
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- LIVE bar (signature) ---------- */
.livebar{display:flex;align-items:center;gap:0;background:var(--ink);color:#fff;
  font-size:13px;height:38px;overflow:hidden}
.livebar__badge{display:flex;align-items:center;gap:7px;background:var(--live);
  font-weight:800;letter-spacing:.14em;padding:0 14px;height:100%;flex:0 0 auto;font-size:12px}
.livebar__dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.livebar__track{flex:1;overflow:hidden;position:relative;height:100%}
.livebar__reel{display:flex;align-items:center;height:100%;width:max-content;
  animation:reel 60s linear infinite}
.livebar__track:hover .livebar__reel{animation-play-state:paused}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.livebar__item{display:inline-flex;align-items:center;gap:8px;padding:0 26px;
  white-space:nowrap;color:#E8EAF0;height:100%}
.livebar__item:hover{color:#fff;text-decoration:underline}
.livebar__cat{color:#9AA3B5;font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.livebar__clock{flex:0 0 auto;padding:0 16px;font-variant-numeric:tabular-nums;
  font-weight:600;color:#C6CCDA;border-left:1px solid rgba(255,255,255,.14)}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:22px 20px 18px}
.masthead__date{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}
.masthead__date span{color:var(--ink)}
.masthead__brand{font-weight:900;font-size:clamp(28px,4.4vw,44px);letter-spacing:-.03em;
  text-align:center;line-height:1}
.masthead__brand span{color:var(--live)}
.masthead__brand i{font-style:normal;font-weight:600;font-size:.42em;color:var(--muted);
  letter-spacing:.02em;vertical-align:.35em;margin-left:2px}
.masthead__search{justify-self:end;display:flex;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;background:var(--bg)}
.masthead__search input{border:0;background:transparent;padding:8px 14px;font:inherit;
  font-size:13.5px;width:170px;outline:none}
.masthead__search button{border:0;background:transparent;padding:0 14px;cursor:pointer;
  color:var(--muted);font-size:15px}
.masthead__search button:hover{color:var(--accent)}

.topnav{background:var(--paper)}
.topnav__row{display:flex;gap:4px;overflow-x:auto;padding:0 20px}
.topnav__link{padding:11px 14px;font-weight:700;font-size:13.5px;letter-spacing:.02em;
  border-bottom:3px solid transparent;white-space:nowrap;color:#2A3040}
.topnav__link:hover{color:var(--accent)}
.topnav__link.is-active{border-color:var(--live);color:var(--ink)}
.topnav__link--muted{margin-left:auto;color:var(--muted);font-weight:600}

/* ---------- shared article pieces ---------- */
.chip{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-ink)}
.chip--own{color:#fff;background:var(--ink);padding:3px 8px;border-radius:4px;letter-spacing:.11em}
.meta{font-size:12.5px;color:var(--muted)}
.meta b{color:var(--ink);font-weight:700}
.dek{font-family:var(--serif);color:#3A4152;font-size:16px;line-height:1.55}

.thumb{position:relative;border-radius:var(--r);overflow:hidden;background:#DDE1E8}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a:hover .thumb img{transform:scale(1.035)}
.thumb--ph{display:flex;align-items:center;justify-content:center;color:#AEB6C6;
  font-weight:800;letter-spacing:.2em;font-size:11px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.9fr 1fr;gap:28px;padding:30px 0 14px}
.lead .thumb{aspect-ratio:16/9;margin-bottom:16px}
.lead__title{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.022em;
  line-height:1.12;margin:8px 0 10px}
.lead__title a:hover{text-decoration:underline;text-decoration-thickness:3px;
  text-underline-offset:5px;text-decoration-color:var(--live)}
.lead .dek{font-size:18px;max-width:60ch}

.side{display:flex;flex-direction:column;gap:0}
.side__head{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px;display:flex;align-items:center;gap:10px}
.side__head::after{content:"";flex:1;height:1px;background:var(--line)}
.side__item{display:grid;grid-template-columns:1fr 86px;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.side__item:last-child{border-bottom:0}
.side__item .thumb{aspect-ratio:1/1}
.side__title{font-size:15.5px;font-weight:700;line-height:1.3;margin:4px 0 6px}
.side__title a:hover{text-decoration:underline}

/* ---------- section rows ---------- */
.section{padding:26px 0 8px}
.section__bar{display:flex;align-items:baseline;gap:14px;border-top:3px solid var(--ink);
  padding-top:10px;margin-bottom:18px}
.section__title{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.section__more{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent)}
.section__more:hover{text-decoration:underline}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card .thumb{aspect-ratio:16/10;margin-bottom:10px}
.card__title{font-size:15.5px;font-weight:700;line-height:1.32;margin:5px 0 7px}
.card__title a:hover{text-decoration:underline}

/* latest stream */
.stream{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 20px;box-shadow:var(--shadow)}
.stream__item{display:flex;gap:14px;align-items:baseline;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.stream__item:last-child{border-bottom:0}
.stream__time{flex:0 0 74px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}
.stream__item a{font-weight:600}
.stream__item a:hover{text-decoration:underline}

/* ---------- article page ---------- */
.article{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:clamp(22px,5vw,54px);margin:28px auto;max-width:860px;box-shadow:var(--shadow)}
.article__head{max-width:700px}
.article h1{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.022em;
  line-height:1.12;margin:10px 0 14px}
.article .dek{font-size:19px;margin:0 0 18px}
.article__byline{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin:6px 0 26px;font-size:13px;color:var(--muted)}
.article__byline b{color:var(--ink)}
.article__cover{border-radius:var(--r);overflow:hidden;margin:0 0 8px}
.article__caption{font-size:12.5px;color:var(--muted);margin:8px 0 26px}
.article__body{font-family:var(--serif);font-size:18px;line-height:1.75;color:#1C2230;max-width:700px}
.article__body p{margin:0 0 1.25em}
.article__body p:first-of-type b.dateline,.dateline{font-family:var(--disp);font-weight:800;letter-spacing:.04em}
.article__body h2{font-family:var(--disp);font-size:23px;letter-spacing:-.015em;margin:1.6em 0 .6em}
.article__body h3{font-family:var(--disp);font-size:19px;margin:1.5em 0 .5em}
.article__body figure{margin:2em 0}
.article__body figure img{border-radius:var(--r)}
.article__body figcaption{font-family:var(--disp);font-size:12.5px;color:var(--muted);margin-top:8px}
.article__body blockquote{border-left:3px solid var(--live);margin:1.6em 0;padding:.2em 0 .2em 1.2em;
  font-style:italic;color:#3A4152}
.article__body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.source-box{max-width:700px;margin-top:28px;padding:14px 18px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;color:var(--muted)}
.source-box a{color:var(--accent-ink);font-weight:700;text-decoration:underline}
.tagrow{max-width:700px;margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.tagrow span{font-size:12px;font-weight:700;background:var(--bg);border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;color:var(--muted)}

.related{max-width:860px;margin:0 auto 40px}

/* ---------- category / search / listing ---------- */
.pagehead{padding:34px 0 8px}
.pagehead h1{margin:0 0 6px;font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.02em}
.pagehead p{margin:0;color:var(--muted);font-family:var(--serif)}
.listgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:22px 0 10px}
.pager{display:flex;gap:10px;justify-content:center;padding:20px 0 40px}
.pager a{padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  font-weight:700;font-size:13.5px}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.empty{padding:60px 0;text-align:center;color:var(--muted);font-family:var(--serif)}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#C4CAD8;margin-top:48px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:44px 20px 30px}
.footer__brand{font-weight:900;font-size:26px;letter-spacing:-.03em;color:#fff;margin:0 0 12px}
.footer__brand span{color:var(--live)}
.footer__brand i{font-style:normal;font-weight:600;font-size:.45em;color:#8A93A8;vertical-align:.35em}
.footer__about{font-size:13.5px;line-height:1.7;max-width:46ch;margin:0}
.footer__head{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#8A93A8;margin:0 0 12px}
.footer nav a{display:block;padding:5px 0;font-size:14px;color:#C4CAD8}
.footer nav a:hover{color:#fff;text-decoration:underline}
.footer__legal{border-top:1px solid rgba(255,255,255,.12);padding:16px 20px;font-size:12.5px;color:#8A93A8}

/* ---------- entrance animation ---------- */
.reveal-down{animation:down .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-line{display:block;overflow:hidden}
.rv-line>span{display:inline-block;transform:translateY(110%);animation:lineup .7s cubic-bezier(.2,.7,.15,1) forwards}
@keyframes lineup{to{transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .livebar__reel{animation:none}
  .rv{opacity:1;transform:none}
  .rv-line>span{transform:none;animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .listgrid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .masthead__row{grid-template-columns:1fr auto}
  .masthead__date{display:none}
  .masthead__search input{width:120px}
}
@media (max-width:600px){
  .grid4,.listgrid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .livebar__clock{display:none}
  .masthead__row{grid-template-columns:1fr;justify-items:center;gap:10px}
  .topnav__link--muted{margin-left:0}
}