/* MonsterPages project stylesheet - generated, do not edit */
.mp-root{--mp-primary:#C8A24B;--mp-secondary:#DDB960;--mp-ink:#F1EBDD;--mp-muted:#A8B3AC;--mp-surface:#0F1F1A;--mp-surface-alt:#172B24;--mp-border:#2A3B33;--mp-on-primary:#12241E;--mp-on-gradient:#12241E;--mp-on-secondary:#111111;--mp-link:#C8A24B;--mp-link-alt:#C8A24B;--mp-inverse-surface:#1D352D;--mp-inverse-ink:#F1EBDD;--mp-font-heading:Fraunces, Georgia, 'Times New Roman', serif;--mp-font-body:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;--mp-font-mono:"Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--mp-base:17px;--mp-leading:1.7;--mp-h-weight:300;--mp-h-tracking:-0.02em;--mp-h1:clamp(33px, 3.96vw + 15.4px, 61.6px);--mp-h2:clamp(26.4px, 2.31vw + 13.2px, 39.6px);--mp-h3:clamp(20.9px, 1.21vw + 13.2px, 25.3px);--mp-radius:16px;--mp-radius-sm:9.6px;--mp-radius-lg:25.6px;--mp-btn-radius:40px;--mp-section-y:84px;--mp-section-y-sm:52.08px;--mp-container:1180px;--mp-gap:28.8px;--mp-primary-soft:color-mix(in srgb, var(--mp-primary) 12%, transparent);--mp-secondary-soft:color-mix(in srgb, var(--mp-secondary) 12%, transparent);--mp-ink-soft:color-mix(in srgb, var(--mp-ink) 6%, transparent)}
.mp-root{
  font-family:var(--mp-font-body);
  font-size:var(--mp-base);
  line-height:var(--mp-leading);
  color:var(--mp-ink);
  background:var(--mp-surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
}
.mp-root *,.mp-root *::before,.mp-root *::after{box-sizing:border-box}
.mp-root img,.mp-root svg,.mp-root video{max-width:100%;height:auto;display:block}
/* Buttons are excluded deliberately. This selector is (0,1,1), which outranks a
   page's own .btn-primary at (0,1,0) — so without the guard every CTA in a page
   gets repainted to the link colour, and a primary button ends up with its label
   in the same hue as its fill. Invisible. Both class names are matched because
   pages authored against the design skill use .btn and engine markup uses
   .mp-btn. */
.mp-root a:not(.btn):not(.mp-btn){color:var(--mp-link);text-decoration:none}
.mp-root a:not(.btn):not(.mp-btn):hover{text-decoration:underline;text-underline-offset:3px}
.mp-root :where(h1,h2,h3,h4,h5,h6){
  font-family:var(--mp-font-heading);
  font-weight:var(--mp-h-weight);
  letter-spacing:var(--mp-h-tracking);
  line-height:1.14;
  margin:0;
  text-wrap:balance;
}
.mp-root :focus-visible{outline:2px solid var(--mp-secondary);outline-offset:3px;border-radius:4px}
.mp-root code,.mp-root kbd,.mp-root pre{font-family:var(--mp-font-mono);font-size:.9em}

/* Prose defaults. Zero-specificity so a page's own <style> overrides them, but
   present so plain authored markup is readable without restating the basics. */
.mp-root :where(p,ul,ol,blockquote,pre,table,figure,dl){margin-block:0 1em}
.mp-root :where(p,ul,ol,blockquote,pre,table,figure,dl):last-child{margin-block-end:0}
.mp-root :where(h2){font-size:var(--mp-h2);margin-block:1.8em .55em}
.mp-root :where(h3){font-size:var(--mp-h3);margin-block:1.5em .45em}
.mp-root :where(h4,h5,h6){font-size:1.02rem;margin-block:1.3em .4em}
.mp-root :where(h1,h2,h3,h4,h5,h6):first-child{margin-block-start:0}
.mp-root :where(ul,ol){padding-inline-start:1.3em}
.mp-root :where(li)+:where(li){margin-block-start:.4em}
.mp-root :where(blockquote){
  border-inline-start:3px solid var(--mp-primary);padding-inline-start:18px;color:var(--mp-ink)
}
.mp-root :where(hr){border:0;border-block-start:1px solid var(--mp-border);margin-block:2em}
.mp-root :where(strong){font-weight:650}
.mp-root :where(small){font-size:.86em;color:var(--mp-muted)}

/* --- layout ------------------------------------------------------------- */
.mp-root .mp-section{padding-block:var(--mp-section-y);position:relative}
.mp-root .mp-section+.mp-section{padding-block-start:var(--mp-section-y)}
.mp-root .mp-container{width:100%;max-width:var(--mp-container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.mp-root .mp-tone-alt{background:var(--mp-surface-alt)}
.mp-root .mp-tone-alt a:not(.mp-btn){color:var(--mp-link-alt)}
.mp-root .mp-tone-inverse{background:var(--mp-inverse-surface);color:var(--mp-inverse-ink)}
.mp-root .mp-tone-inverse :where(h1,.mp-root h2,.mp-root h3,.mp-root h4,.mp-root h5,.mp-root h6){color:var(--mp-inverse-ink)}
.mp-root .mp-tone-inverse .mp-sub,.mp-root .mp-tone-inverse .mp-muted{color:color-mix(in srgb,var(--mp-inverse-ink) 72%,transparent)}
.mp-root .mp-tone-inverse .mp-eyebrow{color:color-mix(in srgb,var(--mp-primary) 70%,white)}
.mp-root .mp-tone-inverse .mp-card{background:color-mix(in srgb,var(--mp-inverse-ink) 7%,transparent);border-color:color-mix(in srgb,var(--mp-inverse-ink) 16%,transparent)}
.mp-root .mp-tone-inverse a{color:color-mix(in srgb,var(--mp-primary) 65%,white)}

/* --- shared type clusters ---------------------------------------------- */
.mp-root .mp-sec-head{display:grid;gap:14px;max-width:62ch;margin-block-end:calc(var(--mp-gap) * 1.5)}
.mp-root .mp-sec-head--center{margin-inline:auto;text-align:center;justify-items:center}
.mp-root .mp-eyebrow{
  font-family:var(--mp-font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mp-primary);margin:0
}
.mp-root .mp-heading{font-size:var(--mp-h2)}
.mp-root .mp-hero .mp-heading{font-size:var(--mp-h1)}
.mp-root .mp-sub{font-size:clamp(1rem,.4vw + .95rem,1.16rem);color:var(--mp-muted);line-height:1.55;max-width:60ch}
.mp-root .mp-muted{color:var(--mp-muted)}
.mp-root .mp-h{font-size:var(--mp-h3);margin-block:1.6em .5em}
.mp-root .mp-h:first-child{margin-block-start:0}

/* --- buttons ------------------------------------------------------------ */
.mp-root .mp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mp-root .mp-btn{
  --mp-btn-bg:var(--mp-primary);--mp-btn-fg:var(--mp-on-primary);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mp-font-heading);font-size:.97rem;font-weight:600;line-height:1;
  padding:14px 22px;border-radius:var(--mp-btn-radius);border:1px solid transparent;
  background:var(--mp-btn-bg);color:var(--mp-btn-fg);cursor:pointer;
  text-decoration:none;transition:filter .15s ease,transform .15s ease,background .15s ease;
  white-space:nowrap
}
.mp-root .mp-btn:hover{text-decoration:none;filter:brightness(1.07);transform:translateY(-1px)}
.mp-root .mp-btn:active{transform:translateY(0)}
.mp-root .mp-btn--secondary{--mp-btn-bg:transparent;--mp-btn-fg:var(--mp-ink);border-color:var(--mp-border)}
.mp-root .mp-btn--secondary:hover{--mp-btn-bg:var(--mp-surface-alt)}
.mp-root .mp-btn--ghost{--mp-btn-bg:transparent;--mp-btn-fg:var(--mp-primary);padding-inline:4px}
.mp-root .mp-btn--ghost:hover{text-decoration:underline;text-underline-offset:3px;transform:none}
.mp-root .mp-tone-inverse .mp-btn--secondary{--mp-btn-fg:var(--mp-inverse-ink);border-color:color-mix(in srgb,var(--mp-inverse-ink) 30%,transparent)}
.mp-root .mp-tone-inverse .mp-btn--secondary:hover{--mp-btn-bg:color-mix(in srgb,var(--mp-inverse-ink) 10%,transparent)}

/* --- cards, chips, rules ----------------------------------------------- */
.mp-root .mp-card{
  background:var(--mp-surface);border:1px solid var(--mp-border);
  border-radius:var(--mp-radius);padding:26px
}
.mp-root .mp-card--flat{border-color:transparent;padding-inline:0}
.mp-root .mp-chip{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mp-font-mono);
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:var(--mp-primary-soft);color:var(--mp-primary)
}
.mp-root .mp-rule{border:0;border-block-start:1px solid var(--mp-border);margin-block:2em}
.mp-root .mp-icon{width:22px;height:22px;flex:none}
.mp-root .mp-list{padding-inline-start:1.25em;display:grid;gap:.5em}
.mp-root .mp-list li{padding-inline-start:.15em}
.mp-root .mp-quote{
  border-inline-start:3px solid var(--mp-primary);padding-inline-start:18px;
  font-size:1.08em;color:var(--mp-ink)
}
.mp-root .mp-code{
  background:var(--mp-surface-alt);border:1px solid var(--mp-border);
  border-radius:var(--mp-radius-sm);padding:16px 18px;overflow-x:auto;
  font-size:.85rem;line-height:1.6
}
.mp-root .mp-table-wrap{overflow-x:auto;border-radius:var(--mp-radius);border:1px solid var(--mp-border)}
.mp-root .mp-table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--mp-surface)}
.mp-root .mp-table th,.mp-root .mp-table td{padding:14px 18px;text-align:left;border-block-end:1px solid var(--mp-border);vertical-align:top}
.mp-root .mp-table thead th{
  font-family:var(--mp-font-heading);font-size:.8rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mp-muted);
  background:var(--mp-surface-alt);white-space:nowrap
}
.mp-root .mp-table tbody tr:last-child td{border-block-end:0}

/* --- details/summary: the accessible, crawlable accordion ---------------- */
.mp-root :where(details){
  border:1px solid var(--mp-border);border-radius:var(--mp-radius);
  background:var(--mp-surface)
}
.mp-root :where(details)+:where(details){margin-block-start:10px}
/* Padding lives on summary and the content rather than on the <details> box, so
   an author restyling the box cannot end up with cramped or doubled spacing. */
.mp-root :where(summary){
  font-family:var(--mp-font-heading);font-weight:600;cursor:pointer;
  list-style:none;display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:16px 20px
}
.mp-root :where(details)>:not(summary){padding:0 20px 18px;margin-block:0}
.mp-root :where(summary)::-webkit-details-marker{display:none}
.mp-root :where(summary)::after{
  content:"+";flex:none;color:var(--mp-primary);font-weight:400;font-size:1.25em;line-height:1
}
.mp-root :where(details[open]) :where(summary)::after{content:"\2212"}


/* --- primitives a generated page can reuse ------------------------------ */
.mp-root .mp-anchor-target{scroll-margin-block-start:90px}
/* Heading anchors: the whole heading is the link, but it reads as a heading
   until hovered, so prose stays free of link furniture. */
.mp-root .mp-h-anchor{color:inherit;text-decoration:none}
.mp-root .mp-h-anchor:hover{color:var(--mp-primary);text-decoration:none}
.mp-root .mp-h-anchor:hover::after{
  content:"#";margin-inline-start:.35em;color:var(--mp-primary);
  font-weight:400;opacity:.55
}
.mp-root .mp-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* --- responsive --------------------------------------------------------- */
@media (max-width:820px){
  .mp-root .mp-section{padding-block:var(--mp-section-y-sm)}
  .mp-root .mp-btn{width:auto}
}
@media (max-width:520px){
  .mp-root .mp-cta-row{width:100%}
  .mp-root .mp-cta-row .mp-btn{flex:1 1 100%}
}

/* --- motion + print ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mp-root *,.mp-root *::before,.mp-root *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important
  }
}
@media print{
  .mp-root{background:#fff;color:#000}
  .mp-root .mp-section{padding-block:18px;break-inside:avoid}
  /* Print every answer, not just the ones the reader happened to open. */
  .mp-root :where(details){border-color:#ccc;break-inside:avoid}
  .mp-root :where(details)>*{display:revert !important}
  .mp-root .mp-btn{border:1px solid #999;color:#000;background:none}
}
/* project custom css */
/* HeirLoupe tokens that have no slot in the brand schema.
   Mirrors COLORS and FONTS in packages/shared/src/brand.ts in the product
   repo, so MonsterPages and the Next app agree.

   THIS IS A DARK BRAND. --mp-surface is the deep study green, --mp-ink is
   parchment. Every ratio below was measured with the engine's own
   contrastRatio() against the three grounds this palette actually uses:
   canvas #0F1F1A, surface #172B24, card #1D352D.

   ONE VISUAL RULE: LIGHT MEANS VALUE. A flagged item sits in a pool of
   lamplight; bulk sits in shadow. If everything glows, the signal is gone --
   so a page gets at most one lamplit element per screenful, and candle glow
   is a gradient at low alpha, never a fill.

   THE LAMPLIGHT CAP. Candle over canvas at 18% lifts the ground to #38402F,
   where brass text drops to 4.49:1 and fails. Every candle wash is therefore
   capped at 12% (ground #2A3528: text 10.78:1, muted 5.93:1, brass 5.33:1).

   CHIPS. A hue as text on a tint of its own hue fails: conf-high on a 16%
   conf-high chip is 3.54:1. So a tinted chip always carries the BRIGHT
   variant as its label -- the *-text tokens below. */
.mp-root{
  --hl-canvas:#0F1F1A;
  --hl-surface:#172B24;
  --hl-card:#1D352D;
  --hl-brass:#C8A24B;          /* text: 7.09 canvas, 6.20 surface, 5.46 card */
  --hl-brass-bright:#DDB960;   /* text: 9.08 canvas, 7.95 surface, 6.99 card */
  --hl-candle:#F2D48F;         /* glow only, low alpha -- never a fill */
  --hl-ember:#D97841;          /* rules, dots, borders. NOT text: 4.20 on card */
  --hl-ember-text:#E89A6B;     /* the readable ember: 7.53 canvas, 6.58 surface, 5.79 card */
  --hl-conf-high:#4FA97F;      /* 5.94 canvas, 5.20 surface, 4.57 card */
  --hl-conf-high-text:#6AC79B; /* for a tinted chip: 4.96 on a 16% chip over card */
  --hl-conf-med:#C8A24B;
  --hl-conf-low:#8A9490;       /* dots and borders. NOT text: 4.20 on card */
  --hl-conf-low-text:#A8B3AC;  /* 7.89 canvas, 6.90 surface, 6.07 card */
  --hl-text:#F1EBDD;           /* 14.35 canvas, 12.55 surface, 11.05 card */
  --hl-muted:#A8B3AC;          /* 7.89 canvas, 6.90 surface, 6.07 card */

  /* The report inverts: on screen you are in the study, the deliverable is
     archival paper. Brass is 2.23:1 on paper and must never be text there. */
  --hl-paper:#FAF6EC;
  --hl-paper-ink:#22302A;      /* 12.77 on paper */
  --hl-paper-muted:#5C6A63;    /* 5.26 on paper */
  --hl-paper-brass:#7D6F3C;    /* 4.62 on paper -- the only brass allowed there */

  --hl-hairline:color-mix(in srgb, var(--hl-text) 8%, transparent);
  --hl-shadow-card:0 1px 2px rgba(0,0,0,.28), 0 12px 28px -18px rgba(0,0,0,.7);
  --hl-shadow-lift:0 24px 50px -30px rgba(0,0,0,.85);
  --hl-shadow-lamp:0 0 42px -8px rgba(242,212,143,.34);

  --hl-brass-hover:#DDB960;
}