/* trade-words: bands of the trade's own words (see trade-words.js).
   Reads: --ink --accent --font-display --motif. No JS / reduced motion: two static rows, words wrapped. */
.tw { overflow: clip; padding: clamp(36px, 8svh, 90px) 0; }
.tw-tilt { display: grid; gap: clamp(6px, 1.4vw, 18px); transform: rotate(-2.2deg) scale(1.06); transform-origin: 50% 50%; }
.tw-row { list-style: none; margin: 0; padding: 0 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(16px, 3vw, 44px); row-gap: 0; font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: clamp(44px, 8vw, 150px); line-height: 1.04; letter-spacing: -.03em; color: var(--ink, #efe6d8); }
.tw-row li { display: inline-flex; align-items: center; column-gap: inherit; white-space: nowrap; }
/* the separator is the client's own awning: one small scalloped piece, not an ornament */
.tw-row li::after { content: ""; flex: none; width: .55em; height: .34em; background: var(--motif) no-repeat 0 0 / 100% 100%; opacity: .95; }
.tw-row li:last-child::after { content: none; }
.tw-row li.is-accent { color: var(--accent, #c4493b); font-style: italic; }
/* the second band is drawn in outline, so the two read as two voices */
.tw-row.tw-alt { font-style: italic; color: transparent; -webkit-text-stroke: 1.5px var(--ink, #efe6d8); }
.tw-row.tw-alt li.is-accent { color: var(--accent, #c4493b); -webkit-text-stroke: 0; }

/* live: one endless line per band */
.tw.is-live .tw-row { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0; will-change: transform; }
.tw.is-live .tw-row li:last-child::after { content: ""; }