/* ============================================================================
   MAGNETIC BRAND: Reading & Directory System

   Built on the live product. Every token in section 2 was read out of
   learn.magneticbrandcourse.com and activate.magneticbrandcourse.com. Nothing
   here is invented and nothing comes from the Inaltum system.

   The system in one line: warm near-black, one gold, white at descending alpha.

   Layers
     1. Fonts
     2. Live Magnetic Brand tokens, verbatim
     3. Reading additions, derived        <- the only new values
     4. Reset + base
     5. Ambient layer (orbs, star field, top bloom)
     6. Glow + alive
     7. Chrome (nav, footer, buttons, pills)
     8. Directory: shared
     9. Directory A: full-bleed bands
    10. Directory B: alive lead + session-card grid
    11. Article: layout, prose, movement spine, sidebar
    12. Responsive
    13. Reduced motion + print

   House rules taken from the platform
     - Three faces, each with one job. Excon display, Inter body and UI,
       Playfair Display italic for numerals only.
     - Gold is the only accent. The axis colors are for data, never chrome.
     - Text is white at alpha, not a grey ramp.
     - Exactly ONE .mb-alive element per screen. It means "this one is live."
     - Every glow is a radial of --mb-gold-hi that scales and fades, and every
       animation has a distinct period so nothing beats in unison.
     - Every animated selector is switched off under prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Excon Variable";
  src: url("/fonts/Excon-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* The rotating-border angle. Registered so it can be animated. */
@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---------------------------------------------------------------------------
   2. LIVE MAGNETIC BRAND TOKENS
   Read from the platform. Do not edit these to taste. If the brand changes,
   this is the only block that changes.
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces. Warm near-black. */
  --mb-bg:        #0d0901;
  --mb-bg-2:      #13100a;
  --mb-bg-page:   #150d00;
  --mb-bg-inset:  #0d0901;
  --mb-card:      rgba(255, 245, 230, 0.02);
  --mb-border:    rgba(255, 255, 255, 0.06);

  /* Gold. The only accent. */
  --mb-gold:        #d5993e;
  --mb-gold-2:      #c98724;
  --mb-gold-hi:     #f0c060;
  --mb-gold-soft:   #e7b864;
  --mb-gold-border: rgba(213, 153, 62, 0.20);
  --mb-gold-dim:    rgba(213, 153, 62, 0.10);

  /* Text. White at descending alpha, not a grey ramp. */
  --mb-text:       #ffffff;
  --mb-text-light: #fefefa;
  --mb-text-soft:  rgba(255, 255, 255, 0.62);
  --mb-text-dim:   rgba(255, 255, 255, 0.30);
  --mb-silver:     #c0c0c0;

  /* Data only. Never used for chrome. Present so charts stay on-system. */
  --mb-axis-identity:   #7c9ef5;
  --mb-axis-resonance:  #e88c4a;
  --mb-axis-expression: #7acbaa;
  --good: #5cc4a0;
  --bad:  #dd7a59;
  --data-txt: #f5f1ea;
  --mb-navy: #0d1e2e;   /* the workbook cover. not a surface. */

  /* Geometry */
  --mb-radius-btn:     8px;
  --mb-radius-btn-lg:  12px;
  --mb-radius-card:    12px;
  --mb-radius-card-lg: 18px;
  --mb-radius-pill:    100px;

  /* Motion */
  --mb-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --mb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mb-spin:     6s;

  /* Type */
  --mb-font-display: "Excon Variable", "Neue Montreal", system-ui, sans-serif;
  --mb-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --mb-font-ui:      "Inter", system-ui, sans-serif;
  --mb-font-numeral: "Playfair Display", Georgia, serif;
}

/* ---------------------------------------------------------------------------
   3. THE READING SURFACE

   Section 2 above is the platform, verbatim, and stays the source of truth.
   This layer re-points the surface and ink tokens for the Articles surface
   only. The course platform is untouched.

   WHY: the platform field #0d0901 is L*2.7 at 86% saturation. White ink on it
   runs 17-20:1, far above the comfortable band for extended reading, and it
   halates: light glyphs bloom into the dark field and the eye refocuses every
   few lines. A 13-agent design review tested four directions against a
   brand-fidelity lens and a reading-ergonomics lens. Two conclusions drove
   this layer:

     1. NOT GRAY. #0d0901 carries chroma C*=3.42. A "warm graphite" at C*=1.23
        sits 1.24 dE from flat #212121, below a just-noticeable difference. Going
        neutral spends the brand's most distinctive property to land on the same
        field as every dark-mode blog. And lighter is not the same as cooler:
        #1e1504 is 2.90x brighter than #0d0901 AND 2.83x more chromatic. The
        field gets warmer on the way up.

     2. THE INK IS ~85% OF THE FIX. Lifting the field while keeping pure white
        moves body copy 19.9 -> 18.0:1, which is nothing. Retiring pure white for
        a warm off-white at 78% moves it 19.9 -> 11.3:1. The field lift buys three
        other real things: a higher adaptation level, the blue channel off 1/255
        where it causes fringing, and the permission to pull the drifting orbs
        out from under the reading column. It does not buy the number.

   Two surfaces ship. LAMPLIGHT is the default. DAYLIGHT is a reader toggle,
   set with data-reading on <html> and remembered in localStorage.
   -------------------------------------------------------------------------- */

/* ===== LAMPLIGHT (default) =================================================
   Same hue as --mb-bg-page (CIELAB hue 79.0 against its 79.3), lifted 2.9x.
   Body 10.5:1 on the field, 11.1:1 on the bands. Every wash, pill, hairline
   and glow carries over from the platform at its original alpha. */
:root,
[data-reading="lamplight"] {
  --mb-bg:       #1e1504;   /* the reading field. lifted, and warmer for it */
  --mb-bg-page:  #150d00;   /* hero band and panels. the platform's own token */
  --mb-bg-inset: #0d0901;   /* the alive inner: darker than the field, on purpose */
  --mb-chrome:   #100b02;   /* nav and footer. reads as the platform */
  --mb-card:     rgba(255, 245, 230, 0.02);
  --mb-border:   rgba(255, 246, 234, 0.06);

  --mb-text:      rgba(255, 246, 234, 0.90);  /* headings. 13.8:1 */
  --mb-text-soft: rgba(255, 246, 234, 0.62);  /* UI and card copy */
  --mb-text-read: rgba(255, 246, 234, 0.78);  /* long-form body. 10.5:1 */
  --mb-text-meta: rgba(255, 246, 234, 0.65);  /* dates, captions. 7.6:1 */
  --mb-text-dim:  rgba(255, 246, 234, 0.42);  /* was 0.30 = 2.6:1. now 4.1:1 */

  /* Gold splits into a TEXT role and a FILL role. On a dark field they are the
     same value; on Daylight they diverge, because gold-as-text has to darken
     while gold-as-fill must not. */
  --mb-gold-display: #d5993e; /* on a dark field every size can run full strength */
  --mb-gold:      #d5993e;   /* gold as text, at display sizes */
  --mb-gold-soft: #e7b864;   /* gold as SMALL text. see the note below */
  --mb-gold-hi:   #f0c060;
  --mb-gold-fill: #d5993e;   /* gold as fill: CTA, card seam, the mark */
  --mb-gold-fill-2: #c98724; /* the second stop of every gold gradient */
  --mb-gold-border: rgba(213, 153, 62, 0.20);
  --mb-gold-dim:    rgba(213, 153, 62, 0.10);

  /* Ambient light is pulled out from under the reading column. See section 5. */
  --mb-ambient-opacity: 1;
  --mb-glow-opacity: 1;

  color-scheme: dark;
}

/* ===== DAYLIGHT (reader toggle) ============================================
   Ink on warm paper. Body 12.0:1 WCAG, which is identical to the near-black
   build, but APCA Lc 89.8 against its 73.7. That gap is the whole case for
   positive polarity and it is invisible in WCAG. Positive polarity also
   constricts the pupil, which raises depth of focus and suppresses the lens
   scatter that roughly doubles between age 20 and 60.

   The masthead and footer stay platform-dark, so the brand still opens and
   closes the page in its own colour. */
[data-reading="daylight"] {
  /* Surfaces. The ramp runs UPWARD: elevated surfaces are lighter and LESS
     saturated than the page, never darker and tanner. Getting this backwards is
     what produces the beveled-panel look.

     Channel spread is the number that matters here, not HSL saturation, which is
     meaningless near white. The page carries a spread of 10 (245/242/235) and
     reads as warm paper. The first version used the brand's SAND callout colour
     #F2E2CD as the general card fill, spread 34, which reads as tan. Sand is an
     accent in the workbook, not a surface. It is back in its lane below. */
  --mb-bg:       #f5f2eb;   /* the reading field. warm off-white, spread 10 */
  --mb-bg-page:  #fbf9f4;   /* hero band and panels. LIGHTER than the page */
  --mb-bg-inset: #fdfbf7;   /* the alive inner. near-white, spread 6 */
  --mb-chrome:   #150d00;   /* nav and footer stay dark */
  --mb-card:     #fdfbf7;   /* opaque near-white. a 2% white wash does nothing here */
  --mb-sand:     #fbf6ec;   /* the sand accent, at a whisper. one job, see below */
  --mb-border:   rgba(40, 30, 14, 0.10);

  --mb-text:      #241c10;  /* 14.9:1, APCA Lc 93 */
  --mb-text-soft: #4a4030;
  --mb-text-read: #332a1d;  /* 12.6:1, APCA Lc 90 */
  --mb-text-meta: #564c3c;  /* 7.5:1 */
  --mb-text-dim:  #6b6250;

  /* Gold inverts for TEXT and holds for FILL. #d5993e on paper is 2.1:1, a WCAG
     failure the design review's own critics missed and our audit caught. */
  /* THE GOLD LADDER ON PAPER, and the lesson that produced it.

     Gold's identity lives at high lightness. Chroma collapses as you darken it:
     #d5993e is C* 56 at L* 67; by L* 27 it is C* 39. Earlier passes held every
     gold to 4.5:1 on paper, which forces L* under 40, which is where gold stops
     being gold and becomes brown. Darkening to satisfy a ratio is what made it
     dull, and no amount of re-tuning fixes that. It is a dead end.

     Two corrections. First, the floor depends on SIZE: large text needs 3:1, not
     4.5:1, so display gold never needed the darkening it was given. Second, and
     this is the structural one: the headline does not live on paper at all. See
     the dark masthead below. */
  --mb-gold-display: #B07A16;  /* 34px+ only. L* 55, C* 58, 3.3:1 (large floor 3) */
  --mb-gold:         #96600C;  /* 18-24px.    L* 46, C* 53, 4.7:1 */
  --mb-gold-soft:    #7E5100;  /* 12-16px.    L* 38, C* 49, 6.1:1 */
  --mb-gold-hi:      #6B4400;  /* emphasis.   L* 32, C* 44, 7.7:1 */
  --mb-gold-fill: #d5993e;  /* unchanged. CTA, seam, mark */
  --mb-gold-fill-2: #c98724;
  --mb-gold-border: rgba(126, 87, 27, 0.26);
  --mb-gold-dim:    rgba(213, 153, 62, 0.12);
  /* The two-tone headline device inverts with the surface. The shipped gradient
     runs #d5993e -> #f0c060, which is 2.2:1 and 1.5:1 on this paper: a failure
     even against the 3:1 large-text floor.

     The replacement is also much TIGHTER. On a dark field the gradient's
     mid-stop is its lightest, which reads as a sheen travelling across the
     line. Inverted onto paper the same shape puts the weakest value in the
     middle of the sentence, which reads as a faded patch. 6 L* of range instead
     of 10, running dark-to-darker, so it reads as ink with depth. */
  --mb-gold-text-gradient: linear-gradient(100deg, #7E5100 0%, #6B4400 55%, #5B3A00 100%);

  /* Additive gold light needs a dark field. Headroom here is 0.66x, so it cannot
     register. Glow becomes shadow. See the overrides below. */
  --mb-ambient-opacity: 0;
  --mb-glow-opacity: 0;

  color-scheme: light;
}

/* The dark islands inside Daylight. Local variable overrides re-light the ink
   on the two surfaces that stay platform-dark.

   The nav is translucent on a dark page, which is correct there. Over paper the
   same 82% composites to a muddy brown, so on Daylight it goes fully opaque and
   keeps the brand's own dark. */
[data-reading="daylight"] .mb-nav {
  background: var(--mb-chrome);
  backdrop-filter: none;
  border-bottom-color: rgba(255, 246, 234, 0.10);
}
[data-reading="daylight"] .mb-nav[data-scrolled="true"] {
  background: var(--mb-chrome);
  box-shadow: 0 2px 18px rgba(60, 45, 20, 0.14);
}
[data-reading="daylight"] .mb-nav,
[data-reading="daylight"] .mb-footer {
  --mb-text:      rgba(255, 246, 234, 0.92);
  --mb-text-soft: rgba(255, 246, 234, 0.66);
  --mb-text-meta: rgba(255, 246, 234, 0.62);
  --mb-text-dim:  rgba(255, 246, 234, 0.42);
  --mb-gold:      #e7b864;
  --mb-gold-soft: #e7b864;
  --mb-border:    rgba(255, 246, 234, 0.10);
}

/* ===== SHARED READING SPEC =================================================
   Applied to both surfaces. Four of the eight expert reviews independently
   noted that a palette argued entirely on reading comfort never named a type
   size. Colour without this spec is a screenshot, not a reading experience. */
:root {
  --mb-fs-read: 19px;
  --mb-lh-read: 1.72;
  --mb-measure: 66ch;
  --mb-fs-meta: 14px;   /* a floor. small type is the real presbyopia failure */

  /* Spacing, 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;

  /* Layout */
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;

  /* Elevation. The platform mostly avoids shadow, using the warm translucent
     fill and a hairline instead. These exist for the two floating moments:
     the alive card and the hovering session card. */
  --mb-lift:   0 4px 26px rgba(213, 153, 62, 0.18);
  --mb-lift-2: 0 10px 40px rgba(0, 0, 0, 0.45);
  --mb-focus:  0 0 0 3px rgba(240, 192, 96, 0.45);
}
[data-reading="daylight"] {
  --mb-lift:   0 8px 28px rgba(126, 87, 27, 0.18);
  --mb-lift-2: 0 10px 30px rgba(60, 45, 20, 0.10);
  --mb-focus:  0 0 0 3px rgba(126, 87, 27, 0.40);
  /* A near-white card on warm paper needs elevation, not tint, to read as a
     card. Two-layer, warm-neutral, low spread. */
  --mb-elev:   0 1px 2px rgba(60, 45, 20, 0.05), 0 6px 20px rgba(60, 45, 20, 0.06);
}

/* ---------------------------------------------------------------------------
   4. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--mb-bg);
}

body {
  margin: 0;
  background: var(--mb-bg);
  color: var(--mb-text-soft);
  font-family: var(--mb-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--mb-gold); }

::selection { background: rgba(213, 153, 62, 0.32); color: var(--mb-text); }

:focus-visible {
  outline: none;
  box-shadow: var(--mb-focus);
  border-radius: var(--mb-radius-btn);
}

.mb-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.mb-container--wide { max-width: var(--container-xl); }

/* Type -------------------------------------------------------------------- */

/* Eyebrow. Inter 600, 12px, 0.1em, uppercase, gold. Labels every block. */
.mb-eyebrow {
  font-family: var(--mb-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
  margin: 0;
}
.mb-eyebrow--dim { color: var(--mb-text-meta); }

.mb-h1, .mb-h2 {
  font-family: var(--mb-font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--mb-text);
  margin: 0;
  text-wrap: balance;
}
.mb-h1 { font-size: 52px; letter-spacing: -0.016em; }
.mb-h2 { font-size: 32px; letter-spacing: -0.016em; }

/* h3 and below switch to Inter, matching the platform. */
.mb-h3, .mb-h4 {
  font-family: var(--mb-font-body);
  font-weight: 700;
  color: var(--mb-text);
  margin: 0;
  text-wrap: balance;
}
.mb-h3 { font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; }
.mb-h4 { font-size: 17px; line-height: 1.4;  letter-spacing: -0.005em; }

/* A standfirst carries its hierarchy through SIZE, not through fading. The first
   pass gave it --mb-text-soft, which on paper is 9.1:1 against the body's 12.6:1:
   the subheading was measurably weaker than the paragraphs underneath it, at the
   same font size on the directory page. It now shares the body ink and is a clear
   step larger. */
.mb-lede {
  font-size: 21px;
  line-height: 1.55;
  color: var(--mb-text-read);
  margin: 0;
  text-wrap: pretty;
}

/* The headline device. Line one white, line two carries the turn in gold. */
.mb-gold-text {
  background: var(--mb-gold-text-gradient,
    linear-gradient(135deg, #d5993e, #f0c060 40%, #d5993e 70%, #c98724));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mb-line { display: block; }

/* Gold as solid ink, for a short single line. The gradient device belongs on a
   multi-line headline, where its bright stop reads as a sheen travelling across
   the block. On one short line the same stop lands mid-sentence and reads as
   uneven brightness instead. Uses the small-text gold, which carries more
   contrast in both surfaces. */
.mb-gold-ink { color: var(--mb-gold-soft); }

.mb-rule {
  height: 1px;
  border: 0;
  background: var(--mb-border);
  margin: 0;
}

.mb-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--mb-fs-meta);
  color: var(--mb-text-meta);
}
.mb-meta__dot { color: color-mix(in srgb, currentColor 45%, transparent); }

.mb-skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: linear-gradient(135deg, var(--mb-gold-fill), var(--mb-gold-fill-2));
  color: #150d00;
  font-weight: 700;
  border-radius: var(--mb-radius-btn);
  transform: translateY(-200%);
  transition: transform 220ms var(--mb-ease-out);
}
.mb-skip:focus { transform: translateY(0); }

/* Present to a screen reader and to search, absent to the eye. Used for the
   directory's <h1>, since that page opens straight on the cards. */
.mb-a11y-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* When a page has no dark masthead under the nav, the nav itself carries the
   2px gold seam, so the chrome still closes on the brand's line rather than
   fading into paper on a hairline. */
.mb-nav--seam { border-bottom: 2px solid var(--mb-gold-fill); }

/* ---------------------------------------------------------------------------
   5. AMBIENT LAYER
   Three stacked systems behind content, all pointer-events: none, all z-index 0.
   -------------------------------------------------------------------------- */
.mb-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: var(--mb-ambient-opacity);
  /* The column shield. A drifting orb passing under a text column swings local
     body contrast on a 9-second cycle for the whole read, which the ergonomics
     review called the one defect no palette could rescue. The mask fades ambient
     light to zero across the reading column and leaves it in the margins.
     Pages set --mb-ambient-mask; the default leaves ambient everywhere. */
  -webkit-mask-image: var(--mb-ambient-mask, none);
          mask-image: var(--mb-ambient-mask, none);
}
/* An article page has a reading column on the left two thirds. */
[data-page="article"] {
  --mb-ambient-mask: linear-gradient(to right,
    #000 0%, rgba(0,0,0,0.35) 6%, transparent 16%,
    transparent 68%, rgba(0,0,0,0.5) 84%, #000 100%);
}
.mb-ambient--fixed { position: fixed; }

/* Orbs. Warm gold blooms that drift. */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.orb-primary {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle,
    rgba(213, 153, 62, 0.18) 0%,
    rgba(213, 153, 62, 0.08) 40%,
    rgba(213, 153, 62, 0.02) 70%,
    transparent 100%);
  box-shadow: 0 0 80px rgba(213, 153, 62, 0.12),
              0 0 160px rgba(213, 153, 62, 0.06),
              0 0 320px rgba(213, 153, 62, 0.03);
}
.orb-sm { width: 360px; height: 360px; }
.orb-anim-a { animation: mb-float 9s  ease-in-out infinite; }
.orb-anim-b { animation: mb-float 11s ease-in-out infinite reverse; }
.orb-anim-c { animation: mb-float 13s ease-in-out infinite; }

@keyframes mb-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(20px, -16px); }
}

/* Star field. Two layers of 1px pinpricks. */
.star-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.star-field::before,
.star-field::after { content: ""; position: absolute; inset: 0; }
.star-field::before {
  background-image:
    radial-gradient(1px 1px at 10% 8%,  rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 23% 31%, rgba(255,255,255,0.40), transparent),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 47% 62%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1px 1px at 56% 22%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 64% 74%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 73% 41%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 81% 17%, rgba(255,255,255,0.40), transparent),
    radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1px 1px at 94% 29%, rgba(255,255,255,0.50), transparent);
}
.star-field::after {
  background-image:
    radial-gradient(1px 1px at 7% 43%,  rgba(255,255,255,0.40), transparent),
    radial-gradient(1px 1px at 18% 14%, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 28% 79%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1px 1px at 34% 48%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 43% 88%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 52% 37%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1px 1px at 61% 91%, rgba(255,255,255,0.40), transparent),
    radial-gradient(1px 1px at 69% 26%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 77% 68%, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 86% 84%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 97% 71%, rgba(255,255,255,0.35), transparent);
}

/* Top bloom. The warm wash under the nav. */
.mb-topbloom {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 256px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(50% 100% at 50% 0%, rgba(213, 153, 62, 0.14), transparent 75%);
}

/* ---------------------------------------------------------------------------
   6. GLOW + ALIVE
   -------------------------------------------------------------------------- */

/* -- ALIVE ---------------------------------------------------------------
   A conic gradient spins behind a 1.5px edge so a gold arc with a white-hot
   peak travels the perimeter every 6s.

   USE EXACTLY ONE PER SCREEN. It means "this one is live, go here."
   On the directory that is the latest article. On an article page that is the
   quiz. Two of them on one screen destroys the signal.
   ---------------------------------------------------------------------- */
.mb-alive {
  position: relative;
  border-radius: var(--mb-radius-card-lg);
  padding: 1.5px;
  overflow: hidden;
  box-shadow: var(--mb-lift);
}
.mb-alive::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  background: conic-gradient(transparent 0deg,
    rgba(213, 153, 62, 0) 70deg,
    rgba(213, 153, 62, 0.65) 150deg,
    rgb(255, 250, 180) 180deg,
    rgba(213, 153, 62, 0.65) 210deg,
    transparent 300deg);
  animation: mb-spin var(--mb-spin) linear infinite;
}
.mb-alive__inner {
  position: relative;
  z-index: 1;
  border-radius: calc(var(--mb-radius-card-lg) - 1.5px);
  background: linear-gradient(rgba(213, 153, 62, 0.06), rgba(213, 153, 62, 0.06)),
              var(--mb-bg-page);
  backdrop-filter: blur(22px);
}

/* The crisper variant. Masked so only the edge shows, no overflow trick. */
.mb-alive-border { position: relative; }
.mb-alive-border::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--mb-radius-card) + 1.5px);
  padding: 1.5px;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(from var(--ang),
    #c98724, #f0c060, #fff6d8, #f0c060, #d5993e, #c98724);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: mb-alive-spin var(--mb-spin) linear infinite;
}

@keyframes mb-spin       { 100% { transform: rotate(1turn); } }
@keyframes mb-alive-spin { 100% { --ang: 360deg; } }

/* -- GLOW ----------------------------------------------------------------
   Every glow is a radial of --mb-gold-hi that scales and fades. Six periods,
   all different, so nothing beats in unison.
   ---------------------------------------------------------------------- */
@keyframes mb-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.75; }
  50%      { transform: scale(1.35); opacity: 1; }
}
@keyframes mb-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes mb-breathe-glow {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes mb-node-pulse {
  0%, 100% { box-shadow: 0 0 0 5px var(--mb-bg), 0 0 0 0  rgba(240,192,96,0.5); }
  50%      { box-shadow: 0 0 0 5px var(--mb-bg), 0 0 0 9px rgba(240,192,96,0); }
}
@keyframes mb-seam-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(213,153,62,0.20); }
  50%      { box-shadow: 0 0 34px rgba(240,192,96,0.50); }
}
@keyframes mb-daybloom {
  0%, 66%, 100% { box-shadow: 0 0 0 6px var(--mb-bg); }
  9%, 15%       { box-shadow: 0 0 0 6px var(--mb-bg), 0 0 24px 6px rgba(240,192,96,0.6); }
}

/* Halos */
.mb-halo {
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 192, 96, 0.55), transparent 70%);
  animation: mb-breathe 1.8s ease-in-out infinite;
  pointer-events: none;
}
.mb-core-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(240, 192, 96, 0.85) 0%,
    rgba(213, 153, 62, 0.45) 45%,
    transparent 72%);
  filter: blur(4px);
  animation: mb-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
.mb-wide-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 192, 96, 0.4), transparent 66%);
  animation: mb-breathe-glow 4s ease-in-out infinite;
  pointer-events: none;
}

/* A gold core disc. Used for the quiz badge and the toolkit icons. */
.mb-core {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, #f7d69a 0%, var(--mb-gold-fill) 46%, var(--mb-gold-fill-2) 100%);
}
.mb-core__glyph {
  position: relative;
  z-index: 2;
  font-size: 22px;
  line-height: 1;
  color: var(--mb-bg);
}

/* ---------------------------------------------------------------------------
   7. CHROME
   -------------------------------------------------------------------------- */
.mb-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--mb-chrome) 82%, transparent);
  border-bottom: 1px solid var(--mb-border);
  transition: background 220ms var(--mb-ease);
}
@supports (backdrop-filter: blur(14px)) {
  .mb-nav { backdrop-filter: saturate(130%) blur(14px); }
}
.mb-nav[data-scrolled="true"] { background: color-mix(in srgb, var(--mb-chrome) 96%, transparent); }
@supports not (color: color-mix(in srgb, white 50%, transparent)) {
  .mb-nav { background: var(--mb-chrome); }
}
.mb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  /* 72px, not 64. The CTA is 38px tall, so this leaves 17px of air above and
     below it. The old bar put a 53px button in a 64px bar: 5px of air, which
     read as a button wedged into the chrome rather than sitting in it. */
  min-height: 72px;
}

/* The brand lockup. This is the real asset, /logo.svg off the live platform:
   gold trefoil, "Magnetic" in #fefefa, "Brand" in brand gold, 1002.7 x 168.44.
   It ships as SVG so it stays sharp at any size and costs 8 KB.
   NOTE: the wordmark is near-white, so it can only go on a dark surface. Both
   places it appears (nav, footer) are platform-dark in both reading surfaces.
   For a light surface use assets/mb-logo-on-light.svg, which swaps the wordmark
   to reading ink and holds the gold. */
.mb-nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.mb-nav__logo {
  height: 27px;
  width: auto;
  display: block;
}
/* Retained for any surface that still hand-sets the lockup. */
.mb-nav__mark { width: 26px; aspect-ratio: 364 / 359; height: auto; }
.mb-lockup {
  font-family: var(--mb-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1;
  white-space: nowrap;
  color: var(--mb-text);
}
.mb-lockup b {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--mb-gold-fill);
  margin-left: 0.2em;
}

.mb-nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mb-nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--mb-text-soft);
  text-decoration: none;
  transition: color 140ms var(--mb-ease);
}
.mb-nav__links a:hover { color: var(--mb-text); }
.mb-nav__links a[aria-current="page"] {
  color: var(--mb-text);
  border-bottom: 1px solid var(--mb-gold-fill);
  padding-bottom: 3px;
}

/* Reading-surface toggle. Lamplight and Daylight. Sits in the nav, which stays
   platform-dark in both surfaces, so its own colours never invert. */
.mb-surface-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 246, 234, 0.12);
  border-radius: var(--mb-radius-pill);
  background: rgba(255, 246, 234, 0.03);
}
.mb-surface-toggle button {
  appearance: none;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--mb-radius-pill);
  background: transparent;
  color: rgba(255, 246, 234, 0.42);
  transition: background 140ms var(--mb-ease), color 140ms var(--mb-ease);
}
.mb-surface-toggle button:hover { color: rgba(255, 246, 234, 0.8); }
.mb-surface-toggle button[aria-pressed="true"] {
  background: rgba(213, 153, 62, 0.16);
  color: #e7b864;
}
.mb-surface-toggle svg { width: 15px; height: 15px; }

/* Reading progress. Gold gradient, 2px. */
.mb-progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.mb-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--mb-gold-fill-2), #f0c060);
  transition: width 90ms linear;
}

.mb-footer {
  position: relative;
  margin-top: var(--s-10);
  padding-block: var(--s-8);
  background: var(--mb-chrome);
  border-top: 1px solid var(--mb-border);
}
.mb-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.mb-footer__left { display: flex; align-items: center; gap: var(--s-4); }
.mb-footer__mark { width: 22px; aspect-ratio: 364 / 359; height: auto; opacity: 0.8; }
/* The footer is the lockup and the legal line. No tagline: the marketing copy
   that used to sit here was not language Magnetic Brand uses anywhere else. */
.mb-footer__logo { height: 22px; width: auto; display: block; opacity: 0.9; }
.mb-footer__links {
  display: flex;
  gap: var(--s-3);
  font-size: var(--mb-fs-meta);
  color: var(--mb-text-meta);
}
.mb-footer__links a { color: var(--mb-text-meta); text-decoration: none; }
.mb-footer__links a:hover { color: var(--mb-gold-soft); }

/* Buttons ---------------------------------------------------------------- */
.mb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--mb-radius-btn);
  font-family: var(--mb-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: filter 140ms var(--mb-ease),
              transform 140ms var(--mb-ease),
              box-shadow 140ms var(--mb-ease),
              background 140ms var(--mb-ease),
              border-color 140ms var(--mb-ease),
              color 140ms var(--mb-ease);
}

/* Primary. Gold gradient, dark type, 8px radius. Not a pill. */
.mb-btn--gold {
  background: linear-gradient(135deg, var(--mb-gold-fill), var(--mb-gold-fill-2));
  color: #150d00;
}
.mb-btn--gold:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 24px rgba(213, 153, 62, 0.28);
}
.mb-btn--gold:active { transform: translateY(1px); }
.mb-btn--lg { padding: 16px 28px; font-size: 16px; border-radius: var(--mb-radius-btn-lg); }
.mb-btn--block { width: 100%; }

/* Nav-scale CTA. The default button inherits the body's 1.7 line-height, which
   is right inside a card and wrong inside a 72px bar: it made a 53px button.
   line-height:1 plus tighter padding lands it at 38px. */
.mb-nav .mb-btn {
  padding: 11px 20px;
  font-size: 14px;
  line-height: 1;
}

/* The sheen sweep. */
.mb-btn-sheen::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 520ms var(--mb-ease-out);
  pointer-events: none;
}
.mb-btn-sheen:hover::after { left: 115%; }

/* Secondary. Hairline on the warm fill. */
.mb-btn--quiet {
  background: var(--mb-card);
  color: var(--mb-text);
  border-color: var(--mb-border);
}
.mb-btn--quiet:hover {
  background: rgba(255, 245, 230, 0.05);
  border-color: var(--mb-gold-border);
  color: var(--mb-gold-soft);
}

/* Pills and chips -------------------------------------------------------- */
.mb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mb-gold-dim);
  border: 1px solid rgba(213, 153, 62, 0.32);
  border-radius: var(--mb-radius-pill);
  padding: 5px 12px;
  font-family: var(--mb-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
  white-space: nowrap;
}
.mb-pill--dim {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--mb-border);
  color: var(--mb-text-meta);
}
.mb-pill--solid {
  background: var(--mb-gold-fill);
  border-color: var(--mb-gold-fill);
  color: #150d00;
}

/* Deliverable chip. The gold sparkle prefix is part of the pattern. */
.mb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--mb-gold-dim);
  border: 1px solid rgba(213, 153, 62, 0.24);
  border-radius: var(--mb-radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mb-gold-soft);
}
.mb-chip::before {
  content: "\2726";
  font-size: 10px;
  color: var(--mb-gold-fill);
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   8. DIRECTORY: SHARED
   -------------------------------------------------------------------------- */
.mb-page-head {
  position: relative;
  padding-top: var(--s-9);
  padding-bottom: var(--s-7);
}
.mb-page-head .mb-eyebrow { margin-bottom: var(--s-5); }
.mb-page-head__title { margin-bottom: var(--s-5); max-width: 24ch; }
.mb-page-head__lede { max-width: 60ch; }

/* The bare directory head. One word, set in the eyebrow face, doing double duty
   as the document's <h1>. Nothing else: the bands are the argument, and a
   headline above them only delays the first one.

   Because the type is now a single short line, the band collapses to a shallow
   strip. That is the point — it reads as a label on the library rather than as a
   hero competing with it. */
.mb-page-head__label {
  margin: 0;
  font-size: 13px;
}
.mb-page-head:has(> .mb-page-head__label:only-child) {
  padding-top: var(--s-7);
  padding-bottom: var(--s-5);
}
@supports not selector(:has(*)) {
  .mb-page-head__label { margin-bottom: 0; }
}

.mb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--mb-border);
  border-bottom: 1px solid var(--mb-border);
}
.mb-filter {
  appearance: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-pill);
  padding: 7px 16px;
  font-family: var(--mb-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-text-meta);
  transition: color 140ms var(--mb-ease),
              background 140ms var(--mb-ease),
              border-color 140ms var(--mb-ease);
}
.mb-filter:hover { color: var(--mb-text-soft); border-color: var(--mb-gold-border); }
.mb-filter[aria-pressed="true"] {
  background: var(--mb-gold-dim);
  border-color: rgba(213, 153, 62, 0.42);
  color: var(--mb-gold-soft);
}

/* Section header, the movement pattern: Playfair italic gold numeral, Inter
   bold white name, dim count, hairline running right. */
.mb-movement {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.mb-movement__num {
  font-family: var(--mb-font-numeral);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--mb-gold-display);
  flex: none;
}
.mb-movement__name {
  font-family: var(--mb-font-body);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mb-text);
  margin: 0;
  flex: none;
}
.mb-movement__count { font-size: var(--mb-fs-meta); color: var(--mb-text-meta); flex: none; }
.mb-movement__rule { flex: 1 1 auto; height: 1px; background: var(--mb-border); }

/* ---------------------------------------------------------------------------
   9. DIRECTORY A: FULL-BLEED BANDS
   -------------------------------------------------------------------------- */
.mb-bands { position: relative; z-index: 1; }

.mb-band {
  position: relative;
  display: block;
  width: 100%;
  min-height: 62vh;
  text-decoration: none;
  overflow: hidden;
  border-bottom: 1px solid var(--mb-border);
  isolation: isolate;
}
.mb-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 700ms var(--mb-ease-out);
}
/* Scrim keyed to the warm near-black, so imagery sinks into the brand field. */
.mb-band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(13, 9, 1, 0.94) 0%,
    rgba(13, 9, 1, 0.76) 34%,
    rgba(13, 9, 1, 0.30) 68%,
    rgba(13, 9, 1, 0.10) 100%);
}
.mb-band__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 62vh;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--s-9) var(--s-8) var(--s-8);
}
.mb-band__inner { max-width: 46ch; }
.mb-band__eyebrow { margin-bottom: var(--s-4); }
.mb-band__title {
  font-family: var(--mb-font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.017em;
  color: var(--mb-text);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(13, 9, 1, 0.85);
}
.mb-band__dek {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mb-text-soft);
  margin: 0 0 var(--s-5);
  max-width: 46ch;
  text-shadow: 0 1px 18px rgba(13, 9, 1, 0.8);
}
.mb-band__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mb-gold-border);
  transition: border-color 220ms var(--mb-ease), gap 220ms var(--mb-ease);
}
.mb-band__cue span { transition: transform 220ms var(--mb-ease); }
.mb-band:hover .mb-band__img { transform: scale(1.035); }
.mb-band:hover .mb-band__cue { border-bottom-color: var(--mb-gold-hi); gap: var(--s-3); }
.mb-band:hover .mb-band__cue span { transform: translateX(3px); }
.mb-band:nth-child(even) .mb-band__inner { margin-left: auto; }

/* ---------------------------------------------------------------------------
   10. DIRECTORY B: ALIVE LEAD + SESSION-CARD GRID
   -------------------------------------------------------------------------- */

/* The lead. THE one alive element on this page. */
.mb-lead { display: block; text-decoration: none; margin-top: var(--s-6); }
.mb-lead__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  border-radius: calc(var(--mb-radius-card-lg) - 1.5px);
  overflow: hidden;
}
.mb-lead__figure { position: relative; min-height: 400px; overflow: hidden; }
.mb-lead__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--mb-ease-out);
}
.mb-lead:hover .mb-lead__img { transform: scale(1.03); }
/* Warm veil so the photograph belongs to the field. */
.mb-lead__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 52%, rgba(21, 13, 0, 0.58) 100%);
}
.mb-lead__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-7);
}
.mb-lead__title {
  font-family: var(--mb-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.016em;
  color: var(--mb-text);
  margin: 0;
  text-wrap: balance;
}
.mb-lead__dek {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mb-text-soft);
  margin: 0;
  max-width: 44ch;
}
.mb-lead__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
  margin-top: var(--s-1);
}
.mb-lead__cue span { transition: transform 220ms var(--mb-ease); }
.mb-lead:hover .mb-lead__cue span { transform: translateX(3px); }

/* The grid. Session-card pattern: warm translucent fill, hairline, 2px gold
   top seam, 12px radius, no shadow at rest. */
.mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.mb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mb-card);
  border: 1px solid var(--mb-border);
  border-top: 2px solid var(--mb-gold-fill);
  border-radius: var(--mb-radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: background 220ms var(--mb-ease),
              transform 220ms var(--mb-ease),
              box-shadow 220ms var(--mb-ease),
              border-color 220ms var(--mb-ease);
}
.mb-card:hover {
  background: rgba(255, 245, 230, 0.05);
  transform: translateY(-2px);
  box-shadow: var(--mb-lift-2), 0 0 20px rgba(213, 153, 62, 0.10);
}
.mb-card:hover { border-top-color: #f0c060; }
.mb-card__figure {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mb-bg-page);
}
.mb-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--mb-ease-out);
}
.mb-card:hover .mb-card__img { transform: scale(1.035); }
.mb-card__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21, 13, 0, 0.58), transparent 54%);
}
.mb-card__tag { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 2; }
.mb-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1 1 auto;
}
.mb-card__title {
  font-family: var(--mb-font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--mb-text);
  margin: 0;
  text-wrap: balance;
}
.mb-card__dek {
  font-size: 14px;
  line-height: 1.62;
  color: var(--mb-text-soft);
  margin: 0;
  flex: 1 1 auto;
}
.mb-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--mb-border);
}
.mb-card__cue {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
  white-space: nowrap;
  margin: 0;
}
.mb-card__cue span { display: inline-block; transition: transform 220ms var(--mb-ease); }
.mb-card:hover .mb-card__cue span { transform: translateX(3px); }
.mb-card:hover .mb-meta { color: var(--mb-text-soft); }

/* The featured card ---------------------------------------------------------
   One per page. It spans the grid row, runs the image beside the copy, and
   carries the alive edge, so the directory opens on a single clear entry point
   without needing the separate lead panel that used to sit above it.

   Which article gets it is chosen at random on each load by magnetic-brand.js,
   not by date. With four to ten listicles feeding one funnel, recency is not a
   useful ranking: every piece is a live entry point, and rotating them means no
   article spends its life at the bottom of the page.                         */
.mb-item--feature { grid-column: 1 / -1; }
.mb-item--feature .mb-card {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: stretch;
}
.mb-item--feature .mb-card__figure {
  aspect-ratio: auto;
  min-height: 340px;
  height: 100%;
}
/* The scrim on a small card runs bottom-up under the tag. On the feature the
   type is to the right, so it becomes an inward edge instead. */
.mb-item--feature .mb-card__figure::after {
  background: linear-gradient(to right, transparent 55%, rgba(21, 13, 0, 0.30));
}
.mb-item--feature .mb-card__body {
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-7);
}
.mb-item--feature .mb-card__title { font-size: 29px; line-height: 1.14; letter-spacing: -0.02em; }
.mb-item--feature .mb-card__dek   { font-size: 16px; flex: 0 0 auto; }
.mb-item--feature .mb-card__foot  { margin-top: var(--s-3); }

/* "Start here" sits on the feature image. Hidden on every other card, so the
   flag travels with the feature when the script reshuffles. */
.mb-card__flag { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 2; }
.mb-card__flag[hidden] { display: none; }

@media (max-width: 860px) {
  .mb-item--feature .mb-card { grid-template-columns: 1fr; }
  .mb-item--feature .mb-card__figure { aspect-ratio: 3 / 2; min-height: 0; }
  .mb-item--feature .mb-card__figure::after {
    background: linear-gradient(to top, rgba(21, 13, 0, 0.58), transparent 54%);
  }
  .mb-item--feature .mb-card__body { padding: var(--s-5); }
  .mb-item--feature .mb-card__title { font-size: 22px; }
}

/* Closing panel. Warm page fill, gold bloom from below, gold CTA. */
.mb-panel {
  position: relative;
  margin-top: var(--s-9);
  padding: var(--s-9) var(--s-8);
  background:
    radial-gradient(ellipse 70% 130% at 50% 125%, rgba(213, 153, 62, 0.20) 0%, transparent 70%),
    var(--mb-bg-page);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-card-lg);
  text-align: center;
  overflow: hidden;
}
.mb-panel .mb-eyebrow { margin-bottom: var(--s-5); }
.mb-panel__title { margin-bottom: var(--s-4); }
.mb-panel__lede { margin-inline: auto; margin-bottom: var(--s-7); max-width: 56ch; }
.mb-panel__note { margin-top: var(--s-5); font-size: var(--mb-fs-meta); color: var(--mb-text-meta); }
/* The two live numbers. Gold and bold, so the proof reads at a glance while the
   sentence around it stays quiet. */
.mb-panel__note [data-stat] {
  color: var(--mb-gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* While a fetch is in flight the old number stays put and simply dims. Nothing
   moves, so the panel never jumps under the reader. */
[data-stats][data-loading="true"] [data-stat] { opacity: 0.55; }

/* ---------------------------------------------------------------------------
   11. ARTICLE
   -------------------------------------------------------------------------- */
/* The article banner ---------------------------------------------------------
   Built as a photographic band, the same treatment the directory's band
   direction uses: the image runs at full strength across the full width, a warm
   scrim keyed to --mb-bg sinks it into the brand field, and the type sits in the
   lower third over the heaviest part of that scrim.

   This replaced an earlier version that ghosted the image to 45 percent behind a
   dark chrome block. That protected the type but wasted the photograph — at that
   strength a reader could not tell what the scene was, which defeats the point of
   commissioning scenes a reader recognises.

   The safety now comes from the scrim rather than from hiding the image: 0.94
   opacity at the bottom edge where the headline sits, releasing to 0.10 at the
   top. Type also carries the band's text-shadow, so a bright patch in a
   photograph cannot strand a line of the headline.                            */
.mb-article-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 58vh, 620px);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 2px solid var(--mb-gold-fill);
  background: var(--mb-chrome);
}
.mb-article-hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.mb-article-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(13, 9, 1, 0.94) 0%,
      rgba(13, 9, 1, 0.78) 30%,
      rgba(13, 9, 1, 0.38) 64%,
      rgba(13, 9, 1, 0.16) 100%),
    /* a light lean into the left, where the type block lives */
    linear-gradient(to right,
      rgba(13, 9, 1, 0.34) 0%,
      rgba(13, 9, 1, 0.10) 46%,
      transparent 72%);
}
.mb-article-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: var(--s-9);
  padding-bottom: var(--s-7);
}

.mb-crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--mb-fs-meta);
  color: var(--mb-text-meta);
  margin-bottom: var(--s-6);
}
.mb-crumbs a { color: var(--mb-text-soft); text-decoration: none; }
.mb-crumbs a:hover { color: var(--mb-gold-soft); }

.mb-article-hero__title {
  max-width: 26ch;
  margin-bottom: var(--s-6);
  text-shadow: 0 1px 24px rgba(13, 9, 1, 0.85);
}

.mb-byline { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.mb-byline__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--mb-gold-border);
}
.mb-byline__name { font-size: 15px; font-weight: 700; color: var(--mb-text); margin: 0; }
.mb-byline__role { font-size: var(--mb-fs-meta); color: var(--mb-gold-soft); margin: 0; }

.mb-figure { position: relative; margin: 0 0 var(--s-7); }
.mb-figure img { width: 100%; border-radius: var(--mb-radius-card); }
.mb-figure figcaption { margin-top: var(--s-3); font-size: var(--mb-fs-meta); color: var(--mb-text-meta); }

.mb-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-9);
  align-items: start;
  padding-top: var(--s-8);
}

/* Prose ------------------------------------------------------------------
   The one place the platform's 0.62 body alpha is raised. 20px / 1.75 on a
   68-character measure at 0.78 alpha. Headings, gold, and chrome unchanged.
   ---------------------------------------------------------------------- */
.mb-prose {
  max-width: var(--mb-measure);
  font-size: var(--mb-fs-read);
  line-height: var(--mb-lh-read);
  color: var(--mb-text-read);
}
.mb-prose > * { margin-top: 0; margin-bottom: 0; }
.mb-prose > * + * { margin-top: var(--s-5); }
.mb-prose p { text-wrap: pretty; }

/* No standfirst. The opening paragraph is set at body size like every other
   paragraph. The dek in the masthead is already doing the "this is the promise"
   job at 23px, and a 22px opener underneath it made two competing ledes and a
   step-down the reader had to absorb before the article settled. */

.mb-prose h2 {
  font-family: var(--mb-font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--mb-text);
  margin-top: var(--s-8);
  margin-bottom: var(--s-2);
  scroll-margin-top: 96px;
  text-wrap: balance;
}
/* Sub-label. Gold, uppercase, Inter, matching the platform's block labels. */
.mb-prose h3 {
  font-family: var(--mb-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
  margin-top: var(--s-6);
  margin-bottom: var(--s-1);
  scroll-margin-top: 96px;
}
.mb-prose strong { font-weight: 700; color: var(--mb-text); }
.mb-prose em { font-style: italic; color: var(--mb-gold-soft); }

.mb-prose a {
  color: var(--mb-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: auto;
  transition: color 140ms var(--mb-ease),
              text-decoration-color 140ms var(--mb-ease),
              text-decoration-thickness 140ms var(--mb-ease);
}
.mb-prose a:hover {
  color: var(--mb-gold-soft);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
@supports not (color: color-mix(in srgb, white 50%, transparent)) {
  .mb-prose a { text-decoration-color: var(--mb-gold); }
}
/* An underline is a graphic, not ink, so it can carry the brand gold at full
   strength on paper where gold TEXT cannot. */
[data-reading="daylight"] .mb-prose a {
  text-decoration-color: var(--mb-gold-fill);
  text-decoration-thickness: 2px;
}
[data-reading="daylight"] .mb-prose a:hover { text-decoration-thickness: 3px; }

.mb-prose ul, .mb-prose ol { margin: 0; padding-left: var(--s-6); }
.mb-prose li + li { margin-top: var(--s-3); }
.mb-prose ul { list-style: none; }
.mb-prose ul > li { position: relative; }
.mb-prose ul > li::before {
  content: "";
  position: absolute;
  left: calc(var(--s-6) * -1);
  top: 0.78em;
  width: 10px;
  height: 1px;
  background: var(--mb-gold-fill);
}

/* The movement spine. The listicle's numbered sections use the platform's
   movement header: Playfair italic gold numeral, then the heading, then a
   hairline running to the right edge. */
.mb-prose .mb-num {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--s-4);
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--mb-border);
}
.mb-prose .mb-num__digit {
  font-family: var(--mb-font-numeral);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--mb-gold-display);
  font-variant-numeric: lining-nums;
}
.mb-prose .mb-num h2 { margin: 0; }
.mb-prose .mb-num + p { margin-top: var(--s-6); }

/* The run-in head ------------------------------------------------------------
   An article without numbered sections still has sections; writers mark them
   with a bold clause at the head of a paragraph. Rendered inline, that mark is
   invisible at a scroll — the column is one grey block and nothing tells a
   reader they are making progress. Promoted here to a real waypoint: display
   face, a short gold rule above it, and air.

   Smaller than an .mb-num heading on purpose. This is a beat inside an argument,
   not a numbered item in a list, and it should not pretend to be one.          */
.mb-prose h2.mb-runin {
  position: relative;
  font-family: var(--mb-font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.016em;
  color: var(--mb-text);
  max-width: 30ch;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
}
.mb-prose h2.mb-runin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 2px;
  background: var(--mb-gold-fill);
}
/* The paragraph it introduces sits close to it, the way a head and its body do. */
.mb-prose h2.mb-runin + p { margin-top: var(--s-4); }
/* First one in the article does not need the full gap above. */
.mb-prose > h2.mb-runin:first-child { margin-top: 0; }

/* Complete prose coverage -----------------------------------------------------
   Everything ordinary Markdown can produce has a brand style, so an article can
   be written in whatever shape it wants to be. If a writer has to think about
   which components exist before they can write, the template is in the way.  */
.mb-prose h4 {
  font-family: var(--mb-font-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--mb-text);
  margin-top: var(--s-6);
}
/* .mb-prose > * + * gives every block the same top margin. A heading wants to
   sit closer to what it introduces, so the block after an h4 pulls up. */
.mb-prose h4 + * { margin-top: var(--s-3); }
/* Ordered lists get the Playfair numerals the rest of the system uses for
   counting, so a numbered list and the listicle spine speak the same language. */
.mb-prose ol { list-style: none; counter-reset: mb-ol; }
.mb-prose ol > li { position: relative; counter-increment: mb-ol; }
.mb-prose ol > li::before {
  content: counter(mb-ol, decimal-leading-zero);
  position: absolute;
  left: calc(var(--s-6) * -1);
  top: 0.1em;
  font-family: var(--mb-font-numeral);
  font-style: italic;
  font-size: 0.92em;
  color: var(--mb-gold);
}
.mb-prose ol ol, .mb-prose ul ul, .mb-prose ol ul, .mb-prose ul ol {
  margin-top: var(--s-3);
}
.mb-prose hr.mb-rule, .mb-prose hr {
  height: 1px;
  border: 0;
  background: var(--mb-border);
  margin-block: var(--s-7);
}
.mb-prose figure.mb-figure { margin: 0; }
.mb-prose figure.mb-figure img { width: 100%; height: auto; border-radius: var(--mb-radius-card); }
.mb-prose figcaption {
  margin-top: var(--s-3);
  font-size: var(--mb-fs-meta);
  color: var(--mb-text-meta);
}
.mb-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  padding: 0.12em 0.36em;
  border-radius: 5px;
  background: var(--mb-gold-dim);
  color: var(--mb-gold-hi);
}
.mb-prose pre {
  margin: 0;
  padding: var(--s-5);
  overflow-x: auto;
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-card);
  background: var(--mb-bg-inset);
}
.mb-prose pre code { padding: 0; background: none; color: var(--mb-text-read); }
.mb-table-wrap { overflow-x: auto; }
.mb-prose table.mb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.mb-prose .mb-table th, .mb-prose .mb-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--mb-border);
}
.mb-prose .mb-table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
}
.mb-prose .mb-table tbody tr:last-child td { border-bottom: 0; }

/* Pull quote. Excon at display size, one gold hairline above. */
.mb-pull {
  margin: var(--s-8) 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--mb-gold-border);
}
.mb-pull p {
  font-family: var(--mb-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--mb-text);
  margin: 0;
  text-wrap: balance;
}
.mb-pull cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--mb-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--mb-gold-soft);
}

/* The now / instead pair. Both are session cards. The gold top seam marks the
   one you should act on; the other gets a dim seam. */
.mb-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: start;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.mb-compare__col {
  padding: var(--s-5);
  background: var(--mb-card);
  border: 1px solid var(--mb-border);
  border-top: 2px solid var(--mb-gold-fill);
  border-radius: var(--mb-radius-card);
}
.mb-compare__col h3 { margin-top: 0; }
.mb-compare__col ul { margin-top: var(--s-4); }
.mb-compare__col li { font-size: 14px; line-height: 1.6; }
.mb-compare__col--now { border-top-color: rgba(255, 255, 255, 0.14); }
.mb-compare__col--now h3 { color: var(--mb-text-meta); }
.mb-compare__col--now li { color: var(--mb-text-soft); }
.mb-compare__col--now li::before { background: rgba(255, 255, 255, 0.22); }

/* End mark */
.mb-endmark {
  display: block;
  width: 18px;
  aspect-ratio: 364 / 359;
  height: auto;
  margin-top: var(--s-7);
  opacity: 0.7;
}

/* In-body CTA */
.mb-inline-cta {
  position: relative;
  margin-top: var(--s-7);
  padding: var(--s-7);
  background:
    radial-gradient(ellipse 90% 150% at 10% 115%, rgba(213, 153, 62, 0.22) 0%, transparent 68%),
    var(--mb-bg-page);
  border: 1px solid var(--mb-border);
  border-top: 2px solid var(--mb-gold-fill);
  border-radius: var(--mb-radius-card-lg);
  overflow: hidden;
}
.mb-inline-cta .mb-eyebrow { margin-bottom: var(--s-4); }
.mb-inline-cta p { margin: 0 0 var(--s-5); font-size: 17px; line-height: 1.7; color: var(--mb-text-soft); }
.mb-inline-cta p strong { color: var(--mb-text); }

/* Sidebar --------------------------------------------------------------- */
/* The rail is in two parts, and the split is deliberate. The bio answers "who
   is telling me this," which a reader asks once and then stops asking, so it
   flows with the page and leaves. The quiz is the ask, so it pins and stays
   reachable for the whole article. Pinning the whole rail instead would put the
   CTA button below the fold of an internally-scrolling column, which is the
   worst of both: it neither travels with the reader nor stays visible. */
.mb-side {
  /* Must stretch to the grid row, NOT align-self:start. A sticky child can only
     travel inside its containing block, so a shrink-to-fit rail gives the pin
     almost no range and the quiz unpins a screen into the article. */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.mb-side__pin {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  /* Safety for short viewports only. At 1000px+ tall the pin fits outright. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mb-gold-border) transparent;
  padding-right: var(--s-1);
}
.mb-side__pin::-webkit-scrollbar { width: 6px; }
.mb-side__pin::-webkit-scrollbar-track { background: transparent; }
.mb-side__pin::-webkit-scrollbar-thumb { background: var(--mb-gold-border); border-radius: var(--mb-radius-pill); }
/* BUG FIX. The pin is a column flex container with a max-height, so its
   children were shrinkable. .mb-alive carries overflow:hidden, which sets its
   automatic minimum size to zero, so flexbox was collapsing the quiz card to
   4px and the card below it was landing on top. Nothing in the rail shrinks. */
.mb-side > *,
.mb-side__pin > * { flex: 0 0 auto; }

.mb-widget {
  padding: var(--s-5);
  background: var(--mb-card);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-card);
}
.mb-widget__title {
  font-family: var(--mb-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
  margin: 0 0 var(--s-4);
}

/* Quiz. THE one alive element on the article page. */
.mb-quiz { padding: var(--s-6); }
.mb-quiz__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.mb-quiz__flag {
  font-family: var(--mb-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-gold-soft);
  margin: 0 0 var(--s-2);
}
.mb-quiz__title {
  font-family: var(--mb-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--mb-text);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.mb-quiz__body { font-size: 14px; line-height: 1.65; color: var(--mb-text-soft); margin: 0 0 var(--s-5); }
.mb-quiz__steps { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.mb-quiz__steps li {
  display: flex;
  gap: var(--s-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mb-text-soft);
  padding-block: var(--s-3);
}
.mb-quiz__steps li + li { border-top: 1px solid var(--mb-border); }
.mb-quiz__steps b {
  font-family: var(--mb-font-numeral);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--mb-gold-soft);
  flex: none;
}
.mb-quiz__proof {
  margin: var(--s-4) 0 0;
  font-family: var(--mb-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-text-meta);
  text-align: center;
}

/* Author */
.mb-author__top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.mb-author__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--mb-gold-border);
  flex: none;
}
.mb-author__name { font-size: 17px; font-weight: 700; color: var(--mb-text); margin: 0; }
.mb-author__role { font-size: var(--mb-fs-meta); color: var(--mb-gold-soft); margin: 2px 0 0; }
.mb-author__bio { font-size: 14px; line-height: 1.65; color: var(--mb-text-soft); margin: 0 0 var(--s-5); }
.mb-author__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--mb-fs-meta);
  font-weight: 700;
  color: var(--mb-gold-soft);
  text-decoration: none;
  transition: color 140ms var(--mb-ease);
}
.mb-author__link:hover { color: var(--mb-gold-hi); }
.mb-author__link svg { width: 16px; height: 16px; flex: none; }

/* Contents */
.mb-toc { list-style: none; margin: 0; padding: 0; }
.mb-toc a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mb-text-soft);
  text-decoration: none;
  padding: var(--s-3) 0;
  transition: color 140ms var(--mb-ease);
}
.mb-toc li + li a { border-top: 1px solid var(--mb-border); }
.mb-toc a:hover,
.mb-toc a[aria-current="true"] { color: var(--mb-text); }
.mb-toc b {
  font-family: var(--mb-font-numeral);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--mb-gold-soft);
}
.mb-toc a[aria-current="true"] b { color: var(--mb-gold-hi); }

/* Share */
.mb-share { display: flex; gap: var(--s-2); }
.mb-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--mb-radius-btn);
  border: 1px solid var(--mb-border);
  color: var(--mb-text-meta);
  transition: color 140ms var(--mb-ease),
              border-color 140ms var(--mb-ease),
              background 140ms var(--mb-ease);
}
.mb-share a:hover {
  color: var(--mb-gold-soft);
  border-color: var(--mb-gold-border);
  background: var(--mb-gold-dim);
}
.mb-share svg { width: 17px; height: 17px; }

/* Keep reading. UNUSED on the article template as shipped: the article ends on
   the quiz CTA, because the job of a listicle here is the funnel, not another
   click into the library. Kept because the directory page uses the same card
   grid, and because a future article may want a related-reading block. */
.mb-more {
  position: relative;
  z-index: 1;
  margin-top: var(--s-9);
  padding-top: var(--s-8);
  border-top: 1px solid var(--mb-border);
}

/* ---------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .mb-shell { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-7); }
}

/* Short viewports (laptops at 1440x800 and below) cannot hold the quiz plus the
   share card. Drop the three-step preview rather than push the CTA button into
   an internal scroll: the button is the point, the steps are the flourish. */
@media (max-height: 900px) {
  .mb-quiz__steps { display: none; }
}

@media (max-width: 980px) {
  .mb-h1 { font-size: 40px; }
  .mb-h2 { font-size: 28px; }
  .mb-shell { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .mb-side__pin { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .mb-prose { max-width: 70ch; }
  .mb-lead__grid { grid-template-columns: 1fr; }
  .mb-lead__figure { min-height: 0; aspect-ratio: 16 / 9; }
  .mb-lead__figure::after { background: linear-gradient(to top, rgba(21,13,0,0.78), transparent 62%); }
  .mb-lead__body { padding: var(--s-6); }
  .mb-band, .mb-band__body { min-height: 56vh; }
  .mb-band__body { padding: var(--s-8) var(--s-5) var(--s-7); }
  .mb-band__title { font-size: 32px; }
  .mb-band:nth-child(even) .mb-band__inner { margin-left: 0; }
}

@media (max-width: 720px) {
  .mb-h1 { font-size: 32px; }
  .mb-h2 { font-size: 24px; }
  .mb-container { padding-inline: var(--s-5); }
  .mb-page-head { padding-top: var(--s-8); }
  .mb-nav__links { gap: var(--s-4); }
  .mb-nav__links li:not(:last-child) { display: none; }
  .mb-nav__logo { height: 22px; }
  .mb-lockup { font-size: 18px; }
  .mb-lockup b { font-size: 12px; }
  .mb-grid { grid-template-columns: 1fr; }
  .mb-band, .mb-band__body { min-height: 78vw; }
  .mb-band__title { font-size: 26px; }
  .mb-panel { padding: var(--s-7) var(--s-5); }
  .mb-prose { font-size: 19px; }
  .mb-lede { font-size: 19px; }
  .mb-prose h2 { font-size: 25px; }
  .mb-prose .mb-num { column-gap: var(--s-3); }
  .mb-prose .mb-num__digit { font-size: 26px; }
  .mb-pull p { font-size: 23px; }
  .mb-more { margin-top: var(--s-8); padding-top: var(--s-7); }
  .mb-footer__inner { flex-direction: column; align-items: flex-start; }
  .orb-primary { width: 380px; height: 380px; }
}

/* ---------------------------------------------------------------------------
   13. REDUCED MOTION + PRINT
   Every animated selector is listed here, exactly as the platform does it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mb-alive::before,
  .mb-alive-border::before,
  .mb-halo,
  .mb-core-halo,
  .mb-wide-glow,
  .orb-anim-a,
  .orb-anim-b,
  .orb-anim-c,
  [data-rise] {
    animation: none !important;
  }
  .mb-alive::before { background: conic-gradient(rgba(213,153,62,.55), rgba(240,192,96,.75), rgba(213,153,62,.55)); }
  .mb-btn-sheen::after { display: none; }
  [data-rise] { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Rise and fade on entry. The one entrance animation. */
[data-rise] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--mb-ease-out), transform 520ms var(--mb-ease-out);
}
[data-rise][data-shown="true"] { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   DAYLIGHT BEHAVIOUR OVERRIDES
   Glow headroom on a #f2ece0 field is 0.70x: additive gold light cannot
   register. So on Daylight the vocabulary converts from glow-as-light to
   glow-as-shadow. The alive border keeps its meaning (exactly one per screen,
   "this one is live") and loses its rotation, becoming a solid gold edge with a
   warm cast shadow. The halos become soft warm shadows under the gold core.
   -------------------------------------------------------------------------- */
[data-reading="daylight"] .mb-alive {
  padding: 2px;
  background: linear-gradient(135deg, var(--mb-gold-fill), var(--mb-gold-fill-2));
  box-shadow: var(--mb-lift);
}
[data-reading="daylight"] .mb-alive::before { display: none; }
/* Same conversion for the masked variant the featured card uses: a solid gold
   edge, no rotation. Kept identical to the quiz card so "alive" reads the same
   on both templates. */
[data-reading="daylight"] .mb-alive-border::before {
  background: linear-gradient(135deg, var(--mb-gold-fill), var(--mb-gold-fill-2));
  animation: none;
}
[data-reading="daylight"] .mb-alive__inner {
  background: var(--mb-bg-inset);
  backdrop-filter: none;
}
[data-reading="daylight"] .mb-halo,
[data-reading="daylight"] .mb-core-halo,
[data-reading="daylight"] .mb-wide-glow { display: none; }
[data-reading="daylight"] .mb-core {
  box-shadow: 0 4px 14px rgba(126, 87, 27, 0.34);
}
/* The three radial washes behind panels read as a stain on paper, not a bloom,
   so they drop to a fraction of their alpha and go warmer. */
/* A gold radial that reads as a warm bloom on near-black reads as a tan stain on
   near-white. On Daylight the washes drop to a trace and the surfaces earn their
   separation from elevation and a hairline instead. */
/* THE CLOSING PANEL IS A DARK BLOCK ------------------------------------------
   It was warm paper with a gold headline on it, and the gold was wrong: on a
   near-white field the only gold that clears a text contrast floor is one dark
   enough to have lost its chroma, so it reads as brown. Dull, which is the
   opposite of what the most important element on the page should be.

   The fix is the same one the article masthead uses: change the venue, not the
   value. On the page's one conversion block the surface goes to platform dark,
   the ink relights, and the gold runs at full strength — the headline, the
   bloom, and the two live figures all get their real color back. A dark panel on
   a light page is also the strongest focal device available here, which is
   exactly what a CTA should be spending. */
[data-reading="daylight"] .mb-panel {
  background:
    radial-gradient(ellipse 74% 132% at 50% 128%, rgba(213, 153, 62, 0.22) 0%, transparent 70%),
    var(--mb-chrome);
  border-color: rgba(213, 153, 62, 0.22);
  box-shadow: var(--mb-elev-2, 0 18px 44px rgba(40, 30, 14, 0.18));
  /* the ink and the gold relight inside the block */
  --mb-text:      rgba(255, 246, 234, 0.96);
  --mb-text-soft: rgba(255, 246, 234, 0.76);
  /* .mb-lede reads --mb-text-read, not --mb-text-soft. Miss this one and the
     subheading stays at daylight's dark ink and vanishes into the block. */
  --mb-text-read: rgba(255, 246, 234, 0.80);
  --mb-text-meta: rgba(255, 246, 234, 0.62);
  --mb-text-dim:  rgba(255, 246, 234, 0.46);
  --mb-border:    rgba(255, 246, 234, 0.12);
  --mb-gold-display: #d5993e;
  --mb-gold:      #e7b864;
  --mb-gold-soft: #e7b864;
  --mb-gold-hi:   #f0c060;
  --mb-gold-text-gradient: linear-gradient(135deg, #d5993e, #f0c060 42%, #d5993e 72%, #c98724);
}
[data-reading="daylight"] .mb-inline-cta {
  background: var(--mb-bg-page);
  box-shadow: var(--mb-elev);
}
[data-reading="daylight"] .mb-quiz {
  background: var(--mb-bg-inset);
}
[data-reading="daylight"] .mb-widget,
[data-reading="daylight"] .mb-card {
  box-shadow: var(--mb-elev);
}
[data-reading="daylight"] .mb-topbloom { display: none; }
/* Sand keeps one job, the one it has in the workbook: it marks the payoff. Here
   that is the "what it should show instead" column, and only that. */
[data-reading="daylight"] .mb-compare__col:not(.mb-compare__col--now) {
  background: var(--mb-sand);
}
[data-reading="daylight"] .mb-compare__col--now {
  background: var(--mb-card);
  border-top-color: rgba(40, 30, 14, 0.16);
}
/* Photography tinted for a near-black field cuts out hard against paper. A warm
   inner ring dissolves the edge until the Firefly set is re-tinted. */
[data-reading="daylight"] .mb-card__figure,
[data-reading="daylight"] .mb-lead__figure,
[data-reading="daylight"] .mb-figure img {
  box-shadow: inset 0 0 0 1px rgba(36, 28, 16, 0.14);
}
[data-reading="daylight"] .mb-card__figure::after,
[data-reading="daylight"] .mb-lead__figure::after {
  background: linear-gradient(to top, rgba(21, 13, 0, 0.42), transparent 58%);
}

/* ===========================================================================
   THE DARK MASTHEAD

   The real problem with a paper headline is not the value, it is the venue.
   Gold at full strength needs a dark surround: #d5993e is 7.8:1 on #150d00 at
   C* 56, and 2.2:1 on paper. So on Daylight the nav and the hero become ONE
   continuous dark block, the brand's own near-black, and the reading column
   starts below it.

   What that buys, all at once:
     - the headline runs the platform's full-strength gold gradient again
     - the orb bloom and the warm top-glow work, because the field is dark
     - the page opens unmistakably as Magnetic Brand and reads as paper
     - no gold anywhere has to be darkened into brown

   A dark masthead over a light body is also ordinary premium editorial
   practice, not a compromise.
   ========================================================================= */
[data-reading="daylight"] .mb-article-hero,
[data-reading="daylight"] .mb-page-head {
  position: relative;
  isolation: isolate;
  /* the ink relights inside the band */
  --mb-text:      rgba(255, 246, 234, 0.94);
  --mb-text-soft: rgba(255, 246, 234, 0.72);
  --mb-text-read: rgba(255, 246, 234, 0.82);
  --mb-text-meta: rgba(255, 246, 234, 0.66);
  --mb-text-dim:  rgba(255, 246, 234, 0.46);
  --mb-border:    rgba(255, 246, 234, 0.12);
  /* and the gold runs at full strength, because it finally can */
  --mb-gold-display: #d5993e;
  --mb-gold:      #d5993e;
  --mb-gold-soft: #e7b864;
  --mb-gold-hi:   #f0c060;
  --mb-gold-border: rgba(213, 153, 62, 0.24);
  --mb-gold-dim:    rgba(213, 153, 62, 0.12);
  --mb-gold-text-gradient: linear-gradient(135deg, #d5993e, #f0c060 40%, #d5993e 70%, #c98724);
}
/* The band itself, bled full-width from inside the container, with the warm
   top-glow and one orb restored on top of it. */
[data-reading="daylight"] .mb-page-head::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--mb-chrome);
  border-bottom: 2px solid var(--mb-gold-fill);
}
[data-reading="daylight"] .mb-page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 460px 340px at 82% 8%, rgba(213, 153, 62, 0.20) 0%, rgba(213, 153, 62, 0.06) 45%, transparent 72%),
    radial-gradient(60% 120% at 50% 0%, rgba(213, 153, 62, 0.13), transparent 72%),
    radial-gradient(1px 1px at 14% 22%, rgba(255,255,255,.50), transparent),
    radial-gradient(1px 1px at 31% 68%, rgba(255,255,255,.34), transparent),
    radial-gradient(1px 1px at 47% 15%, rgba(255,255,255,.42), transparent),
    radial-gradient(1px 1px at 63% 54%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 76% 30%, rgba(255,255,255,.46), transparent),
    radial-gradient(1px 1px at 90% 71%, rgba(255,255,255,.32), transparent);
}
/* The band runs from the nav down to the end of the standfirst. Give it room. */
[data-reading="daylight"] .mb-page-head { padding-bottom: var(--s-9); }
/* The warm top-glow div is redundant now: the band carries its own. */
/* The byline sits on the dark band, so its avatar ring goes warm again. */
[data-reading="daylight"] .mb-byline__avatar { border-color: rgba(213, 153, 62, 0.38); }

/* Type set OVER photography never inverts. A band is a dark photograph under a
   dark scrim in both surfaces, so its ink stays light and its gold stays bright
   no matter which reading surface is active. Same for the category pill that
   sits on a card image. Local variable overrides, same mechanic as the nav. */
[data-reading="daylight"] .mb-band,
[data-reading="daylight"] .mb-card__tag,
[data-reading="daylight"] .mb-lead__figure {
  --mb-text:      rgba(255, 246, 234, 0.94);
  --mb-text-soft: rgba(255, 246, 234, 0.72);
  --mb-text-meta: rgba(255, 246, 234, 0.66);
  --mb-gold:      #e7b864;
  --mb-gold-soft: #e7b864;
  --mb-gold-hi:   #f0c060;
  --mb-gold-border: rgba(213, 153, 62, 0.34);
  --mb-gold-dim:    rgba(213, 153, 62, 0.16);
}
/* The band scrim keeps its full depth on Daylight: the photograph is still the
   background, so the headline still needs a floor under it. */
[data-reading="daylight"] .mb-band__scrim {
  background: linear-gradient(to top,
    rgba(13, 9, 1, 0.94) 0%, rgba(13, 9, 1, 0.78) 34%,
    rgba(13, 9, 1, 0.38) 68%, rgba(13, 9, 1, 0.14) 100%);
}
/* And the band stack needs a visible boundary against a paper page. */
[data-reading="daylight"] .mb-band { border-bottom-color: rgba(36, 28, 16, 0.22); }

@media print {
  .mb-nav, .mb-side, .mb-progress, .mb-footer, .mb-inline-cta, .mb-more,
  .mb-ambient, .star-field, .orb, .mb-topbloom { display: none; }
  body { background: #ffffff; color: #150d00; }
  .mb-prose, .mb-h1, .mb-h2, .mb-prose h2, .mb-pull p { color: #150d00; max-width: none; }
  .mb-prose h3, .mb-prose .mb-num__digit { color: #8a5f14; }
  .mb-shell { display: block; }
}