/* Millwork and shop-service pages: /architectural-millwork, /wainscoting-wall-paneling,
   /cabinet-doors-drawer-boxes, /slab-flattening (BUILD-SPEC 6.2). Loaded with front matter
   css: ["pages/millwork"]. Text uses the spec 4.1 tokens only: body 17px+ in --ink-2, captions
   15px in --ink-3, 14px labels at weight 600+ in --ink or --ink-2. --tan is lines and fills only. */

.mw-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.mw-grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mw-grid--media-first { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.mw-cmp { max-width: 380px; }
@media (max-width: 899.98px) { .mw-grid, .mw-grid--even, .mw-grid--media-first { grid-template-columns: minmax(0, 1fr); } }
.mw-h3 { margin-bottom: 12px; font: 700 21px/1.3 var(--font-ui); color: var(--c-head); }
.mw-p { font-size: 18px; line-height: 1.6; color: var(--c-text); }
.mw-p + .mw-p { margin-top: .9em; }
@media (max-width: 639.98px) { .mw-p { font-size: 17px; } }
.mw-src { margin-top: 18px; font: 400 15px/1.5 var(--font-ui); color: var(--ink-3); }
.mw-src a { color: var(--link); }
.mw-more { margin-top: 18px; }
.mw-media .caption { max-width: 34em; }
.mw-media > figcaption { margin-top: 28px; }
.mw-lb { position: relative; display: block; }
.mw-lb .mw-zoom { z-index: 2; }
.mw-lb:hover .mw-zoom, .mw-lb:focus-visible .mw-zoom { opacity: 1; }

/* Definition rows: term on the left, meaning on the right, hairlines between */
.mw-defs { margin: 0; border-top: 1px solid var(--line-2); }
.mw-defs__row { display: grid; grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr); gap: 8px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.mw-defs dt { font: 700 19px/1.3 var(--font-ui); color: var(--ink); }
.mw-defs dt span { display: block; margin-top: 4px; font: 600 14px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.mw-defs dd { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 639.98px) { .mw-defs__row { grid-template-columns: minmax(0, 1fr); } .mw-defs dd { font-size: 17px; } }

/* A pale card for tables and callouts */
.mw-card { padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.mw-card .mw-h3 { margin-bottom: 8px; }
.mw-card > .mw-p { font-size: 17px; }

/* Drafting diagrams (inline SVG). Labels stay 18px or larger in viewBox units and the figures
   never shrink below the width that keeps them at 14px or more on screen. */
.mw-fig { margin: 18px 0 0; }
.mw-fig svg { display: block; width: 100%; height: auto; }
.mw-svg-label { font: 600 24px/1 var(--font-ui); fill: var(--ink); }
.mw-svg-note { font: 600 22px/1 var(--font-ui); fill: var(--ink-2); }
.mw-key { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; font: 400 16px/1.45 var(--font-ui); color: var(--ink-2); }
.mw-key li { display: flex; align-items: flex-start; gap: 12px; }
.mw-key__sw { flex: none; width: 26px; height: 16px; margin-top: 3px; border: 1px solid var(--walnut); }
.mw-key__sw--hatch { background: repeating-linear-gradient(135deg, rgba(61,31,3,.28) 0 2px, transparent 2px 7px), var(--surface); }
.mw-key__sw--line { height: 0; margin-top: 11px; border: 0; border-top: 2px solid var(--tan); }
.mw-key__sw--solid { background: var(--walnut); }
.mw-key__sw--dash { height: 0; margin-top: 11px; border: 0; border-top: 2px dashed var(--walnut); }

/* Clearance card: diagram beside its key, then the projection strip */
.mw-clear { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 24px; align-items: center; margin-top: 8px; }
.mw-clear .mw-fig { margin: 0; }
.mw-clear .mw-key { margin: 0; }
@media (max-width: 559.98px) { .mw-clear { grid-template-columns: minmax(0, 1fr); } .mw-clear .mw-fig { max-width: 380px; } }
.mw-proj th, .mw-proj td { padding-right: 10px; }
.mw-table.mw-proj thead th { padding-top: 10px; border-top: 1px solid var(--line); font: 600 16px/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
.mw-proj { table-layout: fixed; }
.mw-proj th[scope="row"] { width: 38%; }
.mw-table.mw-proj th[scope="row"] { font: 700 14px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

/* Small data tables (clearance, reface vs replace) */
.mw-table { width: 100%; margin-top: 18px; border-collapse: collapse; font: 400 16px/1.45 var(--font-ui); color: var(--ink-2); }
.mw-table caption { padding-bottom: 8px; font: 700 14px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: left; }
.mw-table th, .mw-table td { padding: 11px 14px 11px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.mw-table thead th { padding-top: 0; border-top: 0; font: 700 14px/1.25 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mw-table tbody th { font-weight: 600; color: var(--ink); }
.mw-table .mw-num { font: 790 18px/1.3 var(--font-display); font-stretch: 108%; color: var(--ink); white-space: nowrap; }

/* Mantel types list */
.mw-types { display: grid; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.mw-types li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mw-types__n { display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--ink); font: 700 16px/1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.mw-types strong { display: block; margin-bottom: 2px; font: 700 18px/1.3 var(--font-ui); }
.mw-types p { font-size: 17px; line-height: 1.55; }

/* Wainscot styles: photo cards */
.mw-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin: 0; padding: 0; list-style: none; }
@media (max-width: 1099.98px) { .mw-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .mw-styles { grid-template-columns: minmax(0, 1fr); } }
.mw-style { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.mw-style__media { position: relative; display: block; overflow: hidden; }
.mw-style__media img { transition: transform .35s var(--ease); }
.mw-style__media:hover img { transform: scale(1.03); }
.mw-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-btn); background: rgba(26,18,11,.82); color: var(--on-dark); opacity: 0; transition: opacity .15s; }
.mw-style__media:hover .mw-zoom, .mw-style__media:focus-visible .mw-zoom, .mw-tile__media:hover .mw-zoom, .mw-tile__media:focus-visible .mw-zoom { opacity: 1; }
@media (hover: none) { .mw-zoom { opacity: 1; } }
.mw-style__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.mw-style__title { font: 700 20px/1.25 var(--font-ui); }
.mw-style__body > .chip { align-self: flex-start; }
.mw-style__body p { font-size: 17px; line-height: 1.55; }
.mw-style__seen { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font: 400 15px/1.45 var(--font-ui); color: var(--ink-3); }
.mw-style__seen a { color: var(--link); font-weight: 600; }
.mw-also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: clamp(28px, 3.5vw, 40px) 0 0; border-top: 1px solid var(--line-2); }
.mw-also > div { padding-top: 16px; }
.mw-also dt { font: 700 18px/1.3 var(--font-ui); color: var(--ink); }
.mw-also dd { margin: 4px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 899.98px) { .mw-also { grid-template-columns: minmax(0, 1fr); } .mw-also > div + div { margin-top: 4px; } }

/* Stats inside a column: two across so values never crowd */
.mw-stats .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mw-stats--2 .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mw-stats--3 .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.mw-stats .stats__value { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
@media (max-width: 379.98px) { .mw-stats--2 .stats { grid-template-columns: minmax(0, 1fr); } }

/* Doors: detail tiles, each a real photo cropped to the detail, opening the full photo */
.mw-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); margin: 0; padding: 0; list-style: none; counter-reset: tile; }
@media (max-width: 1099.98px) { .mw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .mw-tiles { grid-template-columns: minmax(0, 1fr); } }
.mw-tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); counter-increment: tile; }
.mw-tile__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--band); }
.mw-tile__media picture, .mw-tile__media img { width: 100%; height: 100%; }
.mw-tile__media img { object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); transition: transform .35s var(--ease); }
.mw-tile__media:hover img { transform: scale(calc(var(--zoom, 1) * 1.03)); }
.mw-tile__body { display: grid; gap: 8px; padding: 16px 18px 18px; }
/* Focus ring on the card: the photo link sits flush with the card's clipped edge. */
@supports selector(:has(*)) {
  .mw-style:has(.mw-style__media:focus-visible), .mw-tile:has(.mw-tile__media:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }
  .mw-style__media:focus-visible, .mw-tile__media:focus-visible { outline: none; }
}
.mw-tile__title { display: flex; align-items: baseline; gap: 12px; font: 700 19px/1.3 var(--font-ui); }
.mw-tile__title::before { content: counter(tile, decimal-leading-zero); flex: none; font: 700 14px/1 var(--font-ui); letter-spacing: .08em; color: var(--link); font-variant-numeric: tabular-nums; }
.mw-tile__body p { font-size: 17px; line-height: 1.55; }
.mw-tile__from { font: 400 15px/1.45 var(--font-ui); color: var(--ink-3); }
.mw-tile__from a { color: var(--link); font-weight: 600; }

/* Reface or replace comparison */
.mw-vs { width: 100%; border-collapse: collapse; font: 400 17px/1.5 var(--font-ui); color: var(--ink-2); }
.mw-vs th, .mw-vs td { padding: 14px 16px 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.mw-vs thead td { border-top: 0; }
.mw-vs thead th { padding-top: 0; border-top: 0; font: 700 19px/1.3 var(--font-ui); color: var(--ink); }
.mw-vs thead th span { display: block; margin-top: 2px; font: 600 14px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.mw-vs tbody th { width: 24%; font: 700 14px/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mw-vs tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
@media (max-width: 639.98px) {
  .mw-vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mw-vs tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
  .mw-vs tbody th { grid-column: 1 / -1; width: auto; }
  .mw-vs th, .mw-vs td { padding: 0; border: 0 !important; }
  .mw-vs td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 14px/1.3 var(--font-ui); color: var(--link); }
}

/* Slab: end-grain figures */
.mw-endgrain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0 0 clamp(28px, 3.5vw, 40px); padding: 0; list-style: none; }
.mw-endgrain li { display: grid; align-content: start; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.mw-endgrain svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 4px auto 6px; }
.mw-endgrain h3 { font: 700 19px/1.3 var(--font-ui); }
.mw-endgrain p { font-size: 17px; line-height: 1.55; }
@media (max-width: 767.98px) {
  .mw-endgrain { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mw-endgrain svg { max-width: 260px; margin-inline: 0; }
}
.mw-wood { fill: #ecdcc0; stroke: var(--walnut); stroke-width: 1.5; }
.mw-ring { fill: none; stroke: var(--tan); stroke-width: 1.5; }
.mw-after { fill: none; stroke: var(--walnut); stroke-width: 2.5; stroke-dasharray: 7 5; }
.mw-check { fill: var(--walnut); }
.mw-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 48px; }
@media (max-width: 767.98px) { .mw-facts { grid-template-columns: minmax(0, 1fr); } }

/* Slab: numbered steps beside the shop photo */
.mw-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); counter-reset: step; }
.mw-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); counter-increment: step; }
.mw-steps li::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--ink); font: 790 18px/1 var(--font-display); font-stretch: 110%; color: var(--ink); }
.mw-steps strong { display: block; margin-bottom: 4px; font: 700 19px/1.3 var(--font-ui); }
.mw-steps p { font-size: 17px; line-height: 1.55; }

/* Slab: movement chart (a table with one bar per species) */
.mw-move { width: 100%; border-collapse: collapse; font: 400 16px/1.35 var(--font-ui); color: var(--ink-2); }
.mw-move caption { padding-bottom: 10px; font: 700 14px/1.35 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: left; }
.mw-move thead th { padding: 0 10px 8px 0; font: 700 14px/1.25 var(--font-ui); color: var(--ink-2); text-align: left; vertical-align: bottom; }
.mw-move tbody th, .mw-move td { padding: 6px 10px 6px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.mw-move tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.mw-move .mw-move__qs { width: 5.5em; padding-right: 0; font-variant-numeric: tabular-nums; text-align: right; }
.mw-move thead .mw-move__qs { text-align: right; }
.mw-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mw-bar__fill { flex: none; width: var(--w); height: 14px; border-radius: 0 4px 4px 0; background: var(--walnut); }
.mw-bar__v { flex: none; font: 700 16px/1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.mw-move tr.is-key th, .mw-move tr.is-key td { background: var(--surface); }
@media (max-width: 479.98px) { .mw-move { font-size: 15px; } .mw-move tbody th { white-space: normal; } }
/* Millwork page: the three definitions side by side */
@media (min-width: 900px) { .mw-defs--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); } .mw-defs--row .mw-defs__row { display: block; } .mw-defs--row dt { margin-bottom: 8px; } }
.mw-moist + .mw-p { max-width: 62em; }