/* MBA for the Matriarchy podcast microsites */

/* Fonts (self-hosted) */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Tokens */

:root {
  color-scheme: light;

  /* Color */
  --aubergine: #5e3a5f;
  --mauve: #8b6b8c;
  --deep-aubergine: #3d2540;
  --ochre: #c99a2f;
  --ochre-hover: #b5892a;   /* exception 5; ink on it = 5.45:1 */
  --ink: #1a1a1a;
  --cream: #f5f0e6;
  --paper: #faf6ed;
  --muted-text: #5b544a;
  --subtle: rgba(94, 58, 95, 0.15);

  /* Type families */
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;

  /* Spacing */
  --space-4: 4px;  --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-48: 48px;
  --space-56: 56px; --space-64: 64px; --space-72: 72px;

  /* Radius */
  --radius-sm: 4px;   /* buttons */
  --radius-md: 6px;   /* cards, panels, square mark */

  /* Borders */
  --border-thick: 4px;
  --border-accent: 2px;

  /* Shadow (images only) */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Motion */
  --transition-fast: 150ms ease-out;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-sans);
}

p {
  margin: 0 0 var(--space-12);
}

a:focus-visible {
  outline: 2px solid var(--aubergine);
  outline-offset: 2px;
}

strong {
  font-weight: 600;
}

/* Header */

.masthead {
  background: var(--cream);
  border-bottom: var(--border-thick) solid var(--aubergine);
  padding: 48px 64px 40px;
}

.masthead-row {
  display: flex;
  align-items: center;
  gap: var(--space-28);
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}

.masthead-mark {
  display: block;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-card);
}

.wordmark {
  margin: 0;
  font: italic 600 56px/1 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.tagline {
  margin: var(--space-12) 0 0;
  font: italic 500 13px/1.4 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--aubergine);
}

/* Main and layout */

main {
  display: block;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}

main p,
main ol.steps,
main ul.tips {
  max-width: 680px;
}

.section {
  margin-top: var(--space-72);
}

.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-36 { margin-top: 36px; }

/* Type styles */

.eyebrow {
  margin: 0 0 var(--space-8);
  font: 700 11px/1.4 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aubergine);
}

h1 {
  margin: 0 0 40px;
  font: 600 48px/1.05 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h2 {
  margin: 0 0 var(--space-24);
  font: 600 32px/1.1 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  letter-spacing: -0.005em;
  color: var(--ink);
}

h3 {
  margin: 36px 0 var(--space-12);
  font: 600 20px/1.3 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  color: var(--aubergine);
}

h2 + h3 {
  margin-top: 0;
}

.greeting {
  margin: 0 0 var(--space-12);
  font: 500 24px/1.3 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  color: var(--ink);
}

main p.lead {
  max-width: 720px;
  margin: 0 0 var(--space-24);
  font: 400 17px/1.6 var(--font-sans);
  color: var(--muted-text);
}

/* Components */

/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 24px;
  background: var(--ochre);
  color: var(--ink);
  font: 600 15px/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);  /* 4px, never pill-shaped */
  transition: background-color var(--transition-fast);
}
.btn-primary:hover { background: var(--ochre-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }

/* Holds a button on its own line at natural width */
.button-row {
  display: flex;
  align-items: flex-start;
}

/* Text link */
a.text-link {
  color: var(--aubergine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a.text-link:hover { text-decoration-thickness: 2px; }

/* Learn-more cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

.link-card {
  display: block;
  background: var(--cream);
  border-left: var(--border-accent) solid var(--aubergine);   /* 2px, always visible */
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  color: var(--aubergine);
  font: 400 22px/1.4 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  text-decoration: none;
  transition: border-left-width var(--transition-fast);
}
.link-card:hover { border-left-width: 4px; }
.link-card:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }

/* Note card */
.note-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 28px 32px;
}
.note-card > :last-child {
  margin-bottom: 0;
}

/* Simple numbered list (booking page) */
ol.steps {
  margin: var(--space-32) 0 0;
  padding-left: 1.5em;
}
ol.steps li {
  margin-bottom: var(--space-12);
}
ol.steps li::marker {
  color: var(--aubergine);
  font-weight: 600;
}

/* Bullet list (guest page) */
ul.tips {
  margin: 0 0 var(--space-12);
  padding-left: 1.25em;
}
ul.tips li {
  margin-bottom: var(--space-8);
}
ul.tips li::marker {
  color: var(--aubergine);
}

/* Question cards (guest page) */
ol.questions { list-style: none; padding: 0; margin: 24px 0; counter-reset: q; display: grid; gap: 12px; }
ol.questions li {
  counter-increment: q;
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 22px 28px 22px 80px;
  font: 400 22px/1.45 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  color: var(--ink);
}
ol.questions li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute; left: 24px; top: 22px;
  font: italic 700 28px/1 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  color: var(--aubergine);
}

/* Footer */

.site-footer {
  background: var(--aubergine);
  padding: 48px 32px;
  text-align: center;
}

.footer-wordmark {
  margin: 0 0 var(--space-8);
  font: italic 600 28px/1.1 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.footer-tagline {
  margin: 0;
  font: italic 500 13px/1.4 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--cream);
}

/* Public pages */
/* <body class="public">: header, footer and type follow the Course style guide (2026-10-18).
   Every rule for a shared class is scoped to .public so the podcast pages never change. */

body.public { line-height: 1.5; }

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 10px 16px;
  background: var(--aubergine);
  color: var(--cream);
  font: 600 16px/1.2 var(--font-sans);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 16px; }

/* Header (course style guide): the mark spans both text lines; the links sit in the
   tagline's row, on the tagline's baseline. Below 960px the links get their own row. */
.public .masthead { padding: 48px 32px 40px; }

.masthead-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto 1fr auto;
  column-gap: var(--space-28);
  max-width: 1200px;
  margin: 0 auto;
}

/* Let the mark, wordmark and tagline take part in the header grid directly */
.brand,
.brand > div {
  display: contents;
}

.public .masthead-mark {
  grid-column: 1;
  grid-row: 1 / 5;
  align-self: center;
}

.public .wordmark {
  grid-column: 2;
  grid-row: 2;
  font-size: 48px;
  line-height: 1.1;
}

.public .tagline {
  grid-column: 2;
  grid-row: 3;
  align-self: baseline;
  margin: var(--space-4) 0 0;
  font: italic 500 20px/1.3 var(--font-sans);
}

.site-nav {
  grid-column: 3;
  grid-row: 3;
  align-self: baseline;
  margin-left: var(--space-48);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--aubergine);
  font: 600 16px/1.3 var(--font-sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-fast);
}
.site-nav a:hover { border-bottom-color: var(--aubergine); }

@media (max-width: 959px) {
  .public .masthead { padding: 32px 24px 24px; }
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 5;
    margin: var(--space-16) 0 0;
  }
}

/* Body spans the header's width, so the text lines up with the mark */
.public main { max-width: 1264px; }

/* Footer (course style guide sizes) */
.public .footer-wordmark { font-size: 32px; }
.public .footer-tagline { font-size: 14px; line-height: 1.5; }

/* Footer links row */
.footer-links { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font: 500 16px/1.4 var(--font-sans); }
.footer-links a { display: inline-block; padding: 11px 2px; color: var(--cream); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-links a:hover { text-decoration-thickness: 2px; }
.footer-links a:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.footer-links a[aria-current="page"] { text-decoration-thickness: 2px; }

/* Type styles */
main p.turn {
  max-width: 680px;
  margin: 48px 0 16px;
  font: italic 500 28px/1.25 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  color: var(--aubergine);
}

.public main p.lead { line-height: 1.5; }

.closing {
  max-width: 680px;
  font: 400 15px/1.5 var(--font-sans);
  color: var(--muted-text);
}

.meta-line {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--muted-text);
}

.small-note {
  margin-top: var(--space-32);
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink);
}

/* Example script (course style guide): what something sounds like out loud */
blockquote.example {
  max-width: 680px;
  margin: 0 0 var(--space-12);
  padding: 20px 24px;
  background: var(--cream);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font: 400 18px/1.5 var(--font-serif);
  font-variation-settings: 'SOFT' 0;
}
blockquote.example p { margin: 0; }
blockquote.example + :not(blockquote.example) { margin-top: var(--space-24); }

/* Key idea (course style guide): one line the reader should carry away */
main p.key-idea {
  margin: var(--space-32) 0;
  padding: var(--space-4) 0 var(--space-4) var(--space-24);
  border-left: var(--border-thick) solid var(--aubergine);
  font: 600 20px/1.3 var(--font-serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  color: var(--ink);
}

/* Secondary button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;               /* 2px border makes it the same size as .btn-primary */
  background: transparent;
  color: var(--aubergine);
  font: 600 16px/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid var(--aubergine);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn-secondary:hover { background: var(--aubergine); color: var(--cream); }
.btn-secondary:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }

button.btn-primary { cursor: pointer; }
.public .btn-primary { font-size: 16px; }

/* Call to action row (one button) */
.cta { margin: 32px 0 8px; }

/* Form */
.form { max-width: 560px; margin: 32px 0 0; }
.form .field { margin: 0 0 24px; }
.form label {
  display: block;
  margin: 0 0 8px;
  font: 600 16px/1.4 var(--font-sans);
  color: var(--ink);
}
.form input[type="text"], .form input[type="email"], .form textarea {
  display: block; width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-sans);   /* 16px stops iPhones zooming in on focus */
  border: 1px solid var(--mauve);        /* mauve is a border only, never text */
  border-radius: var(--radius-sm);
}
.form textarea { resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }

/* Legal pages (terms, privacy) */
.legal h1 { margin-bottom: var(--space-12); }
.legal .section { margin-top: var(--space-48); }

/* Long email addresses wrap instead of scrolling sideways */
.closing a.text-link,
.legal a.text-link { overflow-wrap: anywhere; }

/* Visually hidden text (for screen readers) */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Mobile (under 700px) */

@media (max-width: 699px) {
  .masthead {
    padding: 32px 24px 28px;
  }
  .masthead-mark {
    width: 64px;
    height: 64px;
  }
  .wordmark {
    font-size: 36px;
  }

  main {
    padding: 32px 20px 60px;
  }
  .section {
    margin-top: var(--space-56);
  }

  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 26px;
  }
  .greeting {
    font-size: 22px;
  }

  .note-card {
    padding: 24px 20px;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  ol.questions li {
    padding: 18px 20px 18px 64px;
  }
  ol.questions li::before {
    left: 18px;
    top: 18px;
    font-size: 24px;
  }

  .footer-wordmark {
    font-size: 24px;
  }

  main p.turn {
    margin: 40px 0 12px;
    font-size: 24px;
  }
  blockquote.example {
    padding: 16px 20px;
  }
  .legal .section {
    margin-top: 40px;
  }

  .public .masthead {
    padding: 28px 16px 16px;
  }
  .masthead-inner {
    column-gap: var(--space-16);
  }
  .public main {
    padding-left: 16px;
    padding-right: 16px;
  }
  .public .wordmark {
    font-size: 32px;
  }
  .public .footer-wordmark {
    font-size: 26px;
  }
}

/* Reduced motion */

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