/* Fonts are self-hosted (SIL Open Font Licence, see /assets/fonts). */
@font-face { font-family: 'Hedvig Letters Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/hedvig-letters-serif-latin-opsz-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); }

/* maccaughey.com: shared styles. Brand: charcoal ground, gold accent, royal purple feature sections, champagne light sections, walnut accent on light. */
:root {
  --charcoal: #211F1D;
  --charcoal-2: #2B2825;
  --purple: #3F1D5A;
  --on-purple-soft: #C8BFD2;
  --line-dark: #45403A;
  --cream: #F3E2B9;
  --cream-2: #FAF0D7;
  --line-light: #DCC79A;
  --gold: #C9A24E;
  --gold-light: #E3C37E;
  --gold-deep: #7A4E2D;
  --ink: #1B1917;
  --ink-soft: #4A443D;
  --on-dark: #F4F1EA;
  --on-dark-soft: #BDB5A8;
  --display: 'Hedvig Letters Serif', Georgia, 'Times New Roman', serif;
  --body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --label: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --max: 1120px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--on-dark);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-light); }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

/* Sections */
.section { padding: 96px 0; }
.section--dark { background: var(--charcoal); color: var(--on-dark); }
.section--dark-2 { background: var(--purple); color: var(--on-dark); }
.section--dark-2 .soft, .section--dark-2 .lead { color: var(--on-purple-soft); }
.section--dark-2 .card { border-color: rgba(201, 162, 78, 0.45); }
.section--dark-2 .signup { background: rgba(33, 31, 29, 0.35); border-color: rgba(201, 162, 78, 0.45); }
.section--light { background: var(--cream); color: var(--ink); }
.section--light a { color: var(--gold-deep); }
.section--light a:hover { color: var(--ink); }
.rule-top { border-top: 1px solid var(--line-dark); }

/* Type */
.eyebrow {
  margin: 0;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.section--light .eyebrow { color: var(--gold-deep); }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0; font-variant-numeric: lining-nums; }
h3 { font-family: var(--body); font-weight: 600; margin: 0; }
h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.08; }
h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.14; }
h3 { font-size: 20px; line-height: 1.3; }
.lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--on-dark-soft); max-width: 700px; margin: 0; }
.section--light .lead { color: var(--ink-soft); }
.promise { font-family: var(--display); font-weight: 400; font-size: clamp(23px, 2.5vw, 28px); line-height: 1.35; max-width: 760px; margin: 0; font-variant-numeric: lining-nums; }
.soft { color: var(--on-dark-soft); }
.section--light .soft { color: var(--ink-soft); }
.stack > * { margin-top: 0; margin-bottom: 0; }
.stack > * + * { margin-top: 20px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line-dark); background: var(--charcoal); position: sticky; top: 0; z-index: 5; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-dark); }
.brand img { width: 44px; height: auto; }
.brand span { font-family: var(--display); font-weight: 400; font-size: 25px; letter-spacing: 0; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-size: 15px; }
.nav a { color: var(--on-dark); text-decoration: none; }
.nav a:hover { color: var(--gold-light); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius);
  font-family: var(--body); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-light); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark-soft); }
.btn--ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
.section--light .btn--ghost { color: var(--ink); border-color: var(--ink); }
.section--light .btn--ghost:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.btn--purple { background: var(--purple); color: #FFFFFF; border-color: rgba(201, 162, 78, 0.5); }
.btn--purple:hover { border-color: var(--gold-light); color: #FFFFFF; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Layout helpers */
.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.split > .main { flex: 999 1 560px; min-width: 0; }
.split > .side { flex: 1 1 320px; min-width: 0; }
.grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Cards */
.card { border: 1px solid var(--line-dark); border-radius: 8px; padding: 28px; }
.section--light .card { border-color: var(--line-light); background: #FCF6E6; }
.stat-label { margin: 0; font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.stat { margin: 10px 0 0; font-family: var(--display); font-weight: 400; font-variant-numeric: lining-nums; }
.stat .fig, .stat--figures { font-family: var(--body); font-weight: 500; letter-spacing: -0.02em; }
/* Numbers inside display headings: kept as a hook so figures can be restyled without touching the HTML. */
.fig { font-variant-numeric: lining-nums; }
.stat { font-size: 44px; line-height: 1.05; }
.stat small { font-size: 0.55em; color: var(--on-dark-soft); font-weight: 500; }

/* Pillars / steps */
.step { border-top: 2px solid var(--gold); padding-top: 18px; }
.section--light .step { border-color: var(--gold-deep); }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; }
.tier { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--gold); padding-top: 20px; }
.section--light .tier { border-color: var(--gold-deep); }
.tier p { margin: 0; }
.tier .grow { flex: 1; }
.tier .meta { font-family: var(--label); font-size: 13px; font-weight: 500; }

/* Quotes */
.quote { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.45; }
.quote figcaption { font-size: 14px; color: var(--ink-soft); }
.quote figcaption strong { color: var(--ink); }

/* Lists */
.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.topics li { padding: 20px 0; border-top: 1px solid var(--line-light); }

/* Forms */
.signup { background: var(--charcoal-2); border: 1px solid var(--line-dark); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.section--light .signup { background: #FCF6E6; border-color: var(--line-light); }
.signup p { margin: 0; }
.signup label { font-size: 14px; font-weight: 600; }
.signup input[type="email"] {
  min-height: 50px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid #8C857A; background: #FFFFFF; color: var(--ink); font: inherit;
}
.signup .fine { font-size: 14px; color: var(--on-dark-soft); }
.section--light .signup .fine { color: var(--ink-soft); }

/* Footer */
.site-footer { border-top: 1px solid var(--line-dark); padding: 32px 0; font-size: 14px; color: var(--on-dark-soft); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.site-footer a { color: var(--on-dark-soft); }

/* Placeholders that must be replaced before launch (see HANDOVER.md) */
.todo { background: rgba(201, 162, 78, 0.18); outline: 1px dashed var(--gold); padding: 0 4px; border-radius: 3px; }

@media (max-width: 640px) {
  .site-header { position: static; }
  .section { padding: 64px 0; }
  .nav { gap: 14px; font-size: 14px; }
  .brand span { font-size: 22px; }
  .signup, .card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }