/* ============================================================
   Wireframe styles for Wander With Luna
   Lo-fi: grayscale + brand blue accent only, line-drawn boxes,
   no photos. Built ON TOP of colors_and_type.css.
   ============================================================ */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --wf-line:        #1F1A14;
  --wf-line-soft:   #B8B0A0;
  --wf-line-faint:  #DCD4C4;
  --wf-fill:        #F2EBDD;
  --wf-fill-light:  #F8F3E8;
  --wf-fill-deep:   #E4DCC9;
  --wf-text:        #1F1A14;
  --wf-text-soft:   #6B6355;
  --wf-text-mute:   #726753;
  --wf-blue:        #0050A0;
  /* Category-mark accents — contrast-safe deep shades of the brand's sunset /
     meadow travel-ink, for color-coding content categories (AA on paper). */
  --cat-travel:     #9A5218;  /* deep terracotta (sunset), ~5.3:1 on paper */
  --cat-nature:     #4C6B2C;  /* deep forest (meadow), ~5.3:1 on paper */
  --shadow-xs: 0 1px 2px rgba(31, 26, 20, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 26, 20, 0.08);
  --shadow-md: 0 6px 18px rgba(31, 26, 20, 0.10);
  --shadow-lg: 0 16px 40px rgba(31, 26, 20, 0.14);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--wf-text); font-family: var(--font-sans); }

/* ============================================================
   APP SHELL
   ============================================================ */
.wf-app {
  background: var(--paper);
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-family: var(--font-sans);
}
@media (max-width: 640px) {
  .wf-app { scrollbar-width: none; }
  .wf-app::-webkit-scrollbar { display: none; }
}

.wf-stamp {
  position: fixed;
  top: 16px; left: 16px;
  z-index: 100;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-mute);
  border: 1px dashed var(--wf-line-soft);
  padding: 4px 10px;
  border-radius: 2px;
  background: var(--paper);
  pointer-events: none;
}

/* ============================================================
   HEADER
   ============================================================ */
.wf-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: var(--paper);
  border-bottom: 1.5px solid var(--wf-line);
  transition: box-shadow 250ms ease;
}
.wf-header.scrolled { box-shadow: var(--shadow-md); }
.wf-brand {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  text-decoration: none; color: inherit;
}
.wf-brand-mark {
  width: 32px; height: 32px;
  border: 1.5px solid var(--wf-line);
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--font-script); font-weight: 700; font-size: 1.125rem;
  color: var(--wf-blue);
  background: var(--paper);
}
.wf-brand-text { display: flex; flex-direction: column; line-height: 0.95; align-items: flex-start; }
.wf-brand-wander {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--wf-text);
}
.wf-brand-with {
  font-family: var(--font-sans); font-weight: 500; font-size: 0.5625rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--wf-text-mute);
  margin-top: 1px;
}
.wf-brand-luna {
  font-family: var(--font-script); font-weight: 700; font-size: 1.75rem;
  line-height: 0.85; color: var(--wf-blue); margin-top: -2px; margin-left: 18px;
}

.wf-nav { display: flex; gap: 24px; align-items: center; }
.wf-nav a {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500;
  color: var(--wf-text-soft); text-decoration: none; cursor: pointer;
  padding: 4px 0; border-bottom: 1.5px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.wf-nav a:hover { color: var(--wf-text); }
.wf-nav a.active { color: var(--wf-blue); border-bottom-color: var(--wf-blue); }
.wf-nav a:focus-visible { color: var(--wf-text); outline: 2px solid var(--wf-blue); outline-offset: 3px; border-radius: 2px; }
.wf-nav .ext::after { content: " ↗"; color: var(--wf-text-mute); font-size: 0.6875rem; }

.wf-header-cta {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  border: 1.5px solid var(--wf-line); background: var(--paper);
  color: var(--wf-text); padding: 8px 14px; border-radius: 2px;
  cursor: pointer;
}
.wf-header-cta:hover { background: var(--wf-fill); }
.wf-locale-toggle { position: relative; }
.wf-locale-btn {
  display: flex; align-items: center;
  font-size: 0.6875rem; font-family: var(--font-sans); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wf-text-mute);
  background: none; border: 1.5px solid var(--wf-line);
  border-radius: 4px; padding: 5px 9px; cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.wf-locale-btn:hover, .wf-locale-btn.open { color: var(--wf-text); border-color: var(--wf-text-soft); }
.wf-locale-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--paper); border: 1.5px solid var(--wf-line);
  border-radius: 6px; padding: 16px 18px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 14px;
  min-width: 160px; z-index: 200;
}
.wf-locale-group { display: flex; flex-direction: column; gap: 6px; }
.wf-locale-label { font-size: 0.625rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wf-text-mute); }

.wf-lang-toggle { display: flex; align-items: center; gap: 6px; }
/* currency hidden until multi-currency is enabled */
.wf-currency-toggle,
.wf-locale-group:has(.wf-currency-toggle) { display: none !important; }
.wf-lang-toggle span,
.wf-currency-toggle span { color: var(--wf-line); font-size: 0.75rem; }
.wf-currency-toggle button {
  background: none; border: none; font-family: var(--font-display);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wf-text-soft); cursor: pointer; padding: 2px 0;
  border-bottom: 1.5px solid transparent;
}
.wf-currency-toggle button:hover { color: var(--wf-text); }
.wf-currency-toggle button.active { color: var(--wf-blue); border-bottom: 1.5px solid var(--wf-blue); }
.wf-lang-toggle button {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; background: none; border: none; cursor: pointer;
  color: var(--wf-text-mute); padding: 2px 0;
}
.wf-lang-toggle button.active { color: var(--wf-blue); border-bottom: 1.5px solid var(--wf-blue); }

/* ============================================================
   PAGE LAYOUT PRIMITIVES
   ============================================================ */
.wf-page { padding-bottom: 80px; }

.wf-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 40px;
}
.wf-section.tight { padding: clamp(28px, 3.5vw, 44px) 40px; }
.wf-section.generous { padding: clamp(64px, 8vw, 104px) 40px; }
.wf-section.wide { max-width: none; padding-left: 40px; padding-right: 40px; }

.wf-page-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 40px 40px;
}
.wf-page-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 2.75rem); /* 32 → 44 */
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 8px 0 12px;
  color: var(--wf-text);
}

.wf-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.wf-section-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.625rem); /* 22 → 26 */
  text-transform: none; letter-spacing: -0.005em;
  line-height: 1.15; color: var(--luna-blue-deep); margin: 0;
}
.wf-section-link {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500;
  color: var(--wf-text-soft); text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.wf-section-link:hover { color: var(--wf-blue); }

.wf-eyebrow {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wf-blue);
  display: block; margin-bottom: 8px;
}

/* Hero kicker — the journal's opening line. Serif italic in sentence case:
   a written note, not a tracked label. (Caps stay reserved for short labels.) */
.wf-hero-kicker {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--wf-text-soft);
  margin-bottom: 4px;
}

/* ============================================================
   WIREFRAME BOXES & TEXT-LINES
   ============================================================ */

.wf-img {
  position: relative;
  border: 1.5px solid var(--wf-line);
  background: var(--wf-fill);
  overflow: hidden;
  display: grid; place-items: center;
}
.wf-img::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.75px), var(--wf-line-soft) calc(50% - 0.75px), var(--wf-line-soft) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--wf-line-soft) calc(50% - 0.75px), var(--wf-line-soft) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}
.wf-img > .wf-img-label {
  position: relative; z-index: 1;
  font-family: var(--font-sans); font-size: 0.6875rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wf-text-soft);
  background: var(--paper);
  padding: 3px 8px;
  border: 1px solid var(--wf-line-soft);
  border-radius: 2px;
}

/* Luna cutout — transparent PNG that sits directly on the page
   background (no photo frame). The compound selector .wf-img.wf-luna-cutout
   outranks .wf-img so the border/fill drop regardless of source order. */
.wf-luna-cutout,
.wf-img.wf-luna-cutout {
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  box-shadow: none;
  overflow: visible;
}
.wf-luna-cutout::before { display: none; }

.wf-img.round { border-radius: 999px; }
.wf-img.round::before { border-radius: 999px; }
.wf-img.photo::before,
.wf-img[style*="background-image"]::before { display: none; }
.wf-img.photo .wf-img-label,
.wf-img[style*="background-image"] .wf-img-label { display: none; }

.wf-line {
  display: block;
  height: 8px;
  background: var(--wf-line-faint);
  border-radius: 2px;
  margin-bottom: 8px;
}
.wf-line.short { width: 60%; }
.wf-line.shorter { width: 40%; }
.wf-line.long { width: 95%; }
.wf-line.thick { height: 12px; background: var(--wf-line-soft); }
.wf-line.title { height: 24px; background: var(--wf-text); width: 70%; margin-bottom: 14px; border-radius: 2px; }
.wf-line.title.sm { height: 16px; }
.wf-line.title.lg { height: 36px; width: 80%; }

.wf-lines { display: flex; flex-direction: column; gap: 0; }
.wf-lines.tight .wf-line { height: 6px; margin-bottom: 6px; }

.wf-paragraph .wf-line:nth-child(1) { width: 100%; }
.wf-paragraph .wf-line:nth-child(2) { width: 95%; }
.wf-paragraph .wf-line:nth-child(3) { width: 60%; }
.wf-paragraph + .wf-paragraph { margin-top: 18px; }

/* Buttons */
.wf-btn {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
  border: 1.5px solid var(--wf-line); background: var(--paper);
  color: var(--wf-text); padding: 10px 18px; border-radius: 2px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  transition: background 150ms ease, opacity 150ms ease, transform 100ms var(--ease-out-quart);
}
.wf-btn:hover { background: var(--wf-fill); }
.wf-btn:active { transform: scale(0.97); }
.wf-btn:disabled { opacity: 0.55; cursor: default; }
.wf-btn:disabled:hover { background: var(--paper); }
.wf-btn.primary:disabled:hover { background: var(--wf-blue); }
.wf-btn:disabled:active { transform: none; }
.wf-btn.primary { background: var(--wf-blue); border-color: var(--wf-blue); color: #fff; }
.wf-btn.primary:hover { background: var(--luna-blue-deep); border-color: var(--luna-blue-deep); opacity: 1; }
.wf-btn.lg { padding: 14px 22px; font-size: 0.875rem; }
.wf-btn.sm { padding: 6px 12px; font-size: 0.75rem; }
.wf-btn.ext::after { content: " ↗"; }

/* Tag chips */
.wf-tag {
  display: inline-block;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500;
  line-height: 1.45;
  padding: 4px 10px; border: 1px solid var(--wf-line-soft);
  border-radius: 999px; color: var(--wf-text-soft); background: var(--paper);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.wf-tag:hover { border-color: var(--wf-line); color: var(--wf-text); }
.wf-tag.active { background: var(--wf-blue); color: #fff; border-color: var(--wf-blue); }

/* Designer annotation note */
.wf-note {
  position: relative;
  font-family: var(--font-script); font-weight: 700;
  font-size: 1.125rem; line-height: 1.2;
  color: var(--wf-blue);
  padding: 10px 14px;
  border-top: 1px solid var(--wf-blue);
  background: rgba(0, 80, 160, 0.04);
}
.wf-note .wf-note-arrow {
  font-family: var(--font-sans); font-size: 0.6875rem;
  font-style: normal; color: var(--wf-text-mute);
  letter-spacing: 0.18em; text-transform: uppercase;
  display: block; margin-bottom: 4px;
}

/* ============================================================
   HERO VARIATIONS
   ============================================================ */
.wf-hero {
  position: relative;
  /* Short of a full viewport so the first section title peeks above the fold */
  height: 70vh; min-height: 520px;
  border-bottom: 1.5px solid var(--wf-line);
  background: var(--paper);
  overflow: hidden;
}
/* Dark ground so the white hero type stays readable while the photo
   loads, and survives it failing entirely. */
.wf-hero.fullbleed { background: var(--luna-blue-ink); }
.wf-hero.fullbleed .wf-hero-photo { position: absolute; inset: 0; border: none; }
.wf-hero.fullbleed::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(10,8,5,0.62) 0%, rgba(10,8,5,0.22) 60%, transparent 100%);
}
.wf-hero.fullbleed .wf-hero-content {
  position: absolute; inset: 0;
  padding: 0 64px; max-width: 800px;
  display: flex; flex-direction: column; justify-content: center;
  z-index: 2;
}

.wf-hero.editorial {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 0; height: auto; min-height: 560px;
  align-items: stretch;
}
.wf-hero.editorial .wf-hero-photo { border: none; border-right: 1.5px solid var(--wf-line); }
.wf-hero.editorial .wf-hero-content { padding: 80px 56px; display: flex; flex-direction: column; justify-content: center; }

.wf-hero.minimal {
  display: grid; place-items: center;
  height: auto; min-height: 480px;
  text-align: center;
  padding: 96px 40px;
}
.wf-hero.minimal .wf-hero-content { max-width: 720px; display: flex; flex-direction: column; align-items: center; }
.wf-hero.minimal .wf-hero-photo { display: none; }

.wf-hero-headline {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2rem, 1rem + 4.2vw, 3.5rem); /* 32 → 56, fluid to the phone */
  line-height: 1.1; letter-spacing: -0.01em; text-transform: none;
  color: var(--wf-text); max-width: 18ch; margin: 14px 0 24px;
}
.wf-hero.minimal .wf-hero-headline { text-align: center; margin-left: auto; margin-right: auto; }

.wf-hero-blurb {
  font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.5;
  color: var(--wf-text-soft); max-width: 44ch; margin: 0 0 28px;
}
.wf-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.wf-hero.fullbleed .wf-hero-kicker { color: rgba(255,255,255,0.88); letter-spacing: 0.02em; }
/* Light type on the dark photo reads a notch lighter than dark-on-paper:
   relax the tracking and open the leading a touch to hold its weight. */
.wf-hero.fullbleed .wf-hero-headline { color: #fff; letter-spacing: -0.005em; }
.wf-hero.fullbleed .wf-hero-blurb { color: rgba(255,255,255,0.85); line-height: 1.55; letter-spacing: 0.01em; }
.wf-hero.fullbleed .wf-btn:not(.primary) { color: #fff; border-color: rgba(255,255,255,0.45); background: transparent; }
.wf-hero.fullbleed .wf-btn:not(.primary):hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ============================================================
   GRIDS & CARDS
   ============================================================ */
.wf-post-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}
.wf-post-card {
  border: 1.5px solid var(--wf-line);
  background: var(--paper);
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform 140ms ease;
}
.wf-post-card:hover { transform: translateY(-2px); background: var(--luna-blue-fog); }
.wf-post-card.feature { grid-row: span 2; }
.wf-post-card .wf-img { border: none; border-bottom: 1.5px solid var(--wf-line); aspect-ratio: 16/10; }
.wf-post-card.feature .wf-img { aspect-ratio: 4/3; }
.wf-post-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wf-post-card-body .wf-eyebrow { margin-bottom: 0; }
.wf-post-card.feature .wf-post-card-body { padding: 24px; }
.wf-post-card-body h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.005em; line-height: 1.2; margin: 0; color: var(--wf-text); }
.wf-post-card-body p  { font-family: var(--font-serif); font-size: 0.875rem; color: var(--wf-text-soft); margin: 0; }

.wf-blog-list { display: flex; flex-direction: column; gap: 16px; }
.wf-blog-row {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 28px;
  border: 1.5px solid var(--wf-line);
  background: var(--paper);
  cursor: pointer;
  transition: transform 140ms ease;
}
.wf-blog-row:hover { transform: translateY(-2px); background: var(--luna-blue-fog); }
.wf-blog-row .wf-img { border: none; border-right: 1.5px solid var(--wf-line); aspect-ratio: 4/3; }
.wf-blog-row-body { padding: 24px 24px 24px 0; display: flex; flex-direction: column; gap: 8px; }
.wf-blog-row-body h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-title); letter-spacing: -0.01em; line-height: 1.18; margin: 4px 0; color: var(--wf-text); }
.wf-blog-row-date { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--wf-text-mute); letter-spacing: 0.12em; text-transform: uppercase; margin-top: auto; padding-top: 12px; }

/* Full-bleed photography band — inset label, edge-to-edge images */
.wf-photo-band { padding: clamp(40px, 5vw, 72px) 0; }
.wf-photo-band .wf-section-head { max-width: 1200px; margin: 0 auto 24px; padding: 0 40px; }
.wf-photo-band + .wf-section { padding-top: clamp(28px, 3.5vw, 40px); }
.wf-photo-band .wf-photo-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.wf-photo-band .wf-photo-cell { aspect-ratio: auto; height: clamp(240px, 28vw, 380px); }

.wf-photo-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.wf-photo-cell { aspect-ratio: 4/5; overflow: hidden; position: relative; }
.wf-photo-cell .wf-img { width: 100%; height: 100%; aspect-ratio: unset; transition: transform 520ms var(--ease-out-quart); }
.wf-photo-cell:hover .wf-img { transform: scale(1.05); }
.wf-photo-cell::after {
  content: attr(data-title);
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(to top, oklch(18% 0.008 55 / 0.75) 0%, transparent 100%);
  color: oklch(95% 0.005 55);
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 260ms var(--ease-out-quart), transform 260ms var(--ease-out-quart);
  pointer-events: none;
}
.wf-photo-cell:hover::after { opacity: 1; transform: translateY(0); }

/* Justified gallery (Google-Photos style) */
/* Masonry columns: every photo keeps its natural aspect ratio (no cropping —
   portraits stay tall, panoramas stay wide), all at one column width. Optional
   city groups each get an eyebrow header. */
.wf-photo-gallery { display: flex; flex-direction: column; gap: 40px; }
/* City labels are set in the same handwriting as the home page's print
   captions, so the two photo surfaces read as one hand. Scoped to this block —
   .wf-eyebrow is shared site-wide and stays uppercase sans everywhere else. */
.wf-photo-group-head { margin-bottom: 10px; }
.wf-photo-group-head .wf-eyebrow {
  font-family: var(--font-script); font-weight: 700;
  font-size: 1.3125rem; line-height: 1; letter-spacing: 0;
  text-transform: none; color: var(--wf-text-soft);
  margin-bottom: 0;
}
.wf-photo-grid { columns: 3; column-gap: 10px; }
.wf-photo-cell {
  position: relative; overflow: hidden; cursor: pointer;
  display: block; width: 100%; margin: 0 0 10px; break-inside: avoid;
  background: var(--paper-tint, #F6EFE1);
  user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
}
.wf-photo-cell:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: 2px; z-index: 4; }
.wf-photo-img {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.wf-photo-cell:hover .wf-photo-img,
.wf-photo-cell:focus-visible .wf-photo-img { transform: scale(1.055); }
.wf-photo-protect { position: absolute; inset: 0; z-index: 2; }
.wf-photo-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 26px 14px 11px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  color: #fff; background: linear-gradient(to top, rgba(18,14,8,.74), rgba(18,14,8,0));
  opacity: 0; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease; pointer-events: none;
}
.wf-photo-cell:hover .wf-photo-cap,
.wf-photo-cell:focus-visible .wf-photo-cap { opacity: 1; transform: none; }
@media (hover: none) { .wf-photo-cap { opacity: 1; transform: none; } }
@media (max-width: 860px) { .wf-photo-grid { columns: 2; } .wf-photo-gallery { gap: 30px; } }
@media (max-width: 460px) { .wf-photo-grid { columns: 1; } }

/* Lightbox */
.wf-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,8,5,0.96);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 100px 70px;
}
.wf-lightbox-photo {
  flex: 1; width: 100%; max-width: 1100px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  position: relative;
  user-select: none;
  -webkit-user-drag: none;
}
.wf-lightbox-close {
  position: fixed; top: 20px; right: 24px;
  background: none; border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 1.75rem; line-height: 1;
  width: 44px; height: 44px; border-radius: 2px;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color 150ms ease;
  z-index: 1;
}
.wf-lightbox-close:hover { border-color: rgba(255,255,255,0.85); }
.wf-lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 2.25rem; line-height: 1;
  width: 52px; height: 52px; border-radius: 2px;
  cursor: pointer; display: grid; place-items: center;
  transition: background 150ms ease, border-color 150ms ease;
  z-index: 1;
}
.wf-lightbox-nav:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.wf-lightbox-nav.prev { left: 20px; }
.wf-lightbox-nav.next { right: 20px; }
.wf-lightbox-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1100px;
  padding-top: 16px; gap: 16px;
}
.wf-lightbox-title {
  font-family: var(--font-serif); font-style: italic; font-size: 0.875rem;
  color: rgba(255,255,255,0.7); min-width: 0;
}
.wf-lightbox-counter {
  font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.62); white-space: nowrap; flex-shrink: 0;
}

.wf-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; }
.wf-cat-card { border: 1.5px solid var(--wf-line); background: var(--paper); cursor: pointer; transition: transform 140ms ease, background 140ms ease; }
.wf-cat-card:hover { background: var(--wf-fill); transform: translateY(-2px); }
.wf-cat-card .wf-img { border: none; border-bottom: 1.5px solid var(--wf-line); aspect-ratio: 4/3; }
.wf-cat-card-body { padding: 14px 16px; display: flex; align-items: baseline; justify-content: space-between; }
.wf-cat-card-name { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wf-text); }
.wf-cat-card-count { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--wf-text-mute); }

.wf-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.wf-video-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.wf-video-card .wf-img { aspect-ratio: 16/9; position: relative; }
.wf-video-card .wf-img .wf-play {
  position: absolute; z-index: 2;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(31,26,20,0.7);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.375rem; padding-left: 4px;
  border: 2px solid #fff;
}
.wf-video-card .wf-img .wf-duration {
  position: absolute; z-index: 2;
  right: 8px; bottom: 8px;
  background: rgba(31,26,20,0.85); color: #fff;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500;
  padding: 2px 6px; border-radius: 2px;
}
.wf-video-meta { padding: 0 4px; }
.wf-video-meta h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.005em; line-height: 1.2; margin: 8px 0 0; color: var(--wf-text); }
.wf-video-meta p  { font-family: var(--font-serif); font-size: 0.8125rem; color: var(--wf-text-soft); margin: 4px 0 0; }
.wf-video-featured-body { padding: 20px 24px; }
.wf-video-featured-body h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-title); text-transform: none; letter-spacing: -0.01em; line-height: 1.18; margin: 6px 0 8px; color: var(--wf-text); }
.wf-video-featured-body p  { font-family: var(--font-serif); font-size: 0.875rem; color: var(--wf-text-soft); margin: 0; }

.wf-lesson-rows { display: flex; flex-direction: column; gap: 14px; }
.wf-lesson-row {
  display: grid; grid-template-columns: 56px 1fr auto auto;
  gap: 20px; align-items: center;
  border: 1.5px solid var(--wf-line);
  padding: 20px 24px;
  background: var(--paper);
}
.wf-lesson-icon { width: 48px; height: 48px; border: 1.5px solid var(--wf-line); display: grid; place-items: center; font-size: 1.125rem; }
.wf-lesson-price { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: var(--wf-blue); padding-right: 16px; }
.wf-lesson-row h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-title-sm); text-transform: none; letter-spacing: -0.005em; margin: 0 0 4px; color: var(--wf-text); }
.wf-lesson-row p  { font-family: var(--font-serif); font-size: 0.8125rem; color: var(--wf-text-soft); margin: 0; line-height: 1.45; }

/* ── Lesson cards with pricing tiers ───────────────────────────── */
.wf-lesson-cards { display: flex; flex-direction: column; gap: 24px; }
.wf-lesson-card {
  border: 1.5px solid var(--wf-line);
  background: var(--paper);
  padding: 28px 28px 12px;
}
.wf-lesson-card-head {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  align-items: start; padding-bottom: 20px;
  border-bottom: 1px solid var(--wf-line-soft);
}
.wf-lesson-card-head h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-title); text-transform: none;
  letter-spacing: -0.005em; margin: 4px 0 6px; color: var(--wf-text);
}
.wf-lesson-card-head p {
  font-family: var(--font-serif); font-size: 0.875rem; color: var(--wf-text-soft);
  margin: 0; line-height: 1.5; max-width: 60ch;
}
.wf-duration-tabs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.wf-duration-tab {
  padding: 3px 12px; font-size: 0.75rem; font-family: var(--font-sans); font-weight: 500;
  border: 1.5px solid var(--wf-line); border-radius: 20px;
  background: none; cursor: pointer; color: var(--wf-text-soft);
  transition: border-color 120ms, color 120ms, background 120ms;
}
.wf-duration-tab:hover { border-color: var(--wf-text-soft); color: var(--wf-text); }
.wf-duration-tab.active { border-color: var(--wf-blue); color: var(--wf-blue); background: rgba(0,80,160,0.05); }
/* This is a PRICE LIST, not a row of actions. Buying runs through the single
   CTA at the foot of the card, which opens the package chooser — so the rows
   carry no buttons and no click target of their own. */
.wf-tier-list { list-style: none; margin: 0; padding: 0; }
.wf-tier-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 24px;
  padding: 16px 12px; margin: 0 -12px;
  border-bottom: 1px solid var(--wf-line-soft);
  border-radius: 3px;
}
.wf-tier-row:last-child { border-bottom: none; }
.wf-tier-row.is-recommended { background: rgba(0, 80, 160, 0.045); }
.wf-tier-label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-sans); font-size: 0.875rem; color: var(--wf-text);
}
.wf-tier-label strong {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--wf-text);
}
.wf-tier-badge {
  font-family: var(--font-sans); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wf-blue); background: rgba(0, 80, 160, 0.09);
  border: 1px solid rgba(0, 80, 160, 0.22); border-radius: 2px;
  padding: 3px 8px; white-space: nowrap;
}
.wf-tier-meta {
  font-size: 0.75rem; color: var(--wf-text-mute); letter-spacing: 0.02em;
}
.wf-tier-save {
  display: inline-block; margin-top: 1px;
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cat-nature); align-self: flex-start;
}
.wf-tier-price { text-align: right; min-width: 110px; }

/* Step 1 of the purchase, inside the booking modal: pick what you're buying.
   Here each option IS an action, so every row is a real button. */
.wf-tier-choice-title {
  font-family: var(--font-serif); font-weight: 600; font-size: 18px;
  letter-spacing: -0.005em; margin: 0 0 14px; color: var(--wf-text);
}
.wf-tier-choice { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wf-tier-choice-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--wf-line-faint);
  border-radius: 3px; padding: 13px 16px;
  transition: border-color 140ms ease, background 140ms ease, transform 100ms var(--ease-out-quart);
}
.wf-tier-choice-btn:hover { border-color: var(--wf-blue); background: rgba(0, 80, 160, 0.04); }
.wf-tier-choice-btn:active { transform: scale(0.99); }
.wf-tier-choice-btn.is-recommended { border-color: var(--wf-blue); background: rgba(0, 80, 160, 0.05); }
.wf-tier-choice-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wf-tier-choice-name {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--wf-text);
}
.wf-tier-choice-sub {
  font-family: var(--font-sans); font-size: 0.75rem; color: var(--wf-text-mute);
}
.wf-tier-choice-sub em { font-style: normal; font-weight: 600; color: var(--cat-nature); }
.wf-tier-choice-price {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: var(--wf-blue); line-height: 1.1; white-space: nowrap;
}
.wf-tier-choice-note {
  font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.5;
  color: var(--wf-text-mute); margin: 0;
}

/* The card's one and only action. */
.wf-lesson-card-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--wf-line-soft);
}
.wf-lesson-card-cta-note {
  font-family: var(--font-sans); font-size: 0.75rem; color: var(--wf-text-mute);
  letter-spacing: 0.01em;
}
.wf-tier-price-main {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  color: var(--wf-blue); line-height: 1.1;
}
.wf-tier-price-sub {
  font-family: var(--font-sans); font-size: 0.6875rem;
  color: var(--wf-text-mute); margin-top: 2px;
}
@media (max-width: 720px) {
  .wf-lesson-card { padding: 22px 18px 10px; }
  .wf-lesson-card-head { grid-template-columns: 44px 1fr; gap: 14px; }
  .wf-tier-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label price" "btn btn";
    gap: 10px 16px;
  }
  .wf-tier-row { grid-template-columns: 1fr auto; grid-template-areas: "label price"; }
  .wf-tier-label { grid-area: label; }
  .wf-tier-price { grid-area: price; }
  .wf-lesson-card-cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .wf-lesson-card-cta .wf-btn { justify-content: center; }
  .wf-lesson-card-cta-note { text-align: center; }
  .wf-tier-choice-btn { padding: 14px 12px; }
}

.wf-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.wf-field { display: flex; flex-direction: column; gap: 6px; }
.wf-field label { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wf-text-soft); }
.wf-field .wf-input { border: 1.5px solid var(--wf-line); background: var(--paper); padding: 12px 14px; font-family: var(--font-sans); font-size: 0.875rem; border-radius: 2px; }
.wf-field .wf-input.area { min-height: 120px; resize: vertical; }
.wf-field .wf-input:focus { outline: 2px solid var(--wf-blue); outline-offset: 1px; }

.wf-contact-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; }
.wf-channel-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.wf-channel { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--wf-line-faint); }
.wf-channel:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: 2px; border-radius: 2px; }
.wf-channel-icon { width: 32px; height: 32px; border: 1.5px solid var(--wf-line-soft); display: grid; place-items: center; font-size: 0.875rem; transition: border-color 150ms ease, color 150ms ease; }
a.wf-channel:hover .wf-channel-icon { border-color: var(--wf-blue); color: var(--wf-blue); }
a.wf-channel:hover .wf-channel-name { color: var(--wf-blue); }
.wf-channel-name { font-size: 0.8125rem; font-weight: 500; color: var(--wf-text); }
.wf-channel-meta { font-size: 0.6875rem; color: var(--wf-text-mute); }

/* About "Meet Luna" — inline grid collapsed on mobile so it stops overflowing */
.wf-about-luna { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; }
@media (max-width: 640px) {
  .wf-about-luna { grid-template-columns: 1fr; gap: 28px; }
}

.wf-gear-list { display: flex; flex-direction: column; gap: 12px; }
.wf-gear-row {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 20px; align-items: center;
  border: 1.5px solid var(--wf-line);
  padding: 16px 20px;
  background: var(--paper);
  cursor: pointer;
}
.wf-gear-row:hover { background: var(--wf-fill); }
.wf-gear-row .wf-img { aspect-ratio: 1; }
.wf-gear-meta { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--wf-text-mute); letter-spacing: 0.12em; text-transform: uppercase; }
.wf-gear-row h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.1875rem; text-transform: none; letter-spacing: -0.005em; color: var(--wf-text); margin: 4px 0 6px; }
.wf-gear-row p { font-family: var(--font-serif); font-size: 0.8125rem; color: var(--wf-text-soft); margin: 0; line-height: 1.4; }
.wf-gear-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.wf-rating-num { font-family: var(--font-sans); font-size: 0.75rem; color: var(--wf-text-mute); letter-spacing: 0.02em; }

/* Star rating — fractional fill overlay */
.wf-stars { position: relative; display: inline-block; color: var(--wf-blue); line-height: 0; }
.wf-stars-row { display: inline-flex; gap: 2px; }
.wf-stars-empty { color: var(--wf-line); }
.wf-stars-fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; color: var(--wf-blue); }
.wf-gear-rating small { font-size: 0.6875rem; color: var(--wf-text-mute); font-weight: 500; }

.wf-about-hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; padding: 80px 40px; max-width: 1200px; margin: 0 auto; }
.wf-about-photo .wf-img { aspect-ratio: 3/4; }

/* Inset "moment", not a full-bleed stripe: sits in the content column like the
   editorial cards, centered, with the quote as the single hero. */
.wf-luna-ribbon { max-width: 1200px; margin: 0 auto; padding: 8px 40px; }
.wf-luna-ribbon-inner { background: var(--luna-blue-mist); border: 1.5px solid var(--luna-blue-soft); padding: clamp(40px, 5vw, 60px) 32px; text-align: center; }
.wf-luna-ribbon .wf-luna-quote { font-family: var(--font-script); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--wf-blue); line-height: 1.15; max-width: 30ch; margin: 0 auto; }
.wf-luna-ribbon .wf-luna-meta { font-family: var(--font-serif); font-style: italic; font-size: 0.8125rem; color: var(--wf-text-soft); margin-top: 10px; }
.wf-luna-ribbon-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--wf-blue); cursor: pointer; border-bottom: 1px solid transparent; transition: border-color .15s; }
.wf-luna-ribbon-link:hover, .wf-luna-ribbon-link:focus-visible { border-bottom-color: currentColor; }

/* Post article */
.wf-post-article { max-width: 720px; margin: 0 auto; padding: 56px 32px 96px; }
.wf-back-link { font-family: var(--font-sans); font-size: 0.75rem; color: var(--wf-text-soft); text-decoration: none; cursor: pointer; display: inline-block; margin-bottom: 32px; }
.wf-back-link:hover { color: var(--wf-text); }
.wf-post-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); letter-spacing: -0.01em; line-height: 1.1; color: var(--wf-text); margin: 12px 0 16px; } /* 28 → 44 */
.wf-post-lead { font-family: var(--font-serif); font-style: italic; font-size: 1.1875rem; line-height: 1.5; color: var(--wf-text-soft); margin: 0 0 24px; }
.wf-post-byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--wf-line); border-bottom: 1px solid var(--wf-line); margin-bottom: 36px; }
.wf-post-byline .wf-img.round { width: 40px; height: 40px; }
/* Narrow screens: let the like/share actions drop to their own line instead of
   crowding the name + 44px touch targets + "Link copied" confirmation. */
@media (max-width: 640px) { .wf-post-byline { flex-wrap: wrap; } }
.wf-byline-name { font-family: var(--font-sans); font-weight: 600; font-size: 0.8125rem; color: var(--wf-text); }
.wf-byline-meta { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--wf-text-mute); }
.wf-post-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Quiet handwritten confirmation after copying the post link */
.wf-share-confirm {
  font-family: var(--font-script); font-weight: 700; font-size: 1rem;
  color: var(--wf-blue); white-space: nowrap; margin-right: 4px;
}
.wf-share-confirm:not(:empty) { animation: wf-sent-appear 240ms var(--ease-out-quart) both; }
.wf-icon-btn { width: 32px; height: 32px; border: 1.5px solid var(--wf-line-soft); background: var(--paper); cursor: pointer; display: grid; place-items: center; font-size: 0.875rem; border-radius: 2px; }
.wf-icon-btn:hover { border-color: var(--wf-line); color: var(--wf-blue); }
.wf-icon-btn.liked {
  color: oklch(55% 0.21 22);
  border-color: oklch(55% 0.21 22 / 0.35);
  background: oklch(55% 0.21 22 / 0.07);
}
.wf-icon-btn.liking { animation: wf-heart-pop 380ms var(--ease-out-quint) both; }
.wf-post-hero-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: 6px; }
.wf-photo-caption { font-family: var(--font-serif); font-style: italic; font-size: 0.75rem; color: var(--wf-text-mute); text-align: center; margin: 0 0 28px; }
.wf-post-body h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem); text-transform: none; letter-spacing: -0.01em; line-height: 1.2; color: var(--wf-text); margin: 40px 0 14px; } /* 24 → 28 */
.wf-post-body .wf-paragraph { margin-bottom: 18px; }
.wf-pullquote { margin: 40px 0; padding: 0; font-family: var(--font-script); font-weight: 700; font-size: 1.65em; color: var(--wf-blue); line-height: 1.25; }

/* Footer */
.wf-footer { border-top: 1.5px solid var(--wf-line); background: var(--wf-fill-light); padding: 48px 40px 24px; }
.wf-footer-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; max-width: 1200px; margin: 0 auto; }
.wf-footer-brand .wf-script { font-family: var(--font-script); font-weight: 700; font-size: 1.75rem; color: var(--wf-blue); margin: 8px 0 4px; }
.wf-footer-brand .wf-sig { font-family: var(--font-serif); font-style: italic; color: var(--wf-text-soft); font-size: 0.8125rem; }
.wf-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.wf-footer-cols a { display: block; font-family: var(--font-sans); font-size: 0.75rem; color: var(--wf-text-soft); text-decoration: none; cursor: pointer; padding: 4px 0; }
.wf-footer-cols a:hover { color: var(--wf-blue); }
.wf-footer-bottom { max-width: 1200px; margin: 40px auto 0; padding-top: 16px; border-top: 1px solid var(--wf-line-faint); display: flex; gap: 12px; font-family: var(--font-sans); font-size: 0.6875rem; color: var(--wf-text-mute); }

/* Input */
.wf-input { border: 1.5px solid var(--wf-line); background: var(--paper); padding: 12px 14px; font-family: var(--font-sans); font-size: 0.875rem; border-radius: 2px; width: 100%; color: var(--wf-text); }
.wf-input::placeholder { color: var(--wf-text-mute); opacity: 1; }
.wf-input:focus { outline: 2px solid var(--wf-blue); outline-offset: 1px; }
select.wf-input,
.wf-field select.wf-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6355' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: var(--paper);
  padding-right: 36px;
  cursor: pointer;
}

/* Feature toggles */
.wf-app.notes-off .wf-note { display: none; }
.wf-app.notes-off .wf-stamp { display: none; }
.wf-app.density-cozy .wf-section { padding: 96px 40px; }
.wf-app.density-compact .wf-section { padding: 36px 32px; }
.wf-app.density-compact .wf-section-head { margin-bottom: 16px; }
.wf-app.imagery-low .wf-photo-strip { display: none; }
.wf-app.imagery-low .wf-hero-photo { opacity: 0.5; }

/* Rich text content (Quill output) */
.post-content { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.7; color: var(--wf-text-soft); max-width: 68ch; }
.post-content p { margin: 0 0 1.1em; }
.post-content h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2rem); text-transform: none; letter-spacing: -0.01em; line-height: 1.18; color: var(--wf-text); margin: 48px 0 16px; } /* 28 → 32 */
.post-content h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.6875rem); text-transform: none; letter-spacing: -0.01em; line-height: 1.2; color: var(--wf-text); margin: 40px 0 14px; } /* 24 → 27 */
.post-content h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.3125rem; text-transform: none; letter-spacing: -0.005em; line-height: 1.25; color: var(--wf-text); margin: 32px 0 10px; }
.post-content ul, .post-content ol { padding-left: 1.5em; margin: 0 0 1.1em; }
.post-content li { margin-bottom: 4px; }
.post-content blockquote { border: 1px solid var(--luna-blue-soft); background: var(--luna-blue-fog); padding: 14px 18px; margin: 0 0 1.1em; color: var(--luna-blue-ink); font-style: italic; border-radius: var(--radius-sm); }
.post-content img { max-width: 100%; height: auto; display: block; border-radius: 4px; margin: 1.5em 0; }
.post-content a { color: var(--wf-blue); }
.post-content .ql-align-center { text-align: center; }
.post-content .ql-align-right  { text-align: right; }
.post-content .ql-align-justify { text-align: justify; }

/* ============================================================
   FEATURE ARTICLE — dominant first post on home page
   ============================================================ */
.wf-feature-article {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  border: 1.5px solid var(--wf-line);
  min-height: 420px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.wf-feature-article:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.wf-feature-article .wf-img { border: none; border-right: 1.5px solid var(--wf-line); min-height: 420px; }
.wf-feature-article-body { padding: 40px 36px; display: flex; flex-direction: column; }
.wf-feature-article-body .wf-eyebrow { margin-bottom: 10px; }
.wf-feature-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(26px, 2.8vw, 38px);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--wf-text);
  margin: 0 0 14px;
}
.wf-feature-excerpt {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--wf-text-soft);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.wf-feature-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--wf-line-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wf-feature-date {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--wf-text-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wf-feature-read {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wf-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The feature article without a photo: the text takes the full frame and
   reads as a confident letter, never an empty image pane. */
.wf-feature-article.no-img {
  grid-template-columns: 1fr;
  min-height: auto;
}
.wf-feature-article.no-img .wf-feature-article-body { padding: 48px 44px; }
.wf-feature-article.no-img .wf-feature-excerpt { max-width: 65ch; }

/* Secondary post grid — equal cards below the feature article.
   auto-fill keeps one or two cards at card width instead of stretching
   a lone card across the row. */
.wf-post-grid.secondary {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-template-rows: auto;
  margin-top: 20px;
}
.wf-post-grid.secondary .wf-post-card { grid-row: span 1; }

/* ============================================================
   ENGLISH LESSONS CTA — primary work section
   ============================================================ */
/* Flat on the page, like every other section. This band used to carry the only
   --paper-deep fill in the whole stylesheet — not part of any alternating
   rhythm, just one recessed strip compensating for a section that was
   visually thin when it held four plain rows and nothing else.

   It is not thin any more. Six bordered cards, two headings, a price ladder and
   two buttons mark the band out far better than a background tone, and once
   the cards arrived the fill said the same thing a second time: a container
   drawn around a row of containers, with Luna's quote panel stacked directly
   above it. Dropping it also un-pinches the 8px gap under that panel, and
   matches the Courses page, where the same cards already sit on plain paper. */
.wf-english-section {
  background: transparent;
}
.wf-english-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 72px;
  align-items: center;
}
.wf-english-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 46px);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--luna-blue-deep);
  margin: 0 0 16px;
}
.wf-english-desc {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--wf-text-soft);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 44ch;
}
.wf-magnolia-mention {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--wf-line-faint);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--wf-text-mute);
}
.wf-magnolia-mention a {
  color: var(--wf-text-soft);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.wf-english-cta {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 4px;
}
/* Two-path learn band — live lessons | self-paced courses */
.wf-english-inner.learn {
  display: block;
}
.wf-english-inner.learn .wf-english-heading { margin-bottom: 40px; }
/* Stacked, not mirrored. Live lessons is one decision with four rates;
   self-study is six separate products that each have to argue for themselves.
   Side by side, the 50/50 split told the eye they were the same kind of thing,
   squeezed the side with more to say, and — once the courses became cards —
   left ~600px of nothing beside the lessons column with the divider ruling
   past it. Stacked, each path gets the full measure, and the six courses land
   as two full rows of three under their two headings. */
.wf-learn-paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}
.wf-learn-path { display: flex; flex-direction: column; }
.wf-learn-path + .wf-learn-path {
  border-top: 1.5px solid var(--wf-line);
  padding-top: 44px;
}
/* Full-bleed columns would run the reading measure past 100ch. */
.wf-learn-path .wf-english-desc { max-width: 62ch; }
.wf-learn-path .wf-english-rates { max-width: 640px; }
.wf-learn-path .wf-english-rates { margin-bottom: 20px; align-self: stretch; }
.wf-learn-path .wf-english-cta { margin-top: auto; }
.wf-learn-path-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--wf-text);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Passport-ink mark, never a fill (The Stamp Rule) */
.wf-soon-tag {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 0.625rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stamp-red);
  border: 1px solid var(--stamp-red);
  border-radius: 2px;
  padding: 2px 7px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .wf-learn-paths { gap: 36px; }
  .wf-learn-path + .wf-learn-path { padding-top: 36px; }
}

/* ── Course catalogue (Courses page) ────────────────────────────────────────
   Six courses stacked full-width made a 2,000px wall of near-identical blocks,
   each led by a paragraph. Two columns and a short lede turn it into something
   you can compare at a glance; the paragraph is still there, one click away. */
.wf-course-group + .wf-course-group { margin-top: 40px; }
.wf-group-head { margin-bottom: 18px; }
.wf-group-title {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wf-blue); margin: 0 0 4px;
}
.wf-group-desc {
  font-family: var(--font-serif); font-size: 0.9375rem;
  color: var(--wf-text-soft); margin: 0; max-width: 56ch;
}
.wf-course-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.wf-course-card {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--wf-line); background: var(--paper);
  padding: 22px 24px 6px;
}
.wf-course-card-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.wf-course-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1.5px solid var(--wf-line); display: grid; place-items: center;
  font-size: 1.0625rem;
}
.wf-course-name {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-title-sm);
  text-transform: none; letter-spacing: -0.005em; margin: 0 0 6px; color: var(--wf-text);
}
.wf-course-lede {
  font-family: var(--font-serif); font-size: 0.9375rem; line-height: 1.45;
  color: var(--wf-text-soft); margin: 0;
}
/* The disclosure toggle reads as a control, not as another line of the pitch. */
.wf-course-more {
  align-self: flex-start; margin-top: 12px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--wf-blue);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.wf-course-more:hover { color: var(--luna-blue-deep); }
.wf-course-more:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: 3px; }
.wf-course-blurb {
  font-family: var(--font-serif); font-size: 0.875rem; line-height: 1.5;
  color: var(--wf-text-soft); margin: 10px 0 0;
}
/* Pushes the price/CTA to the bottom so every card in a row lines up on it,
   however much text sits above. */
.wf-course-card .wf-course-foot { margin-top: auto; }
.wf-course-price {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem;
  color: var(--wf-text); line-height: 1.1;
}
.wf-course-price-note {
  display: block; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wf-text-soft); margin-top: 3px;
}

/* Courses you already own: a resume strip, not a sales card. */
.wf-mine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wf-mine-row {
  display: grid; grid-template-columns: 36px 1fr auto auto;
  gap: 14px; align-items: center;
  border: 1.5px solid var(--wf-line); background: var(--paper);
  padding: 12px 16px;
}
.wf-mine-icon {
  width: 32px; height: 32px; border: 1.5px solid var(--wf-line);
  display: grid; place-items: center; font-size: 0.9375rem;
}
.wf-mine-name {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.0625rem;
  color: var(--wf-text);
}
.wf-mine-level {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--wf-text-soft);
}

@media (max-width: 860px) {
  .wf-course-grid { grid-template-columns: 1fr; }
  .wf-mine-row { grid-template-columns: 32px 1fr; row-gap: 10px; }
  .wf-mine-level { grid-column: 2; }
  .wf-mine-row .wf-btn { grid-column: 1 / -1; justify-content: center; }
}

/* Course card footer (Courses page) */
.wf-course-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--wf-line-faint);
  margin-top: 18px; padding: 16px 0 14px;
}
.wf-course-owned {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wf-blue);
}

/* Cross-sell strip between lessons and courses */
.wf-crosslink {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-top: 1.5px solid var(--wf-line);
  margin-top: 32px; padding-top: 20px;
  font-family: var(--font-serif); font-size: 1.0625rem; color: var(--wf-text-soft);
}
.wf-crosslink a {
  color: var(--wf-blue); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.wf-crosslink a:hover { color: var(--luna-blue-deep); }
.wf-crosslink a:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: 3px; border-radius: 2px; }

/* Course stat chips — concrete numbers under each course blurb */
.wf-course-stats {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wf-course-stat {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.01em; color: var(--wf-text-soft);
  padding: 4px 12px; border: 1.5px solid var(--wf-line);
  border-radius: 20px; white-space: nowrap;
}

/* "How a study week works" — method section */
.wf-method-section { padding-top: 8px; }
.wf-method-head { max-width: 60ch; margin-bottom: 26px; }
.wf-method-desc {
  font-family: var(--font-serif); font-size: 1rem; color: var(--wf-text-soft);
  line-height: 1.55; margin: 10px 0 0;
}
.wf-method-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  counter-reset: method;
}
.wf-method-step {
  border: 1.5px solid var(--wf-line); background: var(--paper);
  padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 8px;
}
.wf-method-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  color: var(--wf-blue); border: 1.5px solid var(--wf-blue); border-radius: 50%;
}
.wf-method-step h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.0625rem;
  color: var(--wf-text); margin: 0; letter-spacing: -0.005em;
}
.wf-method-step p {
  font-family: var(--font-sans); font-size: 0.8125rem; color: var(--wf-text-soft);
  line-height: 1.55; margin: 0;
}

/* "What happens after you buy" — trust strip */
.wf-trust-section {
  border-top: 1.5px solid var(--wf-line); padding-top: 26px;
}
.wf-trust-title {
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--wf-text);
  margin: 0 0 18px;
}
.wf-trust-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.wf-trust-item h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1rem;
  color: var(--wf-text); margin: 0 0 5px;
}
.wf-trust-item p {
  font-family: var(--font-sans); font-size: 0.8125rem; color: var(--wf-text-soft);
  line-height: 1.55; margin: 0;
}

@media (max-width: 720px) {
  .wf-method-steps { grid-template-columns: 1fr; gap: 12px; }
  .wf-trust-list { grid-template-columns: 1fr; gap: 18px; }
}

/* Warm rate list — real "from" prices, no SaaS card */
.wf-english-rates {
  align-self: center;
  display: flex; flex-direction: column;
}
.wf-rate-row {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: baseline; gap: 16px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--wf-line-soft);
}
.wf-rate-row:last-child { border-bottom: none; }
/* Splits the course column into "for a goal" / "the foundations". A label, not
   a row: no rule under it, and the row that follows carries the separation. */
.wf-rate-group {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wf-text-soft); margin: 18px 0 0; padding: 0 2px;
}
.wf-rate-group:first-child { margin-top: 0; }
.wf-rate-icon { font-size: 1.125rem; line-height: 1; }
.wf-rate-name { font-family: var(--font-serif); font-size: 1.0625rem; color: var(--wf-text); }
.wf-rate-price {
  font-family: var(--font-serif); font-style: italic; font-size: 1rem;
  color: var(--wf-text-soft); white-space: nowrap;
}
.wf-rate-price b { font-style: normal; font-weight: 600; color: var(--wf-text); }
.wf-rate-dur { font-style: normal; font-family: var(--font-sans); font-size: 0.75rem; color: var(--wf-text-mute); }

/* Quiet "more in the catalogue" link — a written aside, not a gray UA button */
.wf-rate-more {
  align-self: start; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 2px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-style: italic; font-size: 0.8125rem;
  color: var(--wf-text-mute);
  transition: color 150ms ease;
}
.wf-rate-more::after {
  content: '→'; font-style: normal;
  transition: transform 200ms var(--ease-out-quart);
}
.wf-rate-more:hover { color: var(--wf-blue); }
.wf-rate-more:hover::after { transform: translateX(3px); }
.wf-rate-more:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: 2px; border-radius: 2px; }

/* Live lessons — a menu and a ladder, deliberately not a second card grid.
   The four lessons are one service with four subjects; rendering them as cards
   would repeat the course grid directly below and imply you buy a subject the
   way you buy a course. Subjects read as a menu, the mechanics as quiet facts,
   and the price shows both ends of the ladder instead of one "from". */
.wf-live-subjects,
.wf-live-facts {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* Subjects carry the ink line — they are the "what", and the loudest thing in
   the block after the heading. */
.wf-live-subject {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-size: 0.9375rem;
  color: var(--wf-text);
  padding: 6px 14px 6px 11px;
  border: 1.5px solid var(--wf-line); border-radius: 999px;
}
.wf-live-subject-icon { display: inline-flex; color: var(--wf-text-soft); }
/* Mechanics are the "how" — same quiet chip as a course stat, one step back. */
.wf-live-fact {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.01em; color: var(--wf-text-soft);
  padding: 3px 10px; border: 1px solid var(--wf-line-soft);
  border-radius: 999px; white-space: nowrap;
}
.wf-live-ladder { margin-top: 18px; max-width: 460px; }
.wf-live-ladder-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--wf-line-soft);
}
.wf-live-ladder-row:last-child { border-bottom: none; }
.wf-live-ladder-label {
  font-family: var(--font-serif); font-size: 1rem; color: var(--wf-text);
}
.wf-live-ladder-price {
  font-family: var(--font-serif); font-weight: 600; font-size: 1rem;
  color: var(--wf-text); white-space: nowrap;
}

/* Home course cards — the teaser for the Courses page, in its own card
   vocabulary one size down. A row of title + price answers "what does it cost"
   to someone still asking "is this for me"; the card leads with the course's
   own lede and its measured stats and keeps the price as a footnote. Square
   corners, ink line, flat at rest — cards behave the same everywhere. */
.wf-home-courses { display: flex; flex-direction: column; margin-bottom: 20px; }
.wf-home-course-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 10px;
}
.wf-home-course {
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left; width: 100%;
  border: 1.5px solid var(--wf-line); background: var(--paper);
  padding: 15px 17px 14px;
  font: inherit; color: inherit; cursor: pointer;
  transition: background-color 150ms ease, transform 200ms var(--ease-out-quart),
              box-shadow 200ms var(--ease-out-quart);
}
.wf-home-course:hover {
  background: var(--luna-blue-fog);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.wf-home-course:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: 3px; }
/* The largest course in the catalogue leads its group. Order is the whole
   hierarchy here — no "most popular" badge, because nothing has been sold yet
   to make that true, and no oversized card, because three-up rows that fill
   exactly are worth more than one hero tile. */
.wf-home-course-top { display: flex; align-items: center; gap: 11px; }
.wf-home-course-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1.5px solid var(--wf-line);
  display: grid; place-items: center;
  color: var(--wf-text);
}
.wf-home-course-name {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.005em; line-height: 1.25; color: var(--wf-text);
}
.wf-home-course-lede {
  font-family: var(--font-serif); font-size: 0.875rem; line-height: 1.45;
  color: var(--wf-text-soft); margin-top: 9px;
}
.wf-home-course-stats {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px;
}
.wf-home-course-stat {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.01em; color: var(--wf-text-soft);
  padding: 3px 10px; border: 1px solid var(--wf-line-soft);
  border-radius: 999px; white-space: nowrap;
}
/* Pinned to the bottom so every card in a row agrees on one baseline. */
.wf-home-course-foot {
  margin-top: auto; padding-top: 13px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.wf-home-course-level {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--wf-text-soft);
}
/* CEFR is fine print to anyone who already reads it and a reason to leave for
   everyone else, so the band is said in words too. */
.wf-home-course-gloss {
  font-weight: 500; letter-spacing: 0.01em; color: var(--wf-text-mute);
  text-transform: none;
}
.wf-home-course-price {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
  color: var(--wf-text-soft); white-space: nowrap;
}
@media (max-width: 1000px) {
  .wf-home-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wf-home-course-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME SURFACES — router wayfinding, learn band, camera prints,
   solo video. Grouped so the markup/stylesheet pairing stays in sync.
   ============================================================ */

/* Router — three calm ink tiles under the hero, one per audience */
.wf-router {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(20px, 3vw, 28px) 40px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.wf-router-tile {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 14px 18px;
  background: var(--paper); color: var(--wf-text);
  border: 1.5px solid var(--wf-line); border-radius: 2px;
  text-align: left; cursor: pointer;
  transition: background 150ms ease, transform 100ms var(--ease-out-quart);
}
.wf-router-tile:hover { background: var(--wf-fill); }
.wf-router-tile:active { transform: scale(0.99); }
.wf-router-tile:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: 2px; }
.wf-router-icon { flex-shrink: 0; color: var(--wf-blue); display: grid; place-items: center; }
.wf-router-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wf-router-label { font-family: var(--font-serif); font-weight: 600; font-size: 1rem; line-height: 1.1; color: var(--wf-text); }
.wf-router-line { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.25; color: var(--wf-text-soft); }
.wf-router-arrow {
  flex-shrink: 0; color: var(--wf-text-mute); display: grid; place-items: center;
  transition: transform 220ms var(--ease-out-quart), color 150ms ease;
}
.wf-router-tile:hover .wf-router-arrow { transform: translateX(3px); color: var(--wf-blue); }

/* Learn band — Luna anchors a warm invite; two priced paths run full width */
.wf-learn2 { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 6.5vw, 88px) 40px; }
.wf-learn2-head {
  display: grid; grid-template-columns: 1fr 190px;
  gap: clamp(28px, 4vw, 56px); align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}
/* Luna sits at the RIGHT here so she doesn't stack under the ribbon's
   left-anchored cutout; the two dog moments alternate sides for rhythm. */
.wf-learn2-figure { grid-column: 2; grid-row: 1; margin: 0; display: flex; flex-direction: column; align-items: center; }
.wf-learn2-figure .wf-img { width: 100%; height: clamp(200px, 20vw, 280px); }
.wf-learn2-cap {
  font-family: var(--font-script); font-weight: 700;
  font-size: 1.1875rem; line-height: 1.05; color: var(--wf-text-soft);
  text-align: center; margin-top: 12px;
}
.wf-learn2-lead { grid-column: 1; grid-row: 1; align-self: center; }
.wf-learn2-intro {
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.6;
  color: var(--wf-text-soft); margin: 0; max-width: 60ch;
}
.wf-learn2-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 40px); }

/* From the camera — a few prints laid on the desk, one dominant */
/* Top-aligned, not centred: centring is what left the right-hand column
   floating against the tall photo with ragged gaps above and below it. */
.wf-camera .wf-prints {
  display: grid; grid-template-columns: 1.8fr 1fr;
  gap: clamp(18px, 2.6vw, 34px); align-items: start;
}
.wf-print { margin: 0; cursor: pointer; }
.wf-prints-side {
  display: flex; flex-direction: column;
  gap: clamp(18px, 2.6vw, 34px); min-width: 0;
}
/* A photo is treated identically here and on the Zdjęcia page: it sits flush on
   the paper — no mat, no border, no shadow, no rotation — and the hover scales
   the image inside a fixed frame. The paper mat used to be --paper-light on a
   paper background, so it read as a faint halo rather than a print, and the
   0.4–0.9deg tilts were small enough to look like a misalignment. (The old
   hover straightened them to 0deg, which rather made the point.) */
.wf-print-mat { overflow: hidden; }
/* Real photo: the frame takes the picture's own shape, so nothing is cropped —
   same rule the gallery follows by sizing each cell to the photo's own ratio. */
.wf-print-mat .wf-print-photo {
  display: block; width: 100%; height: auto;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
/* Fallback wireframe placeholder (only when a photo has no url) keeps a ratio. */
.wf-print-mat .wf-img { width: 100%; border: none; aspect-ratio: 3 / 2; }
.wf-print-1 .wf-print-mat .wf-img { aspect-ratio: 4 / 3; }
.wf-print-2 .wf-print-mat .wf-img { aspect-ratio: 4 / 3; }
/* Same hover as .wf-photo-cell on the Zdjęcia page, deliberately identical. */
.wf-print:hover .wf-print-photo,
.wf-print:focus-visible .wf-print-photo { transform: scale(1.055); }
.wf-print-cap {
  font-family: var(--font-script); font-weight: 700;
  font-size: 1.3125rem; line-height: 1; color: var(--wf-text-soft);
  margin: 12px 4px 0;
}
/* Camera and the video teaser are the only two plain-paper sections that sit
   back-to-back (elsewhere a tinted band or a border marks the seam). Left alone
   they stack ~154px of empty paper; tighten so the transition reads deliberate. */
.wf-camera + .wf-section { padding-top: clamp(28px, 3.5vw, 44px); }

/* Single video reads as one feature, not an orphan grid cell */
.wf-video-solo {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 3.5vw, 40px); align-items: center; cursor: pointer;
}
.wf-video-solo .wf-img { aspect-ratio: 16 / 9; position: relative; }
.wf-video-solo .wf-img .wf-play {
  position: absolute; z-index: 2;
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(31,26,20,0.7); color: #fff; border: 2px solid #fff;
  display: grid; place-items: center; font-size: 1.375rem; padding-left: 4px;
}
.wf-video-solo .wf-img .wf-duration {
  position: absolute; z-index: 2; right: 8px; bottom: 8px;
  background: rgba(31,26,20,0.85); color: #fff;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500;
  padding: 2px 6px; border-radius: 2px;
}
.wf-video-solo-body { min-width: 0; }
.wf-video-solo-body h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2;
  letter-spacing: -0.005em; margin: 0; color: var(--wf-text);
}
.wf-video-solo-body p {
  font-family: var(--font-serif); font-size: 0.9375rem; line-height: 1.55;
  color: var(--wf-text-soft); margin: 10px 0 0; max-width: 46ch;
}
.wf-video-solo-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; color: var(--wf-blue);
}
.wf-video-solo:hover .wf-video-solo-link { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   NEWSLETTER STRIP — asymmetric split, not centered-stack
   ============================================================ */
.wf-newsletter-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  border-top: 1px solid var(--wf-line);
  padding-top: 40px;
}
.wf-newsletter-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 34px);
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--wf-text);
  line-height: 1.15;
  margin: 8px 0 12px;
}
.wf-newsletter-desc {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--wf-text-soft);
  max-width: 44ch;
  margin: 0;
  line-height: 1.55;
}
.wf-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.wf-newsletter-form .wf-input { width: 100%; }

/* ============================================================
   ENGLISH STEPS — numbered sequence, no card borders
   ============================================================ */
.wf-steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 40px;
}
.wf-step {
  display: flex;
  flex-direction: column;
}
.wf-step-num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  color: var(--wf-blue);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wf-line-faint);
  width: fit-content;
  min-width: 52px;
}
.wf-step-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  text-transform: none;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--wf-text);
}
.wf-step-desc {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  color: var(--wf-text-soft);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   HAMBURGER + NAV DRAWER
   ============================================================ */
.wf-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px;
  background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0;
}
.wf-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--wf-text); }

.wf-nav-drawer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(31, 26, 20, 0.45);
}
.wf-nav-panel {
  position: absolute; top: 0; right: 0;
  width: min(300px, 85vw); height: 100%;
  background: var(--paper); border-left: 1.5px solid var(--wf-line);
  display: flex; flex-direction: column;
  padding: 20px; overflow-y: auto;
}
.wf-nav-close {
  align-self: flex-end; margin-bottom: 28px;
  background: none; border: none; font-size: 1.625rem; line-height: 1;
  cursor: pointer; color: var(--wf-text-soft); padding: 0 2px;
}
.wf-nav-mobile { display: flex; flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; }
.wf-nav-mobile a {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500;
  color: var(--wf-text-soft); text-decoration: none; cursor: pointer;
  padding: 14px 0; border-bottom: 1px solid var(--wf-line-faint);
  flex-shrink: 0;
}
.wf-nav-mobile a:hover { color: var(--wf-text); }
.wf-nav-mobile a.active { color: var(--wf-blue); }
.wf-nav-mobile .ext::after { content: " ↗"; color: var(--wf-text-mute); font-size: 0.75rem; }
.wf-nav-footer {
  margin-top: 24px; padding-top: 20px; border-top: 1.5px solid var(--wf-line);
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE — tablet (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  /* Nav: collapse to hamburger at tablet width */
  .wf-nav { display: none; }
  .wf-hamburger { display: flex; }
  .wf-header > div > .wf-header-cta { display: none; }

  .wf-post-grid, .wf-photo-strip,
  .wf-cat-grid, .wf-video-grid, .wf-footer-cols { grid-template-columns: 1fr 1fr; }
  .wf-blog-row, .wf-hero.editorial, .wf-about-hero, .wf-contact-split,
  .wf-footer-inner { grid-template-columns: 1fr; }
  .wf-steps-list { grid-template-columns: 1fr; gap: 28px; }
  .wf-newsletter-strip { grid-template-columns: 1fr; gap: 28px; }
  .wf-blog-row .wf-img { border-right: none; border-bottom: 1.5px solid var(--wf-line); }
  /* Stacked single-column: the body no longer sits beside the image, so it
     needs its own left padding (the desktop grid gap is gone). */
  .wf-blog-row-body { padding: 20px 24px 24px; }
  .wf-feature-article { grid-template-columns: 1fr; min-height: auto; }
  .wf-feature-article .wf-img { border-right: none; border-bottom: 1.5px solid var(--wf-line); min-height: 280px; }
  .wf-english-inner { grid-template-columns: 1fr; gap: 36px; padding: 48px 40px; }
  .wf-post-grid.secondary { grid-template-columns: 1fr 1fr; }
  .wf-video-solo { grid-template-columns: 1fr; gap: 24px; }
  .wf-learn2 { padding: 56px 40px; }
}

/* ============================================================
   RESPONSIVE — mobile (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  /* Header: show hamburger, hide inline nav and CTA */
  .wf-header { padding: 12px 20px; }
  .wf-nav { display: none; }
  .wf-header > div > .wf-header-cta { display: none; }
  .wf-hamburger { display: flex; }

  /* Sections */
  .wf-section { padding: 40px 20px; }
  .wf-section.tight { padding: 24px 20px; }
  .wf-section.wide { padding-left: 20px; padding-right: 20px; }
  .wf-photo-band { padding: 40px 0; }
  .wf-photo-band .wf-section-head { padding: 0 20px; }
  .wf-photo-band .wf-photo-strip { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
  .wf-photo-band .wf-photo-cell { aspect-ratio: 4/5; height: auto; }
  .wf-page-header { padding: 40px 20px 24px; }

  /* Hero: tighter padding (headline size is fluid from its base rule) */
  .wf-hero.fullbleed .wf-hero-content { padding: 0 24px; }
  .wf-hero.minimal { padding: 64px 20px; }
  .wf-hero.editorial .wf-hero-photo { display: none; }
  .wf-hero.editorial .wf-hero-content { padding: 40px 20px; }

  /* Grids: single column */
  .wf-post-grid { grid-template-columns: 1fr; }
  .wf-post-grid.secondary { grid-template-columns: 1fr; }
  .wf-post-card.feature { grid-row: auto; }
  .wf-english-inner { padding: 40px 20px; gap: 24px; }
  .wf-english-sidebar { display: none; }

  /* Router: one tile per row, full-width tap targets */
  .wf-router { grid-template-columns: 1fr; padding: 16px 20px 0; gap: 10px; }

  /* Learn band: Luna + her note become a compact signature row above a
     full-width heading, so the invite reads cleanly and pricing stays near. */
  .wf-learn2 { padding: 44px 20px; }
  .wf-learn2-head { grid-template-columns: 1fr; gap: 14px; align-items: start; margin-bottom: 24px; }
  .wf-learn2-figure { grid-column: auto; grid-row: auto; flex-direction: row; align-items: center; gap: 14px; }
  .wf-learn2-lead { grid-column: auto; grid-row: auto; }
  .wf-learn2-figure .wf-img { width: 76px; height: 92px; flex: none; }
  .wf-learn2-cap { margin-top: 0; text-align: left; font-size: 1.125rem; }
  .wf-learn2-lead { align-self: start; }
  .wf-learn2-intro { font-size: 1rem; }
  .wf-learn2-cta { margin-top: 24px; }
  .wf-learn2-cta .wf-btn { flex: 1 1 100%; justify-content: center; }

  /* Camera: dominant print full-width, two supporting side by side below */
  .wf-camera .wf-prints { grid-template-columns: 1fr; gap: 16px; }
  .wf-prints-side { flex-direction: row; gap: 16px; }
  .wf-prints-side .wf-print { flex: 1 1 0; min-width: 0; }
  .wf-print-cap { font-size: 1.125rem; }
  .wf-video-grid { grid-template-columns: 1fr; }
  .wf-photo-strip { grid-template-columns: repeat(2, 1fr); }
  .wf-lightbox { padding: 56px 12px 68px; }
  .wf-lightbox-nav { width: 40px; height: 40px; font-size: 1.75rem; }
  .wf-lightbox-nav.prev { left: 8px; }
  .wf-lightbox-nav.next { right: 8px; }

  /* Lesson rows: 2-column icon+content / price+button */
  .wf-lesson-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 14px; padding: 16px; align-items: start;
  }
  .wf-lesson-icon { grid-column: 1; grid-row: 1; align-self: center; }
  .wf-lesson-row > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .wf-lesson-price {
    grid-column: 1; grid-row: 2;
    font-size: 1.125rem; padding-right: 0; justify-self: center;
  }
  .wf-lesson-row > .wf-btn { grid-column: 2; grid-row: 2; justify-self: start; }

  /* Gear rows: compact */
  .wf-gear-row { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 16px; }
  .wf-gear-rating { grid-column: 1 / -1; }

  /* About */
  .wf-about-hero { padding: 40px 20px; gap: 32px; }

  /* Luna ribbon */
  .wf-luna-ribbon { padding: 4px 20px; }
  .wf-luna-ribbon-inner { padding: 32px 20px; }

  /* Post article (title size is fluid from its base rule) */
  .wf-post-article { padding: 32px 20px 64px; }

  /* Footer */
  .wf-footer { padding: 32px 20px 20px; }
  .wf-footer-cols { grid-template-columns: 1fr 1fr; }

  /* Contact gap */
  .wf-contact-split { gap: 32px; }

  /* Booking modal: bottom sheet */
  .wf-booking-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .wf-booking-panel {
    max-width: none !important; width: 100% !important;
    padding: 8px 20px 36px !important;
    max-height: 88vh !important;
    border-radius: 12px 12px 0 0 !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important;
  }
  .wf-booking-panel::before {
    content: ""; display: block;
    width: 36px; height: 3px;
    background: var(--wf-line-soft); border-radius: 999px;
    margin: 12px auto 20px;
  }

  /* Calendar: touch-friendly day cells */
  .wf-calendar-day { padding: 10px 2px !important; min-height: 40px; }

  /* Submit: full-width on mobile */
  .wf-btn.primary.lg { width: 100%; justify-content: center; }
}

/* ============================================================
   MOTION
   ============================================================ */

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

/* Page transitions */
@keyframes wf-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wf-page { animation: wf-page-in 300ms var(--ease-out-quint) both; }

/* Hero entrance — lockup words stagger in */
@keyframes wf-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wf-hero-headline          { animation: wf-fade-up 600ms var(--ease-out-quint)  80ms both; }
.wf-hero .wf-hero-blurb   { animation: wf-fade-up 440ms var(--ease-out-quart) 540ms both; }
.wf-hero .wf-hero-cta     { animation: wf-fade-up 380ms var(--ease-out-quart) 620ms both; }

/* Scroll reveals */
.wf-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease-out-quart), transform 480ms var(--ease-out-quart);
}
.wf-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Micro-interactions — one "forward" gesture used site-wide, plus quiet
   underline affordances on chrome links. All interaction-driven, so nothing
   moves on repeat visits; the reduced-motion reset above snaps them instant. */
.wf-section-link svg,
.wf-feature-read svg { transition: transform 220ms var(--ease-out-quart); }
.wf-section-link:hover svg,
.wf-feature-article:hover .wf-feature-read svg { transform: translateX(3px); }

/* Header nav: a soft underline fades in on hover (active keeps its blue rule) */
.wf-nav a:hover { border-bottom-color: var(--wf-line-soft); }

/* Footer links: underline wipes in from the left on hover */
.wf-footer-cols a { position: relative; }
.wf-footer-cols a::after {
  content: ''; position: absolute; left: 0; bottom: 1px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-out-quart);
}
.wf-footer-cols a:hover::after { transform: scaleX(1); }

/* Mobile nav drawer */
@keyframes wf-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wf-panel-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.wf-nav-drawer { animation: wf-backdrop-in 220ms ease both; }
.wf-nav-panel  { animation: wf-panel-in 300ms var(--ease-out-quint) both; }

/* ============================================================
   DELIGHT
   ============================================================ */

/* Reading progress — thin line at viewport top */
.wf-reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--wf-blue);
  z-index: 200;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 80ms linear;
  pointer-events: none;
}

/* Heart like — warm fill on toggle */
@keyframes wf-heart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.42); }
  65%  { transform: scale(0.86); }
  100% { transform: scale(1); }
}

/* Booking success paw — drops in with a small bounce */
@keyframes wf-paw-drop {
  from { transform: translateY(-18px) rotate(-10deg); opacity: 0; }
  60%  { transform: translateY(4px) rotate(3deg); opacity: 1; }
  to   { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.wf-booking-paw {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
  animation: wf-paw-drop 540ms var(--ease-out-quint) 60ms both;
}

/* Newsletter subscribed confirmation */
@keyframes wf-newsletter-sent {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wf-newsletter-sent {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--wf-blue);
  margin: 0;
  animation: wf-newsletter-sent 360ms var(--ease-out-quart) both;
}

/* Contact / form sent confirmation */
@keyframes wf-sent-appear {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wf-sent-state {
  animation: wf-sent-appear 340ms var(--ease-out-quart) both;
}

/* Hero eyebrow — blinking cursor fades after ~4s */
@keyframes wf-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.wf-hero .wf-hero-kicker::after {
  content: '_';
  color: var(--wf-blue);
  margin-left: 2px;
  font-weight: 700;
  display: inline-block;
  animation: wf-cursor-blink 0.85s step-end 0.9s 5 forwards;
}

/* ============================================================
   Hardening — load-failure state + defensive text overflow
   ============================================================ */

/* Shown when a fetch fails, so a dropped connection reads as
   "couldn't load", never as an empty section. Flat, ink-lined,
   warm fill — same grammar as the rest of the system. */
.wf-load-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 52ch;
  padding: 18px 20px;
  border: 1.5px solid var(--wf-line);
  background: var(--wf-fill);
  border-radius: 2px;
}
.wf-load-error p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--wf-text-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .wf-load-error { animation: wf-sent-appear 320ms var(--ease-out-quart) both; }
}

/* Even heading line breaks, fewer orphans in long prose */
.wf-hero-headline,
.wf-page-title,
.wf-section-title,
.wf-english-heading,
.wf-newsletter-heading,
.wf-feature-title,
.wf-post-title { text-wrap: balance; }
.wf-hero-blurb,
.wf-english-desc,
.wf-newsletter-desc,
.wf-feature-excerpt,
.post-content p { text-wrap: pretty; }

/* Long unbroken strings (place names, pasted URLs, a 40-char lesson
   label) must wrap instead of overflowing their container. */
.wf-page-title,
.wf-section-title,
.wf-post-title,
.wf-blog-row-body h3,
.wf-lesson-card h3,
.wf-gear-row h3,
.wf-video-meta h3,
.wf-video-featured-body h3,
.wf-lightbox-title,
.wf-booking-panel h2,
.wf-tier-label strong {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Flex/grid children need min-width:0 to be allowed to shrink below
   their content size; without it a long word forces horizontal scroll. */
.wf-blog-row-body,
.wf-gear-row > div,
.wf-video-meta,
.wf-channel > div { min-width: 0; }

/* Quiet empty state for the homepage feed before any posts exist */
.wf-home-empty {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; line-height: 1.5;
  color: var(--wf-text-soft);
  max-width: 52ch; margin: 0;
}

/* Touch devices: lift the booking flow and small controls to a 44px-class
   hit area without changing the pointer-device design. */
@media (pointer: coarse) {
  .wf-calendar-day { min-height: 44px; }
  .wf-btn.sm { padding: 10px 14px; }
  .wf-icon-btn { width: 44px; height: 44px; }
  .wf-duration-tab { padding: 8px 14px; }
  .wf-tag { padding: 8px 14px; }
  .wf-lightbox-nav { width: 48px; height: 48px; }
  .wf-lightbox-close { width: 48px; height: 48px; }
}

/* Consistent keyboard focus. Nav, inputs and photo cells already define
   the Luna-blue ring; these controls were falling back to the browser
   default. Unify them so every focusable control reads the same. */
.wf-btn:focus-visible,
.wf-icon-btn:focus-visible,
.wf-tag:focus-visible,
.wf-section-link:focus-visible,
.wf-locale-btn:focus-visible,
.wf-lang-toggle button:focus-visible,
.wf-header-cta:focus-visible,
.wf-duration-tab:focus-visible,
.wf-calendar-day:focus-visible,
.wf-blog-row:focus-visible,
.wf-back-link:focus-visible,
.wf-footer a:focus-visible,
.wf-videothumb:focus-visible,
.wf-brand:focus-visible,
.wf-nav-mobile a:focus-visible,
.wf-hamburger:focus-visible,
.wf-nav-close:focus-visible,
.wf-acct-link:focus-visible {
  outline: 2px solid var(--wf-blue);
  outline-offset: 2px;
}