/* JayLM Studio: the dark identity's shared shell. Loads after site.css and pages.css on the pages whose body carries
   page-dark (the Home and Pricing), before each page's own stylesheet. It sets the tokens those pages share and recolours
   the shared bar, footer, skip link and dock without changing their markup. Page-only rules live in css/home.css and
   css/pricing.css. */

html:has(body.page-dark) { background: #17181a; color-scheme: dark; }
.page-dark {
  --ground: #17181a;       /* graphite: the page */
  --ground-2: #222326;     /* the bench: the ask, the chosen chip */
  --text: #eeeae1;
  --muted: #a9a59c;
  --ink: #121314;          /* text on the light button */
  --signal: #e8461f;       /* the one accent */
  --line: rgba(238, 234, 225, .18);
  --line-strong: rgba(238, 234, 225, .34);

  --col-gap: 24px;
  --pad-1: 48px; --pad-2: 64px; --pad-3: 96px;
  --t-h2: clamp(2.25rem, 4vw, 3.6rem);
  --t-lede: 1.25rem;
  --t-body: 1.0625rem;
  --t-label: 0.8125rem;
  --t-meta: 0.9375rem;

  background: var(--ground);
  color: var(--text);
}
@media (min-width: 900px) { .page-dark { --pad-1: 64px; --pad-2: 96px; --pad-3: 128px; } }
.page-dark main { font-variation-settings: normal; }

/* Shared shell on the dark ground */
.page-dark .skip { background: var(--text); color: var(--ink); }
.page-dark .bar { background: color-mix(in srgb, var(--ground) 78%, transparent); border-bottom: 1px solid var(--line); }
.page-dark .bar.is-scrolled { border-bottom-color: var(--line); }
@supports (backdrop-filter: blur(10px)) { .page-dark .bar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.page-dark .bar__nav a { color: var(--text); font-weight: 600; }
.page-dark .btn { background: var(--text); color: var(--ink); }
.page-dark .btn:hover { background: #fff; }
/* The name logo is drawn with ink in the shared SVG; on the dark ground it is masked in bone and the J notch is redrawn in vermilion */
.page-dark .mark { position: relative; color: var(--text); }
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .page-dark .mark__logo { opacity: 0; }
  .page-dark .mark::before, .page-dark .mark::after { content: ''; position: absolute; pointer-events: none; }
  .page-dark .mark::before { left: 0; top: 50%; width: 140px; height: 37.8px; translate: 0 -50%; background: currentColor; -webkit-mask: url(../assets/brand/logo-name.svg) no-repeat left center / 140px auto; mask: url(../assets/brand/logo-name.svg) no-repeat left center / 140px auto; }
  .page-dark .mark::after { left: 6.98px; top: calc(50% - 18.9px); width: 6.4px; height: 6.11px; background: var(--signal); }
}
@supports not ((mask-image: none) or (-webkit-mask-image: none)) { .page-dark .mark__logo { filter: invert(1) hue-rotate(180deg); } }
@media (max-width: 860px) {
  .page-dark .bar__menu { color: var(--text); border-color: var(--text); }
  .page-dark .bar__nav { background: var(--ground); border-bottom-color: var(--line); }
  .page-dark .bar__nav a { border-bottom-color: var(--line); }
  /* Without JavaScript the bar is in the flow and wraps its links; the duplicate contact link goes so the opening action stays on the first screen */
  html:not(.ready) .page-dark .bar { gap: 4px 12px; padding-top: 6px; padding-bottom: 6px; }
  html:not(.ready) .page-dark .bar__nav { flex-basis: 100%; gap: 0 8px; }
  html:not(.ready) .page-dark .bar__nav a { min-height: 40px; padding: 0 10px 0 0; }
  html:not(.ready) .page-dark .bar__nav .bar__nav-cta { display: none !important; }
}

/* Footer (shared markup): nothing louder than the page's closing */
.page-dark .foot { background: var(--ground); color: var(--muted); padding-top: 32px; border-top: 1px solid var(--line); }
.page-dark .foot__row { border-top-color: var(--line); align-items: start; }
.page-dark .foot__nav a { color: var(--text); font-weight: 500; }
.page-dark .foot__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.page-dark .foot__details, .page-dark .foot__reach { font-size: var(--t-meta); color: var(--muted); min-width: 0; }
.page-dark .foot__details a, .page-dark .foot__reach a { color: var(--text); font-weight: 600; text-underline-offset: 4px; overflow-wrap: anywhere; }
.page-dark .foot__reach a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
.page-dark .foot__fine { color: var(--muted); }

/* Dock (shared markup): contact one tap away on phones once the opening action has scrolled out */
@media (max-width: 860px) {
  .page-dark .dock { background: var(--text); color: var(--ink); font-weight: 700; box-shadow: 0 0 0 2px var(--ground); }
  .page-dark .dock::before { display: none; }
}