/* ameliebeerens.com: The Lab (Amélie's brief, 7 Oct 2026).
   Loaded by the Nuance layout after The Nerve's styles; the "Now
   experimenting", "The log" and "What made it into my services" bands
   and the homepage section come from src/data/lab.json through
   build_site.py ({{lab:now}}, {{lab:kept}}, {{lab:services}},
   {{lab:home}}), the rest is src/pages/lab.html (brief round 3,
   8 Oct 2026, Phase 5).

   A page drawn with hairlines, no picture, no card with a fill, no icon.
   Newsreader for the titles, Montserrat for everything read. Red once per
   screen: the "Building" chip on the page's rows, the small-caps labels of
   the log, the red label of the homepage section (where the chip is ink),
   the underline of a text link, the button of the closing form.

   The page: a header band (eyebrow, H1, one paragraph at 62ch), the rows
   of what is being experimented with (title, what it is, what is tested,
   a chip), the log (title and month on the left, the three labelled lines
   on the right), the lines of what made it into the services (experiment,
   arrow, what it is now), and the closing line over The Nerve's form.
   The accented word (Amélie, 8 Oct 2026, the site's rule): a title that
   is a sentence carries one word in italic, in the title's own colour on
   the page's white; a title that names a thing carries none.
   The homepage section: the template's expertise block, on ink, with the
   moving strip of tool logos.

   Spec tokens: ink #21232C, mute #6b6d78, line #e4e5ea, red #FB4951,
   paper #F1F3F8, hover #fbf7f8; mute, line and hover come from
   assets/scheme.css, which also gives their dark-scheme values. */

.lab { --lab-mute: var(--mute); --lab-line: var(--line); --lab-hover: var(--hover); --lab-pad: 64px;
  border-bottom: 1px solid var(--lab-line); background: var(--surface); color: var(--text); }
:where(.lab) ol, :where(.lab) ul, :where(.lab) dl { margin: 0; padding: 0; list-style: none; }
:where(.lab) h1, :where(.lab) h2, :where(.lab) h3, :where(.lab) p, :where(.lab) dd { margin: 0; }

/* The words, shared. */
.lab__eyebrow, .lab__label, .lab__key, .lab__date { font: 500 12px/18px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--lab-mute); }
.lab__label--red { color: var(--red); }
.lab .lab__title { margin-top: 12px; font: 400 clamp(38px, 4vw, 58px)/1.04 var(--font-serif); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.lab .lab__title--h1 { max-width: 9em; font-size: clamp(56px, 7.2vw, 108px); line-height: .98; letter-spacing: -0.03em; }
.lab .lab__title--band { margin-top: 0; font-size: clamp(32px, 3vw, 44px); }
.lab .lab__title em, .lab .lab__closing em { font-style: italic; font-weight: 400; }
.lab__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lab__intro { margin-top: 24px; max-width: 40ch; font: 400 17px/1.6 var(--font-sans); color: var(--lab-mute); }
.lab__lead { margin-top: 32px; max-width: 62ch; font: 400 18px/1.6 var(--font-sans); color: var(--text); }
.lab__more { margin-top: 32px; }
.lab__link { color: var(--text); font: 500 15px/24px var(--font-sans); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 5px; white-space: nowrap; }
.lab__link:hover { text-decoration-thickness: 2px; }
.lab__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.lab__arrow { display: inline-block; vertical-align: -5px; width: 20px; height: 20px; margin-left: 2px; background: var(--arrow) 0 0 / 20px 20px no-repeat; }   /* the site's drawn arrow (nuance.css), inline-block: no underline under it */

/* A row of what is being built: title, one line, the chip. */
.lab__rows { border-top: 1px solid var(--lab-line); }
.lab__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--lab-line); }
.lab__cell { min-width: 0; }
.lab__rtitle { font: 400 24px/1.25 var(--font-serif); letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.lab__what { margin-top: 8px; max-width: 60ch; font: 400 15px/1.6 var(--font-sans); color: var(--lab-mute); }
.lab__chip { display: inline-block; padding: 3px 10px; border: 1px solid currentColor; border-radius: 2px; font: 500 11px/18px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--lab-mute); white-space: nowrap; }
.lab__chip[data-status="testing"] { color: var(--text); }
.lab__chip[data-status="building"] { color: var(--red-text); }
/* The page's full row adds what is being tested, in its own column. */
.lab__row--full { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto; padding: 32px 0; }
.lab__testing { min-width: 0; padding-top: 6px; font: 400 15px/1.6 var(--font-sans); color: var(--text); }
.lab__key { display: block; margin-bottom: 4px; }
.lab__row--full .lab__chip { margin-top: 6px; }

/* ================================================================ /lab == */
.lab--head { padding: 112px var(--lab-pad) 96px; }
.lab--now, .lab--kept, .lab--services { padding: 96px var(--lab-pad); }
.lab--now .lab__rows, .lab--kept .lab__entries { margin-top: 40px; }

/* The log: title and month left, the three labelled lines right. */
.lab__entries { border-top: 1px solid var(--lab-line); }
.lab__entry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; padding: 40px 0; border-bottom: 1px solid var(--lab-line); }
.lab__entry-head { min-width: 0; }
.lab__date { margin-top: 10px; }
.lab__log { display: grid; grid-template-columns: 96px minmax(0, 1fr); row-gap: 16px; column-gap: 24px; min-width: 0; }
.lab__log dt { padding-top: 3px; font: 500 12px/18px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); }
.lab__log dd { max-width: 60ch; font: 400 16px/1.6 var(--font-sans); color: var(--lab-mute); }
.lab__nerve { grid-column: 2; margin-top: 24px; }

/* What made it into my services: lines, each on its rule, read as
   experiment, arrow, what it is now in a mission. The arrow is the site's
   drawn one turned to point right; the experiment in ink, what it became
   in the mute. */
.lab--services .lab__lines { margin-top: 40px; max-width: 900px; border-top: 1px solid var(--lab-line); }
.lab__lines li { padding: 24px 0; border-bottom: 1px solid var(--lab-line); font: 400 clamp(24px, 2.4vw, 32px)/1.25 var(--font-serif); letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.lab__line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; }
.lab__to { flex: none; align-self: center; width: 24px; height: 24px; background: var(--arrow) 0 0 / 24px 24px no-repeat; transform: rotate(45deg); }
.lab__into { color: var(--lab-mute); }
.lab--services .lab__more { margin-top: 40px; }

/* How I keep it safe: parked in src/partials/lab-safe.html (brief round 3,
   Phase 5, does not list it); its rules stay for the day it returns.
   Head left, the three parts as rows on the right. */
.lab--safe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.lab--safe .lab__head { padding: 96px var(--lab-pad); border-right: 1px solid var(--lab-line); }
.lab--safe .lab__head-in { position: sticky; top: 48px; }
.lab--safe .lab__title { margin-top: 0; }
.lab__parts { min-width: 0; padding: 72px var(--lab-pad); }
.lab__parts li { padding: 24px 0; border-bottom: 1px solid var(--lab-line); }
.lab__parts li:last-child { border-bottom: 0; }
.lab__parts .lab__what { max-width: 58ch; }

/* The closing: one line, the form in Substack's box as on the homepage. */
.lab--close { padding: 96px var(--lab-pad); text-align: center; }
.lab .lab__closing { max-width: 18em; margin-inline: auto; font: 400 clamp(32px, 3vw, 44px)/1.1 var(--font-serif); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.lab__signup { max-width: 520px; margin-inline: auto; }
.lab__signup .nv__form { margin-top: 32px; }
.lab__signup .nv__row { border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--surface); }
.lab__signup .nv__input { padding: 14px 16px; border-bottom: 0; }
.lab__signup .nv__row { gap: 0; }
.lab__signup .nv__input--name { border-bottom: 1px solid var(--rule-strong); }   /* the two fields as two rows of the box */
.lab__signup .nv__btn { border-radius: 0; padding-inline: 24px; }
.lab__signup .nv__done { max-width: 36ch; margin-inline: auto; }

/* ============================================= the homepage section == */
/* The template's expertise block (Amélie, 7 Oct 2026), on ink like the
   "Working with me" band: eyebrow, headline, intro and link on the left; a
   strip of the tools' logo tiles passing on the right; under them the red
   "Now building" label and the first three entries as three cards with
   the band's faint fill. The strip is two rows that drift on their own,
   the first left, the second right (70s per loop, two copies of each list,
   paused under the mouse), and fades out at both edges;
   without motion it stands still and wraps. Red once: the label; the
   chips are paper on ink. The logos keep their owners' colours. */
.lab--home { padding: var(--nu-gap) 0; background: var(--surface-ink); color: var(--on-ink); border-top: 0; border-bottom: 0; }
.lab__in { max-width: var(--nu-page); margin-inline: auto; padding-inline: var(--nu-inset); }
.lab__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-7); align-items: start; }
.lab--home .lab__eyebrow { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.lab .lab__title--home { margin-top: 12px; max-width: 8em; font-size: clamp(44px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -0.025em; color: var(--on-ink); }
.lab__intro--home { max-width: 24em; font-size: 18px; line-height: 30px; color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
/* The link in line with the homepage's other links (the three situations'
   .nu-cells__link): 16px Montserrat 500, a 2px red bar under, the drawn
   arrow after, in the on-ink colours (Amélie, 8 Oct 2026). */
.lab--home { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f3f8' stroke-width='2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.lab--home .lab__link { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 4px; border-bottom: 2px solid var(--red); font: 500 16px/24px var(--font-sans); color: var(--on-ink); text-decoration: none; }
.lab--home .lab__link:hover { border-bottom-width: 2px; }
.lab--home .lab__arrow { margin-left: 0; vertical-align: 0; }
.lab--home .lab__link:focus-visible { outline-color: var(--on-ink); }

/* The strip of tiles. */
.lab__tools { overflow: hidden; margin-top: 36px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.lab__tools-track { display: flex; flex-wrap: wrap; gap: 16px; }
.lab__tools-track + .lab__tools-track { margin-top: 16px; }
.lab__tools ul { display: flex; flex-wrap: wrap; gap: 16px; }
.lab__tools ul[aria-hidden] { display: none; }
.lab__tool { display: flex; flex: none; align-items: center; justify-content: center; width: 96px; height: 96px; background: var(--nu-card-on-ink); border: 1px solid var(--nu-rule-on-ink); }
.lab__tool img { display: block; width: 56px; height: 56px; border-radius: 10px; object-fit: contain; }
.lab__tool--name span { padding: 0 8px; font: 500 12px/16px var(--font-sans); letter-spacing: .04em; text-align: center; color: color-mix(in srgb, var(--on-ink) 80%, transparent); }

/* The cards. */
.lab--home .lab__now { margin-top: 72px; }
.lab__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: 20px; }
.lab__card { min-height: 280px; padding: var(--space-5); background: var(--nu-card-on-ink); border: 1px solid var(--nu-rule-on-ink); }
/* The glowing frame on hover (Amélie, 8 Oct 2026), the same as the Work
   with me tiles and the references: under the card a turning conic layer
   in the site's hue, over it the card's own ground (the ink, with the
   card's tint on top, opaque so the hue stays outside) inset by 2px, a 2px
   frame inside the hairline. On hover and keyboard focus; still when motion
   is not welcome. */
.lab__card { position: relative; isolation: isolate; overflow: clip; }
.lab__card::before { content: ""; position: absolute; z-index: -2; top: 50%; left: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; opacity: 0;
  background: conic-gradient(from 0deg, var(--red), var(--nu-red-pale), var(--pink), var(--blush), var(--red)); transition: opacity .3s ease-out; }
.lab__card::after { content: ""; position: absolute; z-index: -1; inset: 2px; background: linear-gradient(var(--nu-card-on-ink), var(--nu-card-on-ink)) var(--surface-ink); }
.lab__card:hover::before, .lab__card:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .lab__card:hover::before, .lab__card:focus-within::before { animation: lab-frame 8s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .lab__card::before { transition: none; } }
@keyframes lab-frame { to { transform: rotate(1turn); } }
.lab__card .lab__chip { color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
.lab__card .lab__chip[data-status="building"] { color: var(--on-ink); }
.lab__rtitle--card { margin-top: 32px; font-size: 26px; color: var(--on-ink); }
.lab__what--card { margin-top: 10px; max-width: 34ch; font-size: 15px; color: color-mix(in srgb, var(--on-ink) 75%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .lab__tools-track { flex-wrap: nowrap; width: max-content; animation: lab-tools 70s linear infinite; }
  .lab__tools-track--2 { animation-direction: reverse; }
  .lab__tools:hover .lab__tools-track { animation-play-state: paused; }
  .lab__tools ul, .lab__tools ul[aria-hidden] { display: flex; flex-wrap: nowrap; }
}
@keyframes lab-tools { to { transform: translateX(calc(-50% - 8px)); } }   /* one list and its gap */

/* ------------------------------------------------------------------ phone -- */
@media (max-width: 899px) {
  .lab { --lab-pad: 20px; }
  .lab--head { padding: 56px var(--lab-pad); }
  .lab .lab__title--h1 { font-size: clamp(44px, 12vw, 56px); }
  .lab .lab__title { font-size: clamp(32px, 8vw, 40px); }
  .lab .lab__title--band { font-size: clamp(28px, 7vw, 34px); }
  .lab__lead { margin-top: 24px; font-size: 17px; }
  .lab--now, .lab--kept, .lab--services, .lab--close { padding: 56px var(--lab-pad); }
  .lab--now .lab__rows, .lab--kept .lab__entries, .lab--services .lab__lines { margin-top: 28px; }
  .lab__row, .lab__row--full { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 20px 0; }
  .lab__testing { padding-top: 0; }
  .lab__row--full .lab__chip { margin-top: 0; }
  .lab__chip { justify-self: start; }
  .lab__entry { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 28px 0; }
  .lab__log { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .lab__log dd + dt { margin-top: 12px; }
  .lab__nerve { grid-column: 1; margin-top: 16px; }
  .lab__lines li { padding: 18px 0; font-size: 24px; }
  .lab__line { display: block; }
  .lab__to { display: inline-block; vertical-align: -5px; width: 22px; height: 22px; margin-inline: 6px 4px; background-size: 22px 22px; }
  .lab--services .lab__more { margin-top: 28px; }
  .lab--safe { grid-template-columns: minmax(0, 1fr); }
  .lab--safe .lab__head { padding: 56px var(--lab-pad); border-right: 0; border-bottom: 1px solid var(--lab-line); }
  .lab--safe .lab__head-in { position: static; }
  .lab__parts { padding: 32px var(--lab-pad); }
  .lab--home { padding: 64px 0; }
  .lab__in { padding-inline: var(--lab-pad); }
  .lab__top { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .lab .lab__title--home { font-size: clamp(36px, 9vw, 44px); }
  .lab__intro--home { font-size: 17px; line-height: 28px; }
  .lab__tools { margin-top: 0; }
  .lab__tool { width: 80px; height: 80px; }
  .lab__tool img { width: 48px; height: 48px; }
  .lab--home .lab__now { margin-top: 48px; }
  .lab__cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lab__card { min-height: 0; padding: 24px; }
  .lab__rtitle--card { margin-top: 24px; font-size: 24px; }
  .lab .lab__closing { max-width: none; }
  .lab--close { text-align: left; }
  .lab__signup { max-width: none; margin-inline: 0; }
  .lab__signup .nv__row { flex-direction: column; gap: 16px; border: 0; border-radius: 0; }
  .lab__signup .nv__input--name { border-bottom: 1px solid var(--rule-strong); }
  .lab__signup .nv__input { padding: 12px 0; border-bottom: 1px solid var(--rule-strong); }
  .lab__signup .nv__btn { width: 100%; border-radius: 2px; padding-block: 14px; }
  .lab__signup .nv__done { margin-inline: 0; }
}

/* The habit, under the hero (9 Oct 2026): ruled above like the sections that follow. */
.lab-lead { border-top: 1px solid var(--nu-rule); }

/* Its head at the page's section-head size (Amélie, 9 Oct 2026: too big at the
   section default of 56px, larger than "Now experimenting" and the closing
   line further down). Same clamp as .lab__title--band, mobile step included. */
.lab-lead .pg-split__head h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.1; }
@media (max-width: 899px) {
  .lab-lead .pg-split__head h2 { font-size: clamp(28px, 7vw, 34px); }
}