/* ==========================================================================
   Infinilex design system
   Monochrome only: Ink #111 / Charcoal #333 / Slate #555 / Mist #8C8C8C
   (decorative only) / Line #DDD / Paper #F4F4F4 / White.
   No colour, no gradients, no shadows, no border radius.
   Playfair Display (display), Source Serif 4 (body), system sans (labels).
   The page is set like a legal instrument: clause numbers, hairline rules,
   schedules and an execution block.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subsets, variable) ---------------------- */
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/PlayfairDisplay-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/PlayfairDisplay-Italic-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4-Italic-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ink: #111111;
  --charcoal: #333333;
  --slate: #555555;
  --mist: #8c8c8c;      /* decorative use only: rules, ornaments, never body text */
  --line: #dddddd;
  --paper: #f4f4f4;
  --white: #ffffff;
  --serif-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --serif-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --measure: 65ch;
  --pad-x: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 12vw, 176px);
  --container: 1320px;
  --prose: 760px;
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }

body {
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
}

/* ---- Focus: dual monochrome tokens (WCAG 2.4.7 on both surfaces) -------
   Ink outline on light surfaces; white outline only where the surrounding
   surface is ink. The 3px offset leaves a light gap around ink buttons on
   light surfaces, keeping the ink outline perceivable. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.band-ink :focus-visible,
.band-ink .btn:focus-visible,
.band-ink .btn.ghost:focus-visible,
.site-footer-strip :focus-visible,
.site-footer-strip .btn.ghost:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---- Motion: one signature move, reduced-motion safe -------------------
   Hairline rules draw themselves in like a pen ruling a ledger. Pure CSS
   scroll-driven animation; content itself never moves or hides. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rule-draw { transform-origin: left; animation: ruleDraw linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes ruleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Scoped to our own animation so third-party widgets (Calendly's loading
     state on /contact/) keep functioning. The site defines no other motion
     beyond 200ms hover fades. */
  .rule-draw { animation: none !important; }
  a, .btn, .index-row, .entry h3 { transition: none !important; }
}

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3 { font-family: var(--serif-display); color: var(--ink); font-weight: 500; }
h1 { font-size: clamp(3.3rem, 7.2vw, 6.25rem); line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; font-weight: 600; }
h4 { font-family: var(--serif-body); font-weight: 600; font-size: 1.05rem; color: var(--ink); }

p, li { max-width: var(--measure); }
strong { font-weight: 600; color: var(--ink); }
::selection { background: var(--ink); color: var(--white); }

.lede { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.55; color: var(--charcoal); }
.small { font-size: 0.85rem; color: var(--slate); }

/* Labels: uppercase letterspaced sans. Readable labels use slate (7.4:1). */
.label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
}
.label--onink { color: #bbbbbb; }

/* Clause numbers: the instrument motif. */
.clause {
  font-family: var(--serif-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Underline-draw link (nav, index rows) */
.link-quiet { text-decoration: none; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 200ms ease-out; padding-bottom: 2px; }
.link-quiet:hover, .link-quiet:focus-visible { background-size: 100% 1px; }

/* ---- Rules (hairlines) -------------------------------------------------- */
.rule { border: 0; border-top: 1px solid var(--ink); }
.rule--soft { border-top-color: var(--line); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ---- Layout ------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.prose { max-width: var(--prose); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tight { padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(48px, 7vw, 104px); }

/* Asymmetric editorial grid: label column + content column */
.split { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.split > .split-label { position: sticky; top: 96px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 20px; }
  .split > .split-label { position: static; }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  padding: 18px 34px;
  min-height: 44px;
  cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out;
}
.btn:hover { background: var(--white); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--white); }
.band-ink .btn { background: var(--white); color: var(--ink); border-color: var(--white); }
.band-ink .btn:hover { background: transparent; color: var(--white); }

/* ---- Header ------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 12px 20px; z-index: 200; font-family: var(--sans); }
.skip-link:focus { left: 0; }

.site-header { border-bottom: 1px solid var(--ink); background: var(--white); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.site-header .logo img { height: 40px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.site-nav a { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.site-nav a[aria-current="page"] { border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.site-nav .btn { padding: 12px 22px; }
/* .site-nav a outranks .btn on specificity; restate the button colours. */
.site-nav a.btn { color: var(--white); }
.site-nav a.btn:hover { background: var(--white); color: var(--ink); }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .site-nav { display: none; }
  .site-nav.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; inset: 0; z-index: 100; background: var(--white);
    padding: 110px var(--pad-x) 40px; gap: 26px; border-top: 1px solid var(--ink);
    overflow-y: auto;
  }
  .site-nav.open a { font-family: var(--serif-display); font-size: 2rem; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; }
  .site-nav.open .btn { font-family: var(--sans); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; padding: 18px 34px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; z-index: 110; position: relative;
    background: none; border: 1px solid var(--ink); color: var(--ink);
    font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 12px 18px; min-height: 44px; cursor: pointer;
  }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: clamp(72px, 11vw, 168px); padding-bottom: clamp(56px, 9vw, 136px); }
.hero .label { margin-bottom: 28px; display: block; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 36px; max-width: 52ch; }
.hero .actions { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }

/* ---- Index rows (practice index; descriptions always in DOM) ------------- */
.index { border-top: 1px solid var(--ink); }
.index-row { display: grid; grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.4fr) 56px; gap: clamp(14px, 3vw, 40px); align-items: baseline; padding: clamp(22px, 3.2vw, 38px) 0; border-bottom: 1px solid var(--ink); text-decoration: none; color: var(--charcoal); transition: background 200ms ease-out, color 200ms ease-out; }
.index-row h3 { transition: color 200ms ease-out; }
.index-row p { font-size: 0.98rem; color: var(--slate); transition: color 200ms ease-out; }
.index-row .go { font-family: var(--serif-body); justify-self: end; color: var(--ink); transition: color 200ms ease-out; }
/* Inversion is for links only; static index rows (process steps) stay put. */
a.index-row:hover, a.index-row:focus-visible { background: var(--ink); }
a.index-row:hover .clause, a.index-row:hover h3, a.index-row:hover p, a.index-row:hover .go,
a.index-row:focus-visible .clause, a.index-row:focus-visible h3, a.index-row:focus-visible p, a.index-row:focus-visible .go { color: var(--white); }
@media (max-width: 760px) { .index-row { grid-template-columns: 48px minmax(0, 1fr); } .index-row p { grid-column: 2; } .index-row .go { display: none; } }

/* ---- Ledger tables (Schedule A etc.) ------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding-bottom: 14px; }
th, td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); }
thead th { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--ink); }
tbody th { font-weight: 600; color: var(--ink); }
.table-wrap--sticky th:first-child, .table-wrap--sticky td:first-child { position: sticky; left: 0; background: var(--white); padding-right: 18px; min-width: 130px; }
.paper .table-wrap--sticky th:first-child, .paper .table-wrap--sticky td:first-child { background: var(--paper); }

/* ---- Ink band (one per page: the evidence band) -------------------------- */
.band-ink { background: var(--ink); color: #d6d6d6; }
.band-ink h2, .band-ink h3, .band-ink strong { color: var(--white); }
.band-ink .rule { border-top-color: #3a3a3a; }
.band-ink a { color: var(--white); }

/* ---- Blockquote: hung punctuation, left accent --------------------------- */
blockquote { border-left: 3px solid var(--ink); padding: 6px 0 6px 22px; font-weight: 600; color: var(--ink); max-width: var(--measure); }
blockquote p { font-size: 1.15rem; line-height: 1.5; text-indent: -0.42em; }
blockquote footer { margin-top: 14px; font-weight: 400; font-size: 0.9rem; color: var(--slate); text-indent: 0; font-family: var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.band-ink blockquote { border-left-color: var(--white); color: var(--white); }
.band-ink blockquote footer { color: #bbbbbb; }

/* ---- Stats (tabular, ruled) ---------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); }
.stat { border-top: 1px solid var(--ink); padding-top: 18px; }
.stat .figure { font-family: var(--serif-display); font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 3.6rem); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.stat p { margin-top: 10px; font-size: 0.95rem; color: var(--slate); }
.stats-note { margin-top: 26px; font-size: 0.8rem; color: var(--slate); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }

/* ---- FAQ ------------------------------------------------------------------ */
.faq-item { border-bottom: 1px solid var(--line); padding: 30px 0; }
.faq-item h3 { max-width: 30ch; }
.faq-item p { margin-top: 14px; }

/* ---- Checklist (resource pages) ------------------------------------------- */
.check-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); padding: 34px 0; border-bottom: 1px solid var(--line); }
.check-item .num { font-family: var(--serif-display); font-weight: 600; font-size: 1.25rem; color: var(--white); background: var(--ink); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.check-item h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; font-weight: 600; margin-bottom: 6px; }
.check-item h3 { margin-bottom: 6px; }
.check-item .what { font-style: italic; color: var(--slate); margin-bottom: 12px; }
.check-item ul { list-style: none; }
.check-item li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid var(--paper); }
.check-item li::before { content: "☐"; position: absolute; left: 0; color: var(--ink); }

.principle { background: var(--ink); color: var(--white); padding: clamp(28px, 4vw, 44px); margin: 48px 0; }
.principle .label { color: #bbbbbb; display: block; margin-bottom: 14px; }
.principle p { color: var(--white); font-size: 1.12rem; font-weight: 600; }

/* ---- CTA box (correspondence block) ---------------------------------------- */
.cta-box { border: 1px solid var(--ink); padding: clamp(28px, 4.5vw, 52px); }
.cta-box h2, .cta-box h3 { max-width: 24ch; }
.cta-box p { margin-top: 16px; }
.cta-box .actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* ---- Notice / disclaimer ----------------------------------------------------- */
.notice { background: var(--paper); border: 1px solid var(--line); padding: 18px 22px; font-size: 0.88rem; color: var(--slate); }
.notice strong { color: var(--charcoal); }

/* ---- Article ------------------------------------------------------------------ */
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.article h2 { margin: 3.2rem 0 1.1rem; }
.article h3 { margin: 2.2rem 0 0.8rem; }
.article p + p { margin-top: 1.1rem; }
.article ul, .article ol { padding-left: 1.4rem; margin: 1.1rem 0; }
.article li + li { margin-top: 0.5rem; }
.answer-first { border-left: 3px solid var(--ink); padding: 10px 0 10px 22px; font-size: 1.12rem; font-weight: 600; color: var(--ink); margin: 1.6rem 0; }

/* ---- Insight / resource cards as index rows -------------------------------------- */
.entry { display: block; text-decoration: none; color: var(--charcoal); border-bottom: 1px solid var(--ink); padding: clamp(26px, 4vw, 44px) 0; }
.entry:first-of-type { border-top: 1px solid var(--ink); }
.entry .article-meta { margin-bottom: 12px; }
.entry h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; max-width: 28ch; transition: opacity 200ms ease-out; }
.entry p { margin-top: 12px; color: var(--slate); }
.entry:hover h3, .entry:focus-visible h3 { font-style: italic; }

/* ---- Footer: paper, with thin ink execution strip --------------------------------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--ink); }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(48px, 7vw, 88px) 0; }
.site-footer h2 { font-size: 1.35rem; }
.site-footer .label { margin-bottom: 16px; display: block; }
.site-footer ul { list-style: none; }
.site-footer li { padding: 5px 0; }
.site-footer a { text-decoration: none; color: var(--charcoal); }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .sig-rule { border-top: 1px solid var(--ink); margin-top: 34px; padding-top: 10px; max-width: 320px; font-size: 0.85rem; color: var(--slate); }
.site-footer-strip { background: var(--ink); color: #bbbbbb; }
.site-footer-strip .bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer-strip img { height: 30px; width: auto; }
.site-footer-strip a { color: var(--white); }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* ---- Calendly section (quarantined enhancement) -------------------------------------- */
.scheduler { border: 1px solid var(--ink); }
.scheduler .calendly-inline-widget { min-width: 300px; height: 760px; }

/* ---- Contract stack: sections as sheets of an execution copy ---------------
   Each .sheet is a bordered white page on the grey desk canvas. Scrolling
   pins the current page (top offset set by stack.js so tall pages stay fully
   readable) while the next slides over it, like leafing through a contract.
   Without JS, or under prefers-reduced-motion, pages flow normally. */
.stack { background: #e9e9e9; padding: clamp(14px, 2vw, 26px) clamp(10px, 1.6vw, 26px); counter-reset: sheet; }
.stack > .sheet {
  background: var(--white);
  border: 1px solid var(--line);
  max-width: 1520px;
  margin: 0 auto clamp(14px, 2vw, 26px);
  counter-increment: sheet;
}
.stack > .sheet:last-child { margin-bottom: 0; }
.stacked .stack > .sheet { position: sticky; }
.stack > .sheet::after {
  content: "page " counter(sheet);
  display: block;
  text-align: center;
  padding: 0 0 16px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mist);
}
.sheet--ink { background: var(--ink) !important; border-color: var(--ink) !important; }
.sheet--ink::after { color: #8c8c8c; }

/* Cover page (hero) */
.cover { display: flex; flex-direction: column; min-height: min(88vh, 980px); }
.cover-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: clamp(32px, 6vw, 120px); align-items: end; flex: 1; padding-top: clamp(56px, 9vw, 140px); padding-bottom: clamp(40px, 7vw, 104px); }
.cover h1 em { font-style: italic; }
.contents { border-top: 1px solid var(--ink); padding-top: 18px; }
.contents .label { display: block; margin-bottom: 6px; }
.contents ol { list-style: none; }
.contents li { border-bottom: 1px solid var(--line); }
.contents li a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 2px; text-decoration: none; color: var(--charcoal);
  font-size: 0.95rem; transition: color 200ms ease-out;
}
.contents li a .clause { font-size: 0.8rem; min-width: 66px; }
.contents li a:hover, .contents li a:focus-visible { color: var(--ink); font-style: italic; }
.cover-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; border-top: 1px solid var(--ink); padding-top: 16px; padding-bottom: clamp(20px, 3vw, 36px); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); }
@media (max-width: 900px) {
  .cover-grid { grid-template-columns: 1fr; align-items: start; gap: 40px; }
  .cover { min-height: 0; }
}
@media print {
  .stack { background: none; padding: 0; }
  .stack > .sheet { border: 0; margin: 0; position: static !important; }
  .stack > .sheet::after { display: none; }
}

/* ---- Utilities -------------------------------------------------------------------------- */
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.mb-1 { margin-bottom: 12px; } .mb-2 { margin-bottom: 24px; } .mb-3 { margin-bottom: 40px; }
.paper { background: var(--paper); }
.center { text-align: center; }

/* ---- Print (resource pages are built to be printed) -------------------------------------- */
@media print {
  .site-header, .site-footer, .site-footer-strip, .no-print, .nav-toggle { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { text-decoration: none; color: #000; }
  .btn { background: none !important; color: #000 !important; border: 1pt solid #000; }
  .check-item, .faq-item { break-inside: avoid; }
  .principle, .check-item .num { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .table-wrap { overflow: visible; }
  .table-wrap th, .table-wrap td { white-space: normal !important; }
  table { font-size: 9.5pt; }
  .table-wrap--sticky th:first-child, .table-wrap--sticky td:first-child { position: static; }
  .print-stamp { display: block !important; font-size: 9pt; color: #555; margin-top: 18pt; }
}
.print-stamp { display: none; }