/*
Theme Name: Move To Italy Now
Theme URI: https://movingtoitalynow.com/
Description: Move To Italy Now — child theme carrying the site's header, footer, and full design system. Sits on Twenty Twenty-One. Do not delete the parent theme.
Author: Move To Italy Now
Version: 1.7
Template: twentytwentyone
Text Domain: movetoitalynow
*/

/* ============================================================
   1. RESET + PAGE CANVAS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
html, body { margin: 0; padding: 0; max-width: 100%; }
body {
  background: var(--mtin-limestone);
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  color: var(--mtin-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--mtin-sea); }
a:hover { color: var(--mtin-terracotta); }

/* Screen-reader-only helper (WordPress convention) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}


/* ============================================================
   1b. BRAND TOKENS (used by the page templates)
   ============================================================ */
:root {
  --white: #FFFFFF;
  --limestone-50: #FCFAF4;
  --limestone-100: #F6F0E4;
  --limestone-200: #EDE4D3;
  --limestone-300: #E0D4BE;
  --notte-700: #1E4C57;
  --notte-800: #163B45;
  --sea-600: #2A6982;
  --sea-700: #1F4D5F;
  --sea-200: #BCD6DE;
  --terracotta-200: #E7C9B4;
  --terracotta-500: #C98358;
  --terracotta-600: #B96A43;
  --ink-500: #6B6152;
  --ink-900: #201C17;

  --surface-dark: #163B45;
  --text-strong: #201C17;
  --text-secondary: #6B6152;
  --text-on-dark: #F6F0E4;
  --text-on-dark-muted: #9FB9BF;
  --border-hairline: #E0D4BE;
  --border-on-dark: rgba(226,240,242,0.18);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;
  --type-lead: 1.375rem;
  --type-body-lg: 1.125rem;
  --type-body-sm: 0.9375rem;
  --type-caption: 0.8125rem;

  --content-max: 1280px;
  --section-pad-y: 128px;
  --shadow-md: 0 12px 32px rgba(42,38,32,0.12);
}

/* ============================================================
   1c. BUTTONS (page templates)
   ============================================================ */
.mtin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 36px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.mtin-btn:active { transform: translateY(1px); }
.mtin-btn-md { padding: 13px 26px; font-size: 14px; }
.mtin-btn-primary { background: var(--sea-600); color: #fff; border-color: var(--sea-600); }
.mtin-btn-primary:hover { background: var(--sea-700); border-color: var(--sea-700); color: #fff; }
.mtin-btn-ondark { background: var(--limestone-100); color: var(--ink-900); border-color: var(--limestone-100); font-weight: 800; }
.mtin-btn-ondark:hover { background: #fff; color: var(--ink-900); }
.mtin-btn-outline-ondark { background: transparent; color: var(--limestone-100); border-color: rgba(246,240,228,0.5); }
.mtin-btn-outline-ondark:hover { background: rgba(246,240,228,0.08); border-color: var(--limestone-100); color: var(--limestone-100); }

/* Section eyebrow used on the page templates (left aligned variant) */
.mtin-eyebrow-left { display: flex; align-items: center; gap: 14px; }
.mtin-eyebrow-left .rule { width: 40px; height: 1.5px; background: var(--terracotta-600); }
.mtin-eyebrow-left .txt {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta-600);
}
.mtin-eyebrow-left.on-dark .rule { background: var(--terracotta-500); }
.mtin-eyebrow-left.on-dark .txt { color: var(--terracotta-500); }


/* ============================================================
   1d. LIVING THE DREAM — rows and click-to-play players
   ============================================================ */
.ltd-row { padding: 120px 64px; position: relative; overflow: hidden; }
.ltd-inner {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 80px; align-items: center; position: relative;
}
.ltd-media { position: relative; }
.ltd-panel { position: absolute; border-radius: 2px; }
.ltd-player {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border-radius: 2px; background: var(--notte-800);
  box-shadow: 0 18px 44px rgba(32,28,23,0.22);
}
.ltd-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: none; background: none; cursor: pointer; display: block;
}
.ltd-face img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1); transition: transform 600ms cubic-bezier(0.2,0.6,0.2,1);
}
.ltd-face:hover img { transform: scale(1.03); }
.ltd-face .ltd-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,42,49,0.10), rgba(15,42,49,0.55));
}
.ltd-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 86px; height: 86px; border-radius: 999px;
  background: rgba(252,250,244,0.94);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
  transition: background 240ms cubic-bezier(0.2,0.6,0.2,1);
}
.ltd-play::before {
  content: ''; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%,-50%);
  border-style: solid; border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--sea-700);
  transition: border-color 240ms ease;
}
.ltd-face:hover .ltd-play { background: var(--terracotta-600); }
.ltd-face:hover .ltd-play::before { border-left-color: #FCFAF4; }
.ltd-player iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block;
}
.ltd-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(4rem, 7vw, 7rem); line-height: 0.8;
  letter-spacing: -0.03em; margin-bottom: -14px;
}
@media (max-width: 1024px) {
  .ltd-row { padding: 88px 40px; }
  .ltd-inner { gap: 52px; }
}
@media (max-width: 900px) {
  .ltd-inner { grid-template-columns: 1fr; gap: 40px; }
  .ltd-media { order: 1 !important; }
  .ltd-info { order: 2 !important; }
  .ltd-panel { left: -16px !important; right: -16px !important; top: -16px !important; bottom: 26px !important; }
}
@media (max-width: 720px) {
  .ltd-row { padding: 64px 22px; }
  .ltd-num { font-size: 3.4rem; }
  .ltd-play { width: 62px; height: 62px; }
  .ltd-play::before { border-width: 11px 0 11px 18px; }
}

/* ============================================================
   2. HEADER / NAVIGATION
   ============================================================ */
.mtin-header { position: relative; z-index: 5; }
.mtin-nav-bar {
  background: var(--mtin-limestone-raised);
  border-bottom: 1px solid var(--mtin-hairline);
  box-shadow: 0 1px 2px rgba(42,38,32,0.06);
}
.mtin-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 32px;
  height: 136px;
}
.mtin-logo { display: flex; align-items: center; flex: none; }
.mtin-nav-logo { height: 104px; width: auto; display: block; }
.mtin-nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-left: auto;
}
.mtin-nav-links a {
  font-family: 'Mulish', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mtin-ink);
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1.5px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.mtin-nav-links a:hover {
  color: var(--mtin-sea);
  border-bottom-color: var(--mtin-terracotta);
}
.mtin-nav-cta-wrap { flex: none; display: flex; align-items: center; }
.mtin-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  background: var(--mtin-sea-mid);
  color: #FFFFFF;
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 140ms ease;
}
.mtin-nav-cta:hover { background: var(--mtin-sea); color: #FFFFFF; }

/* Mobile menu */
.mtin-burger {
  display: none;
  position: fixed; top: 20px; right: 18px; z-index: 60;
  width: 48px; height: 48px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
  background: var(--mtin-limestone-raised);
  border: 1px solid var(--mtin-hairline);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(42,38,32,0.08);
}
.mtin-burger span {
  display: block; width: 24px; height: 2px;
  background: var(--mtin-ink-strong);
  transition: transform 140ms ease, opacity 140ms ease;
}
.mtin-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mtin-burger.is-open span:nth-child(2) { opacity: 0; }
.mtin-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mtin-drawer {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  background: var(--mtin-notte);
  padding: 88px 22px 26px;
  flex-direction: column;
  box-shadow: 0 28px 60px rgba(32,28,23,0.20);
}
.mtin-drawer.is-open { display: flex; }
.mtin-drawer a {
  padding: 18px 0;
  border-bottom: 1px solid rgba(226,240,242,0.18);
  font-family: 'Mulish', sans-serif;
  font-size: 1rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none;
  color: var(--mtin-limestone);
}
.mtin-drawer a:last-child { border-bottom: none; color: var(--mtin-terracotta-light); }

/* ============================================================
   3. POST / PAGE HEAD
   ============================================================ */
.mtin-post-head { background: var(--mtin-limestone); padding: 84px 24px 0; }
.mtin-post-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 4.6vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--mtin-ink-strong);
  margin: 0 0 22px;
}
.mtin-post-body { background: var(--mtin-limestone); padding: 0 0 8px; }

/* ============================================================
   4. FOOTER
   ============================================================ */
.mtin-footer {
  background: var(--mtin-notte);
  color: var(--mtin-limestone);
  padding: 76px 32px 44px;
}
.mtin-footer-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 28px;
}
.mtin-footer-logo { height: 112px; width: auto; display: block; }
.mtin-footer p {
  font-family: 'Mulish', sans-serif;
  font-size: 1.125rem;
  line-height: 1.62;
  color: #9FB9BF;
  max-width: 54ch;
  margin: 0;
  text-wrap: pretty;
}
.mtin-socials { display: flex; align-items: center; gap: 34px; margin-top: 4px; }
.mtin-socials a, .mtin-socials span { display: inline-flex; }
.mtin-socials svg { width: 22px; height: 22px; fill: var(--mtin-limestone); transition: fill 140ms ease; }
.mtin-socials a:hover svg { fill: var(--mtin-terracotta-light); }
/* Placeholder channels. Icons stay in place, with no link, until the accounts
   exist. Dimmed so they do not read as broken links. */
.mtin-socials span { cursor: default; }
.mtin-socials span svg { opacity: 0.42; }
.mtin-footer-legal {
  max-width: 1280px;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(226,240,242,0.18);
  text-align: center;
  font-family: 'Mulish', sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: #9FB9BF;
}

/* ============================================================
   5. BLOG HUB (post listing)
   ============================================================ */
.mtin-hub { background: var(--mtin-limestone); padding: 84px 24px 96px; }
.mtin-hub-head { max-width: 1280px; margin: 0 auto 56px; }
.mtin-hub-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--mtin-ink-strong);
  margin: 0;
}
.mtin-hub-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 48px;
}
.mtin-card { display: block; text-decoration: none; }
.mtin-card-media {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border-radius: 2px; background: var(--mtin-notte);
  box-shadow: 0 18px 44px rgba(32,28,23,0.22);
}
/* Height is stated three ways on purpose. An optimizer that strips or
   rewrites one of these still leaves the image filling its box, instead of
   collapsing to natural height and showing the dark panel underneath. */
.mtin-card-media img {
  position: absolute !important; inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important; height: 100% !important;
  min-height: 100%; max-width: none;
  object-fit: cover; object-position: center; display: block;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1);
  transition: transform 600ms cubic-bezier(0.2,0.6,0.2,1);
}
.mtin-card:hover .mtin-card-media img { transform: scale(1.03); }

/* Click-to-watch affordance. Same treatment as the Living the Dream player,
   but sized as a share of the thumbnail so it stays in proportion as the
   card narrows. The card is a link to the post, not an inline player. */
.mtin-card-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,42,49,0.10), rgba(15,42,49,0.55));
}
.mtin-card-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: clamp(44px, 15%, 86px); aspect-ratio: 1;
  border-radius: 999px; pointer-events: none;
  background: rgba(252,250,244,0.94);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
  transition: background 240ms cubic-bezier(0.2,0.6,0.2,1);
}
.mtin-card-play::before {
  content: ''; position: absolute; left: 53%; top: 50%;
  transform: translate(-50%,-50%);
  width: 32%; height: 40%;
  background: var(--mtin-sea);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: background 240ms ease;
}
.mtin-card:hover .mtin-card-play { background: var(--mtin-terracotta); }
.mtin-card:hover .mtin-card-play::before { background: #FCFAF4; }
.mtin-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 1.375rem; line-height: 1.18;
  color: var(--mtin-ink-strong);
  margin: 18px 0 0;
  transition: color 140ms ease;
}
.mtin-card:hover .mtin-card-title { color: var(--mtin-sea); }
.mtin-pagination {
  max-width: 1280px; margin: 64px auto 0;
  font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* the_posts_pagination() wraps the links in div.nav-links, so the spacing
   must be applied there, not on the nav. */
.mtin-pagination .nav-links {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.mtin-pagination a, .mtin-pagination span {
  padding: 10px 16px; border: 1.5px solid var(--mtin-hairline);
  border-radius: 4px; text-decoration: none; color: var(--mtin-sea);
}
.mtin-pagination .current { background: var(--mtin-sea-mid); color: #fff; border-color: var(--mtin-sea-mid); }
/* WordPress emits the ellipsis as a span, which would otherwise inherit the
   bordered box above and read as a clickable page. */
.mtin-pagination .dots {
  border-color: transparent; color: var(--mtin-ink-soft, #6B6152);
  letter-spacing: 0.14em;
}

/* ============================================================
   6. BLOG POST CONTENT — everything below is the blog stylesheet
   ============================================================ */

/* Brand tokens. Declared on :root so the reusable blocks below
   (author bio, call to action) can read them too — they live
   OUTSIDE the post content wrapper. */
:root {
  --mtin-sea: #1F4D5F;
  --mtin-sea-mid: #2A6982;
  --mtin-terracotta: #B96A43;
  --mtin-terracotta-light: #C98358;
  --mtin-terracotta-wash: #E7C9B4;
  --mtin-notte: #163B45;
  --mtin-limestone: #F6F0E4;
  --mtin-limestone-raised: #FCFAF4;
  --mtin-limestone-sunken: #EDE4D3;
  --mtin-hairline: #E0D4BE;
  --mtin-ink: #2A2620;
  --mtin-ink-strong: #201C17;
  --mtin-ink-soft: #6B6152;
  --mtin-olive: #6E7049;
}

/* Required by the full-bleed video band in section 9. */
html { overflow-x: clip; }

/* ------------------------------------------------------------
   1. THE POST CANVAS
   Warm limestone page, centred editorial column.
   ------------------------------------------------------------ */
.entry-content,
.post-content,
.wp-block-post-content,
.single-post .entry-content {

  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  font-size: 1.1875rem;      /* 19px — comfortable long-form reading */
  line-height: 1.72;
  color: var(--mtin-ink);
  max-width: 51rem;          /* ~80 characters per line, less congested */
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   2. BODY COPY
   ------------------------------------------------------------ */
.entry-content p,
.post-content p,
.wp-block-post-content p {
  margin: 0 0 1.6rem;
  text-wrap: pretty;
}

/* The opening paragraph gets a larger, lighter lead treatment —
   the signature editorial "drop in" that sets the scene. */
.entry-content > p:first-of-type,
.post-content > p:first-of-type,
.wp-block-post-content > p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.68;
  font-weight: 400;
  color: #3A342C;
  margin-bottom: 1.75rem;
}

/* ------------------------------------------------------------
   3. HEADINGS — Playfair Display, oversized and confident
   ------------------------------------------------------------ */
.entry-content h1,
.post-content h1,
.wp-block-post-content h1,
.entry-title,
.wp-block-post-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--mtin-ink-strong);
  margin: 0 0 1.75rem;
}

/* H2 — major section break. Terracotta rule above, generous air. */
.entry-content h2,
.post-content h2,
.wp-block-post-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--mtin-ink-strong);
  margin: 3.75rem 0 1.25rem;
  padding-top: 1.75rem;
  position: relative;
}

/* Short terracotta rule — the signature section marker */
.entry-content h2::before,
.post-content h2::before,
.wp-block-post-content h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--mtin-terracotta);
}

/* H3 — subsection. Sea blue, no rule, tighter to its text. */
.entry-content h3,
.post-content h3,
.wp-block-post-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  line-height: 1.25;
  color: var(--mtin-sea);
  margin: 2.75rem 0 0.875rem;
}

/* H4 — smallest level. Letterspaced sans, reads as a label. */
.entry-content h4,
.post-content h4,
.wp-block-post-content h4 {
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mtin-terracotta);
  margin: 2.25rem 0 0.75rem;
}

/* ------------------------------------------------------------
   4. LINKS — sea blue, underlined on hover only
   ------------------------------------------------------------ */
.entry-content a,
.post-content a,
.wp-block-post-content a {
  color: var(--mtin-sea);
  text-decoration: none;
  border-bottom: 1.5px solid var(--mtin-terracotta-wash);
  transition: color 140ms ease, border-color 140ms ease;
}
.entry-content a:hover,
.post-content a:hover,
.wp-block-post-content a:hover {
  color: var(--mtin-terracotta);
  border-bottom-color: var(--mtin-terracotta);
}

/* ------------------------------------------------------------
   5. LISTS — terracotta markers, comfortable spacing
   ------------------------------------------------------------ */
.entry-content ul,
.entry-content ol,
.post-content ul,
.post-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
  margin: 0 0 1.75rem;
  padding-left: 1.5rem;
}
.entry-content li,
.post-content li,
.wp-block-post-content li {
  margin-bottom: 0.625rem;
  padding-left: 0.375rem;
}
.entry-content ul li::marker,
.post-content ul li::marker,
.wp-block-post-content ul li::marker {
  color: var(--mtin-terracotta);
}
.entry-content ol li::marker,
.post-content ol li::marker,
.wp-block-post-content ol li::marker {
  color: var(--mtin-terracotta);
  font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
}

/* ------------------------------------------------------------
   6. PULL QUOTES — Playfair italic on a warm panel
   ------------------------------------------------------------ */
.entry-content blockquote,
.post-content blockquote,
.wp-block-post-content blockquote,
.entry-content .wp-block-quote,
.post-content .wp-block-quote {
  margin: 2.75rem 0;
  padding: 2rem 2.25rem;
  background: var(--mtin-limestone-sunken);
  border: none;
  border-radius: 2px;
  position: relative;
}
.entry-content blockquote p,
.post-content blockquote p,
.wp-block-post-content blockquote p,
.entry-content .wp-block-quote p {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.42;
  color: var(--mtin-sea);
  margin: 0;
  text-wrap: pretty;
}
.entry-content blockquote cite,
.post-content blockquote cite,
.entry-content .wp-block-quote cite {
  display: block;
  margin-top: 1rem;
  font-family: 'Mulish', sans-serif;
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mtin-ink-soft);
}

/* ------------------------------------------------------------
   7. TABLES — notte header, striped rows, no heavy grid lines
   ------------------------------------------------------------ */
.entry-content table,
.post-content table,
.wp-block-post-content table,
.entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.75rem 0;
  font-family: 'Mulish', sans-serif;
  font-size: 1rem;
  background: var(--mtin-limestone-raised);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(42,38,32,0.08);
}
.entry-content table th,
.post-content table th,
.wp-block-post-content table th {
  background: var(--mtin-notte);
  color: #F6F0E4;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  padding: 1rem 1.25rem;
  border: none;
}
.entry-content table td,
.post-content table td,
.wp-block-post-content table td {
  padding: 1rem 1.25rem;
  border: none;
  border-bottom: 1px solid var(--mtin-hairline);
  vertical-align: top;
  line-height: 1.6;
}
.entry-content table tr:last-child td,
.post-content table tr:last-child td,
.wp-block-post-content table tr:last-child td {
  border-bottom: none;
}
.entry-content table tr:nth-child(even) td,
.post-content table tr:nth-child(even) td,
.wp-block-post-content table tr:nth-child(even) td {
  background: var(--mtin-limestone);
}
/* First column reads as the term being defined */
.entry-content table td:first-child,
.post-content table td:first-child,
.wp-block-post-content table td:first-child {
  font-weight: 700;
  color: var(--mtin-sea);
  white-space: nowrap;
}
/* Tables scroll rather than break on small screens */
.entry-content .wp-block-table,
.post-content .wp-block-table {
  overflow-x: auto;
  margin: 2.75rem 0;
}

/* ------------------------------------------------------------
   8. IMAGES & CAPTIONS — signature keyline frame
   ------------------------------------------------------------ */
.entry-content img,
.post-content img,
.wp-block-post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.entry-content figure,
.post-content figure,
.wp-block-post-content figure,
.entry-content .wp-block-image,
.post-content .wp-block-image {
  margin: 2.75rem 0;
  position: relative;
}
.entry-content figcaption,
.post-content figcaption,
.wp-block-post-content figcaption,
.entry-content .wp-block-image figcaption {
  font-family: 'Mulish', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mtin-ink-soft);
  margin-top: 0.75rem;
  text-align: left;
  letter-spacing: 0.01em;
}

/* Featured image above the post */
.wp-post-image,
.wp-block-post-featured-image img {
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(42,38,32,0.12);
}

/* ------------------------------------------------------------
   9. YOUTUBE VIDEOS — offset panel, poster, brand play button
   Matches the Living the Dream page treatment.
   Requires the companion .js file.
   ------------------------------------------------------------ */
.entry-content .mtin-video,
.post-content .mtin-video,
.wp-block-post-content .mtin-video {
  position: relative;
  margin: 10rem 0;
  aspect-ratio: 16 / 9;
  isolation: isolate;
}

/* Video as the post's opening element: pull the top margin in so the
   band's overhang clears the byline instead of overlapping the header. */
.entry-content > .mtin-video:first-child,
.post-content > .mtin-video:first-child,
.wp-block-post-content > .mtin-video:first-child,
.entry-content > .mtin-byline + .mtin-video,
.post-content > .mtin-byline + .mtin-video,
.wp-block-post-content > .mtin-byline + .mtin-video {
  margin-top: 9rem;
  margin-bottom: 9rem;
}

/* Full-bleed dark marine band: the article breaks into darkness
   for the video, then returns to limestone. */
.entry-content .mtin-video::after,
.post-content .mtin-video::after,
.wp-block-post-content .mtin-video::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  top: -88px;
  bottom: -88px;
  background: var(--mtin-notte);
  z-index: -2;
}

/* The offset panel, now a lighter marine so it reads on the band */
.entry-content .mtin-video::before,
.post-content .mtin-video::before,
.wp-block-post-content .mtin-video::before {
  content: '';
  position: absolute;
  top: -22px;
  bottom: 28px;
  left: -26px;
  right: 40px;
  background: #1E4C57;
  border-radius: 2px;
  z-index: -1;
}

.entry-content .mtin-video-face,
.post-content .mtin-video-face,
.wp-block-post-content .mtin-video-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: var(--mtin-notte);
  cursor: pointer;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(32,28,23,0.22);
}

.entry-content .mtin-video-poster,
.post-content .mtin-video-poster,
.wp-block-post-content .mtin-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1);
  transition: transform 600ms cubic-bezier(0.2,0.6,0.2,1);
}
.entry-content .mtin-video-face:hover .mtin-video-poster,
.post-content .mtin-video-face:hover .mtin-video-poster,
.wp-block-post-content .mtin-video-face:hover .mtin-video-poster {
  transform: scale(1.03);
}

/* Scrim so the play button always reads */
.entry-content .mtin-video-face::after,
.post-content .mtin-video-face::after,
.wp-block-post-content .mtin-video-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,42,49,0.06), rgba(15,42,49,0.42));
  pointer-events: none;
}

/* The brand play button */
.entry-content .mtin-video-play,
.post-content .mtin-video-play,
.wp-block-post-content .mtin-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: rgba(252,250,244,0.94);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
  z-index: 2;
  transition: background 240ms cubic-bezier(0.2,0.6,0.2,1);
}
.entry-content .mtin-video-play::before,
.post-content .mtin-video-play::before,
.wp-block-post-content .mtin-video-play::before {
  content: '';
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--mtin-sea);
  transition: border-color 240ms cubic-bezier(0.2,0.6,0.2,1);
}
.entry-content .mtin-video-face:hover .mtin-video-play,
.post-content .mtin-video-face:hover .mtin-video-play,
.wp-block-post-content .mtin-video-face:hover .mtin-video-play {
  background: var(--mtin-terracotta);
}
.entry-content .mtin-video-face:hover .mtin-video-play::before,
.post-content .mtin-video-face:hover .mtin-video-play::before,
.wp-block-post-content .mtin-video-face:hover .mtin-video-play::before {
  border-left-color: #FCFAF4;
}

/* The live player once clicked */
.entry-content .mtin-video-frame,
.post-content .mtin-video-frame,
.wp-block-post-content .mtin-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(32,28,23,0.22);
}

/* Fallback: if the companion script has not run, keep raw embeds tidy */
.entry-content .wp-block-embed,
.post-content .wp-block-embed,
.wp-block-post-content .wp-block-embed {
  margin: 3rem 0;
  padding: 0;
}
.entry-content .wp-block-embed iframe,
.post-content .wp-block-embed iframe,
.wp-block-post-content .wp-block-embed iframe,
.entry-content iframe[src*="youtube"],
.post-content iframe[src*="youtube"] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   10. DIVIDERS — an ornament, never a plain grey line
   ------------------------------------------------------------ */
.entry-content hr,
.post-content hr,
.wp-block-post-content hr,
.entry-content .wp-block-separator {
  border: none;
  height: auto;
  background: none;
  margin: 3.5rem auto;
  text-align: center;
  overflow: visible;
}
.entry-content hr::before,
.post-content hr::before,
.wp-block-post-content hr::before,
.entry-content .wp-block-separator::before {
  content: '· · ·';
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  color: var(--mtin-terracotta-light);
  line-height: 1;
}

/* ------------------------------------------------------------
   11. INLINE DETAILS
   ------------------------------------------------------------ */
.entry-content strong,
.post-content strong,
.wp-block-post-content strong {
  font-weight: 700;
  color: var(--mtin-ink-strong);
}
.entry-content em,
.post-content em,
.wp-block-post-content em {
  font-style: italic;
}
.entry-content code,
.post-content code,
.wp-block-post-content code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.875em;
  background: var(--mtin-limestone-sunken);
  padding: 0.15em 0.4em;
  border-radius: 2px;
  color: var(--mtin-sea);
}

/* ------------------------------------------------------------
   11a. BYLINE
   Baked into each post's HTML, directly under the H1:
   <p class="mtin-byline">By <a href="/carlo-lauria/">Carlo Lauria</a>
   and <a href="/jeia-lauria/">Jeia Lauria</a></p>
   No visible date, so the posts stay evergreen. WordPress still
   emits the real publish date in the page markup for Google.
   ------------------------------------------------------------ */
.mtin-byline,
.entry-content p.mtin-byline,
.post-content p.mtin-byline,
.wp-block-post-content p.mtin-byline {
  font-family: 'Mulish', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mtin-ink-soft);
  margin: 0 0 2.25rem;
}
.mtin-byline a {
  color: var(--mtin-sea);
  text-decoration: none;
  border-bottom: 1.5px solid var(--mtin-terracotta-wash);
  padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.mtin-byline a:hover {
  color: var(--mtin-terracotta);
  border-bottom-color: var(--mtin-terracotta);
}

/* ------------------------------------------------------------
   11b. AUTHOR BIO BLOCK (reusable block A)
   Deep marine card. Everything lives INSIDE the card, including
   the heading, so nothing floats outside it.
   Markup:
   <section class="mtin-author">
     <div class="mtin-measure">
       <div class="mtin-author-card">
         <img class="mtin-author-photo" ...>
         <div>
           <h2>About the Authors: Carlo &amp; Jeia Lauria</h2>
           <p>…</p>
           <div class="mtin-author-links"> 3 links </div>
         </div>
       </div>
     </div>
   </section>
   ------------------------------------------------------------ */
.mtin-author {
  background: var(--mtin-limestone);
  padding: 40px 24px 96px;
}
.mtin-author-card {
  background: var(--mtin-notte);
  border: none;
  border-radius: 2px;
  padding: 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 34px;
  align-items: start;
  box-shadow: 0 18px 44px rgba(32,28,23,0.20);
}
.mtin-author-photo {
  width: 128px;
  height: 128px;
  border-radius: 2px;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  flex: none;
}
.mtin-author-card h2,
.mtin-author-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #F6F0E4;
  margin: 0 0 14px;
  padding-top: 0;
}
.mtin-author-card h2::before,
.mtin-author-card h3::before { display: none; }
.mtin-author-card p {
  font-family: 'Mulish', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: #C6D8DC;
  margin: 0;
}
.mtin-author-links {
  margin-top: 22px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.mtin-author-links a {
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1.5px solid var(--mtin-terracotta-light);
  padding-bottom: 2px;
  transition: color 140ms ease, border-color 140ms ease;
}
.mtin-author-links a:hover {
  color: var(--mtin-terracotta-wash);
  border-bottom-color: var(--mtin-terracotta-wash);
}

/* ------------------------------------------------------------
   11c. CALL TO ACTION BLOCK (reusable block B)
   ------------------------------------------------------------ */
.mtin-cta {
  position: relative;
  overflow: hidden;
  background: #BCD6DE;
  padding: 104px 24px;
  text-align: center;
}
.mtin-cta::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1.5px solid rgba(31,77,95,0.30);
  pointer-events: none;
}
.mtin-cta .mtin-measure { position: relative; }
.mtin-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}
.mtin-eyebrow-rule { width: 40px; height: 1.5px; background: var(--mtin-sea-mid); }
.mtin-eyebrow-text {
  font-family: 'Mulish', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mtin-sea-mid);
}
.mtin-cta h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--mtin-ink-strong);
  margin: 0 0 20px;
  padding-top: 0;
  text-wrap: balance;
}
.mtin-cta h2::before { display: none; }
.mtin-cta p {
  font-family: 'Mulish', sans-serif;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: #3A342C;
  margin: 0 auto 36px;
  max-width: 44ch;
  text-wrap: pretty;
}
.mtin-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  background: var(--mtin-sea-mid);
  color: #FFFFFF;
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  transition: background 140ms ease;
}
.mtin-cta-button:hover {
  background: var(--mtin-sea);
  color: #FFFFFF;
}

/* ------------------------------------------------------------
   12. SHARED MEASURE
   Any block outside the post body that must line up with the
   body text (title, byline, author bio, CTA) carries
   .mtin-measure so both resolve to the same text column.
   ------------------------------------------------------------ */
.mtin-measure {
  max-width: 51rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   12b. HERO VIDEO PANEL — clamp the bleed on narrow screens
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .mtin-hero-panel {
    top: -12px !important;
    bottom: 16px !important;
    left: -10px !important;
    right: 26px !important;
  }
}

/* ------------------------------------------------------------
   13. MOBILE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .entry-content,
  .post-content,
  .wp-block-post-content,
  .mtin-measure {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .entry-content,
  .post-content,
  .wp-block-post-content {
    font-size: 1.0625rem;
    line-height: 1.72;
  }
  .entry-content > p:first-of-type,
  .post-content > p:first-of-type,
  .wp-block-post-content > p:first-of-type {
    font-size: 1.1875rem;
  }
  .entry-content h2,
  .post-content h2,
  .wp-block-post-content h2 {
    margin-top: 2.75rem;
  }
  .entry-content blockquote,
  .post-content blockquote,
  .wp-block-post-content blockquote {
    padding: 1.5rem 1.5rem;
  }
  .entry-content blockquote p,
  .post-content blockquote p {
    font-size: 1.25rem;
  }
  .entry-content table th,
  .entry-content table td,
  .post-content table th,
  .post-content table td {
    padding: 0.75rem 0.875rem;
    font-size: 0.9375rem;
  }
  .entry-content table td:first-child,
  .post-content table td:first-child {
    white-space: normal;
  }
  .mtin-author {
    padding: 28px 20px 64px;
  }
  .mtin-author-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px;
  }
  .mtin-author-photo {
    width: 104px;
    height: 104px;
  }
  .mtin-author-card h2,
  .mtin-author-card h3 {
    font-size: 1.4rem;
  }
  .mtin-cta {
    padding: 72px 20px;
  }
  .mtin-cta::before {
    inset: 14px;
  }
  .mtin-cta-button {
    padding: 16px 26px;
    font-size: 0.875rem;
  }
  .entry-content .mtin-video,
  .post-content .mtin-video,
  .wp-block-post-content .mtin-video {
    margin: 6.5rem 0;
  }
  .entry-content > .mtin-video:first-child,
  .post-content > .mtin-video:first-child,
  .wp-block-post-content > .mtin-video:first-child,
  .entry-content > .mtin-byline + .mtin-video,
  .post-content > .mtin-byline + .mtin-video,
  .wp-block-post-content > .mtin-byline + .mtin-video {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }
  .entry-content .mtin-video::after,
  .post-content .mtin-video::after,
  .wp-block-post-content .mtin-video::after {
    top: -52px;
    bottom: -52px;
  }
  .entry-content .mtin-video::before,
  .post-content .mtin-video::before,
  .wp-block-post-content .mtin-video::before {
    top: -12px;
    bottom: 16px;
    left: -12px;
    right: 20px;
  }
  .entry-content .mtin-video-play,
  .post-content .mtin-video-play,
  .wp-block-post-content .mtin-video-play {
    width: 62px;
    height: 62px;
  }
  .entry-content .mtin-video-play::before,
  .post-content .mtin-video-play::before,
  .wp-block-post-content .mtin-video-play::before {
    border-width: 11px 0 11px 18px;
  }
}


/* ============================================================
   98. RESPONSIVE — HOMEPAGE SECTIONS
   ============================================================ */
@media (max-width: 1024px) {
  .mtin-section { padding: 88px 40px !important; }
  .mtin-split { grid-template-columns: 1fr !important; gap: 48px !important; }
  .mtin-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .mtin-points { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .mtin-hero-inner { padding-left: 40px !important; padding-right: 40px !important; }
  .mtin-closing-inner { padding: 72px 40px !important; }
  .mtin-heading { margin-bottom: 44px !important; }
}

@media (max-width: 900px) {
  /* Founder portrait: the layered panel becomes a tight offset, and the
     caption chip sits under the photo instead of floating over the edge. */
  .mtin-founder-media > div:first-child {
    inset: -14px -14px -14px 24px !important;
  }
  /* The heading already reads "Meet Carlo & Jeia", so the caption chip is
     redundant on a phone and only crowds the photo. */
  .mtin-founder-chip { display: none !important; }
}

@media (max-width: 720px) {
  .mtin-section { padding: 64px 22px !important; }
  .mtin-cards { grid-template-columns: 1fr !important; gap: 22px !important; }
  .mtin-points { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Hero */
  .mtin-hero-wrap { height: auto !important; min-height: 0 !important; }
  .mtin-hero-inner { position: relative !important; padding: 96px 22px 72px !important; }
  .mtin-hero-frame { inset: 12px !important; }
  .mtin-hero h1 { font-size: 2.2rem !important; max-width: none !important; }
  .mtin-hero p { font-size: 1rem !important; max-width: none !important; }
  .mtin-hero .mtin-eyebrow-text { font-size: 12px !important; letter-spacing: 0.18em !important; }

  /* Coast cards: image gets taller, overlay type comes down to size */
  .mtin-place { aspect-ratio: 3/2 !important; }
  .mtin-place-kicker { font-size: 0.6875rem !important; letter-spacing: 0.16em !important; }
  .mtin-place-title { font-size: 1.25rem !important; }

  /* Contrast section */
  .mtin-quote { font-size: 1.6rem !important; }

  /* Closing */
  .mtin-closing-wrap { min-height: 0 !important; }
  .mtin-closing-inner { padding: 80px 22px !important; }
  .mtin-closing h2 { font-size: 2.1rem !important; }
  .mtin-closing p { font-size: 1rem !important; }

  /* Section headings */
  .mtin-heading h2 { font-size: 1.9rem !important; }
  .mtin-heading p { font-size: 1rem !important; }

  /* Buttons stack full width and stay tappable */
  .mtin-ctas { gap: 12px !important; }
  .mtin-ctas .mtin-btn {
    width: 100% !important;
    justify-content: center !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* ============================================================
   99. RESPONSIVE — HEADER, FOOTER, HUB
   ============================================================ */
@media (max-width: 1024px) {
  .mtin-nav-inner { height: 100px; }
  .mtin-nav-logo { height: 72px; }
  .mtin-nav-links { gap: 22px; }
}
@media (max-width: 900px) {
  .mtin-nav-links { display: none; }
  .mtin-burger { display: flex; }
  .mtin-nav-inner { height: 88px; }
  .mtin-nav-logo { height: 60px; }
  .mtin-nav-cta { margin-right: 58px; }
}
@media (min-width: 901px) {
  .mtin-drawer, .mtin-burger { display: none; }
}
@media (max-width: 768px) {
  .mtin-post-head { padding: 56px 20px 0; }
  .mtin-hub { padding: 56px 20px 72px; }
  .mtin-hub-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 720px) {
  .mtin-nav-inner { height: 84px; padding: 0 18px; gap: 12px; }
  .mtin-nav-logo { height: 52px; }
  .mtin-nav-cta { font-size: 12px; padding-left: 14px; padding-right: 14px; margin-right: 56px; }
  .mtin-burger { top: 18px; right: 14px; }
  .mtin-footer { padding: 56px 22px 32px; }
  .mtin-footer-logo { height: 76px; }
  .mtin-footer p { font-size: 1rem; }
  .mtin-socials { gap: 26px; }
}

/* ============================================================
   404
   ============================================================ */
.mtin-404 { background: var(--mtin-limestone); padding: 96px 24px 104px; }
.mtin-404-head { max-width: 1280px; margin: 0 auto 64px; }
.mtin-404-eyebrow {
  font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mtin-terracotta); margin: 0 0 18px;
}
.mtin-404-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1.02;
  letter-spacing: -0.028em; color: var(--mtin-notte);
  margin: 0 0 22px; text-wrap: balance;
}
.mtin-404-lede {
  font-family: 'Mulish', sans-serif; font-size: 1.1875rem; line-height: 1.55;
  color: var(--mtin-ink); margin: 0; max-width: 54ch; text-wrap: pretty;
}
.mtin-404-ways { max-width: 1280px; margin: 80px auto 0; }
.mtin-404-ways-label {
  font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mtin-ink-soft, #6B6152); margin: 0 0 22px;
}
.mtin-404-links { display: flex; flex-wrap: wrap; gap: 14px; }
.mtin-404-links a {
  font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.03em; text-decoration: none;
  color: var(--mtin-sea);
  padding: 13px 22px; border: 1.5px solid var(--mtin-hairline);
  border-radius: 4px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.mtin-404-links a:hover {
  background: var(--mtin-notte); color: var(--mtin-limestone);
  border-color: var(--mtin-notte);
}
@media (max-width: 900px) {
  .mtin-404 { padding: 64px 20px 80px; }
  .mtin-404-head { margin-bottom: 44px; }
  .mtin-404-ways { margin-top: 56px; }
}