/* ==========================================================================
   Terroir Ghost Theme — screen.css
   Warm, editorial, personal/lifestyle blog theme
   ========================================================================== */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root {
  /* Colours — Engadin × Salento palette.
     v1.3.2: body bg shifted from #F3EBD8 (warm honey Calce) to #F5F1E8
     (lighter eggshell), while the header keeps the original Calce
     (hard-coded in .site-header rgba) for the warmer masthead stripe.
     Value scale, lightest → darkest: body → header → Pietra modules
     → border-dark. */
  --color-bg:           #F5F1E8;  /* eggshell body canvas (v1.3.2) */
  --color-surface:      #E8DFCC;  /* Pietra di Lecce — cards, chips, ride-cards */
  --color-surface-alt:  #DFD4BC;  /* darker Pietra — borders, dividers */
  --color-accent:       #B8553A;  /* Terra rossa */
  --color-accent-dark:  #8E3F2A;
  --color-accent-light: #EAC8B8;
  --color-text:         #2B2A28;  /* Sgraffito (warm near-black) */
  --color-text-muted:   #786C5C;  /* warm driftwood */
  --color-text-light:   #A89F97;
  --color-border:       #D8C9AE;
  --color-border-dark:  #BFA98A;
  --color-white:        #FFFFFF;
  --color-overlay:      rgba(43, 42, 40, 0.68);

  /* Supporting palette — per-category card-kicker tints + status colour.
     Used by .post-card__tag--{slug} rules below. */
  --color-uliveto:      #5C6B47;  /* Cycling / Mountain Bike */
  --color-acqua:        #4FA9B8;  /* Technology */
  --color-larice:       #C9893A;  /* Featured (status, not category) */
  --color-inn:          #2D5566;  /* deep alpine blue — v1.3.2 structural accent: drop cap, pull-quote, footer */
  --color-inn-light:    #5E8294;  /* lighter Inn — pull-quote rule + faint borders on Inn surfaces */

  /* Ghost custom accent override */
  --ghost-accent-color: var(--color-accent);

  /* Typography
     Two-serif system:
       --font-display = Playfair Display (theatrical, used once per page on hero H1)
       --font-serif   = Newsreader (workhorse for post titles, body headings, blockquotes)
       --font-sans    = DM Sans (UI labels, meta, navigation)
  */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', 'Fira Mono', 'Consolas', monospace;

  /* Type scale */
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1.0625rem;  /* 17px */
  --text-md:      1.125rem;   /* 18px */
  --text-lg:      1.375rem;   /* 22px */
  --text-xl:      1.75rem;    /* 28px */
  --text-2xl:     2.25rem;    /* 36px */
  --text-3xl:     3rem;       /* 48px */
  --text-display: clamp(2.25rem, 5vw, 4.5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --max-width:       1200px;
  --max-width-read:  720px;
  --max-width-narrow: 560px;
  --gutter:          2rem;
  --header-height:   68px;

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(28,26,23,0.06), 0 1px 2px rgba(28,26,23,0.04);
  --shadow-md:  0 4px 16px rgba(28,26,23,0.08), 0 2px 6px rgba(28,26,23,0.04);
  --shadow-lg:  0 10px 40px rgba(28,26,23,0.12), 0 4px 12px rgba(28,26,23,0.06);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ── 2. RESET & BASE ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, picture, figure {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover { color: var(--color-accent); }

ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

::selection {
  background: var(--color-accent-light);
  color: var(--color-text);
}

/* ── 3. READING PROGRESS BAR ──────────────────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1000;
  background: transparent;
  pointer-events: none;
}

.reading-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 100ms linear;
  border-radius: 0 2px 2px 0;
}

/* ── 4. SITE HEADER / NAVIGATION ──────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  /* Gutter lives on the outer so logo aligns with section content
     (home-hero, tag-filters, trail-strip, posts-grid) at the same x.
     Previously the gutter sat on .site-header__inner which, combined
     with max-width on the same element, shifted the logo one gutter-
     width to the right of section content at viewports >1200px. */
  padding: 0 var(--gutter);
  background: rgba(243, 235, 216, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition:
    background var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.site-header.is-scrolled {
  background: rgba(243, 235, 216, 0.97);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Over-hero: transparent header, white text with a subtle drop-shadow so the
   masthead remains legible against bright spots in the hero image (sky,
   white walls, snow, etc.). The hero overlay also has a top vignette —
   see .home-hero__overlay / .post-hero__overlay — for belt-and-braces. */
.site-header.over-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.over-hero .site-header__logo .wordmark {
  color: rgba(255,255,255,0.96);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45));
}

.site-header.over-hero .site-header__tagline {
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.site-header.over-hero .site-header__logo img {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}

/* Hamburger bars are visual elements — they need background-color, not color. */
.site-header.over-hero .site-header__menu-toggle-bar {
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Hide the primary nav while the header floats over the hero — minimal
   masthead look. The nav fades in once the user has scrolled past the
   hero (header gains .is-scrolled, loses .over-hero).
   `:not(.is-open)` keeps the mobile hamburger menu working even when
   the page is still at the top. */
.site-header.over-hero .site-nav:not(.is-open) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Logo: SVG wordmark + tagline, stacked.
   The SVG paints with `currentColor` so the .over-hero state above can
   flip it to white over hero photos. The tagline is hardcoded in
   partials/site-logo.hbs — change there if it ever changes. */
.site-header__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  gap: 3px;
  color: var(--color-accent);  /* terra rossa */
}

.site-header__logo:hover {
  color: var(--color-accent-dark);
}

/* Shared FRISELLE wordmark — see partials/wordmark.hbs.
   Sized differently per context; both use currentColor. */
.wordmark {
  display: block;
  width: auto;
}
.site-header__logo .wordmark { height: 26px; }
.site-footer__logo .wordmark { height: 32px; }

.site-header__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  line-height: 1;
  white-space: nowrap;
}

/* Custom Ghost Admin logo escape hatch — if someone uploads a logo via
   Ghost Admin, the partial currently ignores it. If a future variant
   wants to use it, this rule keeps the sizing consistent. */
.site-header__logo img {
  height: 36px;
  width: auto;
  display: block;
}

/* Navigation links */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  /* Smooth fade for the over-hero hide/reveal — see .over-hero rule above. */
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}

.site-nav__list {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.site-nav__link {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 2px;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
  transform-origin: left;
}

.site-nav__item.is-active .site-nav__link,
.site-nav__link:hover {
  color: var(--color-text);
}

.site-nav__item.is-active .site-nav__link::after,
.site-nav__link:hover::after {
  transform: scaleX(1);
}

/* Header actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.site-header__account {
  display: flex;
  align-items: center;
}

.site-header__account img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* Mobile menu toggle */
.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px 0;
}

.site-header__menu-toggle-bar {
  display: block;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── 5. BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1.5px solid transparent;
}
.btn--primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border-dark);
}
.btn--outline:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn--subscribe {
  background: var(--color-accent);
  color: var(--color-white);
  padding: 0.5rem 1.1rem;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
}
.btn--subscribe:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

.btn--sm {
  padding: 0.45rem 1rem;
  font-size: 0.78rem;
}

/* ── 6. TAG CHIPS ─────────────────────────────────────────────────────────── */
.tag-chip {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
  cursor: pointer;
}

.tag-chip:hover,
.tag-chip--active {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* ── 7. HOME HERO ─────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  max-height: 920px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: calc(-1 * var(--header-height));
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero__bg--placeholder {
  background: linear-gradient(145deg, var(--color-surface-alt) 0%, var(--color-accent-light) 100%);
}

.home-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  /* Two stacked gradients:
       1. Top vignette — protects the masthead (logo + nav) from blending
          into bright areas of the hero image (white walls, sky, snow).
       2. Bottom darkening — provides contrast for the hero title block. */
  background:
    linear-gradient(
      to bottom,
      rgba(15,10,6,0.55) 0%,
      rgba(15,10,6,0.18) 10%,
      transparent 20%
    ),
    linear-gradient(
      to top,
      rgba(20,15,10,0.80) 0%,
      rgba(20,15,10,0.35) 40%,
      transparent 70%
    );
  z-index: 1;
}

.home-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-20) var(--gutter);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

.home-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.home-hero__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--space-4);
  text-decoration: none;
}
.home-hero__tag:hover { color: var(--color-white); }

.home-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-white);
  max-width: 820px;
  margin-bottom: var(--space-5);
}

.home-hero__title a {
  color: inherit;
  text-decoration: none;
}
.home-hero__title a:hover { color: var(--color-accent-light); }

.home-hero__excerpt {
  font-size: var(--text-md);
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.home-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-8);
}

.home-hero__meta-sep { color: rgba(255,255,255,0.3); }

.home-hero__read-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.home-hero__read-link:hover {
  border-bottom-color: var(--color-white);
  color: var(--color-white);
}

/* ── 8. TAG FILTER BAR ────────────────────────────────────────────────────── */
.tag-filters {
  padding: var(--space-6) var(--gutter);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--header-height);
  z-index: 50;
}

.tag-filters__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* ── 9. POSTS SECTION / GRID ──────────────────────────────────────────────── */
.posts-section {
  /* Gutter on the outer (matching tag-filters, trail-strip, home-hero)
     so the cards-grid aligns with everything else at viewports >1200px.
     Pre-v1.3.1 had padding on __inner alongside max-width, which shifted
     content one gutter-width to the right of the other sections. */
  padding: var(--space-16) var(--gutter);
}

.posts-section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Featured card spans 2 columns */
.posts-grid .post-card:first-child {
  grid-column: span 2;
}

.posts-grid.posts-grid--3 .post-card:first-child {
  grid-column: span 1;
}

/* Post Card */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-dark);
}

.post-card__image-link {
  display: block;
  overflow: hidden;
}

.post-card__image-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* First card (2-col span) gets wider aspect */
.posts-grid .post-card:first-child .post-card__image-wrap {
  aspect-ratio: 16 / 9;
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-card__image {
  transform: scale(1.04);
}

.post-card--no-image .post-card__content {
  background: var(--color-surface);
}

.post-card__content {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  text-decoration: none;
  transition: filter var(--transition-fast);
}
.post-card__tag:hover { filter: brightness(0.85); }

/* Per-category kicker tints. Ghost slug-ifies tag names (lowercase,
   hyphen-separated), so `Mountain Bike` becomes `mountain-bike`. The
   default colour above (terra rossa) covers Business and any
   uncategorised tag; the rules below tint the rest. */
.post-card__tag--cycling,
.post-card__tag--mtb,
.post-card__tag--mountain-bike { color: var(--color-uliveto); }

.post-card__tag--technology,
.post-card__tag--tech { color: var(--color-acqua); }

/* Featured posts override the category tint — Featured is a *status*
   (this post is special), not a category, so its colour wins over
   whatever primary_tag the post happens to have. */
.post-card--featured .post-card__tag { color: var(--color-larice); }

.post-card__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Bigger title for first/featured card */
.posts-grid .post-card:first-child .post-card__title {
  font-size: var(--text-xl);
}

.post-card__title-link {
  color: inherit;
  text-decoration: none;
}
.post-card__title-link:hover { color: var(--color-accent); }

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-4);
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  margin-top: auto;
}

.post-card__author {
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}
.post-card__author:hover { color: var(--color-accent); }

.post-card__meta-sep { color: var(--color-border-dark); }

.post-card__date, .post-card__reading-time {
  color: var(--color-text-light);
}

/* ── 10. NEWSLETTER CTA ───────────────────────────────────────────────────── */
.newsletter-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-20) var(--gutter);
}

.newsletter-section__inner {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  text-align: center;
}

.newsletter-section__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.newsletter-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.newsletter-section__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

/* ── 11. POST HERO ────────────────────────────────────────────────────────── */
.post-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  max-height: 960px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: calc(-1 * var(--header-height));
}

.post-hero--no-image {
  min-height: 380px;
  max-height: 480px;
  background: var(--color-surface);
  align-items: center;
}

.post-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.post-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.post-hero__overlay {
  position: absolute;
  inset: 0;
  /* Two stacked gradients — same pattern as home-hero__overlay. The bottom
     darkening is more pronounced here because the post hero hosts a larger
     title + dek + author block that needs maximum contrast. */
  background:
    linear-gradient(
      to bottom,
      rgba(15,10,6,0.55) 0%,
      rgba(15,10,6,0.18) 10%,
      transparent 20%
    ),
    linear-gradient(
      to top,
      rgba(15,10,6,0.82) 0%,
      rgba(15,10,6,0.40) 40%,
      rgba(15,10,6,0.10) 70%,
      transparent 100%
    );
}

.post-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-24) var(--gutter);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

.post-hero--no-image .post-hero__content {
  padding: var(--space-20) var(--gutter);
}

.post-hero__inner {
  max-width: var(--max-width-read);
  margin: 0 auto;
}

.post-hero__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--space-4);
  text-decoration: none;
}

.post-hero--no-image .post-hero__tag {
  color: var(--color-accent);
}

.post-hero__tag:hover { opacity: 0.8; }

.post-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.post-hero--no-image .post-hero__title {
  color: var(--color-text);
}

.post-hero__subtitle {
  font-size: var(--text-md);
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: var(--space-6);
}

.post-hero--no-image .post-hero__subtitle {
  color: var(--color-text-muted);
}

.post-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
}

.post-hero--no-image .post-hero__meta {
  color: var(--color-text-muted);
}

.post-hero__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.post-hero__author:hover { opacity: 0.8; }

.post-hero__author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.3);
}

.post-hero__meta-sep { color: rgba(255,255,255,0.25); }

.post-hero--no-image .post-hero__meta-sep { color: var(--color-border-dark); }

/* ── 12. POST BODY ────────────────────────────────────────────────────────── */
.post-body {
  padding: var(--space-16) var(--gutter);
}

.post-body__inner {
  max-width: var(--max-width-read);
  margin: 0 auto;
}

.post-image-caption {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: var(--space-10);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Post tags footer */
.post-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.post-tags__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-right: var(--space-2);
}

/* ── 13. GHOST CONTENT (post body) ───────────────────────────────────────── */
.gh-content {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text);
}

.gh-content > * + * { margin-top: 1.5em; }

/* Headings.
   `em` for vertical rhythm resolves to the heading's *own* font-size,
   which makes the gap balloon at larger heading sizes (h2 @ 36px ×
   2.5em = 90px). The pre-v1.3 numbers were too airy for editorial
   reading. Tightened: h2 ≈ 1.5× its own line, h3/h4 proportional. */
.gh-content h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

.gh-content h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

.gh-content h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin-top: 1.3em;
  margin-bottom: 0.4em;
}

/* Paragraph */
.gh-content p { line-height: 1.8; }

/* Drop cap on the article's opening paragraph (v1.3.2 · Move 1b).
   Inn deep-alpine-blue threads Engadin into long-form reading.
   `:first-of-type` matches the first <p> child even if the post
   opens with a figure or heading first. */
.gh-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 5.4em;
  line-height: 0.88;
  padding: 0.13em 0.22em 0 0;
  font-weight: 600;
  color: var(--color-inn);
}

/* Links */
.gh-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-light);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition-fast);
}
.gh-content a:hover {
  text-decoration-color: var(--color-accent);
}

/* Strong */
.gh-content strong { font-weight: 600; color: var(--color-text); }

/* Lists */
.gh-content ul, .gh-content ol {
  padding-left: 1.5em;
  list-style: revert;
}
.gh-content li + li { margin-top: 0.4em; }

/* Blockquote / Pull quote (v1.3.2 · Move 1b).
   Inn left border, no surface bg, italic Inn text. A typographic
   moment rather than a callout card — the surface bg was making
   blockquotes feel like sidebars; the new treatment lets them
   read as editorial pull-quotes. */
.gh-content blockquote {
  position: relative;
  border-left: 3px solid var(--color-inn);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  margin: var(--space-10) 0 var(--space-10) var(--space-4);
}

.gh-content blockquote::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-inn-light);
  margin-bottom: var(--space-3);
}

.gh-content blockquote p {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-inn);
  margin: 0;
}

.gh-content blockquote cite,
.gh-content blockquote footer {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}

/* Horizontal rule */
.gh-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-12) auto;
  max-width: 120px;
}

/* Figures & images */
.gh-content figure {
  margin: var(--space-12) 0;
}

.gh-content figure img {
  width: 100%;
  border-radius: var(--radius-md);
}

.gh-content figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  font-style: italic;
  text-align: center;
  margin-top: var(--space-3);
  line-height: 1.5;
}

/* Wide / Full images */
.gh-content .kg-width-wide {
  width: calc(100% + 120px);
  max-width: calc(100% + 120px);
  margin-left: -60px;
  margin-right: -60px;
}

.gh-content .kg-width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

.gh-content .kg-width-full img,
.gh-content .kg-width-full figcaption {
  border-radius: 0;
}

/* Code */
.gh-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-accent-dark);
}

.gh-content pre {
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow-x: auto;
  margin: var(--space-8) 0;
}

.gh-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: var(--text-sm);
}

/* Callout card */
.gh-content .kg-callout-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.gh-content .kg-callout-emoji {
  font-size: 1.5em;
  flex-shrink: 0;
}

/* Gallery */
.gh-content .kg-gallery-container { width: 100%; }
.gh-content .kg-gallery-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.gh-content .kg-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Video */
.gh-content .kg-video-card,
.gh-content iframe {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Embedded video iframes (YouTube, Vimeo, etc.) — make them behave
   like regular image figures. Ghost's editor honours YouTube's tiny
   width/height attrs on the iframe (e.g. 200×113), which renders as
   a thumbnail-sized embed against the 720px reading column. Force
   full-width within the kg-embed-card and a 16:9 aspect ratio so the
   embed card grows the same as a default image figure — and inherits
   the .kg-width-wide / .kg-width-full modifiers exactly as images
   do, no extra rules needed. */
.gh-content .kg-embed-card {
  margin: var(--space-12) 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.gh-content .kg-embed-card iframe,
.gh-content iframe[src*="youtube.com"],
.gh-content iframe[src*="youtu.be"],
.gh-content iframe[src*="vimeo.com"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Bookmark card */
.gh-content .kg-bookmark-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}
.gh-content .kg-bookmark-card:hover { box-shadow: var(--shadow-sm); }
.gh-content .kg-bookmark-container {
  display: flex;
  color: var(--color-text);
  text-decoration: none;
}
.gh-content .kg-bookmark-content {
  flex: 1;
  padding: var(--space-5);
  min-width: 0;
}
.gh-content .kg-bookmark-title {
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}
.gh-content .kg-bookmark-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gh-content .kg-bookmark-thumbnail {
  width: 160px;
  flex-shrink: 0;
}
.gh-content .kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 14. AUTHOR BIO ───────────────────────────────────────────────────────── */
.author-bio {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-12) var(--gutter);
}

.author-bio__inner {
  max-width: var(--max-width-read);
  margin: 0 auto;
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.author-bio__avatar-link { flex-shrink: 0; }

.author-bio__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.author-bio__label {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-1);
}

.author-bio__name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
.author-bio__name a { color: inherit; text-decoration: none; }
.author-bio__name a:hover { color: var(--color-accent); }

.author-bio__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 480px;
}

/* ── 15. RELATED POSTS ────────────────────────────────────────────────────── */
.related-posts {
  padding: var(--space-16) var(--gutter);
  background: var(--color-bg);
}

.related-posts__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.related-posts__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-10);
}

/* ── 16. POST NAVIGATION (prev/next) ──────────────────────────────────────── */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.post-navigation__item {
  padding: var(--space-10) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.post-navigation__item:hover {
  background: var(--color-surface);
}

.post-navigation__item--next {
  border-left: 1px solid var(--color-border);
  text-align: right;
  align-items: flex-end;
}

.post-navigation__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.post-navigation__item--next .post-navigation__label {
  justify-content: flex-end;
}

.post-navigation__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  max-width: 320px;
}

/* ── 17. ARCHIVE / TAG / AUTHOR HEROES ────────────────────────────────────── */
.archive-hero,
.author-hero,
.page-hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-height));
}

.archive-hero__bg,
.author-hero__bg,
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.archive-hero__image,
.author-hero__cover,
.page-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-hero__overlay,
.author-hero__overlay,
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.archive-hero__content,
.author-hero__content,
.page-hero__content {
  position: relative;
  z-index: 2;
  /* Extra breathing room on top: the back-link was sitting right under
     the fixed header. space-16 felt tight; bumped to space-20. */
  padding: calc(var(--header-height) + var(--space-20)) var(--gutter) var(--space-12);
}

.archive-hero__content--plain,
.author-hero__content--plain,
.page-hero__content {
  background: var(--color-surface);
}

.archive-hero__inner,
.author-hero__inner,
.page-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.archive-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  margin-bottom: var(--space-6);
}
.archive-hero__back:hover { color: rgba(255,255,255,0.9); }

.archive-hero__content--plain .archive-hero__back {
  color: var(--color-text-muted);
}

.archive-hero__type {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Neutral muted on both variants — the typographic hierarchy (small
     caps + tight tracking) carries the meta-label role on its own; an
     extra accent hue competes with the page title without adding info. */
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-3);
}
.archive-hero__content--plain .archive-hero__type {
  color: var(--color-text-light);
}

.archive-hero__title,
.author-hero__name,
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.archive-hero__content--plain .archive-hero__title,
.author-hero__content--plain .author-hero__name,
.page-hero__content .page-hero__title {
  color: var(--color-text);
}

.archive-hero__desc,
.author-hero__bio,
.page-hero__subtitle {
  font-size: var(--text-md);
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  max-width: 560px;
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

.archive-hero__content--plain .archive-hero__desc,
.author-hero__content--plain .author-hero__bio,
.page-hero__content .page-hero__subtitle {
  color: var(--color-text-muted);
}

.archive-hero__count,
.author-hero__count {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
}
.archive-hero__content--plain .archive-hero__count,
.author-hero__content--plain .author-hero__count {
  color: var(--color-text-light);
}

/* Author hero avatar */
.author-hero__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.25);
  margin-bottom: var(--space-5);
}

.author-hero__links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.author-hero__link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  text-decoration: underline;
  text-decoration-color: transparent;
}
.author-hero__link:hover {
  color: var(--color-white);
  text-decoration-color: var(--color-white);
}

/* ── 18. PAGINATION ───────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.pagination__newer,
.pagination__older {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.pagination__newer:hover,
.pagination__older:hover {
  color: var(--color-text);
  border-color: var(--color-border-dark);
  background: var(--color-surface);
}

.pagination__info {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* ── 19. EMPTY STATE ──────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-20);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* ── 20. ERROR PAGE ───────────────────────────────────────────────────────── */
.error-page {
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--gutter);
}

.error-page__inner {
  text-align: center;
  max-width: var(--max-width-narrow);
}

.error-page__code {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 400;
  color: var(--color-accent-light);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.error-page__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.error-page__message {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: 1.7;
}

/* ── 21. SITE FOOTER ──────────────────────────────────────────────────────── */
/* v1.3.2 · Move 3 — footer in Inn (deep alpine blue) instead of the
   near-black sgraffito. Cool close balances the warm Calce / terra
   rossa middle of every page; text & links live as Calce/accent
   tints over the Inn ground. */
.site-footer {
  background: var(--color-inn);
  color: rgba(245, 241, 232, 0.85);   /* body bg @ 85% — soft Calce on Inn */
  margin-top: auto;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter) var(--space-8);
  display: grid;
  /* 4 columns: brand is wider; the link columns are 1fr each.
     Brand column carries the wordmark + tagline + description. */
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

/* Brand column (SVG wordmark + tagline + optional description) */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgba(245, 241, 232, 0.95);   /* Calce wordmark on Inn footer */
  transition: color var(--transition-fast);
}
.site-footer__logo:hover { color: var(--color-accent-light); }

.site-footer__logo img { height: 32px; width: auto; filter: brightness(0) invert(1) opacity(0.95); }

.site-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(234, 200, 184, 0.85);   /* accent-light @ 85% — warmer footer subhead */
  line-height: 1.5;
  margin: 0;
}

.site-footer__desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: rgba(245, 241, 232, 0.65);
  line-height: 1.65;
  max-width: 280px;
  margin-top: var(--space-3);
}

/* Link columns (Topics, Newsletter, Elsewhere) */
.site-footer__col-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  margin-bottom: var(--space-5);
}

.site-footer__col-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__col-list li a {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: rgba(245, 241, 232, 0.88);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer__col-list li a:hover { color: var(--color-accent); }   /* terra rossa hover on Inn */

/* Bottom row — copyright (left) + Engadin · Salento (right) */
.site-footer__bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
}

.site-footer__copyright {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: rgba(245, 241, 232, 0.55);
  margin: 0;
}

.site-footer__copyright a {
  color: rgba(245, 241, 232, 0.75);
  text-decoration: none;
  font-style: normal;
}
.site-footer__copyright a:hover { color: var(--color-accent); }

.site-footer__place {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: rgba(245, 241, 232, 0.55);
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
}

/* ── 22. RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gh-content .kg-width-wide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 900px) {
  :root { --gutter: 1.5rem; }

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .posts-grid .post-card:first-child {
    grid-column: span 2;
  }

  /* 1100px: collapse to 2×2 grid. Brand spans the top row; the
     three link columns flow on the next row (Topics/Newsletter on
     the left, Elsewhere wraps onto the right). */
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .site-footer__brand { grid-column: 1 / -1; }

  .site-footer__bottom {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .post-navigation {
    grid-template-columns: 1fr;
  }

  .post-navigation__item--next {
    border-left: none;
    border-top: 1px solid var(--color-border);
    text-align: left;
    align-items: flex-start;
  }

  .post-navigation__item--next .post-navigation__label {
    justify-content: flex-start;
  }

  .author-bio__inner {
    flex-direction: column;
    gap: var(--space-5);
  }
}

@media (max-width: 680px) {
  :root {
    --gutter: 1.25rem;
    --header-height: 60px;
  }

  /* Give the hamburger toggle more breathing room on the right.
     The standard --gutter (20px) is fine for body content, but on narrow
     screens the icon visually crowds the rounded corner of the device.
     An asymmetric extra 8px feels deliberate. Lives on .site-header
     since v1.3.1 (the gutter moved from inner → outer for alignment). */
  .site-header {
    padding-right: calc(var(--gutter) + 0.5rem);
  }

  /* Hide the tagline on narrow screens — the SVG wordmark carries the
     identity, the tagline gets crammed and competes with the hamburger.
     Below 680px we go logo-only. */
  .site-header__tagline { display: none; }

  /* Mobile nav */
  .site-nav,
  .btn--subscribe {
    display: none;
  }

  .site-nav.is-open {
    display: flex;
    position: fixed;
    /* Explicit longhand instead of `inset:` — Safari has historical
       quirks resolving the shorthand when the fixed-positioned ancestor
       chain is complex (this nav's parent <header> is also position:fixed). */
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    /* Belt-and-braces explicit height. `100svh` is the small viewport
       height (mobile URL bar visible) — falls back to 100vh on older Safari. */
    height: calc(100vh - var(--header-height));
    height: calc(100svh - var(--header-height));
    background: var(--color-bg);
    flex-direction: column;
    /* Override the base .site-nav's `justify-content: center` — in a
       column flex container, "center" would vertically centre the
       links rather than start them at the top. */
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--space-3) var(--gutter);
    z-index: 99;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Reset the desktop opacity/transform — the menu is fully shown when open */
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .site-nav.is-open .site-nav__list {
    flex-direction: column;
    gap: 0;
    width: 100%;
    align-items: stretch;
  }

  /* Move padding from the <li> onto the <a> so the entire row is a
     tap target while keeping the divider lines tight against the text. */
  .site-nav.is-open .site-nav__item {
    border-bottom: 1px solid var(--color-border);
    padding: 0;
  }

  .site-nav.is-open .site-nav__link {
    display: block;
    padding: var(--space-3) 0;        /* 0.75rem — bigger tap target, still compact */
    font-family: var(--font-serif);
    font-size: var(--text-base);      /* 17px — smaller than the 1.35rem logo */
    line-height: 1.4;
    color: var(--color-text);
  }

  /* Remove the desktop hover underline indicator inside the mobile drawer
     since each row is already separated by a border. */
  .site-nav.is-open .site-nav__link::after { display: none; }

  .site-header__menu-toggle {
    display: flex;
  }

  /* Grid: single column */
  .posts-grid,
  .posts-grid .post-card:first-child,
  .posts-grid.posts-grid--3 .post-card:first-child {
    grid-template-columns: 1fr;
    grid-column: span 1;
  }

  .posts-grid { grid-template-columns: 1fr; }

  /* Footer — full stack at narrow widths */
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-footer__brand { grid-column: span 1; }

  /* Home hero */
  .home-hero {
    min-height: 80svh;
  }

  /* Post hero */
  .post-hero {
    min-height: 60svh;
  }

  /* Tag filters: scroll */
  .tag-filters__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .tag-filters__inner::-webkit-scrollbar { display: none; }

  .tag-chip { flex-shrink: 0; }

  /* Wide/full images fallback */
  .gh-content .kg-width-wide,
  .gh-content .kg-width-full {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--radius-md);
  }

  /* Post nav */
  .post-navigation {
    grid-template-columns: 1fr;
  }

  .newsletter-section__title {
    font-size: var(--text-xl);
  }
}

/* ── 23. UTILITIES ────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms ease,
    transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 24. PRINT STYLES ──────────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .reading-progress,
  .tag-filters,
  .related-posts,
  .post-navigation,
  .author-bio,
  .post-tags,
  .newsletter-section {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.6;
    color: #000;
    background: #fff;
  }

  .post-hero {
    margin-top: 0;
    min-height: auto;
    background: none;
  }

  .post-hero__image,
  .post-hero__overlay,
  .post-hero__bg { display: none; }

  .post-hero__title { color: #000; font-size: 24pt; }

  .post-body__inner { max-width: 100%; }

  .gh-content a { color: #000; text-decoration: underline; }

  .gh-content img { max-width: 100% !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   PORTED FROM GOTTINO-GHOST (Krabi-inspired theme)
   - Smart first-image extraction fallback states
   - Koenig gallery (mosaic) styling
   - Floating Table of Contents
   - Lightbox for post images
   - "From the trail" photo strip
   - Numbered archive list
   - Figure caption with credit
   ────────────────────────────────────────────────────────────────────────── */

/* ── A. Smart image extraction states ─────────────────────────────────── */
/* When a post has no feature_image, post-card.hbs renders a hidden content
   block + an extraction placeholder. main.js promotes the first <img> in
   the content into the placeholder. If extraction fails, --no-image hides
   the image area entirely. */
.post-card__hidden-content { display: none; }

.post-card--needs-image .post-card__image-link--extracted {
  display: block;
}

.post-card--no-image .post-card__image-link,
.post-card--no-image .post-card__image-link--extracted {
  display: none;
}

/* ── B. Koenig Gallery (mosaic) ───────────────────────────────────────── */
.gh-content .kg-gallery-container {
  display: flex;
  flex-direction: column;
  max-width: calc(100% + 120px);
  margin-left: -60px;
  margin-right: -60px;
}

.gh-content .kg-gallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.gh-content .kg-gallery-row + .kg-gallery-row {
  margin-top: 4px;
}

.gh-content .kg-gallery-image {
  flex: 1 1 0%;
  margin: 0 4px 0 0;
}

.gh-content .kg-gallery-image:last-of-type { margin-right: 0; }

.gh-content .kg-gallery-image img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.gh-content .kg-gallery-card figcaption {
  text-align: center;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-light);
  margin-top: var(--space-3);
}

/* Drop radius on truly full-bleed galleries */
.gh-content .kg-gallery-card.kg-width-full .kg-gallery-image img {
  border-radius: 0;
}

/* ── C. Floating Table of Contents ────────────────────────────────────── */
/* Built by main.js when a post has 3+ h2/h3 headings.
   Sits in the right gutter of the reading column.
   Hides itself when feature image or wide/full elements are visible. */
.post-toc {
  position: fixed;
  left: calc(50% + var(--max-width-read) / 2 + 48px);
  top: 96px;
  width: 200px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  transition: opacity var(--transition-normal);
  scrollbar-width: none;
  z-index: 50;
}

.post-toc::-webkit-scrollbar { display: none; }

.post-toc--hidden {
  opacity: 0;
  pointer-events: none;
}

.post-toc__title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
}

.post-toc__link {
  display: block;
  padding: 4px 0 4px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-left-color var(--transition-fast);
  line-height: 1.45;
}

.post-toc__link:hover { color: var(--color-text); }

.post-toc__link--active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

.post-toc__link--h3 {
  padding-left: var(--space-6);
  font-size: 0.8125rem;
}

/* Hide ToC on narrower viewports (no room in the right gutter) */
@media (max-width: 1280px) {
  .post-toc { display: none; }
}

/* ── D. Lightbox for post images + galleries ──────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 12, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.lightbox[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(0,0,0,0.4);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255,255,255,0.18);
}

.lightbox__close {
  top: 20px;
  right: 20px;
  font-size: 28px;
  line-height: 1;
}

.lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lightbox__close { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 22px; }
  .lightbox__nav { width: 36px; height: 36px; font-size: 18px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* ── E. "From the trail" photo strip (home) ──────────────────────────── */
/* Sourced from posts tagged with the internal Ghost tag #trail.
   Quietly omits itself when no posts match. */
.trail-strip {
  padding: var(--space-12) var(--gutter) var(--space-8);
  border-top: 1px solid var(--color-border);
}

.trail-strip__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.trail-strip__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.trail-strip__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.trail-strip__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.trail-strip__meta a { color: inherit; transition: color var(--transition-fast); }
.trail-strip__meta a:hover { color: var(--color-accent); }

.trail-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.trail-strip__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.trail-strip__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  margin-bottom: var(--space-3);
}

.trail-strip__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.trail-strip__item:hover .trail-strip__thumb img {
  transform: scale(1.04);
}

.trail-strip__caption {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.trail-strip__caption strong {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-serif);
  margin-bottom: 2px;
}

@media (max-width: 880px) {
  .trail-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── F. Numbered archive list (home) ─────────────────────────────────── */
.archive-list {
  padding: var(--space-12) var(--gutter);
  border-top: 1px solid var(--color-border);
}

.archive-list__inner {
  max-width: var(--max-width-read);
  margin: 0 auto;
  /* CSS counter generates Roman numerals (v., vi., vii., viii.) for rows.
     Starts at 4 so the first row gets "v." since the cards above are 1-4 visually. */
  counter-reset: archive-counter 4;
}

.archive-list__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  margin-bottom: var(--space-4);
}

.archive-list__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}

.archive-list__rule {
  border-top: 1px dotted var(--color-border-dark);
  transform: translateY(-4px);
}

.archive-list__year {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.archive-list__row {
  display: grid;
  grid-template-columns: 60px 90px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--color-border);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
  counter-increment: archive-counter;
}

.archive-list__num::before {
  content: counter(archive-counter, lower-roman) ".";
}

.archive-list__row:last-child { border-bottom: none; }

.archive-list__row:hover .archive-list__t,
.archive-list__row:hover .archive-list__num {
  color: var(--color-accent);
}

.archive-list__num {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 500;
  color: var(--color-text-light);
  transition: color var(--transition-fast);
}

.archive-list__date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

.archive-list__t {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-text);
  line-height: 1.35;
  transition: color var(--transition-fast);
}

.archive-list__tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}

@media (max-width: 640px) {
  .archive-list__row { grid-template-columns: 40px 1fr; }
  .archive-list__date, .archive-list__tag { display: none; }
}

/* ── G. Figure caption + photo credit ────────────────────────────────── */
/* Used inside .gh-content (Koenig figures). Caption is the figcaption text;
   credit is an optional <small> appended inside the same figcaption.
   In post body, captions get a subtle leading rule for editorial weight. */
.gh-content figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  text-align: left;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.gh-content figcaption strong {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  flex-shrink: 0;
}

.gh-content figcaption small {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  white-space: nowrap;
  flex-shrink: 0;
}

/* For full-bleed images, push the caption back into the reading column */
.gh-content .kg-width-full figcaption {
  max-width: var(--max-width-read);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Hero feature image caption styling — already exists as .post-image-caption,
   we leave it alone. */

/* ── H. Reading progress bar (accent colour follows token) ──────────── */
/* Existing .reading-progress__bar uses var(--color-accent) — automatically
   becomes terra rossa via the token swap. No change needed here. */

/* ── I. Custom theme settings (Ghost Admin → Design → Customise) ──────
   Body classes set by default.hbs based on @custom values. Each setting
   below corresponds to a select/boolean exposed in package.json. */

/* Hero height — set on home-hero and post-hero via body class.
   "Full viewport" is the default and uses the existing rules; the other
   two variants override height + min-height. */
.hero-style-three-quarter .home-hero,
.hero-style-three-quarter .post-hero {
  height: 75svh;
  min-height: 480px;
  max-height: 760px;
}

.hero-style-fixed .home-hero,
.hero-style-fixed .post-hero {
  height: 560px;
  min-height: 560px;
  max-height: 560px;
}

/* Navigation layout — "Centered logo" centers the logo and balances the
   nav links left and actions right. Default is "Logo left, links right"
   which uses the existing site-header__inner rules. */
.nav-layout-centered .site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nav-layout-centered .site-header__logo {
  grid-column: 2;
  justify-self: center;
}

.nav-layout-centered .site-nav {
  grid-column: 1;
  justify-self: start;
}

.nav-layout-centered .site-header__actions {
  grid-column: 3;
  justify-self: end;
}

/* ── J. Markdown tables ───────────────────────────────────────────────
   Two flavours:
     1. Default — "Editorial Ledger": top/bottom thick rules, dotted
        hairlines between rows, uppercase terra rossa header in DM Sans,
        italic muted first column as a row label. Applies automatically
        to any Markdown table in a post.
     2. Opt-in .compare modifier — for before/after / spec comparisons.
        Add class="compare" to a table via Koenig's HTML card to swap
        in the comparison treatment (terra rossa header underline on the
        "current" column, subtle terra rossa wash on its cells).
   How to opt in to .compare from the Ghost editor:
     Insert an HTML card (/ → HTML), then paste:
       <table class="compare">
         <thead><tr><th>Part</th><th>Original</th><th>Today</th></tr></thead>
         <tbody>...</tbody>
       </table>
*/

/* Default: Editorial Ledger */
.gh-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-text);
  border-top: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
}

.gh-content table th,
.gh-content table td {
  text-align: left;
  vertical-align: top;
}

.gh-content table thead th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-border-dark);
}

.gh-content table tbody td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px dotted var(--color-border-dark);
  line-height: 1.45;
}

.gh-content table tbody tr:last-child td {
  border-bottom: none;
}

/* First column reads as a row label: italic, muted, narrower */
.gh-content table tbody td:first-child {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  width: 22%;
}

.gh-content table tbody td:not(:first-child) {
  font-family: var(--font-serif);
  color: var(--color-text);
  font-weight: 500;
}

/* Opt-in: .compare modifier — before/after / current-state emphasis */
.gh-content table.compare {
  border-top: 1.5px solid var(--color-accent);
  border-bottom: none;
}

.gh-content table.compare thead th {
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
}

.gh-content table.compare thead th:first-child {
  color: var(--color-text-muted);
}

/* The rightmost column is "the current state" — terra rossa header underline */
.gh-content table.compare thead th:last-child {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

.gh-content table.compare tbody td {
  border-bottom: 1px dotted var(--color-border-dark);
}

.gh-content table.compare tbody td:first-child {
  width: 20%;
}

/* Middle columns (any column that's neither first nor last) — muted */
.gh-content table.compare tbody td:not(:first-child):not(:last-child) {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Last column — the "current" state, weighted and washed in terra rossa */
.gh-content table.compare tbody td:last-child {
  color: var(--color-text);
  font-weight: 500;
  background: rgba(139, 42, 31, 0.06);
}

/* Mobile: shrink padding + type so tables don't shove the viewport sideways.
   Below ~480px most 3+ column tables will still overflow — let them scroll
   horizontally rather than smashing content into unreadable shards. */
@media (max-width: 640px) {
  .gh-content table thead th,
  .gh-content table tbody td {
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-sm);
  }
  .gh-content table thead th {
    letter-spacing: 0.12em;
  }
}

@media (max-width: 480px) {
  .gh-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ── K. Inline newsletter signup form ─────────────────────────────────
   Replaces the Portal modal CTA on the home page with a themed inline
   form. Ghost's members.js (loaded via {{ghost_head}}) handles the
   submission and toggles `data-members-form-state` on the <form>
   element through one of: "" (initial) → "loading" → "success" or "error".
   We react with CSS — no theme JS needed. */

.newsletter-form {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.newsletter-form__row {
  margin-bottom: var(--space-2);
}

.newsletter-form__row--email {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.newsletter-form__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.4;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.newsletter-form__input::placeholder {
  color: var(--color-text-light);
  font-style: italic;
}

.newsletter-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(139, 42, 31, 0.12);
}

.newsletter-form__submit {
  padding: 12px 22px;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.newsletter-form__submit:hover { background: var(--color-accent-dark); }

.newsletter-form__submit-loading { display: none; }

.newsletter-form__error,
.newsletter-form__success {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.newsletter-form__error {
  display: none;
  color: var(--color-accent);
}

.newsletter-form__success {
  display: none;
  color: var(--color-text);
  font-size: var(--text-md);
}

.newsletter-form__note {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}

/* State machine — driven by Ghost's members.js setting
   data-members-form-state on the <form>. */

/* Loading: swap button label for spinner text, dim the button */
.newsletter-form[data-members-form-state="loading"] .newsletter-form__submit-label { display: none; }
.newsletter-form[data-members-form-state="loading"] .newsletter-form__submit-loading { display: inline; }
.newsletter-form[data-members-form-state="loading"] .newsletter-form__submit {
  opacity: 0.7;
  pointer-events: none;
}

/* Error: show the error message (Ghost fills the text in itself) */
.newsletter-form[data-members-form-state="error"] .newsletter-form__error { display: block; }
.newsletter-form[data-members-form-state="error"] .newsletter-form__input { border-color: var(--color-accent); }

/* Success: hide the inputs + note, reveal the success message */
.newsletter-form[data-members-form-state="success"] .newsletter-form__row,
.newsletter-form[data-members-form-state="success"] .newsletter-form__note,
.newsletter-form[data-members-form-state="success"] .newsletter-form__error { display: none; }
.newsletter-form[data-members-form-state="success"] .newsletter-form__success { display: block; }

@media (max-width: 480px) {
  .newsletter-form__row--email {
    grid-template-columns: 1fr;
  }
  .newsletter-form__submit { padding: 14px 22px; }
}

/* ── L. Strava ride card ──────────────────────────────────────────────
   Styles for the HTML block generated by scripts/strava-to-ghost.
   The script outputs `<div class="ride-card">…</div>` which the writer
   pastes into a Ghost HTML card; these rules style it consistently
   with the rest of the theme.

   Layouts:
   - Solo card: ~half-width of the content column, left-aligned.
     Reads as a sidebar-style data block, leaves space for prose.
   - Multiple cards: wrap them in `<div class="ride-cards">…</div>`.
     They display side-by-side (2-up on desktop). With 3+ cards the
     wrapper becomes a horizontal scroll carousel with snap points. */

.gh-content .ride-card,
.ride-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-10) 0;
  /* Solo cards (not inside a .ride-cards wrapper) get a compact width
     so they don't dominate the prose. The clamp keeps the card readable
     down to ~280px while never growing past ~380px. */
  max-width: clamp(280px, 50%, 380px);
}

.ride-card__map {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.ride-card__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

/* Start → end route line under the map. Mapbox Static API pins can only
   carry a single letter, so the actual town names are rendered here as
   text. The "A"/"B" badges echo the pins drawn on the map. */
.ride-card__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.3;
}

.ride-card__route-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--color-accent, #B8553A);
  color: var(--color-white, #fff);
  font-family: var(--font-sans);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0;
}

.ride-card__route-pin--single {
  font-size: 0.55em;
}

.ride-card__route-arrow {
  opacity: 0.55;
  margin: 0 0.1em;
}

.ride-card__header {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px dotted var(--color-border-dark);
}

.ride-card__kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

/* The paired selector is needed because `.gh-content h3` sets
   `margin-top: 1.4em` — without bumping specificity to match, that rule
   wins and adds a big empty band above the title. */
.gh-content .ride-card__title,
.ride-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.ride-card__date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ride-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  gap: var(--space-3);
}

.ride-card__stat {
  position: relative;
  padding-left: var(--space-3);
  border-left: 1px dotted var(--color-border-dark);
}

.ride-card__stat:first-child {
  padding-left: 0;
  border-left: none;
}

.ride-card__stat dt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 2px;
  white-space: nowrap;
}

.ride-card__stat dd {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

/* Photo grid — always 2 columns. Script renders max 4 visible photos
   (in .ride-card__photo wrappers); any extras are bare <img hidden>
   children of .ride-card__photos so the lightbox can still navigate
   to them via arrow keys. */
.ride-card__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin: 0;
}

.ride-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
}

.ride-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

/* Backward compatibility: ride cards generated BEFORE the .ride-card__photo
   wrapper was introduced have bare <img> children of .ride-card__photos.
   Style those so they still tile cleanly in uniform 4:3 landscape cells,
   and cap visible photos at 4 for the height-reduction benefit (without
   the "+N" overlay, which requires the new HTML — regenerate the card
   to get it).

   IMPORTANT: do NOT add `height: 100%` here. When both width and height
   are explicit, the CSS spec mandates that `aspect-ratio` is ignored
   and the browser uses the explicit dimensions. In an auto-sized grid
   row that means each img falls back to its natural aspect — defeating
   the whole point of uniform crops. Width: 100% + aspect-ratio is enough. */
.ride-card__photos > img:not([hidden]) {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}

.ride-card__photos > img:not([hidden]):nth-of-type(n+5) {
  display: none;
}

/* "+N more" treatment on the 4th visible photo when the activity has
   5+ photos. Dark wash + centred count, both pointer-events: none so
   the click hits the underlying img and opens the lightbox. */
.ride-card__photo--more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, 0.55);
  pointer-events: none;
  z-index: 1;
}

.ride-card__photo-count {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Mobile: stack the stats so the values stay readable */
@media (max-width: 480px) {
  .ride-card__stats {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .ride-card__stat {
    padding-left: 0;
    padding-top: var(--space-3);
    border-left: none;
    border-top: 1px dotted var(--color-border-dark);
  }
  .ride-card__stat:first-child {
    padding-top: 0;
    border-top: none;
  }

  /* Solo card on mobile: expand back to full width — the
     half-width default makes no sense in a narrow viewport. */
  .gh-content .ride-card,
  .ride-card {
    max-width: 100%;
  }
}

/* Multi-card wrapper. Usage:

     <div class="ride-cards">
       <div class="ride-card">…</div>
       <div class="ride-card">…</div>
       <div class="ride-card">…</div>
     </div>

   With 2 cards: side-by-side, each ~half-width, fills the row.
   With 3+ cards: horizontal scroll carousel with snap points.
   Mobile: each card takes ~85% viewport, snap-scroll. */
.gh-content .ride-cards,
.ride-cards {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-10) 0;
  align-items: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  /* Subtle scrollbar — visible only on hover/scroll in most browsers */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-dark) transparent;
}

.ride-cards .ride-card {
  flex: 0 0 calc(50% - var(--space-3) / 2);
  max-width: none;          /* override the solo card constraint */
  margin: 0;
  scroll-snap-align: start;
}

/* 3+ cards: shrink each card slightly so the next one peeks into the
   viewport — a visible affordance that there's more to scroll to. Uses
   :has() (modern Safari/Chrome/Firefox); browsers without :has() fall
   back to the 50% rule above and miss the peek, which is fine. */
.ride-cards:has(> .ride-card:nth-child(3)) > .ride-card {
  flex: 0 0 calc(45% - var(--space-3) / 2);
}

@media (max-width: 640px) {
  .ride-cards .ride-card,
  .ride-cards:has(> .ride-card:nth-child(3)) > .ride-card {
    flex: 0 0 85%;
  }
}

/* Break out of the 720px reading column on wide viewports so a multi-card
   row can use the surrounding whitespace. The negative margins extend
   140px on each side, giving a ~1000px carousel. Below 1100px we stay
   within the reading column. */
@media (min-width: 1100px) {
  .gh-content .ride-cards,
  .gh-content .ride-cards-viewport {
    margin-left: -140px;
    margin-right: -140px;
  }
}

/* Carousel nav: JS wraps 3+-card groups in `.ride-cards-viewport` and
   injects prev/next buttons so users have a clickable affordance — the
   native horizontal-scroll cue is invisible to mouse users on macOS.
   The viewport is the positioning context; the inner .ride-cards keeps
   the scroll behaviour. */
.ride-cards-viewport {
  position: relative;
  margin: var(--space-10) 0;
}

.ride-cards-viewport > .ride-cards {
  margin: 0;
}

.ride-cards__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-dark);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 15, 10, 0.12);
  transition: background var(--transition-fast), opacity var(--transition-fast);
  padding: 0;
}

.ride-cards__nav:hover {
  background: var(--color-bg);
}

.ride-cards__nav:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.ride-cards__nav--prev { left: -20px; }
.ride-cards__nav--next { right: -20px; }

/* Touch viewports: the arrows are awkward and swipe is intuitive; hide
   them and rely on the native scroll + peek. */
@media (max-width: 768px) {
  .ride-cards__nav { display: none; }
}

/* Print: keep the page margin tucked inside the print media query.
   (Was previously left at root level — moved here for valid CSS nesting.) */
@media print {
  @page { margin: 2cm; }
}