/* guides: the roadmap, guide pages and the home page section. Colours come from each page's :root */
.road{position:relative;margin-top:36px;padding-left:66px}
.road::before{content:"";position:absolute;left:22px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,rgba(242,181,107,.6),rgba(242,181,107,.16) 85%,transparent)}
/* a spark of light travels down the road */
.road-spark{position:absolute;left:18px;top:0;width:9px;height:60px;border-radius:9px;background:linear-gradient(180deg,transparent,#ffe0b0);filter:drop-shadow(0 0 8px rgba(255,150,70,.9));animation:road-run 11s linear infinite;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 3px,#000 4px,#000 5px,transparent 6px);mask-image:linear-gradient(90deg,transparent 3px,#000 4px,#000 5px,transparent 6px)}
@keyframes road-run{from{top:0;opacity:0}6%{opacity:1}94%{opacity:1}to{top:calc(100% - 60px);opacity:0}}
.stage{position:relative;scroll-margin-top:80px;padding-bottom:40px}
.stage h2{margin-bottom:8px}
.stage>.muted{font-size:15px;margin-bottom:18px}
/* stays in view beside the road while you read that stage */
.g-ring{position:sticky;z-index:2;top:84px;margin:-4px 0 -41px -66px;padding-bottom:2px;display:grid;place-items:center;width:45px;height:45px;border-radius:50%;border:1px solid rgba(242,181,107,.5);background:#0b090c;color:var(--gold);font-family:"Playfair Display",serif;font-size:16px;transition:border-color .4s,box-shadow .4s,color .4s}
.stage.on .g-ring{border-color:var(--gold);color:#ffe0b0;box-shadow:0 0 26px rgba(255,150,70,.5)}
.ring-zap{position:absolute;left:calc(-1*var(--zap-pad,24px));top:calc(-1*var(--zap-pad,24px));pointer-events:none;mix-blend-mode:plus-lighter}
.g-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g-card{display:flex;gap:14px;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--glass);transition:border-color .25s,box-shadow .25s}
.g-card:hover,.g-card.lit{border-color:rgba(242,181,107,.5);box-shadow:0 0 26px rgba(255,140,60,.16)}
.g-card[hidden]{display:none}
.g-num{flex:none;width:22px;color:var(--gold);font-family:"Playfair Display",serif;font-size:16px;font-style:italic;line-height:1.35}
.g-txt{display:grid;gap:5px;min-width:0}
.g-txt strong{font-family:"Playfair Display",serif;font-size:18px;font-weight:500;line-height:1.25}
.g-txt small{color:var(--muted);font-size:13.5px;line-height:1.55}
.g-txt em{font-size:10px;font-style:normal;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.g-zap{position:absolute;left:0;top:0;pointer-events:none;z-index:3;mix-blend-mode:plus-lighter}

/* stage shortcuts: a gold icon ring, a small label and the title in serif, with the electric border on hover */
.road-nav{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.rn-card{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,240,225,.06),rgba(255,240,225,.015));box-shadow:inset 0 1px 0 rgba(255,236,215,.12);transition:box-shadow .25s}
.rn-card.lit,.rn-card:hover{box-shadow:inset 0 1px 0 rgba(255,236,215,.2),0 0 26px rgba(255,140,60,.18)}
.rn-card i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,181,107,.42);background:radial-gradient(circle,rgba(255,170,90,.12),transparent 70%);color:var(--gold);transition:border-color .3s,color .3s,box-shadow .3s}
.rn-card.lit i,.rn-card:hover i{border-color:var(--gold);color:#ffe0b0;box-shadow:0 0 18px rgba(255,150,70,.4)}
.rn-card span{display:grid;gap:3px;min-width:0}
.rn-card small{font-size:9.5px;font-weight:500;letter-spacing:1.8px;line-height:1.2;text-transform:uppercase;color:var(--muted)}
.rn-card strong{font-family:"Playfair Display",serif;font-size:15.5px;font-weight:500;line-height:1.2;color:var(--ink);transition:color .3s}
.rn-card.lit strong,.rn-card:hover strong{color:#ffe0b0}

/* one guide */
.article{max-width:none}
.article .eyebrow a:hover{color:#ffe0b0}
.article h1{font-size:clamp(34px,5vw,58px);line-height:1.08;margin-bottom:0}
.reading{margin:-6px 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.article .about h2{margin:30px 0 12px;font-size:clamp(23px,3vw,30px);letter-spacing:-.5px}
.article .about h2:first-child{margin-top:0}

/* one guide: meta row, byline, contents, related cards, previous and next, the stage list */
.g-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-6px 0 14px;font-size:10.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.byline{margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.6}
.toc{margin:0 0 28px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--glass)}
.toc small{display:block;margin-bottom:10px;font-size:10.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.toc a{display:flex;gap:12px;font-size:15px;color:#d9cfc4;transition:color .2s}
.toc a:hover{color:#ffe0b0}
.toc i{flex:none;width:16px;color:var(--gold);font-family:"Playfair Display",serif;font-style:italic}
.article .about h2{scroll-margin-top:90px}
/* previous and next: two glass cards with gold chevron rings, lit on hover or tap */
.pn-cards{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.pn-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,240,225,.06),rgba(255,240,225,.015));box-shadow:inset 0 1px 0 rgba(255,236,215,.12);transition:box-shadow .25s}
.pn-card.next{text-align:right;justify-content:flex-end}
.pn-card i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,181,107,.42);background:radial-gradient(circle,rgba(255,170,90,.12),transparent 70%);color:var(--gold);transition:border-color .3s,color .3s,box-shadow .3s}
.pn-card span{display:grid;gap:3px;min-width:0}
.pn-card small{font-size:9.5px;font-weight:500;letter-spacing:1.8px;line-height:1.2;text-transform:uppercase;color:var(--muted)}
.pn-card strong{font-family:"Playfair Display",serif;font-size:16px;font-weight:500;line-height:1.25;color:var(--ink);transition:color .3s}
.pn-card:hover,.pn-card.lit{box-shadow:inset 0 1px 0 rgba(255,236,215,.2),0 0 26px rgba(255,140,60,.18)}
.pn-card:hover i,.pn-card.lit i{border-color:var(--gold);color:#ffe0b0;box-shadow:0 0 18px rgba(255,150,70,.4)}
.pn-card:hover strong,.pn-card.lit strong{color:#ffe0b0}
.g-rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.g-rel a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--glass);transition:border-color .25s,box-shadow .25s}
.g-rel a:hover{border-color:rgba(242,181,107,.5);box-shadow:0 0 26px rgba(255,140,60,.16)}
.g-rel span{display:grid;gap:4px;min-width:0}
.g-rel strong{font-family:"Playfair Display",serif;font-size:17px;font-weight:500;line-height:1.25}
.g-rel small{color:var(--muted);font-size:13px;line-height:1.5}
.g-rel i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(242,181,107,.42);color:var(--gold)}
/* the stage list: the same glass cards and gold rings as the roadmap, the current guide already lit */
.stage-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;counter-reset:g}
.stage-list li{position:relative;display:flex;align-items:center;gap:14px;padding:13px 16px 13px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,240,225,.06),rgba(255,240,225,.015));box-shadow:inset 0 1px 0 rgba(255,236,215,.12);transition:box-shadow .25s}
.stage-list li::before{counter-increment:g;content:counter(g);display:grid;place-items:center;flex:none;width:38px;height:38px;padding-bottom:2px;border-radius:50%;border:1px solid rgba(242,181,107,.42);background:radial-gradient(circle,rgba(255,170,90,.12),transparent 70%);color:var(--gold);font-family:"Playfair Display",serif;font-size:15px;font-style:italic;transition:border-color .3s,color .3s,box-shadow .3s}
.stage-list li:hover,.stage-list li.lit,.stage-list li.now{box-shadow:inset 0 1px 0 rgba(255,236,215,.2),0 0 26px rgba(255,140,60,.18)}
.stage-list li:hover::before,.stage-list li.lit::before,.stage-list li.now::before{border-color:var(--gold);color:#ffe0b0;box-shadow:0 0 18px rgba(255,150,70,.4)}
.stage-list a{display:block;min-width:0;font-family:"Playfair Display",serif;font-size:16px;font-weight:500;line-height:1.25;color:var(--ink);transition:color .3s}
.stage-list li:hover a,.stage-list li.lit a,.stage-list .now a{color:#ffe0b0}
.stage-list .now span::after{content:"You are here";display:block;margin-top:4px;font-family:Inter,system-ui,sans-serif;font-size:9.5px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold)}
.stage-open{margin-top:18px}

/* home page section */
.gs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gs-card{display:block;padding:20px;border-radius:20px;border:1px solid var(--line);background:var(--glass);transition:border-color .25s,box-shadow .25s}
.gs-card.lit,.gs-card:hover{border-color:rgba(242,181,107,.5);box-shadow:0 0 28px rgba(255,140,60,.16)}
.gs-top{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.gs-ring{display:grid;place-items:center;flex:none;width:46px;height:46px;padding-bottom:1px;border-radius:50%;border:1px solid rgba(242,181,107,.5);color:var(--gold);font-family:"Playfair Display",serif;font-size:17px}
.gs-head{flex:1;min-width:0}
.gs-head small{display:block;font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.gs-head strong{display:block;margin-top:4px;font-family:"Playfair Display",serif;font-size:21px;font-weight:500;line-height:1.2}
.gs-count{color:var(--muted);font-size:13px}
.gs-card ul{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none;color:#d9cfc4;font-size:14px}
.gs-card li{position:relative;padding-left:15px}
.gs-card li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.gs-link{transition:color .2s}
.gs-link:hover{color:#ffe0b0}
.gs-open{display:flex;justify-content:center;margin-top:24px}
.gs-zap{position:relative;display:inline-block}
.gs-zap canvas{position:absolute;left:calc(-1*var(--zap-pad,24px));top:calc(-1*var(--zap-pad,24px));pointer-events:none;mix-blend-mode:plus-lighter}
.gs-zap a{display:inline-block;padding:15px 32px 14px;border-radius:99px;background:linear-gradient(180deg,rgba(255,240,225,.07),rgba(255,240,225,.015));box-shadow:inset 0 1px 0 rgba(255,236,215,.14);color:#ffe0b0;font-size:12px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;white-space:nowrap;transition:color .3s,box-shadow .3s}
.gs-zap a:hover{color:#fff6ec;box-shadow:inset 0 1px 0 rgba(255,236,215,.2),0 0 34px rgba(255,140,60,.22)}

@media(max-width:860px){
  .g-list,.gs{grid-template-columns:1fr}
  .road-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stage-list,.pn-cards{grid-template-columns:1fr;gap:10px}
  .pn-card{padding:11px 12px}
  .pn-card i{width:34px;height:34px}
  .stage-list li{padding:11px 12px 11px 10px}
  .stage-list li::before{width:34px;height:34px}
  .rn-card{padding:11px 10px;gap:9px}
  .rn-card i{width:34px;height:34px}
  .rn-card strong{font-size:14px}
  .road{padding-left:50px}
  .road::before{left:16px}
  .road-spark{left:12px}
  .g-ring{top:74px;margin:-4px 0 -29px -50px;width:33px;height:33px;font-size:13px}
  .stage{padding-bottom:32px}
}
@media(prefers-reduced-motion:reduce){.road-spark{display:none}}