/* ==========================================================================
   The Lab note
   A quiet, self-contained strip that sits under a demo and says, in real
   sentences, what the thing is. Every /projects/* page carries one.

   These pages are eleven imported apps with eleven unrelated stylesheets
   (Tailwind CDN, hand-rolled dark themes, gradients, a black avionics
   readout), so this block inherits nothing: it declares its own colour,
   type and background, and every selector is qualified by .lab-note so
   Tailwind's preflight and the apps' own element rules cannot reach in.
   ========================================================================== */

/* Several of the apps lock the viewport so they never scroll (html/body
   overflow:hidden, height:100vh). Releasing the clip lets the note below be
   reached without touching how the app itself is laid out. */
html:has(.lab-note) {
  height: auto;
  overflow: visible;
}

body:has(> .lab-note) {
  overflow: visible;
}

/* Four of the apps put their whole layout on <body>: a flex row that centres
   the app, or a fixed-height flex column. As a sibling, the note became a flex
   item and was squeezed in beside the app instead of sitting under it. On
   those pages the layout has been moved onto a .lab-app wrapper, which leaves
   <body> an ordinary block with two children: the app, then the note. */
body:has(> .lab-app) {
  display: block;
  height: auto;
  min-height: 0;
}

.lab-app--fill {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.lab-app--center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

.lab-note {
  all: initial;
  display: block;
  box-sizing: border-box;
  background: #EEEDE6;
  border-top: 1px solid #DAD8CC;
  color: #27486F;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-align: left;
  padding: clamp(40px, 7vw, 76px) 20px clamp(36px, 6vw, 64px);
}

.lab-note *,
.lab-note *::before,
.lab-note *::after { box-sizing: border-box; }

.lab-note__inner {
  max-width: 660px;
  margin: 0 auto;
}

.lab-note__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #57646F;
}

.lab-note h1,
.lab-note h2 {
  margin: 0 0 20px;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(25px, 3.6vw, 33px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -.012em;
  color: #1F3151;
}

.lab-note h3 {
  margin: 34px 0 12px;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1F3151;
}

.lab-note p {
  margin: 0 0 18px;
  color: #27486F;
  font-size: 17px;
  line-height: 1.65;
}

.lab-note__points {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #DAD8CC;
}

.lab-note__points li {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid #DAD8CC;
  color: #27486F;
  font-size: 16px;
  line-height: 1.55;
}

.lab-note__points strong {
  display: block;
  font-weight: 500;
  color: #1F3151;
}

.lab-note__meta {
  margin: 26px 0 0;
  font-size: 14px;
  color: #57646F;
}

.lab-note__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #DAD8CC;
  font-size: 15px;
}

.lab-note a {
  color: #246497;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  background: none;
}

.lab-note a:hover { color: #1F3151; }

.lab-note a:focus-visible {
  outline: 2px solid #246497;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .lab-note { font-size: 16px; }
  .lab-note p { font-size: 16px; }
}