/* MonsterPages project stylesheet - generated, do not edit */
.mp-root{--mp-primary:#3D2645;--mp-secondary:#C4707E;--mp-ink:#33283A;--mp-muted:#6E6276;--mp-surface:#FFFFFF;--mp-surface-alt:#FBF7F1;--mp-border:#EAE2D6;--mp-on-primary:#ffffff;--mp-on-gradient:#ffffff;--mp-on-secondary:#111111;--mp-link:#3D2645;--mp-link-alt:#3D2645;--mp-inverse-surface:#1C1520;--mp-inverse-ink:#FBF7F1;--mp-font-heading:"Instrument Serif", Georgia, 'Times New Roman', serif;--mp-font-body:"Instrument Sans", system-ui, -apple-system, 'Segoe UI', sans-serif;--mp-font-mono:Literata, Georgia, 'Charter', serif;--mp-base:17px;--mp-leading:1.65;--mp-h-weight:400;--mp-h-tracking:-0.01em;--mp-h1:clamp(34.5px, 4.14vw + 16.1px, 64.4px);--mp-h2:clamp(27.6px, 2.42vw + 13.8px, 41.4px);--mp-h3:clamp(21.85px, 1.26vw + 13.8px, 26.45px);--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:1120px;--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 */
/* SayItTrue tokens that have no slot in the brand schema.
   Mirrors packages/shared/src/brand.ts COLORS in the product repo, so
   MonsterPages and the Next app agree on both registers.

   FONT SLOTS: the engine loads exactly three families (heading, body, mono).
   SayItTrue has no monospace face, so the mono slot carries Literata — the
   typeface the speech text is set in. Eyebrows and kickers use the body font
   uppercased and letter-spaced instead of a monospace.

   TWO REGISTERS. Celebration is the default and is what these tokens describe.
   Tribute is a full palette swap applied by adding .st-tribute to .mp-root; it
   is chosen by occasion, never by preference. Eulogy and memorial surfaces are
   tribute. Tribute has no rose at all — --st-rose resolves to slate there. */
.mp-root{
  --st-accent:#C99A3C;
  --st-accent-hover:#B0842E;
  /* Gold fails as text (2.57:1 on white). This is the readable gold. */
  --st-accent-text:#7A5A13;
  --st-rose:#C4707E;
  /* Rose fails as text (3.52:1 on white). This is the readable rose. */
  --st-rose-text:#9C3F4F;
  --st-primary-hover:#2E1C34;
  --st-stage:#1C1520;
  --st-dark-muted:#B9AEC0;
  --st-font-speech:var(--mp-font-mono);
  --st-speech-size:18px;
  --st-speech-leading:1.8;
  --st-shadow-card:0 2px 8px rgba(61,38,69,.07);
  --st-shadow-lift:0 6px 20px rgba(61,38,69,.14);

  /* Links are rose in this brand — the design comp sets a{color:#C4707E}. That
     value is 3.52:1 on white and fails, so links use the same hue darkened to
     6.49:1 on surface and 6.08:1 on surface-alt. This overrides the engine's
     computed --mp-link, which resolves to the plum primary. It lives here and
     not in each page so a brand edit still reaches all of them. */
  --mp-link:#9C3F4F;
  --mp-link-alt:#9C3F4F;
}
/* Tribute register. Calm slate, no rose, no gold. */
.mp-root.st-tribute{
  --mp-primary:#2F3A40;
  --mp-secondary:#7A8B99;
  --mp-ink:#2F3A40;
  --mp-muted:#5C666D;
  --mp-surface:#FFFFFF;
  --mp-surface-alt:#F5F4F1;
  --mp-border:#E2E0DB;
  --mp-inverse-surface:#1B2125;
  --mp-inverse-ink:#F5F4F1;
  --mp-on-primary:#FFFFFF;
  --mp-link:#4E606D;
  --mp-link-alt:#4E606D;
  --st-accent:#7A8B99;
  --st-accent-hover:#687987;
  --st-accent-text:#4E606D;
  --st-rose:#7A8B99;
  --st-rose-text:#4E606D;
  --st-primary-hover:#232C31;
  --st-stage:#1B2125;
  --st-dark-muted:#AEB9C0;
  --st-shadow-card:0 2px 8px rgba(47,58,64,.07);
  --st-shadow-lift:0 6px 20px rgba(47,58,64,.14);
}