/* ============================================================
   KARIBU LIVING — editorial magazine template
   The flagship publication of PBK Media, the editorial division of Paul Bel Kay Ltd.
   Used by the journal homepage and every issue under
   /karibu-living/. Loaded INSTEAD of style.css — these pages are
   standalone editorial documents, not sections of the marketing
   site.

   Design brief: Monocle / Apple Stories / Airbnb Magazine /
   Aesop Journal. Minimal, editorial, luxury, timeless. The
   article must read 80% editorial, 20% commercial — which is why
   all sales styling is quarantined in the ".lv-commercial" band
   near the bottom and deliberately looks different from the
   article above it.

   Brand: Dark Blue #012365 | Light Blue #c5d5df
          Grey Azure #4c555c | Grey Blue #8d97ad | Gold accent
   Headings: The Seasons (real brand cut, local woff2).
   Body: Poppins (local woff2).
   ============================================================ */

@font-face {
  font-family: 'The Seasons';
  src: url('/assets/Karibu%20Brand%20Fonts/The-Seasons.woff2') format('woff2'),
       url('/assets/Karibu%20Brand%20Fonts/The-Seasons.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/Karibu%20Brand%20Fonts/Poppins-Regular.woff2') format('woff2'),
       url('/assets/Karibu%20Brand%20Fonts/Poppins-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/Karibu%20Brand%20Fonts/Poppins-Medium.woff2') format('woff2'),
       url('/assets/Karibu%20Brand%20Fonts/Poppins-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #012365;
  --navy-deep: #011a4d;
  --light: #c5d5df;
  --light-soft: #e9eff4;
  --paper: #fdfdfc;
  --paper-warm: #f7f6f3;
  --grey-band: #f0f1ef;
  --azure: #4c555c;
  --greyblue: #8d97ad;
  --gold: #d9b36c;
  --gold-deep: #b8923f;
  --white: #ffffff;
  /* ---------- ACCESSIBILITY TEXT TOKENS ----------
     Two darker tones of the brand hues, for TEXT ONLY. The brand tokens above
     are deliberately unchanged; these exist because brand gold and grey-blue
     fail WCAG AA when used as type on a light background (1.94:1 and 2.88:1
     on --paper). Both values below are validated against the DARKEST light
     ground on these pages, --grey-band #f0f1ef, not merely --paper — gold
     clears 4.92:1 there and grey-blue 4.80:1 — so they pass AA on every light
     surface the pages use.

     --gold-text        USE for gold-coloured TEXT on any light ground:
                        section eyebrows, the section-number and list-number
                        glyphs, the "coming soon" note, breadcrumb dividers,
                        the badge fill behind white text.
                        DO NOT USE for gold rules, hairlines, the reading
                        progress bar, the pull-quote mark, the end-of-article
                        mark, or the `.sep` middots and `.arrow` glyphs —
                        those are decorative and aria-hidden, so they keep
                        brand --gold.
                        DO NOT USE on navy grounds: brand --gold already
                        clears 8.45:1 there and reads warmer.

     --greyblue-text    USE for grey-blue TEXT on any light ground: the base
                        .lv-eyebrow colour, issue metadata lines, form field
                        labels, form notes, figure captions, the pull-quote
                        attribution, the masthead "by Paul Bel Kay" credit in
                        its light state.
                        DO NOT USE for borders, input outlines or divider
                        rules — those keep brand --greyblue at reduced alpha.
                        DO NOT USE on navy grounds: brand --greyblue passes
                        at 5.70:1 on --navy-deep, which is why the footer fine
                        print and the subscribe-band note still use it.

     Rule of thumb: if it is a glyph a reader has to READ, and it sits on a
     light background, use the -text token. Anything decorative, any border,
     and anything on navy keeps the brand token. */
  --gold-text: #836320;
  --greyblue-text: #606a7e;
  --display: 'The Seasons', 'Marcellus', 'Times New Roman', serif;
  --sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --measure: 38rem;   /* prose column — comfortable line length */
  --wide: 900px;      /* maximum reading width, per brief */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--azure);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); }
::selection { background: var(--navy); color: var(--white); }

/* Visible keyboard focus on every interactive element. Deliberately a single
   global rule rather than per-component, so nothing added later can ship
   without a focus state. :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 1px;
}
/* On navy grounds the navy ring is invisible — use gold there. */
.lv-subscribe-band a:focus-visible,
.lv-subscribe-band button:focus-visible,
.lv-subscribe-band input:focus-visible,
.lv-nextissue a:focus-visible,
.lv-footer a:focus-visible {
  outline-color: var(--gold);
}
/* Skip straight to the article for keyboard and screen-reader users. */
.lv-skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--navy); color: var(--white);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.85rem 1.2rem; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.lv-skip:focus { top: 1rem; }

/* ---------- 44px touch-target floor ----------
   Applied on touch pointers and at tablet width and below, where taps
   actually happen, so the refined desktop scale of the masthead and footer
   type is left alone. Covers the small controls that fall short otherwise:
   the header Subscribe button, the logo links, and the footer nav row. */
@media (pointer: coarse), (max-width: 860px) {
  .lv-header .lv-btn,
  .lv-parent-mark,
  .lv-footer-parent,
  .lv-footer .links a,
  .lv-crumbs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The row needs a little less column gap once each link is 44px tall,
     or the footer nav becomes very airy on a phone. */
  .lv-footer .links { gap: 0.2rem 1.5rem; }
}

.lv-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--greyblue-text);
}

/* ---------- Buttons ---------- */
.lv-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1.1rem 2rem;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
@media (hover: hover) { .lv-btn:hover { transform: translateY(-2px); } }
.lv-btn:active { transform: translateY(0); }
.lv-btn-navy { background: var(--navy); color: var(--white); }
.lv-btn-navy:hover { background: var(--navy-deep); box-shadow: 0 10px 24px rgba(1,26,77,0.32); }
.lv-btn-gold { background: var(--gold); color: var(--navy-deep); }
.lv-btn-gold:hover { background: var(--gold-deep); color: var(--white); box-shadow: 0 10px 24px rgba(184,146,63,0.35); }
.lv-btn-outline { background: transparent; color: var(--navy); border-color: rgba(1,35,101,0.35); }
.lv-btn-outline:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }
.lv-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ---------- Reading progress ---------- */
.lv-progress {
  position: fixed; top: 0; left: 0; z-index: 90;
  height: 2px; width: 0%;
  background: var(--gold);
  transition: width 0.08s linear;
}

/* ---------- Masthead ---------- */
.lv-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.6rem;
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
.lv-header.scrolled {
  background: rgba(253,253,252,0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(1,35,101,0.08);
  padding: 0.7rem 1.6rem;
}
/* The masthead is the Karibu Living wordmark, not set type. Both
   colourways are in the DOM and cross-fade: cream while the header
   floats over the dark cover image, blue once it gains its light
   background on scroll (and immediately on the light journal page). */
/* The wordmark and the "by Paul Bel Kay" credit are two separate links —
   the wordmark to the journal, the credit out to paulbelkay.com — so the
   group wrapper carries the layout the single anchor used to. */
.lv-masthead-group {
  display: flex; align-items: center; gap: 0.75rem;
  white-space: nowrap;
}
.lv-masthead {
  display: flex; align-items: center;
  text-decoration: none;
}
/* Shared by the Karibu Living wordmark and the Karibu Condominiums
   parent mark: both colourways sit stacked and cross-fade with the
   header background. */
.lv-header .marks { position: relative; display: block; height: 22px; }
.lv-header .marks img {
  height: 22px; width: auto; display: block;
  transition: opacity 0.35s var(--ease);
}
.lv-header .marks .mark-blue { position: absolute; top: 0; left: 0; opacity: 0; }
.lv-header.scrolled .marks .mark-cream,
.lv-header.on-light .marks .mark-cream { opacity: 0; }
.lv-header.scrolled .marks .mark-blue,
.lv-header.on-light .marks .mark-blue { opacity: 1; }

/* Karibu Condominiums mark — the way back to the main site.
   Desktop: sits on the right, replacing the old text link.
   Mobile: takes the top-left slot instead of the Living wordmark,
   so there is always a visible route home on a phone. */
.lv-parent-mark { display: flex; align-items: center; text-decoration: none; }
/* Taller than the Living wordmark because this lockup stacks
   "KARIBU" over "CONDOMINIUMS" — at 30px the second line was
   unreadable. */
.lv-parent-mark .marks, .lv-parent-mark .marks img { height: 40px; }
.lv-parent-mobile { display: none; }
@media (max-width: 640px) {
  /* Hide the whole group, not just the wordmark — otherwise the
     "by Paul Bel Kay" credit would be left behind on its own, colliding
     with the mobile parent mark that takes this slot. */
  .lv-masthead-group { display: none; }
  .lv-parent-desktop { display: none; }
  .lv-parent-mobile { display: flex; }
}
.lv-masthead-group .by {
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: color 0.35s;
}
/* Inherit the credit's colour through both header states rather than the
   global link navy, which would be invisible over the dark cover. */
.lv-masthead-group .by a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.lv-masthead-group .by a:hover,
.lv-masthead-group .by a:focus-visible { border-bottom-color: currentColor; }
.lv-header.scrolled .lv-masthead-group .by,
.lv-header.on-light .lv-masthead-group .by { color: var(--greyblue-text); }
.lv-header-actions { display: flex; align-items: center; gap: 1.1rem; }
.lv-header .lv-btn { padding: 0.6rem 1.15rem; font-size: 0.56rem; }
.lv-header:not(.scrolled) .lv-subscribe-btn {
  border-color: rgba(255,255,255,0.65); color: var(--white); background: transparent;
}
.lv-header:not(.scrolled) .lv-subscribe-btn:hover { background: rgba(255,255,255,0.16); }
@media (max-width: 640px) {
  .lv-masthead-group .by { display: none; }
}

/* Journal homepage variant: masthead starts dark-on-light */
.lv-header.on-light:not(.scrolled) .lv-subscribe-btn { border-color: rgba(1,35,101,0.4); color: var(--navy); }
.lv-header.on-light:not(.scrolled) .lv-subscribe-btn:hover { background: var(--navy); color: var(--white); }

/* ============================================================
   THE COVER — full-screen magazine cover, no CTAs by design.
   The only job here is immersion: masthead, strapline, rule,
   issue number, title, subtitle, reading time, scroll cue.
   ============================================================ */
.lv-cover {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--white);
  padding: 7rem 1.5rem 6rem;
}
.lv-cover-media {
  position: absolute; inset: -12% 0;
  z-index: 0;
  will-change: transform;
}
.lv-cover-media img { width: 100%; height: 100%; object-fit: cover; }
/* Two layers: a soft vignette centred behind the cover lines so the
   gold "Issue" rule and the strapline stay legible over bright sky,
   plus a vertical wash that anchors the masthead and the scroll cue. */
.lv-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 90% 70% at 50% 46%, rgba(1,20,58,0.5) 0%, rgba(1,20,58,0.2) 55%, rgba(1,20,58,0) 78%),
    linear-gradient(to bottom, rgba(1,20,58,0.66) 0%, rgba(1,20,58,0.46) 45%, rgba(1,20,58,0.76) 100%);
}
.lv-cover-inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 46rem;
  text-shadow: 0 1px 30px rgba(1,20,58,0.5);
}

/* Cover masthead — the cream wordmark, since the cover is always a
   darkened photograph. Sized as a share of the cover width so it
   scales with the headline rather than fighting it. */
.lv-cover-mark {
  width: clamp(230px, 42%, 400px);
  height: auto;
  margin: 0 auto 1.1rem;
}
.lv-cover-rule {
  width: 84px; height: 1px;
  background: rgba(255,255,255,0.5);
  margin: 2.4rem auto;
}
/* The single hero metadata line: issue · month · reading time.
   This replaced .lv-cover-issue, .lv-cover-read and .lv-cover-strap, which
   between them printed the issue number, the date, the reading time and the
   category two and three times over across the header. Wraps to two lines on
   narrow screens rather than shrinking, so the mobile hierarchy is identical
   to desktop — same elements, same order, nothing hidden per breakpoint. */
.lv-cover-meta {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 0.35rem 0.9rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
/* The tracking adds a trailing space to the last letter of each span; the
   negative margin pulls the separators back onto centre. */
.lv-cover-meta .sep { color: rgba(255,255,255,0.45); margin-left: -0.5rem; }
.lv-cover-category {
  font-size: clamp(0.62rem, 1.5vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-bottom: 1.8rem;
}
.lv-cover h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.3rem, 7vw, 4.6rem);
  line-height: 1.1;
  color: var(--white);
  margin: 0 auto 1.6rem;
  max-width: 20ch;
  text-wrap: balance;
}
.lv-cover-sub {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
  max-width: 28rem;
  margin: 0 auto;
  text-wrap: balance; /* keeps a place name off a line of its own */
}
.lv-cover-scroll {
  position: absolute; z-index: 2;
  left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
}
.lv-cover-scroll .line {
  width: 1px; height: 46px;
  background: rgba(255,255,255,0.3);
  overflow: hidden; position: relative;
}
.lv-cover-scroll .line::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--gold);
  animation: lv-cue 2.4s var(--ease) infinite;
}
@keyframes lv-cue { 0% { top: -50%; } 60% { top: 100%; } 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .lv-cover-scroll .line::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Article utility bar (share/save live here, not the cover) ---------- */
.lv-utilbar {
  border-bottom: 1px solid rgba(141,151,173,0.22);
  background: var(--paper);
}
.lv-utilbar-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
/* The utility bar deliberately carries the breadcrumb and the share controls
   ONLY. It used to repeat issue / date / category / reading time under the
   breadcrumb, duplicating the cover; that line and its `.meta` rules are
   gone rather than hidden. */
.lv-utilbar-meta { display: grid; gap: 0.5rem; min-width: 0; }
/* Visible breadcrumb trail, matching the BreadcrumbList structured data. */
.lv-crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.3rem 0.55rem; margin: 0; padding: 0;
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--greyblue-text);
}
.lv-crumbs li { display: flex; align-items: center; gap: 0.55rem; }
.lv-crumbs li + li::before { content: "/"; color: var(--gold-text); }
.lv-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.lv-crumbs a:hover, .lv-crumbs a:focus-visible { border-bottom-color: currentColor; }
.lv-crumbs [aria-current="page"] { color: var(--navy); }
.lv-actions { display: flex; align-items: center; gap: 0.5rem; }
.lv-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  background: none;
  border: 1px solid rgba(1,35,101,0.2);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  /* min 44px tall so the tap target meets the accessibility floor */
  min-height: 44px; padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.lv-action-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.lv-action-btn svg { width: 13px; height: 13px; flex: none; }
.lv-toast {
  position: fixed; left: 50%; bottom: 2rem; z-index: 95;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-deep); color: var(--white);
  font-size: 0.78rem; letter-spacing: 0.06em;
  padding: 0.8rem 1.4rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s, transform 0.35s;
  box-shadow: 0 16px 40px rgba(1,26,77,0.35);
}
.lv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   ARTICLE — generous white space, alternating rhythm
   ============================================================ */
.lv-article { padding: 0 0 1rem; }
.lv-prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.lv-prose p { margin: 0 0 1.65rem; }
.lv-prose p:last-child { margin-bottom: 0; }
.lv-prose strong { font-weight: 500; color: var(--navy); }
.lv-prose em { font-style: italic; }

/* Opening standfirst */
.lv-standfirst { padding: 5.5rem 0 0; }
.lv-standfirst .lv-prose p {
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.85;
  color: var(--azure);
}
.lv-standfirst .dropcap::first-letter {
  font-family: var(--display);
  font-size: 4.4em;
  line-height: 0.76;
  float: left;
  padding: 0.09em 0.16em 0 0;
  color: var(--navy);
}

/* A question set as editorial punctuation */
.lv-question {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.45;
  color: var(--navy);
  margin: 2.8rem 0;
  text-wrap: balance;
}

/* Section wrapper — the vertical rhythm of the magazine */
.lv-section { padding: 6.5rem 0 0; }
.lv-section-label {
  display: flex; align-items: center; gap: 1.1rem;
  margin-bottom: 1.8rem;
}
.lv-section-label .num {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--gold-text);
}
.lv-section-label .rule { flex: 0 0 40px; height: 1px; background: var(--gold); }
.lv-section h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.18;
  color: var(--navy);
  margin-bottom: 1.9rem;
  text-wrap: balance;
}
.lv-section h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 1rem;
}

/* ---------- Alternating duo: image one side, text the other ---------- */
.lv-duo {
  max-width: var(--wide);
  margin: 4rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  gap: 2.2rem;
  align-items: center;
}
.lv-duo figure { position: relative; margin: 0; overflow: hidden; }
.lv-duo figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 4.8; }
.lv-duo .txt .lv-eyebrow { display: block; margin-bottom: 0.9rem; color: var(--gold-text); }
.lv-duo .txt p { margin-bottom: 1.15rem; font-size: 0.97rem; }
.lv-duo .txt p:last-child { margin-bottom: 0; }
@media (min-width: 820px) {
  .lv-duo { grid-template-columns: 1fr 1fr; gap: 3.6rem; }
  .lv-duo.rev figure { order: 2; }
  .lv-duo.rev .txt { order: 1; }
}

/* ---------- Full-bleed editorial image ---------- */
.lv-bleed { margin: 6rem 0 0; }
.lv-bleed img { width: 100%; max-height: 82vh; object-fit: cover; }
.lv-caption,
.lv-bleed figcaption,
.lv-duo figcaption {
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--greyblue-text);
  padding: 0.9rem 1.5rem 0;
  text-align: center;
}

/* Inset figure — narrower than full bleed, still generous */
.lv-figure {
  max-width: var(--wide);
  margin: 5rem auto 0;
  padding: 0 1.5rem;
}
.lv-figure img { width: 100%; }

/* ---------- Numbered feature list ---------- */
.lv-list {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 0 1.5rem;
}
.lv-list-item {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.2rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(141,151,173,0.26);
}
.lv-list-item:last-child { border-bottom: 1px solid rgba(141,151,173,0.26); }
.lv-list-item .n {
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--gold-text);
  line-height: 1.25;
}
.lv-list-item h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.lv-list-item p { font-size: 0.92rem; margin: 0; }

/* ============================================================
   PULL QUOTE — near full viewport width, centred, large
   ============================================================ */
.lv-quote {
  margin: 7rem 0 0;
  padding: 5.5rem 1.5rem;
  background: var(--paper-warm);
  text-align: center;
}
.lv-quote .mark {
  display: block;
  font-family: var(--display);
  font-size: 3.6rem;
  line-height: 0.3;
  color: var(--gold);
  margin-bottom: 2rem;
}
.lv-quote blockquote {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5.2vw, 3.4rem);
  line-height: 1.28;
  color: var(--navy);
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
.lv-quote .attr {
  margin-top: 2.2rem;
  font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--greyblue-text);
}

/* ---------- Editorial gallery ---------- */
.lv-gallery {
  max-width: var(--wide);
  margin: 5rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.lv-gallery figure { margin: 0; overflow: hidden; }
.lv-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.8s var(--ease);
}
@media (hover: hover) { .lv-gallery figure:hover img { transform: scale(1.04); } }
@media (min-width: 800px) {
  .lv-gallery { grid-template-columns: repeat(3, 1fr); }
  .lv-gallery .span2 { grid-column: span 2; }
}

/* ============================================================
   THE GATE — premium "Continue Reading" interruption at ~35–40%
   ============================================================ */
.lv-invite { position: relative; margin: 3rem 0 1rem; padding: 0 1.5rem; }
.lv-invite-card {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.2rem);
  background: var(--white);
  border: 1px solid rgba(1,35,101,0.12);
  box-shadow: 0 20px 54px rgba(1,26,77,0.10);
  text-align: center;
  position: relative;
}
.lv-invite-card::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 3px; background: var(--gold);
}
.lv-invite-card .lv-eyebrow { color: var(--gold-text); display: block; margin-bottom: 1rem; }
.lv-invite-card h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.1rem);
  color: var(--navy);
  line-height: 1.26;
  margin-bottom: 1rem;
}
.lv-invite-lede { font-size: 0.95rem; max-width: 31rem; margin: 0 auto 1.8rem; }
.lv-invite form { text-align: left; }
/* The escape hatch that makes this an invitation rather than a gate: the
   reader can always carry straight on to the rest of the article. */
.lv-invite-skip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.6rem 1rem;
  margin-top: 1.4rem;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid rgba(1,35,101,0.3);
  transition: border-color 0.25s, color 0.25s;
}
.lv-invite-skip:hover, .lv-invite-skip:focus-visible { border-bottom-color: var(--navy); }
/* Inline confirmation replacing the form — see living.js, which compensates
   scroll for the height change so the reader does not lose their place. */
.lv-invite-done {
  font-size: 0.95rem;
  color: var(--azure);
  max-width: 31rem;
  margin: 0 auto;
}
.lv-invite-done strong { color: var(--navy); }
.lv-form-row { display: grid; gap: 0.9rem; margin-bottom: 0.9rem; }
@media (min-width: 560px) { .lv-form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.lv-field label {
  display: block;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--greyblue-text);
  margin-bottom: 0.4rem;
}
.lv-field input {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid rgba(141,151,173,0.5);
  padding: 0.85rem 0.9rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.lv-field input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(1,35,101,0.1); }
.lv-field input.field-invalid { border-color: #b3261e; }
.lv-invite .lv-btn { width: 100%; margin-top: 0.5rem; }
.lv-form-note {
  margin-top: 1rem;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--greyblue-text);
  text-align: center;
}
.lv-form-error {
  display: none;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: #b3261e;
  text-align: center;
}
.lv-form-error.show { display: block; }
.lv-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.lv-btn.is-loading::after {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: lv-spin 0.7s linear infinite;
}
@keyframes lv-spin { to { transform: rotate(360deg); } }

/* NOTHING in the article is hidden. The former content-lock rule and its
   unlocked/no-js escape hatches are gone: the
   subscription prompt is an invitation, not a gate, so the whole issue is
   readable, indexable and available with JavaScript disabled. Do not
   reintroduce a display:none content lock here. */

/* ---------- End-of-article mark ---------- */
.lv-endmark {
  max-width: var(--measure);
  margin: 4.5rem auto 0;
  padding: 0 1.5rem;
  text-align: center;
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
}

/* ============================================================
   COMMERCIAL BAND — the 20%. Deliberately a different world
   from the article: grey ground, boxed layout, sales language
   allowed here and nowhere above.
   ============================================================ */
.lv-commercial {
  margin-top: 6rem;
  background: var(--grey-band);
  border-top: 1px solid rgba(1,35,101,0.1);
  padding: 5.5rem 1.5rem 6rem;
}
.lv-commercial-inner { max-width: var(--wide); margin: 0 auto; }
.lv-commercial .lv-eyebrow { color: var(--gold-text); display: block; text-align: center; }
.lv-commercial h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  line-height: 1.2;
  color: var(--navy);
  text-align: center;
  margin: 1rem auto 1.3rem;
  max-width: 24ch;
  text-wrap: balance;
}
.lv-commercial .intro {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
  font-size: 0.97rem;
}
.lv-pack {
  margin-top: 3.2rem;
  background: var(--white);
  border: 1px solid rgba(1,35,101,0.12);
  padding: clamp(1.8rem, 4.5vw, 3rem);
}
.lv-pack h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.lv-pack .incl {
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--greyblue-text);
  margin: 1.6rem 0 0.8rem;
}
.lv-pack ul {
  list-style: none;
  display: grid;
  gap: 0.5rem 1.6rem;
  margin: 0 0 2rem;
  padding: 0;
  font-size: 0.9rem;
}
@media (min-width: 620px) { .lv-pack ul { grid-template-columns: 1fr 1fr; } }
.lv-pack ul li::before { content: "\2014\2002"; color: var(--gold); }
/* One dominant button; the consultation is a text link beneath it so the
   Purchaser Information Pack is unambiguously the primary action. */
.lv-pack-ctas { display: grid; gap: 0.9rem; justify-items: center; }
.lv-pack-ctas .lv-btn { width: 100%; }
.lv-pack-alt {
  font-size: 0.86rem;
  color: var(--azure);
  text-align: center;
  line-height: 1.8;
}
.lv-pack-alt a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px;
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(1,35,101,0.32);
  transition: border-color 0.25s;
}
.lv-pack-alt a:hover, .lv-pack-alt a:focus-visible { border-bottom-color: var(--navy); }
@media (min-width: 620px) { .lv-pack-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Continue Your Journey — four navigation cards ---------- */
.lv-journey {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 5rem 1.5rem 1rem;
}
.lv-journey > .lv-eyebrow { display: block; text-align: center; color: var(--gold-text); }
.lv-journey h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: var(--navy);
  text-align: center;
  margin: 0.9rem 0 2.6rem;
}
/* Three cards, so three columns once there is room — a 2-up grid would
   leave the third card orphaned on its own row. */
.lv-journey-grid { display: grid; gap: 0.9rem; }
@media (min-width: 720px) { .lv-journey-grid { grid-template-columns: repeat(3, 1fr); } }
.lv-journey-card {
  display: flex; flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  border: 1px solid rgba(1,35,101,0.15);
  background: var(--white);
  padding: 1.6rem 1.7rem;
  transition: border-color 0.3s var(--ease), transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.lv-journey-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(1,26,77,0.1);
}
.lv-journey-card .n {
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-text);
}
.lv-journey-card .t {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--navy);
  line-height: 1.3;
}
.lv-journey-card .s { font-size: 0.86rem; color: var(--azure); }
.lv-journey-card .go {
  margin-top: 0.5rem;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--navy);
}
.lv-journey-card .go .arrow { color: var(--gold); }

/* ============================================================
   NEXT MONTH IN KARIBU LIVING — magazine-style closing
   ============================================================ */
.lv-nextissue {
  margin-top: 4rem;
  background: var(--navy-deep);
  color: var(--light);
  padding: 5rem 1.5rem 5.5rem;
}
.lv-nextissue-inner { max-width: var(--wide); margin: 0 auto; }
.lv-nextissue .lv-eyebrow { color: var(--gold); display: block; text-align: center; }
.lv-nextissue-head {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--white);
  text-align: center;
  margin: 1rem 0 2.8rem;
}
.lv-nextissue-card {
  display: grid;
  gap: 1.8rem;
  align-items: center;
}
@media (min-width: 780px) {
  .lv-nextissue-card { grid-template-columns: 1fr 1.1fr; gap: 3rem; }
}
.lv-nextissue-card figure { margin: 0; overflow: hidden; position: relative; }
.lv-nextissue-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lv-nextissue-card .badge {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(217,179,108,0.92);
  color: var(--navy-deep);
  font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 0.45rem 0.8rem;
}
.lv-nextissue-card .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--light);
  margin-bottom: 0.9rem;
}
.lv-nextissue-card .meta .sep { color: var(--gold); }
.lv-nextissue-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.24;
  color: var(--white);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}
.lv-nextissue-card p { font-size: 0.93rem; color: var(--light); }
.lv-nextissue-card .lv-btn { margin-top: 1.5rem; }

/* ============================================================
   JOURNAL HOMEPAGE
   ============================================================ */
.lv-journal-hero {
  padding: 9.5rem 1.5rem 4rem;
  text-align: center;
  background: linear-gradient(to bottom, rgba(197,213,223,0.5), rgba(253,253,252,0) 70%);
}
/* The stacked blue lockup IS the page title here — the <h1> wraps it
   and the alt text carries the name for search and screen readers. */
.lv-journal-hero h1 { margin: 0; line-height: 0; }
.lv-journal-hero h1 img {
  width: clamp(190px, 34vw, 300px);
  height: auto;
  margin: 0 auto;
}
.lv-journal-hero .tag {
  margin: 1.1rem auto 0;
  max-width: 34rem;
  font-size: 0.95rem;
}
.lv-journal-hero .lv-eyebrow { display: block; margin-bottom: 1.2rem; color: var(--gold-text); }

.lv-issues {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2.2rem 1.5rem 5rem;
  display: grid;
  gap: 2.4rem;
}
.lv-issues-head {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
  display: flex; align-items: center; gap: 1.1rem;
}
.lv-issues-head .rule { flex: 1; height: 1px; background: rgba(141,151,173,0.4); }
.lv-issues-head .lv-eyebrow { color: var(--gold-text); }

.lv-issue-row {
  position: relative;
  display: grid;
  text-decoration: none;
  background: var(--white);
  border: 1px solid rgba(1,35,101,0.16);
  box-shadow: 0 1px 0 rgba(1,26,77,0.04);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
@media (hover: hover) {
  .lv-issue-row:not(.coming):hover {
    transform: translateY(-4px);
    border-color: rgba(1,35,101,0.4);
    box-shadow: 0 24px 54px rgba(1,26,77,0.16);
  }
  .lv-issue-row:not(.coming):hover img { transform: scale(1.045); }
  .lv-issue-row:not(.coming):hover .read-btn { background: var(--navy-deep); box-shadow: 0 10px 24px rgba(1,26,77,0.32); }
}
.lv-issue-row figure { margin: 0; position: relative; overflow: hidden; }
.lv-issue-row img {
  width: 100%; height: 100%;
  min-height: 220px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
@media (min-width: 860px) {
  .lv-issue-row { grid-template-columns: 1.05fr 1fr; }
  .lv-issue-row img { aspect-ratio: auto; position: absolute; inset: 0; }
  .lv-issue-row.rev figure { order: 2; }
  .lv-issue-row.rev .body { order: 1; }
}
.lv-issue-row .badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: rgba(1,26,77,0.85);
  color: var(--white);
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  backdrop-filter: blur(4px);
}
.lv-issue-row .badge.gold { background: rgba(184,146,63,0.92); color: var(--white); }
.lv-issue-row .body {
  position: relative;
  padding: clamp(1.7rem, 4.2vw, 2.9rem);
  display: flex; flex-direction: column; align-items: flex-start;
}
.lv-issue-row .bignum {
  position: absolute; top: 0.9rem; right: 1.3rem;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  line-height: 1;
  color: rgba(1,35,101,0.08);
  pointer-events: none;
}
.lv-issue-row .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--greyblue-text);
  margin-bottom: 0.9rem;
}
.lv-issue-row .meta .sep { color: var(--gold); }
.lv-issue-row h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.24;
  color: var(--navy);
  text-wrap: balance;
}
.lv-issue-row .excerpt { margin-top: 0.8rem; font-size: 0.92rem; }
.lv-issue-row .read-btn {
  margin-top: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--navy); color: var(--white);
  font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lv-issue-row .read-btn .arrow { color: var(--gold); }
/* Archive cards sit under the "Browse the Issues" h2, so their titles are h3.
   Same type as the old h2 treatment. */
.lv-issue-row h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.24;
  color: var(--navy);
  text-wrap: balance;
}

/* ============================================================
   JOURNAL LANDING PAGE — the approved section order is
   masthead / proposition / featured issue / archive / upcoming
   issue / The Karibu Story / subscription / footer.
   ============================================================ */

/* Shared issue metadata line: Issue · Month Year · Category · Read time */
.lv-issue-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.85rem;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--greyblue-text);
  margin-bottom: 0.9rem;
}
.lv-issue-meta .sep { color: var(--gold); }

/* ---------- C. Featured issue ---------- */
.lv-featured { padding: 0.5rem 1.5rem 0; }
.lv-featured-inner {
  max-width: var(--wide); margin: 0 auto;
  display: grid;
  background: var(--white);
  border: 1px solid rgba(1,35,101,0.16);
  box-shadow: 0 24px 60px rgba(1,26,77,0.10);
  overflow: hidden;
}
@media (min-width: 860px) {
  .lv-featured-inner { grid-template-columns: 1.05fr 1fr; }
}
.lv-featured-media { display: block; margin: 0; overflow: hidden; }
.lv-featured-media img {
  width: 100%; height: 100%; min-height: 250px;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
@media (hover: hover) { .lv-featured-inner:hover .lv-featured-media img { transform: scale(1.04); } }
.lv-featured-body { padding: clamp(1.8rem, 4.4vw, 3rem); }
.lv-featured-body .lv-eyebrow { display: block; color: var(--gold-text); margin-bottom: 1rem; }
.lv-featured-body h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2;
  color: var(--navy); text-wrap: balance;
}
.lv-featured-body h2 a { color: inherit; text-decoration: none; }
.lv-featured-body h2 a:hover {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.lv-featured-stand { margin: 1rem 0 1.8rem; font-size: 0.95rem; }

/* ---------- D. Archive ---------- */
.lv-archive { padding-bottom: 0.5rem; }
/* Shown only when no PREVIOUS issues exist yet and js/issues.js is set to
   ARCHIVE_EMPTY_MODE = 'message'. The default is to hide the whole section
   instead — see the note on the archive section in karibu-living/index.html. */
.lv-archive-empty {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
  text-align: center;
  color: var(--greyblue-text);
  font-size: 0.95rem;
  line-height: 1.8;
}
/* `hidden` must win over the display rules above it. */
.lv-archive[hidden], .lv-archive-empty[hidden], .lv-featured[hidden] { display: none; }

/* ---------- E. Upcoming issue ---------- */
.lv-upcoming { padding: 3.2rem 1.5rem 0; }
.lv-upcoming-inner {
  max-width: var(--wide); margin: 0 auto;
  display: grid;
  background: var(--paper-warm);
  border: 1px solid rgba(1,35,101,0.12);
  overflow: hidden;
}
@media (min-width: 860px) {
  .lv-upcoming-inner { grid-template-columns: 1fr 1.08fr; }
}
.lv-upcoming-inner figure { margin: 0; position: relative; overflow: hidden; }
.lv-upcoming-inner img {
  width: 100%; height: 100%; min-height: 220px;
  object-fit: cover;
  /* Desaturated because the issue has not been published yet */
  filter: saturate(0.6) brightness(0.96);
}
.lv-upcoming-inner .badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: rgba(1,26,77,0.85);
  color: var(--white);
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 0.5rem 0.85rem;
}
.lv-upcoming-inner .badge.gold { background: rgba(131,99,32,0.94); }
.lv-upcoming .body { padding: clamp(1.7rem, 4.2vw, 2.8rem); }
.lv-upcoming .lv-eyebrow { display: block; color: var(--gold-text); margin-bottom: 0.9rem; }
.lv-upcoming h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.45rem, 3.2vw, 2rem); line-height: 1.24;
  color: var(--navy); text-wrap: balance;
}
.lv-upcoming .excerpt { margin-top: 0.85rem; font-size: 0.93rem; }
.lv-upcoming-note {
  margin-top: 1.3rem;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-text);
}
.lv-upcoming .lv-btn { margin-top: 1.2rem; }

/* ---------- F. The Karibu Story (evergreen, not a numbered issue) ---------- */
.lv-story { padding: 3.4rem 1.5rem 4.8rem; }
.lv-story-inner {
  max-width: var(--wide); margin: 0 auto;
  display: grid; gap: 1.8rem; align-items: center;
}
@media (min-width: 860px) {
  .lv-story-inner { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.lv-story-body .lv-eyebrow { display: block; color: var(--gold-text); margin-bottom: 0.9rem; }
.lv-story-body h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.22;
  color: var(--navy);
}
.lv-story-body p { margin-top: 0.9rem; font-size: 0.95rem; }
.lv-story-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px; margin-top: 1.2rem;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid rgba(1,35,101,0.3);
  transition: border-color 0.25s, gap 0.25s;
}
.lv-story-link .arrow { color: var(--gold-text); }
.lv-story-link:hover, .lv-story-link:focus-visible { border-bottom-color: var(--navy); gap: 0.85rem; }
.lv-story-media { margin: 0; }
.lv-story-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Subscribe band */
.lv-subscribe-band {
  background: var(--navy);
  color: var(--white);
  padding: 4.2rem 1.5rem;
}
.lv-subscribe-band .inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid; gap: 2rem;
  align-items: center;
}
@media (min-width: 820px) { .lv-subscribe-band .inner { grid-template-columns: 1.2fr 1fr; } }
.lv-subscribe-band h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--white);
  line-height: 1.3;
  margin: 0.8rem 0 0.7rem;
}
.lv-subscribe-band p { color: var(--light); font-size: 0.92rem; }
.lv-subscribe-band .lv-eyebrow { color: var(--gold); }
.lv-subscribe-band .lv-field label { color: var(--light); }
.lv-subscribe-band .lv-field input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}
.lv-subscribe-band .lv-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,179,108,0.18); }
.lv-subscribe-band .lv-form-note { color: var(--greyblue); }
/* The global `a { color: var(--navy) }` would render this navy on the navy
   band — i.e. invisible. Inherit the note's colour and keep it underlined so
   it still reads as a link. */
.lv-subscribe-band .lv-form-note a {
  color: var(--light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lv-subscribe-band .lv-form-note a:hover { color: var(--white); }

/* ---------- Footer ---------- */
.lv-footer {
  background: var(--navy-deep);
  color: var(--light);
  padding: 3.4rem 1.5rem 2.6rem;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
}
/* Credit lockup on the navy footer, reading "Karibu Living by Paul Bel Kay":
   the cream wordmark, the connecting word, then the parent company's
   signature, which links out to paulbelkay.com. */
.lv-footer .lv-footer-lockup { margin-bottom: 1.6rem; }
.lv-footer .lv-footer-mark {
  display: block; width: clamp(190px, 40vw, 260px); height: auto;
  margin: 0 auto 0.85rem;
}
.lv-footer .lv-footer-by {
  display: block;
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--greyblue);
  margin-bottom: 0.85rem;
}
.lv-footer .lv-footer-parent { display: block; }
.lv-footer .lv-footer-parent img {
  display: block; width: clamp(150px, 32vw, 200px); height: auto;
  margin: 0 auto; opacity: 0.9;
  transition: opacity 0.3s;
}
.lv-footer .lv-footer-parent:hover img { opacity: 1; }
.lv-footer .links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.8rem 1.8rem;
  margin-bottom: 1.6rem;
}
.lv-footer .links a {
  color: var(--light);
  text-decoration: none;
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.lv-footer .links a:hover { color: var(--gold); }
.lv-footer .fine {
  font-size: 0.7rem;
  line-height: 1.8;
  color: var(--greyblue);
  max-width: 46rem;
  margin: 0 auto;
}
.lv-footer .fine a { color: var(--greyblue); }

/* ---------- Reveal animation (JS-safe) ---------- */
.reveal-pending { opacity: 0; transform: translateY(26px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
  .reveal-in { transition: none; }
}