/* The landing page: a journal, a pencilled trail inked in as you walk. Its
 * paper is the theme's: dark by night, cream by day. The opening scene is
 * hero.css, with night.css and day.css. */

/* Values only this page uses; the shared palette lives in tokens.css. */
:root {
  --sb-paper: var(--color-bg);
  --sb-wash: color-mix(in oklab, var(--color-line) 5%, transparent);
  --sb-pencil: color-mix(in oklab, var(--color-line) 42%, var(--color-bg));
  --sb-margin: color-mix(in oklab, var(--color-line) 14%, transparent);
  --sb-tape: var(--color-tape);
  --sb-tape-edge: var(--color-tape-edge);
  /* Photographs are prints: pale paper borders, written on in dark ink. */
  --sb-print-paper: var(--color-print);
  --sb-print-ink: var(--color-print-ink);

  /* The journal page: plain paper. The welcome's blank page is the same
   * sheet. */
  --sb-journal: var(--color-bg);

  /* Room either side of the entries for the trail to run in. */
  --trail-gutter: clamp(2.75rem, 12vw, 13rem);

}

body {
  background: var(--sb-journal);
}

.sb {
  position: relative;
  isolation: isolate;
}

/* The ruled margin of the journal page. */
.sb::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 clamp(0.45rem, 1.6vw, 1.6rem);
  width: 3px;
  border-inline: 1px solid var(--sb-margin);
  z-index: -1;
  pointer-events: none;
}

/* A little of the sky's own colour behind the header's words before the
 * page moves (the scene sets --headfade). After that the header has its own
 * ground (--header-bg). */
.sb-headfade {
  position: fixed;
  inset: 0 0 auto;
  height: 7rem;
  z-index: calc(var(--z-header) - 1);
  pointer-events: none;
  background: linear-gradient(var(--headfade), transparent);
  transition: opacity var(--dur-m) var(--ease-out);
}

[data-scrolled] .sb-headfade {
  opacity: 0;
}

.sb-hand {
  font-family: var(--font-hand);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-accent);
}

/* ---- Title page: the scene (hero.css), the words in its sky ---------------- *
 * The colours of the words and what is behind them come from the scene
 * (night.css, day.css), since they sit on its sky. */
.sb-title {
  position: relative;
  height: max(100svh, 36rem);
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: max(17vh, 7rem);
  background: var(--title-bg);
}

.sb-title__text {
  position: relative;
  z-index: 6;
  padding-inline: var(--gutter);
  text-align: center;
}

.sb-title__h1 {
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-shadow: var(--title-shadow);
}

.sb-title__tiny {
  display: block;
  margin-bottom: 0.12em;
  font-size: 0.36em;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 48, "SOFT" 100;
  letter-spacing: 0.01em;
  color: var(--title-tiny);
}

.sb-title__by {
  margin: 1.1rem auto 0;
  max-width: 28ch;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  color: var(--title-by, var(--color-ink-soft));
}

.sb-title__walk {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.6rem;
  padding: 0.7em 1.3em;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  box-shadow: 0 0 28px var(--walk-glow);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 250ms, box-shadow 250ms;
}

.sb-title__walk:hover {
  background: color-mix(in oklab, var(--color-ink) 86%, var(--color-bg));
  box-shadow: 0 0 40px 4px var(--walk-glow);
}

.sb-title__walk span {
  display: inline-block;
  animation: sb-nudge 2.4s var(--ease-float) infinite;
}

@keyframes sb-nudge {
  50% { translate: 0 3px; }
}

/* The words rise in as the scene appears: on load, or as the welcome's
 * light opens (so they are not there under the blank page before it). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sb-title__text > * {
    animation: sb-rise 1.1s var(--ease-out) both;
  }
  .sb-title__text > :nth-child(2) { animation-delay: 0.25s; }
  .sb-title__text > :nth-child(3) { animation-delay: 0.45s; }
  [data-welcome] .sb-title__text > * {
    animation-play-state: paused;
  }
}

@keyframes sb-rise {
  from { opacity: 0; translate: 0 14px; }
}

/* The hero's fairy. This is only its resting place: hero.js lets her
 * wander from it (with translate, rotate and scale) while the page is at the
 * top, and brings her back to it as the page moves; landing.js then flies
 * her to the trail fairy with a transform. The two are drawn alike (same
 * stroke per pixel, same bob) so the handover cannot be seen. The welcome
 * flies her in with translate, rotate and scale too, which also leave that
 * transform alone. */
.sb-flyer {
  position: absolute;
  z-index: 7;
  left: 58%;
  top: 72%;
  width: clamp(3.25rem, 4.4vw, 4.75rem);
  color: var(--color-line);
  pointer-events: none;
  will-change: transform;
}

.sb-flyer .art {
  --art-stroke: 2.2;
  animation: sb-bob 2.6s var(--ease-float) infinite alternate;
}

/* ---- Life: sway, bob, smoke -------------------------------- */
.sb-sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sb-sway 5.5s var(--ease-float) calc(var(--i, 0) * -1.7s) infinite alternate;
}

@keyframes sb-sway {
  from { rotate: -2.5deg; }
  to { rotate: 2.5deg; }
}

@keyframes sb-bob {
  from { translate: 0 -3px; rotate: -3deg; }
  to { translate: 0 4px; rotate: 3deg; }
}

.ln-smoke {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sb-smoke 4.2s var(--ease-float) infinite alternate;
}

@keyframes sb-smoke {
  from { transform: translate(0, 0) skewX(0deg); opacity: 0.75; }
  to { transform: translate(2px, -3px) skewX(-8deg); opacity: 0.35; }
}

/* ---- The walk: trail, fairy, sparks ---------------------------------------- */
.sb-walk {
  position: relative;
  padding-bottom: var(--space-2xl);
}

.sb-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 0;
  /* A layer of its own: the ink moves on every frame of the walk, and on a
   * layer of its own that repaints the trail alone, not the photographs and
   * words it runs among. */
  will-change: transform;
}

.sb-trail__pencil {
  stroke: var(--sb-pencil);
  stroke-width: 1.4;
  stroke-dasharray: 2 9;
  opacity: 0.55;
}

.sb-trail__ink {
  stroke: var(--color-line);
  stroke-width: 2.2;
}

.sb-trail__ink--echo {
  stroke-width: 1;
  opacity: 0.45;
  transform: translate(3px, 2px);
}

/* The trail fairy shows only once the hero's fairy has handed over
 * (.is-handed), and swaps with it in the same frame; only arriving at the
 * door fades. */
.sb-fairy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 3.4rem;
  margin: -3.8rem 0 0 -1.7rem;
  color: var(--color-line);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.sb-fairy .art {
  --art-stroke: 2.2;
  animation: sb-bob 2.6s var(--ease-float) infinite alternate;
}

/* The burst of sparks when the hero's fairy merges in: a ring of dots,
 * scaled out from the fairy (sketchbook.js plays it). */
.sb-fairy::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  box-shadow:
    0 -24px 0 0 var(--fairy-star),
    17px -17px 0 -0.5px var(--fairy-star),
    24px 0 0 0 var(--fairy-star),
    17px 17px 0 -0.5px var(--fairy-star),
    0 24px 0 0 var(--fairy-star),
    -17px 17px 0 -0.5px var(--fairy-star),
    -24px 0 0 0 var(--fairy-star),
    -17px -17px 0 -0.5px var(--fairy-star);
  opacity: 0;
  pointer-events: none;
}

.sb-walk.is-live.is-handed .sb-fairy,
.sb-walk.is-still .sb-fairy {
  opacity: 1;
}

.sb-walk.is-live.is-handed .sb-spark {
  opacity: var(--o, 1);
}

.sb-walk.is-live.is-before .sb-fairy,
.sb-walk.is-live.is-before .sb-spark {
  opacity: 0;
}

.sb-walk.is-live.is-arrived .sb-spark {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

/* At the door she goes in: her drawing shrinks toward her feet, on the
 * doorstep, as it fades, and her light goes with her; the house lights up
 * behind her. Scrolling back up, she comes out the same way. It is done on
 * the drawing and the light, not on .sb-fairy: that element's transform is
 * her place on the route (a scale there would scale it too, and fly her off
 * toward the page's corner), and its opacity is the handover's instant swap
 * with the hero's fairy. */
.sb-fairy .art {
  transform-origin: 50% 100%;
  transition:
    scale 500ms var(--ease-in-out),
    opacity 500ms var(--ease-out);
}

.sb-walk.is-live.is-arrived .sb-fairy .art {
  scale: 0.3;
  opacity: 0;
}

.sb-walk.is-live.is-arrived .sb-fairy::before {
  opacity: 0;
}

.sb-spark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--fairy-star);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.sb-spark:nth-of-type(n + 3) { width: 4px; height: 4px; }
.sb-spark:nth-of-type(n + 5) { width: 3px; height: 3px; }

/* ---- Chapter header ---------------------------------------------------------- */
.sb-trailside {
  position: relative;
  z-index: 1;
  padding-top: var(--space-2xl);
}

.sb-chapter {
  width: min(100% - 2 * var(--trail-gutter), 34rem);
  margin: 0 auto var(--space-2xl);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  background: radial-gradient(closest-side, var(--color-bg) 70%, transparent);
  padding: var(--space-m) 0;
}

.sb-chapter .eyebrow {
  color: var(--color-accent);
}

/* ---- Journal entries --------------------------------------------------------- */
.sb-entries {
  list-style: none;
  padding: 0;
  width: min(100% - 2 * var(--trail-gutter), 62rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(7rem, 16vh, 12rem);
}

/* The photograph beside its notes, and under the notes their foot (the
 * margin note and the doodles); the notes and the foot together are
 * centred on the photograph. */
.sb-entry {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    "plate ."
    "plate notes"
    "plate foot"
    "plate .";
  column-gap: clamp(1.5rem, 4vw, 4rem);
}

.sb-entry--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas:
    ". plate"
    "notes plate"
    "foot plate"
    ". plate";
}

.sb-plate {
  grid-area: plate;
  position: relative;
  max-width: 22rem;
  justify-self: center;
  align-self: center;
  width: 100%;
  padding: var(--space-l) var(--space-m) var(--space-s);
  color: var(--color-line);
}

.sb-plate__wash {
  position: absolute;
  inset: 10% -4% -2% 0;
  background: radial-gradient(60% 55% at 45% 55%, var(--sb-wash), transparent 72%);
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
  rotate: calc(var(--i, 0) * 37deg);
}

/* A photograph taped into the journal: a paper border, deeper at the foot
 * where its number is written, a slight tilt, tape across the top corners. */
.sb-print {
  position: relative;
  display: block;
  padding: 0.55rem 0.55rem 2.4rem;
  background: var(--sb-print-paper);
  box-shadow:
    0 1px 2px var(--color-shadow),
    0 22px 34px -18px var(--color-shadow);
  rotate: -2.2deg;
}

.sb-entry--flip .sb-print {
  rotate: 1.8deg;
}

.sb-print img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-bg-deep);
}

.sb-print::before,
.sb-print::after {
  content: "";
  position: absolute;
  top: -0.55rem;
  width: 4.4rem;
  height: 1.35rem;
  background: var(--sb-tape);
  border-inline: 1px dashed var(--sb-tape-edge);
  box-shadow: 0 1px 2px var(--color-shadow);
}

.sb-print::before {
  left: -1.3rem;
  rotate: -36deg;
}

.sb-print::after {
  right: -1.3rem;
  rotate: 34deg;
}

/* The number goes in the corner away from the doodles at the print's foot. */
.sb-print__no {
  position: absolute;
  color: var(--sb-print-ink);
  right: 0.9rem;
  bottom: 0.3rem;
  font-size: var(--step-2);
  rotate: -3deg;
}

.sb-entry--flip .sb-print__no {
  right: auto;
  left: 0.9rem;
}

.sb-notes {
  grid-area: notes;
  position: relative;
  max-width: 28rem;
  padding: var(--space-s) 0;
  background: radial-gradient(closest-side, var(--color-bg) 75%, transparent);
}

.sb-entry--flip .sb-notes {
  justify-self: end;
}

/* The foot of the notes, kept off the trail (which runs round the
 * photograph's far side and crosses the page below the entry): the margin
 * note on the photograph's side, its arrow pointing across at the picture,
 * and the doodles growing at the other end. */
.sb-foot {
  grid-area: foot;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
  width: 100%;
  max-width: 28rem;
  margin-top: var(--space-2xs);
}

.sb-entry--flip .sb-foot {
  justify-self: end;
  flex-direction: row-reverse;
}

.sb-annot {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  max-width: 13rem;
  font-family: var(--font-hand);
  font-size: var(--step-1);
  line-height: 1.05;
  color: var(--color-accent);
  rotate: -2deg;
}

.sb-annot__arrow {
  flex: none;
  width: 3.2rem;
  transform: scaleY(-1);
  --art-stroke: 1.8;
  --art-line: var(--color-accent);
  --draw-delay: 500ms;
  --draw-duration: 900ms;
}

.sb-entry--flip .sb-annot {
  flex-direction: row-reverse;
  text-align: right;
  rotate: 2deg;
}

.sb-entry--flip .sb-annot__arrow {
  transform: scale(-1, -1);
}

.sb-doodles {
  display: flex;
  align-items: flex-end;
  flex: none;
  color: var(--color-line);
}

.sb-doodle {
  flex: none;
  --art-stroke: 1.6;
  --draw-delay: 300ms;
}

.sb-doodle--fern {
  width: 5rem;
  --art-stroke: 1.8;
}

.sb-doodle--shroom {
  width: 2.6rem;
  margin-left: -1.1rem;
  --art-stroke: 2.2;
}

.sb-doodle--flower {
  width: 1.7rem;
  margin-right: -0.3rem;
  --art-stroke: 2.6;
}

.sb-doodle--grass {
  width: 2.6rem;
  --art-stroke: 2.4;
}

.sb-notes__meta {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-s);
  border-bottom: 1px solid var(--color-rule);
}

.sb-notes__name {
  font-size: var(--step-4);
  padding-right: 5.5rem;
}

.sb-notes__latin {
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--color-ink-soft);
}

.sb-notes__note {
  margin-top: var(--space-s);
  max-width: 26rem;
}

.sb-notes__light {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-s);
  font-family: var(--font-hand);
  font-size: var(--step-1);
  color: var(--color-ink-soft);
}

.sb-notes__light svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* The price, a solid stamp: a disc of the accent with a hairline ring
 * just inside its edge, the price in the ink that reads on it. */
.sb-stamp {
  position: absolute;
  top: 1.9rem;
  right: 0;
  display: grid;
  place-items: center;
  width: 5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow:
    inset 0 0 0 0.25rem var(--color-accent),
    inset 0 0 0 calc(0.25rem + 1px) color-mix(in oklab, var(--color-accent-ink) 70%, var(--color-accent));
  color: var(--color-accent-ink);
  rotate: -12deg;
  line-height: 1;
  text-align: center;
  align-content: center;
  gap: 0.15rem;
}

.sb-stamp .price {
  font-size: var(--step-1);
  font-weight: 600;
}

.sb-stamp__small {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sb-stamp {
    opacity: 0;
    scale: 1.5;
    transition:
      opacity 200ms ease-out 900ms,
      scale 320ms cubic-bezier(0.3, 1.6, 0.5, 1) 900ms;
  }
  .sb-notes.is-in .sb-stamp {
    opacity: 1;
    scale: 1;
  }
  .sb-annot > span {
    opacity: 0;
    transition: opacity 900ms var(--ease-out) 600ms;
  }
  .sb-print {
    opacity: 0;
    translate: 0 1rem;
    transition:
      opacity 700ms var(--ease-out) 150ms,
      translate 900ms var(--ease-out) 150ms;
  }
  .sb-plate.is-in .sb-print {
    opacity: 1;
    translate: 0 0;
  }
  .sb-foot.is-in .sb-annot > span {
    opacity: 1;
  }
}

/* ---- The cottage ------------------------------------------------------------- */
.sb-home {
  position: relative;
  z-index: 1;
  padding-top: clamp(7rem, 16vh, 12rem);
}

.sb-home__art {
  position: relative;
  width: min(100% - 2 * var(--trail-gutter), 40rem);
  margin-inline: auto;
  color: var(--color-line);
}

.sb-home__art > .art:first-child {
  --art-stroke: 0.9;
  --glow-opacity: 0;
  --door-glow: 0.5;
  transition: --glow-opacity 1.1s var(--ease-out) 350ms;
}

.sb-walk.is-arrived .sb-home__art > .art:first-child,
.sb-walk.is-still .sb-home__art > .art:first-child {
  --glow-opacity: 0.95;
}

/* The cottage in colour: brick walls and a teal roof, as the little house
 * in the first garden on the trail, and its wren painted to match. By
 * night the same colours in moonlight, its lines still pale ink. These are
 * the picture's own colours, like the scenes' in night.css and day.css;
 * the drawing (art/cottage.svg) names its parts by the ck-* classes below,
 * and each paints only if its colour is set. */
.sb-home__art {
  --ck-lawn: #1d3527;
  --ck-blade: #3f6a4c;
  --ck-wall: #6c4336;
  --ck-wall-shade: #4e3028;
  --ck-brick: #8a5a48;
  --ck-roof: #234846;
  --ck-roof-shade: #1a3836;
  --ck-shingle: #4f7b76;
  --ck-trim: #4b5261;
  --ck-glass: #182536;
  --ck-door: #3e2b23;
  --ck-wood: #4d3527;
  --ck-stone: #3d4553;
  --ck-clay: #5e4034;
  --ck-chimney: #6c4033;
  --ck-chimney-cap: #412920;
  --ck-brass: #8d6f36;
  --ck-leaf: #2f5439;
  --ck-bush: #25452f;
  --ck-bush-shade: #1b3625;
  --ck-bloom: #a8708e;
  --ck-cap: #85342a;
  --ck-stem: #8f9096;
  --ck-spot: #c9c4b8;
  --ck-wren: #5e4a3e;
  --ck-wren-wing: #46362d;
}

[data-theme="day"] .sb-home__art {
  --ck-lawn: #bcd495;
  --ck-blade: #7fa35e;
  --ck-wall: #df8b56;
  --ck-wall-shade: #b9673c;
  --ck-brick: #b75f35;
  --ck-roof: #4c8a80;
  --ck-roof-shade: #3a7068;
  --ck-shingle: #2f615b;
  --ck-trim: #f7eedb;
  --ck-glass: #bfd9e2;
  --ck-door: #7c4b2e;
  --ck-wood: #9c6945;
  --ck-stone: #d9d0bd;
  --ck-clay: #cb8b62;
  --ck-chimney: #cf7443;
  --ck-chimney-cap: #8f4a2c;
  --ck-brass: #cc9e40;
  --ck-leaf: #6f9d52;
  --ck-bush: #5f8f4b;
  --ck-bush-shade: #4a7639;
  --ck-bloom: #f2a3bf;
  --ck-cap: #cb442e;
  --ck-stem: #f5ecd8;
  --ck-spot: #fffaf0;
  --ck-wren: #9b6c47;
  --ck-wren-wing: #6f4b30;
}

.ck-lawn { fill: var(--ck-lawn, none); stroke: none; }
.ck-wall { fill: var(--ck-wall, none); stroke: none; }
.ck-wall-shade { fill: var(--ck-wall-shade, none); stroke: none; }
.ck-roof { fill: var(--ck-roof, none); stroke: none; }
.ck-roof-shade { fill: var(--ck-roof-shade, none); stroke: none; }
.ck-trim { fill: var(--ck-trim, none); stroke: none; }
.ck-glass { fill: var(--ck-glass, none); stroke: none; }
.ck-door { fill: var(--ck-door, none); stroke: none; }
.ck-wood { fill: var(--ck-wood, none); stroke: none; }
.ck-stone { fill: var(--ck-stone, none); stroke: none; }
.ck-clay { fill: var(--ck-clay, none); stroke: none; }
.ck-chimney { fill: var(--ck-chimney, none); stroke: none; }
.ck-chimney-cap { fill: var(--ck-chimney-cap, none); stroke: none; }
.ck-brass { fill: var(--ck-brass, none); stroke: none; }
.ck-bush { fill: var(--ck-bush, none); stroke: none; }
.ck-bush-shade { fill: var(--ck-bush-shade, none); stroke: none; }
.ck-cap { fill: var(--ck-cap, none); stroke: none; }
.ck-stem { fill: var(--ck-stem, none); stroke: none; }
.ck-spot { fill: var(--ck-spot, none); stroke: none; }
/* Texture drawn in the paint's own darker tone rather than ink: the
 * shingles (ink when unpainted), the bricks and the grass (not drawn at
 * all when unpainted). */
.ck-shingle { stroke: var(--ck-shingle, currentColor); }
.ck-brick { stroke: var(--ck-brick, none); }
.ck-blade { stroke: var(--ck-blade, none); }
/* Leaves and flowers keep their outlines. */
.ck-leaf { fill: var(--ck-leaf, none); }
.ck-bloom { fill: var(--ck-bloom, none); }

.sb-home__bird {
  position: absolute;
  width: 6.5%;
  left: 47%;
  top: 9.6%;
  --art-stroke: 2.6;
  --art-fill: var(--ck-wren);
  --art-shade: var(--ck-wren-wing);
}

/* Fireflies about the cottage by night (the night goes all the way down
 * the trail), butterflies by day. */
.sb-glim {
  position: absolute;
  left: calc(4% + mod(var(--i) * 37, 92) * 1%);
  top: calc(18% + mod(var(--i) * 29, 70) * 1%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f6ffc4;
  box-shadow: 0 0 6px 2px rgb(214 255 130 / 0.7), 0 0 18px 6px rgb(200 250 110 / 0.22);
  opacity: 0.3;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sb-glim {
    animation:
      sb-glim-drift calc(9s + var(--i) * 1.3s) var(--ease-float) calc(var(--i) * -2.1s) infinite alternate,
      sb-glim-glow calc(3.2s + var(--i) * 0.45s) ease-in-out calc(var(--i) * -0.9s) infinite;
  }
}

@keyframes sb-glim-drift {
  33% { translate: 18px -12px; }
  66% { translate: -10px -22px; }
  100% { translate: 12px 8px; }
}

@keyframes sb-glim-glow {
  0%, 100% { opacity: 0.15; }
  45%, 55% { opacity: 1; }
}

/* By day each is a small butterfly on the same drift, flapping: a
 * silhouette in its wing colour with a dark body down the middle. Fewer of
 * them, and never dimmed. */
[data-theme="day"] .sb-glim {
  width: 22px;
  height: 19px;
  margin: -9px 0 0 -11px;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent 46%, #2e2a24 46% 54%, transparent 54%),
    var(--wing, #f6d35e);
  box-shadow: none;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -18 44 38'%3E%3Cpath d='M0 0C-8-14-20-12-18-2C-16 4-6 4 0 0ZM0 0C-6 6-14 12-10 16C-6 18-2 10 0 0ZM0 0C8-14 20-12 18-2C16 4 6 4 0 0ZM0 0C6 6 14 12 10 16C6 18 2 10 0 0Z'/%3E%3Cpath d='M0-6V8' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 1;
}

[data-theme="day"] .sb-glim:nth-of-type(n + 5) {
  display: none;
}

[data-theme="day"] .sb-glim:nth-of-type(4n + 2) { --wing: #8fc1ec; }
[data-theme="day"] .sb-glim:nth-of-type(4n + 3) { --wing: #f39a5e; }
[data-theme="day"] .sb-glim:nth-of-type(4n) { --wing: #e9a3c4; }

@media (prefers-reduced-motion: no-preference) {
  [data-theme="day"] .sb-glim {
    animation:
      sb-glim-drift calc(9s + var(--i) * 1.3s) var(--ease-float) calc(var(--i) * -2.1s) infinite alternate,
      sb-glim-flap calc(0.17s + var(--i) * 0.02s) ease-in-out infinite alternate;
  }
}

@keyframes sb-glim-flap {
  to { scale: 0.22 1; }
}

.sb-home__head {
  width: min(100% - 2 * var(--gutter), 38rem);
  margin: var(--space-xl) auto var(--space-xl);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
}

.sb-home__welcome {
  font-size: var(--step-2);
  rotate: -2deg;
}

.sb-home__head .lede {
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

/* Plate II: the shelf as a specimen plate. */
.sb-plate-ii {
  position: relative;
  width: min(100% - 2 * var(--gutter), 70rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--color-surface);
  border: 1px solid color-mix(in oklab, var(--color-line) 30%, transparent);
  outline: 1px solid color-mix(in oklab, var(--color-line) 14%, transparent);
  outline-offset: -8px;
  box-shadow: 0 30px 60px -30px var(--color-shadow);
}

.sb-plate-ii__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--color-ink-soft);
}

.sb-plate-ii__title span {
  font-style: normal;
  font-size: var(--step--2);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* A solid leaf: painted the accent, its veins (ln-a) drawn in the ink
 * that reads on it. */
.sb-plate-ii__leaf {
  position: absolute;
  top: -2.2rem;
  right: clamp(1rem, 5vw, 4rem);
  width: 3.6rem;
  rotate: 24deg;
  color: var(--color-accent);
  --art-stroke: 1.6;
  --art-fill: var(--color-accent);
  --art-accent: var(--color-accent-ink);
}

.sb-figs {
  counter-reset: fig;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.sb-fig {
  position: relative;
  counter-increment: fig;
  display: grid;
  align-content: start;
  gap: var(--space-3xs);
  padding: var(--space-m) var(--space-s) var(--space-s);
  background: color-mix(in oklab, var(--color-surface) 70%, var(--color-bg));
  border: 1px solid var(--color-rule);
  box-shadow: 0 12px 22px -16px var(--color-shadow);
  rotate: calc((var(--r, 0)) * 1deg);
  transition: rotate var(--dur-m) var(--ease-out), translate var(--dur-m) var(--ease-out);
}

.sb-fig:nth-child(3n + 1) { --r: -0.8; }
.sb-fig:nth-child(3n + 2) { --r: 0.6; }
.sb-fig:nth-child(4n) { --r: -0.4; }

.sb-fig:hover {
  --r: 0;
  translate: 0 -3px;
}

.sb-tape {
  position: absolute;
  z-index: 1;
  top: -0.7rem;
  left: 50%;
  width: 4.5rem;
  height: 1.4rem;
  translate: -50% 0;
  rotate: -3deg;
  background: var(--sb-tape);
  border-inline: 1px dashed var(--sb-tape-edge);
  box-shadow: 0 1px 2px var(--color-shadow);
}

.sb-fig:nth-child(even) .sb-tape {
  rotate: 4deg;
}

.sb-fig__art {
  padding: 0 var(--space-m) var(--space-xs);
  color: var(--color-line);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-2xs);
}

.sb-fig__art .art {
  --art-stroke: 1.15;
  --glow-opacity: 0.8;
}

/* A small print of the specimen, like the trail's photographs but sized to
 * the card: tucked up under the card's tape, which holds it on, and tilted
 * against the card, straightening with it on hover. */
.sb-fig__print {
  position: relative;
  display: block;
  justify-self: center;
  width: min(100%, 12rem);
  margin: calc(0.25rem - var(--space-m)) 0 var(--space-xs);
  padding: 0.4rem 0.4rem 1.2rem;
  background: var(--sb-print-paper);
  box-shadow:
    0 1px 2px var(--color-shadow),
    0 14px 20px -12px var(--color-shadow);
  rotate: calc(var(--r, 0) * -1.6deg);
  transition: rotate var(--dur-m) var(--ease-out);
}

.sb-fig__print img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-bg-deep);
}

/* The photographs are unlit, grey (and by night dim), until the fairy's
 * light brings them colour:
 * each one on the trail as she reaches it (landing.js marks its entry
 * .is-lit), and the shelf's when she arrives at the cottage. Only while she
 * is flying: with no script or reduced motion they are in colour. */
.sb-walk.is-live .sb-print img,
.sb-walk.is-live .sb-fig__print img {
  filter: var(--photo-unlit, grayscale(1) brightness(0.7));
  transition: filter 1400ms var(--ease-out);
}

/* By day nothing is dark, only not yet coloured in. */
[data-theme="day"] .sb-walk {
  --photo-unlit: grayscale(1) contrast(0.92) brightness(1.04);
}

.sb-walk.is-live .sb-entry.is-lit .sb-print img,
.sb-walk.is-live.is-arrived .sb-fig__print img {
  filter: none;
}

.sb-fig__cap {
  font-size: var(--step-1);
}

.sb-fig__no::before {
  content: "Fig. " counter(fig) " \2014\00a0";
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

.sb-fig__latin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.sb-fig__note {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.sb-fig__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

/* ---- Phones: the trail runs down the left margin ----------------------------- */
@media (max-width: 47.99rem) {
  :root {
    --trail-gutter: 0px;
  }

  .sb-flyer {
    left: 62%;
    top: 74%;
  }

  .sb-chapter,
  .sb-entries,
  .sb-home__art {
    width: auto;
    margin-left: 3.4rem;
    margin-right: var(--gutter);
  }

  .sb-chapter {
    text-align: left;
    justify-items: start;
  }

  .sb-entries {
    max-width: 32rem;
    gap: 5rem;
  }

  /* An entry is one piece that fits the screen: the photograph, and beside
   * it the margin note pointing at it with the doodles at its foot; under
   * them the notes. The photograph is sized by the screen's height as well
   * as its width (--plate-w), so reaching an entry shows its notes with it;
   * the column beside it keeps at least --side for the note. */
  .sb-entry,
  .sb-entry--flip {
    --side: 5.75rem;
    --plate-w: min(clamp(9.5rem, (100svh - 23.5rem) * 0.8, 15rem), 100% - var(--side) - var(--space-xs));
    grid-template-columns: var(--plate-w) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "plate foot" "notes notes";
    column-gap: var(--space-xs);
    row-gap: var(--space-s);
  }

  /* Room above for the tape; the print's tilt is its only inset, so it
   * lines up with the notes under it. */
  .sb-plate {
    max-width: none;
    justify-self: stretch;
    padding: 1.35rem 0 0.2rem 0.2rem;
  }

  /* The note stands in the column's middle, clear of the print's tape,
   * and the doodles at its foot, level with the foot of the print. */
  .sb-foot,
  .sb-entry--flip .sb-foot {
    flex-direction: column;
    align-items: stretch;
    justify-self: stretch;
    max-width: none;
    margin: 0;
    padding: 2.4rem 0 0.4rem;
  }

  /* The words, then the arrow under them, curving down and across to the
   * photograph. */
  .sb-annot,
  .sb-entry--flip .sb-annot {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.15rem;
    max-width: 9rem;
    margin-block: auto;
    text-align: left;
    font-size: 1.2rem;
    line-height: 1;
    rotate: -3deg;
  }

  /* Long enough to reach across the gap and the print's border, so its
   * head lands on the photograph itself. */
  .sb-annot__arrow,
  .sb-entry--flip .sb-annot__arrow {
    width: 4rem;
    margin-left: -2.85rem;
    transform: none;
  }

  .sb-doodles {
    align-self: flex-end;
  }

  .sb-doodle--fern { width: 3.4rem; }
  .sb-doodle--shroom { width: 1.8rem; margin-left: -0.8rem; }
  .sb-doodle--grass { width: 2rem; }
  .sb-doodle--flower { width: 1.3rem; }

  .sb-notes,
  .sb-entry--flip .sb-notes {
    justify-self: stretch;
    max-width: none;
    padding: 0;
  }

  .sb-notes__meta {
    margin-bottom: var(--space-xs);
  }

  .sb-notes__note {
    margin-top: var(--space-xs);
  }

  .sb-notes__light {
    margin-top: var(--space-2xs);
  }

  .sb-home__head {
    width: auto;
    text-align: left;
    justify-items: start;
    margin-left: 3.4rem;
    margin-right: var(--gutter);
  }

  .sb-stamp {
    top: 1.1rem;
    right: 0.4rem;
    width: 4.4rem;
  }

  .sb-notes__name {
    font-size: var(--step-3);
    padding-right: 5rem;
  }

  .sb-fig__art {
    justify-self: center;
    width: min(100%, 12rem);
  }

  .sb-home__art > .art:first-child {
    --art-stroke: 1.5;
  }
}