/* Counsel guides, craft v2 "The Receipt". Fonts, tokens and chrome come from /counsel/counsel.css; this file sets the
   article: a forest masthead, then the guide on bone paper, worked examples set as receipts, calculators as a slip. */
.cs .label { font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 18px; }
.cs .paper .label, .cs .band.paper .label { color: var(--brass-ink); }
.cs .link { font: 600 16px/1 var(--text-face); letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--brass); padding: 0; display: inline-flex; align-items: center; min-height: 44px; }
.cs .link::after { display: none; }
.cs .band { padding: clamp(64px, 8vw, 112px) 0; }
.cs .band.paper { background: var(--paper); color: var(--ink); }
.cs .band.paper .lede { color: var(--ink-2); }
.cs .band.paper h2 em { color: var(--forest); }

/* masthead */
.g-head { padding: clamp(116px, 13vw, 170px) 0 clamp(52px, 6vw, 84px); }
.g-head h1 { font-size: clamp(40px, 5.4vw, 80px); max-width: 18ch; }
.g-head .lede { max-width: 54ch; }
.g-meta { margin: 24px 0 0; font: 400 13px/1.6 var(--mono); color: var(--bone-faint); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 22px; }
.crumb a { text-decoration: none; color: var(--brass); display: inline-flex; align-items: center; min-height: 44px; }
.crumb a:hover { color: var(--lime); }

/* the article on bone paper */
.prose { max-width: 68ch; color: var(--ink); font-size: 18px; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; margin: 1.6em 0 .45em; }
.prose p { margin: 0 0 1em; }
.prose b { font-weight: 600; }
.prose a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.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 46px; border-bottom: 1px solid var(--rule-ink); }
.prose ol > li:first-child { border-top: 1px solid var(--rule-ink); }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 9px; font: 400 28px/1 var(--display); color: var(--forest); }
.prose ul > li { position: relative; padding: 7px 0 7px 26px; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 10px; height: 1.5px; background: var(--forest); }

/* method: a margin note. example: a receipt slip with a torn edge. */
.method { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px double var(--forest); }
.method .k, .example .k { display: block; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--forest); margin-bottom: 8px; }
.method p { margin: 0; color: var(--ink-2); }
.example {
  margin: 30px 0; padding: 20px 22px 32px; background: var(--slip); font-size: 16.5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 24px 40px -28px rgba(40, 30, 15, .5);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
}
.example .k { color: var(--brass-ink); padding-bottom: 10px; border-bottom: 1px dashed rgba(22, 33, 27, .35); }
.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 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--ink-3); padding: 0 16px 12px 0; border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.prose td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule-ink); vertical-align: top; }
.prose td.num { font-family: var(--mono); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* calculator: a receipt you fill in */
.calc {
  margin: 32px 0; padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px) 40px; background: var(--slip);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 30px 50px -30px rgba(40, 30, 15, .55);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
}
.calc label { display: block; font: 400 14px/1.4 var(--mono); color: var(--ink-3); 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 dotted var(--ink); border-radius: 0;
  color: var(--ink); font: 400 20px/1.2 var(--mono); padding: 8px 2px;
}
.calc input::placeholder { color: #9aa197; }
.calc input:focus { outline: none; border-bottom: 2px solid var(--forest); }
.calc .btn { margin-top: 26px; cursor: pointer; background: var(--forest); color: var(--bone); }
.calc .btn:hover { color: var(--bone); filter: brightness(1.15); }
.result { display: none; margin-top: 28px; padding-top: 20px; border-top: 3px double rgba(22, 33, 27, .6); }
.result .big { font: 400 clamp(40px, 5vw, 60px)/1 var(--display); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.result .sub { font: 400 13px/1.5 var(--mono); color: var(--ink-3); margin-top: 6px; }
.result .sub + .big { margin-top: 22px; }
.result p.sub { margin-top: 22px; padding-top: 14px; border-top: 1px dashed rgba(22, 33, 27, .35); font: 400 17px/1.55 var(--text-face); color: var(--ink); max-width: 52ch; }
.result p.sub::before { content: "Verdict  "; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--forest); }

/* guide index */
.g-group { padding: clamp(64px, 8vw, 112px) 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); }
.g-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.g-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.g-list .num { font: 400 15px/1 var(--mono); color: var(--brass); }
.g-list a { font: 400 clamp(21px, 2vw, 27px)/1.2 var(--display); text-decoration: none; }
.g-list a:hover { color: var(--lime); }
.band.paper .g-list, .band.paper .g-list li { border-color: var(--rule-ink); }
.band.paper .g-list .num { color: var(--brass-ink); }
.band.paper .g-list a:hover { color: var(--forest); }

/* end band */
.g-end { padding: clamp(72px, 9vw, 120px) 0; }
.g-related { max-width: 820px; margin-bottom: clamp(56px, 7vw, 96px); }
.closing { padding-top: 44px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.closing h2 { margin: 0 0 .35em; 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: 52px 0 0; padding-top: 16px; border-top: 1px dashed var(--line); font: 400 13px/1.6 var(--mono); color: var(--bone-faint); max-width: 76ch; }

@media (max-width: 900px) { .g-split, .closing { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .prose { font-size: 17px; }
  .prose ol > li { padding-left: 36px; }
  .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: 13px; }
  .g-list li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
}