/* ameliebeerens.com: The Nerve issue pages and the confirmation page
   (Amélie's addendum, 7 Oct 2026). Loaded by the operator layout after
   nerve.css; the markup comes from build_site.py (issue_page, nerve_bar),
   the behaviour from issue.js. Colours and type are the scheme's tokens.

   An issue is one column, 680px of text, no sidebar: the text in the
   headline serif (Newsreader) at 20px on desktop, 18px on the phone, line
   height 1.7; the headings keep the site's system; Montserrat stays for
   the meta line, the labels and the captions. The header hides as you
   scroll down and comes back on the way up. At the end, the signup block
   on the tinted tile, and nothing between it and the footer. The slim bar
   at the foot of the screen is for visitors without the subscriber
   cookie, after half the page; its Close keeps it closed for 30 days. */

/* The header on an issue: the Nuance bar already sticks; here it also
   slides away while reading down and comes back on the way up (issue.js). */
.is-issue .nu-header { transition: margin .3s ease-out, padding .3s ease-out, transform .3s ease-out; }
.is-issue .nu-header.is-hidden { transform: translateY(-100%); }
html:has(body.is-issue) { scroll-padding-top: calc(var(--nu-bar) + 24px); }

/* On the homepage, a former issue whose subject links to its page. */
.nv__subject a { color: inherit; text-decoration: none; }
.nv__subject a:hover, .nv__subject a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* The reading column. At the top (brief round 3, 8 Oct 2026, N5): the
   way back to the list, then the date and the reading time. */
.issue__col { max-width: calc(680px + 2 * var(--nu-inset)); margin-inline: auto; padding-inline: var(--nu-inset); }
.issue__head { padding-top: var(--space-6); }
.issue__back { margin: 0 0 var(--space-5); font: 500 15px/24px var(--font-sans); }
.issue__back a { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.issue__back a:hover { text-decoration-thickness: 2px; }
.issue__back a::before { content: "\2190\00a0"; }
.issue__meta { color: var(--text-muted); }
.issue__title { margin-top: var(--space-4); font: 500 52px/58px var(--font-serif); letter-spacing: -0.015em; color: var(--display); text-wrap: balance; }
.issue__nerve { margin-top: var(--space-4); font: 400 21px/32px var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.issue__body { margin-top: var(--space-6); font: 400 20px/1.7 var(--font-serif); font-optical-sizing: auto; }
.issue__body > * + * { margin-top: 1.25em; }
.issue__body h2 { margin-top: 2em; font: 500 32px/38px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }
.issue__body h3 { margin-top: 1.6em; font: 500 24px/30px var(--font-serif); color: var(--text); }
.issue__body h2 + *, .issue__body h3 + * { margin-top: .8em; }
.issue__body a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.issue__body a:hover { text-decoration-thickness: 2px; }
.issue__body strong { font-weight: 500; }
.issue__body blockquote { padding-left: var(--space-4); border-left: 2px solid var(--rule-strong); font-style: italic; }
.issue__body ul, .issue__body ol { padding-left: 1.3em; list-style: disc; }
.issue__body ol { list-style: decimal; }
.issue__body li + li { margin-top: .5em; }
.issue__body figcaption, .issue__body .caption { margin-top: var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.issue__body img { border-radius: var(--radius-tile); }
.issue__body hr { margin-block: 2em; border: 0; border-top: 1px solid var(--rule); }

/* Under the text (N5): "Send this to a colleague", the W1 mailto. */
.issue__forward { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--nu-rule); font: 500 16px/24px var(--font-sans); }
.issue__forward a { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.issue__forward a:hover { text-decoration-thickness: 2px; }
.issue__forward a::after { content: "\00a0\2197"; }

/* The signup block at the end: the Nerve form on the tinted tile. */
.issue__signup { margin-top: var(--space-6); margin-bottom: var(--nu-gap); }
.issue__tile { padding: var(--space-5); background: color-mix(in srgb, var(--pink) 8%, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.issue__get { margin: var(--space-2) 0 var(--space-4); font: 500 34px/40px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }

/* The slim bar at the foot of the screen (issue.js shows it, Close hides it;
   it steps away while the signup block or the footer is on screen). */
.nerve-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 12px var(--nu-inset) calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--rule); transform: translateY(100%); transition: transform .35s ease-out; }
.nerve-bar.is-shown { transform: none; }
.nerve-bar.is-away { transform: translateY(100%); }
.nerve-bar[hidden] { display: none; }
.nerve-bar__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); max-width: var(--nu-page); margin-inline: auto; }
.nerve-bar__line { margin: 0; font: 500 16px/24px var(--font-sans); white-space: nowrap; }
.nerve-bar__form { max-width: 560px; }
.nerve-bar__form .nv__row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.nerve-bar__form .nv__input { flex: 1 1 150px; }
.nerve-bar__form .nv__input { padding: 8px 0; font-size: 16px; line-height: 24px; }
.nerve-bar__form .nv__btn { width: auto; padding: 10px 16px; font-size: 15px; line-height: 22px; }
.nerve-bar__form .nv__error, .nerve-bar__form .nv__done { margin-top: 8px; font-size: 14px; line-height: 20px; }
.nerve-bar__close { background: none; border: 0; padding: 8px 0; font: 500 14px/20px var(--font-sans); color: var(--text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* The issue lists on The Nerve page (brief round 3, 8 Oct 2026, N2: a
   row each, the date and the reading time in the margin, the title as
   the link, the preview under it) and the list on the confirmation page:
   ruled rows in the Nuance idiom. */
.issue-list { border-top: 1px solid var(--nu-rule); }
.issue-list li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--nu-rule); }
.issue-list__meta { padding-top: 8px; font: 500 12px/20px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.issue-list h3, .issue-list__title { font: 500 28px/34px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }
.issue-list h3 a, .issue-list__title a { color: inherit; text-decoration: none; }
.issue-list h3 a:hover, .issue-list__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.issue-list__line { margin-top: var(--space-2); font: 400 17px/28px var(--font-sans); color: var(--text-muted); max-width: 34em; }

/* The confirmation page: the header keeps the name only (build_site.py
   strips the menu and the availability cell). */
.is-bare .nu-header { display: flex; }
.confirm__title { font: 500 72px/76px var(--font-serif); letter-spacing: -0.02em; color: var(--display); text-wrap: balance; }
.confirm__lead { margin-top: var(--space-4); max-width: 30em; font: 400 21px/32px var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.confirm__list li { grid-template-columns: minmax(0, 1fr); }
.confirm__line { margin-top: var(--space-5); max-width: 34em; font: 400 18px/30px var(--font-sans); }

/* The welcome page (Amélie, 9 Oct 2026): the Consulting hero without
   its proof column, The Nerve's picture in it; then the three boxes in the
   site's ruled cells, right under the hero. */
/* 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) and the hero
   is given the height to show it. */
.nu-hero--consulting.welcome-hero .nu-hero__media img { object-position: 50% 88%; }
@media (min-width: 1200px) {
  .nu-hero--consulting.welcome-hero { grid-template-columns: 50% minmax(0, 1fr); min-height: 440px; }
  .nu-hero--consulting.welcome-hero .nu-hero__media { border-right: 0; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .nu-hero--consulting.welcome-hero { grid-template-rows: minmax(0, 1fr); min-height: 440px; }
  .nu-hero--consulting.welcome-hero .nu-hero__media { grid-row: 1 / -1; }
}
@media (max-width: 809px) {
  .nu-hero--consulting.welcome-hero .nu-hero__media { grid-column: 1 / -1; min-height: 300px; border-right: 0; }
}
.welcome-cells.nu-section { padding-top: 48px; }
/* h2, not h3: nothing sits between the H1 and these (Lighthouse heading-order, 9 Oct 2026). */
.welcome-cells .nu-cells h2 { margin-top: var(--space-3); font: 500 28px/34px var(--font-serif); letter-spacing: -0.01em; color: var(--text); }   /* ink, as the h3 was: a cell title is never red */
.welcome-cells .nu-cells li { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; }
.welcome-cells .nu-cells p:not(.nu-eyebrow) { align-self: start; }
.welcome-cells .nu-cells__link { align-self: end; }

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

@media (max-width: 860px) {
  .issue__head { padding-top: var(--space-5); }
  .issue__back { margin-bottom: var(--space-4); }
  .issue__title { font-size: 38px; line-height: 44px; }
  .issue__nerve { font-size: 18px; line-height: 28px; }
  .issue__body { margin-top: var(--space-5); font-size: 18px; }
  .issue__body h2 { font-size: 28px; line-height: 34px; }
  .issue__body h3 { font-size: 22px; line-height: 28px; }
  .issue__signup { margin-top: var(--space-6); margin-bottom: var(--space-7); }
  .issue__tile { padding: var(--space-4); }
  .issue__get { font-size: 28px; line-height: 34px; }
  .issue-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-4); }
  .issue-list__meta { padding-top: 0; }
  .issue-list__meta br { display: none; }
  .issue-list__meta .issue__time::before { content: " · "; }
  /* The Related block's line is the episode's, not an issue's: its three
     parts have no middot to fall back on, so they keep their breaks. */
  .issue__more .issue-list__meta br { display: initial; }
  .issue-list h3, .issue-list__title { font-size: 24px; line-height: 30px; }
  .confirm__title { font-size: 44px; line-height: 48px; }
  .confirm__lead { font-size: 18px; line-height: 28px; }
  .nerve-bar { padding-block: 10px calc(10px + env(safe-area-inset-bottom)); }
  .nerve-bar__in { grid-template-columns: minmax(0, 1fr) auto; gap: 8px var(--space-3); }
  .nerve-bar__form { grid-column: 1 / -1; max-width: none; }
  .nerve-bar__form .nv__btn { flex: 1 1 100%; padding: 10px 14px; font-size: 14px; }
}

/* The contents of a long post (Amélie, 11 Oct 2026): the headings, as a
   numbered list in the reading sans, between two hairlines, under the
   standfirst. The numerals are the serif's, like every numeral on the site. */
.issue__contents { margin-top: 1.6em; padding-block: var(--space-4); border-top: 1px solid var(--nu-rule); border-bottom: 1px solid var(--nu-rule); font: 400 16px/24px var(--font-sans); }
.issue__contents .eyebrow { margin: 0; color: var(--text-muted); }
.issue__contents ol { margin-top: var(--space-3); padding-left: 1.6em; list-style: decimal; }
.issue__contents ol::marker, .issue__contents li::marker { font-family: var(--font-serif); color: var(--text-muted); }
.issue__contents li + li { margin-top: .35em; }
.issue__contents a { color: var(--text); text-decoration-color: var(--nu-rule); }
.issue__contents a:hover { text-decoration-color: var(--accent); }
.issue__body h2[id] { scroll-margin-top: var(--space-6); }