body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #111;
  background-color: #fff;
  margin: 0;
  padding: 0;
  letter-spacing: 0.2px;
}
h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #1b263b;
  line-height: 1.2;
  margin: 0;
}
.hero-strip {
  text-align: center;
  margin: 2rem auto;
}
.nav-bar {
  background-color: #fcfcfc;
  border-bottom: 1px solid #f0f0f0;
  padding: 0.75rem 1rem;
}
.nav-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  width: 46px;
  height: 46px;
  margin-right: 0.75rem;
}
.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-links {
  display: flex;
  align-items: center;
}
.nav-links a {
  margin: 0 0.75rem;
  text-decoration: none;
  font-weight: 500;
  color: #2f3e46;
  position: relative;
  letter-spacing: 0.3px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  background-color: #0097a7;
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-links a:hover::after {
  background-color: #00b4d8;
  width: 100%;
  left: 0;
}
.content {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}
.content p {
  animation: fadeInUp 0.6s ease-out;
  font-size: 1rem;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
}
/* General link styling inside the content area */
.content a {
  color: #1b263b; /* deep, elegant gray-blue tone */
  text-decoration: none;
  border-bottom: 1px solid #0097a7; /* subtle underline effect */
  transition: color 0.3s ease, border-color 0.3s ease;
}

.content a:hover {
  color: #00b4d8; /* brighter teal on hover */
  border-color: #00b4d8;
}

.tagline {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 1.5rem;
}
.below-text-image {
  margin-top: 2rem;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background-color: #e0e0e0;
  border: 2px solid #0097a7;
}
.footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: #777;
  border-top: 2px solid #0097a7;
}

.footer-logo {
  width: 24px;
  height: 24px;
  margin-top: 0.75rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.footer-link {
  color: #0097a7;
  text-decoration: none;
}
.footer-link:hover {
  color: #00b4d8;
}

.article-content {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: rgba(0, 0, 0, 0.75);
  font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;
  font-feature-settings: "liga" 0;
  font-variant-ligatures: none;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6; /* converts 24px line-height on 16px font */
  text-align: left;
}
.article-content strong,
.article-content b {
  font-weight: 700;
}
.article-content .note {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.5);
  font-style: italic;
  font-weight: 400;
}
.article-content hr {
  border: none;
  border-top: 1px solid #ddd; /* light grey */
  margin: .5rem 0;           /* keep nice vertical spacing */
}
.article-meta {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: .25rem;
  font-style: italic;
  margin-top: 0.1rem;
}

.article-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;    /* ↓ reduced from ~2.75rem */
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #1b263b;
}

.article-content h2 {
  font-size: 1.3rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #1b263b;
}

.article-content h3 {
  font-size: 1.1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #1b263b;
}


.article-content p {
  margin-bottom: 1.25rem;
}

.article-content a {
  color: #0097a7;
  text-decoration: underline;
}

.article-content a:hover {
  color: #00b4d8;
}

.article-content img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: 4px;
}
.explore-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 500;
  color: #0097a7;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border: 1px solid #00b4d8;
  border-radius: 4px;
}
.explore-link:hover {
  color: #00b4d8;
}
.tag-accent {
  color: #0097a7;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}