/* Blog styling. Deliberately standalone: these pages are plain HTML served straight off the CDN so
   search engines and people with slow connections get the content without booting the Angular app.
   The tokens mirror src/styles.css; keep them in step if the brand palette moves.

   Theme follows the operating system here rather than the app's html.dark class, because a static
   page has no access to the app's stored preference. */
:root {
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b;
  --line:#e6e8ef; --brand:#0d1117; --on-brand:#ffffff; --accent:#3d3af0;
  color-scheme: light;
}
/* Dark tokens, defined once and switched on from two places. The app persists the reader's choice
   in localStorage and applies it as html.dark; the blog is on the same origin, so it can honour that
   instead of guessing from the operating system and disagreeing with the app the reader just left.
   The media query is the fallback for a first visit, and html.light lets an explicit light choice
   beat a dark OS. */
html.dark, html.dark body { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --bg:#0b1120; --surface:#131c2e; --surface-2:#1c2740;
    --ink:#e8edf6; --ink-2:#cbd5e1; --muted:#93a1b5;
    --line:#273349; --brand:#e8edf6; --on-brand:#0b1120; --accent:#8f8cff;
    color-scheme: dark;
  }
}
html.dark {
  --bg:#0b1120; --surface:#131c2e; --surface-2:#1c2740;
  --ink:#e8edf6; --ink-2:#cbd5e1; --muted:#93a1b5;
  --line:#273349; --brand:#e8edf6; --on-brand:#0b1120; --accent:#8f8cff;
}
*,*::before,*::after { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:720px; margin:0 auto; padding:0 20px 96px; }
a { color:var(--accent); text-underline-offset:2px; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* header */
.top { border-bottom:1px solid var(--line); background:var(--surface); }
.top .inner { max-width:720px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top a { text-decoration:none; }
.top-nav { display:flex; gap:4px; margin-left:auto; margin-right:10px; }
.top-nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 10px; font-size:.92rem;
  font-weight:600; color:var(--ink-2); border-radius:8px; }
.top-nav a:hover { color:var(--ink); background:var(--tint); }
@media (max-width:520px) { .top-nav .wide-only { display:none; } .top-nav a { padding:0 8px; } }
.back-link { display:inline-flex; align-items:center; min-height:44px; margin:14px 0 -18px; font-size:.92rem;
  font-weight:600; color:var(--muted); text-decoration:none; }
.back-link:hover { color:var(--ink); }
.brand { display:flex; align-items:center; }
.brand img { height:26px; width:auto; }
/* The wordmark is dark ink and vanishes on a dark surface, so there are two files and exactly one is
   shown. Both selectors carry the .brand prefix on purpose: `.brand img` would otherwise outweigh a
   bare `.lg-dark` and render both logos at once, which is precisely what it did. */
.brand .lg-light { display:block; }
.brand .lg-dark  { display:none; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .brand .lg-light { display:none; }
  html:not(.light) .brand .lg-dark  { display:block; }
}
html.dark .brand .lg-light { display:none; }
html.dark .brand .lg-dark  { display:block; }
html.light .brand .lg-light { display:block; }
html.light .brand .lg-dark  { display:none; }
.top .cta { font-size:.9rem; font-weight:600; background:var(--brand); color:var(--on-brand);
  display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; padding:8px 14px; border-radius:9px; white-space:nowrap; }

h1 { font-size:clamp(1.9rem,4.6vw,2.6rem); line-height:1.15; letter-spacing:-.02em; margin:0; text-wrap:balance; }
h2 { font-size:1.28rem; line-height:1.3; margin:38px 0 12px; letter-spacing:-.01em; text-wrap:balance; }
p { margin:0 0 16px; color:var(--ink-2); }
strong { color:var(--ink); font-weight:650; }

.meta { color:var(--muted); font-size:.85rem; margin:14px 0 0; }
.dek { font-size:1.12rem; color:var(--ink-2); margin:16px 0 0; }
article { padding-top:44px; }
article > p:first-of-type { margin-top:28px; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin:24px 0; }
.card p:last-child { margin-bottom:0; }
.card h3 { margin:0 0 8px; font-size:1rem; }

ul.plain { margin:0 0 16px; padding-left:20px; color:var(--ink-2); }
ul.plain li { margin-bottom:8px; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.chip { border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:5px 12px; font-size:.86rem; color:var(--ink-2); white-space:nowrap; }

.end { margin-top:48px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.btn { display:inline-block; background:var(--brand); color:var(--on-brand); text-decoration:none;
  font-weight:600; font-size:.95rem; padding:11px 20px; border-radius:10px; }
.back { font-size:.9rem; }

/* index list */
.posts { list-style:none; margin:28px 0 0; padding:0; }
.posts li { border-bottom:1px solid var(--line); }
.posts li:last-child { border-bottom:0; }
.posts a { display:block; padding:20px 0; text-decoration:none; color:inherit; }
.posts a:hover h2 { color:var(--accent); }
.posts h2 { margin:0 0 6px; font-size:1.14rem; }
.posts p { margin:0; font-size:.95rem; color:var(--muted); }

/* Inline mock-ups of the actual UI. Drawn in HTML rather than pasted as screenshots: a screenshot
   would carry a real user's roles and match scores, would need re-cutting every time the interface
   moves, and would arrive as a fixed-width image that ignores dark mode and small screens. These
   follow the app's own tokens, so they stay recognisable without ever showing anyone's data. */
.mock { border:1px solid var(--line); background:var(--surface); border-radius:12px;
  overflow:hidden; margin:22px 0; font-size:.92rem; }
.mock-bar { background:var(--surface-2); padding:9px 14px; font-size:.78rem; color:var(--muted);
  border-bottom:1px solid var(--line); font-weight:600; }
.mock-row { padding:14px 16px; border-bottom:1px solid var(--line); }
.mock-row:last-child { border-bottom:0; }
/* Wraps rather than squeezing: on a phone the score drops to its own line instead of ending up
   pressed against the end of a long job title. */
.mock-head { display:flex; align-items:baseline; justify-content:space-between; gap:6px 18px;
  flex-wrap:wrap; }
.mock-title { flex:1 1 220px; min-width:0; }
.mock-title { font-weight:650; color:var(--ink); }
.mock-score { flex:0 0 auto; }
.mock-score { color:var(--accent); font-weight:700; white-space:nowrap; }
.mock-sub { color:var(--muted); font-size:.86rem; margin-top:2px; }
.mock-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.tag { border:1px solid var(--line); border-radius:7px; padding:3px 9px; font-size:.78rem;
  color:var(--ink-2); background:var(--bg); white-space:nowrap; }
.tag.on { border-color:var(--accent); color:var(--accent); font-weight:600; }
.tag.new { border-color:transparent; background:var(--accent); color:#fff; font-weight:600; }
.tag.applied { border-color:transparent; background:#e4efeb; color:#1f6b57; font-weight:600; }
.tag.ref { border-color:transparent; background:var(--surface-2); color:var(--ink-2); }
@media (prefers-color-scheme: dark) { html:not(.light) .tag.applied { background:#123024; color:#5fc98b; } }
html.dark .tag.applied { background:#123024; color:#5fc98b; }
.caption { font-size:.84rem; color:var(--muted); margin:-12px 0 22px; }

/* Two kinds of post live here and they do different jobs: product notes for people already using
   Expado, and guides that answer what job seekers in Germany actually type into a search box. The
   label keeps the index honest about which is which. */
.kind { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent); background:var(--surface-2);
  border-radius:999px; padding:3px 9px; margin:0 10px 0 0; vertical-align:middle; }
.posts .kind { margin:0 0 7px; display:inline-block; }

/* Two-market split and the phrase table. Both are structure, not decoration: the post's whole
   argument is that these are two separate markets and that four German phrases mean four different
   things, so showing them side by side does more than a paragraph can. */
.split { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; }
@media (max-width:620px) { .split { grid-template-columns:1fr; } }
.split > div { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.split h3 { margin:0 0 4px; font-size:1rem; }
.split .who { font-size:.8rem; color:var(--accent); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; margin:0 0 8px; }
.split p { margin:0; font-size:.92rem; }

.phrases { width:100%; border-collapse:collapse; margin:22px 0; font-size:.93rem;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.phrases td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2); }
.phrases tr:last-child td { border-bottom:0; }
.phrases td:first-child { color:var(--ink); font-weight:650; white-space:nowrap; width:1%;
  background:var(--surface); }
@media (max-width:560px) {
  .phrases, .phrases tbody, .phrases tr, .phrases td { display:block; width:auto; }
  .phrases td:first-child { border-bottom:0; padding-bottom:2px; }
}
.scale { display:flex; gap:0; margin:6px 0 0; border-radius:6px; overflow:hidden; height:6px; }
.scale i { flex:1; background:var(--line); }
.scale i.on { background:var(--accent); }

/* The header CTA and the end-of-post CTA used to be the same dark button with almost the same words,
   which reads as one button repeated rather than two moments. They are now separated by job: the
   header is a quiet way back into the product for someone who already uses it, and the end of a post
   is the loud one, aimed at a reader who arrived from a search and has just been persuaded. */
.top .cta { background:transparent; color:var(--ink-2); border:1px solid var(--line);
  font-weight:600; }
.top .cta:hover { border-color:var(--ink-2); color:var(--ink); }

.end { display:block; }
.end-cta { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; margin-bottom:18px; }
.end-cta p { margin:0 0 14px; color:var(--ink-2); font-size:.98rem; }

/* Section switcher. It sits at the top because the alternative was a small link at the very bottom,
   which meant a reader landing on a page with one post had no way of knowing six more existed. */
.tabs { display:flex; gap:8px; margin:22px 0 4px; flex-wrap:wrap; }
.tab { display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:7px 14px; font-size:.9rem; font-weight:600; }
.tab span { font-size:.78rem; color:var(--muted); background:var(--bg); border-radius:999px;
  padding:1px 7px; }
.tab.on { background:var(--ink); color:var(--bg); border-color:var(--ink); cursor:default; }
.tab.on span { background:rgba(255,255,255,.18); color:inherit; }
.tab:not(.on):hover { border-color:var(--ink-2); color:var(--ink); }

/* Index list: the posts are the page, so they get more room and a clearer hierarchy than the
   hairline-separated rows they started as. Cards were the other option and were rejected: with
   text-only posts a card is an empty box around a headline, and it doubles the vertical scroll on a
   phone without adding anything to read. */
.posts a { padding:22px 0; }
.posts h2 { font-size:1.22rem; letter-spacing:-.01em; }
.posts p { font-size:.97rem; color:var(--ink-2); }

/* ---------------------------------------------------------------------------------------------
   Readability pass (25 Sep 2026). Reviewed on a phone and a laptop against the live posts; each rule
   below answers one thing that got in the way of reading.
   --------------------------------------------------------------------------------------------- */

/* Body copy one step darker than --ink-2. The old colour passed contrast checks, but long passages
   in mid slate on an off-white page read as faded, and body text is what people spend minutes on. */
:root { --body:#1e293b; --tint:#eef0fe; }
@media (prefers-color-scheme: dark) { html:not(.light) { --body:#dbe2ec; --tint:#1d2340; } }
html.dark { --body:#dbe2ec; --tint:#1d2340; }

/* Article text: a touch larger on screens that have the room, with a little more line spacing.
   Phones keep 17px, where 18 would push the measure below 40 characters. */
.prose p, .prose ul.plain { color:var(--body); }
@media (min-width:720px) { .prose { font-size:1.08rem; line-height:1.72; } }

/* Section headings: at 1.28rem they were barely bigger than the body, so a reader skimming for the
   part they came for could not see where one section ended. */
.prose h2 { font-size:1.55rem; line-height:1.25; margin:52px 0 14px; letter-spacing:-.015em; }
.prose h3 { letter-spacing:-.005em; }

/* Header block. The category and date now sit ABOVE the title, where readers look for them; below
   the dek they were jammed against the first paragraph with no space at all. */
article { padding-top:48px; }
.post-head .meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 16px; }
.post-head .meta .kind { margin:0; text-decoration:none; }
.post-head .dek { font-size:1.18rem; line-height:1.55; margin:18px 0 0; }
.byline { display:flex; align-items:center; gap:12px; margin:26px 0 0; padding-top:22px;
  border-top:1px solid var(--line); color:var(--muted); font-size:.93rem; }
.byline strong { color:var(--ink); }
.avatar { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--brand); color:var(--on-brand);
  font-size:.8rem; font-weight:700; letter-spacing:.02em; }
.avatar.lg { width:52px; height:52px; font-size:.95rem; }

/* Key takeaways: the answer before the argument, for the reader deciding whether to read on. */
.takeaways { margin:32px 0 8px; padding:20px 22px 8px; border-radius:14px; background:var(--tint); }
.takeaways-title { margin:0 0 10px; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); }
.takeaways ul { margin:0; padding-left:20px; }
.takeaways li { margin:0 0 12px; color:var(--ink); line-height:1.55; }
.prose > p:first-child { margin-top:32px; }

/* The phrase table on a phone. The small-screen rule set `width:auto` on every cell, but the desktop
   `td:first-child { width:1% }` is more specific and kept winning, so the label column shrank to a
   sliver, wrapped every word and lost its level bar. Each row is now its own stacked block. */
@media (max-width:560px) {
  .phrases td:first-child { width:auto; white-space:normal; padding-bottom:4px; background:transparent; }
  .phrases td { padding:12px 16px; }
  .phrases td + td { padding-top:6px; }
  .phrases tr { border-bottom:1px solid var(--line); background:var(--surface); }
  .phrases tr:last-child { border-bottom:0; }
  .phrases td:first-child .scale { max-width:160px; }
}

/* Expado's own dated counts: the figures a reader (or an AI answer) can quote. */
.data-box { margin:24px 0 8px; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.data-box .data-title { margin:0 0 6px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.data-box h2 { font-size:1.2rem; line-height:1.3; margin:0 0 12px; }
.data-box p { margin:0 0 12px; color:var(--ink-2); line-height:1.6; }
.data-box .data-note { margin:14px 0 0; font-size:.84rem; color:var(--muted); }
.data-bars { list-style:none; margin:0 0 16px; padding:0; }
.data-bars li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.data-bars li:last-child { border-bottom:0; }
.data-table { width:100%; border-collapse:collapse; font-size:.93rem; }
.data-table th { text-align:left; font-size:.78rem; font-weight:700; color:var(--muted); padding:6px 8px 6px 0; border-bottom:1px solid var(--line); }
.data-table td { padding:8px 8px 8px 0; border-bottom:1px solid var(--line); }
.data-table tr:last-child td { border-bottom:0; }
.data-table th:not(:first-child), .data-table td:not(:first-child) { text-align:right; }
/* Five columns do not fit a phone: the employer count goes, and the rest gets tighter. */
@media (max-width:560px) {
  .data-table .wide-col { display:none; }
  .data-table { font-size:.84rem; }
  .data-table th, .data-table td { padding-right:6px; }
  .data-table td:last-child { white-space:nowrap; }
}

/* Official sources for the figures in a guide, just after the text they support. */
.sources { margin:40px 0 32px; padding-top:22px; border-top:1px solid var(--line); }
.sources h2 { font-size:1.05rem; margin:0 0 6px; }
.sources p { margin:0 0 10px; font-size:.9rem; color:var(--muted); }
.sources ul { margin:0; padding-left:18px; }
.sources li { margin:0 0 6px; font-size:.93rem; line-height:1.5; }

/* End of post: author, then two posts to read next. */
.author-box { display:flex; gap:16px; align-items:flex-start; margin:0 0 26px; padding:20px 22px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.author-box p { margin:0; font-size:.95rem; color:var(--ink-2); }
.author-box .author-name { font-weight:700; margin-bottom:4px; }
.author-box .author-name a { color:var(--ink); text-decoration:none; }
.author-box .author-name a:hover { color:var(--accent); }
.related { margin:0 0 26px; }
.related-label { margin:0 0 12px; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.related { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.related-label { grid-column:1 / -1; }
@media (max-width:560px) { .related { grid-template-columns:1fr; } }
.related-card { display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  text-decoration:none; color:var(--ink); }
.related-card:hover { border-color:var(--accent); }
.related-title { font-weight:650; line-height:1.35; }
.related-meta { font-size:.85rem; color:var(--muted); }

/* Index: the newest post leads, and every entry now says when it was written and how long it is. */
.featured { display:block; margin:26px 0 8px; padding:26px 26px 22px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line); text-decoration:none; color:inherit; }
.featured:hover { border-color:var(--accent); }
.featured-label { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.featured h2 { margin:0 0 10px; font-size:1.6rem; line-height:1.2; letter-spacing:-.02em; }
.featured:hover h2 { color:var(--accent); }
.featured p { margin:0 0 14px; font-size:1.02rem; color:var(--ink-2); }
.post-meta { display:block; margin-top:8px; font-size:.85rem; color:var(--muted); }
.featured .post-meta { margin-top:0; }
.posts { margin-top:12px; }
.post-head .meta .when { white-space:nowrap; }
.featured h2 { text-wrap:pretty; }

/* Author photo instead of initials (the .avatar box was built for a letter pair). */
img.avatar { object-fit: cover; padding: 0; background: var(--surface-2); }
.byline a { color: inherit; text-decoration: none; }
.byline a:hover strong { color: var(--accent); }

/* About page. */
.about-me { display: flex; align-items: center; gap: 22px; margin: 30px 0 8px; padding: 22px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
/* The whole photo at its own proportions, not a face cropped into a circle: the user asked for it uncropped. */
.about-me img { width: 180px; height: auto; border-radius: 12px; flex: none; }
.about-me p { margin: 0 0 4px; color: var(--ink-2); }
.about-me .about-name { font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
@media (max-width: 560px) { .about-me { flex-direction: column; align-items: flex-start; } .about-me img { width: 100%; max-width: 280px; } }
.about-quote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent);
  font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.about-facts td:first-child { width: 28%; }
/* A new photo is a new FILE NAME, never the same name overwritten: Firebase serves images with
   max-age=31536000, immutable, so a browser that saw the old file keeps showing it for a year. */