/* ── SHARED SECTION PAGE STYLES ── */
/* Used by city-news.html, schools.html, business.html */

.topbar { background: #0D1B2A; color: #aab; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.06em; padding: 7px 24px; display: flex; justify-content: space-between; align-items: center; }
.topbar a { color: #E8A020; }
.topbar-links { display: flex; gap: 18px; }

.masthead { background: #F9F5EC; border-bottom: 3px double #C8B89A; }
.masthead-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: stretch; }
.masthead-text { padding: 18px 24px 14px; border-right: 1px solid #C8B89A; display: flex; flex-direction: column; justify-content: center; }
.masthead-kicker { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: #5A5A5A; margin-bottom: 4px; }
.masthead-title { font-family: 'Playfair Display', serif; font-size: clamp(36px,5vw,60px); font-weight: 900; line-height: 0.92; color: #0D1B2A; letter-spacing: -2px; }
.masthead-title span { color: #E8A020; font-style: italic; }
.masthead-tagline { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #5A5A5A; margin-top: 6px; }
.masthead-img { width: 160px; object-fit: cover; object-position: center; }

.nav { background: #0D1B2A; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 2px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav a { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ccd; padding: 13px 13px; display: block; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.nav a:hover { color: #fff; border-bottom-color: rgba(232,160,32,0.5); }
.nav a.active { color: #E8A020; border-bottom-color: #E8A020; }
.nav-spacer { flex: 1; }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 10px; color: #fff; margin-left: auto; }
.nav-mobile-menu { display: none; background: #0D1B2A; border-top: 1px solid rgba(255,255,255,0.1); }
.nav-mobile-menu.open { display: block; }
.nav-mobile-menu a { display: block; padding: 12px 20px; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ccd; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-mobile-menu a:hover { background: rgba(255,255,255,0.05); color: #E8A020; }

/* SECTION HERO */
.section-hero { background: #0D1B2A; padding: 44px 24px 36px; }
.section-hero-inner { max-width: 1100px; margin: 0 auto; }
.section-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #E8A020; margin-bottom: 8px; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(36px,5vw,56px); font-weight: 900; color: #fff; line-height: 1; margin-bottom: 12px; }
.section-desc { font-family: 'Source Serif 4', serif; font-size: 16px; color: #aab; line-height: 1.65; max-width: 600px; font-style: italic; }

/* SECTION WRAP */
.section-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 16px 48px; }

/* FEATURED STORY */
.featured-story { display: grid; grid-template-columns: 1fr 280px; gap: 0; border-bottom: 2px solid #C8B89A; margin-bottom: 32px; padding-bottom: 32px; }
.featured-main { padding-right: 28px; border-right: 1px solid #C8B89A; }
.featured-sidebar { padding-left: 28px; }

.label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 7px; display: inline-block; }
.featured-headline { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 900; line-height: 1.1; color: #0D1B2A; margin-bottom: 10px; cursor: pointer; transition: color 0.15s; }
.featured-headline:hover { color: #1A4A7A; }
.featured-deck { font-size: 16px; line-height: 1.65; color: #5A5A5A; font-style: italic; margin-bottom: 10px; }
.featured-meta { font-family: 'Inter', sans-serif; font-size: 11px; color: #aaa; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #C8B89A; }
.featured-img-placeholder { width: 100%; height: 200px; background: linear-gradient(145deg, #1A4A7A 0%, #0D1B2A 100%); border: 1px solid #C8B89A; border-radius: 2px; margin-bottom: 14px; }
.featured-body { font-size: 15px; line-height: 1.8; color: #222; margin-bottom: 14px; }
.read-more { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1A4A7A; border-bottom: 2px solid #E8A020; padding-bottom: 1px; transition: color 0.15s; }
.read-more:hover { color: #B87D10; }

.sidebar-story-list { display: flex; flex-direction: column; }
.sidebar-mini { padding: 13px 0; border-bottom: 1px solid #C8B89A; }
.sidebar-mini:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-mini-headline { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; line-height: 1.25; color: #0D1B2A; margin-bottom: 4px; cursor: pointer; transition: color 0.15s; }
.sidebar-mini-headline:hover { color: #1A4A7A; }
.sidebar-mini-date { font-family: 'Inter', sans-serif; font-size: 10px; color: #bbb; }

/* CONTENT + SIDEBAR LAYOUT */
.content-with-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.story-section {}

.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-header h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #0D1B2A; white-space: nowrap; }
.section-rule { flex: 1; height: 2px; }

/* STORY GRID */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.story-card { border-top: 3px solid #C8B89A; padding-top: 14px; }
.story-img { width: 100%; height: 130px; background: #EDE8DC; border: 1px solid #C8B89A; border-radius: 2px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.15em; color: #bbb; text-transform: uppercase; }
.story-headline { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; line-height: 1.22; color: #0D1B2A; margin-bottom: 7px; cursor: pointer; transition: color 0.15s; }
.story-headline:hover { color: #1A4A7A; }
.story-deck { font-size: 13px; line-height: 1.58; color: #5A5A5A; margin-bottom: 6px; }
.story-meta { font-family: 'Inter', sans-serif; font-size: 10px; color: #bbb; }

/* PAGINATION */
.pagination { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.page-btn { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 7px 12px; border: 1px solid #C8B89A; border-radius: 3px; color: #5A5A5A; background: #fff; transition: background 0.15s, color 0.15s; cursor: pointer; }
.page-btn:hover { background: #0D1B2A; color: #fff; border-color: #0D1B2A; }
.page-btn.active { background: #0D1B2A; color: #fff; border-color: #0D1B2A; cursor: default; }
.page-ellipsis { font-family: 'Inter', sans-serif; font-size: 13px; color: #bbb; padding: 0 4px; }
.page-next { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; background: #E8A020; color: #0D1B2A; border: none; border-radius: 3px; cursor: pointer; margin-left: 4px; transition: background 0.15s; }
.page-next:hover { background: #F0B030; }

/* ASIDE */
.aside { display: flex; flex-direction: column; gap: 0; }
.aside-block { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid #C8B89A; }
.aside-block:last-child { border-bottom: none; margin-bottom: 0; }
.aside-title { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #0D1B2A; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #0D1B2A; }
.aside-mini { padding: 11px 0; border-bottom: 1px solid #C8B89A; }
.aside-mini:last-child { border-bottom: none; padding-bottom: 0; }
.aside-mini-headline { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; line-height: 1.25; color: #0D1B2A; margin-bottom: 3px; cursor: pointer; transition: color 0.15s; }
.aside-mini-headline:hover { color: #1A4A7A; }
.aside-mini-date { font-family: 'Inter', sans-serif; font-size: 10px; color: #bbb; }

/* NEWSLETTER MINI */
.nl-mini { background: #0D1B2A; border-radius: 4px; padding: 18px; color: #fff; }
.nl-mini-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #E8A020; margin-bottom: 5px; }
.nl-mini h3 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 900; line-height: 1.15; margin-bottom: 6px; }
.nl-mini p { font-family: 'Inter', sans-serif; font-size: 12px; color: #889; line-height: 1.55; margin-bottom: 10px; }
.nl-mini input { width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; padding: 9px 12px; color: #fff; font-family: 'Inter', sans-serif; font-size: 12px; outline: none; margin-bottom: 7px; transition: border-color 0.15s; }
.nl-mini input::placeholder { color: rgba(255,255,255,0.35); }
.nl-mini input:focus { border-color: #E8A020; }
.nl-mini-btn { width: 100%; background: #E8A020; color: #0D1B2A; border: none; border-radius: 3px; padding: 9px; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.15s; }
.nl-mini-btn:hover { background: #F0B030; }
.nl-disclaimer { font-family: 'Inter', sans-serif; font-size: 10px; color: rgba(255,255,255,0.25); text-align: center; margin-top: 6px; }

/* AD BLOCK */
.ad-block { background: #EDE8DC; border: 1px dashed #C8B89A; border-radius: 3px; padding: 18px; text-align: center; }
.ad-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #bbb; margin-bottom: 6px; }
.ad-block h4 { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: #0D1B2A; margin-bottom: 6px; }
.ad-block p { font-family: 'Inter', sans-serif; font-size: 11px; color: #5A5A5A; line-height: 1.55; margin-bottom: 12px; }
.ad-btn { display: inline-block; background: #0D1B2A; color: #fff; border-radius: 3px; padding: 8px 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.15s; }
.ad-btn:hover { background: #1A4A7A; }

/* TIP LINK */
.tip-link { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1A4A7A; border-bottom: 2px solid #E8A020; padding-bottom: 1px; transition: color 0.15s; }
.tip-link:hover { color: #B87D10; }

/* FOOTER */
.footer { background: #0D1B2A; color: #aab; padding: 36px 24px 20px; margin-top: 20px; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.09); margin-bottom: 20px; }
.footer-brand-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 3px; }
.footer-brand-title span { color: #E8A020; font-style: italic; }
.footer-brand-tagline { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.18em; color: #E8A020; text-transform: uppercase; margin-bottom: 10px; }
.footer-brand p { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.65; color: #667; }
.footer-col h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.footer-col a { display: block; font-family: 'Inter', sans-serif; font-size: 12px; color: #667; padding: 3px 0; transition: color 0.15s; }
.footer-col a:hover { color: #E8A020; }
.footer-bottom { display: flex; justify-content: space-between; font-family: 'Inter', sans-serif; font-size: 11px; color: #445; flex-wrap: wrap; gap: 8px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .featured-story { grid-template-columns: 1fr; }
  .featured-main { padding-right: 0; border-right: none; border-bottom: 1px solid #C8B89A; padding-bottom: 20px; margin-bottom: 20px; }
  .featured-sidebar { padding-left: 0; }
  .content-with-sidebar { grid-template-columns: 1fr; }
  .aside { order: -1; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .masthead-inner { grid-template-columns: 1fr; }
  .masthead-img { display: none; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 600px) {
  .story-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; gap: 4px; text-align: center; }
}