/* ════════════════════════════════════════════════════════════════════
   Thank God For Donald Trump — America's Patriot Press
   Newspaper-masthead design: cream + navy + red + gold.
   Mirrors the Lovable reference layout.
   ════════════════════════════════════════════════════════════════════ */

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

:root {
  --c-cream:    #FAF6E8;     /* parchment background */
  --c-cream-2:  #F4EFDB;     /* deeper parchment for cards */
  --c-navy:     #0E2848;     /* deep navy — title, headlines */
  --c-navy-2:   #1B2845;     /* nav bar background */
  --c-red:      #B91C2C;     /* Old Glory red */
  --c-red-2:    #9F1727;     /* hover / deeper red */
  --c-gold:     #B88940;     /* warm gold — dates, dividers, footer */
  --c-gold-2:   #C9A053;     /* lighter gold — accents */
  --c-text:     #1F1A12;     /* body, dark warm */
  --c-muted:    #6B5E48;     /* secondary text on cream */
  --c-border:   #E2D9C2;     /* warm border for cards */
  --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body:  'Lora', Georgia, 'Times New Roman', serif;
  --w-content:  1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--c-cream);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
}
body { display: flex; flex-direction: column; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }

/* ══════════════════════════════════════════════════════════════════
   BUNTING BAND — red/white/blue patriotic dot pattern, top & above footer
   ══════════════════════════════════════════════════════════════════ */
.bunting {
  height: 16px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--c-red) 0 24px,
      #ffffff 24px 32px,
      var(--c-navy) 32px 56px,
      #ffffff 56px 64px
    );
}
.bunting-thin {
  height: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--c-gold) 0 6px,
      transparent 6px 14px
    );
}

/* ══════════════════════════════════════════════════════════════════
   MASTHEAD
   ══════════════════════════════════════════════════════════════════ */
.masthead {
  background: var(--c-cream);
  text-align: center;
  padding: 26px 20px 20px;
}
.masthead-meta {
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 3px;
  color: var(--c-gold);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.masthead-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--c-navy);
}
.masthead-title .red { color: var(--c-red); }
.masthead-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--c-muted);
  margin-top: 14px;
}
.masthead-divider {
  max-width: var(--w-content); margin: 18px auto 0;
  height: 2px; background: var(--c-gold);
}

/* ══════════════════════════════════════════════════════════════════
   NAV — navy band with gold caps; active link has red underline
   ══════════════════════════════════════════════════════════════════ */
.nav {
  background: var(--c-navy-2);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-inner {
  max-width: var(--w-content); margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  padding: 0 20px;
}
.nav a {
  font-family: var(--font-serif);
  color: var(--c-gold-2);
  font-size: 14px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 16px 22px;
  position: relative;
}
.nav a:hover { color: #fff; }
.nav a.active {
  background: var(--c-red);
  color: #fff;
}
.nav a.active:hover { color: #fff; }

/* ── Section-page header (kicker + big serif title + dek + gold rule) ── */
.section-header {
  text-align: center;
  padding: 56px 20px 24px;
}
.section-header .label {
  font-family: var(--font-serif);
  color: var(--c-red);
  font-size: 13px; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  margin-bottom: 14px;
}
.section-header h1 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--c-navy);
  margin-bottom: 16px;
  line-height: 1;
}
.section-header .dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px; line-height: 1.5;
  color: var(--c-text);
  max-width: 620px; margin: 0 auto;
}
.section-header .rule {
  width: 80px; height: 2px;
  background: var(--c-gold);
  margin: 28px auto 0;
}

/* ══════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════ */
.container {
  max-width: var(--w-content); margin: 0 auto;
  padding: 0 24px;
}

/* ══════════════════════════════════════════════════════════════════
   HERO — 2/3 lead + 1/3 sidebar
   ══════════════════════════════════════════════════════════════════ */
.hero {
  padding: 32px 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: 2fr 1fr; }
}

/* Lead story */
.lead-story { display: flex; flex-direction: column; }
.lead-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 22px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.lead-image .placeholder-letters {
  color: rgba(255,255,255,0.55);
  font-family: var(--font-serif);
  font-weight: 900; font-size: 48px; letter-spacing: 8px;
  position: relative; z-index: 1;
}
.kicker {
  font-family: var(--font-serif);
  color: var(--c-red);
  font-size: 13px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 16px;
}
.lead-headline {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--c-navy);
  margin-bottom: 18px;
}
.lead-dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 22px;
}
.lead-byline {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 22px;
}
.btn-read {
  display: inline-block;
  background: var(--c-red);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 14px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  transition: background .2s;
}
.btn-read:hover { background: var(--c-red-2); }

/* Sidebar */
.hero-sidebar {
  display: flex; flex-direction: column; gap: 24px;
}
.editors-note {
  background: var(--c-cream-2);
  border-left: 4px solid var(--c-red);
  padding: 22px 24px;
}
.editors-note .label {
  font-family: var(--font-serif);
  color: var(--c-red);
  font-size: 12px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 12px;
}
.editors-note h3 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 22px; line-height: 1.2;
  color: var(--c-navy);
  margin-bottom: 12px;
}
.editors-note p {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.6;
  color: var(--c-text);
}

/* Sidebar story card */
.side-story {
  background: var(--c-cream-2);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.side-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.side-image .placeholder-letters {
  color: rgba(255,255,255,0.5);
  font-family: var(--font-serif);
  font-weight: 900; font-size: 26px; letter-spacing: 5px;
  position: relative; z-index: 1;
}
.side-body { padding: 18px 22px; }
.side-cat {
  font-family: var(--font-serif);
  color: var(--c-red);
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 8px;
}
.side-headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px; line-height: 1.25;
  color: var(--c-navy);
  margin-bottom: 10px;
}
.side-headline:hover { color: var(--c-red); }
.side-dek {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 12px;
}
.side-byline {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-muted);
}

/* ══════════════════════════════════════════════════════════════════
   SECTION — "More From The Front Lines"
   ══════════════════════════════════════════════════════════════════ */
.section-fronts {
  padding: 48px 0;
}
.section-fronts-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--c-gold);
  padding-bottom: 14px;
}
.section-fronts-head h2 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--c-navy);
}
.section-fronts-head .updated {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--c-gold);
}

.story-grid {
  display: grid; gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .story-grid { grid-template-columns: repeat(3, 1fr); } }

.story-card {
  background: var(--c-cream-2);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.story-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.story-image .placeholder-letters {
  color: rgba(255,255,255,0.55);
  font-family: var(--font-serif);
  font-weight: 900; font-size: 32px; letter-spacing: 5px;
  position: relative; z-index: 1;
}
.story-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.story-cat {
  font-family: var(--font-serif);
  color: var(--c-red);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 10px;
}
.story-headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px; line-height: 1.2;
  color: var(--c-navy);
  margin-bottom: 12px;
}
.story-headline:hover { color: var(--c-red); }
.story-dek {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.55;
  color: var(--c-text);
  margin-bottom: 16px;
  flex: 1;
}
.story-byline {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-muted);
}

/* Two-col bottom row variant */
.story-grid.two-col {
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .story-grid.two-col { grid-template-columns: repeat(2, 1fr); max-width: 800px; } }

/* ══════════════════════════════════════════════════════════════════
   FOOTER — bunting + navy + gold
   ══════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--c-navy);
  color: #cdb88a;
  padding: 48px 20px 32px;
  text-align: center;
  margin-top: auto;
}
.god-bless {
  font-family: var(--font-serif);
  color: var(--c-gold);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: 6px;
  margin-bottom: 18px;
}
.footer-copy {
  font-family: var(--font-body);
  color: #d6c8a4;
  font-size: 14px;
  margin-bottom: 4px;
}
.footer-note {
  font-family: var(--font-body);
  font-style: italic;
  color: #9c8e6a;
  font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════
   ARTICLE PAGE
   ══════════════════════════════════════════════════════════════════ */
.article {
  max-width: 760px; margin: 0 auto;
  padding: 48px 24px;
}
.article .kicker { margin-bottom: 18px; }
.article h1 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  color: var(--c-navy);
  margin: 0 0 20px;
}
.article .lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 21px; line-height: 1.5;
  color: var(--c-text);
  margin: 0 0 24px;
}
.article .meta {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 18px;
  margin-bottom: 32px;
}
.article .hero-img {
  margin: 0 0 32px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
}
.article p {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.8;
  margin: 0 0 22px;
  color: var(--c-text);
}
.article blockquote {
  font-family: var(--font-serif);
  border-left: 4px solid var(--c-red);
  padding: 0 0 0 28px; margin: 32px 0;
  font-style: italic;
  font-size: 24px; line-height: 1.4;
  color: var(--c-navy);
  font-weight: 700;
}
.article h2 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 28px;
  color: var(--c-navy);
  margin: 40px 0 14px;
}
.article a {
  color: var(--c-red);
  border-bottom: 1px solid var(--c-red);
}
.article a:hover { color: var(--c-red-2); }

/* ══════════════════════════════════════════════════════════════════
   STORY PHOTOS — fill their container, dim slightly so red kicker reads
   ══════════════════════════════════════════════════════════════════ */
.story-photo, .article-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Container needs position:relative for absolute-positioned img */
.lead-image, .side-image, .story-image { position: relative; }

/* On article pages, the hero img replaces the gradient div entirely */
.article .article-hero-photo {
  position: static;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  margin: 0 0 32px;
}

/* ══════════════════════════════════════════════════════════════════
   IMAGE GRADIENTS — patriotic palette for letter-thumbnails (fallback)
   ══════════════════════════════════════════════════════════════════ */
.grad-flag       { background: linear-gradient(135deg, #7c1d1d 0%, #b35e2c 50%, #1f3563 100%); }
.grad-border     { background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 50%, #1f2c52 100%); }
.grad-economy    { background: linear-gradient(135deg, #4d3a1a 0%, #b07a2a 50%, #1f3563 100%); }
.grad-energy     { background: linear-gradient(135deg, #5a3210 0%, #c2410c 50%, #1a1a1a 100%); }
.grad-factory    { background: linear-gradient(135deg, #1a1a1a 0%, #5a2a10 50%, #c47230 100%); }
.grad-capitol    { background: linear-gradient(135deg, #4a2818 0%, #a8551a 50%, #1f3563 100%); }
.grad-school     { background: linear-gradient(135deg, #1f3563 0%, #b91c2c 50%, #b88940 100%); }
.grad-rally      { background: linear-gradient(135deg, #b91c2c 0%, #1f3563 50%, #b88940 100%); }
.grad-strength   { background: linear-gradient(135deg, #0e2848 0%, #b91c2c 50%, #0e2848 100%); }
.grad-default    { background: linear-gradient(135deg, #0E2848 0%, #B91C2C 50%, #B88940 100%); }

.grad-flag::before, .grad-border::before, .grad-economy::before,
.grad-energy::before, .grad-factory::before, .grad-capitol::before,
.grad-school::before, .grad-rally::before, .grad-strength::before,
.grad-default::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' width='32' height='32' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 8h32M8 0v32' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E");
  opacity: .6;
}