/* ameliebeerens.com: the references section (Amélie's spec, 6 Oct 2026;
   proposal A chosen the same day). Loaded by both layouts after the FAQ's
   styles; the cards come from src/data/references.json through
   build_site.py ({{references:home}}).

   A ruled section: eyebrow and title, then three hairline cards sharing
   their rules in a row that scrolls sideways (native scrolling with snap;
   references.js adds the arrows, the left and right keys, mouse drag, the
   counter and the red progress line). The arrows sit bottom left, the red
   line bottom right; a closing line under its own rule. Nothing moves by
   itself. The row is as tall as its longest card, so nothing jumps. On a
   phone 1.2 cards are in view, the arrows go and the counter shows.

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

.refs { --ref-mute: var(--mute); --ref-line: var(--line); --ref-hover: var(--hover); --ref-pad: 64px;
  border-block: 1px solid var(--ref-line); background: var(--surface); color: var(--text); }

.refs__head { padding: 96px var(--ref-pad) 48px; }
.refs__eyebrow { margin: 0; font: 500 12px/18px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ref-mute); }
.refs__head h2 { margin: 12px 0 0; font: 400 clamp(38px, 4vw, 58px)/1.04 var(--font-serif); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }

/* The row: a scroll container with its scrollbar hidden, clipped at the
   content edge, three cards wide. */
.refs__area { padding: 0 var(--ref-pad) 48px; }
.refs__scroller { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.refs__scroller::-webkit-scrollbar { display: none; }
.refs__scroller:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.refs__scroller.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.refs__track { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }

/* A card: hairline, no fill, no radius, the attribution over the text. */
.ref-card { flex: 0 0 calc((100% + 2px) / 3); display: flex; flex-direction: column; gap: 28px; padding: 40px; border: 1px solid var(--ref-line); scroll-snap-align: start; transition: background-color .2s ease-out; }
.ref-card + .ref-card { margin-left: -1px; }
.ref-card:hover { background-color: var(--ref-hover); }
/* The glowing frame on hover (Amélie, 8 Oct 2026), the same as the Work
   with me tiles (.nu-cells--two in assets/pages.css): under the card a
   turning conic layer in the site's hue, over it the card's own ground
   inset by 2px, so the hue shows as a 2px frame inside the hairline. It
   fades in on hover and keyboard focus; the grey tint stays, on the inner
   layer. Still when motion is not welcome. */
.ref-card { position: relative; isolation: isolate; overflow: clip; background-color: var(--surface); }
.ref-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; }
.ref-card::after { content: ""; position: absolute; z-index: -1; inset: 2px; background-color: var(--surface); transition: background-color .2s ease-out; }
.ref-card:hover::after, .ref-card:focus-within::after { background-color: var(--ref-hover); }
.ref-card:hover::before, .ref-card:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ref-card:hover::before, .ref-card:focus-within::before { animation: ref-frame 8s linear infinite; }
}
@keyframes ref-frame { to { transform: rotate(1turn); } }
.ref-attr { margin: 0; font: 500 12px/18px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ref-mute); }
/* What the reply answers (Amélie, 9 Oct 2026): tied to the quote under
   it, not to the attribution above it. */
.ref-ctx { margin: 0 0 -16px; font: 400 15px/1.5 var(--font-sans); color: var(--ref-mute); text-wrap: pretty; }
.ref-text { margin: 0; font: 400 24px/1.3 var(--font-serif); color: var(--text); text-wrap: pretty; }

/* Controls: arrows left, the red line right (the counter on a phone). */
.refs__controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }
.refs__arrows { display: flex; gap: 12px; }
.refs__arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--text); border-radius: 50%; background: none; color: var(--text); cursor: pointer; transition: background-color .2s ease-out; }
.refs__arrow svg { width: 20px; height: 20px; }
.refs__arrow:hover { background-color: var(--ref-hover); }
.refs__arrow[aria-disabled="true"] { opacity: .3; cursor: default; }
.refs__arrow[aria-disabled="true"]:hover { background: none; }
.refs__counter { display: none; margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ref-mute); font-variant-numeric: tabular-nums; }
.refs__progress { position: relative; flex: 0 1 240px; height: 1px; background: var(--ref-line); }
.refs__progress i { position: absolute; left: 0; top: -1px; height: 3px; width: var(--p, 0%); background: var(--red); transition: width .25s ease-out; }

.refs__foot { margin: 0; padding: 24px var(--ref-pad); border-top: 1px solid var(--ref-line); font: 400 14px/20px var(--font-sans); color: var(--ref-mute); }

@media (prefers-reduced-motion: reduce) {
  .refs__scroller { scroll-behavior: auto; }
  .ref-card, .ref-card::before, .ref-card::after, .refs__arrow, .refs__progress i { transition: none; }
}

@media (max-width: 899px) {
  .refs { --ref-pad: 20px; }
  .refs__head { padding: 56px var(--ref-pad) 24px; }
  .refs__area { padding-bottom: 32px; }
  .ref-card { flex-basis: calc(100% / 1.2); padding: 24px; gap: 20px; }
  .ref-ctx { margin-bottom: -10px; font-size: 14px; }
  .ref-text { font-size: 20px; }
  .refs__controls { margin-top: 20px; }
  .refs__arrows, .refs__progress { display: none; }
  .refs__counter { display: block; margin-left: auto; }
  .refs__foot { padding: 20px var(--ref-pad); }
}