/* The warmer house look, shared by every page.
   Loaded after each page's own styles, so it sets the paper, the cards and the
   footer once for the whole site: parchment paper, cards framed with a gold
   hairline like the art's double rule, and the footer on the maroon wheat panel. */

/* parchment, not white */
:root{--paper:#f6eedf;--panel:#fffaf1;--rule:#e3d5ba;--gold-soft:#f4e8cd;
  --shadow:0 1px 2px rgba(90,60,20,.08),0 4px 14px rgba(90,60,20,.06)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#19130d;--panel:#231b13;--rule:#3e3226;--gold-soft:#2e2416}
}
:root[data-theme="dark"]{--paper:#19130d;--panel:#231b13;--rule:#3e3226;--gold-soft:#2e2416}

body{background-color:var(--paper);
  background-image:radial-gradient(ellipse 90% 60% at 50% 0,rgba(196,150,60,.12),transparent 70%),
                   radial-gradient(ellipse 80% 50% at 50% 100%,rgba(123,23,26,.05),transparent 70%);
  background-attachment:fixed}

/* the home page's ways in: a cream card inside a gold hairline */
.way{background:var(--panel);border:1px solid var(--rule);
  box-shadow:inset 0 0 0 4px var(--panel),inset 0 0 0 5px rgba(176,139,63,.35),var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.way:hover{transform:translateY(-2px);border-color:var(--gold);
  box-shadow:inset 0 0 0 4px var(--panel),inset 0 0 0 5px rgba(176,139,63,.6),0 6px 18px rgba(90,60,20,.12)}

/* the footer on the maroon panel with the gold wheat */
footer{border:0;margin-top:46px;text-align:center;color:#f1e4c6;background:#4f0d10;
  border-style:solid;
  border-image:url(/frame-maroon.webp) 36 430 290 430 fill / 12px 150px 100px 150px;
  padding:30px 160px 64px}
footer p{color:#f1e4c6 !important;max-width:44rem;margin:0 auto;padding:0}
footer b,footer a,footer a:visited{color:#fbf1da !important}
footer a:hover{color:#ffffff !important}
footer .rule,footer .crest{filter:brightness(0) invert(.9) sepia(.6) saturate(1.6) !important;opacity:.85 !important}
@media (max-width:760px){
  footer{border-image:url(/frame-maroon.webp) 36 430 290 430 fill / 8px 64px 44px 64px;padding:24px 22px 52px}
}
@media print{footer{border-image:none;background:none;color:#000}}

#swtoast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  z-index:9999;max-width:min(560px,calc(100vw - 32px));background:#4f0d10;color:#f4e6c8;
  border:1px solid #b08b3f;border-radius:10px;padding:12px 16px;font:400 14px/1.5 Inter,sans-serif;
  box-shadow:0 8px 26px rgba(0,0,0,.25);transition:opacity .25s ease,transform .25s ease}
#swtoast.show{opacity:1;transform:translate(-50%,0)}
#swtoast b{color:#fff3d6}

/* what the Gospel Grain Publishing Library says under a verse, and in a search */
.note.ggp{border-left:3px solid #b08b3f;background:var(--gold-soft);padding:10px 12px 4px;border-radius:0 8px 8px 0}
.note.ggp .gq{margin:0 0 9px}
.note.ggp .gw{display:block;font:600 11px/1.5 Inter,sans-serif;letter-spacing:.03em;color:var(--ox);margin-top:2px}
.note.ggp .gw i{font-style:italic;font-weight:600}
.tag.g{border-color:#b08b3f !important;color:#8a6a22 !important;background:var(--gold-soft) !important}
.ggphead{font:600 12px/1.4 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ox);
  margin:22px 0 8px;padding-top:12px;border-top:1px solid var(--rule)}
.ggphit{border-left:3px solid #b08b3f;background:var(--gold-soft);padding:9px 12px;margin:0 0 9px;border-radius:0 8px 8px 0}
.ggphit mark{background:rgba(176,139,63,.3);color:inherit;padding:0 1px}
.ggphit .gw{display:block;font:600 11px/1.5 Inter,sans-serif;color:var(--ox);margin-top:3px}
.ggpoff{font:400 13px/1.55 Inter,sans-serif;color:var(--muted);margin:8px 0 0}
.ggpoff button{font:inherit;color:var(--ox);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* Begin a Lesson · Sermon · Study: the builder, gold, in the header of every page */
.beginbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none;
  font:600 11.5px/1 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  background:linear-gradient(180deg,#e9c977,#c99c45);color:#3d0a0c !important;border:1px solid #a87c2c;border-radius:8px;
  padding:8px 13px;min-height:36px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 6px rgba(120,80,20,.18)}
.beginbtn:visited{color:#3d0a0c !important}
.beginbtn:hover{background:linear-gradient(180deg,#f1d68e,#d4a851);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 4px 12px rgba(120,80,20,.25)}
.beginbtn:active{transform:translateY(1px)}
.beginbtn.big{font-size:13.5px;padding:15px 26px;border-radius:999px;min-height:48px}
.beginbtn.small{font-size:10.5px;padding:6px 11px;min-height:30px;margin-left:10px;vertical-align:middle}
.begintop{text-align:center;margin:18px 0 0}
@media (max-width:560px){
  :has(> .beginbtn){flex-wrap:wrap}
  .bar > .beginbtn{order:98;flex:1 1 100%}
  .beginbtn.small{margin:8px 0 0}
}

/* the name of the site, one clean lockup on every page: the mark, the name on one line,
   and the publisher beneath it, never wrapped or crowded */
.bar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
/* nothing in the header is squeezed narrower than its words: when the row is full, it wraps */
.bar{flex-wrap:wrap}
.bar > a,.bar > button,.bar > .brand,.bar > .name,.bar > .mark,#back{flex-shrink:0}
.bar .brand img,.bar > .mark,.bar .brand .mark{width:46px;height:46px;flex:none;border-radius:50%}
.bar .brand > span,.bar .brand .name,.bar > .name{font:600 17px/1.15 "EB Garamond",Georgia,serif;letter-spacing:.01em;white-space:nowrap;color:var(--ink)}
.bar .brand small,.bar > .name small{display:block;font:600 9.5px/1.4 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;margin-top:2px}
#back{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;width:auto}
@media (max-width:560px){
  #back{font-size:0 !important;gap:0;min-width:40px;justify-content:center;padding-left:10px;padding-right:10px}
  #back > span{font-size:17px}
  .bar .brand img,.bar > .mark,.bar .brand .mark{width:40px;height:40px}
  .bar .brand > span,.bar .brand .name,.bar > .name{font-size:16px}
  .bar .brand small,.bar > .name small{font-size:8.5px;letter-spacing:.1em}
}

/* "+ Study": keep what you find in a study, then and there (tostudy.js) */
.tostudy{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border-radius:999px;
  border:1px solid #b08b3f;background:var(--gold-soft,#f5eeda);color:#7B171A;padding:5px 9px;white-space:nowrap}
.tostudy:hover{background:#7B171A;color:#f6e3b4;border-color:#7B171A}
#tostudy{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;z-index:10001;
  width:min(440px,calc(100vw - 28px));background:var(--panel,#fff);color:var(--ink,#1d1a16);border:1px solid #b08b3f;border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);padding:16px 18px;font:400 15px/1.5 Inter,sans-serif;transition:opacity .18s,transform .18s}
#tostudy.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
#tostudy-shade{position:fixed;inset:0;background:rgba(30,20,10,.35);opacity:0;pointer-events:none;z-index:10000;transition:opacity .18s}
#tostudy-shade.open{opacity:1;pointer-events:auto}
#tostudy .ts-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
#tostudy .ts-h b{font:600 20px/1.2 "EB Garamond",Georgia,serif;color:#7B171A}
#tostudy .ts-x{border:1px solid var(--rule,#ddd6c9);background:none;border-radius:8px;width:32px;height:32px;cursor:pointer;color:inherit}
#tostudy .ts-what{font:italic 400 16px/1.4 "EB Garamond",Georgia,serif;color:var(--muted,#6b6256);margin:0 0 10px}
#tostudy .ts-l{display:flex;flex-direction:column;gap:5px;font:600 11px/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b6256);margin:0 0 12px}
#tostudy select,#tostudy input{font:400 16px/1.3 "EB Garamond",Georgia,serif;padding:9px 10px;border:1px solid var(--rule,#ddd6c9);border-radius:8px;background:var(--paper,#fbf9f4);color:inherit;text-transform:none;letter-spacing:0}
#tostudy .ts-acts{display:flex;gap:8px}
#tostudy .ts-go{font:600 12px/1 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;background:#7B171A;color:#f6e3b4;border:0;border-radius:999px;padding:12px 18px;cursor:pointer}
#tostudy .ts-cancel{font:600 12px/1 Inter,sans-serif;background:none;border:1px solid var(--rule,#ddd6c9);border-radius:999px;padding:11px 16px;cursor:pointer;color:inherit}
#tostudy .ts-note,#tostudy .ts-err{font-size:13px;color:var(--muted,#6b6256)}
#tostudy .ts-err{color:#b3261e}
.ts-spin{display:inline-block;width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tsspin .7s linear infinite;margin-right:6px;vertical-align:-1px}
@keyframes tsspin{to{transform:rotate(360deg)}}
#tostudy-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:10002;max-width:min(560px,calc(100vw - 32px));
  background:#4f0d10;color:#f4e6c8;border:1px solid #b08b3f;border-radius:10px;padding:12px 16px;font:400 14px/1.5 Inter,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s}
#tostudy-toast.show{opacity:1;pointer-events:auto}
#tostudy-toast a{color:#f2d27a;font-weight:600}
@media print{.tostudy,#tostudy,#tostudy-shade,#tostudy-toast{display:none !important}}

/* ---- the one header, the same on every page ------------------------------------------------
   The name on the left; Sign In, light or dark, and the one gold Begin on the right; beneath,
   one row of the same buttons everywhere, the page you are on filled in. A page's own tools
   (the reader's book picker, the map's Find) sit in their own row below it. */
.swhead{background:var(--panel,#fffaf1);border-bottom:1px solid var(--rule,#e3d5ba);box-shadow:0 1px 0 rgba(176,139,63,.25)}
.swhead .sw-in{max-width:1180px;margin:0 auto;padding:12px 16px 0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 16px}
.swhead .sw-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink,#1d1a16);min-width:0}
.swhead .sw-mark{width:52px;height:52px;border-radius:50%;flex:none}
:root[data-theme="dark"] .swhead .sw-mark{content:url(/mark-dark.png)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .swhead .sw-mark{content:url(/mark-dark.png)}}
.swhead .sw-brand span{font:600 21px/1.1 "EB Garamond",Georgia,serif;letter-spacing:.01em;white-space:nowrap;color:var(--ink,#1d1a16)}
.swhead .sw-brand small{display:block;font:600 9.5px/1.4 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6b6256);margin-top:3px}
.swhead .sw-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.swhead .sw-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:38px;padding:0 14px;
  border:1px solid var(--rule,#e3d5ba);border-radius:8px;background:var(--paper,#f6eedf);color:var(--ink,#1d1a16);
  font:600 13.5px/1 Inter,sans-serif;letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.swhead .sw-btn:visited{color:var(--ink,#1d1a16)}
.swhead .sw-btn:hover{border-color:var(--gold,#b08b3f);background:var(--gold-soft,#f4e8cd)}
.swhead .sw-btn:active{transform:translateY(1px)}
.swhead .sw-btn:focus-visible{outline:2px solid var(--gold,#b08b3f);outline-offset:2px}
.swhead .sw-icon{width:38px;padding:0;font-size:17px}
.swhead .beginbtn{height:38px;min-height:38px;padding:0 16px;font-size:12px;border-radius:8px}
.swhead .sw-nav{grid-column:1 / -1;display:flex;gap:6px;border-top:1px solid var(--rule,#e3d5ba);padding:10px 0 12px;overflow-x:auto;scrollbar-width:none}
.swhead .sw-nav::-webkit-scrollbar{display:none}
.swhead .sw-nav .sw-btn{flex:1 1 0;min-width:max-content}
.swhead .sw-nav .sw-btn[aria-current="page"]{background:#7B171A;border-color:#7B171A;color:#f6e3b4}
@media (max-width:760px){
  .swhead .sw-in{grid-template-columns:1fr auto;padding-top:10px}
  .swhead .sw-mark{width:42px;height:42px}
  .swhead .sw-brand span{font-size:18px}
  .swhead .sw-brand small{font-size:8.5px;letter-spacing:.1em}
  .swhead .sw-nav{margin:0 -16px;padding:10px 16px 12px}
  .swhead .sw-nav .sw-btn{flex:0 0 auto}
}
@media (max-width:760px){
  .swhead .sw-in{grid-template-columns:1fr auto auto}
  .swhead .sw-acts{display:contents}
  .swhead .sw-acts .beginbtn{grid-column:1 / -1;order:0}
}
@media print{.swhead{display:none !important}}
.bar.pagetools{margin-top:0}
/* a page's own tools, in the same shape as the header's buttons */
.bar.pagetools{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bar.pagetools button,.bar.pagetools select,.bar.pagetools input{box-sizing:border-box;height:38px;min-height:38px;border-radius:8px}
.bar.pagetools button{display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--rule,#e3d5ba);
  background:var(--paper,#f6eedf);color:var(--ink,#1d1a16);font:600 13.5px/1 Inter,sans-serif;letter-spacing:.01em;text-transform:none;cursor:pointer}
.bar.pagetools button:hover{border-color:var(--gold,#b08b3f);background:var(--gold-soft,#f4e8cd)}
.bar.pagetools button.on,.bar.pagetools button[aria-pressed="true"]{background:#7B171A;border-color:#7B171A;color:#f6e3b4}
.bar.pagetools button{text-transform:none !important;letter-spacing:.01em !important;font:600 13.5px/1 Inter,sans-serif !important;height:38px !important;border-radius:8px !important}
@media (max-width:620px){.bar.pagetools #go{order:2}}
@media (max-width:440px){
  .swhead .sw-in{gap:8px 8px}
  .swhead .sw-brand{gap:8px}
  .swhead .sw-mark{width:36px;height:36px}
  .swhead .sw-brand span{font-size:clamp(15px,4.3vw,18px)}
  .swhead .sw-acts .sw-btn{padding:0 11px}
  .swhead .sw-acts .sw-icon{padding:0}
}
/* cards read centred (the author's preference, 30 Oct 2026); long reading, such as
   Scripture, the notes and the terms, stays set from the left so the eye can follow it */
.work,.way{text-align:center}
.work .kind,.way b{margin-left:auto;margin-right:auto}