/* The Lab index.
 *
 * Colours and type mirror the homepage sections in css/core/index.css,
 * which is where the values are authored. They are repeated here rather
 * than shared because index.css only loads on the homepage; if they ever
 * move to a common file, this block goes with them.
 *
 * A list, not a grid, until there were two exercises worth sitting side
 * by side.
 */
.lab {
  --lab-paper:  #F7F6F3;
  --lab-dot:    #ccc8c0;
  --lab-forest: #2C4132;
  --lab-rust:   #B85C3D;
  --lab-mute:   #6B6864;
  --lab-rule:   #d5d0c5;
  --lab-serif:  "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua", "Georgia", serif;

  /* The dotted notebook paper the rest of the public pages sit on. */
  background-color: var(--lab-paper);
  background-image: radial-gradient(circle, var(--lab-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--lab-forest);
  min-height: 100vh;
  padding: 44px 32px 80px;
}

.lab-inner { max-width: 900px; margin: 0 auto; }

/* Words on the left, artwork on the right. Centred, the paragraphs read
   as a poster; ranged left they read as something to act on, which is
   what they are. */
.lab-head.has-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 44px;
  align-items: center;
}

/* The artwork is cut out, so it sits straight on the page colour. It was
   briefly set to multiply on the assumption of a white ground, which
   would have darkened the cream paper and the tape against the page. */
/* Tilted and shadowed so it reads as something stuck to the paper
   rather than a second headline set beside the first. The tape and the
   pin in the artwork already say pinned-up object; this lets the page
   agree with them, and stops the hand lettering competing with the
   heading for the same job. */
.lab-hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  transform: rotate(3deg);
  filter: drop-shadow(0 8px 16px rgba(44, 65, 50, 0.18));
}

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

.lab-title {
  /* Matched to .tl-section-title on the homepage: same face, same clamp,
     same line height and tracking, so a visitor arriving from the
     homepage highlight meets the same voice at the same size. At this
     size the line runs three deep rather than two; the hand-placed break
     came out, since a forced break at 70px lands mid-phrase. */
  font-family: var(--lab-serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--lab-forest);
  margin: 0;
  text-wrap: balance;
}


.lab-list {
  list-style: none;
  /* No width of its own. The header used to run wider than this grid,
     which put the artwork past the right-hand rule and left the page
     looking like two different documents stacked. */
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  align-items: start;
}
.lab-item {
  padding: 26px 0;
  border-top: 2px solid var(--lab-forest);
}

.lab-item-trains {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lab-rust);
}
.lab-item-name {
  font-family: var(--lab-serif);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--lab-forest);
  margin: 8px 0 10px;
}
.lab-item-blurb {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--lab-mute);
  max-width: 42ch;
  margin: 0 0 16px;
}
.lab-item-go {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lab-rust);
  text-decoration: none;
  border-bottom: 2px solid var(--lab-rust);
  padding-bottom: 2px;
}
.lab-item-go:hover { color: var(--lab-forest); border-bottom-color: var(--lab-forest); }


/* One column below the point where two would squeeze the blurbs into
   narrow ribbons. */
@media (max-width: 860px) {
  /* The artwork drops under the words rather than shrinking to a stamp
     beside them. */
  .lab-head.has-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lab-head-art { max-width: 280px; }
}
@media (max-width: 720px) {
  .lab-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
  .lab { padding: 28px 16px 60px; }
  .lab-item-name { font-size: 1.3rem; }
}

@media (max-width: 560px) {
  .lab-head-art { max-width: 260px; }
}

/* Matches the trail on the exercise pages, so moving between them does
   not change how getting back looks. */
.lab-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lab-crumb { color: var(--lab-mute); text-decoration: none; }
.lab-crumb:hover { color: var(--lab-forest); text-decoration: underline; }
.lab-crumb-sep { color: var(--lab-rule); }
.lab-crumb-here { color: var(--lab-forest); }