/* The Jobstead Library (/library and the articles in /library/). Built on styles.css's tokens.
   The front page is laid out like a newspaper: masthead, a lead story with a column of headlines,
   then rows of four. Cards are filled in by js/library.js from library/posts.js. */

body.library { background: var(--paper); }
.library .top:not(.solid) { background: transparent; }

/* ---------- masthead ---------- */
.lib { padding: calc(var(--head) + clamp(28px, 5vw, 64px)) 0 clamp(56px, 8vw, 96px); }
.lib-mast { text-align: center; border-bottom: 3px double var(--ink); }
.lib-mast h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 1rem + 7vw, 6rem); line-height: .95; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
/* the dateline between the two rules: a newspaper-style serif italic, centred between the lines */
.lib-strap { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--ink); margin-top: clamp(12px, 2vw, 18px); padding: 9px 2px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; line-height: 1.3; color: var(--ink-soft); }
@media (max-width: 720px) { .lib-strap span:nth-child(2) { display: none; } }
@media (max-width: 420px) { .lib-strap { justify-content: center; } .lib-strap span:nth-child(3) { display: none; } }

/* ---------- topic nav ---------- */
.lib-sect { display: flex; gap: 4px 20px; justify-content: center; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--line-strong); }
.lib-sect button { border: 0; background: none; cursor: pointer; font-weight: 700; font-size: .95rem; padding: 6px 2px; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 7px; transition: color .2s, text-decoration-color .2s; }
.lib-sect button:hover { color: var(--leaf-text); }
.lib-sect button[aria-pressed="true"] { text-decoration-color: var(--leaf); color: var(--ink); }
@media (max-width: 560px) { .lib-sect { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 18px; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .lib-sect button { white-space: nowrap; } }

/* ---------- shared card bits ---------- */
/* the topic label on a card or article: Gabarito in normal sentence case, e.g. "Degrees & data" */
.lib-kicker { font-family: var(--font); font-size: .92rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--leaf-text); }
.lib-meta { font-size: .86rem; color: var(--ink-soft); }
.lib-art { position: relative; overflow: hidden; border-radius: 6px; background: var(--c, var(--sky)); }
.lib-art svg, .lib-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
a.lib-item { color: inherit; text-decoration: none; }
a.lib-item:hover .lib-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--leaf); }
.lib-t { font-family: var(--serif); font-weight: 700; color: var(--ink); text-wrap: balance; }
/* "coming soon" placeholders: visible, but quiet and not clickable */
.lib-item.is-soon { cursor: default; }
.lib-item.is-soon .lib-art { opacity: .7; }
.lib-item.is-soon .lib-t { color: #8A8076; }

/* ---------- lead + sidebar ---------- */
.lib-cols { display: grid; grid-template-columns: 2fr 1fr; margin-top: clamp(20px, 3vw, 28px); }
.lib-lead { padding-right: clamp(20px, 3vw, 32px); border-right: 1px solid var(--line-strong); display: grid; gap: 12px; align-content: start; }
.lib-lead .lib-art { aspect-ratio: 16 / 9; }
.lib-lead .lib-t { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: pretty; }
.lib-lead .lib-dek { max-width: none; }
.lib-dek { font-family: var(--serif); font-size: clamp(1.12rem, 1rem + .4vw, 1.3rem); font-style: italic; color: var(--ink-soft); line-height: 1.4; max-width: 56ch; }
.lib-side { padding-left: clamp(18px, 2.4vw, 26px); display: grid; align-content: start; }
.lib-side .lib-item { padding: 16px 0; border-bottom: 1px solid var(--line-strong); display: grid; gap: 5px; }
.lib-side .lib-item:first-child { padding-top: 0; }
.lib-side .lib-t { font-size: 1.35rem; line-height: 1.1; }

/* ---------- rows of four ---------- */
.lib-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; margin-top: clamp(26px, 4vw, 36px); padding-top: 18px; border-top: 3px solid var(--ink); }
.lib-row .lib-item { display: grid; gap: 7px; align-content: start; }
.lib-row .lib-art { aspect-ratio: 16 / 9; }
.lib-row .lib-t { font-size: 1.2rem; line-height: 1.12; }
.lib-more-h { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; margin-top: clamp(30px, 4vw, 44px); }
.lib-more-h + .lib-row { margin-top: 10px; }
.lib-empty { padding: 30px 0 0; color: var(--ink-soft); }

@media (max-width: 900px) {
  .lib-cols { grid-template-columns: 1fr; }
  .lib-lead { padding: 0 0 22px; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .lib-side { padding: 18px 0 0; }
  .lib-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .lib-row { grid-template-columns: 1fr; } .lib-row .lib-item { grid-template-columns: 112px 1fr; column-gap: 14px; } .lib-row .lib-art { grid-row: span 3; aspect-ratio: 1 / 1; } }

/* ---------- sign-up strip ---------- */
.lib-cta { background: var(--leaf-soft); padding: clamp(40px, 6vw, 70px) 0; }
.lib-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.lib-cta h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); color: var(--logo-green); line-height: 1.08; max-width: 22ch; }
.lib-cta p { color: var(--ink-soft); margin-top: 8px; max-width: 52ch; }
.lib-nojs { padding: 30px 0; text-align: center; color: var(--ink-soft); }

/* ===================== an article page (library/<slug>.html) ===================== */
.post { padding: calc(var(--head) + clamp(24px, 4vw, 52px)) 0 clamp(48px, 7vw, 84px); }
.post-in { width: min(100% - 2 * var(--gutter), 720px); margin-inline: auto; }
.post-back { display: inline-block; font-weight: 700; font-size: .92rem; color: var(--ink-soft); text-decoration: none; margin-bottom: 18px; }
.post-back:hover { color: var(--leaf-text); }
.post-head { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 3px double var(--ink); }
.post-head h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.post-hero { margin: 26px 0 6px; aspect-ratio: 16 / 8; }
.prose { margin-top: 26px; font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.72; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.12; color: var(--logo-green); margin-top: 1.8em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-inline: 0; padding: 16px 20px; border-left: 4px solid var(--leaf); background: var(--leaf-soft); border-radius: 0 14px 14px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-strong); vertical-align: top; }
.prose thead th { font-weight: 800; border-bottom: 2px solid var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line-strong); margin: 2em 0; }
.post-sources { margin-top: 2.4em; padding-top: 16px; border-top: 1px solid var(--line-strong); font-size: .9rem; color: var(--ink-soft); }
.post-more { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: clamp(30px, 5vw, 56px) auto 0; }
.post-more .lib-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .post-more .lib-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .post-more .lib-row { grid-template-columns: 1fr; } }

/* ===================== a long article with the "In this article" rail ===================== */
/* the header slides away while you read down, and comes back when you scroll up (js/library.js) */
body.library .top { transition: transform .35s var(--ease), background .35s, box-shadow .35s; }
body.head-hidden .top { transform: translateY(-100%); }

/* three columns: the rail on the left, the text in the middle, and an empty column on the right the same width as the rail's,
   so the text sits in the centre of the page */
.post-long .post-grid { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 720px) minmax(0, 1fr); grid-template-areas: "top top top" "toc hero ." "toc body ."; grid-template-rows: auto auto 1fr; column-gap: 40px; }
.post-long .atoc { max-width: 220px; }
.post-top { grid-area: top; }
@media (min-width: 1001px) { .post-long .post-top { margin-inline: 10%; } } /* the title block is pulled in by 10% on each side */
.post-long .post-head h1 { text-wrap: pretty; }
.post-long .post-head .lib-dek { max-width: none; }
/* the headline image sits at the top of the text column, so its left edge lines up with the article */
.post-long .post-hero { grid-area: hero; max-width: 720px; aspect-ratio: 3 / 2; border-radius: 20px; margin: 0 0 clamp(26px, 4vw, 40px); } /* same width as the text; the sides of the photo are cropped */
.post-long .post-hero img { object-position: 50% 50%; } /* crop evenly from both sides, keeping the photo centred */
@media (max-width: 1000px) { .post-long .post-hero { max-width: none; aspect-ratio: 1023 / 571; } }
.post-long .post-head { margin-bottom: clamp(26px, 4vw, 40px); }
.post-long .prose { grid-area: body; max-width: 720px; margin-top: 0; min-width: 0; }
.post-long .atoc { grid-area: toc; }
.post-long [id] { scroll-margin-top: 28px; }
.prose :where(section, li) > * + * { margin-top: 1.1em; }
.prose .post-intro-h { margin-top: 0; }
.post-sec + .post-sec { margin-top: 2.6em; }
.post-sec:first-of-type { margin-top: 1.4em; }

/* the side rail: a map of the article in dashes, then short links to its sections */
.atoc { position: sticky; top: calc(var(--head) + 40px); align-self: start; max-height: calc(100vh - var(--head) - 60px); overflow-y: auto; scrollbar-width: none; transition: top .35s var(--ease); }
body.head-hidden .atoc { top: 40px; max-height: calc(100vh - 60px); }
.toc-toggle, .toc-line { display: none; }
.toc-h { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.2; color: var(--ink); margin: 0 0 14px; }
.toc-map { display: grid; gap: 7px; justify-items: start; margin: 0 0 20px; }
.toc-map i { display: block; height: 3px; width: var(--w, 22px); border-radius: 3px; background: var(--line-strong); transition: background .3s, width .3s var(--ease), height .2s; }
.toc-map i.is-done { background: #7D746A; }
.toc-map i.is-active { background: var(--leaf-dark); width: calc(var(--w, 22px) + 8px); height: 4px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); display: grid; gap: 1px; }
.toc-link { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--ink-soft); font-weight: 600; font-size: .92rem; line-height: 1.35; text-decoration: none; transition: color .2s, border-color .25s; }
.toc-link:hover { color: var(--leaf-text); }
.toc-link.is-active { color: var(--ink); font-weight: 700; border-left-color: var(--leaf-dark); }
.toc-left { margin-top: 16px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.toc-line span { display: block; height: 100%; width: 0; background: var(--leaf); transition: width .2s linear; }
@media (prefers-reduced-motion: reduce) { .toc-map i, .toc-line span, body.library .top, .atoc { transition: none; } }

/* a ranked degree: "5. Drama", then the salary on the line under it */
.rank { padding-top: 1.7em; margin-top: 2.2em; border-top: 1px solid var(--line-strong); }
.rank:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose .rank-h { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.08; color: var(--ink); margin: 0; }
.rank-n { color: var(--leaf-dark); margin-right: .08em; }
.rank-last .rank-n { color: #B8455B; }
.prose .rank-stat { margin-top: .35em; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.rank-stat b { color: var(--ink); font-weight: 800; }
.rank-img { margin: 1.3em 0 0; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--line); }
.rank-img img { width: 100%; height: 100%; object-fit: cover; }

/* the earnings table, with a bar per row */
.pay-wrap { overflow-x: auto; background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 6px 16px; }
.prose .pay-table th, .prose .pay-table td { padding: 10px 6px; }
.pay-table thead th { border-bottom: 2px solid var(--ink); font-size: .85rem; }
.pay-table tbody th { font-weight: 600; }
.pay-table td { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.pay-bar { --max: 170px; display: inline-block; vertical-align: middle; height: 10px; width: calc(var(--v) / 59900 * var(--max)); margin-right: 12px; border-radius: 99px; background: var(--leaf); }
.prose .is-all th, .prose .is-all td { background: var(--bg); font-weight: 800; border-top: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); }
.is-all .pay-bar { background: #E0B441; }
.is-low .pay-bar { background: var(--rose); }
@media (max-width: 560px) { .pay-bar { --max: 64px; margin-right: 8px; } .pay-wrap { padding: 4px 10px; } .pay-table { font-size: .88rem; } }

.prose .tip-h { font-size: 1.2rem; line-height: 1.3; margin-top: 1.7em; }

/* ===================== text styles for a news-style article (the Erasmus article) ===================== */
/* each one means one thing: bold is a key figure or date, italic is a quoted example, a fact list is a set of
   labelled points, the strip is the headline numbers, and sub-headings are in the serif */
.prose ul.facts { list-style: none; padding: 0; margin-top: .9em; border-top: 1px solid var(--line); }
.prose .facts li { position: relative; margin: 0; padding: 12px 0 13px 22px; border-bottom: 1px solid var(--line); color: var(--ink); }
.facts li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
.facts li strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 700; }
.facts li b { color: var(--ink); font-weight: 700; }

.prose .stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.6em 0; border-top: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); }
.stat-strip > div { padding: 16px 18px 16px 0; }
.stat-strip > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.prose .stat-strip dt { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1.05; color: var(--logo-green); }
.prose .stat-strip dd { margin: 6px 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 560px) {
  .prose .stat-strip { grid-template-columns: minmax(0, 1fr); }
  .stat-strip > div, .stat-strip > div + div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; column-gap: 14px; padding: 12px 0; border-left: 0; }
  .stat-strip > div + div { border-top: 1px solid var(--line); }
  .prose .stat-strip dd { margin: 0; }
}

.prose .sub-h { font-family: var(--serif); font-weight: 700; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.6rem); line-height: 1.2; color: var(--ink); margin-top: 1.9em; }
.prose .step-h { font-size: 1.15rem; line-height: 1.35; color: var(--ink); margin-top: 1.8em; }
.step-n { font-family: var(--serif); font-size: 1.3em; color: var(--leaf-dark); margin-right: .08em; }
.prose em { color: var(--ink); }

/* ===================== graphics inside an article (a timeline, a bar chart) ===================== */
/* drawn in the page's own type and colours: a cream card, ink text, one green for emphasis */
.prose .graphic { margin: 1.9em 0; padding: 22px 24px 20px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 18px; }
.prose .graphic-h { font-family: var(--font); font-weight: 700; font-size: 1.06rem; line-height: 1.3; color: var(--ink); margin: 0; }
.prose .graphic-sub { margin-top: 3px; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }

/* timeline. Narrow (phones): a vertical list, dates on the left, a thin line with a dot per event, then what happens.
   Wide enough (the article column on a computer or tablet): a horizontal line with ring markers and the events
   alternating above and below it on short stems. Green shows how far along things are (js/library.js sets the states). */
.prose .timeline { container-type: inline-size; }
.prose .tl { list-style: none; margin: 20px 0 0; padding: 0; }
.prose .tl-item { position: relative; display: grid; grid-template-columns: 96px 14px minmax(0, 1fr); column-gap: 14px; margin: 0; padding-bottom: 16px; }
.prose .tl-item > *, .prose .tl-card > * { margin-top: 0; }
.prose .tl-item:last-child { padding-bottom: 0; }
.tl-card { display: contents; }
.tl-date { grid-row: 1; grid-column: 1; font-family: var(--serif); font-weight: 700; font-size: 1.02rem; line-height: 1.4; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.tl-dot { grid-row: 1; grid-column: 2; position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; color: var(--line-strong); background: var(--paper); border: 2px solid currentColor; box-sizing: border-box; }
.prose .tl-text { grid-row: 1; grid-column: 3; font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
.tl-text b { color: var(--ink); font-weight: 700; }
.tl-item::before { content: ""; position: absolute; left: calc(96px + 14px + 6px); top: 14px; bottom: -2px; width: 2px; background: var(--line-strong); }
.tl-item:last-child::before { display: none; }
.tl-item:has(+ .is-open)::before { background: repeating-linear-gradient(var(--line-strong) 0 4px, transparent 4px 8px); }
/* passed, now, and not yet decided */
.tl-item.is-past .tl-dot { color: var(--leaf); background: var(--leaf); }
.tl-item.is-past::before { background: var(--leaf); }
.tl-item.is-now .tl-dot { color: var(--leaf-dark); background: var(--leaf-dark); box-shadow: 0 0 0 4px rgba(108, 192, 139, .28); }
.tl-item.is-now .tl-date { color: var(--leaf-text); }
.tl-item.is-open .tl-dot { border-style: dashed; }
@media (max-width: 520px) {
  .prose .tl-item { grid-template-columns: 74px 14px minmax(0, 1fr); column-gap: 10px; }
  .tl-item::before { left: calc(74px + 10px + 6px); }
  .tl-date { font-size: .94rem; white-space: normal; }
}

/* horizontal, once the card is wide enough for eight events side by side */
@container (min-width: 650px) {
  .prose .tl { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto 26px auto; margin-top: 26px; padding: 0 12px 6px; }
  .prose .tl-item { grid-row: 1 / span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); column-gap: 0; justify-items: center; padding: 0; }
  /* the line: each event draws its own piece, from the middle of the first to the middle of the last */
  .tl-item::before, .tl-item:last-child::before { display: block; position: static; grid-row: 2; grid-column: 1; align-self: center; justify-self: stretch; width: auto; height: 3px; border-radius: 3px; }
  .tl-item:first-child::before { margin-left: 50%; }
  .tl-item:last-child::before { margin-right: 50%; }
  .tl-item.is-now::before { background: linear-gradient(to right, var(--leaf) 50%, var(--line-strong) 50%); }
  .tl-item:has(+ .is-open)::before { background: linear-gradient(to right, var(--line-strong) 50%, transparent 50%), repeating-linear-gradient(to right, var(--line-strong) 0 4px, transparent 4px 8px); background-size: 100% 100%, 100% 100%; background-repeat: no-repeat; }
  .tl-item.is-open::before { background: repeating-linear-gradient(to right, var(--line-strong) 0 4px, transparent 4px 8px); }
  /* ring markers on the line, each with a short stem to its label and a small dot at the end */
  .tl-dot { grid-row: 2; grid-column: 1; align-self: center; width: 22px; height: 22px; margin: 0; border-width: 3px; background: var(--paper); }
  .tl-item.is-past .tl-dot { background: var(--paper); }
  .tl-item.is-now .tl-dot { background: var(--paper); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 8px var(--leaf-dark), 0 0 0 4px rgba(108, 192, 139, .25); }
  .tl-dot::before, .tl-dot::after { content: ""; position: absolute; left: 50%; background: currentColor; }
  .tl-dot::before { width: 2px; height: 13px; margin-left: -1px; }
  .tl-dot::after { width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; }
  .tl-item:nth-child(odd) .tl-dot::before { bottom: calc(100% + 1px); }
  .tl-item:nth-child(odd) .tl-dot::after { bottom: calc(100% + 12px); }
  .tl-item:nth-child(even) .tl-dot::before { top: calc(100% + 1px); }
  .tl-item:nth-child(even) .tl-dot::after { top: calc(100% + 12px); }
  /* the labels: wider than their column, centred on the marker, alternating above and below */
  .tl-card { display: block; width: 146px; text-align: center; }
  .tl-item:nth-child(odd) .tl-card { grid-row: 1; align-self: end; margin-bottom: 24px; }
  .tl-item:nth-child(even) .tl-card { grid-row: 3; align-self: start; margin-top: 24px; }
  .tl-date { display: block; text-align: center; font-size: 1.22rem; line-height: 1.15; color: var(--ink); white-space: nowrap; }
  .tl-item.is-past .tl-date { color: var(--ink-soft); }
  .prose .tl-text { margin-top: 4px; font-size: .86rem; line-height: 1.35; color: var(--ink-soft); }
  .tl-text b { display: block; font-size: .84rem; }
}

/* map: a still SVG (library/img/<slug>/europe-map.svg) with a small colour key under it */
.prose .map img { display: block; width: 100%; height: auto; margin-top: 14px; border-radius: 12px; }
.prose .map-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; padding: 0; font-size: .85rem; color: var(--ink-soft); }
.prose .map-key li { margin: 0; display: flex; align-items: center; gap: 8px; }
.map-key i { flex: none; width: 13px; height: 13px; border-radius: 4px; background: #6CC08B; }
.map-key i.k-join { background: #BFE3C9; }

/* bar chart: pairs of bars on a 0 to 100% scale, the "with" bar in green and the "without" bar in a soft sand */
.prose .bars-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.prose .bars-gl { margin: 0 0 8px; font-size: .92rem; font-weight: 700; color: var(--ink); }
.bar { display: grid; grid-template-columns: 136px minmax(0, 1fr) 54px; align-items: center; column-gap: 14px; margin-top: 8px; }
.bar-l { font-size: .9rem; line-height: 1.3; color: var(--ink-soft); }
.bar.is-with .bar-l { color: var(--ink); font-weight: 600; }
.bar-track { position: relative; height: 12px; border-radius: 999px; background: rgba(226, 210, 184, .38); overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: inherit; background: #D3C6AF; }
.bar.is-with .bar-fill { background: var(--leaf-dark); }
.bar-v { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-soft); }
.bar.is-with .bar-v { color: var(--ink); }
.prose .bars-src { margin-top: 9px; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 520px) {
  .prose .graphic { padding: 18px 16px 16px; }
  .bar { grid-template-columns: minmax(0, 1fr) 50px; row-gap: 4px; }
  .bar-l { grid-column: 1 / -1; }
}
.prose .post-pull { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.15; color: var(--logo-green); margin-top: 1.6em; text-wrap: balance; }
.prose .post-sources { margin-top: 3em; }
.prose .post-sources h2 { font-family: var(--font); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.post-sources ul { padding-left: 1.2em; font-size: .9rem; line-height: 1.6; }
.post-sources a { overflow-wrap: anywhere; }
/* sources in a click-to-open box (<details class="src">): closed by default, the whole header row toggles it */
.prose .post-sources:has(.src) { padding-top: 0; border-top: 0; }
.src { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.src summary { display: flex; align-items: center; gap: 12px; padding: 14px 2px; cursor: pointer; list-style: none; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.src summary::-webkit-details-marker { display: none; }
.prose .src summary h2 { margin: 0; font-family: var(--font); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
.src-n { font-size: .85rem; color: var(--ink-soft); }
.src-chev { width: 20px; height: 20px; margin-left: auto; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.src[open] .src-chev { transform: rotate(180deg); }
.src summary:hover h2, .src summary:hover .src-chev { color: var(--leaf-text); stroke: var(--leaf-text); }
.prose .src ul { margin: 0; padding: 2px 0 16px 1.2em; }
@media (prefers-reduced-motion: reduce) { .src-chev { transition: none; } }

/* phones and tablets: the rail becomes a bar under the header, with the section list dropping down from it */
@media (max-width: 1000px) {
  .post-long .post-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "hero" "toc" "body"; grid-template-rows: none; }
  .post-long .prose, .post-long .atoc { max-width: none; }
  .post-long [id] { scroll-margin-top: 76px; }
  .atoc, body.head-hidden .atoc { max-height: none; }
  .atoc { top: var(--head); z-index: 40; overflow: visible; margin: 0 calc(-1 * var(--gutter)) 24px; background: rgba(255, 253, 248, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
  body.head-hidden .atoc { top: 0; }
  .toc-toggle { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 12px var(--gutter); cursor: pointer; text-align: left; min-height: 52px; color: var(--ink); }
  .toc-now { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toc-toggle svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
  .atoc.open .toc-toggle svg { transform: rotate(180deg); }
  .toc-line { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
  .toc-line span { border-radius: 0 3px 3px 0; }
  .toc-panel { display: none; position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); max-height: min(70vh, 560px); overflow-y: auto; background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: 0 4px 0 var(--line-strong), 0 20px 40px rgba(91, 70, 54, .18); }
  .atoc.open .toc-panel { display: block; }
  .toc-panel .toc-h, .toc-map { display: none; }
  .toc-link { padding: 10px 0 10px 14px; font-size: 1rem; }
  .toc-left { margin-top: 10px; }
}

/* ===================== Rufus, in the corner of a long article (big screens only) ===================== */
.lib-rufus { position: fixed; right: 22px; bottom: 14px; z-index: 60; display: none; flex-direction: row-reverse; align-items: flex-end; gap: 4px; pointer-events: none; transition: transform .5s var(--ease), opacity .4s; }
@media (min-width: 1100px) and (min-height: 620px) { .lib-rufus { display: flex; } }
.lib-rufus > * { pointer-events: auto; }
.lib-rufus.away { transform: translateY(140%); opacity: 0; }
.lr-bun { position: relative; flex: none; width: 151px; height: 198px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 40%; }
.lr-bun svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
.lr-bun .ear { transform-box: fill-box; transform-origin: 50% 100%; animation: earTwitch 4.5s ease-in-out infinite; }
.lib-rufus.in .lr-bun svg { animation: lrIn .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.lr-bun.hop svg { animation: rhop .7s cubic-bezier(.3, 1.4, .5, 1) !important; }
@keyframes lrIn { 0% { transform: translate(70px, 0) scale(.9); opacity: 0; } 30% { opacity: 1; transform: translate(42px, -26px); } 55% { transform: translate(16px, 0) scale(1.06, .92); } 75% { transform: translate(4px, -10px); } 100% { transform: none; } }
.lr-say { position: relative; width: max-content; max-width: 250px; margin: 0 -42px 118px 0; background: var(--paper); color: var(--ink); border: 2px solid var(--line-strong); border-radius: 18px 18px 5px 18px; padding: 10px 14px; font-weight: 700; font-size: .95rem; line-height: 1.4; box-shadow: 0 4px 0 var(--line-strong); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.92); transform-origin: 100% 100%; transition: opacity .3s, transform .45s var(--back), visibility 0s .45s; }
.lib-rufus.talk .lr-say { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .45s var(--back), visibility 0s; }
.lr-x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.lib-rufus:hover .lr-x, .lr-x:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lib-rufus, .lr-say { transition: none; } .lib-rufus.in .lr-bun svg, .lr-bun.hop svg, .lr-bun .ear { animation: none !important; } }

/* ===================== share buttons (js/library.js fills each [data-share]) ===================== */
/* one colour throughout: the brand marks are drawn in the soft ink, and fill dark on hover */
.share-h { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--ink); margin: 0 0 10px; }
.share-row { display: flex; flex-wrap: wrap; gap: 7px; }
.share-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); cursor: pointer; text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s var(--back); }
.share-btn svg { width: 17px; height: 17px; fill: currentColor; overflow: visible; }
.share-ico { display: grid; place-items: center; line-height: 0; }
.share-btn svg.line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-btn:hover, .share-btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }
.share-note { min-height: 1.3em; margin-top: 8px; font-size: .82rem; font-weight: 600; color: var(--leaf-text); }
/* in the side rail: under the section links */
.share-rail { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.share-rail .share-row { gap: 6px; }
.share-rail .share-btn { width: 32px; height: 32px; }
.share-rail .share-btn svg { width: 15px; height: 15px; }
.share-note:empty { display: none; }
/* at the end of the article */
.prose .share-end { margin-top: 2.4em; padding: 20px 22px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 18px; }
/* "Share this article" (here and in the phone panel) is in Gabarito; the rail's "Share" stays serif to match "In this article" above it */
.share-end .share-h, .share-sheet .share-h { font-family: var(--font); font-weight: 700; letter-spacing: -.005em; }
.share-end .share-h { font-size: 1.1rem; margin-bottom: 14px; }
.share-end .share-btn { width: 42px; height: 42px; }
.share-end .share-btn svg { width: 19px; height: 19px; }
@media (max-width: 1000px) { .share-rail { display: none; } } /* phones: the rail is the section bar; the end-of-article box does the sharing */
@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } .share-btn:hover { transform: none; } }

/* the channel names only show in the phone panel */
.share-lbl { display: none; }

/* phones and tablets: a floating share button in the bottom-right corner, over the text, and the panel it opens */
.share-fab, .share-sheet { display: none; }
@media (max-width: 1000px) {
  .share-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(62, 58, 53, .16), 0 1px 3px rgba(62, 58, 53, .12); transition: transform .3s var(--ease), opacity .25s, background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
  .share-fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .share-fab > span { display: grid; place-items: center; }
  .share-fab .fab-close { display: none; }
  .share-fab.open { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .share-fab.open .fab-open { display: none; }
  .share-fab.open .fab-close { display: grid; }
  .share-fab.away { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; }

  .share-sheet:not([hidden]) { display: block; position: fixed; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 56; width: min(340px, calc(100vw - 32px)); background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; padding: 16px 14px 12px; box-shadow: 0 12px 34px rgba(62, 58, 53, .18), 0 2px 6px rgba(62, 58, 53, .08); transform-origin: 100% 100%; animation: sheetIn .22s var(--ease); }
  .share-sheet .share-h { font-size: 1.02rem; margin: 0 4px 12px; }
  .share-sheet .share-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }
  .share-sheet .share-btn { width: auto; height: auto; border: 0; background: none; border-radius: 14px; display: grid; justify-items: center; gap: 6px; padding: 6px 2px; color: var(--ink-soft); }
  /* the circle is its own element round the logo, so the logo keeps its size and never touches the edge */
  .share-sheet .share-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg); transition: background .15s, border-color .15s, color .15s; }
  .share-sheet .share-btn svg { width: 20px; height: 20px; flex: none; overflow: visible; }
  .share-sheet .share-btn:hover, .share-sheet .share-btn:focus-visible { background: var(--bg); color: var(--ink); transform: none; }
  .share-sheet .share-btn:active .share-ico { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  /* no blue tap flash on Android, and a quiet ink ring (not the site's blue one) for keyboard users */
  .share-sheet .share-btn, .share-fab { -webkit-tap-highlight-color: transparent; }
  .share-sheet .share-btn:focus { outline: none; box-shadow: none; }
  .share-sheet .share-btn:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 1px; box-shadow: none; border-radius: 14px; }
  .share-fab:focus:not(:focus-visible) { outline: none; box-shadow: 0 4px 14px rgba(62, 58, 53, .16), 0 1px 3px rgba(62, 58, 53, .12); }
  .share-sheet .share-lbl { display: block; font-size: .76rem; font-weight: 700; line-height: 1.2; color: var(--ink-soft); text-align: center; }
  .share-sheet .share-note { margin: 10px 4px 2px; }
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .share-fab { transition: none; } .share-sheet:not([hidden]) { animation: none; } }