/*
  Lisa Fowler Wellness
  ---------------------------------------------------------------------------
  One stylesheet, organised with cascade layers so later layers win without
  specificity battles:

    reset       browser normalisation
    tokens      colour, type, space and motion variables (light + dark)
    base        element defaults
    layout      page-level structure and grids
    components  reusable pieces (header, buttons, offerings, faq ...)
    pages       one-off compositions (home hero, about story ...)
    utilities   small single-purpose helpers

  Palette is drawn from the photography: linen walls, spruce, the teal
  cushions, goldenrod from the fields and yellow side tables, and the
  charcoal wall behind the pine armoire. Every text pairing meets WCAG AA.
*/

@layer reset, tokens, base, layout, components, pages, utilities;

/* Fonts ------------------------------------------------------------------ */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-roman.v1.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.v1.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next-roman.v1.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next-italic.v1.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Local fallbacks tuned to the web fonts' metrics so text does not jump
   when the real fonts arrive (values from scripts/build-fonts.py notes). */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 97.65%;
  ascent-override: 100.15%;
  descent-override: 26.11%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Atkinson Fallback";
  src: local("Arial");
  size-adjust: 99.97%;
  ascent-override: 98.43%;
  descent-override: 31.61%;
  line-gap-override: 0%;
}

/* Reset ------------------------------------------------------------------ */

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-block-size: 100svh;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
  }

  img {
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  li,
  figcaption,
  blockquote,
  dd {
    overflow-wrap: break-word;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  table {
    border-collapse: collapse;
  }
}

/* Tokens ----------------------------------------------------------------- */

@layer tokens {
  :root {
    /* Raw palette */
    --c-paper: #f5f0e8;
    --c-paper-deep: #eae2d4;
    --c-mist: #e4e6e1;
    --c-ink: #1c2420;
    --c-ink-soft: #4a544e;
    --c-sea: #1d5c58;
    --c-sea-deep: #164845;
    --c-sea-glass: #a8c8be;
    --c-ochre: #86581a;
    --c-goldenrod: #d9a441;
    --c-driftwood: #b39b7a;
    --c-charcoal: #262b29;
    --c-linen: #efe9de;
    --c-sea-on-dark: #9dd3c8;
    --c-gold-on-dark: #e2b45c;

    /* Roles */
    --bg: var(--c-paper);
    --bg-alt: var(--c-paper-deep);
    --bg-dark: var(--c-charcoal);
    --text: var(--c-ink);
    --text-soft: var(--c-ink-soft);
    --text-on-dark: var(--c-linen);
    --accent: var(--c-sea);
    --accent-strong: var(--c-sea-deep);
    --accent-warm: var(--c-ochre);
    --ornament: var(--c-goldenrod);
    --ornament-cool: var(--c-sea-glass);
    /* Large decorative numerals: 3.3:1 or better on both paper tones. */
    --numeral: #a0721c;
    /* Pink tiger lily. --lily-ink is the text-safe rose (4.96:1 on paper). */
    --lily: #ec96a3;
    --lily-ink: #a8475f;
    --rule: color-mix(in oklab, var(--c-ink) 18%, transparent);
    --rule-strong: color-mix(in oklab, var(--c-ink) 40%, transparent);
    --focus: var(--c-sea);
    --button-bg: var(--c-sea);
    --button-bg-hover: var(--c-ink);
    --button-text: var(--c-paper);
    --photo-filter: none;
    /* Fine paper grain from an SVG noise filter, alpha baked in. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

    /* Type */
    --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
    --font-text: "Atkinson Hyperlegible Next", "Atkinson Fallback", Arial, Helvetica, sans-serif;

    --step--2: clamp(0.781rem, 0.77rem + 0.05vw, 0.82rem);
    --step--1: clamp(0.938rem, 0.912rem + 0.113vw, 1.025rem);
    --step-0: clamp(1.125rem, 1.08rem + 0.202vw, 1.281rem);
    --step-1: clamp(1.35rem, 1.277rem + 0.325vw, 1.602rem);
    --step-2: clamp(1.62rem, 1.509rem + 0.493vw, 2.002rem);
    --step-3: clamp(1.944rem, 1.782rem + 0.721vw, 2.502rem);
    --step-4: clamp(2.333rem, 2.102rem + 1.026vw, 3.128rem);
    --step-5: clamp(2.799rem, 2.477rem + 1.433vw, 3.91rem);
    --step-6: clamp(3.359rem, 2.916rem + 1.972vw, 4.888rem);
    --step-hero: clamp(2.6rem, 1.4rem + 5.4vw, 7.25rem);

    /* Space */
    --space-3xs: clamp(0.281rem, 0.27rem + 0.05vw, 0.32rem);
    --space-2xs: clamp(0.563rem, 0.54rem + 0.101vw, 0.641rem);
    --space-xs: clamp(0.844rem, 0.81rem + 0.151vw, 0.961rem);
    --space-s: clamp(1.125rem, 1.08rem + 0.202vw, 1.281rem);
    --space-m: clamp(1.688rem, 1.619rem + 0.302vw, 1.922rem);
    --space-l: clamp(2.25rem, 2.159rem + 0.403vw, 2.563rem);
    --space-xl: clamp(3.375rem, 3.239rem + 0.605vw, 3.844rem);
    --space-2xl: clamp(4.5rem, 4.319rem + 0.806vw, 5.125rem);
    --space-3xl: clamp(6.75rem, 6.478rem + 1.21vw, 7.688rem);
    --space-section: clamp(4.5rem, 2.831rem + 7.419vw, 10.25rem);

    /* Layout */
    --gutter: clamp(1rem, 0.274rem + 3.226vw, 3.5rem);
    --content-max: 84rem;
    --measure: 66ch;
    --measure-narrow: 52ch;
    /* Distance from the viewport edge to the content column, usable as
       padding on any full-width element. */
    --edge: max(var(--gutter), (100% - var(--content-max)) / 2);
    --header-height: 4.75rem;
    --radius: 2px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-quick: 160ms;
    --duration-base: 320ms;
    --duration-slow: 900ms;

    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #131816;
      --bg-alt: #1a201d;
      --bg-dark: #0c100e;
      --text: #ece6da;
      --text-soft: #b5afa3;
      --text-on-dark: #ece6da;
      --accent: #8fcbc0;
      --accent-strong: #b5e0d7;
      --accent-warm: #e3b65f;
      --ornament: #c99a3e;
      --ornament-cool: #2f5a53;
      --numeral: #c99a3e;
      --lily-ink: #f0a6b3;
      --rule: color-mix(in oklab, #ece6da 16%, transparent);
      --rule-strong: color-mix(in oklab, #ece6da 38%, transparent);
      --focus: #8fcbc0;
      --button-bg: #8fcbc0;
      --button-bg-hover: #ece6da;
      --button-text: #131816;
      --photo-filter: brightness(0.9) contrast(1.04);
      --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.9 0 0 0 0 0.86 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    }
  }

  .section-acupuncture {
    --accent: #33452f;
    --accent-strong: #26351f;
    --button-bg: #33452f;
    --focus: #33452f;
  }

  .section-supervision {
    --accent: #1b2531;
    --accent-strong: #11181f;
    --button-bg: #1b2531;
    --focus: #1b2531;
  }

  @media (prefers-color-scheme: dark) {
    .section-acupuncture {
      --accent: #a9c49c;
      --accent-strong: #c6dbbb;
      --button-bg: #a9c49c;
      --focus: #a9c49c;
    }

    .section-supervision {
      --accent: #a9bdd4;
      --accent-strong: #c8d6e6;
      --button-bg: #a9bdd4;
      --focus: #a9bdd4;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --text-soft: var(--text);
      --rule: var(--rule-strong);
      --grain: none;
    }
  }
}

/* Base ------------------------------------------------------------------- */

@layer base {
  html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
    font-size: 100%;
    line-height: 1.6;
    scroll-padding-block-start: calc(var(--header-height) + var(--space-s));
    hanging-punctuation: first last;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    font-size: var(--step-0);
    background-color: var(--bg);
    background-image: var(--grain);
    background-size: 240px 240px;
    position: relative;
    isolation: isolate;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }


  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 360;
    line-height: 1.08;
    letter-spacing: -0.012em;
    text-wrap: balance;
    color: var(--text);
  }

  h1 {
    font-size: var(--step-6);
    font-weight: 330;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: var(--step-4);
  }

  h3 {
    font-size: var(--step-2);
    line-height: 1.15;
  }

  h4 {
    font-size: var(--step-1);
    line-height: 1.2;
  }

  em,
  i {
    font-style: italic;
  }

  h1 em,
  h2 em,
  h3 em {
    font-weight: 300;
  }

  strong,
  b {
    font-weight: 650;
  }

  p,
  li,
  dd {
    text-wrap: pretty;
  }

  a {
    color: var(--accent);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
    transition:
      text-decoration-color var(--duration-quick) ease,
      text-decoration-thickness var(--duration-quick) ease,
      color var(--duration-quick) ease;
  }

  a:hover {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
  }

  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--radius);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  ::selection {
    background: var(--ornament-cool);
    color: var(--text);
  }

  img {
    filter: var(--photo-filter);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--rule);
  }

  abbr[title] {
    text-decoration: none;
  }

  /* Phone numbers never break across lines. */
  a[href^="tel:"] {
    white-space: nowrap;
  }

  address {
    font-style: normal;
  }

  main:focus {
    outline: none;
  }

  [hidden] {
    display: none !important;
  }
}

/* Layout ----------------------------------------------------------------- */

@layer layout {
  .wrap {
    padding-inline: var(--edge);
  }

  .section {
    padding-block: var(--space-section);
    padding-inline: var(--edge);
  }

  .section--tight {
    padding-block: var(--space-2xl);
  }

  .section--alt {
    background: var(--bg-alt);
  }

  .section--dark {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    --text: var(--text-on-dark);
    --text-soft: color-mix(in oklab, var(--text-on-dark) 80%, transparent);
    --accent: var(--c-sea-on-dark);
    --accent-warm: var(--c-gold-on-dark);
    --rule: color-mix(in oklab, var(--text-on-dark) 20%, transparent);
    --focus: var(--c-sea-on-dark);
    --button-bg: var(--c-sea-on-dark);
    --button-bg-hover: var(--c-linen);
    --button-text: var(--c-charcoal);
    --ornament-cool: #2f5a53;
  }

  .section + .section:not(.section--alt, .section--dark, .section--flush) {
    border-block-start: 1px solid var(--rule);
  }

  .section--flush {
    padding-block-start: 0;
  }

  /* Flow: consistent vertical rhythm between siblings. */
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  .measure {
    max-inline-size: var(--measure);
  }

  .measure-narrow {
    max-inline-size: var(--measure-narrow);
  }

  /* Twelve-column grid inside the content column. */
  .cols {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-m);
    row-gap: var(--space-xl);
    align-items: start;
  }

  .cols > * {
    grid-column: 1 / -1;
  }

  /* Span classes set the end line and start classes the start line, so
     they compose: class="span-5 start-8" covers columns 8 to 12. */
  @media (min-width: 56em) {
    .cols > [class*="span-"] { grid-column-start: auto; }
    .cols > .span-4 { grid-column-end: span 4; }
    .cols > .span-5 { grid-column-end: span 5; }
    .cols > .span-6 { grid-column-end: span 6; }
    .cols > .span-7 { grid-column-end: span 7; }
    .cols > .span-8 { grid-column-end: span 8; }
    .cols > .start-1 { grid-column-start: 1; }
    .cols > .start-2 { grid-column-start: 2; }
    .cols > .start-3 { grid-column-start: 3; }
    .cols > .start-4 { grid-column-start: 4; }
    .cols > .start-5 { grid-column-start: 5; }
    .cols > .start-6 { grid-column-start: 6; }
    .cols > .start-7 { grid-column-start: 7; }
    .cols > .start-8 { grid-column-start: 8; }
    .cols > .align-center { align-self: center; }
    .cols > .align-end { align-self: end; }
  }

  /* Section head with a margin note. On wide screens the note sits in a
     left-hand margin column, like an annotation in a field journal. */
  .section-head {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-xl);
  }

  @media (min-width: 64em) {
    .section-head {
      grid-template-columns: 11rem minmax(0, 1fr);
      column-gap: var(--space-l);
      align-items: baseline;
    }

    .section-head > :not(.margin-note) {
      grid-column: 2;
    }
  }

  .section-head__lede {
    color: var(--text-soft);
    font-size: var(--step-1);
    line-height: 1.45;
    max-inline-size: 44ch;
  }
}

/* Components ------------------------------------------------------------- */

@layer components {
  /* Skip link */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: 100;
    padding: 0.75em 1.1em;
    background: var(--c-ink);
    color: var(--c-paper);
    font-weight: 650;
    text-decoration: none;
    border-radius: var(--radius);
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: none;
  }

  /* Margin note: the small italic label that opens a section. */
  .margin-note {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--accent-warm);
    display: flex;
    align-items: baseline;
    gap: 0.5em;
  }

  .margin-note__number {
    font-style: normal;
    font-feature-settings: "lnum";
    font-size: 0.8em;
    color: var(--text-soft);
  }

  /* Header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background-color: var(--bg);
    background-image: var(--grain);
    background-size: 240px 240px;
    border-block-end: 1px solid transparent;
    transition: border-color var(--duration-base) ease;
    view-transition-name: site-header;
  }

  .site-header[data-scrolled] {
    border-block-end-color: var(--rule);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-xs) var(--space-m);
    min-block-size: var(--header-height);
    padding-inline: var(--edge);
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
    text-decoration: none;
    margin-inline-end: auto;
    min-block-size: 44px;
  }

  .wordmark:hover {
    color: var(--text);
  }

  .wordmark__mark {
    inline-size: clamp(1.75rem, 1.5rem + 1vw, 2.1rem);
    block-size: clamp(1.75rem, 1.5rem + 1vw, 2.1rem);
    color: var(--accent);
    flex: none;
  }

  .wordmark__text {
    font-family: var(--font-display);
    font-size: clamp(0.98rem, 0.6rem + 1.9vw, 1.4rem);
    font-weight: 420;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
  }

  .wordmark__text em {
    font-weight: 330;
  }

  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-block-size: 44px;
    padding: 0.5em 0.75em;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: transparent;
    font-weight: 600;
    font-size: var(--step--1);
    letter-spacing: 0.02em;
  }

  .site-nav__toggle svg {
    inline-size: 1.1em;
    block-size: 1.1em;
  }

  .site-nav__panel {
    /* Mobile: a full-height sheet in the top layer (Popover API). */
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: var(--space-m) var(--gutter) var(--space-xl);
    border: 0;
    background: var(--bg);
    color: var(--text);
    overflow-y: auto;
  }

  .site-nav__panel::backdrop {
    background: color-mix(in oklab, var(--c-ink) 40%, transparent);
  }

  .site-nav__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-block-size: calc(var(--header-height) - var(--space-m));
    margin-block-end: var(--space-l);
  }

  .site-nav__close {
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: 0.5em 0.9em;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: transparent;
    font-weight: 600;
    font-size: var(--step--1);
  }

  .site-nav__list {
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
  }

  .site-nav__list li {
    border-block-end: 1px solid var(--rule);
  }

  .site-nav__link {
    display: block;
    padding-block: var(--space-xs);
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 350;
    line-height: 1.15;
    color: var(--text);
    text-decoration: none;
  }

  .site-nav__link[aria-current="page"] {
    font-style: italic;
    color: var(--accent);
  }

  .site-nav__panel-foot {
    margin-block-start: var(--space-l);
    display: grid;
    gap: var(--space-s);
    justify-items: start;
  }

  .site-header__inner > .site-header__book {
    display: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .site-nav__panel:popover-open {
      animation: sheet-in var(--duration-base) var(--ease-out);
    }
  }

  @keyframes sheet-in {
    from {
      opacity: 0;
      transform: translateY(-1.5rem);
    }
  }

  @media (min-width: 62em) {
    .site-nav__toggle,
    .site-nav__panel-head,
    .site-nav__panel-foot {
      display: none;
    }

    /* Desktop: the same list, shown inline. Author styles override the
       UA rule that hides closed popovers. */
    .site-nav__panel,
    .site-nav__panel:popover-open {
      display: block;
      position: static;
      inset: auto;
      inline-size: auto;
      block-size: auto;
      padding: 0;
      background: transparent;
      overflow: visible;
      animation: none;
    }

    .site-nav__list {
      display: flex;
      gap: clamp(0.25rem, -0.5rem + 1.4vw, 1.5rem);
    }

    .site-nav__list li {
      border: 0;
    }

    .site-nav__link {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-block-size: 44px;
      padding: 0 0.35rem;
      font-family: var(--font-text);
      font-size: var(--step--1);
      font-weight: 550;
      letter-spacing: 0.01em;
      color: var(--text);
    }

    .site-nav__link::after {
      content: "";
      position: absolute;
      inset-inline: 0.35rem;
      inset-block-end: 0.55rem;
      block-size: 2px;
      background: var(--ornament);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--duration-base) var(--ease-out);
    }

    .site-nav__link:hover::after,
    .site-nav__link[aria-current="page"]::after {
      transform: scaleX(1);
    }

    .site-nav__link[aria-current="page"] {
      font-style: normal;
      color: var(--text);
    }

    .site-header__inner > .site-header__book {
      display: inline-flex;
    }

    /* The wordmark is the home link on wide screens. */
    .site-nav__home {
      display: none;
    }
  }

  /* Buttons and arrow links */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65em;
    min-block-size: 3rem;
    padding: 0.8em 1.35em;
    border: 1px solid var(--button-bg);
    border-radius: var(--radius);
    background: var(--button-bg);
    color: var(--button-text);
    font-family: var(--font-text);
    font-size: var(--step-0);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition:
      background-color var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out),
      color var(--duration-base) var(--ease-out);
  }

  .button:hover {
    background: var(--button-bg-hover);
    border-color: var(--button-bg-hover);
    color: var(--button-text);
  }

  .button--small {
    min-block-size: 2.75rem;
    padding: 0.55em 1em;
    font-size: var(--step--1);
  }

  .button--quiet {
    background: transparent;
    color: var(--text);
    border-color: var(--rule-strong);
  }

  .button--quiet:hover {
    background: transparent;
    color: var(--text);
    border-color: var(--text);
  }

  .button svg,
  .arrow-link svg {
    inline-size: 1.05em;
    block-size: 1.05em;
    flex: none;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .button:hover svg,
  .arrow-link:hover svg {
    transform: translateX(0.22em);
  }

  .button[data-external]:hover svg,
  .arrow-link[data-external]:hover svg {
    transform: translate(0.15em, -0.15em);
  }

  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-block-size: 44px;
    font-weight: 650;
    text-decoration: none;
    color: var(--accent);
  }

  .arrow-link span {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  }

  .arrow-link:hover span {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
  }

  /* Figures */
  .figure {
    display: grid;
    gap: var(--space-xs);
  }

  .figure img {
    inline-size: 100%;
    object-fit: cover;
    background: var(--bg-alt);
  }

  .figure figcaption {
    font-size: var(--step--1);
    line-height: 1.45;
    color: var(--text-soft);
    max-inline-size: 48ch;
  }

  .figure figcaption::before {
    content: "";
    display: inline-block;
    inline-size: 1.5rem;
    block-size: 1px;
    margin-inline-end: 0.6rem;
    vertical-align: middle;
    background: var(--ornament);
  }

  .ratio-portrait img { aspect-ratio: 4 / 5; }
  .ratio-tall img { aspect-ratio: 2 / 3; }
  .ratio-landscape img { aspect-ratio: 3 / 2; }
  .ratio-wide img { aspect-ratio: 16 / 9; }
  .ratio-panorama img { aspect-ratio: 21 / 9; }

  /* Prose for long-form pages */
  .prose {
    --flow-space: 1.1em;
    max-inline-size: var(--measure);
  }

  .prose h2 {
    font-size: var(--step-3);
    --flow-space: 2.2em;
  }

  .prose h3 {
    font-size: var(--step-2);
    --flow-space: 1.8em;
  }

  .prose h2 + *,
  .prose h3 + * {
    --flow-space: 0.6em;
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.25em;
  }

  .prose li + li {
    margin-block-start: 0.45em;
  }

  .prose ul li::marker {
    color: var(--ornament);
  }

  .lede {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 330;
    line-height: 1.32;
    letter-spacing: -0.005em;
    color: var(--text);
  }

  .prose--book p + p {
    margin-block-start: 0;
    text-indent: 1.5em;
  }

  .drop-cap::first-letter {
    float: inline-start;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 4.1em;
    line-height: 0.8;
    margin-block-start: 0.08em;
    margin-inline-end: 0.08em;
    color: var(--lily-ink);
  }

  /* Pull quote */
  .pull-quote {
    display: grid;
    gap: var(--space-s);
  }

  .pull-quote p {
    max-inline-size: 26ch;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-4);
    font-weight: 320;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  @media (min-width: 48em) {
    .pull-quote p {
      text-indent: -0.4em;
    }
  }

  .pull-quote p::before {
    content: "\201C";
    color: var(--ornament);
  }

  .pull-quote p::after {
    content: "\201D";
    color: var(--ornament);
  }

  .pull-quote figcaption {
    color: var(--text-soft);
    font-size: var(--step--1);
  }

  .pull-quote figcaption::before {
    content: "";
    display: inline-block;
    inline-size: 1.5rem;
    block-size: 1px;
    margin-inline-end: 0.6rem;
    vertical-align: middle;
    background: var(--ornament);
  }

  /* Focus areas: three large words with a short paragraph each. */
  .focus-list {
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
    border-block-start: 1px solid var(--rule);
  }

  .focus-list__item {
    display: grid;
    gap: var(--space-xs);
    padding-block: var(--space-l);
    border-block-end: 1px solid var(--rule);
  }

  .focus-list__title {
    font-size: var(--step-4);
    font-weight: 320;
  }

  .focus-list__title em {
    color: var(--accent);
  }

  .focus-list__body {
    color: var(--text-soft);
    max-inline-size: 46ch;
  }

  @media (min-width: 56em) {
    .focus-list__item {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      column-gap: var(--space-xl);
      align-items: baseline;
    }
  }

  /* Offerings: editorial rows instead of cards. */
  .offerings {
    list-style: none;
    padding: 0;
    border-block-start: 1px solid var(--rule-strong);
  }

  .offering {
    position: relative;
    display: grid;
    gap: var(--space-xs) var(--space-l);
    padding-block: var(--space-l);
    border-block-end: 1px solid var(--rule);
  }

  .offering__title {
    font-size: var(--step-3);
    font-weight: 340;
  }

  .offering__title a {
    color: var(--text);
    text-decoration: none;
  }

  /* The whole row is clickable via the title link's stretched hit area. */
  .offering__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .offering__title a:focus-visible {
    outline: none;
  }

  .offering:has(.offering__title a:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 4px;
  }

  .offering__status {
    display: block;
    margin-block-start: 0.35em;
    font-family: var(--font-text);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent-warm);
  }

  .offering__body {
    color: var(--text-soft);
    max-inline-size: 52ch;
  }

  .offering__meta {
    font-size: var(--step--1);
    color: var(--text-soft);
    display: grid;
    gap: 0.2em;
  }

  .offering__meta strong {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 400;
    font-variant-numeric: lining-nums;
    color: var(--text);
  }

  .offering__arrow {
    display: none;
  }

  @media (min-width: 56em) {
    .offering {
      grid-template-columns: minmax(0, 4.5fr) minmax(0, 5fr) minmax(0, 2.5fr) 2.5rem;
      align-items: baseline;
    }

    .offering__arrow {
      display: block;
      align-self: center;
      inline-size: 1.6rem;
      block-size: 1.6rem;
      color: var(--accent);
      transition: transform var(--duration-base) var(--ease-out);
    }
  }

  @media (hover: hover) {
    .offering:has(a) {
      transition: background-color var(--duration-base) var(--ease-out);
    }

    .offering:has(a):hover {
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ornament-cool) 22%, transparent) 30%, transparent);
    }

    .offering:has(a):hover .offering__arrow {
      transform: translateX(0.35rem);
    }
  }

  /* Numbered steps (no connecting lines or dots). */
  .steps {
    list-style: none;
    padding: 0;
    counter-reset: step;
    display: grid;
    gap: var(--space-xl) var(--space-l);
  }

  .steps li {
    counter-increment: step;
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
  }

  .steps li::before {
    content: counter(step);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--step-6);
    line-height: 0.9;
    color: var(--numeral);
  }

  .steps h3 {
    font-size: var(--step-2);
  }

  .steps p {
    color: var(--text-soft);
  }

  @media (min-width: 48em) {
    .steps {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    }
  }

  /* FAQ (native details/summary) */
  .faq {
    border-block-start: 1px solid var(--rule-strong);
    max-inline-size: 58rem;
  }

  .faq details {
    border-block-end: 1px solid var(--rule);
  }

  .faq summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-m);
    padding-block: var(--space-s);
    min-block-size: 44px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 380;
    line-height: 1.3;
  }

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

  .faq summary::after {
    content: "+";
    flex: none;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 1.4em;
    line-height: 1;
    color: var(--accent);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .faq details[open] summary::after {
    transform: rotate(45deg);
  }

  .faq__answer {
    padding-block-end: var(--space-m);
    color: var(--text-soft);
    max-inline-size: var(--measure);
  }

  @media (prefers-reduced-motion: no-preference) {
    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--duration-base) var(--ease-out),
        content-visibility var(--duration-base) allow-discrete;
    }

    .faq details[open]::details-content {
      block-size: auto;
      block-size: calc-size(auto, size);
    }
  }

  /* Notes and callouts */
  .note {
    padding: var(--space-m);
    border-inline-start: 3px solid var(--ornament);
    background: color-mix(in oklab, var(--bg-alt) 70%, transparent);
    max-inline-size: var(--measure);
  }

  .note > * + * {
    margin-block-start: 0.6em;
  }

  .note__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 420;
  }

  /* Services and fees list */
  .fee-list {
    list-style: none;
    padding: 0;
    border-block-start: 1px solid var(--rule-strong);
  }

  .fee {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xs) var(--space-m);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--rule);
  }

  .fee__name {
    font-size: var(--step-2);
    font-weight: 360;
  }

  .fee__price {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 380;
    font-variant-numeric: lining-nums tabular-nums;
    text-align: end;
    white-space: nowrap;
  }

  .fee__details {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 1.5em;
    color: var(--text-soft);
    font-size: var(--step--1);
  }

  .fee__details div {
    display: flex;
    gap: 0.4em;
  }

  .fee__details dt {
    font-weight: 650;
    color: var(--text);
  }

  .fee__desc {
    grid-column: 1 / -1;
    color: var(--text-soft);
    max-inline-size: 60ch;
  }

  .fee__book {
    grid-column: 1 / -1;
  }

  @media (min-width: 48em) {
    .fee {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: baseline;
    }

    .fee__book {
      grid-column: auto;
      grid-row: 1;
      grid-column-start: 3;
    }

    .fee__details,
    .fee__desc {
      grid-column: 1 / 2;
    }
  }

  /* Crisis support block */
  .crisis {
    display: grid;
    gap: var(--space-xs);
  }

  .crisis__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 420;
  }

  .crisis__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.5em;
  }

  .crisis__list a {
    font-weight: 650;
    white-space: nowrap;
  }

  /* Footer */
  .site-footer {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    padding-block: var(--space-2xl) var(--space-l);
    padding-inline: var(--edge);
    --text: var(--text-on-dark);
    --text-soft: color-mix(in oklab, var(--text-on-dark) 78%, transparent);
    --accent: var(--c-sea-on-dark);
    --accent-warm: var(--c-gold-on-dark);
    --rule: color-mix(in oklab, var(--text-on-dark) 18%, transparent);
    --focus: var(--c-sea-on-dark);
    --button-bg: var(--c-sea-on-dark);
    --button-bg-hover: var(--c-linen);
    --button-text: var(--c-charcoal);
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-xl) var(--space-l);
  }

  @media (min-width: 48em) {
    .site-footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 72em) {
    .site-footer__grid {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
    }
  }

  .site-footer h2 {
    font-family: var(--font-text);
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    margin-block-end: var(--space-xs);
  }

  .site-footer__brand {
    display: grid;
    gap: var(--space-s);
    align-content: start;
  }

  .site-footer__brand .wordmark {
    color: var(--text-on-dark);
  }

  .site-footer__brand p {
    color: var(--text-soft);
    max-inline-size: 34ch;
  }

  .site-footer ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.15em;
  }

  .site-footer li a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--text-on-dark);
    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  }

  .site-footer address {
    display: grid;
    gap: 0.4em;
  }

  .site-footer address a {
    color: var(--text-on-dark);
    overflow-wrap: anywhere;
  }

  .site-footer__crisis {
    padding: var(--space-m);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }

  .site-footer .crisis__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 420;
    letter-spacing: 0;
    color: var(--text-on-dark);
    margin-block-end: 0;
  }

  .site-footer__crisis .crisis__list a {
    color: var(--accent);
  }

  .site-footer__land {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--rule);
    color: var(--text-soft);
    font-size: var(--step--1);
    max-inline-size: 80ch;
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-l);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--rule);
    color: var(--text-soft);
    font-size: var(--step--1);
  }

  .site-footer__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
  }

  .footer-lily {
    inline-size: auto;
    block-size: 1.4em;
    filter: none;
  }

  .site-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-m);
  }

  /* Breathing pacer */
  .breathe {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  @media (min-width: 56em) {
    .breathe {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      gap: var(--space-2xl);
    }
  }

  .breathe__stage {
    position: relative;
    display: grid;
    gap: var(--space-s);
  }

  .breathe__tide {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--accent);
  }

  /* --tide-y is in SVG user units (viewBox is 800 x 500), set by main.js. */
  .breathe__water {
    transform: translateY(calc(var(--tide-y, 250) * 1px));
    transition: transform var(--tide-duration, 0s) var(--ease-in-out);
  }

  .breathe__swell {
    transform-box: fill-box;
    animation: swell 9s linear infinite;
    animation-play-state: var(--swell-state, paused);
  }

  .breathe__horizon {
    stroke: var(--rule);
  }

  @keyframes swell {
    to {
      transform: translateX(-50%);
    }
  }

  .breathe__cue {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: 2.5em;
  }

  .breathe__phase {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-3);
    font-weight: 320;
    line-height: 1.1;
  }

  .breathe__count {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 300;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--accent-warm);
  }

  .breathe__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .breathe__water {
      transition: none;
    }

    .breathe__swell {
      animation: none;
    }
  }

  /* External link and mark icons */
  .icon {
    inline-size: 1em;
    block-size: 1em;
    flex: none;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
}

/* Pages ------------------------------------------------------------------ */

@layer pages {
  /* Home hero: text on the left, portrait bleeding off the right edge. */
  .hero {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-xl) var(--space-2xl);
    padding-inline: var(--edge);
  }

  .hero__kicker {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    max-inline-size: 34ch;
  }

  .hero__title {
    font-size: var(--step-hero);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.03em;
    max-inline-size: 11ch;
  }

  .hero__title em {
    color: var(--accent);
  }

  .hero__line {
    display: block;
  }

  /* Stagger order for the entrance animation. */
  .hero__kicker { --i: 0; }
  .hero__line:nth-child(1) { --i: 1; }
  .hero__line:nth-child(2) { --i: 2; }
  .hero__line:nth-child(3) { --i: 3; }
  .hero__lede { --i: 4; }
  .hero .actions { --i: 5; }
  .hero__status { --i: 6; }

  .hero__lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--text-soft);
    max-inline-size: 40ch;
  }

  .hero__text {
    display: grid;
    gap: var(--space-m);
    align-content: center;
  }

  .hero__status {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-1);
    color: var(--accent-warm);
  }

  .hero__figure {
    position: relative;
  }

  .hero__figure img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 35%;
  }

  .hero__credit {
    margin-block-start: var(--space-xs);
    font-size: var(--step--1);
    color: var(--text-soft);
  }

  @media (min-width: 56em) {
    .hero {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      column-gap: var(--space-2xl);
      padding-inline-end: 0;
      padding-block: 0;
      min-block-size: min(calc(100svh - var(--header-height)), 60rem);
    }

    .hero__text {
      padding-block: var(--space-xl) var(--space-2xl);
    }

    .hero__figure {
      align-self: stretch;
    }

    .hero__figure img {
      block-size: 100%;
      aspect-ratio: auto;
      min-block-size: 32rem;
    }

    /* Vertical caption beside the photo. Physical offsets on purpose:
       logical ones rotate with the vertical writing mode. */
    .hero__credit {
      position: absolute;
      bottom: var(--space-s);
      left: calc(-1 * var(--space-l));
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      margin: 0;
      white-space: nowrap;
    }
  }

  /* Gentle entrance for the hero, once, on load. */
  @media (prefers-reduced-motion: no-preference) {
    .hero__line,
    .hero__kicker,
    .hero__lede,
    .hero .actions,
    .hero__status {
      animation: rise var(--duration-slow) var(--ease-out) both;
      animation-delay: calc(var(--i, 0) * 110ms + 80ms);
    }

    .hero__figure img {
      animation: unveil 1.4s var(--ease-out) both;
      animation-delay: 120ms;
    }
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(0.6em);
    }
  }

  @keyframes unveil {
    from {
      clip-path: inset(100% 0 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }

  /* Inner page introductions */
  .page-intro {
    display: grid;
    gap: var(--space-l);
    padding-block: var(--space-2xl) var(--space-xl);
    padding-inline: var(--edge);
  }

  .page-intro__title {
    font-size: var(--step-6);
    max-inline-size: 16ch;
  }

  .page-intro__title em {
    color: var(--accent);
  }

  .page-intro__lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--text-soft);
    max-inline-size: 46ch;
  }

  @media (min-width: 56em) {
    .page-intro--split {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      column-gap: var(--space-2xl);
      align-items: end;
    }
  }

  /* Full-bleed photograph band */
  .bleed {
    position: relative;
  }

  .bleed {
    max-inline-size: 128rem;
    margin-inline: auto;
  }

  .bleed img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  @media (min-width: 48em) {
    .bleed img {
      aspect-ratio: 21 / 9;
      max-block-size: 82svh;
    }
  }

  .bleed figcaption {
    padding-inline: var(--edge);
    padding-block-start: var(--space-xs);
    font-size: var(--step--1);
    color: var(--text-soft);
  }

  /* Lisa's daily habits, set like a page from her notebook. */
  .habits {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
    counter-reset: habit;
    border-block-start: 1px solid var(--rule);
  }

  .habits li {
    counter-increment: habit;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-s);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--rule);
  }

  .habits li::before {
    content: counter(habit);
    grid-row: span 2;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-2);
    line-height: 1;
    color: var(--numeral);
  }

  .habits h3 {
    font-size: var(--step-1);
    font-weight: 420;
  }

  .habits p {
    color: var(--text-soft);
  }

  /* Lisa wrote these words in capitals for emphasis. The source text is
     lower case so screen readers say the word, not the letters. */
  .habits__caps {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.04em;
  }

  /* Influences */
  .influences {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-l);
  }

  .influences li {
    display: grid;
    gap: var(--space-2xs);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--rule);
  }

  .influences h3 {
    font-size: var(--step-2);
  }

  .influences p {
    color: var(--text-soft);
  }

  /* Story band on the home page */
  .story-quote {
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-wrap: balance;
    max-inline-size: 16ch;
  }

  .story-quote em {
    color: var(--accent);
  }

  /* The lily beside Lisa's story: small next to the label on phones, a
     pressed flower in the margin on wider screens that keeps pace with
     the text as you read. */
  .story-aside {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
  }

  .story-lily {
    flex: none;
    inline-size: clamp(5.5rem, 26vw, 8rem);
    block-size: auto;
  }

  @media (min-width: 56em) {
    .cols > .story-aside {
      flex-direction: column;
      justify-content: flex-start;
      gap: var(--space-xl);
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-l));
      align-self: start;
    }

    .story-lily {
      inline-size: min(100%, 15rem);
    }
  }

  /* Credentials list */
  .credentials {
    list-style: none;
    padding: 0;
    border-block-start: 1px solid var(--rule);
  }

  .credentials li {
    display: grid;
    gap: 0.15em;
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--rule);
  }

  .credentials__abbr {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-1);
    font-weight: 380;
    color: var(--accent-warm);
  }

  .credentials__title {
    display: block;
    font-weight: 650;
  }

  .credentials__name {
    display: block;
    color: var(--text-soft);
    font-size: var(--step--1);
  }

  @media (min-width: 40em) {
    .credentials li {
      grid-template-columns: 10rem minmax(0, 1fr);
      align-items: baseline;
      column-gap: var(--space-m);
    }
  }

  /* Closing call to action on inner pages */
  .cta-band {
    display: grid;
    gap: var(--space-l);
  }

  .cta-band__title {
    font-size: var(--step-5);
    font-weight: 300;
    max-inline-size: 14ch;
  }

  .cta-band__title em {
    color: var(--accent);
  }

  @media (min-width: 56em) {
    .cta-band {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: end;
      column-gap: var(--space-2xl);
    }
  }

  /* Visit page address card */
  .visit-card {
    align-self: end;
    padding: var(--space-m);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--bg-alt) 60%, transparent);
  }

  .visit-card__title {
    font-family: var(--font-text);
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: 0.04em;
    color: var(--text-soft);
  }

  .visit-card__address {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 360;
    line-height: 1.3;
  }

  .visit-card__links,
  .link-list,
  .topic-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.1em;
  }

  .topic-list {
    border-block-start: 1px solid var(--rule);
  }

  .topic-list li {
    border-block-end: 1px solid var(--rule);
  }

  .topic-list .arrow-link {
    display: flex;
    justify-content: space-between;
    padding-block: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 380;
  }

  .contact-email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-s);
    font-size: var(--step-1);
  }

  .contact-email > a {
    overflow-wrap: anywhere;
  }

  .contact-email__status {
    flex-basis: 100%;
    font-size: var(--step--1);
    color: var(--text-soft);
    min-block-size: 1.5em;
  }

  /* Urgent help: large, plain and easy to scan. */
  .help-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
    border-block-start: 1px solid var(--rule-strong);
  }

  .help {
    display: grid;
    gap: var(--space-3xs) var(--space-l);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--rule);
  }

  .help__name {
    font-size: var(--step-2);
  }

  .help__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 1.25em;
  }

  .help__line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.4em;
  }

  .help__lead {
    color: var(--text-soft);
  }

  .help__contact {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    font-variant-numeric: lining-nums;
    text-decoration-thickness: 2px;
  }

  .help-list--urgent .help__contact {
    font-size: var(--step-3);
  }

  @media (min-width: 48em) {
    .help-list--urgent .help__contact {
      font-size: var(--step-4);
    }
  }

  .help__hours {
    font-weight: 650;
  }

  .help__note {
    color: var(--text-soft);
    max-inline-size: 60ch;
  }

  @media (min-width: 56em) {
    .help {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .help > :not(.help__name) {
      grid-column: 2;
    }

    .help__name {
      grid-row: span 4;
    }
  }

  /* No entrance or scroll animation on the urgent help page. */
  .page-urgent .reveal,
  .page-urgent .reveal-image img {
    animation: none;
  }

  /* 404 */
  .not-found {
    min-block-size: 60svh;
    display: grid;
    align-content: center;
    gap: var(--space-m);
  }
}

/* Utilities and scroll-linked reveals ------------------------------------ */

@layer utilities {
  .mt-0 { margin-block-start: 0; }
  .mt-s { margin-block-start: var(--space-s); }
  .mt-m { margin-block-start: var(--space-m); }
  .mt-l { margin-block-start: var(--space-l); }
  .mt-xl { margin-block-start: var(--space-xl); }
  .text-soft { color: var(--text-soft); }
  .nowrap { white-space: nowrap; }

  /* Reveal on scroll, only where scroll-driven animations exist and the
     visitor has not asked for reduced motion. Content is fully visible
     without either. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        animation: reveal-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }

      .reveal-image {
        overflow: clip;
      }

      .reveal-image img {
        animation: reveal-unveil linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
      }
    }
  }

  @keyframes reveal-rise {
    from {
      opacity: 0;
      transform: translateY(2.5rem);
    }
  }

  @keyframes reveal-unveil {
    from {
      clip-path: inset(18% 0 0 0);
      transform: scale(1.06);
    }
    to {
      clip-path: inset(0 0 0 0);
      transform: scale(1);
    }
  }
}

/* Cross-document page transitions where supported. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 380ms;
    animation-timing-function: var(--ease-out);
  }
}

/* Windows high contrast and other forced-colour modes. */
@media (forced-colors: active) {
  .button,
  .site-nav__toggle,
  .site-nav__close {
    border: 1px solid ButtonText;
  }

  .site-nav__link::after,
  .figure figcaption::before {
    background: CanvasText;
  }

  .offering:has(.offering__title a:focus-visible) {
    outline-color: Highlight;
  }
}

/* Print: fees, directions and policies are things people print. */
@media print {
  .site-header,
  .site-nav__panel,
  .breathe,
  .skip-link,
  .actions,
  .fee__book {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section,
  .page-intro,
  .hero {
    padding-block: 1.25rem;
  }

  .site-footer,
  .section--dark {
    background: #fff;
    color: #000;
    --text: #000;
    --text-soft: #333;
    --text-on-dark: #000;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  img {
    max-block-size: 9cm;
    object-fit: contain;
  }
}