/* PathForge · shared article styling
   Same design system as the main page: midnight, bone, ember,
   Marcellus for display, Space Mono for labels, Inter for reading. */

:root{
  --bg:#0D1124;
  --bg-deep:#1D131B;
  --bone:#E9E0CE;
  --bone-dim:rgba(233,224,206,.62);
  --bone-faint:rgba(233,224,206,.14);
  --muted:#8F8874;
  --ember:#E8A64B;
  --ember-bright:#FFD9A0;

  --display:"Marcellus","Georgia",serif;
  --mono:"Space Mono","Courier New",monospace;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;

  --gut:clamp(1.4rem,5vw,5rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--bg);
  color:var(--bone);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1.02rem,.97rem + .28vw,1.16rem);
  line-height:1.82;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* ---------- the spine ----------
   The winding path with a traveller riding it, the same as the main page.
   Line and traveller are sampled from one sine at the same twenty one points,
   which is what keeps the ember sitting exactly on the line. */
.spine{position:fixed;left:.25rem;top:0;width:36px;height:100vh;z-index:6;pointer-events:none;}
.spine svg{width:36px;height:100vh;display:block;overflow:visible;}
.spine-base{fill:none;stroke:rgba(233,224,206,.13);stroke-width:1;vector-effect:non-scaling-stroke;}
.spine-lit{fill:none;stroke:var(--ember);stroke-width:1.3;vector-effect:non-scaling-stroke;
  stroke-dasharray:1000;stroke-dashoffset:1000;opacity:.85;}
.traveller{position:absolute;left:18px;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--ember-bright);opacity:0;
  box-shadow:0 0 6px 2px rgba(255,201,126,.9),0 0 18px 6px rgba(232,166,75,.45),0 0 44px 16px rgba(232,166,75,.16);}

@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes breathe-lg{
  0%,100%{box-shadow:0 0 6px 2px rgba(255,201,126,.9),0 0 18px 6px rgba(232,166,75,.45),0 0 44px 16px rgba(232,166,75,.16);}
  50%{box-shadow:0 0 8px 3px rgba(255,201,126,1),0 0 26px 9px rgba(232,166,75,.55),0 0 58px 22px rgba(232,166,75,.22);}
}
@keyframes travel{
  0%{transform:translate(0,0);}
  5%{transform:translate(3.4px,5vh);}
  10%{transform:translate(6.47px,10vh);}
  15%{transform:translate(8.9px,15vh);}
  20%{transform:translate(10.46px,20vh);}
  25%{transform:translate(11px,25vh);}
  30%{transform:translate(10.46px,30vh);}
  35%{transform:translate(8.9px,35vh);}
  40%{transform:translate(6.47px,40vh);}
  45%{transform:translate(3.4px,45vh);}
  50%{transform:translate(0,50vh);}
  55%{transform:translate(-3.4px,55vh);}
  60%{transform:translate(-6.47px,60vh);}
  65%{transform:translate(-8.9px,65vh);}
  70%{transform:translate(-10.46px,70vh);}
  75%{transform:translate(-11px,75vh);}
  80%{transform:translate(-10.46px,80vh);}
  85%{transform:translate(-8.9px,85vh);}
  90%{transform:translate(-6.47px,90vh);}
  95%{transform:translate(-3.4px,95vh);}
  100%{transform:translate(0,100vh);}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .spine-lit{animation:draw linear both;animation-timeline:scroll();}
    .traveller{opacity:1;animation:travel linear both,breathe-lg 3s ease-in-out infinite;
      animation-timeline:scroll(),auto;}
  }
}
@media (max-width:50rem){.spine{display:none;}}

.wrap{max-width:72rem;margin-inline:auto;padding-inline:var(--gut);}
.measure{max-width:40rem;}
a{color:inherit;}
p,ul,ol{margin:0 0 1.25em;}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.16;margin:0;}
:focus-visible{outline:1px solid var(--ember);outline-offset:5px;}

.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ember);margin:0 0 1.5rem;}

/* ---------- header ---------- */
header.site{position:relative;z-index:5;padding-block:1.8rem;border-bottom:1px solid var(--bone-faint);}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.mark{font-family:var(--display);font-size:1.05rem;letter-spacing:.34em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);}
.back{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border-bottom:1px solid var(--bone-faint);padding-bottom:.35rem;
  transition:color .35s ease,border-color .35s ease;}
.back:hover,.back:focus-visible{color:var(--ember);border-color:var(--ember);}
@media (max-width:36rem){.mark{font-size:.92rem;letter-spacing:.26em;}.back{font-size:.6rem;}}

/* ---------- article ---------- */
article{position:relative;z-index:2;padding-block:clamp(3.2rem,8vw,6rem) clamp(3.5rem,7vw,5rem);}
article::before{
  content:"";position:absolute;top:-12%;left:50%;translate:-50% 0;
  width:min(48rem,120vw);aspect-ratio:1;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(232,166,75,.10),rgba(232,166,75,.035) 38%,transparent 66%);
}
article h1{font-size:clamp(2rem,1.25rem + 3.3vw,3.9rem);max-width:19ch;margin-bottom:1.8rem;letter-spacing:.008em;}
.meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding-bottom:2rem;border-bottom:1px solid var(--bone-faint);margin-bottom:clamp(2.2rem,4.5vw,3.2rem);line-height:2;}

/* the direct answer, up top, for a reader in a hurry */
.answer{
  background:rgba(232,166,75,.055);
  border-left:1px solid var(--ember);
  padding:clamp(1.5rem,3.5vw,2.2rem) clamp(1.4rem,3.5vw,2.4rem);
  margin-bottom:clamp(2.6rem,5.5vw,3.8rem);
}
.answer p:last-child{margin-bottom:0;}
.answer strong{font-weight:500;color:var(--bone);}

article h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.35rem);margin:clamp(2.8rem,5.5vw,4rem) 0 1.2rem;max-width:24ch;}
article h3{font-size:clamp(1.16rem,1.05rem + .6vw,1.45rem);margin:2.2rem 0 .8rem;}
article p,article li{color:var(--bone-dim);}
article strong{color:var(--bone);font-weight:500;}
article ul,article ol{padding-left:1.35rem;}
article li{margin-bottom:.6rem;}
article li::marker{color:var(--ember);}
article a:not(.btn){color:var(--ember);text-decoration:none;border-bottom:1px solid rgba(232,166,75,.35);
  transition:color .3s ease,border-color .3s ease;}
article a:not(.btn):hover{color:var(--ember-bright);border-color:var(--ember-bright);}

.pull{font-family:var(--display);font-size:clamp(1.4rem,1.1rem + 1.5vw,2.2rem);line-height:1.3;
  color:var(--bone);border-left:1px solid var(--ember);padding-left:clamp(1.2rem,3vw,2rem);
  margin:clamp(2.4rem,5vw,3.2rem) 0;}

/* numbered walkthrough */
.steps{list-style:none;padding:0;margin:1.9rem 0 0;counter-reset:s;}
.steps li{counter-increment:s;border-top:1px solid var(--bone-faint);padding:1.5rem 0 1.5rem 3.6rem;
  position:relative;margin:0;}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.75rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--ember);}
.steps li strong{display:block;font-family:var(--display);font-size:1.15rem;font-weight:400;
  color:var(--bone);margin-bottom:.4rem;letter-spacing:.01em;}
.steps li p{margin:0;}

/* the five checks */
.checkblock{border-top:1px solid var(--bone-faint);padding-top:1.8rem;margin-top:2.6rem;}
.checkblock .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;color:var(--ember);
  display:block;margin-bottom:.7rem;}
.checkblock h3{margin-top:0;}
.ask{background:rgba(233,224,206,.045);padding:1.1rem 1.3rem;font-size:.98rem;margin:1.3rem 0 0;
  border-radius:1px;}
.ask strong{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);display:block;margin-bottom:.4rem;font-weight:400;}

.note{font-size:.92rem;color:var(--muted);border-top:1px solid var(--bone-faint);
  padding-top:1.6rem;margin-top:3rem;}

/* ---------- finale ---------- */
.cta{position:relative;z-index:2;background:var(--bg-deep);text-align:center;
  padding-block:clamp(3.5rem,7vw,5.5rem);overflow:hidden;}
.cta::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,224,206,.16),transparent);}
.cta::after{
  content:"";position:absolute;bottom:-45%;left:50%;translate:-50% 0;
  width:min(50rem,130vw);aspect-ratio:1;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(232,166,75,.14),rgba(232,166,75,.04) 40%,transparent 68%);
}
.cta h2{font-size:clamp(1.75rem,1.15rem + 2.6vw,3rem);max-width:18ch;margin:0 auto 1.3rem;}
.cta p{color:var(--bone-dim);max-width:46ch;margin-inline:auto;}
.mailto{display:inline-block;margin-top:clamp(1.8rem,3.5vw,2.6rem);
  font-family:var(--display);font-size:clamp(1.1rem,.95rem + 1.2vw,1.8rem);letter-spacing:.06em;
  text-decoration:none;color:var(--ember);border-bottom:1px solid rgba(232,166,75,.35);
  padding-bottom:.5rem;transition:color .35s ease,border-color .35s ease;}
.mailto:hover,.mailto:focus-visible{color:var(--ember-bright);border-color:var(--ember-bright);}
.cta .alt{margin-top:1.6rem;font-size:.88rem;color:var(--muted);}
.cta .alt a{color:var(--bone-dim);text-decoration:none;border-bottom:1px solid var(--bone-faint);
  transition:color .3s ease,border-color .3s ease;}
.cta .alt a:hover{color:var(--ember);border-color:var(--ember);}

/* ---------- footer ---------- */
footer.site{position:relative;z-index:2;padding-block:clamp(2.4rem,5vw,3.4rem);
  font-size:.82rem;line-height:1.72;color:var(--muted);border-top:1px solid var(--bone-faint);}
footer.site .wrap{display:grid;gap:1.5rem;}
@media (min-width:58rem){footer.site .wrap{grid-template-columns:minmax(0,1fr) minmax(0,28rem);gap:3.5rem;}}
footer.site p{margin:0 0 .7rem;}
footer.site a{color:var(--bone-dim);}

/* entrance, on load only, so no body copy can be left stranded */
@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:no-preference){
  article h1,.answer{animation:rise .95s cubic-bezier(.2,.7,.3,1) both;}
  .answer{animation-delay:140ms;}
}