/* Take Care marketing: the Industry Applications look. An ink hero and page heads
   with an animated background, the accent on the hero card and closing band, white and concrete
   between. Heavy ink type, hover states, CSS only. See DESIGN.md. */

/* The overscroll above the nav is ink, like the hero. */
html {
  background-color: #141414;
  color-scheme: light;
}

body {
  margin: 0;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.site {
  --accent: #ff7088;
  --ink: #141414;
  --white: #ffffff;
  --concrete: #ededea;
  --graphite: #5c5c58;
  --ink-soft: #c4c4be;
  --rule: #e6e6e2;
  --ink-rule: #2c2c2a;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* space-4 on phones to space-14 on desktop */
  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  /* side padding that caps every band's content at 1200px */
  --side: max(var(--gutter), (100% - 1200px) / 2);
  --nav-h: 5.3rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  position: relative; /* the nav sits over the top */

  min-height: 100vh;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.site ::selection {
  background: var(--ink);
  color: var(--accent);
}

:where(.site) a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.site :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.onInk :focus-visible {
  outline-color: var(--accent);
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Type: one family, louder means heavier and tighter */

.display {
  margin: 0;
  font-size: clamp(2.75rem, 5.6vw, 4.25rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.headline {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.lede {
  max-width: 28em;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.45;
}

.meta {
  margin: 0;
  color: var(--graphite);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.textLink {
  font-weight: 800;
  text-decoration: underline;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease);
}

a.button:hover {
  transform: translateY(-2px);
}

.buttonSmall {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9375rem;
}

/* Nav and footer */

/* the nav sits over the ink hero (or page head), above a hairline */
.nav {
  position: absolute;
  top: 0;
  right: var(--side);
  left: var(--side);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ink-rule);
  color: var(--white);
}

.nav :focus-visible {
  outline-color: var(--accent);
}

.nav .brand svg {
  fill: var(--accent);
}

.nav .button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.brand svg {
  /* the mark is drawn on a 12-unit grid: 36 and 24 px keep its edges on whole pixels */
  display: block;
  width: 36px;
  height: 36px;
  fill: currentColor;
}

.navLinks {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.navLinks a:not(.button),
.footerLinks a {
  text-decoration: none;
}

/* nav and footer links: an underline that draws in from the left */
.navLinks a:not(.button),
.footerLinks a {
  position: relative;
}

.navLinks a:not(.button)::after,
.footerLinks a::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.25rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.navLinks a:not(.button):hover::after,
.footerLinks a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 2rem var(--side);
  background: var(--ink);
  color: var(--white);
  font-size: 0.9375rem;
}

.footer .brand {
  font-size: 1.25rem;
}

.footer .brand svg {
  width: 24px;
  height: 24px;
  fill: var(--accent);
}

.footerLinks {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-weight: 700;
}

/* Bands: ink opens the page, the accent closes it, concrete and white between */

.band {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem var(--side);
}

.concrete {
  background: var(--concrete);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: 2rem 3rem;
  align-items: start;
}

/* Hero: the headline beside one sample item */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  align-content: center;
  /* the whole first screen, so the background shows in full on load */
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 3rem) var(--side) 6rem;
  background: var(--ink);
  color: var(--white);
}

.hero :focus-visible {
  outline-color: var(--accent);
}

.hero .button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

/* the app's half of the hero line */
.accent {
  color: var(--accent);
}

.heroCopy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  animation: rise 0.8s var(--ease) backwards;
}

.hero .display {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  letter-spacing: -0.05em;
}

.ticket {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  border-radius: 14px;
  background: var(--accent);
  color: var(--ink);
  animation: rise 0.8s var(--ease) 0.12s backwards;
}

.ticket p {
  margin: 0;
}

.ticketRef {
  color: var(--ink);
  font-size: 0.8125rem;
}

.ticketTitle {
  font-size: clamp(1.75rem, 2.8vw, 2.125rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.ticketWords {
  font-size: 1.375rem;
}

/* Chapters: the same order, from the forecast to the buyer */

.chapters {
  max-width: 73rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.chapter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
  padding: 5.5rem 0;
}

.chapter + .chapter {
  border-top: 1px solid var(--rule);
}

.chapterText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.chapterText p {
  max-width: 28em;
  margin: 0;
  font-size: 1.125rem;
}

.chapterNumber {
  font-size: 0.9375rem;
  font-weight: 800;
}

.row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
}

.row p {
  margin: 0;
}

.row > div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.2rem;
}

.rowTitle {
  font-weight: 800;
}

.rowStack {
  flex-direction: column;
  align-items: stretch;
  padding: 1.5rem;
}

.rowInk {
  gap: 0.375rem;
  background: var(--ink);
  color: var(--white);
}

.track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  list-style: none;
}

.track li {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.trackBox {
  display: block;
  height: 0.875rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.trackOut {
  font-weight: 900;
}

.trackOut .trackBox {
  background: var(--ink);
}

/* Closing: the price, the privacy line, and the way in */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 6rem var(--side);
  background: var(--accent);
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.actions .textLink {
  font-size: 1.125rem;
}

/* The plan: there is one */

.plan {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 34rem;
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--white);
}

.planPrice {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.planPrice span {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
}

.planFor {
  margin: 0;
  font-weight: 600;
}

.planList {
  margin: 0.5rem 0 0;
  padding: 0;
  border-top: 3px solid var(--ink);
  list-style: none;
}

.planList li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}

.planList li:last-child {
  border-bottom: 0;
}

/* Questions */

.faqList {
  border-top: 3px solid var(--ink);
}

.faqList details {
  border-bottom: 1px solid var(--rule);
}

.faqList summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faqList summary::-webkit-details-marker {
  display: none;
}

.faqList details p {
  max-width: 40em;
  margin: 0 0 1.25rem;
}

.faqMark {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

/* the plus turns into a minus */
.faqMarkBar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}

details[open] .faqMarkBar {
  transform: rotate(90deg);
}

/* Pricing and privacy pages: an ink head under the nav, with the hero's background */

.pageHead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: calc(var(--nav-h) + 3rem) var(--side) 3.5rem;
  background: var(--ink);
  color: var(--white);
}

.pageHead > :not(.bg) {
  animation: rise 0.8s var(--ease) backwards;
}

.document {
  padding: 3rem var(--side);
}

.document > * {
  max-width: 68ch;
}

.document h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.document p,
.document ul {
  margin: 0 0 1rem;
}

.document ul {
  padding-left: 1.25rem;
}

.document li + li {
  margin-top: 0.5rem;
}

.updated {
  margin: 0;
  font-weight: 700;
}

@media (max-width: 860px) {
  .hero,
  .chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .hero {
    padding-block: calc(var(--nav-h) + 3rem) 4rem;
  }

  .chapter {
    padding-block: 3.5rem;
  }

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

@media (max-width: 560px) {
  .navLinks a:not(.button) {
    display: none;
  }

  .row {
    flex-wrap: wrap;
  }

  .footerLinks {
    margin-left: 0;
  }
}

/* Motion: the hero rises in on load, chapters as they scroll in (where the
   browser supports scroll-driven animation), and reduced motion stops it all. */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}

@supports (animation-timeline: view()) {
  .chapter > * {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}

/* Background behind the hero and page heads, under everything in them */

.bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.brand svg {
  transition: transform 0.35s var(--ease);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Take Care's background: snow falling past a slow-turning sun, for too
   cold and too hot. Each snow layer is one dot with a box-shadow per flake,
   drawn twice, a period apart, so the fall loops without a jump. */

.sun {
  position: absolute;
  top: 50%;
  right: -70px;
  width: 440px;
  margin-top: -220px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  animation: spin 80s linear infinite;
}

.sun * {
  vector-effect: non-scaling-stroke;
}

.snow {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  animation: fall 22s linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(900px);
  }
}

.sn1 {
  box-shadow:
    1046px 759px var(--white),
    1046px -141px var(--white),
    2171px 29px var(--white),
    2171px -871px var(--white),
    1020px 664px var(--white),
    1020px -236px var(--white),
    642px 115px var(--white),
    642px -785px var(--white),
    1921px 889px var(--white),
    1921px -11px var(--white),
    1559px 556px var(--white),
    1559px -344px var(--white),
    1021px 13px var(--ink-soft),
    1021px -887px var(--ink-soft),
    887px 417px var(--white),
    887px -483px var(--white),
    745px 888px var(--white),
    745px -12px var(--white),
    653px 780px var(--white),
    653px -120px var(--white),
    568px 632px var(--ink-soft),
    568px -268px var(--ink-soft),
    1822px 129px var(--white),
    1822px -771px var(--white),
    7px 892px var(--white),
    7px -8px var(--white),
    857px 792px var(--white),
    857px -108px var(--white),
    679px 893px var(--white),
    679px -7px var(--white),
    1184px 321px var(--white),
    1184px -579px var(--white),
    838px 186px var(--ink-soft),
    838px -714px var(--ink-soft),
    806px 392px var(--white),
    806px -508px var(--white),
    88px 369px var(--white),
    88px -531px var(--white),
    679px 149px var(--white),
    679px -751px var(--white),
    266px 339px var(--white),
    266px -561px var(--white),
    13px 610px var(--ink-soft),
    13px -290px var(--ink-soft),
    1384px 67px var(--white),
    1384px -833px var(--white),
    1455px 838px var(--white),
    1455px -62px var(--white),
    1969px 713px var(--white),
    1969px -187px var(--white),
    756px 492px var(--white),
    756px -408px var(--white),
    721px 58px var(--white),
    721px -842px var(--white),
    93px 767px var(--white),
    93px -133px var(--white),
    1655px 18px var(--ink-soft),
    1655px -882px var(--ink-soft),
    1715px 374px var(--white),
    1715px -526px var(--white),
    37px 463px var(--white),
    37px -437px var(--white),
    741px 638px var(--white),
    741px -262px var(--white),
    487px 773px var(--white),
    487px -127px var(--white),
    1893px 352px var(--ink-soft),
    1893px -548px var(--ink-soft),
    1453px 537px var(--white),
    1453px -363px var(--white),
    1895px 110px var(--ink-soft),
    1895px -790px var(--ink-soft),
    1504px 880px var(--white),
    1504px -20px var(--white),
    150px 443px var(--white),
    150px -457px var(--white),
    853px 348px var(--ink-soft),
    853px -552px var(--ink-soft),
    1485px 151px var(--white),
    1485px -749px var(--white),
    1129px 719px var(--ink-soft),
    1129px -181px var(--ink-soft),
    377px 319px var(--ink-soft),
    377px -581px var(--ink-soft),
    1297px 313px var(--white),
    1297px -587px var(--white),
    320px 641px var(--white),
    320px -259px var(--white),
    1266px 495px var(--white),
    1266px -405px var(--white),
    198px 82px var(--ink-soft),
    198px -818px var(--ink-soft),
    2185px 415px var(--white),
    2185px -485px var(--white),
    972px 758px var(--ink-soft),
    972px -142px var(--ink-soft),
    1408px 846px var(--white),
    1408px -54px var(--white),
    1866px 666px var(--white),
    1866px -234px var(--white),
    596px 57px var(--ink-soft),
    596px -843px var(--ink-soft),
    134px 820px var(--white),
    134px -80px var(--white),
    1368px 858px var(--white),
    1368px -42px var(--white),
    534px 749px var(--ink-soft),
    534px -151px var(--ink-soft),
    543px 645px var(--white),
    543px -255px var(--white),
    436px 172px var(--white),
    436px -728px var(--white),
    1527px 152px var(--white),
    1527px -748px var(--white),
    1722px 301px var(--white),
    1722px -599px var(--white),
    1856px 635px var(--white),
    1856px -265px var(--white),
    2138px 464px var(--white),
    2138px -436px var(--white),
    1301px 490px var(--white),
    1301px -410px var(--white),
    1192px 481px var(--white),
    1192px -419px var(--white),
    600px 115px var(--white),
    600px -785px var(--white),
    2178px 183px var(--ink-soft),
    2178px -717px var(--ink-soft),
    2045px 888px var(--white),
    2045px -12px var(--white),
    737px 91px var(--white),
    737px -809px var(--white),
    1115px 527px var(--ink-soft),
    1115px -373px var(--ink-soft),
    2059px 369px var(--white),
    2059px -531px var(--white),
    1456px 711px var(--ink-soft),
    1456px -189px var(--ink-soft),
    140px 777px var(--white),
    140px -123px var(--white),
    1488px 572px var(--ink-soft),
    1488px -328px var(--ink-soft),
    1150px 855px var(--white),
    1150px -45px var(--white),
    1084px 788px var(--ink-soft),
    1084px -112px var(--ink-soft),
    1203px 348px var(--ink-soft),
    1203px -552px var(--ink-soft),
    731px 594px var(--white),
    731px -306px var(--white),
    1942px 560px var(--white),
    1942px -340px var(--white),
    1334px 687px var(--white),
    1334px -213px var(--white),
    1896px 295px var(--ink-soft),
    1896px -605px var(--ink-soft),
    1460px 356px var(--white),
    1460px -544px var(--white),
    1415px 755px var(--white),
    1415px -145px var(--white),
    1433px 863px var(--white),
    1433px -37px var(--white),
    1842px 373px var(--white),
    1842px -527px var(--white),
    2122px 145px var(--ink-soft),
    2122px -755px var(--ink-soft),
    680px 203px var(--white),
    680px -697px var(--white),
    1954px 289px var(--ink-soft),
    1954px -611px var(--ink-soft),
    322px 736px var(--ink-soft),
    322px -164px var(--ink-soft),
    1706px 175px var(--ink-soft),
    1706px -725px var(--ink-soft),
    2115px 681px var(--white),
    2115px -219px var(--white),
    1239px 638px var(--ink-soft),
    1239px -262px var(--ink-soft),
    1108px 737px var(--white),
    1108px -163px var(--white),
    801px 163px var(--ink-soft),
    801px -737px var(--ink-soft),
    1806px 639px var(--ink-soft),
    1806px -261px var(--ink-soft),
    740px 224px var(--ink-soft),
    740px -676px var(--ink-soft),
    739px 646px var(--ink-soft),
    739px -254px var(--ink-soft),
    171px 482px var(--white),
    171px -418px var(--white),
    678px 55px var(--white),
    678px -845px var(--white),
    453px 324px var(--white),
    453px -576px var(--white),
    1976px 198px var(--ink-soft),
    1976px -702px var(--ink-soft),
    146px 425px var(--white),
    146px -475px var(--white),
    1438px 389px var(--ink-soft),
    1438px -511px var(--ink-soft),
    294px 604px var(--white),
    294px -296px var(--white),
    974px 735px var(--white),
    974px -165px var(--white),
    2px 358px var(--white),
    2px -542px var(--white),
    1140px 876px var(--white),
    1140px -24px var(--white),
    471px 705px var(--ink-soft),
    471px -195px var(--ink-soft),
    1531px 36px var(--ink-soft),
    1531px -864px var(--ink-soft),
    1234px 97px var(--white),
    1234px -803px var(--white),
    2099px 347px var(--ink-soft),
    2099px -553px var(--ink-soft),
    1200px 360px var(--white),
    1200px -540px var(--white),
    1716px 419px var(--ink-soft),
    1716px -481px var(--ink-soft),
    1513px 478px var(--white),
    1513px -422px var(--white),
    642px 610px var(--white),
    642px -290px var(--white),
    1953px 203px var(--white),
    1953px -697px var(--white),
    372px 359px var(--ink-soft),
    372px -541px var(--ink-soft),
    3px 391px var(--white),
    3px -509px var(--white),
    1335px 579px var(--ink-soft),
    1335px -321px var(--ink-soft),
    576px 333px var(--ink-soft),
    576px -567px var(--ink-soft),
    1539px 439px var(--white),
    1539px -461px var(--white),
    927px 505px var(--white),
    927px -395px var(--white),
    1964px 725px var(--white),
    1964px -175px var(--white),
    1572px 875px var(--white),
    1572px -25px var(--white),
    1064px 758px var(--white),
    1064px -142px var(--white),
    2032px 257px var(--white),
    2032px -643px var(--white),
    80px 326px var(--white),
    80px -574px var(--white),
    2014px 293px var(--white),
    2014px -607px var(--white),
    1953px 24px var(--white),
    1953px -876px var(--white),
    1816px 251px var(--white),
    1816px -649px var(--white),
    163px 800px var(--white),
    163px -100px var(--white),
    1607px 13px var(--white),
    1607px -887px var(--white),
    2181px 573px var(--white),
    2181px -327px var(--white),
    997px 485px var(--white),
    997px -415px var(--white),
    1006px 501px var(--white),
    1006px -399px var(--white),
    633px 738px var(--white),
    633px -162px var(--white),
    1200px 504px var(--ink-soft),
    1200px -396px var(--ink-soft),
    1944px 530px var(--ink-soft),
    1944px -370px var(--ink-soft),
    484px 16px var(--white),
    484px -884px var(--white),
    1231px 289px var(--ink-soft),
    1231px -611px var(--ink-soft),
    1376px 628px var(--white),
    1376px -272px var(--white),
    2170px 27px var(--white),
    2170px -873px var(--white),
    1432px 369px var(--ink-soft),
    1432px -531px var(--ink-soft),
    542px 37px var(--white),
    542px -863px var(--white),
    1033px 566px var(--white),
    1033px -334px var(--white),
    440px 703px var(--ink-soft),
    440px -197px var(--ink-soft),
    783px 14px var(--white),
    783px -886px var(--white),
    1751px 609px var(--ink-soft),
    1751px -291px var(--ink-soft),
    1973px 879px var(--white),
    1973px -21px var(--white),
    1948px 401px var(--ink-soft),
    1948px -499px var(--ink-soft),
    804px 303px var(--white),
    804px -597px var(--white),
    270px 310px var(--white),
    270px -590px var(--white),
    1772px 596px var(--white),
    1772px -304px var(--white),
    1935px 318px var(--white),
    1935px -582px var(--white),
    677px 489px var(--ink-soft),
    677px -411px var(--ink-soft),
    2038px 338px var(--ink-soft),
    2038px -562px var(--ink-soft),
    628px 435px var(--ink-soft),
    628px -465px var(--ink-soft),
    198px 70px var(--ink-soft),
    198px -830px var(--ink-soft),
    942px 273px var(--white),
    942px -627px var(--white),
    257px 679px var(--white),
    257px -221px var(--white),
    1364px 739px var(--white),
    1364px -161px var(--white),
    281px 414px var(--ink-soft),
    281px -486px var(--ink-soft),
    1993px 50px var(--white),
    1993px -850px var(--white),
    501px 224px var(--ink-soft),
    501px -676px var(--ink-soft),
    455px 729px var(--white),
    455px -171px var(--white),
    1198px 722px var(--white),
    1198px -178px var(--white),
    613px 187px var(--ink-soft),
    613px -713px var(--ink-soft),
    758px 423px var(--white),
    758px -477px var(--white),
    275px 637px var(--white),
    275px -263px var(--white),
    178px 568px var(--white),
    178px -332px var(--white),
    1553px 763px var(--white),
    1553px -137px var(--white),
    1146px 58px var(--ink-soft),
    1146px -842px var(--ink-soft),
    484px 760px var(--white),
    484px -140px var(--white);
}

.sn2 {
  width: 3px;
  height: 3px;
  box-shadow:
    550px 10px var(--white),
    550px -890px var(--white),
    374px 322px var(--ink-soft),
    374px -578px var(--ink-soft),
    2004px 501px var(--white),
    2004px -399px var(--white),
    1532px 57px var(--white),
    1532px -843px var(--white),
    1207px 154px var(--ink-soft),
    1207px -746px var(--ink-soft),
    2071px 297px var(--ink-soft),
    2071px -603px var(--ink-soft),
    903px 269px var(--white),
    903px -631px var(--white),
    965px 260px var(--white),
    965px -640px var(--white),
    2117px 136px var(--white),
    2117px -764px var(--white),
    1520px 464px var(--ink-soft),
    1520px -436px var(--ink-soft),
    1592px 183px var(--white),
    1592px -717px var(--white),
    76px 670px var(--white),
    76px -230px var(--white),
    349px 586px var(--ink-soft),
    349px -314px var(--ink-soft),
    147px 93px var(--white),
    147px -807px var(--white),
    2074px 608px var(--white),
    2074px -292px var(--white),
    977px 399px var(--white),
    977px -501px var(--white),
    1967px 331px var(--white),
    1967px -569px var(--white),
    2173px 30px var(--ink-soft),
    2173px -870px var(--ink-soft),
    1575px 54px var(--white),
    1575px -846px var(--white),
    1758px 697px var(--white),
    1758px -203px var(--white),
    475px 85px var(--ink-soft),
    475px -815px var(--ink-soft),
    2012px 840px var(--white),
    2012px -60px var(--white),
    572px 718px var(--ink-soft),
    572px -182px var(--ink-soft),
    1539px 362px var(--white),
    1539px -538px var(--white),
    1187px 341px var(--ink-soft),
    1187px -559px var(--ink-soft),
    1428px 815px var(--white),
    1428px -85px var(--white),
    1548px 139px var(--ink-soft),
    1548px -761px var(--ink-soft),
    1467px 663px var(--white),
    1467px -237px var(--white),
    1775px 872px var(--white),
    1775px -28px var(--white),
    2119px 37px var(--ink-soft),
    2119px -863px var(--ink-soft),
    880px 757px var(--white),
    880px -143px var(--white),
    1620px 64px var(--white),
    1620px -836px var(--white),
    151px 33px var(--white),
    151px -867px var(--white),
    829px 200px var(--white),
    829px -700px var(--white),
    2007px 492px var(--ink-soft),
    2007px -408px var(--ink-soft),
    1427px 0px var(--white),
    1427px -900px var(--white),
    1925px 307px var(--ink-soft),
    1925px -593px var(--ink-soft),
    1755px 331px var(--white),
    1755px -569px var(--white),
    1891px 102px var(--white),
    1891px -798px var(--white),
    633px 669px var(--white),
    633px -231px var(--white),
    291px 383px var(--white),
    291px -517px var(--white),
    1923px 155px var(--ink-soft),
    1923px -745px var(--ink-soft),
    1040px 112px var(--white),
    1040px -788px var(--white),
    661px 768px var(--white),
    661px -132px var(--white),
    963px 33px var(--white),
    963px -867px var(--white),
    131px 352px var(--white),
    131px -548px var(--white),
    1294px 60px var(--ink-soft),
    1294px -840px var(--ink-soft),
    89px 689px var(--white),
    89px -211px var(--white),
    1932px 869px var(--white),
    1932px -31px var(--white),
    482px 804px var(--ink-soft),
    482px -96px var(--ink-soft),
    1328px 298px var(--white),
    1328px -602px var(--white),
    982px 746px var(--white),
    982px -154px var(--white),
    137px 205px var(--ink-soft),
    137px -695px var(--ink-soft),
    102px 588px var(--white),
    102px -312px var(--white),
    320px 632px var(--white),
    320px -268px var(--white),
    1491px 696px var(--white),
    1491px -204px var(--white),
    755px 479px var(--white),
    755px -421px var(--white),
    1159px 68px var(--ink-soft),
    1159px -832px var(--ink-soft),
    1917px 167px var(--white),
    1917px -733px var(--white),
    719px 688px var(--white),
    719px -212px var(--white),
    179px 661px var(--ink-soft),
    179px -239px var(--ink-soft),
    1763px 743px var(--white),
    1763px -157px var(--white),
    25px 473px var(--white),
    25px -427px var(--white),
    1855px 797px var(--ink-soft),
    1855px -103px var(--ink-soft),
    1680px 173px var(--white),
    1680px -727px var(--white),
    136px 561px var(--ink-soft),
    136px -339px var(--ink-soft),
    1433px 96px var(--ink-soft),
    1433px -804px var(--ink-soft),
    291px 242px var(--white),
    291px -658px var(--white),
    376px 482px var(--white),
    376px -418px var(--white),
    997px 659px var(--white),
    997px -241px var(--white);
  animation-duration: 14s;
}

.sn3 {
  width: 4px;
  height: 4px;
  box-shadow:
    2037px 406px var(--white),
    2037px -494px var(--white),
    196px 261px var(--white),
    196px -639px var(--white),
    1826px 313px var(--ink-soft),
    1826px -587px var(--ink-soft),
    210px 896px var(--white),
    210px -4px var(--white),
    796px 183px var(--ink-soft),
    796px -717px var(--ink-soft),
    2083px 655px var(--white),
    2083px -245px var(--white),
    770px 544px var(--white),
    770px -356px var(--white),
    345px 321px var(--white),
    345px -579px var(--white),
    355px 554px var(--white),
    355px -346px var(--white),
    308px 877px var(--ink-soft),
    308px -23px var(--ink-soft),
    878px 639px var(--white),
    878px -261px var(--white),
    1807px 552px var(--white),
    1807px -348px var(--white),
    1992px 433px var(--ink-soft),
    1992px -467px var(--ink-soft),
    1542px 534px var(--ink-soft),
    1542px -366px var(--ink-soft),
    543px 743px var(--white),
    543px -157px var(--white),
    1259px 705px var(--white),
    1259px -195px var(--white),
    917px 567px var(--white),
    917px -333px var(--white),
    568px 319px var(--white),
    568px -581px var(--white),
    358px 798px var(--white),
    358px -102px var(--white),
    1649px 320px var(--white),
    1649px -580px var(--white),
    531px 549px var(--white),
    531px -351px var(--white),
    1931px 250px var(--ink-soft),
    1931px -650px var(--ink-soft),
    345px 817px var(--white),
    345px -83px var(--white),
    1005px 282px var(--white),
    1005px -618px var(--white),
    2017px 717px var(--white),
    2017px -183px var(--white),
    196px 720px var(--white),
    196px -180px var(--white),
    1171px 382px var(--white),
    1171px -518px var(--white),
    294px 430px var(--white),
    294px -470px var(--white);
  animation-duration: 9s;
}

.brand:hover svg {
  transform: scale(1.12);
}

/* page heads are shorter: a smaller one, low in the corner, clear of the words */
.pageHead .sun {
  top: auto;
  right: -110px;
  bottom: -150px;
  width: 300px;
  margin-top: 0;
}

@media (max-width: 860px) {
  .sun {
    top: auto;
    right: -90px;
    bottom: -50px;
    width: 280px;
    margin-top: 0;
  }

  .pageHead .sun {
    display: none;
  }
}

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