/* Dark theme for the portfolio. Activated by html[data-theme="dark"].
   Warm dark palette matching the sienna brand:
   bg #1a1612 · surface #241e18 · text #ece6dd · soft #a89e90 · line #39322a · accent #e08a6c */

html[data-theme="dark"] body { background: #1a1612; color: #ece6dd; }

/* ---- nav ---- */
html[data-theme="dark"] .navbar { background: #1a1612; border-bottom-color: #39322a; }
html[data-theme="dark"] .theme-toggle { border-color: #39322a; color: #ece6dd; }
html[data-theme="dark"] .theme-toggle:hover { border-color: #e08a6c; color: #e08a6c; }
/* lift the rust logo so it reads on a dark background */
html[data-theme="dark"] .image-117 { filter: brightness(1.5) saturate(1.1); }
/* the authentic Skillshare "Sk." mark ships white (monochrome). Show it black on
   the light background; leave it white on the dark one. */
img[src*="Skillshare-mark"] { filter: brightness(0); }
html[data-theme="dark"] img[src*="Skillshare-mark"] { filter: none; }

/* ---- generic text ---- */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] [class*="heading-"] { color: #ece6dd; }
html[data-theme="dark"] p, html[data-theme="dark"] li,
html[data-theme="dark"] [class*="paragraph-"] { color: #cfc7bb; }
/* links inherit surrounding text by default; only inline content links get the accent */
html[data-theme="dark"] a { color: inherit; }
html[data-theme="dark"] .paragraph-16 a { color: #e08a6c; }

/* ---- homepage ---- */
html[data-theme="dark"] .new-banner,
html[data-theme="dark"] [class*="new-banner"] { background: #241e18; border-color: #39322a; }
html[data-theme="dark"] .paragraph-14 { color: #ece6dd; }
/* black "What's New" arrow icon -> light */
html[data-theme="dark"] .image-171 { filter: brightness(0) invert(1); }
html[data-theme="dark"] .button.ghost-button { color: #ece6dd; border-color: #4a4138; }
html[data-theme="dark"] .button.ghost-button:hover { background: #241e18; }
/* featured-project link cards (the bordered row is the inner .portfolio-list-item) */
html[data-theme="dark"] .portfolio-list-item { background: #241e18; border-color: #39322a; }
html[data-theme="dark"] .link-block-37, html[data-theme="dark"] .link-block-37 * { color: #ece6dd; }
html[data-theme="dark"] .link-block-37:hover .portfolio-list-item { border-color: #e08a6c; }
/* footer */
html[data-theme="dark"] .site-footer { border-top-color: #39322a; }
html[data-theme="dark"] .mg-bottom-0 { color: #a89e90; }
/* footer social icons are black monochrome -> soft light */
html[data-theme="dark"] .social-icon---footer { filter: brightness(0) invert(0.8); }

/* ---- case study ---- */
html[data-theme="dark"] .cs-eyebrow { color: #e08a6c; }
html[data-theme="dark"] .cs-subtitle { color: #a89e90; }
html[data-theme="dark"] .cs-body { color: #cfc7bb; }
html[data-theme="dark"] .cs-body h1, html[data-theme="dark"] .cs-body h2,
html[data-theme="dark"] .cs-body h3, html[data-theme="dark"] .cs-body h4,
html[data-theme="dark"] .cs-body strong { color: #ece6dd; }
html[data-theme="dark"] .cs-body a { color: #e08a6c; }
html[data-theme="dark"] .cs-body blockquote { border-left-color: #4a4138; color: #a89e90; }
html[data-theme="dark"] .cs-body code,
html[data-theme="dark"] .cs-body pre { background: #241e18; color: #ece6dd; }
html[data-theme="dark"] .cs-body hr { border-color: #39322a; }

/* sidebar */
html[data-theme="dark"] .meta-card { background: #241e18; border-color: #39322a; }
html[data-theme="dark"] .meta-label { color: #ece6dd; }
html[data-theme="dark"] .meta-value { color: #a89e90; }
html[data-theme="dark"] .toc-title { color: #ece6dd; }
html[data-theme="dark"] .toc a { color: #a89e90; border-left-color: #39322a; }
html[data-theme="dark"] .toc a.active { color: #ece6dd; }
html[data-theme="dark"] .next-project { background: #241e18; border-color: #39322a; }
html[data-theme="dark"] .next-project .np-eyebrow { color: #a89e90; }

/* end-of-article next band */
html[data-theme="dark"] .cs-next-link { border-color: #39322a; }
html[data-theme="dark"] .cs-next-link:hover { border-color: #e08a6c; }
html[data-theme="dark"] .cs-next-label { color: #a89e90; }

/* ---- password gate / lock card ---- */
html[data-theme="dark"] .lock-card { background: #241e18; border-color: #39322a; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
html[data-theme="dark"] .lock-badge { background: rgba(224,138,108,.14); color: #e08a6c; }
html[data-theme="dark"] .lock-desc { color: #a89e90; }
html[data-theme="dark"] .lock-form input { background: #1a1612; border-color: #39322a; color: #ece6dd; }
html[data-theme="dark"] .lock-form input::placeholder { color: #8a7f72; }
html[data-theme="dark"] .lock-hint { color: #8a7f72; }