/* Wood guide (/wood-guide, spec 6.5 and 7.6). Front matter css: ["pages/wood-guide"].
   Tokens only (spec 4.1): body 17px or more in --ink-2, 14px only for labels at weight 600+ in
   --ink or --ink-2, captions 15px in --ink-3, --tan for lines and ticks only. Motion: hover and
   press colour changes only; woodguide.js swaps content, nothing animates on its own. */

/* ---------- Header: text column wider, square photo, "on this page" index ---------- */
.wg-page .phead__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.wg-page .phead__media picture { overflow: hidden; }
.wg-page .phead__media img { transform: scale(1.2); transform-origin: 0 15%; }
@media (max-width: 959.98px) { .wg-page .phead__grid { grid-template-columns: minmax(0, 1fr); } .wg-page .phead__media { max-width: 560px; } }
.wg-jump { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.wg-jump__h { margin-bottom: 6px; font: 700 14px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.wg-jump__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.wg-jump__list a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 0; border-bottom: 1px solid var(--line); font: 600 16px/1.3 var(--font-ui); color: var(--ink); text-decoration: none; }
.wg-jump__list a:hover { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.wg-jump__n { flex: none; min-width: 24px; font: 700 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--link); }
@media (max-width: 559.98px) { .wg-jump__list { column-gap: 18px; } .wg-jump__list a { font-size: 15px; gap: 8px; } }
@media (max-width: 359.98px) { .wg-jump__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Shared bits ---------- */
.wg-mini-h { margin: 0 0 14px; font: 700 19px/1.3 var(--font-ui); color: var(--c-head); }
.wg-body { max-width: 38em; font-size: 18px; line-height: 1.65; color: var(--c-text); }
.wg-links { margin-top: 18px; }
.wg-select { min-width: 0; }
.wg-points { display: grid; margin: 0; padding: 0; list-style: none; }
.wg-points li { position: relative; padding: 14px 0 14px 30px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.wg-points li::before { content: ""; position: absolute; left: 0; top: calc(14px + .55em); width: 16px; height: 9px; border-right: 1px solid var(--tan); background: var(--tl) 0 50% / 100% 1px no-repeat; }
.wg-points li:last-child { border-bottom: 1px solid var(--line); }

/* ---------- 01 Explorer ---------- */
.wg-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 36px; margin: 0 0 30px; padding: 18px 0; list-style: none; border-block: 1px solid var(--line-2); }
.wg-key__t { display: block; margin-bottom: 4px; font: 700 16px/1.3 var(--font-ui); color: var(--ink); }
.wg-key__b { display: block; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 899.98px) { .wg-key { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

.wg-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 16px; }
.wg-tools[hidden] { display: none; }
html:not(.js) .wg-tools { display: none; }
.wg-tools__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.wg-tools__l { font: 700 14px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.wg-tools__sort { display: grid; gap: 6px; min-width: 250px; }
.wg-tools__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wg-chip {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--surface);
  font: 600 15px/1.2 var(--font-ui); color: var(--ink); transition: border-color .15s, background-color .15s, color .15s;
}
.wg-chip:hover { border-color: var(--link); color: var(--link); }
.wg-chip[aria-pressed="true"] { border-color: var(--walnut); background: var(--walnut); color: var(--on-dark); }
.wg-chip__n { padding-left: 9px; border-left: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.wg-chip[aria-pressed="true"] .wg-chip__n { border-left-color: rgba(251,246,238,.4); }
.wg-count { margin-bottom: 20px; font: 600 16px/1.4 var(--font-ui); color: var(--ink-2); }

.wg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1159.98px) { .wg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899.98px) { .wg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wg-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); scroll-margin-top: calc(var(--header-h) + 16px); }
.wg-card[hidden] { display: none; }
.wg-card__sw img { display: block; }
.wg-card__head { padding: 16px 18px 0; }
.wg-card__name { font: 700 20px/1.25 var(--font-ui); }
.wg-card__bot { margin-top: 2px; font: italic 400 16px/1.4 var(--font-body); color: var(--ink-3); }
.wg-card__one { padding: 10px 18px 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.wg-card__facts { display: grid; gap: 12px; margin: 16px 18px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.wg-fact dt { font: 700 14px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wg-fact dd { margin: 5px 0 0; }
.wg-fact__v { font: 790 20px/1.2 var(--font-display); font-stretch: 108%; color: var(--ink); }
.wg-fact__q { font: 500 15px/1.3 var(--font-ui); color: var(--ink-3); }
.wg-fact__t { font: 600 16px/1.3 var(--font-ui); color: var(--ink); vertical-align: middle; }
/* Janka meter: one series, the value is printed beside it. Walnut fill with a 4px rounded data end,
   square at the baseline, on a lighter track with quarter ticks (500 / 1,000 / 1,500 / 2,000 lbf). */
.wg-meter {
  position: relative; display: block; height: 8px; margin-top: 8px; overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(61,31,3,.28) calc(25% - 1px) 25%), var(--band);
}
.wg-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 0 4px 4px 0; background: var(--walnut); }
.wg-tier { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: middle; }
.wg-tier__m { width: 14px; height: 14px; border: 1.5px solid var(--walnut); }
.wg-tier__m.is-on { background: var(--walnut); }
.wg-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 18px 0; padding: 0; list-style: none; }
.wg-card__act { display: grid; gap: 6px; margin-top: auto; padding: 18px 18px 14px; }
.wg-card__open, .wg-card__more > summary { width: 100%; min-height: 44px; padding: 9px 16px; font-size: 16px; list-style: none; }
.wg-card__open[hidden] { display: none; }
/* With scripts, the profile opens in the dialog: the button shows, the inline profile hides. */
html:not(.js) .wg-card__open, html.js .wg-card__more { display: none; }
.wg-card__more > summary::-webkit-details-marker { display: none; }
.wg-card__more[hidden] { display: none; }
.wg-card__more[open] > summary { margin-bottom: 14px; }
.wg-card__use { min-height: 44px; font-size: 16px; }
.wg-help { container-type: inline-size; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-card); grid-column: span 3; }
.wg-help__in { display: grid; gap: 26px; height: 100%; }
.wg-help__main { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.wg-help__k { margin-bottom: 8px; font: 700 14px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tan-light); }
.wg-help__t { font: 790 clamp(1.5rem, 2.4vw, 2rem)/1.12 var(--font-display); font-stretch: 110%; color: var(--on-dark); }
.wg-help__p { max-width: 36em; margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--on-dark-2); }
.wg-help__form { display: grid; gap: 8px; }
.wg-help__form .field__label { color: var(--on-dark); }
.wg-help__form .btn { min-height: 50px; margin-top: 4px; }
.wg-picks__list { display: grid; margin: 0; padding: 0; list-style: none; }
.wg-picks__list li { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid var(--c-rule-2); }
.wg-picks__t { font: 700 14px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); }
.wg-picks__b { font-size: 17px; line-height: 1.5; color: var(--on-dark-2); }
@container (min-width: 700px) { .wg-help__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; } }
@container (max-width: 459.98px) { .wg-picks { display: none; } }
@media (max-width: 1159.98px) { .wg-help { grid-column: span 2; } }
@media (max-width: 899.98px) { .wg-help { grid-column: 1 / -1; } }
/* Two columns with all 13 cards: the help card takes the one free cell (woodguide.js does the
   same arithmetic when a filter changes the count). */
@media (min-width: 560px) and (max-width: 899.98px) { html.js .wg-help { grid-column: span 1; } }
.wg-prof__one { margin-bottom: 16px; font-size: 18px; line-height: 1.55; color: var(--ink); }
@media (min-width: 560px) { .wg-card .wg-prof__one { display: none; } }

/* Profile content (inline in the card without JS, in the dialog with it) */
.wg-prof__dl { display: grid; gap: 14px; margin: 0; }
.wg-prof__dl dt { font: 700 14px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wg-prof__dl dd { margin: 4px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.wg-prof__src { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 15px/1.6 var(--font-ui); color: var(--ink-3); }
.wg-prof__src-h { display: block; margin-bottom: 2px; font: 700 14px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wg-prof__src a { color: var(--link); }

/* Phones: a compact card, swatch beside the name */
@media (max-width: 559.98px) {
  .wg-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wg-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; padding: 14px 14px 4px; }
  .wg-card__sw { grid-column: 1; grid-row: 1; }
  .wg-card__sw img.fit { aspect-ratio: 1 / 1; border-radius: 3px; }
  .wg-card__head { grid-column: 2; grid-row: 1; align-self: center; padding: 0; }
  .wg-card__one, .wg-card__facts, .wg-card__tags, .wg-card__act { grid-column: 1 / -1; margin-inline: 0; padding-inline: 0; }
  .wg-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .wg-card__one { display: none; }
  .wg-card__facts { margin-top: 14px; }
  .wg-fact .wg-tier { display: flex; margin: 4px 0 8px; }
  .wg-card__open, .wg-card__more > summary { min-height: 46px; }
  .wg-card__act { padding-top: 16px; }
}

/* ---------- Profile dialog ---------- */
html.wg-lock { overflow: hidden; }
.wg-dlg { width: min(980px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--r-card); background: var(--surface); color: var(--ink-2); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.wg-dlg::backdrop { background: rgba(26,18,11,.74); }
.wg-dlg__box { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.wg-dlg__head { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.wg-dlg__sw img { width: 104px; height: 104px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; }
.wg-dlg__kick { margin-bottom: 4px; font: 700 14px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.wg-dlg__title { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.08; }
.wg-dlg__title:focus { outline: none; }
.wg-dlg__title:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.wg-dlg__bot { margin-top: 4px; font: italic 400 17px/1.4 var(--font-body); color: var(--ink-3); }
.wg-dlg__facts { margin-top: 6px; font: 600 16px/1.4 var(--font-ui); color: var(--ink); }
.wg-dlg__x { align-self: start; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--line-2); border-radius: var(--r-btn); background: var(--surface); color: var(--ink); cursor: pointer; }
.wg-dlg__x:hover { border-color: var(--walnut); background: var(--band); }
.wg-dlg__body { overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 24px; }
.wg-dlg__body:focus { outline: none; }
.wg-dlg__body:focus-visible { outline: 3px solid var(--link); outline-offset: -3px; }
.wg-dlg__body .wg-prof__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
.wg-dlg__body .wg-prof__one { max-width: 44em; font-size: 19px; }
.wg-dlg__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--paper); }
.wg-dlg__nav { display: flex; gap: 8px; margin-left: auto; }
.wg-dlg__step { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--surface); cursor: pointer; font: 600 15px/1.2 var(--font-ui); color: var(--ink); }
.wg-dlg__step:hover { border-color: var(--link); color: var(--link); }
.wg-dlg__step[hidden] { display: none; }
@media (max-width: 719.98px) {
  .wg-dlg { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .wg-dlg__box { max-height: calc(100dvh - 16px); }
  .wg-dlg__head { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 14px 16px; }
  .wg-dlg__sw img { width: 64px; height: 64px; }
  .wg-dlg__facts { display: none; }
  .wg-dlg__body { padding: 18px 16px; }
  .wg-dlg__body .wg-prof__dl { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wg-dlg__foot { padding: 12px 16px; gap: 8px; }
  .wg-dlg__foot .btn { flex: 1 1 100%; }
  .wg-dlg__nav { width: 100%; margin: 0; }
  .wg-dlg__step { flex: 1; justify-content: center; }
}

/* ---------- 02 Compare two ---------- */
.wg-cmp__pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-bottom: 18px; }
.wg-cmp__pick[hidden] { display: none; }
html:not(.js) .wg-cmp__pick { display: none; }
/* With scripts, only the chosen pair of columns shows (walnut and white oak until a pick). */
html.js .wg-cmp__off { display: none; }
.wg-cmp__pick .field { flex: 1 1 240px; max-width: 360px; }
.wg-cmp__vs { padding-bottom: 14px; font: 790 20px/1 var(--font-display); font-stretch: 110%; color: var(--ink-2); }
.wg-cmp__sum { max-width: 58em; margin-bottom: 20px; font-size: 19px; line-height: 1.55; color: var(--ink); }
.wg-cmp__wrap { position: relative; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); }
.wg-cmp__wrap:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.wg-cmp__table { width: 100%; min-width: 2800px; border-collapse: collapse; table-layout: fixed; font: 400 17px/1.45 var(--font-ui); color: var(--ink-2); }
html.js .wg-cmp .wg-cmp__table { min-width: 0; }
.wg-cmp__table [hidden] { display: none !important; }
.wg-cmp__table th, .wg-cmp__table td { padding: 14px 18px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.wg-cmp__table thead th, .wg-cmp__table thead td { border-top: 0; vertical-align: bottom; }
.wg-cmp__corner { width: 230px; }
.wg-cmp__table tbody th { font: 700 16px/1.35 var(--font-ui); color: var(--ink); }
.wg-cmp__unit { display: block; margin-top: 2px; font: 400 15px/1.35 var(--font-ui); color: var(--ink-3); }
.wg-cmp__sw img { display: block; margin-bottom: 12px; border-radius: 3px; }
.wg-cmp__name { display: block; font: 790 22px/1.15 var(--font-display); font-stretch: 110%; color: var(--ink); }
.wg-cmp__bot { display: block; margin-top: 2px; font: italic 400 16px/1.35 var(--font-body); color: var(--ink-3); }
.wg-cmp__big { font: 790 20px/1.2 var(--font-display); font-stretch: 108%; color: var(--ink); }
.wg-cmp__table td .wg-tier { margin-right: 8px; }
.wg-cmp__table tbody tr:nth-child(even) > * { background: rgba(239,230,216,.45); }
.wg-cmp__act td, .wg-cmp__act th { background: var(--paper) !important; }
.wg-cmp__act .arrow-link { font-size: 16px; }
@media (max-width: 719.98px) {
  html.js .wg-cmp .wg-cmp__table, html.js .wg-cmp .wg-cmp__table thead, html.js .wg-cmp .wg-cmp__table tbody { display: block; }
  html.js .wg-cmp .wg-cmp__table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.js .wg-cmp .wg-cmp__table th, html.js .wg-cmp .wg-cmp__table td { padding: 12px 14px; }
  html.js .wg-cmp .wg-cmp__corner { display: none; }
  html.js .wg-cmp .wg-cmp__table tbody th { grid-column: 1 / -1; padding-bottom: 2px; border-top: 1px solid var(--line-2); }
  html.js .wg-cmp .wg-cmp__table tbody td { border-top: 0; }
  html.js .wg-cmp .wg-cmp__table tbody tr:nth-child(even) > * { background: transparent; }
  html.js .wg-cmp .wg-cmp__act th { display: none; }
  html.js .wg-cmp .wg-cmp__act td { border-top: 1px solid var(--line-2); }
  .wg-cmp__name { font-size: 19px; }
  .wg-cmp__big { font-size: 18px; }
  .wg-cmp__vs { display: none; }
}

/* ---------- 03 and 04 Photo modules ---------- */
.wg-media { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.wg-media--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
.wg-media__copy .shead { margin-bottom: 22px; }
/* The copy comes first in the DOM (heading before the controls it introduces); on wide screens
   the figure moves to the left column on the plain module, alternating with --rev. */
@media (min-width: 900px) { .wg-media:not(.wg-media--rev) .wg-media__fig { order: -1; } }
@media (max-width: 899.98px) {
  .wg-media, .wg-media--rev { grid-template-columns: minmax(0, 1fr); }
  .wg-media__fig { max-width: 520px; }
}
.wg-ages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.wg-ages > div { padding: 12px 0; border-top: 1px solid var(--line); }
.wg-ages dt { font: 700 16px/1.3 var(--font-ui); color: var(--ink); }
.wg-ages dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.wg-media__copy .wg-mini-h { margin-top: 28px; }
@media (max-width: 559.98px) { .wg-ages { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 05 Finish guide ---------- */
.wg-fin__wrap { overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); }
.wg-fin { width: 100%; border-collapse: collapse; font: 400 17px/1.45 var(--font-ui); color: var(--ink-2); }
.wg-fin th, .wg-fin td { padding: 16px 18px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.wg-fin thead th { padding-block: 14px; border-top: 0; background: var(--paper); font: 700 14px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wg-fin tbody th { width: 19%; }
.wg-fin__name { display: block; font: 700 18px/1.3 var(--font-ui); color: var(--ink); }
.wg-fin__sub { display: block; margin-top: 3px; font: 400 15px/1.4 var(--font-ui); color: var(--ink-3); }
.wg-fin__fit { width: 17%; font-weight: 600; color: var(--ink); }
.wg-fin tbody tr:nth-child(even) > * { background: rgba(239,230,216,.45); }
@media (max-width: 899.98px) {
  .wg-fin thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wg-fin, .wg-fin tbody { display: block; }
  .wg-fin tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 18px; border-top: 1px solid var(--line-2); }
  .wg-fin tbody tr:first-child { border-top: 0; }
  .wg-fin th, .wg-fin td { display: block; width: auto; padding: 0; border: 0; background: none !important; }
  .wg-fin tbody th { grid-column: 1 / -1; width: auto; }
  .wg-fin td::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 700 14px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .wg-fin__fit { width: auto; }
}
@media (max-width: 359.98px) { .wg-fin tr { grid-template-columns: minmax(0, 1fr); } }
.wg-fin__below { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px); align-items: start; }
.wg-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.wg-use { padding: 14px 0 18px; border-top: 1px solid var(--line-2); }
.wg-use__t { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--font-ui); }
.wg-use p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.wg-note { padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-left: 3px solid var(--tan); border-radius: var(--r-card); background: var(--surface); }
.wg-note p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.wg-fin__src { max-width: none; margin-top: 26px; }
@media (max-width: 959.98px) { .wg-fin__below { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .wg-uses { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 06 Movement calculator ---------- */
.wg-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
.wg-calc__form { display: grid; gap: 20px; align-content: start; padding: clamp(20px, 3vw, 34px); }
.wg-unit { position: relative; }
.wg-unit .field__input { padding-right: 52px; }
.wg-unit__u { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 600 16px/1 var(--font-ui); color: var(--ink-2); pointer-events: none; }
.wg-radio { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wg-radio legend { margin-bottom: 6px; padding: 0; }
.wg-radio__opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-btn); cursor: pointer; font: 400 16px/1.4 var(--font-ui); color: var(--ink-2); transition: border-color .15s, background-color .15s; }
.wg-radio__opt strong { display: block; font-size: 17px; }
.wg-radio__opt:hover { border-color: var(--ink-3); }
.wg-radio__opt:has(input:checked) { border-color: var(--walnut); background: var(--band); }
.wg-radio__opt input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--walnut); }
.wg-mc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wg-calc__out { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 36px); }
.wg-calc__k { font: 700 14px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tan-light); }
.wg-calc__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; font: 790 clamp(3rem, 6vw, 4.8rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; color: var(--on-dark); }
.wg-calc__frac { flex-basis: 100%; margin-top: 6px; font: 700 20px/1.3 var(--font-ui); font-stretch: 100%; letter-spacing: 0; color: var(--tan-light); }
.wg-board { margin: 22px 0 4px; }
.wg-board__w, .wg-board__d { font: 600 15px/1.3 var(--font-ui); color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.wg-board__w { text-align: center; }
.wg-board__d { text-align: right; }
.wg-board svg { display: block; width: 100%; height: auto; margin: 6px 0; overflow: visible; }
.wg-board__dim { fill: none; stroke: var(--tan-light); stroke-width: 1.5; }
.wg-board__end { fill: var(--deep-2); stroke: var(--tan-light); stroke-width: 1.5; }
.wg-board__rings[hidden] { display: none; }
.wg-board__rings path, .wg-board__rings circle { fill: none; stroke: #8f7650; stroke-width: 1.5; }
.wg-calc__sent { margin-top: 18px; font-size: 19px; line-height: 1.5; color: var(--on-dark); }
.wg-calc__math { margin-top: 16px; font: 600 16px/1.5 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--on-dark-2); }
.wg-calc__math .wg-calc__k { margin-right: 10px; }
.wg-calc__note { margin-top: auto; padding-top: 18px; font: 400 15px/1.55 var(--font-ui); color: var(--on-dark-3); }
@media (max-width: 899.98px) { .wg-calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 419.98px) { .wg-mc { grid-template-columns: minmax(0, 1fr); } }

.wg-mv { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 60px); align-items: start; }
.wg-mv__cap { display: grid; gap: 2px; margin-bottom: 12px; }
.wg-mv__cap strong { font: 700 18px/1.3 var(--font-ui); }
.wg-mv__cap span { font: 400 15px/1.45 var(--font-ui); color: var(--ink-3); }
.wg-mvt { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); font: 400 16px/1.3 var(--font-ui); color: var(--ink-2); }
.wg-mvt th, .wg-mvt td { padding: 8px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.wg-mvt thead th { border-top: 0; font: 700 14px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.wg-mvt tbody th { font-weight: 600; color: var(--ink); }
.wg-mvt td { width: 30%; }
.wg-mvt__v { display: block; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.wg-mvt__bar { display: block; width: var(--v); max-width: 100%; height: 8px; margin-top: 5px; border-radius: 0 4px 4px 0; }
.wg-mvt__bar--flat, .wg-key-sw--flat { background: var(--walnut); }
.wg-mvt__bar--qtr, .wg-key-sw--qtr { background: var(--tan-light); }
.wg-key-sw { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.wg-mvt tr.is-on > * { background: var(--band); }
.wg-mvt tr.is-on > th { box-shadow: inset 4px 0 var(--walnut); }
@media (max-width: 899.98px) { .wg-mv { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 419.98px) {
  .wg-mvt th, .wg-mvt td { padding-inline: 10px; }
  .wg-mvt thead th { letter-spacing: .02em; white-space: normal; }
  .wg-mvt tbody th { font-size: 15px; }
  .wg-key-sw { display: block; margin-bottom: 4px; }
}

/* ---------- 07 Wood and Missouri ---------- */
.wg-mo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.wg-harvest { margin: 0; }
.wg-harvest__cap { display: grid; gap: 2px; }
.wg-harvest__cap strong { font: 700 18px/1.3 var(--font-ui); }
.wg-harvest__cap span { font: 400 15px/1.45 var(--font-ui); color: var(--ink-3); }
/* Part to whole: ordinal walnut ramp by share, 2px paper gaps, direct labels plus the key below. */
.wg-harvest__bar { display: flex; gap: 2px; height: 48px; margin-top: 14px; }
.wg-harvest__seg { display: flex; flex: var(--w) 1 0%; align-items: center; min-width: 0; padding-left: 12px; font: 700 17px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.wg-harvest__seg--1, .wg-harvest__sw--1 { background: var(--walnut); color: var(--on-dark); }
.wg-harvest__seg--2, .wg-harvest__sw--2 { background: var(--link); color: var(--on-dark); }
.wg-harvest__seg--3, .wg-harvest__sw--3 { background: var(--tan-light); color: var(--deep); }
.wg-harvest__seg--3 { border-radius: 0 4px 4px 0; }
.wg-harvest__key { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.wg-harvest__key li { display: flex; align-items: baseline; gap: 10px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.wg-harvest__key strong { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.wg-harvest__sw { flex: none; width: 14px; height: 14px; transform: translateY(1px); }
.wg-mo__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin-top: 34px; }
.wg-facts { display: grid; margin: 0; padding: 0; list-style: none; }
.wg-facts li { padding: 16px 0; border-top: 1px solid var(--line-2); font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.wg-facts li:first-child { padding-top: 0; border-top: 0; }
@media (max-width: 899.98px) { .wg-mo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 08 Sources ---------- */
.wg-src { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 2.25fr); gap: 20px 56px; align-items: start; }
.wg-src__title { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
.wg-src__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; margin: 0; padding: 0; list-style: none; }
.wg-src__list li { padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 17px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 959.98px) { .wg-src { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .wg-src__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559.98px) {
  .wg-media .seg { display: flex; width: 100%; }
  .wg-media .seg__btn { flex: 1 1 0; padding-inline: 8px; }
}
@media (max-width: 359.98px) { .wg-mvt th, .wg-mvt td { padding-inline: 6px; } .wg-mvt thead th { letter-spacing: 0; } }