/* StemSkills base: resets, type scale, focus. Token-driven; no raw values. */
.ssl-scope, .ssl-scope *{ box-sizing:border-box; }
.ssl-scope{
  color:var(--ssl-ink); background:var(--ssl-paper);
  font-family:var(--ssl-sans); font-size:var(--ssl-fs-2); line-height:var(--ssl-lh-body);
  -webkit-font-smoothing:antialiased;
}
.ssl-scope h1,.ssl-scope h2,.ssl-scope h3{
  font-family:var(--ssl-serif); line-height:var(--ssl-lh-tight); text-wrap:balance;
  font-weight:600; margin:0;
}
.ssl-scope h1{ font-size:var(--ssl-fs-7); letter-spacing:var(--ssl-track-7); }
/* h2 steps DOWN on small screens, and this is the fix for a real collision rather than a
   preference. The hero title is responsive (fs-5 / fs-6 at 768 / fs-7 at 1024) but h2 was a
   flat fs-5 at every width, so at 375px the page title and every section title rendered at
   exactly the same 33px. Measured on /himachal/: h1 33px, h2 33px. Nothing then told a reader
   which heading was the page and which was a section, on the one screen size where almost all
   of this page's traffic is. From 768 up the hero has already outgrown fs-5, so h2 returns to
   it there and the desktop rhythm is untouched. */
.ssl-scope h2{ font-size:var(--ssl-fs-4); letter-spacing:var(--ssl-track-4); }
@media (min-width:768px){
  .ssl-scope h2{ font-size:var(--ssl-fs-5); letter-spacing:var(--ssl-track-5); }
}
.ssl-scope h3{ font-size:var(--ssl-fs-3); letter-spacing:var(--ssl-track-3); }
.ssl-scope p{ margin:0 0 var(--ssl-s-4); max-width:70ch; }
.ssl-scope a{ color:var(--ssl-primary); text-decoration:none; }
.ssl-scope a:hover,.ssl-scope a:focus-visible{ text-decoration:underline; }

/* accessibility: visible focus, never colour-alone */
.ssl-scope :focus-visible{ outline:2px solid var(--ssl-primary); outline-offset:2px; border-radius:4px; }

/* off-screen but announced. named apart from .ssl-sr-only, which fixes/ssl-a11y.php already owns sitewide.
   the skip link shares this exact treatment as its resting state, so it joins the selector
   rather than restating the seven declarations. */
.ssl-visually-hidden,
.ssl-skip-link{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* skip link: site-header.php renders it as the FIRST node of every page, a sibling BEFORE the
   .ssl-scope <header>, so it inherits nothing from the scope and must carry its own box model,
   type, ground and focus ring. Hidden until focused (rule above), then a pill at the top-left.
   :focus, not :focus-visible, because a focused-but-invisible skip link is the exact failure this
   element exists to prevent, so a programmatic .focus() has to reveal it too. */
.ssl-skip-link:focus{
  position:fixed; inset-block-start:var(--ssl-s-3); inset-inline-start:var(--ssl-s-3);
  box-sizing:border-box; display:inline-flex; align-items:center;
  width:auto; height:auto; min-height:var(--ssl-tap); margin:0;
  padding:var(--ssl-s-3) var(--ssl-s-5);
  overflow:visible; clip-path:none;
  background:var(--ssl-paper); color:var(--ssl-primary); /* measured 10.7:1, AAA */
  font-family:var(--ssl-sans); font-size:var(--ssl-fs-2); line-height:var(--ssl-lh-body);
  text-decoration:underline; border-radius:var(--ssl-radius-pill);
  box-shadow:var(--ssl-shadow-panel);
  z-index:var(--ssl-z-nav); /* 200: clears --ssl-z-header 100 and --ssl-z-mega 110 */
  outline:2px solid var(--ssl-primary); outline-offset:2px;
}

/* eyebrow / uppercase label */
.ssl-eyebrow{
  font-size:var(--ssl-fs-1); letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ssl-slate);
}
/* hairline divider (over heavy shadow) */
.ssl-rule{ height:1px; background:var(--ssl-line); border:0; margin:var(--ssl-s-7) 0; }

/* layout container */
.ssl-wrap{ max-width:var(--ssl-maxw); margin:0 auto; padding-inline:var(--ssl-s-4); }
@media (min-width:768px){ .ssl-wrap{ padding-inline:var(--ssl-s-7); } }

/* wide content scrolls in its own box, never the page */
.ssl-scroll-x{ overflow-x:auto; }

@media (prefers-reduced-motion: reduce){
  /* the scope roots themselves too: the chrome carries .ssl-scope on its own outermost node */
  .ssl-scope, .ssl-scope *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* The parent theme ships #wrapper #main{overflow:hidden}, which makes the chrome's outer
   main a clip ancestor and silently kills position:sticky for EVERYTHING inside the scope
   (the listing filter bar, the blog post rail). overflow:clip gives the same horizontal
   bleed protection without creating a scroll container, so sticky works again. */
#wrapper #main.ssl-scope{ overflow:visible; overflow:clip; }