:root{
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#042c54;
  --border:rgba(4,44,84,.22);
  --accent:#df522e;
  --container:1200px;
  --serif:ui-serif,Georgia,"Times New Roman",Times,serif;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:16px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10}
.brand{font-family:var(--serif);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;gap:10px;color:var(--muted)}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(17,24,39,.04);color:var(--text)}

.header-line{border-bottom:1px solid var(--border)}
.header-line:last-child{border-bottom:0}
.header-line-date{font-size:13px;color:var(--muted)}
.header-line-date .container{padding-top:8px;padding-bottom:8px}

.header-line-date,
.header-line-logo,
.header-line-nav,
.header-line-compact{
  overflow:hidden;
  transition:opacity .38s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1), border-color .26s ease;
  will-change:opacity,transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.header-line-date{text-align: center;opacity:1;transform:translateY(0)}
.header-line-logo{max-height:380px;opacity:1;transform:translateY(0)}
.header-line-nav{max-height:84px;opacity:1;transform:translateY(0)}

.topbar-date{justify-self:start;font-weight:700;background:#042c54;color:#ffffff;border-radius:8px;padding:8px 12px;min-width:230px;text-align:center;font-size:15px;line-height:1.2}
.topbar-weather{margin-left:8px;display:inline-flex;align-items:center;gap:6px;font-weight:700;background:rgba(255,255,255,0.08);padding:6px 8px;border-radius:8px;color:#ffffff}
.weather-emoji{font-size:18px;line-height:1}
.weather-temp{margin-left:4px}
.topbar-link{justify-self:center;font-weight:800;letter-spacing:.02em}
.topbar-link:hover{color:var(--accent)}
.topbar-actions{justify-self:end;display:flex;gap:8px;align-items:center}

/* Header/banner sizing and responsive placement */
.header-line-date .container{min-height:120px;padding-top:0}
.topbar{align-items:center}
.topbar-ads{justify-self:center;width:100%}

@media (min-width:900px){
  .header-line-date .container{display:flex;justify-content:center;align-items:center}
  .header-line-date .topbar-ads .ads-top-row{margin:0 auto;grid-template-columns:1fr}
  /* Desktop: keep weather next to date */
  .topbar-date{display:inline-flex;align-items:center;gap:8px;text-align:left}

    /* Ensure topbar-date has the intended background and is vertically centered
      relative to the banner on desktop */
      .topbar-date{background:#ffffff;padding:8px 12px;border-radius:8px;align-self:center;color:#111;border:1px solid var(--border)}
      .topbar-weather{color:inherit}
      .header-line-date .topbar-ads{align-self:center;justify-self:auto;margin-left:0;width:auto}

      /* Put date+weather and ads side-by-side on desktop */
      .header-line-date .topbar{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;width:auto;}
}

@media (max-width:900px){
  /* Stack date above banner on small screens */
  .topbar{display:grid;grid-template-columns:1fr;gap:8px}
  .topbar-date{justify-self:stretch;text-align:center}
  .topbar-ads{justify-self:stretch}
  .header-line-date .topbar-ads .ad-slot{min-height:125px}
  .header-line-date .topbar-ads .ad-slot img{width:100%;height:125px;max-height:none;object-fit:contain}
  .header-line-date .container{min-height:unset;padding-top:8px;padding-bottom:8px}
}

.masthead-logo{display:flex;justify-content:center;align-items:center;padding-top:16px;padding-bottom:16px;min-height:330px}
.menu-btn{border:0;background:transparent;border-radius:8px;width:42px;height:38px;cursor:pointer;padding:6px;justify-self:start}
.menu-btn img{width:24px;height:24px;display:block;object-fit:contain}
.logo-link{display:flex;justify-content:center;align-items:center}
.logo{width:min(1900px,100%);height:300px;display:block;object-fit:contain;max-width:100%}

.header-nav-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding-top:8px;padding-bottom:8px}
.category-strip-inline{justify-content:flex-start;overflow:auto;white-space:nowrap;scrollbar-width:thin;padding-bottom:2px}

.header-line-compact{display:block;max-height:0;opacity:0;transform:translateY(-4px);pointer-events:none;border-bottom-color:transparent}
.masthead-compact{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding-top:8px;padding-bottom:8px;min-height:68px}
.compact-category{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-link-compact{justify-content:flex-end}
.logo-compact{width:280px;height:56px;max-width:100%}

.site-header.is-compact .header-line:not(.header-line-compact){max-height:0;opacity:0;transform:translateY(-5px);pointer-events:none;border-bottom-color:transparent}
.site-header.is-compact .header-line-compact{max-height:86px;opacity:1;transform:translateY(0);pointer-events:auto;border-bottom-color:var(--border)}
.site-header.is-compact .logo-compact{width:220px;height:44px}

.category-strip{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.category-strip a{font-weight:800;font-size:15px;letter-spacing:.02em}
.category-strip a:hover{color:var(--accent)}

.side-menu{position:fixed;left:0;top:0;bottom:0;width:min(380px,88vw);transform:translateX(-102%);transition:transform .18s ease;z-index:60}
.side-menu.open{transform:translateX(0)}
.side-menu-panel{height:100%;background:#fff;border-right:1px solid var(--border);padding:16px;overflow:auto}
.side-menu-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.28);z-index:55}
.side-list{display:grid;gap:6px}
.side-list a{display:block;padding:8px 10px;border-radius:10px;border:1px solid transparent;font-size:14px}
.side-list a:hover{background:rgba(17,24,39,.04);border-color:var(--border)}

.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:18px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.section-title h2{margin:0;font-size:18px;letter-spacing:.02em}
.section-title .meta{color:var(--muted);font-size:13px}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:100%;transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(17,24,39,.08)}
.card-media{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,rgba(185,28,28,.14),rgba(17,24,39,.06));display:block;object-fit:cover}
.card-media-frame{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:10px}
.card-media-video{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;border-radius:10px}
.card-body{padding:14px}
.card-kicker{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:12px;margin-bottom:10px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.badge-accent{border-color:rgba(185,28,28,.35);color:var(--accent)}
.card-title{margin:0 0 6px;font-size:18px;line-height:1.18;font-family:var(--serif)}
.card-excerpt{margin:0;color:var(--muted);font-size:14px;line-height:1.55}

.card-featured{grid-column:span 12;max-width:1200px;width:100%;margin:0 auto;display:flex;flex-direction:column}
.card-featured .card-title{font-size:26px}
.card-featured .card-body{width:100%}
.card-featured .card-media,
.card-featured .card-media-frame,
.card-featured .card-media-video{width:100%;max-width:1200px;height:700px;aspect-ratio:auto}
@media (max-width:1240px){
  .card-featured .card-media,
  .card-featured .card-media-frame,
  .card-featured .card-media-video{height:auto;aspect-ratio:12/7}
}

@media (min-width:640px){
  .card{grid-column:span 6}
  .card.card-featured{grid-column:span 12}
}
@media (min-width:980px){
  .card{grid-column:span 4}
  .card.card-featured{grid-column:span 12}
}

.article{max-width:780px;margin:0 auto;padding-bottom:30px}
.article h1{margin:18px 0 10px;font-size:34px;line-height:1.08;font-family:var(--serif)}
.article-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:16px}
.article-cover{width:100%;border-radius:16px;border:1px solid var(--border);overflow:hidden;margin:0 0 16px}
.article-cover img{width:100%;height:auto;display:block}

.block{margin:14px 0}
.block p{margin:0;color:var(--text);line-height:1.85;font-size:17px}
.block .muted{color:var(--muted)}
.block img{max-width:100%;display:block;border-radius:14px;border:1px solid var(--border)}
.block iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;border:1px solid var(--border)}

.block-wide img{width:100%}

.split{display:grid;grid-template-columns:1fr;gap:14px;align-items:center}
@media (min-width:820px){
  .split{grid-template-columns:1fr 1fr}
  .split.reverse{grid-template-columns:1fr 1fr}
}

.related{margin-top:26px}

.home-block{margin-bottom:18px}
.news-layout{display:grid;grid-template-columns:1fr;gap:0}
.news-feed-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.story-side-ad{grid-column:span 12}
.ad-story-side-mobile{display:block}
.ads-top-row{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch;margin:10px 0 18px}
.ad-slot{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:rgba(4,44,84,.08);border:1px dashed rgba(4,44,84,.35);border-radius:14px;min-height:120px;overflow:hidden}
.ad-slot img{width:100%;height:auto;max-height:420px;display:block;object-fit:contain;flex-shrink:0;background:#ffffff}
.ad-slot-wrap{display:grid;gap:6px}
.ad-label{font-size:11px;color:rgba(4,44,84,.72);}
.ad-slot-content{padding:10px 12px;width:100%;background:rgba(255,255,255,.88);border-top:1px solid rgba(4,44,84,.18)}
.ad-slot-title{font-weight:800;font-size:14px;line-height:1.2;margin-bottom:4px}
.ad-slot-desc{font-size:12px;color:var(--muted)}
.ad-story{border:1px dashed rgba(4,44,84,.35);border-radius:14px;padding:10px;background:rgba(4,44,84,.04)}
.story{border-top:1px solid var(--border);padding-top:10px}
.story-half{grid-column:span 12}
.story-full{grid-column:span 12;display:grid;grid-template-columns:1fr;gap:10px;border:1px solid var(--border);border-radius:14px;padding:12px;max-width:1200px;width:100%;margin:0 auto}
.story-body{display:grid;gap:6px}
.story-body .card-media,
.story-body .card-media-frame,
.story-body .card-media-video{margin-bottom:6px}
.story-full .card-media,
.story-full .card-media-frame,
.story-full .card-media-video{width:100%;max-width:1200px;height:700px;aspect-ratio:auto}
.story-title{margin:0;font-family:var(--serif);line-height:1.2;font-size:23px}
.story-half .story-title{font-size:28px}
.story-full .story-title{font-size:33px}
.story-no-image{border-top:1px solid var(--border)}
.story-no-image .story-title{font-size:26px}

@media (max-width:1240px){
  .story-full .card-media,
  .story-full .card-media-frame,
  .story-full .card-media-video{height:auto;aspect-ratio:12/7}
}

@media (min-width:820px){
  .story-half{grid-column:span 6}
}

/* Desktop: make ad slots layout horizontally (image + content side-by-side) */
@media (min-width:900px){
  /* Desktop: image fixed width and centered, content below matching image width */
  .ad-slot{flex-direction:column;align-items:center}
  .ad-slot img{width:900px;max-width:100%;height:auto;max-height:420px;object-fit:contain;display:block}
  .ad-slot-content{width:100%;max-width:900px;border-top:1px solid rgba(4,44,84,.18);border-left:0;padding:12px}
  .ad-slot-wrap{display:flex;flex-direction:row;gap:10px;justify-content:center}

  /* For feed ads (inside news), show label above the ad slot on desktop */
  .ad-story .ad-slot-wrap{display:block}
  .ad-story .ad-label{display:block;margin-bottom:8px}
  .ad-story .ad-slot{width:100%}

  .ad-story-side .ad-slot-wrap{display:block}
  .ad-story-side .ad-slot{min-height:420px}
  .ad-story-side .ad-slot img{width:100%;max-width:none;height:auto;max-height:420px;object-fit:contain}
  .ad-story-side .ad-slot-content{width:100%;max-width:none}
}

@media (min-width:1200px){
  .news-layout{grid-template-columns:minmax(160px,220px) minmax(0,1fr) minmax(160px,220px);align-items:start;gap:16px}
  .story-side-ad-left{grid-column:1}
  .story-side-ad-right{grid-column:3}
  .story-side-ad{position:sticky;top:92px;align-self:start}
  .news-feed-grid{grid-column:2;min-width:0}
  .ad-story-side-mobile{display:none}
}

@media (max-width:900px){
  .news-layout{width:100%;max-width:none;margin:0}
  .news-feed-grid{width:100%;max-width:none;margin:0;grid-template-columns:repeat(12,minmax(0,1fr))}
  .news-feed-grid > .story{grid-column:span 12}
  .story-side-ad{width:100%;max-width:none;margin:0}
  .ad-story-side-mobile{width:100%}
  .ad-story-side-mobile .ad-slot{min-height:0}
  .ad-story-side-mobile .ad-slot img{height:auto;max-height:none;object-fit:contain;background:#ffffff}
  .story-side-ad-left{display:none}
  .ad-story-side-mobile{display:block}
  .ads-top-row{grid-template-columns:1fr}
}

@media (max-width:860px){
  .topbar{grid-template-columns:auto}
  .topbar-date{min-width:200px;font-size:14px;padding:7px 10px}
  .topbar-link{justify-self:end}
  .topbar-actions{grid-column:1/-1;justify-self:end}
  .header-line-logo{max-height:220px}
  .masthead-logo{min-height:10px;padding-top:8px;padding-bottom:8px}
  .logo{width:min(95vw,900px);height:auto;max-height:150px}
  .logo-compact{width:270px;height:54px;max-width:100%}
  .compact-category{font-size:16px}
  .header-nav-row{gap:8px}
  .category-strip-inline{gap:10px}
  .masthead-compact{grid-template-columns:42px 1fr auto;gap:8px}
  .compact-category{justify-self:center;text-align:center;padding:0 4px}
  .logo-link-compact{justify-self:center;justify-content:center}
  .site-header.is-compact .logo-compact{width:200px;height:40px;max-width:100%}
}

.admin-shell{max-width:1100px;margin:0 auto}
.admin-editor-shell{max-width:none;margin:0;padding-left:24px;padding-right:24px}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row-between{justify-content:space-between}

.btn{background:var(--accent);color:#ffffff;border:0;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.input,.select,.textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#ffffff;color:var(--text)}
.textarea{min-height:90px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){
  .form-grid{grid-template-columns:2fr 1fr}
}

@media (min-width:1100px){
  .admin-editor-shell .form-grid{grid-template-columns:minmax(0,1.8fr) minmax(360px,1fr);gap:16px;align-items:start}
}

.admin-editor-shell .builder{gap:14px}
.admin-editor-shell #blocksContainer{min-height:360px;max-height:70vh;overflow:auto}
.admin-editor-shell .block-item{padding:12px}

@media (max-width:900px){
  .admin-editor-shell{padding-left:14px;padding-right:14px}
  .admin-editor-shell #blocksContainer{max-height:none}
}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.table th{color:var(--muted);font-weight:600}

.a2hs{position:fixed;left:0;right:0;bottom:0;padding:12px;z-index:50}
.a2hs-inner{max-width:var(--container);margin:0 auto;background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.a2hs-title{font-weight:700}
.a2hs-sub{font-size:13px;color:var(--muted)}
.a2hs-actions{display:flex;gap:10px}

.builder{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:980px){
  .builder{grid-template-columns:1fr}
}
.block-item{border:1px solid var(--border);border-radius:14px;padding:10px;background:rgba(17,24,39,.02)}
.block-item .row{justify-content:space-between}
.small{font-size:12px;color:var(--muted)}

.admin-topbar{display:grid;grid-template-columns:1fr;gap:10px;padding-top:12px;padding-bottom:12px}
.admin-topbar .brand{font-size:24px;line-height:1}
.admin-top-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.admin-side-panel .admin-side-links{display:grid;gap:12px}
.admin-link{display:block;padding:10px 12px;border-radius:10px;border:1px solid transparent;font-size:14px;border-bottom:1px solid rgba(4,44,84,.14)}
.admin-link:hover{background:rgba(17,24,39,.04);border-color:var(--border)}
.admin-link.is-active{border-color:var(--border);background:rgba(4,44,84,.06);font-weight:700}
.admin-group{border:1px solid var(--border);border-radius:10px;background:#ffffff}
.admin-group summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:700}
.admin-group summary::-webkit-details-marker{display:none}
.admin-sub-links{display:grid;gap:0;padding:0 10px 10px}
.admin-sub-links .admin-link{position:relative;margin-left:12px;padding-left:22px;border-radius:0;border:0;border-bottom:1px solid rgba(4,44,84,.12)}
.admin-sub-links .admin-link::before{content:'•';position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;line-height:1}
.admin-sub-links .admin-link:last-child{border-bottom:0}

.social-links-row{display:flex;justify-content:center;align-items:center;gap:20px;padding:18px 0 8px;width:100%;margin:0 auto}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--border);border-radius:999px;background:#fff}
.social-link:hover{background:rgba(4,44,84,.06)}

.external-news-wrap{margin-top:12px;border:1px solid var(--border);border-radius:14px;background:rgba(17,24,39,.04);padding:14px}
.external-news-grid{display:grid;grid-template-columns:1fr;gap:14px}
.external-news-card{background:#ffffff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.external-news-head{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:800}
.external-news-frame{display:block;width:100%;height:600px;border:0;background:#f3f4f6}

@media (min-width:980px){
  .external-news-grid{grid-template-columns:1fr 1fr}
}