/* The Year Gallery: an editorial reading room around the existing year engine.
   Its artwork index only associates a picture with the exact event it documents. */
body.immersive-home.year-by-year {
  background: var(--fh-navy-deep);
}

body.immersive-home.year-by-year > main {
  height: max(750px, calc(100dvh - var(--fh-header-height)));
  min-height: 750px;
}

body.immersive-home.year-by-year .map-frame {
  background:
    radial-gradient(ellipse at 18% 10%, rgba(96, 126, 132, .18), transparent 45%),
    radial-gradient(ellipse at 82% 78%, rgba(173, 127, 66, .1), transparent 44%),
    linear-gradient(145deg, #0d2b3b, #081d2c 58%, #071827) !important;
}

.year-experience { color: var(--fh-cream); }
.year-experience::before {
  background: linear-gradient(90deg, rgba(5, 21, 33, .6), transparent 35%, rgba(4, 16, 26, .35));
}
.year-experience::after { display: none; }
.year-engraving { width: min(60vw, 960px); right: -9%; bottom: -1%; opacity: .055; }

body.immersive-home.year-by-year .year-topbar {
  min-height: 64px;
  padding: 10px clamp(16px, 3vw, 44px);
  gap: 12px;
  border-color: rgba(211, 182, 127, .22);
  background: rgba(5, 21, 33, .96);
}
.year-topbar-label {
  color: #e2c998;
  font-size: 10px;
  letter-spacing: .15em;
}
.territory-pill {
  min-height: 36px;
  padding: 7px 11px;
  border-radius: var(--fh-radius-sm);
  font: 500 12px/1.2 var(--fh-font-body);
  color: #cad7d9;
  transition: color var(--fh-fast) ease, background var(--fh-fast) ease, border-color var(--fh-fast) ease;
}
.territory-pill.active {
  color: #f3dcab;
  background: rgba(205, 170, 107, .12);
  border-color: rgba(220, 185, 123, .52);
}
.territory-more {
  min-width: 92px;
  height: 36px;
  border-radius: var(--fh-radius-sm);
  color: #e5d7bc;
  font: 500 12px var(--fh-font-body);
}
.quick-time-search { height: 38px; border-radius: var(--fh-radius-sm); }
.quick-time-search input { height: 36px; font-size: 12px; }
.quick-time-search > button { min-height: 27px; border-radius: 3px; }
.year-hint { color: #c2b69c; font: 400 11px var(--fh-font-body); }

body.immersive-home.year-by-year .year-core {
  inset: 64px 0 0;
  transition: right var(--fh-medium) var(--fh-ease);
}
body.immersive-home.year-by-year .map-frame.detail-open .year-core { right: min(370px, 34vw); }

body.immersive-home.year-by-year .year-hero {
  position: absolute;
  top: clamp(22px, 4vh, 52px);
  left: 4%;
  right: 4%;
  display: grid;
  grid-template-columns: minmax(235px, 1.1fr) minmax(195px, .8fr) minmax(230px, 1fr);
  gap: clamp(18px, 3vw, 56px);
  align-items: center;
  text-align: left;
}
.year-gallery-intro { max-width: 450px; }
.year-gallery-eyebrow {
  display: block;
  color: #d7b878;
  font: 600 10px/1.4 var(--fh-font-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.year-gallery-intro h1 {
  margin: 13px 0 12px;
  color: #f8f2e6;
  font: 400 clamp(26px, 2.45vw, 45px)/1.08 var(--fh-font-display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.year-gallery-intro h1 em { color: #dfbd7d; font-weight: 400; }
.year-gallery-intro > p {
  max-width: 370px;
  margin: 0;
  color: #c6d3d1;
  font: 400 clamp(12px, .83vw, 14px)/1.6 var(--fh-font-body);
  text-wrap: pretty;
}
.year-identity {
  min-width: 0;
  padding: 2px 0 2px clamp(15px, 2.5vw, 40px);
  border-left: 1px solid rgba(210, 180, 124, .32);
}
.year-kicker {
  margin: 0 0 10px;
  color: #dec48e;
  font: 600 10px/1.3 var(--fh-font-mono);
  letter-spacing: .15em;
}
.year-number {
  color: #f5e9d1;
  font-size: clamp(63px, 6.2vw, 110px);
  line-height: .9;
  letter-spacing: -.075em;
  font-variant-numeric: lining-nums tabular-nums;
}
.year-era {
  margin-top: 10px;
  color: #d2c6af;
  font: italic 18px/1.1 var(--fh-font-editorial);
}
.year-count {
  margin-top: 7px;
  color: #c2b9a8;
  font: 500 10px/1.4 var(--fh-font-mono);
  letter-spacing: .06em;
}
.year-context { min-width: 0; }
body.immersive-home.year-by-year .ruler-strip {
  width: 100%;
  max-width: 420px;
  margin: 0 0 0 auto;
  border: 1px solid rgba(210, 180, 124, .27);
  border-radius: var(--fh-radius-md);
  background: rgba(5, 22, 35, .45);
  overflow: hidden;
}
.ruler-strip-label { padding: 11px 11px 3px; color: #d0b881; font-size: 9px; }
.ruler-strip button { min-height: 65px; padding: 8px; }
.ruler-strip button small { color: #bec3ba; font-size: 8px; }
.ruler-strip button strong { color: #e3dfd4; font-size: 16px; line-height: 1.15; }
.ruler-strip button.current strong { color: #f0d393; font-size: 17px; }

.year-onboarding {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 440px;
  margin-top: 15px;
  padding: 8px 9px 8px 12px;
  border: 1px solid rgba(215, 185, 127, .36);
  border-radius: var(--fh-radius-md);
  background: rgba(185, 148, 82, .1);
}
.year-onboarding[hidden] { display: none !important; }
.year-onboarding-icon { flex: none; color: #e3bb75; font-size: 18px; }
.year-onboarding p { margin: 0; color: #e6ddcb; font: 400 11px/1.4 var(--fh-font-body); }
.year-onboarding button {
  flex: none;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(225, 191, 124, .55);
  border-radius: 3px;
  background: transparent;
  color: #f3ddab;
  font: 600 10px var(--fh-font-body);
  cursor: pointer;
}
.year-onboarding button:hover { background: rgba(220, 182, 115, .15); }

body.immersive-home.year-by-year .year-events {
  top: 32%;
  bottom: 21%;
  left: 4%;
  right: calc(4% + 276px);
  align-items: stretch;
  min-height: 0;
}
.year-events-heading {
  width: 100%;
  align-items: baseline;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(209, 181, 131, .32);
}
.year-events-heading h2 { color: #f7f0e2; font: 400 clamp(20px, 1.7vw, 29px) var(--fh-font-display); }
.year-events-heading span { color: #d8c9ac; font-size: 9px; }
.year-card-grid,
.year-card-grid.expanded {
  width: 100%;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(218, 183, 120, .55) transparent;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: clamp(12px, 1vw, 18px);
  padding: 2px 8px 14px 2px;
}
.year-card-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.year-event-tile {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid rgba(208, 181, 129, .28);
  border-top: 2px solid var(--event-color, #d4b374);
  border-radius: var(--fh-radius-md);
  background: linear-gradient(145deg, rgba(19, 49, 65, .98), rgba(8, 28, 43, .96));
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(1, 11, 19, .17);
  transition: transform var(--fh-fast) var(--fh-ease), border-color var(--fh-fast) ease, box-shadow var(--fh-fast) ease;
}
.year-event-tile:hover,
.year-event-tile:focus-within {
  transform: translateY(-3px);
  border-color: rgba(232, 200, 143, .72);
  box-shadow: 0 18px 35px rgba(1, 9, 16, .34);
}
.year-event-card {
  display: flex;
  width: 100%;
  min-height: 256px;
  flex: 1;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  transition: none;
}
.year-event-card:hover { transform: none; border: 0; background: transparent; }
.year-event-media {
  position: relative;
  display: grid;
  width: 100%;
  height: 126px;
  place-items: center;
  flex: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 28% 35%, color-mix(in srgb, var(--event-color, #d4b374) 38%, transparent), transparent 50%),
    repeating-linear-gradient(125deg, rgba(223, 209, 176, .06) 0 1px, transparent 1px 10px),
    #132d3d;
}
.year-event-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 21, 32, .35));
}
.year-event-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--art-focal, center); }
.year-event-media:not(.has-art) .year-event-monogram { color: rgba(232, 206, 150, .7); font: 400 46px/1 var(--fh-font-display); }
.year-event-media:not(.has-art) .year-event-monogram::before { content: '⚜'; font-size: 37px; }
.year-event-copy { display: flex; flex: 1; flex-direction: column; padding: 13px 15px 15px; }
.year-event-meta { margin-bottom: 8px; color: #debf82; font-size: 9px; letter-spacing: .05em; }
.year-event-meta span:last-child { color: #bbd0ce; }
.year-event-title { color: #f8f1e6; font: 400 clamp(17px, 1.15vw, 22px)/1.15 var(--fh-font-display); text-wrap: balance; }
.year-event-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 8px 0 0;
  color: #cbd8d7;
  font: 400 11px/1.5 var(--fh-font-body);
}
.year-event-territory { margin-top: auto; padding-top: 10px; color: #d8bf91; font: italic 15px/1 var(--fh-font-editorial); }
.year-artwork-credit {
  display: block;
  padding: 7px 15px 9px;
  border-top: 1px solid rgba(223, 196, 145, .16);
  color: #c3cfc9;
  text-decoration: none;
  font: 400 9px/1.3 var(--fh-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.year-artwork-credit:hover { color: #f2d99d; text-decoration: underline; }
.year-card-grid.is-single .year-event-tile { max-width: 620px; }
.year-card-grid.is-single .year-event-media { height: clamp(150px, 24vh, 240px); }
.year-card-grid.is-single .year-event-card { min-height: 0; }
.year-more-button {
  min-height: 38px;
  padding: 9px 15px;
  border-color: rgba(213, 180, 116, .48);
  border-radius: var(--fh-radius-sm);
  color: #f4e4c6;
  font: 600 11px var(--fh-font-body);
}
.year-empty { color: #e0d7c9; }

body.immersive-home.year-by-year .history-map-card {
  top: 33%;
  bottom: auto !important;
  right: 4% !important;
  width: 246px !important;
  height: 226px !important;
  border-radius: var(--fh-radius-md);
  box-shadow: 0 16px 35px rgba(0, 10, 19, .25);
}
body.immersive-home.year-by-year .map-frame.detail-open .history-map-card { display: none !important; }
body.immersive-home.year-by-year .map-frame.detail-open .year-events { right: 4%; }
body.immersive-home.year-by-year .map-frame.detail-open .year-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.year-rail-wrap { top: auto; bottom: 43px; left: 18%; right: 18%; height: 86px; }
.year-rail { top: 43px; height: 2px; }
.year-node { top: 43px; min-height: 42px; }
.year-node small { color: #bdb19b; }
.year-node.current span { color: #f8da9b; }
.year-nav-button {
  top: auto;
  bottom: 64px;
  width: 115px;
  min-height: 47px;
  border-radius: var(--fh-radius-sm);
  background: rgba(8, 30, 44, .85);
}
.year-nav-button.prev { left: 4%; }
.year-nav-button.next { right: 4%; }
.year-skip-note { bottom: 12px; left: 4%; color: #bec5bb; font: 400 10px var(--fh-font-body); }
.year-key-help { bottom: 12px; right: 4%; color: #bec5bb; font-size: 9px; }
.year-map-toggle { display: none; }

.year-experience :is(button, a, input, select):focus-visible,
body.immersive-home.year-by-year .detail-panel :is(button, a):focus-visible {
  outline: 3px solid #f2d293;
  outline-offset: 3px;
}

@media (max-width: 1500px) {
  .year-card-grid, .year-card-grid.expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.immersive-home.year-by-year .year-hero { grid-template-columns: minmax(205px, 1fr) minmax(170px, .8fr) minmax(190px, .9fr); gap: 20px; }
  .year-gallery-intro h1 { font-size: clamp(25px, 2.3vw, 34px); }
  .ruler-strip button strong { font-size: 13px; }
}

@media (max-width: 1100px) {
  body.immersive-home.year-by-year .year-hero { top: 24px; left: 4%; right: 4%; grid-template-columns: minmax(180px, 1.1fr) minmax(140px, .8fr) minmax(185px, 1fr); gap: 15px; }
  .year-gallery-intro h1 { margin: 8px 0; font-size: 26px; }
  .year-gallery-intro > p { font-size: 11px; }
  .year-number { font-size: 66px; }
  .year-onboarding { padding: 7px; }
  .year-onboarding p { font-size: 10px; }
  .ruler-strip button { min-height: 58px; padding: 5px 2px; }
  .ruler-strip button strong { font-size: 12px; }
  .ruler-strip button.current strong { font-size: 13px; }
  body.immersive-home.year-by-year .year-events { right: calc(4% + 220px); }
  body.immersive-home.year-by-year .history-map-card { width: 202px !important; height: 178px !important; }
  body.immersive-home.year-by-year #historicFranceMap { height: 82px !important; }
  .year-event-media { height: 105px; }
  .year-event-card { min-height: 238px; }
}

@media (max-width: 850px) {
  body.immersive-home.year-by-year .year-topbar { min-height: 58px; padding: 8px 16px; }
  body.immersive-home.year-by-year .year-core { inset: 58px 0 0; }
  body.immersive-home.year-by-year .year-hero { top: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: 18px; }
  .year-context { grid-column: 1 / -1; }
  body.immersive-home.year-by-year .ruler-strip { max-width: none; margin-top: -7px; }
  .ruler-strip-label { display: block; }
  .year-gallery-intro h1 { font-size: clamp(26px, 4vw, 34px); }
  .year-gallery-intro > p { max-width: 350px; }
  .year-number { font-size: 72px; }
  body.immersive-home.year-by-year .year-events { top: 38%; right: 4%; bottom: 20%; }
  .year-card-grid, .year-card-grid.expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.immersive-home.year-by-year .history-map-card { display: none !important; }
  body.immersive-home.year-by-year .map-frame.detail-open .year-core { right: 0; }
  body.immersive-home.year-by-year .map-frame.detail-open .year-events { right: 4%; }
  .year-map-toggle {
    position: absolute;
    z-index: 14;
    display: block;
    right: 16px;
    bottom: 12px;
    min-height: 34px;
    border: 1px solid rgba(224, 187, 117, .6);
    border-radius: var(--fh-radius-sm);
    background: rgba(5, 21, 33, .95);
    color: #f5dfb5;
    padding: 7px 11px;
    font: 600 10px var(--fh-font-body);
    cursor: pointer;
  }
  body.immersive-home.year-by-year .map-frame.detail-open .year-map-toggle { display: none; }
  body.immersive-home.year-by-year .year-experience.map-visible ~ .history-map-card {
    display: block !important;
    z-index: 16;
    top: auto;
    right: 16px !important;
    bottom: 51px !important;
    width: min(310px, calc(100vw - 32px)) !important;
    height: 224px !important;
  }
  .year-rail-wrap { left: 16%; right: 16%; }
  .year-key-help { display: none; }
}

@media (max-width: 620px) {
  body.immersive-home.year-by-year > main { height: max(760px, calc(100dvh - var(--fh-header-height))); min-height: 760px; }
  body.immersive-home.year-by-year .year-topbar { flex-wrap: wrap; gap: 4px 6px; padding: 6px 11px; min-height: 94px; }
  .territory-pills { flex: 1 1 200px; }
  .territory-pill { min-height: 29px; padding: 5px 7px; font-size: 10px; }
  .territory-more { min-width: 78px; max-width: 86px; height: 29px; font-size: 10px; }
  .quick-time-search { flex: 1 0 100%; order: 5; height: 32px; margin: 0; }
  .quick-time-search input { height: 30px; }
  body.immersive-home.year-by-year .year-core { inset: 94px 0 0; }
  body.immersive-home.year-by-year .year-hero { top: 14px; left: 5%; right: 5%; grid-template-columns: minmax(0, 1.05fr) minmax(0, .75fr); gap: 8px 12px; }
  .year-gallery-eyebrow { font-size: 8px; letter-spacing: .09em; }
  .year-gallery-intro h1 { margin: 6px 0; font-size: clamp(20px, 5.4vw, 28px); }
  .year-gallery-intro > p { font-size: 10px; line-height: 1.35; }
  .year-identity { padding-left: 12px; }
  .year-kicker { font-size: 8px; margin-bottom: 5px; }
  .year-number { font-size: clamp(44px, 12vw, 66px); }
  .year-era { margin-top: 5px; font-size: 14px; }
  .year-count { font-size: 8px; margin-top: 4px; }
  .year-context { display: none; }
  .year-onboarding { margin-top: 6px; gap: 5px; padding: 5px; }
  .year-onboarding-icon { font-size: 12px; }
  .year-onboarding p { font-size: 9px; line-height: 1.25; }
  .year-onboarding button { min-height: 27px; font-size: 9px; padding: 2px 5px; }
  body.immersive-home.year-by-year .year-events { top: 31%; bottom: 23%; left: 5%; right: 5%; }
  .year-events-heading { margin-bottom: 8px; padding-bottom: 6px; }
  .year-events-heading h2 { font-size: 19px; }
  .year-events-heading span { font-size: 8px; }
  .year-card-grid, .year-card-grid.expanded, body.immersive-home.year-by-year .map-frame.detail-open .year-card-grid { grid-template-columns: minmax(0, 1fr); }
  .year-event-tile { max-width: none; }
  .year-event-card { min-height: 0; }
  .year-event-media { height: 115px; }
  .year-event-copy { padding: 11px 13px 13px; }
  .year-event-title { font-size: 19px; }
  .year-event-summary { font-size: 10px; }
  .year-card-grid.is-single .year-event-media { height: 175px; }
  .year-rail-wrap { left: 21%; right: 21%; bottom: 53px; height: 80px; }
  .year-nav-button { bottom: 70px; width: 58px; min-height: 42px; padding: 5px; }
  .year-nav-button strong { font-size: 12px; }
  .year-nav-button.prev { left: 5%; }
  .year-nav-button.next { right: 5%; }
  .year-node:nth-of-type(1), .year-node:nth-of-type(5) { display: none; }
  .year-node span { font-size: 10px; }
  .year-node { min-width: 50px; }
  .year-node.current span { font-size: 12px; }
  .year-node small { display: none; }
  .year-skip-note { bottom: 10px; left: 5%; max-width: 56%; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .year-experience :is(.year-event-tile, .year-core, .year-node, .year-event-card, .territory-pill),
  .year-experience :is(.year-event-tile, .year-core, .year-node, .year-event-card, .territory-pill)::before {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .year-event-tile:hover, .year-event-tile:focus-within { transform: none; }
}