/* Header and footer for the sibling apps' document pages (/numbers, /puzzles, /patterns, /tidy
   privacy, support and FAQ). Linked after /legal.css; the privacy and support pages load no
   /family.css. */
/* ---- Header (verbatim from the home page; deliberately not sticky) ---- */
.site-head{padding:16px 0 8px;}
.head-row{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); white-space:nowrap;
       font-family:var(--serif); font-weight:700; font-size:18px; letter-spacing:-.01em;}
.brand img{width:32px; height:32px; border-radius:9px; box-shadow:0 1px 3px rgba(0,0,0,.14);}
.nav{display:flex; align-items:center; gap:2px; flex:none;}
.nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 11px; color:var(--ink-2);
       text-decoration:none; font-size:15px; font-weight:600; white-space:nowrap;}
.nav a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:4px;}
.nav a.nav-link{display:none;}
.nav a.nav-cta{margin-left:6px; padding:0 16px; border-radius:999px; background:var(--ink); color:#fff; font-weight:700;
               box-shadow:var(--sh-1); transition:transform var(--dur-fast,.12s) var(--ease),box-shadow var(--dur-base,.16s);}
.nav a.nav-cta:hover{text-decoration:none; transform:translateY(-1px); box-shadow:var(--sh-2);}
.nav a.nav-cta:active{transform:translateY(0);}
@media (min-width:760px){ .nav a.nav-link{display:inline-flex;} }
@media (max-width:399px){
  .head-row{gap:10px;}
  .brand{font-size:15.5px; gap:8px;} .brand img{width:28px; height:28px; border-radius:8px;}
  .nav a.nav-cta{padding:0 12px; font-size:13px;}
}

/* ---- Footer (verbatim from the home page) ---- */
footer{margin-top:auto; padding:48px 0 32px;}
.fgrid{display:grid; gap:26px; text-align:left; padding-bottom:28px; border-bottom:1px solid var(--hairline);}
.fcol h3{margin:0 0 4px; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink);}
.fcol ul{list-style:none; margin:0; padding:0;}
.fcol a{display:inline-flex; align-items:center; min-height:44px; color:var(--ink-3); text-decoration:none; font-size:14px; font-weight:700;}
.fcol a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
.fsign{font-family:var(--serif); font-weight:700; color:var(--ink); font-size:17px; margin:24px 0 8px; text-align:center; text-wrap:balance;}
.copy{color:var(--ink-3); font-size:12.5px; font-weight:600; text-align:center;}
@media (min-width:760px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px;} .fcol a{min-height:34px;} }