/* Accent values come exclusively from accent-config.js. */
:root{--accent:var(--accent-light,#617a23);--accent-text:var(--accent-text-light,#617a23);--accent-contrast:var(--accent-contrast-light,#fff);--accent-hover:var(--accent-hover-light,var(--accent));--accent-subtle:color-mix(in srgb,var(--accent) 10%,transparent);--accent-border:color-mix(in srgb,var(--accent) 45%,transparent)}
html:not([data-theme=day]){--accent:var(--accent-dark,#c5df76);--accent-text:var(--accent-text-dark,#c5df76);--accent-hover:var(--accent-hover-dark,var(--accent));--accent-contrast:var(--accent-contrast-dark,#090a0b)}
html[data-theme=day] .dark .contact{--accent:var(--accent-dark);--accent-text:var(--accent-text-dark);--accent-hover:var(--accent-hover-dark);--accent-contrast:var(--accent-contrast-dark)}
body .dark .cta,body.dark .cta,html[data-theme] body .contact .cta,html[data-theme] body .contact #send-button,html[data-theme] body .om-fluent-form .ff-btn-submit{background:var(--accent)!important;color:var(--accent-contrast)!important;border-color:var(--accent)!important}
html[data-theme] body .cta:hover,html[data-theme] body .contact #send-button:hover,html[data-theme] body .om-fluent-form .ff-btn-submit:hover{background:var(--accent-hover)!important}
a.text-link:hover,a.back-link:hover,.site-header nav a:hover,.mobile-navigation nav a:hover,.next-project a:hover{color:var(--accent-text)!important}
.site-header nav a[aria-current],.site-header nav a.active{box-shadow:0 2px var(--accent)}
html[data-theme] :is(a,button,input,textarea,select):focus-visible{outline:2px solid var(--accent-text)!important;outline-offset:4px}
.eyebrow::before{content:"";display:inline-block;width:16px;height:1px;margin-right:10px;vertical-align:middle;background:var(--accent)}
.site-brand,.accent-logo-brand{position:relative}.site-brand::after,.accent-logo-brand::after{content:"";position:absolute;bottom:-8px;left:0;width:18px;height:2px;background:var(--accent)}
.accent-logo-brand{display:block;width:88px;flex-shrink:0}.mobile-menu-top .accent-logo-brand img{width:100%;max-width:none}
.accent-control{position:relative;display:flex}.theme-control .accent-trigger{width:40px;height:40px;padding:10px;justify-content:center;color:var(--om-ink);border-radius:50%}.accent-trigger svg{width:20px;height:20px}.accent-trigger[aria-expanded=true]{box-shadow:inset 0 0 0 1px var(--accent-border)}
.accent-panel{position:absolute;right:0;top:calc(100% + 14px);display:grid;grid-template-columns:repeat(3,44px);gap:6px;padding:14px;background:var(--om-surface,#f5f2eb);border:1px solid var(--om-line,#c6cbbf);border-radius:14px;box-shadow:0 8px 25px #00000018;z-index:100;max-width:calc(100vw - 32px)}
.accent-panel[hidden]{display:none}.theme-control .accent-swatch{display:block;position:relative;width:44px;height:44px;padding:8px;background:transparent!important;border:0;border-radius:50%;box-shadow:none;color:var(--om-ink)}
.accent-swatch::before{content:"";display:block;width:28px;height:28px;border-radius:50%;background:var(--swatch-light)}html:not([data-theme=day]) .accent-swatch::before{background:var(--swatch-dark)}
.theme-control .accent-swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--om-ink)}.theme-control .accent-swatch:hover{box-shadow:inset 0 0 0 1px var(--accent-border)}
.mobile-appearance{position:relative}.mobile-appearance .accent-control{position:static}.mobile-appearance .accent-panel{top:auto;bottom:calc(100% + 14px);left:0;right:auto}.mobile-appearance .accent-control{margin-left:5px}
@media(prefers-reduced-motion:reduce){.accent-control *{transition:none!important}}

.theme-control .accent-trigger[aria-expanded=true]{background:var(--accent-subtle)}
.mobile-navigation nav a[aria-current=location]{color:var(--accent-text)}

/* Approved accent dot: aligned to the base of the original OM symbol. */
.site-brand::after,.accent-logo-brand::after{left:calc(100% + 6%);top:57.58%;bottom:auto;width:11.25%;height:auto;aspect-ratio:1;border-radius:50%;background:var(--accent)}

/* The masthead uses the original artwork with a separate live accent dot. */
.hero-monogram{position:relative;width:100%;padding-right:15%}.hero-monogram::after{content:"";position:absolute;right:0;bottom:7.99%;width:10%;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.dark .hero-monogram .hero-symbol{display:block;width:100%;margin:0;max-width:none}
@media(max-width:900px){.hero-monogram{display:none}}

/* Compact appearance controls; buttons retain accessible names. */
.theme-control .mode-label{display:none}.theme-control [data-mode]{width:40px;min-height:40px;justify-content:center;padding:10px}