/* The lower belly sigh: animated diagram. sigh.js builds everything inside [data-sigh-diagram].
   Every selector is rooted at the host or at .sigh, so nothing here reaches the rest of the page. */
[data-sigh-diagram] {
  --sigh-mineral: #304A50;
  --sigh-night: #20383D;
  --sigh-evening: #302F2B;
  --sigh-linen: #F1EBDD;
  --sigh-soft: #F7F3EA;
  --sigh-sea: #B7C9C4;
  --sigh-coral: #E87C50;
  --sigh-copper: #9F4F36;
  --sigh-muted: #50666A;
  --sigh-body-auto: #ECE5D6;   /* the body, a shade darker than a soft ground... */
  --sigh-fill: var(--sigh-body, var(--sigh-body-auto));   /* set --sigh-body on the host to override */
  display: block;
  font-family: Bricolage, "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  color: var(--sigh-mineral);
}
[data-sigh-diagram][data-sigh-ground="linen"] { --sigh-body-auto: #F9F6EF; }   /* ...or a shade lighter than a linen one */

/* layout: drawing beside the captions, or captions underneath below 900 px of container */
.sigh {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(28px, 3.4vw, 64px);
  margin: 0;
}
.sigh[data-layout="stacked"] { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.sigh .sigh-stage { position: relative; min-width: 0; }
.sigh .sigh-svg { display: block; width: 100%; height: auto; overflow: hidden; }

/* captions: one at a time, stacked in one grid cell so the height never jumps */
.sigh .sigh-copy { min-width: 0; }
.sigh[data-layout="stacked"] .sigh-copy { max-width: 36em; }
.sigh .sigh-captions { list-style: none; margin: 0; padding: 0; display: grid; }
.sigh .sigh-captions li {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.008em;
  text-wrap: pretty;
  color: var(--sigh-mineral);
  opacity: 0;
  will-change: opacity, transform;
}
.sigh[data-drawing="compact"] .sigh-captions li { font-size: 16.5px; line-height: 1.45; }

/* which of the three captions is showing */
.sigh .sigh-progress { display: flex; gap: 6px; margin-top: 22px; }
.sigh[data-drawing="compact"] .sigh-progress { margin-top: 16px; }
.sigh .sigh-progress i { display: block; width: 28px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--sigh-mineral) 16%, transparent); overflow: hidden; }
.sigh .sigh-progress i::after { content: ""; display: block; height: 100%; width: 100%; background: var(--sigh-mineral); opacity: var(--p, 0); }

/* labels: constant 12 to 12.5 px on screen at any width (sigh.js sets --sigh-k, SVG units per CSS px) */
.sigh .sigh-svg text { font-family: inherit; fill: var(--sigh-muted); font-size: calc(12.5px * var(--sigh-k, 1)); font-variation-settings: "opsz" 13; letter-spacing: 0.005em; }
.sigh[data-drawing="compact"] .sigh-svg text { font-size: calc(12px * var(--sigh-k, 1)); }
.sigh .sigh-svg text.sigh-bpm {
  fill: color-mix(in oklab, var(--sigh-copper) calc(var(--sigh-warm, 0) * 100%), var(--sigh-mineral));   /* warm when fast, calm when slow */
  font-size: calc(20px * var(--sigh-k, 1)); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-variation-settings: "opsz" 20;
}
.sigh[data-drawing="compact"] .sigh-svg text.sigh-bpm { font-size: calc(17px * var(--sigh-k, 1)); font-variation-settings: "opsz" 17; }
.sigh .sigh-leader { stroke: var(--sigh-muted); stroke-opacity: 0.55; stroke-width: 1; fill: none; }
.sigh .sigh-dot { fill: var(--sigh-muted); }

/* drawing colours: every part takes its colour from the palette above. Values that change over the breath
   (opacity, fill-opacity on the stem, lobe and heart, stroke-opacity on the fibres) are set by sigh.js, so they stay out of here. */
.sigh .sigh-pillow { fill: var(--sigh-linen); stroke: var(--sigh-mineral); stroke-opacity: 0.16; stroke-width: 1; }
.sigh .sigh-body { fill: var(--sigh-fill); stroke: var(--sigh-mineral); stroke-opacity: 0.42; stroke-width: 1.2; }
.sigh .sigh-ground { stroke-width: 1; }
.sigh .sigh-brain { fill: var(--sigh-mineral); fill-opacity: 0.075; }
.sigh .sigh-cerebellum { fill: var(--sigh-mineral); fill-opacity: 0.12; }
.sigh .sigh-fold { stroke: var(--sigh-mineral); stroke-opacity: 0.22; stroke-width: 0.9; }
.sigh .sigh-stem { fill: var(--sigh-mineral); }
.sigh .sigh-ring { fill: none; stroke: var(--sigh-mineral); stroke-width: 1; }
.sigh .sigh-lung { fill: var(--sigh-sea); fill-opacity: 0.5; stroke: var(--sigh-mineral); stroke-opacity: 0.28; stroke-width: 1; }
.sigh .sigh-lobe { fill: color-mix(in srgb, var(--sigh-sea) 52%, var(--sigh-mineral)); }
.sigh .sigh-fissure { stroke: var(--sigh-mineral); stroke-opacity: 0.2; stroke-width: 1; }
.sigh .sigh-heart { fill: var(--sigh-copper); stroke: var(--sigh-copper); stroke-opacity: 0.5; stroke-width: 1; }
.sigh .sigh-groove { stroke: var(--sigh-copper); stroke-opacity: 0.3; stroke-width: 1; }
.sigh .sigh-diaphragm { stroke: var(--sigh-mineral); stroke-opacity: 0.8; stroke-width: 2.2; }
.sigh .sigh-nerve { stroke: var(--sigh-mineral); stroke-opacity: 0.58; stroke-width: 1.6; }
.sigh .sigh-gut { stroke-width: 1.1; }
.sigh .sigh-fiber { stroke: var(--sigh-mineral); stroke-width: 0.9; }
.sigh .sigh-fiber-lit { stroke: var(--sigh-coral); stroke-width: 1.2; }
.sigh .sigh-route { stroke: var(--sigh-coral); stroke-width: 1.8; }
.sigh .sigh-route-glow { stroke: var(--sigh-coral); stroke-opacity: 0.18; stroke-width: 6; }
.sigh .sigh-receptor { fill: var(--sigh-mineral); fill-opacity: 0.42; }
.sigh .sigh-receptor-ring { fill: none; stroke: var(--sigh-coral); stroke-width: 1; }
.sigh .sigh-signal { fill: var(--sigh-coral); }
.sigh .sigh-wing { fill: color-mix(in srgb, var(--sigh-mineral) 94%, var(--sigh-sea)); }
.sigh .sigh-stitch { stroke: color-mix(in srgb, var(--sigh-copper) 72%, var(--sigh-linen)); stroke-opacity: 0.8; stroke-width: 0.8; }
.sigh .sigh-piping { stroke: var(--sigh-linen); stroke-opacity: 0.9; stroke-width: 1; }
.sigh .sigh-eye { stroke: color-mix(in srgb, var(--sigh-copper) 72%, var(--sigh-linen)); stroke-width: 1.1; }
.sigh .sigh-trace-ghost { stroke: var(--sigh-copper); stroke-opacity: 0.22; stroke-width: 1.1; }
.sigh .sigh-trace { stroke: var(--sigh-copper); stroke-opacity: 0.75; stroke-width: 1.5; }
.sigh .sigh-play { fill: var(--sigh-copper); }
.sigh .sigh-play-glow { fill: var(--sigh-copper); fill-opacity: 0.18; }
.sigh .sigh-s-coral { stop-color: var(--sigh-coral); }
.sigh .sigh-s-sea { stop-color: var(--sigh-sea); }
.sigh .sigh-s-mineral { stop-color: var(--sigh-mineral); }
.sigh .sigh-s-cove-top { stop-color: color-mix(in srgb, var(--sigh-night) 88%, var(--sigh-sea)); }
.sigh .sigh-s-cove-base { stop-color: color-mix(in srgb, var(--sigh-night) 82%, #000); }

/* reduced motion: a still frame, all three captions as a numbered list */
.sigh.is-still .sigh-captions { list-style: decimal; padding-left: 1.3em; display: block; }
.sigh.is-still .sigh-captions li { opacity: 1; transform: none; padding-left: 0.2em; }
.sigh.is-still .sigh-captions li + li { margin-top: 0.7em; }
.sigh.is-still .sigh-captions li::marker { color: var(--sigh-muted); font-variant-numeric: tabular-nums; }
.sigh.is-still .sigh-progress { display: none; }