* { box-sizing: border-box; }

html { color-scheme: light; }

body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-body); }
a { color: var(--ink); }

.method-header,
.method-main,
.method-footer { width: min(calc(100% - (var(--gutter) * 2)), var(--measure)); margin-inline: auto; }

.method-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-5); border-bottom: var(--r-hair) solid var(--rule); }
.brand { display: flex; align-items: baseline; gap: var(--s-3); }
.wordmark { font-family: var(--sans); font-size: var(--t-sub); line-height: var(--lh-sub); font-weight: 700; letter-spacing: .26em; }
.wordmark-subordinate { color: var(--muted); font-size: var(--t-label); line-height: var(--lh-note); }
.method-header a { color: var(--slate); font-size: var(--t-table); line-height: var(--lh-table); text-align: right; }
.method-main { padding-block: var(--s-7); }
.method-main h1 { max-width: var(--measure); margin: 0 0 var(--s-6); color: var(--navy-800); font-family: var(--serif); font-size: var(--t-title); line-height: var(--lh-title); }
.method-main h1 small { color: var(--slate); font-family: var(--sans); font-size: var(--t-sub); line-height: var(--lh-sub); }
.method-main h2 { margin: var(--s-6) 0 var(--s-3); font-family: var(--serif); font-size: var(--t-section); line-height: var(--lh-section); }
.method-main p,
.method-main li { max-width: var(--measure); }
.translation { color: var(--slate); font-size: var(--t-table); line-height: var(--lh-table); }
.formula { padding: var(--s-3) var(--s-4); border-left: var(--r-mark) solid var(--copper); background: var(--white); font-family: var(--mono); overflow-wrap: anywhere; }
.method-note { padding-block: var(--s-3); border-block: var(--r-hair) solid var(--rule); }
.method-table-wrap { max-width: var(--measure); overflow-x: auto; margin-block: var(--s-4); }
.method-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: var(--t-table); line-height: var(--lh-table); font-variant-numeric: tabular-nums; }
.method-table thead { border-bottom: var(--r-hair) solid var(--rule); }
.method-table th,
.method-table td { padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; }
.method-table tbody tr + tr { border-top: var(--r-hair) solid var(--rule); }
.method-table small { display: block; margin-top: var(--s-1); color: var(--slate); font-size: var(--t-note); line-height: var(--lh-note); }
.method-data { padding: var(--s-3) var(--s-4); background: var(--white); font-family: var(--mono); font-size: var(--t-table); line-height: var(--lh-table); white-space: pre-wrap; }
.method-signature { margin-top: var(--s-6); padding-top: var(--s-1); border-top: var(--r-hair) solid var(--rule); }
.method-footer { padding-block: var(--s-5) var(--s-7); border-top: var(--r-hair) solid var(--rule); color: var(--slate); font-size: var(--t-note); line-height: var(--lh-note); }
.placeholder { min-height: var(--s-9); padding: var(--s-5); border: var(--r-hair) dashed var(--rule); background: var(--white); }

@media (max-width: 900px) {
  .method-header,
  .method-main,
  .method-footer { width: min(calc(100% - (var(--gutter-m) * 2)), var(--measure)); }
}

@media print {
  body { font-size: var(--p-body); line-height: var(--plh-body); }
  .method-header a { display: none; }
  .method-main h1 { font-size: var(--p-title); line-height: var(--plh-title); }
  .method-main h1 small { font-size: var(--p-sub); line-height: var(--plh-sub); }
  .method-main h2 { font-size: var(--p-section); line-height: var(--plh-section); }
  .translation { font-size: var(--p-table); line-height: var(--plh-table); }
  .method-table { font-size: var(--p-table); line-height: var(--plh-table); }
  .method-table th,
  .method-table td { padding: var(--s-1); }
  .method-table small,
  .method-data { font-size: var(--p-note); line-height: var(--plh-note); }
  .method-footer { font-size: var(--p-note); line-height: var(--plh-note); }
}