/* Lumber Weight CSS — hand-written, no build, no reset lib. Dark mode is
   prefers-color-scheme only, no toggle, no JS. Every rule hangs off markup the
   templates already emit: restyling must never need an HTML change, so the
   text, links, and headings a crawler reads stay byte-identical. No web fonts
   either — the display face is whatever DIN-like face the OS ships. */

:root {
  color-scheme: light dark;
  --bg: #f6f3ec; --surface: #fffdf9; --text: #1d1a15; --muted: #675d4f; --border: #dcd3c3;
  --stripe: #f0ebe1; --hover: #ece2d0; --rule: rgba(138, 90, 43, .08);
  --accent: #8a5a2b; --accent-soft: rgba(138, 90, 43, .1); --mark: #f4c430; --mark-ink: #f4c430;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Bahnschrift, "DIN Alternate", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, Consolas, "SFMono-Regular", monospace;
  --col: 42rem; --wide: 56rem; --pad: 1.25rem; --bar: 3.5rem;
  --edge: max(var(--pad), calc((100% - var(--wide)) / 2 + var(--pad)));
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16140f; --surface: #1f1c16; --text: #ece6db; --muted: #a89d8c; --border: #3a352c;
    --stripe: #1b1813; --hover: #2c261c; --rule: rgba(217, 162, 92, .07);
    --accent: #d9a25c; --accent-soft: rgba(217, 162, 92, .13); --mark-ink: rgba(244, 196, 48, .3);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 1rem/1.6 var(--font); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { text-decoration-thickness: 2px; }
code { font-family: var(--mono); font-size: .9em; background: var(--accent-soft); padding: .1em .35em; border-radius: .25em; }
::selection { background: var(--mark); color: #1d1a15; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Header: the bottom edge is a tape measure — a tick every half rem, a tall
   one every fifth. */
header.site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 1.5rem;
  padding: .7rem var(--edge) .95rem; border-bottom: 1px solid var(--border);
  background:
    repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 2.5rem) 0 100% / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px .5rem) 0 100% / 100% 5px no-repeat,
    var(--bg);
}
a.brand { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.02rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); text-decoration: none; }
/* the favicon again: dashed nominal outline, solid dressed board */
a.brand::before { content: ""; width: 1.55em; height: 1em; border: 1.5px dashed var(--accent); border-radius: 2px; background: linear-gradient(var(--accent), var(--accent)) center / 62% 50% no-repeat; }
nav.top { display: flex; gap: .2rem 1.5rem; font: 600 .8rem/1 var(--display); letter-spacing: .09em; text-transform: uppercase; }
nav.top a { padding: .8rem 0 .6rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
nav.top a:hover { color: var(--text); border-color: var(--border); }
/* "you are here", read off the canonical URL so no page needs a class */
html:has(link[rel="canonical"][href*="/weight/"]) nav.top a[href="/weight/"],
html:has(link[rel="canonical"][href*="/species/"]) nav.top a[href="/species/"],
html:has(link[rel="canonical"][href$="/janka-hardness/"]) nav.top a[href="/janka-hardness/"],
html:has(link[rel="canonical"][href$="/lumber-sizes/"]) nav.top a[href="/lumber-sizes/"] { color: var(--text); border-color: var(--mark); }

nav.crumbs { padding: .9rem var(--edge) 0; font-size: .8rem; color: var(--muted); }
nav.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: .15rem .45rem; }
nav.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--border); }
nav.crumbs a, footer.site nav a { color: var(--muted); text-decoration: none; } nav.crumbs a:hover, footer.site nav a:hover { color: var(--accent); text-decoration: underline; }

/* One left edge for everything. Prose and the calculator keep a readable
   measure; only data tables may run wider, into the right margin. */
main { max-width: var(--wide); margin-inline: auto; padding: 1.25rem var(--pad) 3.5rem; overflow-wrap: break-word; }
header.site + main { padding-top: 2.25rem; }
main > * { max-width: var(--col); }
main > * + * { margin-top: 1.1rem; }
main > p { text-wrap: pretty; }
h1, h2 { font-family: var(--display); font-weight: 700; font-stretch: 92%; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em; }
h1 + p { font-size: 1.08rem; }
h2 { font-size: 1.4rem; line-height: 1.2; margin-top: 2.9rem; }
h2::before { content: ""; display: block; width: 2.25rem; height: 3px; margin-bottom: .75rem; background: var(--mark); }
main ul:not([class]) { padding-left: 1.2rem; } main ul:not([class]) li + li { margin-top: .4rem; }

/* Calculator: controls, answer, and stats read as one instrument. They are
   three sibling elements, so the card is drawn across them. */
form.calc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); gap: .9rem 1rem; align-items: start;
  margin-top: 1.4rem; padding: 1.1rem 1.15rem 1.25rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: .7rem .7rem 0 0;
}
form.calc label, form.calc .pin { display: flex; flex-direction: column; gap: .35rem; min-width: 0; font: 600 .7rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
form.calc label:has([name="species"]), form.calc label:has([name="preset"]), form.calc .pin:first-child { grid-column: span 2; }
/* 1rem, not smaller: iOS zooms the page when a focused control is under 16px */
form.calc select, form.calc input {
  width: 100%; min-height: 2.75rem; padding: .5rem .65rem; font: 500 1rem/1.2 var(--font); font-variant-numeric: tabular-nums;
  letter-spacing: 0; text-transform: none; color: var(--text); background-color: var(--bg);
  border: 1px solid var(--border); border-radius: .45rem;
}
form.calc select {
  appearance: none; padding-right: 2rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a7f70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: .7rem;
}
form.calc select:disabled, form.calc input:disabled { opacity: .55; cursor: not-allowed; }
form.calc select:not(:disabled):hover, form.calc input:not(:disabled):hover { border-color: var(--accent); }
form.calc .pin strong { display: flex; align-items: center; min-height: 2.75rem; font: 700 1.2rem/1.15 var(--display); letter-spacing: 0; text-transform: none; color: var(--text); }
form.calc .pin a { font: 500 .8rem/1.2 var(--font); letter-spacing: 0; text-transform: none; }

p.answer { margin-top: 0; padding: 1.15rem 1.15rem .3rem; background: var(--surface); border-inline: 1px solid var(--border); line-height: 1.45; color: var(--muted); }
p.answer strong { font-weight: 650; color: var(--text); }
p.answer output { display: block; margin: .1rem 0 .25rem; font-size: 1.15rem; }
/* the number, with a lumber-crayon swipe under it */
p.answer output b {
  margin-right: .3rem; padding-inline: .08em; font: 700 clamp(2.6rem, 1.7rem + 4.6vw, 3.75rem)/1.1 var(--display);
  letter-spacing: -.01em; color: var(--text); background: linear-gradient(transparent 66%, var(--mark-ink) 66% 93%, transparent 93%);
}
/* font-size 0 drops the " · " separators between the chips, nothing else */
p.stats { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 0; padding: .65rem 1.15rem 1.2rem; font-size: 0; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 .7rem .7rem; }
p.stats span { padding: .45rem .7rem; font: 600 .86rem/1 var(--font); font-variant-numeric: tabular-nums; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 99px; }
p.stats span:empty { display: none; }
p.stats span::before { margin-right: .5rem; font: 600 .66rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
p.stats [data-live="density"]::before { content: "Density"; }
p.stats [data-live="bf"]::before { content: "Volume"; }
p.goto a { display: inline-block; padding: .55rem .9rem; font-weight: 600; text-decoration: none; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: .45rem; }
p.goto a:hover { background: var(--accent); color: var(--bg); }
nav.nojs { font-size: .86rem; color: var(--muted); }

/* Cross-section on drafting paper. */
figure.xsec {
  display: grid; justify-items: center; gap: .7rem; padding: 1.5rem 1rem 1rem; border: 1px solid var(--border); border-radius: .6rem;
  background: linear-gradient(var(--rule) 1px, transparent 1px) 0 -1px / 100% 1rem, linear-gradient(90deg, var(--rule) 1px, transparent 1px) -1px 0 / 1rem 100%, var(--surface);
}
figure.xsec + figure.xsec { margin-top: .6rem; }
figure.xsec svg { max-width: 100%; height: auto; overflow: visible; }
.xsec-nominal { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.xsec-actual { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.xsec-text { font-family: inherit; font-size: 11px; fill: var(--muted); }
figure.xsec figcaption { padding: .1rem .5rem; font-size: .8rem; text-align: center; color: var(--muted); background: var(--surface); border-radius: .25rem; }

p.note { padding: .8rem 1rem; font-size: .9rem; color: var(--muted); background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 .45rem .45rem 0; }

/* Tables are the product. Narrow screens: the table scrolls sideways and the
   row label stays pinned. Wide screens (below): a real table whose header
   follows you down the page. Row colours are opaque so pinned cells cover;
   borders are separate (not collapsed) so they travel with sticky cells. */
table.data { display: block; overflow-x: auto; max-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .93rem; }
table.data caption { caption-side: top; padding-bottom: .55rem; font-size: .82rem; text-align: left; color: var(--muted); }
table.data th, table.data td { padding: .55rem .8rem; text-align: left; white-space: nowrap; }
table.data thead th { font: 600 .84rem/1.25 var(--display); letter-spacing: .02em; vertical-align: bottom; color: var(--muted); border-bottom: 2px solid var(--text); }
table.data tbody tr { --row: var(--bg); background: var(--row); }
table.data tbody tr:nth-child(even) { --row: var(--stripe); }
table.data tbody tr:hover { --row: var(--hover); }
table.data tbody th, table.data tbody td { border-bottom: 1px solid var(--border); }
table.data tbody th { font-weight: 600; }
/* the pinned label column, and the header cell above it */
table.data tbody th, table.data:has(tbody th:first-child) thead th:first-child, table.data:has(tbody th:nth-child(2)) thead th:nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--row, var(--bg)); }
table.data tbody th { border-right: 1px solid var(--border); }
table.data tbody a { text-decoration: none; } table.data tbody a:hover { text-decoration: underline; }
table.data td.num { text-align: right; }
/* a header sits over its numbers: right-align it wherever its column is numeric */
table.data:has(tbody td.num:nth-child(1)) thead th:nth-child(1), table.data:has(tbody td.num:nth-child(2)) thead th:nth-child(2),
table.data:has(tbody td.num:nth-child(3)) thead th:nth-child(3), table.data:has(tbody td.num:nth-child(4)) thead th:nth-child(4),
table.data:has(tbody td.num:nth-child(5)) thead th:nth-child(5), table.data:has(tbody td.num:nth-child(6)) thead th:nth-child(6),
table.data:has(tbody td.num:nth-child(7)) thead th:nth-child(7) { text-align: right; }
/* a table of prose (data sources) wraps instead of scrolling */
table.data:has(tbody td:first-child:not(.num)) td { white-space: normal; }
table[data-sortable] thead th { cursor: pointer; user-select: none; } table[data-sortable] thead th:hover { color: var(--text); }
table[data-sortable] thead th::after { content: " ↕"; font-size: .85em; opacity: .55; }
table[data-sortable] thead th[aria-sort] { color: var(--text); }
table[data-sortable] thead th[aria-sort]::after { color: var(--accent); opacity: 1; }
table[data-sortable] thead th[aria-sort="ascending"]::after { content: " ↑"; }
table[data-sortable] thead th[aria-sort="descending"]::after { content: " ↓"; }
span.nodata { color: var(--muted); font-style: italic; }

ul.rel { list-style: none; padding: 0; font-size: .95rem; border-top: 1px solid var(--border); }
ul.rel li { padding: .6rem 0; line-height: 1.75; border-bottom: 1px solid var(--border); }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.grid a { display: block; padding: .8rem .9rem; font: 700 1.08rem/1.2 var(--display); color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; transition: border-color .12s, transform .12s; }
.grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.grid a span { font: 400 .82rem var(--font); color: var(--muted); }

/* 404: no header or footer, so the message sits in the middle of the viewport */
main.notfound { display: grid; place-content: center; justify-items: center; min-height: 100vh; min-height: 100svh; text-align: center; }
main.notfound p { max-width: 28rem; color: var(--muted); } main.notfound nav { display: flex; gap: 1.5rem; font-weight: 600; }

/* ad slot: off for now; enabling sets a min-height in the same deploy (no CLS) */
div.ad { display: none; }

footer.site { max-width: var(--wide); margin: 3rem auto 0; padding: 1.5rem var(--pad) 3rem; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--border); }
footer.site nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .8rem; font: 600 .76rem/1 var(--display); letter-spacing: .09em; text-transform: uppercase; }
footer.site p { max-width: var(--col); }

@media (min-width: 62rem) {
  html { scroll-padding-top: calc(var(--bar) + 3rem); }
  header.site { position: sticky; top: 0; z-index: 3; height: var(--bar); padding-block: 0 .3rem; }
  nav.top a { padding: .55rem 0 .4rem; }
  table.data { display: table; overflow: visible; max-width: none; }
  /* multi-column tables line up with the calculator card; a prose table stays inside the measure */
  table.data:has(thead th:nth-child(5)) { min-width: var(--col); }
  table.data:has(tbody td:first-child:not(.num)) { max-width: var(--col); }
  /* sticky on the row group, not the cells: its background fills the hairline seams between them */
  table.data thead { position: sticky; top: var(--bar); z-index: 2; background: var(--bg); }
  table.data :is(thead, tbody) th { position: static; }
  table.data tbody th { border-right: 0; }
  figure.xsec svg { zoom: 1.35; }
}
@media (prefers-reduced-motion: reduce) { .grid a { transition: none; } .grid a:hover { transform: none; } }