/* bench.css: additions on the bench branch (bench/2026-09-14, website-aa). Loads after site.css, home.css and the page CSS.
   Consume tokens from site.css :root, never redefine. Selectors carry xe-b-. Transform and opacity only; shadows are set, never
   tweened; one backdrop-filter surface per section on phones; nothing under 10px; light on objects, never a halo on type.
   Each move's rules sit under its own banner with the move id so a per-move rollback is one block. */

/* ===== M3 · proof in the fold (index.html), evolved 09-14: one sentence in the body face under the hero strip with only the
   figures the fold does not already carry (the Google rating and count, the venue count), each a link to its source; no
   border, no uppercase, no tiles. Count-ups only on the two figures the weddings hero already counts; the year never counts.
   This is the first .reveal on the page (kit-check reads its transition), so every transition here sits on a descendant. ===== */
.xe-b-proof { background: var(--ink-0); }
.xe-b-proof .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; padding-block: 18px 4px; color: var(--muted); font-size: .95rem; line-height: 1.55; text-align: center; }
.xe-b-proof a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color var(--t-fast), color var(--t-fast); }
.xe-b-proof b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.xe-b-proof a:hover, .xe-b-proof a:focus-visible { color: var(--text); border-bottom-color: var(--hair); }
.xe-b-proof a:active { opacity: .7; }

/* ===== M2 · what happens next (book-a-dj.html), evolved 09-14: three ruled rows of sentences in the body face under the one
   eyebrow; no boxes, no in-row numbers, no per-row reveal (the section reveals as one). The callback window prints from
   brand.pencilSla when Robyn gives one. Every transition lives on a descendant, never on the .reveal element. ===== */
.xe-b-next { margin-top: clamp(44px, 7vw, 72px); }
.xe-b-next h2 { font-size: clamp(1.45rem, 3vw, 2.05rem); margin: 8px 0 14px; max-width: 24ch; }
.xe-b-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 58ch; font-size: 1.05rem; line-height: 1.55; }
.xe-b-steps a { color: inherit; text-underline-offset: 3px; }
@media (min-width: 1100px) {
  /* the steps and the included list share the width instead of leaving the right half of the screen empty */
  .xe-b-next { display: grid; grid-template-columns: minmax(0, 58ch) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .xe-b-next > .eyebrow, .xe-b-next > h2, .xe-b-steps { grid-column: 1; }
  .xe-b-next > .xe-b-incl { grid-column: 2; grid-row: 2 / span 2; margin-top: 8px; }
}

/* ===== M5 · always included (book-a-dj.html, under M2), evolved 09-14: a body-face lead-in (no second eyebrow in the head)
   and ruled rows of complete sentences built from content.json trust[3], the backup FAQ answer and brands.licence.label;
   a line the data cannot support is not rendered. ===== */
.xe-b-incl { margin-top: 34px; max-width: 58ch; }
.xe-b-incl-lead { margin: 0 0 10px; font-weight: 600; letter-spacing: -.01em; }
.xe-b-incl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.xe-b-incl-list li { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ===== M1 · the DJs (Astra round 04c7a4d ported by Claude; evolved 09-14: no filler lede, no placeholder initial, no chips, every
   small label in the body face; the pending state is the head + one sentence; the nav never renders in pending) ===== */
.xe-b-djs { margin-top: clamp(64px, 8vw, 96px); padding-block: clamp(24px, 4vw, 40px) 24px; }
.xe-b-djs[data-state="sample"] .xe-b-djs-portrait { aspect-ratio: 3 / 2; }
.xe-b-djs[hidden], .xe-b-djs-nav[hidden] { display: none; }
.xe-b-djs-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.xe-b-djs-heading { display: grid; gap: 12px; min-width: 0; }
.xe-b-djs-nav { display: flex; gap: 8px; flex: none; }
.xe-b-djs-arrow { width: 48px; padding: 0; font-size: 1.25rem; }
.xe-b-djs-pending { margin: 0; max-width: 78ch; color: var(--muted); }
/* Three portraits, then a sliver of the next. The rail owns its overflow. */
.xe-b-djs-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 80px) / 3); gap: 24px; list-style: none; margin: 0 -6px; padding: 6px 6px 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--ink-0); }
.xe-b-djs-card { min-width: 0; scroll-snap-align: start; }
.xe-b-djs-profile { height: 100%; display: flex; flex-direction: column; }
.xe-b-djs-portrait { position: relative; isolation: isolate; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-md); background: var(--ink-2); }
.xe-b-djs-portrait::after { z-index: 3; transition: opacity var(--t-fast) var(--ease-spring); opacity: .65; }
.xe-b-djs-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.06); transition: transform var(--t-editorial) var(--ease-spring); }
/* Functional local fade: only behind the caption, never a decorative band. */
.xe-b-djs-caption { position: absolute; inset: auto 0 0; z-index: 1; padding: 72px 22px 22px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.88) 58%, var(--ink-0)); }
.xe-b-djs-name { font-size: clamp(1.65rem, 2.5vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.xe-b-djs-meta { margin: 6px 0 0; font-size: .95rem; color: var(--muted); overflow-wrap: anywhere; }
.xe-b-djs-details { display: flex; flex-direction: column; align-items: start; flex: 1; gap: 12px; padding-top: 18px; min-width: 0; }
.xe-b-djs-styles { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.xe-b-djs-sample { position: absolute; z-index: 2; top: 14px; left: 18px; font-size: .9rem; color: var(--muted); }
.xe-b-djs-line { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.xe-b-djs-media { width: 100%; }
.xe-b-djs-play { min-height: 44px; padding: 0; border: 0; background: transparent; font: inherit; font-size: .875rem; cursor: pointer; }
.xe-b-djs-play svg { width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); flex: none; }
.xe-b-djs-play:hover svg, .xe-b-djs-play:focus-visible svg { background: var(--text); color: var(--ink-0); }
.xe-b-djs-play::after { content: none; }
.xe-b-djs-audio { display: block; width: 100%; min-width: 0; height: 44px; color-scheme: dark; }
.xe-b-djs-reviews { margin: 0; font-size: .9rem; color: var(--muted); }
.xe-b-djs-ask { margin-top: auto; max-width: 100%; padding: 10px 20px; text-align: center; overflow-wrap: anywhere; }
.xe-b-djs-arrow, .xe-b-djs-ask, .xe-b-djs-play { transition: transform var(--t-fast) var(--ease-spring), opacity var(--t-fast) var(--ease-spring), background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.xe-b-djs-arrow:focus-visible, .xe-b-djs-ask:focus-visible, .xe-b-djs-play:focus-visible, .xe-b-djs-audio:focus-visible, .xe-b-djs-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.xe-b-djs-arrow:active, .xe-b-djs-ask:active, .xe-b-djs-play:active { transform: scale(.97); }
.xe-b-djs-ask[aria-disabled="true"] { pointer-events: none; }
.xe-b-djs-profile:focus-within .xe-b-djs-portrait::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .xe-b-djs-profile:hover .xe-b-djs-photo { transform: scale(1.04); }
  .xe-b-djs-profile:hover .xe-b-djs-portrait::after { opacity: 1; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .xe-b-djs-rail { grid-auto-columns: calc((100% - 48px) / 2); gap: 20px; }
}
@media (max-width: 599px) {
  .xe-b-djs-head { align-items: start; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
  .xe-b-djs-heading { width: 100%; }
  .xe-b-djs-nav { display: none; }
  .xe-b-djs-rail { grid-auto-columns: 88%; gap: 16px; }
  .xe-b-djs[data-state="sample"] .xe-b-djs-portrait { aspect-ratio: 16 / 10; }
  .xe-b-djs-name { font-size: 2rem; }
  .xe-b-djs-caption { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .xe-b-djs-photo, .xe-b-djs-rail.reveal, .xe-b-djs-head.reveal, .xe-b-djs-pending.reveal { transform: none !important; opacity: 1; transition: none; }
}
html.motion-off .xe-b-djs-photo, html.motion-off .xe-b-djs .reveal { transform: none !important; opacity: 1; transition: none; }

/* ===== M7 · who we serve (technical-setup.html), evolved 09-14: no eyebrow (the page head one line above has one); on desktop the
   approved door grammar (photo at cell width, caption on a local fade, the count in the body face), the lit hairline only on hover
   or focus; on phones a plain two-column list of links, no bordered chips, no image mounted on touch. Named classes only. ===== */
.xe-b-serve { margin: clamp(20px, 4vw, 28px) 0 clamp(26px, 4vw, 40px); }
.xe-b-serve-rail { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 0 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--ink-0); -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.xe-b-serve-tile { position: relative; flex: 0 0 196px; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--ink-2); color: var(--text); text-decoration: none; scroll-snap-align: start; isolation: isolate; transition: transform var(--t-fast) var(--ease-out); }
.xe-b-serve-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.06); transition: transform var(--t-editorial) var(--ease-out); }
.xe-b-serve-tile::after { opacity: 0; transition: opacity var(--t-fast); }
.xe-b-serve-cap { position: absolute; inset: auto 0 0; z-index: 1; padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.86)); display: grid; gap: 1px; }
.xe-b-serve-t { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.xe-b-serve-n { color: var(--muted); font-size: .85rem; }
.xe-b-serve-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.xe-b-serve-tile:focus-visible::after { opacity: 1; }
.xe-b-serve-tile:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .xe-b-serve-tile:hover img { transform: scale(1.04); } .xe-b-serve-tile:hover::after { opacity: 1; } }
@media (max-width: 899px) {
  .xe-b-serve-rail { display: flex; flex-wrap: wrap; gap: 8px 20px; overflow: visible; padding: 0 0 4px; -webkit-mask-image: none; mask-image: none; }
  .xe-b-serve-tile { flex: none; aspect-ratio: auto; border-radius: 0; background: none; overflow: visible; display: inline-block; color: var(--muted); white-space: nowrap; }
  .xe-b-serve-cap { position: static; padding: 0; background: none; display: inline; line-height: 1.6; }
  .xe-b-serve-t { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
  .xe-b-serve-n::before { content: ", "; }
}
@media (prefers-reduced-motion: reduce) { .xe-b-serve-tile img, .xe-b-serve-tile, .xe-b-serve-tile::after { transition: none; } }

/* ===== M6 · your wedding pack (weddings.html), evolved 09-14: a ruled note in the rate card's fine-print register (no fill, no
   radius, no lit hairline, no pills); the four section titles come verbatim from questions.json via bench.js as a plain numbered
   list; no link (Robyn sends the pack after the deposit; the page stays unlisted). ===== */
.xe-b-pack { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 10px; max-width: 64ch; }
.xe-b-pack h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0; }
.xe-b-pack p { margin: 0; color: var(--muted); }
.xe-b-pack-list { margin: 2px 0 0; padding: 0 0 0 1.5em; color: var(--muted); display: grid; gap: 4px; }
.xe-b-pack-list li { padding-left: 4px; }
.xe-b-pack-list li::marker { color: var(--faint); font-variant-numeric: tabular-nums; }

/* ===== M9 · price index above the first tier (weddings.html), evolved 09-14: a ruled ledger, not six boxes. One strip between two
   hairlines on desktop, one row per tier with a hairline under it on phones; guest line in the body face; tabular numerals. Names,
   guest caps and prices are mirrored from the rendered rate card by bench.js, never retyped; each row jumps to its tier. ===== */
.xe-b-index { margin: clamp(22px, 4vw, 40px) 0 clamp(18px, 3vw, 28px); display: grid; gap: 12px; }
.xe-b-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 20px; }
.xe-b-index a { display: grid; grid-template-rows: auto auto auto; gap: 3px; padding: 6px 0 8px; color: var(--text); text-decoration: none; }
.xe-b-index a:active { opacity: .7; }
.xe-b-index-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; transition: text-decoration-color var(--t-fast); }
.xe-b-index-cap { color: var(--muted); font-size: .9rem; line-height: 1.4; }
.xe-b-index-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.xe-b-index a:hover .xe-b-index-name, .xe-b-index a:focus-visible .xe-b-index-name { text-decoration: underline; text-underline-offset: 4px; }
.xe-b-index a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 899px) {
  .xe-b-index ol { grid-template-columns: 1fr; gap: 6px; }
  .xe-b-index a { grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: baseline; padding: 6px 0; }
  .xe-b-index-name { grid-column: 1; grid-row: 1; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
  .xe-b-index-cap { grid-column: 1; grid-row: 2; }
  .xe-b-index-price { grid-column: 2; grid-row: 1; align-self: baseline; }
}