/* MIR DMC — layout glue.
   Everything here is structure the handoff left to the implementer (README §3/§4):
   the header overlaying the hero, the hero slider, and the grid behaviours that
   core blocks don't express. Design tokens still come from theme.json. */

/* ---------- Header overlaying the hero ---------- */
.wp-site-blocks > header.wp-block-template-part {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}
/* The hero is the first block on every page, so nothing needs top padding. */
.wp-site-blocks { position: relative; }

/* Core spaces every child of .wp-site-blocks with
     :where(.wp-site-blocks) > *           { margin-block-start: var(--wp--style--block-gap) }
     :where(.wp-site-blocks) > :first-child { margin-block-start: 0 }
   The header is that :first-child, so it gets zeroed — but it is absolutely
   positioned above, which takes it out of flow. That makes <main> the first
   in-flow child, so it keeps the block-gap. With no padding or border on
   .wp-site-blocks to stop it, that top margin COLLAPSES THROUGH the parent and
   pushes the whole site container down, leaving a strip of body background
   above the hero.

   The footer has the same problem at the other end: it is neither :first-child
   nor absolutely positioned, so its block-gap shows as a cream stripe between
   the dark closing band and the dark footer.

   .wp-site-blocks has exactly three children here — header, main, footer — and
   the design butts full-bleed bands directly against each other, so neither
   seam wants a gap. */
.wp-site-blocks > header.wp-block-template-part + *,
.wp-site-blocks > footer.wp-block-template-part {
  margin-block-start: 0;
}

/* Same problem, one level down: every page's own top-level sections (the
   Cover hero, each mir-section/mir-section--tight group) are direct children
   of .wp-block-post-content, which is itself a flow/constrained layout — so
   core's block-gap rule gives every section after the first the same 19.2px
   margin-block-start. Most of the time it's invisible, because most adjacent
   sections share the page's cream background. It becomes a visible seam
   wherever a colored band (brown, cream-dark) sits next to a transparent
   section — e.g. The Stans' dark "Five Countries" band against "At a Glance"
   right after it. Sections already carry their own generous padding, so —
   same as the header/footer case above — the design wants them touching. */
.wp-block-post-content > *:not(:first-child) {
  margin-block-start: 0;
}

/* The header is absolutely positioned over the first block. Pages whose first
   block is a full-height hero don't care, but the Field Notes index, its
   archives and the single dispatch all start with copy near the top, so they
   need to reserve the header's height. One variable, so it stays in sync. */
:root { --mir-header-h: 110px; }

/* Single dispatches and the 404 page open straight into the light cream body
   — no hero image behind the header to hold the white logo and nav legible.
   Give the header its own solid band there, matching the dark sections used
   elsewhere on the site rather than inventing a new color. */
body.single-post .wp-site-blocks > header.wp-block-template-part,
body.error404 .wp-site-blocks > header.wp-block-template-part {
  background-color: var(--wp--preset--color--brown);
}

.mir-header {
  padding: 26px clamp(24px, 4vw, 64px);
}
.mir-header .mir-logo img {
  height: 58px;
  width: auto;
  display: block;
}

/* Nav buttons in the header are compact versions of the global button style. */
.mir-header .wp-block-button__link {
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 12px 22px;
  white-space: nowrap;
}

/* Guide CTA toggle — see mir_dmc_show_guide_cta() in functions.php. */
body.mir-hide-guide-cta .mir-guide-cta { display: none; }

/* ---------- Hero slider ---------- */
.mir-hero-slider {
  position: relative;
  min-height: 560px;
  height: 78vh;
  background: var(--wp--preset--color--brown);
  overflow: hidden;
}
/* Every child of the slider is an absolutely-positioned layer meant to fill it:
   the three slides, the scrim, the copy, and the dots. But the slider is a flow
   layout group, so core gives each non-first child

     :root :where(.is-layout-flow) > * { margin-block-start: var(--wp--style--block-gap) }

   An absolutely-positioned box with inset:0 and auto height still honours that
   margin, so every layer except the first slide was offset 19.19px down: the
   scrim left an un-darkened strip across the top of the hero, slides 2 and 3
   sat low with a gap above them, and the copy and dots drifted with them.

   Specificity note: core's selector is (0,1,0), so a bare `.mir-hero-slider > *`
   only ties and would depend on stylesheet order. :not(:first-child) makes this
   (0,2,0) and lets it win outright. */
.mir-hero-slider > *:not(:first-child) {
  margin-block-start: 0;
}

.mir-hero-slider .mir-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.mir-hero-slider .mir-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* WordPress wraps each slide image in <figure class="wp-block-image">, which has
   no height of its own. That made the img's height:100% resolve against a figure
   whose height was itself derived from the img — so the image kept its intrinsic
   aspect ratio, object-fit had nothing to crop against, and each photo rendered
   ~1080px tall in a ~725px slide, anchored to the top and clipped at the bottom.
   Giving the figure a definite height makes height:100% resolve and lets cover
   crop symmetrically instead. */
.mir-hero-slider .mir-slide figure {
  height: 100%;
  margin: 0;
}
.mir-hero-slider .mir-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* Matches the reference gradient exactly. */
.mir-hero-slider .mir-slide-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(35,26,18,0.55) 0%, rgba(35,26,18,0.15) 45%, rgba(35,26,18,0.55) 88%, rgba(35,26,18,0.2) 100%);
}
.mir-hero-slider .mir-slide-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}
.mir-hero-slider .mir-slide-copy .wp-block-buttons { pointer-events: auto; }
.mir-hero-slider .mir-slide-copy > * { margin-block: 0; }

.mir-hero-eyebrow {
  color: var(--wp--preset--color--cream);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 26px !important;
  opacity: 0.85;
}
.mir-hero-slider .mir-accent--hero { margin-bottom: 6px !important; }
.mir-hero-slider .mir-hero-title {
  font-size: clamp(38px, 5.2vw, 76px);
  line-height: 1.12;
  margin: 0 0 38px !important;
  max-width: 18ch;
  letter-spacing: 0;
}

/* Dot navigation */
.mir-hero-dots {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.mir-hero-dots button {
  width: 34px;
  height: 3px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--wp--preset--color--cream);
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.mir-hero-dots button[aria-selected="true"] { opacity: 1; }
.mir-hero-dots button:focus-visible {
  outline: 2px solid var(--wp--preset--color--rust-light);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mir-hero-slider .mir-slide { transition: none; }
}

/* Scroll cue — bottom-right corner, out of the dots' way. Purely a hint that
   content continues below; JS (hero-slider.js) smooth-scrolls on click and
   fades it out once the visitor has actually started scrolling. The anchor
   href still works with JS disabled, just without the smooth easing. */
.mir-scroll-cue {
  position: absolute;
  right: clamp(24px, 4vw, 56px);
  bottom: 38px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--wp--preset--color--cream);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.5s ease;
}
.mir-scroll-cue:hover,
.mir-scroll-cue:focus-visible { opacity: 1; }
.mir-scroll-cue:focus-visible {
  outline: 2px solid var(--wp--preset--color--rust-light);
  outline-offset: 4px;
}
.mir-scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.mir-scroll-cue-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.mir-scroll-cue-line {
  position: relative;
  width: 1px;
  height: 44px;
  background: currentColor;
  opacity: 0.4;
  overflow: hidden;
}
.mir-scroll-cue-bead {
  position: absolute;
  left: -1.5px;
  top: -8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wp--preset--color--rust-light);
  animation: mir-scroll-cue-drop 2s ease-in-out infinite;
}
@keyframes mir-scroll-cue-drop {
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(52px); opacity: 0; }
}
@media (max-width: 640px) {
  .mir-scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mir-scroll-cue-bead { animation: none; opacity: 0.9; top: 0; }
}

/* ---------- Country / region page heroes ---------- */
.mir-hero-cover { position: relative; }
/* Match the About page's hero H1 (.mir-hero-cover--short below) rather than
   the h1-country preset's own fluid clamp, which tops out at 110px and read
   noticeably larger side by side with About's 88px cap. */
.mir-hero-cover .mir-hero-title { font-size: clamp(44px, 6vw, 88px); letter-spacing: 0.04em; }

/* ---------- Images that fill their column ---------- */
.mir-fill-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Country link grid (Who We Are) ---------- */
.mir-country-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}.mir-country-links > p { margin-block: 0; }
.mir-country-links > p > a {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 19px;
  color: var(--wp--preset--color--ink);
  padding: 13px 0;
  border-bottom: 1px solid #E6E1DA;
  display: flex;
  justify-content: space-between;
}
.mir-country-links > p > a:hover { color: var(--wp--preset--color--rust); }
.mir-country-links .mir-arrow { color: var(--wp--preset--color--rust-light); }

/* ---------- Region cards (image + gradient caption) ---------- */
.mir-region-card {
  position: relative;
  height: 480px;
  overflow: hidden;
  color: var(--wp--preset--color--cream);
}
.mir-region-card .wp-block-image { margin-block: 0; height: 100%; }
.mir-region-card .wp-block-image a { display: block; height: 100%; }
.mir-region-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mir-region-card .mir-region-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 120px 36px 36px;
  background: linear-gradient(180deg, rgba(35,26,18,0) 0%, rgba(35,26,18,0.75) 100%);
  pointer-events: none;
}
.mir-region-card .mir-region-caption a { pointer-events: auto; }
.mir-region-card .mir-region-caption > * { margin-block: 0; }

/* ---------- Stat rows on dark bands ---------- */
.mir-stats {
  display: flex;
  gap: 40px;
  border-top: 1px solid rgba(212,203,180,0.3);
  padding-top: 26px;
  flex-wrap: wrap;
}
.mir-stats .mir-stat-num {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 30px;
  color: var(--wp--preset--color--rust-light);
  margin: 0;
  line-height: 1.2;
}
.mir-stats .mir-stat-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sand);
  margin: 6px 0 0;
}

/* ---------- Footer ---------- */
.mir-footer { padding: clamp(56px,7vw,90px) clamp(24px,6vw,80px) 40px; }
.mir-footer .mir-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(177,165,141,0.25);
}
.mir-footer .mir-footer-heading {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cream);
  margin: 0 0 20px;
}
.mir-footer .mir-footer-logo img { height: 64px; width: auto; margin-bottom: 20px; }
.mir-footer .mir-footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 28px;
  font-size: 13px;
}
.mir-footer .mir-footer-bottom > * { margin-block: 0; }
.mir-footer .mir-social { display: flex; gap: 22px; }

/* Newsletter signup in the footer */
.mir-footer .mir-signup input[type=email] {
  background: transparent;
  border: 1px solid var(--wp--preset--color--olive);
  color: var(--wp--preset--color--cream);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 14px;
  padding: 13px 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
}
.mir-footer .mir-signup button {
  border: 1px solid var(--wp--preset--color--olive);
  background: transparent;
  color: var(--wp--preset--color--hairline);
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 24px;
  cursor: pointer;
}
.mir-footer .mir-signup button:hover {
  border-color: var(--wp--preset--color--rust-light);
  color: var(--wp--preset--color--rust-light);
}

/* ---------- Header CTA variants (README §3) ---------- */
/* Home shows the filled rust button; every other page uses the outline variant. */
body:not(.home) .mir-primary-cta .wp-block-button__link {
  background: transparent;
  border: 1px solid rgba(245,243,242,0.7);
  color: var(--wp--preset--color--cream);
}
body:not(.home) .mir-primary-cta .wp-block-button__link:hover {
  background: var(--wp--preset--color--rust);
  border-color: var(--wp--preset--color--rust);
  color: var(--wp--preset--color--cream);
}
/* The guide button sits on the hero, so its outline is white rather than rust. */
.mir-header .mir-guide-cta .wp-block-button__link {
  border: 1px solid rgba(245,243,242,0.7);
  color: var(--wp--preset--color--cream);
  background: transparent;
}
.mir-header .mir-guide-cta .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--rust-light);
  color: var(--wp--preset--color--rust-light);
  background: transparent;
}

/* ---------- Navigation ---------- */
.mir-header .wp-block-navigation { gap: clamp(14px, 2.2vw, 34px); }
.mir-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--cream);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.mir-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--rust-light);
}
/* Burger + overlay come from core's overlayMenu; just recolour the trigger. */
.mir-header .wp-block-navigation__responsive-container-open,
.mir-header .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--cream);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  :root { --mir-header-h: 121px; }  /* logo + wrapped CTA row */
  .mir-header { padding: 18px 20px; }
  .mir-country-links { grid-template-columns: 1fr; }
  /* The CTAs sit outside the navigation block, so they never appear in core's
     mobile overlay. Keep the primary conversion button on screen next to the
     burger and drop only the secondary guide link, which has a home in the footer. */
  .mir-header .mir-guide-cta { display: none; }
  .mir-header .mir-header-ctas { gap: 8px; }
  .mir-header .mir-primary-cta .wp-block-button__link {
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}
@media (max-width: 600px) {
  .mir-region-card { height: 380px; }
  .mir-stats { gap: 28px; }
}

/* ---------- Hero slide copy stack ----------
   The eyebrow and buttons are constant across slides; only the accent line and
   headline swap. Stacking the three text groups in one grid cell keeps each one
   independently editable while preventing a height jump between slides. */
.mir-hero-text-stack { display: grid; }
.mir-hero-text-stack > .mir-hero-text {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.mir-hero-text-stack > .mir-hero-text.is-active { opacity: 1; }
.mir-hero-text > * { margin-block: 0; }

@media (prefers-reduced-motion: reduce) {
  .mir-hero-text-stack > .mir-hero-text { transition: none; }
}

/* ---------- "What We Handle" mosaic ----------
   Same hairline mosaic as .mir-glance, at the larger scale the Home page uses. */
.mir-handle > * { padding: 44px 36px; }
.mir-handle .mir-glance-num { font-size: 44px; margin-bottom: 22px; }
.mir-handle h3 {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-weight: 500;
  font-size: 21px;
  margin: 0 0 14px;
  color: var(--wp--preset--color--ink);
}

/* Section padding helper — the reference's standard section inset. */
.mir-section { padding: clamp(72px,9vw,130px) clamp(24px,6vw,80px); }
.mir-section--tight { padding: clamp(72px,9vw,120px) clamp(24px,6vw,80px); }

/* ---------- Country / region hero (cover block) ----------
   Cover writes min-height inline, so the 560px floor from the reference has to
   override it. Everything else is plain block attributes. */
.wp-block-cover.mir-hero-cover { min-height: max(78vh, 560px) !important; }
.mir-hero-cover .wp-block-cover__inner-container > * { margin-block: 0; }

.mir-hero-eyebrow-country {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cream);
  opacity: 0.85;
  margin-bottom: 14px !important;
}
.mir-hero-eyebrow-country a { color: inherit; text-decoration: none; }
/* Headline and its handwritten accent sit on a shared baseline. */
.mir-hero-titlerow {
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: wrap;
}
.mir-hero-titlerow .mir-accent--hero { font-size: clamp(28px, 3vw, 44px); }
.mir-hero-lead {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-style: italic;
  color: var(--wp--preset--color--cream);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  margin: 20px 0 0 !important;
  max-width: 56ch;
}

/* ---------- Alternating image / copy rows ---------- */
.mir-alt-row { align-items: center; }
.mir-alt-row .mir-fill-image,
.mir-alt-row .mir-fill-image img { height: 420px; }
.mir-row-label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
  margin-bottom: 12px !important;
}

/* Taller media in the two-column "why" and "how MIR works" sections. */
.mir-media-tall .mir-fill-image,
.mir-media-tall .mir-fill-image img { height: 520px; }

/* ---------- Region strip ---------- */
.mir-region-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mir-region-strip .mir-region-links {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.mir-region-strip .mir-region-links p { margin-block: 0; }
.mir-region-strip .mir-region-links a {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 22px;
  color: var(--wp--preset--color--cream);
}
.mir-region-strip .mir-region-links a:hover { color: var(--wp--preset--color--rust-light); }
.mir-region-strip > * { margin-block: 0; }

@media (max-width: 900px) {
  .mir-alt-row .mir-fill-image,
  .mir-alt-row .mir-fill-image img,
  .mir-media-tall .mir-fill-image,
  .mir-media-tall .mir-fill-image img { height: 320px; }
}

/* ---------- About: hero at reduced height ---------- */
.wp-block-cover.mir-hero-cover--short { min-height: max(64vh, 480px) !important; }
/* Below ~700px tall, 64vh isn't enough room for the header plus a wrapped
   H1 and lead line — the eyebrow can end up rendering under the header.
   A fixed floor guarantees clearance regardless of exact copy length. */
@media (max-width: 600px) { .wp-block-cover.mir-hero-cover--short { min-height: 620px !important; } }
.mir-hero-cover--short .mir-hero-title { font-size: clamp(44px, 6vw, 88px); letter-spacing: 0; }
.mir-hero-cover--short .mir-hero-lead { max-width: 58ch; }

/* ---------- About: office cards on the dark band ---------- */
.mir-office-card {
  border: 1px solid rgba(212,203,180,0.3);
  padding: 40px 36px;
  height: 100%;
  box-sizing: border-box;
}
.mir-office-card > * { margin-block: 0; }
.mir-office-country {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rust-light);
  margin-bottom: 14px !important;
}
.mir-office-city {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 28px;
  margin-bottom: 16px !important;
}

/* ---------- About: "How We Work" definition rows ----------
   Wider label column and top-rule-only variant of the handoff's .mir-rows. */
.mir-rows--wide > * {
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: clamp(20px, 4vw, 60px);
  padding: 36px 0;
  border-bottom: none;
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.mir-rows--wide > *:first-child { border-top: 1px solid var(--wp--preset--color--hairline); }
.mir-rows--wide > * > *:first-child {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 22px;
  color: var(--wp--preset--color--ink);
  margin-block: 0;
}
.mir-rows--wide > * > *:last-child { margin-block: 0; }

@media (max-width: 700px) {
  .mir-rows > *, .mir-rows--wide > * { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- South Caucasus: country cards ---------- */
.mir-country-card {
  background: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--ink);
  height: 100%;
}
.mir-country-card .wp-block-image { margin-block: 0; }
.mir-country-card .mir-card-media,
.mir-country-card .mir-card-media img { height: 280px; }
.mir-country-card .mir-card-body { padding: 32px; }
.mir-country-card .mir-card-body > * { margin-block: 0; }
.mir-country-card .mir-card-title {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 26px;
  margin-bottom: 12px !important;
}
.mir-country-card .mir-card-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--wp--preset--color--rust);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mir-country-card:hover .mir-card-link a { color: var(--wp--preset--color--rust-light); }
.mir-country-card .mir-card-link a { color: inherit; }

/* ---------- South Caucasus: numbered "What to Expect" rows ---------- */
.mir-expect-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px !important;
}
.mir-expect-label .mir-expect-num {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 34px;
  color: var(--wp--preset--color--hairline);
  line-height: 1;
}
.mir-expect-label .mir-expect-name {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
}
.mir-expect-row .mir-fill-image,
.mir-expect-row .mir-fill-image img { height: 300px; }

/* Wide media block used under the Practical and When-to-Consider sections. */
.mir-media-wide .mir-fill-image,
.mir-media-wide .mir-fill-image img { height: 560px; }

@media (max-width: 900px) {
  .mir-expect-row .mir-fill-image,
  .mir-expect-row .mir-fill-image img,
  .mir-media-wide .mir-fill-image,
  .mir-media-wide .mir-fill-image img { height: 300px; }
}

/* ---------- Uzbekistan: "Getting Around" closing callout ---------- */
.mir-getting-around { max-width: 64ch; margin-inline: auto !important; }
.mir-getting-around-label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
  display: block;
  margin-bottom: 10px;
}

/* ---------- Short hero used by the form / newsletter pages ---------- */
.wp-block-cover.mir-hero-cover--form { min-height: max(52vh, 420px) !important; }
/* Same reasoning as --short above: a longer H1 (e.g. "PURE MARRAKECH 2026",
   which wraps to 3 lines at this width) can push the eyebrow up into the
   overlaid header. Measured against the worst case actually in use. */
@media (max-width: 600px) { .wp-block-cover.mir-hero-cover--form { min-height: 600px !important; } }
.mir-hero-cover--form .mir-hero-title { font-size: clamp(44px, 6vw, 86px); }

/* ---------- Form slot ----------
   Gravity Forms is not installed yet, so no form markup is rendered. This panel
   marks exactly where each embed goes and is deliberately obvious: a fake but
   real-looking form here would silently drop enquiries. Delete the wrapper and
   drop in the [gravityform] shortcode when GF is licensed. */
.mir-form-slot {
  border: 1px dashed var(--wp--preset--color--rust);
  background: rgba(172,101,37,0.04);
  padding: 32px;
}
.mir-form-slot > * { margin-block: 0; }
.mir-form-slot .mir-form-slot-label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rust);
  margin-bottom: 12px !important;
}
.mir-form-slot .mir-form-slot-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--wp--preset--color--body);
}
.mir-on-dark .mir-form-slot { background: rgba(245,243,242,0.05); }
.mir-on-dark .mir-form-slot .mir-form-slot-note { color: var(--wp--preset--color--hairline); }

/* ---------- Contact / newsletter detail rows ---------- */
.mir-detail-rows > * {
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.mir-detail-rows > *:first-child { border-top: 1px solid var(--wp--preset--color--hairline); }
.mir-detail-rows > * > * { margin-block: 0; }
.mir-detail-label {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
  margin-bottom: 8px !important;
}
.mir-detail-value { font-size: 16px; line-height: 1.8; }

/* Inline serif lead-in inside a body paragraph (About → The Geography). */
.mir-inline-lead {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 19px;
  color: var(--wp--preset--color--ink);
}

/* ---------- Gravity Forms: pieces the handoff skin does not cover ----------
   mir-dmc.css skins the gravity-theme field/label/button chrome. These add the
   layout bits (checkbox grid, confirmations) and the on-dark footer variant. */

.gform_wrapper.gravity-theme .gfield_required.gfield_required_text {
  color: #951e03;
  font-size: 11px;
  letter-spacing: 0;
}

/* "Countries involved" — the spec asks for 2-4 columns. */
.mir-countries-grid .gfield_checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 24px;
}
.mir-countries-grid .gchoice { display: flex; align-items: center; gap: 10px; }
.mir-countries-grid .gform-field-label--type-inline {
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--ink);
}

/* Two-column rows: keep the inputs on a common line.
   GF lays half-width fields out as grid cells that each stack label over input.
   Anything that makes one label taller than its neighbour's therefore pushes
   that input down — "Company / Travel Agency" wraps to two lines next to
   "Name", and the phone field carries Country / Phone Number sub-labels that
   "Email" does not. Measured offsets were 28.8px and 43px respectively.

   Rather than police label lengths, let the label box take whatever height it
   needs and pin the input to the bottom of the cell. Grid already stretches
   cells in a row to equal height, so bottom-aligned inputs line up whatever
   the labels above them do. */
.gform_wrapper.gravity-theme .gform_fields > .gfield--width-half {
  display: flex;
  flex-direction: column;
}
.gform_wrapper.gravity-theme .gfield--width-half > .ginput_container {
  margin-top: auto;
}

/* The phone field's sub-labels are the only ones on the form, and they add a
   row of text no other field has. Hide them visually but keep them in the
   accessibility tree — they are the accessible names for the country button
   and the number input, so display:none would leave both unlabelled. */
.gform_wrapper.gravity-theme .gfield--type-phone .gform-field-label--type-sub {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Country picker. GF 3.x renders this as a <button> styled by its own theme
   chrome (grey fill, grey border, 48px tall), which reads as a foreign control
   next to the cream-bordered inputs. Restate it to match the field skin in
   mir-dmc.css: same border, same white ground, same type, same height. */
.gform_wrapper.gravity-theme .gform-phone__input-wrapper {
  column-gap: 8px;
}
.gform_wrapper.gravity-theme .gfield--type-phone .ginput_container_phone .gform-phone__country-selector {
  height: 37px;
  min-height: 0;
  padding: 8px 10px;
  gap: 6px;
  background-color: #fff;
  border: 1px solid #D4CBB4;
  border-inline-end-color: #D4CBB4;
  border-radius: 0;
  color: #3A342C;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  white-space: nowrap;
}
.gform_wrapper.gravity-theme .gfield--type-phone .ginput_container_phone .gform-phone__country-selector:hover {
  background-color: #fff;
  border-color: #AC6525;
  border-inline-end-color: #AC6525;
  color: #3A342C;
}
.gform_wrapper.gravity-theme .gfield--type-phone .ginput_container_phone .gform-phone__country-selector:focus-visible {
  background-color: #fff;
  border-color: #AC6525;
  border-inline-end-color: #AC6525;
  outline: none;
}
.gform_wrapper.gravity-theme .gform-phone__dial-code {
  color: #3A342C;
  white-space: nowrap;
}

/* Confirmation message, styled like the mocks' thank-you state. */
.mir-form-confirmation > * { margin-block: 0; }
.mir-form-confirmation .mir-confirm-lead {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
  margin-top: 12px !important;
}
.mir-form-confirmation .mir-confirm-body {
  color: var(--wp--preset--color--body);
  margin-top: 18px !important;
  max-width: 60ch;
}
.mir-form-confirmation .mir-confirm-back {
  margin-top: 26px !important;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Footer signup sits on the dark band: transparent field, olive rules. */
.mir-footer .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 10px; }
.mir-footer .gform_wrapper.gravity-theme input[type=email] {
  background: transparent;
  border: 1px solid var(--wp--preset--color--olive);
  color: var(--wp--preset--color--cream);
  font-size: 14px;
  padding: 13px 14px;
}
.mir-footer .gform_wrapper.gravity-theme ::placeholder { color: var(--wp--preset--color--olive); }
.mir-footer .gform_wrapper.gravity-theme .gform_button {
  background: transparent;
  border: 1px solid var(--wp--preset--color--olive);
  color: var(--wp--preset--color--hairline);
  padding: 13px 24px;
  width: 100%;
}
.mir-footer .gform_wrapper.gravity-theme .gform_button:hover {
  border-color: var(--wp--preset--color--rust-light);
  color: var(--wp--preset--color--rust-light);
  background: transparent;
}
.mir-footer .gform_wrapper.gravity-theme .gform_footer { margin: 10px 0 0; padding: 0; }
.mir-footer .mir-form-confirmation .mir-confirm-lead,
.mir-footer .mir-form-confirmation .mir-confirm-body { color: var(--wp--preset--color--sand); font-size: 15px; }

/* Inputs fill their grid column rather than GF's fixed "medium" width. */
.gform_wrapper.gravity-theme .ginput_container input[type=text],
.gform_wrapper.gravity-theme .ginput_container input[type=email],
.gform_wrapper.gravity-theme .ginput_container input[type=tel],
.gform_wrapper.gravity-theme .ginput_container textarea { width: 100%; }
.gform_wrapper.gravity-theme .gform_footer { margin-top: 28px; padding: 0; }
.mir-footer .gform_wrapper.gravity-theme .gform_footer { margin-top: 10px; }
/* GF reserves space for an inline validation slot under each field; on the dark
   footer that reads as a large unexplained gap. */
.mir-footer .gform_wrapper.gravity-theme .gfield_validation_message,
.mir-footer .gform_wrapper.gravity-theme .gform_validation_errors { margin: 6px 0; }
.mir-footer .gform_wrapper.gravity-theme .gform_fields { row-gap: 0; }

/* ---------------------------------------------------------------------------
   The Stans — 5-card country grid (package 2)
   Distinct from package 1's .mir-country-card: 380px tall, image full-bleed
   with a bottom-up scrim, name + descriptor overlaid, whole card clickable.
   --------------------------------------------------------------------------- */
.mir-stan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: stretch; }
/* the theme's sibling rule adds margin-block-start to children 2..n, which in a
   grid offsets every card but the first; the gap already does this job. */
.mir-stan-grid > *:not(:first-child) { margin-block-start: 0; }
/* fixed 380px box, as the reference: a two-line descriptor must not grow the card */
.mir-stan-card { position: relative; height: 380px; min-height: 380px; background: #3A2C1F; overflow: hidden; }
.mir-stan-card .wp-block-cover__inner-container > * { margin-block: 0; }
.mir-stan-card .mir-stan-name {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 26px;
  line-height: 1.2;
  color: var(--wp--preset--color--cream);
}
.mir-stan-card .mir-stan-name a { color: inherit; text-decoration: none; }
/* stretched link: the whole card is the hit area, the text stays editable */
.mir-stan-card .mir-stan-name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.mir-stan-card .mir-stan-desc {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
  color: var(--wp--preset--color--hairline);
}
.mir-stan-card:hover .mir-stan-name { color: var(--wp--preset--color--rust-light); }

/* The Stans — "Country by country" text rows: 140px label column, hairline rule */
.mir-expect-list { display: flex; flex-direction: column; gap: 22px; }
.mir-expect-list > *:not(:first-child) { margin-block-start: 0; }
.mir-expect-list .mir-expect-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.mir-expect-list .mir-expect-item:last-child { border-bottom: 0; }
.mir-expect-list .mir-expect-item > * { margin-block: 0; }
.mir-expect-list .mir-expect-country {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 18px;
  color: var(--wp--preset--color--ink);
}
@media (max-width: 600px) {
  .mir-expect-list .mir-expect-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------------------------------------------------------------
   "<Country> at a Glance" cells — core's flow rule

     :root :where(.is-layout-flow) > * { margin-block-start: var(--wp--style--block-gap) }

   gives every glance cell except the first a 19.2px top margin. In the grid that
   pushed cells 2..n down while cell 1 stretched to the taller row, so tile 01
   rendered ~19px taller than its neighbours on every country page. The grid gap
   already does this spacing. Same specificity note as .mir-hero-slider above:
   core's selector is (0,1,0), so :not(:first-child) is needed to win outright
   rather than tie and depend on stylesheet order.
   .mir-glance itself lives in mir-dmc.css, which is kept byte-for-byte.
   --------------------------------------------------------------------------- */
.mir-glance > *:not(:first-child) { margin-block-start: 0; }

/* ---------------------------------------------------------------------------
   Same core flow-margin bug as .mir-glance and .mir-hero-slider above, in the
   three remaining grid/flex wrappers. Verified against the reference files:
   the footer's four columns sit at an identical top there (spread 0px) but were
   19.2px apart here; .mir-stats tile 01 rendered 19px taller than its two
   neighbours; and the hero's three stacked text layers were offset, so the copy
   shifted down as the slider advanced. The gap/stacking handles spacing in all
   three. :not(:first-child) keeps this at (0,2,0) so it beats core outright.
   --------------------------------------------------------------------------- */
.mir-footer-cols > *:not(:first-child),
.mir-stats > *:not(:first-child),
.mir-hero-text-stack > *:not(:first-child) { margin-block-start: 0; }

/* Inside each glance cell, core's flow margin adds 19.2px above the body text,
   which collapses with .mir-glance-num's own 18px margin-bottom and wins. The
   reference gap is exactly 18px, so drop the inherited one and let the num's
   margin define the spacing. */
.mir-glance > * > *:not(:first-child) { margin-block-start: 0; }
.mir-glance .mir-glance-num { text-align: center; }

/* ===========================================================================
   FIELD NOTES — blog index (templates/home.html), package 2
   Measurements taken from reference/Field Notes.dc.html.
   =========================================================================== */
.mir-fn-hero .wp-block-cover__inner-container > * { margin-block: 0; }
.mir-fn-eyebrow {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--wp--preset--color--sand); margin-bottom: 18px;
}
.mir-fn-title {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-weight: 400; color: var(--wp--preset--color--cream);
  font-size: clamp(48px, 6.5vw, 96px); line-height: 1; letter-spacing: 0.04em; margin: 0;
}
.mir-fn-standfirst {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-style: italic; color: var(--wp--preset--color--hairline);
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.6; margin: 22px 0 0; max-width: 60ch;
}

/* ---- Featured (sticky) post ---- */
.mir-fn-featured-row > .wp-block-column > * { margin-block: 0; }
.mir-fn-featured-media, .mir-fn-featured-media img { height: 480px; width: 100%; object-fit: cover; display: block; }
.mir-fn-metarow { gap: 18px; align-items: center; margin-bottom: 16px; }
.mir-fn-metarow > * { margin-block: 0; }
.mir-fn-pill a, .mir-fn-pill {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wp--preset--color--cream); background: var(--wp--preset--color--rust);
  padding: 6px 14px; text-decoration: none; display: inline-block;
}
.mir-fn-pill a { padding: 0; background: none; }
.mir-fn-meta { gap: 6px; align-items: baseline; }
.mir-fn-meta, .mir-fn-meta a, .mir-fn-meta time, .mir-fn-dot {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--olive); text-decoration: none; margin-block: 0;
}
.mir-fn-featured-title { margin: 0 0 14px; }
.mir-fn-featured-title a {
  font-family: var(--wp--preset--font-family--plex-serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1.15;
  color: var(--wp--preset--color--ink); text-decoration: none;
}
.mir-fn-featured-excerpt { font-size: 17px; line-height: 1.85; color: #545454; margin: 0 0 26px; max-width: 52ch; }
.mir-fn-featured-excerpt .wp-block-post-excerpt__more-text { display: none; }
.mir-fn-more a {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--rust); text-decoration: none;
}

/* ---- Grid band ---- */
.mir-fn-gridhead { align-items: baseline; gap: 24px; margin-bottom: clamp(32px,4vw,48px); }
.mir-fn-gridhead > * { margin-block: 0; }
.mir-fn-gridtitle {
  font-family: var(--wp--preset--font-family--plex-serif); font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px); margin: 0; color: var(--wp--preset--color--ink);
}
.mir-fn-filters > * { margin-block: 0; }
.mir-fn-filter, .mir-fn-filter a {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--olive); text-decoration: none; margin-block: 0;
}
.mir-fn-filter.is-current { color: var(--wp--preset--color--rust); border-bottom: 1px solid var(--wp--preset--color--rust); padding-bottom: 2px; }
.mir-fn-filter a:hover { color: var(--wp--preset--color--rust); }

.mir-fn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; list-style: none; padding: 0; margin: 0; }
.mir-fn-grid > *:not(:first-child) { margin-block-start: 0; }
.mir-fn-card { display: flex; flex-direction: column; background: var(--wp--preset--color--cream); box-shadow: 0 1px 0 #D4CBB4; height: 100%; }
.mir-fn-card > *:not(:first-child) { margin-block-start: 0; }
.mir-fn-card-media, .mir-fn-card-media img { height: 240px; width: 100%; object-fit: cover; display: block; }
.mir-fn-card-body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.mir-fn-card-body > * { margin-block: 0; }
.mir-fn-card-body .mir-fn-meta { font-size: 12px; letter-spacing: 0.16em; }
.mir-fn-card-title { margin: 0; }
.mir-fn-card-title a {
  font-family: var(--wp--preset--font-family--plex-serif); font-weight: 400;
  font-size: 24px; line-height: 1.28; color: var(--wp--preset--color--ink); text-decoration: none;
}
.mir-fn-card-excerpt { font-size: 15px; line-height: 1.75; color: #6B6B6B; margin: 0; }
.mir-fn-card-excerpt .wp-block-post-excerpt__more-text { display: none; }
.mir-fn-pagination { margin-top: clamp(40px,5vw,64px); }

/* ---- Newsletter CTA ---- */
.mir-fn-cta > * { margin-block: 0; }
.mir-fn-pastissue a { color: var(--wp--preset--color--sand); font-size: 13px; text-decoration: none; }
.mir-fn-pastissue { margin-top: 18px; }

@media (max-width: 860px) {
  .mir-fn-featured-media, .mir-fn-featured-media img { height: 320px; }
  .mir-fn-gridhead { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================================
   FIELD NOTES — single dispatch (templates/single.html), package 2
   Column measures from the README: 840px header, 1100px lead image, 720px prose.
   =========================================================================== */
.mir-post-headband { padding: calc(var(--mir-header-h) + clamp(40px,5vw,60px)) 0 0; }
.mir-post-headband > * { margin-block: 0; }
.mir-post-back a {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--olive); text-decoration: none;
}
.mir-post-metarow { margin: 28px 0 20px; }
.mir-post-title {
  font-family: var(--wp--preset--font-family--plex-serif); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.15;
  color: var(--wp--preset--color--ink); margin: 0;
}

/* ---- Prose ---- */
.mir-post-body { padding: clamp(40px,5vw,64px) clamp(24px,6vw,80px) clamp(48px,6vw,72px); }
.mir-post-body p { font-size: 17px; line-height: 1.85; color: var(--wp--preset--color--body); margin: 0 0 24px; }
/* first paragraph of the body is the serif lede; an explicit class rather than
   :first-of-type, so it survives a lead image or embed being moved above it */
.mir-post-body p.mir-post-lede {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: 21px; line-height: 1.7; color: var(--wp--preset--color--ink); margin: 0 0 26px;
}
.mir-post-body h2 { font-family: var(--wp--preset--font-family--plex-serif); font-weight: 400; font-size: 30px; line-height: 1.3; color: var(--wp--preset--color--ink); margin: 40px 0 16px; }
.mir-post-body h3 { font-family: var(--wp--preset--font-family--plex-serif); font-weight: 400; font-size: 23px; line-height: 1.35; color: var(--wp--preset--color--ink); margin: 32px 0 14px; }
.mir-post-body ul, .mir-post-body ol { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; margin: 0 0 24px; }
.mir-post-body ul li, .mir-post-body ol li { font-size: 17px; line-height: 1.85; color: var(--wp--preset--color--body); }
.mir-post-body blockquote {
  border-left: 3px solid var(--wp--preset--color--rust); margin: 32px 0; padding: 4px 0 4px 24px;
}
.mir-post-body blockquote p {
  font-family: var(--wp--preset--font-family--plex-serif); font-style: italic;
  font-size: 23px; line-height: 1.55; color: var(--wp--preset--color--ink);
}
/* inline + lead images: italic olive caption under a full-width image */
.mir-post-body figure.wp-block-image { margin: 0 0 8px; }
.mir-post-body figure.wp-block-image img { width: 100%; height: auto; display: block; }
.mir-post-body figure.wp-block-image.alignwide img { height: clamp(320px, 45vw, 560px); object-fit: cover; }
.mir-post-body figure.wp-block-image figcaption {
  font-size: 13px; color: var(--wp--preset--color--olive); font-style: italic;
  line-height: 1.6; padding: 12px 0 28px; margin: 0; text-align: left;
}
.mir-post-body .wp-block-embed { margin: 0 0 28px; }
.mir-post-body .wp-block-embed figcaption {
  font-size: 13px; color: var(--wp--preset--color--olive); font-style: italic; line-height: 1.6; padding: 12px 0 0;
}

/* ---- CTA card after the body ---- */
.mir-post-ctawrap { padding-bottom: clamp(56px,7vw,80px); }
.mir-post-cta { margin-top: 0; padding: 36px; background: var(--wp--preset--color--cream-dark); text-align: center; }
.mir-post-cta > * { margin-block: 0; }
.mir-post-cta .mir-accent { font-size: 32px; margin-bottom: 10px; }
.mir-post-cta-copy { font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--body); margin: 0 0 24px; }

/* ---- More dispatches ---- */
.mir-post-allink a { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--rust); text-decoration: none; }
.mir-fn-card--sm .mir-fn-card-media, .mir-fn-card--sm .mir-fn-card-media img { height: 220px; }
.mir-fn-card--sm .mir-fn-card-body { padding: 26px 26px 30px; gap: 10px; }
.mir-fn-card--sm .mir-fn-card-title a { font-size: 22px; line-height: 1.3; }

/* archive pages open straight into the grid band, under the overlaid header */
.mir-archive-main > .mir-fn-gridband:first-child {
  padding-top: calc(var(--mir-header-h) + clamp(48px,6vw,80px));
}

/* Glance cells set 15px/1.75 in the design. The size comes from the `small`
   preset, but the line-height would otherwise inherit the global 1.8 and make
   each cell ~3px taller than the reference. Scoped to the component so the
   other `small` contexts (footer offices at 2.1, footer links) keep theirs. */
.mir-glance > * > .has-small-font-size { line-height: 1.75; }


/* ---------- Popup: torn-paper treatment ---------- */
/* Site-specific skin for one Elatum Popups popup. The plugin ships only
   structural CSS and stays site-agnostic; this is opted into per popup via
   its "Extra CSS class" field (set to `mir-torn`), so the plugin carries no
   mir-dmc styling and this file keeps all the brand decoration.

   The torn edges are two SVG masks (top + bottom) composited with a solid
   middle band, so the cream ground tears off into transparency over the
   dimmed backdrop instead of ending on a hard rectangle. `preserveAspectRatio:
   none` lets one 1200px-wide path stretch to whatever the dialog width is. */
dialog.elpop-modal.mir-torn {
  background: var(--wp--preset--color--cream);
  border-radius: 0;
  padding-block: 12px;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,9.0L26.6,9.1L46.7,6.0L67.7,17.1L78.4,12.9L88.2,14.8L109.6,15.1L128.7,4.7L142.3,4.3L159.6,13.3L180.8,9.5L198.5,7.1L226.4,13.2L241.4,6.5L251.7,12.4L276.8,8.3L301.9,4.0L328.2,9.2L344.8,4.8L368.6,17.3L395.9,16.7L406.8,4.7L419.2,10.2L431.8,19.5L443.0,8.6L457.1,14.7L471.9,13.7L488.4,13.4L499.3,14.9L513.2,12.5L527.8,19.1L541.5,10.6L559.1,14.6L579.0,13.5L590.9,14.0L604.7,6.1L631.5,6.2L657.3,10.6L668.3,4.4L681.8,11.8L706.4,10.6L718.8,16.6L738.4,13.4L752.7,14.1L762.0,7.0L772.2,5.9L792.1,5.4L818.0,14.8L840.1,15.2L849.5,14.0L876.8,4.2L894.9,12.0L922.9,4.8L945.9,13.9L968.3,12.7L984.0,11.5L1009.5,8.6L1034.9,10.3L1051.2,10.4L1061.7,11.0L1087.4,12.0L1110.4,10.4L1135.3,4.9L1144.9,10.6L1158.3,11.7L1178.9,14.1L1188.2,7.3L1200,6.4L1200,26L0,26Z'%20fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,16.0L25.1,18.8L40.6,17.4L51.6,17.1L67.2,11.0L87.7,17.4L105.2,20.1L122.0,13.3L134.7,14.6L153.5,19.6L177.4,16.3L200.8,15.5L217.3,15.2L228.2,11.7L239.8,20.3L250.2,17.6L271.6,16.9L293.1,18.5L315.4,11.4L342.8,19.7L370.2,21.8L396.5,4.6L423.8,12.4L447.2,6.6L473.0,11.6L482.1,20.1L495.5,21.7L514.0,9.8L523.6,13.4L536.5,15.0L550.1,18.3L573.6,15.2L593.5,18.5L617.4,21.4L632.0,12.2L653.8,17.2L672.3,12.2L688.7,20.3L706.6,14.9L721.8,11.7L739.2,19.6L765.7,20.1L787.1,6.5L797.1,16.0L814.9,8.9L830.0,20.7L850.4,9.2L877.0,21.9L901.6,19.5L922.7,19.2L939.1,18.7L962.1,13.6L972.4,19.2L996.6,13.6L1008.1,19.0L1031.3,18.0L1054.3,5.3L1076.7,13.1L1092.7,14.8L1118.8,20.6L1134.4,12.0L1146.7,21.8L1174.0,13.5L1187.0,19.7L1200,16.1L1200,0L0,0Z'%20fill='black'/%3E%3C/svg%3E"),
    linear-gradient(black, black);
  -webkit-mask-size: 100% 26px, 100% 26px, 100% calc(100% - 52px);
  -webkit-mask-position: top center, bottom center, center;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,9.0L26.6,9.1L46.7,6.0L67.7,17.1L78.4,12.9L88.2,14.8L109.6,15.1L128.7,4.7L142.3,4.3L159.6,13.3L180.8,9.5L198.5,7.1L226.4,13.2L241.4,6.5L251.7,12.4L276.8,8.3L301.9,4.0L328.2,9.2L344.8,4.8L368.6,17.3L395.9,16.7L406.8,4.7L419.2,10.2L431.8,19.5L443.0,8.6L457.1,14.7L471.9,13.7L488.4,13.4L499.3,14.9L513.2,12.5L527.8,19.1L541.5,10.6L559.1,14.6L579.0,13.5L590.9,14.0L604.7,6.1L631.5,6.2L657.3,10.6L668.3,4.4L681.8,11.8L706.4,10.6L718.8,16.6L738.4,13.4L752.7,14.1L762.0,7.0L772.2,5.9L792.1,5.4L818.0,14.8L840.1,15.2L849.5,14.0L876.8,4.2L894.9,12.0L922.9,4.8L945.9,13.9L968.3,12.7L984.0,11.5L1009.5,8.6L1034.9,10.3L1051.2,10.4L1061.7,11.0L1087.4,12.0L1110.4,10.4L1135.3,4.9L1144.9,10.6L1158.3,11.7L1178.9,14.1L1188.2,7.3L1200,6.4L1200,26L0,26Z'%20fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,16.0L25.1,18.8L40.6,17.4L51.6,17.1L67.2,11.0L87.7,17.4L105.2,20.1L122.0,13.3L134.7,14.6L153.5,19.6L177.4,16.3L200.8,15.5L217.3,15.2L228.2,11.7L239.8,20.3L250.2,17.6L271.6,16.9L293.1,18.5L315.4,11.4L342.8,19.7L370.2,21.8L396.5,4.6L423.8,12.4L447.2,6.6L473.0,11.6L482.1,20.1L495.5,21.7L514.0,9.8L523.6,13.4L536.5,15.0L550.1,18.3L573.6,15.2L593.5,18.5L617.4,21.4L632.0,12.2L653.8,17.2L672.3,12.2L688.7,20.3L706.6,14.9L721.8,11.7L739.2,19.6L765.7,20.1L787.1,6.5L797.1,16.0L814.9,8.9L830.0,20.7L850.4,9.2L877.0,21.9L901.6,19.5L922.7,19.2L939.1,18.7L962.1,13.6L972.4,19.2L996.6,13.6L1008.1,19.0L1031.3,18.0L1054.3,5.3L1076.7,13.1L1092.7,14.8L1118.8,20.6L1134.4,12.0L1146.7,21.8L1174.0,13.5L1187.0,19.7L1200,16.1L1200,0L0,0Z'%20fill='black'/%3E%3C/svg%3E"),
    linear-gradient(black, black);
  mask-size: 100% 26px, 100% 26px, 100% calc(100% - 52px);
  mask-position: top center, bottom center, center;
  mask-repeat: no-repeat, no-repeat, no-repeat;
}

dialog.elpop-modal.mir-torn .elpop-content {
  padding: 30px clamp(28px, 5vw, 52px) 34px;
  text-align: center;
  /* Flex column purely to reorder: the plugin renders the post title first,
     but the design wants the Quickbrush accent as an eyebrow ABOVE it, the
     way the home hero stacks "on the ground since 1986" over the headline.
     Reordering in CSS keeps the H2 first in the DOM, so the accessible name
     and heading order stay correct. */
  display: flex;
  flex-direction: column;
}

/* Core's flow margin would add margin-block-start to children 2..n here. */
dialog.elpop-modal.mir-torn .elpop-content > *:not(:first-child) {
  margin-block-start: 0;
}

/* The title is the popup's post title, rendered by the plugin. */
dialog.elpop-modal.mir-torn .elpop-title {
  font-family: var(--wp--preset--font-family--plex-serif);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.25;
  font-weight: 400;
  color: var(--wp--preset--color--brown-darker);
  margin: 0 0 14px;
}

/* Quickbrush script accent, matching the hero's "on the ground since 1986". */
dialog.elpop-modal.mir-torn .mir-popup-accent {
  order: -1;
  font-family: var(--wp--preset--font-family--quickbrush);
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1;
  color: var(--wp--preset--color--rust);
  margin: 0 0 6px;
}

dialog.elpop-modal.mir-torn .mir-popup-rule {
  width: 54px;
  height: 1px;
  background: var(--wp--preset--color--hairline);
  border: 0;
  margin: 0 auto 18px;
}

dialog.elpop-modal.mir-torn p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--wp--preset--color--body);
  margin: 0 auto 22px;
  max-width: 42ch;
}

dialog.elpop-modal.mir-torn .wp-block-buttons {
  justify-content: center;
  margin-bottom: 0;
}

dialog.elpop-modal.mir-torn .wp-block-button__link {
  background: var(--wp--preset--color--rust);
  color: var(--wp--preset--color--cream);
  border-radius: 0;
  font-family: var(--wp--preset--font-family--plex-sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 30px;
  transition: background-color 0.2s ease;
}

dialog.elpop-modal.mir-torn .wp-block-button__link:hover,
dialog.elpop-modal.mir-torn .wp-block-button__link:focus {
  background: var(--wp--preset--color--rust-light);
}

dialog.elpop-modal.mir-torn .elpop-close {
  top: 14px;
  right: 14px;
  color: var(--wp--preset--color--brown);
  font-size: 1.35rem;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

dialog.elpop-modal.mir-torn .elpop-close:hover,
dialog.elpop-modal.mir-torn .elpop-close:focus {
  opacity: 1;
}