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

:root, :host {
  /* Financial Times / Monocle Warm Paper Palette */
  --color-paper: #FDF9F1;
  --color-navy: #111111; /* Deep black ink */
  --color-burgundy: #9E2A2B;
  --color-line: #E2D9C8;
  --color-muted: #5A5A5A;
  --color-metal: #7A7A7A;
  --color-gold: #C0A062;
  --color-heritage: #2A3B38;
  --color-blueprint: #2F4F4F;
  --color-stone: #EAE3D6;
  
  --font-heading: "Playfair Display", ui-serif, Georgia, serif;
}

body {
  background: var(--color-paper) !important;
  color: var(--color-navy) !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.02em;
}

/* Force override any legacy Tailwind gradients that were ruining the flat paper look */
section[class*="bg-[linear-gradient"] {
  background: var(--color-paper) !important;
  border-bottom: 1px solid var(--color-line);
}

/* Correct text colors inside overridden dark sections */
section[class*="bg-[linear-gradient"] .text-white, 
section[class*="bg-[linear-gradient"] .text-white\/78, 
section[class*="bg-[linear-gradient"] .text-white\/70 {
  color: var(--color-navy) !important;
}

.bg-navy {
  background-color: var(--color-navy) !important;
  color: #FFFFFF !important;
}

.text-navy {
  color: var(--color-navy) !important;
}

.bg-white {
  background-color: #FFFFFF !important;
}

/* Elegant Image Treatments */
.editorial-image-wrapper {
  border: 1px solid var(--color-navy);
  padding: 0.5rem;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Card and Button Alignment Fixes */
.grid > article,
article[class*="border"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    align-self: stretch !important;
}

.grid {
    align-items: stretch !important;
}

.grid > article > a,
article[class*="border"] > a {
    margin-top: auto !important;
}

/* Nuke Legacy Tailwind List Markers (Red Squares) */
article ul {
    list-style: none !important;
    padding-left: 0 !important;
}

article ul li {
    list-style-type: none !important;
    list-style-image: none !important;
}

article ul li::marker,
article ul li::before,
article ul li::after {
    display: none !important;
    content: none !important;
    background: none !important;
}