/* The arc: the seven stages of a scam, read straight down.
   Deliberately not the cascade. An overlapping stack of cards hides order, which is
   right for six doors that have none and wrong for seven stages that are nothing but
   order. So this is a spine: one line down the page, a node per stage carrying that
   stage's colour, and the four act names in the reference site's 200px label rail.

   The spine breaks between acts. That break is the only thing marking the four
   movements, which is the reference's own trick of grouping cards under repeating
   labels rather than adding a heading for each group. */

/* --sep-s, not --sep: this was the gap between two sections of the front page. On its
   own page it is the gap under the bar, and every other page uses --sep-s for that. */
.arc{padding:var(--sep-s) 0 0}

/* The reference's home-page primitive: a 200px label rail, then content. Reused for the
   head and for every act, so the act names line up with the section label above them. */
.arc .cols{display:grid; grid-template-columns:200px 1fr; gap:26px 40px; align-items:start}

.arc .k{margin:0; padding-top:.5em}

.arc h1{
  font:400 clamp(30px,4.4vw,46px)/1.1 var(--font-display); letter-spacing:var(--track-display);
  color:var(--ink); margin:0 0 22px; max-width:16ch; text-wrap:balance;
}
.arc .lede{
  font-size:23px; color:var(--muted); margin:0; max-width:var(--measure-lead);
}

.acts{list-style:none; margin:var(--sep-s) 0 0; padding:0}
.act + .act{margin-top:var(--sep-s)}
.actname{
  font:500 13px/1.5 var(--font-mono); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-line); margin:0; padding-top:.35em;
}

/* The spine and its nodes. Each stage draws the segment reaching down to the next one,
   so the line stops at the last node of an act rather than trailing past it. The ring of
   --ground around every node is what hides the join, so a segment can be drawn long and
   still land cleanly.

   The node sits level with the stage's own number, not with its name: the number is a
   fixed 13px line and the name is a clamp, so this is the one of the two that holds its
   position at every width. */
.stages{list-style:none; margin:0; padding:0}
.stg{
  position:relative; display:grid; grid-template-columns:33px 1fr; gap:0 24px;
  padding:0 0 var(--sep-xs);
}
.stg + .stg{padding-top:38px}
.stg::before{
  content:""; grid-column:1; grid-row:1; align-self:start; justify-self:start;
  width:15px; height:15px; margin:-1px 0 0 9px; border-radius:100%;
  background:var(--stop); box-shadow:0 0 0 7px var(--ground); z-index:1;
}
.stg:not(:last-child)::after{
  content:""; position:absolute; left:16px; top:6px; bottom:-44px;
  width:1px; background:var(--rule);
}

.stg h2{
  grid-column:2; grid-row:1; margin:0;
  font:400 clamp(26px,2.6vw,32px)/1.18 var(--font-display); letter-spacing:var(--track-display);
}
.stg h2 a{text-decoration:none; color:var(--ink)}
.stg h2 a:hover{color:var(--ink-line); text-decoration:underline; text-underline-offset:4px}
.stg h2 .n{
  font:500 13px/1 var(--font-mono); letter-spacing:var(--track-label); color:var(--muted);
  display:block; margin:0 0 9px;
}
.stg .sw{
  grid-column:2; margin:12px 0 0; color:var(--muted); max-width:var(--measure);
}
.stg .th{
  grid-column:2; margin:12px 0 0; color:var(--ink); font-weight:500;
  max-width:var(--measure);
}

.arc .after{
  display:grid; grid-template-columns:200px 1fr; gap:26px 40px;
  margin:var(--sep-s) 0 0;
}
.arc .after a{
  grid-column:2; justify-self:start; font-size:17px; text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
}
.arc .after a:hover{border-bottom-color:var(--ink-line); color:var(--ink)}

/* The act name holds in its rail while its own stages pass it, which is the reference's
   one repeated scroll move: at notch 16 of a wheel trace its section content travelled
   200px and the title beside it travelled 54. It is what stops a long section reading as
   a stack of unrelated blocks, because the label is still there to say what you are in.

   Bounded by .act, so each name releases at the foot of its own act rather than riding
   down over the next one. `align-items:start` on .cols is what gives it anywhere to go:
   a stretched grid item is as tall as its row and cannot travel. */
@media (min-width:1250px){
  .arc .actname{position:sticky; top:calc(var(--bar) + clamp(20px,3vh,32px))}
}

@media (max-width:820px){
  .arc .cols,
  .arc .after{grid-template-columns:1fr; gap:14px}
  .arc .after a{grid-column:1}
  .actname{padding-top:0}
  .arc .k{padding-top:0}
  .stg{grid-template-columns:27px 1fr; gap:0 16px}
  .stg::before{margin-left:6px}
  .stg:not(:last-child)::after{left:13px}
}

@media (prefers-reduced-motion:reduce){
  .arc *{transition:none !important; animation:none !important}
}