/* The figure on /observing/paranal/: the light path (vlt-lightpath.svg) beside the result
   (espresso-spectrum.svg). Both SVGs share one scale, so the grid columns follow their viewBox widths
   and the data thread, cut at the seam by figures/observing/build_espresso_output.py, joins up.
   The one-time build comes from site.css. */
@layer pages {
  .vlt-row { display: grid; grid-template-columns: minmax(0, 800fr) minmax(0, 480fr); }
  .blueprint.wide-fig.vlt-fig svg { display: block; inline-size: 100%; block-size: auto; max-block-size: none; }
  .vlt-fig .b-draw { vector-effect: none; stroke-linecap: butt; }

  /* type: at a 1440 px viewport the figure renders at about 1.05 px per unit, so 11 units is the floor */
  .vlt-fig .bp-label2 { font-size: 13px; }
  .vlt-fig .bp-tick { font-size: 11.5px; }
  .vlt-fig .eo-title { font: 600 14.5px var(--sans); fill: var(--ink); }
  .vlt-fig .eo-tex { fill: var(--ink); }
  .vlt-fig .eo-note, .vlt-fig .eo-num { font: 500 11px var(--mono); fill: var(--muted); }
  .vlt-fig .eo-data { fill: var(--ink-2); }
  .vlt-fig a .eo-data { text-decoration: underline; text-decoration-thickness: 1px; }

  /* the data thread: the light's moving dash continues as curved links; squares mark each hand-off */
  .vlt-fig .eo-link { fill: none; stroke-width: 1.7; vector-effect: none; }
  .vlt-fig .eo-node { fill: var(--accent-2); }
  .vlt-fig .eo-head { fill: none; stroke: var(--accent-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
  @media (prefers-reduced-motion: no-preference) {
    /* one dash period (6 + 5) per loop, so the flow never jumps when the loop restarts; pieces cut
       at a seam carry their phase in an inline animation-delay */
    .vlt-fig .flowray { stroke-dasharray: 6 5; animation: eo-flow 1.1s linear infinite; }
    @keyframes eo-flow { to { stroke-dashoffset: -11; } }
  }

  /* schematic parts in outline, real data filled */
  .eo-svg .eo-power { fill: color-mix(in oklab, var(--accent-2) 42%, transparent); stroke: none; }
  .eo-svg .eo-smooth { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
  .eo-svg .eo-numax { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 1 3; }

  /* narrow screens: the two panels stack at full width, with the labels enlarged to stay legible at
     the smaller scale; the thread pieces that cross the seam are hidden */
  @media (max-width: 900px) {
    .vlt-row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
    .vlt-svg .eo-title { font-size: 30px; }
    .eo-svg .eo-title { font-size: 19px; }
    .eo-svg .eo-note, .eo-svg .eo-num { font-size: 18px; }
    .vlt-fig .eo-seam { display: none; }
  }
}


/* the story in three columns across the page */
.story-cols { display: grid; gap: clamp(28px, 3.5vw, 56px); }
.story-cols .prose { max-inline-size: none; align-content: start; }
@media (min-width: 1000px) { .story-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the words stand beside him on the platform, on the sky side of the picture */
@media (min-width: 1000px) {
  .story-hero::before { background: linear-gradient(180deg, rgb(3 6 12 / 0.05) 30%, rgb(3 6 12 / 0.7)), linear-gradient(270deg, rgb(3 6 12 / 0.62), transparent 58%); }
  .story-hero .card-body { justify-self: end; inline-size: 50%; }
}
/* on a phone the words sit under him, never across him */
@media (max-width: 640px) {
  .story-hero { display: block; min-block-size: 0; padding: 0; background: var(--raised); }
  .story-hero::before { display: none; }
  .story-hero img { position: static; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 43% 100% !important; }
  .story-hero .tag { color: var(--ink); }
  .story-hero .card-body { padding: 16px; color: var(--ink); }
  .story-hero .card-body h1, .story-hero .card-body p, .story-hero .card-body .kicker { color: var(--ink) !important; text-shadow: none; }
}