/* A personal workshop journal, using the catalog's ink and lime palette. */
.workbench-section { padding-top: 12px; padding-bottom: 64px; scroll-margin-top: 24px; }
.workbench {
  --bench-ink: #242a23;
  --bench-text: #c6cbbf;
  --bench-line: #47503f;
  background: var(--bench-ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 38px 46px 0;
}
.workbench-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--bench-line);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .07em;
}
.workbench-masthead p { color: var(--lime); }
.workbench-masthead > span { color: var(--bench-text); text-align: right; }
.workbench-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: start;
  gap: clamp(40px, 5vw, 76px);
  padding: 47px 0 52px;
}
.workbench-intro { position: sticky; top: 30px; }
.workbench-intro h2 {
  font-size: clamp(42px, 4.65vw, 64px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.055em;
}
.workbench-intro h2 em { color: var(--lime); font-weight: inherit; font-style: normal; }
.workbench-intro h2 > span { color: var(--lime); }
.workbench-intro > p:not(.workbench-margin-note) {
  max-width: 360px;
  margin-top: 30px;
  color: var(--bench-text);
  font-size: 1rem;
  line-height: 1.8;
}
.workbench-intro strong { color: var(--paper); font-weight: 600; }
.workbench-margin-note {
  border-left: 2px solid var(--lime);
  margin-top: 31px;
  padding: 0 0 0 18px;
  color: #e1e7d6;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.55;
}
.workbench-lead { max-width: 360px; color: var(--bench-text); font-size: 1rem; line-height: 1.65; }
.workbench-steps { list-style: none; margin: 27px 0 0; padding: 0; }
.workbench-steps li {
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr);
  gap: 20px;
  border-top: 1px solid var(--bench-line);
  padding: 27px 0 29px;
}
.workbench-steps li:last-child { padding-bottom: 0; }
.workbench-number {
  color: #b7cc87;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.065em;
  padding-top: 2px;
}
.workbench-stage {
  color: #b7cc87;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .085em;
}
.workbench-steps h3 { font-size: 1.5rem; line-height: 1.22; letter-spacing: -.035em; font-weight: 500; margin-top: 9px; text-wrap: pretty; }
.workbench-steps h3 + p { margin-top: 13px; color: var(--bench-text); font-size: 1rem; line-height: 1.75; }
.workbench-signoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--bench-line);
  padding: 31px 0 36px;
}
.workbench-signoff > p { font-size: 1.375rem; line-height: 1.45; letter-spacing: -.025em; }
.workbench-signature { flex: none; text-align: right; }
.workbench-signature > span { display: block; color: var(--lime); font-family: Georgia, 'Times New Roman', serif; font-size: 2.75rem; font-style: italic; line-height: 1.3; }
.workbench-signature > small { display: block; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; line-height: 1.6; letter-spacing: .05em; color: var(--bench-text); }
@media (max-width: 1100px) {
  .workbench { padding-left: 32px; padding-right: 32px; }
  .workbench-layout { gap: 38px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .workbench-steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
  .workbench-number { font-size: 1.5rem; }
}
@media (max-width: 800px) {
  .workbench-section { padding-top: 8px; padding-bottom: 38px; }
  .workbench { padding-top: 26px; }
  .workbench-masthead > span { display: none; }
  .workbench-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 31px 0; }
  .workbench-intro { position: static; }
  .workbench-intro h2 { font-size: clamp(44px, 7.8vw, 60px); }
  .workbench-intro > p:not(.workbench-margin-note) { max-width: 540px; margin-top: 24px; }
  .workbench-margin-note { margin-top: 24px; }
  .workbench-lead { max-width: none; }
  .workbench-steps { margin-top: 23px; }
  .workbench-steps li { grid-template-columns: 38px minmax(0, 1fr); gap: 19px; padding: 24px 0; }
  .workbench-signoff > p { font-size: 1.125rem; }
}
@media (max-width: 600px) {
  .workbench-section { padding-left: 14px; padding-right: 14px; padding-bottom: 28px; }
  .workbench { padding: 24px 22px 0; border-radius: 8px; }
  .workbench-masthead { padding-bottom: 20px; font-size: .75rem; letter-spacing: .04em; }
  .workbench-intro h2 { font-size: clamp(40px, 10.5vw, 60px); line-height: 1.04; }
  .workbench-intro > p:not(.workbench-margin-note), .workbench-steps h3 + p { line-height: 1.75; }
  .workbench-steps li { grid-template-columns: 29px minmax(0, 1fr); gap: 13px; }
  .workbench-number { font-size: 1.25rem; padding-top: 1px; }
  .workbench-stage { font-size: .75rem; letter-spacing: .055em; }
  .workbench-steps h3 { font-size: 1.375rem; line-height: 1.25; }
  .workbench-signoff { align-items: flex-start; flex-direction: column; gap: 20px; padding: 26px 0 29px; }
  .workbench-signoff > p { font-size: 1.25rem; }
  .workbench-signoff > p br { display: none; }
  .workbench-signature { text-align: left; }
  .workbench-signature > span { font-size: 2.5rem; }
}