/* Shared stylesheet for every page except index.html (which stays a
   self-contained single file — do not extract its inline styles).
   The design tokens below are COPIES of the ones in index.html's :root;
   index.html is the source of truth for their values. If a token changes
   there, change it here too. */
:root{
  --night:#0A1D23; --slab:#12333D; --slab-2:#0E2831;
  --cream:#F5EEDC; --paper:#EFE7D4;
  --terra:#D27958; --terra-lift:#E08D6C;
  --olive:#8CA860; --olive-deep:#607D3A;
  --ink:#16211C;
  --dim:rgba(245,238,220,.62);
  --dimmer:rgba(245,238,220,.40);
  --hair:rgba(245,238,220,.16);
  --r:28px;
  --pad:18px;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--cream);
  font:400 17px/1.62 var(--body);
}
@media (max-width:640px){ :root{--r:20px;--pad:10px} body{font-size:16px} }

.wrap{max-width:860px;margin:0 auto;padding:var(--pad)}

/* ── header ──────────────────────────────────────────────────────────── */
.site-head{display:flex;align-items:center;gap:12px;padding:22px 4px}
.site-head .home{display:flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--cream)}
.site-head img{width:36px;height:auto;display:block}
.site-head .name{font-size:16.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase}
.site-head nav{margin-left:auto;display:flex;gap:20px}
.site-head nav a{color:var(--dim);text-decoration:none;font-size:15px;
  border-bottom:1px solid var(--hair);padding-bottom:2px}
.site-head nav a:hover{color:var(--cream)}
.site-head a:focus-visible{outline:2px solid var(--terra-lift);outline-offset:3px}

/* ── the answer slab ─────────────────────────────────────────────────── */
/* Cream document slab on the night ground — same inset-slab language as
   the homepage, but this page is for reading, so it is one quiet surface. */
.qa{background:var(--cream);color:var(--ink);border-radius:var(--r);
  padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.qa::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 18% 0%,rgba(96,125,58,.10),transparent 70%)}
.qa > *{position:relative}
.qa h1{margin:0 0 20px;color:var(--slab);font-weight:700;
  font-size:clamp(26px,4.4vw,36px);line-height:1.22;letter-spacing:-.015em;
  text-wrap:balance}
/* The citable chunk: the direct answer, first. */
.qa .core{font-size:clamp(19px,2.3vw,22.5px);line-height:1.5;margin:0 0 22px;
  color:var(--ink);letter-spacing:-.005em;text-wrap:pretty}
.qa h2{margin:34px 0 12px;color:var(--slab);font-weight:700;
  font-size:clamp(19px,2.6vw,23px);line-height:1.3;letter-spacing:-.01em}
.qa h2:first-of-type{margin-top:28px}
.qa ul{margin:0 0 18px;padding-left:0;list-style:none;display:grid;gap:12px}
.qa ul li{position:relative;padding-left:26px;color:rgba(22,33,28,.82);
  line-height:1.6}
.qa ul li::before{content:"";position:absolute;left:6px;top:.66em;width:7px;
  height:7px;border-radius:50%;background:var(--olive-deep);opacity:.75}
.qa ul li b{color:var(--slab)}
.qa p{margin:0 0 18px;color:rgba(22,33,28,.82)}
.qa a{color:#A8543A;text-decoration:none;border-bottom:1px solid rgba(168,84,58,.35)}
.qa a:hover{color:var(--terra)}
.qa blockquote{margin:26px 0;padding:18px 22px;border-radius:16px;
  background:rgba(255,253,246,.72);border:1px solid rgba(96,125,58,.20);
  font-style:italic;color:rgba(22,33,28,.86)}
.qa blockquote p{margin:0}
.qa blockquote cite{display:block;margin-top:8px;font-style:normal;
  font-size:14.5px;color:rgba(22,33,28,.60)}
.qa .video{margin-top:6px}
.qa .video a{font-weight:600}
.qa .meta{margin:26px 0 0;font-size:13.5px;color:rgba(22,33,28,.55)}

/* ── related questions ───────────────────────────────────────────────── */
.related{margin-top:14px}
.related h2{margin:0 0 12px;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dimmer);font-weight:600}
.related a{display:block;color:var(--dim);text-decoration:none;padding:10px 0;
  border-bottom:1px solid var(--hair);font-size:16px}
.related a:hover{color:var(--cream)}

/* ── follow strip ────────────────────────────────────────────────────── */
/* The compact echo of the hero card: same paper, same rows, one line each.
   The Facebook href must stay the profile.php?id= form — see index.html. */
.follow-strip{background:var(--paper);color:var(--ink);border-radius:var(--r);
  padding:22px 20px 14px;margin-top:var(--pad);
  border:1px solid rgba(22,33,28,.10);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.6) inset}
.follow-strip .note{margin:0 0 8px;font-size:14.5px;line-height:1.5;
  color:rgba(22,33,28,.62)}
.follow-strip .note b{color:var(--slab);font-size:16px;display:block;
  margin-bottom:2px}
.frow{display:flex;align-items:center;gap:14px;text-decoration:none;
  color:var(--ink);padding:12px 10px;border-radius:14px;
  transition:background .18s cubic-bezier(.2,.7,.3,1)}
.frow + .frow{border-top:1px solid rgba(22,33,28,.10)}
.frow:hover{background:rgba(22,33,28,.055)}
.frow:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.fico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;
  place-items:center;background:#fff;border:1px solid rgba(22,33,28,.10);
  box-shadow:0 1px 2px rgba(22,33,28,.06)}
.fico svg{width:19px;height:19px;fill:currentColor}
.frow:nth-of-type(1) .fico{color:#FF0000}                 /* YouTube  */
.frow:nth-of-type(2) .fico svg{fill:url(#igGrad)}         /* Instagram */
.frow:nth-of-type(3) .fico{color:#010101}                 /* TikTok   */
.frow:nth-of-type(4) .fico{color:#1877F2}                 /* Facebook */
.ftext{display:flex;flex-direction:column;min-width:0;line-height:1.28}
.ftext b{font-size:16px;font-weight:600;color:var(--slab);letter-spacing:-.005em}
.ftext span{font-size:13px;color:rgba(22,33,28,.56);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgo{margin-left:auto;flex:none;width:16px;height:16px;color:rgba(22,33,28,.32);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),color .18s}
.frow:hover .fgo{transform:translateX(4px);color:var(--terra)}

/* ── FAQ hub ─────────────────────────────────────────────────────────── */
.hub-intro{max-width:56ch;color:var(--dim);margin:0 0 8px;
  font-size:clamp(17px,1.8vw,19px);line-height:1.6}
.hub h1{margin:14px 0 14px;font-weight:700;color:var(--cream);
  font-size:clamp(28px,4.8vw,40px);line-height:1.18;letter-spacing:-.015em;
  text-wrap:balance}
.pillar{margin:34px 0 0}
.pillar h2{margin:0 0 4px;font-size:14px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--terra-lift);font-weight:600}
.qlist{list-style:none;margin:0;padding:0}
.qlist li{border-bottom:1px solid var(--hair)}
.qlist a{display:block;padding:16px 2px;text-decoration:none}
.qlist a b{display:block;color:var(--cream);font-size:18px;font-weight:600;
  letter-spacing:-.005em;line-height:1.35}
.qlist a span{display:block;margin-top:4px;color:var(--dimmer);font-size:15px;
  line-height:1.5}
.qlist a:hover b{color:var(--terra-lift)}
.qlist a:focus-visible{outline:2px solid var(--terra-lift);outline-offset:3px}

/* ── footer ──────────────────────────────────────────────────────────── */
footer{padding:44px 30px 40px;text-align:center;color:var(--dimmer);font-size:14px}
footer img{width:30px;height:auto;margin:0 auto 14px;display:block;opacity:.5}
footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--hair)}
footer a:hover{color:var(--cream)}