/* margotalbury.com
   An evening on the island, top to bottom. Each page opens in a cover's own sky, with the sun setting on
   a coral horizon and the sea below it. The middle is porch-white daylight, for reading; the foot is
   ferry-navy night, with the stars out and the sign-up. Each series is a chapter in its own sky.
   Colours are sampled from Book 1's cover (PLAN.md, "The palette"); each book's and series' sky is
   added at the end of this file by build.py. Motion lives under .motion, which site.js sets only for
   readers who haven't asked for reduced motion; without it every element is simply in its place. */

:root {
  --navy: #071447;        /* the cover's title lettering */
  --navy-soft: #36406b;   /* secondary text on white, 9:1 */
  --coral: #fa876d;       /* the roof */
  --coral-hot: #f76f53;   /* the roof, pressed */
  --coral-deep: #c84a2e;  /* the roof in shadow: coral as text, 4.5:1 on white */
  --sky: #95ccf5;         /* the top of the sky */
  --haze: #f2e1d1;        /* the sky halfway down */
  --peach: #fdc89c;       /* low in the sky */
  --gold: #fed698;        /* the sun on the water */
  --porch: #fdfcfa;       /* the porch rail: the page */
  --brick: #7a3f2c;       /* the chimney, deepened: visited links */
  --night-text: #dfe3f2;  /* small text in the night, 13:1 */
  --rule: rgba(7, 20, 71, 0.14);

  --sky-top: var(--sky);
  --sky-mid: var(--haze);
  --sky-low: var(--peach);
  --horizon: var(--gold);

  --display: "Literata", Georgia, "Times New Roman", serif;
  --text: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wide: 76rem;
  --ease-out: cubic-bezier(0.2, 0.75, 0.2, 1);
  --sea-h: 2.75rem;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--porch);
  color: var(--navy);
  font: 400 1.1875rem/1.6 var(--text);
  font-kerning: normal;
  overflow-wrap: break-word;
  overflow-x: clip;
}

@media (min-width: 60em) {
  body { font-size: 1.25rem; }
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.9rem, 1.45rem + 1.4vw, 2.7rem); }
h3 { font-size: 1.45rem; line-height: 1.2; }

p { margin: 0 0 1em; }

cite { font-style: italic; }

a {
  color: var(--navy);
  text-decoration-line: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s;
}
a:visited { color: var(--brick); }
a:hover { text-decoration-color: currentColor; }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--navy);
  color: var(--porch);
  font-weight: 700;
}
.skip:focus { top: 0.75rem; }
.skip:visited { color: var(--porch); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
}

/* The sky's own blocks carry their side padding inside, so they line up with .wrap below them. */
.topbar, .horizon, .pagehead { max-width: calc(var(--wide) + 2 * var(--gutter)); }

/* ---------- The sky ---------- */

.sky {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-low) 86%, var(--horizon) 100%);
}

/* The air: the sun, the birds and the evening, clipped at the horizon. */
.sky__air {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sky__air::after {           /* evening coming on, as the page scrolls */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(64, 70, 140, 0.55) 0%, rgba(205, 110, 128, 0.35) 60%, rgba(250, 120, 90, 0.3) 100%);
  opacity: calc(var(--dusk, 0) * 0.5);
}

.sun {
  position: absolute;
  left: clamp(3rem, 14%, 16rem);
  bottom: 0;
  width: clamp(16rem, 34vw, 30rem);
  aspect-ratio: 1;
  transform: translate(-50%, 50%);
}
.sun__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaec 0 13%, rgba(255, 243, 214, 0.95) 15%, rgba(255, 226, 170, 0.6) 30%, rgba(253, 205, 160, 0.25) 46%, rgba(253, 200, 156, 0) 66%);
  transform: translateY(calc(var(--dusk, 0) * 26%));
}
.sky:not(.sky--hero) .sun { width: clamp(12rem, 24vw, 20rem); }

.birds {
  position: absolute;
  top: 14%;
  left: 58%;
  width: clamp(5rem, 9vw, 8rem);
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
}
.bird { transform-box: fill-box; transform-origin: center; }

.horizon-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 3px;
  background: var(--coral);
  transform-origin: left center;
  z-index: 1;
}

.topbar {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 0.75rem var(--gutter) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
}
.wordmark:visited { color: var(--navy); }

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}
.menu a:visited { color: var(--navy); }
.menu a:hover,
.menu a[aria-current] { text-decoration-color: var(--coral); }

/* The tall sky: a cover standing on the horizon. */
.horizon {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: clamp(1.75rem, 6vw, 5rem) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.sky--hero .horizon { min-height: min(46rem, calc(88vh - 4rem)); }

.horizon__text { padding-bottom: clamp(2.25rem, 5.5vw, 4.5rem); max-width: 42rem; align-self: center; }

.horizon__cover { align-self: end; }

.hook {
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.45rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 0.65em;
  max-width: 18em;
}

.title {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 0.45em;
}

.crumb {
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.hookline {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + 0.65vw, 1.65rem);
  font-weight: 500;
  line-height: 1.32;
  max-width: 30em;
  margin-bottom: 0.55em;
}

.lede {
  font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem);
  line-height: 1.5;
  max-width: 36em;
}

.status {
  font-weight: 600;
  margin-bottom: 1.25rem;
}

/* The short sky of the inner pages, with the page's title above the horizon. */
.pagehead {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 5rem) var(--gutter) clamp(2.25rem, 4.5vw, 3.5rem);
}
.pagehead h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16em;
}
.pagehead .lede { margin-bottom: 0; }

/* ---------- The sea ---------- */

.sea {
  position: relative;
  z-index: 1;
  height: var(--sea-h);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sky-low) 70%, var(--sky-top)) 0%,
    color-mix(in srgb, var(--sky-top) 45%, var(--porch)) 38%,
    var(--porch) 100%);
  overflow: hidden;
}
.sea--hero { --sea-h: clamp(5rem, 9vw, 8rem); }

/* The sun's path on the water, under the sun. */
.sea__path {
  position: absolute;
  top: 0;
  left: clamp(3rem, 14%, 16rem);
  width: clamp(7rem, 12vw, 11rem);
  height: 100%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(180deg, rgba(255, 250, 236, 0.9) 0 2px, rgba(255, 250, 236, 0) 2px 7px),
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 246, 222, 0.9), rgba(255, 236, 196, 0) 75%);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 30%, transparent 80%);
  opacity: calc(0.75 - var(--dusk, 0) * 0.6);
}

/* ---------- A cover on the shore ---------- */

.stage {
  position: relative;
  width: clamp(14rem, 25vw, 21rem);
}
.stage .cover img {
  width: 100%;
  box-shadow: 0 1.6rem 2.6rem -1.3rem rgba(7, 20, 71, 0.6);
}

.tilt {
  position: relative;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.tilt.is-tilting { transition: transform 0.08s linear; }
.tilt__sheen {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.tilt.is-tilting .tilt__sheen { opacity: 1; }

.reflection {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  height: clamp(5rem, 9vw, 8rem);
  overflow: hidden;
  opacity: 0.55;
  filter: blur(1.2px) saturate(0.9);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 90%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 90%);
  pointer-events: none;
}
.reflection .cover { transform: scaleY(-1); }
.reflection img { width: 100%; }

/* ---------- Buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.7rem 1.45rem;
  border: 2px solid var(--coral);
  border-radius: 0.6rem;
  background: var(--coral);
  color: var(--navy);
  font: 700 1.0625rem/1.2 var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.button:visited { color: var(--navy); }
.button:hover {
  background: var(--coral-hot);
  border-color: var(--coral-hot);
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem -0.6rem rgba(7, 20, 71, 0.5);
}
.button:active { transform: none; box-shadow: none; }

.button--line {
  background: rgba(253, 252, 250, 0.35);
  border-color: var(--navy);
}
.button--line:hover { background: rgba(253, 252, 250, 0.75); border-color: var(--navy); }

/* ---------- Daylight ---------- */

.band { padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.prose { max-width: 38rem; }
.prose .big {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem);
  font-weight: 500;
  line-height: 1.38;
}
.prose h2 { margin-top: 0; }
.prose h2:not(:first-child) { margin-top: 1.6em; }
.questions h3 { margin-top: 1.5em; }
.questions h3:first-child { margin-top: 0; }

.series-meta { color: var(--navy-soft); }

/* ---------- Chapters: one series each, in its own sky ---------- */

.chapter {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 9vw, 7.5rem) var(--gutter);
  overflow: hidden;
}
.chapter + .chapter { border-top: 1px solid var(--rule); }

.chapter__sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: 75%;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sky-top) 38%, var(--porch)) 0%,
    color-mix(in srgb, var(--sky-low) 26%, var(--porch)) 55%,
    var(--porch) 100%);
}

.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.chapter__name {
  font-size: clamp(2.7rem, 1.7rem + 4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 0.3em;
}
.chapter__name a { text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.chapter__name a:visited { color: var(--navy); }

.chapter__meta { color: var(--navy-soft); }

.chapter__hook {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.12rem + 0.6vw, 1.6rem);
  line-height: 1.38;
  max-width: 30em;
  margin: 1.25rem 0 1.5rem;
}

.chapter__books {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  max-width: 34rem;
  border-top: 1px solid var(--rule);
}
.chapter__books li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: 0 0.9rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.chapter__n { font-family: var(--display); font-weight: 600; color: var(--coral-deep); }
.chapter__books a { font-weight: 600; }
.chapter__tbc { color: var(--navy-soft); }
.chapter__status { font-size: 0.95rem; color: var(--navy-soft); text-align: right; }
.chapter__teaser { max-width: 34rem; }

/* The fan: a series' covers dealt out like a hand of cards. */
.fan {
  position: relative;
  height: clamp(17rem, 34vw, 27rem);
  min-width: 0;
}
.fan__card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(9rem, 16vw, 14rem);
  transform-origin: 50% 120%;
  transition: transform 0.9s var(--ease-out);
}
.fan__card .cover img { width: 100%; box-shadow: 0 1.2rem 2rem -1rem rgba(7, 20, 71, 0.55); }
.fan__card:nth-child(1) { z-index: 3; transform: translateX(-116%) rotate(-6deg); }
.fan__card:nth-child(2) { z-index: 2; transform: translateX(-50%) translateY(-5%); }
.fan__card:nth-child(3) { z-index: 1; transform: translateX(16%) rotate(6deg); }
.fan__card:nth-child(n + 4) { display: none; }
.fan--1 .fan__card:nth-child(1) { transform: translateX(-50%); }
.fan--2 .fan__card:nth-child(1) { transform: translateX(-85%) rotate(-5deg); }
.fan--2 .fan__card:nth-child(2) { transform: translateX(-15%) rotate(5deg); }

@media (hover: hover) {
  .fan:hover .fan__card:nth-child(1) { transform: translateX(-128%) rotate(-9deg); }
  .fan:hover .fan__card:nth-child(2) { transform: translateX(-50%) translateY(-9%); }
  .fan:hover .fan__card:nth-child(3) { transform: translateX(28%) rotate(9deg); }
  .fan__card:hover { z-index: 4; }
}

/* A teaser: the next series, its sun not yet up. */
.chapter--teaser {
  background: linear-gradient(180deg, var(--porch) 0%, color-mix(in srgb, var(--sky-mid) 38%, var(--porch)) 100%);
}
.chapter--teaser .chapter__name { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); }

.dawn {
  position: relative;
  justify-self: center;
  width: min(100%, 26rem);
  aspect-ratio: 5 / 4;
  border-radius: 1.25rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-low) 72%, var(--horizon) 78%);
  box-shadow: 0 1.5rem 3rem -2rem rgba(7, 20, 71, 0.6);
}
.dawn::after {               /* the sea, in front of the sun */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sky-low) 60%, var(--sky-top)) 0%, color-mix(in srgb, var(--sky-top) 70%, var(--navy)) 100%);
}
.dawn__sun {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaec 0 26%, rgba(255, 236, 200, 0.85) 30%, rgba(253, 205, 160, 0.3) 52%, rgba(253, 200, 156, 0) 70%);
  transform: translate(-50%, -56%);
}
.dawn__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 78%;
  height: 3px;
  background: var(--coral);
  z-index: 1;
}

/* ---------- Books ---------- */

.jump ul {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.jump a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }

.band--series + .band--series { padding-top: 0; }
.series-head { margin-bottom: 1rem; }
.series-head h2 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); letter-spacing: -0.02em; margin-bottom: 0.2em; }
.series-head h2 a:visited { color: var(--navy); }

.booklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 56rem;
}
.booklist__item {
  display: grid;
  grid-template-columns: clamp(7rem, 16vw, 11rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}
.booklist__cover .cover { transition: transform 0.4s var(--ease-out); }
.booklist__cover .cover img { box-shadow: 0 0.9rem 1.6rem -0.9rem rgba(7, 20, 71, 0.55); }
.booklist__item:hover .booklist__cover .cover { transform: translateY(-4px) rotate(-1.5deg); }
.booklist__cover--blank,
.strip__blank {
  aspect-ratio: 1600 / 2560;
  border-radius: 0.35rem;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sky-top) 55%, var(--porch)), color-mix(in srgb, var(--sky-low) 55%, var(--porch)));
  border: 1px dashed rgba(7, 20, 71, 0.25);
}
.booklist__cover--blank span,
.strip__blank span {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  color: rgba(7, 20, 71, 0.35);
}
.booklist__item.is-planned { padding: 1.5rem 0; }
.booklist__number { margin: 0 0 0.15rem; font-size: 1rem; color: var(--navy-soft); }
.booklist__text h3 { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.9rem); margin-bottom: 0.4em; }
.booklist__status { font-weight: 600; margin: 0; }

/* A book's page: what to expect, beside the description; then the series, in order. */
.split--book { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.prose--blurb p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 600;
  float: left;
  font-size: 3.4em;
  line-height: 0.85;
  margin: 0.08em 0.1em 0 0;
  color: var(--coral-deep);
}

.facts {
  border-top: 3px solid var(--coral);
  padding-top: 1.25rem;
  position: sticky;
  top: 1.5rem;
}
.facts h2 { font-size: 1.6rem; }
.facts dl { margin: 0; }
.facts dl > div { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
.facts__stores { margin-top: 1rem; }

.band--strip {
  background: linear-gradient(180deg, var(--porch), color-mix(in srgb, var(--sky-top) 22%, var(--porch)));
}
.strip__heading { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); }
.strip {
  list-style: none;
  margin: 1.5rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 28vw), 1fr));
  gap: 1.75rem clamp(0.75rem, 2vw, 1.75rem);
  max-width: 60rem;
}
.strip__item .cover { transition: transform 0.4s var(--ease-out); }
.strip__item .cover img { box-shadow: 0 0.8rem 1.4rem -0.9rem rgba(7, 20, 71, 0.55); }
.strip__item:hover .cover { transform: translateY(-4px); }
.strip__item.is-current .cover img { outline: 3px solid var(--coral); outline-offset: 4px; }
.strip__label { margin: 0.8rem 0 0.1rem; font-size: 0.95rem; color: var(--navy-soft); }
.strip__title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.25; }
.strip__next { font-size: 1.1rem; }

/* About and the newsletter: short promises, each with a small sun on its horizon. */
.promises {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 38rem;
}
.promises li {
  padding: 0.9rem 0 0.9rem 1.6rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.promises li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 0.7rem;
  height: 0.35rem;
  border-radius: 0.35rem 0.35rem 0 0;
  background: var(--coral);
}
.promises li:first-child { padding-top: 0; }
.promises li:first-child::before { top: 0.55em; }

/* ---------- Merrow Island: the ferry board ---------- */

.board {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.04), transparent 60%),
    var(--navy);
  color: #f6f4ee;
  border: 0.6rem solid #cfd5de;
  border-radius: 0.5rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1.5rem 3rem -2rem rgba(7, 20, 71, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-feature-settings: "tnum";
}
.board__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--gold);
  border-bottom: 1px solid rgba(246, 244, 238, 0.25);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}
.board__rows { list-style: none; margin: 0; padding: 0; }
.board__rows li {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr) auto;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  padding: 0.7rem 0;
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem);
}
.board__rows li + li { border-top: 1px dashed rgba(246, 244, 238, 0.16); }
.board__n { color: var(--gold); }
.board__status { color: #c9d3ec; font-size: 0.85em; text-align: right; }
.board a { color: #f6f4ee; text-decoration-color: var(--coral); }
.board a:visited { color: #f6f4ee; }

/* Merrow Island: the guide and the family. */
.guide {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
}
.guide > div, .family > div {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.guide dt, .family dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.guide dd, .family dd { margin: 0; }
.family { margin: 0; }

.horizon--series .fan--hero { height: clamp(15rem, 28vw, 23rem); width: clamp(20rem, 38vw, 34rem); }
.horizon--series .fan--hero .fan__card { width: clamp(8rem, 13vw, 12rem); }

/* ---------- Night ---------- */

.night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #16215c 0%, var(--navy) 38%);
  color: var(--porch);
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) 2rem;
}
.night__stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.6;
  background-image:
    radial-gradient(1.4px 1.4px at 6% 22%, #fff, transparent),
    radial-gradient(1px 1px at 14% 64%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 23% 12%, #fff, transparent),
    radial-gradient(1px 1px at 31% 48%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 38% 80%, #fff, transparent),
    radial-gradient(1px 1px at 46% 26%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 54% 9%, #fff, transparent),
    radial-gradient(1px 1px at 61% 58%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 69% 33%, #fff, transparent),
    radial-gradient(1px 1px at 76% 74%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 84% 16%, #fff, transparent),
    radial-gradient(1px 1px at 91% 52%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 97% 30%, #fff, transparent),
    radial-gradient(1px 1px at 10% 90%, #fff, transparent),
    radial-gradient(1px 1px at 50% 92%, #fff, transparent),
    radial-gradient(1px 1px at 88% 88%, #fff, transparent);
}
.night--page { padding-bottom: clamp(3rem, 7vw, 5rem); }
.night a { color: var(--porch); text-decoration-color: var(--coral); }
.night a:visited { color: #f9d6cb; }
.night :focus-visible { outline-color: var(--gold); }

.signup {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.signup h2 { color: var(--porch); font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.signup__text p { color: var(--night-text); max-width: 34rem; margin-bottom: 0; }
.signup fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.signup label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.signup__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.signup input[type="email"] {
  flex: 1 1 14rem;
  min-height: 52px;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--porch);
  border-radius: 0.6rem;
  background: var(--porch);
  color: var(--navy);
  font: 400 1.125rem/1.3 var(--text);
}
.signup fieldset:disabled input,
.signup fieldset:disabled .button { cursor: not-allowed; }
.signup__small { font-size: 1rem; color: var(--night-text); margin: 0.75rem 0 0; }

.night__foot {
  max-width: var(--wide);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(253, 252, 250, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 2rem;
  font-size: 1rem;
  color: var(--night-text);
}
.night__foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.night__foot nav a { display: inline-flex; align-items: center; min-height: 48px; }
.night__foot p { margin: 0; }
.night--page + .night { padding-top: 0; }
.night--page + .night .night__foot { margin-top: 0; }

/* ---------- Motion (only with .motion, set by site.js) ---------- */

/* 1. The arrival: the sun settles, the horizon draws, the cover comes up onto the shore. */
.motion .sun { transform: translate(-50%, 64%); opacity: 0.4; }
.motion .horizon-line { transform: scaleX(0); }
.motion .stage { opacity: 0; transform: translateY(2.25rem); }
.motion .reflection { opacity: 0; }
.motion .horizon__text > *,
.motion .pagehead > * { opacity: 0; transform: translateY(0.8rem); }
.motion .horizon--series .fan__card { transform: translateX(-50%) translateY(14%) rotate(0); opacity: 0; }

.motion.is-arrived .sun { transform: translate(-50%, 50%); opacity: 1; transition: transform 2.2s var(--ease-out), opacity 1.6s ease; }
.motion.is-arrived .horizon-line { transform: scaleX(1); transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; }
.motion.is-arrived .stage { opacity: 1; transform: none; transition: opacity 0.9s ease 0.45s, transform 1.2s var(--ease-out) 0.45s; }
.motion.is-arrived .reflection { opacity: 0.55; transition: opacity 1.4s ease 1.1s; }
.motion.is-arrived .horizon__text > *,
.motion.is-arrived .pagehead > * { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.9s var(--ease-out); }
.motion.is-arrived .horizon__text > :nth-child(2), .motion.is-arrived .pagehead > :nth-child(2) { transition-delay: 0.12s; }
.motion.is-arrived .horizon__text > :nth-child(3), .motion.is-arrived .pagehead > :nth-child(3) { transition-delay: 0.24s; }
.motion.is-arrived .horizon__text > :nth-child(4) { transition-delay: 0.36s; }
.motion.is-arrived .horizon__text > :nth-child(5) { transition-delay: 0.48s; }
.motion.is-arrived .horizon__text > :nth-child(6) { transition-delay: 0.6s; }
.motion.is-arrived .horizon--series .fan__card { opacity: 1; transition: transform 1.1s var(--ease-out), opacity 0.6s ease; }
.motion.is-arrived .horizon--series .fan__card:nth-child(1) { transform: translateX(-116%) rotate(-6deg); transition-delay: 0.5s; }
.motion.is-arrived .horizon--series .fan__card:nth-child(2) { transform: translateX(-50%) translateY(-5%); transition-delay: 0.62s; }
.motion.is-arrived .horizon--series .fan__card:nth-child(3) { transform: translateX(16%) rotate(6deg); transition-delay: 0.74s; }

/* Two gulls cross the sky once, and are gone. */
.motion .birds { left: 0; transform: translateX(-12rem); }
.motion.is-arrived .birds { animation: fly 24s linear 1.2s 1 both; }
.motion .bird { animation: flap 0.85s ease-in-out 30 alternate; }
.motion .bird--two { animation-delay: 0.3s; }
@keyframes fly {
  from { transform: translateX(-12rem) translateY(0); }
  45% { transform: translateX(48vw) translateY(-1.5rem); }
  to { transform: translateX(110vw) translateY(0.75rem); }
}
@keyframes flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.45); }
}

/* The sun's path glitters. */
.motion .sea__path { animation: glitter 3.2s ease-in-out infinite alternate; }
@keyframes glitter {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 4px, 0 0; }
}

/* 3. Reveals: the fan is dealt, the teaser's sun rises a little, the board flips (site.js). */
.motion .chapter.reveal:not(.is-in) .fan__card { transform: translateX(-50%) translateY(10%) rotate(0); opacity: 0; }
.motion .chapter.reveal .fan__card { transition: transform 1s var(--ease-out), opacity 0.6s ease; }
.motion .chapter.reveal.is-in .fan__card:nth-child(2) { transition-delay: 0.1s; }
.motion .chapter.reveal.is-in .fan__card:nth-child(3) { transition-delay: 0.2s; }
.motion .chapter.reveal:not(.is-in) .chapter__text > * { opacity: 0; transform: translateY(0.8rem); }
.motion .chapter.reveal .chapter__text > * { transition: opacity 0.8s ease, transform 0.9s var(--ease-out); }
.motion .chapter.reveal.is-in .chapter__text > :nth-child(2) { transition-delay: 0.08s; }
.motion .chapter.reveal.is-in .chapter__text > :nth-child(3) { transition-delay: 0.16s; }
.motion .chapter.reveal.is-in .chapter__text > :nth-child(4) { transition-delay: 0.24s; }
.motion .chapter.reveal.is-in .chapter__text > :nth-child(5) { transition-delay: 0.32s; }
.motion .dawn__sun { transform: translate(-50%, -22%); transition: transform 3.2s var(--ease-out) 0.3s; }
.motion .is-in .dawn__sun { transform: translate(-50%, -56%); }

/* The stars come out slowly, and keep a faint twinkle. */
.motion .night__stars { animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle {
  from { opacity: 0.4; }
  to { opacity: 0.75; }
}

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

@media (max-width: 56em) {
  .horizon { grid-template-columns: minmax(0, 1fr); }
  .sky--hero .horizon { min-height: 0; }
  .horizon__text { padding-bottom: 0.75rem; }
  .horizon__cover { justify-self: center; }
  .stage { width: min(15rem, 60vw); }
  .reflection { height: clamp(4rem, 14vw, 5.5rem); }
  .split, .split--book, .signup, .chapter__grid { grid-template-columns: minmax(0, 1fr); }
  .facts { position: static; }
  .fan { height: clamp(15rem, 62vw, 21rem); }
  .fan__card { width: min(9.5rem, 34vw); }
  .horizon--series .fan--hero { width: 100%; }
}

@media (max-width: 30em) {
  .topbar { padding-top: 0.5rem; }
  .menu ul { gap: 0 1.1rem; }
  .lede { font-size: 1.125rem; }
  .button { padding: 0.7rem 1rem; font-size: 1rem; }
  .board__rows li { grid-template-columns: 2ch minmax(0, 1fr); }
  .board__status { grid-column: 2; text-align: left; }
  .chapter__books li { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .chapter__status { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

@media print {
  .sky, .night, .sea { background: none; color: #000; }
  .sky__air, .menu, .signup, .skip, .reflection, .horizon-line, .night__stars { display: none; }
}

/* Skies, one for each series and book (written by build.py from site.json) */
.sky-series-merrow-island{--sky-top:#95ccf5;--sky-mid:#f2e1d1;--sky-low:#fdc89c;--horizon:#fed698}
.sky-series-next{--sky-top:#b9cdea;--sky-mid:#efdfe6;--sky-low:#f9d3c4;--horizon:#fbe1b0}
.sky-book-the-cottage-off-the-books{--sky-top:#95ccf5;--sky-mid:#f2e1d1;--sky-low:#fdc89c;--horizon:#fed698}
.sky-book-nothing-to-spare{--sky-top:#d3dbe6;--sky-mid:#f6e4cf;--sky-low:#fcda9f;--horizon:#f3c98f}
.sky-book-all-accounted-for{--sky-top:#7ea8dd;--sky-mid:#c6d2df;--sky-low:#f5e0c2;--horizon:#f4c8a5}