/* Hallmark · component: shared footer · genre: modern-minimal
 * theme: Hemu homepage paper + indigo · P4 H5 E4 S4 R5 V4
 * states: default · hover · focus · active · disabled · loading · error · success
 * Homepage colors are locked here so route-specific palettes cannot recolor the footer.
 */
:root {
  --footer-paper: #f9fafe;
  --footer-surface: #fff;
  --footer-ink: #20283a;
  --footer-muted: #626e83;
  --footer-line: #dce2ef;
  --footer-accent: #4f63a9;
  --footer-accent-soft: #edf1fb;
  --footer-chart-start: #a3b6ea;
  --footer-chart-end: #617ac6;
  --footer-shadow: 0 10px 32px rgb(59 78 132 / .035);
  --footer-font: var(--font-home, var(--font));
  --footer-ease: cubic-bezier(.16,1,.3,1);
  --footer-space-xs: 8px;
  --footer-space-sm: 16px;
  --footer-space-md: 24px;
  --footer-space-lg: 32px;
}
html[data-theme="dark"] {
  --footer-paper: #181e2c;
  --footer-surface: #202839;
  --footer-ink: #e9eefb;
  --footer-muted: #aab5cb;
  --footer-line: #354159;
  --footer-accent: #afc0ff;
  --footer-accent-soft: #2b3650;
  --footer-chart-start: #8aa4ef;
  --footer-chart-end: #576fc1;
  --footer-shadow: 0 10px 32px rgb(0 0 0 / .08);
}
html:root body .site-footer[data-site-footer] {
  color: var(--footer-muted) !important;
  border-color: var(--footer-line) !important;
  background: var(--footer-paper) !important;
  font-family: var(--footer-font) !important;
  overflow: clip;
}
html:root body .site-footer[data-site-footer] :is(p,a,span,small,dt,dd,output,button) { color: inherit; font-family: var(--footer-font); }
html:root body .site-footer[data-site-footer] :is(strong,h2,.footer-brand-meta dt) { color: var(--footer-ink) !important; }
html:root body .site-footer[data-site-footer] .footer-main {
  display: grid; width: min(calc(100% - 48px),1240px); margin-inline: auto;
  min-height: 0; grid-template-columns: minmax(0,.8fr) minmax(0,2fr);
  grid-template-areas: "footer-brand footer-directory" "footer-observatory footer-observatory";
  align-items: start; gap: var(--footer-space-lg) clamp(32px,5vw,72px);
  padding-block: 40px var(--footer-space-md);
}
html:root body .site-footer[data-site-footer] .footer-brand { grid-area: footer-brand; }
html:root body .site-footer[data-site-footer] .footer-wordmark { width: 190px; max-width: 100%; }
html[data-theme="dark"] body .site-footer[data-site-footer] .footer-wordmark img { filter: brightness(0) invert(1); opacity: .9; }
html:root body .site-footer[data-site-footer] .footer-intro { max-width: 28em; margin: 16px 0; color: var(--footer-muted) !important; font-size: 13px; line-height: 1.9; }
html:root body .site-footer[data-site-footer] .footer-brand-meta { margin: 0; font-size: 12px; line-height: 1.8; }
html:root body .site-footer[data-site-footer] :is(.footer-brand-meta,.footer-brand-meta dd,.footer-observatory-trend-head,.footer-observatory-trend-head small) { color: var(--footer-muted) !important; }
html:root body .site-footer[data-site-footer] .footer-brand-meta dd i { background: var(--footer-accent); }
html:root body .site-footer[data-site-footer] .footer-directory {
  grid-area: footer-directory; display: grid; min-width: 0;
  grid-template-columns: repeat(5,minmax(max-content,1fr));
  gap: 12px; padding: 4px 0 0; overflow: visible; align-items: start;
}
html:root body .site-footer[data-site-footer] .footer-col strong { margin-bottom: 14px; font-size: 14px; font-weight: 650; }
html:root body .site-footer[data-site-footer] .footer-col a {
  display: flex; align-items: center; width: fit-content; min-height: 32px;
  margin: 0; color: var(--footer-muted) !important; font-size: 13px;
  line-height: 1.5; white-space: nowrap; text-decoration: none;
  transition: color 180ms,transform 280ms var(--footer-ease);
}
html:root body .site-footer[data-site-footer] .footer-col a:hover { color: var(--footer-accent) !important; transform: translateX(3px); }

html:root body .site-footer[data-site-footer] .footer-observatory {
  grid-area: footer-observatory; display: grid; position: relative;
  min-width: 0; min-height: 138px; grid-template-columns: minmax(108px,.7fr) minmax(160px,.9fr) minmax(260px,1.6fr) minmax(230px,1.35fr);
  grid-template-rows: auto; align-items: center; align-content: normal;
  gap: var(--footer-space-md); padding: var(--footer-space-md) var(--footer-space-lg);
  border: 1px solid var(--footer-line); border-radius: 18px;
  background: var(--footer-surface); box-shadow: var(--footer-shadow);
  color: var(--footer-muted); isolation: isolate;
  transition: border-color 300ms,box-shadow 300ms;
}
html:root body .site-footer[data-site-footer] .footer-observatory-head { grid-column: auto; grid-row: auto; padding: 0; border: 0; }
html:root body .site-footer[data-site-footer] .footer-observatory-head p { margin: 0 0 8px; color: var(--footer-muted) !important; font-size: 9px; font-weight: 500; letter-spacing: .12em; }
html:root body .site-footer[data-site-footer] .footer-observatory-head h2 { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.4; letter-spacing: 0; }
html:root body .site-footer[data-site-footer] .footer-observatory-total { display: flex; grid-column: auto; grid-row: auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 0; border: 0; min-width: 0; }
html:root body .site-footer[data-site-footer] .footer-observatory-total span { color: var(--footer-muted) !important; font-size: 11px; font-weight: 400; }
html:root body .site-footer[data-site-footer] .footer-observatory-total output { color: var(--footer-accent) !important; font-size: clamp(28px,2.5vw,36px); font-weight: 650; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.025em; max-width: 100%; }
html:root body .site-footer[data-site-footer] .footer-observatory-today { display: grid; grid-column: auto; grid-row: auto; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0; margin: 0; border: 0; }
html:root body .site-footer[data-site-footer] .footer-observatory-today > div { min-width: 0; padding: 0; border: 0; }
html:root body .site-footer[data-site-footer] .footer-observatory-today :is(dt,dd) { margin: 0; white-space: nowrap; }
html:root body .site-footer[data-site-footer] .footer-observatory-today dt { color: var(--footer-muted) !important; font-size: 11px; font-weight: 400; }
html:root body .site-footer[data-site-footer] .footer-observatory-today dd { margin-top: 10px; color: var(--footer-ink) !important; font-size: 23px; font-weight: 550; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend { display: grid; grid-column: auto; grid-row: auto; grid-template-rows: auto auto; min-height: 0; padding: 0; border: 0; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 400; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend-head small { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; line-height: 1.5; white-space: nowrap; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend-head small i { width: 5px; height: 5px; background: var(--footer-accent); border-radius: 50%; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend ol { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: end; gap: 8px; height: 62px; margin: 10px 0 0; padding: 0; list-style: none; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend li { display: grid; position: relative; grid-template-rows: 1fr 12px; align-items: end; gap: 6px; height: 100%; min-height: 0; border-radius: 4px; outline-offset: 4px; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend li i { display: block; width: 100%; max-width: 24px; justify-self: center; height: calc(var(--visit-level,0) * 1%); min-height: 0; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg,var(--footer-chart-start),var(--footer-chart-end)); transform-origin: bottom; transition: filter 200ms; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend li span { color: var(--footer-muted) !important; font-size: 9px; text-align: center; line-height: 1.2; white-space: nowrap; }
html:root body .site-footer[data-site-footer] .footer-observatory-trend li::after { content: attr(data-visit-value); position: absolute; bottom: calc(100% + 4px); left: 50%; padding: 4px 8px; border: 1px solid var(--footer-line); border-radius: 6px; color: var(--footer-ink); background: var(--footer-surface); font-size: 11px; line-height: 1.4; opacity: 0; transform: translate(-50%,4px); pointer-events: none; transition: opacity 180ms,transform 180ms var(--footer-ease); }
html:root body .site-footer[data-site-footer] .footer-observatory-trend li:is(:hover,:focus-visible)::after { opacity: 1; transform: translate(-50%,0); }
html:root body .site-footer[data-site-footer] .footer-observatory-trend li:is(:hover,:focus-visible) i { filter: saturate(1.5); }
html:root body .site-footer[data-site-footer] .footer-observatory-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:root body .site-footer[data-site-footer] [data-observatory-retry] { border: 0; border-radius: 4px; padding: 0 4px; min-height: 28px; background: transparent; color: var(--footer-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
html:root body .site-footer[data-site-footer] [data-observatory-retry][hidden] { display: none; }
html:root body .site-footer[data-site-footer] [data-observatory-retry]:hover { background: var(--footer-accent-soft); }
html:root body .site-footer[data-site-footer] [data-observatory-retry]:disabled { opacity: .55; cursor: wait; text-decoration: none; }
html:root body .site-footer[data-site-footer] .footer-observatory[data-state="loading"] :is(output,dd) { animation: footer-loading 1.1s ease-in-out infinite alternate; }
html:root body .site-footer[data-site-footer] .footer-observatory[data-state="error"] .footer-observatory-total output { font-size: 32px; }
html:root body .site-footer[data-site-footer] .footer-observatory[data-state="error"] .footer-observatory-trend-head small i { background: var(--footer-muted); }
html:root body .site-footer[data-site-footer] .footer-observatory[data-entered="true"] > :is(header,.footer-observatory-total,.footer-observatory-today,.footer-observatory-trend) { animation: footer-reveal 700ms var(--footer-ease) both; }
html:root body .site-footer[data-site-footer] .footer-observatory[data-entered="true"] > .footer-observatory-total { animation-delay: 70ms; }
html:root body .site-footer[data-site-footer] .footer-observatory[data-entered="true"] > .footer-observatory-today { animation-delay: 140ms; }
html:root body .site-footer[data-site-footer] .footer-observatory[data-entered="true"] > .footer-observatory-trend { animation-delay: 210ms; }
html:root body .site-footer[data-site-footer] .footer-observatory[data-state="ready"][data-entered="true"] li i { animation: footer-bar-grow 900ms var(--footer-ease) var(--visit-delay,0ms) both; }

html:root body .site-footer[data-site-footer] .footer-bottom { display: flex; width: min(calc(100% - 48px),1240px); margin-inline: auto; min-height: 68px; padding: 8px 0; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--footer-muted) !important; border-color: var(--footer-line) !important; font-size: 11px; line-height: 1.5; }
html:root body .site-footer[data-site-footer] .footer-bottom-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
html:root body .site-footer[data-site-footer] .footer-bottom-status { border-color: var(--footer-line); padding-left: 16px; }
html:root body .site-footer[data-site-footer] .footer-bottom-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px; }
html:root body .site-footer[data-site-footer] .footer-bottom-links > :is(a,button) { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 0; margin: 0; gap: 5px; color: var(--footer-muted) !important; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; font-size: 11px; font-weight: 400; line-height: 1.5; white-space: nowrap; text-decoration: none; transform: none; transition: color 180ms; }
html:root body .site-footer[data-site-footer] .footer-bottom-links > :is(a,button):hover { color: var(--footer-accent) !important; transform: none; }
html:root body .site-footer[data-site-footer] .footer-admin-entry span { display: inline-block; color: inherit !important; transition: transform 240ms var(--footer-ease); }
html:root body .site-footer[data-site-footer] .footer-admin-entry:hover span { transform: translate(2px,-2px); }
html:root body .site-footer[data-site-footer] .footer-backtop { cursor: pointer; }
html:root body .site-footer[data-site-footer] .footer-backtop img { width: 13px; height: 13px; opacity: .7; transform: rotate(-90deg); transition: transform 280ms var(--footer-ease); }
html:root body .site-footer[data-site-footer] .footer-backtop:hover img { transform: translateY(-3px) rotate(-90deg); }
html[data-theme="dark"] body .site-footer[data-site-footer] .footer-backtop img { filter: invert(1); }
html:root body .site-footer[data-site-footer] :is(a,button):active { opacity: .75; }
@layer site-focus-appearance {
  html:root body .site-footer[data-site-footer] :is(a,button,li[tabindex]):focus-visible { outline: 2px solid var(--footer-accent) !important; outline-offset: 4px !important; color: var(--footer-accent) !important; }
}
@keyframes footer-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes footer-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes footer-loading { to { opacity: .35; } }
@media (max-width:1080px) {
  html:root body .site-footer[data-site-footer] .footer-main { grid-template-columns: minmax(0,1fr); grid-template-areas: "footer-brand" "footer-directory" "footer-observatory"; gap: var(--footer-space-md); }
  html:root body .site-footer[data-site-footer] .footer-intro { max-width: 42em; }
  html:root body .site-footer[data-site-footer] .footer-observatory { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px 32px; padding: var(--footer-space-md); }
  html:root body .site-footer[data-site-footer] .footer-observatory-total { align-items: flex-end; }
  html:root body .site-footer[data-site-footer] .footer-observatory-today { grid-column: 1; }
  html:root body .site-footer[data-site-footer] .footer-observatory-trend { grid-column: 2; }
  html:root body .site-footer[data-site-footer] .footer-bottom { flex-wrap: wrap; gap: 0 16px; }
}
@media (max-width:600px) {
  html:root body .site-footer[data-site-footer] :is(.footer-main,.footer-bottom) { width: calc(100% - 32px); }
  html:root body .site-footer[data-site-footer] .footer-main { padding-block: var(--footer-space-lg) var(--footer-space-md); }
  html:root body .site-footer[data-site-footer] .footer-directory { gap: clamp(6px,2vw,12px); }
  html:root body .site-footer[data-site-footer] .footer-col strong { font-size: 12px; margin-bottom: 10px; }
  html:root body .site-footer[data-site-footer] .footer-col a { min-height: 30px; font-size: 11px; }
  html:root body .site-footer[data-site-footer] .footer-observatory { padding: var(--footer-space-sm); gap: 20px 16px; border-radius: 14px; }
  html:root body .site-footer[data-site-footer] .footer-observatory-today { grid-column: 1 / -1; gap: 12px; padding-top: var(--footer-space-sm); border-top: 1px solid var(--footer-line); }
  html:root body .site-footer[data-site-footer] .footer-observatory-trend { grid-column: 1 / -1; }
  html:root body .site-footer[data-site-footer] .footer-observatory-trend ol { height: 68px; gap: 12px; }
  html:root body .site-footer[data-site-footer] .footer-bottom { flex-direction: column; align-items: flex-start; padding: 12px 0 16px; }
  html:root body .site-footer[data-site-footer] .footer-bottom-status { display: none; }
  html:root body .site-footer[data-site-footer] .footer-bottom-links { width: 100%; gap: 0 16px; }
  html:root body .site-footer[data-site-footer] .footer-backtop { margin-left: auto !important; }
}
@media (prefers-reduced-motion:reduce) {
  html:root body .site-footer[data-site-footer] *,html:root body .site-footer[data-site-footer] *::after { animation: none !important; transition: none !important; }
  html:root body .site-footer[data-site-footer] .footer-observatory > *,html:root body .site-footer[data-site-footer] .footer-observatory li i { transform: none !important; opacity: 1 !important; }
}
