/* Reset, typography, buttons and layout primitives (ported from moneyfrog.in). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16.5px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 4px; }
body.is-locked { overflow: hidden; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; transition: top .2s ease; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--sec-pad); }
main { font-size: var(--fs-body); line-height: 1.6; }
main time, main .card__meta, .popular__n, .picks__n, .start-here__n, .topic-tile__count, .pagination { font-variant-numeric: tabular-nums; }
/* Buttons inside the blog layer are compact; header and footer buttons are untouched. */
main .btn { height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-btn); }

.eyebrow { display: block; font: 500 var(--fs-eyebrow)/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: var(--sp-2); }
.display, .h2, .h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -.015em; }
.display { font-size: var(--fs-display); line-height: 1.1; }
.display em { font-style: italic; color: var(--gold-ink); }
.h2 { font-size: var(--fs-h2); line-height: 1.15; max-width: 620px; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
.lead { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); max-width: 600px; }
.plain-list li + li { margin-top: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 25px; border-radius: 999px; border: 1px solid transparent;
  font: 600 14px/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--gold {
  background: var(--gold-grad); color: var(--btn-ink); border-color: rgba(150, 112, 28, .35);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, .7), 0 8px 18px -8px rgba(150, 110, 25, .55);
}
.btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255, 246, 214, .7), 0 12px 24px -10px rgba(150, 110, 25, .6); }
.btn--ghost { background: #faf9f5; color: var(--ink); border-color: #e2dbcd; }
.btn--ghost:hover { border-color: #cfc6b4; background: #fff; }
.btn--outline { background: #fff; color: var(--ink); border-color: #c9b98f; }
.btn--outline:hover { border-color: var(--gold); background: #fffdf8; }
.btn--sm { height: 44px; padding: 0 21px; font-size: 13.5px; }
.btn .icon { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}