.only-tva{--only-accent:#ef4438;--only-divider:#dedbd4;max-width:1600px;margin-inline:auto;padding-top:clamp(90px,13vh,180px);min-height:calc(100svh - var(--nav-height));display:flex;flex-direction:column;justify-content:flex-end}
.only-tva__copy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);padding:0 var(--pad);margin-bottom:36px;color:var(--ink)}
.only-tva__copy h2{font:bold clamp(22px,3vw,48px)/1.1 Georgia,serif;letter-spacing:-.06em;white-space:nowrap;margin-bottom:28px}
.only-tva__copy h2 span{font-weight:400;letter-spacing:-.07em}
.only-tva__copy h3{font:700 clamp(15px,1.55vw,24px)/1.45 var(--sans);letter-spacing:-.055em;word-break:keep-all;margin-bottom:4px}
.only-tva__copy p{font:400 clamp(14px,1.35vw,21px)/1.55 var(--sans);letter-spacing:-.04em;word-break:keep-all;margin-bottom:0}
.only-tva__art{position:relative;width:100%;margin:0;aspect-ratio:2129/739}
.only-tva__art img{display:block;width:100%;height:auto}
.only-tva__underline{position:absolute;inset:0;width:100%;height:100%;color:var(--only-accent);pointer-events:none}
.only-tva__underline g{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform 850ms cubic-bezier(.22,.68,.2,1)}
.only-tva.is-drawn .only-tva__underline g{transform:scaleX(1)}
@media(max-width:700px){.only-tva{padding-top:64px;min-height:auto}.only-tva__copy{grid-template-columns:1fr;gap:30px;margin-bottom:32px}.only-tva__copy h2{font-size:32px;margin-bottom:12px}.only-tva__copy h3{font-size:18px}.only-tva__copy p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.only-tva__underline g{transform:scaleX(1);transition:none}}
.reduced-motion .only-tva__underline g{transform:scaleX(1);transition:none}

.only-tva__mobile-art{display:none}
@media(max-width:700px){
  .only-tva{padding-top:48px}
  .only-tva__copy{gap:40px;margin-bottom:0}
  .only-tva__copy article{padding-bottom:28px;border-bottom:1px solid var(--only-divider)}
  .only-tva__copy article:last-child{border:0}
  .only-tva__copy h2{font-size:clamp(27px,7.6vw,38px)}
  .only-tva__mobile-art{display:block;position:relative;width:100%;max-width:290px;margin:24px auto 0;overflow:hidden}
  .only-tva__mobile-art img{position:absolute;top:0;max-width:none;height:auto}
  .only-tva__art{display:none}
}

/* ONLY TVA one-screen fit — 2026-09-09 (Claude)
   The composition was sized by viewport width alone: the artwork is
   width:100% with a fixed 2129/739 ratio and the copy scales in vw. On short
   windows the section grew past one screen and the drawer, the character's
   legs and the cup fell below the fold (1280x720: 74px, 1280x620: 171px). At
   768 the reverse happened - the content is much shorter than the screen and
   justify-content:flex-end dropped it all to the bottom, leaving a 535px void
   above the headings.
   The approved 1440x900 composition is the reference: artwork width 1440,
   section height 836, so the whole block is 0.5728 x its own width. Derive one
   fit width from the height that is actually available and drive the copy and
   the artwork from it together, so each strength's text stays above its own
   picture at every size. 1440 and 1600+ and 768 are numerically unchanged;
   only shorter windows scale down as one unit. Mobile (<=700px) untouched. */
@media (min-width: 701px) {
  .only-tva {
    --only-fit-w: min(100vw, 1600px, calc((100svh - var(--nav-height)) * 1.746));
    justify-content: space-between;
    padding-top: calc(var(--only-fit-w) * .0813);
  }
  .only-tva__copy {
    width: var(--only-fit-w);
    margin-inline: auto;
    margin-bottom: calc(var(--only-fit-w) * .025);
    padding-inline: calc(var(--only-fit-w) * .0361);
    gap: calc(var(--only-fit-w) * .04);
  }
  .only-tva__copy h2 { font-size: calc(var(--only-fit-w) * .03); margin-bottom: calc(var(--only-fit-w) * .0194); }
  .only-tva__copy h3 { font-size: max(15px, calc(var(--only-fit-w) * .0155)); }
  .only-tva__copy p { font-size: max(13px, calc(var(--only-fit-w) * .0135)); }
  .only-tva__art { width: var(--only-fit-w); margin-inline: auto; }
}