:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #477c67;outline-offset:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(max-width:600px){.case-study img{max-width:100%;height:auto}}
/* One primary action treatment, shared with the scroll progress indicator. */
:root{--action-bg:#293722;--action-hover:#435936;--action-text:#f3f6ec}
:root[data-theme=dark]{--action-bg:#c9dea9;--action-hover:#d8e8bf;--action-text:#26321e}
:root .designer-home .avatar-work-link,
.designer-home .hiring-strip .mini-pill,
#experience .experience-resume{
 display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
 background:var(--action-bg);color:var(--action-text);border:1px solid var(--action-bg);
 border-radius:3px;padding:14px 17px;min-height:48px;
 font-family:'Outfit Hero',var(--body);font-size:14px;font-weight:500;line-height:1.4;
 box-shadow:none;transition:background .2s,border-color .2s,transform .2s;
}
:root .designer-home .avatar-work-link:hover,
.designer-home .hiring-strip .mini-pill:hover,
#experience .experience-resume:hover{
 background:var(--action-hover);border-color:var(--action-hover);color:var(--action-text);transform:translateY(-2px);
}
.scroll-progress span{background:var(--action-bg)}
:root .designer-home .avatar-work-link{display:flex}

/* Compact, accessible return control on long project pages. */
.back-to-top{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));z-index:1000;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--action-bg);border-radius:50%;background:var(--action-bg);color:var(--action-text);box-shadow:0 4px 18px #00000018;cursor:pointer;transition:background .2s,border-color .2s}
.back-to-top[hidden]{display:none}
.back-to-top:hover{background:var(--action-hover);border-color:var(--action-hover)}
.back-to-top svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
@media(max-width:600px){.back-to-top{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}}

/* Portfolio accents share the primary action palette, with paired text colours. */
:root{--color-accent:var(--action-bg);--accent:var(--action-bg);--accent-soft:rgba(41,55,34,.10)}
:root[data-theme=dark]{--color-accent:var(--action-bg);--accent:var(--action-bg);--accent-soft:rgba(201,222,169,.10)}
::selection{background:var(--action-bg);color:var(--action-text)}
.journey-stage-number,.work-guide-icon,.melo-map-root{background:var(--action-bg);color:var(--action-text)}
.round-link:hover,.mini-pill:hover{background:var(--action-hover);color:var(--action-text)}
.melo-case #system .melo-token-grid .melo-token-box:nth-child(3){background:var(--action-bg);color:var(--action-text)}
.melo-case #system .melo-token-grid .melo-token-box:nth-child(3) p{color:var(--action-text)}
/* The contact footer stays charcoal in both modes. */
.footer{--footer-bg:var(--palette-1b1c1c,#1b1c1c);--footer-text:#f3f6ec;--footer-muted:#c9dea9;background:var(--footer-bg);color:var(--footer-text)}
.footer .kicker{color:var(--footer-muted)}
.footer h2,.footer a{color:var(--footer-text)}
.footer h2 a:is(:hover,:focus-visible),.footer .footer-links a:is(:hover,:focus-visible){color:var(--footer-muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.footer .footer-bottom{color:var(--footer-muted);border-color:#c9dea94d}
.footer a:focus-visible{outline-color:var(--footer-muted)}

/* Supporting copy shares the approach-card typography. */
.designer-home .about-copy small,.designer-home .strength p{
 font-family:var(--body);font-size:var(--font-size-15);font-weight:400;
 line-height:1.55;letter-spacing:normal;color:var(--muted);
}

/* Keep the confidentiality context readable without competing with experience. */
.experience-confidentiality{max-width:720px;font-size:var(--text-small);line-height:var(--line-body);color:var(--muted);margin:var(--card-padding) 0 0}

/* Vector link arrows avoid platform emoji substitution and inherit theme/hover colours. */
.ui-arrow{display:inline-block;width:1em;height:1em;max-width:none;vertical-align:-.1em;flex-shrink:0;color:inherit;pointer-events:none}
.ui-arrow path{stroke-width:.75}

/* Eight-spoke brand mark is a vector, independent of device emoji fonts. */
.ui-asterisk{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex-shrink:0;color:inherit;pointer-events:none}
.ticker{align-items:center}

.ui-cursor-direction{display:inline-block;width:1.7em;height:1.7em;vertical-align:middle;color:inherit;pointer-events:none}