/* The home page: the design's pictures, motion and timings (design/website/double-bill/
   home-page-design.html), with the changes the website brief asks for: the drawn One tap story, the
   routes for visitors who can't install here, and the colour try-on using real Pro skins. */

.art { position: relative; min-height: 15rem; }
@media (min-width: 52rem) { .art { min-height: 24rem; } }
@media (max-width: 52rem) { .card > .art { width: min(100%, 30rem); justify-self: center; } }
.cut { position: absolute; display: block; mix-blend-mode: var(--overprint); }
.f-blue .cut, .f-green .cut { mix-blend-mode: normal; }

/* Opening: the name, beside a window in afternoon light */
.open { min-height: min(92svh, 50rem); }
/* On a computer the opening is as tall as its words, centred, with the window stretched beside them
   (#183, Direction A): no bare band above the name. The bar above (#180) gives the rest of the top. */
@media (min-width: 52rem) {
  .open { min-height: 0; align-items: center; padding-top: calc(var(--line) * 2); }
  .open > .art { align-self: stretch; min-height: calc(var(--line) * 14); }
}
@media (max-width: 52rem) { .open > .art { grid-row: 1; } }
.name { position: relative; z-index: 4; color: var(--green); font-size: clamp(4rem, 20vw, 11rem); line-height: 0.9; margin: 0 0 var(--line); }
/* The shadow at half the first draft's offset, as approved */
.name .reg { position: absolute; inset: 0; color: var(--blue); mix-blend-mode: var(--overprint); transform: translate(0.014em, -0.01em); z-index: -1; }
.open .small { margin: var(--line) 0 0; }
.sun { left: 2%; top: 4%; width: 90%; height: 74%; background: color-mix(in srgb, var(--yellow) 38%, var(--paper)); clip-path: polygon(34% 0, 100% 0, 70% 100%, 0 100%); mix-blend-mode: normal; }
.bar { left: 2%; top: 4%; width: 90%; height: 74%; background: var(--yellow); clip-path: polygon(64% 0, 69% 0, 37% 100%, 32% 100%); mix-blend-mode: normal; z-index: 2; }
.sill { left: 0; right: 0; bottom: 8%; height: 12%; background: var(--green); mix-blend-mode: normal; z-index: 3; }
.sunsill { left: 0; width: 66%; bottom: 14%; height: 6%; background: var(--blue); mix-blend-mode: normal; z-index: 4; clip-path: polygon(6% 0, 100% 0, 96% 100%, 0 100%); }
.pot { left: 18%; bottom: 20%; width: 11%; height: 12%; background: var(--paper); clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); mix-blend-mode: normal; z-index: 5; }
.plant i { position: absolute; display: block; width: 7%; height: 15%; background: var(--green); border-radius: 0 100% 0 100%; mix-blend-mode: normal; z-index: 5; }
.plant .l1 { left: 19%; bottom: 30%; transform: rotate(-35deg); } .plant .l2 { left: 23%; bottom: 33%; transform: rotate(5deg); } .plant .l3 { left: 26%; bottom: 29%; transform: rotate(45deg); }
.plant .l4 { left: 21%; bottom: 36%; transform: rotate(-12deg); }
.shade i { position: absolute; display: block; width: 9%; height: 19%; background: var(--yellow); border-radius: 0 100% 0 100%; mix-blend-mode: normal; z-index: 3; }
.shade .d1 { left: 34%; bottom: 34%; transform: rotate(-10deg) skewX(-24deg); } .shade .d2 { left: 40%; bottom: 38%; transform: rotate(28deg) skewX(-24deg); } .shade .d3 { left: 45%; bottom: 33%; transform: rotate(68deg) skewX(-24deg); }
/* When you're ready: the same window later in the afternoon; the light lower and longer, a new leaf */
.late .sun { clip-path: polygon(46% 0, 100% 0, 60% 100%, 0 100%); }
.late .bar { background: var(--blue); clip-path: polygon(74% 0, 79% 0, 33% 100%, 28% 100%); }
.f-blue .late .bar { background: var(--green); }
.late .sunsill { background: var(--yellow); }
.late .shade i { background: var(--blue); }
.f-blue .late .shade i { background: var(--green); }

/* Later never comes: a drawn Watch later list (#184), in three pictures, one per visit (home.js sets
   data-picture on #later). Without script, B: the list that never ends. Sizes, colours and shapes are
   design/website/double-bill/batch2-design-notes.md's. */
.lead-in { font: 600 1.25rem/var(--line) var(--text); margin: 0; }
.art.watch-later { min-height: 0; }
@media (min-width: 52rem) {
  .watch-later { align-self: center; }
  #later:not([data-picture]) .watch-later, #later[data-picture="b"] .watch-later { align-self: stretch; }
}
.wl { display: none; }
#later:not([data-picture]) .wl-b, #later[data-picture="a"] .wl-a, #later[data-picture="b"] .wl-b { display: block; }
#later[data-picture="c"] .wl-c { display: grid; }
.wl-sheet { position: relative; background: var(--paper); color: var(--black); }
.wl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.875rem; padding: 0.4375rem 0.875rem; background: var(--green); color: var(--paper); font: 700 1rem/var(--line) var(--text); }
.wl-head span { font-weight: 500; color: var(--on-green-quiet); }
.wl-rows { display: grid; gap: 0.875rem; padding: 0.875rem; }
.wl-row { display: grid; grid-template-columns: 4.375rem minmax(0, 1fr); gap: 0.875rem; align-items: start; }
@media (min-width: 52rem) { .wl-row { grid-template-columns: 6.125rem minmax(0, 1fr); } }
.wl-row b { display: block; font: 600 1rem/1.25 var(--text); }
.wl-row small { display: block; font: 400 1rem/1.25 var(--text); color: var(--panel-quiet); margin-top: 0.25rem; }
/* The invented videos' pictures: flat ground, sun, hill and stone; no play button, badge or red */
.wl-th { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--yellow) 28%, var(--paper)); }
.wl-th i { position: absolute; display: block; }
.wl-th .g { left: 0; right: 0; bottom: 0; height: 26%; background: var(--green); }
.wl-th .s { right: 16%; top: 16%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); }
.wl-th .h { left: -10%; bottom: 12%; width: 72%; height: 44%; border-radius: 50% 50% 0 0; background: var(--blue); }
.wl-th .st { left: 34%; bottom: 18%; width: 34%; height: 30%; border-radius: 50% 46% 40% 44% / 62% 58% 42% 38%; background: var(--stone); }
.wl-bars { display: grid; gap: 0.4375rem; padding-top: 0.25rem; }
.wl-bars i { display: block; height: 0.75rem; background: color-mix(in srgb, var(--black) 14%, var(--paper)); }
.wl-bars i + i { width: 55%; }
/* A: the list, with mild dates and a small count */
.wl-a .wl-sheet { width: calc(100% - 0.875rem); max-width: 30rem; box-shadow: 0.875rem 0.875rem 0 var(--yellow); }
/* B: the list that never ends, fading; titled rows stay in the unfaded half, three leaves resting on it */
.wl-b { position: relative; height: calc(var(--line) * 12); }
@media (min-width: 52rem) { .wl-b { height: 100%; min-height: calc(var(--line) * 14); } }
.wl-fade { position: absolute; inset: 0; max-width: 31rem; -webkit-mask-image: linear-gradient(#000 50%, transparent 95%); mask-image: linear-gradient(#000 50%, transparent 95%); }
.wl-back { position: absolute; left: 0.875rem; top: 0.875rem; right: 0; bottom: 0; background: var(--yellow); mix-blend-mode: var(--overprint); }
.wl-b .wl-sheet { position: absolute; left: 0; top: 0; right: 0.875rem; bottom: 0.875rem; overflow: hidden; }
.wl-leaf { position: absolute; display: block; width: 10%; aspect-ratio: 1 / 1.6; border-radius: 0 100% 0 100%; mix-blend-mode: var(--overprint); z-index: 2; }
.wl-leaf.f1 { left: 50%; bottom: 13%; background: var(--yellow); transform: rotate(70deg); }
.wl-leaf.f2 { left: 64%; bottom: 4%; background: var(--blue); transform: rotate(20deg); }
.wl-leaf.f3 { left: 30%; bottom: 2%; background: var(--green); transform: rotate(115deg); mix-blend-mode: normal; }
/* C: from the list to your folders; the jumbled list has no words, its coloured rows match the folders */
.wl-c { gap: var(--line); justify-items: center; }
@media (min-width: 52rem) { .wl-c { grid-template-columns: minmax(0, 4fr) auto minmax(0, 7fr); gap: 0.875rem; align-items: center; } }
.wl-jumble { width: min(100%, 14rem); background: var(--paper); color: var(--black); box-shadow: 0.4375rem 0.4375rem 0 var(--yellow); }
.wl-jumble .wl-rows { gap: 0.4375rem; padding: 0.875rem 0.875rem 1.3125rem; }
.wl-mini { display: grid; grid-template-columns: 2.625rem 1fr; gap: 0.4375rem; align-items: center; }
.wl-mini i { display: block; background: color-mix(in srgb, var(--black) 14%, var(--paper)); }
.wl-mini .k { aspect-ratio: 16 / 9; }
.wl-mini .ln { height: 0.75rem; }
.wl-mini .k.ky { background: var(--yellow); } .wl-mini .k.kb { background: var(--blue); } .wl-mini .k.kg { background: var(--green); }
.wl-mini:nth-child(1) { rotate: -2deg; translate: 6% 0; } .wl-mini:nth-child(2) { rotate: 3deg; translate: -4% 0; }
.wl-mini:nth-child(3) { rotate: -4deg; translate: 8% 0; } .wl-mini:nth-child(4) { rotate: 2deg; translate: -6% 0; }
.wl-mini:nth-child(5) { rotate: -1deg; translate: 3% 0; } .wl-mini:nth-child(6) { rotate: 4deg; translate: -2% 0; }
.wl-mini:nth-child(7) { rotate: -3deg; translate: 5% 0; }
.wl-arrow { display: block; width: 3.5rem; height: 2.625rem; background: var(--yellow); clip-path: polygon(0 32%, 58% 32%, 58% 0, 100% 50%, 58% 100%, 58% 68%, 0 68%); mix-blend-mode: var(--overprint); }
@media (max-width: 52rem) { .wl-arrow { rotate: 90deg; } }
.wl-folders { display: grid; gap: var(--line); width: 100%; max-width: 22rem; padding-top: 1.3125rem; }
.wl-folder { position: relative; background: var(--paper); color: var(--black); padding: 0.875rem; border-top: 0.4375rem solid var(--k); box-shadow: 0.4375rem 0.4375rem 0 var(--k); }
.wl-folder::before { content: ""; position: absolute; left: 0; top: -1.3125rem; width: 42%; height: 0.875rem; background: var(--k); clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
.wl-folder b { display: block; font: 700 1rem/1.25 var(--text); }
.wl-folder span { display: block; font: 400 1rem/1.25 var(--text); margin-top: 0.25rem; }
.wl-folder.k-y { --k: var(--yellow); } .wl-folder.k-b { --k: var(--blue); } .wl-folder.k-g { --k: var(--green); }
.turn { font-size: clamp(1.25rem, 3.6vw, 1.5rem); line-height: 1.4; font-weight: 500; }
.kept-for-later { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(var(--line) / 2); font: 400 clamp(1.25rem, 3.6vw, 1.5rem)/1.4 var(--text); color: var(--quiet); text-wrap: pretty; }

/* One tap and it's kept: three steps, each a drawn browser window in the page's flat style */
.tap > .copy { grid-column: 1 / -1; max-width: 40rem; }
.steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--line); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step p { margin: calc(var(--line) / 2) 0 0; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; background: var(--yellow); color: var(--black); font-weight: 700; margin-right: 0.25rem; }
.window { background: var(--paper); color: var(--black); padding: 0 0 0.4375rem; }
.bar-top { display: flex; align-items: center; gap: 0.3rem; padding: 0.4375rem 0.6rem; background: color-mix(in srgb, var(--black) 10%, var(--paper)); }
.bar-top i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: color-mix(in srgb, var(--black) 30%, var(--paper)); }
.bar-top .bar-address { flex: 1; height: 0.8rem; margin-left: 0.5rem; background: var(--paper); }
.screen { display: grid; grid-template-columns: 1.45fr 1fr; gap: 0.6rem; padding: 0.6rem; }
.player { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.player .th { aspect-ratio: 16 / 9; }
.progress { display: block; height: 0.3rem; background: color-mix(in srgb, var(--black) 18%, var(--paper)); }
.progress i { display: block; width: 34%; height: 100%; background: var(--black); }
.player .title { font: 600 1rem/1.25 var(--text); }
.save { justify-self: start; font: 700 1rem/1 var(--text); padding: 0.4375rem 0.7rem; background: var(--black); color: var(--paper); }
.save.tapped { background: var(--blue); color: var(--paper); }
.side { background: var(--paper); border-left: 3px solid color-mix(in srgb, var(--blue) 35%, var(--paper)); padding: 0.45rem; display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.side-head { font: 700 1rem/1.2 var(--text); }
.side-empty { font: 400 1rem/1.25 var(--text); color: var(--panel-quiet); }
.side-row { display: grid; gap: 0.25rem; }
.side-row .th { aspect-ratio: 16 / 9; }
.side-text b { display: block; font: 600 1rem/1.2 var(--text); overflow-wrap: anywhere; }
.side-text small { display: block; font-size: 1rem; line-height: 1.2; color: var(--panel-quiet); }

/* See it working (FEAT-178): real pictures in the same flat windows, and the walkthrough, which plays
   only when asked. Nothing here moves on its own. */
.see > .copy { max-width: 40rem; }
.shots { display: grid; gap: var(--line); }
/* The panel and the full page on the left, the tall folders picture beside them */
@media (min-width: 52rem) {
  .shots { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--line); align-items: start; }
  .shot-panel { grid-column: 1 / span 8; grid-row: 1; }
  .shot-library { grid-column: 1 / span 8; grid-row: 2; }
  .shot-folders { grid-column: 9 / span 4; grid-row: 1 / span 2; }
}
@media (max-width: 52rem) { .shot-folders { width: min(100%, 22rem); } }
.shot { margin: 0; min-width: 0; }
.shot .window { padding: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: calc(var(--line) / 2); font-size: 1rem; line-height: 1.4; }
.walkthrough { max-width: 56rem; }
.walkthrough .small { margin: calc(var(--line) / 2) 0 0; }
.player-slot:empty { display: none; }
.player-slot { margin-bottom: var(--line); background: var(--black); aspect-ratio: 16 / 9; }
.player-slot video { display: block; width: 100%; height: 100%; }

/* The invented videos' pictures: cut-paper trees, bulbs and shoots */
.th { position: relative; overflow: hidden; background: color-mix(in srgb, var(--yellow) 28%, var(--paper)); }
.th i { position: absolute; display: block; }
.th .gr { left: 0; right: 0; bottom: 0; height: 24%; background: var(--green); }
.th .tr { left: 47%; bottom: 20%; width: 5%; height: 52%; background: var(--black); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.th .br1 { left: 30%; top: 22%; width: 22%; height: 4%; background: var(--black); transform: rotate(-32deg); transform-origin: right; }
.th .br2 { left: 50%; top: 18%; width: 20%; height: 4%; background: var(--black); transform: rotate(28deg); transform-origin: left; }
.th .br3 { left: 34%; top: 40%; width: 15%; height: 4%; background: var(--black); transform: rotate(-24deg); transform-origin: right; }
.th .br4 { left: 50%; top: 36%; width: 15%; height: 4%; background: var(--black); transform: rotate(22deg); transform-origin: left; }

/* It stays with you: a stone on a windowsill */
.stone { left: 30%; bottom: 22%; width: 34%; height: 22%; background: linear-gradient(var(--stone) 70%, color-mix(in srgb, var(--stone) 75%, var(--black)) 70%); border-radius: 50% 46% 40% 44% / 62% 58% 42% 38%; mix-blend-mode: normal; }
.sill2 { left: 4%; right: 4%; bottom: 16%; height: 6%; background: var(--paper); mix-blend-mode: normal; }
.promises { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(var(--line) / 2); }

/* Change the colours: Matinee and two real Pro skins, tried on the page for this visit */
.colour-choices { display: none; flex-wrap: wrap; gap: calc(var(--line) / 2); margin: var(--line) 0 0; }
.js .colour-choices { display: flex; }
.colour-choice { display: inline-flex; align-items: center; gap: 0.6rem; min-height: calc(var(--line) * 2); font: 600 1.05rem/1 var(--text); padding: 0 1rem 0 0.7rem; border: 2.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.colour-choice[aria-pressed="true"] { background: var(--black); color: var(--paper); border-color: var(--black); }
.colour-choice b { display: inline-block; width: 1.6rem; height: 1.6rem; position: relative; }
.colour-choice b::before, .colour-choice b::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; }
.colour-choice b::before { left: 0; top: 0; background: var(--a); } .colour-choice b::after { right: 0; bottom: 0; background: var(--b); }
.mini { position: absolute; width: 34%; aspect-ratio: 3 / 4; background: var(--bg); padding: 5%; display: grid; grid-template-rows: 13% repeat(3, 1fr); gap: 6%; }
.mini span { display: block; }
.mini .hd { background: var(--h); }
.mini .r { display: grid; grid-template-columns: 46% 1fr; gap: 8%; }
.mini .r b { display: block; --x: 70%; background: radial-gradient(circle at var(--x) 38%, var(--s) 0 13%, transparent 14%), linear-gradient(to top, var(--g) 0 30%, var(--t) 30%); }
.mini .r:nth-child(3) b { --x: 30%; } .mini .r:nth-child(4) b { --x: 52%; background: linear-gradient(to top, var(--g) 0 22%, transparent 22%), radial-gradient(ellipse at 50% 100%, var(--s) 0 34%, transparent 35%), var(--t); }
.mini .r i { display: block; background: linear-gradient(var(--l) 0 0) 0 8% / 100% 20% no-repeat, linear-gradient(var(--l) 0 0) 0 58% / 64% 20% no-repeat; }
.mini-matinee { left: 5%; top: 16%; transform: rotate(-6deg); z-index: 1; }
.mini-allotment { left: 33%; top: 5%; transform: rotate(4deg); z-index: 1; }
.mini-vespers { left: 61%; top: 19%; transform: rotate(-2deg); z-index: 1; }
:root:not([data-colours]) .mini-matinee, :root[data-colours="allotment"] .mini-allotment, :root[data-colours="vespers"] .mini-vespers { z-index: 3; translate: 0 -5%; }

/* When you're ready, and the opening: install here, or send it on (FEAT-172). Without script the
   media query decides, as in the design; visitor.js decides by device before the page draws. */
.for-send, .say-browser { display: none; }
@media (max-width: 52rem), (pointer: coarse) and (hover: none) { .for-send { display: block; } .for-install { display: none; } }
html[data-visitor="install"] .for-install { display: block; }
html[data-visitor="install"] .for-send { display: none; }
html[data-visitor="other-browser"] .for-send, html[data-visitor="device"] .for-send { display: block; }
html[data-visitor="other-browser"] .for-install, html[data-visitor="device"] .for-install { display: none; }
html[data-visitor="other-browser"] .say-browser { display: inline; }
html[data-visitor="other-browser"] .say-device { display: none; }
.for-install .actions, .for-send .actions { margin-top: var(--line); }
.open .for-install .actions, .open .for-send .actions { margin-top: 0; }
.js-only { display: none; }
.js .js-only { display: block; }
.js .actions.js-only { display: flex; }
.routes { list-style: none; margin: var(--line) 0 0; padding: 0; display: grid; gap: calc(var(--line) * 2); counter-reset: route; }
.route { counter-increment: route; }
.route h3::before { content: counter(route) ". "; content: counter(route) ". " / ""; }
.route p { margin: 0 0 var(--line); }
.route .actions { margin-top: 0; }
.route .actions + .status { margin-top: calc(var(--line) / 2); }
.route label { display: block; font-weight: 500; margin-bottom: 0.4375rem; }
.route input[type="datetime-local"], .route input[type="email"] { font: 400 1.05rem/1.2 var(--text); min-height: calc(var(--line) * 2); padding: 0 0.875rem; border: 2.5px solid currentColor; background: transparent; color: inherit; max-width: 100%; color-scheme: dark; }
.route .check { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.875rem; font-weight: 400; }
.route .check input { width: 1.4rem; height: 1.4rem; accent-color: currentColor; }
.status { min-height: var(--line); font-weight: 600; }
.address { font: 800 clamp(1.75rem, 7vw, 2.6rem)/1.1 var(--poster); letter-spacing: 0.02em; overflow-wrap: anywhere; }

/* Motion: things settle into place, one way and without bounce; the words never move, nothing loops,
   and with reduced motion nothing moves at all. Each picture settles once as its band arrives, and
   half as far when you come back to it. The design's timings. */
@media (prefers-reduced-motion: no-preference) {
  .card.in .light .sun, .card.in .light .bar, .card.in .light .shade, .card.in .light .sunsill { animation: lean 2.4s var(--settle) 0.5s both; }
  .js .card:not(.in):not(.seen) .light .sun, .js .card:not(.in):not(.seen) .light .bar, .js .card:not(.in):not(.seen) .light .shade, .js .card:not(.in):not(.seen) .light .sunsill { opacity: 0; }
  @keyframes lean { from { translate: -6% 0; opacity: 0; } }
  .card .art .cut { transition: translate 1s var(--settle); }
  .card.in .stone { animation: rock 2.8s ease-in-out 0.3s both; transform-origin: 50% 100%; }
  @keyframes rock { 0% { rotate: 0deg; } 18% { rotate: -7deg; } 40% { rotate: 4.5deg; } 60% { rotate: -2.2deg; } 78% { rotate: 0.8deg; } 100% { rotate: 0deg; } }
  .card.seen.in .stone { animation-name: rock-soft; }
  @keyframes rock-soft { 0% { rotate: 0deg; } 22% { rotate: -3.5deg; } 48% { rotate: 2deg; } 74% { rotate: -0.8deg; } 100% { rotate: 0deg; } }
  .card.seen.in .light .sun, .card.seen.in .light .bar, .card.seen.in .light .shade, .card.seen.in .light .sunsill { animation-name: lean-soft; }
  @keyframes lean-soft { from { translate: -3% 0; opacity: 0.4; } }
  .js .card.seen:not(.in) .light .sun, .js .card.seen:not(.in) .light .bar, .js .card.seen:not(.in) .light .shade, .js .card.seen:not(.in) .light .sunsill { opacity: 0.4; }
  /* One tap's steps: each window settles as it comes into view (the design's panel timing), and the
     video arriving in the panel settles a beat after. */
  .step .window { transition: translate 1s var(--settle); }
  .js .step:not(.in) .window { translate: 0 1.5rem; }
  .js .step.seen:not(.in) .window { translate: 0 0.75rem; }
  /* Movement only, never fading, so its words always read at full contrast. */
  .step .arrives { transition: translate 1s var(--settle) 0.45s; }
  .js .step:not(.in) .arrives { translate: 0 -0.75rem; }
  .js .step.seen:not(.in) .arrives { translate: 0 -0.375rem; }
  /* Later never comes' Watch later pictures: each settles once, moving only, never fading, so its
     words always read at full contrast; C's folders settle a beat after, B's leaves come to rest. */
  .wl-sheet, .wl-fade, .wl-jumble { transition: translate 1s var(--settle); }
  .js .card:not(.in) .wl-a .wl-sheet, .js .card:not(.in) .wl-fade, .js .card:not(.in) .wl-jumble { translate: 0 1.5rem; }
  .js .card.seen:not(.in) .wl-a .wl-sheet, .js .card.seen:not(.in) .wl-fade, .js .card.seen:not(.in) .wl-jumble { translate: 0 0.75rem; }
  .wl-folders { transition: translate 1s var(--settle) 0.45s; }
  .js .card:not(.in) .wl-folders { translate: 0 -0.75rem; }
  .js .card.seen:not(.in) .wl-folders { translate: 0 -0.375rem; }
  .wl-leaf { transition: translate 2.6s var(--settle), rotate 2.6s var(--settle); }
  .js .card:not(.in) .wl-leaf { translate: -6% -22%; rotate: -14deg; }
  .js .card.seen:not(.in) .wl-leaf { translate: -3% -11%; rotate: -7deg; }
  .mini { transition: translate 1s var(--settle); }
  .card.in .mini { animation: setdown 2.6s var(--settle) both; } .card.in .mini-allotment { animation-delay: 0.25s; } .card.in .mini-vespers { animation-delay: 0.5s; }
  .js .card:not(.in):not(.seen) .mini { opacity: 0; }
  @keyframes setdown { 0% { rotate: 7deg; opacity: 0; } 45% { rotate: -2.5deg; opacity: 1; } 75% { rotate: 0.8deg; } 100% { rotate: 0deg; } }
  .card.seen.in .mini { animation-name: setdown-soft; }
  @keyframes setdown-soft { 0% { rotate: 3deg; } 50% { rotate: -1deg; } 100% { rotate: 0deg; } }
}

/* Occasional news, once a sign-up provider exists (hidden until then) */
.news { margin-top: calc(var(--line) * 2); }
.news label { display: block; font-weight: 500; margin-bottom: 0.4375rem; }
.news input[type="email"] { font: 400 1.05rem/1.2 var(--text); min-height: calc(var(--line) * 2); padding: 0 0.875rem; border: 2.5px solid currentColor; background: transparent; color: inherit; max-width: 100%; margin-bottom: var(--line); }