/* Hanseatic Dossiers: reader styles, ported from the Hanseatic Radar's public view.
   Everything is prefixed hns- so it doesn't touch the theme or Beaver Builder. */

.hns-page, .hns-index, .hns-dossier, .hns-section, .hns-dossier-header, .hns-related {
	--hns-ink: #0a0a0a;
	--hns-muted: #666666;
	--hns-line: #dddddd;
	--hns-red: #cb1317;
	--hns-red-hover: #bf070b;
	--hns-link: #2b7bb9;
	--hns-grey: #efefef;
	--hns-blank: #dcdcdc;
	box-sizing: border-box;
}
.hns-page *, .hns-index *, .hns-dossier *, .hns-section *, .hns-dossier-header * { box-sizing: border-box; }

/* Built-in templates: width and margins as on thehanseatic.com (1,200px, 40px / 15px gutters). */
.hns-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 40px 56px; }
.hns-wrap-narrow { max-width: 800px; }
@media (max-width: 767px) { .hns-wrap { padding: 20px 15px 40px; } }

/* ---------- Index ---------- */
.hns-index-heading { margin: 0 0 10px; color: var(--hns-red); font: 500 16px/1.3 Helvetica, Arial, sans-serif; letter-spacing: 6px; text-transform: uppercase; }
.hns-index-intro { margin: 0 0 22px; color: var(--hns-ink); font: 300 16px/1.5 Helvetica, Arial, sans-serif; }
.hns-search { margin: 0 auto 26px; max-width: 840px; }
.hns-search-row { display: flex; gap: 10px; align-items: flex-start; }
.hns-search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; background: var(--hns-grey); color: var(--hns-ink); font: 400 16px/1 Helvetica, Arial, sans-serif; -webkit-appearance: none; appearance: none; }
.hns-search input[type="search"]:focus { outline: 2px solid var(--hns-red); outline-offset: 1px; }
.hns-filters { position: relative; flex: none; }
.hns-filters summary { list-style: none; cursor: pointer; height: 44px; display: flex; align-items: center; padding: 0 18px; border: 1px solid var(--hns-line); border-radius: 999px; background: #fff; color: var(--hns-ink); font: 500 14px/1 Helvetica, Arial, sans-serif; white-space: nowrap; }
.hns-filters summary::-webkit-details-marker { display: none; }
.hns-filters[open] summary { border-color: var(--hns-ink); }
.hns-filter-panel { position: absolute; right: 0; top: 52px; z-index: 20; display: grid; gap: 10px; width: 260px; padding: 14px; border: 1px solid var(--hns-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.hns-filter { display: grid; gap: 4px; }
.hns-filter span { color: var(--hns-muted); font: 500 10px/1.3 Helvetica, Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.hns-filter select { width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--hns-line); border-radius: 8px; background: #fff; font: 400 14px/1 Helvetica, Arial, sans-serif; }
.hns-filter-panel button { height: 36px; border: 0; border-radius: 999px; background: var(--hns-ink); color: #fff; font: 500 13px/1 Helvetica, Arial, sans-serif; cursor: pointer; }
.hns-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; justify-content: center; }
.hns-chip { padding: 5px 10px; border: 1px solid var(--hns-line); border-radius: 999px; color: var(--hns-red) !important; text-decoration: none !important; font: 400 12px/1.2 Helvetica, Arial, sans-serif; }
.hns-chip:hover { border-color: var(--hns-red); }
.hns-no-results { text-align: center; }

/* Cards: columns by the width of the card area, not the window. */
.hns-card-area { container: hnscards / inline-size; }
.hns-card-grid { display: grid; grid-template-columns: minmax(0, 400px); justify-content: center; gap: 12px; }
@container hnscards (min-width: 600px) { .hns-card-grid { grid-template-columns: repeat(2, minmax(0, 440px)); } }
@container hnscards (min-width: 1024px) { .hns-card-grid { grid-template-columns: repeat(3, minmax(0, 440px)); } }
@container hnscards (min-width: 1440px) { .hns-card-grid { grid-template-columns: repeat(4, minmax(0, 460px)); } }
.hns-card-wrap { display: flex; flex-direction: column; container-type: inline-size; min-width: 0; }

/* All card text and spacing are a proportion of the card's width (cqi), so every card has the same shape. */
.hns-card { position: relative; --pad: 6cqi; display: flex; flex-direction: column; width: 100%; border-radius: 40px; overflow: hidden; border: 1px solid var(--hns-grey); background: var(--hns-grey); padding: var(--pad); color: var(--hns-ink) !important; text-decoration: none !important; text-align: left; }
/* 0.14 (Kevin, 22 October 2026): the hover frame follows the card's own edges and rounded corners, drawn inside the
   card (no offset shadow, and no outline or border the theme gives links on hover), on phone and laptop alike. */
.hns-card, .hns-card:hover, .hns-card:focus, .hns-card:active { outline: none !important; text-decoration: none !important; }
.hns-card:hover, .hns-card:focus-visible { border-color: var(--hns-ink); box-shadow: inset 0 0 0 1px var(--hns-ink); }
.hns-card.closed:hover, .hns-card.closed:focus-visible { border-color: var(--hns-red); box-shadow: inset 0 0 0 2px var(--hns-red); }
.hns-card.sponsored:hover, .hns-card.sponsored:focus-visible { border-color: var(--hns-link); box-shadow: inset 0 0 0 2px var(--hns-link); }
.hns-card:focus-visible { outline: 2px solid var(--hns-red) !important; outline-offset: 2px; }
.hns-card-image { display: block; flex: none; width: calc(100% + 2 * var(--pad)) !important; max-width: none !important; height: auto !important; aspect-ratio: 16 / 9; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 4.7cqi; object-fit: cover; background: var(--hns-blank); border-radius: 0 !important; }
.hns-card-text { display: block; font-size: calc(5.333cqi * var(--u, 1)); height: calc(var(--tl, 2) * 1.375em + .875em + var(--dl, 5) * 1.2775em); overflow: hidden; flex: none; }
.hns-card-title { margin: 0 0 .625em; font-family: Helvetica, Arial, sans-serif; font-size: 1.25em; line-height: 1.1; font-weight: 700; color: var(--hns-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--tl, 2); overflow: hidden; }
.hns-card-desc { margin: 0; color: #333333; font-family: Georgia, 'Times New Roman', serif; font-size: .875em; line-height: 1.46; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--dl, 5); overflow: hidden; }
.hns-card.closed { border-color: var(--hns-red); box-shadow: inset 0 0 0 1px var(--hns-red); }
.hns-card.sponsored { border-color: var(--hns-link); box-shadow: inset 0 0 0 1px var(--hns-link); }
.hns-closed-mark { position: absolute; left: 0; right: 0; bottom: 2.6cqi; padding-left: .375em; text-align: center; color: var(--hns-red); font-family: Helvetica, Arial, sans-serif; font-size: calc(4cqi * var(--u, 1)); font-weight: 500; letter-spacing: .375em; text-transform: uppercase; line-height: 1; }
.hns-backer-mark { position: absolute; left: var(--pad); right: var(--pad); bottom: 2cqi; text-align: center; color: var(--hns-ink); font-family: Helvetica, Arial, sans-serif; font-size: calc(3.4cqi * var(--u, 1)); font-weight: 500; letter-spacing: .02em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hns-backer-mark.sponsored { color: var(--hns-link); }

/* Editors only, above each card: a fixed single line so cards always line up. */
.hns-card-labels { display: flex; flex-wrap: nowrap; gap: 5px; align-items: center; height: 30px; padding: 0 4px 6px 12px; overflow: hidden; }
.hns-pill { flex: none; white-space: nowrap; border-radius: 40px; padding: 2px 8px; font: 400 10.5px/1.4 Helvetica, Arial, sans-serif; border: 1px solid #dddddd; color: #666666 !important; background: #fff; text-decoration: none !important; }
.hns-pill.published { border-color: #0a0a0a; color: #0a0a0a !important; }
.hns-pill.client { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hns-pill.edit { margin-left: auto; }
.hns-pill.edit:hover { border-color: var(--hns-ink); color: var(--hns-ink) !important; }

/* ---------- Dossier page ---------- */
.hns-kicker { margin: 0 0 8px; font: 500 14px/1.3 Helvetica, Arial, sans-serif; letter-spacing: 4px; text-transform: uppercase; }
.hns-kicker a { color: var(--hns-red) !important; text-decoration: none !important; }
.hns-dossier-title { margin: 0 0 6px; color: var(--hns-ink); font: 700 34px/1.12 Helvetica, Arial, sans-serif; }
@media (max-width: 600px) { .hns-dossier-title { font-size: 28px; } }
.hns-standfirst { margin: 16px 0 28px; color: var(--hns-ink); font: 400 18px/1.42 Georgia, 'Times New Roman', serif; }
.hns-cover-sheet { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 18px; padding: 10px 0; border-top: 1px solid var(--hns-ink); border-bottom: 1px solid var(--hns-line); }
.hns-cover-sheet div { margin: 0; }
.hns-cover-sheet dt { margin: 0; color: var(--hns-red); font: 500 10px/1.3 Helvetica, Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.hns-cover-sheet dd { margin: 2px 0 0; color: var(--hns-ink); font: 400 13px/1.35 Helvetica, Arial, sans-serif; }
.hns-contents { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 26px; }
.hns-contents a { padding: 2px 0; color: var(--hns-ink) !important; text-decoration: none !important; font: 400 13px/1.4 Helvetica, Arial, sans-serif; }
.hns-contents a span { color: var(--hns-red); font-weight: 500; margin-right: 5px; font-variant-numeric: tabular-nums; }
.hns-contents a:hover { color: var(--hns-link) !important; }
.hns-contents a.is-empty, .hns-contents a.is-empty span { color: var(--hns-muted) !important; }
.hns-lead-image { margin: 0 auto 28px; max-width: 480px; }
.hns-lead-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 40px; background: var(--hns-blank); }
.hns-lead-image figcaption { margin-top: 6.5px; text-align: center; color: #555555; font: 400 13px/1.45 Georgia, 'Times New Roman', serif; }

.hns-section { padding: 20px 0; border-top: 1px solid var(--hns-line); scroll-margin-top: 16px; }
.hns-section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; color: var(--hns-ink); font: 700 20px/1.25 Helvetica, Arial, sans-serif; }
.hns-sec-no { color: var(--hns-red); font: 500 13px/1 Helvetica, Arial, sans-serif; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.hns-section.is-empty .hns-section-title, .hns-section.is-empty .hns-sec-no { color: var(--hns-muted); }
.hns-section > p.hns-subhead, .hns-subhead { margin: -4px 0 14px; color: var(--hns-muted); font: italic 400 15px/1.4 Georgia, serif; }
.hns-section p, .hns-section li { overflow-wrap: anywhere; }
.hns-section > p, .hns-latest p, .hns-read-more p { margin: 0 0 10px; color: var(--hns-ink); font: 400 15px/1.6 Georgia, 'Times New Roman', serif; }
.hns-section p.hns-empty, .hns-empty { color: var(--hns-muted); font: 400 13px/1.5 Helvetica, Arial, sans-serif; }
.hns-latest-meta { margin: 0 0 2px !important; color: var(--hns-muted) !important; font: 400 12px/1.4 Helvetica, Arial, sans-serif !important; }
.hns-latest-title { margin: 0 0 10px; font: 700 17px/1.3 Helvetica, Arial, sans-serif; }
.hns-latest-title a { color: var(--hns-ink) !important; text-decoration: none !important; }
.hns-latest-title a:hover { color: var(--hns-link) !important; }
.hns-read-more summary, .hns-show-all summary { cursor: pointer; list-style: none; color: var(--hns-red); font: 700 13px/1.4 Helvetica, Arial, sans-serif; text-transform: uppercase; margin: 2px 0 10px; }
.hns-read-more summary::-webkit-details-marker, .hns-show-all summary::-webkit-details-marker { display: none; }
.hns-read-more[open] > summary { display: none; }
.hns-show-all[open] > summary { display: none; }
.hns-show-all summary { text-transform: none; font-weight: 500; margin-top: 8px; }
.hns-disclaimer { margin: 14px 0 0 !important; color: var(--hns-muted) !important; font: italic 400 12px/1.5 Georgia, 'Times New Roman', serif !important; }
.hns-list-label { margin: 18px 0 2px !important; padding-bottom: 6px; border-bottom: 1px solid var(--hns-ink); color: var(--hns-ink) !important; font: 700 12px/1.3 Helvetica, Arial, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; }
.hns-all-link { margin: 10px 0 0 !important; font: 500 13px/1.4 Helvetica, Arial, sans-serif !important; }
.hns-all-link a { color: var(--hns-link) !important; }

.hns-ki-list, .hns-compact-list, .hns-record-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.hns-ki-list li { position: relative; margin: 0; padding: 6px 0 6px 18px; color: var(--hns-ink); font: 400 15px/1.5 Georgia, 'Times New Roman', serif; list-style: none; }
.hns-ki-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--hns-red); }
.hns-compact-list li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--hns-line); list-style: none; }
.hns-compact-list .hns-cl-main { display: block; color: var(--hns-ink); font: 400 15px/1.4 Georgia, 'Times New Roman', serif; }
.hns-compact-list .hns-cl-main a { color: var(--hns-link) !important; font-weight: 600; text-decoration: none; }
.hns-compact-list .hns-cl-main a:hover { text-decoration: underline; }
.hns-compact-list .hns-cl-sub { display: block; margin-top: 2px; color: var(--hns-muted); font: 400 13px/1.4 Helvetica, Arial, sans-serif; }
.hns-record-list li { display: grid; grid-template-columns: 58px 1fr; gap: 0 8px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hns-line); list-style: none; }
.hns-record-list .hns-rec-date { color: var(--hns-muted); font: 400 11px/1.35 Helvetica, Arial, sans-serif; text-align: right; font-variant-numeric: tabular-nums; padding-top: 2px; }
.hns-record-list .hns-rec-date span { display: block; }
.hns-record-list .hns-rec-body { min-width: 0; }
.hns-record-list .hns-rec-body a, .hns-record-list .hns-rec-title { color: var(--hns-link) !important; font: 600 16px/1.35 Georgia, 'Times New Roman', serif; text-decoration: none; }
.hns-record-list .hns-rec-body a:hover { text-decoration: underline; }
.hns-record-list .hns-source-name { display: block; margin-bottom: 3px; color: var(--hns-muted); font: 400 12px/1.4 Helvetica, Arial, sans-serif; }
.hns-record-list .hns-rec-body p { margin: 6px 0 0; font: 400 14px/1.5 Georgia, 'Times New Roman', serif; color: var(--hns-ink); }
.hns-compact-list li:last-child, .hns-record-list li:last-child { border-bottom: 0; }

.hns-related { padding: 20px 0 0; border-top: 1px solid var(--hns-line); }
.hns-related h3 { margin: 0 0 10px; color: var(--hns-ink); font: 700 13px/1.3 Helvetica, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hns-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hns-tags a { padding: 6px 10px; border: 1px solid var(--hns-line); border-radius: 999px; background: #fff; color: var(--hns-red) !important; font: 400 11px/1.2 Helvetica, Arial, sans-serif; text-decoration: none !important; }
.hns-tags a:hover { border-color: var(--hns-red); background: var(--hns-red); color: #fff !important; }
.hns-password { margin: 10px 0 30px; padding: 18px 20px; border-radius: 20px; background: var(--hns-grey, #efefef); font: 400 15px/1.5 Georgia, 'Times New Roman', serif; }
.hns-password input[type="password"] { height: 38px; padding: 0 12px; border: 1px solid #ddd; border-radius: 999px; }
.hns-password input[type="submit"] { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #0a0a0a; color: #fff; cursor: pointer; }

/* Picture under the headline (0.5.2) */
.hns-dossier-header .hns-lead-image { margin-top: 18px; }
/* Contents line: one line to swipe on phones */
@media (max-width: 600px) {
	.hns-contents { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px 18px; padding-bottom: 4px; mask-image: linear-gradient(to right, #000 85%, transparent); -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); }
	.hns-contents::-webkit-scrollbar { display: none; }
	.hns-contents a { flex: none; white-space: nowrap; }
}
/* 0.6: Visualisation section */
.hns-viz-list { display: grid; gap: 24px; }
.hns-viz { margin: 0; }
.hns-viz-img { display: block; width: 100%; height: auto; border-radius: 12px; }
.hns-viz figcaption { margin-top: 8px; font: 15px/1.4 Georgia, 'Times New Roman', serif; }
.hns-viz-date { color: #666; margin-right: 6px; }
/* 0.7: links that open in a new tab */
/* 0.9: the new-tab mark is an outline arrow-out-of-a-box (inline SVG). Size and colour are set here only. */
.hns-newtab { display: inline-block; margin-left: .25em; width: .7em; height: .7em; color: #9a9a9a !important; line-height: 0; text-decoration: none; vertical-align: .02em; }
.hns-newtab svg { display: block; width: 100%; height: 100%; }
a:hover .hns-newtab { color: #6f6f6f !important; }
.hns-newtab + .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 0.9: kickers (second headlines) in From The Hanseatic */
.hns-record-list .hns-rec-kicker { display: block; margin-bottom: 3px; color: var(--hns-red); font: 500 11px/1.35 Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
/* 0.9: draft visualisations in the preview (editors only) */
.hns-viz.is-draft .hns-viz-img { opacity: .75; outline: 2px dashed #c9a227; outline-offset: 3px; }
.hns-draft-mark { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 9px; background: #fcf0d4; color: #7a5200; font: 500 11px/1.5 Helvetica, Arial, sans-serif; vertical-align: .1em; }
/* 0.9: Ask this dossier (the reader chat), under the standfirst */
.hns-ask { --hns-ink: #0a0a0a; --hns-muted: #666666; --hns-line: #dddddd; --hns-red: #cb1317; --hns-link: #2b7bb9; --hns-grey: #efefef; box-sizing: border-box; margin: 18px 0 22px; }
.hns-ask * { box-sizing: border-box; }
.hns-ask-label { display: block; margin: 0 0 8px; color: var(--hns-ink); font: 700 13px/1.3 Helvetica, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hns-ask-row { display: flex; gap: 8px; }
.hns-ask-q { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: 999px; background: var(--hns-grey); color: var(--hns-ink); font: 400 16px/1 Helvetica, Arial, sans-serif; -webkit-appearance: none; appearance: none; }
.hns-ask-q:focus { outline: 2px solid var(--hns-red); outline-offset: 1px; }
.hns-ask-go { flex: none; height: 44px; padding: 0 20px; border: 0 !important; border-radius: 999px !important; background: var(--hns-ink) !important; color: #fff !important; font: 500 15px/1 Helvetica, Arial, sans-serif; cursor: pointer; }
.hns-ask-go:hover, .hns-ask-go:focus { background: var(--hns-red) !important; }
.hns-ask-go:disabled, .hns-ask-q:disabled { opacity: .6; cursor: default; }
.hns-ask-note { margin: 8px 2px 0; color: var(--hns-muted); font: 400 12px/1.45 Helvetica, Arial, sans-serif; }
.hns-ask-log:empty { display: none; }
.hns-ask-log { margin-top: 14px; }
.hns-ask-turn { padding: 14px 0; border-top: 1px solid var(--hns-line); }
.hns-ask-question { margin: 0 0 6px; color: var(--hns-ink); font: 600 15px/1.4 Helvetica, Arial, sans-serif; }
.hns-ask-answer, .hns-ask-answer p, .hns-ask-answer li { color: var(--hns-ink); font: 400 16px/1.55 Georgia, 'Times New Roman', serif; }
.hns-ask-answer p { margin: 0 0 10px; }
.hns-ask-answer ul { margin: 0 0 10px 1.1em; padding: 0; }
.hns-ask-answer a { color: var(--hns-link) !important; text-decoration: none; white-space: nowrap; }
.hns-ask-answer a:hover { text-decoration: underline; }
.hns-ask-wait, .hns-ask-msg { margin: 0; color: var(--hns-muted); font: italic 400 15px/1.5 Georgia, 'Times New Roman', serif; }
.hns-ask-small { margin: 4px 0 0; color: var(--hns-muted); font: 400 12px/1.4 Helvetica, Arial, sans-serif; }
@media (max-width: 480px) { .hns-ask-go { padding: 0 16px; } }

/* 0.10: numbered references and their sources under a chat answer; further reading; the conversation */
.hns-ask-answer sup.hns-ref { font: 600 11px/1 Helvetica, Arial, sans-serif; vertical-align: super; margin-left: 1px; }
.hns-ask-answer sup.hns-ref a { color: var(--hns-link) !important; white-space: nowrap; }
.hns-ask-answer .hns-sources, .hns-ask-answer .hns-further { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--hns-line); }
.hns-ask-answer .hns-sources-head { margin: 0 0 4px !important; color: var(--hns-muted); font: 700 11px/1.3 Helvetica, Arial, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; }
.hns-ask-answer .hns-sources ol, .hns-ask-answer .hns-further ul { margin: 0 0 0 1.4em; padding: 0; }
.hns-ask-answer .hns-sources li, .hns-ask-answer .hns-further li { margin: 0 0 3px; color: var(--hns-ink); font: 400 13px/1.45 Helvetica, Arial, sans-serif !important; }
.hns-ask-answer .hns-sources a, .hns-ask-answer .hns-further a { white-space: normal; }
.hns-ask-skipped { margin: 6px 0 0 !important; color: var(--hns-muted); font: 400 12px/1.4 Helvetica, Arial, sans-serif !important; }
.hns-ask-editors { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #dba617; background: #fcf9e8; color: #3c434a; font: 400 12px/1.45 Helvetica, Arial, sans-serif; }
.hns-ask-newrow { margin: 6px 0 0; }
.hns-ask-new { padding: 0; border: 0 !important; background: none !important; color: var(--hns-link) !important; font: 500 13px/1.4 Helvetica, Arial, sans-serif; cursor: pointer; text-decoration: underline; }

/* 0.10: the visualisation itself in its section */
.hns-viz-title { margin: 0 0 8px; font: 700 18px/1.3 Helvetica, Arial, sans-serif; color: #0a0a0a; }
.hns-viz-body { max-width: 100%; overflow-x: auto; }
.hns-viz-body img, .hns-viz-body svg, .hns-viz-body video, .hns-viz-body canvas { max-width: 100%; height: auto; }
.hns-viz-body iframe { max-width: 100%; border: 0; }
.hns-viz-body p { font: 400 16px/1.55 Georgia, 'Times New Roman', serif; }
.hns-viz-body figure { margin: 0 0 10px; }

/* 0.11: Copy link under a visualisation (shares the dossier's Visualisation section) */
.hns-copy-link { color: var(--hns-link, #2b7bb9) !important; font: 500 13px/1.4 Helvetica, Arial, sans-serif; text-decoration: none !important; }
.hns-copy-link::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .3em; vertical-align: -.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 9.5l3-3M7 4.5l1.2-1.2a2.8 2.8 0 014 4L11 8.5M9 11.5l-1.2 1.2a2.8 2.8 0 01-4-4L5 7.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 9.5l3-3M7 4.5l1.2-1.2a2.8 2.8 0 014 4L11 8.5M9 11.5l-1.2 1.2a2.8 2.8 0 01-4-4L5 7.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hns-copy-link:hover { text-decoration: underline !important; }
.hns-copy-link.is-done { color: #0a7a2f !important; }
/* 0.11: drafts in the preview (editors and Dossier viewers): briefings and digests too */
.hns-latest-title .hns-draft-mark, .hns-rec-body .hns-draft-mark { font-weight: 500; }

/* 0.11: the reader chat as a conversation that reads downwards (Kevin, 21 October 2026) */
.hns-ask-form.is-followup { margin-top: 12px; }
.hns-ask-form.is-followup .hns-ask-row { position: relative; }
.hns-ask-form.is-followup .hns-ask-q { padding-right: 56px; }
.hns-ask-form.is-followup .hns-ask-go { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50% !important; }
.hns-ask-go svg { display: block; }
/* Reference numbers: small round badges leading to the Sources list */
.hns-ask-answer sup.hns-ref { vertical-align: .25em; line-height: 0; margin-left: 1px; }
.hns-ask-answer sup.hns-ref a { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin: 0 1px; padding: 0 4px; border-radius: 999px; background: var(--hns-grey); color: var(--hns-ink) !important; font: 600 10px/1 Helvetica, Arial, sans-serif; text-decoration: none !important; }
.hns-ask-answer sup.hns-ref a:hover, .hns-ask-answer sup.hns-ref a:focus { background: var(--hns-red); color: #fff !important; }
.hns-ask-answer .hns-sources li:target { background: #fcf0d4; }
/* Show less / Show earlier questions */
.hns-ask-fold { display: block; margin: 0 0 6px; padding: 0; border: 0 !important; background: none !important; color: var(--hns-link) !important; font: 500 13px/1.4 Helvetica, Arial, sans-serif; cursor: pointer; text-decoration: underline; }
.hns-ask.is-folded .hns-ask-turn.is-earlier { display: none; }
/* Copy under each answer */
.hns-ask-foot { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.hns-ask-foot .hns-ask-small { margin: 0; }
.hns-ask-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--hns-line) !important; border-radius: 50% !important; background: #fff !important; color: var(--hns-muted) !important; cursor: pointer; }
.hns-ask-copy:hover, .hns-ask-copy:focus { border-color: var(--hns-ink) !important; color: var(--hns-ink) !important; }
.hns-ask-copy.is-done { border-color: #0a7a2f !important; color: #0a7a2f !important; }
.hns-ask-copied { color: #0a7a2f; font: 400 12px/1.4 Helvetica, Arial, sans-serif; }
/* New conversation, Save conversation */
.hns-ask-newrow { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 8px 0 0; }
.hns-ask-savewrap { position: relative; display: inline-flex; gap: 8px; align-items: center; }
.hns-ask-save, .hns-ask-savemenu button { padding: 0; border: 0 !important; background: none !important; color: var(--hns-link) !important; font: 500 13px/1.4 Helvetica, Arial, sans-serif; cursor: pointer; text-decoration: underline; }
.hns-ask-savemenu { display: inline-flex; gap: 10px; padding-left: 10px; border-left: 1px solid var(--hns-line); }
.hns-ask-savemenu[hidden] { display: none; }
@media print { .hns-ask-form, .hns-ask-newrow, .hns-ask-copy, .hns-ask-fold { display: none !important; } }

/* 0.12: Preview | Reader view, for editors and viewers only (readers never see it) */
.hns-viewbar { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: #0a0a0a; color: #fff; font: 400 12px/1.4 Helvetica, Arial, sans-serif; }
.hns-viewbar-label { color: #ff5a5e; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; font-size: 10px; }
.hns-viewbar a { color: #ccc !important; text-decoration: none !important; padding: 2px 10px; border: 1px solid #555; border-radius: 999px; }
.hns-viewbar a.is-on { color: #0a0a0a !important; background: #fff; border-color: #fff; }
.hns-viewbar-note { color: #bbb; flex: 1 1 200px; }
@media print { .hns-viewbar { display: none !important; } }
/* 0.12: "From The Hanseatic" under a reader chat answer */
.hns-ask-answer .hns-further a { color: var(--hns-link) !important; }

/* 0.13 (Kevin, 22 October 2026, an iPhone): iPhones zoom in on a field whose text is under 16 pixels, and the theme's
   own field styles were winning over the plugin's 16; the page then stayed zoomed, the site's floating menu with it. */
.hns-ask input.hns-ask-q, .hns-ask .hns-ask-form input.hns-ask-q { font-size: 16px !important; line-height: normal !important; }

/* 0.13.2: under a background post, the way into its dossier */
.hns-to-dossier { margin: 28px 0 0; padding: 12px 16px; border-left: 3px solid #cb1317; background: #efefef; color: #0a0a0a; font: 400 15px/1.5 Helvetica, Arial, sans-serif; }
.hns-to-dossier a { color: #2b7bb9; font-weight: 600; }

/* 0.14: the main slot in Background, Briefings and Digests: date and headline, standfirst, the post's picture
   (0.14.1: under the standfirst), then two paragraphs and Read more; Read less folds it again (in the same style as Read more). */
.hns-latest-figure { margin: 4px 0 14px; } /* 0.14.1: between the standfirst and the paragraphs */
.hns-latest-figure { display: table; max-width: 100%; margin-left: auto !important; margin-right: auto !important; } /* 0.14.1: the picture centred, its caption as wide as it */
.hns-latest-figure figcaption { display: table-caption; caption-side: bottom; margin-top: 6.5px; text-align: center; color: #555555; font: 400 13px/1.45 Georgia, 'Times New Roman', serif; } /* 0.14.1: caption (post) and credit (picture), centred like the dossier's own picture */
.hns-latest-img { display: block; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 480px; border-radius: 12px; background: var(--hns-blank, #dcdcdc); }
.hns-latest.is-draft .hns-latest-img { opacity: .8; outline: 2px dashed #c9a227; outline-offset: 3px; }
/* 0.14.1 (Kevin, 22 October 2026): the standfirst in the same font and size as the text under it (.hns-latest p). */
.hns-read-less { display: block; margin: 2px 0 10px; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; cursor: pointer; color: var(--hns-red) !important; font: 700 13px/1.4 Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: normal; }
.hns-read-less[hidden] { display: none; }
.hns-read-less:hover, .hns-read-more summary:hover { color: var(--hns-red-hover, #bf070b) !important; }

/* 0.15 (Kevin, 26 October 2026): one header for the posts in Background, Briefings, Visualisation and Digests: the date
   with a small Share link beside it, then the headline (digests: the second headline first, as a kicker). The
   visualisation's headline in the same style as the others; its date and Share above the graphic, not under it. */
.hns-latest-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.hns-latest-meta .hns-share { font-size: 12px; line-height: 1.4; }
.hns-latest-kicker { display: block; margin-bottom: 3px; color: var(--hns-red, #cb1317); font: 500 11px/1.35 Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.hns-latest-title .hns-draft-mark { margin-bottom: 2px; }
.hns-viz.hns-latest { margin: 0; }
.hns-viz-intro { margin: 0 0 10px; }
.hns-viz-intro p { margin: 0 0 10px; color: var(--hns-ink, #0a0a0a); font: 400 15px/1.6 Georgia, 'Times New Roman', serif; }
.hns-viz-code { max-width: 100%; overflow-x: auto; margin: 0 0 10px; }
.hns-viz.is-draft .hns-viz-code { opacity: .85; outline: 2px dashed #c9a227; outline-offset: 3px; }
/* 0.15: the boilerplate at the end of each post (replaces the fixed disclaimers under posts) */
.hns-boilerplate { margin: 12px 0 0; }
.hns-boilerplate p, .hns-section .hns-boilerplate p { margin: 0 0 2px !important; color: var(--hns-muted, #666666) !important; font: italic 400 12px/1.5 Georgia, 'Times New Roman', serif !important; }
.hns-boilerplate a { color: var(--hns-link, #2b7bb9) !important; text-decoration: none; }
.hns-boilerplate a:hover { text-decoration: underline; }