/* ============================================================
   HEAT, DONE WELL
   Nordic cedar and steam.

   The world is a small wooden room. The masthead is a cedar plank with
   the grain running through it, drawn entirely in CSS gradients so no
   image is needed. The stage below it is steam white with a lot of air
   in it. Panels are pale birch with a cedar edge across the top, the
   way a bench looks from the side. The deep blue-teal is the cool water
   at the other end of the session, and it carries the ending, the
   verdicts and the primary button. Ember orange is the one accent and
   it never sets a word: it is the meter, the dial band, the list marks
   and the breathing dot, nothing else.

   Everything is slow on purpose. Transitions sit at 620ms and above on
   a soft curve, because the subject is a room you are not supposed to
   hurry in. A visitor who has asked for reduced motion loses all of it,
   including the rising steam behind the first screen and the breathing
   pacer, which is replaced by a line of text that says the same thing.

   Self-contained: no CDN, no build step, no network call. Every path is
   relative and every asset named here lives in assets/ beside this file.

   Colour discipline, measured, worst case first:

     ink      #241A12 on steam #F4F1EC      15.4:1
     ink      #241A12 on birch #EAD9BE      12.4:1
     dusk     #1E3A44 on steam              10.3:1
     steam    #F4F1EC on dusk               10.3:1
     birch    #EAD9BE on cedar deep         5.35:1
     steam    #F4F1EC on cedar deep         6.63:1
     cedar deep #7A4A26 on steam            6.63:1
     quiet    #6B5B4B on steam              5.88:1
     quiet    #6B5B4B on birch              4.74:1
     cedar    #B8763F on steam              3.30:1  <- rules and the screen numeral
     cedar mid #A96835 on birch soft        3.61:1  <- the step numeral only
     ember    #E8722A on steam              2.74:1  <- never text, ever

   Cedar sets the screen numeral and cedar mid the step numeral. Both are
   far above 24px, so 3:1 is the bar and both clear it, and both are
   hidden from assistive technology besides. Ember is graphics only: the
   progress fill, the dial band, the list marks, the breathing dot and the
   water drops in the illustration. If you ever want a word in ember, the
   answer is cedar deep.
   ============================================================ */

/* The editorial serif and the humanist sans the owner is licensing.
   Neither file is in the folder yet. The fallbacks are tuned rather
   than accepted: Georgia is set a little smaller with slightly tighter
   tracking and a low line height so the headings still read as a
   deliberate Nordic serif, and the body stack leads with Segoe UI so
   the running text keeps a humanist shape rather than dropping to
   Arial. */
/* Licensed faces from Envato Elements, in the folder since 2026-09-04. */
@font-face {
  font-family: 'Site Display';
  src: url('assets/fonts/display-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Site Display';
  src: url('assets/fonts/display-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Still awaiting the licensed file; the fallback stack carries this family.
@font-face {
  font-family: 'Site Body';
  src: url('assets/fonts/body-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Site Body';
  src: url('assets/fonts/body-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  --steam: #F4F1EC;
  --birch: #EAD9BE;
  --birch-soft: #F1E6D3;
  --cedar: #B8763F;
  --cedar-mid: #A96835;
  --cedar-deep: #7A4A26;
  --dusk: #1E3A44;
  --dusk-soft: #2C4E5A;
  --ember: #E8722A;
  --ink: #241A12;
  --quiet: #6B5B4B;

  --rule: rgb(122 74 38 / 0.26);

  --font-display: 'Site Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Site Body', 'Segoe UI', system-ui, sans-serif;

  /* One vertical rhythm knob. A short stage tightens the gaps and never
     the type. */
  --v: 1rem;
  --gutter: 1.75rem;
  --radius: 12px;
  --slow: 640ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --slower: 900ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Wood grain, drawn. Three vertical repeats on coprime periods so the
     grain never reads as a stripe pattern, over a warm cedar gradient. */
  --wood:
    repeating-linear-gradient(90deg, rgb(28 14 4 / 0.20) 0 1px, rgb(0 0 0 / 0) 1px 6px),
    repeating-linear-gradient(90deg, rgb(255 240 220 / 0.055) 0 2px, rgb(0 0 0 / 0) 2px 17px),
    repeating-linear-gradient(90deg, rgb(28 14 4 / 0.13) 0 3px, rgb(0 0 0 / 0) 3px 31px),
    linear-gradient(180deg, #8C5931 0%, #7A4A26 52%, #603619 100%);
  --wood-light:
    repeating-linear-gradient(90deg, rgb(122 74 38 / 0.34) 0 1px, rgb(0 0 0 / 0) 1px 5px),
    repeating-linear-gradient(90deg, rgb(122 74 38 / 0.18) 0 2px, rgb(0 0 0 / 0) 2px 19px),
    linear-gradient(180deg, #CC9860, #B8763F);
  /* The faint plank texture that sits under every photo slot, so a slot
     with no file in it still renders as a finished wooden plate. */
  --plank:
    repeating-linear-gradient(90deg, rgb(122 74 38 / 0.14) 0 1px, rgb(0 0 0 / 0) 1px 7px),
    repeating-linear-gradient(90deg, rgb(122 74 38 / 0.08) 0 2px, rgb(0 0 0 / 0) 2px 23px),
    linear-gradient(160deg, #E2CDAC 0%, #D2B58B 100%);
  /* The same grain with no ground under it, so it can be laid over a wash
     and stay visible whether or not there is a photograph beneath. */
  --grain:
    repeating-linear-gradient(90deg, rgb(122 74 38 / 0.10) 0 1px, rgb(0 0 0 / 0) 1px 7px),
    repeating-linear-gradient(90deg, rgb(122 74 38 / 0.05) 0 2px, rgb(0 0 0 / 0) 2px 23px);
}

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

html {
  background: var(--steam);
}

body {
  margin: 0;
  background: var(--steam);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* One focus treatment: a 3px dusk rule with room around it. On the cedar
   masthead and pager the same rule goes pale birch, because dusk on
   cedar measures 1.4:1 and would vanish. */
:focus-visible {
  outline: 3px solid var(--dusk);
  outline-offset: 3px;
}

.rig-head :focus-visible {
  outline-color: var(--birch);
}

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

/* ---------- the stage ---------- */

.rig {
  max-width: 72rem;
  margin: 0 auto;
  background: var(--steam);
  min-height: 100vh;
  /* The steam drifts a little past the hero panel and the numeral scales
     down onto the corner. Clip rather than hidden: no scroll container is
     created, and the gutter keeps every focus ring well inside the line. */
  overflow-x: clip;
}

/* Everything from here to the next banner applies only when scripting is
   running. With scripting off the whole module renders as one ordinary
   document with every screen, tab panel, accordion section and sub-step
   open in order, and the browser scrolls it the usual way. */

html.js,
html.js body {
  height: 100%;
  overflow: hidden;
}

html.js .rig {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html.js .rig-head,
html.js .rig-foot {
  flex: 0 0 auto;
}

html.js #module {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: clip;
  overflow-clip-margin: 10px;
}

html.js .screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html.js .screen[hidden] {
  display: none;
}

html.js .screen-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- filling the stage ----------

   The stage is a fixed height, so a screen either fills it or leaves a
   hole at the bottom. Rather than pad, the one substantial block on each
   screen grows into the space: the open tab panel, the open accordion
   section, the current step card, the current situation, the revealed
   caution, the session card. Copy still starts at the top. What grows is
   the plate underneath it, which is what makes the whitespace read as air
   rather than as a layout that ran out. */

html.js .screen-body:not(.cols2):not(.split) {
  display: flex;
  flex-direction: column;
}

html.js .screen-body > .reveal {
  flex: 1 1 auto;
}

html.js .split-text > .accordion {
  flex: 1 1 auto;
}

html.js .substeps > .substep:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

html.js .substep > .stepcard,
html.js .substep > .sg-item {
  flex: 1 1 auto;
}

html.js .reveal-panels {
  display: flex;
  flex-direction: column;
}

/* The caution reads at its natural height and the photograph below it
   takes the slack, so the detail column ends at the floor of the stage. */
html.js .ask-panel:not([hidden]) {
  flex: 0 0 auto;
}

html.js .reveal-panels > .plate {
  margin-top: 0.9rem;
}

html.js .tabpanel > .plan,
html.js .tabpanel > .results {
  flex: 1 1 auto;
}

/* The open accordion section takes the slack, so the reading column ends
   at the bottom of the stage instead of halfway down it. Browsers without
   :has simply leave the sections at their natural height, which is the
   old behaviour and still correct. */
.acc-sec:has(> .acc-panel:not([hidden])) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.acc-sec:has(> .acc-panel:not([hidden])) > .acc-panel {
  flex: 1 1 auto;
}

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

.rig-head {
  background-image: var(--wood);
  background-size: auto;
}

.rig-head-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8rem var(--gutter) 0.85rem;
}

.head-id {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.head-words {
  min-width: 0;
}

.mark {
  flex: 0 0 auto;
  width: 2.7rem;
  height: 2.35rem;
}

.mark-stones {
  fill: rgb(244 241 236 / 0.22);
  stroke: var(--birch);
  stroke-width: 2;
}

.mark-steam,
.mark-ladle {
  fill: none;
  stroke: var(--birch);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--birch);
}

h1 {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.06;
  letter-spacing: -0.014em;
  color: var(--steam);
}

.edge {
  height: 7px;
  background-image: var(--wood-light);
}

.edge-foot {
  height: 5px;
}

/* ---------- progress ---------- */

.gauge {
  flex: 0 0 auto;
  width: min(16rem, 30%);
}

.gauge-track {
  height: 8px;
  border-radius: 6px;
  background: rgb(28 14 4 / 0.42);
  overflow: hidden;
}

.gauge-fill {
  display: block;
  height: 100%;
  width: 12.5%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cedar), var(--ember));
  transition: width var(--slow);
}

.gauge-text {
  margin: 0.45rem 0 0;
  text-align: right;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--birch);
}

/* ---------- screens ---------- */

#module {
  padding: 0 var(--gutter) 0.5rem;
}

.screen {
  position: relative;
  padding-top: 1.05rem;
}

.screen[hidden] {
  display: none;
}

.stamp {
  position: absolute;
  right: 0;
  top: 0.55rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.8vw, 3.8rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--cedar);
  pointer-events: none;
  user-select: none;
  transform-origin: 100% 0;
}

h2 {
  flex: 0 0 auto;
  margin: 0 0 0.75rem;
  padding-right: 4.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.016em;
  color: var(--cedar-deep);
}

h3 {
  margin: var(--v) 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.16rem;
  line-height: 1.2;
  letter-spacing: -0.006em;
  color: var(--dusk);
}

.screen-body > *:first-child,
.col > *:first-child,
.tabpanel > *:first-child,
.acc-panel > *:first-child {
  margin-top: 0;
}

p {
  margin: 0 0 var(--v);
}

.lead {
  font-size: 1.08rem;
  line-height: 1.56;
}

.quiet {
  color: var(--quiet);
  font-size: 0.94rem;
}

.note {
  border-left: 4px solid var(--cedar);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--birch-soft);
  padding: 0.7rem 0.95rem;
  font-size: 0.95rem;
}

.disclaimer {
  border-top: 1px solid var(--rule);
  padding-top: 0.7rem;
  color: var(--quiet);
  font-size: 0.87rem;
  line-height: 1.5;
}

.disclaimer b {
  color: var(--cedar-deep);
}

ul,
ol {
  margin: 0 0 var(--v);
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.4rem;
}

li::marker {
  color: var(--ember);
}

b {
  font-weight: 500;
  color: var(--cedar-deep);
}

.ticklist {
  list-style: none;
  padding-left: 0;
}

.ticklist > li {
  position: relative;
  padding-left: 1.5rem;
}

.ticklist > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ember);
}

/* ---------- the two opening screens ---------- */

.cols2 {
  display: grid;
  gap: 1.3rem;
}

.col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.col > *:last-child,
.tabpanel > *:last-child,
.acc-panel > *:last-child {
  margin-bottom: 0;
}

.screen-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--birch-soft);
  background-image:
    /* The grain sits on top of the wash so the plate reads as cedar
       whether or not a photograph has been dropped in behind it. */
    var(--grain),
    /* Measured against a pure black photo pixel as the worst case: under
       this wash the ground never drops below about #EAE8E4, where ink
       reads 12.2:1, cedar deep 5.3:1 and the quiet grey 5.3:1. */
    linear-gradient(180deg, rgb(244 241 236 / 0.9) 0%, rgb(244 241 236 / 0.955) 100%),
    url('assets/img/hero.jpg'),
    var(--plank);
  background-size: auto, cover, cover, auto;
  background-position: 0 0, center, center, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, repeat;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin: 0.4rem 0 0.3rem;
  overflow: clip;
}

.screen-hero .stamp {
  right: 1rem;
  top: 0.75rem;
  color: var(--cedar-deep);
}

/* Above the steam, which sits at z-index 0 inside the hero panel. The
   numeral keeps its own absolute positioning and only takes the layer. */
.screen-hero > .stamp {
  z-index: 1;
}

.screen-hero > h2,
.screen-hero > .screen-body {
  position: relative;
  z-index: 1;
}

/* Rising steam. Three soft blurred ellipses drifting up behind the first
   screen, low enough in opacity that nothing sits on top of a moving
   edge. Hidden from assistive technology, and removed entirely for a
   visitor who has asked for reduced motion. */
.steam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.puff {
  fill: #FFFFFF;
  opacity: 0;
  filter: blur(18px);
}

/* ---------- the cover ----------

   Screen one is a cover and nothing else: the kicker, the title at the
   largest type in the module, one sentence of promise, the meta line and
   the one small health line. It sits on the cedar plate with the steam
   rising behind it, and the block is centred on the stage so the plate
   reads as a photograph with a title on it rather than as a card that
   ran out of content. */

.screen-cover {
  padding-top: 0.6rem;
}

/* The cover is the one plate that shows its photograph. Every word on it
   lives in the left column and the numeral lives in the top band, so the
   heavy wash only has to cover those two strips: one gradient down the
   left, one across the top, and a light 28 percent wash under everything
   so the room reads warm rather than raw. Measured against a pure black
   photo pixel as the worst case, the ground under the text is 0.995
   opaque, which is heavier than the old flat wash, and the exposed lower
   right carries no text at all. */
.screen-cover {
  background-image:
    var(--grain),
    linear-gradient(90deg,
      rgb(244 241 236 / 0.925) 0,
      rgb(244 241 236 / 0.925) 34rem,
      rgb(244 241 236 / 0) 47rem),
    linear-gradient(180deg,
      rgb(244 241 236 / 0.925) 0,
      rgb(244 241 236 / 0.925) 5rem,
      rgb(244 241 236 / 0) 11rem),
    linear-gradient(0deg, rgb(244 241 236 / 0.28), rgb(244 241 236 / 0.28)),
    url('assets/img/hero.jpg'),
    var(--plank);
  background-size: auto, auto, auto, auto, cover, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, center, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

.cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 46rem;
  padding: 0.6rem 0 0.4rem;
}

/* Nothing on the cover reaches past 33rem, which is where the wash down
   the left of the plate is still at full strength. */
.cover-kicker {
  margin: 0 0 0.6rem;
  max-width: 33rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cedar-deep);
}

.cover h2.cover-title {
  margin: 0 0 0.8rem;
  max-width: 32rem;
  padding-right: 0;
  font-size: clamp(2.4rem, 6.2vw, 4.3rem);
  line-height: 0.99;
  letter-spacing: -0.026em;
}

.cover-promise {
  margin: 0 0 1.15rem;
  max-width: 33rem;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.9vw, 1.4rem);
  line-height: 1.34;
  color: var(--ink);
}

.cover-meta {
  margin: 0;
  max-width: 33rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quiet);
}

.cover-small {
  margin: 0.45rem 0 0;
  max-width: 33rem;
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--quiet);
}

/* ---------- objectives and how this works ---------- */

/* The two columns take the stage and the two small blocks sit on the
   floor of it, full width, so the keyboard note and the disclaimer read
   in two or three lines instead of stacking up inside a column. */

.brief {
  display: flex;
  flex-direction: column;
}

html.js .brief > .brief-cols {
  flex: 1 1 auto;
}

.brief-foot {
  flex: 0 0 auto;
  margin-top: 1rem;
}

.brief-foot > .note {
  margin-bottom: 0.7rem;
}

.brief-foot > .disclaimer {
  margin-bottom: 0;
}

/* The objectives sit on a bench board, the same plate as a session step
   and a situation, so the promise of the course is one solid object
   rather than a loose list. It grows into the stage; the explanation
   beside it stays plain text on the ground, anchored top and bottom. */
.board {
  position: relative;
  overflow: clip;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--birch-soft);
  padding: 1rem 1.2rem;
}

html.js .brief .col > .board {
  flex: 1 1 auto;
}

.board::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background-image: var(--wood-light);
}

.objectives {
  margin-bottom: 0;
}

.objectives > li {
  font-size: 1.02rem;
  line-height: 1.45;
}

.why {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  color: var(--quiet);
  font-size: 0.95rem;
}

/* ---------- teaching layouts ---------- */

.split {
  display: grid;
  gap: 1.25rem;
}

.split-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.split-text > .lead {
  flex: 0 0 auto;
}

.split-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.plate {
  flex: 1 1 auto;
  min-height: 96px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background-color: #E2CDAC;
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  background-position: center, 0 0;
}

.plate-tall {
  min-height: 200px;
}

.plate-stones {
  background-image: url('assets/img/stones.jpg'), var(--plank);
}

.plate-window {
  background-image: url('assets/img/window.jpg'), var(--plank);
}

.plate-lake {
  background-image: url('assets/img/lake.jpg'), var(--plank);
}

.plate-towel {
  background-image: url('assets/img/towel.jpg'), var(--plank);
}

/* ---------- the ladle and the stones ---------- */

/* The one drawn illustration in the module, sitting on the floor of the
   reading column on screen two. Decorative: everything it shows is said in
   words in the panel above it, so it is hidden from assistive technology
   and it leaves entirely on a short stage. */
.bench {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 30rem;
  max-height: 11rem;
  margin: 1rem auto 0;
}

.bench-stones {
  fill: rgb(184 118 63 / 0.16);
  stroke: var(--cedar);
  stroke-width: 2.2;
}

.bench-steam,
.bench-ladle {
  fill: none;
  stroke: var(--cedar);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.bench-ladle circle {
  fill: rgb(184 118 63 / 0.16);
}

.bench-rim {
  fill: rgb(122 74 38 / 0.1);
  stroke: var(--cedar-deep);
  stroke-width: 2.2;
}

.bench-drops {
  fill: var(--ember);
}

/* ---------- the dial ---------- */

.dialbox {
  flex: 0 0 auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--birch-soft);
  padding: 0.5rem 0.6rem 0.35rem;
}

.dial {
  display: block;
  width: 100%;
  height: auto;
}

.dial-track {
  fill: none;
  stroke: rgb(122 74 38 / 0.22);
  stroke-width: 17;
  stroke-linecap: round;
}

.dial-band {
  fill: none;
  stroke-width: 17;
  stroke-linecap: round;
}

.dial-band-trad {
  stroke: var(--ember);
}

.dial-band-ir {
  stroke: var(--dusk-soft);
  stroke-width: 7;
}

.dial-ticks {
  fill: none;
  stroke: var(--cedar-deep);
  stroke-width: 2;
  stroke-linecap: round;
}

.dial-label text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  fill: var(--ink);
}

.dial-key text {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--ink);
}

.key-trad {
  fill: var(--ember);
}

.key-ir {
  fill: var(--dusk-soft);
}

.dial-note {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--quiet);
}

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  flex-direction: column;
}

html.js .split-text > .tabs,
html.js .screen-body > .tabs {
  flex: 1 1 auto;
}

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 0 1 auto;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.9rem;
  padding-bottom: 0.45rem;
}

.tablist [role='tab'] {
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cedar-deep);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  /* Only the border eases. Selecting a tab flips both the ground and the
     word at once, because a slow crossfade between dark-on-light and
     light-on-dark spends half a second below 4.5:1 on the way through. */
  transition: border-color var(--slow);
}

.tablist [role='tab']:hover {
  background: var(--birch-soft);
  border-color: var(--cedar);
}

.tablist [role='tab'][aria-selected='true'] {
  background: var(--dusk);
  border-color: var(--dusk);
  color: var(--steam);
}

.tabpanel[hidden] {
  display: none;
}

html.js .tabs > .tabpanel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

html.js .tabs > .tabpanel[hidden] {
  display: none;
}

.tabpanel:focus-visible {
  outline-offset: -3px;
}

/* ---------- accordion ---------- */

.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.acc-sec {
  min-width: 0;
}

.acc-h {
  margin: 0;
}

.acc-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.99rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--birch-soft);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.46rem 0.85rem;
  cursor: pointer;
  transition: background-color var(--slow), border-color var(--slow);
}

.acc-btn:hover {
  background: var(--birch);
  border-color: var(--cedar);
}

.acc-btn[aria-expanded='true'] {
  background: var(--birch);
  border-color: var(--cedar);
}

.acc-mark {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--cedar);
  transition: background-color var(--slow), box-shadow var(--slow);
}

.acc-btn[aria-expanded='true'] .acc-mark {
  background: var(--ember);
  box-shadow: inset 0 0 0 2px var(--cedar-deep);
}

.acc-panel {
  padding: 0.6rem 0.95rem 0.65rem;
  background: var(--steam);
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  margin: -1px 0.5rem 0;
  font-size: 0.96rem;
  line-height: 1.55;
}

.acc-panel[hidden] {
  display: none;
}

/* ---------- the sub-step runs ---------- */

.substeps {
  display: flex;
  flex-direction: column;
}

html.js .tabpanel > .substeps,
html.js .screen-body > .substeps,
html.js .split-text > .substeps {
  flex: 1 1 auto;
}

.sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.55rem;
  margin-bottom: 0.9rem;
  flex: 0 0 auto;
}

.sub-head {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--cedar-deep);
  white-space: nowrap;
}

.sub-nav {
  display: flex;
  gap: 0.45rem;
}

.sess-meter {
  flex: 1 1 6rem;
  min-width: 4rem;
}

.sess-track {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: rgb(122 74 38 / 0.18);
  overflow: hidden;
}

.sess-fill {
  display: block;
  height: 100%;
  width: 11.1%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cedar), var(--ember));
  transition: width var(--slower);
}

.substep[hidden] {
  display: none;
}

.counter {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0 0 0 0.7rem;
  border-left: 3px solid var(--ember);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cedar-deep);
}

/* ---------- the session cards ---------- */

.stepcard {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--birch-soft);
  /* Room on the floor of the card for the numeral, so it never lands on
     the copy when the card is only as tall as its own text. */
  padding: 0.95rem 1.1rem 3.2rem;
  position: relative;
  overflow: clip;
}

.stepcard::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background-image: var(--wood-light);
}

/* The step numeral sits on the floor of the card like a number branded
   into the end of a bench. It duplicates the "Step 3 of 9" in the bar
   above, so it is hidden from assistive technology, and it is dark enough
   to clear 3:1 against the card whatever else happens to it. */
.step-num {
  position: absolute;
  right: 1.1rem;
  bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--cedar-mid);
  pointer-events: none;
  user-select: none;
}

.step-title {
  margin: 0.25rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--dusk);
}

.stepcard > p:last-child {
  margin-bottom: 0;
}

/* ---------- the breathing pacer ---------- */

.pacer {
  flex: 0 0 auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--dusk);
  color: var(--steam);
  padding: 0.8rem 0.95rem 0.9rem;
  text-align: center;
}

.pacer h3 {
  margin: 0 0 0.3rem;
  color: var(--birch);
  font-size: 1.05rem;
}

.pacer .quiet {
  color: var(--birch);
  font-size: 0.84rem;
  line-height: 1.45;
  margin-bottom: 0.6rem;
}

.pacer-stage {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}

.pacer-dot {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px rgb(232 114 42 / 0.28);
}

.pacer-cue {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--steam);
  min-height: 1.6em;
}

.pacer-still {
  display: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--birch-soft);
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}

.pacer :focus-visible {
  outline-color: var(--birch);
}

/* ---------- stay, cool down, or stop ---------- */

/* A situation is a plate too, the same bench board as a session step, so
   the two question screens read as one family. */
.sg-item {
  margin: 0;
  position: relative;
  overflow: clip;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--birch-soft);
  padding: 1rem 1.15rem 3.2rem;
}

.sg-item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background-image: var(--wood-light);
}

.sg-text {
  margin: 0 0 0.9rem;
  max-width: 54rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.sg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.call {
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--steam);
  border: 1px solid var(--cedar);
  border-radius: 10px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  /* Same reason as the tabs: the chosen answer flips ground and word
     together rather than fading between two legible states through an
     illegible one. */
  transition: border-color var(--slow);
}

.call:hover {
  background: var(--birch);
}

/* Inside the situation plate the feedback flips to the lighter ground, so
   the answer and the reason are two surfaces rather than one. */
.sg-item .feedback {
  background: var(--steam);
  max-width: 58rem;
}

.call[aria-pressed='true'] {
  background: var(--dusk);
  border-color: var(--dusk);
  color: var(--steam);
}

/* ---------- feedback ---------- */

.feedback {
  margin: 0.85rem 0 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink);
  border-left: 4px solid var(--cedar);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--birch-soft);
  padding: 0.7rem 0.95rem;
}

.feedback:empty {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.feedback .glyph {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.14em;
  margin-right: 0.35em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback .verdict-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.04em;
  color: var(--cedar-deep);
}

/* ---------- who should check first ---------- */

.reveal {
  display: grid;
  gap: 1.2rem;
}

.reveal-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.asklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.asklist > li {
  margin: 0;
}

.reveal .acc-btn {
  border-radius: 10px;
}

.reveal-panels {
  min-width: 0;
}

.ask-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--birch-soft);
  padding: 0.95rem 1.1rem 1rem;
  margin: 0;
  position: relative;
  overflow: clip;
}

.ask-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background-image: var(--wood-light);
}

.ask-head {
  margin: 0.25rem 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--dusk);
}

.ask-note {
  margin: 0.9rem 0 0;
  margin-top: auto;
  font-size: 0.9rem;
}

/* ---------- the plan and the card ---------- */

.plan {
  display: grid;
  gap: 1.2rem;
}

.picker {
  min-width: 0;
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.picker fieldset {
  margin: 0;
  padding: 0.5rem 0.85rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--steam);
  min-width: 0;
}

.picker legend {
  padding: 0 0.35rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cedar-deep);
}

.picker label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.16rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
  cursor: pointer;
}

.picker input[type='radio'] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--cedar-deep);
  cursor: pointer;
}

.card,
.results {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 1rem;
  background: var(--birch-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 0.95rem;
  overflow: clip;
}

.card::before,
.results::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background-image: var(--wood-light);
}

.card-mark {
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
  width: 3.1rem;
  height: 2.7rem;
  opacity: 0.6;
}

.card .mark-stones {
  fill: rgb(184 118 63 / 0.2);
  stroke: var(--cedar);
}

.card .mark-steam,
.card .mark-ladle {
  stroke: var(--cedar);
}

.card-title {
  margin: 0.2rem 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--dusk);
}

.card-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.card-list > li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.3rem;
  line-height: 1.45;
}

.card-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
}

.card-key {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
}

.card-foot {
  margin: 0.85rem 0 0;
  margin-top: auto;
  padding-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  color: var(--quiet);
  font-size: 0.89rem;
}

.results ul {
  padding-left: 1.2rem;
  margin: 0;
}

/* ---------- the ending ---------- */

/* A native dialog: closed it is display:none from the user agent sheet,
   so a visitor with scripting off never meets it, and open it sits in
   the top layer with the stage behind it inert. */
.done {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--cedar-deep);
  border-radius: 16px;
  background: var(--steam);
  color: var(--ink);
  overflow: clip;
  box-shadow: 0 24px 60px rgb(36 26 18 / 0.32);
}

.done::backdrop {
  background: rgb(30 58 68 / 0.68);
}

.done-edge {
  height: 9px;
}

.done-body {
  padding: 1.1rem 1.4rem 1.2rem;
}

.done-h {
  margin: 0 0 0.2rem;
  padding-right: 0;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.08;
  color: var(--cedar-deep);
}

.done-sub {
  margin: 0 0 0.9rem;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--quiet);
}

.done-scores {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.done-scores > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0;
  padding: 0.5rem 0.85rem;
  background: var(--dusk);
  border-radius: 10px;
}

.done-label {
  color: var(--birch);
  font-size: 0.9rem;
  line-height: 1.35;
}

.done-val {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--steam);
  white-space: nowrap;
}

/* The recap against the objectives, in the same verbs screen two used. */
.done-recap-h {
  margin: 0 0 0.4rem;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cedar-deep);
}

.done-recap {
  list-style: none;
  margin: 0 0 0.75rem;
  padding-left: 0;
}

.done-recap > li {
  position: relative;
  margin-bottom: 0.2rem;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.done-recap > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
}

.done-line {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  line-height: 1.5;
}

.done-note {
  margin: 0 0 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  color: var(--quiet);
  font-size: 0.86rem;
  line-height: 1.5;
}

.done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* ---------- pager ---------- */

.rig-foot {
  background: var(--birch);
}

.pager {
  display: flex;
  gap: 0.85rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem var(--gutter) 0.7rem;
}

.foot-note {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--quiet);
}

.btn-ghost,
.btn-hi,
.btn-quiet {
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  flex: 0 0 auto;
  transition: background-color var(--slow), color var(--slow), border-color var(--slow);
}

.btn-ghost,
.btn-hi {
  font-size: 0.99rem;
  letter-spacing: 0.02em;
  padding: 0.52rem 1.35rem;
}

.btn-ghost {
  color: var(--cedar-deep);
  background: transparent;
  border: 1px solid var(--cedar-deep);
}

.btn-ghost:hover {
  background: var(--birch-soft);
  color: var(--ink);
}

.btn-hi {
  color: var(--steam);
  background: var(--dusk);
  border: 1px solid var(--dusk);
}

.btn-hi:hover {
  background: var(--dusk-soft);
  border-color: var(--dusk-soft);
}

.btn-quiet {
  font-size: 0.87rem;
  letter-spacing: 0.02em;
  padding: 0.34rem 0.85rem;
  color: var(--cedar-deep);
  background: transparent;
  border: 1px solid var(--rule);
}

.btn-quiet:hover {
  border-color: var(--cedar);
  background: var(--birch-soft);
}

.btn-wide {
  display: block;
  width: 100%;
}

.pacer .btn-quiet {
  color: var(--birch);
  border-color: rgb(234 217 190 / 0.5);
}

.pacer .btn-quiet:hover {
  background: var(--dusk-soft);
  border-color: var(--birch);
  color: var(--steam);
}

.btn-mini {
  font-size: 0.87rem;
  padding: 0.34rem 0.9rem;
}

button[disabled] {
  opacity: 0.4;
  cursor: default;
}

button[disabled]:hover {
  background: transparent;
  border-color: var(--rule);
  color: var(--cedar-deep);
}

/* ---------- the wide stage ---------- */

@media (min-width: 56rem) {
  .cols2 {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.4rem 2.4rem;
  }

  .split {
    grid-template-columns: minmax(0, 1fr) 15rem;
  }

  .split-wide {
    grid-template-columns: minmax(0, 1fr) 16rem;
  }

  .reveal {
    grid-template-columns: 19rem minmax(0, 1fr);
  }

  .plan {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1.4rem;
  }

  .picker {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* On a short stage the two small blocks on the floor of screen two go side
   by side instead of stacking: half the width, and roughly half the height
   back to the two columns above them. */
@media (min-width: 56rem) and (max-height: 46rem) {
  .brief-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 2rem;
    align-items: start;
  }

  .brief-foot > .note {
    margin-bottom: 0;
  }
}

@media (min-width: 70rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }

  .split-wide {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
  }

  .reveal {
    grid-template-columns: 21rem minmax(0, 1fr);
  }
}

/* ---------- short stages tighten the rhythm, never the type ---------- */

@media (max-height: 46rem) {
  :root {
    --v: 0.75rem;
  }

  .lead {
    margin-bottom: 0.7rem;
  }

  .screen-hero {
    padding: 0.85rem 1rem;
  }

  .cover h2.cover-title {
    font-size: clamp(2.1rem, 5.4vw, 3.4rem);
    margin-bottom: 0.6rem;
  }

  .cover-promise {
    margin-bottom: 0.85rem;
  }

  .brief-foot {
    margin-top: 0.8rem;
  }

  .note {
    padding: 0.55rem 0.85rem;
  }

  .accordion {
    gap: 0.3rem;
  }

  .acc-btn {
    padding: 0.36rem 0.8rem;
  }

  .acc-panel {
    padding: 0.5rem 0.9rem 0.55rem;
  }

  .stepcard {
    padding: 0.75rem 0.95rem 2.8rem;
  }

  .ask-panel {
    padding: 0.75rem 0.95rem 0.8rem;
  }

  .tablist {
    margin-bottom: 0.7rem;
  }

  .sub-bar {
    margin-bottom: 0.7rem;
    padding-bottom: 0.45rem;
  }

  .pacer-stage {
    height: 66px;
  }

  .bench {
    max-height: 6rem;
    margin-top: 0.6rem;
  }

  .sg-item {
    padding: 0.75rem 0.95rem 2.8rem;
  }

  .pacer {
    padding: 0.65rem 0.85rem 0.75rem;
  }

  .card,
  .results {
    padding: 0.9rem 0.95rem 0.8rem;
  }

  .card-foot {
    margin-top: 0.65rem;
    padding-top: 0.6rem;
  }

  .picker fieldset {
    padding: 0.4rem 0.75rem 0.5rem;
  }
}

@media (max-height: 42rem) {
  :root {
    --v: 0.6rem;
  }

  /* A 640px stage is the shortest the module promises to fit without
     scrolling. The leading closes up and the panels lose padding. The
     type size does not move: nothing here drops below reading size. */
  body {
    line-height: 1.5;
  }

  .lead {
    margin-bottom: 0.55rem;
    line-height: 1.42;
  }

  .screen-hero {
    padding: 0.7rem 0.9rem;
    margin-top: 0.25rem;
  }

  .cols2 {
    gap: 0.9rem 2rem;
  }

  .cover h2.cover-title {
    font-size: clamp(1.95rem, 4.8vw, 3rem);
    margin-bottom: 0.5rem;
  }

  .cover-promise {
    margin-bottom: 0.7rem;
    line-height: 1.28;
  }

  .cover-meta {
    padding-top: 0.55rem;
  }

  .brief-foot {
    margin-top: 0.65rem;
  }

  .board {
    padding: 0.7rem 0.95rem;
  }

  .objectives > li {
    font-size: 0.98rem;
    line-height: 1.4;
  }

  .col h3 {
    margin-top: 0;
    margin-bottom: 0.3rem;
  }

  .ticklist > li {
    margin-bottom: 0.2rem;
  }

  .disclaimer {
    padding-top: 0.5rem;
  }

  .asklist {
    gap: 0.2rem;
  }

  .bench {
    display: none;
  }

  .sg-item {
    padding: 0.6rem 0.9rem 2.2rem;
  }

  .reveal .acc-btn {
    padding: 0.3rem 0.8rem;
  }

  .ask-note {
    margin-top: auto;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
  }

  .pacer-stage {
    height: 54px;
  }

  .pacer .quiet {
    margin-bottom: 0.45rem;
  }

  .stepcard {
    padding: 0.6rem 0.9rem 2.2rem;
  }

  .ask-panel {
    padding: 0.6rem 0.9rem 0.65rem;
  }

  .step-num {
    font-size: 2rem;
    bottom: 0.2rem;
  }

  .step-title,
  .ask-head {
    font-size: 1.16rem;
    margin-bottom: 0.35rem;
  }

  .sg-text {
    font-size: 1.16rem;
    margin-bottom: 0.7rem;
  }

  .feedback {
    padding: 0.55rem 0.85rem;
    margin-top: 0.65rem;
  }

  .done-body {
    padding: 0.85rem 1.1rem 0.95rem;
  }

  .done-sub,
  .done-scores,
  .done-recap,
  .done-line {
    margin-bottom: 0.6rem;
  }

  .done-recap > li {
    font-size: 0.92rem;
    margin-bottom: 0.12rem;
  }
}

/* ---------- narrow or short: only the screen body moves ---------- */

@media (max-width: 56.24rem), (max-height: 39.99rem) {
  html.js .screen-body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.js .screen {
    padding-bottom: 0.5rem;
  }

  .split,
  .cols2,
  .reveal,
  .plan {
    align-content: start;
  }

  .plate {
    min-height: 120px;
  }

  .plate-tall {
    min-height: 150px;
  }

  /* The illustration is the first thing to go once the reading column has
     to scroll: it is decoration, and it would only push the copy down. */
  .bench {
    display: none;
  }

  /* Nothing stretches once the screen body scrolls. A plate grown to fill
     a stage it no longer owns is only an empty box under the copy. */
  html.js .substeps > .substep:not([hidden]),
  html.js .substep > .stepcard,
  html.js .substep > .sg-item,
  html.js .ask-panel:not([hidden]),
  html.js .tabpanel > .plan,
  html.js .tabpanel > .results,
  html.js .screen-body > .reveal,
  html.js .split-text > .accordion,
  html.js .brief > .brief-cols,
  .acc-sec:has(> .acc-panel:not([hidden])) {
    flex: 0 0 auto;
  }

  /* The cover stops centring once the body can scroll: a short viewport
     should show the title at the top, not pushed off the bottom. */
  .cover {
    justify-content: flex-start;
  }

  .ask-note,
  .why {
    margin-top: var(--v);
  }

  .card-foot {
    margin-top: 0.85rem;
  }
}

/* ---------- reflow ---------- */

@media (max-width: 34rem) {
  :root {
    --gutter: 1rem;
  }

  .rig-head-inner {
    display: block;
  }

  .gauge {
    width: 100%;
    margin-top: 0.6rem;
  }

  .gauge-text {
    text-align: left;
  }

  .foot-note {
    display: none;
  }

  .mark {
    width: 2.2rem;
    height: 1.9rem;
  }

  .call {
    flex: 1 1 8rem;
  }

  h2 {
    padding-right: 3.4rem;
  }

  .sub-bar {
    gap: 0.5rem;
  }

  .sub-head {
    white-space: normal;
  }

  .done-scores {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- motion, only when the visitor has not asked for less ---------- */

@media (prefers-reduced-motion: no-preference) {
  .screen {
    animation: settle 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .stamp {
    animation: numeral-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .puff {
    animation: rise 17s linear infinite;
  }

  .puff-b {
    animation-duration: 23s;
    animation-delay: -7s;
  }

  .puff-c {
    animation-duration: 20s;
    animation-delay: -13s;
  }

  .feedback.is-in {
    animation: settle 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .card-list > li {
    animation: settle 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .done[open] {
    animation: settle 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  /* Four counts in, six counts out. The animation is paused in the
     markup and only ever started by the visitor pressing the button. */
  .pacer-dot {
    animation: breathe 10s cubic-bezier(0.4, 0, 0.4, 1) infinite;
    animation-play-state: paused;
  }

  .pacer.is-running .pacer-dot {
    animation-play-state: running;
  }

  /* No opacity in the screen keyframes: a fade would drop every line on
     the screen below its contrast ratio for a few frames, and the small
     lift already says everything the fade would. */
  @keyframes settle {
    from { transform: translateY(9px); }
    to { transform: none; }
  }

  @keyframes numeral-in {
    from { transform: translateY(14px) scale(1.08); }
    to { transform: none; }
  }

  @keyframes rise {
    0% { transform: translateY(14%) scale(0.85); opacity: 0; }
    22% { opacity: 0.5; }
    72% { opacity: 0.34; }
    100% { transform: translateY(-92%) scale(1.35); opacity: 0; }
  }

  @keyframes breathe {
    0% { transform: scale(0.62); }
    40% { transform: scale(1.5); }
    100% { transform: scale(0.62); }
  }
}

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

  /* The steam and the pacer are motion and nothing else, so they go
     rather than freeze. The pacer leaves a line of text behind that
     carries the same instruction. */
  .steam {
    display: none;
  }

  .pacer {
    display: none;
  }

  .pacer-still {
    display: block;
  }
}