/* God's Path: the dirt-path bars (Template, every brand).
   From T.O.P.S. (Doug, 31 Oct 2026, 12:36pm: "Make the head bars look like horizontal dirt paths"; 12:38pm: "maybe make
   them slightly curvy"; 12:40pm: "put the icons on the path/bars in an icon box in the shape of an open bible"), pulled
   into the Template for Golden Rule Bible (Doug, 31 Oct 2026, 3:01pm: "I want to start with a site/church visitor and walk
   them through their journey... following God's path for them... and I want the dirt paths as the bars, etc... like
   topsmission"). The drawings are T.O.P.S.' own, byte for byte (made by Tops-Webapp docs/tools/dirt-paths.py).

   Markup (any brand):
     <div class="gods-path">
       <details class="path-step" open>
         <summary><span class="path-ic" aria-hidden="true">&#128075;</span><span class="path-t">Visit us<small>one line</small></span></summary>
         <div class="path-body">...</div>
       </details>
       <a class="path-row" href="..."><span class="path-ic" aria-hidden="true">...</span><span class="path-t">A link<small>one line</small></span></a>
     </div>
   A brand sets its colors on .gods-path (or :root): --path-ink (navy: words, borders, the open bar's ground),
   --path-gold (the line under an open bar), --path-card (the open bar's body), --path-head-font. Big targets: every bar
   is 72px tall or more. Closed: light earth on cream ground, navy words. Open: trodden earth on navy ground, cream words. */
.gods-path,.gods-path *{box-sizing:border-box}
.gods-path{
  --path-ink:#022068;--path-gold:#C9A24A;--path-card:#FFFDF6;--path-dirt-ink:#5A3A0E;
  --path-head-font:"EB Garamond",Georgia,serif;--path-r:14px;--path-shadow:5px 5px 0 rgba(2,32,104,.18);
  --path-closed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0,14.6 L10,15.5 20,15.9 30,16.0 40,15.7 50,15.4 60,15.1 70,15.0 80,15.2 90,15.7 100,16.4 110,17.1 120,17.8 130,18.2 140,18.2 150,17.7 160,16.7 170,15.5 180,14.0 190,12.6 200,11.4 210,10.5 220,10.1 230,10.0 240,10.3 250,10.6 260,10.9 270,11.0 280,10.8 290,10.3 300,9.6 310,8.9 320,8.2 330,7.8 340,7.8 350,8.3 360,9.3 370,10.5 380,12.0 390,13.4 400,14.6 L400,71.3 L390,71.4 380,71.1 370,70.4 360,69.3 350,68.0 340,66.5 330,65.0 320,63.7 310,62.5 300,61.7 290,61.3 280,61.3 270,61.7 260,62.5 250,63.7 240,65.0 230,66.4 220,67.8 210,69.0 200,69.9 190,70.5 180,70.8 170,70.6 160,70.1 150,69.3 140,68.4 130,67.4 120,66.4 110,65.6 100,65.0 90,64.8 80,64.9 70,65.3 60,66.0 50,67.0 40,68.1 30,69.2 20,70.1 10,70.9 0,71.3 Z'/%3E%3C/clipPath%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .06 0 0 0 .6 -.14'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235C3A10' stop-opacity='.35'/%3E%3Cstop offset='.25' stop-color='%235C3A10' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23FFF4D6' stop-opacity='.25'/%3E%3Cstop offset='.75' stop-color='%235C3A10' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%235C3A10' stop-opacity='.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='80' fill='%23EDE8DA'/%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='400' height='80' fill='%23D9B46A'/%3E%3Crect width='400' height='80' fill='url(%23g)'/%3E%3Crect width='400' height='80' filter='url(%23n)'/%3E%3Cg fill='%237A5524' fill-opacity='.4'%3E%3Cellipse cx='30' cy='21.0' rx='4' ry='2.4'/%3E%3Cellipse cx='95' cy='59.9' rx='5' ry='3'/%3E%3Cellipse cx='160' cy='20.7' rx='3' ry='2'/%3E%3Cellipse cx='230' cy='62.4' rx='4' ry='2.5'/%3E%3Cellipse cx='300' cy='14.6' rx='5' ry='3'/%3E%3Cellipse cx='365' cy='64.9' rx='3' ry='2'/%3E%3C/g%3E%3Cg fill='%23F4E2B8' fill-opacity='.55'%3E%3Cellipse cx='60' cy='62.0' rx='3' ry='2'/%3E%3Cellipse cx='130' cy='22.2' rx='2.5' ry='1.7'/%3E%3Cellipse cx='270' cy='57.7' rx='3.5' ry='2.2'/%3E%3Cellipse cx='340' cy='11.8' rx='2.5' ry='1.7'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%238A6229' stroke-width='1.6' stroke-opacity='.7'%3E%3Cpath d='M0,14.6 L10,15.5 20,15.9 30,16.0 40,15.7 50,15.4 60,15.1 70,15.0 80,15.2 90,15.7 100,16.4 110,17.1 120,17.8 130,18.2 140,18.2 150,17.7 160,16.7 170,15.5 180,14.0 190,12.6 200,11.4 210,10.5 220,10.1 230,10.0 240,10.3 250,10.6 260,10.9 270,11.0 280,10.8 290,10.3 300,9.6 310,8.9 320,8.2 330,7.8 340,7.8 350,8.3 360,9.3 370,10.5 380,12.0 390,13.4 400,14.6'/%3E%3Cpath d='M0,71.3 L10,70.9 20,70.1 30,69.2 40,68.1 50,67.0 60,66.0 70,65.3 80,64.9 90,64.8 100,65.0 110,65.6 120,66.4 130,67.4 140,68.4 150,69.3 160,70.1 170,70.6 180,70.8 190,70.5 200,69.9 210,69.0 220,67.8 230,66.4 240,65.0 250,63.7 260,62.5 270,61.7 280,61.3 290,61.3 300,61.7 310,62.5 320,63.7 330,65.0 340,66.5 350,68.0 360,69.3 370,70.4 380,71.1 390,71.4 400,71.3'/%3E%3C/g%3E%3C/svg%3E");
  --path-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0,14.6 L10,15.5 20,15.9 30,16.0 40,15.7 50,15.4 60,15.1 70,15.0 80,15.2 90,15.7 100,16.4 110,17.1 120,17.8 130,18.2 140,18.2 150,17.7 160,16.7 170,15.5 180,14.0 190,12.6 200,11.4 210,10.5 220,10.1 230,10.0 240,10.3 250,10.6 260,10.9 270,11.0 280,10.8 290,10.3 300,9.6 310,8.9 320,8.2 330,7.8 340,7.8 350,8.3 360,9.3 370,10.5 380,12.0 390,13.4 400,14.6 L400,71.3 L390,71.4 380,71.1 370,70.4 360,69.3 350,68.0 340,66.5 330,65.0 320,63.7 310,62.5 300,61.7 290,61.3 280,61.3 270,61.7 260,62.5 250,63.7 240,65.0 230,66.4 220,67.8 210,69.0 200,69.9 190,70.5 180,70.8 170,70.6 160,70.1 150,69.3 140,68.4 130,67.4 120,66.4 110,65.6 100,65.0 90,64.8 80,64.9 70,65.3 60,66.0 50,67.0 40,68.1 30,69.2 20,70.1 10,70.9 0,71.3 Z'/%3E%3C/clipPath%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .06 0 0 0 .6 -.14'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235C3A10' stop-opacity='.35'/%3E%3Cstop offset='.25' stop-color='%235C3A10' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23E8C890' stop-opacity='.25'/%3E%3Cstop offset='.75' stop-color='%235C3A10' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%235C3A10' stop-opacity='.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='80' fill='%231B3A5C'/%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='400' height='80' fill='%23875B27'/%3E%3Crect width='400' height='80' fill='url(%23g)'/%3E%3Crect width='400' height='80' filter='url(%23n)'/%3E%3Cg fill='%237A5524' fill-opacity='.4'%3E%3Cellipse cx='30' cy='21.0' rx='4' ry='2.4'/%3E%3Cellipse cx='95' cy='59.9' rx='5' ry='3'/%3E%3Cellipse cx='160' cy='20.7' rx='3' ry='2'/%3E%3Cellipse cx='230' cy='62.4' rx='4' ry='2.5'/%3E%3Cellipse cx='300' cy='14.6' rx='5' ry='3'/%3E%3Cellipse cx='365' cy='64.9' rx='3' ry='2'/%3E%3C/g%3E%3Cg fill='%23F4E2B8' fill-opacity='.55'%3E%3Cellipse cx='60' cy='62.0' rx='3' ry='2'/%3E%3Cellipse cx='130' cy='22.2' rx='2.5' ry='1.7'/%3E%3Cellipse cx='270' cy='57.7' rx='3.5' ry='2.2'/%3E%3Cellipse cx='340' cy='11.8' rx='2.5' ry='1.7'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%233E2808' stroke-width='1.6' stroke-opacity='.7'%3E%3Cpath d='M0,14.6 L10,15.5 20,15.9 30,16.0 40,15.7 50,15.4 60,15.1 70,15.0 80,15.2 90,15.7 100,16.4 110,17.1 120,17.8 130,18.2 140,18.2 150,17.7 160,16.7 170,15.5 180,14.0 190,12.6 200,11.4 210,10.5 220,10.1 230,10.0 240,10.3 250,10.6 260,10.9 270,11.0 280,10.8 290,10.3 300,9.6 310,8.9 320,8.2 330,7.8 340,7.8 350,8.3 360,9.3 370,10.5 380,12.0 390,13.4 400,14.6'/%3E%3Cpath d='M0,71.3 L10,70.9 20,70.1 30,69.2 40,68.1 50,67.0 60,66.0 70,65.3 80,64.9 90,64.8 100,65.0 110,65.6 120,66.4 130,67.4 140,68.4 150,69.3 160,70.1 170,70.6 180,70.8 190,70.5 200,69.9 210,69.0 220,67.8 230,66.4 240,65.0 250,63.7 260,62.5 270,61.7 280,61.3 290,61.3 300,61.7 310,62.5 320,63.7 330,65.0 340,66.5 350,68.0 360,69.3 370,70.4 380,71.1 390,71.4 400,71.3'/%3E%3C/g%3E%3C/svg%3E");
}
.gods-path details.path-step,.gods-path a.path-row{
  display:block;border:3px solid var(--path-ink);border-radius:var(--path-r);background:var(--path-card);
  box-shadow:var(--path-shadow);margin:0 0 1rem;overflow:hidden
}
.gods-path details.path-step>summary,.gods-path a.path-row{
  list-style:none;cursor:pointer;padding:1rem 1.1rem;min-height:72px;display:flex;align-items:center;gap:.85rem;
  font-family:var(--path-head-font);font-weight:600;font-size:1.3rem;line-height:1.2;text-decoration:none;
  background:var(--path-closed) 0 0/400px 100% repeat-x,#EDE8DA;color:var(--path-ink);text-shadow:0 1px 0 rgba(255,246,220,.6)
}
.gods-path details.path-step>summary::-webkit-details-marker{display:none}
.gods-path details.path-step>summary::after{content:"+";margin-left:auto;font-weight:700;font-size:2rem;line-height:1;color:var(--path-dirt-ink);text-shadow:none}
.gods-path a.path-row::after{content:"\2192";margin-left:auto;font-weight:700;font-size:1.8rem;line-height:1;color:var(--path-dirt-ink);text-shadow:none}
.gods-path details.path-step[open]>summary{
  background:var(--path-open) 0 0/400px 100% repeat-x,var(--path-ink);color:#FFF8E6;
  text-shadow:0 1px 2px rgba(40,22,0,.7);border-bottom:3px solid var(--path-gold)
}
.gods-path details.path-step[open]>summary::after{content:"\2212";color:#FFF8E6}
.gods-path a.path-row:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--path-ink)}
.gods-path summary:focus-visible,.gods-path a.path-row:focus-visible{outline:3px solid var(--path-gold);outline-offset:-3px}
/* so the bars down the page don't all wind the same way */
.gods-path>:nth-child(3n+2)>summary,.gods-path>a.path-row:nth-child(3n+2){background-position:-140px 0,0 0}
.gods-path>:nth-child(3n)>summary,.gods-path>a.path-row:nth-child(3n){background-position:-265px 0,0 0}
/* each bar's icon sits on an open Bible: navy cover, gold edge, cream pages, a gold ribbon */
.gods-path .path-ic{
  flex:0 0 auto;width:3.4rem;height:2.55rem;display:inline-flex;align-items:center;justify-content:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M1 12 Q16 7 32 12 Q48 7 63 12 L63 45 Q48 40 32 45 Q16 40 1 45 Z' fill='%23022068' stroke='%23C9A24A' stroke-width='1.2'/%3E%3Cpath d='M4 9 Q18 4 31 9 L31 42 Q18 37 4 41 Z' fill='%23FFFDF6' stroke='%23B89A5E' stroke-width='.8'/%3E%3Cpath d='M33 9 Q46 4 60 9 L60 41 Q46 37 33 42 Z' fill='%23FFFDF6' stroke='%23B89A5E' stroke-width='.8'/%3E%3Cg stroke='%23D8CCAE' stroke-width='.7' fill='none'%3E%3Cpath d='M8 14 Q18 11 27 15'/%3E%3Cpath d='M8 35 Q18 32 27 36'/%3E%3Cpath d='M37 15 Q46 11 56 14'/%3E%3Cpath d='M37 36 Q46 32 56 35'/%3E%3C/g%3E%3Cpath d='M32 10 L32 43' stroke='%23C9A24A' stroke-width='1.4'/%3E%3Cpath d='M31 43 L31 48 L32.5 46.5 L34 48 L34 43 Z' fill='%23C9A24A'/%3E%3C/svg%3E") center/contain no-repeat;
  font-size:1.2rem;line-height:1;padding-bottom:.2rem;text-shadow:none;filter:drop-shadow(0 1px 1px rgba(40,22,0,.35))
}
.gods-path .path-t{display:flex;flex-direction:column;gap:.15rem}
.gods-path .path-t small{font-family:inherit;font-weight:500;font-size:.98rem;opacity:.92}
.gods-path .path-body{padding:1.1rem 1.1rem 1.3rem;font-size:1.05rem;line-height:1.55;color:#2B2B2B}
.gods-path .path-body>*+*{margin-top:.8rem}
.gods-path .path-body .gods-path{margin-top:1rem}
.gods-path .path-body details.path-step,.gods-path .path-body a.path-row{border-width:2px;box-shadow:3px 3px 0 rgba(2,32,104,.15)}
.gods-path .path-body details.path-step>summary,.gods-path .path-body a.path-row{font-size:1.15rem;min-height:64px}
.gods-path .path-btn{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:.8rem 1rem;border:0;border-radius:12px;
  background:var(--path-ink);color:#fff;font:inherit;font-size:1.05rem;font-weight:600;text-decoration:none;cursor:pointer
}
.gods-path .path-btn.alt{background:#fff;color:var(--path-ink);border:2px solid var(--path-ink)}
.gods-path .path-btns{display:grid;gap:.6rem}
@media (min-width:640px){.gods-path .path-btns{grid-template-columns:1fr 1fr}}