@font-face { font-family:'Geograph'; src:url('../fonts/Geogtq-Lg.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geograph'; src:url('../fonts/Geogtq-Rg.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Geograph'; src:url('../fonts/Geogtq-Md.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Geograph'; src:url('../fonts/Geogtq-Sb.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Geograph'; src:url('../fonts/Geogtq-Bd.otf') format('opentype'); font-weight:800; font-display:swap; }

:root { --ink:#0A0A0A; --purple:#AC6096; --red:#D6174B; --muted:rgba(10,10,10,.45); --line:rgba(10,10,10,.15); }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Geograph',Arial,sans-serif; background:#fff; color:var(--ink); }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* header */
.tv-header { background:var(--ink); padding:24px 48px; display:flex; align-items:flex-end; justify-content:space-between; }
.tv-header--article { background:#fff; border-bottom:none; padding:20px 48px; }
.tv-logo img { height:72px; }
.tv-header--article .tv-logo img { height:56px; }
.tv-live { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.1em; color:#fff; }
.tv-header--article .tv-live { color:var(--ink); }
.tv-live-dot { width:10px; height:10px; border-radius:50%; background:var(--red); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* nav */
.tv-nav { display:flex; border-bottom:3px solid var(--ink); }
.tv-nav a { flex:1; text-align:center; padding:16px 0; font-weight:800; font-size:14px; letter-spacing:.12em; color:var(--ink); border-left:1px solid var(--line); }
.tv-nav a:first-child { border-left:none; }
.tv-nav a:hover { background:var(--purple); color:#fff; }

.tv-nav--second { border-bottom:3px solid var(--ink); border-top:none; background:#f4f2ee; }
.tv-nav--second a { padding:12px 0; font-size:12px; letter-spacing:.14em; font-weight:700; color:rgba(10,10,10,.75); }
.tv-nav--second a:hover { background:var(--purple); color:#fff; }

/* meta */
.meta { display:flex; gap:12px; align-items:baseline; font-size:12px; font-weight:700; letter-spacing:.12em; }
.kicker { color:var(--purple); text-transform:uppercase; }
.kicker--red { color:var(--red); }
.time { color:var(--muted); font-weight:500; letter-spacing:0; font-size:12px; }

/* hero */
.hero { display:grid; grid-template-columns:1fr 1fr; border-bottom:3px solid var(--ink); }
.hero-img { background:#DDD8CC; min-height:360px; }
.hero-img img { width:100%; height:100%; object-fit:cover; }
.hero-body { display:flex; flex-direction:column; justify-content:center; gap:16px; padding:40px 48px; }
.hero-title { font-size:40px; line-height:1.05; font-weight:800; text-transform:uppercase; }
.hero-excerpt { font-size:16px; line-height:1.5; color:rgba(10,10,10,.7); }

/* grid3 */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:3px solid var(--ink); }
.cell { padding:32px 40px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.cell:last-child { border-right:none; }
.cell h3 { font-size:22px; line-height:1.15; font-weight:800; text-transform:uppercase; }

/* list */
.list { max-width:1280px; margin:0 auto; padding:32px 48px 56px; }
.list-label { font-size:12px; font-weight:800; letter-spacing:.14em; padding-bottom:14px; border-bottom:3px solid var(--ink); margin-bottom:8px; text-transform:uppercase; }
.row { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); align-items:center; }
.row-img { background:#DDD8CC; aspect-ratio:1200/630; }
.row-img img { width:100%; height:100%; object-fit:cover; }
.row h3 { font-size:22px; line-height:1.15; font-weight:800; text-transform:uppercase; margin-top:8px; }

/* article */
.article-page article { max-width:840px; margin:0 auto; padding:48px 48px 64px; display:flex; flex-direction:column; gap:24px; }
.article-page h1 { font-size:44px; line-height:1.05; font-weight:800; text-transform:uppercase; }
.article-page .lead { font-size:19px; line-height:1.5; font-weight:500; color:rgba(10,10,10,.75); }
.article-page .feature { aspect-ratio:1200/630; background:#DDD8CC; }
.article-page .feature img { width:100%; height:100%; object-fit:cover; }
.article-page .content p { font-size:17px; line-height:1.65; margin-bottom:18px; }
.article-page .content h2 { font-size:26px; font-weight:800; text-transform:uppercase; margin:26px 0 14px; }
.article-page .content img { margin:20px 0; }
.mehr { max-width:840px; margin:0 auto 64px; padding:20px 48px 0; border-top:3px solid var(--ink); display:flex; flex-direction:column; gap:10px; }
.mehr-label { font-size:12px; font-weight:800; letter-spacing:.14em; }
.mehr a { font-size:16px; font-weight:700; }
.mehr a:hover { color:var(--purple); }

/* footer */
.tv-footer { display:flex; align-items:center; justify-content:space-between; padding:24px 48px; background:var(--ink); color:#fff; margin-top:0; }
.tv-footer-brand { font-weight:700; font-size:13px; letter-spacing:.1em; }
.tv-footer-fb { font-size:13px; color:var(--red); font-weight:600; }

/* pagination */
.pagination { display:flex; justify-content:space-between; padding:24px 0; font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; }
.pagination a:hover { color:var(--purple); }

/* mobile */
@media (max-width: 900px) {
  .tv-header { padding:16px 20px; } .tv-logo img { height:48px; }
  .tv-nav a { font-size:11px; padding:12px 0; letter-spacing:.06em; }
  .tv-nav--second a { font-size:10px; padding:10px 0; }
  .hero { grid-template-columns:1fr; } .hero-body { padding:24px 20px; }
  .hero-title { font-size:28px; }
  .grid3 { grid-template-columns:1fr; } .cell { border-right:none; border-bottom:1px solid var(--line); }
  .list { padding:24px 20px 40px; }
  .row { grid-template-columns:120px 1fr; gap:14px; } .row h3 { font-size:17px; }
  .article-page article { padding:32px 20px 48px; } .article-page h1 { font-size:30px; }
  .mehr { padding:20px 20px 0; }
}