/* readborn.com: the home page's look for the plain text pages (/support/ and /privacy/).
   The owner's ask, 2026-10-22: these two pages wore the older cream "woodland" theme of
   styles.css while the home page is dark, so they read as a different site. Every value
   here is the home page's own (index.html keeps its CSS inline): the same colours, the
   same two self-hosted faces, the same sticky top bar and gold button, the same glass
   cards and the same footer band. styles.css is untouched; the /learn/ and /watch/ pages
   still use it. */
@font-face{font-family:"Baloo 2";src:url("../fonts/Baloo2-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo 2";src:url("../fonts/Baloo2-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/NunitoSans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("../fonts/NunitoSans-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#120d09; --band:#0d0906;
  --white:#fffaf1; --soft:rgba(255,248,236,.86); --dim:rgba(255,248,236,.5); --faint:rgba(255,248,236,.16);
  --gold:#f3b53f; --gold-hi:#ffc95e; --gold-ink:#2b1a04; --cream:#f6eedb;
  --card:rgba(255,240,215,.05); --card-line:rgba(255,236,205,.16);
  --display:"Baloo 2",system-ui,sans-serif; --text:"Nunito Sans",system-ui,sans-serif;
  --top:env(safe-area-inset-top,0px); --bot:env(safe-area-inset-bottom,0px);
  --bar:60px; --gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + var(--top) + 16px);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--soft);font-family:var(--text);font-size:17px;line-height:1.6;overflow-x:clip}
img{display:block;max-width:100%}
a{color:var(--gold-hi);text-underline-offset:3px}
a:hover{color:var(--white)}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:10px}

/* ---------- top bar: the wordmark home on the left, the one download button on the right ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:content-box;height:var(--bar);
  padding:var(--top) var(--gutter) 0;background:rgba(18,13,9,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--faint)}
.mark{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.top .mark img{width:clamp(112px,26vw,148px);height:auto;aspect-ratio:1000/312}
.gold{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;color:var(--gold-ink);background:var(--gold);
  border-radius:999px;min-height:44px;padding:11px 18px 9px;font-size:16px;line-height:1.1;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 28px rgba(243,181,63,.28);transition:background .2s,transform .2s}
.gold:hover{background:var(--gold-hi);color:var(--gold-ink);transform:translateY(-1px)}

/* ---------- the page: one readable column ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(32px,6vw,72px) var(--gutter) clamp(48px,7vw,96px)}
.doc h1{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(40px,8vw,76px);color:var(--cream);text-wrap:balance}
.doc .updated{margin:14px 0 0;font-size:14px;color:var(--dim)}
.doc .lead{margin:18px 0 0;font-size:clamp(18px,2vw,21px);line-height:1.45;color:var(--white)}
.doc h2{margin:44px 0 12px;font-family:var(--display);font-weight:800;font-size:clamp(23px,3vw,29px);line-height:1.15;color:var(--gold-hi)}
.doc h3{margin:26px 0 8px;font-family:var(--display);font-weight:800;font-size:20px;line-height:1.2;color:var(--white)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:1.25em}
.doc li{margin:0 0 12px;padding-left:.2em}
.doc li::marker{color:var(--gold)}
.doc strong{color:var(--white)}

/* glass card, the home page's: the contact card and every question */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:20px;padding:20px 22px}
.contact{margin:28px 0}
.contact .email{font-family:var(--display);font-weight:800;font-size:clamp(22px,3.4vw,28px);line-height:1.2}
.contact .email a{text-decoration:none}
.contact p{margin:6px 0 0;color:var(--dim);font-size:15.5px}

.faq{display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--card-line);border-radius:18px;transition:border-color .2s}
.faq details[open]{border-color:rgba(255,201,94,.42)}
.faq summary{position:relative;display:block;list-style:none;cursor:pointer;padding:18px 56px 18px 22px;
  font-family:var(--display);font-weight:800;font-size:clamp(18px,2.2vw,20px);line-height:1.25;color:var(--white)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover,.faq details[open] summary{color:var(--gold-hi)}
/* the open/close sign: two bars drawn in CSS, the vertical one folds away when open */
.faq summary::before,.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:16px;height:2.5px;margin-top:-1px;border-radius:2px;background:currentColor;transition:transform .25s}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details p{margin:0;padding:0 22px 20px}
.doc .after{margin-top:32px}

/* ---------- footer: the home page's band, plus the shared links every inner page carries ---------- */
.foot{background:var(--band);border-top:1px solid var(--faint);padding:clamp(32px,4vw,52px) var(--gutter) calc(clamp(32px,4vw,52px) + var(--bot))}
.foot-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.foot .mark img{width:clamp(150px,14vw,180px);height:auto;aspect-ratio:1000/312}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.footer-links a{font-family:var(--display);font-weight:700;font-size:16px;color:var(--soft);text-decoration:none}
.footer-links a:hover{color:var(--gold-hi)}
.foot p{margin:0;font-size:13px;color:var(--dim)}

@media (min-width:760px){
  :root{--bar:68px}
  .gold{font-size:17px;padding:12px 22px 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gold,.faq summary::before,.faq summary::after,.faq details{transition:none}
}