@font-face {
  font-family: "Jean Carnet Essai";
  src: url("/css/fonts/jean-carnet-essai.woff2?v=0.400") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00AB, U+00B0, U+00BB, U+00C0,
    U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6,
    U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB,
    U+00EE-00EF, U+00F4, U+00F6, U+00F9, U+00FB-00FC, U+00FF,
    U+0131, U+0152-0153, U+0178, U+0300-0302, U+0308, U+0327,
    U+2009, U+2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026,
    U+202F, U+20AC;
}
.jean-story, .jean-chronology { --story-ink: #275f68; --story-muted: #59646a; --story-history: #806345; }
.jean-story a:focus-visible, .jean-story summary:focus-visible, .jean-chronology a:focus-visible, .jean-chronology summary:focus-visible { outline: 3px solid var(--story-ink); outline-offset: 4px; }
.story-intro, .story-outro { max-width: 42rem; padding-block: 3rem; }
.story-intro h1 { font-family: "Jean Carnet Essai", Georgia, serif; font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 1.5rem; }
.jean-story .story-intro { max-width: none; }
.story-title-text { white-space: nowrap; }
@media (max-width: 600px) {
  .jean-story .story-intro h1 { font-size: clamp(1.5rem, 7vw, 2.5rem); }
}
.story-title-dates { font-size: .55em; white-space: nowrap; }
/* Same decorative bird as the notebook title; keep the heading as text. */
.jean-story .story-intro h1::after {
  display: inline-block;
  width: 1.3em;
  height: .8em;
  margin-left: .25em;
  vertical-align: -.05em;
  content: "";
  background: currentColor;
  -webkit-mask: url("/img/carnet-rossignol.svg") center / contain no-repeat;
  mask: url("/img/carnet-rossignol.svg") center / contain no-repeat;
}
.story-eyebrow, .story-date { color: var(--story-ink); font-size: .9rem; letter-spacing: .04em; }
.story-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.story-map-panel { display: flex; flex-direction: column; position: sticky; top: 1rem; height: calc(100svh - 2rem); min-height: 350px; }
/* Only the SVG frame is painted; letterboxing belongs to the page, not the sea. */
#story-map { flex: 1 1 auto; min-height: 160px; }
.story-map-heading { flex: 0 0 auto; }
.story-drawing { display: block; width: 100%; height: 100%; font-family: inherit; }
.map-sea { fill: #dfecee; }
.map-land { fill: #f6f3eb; stroke: #b2b4a3; stroke-width: 1.8; stroke-linejoin: round; }
.map-land-deu { fill: #e9ecdf; }
.map-land-bel, .map-land-lux, .map-land-cze { fill: #ede7da; }
.map-border { fill: none; stroke: #9ca38e; stroke-width: 1.5; stroke-linejoin: round; }
.map-control { pointer-events: none; }
.map-control > g { display: none; }
.map-control > .is-current { display: inline; }
.map-control-german { fill: #d9b589; stroke: none; }
.map-control-allied { fill: #b4c998; stroke: none; }
.map-control-gain { stroke: #6b8050; stroke-width: 2; stroke-dasharray: 5 5; stroke-linejoin: round; }
.map-control-pocket { stroke: #96714e; stroke-width: 1.5; }
.map-control-undetailed { fill: url(#campaign-undetailed); stroke: none; }
.map-campaign-cities > g { display: none; }
.map-campaign-cities > .is-seen { display: inline; }
.map-campaign-cities path { fill: #566b3d; stroke: #fffdf7; stroke-width: 1.5; }
.map-campaign-cities text { fill: #465436; font-size: 24px; paint-order: stroke; stroke: #f6f3eb; stroke-width: 4; stroke-linejoin: round; }
.map-campaign-cities .is-recent text { font-weight: 700; }
.is-tracking .map-places a:not(.is-label-seen):not(.is-current) { display: none; }
/* A military city name may precede Jean’s visit, but not his journey marker. */
.is-tracking .map-places a:not(.is-place-seen):not(.is-current) circle,
.is-tracking .map-places a:not(.is-place-seen):not(.is-current) .map-label-leader { display: none; }
.is-campaign-visible .map-history text { visibility: hidden; }
.is-campaign-visible .map-history-advance { opacity: .3; }
.is-tracking:not(.is-campaign-visible) .story-campaign-caption { display: none; }
.map-river { fill: none; stroke: #7bafb8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.map-country { fill: #747968; font-size: 20px; letter-spacing: 3px; paint-order: stroke; stroke: #f6f3eb; stroke-width: 3; }
.map-water { fill: #687e82; font-size: 21px; font-style: italic; }
.map-river-name { font-size: 17px; paint-order: stroke; stroke: #f6f3eb; stroke-width: 2; }
.map-history-offscreen line, .map-history-offscreen path { fill: none; stroke: #9a7048; stroke-width: 2; }
.map-history-offscreen text { fill: #806345; font-size: 16px; font-style: italic; }
.map-military { pointer-events: none; opacity: .55; }
.map-military > g { visibility: hidden; }
.map-military > .is-current { visibility: visible; }
.map-military path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.map-military .map-military-halo { stroke: #fffdf7; stroke-width: 8; }
.map-military-german { stroke: #9b4835; stroke-dasharray: 12 7; }
.map-military-allied { stroke: #4c662c; }
.story-military-controls:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; font-size: .7rem; }
.story-military-controls label { margin: 0; font-size: inherit; }
.story-military-controls input { width: .85rem; height: .85rem; margin-inline-end: .25rem; }
.story-route-legend, .story-military-legend { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.story-route-legend-row { display: flex; flex-wrap: nowrap; align-items: center; gap: .7rem; margin-bottom: .6rem; overflow-x: auto; }
.story-route-legend-row .story-legend-heading { margin: 0; white-space: nowrap; }
/* Override Pico's .pico aside ul/li block layout and navigation padding. */
.jean-story aside ul.story-route-legend { display: flex; flex-wrap: nowrap; flex: 0 0 auto; list-style: none; padding: 0; margin: 0; font-size: .7rem; }
.jean-story aside .story-route-legend li { display: inline-flex; white-space: nowrap; padding: 0; }
.story-route-legend li, .story-military-legend > span { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.story-route-legend svg, .story-military-legend svg { width: 1.2rem; height: .8rem; flex: 0 0 auto; }
.story-map-caption .story-legend-heading { font-size: .75rem; font-weight: 600; margin-bottom: .2rem; }
.story-map-caption .story-military-legend { font-size: .75rem; }
.story-map-help { margin: .5rem 0 0; font-size: .75rem; }
.story-map-help summary { font-size: inherit; }
.story-map-help p:first-of-type { margin-top: .75rem; }
.story-map-credit { display: block; margin-top: .25rem; font-size: .55rem; color: var(--story-muted); }
.story-map-credit a { color: inherit; }
.story-military-location { color: var(--story-muted); }
.story-military-location:empty { display: none; }
.map-route { fill: none; stroke: #d5d8d0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.is-tracking .map-route:not(.is-revealed) { display: none; }
.map-route.is-revealed { stroke: #275f68; stroke-width: 4; }
.map-places a { fill: #394b4c; text-decoration: none; }
.map-label-leader { stroke: #627577; stroke-width: 1; }
.map-places circle { fill: #f6f3eb; stroke: #627577; stroke-width: 2; }
.map-places text { font-size: 26px; paint-order: stroke; stroke: #f6f3eb; stroke-width: 5; stroke-linejoin: round; }
.map-places .is-current circle { fill: #275f68; stroke: #275f68; stroke-width: 3; }
.map-places .is-current text { fill: #214f57; font-weight: 700; }
.map-places a:hover circle, .map-places a:focus-visible circle { stroke: #a36c3c; stroke-width: 6; }
.map-history > [data-history-place] { visibility: hidden; opacity: 0; transition: opacity .2s ease; }
.map-history > .is-history-old, .map-history > .is-history-latest { visibility: visible; opacity: .16; }
.map-history > .is-history-previous { visibility: visible; opacity: .45; }
.map-history > .is-current { visibility: visible; opacity: 1; }
.map-history-symbol { filter: drop-shadow(0 0 2px #f6f3eb); }
.map-history-symbol path { fill: #b37a3e; stroke: #68401f; stroke-width: 3; stroke-linejoin: round; }
.map-history-symbol .map-history-advance { fill: #b37a3e; stroke-linecap: round; }
.map-history-symbol .map-history-bombing { fill: #b54528; stroke: #692515; stroke-width: 3.5; transform: scale(1.2); }
.map-history text { fill: #806345; font-size: 26px; }
.story-map-heading { padding: 0 0 1rem; }
.story-map-heading p { margin: 0; }
.story-map-date { color: var(--story-ink); font-size: 1.1rem; font-weight: 700; }
#story-location { font-size: 1.35rem; }
.story-map-caption { flex: 0 1 auto; max-height: 45%; overflow-y: auto; padding: .75rem .25rem .75rem 0; }
.story-map-caption:focus-visible { outline: 2px solid var(--story-ink); outline-offset: 2px; }
.story-map-caption p { margin-bottom: .4rem; font-size: .85rem; }
.story-history-location { color: var(--story-history); min-height: 2.8em; }
#story-progress { float: right; margin-inline-start: 1rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--story-muted); }
.story-step { min-height: 85svh; display: flex; align-items: center; margin: 0; padding-block: 2rem; scroll-margin-top: 1rem; }
.story-text { width: 100%; max-width: 29rem; padding: 1.5rem 0; }
.story-text h2 { margin-bottom: 1rem; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.story-date { margin-bottom: .8rem; }
.story-summary { font-size: .95rem; }
.story-quote { margin: 1.8rem 0; padding: 0; border: none; }
/* Dim headings separately: a dimmed ancestor would also dim active quotations
   and historical blocks, even when their own opacity is 1. */
.jean-story.is-tracking .story-step .story-text > :is(.story-date, h2, .story-summary),
.jean-story.is-tracking .story-step .story-evidence > p { transition: opacity .2s ease; }
.jean-story.is-tracking .story-step:not(.is-current) .story-text > :is(.story-date, h2, .story-summary),
.jean-story.is-tracking .story-step:not(.is-current) .story-evidence > p { opacity: .35; }
.jean-story.is-tracking [data-reading-date]:not(.is-current) { opacity: .35; transition: opacity .2s ease; }
.jean-story.is-tracking [data-reading-date].is-current { opacity: 1; transition: opacity .2s ease; }
.jean-story.is-tracking .story-history:not(.is-current) { opacity: .35; transition: opacity .2s ease; }
.jean-story.is-tracking .story-history.is-current { opacity: 1; transition: opacity .2s ease; }
.story-quote > p, .story-evidence blockquote > p {
  font-family: "Jean Carnet Essai", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-feature-settings: "calt" 1, "kern" 1;
}
.story-quote > p a, .story-evidence blockquote > p a { color: inherit; text-decoration: none; }
.story-quote > p, .story-evidence blockquote > p {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.6;
}
.story-quote footer { font-size: .75rem; }
.story-quote footer::before { content: none; }
.story-evidence { font-size: .8rem; }
.story-evidence { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid color-mix(in srgb, var(--story-muted) 45%, transparent); }
.story-evidence > p { margin-block: 1rem; }
.story-evidence blockquote { margin: 1rem 0; padding: 0 0 0 1rem; border-inline-start: 2px solid var(--story-muted); }
.story-evidence blockquote p { margin-bottom: .4rem; }
.story-history { margin-top: 3rem; padding: 1.3rem 0 1.3rem 1.4rem; border-left: 2px solid var(--story-history); scroll-margin-top: 1rem; }
.story-history-label { color: var(--story-history); font-size: .75rem; letter-spacing: .04em; margin-bottom: .8rem; }
.story-history h3 { font-size: 1.15rem; margin-bottom: .8rem; }
.story-history > p:not(.story-history-label) { font-size: .9rem; line-height: 1.65; }
.story-history-sources { font-size: .75rem; margin-bottom: 0; }
.story-history-sources summary { color: var(--story-history); }
.story-history-sources p { margin-block: .8rem 0; }
.story-status:empty { display: none; }
.story-status { font-size: .8rem; }
.story-chapters > .story-war-event { margin-block: 3rem; padding-block: 3rem; min-height: 55svh; }
.story-war-event { max-width: 29rem; }
.jean-chronology { max-width: 48rem; margin-inline: auto; }
.chronology-group { margin-block: 2rem; }
.chronology-event { box-shadow: none; border: 1px solid var(--story-muted); padding: 1rem; scroll-margin-top: 1rem; }
.chronology-event:target { outline: 3px solid var(--story-ink); }
[data-theme="dark"] :is(.jean-story, .jean-chronology) { --story-ink: #96c8ce; --story-muted: #a9b2b7; --story-history: #cfaa83; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.jean-story, .jean-chronology) { --story-ink: #96c8ce; --story-muted: #a9b2b7; --story-history: #cfaa83; }
}
@media (max-width: 800px) {
  .story-intro, .story-outro { padding-block: 2rem; }
  .story-layout { display: block; }
  .story-map-panel { top: 0; height: auto; min-height: 0; background: var(--pico-background-color, var(--background-color, #fff)); z-index: 2; }
  #story-map { flex: none; height: 30svh; min-height: 120px; }
  .story-map-caption { max-height: 24svh; padding: .5rem .25rem .5rem 0; }
  .story-map-caption p { font-size: .75rem; }
  .story-history-location { font-size: .65rem !important; }
  .story-step { min-height: 65svh; padding-block: 1.5rem; scroll-margin-top: calc(34svh + 8rem); }
  .story-text { padding-block: 1rem; }
  .story-history { margin-top: 2rem; padding-left: 1rem; scroll-margin-top: calc(34svh + 8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .jean-story *, .jean-story *::before, .jean-story *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .story-layout { display: block; }
  .story-map-panel, .story-status { display: none; }
  .story-step { min-height: 0; display: block; padding: 0; margin-block: 2rem; break-inside: avoid; }
  .story-intro, .story-outro { padding-block: 1rem; }
  :is(.jean-story, .jean-chronology) details::details-content { content-visibility: visible !important; }
  :is(.jean-story, .jean-chronology) details > :not(summary) { display: block !important; }
}