/* The three entries sit beside the empirical curve, in reading order on small screens. */
.fh-intro {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,.92fr);
  align-items: center;
  gap: clamp(1.5rem,5vw,5rem);
  padding-block: clamp(1.65rem,3.3vw,3.25rem);
}
.fh-intro > * { min-width: 0; }
.fh-intro h1 {
  margin: .15em 0 .2em;
  color: var(--ink);
  font: 600 clamp(2.25rem,4vw,4rem)/1.2 var(--serif);
  letter-spacing: .035em;
}
.fh-intro h1 span { display: inline-block; }
.fh-lead { max-width: 31em; margin: .55em 0 1.15em; color: var(--muted); font-size: clamp(.98rem,1.35vw,1.13rem); line-height: 1.85; }
.fh-path > ol, .fh-marks { margin: 0; padding: 0; list-style: none; }
.fh-path > ol { border-top: 1px solid var(--rule); }
.fh-path > ol > li { position: relative; padding: .38rem 0 .67rem 1.3rem; border-bottom: 1px solid var(--rule); }
.fh-path > ol > li::before {
  content: ''; position: absolute; top: 1.35rem; bottom: -1.35rem; left: 4px;
  border-left: 1px solid #b7c9d8;
}
.fh-path > ol > li:last-child::before { display: none; }
.fh-path > ol > li::after {
  content: ''; position: absolute; left: 0; top: 1.13rem;
  width: 9px; height: 9px; border: 2px solid #5c7f99; border-radius: 50%; background: #fff;
}
.fh-path > ol > li:nth-child(2)::after { background: #587b97; }
.fh-path > ol > li:last-child::after { border-color: #a06e4c; }
.fh-entry { display: flex; min-height: 2.2rem; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.fh-status {
  flex: 0 0 auto; color: #495c70; font: 650 .75rem/1.5 var(--sans);
  letter-spacing: .035em;
}
.fh-entry strong { font: 650 clamp(1rem,1.5vw,1.28rem)/1.45 var(--serif); }
.fh-arrow { margin-left: auto; padding-inline: .25rem; color: #587896; }
.fh-path > ol > li > p { margin: .02rem 0 0; max-width: 36em; color: #405467; font-size: .89rem; line-height: 1.65; }
.fh-marks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.fh-marks li { display: flex; }
.fh-marks a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.1rem;
  padding: .18rem .5rem; border: 1px solid #c6d7e3; border-radius: 4px;
  color: #294f6e; background: #f3f8fb; font: 600 .96rem/1 var(--sans); text-decoration: none;
}
.fh-entry:hover strong, .fh-research:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.fh-marks a:hover { border-color: #61839d; background: #e8f2f8; }
.fh-intro a:focus-visible { outline: 3px solid #a45d39; outline-offset: 3px; }
.fh-intro .atlas-landing-chart > p { color: var(--muted); font-size: .88rem; }
.fh-research {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  margin-top: .9rem; padding: .7rem .1rem; color: #284a63; border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.fh-research small { display: block; margin-bottom: .2em; color: #75553c; font: 650 .75rem/1.45 var(--sans); letter-spacing: .06em; }
.fh-research strong { font: 600 1rem/1.55 var(--serif); }
@media (max-width: 50rem) {
  .fh-intro { grid-template-columns: minmax(0,1fr); gap: 1.3rem; padding-block: 1.3rem 1.75rem; }
  .fh-intro h1 { font-size: clamp(2rem,7.5vw,3.5rem); }
  .fh-lead { margin: .35rem 0 .75rem; }
  .fh-entry { min-height: 2.65rem; gap: .4rem; }
  .fh-path > ol > li { padding: .12rem 0 .5rem 1rem; }
  .fh-path > ol > li::after { top: 1.08rem; }
  .fh-marks { display: grid; grid-template-columns: repeat(2,minmax(0,.8fr)) repeat(4,minmax(0,1.3fr)); gap: .25rem; max-width: 22rem; margin-top: .25rem; }
  .fh-marks a { width: 100%; min-height: 2.75rem; padding-inline: 0; font-size: clamp(.85rem,3.55vw,1rem); white-space: nowrap; }
}
@media print {
  .fh-intro { display: block; padding: 0; }
  .fh-evidence { margin: 1rem 0; max-width: 35rem; }
  .fh-arrow { display: none; }
}