/* The Their First legal and support document shell: theirfirstwords.org/legal/* (generated by
   scripts/dev/buildLegalPages.js, after /family.css) and the sibling apps' hand-maintained privacy,
   support and FAQ pages under /numbers, /puzzles, /patterns and /tidy, which link /legal-portal.css
   after it for their own header and footer (puzzles/faq also gets /family.css after both, from
   integrateResources). Linked with ?v=<content hash>; buildLegalPages.js restamps every link. */
@font-face{
  font-family:"Gelasio"; src:url("/fonts/gelasio-700-latin.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Nunito"; src:url("/fonts/nunito-latin-var.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  color-scheme:light;
  --ink:#18364B; --ink-2:#3F5A6C; --ink-3:#4A6678;
  --paper:#F8F1E6; --paper-deep:#F2EAD8; --paper-warm:#FFF6E6; --card:#FFFDF9;
  --hairline:#E7DCC6;
  --coral:#BC7652; --coral-ink:#A9552F; --gold:#D79B3D; --gold-ink:#8A5A2B; --olive:#6A914D; --olive-ink:#4A7430;
  --serif:"Gelasio",Georgia,"Times New Roman","Noto Serif",serif;
  --sans:"Nunito","SF Pro Rounded",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
  --r-card:24px; --r-art:14px;
  --sh-1:0 1px 2px rgba(60,45,25,.06), 0 0 0 1px rgba(60,45,25,.05);
  --sh-2:0 1px 2px rgba(60,45,25,.05), 0 4px 10px rgba(60,45,25,.05), 0 16px 36px -14px rgba(60,45,25,.16), 0 0 0 1px rgba(60,45,25,.05);
  --ease:cubic-bezier(.2,.7,.2,1);
  --warn:#B45309; --warnbg:#FEF3C7; --warnline:#FCD34D;
  --gutter:20px;
}
@media (max-width:559px){ :root{--gutter:16px;} }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html,body{margin:0}
body{
  min-height:100dvh; color:var(--ink-2); font-family:var(--sans); font-size:17px; line-height:1.65;
  background:var(--paper);
  background-image:radial-gradient(rgba(120,95,55,.055) .48px,transparent .58px); background-size:7px 7px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
a.sr-only:focus{position:fixed; top:8px; left:8px; width:auto; height:auto; margin:0; padding:10px 14px; clip:auto; z-index:100;
                background:var(--card); border:1px solid var(--hairline); border-radius:10px; box-shadow:var(--sh-2); color:var(--ink); font-weight:700;}
.wrap{width:min(1120px,100% - var(--gutter)*2); margin-inline:auto;}

/* ---- The document ---- */
main{padding:20px 0 56px;}
.doc-wrap{max-width:820px; margin-inline:auto;}
.eyebrow{font-family:var(--sans); font-weight:700; font-size:11px; line-height:1; letter-spacing:.14em;
         text-transform:uppercase; color:var(--gold-ink); margin:0 0 14px;}
.doc-title{font-family:var(--serif); font-weight:700; color:var(--ink); margin:0; text-wrap:balance;
           font-size:clamp(32px,6.6vw,52px); line-height:1.02; letter-spacing:-.022em;}
.rule{width:96px; height:4px; border-radius:999px; background:var(--gold); margin:18px 0 26px;}
.doc{background:var(--card); border-radius:var(--r-card); padding:26px 22px 30px; box-shadow:var(--sh-2);}
@media (min-width:760px){ main{padding:32px 0 72px;} .doc{padding:40px 44px 44px;} }

/* Generous rhythm + a hairline above each section head, so a long policy scans as
   chapters instead of one undifferentiated column. */
.doc h2{font-family:var(--serif); font-weight:700; color:var(--ink); text-wrap:balance;
        font-size:clamp(22px,4.6vw,27px); line-height:1.2; letter-spacing:-.015em;
        margin:2em 0 .55em; padding-top:1.05em; border-top:1px solid var(--hairline);}
.doc h2:first-child{margin-top:0; padding-top:0; border-top:none;}
/* A markdown <hr> right before a section head would stack two rules; the hr is the rule. */
.doc hr + h2{padding-top:0; border-top:none; margin-top:1.4em;}
.doc h3{font-family:var(--serif); font-weight:700; color:var(--ink); font-size:19px; line-height:1.3; margin:1.7em 0 .4em;}
.doc h4,.doc h5,.doc h6{font-family:var(--sans); font-weight:700; color:var(--ink-3); font-size:12px; letter-spacing:.1em;
                        text-transform:uppercase; line-height:1.4; margin:1.6em 0 .4em;}
.doc p{margin:0 0 1.05em; text-wrap:pretty;}
.doc ul,.doc ol{margin:0 0 1.05em; padding-left:1.4em;}
.doc li{margin:.32em 0;}
.doc li>ul,.doc li>ol{margin:.34em 0 .1em;}
.doc strong,.doc b{color:var(--ink); font-weight:700;}
.doc a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px;
       overflow-wrap:break-word; transition:text-decoration-color .15s ease;}
.doc a:hover{text-decoration-color:var(--ink);}
.doc hr{border:none; border-top:1px solid var(--hairline); margin:1.9em 0;}

/* No min-width on the table: one that fits stays put, one whose min-content width
   exceeds the card scrolls inside .tscroll. th is nowrap so column heads stay on
   one line and the scroll is what gives way, not legibility. */
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.25em 0;
         border:1px solid var(--hairline); border-radius:13px; background:#fff;}
table{border-collapse:collapse; width:100%; margin:0; font-size:14.5px; line-height:1.55;}
th,td{padding:9px 12px; text-align:left; vertical-align:top;
      border-bottom:1px solid var(--hairline); border-right:1px solid var(--hairline);}
th:last-child,td:last-child{border-right:none;}
tr:last-child td{border-bottom:none;}
th{background:var(--paper-warm); color:var(--ink); font-weight:700; font-size:13.5px; white-space:nowrap;}

code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
     background:var(--paper-warm); border:1px solid var(--hairline); color:var(--gold-ink);
     padding:1px 6px; border-radius:6px; font-size:.88em; overflow-wrap:anywhere;}
blockquote{margin:1.25em 0; padding:.85em 1.15em; background:var(--paper-warm);
           border:1px solid var(--hairline); border-left:3px solid var(--gold);
           border-radius:0 13px 13px 0;}
blockquote>:last-child{margin-bottom:0;}

.ph{background:var(--warnbg); color:var(--warn); font-weight:700; font-size:.86em; padding:1px 8px; border-radius:7px; white-space:nowrap;}
.draft{background:var(--warnbg); color:var(--warn); border:1px solid var(--warnline);
       border-radius:14px; padding:13px 15px; margin:0 0 20px; font-size:14.5px; font-weight:600;}

/* Two-tone focus ring: gold is the brand ring but only 2.2:1 on paper, so a 2px ink ring fills
   the outline-offset gap exactly — the two rings abut and no background can leak between them. */
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 2px var(--ink)!important;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}