/* Editorial / Ledger: a variant of editorial, after instalanding.ai's agent-run-transcript-page
   (MIT). A printed field manual: plain white stock, true-black line art and one halt red.
   EB Garamond italic for headlines, IBM Plex Mono for every figure, Space Grotesk caps for
   labels. No radius, no tinted bands (rules do the separating), hatched placeholders, and
   buttons with a hard offset shadow that collapses when pressed. The pen becomes a red rule.
   Loads after editorial.css and overrides it. Suits accountants, solicitors, bookkeepers. */

:root[data-variant="editorial-ledger"] {
  --bg: #ffffff;
  --bg-soft: #f3f2ed;
  --surface: #ffffff;
  --ink: #0b0b0a;
  --ink-2: rgb(11 11 10 / 0.78);
  --muted: rgb(11 11 10 / 0.6);
  --line: rgb(11 11 10 / 0.22);
  --accent: #b3221d;
  --primary: #0b0b0a;
  --primary-ink: #ffffff;
  --glass: rgb(255 255 255 / 0.95);
  --glass-border: #0b0b0a;
  --hl: #b3221d;
  --rule: #0b0b0a;

  --font-display: "EB Garamond", Garamond, Georgia, serif;
  --font-body: "EB Garamond", Garamond, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-label: "Space Grotesk", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.015em;

  --slab-bg: #0b0b0a;
  --slab-ink: #ffffff;
  --footer-bg: #0b0b0a;
  --footer-ink: #ffffff;

  /* placeholders: the manual's fills, hatch, stripe and halftone, over paper tints */
  --hatch: repeating-linear-gradient(45deg, rgb(11 11 10 / 0.5) 0 1px, transparent 1px 7px);
  --stripe: repeating-linear-gradient(90deg, rgb(11 11 10 / 0.4) 0 1px, transparent 1px 5px);
  --halftone: radial-gradient(circle, rgb(11 11 10 / 0.42) 1.4px, transparent 2px) 0 0 / 7px 7px;
  --ph-1: var(--hatch), #f3f2ed;
  --ph-2: var(--halftone), #e9e7de;
  --ph-3: var(--stripe), #f3f2ed;
  --ph-4: var(--hatch), #e9e7de;
  --ph-5: var(--halftone), #f3f2ed;
  --ph-6: var(--stripe), #e9e7de;

  & body { font-size: 19px; }
  & h1, & h2 { font-style: italic; }
  & ::selection { background: var(--ink); color: var(--bg); }
  & :focus-visible { outline-color: var(--accent); }

  /* the pen becomes a red rule under the words */
  & mark::before, & .ed-mark::before {
    top: auto; bottom: -0.05em; height: 3px; border-radius: 0;
    background: var(--accent); box-shadow: none; filter: none; opacity: 1;
  }
  & mark::after, & .ed-mark::after { content: none; }
  & mark, & .ed-mark { color: inherit; }

  /* labels in Space Grotesk caps, figures stay in mono */
  & .eyebrow, & .ed-label, & .ed-dateline, & .nav-links a, & .pill, & .btn,
  & .stat dt, & .field label, & .hours caption, & .review-author, & .index, & .footer-title {
    font-family: var(--font-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  }
  & .eyebrow { font-size: 11px; }
  & .eyebrow::before { content: none; }
  & .nav-links a:hover, & .ed-dateline a:hover, & .ed-note-name:hover, & .chips .pill:hover, & .nav-menu a:hover {
    background: var(--ink); color: var(--bg);
  }

  /* buttons: a hairline box on a hard 2px shadow that it presses into */
  & .btn { height: 44px; font-size: 11px; border-width: 1.3px; box-shadow: 2px 2px 0 var(--ink); }
  & .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
  & .btn-primary:hover { background: var(--accent); border-color: var(--ink); }
  & .btn-ghost:hover { background: var(--ink); color: var(--bg); }
  & .pricing-slab .btn, & .footer .btn { box-shadow: 2px 2px 0 rgb(255 255 255 / 0.6); }
  & .pricing-slab .plan.featured .btn { box-shadow: 2px 2px 0 var(--ink); }

  & .nav { box-shadow: none; border-bottom: 1.5px solid var(--ink); }
  & .nav-menu ul { box-shadow: 2px 2px 0 var(--ink); }
  & .ed-dateline { border-top: 1.5px solid var(--ink); }

  /* bands: no tint, a 1.5px rule between them; dashed rules inside panels */
  & main > .section:nth-of-type(even) { background: none; }
  & .section-head { border-top-width: 1.5px; }
  & .section-head::before { content: none; }
  & .service-foot, & .ed-hours div, & .hours th, & .hours td { border-bottom-style: dashed; border-color: var(--line); }
  & .ed-leader, & .menu-leader { border-bottom-style: dashed; }
  & .about-media, & .gallery-item, & .hero-media, & .map, & .ed-fig .hero-media { outline-width: 1.3px; outline-offset: 0; }
  & .pricing-slab, & .footer-card { outline: 0; background: var(--slab-bg); }
  & .pricing-slab .eyebrow, & .footer-title { color: #ffffff; }
  & .plan-flag { background: var(--accent); color: #ffffff; border-color: var(--accent); }
  & .plan:not(.featured) .plan-features li::before { color: #ffffff; }
  & .plan:not(.featured) .btn-ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
  & .footer .btn-primary:hover { background: var(--accent); border-color: var(--bg); color: #ffffff; }
  & .stat dd, & .plan-price .mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; }
  & .stat dd { font-size: 32px; }
  & .marquee-track li::after { content: "\25A0"; font-size: 0.5em; }
  & .field input:focus, & .field textarea:focus { background: var(--bg-soft); }
  & .map iframe { filter: grayscale(1) contrast(1.05); }
  & .wordmark { -webkit-text-stroke-color: rgb(255 255 255 / 0.35); }

  /* ---------- borrowed layouts, dressed as the manual's own ---------- */
  /* services "table": a rate sheet ruled in black, the lamp a square that fills halt red */
  & .rate-sheet { border-top: 1.5px solid var(--ink); }
  & .rate { border-bottom: 1px dashed var(--line); border-radius: 0; padding-block: 18px; }
  & .rate:is(:hover, :focus-visible) { background: var(--bg-soft); }
  & .rate:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  & .rate-lamp { width: 9px; height: 9px; border-radius: 0; border: 1.3px solid var(--ink); }
  & .rate:is(:hover, :focus-visible) .rate-lamp { background: var(--accent); border-color: var(--accent); }
  & .rate-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.01em; }
  & .rate-desc { font-size: 17px; color: var(--ink-2); }
  & .rate-time { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
  & .rate-price { font-size: 18px; color: var(--ink); }
  & .services-table .group-title { border-top: 0; padding-top: 0; font-size: clamp(22px, 2.4vw, 30px); }

  /* about "letter": one column, the first paragraph as a lede, the figures ruled in black */
  & .about-letter .about-copy { max-width: 46rem; }
  & .about-letter h2 { margin-bottom: 28px; font-size: clamp(34px, 5vw, 64px); }
  & .about-letter .about-copy p:not(.eyebrow) { max-width: none; font-size: 20px; color: var(--ink); }
  & .about-letter .about-copy h2 + p { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.45; }
  & .about-letter .about-copy h2 + p::first-letter { float: none; margin: 0; font: inherit; }
  & .about-letter .stats { margin-top: 36px; }
  & .about-letter .stat { border-top: 1.5px solid var(--ink); }
  & .about-letter .stat dd { font-size: clamp(32px, 3.4vw, 44px); }
  & .about-letter .about-media { margin-top: 40px; aspect-ratio: 21 / 9; }

  /* ---------- reviews "transcript": the run log ---------- */
  & .transcript { border-top: 1.5px solid var(--ink); }
  & .log { border-bottom: 1px dashed var(--line); }
  & .log-stamp { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-2); }
  & .log-n { font-weight: 500; }
  & .log-n::before { content: "\25A0\00a0"; font-size: 0.7em; vertical-align: 0.1em; }
  & .log-rating { color: var(--ink); }
  & .log-entry blockquote p { font-size: clamp(22px, 2.2vw, 28px); font-style: normal; line-height: 1.38; letter-spacing: -0.005em; }
  & .log-entry .review-by { margin-top: 14px; font-size: 12px; }
  @media (min-width: 900px) {
    & .log-stamp { border-right: 1.5px solid var(--ink); }
  }
}