/* The journey engine — /journey. * --------------------------------------------------------------------------- * Prefixed `jn-`. Tokens, reset, type scale and buttons come from * afrinkong.css and are never redefined here. * * The page has three moods and they are meant to feel different: the questions * are a wide quiet page with one thing on it, the reveal is a held breath, and * the composer is a working surface. What holds them together is that all three * are set on the same paper, in the same three voices, with nothing on screen * that is not either a question, an answer, or the reason for it. */ /* ---- chrome -------------------------------------------------------------- */ /* An ivory plate, so it states its own ink rather than inheriting the page's. .jn-mark b sets no colour, which was harmless while every page carrying this masthead had dark type on light paper — and invisible the moment it appeared on /trans-afrique and /wonders, whose bodies are near-ivory on basalt. The mark measured 1.26:1 against its own background: ivory letters on an ivory bar, present in the DOM and absent from the page. */ .jn-mast{position:sticky;top:0;z-index:40;height:var(--mast);display:flex;align-items:center; gap:var(--sp-4);padding:0 28px;background:var(--c-bg);color:var(--c-primary); border-bottom:2px solid var(--c-primary)} .jn-mark{display:flex;flex-direction:column;line-height:1} .jn-mark i{font-family:var(--fj-mono);font-style:normal;font-size:9.5px;letter-spacing:.3em; text-transform:uppercase;color:var(--c-muted)} .jn-mark b{font-family:var(--fj-display);font-size:22px;letter-spacing:-.01em; text-transform:uppercase;margin-top:5px;white-space:nowrap} .jn-routes{display:flex;gap:26px;margin-left:auto;font-family:var(--fj-mono);font-size:10.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted)} .jn-routes a:hover{color:var(--c-accent)} .jn{max-width:1100px;margin:0 auto;padding:var(--sp-6) 44px var(--sp-7)} /* ---- the questions ------------------------------------------------------- */ /* One question on the screen at a time. Four dots and nothing else: a progress bar with a percentage on it turns four sentences into a form. */ .jn-progress{display:flex;gap:6px;margin-bottom:var(--sp-5)} .jn-progress span{width:34px;height:3px;background:var(--c-border); transition:background var(--t-mid) var(--ease)} .jn-progress span[data-on]{background:var(--c-accent)} .jn-h1{font-size:clamp(40px,6vw,86px);line-height:.92;margin:12px 0 0;max-width:16ch} /* The step heading takes focus when the builder moves on, so a screen reader announces the new question. It is a heading, not a control — nobody tabs to it — and ringing it would say "you are on this" about something you cannot act on. Keyboard focus on the controls below it is ringed as usual. */ .jn-h1:focus{outline:none} .jn-h2{font-family:var(--fj-display);font-size:13px;letter-spacing:.2em;text-transform:uppercase; color:var(--c-muted);border-top:2px solid var(--c-primary);padding-top:12px; margin-top:var(--sp-5)} .jn-h2:first-child{margin-top:var(--sp-4)} .jn-lede{margin-top:20px;font-size:17.5px;color:var(--c-muted);max-width:56ch} .jn-note{margin-top:10px;font-size:14.5px;color:var(--c-muted)} /* THE CHOICES ARE RULED ROWS, NOT BOXES. * * Every question on this page was built from the same object: a one-pixel * border round a title, a sentence and a number, repeated eight times, then * five times, then twelve, then again. Eight equal bordered cards in a * three-column grid is the pattern this direction exists to delete — it is a * pricing table with the prices taken out — and the border was doing no work * that the words were not already doing. * * So the box goes and the rule stays. A stack of choices is an index: a * hairline between rows, the name in display, what it means in the reading * face, and the quantity out at the right in mono where a figure belongs. The * white space does the separating, which is what white space is for. * * AND SELECTION IS A RULE, NEVER A FILL. A chosen row took a solid deep-forest * slab, which on question one meant up to eight slabs at once and a page that * looked like a form with half its fields highlighted. It is now a three-pixel * accent rule down the left edge and the name in burnt sienna — the same * gesture the fifty-seven calls elsewhere on this site make, and the same one * the fund's closing call was rebuilt around. Burnt sienna on the page is * 6.31:1, which a name at 26px more than clears. */ .jn-cards{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--sp-4); border-top:1px solid var(--c-border)} .jn-cards--rows{grid-template-columns:1fr} .jn-card{display:block;cursor:pointer;border-bottom:1px solid var(--c-border)} .jn-card input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .jn-card-in{display:block;padding:18px 4px 17px 18px;height:100%; border-left:3px solid transparent; transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease)} .jn-card-in b{display:block;font-family:var(--fj-display);font-size:26px;font-weight:700; text-transform:uppercase;line-height:1.02;letter-spacing:-.01em; transition:color var(--t-fast) var(--ease)} .jn-card-line{display:block;margin-top:7px;font-size:15.5px;line-height:1.5;color:var(--c-muted); max-width:52ch} .jn-card-n{display:block;margin-top:10px;font-family:var(--fj-mono);font-size:9.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)} .jn-card:hover .jn-card-in b{color:var(--c-accent)} .jn-card input:checked + .jn-card-in{border-left-color:var(--c-accent);padding-left:24px} .jn-card input:checked + .jn-card-in b{color:var(--c-accent)} .jn-card input:checked + .jn-card-in .jn-card-n{color:var(--c-accent)} .jn-card input:focus-visible + .jn-card-in{outline:2px solid var(--c-accent);outline-offset:3px} /* A row whose quantity is a range rather than a count: the figure sits out at the right on the name's own baseline, which is where a reader looks for it. */ .jn-card--row .jn-card-in{display:grid;grid-template-columns:1fr auto; grid-template-areas:"name short" "line short";column-gap:24px;align-items:baseline} .jn-card--row .jn-card-in b{grid-area:name} .jn-card--row .jn-card-line{grid-area:line;margin-top:6px} .jn-card--row .jn-card-n{grid-area:short;margin-top:0;white-space:nowrap} /* THE YEAR IS A SCALE, SO IT IS DRAWN AS ONE. Twelve bordered boxes in a row is a keypad. A year is an axis: twelve marks along one line, each under its own label, and the month chosen takes the accent and a rule three times the weight. That is a scale reading, which is what picking a month is. */ .jn-months{display:grid;grid-template-columns:repeat(12,1fr);gap:0; margin-top:var(--sp-4);border-top:1px solid var(--c-border)} .jn-mon{cursor:pointer} .jn-mon input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .jn-mon span{display:block;text-align:center;padding:18px 0 14px; border-bottom:2px solid transparent; font-family:var(--fj-mono);font-size:10px;letter-spacing:.1em; transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)} .jn-mon:hover span{color:var(--c-accent)} .jn-mon input:checked + span{color:var(--c-accent);border-bottom-color:var(--c-accent)} .jn-mon input:focus-visible + span{outline:2px solid var(--c-accent);outline-offset:2px} /* The same sentence again at the smallest size: a label and a rule under it when it is chosen. No pill, no fill. */ .jn-chips{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:var(--sp-4)} .jn-chips--style{margin-top:var(--sp-2)} .jn-chip{cursor:pointer;display:inline-block} .jn-chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .jn-chip span{display:inline-block;padding:10px 0 7px; border-bottom:2px solid transparent; font-family:var(--fj-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--c-muted); transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .jn-chip:hover span{color:var(--c-accent)} .jn-chip input:checked + span{color:var(--c-accent);border-bottom-color:var(--c-accent)} .jn-chip input:focus-visible + span{outline:2px solid var(--c-accent);outline-offset:3px} /* "I'm flexible" was a full-width slab of deep forest — the loudest object on a page whose subject is a question. It is the same label as the others now, set apart by sitting on its own line rather than by being shouted. */ .jn-chip--wide{display:block;margin-top:14px} .jn-chip--wide span{text-align:left} .jn-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-5)} .jn-acts--end{margin-top:var(--sp-5)} /* A sentence, for anybody who would rather write one than press six things. Set as a quiet second option under the cards, never as the main event: a single text field where a set of choices should be is how a product ends up pretending to understand more than it does. */ .jn-say{margin-top:var(--sp-4);border-top:var(--fj-rule);padding-top:16px} .jn-say label{display:block;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--c-muted)} .jn-say-row{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap} .jn-say input{flex:1 1 320px;min-width:0;font:inherit;font-size:16px; background:transparent;border:1px solid var(--c-border);padding:13px 14px;color:inherit} .jn-say input:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px} .jn-say-got{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--c-accent); min-height:1.5em} .jn-say-got[data-warn]{color:var(--c-muted)} /* How good a match, as a band rather than a number. The dataset can say a country declares two of the three things you asked for; it cannot support "87%", and a number that precise is a claim about precision. */ .jn-band{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:14px; padding-bottom:12px;border-bottom:var(--fj-rule)} .jn-band b{font-family:var(--fj-display);font-size:17px;text-transform:uppercase; letter-spacing:.01em} .jn-band[data-kind="strong"] b{color:var(--c-accent)} .jn-band span{font-size:14.5px;color:var(--c-muted)} /* Change one thing, where the journey is. */ .jn-tweak{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;margin-top:20px} .jn-tweak-say{width:100%;font-family:var(--fj-mono);font-size:9px;letter-spacing:.22em; text-transform:uppercase;color:var(--c-muted)} .jn-tweak-f{display:grid;gap:5px} .jn-tweak-f>span{font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--c-muted)} .jn-tweak select{font:inherit;font-family:var(--fj-mono);font-size:11px;letter-spacing:.08em; background:transparent;border:0;border-bottom:2px solid var(--c-primary);padding:6px 22px 6px 0; color:inherit;cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--c-accent) 50%), linear-gradient(135deg,var(--c-accent) 50%,transparent 50%); background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%; background-size:5px 5px,5px 5px;background-repeat:no-repeat} .jn-tweak select:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} /* Something already begun, offered before the first question rather than hidden behind an account that does not exist. */ .jn-saved{border:1px solid var(--c-border);padding:18px 20px;margin-bottom:var(--sp-5)} .jn-saved ul{margin-top:10px;display:grid;gap:2px} .jn-saved a{display:flex;justify-content:space-between;gap:16px;align-items:baseline; padding:9px 0;border-bottom:var(--fj-rule)} .jn-saved li:last-child a{border-bottom:0} .jn-saved b{font-family:var(--fj-display);font-size:17px;text-transform:uppercase} .jn-saved span{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--c-muted);white-space:nowrap} .jn-saved a:hover b{color:var(--c-accent)} /* ---- the reveal ---------------------------------------------------------- */ /* The held breath. Everything arrives at once but not at the same speed: the country first, then its name, then the reason. Three steps is enough to read as a reveal; more would be a performance. */ /* The reveal takes the whole screen it interrupts. Anything left showing under it is something the eye can go to instead of the answer. */ .jn-reveal{min-height:calc(100vh - var(--mast) - var(--sp-6) - var(--sp-7)); display:flex;align-items:center} /* The name is sized against this row, not against the window. See the note on .jn-reveal-name. container-type:inline-size applies inline containment, which is a containing block for fixed descendants — there are none here, and this element is on /journey only, so it cannot reach the homepage's fixed-window band. Worth saying because that band has been broken this way before. */ .jn-reveal-in{display:grid;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--sp-4) var(--sp-6);align-items:center;container-type:inline-size} .jn-reveal-stamp{grid-column:1/-1;color:var(--c-accent)} .jn-shape{grid-row:span 4;align-self:stretch;display:flex;align-items:center; min-height:340px} .jn-shape svg{width:100%;height:auto;max-height:64vh;display:block;overflow:visible} .jn-shape-fill{fill:color-mix(in srgb,var(--c-accent) 88%,var(--c-primary))} /* THE COUNTRY'S NAME WAS SIZED AGAINST THE WINDOW AND SET IN HALF OF IT. 7vw is 104px at 1920, and at 1920 this name stands in a 352px cell: CAMEROON came to 499px and ran out through the map beside it. It overflowed at every width from 1080 up, and the wider the screen the worse it got, which is the signature of a viewport unit doing a container's job. Sized against the row it lives in instead. This face sets a name at 4.80 times its font size, the cell is 1.05/2.05 of the row, and the target is the longest single-word name on the list — Mozambique, not Cameroon — inside ninety per cent of the cell, which is the row times 0.076. The clamp ends are guards; the calc lands inside them. */ .jn-reveal-name{align-self:end;margin:0; font-size:clamp(38px,7vw,104px); font-size:clamp(34px,7.6cqw,104px)} .jn-reveal-tag{font-family:var(--fj-text);font-size:clamp(19px,2.2vw,27px);color:var(--c-accent); line-height:1.25;margin:0} /* Who lives there, above why we chose it. */ .jn-meets{font-family:var(--fj-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--c-ink);line-height:2;padding-bottom:18px;margin-bottom:20px; border-bottom:var(--fj-rule)} .jn-meets span{display:block;color:var(--c-muted);letter-spacing:.2em} .jn-meets a{color:var(--c-accent);white-space:nowrap} .jn-meets a:hover{color:var(--c-primary)} .jn-why{border-top:2px solid var(--c-primary);padding-top:14px} .jn-why-head{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--c-muted)} .jn-why-list{margin-top:12px;display:grid;gap:9px} .jn-why-list li{position:relative;padding-left:26px;font-size:16px;line-height:1.5} .jn-why-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--c-accent); font-family:var(--fj-mono);font-size:13px} .jn-why-list li[data-key="warn"]::before{content:"!";color:var(--c-muted)} /* What it is not. Set in the same list rather than in a footnote, because a caveat you have to go looking for is a caveat nobody reads. */ .jn-why-list li[data-key="gap"]{color:var(--c-muted)} .jn-why-list li[data-key="gap"]::before{content:"\2013";color:var(--c-muted)} .jn-why-list li[data-key="open"]::before{content:"\2022"} .jn-why-list li button{background:none;border:0;cursor:pointer;font:inherit;text-align:left; color:inherit;text-decoration:underline;text-underline-offset:3px} .jn-why-list li button:hover{color:var(--c-accent)} .jn-why-carried{margin-top:14px;font-size:14px;color:var(--c-muted);font-style:italic} .jn-alts{grid-column:1/-1;display:none;gap:0;margin-top:var(--sp-2); border-top:2px solid var(--c-primary)} .jn-alts[data-open]{display:grid} .jn-alt{display:grid;grid-template-columns:40px 1fr 20px;gap:14px;align-items:start; width:100%;text-align:left;background:none;border:0;border-bottom:var(--fj-rule); cursor:pointer;padding:18px 4px;color:inherit;font:inherit; transition:background var(--t-fast) var(--ease)} .jn-alt:hover{background:var(--fj-dust)} .jn-alt-no{font-family:var(--fj-mono);font-size:10px;letter-spacing:.12em;color:var(--c-muted); padding-top:5px} .jn-alt-body b{display:block;font-family:var(--fj-display);font-size:24px;font-weight:700; text-transform:uppercase;line-height:1.04} .jn-alt-line{display:block;margin-top:5px;font-size:15.5px;color:var(--c-accent)} .jn-alt-why{display:block;margin-top:7px;font-size:14.5px;color:var(--c-muted)} .jn-alt-go{font-family:var(--fj-mono);color:var(--c-border);padding-top:4px; transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .jn-alt:hover .jn-alt-go{color:var(--c-accent);transform:translateX(3px)} .jn-restart{grid-column:2;justify-self:start;background:none;border:0;cursor:pointer; font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--c-muted);padding:10px 0;margin-top:0} .jn-restart:hover{color:var(--c-accent)} /* The arrival. One frame of offset, released on the next — the country lifts in, its name follows, the reason last. */ .jn-reveal .jn-shape,.jn-reveal .jn-reveal-name, .jn-reveal .jn-reveal-tag,.jn-reveal .jn-why{ transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)} .jn-reveal[data-arriving] .jn-shape{opacity:0;transform:scale(.965)} .jn-reveal[data-arriving] .jn-reveal-name{opacity:0;transform:translateY(16px)} .jn-reveal[data-arriving] .jn-reveal-tag{opacity:0;transform:translateY(16px)} .jn-reveal[data-arriving] .jn-why{opacity:0} .jn-reveal .jn-reveal-name{transition-delay:.12s} .jn-reveal .jn-reveal-tag{transition-delay:.2s} .jn-reveal .jn-why{transition-delay:.3s} /* ---- the composer -------------------------------------------------------- */ /* The reason follows the journey. A recommendation that explains itself once and then goes quiet is a recommendation you have to take on trust. */ .jn-carry{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px} .jn-carry span{font-family:var(--fj-mono);font-size:9px;letter-spacing:.14em; text-transform:uppercase;color:var(--c-muted);border:1px solid var(--c-border); padding:6px 9px} .jn-carry span::before{content:"\2713";color:var(--c-accent);margin-right:7px} .jn-carry span[data-key="warn"]::before, .jn-carry span[data-key="gap"]::before{content:"\2013";color:var(--c-muted)} .jn-compose-head{border-bottom:2px solid var(--c-primary);padding-bottom:var(--sp-4)} .jn-compose-head .jn-h1{font-size:clamp(34px,5vw,68px);max-width:20ch} .jn-compose-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--sp-6)} .jn-line-col{min-width:0} /* Twenty-six places is a page in its own right, and next to a five-stage timeline it turned the composer into a scroll. It is a working surface, so it keeps its own scroll and follows you down as you edit the journey beside it. */ .jn-pick-col{min-width:0;position:sticky;top:calc(var(--mast) + 20px); max-height:calc(100vh - var(--mast) - 40px);display:flex;flex-direction:column} .jn-picks{overflow-y:auto;min-height:0;flex:1 1 auto; -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)} /* The journey down the page, with the thread drawn between the stages. A spreadsheet of days would say the same thing and mean less. */ .jn-line{margin-top:var(--sp-2);position:relative} /* The thread runs down the left margin and the day sits clear of it. Drawn through the middle of the first column it printed the dot on top of the date, which is the sort of thing that only shows up on the screen. */ .jn-leg{position:relative;display:grid;grid-template-columns:104px 1fr 26px;gap:16px; align-items:start;padding:18px 0;border-bottom:var(--fj-rule)} .jn-leg::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px; background:var(--c-border)} .jn-leg:first-child::before{top:26px} .jn-leg:last-child::before{bottom:calc(100% - 26px)} .jn-leg::after{content:"";position:absolute;left:0;top:22px;width:9px;height:9px; border-radius:50%;background:var(--c-accent)} .jn-leg--edge::after{background:var(--c-bg);border:1px solid var(--c-border)} .jn-leg-day{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--c-muted);padding:4px 0 0 24px} .jn-leg-body b{display:block;font-family:var(--fj-display);font-size:23px;font-weight:700; text-transform:uppercase;line-height:1.04} .jn-leg--edge .jn-leg-body b{font-size:16px;color:var(--c-muted)} .jn-leg-line{display:block;margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--c-muted)} .jn-leg-meta{display:block;margin-top:7px;font-family:var(--fj-mono);font-size:9px; letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)} .jn-leg-x{background:none;border:0;cursor:pointer;font-size:20px;line-height:1; color:var(--c-border);padding:2px 4px;transition:color var(--t-fast) var(--ease)} .jn-leg-x:hover{color:var(--c-accent)} .jn-caveat{margin-top:16px;font-size:14px;line-height:1.6;color:var(--c-muted); border-left:2px solid var(--c-border);padding-left:14px;max-width:52ch} /* What it is made of. Counted from the stages actually chosen, so the bars are a tally and not a guess — and set as rules rather than as a dashboard. */ .jn-dna{margin-top:var(--sp-3);display:grid;gap:8px} .jn-bar{display:grid;grid-template-columns:120px 1fr 42px;gap:14px;align-items:center} .jn-bar-k{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--c-muted)} .jn-bar-t{display:block;height:6px;background:var(--c-border)} .jn-bar-t i{display:block;height:100%;background:var(--c-accent); transition:width var(--t-mid) var(--ease)} .jn-bar-n{font-family:var(--fj-mono);font-size:9.5px;color:var(--c-muted);text-align:right} /* Where the journey could carry on to. Set above the operator because it is the last decision before the journey is handed over. */ .jn-onward{margin-top:var(--sp-5);border-top:2px solid var(--c-primary);padding-top:14px} .jn-onward ul{margin-top:8px} .jn-onward li{border-bottom:var(--fj-rule)} .jn-onward button{display:grid;grid-template-columns:1fr auto;gap:5px 14px;width:100%; text-align:left;background:none;border:0;cursor:pointer;padding:13px 4px;color:inherit; font:inherit;transition:background var(--t-fast) var(--ease)} .jn-onward button:hover{background:var(--fj-dust)} .jn-onward b{font-family:var(--fj-display);font-size:20px;text-transform:uppercase; line-height:1.05} .jn-onward b::after{content:" \2192";color:var(--c-accent)} .jn-onward-km{font-family:var(--fj-mono);font-size:9px;letter-spacing:.12em; color:var(--c-muted);white-space:nowrap;padding-top:4px} .jn-onward-why{grid-column:1/-1;font-size:14.5px;line-height:1.5;color:var(--c-muted)} .jn-onward-note{margin-top:12px;font-size:13px;line-height:1.6;color:var(--c-muted)} /* The border, in the middle of the timeline. */ .jn-cross{position:relative;padding:16px 0 16px 104px;border-bottom:var(--fj-rule)} .jn-cross::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px; border-left:1px dashed var(--c-accent)} .jn-cross span{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--c-accent)} .jn-cross span::before{content:"crossing into ";color:var(--c-muted)} .jn-who{margin-top:var(--sp-5)} .jn-who-in{border-top:2px solid var(--c-primary);padding-top:16px} .jn-who-in[data-ours]{border-top-color:var(--c-accent)} .jn-who-in b{display:block;font-family:var(--fj-display);font-size:26px;text-transform:uppercase; margin-top:8px;line-height:1.04} .jn-who-base{display:block;margin-top:6px;font-family:var(--fj-mono);font-size:9.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)} .jn-who-in p{margin-top:10px;font-size:15.5px;color:var(--c-muted);max-width:48ch} .jn-who-in .af-go{margin-top:12px} .jn-said{margin-top:14px;font-size:14.5px;color:var(--c-muted);opacity:0; transition:opacity var(--t-mid) var(--ease);min-height:1.6em} .jn-said[data-on]{opacity:1} .jn-picks{margin-top:var(--sp-2);border-top:2px solid var(--c-primary)} .jn-picks li{border-bottom:var(--fj-rule)} .jn-pick{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;width:100%; text-align:left;background:none;border:0;cursor:pointer;padding:14px 4px;color:inherit; font:inherit;transition:background var(--t-fast) var(--ease)} .jn-pick:hover{background:var(--fj-dust)} .jn-pick-mark{font-family:var(--fj-mono);font-size:15px;color:var(--c-accent); line-height:1.3;text-align:center} .jn-pick-body b{display:block;font-family:var(--fj-display);font-size:17px;font-weight:700; text-transform:uppercase;line-height:1.1} .jn-pick-line{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--c-muted)} .jn-pick-meta{display:block;margin-top:6px;font-family:var(--fj-mono);font-size:8.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)} /* Already in the journey: the row keeps its place in the list rather than disappearing out of it, so the list never reorders under the cursor. A rule, not a plate. Three consecutive chosen stages made one dust-coloured block behind them — a filled slab in the middle of a page that has just spent four screens saying selection is a rule. It is the accent down the left edge here too, and the name goes quiet because the row's job is now to say "this one is already in", not to compete with the timeline that holds it. Hover keeps the dust: that is a pointer, not a state. */ .jn-pick{border-left:3px solid transparent} .jn-pick[aria-pressed="true"]{background:none;border-left-color:var(--c-accent)} .jn-pick[aria-pressed="true"] .jn-pick-body b{color:var(--c-muted)} /* Written up under something you asked for. */ .jn-pick[data-lead] .jn-pick-body b::after{content:"";display:inline-block;width:5px;height:5px; background:var(--c-accent);border-radius:50%;margin-left:8px;vertical-align:middle} .jn-nojs{border:1px solid var(--c-border);padding:20px;margin-top:var(--sp-4); font-size:16px;color:var(--c-muted);max-width:60ch} .jn-nojs a{text-decoration:underline;text-underline-offset:3px} /* ---- tablet -------------------------------------------------------------- */ @media(max-width:1000px){ .jn{padding:var(--sp-5) 28px var(--sp-6)} .jn-reveal-in{grid-template-columns:1fr;gap:var(--sp-3)} /* AND THE ONE ITEM THAT WAS STILL ASKING FOR COLUMN TWO. "Ask me again" carries grid-column:2 so it sits under the text on a wide screen. Below 1000 there is no column two, so it made one — an implicit track — and the reveal has been a two-column layout at every width down to 320 while this rule said one. That is why the country's name was set in half the screen on a phone. Nothing looked broken; it just never was the layout the stylesheet described. */ .jn-restart{grid-column:1} /* One column means the name gets the whole row, so it is sized against the whole row: 16cqw rather than 7.6. At 390 that is 57px instead of 37 — the difference between a headline and a label. */ .jn-reveal-name{font-size:clamp(38px,16cqw,104px)} .jn-shape{grid-row:auto;min-height:0;max-width:340px} .jn-shape svg{max-height:38vh} .jn-compose-grid{grid-template-columns:1fr;gap:var(--sp-5)} .jn-pick-col{position:static;max-height:none;display:block} .jn-picks{overflow:visible;-webkit-mask-image:none;mask-image:none} } /* ---- phone --------------------------------------------------------------- */ /* 860, not 720. The routes plus the mark plus the Explore key plus the call want 837 pixels; hiding the routes at 720 left the call hanging 97px off a 740 screen and 17px off an 820 one. Measured across 700-900 in 20px steps. */ @media(max-width:860px){ .jn-mast{padding:0 10px;gap:8px} .jn-routes{display:none} .jn-mark b{font-size:17px} .jn-mast .af-btn{padding:11px 12px;font-size:9.5px;white-space:nowrap} } /* THE PAGE NAME LEAVES THE MASTHEAD ON A PHONE. It is the one label a reader does not need — they are on the page it names — and it is the only element here whose width is set by editorial copy rather than by design. `The Wonders of Africa` is 221 nowrapped pixels; with the call beside it the bar wanted 372 on a 320 screen and pushed the button 42px off the edge, and `Trans Afrique` did the same by 10. Any page added later with a longer name would have done it again, so the fix is structural rather than a shorter name. Afrinkong takes its place at display size, which is a better mobile masthead than the two-line lockup anyway: one word, and it is the company's. */ @media(max-width:560px){ .jn-mark b{display:none} .jn-mark i{font-family:var(--fj-display);font-size:17px;letter-spacing:.02em; text-transform:uppercase;color:var(--c-primary)} /* Hiding the second line halved the link's height: one 17px line is a 17px tap target, and the mark is the way home from every one of these pages. The height is put back on the link rather than on the type, so the word stays 17px and the thing you press is 32. */ .jn-mark{justify-content:center;min-height:32px} /* The picker keeps its own scroll on a phone too. Left to run, twenty-six places turn the composer into five screens and bury the journey it is supposed to be editing. */ .jn-picks{max-height:58vh;overflow-y:auto;border-bottom:1px solid var(--c-border); -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)} .jn{padding:var(--sp-4) 18px var(--sp-6)} .jn-h1{font-size:clamp(32px,9.5vw,50px);max-width:none} /* The question headings take the phone size above; the country's name does not. It is one word on its own line with the whole row to itself, and at 9.5vw it came out at 37px in a 354px column — a label where the page's one big moment should be. Restated here because .jn-h1 is declared after the tablet rule and they carry the same weight. */ .jn-reveal-name{font-size:clamp(38px,16cqw,104px)} .jn-cards{grid-template-columns:1fr} .jn-card-in{padding:16px} .jn-card-in b{font-size:22px} .jn-card--row .jn-card-in{grid-template-columns:1fr;grid-template-areas:"name" "short" "line"} .jn-card--row .jn-card-n{margin-top:6px} /* Twelve months across a phone is a four-pixel target. Three rows of four. */ .jn-months{grid-template-columns:repeat(4,1fr)} .jn-leg{grid-template-columns:82px 1fr 24px;gap:10px} .jn-cross{padding-left:82px} .jn-tweak{gap:10px 14px} .jn-say-row{flex-direction:column} .jn-bar{grid-template-columns:88px 1fr 36px;gap:10px} /* The next step follows you down the page: on a phone the buttons are the bottom of a long list otherwise, and the answer is above the fold. */ .jn-acts{position:sticky;bottom:0;background:var(--c-bg);padding:14px 0; border-top:1px solid var(--c-border);margin-top:var(--sp-4);z-index:5} .jn-acts .af-btn{flex:1 1 auto;text-align:center} .jn-acts--end{position:static;border-top:0} } @media(pointer:coarse){ .jn-chip span,.jn-mon span{min-height:44px;display:flex;align-items:center; justify-content:center} .jn-pick{padding:16px 4px} } /* ---- the continent, coloured --------------------------------------------- * * Afrinkong recommends; the traveller decides. So a lens repaints this grid * rather than emptying it: all fifty-four stay, all fifty-four stay clickable, * and somebody who arrived knowing they want Ghana finds Ghana in the same * place it always was. * * No red, and no grey-out. A country that does not lead on what you asked is * not a failure or a closed door — it is a country with its own answer, and * the line under its name always says what it IS for. The four states are * three weights of the house palette plus the one you have chosen, so the * message reads "here is what fits what you told us", never "here is what we * allow". */ .jn-field{border-top:2px solid var(--c-primary);margin-top:var(--sp-6); padding:var(--sp-5) 0 var(--sp-7)} .jn-field[hidden]{display:none} .jn-field-in{width:100%} .jn-field-h{font-family:var(--fj-display);font-size:clamp(24px,3vw,38px); line-height:1.04;margin:10px 0 0;max-width:24ch} .jn-field-h em{font-style:normal;color:var(--c-accent)} .jn-field-say{margin-top:12px;font-size:16px;color:var(--c-muted);max-width:58ch} /* THE LEGEND IS A RULE, BECAUSE THE MAP AND THE GRID ARE NOW ONE LANGUAGE. The swatch was a filled square, which described a grid of filled squares. Both of those are gone: a country declares its answer with a rule at its left edge, on the map and in this list alike, so the legend shows a rule. */ .jn-field-key{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:var(--sp-4)} .jn-field-key span{display:flex;align-items:center;gap:10px;font-family:var(--fj-mono); font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)} .jn-field-key span::before{content:"";width:3px;height:15px;flex:0 0 auto; background:var(--c-border)} .jn-field-key span[data-match="leads"]::before{background:var(--c-accent)} .jn-field-key span[data-match="region"]::before{background:var(--c-primary)} .jn-field-key span[data-match="open"]::before{background:var(--c-border)} /* FIFTY-FOUR COUNTRIES, NOT FIFTY-FOUR SLABS. * * This was a grid of filled chips: twenty-seven solid burnt sienna, nineteen * solid deep forest, eight on the page's own ground — most of a screen given * over to blocks of colour, and the exact repetition of a bordered box the * direction was written to stop. * * It also stopped agreeing with the map beside it. The map says "this one * answers" with a wash and a heavier outline; the grid said it with a flood. * Two paints for one idea is two legends, and this file claimed in a comment * that a reader who had learnt one had learnt the other. Now that is true. * * A ruled index instead, in the same language as the questions: a hairline * above each row, the name, what it leads on under it, and a three-pixel rule * at the left edge carrying the answer. No fill anywhere, so the colour on * this screen is a set of marks rather than a wall. */ .jn-field-grid{display:grid;gap:0 clamp(20px,3vw,52px);margin-top:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(236px,1fr))} .jn-c{display:block;width:100%;text-align:left;cursor:pointer;font:inherit; padding:12px 2px 13px 15px;background:none;color:var(--c-fg); border:0;border-top:1px solid var(--c-border); border-left:3px solid transparent; transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .jn-c b{display:block;font-family:var(--fj-display);font-size:16px; text-transform:uppercase;letter-spacing:-.005em;line-height:1.1; transition:color var(--t-fast) var(--ease)} .jn-c-for{display:block;margin-top:5px;font-family:var(--fj-mono);font-size:8.5px; letter-spacing:.13em;text-transform:uppercase;color:var(--c-muted)} /* Leads on it: the accent, as a rule and as the name. Burnt sienna rather than terracotta is not a taste decision — it is the one of the two that carries 16px type on this ground, at 6.31:1 against 4.31:1. */ .jn-c[data-match="leads"]{border-left-color:var(--c-accent)} .jn-c[data-match="leads"] b{color:var(--c-accent)} /* Its region does: deep forest, quieter but still an answer. */ .jn-c[data-match="region"]{border-left-color:var(--c-primary)} /* Written up here too: no rule at all. Present, not dimmed out — the name is the same ink as everything else and the line under it still says what the country IS for. */ .jn-c[data-match="open"]{border-left-color:transparent} .jn-c:hover b{color:var(--c-accent)} .jn-c:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} /* The one they chose, whatever the ranking thought of it. Gold and heavier — the same mark the map puts round a chosen country, for the same reason. */ .jn-c[data-picked]{border-left:5px solid var(--c-gold,#B99A63);padding-left:13px} /* Out of the month they gave: marked, never removed. */ .jn-c[data-off] b::after{content:"\00a0\00b7\00a0other months";font-family:var(--fj-mono); font-size:8px;letter-spacing:.12em;color:var(--c-muted);text-transform:uppercase} .jn-field-fine{margin-top:var(--sp-4);font-family:var(--fj-display); font-size:clamp(15px,1.5vw,19px);color:var(--c-accent)} @media(max-width:760px){ .jn-field{margin-top:var(--sp-6);padding-top:var(--sp-4)} .jn-field-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px} .jn-c{padding:11px 12px;min-height:44px} .jn-c b{font-size:14px} } /* ---- the ground ---------------------------------------------------------- */ /* The last question, and the only one with a number in it. It reuses jn-card and jn-chip rather than introducing a form language of its own, because a checkout that arrives looking like a checkout undoes four questions of editorial voice in one scroll. */ .jn-ground{padding:var(--sp-6) 0 var(--sp-7)} .jn-ground-in{min-width:0} .jn-ground .jn-h1{max-width:18ch} .jn-g{margin-top:var(--sp-6);display:grid;gap:var(--sp-6)} .jn-g-set{border:0;padding:0;margin:0;min-width:0} .jn-g-set .jn-h2{margin-top:0} .jn-g-set .jn-lede{margin-top:8px;font-size:16px} .jn-g-set .jn-cards,.jn-g-set .jn-chips{margin-top:18px} /* "Other" carries a number field inside the chip. Without the explicit colour the input inherited the chip's checked-state white onto a white field. */ .jn-chip--other span{display:inline-flex;gap:8px;align-items:center} /* .jn-chip input hides every input inside a chip — that is the whole mechanism — and it caught this one too: the days carried forward from the pacing answer were set, correct, and one pixel tall behind the label. The four properties below are the ones that rule sets, so all four have to be given back. */ .jn-chip--other input[type=number]{position:static;width:5.5em;height:auto; opacity:1;pointer-events:auto;font:inherit;padding:3px 6px; border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-fg)} .jn-chip--other input[type=number]:focus-visible{outline:2px solid var(--c-accent); outline-offset:2px} /* A priced card is not a pacing card. .jn-card-n at 9.5px mono is right for "3-4 days" and wrong for "$650": it made the price the smallest thing on a card whose only job is the price, beside a 26px name. Here the amount leads and the unit follows it, quietly. */ .jn-card--rate .jn-card-in{grid-template-columns:1fr auto; grid-template-areas:"name money" "line money";align-items:center} .jn-card--rate .jn-card-n{grid-area:money;text-align:right;margin-top:0; display:block;letter-spacing:0;text-transform:none} .jn-card-amt{display:block;font-family:var(--fj-display); font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1; letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--c-fg)} .jn-card--rate .jn-card-n i{display:block;margin-top:5px;font-style:normal; font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--c-muted)} .jn-card input:checked + .jn-card-in .jn-card-amt{color:var(--c-bg)} .jn-card input:checked + .jn-card-in .jn-card-n i{color:var(--fj-onbasalt-dim)} /* "Included" and "Quoted" are words in the price slot, not sums. They should not shout at the size a dollar figure earns. */ .jn-card--rate[data-word] .jn-card-amt{font-size:15px;letter-spacing:0} /* The recommendation is marked on the card, not asserted in the prose. */ .jn-card--row.is-rec .jn-card-in{box-shadow:inset 3px 0 0 var(--c-accent)} .jn-card--row.is-rec{position:relative} .jn-card--row.is-rec::after{content:"Most journeys";position:absolute;top:-9px;left:18px; background:var(--c-accent);color:var(--c-bg);font-family:var(--fj-mono); font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;padding:3px 8px} /* The running total. Tabular figures so the sum does not jitter by a pixel every time a digit changes under it. */ .jn-g-sum{border-top:2px solid var(--c-primary);padding-top:var(--sp-4)} .jn-g-tot{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px} .jn-g-tot b{font-family:var(--fj-display);font-size:clamp(38px,5.5vw,64px); line-height:1;font-variant-numeric:tabular-nums} .jn-g-tot span{font-family:var(--fj-mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--c-muted)} .jn-g-fine{margin-top:14px;font-size:14.5px;color:var(--c-muted);max-width:62ch} /* What we arrange, and what we do not, at the same size as each other. An exclusion set in small print under a price is a complaint being written. */ .jn-g-two{margin-top:var(--sp-6);display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5)} .jn-h3{font-family:var(--fj-display);font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--c-muted);margin:0 0 14px} .jn-g-list{list-style:none;margin:0;padding:0} .jn-g-list li{padding:9px 0 9px 22px;border-bottom:var(--fj-rule);position:relative; font-size:15px} .jn-g-list li::before{content:"\002B";position:absolute;left:0;color:var(--c-accent); font-family:var(--fj-mono);font-size:12px;top:11px} .jn-g-list.is-not li::before{content:"\2013";color:var(--c-muted)} .jn-g-need{border-top:2px solid var(--c-primary);padding-top:var(--sp-4)} .jn-g-need-say{font-family:var(--fj-mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--c-muted)} .jn-g-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0; border-bottom:var(--fj-rule);cursor:pointer;font-size:15px} .jn-g-row input{margin-top:3px;flex:0 0 auto;width:17px;height:17px; accent-color:var(--c-primary)} .jn-g-row input:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} .jn-g-nothing{margin-top:18px;font-size:14px;color:var(--c-muted);max-width:60ch} /* Who you are actually paying, said next to the figure rather than only in a footer. The stage quotes in dollars and the money goes to a Delaware company the visitor has not heard of — they came here for Afrinkong. Answering that under the total costs two lines and is the difference between a price and a price you would act on. */ .jn-g-who{margin-top:var(--sp-5);padding-top:18px;border-top:var(--fj-rule); font-size:14.5px;color:var(--c-muted);max-width:66ch} .jn-g-who b{color:var(--c-fg);font-weight:400} @media(max-width:760px){ .jn-ground{padding:var(--sp-5) 0 var(--sp-6)} .jn-g{gap:var(--sp-5)} .jn-g-two{margin-top:var(--sp-5);gap:var(--sp-4)} /* The requirement rows are the one place a mis-tap costs the traveller a confirmation, so the whole row is the target and not the 17px box. */ .jn-g-row{padding:14px 0;min-height:44px} } @media(prefers-reduced-motion:reduce){ .jn-reveal[data-arriving] .jn-shape,.jn-reveal[data-arriving] .jn-reveal-name, .jn-reveal[data-arriving] .jn-reveal-tag,.jn-reveal[data-arriving] .jn-why{ opacity:1;transform:none} } /* ---- /enquire ------------------------------------------------------------ * Afrinkong's own enquiry page. It exists because the tunnel used to end on * Kamerun's: a journey composed for Eritrea arrived under a KAMERUN masthead * beside a Douala street address and a +237 number. The journey text carried * across perfectly; everything around it belonged to another company. */ .jn-enq{padding:var(--sp-6) 0 var(--sp-7)} .jn-enq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--sp-6);align-items:start} .jn-enq .jn-h1{font-size:clamp(34px,4.6vw,62px);max-width:14ch} .jn-enq-facts{margin-top:var(--sp-5);border-top:2px solid var(--c-primary)} .jn-enq-facts div{display:grid;grid-template-columns:120px 1fr;gap:16px; padding:13px 0;border-bottom:var(--fj-rule)} .jn-enq-facts dt{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--c-muted)} .jn-enq-facts dd{margin:0;font-size:16px} .jn-enq-note{margin-top:18px;font-size:15px;color:var(--c-muted);max-width:52ch} .jn-enq-co{margin-top:var(--sp-5);padding-top:16px;border-top:var(--fj-rule); font-size:14px;color:var(--c-muted);max-width:56ch} .jn-enq-co b{color:var(--c-fg);font-weight:400} .jn-enq-office{margin-top:7px;font-family:var(--fj-mono);font-size:9.5px; letter-spacing:.1em;color:var(--c-muted)} .jn-enq-form{border:1px solid var(--c-border);padding:var(--sp-5); background:var(--c-bg);display:grid;gap:16px} .jn-enq-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .jn-enq-cell{display:grid;gap:7px;min-width:0} .jn-enq-cell label{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--c-muted)} .jn-enq-cell input,.jn-enq-cell textarea{font:inherit;font-size:16px;padding:12px; border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-fg); width:100%;box-sizing:border-box} .jn-enq-cell textarea{resize:vertical;line-height:1.55} .jn-enq-cell input:focus-visible,.jn-enq-cell textarea:focus-visible{ outline:2px solid var(--c-accent);outline-offset:2px} .jn-enq-fine{font-size:13.5px;color:var(--c-muted)} .jn-enq-flash{font-size:14px;color:var(--c-accent);display:none} .jn-enq-flash.on{display:block} .jn-enq-foot{margin-top:var(--sp-7);padding-top:18px;border-top:var(--fj-rule); font-family:var(--fj-mono);font-size:9px;letter-spacing:.12em;color:var(--c-muted); line-height:1.7} .jn-enq-foot b{font-weight:400;color:var(--c-fg)} .jn-enq-foot .af-co-where{display:block;margin-top:5px;text-transform:none} /* The three statements, at the foot of every page that names the company. Muted until pointed at: this is the strip a reader consults deliberately, not one that should compete with the journey above it. */ /* .af-co-links / .af-co-link are styled in afrinkong.css now — three copies of the rule existed and /atlas, /meet, /journey and /places loaded none. */ /* The second way to send. Quieter than the button but not hidden: somebody reads this only when the first way has failed them, and at that moment it needs to be findable rather than tasteful. */ .jn-enq-alt{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--c-muted); max-width:62ch} .jn-enq-alt a{color:var(--c-accent);border-bottom:1px solid color-mix(in srgb,var(--c-accent) 40%,transparent)} .jn-enq-alt a:hover{border-bottom-color:var(--c-accent)} .jn-enq-copy{display:inline-flex;align-items:center;min-height:32px; margin-left:6px;padding:5px 12px;background:none;cursor:pointer; font-family:var(--fj-mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--c-accent); border:1px solid color-mix(in srgb,var(--c-accent) 45%,transparent); transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .jn-enq-copy:hover{border-color:var(--c-accent); background:color-mix(in srgb,var(--c-accent) 8%,transparent)} @media(pointer:coarse){.jn-enq-copy{min-height:44px}} @media(max-width:900px){ .jn-enq-grid{grid-template-columns:1fr;gap:var(--sp-5)} } @media(max-width:560px){ .jn-enq-row{grid-template-columns:1fr} .jn-enq-form{padding:var(--sp-4)} .jn-enq-facts div{grid-template-columns:1fr;gap:4px} } /* ---- the continent --------------------------------------------------------- * THE PAGE'S SUBJECT, ON THE PAGE. * * This page asked four questions about where to go and showed nothing that was * anywhere. The map is not an illustration of the answer; it is the surface the * answer lands on, so it is here from the first question and it stays through * the reveal and the composing. * * Its colours are not new. The four states are exactly the four the country * grid below already argues in — leads on it, its region does, written up here * too, and the one you chose — because a reader who has learnt the grid's * legend has learnt the map's, and two legends for one idea is one legend too * many. The measured note on the grid applies here as well: burnt sienna * rather than terracotta, at 6.31:1 against the page. */ .jn-atlas{margin:0 0 var(--sp-5)} .jn-atlas-in{position:relative} .jn-atlas .af-stamp{display:block;margin-bottom:14px} .jn-atlas-fig{margin:0} /* Clipped, not visible. The viewBox moves when a country is chosen, and anything outside it is the rest of the continent — which at 3x zoom is most of the continent, drawn across the caption and down the page. `overflow` on an SVG is the frame of the drawing, and this drawing has one. */ .jn-map{display:block;width:100%;height:auto;overflow:hidden} /* The base state: an outline continent on the page's own ground. Every stroke is non-scaling, because this drawing is 1000 units wide and rendered at anything from 300 to 520 pixels — a stroke in user units would be a hairline on the rail and a rope on a phone. */ .jn-map-rest path{fill:none;stroke:var(--c-border);stroke-width:1; vector-effect:non-scaling-stroke;stroke-dasharray:3 3} .jn-map-c path,.jn-map-c circle{fill:var(--c-bg);stroke:var(--c-primary); stroke-width:1;vector-effect:non-scaling-stroke; transition:fill var(--t-mid) var(--ease),stroke var(--t-fast) var(--ease)} /* A WASH AND A STROKE, NOT A FLOOD FILL. The grid can flood a chip in burnt sienna because a chip is a chip. Doing the same on a map paints thirty-one countries solid accent — an accent fill the size of most of a continent, which is the exact thing the design blueprint names as its first absolute and which design-checks measures on this page at three widths. The atlas already had the answer: a wash. Composited against the page, thirty-four per cent burnt sienna over ivory reads as a tint and measures nowhere near the accent, so the rule is respected in the render and not merely in the file. The country is told apart by the weight of its outline — which is how a map has always said "this one", and which survives being printed, being colour-blind, and being looked at from across the room. */ .jn-map-c[data-match="leads"] path,.jn-map-c[data-match="leads"] circle{ fill:color-mix(in srgb,var(--c-accent) 34%,transparent); stroke:var(--c-accent);stroke-width:1.8} .jn-map-c[data-match="region"] path,.jn-map-c[data-match="region"] circle{ fill:color-mix(in srgb,var(--c-primary) 20%,transparent); stroke:var(--c-primary);stroke-width:1.3} .jn-map-c[data-match="open"] path,.jn-map-c[data-match="open"] circle{ fill:var(--c-bg)} /* Out of the month they gave: marked, never removed — the same sentence the grid makes, in the one form a map has for it. */ .jn-map-c[data-off] path,.jn-map-c[data-off] circle{stroke-dasharray:4 3} /* The one they chose. A ring rather than a fill, so the colour underneath goes on saying what that country leads on. */ .jn-map-c[data-picked] path,.jn-map-c[data-picked] circle{ stroke:var(--c-gold,#B99A63);stroke-width:3.4} .jn-map-c:hover path,.jn-map-c:hover circle, .jn-map-c[data-hot] path,.jn-map-c[data-hot] circle{stroke:var(--c-accent); stroke-width:2.4} /* A RING THE CHECKS CAN MEASURE, NOT ONLY A THICKER COASTLINE. Suppressing the outline and thickening the stroke looks like a focus state and is invisible to the suite that measures focus states — it reads outline-color against the ground, finds none drawn, and records nothing. A focus indicator no check can see is a focus indicator that stops existing the day somebody edits this block. Both, then: the outline for the reader who needs a rectangle they can find, and the stroke for the reader looking at the country. */ .jn-map-c:focus{outline:none} .jn-map-c:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px} .jn-map-c:focus-visible path,.jn-map-c:focus-visible circle{ stroke:var(--c-accent);stroke-width:3.4} /* THE HIT AREA IS NOT THE OUTLINE. The Gambia is a river seventy units long and Comoros is three dots. Neither is a target a thumb can find, and neither becomes one by being drawn bigger — that would be a lie about the geography. Each country carries an invisible disc at its own centroid instead: transparent fill, which in SVG still takes a pointer, over the drawing and under nothing. */ .jn-map-hit{fill:transparent;cursor:pointer} .jn-map-say{margin-top:12px;font-family:var(--fj-mono);font-size:9.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted); line-height:1.7} /* THE WAY BACK OUT. Flying in is one press and flying out was none: a reader who chose Rwanda was left looking at Rwanda with the other fifty-three countries off the edge and no way to see them again short of starting the questions over. It appears only when the map is not showing everything, because a control that says "show the whole continent" while the whole continent is on screen is a control that has to be read before it can be ignored. */ .jn-map-wide{display:block;margin-top:12px;padding:0 0 3px;background:none; border:0;border-bottom:2px solid var(--c-accent);cursor:pointer; font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--c-primary)} .jn-map-wide[hidden]{display:none} .jn-map-wide:hover{color:var(--c-accent)} .jn-map-wide:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} .jn-map-key{list-style:none;margin:14px 0 0;padding:0; display:flex;flex-wrap:wrap;gap:6px 18px} .jn-map-key[hidden]{display:none} .jn-map-key li{display:flex;align-items:center;gap:8px;font-family:var(--fj-mono); font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)} .jn-map-key li::before{content:"";width:10px;height:10px;flex:0 0 auto; border:1px solid var(--c-border)} /* The swatch is the map's own paint, not the grid's: a wash inside the outline that names it. A legend that shows a colour the map never uses is a legend that has to be translated. */ .jn-map-key li[data-match="leads"]::before{ background:color-mix(in srgb,var(--c-accent) 34%,transparent); border-color:var(--c-accent)} .jn-map-key li[data-match="region"]::before{ background:color-mix(in srgb,var(--c-primary) 20%,transparent); border-color:var(--c-primary)} .jn-map-key li[data-match="open"]::before{background:var(--c-bg)} /* BELOW THE RAIL, THE MAP IS SIZED AGAINST THE SCREEN'S HEIGHT, NOT ITS WIDTH. Stacked at 390 the continent is as wide as the phone and therefore taller than it is wide, and the first question — the reason the page exists — was pushed to 600 pixels down. A map is not a hero. The size is tied to the viewport's height instead, which is the dimension that actually decides whether the question is on screen. Thirty per cent of it, with a floor so a landscape phone does not get a postage stamp, and never wider than the column. At 390x844 that is a 253px drawing and the question starts at 480 rather than 600. The order is kept — continent, then the question about it — because that sequence is the argument. */ @media(max-width:1079px){ .jn-atlas{margin-bottom:var(--sp-5)} .jn-atlas-fig{max-width:min(100%,max(180px,30vh))} .jn-map-say{max-width:52ch} } /* A RAIL, NOT A BANNER, WHERE THERE IS ROOM FOR ONE. The questions are set in a 16ch measure and the map wants to be square, so above 1080 they sit side by side and the map stays in view while the reader works down the questions — which is the whole point of it being there. Every other child of .jn stays in column one without being named, so adding a section to this page does not mean remembering this rule. */ @media(min-width:1080px){ .jn{max-width:1380px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(330px,30vw,460px)); column-gap:clamp(32px,4vw,72px);align-items:start} .jn > *{grid-column:1} /* The aside comes after the questions in the document — a keyboard should reach the first question before fifty-four countries — and grid puts it back on the right, spanning every row, without the document caring. */ .jn-atlas{grid-column:2;grid-row:1 / -1;position:sticky; top:calc(var(--mast) + 24px);margin:0} } /* The journey itself, over the countries it crosses. The road is the accent because it is the one thing on this drawing that is the reader's own; the stops are ink, and the last one is larger because arriving is the point. */ .jn-map-road{fill:none;stroke:var(--c-accent);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke; stroke-dasharray:7 6} .jn-map-stop{fill:var(--c-accent);stroke:var(--c-bg);stroke-width:2; vector-effect:non-scaling-stroke}