/* Legal and utility pages: terms, privacy, thanks and 404.
   A plain reading column on the Mist wall with lettered headings. The header, footer and
   type come from studio-shell.css, which loads after this file. */
:root{
  color-scheme:light dark;
  --paper:#F4F6F4;--surface:#fff;--ink:#17232B;--muted:#4B5B62;--line:#CBD6D1;--control:#788B84;
  --slate:#17313A;--estuary:#1F6B63;--estuary-soft:#D6E7E2;--gorse:#E2B340;--focus:#1F6B63;
  --plate:#17313A;--on-plate:#F4F6F4;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#10191E;--surface:#16232A;--ink:#E8EDEC;--muted:#ADBDBD;--line:#3B5059;--control:#839C9D;
    --slate:#1D3942;--estuary:#7FC2B6;--estuary-soft:#1B3A38;--gorse:#E8BE55;--focus:#E8BE55;
    --plate:#E8BE55;--on-plate:#17232B;
  }
}
:root[data-theme="dark"]{
  --paper:#10191E;--surface:#16232A;--ink:#E8EDEC;--muted:#ADBDBD;--line:#3B5059;--control:#839C9D;
  --slate:#1D3942;--estuary:#7FC2B6;--estuary-soft:#1B3A38;--gorse:#E8BE55;--focus:#E8BE55;
  --plate:#E8BE55;--on-plate:#17232B;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.1rem/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--estuary);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* 34rem of Archivo at 1.1rem is about 73 characters a line. */
.legal{max-width:calc(34rem + 2 * clamp(20px,4vw,32px));margin:0 auto;padding:clamp(36px,6vw,80px) clamp(20px,4vw,32px) clamp(72px,9vw,128px)}
.legal .crumbs{margin:0 0 clamp(20px,3vw,32px);font:500 .95rem/1.4 var(--sans);color:var(--muted)}
.legal .crumbs a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.legal h1{margin:0 0 .3em;font:800 clamp(3rem,8.4vw,5.4rem)/.9 var(--lettering);font-stretch:66%;letter-spacing:-.01em;text-wrap:balance}
.legal h2{margin:2.2em 0 .45em;font:800 clamp(1.75rem,3.4vw,2.2rem)/1 var(--lettering);font-stretch:72%;letter-spacing:0;text-wrap:balance}
.legal h3{margin:1.7em 0 .35em;font:700 1.1rem/1.35 var(--sans)}
.legal p,.legal ul{margin:0 0 1em}
.legal ul{padding-left:1.25rem}
.legal li{margin:.35em 0}
.legal li::marker{color:var(--estuary)}
.legal .lede{margin-bottom:1.1em;font:500 clamp(1.15rem,1.6vw,1.3rem)/1.5 var(--trade);font-stretch:110%;color:var(--ink)}
.legal .notice{margin:2em 0;padding:clamp(18px,2.4vw,26px) clamp(20px,2.8vw,30px);border:2px solid var(--line);border-radius:4px;background:var(--surface)}
.legal .notice p{margin:.3em 0}

/* Thanks and 404: a short message and one way on. */
.legal-short{min-height:min(62vh,640px);display:flex;flex-direction:column;justify-content:center}
.legal-short p{max-width:36rem;font-size:1.2rem;line-height:1.6}
.plate{position:relative;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:56px;margin-top:1.2rem;padding:0 28px;border-radius:4px;background:var(--plate);color:var(--on-plate);font:680 1.05rem/1.2 var(--sans);text-decoration:none;transition:transform .2s}
.plate::after{content:"";position:absolute;inset:4px;border:2px solid var(--gorse);border-radius:2px;opacity:0;transition:opacity .25s;pointer-events:none}
.plate:hover::after{opacity:1}
.plate:active{transform:translateY(1px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .plate::after{border-color:#17232B}}
:root[data-theme="dark"] .plate::after{border-color:#17232B}
@media(prefers-reduced-motion:reduce){.plate,.plate::after{transition:none}}