/* =========================================================
   Mesa Group — site.css
   Elevation build. Depends on colors_and_type.css (tokens + type).
   Register: institutional parent. Survey-instrument restraint.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--fg-primary);
  background: var(--bg-page);
  font-size: var(--t-body-lg);
  font-weight: 600;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--max-content); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--max-prose); }
.eyebrow { /* extends .mg-eyebrow */
  font-family: var(--font-sans); font-weight: 700; font-size: var(--t-eyebrow); /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4 (bold weight + the shared token, not a hardcoded size — colors_and_type.css's --t-eyebrow is unchanged in v4, confirmed 20px there both before and after) */
  text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--mg-navy);
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; vertical-align: middle;
}
.eyebrow__cap { width: 14px; height: 14px; flex: none; display: block; }
[data-surface="dark"] .eyebrow { color: rgba(255,255,255,0.72); }
[data-surface="dark"] .eyebrow__cap { filter: invert(1); }
.lede { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: var(--lh-snug); color: var(--fg-primary); }
.muted { color: var(--fg-secondary); }
.measure { max-width: 62ch; }

/* skip link */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--mg-navy); color: #fff; padding: var(--space-3) var(--space-5); z-index: 200; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--mg-navy);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--space-5); height: 96px; }
.site-header__cta { grid-column: 1; justify-self: start; font-size: 15px; }
.site-header .site-header__cta { background: var(--mg-navy); color: var(--mg-white) !important; border: 2px solid var(--mg-white); border-radius: var(--radius-pill); padding: 9px 16px; font-size: 12.5px; }
.brand { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--fg-primary); }
.brand__cap { width: 26px; height: 26px; flex: none; }
.brand__word { font-family: var(--font-serif); font-weight: 700; font-size: 16px; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.brand__lockup { height: 104px; width: auto; display: block; }
.util-nav { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--space-7); }
.util-nav a { font-family: var(--font-sans); font-weight: 500; font-size: 18px; letter-spacing: 0.04em; text-decoration: none; color: #fff; transition: color var(--dur-fast) var(--ease-standard); }
.util-nav a:hover { color: #fff; }
.util-nav a:nth-child(2):hover { color: var(--mg-terracotta); }
.util-nav a:nth-child(2):active { color: var(--mg-terracotta); }
.util-nav a:nth-child(3):hover { color: var(--mg-olive); }
.util-nav a:nth-child(3):active { color: var(--mg-olive); }
.util-nav a.is-active { color: #fff; }
.cta-button {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.04em;
  background: var(--accent); color: var(--accent-contrast) !important;
  padding: 10px 18px; border-radius: var(--radius-md); text-decoration: none !important;
  border: 1px solid transparent; transition: filter var(--dur-fast) var(--ease-standard);
  display: inline-block; white-space: nowrap;
}
.cta-button:hover { filter: brightness(0.92); }
.cta-glass:hover { filter: none; }
.cta-button--ghost { background: transparent; color: var(--accent) !important; border-color: var(--accent); }
.cta-button--lg { font-size: 15px; padding: 14px 26px; }
.nav-toggle { grid-column: 3; justify-self: end; display: none; background: transparent; border-color: rgba(255,255,255,0.3); }

/* ---------------- Topo background component ---------------- */
.topo-wallpaper { position: relative; }
.topo-wallpaper > .wrap { position: relative; z-index: 1; }
.topo-wallpaper::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--topo-image, url("mg-topo-master.svg"));
  background-repeat: no-repeat;
  background-size: var(--topo-size, 9600px auto);
  background-position: var(--topo-pos, 50% 50%);
  background-attachment: var(--topo-attachment, scroll);
  transform: var(--topo-flip, none);
  mix-blend-mode: var(--topo-blend, normal);
  opacity: var(--wallpaper-opacity, 0.46);
  pointer-events: none;
  z-index: 0;
}
[data-surface="dark"].topo-wallpaper::before, [data-surface="dark"] .topo-wallpaper::before { filter: invert(1); }
[data-surface="dark"].topo-wallpaper, [data-surface="dark"] .topo-wallpaper {
  --wallpaper-opacity: 0.22;
  --topo-blend: screen;
}
.topo-wallpaper::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim-color, #fff);
  opacity: var(--bg-fade, 0);
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
[data-surface="dark"].topo-wallpaper::after, [data-surface="dark"] .topo-wallpaper::after { --scrim-color: var(--mg-navy); }

[data-page="home"]         .topo-wallpaper { --topo-pos: 30% 20%; }
[data-page="home"] .hero { padding-top: 0; padding-bottom: 0; }
[data-page="home"] .hero__tagline { margin-top: calc(-1 * var(--space-11)); }
[data-page="map"]          .topo-wallpaper { --topo-pos: 70% 35%; --topo-image: url('topo-map-1-terracotta.svg'); }
[data-page="map"] .section, [data-page="map"] .hero { padding-top: var(--space-6); padding-bottom: var(--space-6); }
[data-page="built"]        .topo-wallpaper { --topo-pos: 40% 70%; --topo-flip: scaleX(-1); --topo-image: url('topo-map-1-olive.svg'); }
[data-page="built"] .section, [data-page="built"] .hero { padding-top: var(--space-6); padding-bottom: var(--space-6); }
[data-page="work"]         .topo-wallpaper { --topo-pos: 60% 55%; }
[data-page="work"] .section, [data-page="work"] .hero { padding-top: var(--space-6); padding-bottom: var(--space-6); }
[data-page="writings"]     .topo-wallpaper { --topo-pos: 25% 65%; --topo-flip: scaleX(-1); }
[data-page="writings"] .section, [data-page="writings"] .hero { padding-top: var(--space-5); padding-bottom: var(--space-5); }
[data-page="book-a-brief"] .topo-wallpaper { --topo-pos: 50% 40%; --topo-image: url('topo-map-1-navy.svg'); }

/* ---------------- Hero ---------------- */
.hero { padding: var(--space-9) 0 var(--space-7); position: relative; overflow: hidden; }
.hero--topo .wrap { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: var(--space-6); }
.hero h1 {
  font-family: var(--font-serif); font-weight: 700; font-size: 48px; /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: Hero H1 (was a responsive clamp) */
  line-height: 1.05; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6); max-width: 18ch;
}
.hero__sub { font-size: 19px; line-height: var(--lh-normal); color: var(--fg-secondary); max-width: 56ch; margin: 0 0 var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero__tagline { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: 13px; color: var(--accent); margin-bottom: var(--space-5); } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: captions/metadata/dates/tags */

/* ---------------- THE ROUTE ---------------- */
.route { position: relative; }
.route__runway { position: relative; }
.route__stage {
  height: auto;
  display: flex; align-items: center; justify-content: center; padding: var(--space-7) 0;
}
.route__frame {
  position: relative; width: min(1320px, 100%); aspect-ratio: 1400 / 1040; max-height: 100%;
  background: var(--mg-navy); border: 1px solid var(--border-hairline); overflow: hidden;
}
.route__canvas-wrap { position: absolute; inset: 0; }
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.route__detail { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.route__casing { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; }
.route__track { fill: none; stroke: #fff; stroke-opacity: 0.22; stroke-width: 1.5; stroke-linecap: round; }
.route__track-dots { fill: none; stroke: #fff; stroke-opacity: 0.34; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1.5 8; }
.route__trail { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.route__trail--map { stroke: var(--mg-terracotta); }
.route__trail--build { stroke: var(--mg-olive); }
.route__head { fill: #fff; stroke: var(--mg-terracotta); stroke-width: 3; opacity: 0; }
.route__head.is-build { stroke: var(--mg-olive); }
.route__head.is-live { opacity: 1; }

.route__node { opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
.route__node.is-on { opacity: 1; }
.route__disc { transform-box: fill-box; transform-origin: center; transform: scale(0.001); transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1); stroke: #fff; stroke-width: 3; }
.route__node.is-on .route__disc { transform: scale(1); }
.route__node--point .route__disc { fill: var(--mg-terracotta); }
.route__node--built .route__disc { fill: var(--mg-olive); }
.route__ring { fill: none; stroke: var(--mg-terracotta); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.route__node--built .route__ring { stroke: var(--mg-olive); }
.route__node.is-pulse .route__ring { animation: route-ping 0.64s ease-out; }
@keyframes route-ping { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.route__label { font-family: var(--font-serif); font-weight: 700; font-size: 22.5px; fill: #fff; paint-order: stroke; stroke: var(--mg-navy); stroke-width: 4.5; stroke-linejoin: round; }
.route__seam { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; fill: rgba(255,255,255,0.72); opacity: 0; transition: opacity var(--dur-slow); paint-order: stroke; stroke: var(--mg-navy); stroke-width: 4; stroke-linejoin: round; }
.route__seam.is-on { opacity: 1; }

.route__copy {
  position: absolute; left: 0; top: 0; height: 100%; width: 41%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 5vh, 64px) clamp(28px, 4vw, 64px); z-index: 2;
}
.route__eyebrow span { color: var(--mg-terracotta); margin-right: var(--space-2); }
.route__row {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--space-3);
  padding: clamp(6px, 0.9vh, 9px) clamp(8px, 1vw, 12px); opacity: 0.65; transform: translateX(-8px);
  background: rgba(15,34,56,0.5); border-radius: var(--radius-sm);
  transition: opacity 0.28s var(--ease-standard), transform 0.28s var(--ease-standard);
}
.route__row.is-on { opacity: 1; transform: none; }
.route__num { font-family: var(--font-serif); font-weight: 700; font-size: 22.5px; color: var(--mg-terracotta); padding-top: 3px; }
.route__row[data-n="IV"] .route__num, .route__row[data-n="V"] .route__num, .route__row[data-n="VI"] .route__num, .route__row[data-n="VII"] .route__num { color: var(--mg-olive); }
.route__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(17px, min(1.25vw, 2.2vh), 20px); margin: 0 0 2px; color: #fff; }
.route__desc { font-family: var(--font-sans); font-weight: 700; font-size: clamp(15px, min(1.05vw, 1.9vh), 17.5px); line-height: 1.4; margin: 0; color: #fff; max-width: 42ch; }
.territory-tag { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #fff; }
.route__caption { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #fff; margin-top: var(--space-3); }

/* Route section: navy surround, animation frame stays untouched (white) */
#the-route { background: var(--mg-navy); }
#the-route .eyebrow { color: rgba(255,255,255,0.72); }
#the-route .section__head h2 { color: #fff; }
#the-route .section__head .section__intro { color: rgba(255,255,255,0.72); }

.route__runway--portrait, .route__frame--portrait { display: none; }
.route__mobile-list { display: none; }
.route__mobile-item { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid rgba(255,255,255,0.14); }
.route__mobile-num { font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--mg-terracotta); }
.route__mobile-item:nth-child(n+5) .route__mobile-num { color: var(--mg-olive); }
.route__mobile-title { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: #fff; margin: 0 0 4px; }
.route__mobile-desc { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: #fff; margin: 0; }
@media (max-width: 860px) {
  .route__runway { display: none; }
  .route__runway--portrait { display: block; }
  .route__stage--portrait { height: auto; display: flex; align-items: center; padding: var(--space-5) 0; }
  .route__frame--portrait { display: flex; flex-direction: column; width: 100%; aspect-ratio: auto; max-height: none; overflow: visible; }
  .route__frame--portrait .route__canvas-wrap { position: relative; width: 100%; aspect-ratio: 7 / 9; background: var(--bg-page); border: 1px solid var(--border-hairline); }
  .route__frame--portrait .route__svg { position: absolute; inset: 0; }
  .route__copy--portrait { position: static; width: 100%; height: auto; padding: var(--space-5) 0 0; z-index: auto; }
}
.route__rail--portrait { margin-top: var(--space-4); height: 170px; overflow: hidden; position: relative; }
.route__rail-inner { position: absolute; left: 0; right: 0; top: 0; will-change: transform; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.route__rail--portrait .route__row { padding: var(--space-2) 0; opacity: 0.65; transition: opacity 0.28s ease; grid-template-columns: 30px 1fr; }
.route__rail--portrait .route__row.is-on { opacity: 1; }
.route__rail--portrait.is-wide .route__row { opacity: 1; padding: 3px 0; }
.route__rail--portrait .route__desc {
  max-height: 60px; transition: max-height 0.3s ease, opacity 0.22s ease, margin 0.3s ease;
}
.route__rail--portrait.is-wide .route__desc { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .route__rail-inner, .route__rail--portrait .route__row, .route__rail--portrait .route__desc { transition: none; }
}

/* ---------------- Generic sections ---------------- */
.section { padding: var(--space-8) 0; }
.section--subtle {
  background-color: var(--bg-subtle);
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 39px,
    rgba(15,34,56,0.028) 39px,
    rgba(15,34,56,0.028) 40px
  );
}
.section--dark { background: var(--bg-inverse); }
.section__head { max-width: 64ch; margin-bottom: var(--space-9); }
.section__num { font-family: var(--font-serif); font-weight: 700; color: var(--accent); font-size: 15px; }
.section h2 { font-size: 30px; line-height: 1.12; margin: var(--space-3) 0 var(--space-4); } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: Section H2 (was a responsive clamp) */
.section__intro { font-size: 18px; color: var(--fg-secondary); line-height: var(--lh-normal); }
.cap-rule { width: 24px; height: 24px; position: relative; background: var(--accent); margin-bottom: 0; margin-right: var(--space-3); display: inline-flex; vertical-align: middle; }
.cap-rule::before { content:""; position:absolute; top:0; left:0; right:0; height:8.3%; background: var(--mg-navy); }
.cap-rule::after { content:""; position:absolute; top:8.3%; left:0; right:0; height:10.4%; background: var(--bg-page); }
.section--subtle .cap-rule::after { background: var(--bg-subtle); }

/* four-category map */
.fourmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.cat { }
.cat__name { font-family: var(--font-serif); font-weight: 700; font-size: 19px; margin-bottom: var(--space-3); }
.cat__desc { font-size: 14px; color: var(--fg-secondary); line-height: var(--lh-normal); }

/* two doors */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-13); }
.door { border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-5) var(--space-3); background: var(--bg-panel); display: flex; flex-direction: column; }
.door--point { --accent: var(--mg-terracotta); }
.door--built { --accent: var(--mg-olive); }
.door__cap { height: 40px; width: auto; flex: none; margin: 8px auto 4px; display: block; }
.door h3 { font-size: 24px; margin-bottom: var(--space-3); }
.door p { color: var(--fg-secondary); margin-bottom: var(--space-5); }
.door__list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.door__list li { padding: var(--space-2) 0; border-top: 1px solid var(--border-hairline); font-size: 15px; }
.door__foot { margin-top: auto; text-align: center; }

/* engagement shapes */
.shapes { display: grid; gap: var(--space-5); }
.shape { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-5); align-items: start; padding: var(--space-6) 0; border-top: 1px solid var(--border-hairline); }
[data-page="map"] .shape, [data-page="built"] .shape, [data-page="work"] .shape { border-top: 2px solid var(--mg-navy); }
[data-page="work"] .shapes .shape { border-top: none; background: rgba(255,255,255,0.6); border: none; border-radius: var(--radius-sm); padding: var(--space-6); }
[data-page="map"] .shape:first-child, [data-page="built"] .shape:first-child, [data-page="work"] .shape:first-child { border-top: none; }
.shape__num { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--accent); }
.shape__name { font-family: var(--font-serif); font-weight: 700; font-size: 19px; }
.shape__what { color: var(--fg-secondary); font-size: 15px; margin-top: var(--space-2); max-width: 60ch; }
.shape__own { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.03em; color: var(--fg-muted); margin-top: var(--space-3); } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: captions/metadata/dates/tags */
.shape__own b { color: var(--accent); font-weight: 600; }
[data-page="map"] .shape__name { font-size: 20px; }
[data-page="map"] .shape__what { font-size: 18px; }
[data-page="map"] .shape__own { font-size: 13px; } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: was a page-specific deviation (16px), normalized */

/* proof / case */
.proof { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: start; }
.proof > * { min-width: 0; }
.proof__figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); min-width: 0; }
.fig { border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: var(--space-6); background: var(--bg-panel); min-width: 0; }
.fig__num { font-family: var(--font-serif); font-weight: 700; font-size: 30px; line-height: 1; }
.fig__label { font-family: var(--font-sans); font-size: 12px; color: var(--fg-secondary); margin-top: var(--space-3); line-height: 1.4; }
.pending-cert { display: inline-block; font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mg-terracotta); background: rgba(218,94,0,0.08); border: 1px dashed rgba(218,94,0,0.5); border-radius: var(--radius-xs); padding: 3px 7px; }
.fig__num.pending-cert { font-size: 12px; padding: 6px 9px; }

/* visible placeholders */
.placeholder { border: 1px dashed var(--mg-gray-400); border-radius: var(--radius-sm); padding: var(--space-6); background: repeating-linear-gradient(135deg, var(--mg-gray-50), var(--mg-gray-50) 10px, #fff 10px, #fff 20px); color: var(--fg-secondary); }
.placeholder__tag { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mg-gray-500); display: block; margin-bottom: var(--space-2); } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: captions/metadata/dates/tags */
.headshot-ph { width: 96px; height: 96px; border-radius: var(--radius-sm); display: grid; place-items: center; text-align: center; }
.headshot { width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; display: block; }

/* principals */
.principals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.principal { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-5); align-items: start; }
.principal h3 { font-size: 20px; }
.principal .role { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--accent); text-transform: uppercase; margin: var(--space-1) 0 var(--space-3); } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: captions/metadata/dates/tags */

/* writing / findings index */
.findings-list { list-style: none; padding: 0; margin: 0; }
.finding { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4) var(--space-6); padding: var(--space-7) 0; border-top: 1px solid var(--border-hairline); align-items: baseline; }
.finding__cat { font-family: var(--font-sans); font-size: 13px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent); } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: captions/metadata/dates/tags */
.finding h3 { font-size: 22px; margin: var(--space-2) 0; }
.finding p { color: var(--fg-secondary); font-size: 15px; max-width: 64ch; }
.finding__date { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #fff; background: var(--mg-navy); white-space: nowrap; display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: captions/metadata/dates/tags */

/* ---------------- Forms (briefing intake) ---------------- */
.intake { display: grid; gap: var(--space-7); max-width: 640px; }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 4px; background: var(--mg-navy); color: #fff; padding: 6px 12px; border-radius: var(--radius-pill); width: fit-content; }
.field .req { color: var(--mg-terracotta); }
.field input, .field select, .field textarea {
  font-family: var(--font-serif); font-size: 16px; color: var(--mg-olive); font-weight: 600;
  padding: 12px 14px; border: 1px solid var(--mg-terracotta); border-radius: var(--radius-sm); background: #fff; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-note { font-size: 13px; color: var(--fg-muted); }
.form-status { padding: var(--space-5); border-radius: var(--radius-sm); font-size: 15px; display: none; }
.form-status.is-ok { display: block; background: rgba(79,119,90,0.1); border: 1px solid rgba(79,119,90,0.4); }
.form-status.is-err { display: block; background: rgba(218,94,0,0.08); border: 1px solid rgba(218,94,0,0.4); }
.newsletter-form__row { display: flex; gap: var(--space-4); max-width: 460px; }
.newsletter-form__row input { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------------- Footer ---------------- */
.site-footer { position: relative; z-index: 1; background: var(--mg-navy); color: rgba(255,255,255,0.8); padding: var(--space-8) 0 var(--space-6); }
.site-footer a { color: rgba(255,255,255,0.8); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: block; }
.footer__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.footer__desc { max-width: 44ch; line-height: var(--lh-normal); font-size: 14px; color: rgba(255,255,255,0.66); }
.footer__col h4 { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: rgba(255,255,255,0.5); margin-bottom: var(--space-4); }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); font-size: 14px; }
.footer__legal { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--font-sans); font-size: 13px; color: rgba(255,255,255,0.5); display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } /* Roy global type scale, 2026-08-07, re-applied 2026-08-11 against v4: captions/metadata/dates/tags */
.tagline-mark { font-family: var(--font-serif); font-style: italic; color: rgba(255,255,255,0.8); }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .fourmap { grid-template-columns: 1fr 1fr; }
  .doors, .proof, .principals { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .shape { grid-template-columns: 40px 1fr; }
  .shape__foot { grid-column: 2; }
  [data-page="home"] #statResearch > .wrap > div[style*="repeat(5"] { grid-template-columns: 1fr 1fr; }
  [data-page="work"] div[style*="repeat(3"] { grid-template-columns: 1fr !important; }
  [data-page="writings"] .section div[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  [data-page="home"] #statResearch > .wrap > div[style*="repeat(5"] { grid-template-columns: 1fr; }
  [data-page="home"] #statResearch div[style*="height: 352px"] { height: auto; min-height: 240px; }
}
@media (max-width: 900px) {
  .brand__word { display: none; }
  .util-nav { display: none; }
  .util-nav.is-open { display: flex; position: absolute; top: 96px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); background: var(--mg-navy); border-bottom: 1px solid rgba(255,255,255,0.14); padding: var(--space-6) var(--gutter); z-index: 90; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.3); background: transparent; border-radius: var(--radius-sm); }
  .site-header__cta { padding: 10px 14px; font-size: 12px; }
}
@media (max-width: 620px) {
  .route__runway, .route__runway--portrait { display: none !important; }
  .route__mobile-list { display: grid !important; gap: var(--space-6); }
  .topo-wallpaper::before { background-attachment: fixed; }
  .hero h1, .hero h1 span { white-space: normal !important; }
  .site-header__cta { display: none; }
  .fourmap { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .hero { padding: var(--space-11) 0 var(--space-9); }
  #main div[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------- What We Solve (Phase 3, 2026-08-11) ---------------- */
/* Torn-edge decoration on every volume band — identical across all six
   volumes in v4's own React source (bandAfterStyle never varies per
   group), so one shared rule replaces what v4 computed per-render. */
.solve-volume__band::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 12px;
  background: repeating-linear-gradient(180deg, #efe9db 0, #efe9db 2px, #d8cfba 2px, #d8cfba 3px);
  border-radius: 0 3px 3px 0;
  box-shadow: inset 2px 0 4px rgba(0,0,0,0.18);
}
.solve-book-row:hover { background: rgba(255,255,255,0.4); }

/* MG_solve-sticky-books-width-fix_v1.md: native position:sticky on
   .solve-books-col (see page-templates.mjs) needs no JS-measured width and
   no internal overflow-y:auto/scrollbar — both named root causes of the
   width-narrows-on-scroll bug don't apply to this mechanism by
   construction. Mobile: same pattern as v4's own .v4-grid override —
   stack the columns and drop sticky entirely below the breakpoint where a
   pinned sidebar doesn't make sense next to a single narrow column anyway. */
@media (max-width: 900px) {
  .solve-grid { flex-direction: column !important; align-items: stretch !important; }
  .solve-grid > div { position: static !important; max-width: none !important; flex-basis: auto !important; align-self: stretch !important; }
  /* align-items:stretch (parent) alone wasn't enough — .solve-books-col
     also carries its own inline align-self:flex-start (correct on desktop:
     top-aligns it against its sibling column), which overrides the
     parent's align-items for that one child regardless. Once
     flex-direction flips to column here, flex-start on the now-horizontal
     cross axis stops it from filling the column's width and lets it size
     to its own content instead — 36px wider than its own parent, caught
     live at 375px (347px rendered vs. 311px available), overflowing the
     viewport by 4px net. align-self:stretch on the child (added via the
     existing ".solve-grid > div" selector above) is what actually fixes
     it; the stagger-margin fix below is a separate, additional overflow
     source layered on top of this one. */
  /* .solve-volume__band's margin-left is per-volume inline JS (SOLVE_BAND_MARGIN,
     page-templates.mjs) — a deliberate bookshelf stagger, some volumes
     offset right (up to 22px), some left (up to -14px). At full width
     each band already sits at width:${widthPct}%, min-width:0, so the
     stagger has slack to work within; below this breakpoint the same
     margin pushes staggered volumes past the viewport edge (14-36px of
     real horizontal scroll, caught live at 375px). !important is required
     to win over the inline style — collapses the stagger to 0 here only;
     desktop (above 900px) keeps the effect exactly as authored. */
  .solve-volume__band { margin-left: 0 !important; }
}


/* ---- mobile fixups (build-side, DIVERGENCE-LOG.md) ---- */
@media (max-width: 620px) {
  /* D7 (amended): .topo-wallpaper still pins on mobile via
     background-attachment:fixed on a ::before pseudo-element (site.css line
     ~370) — the exact pattern AC-14 forbids by name; mobile WebKit renders
     it unreliably. Disable it outright below this breakpoint and let the
     injected .mg-topo-mobile-fixed div (Built's own proven mechanism,
     injectMobileFixedWallpaper() above) take over instead. Desktop is
     untouched — the original ::before mechanism still renders there. */
  .topo-wallpaper::before { content: none; }
  .mg-topo-mobile-fixed { display: block !important; }

  /* D8: a handful of headings/paragraphs across the export carry a
     hardcoded desktop pixel width with no responsive override, forcing
     horizontal overflow at narrow viewports. Auto-discovered from every
     inline width >= 400px across all pages (discoverWideFixedWidths above)
     rather than hand-maintained, so a future export's new culprits are
     caught without needing to notice them by hand. */
  [style*="width: 420px"], [style*="width: 440px"], [style*="width: 560px"], [style*="width: 600px"], [style*="width: 620px"], [style*="width: 640px"], [style*="width: 720px"], [style*="width: 780px"], [style*="width: 820px"], [style*="width: 842px"], [style*="width: 863px"], [style*="width: 900px"] { width: 100% !important; height: auto !important; }

  /* D8: .eyebrow is nowrap by design (keeps the small cap-rule glyph +
     tracked-out uppercase label on one line) — fine for short eyebrows, but
     several run long and force horizontal overflow at narrow widths with
     nowrap intact. */
  .eyebrow { white-space: normal !important; flex-wrap: wrap !important; }

  /* D8 (new this pass): .cta-button is nowrap by design too, sitewide, no
     mobile override in site.css. Fine for short labels, but several CTAs
     carry longer text in this export (e.g. "Eight questions / See it
     yourself, instantly ->") that forces horizontal overflow at 390px with
     nowrap intact — found live via the acceptance suite's mobile-overflow
     check. */
  .cta-button { white-space: normal !important; }
}

/* D8 sub-bullet (07-22, still unfixed in v3_1): the borrowed-stat band's
   5-column grid row carries its column count as an INLINE style
   (style="grid-template-columns: repeat(5, 1fr)"). site.css's own mobile
   override for this exact element (selector: [data-page="home"]
   #statResearch > .wrap > div[style*="repeat(5"], rule: grid-template-
   columns: 1fr, at max-width: 560px — site.css's own breakpoint for this
   rule, matched here rather than reusing the 620px block above) has no
   !important, so the inline style always wins and the intended mobile
   collapse silently never fires — confirmed live via the acceptance
   suite's mobile-overflow check, same root cause as 07-22, not folded in
   this export either. */
@media (max-width: 560px) {
  [data-page="home"] #statResearch > .wrap > div[style*="repeat(5"] { grid-template-columns: 1fr !important; }
}
.mg-topo-mobile-fixed {
  display: none;
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}


/* ---- HITL-1 corrections pass (2026-08-06) ---- */
/* HOME 2: header-to-hero gap, decided at +40px (the Architect's pick from
   the render-alternates). */
[data-page="home"] .hero { padding-top: 40px; }

/* ---- HITL-1 corrections pass round 2 (2026-08-07) ---- */
/* SELF ASSESSMENT 4 — tuning: excess white space between the intro
   ("Answer eight short questions...") and "QUESTION 1 OF 8". Measured
   directly (working-artifacts/measure-sa-gap.mjs): 72px total, of which
   40px was .hero__sub's own sitewide margin-bottom (var(--space-8)),
   stacked on top of the hero's 16px padding-bottom and the next section's
   16px padding-top — excessive because this hero has nothing else inside it
   after the intro paragraph. Scoped to this page only (.hero__sub is a
   shared sitewide class) so no other page's hero spacing is touched.
   Zeroing it leaves the hero/section's own 16px+16px, landing the gap at
   32px — re-measured to confirm. */
[data-page="self-assessment"] .hero__sub { margin-bottom: 0; }