/* The Computing Career Atlas — EPUB 3 stylesheet. * * Written against WCAG 2.1 AA, which is not a preference here. The European * Accessibility Act has applied since 28 June 2025, and it reaches any ebook * sold to a reader in the EU regardless of where the publisher sits. See * docs/BUILD.md. * * The rules that follow from that, and the reasons, because a later editor * will otherwise "tidy" them away: * * - No fixed font sizes anywhere. Readers resize text, and a hard px size * breaks that. Everything is em or rem. * - No colour used alone to carry meaning. The reliability grades in the * profile tables are digits, not colours, for exactly this reason. * - Contrast at least 4.5:1 for body text against its background. * - Never disable user font choice. Most e-readers override anyway, and * fighting that produces worse results for people who need a specific face. * - Tables stay real tables. This book is mostly tables, and screen readers * need the header association that a div grid cannot give them. * * Beyond that, this stylesheet carries the same design as the print interior * in build/templates/book.typ: serif for reading, sans for every navigational * element, one accent colour, and rules on tables rather than boxes. A reader * who buys both formats should recognise the second one. Where the two differ * it is because the medium differs — no first-line indents here, because a * reflowable column at a reader-chosen size is not a fixed measure, and no * justification, because ragged right is easier for dyslexic readers and does * not open rivers on a narrow screen. * * The accent is #1d3557: 12.4:1 on white, and it is never the only signal for * anything. In dark mode it lightens to #9dc4ea, 8.1:1 on #16181c. * * Palette, stated once here because CSS custom properties are not safe to * rely on: Adobe RMSDK and Kindle's KFX converter can drop `var()` outright, * which would take every table rule in the book with it. * * accent #1d3557 light / #9dc4ea dark * rule #c9c9c9 light / #4a4f57 dark */ /* ---------------------------------------------------------------- base */ html { /* No font-size here on purpose. The reader's setting is the base. */ -webkit-hyphens: auto; hyphens: auto; } body { /* Serif for long reading, and a stack that degrades to whatever exists. */ font-family: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; line-height: 1.5; /* WCAG 1.4.12 minimum for body text. */ margin: 0 5%; text-align: left; /* Not justified. Ragged right is easier for dyslexic readers and avoids rivers on narrow screens. */ widows: 2; orphans: 2; color: #1a1a1a; background-color: #ffffff; } /* ---------------------------------------------------------------- title page * * Pandoc builds this page from the metadata and gives every line a class. Not * one of them was styled until 2026-08-09, so the first page a reader ever saw * was the title at body-plus-a-bit, the subtitle as a paragraph, the author and * the publisher as two indented lines of the same two words, and the date as * the raw "2026-08". It read as an export, which is the one impression a title * page exists to prevent. * * The date stays in the ISO form it is written in. It is also dc:date in the * package document, where EPUB 3 requires ISO 8601 — spelling it "August 2026" * for the look of it would make the file invalid. It is set small and quiet * instead, beside the edition, the way a printed copyright line carries it. */ section.titlepage { margin-top: 18%; text-align: left; } h1.title { font-family: "Sitka Heading", Cambria, Georgia, serif; font-weight: 600; font-size: 2.1em; line-height: 1.15; margin: 0 0 0.3em; page-break-before: avoid; break-before: avoid; } p.subtitle { font-size: 1.05em; font-style: italic; color: #333333; text-indent: 0; margin: 0 0 0.7em; padding-bottom: 0.7em; border-bottom: 2px solid #1d3557; } p.author { font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1.05em; text-indent: 0; margin: 2.6em 0 0; } /* The imprint, set away from the byline. Author and publisher are the same two words here, and stacked together they read as the page having printed the name twice by mistake. Down at the foot they read as what they are: who wrote it, then who published it and when — which is where a printed title page puts an imprint anyway. */ p.publisher, p.date { font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: #595959; /* 7.0:1 on white. */ text-indent: 0; margin: 0.4em 0 0; } p.publisher { margin-top: 2.4em; } div.rights { font-size: 0.82em; color: #595959; margin-top: 2.4em; } /* ---------------------------------------------------------------- headings */ /* Four visibly different treatments, not four sizes of one. The chapter title * stays serif and large; the A-head goes sans and accent; the B-head goes sans * too, smaller and in black; the C-head is italic at body size. Anyone skimming * can tell the level without measuring it. * * The B-head was serif bold at 1.1em until 2026-08-09, and that was wrong for * the same reason it was wrong in the print interior. This book's commonest * construction is a paragraph that opens with a bolded claim, so a serif bold * heading and an ordinary sentence looked identical — a reader could not tell a * section from a sentence. Both editions moved it to the sans on the same day, * which is the rule this stylesheet's header states: one design decision, two * artefacts, never made twice. */ h1, h2, h3, h4 { line-height: 1.25; text-align: left; page-break-after: avoid; break-after: avoid; -webkit-hyphens: none; hyphens: none; /* Never hyphenate a heading. */ } h1 { font-family: "Sitka Heading", Cambria, Georgia, serif; font-weight: 600; font-size: 1.9em; /* A sink. A chapter opens with space above it, which is what a printed book does. */ margin: 2.4em 0 1.1em; page-break-before: always; break-before: page; } h2 { font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1.2em; color: #1d3557; /* No rule above. One horizontal line over every section heading put roughly 150 lines through the book and made it read as a report. Space and the sans face already mark the level. */ margin: 2.2em 0 0.6em; } h3 { font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 0.95em; letter-spacing: 0.01em; color: #1a1a1a; margin: 1.9em 0 0.5em; } h4 { font-family: "Sitka Heading", Cambria, Georgia, serif; font-weight: 400; font-size: 1em; font-style: italic; color: #333333; margin: 1.3em 0 0.3em; } /* ---------------------------------------------------------------- openers * * scripts/style_epub.py splits a heading that already holds two things into the * two things it holds: "Chapter 3." and "Why 'career' is not a salary number". * The print interior has done that since it was built — see head-parts() in * build/templates/book.typ — and until 2026-08-09 the reflowable edition had * not, so its chapter openers were one line of bold serif and its two Book * half-titles, the most important structural fact in the book, arrived as an * ordinary heading with a grey-barred quotation under it. * * The label is the same small tracked sans used for every navigational element * in both editions. The rule under a chapter title is a hairline in the rule * grey, not the two-pixel accent underline this file carried in its first * version and removed on purpose: that one was a web convention sitting alone * under a title, this one closes an opener that now has a label above it, and * it is what the printed page does. */ h1.opener { margin: 2.2em 0 1.3em; } h1.opener .opener-label { display: block; font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif; font-size: 0.44em; /* ≈ 0.84em of body text. */ font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #1d3557; margin-bottom: 0.9em; line-height: 1.4; } h1.opener .opener-title { display: block; } h1.opener.chapter, h1.opener.appendix, h1.opener.plain { border-bottom: 1px solid #c9c9c9; padding-bottom: 0.42em; } /* A part divider. Its own page, a heavier rule, and the blurb under it set as a standfirst rather than as a quotation — pandoc marks the blurb up as a blockquote because that is how it is written in the manuscript, and a grey bar down its left edge is a pull quote, not the opening of a part. */ h1.opener.part { font-size: 2.2em; border-bottom: 2px solid #1d3557; padding-bottom: 0.34em; margin-bottom: 1.1em; } /* The two half-titles. Centred, larger than a part, and given room, because this is the division that tells a reader Book A is read in order and Book B is looked up. A reader who misses it reads forty-six profiles in sequence. */ h1.opener.book { font-size: 2.6em; font-weight: 400; text-align: center; margin: 20% 0 0; } h1.opener.book .opener-label { letter-spacing: 0.4em; margin-bottom: 0.7em; } h1.opener.book .opener-title { border-top: 2px solid #1d3557; padding-top: 0.5em; display: inline-block; } h1.opener.book + blockquote { margin: 1.6em 12% 0; padding: 0; border-left: none; font-style: italic; text-align: center; color: #333333; /* Centred lines must not hyphenate. A broken word on a ragged-both-edges block has nothing to justify it, and "computing hir-/ing" was the first thing on the page under the book's own half-title. */ -webkit-hyphens: none; hyphens: none; } h1.opener.book + blockquote p { text-indent: 0; } /* The paragraph opening a part divider, which is the part's own blurb. */ h1.opener.part + p { font-size: 1.02em; color: #333333; } /* -------------------------------------------------------------- set pieces * * A section that is an account of something that happened rather than a topic * that starts here. Seven of them, listed in build/emphasis.yaml with the * reason each one qualifies, marked by scripts/style_epub.py. * * The tell is the typeface, and it is the same tell the print interior uses. * Every other section heading in this book is in the navigation sans, which * says "a subject begins here". These are in the reading serif, larger, under * a rule, which says "here is a thing that happened". */ h2.setpiece, h3.setpiece { font-family: "Sitka Heading", Cambria, Georgia, serif; font-weight: 400; font-size: 1.35em; color: #1a1a1a; border-top: 1px solid #c9c9c9; padding-top: 1.1em; margin: 2.8em 0 0.7em; } h2.setpiece .setpiece-label, h3.setpiece .setpiece-label { display: block; font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif; font-size: 0.55em; /* ≈ 0.74em of body text. */ font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #1d3557; margin-bottom: 0.75em; line-height: 1.4; } h2.setpiece .setpiece-title, h3.setpiece .setpiece-title { display: block; } /* --------------------------------------------------------- standout lines * * A paragraph whose whole content is one bolded sentence. There are 42 of them * and they are the most quotable lines in the book — "A gate protects the * people inside. You are outside." — set until now as ordinary running text * with bold on. * * Set apart, the bold comes off. Bold is how a sentence shouts for attention * from inside a paragraph; once the line has room of its own, shouting as well * is the typographic equivalent of repeating yourself. The element * stays in the markup, because the line does still carry strong importance and * a screen reader should hear that — only its weight changes. * * The inset is what stops the larger size reading as a heading. A line that * starts inside the measure has been lifted out of the text; a heading never * is. */ p.standout { font-size: 1.22em; line-height: 1.4; text-indent: 0; margin: 1.5em 0; padding-left: 1.2em; -webkit-hyphens: none; hyphens: none; } p.standout strong { font-weight: 400; } /* ---------------------------------------------------------------- text */ /* THE PARAGRAPH RULE, AND IT IS THE ONE THAT DECIDES WHETHER THIS READS AS A BOOK. Until 2026-08-09 this was `margin: 0 0 0.8em; text-indent: 0` — a blank line after every paragraph, justified in the comment as "clearer at small sizes". That is the web and report convention. The print edition abandoned it long ago for the reason docs/BUILD.md gives: the indent marks a new paragraph and the text block reads as one continuous field, where a gap after every paragraph chops the page into strips. The EPUB kept the old rule and nobody looked, so the two artefacts of the same book were set to opposite conventions. Indent, no gap. Commercial ebooks do this and reflowable text handles it fine. */ p { margin: 0; text-indent: 1.2em; } /* The paragraph after any block element runs flush, which is the printed convention and matches `first-line-indent: (all: false)` in the Typst template. An indent there would look like an error rather than a new paragraph. */ h1 + p, h2 + p, h3 + p, h4 + p, blockquote + p, table + p, ul + p, ol + p, dl + p, hr + p, figure + p, p.standout + p, li > p:first-child { text-indent: 0; } strong { font-weight: 700; } em { font-style: italic; } a { color: #10457a; /* 8.6:1 on white. */ text-decoration: underline; /* Never colour alone — WCAG 1.4.1. */ } blockquote { margin: 1em 0 1em 1.5em; padding-left: 0.8em; border-left: 3px solid #767676; font-style: normal; } /* With paragraphs carrying no margin, a list needs space on BOTH sides or it collides with the text above it. This is the one place the indent model costs something, and it costs a line of CSS. */ ul, ol { margin: 0.9em 0 0.9em 1.4em; padding: 0; } li { margin-bottom: 0.35em; } /* Profile snapshots. A definition list is the correct element for a set of * label/value pairs, and it is what a screen reader announces sensibly. It * replaced a table whose header row was empty, which the DAISY checker * rightly refused. Styled as a compact box so it still reads as a summary * rather than as a glossary. */ dl { margin: 1.1em 0; padding: 0.7em 0.9em; border-left: 4px solid #1d3557; background-color: #f4f5f7; } dt { font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif; font-size: 0.82em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #1d3557; margin-top: 0.55em; } dt:first-of-type { margin-top: 0; } dd { margin: 0 0 0 0.1em; } /* ---------------------------------------------------------------- tables * * This book is a database with prose around it, so the tables are the * product. They must survive a 4-inch screen and a screen reader. */ table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.9em; /* Let long tables break across pages rather than overflow. */ page-break-inside: auto; break-inside: auto; } caption { text-align: left; font-style: italic; margin-bottom: 0.4em; } /* Rules, not boxes. Vertical borders on a ten-column table make it read as a * spreadsheet dump; the column alignment does that job already. Horizontal * row lines stay, because on a four-inch screen they are what lets a reader * track a row across fourteen columns. */ th, td { border: 0; border-bottom: 1px solid #c9c9c9; padding: 0.4em 0.55em 0.4em 0; text-align: left; vertical-align: top; -webkit-hyphens: none; hyphens: none; } th { font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif; font-size: 0.88em; font-weight: 600; color: #1d3557; border-top: 2px solid #1d3557; border-bottom: 1px solid #1d3557; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 2px solid #1d3557; } tr { page-break-inside: avoid; break-inside: avoid; } /* ---------------------------------------------------------------- code */ code, pre { font-family: "Consolas", "Liberation Mono", "DejaVu Sans Mono", monospace; font-size: 0.9em; } pre { white-space: pre-wrap; /* Never force horizontal scroll. */ word-wrap: break-word; overflow-wrap: break-word; margin: 1em 0; padding: 0.6em; background-color: #f4f4f4; border-left: 3px solid #767676; } /* ---------------------------------------------------------------- notes */ hr { border: none; border-top: 1px solid #767676; margin: 1.5em 0; } /* ------------------------------------------------------------------ contents * * Two of these, and the selector matters. The EPUB navigation document is * `