/* The website in the app's look (October 2026): the warm colors from the logo, Fraunces for headings, gold for the main button.
   Every website page links this file last in <head>, so it overrides the page's own colors in one place (and can be undone by
   removing the link). It sets both sets of color names the pages use: the home page's (--paper, --ink, --us…) and the guide
   pages' (--bg, --text, --accent…). The font is the app's own copy (app/fonts/fraunces.woff2, SIL Open Font License). */
@font-face{font-family:"Fraunces";src:url("/app/fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --paper:#15171B;--paper2:#1A1C21;--panel:#1E2126;--panel2:#272B31;--line:#2F3339;--ink:#EEE9E0;--tan:#A0A5AC;--muted:#8E939A;--onink:#15171B;
  --bg:#15171B;--surface:#1E2126;--surface-2:#272B31;--text:#EEE9E0;--faint:#8E939A;
  --btn:#C8A46A;--onbtn:#17140E;--soft:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.18);
  --serif:"Fraunces",Georgia,"Times New Roman",serif}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --paper:#FAF7F2;--paper2:#F5F0E8;--panel:#F2EDE4;--panel2:#EAE3D7;--line:#E2DACC;--ink:#1C1A16;--tan:#5F594F;--muted:#6B655A;--onink:#FFFFFF;
  --bg:#FAF7F2;--surface:#F2EDE4;--surface-2:#EAE3D7;--text:#1C1A16;--faint:#6B655A;
  --us:#7D5F27;--accent:#7D5F27;--btn:#8A6A2E;--onbtn:#FFFFFF;--soft:0 1px 2px rgba(60,45,20,.06),0 6px 18px rgba(60,45,20,.06)}}
:root[data-theme="light"]{
  --paper:#FAF7F2;--paper2:#F5F0E8;--panel:#F2EDE4;--panel2:#EAE3D7;--line:#E2DACC;--ink:#1C1A16;--tan:#5F594F;--muted:#6B655A;--onink:#FFFFFF;
  --bg:#FAF7F2;--surface:#F2EDE4;--surface-2:#EAE3D7;--text:#1C1A16;--faint:#6B655A;
  --us:#7D5F27;--accent:#7D5F27;--btn:#8A6A2E;--onbtn:#FFFFFF;--soft:0 1px 2px rgba(60,45,20,.06),0 6px 18px rgba(60,45,20,.06)}

/* Headings in the serif, as in the app. Body text stays in the phone's own font. */
/* (!important because some pages set a heavier weight with a more specific rule, like ".hero h1".) */
h1{font-family:var(--serif)!important;font-weight:650!important;letter-spacing:-.015em;font-variation-settings:"opsz" 72}
h2{font-family:var(--serif)!important;font-weight:600!important;letter-spacing:-.01em}
.tryq{font-family:var(--serif);font-weight:600}
h3{letter-spacing:-.005em}

/* The main button in R.O.S. gold: .btn.solid on the home page, a plain .btn on the guide pages. Outline buttons stay outlines. */
.btn.solid,.btn:not(.ghost):not(.solid){background:var(--btn);color:var(--onbtn);border-color:var(--btn)}
.btn.solid:hover,.btn:not(.ghost):not(.solid):hover{filter:brightness(1.06)}
.btn.ghost{border-color:color-mix(in srgb,var(--ink) 28%,var(--line))}

/* One header, like the app: no colored stripe above it. */
.band{display:none}