/* ameliebeerens.com: The Nerve section (Amélie's copy of 7 Oct 2026, which
   supersedes brief 3.6 and 5.1; design D, validated 8 Oct 2026). Loaded by
   both layouts; the markup comes from src/data/nerve.json through
   build_site.py ({{nerve:home}} the section, {{nerve:tools}} the tools
   alone, {{nerve_signup}} the form alone), the form behaviour and the
   card's light from nerve.js.

   Design D is the Nuance template's About grid, cell for cell, in the
   design system's colours: one ruled grid of translucent cells on the hue
   (the template's band of light, one vertical band in blush, measured on
   it on 8 Oct 2026); the official
   Nerve picture left over both rows as the portrait; top middle the
   eyebrow, the red title and her line; top right the signup as a card
   floating over the tinted cell, the template's card, its light following
   the pointer; under them the latest issue arriving on its own, with the
   link to the archive, next to the conversion, and the tagline in red
   serif. One issue, not three (E3, 8 Oct 2026), so the section holds in
   one desktop screen. No tools here. Mobile: title cell, signup card,
   picture, latest issue, tagline.
   No shadow; the cells are opaque, the hue shows only around the grid. Colours are the scheme tokens.

   Contrast: red #FB4951 on the ground 3.4:1, so red only at 24px and up
   (the title, the tagline); ink on the red button 4.6:1; mute 5.1:1. */

.nv { --nv-mute: var(--text-muted); --nv-inset: var(--nu-inset, 64px); --nv-rule: var(--nu-rule, var(--line));
  --nv-cell: var(--surface);   /* opaque: the hue stays behind the cells, not on them (Amélie, 8 Oct 2026) */
  position: relative; isolation: isolate; overflow: hidden;
  padding: 72px var(--nv-inset) 88px; background: var(--surface); color: var(--text); border-bottom: 1px solid var(--nv-rule); }
/* The hue: the template's band of light, measured on it (8 Oct 2026): one
   vertical band over the whole section, ground at the top, the block's
   colour at 45% a little past the middle, ground again at the foot. In
   blush. Nothing at the sides. */
.nv::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(var(--surface) 19%, color-mix(in srgb, var(--blush) 45%, var(--surface)) 53%, var(--surface) 85%); }
.nv__in { max-width: calc(var(--nu-page, 1400px) - 2 * var(--nv-inset)); margin-inline: auto; }
:where(.nv) h2, :where(.nv) h3, :where(.nv) p, :where(.nv) ol, :where(.nv) figure { margin: 0; }
:where(.nv) ol { padding: 0; list-style: none; }

/* The grid: hairlines drawn once (top and left on the grid, right and
   bottom on each cell), so the translucent cells never double a line. */
.nv__grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--nv-rule); border-left: 1px solid var(--nv-rule); }
.nv__cell { min-width: 0; box-sizing: border-box; padding: 28px 24px; background: var(--nv-cell); border-right: 1px solid var(--nv-rule); border-bottom: 1px solid var(--nv-rule); }

/* The picture: the template's portrait cell. The photo is mirrored
   (Amélie, 8 Oct 2026) and zoomed so she sits centred and whole in the
   frame: the image stands on the cell's floor, a little taller than the
   cell, and the middle of the group (her, the laptop, the ball) is put at
   the cell's centre. Each breakpoint sets its own height and offset. */
.nv__photo { position: relative; padding: 0; overflow: hidden; background: var(--surface-alt); }
.nv__photo img { position: absolute; bottom: 0; left: 50%; display: block; width: auto; height: 130%; max-width: none;
  transform: translateX(-42%) scaleX(-1); }

/* The head cell: eyebrow, the red title, her line. */
.nv__head { display: flex; flex-direction: column; gap: 10px; }
.nv__eyebrow { font: 500 13px/20px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--nv-mute); }
.nv .nv__title { font: 500 60px/1 var(--font-serif); letter-spacing: -0.03em; color: var(--red); text-wrap: balance; }
.nv__line { margin-top: 8px; max-width: 30em; font: 400 17px/27px var(--font-sans); color: var(--text); text-wrap: pretty; }

/* The latest issue: one row, title and short preview, unread, and the
   link to the archive. It arrives once the section is in view. */
.nv__issues { display: flex; flex-direction: column; gap: 18px; }
.nv__mail { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.nv__dot { display: block; width: 10px; height: 10px; margin-top: 11px; border-radius: 50%; background: var(--red); }
.nv__subject { font: 500 26px/1.25 var(--font-serif); letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.nv__subject a { color: inherit; text-decoration: none; }
.nv__subject a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.nv__preview { margin-top: 4px; font: 400 16px/25px var(--font-sans); color: var(--nv-mute); }
.nv__more { margin-top: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .nv__mail { opacity: 0; transform: translateY(-22px); }
  .js .nv.is-in .nv__mail { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: .5s; }
  .js .nv.is-in .nv__mail .nv__dot { animation: nv-unread 2.2s ease-out 1.6s 3; }
  @keyframes nv-unread { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent); } 60% { box-shadow: 0 0 0 10px transparent; } }
}

/* The tagline: the template's number cell, the line in red serif at the foot. */
.nv__tagline { display: flex; flex-direction: column; justify-content: flex-end; }
.nv__tag { font: italic 400 30px/1.15 var(--font-serif); letter-spacing: -0.01em; color: var(--red); text-wrap: balance; }

/* The signup: the template's floating card. The card is the cell's own
   rectangle (Amélie, 8 Oct 2026: the card and its block share one shape,
   never a square on a rectangle), hung 24px up and right of it, with a
   hairline over a soft shadow, a faint light at its top and the template's
   arrow resting on it. The block behind it is the cell itself: the card's
   area shifted back, so it fills the cell edge to edge, as in the template.
   The animation is the template's loop, measured on it (8 Oct 2026, see
   the keyframes below). When the section comes into view the card fades
   in. One field, one square button, the lines under, at the top of the
   card. The colours are variables so the same form sits in the Nerve
   page's header and the Lab's closing. */
.nv__cell--signup { --nv-over: 12px; display: flex; flex-direction: column; padding: 0 0 var(--nv-over) var(--nv-over); }
.nv__stack { position: relative; display: flex; flex-direction: column; flex: 1; margin: calc(-1 * var(--nv-over)) calc(-1 * var(--nv-over)) 0 0; }
.nv__block { position: absolute; inset: 0; background: var(--blush); transform: translate(calc(-1 * var(--nv-over)), var(--nv-over)); }
.nv__card { position: relative; flex: 1; box-sizing: border-box; overflow: hidden; padding: 28px 24px 24px;
  border: 1px solid var(--nv-rule); background-color: var(--surface);
  /* No haze, no glow on the card: it is plain white (Amélie, 8 Oct 2026). */
  /* The template's layered soft shadow under the hairline, measured on it, in ink. */
  box-shadow: 0 .6px .6px -1.25px color-mix(in srgb, var(--ink) 22%, transparent),
    0 2.29px 2.29px -2.5px color-mix(in srgb, var(--ink) 19%, transparent),
    0 10px 10px -3.75px color-mix(in srgb, var(--ink) 8%, transparent); }
/* The template's arrow: 24px, outlined (ground fill, ink line), resting at two thirds across. */
.nv__pointer { position: absolute; z-index: 1; left: 67%; top: 20%; width: 24px; height: 24px; pointer-events: none; }
/* The template's loop, measured frame by frame on 8 Oct 2026 (period
   2.5s): the card lifts 12px up-right in 0.5s with an ease-in-out, holds
   0.5s, comes back in 0.5s, rests 1s. The arrow drifts 5px further than
   the card. The block behind fades to a pale tint of itself (15%, as
   measured) while the card is up, and comes back with the card. It runs on its
   own, hover changes nothing. Reduced motion: card at rest. */
@keyframes nv-lift { 0%, 60%, 100% { transform: none; } 20%, 40% { transform: translate(12px, -12px); } }
@keyframes nv-drift { 0%, 60%, 100% { transform: none; } 20%, 40% { transform: translate(5px, -6px); } }
@keyframes nv-block { 0%, 60%, 100% { background-color: var(--blush); } 20%, 40% { background-color: color-mix(in srgb, var(--blush) 15%, var(--surface)); } }
@media (prefers-reduced-motion: no-preference) {
  .nv__card { transition: opacity .6s ease-out; }
  .js .nv__card { opacity: 0; }
  .js .nv.is-in .nv__card { opacity: 1; animation: nv-lift 2.5s ease-in-out infinite; }
  .js .nv.is-in .nv__pointer { animation: nv-drift 2.5s ease-in-out infinite; }
  .js .nv.is-in .nv__block { animation: nv-block 2.5s ease-in-out infinite; }
}
.nv__label.nv__label--shown { position: static; width: auto; height: auto; margin: 0 0 -8px; overflow: visible; clip: auto; white-space: normal;
  display: block; font: 500 13px/20px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--nv-mute); }
.nv__label--shown + .nv__input { margin-bottom: 8px; }   /* two labelled fields: eyebrow, field, air, eyebrow, field */
.nv__form { --f-text: var(--text); --f-mute: var(--text-muted); --f-rule: var(--rule-strong); --f-focus: var(--focus-ring);
  --f-hover-bg: var(--text); --f-hover-fg: var(--surface); }
.nv__row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.nv__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nv__input { flex: 1; min-width: 0; margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--f-rule); border-radius: 0; background: transparent; color: var(--f-text); font: 400 17px/24px var(--font-sans); }
.nv__input::placeholder { color: var(--f-mute); opacity: 1; }
.nv__input:focus-visible { outline: 2px solid var(--f-focus); outline-offset: 4px; }
.nv__btn { flex: none; margin: 0; padding: 14px 20px; border: 0; border-radius: 0; background: var(--red); color: var(--ink); font: 500 16px/24px var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color .2s ease-out, color .2s ease-out; }
.nv__btn:hover { background: var(--f-hover-bg); color: var(--f-hover-fg); }
.nv__btn:focus-visible { outline: 2px solid var(--f-focus); outline-offset: 3px; }
.nv__btn[disabled] { opacity: .6; cursor: default; }
.nv__error { margin-top: 12px; font: 400 14px/20px var(--font-sans); color: var(--f-text); }
.nv__under { margin-top: 14px; font: 400 13px/20px var(--font-sans); color: var(--f-mute); }
.nv__consent { margin-top: 4px; font: 400 12px/18px var(--font-sans); color: var(--f-mute); }
.nv__consent a { color: var(--f-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nv__done { font: 400 17px/1.6 var(--font-sans); color: var(--f-text); max-width: 40ch; }
.nv__error[hidden], .nv__done[hidden], .nv__row[hidden], .nv__under[hidden], .nv__consent[hidden] { display: none; }

/* The Nerve page: the six tools as hairline rows. */
.nv--tools .nv__in { max-width: 1272px; }   /* the operator page's content width */
.nv__intro { margin-top: 12px; max-width: 52ch; font: 400 17px/28px var(--font-sans); color: var(--nv-mute); }
.nv__list { margin-top: 40px; border-top: 1px solid var(--nv-rule); }
.nv__row-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 40px; padding: 24px 0 28px; border-bottom: 1px solid var(--nv-rule); }
.nv__row-tool h3 { font: 500 28px/34px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }
.nv__row-tool p { max-width: 48ch; font: 400 17px/28px var(--font-sans); color: var(--nv-mute); }
.nv__next { font: 500 13px/20px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--nv-mute); align-self: center; }
.nv__get { 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: 4px; white-space: nowrap; align-self: center; }
.nv__get:hover { text-decoration-thickness: 2px; }
.nv__get:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.nv__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 */

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

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 899px) {
  .nv { --nv-inset: 20px; padding-block: 56px 96px; }
  .nv__head { order: 0; }
  .nv__cell--signup { order: 1; }
  .nv__photo { order: 2; height: 440px; }
  .nv__issues { order: 3; }
  .nv__tagline { order: 4; }
  .nv__btn { width: 100%; }
}

/* -------------------------------------------------------------- desktop -- */
@media (min-width: 900px) {
  .nv__grid { grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .nv__cell { padding: 36px 36px; }
  .nv__photo { grid-column: 1 / span 10; grid-row: 1 / span 2; min-height: 560px; padding: 0; }
  .nv__photo img { height: 130%; transform: translateX(-45%) scaleX(-1); }
  .nv__head { grid-column: 11 / span 7; grid-row: 1; padding-bottom: 32px; gap: 6px; }
  .nv .nv__title { font-size: 72px; }
  .nv__cell--signup { --nv-over: 24px; grid-column: 18 / span 7; grid-row: 1; padding: 0 0 var(--nv-over) var(--nv-over); }
  .nv__card { padding: 40px 36px 32px; }
  .nv__issues { grid-column: 11 / span 7; grid-row: 2; padding: 28px 36px 28px; gap: 16px; }
  .nv__tagline { grid-column: 18 / span 7; grid-row: 2; }
  .nv__tag { font-size: 38px; }
  .nv__input { font-size: 18px; line-height: 26px; padding-block: 14px; }
  .nv__btn { padding: 14px 22px; font-size: 17px; line-height: 26px; }
  .nv__row-tool { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: start; }
  .nv__row-tool p { max-width: none; }
}

/* ------------------------------------------------------------- 1180 down -- */
@media (min-width: 900px) and (max-width: 1180px) {
  .nv__photo img { height: 108%; bottom: -4%; transform: translateX(-34%) scaleX(-1); }
  .nv__cell { padding: 28px 28px; }
  .nv__photo { padding: 0; }
  .nv .nv__title { font-size: 56px; }
  .nv__cell--signup { --nv-over: 24px; padding: 0 0 var(--nv-over) var(--nv-over); }
  .nv__card { padding: 28px 24px 24px; }
  .nv__issues { padding: 28px; }
  .nv__tag { font-size: 30px; }
  .nv__btn { padding: 14px 16px; font-size: 16px; }
}

/* ------------------------------------------------- The Nerve page's hero -- */
/* Amélie, 9 Oct 2026: The Nerve page takes the hero banner of every other
   page, cell for cell, the three cells on the right included. The one
   difference is the signup, which sits in the banner under her line. The
   banner stays short, so the section under it starts in the first screen
   (her call of 9 Oct 2026): the two fields share one line and the foot of
   the text block is tight. */
.nu-hero--consulting.nerve-hero .nu-hero__sub { max-width: 34em; }
.nerve-hero__signup { max-width: 400px; margin-top: 28px; }
.nerve-hero .nv__consent { margin-top: 10px; }
.nu-hero--consulting.nerve-hero .nu-hero__text { padding-block: 40px 56px; }
/* The two fields on one line, the button under them: the form's own
   markup (label, field, label, field, button) placed in a grid. */
@media (min-width: 560px) {
  .nerve-hero__signup .nv__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
  .nerve-hero__signup .nv__row > :nth-child(1) { grid-area: 1 / 1; }
  .nerve-hero__signup .nv__row > :nth-child(2) { grid-area: 2 / 1; }
  .nerve-hero__signup .nv__row > :nth-child(3) { grid-area: 1 / 2; }
  .nerve-hero__signup .nv__row > :nth-child(4) { grid-area: 2 / 2; }
  .nerve-hero__signup .nv__row > :nth-child(5) { grid-area: 3 / 1 / 4 / 3; margin-top: 24px; }
}
/* The picture is a portrait with her on the floor at its foot: the crop
   keeps the foot (the laptop, the disco ball, the red shoes), as on the
   welcome page. */
.nu-hero--consulting.nerve-hero .nu-hero__media img { object-position: 50% 100%; }
@media (max-width: 809px) {
  .nu-hero--consulting.nerve-hero .nu-hero__text { padding-bottom: 72px; }
  .nerve-hero__signup { max-width: none; }
}