:root{
  --pine:#0d1f17; --pine-2:#081510; --moss:#173528; --rule:#2b5541;
  --gilt:#d9ad45; --gilt-hi:#f3d36b; --gilt-lo:#9a7120;
  --sprout:#2fae6a; --sprout-d:#1b7a47;
  --vellum:#f0e2bf; --umber:#3a2608;
  --fg:#e9eee8; --fg-2:#a6bdb0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;padding:28px 16px;display:flex;justify-content:center;align-items:center;
  font:400 15px/1.55 Karla,system-ui,sans-serif;color:var(--fg);
  background:linear-gradient(160deg,var(--moss) 0,var(--pine) 40%,var(--pine-2) 100%);
}
a{color:var(--gilt-hi)}
p,h1,h2,ol{margin:0}

.path{width:100%;max-width:500px}

.crest{text-align:center;margin-bottom:16px}
.crest-brand{
  font:900 30px/1 Cinzel,serif;letter-spacing:6px;text-transform:uppercase;color:var(--gilt-hi);
  text-shadow:0 2px 0 var(--gilt-lo),0 0 18px rgba(217,173,69,.3);margin-bottom:14px;
}
.crest-brand span{display:block;font:800 10px/1 Karla,sans-serif;letter-spacing:7px;color:var(--fg-2);margin-top:6px}

.scroll{
  position:relative;padding:18px 22px;color:var(--umber);
  background:linear-gradient(90deg,#d8c38c,var(--vellum) 12%,var(--vellum) 88%,#d8c38c);
  border-top:3px double var(--gilt-lo);border-bottom:3px double var(--gilt-lo);
}
.scroll::before,.scroll::after{
  content:"";position:absolute;top:-6px;bottom:-6px;width:12px;border-radius:6px;
  background:linear-gradient(90deg,#8a6220,#e6c063,#8a6220);
}
.scroll::before{left:-6px}.scroll::after{right:-6px}
.scroll-k{font:800 11px/1 Karla,sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:#7b5719}
.scroll h1{font:700 22px/1.15 Cinzel,serif;margin:6px 0}
.scroll strong{
  display:block;font-weight:900;font-size:66px;line-height:1;
  background:linear-gradient(180deg,#fff4c4,var(--gilt-hi) 35%,var(--gilt) 65%,var(--gilt-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px #6d4c10;filter:drop-shadow(0 3px 0 rgba(70,45,8,.3));
}
.scroll-t{font-size:11px;color:#6a5124}

.lede{font-size:14px;color:var(--fg-2);margin-bottom:16px;text-align:center}
.lede a{font-weight:800}

.steps{list-style:none;padding:0;position:relative;margin-left:22px;margin-bottom:18px}
.steps::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;
  background:linear-gradient(var(--gilt-hi),var(--gilt-lo));
}
.st{position:relative;padding:0 0 14px 34px}
.st:last-child{padding-bottom:0}
.node{
  position:absolute;left:-20px;top:-2px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff1b0,var(--gilt) 55%,var(--gilt-lo));
  box-shadow:0 0 0 4px var(--pine),0 4px 10px rgba(0,0,0,.45);
}
.node svg{width:24px;height:24px}
.st h2{font:700 16px/1.2 Cinzel,serif;color:#fff;padding-top:3px;margin-bottom:3px}
.st p{font-size:13.5px;color:var(--fg-2)}

.go{
  display:block;text-align:center;padding:14px 20px;border-radius:999px;
  font:800 16px/1 Karla,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#4fd38c,var(--sprout) 45%,var(--sprout-d));
  border:2px solid var(--gilt);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 0 0 4px rgba(154,113,32,.3),0 10px 20px rgba(0,0,0,.4);
  transition:filter .15s;
}
.go:hover{filter:brightness(1.1)}
.aside{text-align:center;font-size:12px;color:var(--fg-2);margin-top:10px}

.fine{margin-top:16px;padding-top:10px;border-top:1px solid var(--rule);text-align:center;font-size:11px;color:var(--fg-2)}
.fine a{color:var(--fg-2)}

@media (max-width:370px){
  .scroll strong{font-size:54px}
  .crest-brand{letter-spacing:4px}
}