/* ============================================================
   Doorbin — day and night for the inner pages.
   Craft, projects and connect were drawn at night, so this file gives
   them a day; the wisdom index was drawn by day, so it gets a night.
   The home is left exactly as it is.
   ============================================================ */

/* ---------------- craft rail: day ---------------- */
html[data-theme="light"] .craft-page,
html[data-theme="light"] .craft-page .roll { background: var(--ground); color: var(--ink); }
/* the cards sit on photographs, so they keep their night ink in either theme */
html[data-theme="light"] .project-card {
  --ink: #f2efe9;
  --ink-dim: #cfc9bd;
  --ink-faint: #8f887a;
  --ground: #08080a;
  color: #f2efe9;
}
html[data-theme="light"] .project-card a,
html[data-theme="light"] .project-card a:hover,
html[data-theme="light"] .project-card__link:hover { color: #f2efe9; }

/* ---------------- project pages: day ---------------- */
html[data-theme="light"] body.project-page { background: #ece9e2; color: #16150f; }
html[data-theme="light"] .project-page .showcase,
html[data-theme="light"] .project-page .showcase__category,
html[data-theme="light"] .project-page .showcase__fact dt,
html[data-theme="light"] .project-page .showcase__fact dd,
html[data-theme="light"] .project-page .project-head__fact dd,
html[data-theme="light"] .project-page .project-head__lede,
html[data-theme="light"] .project-page .project-about__lede { color: #16150f; }
html[data-theme="light"] .project-page .gallery__note,
html[data-theme="light"] .project-page .project-about__note { color: #56524a; }
html[data-theme="light"] .project-page .more__step { border-color: rgba(22, 21, 15, 0.26); color: #16150f; }
html[data-theme="light"] .project-page .more__step:hover { background: #16150f; border-color: #16150f; color: #ece9e2; }
/* the full-screen gallery stays dark in either theme: it is for the photographs */
html[data-theme="light"] .lightbox {
  --ink: #f2efe9;
  --rule: rgba(242, 239, 233, 0.3);
  --wash: rgba(242, 239, 233, 0.16);
  --wash-strong: rgba(242, 239, 233, 0.26);
  color: #f2efe9;
}

/* ---------------- connect: day ---------------- */
html[data-theme="light"] body.connect-page { background: #ece9e2; color: #16150f; }
html[data-theme="light"] .connect-page .connect__eyebrow,
html[data-theme="light"] .connect-page .connect__body,
html[data-theme="light"] .connect-page .connect__intro,
html[data-theme="light"] .connect-page .call__label,
html[data-theme="light"] .connect-page .call__number,
html[data-theme="light"] .connect-page .call__hours { color: #16150f; }
html[data-theme="light"] .connect-page .call__number:hover { color: var(--accent); }
html[data-theme="light"] .connect-page .form__field { border-color: rgba(22, 21, 15, 0.24); color: #16150f; }
html[data-theme="light"] .connect-page .form__field::placeholder { color: rgba(22, 21, 15, 0.5); }
html[data-theme="light"] .connect-page .form__field:focus { border-color: rgba(22, 21, 15, 0.6); }
html[data-theme="light"] .connect-page .form__submit { background: #16150f; color: #ece9e2; }
html[data-theme="light"] .connect-page .call { border-top-color: rgba(22, 21, 15, 0.14); }

/* ---------------- wisdom index: night ---------------- */
html[data-theme="dark"] body.wisdom-page {
  --ink: #f2efe9;
  --rule: rgba(242, 239, 233, 0.3);
  --wash: rgba(242, 239, 233, 0.16);
  --wash-strong: rgba(242, 239, 233, 0.26);
  background: #0b0b09;
  color: #e8e5dd;
}
html[data-theme="dark"] .wisdom-page .wisdom-hero__lede { color: #cfc9bd; }
html[data-theme="dark"] .wisdom-page .tab { background: #1c1b18; color: #e8e5dd; }
html[data-theme="dark"] .wisdom-page .tab[aria-selected="true"] { background: #e8e5dd; color: #0b0b09; }
html[data-theme="dark"] .wisdom-page .dropdown__toggle { border-color: rgba(232, 229, 221, 0.26); color: #e8e5dd; }
html[data-theme="dark"] .wisdom-page .dropdown__toggle:hover { border-color: #e8e5dd; }
html[data-theme="dark"] .wisdom-page .dropdown__panel { background: #141416; border-color: rgba(232, 229, 221, 0.14); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .wisdom-page .dropdown__option { color: #e8e5dd; }
html[data-theme="dark"] .wisdom-page .dropdown__option:hover { background: #1f1e1b; }
html[data-theme="dark"] .wisdom-page .filters__clear,
html[data-theme="dark"] .wisdom-page .library__empty,
html[data-theme="dark"] .wisdom-page .craft-card__meta { color: #8f887a; }
html[data-theme="dark"] .wisdom-page .filters__clear:hover { color: #e8e5dd; }
html[data-theme="dark"] .wisdom-page .stepper__button { border-color: rgba(232, 229, 221, 0.3); color: #e8e5dd; }
html[data-theme="dark"] .wisdom-page .stepper__button:hover { background: #e8e5dd; border-color: #e8e5dd; color: #0b0b09; }
html[data-theme="dark"] .wisdom-page .entry__frame,
html[data-theme="dark"] .wisdom-page .craft-card__frame { background: #1a1916; }
html[data-theme="dark"] .wisdom-page .entry__frame--video { background: #1a1916; box-shadow: inset 0 0 0 1px rgba(232, 229, 221, 0.1); }
html[data-theme="dark"] .wisdom-page .entry__standfirst { color: #a8a29a; }
html[data-theme="dark"] .wisdom-page .explore__filter { border-color: rgba(232, 229, 221, 0.3); color: #e8e5dd; }
html[data-theme="dark"] .wisdom-page .explore__filter:hover { background: #1f1e1b; }
html[data-theme="dark"] .wisdom-page .explore__filter[aria-pressed="true"] { background: #e8e5dd; border-color: #e8e5dd; color: #0b0b09; }
html[data-theme="dark"] .wisdom-page .subscribe__outline { stroke: rgba(232, 229, 221, 0.26); }
html[data-theme="dark"] .wisdom-page .subscribe__title,
html[data-theme="dark"] .wisdom-page .subscribe__mark.is-lit .subscribe__title { color: #e8e5dd; }
html[data-theme="dark"] .wisdom-page .subscribe__body,
html[data-theme="dark"] .wisdom-page .subscribe__mark.is-lit .subscribe__body { color: #a8a29a; }
html[data-theme="dark"] .wisdom-page .subscribe__cta,
html[data-theme="dark"] .wisdom-page .subscribe__mark.is-lit .subscribe__cta { background: #e8e5dd; color: #0b0b09; }
@media (min-width: 1025px) {
  html[data-theme="dark"] .wisdom-page .subscribe__mark.is-lit .subscribe__title,
  html[data-theme="dark"] .wisdom-page .subscribe__mark.is-lit .subscribe__body { color: #f4f2ed; }
}

/* ============================================================
   THE NAV — one rule for every inner page, in both themes.
   No page stylesheet sets anything on .nav; this is the only place.
   The bar takes its page's own background, so it always matches.
   ============================================================ */
doorbin-nav { background: inherit; }
html[data-theme] body .nav { z-index: 60; padding: 26px var(--gutter); }
html[data-theme] body .nav--solid { background: inherit; }
html[data-theme] body .nav__logo svg { width: 122px; }

html[data-theme="dark"] body .nav {
  --ink: #ffffff;
  --rule: rgba(232, 229, 221, 0.3);
  --wash: rgba(232, 229, 221, 0.14);
  --wash-strong: rgba(232, 229, 221, 0.24);
  color: #ffffff;
}
html[data-theme="light"] body .nav {
  --ink: #000000;
  --rule: rgba(22, 21, 15, 0.26);
  --wash: rgba(22, 21, 15, 0.07);
  --wash-strong: rgba(22, 21, 15, 0.13);
  color: #000000;
}
html[data-theme] body .nav .pill,
html[data-theme] body .nav .pill:hover,
html[data-theme] body .nav a:hover { color: inherit; }

html[data-theme="dark"] body .nav .pill--current,
html[data-theme="dark"] body .nav .pill--current:hover { background: #ffffff; border-color: #ffffff; color: #000000; }
html[data-theme="light"] body .nav .pill--current,
html[data-theme="light"] body .nav .pill--current:hover { background: #000000; border-color: #000000; color: #ffffff; }

@media (max-width: 1024px) {
  html[data-theme] body .nav { padding: 18px var(--gutter-sm); }
  html[data-theme] body .nav__logo svg { width: 104px; }
}

/* the nav switches in one step with the theme: no colour animates, so the
   text can never pass through a third colour on the way */
html.is-theming body .nav,
html.is-theming body .nav *,
html.is-theming body .menu,
html.is-theming body .menu * { transition: none !important; }
html[data-theme] body .nav .pill { transition: background 0.3s ease, border-color 0.3s ease; }