:root{
  --title-blue:#add8e6;
  --ink:#44295f;
}

*{ box-sizing:border-box; }

body {
  margin: 0;
  padding: 20px;
  font-family: 'Georgia', serif;
  background-image: url('assets/Watercolor-Background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #333;
  text-align: center;
}

.page{
  max-width: 960px;         /* full layout width */
  margin: 0 auto;
  padding: 0 16px;
}

header { margin: 20px 0; }

.logo {
  max-width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.title-wrap {
  margin: 0 auto 12px auto;
  max-width: 780px;
}

.intro-text {
  font-size: 1.05em;
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink);
  margin: 0 0 4px 0;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Title: single serif for cohesion, responsive size, lighter glow, tighter gap */
.magic-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem);
  letter-spacing: 0.5px;
  word-spacing: 0.15em;        /* subtler gap between words */
  color: var(--title-blue);
  text-shadow:
    1px 1px 1px rgba(0,0,0,0.55),
    0 0 10px rgba(173,216,230,0.65);
  margin: 0.2em 0 0.15em 0;
}
.magic-title .tight{ letter-spacing: 0.3px; } /* keeps “Nation” compact */

.subtitle {
  font-family: 'Georgia', serif;
  font-size: 1.15em;
  color: #5a2b82;
  font-style: italic;
  margin: 0 0 18px 0;
}

.container {
  margin: 0 auto;
  max-width: 780px;
  width: 100%;
  padding: 0 8px 28px 8px;
}

/* Lead paragraph in elegant serif to match title */
.lead-text{
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.2vw + 0.6rem, 1.25rem);
  color: var(--ink);
  margin: 0 auto 22px auto;
  max-width: 640px;
  line-height: 1.55;
  letter-spacing: 0.2px;
}

/* Featured image: bigger on desktop, fluid on smaller screens */
.featured-image {
  display: block;
  width: 100%;
  max-width: 700px;           /* up from 560px */
  height: auto;
  margin: 0 auto 22px auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  object-fit: cover;
}

.btn {
  display: inline-block;
  background-color: #add8e6;
  color: white;
  padding: 12px 28px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1.05em;
  font-weight: bold;
  transition: background 0.3s ease;
  margin: 0 auto;
}
.btn:hover { background-color: #add8e6; }

/* Non-clickable informational box variant */
.no-link { pointer-events: none; cursor: default; user-select: none; }
.no-link:hover { background-color: #add8e6; }

footer {
  margin-top: 32px;
  font-size: 0.85em;
  color: #888;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  body { padding: 12px; }
  .page{ max-width: 640px; }
  .subtitle { font-size: 1.05em; }
  .featured-image { max-width: 100%; }
  .btn { padding: 10px 20px; font-size: 1em; }
  footer { font-size: 0.75em; margin-top: 20px; }
}

/* Very large desktop – give the image a touch more presence */
@media (min-width: 1440px) {
  .featured-image { max-width: 740px; }
}