/* 02 · Meet Gant — full-bleed photo, giant headline over the sky, drawn annotations. */
#meet-gant { --mg-sky: #267CDE; background: var(--paper); color: var(--ink); }
#meet-gant .mg-stage { position: relative; }
#meet-gant .mg-pic { position: relative; }
#meet-gant .mg-photo { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; }

#meet-gant .mg-tag { position: absolute; z-index: 3; top: 24px; left: var(--pad); margin: 0; color: var(--white); }
#meet-gant .mg-shout {
  position: absolute; z-index: 2; top: max(76px, 5.2vw); left: 0; right: 0; text-align: center;
  font-size: 13.4vw; line-height: .8; white-space: nowrap; color: var(--white);
  text-shadow: 0 .02em .12em rgba(20, 22, 27, .18);
}
#meet-gant .mg-shout .it { font-size: 1.04em; }

/* drawn layer: arrows always, outlines on demand */
#meet-gant .mg-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#meet-gant .mg-ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#meet-gant .mg-arrows path { stroke: var(--white); stroke-width: 2.6; filter: drop-shadow(0 1px 1.5px rgba(20, 22, 27, .55)); }
#meet-gant .mg-outlines path {
  stroke: var(--white); stroke-width: 4; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 1px 2px rgba(20, 22, 27, .6)); transition: stroke-dashoffset .7s cubic-bezier(.5, 0, .2, 1);
}
#meet-gant .mg-outlines path.is-on { stroke-dashoffset: 0; }
#meet-gant .mg-arrows path.is-on { stroke: var(--orange); }

/* notes: paper tags pinned on the photo */
#meet-gant .mg-notes { list-style: none; margin: 0; padding: 0; }
#meet-gant .mg-note { position: absolute; z-index: 3; left: var(--x); top: var(--y); }
#meet-gant .mg-note .anno {
  display: inline-flex; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer;
  padding: 8px 11px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-size: clamp(12px, 1vw, 15px); transform: rotate(-1.5deg); transition: transform .15s, background-color .15s;
}
#meet-gant .mg-note:nth-child(even) .anno { transform: rotate(1.8deg); }
#meet-gant .mg-note .anno:hover,
#meet-gant .mg-note .anno[aria-pressed="true"] { background: var(--orange); transform: rotate(0); }
#meet-gant .mg-note .anno:focus-visible,
#meet-gant .mg-hibtn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
#meet-gant .mg-num {
  flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: -1px;
  border: 1.5px solid currentColor; border-radius: 50%; font: 600 10px/1 var(--mono);
}
#meet-gant .mg-markers { display: none; }

/* say hi: Gant's flat badge + one line */
#meet-gant .mg-hi {
  position: absolute; z-index: 3; left: var(--pad); bottom: 4%;
  display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 14px; align-items: center;
  width: min(340px, 30vw); padding: 12px 14px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: var(--shadow-hard);
}
#meet-gant .mg-badge { grid-row: 1 / 3; width: 76px; }
#meet-gant .mg-badge svg, #meet-gant .mg-fig svg { display: block; width: 100%; height: auto; }
#meet-gant .mg-say { margin: 0; font: 400 20px/1.15 var(--accent-serif); font-style: italic; min-height: 2.3em; display: flex; align-items: flex-end; }
#meet-gant .mg-hibtn { justify-self: start; padding: 8px 14px; font-size: 14px; }
#meet-gant .mg-badge.is-bump { animation: mg-bump .35s ease-out; }
@keyframes mg-bump { 40% { transform: translateY(-6px); } }

/* three facts */
#meet-gant .mg-facts {
  list-style: none; margin: 0; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1.5px solid var(--ink);
}
#meet-gant .mg-facts li { display: flex; gap: 18px; align-items: center; padding: 26px 24px; border-left: 1px solid var(--rule-strong); }
#meet-gant .mg-facts li:first-child { border-left: 0; padding-left: 0; }
#meet-gant .mg-fig { flex: none; width: 72px; }
#meet-gant .mg-facts p { margin: 0; font: 400 16px/1.45 var(--body); max-width: 34ch; }
#meet-gant .mg-facts b { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 6px; }

@media (max-width: 1100px) {
  #meet-gant .mg-hi { width: min(320px, 40vw); }
}

/* ---- 390: headline on the sky band, numbered markers, legend below ---- */
@media (max-width: 760px) {
  #meet-gant .mg-stage { background: var(--mg-sky); padding-top: 22px; }
  #meet-gant .mg-tag { position: static; padding: 0 var(--pad); }
  #meet-gant .mg-shout { position: static; padding: 34px var(--pad) 18px; text-align: left; white-space: normal; font-size: 27vw; line-height: .78; }
  #meet-gant .mg-arrows { display: none; }
  #meet-gant .mg-markers { display: block; }
  #meet-gant .mg-markers span {
    position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--paper); border: 1.5px solid var(--ink); font: 600 12px/1 var(--mono); transition: background-color .15s;
  }
  #meet-gant .mg-markers span.is-on { background: var(--orange); }
  #meet-gant .mg-notes { background: var(--paper); padding: 18px var(--pad) 4px; display: grid; gap: 10px; counter-reset: none; }
  #meet-gant .mg-note { position: static; }
  #meet-gant .mg-note .anno, #meet-gant .mg-note:nth-child(even) .anno { transform: none; box-shadow: none; width: 100%; font-size: 14px; padding: 10px 12px; }
  #meet-gant .mg-note .anno br { display: none; }
  #meet-gant .mg-hi { position: static; width: auto; margin: 0; padding: 16px var(--pad) 20px; border: 0; border-top: 1.5px solid var(--ink); box-shadow: none; background: var(--paper); grid-template-columns: 64px minmax(0, 1fr); }
  #meet-gant .mg-badge { width: 64px; }
  #meet-gant .mg-facts { grid-template-columns: 1fr; border-top: 1.5px solid var(--ink); }
  #meet-gant .mg-facts li, #meet-gant .mg-facts li:first-child { border-left: 0; padding: 18px 0; border-top: 1px solid var(--rule-strong); }
  #meet-gant .mg-facts li:first-child { border-top: 0; }
  #meet-gant .mg-fig { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  #meet-gant .mg-outlines path, #meet-gant .mg-note .anno { transition: none; }
  #meet-gant .mg-badge.is-bump { animation: none; }
}