/* Quietbeam Works: "Workshop calm". Walnut and setting-out paper, one brass, joints drawn to be understood. */
:root {
  --walnut: #1b130e;
  --bench: #241912;
  --soot: #120c09;
  --paper: #f3ead9;
  --board: #faf5ea;
  --shaving: #e9dfcb;
  --ink: #231c16;
  --pencil: #625649;
  --cream: #efe5d3;
  --dust: #b9ab96;
  --brass: #c9a24f;
  --brass-hi: #dcbc70;
  --brass-ink: #7a5714;
  --oak: #c9955a;
  --line: rgba(35, 28, 22, .16);
  --line-dark: rgba(239, 229, 211, .14);
  --slab: "Zilla Slab", Rockwell, "Rockwell Nova", "Roboto Slab", Georgia, serif;
  --sans: "Karla", "Gill Sans", "Gill Sans MT", Corbel, "Avenir Next", "Segoe UI", sans-serif;
  --label: Bahnschrift, "DIN Alternate", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='260' viewBox='0 0 720 260'%3E%3Cg fill='none' stroke='%23efe5d3' stroke-opacity='.05'%3E%3Cpath d='M0 6Q30 8 60 9Q90 7 120 9Q150 6 180 8Q210 5 240 5Q270 4 300 3Q330 1 360 3Q390 3 420 2Q450 4 480 5Q510 7 540 6Q570 8 600 7Q630 6 660 9Q690 8 720 9'/%3E%3Cpath d='M0 26Q30 24 60 23Q90 21 120 22Q150 23 180 23Q210 23 240 25Q270 25 300 27Q330 28 360 27Q390 27 420 29Q450 29 480 28Q510 29 540 28Q570 28 600 25Q630 24 660 23Q690 22 720 23'/%3E%3Cpath d='M0 41Q30 41 60 39Q90 40 120 39Q150 40 180 41Q210 43 240 42Q270 43 300 44Q330 42 360 43Q390 44 420 43Q450 44 480 42Q510 40 540 40Q570 38 600 39Q630 38 660 39Q690 37 720 39'/%3E%3Cpath d='M0 60Q30 60 60 63Q90 62 120 61Q150 63 180 61Q210 60 240 60Q270 58 300 58Q330 60 360 58Q390 56 420 57Q450 56 480 57Q510 58 540 59Q570 57 600 60Q630 60 660 61Q690 64 720 62'/%3E%3Cpath d='M0 78Q30 77 60 73Q90 75 120 74Q150 75 180 76Q210 75 240 78Q270 77 300 81Q330 80 360 81Q390 81 420 82Q450 79 480 80Q510 78 540 78Q570 75 600 76Q630 76 660 75Q690 73 720 73'/%3E%3Cpath d='M0 91Q30 94 60 96Q90 94 120 95Q150 93 180 92Q210 92 240 90Q270 87 300 88Q330 88 360 89Q390 88 420 88Q450 89 480 90Q510 94 540 94Q570 94 600 95Q630 94 660 95Q690 95 720 94'/%3E%3Cpath d='M0 111Q30 114 60 115Q90 115 120 113Q150 110 180 110Q210 108 240 108Q270 105 300 106Q330 106 360 107Q390 110 420 110Q450 113 480 112Q510 115 540 115Q570 113 600 114Q630 112 660 113Q690 112 720 111'/%3E%3Cpath d='M0 131Q30 129 60 129Q90 129 120 126Q150 127 180 126Q210 125 240 126Q270 127 300 130Q330 134 360 133Q390 134 420 136Q450 138 480 138Q510 136 540 136Q570 137 600 134Q630 131 660 132Q690 132 720 128'/%3E%3Cpath d='M0 149Q30 149 60 146Q90 146 120 146Q150 146 180 146Q210 147 240 146Q270 145 300 145Q330 145 360 146Q390 146 420 148Q450 147 480 149Q510 150 540 151Q570 152 600 152Q630 152 660 153Q690 153 720 153'/%3E%3Cpath d='M0 165Q30 164 60 167Q90 167 120 169Q150 170 180 169Q210 168 240 169Q270 168 300 167Q330 165 360 165Q390 163 420 163Q450 163 480 160Q510 161 540 160Q570 162 600 161Q630 162 660 162Q690 163 720 164'/%3E%3Cpath d='M0 183Q30 183 60 181Q90 182 120 179Q150 179 180 178Q210 181 240 180Q270 179 300 181Q330 180 360 183Q390 182 420 185Q450 187 480 187Q510 186 540 188Q570 188 600 187Q630 187 660 184Q690 182 720 183'/%3E%3Cpath d='M0 204Q30 202 60 202Q90 201 120 200Q150 199 180 200Q210 202 240 203Q270 204 300 205Q330 204 360 208Q390 208 420 208Q450 205 480 206Q510 206 540 204Q570 202 600 202Q630 199 660 200Q690 200 720 202'/%3E%3Cpath d='M0 215Q30 213 60 215Q90 217 120 218Q150 217 180 219Q210 219 240 218Q270 215 300 216Q330 216 360 215Q390 212 420 212Q450 210 480 211Q510 212 540 212Q570 213 600 213Q630 214 660 217Q690 218 720 218'/%3E%3Cpath d='M0 227Q30 227 60 229Q90 230 120 229Q150 229 180 229Q210 228 240 228Q270 227 300 227Q330 228 360 226Q390 225 420 226Q450 228 480 226Q510 226 540 224Q570 224 600 224Q630 224 660 225Q690 226 720 225'/%3E%3Cpath d='M0 249Q30 248 60 247Q90 246 120 249Q150 248 180 251Q210 251 240 253Q270 250 300 251Q330 253 360 251Q390 249 420 249Q450 246 480 246Q510 244 540 245Q570 244 600 245Q630 248 660 247Q690 247 720 249'/%3E%3C/g%3E%3C/svg%3E");
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--walnut);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--sans);
  font-feature-settings: "kern", "onum";
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--slab); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--brass); color: var(--walnut); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.paper :focus-visible, .anatomy :focus-visible { outline-color: var(--ink); }

a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .35s var(--ease), color .2s; }
a:hover { background-size: 100% 2px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  padding: .6rem 1rem; background: var(--brass); color: var(--walnut); font-weight: 600;
}
.skip:focus { top: 1rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }

.eyebrow, .sheet__no, .spec dt, .cut__spec dt, .tag, .st, .stage-row__when, .week span, .direct dt, .foot__h, .scrub label, .joint__use, .legend, .rod__scale, .chips span, .field > span, .form__kind legend {
  font-family: var(--label);
  font-stretch: 87.5%;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.35rem;
  border: 1px solid var(--brass-ink); border-radius: 2px;
  background: var(--brass); color: var(--walnut);
  box-shadow: inset 0 -3px 0 rgba(27, 19, 14, .22);
  font: 600 1.02rem/1.1 var(--sans); letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background-color: var(--brass-hi); background-size: 0 0; transform: translateY(-1px); box-shadow: inset 0 -3px 0 rgba(27, 19, 14, .22), 0 8px 18px rgba(0, 0, 0, .25); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(27, 19, 14, .22); }
.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.paper .btn:focus-visible { outline-color: var(--ink); }
.btn--small { min-height: 2.5rem; padding: .55rem 1rem; font-size: .95rem; }

.link-arrow { display: inline-flex; align-items: baseline; gap: .45em; font-weight: 600; background-size: calc(100% - 1.45em) 1px; }
.link-arrow::after { content: "\2192"; transition: transform .35s var(--ease); }
.link-arrow:hover { background-size: calc(100% - 1.45em) 2px; }
.link-arrow:hover::after { transform: translateX(.3em); }

/* Header */
.top { position: sticky; top: 0; z-index: 40; background: rgba(27, 19, 14, .96); color: var(--cream); border-bottom: 1px solid var(--line-dark); }
.top__in { display: flex; align-items: center; gap: 1.5rem; width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; background: none; }
.brand__mark { width: 2.1rem; height: 2.1rem; flex: none; }
.brand__key { fill: var(--brass); }
.brand__crack { fill: none; stroke: var(--cream); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.brand__word { font: 700 1.3rem/1 var(--slab); letter-spacing: -.01em; }
.brand__word span { font: 600 .74rem/1 var(--label); font-stretch: 87.5%; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin-left: .2rem; vertical-align: .2em; }
.nav { margin-left: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.nav a { font-size: .98rem; color: var(--dust); background-size: 0 1px; padding-block: .3rem; }
.nav a:hover, .nav a:focus-visible { color: var(--cream); background-size: 100% 1px; }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(60rem 36rem at 78% 44%, rgba(201, 149, 90, .16), transparent 62%), var(--grain) 0 0 / 720px 260px, var(--walnut);
  color: var(--cream);
}
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 2rem 3.5rem;
  width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 5vw, 4.5rem);
}
.eyebrow { font-size: .8rem; color: var(--brass); }
.eyebrow span { margin-inline: .5em; opacity: .6; }
.hero h1 {
  margin-top: 1.4rem;
  font-size: clamp(2.7rem, 1.2rem + 4.5vw, 5rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.hero h1 em {
  font-style: normal; color: var(--cream);
  padding-bottom: .06em;
  background: linear-gradient(var(--brass), var(--brass)) 0 100% / 100% .085em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__lede { max-width: 33em; margin-top: 1.6rem; font-size: clamp(1.1rem, 1rem + .35vw, 1.28rem); color: var(--dust); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: 2.2rem; }
.hero__actions .link-arrow { color: var(--cream); }
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 3rem 0 0; border-top: 1px solid var(--line-dark); }
.spec div { padding: .9rem 1rem .2rem 0; }
.spec div + div { padding-left: 1rem; border-left: 1px solid var(--line-dark); }
.spec dt { font-size: .7rem; color: var(--brass); }
.spec dd { margin: .3rem 0 0; font-size: .95rem; line-height: 1.35; color: var(--cream); }

.hero__art { position: relative; margin: 0; justify-self: center; width: min(100%, 30rem); }
.hero__frame { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.tags li {
  position: absolute; display: flex; align-items: center; gap: .5rem;
  font-size: .68rem; color: var(--dust); white-space: nowrap;
  transform: translateY(-50%);
}
.tags li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px rgba(201, 162, 79, .22); }
.tags li::after { content: ""; flex: none; order: -1; width: 1.6rem; height: 1px; background: rgba(201, 162, 79, .7); }
.tags li::before { order: -2; }
.tags li { transform: translate(-2.5px, -50%); }
.tag--tie { left: 75.5%; top: 13.5%; }
.tag--plate { left: 93.2%; top: 47.6%; }
.tag--brace { left: 71.1%; top: 56.2%; }
.tag--post { left: 54.1%; top: 75%; }

.steelrule {
  height: 2.2rem;
  border-top: 1px solid rgba(201, 162, 79, .55);
  background:
    repeating-linear-gradient(90deg, rgba(201, 162, 79, .8) 0 1px, transparent 1px 96px) 0 0 / 100% 1.1rem no-repeat,
    repeating-linear-gradient(90deg, rgba(201, 162, 79, .6) 0 1px, transparent 1px 48px) 0 0 / 100% .75rem no-repeat,
    repeating-linear-gradient(90deg, rgba(201, 162, 79, .4) 0 1px, transparent 1px 9.6px) 0 0 / 100% .42rem no-repeat,
    linear-gradient(#1f1610, #140e0a);
}

/* Section frame */
.paper { background: var(--tooth), var(--paper); color: var(--ink); }
.dark { background: var(--grain) 0 0 / 720px 260px, var(--walnut); color: var(--cream); }
.work, .anatomy, .process, .timber, .shop, .faq, .commission { padding-block: clamp(4.5rem, 9vw, 8rem); }
.sheet { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 2.5rem; row-gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sheet__no { grid-row: 1 / span 2; align-self: start; padding-top: .7rem; border-top: 2px solid currentColor; font-size: .78rem; color: var(--brass-ink); }
.sheet h2 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem); }
.sheet__lede { grid-column: 2; max-width: 36em; font-size: 1.15rem; color: var(--pencil); }
.dark .sheet__no, .sheet--dark .sheet__no { color: var(--brass); }
.dark .sheet__lede { color: var(--dust); }

.aside-cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; margin-top: 2.8rem; padding-left: 11.5rem; color: var(--pencil); }
.aside-cta .link-arrow { color: var(--ink); }
.aside-cta--dark { color: var(--dust); }
.aside-cta--dark .link-arrow { color: var(--cream); }

/* Sheet 01: the cutting list */
.cutlist { counter-reset: cut; border-top: 2px solid var(--ink); }
.cut {
  counter-increment: cut;
  position: relative;
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1.45fr); gap: 1.5rem 2.5rem; align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}
.cut::before {
  content: counter(cut, decimal-leading-zero);
  position: absolute; left: 0; top: 1.2rem;
  font: 600 .72rem/1 var(--label); font-stretch: 87.5%; letter-spacing: .1em; color: var(--brass-ink);
}
.cut__art { width: auto; height: 7rem; max-width: 100%; justify-self: center; object-fit: contain; transition: transform .6s var(--ease); }
.cut:hover .cut__art { transform: translateY(-4px) rotate(-1deg); }
.cut h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); }
.cut__main p { margin-top: .55rem; color: var(--pencil); }
.cut__spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.cut__spec div { border-left: 1px solid var(--line); padding-left: .9rem; }
.cut__spec dt { font-size: .68rem; color: var(--brass-ink); }
.cut__spec dd { margin: .35rem 0 0; font-size: .98rem; line-height: 1.35; }
.cut__price dd { font: 700 1.5rem/1.1 var(--slab); }
.cut__price small { display: block; margin-top: .3rem; font: 400 .82rem/1.3 var(--sans); color: var(--pencil); }

/* Sheet 02: the drawing board */
.anatomy { background: var(--tooth), var(--shaving); }
.board {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1rem, 3vw, 2.5rem);
  border: 1px solid rgba(35, 28, 22, .22);
  background:
    linear-gradient(rgba(122, 87, 20, .07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(122, 87, 20, .07) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--board);
  box-shadow: 0 1px 0 #fff inset, 0 24px 50px -24px rgba(35, 28, 22, .45);
}
.board::before, .board::after {
  content: ""; position: absolute; top: .9rem; width: .7rem; height: .7rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1d58e, var(--brass) 45%, #6b4d12);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.board::before { left: .9rem; }
.board::after { right: .9rem; }
.board__tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.board__tabs[hidden] { display: none; }
.board__tabs button {
  padding: .65rem 1.1rem; border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--pencil);
  font: 700 1rem/1.1 var(--slab); cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.board__tabs button:hover { color: var(--ink); border-color: var(--ink); }
.board__tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--board); }
.joint { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.joint + .joint { margin-top: 3rem; padding-top: 3rem; border-top: 1px dashed var(--line); }
.js .joint + .joint { margin-top: 0; padding-top: 0; border-top: 0; }
.joint[hidden] { display: none; }
.joint__fig { grid-column: 1; grid-row: 1; margin: 0; aspect-ratio: 6 / 5; display: grid; place-items: center; }
.joint__fig img, .joint__fig .stage { width: 100%; height: 100%; }
.stage { display: none; }
.stage.on { display: block; }
.joint__notes { grid-column: 2; grid-row: 1 / span 2; padding-top: .5rem; }
.joint__notes h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.joint__use { margin-top: .6rem; font-size: .74rem; line-height: 1.5; color: var(--brass-ink); }
.steps { margin-top: 1.5rem; border-top: 1px solid var(--line); counter-reset: none; }
.steps li { border-bottom: 1px solid var(--line); padding: .8rem 0 .9rem .9rem; transition: box-shadow .3s var(--ease); }
.step__btn {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: 0; border: 0; background: none; color: var(--ink);
  font: 700 1.12rem/1.2 var(--slab); text-align: left;
}
.step__btn:not(:disabled) { cursor: pointer; }
.step__n {
  display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1.5px solid var(--ink); font: 600 .8rem/1 var(--label);
  transition: background-color .25s, color .25s;
}
.step__btn:hover .step__n { background: rgba(35, 28, 22, .08); }
.step__btn[aria-pressed="true"] .step__n { background: var(--ink); color: var(--board); }
.step__txt { margin: .45rem 0 0 2.4rem; font-size: 1rem; line-height: 1.5; color: var(--pencil); }
.steps li:has(> [aria-pressed="true"]) { box-shadow: inset 3px 0 0 var(--brass); }
.steps li:has(> [aria-pressed="true"]) .step__txt { color: var(--ink); }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; margin-top: 1.4rem; counter-reset: part; font-size: .72rem; color: var(--pencil); }
.legend li { counter-increment: part; display: flex; align-items: center; gap: .5rem; line-height: 1.25; }
.legend li::before {
  content: counter(part); flex: none; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: #2a211a; color: var(--paper); letter-spacing: 0;
}
.scrub { grid-column: 1; grid-row: 2; align-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem 1rem; margin-top: 1rem; }
.scrub[hidden] { display: none; }
.scrub label { font-size: .74rem; color: var(--ink); }
.scrub__ends { grid-column: 2; display: flex; justify-content: space-between; font: 600 .68rem/1 var(--label); font-stretch: 87.5%; letter-spacing: .1em; text-transform: uppercase; color: var(--pencil); }
.scrub input { width: 100%; height: 2.4rem; margin: 0; background: transparent; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.scrub input::-webkit-slider-runnable-track {
  height: .7rem; border: 1px solid #2a211a; border-radius: 1px;
  background: repeating-linear-gradient(90deg, rgba(35, 28, 22, .55) 0 1px, transparent 1px 10%) 0 0 / 100% 55% no-repeat, linear-gradient(#e6e0d4, #c9c2b4);
}
.scrub input::-moz-range-track {
  height: .7rem; border: 1px solid #2a211a; border-radius: 1px;
  background: repeating-linear-gradient(90deg, rgba(35, 28, 22, .55) 0 1px, transparent 1px 10%) 0 0 / 100% 55% no-repeat, linear-gradient(#e6e0d4, #c9c2b4);
}
.scrub input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 1.1rem; height: 2rem; margin-top: -.72rem;
  border: 1px solid #5b410f; border-radius: 2px;
  background: linear-gradient(90deg, #a47e2e, #f1d58e 45%, var(--brass) 55%, #8a6420);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}
.scrub input::-moz-range-thumb {
  width: 1.1rem; height: 2rem; border: 1px solid #5b410f; border-radius: 2px;
  background: linear-gradient(90deg, #a47e2e, #f1d58e 45%, var(--brass) 55%, #8a6420);
}
.scrub input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* live drawing styles */
.stage .lit .ed { stroke: #9c6f1c; stroke-width: 2.6; stroke-opacity: 1; }
.stage .gd { fill: none; stroke: #9c6f1c; stroke-width: 1.6; stroke-dasharray: 6 5; }
.stage .gd--arrow { stroke-dasharray: none; stroke-width: 2.4; }
.stage .gd__head { fill: #9c6f1c; }
.stage .fresh .mk { animation: mk-in .45s var(--ease) both; }
.stage .mk__lead { fill: none; stroke: #2a211a; stroke-width: 1.2; }
.stage .mk__dot, .stage .mk__ring { fill: #2a211a; }
.stage .mk__n { fill: var(--paper); font-family: var(--label); font-weight: 600; text-anchor: middle; }
@keyframes mk-in { from { opacity: 0; } to { opacity: 1; } }

/* Sheet 03: the rod */
.rod { --weeks: 12; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 3rem; }
.rod__scale { grid-column: 2; display: flex; justify-content: space-between; margin: 0 -1ch .8rem; font-size: .72rem; color: var(--brass); }
.rod__scale li { width: 2ch; text-align: center; }
.stage-row {
  position: relative;
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line-dark);
}
.rod__rows { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 3rem; border-top: 1px solid rgba(201, 162, 79, .5); }
.stage-row__when { font-size: .74rem; color: var(--brass); }
.stage-row h3 { margin-top: .3rem; font-size: 1.45rem; }
.stage-row p:not(.stage-row__when) { margin-top: .4rem; color: var(--dust); font-size: 1rem; }
.stage-row .bar { position: relative; align-self: stretch; }
.stage-row .bar::before {
  content: ""; position: absolute; inset: -1.6rem 0;
  background: repeating-linear-gradient(90deg, rgba(239, 229, 211, .09) 0 1px, transparent 1px calc(100% / var(--weeks)));
  background-size: calc(100% + 1px) 100%;
}
.stage-row .bar::after {
  content: ""; position: absolute; top: 50%; height: .9rem; margin-top: -.45rem;
  left: calc(var(--from) / var(--weeks) * 100%);
  width: max(.9rem, calc((var(--to) - var(--from)) / var(--weeks) * 100%));
  border-radius: 1px;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, #9a7629);
  box-shadow: 0 0 0 1px rgba(27, 19, 14, .6), 0 6px 14px rgba(0, 0, 0, .35);
  transform-origin: left center;
}
.stage-row--visit { --from: 0; --to: .35; }
.stage-row--draw { --from: 1; --to: 2; }
.stage-row--timber { --from: 2; --to: 4; }
.stage-row--cut { --from: 4; --to: 10; }
.stage-row--fit { --from: 11; --to: 12; }

/* Sheet 04: the timber stack */
.timber__in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.timber .sheet { grid-column: 1 / -1; }
.stack { position: relative; margin: 0; padding-right: 21%; }
.stack img { width: 100%; height: auto; }
.stack__tags { position: absolute; inset: 0 21% 0 0; }
.st { position: absolute; display: flex; align-items: center; gap: .45rem; transform: translateY(-50%); font-size: .7rem; color: var(--ink); white-space: nowrap; }
.st::before { content: ""; width: 1.2rem; height: 1px; background: var(--ink); }
.st { transform: translate(.4rem, -50%); }
.st--walnut { left: 76.9%; top: 43.5%; }
.st--oak { left: 82.3%; top: 53.9%; }
.st--ash { left: 87.6%; top: 64.3%; }
.st--chestnut { left: 93%; top: 74.6%; }
.st--fir { left: 98.4%; top: 85.1%; }
.species { margin: 0; }
.sp { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.sp:first-child { border-top: 2px solid var(--ink); }
.sp::before {
  content: ""; grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  background: repeating-radial-gradient(circle at 18% 115%, var(--a) 0 2px, var(--b) 2.5px 5px, var(--a) 5.5px 6px, var(--b) 6.5px 9px);
}
.sp--walnut { --a: #3f2618; --b: #6f4a31; }
.sp--oak { --a: #a97a45; --b: #dcb883; }
.sp--ash { --a: #c8b28c; --b: #efe2c6; }
.sp--chestnut { --a: #9c6a37; --b: #cf9c5f; }
.sp--fir { --a: #b0603a; --b: #df9c6f; }
.sp dt { font: 700 1.3rem/1.2 var(--slab); }
.sp dd { margin: .25rem 0 0; font-size: 1rem; color: var(--pencil); }
.sp strong { color: var(--ink); font-weight: 600; }

/* Sheet 05: the Long Shed */
.shop__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: center; }
.shop .sheet { grid-template-columns: 1fr; margin-bottom: 1.6rem; }
.shop .sheet__no { grid-row: auto; justify-self: start; min-width: 9rem; }
.shop__lede { font-size: 1.25rem; color: var(--cream); }
.shop__text p + p { margin-top: 1rem; color: var(--dust); }
.week { margin-top: 2rem; border-top: 1px solid var(--line-dark); }
.week li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line-dark); color: var(--dust); font-size: 1rem; }
.week span { color: var(--brass); font-size: .76rem; padding-top: .2rem; }
.plan { margin: 0; padding: clamp(.75rem, 2vw, 1.25rem); border: 1px solid var(--line-dark); background: #150f0b; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.plan svg { width: 100%; height: auto; }
.plan__leat { fill: none; stroke: #7fa0a6; stroke-width: 1.5; stroke-opacity: .75; }
.plan__dim, .plan__scale { fill: none; stroke: var(--dust); stroke-width: 1; }
.plan__floor { fill: rgba(201, 149, 90, .07); }
.plan__wall { fill: none; stroke: var(--cream); stroke-width: 6; stroke-linejoin: miter; }
.plan__cut { fill: #150f0b; }
.plan__glass { fill: none; stroke: #7fa0a6; stroke-width: 2; }
.plan__door { fill: none; stroke: var(--dust); stroke-width: 1; stroke-dasharray: 3 3; }
.plan__bench { fill: rgba(201, 149, 90, .3); stroke: var(--oak); stroke-width: 1.5; }
.plan__vice { fill: var(--oak); }
.plan__rack { stroke: var(--oak); stroke-width: 1.5; }
.plan__machine { fill: none; stroke: var(--dust); stroke-width: 1.5; }
.plan__fence { fill: none; stroke: var(--dust); stroke-width: 1.5; stroke-dasharray: 7 5; }
.plan__stack { fill: rgba(201, 149, 90, .22); stroke: var(--oak); stroke-width: 1.5; }
.plan__sticks { fill: none; stroke: var(--oak); stroke-width: 3; }
.plan__lay { fill: none; stroke: var(--brass); stroke-width: 6; stroke-linecap: square; stroke-linejoin: round; }
.plan__pegs { fill: #150f0b; stroke: var(--brass-hi); stroke-width: 1.5; }
.plan__road { fill: none; stroke: var(--dust); stroke-width: 1.5; }
.plan__centre { fill: none; stroke: var(--dust); stroke-width: 1.5; stroke-dasharray: 14 10; opacity: .6; }
.plan__north { fill: none; stroke: var(--cream); stroke-width: 1.5; stroke-linejoin: round; }
.plan__label { fill: var(--cream); font: 600 16px var(--label); font-stretch: 87.5%; letter-spacing: 1.5px; text-transform: uppercase; }
.plan__label--soft { fill: var(--dust); font-size: 13px; }
.plan__label--big { font-size: 19px; letter-spacing: 2.5px; }

/* Sheet 06: questions */
.faq__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.faq .sheet { grid-template-columns: 1fr; position: sticky; top: 7rem; margin: 0; }
.faq .sheet__no { grid-row: auto; justify-self: start; min-width: 9rem; }
.faq .sheet__lede { grid-column: 1; }
.faq__list { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font: 700 1.28rem/1.25 var(--slab);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem;
  background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--brass-ink); }
.faq details p { max-width: 36em; padding: 0 2.5rem 1.5rem 0; color: var(--pencil); }

/* Sheet 07: commission */
.commission { background: radial-gradient(50rem 30rem at 15% 20%, rgba(201, 149, 90, .12), transparent 60%), var(--grain) 0 0 / 720px 260px, var(--bench); }
.commission__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: start; }
.commission__intro .sheet__no { display: inline-block; min-width: 9rem; color: var(--brass); }
.commission h2 { margin-top: 1rem; font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem); }
.commission__intro > p:not(.sheet__no) { margin-top: 1rem; color: var(--dust); max-width: 30em; }
.direct { margin: 2.2rem 0 0; border-top: 1px solid var(--line-dark); }
.direct div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line-dark); }
.direct dt { font-size: .74rem; color: var(--brass); padding-top: .25rem; }
.direct dd { margin: 0; color: var(--cream); overflow-wrap: anywhere; }
.form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.4rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line-dark); background: rgba(12, 8, 6, .45);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.form__kind { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.form__kind legend, .field > span { display: block; margin-bottom: .55rem; padding: 0; font-size: .74rem; color: var(--brass); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-block; padding: .55rem .9rem; border: 1px solid rgba(239, 229, 211, .3); border-radius: 2px;
  color: var(--cream); font-size: .78rem; letter-spacing: .06em; transition: background-color .2s, border-color .2s, color .2s;
}
.chips label:hover span { border-color: var(--cream); }
.chips input:checked + span { background: var(--brass); border-color: var(--brass); color: var(--walnut); }
.chips input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.field { display: block; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 2.9rem; padding: .7rem .85rem;
  border: 1px solid rgba(239, 229, 211, .28); border-radius: 2px;
  background: rgba(239, 229, 211, .05); color: var(--cream);
  font: 400 1rem/1.4 var(--sans);
  transition: border-color .2s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 2.4rem; background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%); background-position: calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.field select option { background: var(--bench); color: var(--cream); }
.field ::placeholder { color: #968a7b; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(239, 229, 211, .5); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass); background-color: rgba(239, 229, 211, .08); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: .4rem; }
.form__foot span { font-size: .9rem; color: var(--dust); }

/* Footer */
.foot { background: var(--soot); color: var(--dust); padding-block: 4rem 2rem; font-size: 1rem; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.foot__brand .brand__mark { width: 2.6rem; height: 2.6rem; }
.foot__name { margin-top: .9rem; font: 700 1.5rem/1.1 var(--slab); color: var(--cream); }
.foot__motto { margin-top: .6rem; max-width: 24em; font-size: .95rem; }
.foot__h { margin-bottom: .7rem; font-size: .74rem; color: var(--brass); }
.foot a { color: var(--cream); }
.foot__small { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); font-size: .85rem; }

/* Motion */
.js [data-reveal] { opacity: 0; transform: translateY(1.2rem); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.cut:nth-child(2) { transition-delay: .08s; }
.cut:nth-child(3) { transition-delay: .16s; }
.cut:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise .9s var(--ease) both; }
  .hero__copy > :nth-child(2) { animation-delay: .1s; }
  .hero__copy > :nth-child(3) { animation-delay: .25s; }
  .hero__copy > :nth-child(4) { animation-delay: .4s; }
  .hero__copy > :nth-child(5) { animation-delay: .55s; }
  .hero h1 em { animation: beam 1.1s var(--ease) 2.9s both; }
  .hf-pad { animation: rise .8s var(--ease) both; }
  .hf-post { animation: post 1s var(--ease) .15s both; }
  .hf-plate { animation: drop 1.1s var(--ease) .8s both; }
  .hf-tie { animation: drop 1.1s var(--ease) 1.35s both; }
  .hf-braceX { animation: brace-x 1s var(--ease) 1.95s both; }
  .hf-braceY { animation: brace-y 1s var(--ease) 2.15s both; }
  .hf-pegX { animation: peg-x .55s var(--ease) 2.75s both; }
  .hf-pegY { animation: peg-y .55s var(--ease) 2.9s both; }
  .tags li { animation: fade .8s var(--ease) 3.3s both; }
  .js .stage-row .bar::after { transform: scaleX(0); transition: transform 1.1s var(--ease) .2s; }
  .js .rod.is-in .stage-row .bar::after { transform: none; }
  .js .rod.is-in .stage-row:nth-child(2) .bar::after { transition-delay: .35s; }
  .js .rod.is-in .stage-row:nth-child(3) .bar::after { transition-delay: .5s; }
  .js .rod.is-in .stage-row:nth-child(4) .bar::after { transition-delay: .65s; }
  .js .rod.is-in .stage-row:nth-child(5) .bar::after { transition-delay: .8s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes post { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-110px); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes brace-x { from { opacity: 0; transform: translate(-34px, 19.5px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes brace-y { from { opacity: 0; transform: translate(34px, 19.5px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes peg-x { from { opacity: 0; transform: translate(25px, 14px); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes peg-y { from { opacity: 0; transform: translate(-25px, 14px); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes beam { from { background-size: 0 .085em; } to { background-size: 100% .085em; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Tablet and phone */
@media (max-width: 1000px) {
  .top { position: static; }
  .top__in { flex-wrap: wrap; gap: .4rem 1rem; padding-block: .75rem; }
  .top .btn--small { margin-left: auto; }
  .nav { order: 3; width: 100%; margin: 0; }
  .hero__in { grid-template-columns: 1fr; }
  .hero__art { width: min(100%, 26rem); margin-top: 1rem; }
  .cut { grid-template-columns: 7rem minmax(0, 1fr); }
  .cut__spec { grid-column: 1 / -1; }
  .board { grid-template-columns: 1fr; }
  .joint { grid-template-columns: 1fr; }
  .joint__fig, .joint__notes, .scrub { grid-column: 1; grid-row: auto; }
  .joint__notes { padding-top: 1.5rem; }
  .timber__in, .shop__in, .faq__in, .commission__in { grid-template-columns: 1fr; }
  .faq .sheet { position: static; }
  .rod { grid-template-columns: 1fr; }
  .rod__scale { display: none; }
  .rod__rows { grid-template-columns: 1fr; }
  .stage-row { grid-template-columns: 1fr; gap: 1rem; }
  .stage-row .bar { height: 1.4rem; margin-inline: 0; }
  .stage-row .bar::before { inset: 0; border-left: 1px solid rgba(239, 229, 211, .2); border-right: 1px solid rgba(239, 229, 211, .2); }
  .foot__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  .nav ul { gap: .2rem .8rem; }
  .nav a { font-size: .88rem; }
  .spec { grid-template-columns: 1fr; }
  .spec div, .spec div + div { padding: .7rem 0; border-left: 0; border-bottom: 1px solid var(--line-dark); display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; }
  .spec dd { margin: 0; }
  .sheet { grid-template-columns: 1fr; }
  .sheet__no { grid-row: auto; justify-self: start; min-width: 7rem; }
  .sheet__lede { grid-column: 1; }
  .aside-cta { padding-left: 0; }
  .cut { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem 1.2rem; padding: 1.8rem 0 1.5rem; }
  .cut__art { height: 4.5rem; }
  .cut__spec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .hero__in { padding-top: 1.75rem; row-gap: 0; }
  .hero__copy { display: contents; }
  .hero h1 { margin-top: 1rem; }
  .hero__actions { order: 1; margin-top: 1.5rem; gap: .9rem 1.2rem; }
  .hero__art { order: 2; width: 74%; justify-self: start; margin: 1.75rem 0 0; }
  .hero__lede { order: 3; margin-top: 1.75rem; }
  .spec { order: 4; margin-top: 2rem; }
  .tags li { font-size: .56rem; gap: .25rem; letter-spacing: .06em; }
  .tags li::after { width: .7rem; }
  .board { padding: 1.4rem .9rem 1rem; margin-inline: calc(-1 * var(--gutter) + .5rem); }
  .board__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .board__tabs button { padding: .6rem .4rem; font-size: .9rem; }
  .js .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .4rem; border-top: 0; }
  .js .steps li { display: contents; }
  .js .step__btn { grid-row: 1; flex-direction: column; gap: .35rem; padding: .6rem .2rem; border: 1px solid var(--line); border-radius: 2px; font-size: .86rem; text-align: center; justify-content: center; }
  .js .step__btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--brass); }
  .js .step__txt { grid-row: 2; grid-column: 1 / -1; display: none; margin: .9rem 0 0; }
  .js .steps li:has(> [aria-pressed="true"]) .step__txt { display: block; }
  .js .steps li:has(> [aria-pressed="true"]) { box-shadow: none; }
  .legend { margin-top: 1.2rem; }
  .stack { padding-right: 24%; }
  .stack__tags { right: 24%; }
  .st { font-size: .62rem; gap: .3rem; }
  .st::before { width: .8rem; }
  .form { grid-template-columns: 1fr; }
  .plan { margin-inline: calc(-1 * var(--gutter) + .25rem); }
  .week li { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .direct div { grid-template-columns: 7rem minmax(0, 1fr); }
  .foot__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .brand__word span { display: none; }
  .top .btn--small { padding-inline: .75rem; font-size: .88rem; }
  .cut__price dd { font-size: 1.3rem; }
  .stack { padding-right: 30%; }
  .stack__tags { right: 30%; }
  .direct div { grid-template-columns: 1fr; gap: .2rem; }
}