/* ==========================================================================
   Aurava Privacy Policy
   The app's paper world, set for reading: the same page, sheet, plum ink,
   Cormorant for display and Figtree for text. In dark mode the page becomes
   the reading room. No script: the contents rail and the "now reading" label
   follow the page with CSS scroll timelines where the browser has them.
   ========================================================================== */

@font-face {
  font-family: Cormorant;
  src: url("/assets/fonts/CormorantGaramond-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Cormorant;
  src: url("/assets/fonts/CormorantGaramond-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Figtree;
  src: url("/assets/fonts/Figtree-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Figtree;
  src: url("/assets/fonts/Figtree-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 88%;
  ascent-override: 104%;
  descent-override: 32%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 100%;
}

/* Tokens ------------------------------------------------------------------ */

:root {
  --page: #f5f0fc;
  --sheet: #faf6fd;
  --ink: #2d0d3b;          /* 15.2:1 on page */
  --ink-2: #745889;        /* 5.36:1 on page, 5.62:1 on sheet */
  --accent: #a567b6;       /* decorative only, never text */
  --accent-deep: #8e53a2;  /* 4.80:1 on page, 5.03:1 on sheet */
  --blush: #efafd3;
  --heading-2: var(--accent-deep);
  --line: rgba(45, 13, 59, 0.1);
  --line-strong: rgba(45, 13, 59, 0.16);
  --note: #f8e8f2;         /* ink 14:1 on it; only ink is set on it */
  --note-line: rgba(160, 91, 173, 0.22);
  --mark: rgba(239, 175, 211, 0.55);
  --code: rgba(165, 103, 182, 0.12);
  --shadow: 0 22px 40px -30px rgba(45, 13, 59, 0.34), 0 0 0 1px rgba(45, 13, 59, 0.045);
  --shadow-soft: 0 16px 30px -26px rgba(45, 13, 59, 0.3), 0 0 0 1px rgba(45, 13, 59, 0.04);
  --bar-bg: rgba(245, 240, 252, 0.84);
  --paper: url("/assets/aurava/paper-page.webp");
  --paper-tex: url("/assets/aurava/paper.webp");
  --tex-opacity: 0.35;
  --petal-opacity: 0.75;
  --deep: #31253f;
  --deep-2: #231a2e;
  --r-ink: #f6eaf7;
  --r-ink-2: #c4b6c9;

  --serif: Cormorant, "Cormorant Fallback", Georgia, serif;
  --sans: Figtree, "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gutter: clamp(20px, 5.2vw, 64px);
  --bar-h: 58px;
  /* One reading column; on wide screens the contents rail sits beside it,
     and the bar, the text and the footer all share the same frame. */
  --col: 41rem;
  --rail: 250px;
  --col-gap: clamp(56px, 6vw, 104px);
  --frame: var(--col);
  --inset: max(var(--gutter), calc((100% - var(--frame)) / 2));

  color-scheme: light dark;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #231a2e;
    --sheet: #2d2239;
    --ink: #f6eaf7;          /* 14.3:1 on page, 12.7:1 on sheet */
    --ink-2: #c4b6c9;        /* 8.6:1 on page, 7.7:1 on sheet */
    --accent: #ba72c8;
    --accent-deep: #efafd3;  /* links and marks: 9.3:1 on page */
    --heading-2: #efafd3;
    --line: rgba(246, 234, 247, 0.1);
    --line-strong: rgba(246, 234, 247, 0.16);
    --note: #3a2a45;
    --note-line: rgba(239, 175, 211, 0.24);
    --mark: rgba(239, 175, 211, 0.22);
    --code: rgba(239, 175, 211, 0.12);
    --shadow: 0 24px 44px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(246, 234, 247, 0.06);
    --shadow-soft: 0 18px 34px -28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(246, 234, 247, 0.05);
    --bar-bg: rgba(35, 26, 46, 0.82);
    --paper: none;
    --tex-opacity: 0;
    --petal-opacity: 0.22;
  }
}

/* Base -------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--page);
  color: var(--ink);
  scroll-padding-top: calc(var(--bar-h) + 20px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  font: 400 17px/1.66 var(--sans);
  color: var(--ink);
  background: var(--page) var(--paper) center top / 420px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(ellipse 80% 40% at 85% 0%, rgba(165, 103, 182, 0.16), transparent 70%),
      radial-gradient(ellipse 60% 30% at 0% 12%, rgba(239, 175, 211, 0.06), transparent 70%),
      var(--page);
  }
}
h1,
h2,
h3,
p,
ul,
ol,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: var(--accent-deep);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 0.2s var(--ease);
}
a:hover {
  text-decoration-color: currentColor;
}
::selection {
  background: #e6d2f0;
  color: #2d0d3b;
}
:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
code {
  font: 400 0.84em/1.4 var(--mono);
  padding: 0.08em 0.3em;
  border-radius: 5px;
  background: var(--code);
  overflow-wrap: anywhere;
}
mark {
  color: inherit;
  background: linear-gradient(transparent 56%, var(--mark) 56%, var(--mark) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.06em;
}
.skip {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -80px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus {
  top: 10px;
}

/* The bar: the wordmark, where you are, and the way back to the contents --- */

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--bar-h);
  padding: 0 var(--inset);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.bar-word {
  font: 500 27px/1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 0 10px;
}
.bar-now {
  flex: 1;
  min-width: 0;
  display: grid;
  font: 500 13px/1.2 var(--sans);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
}
.bar-now > span {
  grid-area: 1 / 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bar-now i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  margin-right: 6px;
}
.now {
  opacity: 0;
}
.bar-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--sheet);
  color: var(--ink);
  font: 500 13.5px/1 var(--sans);
  text-decoration: none;
  position: relative;
}
.bar-link::before {
  /* a 44px tap target around a quieter pill */
  content: "";
  position: absolute;
  inset: -5px -2px;
}
.bar-link:hover {
  border-color: var(--accent-deep);
}

/* Page -------------------------------------------------------------------- */

.page {
  position: relative;
  overflow-x: clip;
}
.petals {
  position: absolute;
  top: calc(-1 * var(--bar-h) + 6px);
  right: -34px;
  width: clamp(170px, 30vw, 300px);
  height: auto;
  opacity: var(--petal-opacity);
  pointer-events: none;
  z-index: 0;
}
.layout {
  position: relative;
  z-index: 1;
  max-width: calc(var(--frame) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Title ------------------------------------------------------------------- */

.intro {
  padding: clamp(48px, 9vw, 96px) 0 clamp(32px, 5vw, 48px);
}
.title {
  font: 500 clamp(58px, 8.4vw, 104px) / 0.9 var(--serif);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.title em {
  font-style: italic;
  color: var(--accent-deep);
}
.byline {
  margin-top: 22px;
  font-size: 16px;
  color: var(--ink-2);
}
.updated {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--sheet);
  box-shadow: var(--shadow-soft);
  font-size: 14px;
  line-height: 1.3;
}
.updated strong {
  font-weight: 500;
}
.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blush) 35%, transparent);
}

/* Cards share the paper's sheet, its grain and a soft lift ----------------- */

.summary,
.toc,
.sheet-list,
.consent,
.requests > li,
.letter {
  position: relative;
  background: var(--sheet);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.summary::before,
.letter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--paper-tex) center / 300px;
  opacity: var(--tex-opacity);
  pointer-events: none;
}

/* The short version ------------------------------------------------------- */

.summary {
  border-radius: 26px;
  padding: 26px 22px 40px;
  overflow: hidden;
}
.summary::after {
  /* the Journal card's lifted corner */
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52px;
  height: 52px;
  background: url("/assets/aurava/CornerFold.svg") center / contain no-repeat;
  filter: drop-shadow(-3px -3px 5px rgba(45, 13, 59, 0.12));
}
.summary h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 clamp(30px, 3vw, 36px) / 1.05 var(--serif);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.summary h2 img {
  width: 26px;
  height: 26px;
  flex: none;
}
.summary li {
  position: relative;
  padding: 15px 0 15px 26px;
  border-top: 1px solid var(--line);
}
.summary li:first-child {
  border-top: 0;
}

/* A small leaf as the list marker, drawn rather than typed */
.summary li::before,
.sheet-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(15px + 0.5lh - 5px);
  width: 10px;
  height: 10px;
  border-radius: 0 80% 0 80%;
  background: linear-gradient(135deg, var(--blush), var(--accent));
}

/* Contents ---------------------------------------------------------------- */

.toc {
  margin-top: 28px;
  border-radius: 26px;
  padding: 24px 18px 14px 20px;
}
.toc-title {
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 8px 2px;
}
.toc ol {
  position: relative;
}
/* The thread the sections hang on, as on the Journal timeline */
.toc ol::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
  opacity: 0.6;
}
.toc a {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  align-items: baseline;
  min-height: 44px;
  padding: 10px 0 10px 24px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15.5px;
  line-height: 1.35;
  border-radius: 12px;
  transition: color 0.2s var(--ease);
}
.toc a::before {
  content: "";
  position: absolute;
  left: 1px;
  top: calc(10px + 0.675em - 4.5px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sheet);
  border: 1.5px solid var(--accent);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.toc a:hover::before {
  background: var(--accent);
}
.toc-num {
  font: 500 12.5px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
}
.toc a:hover .toc-text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* Sections ---------------------------------------------------------------- */

.doc {
  padding-bottom: clamp(56px, 8vw, 96px);
}
.sec {
  padding-top: clamp(56px, 8vw, 88px);
}
.sec-num {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 13px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
}
.sec-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}
.sec h2 {
  margin: 14px 0 20px;
  font: 500 clamp(34px, 2.2vw + 24px, 46px) / 1.04 var(--serif);
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}
.sec p {
  margin-bottom: 1em;
}
.sec p:last-child {
  margin-bottom: 0;
}
.sec-lede {
  font-size: 18.5px;
  line-height: 1.6;
}
.sub {
  margin-top: 44px;
}
.sub h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font: 500 clamp(27px, 1vw + 23px, 31px) / 1.1 var(--serif);
  letter-spacing: -0.005em;
  color: var(--heading-2);
}

/* A grouped list, like a Settings group ----------------------------------- */

.sheet-list {
  margin: 22px 0 24px;
  border-radius: 22px;
  padding: 4px 20px;
}
.sheet-list li {
  position: relative;
  padding: 15px 0 15px 26px;
  border-top: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.58;
}
.sheet-list li:first-child {
  border-top: 0;
}
.sheet-list li::before {
  top: calc(15px + 0.79em - 5px);
}
/* What Aurava never does: a quiet "none" mark */
.never-list li::before {
  left: 0;
  top: calc(15px + 0.79em - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-deep);
  background: linear-gradient(135deg, transparent 44%, var(--accent-deep) 44%, var(--accent-deep) 56%, transparent 56%);
}

/* The consent screen's own words ------------------------------------------ */

.consent {
  margin: 24px 0 24px;
  border-radius: 24px;
  padding: 26px 22px 22px;
  overflow: hidden;
}
.consent::before {
  content: "\201C";
  position: absolute;
  top: -14px;
  right: 16px;
  font: italic 500 120px/1 var(--serif);
  color: var(--blush);
  opacity: 0.7;
  z-index: -1;
}
.consent p {
  margin: 0;
}
.consent span {
  display: block;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--accent);
  font: italic 500 22px/1.32 var(--serif);
  color: var(--ink);
}
.consent span + span {
  margin-top: 10px;
}

/* Three requests, three cards --------------------------------------------- */

.requests {
  counter-reset: req;
  display: grid;
  gap: 14px;
  margin: 22px 0 24px;
}
.requests > li {
  counter-increment: req;
  border-radius: 22px;
  padding: 20px 20px 22px;
  font-size: 16.5px;
  line-height: 1.6;
}
.requests > li::before {
  content: counter(req, decimal-leading-zero);
  display: block;
  font: 500 12.5px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.requests strong {
  display: block;
  margin-bottom: 6px;
  font: 500 25px/1.15 var(--serif);
  color: var(--ink);
}

/* Please read this part --------------------------------------------------- */

.sub-note {
  padding: 24px 22px 24px;
  border-radius: 24px;
  background: var(--note);
  box-shadow: inset 0 0 0 1px var(--note-line);
}
.sub-note h3 {
  color: var(--ink);
}
.sub-note h3 img {
  width: 26px;
  height: 26px;
  flex: none;
}
.sub-note p {
  color: var(--ink);
}

/* Contact, as a letter ---------------------------------------------------- */

.sec-contact {
  /* tall enough that the last section can reach the reading line */
  min-height: 50vh;
}
.letter {
  border-radius: 26px;
  padding: 26px 22px 30px;
  overflow: hidden;
}
.letter p {
  position: relative;
  max-width: 20em;
}
.contact-line {
  margin-top: 10px;
  font: italic 500 clamp(32px, 2.4vw + 22px, 46px) / 1.1 var(--serif);
  overflow-wrap: anywhere;
}
.letter-art {
  position: absolute;
  z-index: -1;
  right: -34px;
  bottom: -58px;
  width: 124px;
  height: auto;
  opacity: 0.85;
  transform: rotate(-12deg);
}

/* Footer, the night again, as on the Aurava page -------------------------- */

.foot {
  background: var(--deep-2);
  color: var(--r-ink-2);
  padding: 0 var(--inset) calc(36px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(246, 234, 247, 0.08);
}
.foot-inner {
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 28px;
  font-size: 14.5px;
}
.foot-word {
  font: 500 30px/1 var(--serif);
  color: var(--r-ink);
  text-decoration: none;
}
.foot-nav {
  margin-left: auto;
  display: flex;
  gap: 24px;
}
.foot-nav a {
  color: var(--r-ink);
  text-decoration-color: rgba(246, 234, 247, 0.4);
  padding: 10px 0;
}
.foot-copy {
  width: 100%;
  margin: 0;
  font-size: 13.5px;
}
.foot :focus-visible {
  outline-color: var(--r-ink);
}

/* Wider screens: the contents become a rail beside the text --------------- */

@media (min-width: 720px) {
  .summary {
    padding: 34px 34px 44px;
  }
  .toc {
    padding: 26px 26px 16px 28px;
  }
  .toc ol {
    columns: 2;
    column-gap: 28px;
  }
  .toc li {
    break-inside: avoid;
  }
  .toc ol::before {
    display: none;
  }
  .consent,
  .sub-note,
  .letter {
    padding-left: 30px;
    padding-right: 30px;
  }
  .letter-art {
    width: 190px;
  }
}

@media (min-width: 1080px) {
  :root {
    --frame: calc(var(--rail) + var(--col-gap) + var(--col));
  }
  body {
    font-size: 18px;
  }
  .bar-link,
  .now {
    display: none;
  }
  .bar-now .now-default {
    opacity: 1 !important;
  }
  .layout {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--col-gap);
  }
  .intro {
    grid-column: 2;
    grid-row: 1;
  }
  .summary {
    grid-column: 2;
    grid-row: 2;
  }
  .doc {
    grid-column: 2;
    grid-row: 3;
  }
  .toc {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    position: sticky;
    top: calc(var(--bar-h) + 36px);
    max-height: calc(100vh - var(--bar-h) - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    margin-top: clamp(48px, 9vw, 96px);
    padding: 4px 0 8px;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .toc ol {
    columns: auto;
  }
  .toc ol::before {
    display: block;
  }
  .toc a {
    min-height: 0;
    padding: 7px 0 7px 24px;
    font-size: 14.5px;
    color: var(--ink-2);
  }
  .toc a::before {
    top: calc(7px + 0.675em - 4.5px);
    background: var(--page);
  }
  .toc a:hover {
    color: var(--ink);
  }
  .sec-lede {
    font-size: 20px;
  }
}

/* Scroll timelines: where you are, without a script ----------------------- */

@supports (animation-timeline: view()) {
  body {
    timeline-scope: --s1, --s2, --s3, --s4, --s5, --s6, --s7, --s8, --s9,
      --s10, --s11, --s12, --s13, --s14, --s15, --doc;
  }
  /* Each section counts as "current" while it crosses a thin line a third
     of the way down the screen. */
  .sec,
  .doc {
    view-timeline-axis: block;
    view-timeline-inset: 32% 67.8%;
  }
  .doc { view-timeline-name: --doc; }
  #s1 { view-timeline-name: --s1; }
  #s2 { view-timeline-name: --s2; }
  #s3 { view-timeline-name: --s3; }
  #s4 { view-timeline-name: --s4; }
  #s5 { view-timeline-name: --s5; }
  #s6 { view-timeline-name: --s6; }
  #s7 { view-timeline-name: --s7; }
  #s8 { view-timeline-name: --s8; }
  #s9 { view-timeline-name: --s9; }
  #s10 { view-timeline-name: --s10; }
  #s11 { view-timeline-name: --s11; }
  #s12 { view-timeline-name: --s12; }
  #s13 { view-timeline-name: --s13; }
  #s14 { view-timeline-name: --s14; }
  #s15 { view-timeline-name: --s15; }

  .now,
  .now-default,
  .toc a,
  .toc a::before {
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: none;
  }
  .now { animation-name: now-on; }
  .now-default { animation-name: now-off; animation-timeline: --doc; }
  .toc a { animation-name: toc-on; }
  .toc a::before { animation-name: bud-on; }

  .now[data-s="1"], .toc li:nth-child(1) a, .toc li:nth-child(1) a::before { animation-timeline: --s1; }
  .now[data-s="2"], .toc li:nth-child(2) a, .toc li:nth-child(2) a::before { animation-timeline: --s2; }
  .now[data-s="3"], .toc li:nth-child(3) a, .toc li:nth-child(3) a::before { animation-timeline: --s3; }
  .now[data-s="4"], .toc li:nth-child(4) a, .toc li:nth-child(4) a::before { animation-timeline: --s4; }
  .now[data-s="5"], .toc li:nth-child(5) a, .toc li:nth-child(5) a::before { animation-timeline: --s5; }
  .now[data-s="6"], .toc li:nth-child(6) a, .toc li:nth-child(6) a::before { animation-timeline: --s6; }
  .now[data-s="7"], .toc li:nth-child(7) a, .toc li:nth-child(7) a::before { animation-timeline: --s7; }
  .now[data-s="8"], .toc li:nth-child(8) a, .toc li:nth-child(8) a::before { animation-timeline: --s8; }
  .now[data-s="9"], .toc li:nth-child(9) a, .toc li:nth-child(9) a::before { animation-timeline: --s9; }
  .now[data-s="10"], .toc li:nth-child(10) a, .toc li:nth-child(10) a::before { animation-timeline: --s10; }
  .now[data-s="11"], .toc li:nth-child(11) a, .toc li:nth-child(11) a::before { animation-timeline: --s11; }
  .now[data-s="12"], .toc li:nth-child(12) a, .toc li:nth-child(12) a::before { animation-timeline: --s12; }
  .now[data-s="13"], .toc li:nth-child(13) a, .toc li:nth-child(13) a::before { animation-timeline: --s13; }
  .now[data-s="14"], .toc li:nth-child(14) a, .toc li:nth-child(14) a::before { animation-timeline: --s14; }
  .now[data-s="15"], .toc li:nth-child(15) a, .toc li:nth-child(15) a::before { animation-timeline: --s15; }

  /* The reading cord under the bar grows with the page. */
  .bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--blush), var(--accent));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: cord linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes now-on {
  from, to { opacity: 1; }
}
@keyframes now-off {
  from, to { opacity: 0; }
}
@keyframes toc-on {
  from, to { color: var(--ink); }
}
@keyframes bud-on {
  from, to {
    background: linear-gradient(135deg, var(--blush), var(--accent));
    border-color: var(--accent);
    transform: scale(1.35);
  }
}
@keyframes cord {
  to { transform: scaleX(1); }
}

/* Print: the words only ---------------------------------------------------- */

@media print {
  :root {
    --page: #fff;
    --sheet: #fff;
    --ink: #000;
    --ink-2: #333;
    --accent-deep: #000;
    --heading-2: #000;
    --note: #fff;
  }
  body {
    background: #fff;
    font-size: 11pt;
  }
  .bar,
  .toc,
  .petals,
  .letter-art,
  .foot-nav,
  .summary::after {
    display: none !important;
  }
  .summary,
  .sheet-list,
  .consent,
  .requests > li,
  .letter,
  .sub-note,
  .updated {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  .sec {
    break-inside: auto;
    padding-top: 28pt;
  }
  .sec h2,
  .sub h3 {
    break-after: avoid;
  }
  .sec-contact {
    min-height: 0;
  }
  .foot {
    background: none;
    color: #000;
  }
  .foot-word {
    color: #000;
  }
}