/* Professional editorial layout refresh — October 2026
   Keeps the existing PHP templates and functions; presentation-only overrides. */
:root {
  --sky: #00BFFF;
  --sky-600: #009bd6;
  --sky-700: #007fae;
  --sky-800: #006a91;
  --sky-wash: #e9f8ff;
  --sky-mist: #f5fbfe;
  --ink: #172b36;
  --ink-soft: #4a606c;
  --rule: #dce7ec;
  --paper: #f7fafc;
  --surface: #fff;
  --gap: clamp(18px, 2.2vw, 32px);
  --radius: 12px;
  --wrap: 1320px;
}
html { scroll-padding-top: 88px; }
body { background: #f6f9fb; color: var(--ink); line-height: 1.65; }
.wrap, .container {
  width: min(var(--wrap), calc(100% - clamp(32px, 7vw, 112px)));
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 0;
}
main#main { min-height: 55vh; }
p { line-height: 1.75; }
a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
:focus-visible { outline: 3px solid rgba(0,191,255,.65); outline-offset: 3px; }

/* Header and navigation: calm, high-contrast, publication-first */
.utility { background: #087ca5; font-size: 13px; }
.utility-in { min-height: 38px; gap: 18px; }
.nameplate { background: #fff; }
.nameplate-in { min-height: 122px; padding-block: 24px; gap: clamp(20px, 3vw, 48px); }
.brand { flex: 0 1 470px; min-width: 180px; }
.brand img { max-width: 440px; }
.wordmark { font-size: clamp(2rem, 4vw, 3.25rem); }
.nameplate-aside { max-width: 380px; }
.nameplate-ad { min-width: 0; }
.mainnav { background: #00bfff; color: #07364a; box-shadow: inset 0 -1px rgba(0,70,100,.18); }
.mainnav-in { gap: 8px; min-height: 54px; }
.navlist a, .sub-toggle { padding-inline: clamp(10px, 1.1vw, 17px); min-height: 54px; font-size: .94rem; font-weight: 650; }
.navlist a:hover, .navlist a.active, .sub-toggle:hover { background: rgba(255,255,255,.28); color: #05394f; }
.search-form, .header-search { border-radius: 999px; }
.ad-slot { margin-block: 20px; }
.ad-label { letter-spacing: .08em; font-size: 10px; color: #82919a; }

/* Generous page breathing room and consistent content widths */
.page { padding-block: clamp(28px, 4vw, 52px) clamp(48px, 6vw, 76px); }
.lead { padding-block: clamp(24px, 3vw, 42px) 20px; }
.lead-grid { grid-template-columns: minmax(0, 1.7fr) minmax(290px, .95fr); gap: clamp(24px, 3vw, 42px); }
.with-sidebar { grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); gap: clamp(28px, 3.2vw, 48px); }
.grid-2, .grid-3, .grid-4 { gap: clamp(18px, 2vw, 30px); }
.home-section, .section-block { margin-block: clamp(34px, 4.5vw, 64px); }
.section-head { margin-bottom: 22px; padding-bottom: 13px; border-bottom: 1px solid var(--rule); }
.section-head h2, .section-title { font-size: clamp(1.45rem, 2vw, 1.9rem); letter-spacing: -.025em; }
.slide-media, .card-media, .row-media, .article-figure img, .gallery-grid img { border-radius: 12px; }
.slide-media { box-shadow: 0 12px 30px rgba(15,55,75,.08); }
.slide-body { padding-top: 20px; }
.slide-title { font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.12; }
.slide-excerpt { font-family: var(--sans); font-size: 1.04rem; color: #50636e; }
.cat-label, .category-label { border-radius: 5px; }

/* Cards: editorial hierarchy instead of crowded boxes */
.card, .story-card, .row-card, .desk-card, .message-card {
  border-color: #e0e9ee;
}
.card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 3px 12px rgba(19,54,70,.035); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(19,54,70,.09); }
.card-body { padding: 18px 20px 21px; }
.card-title { line-height: 1.28; }
.card-excerpt { color: #536873; }
.row-card { gap: 16px; padding-bottom: 18px; }
.row-media { border-radius: 9px; }
.meta, .story-meta { color: #74838b; font-size: .82rem; }

/* Article page */
.article-head { max-width: 900px; margin: 0 auto 26px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 20px; font-size: .86rem; color: #71818a; }
.crumbs a { text-decoration: none; color: #007fae; font-weight: 600; }
.article-title { font-size: clamp(2.2rem, 4.2vw, 3.65rem); line-height: 1.07; letter-spacing: -.04em; max-width: 22ch; margin-block: 10px 18px; }
.article-dek { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: #526671; max-width: 72ch; margin-bottom: 22px; }
.article-byline { padding-block: 15px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); gap: 14px; }
.byline-photo { border-radius: 50%; width: 44px; height: 44px; object-fit: cover; }
.byline-meta { color: #7a8991; font-size: .82rem; gap: 12px; }
.article-figure { margin: 28px 0 34px; }
.article-figure img { width: 100%; max-height: 680px; aspect-ratio: 16 / 9; object-fit: cover; background: #e8f3f8; }
.prose { max-width: 76ch; margin-inline: auto; font-size: 1.08rem; line-height: 1.9; color: #263b46; }
.prose p { margin-block: 0 1.45em; }
.prose h2 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); margin: 1.7em 0 .65em; line-height: 1.2; }
.prose h3 { font-size: 1.35rem; margin: 1.5em 0 .55em; }
.prose blockquote { margin: 1.8em 0; padding: 1.1em 1.35em; border-left: 4px solid var(--sky); background: var(--sky-mist); border-radius: 0 10px 10px 0; color: #34505e; }
.prose img, .prose figure { border-radius: 10px; }
.prose a { color: #007fae; text-decoration-thickness: 1px; }
.source-note { color: #71818a; font-size: .88rem; }
.sidebar { min-width: 0; }
.sidebar > *, .sidebar .widget { margin-bottom: 24px; }
.sidebar h2, .sidebar h3, .widget-title { font-size: 1.15rem; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--sky); }
.gallery { margin-top: 38px; }
.gallery-grid { gap: 12px; }
.tags { gap: 8px; }
.tags a { display: inline-flex; border: 1px solid #d9eaf2; background: #f1faff; border-radius: 999px; padding: 5px 11px; text-decoration: none; font-size: .82rem; }
.prevnext { gap: 16px; margin-block: 34px; }
.prevnext > div { border: 1px solid var(--rule); border-radius: 10px; padding: 16px; background: #fff; }
.comments { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); }
.form-card, .comment { border: 1px solid var(--rule); border-radius: 12px; padding: 18px; background: #fff; }
input, textarea, select { border-radius: 8px; }
.btn, button.btn { border-radius: 8px; padding: 11px 18px; font-weight: 700; }

/* Editorial information and footer */
.reporter-box { display: flex; gap: 18px; padding: 22px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; margin-block: 30px; }
.sitefoot { margin-top: 48px; background: #073e55; color: rgba(255,255,255,.86); padding-top: 52px; }
.sitefoot-grid { gap: clamp(24px, 3vw, 44px); padding-bottom: 40px; }
.sitefoot h2 { color: #fff; font-size: 1.05rem; margin-bottom: 16px; }
.sitefoot a { color: #e5f7ff; text-decoration: none; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }
.foot-name { color: #fff; font-size: 1.35rem; font-weight: 750; }
.sitefoot-base { border-top: 1px solid rgba(255,255,255,.17); padding-block: 18px; }
.totop { border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 13px; }

/* Accessible focus, motion, and responsive gutters */
@media (min-width: 1500px) {
  .wrap, .container { width: min(var(--wrap), calc(100% - 140px)); }
}
@media (max-width: 1050px) {
  .with-sidebar { grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
  .lead-grid { gap: 24px; }
  .nameplate-ad { display: none; }
}
@media (max-width: 800px) {
  .wrap, .container { width: calc(100% - 36px); }
  .nameplate-in { min-height: auto; padding-block: 18px; }
  .nameplate-aside { display: none; }
  .lead-grid, .with-sidebar { grid-template-columns: minmax(0, 1fr); }
  .lead-grid { gap: 26px; }
  .with-sidebar { gap: 32px; }
  .article-head { margin-bottom: 20px; }
  .article-title { max-width: 100%; font-size: clamp(2rem, 7vw, 3rem); }
  .prose { font-size: 1.02rem; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar { border-top: 1px solid var(--rule); padding-top: 26px; }
  .sitefoot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .wrap, .container { width: calc(100% - 28px); }
  .utility-in { padding-block: 7px; }
  .utility-social { margin-left: 0; }
  .nameplate-in { gap: 12px; }
  .wordmark { font-size: 2rem; }
  .lead { padding-top: 18px; }
  .slide-title { font-size: 1.8rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .article-title { font-size: 2.05rem; }
  .article-figure { margin-block: 22px; }
  .article-figure img { aspect-ratio: 4 / 3; }
  .article-byline { align-items: flex-start; flex-wrap: wrap; }
  .sitefoot-grid { grid-template-columns: minmax(0, 1fr); }
  .reporter-box { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Homepage layout refinement: remove narrow multi-column story tiles. */
@media (min-width: 1081px) {
  .with-sidebar {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap: clamp(24px, 2.6vw, 42px);
    align-items: start;
  }
  .with-sidebar > :first-child { min-width: 0; }
  .with-sidebar > .sidebar,
  .with-sidebar > aside { min-width: 0; width: 100%; }
  .layout-b {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
  }
  .layout-c {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
  }
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
  }
  .layout-b > *, .layout-c > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
  .home-section { margin-bottom: clamp(34px, 4vw, 54px); }
  .home-section .section-head { margin-bottom: 20px; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .layout-b, .layout-c, .grid-3, .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .layout-b, .layout-c, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Page and article detail: strictly one main column and one widget aside */
.with-sidebar { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,320px); gap:clamp(24px,3.2vw,42px); align-items:start; }
.page-main, .with-sidebar > article { min-width:0; }
.page-head { margin:0 0 24px; }
.page-head h1 { margin:0 0 10px; }
.page-head p { margin:0; }
.post-aside { min-width:0; display:grid; gap:24px; }
.post-aside .sidebar { min-width:0; }
.post-aside .related { margin:0; }
.post-aside .related .section-head { margin-bottom:14px; }
.post-aside .related .stack { display:grid; gap:16px; }
.post-aside .related .card { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; }
.post-aside .related .card-media { margin:0; }
@media (max-width: 820px) {
  .with-sidebar { grid-template-columns:minmax(0,1fr); }
  .post-aside { grid-row:auto; }
}

/* FINAL LAYOUT ENFORCEMENT — pages and individual posts must have exactly
   two top-level columns: one content area on the left and one widget aside
   on the right. Widgets and related-story blocks stack inside the aside. */
.page .with-sidebar,
.wrap.page .with-sidebar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  gap: clamp(24px, 3.2vw, 42px) !important;
}
.page .with-sidebar > .page-main,
.page .with-sidebar > article,
.wrap.page .with-sidebar > .page-main,
.wrap.page .with-sidebar > article {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
}
.page .with-sidebar > .sidebar,
.page .with-sidebar > .post-aside,
.page .with-sidebar > aside,
.wrap.page .with-sidebar > .sidebar,
.wrap.page .with-sidebar > .post-aside,
.wrap.page .with-sidebar > aside {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page .with-sidebar .sidebar,
.page .with-sidebar .post-aside .sidebar,
.wrap.page .with-sidebar .sidebar {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  position: static !important;
}
.page .with-sidebar .post-aside .related {
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 820px) {
  .page .with-sidebar,
  .wrap.page .with-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page .with-sidebar > .page-main,
  .page .with-sidebar > article,
  .page .with-sidebar > .sidebar,
  .page .with-sidebar > .post-aside,
  .page .with-sidebar > aside,
  .wrap.page .with-sidebar > .page-main,
  .wrap.page .with-sidebar > article,
  .wrap.page .with-sidebar > .sidebar,
  .wrap.page .with-sidebar > .post-aside,
  .wrap.page .with-sidebar > aside {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* FINAL HOME + CATEGORY PAGE STRUCTURE: one content column and one widget aside. */
.home-page-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 7fr) minmax(270px, 3fr) !important;
  gap: clamp(24px, 3vw, 42px) !important;
  align-items: start !important;
  margin-inline: auto;
}
.home-main-column,
.home-widget-aside,
.listing-main-column { min-width: 0 !important; width: 100%; }
.home-widget-aside {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding-top: 28px;
}
.home-widget-aside .sidebar {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 24px !important;
  position: static !important;
}
.home-page-layout .lead { padding-top: 0; }
.home-page-layout .lead-grid { display: block !important; }
.home-page-layout .latest-panel { display: none !important; }
.home-page-layout .celebrate { margin-top: 26px; }
.home-page-layout .desk { margin-block: 28px; }
.home-sections { min-width: 0; }
.category-listing-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 7fr) minmax(270px, 3fr) !important;
  gap: clamp(24px, 3vw, 42px) !important;
  align-items: start !important;
}
.category-listing-grid > .listing-main-column { grid-column: 1 !important; min-width: 0 !important; }
.category-listing-grid > .sidebar,
.category-listing-grid > aside { grid-column: 2 !important; min-width: 0 !important; }
.category-listing-wrap .page-head { margin: 0 0 24px; padding: 0; }
.category-listing-wrap .page-head h1 { margin: 0 0 10px; }
.category-listing-wrap .page-head p { margin: 0 0 8px; }
@media (max-width: 900px) {
  .home-page-layout,
  .category-listing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .home-widget-aside { padding-top: 0; }
  .category-listing-grid > .listing-main-column,
  .category-listing-grid > .sidebar,
  .category-listing-grid > aside { grid-column: 1 !important; }
}

/* CATEGORY SIDEBAR — final override. Keep the entire aside as ONE vertical stack.
   site.css assigns .sidebar two grid columns at tablet widths; override that rule
   on category archives regardless of viewport size. */
.category-listing-wrap .category-listing-grid > aside.sidebar,
.category-listing-wrap .category-listing-grid > .sidebar,
.category-listing-grid > aside.sidebar {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  position: static !important;
}
.category-listing-wrap .category-listing-grid > aside.sidebar > *,
.category-listing-wrap .category-listing-grid > .sidebar > *,
.category-listing-grid > aside.sidebar > * {
  display: block;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.category-listing-grid > aside.sidebar .ad-slot,
.category-listing-grid > aside.sidebar .side-block,
.category-listing-grid > aside.sidebar .widget {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 900px) {
  .category-listing-wrap .category-listing-grid > aside.sidebar,
  .category-listing-grid > aside.sidebar {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
}


/* Expanded advert placements */
.billboard-ad-slot, .full-width-ad-slot, .mobile-header-ad-slot, .home-feed-ad-slot, .category-feed-ad-slot { clear: both; text-align: center; }
.billboard-ad-slot img, .full-width-ad-slot img, .mobile-header-ad-slot img, .home-feed-ad-slot img, .category-feed-ad-slot img { display:block; max-width:100%; height:auto; margin-inline:auto; }
.mobile-header-ad-slot { display:none; }
.mobile-sticky-ad { display:none; }
.mobile-sticky-ad img { display:block; max-width:100%; max-height:90px; width:auto; height:auto; margin:auto; }
.mobile-sticky-close { position:absolute; right:4px; top:2px; border:0; border-radius:50%; background:#172033; color:#fff; width:24px; height:24px; cursor:pointer; z-index:2; }
.mobile-sticky-ad { position:fixed; z-index:9999; left:0; right:0; bottom:0; padding:6px 30px 6px 6px; background:rgba(255,255,255,.98); box-shadow:0 -2px 12px rgba(0,0,0,.18); text-align:center; }
.ad-sidebar-half img { max-width:100%; height:auto; }
.ad-sidebar-skyscraper img { width:160px; max-width:100%; height:auto; }
@media (max-width:767px) {
  .mobile-header-ad-slot { display:block; }
  .billboard-ad-slot img, .full-width-ad-slot img { width:100%; height:auto; }
  .mobile-sticky-ad { display:block; }
  .mobile-sticky-ad[hidden] { display:none; }
}
@media (min-width:768px) { .mobile-sticky-ad { display:none !important; } }