/* Reset + base typography + layout primitives + the diagonal shear device. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--fbody);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:where(h1,h2,h3,h4){font-family:var(--fdisplay);font-weight:700;line-height:1.08;
  letter-spacing:-.015em;color:var(--ink);text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem)}
h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem)}
h3{font-size:clamp(1.3rem,1.1rem + 1vw,1.6rem)}
p{margin:0 0 1.1em}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px}
.tr-container{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(1rem,5vw,3rem)}
.tr-measure{max-width:var(--measure)}
.tr-section{padding-block:clamp(3rem,2rem + 5vw,6rem)}
.tr-skip{position:absolute;left:-9999px;top:auto}
.tr-skip:focus{left:1rem;top:1rem;z-index:1000;background:var(--navy);color:#fff;
  padding:.6rem 1rem;border-radius:8px}
/* Diagonal shear: the one signature device (from the TR logo cut). */
.tr-shear{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 2.2rem))}
.tr-shear-up{clip-path:polygon(0 2.2rem,100% 0,100% 100%,0 100%)}
.tr-tick{display:inline-block;width:1.1rem;height:.62rem;background:var(--cyan);
  transform:skewX(var(--shear));margin-right:.6rem;vertical-align:middle}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
