/* Claire Cotgrove: v3, Pieced together. Tokens and rules are described in DESIGN.md. */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --moss: #2c3a24;
  --moss-2: #3a4a2f;
  --cream: #f3eee3;
  --lichen: #b9c0a2;
  /* Accents sampled from the tree image (tree-d-1200.jpg, see DESIGN.md): robin orange carries the step
     numerals (4.1:1 on paper, large text); apricot is the button ground (moss text 4.9:1, 5.9 hover, 4.6 pressed) */
  --robin: #b85120;
  --apricot: #d59951;
  --apricot-hover: #e1ab63;
  --apricot-press: #cf934b;
  --paper: #f4e9d3;
  --sage-band: #d9dfc8;
  --apricot-band: #eed5aa;
  --ground: var(--paper);
  --text: var(--moss);
  --text-2: #4a5240;
  --focus: var(--moss);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm: a 4px base (0.25rem). Every space below is a multiple of it; body line-height is 28px
     (7 units), paragraph spacing is 16px (4 units). */
  --lh: 1.75rem;
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: 9rem;

  --gutter: 16px;
  /* h1, h2 and the step numerals are Instrument Serif; everything else is Instrument Sans */
  --h2: clamp(2.5rem, 4.2vw, 3.75rem);

  /* Motion: light arriving in a garden. See DESIGN.md */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 700ms;
  --dur-photo: 1100ms;
  --dur-micro: 180ms;
  --rise: 14px;
  color-scheme: light; /* v3 is light only: the tree's paper backdrop is baked into the image */
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 400 1.0625rem/var(--lh) var(--sans);
  font-variant-numeric: lining-nums;
  hanging-punctuation: first;
  color: var(--text);
  background: var(--paper);
}

main {
  flex: 1 0 auto;
}

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

h1,
h2,
h3 {
  text-wrap: balance;
}
h1,
h2 {
  margin: 0;
}
h1 {
  font-family: var(--serif);
  font-weight: 400;
}
h2,
.title {
  font: 400 var(--h2) / 1 var(--serif);
  margin-bottom: var(--s-3);
}
h3 {
  margin: 0 0 0.25rem;
  font: 600 1.125rem/1.5rem var(--sans);
}
p,
li {
  text-wrap: pretty;
}
p {
  margin: 0 0 var(--s-2);
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--dur-micro) var(--ease-settle), color var(--dur-micro) var(--ease-settle);
}
.on-moss a,
.hero a {
  text-underline-offset: 0.24em;
}
a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}
/* The link to the page you are on (aria-current) carries no underline; any page can reuse this */
[aria-current] {
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Selection: moss on paper, apricot on moss sections */
::selection {
  background: var(--moss);
  color: var(--cream);
}
.on-moss::selection,
.on-moss ::selection {
  background: var(--apricot);
  color: var(--moss);
}

/* Grounds */
.on-moss {
  --text: var(--cream);
  --text-2: var(--lichen);
  --focus: var(--cream);
  background: var(--moss);
  color: var(--cream);
}
.on-ground,
.on-sage,
.on-apricot {
  background: var(--ground);
  color: var(--text);
}
/* Bands: each is its own room. Text stays moss on every light ground. */
.on-sage {
  --ground: var(--sage-band);
}
.on-apricot {
  --ground: var(--apricot-band);
}
.muted {
  color: var(--text-2);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--cream);
  color: var(--moss);
}
.skip:focus {
  left: var(--s-2);
  top: var(--s-2);
}

/* Header: the logo is page chrome, on paper, no bar and no rule. Logo left, nav right (nav from 768) */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--gutter) 0;
}
.brand {
  display: block;
  color: var(--moss);
  line-height: 0;
  text-decoration: none;
}
.brand svg {
  display: block;
  width: 76px;
  height: 76px;
}
.site-nav {
  display: none;
}
.site-nav ul {
  display: flex;
  gap: var(--s-4);
}
.site-nav a {
  color: var(--text);
  font-size: 1.0625rem;
  line-height: var(--lh);
  text-decoration: none;
}
.site-nav a:hover {
  text-decoration: underline;
}

/* Button */
.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 1.5rem;
  background: var(--apricot);
  color: var(--moss);
  font: 600 1.0625rem/1.3 var(--sans);
  text-decoration: none;
  border-radius: 3px;
  transition: background-color var(--dur-micro) var(--ease-settle);
}
.button:hover {
  background: var(--apricot-hover);
  text-decoration: none;
}
.button:active {
  background: var(--apricot-press);
  transform: translateY(1px);
}

/* Sections (phone: one column) */
.section {
  padding: var(--pt, var(--s-5)) var(--gutter) var(--pb, var(--s-5));
}
.section > * {
  max-width: 34rem;
}
.section > figure {
  max-width: none;
}
figure {
  margin: 0;
}

/* Hero: one composition on one floor. The tree's paper is the page's paper (flat-fielded, see
   tools/img/tree-flatfield.py), so no edge shows. Phone: text, then the tree below it, full bleed. */
.hero {
  position: relative;
  overflow: hidden;
  --tree-floor: 0.0775; /* trunk base and shadow sit this fraction of the picture's width above its bottom edge */
}
.hero-text {
  position: relative;
  z-index: 1;
  padding: var(--s-3) var(--gutter) 0;
}
.hero h1 {
  margin: 0 0 var(--s-3);
  font-size: 17.4vw;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--moss);
}
.hero h1 .n1,
.hero h1 .n2 {
  display: block;
  white-space: nowrap;
}
.hero .lede {
  max-width: 22rem;
  text-wrap: pretty;
  margin-bottom: var(--s-3);
  font-size: 1.25rem;
  line-height: 1.5;
}
/* The credential line sits under the button on its own line: smaller and fainter than the button so it
   never reads as a second action. #5f6955 on paper is 4.79:1. */
.hero .reg {
  margin: var(--s-2) 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #5f6955;
}
.hero-tree {
  margin: var(--s-2) 0 calc(-100vw * var(--tree-floor));
}
.hero-tree img {
  width: 100%;
  height: auto;
}

/* About */
.about {
  --pt: var(--s-4);
  --pb: var(--s-5);
}
.about figure {
  width: calc(78% + var(--gutter));
  margin: var(--s-3) auto var(--s-3) calc(-1 * var(--gutter));
}
.about figure img,
.training figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Objects: small still lifes, flat-fielded to their section's ground so they sit on it. No frame, no
   shadow added, no rounded corners; one per section, never beside another image. */
.obj {
  margin: 0;
}
.obj img {
  width: 100%;
  height: auto;
  /* Feathered edge: the outer 8% fades to nothing on every side, so the picture's rectangle (a level or two off
     the ground) can never read as a box. The objects and their shadows sit inside the inner 84%. */
  --fade: 8%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-composite: intersect;
}
.section > .obj {
  max-width: none;
}

/* Rooms. Phone: one column; each band is its own ground, 64px above and below. */
.approach,
.how,
.help,
.training,
.faq {
  --pt: var(--s-5);
  --pb: var(--s-5);
}
.approach > p:last-of-type {
  margin-bottom: 0;
}
/* The sapling stands on the band's floor after the last paragraph */
.approach > .obj {
  width: min(300px, 80%);
  margin-top: var(--s-4);
}

.how > .obj {
  margin: 0 0 var(--s-4);
}
.steps {
  counter-reset: step;
  margin: 0 0 var(--s-4);
}
.steps li {
  counter-increment: step;
  margin-bottom: var(--s-4);
}
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.25rem;
  font: 400 4rem/1 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--robin);
}
.steps p {
  margin: 0;
}

/* What I help with: four groups in parents' words, one term per line, no bullets, chips, icons or rules */
.help > .obj {
  width: min(340px, 85%);
  margin: var(--s-2) 0 var(--s-4);
}
.issues li {
  line-height: 1.55;
  text-wrap: balance;
}
.help-close {
  margin: var(--s-4) 0 0;
  text-wrap: balance;
}
.issues div + div {
  margin-top: var(--s-3);
}

/* Phone: each group is a row, the name in the left column, level with the first item, the items one per line */
@media (max-width: 767px) {
  .issues {
    margin-top: var(--s-4);
  }
  .group {
    display: grid;
    grid-template-columns: 37% 1fr;
    column-gap: var(--s-2);
    align-items: baseline;
  }
  .issues div + div {
    margin-top: var(--s-5);
  }
  .help h3 {
    margin: 0;
    font: 600 0.9375rem/1.55 var(--sans);
    color: var(--text-2);
  }
  .issues li {
    font-size: 1rem;
    line-height: 1.55;
    /* A wrapped item hangs, so its second line reads as the same item */
    padding-left: 0.75em;
    text-indent: -0.75em;
  }
  .help-close {
    margin-top: var(--s-5);
  }
}
/* Below 340px the name sits above its items again */
@media (max-width: 339px) {
  .group {
    display: block;
  }
  .help h3 {
    margin-bottom: 0.25rem;
  }
}

/* Training */
.training > .obj {
  width: min(280px, 72%);
  margin: var(--s-3) 0 var(--s-3) auto;
}
/* Real bullets: simple round moss markers, hanging so the text lines up */
.creds {
  list-style: disc;
  padding-left: 1.25rem;
}
.creds li::marker {
  color: var(--moss);
}
.creds li {
  /* pretty, not balance: balance pulled the two-line items in to half the measure, so the list read ragged */
  text-wrap: pretty;
  max-width: 36rem;
}
.creds li + li {
  margin-top: 0.5rem;
}
/* BACP Registered Member logo: official artwork, unaltered, 160px (the file is 320px wide for 2x), after the last
   item of body copy. The file is opaque white; multiply drops it into the paper without touching its pixels. */
.bacp-logo {
  width: fit-content;
  margin-top: var(--s-3);
}
.bacp-logo img {
  display: block;
  width: 160px;
  height: auto;
  mix-blend-mode: multiply;
}

/* Questions */
.faq > .obj {
  width: min(300px, 80%);
  margin: 0 0 var(--s-4);
}
.q + .q {
  margin-top: var(--s-3);
}
.q h3 {
  margin-top: 0;
}
.q p {
  margin-bottom: 0;
}

/* Contact runs straight into the footer */
.contact {
  --pt: var(--s-5);
  --pb: var(--s-3);
}
/* Phone: the still life stands on the moss under the heading, on the one left edge like the other rooms' objects */
.contact > .obj {
  width: min(400px, 100%);
  margin: var(--s-2) 0 var(--s-3);
}
/* The address closes the first sentence and never breaks mid-address */
.contact .addr {
  white-space: nowrap;
}
/* LinkedIn sits under the button, a plain underlined link */
.contact .elsewhere {
  margin: var(--s-3) 0 0;
}
/* In-person address and the static Putney map (a link to Google Maps; no request is made at load) */
.contact .visit {
  margin-top: var(--s-4);
}
.contact .visit > p:first-child {
  margin-bottom: var(--s-2);
}
.contact .map {
  display: block;
}
.contact .map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.contact .map-credit {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--lichen);
}
.contact .map-credit a {
  color: inherit;
}

.site-footer {
  padding: var(--s-3) var(--gutter) var(--s-5);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--lichen);
}
/* Phone: the two groups stack, both left-aligned. 768 up: one row, copyright and credit left, Privacy
   notice and LinkedIn right. */
.foot {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--s-3);
}
.site-footer a {
  color: var(--cream);
}

/* Plain pages (privacy, 404): same rules a future page would use */
.plain {
  --pt: var(--s-5);
  --pb: var(--s-6);
}
.plain .title {
  margin-bottom: var(--s-3);
}

/* 768 and up */
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }

  .grid {
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) repeat(12, minmax(0, 96px)) minmax(var(--gutter), 1fr);
    column-gap: 16px;
    padding-inline: 0;
    align-items: start;
  }
  .grid > * {
    grid-column: 3 / 9;
  }
  .section > :is(.steps, .issues, .qs, .obj) {
    max-width: none;
  }

  .site-header {
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) repeat(12, minmax(0, 96px)) minmax(var(--gutter), 1fr);
    column-gap: 16px;
    padding: var(--s-3) 0 0;
  }
  .brand {
    grid-column: 3 / 6;
    justify-self: start;
  }
  .brand svg {
    width: 104px;
    height: 104px;
  }
  .site-nav {
    display: block;
    grid-column: 6 / 14;
    justify-self: end;
  }

  /* Hero: the same fourteen tracks. Text on columns 2 to 9, the tree below/right of it, both end-aligned
     so the button row and the tree's shadow sit on one floor. */
  .hero {
    --tree-w: clamp(260px, 38vw, 420px);
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) repeat(12, minmax(0, 96px)) minmax(var(--gutter), 1fr);
    column-gap: 16px;
    align-items: end;
    padding-top: var(--s-4);
  }
  .hero-text {
    grid-column: 3 / 10;
    grid-row: 1;
    padding: 0 0 var(--s-5);
  }
  .hero h1 {
    margin-bottom: var(--s-3);
    font-size: clamp(4.5rem, 9.4vw, 8.5rem);
  }
  .hero-tree {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
    /* beyond 1560px the tree stops bleeding and stays with the text; its paper is the page's, so no edge shows */
    margin-right: max(0px, calc((100vw - 1560px) / 2));
    width: var(--tree-w);
    margin-bottom: calc(var(--tree-w) * var(--tree-floor) * -1 + var(--s-5));
  }

  /* About */
  .about {
    --pt: var(--s-5);
    --pb: var(--s-6);
    align-items: stretch;
  }
  .about > :not(figure) {
    grid-column: 7 / 13;
  }
  /* The portrait bleeds off the left edge to column 5 and takes the text's height. The picture is
     absolutely placed so its size never sets the section's height. */
  .about figure {
    position: relative;
    grid-column: 1 / 6;
    grid-row: 1 / span 5;
    align-self: stretch;
    width: auto;
    margin: 0;
  }
  .about figure picture {
    position: absolute;
    inset: 0;
  }
  .about figure picture,
  .about figure img {
    width: 100%;
    height: 100%;
  }
  .about figure img {
    aspect-ratio: auto;
    object-position: 50% 30%;
  }

  /* Rooms: each band at least 96px above and below. Column numbers below are the brief's: tracks 2 to 13 are
     the twelve columns, so "columns 7 to 13" is grid-column 7 / 14. */
  .approach,
  .how,
  .help,
  .training,
  .faq {
    --pt: var(--s-6);
    --pb: var(--s-6);
  }

  /* 3. Approach (sage): the sapling on columns 2 to 6, standing on the bottom padding line; text on 7 to 13 */
  .approach > h2,
  .approach > p {
    grid-column: 7 / 14;
    max-width: 33rem;
  }
  .approach > h2 {
    grid-row: 1;
  }
  .approach > .obj {
    grid-column: 3 / 7;
    grid-row: 1 / span 5;
    align-self: end;
    width: 100%;
    max-width: 340px;
    margin: 0;
  }

  /* 4. How I work (paper): h2 left, the steps object right and level with it; steps 2 x 3 below 1100 */
  .how > h2 {
    grid-column: 3 / 7;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }
  .how > .obj {
    grid-column: 7 / 14;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    max-width: 560px;
    margin: 0;
  }
  .steps {
    grid-column: 3 / 14;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4) var(--s-4);
    margin: var(--s-5) 0 0;
  }
  .steps li {
    margin: 0;
  }

  /* 5. What I help with (apricot). 768 to 1099: heading row with the bowl at its right, groups two by two under it */
  .help {
    grid-template-rows: auto auto auto auto;
  }
  .help > h2,
  .help > .lede-in {
    grid-column: 3 / 9;
  }
  /* heading and intro are one block centred on the bowl: the bowl's extra height is shared equally by the two
     rows it spans, so the h2 hugs the row boundary from above and the intro from below */
  .help > h2 {
    grid-row: 1;
    align-self: end;
  }
  .help > .lede-in {
    grid-row: 2;
    align-self: start;
  }
  .help > .obj {
    grid-column: 9 / 14;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    width: 100%;
    max-width: 400px;
    margin: 0;
  }
  .issues {
    grid-column: 3 / 14;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4) var(--s-4);
    margin: var(--s-5) 0 0;
  }
  .issues div + div {
    margin-top: 0;
  }
  .help > .help-close {
    grid-column: 3 / 14;
    grid-row: 4;
    max-width: none;
    margin-top: var(--s-5);
  }

  /* 6. Training (paper): text on columns 2 to 8, the books on 10 to 13 and level with the text's middle */
  .training > h2,
  .training > p,
  .training > .creds,
  .training > .bacp-logo {
    grid-column: 3 / 10;
    max-width: 32rem;
  }
  .training > .obj {
    grid-column: 10 / 14;
    grid-row: 1 / span 5;
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: 400px;
    margin: 0;
  }

  /* 7. Questions (sage). 768 to 1099: heading row with the pieces at its right, the questions 2 x 2 under it */
  .faq > h2 {
    grid-column: 3 / 9;
    grid-row: 1;
  }
  .faq > .obj {
    grid-column: 9 / 14;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    width: 100%;
    max-width: 300px;
    margin: 0;
  }
  /* Two flowing columns, so a short answer never leaves a hole beside a long one. DOM order stays 1 to 4;
     the columns read 1, 2 | 3, 4 (or as the browser balances them). */
  .qs {
    grid-column: 3 / 14;
    grid-row: 2;
    display: block;
    columns: 2;
    column-gap: var(--s-5);
    margin-top: var(--s-5);
  }
  .q,
  .q + .q {
    break-inside: avoid;
    margin: 0 0 var(--s-4);
  }
  .q:last-child {
    margin-bottom: 0;
  }

  /* Contact */
  .contact {
    --pt: var(--s-7);
    --pb: var(--s-4);
  }
  /* 768 to 1099: a wider text column so "30-minute" does not split; the still life stays under the heading
     (beside the text it would be too narrow to read) */
  .contact > :not(.obj) {
    grid-column: 3 / 10;
    max-width: 30rem;
  }
  .contact > .obj {
    grid-column: 3 / 9;
  }

  .site-footer {
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) repeat(12, minmax(0, 96px)) minmax(var(--gutter), 1fr);
    column-gap: 16px;
    padding: var(--s-3) 0 var(--s-5);
  }
  .foot {
    grid-column: 3 / 14;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem var(--s-4);
  }

  /* Plain pages */
  .plain {
    --pt: var(--s-6);
    --pb: var(--s-7);
  }
  .plain > * {
    grid-column: 3 / 9;
  }
  .plain > .obj {
    width: 340px;
    margin-bottom: var(--s-4);
  }
}

/* 1100 and up: the six steps three by two; Help and Questions put the heading left, content right */
@media (min-width: 1100px) {
  .hero .lede {
    max-width: 37rem;
  }
  /* No min-height and no top padding: the tree starts just under the header and is sized to the text block,
     so the space between the logo and the headline stays about 100px at every desktop width
     (it was 210 to 350px when the hero filled the viewport) */
  .hero {
    --tree-w: clamp(420px, 34vw, 470px);
    padding-top: 0;
  }
  .hero-text {
    grid-column: 3 / 11;
  }
  /* Text on the left, the still life on the right, centred on the band's height */
  .contact > :not(.obj) {
    grid-column: 3 / 8;
  }
  .contact > .obj {
    grid-column: 9 / 14;
    grid-row: 1 / span 6;
    align-self: center;
    width: 100%;
    margin: 0;
  }

  /* Six steps always fill a complete grid: 1 x 6 on phones, 2 x 3 from 768, 3 x 2 from 1100. Never 4 + 2 */
  .steps {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--s-4);
  }

  .faq {
    grid-template-rows: auto 1fr;
  }
  .faq > h2 {
    grid-column: 3 / 7;
  }
  .faq > .obj {
    grid-column: 3 / 7;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    max-width: 380px;
    margin-top: var(--s-3);
  }
  .qs {
    grid-column: 7 / 14;
    grid-row: 1 / span 2;
    margin-top: 0.85rem;
  }
}

/* 1280 and up: the Help groups run four across the full content width, under the heading row (below that
   they stay two by two, which keeps every group's lines unbroken) */
@media (min-width: 1280px) {
  .issues {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--s-4);
  }
}

/* Motion. Light arriving in a garden: slow to settle, never bouncing, never repeating, never asking for
   attention. Screen and no reduced-motion preference only; the hidden starting states also need .js (set in
   the head), so without JS or with reduced motion everything is simply there. */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(var(--rise));
    }
  }
  @keyframes photo-in {
    from {
      opacity: 0.001;
      transform: scale(1.02);
    }
  }

  /* 1. Hero on load. Text does not wait for the tree; all done by about 1.1s. */
  .js .hero-tree img {
    animation: photo-in var(--dur-photo) var(--ease-settle) backwards;
  }
  .js .hero .n1,
  .js .hero .n2,
  .js .hero .lede,
  .js .hero .reg,
  .js .hero .button {
    animation: rise var(--dur-reveal) var(--ease-settle) calc(var(--i) * 70ms) backwards;
  }
  .hero .n1 { --i: 0; }
  .hero .n2 { --i: 1; }
  .hero .lede { --i: 2; }
  .hero .button { --i: 3; }
  .hero .reg { --i: 4; }

  /* 2 and 4. Section reveals and What I help with groups: rise and fade once, as they enter. */
  .js [data-reveal="rise"] {
    opacity: 0;
    transform: translateY(var(--rise));
  }
  .js [data-reveal="rise"].is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-reveal) var(--ease-settle) var(--d, 0ms), transform var(--dur-reveal) var(--ease-settle) var(--d, 0ms);
  }

  /* 3. How I work: steps in order, the numeral first, then the words. */
  .js [data-reveal="step"]::before,
  .js [data-reveal="step"] > * {
    opacity: 0;
    transform: translateY(var(--rise));
  }
  .js [data-reveal="step"].is-in::before,
  .js [data-reveal="step"].is-in > * {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-reveal) var(--ease-settle) var(--d, 0ms), transform var(--dur-reveal) var(--ease-settle) var(--d, 0ms);
  }
  .js [data-reveal="step"].is-in > * {
    transition-delay: calc(var(--d, 0ms) + 70ms);
  }

  /* 5. Photo windows open from the side they bleed from; the picture settles inside. */
  .js [data-reveal="window"] {
    --clip: 0 6% 0 0;
    overflow: hidden;
    clip-path: inset(var(--clip));
  }
  .js [data-reveal="window"][data-side="left"] {
    --clip: 0 0 0 6%;
  }
  .js [data-reveal="window"] img {
    transform: scale(1.04);
  }
  .js [data-reveal="window"].is-in {
    clip-path: inset(0);
    transition: clip-path var(--dur-photo) var(--ease-settle) var(--d, 0ms);
  }
  .js [data-reveal="window"].is-in img {
    transform: none;
    transition: transform var(--dur-photo) var(--ease-settle) var(--d, 0ms);
  }
}

/* Print: black on white, no backgrounds or animation, the hero photo small, the address in full */
@media print {
  @page {
    margin: 16mm;
  }
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  html,
  body {
    background: #fff !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  .skip,
  .site-nav,
  .section figure,
  .obj {
    display: none !important;
  }
  .site-header {
    display: block !important;
    padding: 0 0 8mm !important;
  }
  .brand svg {
    width: 20mm !important;
    height: 20mm !important;
  }
  .hero,
  .grid,
  .issues,
  .group,
  .steps,
  .site-footer {
    display: block !important;
    min-height: 0 !important;
  }
  .grid > *,
  .section > * {
    max-width: 160mm !important;
  }
  h2,
  .title {
    margin: 6mm 0 3mm !important;
    font-size: 20pt !important;
    line-height: 1.2 !important;
  }
  .section,
  .hero-text {
    padding: 0 0 8mm !important;
  }
  .hero-tree {
    display: none !important;
  }
  .hero h1 {
    font-size: 32pt !important;
  }
  .steps li {
    position: static !important;
    margin: 0 0 4mm !important;
  }
  .steps li::before {
    position: static !important;
    display: inline !important;
    margin-right: 0.4em !important;
    font-size: 1.2em !important;
  }
  .group,
  .steps li,
  .faq h3,
  .faq h3 + p,
  h2 {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h2,
  h3 {
    break-after: avoid;
  }
  .button {
    border: 1px solid #000;
    min-height: 0;
    padding: 1mm 3mm;
  }
  a {
    text-decoration: underline !important;
  }
  .contact .addr {
    white-space: normal;
    word-break: break-all;
  }
  .contact .map,
  .contact .map-credit {
    display: none;
  }
  .site-footer {
    padding: 4mm 0 0 !important;
    font-size: 9pt;
  }
  .site-footer ul {
    display: block;
  }
}