:root{
  --bg:#f4f1ea;
  --surface:#fbf9f4;
  --ink:#1a1714;
  --ink-soft:#5c554c;
  --line:#ddd6c8;
  --accent:#b3321f;
  --accent-ink:#b3321f;
  --new:#1a7f4b;
  --shadow:0 10px 40px rgba(26,23,20,.18);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15130f;
    --surface:#1d1a15;
    --ink:#f2ede3;
    --ink-soft:#a79f90;
    --line:#332e26;
    --accent:#e8674f;
    --accent-ink:#e8674f;
    --new:#4fd089;
    --shadow:0 10px 44px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:20;
  background:var(--surface);
  border-bottom:2px solid var(--ink);
}
.head-inner{
  max-width:860px;margin:0 auto;padding:14px 16px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif)}
.brand-mark{color:var(--accent);font-size:17px}
.brand-name{font-size:24px;font-weight:600;letter-spacing:-.01em}
.brand-name strong{font-weight:700}
.ticker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tk{
  display:flex;align-items:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);
  padding:5px 9px;border-radius:999px;white-space:nowrap;
}
.tk-label{color:var(--accent-ink);font-weight:700}
.tk-date{color:var(--ink-soft);font-weight:500}
.tk-city{color:var(--ink-soft);font-weight:500;font-size:11px}
.tk-weather{gap:4px}
.head-status{
  max-width:860px;margin:0 auto;padding:0 16px 9px;
  font-size:11.5px;color:var(--ink-soft);letter-spacing:.02em;
}

/* ---------- Feed ---------- */
.feed{max-width:860px;margin:0 auto;padding:8px 16px 60px}
.loading{padding:48px 0;text-align:center;color:var(--ink-soft)}

.news{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-bottom:1px solid var(--line);
  padding:22px 0 20px;color:var(--ink);
  font-family:inherit;
  transition:background .15s;
}
.news:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.news:hover .news-title{color:var(--accent-ink)}
.news-title{
  font-family:var(--serif);
  font-size:clamp(23px,4.4vw,33px);
  font-weight:600;line-height:1.18;letter-spacing:-.015em;
  margin:0 0 7px;transition:color .15s;
}
.news-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-soft);
}
.news-src{
  font-weight:600;color:var(--accent-ink);text-transform:uppercase;
  letter-spacing:.04em;font-size:11.5px;
}
.news-badge{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;
  color:#fff;background:var(--new);
  padding:2px 7px;border-radius:4px;text-transform:uppercase;
}
.news.is-new{animation:flash 1.4s ease}
@keyframes flash{
  0%{background:color-mix(in srgb,var(--new) 22%,transparent)}
  100%{background:transparent}
}

/* ---------- Footer ---------- */
.site-foot{border-top:2px solid var(--ink);background:var(--surface)}
.foot-inner{max-width:860px;margin:0 auto;padding:26px 16px 40px}
.foot-brand{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 4px}
.foot-contact{margin:0 0 12px;font-size:14px}
.foot-contact a{color:var(--accent-ink);text-decoration:none;font-weight:600}
.foot-contact a:hover{text-decoration:underline}
.foot-note{margin:0;font-size:11.5px;color:var(--ink-soft);line-height:1.5;max-width:620px}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(12,10,8,.6);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px;overflow-y:auto;
}
.modal-overlay[hidden]{display:none}
.modal{
  position:relative;width:100%;max-width:680px;
  background:var(--surface);border-radius:14px;
  box-shadow:var(--shadow);border:1px solid var(--line);
  padding:30px 30px 26px;
  animation:pop .22s ease;
}
@keyframes pop{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal-close{
  position:absolute;top:12px;right:14px;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
}
.modal-close:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.modal-meta{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;
}
.modal-meta .news-src{font-size:11.5px}
.modal-title{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(24px,5vw,34px);line-height:1.18;letter-spacing:-.015em;
  margin:0 0 16px;
}
.modal-body{font-size:17px;line-height:1.72;color:var(--ink)}
.modal-body p{margin:0 0 15px}
.modal-body .empty{color:var(--ink-soft);font-style:italic}
.modal-source{
  display:inline-block;margin-top:10px;
  color:var(--accent-ink);font-weight:600;text-decoration:none;font-size:15px;
}
.modal-source:hover{text-decoration:underline}

@media (max-width:520px){
  .modal{padding:48px 20px 24px}
  .head-inner{gap:10px}
  .brand-name{font-size:21px}
}