/* _shared/brand/estate.css  |  estate brand kit v1.4.0  (2026-10-16)
 *
 * THE one source of the Magnum Nexus brass palette for every destination
 * page in the estate. Served by footer-worker at
 *   https://footer-worker.ignis-api.workers.dev/brand/estate.css
 * Edit THIS file, deploy footer-worker, every page that links it picks the
 * change up within a day. Never copy it into a site. Same principle as
 * _shared/footer.json (see CLAUDE.md, "The quick links footer has ONE
 * source").
 *
 * Anric's ruling, 2026-10-16: all destination pages, home page included,
 * move off the flat yellow (#fabd59 / #f0c173) onto the Magnum Nexus
 * colour scheme. Palette source of truth: nexus-site/NEXUS-STYLE.md
 * (section 1) and magnumvault.com homepage v4.2+ (home-src/home.css).
 * Gold is metallic, never flat. Gold is an ACCENT: headings are white,
 * body is #ccc, gold marks eyebrows, links, numbers, strokes and buttons.
 *
 * House rules honoured: no italics, no pill radii (6 to 10px only), no em
 * dashes, Russo One headings, Inter body.
 *
 * Three layers, in order:
 *   1. TOKENS      --mv-* custom properties. Always safe, change nothing
 *                  by themselves.
 *   2. REMAP       re-points the legacy variable names the estate's sites
 *                  already use (--gold, --mv-gold, --mom-gold, --accent...)
 *                  at the brass tokens, so a site whose CSS is written
 *                  against variables turns brass by linking this file.
 *                  Specificity is :root:not(.mv-no-estate), so it beats a
 *                  site's own :root block whatever the link order.
 *                  Opt out per page with <html class="mv-no-estate">.
 *                  Hard-coded hex values in a site's CSS are NOT touched
 *                  by this layer; the rollout checklist sweeps those.
 *   3. COMPONENTS  .mv-estate-logo (the header logo badge), the brass
 *                  colours of the shared .ql-* quick links footer, and
 *                  .mv-estate-header (v1.1.0: the shared estate header,
 *                  full / app / minimal, section 3c).
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* brass, sampled from the Magnum Nexus logo, lit from the upper left */
  --mv-brass-hot: #f9e6bd;      /* top of gradients, hot text */
  --mv-brass-light: #e0c592;    /* outline button text, hover text */
  --mv-brass: #d6ad66;          /* text gold: eyebrows, links, numbers */
  --mv-brass-rich: #b17e38;     /* strokes, quote rules, featured borders */
  --mv-brass-deep: #8f6229;     /* button borders, gradient lows */
  --mv-brass-dark: #684117;     /* deepest gear shading */
  --mv-brass-glow: rgba(177, 126, 56, 0.45);

  /* v1.3.0: the darkest stop was #8f6229, which put the dark button ink (#1a1206)
     at 3.5:1. Raised to #b17e38 (5.2:1) so button text clears 4.5:1. Borders
     keep --mv-brass-deep. */
  --mv-metal-gradient: linear-gradient(135deg, #f9e6bd 0%, #e0c592 20%, #b17e38 48%, #b17e38 72%, #d9b26e 100%);
  --mv-metal-text: linear-gradient(180deg, #f9e6bd 0%, #e0c592 35%, #b17e38 75%, #8f6229 100%);

  /* surfaces */
  --mv-ink: #0a0a0c;            /* page */
  --mv-ink-pure: #000;
  --mv-panel: rgba(8, 8, 12, 0.74);
  --mv-panel-dim: rgba(8, 8, 12, 0.62);

  /* text */
  --mv-text: #ffffff;           /* headings and leads */
  --mv-text-body: #cccccc;
  --mv-text-muted: #888888;

  /* lines */
  --mv-border: rgba(177, 126, 56, 0.32);
  --mv-border-soft: rgba(177, 126, 56, 0.22);
  --mv-border-faint: rgba(177, 126, 56, 0.14);
  --mv-border-strong: rgba(177, 126, 56, 0.8);

  /* red is for loss and urgency only, never a button or a heading */
  --mv-danger: #dc143c;

  /* radii: 6 to 10px. Never 999px, 9999px or 50% on rectangular chrome. */
  --mv-radius-sm: 6px;
  --mv-radius-md: 8px;
  --mv-radius-lg: 10px;

  --mv-gutter: max(16px, 3vw);

  --mv-font-display: 'Russo One', sans-serif;
  --mv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mv-font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

/* ==========================================================================
   2. REMAP: legacy variable names -> brass tokens
   Names found across the estate's site CSS (counted 2026-10-16) that carried
   the old yellow. `body` is in the selector because some sites (the mom-*
   family, the dashboard ports) also redeclare these on body, which would
   otherwise win by inheritance.

   Deliberately NOT remapped, because the same name means different things
   in different sites and a blanket rule would break one of them:
     --gold-soft (a pale gold in some sites, a dark tint #2e2415 in others)
     --brass, --brass-hi, --brass-lo, --brass-soft (light-theme palettes)
     --yellow (#faf089, a UI highlight, not the brand gold)
     --brand* (crimson, orange and amber sets belong to other products)
     --accent when it is blue (opus planner theme): those pages set
       <html class="mv-no-estate"> or simply do not link this file.
   --mv-gold is a light-theme value on a few pages (#8a5f12, #c0c0c0): such
   pages also add mv-no-estate.
   ========================================================================== */
:root:not(.mv-no-estate),
:root:not(.mv-no-estate) body {
  /* text gold, the primary accent */
  --gold: var(--mv-brass);
  --gold-ops: var(--mv-brass);
  --gold-bright: var(--mv-brass-light);
  --gold-light: var(--mv-brass-light);
  --gold-hot: var(--mv-brass-hot);
  --gold-strong: var(--mv-brass-rich);
  --gold-dark: var(--mv-brass-deep);
  --gold-border: var(--mv-brass-deep);
  --accent: var(--mv-brass);
  --accent-strong: var(--mv-brass-rich);
  --accent-glow: var(--mv-brass-glow);
  --accent-gold: var(--mv-brass);
  --accent-gold-bright: var(--mv-brass-light);
  --accent-gold-deep: var(--mv-brass-rich);
  --primary-gold: var(--mv-brass);
  --amber: var(--mv-brass);
  --c-gold: var(--mv-brass);
  --hl-color-accent: var(--mv-brass);

  /* mom-* (Momentum) family: values from NEXUS-STYLE.md section 1 verbatim */
  --mom-gold: var(--mv-brass-light);
  --mom-gold-ops: var(--mv-brass);
  --mom-gold-bright: var(--mv-brass);
  --mom-gold-dark: var(--mv-brass-deep);
  --mom-gold-border: var(--mv-brass-deep);
  --mom-gold-hot: var(--mv-brass-hot);
  --mom-gold-dim: rgba(214, 173, 102, 0.08);
  --mom-amber: var(--mv-brass-light);
  --mom-border-faint: var(--mv-border-faint);
  --mom-border-soft: var(--mv-border-soft);
  --mom-border: var(--mv-border);
  --mom-border-strong: rgba(177, 126, 56, 0.5);
  --mom-text-body: var(--mv-text-body);
  --mom-text-muted: var(--mv-text-muted);

  /* mv-* (dashboard ports, mvp, events) family */
  --mv-gold: var(--mv-brass);
  --mv-gold-mid: var(--mv-brass-rich);
  --mv-gold-dark: var(--mv-brass-rich);
  --mv-gold-border: var(--mv-brass-deep);

  /* per-product prefixes that were copies of the same yellow */
  --evk-gold: var(--mv-brass);
  --evk-gold-bright: var(--mv-brass);
  --evk-gold-hot: var(--mv-brass-hot);
  --evk-gold-dark: var(--mv-brass-rich);
  --mnt-gold: var(--mv-brass);
  --ps-gold: var(--mv-brass);
  --tm-gold: var(--mv-brass);
  --tm-gold-dark: var(--mv-brass-rich);
  --so-gold: var(--mv-brass);
  --credo-gold: var(--mv-brass);

  /* the metallic gradients, for sites that already ask for them by name */
  --gold-metal: var(--mv-metal-gradient);
  --gold-metal-text: var(--mv-metal-text);
  --gold-text: var(--mv-metal-text);
}

/* ==========================================================================
   3a. THE HEADER LOGO BADGE
   Markup is added per site, never injected:
     <a class="mv-estate-logo" href="https://magnumvault.com" aria-label="Magnum Vault home">
       <picture>
         <source type="image/webp" srcset="https://footer-worker.ignis-api.workers.dev/brand/mv-logo.webp">
         <img src="https://footer-worker.ignis-api.workers.dev/brand/mv-logo.png" width="48" height="48" alt="" decoding="async">
       </picture>
     </a>
   Default is an inline badge you drop into your own header, top left.
   Add .mv-estate-logo--corner on pages with no header at all: it pins the
   badge to the top-left corner of the page (absolute, scrolls away, never
   covers content because the page adds .mv-estate-top padding below).
   Same turn-once-on-load as the Nexus header logo (NEXUS-STYLE.md, Motion).
   ========================================================================== */
.mv-estate-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 3px;
  background: rgba(8, 8, 12, 0.88);
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-lg);
  text-decoration: none;
  line-height: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mv-estate-logo picture { display: block; line-height: 0; }
.mv-estate-logo img {
  display: block;
  width: 48px;
  height: 48px;
  max-width: none;
  transform-origin: 50% 50%;
  animation: mv-estate-turn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s 1 backwards;
}
.mv-estate-logo:hover,
.mv-estate-logo:focus-visible {
  border-color: var(--mv-brass);
  box-shadow: 0 6px 20px var(--mv-brass-glow);
  transform: translateY(-1px);
}
.mv-estate-logo:focus-visible { outline: 2px solid var(--mv-brass); outline-offset: 3px; }
.mv-estate-logo--corner {
  position: absolute;
  top: 12px;
  left: var(--mv-gutter);
  z-index: 1000;
}
/* a page using --corner gives its first block this much top room */
.mv-estate-top { padding-top: 84px; }
@keyframes mv-estate-turn {
  from { transform: rotate(-360deg); }
  to { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mv-estate-logo img { animation: none; }
  .mv-estate-logo:hover, .mv-estate-logo:focus-visible { transform: none; }
}

/* ==========================================================================
   3b. QUICK LINKS FOOTER: brass colours only
   Layout stays with each site's own .ql-* block (or with /brand/quicklinks.css
   when estate.js injected the footer). These rules only move the yellow
   (#fabd59, #f0c173) used in that block onto brass. Selectors are raised by
   :root:not(.mv-no-estate) so they win whatever the stylesheet order.
   ========================================================================== */
:root:not(.mv-no-estate) .ql-section-label { color: var(--mv-brass); }
:root:not(.mv-no-estate) .ql-icon { color: rgba(214, 173, 102, 0.78); }
:root:not(.mv-no-estate) .ql-lock { color: rgba(214, 173, 102, 0.65); }
:root:not(.mv-no-estate) .ql-tile:hover,
:root:not(.mv-no-estate) .ql-tile:focus-visible,
:root:not(.mv-no-estate) .ql-tile--current {
  background: rgba(177, 126, 56, 0.14);
  border-color: var(--mv-border);
}
:root:not(.mv-no-estate) .ql-tile:hover .ql-icon,
:root:not(.mv-no-estate) .ql-tile:focus-visible .ql-icon {
  color: var(--mv-brass-light);
  filter: drop-shadow(0 0 4px var(--mv-brass-glow));
}
:root:not(.mv-no-estate) .ql-tile:hover .ql-label,
:root:not(.mv-no-estate) .ql-tile:focus-visible .ql-label,
:root:not(.mv-no-estate) .ql-tile:hover .ql-label .l2,
:root:not(.mv-no-estate) .ql-tile:focus-visible .ql-label .l2,
:root:not(.mv-no-estate) .ql-tile--current .ql-label { color: var(--mv-brass-light); }
:root:not(.mv-no-estate) .ql-tile::after {
  background: linear-gradient(100deg, transparent 35%, rgba(224, 197, 146, 0.30) 50%, transparent 65%);
}

/* ==========================================================================
   3c. THE SHARED ESTATE HEADER  (v1.1.0)
   One header, three variants, chosen by an attribute. Lifted from the
   magnumvault.com homepage header (home-src/home.css, #mv-nav row 1), so the
   corner of every destination looks the same:
     full     72px  logo + wordmark (+ site label), centred Cafe badge, logins.
                    The site keeps its OWN nav as a second row, outside the kit.
     app      56px  logo + wordmark (+ site label), MVP LOGIN or the app's slot.
     minimal  56px  logo + wordmark (+ site label), the page's own CTA in the slot.
   The LEFT BLOCK (.mv-eh-left) is identical in all three: same 48px logo, same
   position, same Russo One wordmark. Markup comes from estate.js (placeholder
   <header data-mv-estate-header="full|app|minimal">) or from the server side
   GET /brand/header.html. Both produce the same DOM.
   v1.2.0 adds OWN-BRAND MODE (.mv-estate-header--own): a destination with its
   own logo shows it, with its own name, in the same left block (same 48px box
   at the same x/y, name on the Magnum Vault wordmark's baseline), and gets a
   RETURN MARK at the far right end: the 32px brass logo + MAGNUM VAULT, a thin
   brass divider before it, linking https://magnumvault.com. Below 700px the
   return mark is the logo only. A Vault page (no brand params) has no return
   mark and is unchanged.
   v1.3.0: parent=mvp (own-brand only) swaps the return mark for the MVP logo +
   THE MVP, linking https://mvp.magnumvault.com, for anything inside the MVP.
   Same size and position as the Magnum Vault return mark.
   Place the header as a direct child of <body>, first element, so sticky and
   the banner landmark work. Squared controls only, no italics.
   ========================================================================== */
.mv-estate-header,
.mv-estate-header *,
.mv-estate-header *::before,
.mv-estate-header *::after { box-sizing: border-box; }

/* before estate.js has rendered a placeholder: hold its height, no layout jump */
header[data-mv-estate-header]:not(.mv-estate-header) {
  display: block;
  height: 72px;
  background: #0a0a0c;
  border-bottom: 1px solid var(--mv-border, rgba(177, 126, 56, 0.32));
}
header[data-mv-estate-header="app"]:not(.mv-estate-header),
header[data-mv-estate-header="minimal"]:not(.mv-estate-header) { height: 56px; }

.mv-estate-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: block;
  width: 100%;
  height: 72px;
  margin: 0;
  padding: 0;
  background: #0a0a0c;
  border: 0;
  border-bottom: 1px solid var(--mv-border, rgba(177, 126, 56, 0.32));
  box-shadow: none;
  transform: none;
  font-family: var(--mv-font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
}
.mv-estate-header--app,
.mv-estate-header--minimal { height: 56px; }

.mv-estate-header .mv-eh-bar {
  display: grid;
  /* v1.3.1: the right column never shrinks below its content (max-content), so
     a heavy right side pushes the badge off centre instead of overlapping it;
     the left block absorbs the squeeze (the own name ends in an ellipsis) */
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 24px;
  height: 100%;
  width: min(1800px, calc(100% - 2 * var(--mv-gutter, max(16px, 3vw))));
  margin: 0 auto;
  padding: 0;
}
.mv-estate-header .mv-eh-left { grid-column: 1; display: flex; align-items: center; justify-self: start; min-width: 0; max-width: 100%; }
.mv-estate-header .mv-eh-center { grid-column: 2; justify-self: center; display: flex; align-items: center; }
.mv-estate-header .mv-eh-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }

/* the left block: logo + wordmark (+ divider + label). Same in every variant. */
.mv-estate-header .mv-eh-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}
.mv-estate-header .mv-eh-brand picture { display: block; line-height: 0; flex: none; }
.mv-estate-header .mv-eh-logo {
  display: block;
  width: 48px;
  height: 48px;
  max-width: none;
  border: 0;
  border-radius: 0;
  transform-origin: 50% 50%;
  animation: mv-estate-turn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s 1 backwards;
}
.mv-estate-header .mv-eh-words { display: block; }
.mv-estate-header .mv-eh-wm {
  display: block;
  font-family: var(--mv-font-display, 'Russo One', sans-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  background: var(--mv-metal-text, linear-gradient(180deg, #f9e6bd 0%, #e0c592 35%, #b17e38 75%, #8f6229 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mv-estate-header .mv-eh-tag {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.6;
  color: #9a9a9a;
  margin-top: 4px;
}
.mv-estate-header .mv-eh-divider {
  display: block;
  flex: none;
  width: 1px;
  height: 28px;
  margin: 0 16px;
  background: var(--mv-border, rgba(177, 126, 56, 0.32));
}
.mv-estate-header .mv-eh-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mv-font-display, 'Russo One', sans-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--mv-brass, #d6ad66);
  text-decoration: none;
}
.mv-estate-header a.mv-eh-label:hover,
.mv-estate-header a.mv-eh-label:focus-visible { color: var(--mv-brass-light, #e0c592); }

/* centre badge: the Cafe, same as the homepage */
.mv-estate-header .mv-eh-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 5px;
  background: var(--mv-metal-gradient, linear-gradient(135deg, #f9e6bd 0%, #e0c592 20%, #b17e38 48%, #b17e38 72%, #d9b26e 100%));
  border: 1px solid var(--mv-brass-deep, #8f6229);
  color: #1a1206;
  font-family: var(--mv-font-display, 'Russo One', sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.mv-estate-header .mv-eh-badge:hover,
.mv-estate-header .mv-eh-badge:focus-visible { box-shadow: 0 6px 18px rgba(177, 126, 56, 0.45); }

/* right side: outline login buttons, same as the homepage */
.mv-estate-header .mv-eh-logins { display: flex; align-items: center; gap: 8px; }
.mv-estate-header .mv-eh-login,
.mv-estate-header .mv-eh-oro,
.mv-estate-header .mv-eh-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--mv-border, rgba(177, 126, 56, 0.32));
  background: transparent;
  font-family: var(--mv-font-mono, 'SF Mono', 'Menlo', 'Consolas', monospace);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.2;
  color: #9a9a9a;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mv-estate-header .mv-eh-login:hover,
.mv-estate-header .mv-eh-login:focus-visible,
.mv-estate-header .mv-eh-oro:hover,
.mv-estate-header .mv-eh-oro:focus-visible,
.mv-estate-header .mv-eh-more > summary:hover,
.mv-estate-header .mv-eh-more[open] > summary { color: var(--mv-brass, #d6ad66); border-color: var(--mv-brass, #d6ad66); }

/* the standard OrO button (v1.4.0, gated MVP pages only): the LOGIN outline
   button plus a brass spark. The label keeps its casing ("OrO", never ORO). */
.mv-estate-header .mv-eh-oro { flex: none; gap: 8px; text-transform: none; letter-spacing: 1.2px; }
.mv-estate-header .mv-eh-oro-i { display: block; flex: none; width: 14px; height: 14px; }
.mv-estate-header .mv-eh-oro-i path { fill: var(--mv-brass, #d6ad66); }

/* the page's own controls (app) or single CTA (minimal). Keep it short on a
   phone: the left block never gives up room, the slot shrinks. */
.mv-estate-header .mv-eh-slot { display: flex; align-items: center; gap: 8px; }
.mv-estate-header .mv-eh-slot:empty { display: none; }

/* phone menu: one squared LOGIN button. Native <details>, works with no script. */
.mv-estate-header .mv-eh-more { display: none; position: relative; }
.mv-estate-header .mv-eh-more > summary { list-style: none; }
.mv-estate-header .mv-eh-more > summary::-webkit-details-marker { display: none; }
.mv-estate-header .mv-eh-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  min-width: 232px;
  padding: 6px;
  background: #0a0a0c;
  border: 1px solid var(--mv-border-strong, rgba(177, 126, 56, 0.8));
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
}
.mv-estate-header .mv-eh-pop a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  font-family: var(--mv-font-mono, 'SF Mono', 'Menlo', 'Consolas', monospace);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.2;
  color: #cccccc;
  text-decoration: none;
  white-space: nowrap;
}
.mv-estate-header .mv-eh-pop a:hover,
.mv-estate-header .mv-eh-pop a:focus-visible { color: var(--mv-brass, #d6ad66); background: rgba(177, 126, 56, 0.12); }
.mv-estate-header .mv-eh-pop a + a { margin-top: 2px; }

.mv-estate-header a:focus-visible,
.mv-estate-header summary:focus-visible { outline: 2px solid var(--mv-brass, #d6ad66); outline-offset: 3px; }

/* no centre badge (app, minimal, or full below 1180px): two columns, the left
   block takes all the room the right side leaves */
.mv-estate-header--app .mv-eh-bar,
.mv-estate-header--minimal .mv-eh-bar { grid-template-columns: minmax(0, 1fr) auto; }
.mv-estate-header--app .mv-eh-right,
.mv-estate-header--minimal .mv-eh-right { grid-column: 2; }
/* v1.3.1: the full variant's centre badge needs about 215px plus a symmetric
   column each side, and collided with CAFE LOGIN at 1024px (by ~28px). Below
   1180px the badge and the two login buttons fold into the one LOGIN menu the
   phone already has (the menu lists the badge link too), so nothing can touch. */
@media (max-width: 1179px) {
  .mv-estate-header .mv-eh-center { display: none; }
  .mv-estate-header .mv-eh-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .mv-estate-header .mv-eh-right { grid-column: 2; }
  .mv-estate-header .mv-eh-logins--full { display: none; }
  .mv-estate-header .mv-eh-more { display: block; }
  /* the LOGIN button and the return mark are now touch controls: 44px minimum */
  .mv-estate-header .mv-eh-login,
  .mv-estate-header .mv-eh-oro,
  .mv-estate-header .mv-eh-more > summary { min-height: 44px; }
}
@media (max-width: 699px) {
  .mv-estate-header .mv-eh-bar { gap: 12px; grid-template-columns: auto minmax(0, 1fr); }
  .mv-estate-header .mv-eh-tag { display: none; }
  .mv-estate-header .mv-eh-logins--full { display: none; }
  .mv-estate-header .mv-eh-more { display: block; }
  /* the tagline is gone, so the site label takes its place under the wordmark
     (logo, wordmark and label keep their sizes; same in every variant) */
  .mv-estate-header .mv-eh-left {
    display: grid;
    grid-template-columns: 48px auto;
    grid-template-rows: 1fr 1fr;
    column-gap: 12px;
    height: 48px;
  }
  .mv-estate-header .mv-eh-brand { display: contents; }
  .mv-estate-header .mv-eh-brand picture { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .mv-estate-header .mv-eh-words { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .mv-estate-header .mv-eh-left:has(.mv-eh-label) .mv-eh-words { grid-row: 1; align-self: end; }
  .mv-estate-header .mv-eh-divider { display: none; }
  .mv-estate-header .mv-eh-label { grid-column: 2; grid-row: 2; align-self: start; margin-top: 3px; font-size: 12px; letter-spacing: 1.2px; }
  .mv-estate-header .mv-eh-brand:focus-visible .mv-eh-logo { outline: 2px solid var(--mv-brass, #d6ad66); outline-offset: 3px; }
}
/* ---- own-brand mode (v1.2.0) ------------------------------------------ */
/* the site's own logo: same 48px box and position as the gear, never cropped,
   no spin (the turn is the gear's, not a destination's) */
.mv-estate-header .mv-eh-logo--own {
  object-fit: contain;
  animation: none;
}
/* a long name may shrink with an ellipsis; the logo box never does */
.mv-estate-header .mv-eh-brand--own { flex: 0 1 auto; min-width: 0; }
.mv-estate-header .mv-eh-brand--own .mv-eh-words { min-width: 0; overflow: hidden; }
.mv-estate-header .mv-eh-brand--own .mv-eh-wm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-estate-header .mv-eh-brand--own .mv-eh-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* wordmark alignment (v1.3.1): the brand link is a flex row that centres its
   children on the 48px logo box. With a tagline the words block is two lines
   (20px name + 4px + 16px tagline) and the pair is centred, as in the Magnum
   Vault header. With NO tagline the words block is just the 20px name, which
   centres on the logo box on its own, so there is nothing to add. (v1.3.0
   forced min-height:40px here, which pinned the lone name to the top line and
   made it float high; that rule is gone.) Phones hide the tagline and centre
   the name in the grid rule above. The logo box position is unchanged. */

/* the return mark: far right end of the header */
.mv-estate-header .mv-eh-rdivider {
  display: block;
  flex: none;
  width: 1px;
  height: 28px;
  margin: 0 4px 0 8px;
  background: var(--mv-border-strong, rgba(177, 126, 56, 0.8));
}
.mv-estate-header .mv-eh-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  color: #9a9a9a;
}
.mv-estate-header .mv-eh-return picture { display: block; line-height: 0; flex: none; }
.mv-estate-header .mv-eh-rlogo {
  display: block;
  width: 32px;
  height: 32px;
  max-width: none;
  border: 0;
  border-radius: 0;
}
.mv-estate-header .mv-eh-rtext {
  font-family: var(--mv-font-mono, 'SF Mono', 'Menlo', 'Consolas', monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.2;
}
.mv-estate-header .mv-eh-return:hover,
.mv-estate-header .mv-eh-return:focus-visible { color: var(--mv-brass, #d6ad66); }
@media (max-width: 699px) {
  /* the own name, not the controls, gives way: left column takes the room the
     right side leaves and the name wraps (see below) */
  .mv-estate-header--own .mv-eh-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .mv-estate-header--own .mv-eh-left { grid-template-columns: 48px minmax(0, 1fr); }
  .mv-estate-header--own .mv-eh-bar { gap: 6px; }
  .mv-estate-header--own .mv-eh-right { gap: 6px; }
  .mv-estate-header .mv-eh-rtext { display: none; }
  .mv-estate-header .mv-eh-rdivider { margin: 0; }
  /* v1.3.1 tap targets: 44 x 44 minimum (the 32px logo stays compact inside) */
  .mv-estate-header .mv-eh-return { min-width: 44px; min-height: 44px; justify-content: center; }
  .mv-estate-header .mv-eh-more > summary { min-width: 44px; justify-content: center; }
  .mv-estate-header .mv-eh-login { min-width: 44px; justify-content: center; }
  /* OrO stays on a phone as a 44 x 44 icon-only button (text hidden, the
     aria-label names it), left of the MVP mark, the LOGIN menu left of it */
  .mv-estate-header .mv-eh-oro { width: 44px; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; }
  .mv-estate-header .mv-eh-oro-t { display: none; }
  .mv-estate-header .mv-eh-oro-i { width: 18px; height: 18px; }
  /* the app variant's MVP LOGIN is compact on an own-brand phone header so the
     name keeps room to wrap; still 44px tall */
  .mv-estate-header--own .mv-eh-login { padding: 0 8px; font-size: 11px; letter-spacing: 0.6px; }
  /* v1.3.1 long own names: wrap to two lines at a smaller size instead of
     ending in an ellipsis (names up to about 28 characters fit) */
  .mv-estate-header .mv-eh-brand--own .mv-eh-wm {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: break-word;
    text-overflow: clip;
    font-size: clamp(11px, 3.1vw, 14px);
    letter-spacing: 0.6px;
    line-height: 1.1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mv-estate-header .mv-eh-logo { animation: none; }
}