/* 2026-10-13 artistic pass for EVERY page (owner: "more artistic on all
   singrank.com pages, not only the homepage"). The same language as the
   homepage (ink-fx.css): one type system, earth-colour bands, colour objects,
   one terracotta poster per page. Loads after ink-fx.css, also in the KV
   article template (functions/blog/[[slug]].js). Home is left to ink-fx.css. */

html.sr-night {
  --a-ink: #1f1e1b; --a-muted: #5f5b53; --a-paper: #f7f6f3; --a-card: #fbfaf7;
  --a-oat: #ede7dc; --a-clay: #e6cdbb; --a-sage: #d6ddcc; --a-mist: #dbe2e5; --a-terra: #c4704f;
  --a-b-oat: rgba(237,231,220,.92); --a-b-sage: rgba(221,228,212,.92);
  --a-b-mist: rgba(222,229,231,.92); --a-b-clay: rgba(240,222,208,.92);
  --a-h1: clamp(42px, 5.8vw, 80px); --a-h2: clamp(32px, 4.2vw, 56px);
  --a-h3: clamp(20px, 1.6vw, 23px); --a-lead: clamp(17px, 1.4vw, 20px);
}
/* full-bleed band on any element, even inside a narrow container */
html.sr-night .a-band { box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band) !important; }

/* ---- 1. Type ----------------------------------------------------------- */
html.sr-night main h1:not(.svh-h1) {
  font-family: var(--font-serif), Georgia, serif !important; font-weight: 400 !important;
  font-size: var(--a-h1) !important; line-height: 1.02 !important; letter-spacing: -.035em !important;
  color: var(--a-ink) !important; max-width: 16ch; text-wrap: balance;
}
html.sr-night main h2:not(:is(.sv-home, .prose, .bcard, .news-card, .news-latest-card, .card, .proof-card, .ts-cap, .srp-plan, .rs-client, .sgd-col, aside, .article-service-rail, .article-service-slot, .toc-rail, .asr-cta, .article-promo-banner, .pcta) h2):not(.sgd-ch) {
  font-family: var(--font-serif), Georgia, serif !important; font-weight: 400 !important; font-style: normal !important;
  font-size: var(--a-h2) !important; line-height: 1.06 !important; letter-spacing: -.03em !important;
  color: var(--a-ink); max-width: 20ch; text-wrap: balance;
}
html.sr-night main :is(.sv-kicker, .srp-kicker, .srp-plan-label, .eyebrow, .news-kicker, .news-cta-kicker, .ts-stack-label, .sst-kicker, .pcta-eyebrow, .toc-label, .sgd-eyebrow, .asr-eyebrow, [class$="-eyebrow"], [class$="-kicker"]):not(.sv-home *) {
  font: 600 13px/1.5 var(--font-jakarta), system-ui, sans-serif !important; font-style: normal !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--a-muted) !important;
}
html.sr-night main :is(.sv-lead, .srp-lead, .sst-lead, .sgd-lead, .news-lead-copy p, .post-hero p):not(.sv-home *) {
  font-size: var(--a-lead) !important; line-height: 1.6 !important; color: var(--a-muted) !important; max-width: 58ch;
}
html.sr-night main :is(h3, h4):not(.sv-home *):not(.prose *) {
  font-family: var(--font-jakarta), system-ui, sans-serif !important; font-weight: 500 !important;
  letter-spacing: -.015em !important; line-height: 1.3 !important;
}
html.sr-night main :is(.sv-head, .srp-section-head, .news-section-head, .rs-head, .lr-head):not(.sv-home *) { display: block !important; margin-bottom: clamp(36px, 4.5vw, 56px) !important; }
html.sr-night main :is(.sv-head, .srp-section-head) :is(.sv-lead, .srp-lead, p) { margin-top: 18px !important; border: 0 !important; padding: 0 !important; }

/* ---- 2. Service and info pages (.sv, not home) -------------------------- */
html.sr-night .sv:not(.sv-home) > section { padding-block: clamp(80px, 9vw, 128px) !important; border: 0 !important; }
html.sr-night .sv:not(.sv-home) > section.sv-page-hero { padding-block: clamp(56px, 7vw, 104px) clamp(64px, 7vw, 104px) !important; }
html.sr-night .sv:not(.sv-home) > section.sv-paper:nth-of-type(4n+2) { background: var(--a-b-oat) !important; }
html.sr-night .sv:not(.sv-home) > section.sv-paper:nth-of-type(4n) { background: var(--a-b-sage) !important; }
html.sr-night .sv:not(.sv-home) > section.sv-paper:nth-of-type(4n+1) { background: var(--a-b-mist) !important; }
html.sr-night .sv:not(.sv-home) > section.sv-paper:nth-of-type(4n+3) { background: var(--a-b-clay) !important; }
/* the close of every page = the terracotta poster */
html.sr-night .sv:not(.sv-home) > section.sv-close > .sv-wrap {
  background: var(--a-terra); color: #fbf3ec; border-radius: 28px;
  padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 80px) !important; width: min(1180px, calc(100% - 32px));
}
html.sr-night .sv:not(.sv-home) > section.sv-close :is(h2, .sv-h2) { color: #fbf3ec !important; }
html.sr-night .sv:not(.sv-home) > section.sv-close :is(.sv-kicker, .sv-lead, p) { color: rgba(251,243,236,.84) !important; }
html.sr-night .sv:not(.sv-home) > section.sv-close .sv-button { background: #fbf3ec !important; color: var(--a-ink) !important; }
html.sr-night .sv:not(.sv-home) > section.sv-close .sv-link { color: #fbf3ec !important; text-decoration-color: rgba(251,243,236,.5) !important; }
html.sr-night .sv:not(.sv-home) > section.sv-close .sv-kicker::before { display: none !important; }
/* cards on these pages: flat colour objects, cycling the palette */
html.sr-night .sv:not(.sv-home) :is(.sv-advantage, .svm-step, .svm-measure, .ts-cap, .ts-decision, .sv-value, .sv-tech, .byo-card, .byo-path) {
  border: 0 !important; border-radius: 20px !important; box-shadow: none !important; background: var(--a-card) !important;
  padding: clamp(24px, 2.6vw, 36px) !important;
}
html.sr-night .sv:not(.sv-home) :is(.sv-advantages, .svm-steps, .svm-measures, .ts-cap-grid, .ts-decision-grid, .sv-values) > :nth-child(4n+1) { background: var(--a-clay) !important; }
html.sr-night .sv:not(.sv-home) :is(.sv-advantages, .svm-steps, .svm-measures, .ts-cap-grid, .ts-decision-grid, .sv-values) > :nth-child(4n+2) { background: var(--a-sage) !important; }
html.sr-night .sv:not(.sv-home) :is(.sv-advantages, .svm-steps, .svm-measures, .ts-cap-grid, .ts-decision-grid, .sv-values) > :nth-child(4n+3) { background: var(--a-mist) !important; }
html.sr-night .sv:not(.sv-home) :is(.sv-advantages, .svm-steps, .svm-measures, .ts-cap-grid, .ts-decision-grid, .sv-values) > :nth-child(4n+4) { background: var(--a-oat) !important; }
html.sr-night .sv:not(.sv-home) :is(.sv-advantages, .svm-steps, .svm-measures, .ts-cap-grid, .ts-decision-grid, .sv-values) { gap: 16px !important; }
html.sr-night .sv:not(.sv-home) :is(.sv-advantage, .svm-step, .svm-measure, .ts-cap, .ts-decision) p { color: #4a463f !important; }
html.sr-night main :is(.sph-frame, .sph-frame img) { border-radius: 18px !important; }

/* ---- 3. Pricing ---------------------------------------------------------- */
html.sr-night .srp-section { padding-block: clamp(72px, 8vw, 112px) !important; border: 0 !important; }
html.sr-night .srp-section:nth-of-type(1) { --band: var(--a-b-mist); }
html.sr-night .srp-section:nth-of-type(3) { --band: var(--a-b-oat); }
html.sr-night .srp-plan { border: 0 !important; border-radius: 20px !important; box-shadow: none !important; background: var(--a-card) !important; }
html.sr-night .srp-plans > .srp-plan:nth-child(2) { background: var(--a-ink) !important; color: #f3efe7 !important; }
html.sr-night .srp-plans > .srp-plan:nth-child(2) :is(h2, h3, p, li, span, strong, s, del, small, .srp-plan-label) { color: inherit !important; }
html.sr-night .srp-plans > .srp-plan:nth-child(2) :is(.srp-btn, a.srp-btn) { background: #f3efe7 !important; color: var(--a-ink) !important; }
html.sr-night :is(.srp-service, .srp-info) { border: 0 !important; border-radius: 20px !important; box-shadow: none !important; }
html.sr-night .srp-services > :nth-child(4n+1) { background: var(--a-clay) !important; }
html.sr-night .srp-services > :nth-child(4n+2) { background: var(--a-sage) !important; }
html.sr-night .srp-services > :nth-child(4n+3) { background: var(--a-mist) !important; }
html.sr-night .srp-services > :nth-child(4n+4) { background: var(--a-oat) !important; }
html.sr-night .srp-info { background: var(--a-card) !important; }
html.sr-night .srp-close { --band: transparent; }
html.sr-night .srp-close > * { position: relative; }
html.sr-night .srp-close { background: var(--a-terra) !important; color: #fbf3ec; border-radius: 28px !important; padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 80px) !important; margin-block: clamp(48px, 6vw, 80px) !important; border: 0 !important; }
html.sr-night .srp-close :is(h2, p, .srp-kicker) { color: #fbf3ec !important; }
html.sr-night .srp-close :is(a.srp-btn, .srp-btn) { background: #fbf3ec !important; color: var(--a-ink) !important; }

/* ---- 4. Results and case studies ----------------------------------------- */
html.sr-night .rs-client, html.sr-night .proof-card, html.sr-night main .card {
  border: 0 !important; border-radius: 24px !important; box-shadow: none !important;
  padding: clamp(24px, 3vw, 44px) !important;
}
html.sr-night .rs-client:nth-of-type(4n+1), html.sr-night .proof-card:nth-child(4n+1) { background: var(--a-b-oat) !important; }
html.sr-night .rs-client:nth-of-type(4n+2), html.sr-night .proof-card:nth-child(4n+2) { background: var(--a-b-sage) !important; }
html.sr-night .rs-client:nth-of-type(4n+3), html.sr-night .proof-card:nth-child(4n+3) { background: var(--a-b-mist) !important; }
html.sr-night .rs-client:nth-of-type(4n+4), html.sr-night .proof-card:nth-child(4n+4) { background: var(--a-b-clay) !important; }
html.sr-night .rs-client + .rs-client { margin-top: 16px !important; }
html.sr-night :is(.rs-stat, .hero-stat) :is(strong, b, .n, [class*="num"], [class*="value"]) {
  font-family: var(--font-serif), Georgia, serif !important; font-weight: 400 !important; letter-spacing: -.03em; color: var(--a-ink);
}
html.sr-night .hero-stat .n { color: var(--a-terra) !important; font-size: clamp(36px, 4vw, 56px) !important; }

/* ---- 5. Blog index ------------------------------------------------------- */
html.sr-night .news-lead { --band: var(--a-b-oat); padding-block: clamp(48px, 6vw, 80px) !important; }
html.sr-night :is(.bcard, .news-latest-card) { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html.sr-night :is(.bcard-media, .news-lead-media, .news-latest-card img, .bcard img) { border-radius: 16px !important; overflow: hidden; }
html.sr-night .bcard-tag { background: var(--a-oat) !important; color: var(--a-ink) !important; border: 0 !important; border-radius: 999px !important; padding: 3px 10px !important; font-size: 12px !important; }
html.sr-night .news-cta { border: 0 !important; border-radius: 24px !important; box-shadow: none !important; }
html.sr-night .news-cta:nth-of-type(odd) { background: var(--a-sage) !important; }
html.sr-night .news-cta:nth-of-type(even) { background: var(--a-clay) !important; }
html.sr-night :is(.news-cta-red, .news-cta-ink) { background: var(--a-terra) !important; color: #fbf3ec !important; }
html.sr-night :is(.news-cta-red, .news-cta-ink) * { color: inherit !important; }

/* ---- 6. Articles and long reading pages (.prose) ------------------------- */
html.sr-night main .prose { font-size: 18px; line-height: 1.75; color: #2c2a26; }
html.sr-night main .prose :is(h2) {
  font-family: var(--font-serif), Georgia, serif !important; font-weight: 400 !important;
  font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.12 !important; letter-spacing: -.025em !important;
  margin: 2.2em 0 .6em !important; color: var(--a-ink) !important;
}
html.sr-night main .prose :is(h3) { font-family: var(--font-jakarta), sans-serif !important; font-weight: 600 !important; font-size: 21px !important; margin: 1.8em 0 .5em !important; letter-spacing: -.01em !important; }
/* drop cap on the opening paragraph */
html.sr-night .post-page .prose > p:first-of-type::first-letter {
  float: left; font-family: var(--font-serif), Georgia, serif; font-size: 4.4em; line-height: .84;
  margin: .06em .12em 0 0; color: var(--a-terra);
}
html.sr-night main .prose blockquote {
  margin: 2em 0 !important; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) !important;
  background: var(--a-oat) !important; border: 0 !important; border-radius: 20px !important;
  font-family: var(--font-serif), Georgia, serif; font-size: clamp(21px, 2vw, 26px); line-height: 1.4; color: var(--a-ink);
}
html.sr-night main .prose blockquote p { margin: 0 !important; }
html.sr-night main .prose :is(img, figure img, video) { border-radius: 16px !important; }
html.sr-night main .prose figcaption { font-size: 14px; color: var(--a-muted); margin-top: 10px; }
html.sr-night main .prose table { border-collapse: separate !important; border-spacing: 0; border-radius: 16px; overflow: hidden; background: var(--a-card); border: 0 !important; }
html.sr-night main .prose thead th { background: var(--a-oat) !important; color: var(--a-ink) !important; border: 0 !important; font-weight: 600; }
html.sr-night main .prose :is(td, th) { border: 0 !important; border-bottom: 1px solid rgba(31,30,27,.08) !important; padding: 12px 16px !important; }
html.sr-night main .prose a { color: var(--a-ink) !important; text-decoration: underline !important; text-decoration-color: var(--a-terra) !important; text-underline-offset: 4px; text-decoration-thickness: 1.5px !important; }
html.sr-night main .prose :is(ul, ol) li::marker { color: var(--a-terra); }
html.sr-night main .prose hr { border: 0; height: 12px; background: radial-gradient(circle, var(--a-clay) 5px, transparent 6px) center / 28px 12px repeat-x; margin: 3em auto; width: 100px; }
/* the article call to action = the same terracotta poster */
html.sr-night .pcta { background: var(--a-terra) !important; color: #fbf3ec !important; border: 0 !important; border-radius: 28px !important; box-shadow: none !important; padding: clamp(32px, 4vw, 56px) !important; }
html.sr-night .pcta :is(h2, h3, p, span, .pcta-h, .pcta-b, .pcta-eyebrow, .pcta-note) { color: #fbf3ec !important; }
html.sr-night .pcta a { background: #fbf3ec !important; color: var(--a-ink) !important; border-radius: 999px !important; }
html.sr-night :is(.article-promo-banner, .article-service-rail, .author-card, .related) { border: 0 !important; border-radius: 20px !important; box-shadow: none !important; background: var(--a-oat) !important; }
html.sr-night .post-hero { padding-bottom: clamp(24px, 3vw, 40px); }
html.sr-night .toc-rail { border: 0 !important; }
html.sr-night .toc-rail a:hover { color: var(--a-terra) !important; }
html.sr-night .post-tag { background: var(--a-oat) !important; border: 0 !important; border-radius: 999px !important; color: var(--a-ink) !important; }

/* ---- 7. Footer: one oat band to close every page ------------------------- */
html.sr-night .sf { background: var(--a-b-oat) !important; border-top: 0 !important; }
html.sr-night :is(.srp-section:nth-of-type(1), .srp-section:nth-of-type(3), .news-lead) {
  box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band) !important;
}
/* side rail heading stays a side-rail size, in the shared serif */
html.sr-night main :is(aside, .article-service-rail, .asr-cta) h2 { font-family: var(--font-serif), Georgia, serif !important; font-weight: 400 !important; font-size: clamp(22px, 1.8vw, 26px) !important; line-height: 1.15 !important; letter-spacing: -.02em !important; }