/* The home page's hero and its mission feature. Loads after home-science.css (scripts/render_site_chrome.py places it).
   Screen style from the design stack: warm paper and ink, Inter display headings, JetBrains Mono labels, square corners,
   solid rules, no gradients, glass or soft shadows. The squares take the map page's colours, with the same meanings:
   green derived in full, light green derived given a premise, cyan partly derived, red an open wall, grey not yet derived. */

/* ---------- The hero: the claim beside the film ---------- */
body.hm-body .hm-open.hm-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start;
  padding: clamp(1.75rem, 3.5vw, 3rem) 0 0;
}
.hm-hero-claim, .hm-hero-side { min-width: 0; }
body.hm-body .hm-open.hm-hero h1 { max-width: 13ch; font-size: clamp(2.9rem, 5.4vw, 4.9rem); }
.hm-hero-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-content: start; }

/* The player: a framed 16:9 picture at column width, the browser's own controls, full screen only on request. */
body.hm-body .hm-film { position: static; margin: 0; background: none; }
body.hm-body .hm-film-frame { border: 1px solid var(--ink); background: #faf8f3; }
body.hm-body .hm-film .home-film-video {
  display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: contain; background: #faf8f3;
}
body.hm-body .hm-film-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem 0 0; }
body.hm-body .hm-film-sound {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; margin: 0; padding: 0 .85rem;
  border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 700 .7rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
body.hm-body .hm-film-sound:hover { background: var(--ink); color: var(--paper); }
body.hm-body .hm-film-sound[hidden] { display: none; }
body.hm-body .hm-film-sound svg { flex: none; }

@media (min-width: 980px) {
  body.hm-body .hm-open.hm-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: clamp(2.5rem, 4.5vw, 4.5rem); }
}

/* The five answers follow the mission, as their own band. */
body.hm-body .hm-wrap > .hm-five { margin-top: clamp(4rem, 7vw, 6rem); }

/* ---------- Our mission: every square of the map of reality ---------- */
body.hm-body .hmm {
  --sq-derived: #0b7a3e; --sq-derived_cond: #7cc79a; --sq-partial: #009fe3; --sq-wall: #c8401f; --sq-none: #d9d5ca;
}
@media (prefers-color-scheme: dark) {
  body.hm-body .hmm { --sq-derived: #3fbf7a; --sq-derived_cond: #2f7d55; --sq-partial: #2bb3f0; --sq-wall: #ff6a3d; --sq-none: #363531; }
}
.hmm .s-derived { --sc: var(--sq-derived); }
.hmm .s-derived_cond { --sc: var(--sq-derived_cond); }
.hmm .s-partial { --sc: var(--sq-partial); }
.hmm .s-wall { --sc: var(--sq-wall); }
.hmm .s-none { --sc: var(--sq-none); }
.hmm-sw { display: inline-block; flex: none; width: .75rem; height: .75rem; background: var(--sc, var(--sq-none)); }

body.hm-body .hmm .hm-sec-head h2 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem); max-width: 12ch;
  text-shadow: 0 0 .5px color-mix(in srgb, var(--ink) 55%, transparent);
}
body.hm-body .hmm .hm-sec-head > p:not(.hm-label) {
  max-width: 34rem; font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 450; line-height: 1.32; letter-spacing: -.008em; color: var(--ink);
}

/* The numbers: large, each with its one-line caption. */
.hmm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.hmm-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; margin: 0; padding: 1rem 0; border-top: 1px solid var(--rule); }
.hmm-stat:first-child { grid-column: 1 / -1; border-top: 0; }
.hmm-stat:nth-child(odd):not(:first-child) { padding-left: 1rem; border-left: 1px solid var(--rule); }
body.hm-body .hmm-stat dd {
  margin: 0; font-family: var(--display); font-weight: 860; font-size: clamp(2.1rem, 3.8vw, 3.3rem); line-height: .86;
  letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}
body.hm-body .hmm-stat dt { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 0; font-size: .95rem; line-height: 1.3; color: var(--soft); }
body.hm-body .hmm .hmm-updated { padding: .85rem 0 0; border-top: 1px solid var(--rule); }
@media (min-width: 900px) {
  .hmm-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hmm-stat, .hmm-stat:first-child { grid-column: auto; padding: 1.15rem 1.25rem 1.2rem 0; border-top: 0; }
  .hmm-stat + .hmm-stat, .hmm-stat:nth-child(odd):not(:first-child) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
}

/* The field: one block per domain, each a caption on a hairline and one canvas of squares, in the data's order. */
.hmm-field { position: relative; margin: 2rem 0 0; min-height: 14rem; }
.hmm-field.is-ready { min-height: 0; }
.hmm-doms { --hmm-sq: 6px; --hmm-gap: 1px; column-gap: 2.5rem; }
.hmm-doms:focus { outline: none; }
body.hm-body .hmm-doms:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.hmm-dom { break-inside: avoid; padding: 0 0 1rem; }
body.hm-body .hmm .hmm-dcap {
  display: flex; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin: 0 0 .45rem; padding: .45rem 0 0;
  border-top: 1px solid var(--rule); font: 700 .62rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft);
}
.hmm-dn { color: var(--ink); font-variant-numeric: tabular-nums; }
.hmm-dom canvas { display: block; max-width: 100%; cursor: pointer; touch-action: manipulation; }
body.hm-body .hmm .hmm-msg { padding: 1.25rem 0; border-top: 1px solid var(--ink); font-size: 1.05rem; color: var(--ink); }
@media (max-width: 559px) {
  .hmm-doms { --hmm-sq: 5px; }
  .hmm-dom { padding-bottom: .8rem; }
}
@media (min-width: 700px) { .hmm-doms { columns: 2; } }
@media (min-width: 1040px) { .hmm-doms { columns: 3; } }

body.hm-body .hmm-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin: 1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--ink);
}
body.hm-body .hmm .hmm-note { flex: 1 1 22rem; max-width: 44rem; font-size: .95rem; line-height: 1.42; color: var(--soft); }

/* The hover label and the ring around the square it names. */
body.hm-body .hmm-tip {
  position: fixed; left: 0; top: 0; z-index: 95; max-width: min(19rem, calc(100vw - 16px)); padding: .45rem .6rem .5rem;
  background: var(--ink); color: var(--paper); font: 560 .85rem/1.28 var(--text); pointer-events: none;
}
body.hm-body .hmm-tip small {
  display: flex; align-items: center; gap: .4rem; margin-top: .25rem; font: 700 .62rem/1.3 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; opacity: .85;
}
.hmm-tip .hmm-sw { width: .6rem; height: .6rem; }
body.hm-body .hmm-ring { position: fixed; left: 0; top: 0; z-index: 94; box-sizing: border-box; border: 2px solid var(--ink); pointer-events: none; }
body.hm-body :is(.hmm-tip, .hmm-ring)[hidden] { display: none; }

@media (forced-colors: active) {
  .hmm-sw, .hmm-dom canvas { forced-color-adjust: none; }
  body.hm-body .hmm-ring { border-color: Highlight; }
  body.hm-body .hm-film-frame, body.hm-body .hm-film-sound { border-color: CanvasText; }
}
@media print {
  body.hm-body .hm-film, body.hm-body .hmm-field, body.hm-body .hmm-tip, body.hm-body .hmm-ring { display: none !important; }
}