/* Working typography passport. It is isolated from the accepted home/contact CSS. */

body.doob-bz-type-lab-page { background: #f5f3ee; }

.doob-bz-type-lab,
.doob-bz-type-lab * { box-sizing: border-box; }

.doob-bz-type-lab {
  --type-page-size: 44px;
  --type-page-line: 52px;
  --type-section-size: 40px;
  --type-section-line: 48px;
  --type-subsection-size: 32px;
  --type-subsection-line: 40px;
  --type-card-large-size: 24px;
  --type-card-large-line: 32px;
  --type-card-size: 20px;
  --type-card-line: 28px;
  --type-lead-size: 20px;
  --type-lead-line: 30px;
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-compact-size: 14px;
  --type-compact-line: 20px;
  --type-action-size: 16px;
  --type-action-line: 24px;
  --type-legal-size: 12px;
  --type-legal-line: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --section-y: var(--space-10);
  --section-y-compact: var(--space-9);
  --type-lab-ink: #202738;
  --type-lab-copy: #41444e;
  --type-lab-muted: #6d716f;
  --type-lab-line: #c8c1b4;
  --type-lab-accent: #9f7f55;
  color: var(--type-lab-copy);
  background: #f5f3ee;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.doob-bz-type-lab h1,
.doob-bz-type-lab h2,
.doob-bz-type-lab h3,
.doob-bz-type-lab p,
.doob-bz-type-lab figure { margin: 0; }

.type-page-title,
.type-section-title,
.type-subsection-title,
.type-card-title-large,
.type-card-title { color: inherit; }

.type-page-title {
  max-width: 18ch;
  font-size: var(--type-page-size);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--type-page-line);
}

.type-section-title {
  max-width: 22ch;
  font-size: var(--type-section-size);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: var(--type-section-line);
}

.type-subsection-title {
  max-width: 24ch;
  font-size: var(--type-subsection-size);
  font-weight: 600;
  line-height: var(--type-subsection-line);
}

.type-card-title-large {
  max-width: 28ch;
  font-size: var(--type-card-large-size);
  font-weight: 600;
  line-height: var(--type-card-large-line);
}

.type-card-title {
  max-width: 28ch;
  font-size: var(--type-card-size);
  font-weight: 600;
  line-height: var(--type-card-line);
}

.type-lead {
  max-width: 55ch;
  font-size: var(--type-lead-size);
  font-weight: 400;
  line-height: var(--type-lead-line);
}

.type-body {
  max-width: 65ch;
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-line);
}

.type-body-emphasis {
  font-size: var(--type-body-size);
  font-weight: 600;
  line-height: var(--type-body-line);
}

.type-body-compact {
  max-width: 65ch;
  font-size: var(--type-compact-size);
  font-weight: 400;
  line-height: var(--type-compact-line);
}

.type-action {
  font-family: inherit;
  font-size: var(--type-action-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: var(--type-action-line);
}

.type-form-control {
  font-family: inherit;
  font-size: var(--type-action-size);
  font-weight: 400;
  line-height: var(--type-action-line);
}

.type-legal {
  max-width: 75ch;
  font-size: var(--type-legal-size);
  font-weight: 400;
  line-height: var(--type-legal-line);
}

.type-lab-container {
  width: min(1184px, calc(100% - 48px));
  margin-inline: auto;
}

.type-lab-section {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}

.type-lab-section--compact { padding-block: var(--section-y-compact); }

.type-lab-section::before,
.type-lab-section::after {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  border-top: 1px dashed rgb(159 127 85 / 52%);
  content: "";
  pointer-events: none;
}

.type-lab-section::before { top: var(--section-y); }
.type-lab-section::after { bottom: var(--section-y); }
.type-lab-section--compact::before { top: var(--section-y-compact); }
.type-lab-section--compact::after { bottom: var(--section-y-compact); }

.type-lab-section__measure {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: max(16px, calc((100vw - 1184px) / 2));
  padding: 3px 7px;
  border: 1px solid rgb(159 127 85 / 42%);
  border-radius: 999px;
  color: #725739;
  background: rgb(255 255 255 / 88%);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  pointer-events: none;
}

.type-lab-section--paper { background: #fff; }
.type-lab-section--sand { background: #e9e3d8; }

.type-lab-section--ink {
  color: #fff;
  background: var(--type-lab-ink);
}

.type-lab-section--hero {
  min-height: 700px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 82% 12%, rgb(159 127 85 / 18%), transparent 28%),
    linear-gradient(135deg, #f8f6f1, #ece6da);
}

.type-lab-toolbar {
  position: fixed;
  z-index: 90;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 12px;
  color: #fff;
  background: rgb(32 39 56 / 94%);
  box-shadow: 0 8px 30px rgb(0 0 0 / 24%);
  backdrop-filter: blur(10px);
}

.type-lab-toolbar__viewport {
  padding-inline: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.type-lab-toolbar__toggle {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 8px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.type-lab-toolbar__toggle:hover,
.type-lab-toolbar__toggle:focus-visible { background: rgb(255 255 255 / 12%); }

.type-lab-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  align-items: center;
  gap: var(--space-9);
}

.type-lab-hero__copy { min-width: 0; }
.type-lab-hero__copy .type-lead { color: #555b65; }

.type-lab-eyebrow {
  max-width: 32ch;
  color: var(--type-lab-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 18px;
}

.type-lab-eyebrow--light { color: #d7b98e; }

.type-lab-hero__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 28px 60px rgb(32 39 56 / 22%);
}

.type-lab-hero__media img {
  width: 100%;
  aspect-ratio: 1.26;
  object-fit: cover;
}

.type-lab-hero__media figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 10px;
  color: #fff;
  background: rgb(17 21 30 / 76%);
  backdrop-filter: blur(8px);
  font-size: 12px;
  line-height: 18px;
}

.type-lab-hero__media figcaption span { font-weight: 600; }
.type-lab-hero__media figcaption small { opacity: 0.76; }

.type-lab-meta {
  position: absolute;
  z-index: 8;
  top: auto;
  right: auto;
  bottom: 100%;
  left: 0;
  display: flex;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 2px !important;
  color: #6c6255;
  font-size: 11px;
  line-height: 16px;
  pointer-events: none;
}

.type-lab-meta code,
.type-lab-meta output {
  padding: 3px 7px;
  border-radius: 5px;
  background: #eee8dd;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.type-lab-section--ink .type-lab-meta { color: #d4c8b8; }
.type-lab-section--ink .type-lab-meta code,
.type-lab-section--ink .type-lab-meta output { background: rgb(255 255 255 / 10%); }

.type-lab-sample { position: relative; }

.type-lab-ruler {
  --type-lab-ruler-size: var(--space-5);
  position: relative;
  z-index: 7;
  height: 0;
  margin: 0 8px;
  color: #725739;
  pointer-events: none;
}

.type-lab-ruler::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--type-lab-ruler-live-size, var(--type-lab-ruler-size));
  border: 1px solid rgb(159 127 85 / 52%);
  border-top-style: dashed;
  border-bottom-style: dashed;
  content: "";
}

.type-lab-ruler[data-token]::after {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  width: max-content;
  padding: 1px 6px;
  border: 0;
  border-radius: 999px;
  background: #f4eee4;
  content: attr(data-token) " · " attr(data-live-size);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  transform: translateY(calc(var(--type-lab-ruler-live-size, var(--type-lab-ruler-size)) / 2 - 50%));
}

.type-lab-section--ink .type-lab-ruler { color: #d7b98e; }
.type-lab-section--ink .type-lab-ruler::before { border-color: rgb(215 185 142 / 44%); }
.type-lab-section--ink .type-lab-ruler[data-token]::after { color: #f6e7d3; background: #30394d; }

.type-lab-ruler + * { margin-top: var(--space-5) !important; }
.type-lab-ruler--label-title { --type-lab-ruler-size: var(--space-5); }
.type-lab-ruler--collection { --type-lab-ruler-size: var(--space-7); }
.type-lab-ruler--collection + * { margin-top: var(--space-7) !important; }
.type-lab-ruler--collection[data-token="copy-collection"] { --type-lab-ruler-size: var(--space-8); }
.type-lab-ruler--collection[data-token="copy-collection"] + * { margin-top: var(--space-8) !important; }
.type-lab-ruler--body { --type-lab-ruler-size: var(--space-4); }
.type-lab-ruler--body + * { margin-top: var(--space-4) !important; }
.type-lab-ruler--card-media { --type-lab-ruler-size: var(--space-5); }
.type-lab-ruler--card-copy { --type-lab-ruler-size: var(--space-4); }
.type-lab-ruler--card-copy + * { margin-top: var(--space-4) !important; }
.type-lab-ruler--form-title { --type-lab-ruler-size: var(--space-6); }
.type-lab-ruler--form-title + * { margin-top: var(--space-6) !important; }
.type-lab-ruler--form-legal { --type-lab-ruler-size: var(--space-5); }
.type-lab-ruler--body-action { --type-lab-ruler-size: var(--space-6); }
.type-lab-ruler--body-action + * { margin-top: var(--space-6) !important; }

.type-lab-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.type-lab-section-heading > .type-lab-sample {
  width: fit-content;
  max-width: 100%;
}

.type-lab-section-heading > .type-lab-ruler { align-self: stretch; }

.type-lab-section-heading .type-section-title { margin-inline: auto; }
.type-lab-section-heading--left { align-items: flex-start; text-align: left; }
.type-lab-section-heading--left > .type-lab-sample { align-self: flex-start; }
.type-lab-section-heading--left .type-section-title { margin-inline: 0; }

.type-lab-type-scale {
  border-top: 1px solid var(--type-lab-line);
}

.type-lab-type-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: var(--space-7);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--type-lab-line);
}

.type-lab-type-row > div { min-width: 0; }
.type-lab-type-row > .type-lab-meta {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  width: 280px;
  justify-content: flex-start;
  margin: 0 !important;
  transform: translateY(-50%);
}

.type-lab-type-row > div { position: relative; }

.type-lab-type-row--experimental {
  background: rgba(165, 116, 51, 0.07);
  box-shadow: inset 3px 0 0 #a57433;
}

.type-lab-type-row--experimental .type-lab-role,
.type-lab-type-row--experimental .type-lab-meta code {
  color: #8b5e24;
}

.type-lab-role {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: block;
  color: var(--type-lab-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 14px;
}

.type-lab-feature {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: var(--space-10);
}

.type-lab-feature__media img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 24px 60px rgb(0 0 0 / 26%);
}

.type-lab-feature__media figcaption { margin-top: var(--space-3); color: #c0c4cc; }
.type-lab-feature__copy .type-lead { color: #d8dbe1; }
.type-lab-feature__copy .type-body { color: #b8bdc8; }

.type-lab-action {
  display: inline-flex;
  min-width: 232px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 10px 22px;
  border: 1px solid #d7b98e;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
}

.type-lab-action:hover,
.type-lab-action:focus-visible { background: rgb(255 255 255 / 8%); }

.type-lab-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.type-lab-card {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid #ded8cc;
  border-radius: 18px;
  background: #faf9f6;
}

.type-lab-card > img {
  width: 100%;
  aspect-ratio: 1.3;
  border-radius: 12px;
  object-fit: cover;
}

.type-lab-card .type-body { color: #5c6067; }

.type-lab-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: var(--space-10);
}

.type-lab-contact-list {
  display: grid;
  gap: var(--space-5);
}

.type-lab-contact-list article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
}

.type-lab-contact-list img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.62;
}

.type-lab-contact-list .type-body-emphasis { margin-top: var(--space-2) !important; }
.type-lab-contact-list .type-body-compact { color: #6e6e6e; }

.type-lab-form-card {
  padding: var(--space-8);
  border: 1px solid #d4c9b8;
  border-radius: 20px;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 22px 50px rgb(69 55 37 / 12%);
}

.type-lab-form {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.type-lab-form::before {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: calc(100% + 4px);
  padding: 2px 7px;
  border-radius: 5px;
  color: #6c6255;
  background: #eee8dd;
  content: attr(data-stack-label);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 15px;
  pointer-events: none;
}

.type-lab-form-field {
  display: grid;
  gap: var(--space-2);
}

.type-lab-form label {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.type-lab-form input,
.type-lab-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #9b9285;
  border-radius: 9px;
  color: var(--type-lab-copy);
  background: #fff;
}

.type-lab-form input { min-height: 48px; }
.type-lab-form textarea { min-height: 112px; resize: vertical; }

.type-lab-form input:focus,
.type-lab-form textarea:focus { border-color: var(--type-lab-ink); outline: 2px solid rgb(32 39 56 / 14%); }

.type-lab-form button {
  min-height: 50px;
  margin-top: var(--space-2);
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--type-lab-ink);
  cursor: pointer;
}

.type-lab-spacing-scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(56px, 1fr));
  align-items: end;
  gap: var(--space-3);
  margin-top: 0;
  padding: var(--space-5);
  overflow-x: auto;
  border: 1px solid #ded8cc;
  border-radius: 16px;
  background: #faf9f6;
}

.type-lab-spacing-token {
  display: grid;
  min-width: 56px;
  justify-items: center;
  gap: var(--space-2);
  color: #565b64;
  text-align: center;
}

.type-lab-spacing-token__bar {
  display: block;
  width: min(42px, 100%);
  height: var(--space-value);
  min-height: 4px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #bf9b6a, #8b6a42);
}

.type-lab-spacing-token strong { font-size: 12px; line-height: 16px; }
.type-lab-spacing-token small { color: #8b8d91; font-size: 10px; line-height: 14px; }

.type-lab-spacing-recipes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: 0;
}

.type-lab-spacing-recipes article {
  position: relative;
  min-height: 170px;
  padding: var(--space-5);
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  background: var(--type-lab-ink);
}

.type-lab-recipe__value {
  position: absolute;
  top: -8px;
  right: 8px;
  color: rgb(255 255 255 / 10%);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
}

.type-lab-spacing-recipes h3 { position: relative; margin-top: var(--space-7) !important; }
.type-lab-spacing-recipes p { position: relative; margin-top: var(--space-3) !important; color: #c7cad1; }

.type-lab-specification {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: var(--space-8);
}

.type-lab-specification > div:first-child .type-body { margin-top: var(--space-4) !important; color: #62666e; }
.type-lab-specification code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.type-lab-table-wrap {
  overflow-x: auto;
  border: 1px solid #ded8cc;
  border-radius: 14px;
  background: #faf9f6;
}

.type-lab-matrix {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 18px;
}

.type-lab-matrix th,
.type-lab-matrix td {
  padding: 10px 12px;
  border-bottom: 1px solid #e3ddd2;
  text-align: center;
}

.type-lab-matrix thead th { color: #7b664a; background: #f0ebe2; font-weight: 700; }
.type-lab-matrix thead th:first-child,
.type-lab-matrix tbody th { text-align: left; }
.type-lab-matrix tbody tr:last-child th,
.type-lab-matrix tbody tr:last-child td { border-bottom: 0; }
.type-lab-matrix tbody th { font-weight: 500; }
.type-lab-matrix tbody th code { display: block; color: var(--type-lab-ink); font-weight: 700; }
.type-lab-matrix tbody th span { display: block; color: #777b81; font-size: 10px; line-height: 15px; }
.type-lab-matrix td { width: 72px; color: #4d525c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.type-lab-matrix td::after { content: "px"; margin-left: 2px; color: #8b8e93; font-size: 9px; }

.type-lab-measure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.type-lab-measure-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  padding: var(--space-4);
  border: 1px solid #ded8cc;
  border-radius: 12px;
  background: #faf9f6;
}

.type-lab-measure-grid strong { font-size: 12px; line-height: 18px; }
.type-lab-measure-grid span { color: #7b664a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 18px; }
.type-lab-measure-grid small { grid-column: 1 / -1; color: #7b7e84; font-size: 10px; line-height: 15px; }

.type-lab-section--divider-top { border-top: 1px solid #aa9271; }

.type-lab-boundary-measure {
  position: absolute;
  z-index: 8;
  top: 8px;
  left: max(16px, calc((100vw - 1184px) / 2));
  padding: 3px 7px;
  border-radius: 999px;
  color: #725739;
  background: rgb(255 255 255 / 90%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 15px;
  pointer-events: none;
}

.type-lab-divider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.type-lab-divider-card {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid #d4c9b8;
  border-radius: 18px;
  background: rgb(255 255 255 / 72%);
}

.type-lab-divider-card:nth-child(3) { grid-column: 1 / -1; }

.type-lab-divider-card__label {
  margin-bottom: var(--space-5) !important;
  color: var(--type-lab-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 15px;
}

.type-lab-divider-card > .type-body-compact { margin-top: var(--space-2) !important; color: #696d73; }
.type-lab-divider-card__footer { max-width: 75ch; }
.type-lab-divider-card code,
.type-lab-divider-rules code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.type-lab-divider-slot {
  position: relative;
  height: var(--space-7);
}

.type-lab-divider-line {
  display: block;
  height: 1px;
  border: 0;
  background: #9f8f78;
}

.type-lab-divider-slot > .type-lab-divider-line {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
}

.type-lab-divider-note {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 50%;
  padding: 2px 6px;
  border-radius: 5px;
  color: #725739;
  background: #f4eee4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 14px;
  transform: translateY(50%);
  pointer-events: none;
}

.type-lab-divider-row {
  position: relative;
  padding-block: var(--space-4);
  border-bottom: 1px solid #b9ad9d;
}

.type-lab-divider-row--last { border-bottom: 0; }
.type-lab-divider-row > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.type-lab-divider-row strong { font-size: 14px; font-weight: 600; line-height: 20px; }
.type-lab-divider-row > div > span { color: #70747a; font-size: 12px; line-height: 20px; text-align: right; }
.type-lab-divider-row .type-lab-divider-note { bottom: 0; }

.type-lab-divider-widths { display: grid; gap: var(--space-5); }
.type-lab-divider-widths > div { display: grid; gap: var(--space-2); }
.type-lab-divider-widths span { color: #6f583d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 16px; }
.type-lab-divider-widths small { color: #777b80; font-size: 10px; line-height: 15px; }
.type-lab-divider-widths__text .type-lab-divider-line { width: min(65ch, 100%); }
.type-lab-divider-widths__component .type-lab-divider-line { width: min(420px, 100%); }
.type-lab-divider-widths + .type-lab-divider-card__footer { margin-top: var(--space-6) !important; }

.type-lab-divider-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.type-lab-divider-rules article {
  padding: var(--space-5);
  border-left: 3px solid #aa9271;
  background: rgb(255 255 255 / 58%);
}

.type-lab-divider-rules code { display: block; color: #725739; font-size: 11px; line-height: 16px; }
.type-lab-divider-rules strong { display: block; margin-top: var(--space-2); font-size: 18px; line-height: 24px; }
.type-lab-divider-rules p { margin-top: var(--space-3) !important; color: #666a70; }

.doob-bz-type-lab.is-clean .type-lab-meta,
.doob-bz-type-lab.is-clean .type-lab-ruler,
.doob-bz-type-lab.is-clean .type-lab-section__measure,
.doob-bz-type-lab.is-clean .type-lab-role,
.doob-bz-type-lab.is-clean .type-lab-form::before,
.doob-bz-type-lab.is-clean .type-lab-divider-note,
.doob-bz-type-lab.is-clean .type-lab-boundary-measure { display: none; }

.doob-bz-type-lab.is-clean .type-lab-section::before,
.doob-bz-type-lab.is-clean .type-lab-section::after { content: none; }

@media (max-width: 959px) {
  .doob-bz-type-lab {
    --type-page-size: 36px;
    --type-page-line: 44px;
    --type-section-size: 32px;
    --type-section-line: 40px;
    --type-subsection-size: 28px;
    --type-subsection-line: 36px;
    --type-card-large-size: 20px;
    --type-card-large-line: 28px;
    --type-card-size: 18px;
    --type-card-line: 24px;
    --type-lead-size: 18px;
    --type-lead-line: 28px;
    --section-y: var(--space-9);
    --section-y-compact: var(--space-8);
  }

  .type-lab-container { width: min(100% - 40px, 900px); }
  .type-lab-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: var(--space-8); }
  .type-lab-feature { grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr); gap: var(--space-8); }
  .type-lab-card-grid { gap: var(--space-5); }
  .type-lab-contact-layout { grid-template-columns: minmax(0, 0.8fr) minmax(380px, 1.2fr); gap: var(--space-8); }
  .type-lab-spacing-scale { grid-template-columns: repeat(11, 64px); }
  .type-lab-spacing-recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .type-lab-section--hero { min-height: auto; }
  .type-lab-hero,
  .type-lab-feature,
  .type-lab-contact-layout { grid-template-columns: 1fr; }
  .type-lab-hero__media { order: -1; }
  .type-lab-hero__media img { aspect-ratio: 1.55; }
  .type-lab-feature__media { width: min(520px, 100%); }
  .type-lab-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-lab-card:last-child { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
  .type-lab-contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-lab-contact-list article { grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-4); }
  .type-lab-contact-list img { width: 52px; height: 52px; }
  .type-lab-specification { grid-template-columns: 1fr; gap: var(--space-5); }
  .type-lab-divider-rules { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
  .doob-bz-type-lab {
    --type-page-size: 32px;
    --type-page-line: 40px;
    --type-section-size: 28px;
    --type-section-line: 36px;
    --type-subsection-size: 24px;
    --type-subsection-line: 32px;
    --section-y: var(--space-8);
    --section-y-compact: var(--space-6);
  }

  .type-lab-container { width: min(100% - 32px, 560px); }
  .type-lab-section__measure { right: 8px; }
  .type-lab-hero { gap: var(--space-6); }
  .type-lab-hero__media { border-radius: 16px; }
  .type-lab-hero__media figcaption { right: 10px; bottom: 10px; left: 10px; display: block; }
  .type-lab-hero__media figcaption small { display: none; }
  .type-lab-ruler + * { margin-top: var(--space-4) !important; }
  .type-lab-ruler { --type-lab-ruler-size: var(--space-4); }
  .type-lab-ruler--collection { --type-lab-ruler-size: var(--space-6); }
  .type-lab-ruler--collection + * { margin-top: var(--space-6) !important; }
  .type-lab-ruler--collection[data-token="copy-collection"] { --type-lab-ruler-size: var(--space-6); }
  .type-lab-ruler--collection[data-token="copy-collection"] + * { margin-top: var(--space-6) !important; }
  .type-lab-ruler--card-media { --type-lab-ruler-size: var(--space-5); }
  .type-lab-ruler--card-media + * { margin-top: var(--space-5) !important; }
  .type-lab-ruler--card-copy { --type-lab-ruler-size: var(--space-3); }
  .type-lab-ruler--card-copy + * { margin-top: var(--space-3) !important; }
  .type-lab-ruler--form-title { --type-lab-ruler-size: var(--space-5); }
  .type-lab-ruler--form-title + * { margin-top: var(--space-5) !important; }
  .type-lab-ruler--form-legal { --type-lab-ruler-size: var(--space-4); }
  .type-lab-ruler--form-legal + * { margin-top: var(--space-4) !important; }
  .type-lab-ruler--body-action { --type-lab-ruler-size: var(--space-5); }
  .type-lab-ruler--body-action + * { margin-top: var(--space-5) !important; }
  .type-lab-type-row { grid-template-columns: 1fr; gap: 0; padding: 40px 0 68px; }
  .type-lab-type-row > .type-lab-meta {
    top: auto;
    right: auto;
    bottom: 8px;
    left: 0;
    width: 100%;
    transform: none;
  }
  .type-lab-card-grid { grid-template-columns: 1fr; }
  .type-lab-card:last-child { grid-column: auto; width: auto; }
  .type-lab-card { padding: var(--space-4); }
  .type-lab-contact-list { grid-template-columns: 1fr; }
  .type-lab-form-card { padding: var(--space-5); }
  .type-lab-spacing-recipes { grid-template-columns: 1fr; }
  .type-lab-spacing-recipes article { min-height: 148px; }
  .type-lab-measure-grid { grid-template-columns: 1fr; }
  .type-lab-divider-grid { grid-template-columns: 1fr; }
  .type-lab-divider-card:nth-child(3) { grid-column: auto; }
  .type-lab-divider-card { padding: var(--space-5); }
  .type-lab-divider-slot { height: var(--space-6); }
  .type-lab-divider-row { padding-block: var(--space-3); }
  .type-lab-divider-row > div { display: grid; gap: 0; }
  .type-lab-divider-row > div > span { text-align: left; }
  .type-lab-boundary-measure { left: 8px; }
  .type-lab-meta { gap: 4px; font-size: 9px; line-height: 14px; }
  .type-lab-meta code,
  .type-lab-meta output { padding: 2px 5px; }
  .type-lab-toolbar { right: 8px; bottom: 8px; left: 8px; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .type-lab-toolbar,
  .type-lab-toolbar__toggle { scroll-behavior: auto; transition: none; }
}