/* Vincent's signature is handwritten, so it uses a signature script, not Season. */
@import url("https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=block");
/* Most personal AI: styles for the letter's components only. */
/* a marked phrase stays on one line */
.letter-mark { white-space: nowrap; }
/* The letter on the Manifesto page: only the words, in one centred column the width
   of a book page. */
.letter-plain {
  position: relative;
  width: 1440px;
  height: 1024px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 70px, #000 150px, #000 640px, transparent 760px);
  mask-image: linear-gradient(transparent 70px, #000 150px, #000 640px, transparent 760px);
}
.letter-plain-column {
  position: absolute;
  left: 432px;
  top: 150px;
  width: 576px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding-bottom: 40px;
  will-change: transform;
}
.letter-plain p {
  margin: 0;
  font-size: 22px;
  line-height: 34px;
  font-weight: 580;
  font-variation-settings: "SERF" 50;
  color: var(--ink, #141211);
  text-wrap: pretty;
}
.letter-plain .letter-place {
  align-self: flex-end;
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 550;
  font-variation-settings: "SERF" 0;
  color: #736F6B;
}
.letter-plain .letter-sign {
  margin-top: 8px;
  font-family: "Mrs Saint Delafield", cursive;
  font-size: 54px;
  line-height: 54px;
  font-weight: 400;
  font-variation-settings: normal;
  color: #1E2A48;
}
.letter-plain .letter-role {
  margin-top: -15px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 550;
  font-variation-settings: "SERF" 0;
  color: #736F6B;
}
/* The home page lies on one painting of the sky. It covers the window a little
   larger than it, so its slow breathing and drift never show an edge, and moves only
   as a whole. It shows only while no topic but the letter's is open, and fades away
   like the old letter ground when one opens. */
.letter-home-sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.letter-home-sky img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.05;
  animation: letter-home-sky-breath 47s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes letter-home-sky-breath {
  from { transform: translate3d(-0.8%, 0, 0) scale(1); }
  to { transform: translate3d(0.8%, -0.4%, 0) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) { .letter-home-sky img { animation: none; } }
:root:not(.topic-open) .letter-home-sky { opacity: 1; }
/* On a phone the sky lies in the page instead of being pinned over it, so Safari's
   bars keep following the page's own colour. */
/* drawn past the foot of the screen, so it reaches under Safari's bottom bar, and fading
   at its foot into the page's own colour (the clouds' lowest tone), so the Manifesto's
   letter reads on past it with no edge */
.phone .letter-home-sky {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100lvh + 160px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 300px), transparent);
}
/* over the moving sky the frost keeps only its soft white wash, so it never blurs it again every frame */
:root:not(.phone):not(.topic-open) .fog { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* The Manifesto page fits the whole letter on one screen: one centred column of
   about 55 to 62 characters a line, ragged right with even word spacing, with no
   scroll and no fade cutting the words. The signature stands a line apart. */
:root.manifesto-open .letter-plain { -webkit-mask-image: none; mask-image: none; }
:root.manifesto-open .letter-plain-column {
  left: 450px;
  top: 50%;
  width: 540px;
  gap: 22px;
  padding-bottom: 0;
  translate: 0 -50%;
  transform: none !important;
}
:root.manifesto-open .letter-plain-column p {
  font-size: 20px;
  line-height: 28px;
  text-align: left;
  word-spacing: normal;
  letter-spacing: normal;
  hyphens: manual;
  text-wrap: pretty;
}
:root.manifesto-open .letter-plain-column .letter-place { margin-bottom: 8px; font-size: 15px; line-height: 22px; }
:root.manifesto-open .letter-plain-column .letter-sign { margin-top: 38px; font-size: 54px; line-height: 54px; }
:root.manifesto-open .letter-plain-column .letter-role { margin-top: -12px; font-size: 15px; line-height: 22px; }
/* the frost behind the sentence would wash over the letter's last lines, so it goes with the sentence */
:root.manifesto-open .fog-bottom { opacity: 0; transition: opacity .6s ease; }
:root.manifesto-open.manifesto-leaving .fog-bottom { opacity: 1; transition-delay: .22s; }
/* Everyday quests floating up beside the letter on the Manifesto page in a steady
   flow, two or three at a time at three depths, either side of the text column. They
   are fully clear, and fade only briefly as they enter at the bottom and leave at the top. */
.manifesto-quests { display: none; }
:root.manifesto-open .manifesto-quests { display: block; }
/* going home they fade with the letter, so none is left over the sentence as it comes back */
:root.manifesto-leaving .manifesto-quests { opacity: 0; transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { :root.manifesto-open .manifesto-quests { display: none; } }
.manifesto-floater {
  position: absolute;
  top: 0;
  width: 400px;
  display: flex;
  justify-content: center;
  animation: manifesto-float linear infinite;
  will-change: transform, opacity;
}
.manifesto-floater[data-side="left"] { left: 28px; }
.manifesto-floater[data-side="right"] { left: 1012px; }
.manifesto-floater.near { --size: 1.42; z-index: 3; }
.manifesto-floater.middle { --size: 1.16; z-index: 2; }
.manifesto-floater.far { --size: .94; z-index: 1; }
@keyframes manifesto-float {
  0% { transform: translate3d(0, 1180px, 0) scale(var(--size)); opacity: 0; }
  12% { opacity: 1; }
  62% { opacity: 1; }
  72% { opacity: 0; }
  100% { transform: translate3d(0, -520px, 0) scale(var(--size)); opacity: 0; }
}
.manifesto-quest {
  position: relative;
  flex: none;
  border-radius: 26px;
  background: rgba(251, 250, 248, .94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 12px 28px rgba(20, 18, 17, .08);
  color: var(--ink, #141211);
}
.manifesto-floater[data-side="left"] .manifesto-quest { rotate: -2.5deg; }
.manifesto-floater[data-side="right"] .manifesto-quest { rotate: 2deg; }
.manifesto-quest img { display: block; object-fit: cover; }
.manifesto-quest-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 580;
  font-variation-settings: "SERF" 50;
  text-wrap: balance;
}
.manifesto-quest-state {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  font-variation-settings: "SERF" 0;
  color: #8A8580;
}
/* a row: small cover, title, and its state at the right */
.manifesto-quest.row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 270px;
  padding: 12px 16px 12px 12px;
}
.manifesto-quest.row img { width: 64px; height: 64px; border-radius: 15px; }
/* a tall card: its cover on top, the title and state centred under it */
.manifesto-quest.tall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 196px;
  padding: 10px 10px 14px;
  text-align: center;
}
.manifesto-quest.tall img { width: 176px; height: 150px; border-radius: 18px; margin-bottom: 6px; }
/* a completed quest on its full cover, with the done mark over it */
.manifesto-quest.done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 196px;
  height: 244px;
  padding: 18px 16px 26px;
  text-align: center;
  overflow: hidden;
}
.manifesto-quest.done img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 20px; }
.manifesto-quest.done::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 20px;
  background: linear-gradient(rgba(10, 12, 20, 0) 35%, rgba(10, 12, 20, .5));
}
.manifesto-quest.done > span { position: relative; z-index: 1; }
.manifesto-quest-done {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(251, 250, 248, .95);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variation-settings: "SERF" 0;
}
.manifesto-quest.done .manifesto-quest-title { color: #fff; font-size: 17px; line-height: 21px; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); }
/* the banners' status grey and completed foot */
.manifesto-quest-state { color: #736F6B; }
.manifesto-quest.done::after { background: linear-gradient(rgba(10, 12, 20, 0) 30%, rgba(10, 12, 20, .3) 55%, rgba(10, 12, 20, .62) 80%, rgba(10, 12, 20, .92)); }
/* every title sits on two lines: the row's state goes under its title, and the tall
   and completed titles are set a little larger and wider */
.manifesto-quest.row { grid-template-columns: 64px auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; width: max-content; max-width: 290px; }
/* until its lines are measured, a side quest's title keeps the width it wraps at */
.manifesto-quest.row .manifesto-quest-title { width: 184px; }
.manifesto-quest.row img { grid-row: span 2; }
.manifesto-quest.row .manifesto-quest-title { align-self: end; }
.manifesto-quest.row .manifesto-quest-state { align-self: start; }
.manifesto-quest.tall .manifesto-quest-title { font-size: 18px; line-height: 22px; }
.manifesto-quest.done { width: 220px; height: 272px; }
.manifesto-quest.done .manifesto-quest-title { font-size: 18px; line-height: 22px; }
/* the quest titles in the app's quest card weight, Season Mix SemiBold */
.manifesto-quest-title { font-weight: 670; font-variation-settings: "SERF" 50; color: var(--ink, #141211); }
.manifesto-quest.done .manifesto-quest-title { color: #fff; }
/* On a phone the letter is part of the page, read by scrolling it: one column at the
   phone's width under the top bar, with the quests left out for now. */
:root.phone:not(.manifesto-open) .letter-plain { display: none; }
.phone .letter-plain {
  width: auto;
  height: auto;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  padding: calc(env(safe-area-inset-top, 0px) + 96px) 28px calc(env(safe-area-inset-bottom, 0px) + 56px);
}
:root.phone.manifesto-open .letter-plain-column { position: static; width: auto; gap: 24px; translate: none; }
:root.phone.manifesto-open .letter-plain-column p { font-size: 18px; line-height: 27px; }
:root.phone.manifesto-open .letter-plain-column .letter-sign { margin-top: 26px; font-size: 48px; line-height: 48px; }
:root.phone.manifesto-open .manifesto-quests { display: none; }