/* =====================================================================
   DIVINE MEDIA 24 — classic broadsheet-newspaper front end
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,900;1,600&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=PT+Sans:wght@400;700&display=swap');

:root {
  --paper: #f6f2e7;
  --paper-dark: #efe9d8;
  --ink: #1c1a16;
  --ink-soft: #3a362e;
  --rule: #1c1a16;
  --rule-light: #c9c1ac;
  /* Muted TEXT colour. --rule-light above is a hairline-border tone: at
     1.6:1 against --paper it is fine for a 1px rule and effectively
     invisible as text, which is what the trending numerals, the
     "Advertisement" label and the 404 numeral used to be set in. This
     reads as quiet without disappearing (4.8:1, passes WCAG AA). */
  --ink-muted: #6f6a5d;
  --maroon: #7a1f1f;
  --maroon-dark: #5c1717;
  --link: #2b4a6b;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-meta: 'PT Sans', Arial, Helvetica, sans-serif;

  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Top utility bar: date + social + subscribe link
   --------------------------------------------------------------------- */
.top-bar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-meta);
  font-size: 12.5px;
  letter-spacing: 0.03em;
}
.top-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 7px;
  padding-bottom: 7px;
  flex-wrap: wrap;
  gap: 8px;
}
.top-bar .date-line { text-transform: uppercase; }
.top-bar .top-links a {
  color: var(--paper);
  margin-left: 14px;
  opacity: 0.88;
}
.top-bar .top-links a:hover { opacity: 1; text-decoration: underline; }

/* ---------------------------------------------------------------------
   Masthead
   --------------------------------------------------------------------- */
.masthead {
  padding: 30px 20px 14px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.masthead .eyebrow {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.masthead .site-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
}
.masthead .site-name a { color: var(--ink); text-decoration: none; }
.masthead .tagline {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 8px;
  font-size: 15px;
}

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */
.site-nav {
  background: var(--paper);
  border-bottom: 3px double var(--rule);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 0;
  padding: 0;
}
.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.site-nav li { border-left: 1px solid var(--rule-light); }
.site-nav li:first-child { border-left: none; }
.site-nav a {
  display: block;
  padding: 12px 14px;
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-nav a:hover, .site-nav a.active {
  color: #fff;
  background: var(--maroon);
  text-decoration: none;
}
.site-nav form { display: flex; align-items: center; padding: 8px 10px; }
.site-nav .search-input {
  font-family: var(--font-meta);
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--rule-light);
  background: #fff;
  width: 140px;
}
.site-nav .search-btn {
  font-family: var(--font-meta);
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   Layout grid
   --------------------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 36px;
  padding: 30px 0 50px;
  align-items: start;
}
.main-col { min-width: 0; }
.side-col { min-width: 0; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Section headers
   --------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 16px;
  padding-bottom: 6px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.section-head h2 a { color: var(--ink); }
.section-head .more-link {
  font-family: var(--font-meta);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
   Lead / featured story
   --------------------------------------------------------------------- */
.lead-story {
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--rule-light);
}
.lead-story .thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 1px solid var(--rule);
  margin-bottom: 14px;
}
.lead-story h1, .lead-story h2.headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 10px;
}
.lead-story h1 a, .lead-story h2.headline a { color: var(--ink); }
.lead-story .dek {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

/* ---------------------------------------------------------------------
   Category badge / byline / meta
   --------------------------------------------------------------------- */
.badge-category {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--maroon);
  padding: 3px 9px;
}
.badge-category:hover { background: var(--maroon-dark); color: #fff; text-decoration: none; }

.byline {
  font-family: var(--font-meta);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}
.byline strong { color: var(--ink); }
.byline .dot { margin: 0 6px; }

/* ---------------------------------------------------------------------
   Article grid / cards
   --------------------------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 30px;
}
.story-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .story-grid, .story-grid.cols-2 { grid-template-columns: 1fr; }
}

.story-card {
  padding: 0 18px;
  border-left: 1px solid var(--rule-light);
}
.story-card:first-child { border-left: none; padding-left: 0; }
.story-card:last-child { padding-right: 0; }
@media (max-width: 700px) {
  .story-card { border-left: none; padding: 0 0 20px; border-bottom: 1px solid var(--rule-light); margin-bottom: 20px; }
}

.story-card .thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid var(--rule);
  margin-bottom: 10px;
}
.story-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 8px 0 6px;
}
.story-card h3 a { color: var(--ink); }
.story-card .excerpt {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

/* Compact list rows (used in sidebar / trending / small category lists) */
.story-list { list-style: none; margin: 0; padding: 0; }
.story-list li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-light);
}
.story-list li:first-child { padding-top: 0; }
.story-list .rank {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--ink-muted);
  line-height: 1;
  min-width: 28px;
}
.story-list .thumb-sm {
  width: 74px; height: 56px; object-fit: cover; border: 1px solid var(--rule); flex-shrink: 0;
}
.story-list h4 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.25;
  margin: 0 0 4px;
}
.story-list h4 a { color: var(--ink); }
.story-list .meta-sm {
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------------
   Sidebar widgets
   --------------------------------------------------------------------- */
.widget {
  margin-bottom: 30px;
  padding-bottom: 6px;
}
.widget-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 6px;
  margin: 0 0 12px;
}

/* Subscribe box styled like a clip-out coupon — nostalgic touch */
.subscribe-box {
  border: 2px dashed var(--ink);
  padding: 20px;
  background: var(--paper-dark);
  position: relative;
}
.subscribe-box::before {
  content: "✂ CLIP & SUBSCRIBE";
  position: absolute;
  top: -11px;
  left: 16px;
  background: var(--paper);
  padding: 0 8px;
  font-family: var(--font-meta);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.subscribe-box h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 6px 0 8px;
}
.subscribe-box p { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 12px; }
.subscribe-box input[type="email"],
.subscribe-box input[type="text"] {
  width: 100%;
  padding: 10px 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--ink);
  background: #fff;
  margin-bottom: 8px;
}
.subscribe-box button {
  width: 100%;
  padding: 10px;
  background: var(--maroon);
  color: #fff;
  border: none;
  font-family: var(--font-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12.5px;
  cursor: pointer;
}
.subscribe-box button:hover { background: var(--maroon-dark); }
.subscribe-note { font-size: 12px; margin-top: 8px; color: var(--ink-soft); }
.subscribe-note.success { color: #2a5b2a; font-weight: 700; }
.subscribe-note.error { color: var(--maroon); font-weight: 700; }

/* Tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
  font-family: var(--font-meta);
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-transform: lowercase;
}
.tag-pill:hover { background: var(--ink); color: var(--paper); text-decoration: none; }

/* ---------------------------------------------------------------------
   Ad slots
   --------------------------------------------------------------------- */
.ad-slot {
  margin: 0 0 26px;
  text-align: center;
  position: relative;
}
.ad-slot-label {
  display: block;
  font-family: var(--font-meta);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.ad-slot img { margin: 0 auto; }
.ad-slot--in_article, .ad-slot--below_article {
  padding: 16px 0;
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
}

/* ---------------------------------------------------------------------
   Single article page
   --------------------------------------------------------------------- */
.article-header { margin-bottom: 18px; }
.article-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 12px 0 12px;
}
.article-dek { font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 12px; }

.article-figure { margin: 0 0 22px; }
.article-figure img { width: 100%; border: 1px solid var(--rule); }
.article-figure figcaption {
  font-family: var(--font-meta);
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 6px 2px 0;
  font-style: italic;
}

.article-body {
  font-size: 1.15rem;
  line-height: 1.7;
  column-gap: 40px;
}
.article-body p { margin: 0 0 20px; }
.article-body p:first-of-type:first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  float: left;
  font-size: 4.2rem;
  line-height: 0.78;
  padding: 6px 8px 0 0;
  color: var(--maroon);
}
.article-body img, .article-body iframe {
  width: 100%;
  border: 1px solid var(--rule);
  margin: 6px 0 22px;
}
.article-body iframe { aspect-ratio: 16/9; height: auto; border: 1px solid var(--rule); }
.article-body h2, .article-body h3 { font-family: var(--font-display); margin: 30px 0 12px; }
.article-body blockquote {
  border-left: 3px solid var(--maroon);
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.2rem;
}
.article-body a { text-decoration: underline; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 26px; }

/* Same admin-edited-HTML styling as .article-body, for the Privacy Policy
   and Advertise pages — minus the drop-cap first letter, which reads as a
   typo/decoration mistake on a policy page rather than a news story. */
.static-page-body { font-size: 1.08rem; line-height: 1.7; }
.static-page-body p { margin: 0 0 18px; }
.static-page-body img { width: 100%; border: 1px solid var(--rule); margin: 6px 0 22px; }
.static-page-body h2, .static-page-body h3 { font-family: var(--font-display); margin: 28px 0 12px; }
.static-page-body h2:first-child, .static-page-body h3:first-child { margin-top: 0; }
.static-page-body blockquote {
  border-left: 3px solid var(--maroon);
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  font-style: italic;
  color: var(--ink-soft);
}
.static-page-body a { text-decoration: underline; }
.static-page-body ul, .static-page-body ol { margin: 0 0 18px; padding-left: 26px; }
.static-page-body li { margin-bottom: 6px; }

/* Sitemap page: section headings + plain link lists. */
.sitemap-section { margin-bottom: 28px; }
.sitemap-section h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 6px;
  margin: 0 0 10px;
}
.sitemap-count { font-family: var(--font-meta); font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.sitemap-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; }
.sitemap-list li { margin-bottom: 6px; break-inside: avoid; }
.sitemap-list a { text-decoration: none; }
.sitemap-list a:hover { text-decoration: underline; }
@media (max-width: 600px) { .sitemap-list { columns: 1; } }

.article-tags {
  margin: 30px 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule-light);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.article-tags .label {
  font-family: var(--font-meta);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-right: 4px;
}

.share-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 20px 0;
  font-family: var(--font-meta);
  font-size: 12px;
}
.share-row a {
  border: 1px solid var(--ink);
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.share-row a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }

/* ---------------------------------------------------------------------
   Category header / breadcrumb
   --------------------------------------------------------------------- */
.page-header {
  border-bottom: 3px double var(--rule);
  padding-bottom: 12px;
  margin-bottom: 26px;
}
.breadcrumb {
  font-family: var(--font-meta);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: 0;
}
.page-header .desc { color: var(--ink-soft); margin-top: 6px; }

/* ---------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 30px 0 10px;
  font-family: var(--font-meta);
  font-size: 13px;
}
.page-link {
  border: 1px solid var(--rule-light);
  padding: 7px 12px;
  color: var(--ink);
}
.page-link:hover { border-color: var(--ink); text-decoration: none; }
.page-link.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.page-ellipsis { padding: 7px 4px; color: var(--ink-muted); }

/* ---------------------------------------------------------------------
   Forms shared (search results / subscribe messages)
   --------------------------------------------------------------------- */
.notice {
  font-family: var(--font-meta);
  font-size: 13.5px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border-left: 3px solid var(--ink);
  background: var(--paper-dark);
}
.notice.success { border-color: #2a5b2a; }
.notice.error { border-color: var(--maroon); }

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-meta);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer {
  border-top: 4px double var(--rule);
  background: var(--paper-dark);
  margin-top: 40px;
  padding: 36px 0 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 26px;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-brand .site-name-sm {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
}
.footer-brand p { font-size: 13px; color: var(--ink-soft); }
.footer-col h5 {
  font-family: var(--font-meta);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 6px;
  margin: 0 0 10px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 7px; font-size: 13.5px; }
.footer-social { display: flex; gap: 10px; margin-top: 10px; }
.footer-social a {
  border: 1px solid var(--rule-light);
  padding: 5px 10px;
  font-family: var(--font-meta);
  font-size: 11px;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.footer-social a:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.footer-bottom {
  border-top: 1px solid var(--rule-light);
  padding-top: 16px;
  font-family: var(--font-meta);
  font-size: 12px;
  color: var(--ink-soft);
}
.footer-bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.footer-copyright { flex: 1 1 auto; }
.footer-back-to-top { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.footer-back-to-top:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 700px) {
  .footer-bottom-row { justify-content: center; text-align: center; }
}

/* ---------------------------------------------------------------------
   Breaking-news ticker (optional; used on homepage)
   --------------------------------------------------------------------- */
.ticker {
  background: var(--maroon);
  color: #fff;
  font-family: var(--font-meta);
  overflow: hidden;
}
.ticker .wrap { display: flex; align-items: center; padding: 8px 20px; }
.ticker .ticker-label {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-right: 1px solid rgba(255,255,255,0.4);
  padding-right: 12px;
  margin-right: 12px;
}
.ticker .ticker-items {
  display: flex;
  gap: 34px;
  font-size: 13px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.ticker .ticker-items::-webkit-scrollbar { display: none; }
.ticker a { color: #fff; }
.ticker a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   404
   --------------------------------------------------------------------- */
.error-page { text-align: center; padding: 80px 20px; }
.error-page .code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 6rem;
  color: var(--ink-muted);
  line-height: 1;
}
.error-page h1 { font-family: var(--font-display); font-size: 1.8rem; }