/* 047 v5: the legal pages, the notices and the 404. Built ON theme.css, chrome.css and site.css (untouched here).
   Legal words never move: each page's opening takes the hero's light, the text stands still, Let's Talk closes the page.
   The 404: the trail is drawn, breaks off at the one red point, is picked up again, lit; the ways back take the light in turn. */

.phead--legal .display { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.625rem); max-width: 20em; }
.legal-meta { font: 400 .75rem/1.6 var(--mono); letter-spacing: .06em; color: var(--bw-gun-300); }
.legal-meta b { font-weight: 500; color: var(--bw-silver); }
.phead--legal .lead { max-width: 40em; }
.legal { padding-top: 40px; }
.legal__body { max-width: 74ch; }
.legal__body .callout { position: relative; padding: 4px 0 4px 26px; }
.legal__body .callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--bw-oxblood-lit), var(--bw-oxblood)); }
.legal__body .callout p { color: var(--bw-white); }
.legal__body .ordered-block > * + * { margin-top: 1.05em; }
.legal__body .ordered-block h2 { margin-top: 2.2em; }
.legal__body h2:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ 404 */
.lost { padding-top: 24px; }
.lost__in { display: grid; gap: 48px; }
.lost__fig { margin: 0; max-width: 760px; }
.lost__a { fill: none; stroke: var(--bw-gun-300); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lost__x { fill: var(--bw-eye); }
.lost__ring { fill: none; stroke: var(--bw-eye); stroke-width: 1.2; opacity: .55; }
.lost__end { fill: var(--bw-white); }
.lost__x, .lost__ring, .lost__end { transform-box: fill-box; transform-origin: center; }
.lost__links { display: flex; flex-wrap: wrap; gap: 12px; }
.lost__links .roll__i::before { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .motion .lost__in:not(.is-on) .lost__a, .motion .lost__in:not(.is-on) .lost__b { stroke-dashoffset: 1; }
  .motion .lost__in:not(.is-on) .lost__x, .motion .lost__in:not(.is-on) .lost__ring, .motion .lost__in:not(.is-on) .lost__end { opacity: 0; }
  .motion .lost__in:not(.is-on) .lost__links li { opacity: .2; }
  .lost__in.is-on .lost__a { animation: ink-draw .8s cubic-bezier(.42, 0, .22, 1) .1s both; }
  .lost__in.is-on .lost__x { animation: lost-pop .3s cubic-bezier(.3, 1.6, .5, 1) .9s both; }
  .lost__in.is-on .lost__ring { animation: lost-ring .7s cubic-bezier(.2, .6, .3, 1) .95s both; }
  .lost__in.is-on .lost__b { animation: ink-draw .7s cubic-bezier(.42, 0, .22, 1) 1.25s both; }
  .lost__in.is-on .lost__end { animation: lost-pop .3s cubic-bezier(.3, 1.6, .5, 1) 1.9s both; }
  .lost__in.is-on .lost__links li { animation: roll-light .45s var(--ease-light) calc(1.6s + var(--i, 0) * .1s) both; }
  @keyframes lost-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
  @keyframes lost-ring { 0% { opacity: 0; transform: scale(.5); } 10% { opacity: .9; } 100% { opacity: .55; transform: none; } }
}