/* Shared by every /fix page. One file, cached once, and one place to change how
   they all look. The tokens are lifted from the landing page so a reader who
   arrives from a search result and then clicks through does not feel handed to a
   different company. */

:root {
    --ground: #F7F5F3;
    --panel: #FFFFFF;
    --panel-2: #F1EDEA;
    --rule: #E3DCD7;
    --rule-strong: #C9BDB5;
    --ink: #1A1310;
    --ink-mid: #4A3B34;
    --ink-dim: #6B5C54;
    --accent: #A93B28;
    --accent-soft: #F0DED9;
    --leaf: #5D7159;
    --shadow: 0 1px 2px rgba(26, 19, 16, .06), 0 8px 24px -12px rgba(26, 19, 16, .18);

    --step--1: .8125rem;
    --step-0: .9375rem;
    --step-1: 1.0625rem;
    --step-2: 1.3125rem;
    --step-3: clamp(1.4rem, 4.5vw, 1.75rem);
    --step-4: clamp(1.9rem, 6vw, 2.5rem);
    --step-5: clamp(2.1rem, 8.5vw, 3.4rem);

    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;

    --gutter: clamp(1.25rem, 4vw, 3rem);
    --maxw: 1140px;
  }

@media (prefers-color-scheme: dark) {
  :root {
      --ground: #15100E;
      --panel: #1C1613;
      --panel-2: #221A16;
      --rule: #2E231E;
      --rule-strong: #43322A;
      --ink: #EFE8E3;
      --ink-mid: #BCADA4;
      --ink-dim: #9C8D85;
      --accent: #D75A3E;
      --accent-soft: #33201A;
      --leaf: #8FA38A;
      --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .7);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.wrap { max-width: 46rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.masthead, footer { border-bottom: 1px solid var(--rule); background: var(--panel); }
footer { border-bottom: 0; border-top: 1px solid var(--rule); margin-top: 4rem; }
.masthead .wrap, footer .wrap {
  display: flex; align-items: center; gap: 1rem; min-height: 60px; flex-wrap: wrap;
  max-width: 60rem;
}
.wordmark { font-family: var(--mono); font-weight: 700; text-decoration: none; color: var(--ink); }
.masthead nav, footer nav { margin-left: auto; display: flex; gap: 1.1rem; font-size: .9rem; }
.masthead nav a, footer nav a { color: var(--ink-dim); text-decoration: none; white-space: nowrap; }
.masthead nav a:hover, footer nav a:hover { color: var(--ink); }

.article { padding-block: 2.5rem 1rem; }

/* The H1 is an error string, so it is often long and full of punctuation. Set in
   mono because that is what it is — a line from a log, not a headline. */
h1 {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 1.5rem;
  overflow-wrap: anywhere;
}

h2 { font-size: 1.25rem; margin-top: 2.5rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin-top: 1.75rem; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.15rem; color: var(--ink-mid); }
.dim { color: var(--ink-dim); font-size: .9375rem; }

pre {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  padding: 1rem;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.55;
}
code { font-family: var(--mono); }
p code, li code { background: var(--panel-2); padding: .1em .3em; font-size: .9em; }

.callout {
  border-left: 3px solid var(--warn-rule);
  background: var(--warn-soft);
  padding: .9rem 1.1rem;
  margin: 1.5rem 0;
}

.cta-card {
  border: 1px solid var(--rule-strong);
  background: var(--panel);
  padding: 1.4rem;
  margin: 3rem 0 0;
}
.cta-card .label {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: .4rem;
}
.cta-row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-bottom: .4rem; }
.cta-note { font-size: .8125rem; color: var(--ink-dim); }

.btn {
  display: inline-block; padding: .55rem .9rem;
  border: 1px solid var(--rule-strong); background: var(--panel);
  color: var(--ink); text-decoration: none; font-size: .9375rem;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #FFF6F3; font-weight: 600; }
.btn:hover { border-color: var(--ink-dim); }

.related ul, .fix-list { list-style: none; padding: 0; }
.related li { margin-bottom: .5rem; }
.fix-list li { margin-bottom: 1.1rem; display: grid; gap: .15rem; }
.fix-list a { font-family: var(--mono); overflow-wrap: anywhere; }

/* Measurement tables. The numbers are the argument on most of these pages, so
   they get real alignment rather than whatever the browser does by default. */
.scroll { overflow-x: auto; margin: 1.5rem 0; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  padding: .5rem .9rem .5rem 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
thead th {
  font-weight: 600;
  color: var(--ink-dim);
  font-size: .8125rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
td code { background: none; padding: 0; }

/* The comparison. Deliberately the same shape on every page — including the row
   that says where we lose, which is the reason anyone believes the rest. */
.compare { margin-top: 3rem; }
.compare tbody tr.is-jarrah td { background: var(--accent-soft); font-weight: 500; }
.compare tbody tr.is-jarrah td:first-child { box-shadow: inset 3px 0 0 var(--accent); padding-left: .7rem; }
.concede {
  border-left: 3px solid var(--rule-strong);
  padding-left: 1rem;
  color: var(--ink-mid);
  font-size: .9375rem;
}