/* Landing page. Loaded after explorer.css, which carries the design tokens, the type scale, the base page rules and the shared page furniture. Nothing here redefines a token. The map is the page's argument, so it is given the room and everything around it is kept quiet: no new colours, no motion beyond a hover state, and one accent -- the purple already used for focus -- reused rather than joined. */ /* The two map greys. Not --grid: at #e6e3de it lands a couple of points from --ramp-3 (#e5dfd8), which put "no usable data" and "2 to 3 per 100,000" in effectively the same colour. These are far enough from every ramp step to be told apart at a glance, and ordered so that the less is known, the darker it reads -- the grey is the argument, so it should be the loudest thing on the map after the data. There were two more here, a light purple for the country being worked on next and a deeper one for the queue behind it. Both are retired: with a hundred and thirteen countries published, a map that colours what is coming is a map about the person making it. */ :root{--map-none:#333333;--map-pipe:#999999;--map-other:#7b9e87; /* The map is COVERAGE, not a ranking: one colour for every counted country, whatever its rate. --map-live and --map-page are two strengths of one blue, so the map reads as coverage thinning out rather than as unrelated categories. Separation between them is 3.4:1, and the tile codes clear 4.5:1 on both -- white on --map-live at 6.0:1, near-black on --map-page at 7.2:1. --map-page was #9dbcd6 and is darker now. At 1.88:1 against the plane it read as a filled country on Guernsey, which is a dot, and as nothing at all on Indonesia: New Guinea appeared to stop halfway across, because Papua New Guinea carries the dark no-data hatch and the Indonesian half had all but vanished. 2.45:1 still reads as obviously fainter than a counted country while actually being visible. --map-other keeps the old green: nothing on the map uses it any more, but .qualnote on every country page does. */ --map-live:#35638a;--map-page:#7ea6c6; --map-ink:rgba(250,249,247,.72)} .wrap.landing{max-width:1600px;margin:0 auto;padding:22px 5% 72px; display:flex;flex-direction:column;gap:30px} @media (max-width:640px){ /* The byline, as one tappable line. The desktop version spells the address out and says "to reach him" before it, which on a phone is two lines to deliver a link. Hidden by the `hidden` attribute -- the browser's own default, not a rule of ours -- so the desktop stylesheet never learns this element exists. */ .landing .masthead .byline{display:none} .landing .masthead .byline-short[hidden]{display:block;margin:10px 0 0; font-family:var(--font-ui);font-size:14px;color:var(--muted)} .landing .masthead .byline-short a{color:var(--ink-2); text-decoration:none;border-bottom:1px solid var(--hair-strong)} /* A phone gets the tagline; a desktop gets the standfirst. Both are real text in the markup, and the one that is not showing is display:none -- out of the accessibility tree, not merely invisible -- so neither is read twice. The tagline carries the `hidden` ATTRIBUTE rather than a rule of ours, which is what keeps this out of the desktop stylesheet entirely: hidden is the browser's own default, and this overrides it only here. */ .landing .masthead .standfirst{display:none} .landing .masthead .tagline[hidden]{display:block; font-family:var(--font-display);font-size:17px;line-height:1.35; color:var(--muted);margin:.15em 0 0} /* The masthead heading. At 375px the base clamp lands on 34px -- 5.4vw is below its floor on every phone -- and the title took most of the first screenful. Down a fifth to 27, then back up a tenth: 30px keeps the display face doing its job and still leaves the standfirst starting above the fold. */ .landing .masthead h1{font-size:30px} .wrap.landing{padding:16px 4% 56px;gap:24px}} .landing .masthead h1{margin:.12em 0 .18em} /* The standfirst is a SUBLINE, not the next thing on the page. It sat a full line below the title because its paragraph carries the browser's default 1em top margin, which collapses out through the wrapper and wins against the heading's own .18em. Killed, so the two read as one block. */ .landing .masthead .standfirst p{margin:0 0 .5em} .landing .masthead .standfirst p:last-child{margin-bottom:0} .landing .standfirst{max-width:none} .landing .byline{margin:14px 0 0;font-family:var(--font-ui);font-size:14.5px; color:var(--muted)} .landing .byline strong{color:var(--ink-2);font-weight:600} .landing .byline a{color:var(--s-f)} .landing .panel{padding:22px} @media (max-width:640px){.landing .panel{padding:18px 16px 22px}} .landing .panelhead{display:flex;flex-wrap:wrap;align-items:baseline; justify-content:space-between;gap:12px 18px;margin-bottom:16px} .landing .panelhead h2{font-family:var(--font-display);font-size:27px; font-weight:400;margin:0;line-height:1.15} /* ---------- the controls ---------- */ .mapctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .mapctl select{font-family:var(--font-ui);font-size:13.5px;color:var(--ink); background:var(--surface);border:1px solid var(--hair-strong);padding:7px 10px; max-width:210px} .mapctl .reset{appearance:none;background:var(--surface); border:1px solid var(--hair-strong);color:var(--ink-2);font-size:15px; line-height:1;padding:7px 10px;cursor:pointer} .mapctl .reset:hover{color:var(--ink);border-color:var(--ink-2)} .mapctl button:focus-visible,.mapctl select:focus-visible{ outline:2px solid var(--focus);outline-offset:2px} /* ---------- the two maps ---------- */ /* The map takes the width it can get and the card sits beside it; below the breakpoint the card moves under the map rather than squeezing it. */ /* The card used to sit here and cost the map three hundred pixels of width. It is under the map now, where it can be a row instead of a column, and the map gets the whole panel. */ .maprow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px; align-items:start} .regions{display:flex;flex-direction:column;gap:2px;flex:none;padding-top:2px} .regions button{appearance:none;background:none;border:0;border-left:2px solid transparent; font-family:var(--font-ui);font-size:13px;color:var(--muted); padding:5px 10px 5px 9px;cursor:pointer;text-align:left;white-space:nowrap} .regions button:hover{color:var(--ink);background:var(--surface-2)} .regions button[aria-pressed="true"]{color:var(--ink);font-weight:600; border-left-color:var(--s-f)} .regions button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} @media (max-width:719px){ .maprow{grid-template-columns:minmax(0,1fr)} .regions{flex-direction:row;flex-wrap:wrap;gap:0 2px} .regions button{border-left:0;border-bottom:2px solid transparent; padding:5px 8px} .regions button[aria-pressed="true"]{border-left-color:transparent; border-bottom-color:var(--s-f)} } /* The map is a framed box, and the drawing is clipped to it. Zooming changes the viewBox, which magnifies whatever is inside; without an explicit frame and an explicit clip that reads as the map having escaped onto the page. */ .mapwrap{min-width:0;border:1px solid var(--hair);background:var(--surface); padding:6px;position:relative} /* Bottom right, over the South Pacific, which is the one corner of a world map with nothing in it at any of the six ranges. Not a caption under the frame: the point of this line is the screenshot, and a line outside the box is a line somebody has to know to include. */ .mapwrap p.credit{position:absolute;right:12px;bottom:10px;margin:0; font-size:12.5px;color:var(--muted);pointer-events:none} /* A taller frame on a phone, and the drawing scaled up to fill it. The width does not change; the box does, from 2.29:1 to 1.98:1, and the map grows by the difference -- about a sixth taller and a sixth bigger. The surplus width has to go somewhere, and where it goes is measured rather than chosen: `xMaxYMid slice` pins the right edge and clips the left, and the left is the only place on this map with anything to spare. Everything below x=134 is four specks of Aleutian island; Russia's easternmost point is 142.1 and Alaska's mainland begins at 136.4. That is the whole budget -- 143 empty units out of a thousand -- and it is why this is a sixth and not the quarter it would take to make Alaska or Fiji leave the frame. The attribute is set on every screen, deliberately: on a wide one the box and the viewBox have the same shape to the decimal, so slice and meet do the same nothing. Only the world view is reshaped -- a region view is already fitted to its own contents, and cropping one would cut a coast. */ @media (max-width:640px){ .worldmap.geo.world{aspect-ratio:866 / 437.4} /* Under the drawing and centred, still inside the frame so it is still inside the screenshot. A 160px-tall map has no corner to spare. */ .mapwrap p.credit{position:static;text-align:center;margin:6px 0 2px; font-size:12px} } .worldmap{display:block;width:100%;height:auto;overflow:hidden} .worldmap.hide{display:none} /* The cap is gone with the layout that needed it. The grid was one world with its empty rows and columns removed -- 13 x 12, near enough square, so at the full width of the panel it was a 1,100px-tall block and had to be held to 620. Six continents packed against themselves and set three across is 1,480 x 1,155, which is a shape the panel can take: the squares go from 44px to 51px at the width the map now gets, which is the point. */ .worldmap.tiles{margin:0 auto} /* Two arrangements of the same six blocks, one drawn at a time. Three across is a panel's shape and a phone's texture -- 14px squares -- so a phone gets the single column, where a square is 53px and the code in it can be read. Only the drawn one is in the tab order: the other is display:none rather than merely invisible. */ @media (min-width:641px){ .worldmap.tiles.t-one{display:none} } @media (max-width:640px){ .worldmap.tiles.t-wide{display:none} } /* Outlines stay hairlines however far in a reader zooms. Stroke width is in map units, so at the Europe view every border was drawn four times heavier than it was designed to be. */ .worldmap path,.worldmap rect,.worldmap circle,.worldmap line{ vector-effect:non-scaling-stroke} /* A country nobody counts has no outline. The uncounted world is one field rather than a mosaic of 170 shapes, so a country with data separates from it before a reader has looked at the legend -- and the size of that field is the argument for why the world figure has to be modelled. */ .worldmap .c{cursor:default} /* The map's status classes are s-prefixed. A bare status word lands in the page's global class space, and "prose" collided with the copy editor's own .prose -- which explorer.css hides when :empty, as every is. */ .worldmap .c.s-live,.worldmap .c.s-pipeline,.worldmap .m,.worldmap .t{ cursor:pointer} .worldmap .c.s-pipeline{stroke:var(--surface);stroke-width:.6} .worldmap .c.s-live:hover,.worldmap .c.s-pipeline:hover, .worldmap .c.s-live:focus,.worldmap .c.s-pipeline:focus{ stroke:var(--ink);stroke-width:1.4;stroke-dasharray:none} .worldmap .c:focus,.worldmap .m:focus,.worldmap .t:focus{outline:none} .worldmap [data-iso3].sel .dot,.worldmap [data-iso3].sel rect{ stroke:var(--ink);stroke-width:2.2} .worldmap path.c.sel{stroke:var(--ink);stroke-width:1.8;stroke-dasharray:none} .worldmap .m .dot{stroke:var(--ink);stroke-width:1} .worldmap .m:hover .dot,.worldmap .m:focus .dot{stroke-width:2.2} /* A tile's own code sits inside its fill, so the ink follows the fill rather than the page: black on the light ramp steps, light on the two greys. */ .worldmap .t text{font-family:var(--font-mono);font-size:19px; font-weight:500;fill:var(--ink);pointer-events:none} /* Each continent's name, above its own block of squares. Part of the block, so zooming to a region takes its title with it. */ .worldmap text.tlabel{font-family:var(--font-ui);font-size:19px; font-weight:600;letter-spacing:.06em;text-transform:uppercase; fill:var(--ink-3)} .worldmap .t.s-none text{fill:var(--map-ink)} .worldmap .t.s-live text{fill:var(--map-ink)} .worldmap .t.s-pipeline text{fill:var(--ink);opacity:.85} .worldmap .t.s-live text{font-weight:500} .worldmap .t.s-none rect{stroke:rgba(250,249,247,.13)} .worldmap .t:hover rect,.worldmap .t:focus rect{stroke:var(--ink);stroke-width:2} /* ---------- the card under the map ---------- */ /* Under the map it has the whole panel width, so it reads across rather than down: who, the rate, the record, what it means, where to go. */ /* Every column may shrink to nothing -- minmax(0,...) rather than a pixel floor -- because five columns with minimum widths add up to more than the panel and the row pushes out of it. The button wraps for the same reason: "Open the full United States page" is a long line to promise never to break. */ .mapcard{border:1px solid var(--hair);background:var(--surface); margin-top:16px;padding:16px 18px;display:grid;gap:10px 24px;align-items:start; grid-template-columns:minmax(0,.9fr) minmax(0,.75fr) minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,auto)} @media (max-width:1019px){ .mapcard{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr)} .mapcard .meta{grid-column:1 / -1} .mapcard .act{grid-column:1 / -1;justify-self:start} } @media (max-width:719px){ .mapcard{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .mapcard .fig{grid-column:1 / -1} } .mapcard .cd{min-width:0} .mapcard .cd.wide{grid-column:2 / -1} .mapcard.prompt{grid-template-columns:minmax(0,.9fr) minmax(0,4fr)} /* On a phone the prompt is one line and no eyebrow. "The map" in its own column indented the only sentence in the card by a fifth of the screen to label something the reader is looking straight at, and there is no hover on a phone to instruct anybody about. */ @media (max-width:640px){ .mapcard.prompt{grid-template-columns:minmax(0,1fr)} .mapcard.prompt .cd.who{display:none} .mapcard.prompt .state{display:none} .mapcard.prompt .state.short[hidden]{display:block} /* On the tile list the card comes to the tap. Fixed rather than absolute: the list is two thousand pixels tall and the offset parent is the page, so a document-positioned card would land wherever the reader had scrolled from. */ .mapcard.floating{position:fixed;z-index:60;margin:0;width:min(330px,92vw); border-color:var(--ink-3);box-shadow:0 16px 44px rgba(18,18,26,.3)} .mapcard .cardclose{position:absolute;top:4px;right:6px;appearance:none; background:none;border:0;cursor:pointer;font:400 24px/1 var(--font-ui); color:var(--ink-3);padding:4px 8px} .mapcard .cardclose:hover{color:var(--ink)} .mapcard .cardclose:focus-visible{outline:2px solid var(--focus); outline-offset:1px} .mapcard:not(.floating) .cardclose{display:none} /* The country card on a phone: four rows and no columns. Name, rate, the line, the way in. What came off is everything that answers a question the reader has not asked yet -- the age band and death count under the name, the interval, the trend sentence, the source and case definition, and the list of other ranges this country can be read at. All of it is on the country's own page, which is what the fourth row is for. Rows, not a grid: a two-column card on a 311px screen indents every value by half the screen to put a label beside it, and the labels were longer than the values. */ .mapcard{grid-template-columns:minmax(0,1fr);gap:9px 0;padding:14px 15px} .mapcard .cd.wide{grid-column:1 / -1} .mapcard .eyebrow{margin:0;font-size:14px;letter-spacing:.1em; color:var(--ink)} .mapcard .cd.who.rated .ci{display:none} /* The rate and its unit on one line: "2.03 /100k (2022)". */ .mapcard .cd.num{display:flex;align-items:baseline;gap:7px} .mapcard .cd.num .big{font-size:33px} .mapcard .cd.num .unit{display:none} .mapcard .cd.num .unit.short[hidden]{display:block;margin:0;font-size:13px; letter-spacing:0;font-variant-numeric:tabular-nums} .mapcard .cd.num .ci{display:none} .mapcard .cd.meta{display:none} } .mapcard .counts{margin:10px 0 0;font-family:var(--font-mono);font-size:13px; color:var(--muted);font-variant-numeric:tabular-nums} .mapcard .counts b{color:var(--ink);font-weight:500} .mapcard .eyebrow{margin:0 0 6px} .mapcard .big{font-family:var(--font-display);font-size:40px;line-height:1; margin:0} .mapcard .unit{margin:2px 0 0;font-family:var(--font-ui);font-size:12px; letter-spacing:.04em;color:var(--muted)} .mapcard .ci{margin:6px 0 0;font-family:var(--font-mono);font-size:12.5px; line-height:1.5;color:var(--ink-2);font-variant-numeric:tabular-nums} .mapcard .spark{width:100%;height:auto;overflow:visible} .mapcard .sparkline{fill:none;stroke:var(--s-all);stroke-width:1.4; vector-effect:non-scaling-stroke} .mapcard .sparkfill{fill:var(--s-m-wash);stroke:none} .mapcard .sparkdot{fill:var(--s-all)} .mapcard .sparklab{margin:1px 0 0;font-family:var(--font-mono);font-size:11.5px; color:var(--muted);display:flex;justify-content:space-between} .mapcard .trend{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)} .mapcard .src{margin:7px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)} .mapcard .state{margin:0;font-family:var(--font-display);font-size:22px; line-height:1.2} .mapcard .note{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)} .mapcard .open{display:inline-block;text-align:center; font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1.35; text-decoration:none;color:var(--chip-ink);background:var(--chip); padding:10px 14px;max-width:100%;overflow-wrap:anywhere} .mapcard .open:hover{background:var(--s-f)} .mapcard .open:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* ---------- legend, attribution, the short list ---------- */ /* Directly under the map now, so the hairline groups the two rather than fencing the legend off from a card above it. */ /* No rule between the map and its key. The border was drawn when the legend was three lines of category and needed separating from the drawing; it is one line now, it sits directly under the frame the map already has, and a second horizontal line 10px below the first was reading as the bottom of something rather than the top of the key. Right-justified, and the title rides on the same line as the steps: the ramp runs low-to-high left-to-right and finishing it at the right-hand edge of the map puts the top of the scale under the top of the ramp. */ .maplegend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 15px; margin:10px 0 0;justify-content:flex-end} .maplegend .lgtitle{font-family:var(--font-ui);font-size:12px; letter-spacing:.1em;text-transform:uppercase;color:var(--muted); font-weight:500;margin-right:auto} .maplegend .lg{display:inline-flex;align-items:center;gap:6px; font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2)} .maplegend .lg i{width:15px;height:15px;display:inline-block; border:1px solid var(--hair-strong)} .maplegend .lg.other{font-family:var(--font-ui);font-size:13px; color:var(--muted)} .maplegend .lg i.pipe{background:var(--map-pipe);border-color:var(--map-pipe)} .maplegend .lg i.none{background:var(--map-none);border-color:var(--map-none)} /* The legend on a phone. The edges are eight digits of scale and the four long "has a page" phrases are another three lines; together they were taller than the map they explain. The title becomes one line, the four steps say which quarter they are, and the six categories below the ramp become the two a reader is actually distinguishing: there is a page here, or there is not one yet. The numbers have not gone anywhere -- they are on every card, every country page and in bands.csv. */ @media (max-width:640px){ /* Column gap off, then given back by hand, because the four steps have to touch: separated they read as four categories, and butted together they read as the one scale they are. */ .maplegend{gap:7px 0;justify-content:flex-start} .maplegend .lgtitle{display:none} .maplegend .lgtitle-short[hidden]{display:block;width:100%; font-family:var(--font-ui);font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:500} .maplegend .lg .lgnum{display:none} /* Every label at its shortest, because the whole key has to be one line under the map: four steps, what they are, and the two things that are not a step. */ .maplegend .lg i{width:13px;height:13px} .maplegend .lg.other{font-size:12.5px} .maplegend .lg .lgfull{display:none} .maplegend .lg .lgshort[hidden]{display:inline} .maplegend .lgq4[hidden]{display:inline-flex;align-items:center; margin:0 15px 0 9px;font-family:var(--font-ui);font-size:13px; color:var(--muted)} .maplegend .lg.other{margin-right:13px} .maplegend .lg.other:last-child{margin-right:0} } /* The 375px phone, and only it. Two of the three labels shorten again -- `swap` marks the one word that has a shorter form still, so the other keeps the label it already had rather than needing it written out twice. */ @media (max-width:400px){ .maplegend .lgq4 .q4a{display:none} .maplegend .lgq4 .q4b[hidden]{display:inline} .maplegend .lg .lgshort.swap{display:none} .maplegend .lg .lgtiny[hidden]{display:inline} } .landing p.credit{margin:12px 0 0} /* ---------- coverage, and the two world numbers ---------- */ .coverage h2{font-family:var(--font-display);font-size:27px;font-weight:400; margin:0 0 14px;line-height:1.15} .cbar{height:16px;background:var(--grid);display:block;overflow:hidden} .cbar i{display:block;height:100%;background:var(--s-f);min-width:2px} .cnum{margin:12px 0 0;font-size:19px;color:var(--ink-2)} .cnum strong{color:var(--ink);font-weight:600; font-variant-numeric:tabular-nums} .cnote{margin:5px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)} .gap{margin:0;font-size:15px;color:var(--ink-2);border-left:2px solid var(--s-f); padding-left:12px} .wnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px; margin:26px 0 0;padding-top:22px;border-top:1px solid var(--hair)} .wnum{display:flex;flex-direction:column;gap:4px;min-width:0} .wnum .v{font-family:var(--font-display);font-size:40px;line-height:1; color:var(--ink)} .wnum .v.ns{font-size:24px;color:var(--muted)} .wnum .l{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.04em; color:var(--ink-2);margin-top:3px} .wnum .s{font-family:var(--font-mono);font-size:12.5px;color:var(--muted); font-variant-numeric:tabular-nums} .wnum .n{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:5px} /* ---------- the special report ---------- */ /* A report card. It was a banner -- 26px of padding around a 36px display title, with the description and the way in beside it -- which is the right shape for one card and the wrong one for four: the contents page was taller than the map above it. Compressed on every screen, and on a phone collapsed to the title alone until it is asked to open. */ .bigreport{display:block;padding:14px 18px;background:var(--surface); border:1px solid var(--hair-strong)} /* On a wide screen the whole card is the link, so it has to look like one. */ @media (min-width:641px){ .bigreport,.bigreport > summary{cursor:pointer} } .bigreport:hover{border-color:var(--ink-3)} .bigreport > summary{cursor:pointer;list-style:none;display:flex; align-items:center;justify-content:space-between;gap:14px} .bigreport > summary::-webkit-details-marker{display:none} .bigreport > summary:focus-visible{outline:2px solid var(--focus); outline-offset:3px} .bigreport .h{font-family:var(--font-display); font-size:clamp(20px,2.3vw,26px);line-height:1.15;color:var(--ink)} .bigreport .rbody{display:grid;grid-template-columns:1fr auto; align-items:center;gap:4px 24px;margin-top:5px} .bigreport .note{grid-column:1;margin:0;font-size:14.5px;line-height:1.5; color:var(--muted);max-width:none} .bigreport .rgo{grid-column:2;grid-row:1;margin:0} .bigreport .rgo .open{white-space:nowrap;font-size:14px;padding:8px 12px} /* A report that is announced and not written yet. The title says "(In progress)"; this is only so the eye can group them without reading. */ .bigreport.soon{background:var(--plane);border-style:dashed} .bigreport.soon .h{color:var(--ink-2)} /* Four of them, in a column: one card was a banner, four are a contents page, and a contents page is what the bottom of this page is for. */ .reportlist{display:grid;gap:10px} .reports h2{font-family:var(--font-display);font-size:27px;font-weight:400; margin:0 0 14px;line-height:1.15} @media (max-width:640px){ /* A row of titles. The description and the way in are behind the title, because on a phone four descriptions is a screenful of text nobody asked for between the map and the ask. */ .bigreport{padding:12px 14px} .bigreport .h{font-size:17px;line-height:1.25} .bigreport > summary::after{content:"+";font:400 19px/1 var(--font-mono); color:var(--ink-3);flex:none} .bigreport[open] > summary::after{content:"\2212"} .bigreport .rbody{grid-template-columns:1fr;gap:0;margin-top:9px} .bigreport .rgo{grid-column:1;grid-row:auto;margin-top:11px} .bigreport .rgo .open{display:block;text-align:center} } /* ---------- what the database holds ---------- A paragraph and the range it is true of. Three numbers in the sentence move when the handles do, so the range rides beside it on a wide screen and under it on a phone -- close enough that nobody quotes the count of suicides without the age band it counted them in. */ .dbnote{flex-direction:row;flex-wrap:wrap;align-items:flex-start; gap:14px 26px} .dbnote > #wm-dbline{flex:1 1 420px;min-width:0} .dbnote > #wm-agenow{flex:0 0 auto} .dbline{margin:0;font-size:17.5px;line-height:1.6;color:var(--ink-2); max-width:none} .dbline b{color:var(--ink);font-family:var(--font-mono);font-weight:500; font-variant-numeric:tabular-nums} .agenow{margin:0;font-family:var(--font-ui);font-size:12.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--muted); white-space:nowrap;border:1px solid var(--hair-strong);padding:9px 13px; background:var(--surface-2)} .agenow b{font-family:var(--font-mono);color:var(--ink-2);font-weight:500; letter-spacing:0} @media (max-width:640px){ .dbnote{gap:12px} .dbnote > #wm-dbline{flex:1 1 100%} .dbline{font-size:16.5px} } /* Four numbers become four lines on a phone. The same element carries both -- the big card and its .wline -- so the phone and the desktop cannot show different figures, which two separately written versions would manage inside a week. Same 720px point and the same construction as .tline on the country pages. The pooled card keeps its note when the rest lose theirs. "NOT THE WORLD RATE" is the one sentence on this page that a reader must not miss, and a phone is exactly where a number gets screenshotted out of context. */ .wline{display:none} @media (max-width:720px){ /* padding-top belongs to the rule-off above the cards; in line mode the block has its own border and the padding just opens a gap inside it. */ .wnums{grid-template-columns:1fr;gap:0;padding-top:0;margin-top:22px; background:var(--surface);border:1px solid var(--hair)} .wnum{padding:9px 14px;border-top:1px solid var(--hair);gap:0} .wnum:first-child{border-top:0} .wnum .v,.wnum .l,.wnum .s{display:none} .wnum .n{display:none} .wnum:first-child .n{display:block;margin-top:3px;font-size:12.5px} /* Keep the warning, drop the arithmetic behind it. */ .wnum .nmethod{display:none} .wline{display:block;font-size:15.5px;line-height:1.45;color:var(--ink-2)} .wline strong{color:var(--ink);font-weight:600} } /* The age range: one track, two handles, on a shared 0-24 axis. It was two rows of buttons, and before that one row of twelve chips. The rows were honest and cost three lines of a phone. Worse, they hid the thing that matters most about the choice -- that 0-19 and 15-24 are not two entries in a list but two windows onto the same axis, one holding ten years of children and the other five years of adults. A track shows that; a menu cannot. The numbers are ON the handles. No scale is printed under the track, because the two things a reader needs are where the window starts and where it ends, and both are in their hands. */ .agepick{display:flex;align-items:center;gap:14px} .agelab{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.04em; color:var(--ink-2);text-transform:uppercase;flex:none} /* The track is inset by half a handle at each end, so a handle at 0 and a handle at 24 sit fully inside the control instead of hanging off it. */ .agetrack{position:relative;flex:1 1 260px;min-width:200px;height:34px; margin:0 17px;touch-action:none} .agetrack::before{content:"";position:absolute;left:0;right:0;top:50%; height:3px;margin-top:-1.5px;border-radius:2px;background:var(--hair-strong)} /* The chosen window, drawn between the handles. */ .agefill{position:absolute;top:50%;height:3px;margin-top:-1.5px; border-radius:2px;background:var(--chip)} /* Where the handles lock. Unlabelled on purpose: numbering them would be the printed scale this does not have. 14 and 15 sit a hair apart, which is honest, because they are a hair apart. */ .agetrack i{position:absolute;top:50%;width:2px;height:8px;margin:-4px 0 0 -1px; border-radius:1px;background:var(--axis)} .agedot{position:absolute;top:50%;transform:translate(-50%,-50%); appearance:none;min-width:34px;height:34px;padding:0 4px; border:1px solid var(--chip);border-radius:17px;background:var(--chip); color:var(--chip-ink);font-family:var(--font-mono); font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:500; line-height:1;cursor:grab;touch-action:none;user-select:none; box-shadow:0 1px 3px rgba(18,18,26,.22)} .agedot:active{cursor:grabbing} .agedot:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* The one being dragged sits above the other, so two handles a hair apart -- 14 and 15 -- can still be told apart and picked up. */ .agedot.hot{z-index:2} .agedot[data-edge="hi"]{background:var(--surface);color:var(--ink); border-color:var(--ink-2)} /* The no-JavaScript fallback: the two button rows this replaced. A track that cannot be dragged is furniture, so they are still in the markup inside a