:root {
  --orange: #ff6500;
  --orange-dark: #e95800;
  --ink: #111111;
  --text: #515151;
  --muted: #858585;
  --line: #e9e9e7;
  --ground: #f7f7f6;
  --paper: #ffffff;
  --footer: #242424;
  --shell-width: min(1216px, 85.5vw);
  --content-width: min(1216px, 84.5vw);
  --radius: clamp(10px, 1.05vw, 16px);
  --shadow: 0 clamp(7px, 1.2vw, 17px) clamp(22px, 3.2vw, 46px) rgba(30, 30, 30, .055);
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body.search {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
body.menu-open { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
button { color: inherit; }
.container { position: relative; left: -9px; width: var(--shell-width); margin-inline: auto; }
.content-width { position: relative; left: -19px; width: var(--content-width); margin-inline: auto; }

.visually-hidden,
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 250; padding: 10px 14px;
  color: #fff; background: var(--ink); border-radius: 7px; text-decoration: none;
}
.skip-link:focus { top: 14px; }

/* Shared editorial primitives */
.card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.98);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.eyebrow,
.section-kicker,
.category:not(body) {
  color: var(--orange-dark);
  font-size: clamp(7px, .8vw, 11.5px);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: clamp(7px, .75vw, 11px); margin: 0 0 clamp(15px, 1.55vw, 22px); color: #717171; }
.eyebrow-dot { width: clamp(6px, .55vw, 8px); height: clamp(6px, .55vw, 8px); border-radius: 50%; background: var(--orange); }
.section-kicker { margin: 0 0 clamp(7px, .7vw, 10px); }
.category:not(body) { display: block; }
.accent-link {
  display: inline-flex; align-items: center; gap: clamp(9px, .9vw, 13px);
  color: var(--orange-dark); font-size: clamp(9px, 1.08vw, 16px); font-weight: 720;
  text-decoration: none;
}
.accent-link:hover { color: #c94e00; }
.accent-link .icon { width: 1.35em; height: 1.35em; transition: transform .18s ease; }
.accent-link:hover .icon { transform: translateX(3px); }
.primary-button {
  display: inline-flex; align-items: center; gap: clamp(9px, 1vw, 14px);
  min-height: clamp(28px, 3vw, 43px); padding: 0 clamp(13px, 1.25vw, 18px);
  color: #fff; background: var(--orange); border-radius: clamp(5px, .55vw, 8px);
  box-shadow: 0 8px 16px rgba(255,101,0,.14); font-size: clamp(9px, 1.05vw, 15px);
  font-weight: 720; text-decoration: none; transition: background .18s ease, transform .18s ease;
}
.primary-button:hover { background: var(--orange-dark); transform: translateY(-1px); }
.primary-button .icon { width: 1.2em; height: 1.2em; }
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(8px, .9vw, 13px);
  color: var(--muted); font-size: clamp(7px, .87vw, 12.5px);
}
.meta > span { display: inline-flex; align-items: center; gap: clamp(4px, .4vw, 6px); }
.meta .icon { width: 1.15em; height: 1.15em; }
.meta .meta-dot::before { content: "·"; margin-right: clamp(3px, .35vw, 5px); color: #bcbcbc; }
.meta-item { display: inline-flex; align-items: center; gap: clamp(4px, .4vw, 6px); margin: 0; }
.meta-item > * { margin: 0; }
.meta-item > .icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
/* Core emits archive metadata as sibling Groups, unlike the spans in the
   approved HTML. Limit the separator to archive cards: the Home lead and
   single-post utility have their own, intentionally different rhythm. */
.feed-card .post-meta > .meta-item + .meta-item::before {
  content: "·";
  margin-right: clamp(3px, .35vw, 5px);
  color: #bcbcbc;
  flex: 0 0 auto;
}
.desktop-break { display: initial; }

/* Floating bilingual header */
.site-header { position: sticky; top: clamp(8px, 1vw, 14px); z-index: 100; padding-top: clamp(10px, 1.25vw, 18px); transform: translateX(-9px); }
.nav-shell {
  height: clamp(44px, 5.2vw, 75px); padding-inline: clamp(17px, 2.15vw, 31px);
  display: flex; align-items: center; gap: clamp(10px, 1.25vw, 18px);
  background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.98);
  border-radius: clamp(8px, .9vw, 13px); box-shadow: 0 11px 31px rgba(31,31,31,.085);
  backdrop-filter: blur(12px);
}
.wordmark {
  position: relative; width: clamp(137px, 11.2vw, 161px); height: clamp(22px, 1.8vw, 26px);
  display: inline-flex; flex: 0 0 auto; text-decoration: none;
}
.site-header .wordmark { width: 149px; height: 24px; }
@media (min-width: 1200px) {
  .site-header .wordmark { width: 174px; height: 28px; }
}
@media (min-width: 1360px) {
  .site-header .wordmark { width: 199px; height: 32px; }
}
.wordmark::before {
  content: ""; position: absolute; inset: 0;
  background: url("../icons/jm-wordmark-color.svg") left center / contain no-repeat;
}
.site-header .wordmark::before { content: none; }
.site-header .wordmark-image {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: left center;
}
.wordmark-javier,
.wordmark-megias {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.45vw, 21px); }
.desktop-nav > a,
.lang-switch a,
.lang-switch span {
  position: relative; padding-block: clamp(16px, 1.8vw, 26px);
  color: #181818; font-size: clamp(9.5px, 1.08vw, 15.5px); font-weight: 650;
  text-decoration: none; white-space: nowrap;
}
.desktop-nav > a:hover,
.desktop-nav > a:focus-visible { color: var(--orange-dark); }
.desktop-nav > a[aria-current="page"]::after,
.lang-switch [aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: clamp(11px, 1.18vw, 17px);
  height: 2px; border-radius: 2px; background: var(--orange);
}
.nav-separator { width: 1px; height: clamp(18px, 1.8vw, 26px); background: #dededc; }
.lang-switch { display: flex; align-items: center; gap: clamp(8px, .8vw, 12px); }
.lang-switch a, .lang-switch span { font-size: clamp(9px, .95vw, 13.5px); letter-spacing: .04em; }
.blog-es-only { display: inline-flex; align-items: center; gap: 6px; }
.es-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.es-only { color: #949494; font-size: clamp(7px, .7vw, 10px); letter-spacing: .1em; }
.icon-button {
  width: clamp(27px, 2.8vw, 40px); height: clamp(27px, 2.8vw, 40px);
  display: inline-grid; place-items: center; flex: 0 0 auto; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.icon-button:hover, .icon-button:focus-visible { background: #f1f1ef; }
.icon-button .icon { width: clamp(14px, 1.4vw, 20px); height: clamp(14px, 1.4vw, 20px); }
.menu-button { display: none; margin-left: auto; }
.mobile-panel { display: none; }

/* Hero */
.home-main { padding-top: clamp(20px, 2.3vw, 34px); }
.hero {
  position: relative; height: clamp(294px, 35.7vw, 514px); min-height: 0;
  display: grid; grid-template-columns: 61% 39%; align-items: end;
  padding-inline: clamp(20px, 2.45vw, 35px); overflow: hidden;
}
.hero-copy { align-self: center; padding-bottom: clamp(16px, 2vw, 29px); position: relative; z-index: 2; transform: translateY(clamp(9px, 1.15vw, 17px)); }
.hero h1 {
  margin: 0; max-width: 13.3em; font-size: clamp(36px, 4.45vw, 64px);
  font-family: var(--sans); line-height: 1.12; letter-spacing: -.048em; font-weight: 680;
}
.underline, u {
  text-decoration-line: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: clamp(2px, .25vw, 4px); text-underline-offset: clamp(5px, .55vw, 8px);
  text-decoration-skip-ink: none;
}
.hero-utility {
  margin: clamp(15px, 1.7vw, 25px) 0 0;
  color: #4b4b4b;
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 540;
  line-height: 1.35;
  letter-spacing: -.022em;
}
.hero-description { max-width: 37em; margin: clamp(12px, 1.25vw, 18px) 0 clamp(13px, 1.4vw, 20px); color: var(--text); font-size: clamp(8px, 1vw, 14.5px); line-height: 1.72; }
.hero-portrait {
  position: absolute; top: -9px; right: clamp(82px, 9.9vw, 143px);
  width: auto; height: clamp(398px, 48.3vw, 696px);
  object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 20px rgba(0,0,0,.045));
}
.hero-actions { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 20px); flex-wrap: wrap; }
.hero-socials { display: flex; align-items: center; gap: clamp(6px, .55vw, 8px); }
.hero-socials a {
  width: clamp(31px, 2.9vw, 42px); height: clamp(31px, 2.9vw, 42px);
  display: grid; place-items: center; color: #4f4f4f; background: rgba(255,255,255,.72);
  border: 1px solid #dededb; border-radius: 50%; text-decoration: none; transition: .18s ease;
}
.hero-socials a:hover, .hero-socials a:focus-visible { color: var(--orange-dark); border-color: #ffb17d; background: #fff; transform: translateY(-1px); }
.hero-socials .icon { width: 58%; height: 58%; stroke-width: 1.8; }
.hero-socials .brand-icon { fill: currentColor; stroke: none; }
.hero-socials .brand-glyph { font-size: clamp(11px, 1vw, 14px); font-weight: 800; line-height: 1; letter-spacing: -.07em; }

/* Featured article and newsletter */
.featured { overflow: hidden; margin-bottom: clamp(9.6px, 1.08vw, 15.6px); }
.featured-main {
  display: grid; grid-template-columns: 48.4% 1fr; gap: clamp(36px, 4.35vw, 63px);
  padding: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) clamp(6px, .75vw, 11px); align-items: stretch;
}
.featured-image { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center center; background: #efefeb; border-radius: clamp(7px, .75vw, 11px); }
.featured-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(15px, 1.9vw, 27px) clamp(19px, 2.3vw, 33px) clamp(11px, 1.3vw, 19px) 0; }
.featured-copy h2 {
  margin: clamp(7px, .75vw, 11px) 0 clamp(11px, 1.25vw, 18px);
  font-size: clamp(23px, 2.76vw, 40px); line-height: 1.1; letter-spacing: -.042em;
}
.featured-copy .meta { padding: clamp(8px, .85vw, 12px) 0 clamp(11px, 1.15vw, 17px); }
.featured-copy > p { margin: 0 0 clamp(12px, 1.2vw, 18px); color: #676767; font-size: clamp(8.5px, 1.08vw, 15.5px); line-height: 1.72; }
.newsletter-strip {
  min-height: clamp(66px, 8vw, 115px); display: grid; grid-template-columns: 1fr minmax(0, .94fr);
  align-items: center; gap: clamp(22px, 2.6vw, 38px);
  padding: clamp(14px, 1.35vw, 20px) clamp(22px, 2.35vw, 34px);
  border: 1px solid rgba(255,255,255,.98); border-radius: var(--radius); background: rgba(255,255,255,.97);
}
.newsletter-floating { margin-top: clamp(12px, 1.26vw, 18px); margin-bottom: clamp(12px, 1.26vw, 18px); box-shadow: 0 clamp(8px, 1vw, 15px) clamp(25px, 3vw, 43px) rgba(30,30,30,.075); }
.newsletter-intro { display: grid; grid-template-columns: clamp(36px, 3.7vw, 53px) 1fr; align-items: center; gap: clamp(10px, 1vw, 15px); }
.newsletter-icon {
  width: clamp(36px, 3.7vw, 53px); height: clamp(36px, 3.7vw, 53px); display: grid; place-items: center;
  border: 1px solid #e7e7e5; border-radius: 50%; background: #f5f5f3;
}
.newsletter-icon .icon { width: 48%; height: 48%; }
.newsletter-intro strong { display: block; margin-bottom: clamp(3px, .3vw, 5px); font-size: clamp(13px, 1.48vw, 21px); line-height: 1.15; letter-spacing: -.02em; }
.newsletter-intro small { display: block; color: #6f6f6f; font-size: clamp(9px, 1.02vw, 15px); line-height: 1.45; }
.newsletter-strip.newsletter-editorial {
  position: relative;
  min-height: clamp(100px, 9.8vw, 142px);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr);
  gap: clamp(28px, 3.4vw, 49px);
  padding: clamp(17px, 1.75vw, 25px) clamp(24px, 2.75vw, 40px);
  border-top: 0;
  border-color: #d7d7d2;
  background: #e2e2de;
  box-shadow: 0 clamp(9px, 1.1vw, 16px) clamp(27px, 3.2vw, 46px) rgba(30,30,30,.09);
}
.newsletter-editorial .newsletter-intro {
  grid-template-columns: clamp(48px, 4.7vw, 68px) minmax(0, 1fr);
  gap: clamp(16px, 1.7vw, 25px);
}
.newsletter-editorial .newsletter-icon {
  width: clamp(48px, 4.7vw, 68px);
  height: clamp(48px, 4.7vw, 68px);
  background: rgba(255,255,255,.78);
  border-color: #dbdbd7;
}
.newsletter-editorial .newsletter-icon .icon { width: 46%; height: 46%; stroke-width: 1.8; }
.newsletter-copy { min-width: 0; }
.newsletter-kicker {
  margin: 0 0 clamp(5px, .45vw, 7px);
  color: var(--orange-dark);
  font-size: clamp(8px, .82vw, 11.8px);
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.1;
  text-transform: uppercase;
}
.newsletter-title {
  margin: 0;
  font-size: clamp(18px, 2.05vw, 29.5px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.newsletter-copy > p:last-child {
  margin: clamp(7px, .65vw, 10px) 0 0;
  color: #5f5f5c;
  font-size: clamp(10px, 1.05vw, 15px);
  line-height: 1.42;
}
.newsletter-editorial .newsletter-form input,
.newsletter-editorial .newsletter-form button { min-height: clamp(40px, 4vw, 57px); }
.newsletter-editorial .newsletter-form input {
  background: rgba(255,255,255,.92);
  border-color: #d5d5d1;
  font-size: clamp(10px, 1.05vw, 15px);
}
.newsletter-editorial .newsletter-form button { padding-inline: clamp(17px, 1.75vw, 25px); font-size: clamp(10px, 1.08vw, 15.5px); }
.newsletter-editorial .form-note { margin-top: 1px; font-size: clamp(7px, .78vw, 11px); }
.newsletter-form { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: clamp(8px, .8vw, 12px); }
.newsletter-form input,
.search-form input {
  width: 100%; min-width: 0; min-height: clamp(29px, 3vw, 43px); padding-inline: clamp(10px, 1vw, 15px);
  color: var(--ink); background: #fafafa; border: 1px solid #dededc; border-radius: clamp(5px, .5vw, 8px); outline: none;
  font-size: clamp(8.5px, .98vw, 14px);
}
.newsletter-form input:focus,
.search-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,101,0,.12); }
.newsletter-form button,
.search-form button {
  min-height: clamp(29px, 3vw, 43px); padding: 0 clamp(14px, 1.4vw, 20px); border: 0;
  border-radius: clamp(5px, .5vw, 8px); color: #fff; background: var(--orange); font-size: clamp(8.5px, 1vw, 14.5px); font-weight: 720; cursor: pointer;
}
.form-note { grid-column: 1 / -1; min-height: 1em; color: #8a8a8a; font-size: clamp(6.5px, .75vw, 10.5px); }
.form-note.success { color: #2d6d3d; font-weight: 650; }

/* V1.1: subscriptions are completed on Substack, never captured locally. */
.substack-cta {
  width: min(100%, 260px);
  min-width: 0;
  justify-self: end;
}
.substack-cta-link {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 8px;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 10px 22px rgba(221,82,0,.17);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.substack-cta-link:hover,
.substack-cta-link:focus-visible {
  color: #fff;
  background: var(--orange-dark);
  box-shadow: 0 13px 26px rgba(203,74,0,.22);
  transform: translateY(-1px);
}
.substack-cta-link .icon { width: 19px; height: 19px; flex: 0 0 auto; }

/* Main editorial card */
.editorial-hub { margin-top: clamp(9.6px, 1.08vw, 15.6px); overflow: hidden; }
.hub-inner { padding: clamp(22px, 2.45vw, 35px) clamp(20px, 2.25vw, 33px) 0; }
.hub-inner > h2 { margin: 0 0 clamp(20px, 2.2vw, 32px); font-size: clamp(18px, 2.12vw, 30.5px); line-height: 1.1; letter-spacing: -.04em; }
.essential-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.12vw, 31px); }
.article-card { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.article-card img { width: 100%; aspect-ratio: 1.48; object-fit: cover; object-position: center center; background: #efefeb; border-radius: clamp(7px, .75vw, 11px); }
.article-card .category { margin-top: clamp(13px, 1.4vw, 20px); }
/* Categories in the curated Home modules are compact editorial labels, not
   reading-column links. Keep their orange hierarchy without the browser's
   default link underline. */
.essential-grid .wp-block-post-terms a,
.recent-grid .wp-block-post-terms a,
.essential-grid .category,
.recent-grid .category { text-decoration: none; }
.article-card h3 { margin: clamp(8px, .72vw, 10px) 0 clamp(8px, .85vw, 12px); font-size: clamp(14px, 1.68vw, 24px); line-height: 1.12; letter-spacing: -.035em; }
.article-card > p { min-height: 5.1em; margin: clamp(10px, 1.05vw, 15px) 0 clamp(13px, 1.5vw, 22px); color: #686868; font-size: clamp(8.5px, 1.04vw, 15px); line-height: 1.68; }
.article-card .accent-link { margin-top: auto; }
.recent { margin-top: clamp(35px, 4.1vw, 59px); }
.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.12vw, 31px); }
.recent-card { display: grid; grid-template-columns: 42% 1fr; gap: clamp(10px, 1vw, 15px); align-items: start; }
.recent-card img { width: 100%; aspect-ratio: .95; object-fit: cover; object-position: center center; background: #efefeb; border-radius: clamp(6px, .65vw, 9px); }
.recent-card h3 { margin: clamp(6px, .55vw, 8px) 0 clamp(9px, .8vw, 12px); font-size: clamp(10px, 1.25vw, 18px); line-height: 1.12; letter-spacing: -.026em; }
.recent-card .meta { display: grid; gap: 3px; }
.all-articles { display: flex; justify-content: center; padding: clamp(25px, 3vw, 43px) 0 clamp(23px, 2.7vw, 39px); }
.territories { border-top: 1px solid var(--line); padding: clamp(22px, 2.45vw, 35px) 0 clamp(26px, 3.05vw, 44px); }
.territories.territories-first { border-top: 0; border-bottom: 1px solid var(--line); }
.territories-heading { padding-inline: clamp(20px, 2.25vw, 33px); }
.territory-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(15px, 1.55vw, 22px); }
.territory { display: grid; grid-template-columns: clamp(31px, 3.2vw, 46px) 1fr; gap: clamp(10px, 1.05vw, 15px); padding: 0 clamp(20px, 2.15vw, 31px); text-decoration: none; }
.territory + .territory { border-left: 1px solid var(--line); }
.territory > .icon { width: clamp(31px, 3.2vw, 46px); height: clamp(31px, 3.2vw, 46px); color: var(--orange); stroke-width: 1.55; }
.territory h3 { margin: 0 0 clamp(7px, .8vw, 12px); font-size: clamp(13px, 1.52vw, 22px); line-height: 1.12; letter-spacing: -.03em; }
.territory p { min-height: 4.7em; margin: 0 0 clamp(11px, 1.25vw, 18px); color: #6d6d6d; font-size: clamp(7.5px, .92vw, 13px); line-height: 1.68; }
.territory .territory-link { color: var(--orange-dark); font-size: clamp(8px, .98vw, 14px); font-weight: 720; }

/* Experience and roles */
.experience { margin-top: clamp(10.8px, 1.2vw, 16.8px); margin-bottom: 0; overflow: hidden; }
.experience-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(35px, 4.2vw, 61px); padding: clamp(16px, 1.75vw, 25px) clamp(20px, 2.25vw, 33px) clamp(13px, 1.4vw, 20px); align-items: start; }
.experience h2 { margin: 0 0 clamp(11px, 1.2vw, 17px); font-size: clamp(18px, 2.22vw, 32px); line-height: 1.12; letter-spacing: -.04em; }
.experience p { margin: 0; color: #666; font-size: clamp(8.5px, 1.04vw, 15px); line-height: 1.68; }
.experience-media img { width: 100%; aspect-ratio: 2.35; object-fit: cover; border-radius: clamp(7px, .75vw, 11px); }
.experience-media .accent-link { margin-top: clamp(10px, 1.05vw, 15px); }
.roles { display: grid; grid-template-columns: 1fr 1fr; margin: 0 clamp(20px, 2.25vw, 33px) clamp(9px, 1.1vw, 16px); border-top: 1px solid var(--line); }
.role { display: grid; grid-template-columns: clamp(48px, 4.85vw, 70px) 1fr; gap: clamp(18px, 2vw, 29px); padding: clamp(14px, 1.7vw, 24px) clamp(28px, 3.3vw, 48px) 0 0; }
.role + .role { border-left: 1px solid var(--line); padding-left: clamp(31px, 3.65vw, 53px); padding-right: 0; }
.role > .icon { width: clamp(48px, 4.85vw, 70px); height: clamp(48px, 4.85vw, 70px); color: var(--orange); stroke-width: 1.45; }
.role h3 {
  margin: 0 0 clamp(7px, .75vw, 11px);
  font-size: clamp(13px, 1.52vw, 22px);
  /* Preserve the approved Home card rhythm instead of inheriting the
     tighter global theme.json h3 line-height. */
  line-height: 1.5;
}
.role p { min-height: 4.35em; margin-bottom: clamp(7px, .72vw, 10px); line-height: 1.58; }

/* English institutional content */
.english-overview { margin-bottom: clamp(10.8px, 1.2vw, 16.8px); padding: clamp(28px, 3vw, 43px) clamp(24px, 2.8vw, 40px); }
.english-overview h2 { margin: 0 0 clamp(21px, 2.3vw, 33px); font-size: clamp(20px, 2.2vw, 32px); letter-spacing: -.04em; }
.english-territories { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.english-territory { padding: clamp(17px, 1.9vw, 27px); border: 1px solid var(--line); border-radius: clamp(8px, .8vw, 12px); background: #fff; }
.english-territory > .icon { width: clamp(32px, 3.2vw, 46px); height: clamp(32px, 3.2vw, 46px); color: var(--orange); }
.english-territory h3 { margin: clamp(12px, 1.2vw, 17px) 0 7px; font-size: clamp(14px, 1.45vw, 21px); }
.english-territory p { margin: 0; color: #666; font-size: clamp(8px, .75vw, 11px); line-height: 1.65; }
.spanish-writing { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(31px, 3.6vw, 52px); align-items: center; margin-bottom: clamp(10.8px, 1.2vw, 16.8px); padding: clamp(10px, 1.1vw, 16px); }
.spanish-writing img { width: 100%; aspect-ratio: 1.53; object-fit: cover; border-radius: clamp(7px, .75vw, 11px); }
.spanish-writing-copy { padding-right: clamp(19px, 2vw, 29px); }
.language-badge { display: inline-flex; align-items: center; gap: 7px; color: #888; font-size: clamp(7px, .65vw, 9px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.spanish-writing h2 { margin: 10px 0; font-size: clamp(22px, 2.45vw, 35px); line-height: 1.1; letter-spacing: -.04em; }
.spanish-writing p { color: #666; font-size: clamp(8px, .75vw, 11px); line-height: 1.7; }

/* Footer */
.site-footer { margin-top: clamp(10px, 1.2vw, 17px); background: var(--footer); color: #fff; }
.footer-inner { display: grid; grid-template-columns: 1.3fr .75fr .85fr .75fr 1.3fr; gap: clamp(25px, 2.9vw, 42px); padding: clamp(20px, 2vw, 29px) 0 clamp(18px, 1.7vw, 25px); }
.footer-brand .wordmark::before { background-image: url("../icons/jm-wordmark-on-dark.svg"); }
.footer-brand p,
.footer-newsletter p { margin: clamp(9px, .9vw, 13px) 0 0; color: #bababa; font-size: clamp(10px, .96vw, 13.8px); line-height: 1.7; }
.footer-heading { display: block; margin-bottom: clamp(10px, 1vw, 14px); color: var(--orange); font-size: clamp(8.5px, .86vw, 12.4px); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.footer-links { display: grid; gap: clamp(7px, .66vw, 9.5px); }
.footer-links a { color: #d1d1d1; font-size: clamp(10px, .96vw, 13.8px); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.socials { display: flex; gap: 7px; margin-top: clamp(10px, 1.1vw, 16px); }
.socials a { width: clamp(21px, 2vw, 29px); height: clamp(21px, 2vw, 29px); display: grid; place-items: center; border-radius: 50%; color: #d3d3d3; background: #353535; text-decoration: none; }
.socials .icon { width: 42%; height: 42%; }
.socials .brand-icon { width: 52%; height: 52%; fill: currentColor; stroke: none; }
.socials .brand-glyph { font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: -.07em; }
.brand-glyph { display: block; font-size: 54%; font-weight: 750; line-height: 1; letter-spacing: -.05em; }
.footer-newsletter > strong { font-size: clamp(12px, 1.08vw, 15.5px); }
.footer-newsletter .newsletter-form { margin-top: clamp(12px, 1.25vw, 18px); grid-template-columns: 1fr clamp(31px, 3vw, 43px); gap: 0; }
.footer-newsletter .newsletter-form input { border-color: #4b4b4b; border-radius: 6px 0 0 6px; color: #fff; background: #3a3a3a; font-size: clamp(10px, .9vw, 13px); }
.footer-newsletter .newsletter-form button { padding: 0; border-radius: 0 6px 6px 0; }
.footer-newsletter .form-note { color: #aaa; font-size: clamp(9px, .78vw, 11px); }
.footer-newsletter .substack-cta { width: min(100%, 236px); margin-top: clamp(12px, 1.25vw, 18px); justify-self: stretch; }
.footer-newsletter .substack-cta-link { min-height: clamp(34px, 2.8vw, 40px); gap: 8px; padding-inline: 11px; font-size: clamp(8.5px, .75vw, 11px); box-shadow: none; }
.footer-newsletter .substack-cta-link .icon { width: 17px; height: 17px; }
.footer-newsletter-link { display: none; margin-top: clamp(12px, 1.25vw, 18px); }
.jm-footer-cta .footer-newsletter .newsletter-form { display: none; }
.jm-footer-cta .footer-newsletter-link { display: inline-flex; }
@media (max-width: 700px) {
  .jm-footer-cta .footer-newsletter { padding-top: 0; }
  .jm-home-en .footer-newsletter-home-en { padding-top: 0; }
}

/* Search dialog */
.search-panel {
  position: fixed; inset: 0; z-index: 180; display: grid; align-items: start; padding-top: 100px;
  background: rgba(20,20,20,.33); opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.search-panel.is-open { opacity: 1; pointer-events: auto; }
.search-dialog { width: min(700px, calc(100% - 36px)); margin-inline: auto; padding: 22px; background: #fff; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.22); }
.search-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.search-head strong { color: var(--orange-dark); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.search-form { display: flex; gap: 10px; }
.search-results { display: none; margin-top: 13px; padding: 12px 14px; border-radius: 8px; color: #666; background: #f5f5f3; font-size: 13px; }
.search-results.is-visible { display: block; }
.mock-toast { position: fixed; left: 50%; bottom: 24px; z-index: 220; max-width: min(520px, calc(100% - 32px)); padding: 12px 16px; color: #fff; background: #202020; border-radius: 9px; box-shadow: 0 16px 50px rgba(0,0,0,.25); font-size: 13px; opacity: 0; transform: translate(-50%, 18px); pointer-events: none; transition: .2s ease; }
.mock-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) and (min-width: 701px) {
  .desktop-nav { gap: 12px; }
  .nav-shell { gap: 9px; }
  .desktop-nav > a { font-size: 10.5px; }
  .featured-main { gap: 28px; }
}

@media (min-width: 1100px) {
  .newsletter-strip { min-height: 136px; padding-block: 22px; }
  .newsletter-strip.newsletter-editorial { min-height: 142px; padding-block: 24px; }
}

@media (max-width: 700px) {
  :root { --shell-width: calc(100% - 20px); --content-width: calc(100% - 20px); --radius: 12px; }
  .container, .content-width { left: 0; }
  .site-header { top: 7px; padding-top: 7px; }
  .nav-shell { height: 54px; padding-inline: 14px; border-radius: 11px; }
  .desktop-nav, .nav-shell > .nav-separator, .nav-shell > .lang-switch, .nav-shell > .search-button { display: none; }
  .menu-button { display: inline-grid; width: 38px; height: 38px; }
  .mobile-panel {
    position: fixed; inset: 0; z-index: 90; display: block; padding: 82px 20px 24px;
    background: rgba(247,247,246,.985); opacity: 0; transform: translateY(-105%);
    transition: opacity .22s ease, transform .22s ease;
  }
  .mobile-panel.is-open { opacity: 1; transform: translateY(0); }
  .mobile-nav { display: grid; }
  .mobile-nav > a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 650; letter-spacing: -.03em; text-decoration: none; }
  .mobile-nav .blog-es-only { justify-content: space-between; }
  .mobile-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
  .mobile-tools .lang-switch { display: flex; }
  .mobile-tools .lang-switch a, .mobile-tools .lang-switch span { padding: 10px 0; font-size: 12px; }
  .home-main { padding-top: 35px; }
  .hero { height: auto; min-height: auto; grid-template-columns: 1fr; padding: 17px 6px 0; }
  .hero-copy { padding: 0; transform: none; }
  .hero h1 { max-width: 9.5em; font-size: clamp(39px, 11.5vw, 52px); line-height: 1.04; }
  .eyebrow { margin-bottom: 17px; font-size: 8px; }
  .underline, u { text-decoration-thickness: 3px; text-underline-offset: 5px; }
  .hero-utility { margin-top: 20px; font-size: 19px; }
  .hero-description { max-width: 36em; margin: 14px 0 18px; font-size: 12px; }
  .primary-button { min-height: 40px; padding-inline: 16px; font-size: 12px; }
  .hero-portrait { position: static; width: auto; height: 320px; margin-top: 6px; transform: none; }
  .featured { margin-top: 9px; }
  .featured-main { grid-template-columns: 1fr; gap: 13px; padding: 9px; }
  .featured-image { aspect-ratio: 1.53; border-radius: 9px; }
  .featured-copy { padding: 8px 13px 18px; }
  .section-kicker, .category { font-size: 8px; }
  .featured-copy h2 { margin: 8px 0 15px; font-size: 31px; }
  .featured-copy > p { font-size: 12px; }
  .meta { font-size: 9px; }
  .accent-link { font-size: 11px; }
  .newsletter-strip { grid-template-columns: 1fr; gap: 15px; padding: 18px 16px; }
  .newsletter-floating { margin-top: 12px; margin-bottom: 12px; }
  .newsletter-intro { grid-template-columns: 42px 1fr; }
  .newsletter-icon { width: 42px; height: 42px; }
  .newsletter-intro strong { font-size: 17px; }
  .newsletter-intro small { font-size: 11px; }
  .newsletter-form { grid-template-columns: 1fr; gap: 8px; }
  .newsletter-form input, .newsletter-form button { min-height: 40px; font-size: 11px; }
  .newsletter-strip.newsletter-editorial { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .newsletter-editorial .newsletter-intro { grid-template-columns: 48px 1fr; gap: 14px; }
  .newsletter-editorial .newsletter-icon { width: 48px; height: 48px; }
  .newsletter-editorial .newsletter-title { font-size: 22px; }
  .newsletter-editorial .newsletter-copy > p:last-child { font-size: 12px; }
  .newsletter-editorial .newsletter-form { grid-template-columns: 1fr; }
  .newsletter-editorial .newsletter-form input,
  .newsletter-editorial .newsletter-form button { min-height: 44px; font-size: 12px; }
  .newsletter-editorial .substack-cta { width: 100%; justify-self: stretch; }
  .newsletter-editorial .substack-cta-link { min-height: 48px; padding-inline: 17px; font-size: 13px; }
  .hub-inner { padding: 28px 16px 0; }
  .hub-inner > h2 { margin-bottom: 22px; font-size: 27px; }
  .essential-grid, .recent-grid, .territory-grid, .english-territories { grid-template-columns: 1fr; }
  .essential-grid { gap: 34px; }
  .article-card img { border-radius: 9px; }
  .article-card .category { margin-top: 13px; }
  .article-card h3 { font-size: 21px; }
  .article-card > p { min-height: 0; font-size: 11px; }
  .recent { margin-top: 36px; }
  .recent-grid { gap: 19px; }
  .recent-card { grid-template-columns: 105px 1fr; gap: 13px; }
  .recent-card img { height: 105px; aspect-ratio: 1; }
  .recent-card h3 { font-size: 15px; }
  .territories-heading { padding-inline: 16px; }
  .territory-grid { margin-top: 10px; }
  .territory { grid-template-columns: 42px 1fr; gap: 14px; padding: 22px 16px; }
  .territory + .territory { border-left: 0; border-top: 1px solid var(--line); }
  .territory > .icon { width: 42px; height: 42px; }
  .territory h3 { font-size: 19px; }
  .territory p { min-height: 0; font-size: 11px; }
  .territory .territory-link { font-size: 10px; }
  .experience-top, .spanish-writing { grid-template-columns: 1fr; gap: 22px; }
  .experience-top { padding: 24px 16px 16px; }
  .experience h2 { font-size: 27px; }
  .experience p { font-size: 11px; }
  .experience-media .accent-link { margin-top: 11px; }
  .roles { grid-template-columns: 1fr; margin-inline: 16px; }
  .role { grid-template-columns: 48px 1fr; gap: 15px; padding: 21px 0 0; }
  .role + .role { margin-top: 18px; padding: 21px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .role > .icon { width: 46px; height: 46px; }
  .role h3 { font-size: 18px; }
  .role p { min-height: 0; }
  .spanish-writing { padding: 9px; }
  .spanish-writing-copy { padding: 8px 12px 18px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 31px 24px; padding: 36px 0; }
  .footer-brand, .footer-newsletter { grid-column: 1 / -1; }
  .footer-brand p, .footer-newsletter p, .footer-links a { font-size: 12px; }
  .footer-heading { font-size: 10px; }
  .socials a { width: 29px; height: 29px; }
  .footer-newsletter .newsletter-form { grid-template-columns: 1fr 42px; }
  .footer-newsletter .substack-cta { width: min(100%, 236px); }
  .footer-newsletter .substack-cta-link { min-height: 44px; font-size: 11px; }
  .search-form { display: grid; }
  .search-form input, .search-form button { min-height: 42px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* WordPress block-theme adapters. The selectors above remain copied from the approved mockups. */
.wp-site-blocks { overflow: clip; }
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.wp-block-post-title a { color: inherit; text-decoration: none; }
.wp-block-post-title a:hover { color: var(--orange-dark); }
.wp-block-button.primary-button { padding: 0; background: transparent; box-shadow: none; }
.wp-block-button.primary-button .wp-block-button__link { border-radius: clamp(5px, .55vw, 8px); }
.home-page-content:empty { display: none; }
.page-main, .institutional-main { min-height: 55vh; }
.page-main-en { padding-top: clamp(20px, 2.3vw, 34px); }
.page-main-en > .page-content {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
.page-main-en > .page-content .english-overview h2,
.page-main-en > .page-content .english-territory h3 {
  font-family: var(--sans);
  line-height: 1.5;
}
.page-main-en > .page-content .english-overview h2,
.page-main-en > .page-content .english-territory h3,
.page-main-en > .page-content .spanish-writing h2,
.page-main-en > .page-content .experience h2,
.page-main-en > .page-content .role h3 {
  font-family: var(--sans);
  font-weight: 700;
}
.page-main-en > .page-content p:empty { display: none; }
.page-main-en > .page-content p:has(> .accent-link:only-child) { display: contents; }
/* Core serializes standalone CTA links inside paragraphs.  Once the wrapper
   becomes display:contents, its prose line-height would otherwise leak into
   the inline-flex CTA and move its baseline away from the approved HTML. */
.page-main-en > .page-content .accent-link { line-height: 1.5; }
/* The Home reference has the CTA as a direct child. On desktop Core adds a
   paragraph whose trailing whitespace changes the grid track by a fraction.
   Preserve the reference's one-pixel baseline contribution without changing
   the tablet/mobile flow, where Core already rasterizes it identically. */
@media (min-width: 981px) {
  .page-main-en > .page-content .experience-top > div:first-child > p:has(> .accent-link:only-child) {
    display: block;
    margin: 0;
    padding-bottom: 1px;
    font-size: 0;
    line-height: 0;
  }
}
.page-main-en > .page-content p:has(> .hero-portrait) { display: contents; }
.page-main-en > .page-content .hero-portrait + br,
.page-main-en > .page-content .hero-actions > br { display: none; }
.page-main-en > .page-content .role h3 {
  font-family: var(--sans);
  line-height: 1.5;
}
.page-intro { padding-top: clamp(42px, 5vw, 72px); }
.page-content { margin-top: clamp(24px, 3vw, 44px); margin-bottom: clamp(60px, 7vw, 100px); }
.post-share { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 32px auto; }
.post-share a, .post-share button { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 8px 13px; font: inherit; text-decoration: none; cursor: pointer; }
.related-posts { margin-top: clamp(42px, 5vw, 72px); }
.related-posts > h2 { font-size: clamp(25px, 2.5vw, 36px); }
.blog-query .wp-block-post-template, .archive-results .wp-block-post-template { display: grid; gap: clamp(14.4px, 1.38vw, 20.4px); }
.blog-query { margin-top: clamp(13px, 1.2vw, 18px); }
.feed-card { overflow: hidden; }
.feed-card .wp-block-post-featured-image { margin: 0; }
.feed-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; background: #efefeb; }
.feed-card .wp-block-post-excerpt__more-link { color: var(--orange-dark); font-weight: 720; text-decoration: none; }
.archive-search .wp-block-search__inside-wrapper, .archive-search-band .wp-block-search__inside-wrapper { border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.archive-search .wp-block-search__button, .archive-search-band .wp-block-search__button { margin: 0; }
.legal-document { margin-top: clamp(42px, 4.5vw, 65px); margin-bottom: clamp(60px, 7vw, 100px); }
.legal-document > .wp-block-post-content { font-family: var(--sans); }
.post-comments { width: var(--content-width); margin: clamp(50px, 6vw, 86px) auto; }
.post-comments .comment-card { align-items: flex-start; }

@media (min-width: 701px) {
  .feed-card { display: grid; grid-template-columns: minmax(220px, .38fr) minmax(0, .62fr); min-height: clamp(205px, 19.2vw, 277px); }
  .feed-card .wp-block-post-featured-image { height: 100%; }
  /* The approved archive cards centre their copy in the available grid track
     and reserve only its terminal edge.  Padding on all four sides moves the
     editorial baseline away from the image without changing the card frame. */
  .feed-card .feed-copy { padding: 0 clamp(13px, 1.65vw, 24px) 0 0; }
  body:not(.paged) .blog-query .wp-block-post-template > li:first-child .feed-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(280px, 31vw, 448px);
    margin-bottom: clamp(16px, 1.8vw, 26px);
  }
  body:not(.paged) .blog-query .wp-block-post-template > li:first-child .feed-copy h2 {
    font-size: clamp(29px, 3.5vw, 50px);
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  /* Only the Spanish Home reference reserves this fractional media frame.
     The English composition follows the intrinsic image height. */
  body.home .experience-media { min-height: 151px; }
}

@media (max-width: 700px) {
  .post-share { flex-wrap: wrap; }
  .feed-card .feed-copy { padding: 18px; }
}

/* Home V1: adapters for the semantic wrappers emitted by Core blocks. */
html body,
body .wp-site-blocks {
  font-size: 16px;
}

.home-main > .hero {
  margin-block-start: 0;
}

body .site-header {
  transform: translate(-9px, clamp(7px, 1vw, 14px));
}

/* A template part adds an outer <header> around the filesystem part. Make
   that element own the floating/sticky geometry, just as the approved HTML
   header does, instead of compensating with a translated inner wrapper. */
header.wp-block-template-part {
  position: sticky;
  top: clamp(8px, 1vw, 14px);
  z-index: 100;
  left: -9px;
  width: var(--shell-width);
  margin-inline: auto;
  padding-top: clamp(10px, 1.25vw, 18px);
  transform: translateX(-9px);
}

header.wp-block-template-part > .site-header {
  position: static;
  top: auto;
  z-index: auto;
  left: 0;
  width: 100%;
  margin-inline: 0;
  padding-top: 0;
  transform: none;
}

/* Paged archive references intentionally start their floating shell at the
   visual origin while preserving its approved padded height, but unlike page
   one they let it leave the viewport while the archive cards are traversed.
   The relative wrapper retains the initial flow geometry without pinning it
   over the cards. */
body.blog.paged header.wp-block-template-part {
  position: relative;
  transform: translateY(calc(-1 * clamp(8px, 1vw, 14px)));
}

/* At tablet width a fractional Y transform can preserve the box geometry but
   rasterise every header glyph differently. Anchor the paged shell natively
   at the visual origin instead. */
@media (max-width: 980px) and (min-width: 701px) {
  body.blog.paged header.wp-block-template-part {
    top: 0;
    transform: none;
  }
}

.hero-socials > .hero-social-placeholder {
  width: clamp(31px, 2.9vw, 42px);
  height: clamp(31px, 2.9vw, 42px);
  display: grid;
  place-items: center;
  color: #4f4f4f;
  background: rgba(255,255,255,.72);
  border: 1px solid #dededb;
  border-radius: 50%;
  font-size: 38%;
}

.home-main .wp-block-query .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
}

.featured > .wp-block-post-template,
.featured > .wp-block-post-template > li {
  display: contents;
}

.featured-main {
  display: grid;
  grid-template-columns: 48.4% 1fr;
  gap: clamp(36px, 4.35vw, 63px);
  padding: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) clamp(6px, .75vw, 11px);
}

.featured-image {
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: clip;
  background: transparent;
}

.featured-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.featured-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent;
  border-radius: clamp(7px, .75vw, 11px);
}

.featured-copy .wp-block-post-title a,
.article-card .wp-block-post-title a,
.recent-card .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.featured-copy .wp-block-post-terms a,
.article-card .wp-block-post-terms a,
.recent-card .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}

/* The primary category in the Home featured card is part of the metadata,
   not a standalone editorial label. Match the date/reading-time treatment
   while keeping the category link and its uppercase label. */
.home-main .featured-copy .wp-block-jm-primary-category {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.featured-copy .wp-block-post-title {
  min-height: 3.3em;
}

/* Core's post-terms block carries the generic paragraph rhythm.  In the
   approved lead card its kicker is a compact editorial label, and the title
   reserves precisely its three reference lines so changing published copy
   cannot move the structural divider, metadata or CTA. */
@media (min-width: 701px) {
  .home-main .featured-copy p.section-kicker.wp-block-paragraph {
    margin: 0 0 clamp(5.12px, .544vw, 7.68px);
  }

  .home-main .featured-copy .wp-block-post-title {
    min-height: 3.12em;
  }
}

/* The approved featured card keeps the headline in a deliberately narrow
   editorial measure.  Core wraps the real post-title link at the full copy
   column, which changes the visible line rhythm even when the card frame is
   identical.  A character-based measure is content-agnostic and follows the
   typography across breakpoints without inserting title-specific line breaks. */
.home-main .featured-copy .wp-block-post-title > a {
  display: block;
  max-width: 309px;
}

@media (max-width: 980px) and (min-width: 701px) {
  .home-main .featured-copy .wp-block-post-title > a { max-width: 185.2px; }
}

@media (max-width: 700px) {
  .home-main .featured-copy .wp-block-post-title > a { max-width: 242px; }
}

.featured-copy .wp-block-post-title a:hover,
.article-card .wp-block-post-title a:hover,
.recent-card .wp-block-post-title a:hover {
  color: var(--orange-dark);
}

.featured-excerpt,
.featured-excerpt p {
  margin: 0;
}

.featured-excerpt {
  margin-bottom: clamp(12px, 1.2vw, 18px);
  color: #676767;
  font-size: clamp(8.5px, 1.08vw, 15.5px);
  line-height: 1.72;
}

.featured-copy > .wp-block-read-more {
  width: fit-content;
}

/* The lead-card CTA is a flex item.  The reference lets that item retain the
   editorial column width, which also fixes the arrow's visual anchor when
   Core supplies the real read-more link. */
.home-main .featured-copy > .wp-block-read-more {
  width: auto;
  align-self: stretch;
}

/* The approved card CTA stretches across its editorial column, unlike the
   compact featured-card link above. */
.article-card > .wp-block-read-more {
  width: auto;
}

.newsletter-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0;
}

.newsletter-cta-prompt,
.newsletter-cta-button {
  min-height: clamp(40px, 4vw, 57px);
  display: flex;
  align-items: center;
}

.newsletter-cta-prompt {
  min-width: 0;
  padding-inline: clamp(12px, 1.2vw, 17px);
  color: #747471;
  background: rgba(255,255,255,.92);
  border: 1px solid #d5d5d1;
  border-right: 0;
  border-radius: clamp(5px, .5vw, 8px) 0 0 clamp(5px, .5vw, 8px);
  font-size: clamp(10px, 1.05vw, 15px);
}

.newsletter-cta-button {
  justify-content: center;
  padding-inline: clamp(17px, 1.75vw, 25px);
  color: #fff;
  background: var(--orange);
  border-radius: 0 clamp(5px, .5vw, 8px) clamp(5px, .5vw, 8px) 0;
  font-size: clamp(10px, 1.08vw, 15.5px);
  font-weight: 720;
  text-decoration: none;
}

.newsletter-cta-button:hover,
.newsletter-cta-button:focus-visible {
  background: var(--orange-dark);
}

.newsletter-cta .form-note {
  margin-top: 3px;
}

.territory-icon,
.role-icon {
  display: grid;
  place-items: center;
  color: var(--orange);
  line-height: 1;
}

.territory-icon {
  width: clamp(31px, 3.2vw, 46px);
  height: clamp(31px, 3.2vw, 46px);
  font-size: clamp(25px, 2.6vw, 38px);
}

.territory > .icon {
  width: clamp(31px, 3.2vw, 46px);
  height: clamp(31px, 3.2vw, 46px);
  color: var(--orange);
  stroke-width: 1.55;
}

.essential-query,
.recent-query {
  margin: 0;
}

.essential-grid,
.recent-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.essential-grid > li,
.recent-grid > li {
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.article-card .wp-block-post-title,
.recent-card .wp-block-post-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.article-card .wp-block-post-title { -webkit-line-clamp: 4; }
.recent-card .wp-block-post-title { -webkit-line-clamp: 3; }

.article-card .wp-block-post-featured-image,
.recent-card .wp-block-post-featured-image {
  margin: 0;
}

.article-card .wp-block-post-featured-image {
  /* The approved HTML keeps this editorial thumbnail in a 138 px frame at
     every breakpoint.  Core injects height:100% on the image; constrain its
     wrapper first so the real media fills exactly the approved frame. */
  height: 138px;
  overflow: hidden;
  border-radius: clamp(7px, .75vw, 11px);
  flex: 0 0 138px;
}

.article-card .wp-block-post-featured-image a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.article-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  /* The approved direct <img> has no painted background. With cover it is
     fully occupied; keeping Core's grey fallback leaks through antialiased
     rounded corners and changes the visible card edge. */
  background: transparent;
  display: block;
}

.article-card .wp-block-post-excerpt,
.article-card .wp-block-post-excerpt p {
  margin: 0;
}

.article-card .wp-block-post-excerpt {
  min-height: 5.1em;
  margin: clamp(10px, 1.05vw, 15px) 0 clamp(13px, 1.5vw, 22px);
  color: #686868;
  font-size: clamp(8.5px, 1.04vw, 15px);
  line-height: 1.68;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.article-card .post-meta {
  min-height: 1.7em;
}

.recent-card .wp-block-post-featured-image,
.recent-card .wp-block-post-featured-image a,
.recent-card .wp-block-post-featured-image img {
  width: 100%;
}

.recent-card {
  height: 100%;
  overflow: hidden;
}

.recent-card .wp-block-post-featured-image {
  height: 104px;
  overflow: hidden;
  border-radius: clamp(6px, .65vw, 9px);
  align-self: start;
}

.recent-card .wp-block-post-featured-image a,
.recent-card .wp-block-post-featured-image img {
  height: 100% !important;
}

.recent-card .wp-block-post-featured-image a {
  display: block;
  overflow: hidden;
}

.recent-card .wp-block-post-featured-image img {
  display: block;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent;
}

.recent-card .wp-block-post-title {
  display: -webkit-box !important;
  margin: clamp(6px, .55vw, 8px) 0 clamp(9px, .8vw, 12px);
  font-size: clamp(10px, 1.25vw, 18px);
  line-height: 1.12;
  letter-spacing: -.026em;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 701px) {
  .recent-grid {
    height: clamp(104px, 9.56vw, 137.640625px);
  }

  /* The three curated slots in the approved recent-reading module reserve
     two, three and two title lines respectively.  WordPress may supply
     longer titles, but must not move metadata, media or the next section. */
  .recent-grid > li:nth-child(1) .wp-block-post-title,
  .recent-grid > li:nth-child(3) .wp-block-post-title {
    height: 2.24em;
    -webkit-line-clamp: 2;
  }

  .recent-grid > li:nth-child(2) .wp-block-post-title {
    height: 3.36em;
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 700px) {
  .recent-grid {
    height: 355.390625px;
    grid-template-rows: 105px 107.390625px 105px;
  }

  .recent-card .wp-block-post-featured-image {
    height: 105px;
  }
}

.recent-card .meta {
  display: grid;
  gap: 3px;
}

/* The reference presents two compact textual metadata rows in this module.
   Keep real dates, reading time and comments, but not the archive-card icons
   or an extra row that would alter the fixed card rhythm. */
.recent-card .wp-block-post-date,
.recent-card .recent-meta-details,
.recent-card .recent-meta-details > * {
  margin: 0;
}

.recent-card .recent-meta-details {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, .35vw, 5px);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.recent-card .recent-meta-details .wp-block-post-comments-count {
  display: inline;
}

/* Existing front-page content can carry the previous three meta-item
   wrappers. Render that non-persistent markup with the same two textual rows
   until the page is naturally re-saved, so an active theme alone is enough to
   retain the approved composition. */
.recent-card .meta > .meta-item > .icon {
  display: none;
}

.recent-card .meta > .meta-item {
  display: inline-flex;
  gap: 0;
  margin: 0;
}

.recent-card .meta > .meta-item:first-child {
  display: flex;
  margin-bottom: 3px;
}

.recent-card .meta > .meta-item:nth-child(3)::before {
  content: "·";
  margin: 0 clamp(3px, .35vw, 5px);
  color: #bcbcbc;
}

.all-articles {
  margin: clamp(21px, 2.3vw, 33px) 0 clamp(24px, 2.7vw, 39px);
  text-align: center;
}

/* The Home reference connects the recent-reading grid directly to its CTA.
   Keep the generic archive spacing elsewhere, but do not insert a second
   margin in this fixed editorial module. */
.recent .all-articles {
  margin: 0;
}

.experience-media > p {
  margin: 0;
}

/* The approved Home CTA is a direct child of the media column. Core wraps
   the same link in a paragraph, whose editorial prose line-height changes
   the icon baseline at every breakpoint. Preserve the semantic paragraph in
   markup while removing only its layout box. */
body.home .experience-media > p:has(> .accent-link) {
  display: contents;
}

body.home .experience-media .accent-link {
  line-height: 1.5;
}

.role-icon {
  width: clamp(48px, 4.85vw, 70px);
  height: clamp(48px, 4.85vw, 70px);
  border: 1px solid var(--orange);
  border-radius: 50%;
  font-size: clamp(25px, 2.7vw, 39px);
}

.role > .icon {
  width: clamp(48px, 4.85vw, 70px);
  height: clamp(48px, 4.85vw, 70px);
  color: var(--orange);
  stroke-width: 1.45;
}

@media (min-width: 701px) {
  /* Keep the approved featured-card rhythm when a real excerpt is shorter
     than the reference copy.  The post content stays untouched. */
  .featured-excerpt {
    min-height: 5.16em;
  }

  .page-main-en .experience {
    height: clamp(287.25px, 31.26vw, 450.16px);
  }

  .featured-main {
    min-height: clamp(266.5px, calc(30.9vw + .015625px), 445.075625px);
  }

  /* The front-page featured card has a deliberately fixed editorial rhythm.
     Keep its real query content within the same responsive frame as the
     approved mockup instead of letting a fractional content measurement move
     the following newsletter. */
  .home-main .featured-main {
    min-height: clamp(215.865px, calc(25.029vw + .083025px), 360.500625px);
    height: clamp(215.865px, calc(25.029vw + .083025px), 360.500625px);
  }

  .home-main .featured-copy {
    min-height: 0;
    padding-top: clamp(7.04px, .896vw, 12.8px);
    padding-bottom: clamp(5.12px, .608vw, 8.96px);
  }
  .home-main .featured-image { min-height: 0; }

  .home-main .featured-copy .wp-block-post-title {
    margin-top: clamp(3.2px, .352vw, 5.12px);
    margin-bottom: clamp(4.8px, .544vw, 7.68px);
    font-size: clamp(21px, 2.18vw, 31.36px);
    line-height: 1.04;
  }

  .home-main .featured-copy .meta {
    padding-top: clamp(3.84px, .416vw, 5.76px);
    padding-bottom: clamp(5.12px, .544vw, 7.68px);
  }

  .home-main .featured-excerpt { margin-bottom: clamp(5.12px, .544vw, 7.68px); }

  .essential-grid {
    height: clamp(331.33px, 31.93vw, 459.78px);
  }

  .recent {
    height: clamp(183px, 18.76vw, 270.08px);
    overflow: hidden;
  }

  .home-main .experience {
    height: clamp(304.38px, 29.58vw, 425.84px);
  }
}

@media (min-width: 981px) {
  /* Core's post-title wrapper is one device subpixel shorter than the
     reference heading. Keep the following structural divider on its approved
     baseline while allowing the title itself to remain real content. */
  .featured-copy .wp-block-post-title {
    min-height: calc(3.3em + .015625px);
  }
}

@media (max-width: 980px) and (min-width: 701px) {
  .featured-main { gap: 28px; }
}

.jm-footer-navigation {
  display: contents;
}

.jm-footer-navigation__heading {
  margin: 0 0 clamp(10px, 1vw, 14px);
  color: var(--orange);
  font-size: clamp(8.5px, .86vw, 12.4px);
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.jm-footer-navigation ul {
  display: grid;
  gap: clamp(7px, .66vw, 9.5px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm-footer-navigation a {
  display: block;
  color: #d1d1d1;
  font-size: clamp(10px, .96vw, 13.8px);
  line-height: 1.5;
  text-decoration: none;
}

.jm-footer-navigation li {
  font-size: clamp(10px, .96vw, 13.8px);
  line-height: 1.5;
}

.footer-brand .wp-block-social-links {
  justify-content: flex-start;
  margin: clamp(10px, 1.1vw, 16px) 0 0;
  padding: 0;
}

.site-footer.has-global-padding {
  padding-inline: 0;
}

.site-footer > .footer-inner.container {
  width: var(--shell-width);
  max-width: none;
}

.footer-tagline-en,
.footer-newsletter-en,
.footer-note-en,
.footer-newsletter-home-en {
  display: none;
}

.jm-lang-en .footer-tagline-es,
.jm-lang-en .footer-newsletter-es {
  display: none;
}

.jm-lang-en .footer-tagline-en,
.jm-lang-en .footer-newsletter-en,
.jm-lang-en .footer-note-en {
  display: block;
}

.jm-home-en .footer-note-en { display: none; }
.jm-home-en .footer-newsletter-home-en { display: block; }

.footer-brand {
  position: relative;
}

.footer-social-placeholder {
  position: absolute;
  left: clamp(58px, 5.5vw, 80px);
  bottom: 0;
  width: clamp(21px, 2vw, 29px);
  height: clamp(21px, 2vw, 29px);
  display: grid;
  place-items: center;
  color: #d3d3d3;
  background: #353535;
  border-radius: 50%;
}

.footer-social-placeholder .icon {
  width: 42%;
  height: 42%;
}

.socials > .footer-social-placeholder {
  position: static;
  width: clamp(21px, 2vw, 29px);
  height: clamp(21px, 2vw, 29px);
  flex: 0 0 auto;
}

.footer-newsletter-cta > a .icon { width: 42%; height: 42%; }

.footer-newsletter > .wp-block-heading {
  margin: 0;
  color: #fff;
  font-size: clamp(12px, 1.08vw, 15.5px) !important;
}

@media (min-width: 701px) {
  /* The reference uses an inline <strong>; reproduce its baseline rhythm
     while retaining the semantic heading emitted by the block template. */
  .footer-newsletter > .wp-block-heading {
    margin-top: 6px;
    line-height: 1.5 !important;
  }
}

@media (min-width: 981px) {
  /* Desktop uses a shorter vertical offset than the compact tablet footer. */
  .footer-newsletter > .wp-block-heading { margin-top: 1px; }
}

.footer-newsletter-cta {
  display: grid;
  grid-template-columns: 1fr clamp(31px, 3vw, 43px);
  gap: 0;
  margin-top: clamp(12px, 1.25vw, 18px);
}

.footer-newsletter-cta > span,
.footer-newsletter-cta > a {
  min-height: clamp(29px, 3vw, 43px);
  display: flex;
  align-items: center;
}

.footer-newsletter-cta > span {
  padding-inline: clamp(10px, 1vw, 15px);
  color: #ddd;
  background: #3a3a3a;
  border: 1px solid #4b4b4b;
  border-radius: 6px 0 0 6px;
  font-size: clamp(10px, .9vw, 13px);
}

.footer-newsletter-cta > a {
  justify-content: center;
  color: #fff;
  background: var(--orange);
  border-radius: 0 6px 6px 0;
  font-weight: 800;
  text-decoration: none;
}

.footer-newsletter-cta .form-note {
  margin-top: 3px;
}

@media (max-width: 700px) {
  /* Most approved inner templates keep the 10 px shell margin.  Home and the
     404 utility surface deliberately use the left-shifted floating shell;
     scope that exception to their semantic body classes rather than moving
     every template part. */
  header.wp-block-template-part {
    left: 0;
    top: 7px;
    padding-top: 7px;
    transform: none;
  }

  body.home header.wp-block-template-part,
  body.jm-home-en header.wp-block-template-part,
  body.page header.wp-block-template-part,
  body.error404 header.wp-block-template-part {
    transform: translateX(-9px);
  }

  body.blog.paged header.wp-block-template-part {
    transform: translateY(-7px);
  }

  .page-main-en { padding-top: 35px; }

  body .site-header {
    transform: none !important;
  }

  .featured > .wp-block-post-template,
  .featured > .wp-block-post-template > li {
    display: block;
  }

  .featured-main {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 9px;
  }

  .home-main .featured-main {
    height: calc((100vw - 55px) / 1.8888889 + 273.6px);
    grid-template-rows: calc((100vw - 55px) / 1.8888889) minmax(0, 1fr);
    min-height: 0;
  }

  /* Query Loop excerpts are real and can be very short. Match the approved
     three-line editorial reserve so their length cannot re-centre the card's
     category, metadata or CTA. */
  .featured-excerpt,
  .featured-excerpt .wp-block-post-excerpt__excerpt {
    font-size: 12px;
    line-height: 1.72;
  }

  .featured-excerpt {
    min-height: 61.875px;
  }

  .featured-excerpt .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  /* Core's generic reserve is taller than the three reference lines at 390
     px. Keep the Home featured rhythm on the approved baseline without
     depending on the real title's length. */
  body.home .featured-copy .wp-block-post-title {
    min-height: 3.18em;
  }

  .featured-image,
  .featured-image img {
    aspect-ratio: 1.53;
    border-radius: 9px;
  }

  .home-main .featured-image,
  .home-main .featured-image img {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto !important;
  }

  .home-main .featured-copy {
    min-height: 0;
    padding: 6px 13px 12px;
    overflow: clip;
  }

  .home-main .featured-copy .wp-block-post-title {
    margin: 6px 0 11px;
    font-size: 30px;
    line-height: 1.06;
  }

  .home-main .featured-copy p.section-kicker.wp-block-paragraph {
    margin: 0 0 8px;
  }

  .home-main .featured-copy .wp-block-post-title > a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .home-main .featured-copy .meta { padding: 5px 0 8px; }
  .home-main .featured-excerpt { margin-bottom: 8px; }

  /* Core renders the featured image inside a figure. Its inherited 100%
     height would otherwise resolve from the source image's 3:2 ratio. */
  .featured-image { height: auto; }
  .featured-image.wp-block-post-featured-image { aspect-ratio: 1.53 !important; }

  .newsletter-cta {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .newsletter-strip.newsletter-editorial { height: auto; }

  /* The article uses the same two-row mobile editorial callout as the
     rendered reference. Keep it distinct from the taller Home callout. */
  .newsletter-strip.newsletter-editorial.newsletter-inline { height: auto; }

  .newsletter-cta-prompt,
  .newsletter-cta-button {
    min-height: 44px;
    border: 0;
    border-radius: 7px;
    font-size: 12px;
  }

  .newsletter-cta-prompt {
    border: 1px solid #d5d5d1;
  }

  .territory-icon {
    width: 42px;
    height: 42px;
    font-size: 34px;
  }

  .territory > .icon { width: 42px; height: 42px; }

  .article-card .wp-block-post-excerpt {
    min-height: 0;
    font-size: 11px;
  }

  .essential-grid {
    /* This is a curated three-slot editorial module, not a generic archive.
       Its row rhythm follows the approved 390 px composition while each slot
       still receives live WordPress content. */
    height: 1141.859375px;
    grid-template-rows: 334.4375px 381.46875px 357.953125px;
  }

  .recent {
    height: 438.89px;
    overflow: hidden;
  }

  .role-icon {
    width: 46px;
    height: 46px;
    font-size: 29px;
  }

  .role > .icon { width: 46px; height: 46px; }

  .jm-footer-navigation {
    display: contents;
  }

  .jm-footer-navigation__heading {
    font-size: 10px;
    line-height: 1.5;
  }

  .jm-footer-navigation a,
  .jm-footer-navigation li {
    font-size: 12px;
    line-height: 1.5;
  }

  .footer-newsletter > .wp-block-heading {
    line-height: 1.5;
  }

  .footer-newsletter {
    padding-top: 6px;
  }

  /* The 404 recovery footer uses the CTA variant. Core emits its label as a
     block heading, whereas the approved 404 uses an inline strong. Match that
     inline baseline without changing the footer track: advance the label and
     copy together, then spend the same six pixels from the link's preceding
     margin. Other utility documents retain their independently validated
     footer rhythm. */
  body.error404 .footer-newsletter > .wp-block-heading {
    margin-top: 6px;
  }

  body.error404 .footer-newsletter-link {
    margin-top: 6px;
  }

  /* The approved mobile footer renders every social control in the same
     29 px circular frame. The YouTube placeholder is a span rather than a
     link, so it does not inherit the reference's `.socials a` breakpoint. */
  .socials > .footer-social-placeholder {
    width: 29px;
    height: 29px;
  }

  .footer-newsletter-cta > span,
  .footer-newsletter-cta > a {
    min-height: 40px;
  }

  .footer-newsletter-cta .form-note {
    margin-top: 0;
  }
}