/* Enfilade's legal pages: the public page's type and capsule, a calm reading column. */
:root { --ink: #0d0d0d; --ink-2: #4d4d4d; --ink-3: #8f8f8f; --rule: #e6e6e3; --tint: #f4f4f2;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 16px/1.7 var(--sans); font-optical-sizing: none; font-variation-settings: "opsz" 32;
  letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(16px, 3.4vw);
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); }
.mark { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border-radius: 100px; background: #020109; color: #fff;
  font: 450 15px/1 var(--sans); letter-spacing: -.03em; text-decoration: none; }
.mark svg { width: 16px; height: 16px; }
.top nav { display: flex; gap: 6px; padding: 4px; border-radius: 100px; background: var(--tint); }
.top nav a { padding: 8px 14px; border-radius: 100px; font-size: 14px; text-decoration: none; color: var(--ink-2); }
.top nav a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
main { max-width: 760px; margin: 0 auto; padding: 7vh max(16px, 3.4vw) 12vh; }
.label { font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
h1 { margin: 16px 0 10px; font: 400 clamp(38px, 6vw, 60px)/1.04 var(--sans); letter-spacing: -.04em; }
.meta { margin: 0 0 6vh; color: var(--ink-3); font-size: 14px; }
.lede { font-size: 18px; color: var(--ink-2); }
h2 { scroll-margin-top: 84px; margin: 48px 0 10px; padding-top: 22px; border-top: 1px solid var(--rule); font: 450 22px/1.25 var(--sans); letter-spacing: -.025em; }
h3 { scroll-margin-top: 84px; margin: 26px 0 6px; font: 450 17px/1.3 var(--sans); letter-spacing: -.015em; }
p, li { color: var(--ink-2); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.toc { margin: 0 0 6vh; padding: 20px 22px; border-radius: 14px; background: var(--tint); }
.toc ol { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.toc li { margin: 0; padding: 4px 0; font-size: 15px; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.fill { padding: 1px 6px; border-radius: 4px; background: #fff3cd; color: #7a5b00; font-size: .94em; }     /* details still to be filled in */
footer { max-width: 760px; margin: 0 auto; padding: 28px max(16px, 3.4vw) 40px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 14px; color: var(--ink-3); }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .top nav a { padding: 7px 10px; font-size: 13px; }
  .toc ol { columns: 1; }
  h2 { margin-top: 38px; }
}
.beta { margin: 0 0 6vh; padding: 18px 22px; border-radius: 14px; border: 1px solid #ecdfb8; background: #fffaeb; color: #5c4600; font-size: 15px; line-height: 1.6; }
.beta b { color: #3d2f00; font-weight: 500; }
.beta + .toc { margin-top: -3vh; }
.caps { font-size: 14.5px; letter-spacing: 0; }   /* the disclaimer and liability paragraphs, which must stand out */

/* ---- moving between pages (home, the pilot form, the studio, the legal pages): the page eases away and the next one
   rises in, while the mark, the headline and the button pressed glide across. Browsers without cross-page view
   transitions simply navigate. Each page sets html[data-vt=nav] as it is revealed (pagereveal). */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
html[data-vt=nav]::view-transition-old(root) { animation: rbNavOut .3s cubic-bezier(.4, 0, 1, 1) both; }
html[data-vt=nav]::view-transition-new(root) { animation: rbNavIn .55s cubic-bezier(.2, .8, .2, 1) .1s both; }
html[data-vt=nav]::view-transition-group(rb-mark), html[data-vt=nav]::view-transition-group(rb-title),
html[data-vt=nav]::view-transition-group(rb-door) { animation-duration: .62s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html[data-vt=nav]::view-transition-old(rb-door) { animation: rbNavFade .22s ease both; }               /* the button gives way to the card */
html[data-vt=nav]::view-transition-new(rb-door) { animation: rbNavFade .42s ease .14s reverse both; }
@keyframes rbNavOut { to { opacity: 0; transform: scale(.992); } }
html[data-vt=nav]::view-transition-group(rb-nav) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(rb-nav), ::view-transition-new(rb-nav) { width: 100%; height: 100%; object-fit: none; }   /* the header crossfades in place, crisp, never stretched */
html[data-vt=nav]::view-transition-old(rb-nav) { animation: rbNavFade .16s ease both; }
html[data-vt=nav]::view-transition-new(rb-nav) { animation: rbNavFade .3s ease .12s reverse both; }
@keyframes rbNavIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes rbNavFade { to { opacity: 0; } }
.top { view-transition-name: rb-nav; }   /* the header crossfades in place across pages */