/* ============================================================
   Shared palette — orange is the only brand colour now.
   (The bottom-left theme switcher was removed; the alternate
   Light / Plum / Phthalo palettes are retired.) Loaded AFTER each
   page's inline <style> so these rules win by source order. Still
   themes the hero canvas via theme.js (window.setHeroBG / setHeroAccent).
   ============================================================ */

/* token defaults (orange) — supplements each page's base :root */
:root{
  --line2:#2E2E33; --accent-ink:#0B0B0C; --bg-rgb:11,11,12; --accent-rgb:255,90,31;
  --h-eyebrow:#BDBDC4; --h-sub:#C9C8C4; --h-meta:#ABABB2; --h-metab:#E4E4E2; --hero-accent-rgb:255,90,31;
}

/* cross-page chrome that was hardcoded — re-point to themed tokens
   (equal specificity, loaded after the page styles, so these win) */
nav{background:rgba(var(--bg-rgb),.72);border-bottom-color:var(--line)}
.btn-p{color:var(--accent-ink)}
.btn-g{border-color:var(--line2)}
.pill,.nav-pill{color:var(--accent-ink)!important}
.badge{color:var(--accent-ink)}
/* specificity fix: .nav-links a (0,1,1) beats .pill (0,1,0) for border-radius/padding */
.nav-links a.pill{border-radius:999px!important;padding:8px 18px!important;background:var(--orange)!important;font-weight:600!important}
.send{color:var(--accent-ink)}                              /* contact form button */
.why-ic,.skill .ic{background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.25)}
/* hovers + panels */
.card:hover{border-color:var(--line2)}
.why-card:hover{border-color:var(--line2)}
.chip-f:hover{border-color:var(--line2)}
.btn-g:hover{border-color:var(--mid);background:var(--line)}
.exp-row:hover{background:rgba(127,127,127,.10)}
.portrait,.cc-left{background:var(--surface)}
.cc-left .scrim{background:linear-gradient(180deg,rgba(var(--bg-rgb),.12),rgba(var(--bg-rgb),.82))}
.bio p{color:var(--mid)}
.bio b,.cc-name{color:var(--fg)}
.t.fmt{border-color:rgba(var(--accent-rgb),.4)}            /* work-page format tag */
.t.fmt-i{color:var(--orange);border-color:rgba(var(--accent-rgb),.4)} /* homepage inline-tag class */

/* visually-hidden but screen-reader-readable (form labels etc.) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* visible keyboard focus — was missing site-wide. :focus-visible only fires for
   keyboard/AT navigation, so mouse clicks stay clean. Outline follows each
   element's own border-radius, so pills/cards keep their shape. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .send:focus-visible,
.pill:focus-visible, .chip-f:focus-visible, .card:focus-visible, summary:focus-visible,
#shuffle:focus-visible{
  outline:2px solid var(--orange); outline-offset:3px;
}
.fin:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; border-color:var(--orange) }

/* wordmark star motif — matches favicon ji* */
.wm-star{color:var(--orange);font-style:normal}

/* footer: stack vertically on narrow mobile */
@media(max-width:600px){.foot{flex-direction:column;align-items:flex-start;gap:10px}}

/* scroll-reveal — html.anim is added pre-paint by theme.js (only when motion is allowed),
   so targets start hidden with no flash; the IO adds .is-in to reveal them. */
@media (prefers-reduced-motion: no-preference){
  html.anim .why-card, html.anim .card, html.anim .exp-line, html.anim .skill, html.anim .contact-card, html.anim .form-wrap{
    opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
  html.anim .why-card.is-in, html.anim .card.is-in, html.anim .exp-line.is-in, html.anim .skill.is-in, html.anim .contact-card.is-in, html.anim .form-wrap.is-in{
    opacity:1; transform:none}
}