:root {
      /* Palette sampled from the site's own photographs, not a framework default.
         The hero (traction engine at sunset, East Sussex) is 12% #e3bc6a and sits
         almost entirely in hue 38-49; the Lewes shot runs hue 28-38 warm stone.
         The previous accents (#e2e8ff / #c7d2ff, Tailwind indigo-100/200) were
         hue ~225 - the opposite side of the wheel from every photo on the page.
         Every value below is contrast-checked; ratios noted per token. */
      --bg: #ffffff;
      --bg-soft: #faf7f2;          /* warm off-white, hue 38 (was cool slate-50) */
      --text-main: #211d18;        /* 16.75:1 on white */
      --text-muted: #5f574c;       /* 7.11:1 on white, 6.65:1 on soft (was 4.18:1, failed AA) */
      --border-subtle: #e8e2d8;    /* warm, was lavender-grey */
      --accent: #8a6318;           /* amber from the hero, 5.41:1 on white */
      --accent-deep: #6f4e11;      /* 7.57:1 on white */
      --accent-soft: #f4e9d4;      /* warm cream fill */
      --accent-soft-deep: #eadbbd;
      --radius-lg: 18px;
      --radius-full: 999px;
      --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);
      --max-width: 960px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    /* The parts we didn't draw still carry the design. */
    ::selection {
      background: var(--accent-soft-deep);
      color: var(--text-main);
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 2px;
    }

    a {
      text-underline-offset: 0.15em;
      text-decoration-thickness: 1px;
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    body {
      margin: 0;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
    }

    img {
      max-width: 100%;
      /* Required now that every <img> carries width/height attributes. Without
         it the browser uses the height attribute as the rendered height while
         max-width shrinks the width, so images stretch vertically on any
         viewport narrower than the image. The attributes still do their job of
         reserving correct space and preventing layout shift.
         Rules that deliberately set height (.destination-card-image img,
         .region-post-image img, both with object-fit: cover) have higher
         specificity and are unaffected. */
      height: auto;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .skip-link {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -40px;
      padding: 0.5rem 1rem;
      background: #111827;
      color: #f9fafb;
      border-radius: var(--radius-full);
      font-size: 0.875rem;
      z-index: 1000;
    }

    .skip-link:focus {
      top: 12px;
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .section {
      padding: 4.5rem 0;
    }

    .section--soft {
      background: var(--bg-soft);
    }

    .section-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .section-header h2 {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.8rem;
      letter-spacing: 0.03em;
      margin: 0 0 0.6rem;
    }

    .section-header p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    /* HEADER & NAV */

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    }

    .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo on the left, nav on the right */
  padding: 0.9rem 1.5rem;
  gap: 1rem;
}

/* Allow the logo text to wrap if needed */
.logo {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;   /* or center if you prefer, but left reads cleaner here */
  white-space: normal; /* allow wrap instead of forcing one long line */
}

/* Make sure the link inside the logo doesn’t look like a default link */
.logo a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

    .logo span {
      font-size: 0.75rem;
      display: block;
      color: var(--text-muted);
      letter-spacing: 0.16em;
      margin-top: 0.2rem;
    }

    .site-nav {
      display: flex;
      gap: 1.25rem;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    .site-nav a {
      position: relative;
      padding-bottom: 0.25rem;
    }

    .site-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #111827;
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.2s ease;
      opacity: 0.6;
    }

    .site-nav a:hover::after,
    .site-nav a:focus-visible::after {
      transform: scaleX(1);
    }

    .nav-toggle {
      display: none;
    }

    .nav-toggle-label {
      display: none;
      cursor: pointer;
      padding: 0.35rem;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      align-items: center;
      justify-content: center;
    }

    .nav-toggle-label span {
      display: block;
      width: 18px;
      height: 2px;
      background: #111827;
      border-radius: 10px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-toggle-label span + span {
      margin-top: 4px;
    }

    /* HERO */

    .hero {
      padding: 3.5rem 0 3rem;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr);
      gap: 2.75rem;
      align-items: center;
    }

    .hero-kicker {
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.18em;
      color: var(--text-muted);
      margin-bottom: 0.7rem;
    }

    .hero h1 {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: clamp(2.15rem, 3vw, 2.8rem);
      line-height: 1.18;
      margin: 0 0 0.9rem;
    }

    .hero-subtitle {
      font-size: 0.98rem;
      color: var(--text-muted);
      max-width: 28rem;
      margin: 0 0 1.6rem;
    }

    .hero-scroll {
      font-size: 0.9rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .hero-scroll::after {
      content: "";
      width: 30px;
      height: 1px;
      background: var(--border-subtle);
    }

    .hero-image {
      border-radius: 28px;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      background: #e5e7eb;
      position: relative;
    }

    .hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .hero-image-caption {
      position: absolute;
      bottom: 1.2rem;
      left: 1.4rem;
      padding: 0.4rem 0.7rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      font-size: 0.75rem;
      color: var(--text-muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* FEATURED CARDS */

    .featured-list {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }

    .feature-card {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
      gap: 1.75rem;
      background: #ffffff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding: 1.4rem;
      align-items: center;
    }

    /* Three identical cards in a row flatlined attention, and the rank was
       carried only by a label. The first card now leads at full width with the
       image on top, so emphasis is structural rather than asserted. */
    .feature-card--lead {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.25rem;
    }

    .feature-card--lead .feature-media {
      aspect-ratio: 16 / 9;
    }

    .feature-card--lead .feature-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature-card--lead .feature-title {
      font-size: 1.6rem;
    }

    .feature-media {
      border-radius: 22px;
      overflow: hidden;
      background: #e5e7eb;
    }

    .feature-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature-body {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    /* Was ".rank-label" reading 1ST / 2ND / 3RD PLACE - a leaderboard on a blog
       whose opening line is "this isn't about bucket lists". Now it says how
       often the place has been returned to, which is what the section heading
       already promises. Sentence case, not another uppercase micro-label:
       six separate elements were already competing in that same treatment. */
    .visit-count {
      align-self: flex-start;
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
      border: 1px solid var(--accent-soft-deep);
      background: var(--accent-soft);
      font-size: 0.78rem;
      color: var(--accent-deep);
    }

    .feature-title {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.25rem;
      margin: 0;
    }

    .feature-location {
      font-size: 0.9rem;
      color: var(--text-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .feature-description {
      font-size: 0.95rem;
      color: var(--text-main);
      line-height: 1.6;
      margin: 0.4rem 0 0.8rem;
    }

    .feature-link {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      align-self: flex-start;
      padding-bottom: 0.1rem;
      border-bottom: 1px solid #111827;
    }

    .feature-link:hover,
    .feature-link:focus-visible {
      opacity: 0.8;
    }

    /* LATEST POST */

    .latest-inner {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }

    .latest-card {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
      gap: 1.6rem;
      background: #ffffff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding: 1.4rem;
      align-items: center;
    }

    .latest-media {
      border-radius: 20px;
      overflow: hidden;
      background: #e5e7eb;
    }

    .latest-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 0.7rem;
    }

    .latest-location {
      padding: 0.14rem 0.7rem;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
      background: #f9fafb;
    }

    .latest-date {
      padding: 0.14rem 0;
    }

    .latest-title {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.25rem;
      margin: 0 0 0.6rem;
    }

    .latest-preview {
      font-size: 0.95rem;
      color: var(--text-main);
      line-height: 1.6;
      margin: 0 0 0.9rem;
    }

    .latest-link {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      padding-bottom: 0.1rem;
      border-bottom: 1px solid #111827;
      display: inline-block;
    }

    .latest-link:hover,
    .latest-link:focus-visible {
      opacity: 0.85;
    }

    /* DESTINATION GRID */

    .dest-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.4rem;
    }

    .dest-card {
      display: flex;
      flex-direction: column;
      border-radius: 18px;
      background: #ffffff;
      border: 1px solid var(--border-subtle);
      overflow: hidden;
      text-decoration: none;
      box-shadow: 0 16px 30px rgba(15, 23, 42, 0.04);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .dest-card:hover,
    .dest-card:focus-visible {
      transform: translateY(-3px);
      box-shadow: 0 22px 40px rgba(15, 23, 42, 0.08);
      border-color: var(--accent-soft-deep);
    }

    .dest-image {
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #e5e7eb;
    }

    .dest-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .dest-body {
      padding: 0.9rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .dest-title {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1rem;
    }

    .dest-link-label {
      font-size: 0.8rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    /* ABOUT */

    .about-inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 2.2rem;
      align-items: center;
    }

    .about-photo {
      display: flex;
      justify-content: center;
    }

    .about-photo-inner {
      width: 120px;
      height: 120px;
      border-radius: 999px;
      padding: 4px;
      background: radial-gradient(circle at top left, #e5edff, #f3f4f6);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-photo-inner img {
      width: 100%;
      height: 100%;
      border-radius: 999px;
      object-fit: cover;
    }

    .about-text h2 {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.6rem;
      margin: 0 0 0.8rem;
    }

    .about-text p {
      margin: 0 0 0.8rem;
      font-size: 0.96rem;
      line-height: 1.7;
      color: var(--text-main);
    }

    .about-text p:last-child {
      margin-bottom: 0;
    }

    /* FOOTER */

    .site-footer {
      border-top: 1px solid var(--border-subtle);
      padding: 2.4rem 0 2rem;
      background: #ffffff;
    }

    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      gap: 1.75rem;
      justify-content: space-between;
      align-items: flex-start;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .footer-left {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    .social-list {
      display: flex;
      gap: 0.75rem;
      align-items: center;
    }

    .social-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .social-icon {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f9fafb;
      transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }

    .social-icon:hover,
    .social-icon:focus-visible {
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      transform: translateY(-1px);
    }

    .social-icon svg {
      width: 16px;
      height: 16px;
    }

    .sustainability-block {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.6rem 0.8rem;
      align-items: center;
      padding: 0.65rem 0.9rem;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid var(--border-subtle);
      max-width: 360px;
    }

    /* At 375px the nowrap badge (~230px) left the text column ~58px wide, so the
       paragraph wrapped to one or two words per line for ~20 lines. */
    @media (max-width: 640px) {
      .sustainability-block {
        grid-template-columns: minmax(0, 1fr);
      }
      .sustainability-badge {
        justify-self: start;
      }
    }

    .sustainability-badge {
      padding: 0.1rem 0.7rem;
      border-radius: 999px;
      border: 1px solid #bbf7d0;
      background: #dcfce7;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #166534;
      white-space: nowrap;
    }

    .sustainability-text {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.5;
    }

    .footer-right {
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      align-items: flex-end;
    }

    .back-to-top {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
      background: #f9fafb;
      font-size: 0.8rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
    }

    .back-to-top:hover,
    .back-to-top:focus-visible {
      background: #ffffff;
      box-shadow: var(--shadow-soft);
    }

    .copyright {
      margin: 0;
      font-size: 0.8rem;
      color: var(--text-muted);
      text-align: right;
    }

    /* RESPONSIVE */

    @media (max-width: 960px) {
      .hero-inner {
        grid-template-columns: 1fr;
      }

      .hero-image {
        /* Deliberately NOT order:-1. Putting the photo first pushed the H1 to
           y=550 on a 375x812 screen, below the cookie banner, so the first
           viewport showed a logo and an image and none of the point. */
        aspect-ratio: 4 / 5;
        max-height: 42svh;
      }

      .feature-card,
      .latest-card {
        grid-template-columns: 1fr;
      }

      .about-inner {
        grid-template-columns: 1fr;
      }

      .footer-inner {
        align-items: stretch;
      }

      .footer-right {
        align-items: flex-start;
      }
    }

    @media (max-width: 768px) {
      .header-inner {
        justify-content: space-between;
      }

      .site-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        flex-direction: column;
        padding: 0.8rem 1.5rem 1rem;
        gap: 0.5rem;
        transform-origin: top;
        transform: scaleY(0.7);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.18s ease, opacity 0.18s ease;
      }

      .nav-toggle-label {
        display: inline-flex;
      }

      .nav-toggle:checked ~ .site-nav {
        opacity: 1;
        pointer-events: auto;
        transform: scaleY(1);
      }

      .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
        transform: translateY(3px) rotate(45deg);
      }

      .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
        opacity: 0;
      }

      .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
        transform: translateY(-3px) rotate(-45deg);
      }

      .section {
        padding: 3.2rem 0;
      }

      .hero {
        padding-top: 2.4rem;
      }
    }

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

      .feature-card,
      .latest-card {
        padding: 1.1rem;
      }

      .hero-image {
        border-radius: 22px;
      }
    }

    /* -------------------------------------------------------
   TRAVEL INDEX PAGE – EXTRA STYLES
   (These classes are new and won't override existing ones.)
--------------------------------------------------------*/

/* Page title on the travel index */
.page-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 2rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
}

/* Short line of intro text under the title */
.page-intro-text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 30rem;
}

/* Regions section – keeps everything vertically stacked and clean */
.index-regions .container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Each region block (Europe, Americas) */
.region-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Region headings – simple and consistent with overall typography */
.region-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.2rem;
  margin: 0;
}

/* Basic list for region destinations */
.region-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each list item just adds a little vertical spacing */
.region-list li + li {
  margin-top: 0.35rem;
}

/* Destination links: minimal, no borders or special decoration */
.region-list a {
  font-size: 0.96rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Remove underline on hover but don't add fancy effects */
.region-list a:hover,
.region-list a:focus-visible {
  text-decoration: none;
}

/* Latest posts section subtitle */
.section-subtitle {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.4rem;
  margin: 0 0 1.4rem;
}

/* Wrapper for the vertical feed of posts */
.post-feed {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Single post card: full-width clickable block */
.post-card {
  display: block;
  text-decoration: none;
}

/* Thumbnail at the top of each post card */
.post-thumb {
  width: 100%;
  margin-bottom: 0.8rem;
}

/* Images: no overlays, just clean rectangular photos */
.post-thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Text content of the post card */
.post-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Post title */
.post-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.1rem;
  margin: 0;
}

/* Region and country line */
.post-meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Date line */
.post-date {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Keep hover state understated: tiny opacity shift only */
.post-card:hover .post-title,
.post-card:focus-visible .post-title {
  opacity: 0.9;
}


/* -------------------------------------------------------
   HOME – CTA STRIP (links to blogs / hotel reviews)
--------------------------------------------------------*/

.home-cta-section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: #ffffff; /* keep it clean; change to var(--bg-soft) if you want a soft block */
}

.home-cta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.home-cta-text {
  max-width: 460px;
}

.home-cta-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.home-cta-title {
  margin: 0 0 0.4rem;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.35rem;
}

.home-cta-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.home-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* Buttons */
.home-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--border-subtle);
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Primary = dark pill */
.home-cta-button--primary {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

/* Secondary = light outline */
.home-cta-button--secondary {
  background: #ffffff;
  color: var(--text-main);
}

.home-cta-button:hover,
.home-cta-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .home-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Footer – minimal variant for the index page */


/* Footer inner layout: left side links, right side credit */
.footer-minimal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Footer text links */
.footer-minimal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Individual footer links – plain and simple */
.footer-link {
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-link:hover,
.footer-link:focus-visible {
  text-decoration: none;
}

/* "Cookie settings" is a <button> (it performs an action, it does not navigate)
   but should read as just another footer link. */
.footer-link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  cursor: pointer;
}

/* Credit line on the right */
.footer-minimal-credit {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Slight adjustments on smaller screens to keep everything tidy */
@media (max-width: 640px) {
  .page-title {
    font-size: 1.6rem;
  }

  .footer-minimal-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -------------------------------------------------------
   BLOG INDEX PAGE – EXTRA STYLES
   (New classes only; existing styles stay untouched.)
--------------------------------------------------------*/

/* -------------------------------------------------------
   BLOG – RELATED POSTS SECTION
--------------------------------------------------------*/

.blog-related-section {
  border-top: 1px solid var(--border-subtle);
}

.blog-related-inner {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.blog-related-header {
  text-align: left;
}

.blog-related-intro {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Cards list */
.blog-related-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Single card */
.blog-related-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: flex-start;
}

/* Image wrapper – square, consistent thumbnails */
.blog-related-image-link {
  display: block;
  flex-shrink: 0;
}

.blog-related-image {
  margin: 0;
  width: 120px;           /* adjust size if you want bigger/smaller */
  aspect-ratio: 1 / 1;    /* ✅ square */
  border-radius: 18px;
  overflow: hidden;
  background: #e5e7eb;
}

.blog-related-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* centre + crop portrait/landscape */
}

/* Text area */
.blog-related-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.blog-related-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1rem;
  margin: 0;
}

.blog-related-title a {
  text-decoration: none;
  color: var(--text-main);
}

.blog-related-title a:hover,
.blog-related-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.blog-related-meta {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-related-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* Responsive tweak */
@media (max-width: 640px) {
  .blog-related-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-related-image {
    width: 100%;
    max-width: 260px;
  }
}

/* -------------------------------------------------------
   BLOG LISTS (inline checklists / itemised details)
--------------------------------------------------------*/

.blog-list {
  margin: 1rem 0 1.6rem;          /* breathing room above + below */
  padding-left: 0;                /* remove default UL indent */
  list-style: none;               /* no browser bullets */
  display: flex;
  flex-direction: column;
  gap: 0.45rem;                   /* consistent spacing between items */
}

.blog-list li {
  position: relative;
  padding-left: 1.2rem;           /* space for a custom bullet */
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Soft custom bullet */
.blog-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-subtle);
}

/* Label part (your <strong> bits) */
.blog-list li strong {
  font-weight: 600;
  margin-right: 0.25rem;
}

/* Top section containing the back button */
.blog-index-top .container {
  display: flex;
  justify-content: flex-start;
}

/* Simple back button – rounded, no shadows, minimal styling */
.blog-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
}

/* Keep hover state very understated */
.blog-back-link:hover,
.blog-back-link:focus-visible {
  text-decoration: none;
}

/* -------------------------------------------------------
   BLOG INDEX – FILTERS & SEARCH
--------------------------------------------------------*/

.blog-index-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.3rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.blog-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-filter-btn {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #ffffff;
  color: var(--text-main);
  cursor: pointer;
}

.blog-filter-btn.is-active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.blog-filter-btn:hover,
.blog-filter-btn:focus-visible {
  box-shadow: var(--shadow-soft);
}

/* Search */
.blog-search-wrap {
  min-width: 190px;
}

.blog-search-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

/* Accessibility helper */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 640px) {
  .blog-index-controls {
    align-items: flex-start;
  }

  .blog-search-wrap {
    width: 100%;
  }
}
/* Intro section: center title + filter link vertically */
.blog-index-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
}

/* The intro block stacks its children, so section links that belong side by
   side go in this row. Wraps to a column on narrow screens. */
.blog-index-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

/* Section title “Personal Blogs” */
.blog-section-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* Wide “Hotel Reviews” button link */
.blog-filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Grid wrapper for blog cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
}

/* Individual blog card: clickable, no shadows */
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}


.blog-card-thumb {
  width: 100%;
  /* choose the ratio you like:
     4 / 3 = a bit taller, 16 / 9 = more cinematic */
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #e5e7eb;         /* soft grey fallback if image fails */
  margin-bottom: 0.85rem;      /* breathing room before text */
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* crop portrait/landscape nicely */
}

/* Text area inside the card */
.blog-card-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Blog post title */
.blog-card-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.1rem;
  margin: 0;
}

/* Metadata line: category + date */
.blog-card-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* One-sentence preview paragraph */
.blog-card-preview {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Keep hover state calm: tiny opacity change on title only */
.blog-card:hover .blog-card-title,
.blog-card:focus-visible .blog-card-title {
  opacity: 0.9;
}

/* Pagination container – centered layout */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.9rem;
}

/* Pagination buttons: simple, rounded, no shadows */
.pagination-button {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  font: inherit;
}

/* Disabled pagination buttons look softer */
.pagination-button[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* Center pagination label */
.pagination-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Small responsive tweaks */
@media (max-width: 640px) {
  .blog-section-title {
    font-size: 1.6rem;
    letter-spacing: 0.14em;
  }

  .blog-card-body {
    padding: 0.9rem 0.9rem 1.1rem;
  }
}


/* -------------------------------------------------------
   CONTACT PAGE – EXTRA STYLES
   (New classes only; existing styles remain unchanged.)
--------------------------------------------------------*/

/* Intro section layout */
.contact-intro-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Contact title */
.contact-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Lead paragraph under title */
.contact-lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Small note about what not to send */
.contact-note {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Layout for contact content: panel + form */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* Left-side information panel */
.contact-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Panel heading */
.contact-panel-heading {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.25rem;
  margin: 0;
}

/* List of details in the left panel */
.contact-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Label + value pair */
.contact-detail-label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}

.contact-detail-value {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Right-side form section */
.contact-form-section {
  width: 100%;
}

/* The form itself */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Each field group */
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Labels for inputs */
.contact-label {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Inputs, selects and textareas share a consistent look */
.contact-input,
.contact-select,
.contact-textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: #ffffff;
  color: var(--text-main);
}

/* Remove default resize handle on textareas in some browsers (optional) */
.contact-textarea {
  resize: vertical;
  min-height: 140px;
}

/* Focus styles – simple border change, no glow */
.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
  outline: none;
  border-color: #111827;
}

/* Small helper / hint text under fields */
.contact-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Consent row: checkbox + text */
.contact-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
}

/* Checkbox itself */
.contact-consent input[type="checkbox"] {
  margin-top: 0.25rem;
}

/* Consent label text */
.contact-consent-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-main);
}

/* Style the link inside consent text minimally */
.contact-consent-text a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Submit row buttons */
.contact-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Primary button style (can be reused elsewhere) */
.primary-button {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.6rem 1.4rem;
  background: #111827;
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Secondary reset button – outlined only */
.contact-reset-button {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.5rem 1.2rem;
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Small responsive tweaks */
@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .contact-title {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

  .contact-intro-inner {
    padding: 0 0.25rem;
  }
}

/* -------------------------------------------------------
   PRIVACY POLICY PAGE – EXTRA STYLES
   (New classes only; existing styles remain as-is.)
--------------------------------------------------------*/

/* Intro area for legal pages */
.legal-intro-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Main title "Privacy Policy" */
.legal-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Last updated line */
.legal-updated {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Lead paragraph under the title */
.legal-lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Small note paragraph */
.legal-note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Wrapper for all legal sections */
.legal-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 840px;
  margin: 0 auto;
}

/* Individual section block */
.legal-section {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Subheadings (1., 2., etc.) */
.legal-heading {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.15rem;
  margin: 0;
}

/* Body text */
.legal-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Lists within legal sections */
.legal-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-list li + li {
  margin-top: 0.4rem;
}

/* Links inside legal text: underline only */
.legal-text a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Slightly tighter section padding for legal pages on small screens */
@media (max-width: 640px) {
  .legal-title {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

  .legal-sections {
    padding: 0 0.25rem;
  }
}




/* -------------------------------------------------------
   DESTINATION CATEGORY PAGES – EXTRA STYLES
--------------------------------------------------------*/

/* Intro stack: flag, title, back link */
.destination-intro-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.destination-flag-wrap {
  width: 80px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
}

.destination-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Main destination title ("England") */
.destination-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Back link to parent category */
.destination-back-link {
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Region / town selector bar */
.destination-region-nav-inner {
  display: flex;
  justify-content: center;
}

.destination-region-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.destination-region-list a {
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.destination-region-list a:hover,
.destination-region-list a:focus-visible {
  text-decoration: none;
}

/* Tagline / intro line */
.destination-tagline-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.destination-tagline {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Featured destinations grid (simple cards, no heavy shadows) */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem;
}

.destination-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* Destination cards – consistent image size across all templates */
.destination-card-image {
  aspect-ratio: 4 / 3;        /* or 1 / 1 for square, 3 / 2 if you prefer */
  overflow: hidden;
  background: #e5e7eb;        /* soft fallback color behind images */
}

.destination-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* fill the box, crop as needed */
}

.destination-card-body {
  padding: 0.8rem 0.9rem 1rem;
}

.destination-card-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1rem;
  margin: 0;
}

/* Recent posts list */
.destination-post-list {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* Single post card */
.destination-post-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
  gap: 1.3rem;
  align-items: flex-start;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  padding: 1rem;
}

/* Image link */
.destination-post-image-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.destination-post-image-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Text body */
.destination-post-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.destination-post-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.1rem;
  margin: 0;
}

.destination-post-title a {
  text-decoration: none;
}

.destination-post-title a:hover,
.destination-post-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.destination-post-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.destination-post-preview {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.destination-post-readmore {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* Responsive tweaks for posts */
@media (max-width: 768px) {
  .destination-post-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .destination-title {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

  .destination-region-list {
    justify-content: center;
  }
}


/* -------------------------------------------------------
   BLOG POST PAGES – LAYOUT & TYPOGRAPHY
--------------------------------------------------------*/

/* Hero/title area */
.blog-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Breadcrumb */
.blog-breadcrumb {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-breadcrumb a {
  text-decoration: none;
  color: inherit;
}

.blog-breadcrumb a:hover,
.blog-breadcrumb a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.blog-back-row {
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: #f9fafb;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-main);
}

.blog-back-link:hover,
.blog-back-link:focus-visible {
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.breadcrumb-separator {
  margin: 0 0.25rem;
  opacity: 0.6;
}

/* Main blog title */
.blog-hero-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

/* Intro paragraph under the title */
.blog-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-main);
}

/* Main content wrapper */
.blog-content-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Individual blog sections */
.blog-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Section headings (per pub/segment) */
.blog-section-heading {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.4rem;
  margin: 0;
}

/* Centered images with gentle rounding */
.blog-section-image {
  margin: 0;
  max-width: 720px;
  align-self: center;
}

.blog-section-image img {
  /* width:auto + max-height, rather than width:100%, so a portrait phone shot
     scales down to fit instead of running to ~900px tall and filling a laptop
     screen. Landscape images are unaffected - at 720px wide they are already
     ~504px tall, under the cap. Nothing is cropped; both dimensions scale. */
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin: 0 auto;
  display: block;
  border-radius: 18px;
}

/* Story text */
.blog-section-text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--text-main);
}

/* Gallery section */
/* -------------------------------------------------------
   BLOG – GALLERY WITH LIGHTBOX
--------------------------------------------------------*/

/* Thumbnail grid */
.blog-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.blog-gallery-thumb {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);

  /* NEW: force a consistent box size */
  aspect-ratio: 4 / 5;   /* try 1 / 1 for squares, or 4 / 3 if you prefer wider */
}

/* Make every image fill its box, regardless of original shape */
.blog-gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.18s ease;
}

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

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

/* Lightbox dialog */
.lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: 960px;
  width: min(90vw, 960px);
  margin: 0 auto;
  padding: 1.2rem 1.2rem 1.4rem;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.lightbox-close {
  align-self: flex-end;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}

.lightbox-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lightbox-figure img {
  max-height: 70vh;
  width: 100%;
  object-fit: contain;
  border-radius: 16px;
}

.lightbox-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.lightbox-nav {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: #f9fafb;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.3rem;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

/* Responsive */
@media (max-width: 720px) {
  .lightbox-dialog {
    width: 92vw;
    padding: 0.9rem 0.9rem 1.1rem;
  }

  .lightbox-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lightbox-nav {
    order: -1;
    width: 40px;
    height: 28px;
    margin: 0 auto;
  }

  .lightbox-figure img {
    max-height: 60vh;
  }
}
/* Local back-to-top button in gallery section */
.blog-back-top-wrap {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
}

.blog-back-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .blog-hero-title {
    font-size: 1.7rem;
    letter-spacing: 0.04em;
  }

  .blog-content-inner {
    gap: 2rem;
  }
}



/* -------------------------------------------------------
   REGIONAL DIRECTORY PAGES (e.g. Cornwall)
--------------------------------------------------------*/

.region-hero-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.region-emblem-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.region-emblem {
  width: 80px;
  height: auto;
  border-radius: 12px;
}

.region-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.region-breadcrumb {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.region-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.region-breadcrumb a:hover,
.region-breadcrumb a:focus-visible {
  text-decoration: none;
}

.region-intro-text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Directory listing */
/* Directory listing – smaller, card-like posts similar to destination layout */

.region-directory .container {
  max-width: 780px; /* a bit narrower so content feels more focused */
}

/* Stack posts vertically with good spacing */
.region-post-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

/* Each post feels like a soft card but still minimal */
.region-post {
  padding: 1.8rem 1.6rem;
  border-radius: 22px;
  box-shadow: none; /* or keep your soft shadow if you like it */
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Image: smaller, centered, with consistent width */
/* Regional directory post images – square and consistent */
.region-post-image {
  margin: 0 auto;
  max-width: 500px;          /* tweak this number to taste */
  width: 100%;
  aspect-ratio: 1 / 1;       /* ✅ make the box perfectly square */
  border-radius: 20px;
  overflow: hidden;
  background: #e5e7eb;       /* soft fallback behind images */
}

.region-post-image img {
  width: 100%;
  height: 100%;              /* ✅ fill the square */
  display: block;
  object-fit: cover;         /* crop to fit, no distortion */
}
/* Text stacked underneath, similar typography to your destination cards */
.region-post-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
}

.region-post-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.2rem;
  margin: 0;
}

.region-post-title a {
  text-decoration: none;
}

.region-post-title a:hover,
.region-post-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.region-post-meta {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.region-post-excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-main);
}

.region-post-readmore {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  border-bottom: 1px solid #111827;
  padding-bottom: 0.1rem;
  align-self: center;
}

.region-post-readmore:hover,
.region-post-readmore:focus-visible {
  opacity: 0.8;
}

/* Slight tighten on small screens */
@media (max-width: 600px) {
  .region-directory .container {
    max-width: 100%;
  }

  .region-post {
    padding: 1.4rem 1.2rem;
  }

  .region-post-image {
    max-width: 340px;
  }
}

/* -------------------------------------------------------
   BLOG – TOP SPOTS SECTION
--------------------------------------------------------*/

/* Highlight badge for Ryan's favourite spots */
.blog-spot-fave {
  align-self: flex-start;
  /* The pill is nowrap so it never breaks mid-phrase, but a long label
     ("Group Favourite Campsite") gets within a pixel or two of the card
     edge on a 320px screen. Cap it and let it wrap there rather than
     poking out of the card. */
  max-width: 100%;
  margin-bottom: 0.3rem;
  padding: 0.16rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #fed7aa;
  background: #fffbeb;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #92400e;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .blog-spot-fave {
    white-space: normal;
  }
}


.blog-spots-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.blog-spots-header {
  text-align: center;
}

.blog-spots-intro {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-main);
}

.blog-spots-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.blog-spot {
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.blog-spot-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.05rem;
  margin: 0;
}

.blog-spot-meta {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-spot-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* -------------------------------------------------------
   BLOG – MAP SECTION
--------------------------------------------------------*/

.blog-map-inner {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.blog-map-intro {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-main);
}

.blog-map-frame {
  border-radius: 22px;
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: var(--shadow-soft);
}

.blog-map-frame iframe {
  width: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

/* Small screen tweaks */
@media (max-width: 640px) {
  .blog-spots-inner,
  .blog-map-inner {
    max-width: 100%;
  }

  .blog-spot {
    padding: 1rem 1rem 1.1rem;
  }

  .blog-map-frame iframe {
    min-height: 260px;
  }
}



.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  padding: 0.9rem 1rem 1.1rem;
  background: rgba(249, 250, 251, 0.98);
  border-top: 1px solid var(--border-subtle);
  backdrop-filter: blur(8px);
}

.cookie-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex: 1 1 220px;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cookie-btn {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.cookie-btn-accept {
  background: #111827;
  color: #ffffff;
}

.cookie-btn-decline {
  background: #ffffff;
  color: var(--text-main);
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
  box-shadow: var(--shadow-soft);
}

.cookie-banner--visible {
  display: block;
}

    /* ------------------------------------------------------------------
       STRAVA PANEL  (Outdoors > adventures)
       Charts are hand-built inline SVG - the site's CSP allows no external
       script or style origins, so no chart library is used. Categorical
       colours are the validated slots 1-3; aqua sits below 3:1 on white, so
       the panel always ships the numbers as a table as well.
       ------------------------------------------------------------------ */

    .strava-panel {
      background: var(--bg-soft);
    }

    .strava-inner {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }

    .strava-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1px;
      background: var(--border-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .strava-stat {
      background: var(--bg);
      padding: 1.4rem 1.2rem;
      text-align: center;
    }

    .strava-stat-value {
      margin: 0;
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.9rem;
      line-height: 1.1;
      color: var(--text-main);
    }

    .strava-stat-unit {
      font-size: 0.95rem;
      color: var(--text-muted);
      margin-left: 0.15rem;
    }

    .strava-stat-label {
      margin: 0.45rem 0 0;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .viz-card {
      background: var(--bg);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 1.6rem 1.4rem 1.2rem;
      position: relative;
    }

    .viz-title {
      margin: 0 0 0.3rem;
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.15rem;
      color: var(--text-main);
    }

    .viz-subtitle {
      margin: 0 0 1.2rem;
      font-size: 0.9rem;
      line-height: 1.5;
      color: var(--text-muted);
    }

    .viz-figure {
      margin: 0;
      overflow-x: auto;
    }

    .viz-svg {
      display: block;
      width: 100%;
      min-width: 460px;
      height: auto;
      font-family: "Inter", system-ui, sans-serif;
    }

    /* .viz-svg sets display:block, which as an author rule beats the UA
       [hidden] rule - without this the hidden elevation profile still renders. */
    .viz-svg[hidden],
    .strava-note[hidden] {
      display: none;
    }

    .viz-tick  { font-size: 11px; fill: #7b7b87; }
    .viz-axis  { font-size: 11px; fill: #7b7b87; letter-spacing: 0.04em; }
    .viz-value { font-size: 12px; font-weight: 600; fill: #222222; }

    .viz-hit { cursor: default; outline: none; }
    .viz-hit:hover, .viz-hit:focus-visible { fill: rgba(34, 34, 34, 0.04); }

    .viz-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 1.2rem;
      margin: 0 0 1rem;
      padding: 0;
      list-style: none;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .viz-legend li {
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }

    .viz-swatch {
      width: 11px;
      height: 11px;
      border-radius: 3px;
      flex: none;
    }

    .viz-toggle {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 0 0 1.2rem;
    }

    .viz-toggle-btn {
      font-family: inherit;
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.45rem 0.9rem;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      background: var(--bg);
      color: var(--text-muted);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .viz-toggle-btn:hover { border-color: var(--accent-soft-deep); }

    .viz-toggle-btn.is-active {
      background: #1F2933;
      border-color: #1F2933;
      color: #ffffff;
    }

    .viz-tooltip {
      position: absolute;
      z-index: 5;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -120%);
      background: #1F2933;
      color: #ffffff;
      font-size: 0.78rem;
      line-height: 1.4;
      padding: 0.45rem 0.7rem;
      border-radius: 8px;
      white-space: nowrap;
      transition: opacity 0.12s ease;
    }

    .viz-tooltip.is-visible { opacity: 1; }

    .viz-table-toggle {
      margin-top: 1rem;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .viz-table-toggle summary {
      cursor: pointer;
      padding: 0.3rem 0;
    }

    .viz-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0.8rem;
      font-size: 0.85rem;
    }

    .viz-table th,
    .viz-table td {
      text-align: right;
      padding: 0.45rem 0.6rem;
      border-bottom: 1px solid var(--border-subtle);
      color: var(--text-main);
    }

    .viz-table th { color: var(--text-muted); font-weight: 500; }
    .viz-table th:first-child,
    .viz-table td:first-child { text-align: left; }

    .strava-note {
      margin: 0;
      font-size: 0.85rem;
      line-height: 1.6;
      color: var(--text-muted);
    }

    @media (max-width: 640px) {
      .strava-stat-value { font-size: 1.5rem; }
      .viz-card { padding: 1.2rem 1rem 1rem; }
    }

    /* ------------------------------------------------------------------
       POST FOLLOW STRIP
       End-of-article prompt pointing at Instagram. Sits between the article
       body and the related-posts list on every Outdoors post.
       ------------------------------------------------------------------ */

    .post-follow-section {
      padding: 3rem 0;
      background: var(--bg-soft);
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }

    .post-follow-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.2rem;
    }

    .post-follow-text {
      margin: 0;
      max-width: 34rem;
      font-size: 0.98rem;
      line-height: 1.6;
      color: var(--text-main);
    }

    .post-follow-text strong {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-weight: 700;
    }

    .post-follow-link {
      display: inline-flex;
      align-items: baseline;
      gap: 0.4rem;
      flex: none;
      padding: 0.6rem 1.15rem;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      background: var(--bg);
      font-size: 0.9rem;
      letter-spacing: 0.02em;
      color: var(--text-main);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .post-follow-handle {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .post-follow-link:hover,
    .post-follow-link:focus-visible {
      border-color: var(--accent-soft-deep);
      box-shadow: var(--shadow-soft);
      transform: translateY(-1px);
    }

    @media (max-width: 560px) {
      .post-follow-inner {
        justify-content: flex-start;
      }
    }


    /* ------------------------------------------------------------------
       AFFILIATE LINKS
       The global `a { color: inherit; text-decoration: none }` rule makes
       inline links indistinguishable from body text, so affiliate CTAs
       were invisible. Two fixes here:
         1. .aff-button  - a real button, on the site's primary treatment
         2. inline links inside article text get an underline back
       Disclosure sits with the link (.aff-tag), not only in the footer.
       ------------------------------------------------------------------ */

    .aff-buy {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.7rem 1rem;
      margin-top: 0.9rem;
    }

    .aff-button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.62rem 1.3rem;
      border-radius: var(--radius-full);
      background: #111827;
      border: 1px solid #111827;
      color: #ffffff;
      font-size: 0.82rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .aff-button:hover,
    .aff-button:focus-visible {
      background: #000000;
      box-shadow: var(--shadow-soft);
      transform: translateY(-1px);
    }

    /* Disclosure at the point of the link, not just in the footer */
    .aff-tag {
      display: inline-flex;
      align-items: center;
      padding: 0.16rem 0.6rem;
      border-radius: var(--radius-full);
      border: 1px solid #fed7aa;
      background: #fffbeb;
      color: #92400e;
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* Make ordinary inline links visible again inside article copy.
       Underline rather than colour alone, so it does not rely on hue. */
    .blog-section-text a,
    .blog-spot-text a,
    .blog-intro a,
    .legal-text a,
    .legal-list a,
    .strava-note a,
    .blog-map-intro a,
    .post-follow-text a {
      text-decoration: underline;
      text-underline-offset: 0.18em;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--accent-soft-deep);
      transition: text-decoration-color 0.18s ease;
    }

    .blog-section-text a:hover,
    .blog-spot-text a:hover,
    .blog-intro a:hover,
    .legal-text a:hover,
    .legal-list a:hover,
    .strava-note a:hover,
    .blog-map-intro a:hover,
    .post-follow-text a:hover {
      text-decoration-color: var(--text-main);
    }

    /* The button is not body copy - keep it free of the underline above */
    .blog-spot-text .aff-button,
    .blog-section-text .aff-button,
    .aff-buy .aff-button {
      text-decoration: none;
    }

    @media (max-width: 480px) {
      .aff-button { width: 100%; justify-content: center; }
    }


/* -------------------------------------------------------
   STAR RATINGS  (hotel reviews)

   One <svg> sprite per page holds a five-star row; each rating
   draws it twice - a grey track and a gold fill clipped from the
   right with inset(). Half stars land exactly on a star's centre
   because each star occupies a 24-unit cell in a 120-unit row.
   No external assets, so nothing here touches the CSP.
   ------------------------------------------------------- */

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.rating-stars {
  width: 108px;
  height: 21.6px;
  flex: none;
  display: block;
  overflow: visible;
}

.rating-stars-track { fill: #e3e3ee; }
.rating-stars-fill  { fill: #c9922b; }

/* Fill width = rating / 5. Clipped from the right. */
.rating--3  .rating-stars-fill { clip-path: inset(0 40% 0 0); }
.rating--35 .rating-stars-fill { clip-path: inset(0 30% 0 0); }
.rating--4  .rating-stars-fill { clip-path: inset(0 20% 0 0); }
.rating--45 .rating-stars-fill { clip-path: inset(0 10% 0 0); }
.rating--5  .rating-stars-fill { clip-path: inset(0 0 0 0); }

.rating-text {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Hero variant: sits between the title and the intro paragraph,
   with a hairline above it so it reads as a verdict rather than
   as part of the standfirst. */
.rating--hero {
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
}

/* Card variant: smaller, tucked under the meta line. */
.rating--card {
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.rating--card .rating-stars {
  width: 84px;
  height: 16.8px;
}

.rating--card .rating-text {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

@media (max-width: 380px) {
  .rating { flex-wrap: wrap; gap: 0.35rem 0.6rem; }
}

/* ===========================================================
   KEEP-UP STRIP  (added 2026-08-29)
   The homepage previously offered no reason to return: no visible
   RSS despite rss.xml existing and being declared in <head>, no
   archive link, and the only follow affordance was two 30px icons
   at 89% scroll depth under the word "Elsewhere". This sits directly
   after the newest post, where the question "how do I not miss the
   next one?" actually occurs.
   =========================================================== */
.keepup {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-soft);
}

.keepup-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2.25rem 1.5rem;
}

.keepup-text {
  max-width: 34rem;
}

.keepup-text h2 {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.45rem;
  margin: 0 0 0.35rem;
}

.keepup-text p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.keepup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.keepup-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  font-size: 0.92rem;
  color: var(--text-main);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.keepup-link:hover,
.keepup-link:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.keepup-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex: none;
}

/* Date on the featured cards. Before this the whole homepage carried exactly
   one date, and it was wrong. */
.feature-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.feature-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

@media (max-width: 640px) {
  .keepup-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.75rem 1.5rem;
  }
}

/* A programmatic .focus() does not trigger :focus-visible, so the cookie
   banner opened with focus on Accept and no visible indicator. */
.cookie-btn.is-focus-ring:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ===========================================================
   TOUCH-TARGET FLOOR  (added 2026-08-29)
   Measured before this pass at 375px: hamburger 67x19, open nav
   links 327x15, DISCOVER 88x19, READ MORE 102x19, footer links
   120x17. Every interactive element on the page failed WCAG
   2.5.8's 24x24 minimum, on the device most readers arrive on.
   Appended at the end of the sheet deliberately, so it wins the
   cascade over the earlier mobile blocks.
   =========================================================== */
@media (max-width: 960px) {
  .site-nav a,
  .feature-link,
  .latest-link,
  .footer-link,
  .back-to-top,
  .home-cta-button,
  .social-icon {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .nav-toggle-label {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  /* The <button> variant needs the same box without losing its baseline. */
  .footer-link-button {
    min-height: 44px;
  }
}

/* =========================================================================
   TRIAL: SQUARE (1:1) IMAGE BOXES  —  branch trial/square-images
   -------------------------------------------------------------------------
   Every image container on the site is forced to a 1:1 box here, in one
   block, so the whole experiment can be judged and then kept or deleted as
   a unit. Nothing above this comment was edited.

   Already 1:1 before this block, so absent from it:
     .blog-related-image, .destination-post-image-link,
     .region-post-image, .about-photo-inner

   Deliberately NOT squared:
     .lightbox-figure  - the lightbox is where you go to see the whole frame;
                         cropping it there defeats the purpose.
   ========================================================================= */

/* --- Homepage ----------------------------------------------------------- */
.hero-image,
.feature-media,
.feature-card--lead .feature-media,
.latest-media,
.dest-image {
  aspect-ratio: 1 / 1;
}

/* The lead card spans the full grid, so an unconstrained square is 867px on a
   1280px desktop - taller than most laptop viewports, and enough to push the
   card's own headline off the screen. Capping the width rather than the height
   keeps the box square and the photograph whole. */
.feature-card--lead .feature-media {
  /* width, not max-width + auto margins: auto margins make a grid item
     shrink-to-fit, and this one's only child is percentage-sized, so the box
     collapses to 0x0. A definite width plus justify-self keeps it centred. */
  width: min(100%, 560px);
  justify-self: center;
}

/* .latest-media had no img rule of its own - it inherited the natural ratio. */
.latest-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 960px) {
  .hero-image {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 640px) {
  .hero-image {
    aspect-ratio: 1 / 1;
  }
}

/* --- Listing and card grids --------------------------------------------- */
.blog-card-thumb,
.destination-card-image,
.post-thumb {
  aspect-ratio: 1 / 1;
}

.post-thumb img {
  height: 100%;
}

/* --- Inside a post ------------------------------------------------------ */
.blog-gallery-thumb {
  aspect-ratio: 1 / 1;
}

/* .blog-section-image is deliberately NOT squared. It is the one place on the
   site where nothing has ever been cropped - the img sizes itself, both
   dimensions scale, and the whole frame survives to the page. Squaring it
   costs a quarter of every in-post photograph and buys nothing back: these
   figures are already the same width as each other, so there is no ragged
   edge to fix. See the trial commit for what it looked like. */