/* Ledger (profile J) showcase skin — "the public record" lane, DESIGN.md.
   Pure white paper body, one terracotta signal colour, hairline rules doing
   the structural work. Only .hero and .cta-band-ledger drench in --ink.
   Everything is scoped under body.profile-J so inner pages (articles, blog
   index, privacy, 404) — which still render through the default markup in
   lib/render-core.js — re-skin cleanly without being re-rendered. */

body.profile-J {
  /* exact OKLCH tokens from DESIGN.md sec3 (verified contrast in wave report) */
  --paper: oklch(1.000 0.000 0);
  --ink: oklch(0.205 0.018 36);
  --muted: oklch(0.455 0.014 36);
  --brand: oklch(0.495 0.134 36);
  --brand-dp: oklch(0.365 0.112 36);
  --brand-tint: oklch(0.650 0.134 36); /* on-ink-safe accent, 5.26:1 vs ink */
  --surface: oklch(0.970 0.006 36);
  --rule: oklch(0.885 0.008 36);
  --font-article: 'Literata', Georgia, serif;

  /* alias the generic chrome tokens (.btn/.card/header/footer/etc.) to the
     exact values above so shared markup matches DESIGN.md, not the sRGB hex
     fallback carried in site.config.js colors */
  --primary: var(--brand);
  --primary-dark: var(--brand-dp);
  --accent: var(--brand);
  --line: var(--rule);
  --bg-soft: var(--surface);

  background: var(--paper);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.profile-J h1, body.profile-J h2, body.profile-J h3 { text-wrap: balance; letter-spacing: -.015em; }
body.profile-J p { text-wrap: pretty; }
body.profile-J .btn { border-radius: var(--btn-radius); box-shadow: none; }
body.profile-J .btn:hover { filter: brightness(.93); }
body.profile-J .btn.ghost { border-color: var(--rule); }
body.profile-J .card { box-shadow: none; border-radius: 0; border: 1px solid var(--rule); }

/* ---- topbar / header — light, hairline-bordered, no dark panel ---------- */
body.profile-J .topbar { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--rule); }
body.profile-J .topbar a { color: var(--brand); font-weight: 700; }
body.profile-J header.site { background: var(--paper); border-bottom: 1px solid var(--rule); }
body.profile-J .logo { color: var(--ink); }
body.profile-J .logo .mark { background: none; color: var(--brand); width: auto; height: auto; border-radius: 0; }
body.profile-J nav.main a:hover { color: var(--brand); }
body.profile-J .m-nav summary { color: var(--brand); }

/* ---- hero (ink-drenched — one of the two sanctioned sections) ---------- */
body.profile-J .hero {
  background: var(--ink); color: var(--paper);
  padding: clamp(56px, 5vw + 24px, 104px) 0 clamp(48px, 4vw + 20px, 72px);
}
body.profile-J .hero-inner { max-width: 860px; }
body.profile-J .hero .ledger-logo { margin-bottom: 22px; }
body.profile-J .hero h1 {
  color: var(--paper); font-size: var(--fs-h1); max-width: 17ch; margin: 0 0 .35em;
}
body.profile-J .hero p.lead { color: rgba(255,255,255,.88); font-size: 1.2rem; max-width: 62ch; margin: 0 0 26px; }
body.profile-J .hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
body.profile-J .hero-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; font-size: .92rem; color: rgba(255,255,255,.82); }
body.profile-J .hero-facts li { padding: 0 16px 0 0; margin: 6px 16px 6px 0; border-right: 1px solid rgba(255,255,255,.28); }
body.profile-J .hero-facts li:last-child { border-right: 0; }
body.profile-J .hero-facts b { color: var(--paper); }

/* referral-compensation disclosure — must travel with every CTA, real contrast */
body.profile-J .cta-disclosure { font-size: .92rem; color: var(--muted); max-width: 62ch; margin: 0 0 4px; line-height: 1.55; }
body.profile-J .cta-disclosure.on-ink { color: rgba(255,255,255,.88); }

/* Exhibit A — paper section (the chart's own default text colour is --ink,
   so it must sit on paper, not inside the ink hero). heroChart() is fully
   self-contained (own title/desc/animation/colours via the tokens above) —
   this only has to size and centre it. */
body.profile-J .doc-exhibit { text-align: center; }
body.profile-J .doc-exhibit h2 { max-width: 46ch; margin: 0 auto 28px; text-align: center; }
body.profile-J .exhibit-label { font-weight: 700; font-size: .95rem; color: var(--brand); margin: 0 0 10px; }
body.profile-J .exhibit-chart { max-width: 420px; margin: 0 auto; }
body.profile-J .exhibit-chart svg { width: 100%; height: auto; display: block; }
body.profile-J .exhibit-caption { max-width: 60ch; margin: 18px auto 0; color: var(--muted); font-size: .92rem; }

/* ---- Schedule A — services as numbered, hairline-ruled rows ------------ */
body.profile-J .doc-schedule .section-head { max-width: 68ch; margin-bottom: 26px; }
body.profile-J .sched-list { border-top: 1px solid var(--rule); }
body.profile-J .sched-row { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
body.profile-J .sched-num { font-size: 1.1rem; font-weight: 700; color: var(--brand); }
body.profile-J .sched-body h3 { margin: 0 0 6px; font-size: 1.15rem; }
body.profile-J .sched-body p { margin: 0; color: var(--muted); max-width: 68ch; }

/* ---- Notice — the "why" statement + boxed clause list ------------------ */
body.profile-J section.alt { background: var(--surface); }
body.profile-J .notice-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
body.profile-J .doc-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
body.profile-J .doc-pill { border: 1px solid var(--rule); background: var(--paper); padding: 7px 14px; font-size: .86rem; font-weight: 600; color: var(--ink); }
body.profile-J .notice-box { border: 1px solid var(--rule); background: var(--paper); padding: 26px 28px; }
body.profile-J .notice-box-label { font-weight: 700; font-size: .95rem; color: var(--brand); margin: 0 0 14px; }
body.profile-J .clause-list { list-style: none; counter-reset: clause; margin: 0; padding: 0; }
body.profile-J .clause-list li { counter-increment: clause; position: relative; padding: 10px 0 10px 30px; border-top: 1px solid var(--rule); font-size: .95rem; }
body.profile-J .clause-list li:first-child { border-top: 0; }
body.profile-J .clause-list li::before { content: counter(clause) "."; position: absolute; left: 0; top: 10px; font-weight: 700; color: var(--brand); }

/* ---- Guides register — index-style linked rows -------------------------- */
body.profile-J .register { border-top: 1px solid var(--rule); }
body.profile-J .register-row { display: flex; align-items: center; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
body.profile-J .register-num { font-weight: 700; color: var(--brand); font-size: .95rem; flex: 0 0 auto; }
body.profile-J .register-title { flex: 1 1 auto; font-weight: 600; }
body.profile-J .register-arrow { color: var(--brand); transition: transform .2s var(--ease-out-strong, ease-out); }
body.profile-J .register-row:hover .register-arrow { transform: translateX(4px); }
body.profile-J .register-row:hover .register-title { color: var(--brand); }
body.profile-J .register-more { margin-top: 22px; }

/* ---- closing CTA band (the second sanctioned ink section) --------------- */
body.profile-J .cta-band-ledger { background: var(--ink); color: var(--paper); border-radius: 0; }
body.profile-J .doc-cta { max-width: 640px; }
body.profile-J .doc-cta.on-ink h2 { color: var(--paper); margin: 0 0 10px; }
body.profile-J .doc-cta.on-ink p { color: rgba(255,255,255,.88); margin: 0 0 20px; }
body.profile-J .doc-cta .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---- contact form — the conversion point --------------------------------- */
body.profile-J .serving-line { color: var(--muted); margin: -6px 0 28px; }
body.profile-J .ledger-form { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 8px; }
body.profile-J .form-row { margin-bottom: 20px; display: flex; flex-direction: column; gap: 7px; }
body.profile-J .form-row label { font-weight: 700; font-size: .95rem; }
body.profile-J .form-row .opt { font-weight: 400; color: var(--muted); }
body.profile-J .form-row input[type=text], body.profile-J .form-row input[type=email], body.profile-J .form-row input[type=tel], body.profile-J .form-row textarea {
  font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--paper); color: var(--ink); width: 100%;
}
body.profile-J .form-row input:focus, body.profile-J .form-row textarea:focus, body.profile-J .form-row input:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
body.profile-J .form-row textarea { resize: vertical; min-height: 110px; }
body.profile-J .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.profile-J .consent-row { flex-direction: row; align-items: flex-start; gap: 12px; margin: 26px 0 18px; }
body.profile-J .consent-row input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--brand); }
body.profile-J .consent-row label { font-weight: 400; font-size: 1rem; color: var(--ink); line-height: 1.55; }
body.profile-J .ledger-form .cta-disclosure { margin: 4px 0 18px; }
body.profile-J .ledger-form button.btn { font-size: 1rem; padding: 13px 26px; cursor: pointer; }
body.profile-J .form-status { border: 1px solid var(--rule); padding: 14px 18px; margin: 0 0 22px; font-weight: 600; }
body.profile-J .form-status.is-sent { border-color: var(--brand); color: var(--ink); background: var(--surface); }
body.profile-J .form-status.is-error { border-color: var(--brand); color: var(--ink); background: var(--surface); }
body.profile-J .email-fallback { margin-top: 22px; color: var(--muted); font-size: .95rem; }
body.profile-J .email-fallback a { color: var(--brand); font-weight: 700; }

/* ---- footer — paper, hairline top, no dark panel ------------------------ */
body.profile-J footer.site { background: var(--paper); color: var(--ink); border-top: 1px solid var(--rule); box-shadow: none; }
body.profile-J footer.site h4 { color: var(--ink); }
body.profile-J footer.site a { color: var(--ink); }
body.profile-J footer.site a:hover { color: var(--brand); }
body.profile-J footer.site .nap { color: var(--muted); }
body.profile-J footer.site .legal { border-top: 1px solid var(--rule); color: var(--muted); }
body.profile-J .callbar { background: var(--paper); border-top: 1px solid var(--rule); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
body.profile-J .callbar .call { background: var(--brand); color: var(--paper); }
body.profile-J .callbar .site2 { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }

/* ---- inner pages (articles / blog index / privacy) — default markup ----- */
body.profile-J .article .body, body.profile-J .article .body p, body.profile-J .article .body li, body.profile-J .article .body blockquote {
  font-family: var(--font-article);
}
body.profile-J .article .body { font-size: 1.08rem; line-height: 1.7; }
body.profile-J .article .crumbs, body.profile-J .article .meta { color: var(--muted); }
body.profile-J .article .body a { color: var(--brand); }
body.profile-J .toc { background: var(--surface); border: 1px solid var(--rule); border-radius: 0; }
body.profile-J .toc a { color: var(--brand); }
body.profile-J .faq details { border-radius: 0; border: 1px solid var(--rule); }
body.profile-J .author-cta { border-radius: 0; border: 1px solid var(--rule); border-left: 4px solid var(--brand); background: var(--surface); }
body.profile-J .blog-list .card .tag { color: var(--brand); }
body.profile-J .blog-list a.title:hover { color: var(--brand); }
body.profile-J .reviews-section .review-card { border: 1px solid var(--rule); }

/* ---- responsive: stack to one column, keep the 20px .wrap gutter --------- */
@media (max-width: 860px) {
  body.profile-J .exhibit-grid, body.profile-J .notice-grid { grid-template-columns: 1fr; gap: 28px; }
  body.profile-J .hero h1 { max-width: none; }
  body.profile-J .sched-row { grid-template-columns: 40px 1fr; gap: 14px; }
}
@media (max-width: 480px) {
  body.profile-J .hero-facts li { border-right: 0; width: 100%; padding-right: 0; }
  body.profile-J .doc-cta .cta-row, body.profile-J .hero .cta-row { flex-direction: column; align-items: stretch; }
  body.profile-J .doc-cta .cta-row .btn, body.profile-J .hero .cta-row .btn { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.profile-J .register-arrow { transition: none; }
}