/* ==========================================================================
   Animo — animohq.co.za
   Design system + site styles. One file, no build step, no dependencies.
   Edit the tokens in :root to restyle the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --teal:          #3C6664;
  --teal-light:    #4D7E7B;
  --teal-text:     #264a48;
  --teal-deep:     #1d3a38;
  --teal-shade:    #2f5250;
  --cream:         #F6F0E8;
  --page:          #FBF6EC;
  --card:          #fffdf7;
  --orange:        #E9893B;
  --orange-deep:   #C9762C;
  --ink:           #33403E;
  --muted:         #5f726f;

  /* Derived */
  --hairline:      rgba(38, 74, 72, .16);
  --hairline-soft: rgba(38, 74, 72, .09);
  --on-teal:       #F6F0E8;
  --on-teal-muted: rgba(246, 240, 232, .90);   /* 4.9:1 on teal — WCAG AA */
  --orange-label:  #9C5718;                    /* small uppercase labels, 5.4:1 on card */
  --focus:         #C9762C;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --step-0:  1.0625rem;                                    /* 17px body */
  --step-1:  clamp(1.15rem, 1.09rem + 0.30vw, 1.35rem);
  --step-2:  clamp(1.40rem, 1.28rem + 0.60vw, 1.80rem);
  --step-3:  clamp(1.75rem, 1.50rem + 1.20vw, 2.60rem);
  --step-4:  clamp(2.20rem, 1.65rem + 2.70vw, 4.00rem);

  /* Space */
  --gap:        1.25rem;
  --gap-lg:     2rem;
  --section-y:  clamp(3.25rem, 2rem + 5vw, 5.5rem);
  --pad-x:      clamp(1.15rem, 4vw, 2.5rem);

  /* Measure */
  --measure:    34em;
  --measure-sm: 30em;
  --wide:       72rem;

  /* Blog reading column, and the two widths media may break out to.
     --read is a nudge wider than --measure — about 80 characters a line.
     Deliberately in rem, not em: a pull quote sets its own larger font size,
     and an em value would silently make that element far wider than the
     column it is meant to sit in.
     The breakout widths step out from --read in clear jumps, so a wide image
     reads as a decision rather than a near-miss. */
  --read:        40.5rem;
  --media-wide:  52rem;
  --media-full:  66rem;

  /* Shape */
  --radius:     16px;
  --radius-sm:  10px;
  --pill:       999px;

  --shadow-card: 0 1px 2px rgba(38, 74, 72, .04), 0 8px 24px -16px rgba(38, 74, 72, .35);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--teal-text);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.5em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}

h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-inline-start: 1.25em; }
li { margin-block-end: 0.4em; }

strong, b { font-weight: 700; color: var(--teal-text); }

hr { border: 0; border-block-start: 1px solid var(--hairline); margin-block: 2.5rem; }

/* --------------------------------------------------------------------------
   3. Links & focus
   -------------------------------------------------------------------------- */
a { color: var(--teal-text); text-decoration-color: var(--orange-deep); text-underline-offset: 0.22em; text-decoration-thickness: 2px; }
a:hover { color: var(--orange-label); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-teal :focus-visible, .site-footer :focus-visible { outline-color: var(--cream); }

.skip-link {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 100;
  background: var(--cream);
  color: var(--teal-text);
  padding: 0.75rem 1.15rem;
  border-radius: var(--pill);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); padding-inline: var(--pad-x); }
.section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }

.wrap  { max-width: var(--wide); margin-inline: auto; }
.prose { max-width: var(--measure); margin-inline: auto; }

/* Heading + intro that sits above a full-width grid. Centred so it balances
   the grid below it instead of clinging to the left edge. */
.section-head { max-width: 40em; margin-inline: auto; text-align: center; margin-block-end: 0.5rem; }
.section-head > * { margin-inline: auto; }
.section-head .lede { max-width: 34em; }

.bg-page   { background: var(--page); }
.bg-cream  { background: var(--cream); }
.bg-card   { background: var(--card); }
.bg-teal   { background: var(--teal); }

/* Anything inside .on-teal flips to cream text */
.on-teal, .on-teal h1, .on-teal h2, .on-teal h3 { color: var(--on-teal); }
.on-teal a { color: var(--cream); text-decoration-color: var(--orange); }
.on-teal a:hover { color: #fff; }
.on-teal .lede, .on-teal .muted { color: var(--on-teal-muted); }

.center { text-align: center; }
.stack > * + * { margin-block-start: var(--flow, 1.15em); }

/* --------------------------------------------------------------------------
   5. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 1rem;
}
.on-teal .eyebrow { color: rgba(246, 240, 232, .90); }

.lede { font-size: var(--step-1); line-height: 1.65; color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }

.kicker {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--teal-text);
  margin: 0 0 0.5rem;
}

.display-line {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--teal-text);
  line-height: 1.25;
  margin-block-start: 1.75rem;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--primary { background: var(--orange); color: #2b1a08; }
.btn--primary:hover { background: var(--orange-deep); color: #2b1a08; }

.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(246,240,232,.55); }
.btn--ghost:hover { background: rgba(246,240,232,.14); color: #fff; border-color: var(--cream); }

.btn--outline { background: transparent; color: var(--teal-text); border-color: var(--teal); }
.btn--outline:hover { background: var(--teal); color: var(--cream); }

/* Text link with arrow */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 700;
  min-height: 44px;
  align-content: center;
  color: var(--teal-text);
  text-decoration: underline;
  text-decoration-color: var(--orange-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.arrow-link::after { content: "→"; transition: transform .18s ease; }
.arrow-link:hover::after { transform: translateX(3px); }
.arrow-link[target="_blank"]::after { content: "↗"; }

/* --------------------------------------------------------------------------
   7. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--teal);
  color: var(--cream);
  view-transition-name: site-header;
}

.site-header__inner {
  max-width: var(--wide);
  margin-inline: auto;
  padding: 0.75rem var(--pad-x);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-inline-end: auto;
  min-height: 44px;
}
.brand img, .brand svg { height: 34px; width: auto; }

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.5vw, 1.4rem);
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.site-nav li { margin: 0; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.35rem;
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  border-block-end: 2px solid transparent;
}
.site-nav a:hover { color: #fff; border-block-end-color: var(--orange); }
.site-nav a[aria-current="page"] { border-block-end-color: var(--orange); color: #fff; }

.site-nav .btn { color: #2b1a08; border-block-end: 0; }
.site-nav .btn:hover { border-block-end: 0; color: #2b1a08; }

/* The one action in the header. It is a cream pill rather than an orange one
   because it sits beside the logo all day: it needs to be findable, not loud.
   It points at the enquiry form, which is the only thing here that isn't
   already a menu item — a button that repeats a link earns nothing. */
.site-nav .nav-cta {
  min-height: 44px;   /* same tap target as every other control on the site */
  padding: 0.3rem 1.1rem;
  margin-inline-start: 0.3rem;
  border-radius: var(--pill);
  border-block-end: 0;
  background: var(--cream);
  color: var(--teal-text);
  font-weight: 700;
  font-size: var(--step--1);
}
.site-nav .nav-cta:hover,
.site-nav .nav-cta[aria-current="page"] {
  background: #fff;
  color: var(--teal-text);
  border-block-end: 0;
}

/* Small screens: no hidden menu. All four destinations stay on the page, on a
   second row. The header stops being sticky here so two rows don't eat the
   screen — it scrolls away like any other content. */
@media (max-width: 860px) {
  .site-header { position: static; }
  .site-header__inner {
    flex-direction: column;
    gap: 0.15rem;
    padding-block: 0.6rem 0.35rem;
  }
  .brand { margin-inline-end: 0; }
  .site-nav { width: 100%; }
  .site-nav ul {
    justify-content: center;
    gap: 0 clamp(0.5rem, 3vw, 1.25rem);
  }
  .site-nav a { padding-inline: 0.25rem; }
  .site-nav .btn { display: none; }   /* the hero carries the same call to action */
  /* The enquiry link stays: it is the only way to reach the form from the
     menu, and on a phone it is the thing most likely to be wanted. It takes a
     row of its own so it doesn't look like it is hanging off "Resources".
     The header is not sticky at this size, so the extra row costs nothing. */
  .site-nav li:last-child { flex-basis: 100%; display: flex; justify-content: center; }
  .site-nav .nav-cta { padding-inline: 1.1rem; margin-block-start: 0.3rem; margin-inline-start: 0; }
}

/* Phone: shrink the four links just enough that they hold one line, so the
   header is brand / links / button rather than sprawling over four rows. */
@media (max-width: 30rem) {
  .site-nav ul { gap: 0 0.5rem; }
  .site-nav a { font-size: 0.95rem; padding-inline: 0.15rem; }
  .site-nav .nav-cta { font-size: var(--step--1); padding-inline: 1.1rem; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--teal);
  padding-block: clamp(3rem, 2rem + 6vw, 5.5rem);
  padding-inline: var(--pad-x);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 1px;
  background: rgba(0,0,0,.08);
}
.hero__inner { max-width: 46rem; margin-inline: auto; position: relative; }
.hero__logo { width: min(300px, 66vw); height: auto; margin-inline: auto; margin-block-end: 1.5rem; }
.hero h1 { margin-block-end: 0.6em; }
.hero p { max-width: 30em; margin-inline: auto; }
.hero .btn { margin-block-start: 1.75rem; }

/* Slim hero used on inner pages */
.hero--strip { padding-block: clamp(2.5rem, 1.75rem + 4vw, 4rem); }
.hero--strip h1 { margin-block-end: 0; }
.hero--strip .eyebrow { margin-block-end: 0.75rem; }

/* --------------------------------------------------------------------------
   9. Checklist ("If this sounds like your week")
   -------------------------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-block: 1rem;
  margin: 0;
  border-block-start: 1px solid var(--hairline-soft);
}
.checklist li:first-child { border-block-start: 0; padding-block-start: 0; }
.checklist li::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  margin-block-start: 0.62em;
  border-radius: 50%;
  background: var(--orange);
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block-start: 2.25rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.card h3 { margin-block-end: 0.35em; }
.card p { color: var(--ink); }

.card__label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-label);
  margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   11. Two-column split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 780px) {
  .split { grid-template-columns: 35% 1fr; }
  .split--even { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--form { grid-template-columns: 1.35fr 1fr; align-items: start; }
}
.split__media { display: grid; place-items: center; }
.split__media img, .split__media svg { width: min(140px, 42vw); }

/* --------------------------------------------------------------------------
   12. Numbered steps
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: step; display: grid; gap: 1.5rem; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  margin: 0;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.steps h3 { margin-block-end: 0.25em; font-size: var(--step-0); font-family: var(--font-body); font-weight: 800; color: var(--teal-text); }

/* --------------------------------------------------------------------------
   13. FAQ accordion (native <details>)
   -------------------------------------------------------------------------- */
.faq { max-width: var(--measure); margin-inline: auto; margin-block-start: 2rem; }

.faq details {
  border-block-end: 1px solid var(--hairline);
  background: transparent;
}
.faq details:first-of-type { border-block-start: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--teal-text);
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--orange-label);
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "－"; }
.faq summary:hover { color: var(--orange-label); }
.faq .faq__body { padding-block-end: 1.35rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   14. Blog cards & post
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  margin-block-start: 2.25rem;
}

.post-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.post-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(140deg, var(--teal-light), var(--teal));
  display: grid;
  place-items: center;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__media img.post-card__fallback { width: auto; height: 46%; object-fit: contain; opacity: .95; }
.post-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.post-card__body h3 { margin: 0; font-size: var(--step-1); }
.post-card__body h3 a { text-decoration: none; }
.post-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card__excerpt { margin: 0; font-size: var(--step--1); color: var(--muted); line-height: 1.65; }
.post-card__meta { margin-block-start: auto; padding-block-start: 0.4rem; font-size: var(--step--1); color: var(--muted); }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--pill);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.6;
}
.pill--lang { background: var(--teal); color: var(--cream); }
.pill--cat  { background: rgba(233, 137, 59, .18); color: #7d440f; }

/* Single post ---------------------------------------------------------------
   The post is one centred column at --read. Anything that should be wider
   (the hero, a breakout image) is a direct child of .post-body and uses the
   .breakout helper, which cancels the column width without any negative
   margins — so nothing can ever cause a horizontal scrollbar. */
.post-header {
  max-width: var(--media-wide);
  margin-inline: auto;
  margin-block-end: 1.5rem;
  text-align: center;
}
.post-header h1 { font-size: var(--step-3); margin-block: 0.6rem 0.5rem; max-width: 18em; margin-inline: auto; }
.post-header .tags { justify-content: center; }
.post-byline { color: var(--muted); font-size: var(--step--1); margin: 0; }

.post-hero-img {
  max-width: var(--media-wide);
  margin: 0 auto 2.75rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.post-hero-img img { width: 100%; }

.post-body { max-width: var(--read); margin-inline: auto; }
.post-body h2 { font-size: var(--step-2); margin-block-start: 2.25rem; }
.post-body h3 { margin-block-start: 1.75rem; }
.post-body ul { padding-inline-start: 1.15em; }
.post-body a { font-weight: 600; }

/* First paragraph sets the tone — a touch larger, to lead the eye in. */
.post-body > p:first-of-type { font-size: var(--step-1); line-height: 1.65; color: var(--ink); }

/* Breakout: widen past the reading column without leaving the page. */
.breakout {
  width: 100%;
  max-width: var(--w, var(--read));
  margin-inline: calc(50% - min(var(--w, var(--read)), 100%) / 2);
}
.breakout--wide { --w: var(--media-wide); }
.breakout--full { --w: var(--media-full); }

/* Figures in the flow of a post */
.post-figure { margin-block: 2.5rem; }
.post-figure img {
  width: 100%;
  border-radius: var(--radius);
}
.post-figure figcaption {
  margin-block-start: 0.75rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  max-width: 34em;
  margin-inline: auto;
}

/* Two images side by side; stacks on a narrow screen. */
.post-figure__pair { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .post-figure__pair { grid-template-columns: 1fr 1fr; } }
.post-figure__pair img { block-size: 100%; object-fit: cover; }

/* A pull quote may sit inside .post-body (written with :::quote) or stand on
   its own as a sibling of it (the studio's "pull quote" field). Constraining
   it here means both land in the same column instead of the standalone one
   stretching the full width of the article. */
.pull-quote {
  max-width: var(--read);
  margin: 2.5rem auto;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-inline-start: 4px solid var(--orange);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--teal-text);
}
.pull-quote p { margin: 0; }
.pull-quote cite {
  display: block;
  margin-block-start: 0.7rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--muted);
}

/* Post note — a practical exercise or a "try this" note, set apart from the
   flowing text so a reader can find it again later. */
.post-note {
  margin-block: 2.5rem;
  background: var(--cream);
  border-radius: var(--radius);
  border-inline-start: 4px solid var(--orange);
  padding: 1.5rem 1.6rem;
}
.post-note > :first-child { margin-block-start: 0; }
.post-note > :last-child { margin-block-end: 0; }
.post-note h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--teal-text);
  margin-block: 0 0.75rem;
}
.post-note ol, .post-note ul { padding-inline-start: 1.2em; }
.post-note li + li { margin-block-start: 0.4em; }

/* --------------------------------------------------------------------------
   About page
   The page used to be one narrow ribbon of text down the middle of a wide
   screen, which is why 388 words felt like a long scroll: nothing else was
   on screen to break it up. A left rail carries the portrait and then each
   heading, so the text has a companion column instead of empty margins.
   -------------------------------------------------------------------------- */
.about-opening {
  max-width: 40em;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  text-align: center;
}
.about-opening .kicker { font-size: var(--step-2); margin-block-end: 0.75rem; }
.about-opening .lede { margin: 0; }

.about-rail { max-width: 57.5rem; margin-inline: auto; }

.about-row { margin-block-end: clamp(2rem, 1.25rem + 2vw, 2.75rem); }
.about-row:last-child { margin-block-end: 0; }
.about-row__body { max-width: var(--read); line-height: 1.68; }
.about-row__body > :last-child { margin-block-end: 0; }

/* Two columns once there is room for them. Below that the rail simply
   stacks, which is the ordinary reading order anyway. */
@media (min-width: 56rem) {
  .about-row {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 0 3rem;
    align-items: start;
  }
  .about-rail__aside { margin: 0; }
  h2.about-rail__aside {
    font-size: var(--step-2);
    text-align: end;
    text-wrap: balance;
    /* nudge the heading's cap-height onto the first line of body text */
    margin-block-start: 0.15em;
  }
}

.about-portrait {
  inline-size: 100%;
  max-inline-size: 14rem;
  block-size: auto;
  border-radius: var(--radius);
  margin-block-end: 1.25rem;
}

.about-card__label { margin-block-end: 0.6rem; }

/* Her qualifications, which were a sentence pretending to be a list. */
.credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: var(--step--1);
  line-height: 1.45;
}
.credentials li {
  margin: 0;
  padding-inline-start: 1.15rem;
  position: relative;
  font-weight: 700;
  color: var(--teal-text);
}
.credentials li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--orange);
}

/* The portrait and credentials sit in the rail as one block, so the whole
   first screen is her face, her credentials and her story together. */
@media (max-width: 55.99rem) {
  .about-card { max-width: var(--read); margin-block-end: 1.75rem; }
  .credentials { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 1.25rem; }
}
/* The headings in the rail are right-aligned so they sit against the text
   they belong to. The credentials are not: a list with a ragged left edge is
   measurably harder to scan, and scanning is the whole point of it. */

.about-cta { margin-block-start: 2rem; }

/* Share row at the foot of a post */
.post-share {
  max-width: var(--read);
  margin: 2.5rem auto 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--hairline);
}
.post-share__label {
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.post-share__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.post-share__list li { margin: 0; }

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--hairline);
  border-radius: var(--pill);
  background: var(--card);
  color: var(--teal-text);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.share-btn:hover {
  color: var(--teal-text);
  background: var(--cream);
  border-color: var(--teal);
}
.share-btn svg { flex: none; }

.post-share__note {
  margin: 0.75rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
  min-height: 1.5em;
}

.guest-box {
  max-width: var(--read);
  margin: 2.5rem auto 0;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.guest-box h2 { font-size: var(--step-1); margin-block-end: 0.4em; }
.guest-box__photo {
  inline-size: 112px;
  block-size: 112px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  /* Portraits usually have the face above centre, so bias the crop upwards
     rather than cutting the chin off. */
  object-position: 50% 28%;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--hairline);
}
.guest-box__name {
  font-weight: 700;
  color: var(--teal-text);
  margin-block-end: 0.4em;
  line-height: 1.4;
}
.guest-box p { font-size: var(--step--1); line-height: 1.7; }
.guest-box .guest-box__name { font-size: var(--step-0); }

@media (max-width: 34rem) {
  .guest-box { flex-direction: column; align-items: center; text-align: center; }
}

.post-nav {
  max-width: var(--read);
  margin: 2.5rem auto 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

/* Contribute / callout box */
.callout {
  background: var(--cream);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  max-width: 44rem;
  margin: 3rem auto 0;
  text-align: center;
}
.callout--plain { background: transparent; border: 1px solid var(--hairline); }

/* --------------------------------------------------------------------------
   15. Resources
   -------------------------------------------------------------------------- */
.resource-list { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.resource-list li { margin: 0; }
.resource {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.resource h3 { margin-block-end: 0.3em; }
.resource p { margin-block-end: 0.9em; color: var(--ink); }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; color: var(--teal-text); font-size: var(--step--1); }
.field .hint { font-size: var(--step--1); color: var(--muted); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;                 /* >=16px stops iOS zoom-on-focus */
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--teal) 50%), linear-gradient(135deg, var(--teal) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-inline-end: 2.5rem; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--teal); }

.error-msg { display: none; color: #a2321b; font-size: var(--step--1); font-weight: 600; }
.field :is(input, select, textarea):user-invalid { border-color: #a2321b; background: #fdf4f2; }
.field :is(input, select, textarea):user-invalid ~ .error-msg { display: block; }
.field :is(input, select, textarea).user-invalid-fallback { border-color: #a2321b; background: #fdf4f2; }
.field :is(input, select, textarea).user-invalid-fallback ~ .error-msg { display: block; }

.form-status { border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; font-weight: 600; }
.form-status[data-state="ok"]   { background: #e7f0ea; color: #21503a; }
.form-status[data-state="err"]  { background: #fbeae6; color: #8c2d16; }
.form-status:empty { display: none; }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-details dt { font-family: var(--font-display); font-weight: 600; color: var(--teal-text); font-size: var(--step-1); margin-block-start: 1.5rem; }
.contact-details dt:first-child { margin-block-start: 0; }
.contact-details dd { margin: 0.25rem 0 0; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--teal);
  color: var(--cream);
  padding-block: clamp(2.5rem, 2rem + 3vw, 3.75rem);
  padding-inline: var(--pad-x);
  text-align: center;
}
.site-footer a { color: var(--cream); }
.site-footer__brand { font-family: var(--font-display); font-size: var(--step-2); margin: 0 0 1rem; color: var(--cream); }
.site-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center; padding: 0; margin: 0 0 1.25rem; }
.site-footer__links li { margin: 0; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__note { color: var(--on-teal-muted); font-size: var(--step--1); margin: 0; }
.site-footer__legal { color: rgba(246,240,232,.85); font-size: 0.82rem; margin-block-start: 1.25rem; }

/* Follow-along block */
.follow { display: grid; gap: 1.5rem; margin-block-start: 2rem; }
@media (min-width: 700px) { .follow { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.follow h3 { color: var(--cream); font-size: var(--step-1); margin-block-end: 0.3em; }
.follow p { color: var(--on-teal-muted); margin-block-end: 0.6em; }

/* --------------------------------------------------------------------------
   18. Cookie banner
   -------------------------------------------------------------------------- */
.cookie-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 60;
  background: var(--teal-deep);
  color: var(--cream);
  padding: 1rem var(--pad-x);
  box-shadow: 0 -8px 30px -18px rgba(0,0,0,.7);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__inner {
  max-width: var(--wide);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}
.cookie-bar p { margin: 0; font-size: var(--step--1); max-width: 46em; color: var(--cream); }
.cookie-bar a { color: var(--cream); }
.cookie-bar__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-bar .btn { min-height: 44px; padding-inline: 1.25rem; font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   19. Blog language filter
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-block-start: 2rem;
}
.filter-bar[hidden] { display: none; }
.filter-bar__label { font-size: var(--step--1); color: var(--muted); margin: 0 0.35rem 0 0; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1.15rem;
  border: 1.5px solid var(--hairline);
  border-radius: var(--pill);
  background: transparent;
  color: var(--teal-text);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.chip:hover { border-color: var(--teal); background: rgba(60,102,100,.06); }
.chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--cream); }

.post-meta-dot { padding-inline: 0.4rem; }

/* --------------------------------------------------------------------------
   20. One-minute breathing exercise
   -------------------------------------------------------------------------- */
.breathe {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
}
.on-teal .breathe {
  background: rgba(255, 253, 247, .08);
  border-color: rgba(246, 240, 232, .28);
}

.breathe__stage {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 200px;
  margin-block: 1.25rem;
}

.breathe__circle {
  --breathe-duration: 4000ms;
  inline-size: 170px;
  block-size: 170px;
  border-radius: 50%;
  /* Dark enough that cream text inside the circle clears WCAG AA (5.7:1) */
  background: radial-gradient(circle at 50% 45%, var(--teal), var(--teal-shade) 78%);
  box-shadow: 0 0 0 10px rgba(60, 102, 100, .07), 0 0 0 22px rgba(60, 102, 100, .045);
  transform: scale(.62);
  transition: transform var(--breathe-duration) cubic-bezier(.37, 0, .32, 1);
}
.breathe__circle[data-phase="in"]  { transform: scale(1); }
.breathe__circle[data-phase="out"] { transform: scale(.62); }

.breathe__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.15rem;
  pointer-events: none;
}
.breathe__label {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--cream);
  line-height: 1.2;
}
.breathe__hint {
  font-size: 0.8rem;
  color: var(--cream);
  line-height: 1.45;
  max-inline-size: 10em;
  margin-inline: auto;
}

/* Before it starts, the copy sits on the page rather than inside a small circle,
   so it gets the full width and the page's own text colours. */
.breathe:not([data-running]) .breathe__label { color: var(--teal-text); font-size: var(--step-1); }
.breathe:not([data-running]) .breathe__hint  { color: var(--muted); max-inline-size: 24em; font-size: var(--step--1); }
.on-teal .breathe:not([data-running]) .breathe__label { color: var(--cream); }
.on-teal .breathe:not([data-running]) .breathe__hint  { color: var(--on-teal-muted); }
.breathe:not([data-running]) .breathe__circle { opacity: .10; }
.breathe:not([data-running]) .breathe__stage { block-size: 150px; }

.breathe__count {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0 0 1rem;
  min-height: 1.7em;
}
.on-teal .breathe__count { color: var(--on-teal-muted); }

@media (prefers-reduced-motion: reduce) {
  .breathe__circle { transition: none; }
  .breathe__circle[data-phase] { transform: scale(.85); }
}

/* --------------------------------------------------------------------------
   21. Motion, print, misc
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

/* Gentle entry reveal. Progressive enhancement only — browsers without
   scroll-driven animations simply show the content, which is fine. No JS. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry) {
    @keyframes animo-rise {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: none; }
    }
    .section:not(.hero) > .wrap,
    .section:not(.hero) > .prose,
    .section:not(.hero) > .faq,
    .section:not(.hero) > .callout,
    .cards > .card,
    .post-grid > .post-card,
    .resource-list > li,
    .steps > li {
      animation: animo-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }

  /* The mark breathes, very slightly. It is the whole idea of the brand. */
  @keyframes animo-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
  }
  .breathing-mark { animation: animo-breathe 8s ease-in-out infinite; transform-origin: 50% 80%; }
  .hero__logo     { animation: animo-breathe 11s ease-in-out infinite; transform-origin: 50% 60%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  @view-transition { navigation: none; }
}

@media (forced-colors: active) {
  .btn, .card, .post-card, .resource { border: 1px solid CanvasText; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media print {
  .site-header, .site-footer, .cookie-bar, .btn, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}