/* Co-Packaged Optics article: the back half (blog-cpo/back-a.tsx).
   One map, Kanata out and back (cpo-canada.css draws it), filling the
   screen under the nav while the reader scrolls through the section; the
   steps become unseen spacers, a screen of scroll each, and the step
   showing is a subtitle over the map. Without the script (no .is-live),
   the steps are a plain article and the map isn't there. */

.va-story-map {
  display: none;
}
.article-body .va-step h3 {
  margin: 0 0 0.4rem;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--navy);
}
.article-body .va-step + .va-step {
  margin-top: var(--space-lg);
}

/* ── Live: the map across the room, under the bars ──
   The room is measured by the script (cpo-var-a.js), not taken from the
   window, since the review page narrows the column for its comments:
   --va-w is its width, --va-x where it starts from the column's left. */
.va-story.is-live {
  --va-top: calc(var(--nav-height, 64px) + var(--fb-bar, 0px));
  --va-h: calc(100vh - var(--va-top));
  width: var(--va-w);
  margin: var(--space-md) 0 0 var(--va-x);
}
@supports (height: 100svh) {
  .va-story.is-live { --va-h: calc(100svh - var(--va-top)); }
}
.va-story.is-live .va-story-map {
  display: block;
  position: sticky;
  top: var(--va-top);
  z-index: 3;
  height: var(--va-h);
}
.va-map-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: strict;
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
}
/* The steps lie over the map's run, unseen, a little more than a screen
   each. After the last, one more screen (.va-hold, added by the script)
   keeps it up before the map lets go. */
.va-story.is-live .va-steps {
  position: relative;
  margin-top: calc(-1 * var(--va-h));
}
.va-story.is-live .va-step,
.va-hold {
  visibility: hidden;
  height: calc(var(--va-h) * 1.2);
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.va-hold {
  height: var(--va-h);
}

/* ── The subtitle ──
   The step's words on a card where the map's framing leaves room (the
   script frames the picture beside it): a column down one side, or low
   on the left. Light enough to sit on the
   land, solid enough to read; its title in the site's section-label
   style. Two slots trade places, the old fading as the new comes up. */
.va-cap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.va-cap-slot {
  --cap-gap: clamp(1.5rem, 3vw, 2.75rem);
  position: absolute;
  top: 50%;
  left: var(--cap-gap);
  width: min(28rem, 40%);
  padding: 1.5rem 1.75rem 1.625rem;
  border: 1px solid rgba(var(--navy-rgb), 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  transform: translateY(-50%);
  translate: 0 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, translate 0s linear 0.2s, visibility 0s linear 0.2s;
}
/* In turn, never together: the old card is gone (0.2s) before the new
   one fades and rises in, after --cap-in (set by the script: longer when
   the card changes place, so it lands with the camera). */
.va-cap-slot.is-on {
  translate: 0 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease var(--cap-in, 0.22s), translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) var(--cap-in, 0.22s), visibility 0s;
}
.va-cap-slot.is-r {
  left: auto;
  right: var(--cap-gap);
}
/* Low on the left: over the open ground south of the country, above the
   arrow's row. */
.va-cap-slot.is-bl {
  top: auto;
  bottom: 4.5rem;
  transform: none;
}
.article-body .va-cap-slot h2,
.article-body .va-cap-slot h3 {
  position: relative;
  margin: 0 0 0.875rem;
  padding-bottom: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}
.va-cap-slot h2::after,
.va-cap-slot h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  background: var(--red);
}
.article-body .va-cap-slot p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--navy-gray);
}
/* The arrow: on to the next step, at the map's foot. */
.va-next {
  position: absolute;
  left: 50%;
  bottom: 0.875rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -1.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.va-next svg {
  width: 1.125rem;
  height: 1.125rem;
}
.va-next:hover {
  background: var(--red);
}
.va-next:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

/* Narrow: every card along the foot, the width of the screen less a
   margin, short enough to leave the map most of it; its title a small
   label, the words a size down. */
.va-story.is-narrow .va-cap-slot {
  top: auto;
  bottom: 3.75rem;
  left: 0.625rem;
  right: 0.625rem;
  width: auto;
  margin-left: 0;
  padding: 0.875rem 1rem 1rem;
  border-radius: 12px;
  transform: none;
}
/* The review page floats its Comments button at the foot: clear it. */
.feedback-page .va-story.is-narrow .va-cap-slot {
  bottom: 4.5rem;
}
.article-body .va-story.is-narrow .va-cap-slot h2,
.article-body .va-story.is-narrow .va-cap-slot h3 {
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}
.va-story.is-narrow .va-cap-slot h2::after,
.va-story.is-narrow .va-cap-slot h3::after {
  width: 32px;
}
.article-body .va-story.is-narrow .va-cap-slot p {
  font-size: 0.875rem;
  line-height: 1.5;
}
.va-story.is-narrow .va-next {
  bottom: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -1.125rem;
}

/* ── The send-off: CSSIC 2027, on navy ── */
.va-send {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 14px;
  background: var(--navy);
  color: var(--white);
}
.article-body .va-send p {
  margin: 0;
}
.article-body .va-send .va-send-when {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-blue);
}
.article-body .va-send .va-send-line {
  margin-top: 0.6rem;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}
.article-body .va-send .va-send-head {
  margin-top: 0.85rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--white);
}
/* The call to action: the red button, and the survey beside it (under
   it on a phone), a quieter link. */
.article-body .va-send .va-send-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.4rem;
}
.va-send-alt,
.va-send-alt:visited {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.va-send-alt:hover,
.va-send-alt:focus-visible {
  color: var(--red);
  text-decoration-color: var(--red);
}
.va-send-alt:focus-visible {
  outline: 2px solid var(--light-blue);
  outline-offset: 2px;
}
.va-send-btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  background: var(--red);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.va-send-btn:visited { color: var(--white); }
.va-send-btn:hover,
.va-send-btn:focus-visible {
  background: var(--white);
  color: var(--navy);
}
.va-send-btn:focus-visible {
  outline: 2px solid var(--light-blue);
  outline-offset: 2px;
}

/* The co-op line under the skills table. */
.article-body .va-coop {
  margin: 0.75rem 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ── The finale: the firms round the card ──
   Live, the figure spans the room as the story does, a screen tall, the
   card in its middle; it waits unseen till the ring closes round it
   (.is-ringed, from the script). Narrow, the map sits above the card. */
.va-finale {
  margin: var(--space-xl) 0 0;
}
.va-finale-map {
  display: none;
}
.va-finale.is-live {
  position: relative;
  width: var(--va-w);
  margin-left: var(--va-x);
  height: clamp(36rem, calc(100vh - var(--nav-height, 64px)), 52rem);
}
.va-finale.is-live .va-finale-map {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
}
.va-finale.is-live .va-send {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(27rem, calc(100% - 3rem));
  padding: 1.75rem 2rem 2rem;
  transform: translate(-50%, -50%);
  translate: 0 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease 0.55s, translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s, visibility 0s linear 0.55s;
}
.va-finale.is-ringed .va-send {
  translate: 0 0;
  opacity: 1;
  visibility: visible;
}
.va-finale.is-live.is-narrow {
  height: auto;
}
.va-finale.is-narrow .va-finale-map {
  position: relative;
  height: clamp(20rem, 92vw, 26rem);
}
.va-finale.is-live.is-narrow .va-send {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  margin: 0 0.625rem;
  padding: 1.25rem 1.25rem 1.4rem;
  transform: none;
}
.article-body .va-finale.is-narrow .va-send-line {
  font-size: 1.5rem;
}
.article-body .va-finale.is-narrow .va-send-cta {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .va-cap-slot,
  .va-cap-slot.is-on,
  .va-finale .va-send,
  .va-next,
  .va-send-btn,
  .va-send-alt {
    transition: none;
  }
}