/*
 * Vibe: IbcHandouts — page styles.
 *
 * Tokens and component rules are lifted verbatim from the WTF Design System
 * (github.com/WeTheFreeAnimalRights/design.activism.wtf, styles/main.css),
 * plus the handout-specific components below. Fonts come from the vibes
 * layout, so the @font-face block is stripped.
 *
 * The design system's semantic aliases are prefixed --ibc- here so they
 * cannot collide with the Tailwind theme in resources/css/app.css, which
 * defines its own --color-* and --font-* custom properties.
 *
 * Loaded only on this vibe's pages via @push('head'), so nothing leaks.
 */

/* ---------- Brand fonts (self-hosted, the actual WTF typefaces) ---------- */
/* ============================ TOKENS ============================ */
:root {
  /* --- Primary (brand navy) --- */
  --wtf-primary-50:  #F4F4F6;
  --wtf-primary-100: #E9E9EC;
  --wtf-primary-200: #D8DADE;
  --wtf-primary-250: #B9BDC6;
  --wtf-primary-300: #9CA1AC;
  --wtf-primary-350: #6A7183;
  --wtf-primary-400: #394259;
  --wtf-primary-500: #071330; /* Main */

  /* --- Secondary · Pink (signature accent) --- */
  --wtf-pink-50:  #FFF0F9;
  --wtf-pink-100: #FFE5F5;
  --wtf-pink-200: #FFCCEB;
  --wtf-pink-300: #FFA3DC;
  --wtf-pink-400: #FF66C4; /* logo pink */
  --wtf-pink-500: #FF33B0;
  --wtf-pink-600: #FF059F;
  --wtf-pink-700: #D60084;
  --wtf-pink-800: #B2006E;
  --wtf-pink-900: #99005E;

  /* --- Secondary · Cyan --- */
  --wtf-cyan-50:  #EDFCFC;
  --wtf-cyan-100: #D6F7F7; /* interpolated; absent from Figma export */
  --wtf-cyan-200: #B0F2F2;
  --wtf-cyan-300: #85EBEB;
  --wtf-cyan-400: #64E3E7;
  --wtf-cyan-500: #2FD9DF;
  --wtf-cyan-600: #1DB8BE;
  --wtf-cyan-700: #168D92;
  --wtf-cyan-800: #127477;
  --wtf-cyan-900: #10676A;

  /* --- Secondary · Yellow --- */
  --wtf-yellow-50:  #FFFCE0;
  --wtf-yellow-100: #FFFACC;
  --wtf-yellow-200: #FFF0A3;
  --wtf-yellow-300: #FFE070;
  --wtf-yellow-400: #FFD74A;
  --wtf-yellow-500: #FFD90F; /* Main */
  --wtf-yellow-600: #FBC400;
  --wtf-yellow-700: #DAAA00;
  --wtf-yellow-800: #B08900;
  --wtf-yellow-900: #907000;

  /* --- Secondary · Gray (cool slate) --- */
  --wtf-gray-50:  #F8FAFC;
  --wtf-gray-100: #F1F5F9;
  --wtf-gray-200: #E2E8F0;
  --wtf-gray-300: #D1D5DB;
  --wtf-gray-400: #9CA3AF;
  --wtf-gray-500: #6B7280;
  --wtf-gray-600: #4B5563;
  --wtf-gray-700: #374151;
  --wtf-gray-800: #1F2937;
  --wtf-gray-900: #111827;

  /* --- Neutral (warm gray · text, borders, surfaces) --- */
  --wtf-neutral-50:  #FAFAFA;
  --wtf-neutral-100: #F5F5F5;
  --wtf-neutral-200: #E5E5E5;
  --wtf-neutral-300: #D4D4D4;
  --wtf-neutral-400: #A3A3A3;
  --wtf-neutral-500: #737373;
  --wtf-neutral-600: #525252;
  --wtf-neutral-700: #404040;
  --wtf-neutral-800: #262626;
  --wtf-neutral-900: #171717;

  /* --- Semantic state colors --- */
  --wtf-success-50:  #F0FDF4;
  --wtf-success-100: #DCFCE7;
  --wtf-success-200: #BBF7D0;
  --wtf-success-300: #86EFAC;
  --wtf-success-400: #4ADE80;
  --wtf-success-500: #22C55E; /* Main */
  --wtf-success-600: #16A34A;
  --wtf-success-700: #15803D;
  --wtf-success-800: #166534;
  --wtf-success-900: #14532D;

  --wtf-warning-50:  #FFFBEB;
  --wtf-warning-100: #FEF3C7;
  --wtf-warning-200: #FDE68A;
  --wtf-warning-300: #FCD34D;
  --wtf-warning-400: #FBBF24;
  --wtf-warning-500: #F59E0B; /* Main */
  --wtf-warning-600: #D97706;
  --wtf-warning-700: #B45309;
  --wtf-warning-800: #92400E;
  --wtf-warning-900: #78350F;

  --wtf-destructive-50:  #FEF2F2;
  --wtf-destructive-100: #FEE2E2;
  --wtf-destructive-200: #FECACA;
  --wtf-destructive-300: #FCA5A5;
  --wtf-destructive-400: #F87171;
  --wtf-destructive-500: #EF4444; /* Main */
  --wtf-destructive-600: #DC2626;
  --wtf-destructive-700: #B91C1C;
  --wtf-destructive-800: #991B1B;
  --wtf-destructive-900: #7F1D1D;

  --wtf-black: #000000;
  --wtf-white: #FFFFFF;

  /* --- Semantic aliases (use these in components) --- */
  --ibc-color-bg:          var(--wtf-neutral-50);
  --ibc-color-surface:     var(--wtf-white);
  --ibc-color-surface-alt: var(--wtf-primary-50);
  --ibc-color-ink:         var(--wtf-primary-500);
  --ibc-color-ink-muted:   var(--wtf-primary-350);
  --ibc-color-border:      var(--wtf-neutral-200);
  --ibc-color-border-strong: var(--wtf-primary-500);
  --ibc-color-brand:       var(--wtf-primary-500);
  --ibc-color-accent:      var(--wtf-pink-400);
  --ibc-color-accent-ink:  var(--wtf-pink-600);
  --ibc-color-link:        var(--wtf-pink-600);

  /* --- Typography --- */
  --ibc-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --ibc-font-heading: "Barlow Semi Condensed", system-ui, sans-serif;
  --ibc-font-body:    "Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ibc-font-accent:  "Edu SA Beginner", "Comic Sans MS", cursive;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale — size / line-height / tracking */
  --text-display-lg: 3.25rem;  /* 52px */
  --lh-display-lg:   3.5rem;   /* 56px */
  --text-display-sm: 2.75rem;  /* 44px */
  --lh-display-sm:   3rem;     /* 48px */
  --text-h1: 2.25rem;  --lh-h1: 2.5rem;   /* 36 / 40 */
  --text-h2: 2rem;     --lh-h2: 2.25rem;  /* 32 / 36 */
  --text-h3: 1.75rem;  --lh-h3: 2rem;     /* 28 / 32 */
  --text-h4: 1.5rem;   --lh-h4: 1.75rem;  /* 24 / 28 */
  --text-h5: 1.25rem;  --lh-h5: 1.5rem;   /* 20 / 24 */
  --text-h6: 1rem;     --lh-h6: 1.25rem;  /* 16 / 20 */
  --text-body-lg: 1.125rem; --lh-body-lg: 1.75rem; /* 18 / 28 */
  --text-body:    1rem;     --lh-body:    1.5rem;  /* 16 / 24 */
  --text-body-sm: 0.875rem; --lh-body-sm: 1.25rem; /* 14 / 20 */
  --text-caption: 0.75rem;  --lh-caption: 1rem;    /* 12 / 16 */

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* --- Spacing (4px base unit) --- */
  --space-0:  0;
  --space-1:  0.25rem; /* 4 */
  --space-2:  0.5rem;  /* 8 */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.25rem; /* 20 */
  --space-6:  1.5rem;  /* 24 */
  --space-7:  1.75rem; /* 28 */
  --space-8:  2rem;    /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-14: 3.5rem;  /* 56 */
  --space-16: 4rem;    /* 64 */

  /* --- Radius --- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- Elevation (navy-tinted shadows) --- */
  --shadow-xs:  0 1px 2px rgba(7, 19, 48, 0.06);
  --shadow-sm:  0 1px 3px rgba(7, 19, 48, 0.08), 0 1px 2px rgba(7, 19, 48, 0.06);
  --shadow-md:  0 4px 8px rgba(7, 19, 48, 0.08), 0 2px 4px rgba(7, 19, 48, 0.06);
  --shadow-lg:  0 8px 16px rgba(7, 19, 48, 0.10), 0 4px 8px rgba(7, 19, 48, 0.06);
  --shadow-xl:  0 16px 32px rgba(7, 19, 48, 0.12), 0 8px 16px rgba(7, 19, 48, 0.08);
  --shadow-2xl: 0 24px 48px rgba(7, 19, 48, 0.16);

  /* --- Blur --- */
  --blur-none: 0;
  --blur-sm:   4px;
  --blur-md:   8px;
  --blur-lg:   16px;
  --blur-xl:   24px;
  --blur-2xl:  40px;

  /* --- Layout --- */
  --container: 64rem;
  --container-wide: 76rem;
}

/* ============================ RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ibc-font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--ibc-color-ink);
  background: var(--ibc-color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ibc-color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: var(--space-6); }

/* ============================ HEADINGS ============================ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--ibc-font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--ibc-color-ink);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
h2, .h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
h3, .h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
h4, .h4 { font-size: var(--text-h4); line-height: var(--lh-h4); }
h5, .h5 { font-size: var(--text-h5); line-height: var(--lh-h5); }
h6, .h6 { font-size: var(--text-h6); line-height: var(--lh-h6); }

.display-lg, .display-sm {
  font-family: var(--ibc-font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}
.display-lg { font-size: var(--text-display-lg); line-height: var(--lh-display-lg); }
.display-sm { font-size: var(--text-display-sm); line-height: var(--lh-display-sm); }

.accent-hand {
  font-family: var(--ibc-font-accent);
  color: var(--ibc-color-accent-ink);
  font-size: var(--text-body-lg);
}

p { max-width: 68ch; }
.lead { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--ibc-color-ink-muted); }
.muted { color: var(--ibc-color-ink-muted); }
code, kbd, samp {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--wtf-primary-50);
  color: var(--wtf-primary-500);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ibc-color-border);
}

/* ============================ HEADER / NAV ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ibc-color-brand);
  color: var(--wtf-white);
  border-bottom: 3px solid var(--ibc-color-accent);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--wtf-white);
}
.brand:hover { text-decoration: none; }
.brand__logo { height: 38px; width: auto; }            /* primary wordmark — white text, for dark header */
.brand small {
  font-family: var(--ibc-font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-snug);
  color: var(--wtf-cyan-300);
  padding-left: var(--space-3);
  border-left: 2px solid rgba(255, 255, 255, 0.25);
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: auto;
  align-items: center;
}
.site-nav a {
  color: var(--wtf-primary-100);
  font-family: var(--ibc-font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-snug);
}
.site-nav a:hover { background: rgba(255, 255, 255, 0.10); text-decoration: none; }
.site-nav a[aria-current="page"] {
  background: var(--ibc-color-accent);
  color: var(--wtf-primary-500);
}

/* ============================ LAYOUT ============================ */
.page {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-12) var(--space-5) var(--space-16);
}
.page--wide { max-width: var(--container-wide); }
.page-head { margin-bottom: var(--space-12); }
.page-head .eyebrow {
  font-family: var(--ibc-font-heading);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ibc-color-accent-ink);
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-2);
}
.section { margin-top: var(--space-14); }
.section > h2 {
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ibc-color-ink);
  margin-bottom: var(--space-6);
}
.stack > * + * { margin-top: var(--space-4); }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--ibc-font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: 1;
  letter-spacing: var(--tracking-snug);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--wtf-primary-500); color: var(--wtf-white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--wtf-primary-400); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--wtf-pink-400); color: var(--wtf-primary-500); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--wtf-pink-500); color: var(--wtf-white); box-shadow: var(--shadow-md); }
.btn--cyan { background: var(--wtf-cyan-400); color: var(--wtf-primary-500); }
.btn--cyan:hover { background: var(--wtf-cyan-500); }
.btn--outline { background: transparent; color: var(--wtf-primary-500); border-color: var(--wtf-primary-500); }
.btn--outline:hover { background: var(--wtf-primary-500); color: var(--wtf-white); }
.btn--ghost { background: transparent; color: var(--wtf-primary-500); }
.btn--ghost:hover { background: var(--wtf-primary-50); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-body-sm); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body-lg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ============================ CARDS ============================ */
.card {
  background: var(--ibc-color-surface);
  border: 1px solid var(--ibc-color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card--feature {
  border: 2px solid var(--wtf-primary-500);
  box-shadow: var(--shadow-md);
}
.card__eyebrow {
  font-family: var(--ibc-font-heading);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-caption);
  color: var(--ibc-color-accent-ink);
}
.card h3 { margin-top: var(--space-1); }
.card p { margin-top: var(--space-2); color: var(--ibc-color-ink-muted); }

/* ============================ BADGES ============================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--ibc-font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.badge--accent  { background: var(--wtf-pink-100);    color: var(--wtf-pink-700); }
.badge--cyan    { background: var(--wtf-cyan-100);    color: var(--wtf-cyan-800); }
.badge--success { background: var(--wtf-success-100); color: var(--wtf-success-700); }
.badge--warning { background: var(--wtf-warning-100); color: var(--wtf-warning-800); }
.badge--danger  { background: var(--wtf-destructive-100); color: var(--wtf-destructive-700); }

/* ============================ FOOTER ============================ */
.site-footer {
  border-top: 1px solid var(--ibc-color-border);
  background: var(--ibc-color-surface);
  margin-top: var(--space-16);
}
.site-footer__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-body-sm);
  color: var(--ibc-color-ink-muted);
}
.site-footer a { color: var(--ibc-color-ink); }
.site-footer__logo { height: 64px; width: auto; }      /* secondary logo — navy badge, safe on light bg */

/* ============================ UTIL ============================ */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--wtf-pink-400); color: var(--wtf-primary-500);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  font-family: var(--ibc-font-heading); font-weight: var(--weight-semibold);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 20; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 640px) {
  :root {
    --text-display-lg: 2.5rem;  --lh-display-lg: 2.75rem;
    --text-display-sm: 2.25rem; --lh-display-sm: 2.5rem;
    --text-h1: 1.875rem; --lh-h1: 2.125rem;
    --text-h2: 1.625rem; --lh-h2: 2rem;
  }
  .page { padding: var(--space-8) var(--space-4) var(--space-12); }
  .hero { padding: var(--space-10) var(--space-6); }
  .hero__doodle { display: none; }
  .site-nav { width: 100%; margin-left: 0; overflow-x: auto; }
  .brand { font-size: var(--text-h5); }
}

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

/* ================= HANDOUT COMPONENTS ================= */

/* =================================================================
   IBC training handouts — components layered on the WTF design system.

   Loads AFTER wtf-design-system.css and uses only its tokens. No new
   colours, no new font families, everything on the 4px grid.
   ================================================================= */

/* ---------------------------------------------------------- header */

.site-header__inner {
    max-width: var(--container-wide);
}

.brand__logo {
    height: 34px;
    width: auto;
}

/* --------------------------------------------------------- masthead */

.masthead {
    background: var(--wtf-primary-500);
    color: var(--wtf-white);
    position: relative;
    overflow: hidden;
}

.masthead__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: var(--space-14) var(--space-5) var(--space-12);
    position: relative;
    z-index: 1;
}

.masthead .eyebrow {
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-body-sm);
    color: var(--wtf-cyan-300);
    margin-bottom: var(--space-2);
}

.masthead .display-lg {
    color: var(--wtf-white);
    max-width: 20ch;
}

.masthead .lead {
    color: var(--wtf-primary-200);
    margin-top: var(--space-4);
    max-width: 60ch;
}

.masthead__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.masthead__doodle {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 190px;
    opacity: 0.5;
    z-index: 0;
    /* recolour the navy doodle stroke to cyan */
    filter: invert(78%) sepia(43%) saturate(760%) hue-rotate(130deg)
        brightness(101%) contrast(93%);
}

@media (max-width: 900px) {
    .masthead__doodle {
        display: none;
    }
}

.badge--onnavy {
    background: rgba(255, 255, 255, 0.12);
    color: var(--wtf-white);
}

/* ---------------------------------------------------------- layout */

.handout {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: var(--space-12) var(--space-5) var(--space-16);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
}

@media (min-width: 1024px) {
    .handout {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: var(--space-12);
    }
}

/* in-page contents */

.contents {
    display: none;
}

@media (min-width: 1024px) {
    .contents {
        display: block;
        position: sticky;
        top: 5.5rem;
        align-self: start;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
    }
}

.contents h2 {
    font-family: var(--ibc-font-heading);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ibc-color-ink-muted);
    margin-bottom: var(--space-3);
}

.contents a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--ibc-color-border);
    color: var(--ibc-color-ink-muted);
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-sm);
    line-height: var(--lh-body-sm);
}

.contents a:hover {
    color: var(--ibc-color-ink);
    border-left-color: var(--wtf-pink-300);
    text-decoration: none;
}

.contents a.is-active {
    color: var(--wtf-pink-700);
    border-left-color: var(--wtf-pink-400);
}

/* -------------------------------------------------------- sections */

.handout section {
    scroll-margin-top: 5.5rem;
    margin-bottom: var(--space-16);
}

.handout section:last-child {
    margin-bottom: 0;
}

.section-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--ibc-color-ink);
    margin-bottom: var(--space-6);
}

.section-head h2 {
    font-family: var(--ibc-font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-display-sm);
    line-height: var(--lh-display-sm);
    letter-spacing: var(--tracking-tight);
}

.section-head .num {
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-sm);
    letter-spacing: var(--tracking-wide);
    color: var(--wtf-pink-600);
}

.handout section > p,
.handout .prose > p {
    margin-bottom: var(--space-4);
}

.handout h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.handout h4 {
    font-size: var(--text-h5);
    line-height: var(--lh-h5);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.stack-6 > * + * {
    margin-top: var(--space-6);
}

.grid--2 {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 700px) {
    .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.grid--3 {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 900px) {
    .grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card > *:first-child {
    margin-top: 0;
}

.card > *:last-child {
    margin-bottom: 0;
}

/*
 * The design system sets card paragraphs in --ibc-color-ink-muted, which suits the
 * short blurb cards on the docs site. Handout cards carry primary reading
 * content, so body text stays navy here and .muted stays opt-in.
 */
.card p {
    max-width: none;
    color: inherit;
}

.card p.muted {
    color: var(--ibc-color-ink-muted);
}

/* ------------------------------------------------------- principles */

.principle {
    position: relative;
    padding-left: var(--space-16);
}

.principle .principle__num {
    position: absolute;
    left: var(--space-6);
    top: var(--space-6);
    display: grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--wtf-pink-400);
    color: var(--wtf-primary-500);
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
}

/* --------------------------------------------------------- callouts */

.callout {
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-6) 0;
    border: 1px solid transparent;
}

.callout > *:first-child {
    margin-top: 0;
}

.callout > *:last-child {
    margin-bottom: 0;
}

.callout__label {
    display: block;
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
    margin-bottom: var(--space-2);
}

.callout--key {
    background: var(--wtf-pink-50);
    border-color: var(--wtf-pink-200);
}

.callout--key .callout__label {
    color: var(--wtf-pink-700);
}

.callout--tip {
    background: var(--wtf-cyan-50);
    border-color: var(--wtf-cyan-200);
}

.callout--tip .callout__label {
    color: var(--wtf-cyan-800);
}

.callout--note {
    background: var(--wtf-primary-50);
    border-color: var(--wtf-primary-200);
}

.callout--note .callout__label {
    color: var(--ibc-color-ink-muted);
}

.callout--flag {
    background: var(--wtf-yellow-50);
    border-color: var(--wtf-yellow-300);
}

.callout--flag .callout__label {
    color: var(--wtf-yellow-900);
}

/* -------------------------------------------------------- say lines */

/* the words you actually use out loud */

.say {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-5);
    border-left: 3px solid var(--wtf-pink-400);
    background: var(--wtf-primary-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    max-width: none;
}

.say::before {
    content: '\201C';
    font-style: normal;
    font-weight: var(--weight-bold);
    color: var(--wtf-pink-600);
}

.say::after {
    content: '\201D';
    font-style: normal;
    font-weight: var(--weight-bold);
    color: var(--wtf-pink-600);
}

.say--cyan {
    border-left-color: var(--wtf-cyan-500);
}

.say--cyan::before,
.say--cyan::after {
    color: var(--wtf-cyan-700);
}

/* ---------------------------------------------------------- clarity */

.equation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-8);
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-h6);
}

.equation .op {
    color: var(--ibc-color-ink-muted);
}

.equation .term {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    background: var(--wtf-pink-100);
    color: var(--wtf-pink-800);
}

.equation .term--lead {
    background: var(--wtf-primary-500);
    color: var(--wtf-white);
}

/* -------------------------------------------------------- questions */

.qstage {
    margin-bottom: var(--space-8);
}

.qstage__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.qstage__head h3 {
    margin: 0;
    font-size: var(--text-h4);
    line-height: var(--lh-h4);
}

.qstage__head .rule {
    flex: 1;
    height: 2px;
    background: var(--ibc-color-border);
}

/* compact list, used on Foundations */

ol.questions {
    list-style: none;
    counter-reset: q var(--q-start, 0);
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

ol.questions > li {
    counter-increment: q;
    position: relative;
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-12);
    background: var(--ibc-color-surface);
    border: 1px solid var(--ibc-color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-lg);
    line-height: var(--lh-body-lg);
}

ol.questions > li::before {
    content: counter(q);
    position: absolute;
    left: var(--space-4);
    top: var(--space-3);
    display: grid;
    place-items: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-full);
    background: var(--wtf-pink-400);
    color: var(--wtf-primary-500);
    font-size: var(--text-caption);
}

ol.questions .follow {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--ibc-font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-body-sm);
    line-height: var(--lh-body-sm);
    font-style: italic;
    color: var(--ibc-color-ink-muted);
}

/* full question cards, used on the Masterclass */

.qcard {
    display: flex;
    gap: var(--space-4);
    background: var(--ibc-color-surface);
    border: 1px solid var(--ibc-color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
}

.qcard + .qcard {
    margin-top: var(--space-3);
}

.qcard__num {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--wtf-pink-400);
    color: var(--wtf-primary-500);
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
}

.qcard__body {
    min-width: 0;
}

.qcard__body > *:first-child {
    margin-top: 0;
}

.qcard__body > *:last-child {
    margin-bottom: 0;
}

.qcard__q {
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--tracking-snug);
    margin-bottom: var(--space-2);
    max-width: none;
}

.qcard__note {
    color: var(--ibc-color-ink-muted);
    margin-bottom: var(--space-3);
    max-width: none;
}

/* ------------------------------------------------------------ steps */

ol.steps {
    list-style: none;
    counter-reset: s;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

ol.steps > li {
    counter-increment: s;
    position: relative;
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-16);
    background: var(--ibc-color-surface);
    border: 1px solid var(--ibc-color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

ol.steps > li::before {
    content: counter(s);
    position: absolute;
    left: var(--space-6);
    top: var(--space-6);
    display: grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--wtf-primary-500);
    color: var(--wtf-white);
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
}

ol.steps .step__name {
    display: block;
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--tracking-snug);
}

ol.steps .step__desc {
    display: block;
    color: var(--ibc-color-ink-muted);
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
}

ol.steps > li > *:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------- accordions */

details.panel {
    background: var(--ibc-color-surface);
    border: 1px solid var(--ibc-color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

details.panel + details.panel {
    margin-top: var(--space-3);
}

details.panel > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--tracking-snug);
}

details.panel > summary::-webkit-details-marker {
    display: none;
}

details.panel > summary::after {
    content: '+';
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--text-h4);
    line-height: 1;
    color: var(--wtf-pink-600);
}

details.panel[open] > summary::after {
    content: '\2013';
}

details.panel > summary:hover {
    background: var(--wtf-primary-50);
}

.panel__body {
    padding: var(--space-5) var(--space-6) var(--space-6);
    border-top: 1px solid var(--ibc-color-border);
}

.panel__body > *:first-child {
    margin-top: 0;
}

.panel__body > *:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------- bullets */

ul.ask {
    margin: var(--space-3) 0 var(--space-4);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

ul.ask > li {
    position: relative;
    padding-left: var(--space-6);
}

ul.ask > li::before {
    content: '';
    position: absolute;
    left: var(--space-2);
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--wtf-cyan-500);
}

/* -------------------------------------------------------- dialogue */

.dialogue {
    background: var(--ibc-color-surface);
    border: 1px solid var(--ibc-color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
}

.turn {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.turn + .turn {
    border-top: 1px solid var(--ibc-color-border);
}

.turn .who {
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding-top: 0.35em;
}

.turn--coach .who {
    color: var(--wtf-pink-700);
}

.turn--pre .who {
    color: var(--ibc-color-ink-muted);
}

.turn .line {
    max-width: none;
}

.turn--pre .line {
    color: var(--ibc-color-ink-muted);
}

.turn .beat {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--ibc-font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--wtf-cyan-800);
}

@media (max-width: 640px) {
    .turn {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }
}

/* --------------------------------------------------------- compare */

.compare {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 800px) {
    .compare {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.compare .card__eyebrow {
    color: var(--ibc-color-ink-muted);
}

.compare .card--good {
    border: 2px solid var(--wtf-pink-400);
}

.compare .card--good .card__eyebrow {
    color: var(--wtf-pink-700);
}

/* ----------------------------------------------------------- cards */

.pick {
    display: block;
    color: inherit;
}

.pick:hover {
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.pick {
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

/* ---------------------------------------------------------- footer */

.site-footer {
    background: var(--wtf-primary-500);
    color: var(--wtf-primary-200);
    border-top: 3px solid var(--wtf-pink-400);
}

.site-footer__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: var(--space-10) var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    justify-content: space-between;
}

.site-footer strong {
    color: var(--wtf-white);
    font-family: var(--ibc-font-heading);
}

.site-footer a {
    color: var(--wtf-cyan-300);
}

.site-footer .cluster {
    gap: var(--space-3);
}

/* ----------------------------------------------------------- print */

@media print {
    .site-header,
    .contents,
    .no-print {
        display: none !important;
    }

    body {
        background: var(--wtf-white);
        font-size: 10.5pt;
    }

    .handout {
        display: block;
        max-width: none;
        padding: 0;
    }

    .masthead {
        background: none;
        color: var(--ibc-color-ink);
    }

    .masthead .display-lg,
    .masthead .lead {
        color: var(--ibc-color-ink);
    }

    .masthead__doodle {
        display: none;
    }

    .site-footer {
        background: none;
        color: var(--ibc-color-ink);
        border-top: 1px solid var(--ibc-color-border);
    }

    .site-footer strong,
    .site-footer a {
        color: var(--ibc-color-ink);
    }

    .handout section {
        break-inside: avoid-page;
        margin-bottom: var(--space-8);
    }

    .card,
    .qcard,
    .dialogue,
    ol.steps > li,
    details.panel {
        box-shadow: none;
        break-inside: avoid;
    }

    details.panel > summary::after {
        display: none;
    }

    .panel__body {
        display: block !important;
    }
}