/* The legal page nested in the launch page: the letter's paper and type, a back
   button and a switch between the two pages, a list of sections that follows the
   reading, and the text in one comfortable column. The whole page, its bar included,
   lies on one flat paper colour. */
.legal-sheet {
  --paper: #FBFAF8;
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #3B3936;
  background: var(--paper);
  font-family: "Season Sans", system-ui, sans-serif;
  opacity: 0;
  translate: 0 28px;
  visibility: hidden;
  transition: opacity .45s cubic-bezier(.2, .8, .2, 1), translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s;
}
.legal-open .legal-sheet {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition: opacity .45s cubic-bezier(.2, .8, .2, 1), translate .6s cubic-bezier(.2, .8, .2, 1);
}
/* the launch page steps back a little behind it */
main, .stage, .phone-page { transition: scale .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease; }
.legal-open:not(.phone) :is(main, .stage) { scale: .985; filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .legal-sheet { translate: none; } .legal-open :is(main, .stage) { scale: none; } }

.legal-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--paper);
}
/* the text scrolling up softens into the bar instead of meeting a hard line */
.legal-bar::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 24px;
  background: linear-gradient(var(--paper), rgba(251, 250, 248, 0));
  pointer-events: none;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #141211;
  font: 650 15px/1 "Season Sans", system-ui, sans-serif;
  cursor: pointer;
}
.legal-back span { font-size: 17px; }
/* the pages are plain words: the open one in full ink, the others faded */
.legal-switch { display: flex; gap: 28px; }
.legal-switch a {
  color: #141211;
  opacity: .5;
  font: 550 14px/1 "Season Sans", system-ui, sans-serif;
  text-decoration: none;
  transition: opacity .3s ease;
}
.legal-switch a[aria-current] { opacity: 1; font-weight: 650; }

.legal-body {
  display: flex;
  justify-content: center;
  gap: 72px;
  padding: 40px 40px 160px;
}
.legal-index {
  position: sticky;
  top: 104px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 240px;
  flex-shrink: 0;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.legal-index-title { margin: 0 0 12px; color: #95918D; font: 650 12px/16px "Season Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.legal-index a {
  padding: 7px 12px;
  border-radius: 10px;
  color: #736F6B;
  font: 550 14px/19px "Season Sans", sans-serif;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}
.legal-index a:hover { color: #141211; }
.legal-index a.here { background: #F6F3F0; color: #141211; }

.legal-article { width: 680px; max-width: 100%; font: 550 17px/28px "Season Sans", sans-serif; }
.legal-article h1 { margin: 0; color: #141211; font: 580 56px/62px "Season Mix", serif; letter-spacing: -.015em; }
.legal-article .legal-updated { margin: 12px 0 48px; color: #95918D; font-size: 15px; }
.legal-article h2 { display: flex; gap: 12px; align-items: baseline; margin: 56px 0 16px; scroll-margin-top: 100px; color: #141211; font: 580 28px/34px "Season Mix", serif; }
/* the number is as big and dark as its title, in the sans face like every figure */
.legal-number { min-width: 36px; color: #141211; font: 600 28px/34px "Season Sans", sans-serif; }
.legal-article h3 { margin: 32px 0 8px; color: #141211; font: 650 18px/26px "Season Sans", sans-serif; }
.legal-article p, .legal-article ul, .legal-article ol { margin: 0 0 16px; }
.legal-article ul, .legal-article ol { padding-left: 22px; }
.legal-article li { margin-bottom: 8px; }
.legal-article li::marker { color: #B9B5B0; }
.legal-article strong { color: #141211; font-weight: 650; }
.legal-article a { color: #141211; text-decoration: underline; text-decoration-color: #D9D5D1; text-underline-offset: 3px; }
.legal-article a:hover { text-decoration-color: #141211; }
.legal-article table { width: 100%; margin: 8px 0 24px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.legal-article th, .legal-article td { padding: 10px 12px 10px 0; border-bottom: 1px solid #E9E6E2; text-align: left; vertical-align: top; }
.legal-article th { color: #141211; font-weight: 650; }

/* Vincent's note at the top of the Privacy Policy, as a white card on the paper,
   signed by hand the way the Manifesto letter is */
.legal-note {
  margin: 8px 0 24px;
  padding: 36px 40px 28px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 17, .04), 0 12px 32px rgba(20, 18, 17, .06);
  font: 580 18px/30px "Season Mix", serif;
  color: #3B3936;
}
.legal-article .legal-note h2 { margin: 0 0 16px; font-size: 24px; line-height: 30px; }
.legal-note .legal-sign { margin: 16px 0 0; color: #1E2A48; font: 400 48px/48px "Mrs Saint Delafield", cursive; }

/* On a phone the page itself scrolls (Safari's bars follow it), so the legal page sits
   in the page in place of the launch page instead of over it. */
.phone .legal-sheet { position: absolute; inset: 0 0 auto; min-height: 100lvh; overflow: visible; translate: none; }
.phone.legal-open body > :not(.legal-sheet) { display: none !important; }
.phone .legal-bar { padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px; }
.phone .legal-back { font-size: 14px; }
.phone .legal-switch { gap: 20px; }
.phone .legal-body { display: block; padding: 16px 20px 96px; }
.phone .legal-index { display: none; }
.phone .legal-article { width: auto; font-size: 16px; line-height: 26px; }
.phone .legal-article h1 { font-size: 36px; line-height: 42px; }
.phone .legal-article h2 { margin-top: 44px; font-size: 23px; line-height: 29px; gap: 10px; }
.phone .legal-number { min-width: 32px; font-size: 23px; line-height: 29px; }
.phone .legal-note { padding: 26px 22px 20px; border-radius: 20px; font-size: 16px; line-height: 27px; }
.phone .legal-article .legal-note h2 { margin-top: 0; font-size: 22px; line-height: 28px; }
/* Safari's bars take the page's colour, so the page under them turns to paper too */
.phone.legal-open, .phone.legal-open body { background: #FBFAF8; }
/* the Contact page's X and LinkedIn, side by side */
.legal-article .contact-links { display: flex; gap: 24px; }

/* On a desktop the legal pages share the launch page's frame: 1440 wide, scaled
   with the window the same way, the Q. at the top left 72 in and the page links at
   the top right where the launch page keeps its own, all on the same 36 top line. */
:root:not(.phone) .legal-sheet :is(.legal-bar, .legal-body) {
  width: 1440px;
  margin-inline: auto;
  zoom: var(--frame-fit, 1);
}
:root:not(.phone) .legal-bar { height: 112px; padding: 36px 72px 0; align-items: flex-start; }
/* the bar keeps the 1440 frame for its links, but its paper runs to both edges of the window */
:root:not(.phone) .legal-bar { box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax -24px); }
:root:not(.phone) .legal-bar::after { inset-inline: -100vmax; }
:root:not(.phone) .legal-back { display: none; }
.legal-home { display: none; }
:root:not(.phone) .legal-home { position: relative; display: block; width: 40px; height: 40px; }
:root:not(.phone) .legal-home img { position: absolute; left: -6px; top: -10px; height: 60px; }
:root:not(.phone) .legal-switch { height: 40px; align-items: center; }
:root:not(.phone) .legal-switch a { font-size: 15px; }
:root:not(.phone) .legal-switch a:hover { opacity: .8; }
:root:not(.phone) .legal-switch a[aria-current] { opacity: 1; }
/* the section list lines up under the Q., and the text sits in the middle of the
   frame like the launch page's sentence */
:root:not(.phone) .legal-body {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 0;
  padding: 28px 72px 160px;
}
:root:not(.phone) .legal-index { top: 136px; }
:root:not(.phone) .legal-article { justify-self: center; }
/* a phone holds the links' hover look at rest, since a tap leaves them hovered */
.phone .legal-article a:hover { text-decoration-color: #D9D5D1; }