/* ============================================================
   With Love, Math — design system
   Emotional invariant: WONDER.
   The sunflower carries warmth; space carries clarity;
   one primary action — subscribe.
   ============================================================ */

:root {
  /* Palette */
  --cream: #F5F0E8;
  --charcoal: #2C2C2C;
  --terracotta: #C2654A;
  --terracotta-deep: #A04B33; /* text-safe terracotta: 5.9:1 on cream */
  --terracotta-dark: #8A3F2A; /* hover for buttons and links */
  --olive-deep: #556247;      /* text-safe olive on cream */
  --ochre: #D4A84B;
  --navy: #1A1A2E;
  --orchid: #D68FCE;          /* the landing hero's bloom of colour */

  /* Type scale */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --size-h1: 3.5rem;
  --size-h2: 2.5rem;
  --size-h3: 1.75rem;
  --size-body: 1.125rem;

  /* Rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --measure: 65ch;
  --container: 68rem;

  /* ---- Bootstrap bridge ----
     Hand Bootstrap our tokens so its Reboot and components inherit this
     palette and type instead of shipping their own defaults. The character
     of the page still lives in the bespoke rules below. */
  --bs-body-bg: var(--cream);
  --bs-body-color: var(--charcoal);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--size-body);
  --bs-body-line-height: 1.45;
  --bs-link-color-rgb: 160, 75, 51;        /* terracotta-deep #A04B33 */
  --bs-link-hover-color-rgb: 138, 63, 42;  /* terracotta-dark #8A3F2A */
  --bs-border-radius: 0.75rem;
}

/* ---------- Reset & base ----------
   Bootstrap's Reboot (loaded first) supplies box-sizing and the base
   normalize; what remains here is the site's own voice layered on top. */

html {
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.45;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p { margin: 0 0 var(--space-3); max-width: var(--measure); }

a {
  color: var(--terracotta-deep);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover { color: var(--terracotta-dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 2px;
}

img, svg { max-width: 100%; height: auto; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Spam honeypot — must be invisible to people and skipped by keyboards */
.honeypot { display: none !important; }

/* The visually-hidden email label uses Bootstrap's own .visually-hidden. */

.section { padding-block: var(--space-6); }

/* Dark band — the one deliberate shift in light, for the moment of depth */
.section--night {
  background: var(--navy);
  color: var(--cream);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.9rem 1.6rem;       /* comfortably past 44px tall */
  border-radius: 999px;          /* a ripple is round; so are the actions */
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn--primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #FFFFFF;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--terracotta-dark);
  border-color: var(--terracotta-dark);
  color: #FFFFFF;
}

.btn:active { transform: translateY(1px); }

/* Keep a single focus signal — the terracotta outline from the base rule —
   and drop Bootstrap's button focus glow so the two never stack. */
.btn:focus-visible { box-shadow: none; }

/* ---------- Landing hero ---------- */

/* A single full-height opening: the sunflower photograph carries the
   warmth, a dark-green wash keeps the words legible over it — mirroring
   the reference. The wash is a translucent gradient layered above the
   photo (img/hero-sunflower.jpg). */
.landing-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6) var(--space-3);
  background-color: #1D2611;
  background-image:
    linear-gradient(rgba(34, 44, 20, 0.55), rgba(28, 36, 16, 0.62)),
    url("../img/hero-sunflower.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.landing-hero__content {
  position: relative;
  z-index: 1;
  max-width: 60rem;
}

.landing-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  font-size: clamp(3.5rem, 13vw, 8.5rem);
  color: var(--orchid);
  margin: 0;
  text-shadow: 0 2px 18px rgba(20, 26, 11, 0.55);
}

.landing-hero__subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--orchid);
  margin: var(--space-2) auto 0;
  max-width: none;
  text-shadow: 0 2px 14px rgba(20, 26, 11, 0.6);
}

.landing-hero__intro {
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #FFFFFF;
  max-width: 36rem;
  margin: var(--space-4) auto 0;
  text-shadow: 0 1px 12px rgba(20, 26, 11, 0.75);
}

/* ---------- Subscribe ---------- */

/* Layout (flex + gap) now comes from Bootstrap utilities on the <form>;
   what stays bespoke is the measure and the vertical rhythm. */
.newsletter-form {
  margin-block: var(--space-3);
  max-width: 34rem;
}

/* Bootstrap's .form-control gives the input its base; these rules reclaim
   the pill shape, the cream border, and the white fill it wears here. */
.newsletter-form input[type="email"] {
  flex: 1 1 16rem;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1.1rem;
  border: 2px solid var(--cream);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--charcoal);
}

.newsletter-form input[type="email"]::placeholder { color: #6B6B6B; }

/* .form-control adds a blue focus glow; the site's focus signal is the
   terracotta outline from the base rule, so mute Bootstrap's version. */
.newsletter-form input[type="email"]:focus {
  border-color: var(--cream);
  box-shadow: none;
}

.fine-print {
  font-size: 0.875rem;
  color: #C9C4B8;
  margin-bottom: 0;
}

.form-note {
  font-weight: 600;
  color: var(--ochre);
  margin-top: var(--space-2);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--cream);
  padding-block: var(--space-5) var(--space-4);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-4);
}

.site-footer h2 {
  font-size: 1.125rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: var(--space-2);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--ochre); }

.site-footer__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(245, 240, 232, 0.25);
  font-size: 0.875rem;
  color: #C9C4B8;
}

.social-links li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.25rem;
  text-decoration: none;
}
.social-links li a:hover { text-decoration: underline; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  :root {
    --size-h2: 1.875rem;
    --space-6: 4rem;
  }

  .landing-hero { min-height: 92vh; padding-block: var(--space-5); }
  .landing-hero__intro { font-size: 1.0625rem; }
}