/* ═══════════════════════════════════════════════════════════════════════
   THE LOOK OF A BLOG ARTICLE — THE ONE COPY.
   Every article page uses this file. The menu is in site-menu.css.
   An article is written as two real files, one per language, so this sheet
   is what stops the two drifting apart in appearance.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bone: #F5F1EA; --paper: #FBF9F5; --navy: #1A2A3A;
  --emerald: #2A4A38; --slate: #6B7378; --brass: #A8895C;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-weight: 400;
  color: var(--navy); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ── NAV (same shape as every other inner page) ── */
.nav { display: flex; align-items: flex-start; justify-content: space-between; padding: 32px 48px; color: var(--navy); }
.nav-brand { display: flex; flex-direction: column; gap: 4px; }
.nav-brand-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.5vw, 26px); letter-spacing: .03em; color: var(--navy); text-decoration: none; }
.brand-italic { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--brass); }
.nav-brand-tagline { font-size: 10px; text-transform: uppercase; letter-spacing: .35em; color: var(--navy); opacity: .75; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links-desktop { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 13px; text-transform: uppercase; letter-spacing: .18em; color: var(--navy); text-decoration: none; transition: color .3s ease; }
.nav-links a:hover { color: var(--brass); }
.lang-btn { background: none; border: none; font-family: var(--font-body); font-size: 12px; letter-spacing: .15em; color: var(--slate); opacity: .6; cursor: pointer; padding: 4px 6px; }
.lang-btn:hover { color: var(--brass); opacity: 1; }
.lang-btn.is-active { opacity: 1; color: var(--navy); }
.lang-divider { color: var(--navy); opacity: .4; margin: 0 2px; }
@media (max-width: 899px) { .nav-links-desktop { display: none; } }

/* ── HERO ── */
.post-hero { position: relative; }
.post-hero img { display: block; width: 100%; height: clamp(320px, 56vh, 620px); object-fit: cover; }
.post-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,42,58,.12) 0%, rgba(26,42,58,.62) 100%);
}
.post-hero-words {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0 clamp(20px, 6vw, 72px) clamp(28px, 5vh, 56px);
  max-width: 1000px;
}
.post-kicker { font-size: 10px; letter-spacing: .38em; text-transform: uppercase; color: #F5F1EA; opacity: .85; margin-bottom: 14px; }
.post-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 5.6vw, 62px); line-height: 1.08; color: #FFF; letter-spacing: .01em; }
.post-dateline { margin-top: 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #F5F1EA; opacity: .8; }

/* ── THE CRUMB BACK TO THE LIST ── */
.post-breadcrumb { max-width: 720px; margin: 0 auto; padding: 26px 22px 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.post-breadcrumb a { color: var(--slate); text-decoration: none; }
.post-breadcrumb a:hover { color: var(--brass); }

/* ── ARTICLE ── */
.post { max-width: 720px; margin: 0 auto; padding: clamp(26px, 5vw, 54px) 22px 20px; }
.post p { font-size: 17px; line-height: 1.78; margin-bottom: 24px; color: #26313D; }
.post h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(25px, 3.4vw, 35px); line-height: 1.2; margin: 52px 0 6px; }
.post h2 + .rule { width: 46px; height: 1px; background: var(--brass); margin-bottom: 26px; }
.post .lead { font-size: 19px; line-height: 1.72; color: #1F2A36; }
.post .lead::first-letter { font-family: var(--font-display); font-size: 62px; line-height: .82; float: left; padding: 6px 12px 0 0; color: var(--brass); }

figure { margin: 44px 0; }
figure img { display: block; width: 100%; height: auto; }
figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .04em; color: var(--slate); }

.price-card { border: 1px solid rgba(168,137,92,.45); background: var(--bone); padding: 28px 30px; margin: 40px 0; }
.price-card .label { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--brass); margin-bottom: 12px; }
.price-card .figure { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; }
.price-card p { margin: 10px 0 0; font-size: 15px; color: #3A4552; }

.takeaways { border-top: 1px solid rgba(26,42,58,.14); border-bottom: 1px solid rgba(26,42,58,.14); padding: 26px 0; margin: 42px 0; }
.takeaways li { list-style: none; padding-left: 26px; position: relative; margin-bottom: 14px; font-size: 16px; line-height: 1.65; }
.takeaways li:last-child { margin-bottom: 0; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--brass); }

.post-cta { text-align: center; padding: 0 22px clamp(60px, 9vw, 110px); }
.post-cta a {
  display: inline-block; border: 1px solid var(--navy); padding: 15px 34px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--navy); text-decoration: none; transition: background .3s ease, color .3s ease;
}
.post-cta a:hover { background: var(--navy); color: var(--bone); }

@media (max-width: 640px) {
  .nav { padding: 20px 20px; }
  .nav-links { gap: 16px; }
  .post p { font-size: 16px; }
  .post .lead::first-letter { font-size: 52px; }
}