/* Narrow Way Discipleship: the shared look and navigation for every page.
   Owner, 2026-10-27: "like we just walked into the Sistine Chapel": the lighter side of the Narrow Way logo and of Marcus,
   beautiful, strong and grounded, respectful, with prominence; and small touches of a dark crimson of our own.
   Fresco plaster walls lit from above, ink-dark lettering in a classic serif, ochre gold from the logo for rules and frames,
   the pale stone of the sheepfold, the fresco blue of its doorway sky (used once, behind Marcus), and Narrow Way crimson for
   the main action, the current page and links. Linked after each page's own <style>, so these base rules lead. */
/* EB Garamond: a revival of Claude Garamond's 16th-century types, the Renaissance of the Sistine Chapel. Bundled (owner, 2026-10-28). */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/EBGaramond-latin.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 700;font-display:swap;src:url(/static/fonts/EBGaramond-latin-italic.woff2) format("woff2")}
:root{
  --ground:#f4eee2;      /* fresco plaster */
  --panel:#ece3d1;       /* the menu: warmer parchment */
  --card:#fbf8f1;        /* vellum */
  --well:#fffdf8;        /* inputs */
  --raised:#e8dec9;      /* quiet buttons */
  --line:#dccfb7;        /* hairlines */
  --line-2:#c6b594;      /* stronger edges */
  --text:#2a2017;        /* iron-gall ink, the logo's lettering */
  --muted:#655642;       /* 6:1 on the plaster */
  --faint:#857560;
  --stone:#5d5140;       /* the sheepfold's stone, darkened for text */
  --gold:#946a1f;        /* ochre gold, dark enough to read */
  --gold-hi:#7d5814;
  --gilt:#c9a050;        /* gilding: rules, frames, rings (decoration only) */
  --gold-ink:#fffaf0;    /* text on gold */
  --gold-wash:rgba(185,140,55,.14);
  --crimson:#7c1d2b;     /* Narrow Way crimson */
  --crimson-hi:#94283a;
  --crimson-ink:#fff6ea;
  --fresco:#8fb0cf;      /* the doorway sky */
  --danger:#8e2a2a;--danger-bg:#f3dcd6;
  --ok:#3f6b39;--ok-bg:#e1ecd7;
  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --radius:14px;
  --shadow:0 1px 2px rgba(92,64,28,.06),0 12px 28px -18px rgba(92,64,28,.35);
  --frame:0 0 0 1px var(--card),0 0 0 2px rgba(201,160,80,.55);  /* a gilded double rule, like the logo's rings */
  --ease:cubic-bezier(.22,1,.36,1);
  --rail:240px;--tabbar:64px;
  color-scheme:light;
}
html{background:var(--ground);scrollbar-color:var(--line-2) transparent}
/* Plaster: a faint grain, and light falling from above. */
body{font-family:var(--sans);background-color:var(--ground);color:var(--text);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 560px at 60% -160px,rgba(255,252,243,.95),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:rgba(201,160,80,.35);color:var(--text)}
a{color:var(--crimson);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{color:var(--crimson-hi)}
:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;border-radius:8px}
h1,h2,h3,h4{text-wrap:balance;color:var(--text)}
h1{font-family:var(--serif);font-weight:600;letter-spacing:-.005em}
h2{font-family:var(--serif);font-weight:600}
h3{color:var(--gold)}
input,select,textarea{background:var(--well);border:1px solid var(--line-2);color:var(--text);caret-color:var(--crimson)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gilt);box-shadow:0 0 0 3px var(--gold-wash)}
/* The main action wears the crimson; quiet actions are stone. */
button,.btn{font-family:inherit;background:var(--crimson);color:var(--crimson-ink);border:0;border-radius:11px;font-weight:600;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 14px -8px rgba(124,29,43,.6);
  transition:background-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease)}
:where(button,.btn):hover{background:var(--crimson-hi);color:var(--crimson-ink)}
:where(button,.btn):active{transform:translateY(1px)}
button:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default;transform:none}
button.ghost,.btn.ghost,a.ghost{background:var(--raised);color:var(--text);font-weight:450;box-shadow:inset 0 0 0 1px var(--line)}
:where(button.ghost,.btn.ghost,a.ghost,button.icon,.listen):hover{background:#dfd2b8;color:var(--text)}
button.danger{background:var(--danger-bg);color:var(--danger);box-shadow:inset 0 0 0 1px #e2b9b0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.muted,.small{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line)}
table{border-color:var(--line)}th{color:var(--gold)}td,th{border-color:var(--line)!important}
/* Scripture is set like a printed Bible, on vellum with a gilded rule. */
blockquote{font-family:var(--serif);font-size:1.08em;line-height:1.6;color:var(--text);background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0;box-shadow:var(--frame),var(--shadow)}
blockquote .ref{display:block;margin-top:10px;font-family:var(--sans);font-size:.76em;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.scripture,.verse{font-family:var(--serif)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid var(--ground)}::-webkit-scrollbar-track{background:transparent}

/* ---- The shell: one navigation for the whole app. A rail on wide screens, a tab bar on phones. ---- */
.nwd-nav{position:fixed;z-index:4;background:var(--panel);display:flex}
.nwd-nav a{color:var(--stone);text-decoration:none}
.nwd-nav .item{display:flex;align-items:center;gap:12px;border-radius:12px;transition:background-color .18s var(--ease),color .18s var(--ease)}
.nwd-nav .item svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nwd-nav .item .mx{width:24px;height:24px;flex:none;border-radius:7px;overflow:hidden;line-height:0;box-shadow:0 0 0 1px var(--line-2)}
.nwd-nav .item .mx svg{width:24px;height:auto;fill:initial;stroke:none}
.nwd-nav .item:hover{color:var(--text);background:rgba(255,252,243,.6)}
.nwd-nav .item[aria-current="page"]{color:var(--crimson);background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);font-weight:600}
.nwd-nav .brand,.nwd-nav .foot{display:none}
@media (min-width:900px){
  body{padding-left:var(--rail)}
  /* A gilded double rule on the menu's edge, like the rings of the logo. */
  .nwd-nav{top:0;left:0;bottom:0;width:var(--rail);flex-direction:column;gap:4px;padding:22px 16px;
    border-right:1px solid var(--line-2);box-shadow:inset -4px 0 0 #e8dec9,inset -5px 0 0 rgba(201,160,80,.5);
    background:linear-gradient(180deg,#f1e9d9,#e8dec9)}
  .nwd-nav .brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:2px 6px 22px;margin-bottom:6px;color:var(--text);
    border-bottom:1px solid var(--line)}
  .nwd-nav .brand img{width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 3px var(--card),0 0 0 4px var(--gilt),0 10px 22px -12px rgba(92,64,28,.6)}
  .nwd-nav .brand b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.1;color:var(--text)}
  .nwd-nav .brand span{display:block;font-family:var(--serif);font-size:15px;color:var(--stone)}
  .nwd-nav .item{padding:10px 12px;font-size:15px}
  .nwd-nav .foot{display:block;margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--faint)}
  .nwd-nav .foot a{color:var(--stone)}
  .hide-wide{display:none!important}
}
@media (max-width:899.98px){
  body{padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  .nwd-nav{left:0;right:0;bottom:0;height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);
    border-top:1px solid var(--line-2);justify-content:space-around;background:rgba(241,233,217,.97);box-shadow:0 -6px 18px -12px rgba(92,64,28,.35)}
  .nwd-nav .item{flex:1;flex-direction:column;justify-content:center;gap:3px;font-size:11px;padding:4px 2px;max-width:96px}
  .nwd-nav .item[aria-current="page"]{background:transparent;box-shadow:none}
}
/* Page headers: the logo lives in the menu on wide screens. */
@media (min-width:900px){header .logo{display:none}}
header{background:rgba(244,238,226,.88)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:saturate(1.1) blur(10px)}
header b{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.005em;color:var(--text)}
header img{box-shadow:0 0 0 1px var(--gilt)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}

/* ---- The help bubble: a quick word with Marcus from any page. ---- */
.nwd-help{position:fixed;z-index:6;right:22px;bottom:22px;width:60px;height:60px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#fffdf6,#efe5d1);box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--gilt),0 14px 26px -12px rgba(92,64,28,.55)}
.nwd-help:hover{background:radial-gradient(circle at 50% 38%,#fffefa,#f4ebd9);transform:translateY(-2px)}
.nwd-help .mx{width:42px;height:42px;border-radius:50%;overflow:hidden;line-height:0}.nwd-help .mx svg{width:42px;height:auto}
.nwd-help[aria-expanded="true"]{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--crimson),0 14px 26px -12px rgba(92,64,28,.55)}
.nwd-panel{position:fixed;z-index:6;right:22px;bottom:96px;width:min(380px,calc(100vw - 24px));height:min(520px,calc(100vh - 140px));display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--frame),0 28px 60px -22px rgba(92,64,28,.55);overflow:hidden;
  animation:nwd-rise .22s var(--ease)}
.nwd-panel[hidden]{display:none}
@keyframes nwd-rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.nwd-panel .hd{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.nwd-panel .hd b{font-family:var(--serif);font-size:18px;flex:1}.nwd-panel .hd a{font-size:13px}
.nwd-panel .x{background:var(--raised);color:var(--text);width:30px;height:30px;padding:0;border-radius:9px;display:grid;place-items:center;box-shadow:none}
.nwd-panel .log{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.nwd-panel .m{max-width:88%;padding:9px 12px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;font-size:14.5px;line-height:1.5}
.nwd-panel .u{align-self:flex-end;background:#efe2c4;color:var(--text);border-bottom-right-radius:5px}
.nwd-panel .a{align-self:flex-start;background:var(--ground);border:1px solid var(--line);border-bottom-left-radius:5px}
.nwd-panel form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.nwd-panel textarea{flex:1;width:auto;font:inherit;font-size:14.5px;border-radius:12px;padding:9px 10px;resize:none;margin:0;min-height:42px;height:42px;max-height:120px}
.nwd-panel form button{padding:8px 14px;align-self:flex-end;height:42px}
.nwd-panel .fine{margin:0;padding:0 12px 10px;font-size:11.5px;line-height:1.4;color:var(--faint)}
@media (max-width:899.98px){.nwd-help{right:14px;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px);width:54px;height:54px}
  .nwd-help .mx,.nwd-help .mx svg{width:38px;height:38px}
  .nwd-panel{right:12px;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 78px);height:min(480px,calc(100vh - var(--tabbar) - 120px))}}

/* Selected tabs and filters are ink, like a printed rubric's black; crimson stays rare. */
.tabs a.on{background:var(--text);color:var(--card);font-weight:600}

/* Garamond has a small x-height: let every serif setting keep the size each page chose, read by x-height. */
h1,h2,blockquote,header b,.nwd-nav .brand b,.nwd-nav .brand span,#say.quiet,.stage .nm,.course .t,.weeks .t,.nwd-panel .hd b,.detail h2{font-size-adjust:.47}

/* ---- Guided tours: a spotlight on one part of the page at a time, with a card from Marcus. ---- */
.nwd-tourbtn{width:auto!important;height:34px;padding:0 11px!important;display:inline-flex!important;align-items:center;gap:6px;border-radius:10px;
  background:var(--raised)!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px var(--line)!important;font-size:14px;font-weight:500}
.nwd-tourbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
header .nwd-tourbtn{margin-left:auto}header b+.nwd-tourbtn{margin-left:0}
@media (max-width:420px){.nwd-tourbtn .lbl{display:none}.nwd-tourbtn{padding:0 8px!important}}
.nwd-tour{position:fixed;inset:0;z-index:60}.nwd-tour [hidden]{display:none!important}
.nwd-tour .hole{position:fixed;border-radius:14px;box-shadow:0 0 0 2px var(--gilt),0 0 0 9999px rgba(42,32,23,.52);pointer-events:none;
  transition:left .28s var(--ease),top .28s var(--ease),width .28s var(--ease),height .28s var(--ease)}
.nwd-tour .tcard{position:fixed;background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:16px 18px 14px;
  box-shadow:var(--frame),0 30px 60px -20px rgba(42,32,23,.6);animation:nwd-rise .22s var(--ease);max-height:calc(100vh - 24px);overflow:auto}
.nwd-tour .tcard.center{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px))!important;animation:none}
.nwd-tour .th{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.nwd-tour .th .mx{width:34px;height:34px;border-radius:50%;overflow:hidden;line-height:0;box-shadow:0 0 0 1px var(--card),0 0 0 2px var(--gilt)}.nwd-tour .th .mx svg{width:34px;height:auto}
.nwd-tour .count{font-size:12.5px;color:var(--muted)}
.nwd-tour h3{font-family:var(--serif);font-size-adjust:.47;font-size:21px;color:var(--text);margin:4px 0 6px}
.nwd-tour .tb{margin:0;color:var(--text);line-height:1.55;font-size:15.5px}
.nwd-tour .tx:not(:empty){margin-top:10px}
.nwd-tour .tx .link{background:none;box-shadow:none;color:var(--crimson);padding:0;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.nwd-tour .tr{display:flex;gap:8px;align-items:center;margin-top:14px}
.nwd-tour .tr .skip{margin-right:auto;background:none!important;box-shadow:none!important;color:var(--muted);padding:8px 4px}
.nwd-tour .tr button{padding:9px 14px}

/* School and Study together share one section (owner, 2026-10-28). */
.seg{display:inline-flex;gap:4px;padding:4px;margin:2px 0 18px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.seg a{padding:7px 16px;border-radius:999px;color:var(--text);text-decoration:none;font-size:15px}
.seg a[aria-current="page"]{background:var(--crimson);color:var(--crimson-ink,#fff)}
.seg a:hover:not([aria-current="page"]){background:var(--raised)}

/* Buttons on the Messages, Study and Church pages read cream on crimson, danger buttons dark red on rose (owner, 2026-10-28: "Open" was hard to read). */
main button:not(.ghost):not(.danger):not(.icon):not(.chip):not(.stage):not([role="tab"]),main .btn:not(.ghost){color:var(--crimson-ink)}
main button.danger{color:var(--danger)}

/* Watch how it works: a clip of the real page beside the Tour button (owner, 2026-10-28). */
.nwd-watchbtn{width:auto!important;height:34px;padding:0 11px!important;display:inline-flex!important;align-items:center;gap:6px;border-radius:10px;margin-right:8px}
.nwd-watchbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
header .nwd-watchbtn{margin-left:auto}header .nwd-watchbtn + .nwd-tourbtn{margin-left:0}
.nwd-watch{position:fixed;inset:0;z-index:70;background:rgba(42,32,23,.62);display:grid;place-items:center;padding:16px}
.nwd-watch .wbox{width:min(960px,100%);background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:12px 14px 12px;box-shadow:0 24px 60px -20px rgba(42,32,23,.7)}
.nwd-watch .wbar{display:flex;align-items:center;gap:10px;margin-bottom:8px}.nwd-watch .wbar b{flex:1;font-family:var(--serif);font-size:18px}
.nwd-watch video{display:block;width:100%;max-height:72vh;border-radius:10px;background:#000}
.nwd-watch .wnote{margin:8px 2px 0;color:var(--muted);font-size:13px}
/* Six tabs on a phone (Home added 2026-10-29): keep every label on one line. */
@media (max-width:899.98px){.nwd-nav .item{font-size:10.5px;white-space:nowrap;min-width:0;padding-left:0;padding-right:0}}

/* Site footer (owner, 2026-10-29): the legal and navigation links on every page but the chat. */
.nwd-foot{margin:36px 0 0;padding:26px 18px 30px;border-top:1px solid var(--line-2);background:linear-gradient(180deg,#f1e9d9,#e8dec9);box-shadow:inset 0 4px 0 #e8dec9,inset 0 5px 0 rgba(201,160,80,.5)}
.nwd-foot .cols{max-width:860px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px}
.nwd-foot b{font-family:var(--serif);font-size:19px;color:var(--text)}.nwd-foot p{margin:6px 0;color:var(--muted);font-size:14px}.nwd-foot .fine{color:var(--faint);font-size:12.5px}
.nwd-foot h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.nwd-foot nav a{display:block;padding:4px 0;color:var(--stone);text-decoration:none;font-size:14.5px}.nwd-foot nav a:hover{color:var(--crimson);text-decoration:underline}
@media (max-width:899.98px){.nwd-foot .cols{grid-template-columns:1fr 1fr}.nwd-foot .about{grid-column:1/-1}}