/* France Histoire / timeline presentation.
   The original engine owns coordinates, transforms, LOD and collision packing.
   Marker geometry and the ruler's 46px / 78px dimensions are intentional. */
html { scroll-padding-top: 20px; }
body { background: var(--fh-paper); color: var(--fh-text); }
body::before { display: none; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #a77c32; outline-offset: 4px;
}
.fh-skip { position:absolute; left:18px; top:-100px; z-index:1000; padding:12px 18px; background:var(--fh-panel); color:var(--fh-text); border-radius:6px; }
.fh-skip:focus { top:12px; }
.site-shell { background:var(--fh-navy); border-bottom:1px solid #2e4651; backdrop-filter:none; }
.site-header { max-width:1680px; min-height:78px; padding:0 clamp(18px,3vw,48px); grid-template-columns:1fr auto 1fr; gap:26px; }
.brand { color:#f6f0e2; gap:12px; }
.brand-name { font-size:1.65rem; letter-spacing:-.035em; }
.brand-sub { display:none; }
.brand-mark { order:-1; transform:none; display:flex; align-items:center; }
.brand-mark img { width:28px; height:36px; object-fit:contain; }
.site-nav { gap:25px; }
.site-nav a { color:#bbcad0; font:500 12px/1.3 'Inter',sans-serif; padding:28px 0; transition:color .18s; }
.site-nav a:hover, .site-nav a.active { color:#f6f0e2; }
.site-nav a.active::after { bottom:0; height:2px; background:var(--fh-gold); }
.site-nav a[href="#timeline"]:not(.active) { display:none; }
.header-tools { gap:14px; }
.lang { color:#eee6d5; font:500 12px 'Inter',sans-serif; border-color:#38505c; padding:10px 0 10px 16px; }
.lang:hover { color:var(--fh-gold); }
.header-search { border:0; width:34px; height:34px; border-radius:6px; background:transparent; color:#d1dde0; cursor:pointer; padding:7px; }
.header-search::after { display:none; }
.header-search svg { width:18px; height:18px; display:block; }
.header-search:hover { background:var(--fh-navy-raised); }
.hero { max-width:none; min-height:0; padding:30px max(24px,calc((100vw - 1584px)/2)) 32px; background:var(--fh-navy); color:#f6f0e2; }
.hero-copy { max-width:940px; }
.hero .eyebrow { color:var(--fh-gold); font:500 10px/1.5 'Inter',sans-serif; letter-spacing:.2em; margin:0 0 11px; }
.hero h1, .hero h1 em { color:#f6f0e2; font-size:clamp(32px,3.5vw,52px); line-height:1.08; letter-spacing:-.045em; }
.hero p.hero-sub { margin-top:12px; font:400 13px/1.7 'Inter',sans-serif; color:#b9c9ce; max-width:680px; }
.hero-divider { display:none; }
.hero-engraving { width:470px; bottom:-75px; right:4%; color:var(--fh-gold); opacity:.1; }
.hero::after { display:none; }
.filter-wrap { background:var(--fh-panel); border-top:0; border-bottom:1px solid var(--fh-rule); }
.filterbar { max-width:1680px; padding:13px clamp(18px,3vw,48px); gap:7px; flex-wrap:wrap; overflow:visible; }
.filterbar .label { font:500 11px 'Inter',sans-serif; letter-spacing:0; color:var(--fh-muted); text-transform:none; margin-right:12px; }
.chip { font:500 12px/1.3 'Inter',sans-serif; padding:9px 11px; border:1px solid transparent; border-radius:6px; color:var(--fh-muted); min-height:36px; }
.chip:hover { background:#f0f1eb; border-color:var(--fh-rule); }
.chip.active { background:var(--fh-navy); color:#faf6ea; border-color:var(--fh-navy); box-shadow:none; }
.chip.active .dot { box-shadow:0 0 0 2px #ffffff42; }
.chip .dot { width:7px; height:7px; margin-right:7px; }
.chip.clear { font:500 11px 'Inter',sans-serif; color:#8a3039; min-height:36px; }
.map-section { max-width:1680px; padding:0 clamp(18px,3vw,48px) 24px; }
.map-section-header { padding:23px 0 15px; align-items:center; }
.map-kicker { color:var(--fh-text); font:600 12px/1.5 'Inter',sans-serif; letter-spacing:0; text-transform:none; }
.importance-legend { font:400 11px/1.5 'Inter',sans-serif; letter-spacing:0; text-transform:none; color:var(--fh-muted); margin-top:4px; }
.map-header-actions { align-items:center; }
.map-instruction { display:none; }
.timeline-tools { gap:10px; align-items:center; }
.density-control { height:40px; border-radius:7px; border:1px solid var(--fh-rule); background:#eaece6; padding:3px; }
.density-label { font:500 10px 'Inter',sans-serif; padding:0 8px; border-right:0; color:var(--fh-muted); letter-spacing:0; text-transform:none; }
.density-btn { height:32px; border:0; border-radius:4px; font:500 11px 'Inter',sans-serif; padding:0 10px; color:var(--fh-muted); }
.density-btn.active { background:var(--fh-panel); color:var(--fh-text); box-shadow:0 1px 4px #071e2b17; }
.history-search { width:clamp(230px,24vw,360px); }
.history-search input { height:40px; font:400 12px 'Inter',sans-serif; border-radius:7px; background:var(--fh-panel); border:1px solid var(--fh-rule); padding:0 42px 0 13px; color:var(--fh-text); }
.history-search input:focus { border-color:#9b7a42; box-shadow:0 0 0 3px #b4935526; }
.history-search::after { content:'⌕'; right:14px; top:5px; font-size:21px; color:var(--fh-muted); }
.search-results { top:47px; border-radius:8px; background:var(--fh-panel); border:1px solid var(--fh-rule); box-shadow:0 18px 45px #071e2b25; max-height:390px; }
.search-result { padding:12px; gap:10px; border-color:#e7e9e1; }
.search-result:hover,.search-result.active { background:#edece1; }
.search-result-year { font:500 10px/1.5 'Inter',sans-serif; color:#7c602c; }
.search-result-title { font:500 12px/1.5 'Inter',sans-serif; color:var(--fh-text); }
.search-result-type { font:400 9px/1.5 'Inter',sans-serif; letter-spacing:0; color:var(--fh-muted); }
.orientation-toggle { height:40px; border-radius:7px; padding:0 12px; border-color:var(--fh-rule); background:var(--fh-panel); font:500 11px 'Inter',sans-serif; letter-spacing:0; text-transform:none; }
.orientation-toggle:hover { background:#edece1; border-color:#a6b0b1; }
.map-frame { height:74vh; min-height:650px; max-height:1040px; border:1px solid #c5cfce; border-radius:12px; background:radial-gradient(ellipse at 48% 30%,#fffdf8 0,#f1eee4 100%); box-shadow:0 16px 45px #16313a0b,0 2px 5px #16313a07; isolation:isolate; }
.map-frame::before { display:none; }
/* Keep the 46px ruler and 78px vertical ruler used by the label packer. */
.ruler { z-index:5; background:#edf0e9f5; border-color:#d6ddd7; backdrop-filter:blur(8px); }
.tick-label { font:500 11px/1.5 'Inter',sans-serif; top:14px; color:#5e6e74; font-variant-numeric:tabular-nums; }
.tick-line { background:#1c435109; }
.orientation-vertical .ruler { background:#edf0e9f5; }
.orientation-vertical .tick-label { font:500 10px 'Inter',sans-serif; }
.era-label { background:#f6f3ebed; border-radius:4px; color:#364f59; }
.branch-label { color:var(--fh-text); text-shadow:0 0 5px var(--fh-paper),0 0 10px var(--fh-paper); }
/* Never override marker transforms or label sizes: the original engine packs them. */
.marker { border-color:var(--fh-panel); }
.marker-title { background:#fffdf9f5; border-color:#c9d2cd; box-shadow:0 2px 5px #071e2b09; border-radius:4px; }
.marker-title:hover { border-color:#a98649; box-shadow:0 3px 9px #071e2b20; }
.hint { left:16px; top:60px; max-width:265px; padding:10px 12px; border:1px solid #dce0d8; border-radius:7px; color:var(--fh-muted); font:400 11px/1.55 'Inter',sans-serif; background:#fffdf7eF; box-shadow:0 3px 10px #071e2b05; }
.stage-indicator { bottom:220px; background:var(--fh-navy); color:#eee9dc; border:1px solid #38505b; border-radius:6px; font:500 10px 'Inter',sans-serif; letter-spacing:0; text-transform:none; padding:9px 11px; box-shadow:0 3px 10px #071e2b14; }
.stage-dots span { background:#526976; }
.stage-dots span.on { background:var(--fh-gold); }
.controls { gap:0; border:1px solid #ccd5d0; border-radius:8px; box-shadow:0 4px 12px #071e2b10; overflow:hidden; z-index:15; }
.ctrl-btn { width:42px; height:42px; background:var(--fh-panel); color:var(--fh-text); border:0; border-bottom:1px solid #e1e5dd; border-radius:0!important; font-size:20px; }
.ctrl-btn:last-child { border-bottom:0; }
.ctrl-btn:hover { background:#e6ece6; }
.locator-card,.history-map-card,.context-card,.overview-navigator { border:1px solid #cbd4ce; border-radius:8px; box-shadow:0 4px 16px #071e2b0d; background:#fffdf7fa; }
.locator-card.active { transform:none; border-color:#ac894a; box-shadow:0 5px 18px #071e2b18; }
.locator-head,.history-map-head { background:#edf0e9; border-color:#d6ddd7; }
.locator-head,.history-map-title { font:600 10px/1.4 'Inter',sans-serif; letter-spacing:0; text-transform:none; }
#locationStatus { font:400 9px 'Inter',sans-serif; color:var(--fh-muted); }
.location-caption strong { font:500 12px 'Inter',sans-serif; }
.location-caption span { font:400 9px/1.35 'Inter',sans-serif; color:var(--fh-muted); }
.history-map-title { max-width:190px; }
.history-map-year { font:500 10px 'Inter',sans-serif; }
.history-map-foot { font:400 9px/1.4 'Inter',sans-serif; }
.map-disclaimer { font-size:8px; }
.context-card { gap:10px; }
.context-kicker { font:500 9px/1.45 'Inter',sans-serif; letter-spacing:0; text-transform:none; color:#746037; }
.context-year { font-size:25px; }
.context-era { font:400 10px/1.4 'Inter',sans-serif; }
.context-stat span { font:400 9px/1.5 'Inter',sans-serif; letter-spacing:0; color:var(--fh-muted); text-transform:none; }
.context-stat strong { font:500 11px/1.5 'Inter',sans-serif; color:var(--fh-text); }
.overview-head { font:500 9px 'Inter',sans-serif; letter-spacing:0; text-transform:none; }
.overview-range { font:500 10px 'Inter',sans-serif; }
.overview-track { background:#e4e8df; border:0; border-radius:4px; }
.overview-track::before { font:500 7px 'Inter',sans-serif; letter-spacing:.02em; top:5px; color:#5e6b60; }
.overview-window { background:#b9975933; border:1px solid #927238; border-radius:3px; }
.detail-panel { width:var(--fh-detail-width); background:var(--fh-panel); box-shadow:-12px 0 28px #102e3817; border-color:#d5dace; padding:25px; z-index:25; scrollbar-width:thin; scrollbar-color:#c6cbbd transparent; }
.detail-panel:not(.open) { visibility:hidden; }
.detail-panel.open { visibility:visible; }
.detail-close { width:32px; height:32px; display:grid; place-items:center; background:#eceee7; border-radius:50%; top:14px; right:14px; font:400 21px 'Inter',sans-serif; color:#4b5d63; }
.detail-close:hover { background:#e1e6db; color:var(--fh-text); }
.detail-year { color:#8d6b31; font:500 12px 'Inter',sans-serif; margin-top:7px; }
.detail-title { font:500 28px/1.15 'Fraunces',serif; margin-top:12px; letter-spacing:-.025em; color:var(--fh-text); }
.detail-tag { font:500 11px/1.5 'Inter',sans-serif; color:var(--fh-muted); margin:12px 0 18px; }
.detail-image { height:190px; border-radius:6px; background:#e9e8dc; object-fit:contain; object-position:center; filter:none; border:1px solid #e4e5dc; }
.detail-body,.detail-extract { font:400 13px/1.8 'Inter',sans-serif; color:#40535b; }
.detail-importance { background:#f0eddf; border-left-color:#bd9a59; border-radius:0 4px 4px 0; padding:9px 10px; }
.detail-importance strong { font:500 11px 'Inter',sans-serif; }
.detail-importance span { font:400 9px 'Inter',sans-serif; letter-spacing:0; }
.detail-section { margin-top:20px; padding-top:16px; }
.detail-section-title,.wiki-label { font:600 10px/1.5 'Inter',sans-serif; text-transform:none; letter-spacing:.01em; color:#66705e; }
.connection-btn { border-radius:5px; padding:10px; grid-template-columns:50px 1fr; background:#f4f4ec; }
.connection-btn small { font:500 9px/1.5 'Inter',sans-serif; }
.connection-btn span { font:500 11px/1.5 'Inter',sans-serif; }
.primary-source-link,.citation-link { font:400 12px/1.6 'Inter',sans-serif; color:#375260; padding:8px 0; }
.detail-wiki { font:500 11px 'Inter',sans-serif; border-radius:5px; padding:10px 12px; }
.empty-source { font:400 11px/1.6 'Inter',sans-serif; }
.footnote { max-width:850px; font:400 11px/1.7 'Inter',sans-serif; color:var(--fh-muted); padding:0 24px 20px; }
.atlas-footer { max-width:none; min-height:76px; margin:0; padding:20px clamp(18px,3vw,48px); background:var(--fh-navy); border:0; grid-template-columns:1fr auto; }
.atlas-footer::after { display:none; }
.footer-quote { font:400 12px 'Inter',sans-serif; color:#c3ced0; }
.footer-monogram { font-size:24px; padding:0; }
.footer-note { display:none; }
@media(min-width:1181px) and (max-width:1400px) { .context-card { grid-template-columns:1fr 1fr; } .context-stat:nth-of-type(n+4) { display:none; } }
@media(max-width:1180px) {
  .site-header { grid-template-columns:1fr auto; gap:16px; }
  .site-nav { display:flex; grid-row:2; grid-column:1/-1; justify-content:flex-start; overflow:auto; gap:24px; }
  .site-nav a { padding:0 0 14px; white-space:nowrap; }
  .site-header { padding-top:18px; }
  .header-tools { grid-column:2; grid-row:1; }
  .map-section-header { flex-direction:column; align-items:flex-start; gap:12px; }
  .map-header-actions,.timeline-tools { width:100%; justify-content:flex-start; }
  .history-search { flex:1; }
  .context-card { left:286px; right:284px; grid-template-columns:1fr 1fr; }
  .context-stat:nth-of-type(n+3) { display:none; }
  .overview-navigator { left:286px; right:284px; }
  .map-frame.detail-open .locator-card,.map-frame.detail-open .context-card,.map-frame.detail-open .overview-navigator,.map-frame.detail-open .history-map-card { display:none; }
  .map-frame.detail-open .controls { right:calc(var(--fh-detail-width) + 18px)!important; }
}
@media(max-width:760px) {
  .hero { padding:26px 20px; }
  .hero-engraving { width:380px; right:-190px; }
  .filterbar .label { width:100%; }
  .filterbar { padding:14px 18px; gap:4px; }
  .chip { font-size:11px; padding:8px; }
  .map-section { padding:0 12px 20px; }
  .map-section-header { padding:18px 4px 13px; }
  .timeline-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
  .history-search { grid-column:1/-1; grid-row:1; width:100%; min-width:0; }
  .history-search input { font-size:16px; height:44px; }
  .density-control { min-width:0; width:100%; height:44px; }
  .density-label { display:none; }
  .density-btn { flex:1; padding:0 6px; height:36px; }
  .orientation-toggle { height:44px; padding:0 9px; font-size:10px; }
  .map-frame { min-height:610px; height:78svh; border-radius:8px; }
  .locator-card { left:12px; bottom:12px; width:calc(50% - 18px); height:162px; }
  #eventMap,.locator-card #eventMap { height:94px; }
  .locator-head { height:30px; padding:0 8px; }
  .locator-head span { font-size:9px; }
  #locationStatus { display:none; }
  .location-caption { height:38px; padding:5px 8px; }
  .location-caption strong { max-width:100%; font-size:11px; }
  .location-caption span { display:none; }
  .history-map-card { right:12px; bottom:12px; width:calc(50% - 18px); height:162px; }
  .history-map-head { height:30px; padding:0 8px; }
  .history-map-title { font-size:9px; }
  .history-map-year { display:none; }
  #historicFranceMap { height:94px; }
  .history-map-foot { height:38px; grid-template-columns:auto auto; padding:9px; }
  .overview-navigator { left:12px; right:12px; bottom:184px; height:61px; }
  .overview-head { gap:6px; }
  .overview-range { font-size:9px; }
  .stage-indicator { left:12px; bottom:257px; }
  .controls { right:12px!important; bottom:257px!important; }
  .context-card { display:none; }
  .orientation-vertical .locator-card { left:12px; }
  .orientation-vertical .overview-navigator { left:12px; }
  .orientation-vertical .history-map-card { right:12px; }
  .orientation-vertical .stage-indicator { left:92px; }
  .detail-panel { width:100%; padding:22px; }
  .map-frame.detail-open .controls { display:none; }
  .detail-title { font-size:26px; }
  .search-result-type { display:none; }
  .search-result { grid-template-columns:55px 1fr; }
  .footnote { display:block; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
/* The event inspector takes precedence over the compact context summary. */
@media(min-width:761px) and (max-width:1600px) {
  .map-frame.detail-open .context-card { display:none; }
}
@media(max-width:400px) {
  .brand-name { font-size:20px; }
  .brand { gap:8px; min-width:0; }
  .brand-mark img { width:23px; height:30px; }
  .site-header { gap:10px; }
  .header-tools { gap:6px; }
  .lang { padding-left:10px; }
}
@media(min-width:761px) and (max-width:1100px) {
  .context-card { display:none; }
  .overview-navigator,.orientation-vertical .overview-navigator { left:18px; right:18px; bottom:258px; }
  .stage-indicator { bottom:332px; }
  .controls { bottom:332px!important; }
}
@media(max-width:760px) {
  .site-nav { gap:12px; flex-wrap:wrap; overflow:visible; }
  .site-nav a { font-size:11px; }
}