/* The Privacy Policy and the Terms of Use (tools/standalone/legal.cjs; motion in bodies-legal.js). Each opens on its
   painting: the Terms on one sheet of paper on a desk, with the page's name printed on it, which the scroll brings up
   close until the paper fills the screen; the Privacy Policy on an astronaut walking away across a dune, which the
   scroll moves slowly toward. Then the document, set on the site's paper: the short version in the display face, then
   each part with its heading in the margin (above its text on a phone), kept apart by space and a hairline, never boxes.
   The document itself does not move: it is there to be read. */

/* the heroes keep their paintings' own shape and cover the hero (so what lives in a picture, and the Terms' sheet, has
   a known place on any screen); a wide screen takes the wide painting, a tall one the tall painting */
[data-topic="terms"] .t-hero.is-sheet { container-type: size; --ar: 1.7762; --pl: .3785; --pt: .4352; --pw: .242; --ph: .4627; --pu: .4627; }
@media (max-aspect-ratio: 1/1) { [data-topic="terms"] .t-hero.is-sheet { --ar: .563; --pl: .2513; --pt: .444; --pw: .4769; --ph: .3095; --pu: .3095; } }
[data-topic="privacy"] .t-hero { container-type: size; --ar: 1.7762; }
@media (max-aspect-ratio: 1/1) { [data-topic="privacy"] .t-hero { --ar: .563; } }
:is([data-topic="terms"] .t-hero.is-sheet :is(.t-img, .t-hero-text), [data-topic="privacy"] .t-img) { --gw: max(100cqw, 100cqh * var(--ar)); --gh: calc(var(--gw) / var(--ar)); position: absolute; left: calc(50% - var(--gw) / 2); top: calc(50% - var(--gh) / 2); right: auto; bottom: auto; width: var(--gw); height: var(--gh); }
:is([data-topic="terms"], [data-topic="privacy"]) .t-img { background-size: 100% 100%; }

/* the Terms: the page's name printed on the sheet, set like a title page in the serif italic, as ink (no shadow; it
   takes the paper's own grain and light). The words' box is the picture's box, drawn in to the sheet */
.t-hero.is-sheet .t-media::after { content: none; }   /* (the shade over other paintings would grey the paper) */
.t-hero.is-sheet .t-shade { background: var(--sys-ice); }
.t-hero.is-sheet .t-hero-text { --pp: calc(var(--gw) * var(--pw)); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--gh) * var(--pt) + var(--pp) * .08) calc(var(--gw) * (1 - var(--pl) - var(--pw)) + var(--pp) * .09) calc(var(--gh) * (1 - var(--pt) - var(--pu)) + var(--pp) * .07) calc(var(--gw) * var(--pl) + var(--pp) * .09); }
.t-hero.is-sheet .t-title, .t-hero.is-sheet.is-settled .t-title { text-shadow: none; }
.t-hero.is-sheet .t-title { font: italic 400 max(30px, calc(var(--pp) * var(--tk, .2)))/1.02 var(--sys-accent); letter-spacing: .022em; color: #15181d; mix-blend-mode: multiply; text-wrap: balance; }
/* while the sheet comes up close the header steps aside, and comes back once the paper fills the screen: it never
   stands half over the room and half over the page */
html.lg-pushing .bar { opacity: 0; visibility: hidden; transition: opacity .3s var(--sys-ease), visibility 0s linear .3s; }
html:not(.lg-pushing) [data-topic="terms"] .bar { transition: opacity .45s var(--sys-ease), visibility 0s; }

/* the cue to scroll stands on the desk below the sheet, never on its white edge: lower, with a shorter line */
[data-topic="terms"] .t-cue { bottom: max(1.2vh, 10px); gap: 8px; }
[data-topic="terms"] .t-cue i { height: 24px; }

/* the Privacy Policy's words stand either side of the astronaut: the page's name in the open sky above him, the rest
   on the smooth dune below his trail, clear of the cue to scroll. A soft dark at the top and the foot keeps them read */
[data-topic="privacy"] .t-hero-text { top: 12vh; bottom: 15vh; left: var(--gutter); right: var(--gutter); width: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
[data-topic="privacy"] .t-title { margin: 0; font-size: clamp(64px, min(8vw, 13vh), 150px); }   /* (as large as the sky above him allows) */
[data-topic="privacy"] .t-statement { margin-top: auto; }
[data-topic="privacy"] .t-line { margin-left: auto; margin-right: auto; }
[data-topic="privacy"] .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .5) 0%, rgba(8, 10, 10, 0) 26%, rgba(8, 10, 10, 0) 58%, rgba(8, 10, 10, .55) 100%); }

/* what lives in each picture (placed by tools/standalone/legal.cjs from tools/legal-art.py's measures, so it moves with
   the picture): the desk lamp's light, which breathes on its own slow time, and the sky the comets cross, seen through
   a mask of it. On the Terms nothing is drawn over the sheet */
.lg-life { position: absolute; inset: 0; pointer-events: none; }
.lg-life.is-tall { display: none; }
@media (max-aspect-ratio: 1/1) { .lg-life.is-wide { display: none; } .lg-life.is-tall { display: block; } }
[data-topic="terms"] .lg-life { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, calc(var(--pl) * 100%) calc(var(--pt) * 100%), calc(var(--pl) * 100%) calc((var(--pt) + var(--ph)) * 100%), calc((var(--pl) + var(--pw)) * 100%) calc((var(--pt) + var(--ph)) * 100%), calc((var(--pl) + var(--pw)) * 100%) calc(var(--pt) * 100%), calc(var(--pl) * 100%) calc(var(--pt) * 100%)); }
.lg-lamp { position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; translate: -50% -50%; }
.lg-lamp::before { content: ""; position: absolute; inset: -45%; border-radius: 50%; opacity: .45; background: radial-gradient(closest-side, rgba(255, 214, 158, .55), rgba(255, 178, 104, .22) 42%, rgba(255, 150, 80, .07) 70%, rgba(255, 150, 80, 0)); }
@media (prefers-reduced-motion: no-preference) { .lg-lamp::before { animation: lg-lamp 5.6s ease-in-out infinite; } }
@keyframes lg-lamp { 0%, 100% { opacity: .2; } 50% { opacity: .85; } }
.lg-sky { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); overflow: hidden;
  -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; }
/* a comet: a thin streak, its head bright, its tail going to nothing (its size, way and speed are set as it is made) */
.lg-comet { position: absolute; left: 0; top: 0; border-radius: 3px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(255, 206, 190, 0), rgba(255, 226, 214, calc(var(--b, 1) * .45)) 72%, rgba(255, 248, 242, var(--b, 1))); }

/* on the legal pages' light ground the header's own band runs solid a little further down, so a line that comes to rest
   under the search field is covered there instead of showing through it */
:is([data-topic="privacy"], [data-topic="terms"]) .bar::before { background: linear-gradient(180deg, var(--sys-ice) 0%, var(--sys-ice) 70%, rgba(237, 241, 244, 0) 100%); }

.b-lg { padding: 16vh var(--gutter) 0; }
.b-lg-doc { width: min(1080px, 100%); margin: 0 auto; }
.b-lg-short { margin: 0 auto 13vh; text-align: center; }
.b-lg-lede { max-width: 24em; margin: 0 auto; color: var(--sys-graphite); font: 300 clamp(25px, 2.45vw, 40px)/1.3 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-lg-lede .accent { font-size: 1.04em; }
.b-lg-date { margin: 30px 0 0; color: #66707a; font: 400 14px/1.4 var(--sys-body); }
.b-lg-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(28px, 5vw, 88px); padding: clamp(34px, 5.5vh, 56px) 0; position: relative; }
/* the hairlines between parts draw in from the left as their part arrives (bodies-legal.js sets --draw); still, they
   are simply there */
.b-lg-part::before, .b-lg-part:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(13, 17, 23, .12); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; pointer-events: none; }
.b-lg-part:last-child::after { top: auto; bottom: 0; }
.b-lg-h { margin: 0; color: var(--sys-graphite); font: 300 clamp(21px, 1.65vw, 27px)/1.2 var(--sys-display); letter-spacing: -.01em; text-wrap: balance; }
.b-lg-text { max-width: 62ch; }
.b-lg-text p, .b-lg-text li { color: #3f4954; font: 400 clamp(17px, 1.2vw, 19px)/1.65 var(--sys-body); letter-spacing: -.006em; text-wrap: pretty; }
.b-lg-text p, .b-lg-text ul { margin: 0; }
.b-lg-text * + p, .b-lg-text * + ul { margin-top: 1em; }
.b-lg-text ul { padding-left: 1.1em; }
.b-lg-text li + li { margin-top: .4em; }
.b-lg-text li::marker { color: #8a949e; }
.b-lg-text a { color: var(--sys-graphite); text-decoration: underline 1px rgba(13, 17, 23, .32); text-underline-offset: .22em; transition: text-decoration-color .2s var(--sys-ease); }
.b-lg-text a:hover { text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .b-lg { padding-top: 12vh; }
  .b-lg-short { margin-bottom: 9vh; }
  .b-lg-part { display: block; padding: 30px 0 34px; }
  .b-lg-h { margin-bottom: 14px; }
}