/* The /lab pages: the dark room of the Fireplace Stories cards, with Newsreader for display and
 * Hanken Grotesk for reading. Every block sits on BLURSOR's own left edge (--bl-side). */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/newsreader-latin-opsz-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Hanken Lab';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/hanken-normal-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.lab {
  --lab-flame: #ffc25c;
  --lab-ember: #f2912b;
  --lab-off: #33271f;
  --lab-sheet: #fbf6ec;
  --lab-sheet-ink: #1e1a17;
  --lab-sheet-soft: #5b534c;
  --lab-sheet-rule: rgba(30, 26, 23, 0.16);
  --lab-sheet-accent: #a8400f;
  --lab-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --lab-body: 'Hanken Lab', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --lab-space: clamp(3.25rem, 6vw, 5.25rem);
  --lab-measure: 44rem;
  font-family: var(--lab-body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
}

.lab h1,
.lab h2,
.lab h3 {
  margin: 0;
  font-family: var(--lab-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lab h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  line-height: 1.08;
}

.lab h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.15;
}

.lab p {
  margin: 0;
  text-wrap: pretty;
}

.lab a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--lab-ember);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.lab a:hover {
  color: var(--lab-flame);
}

.lab-section {
  padding-block: var(--lab-space);
}

.lab-section + .lab-section {
  padding-top: 0;
}

.lab-copy {
  display: grid;
  gap: 1rem;
  max-width: var(--lab-measure);
  color: var(--colour-paper-soft);
}

.lab-copy strong {
  color: var(--colour-paper);
  font-weight: 600;
}

.lab-heading {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Hero: the phrase is the specimen, so it runs the full width of the page. */
.lab-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 5vw, 4.25rem) var(--lab-space);
  overflow: hidden;
}

.lab-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(46% 42% at 81% 70%, rgba(238, 106, 31, 0.24), rgba(23, 17, 13, 0) 72%);
  animation: lab-glow 7s ease-in-out infinite alternate;
}

@keyframes lab-glow {
  from {
    opacity: 0.78;
  }

  to {
    opacity: 1;
  }
}

.lab-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.7rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem) !important;
  color: var(--colour-muted);
  font-size: 1rem;
}

.lab-crumb a {
  color: var(--lab-ember);
  font-weight: 600;
  text-decoration: none;
}

.lab-title {
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.25rem);
}

.lab-phrase {
  display: block;
  color: var(--lab-flame);
  font-size: clamp(2.6rem, 5.3vw, 5.6rem);
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.lab-question {
  display: block;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.1;
}

.lab-hero__body {
  display: grid;
  grid-template-columns: minmax(0, var(--lab-measure)) minmax(0, 27rem);
  justify-content: space-between;
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.lab-lead {
  display: grid;
  gap: 1rem;
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  line-height: 1.45;
}

.lab-byline {
  color: var(--colour-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.lab-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0;
  padding: 0;
  font-weight: 600;
  list-style: none;
}

.lab-jump a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.lab-hearth {
  line-height: 0;
}

.fp {
  display: block;
  width: 100%;
  height: auto;
}

.fp-flame-2,
.fp-flame-3 {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .fp-flame {
    animation: lab-flame 2.4s steps(1, end) infinite;
  }

  .fp-flame-2 {
    animation-delay: -1.6s;
  }

  .fp-flame-3 {
    animation-delay: -0.8s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-hero::before {
    animation: none;
  }
}

@keyframes lab-flame {
  0%,
  33.3% {
    opacity: 1;
  }

  33.4%,
  100% {
    opacity: 0;
  }
}

/* The wall: all the intros at once. */
.wall-controls {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.wall-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wall-chip {
  min-height: 2.75rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--colour-rule);
  border-radius: 0;
  color: var(--colour-paper-soft);
  background: transparent;
  font: 500 1rem/1.2 var(--lab-body);
  cursor: pointer;
}

.wall-chip:hover {
  border-color: var(--lab-flame);
  color: var(--colour-paper);
}

.wall-chip[aria-pressed='true'] {
  border-color: var(--lab-flame);
  color: #17110d;
  background: var(--lab-flame);
}

.wall-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}

.wall-search label {
  color: var(--colour-paper-soft);
  font-size: 1rem;
}

.wall-search input {
  flex: 1 1 14rem;
  max-width: 24rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--colour-rule);
  border-radius: 0;
  color: var(--colour-paper);
  background: var(--colour-surface);
  font: 500 1rem/1.2 var(--lab-body);
}

.wall-search input::placeholder {
  color: var(--colour-muted);
  opacity: 1;
}

.wall-readout {
  min-height: 1.6em;
  color: var(--colour-paper);
  font-size: 1.0625rem;
  font-weight: 500;
}

.wall {
  --wall-label: 10.5rem;
  --wall-count: 2.25rem;
  --wall-gap: 0.75rem;
  --wall-height: 1.6rem;
  display: grid;
  gap: 3px;
  outline-offset: 0.5rem;
  user-select: none;
}

.wall-row,
.wall-head {
  display: grid;
  grid-template-columns: var(--wall-label) minmax(0, 1fr) var(--wall-count);
  align-items: center;
  column-gap: var(--wall-gap);
}

.wall-head {
  align-items: end;
  margin-bottom: 0.15rem;
  color: var(--colour-muted);
  font-size: 0.8125rem;
  line-height: 1.15;
}

.wall-topics {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: 7px;
}

.wall-group {
  margin-top: 0.9rem;
  color: var(--lab-ember);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wall-group:first-of-type {
  margin-top: 0.35rem;
}

.wall-model {
  overflow: hidden;
  color: var(--colour-paper-soft);
  font-size: 1rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-cells {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: 7px;
}

.wall-topic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.wall-topic i {
  display: block;
  height: var(--wall-height);
  background: var(--lab-off);
  cursor: pointer;
  transition: background-color 220ms ease;
}

.wall-topic i.on {
  background: var(--heat, var(--lab-flame));
}

.wall-topic i:hover {
  box-shadow: inset 0 0 0 1px #fff8ec;
}

.wall-topic i.sel {
  outline: 2px solid #fff8ec;
  outline-offset: 1px;
}

.wall-num {
  color: var(--lab-flame);
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}

.wall-num.zero {
  color: var(--colour-muted);
  font-weight: 500;
}

/* The reader: one intro on a sheet of paper, like the quote cards. */
.reader {
  position: sticky;
  z-index: 2;
  top: 76px;
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  padding: 1.1rem clamp(1.1rem, 2.4vw, 2rem) 0.75rem;
  color: var(--lab-sheet-ink);
  background: var(--lab-sheet);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.reader.is-open {
  position: static;
}

.reader a {
  color: var(--lab-sheet-accent);
}

.reader-meta {
  color: var(--lab-sheet-soft);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.reader-meta strong {
  color: var(--lab-sheet-ink);
  font-weight: 700;
}

.reader-opening {
  min-height: 2.5em;
  max-width: 62rem;
  font-family: var(--lab-display);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.reader-opening mark {
  color: var(--lab-sheet-accent);
  background: none;
  font-weight: 600;
}

.reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-inline: -0.4rem;
}

.reader-actions button {
  min-height: 2.75rem;
  padding: 0.25rem 0.4rem;
  border: 0;
  color: var(--lab-sheet-accent);
  background: none;
  font: 600 1rem/1.2 var(--lab-body);
  cursor: pointer;
}

.reader-actions button:hover {
  text-decoration: underline;
}

.reader-actions button:focus-visible,
.reader :focus-visible {
  outline: 2px solid var(--lab-sheet-ink);
}

.reader-full {
  display: grid;
  gap: 0.75rem;
  max-width: var(--lab-measure);
  padding-block: 0.5rem 0.75rem;
  border-top: 1px solid var(--lab-sheet-rule);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.reader-full p:first-child {
  margin-top: 0.75rem;
}

.reader-full[hidden] {
  display: none;
}

.reader-prompt {
  color: var(--lab-sheet-soft);
  font-size: 0.9375rem;
}

/* Findings */
.finding {
  display: grid;
  gap: 0.9rem;
  max-width: 62rem;
}

.finding + .finding {
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
}

.strips {
  display: grid;
  gap: 0.7rem;
  max-width: 58rem;
  margin: 0.6rem 0 0.3rem;
  padding: 0;
  list-style: none;
}

.strip-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

.strip-label b {
  color: var(--lab-flame);
  font-weight: 700;
}

.strip-label b.zero {
  color: var(--colour-muted);
  font-weight: 500;
}

.strip-blocks {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 2px;
  margin-top: 0.3rem;
}

.strip-blocks i {
  height: 1.1rem;
  background: var(--lab-off);
}

.strip-blocks i.on {
  background: var(--heat, var(--lab-flame));
}

.strips-gap {
  height: 0.35rem;
}

/* The new stock openers: a plain list, one habit to a row. */
.habits {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--colour-rule);
  list-style: none;
}

.habit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0.6rem clamp(1.5rem, 4vw, 4rem);
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--colour-rule);
}

.habit-phrase {
  color: var(--lab-flame);
  font-family: var(--lab-display);
  font-size: clamp(1.6rem, 2.7vw, 2.3rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.habit-who {
  margin-top: 0.4rem !important;
  color: var(--colour-paper);
  font-size: 1rem;
  font-weight: 600;
}

.habit-example {
  color: var(--colour-paper-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.habit-light {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  margin-top: 0.1rem;
  font-size: 1rem;
  font-weight: 600;
}

/* History: the Google Books columns */
.books {
  display: grid;
  gap: 0.5rem;
  max-width: 58rem;
  margin-top: 1.5rem;
}

.books-plot {
  position: relative;
  height: clamp(11rem, 24vw, 17rem);
}

.columns {
  display: block;
  width: 100%;
  height: 100%;
}

.books-mark {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--lab-ember);
  font-size: 1rem;
  font-weight: 500;
}

.books-axis {
  display: flex;
  justify-content: space-between;
  color: var(--colour-muted);
  font-size: 0.9375rem;
}

.books-note {
  color: var(--colour-muted);
  font-size: 1rem;
  line-height: 1.45;
}

/* A soft band of fire where the room meets the paper. */
.lab-fireline {
  height: 78px;
  background-repeat: repeat-x;
  background-position: left bottom;
  image-rendering: pixelated;
}

/* The method sits on paper, the part of the report meant to be checked line by line. */
.lab-sheet {
  --colour-paper: var(--lab-sheet-ink);
  --colour-paper-soft: #3a342f;
  --colour-muted: var(--lab-sheet-soft);
  --colour-rule: var(--lab-sheet-rule);
  --focus: 2px solid var(--lab-sheet-ink);
  color: var(--lab-sheet-ink);
  background: var(--lab-sheet);
}

.lab-sheet a {
  color: var(--lab-sheet-accent);
  text-decoration-color: currentColor;
}

.lab-sheet a:hover {
  color: var(--lab-sheet-ink);
}

.lab-sheet .lab-section + .lab-section {
  padding-top: 0;
}

.sheet-block + .sheet-block {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.sheet-block > h3 {
  margin-bottom: 0.8rem;
}

.lab-sheet ol,
.lab-sheet ul {
  display: grid;
  gap: 0.5rem;
  max-width: var(--lab-measure);
  margin: 0;
  padding-left: 1.4rem;
  color: var(--colour-paper-soft);
}

.lab-sheet li::marker {
  color: var(--lab-sheet-soft);
}

.rules {
  display: grid;
  gap: 0.75rem;
  max-width: var(--lab-measure);
  margin: 0.9rem 0 0;
}

.rules div {
  display: grid;
  gap: 0.1rem;
}

.rules dt {
  font-weight: 700;
}

.rules dd {
  margin: 0;
  color: var(--colour-paper-soft);
}

.lab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.lab-table caption {
  padding-bottom: 0.7rem;
  color: var(--colour-paper-soft);
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
}

.lab-table th,
.lab-table td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--lab-sheet-rule);
  text-align: left;
  vertical-align: bottom;
}

.lab-table thead th {
  border-bottom: 2px solid var(--lab-sheet-ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.lab-table tbody th {
  font-weight: 500;
}

.lab-table .num {
  padding-right: 0;
  padding-left: 0.5rem;
  text-align: right;
}

.lab-table .group th {
  padding-top: 1.1rem;
  color: var(--lab-sheet-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lab-table .year {
  color: var(--lab-sheet-soft);
  font-size: 0.9375rem;
}

.lab-table code,
.lab-copy code {
  font-family: Consolas, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.9em;
}

.downloads {
  display: grid;
  gap: 0;
  max-width: var(--lab-measure);
  margin: 0.25rem 0 1.25rem !important;
  padding: 0 !important;
  list-style: none;
}

.downloads a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-weight: 600;
}

.downloads span {
  margin-left: 0.5rem;
  color: var(--lab-sheet-soft);
  font-size: 1rem;
  font-weight: 400;
}

/* The /lab list */
.lab-index {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 5vw, 4.25rem) var(--lab-space);
  overflow: hidden;
}

.lab-index::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(60% 70% at 80% 40%, rgba(238, 106, 31, 0.2), rgba(23, 17, 13, 0) 72%);
}

.lab-index__head {
  display: grid;
  grid-template-columns: minmax(0, var(--lab-measure)) minmax(0, 22rem);
  justify-content: space-between;
  align-items: end;
  gap: 2rem clamp(2rem, 5vw, 5rem);
}

.lab-index h1 {
  color: var(--lab-flame);
  font-size: clamp(3.75rem, 8vw, 6.5rem);
  font-style: italic;
  line-height: 1;
}

.lab-index__intro {
  margin-top: 1rem !important;
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  line-height: 1.45;
}

.lab-entries {
  display: grid;
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--colour-rule);
  list-style: none;
}

.lab-entry {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--colour-rule);
}

.lab-entry time {
  color: var(--colour-muted);
  font-size: 1rem;
}

.lab-entry h2 {
  max-width: 54rem;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}

.lab-entry h2 a {
  text-decoration: none;
}

.lab-entry h2 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--lab-ember);
}

.lab-entry p {
  max-width: var(--lab-measure);
  color: var(--colour-paper-soft);
}

@media (max-width: 62rem) {
  .lab-hero__body,
  .lab-index__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-hearth {
    width: min(100%, 27rem);
  }

  .habit {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.99rem) {
  .lab {
    font-size: 1.0625rem;
  }

  .lab-phrase {
    font-size: clamp(2.45rem, 11vw, 4.2rem);
  }

  .lab-question {
    font-size: clamp(1.8rem, 7.6vw, 2.6rem);
  }

  .wall {
    gap: 0.45rem;
    --wall-height: 1.2rem;
  }

  .wall-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.15rem;
  }

  .wall-cells {
    grid-column: 1 / -1;
    grid-row: 2;
    column-gap: 4px;
  }

  .wall-topic {
    gap: 1px;
  }

  .wall-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .wall-group {
    margin-top: 0.6rem;
  }

  .reader {
    top: 68px;
  }

  .reader-opening {
    min-height: 3.7em;
  }

  .lab-table {
    font-size: 0.9375rem;
  }

  .lab-table th,
  .lab-table td {
    padding-right: 0.3rem;
  }

  .lab-table .num {
    width: 2.9rem;
    padding-left: 0.2rem;
  }

  .lab-table thead th {
    font-size: 0.8125rem;
  }

  .lab-fireline {
    height: 52px;
    background-size: 384px 52px;
  }
}

.lab-thumb-link {
  display: block;
  text-decoration: none;
  max-width: 34rem;
  margin-top: 0.75rem;
  line-height: 0;
}

.lab-thumb {
  display: block;
  width: 100%;
  height: auto;
}

.nb {
  white-space: nowrap;
}

/* The room inside BLURSOR's shell: dark tokens, the site's margin, and a header that belongs to the room. */
.page-lab {
  --colour-ink: #17110d;
  --colour-surface: #211812;
  --colour-paper: #fbf3e7;
  --colour-paper-soft: #cfc7bb;
  --colour-muted: #bfaf9b;
  --colour-rule: rgba(251, 243, 231, 0.16);
  background: #17110d;
  color: #fbf3e7;
}

html:has(.page-lab) {
  background: #17110d;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.page-lab) {
    scroll-behavior: smooth;
  }
}

.page-lab .shell {
  width: 100%;
  padding-inline: var(--bl-side);
}

.page-lab :focus-visible {
  outline: 2px solid #fbf3e7;
  outline-offset: 2px;
}

.page-lab .lab-sheet :focus-visible,
.page-lab .reader :focus-visible {
  outline-color: #1e1a17;
}

.page-lab .site-header,
.page-lab .site-header.is-scrolled {
  background: #17110d;
  box-shadow: 0 1px 0 rgba(251, 243, 231, 0.12);
  color: #fbf3e7;
}

.page-lab .site-header .site-header__side a,
.page-lab .site-header .site-header__logo {
  color: #fbf3e7;
}

.page-lab .site-header .site-header__side a:hover {
  color: #ffc25c;
}

.page-lab .site-header .site-header__bar,
.page-lab .site-header .site-header__dots {
  fill: currentColor;
}

/* The room ends at the footer: BLURSOR's own sand footer, with no gap above it. */
.page-lab .site-footer {
  margin-top: 0;
  background: #eeeae4;
}

.page-lab .site-footer a:hover {
  color: #1e1a17;
}

/* The Lab category page: the report's rhythm of room, fire line and paper. */
/* The italic T starts right of its box, so the box steps left and the ink sits on the margin. */
.lab .lab-home__title {
  margin-left: -0.094em;
  color: var(--lab-flame);
  font-size: clamp(4.75rem, 8.6vw, 8.5rem);
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
}

.lab-home .lab-hero__body {
  margin-top: 0;
}

.lab-wink {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 0.15em;
  vertical-align: -0.2em;
}

.lab-home__intro {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

.lab-home .lab-entries {
  margin: 0;
}

.lab-home .lab-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.lab-entry__text {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
}

.lab-entry__meta {
  color: var(--colour-muted);
  font-size: 1rem;
}

.lab-home .lab-entry h3 {
  font-size: inherit;
}

.lab .lab-entry__link {
  display: grid;
  gap: 0.6rem;
  text-decoration: none;
}

.lab .lab-entry__link:hover {
  color: inherit;
}

/* The whole row is the link, so the wall opens the report too. */
.lab-entry__link::after {
  content: '';
  position: absolute;
  z-index: 1; /* The wall's hover filter lifts it, so the link has to stay above it. */
  inset: 0;
}

.page-lab .lab-entry__link:focus-visible {
  outline: none;
}

.page-lab .lab-entry__link:focus-visible::after {
  outline: 2px solid #fbf3e7;
  outline-offset: 2px;
}

.lab-entry__phrase {
  color: var(--lab-flame);
  font-size: clamp(2.2rem, 3.7vw, 3.4rem);
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.lab-entry__question {
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  line-height: 1.15;
}

.lab-home .lab-entry__summary {
  max-width: 34rem;
  font-size: 1.125rem;
}

.lab-entry__more {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  color: var(--colour-paper);
  font-weight: 600;
}

.lab-entry__more svg {
  width: 1.05rem;
  height: auto;
  fill: none;
  stroke: var(--lab-ember);
  stroke-width: 1.3;
}

.lab-entry:hover .lab-entry__more span {
  text-decoration: underline;
  text-decoration-color: var(--lab-ember);
  text-underline-offset: 0.18em;
}

.lab-entry__wall {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.lab-entry__wall .lab-thumb {
  transition: filter 400ms ease;
}

.lab-entry:hover .lab-thumb {
  filter: brightness(1.14);
}

.lab-entry__wall figcaption {
  color: var(--colour-muted);
  font-size: 1rem;
  line-height: 1.4;
}

.lab-principles {
  display: grid;
  /* The same columns as the experiments above, so the wall and the second column share an edge. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
  margin: 0;
}

.lab-principles div {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--lab-sheet-rule);
}

.lab-principles dt {
  font-family: var(--lab-display);
  font-size: clamp(1.45rem, 2.2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lab-principles dd {
  margin: 0;
  color: var(--colour-paper-soft);
}

@media (max-width: 62rem) {
  .lab-home .lab-entry {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.99rem) {
  .lab .lab-home__title {
    font-size: clamp(4.5rem, 21vw, 7rem);
  }

  .lab-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-entry__phrase {
    font-size: clamp(2rem, 8.6vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-entry__wall .lab-thumb {
    transition: none;
  }
}

/* The reader stays a slim bar: label and buttons on one row, the sentence under them.
   Two lines are always reserved, so the wall holds still while you move across it. */
.reader {
  top: 64px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 1.5rem;
  margin-bottom: 1rem;
  padding: 0.45rem clamp(1rem, 1.8vw, 1.5rem) 0.6rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.reader-meta {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  overflow: hidden;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-actions {
  grid-column: 2;
  grid-row: 1;
  flex-wrap: nowrap;
  gap: 0 0.9rem;
}

.reader-actions button {
  min-height: 2rem;
  font-size: 0.875rem;
}

.reader-opening {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 2.5em;
  max-width: none;
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  line-height: 1.25;
}

.reader-full {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0.4rem;
}

@media (max-width: 47.99rem) {
  .reader {
    top: 56px;
    grid-template-columns: minmax(0, 1fr);
    padding: 0.5rem 0.9rem 0.1rem;
  }

  .reader-actions {
    grid-column: 1;
    grid-row: 3;
    justify-content: space-between;
    gap: 0;
  }

  .reader-actions button {
    min-height: 2.75rem;
    font-size: 0.9375rem;
  }

  .reader-opening {
    min-height: 3.75em;
    font-size: 1.0625rem;
  }

  .reader-full {
    grid-row: 4;
  }
}

/* Type: BLURSOR's light Hanken Grotesk is the site's voice. The serif appears only where
   the page quotes what an AI wrote, so seeing it means you are reading AI output. */
.lab {
  --lab-display: 'Hanken Lab', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --lab-quote: 'Newsreader', Georgia, 'Times New Roman', serif;
}

.lab h1,
.lab h2 {
  font-weight: 300;
  letter-spacing: -0.015em;
}

.lab h2 {
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.12;
}

.lab h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1.2;
}

.lab-question {
  font-size: clamp(1.6rem, 2.5vw, 2.35rem);
  font-weight: 300;
  line-height: 1.15;
}

.lab .lab-home__title {
  margin-left: -0.03em;
  font-size: clamp(3.5rem, 6.4vw, 6.25rem);
  font-style: normal;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.lab-entry__question {
  font-size: clamp(1.3rem, 1.75vw, 1.6rem);
  font-weight: 300;
  line-height: 1.2;
}

.lab-principles dt {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.008em;
}

.lab-phrase,
.lab-entry__phrase,
.habit-phrase {
  font-family: var(--lab-quote);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.lab-phrase {
  font-size: clamp(2.6rem, 5.3vw, 5.6rem);
  line-height: 1.08;
}

.lab-entry__phrase {
  font-size: clamp(2.2rem, 3.7vw, 3.4rem);
  line-height: 1.08;
}

.habit-phrase {
  font-size: clamp(1.6rem, 2.7vw, 2.3rem);
  line-height: 1.14;
}

.reader-opening {
  font-family: var(--lab-quote);
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  line-height: 1.25;
}

.reader-opening mark {
  font-weight: 600;
}

@media (max-width: 47.99rem) {
  .lab-phrase {
    font-size: clamp(2.45rem, 11vw, 4.2rem);
  }

  .lab-question {
    font-size: clamp(1.5rem, 6.2vw, 2rem);
  }

  .lab .lab-home__title {
    font-size: clamp(3.25rem, 15vw, 5rem);
  }

  .lab-entry__phrase {
    font-size: clamp(2rem, 8.6vw, 3rem);
  }

  .reader-opening {
    min-height: 3.75em;
    font-size: 1.0625rem;
  }
}

/* The report reads as one centred column at a larger size. The hero, the wall and the list of
   openers stay wide, and everything written sits on the column's left edge. */
.lab-report {
  --lab-column: 46rem;
  font-size: 1.25rem;
}

.lab-report .lab-copy,
.lab-report .strips,
.lab-report .rules {
  max-width: none;
}

.lab-report .lab-heading,
.lab-report .wall-controls,
.lab-report .finding,
.lab-report .lab-section > .lab-copy,
.lab-report .books,
.lab-report .sheet-block,
.lab-report .downloads {
  width: 100%;
  max-width: var(--lab-column);
  margin-inline: auto;
}

.lab-report .downloads {
  margin-inline: auto !important;
}

.lab-report h2 {
  font-size: clamp(2.125rem, 3.4vw, 3.125rem);
}

.lab-report h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.lab-report .lab-crumb,
.lab-report .lab-byline {
  font-size: 1.125rem;
}

.lab-report .lab-question {
  font-size: clamp(1.75rem, 2.8vw, 2.6rem);
}

.lab-report .lab-lead {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
}

.lab-report .lab-lead .lab-byline {
  font-size: 1.125rem;
}

.lab-report .lab-jump {
  font-size: 1.375rem;
}

.lab-report .wall-chip {
  padding-inline: 0.85rem;
  font-size: 1.0625rem;
}

.lab-report .wall-search label,
.lab-report .wall-search input {
  font-size: 1.125rem;
}

.lab-report .wall-readout {
  font-size: 1.1875rem;
}

.lab-report .wall-head,
.lab-report .wall-group {
  font-size: 0.875rem;
}

.lab-report .wall-model,
.lab-report .wall-num {
  font-size: 1.0625rem;
}

.lab-report .reader-meta,
.lab-report .reader-actions button {
  font-size: 1rem;
}

.lab-report .reader-opening {
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
}

.lab-report .reader-full {
  font-size: 1.1875rem;
}

.lab-report .reader-prompt {
  font-size: 1.0625rem;
}

.lab-report .strip-label,
.lab-report .habit-who,
.lab-report .habit-light,
.lab-report .books-mark,
.lab-report .books-note,
.lab-report .downloads span {
  font-size: 1.125rem;
}

.lab-report .habit-example {
  font-size: 1.1875rem;
}

.lab-report .books-axis {
  font-size: 1.0625rem;
}

.lab-report .lab-table {
  font-size: 1.125rem;
}

.lab-report .lab-table caption {
  font-size: 1.125rem;
}

.lab-report .lab-table thead th,
.lab-report .lab-table .year {
  font-size: 1rem;
}

.lab-report .lab-table .group th {
  font-size: 0.875rem;
}

/* The base reset removes list markers, which left these lists indented for no visible reason. */
.lab-report .sheet-block > ol,
.lab-report .sheet-block > ul {
  max-width: none;
}

.lab-report .sheet-block > ol {
  padding-left: 2rem;
  list-style: decimal;
}

.lab-report .sheet-block > ul {
  padding-left: 1.25rem;
  list-style: disc;
}

/* One step of space between the hero and the first section, and none of the footer's to spare. */
.lab-report .lab-hero + .lab-section {
  padding-top: 0;
}

.lab-sheet .lab-section:last-child {
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

@media (max-width: 47.99rem) {
  .lab-report {
    font-size: 1.125rem;
  }

  .lab-report .reader-opening {
    font-size: 1.125rem;
  }

  .lab-report .lab-table {
    font-size: 1rem;
  }

  .lab-report .lab-table thead th {
    font-size: 0.875rem;
  }

  .lab-report .lab-table .year {
    font-size: 0.875rem;
  }
}

/* Ten topic labels only fit side by side on a wide screen. Below that they stay for screen
   readers, as they do on phones, and the reader names the topic of each square. */
@media (max-width: 77.99rem) {
  .lab-report .wall-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

@media (min-width: 48rem) {
  .lab-report .lab-table .num {
    width: 5.25rem;
  }
}

/* Vol.2, The Lake Remembers: the same room at night, by the lake. Lake blue takes the fire's place,
   as it does on the cards, and the paper, the reader and the footer stay as they are. */
.page-lab--lake {
  --colour-ink: #0e141a;
  --colour-surface: #16202a;
  --colour-paper: #f4f1e8;
  --colour-paper-soft: #c6ccd2;
  --colour-muted: #9da9b3;
  --colour-rule: rgba(244, 241, 232, 0.16);
  background: #0e141a;
  color: #f4f1e8;
}

html:has(.page-lab--lake) {
  background: #0e141a;
}

.page-lab--lake .site-header,
.page-lab--lake .site-header.is-scrolled {
  background: #0e141a;
  box-shadow: 0 1px 0 rgba(244, 241, 232, 0.12);
  color: #f4f1e8;
}

.page-lab--lake .site-header .site-header__side a,
.page-lab--lake .site-header .site-header__logo {
  color: #f4f1e8;
}

.page-lab--lake .site-header .site-header__side a:hover {
  color: #9fdcec;
}

.page-lab--lake :focus-visible {
  outline-color: #f4f1e8;
}

.lab--lake {
  --lab-flame: #6cc3da;
  --lab-ember: #4fafc9;
  --lab-off: #18232c;
  --lab-sheet-accent: #1e5e73;
}

.lab--lake .lab-hero::before {
  background: radial-gradient(46% 42% at 78% 66%, rgba(108, 195, 218, 0.15), rgba(14, 20, 26, 0) 72%);
}

/* The title is the script's own line, written by us, so it stays in the site font. */
.lab--lake .lab-phrase--ours {
  margin-left: -0.03em;
  font-family: var(--lab-display);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.lab--lake .reader-meta b {
  color: var(--lab-sheet-accent);
  font-weight: 700;
}

/* The wall: rows are models, columns the ways of asking, and each square is lit by its score. */
.sw {
  --sw-label: 10.5rem;
  --sw-height: 1.6rem;
  display: grid;
  gap: 3px;
  outline-offset: 0.5rem;
  user-select: none;
}

.sw-row,
.sw-head {
  display: grid;
  grid-template-columns: var(--sw-label) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
}

.sw-cells {
  display: grid;
  grid-template-columns: 7fr 2fr 2fr;
  column-gap: 14px;
}

.sw-text {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  column-gap: 6px;
}

.sw-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.sw-trio i {
  display: block;
  height: var(--sw-height);
  background: var(--s);
  cursor: pointer;
  transition: opacity 220ms ease;
}

.sw-trio i.none {
  background: transparent;
  box-shadow: inset 0 0 0 1px #4b5c69;
}

.sw.is-search .sw-trio i:not(.hit) {
  opacity: 0.14;
}

.sw-trio i:hover {
  box-shadow: inset 0 0 0 1px #f4f1e8;
}

.sw-trio i.sel {
  outline: 2px solid #f4f1e8;
  outline-offset: 1px;
}

.sw-head {
  align-items: end;
  margin-bottom: 0.15rem;
  color: var(--colour-muted);
  font-size: 0.875rem;
  line-height: 1.15;
}

.sw-head--texts {
  margin-bottom: 0.35rem;
  color: var(--colour-paper);
  font-size: 1rem;
  font-weight: 600;
}

.sw-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.6rem 1.5rem;
  color: var(--colour-paper-soft);
  font-size: 1.0625rem;
}

.sw-scale {
  display: inline-grid;
  gap: 0.25rem;
}

.sw-ramp {
  display: grid;
  grid-template-columns: repeat(8, 1.6rem);
  gap: 2px;
}

.sw-ramp i,
.sw-legend__none i {
  display: block;
  height: 1.1rem;
  background: var(--s);
}

.sw-legend__ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--colour-muted);
  font-size: 0.9375rem;
}

.sw-legend__none {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sw-legend__none i {
  width: 1.6rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px #4b5c69;
}

/* Scores as half-point blocks, out of 10. */
.strip-blocks--score {
  grid-template-columns: repeat(20, minmax(0, 1fr));
}

.timeline-axis {
  position: relative;
  height: 1.5em;
  color: var(--colour-muted);
  font-size: 1.0625rem;
}

.timeline-axis span {
  position: absolute;
  top: 0;
}

/* What a model wrote, set in the serif. */
.lab-quote {
  display: grid;
  gap: 0.45rem;
  margin: 0.35rem 0;
  padding-left: clamp(1rem, 2vw, 1.4rem);
  border-left: 3px solid var(--lab-ember);
}

.lab-quote p {
  color: var(--colour-paper);
  font-family: var(--lab-quote);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.28;
}

.lab-quote footer {
  color: var(--colour-muted);
  font-size: 1.0625rem;
}

/* The same post, the same model, two framings: the bands use the cards' legend colours. */
.qpair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.35rem 0;
}

.qcard {
  display: grid;
  align-content: start;
  color: var(--lab-sheet-ink);
  background: var(--lab-sheet);
}

.qcard__band {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  color: #0e141a;
  background: #c6ccd2;
  font-size: 1rem;
  font-weight: 600;
}

.qcard--mine .qcard__band {
  background: #6cc3da;
}

.qcard__quote {
  padding: 1rem 1.1rem 0.4rem;
  font-family: var(--lab-quote);
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.25;
}

.qcard__who {
  padding: 0 1.1rem 1rem;
  color: var(--lab-sheet-soft);
  font-size: 1rem;
}

/* A table in the room rather than on paper. */
.lab-table--room caption {
  color: var(--colour-muted);
}

.lab-table--room th,
.lab-table--room td {
  border-bottom-color: var(--colour-rule);
}

.lab-table--room thead th {
  border-bottom-color: var(--colour-paper-soft);
}

.lab-table--room td.num {
  color: var(--colour-paper);
  font-weight: 600;
}

/* The three texts, as pasted. The script keeps a typewriter face, as scripts do. */
.lab-doc__label {
  margin-top: 1.75rem !important;
  color: var(--lab-sheet-accent);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lab-doc {
  display: grid;
  gap: 0.9rem;
  margin: 0.6rem 0 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--lab-sheet-rule);
  color: var(--lab-sheet-ink);
  background: #fff;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.lab-doc--script {
  gap: 1.1rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.sp-title {
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
}

.sp-scene {
  font-weight: 700;
}

.sp-dialogue {
  display: grid;
  padding-inline: 20% 10%;
}

.sp-cue {
  padding-left: 22%;
}

.sp-paren {
  padding-left: 11%;
}

.sp-trans {
  text-align: right;
}

.sp-end {
  text-align: center;
}

.lab-doc__title {
  font-size: 1.25rem;
  font-weight: 700;
}

.lab-doc__sub {
  margin-top: -0.6rem !important;
  color: var(--lab-sheet-soft);
}

.table-scroll {
  overflow-x: auto;
}

.table-scroll + .table-scroll {
  margin-top: 2rem;
}

.lab-table .runs {
  color: var(--lab-sheet-soft);
  font-size: 0.85em;
  font-weight: 400;
}

.lab-report .qpair,
.lab-report .lab-quote,
.lab-report .lab-table--room {
  width: 100%;
}

@media (max-width: 77.99rem) {
  .lab-report .sw-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

@media (max-width: 47.99rem) {
  .sw {
    --sw-height: 1.2rem;
    gap: 0.45rem;
  }

  .sw-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.15rem;
  }

  .sw-cells {
    column-gap: 8px;
  }

  .sw-text {
    column-gap: 3px;
  }

  .sw-trio {
    gap: 1px;
  }

  .sw-ramp {
    grid-template-columns: repeat(8, 1.35rem);
  }

  .qpair {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-doc--script {
    font-size: 0.9375rem;
  }

  .sp-dialogue {
    padding-inline: 8% 0;
  }

  .sp-cue {
    padding-left: 24%;
  }
}

.lab-table thead .cols th {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--lab-sheet-rule);
  color: var(--lab-sheet-accent);
  text-align: center;
}

.lab-table thead .cols td {
  border-bottom: 0;
}

/* Vol.2 on the Lab's list: the title is the script's own line, in lake blue. */
.lab-entry__phrase--ours {
  margin-left: -0.03em;
  color: #6cc3da;
  font-family: var(--lab-display);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.lab-entry--lake .lab-entry__more svg {
  stroke: #6cc3da;
}

/* The Vol.2 hero: the title is short, so the words take one column and the room the other. */
.lab-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 46rem) minmax(0, 27rem);
  justify-content: space-between;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.lab-hero__split .lab-lead {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

.lab--lake .lab-hero__split .lab-phrase {
  font-size: clamp(2.6rem, 4.7vw, 4.6rem);
}

.lab-lead__list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding-left: 1.4rem;
  list-style: disc;
}

.lab-lead__list li::marker {
  color: var(--lab-flame);
}

/* The texts sit in the room right after the hero, before anything a model said about them. */
.lab-doc__label {
  color: var(--lab-flame);
}

.lab-sheet .lab-doc__label {
  color: var(--lab-sheet-accent);
}

.lab-doc__note {
  margin-top: 0.6rem !important;
  color: var(--colour-muted);
  font-size: 1rem;
}

.lab-doc mark.slop {
  padding: 0 0.12em;
  color: inherit;
  background: #cdeaf2;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 62rem) {
  .lab-hero__split {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-hero__split .lab-hearth {
    width: min(100%, 27rem);
  }
}