/* =========================================================
   FOR THE FERAL – BASE STYLESHEET
   ---------------------------------------------------------
   Structure:
   1.  Fonts
   2.  Design Tokens + Global Resets
   3.  Layout Utilities
   4.  Top Banner
   5.  Header + Logo + Navigation
       5a. Desktop Nav Links
       5b. Mobile Nav Toggle (Burger)
   6.  Hero / Collage Layout
   7.  Blog Feature Strip
   8.  Typography + Links
   9.  Footer
   10. Responsive Rules
       10a. Desktop (≥ 769px)
       10b. Mobile (≤ 768px)
   ========================================================= */


/* =========================================================
   1. GOOGLE FONTS
   ---------------------------------------------------------
   Fraunces = display / titles
   Inter    = body / UI
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');


/* =========================================================
   2. DESIGN TOKENS + GLOBAL RESET
   ---------------------------------------------------------
   - Colour variables
   - Font stacks
   - Global box-sizing + body defaults
   ========================================================= */

:root {
  /* Brand colour palette */
  --white-parchment: #e2e2e2;
  --dark-brown: #3b2f2f;
  --off-black: #1c1917;
  --feral-berry: #8c366f;
  --choc-brown: #4a353a;
  --deep-berry: #732d5c;
  --antique-gold: #9b8754;
  --light-lilac: #e1d5e3;
  --bright-gold: #c0a55e;

  /* Type stacks */
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Times New Roman", serif;

  /* Layout token */
  --page-max-width: 1200px; /* Main content width (not hero/strips) */
}

/* Make sizing predictable */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default browser margin/padding */
html,
body {
  margin: 0;
  padding: 0;
}

/* Base body styles */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--white-parchment);
  color: var(--off-black);
}


/* =========================================================
   3. LAYOUT UTILITIES
   ---------------------------------------------------------
   - Reusable width wrapper for main content
   - Hero / strips deliberately ignore this
   ========================================================= */

.page-wrapper {
  max-width: var(--page-max-width);
  margin: 0 auto;
}


/* =========================================================
   4. TOP BANNER
   ---------------------------------------------------------
   - Optional announcement / note at very top
   - Full-bleed across the viewport
   - Use .top-banner--border when you want a bottom border
   ========================================================= */

.top-banner {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  text-align: center;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  z-index: 2000;
}

.top-banner--border {
  background-color: var(--white-parchment);
  border-bottom: 2px solid var(--antique-gold);
}

.top-banner p {
  margin: 0;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  color: var(--dark-brown);
}

.top-banner a {
  color: var(--deep-berry);
  font-weight: 500;
  text-decoration: underline;
}


/* =========================================================
   5. HEADER + LOGO + NAVIGATION
   ---------------------------------------------------------
   - Sticky header with centred logo + tagline
   - Brown nav bar sits underneath (full-bleed)
   - .header-shrink added by JS on scroll
   ========================================================= */

.site-header {
  background-color: var(--off-black);
  color: var(--white-parchment);
  padding: 2.5rem 1.5rem 0;
  text-align: center;

  position: sticky;
  top: 0;
  z-index: 1000;
  transition: padding 0.25s ease, background-color 0.25s ease;
}

/* Main logo image */
.site-logo {
  max-width: 100px;
  height: auto;
  transition: none;
}

/* On scroll: header + logo shrink (desktop base, tweaked on mobile) */
body.header-shrink .site-header {
  padding: 0.75rem 1.5rem 0;
}

body.header-shrink .site-logo {
  max-width: 100px;
  margin-bottom: 0.25rem;
}

/* Tagline under logo */
.site-tagline {
  margin-top: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.30em;
  text-transform: lowercase;
  font-family: 'Fraunces', serif;
  font-weight: 500;  
}

/* Brown nav bar that visually sits under the logo.
   This is intentionally full-bleed (ignores .page-wrapper). */
.main-nav {
  background-color: var(--dark-brown);
  margin-top: 2rem;

  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* FIXED SMALL LOGO — SITE-WIDE */
.site-logo img {
  height: 48px;   /* or whatever size you want */
  width: auto;
  transition: none;
}

/* Stop any scroll-shrink effect */
.site-header.scrolled .site-logo img,
.site-header.is-scrolled .site-logo img,
.site-header.header--scrolled .site-logo img {
  height: 48px;
  transform: none;
}

/* ---------------------------------------------------------
   5a. DESKTOP NAV LINKS
   ---------------------------------------------------------
   - Horizontal nav (centre aligned)
   - Underline animation on hover
   --------------------------------------------------------- */

.nav-links {
  margin: 0;
  padding: 0.75rem 1.5rem 0.9rem;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.nav-links a {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--antique-gold);
  transition: color 180ms ease-out;
}

/* Tiny underline that animates in on hover */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 0;
  height: 1px;
  background-color: var(--light-lilac);
  transition: width 180ms ease-out;
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--light-lilac);
}

.nav-links a:hover::after,
.nav-links a:focus::after {
  width: 100%;
}

/* Current page state */
.nav-links .is-active > a,
.nav-links a.is-active {
  color: var(--light-lilac);
}


/* ---------------------------------------------------------
   5b. MOBILE NAV TOGGLE (BURGER)
   ---------------------------------------------------------
   - Hidden by default, shown via mobile media query
   - .main-nav.is-open toggled by JS to animate into an “X”
   --------------------------------------------------------- */

.nav-toggle {
  display: none;                /* becomes flex in mobile media query */
  border: none;
  background: transparent;
  padding: 0.25rem;
  cursor: pointer;
  position: relative;

  width: 26px;
  height: 18px;                 /* enough height for 3 lines */
}

/* Burger lines */
.nav-toggle span {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 2px;
  width: 100%;
  background-color: var(--white-parchment);
  border-radius: 999px;
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}

/* Top / middle / bottom positions */
.nav-toggle span:nth-child(1) {
  top: 0;
}

.nav-toggle span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle span:nth-child(3) {
  bottom: 0;
}

/* When mobile menu is open, morph burger into an X */
.main-nav.is-open .nav-toggle span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.main-nav.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.main-nav.is-open .nav-toggle span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}


/* =========================================================
   6. HERO / COLLAGE LAYOUT
   ---------------------------------------------------------
   - Full-bleed collage at the top of the page
   - Berry veil overlay keeps everything on-brand
   - Text sits at bottom of tiles, lifts slightly on hover
   ========================================================= */

/* Make the whole hero break out of the centred wrapper */
.hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* TOP + BOTTOM ROW GRIDS (columns handled in media queries) */
.hero-collage-top,
.hero-collage-bottom {
  display: grid;
  gap: 0;
}

/* Each clickable tile */
.hero-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Background image inside each tile */
.hero-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Feral Berry translucent veil over the images */
.hero-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(140, 54, 111, 0.35);  /* Soft, even berry tint */
  pointer-events: none;
  transition: background 0.3s ease, opacity 0.3s ease;
  z-index: 0;
}

/* White overlay for hover whitening */
.hero-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0); /* invisible at rest */
  z-index: 1;
  transition: background 0.3s ease;
  pointer-events: none;
}

/* Hover: slightly lift the veil, but KEEP a hint of tint + white wash */
.hero-tile:hover::after,
.hero-tile:focus-visible::after {
  background: rgba(140, 54, 111, 0.15);  /* lighter tint, not removed */
  opacity: 1;
}

/* On hover, fade in the white wash */
.hero-tile:hover::before,
.hero-tile:focus-visible::before {
  background: rgba(255, 255, 255, 0.35);  /* translucent white */
}

.hero-tile:hover img,
.hero-tile:focus-visible img {
  transform: scale(1.03);
}

/* Intro copy band between collage rows (full-width, soft) */
.hero-intro {
  background-color: var(--white-parchment);
  text-align: center;
  padding: 3.5rem 1.5rem 3rem;
}

/* Extra roomy version for central band if needed */
.hero-intro--middle {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hero-intro h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.hero-intro p {
  margin: 0;
  font-size: 0.9rem;
}

/* TEXT LAYER on top of image tiles */
.tile-text {
  position: absolute;
  inset: 0;                /* stretch across full tile */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* sit at the bottom */
  padding: 1.5rem;
  z-index: 2;

  opacity: 0.85;           /* slightly faded initially */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover state for text inside hero/blog tiles */
.hero-tile:hover .tile-text,
.hero-tile:focus-visible .tile-text,
.blog-tile:hover .tile-text,
.blog-tile:focus-visible .tile-text {
  opacity: 1;                  /* clearer on hover */
  transform: translateY(-4px); /* small lift on hover */
}

/* Tile heading */
.tile-text h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--dark-brown);

  opacity: 1;          /* was 0.35 */
  font-weight: 600;    /* stronger even before hover */
  transition: opacity 0.25s ease;
}

/* Tile subtext */
.tile-text p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--dark-brown);

  opacity: 1;          /* was 0.35 */
  font-weight: 500;    /* makes it clearer */
  transition: opacity 0.25s ease;
}

/* On hover, bring text fully into focus */
.hero-tile:hover h3,
.hero-tile:hover p,
.blog-tile:hover h3,
.blog-tile:hover p {
  opacity: 1;
}

/* Give headings a touch more weight on hover */
.hero-tile:hover h3,
.blog-tile:hover h3 {
  font-weight: 700;   /* slightly heavier on hover */
}


/* =========================================================
   7. BLOG FEATURE STRIP
   ---------------------------------------------------------
   - Full-bleed strip under hero
   - 3 feature tiles (desktop) or stacked (mobile)
   - Antique gold veil instead of berry
   ========================================================= */

/* Make this strip full-bleed like the hero */
.blog-strip {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: var(--dark-brown);
}

/* Grid of three images (layout set in media queries) */
.blog-strip-grid {
  display: grid;
  gap: 0;
}

/* Clickable blog tiles */
.blog-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.blog-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Antique Gold translucent veil */
.blog-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(155, 135, 84, 0.35);   /* Antique Gold with alpha */
  pointer-events: none;
  transition: background 0.3s ease, opacity 0.3s ease;
  z-index: 0;
}

/* White overlay for hover whitening on blog tiles */
.blog-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0); /* invisible at rest */
  z-index: 1;
  transition: background 0.3s ease;
  pointer-events: none;
}

/* Hover/focus: lighten veil + slight zoom */
.blog-tile:hover::after,
.blog-tile:focus-visible::after {
  background: rgba(155, 135, 84, 0.15);
  opacity: 1;
}

/* On hover, fade in the white wash on blog tiles */
.blog-tile:hover::before,
.blog-tile:focus-visible::before {
  background: rgba(255, 255, 255, 0.35);  /* translucent white */
}

.blog-tile:hover img,
.blog-tile:focus-visible img {
  transform: scale(1.03);
}

/* =======================================
   ARCHIVE PAGE STYLES
   ======================================= */

/* Wrapper tweak (optional, to give breathing room) */
.archive-page {
  background: var(--white-parchment);
}

/* -------- HERO -------- */

.archive-hero {
  background: var(--off-black);
  text-align: center;
  padding: 5rem 1.5rem 3rem;
}

.archive-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: 3.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--antique-gold);
  margin-bottom: 0.6rem;
}

.archive-hero .archive-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-parchment);
}
/* =======================================
   ARCHIVE FILTER BAR - FIXED + FADE
   ======================================= */

.archive-filter-bar {
  position: relative; /* default, non-fixed state */
  z-index: 20;

  background: rgba(226, 226, 226, 0.96); /* var(--white-parchment) with slight transparency */
  backdrop-filter: blur(4px);

  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;

  border-bottom: 1px solid var(--antique-gold);

  /* base animation state */
  opacity: 0.92;
  transform: translateY(2px);
  transition:
    opacity 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease,
    background 0.28s ease;
}

/* When fixed under the nav */
.archive-filter-bar.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  /* top is set dynamically in JS to match header height */
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  background: rgba(226, 226, 226, 0.98);
}

/* Placeholder that keeps layout from jumping when bar becomes fixed */
.archive-filter-placeholder {
  display: none;
}

.archive-filter-placeholder.is-visible {
  display: block;
}

/* Filter buttons (same as before, including hover) */

.filter-btn {
  border: 1px solid var(--antique-gold);
  border-radius: 999px;
  background: transparent;
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--off-black);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.filter-btn:hover {
  background: var(--antique-gold);
  color: var(--off-black);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* Mobile tweak */
@media (max-width: 600px) {
  .archive-filter-bar {
    padding-inline: 1rem;
  }
}

/* -------- SECTION HEADINGS (FEATURED / MOST RECENT) -------- */

.archive-section {
  padding-bottom: 3rem;
}

/* Make archive section headings full-width colour bars */

.archive-heading {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-style: italic;
  padding: 1.4rem 0;
  margin: 0;

  /* break out of the centred page wrapper */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* keep your colours per section */
.archive-featured .archive-heading {
  background: var(--antique-gold);
  color: var(--off-black);
}

.archive-recent .archive-heading {
  background: var(--dark-brown);
  color: var(--white-parchment);
}

.filter-btn.is-active {
  background: var(--antique-gold);
  color: var(--off-black);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* Make "Most Recent" slightly smaller and a bit tighter */
.archive-recent .archive-heading {
  font-size: 0.9rem;         /* smaller than Featured */
  letter-spacing: 0.2em;     /* slightly less wide */
  background: var(--dark-brown);
  color: var(--white-parchment);
}


/* -------- GRID -------- */

.archive-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.2rem;
}

.archive-card {
  text-align: center;
  font-family: 'Inter', sans-serif;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.archive-card a {
  text-decoration: none;
  color: inherit;
}

.archive-card img {
  width: 100%;
  display: block;
  border-radius: 28px;
  object-fit: cover;
}

/* Hover lift */
.archive-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.archive-card .date {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--choc-brown);
}

.archive-card h3 {
  margin-top: 0.4rem;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--off-black);
}

/* -------- STAR DIVIDER -------- */

.archive-divider {
  text-align: center;
  padding: 3rem 0 2rem;
}

.archive-divider img {
  width: 40px;
  height: auto;
}

/* -------- PAGINATION -------- */

.pagination {
  text-align: center;
  padding: 0 0 4rem;
}

.page-link {
  display: inline-block;
  margin: 0 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--antique-gold);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--off-black);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.page-link:hover {
  background: var(--antique-gold);
  color: var(--white-parchment);
  transform: translateY(-1px);
}

.page-link.active {
  background: var(--antique-gold);
  color: var(--white-parchment);
}

/* -------- RESPONSIVE TWEAKS -------- */

@media (max-width: 768px) {
  .archive-hero {
    padding: 4rem 1.25rem 2.5rem;
  }

  .archive-hero h1 {
    font-size: 2.4rem;
    letter-spacing: 0.16em;
  }

  .archive-grid {
    padding-inline: 1.25rem;
    gap: 1.8rem;
  }
}

@media (max-width: 480px) {
  .archive-hero h1 {
    font-size: 2.1rem;
  }

  .archive-heading {
    font-size: 1rem;
    letter-spacing: 0.2em;
    padding: 1.2rem 0.75rem;
  }

  .archive-card img {
    border-radius: 24px;
  }
}

/* =========================================================
   8. TYPOGRAPHY + LINKS
   ---------------------------------------------------------
   - Global heading styles
   - Default link colours and hover states
   ========================================================= */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--off-black);
  margin-top: 0;
}

a {
  color: var(--deep-berry);
}

a:hover,
a:focus {
  color: var(--feral-berry);
}


/* =========================================================
   9. FOOTER
   ---------------------------------------------------------
   - Newsletter form
   - Social links
   - Copyright
   - Mobile tweaks at bottom of file
   ========================================================= */

.site-footer {
  background-color: var(--dark-brown);
  color: var(--white-parchment);
  padding: 2.5rem 1.5rem 2rem;
  font-size: 0.85rem;
}

.footer-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  text-align: center;
}

/* Newsletter CTA heading */
.footer-newsletter h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--antique-gold);
}

.footer-newsletter p {
  margin: 0;
  font-size: 0.9rem;
}

/* Email input + button row */
.footer-form {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
}

.footer-form input[type="email"] {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--antique-gold);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background-color: var(--white-parchment);
  color: var(--off-black);
}

.footer-form input::placeholder {
  color: rgba(28, 25, 23, 0.7);
}

.footer-form button {
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;

  background-color: var(--feral-berry);
  color: var(--white-parchment);
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.footer-form button:hover,
.footer-form button:focus-visible {
  background-color: var(--deep-berry);
  transform: translateY(-1px);
}

.hidden {
  display: none !important;
}

/* hide label but keep it for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Social + copyright row */
.footer-bottom {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(226, 226, 226, 0.15);
}

/* Social icons list */
.footer-social {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.footer-social a {
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-parchment);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--bright-gold);
}

.footer-social img {
  width: 22px;
  height: 22px;
  filter: invert(92%) sepia(12%) saturate(250%) hue-rotate(330deg) brightness(90%) contrast(85%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover img,
.footer-social a:focus-visible img {
  opacity: 0.65;
  transform: translateY(-2px);
}

.footer-copy {
  margin: 0;
  opacity: 0.8;
}

/* Footer responsive tweaks (small screens only) */
@media (max-width: 600px) {
  .footer-form {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-form button {
    width: 100%;
  }

  .footer-social {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}


/* =========================================================
   10. RESPONSIVE RULES
   ---------------------------------------------------------
   10a. Desktop (min-width: 769px)
   10b. Mobile (max-width: 768px)
   ========================================================= */


/* ---------------------------------------------------------
   10a. DESKTOP (≥ 769px)
   ---------------------------------------------------------
   - Define hero/blog strip heights
   - Desktop nav behaviour
   --------------------------------------------------------- */

@media (min-width: 769px) {
  .hero-collage-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 440px;
  }

  .hero-collage-bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 280px;
  }

  .blog-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 260px;
  }

  /* Desktop nav: show links, hide burger, centre in brown bar */
  .main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-toggle {
    display: none;
  }

  .nav-links {
    display: flex;
  }
}


/* ---------------------------------------------------------
   10b. MOBILE (≤ 768px)
   ---------------------------------------------------------
   - Softer header shrink
   - Brown bar becomes nav container with dropdown
   - Hero + blog strips stack vertically
   --------------------------------------------------------- */

@media (max-width: 768px) {

  /* Mobile header padding & logo size (softer shrink) */
  .site-header {
    padding: 1.25rem 1.25rem 0; /* slightly less initial padding */
    transition: padding 0.3s ease, background-color 0.3s ease;
  }

  .site-logo {
    max-width: 150px;        /* smaller DEFAULT on mobile */
    transition: max-width 0.3s ease, margin 0.3s ease;
  }

  /* Mobile nav bar: logo area + burger, with dropdown menu */
  .main-nav {
    padding: 1rem 1.25rem 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  /* Show burger on mobile */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Hide links by default; dropdown centred under bar */
  .main-nav ul {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0 1.5rem;
    background-color: var(--dark-brown);

    width: 100vw;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .main-nav ul li {
    text-align: center;
  }

  /* When menu is open, show links beneath the brown bar */
  .main-nav.is-open ul {
    display: flex;
  }

  .nav-links a {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
  }

  /* HERO / STRIPS: stack images on mobile */
  .hero-collage-top,
  .hero-collage-bottom {
    grid-template-columns: 1fr;
    height: auto;
  }

  .blog-strip-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .hero-intro {
    padding: 2.5rem 1.25rem 2.25rem;
  }
}

/* =========================================================
   BLOG POST PAGE LAYOUT
   ========================================================= */

.blog-post {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* ----------------------------
   HERO SECTION (legacy layout)
   ---------------------------- */
.blog-hero-legacy {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 4rem;
}

.blog-hero-content {
  flex: 1;
}

.blog-title {
  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--off-black);
  margin-bottom: 0.6rem;
}

.blog-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--choc-brown);
}

.blog-hero-image {
  width: 280px;
  flex-shrink: 0;
}

.blog-hero-image img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

/* ----------------------------
   BLOG BODY
   ---------------------------- */
.blog-body {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--off-black);
}

.blog-body p {
  margin-bottom: 1.4rem;
}

.blog-body h2,
.blog-body h3 {
  font-family: 'Fraunces', serif;
  margin-top: 2.4rem;
  margin-bottom: 0.6rem;
}

/* ----------------------------
   SMALLER DEFAULT LOGO ON BLOG PAGES
   ---------------------------- */
body.blog-page .header-logo img {
  width: 120px !important; /* adjust until perfect */
}

body.blog-page .header {
  height: 100px !important;
}

/* =========================================================
   BLOG PAGE — FIXED SMALL HEADER
   ========================================================= */

.blog-header {
  width: 100%;
  background-color: var(--off-black);
  padding: 0.8rem 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

.blog-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-logo img {
  width: 110px;   /* ✨ much smaller than homepage hero */
  height: auto;
}

.blog-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--white-parchment);
  text-decoration: none;
  margin-left: 1.8rem;
  letter-spacing: 0.5px;
  transition: opacity 0.2s ease;
}

.blog-nav a:hover {
  opacity: 0.6;
}

/* Disable shrinking scroll effect on this page */
body.blog-page .header.shrink {
  height: 100px !important;
}

/* =========================================================
   BLOG ARTICLE LAYOUT – GOLD HERO BAR VERSION
   ========================================================= */

/* Full-width mustard bar */
.blog-hero {
  background: #b2902f;
  padding: 2.8rem 0 2.8rem;
  margin: 0;

  /* make it full-bleed like the main nav / hero */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Inner container that matches article width */
.blog-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* Title */
.blog-hero-title {
  margin: 0 0 0.6rem;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 0.18rem;
  color: #1e1a18;
  text-align: left;
}

/* Date */
.blog-hero-date {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #3c3c3c;
  text-align: left;
}

/* Article wrapper */
.blog-article-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 3rem 3rem;
}

.blog-article-header h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.9rem;
  font-weight: 600;
  margin: 2.4rem 0 1.8rem;
  color: #1a1a1a;
}

/* Two-column article grid: text + image */
.blog-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.blog-article-copy {
  font-family: 'Inter', sans-serif;
  line-height: 1.75;
  font-size: 1.05rem;
  color: #222;
}

.blog-article-copy p {
  margin-bottom: 1.2rem;
}

.blog-article-image {
  align-self: start;
}

.blog-article-image img {
  width: 100%;
  height: auto;
  border-radius: 40px;
  object-fit: cover;
  display: block;
}

/* Optional collage grid for multiple images */
.blog-article-collage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  margin: 2rem 0 3rem;
}

.blog-article-collage figure {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
}

.blog-article-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  display: block;
}

/* Star divider under article */
.blog-article-divider {
  text-align: center;
  padding: 3rem 0 1rem;
}

.blog-article-divider img {
  width: 45px;
  opacity: 0.8;
}

/* Responsive behaviour */
@media (max-width: 900px) {
  .blog-hero-inner,
  .blog-article-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .blog-article-grid {
    grid-template-columns: 1fr;
  }

  .blog-article-image img {
    margin: 1rem auto 0;
    max-width: 360px;
  }
}

.about-page {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Section layout */
.about-section {
  padding: 4rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.about-section h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.about-section p {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Split intro: image on one side, text on the other */
.intro-split {
  max-width: 1100px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* image */
.about-illustration img {
  max-width: 360px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Text block */
.about-text {
  text-align: left;
}


/* Mobile: stack them */
@media (max-width: 768px) {
  .intro-split {
    grid-template-columns: 1fr;
  }

  .intro-left,
  .intro-right {
    text-align: left;
  }
}


/* Star divider */
.about-star-divider {
  text-align: center;
  padding: 2rem 0;
}

.about-star-divider img {
  width: 40px;
  height: auto;
}

/* Mobile */
@media (max-width: 768px) {
  .intro-split {
    grid-template-columns: 1fr;
  }
}

/* ============================
   404 PAGE STYLING (WITH STAR)
   ============================ */

.error-404 {
  text-align: center;
  padding: 6rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Small Inter "404" label */
.error-code {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--dark-brown);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Fraunces heading */
.error-heading {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--dark-brown);
  line-height: 1.25;
  margin-bottom: 2rem;
}

/* Star divider */
.error-star-divider {
  margin-bottom: 2.5rem;
}

.error-star-divider img {
  width: 40px;
  height: auto;
}

/* Button */
.back-home-btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  background-color: var(--feral-berry);
  color: #ffffff;
  text-decoration: none;
  border: 1px solid var(--feral-berry);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Override any global link hover + nicer animation */
.back-home-btn:hover {
  background-color: transparent;
  color: var(--feral-berry);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* ============================
   COMING SOON PAGE
   ============================ */

.coming-soon {
  text-align: center;
  padding: 6rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Small Inter label */
.coming-code {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-brown);
  margin-bottom: 1rem;
}

/* Main Fraunces heading */
.coming-heading {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  color: var(--dark-brown);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

/* Subcopy */
.coming-subcopy {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--off-black);
  margin-bottom: 2.5rem;
}

/* Star divider */
.coming-star-divider {
  margin-bottom: 2.5rem;
}

.coming-star-divider img {
  width: 40px;
  height: auto;
}

/* Button (matches 404 behaviour) */
.coming-cta-btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  background-color: var(--feral-berry);
  color: #ffffff;
  text-decoration: none;
  border: 1px solid var(--feral-berry);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.coming-cta-btn:hover {
  background-color: transparent;
  color: var(--feral-berry);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Optional: tweak padding on smaller screens */
@media (max-width: 768px) {
  .coming-soon {
    padding: 4.5rem 1.75rem;
  }
}

/* PAGE WRAPPER */
.newsletter-page {
  width: 100%;
  margin: 0 auto;
}

/* FULL-WIDTH HERO (TEXT LEFT, IMAGE COLUMN RIGHT) */
.newsletter-hero-full {
  display: grid;
  grid-template-columns: minmax(300px, 700px) 1fr; /* left column capped, right fills */
  width: 100%;
  background-color: var(--white-parchment);
  align-items: center;
  padding: 4rem 0;
}

/* LEFT SIDE – TEXT + FORM */
.newsletter-left {
  padding: 0 2rem;
  margin: 0 auto;
}

.newsletter-left h2 {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  color: var(--dark-brown);
  margin-bottom: 1.2rem;
}

.newsletter-left p {
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
  color: var(--off-black);
  margin-bottom: 1rem;
}

/* RIGHT SIDE – IMAGE FILLS TO FAR RIGHT */
.newsletter-right {
  width: 100%;
  height: 100%;
}

.newsletter-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; /* edit this if you want rounded corners */
}

/* FORM */
.newsletter-form {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.newsletter-form input[type="email"] {
  flex: 1 1 220px;
  padding: 0.75rem 0.9rem;
  font-family: 'Inter', sans-serif;
  border-radius: 999px;
  border: 1px solid var(--dark-brown);
  background-color: #f8f5f2;
}

.newsletter-form button {
  flex: 0 0 auto;
  padding: 0.75rem 1.8rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: 1px solid var(--feral-berry);
  background-color: var(--feral-berry);
  color: #ffffff;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.newsletter-form button:hover {
  background-color: transparent;
  color: var(--feral-berry);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* MOBILE: STACKED */
@media (max-width: 768px) {
  .newsletter-hero-full {
    grid-template-columns: 1fr;
    padding: 3rem 1.5rem;
  }

  .newsletter-left {
    padding: 0;
  }

  .newsletter-right {
    height: 260px; /* tweak height for the image strip on mobile */
  }
}

/* Mid-article star divider */
.mid-article-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 3rem 0 2rem;
}

.mid-article-divider img {
  width: 40px;
  opacity: 0.7;
}

/* Full-width section of article after the divider */
.blog-article-fullwidth {
  grid-column: 1 / -1; /* breaks out of two-column grid */
  max-width: 750px;
  margin: 0 auto;
  padding-top: 1rem;
}

/* Ensure the first part stays two-column, second part is full width */
.blog-article-grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
}

@media (max-width: 768px) {
  /* On mobile the image stacks already but we keep styling consistent */
  .blog-article-grid {
    grid-template-columns: 1fr;
  }

  .blog-article-fullwidth {
    max-width: 100%;
    padding: 0 1rem;
  }
}

/* --------------------------------------
   Top split (intro left, form right)
-------------------------------------- */
.contact-top {
  max-width: 1100px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr;  /* text wider, form narrower */
  gap: 3rem;
  align-items: flex-start;
}

.contact-intro-text h1 {
  font-family: 'Fraunces', serif;
  margin-bottom: 1rem;
}

.contact-form-wrapper form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hidden {
  display: none;
}

/* Responsive stacking */
@media (max-width: 768px) {
  .contact-top {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------
   Freelance section (full width below)
-------------------------------------- */
.freelance-section {
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 1.5rem;
}

.freelance-section h2,
.freelance-section h3 {
  font-family: 'Fraunces', serif;
  margin-top: 2rem;
}
/* -------------------------------
   FERAL FORM BLOCK STYLING
--------------------------------- */

.contact-form-block {
  background-color: var(--white-parchment); /* or a slightly darker custom tone */
  padding: 2rem;
  border-radius: 1.25rem; /* soft rounded corners */
  box-shadow: 0 6px 22px rgba(0,0,0,0.08); /* gentle depth */
  border: 1px solid rgba(100, 80, 70, 0.25); /* earthy, subtle outline */
}

/* Form layout inside block */
.contact-form-block form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Labels */
.contact-form-block label {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--off-black);
}

/* Inputs & Selects */
.contact-form-block input,
.contact-form-block select,
.contact-form-block textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(80, 60, 50, 0.35);
  background-color: rgba(255,255,255,0.9);
  border-radius: 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* On focus: make it magical but subtle */
.contact-form-block input:focus,
.contact-form-block select:focus,
.contact-form-block textarea:focus {
  border-color: var(--dark-brown);
  box-shadow: 0 0 0 3px rgba(110, 85, 70, 0.15);
}

/* Textarea */
.contact-form-block textarea {
  resize: vertical;
  min-height: 150px;
}

/* Submit Button */
.contact-form-block button[type="submit"] {
  background-color: var(--dark-brown);
  color: var(--white-parchment);
  padding: 0.9rem 1.2rem;
  border: none;
  border-radius: 0.75rem;
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.contact-form-block button[type="submit"]:hover {
  background-color: var(--brown);
  transform: translateY(-2px);
}
/* ==========================================
   BOOK LIST STYLING
   ========================================== */

/* Wrapper for the whole book list */
.book-list {
  grid-column: 1 / -1;    /* Makes the list span both columns in the grid */
  max-width: 750px;
  margin: 3rem auto;
  padding: 0 1rem;
  text-align: center;
}

/* Divider BEFORE the list */
.book-list-divider {
  grid-column: 1 / -1;    /* Also spans both columns */
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 3rem;
  opacity: 0.5;
}

.book-list-divider img {
  width: 38px;
  height: auto;
}

/* Individual book block */
.book-item {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  position: relative;
}

/* Book title styling */
.book-item h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.book-item h2 a {
  text-decoration: none;
  color: var(--off-black);
}

.book-item h2 a:hover {
  opacity: 0.75;
  transition: 0.25s ease;
}

/* Book descriptions */
.book-item p {
  max-width: 650px;
  margin: 0.5rem auto 0;
  line-height: 1.55;
}

/* STAR divider between book entries */
.book-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  margin: 2rem auto 0;
  background: url('/assets/images/star.svg') no-repeat center/contain;
  opacity: 0.45;
}

/* Make dividers smaller on mobile */
@media (max-width: 600px) {
  .book-list {
    max-width: 95%;
  }

  .book-item h2 {
    font-size: 1.35rem;
  }

  .book-item:not(:last-child)::after {
    width: 32px;
    height: 32px;
    margin-top: 1.8rem;
  }

  .book-list-divider img {
    width: 32px;
  }
}

/* Make the image container a positioning context */
.archive-card img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  transition: transform 0.4s ease-out;
}

/* Berry tint overlay ONLY on the image */
.archive-card img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(153, 64, 96, 0.45);
  mix-blend-mode: multiply;
  opacity: 1;
  transition: opacity 0.35s ease-out;
  pointer-events: none;
  z-index: 2;
}

/* Hover fades tint + zoom */
.archive-card:hover img::after {
  opacity: 0;
}

.archive-card:hover img {
  transform: scale(1.03);
}

.affiliate-note {
  font-size: 0.8rem;     /* makes the text smaller */
  opacity: 0.7;          /* softer, less dominant */
  margin-top: 1rem;      /* spacing from the last paragraph */
  line-height: 1.4;
}