/* page-about.css — rules that belong to about.html and nothing else.
   Shared styling lives in subpage.css, sections.css and parts.css; treat those as read only.

   What is in this file:
   1. info bar correction for narrow viewports (the shared rule keeps three columns)
   2. the record table, which is this page's one visual set piece
   3. spacing for the value grid labels
   4. rhythm for the marquee and the closing section

   Tokens only: no hardcoded colours, radius 0 or 4, one easing token. */

/* ── 1. Info bar, narrow viewport ───────────────────────────────────────────
   The shared rule in subpage.css keeps three equal columns and pushes the second and
   third to the centre and right. At 375px each column is squeezed to about one word,
   so this page drops back to a single column. Scoped here on purpose: changing the
   shared file would move every subpage at once. */
@media (max-width: 720px) {
  .vy-about-facts { grid-template-columns: 1fr; gap: 10px; }
  .vy-about-facts span:nth-child(2),
  .vy-about-facts span:last-child { text-align: left; }
}

/* ── 2. Record table ───────────────────────────────────────────────────────
   One finished frame next to the record it produced. This is the only image on the
   page; everything else is carried by type and space. */
.vy-about-shot {
  margin: clamp(40px, 5vw, 72px) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
.vy-about-shot > .vy-ph {
  grid-row: span 2;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: 0;
}
.vy-about-record {
  margin: 0;
  border-top: 1px solid var(--color-line);
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--vy-text-secondary);
}
.vy-about-record > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.vy-about-record dt { text-transform: uppercase; }
.vy-about-record dd { margin: 0; color: var(--vy-text-primary); text-align: right; }
.vy-about-shot figcaption {
  grid-column: 2;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
}

@media (max-width: 900px) {
  .vy-about-shot { grid-template-columns: 1fr; }
  .vy-about-shot > .vy-ph { grid-row: auto; }
  .vy-about-shot figcaption { grid-column: 1; }
}

/* ── 3. Value grid label spacing ───────────────────────────────────────────
   This value used to be an inline style. It lives in CSS so there is one place to change it. */
.vy-about-principles > .vy-leaf-kickercap { display: block; margin-bottom: clamp(36px, 4vw, 60px); }

/* ── 4. Marquee and closing section rhythm ────────────────────────────────
   The marquee animation itself is in subpage.css. What is here is spacing and one
   overflow fix.

   The fix: the marquee track is an inline block, so its own box is as wide as its
   content (about 4900px). That width escapes the parent overflow and pushes
   documentElement.scrollWidth out to the same number, which is a horizontal scrollbar
   on every viewport. The ticker on index does not do this because its inner element is
   a flex box, so only the children overflow, not the box.
   The track itself must not change: the loop moves it by exactly minus 50 percent, so
   its width has to stay tied to the content. The containment is therefore done on the
   container. contain: paint is what actually does it; overflow: clip is the part that
   clips without creating a scroll container. */
.vy-about-marquee {
  margin-top: clamp(8px, 1.5vh, 20px);
  overflow: clip;
  contain: paint;
}
.vy-about-limits { padding-bottom: clamp(88px, 13vh, 168px); }