/* ==========================================================================
   DESK — the Money and Power desks in the v3 design (site design v3, A7.1).
   Loaded only by money/index.html and power/index.html, last, after the
   desk's own stylesheets.

   The desks keep everything that is live — every tracker, chart, spine and
   table. What changes here is the chrome, plus four notes from Amar on
   2026-09-11 about the Money masthead.
   ========================================================================== */

/* --- the tier row: PRESIDENT / FAMILY / WIDER CIRCLE ----------------------
   Live, .tiers is a 1px grid gap over a --line background, which draws the
   grey seams, and .tiers carries a bottom border, which draws the black rule
   underneath. Each button then sits on --bone, and the selected one on
   --paper-2 — the grey Amar flagged.

   Instead: no seams, no rule, no fills. Three boxes outlined in ink, sharing
   their dividers, on the page's own paper. Selection stays legible as the
   gold underscore that was already there.
   ------------------------------------------------------------------------ */
.tiers {
  background: transparent !important;
  gap: 0 !important;
  border-bottom: 0 !important;
}
.tierbtn {
  background: transparent !important;
  border: 2px solid var(--ink) !important;
  border-left-width: 0 !important;   /* shared dividers, not doubled rules */
}
.tierbtn:first-child { border-left-width: 2px !important; }
.tierbtn:hover,
.tierbtn.hover { background: transparent !important; }
.tierbtn.sel {
  background: transparent !important;
  box-shadow: inset 0 -5px 0 var(--gold) !important;
}

/* --- cut the "As of ..." stamp -------------------------------------------
   Written at runtime into #moneyAsOf by the inline script; hidden rather than
   removed so the live page's JS is left exactly as it is.
   ------------------------------------------------------------------------ */
#moneyAsOf { display: none !important; }

/* --- the hero: bigger, and off the floor ---------------------------------
   Live, body.desk-money pins the art to flex-end in a 420px box capped at
   440px wide, which is what makes him read small and low. Centre him and let
   him run larger; the masthead grid keeps its own height.
   ------------------------------------------------------------------------ */
body.desk-money .megaHeroImg {
  align-items: center !important;
  min-height: 480px !important;
}
body.desk-money .megaHeroImg img {
  width: min(100%, 560px) !important;
  max-height: 500px !important;
}

/* --- chrome parity with the homepage -------------------------------------
   The desks load their own stylesheets, several of which style .nav-sub. The
   v3 Subscribe plaque is re-asserted here, last in the cascade, so the
   masthead matches index-v3 exactly rather than inheriting the gold pill from
   money/style.css.
   ------------------------------------------------------------------------ */
.topnav .nav-sub,
.gta-nav-end .nav-sub {
  background: var(--ink) !important;
  color: var(--paper-hi) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  height: auto !important;
  padding: 11px 18px !important;
}
.topnav .nav-sub:hover {
  background: var(--paper-hi) !important;
  color: var(--ink) !important;
}