/* ============================================================
   Rules of Thumb — worked stories

   A story is a route through several calculators. The page has to make that route feel like one
   continuous thing rather than a list of links, so three devices carry the whole design:

   1. THE CHAIN RAIL at the top — every tool in the story as a node on one line, with the flow
      running left to right. It is the map of where you are going.
   2. THE SPINE — a single vertical line running down through the step numbers, so the eye is
      never handed off between disconnected cards.
   3. THE RESULT STRIP — each step shows the actual numbers from the worked example, in the same
      mono face the tools use, so the story reads as a calculation and not as prose about one.

   Every animation here is decorative and stops under prefers-reduced-motion.
   ============================================================ */

.story-wrap { --glow: var(--amber); }

/* ---------- hero ---------- */
.st-hero {
  position: relative; overflow: hidden;
  margin: 8px 0 22px; padding: 30px 30px 26px; border-radius: 20px;
  border: 1px solid var(--line);
  background:
    radial-gradient(760px 300px at 88% -10%, color-mix(in srgb, var(--glow) 20%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--ink-2));
}
.st-hero .kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--glow); margin: 0 0 10px;
}
.st-hero h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(26px, 4.2vw, 40px); letter-spacing: -.022em; margin: 0 0 12px; line-height: 1.08;
}
.st-hero .lede { font-size: 16px; color: var(--muted); max-width: 60ch; line-height: 1.58; margin: 0 0 18px; }
.st-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.st-meta span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted);
  background: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px;
}
.st-meta span b { color: var(--glow); font-weight: 600; }

/* ---------- chain rail ---------- */
.st-chain { margin: 0 0 30px; padding: 16px 4px 6px; overflow-x: auto; }
.st-chain-inner { display: flex; align-items: stretch; gap: 0; min-width: min-content; }
.st-node {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; color: inherit; flex: 0 0 auto; width: 116px; text-align: center;
}
.st-node .dot {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--ink); border: 1px solid var(--line); color: var(--nc, var(--glow));
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.st-node .dot svg { width: 21px; height: 21px; }
.st-node .nm {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 1.3; color: var(--muted);
  overflow-wrap: anywhere;
}
.st-node .ar {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
.st-node:hover .dot { border-color: var(--nc, var(--glow)); transform: translateY(-2px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nc, var(--glow)) 14%, transparent); }
.st-node:hover .nm { color: var(--text); }
.st-link {
  flex: 1 1 26px; min-width: 26px; align-self: flex-start; margin-top: 21px; height: 2px;
  background-image: linear-gradient(90deg, var(--line-soft) 50%, transparent 50%);
  background-size: 8px 2px; background-repeat: repeat-x;
  animation: st-flow 1.1s linear infinite;
}
@keyframes st-flow { from { background-position: 0 0; } to { background-position: 8px 0; } }

/* ---------- steps, hung off one spine ---------- */
.st-steps { position: relative; margin: 0 0 34px; padding-left: 4px; }
.st-steps:before {
  content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, var(--glow), color-mix(in srgb, var(--glow) 18%, transparent));
  opacity: .5;
}
.st-step { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 0 20px; margin-bottom: 26px; }
.st-step > .n {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px;
  color: var(--ink); background: var(--glow);
  box-shadow: 0 0 0 5px var(--bg, var(--ink-2));
}
.st-body {
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 16px;
  background: linear-gradient(180deg, var(--panel), var(--ink-2));
}
.st-body h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(17px, 2.3vw, 21px);
  margin: 0 0 9px; letter-spacing: -.015em;
}
.st-body p { margin: 0 0 12px; color: var(--muted); line-height: 1.6; font-size: 14.5px; }
.st-body p:last-of-type { margin-bottom: 12px; }

/* the worked numbers */
.st-nums { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 13px; }
.st-num {
  flex: 1 1 120px; min-width: 0; padding: 10px 12px; border-radius: 11px;
  background: var(--ink); border: 1px solid var(--line);
  border-left: 3px solid var(--nc, var(--glow));
}
.st-num .k {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: 4px;
}
.st-num .v {
  font-family: 'IBM Plex Mono', monospace; font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 600; color: var(--text); line-height: 1.1; overflow-wrap: anywhere;
}

.st-rule {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  border-left: 3px solid var(--glow);
  background: color-mix(in srgb, var(--glow) 8%, var(--ink));
  font-size: 13.5px; color: var(--text); line-height: 1.52;
}
.st-rule b {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px;
}

.st-acts { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.st-acts a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
  border-radius: 9px; padding: 9px 13px;
  transition: filter .13s ease, border-color .13s ease, color .13s ease, transform .09s ease;
}
.st-acts a.go { color: var(--ink); background: var(--glow); }
.st-acts a.go:hover { filter: brightness(1.07); transform: translateY(-1px); }
.st-acts a.go:active { transform: translateY(0) scale(.985); }
.st-acts a.ghost { color: var(--muted); border: 1px solid var(--line); }
.st-acts a.ghost:hover { color: var(--text); border-color: var(--glow); }

/* ---------- outcome ---------- */
.st-out {
  margin: 0 0 30px; padding: 24px 26px; border-radius: 18px; border: 1px solid var(--line);
  background:
    radial-gradient(560px 220px at 12% 0%, color-mix(in srgb, var(--glow) 13%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--ink-2));
}
.st-out h2 { font-family: 'Space Grotesk', sans-serif; font-size: 21px; margin: 0 0 9px; letter-spacing: -.015em; }
.st-out p { margin: 0 0 15px; color: var(--muted); line-height: 1.6; max-width: 68ch; }

/* ---------- index grid ---------- */
.st-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.st-filters button {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted);
  background: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
  transition: color .13s ease, border-color .13s ease, background-color .13s ease;
}
.st-filters button:hover { color: var(--text); border-color: var(--muted-2); }
.st-filters button.on { color: var(--ink); background: var(--amber); border-color: var(--amber); font-weight: 600; }

.st-grid {
  display: grid; gap: 15px;
  /* min(290px, 100%) rather than a bare 290px: on a viewport narrower than the track, a fixed
     minimum forces the column wider than its container and the whole page scrolls sideways. */
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
.st-card {
  display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: inherit;
  padding: 19px 19px 16px; border-radius: 16px; border: 1px solid var(--line);
  background:
    radial-gradient(360px 150px at 90% -20%, color-mix(in srgb, var(--sc, var(--amber)) 15%, transparent), transparent 65%),
    linear-gradient(180deg, var(--panel), var(--ink-2));
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.st-card:hover {
  border-color: var(--sc, var(--amber)); transform: translateY(-3px);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--sc, var(--amber)) 70%, transparent);
}
.st-card .sk {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sc, var(--amber));
}
.st-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; margin: 0; letter-spacing: -.015em; }
.st-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; }
/* the tool chain, previewed as dots on the card */
.st-mini { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.st-mini i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--amber)); opacity: .85;
  display: inline-block;
}
.st-mini s { flex: 0 0 10px; height: 1px; background: var(--line-soft); display: inline-block; }
.st-mini em {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted-2);
  font-style: normal; margin-left: 4px;
}
.st-card .foot {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--muted-2);
}
.st-card .foot .go { margin-left: auto; color: var(--sc, var(--amber)); }

@media (max-width: 640px) {
  .st-hero { padding: 22px 18px; }
  .st-step { grid-template-columns: 38px 1fr; gap: 0 13px; }
  .st-step > .n { width: 34px; height: 34px; font-size: 15px; }
  .st-steps:before { left: 19px; }
  .st-body { padding: 15px 15px 14px; }
  .st-out { padding: 19px 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-link { animation: none; }
  .st-card, .st-node .dot, .st-acts a { transition: none; }
  .st-card:hover, .st-node:hover .dot, .st-acts a.go:hover { transform: none; }
}