:root{
  --paper: #F6F1E4;
  --paper-deep: #EFE7D4;
  --ink: #241E17;
  --ink-soft: #55493C;
  --forest: #1F3A2E;
  --forest-deep: #14261D;
  --brick: #9B2B27;
  --brick-deep: #7A1F1C;
  --gold: #B9852E;
  --line: rgba(36,30,23,0.16);
  --white: #FFFDF8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans Devanagari', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Noto Serif Devanagari', serif;
  color:var(--forest-deep);
  margin:0;
}

/* ---------- Masthead ---------- */
.masthead{
  background:var(--forest);
  border-bottom:4px solid var(--brick);
  padding:28px 24px;
}
.masthead-inner{
  max-width:760px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
}
.emblem{width:52px; height:52px; flex-shrink:0;}
.masthead h1{
  color:#F3ECDD;
  font-size:clamp(22px, 4vw, 30px);
}
.masthead .tagline{
  color:#C9BFA9;
  font-size:13px;
  margin:6px 0 0;
}

/* ---------- Layout ---------- */
.wrap{max-width:760px; margin:0 auto; padding:32px 24px 60px;}

/* ---------- Post form ---------- */
.post-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:24px;
  margin-bottom:36px;
}
.post-card h2{font-size:20px; margin-bottom:16px;}
.post-form{display:flex; flex-direction:column; gap:6px;}
.post-form label{
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  margin-top:12px;
}
.post-form .optional{font-weight:400; color:#8a7c6a;}
.post-form input[type="text"],
.post-form textarea{
  font-family:'Noto Sans Devanagari', sans-serif;
  font-size:15px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--paper);
  color:var(--ink);
  resize:vertical;
}
.post-form input:focus,
.post-form textarea:focus{
  outline:2px solid var(--brick);
  outline-offset:1px;
}
.post-form button{
  margin-top:18px;
  align-self:flex-start;
  background:var(--brick);
  color:#fff;
  border:none;
  font-family:'Noto Sans Devanagari', sans-serif;
  font-weight:600;
  font-size:15px;
  padding:12px 28px;
  border-radius:999px;
  cursor:pointer;
  transition:background 0.15s ease;
}
.post-form button:hover{background:var(--brick-deep);}

.banner{
  border-radius:6px;
  padding:12px 16px;
  font-size:14px;
  margin-bottom:16px;
}
.banner p{margin:2px 0;}
.banner-ok{background:rgba(31,58,46,0.1); color:var(--forest-deep); border:1px solid rgba(31,58,46,0.25);}
.banner-err{background:rgba(155,43,39,0.08); color:var(--brick-deep); border:1px solid rgba(155,43,39,0.25);}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:28px;
  border-bottom:2px solid var(--line);
  padding-bottom:0;
}
.tab{
  display:inline-block;
  text-decoration:none;
  font-family:'Noto Sans Devanagari', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--ink-soft);
  padding:10px 18px;
  border-radius:8px 8px 0 0;
  border:1px solid transparent;
  border-bottom:none;
  margin-bottom:-2px;
  transition:background 0.15s ease, color 0.15s ease;
}
.tab:hover{color:var(--forest-deep); background:rgba(31,58,46,0.06);}
.tab-active{
  color:var(--forest-deep);
  background:var(--white);
  border-color:var(--line);
  border-bottom:2px solid var(--white);
}

/* ---------- Category pill ---------- */
.feed-post-top{margin-bottom:8px;}
.cat-pill{
  display:inline-block;
  font-family:'Noto Sans Devanagari', sans-serif;
  font-size:11.5px;
  font-weight:700;
  padding:3px 12px;
  border-radius:999px;
  letter-spacing:0.2px;
}
.cat-political{background:rgba(155,43,39,0.12); color:var(--brick-deep);}
.cat-province{background:rgba(185,133,46,0.16); color:var(--gold);}
.cat-sports{background:rgba(30,90,140,0.14); color:#1E5A8C;}
.cat-entertainment{background:rgba(150,50,120,0.14); color:#96327C;}
.cat-article{background:rgba(90,80,60,0.14); color:#5A503C;}
.cat-general{background:rgba(31,58,46,0.12); color:var(--forest-deep);}

/* ---------- Media ---------- */
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
  margin:0 0 14px;
}
.media-item{
  width:100%;
  max-height:280px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--line);
  background:#000;
  display:block;
}
video.media-item{object-fit:contain; max-height:320px;}

.hint{
  font-size:12px;
  color:var(--ink-soft);
  margin:4px 0 0;
}
.post-form input[type="file"]{
  font-family:'Noto Sans Devanagari', sans-serif;
  font-size:13.5px;
  padding:8px 0;
}

/* ---------- Admin / back links ---------- */
.admin-link{margin-top:6px;}
.admin-link a{
  color:var(--ink-soft);
  font-size:12px;
  text-decoration:none;
  border-bottom:1px dotted var(--ink-soft);
}
.admin-link a:hover{color:var(--brick);}
.back-link{margin:0 0 20px;}
.back-link a{
  color:var(--ink-soft);
  font-size:13.5px;
  text-decoration:none;
}
.back-link a:hover{color:var(--brick);}

/* ---------- Breaking news ticker ---------- */
.ticker-bar{
  display:flex;
  align-items:center;
  background:var(--forest-deep);
  border-bottom:3px solid var(--gold);
  overflow:hidden;
}
.ticker-flag{
  flex-shrink:0;
  background:var(--brick);
  color:#fff;
  font-family:'Noto Sans Devanagari', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.3px;
  padding:9px 18px;
  animation:ticker-flash 1.4s ease-in-out infinite;
}
.ticker-viewport{
  flex:1;
  overflow:hidden;
  position:relative;
  padding:9px 0;
}
.ticker-track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  width:max-content;
  animation:ticker-scroll 40s linear infinite;
}
.ticker-bar:hover .ticker-track{animation-play-state:paused;}
.ticker-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#F3ECDD;
  font-family:'Noto Sans Devanagari', sans-serif;
  font-size:14px;
  font-weight:500;
  padding:0 10px;
}
.ticker-pill{font-size:10.5px; padding:2px 10px;}
.ticker-sep{color:var(--gold); font-size:14px; padding:0 4px;}

@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@keyframes ticker-flash{
  0%, 100%{opacity:1;}
  50%{opacity:0.45;}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none; overflow-x:auto;}
  .ticker-flag{animation:none;}
}
@media (max-width:520px){
  .ticker-flag{padding:8px 12px; font-size:12px;}
  .ticker-item{font-size:13px;}
}

/* ---------- Feed ---------- */
.feed-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:2px solid var(--forest);
  padding-bottom:8px;
  margin-bottom:18px;
}
.feed-head h2{font-size:20px;}
.feed-count{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
}
.feed-empty{
  color:var(--ink-soft);
  font-size:14.5px;
  padding:20px 0;
}
.feed-list{display:flex; flex-direction:column; gap:16px;}
.feed-post{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px 20px;
}
.feed-post h3{font-size:17px; margin-bottom:8px; line-height:1.35;}
.feed-body{
  font-size:14.5px;
  color:var(--ink);
  margin:0 0 12px;
}
.feed-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12.5px;
  color:var(--ink-soft);
  border-top:1px dashed var(--line);
  padding-top:10px;
}
.delete-form{margin:0;}
.delete-btn{
  background:none;
  border:1px solid var(--brick);
  color:var(--brick);
  font-family:'Noto Sans Devanagari', sans-serif;
  font-size:12px;
  font-weight:600;
  padding:5px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.delete-btn:hover{background:var(--brick); color:#fff;}

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;
  padding:24px;
  color:var(--ink-soft);
  font-size:12.5px;
  border-top:1px solid var(--line);
}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .masthead-inner{flex-direction:column; text-align:center;}
  .feed-meta{flex-direction:column; align-items:flex-start; gap:8px;}
  .tabs{gap:4px;}
  .tab{padding:8px 12px; font-size:13px;}
}

/* Focus visibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 2px;
}