/* Counsel guides: ledger paper, fountain ink, brass. Sits on /shared/fl.css. */
body { --accent: #d9b46a; --accent-2: #3e6e5a; --paper-faint: #8a8070; --ink-soft: #4a4238; --ink-note: #6d6458; }
.band.paper .eyebrow b { color: var(--accent-2); }
.foot a:hover, .skip:hover { color: var(--accent-2); }
.band.paper h2 em { color: var(--accent-2); }

/* header */
.g-head { padding: clamp(120px, 14vw, 180px) 0 clamp(56px, 7vw, 96px); position: relative; }
.g-head h1 { font-size: clamp(40px, 5.6vw, 84px); max-width: 17ch; text-wrap: balance; }
.g-head .lede { max-width: 52ch; }
.g-meta { margin: 28px 0 0; font: 500 12px/1.6 var(--mono); letter-spacing: .02em; color: var(--paper-faint); }
.crumb a { text-decoration: none; color: var(--paper-dim); }
.crumb a:hover { color: var(--accent); }
.g-head::after {
  content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: 1px; max-width: calc(var(--wrap) - 2 * var(--gut));
  margin: 0 auto; background: var(--rule);
}

/* article body on ledger paper */
.g-body { padding: clamp(64px, 8vw, 112px) 0; }
.prose { max-width: 68ch; color: var(--ink-0); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.05; margin: 1.7em 0 .45em; text-wrap: balance; }
.prose p { margin: 0 0 1em; }
.prose p b, .prose li b { font-weight: 600; }
.prose a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink-0); }
.prose ol, .prose ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; position: relative; padding: 12px 0 12px 48px; border-bottom: 1px solid rgba(62, 110, 90, .3); }
.prose ol > li:first-child { border-top: 1px solid rgba(62, 110, 90, .3); }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 8px; font: 400 30px/1 var(--display); color: var(--accent-2); }
.prose ul > li { position: relative; padding: 8px 0 8px 28px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 14px; height: 2px; background: var(--accent-2); transform: rotate(-8deg); }

/* the method / the worked example: margin notes in the ledger */
.method, .example { margin: 28px 0; padding: 18px 22px 18px 24px; position: relative; }
.method { background: rgba(62, 110, 90, .08); border-left: 2px solid var(--accent-2); }
.example { border-top: 1px dashed rgba(15, 13, 11, .32); border-bottom: 1px dashed rgba(15, 13, 11, .32); padding-left: 0; padding-right: 0; }
.method .k, .example .k { display: block; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.example .k { color: #7a5a1e; }
.method p, .example p { margin: 10px 0 0; }

/* tables set like a ledger */
.table-scroll { overflow-x: auto; margin: 24px 0 28px; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 480px; }
.prose th { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; color: var(--ink-note); padding: 0 16px 12px 0; border-bottom: 1px solid rgba(15, 13, 11, .32); vertical-align: bottom; }
.prose td { padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(62, 110, 90, .35); vertical-align: top; }
.prose td.num { font-family: var(--mono); font-size: 14.5px; white-space: nowrap; }

/* calculator: a ledger slip */
.calc {
  margin: 32px 0; padding: clamp(22px, 3vw, 34px); background: #fffaf0;
  box-shadow: 0 1px 0 rgba(15, 13, 11, .18), 0 30px 50px -30px rgba(40, 30, 15, .55);
}
.calc label { display: block; font: 500 13px/1.4 var(--mono); letter-spacing: 0; color: var(--ink-note); margin: 22px 0 6px; }
.calc label:first-child { margin-top: 0; }
.calc input {
  display: block; width: 100%; min-height: 48px; background: transparent; border: 0; border-bottom: 1.5px solid var(--ink-0); border-radius: 0;
  color: var(--ink-0); font: 400 20px/1.2 var(--mono); padding: 8px 2px;
}
.calc input::placeholder { color: #a39a8a; }
.calc input:focus { outline: none; border-bottom-color: var(--accent-2); box-shadow: 0 2px 0 var(--accent-2); }
.calc .btn { margin-top: 26px; cursor: pointer; }
.calc .btn:hover { box-shadow: 4px 4px 0 var(--accent-2); }
.result { display: none; margin-top: 28px; padding-top: 22px; border-top: 3px double rgba(15, 13, 11, .4); }
.result .big { font: 400 clamp(40px, 5vw, 60px)/1 var(--display); color: var(--ink-0); letter-spacing: -.01em; }
.result .sub { font: 500 13px/1.5 var(--mono); letter-spacing: 0; color: var(--ink-note); margin-top: 6px; }
.result .sub + .big { margin-top: 24px; }
.result p.sub { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(62, 110, 90, .3); }
.result p.sub { font: 400 17px/1.5 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink-0); max-width: 52ch; }
.result p.sub::before { content: "verdict  "; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }

/* guide index groups */
.g-group { padding: clamp(64px, 8vw, 120px) 0; }
.g-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.g-split h2 { font-size: clamp(32px, 3.6vw, 52px); }

/* ruled link list */
.g-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.g-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.g-list .num { font: 400 26px/1 var(--display); color: var(--accent); }
.g-list a { font: 400 clamp(21px, 2vw, 27px)/1.2 var(--display); text-decoration: none; }
.g-list a:hover { color: var(--accent); }
.band.paper .g-list, .band.paper .g-list li { border-color: rgba(15, 13, 11, .16); }
.band.paper .g-list .num { color: var(--accent-2); }
.band.paper .g-list a:hover { color: var(--accent-2); }

/* end band: keep reading + the ask */
.g-end { padding: clamp(72px, 9vw, 128px) 0; }
.g-related { max-width: 820px; margin-bottom: clamp(56px, 7vw, 96px); }
.closing { padding-top: 48px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.closing h2 { margin: 0 0 .35em; text-wrap: balance; max-width: 16ch; }
.closing .lede { margin: 0; font-size: 18px; }
.closing .actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.honest { margin: 56px 0 0; padding-top: 18px; border-top: 1px dashed var(--rule); font: 400 13px/1.6 var(--mono); color: var(--paper-faint); max-width: 72ch; }

@media (max-width: 900px) {
  .g-split, .closing { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .prose ol > li { padding-left: 38px; }
  .prose table { min-width: 0; font-size: 14px; }
  .prose th, .prose td { padding-right: 10px; }
  .prose th { font-size: 11px; letter-spacing: .04em; }
  .prose td.num { font-size: 12.5px; }
  .g-list li { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .g-list .num { font-size: 22px; }
}