/* The Journey Fund — /journey-fund and the two pages under it.
 * ===========================================================================
 * This file introduces no colour, no typeface and no spacing scale. Every
 * value below is a token from afrinkong.css, and the two rules that are not
 * are marked and explained where they stand.
 *
 * THE GOVERNING CONSTRAINT, WHICH IS A DESIGN CONSTRAINT AND NOT A TASTE
 *
 *   The Journey Fund has no colour of its own. It takes the region tone of
 *   the place being built toward.
 *
 * So this stylesheet paints almost nothing. It sets `--jf-tone` from the
 * region of whatever country the estimator is currently showing, and the
 * components read that variable. A Kenya journey is East Africa's teal; a
 * Morocco journey is North Africa's ochre. Change the destination and the
 * page changes colour, because the page is about the destination.
 *
 * THE SECOND CONSTRAINT
 *
 *   A figure is never the largest thing on the screen.
 *
 * Enforced here rather than left to whoever writes the next component: the
 * money is set in the mono face at a size that is deliberately below the
 * destination's name on the same screen, and there is no class in this file
 * that makes a number large. A browser check asserts it.
 *
 * WHAT IS NOT HERE
 *
 * No progress bar. No percentage. No ring, dial, gauge or meter. No icon
 * set. Nothing animates on arrival — the one transition in this file is on
 * :hover, which is a response to the reader rather than a performance at
 * them. If a future component here needs a fill that grows, it has been
 * misunderstood.
 */

/* ---- the tone -------------------------------------------------------------
   Deliberately not five rules with five hex values in them.

   The first version of this file listed the regions by hand and got one of
   them wrong — it had a `west` that does not exist, because the region is
   called `southern`, and the mistake was invisible until the page was built
   and the colour silently fell back to basalt. Five copied values in a
   stylesheet are five chances to be wrong about a file that already knows the
   answer.

   So the tones come from tourism/regions.json, travel to the browser in the
   estimator's own payload, and are set as --jf-tone on the page element when a
   destination is chosen. There is one source of truth for what East Africa
   looks like, and it is the same file the atlas and the country plates read.

   Basalt is the ground state: correct, quiet, and what the page is before
   anyone has chosen anywhere. */
.jf-page{--jf-tone:var(--c-primary)}

/* ---- masthead ------------------------------------------------------------
   The same shape as the journey builder's, because a traveller who moves
   between them should not feel they have left the site. */
.jf-mast{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:20px 5vw;border-bottom:2px solid var(--c-primary)}
.jf-mark{text-decoration:none;color:inherit;display:block}
.jf-mark i{display:block;font-style:normal;font-family:var(--fj-mono);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--c-accent)}
.jf-mark b{display:block;font-family:var(--fj-display);font-weight:700;
  font-size:21px;line-height:1.05;letter-spacing:-.01em}
.jf-routes{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
/* inline-block and vertical padding, measured rather than guessed: an 11px
   mono line box is 18 pixels tall, and WCAG 2.2 asks 24 of anything that is
   not a link inside a sentence. These are navigation, so the exemption does
   not apply to them. 6px each side takes it to 30 without moving the masthead,
   because the padding sits inside a row whose height the brand mark sets. */
.jf-routes a{display:inline-block;padding:6px 0;
  font-family:var(--fj-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted);text-decoration:none}
.jf-routes a:hover{color:var(--c-accent)}
@media(max-width:760px){
  .jf-mast{padding:16px 22px;gap:10px}
  /* Wider gaps on a phone, because two 30px targets 14px apart are one target
     to a thumb. */
  .jf-routes{margin-left:0;width:100%;gap:4px 20px}
}

/* ---- the frame ----------------------------------------------------------- */
.jf-frame{max-width:1180px;margin:0 auto;padding:0 5vw}
@media(max-width:760px){.jf-frame{padding:0 22px}}

/* ---- the opening --------------------------------------------------------
   One sentence and one photograph. The sentence is the largest thing on the
   page and the photograph is the second, which is the whole hierarchy this
   product is allowed. */
.jf-open{padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,68px)}
.jf-open h1{font-family:var(--fj-display);font-weight:700;
  font-size:clamp(38px,6.4vw,84px);line-height:.96;letter-spacing:-.028em;
  max-width:16ch;margin:0;text-wrap:balance}
.jf-open .jf-sub{font-family:var(--fj-text);font-size:clamp(17px,2.1vw,21px);
  line-height:1.5;max-width:48ch;color:var(--c-muted);margin:22px 0 0}
.jf-shot{margin-top:clamp(34px,5vw,58px);position:relative;
  background:var(--c-sand)}
.jf-shot img{display:block;width:100%;height:auto}
.jf-shot figcaption{position:absolute;left:0;bottom:0;
  padding:10px 16px;background:var(--c-primary);color:var(--c-bg);
  font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase}

/* ---- the three tracks ---------------------------------------------------
   Money, papers, calendar. Set as three columns of running text rather than
   three cards, because cards imply three things you do and these are three
   things that are true at once. */
.jf-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  border-top:2px solid var(--c-primary)}
.jf-track{padding:26px 26px 24px 0;border-right:1px solid var(--c-border)}
.jf-track:last-child{border-right:0;padding-right:0}
.jf-track b{display:block;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--jf-tone);
  margin-bottom:12px}
.jf-track h3{font-family:var(--fj-display);font-size:20px;font-weight:700;
  line-height:1.1;letter-spacing:-.008em;margin:0 0 9px}
.jf-track p{font-size:15px;line-height:1.55;color:var(--c-muted);margin:0}
@media(max-width:820px){
  .jf-tracks{grid-template-columns:1fr}
  .jf-track{border-right:0;border-bottom:1px solid var(--c-border);
    padding:22px 0 20px}
  .jf-track:last-child{border-bottom:0}
}

.jf-open--short{padding-bottom:0}

/* ---- the estimator ------------------------------------------------------
   Four choices on the left, the arithmetic on the right. The arithmetic is
   shown as arithmetic — $650 x 7 + $200 — because a total on its own is a
   price tag and a total under its parts is an estimate, which is what this
   actually is. */
.jf-planner{padding-top:clamp(48px,7vw,88px)}
.jf-planner > .af-stamp{margin-bottom:clamp(20px,3vw,30px)}
.jf-close{padding-bottom:clamp(48px,7vw,88px)}
.jf-more{margin-top:22px}
.jf-lab{margin-top:14px}
.jf-q-small{font-size:clamp(19px,2.2vw,23px)}

.jf-est{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:900px){.jf-est{grid-template-columns:1fr;gap:34px}}

/* THE ANSWER FOLLOWS THE QUESTIONS ON A PHONE, AND SITS BESIDE THEM ON A
   DESKTOP — BUT IT MUST NOT SCROLL AWAY WHILE THEY ARE BEING ANSWERED.
   On a narrow screen the working is below five fieldsets, so a reader changing
   the tier cannot see the figure move. Sticking it to the bottom of the
   viewport would fix that and would also be the one piece of this page that
   behaves like an app. Instead the working sticks to the TOP once it has been
   scrolled to, on screens tall enough to hold it, which keeps the answer in
   view while the questions above it are still being changed. */
@media(min-width:901px){
  .jf-work{position:sticky;top:24px}
}
@media(prefers-reduced-motion:reduce){.jf-work{position:static}}

/* ---- the four movements -------------------------------------------------
   Dream, Choose, Build, Journey are the page's spine rather than four words
   printed on it, which means they have to be legible as structure before a
   word of them is read: a rule across the top of each, an ordinal that
   continues from the one above, and enough air between them that they read as
   four things and not as one page with subheadings.

   The ordinal is set beside the name rather than above it. Stacked, four
   movements produce four two-line stacks and the page starts to look like a
   numbered list of features; on one line it reads as a chapter mark, which is
   what it is. */
/* The air belongs to the mark, not to the section as well. Both carried it in
   the first cut and the gap between a photograph and the movement under it came
   out at a hundred and fifty pixels of nothing. */
.jf-move{padding-top:0}
.jf-move-n{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;
  padding-top:clamp(18px,2.4vw,28px);margin-top:clamp(52px,6.5vw,96px);
  border-top:2px solid var(--c-primary)}
.jf-move-n b{font-family:var(--fj-display);font-size:26px;font-weight:700;
  line-height:.85;letter-spacing:-.03em;color:var(--c-accent)}
/* The opening movement sits directly under the masthead, which is its own
   rule; a second one twelve pixels below reads as a mistake rather than as a
   chapter mark. */
.jf-open .jf-move-n{margin-top:clamp(22px,3vw,34px)}

/* A MOVEMENT'S HEADING IS A HEADING, NOT A THIRD LABEL.
   af-stamp is the page's small mono uppercase voice and the h2s were wearing
   it, which was fine when there was one of them and nothing above it. Under a
   movement mark it produced three small uppercase lines stacked — 02 CHOOSE,
   then WHERE AND WHEN, then the WHERE legend — all the same size, all the same
   case, and no way to tell which was the heading. The stamp names the
   movement; the heading is the question, and it is set like one. */
.jf-move > h1,.jf-move > h2{font-family:var(--fj-display);font-weight:700;
  font-size:clamp(30px,4vw,52px);line-height:1.02;letter-spacing:-.024em;
  text-transform:none;color:var(--c-primary);margin:0 0 clamp(22px,3vw,36px);
  max-width:20ch;text-wrap:balance}

/* Choose is two questions, so it is set as two. Stacked they read as the top
   of a form; side by side they read as a pair, which is what the movement is
   named for — where, and when, and nothing else until those are answered. */
.jf-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,52px);align-items:start}
@media(max-width:760px){.jf-two{grid-template-columns:1fr;gap:28px}}
/* The questions column of the planner. It used to be the <form> itself; the
   form now spans two movements, so the grid child it left behind is named. */
.jf-asks{min-width:0}

.jf-ask{border:0;margin:0 0 28px;padding:0}
.jf-ask:last-of-type{margin-bottom:0}
.jf-ask legend{font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-muted);padding:0;margin-bottom:12px}
.jf-chips{display:flex;flex-wrap:wrap;gap:2px}
.jf-chip{position:relative;display:block;cursor:pointer}
/* 1px, not 100%. The browser check that measures whether a focus ring ever
   lands on something invisible flagged twelve of seventy-eight stops here: an
   input at opacity:0 filling the whole label is invisible AND has real size,
   so the ring is drawn around nothing a sighted keyboard user can see. The
   visible indicator on the sibling span was already correct; the problem was
   the rectangle underneath it.
   1px is the pattern .jn-chip and .jn-card already use, and it costs nothing:
   the label is the click target, not the input. */
.jf-chip input{position:absolute;width:1px;height:1px;opacity:0;
  margin:0;pointer-events:none}
.jf-chip span{display:block;font-family:var(--fj-mono);font-size:12px;
  letter-spacing:.04em;padding:9px 14px;border:1px solid var(--c-border);
  color:var(--c-ink);background:var(--c-bg);
  transition:border-color var(--t-fast,.2s),color var(--t-fast,.2s)}
.jf-chip:hover span{border-color:var(--jf-tone)}
.jf-chip input:checked+span{border-color:var(--jf-tone);
  border-width:2px;padding:8px 13px;color:var(--jf-tone);font-weight:500}
/* Keyboard focus has to be visible on a control whose input is invisible. */
.jf-chip input:focus-visible+span{outline:2px solid var(--c-accent);
  outline-offset:2px}

/* The two selects. A native control, styled only as far as it can be styled
   without breaking the thing a native control is for: on a phone this opens
   the operating system's own picker, which is faster and more accessible than
   any list of fifty-four countries we could draw. */
.jf-select{display:block;width:100%;margin-top:8px;
  font-family:var(--fj-text);font-size:16px;line-height:1.4;
  padding:11px 14px;border:1px solid var(--c-border);border-radius:0;
  background:var(--c-bg);color:var(--c-ink);
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--jf-tone) 50%),
    linear-gradient(135deg,var(--jf-tone) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.jf-select:hover{border-color:var(--jf-tone)}
.jf-select:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
/* 16px above is not a style choice: any smaller and iOS zooms the page on
   focus, which throws the reader out of the layout they were reading. */

.jf-tiers{display:grid;gap:2px}
.jf-tier{position:relative;display:block;cursor:pointer}
.jf-tier input{position:absolute;width:1px;height:1px;opacity:0;
  margin:0;pointer-events:none}
.jf-tier span{display:grid;grid-template-columns:1fr auto;gap:6px 16px;
  align-items:baseline;padding:14px 16px;border:1px solid var(--c-border);
  background:var(--c-bg);transition:border-color var(--t-fast,.2s)}
.jf-tier b{font-family:var(--fj-display);font-size:17px;font-weight:700;
  letter-spacing:-.006em}
.jf-tier i{grid-column:1;font-style:normal;font-size:14px;
  color:var(--c-muted);line-height:1.4}
.jf-tier em{grid-column:2;grid-row:1;font-style:normal;font-family:var(--fj-mono);
  font-size:13px;font-variant-numeric:tabular-nums;color:var(--c-muted)}
.jf-tier:hover span{border-color:var(--jf-tone)}
.jf-tier input:checked+span{border-color:var(--jf-tone);border-width:2px;
  padding:13px 15px}
.jf-tier input:checked+span b{color:var(--jf-tone)}
.jf-tier input:focus-visible+span{outline:2px solid var(--c-accent);
  outline-offset:2px}

/* The working. Mono, tabular, and — the constraint from the creative
   direction, enforced here — smaller than the destination's name above it.
   The total is 26px; .jf-where is 38px. */
.jf-work{background:var(--c-sand);padding:clamp(22px,3vw,32px);
  border-left:3px solid var(--jf-tone)}
.jf-where{font-family:var(--fj-display);font-weight:700;
  font-size:clamp(28px,3.6vw,38px);line-height:1.02;letter-spacing:-.02em;
  color:var(--jf-tone);margin:0 0 4px;text-transform:uppercase}
.jf-when{font-family:var(--fj-display);font-size:clamp(19px,2.4vw,25px);
  font-weight:500;line-height:1.1;letter-spacing:-.01em;margin:0 0 24px}
.jf-sum{margin:0;font-family:var(--fj-mono);font-size:13.5px;
  font-variant-numeric:tabular-nums;line-height:1.9}
.jf-sum div{display:flex;justify-content:space-between;gap:16px}
.jf-sum .jf-rule{margin-top:9px;padding-top:9px;
  border-top:1px solid var(--c-border);font-size:17px;color:var(--c-ink)}
.jf-sum .jf-rule b{font-weight:500}
.jf-sum span:first-child{color:var(--c-muted)}
.jf-said{margin:22px 0 0;font-family:var(--fj-text);font-size:17px;
  line-height:1.5}
/* THE FIGURE IS INK, NOT TONE, AND THAT IS A HIERARCHY DECISION BEFORE IT IS
   AN ACCESSIBILITY ONE.
   It was painted in the region tone, on sand, and measured 4.48:1 for East
   Africa and 4.47:1 for North — under AA by two hundredths, on the single most
   important sentence on the page. Nudging the size until it counted as "large
   text" would have passed the check and left a pale number on a warm ground.
   The tone belongs to the PLACE. It marks the destination's name above, and
   nothing else in this box: the arithmetic is the utility face doing utility
   work, and it is set in the reading ink at 14:1 on every ground this page
   has. Colour tells you where you are going; ink tells you what it costs. */
.jf-said b{font-family:var(--fj-mono);font-size:16px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--c-ink)}
.jf-fine{margin:18px 0 0;font-size:13.5px;line-height:1.55;color:var(--c-muted)}

/* THE TRAVEL GOAL PANEL.
   Set apart from the estimate above it by a rule and a recessed ground,
   because it is a different KIND of statement: everything above is an
   estimate of a price, and this is an illustration of a product that is not
   for sale yet. Deliberately quieter than the journey target — the figure it
   shows is real arithmetic about a thing nobody can buy, and typography that
   shouted would be making a promise the page is careful not to make.

   The tag sits IN the heading rather than under the numbers. A caveat below a
   figure is a caveat most readers never reach. */
.jf-goal{margin:26px 0 0;padding:20px 0 0;border-top:var(--fj-rule)}
.jf-goal-h{margin:0;font-family:var(--fj-mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.jf-goal-tag{font-size:10px;letter-spacing:.14em;text-transform:none;
  padding:2px 8px;border:1px solid var(--c-border);border-radius:2px;
  color:var(--c-muted)}
.jf-goal-grid{margin-top:14px;display:grid;gap:10px 20px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* D-goalinput: the reader records their own progress, on their own device.
   Deliberately quiet — this is a note in a planner, not a balance in an
   account, and it must not read as a deposit field. */
.jf-goal-set{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.12);display:flex;flex-direction:column;gap:.45rem}
.jf-goal-set-l{font-size:.86rem;line-height:1.45;max-width:46ch}
.jf-goal-set-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.jf-goal-set-i{width:8.5rem;padding:.5rem .6rem;font:inherit;font-variant-numeric:tabular-nums;border:1px solid rgba(0,0,0,.25);border-radius:.3rem;background:transparent;color:inherit}
.jf-goal-set-i:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.jf-goal-set-u{font-size:.86rem;opacity:.75}
.jf-goal-set-c{padding:.5rem .7rem;font:inherit;font-size:.86rem;background:transparent;border:1px solid rgba(0,0,0,.25);border-radius:.3rem;color:inherit;cursor:pointer}
.jf-goal-set-c:hover{border-color:currentColor}
.jf-goal-set-c:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* D11: reaching the target is a change of STAGE, not a bigger number. A rule,
   not a colour — the funded state should read as arrival, not as celebration. */
.jf-goal[data-funded="1"]{box-shadow:inset 3px 0 0 currentColor}
.jf-goal-cell{display:flex;flex-direction:column;gap:3px}
.jf-goal-cell span{font-size:12.5px;color:var(--c-muted)}
.jf-goal-cell b{font-family:var(--fj-mono);font-size:17px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--c-ink)}
.jf-goal-note{margin:16px 0 0;font-size:13px;line-height:1.55;
  color:var(--c-muted)}
@media(max-width:520px){
  .jf-goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jf-goal-cell b{font-size:15.5px}
}
.jf-fine + .jf-fine{margin-top:9px}

/* THE WAY BACK TO THE BUILDER, under the destination dropdown.
   Quiet on purpose. A reader who already knows where they are going should
   pass straight over it; it exists for the one who opened a list of
   fifty-four countries and did not know which. Accented rather than bold,
   because it is an alternative route and not a second call to action —
   "Talk to us about it" is the only solid button on the page and should
   stay the only one. */
/* The Travel Goal's state chip. The chip itself is styled by
   /styles/states.css, which every surface shares; this only says where it
   sits. Keeping placement here and appearance there is what lets the tone be
   recognisable across the product while each panel positions it for itself. */
.jf-goal-state{margin:0 0 16px}

.jf-where-back{margin-top:12px}
.jf-where-back a{color:var(--c-accent);text-underline-offset:2px}

/* The four doors offered when the arithmetic cannot reach the chosen month.
   Never red, never called invalid — the honest answer is that this journey is
   further away than this rhythm reaches, and here is what would reach it. */
.jf-reach{margin:18px 0 0;padding:14px 16px;border:1px solid var(--jf-tone);
  font-size:14.5px;line-height:1.55}
.jf-reach b{display:block;font-family:var(--fj-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--jf-tone);
  margin-bottom:7px}
.jf-reach[hidden]{display:none}

/* ---- keeping it ---------------------------------------------------------
   Phase 0 has no account, so "keep this" is this browser and nothing else.
   The copy says so; this is only the box it says it in. */
.jf-keep{margin-top:clamp(30px,4vw,48px);border-top:2px solid var(--c-primary);
  padding-top:26px;display:flex;flex-wrap:wrap;gap:16px 24px;
  align-items:flex-start}
.jf-keep p{margin:0;font-size:14.5px;line-height:1.55;color:var(--c-muted);
  max-width:46ch}
.jf-keep .jf-acts{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}
@media(max-width:760px){.jf-keep .jf-acts{margin-left:0}}
.jf-kept-note{font-family:var(--fj-mono);font-size:11px;letter-spacing:.1em;
  color:var(--jf-tone);margin:14px 0 0}
.jf-kept-note[hidden]{display:none}

/* ---- the question pages -------------------------------------------------
   /journey-fund/how-it-works and /journey-fund/questions. Running text with a
   question above it, in the order people actually ask them rather than the
   order the product would prefer. */
.jf-qs{max-width:66ch;padding:clamp(40px,6vw,72px) 0}
.jf-q{padding:26px 0;border-top:1px solid var(--c-border)}
.jf-q:first-of-type{border-top:2px solid var(--c-primary)}
.jf-q h2{font-family:var(--fj-display);font-size:clamp(21px,2.6vw,28px);
  font-weight:700;line-height:1.12;letter-spacing:-.012em;margin:0 0 12px}
.jf-q p{font-size:17px;line-height:1.62;margin:0 0 .9em}
.jf-q p:last-child{margin-bottom:0}
.jf-q .jf-hold{font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-accent);display:block;margin-bottom:9px}

/* ---- the closing note --------------------------------------------------
   What used to be a section headed "What this is not", with four cards
   answering four things the product does not do. It was a fifth of the page
   and one of its three headings, on a page whose proposition is that a
   journey can start long before you leave.

   The information has not gone anywhere — it is all on
   /journey-fund/how-it-works, which is where somebody who wants it goes, and
   it is still on this page in one line. What changed is that it no longer
   competes with the journey for the reader's attention. Supporting
   information, set as supporting information. */
.jf-note{margin:0;font-size:14.5px;line-height:1.6;color:var(--c-muted);
  max-width:64ch;padding-top:24px;border-top:1px solid var(--c-border)}
.jf-note a{color:var(--c-accent)}

/* The label above the destination. "The plan" rather than "the fund", because
   in this phase there is no fund — nothing is held, and the vocabulary has to
   carry that distinction where a reader will actually meet it. */
.jf-plan-eye{margin:0 0 10px;color:var(--c-muted)}

/* THE COMPLIANCE LADDER, ON /travel-points.
   
   The one genuinely new component on that page. Everything else there reuses
   the Journey Fund's existing furniture — jf-q, jf-said, jf-fine — because a
   fourth page in a family should not arrive with its own vocabulary. I did
   briefly give it one, a tp- prefix with five class names and no rules behind
   any of them, which rendered as unstyled blocks and would have been a
   twenty-fifth prefix in a system already trying to get down to eleven.

   A ladder is drawn rather than listed because "not skippable" is a property
   of a SEQUENCE, and a flat list of six words does not say sequence. The rail
   and the marks are what carry that; the current rung is the only one filled,
   so where the programme actually stands is visible before anything is read.

   No colour-only signalling: the current rung is also the only one carrying
   its own sentence, and it is the only one with aria-current="step". */
.jf-ladder{list-style:none;margin:20px 0 0;padding:0 0 0 22px;
  position:relative;max-width:64ch}
.jf-ladder::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;
  width:1px;background:var(--c-border)}
.jf-rung{position:relative;padding:7px 0;font-family:var(--fj-mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-muted)}
.jf-rung::before{content:"";position:absolute;left:-22px;top:12px;
  width:9px;height:9px;border-radius:50%;
  background:var(--c-bg);border:1px solid var(--c-border)}
.jf-rung.is-here{color:var(--c-primary)}
.jf-rung.is-here::before{background:var(--c-accent);border-color:var(--c-accent)}
.jf-rung.is-here b{font-family:var(--fj-text);font-size:14px;
  letter-spacing:normal;text-transform:none;color:var(--c-accent);
  font-weight:400}

/* The list of things a Travel Point is not. Each item leads with the denial in
   bold, so the five refusals are scannable without reading the sentences —
   which is the way this particular list is actually read. */
.jf-nots{list-style:none;margin:14px 0 0;padding:0;max-width:64ch}
.jf-nots li{padding:11px 0;border-top:1px solid var(--c-border);
  line-height:1.6}
.jf-nots li:first-child{border-top:0}