/* Element defaults so specimen cards and kits inherit the brand without classes. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body);line-height:var(--lh-body);font-weight:var(--weight-body)}
h1,h2,h3,h4{font-family:var(--font-heading);margin:0;text-wrap:pretty}
h1{font-size:var(--size-h1);line-height:var(--lh-h1);letter-spacing:var(--track-h1);font-weight:700}
h2{font-size:var(--size-h2);line-height:var(--lh-h2);letter-spacing:var(--track-h2);font-weight:600}
h3{font-size:var(--size-h3);line-height:var(--lh-h3);letter-spacing:var(--track-h3);font-weight:600}
p{margin:0;max-width:var(--measure-body);text-wrap:pretty}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--gt-dur) var(--gt-ease)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
table{border-collapse:collapse;font-variant-numeric:tabular-nums}
code,kbd,samp{font-family:var(--font-data)}
::selection{background:var(--gt-helix);color:var(--gt-ink)}

/* §06c mobile scale + §09 mobile section padding. The scale is defined in
   tokens/typography.css; this is where it actually takes effect. */
@media (max-width:720px){
  :root{--size-display:var(--size-display-m);--size-h1:var(--size-h1-m);--size-h2:var(--size-h2-m);--size-h3:var(--size-h3-m);--size-lede:var(--size-lede-m);--size-body:var(--size-body-m);--size-kpi:var(--size-kpi-m);--section-padding:var(--section-padding-mobile)}
}

/* §09 motion: fade and 8px rise the only entrances. Exits mirror the entrance
   path (spatial consistency): what rose in sinks out, faster and ease-in. */
@keyframes gt-rise{from{opacity:0;transform:translateY(var(--motion-rise))}to{opacity:1;transform:none}}
@keyframes gt-fall{from{opacity:1;transform:none}to{opacity:0;transform:translateY(var(--motion-rise))}}
@keyframes gt-fade{from{opacity:0}to{opacity:1}}
@keyframes gt-fade-out{from{opacity:1}to{opacity:0}}
@keyframes gt-marker-resolve{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* Reduced motion: the resolve becomes a plain cross-fade. */
@media (prefers-reduced-motion:reduce){@keyframes gt-marker-resolve{from{opacity:0}to{opacity:1}}}
/* The one exception to "fade and rise only": the marker may send out a sonar
   ping, because finding is the brand's whole idea. Marker only, never a card. */
@keyframes gt-marker-sonar{0%{transform:scale(.5);opacity:.55}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}
.gt-sonar{animation:gt-marker-sonar 2.8s var(--gt-ease) infinite}
@media (prefers-reduced-motion:reduce){.gt-sonar{animation:none;opacity:0}}
/* §09b graphics register keyframes. Transform, opacity and clip only. */
@keyframes gt-word-rise{from{opacity:0;transform:translateY(var(--reveal-rise))}to{opacity:1;transform:none}}
@keyframes gt-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gt-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gt-clip-ltr{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gt-wipe-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gt-wipe-out{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes gt-draw{to{stroke-dashoffset:0}}
@keyframes gt-lock-ring{from{opacity:0;transform:scale(3.2)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){@keyframes gt-lock-ring{from{opacity:0}to{opacity:1}}}