:root {
  color-scheme: light;
  --paper: #efede7;
  --ink: #30312c;
  --muted: #696a61;
  --line: #888a7d;
  --fine-line: #c1c1b5;
  --sheet: #d0cec5;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family:var(--mono); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.page { max-width: 1500px; margin: 0 auto; padding: 0 40px; }
.masthead { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ink); }
.wordmark { font-size: 24px; letter-spacing: -.045em; white-space: nowrap; }
.masthead-note, .eyebrow, .edition, .section-label, .drawing-meta, .drawing-caption, .range-limits, .control-footer > span, .page-footer, .dimension-tag { font-family: var(--mono); font-weight: 400; }
.masthead-note, .edition { font-size: 12px; letter-spacing: .025em; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; padding: 34px 0 32px; gap: 15px; }
.eyebrow { margin: 0 0 13px; font-size: 12px; letter-spacing: .015em; }
h1 { font-size: clamp(32px, 3.1vw, 48px); font-weight: 400; line-height: 1.05; letter-spacing: -.05em; margin: 0; }
.edition { padding-bottom: 3px; white-space: nowrap; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(310px, 1fr); gap: 20px; border-top: 1px solid var(--ink); }
.drawing-section { min-width: 0; }
.section-label { display: flex; align-items: center; justify-content: space-between; min-height: 43px; gap: 16px; font-size: 13px; }
.section-label h2 { margin: 0; font: inherit; }
.drawing-sheet { background: var(--sheet); min-height: 576px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.drawing-meta, .drawing-caption { font-size: 12px; display: flex; justify-content: space-between; gap: 12px; padding: 19px 20px; line-height: 1.4; }
.drawing-meta { color: #56594e; }
.drawing-caption { font-size: 12px; }
.drawing-canvas { position: relative; width: 100%; aspect-ratio: 800 / 540; }
#table-drawing { display: block; width: 100%; height: 100%; overflow: visible; }
#table-geometry path { stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#table-geometry path:not([fill="none"]) { fill: var(--sheet); }
#dimension-lines { stroke: #76796b; stroke-width: .7; fill: none; }
#dimension-lines path { vector-effect: non-scaling-stroke; }
.dimension-tag { position: absolute; transform: translate(-50%, -50%); font-size: 12px; line-height: 1.1; white-space: nowrap; background: var(--sheet); padding: 4px 5px; pointer-events: none; }
.dimension-tag.is-active { color: #1f2517; }
.dimensions-strip { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); padding: 19px 4px; font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.dimensions-strip small { font: inherit; font-size: 12px; margin-right: 5px; color: var(--muted); }
.details-column { min-width: 0; padding-left: 20px; border-left: 1px solid var(--ink); }
.control-intro { margin: 11px 0 20px; font-size: 22px; letter-spacing: -.04em; }
.dimension-control { padding: 16px 0 18px; border-top: 1px solid var(--fine-line); }
.control-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.control-heading > label { display: flex; align-items: center; gap: 14px; font-size: 16px; }
.axis-letter { font-size: 12px; font-family: var(--mono); color: var(--muted); width: 10px; }
.number-field { display: flex; align-items: baseline; gap: 6px; }
.number-field input { width: 82px; min-height: 40px; padding: 2px 4px; border: 1px solid transparent; border-radius: 0; text-align: right; background: transparent; font-family: var(--mono); font-size: 23px; letter-spacing: -.05em; appearance: textfield; -moz-appearance: textfield; }
.number-field input::-webkit-inner-spin-button, .number-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.number-field input:hover { border-bottom-color: var(--line); }
.number-field input:focus { background: #f8f7f2; outline: 1px solid var(--ink); }
.number-field > span { font-size: 12px; font-family: var(--mono); color: var(--muted); }
.dimension-range { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 34px; padding: 0; margin: 2px 0 0; background: transparent; border-radius: 0; cursor: pointer; touch-action: pan-y; --progress: 50%; }
.dimension-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--ink) 0%, var(--ink) var(--progress), #a9ab9e var(--progress), #a9ab9e 100%); }
.dimension-range::-moz-range-track { height: 2px; background: #a9ab9e; }
.dimension-range::-moz-range-progress { height: 2px; background: var(--ink); }
.dimension-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 17px; width: 17px; border: 1px solid var(--paper); background: var(--ink); border-radius: 50%; margin-top: -7.5px; box-shadow: 0 0 0 1px var(--ink); }
.dimension-range::-moz-range-thumb { height: 15px; width: 15px; border: 1px solid var(--paper); background: var(--ink); border-radius: 50%; box-shadow: 0 0 0 1px var(--ink); }
.dimension-range:focus-visible { outline: 1px dashed var(--ink); outline-offset: 3px; }
.dimension-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.dimension-choice { min-height: 44px; padding: 10px 14px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; }
.dimension-choice[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.dimension-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.range-limits { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.control-footer { border-top: 1px solid var(--fine-line); padding: 9px 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.control-footer > span { font-size: 12px; line-height: 1.45; color: var(--muted); }
.reset-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 75px; padding: 8px 0 8px 8px; background: transparent; border: 0; cursor: pointer; font-size: 14px; }
.reset-button svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.1; }
.reset-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.reset-button:focus-visible { outline: 1px dashed var(--ink); outline-offset: 3px; }
.reference-section { border-top: 1px solid var(--ink); }
.reference-content { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 22px; }
.reference-content img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; }
.reference-copy p { font-size: 22px; line-height: 1.12; letter-spacing: -.035em; margin: 0 0 15px; }
.reference-copy > span { display: block; font-size: 14px; line-height: 1.55; color: var(--muted); }
.reference-note { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 13px 0 19px; max-width: 41ch; }
.product-description { margin: 22px 0; font-size: 16px; line-height: 1.5; }
.product-specifications { margin: 0 0 8px; font-size: 14px; }
.product-specifications > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--fine-line); }
.product-specifications dt { color: var(--muted); line-height: 1.5; }
.product-specifications dd { margin: 0; line-height: 1.5; }
.product-specifications small { display: block; color: var(--muted); font-family: var(--mono); font-size: 12px; margin-top: 3px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--ink); font-size: 14px; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link > span[aria-hidden] { text-decoration: none; }
.product-price { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 0; margin-top: 15px; border-top: 1px solid var(--fine-line); }
.product-price > div > span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.product-price > div > p { font-size: 30px; letter-spacing: -.045em; margin: 7px 0 0; white-space: nowrap; }
.product-price small { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.price-note { max-width: 22ch; margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.product-link { display: flex; align-items: center; justify-content: space-between; min-height: 50px; gap: 16px; padding: 14px 16px; background: var(--ink); color: var(--paper); font-size: 14px; text-decoration: none; }
.product-link:hover { background: #494c3f; }
.text-link:focus-visible, .product-link:focus-visible { outline: 1px dashed var(--ink); outline-offset: 4px; }
.ordering-section { border-top: 1px solid var(--ink); }
.ordering-section > p { font-size: 16px; line-height: 1.5; margin: 8px 0 16px; }
.ordering-section address { font-size: 14px; font-style: normal; line-height: 1.5; color: var(--muted); margin: 22px 0 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 761px) { .drawing-section { align-self: start; } }
.page-footer { border-top: 1px solid var(--ink); display: flex; justify-content: space-between; gap: 16px; padding: 19px 0 25px; margin-top: 28px; font-size: 12px; color: var(--muted); }
.no-script { padding: 20px; border: 1px solid var(--ink); }
@media (min-width: 1100px) { .drawing-sheet { min-height: 650px; } }
@media (min-width: 1400px) { .drawing-sheet { min-height: 730px; } }
@media (max-width: 760px) {
  .page { padding: 0 18px; }
  .masthead { min-height: 60px; }
  .wordmark { font-size: 20px; }
  .masthead-note { font-size: 12px; max-width: 85px; text-align: right; line-height: 1.35; }
  .page-heading { padding: 23px 0 22px; }
  .eyebrow { margin-bottom: 10px; }
  h1 { font-size: 34px; }
  .edition { font-size: 12px; }
  .workspace { display: block; }
  .section-label { min-height: 39px; font-size: 12px; }
  .drawing-sheet { min-height: 0; }
  .drawing-meta, .drawing-caption { padding: 13px 12px; font-size: 12px; }
  .drawing-caption { gap: 18px; }
  .drawing-caption > span { max-width: 52%; }
  .drawing-caption > span:last-child { max-width: 39%; text-align: right; }
  .drawing-canvas { aspect-ratio: 800 / 540; margin: 4px 0; }
  .dimensions-strip { font-size: 16px; padding: 14px 0; }
  .details-column { border-left: 0; padding: 0; }
  .controls-section { margin-top: 11px; }
  .control-intro { display: none; }
  .dimension-control { padding: 6px 0 12px; }
  .control-heading > label { gap: 13px; }
  .number-field input { font-size: 22px; }
  .dimension-range { height: 38px; margin-top: 0; }
  .control-footer { padding: 5px 0 12px; }
  .reference-content { grid-template-columns: 1.18fr 1fr; gap: 24px; }
  .reference-section .section-label { min-height: 46px; }
  .reference-note { max-width: 47ch; margin-bottom: 0; }
  .ordering-section { margin-top: 22px; }
  .product-specifications > div { grid-template-columns: 96px minmax(0, 1fr); }
  .page-footer { margin-top: 23px; line-height: 1.45; }
  .page-footer > span:last-child { text-align: right; }
}
@media (max-width: 370px) {
  .page { padding: 0 14px; }
  h1 { font-size: 30px; }
  .edition { display: none; }
  .drawing-meta, .drawing-caption { padding-left: 10px; padding-right: 10px; }
  .dimension-tag { font-size: 12px; padding: 3px; }
  .control-footer > span { max-width: 180px; }
}
@media (prefers-reduced-motion: no-preference) { .reset-button { transition: opacity .15s ease; } }

.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.header-actions { display:flex; align-items:center; gap:28px; }
.cart-toggle { border:0; background:transparent; min-height:44px; padding:8px 0 8px 12px; font-size:14px; cursor:pointer; white-space:nowrap; }
.cart-toggle span { display:inline-flex; justify-content:center; align-items:center; min-width:24px; height:24px; margin-left:5px; border:1px solid var(--ink); border-radius:50%; font-family:var(--mono); font-size:12px; }
.purchase-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:12px 18px; border-top:1px solid var(--ink); padding:20px 0 12px; }
.purchase-price > span { font-family:var(--mono); font-size:12px; color:var(--muted); }
.purchase-price p { margin:7px 0 0; font-size:30px; letter-spacing:-.045em; white-space:nowrap; }
.purchase-price small { font-family:var(--mono); font-size:12px; letter-spacing:0; }
.purchase-panel button { width:100%; border:0; cursor:pointer; font:inherit; font-size:14px; }
.estimate-note { grid-column:1/-1; margin:0; font-size:12px; line-height:1.5; color:var(--muted); }
.pricing-explanation { margin-bottom:22px; font-size:14px; line-height:1.5; }
.pricing-explanation summary { cursor:pointer; padding:10px 0; text-underline-offset:4px; }
.pricing-explanation p { margin:0 0 10px; color:var(--muted); }
.reference-copy { padding-top:14px; }
.photo-gallery { margin-top:26px; }
.gallery-images { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gallery-images img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.gallery-images img:first-child { grid-column:1/-1; }
#cart-dialog { width:min(540px, calc(100% - 28px)); max-height:calc(100dvh - 40px); background:var(--paper); color:var(--ink); border:1px solid var(--ink); padding:24px; overflow-y:auto; }
#cart-dialog::backdrop { background:rgb(30 31 26 / .42); }
.cart-dialog-header { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--ink); padding-bottom:14px; }
.cart-dialog-header h2 { margin:0; font-size:30px; font-weight:400; letter-spacing:-.04em; }
.close-cart { width:44px; height:44px; border:0; background:transparent; font-size:30px; cursor:pointer; }
#cart-disclaimer, .cart-empty { font-size:14px; line-height:1.5; }
.cart-item { padding:18px 0; border-bottom:1px solid var(--fine-line); }
.cart-item h3 { margin:0 0 8px; font-size:18px; font-weight:400; }
.cart-item p { font-size:14px; line-height:1.5; margin:5px 0; }
.cart-item-price { color:var(--muted); }
.cart-item-actions { display:flex; align-items:center; gap:12px; margin-top:10px; font-size:14px; }
.cart-item-actions button { min-width:44px; min-height:44px; border:1px solid var(--fine-line); background:transparent; cursor:pointer; }
.cart-item-actions .remove-item { margin-left:auto; padding:8px; border:0; text-decoration:underline; text-underline-offset:4px; }
.cart-totals { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:24px 0; font-size:16px; }
.cart-totals[hidden] { display:none; }
.cart-totals small { display:block; font-size:12px; margin-top:6px; color:var(--muted); }
.cart-totals strong { font-size:26px; font-weight:400; white-space:nowrap; }
#continue-designing { width:100%; border:0; cursor:pointer; margin-top:16px; }
.summary-preview-button { width:100%; margin-top:12px; background:transparent; color:var(--ink); border:1px solid var(--ink); font:inherit; font-size:14px; line-height:1.5; cursor:pointer; text-align:left; }
.summary-preview-button:hover { background:var(--sheet); }
.summary-preview-button:disabled { opacity:.4; cursor:default; }
.cart-session-note { font-size:12px; color:var(--muted); line-height:1.5; margin:14px 0 0; }
button:focus-visible { outline:1px dashed var(--ink); outline-offset:3px; }
@media(max-width:760px) {
 .brand { gap:9px; }
 .header-actions { gap:0; } .header-actions .masthead-note { display:none; }
 .wordmark { font-size:19px; }
 .page { padding-bottom:130px; }
 .purchase-panel { position:fixed; bottom:0; left:0; right:0; z-index:10; padding:12px 18px calc(10px + env(safe-area-inset-bottom)); background:var(--paper); grid-template-columns:1fr 1fr; gap:6px 14px; box-shadow:0 -4px 20px rgb(30 31 26 / .06); }
 .purchase-price p { font-size:26px; margin-top:3px; }
 .estimate-note { font-size:12px; }
 .workspace { display:flex; flex-direction:column; }
 .drawing-section, .details-column { display:contents; }
 .drawing-section > .section-label, .drawing-sheet, .dimensions-strip { order:0; }
 .controls-section { order:1; } .workspace > .photo-gallery { order:2; margin:6px 0 22px; }
 .reference-section { order:3; } .ordering-section { order:4; }
 .gallery-images { gap:10px; }
 #cart-dialog { padding:18px; }
}

/* Approved accessibility fix: visible only while the skip link has focus. */
.skip-link{position:fixed;top:12px;left:12px;z-index:10000;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{width:auto;height:auto;max-width:calc(100vw - 24px);padding:12px 18px;clip-path:none;white-space:normal;background:#30342c;color:#fff;border:2px solid #fff;outline:2px solid #30342c;text-decoration:underline}