/* 13 Nov 2026: one ground for the whole site. Every page sits on the same ink as /barbershops/ and the commercials; the layout of each page is unchanged. Same tokens as barbers.css. */
html.ink {
  --paper: #131313;         /* the commercials' ink (18 Oct 2026: page matched to the ads) */
  --paper-2: #1b1b1c;
  --ink: #f4f4f2;           /* the commercials' paper */
  --soft: #a6a6a0;
  --line: #2a2a2e;
  --accent: #2742ff;
  --on-accent: #ffffff;
  --hi: #7d8dff;            /* blue that reads on ink: the commercials' kicker blue */
  --glow: none;             /* no blue halo (16 Oct 2026: option D); kept as a token so one line brings it back */
  --shadow: 0 30px 60px -28px rgb(0 0 0 / .8), 0 12px 24px -16px rgb(0 0 0 / .6);
  --accent-on-ink: #7d8dff;
}
html.ink body { background: var(--paper); color: var(--ink); }
.ink .mark-word path[fill="#2742ff"] { fill: var(--hi); }
.ink .pill-accent { box-shadow: var(--glow); }
.ink .pill-accent:hover { background: #fff; border-color: #fff; color: #0f0f10; box-shadow: none; }
.ink .link-arrow:hover { color: var(--hi); }
.ink .kicker::before { background: var(--hi); }

/* Blocks that were drawn inverted on the old light pages (dark box on light ground).
   On ink they flip their two tokens back, so they read as a slightly raised dark panel, not a white slab. */
.ink .send, .ink .bd-get, .ink .sv-item.feature, .ink .sys li.is-live, .ink .part-shot.ai { --ink: #1b1b1c; --paper: #f4f4f2; }
.ink .how { --ink: #131313; --paper: #f4f4f2; --accent-on-ink: #7d8dff; border-top: 1.5px solid var(--line); }
.ink .send, .ink .bd-get, .ink .sv-item.feature { box-shadow: inset 0 0 0 1.5px var(--line); }

/* the blue in headlines: the readable-on-ink blue, same as the barbershop pages */
html.ink h1 em, html.ink h2 em { color: var(--hi); }
html.ink .sv-price { color: var(--hi); }
.ink .mark-3a path[fill="#2742FF"] { fill: var(--hi); }

/* 13 Nov: the owner wants the live site's design (cards, drawn screens, layout), only on the black ground. */
@media (max-width: 900px) { .ink .bd-hero { grid-template-columns: minmax(0, 1fr); } }

/* 13 Nov: never crop a real picture. The service pictures (business cards, social, shelf) show whole, at their own shape. */
html.ink .sv-item > .kit-img { height: auto; overflow: hidden; }
html.ink .sv-item > .kit-img img { height: auto; object-fit: contain; }

/* 13 Nov: the "one system" picture shows ten parts of a business, not four */
html.ink .wire-10 { height: 560px; }
html.ink .wire-10 .wn:not(.wn-core) { left: var(--x); top: var(--y); width: 236px; padding: 12px 16px; }
html.ink .wire-10 .wn b { font-size: 16px; }
.wire-more { margin: clamp(28px, 4vh, 44px) auto 0; max-width: 40ch; text-align: center; font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.01em; color: var(--paper); }
@media (max-width: 900px) {
  html.ink .wire-10 { height: auto; }
  html.ink .wire-10 .wn:not(.wn-core) { width: auto; }
}
@media (max-width: 760px) {
  html.ink .wire-10 { grid-template-columns: 1fr 1fr; gap: 10px; }
  html.ink .wire-10 .wn:not(.wn-core) { position: static; padding: 12px 14px; }
  html.ink .wire-10 .wn:not(.wn-core)::before { display: none; }
  html.ink .wire-10 .wn b { font-size: 15px; }
  html.ink .wire-10 .wn span { font-size: 13px; }
}

/* the topic bar from the features page: pinned under the header, lights the section you are in */
.f-jump { position: sticky; top: var(--nav-h); z-index: 15; display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 10px var(--gutter); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.f-jump::-webkit-scrollbar { display: none; }
.f-jump .pill { height: 46px; font-size: 15px; flex: none; white-space: nowrap; }
.f-jump .pill-ghost:hover, .f-jump .pill-ghost[aria-current] { background: var(--ink); color: var(--paper); }
.f-jump .pill-accent { margin-left: auto; }
.ink .band[id], .ink section[id] { scroll-margin-top: calc(var(--nav-h) + 66px); }

/* 13 Nov, the owner's pick: the new look everywhere, except "What we build" on home keeps its cards and little app drawings from the live site.
   So the service cards become ruled rows (no grey boxes, no drawn screens); real pictures stay. */
html.ink .sv-list { gap: 0 32px; }
html.ink .sv-item:not(.feature) { padding: 28px 0 8px; border-radius: 0; background: none; border-top: 1.5px solid var(--line); }
html.ink .sv-item > .kit:not(.kit-img) { display: none; }
html.ink .sv-item > .kit-img { margin: 0 0 22px; border: 0; border-radius: 12px; }

/* 13 Nov, the owner: "the buttons for the second menu are too big". Desktop: a step under the header's own button */
.f-jump { gap: 8px; padding: 8px var(--gutter); }
.f-jump .pill { height: 38px; font-size: 14px; padding: 0 16px; }
.ink .band[id], .ink section[id] { scroll-margin-top: calc(var(--nav-h) + 56px); }

/* phones: the topic bar is slimmer, fades at the edge so it reads as "swipe for more", and the lit topic slides into view */
@media (max-width: 640px) {
  .f-jump { gap: 6px; padding: 6px var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .f-jump .pill { height: 32px; font-size: 13px; padding: 0 12px; }
  .f-jump .pill-accent { margin-left: 0; }
  .f-jump::after { content: ""; flex: none; width: 28px; }
  .ink .band[id], .ink section[id] { scroll-margin-top: calc(var(--nav-h) + 48px); }
}
/* phones already have the main button in the bottom bar, so the topic bar keeps to topics; on services and brand development every topic then fits, like desktop */
@media (max-width: 640px) { .f-jump .pill-accent { display: none; } }

/* phones, 13 Nov: slimmer pills, and the topic bar takes the top while you scroll down (js/jump-nav.js) */
@media (max-width: 640px) {
  .f-jump .pill { height: 30px; font-size: 12.5px; padding: 0 12px; }
  .nav { transition: transform .3s ease; }
  .f-jump { transition: top .3s ease; }
  html.nav-up .nav { transform: translateY(-100%); }
  html.nav-up .f-jump { top: 0; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .nav, .f-jump { transition: none; } }
html.ink .sv-lead { max-width: 60ch; margin-top: 18px; color: var(--soft); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
html.ink .sv-promise { margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; max-width: 52ch; }