/* The client-facing side of the practice brand. Calmer and larger than the
   console: this is read once, carefully, by somebody who is probably
   nervous, sometimes on a phone, and possibly a thirteen year old. */
@font-face{font-family:'Fraunces';font-weight:300 700;font-display:swap;
  src:url('/assets/fonts/fraunces-300-700-latin.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;
  src:url('/assets/fonts/atkinson-400-latin.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;
  src:url('/assets/fonts/atkinson-700-latin.woff2') format('woff2')}

:root{
  --ground:#EBEDE6; --surface:#F7F8F4; --ink:#17231C; --muted:#4A574E;
  --fir:#1F3A2E; --field:#14342A; --aspen:#7A5510;
  --rule:#D3D8CC; --note:#F0EAD8;
  --stop:#8C3A24; --stop-soft:#F1E1DB;
  --radius:3px;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);color:var(--fir);margin:0;font-weight:600;
  letter-spacing:-.01em;text-wrap:balance}
h1{font-size:26px}
h2{font-size:20px}
p{margin:0}
[hidden]{display:none!important}

.masthead{background:var(--surface);border-bottom:1px solid var(--rule);padding:14px 20px}
.brandlock{display:flex;align-items:center;gap:11px;color:var(--fir);
  max-width:44rem;margin:0 auto}
/* Multiplied, not placed: the emblem is watercolor on opaque white. */
.brandlock .emblem{height:42px;width:auto;flex:none;mix-blend-mode:multiply}
.brandlock b{font-family:var(--serif);font-size:19px;display:block;letter-spacing:-.015em}
.brandlock small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.sheet{max-width:44rem;margin:0 auto;padding:24px 20px 40px;
  display:flex;flex-direction:column;gap:18px}

.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:14px}
.lede{font-size:17px;color:var(--muted)}
.hint{font-size:14px;color:var(--muted)}

/* One consent, one card. The heading, the words, then anything it asks for. */
.form-block{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px}
.form-block .body p{margin:0 0 11px}
.form-block .body p:last-child{margin-bottom:0}
.form-block .ack{background:var(--note);border-left:2px solid var(--aspen);
  padding:12px 14px;font-weight:700;color:var(--fir)}

label{font-weight:700;font-size:14px;color:var(--fir);display:block;margin-bottom:4px}
input[type=text],input[type=date],input[type=tel],input[type=email],select{
  font:inherit;width:100%;max-width:26rem;padding:9px 10px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius)}
.field{margin-top:2px}
.field + .field{margin-top:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px;
  color:var(--ink);margin:0}
.check input{margin-top:5px;flex:none;width:17px;height:17px;accent-color:var(--fir)}

.signature{gap:16px}
.covers{margin:0;padding-left:20px;color:var(--muted);font-size:14px}
.covers li{margin-bottom:3px}

.btn{font:inherit;font-weight:700;font-size:16px;cursor:pointer;align-self:flex-start;
  background:var(--field);color:#F2F4EF;border:1px solid var(--field);
  border-radius:var(--radius);padding:11px 20px}
.btn:hover{background:var(--fir)}
.btn[disabled]{opacity:.55;cursor:progress}
:where(input,button,select):focus-visible{outline:2px solid var(--aspen);outline-offset:2px}

.alert{padding:11px 13px;border-radius:var(--radius);font-size:15px}
.alert.stop{background:var(--stop-soft);color:var(--stop);border:1px solid var(--stop)}

.footer{border-top:1px solid var(--rule);background:var(--surface);
  padding:20px;margin-top:8px}
.footer p{max-width:44rem;margin:0 auto 6px}
.footer b{color:var(--fir)}

@media(max-width:520px){
  .card,.form-block{padding:18px}
  h1{font-size:23px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* A release names a party and describes exactly what leaves. It is set out
   as a table above the standing legal text, because that is the part the
   person is actually deciding about. */
.covers-block{border-left:2px solid var(--aspen)}
.particulars{margin:0;display:grid;grid-template-columns:11rem minmax(0,1fr);
  gap:8px 16px;font-size:15px}
.particulars dt{font-weight:700;color:var(--fir)}
.particulars dd{margin:0}
@media(max-width:560px){
  .particulars{grid-template-columns:1fr;gap:2px 0}
  .particulars dd{margin-bottom:9px}
}