/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:15px 16px;border-radius:0;font:500 14px/1 var(--sans);transition:top var(--t-fast)}
.skip:focus{top:12px;outline:2px solid var(--focus);outline-offset:2px}

/* Visually hidden, still read by screen readers (site-wide) */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Eyebrow, site-wide (2026-10-19): the italic serif from the approved home page. Always a <p> directly before its heading,
   never a heading element. One rule for every dark or photo surface (audit 2026-10-25: was four copies in four files). */
.eyebrow{font:italic 500 17px/1.2 var(--serif);letter-spacing:.06em;text-transform:none;color:var(--red-active)}
:is(.doc-hero.has-img,.dc-dark,.dc-hero,.tk-intro) .eyebrow{color:var(--eb-on-dark)}

/* Placeholder for sections not yet built */
.pending{border-top:1px solid var(--line)}
.pending .container{padding-top:var(--s-9);padding-bottom:var(--s-9)}
.pending-box{border:1px dashed var(--line-strong);border-radius:0;min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;padding:var(--s-6)}
.pending-box p{font:400 14px/1.5 var(--sans);color:var(--muted);max-width:46ch}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}