/* ==========================================================================
   /branding-agency-dubai — "Editorial brand book" (TKT-0009, concept 2)
   Ember #FF6A2B + cream #F3EDE4, IBM Plex Serif display, magazine rhythm.
   Everything is scoped under .nx-bb. No global box-sizing; grids use
   minmax(0,1fr); no coloured top-strokes on any card or panel.
   ========================================================================== */

/* Page-local aliases of the PRELOADED Plex files with font-display: swap.
   The real face is used when it is ready at first paint (it is preloaded);
   otherwise the fallback stays for this view — no late swap, so no reflow/CLS. */
@font-face { font-family: "NX Bb Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex/plex-serif-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "NX Bb Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex/plex-serif-italic-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "NX Bb Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/assets/fonts/plex/plex-sans-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.nx-bb {
    --bb-ember: #FF6A2B;
    --bb-ember-ink: #9E3510;
    --bb-cream: #F3EDE4;
    --bb-paper: #F3EDE4;
    --bb-paper-2: #EAE2D6;
    --bb-ink: #17120E;
    --bb-ink-soft: rgba(23, 18, 14, .72);
    --bb-bg: #0B0908;
    --bb-bg-2: #13100D;
    --bb-line: rgba(243, 237, 228, .14);
    --bb-text: #F3EDE4;
    --bb-muted: rgba(243, 237, 228, .68);
    --bb-dim: rgba(243, 237, 228, .46);
    --bb-serif: "NX Bb Serif", "Plex Serif Fallback", Georgia, "Times New Roman", serif;
    --bb-sans: "NX Bb Sans", "Plex Sans Fallback", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bb-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, Menlo, monospace;
    --bb-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
    --bb-gut: clamp(16px, 5vw, 72px);
    --bb-max: 1280px;
    background: var(--bb-bg);
    color: var(--bb-text);
    font-family: var(--bb-sans);
    overflow-x: clip;
}
.nx-bb ::selection { background: var(--bb-ember); color: #000; }

.nx-bb .bb-wrap { max-width: var(--bb-max); margin: 0 auto; padding: 0 var(--bb-gut); }
.nx-bb .bb-sec { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.nx-bb .bb-sec--alt { background: var(--bb-bg-2); }

.nx-bb .bb-kicker {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--bb-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--bb-ember); margin: 0 0 22px;
}
.nx-bb .bb-kicker::before { content: "\2014"; }

.nx-bb .bb-h2 {
    font-family: var(--bb-serif); font-weight: 400; font-style: normal;
    font-size: clamp(2.1rem, 5vw, 4.4rem); line-height: 1.04; letter-spacing: -.02em;
    color: var(--bb-text); margin: 0 0 26px; max-width: 10.8em;
}
.nx-bb .bb-h2 em { font-style: italic; color: var(--bb-ember); }
.nx-bb .bb-intro { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.7; color: var(--bb-muted); max-width: 37.2em; margin: 0; }
.nx-bb .bb-intro a, .nx-bb .bb-prose a { color: var(--bb-text); text-decoration: underline; text-decoration-color: var(--bb-ember); text-underline-offset: 3px; }
.nx-bb .bb-intro a:hover, .nx-bb .bb-prose a:hover { color: var(--bb-ember); }

/* Heading wipe (letterform reveal). Only gated once JS has run, and only
   below the fold — the H1 is never hidden (LCP). */
.nx-bb.bb-js [data-bb-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65, .05, .35, 1); }
.nx-bb.bb-js [data-bb-wipe].is-in { clip-path: inset(0 0 0 0); }

/* Buttons */
.nx-bb .bb-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.nx-bb .bb-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px;
    font-family: var(--bb-sans); font-weight: 600; font-size: 15px; text-decoration: none;
    border-radius: 999px; border: 1px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.nx-bb .bb-btn--solid { background: var(--bb-ember); color: #120A05; }
.nx-bb .bb-btn--solid:hover { background: var(--bb-cream); color: #120A05; transform: translateY(-2px); }
.nx-bb .bb-btn--line { border-color: rgba(243, 237, 228, .38); color: var(--bb-text); }
.nx-bb .bb-btn--line:hover { border-color: var(--bb-cream); background: rgba(243, 237, 228, .06); }
.nx-bb .bb-btn:focus-visible, .nx-bb a:focus-visible, .nx-bb summary:focus-visible { outline: 2px solid var(--bb-ember); outline-offset: 3px; }

/* ── HERO · the cover ─────────────────────────────────────────────────── */
.nx-bb .bb-cover {
    position: relative;
    padding: clamp(112px, 13vw, 168px) 0 clamp(64px, 8vw, 110px);
    background:
        radial-gradient(60% 50% at 88% 12%, rgba(255, 106, 43, .16), transparent 70%),
        var(--bb-bg);
}
.nx-bb .bb-mast {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
    padding-bottom: 14px; margin-bottom: clamp(32px, 5vw, 64px);
    font-family: var(--bb-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--bb-dim);
    background: linear-gradient(var(--bb-line), var(--bb-line)) bottom / 100% 1px no-repeat;
}
.nx-bb .bb-mast b { color: var(--bb-text); font-weight: 500; }
.nx-bb .bb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.nx-bb .bb-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--bb-dim); }
.nx-bb .bb-crumbs a { color: var(--bb-dim); text-decoration: none; }
.nx-bb .bb-crumbs a:hover { color: var(--bb-ember); }
.nx-bb .bb-crumbs [aria-current] { color: var(--bb-text); }

.nx-bb .bb-cover__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: clamp(32px, 6vw, 96px); align-items: start;
}
.nx-bb .bb-h1 {
    font-family: var(--bb-serif); font-style: italic; font-weight: 400;
    font-size: clamp(2.5rem, 6.2vw, 5.6rem); line-height: 1; letter-spacing: -.03em;
    color: var(--bb-cream); margin: 0 0 clamp(26px, 3.4vw, 40px);
    overflow-wrap: break-word;
}
.nx-bb .bb-h1 .bb-h1__accent { color: var(--bb-ember); }
.nx-bb .bb-h1 .bb-h1__roman { font-style: normal; }
.nx-bb .bb-lede {
    font-family: var(--bb-serif); font-size: clamp(1.12rem, 1.7vw, 1.42rem); line-height: 1.6;
    color: var(--bb-text); max-width: 27.6em; margin: 0;
}
.nx-bb .bb-standfirst {
    margin: 26px 0 0; max-width: 34.8em; padding-left: 18px;
    font-size: 15px; line-height: 1.7; color: var(--bb-muted);
    background: linear-gradient(var(--bb-ember), var(--bb-ember)) left top / 2px 100% no-repeat;
}
.nx-bb .bb-standfirst b { color: var(--bb-text); font-weight: 600; font-family: var(--bb-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; display: block; margin-bottom: 6px; }

/* Swatch column + specimen */
.nx-bb .bb-swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nx-bb .bb-sw {
    display: flex; justify-content: space-between; align-items: flex-end;
    height: clamp(40px, 4vw, 50px); padding: 8px 14px; border-radius: 4px;
    font-family: var(--bb-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    transform-origin: left center;
}
.nx-bb .bb-sw span:last-child { font-weight: 500; }
.nx-bb .bb-sw--1 { background: var(--bb-ember); color: #1a0b03; }
.nx-bb .bb-sw--2 { background: var(--bb-cream); color: var(--bb-ink); }
.nx-bb .bb-sw--3 { background: #D9C7AE; color: var(--bb-ink); }
.nx-bb .bb-sw--4 { background: #8A5A3C; color: var(--bb-cream); }
.nx-bb .bb-sw--5 { background: #2A211B; color: var(--bb-cream); box-shadow: inset 0 0 0 1px var(--bb-line); }
.nx-bb .bb-sw--6 { background: #0B0908; color: var(--bb-text); box-shadow: inset 0 0 0 1px var(--bb-line); }
.nx-bb .bb-specimen {
    margin-top: 14px; padding: 18px 18px 16px; border-radius: 4px;
    background: var(--bb-paper); color: var(--bb-ink);
}
.nx-bb .bb-specimen__glyphs { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; line-height: 1; }
.nx-bb .bb-specimen__lat { font-family: var(--bb-serif); font-style: italic; font-size: clamp(3.2rem, 6vw, 4.4rem); }
.nx-bb .bb-specimen__ar { font-family: var(--bb-ar); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--bb-ember-ink); }
.nx-bb .bb-specimen p { margin: 12px 0 0; font-family: var(--bb-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-ink-soft); }

@media (prefers-reduced-motion: no-preference) {
    .nx-bb .bb-sw { animation: bb-sw-in .9s cubic-bezier(.18, .72, .18, 1) both; }
    .nx-bb .bb-sw--2 { animation-delay: .08s; } .nx-bb .bb-sw--3 { animation-delay: .16s; }
    .nx-bb .bb-sw--4 { animation-delay: .24s; } .nx-bb .bb-sw--5 { animation-delay: .32s; }
    .nx-bb .bb-sw--6 { animation-delay: .40s; }
}
@keyframes bb-sw-in { from { transform: scaleX(.18); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── SPREADS ──────────────────────────────────────────────────────────── */
.nx-bb .bb-spreads { display: grid; gap: clamp(40px, 6vw, 88px); margin-top: clamp(40px, 6vw, 72px); }
.nx-bb .bb-spread {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--bb-paper); color: var(--bb-ink);
    border-radius: 6px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 2px 0 rgba(0, 0, 0, .25);
    position: relative;
}
/* the fold — a soft shadow down the gutter, not a stroke */
.nx-bb .bb-spread::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 64px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(23, 18, 14, .10) 45%, rgba(23, 18, 14, .18) 50%, rgba(23, 18, 14, .10) 55%, transparent);
    pointer-events: none;
}
.nx-bb .bb-page { padding: clamp(24px, 4vw, 56px); min-width: 0; display: flex; flex-direction: column; }
.nx-bb .bb-page--l { background: linear-gradient(90deg, var(--bb-paper), var(--bb-paper-2)); border-radius: 6px 0 0 6px; }
.nx-bb .bb-page--r { border-radius: 0 6px 6px 0; }
.nx-bb .bb-folio {
    display: flex; justify-content: space-between; gap: 12px; margin: 0 0 22px;
    font-family: var(--bb-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--bb-ink-soft);
}
.nx-bb .bb-spread h3 {
    font-family: var(--bb-serif); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.02;
    letter-spacing: -.02em; margin: 0 0 6px; color: var(--bb-ink);
}
.nx-bb .bb-spread h4 {
    font-family: var(--bb-mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--bb-ember-ink); margin: 22px 0 10px;
}
.nx-bb .bb-spread p { font-family: var(--bb-serif); font-size: 1.06rem; line-height: 1.7; margin: 0; color: var(--bb-ink); }
.nx-bb .bb-dropcap::first-letter {
    float: left; font-family: var(--bb-serif); font-style: italic; font-size: 4.2em; line-height: .82;
    padding: 6px 10px 0 0; color: var(--bb-ember-ink);
}
.nx-bb .bb-spread figure { margin: auto 0 0; padding-top: 24px; }
.nx-bb .bb-spread img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; background: var(--bb-paper-2); }
.nx-bb .bb-spread figcaption { margin-top: 8px; font-family: var(--bb-mono); font-size: 11px; letter-spacing: .06em; color: var(--bb-ink-soft); }
.nx-bb .bb-sys { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nx-bb .bb-sys li { font-size: 15.5px; line-height: 1.65; color: var(--bb-ink); }
.nx-bb .bb-sys li i { font-family: var(--bb-serif); font-style: italic; font-size: 1.12em; color: var(--bb-ember-ink); }
.nx-bb .bb-sys a, .nx-bb .bb-spread__more { color: var(--bb-ink); text-decoration: underline; text-decoration-color: var(--bb-ember); text-underline-offset: 3px; }
.nx-bb .bb-spread__more { display: inline-block; margin-top: 22px; font-family: var(--bb-mono); font-size: 12px; letter-spacing: .08em; }
.nx-bb .bb-sys a:hover, .nx-bb .bb-spread__more:hover { color: var(--bb-ember-ink); }

.nx-bb .bb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.nx-bb .bb-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bb-mono); font-size: 11px; color: var(--bb-ink-soft); }
.nx-bb .bb-chip i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 18, 14, .18); }
.nx-bb .bb-arch { display: grid; gap: 8px; margin-top: 18px; font-family: var(--bb-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.nx-bb .bb-arch__parent { background: var(--bb-ink); color: var(--bb-paper); padding: 12px 14px; border-radius: 3px; text-align: center; }
.nx-bb .bb-arch__kids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nx-bb .bb-arch__kids span { background: rgba(23, 18, 14, .07); padding: 10px 6px; border-radius: 3px; text-align: center; color: var(--bb-ink-soft); }

/* ── CONTENTS (eight chapters) ────────────────────────────────────────── */
.nx-bb .bb-toc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.nx-bb .bb-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--bb-line); counter-reset: bbch; }
.nx-bb .bb-toc li {
    background: var(--bb-bg-2); padding: 22px 0;
    display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 18px;
}
.nx-bb .bb-toc li::before {
    counter-increment: bbch; content: counter(bbch, decimal-leading-zero);
    grid-row: span 2; font-family: var(--bb-serif); font-style: italic; font-size: 1.9rem; line-height: 1; color: var(--bb-ember);
}
.nx-bb .bb-toc h3 { margin: 0; font-family: var(--bb-serif); font-weight: 400; font-size: 1.32rem; color: var(--bb-text); }
.nx-bb .bb-toc p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--bb-muted); }
.nx-bb .bb-toc a { color: var(--bb-text); }
.nx-bb .bb-delivered { margin-top: 30px; padding: 22px 24px; border-radius: 4px; background: rgba(255, 106, 43, .08); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .28); font-size: 15px; line-height: 1.7; color: var(--bb-muted); }
.nx-bb .bb-delivered b { color: var(--bb-text); }

/* ── SITTINGS ─────────────────────────────────────────────────────────── */
.nx-bb .bb-sittings { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.nx-bb .bb-sit { min-width: 0; }
.nx-bb .bb-sit__n { display: block; font-family: var(--bb-serif); font-style: italic; font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--bb-ember); margin-bottom: 16px; }
.nx-bb .bb-sit h3 { margin: 0 0 10px; font-family: var(--bb-serif); font-weight: 400; font-size: 1.4rem; color: var(--bb-text); }
.nx-bb .bb-sit p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--bb-muted); }
.nx-bb .bb-sit p a { color: var(--bb-text); text-decoration: underline; text-decoration-color: var(--bb-ember); text-underline-offset: 3px; }
.nx-bb .bb-sit p a:hover { color: var(--bb-ember); }

/* ── ENGAGEMENT ───────────────────────────────────────────────────────── */
.nx-bb .bb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(36px, 5vw, 56px); }
.nx-bb .bb-plan { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--bb-line); border-radius: 6px; background: transparent; transition: background .3s ease, border-color .3s ease; }
.nx-bb .bb-plan:hover { background: rgba(243, 237, 228, .03); border-color: rgba(243, 237, 228, .28); }
.nx-bb .bb-plan__wk { display: block; font-family: var(--bb-serif); font-style: italic; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: var(--bb-cream); }
.nx-bb .bb-plan__wk small { font-size: .4em; font-style: normal; font-family: var(--bb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bb-ember); margin-left: 6px; }
.nx-bb .bb-plan h3 { margin: 20px 0 10px; font-family: var(--bb-sans); font-weight: 600; font-size: 1.15rem; color: var(--bb-text); }
.nx-bb .bb-plan p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--bb-muted); }
.nx-bb .bb-fineprint { margin: 28px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--bb-muted); max-width: 43.2em; }
.nx-bb .bb-fineprint a { color: var(--bb-text); text-underline-offset: 3px; text-decoration-color: var(--bb-ember); }

/* ── SEVEN MARKETS (pull-quote) ───────────────────────────────────────── */
.nx-bb .bb-markets { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.nx-bb .bb-markets__p { font-family: var(--bb-serif); font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.75; color: var(--bb-text); margin: 0; }
.nx-bb .bb-markets__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.nx-bb .bb-markets__list li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bb-line); font-family: var(--bb-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bb-muted); }

/* ── WHY ──────────────────────────────────────────────────────────────── */
.nx-bb .bb-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(28px, 6vw, 96px); margin-top: clamp(36px, 5vw, 64px); }
.nx-bb .bb-why__item { min-width: 0; }
.nx-bb .bb-why__fig { display: block; font-family: var(--bb-serif); font-weight: 400; font-size: clamp(3rem, 6vw, 5rem); line-height: .95; letter-spacing: -.03em; color: var(--bb-cream); }
.nx-bb .bb-why__fig em { color: var(--bb-ember); }
.nx-bb .bb-why h3 { margin: 12px 0 8px; font-family: var(--bb-sans); font-weight: 600; font-size: 1.12rem; color: var(--bb-text); }
.nx-bb .bb-why p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--bb-muted); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.nx-bb .bb-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
.nx-bb .bb-faq { display: grid; gap: 1px; background: var(--bb-line); }
.nx-bb .bb-faq details { background: var(--bb-bg); }
.nx-bb .bb-sec--alt .bb-faq details { background: var(--bb-bg-2); }
.nx-bb .bb-faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
    padding: 22px 0; font-family: var(--bb-serif); font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.4; color: var(--bb-text);
}
.nx-bb .bb-faq summary::-webkit-details-marker { display: none; }
.nx-bb .bb-faq summary::after { content: "+"; font-family: var(--bb-mono); font-size: 1.2rem; color: var(--bb-ember); transition: transform .3s ease; flex: none; }
.nx-bb .bb-faq details[open] summary::after { transform: rotate(45deg); }
.nx-bb .bb-faq details p { margin: 0; padding: 0 0 24px; max-width: 40.8em; font-size: 15.5px; line-height: 1.75; color: var(--bb-muted); }
.nx-bb .bb-faq details p a { color: var(--bb-text); text-decoration-color: var(--bb-ember); text-underline-offset: 3px; }

/* ── FURTHER READING (index) ──────────────────────────────────────────── */
.nx-bb .bb-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: 36px; }
.nx-bb .bb-index h3 { margin: 0 0 12px; font-family: var(--bb-mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bb-ember); }
.nx-bb .bb-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nx-bb .bb-index a { font-family: var(--bb-serif); font-size: 1.08rem; color: var(--bb-text); text-decoration: none; background: linear-gradient(var(--bb-ember), var(--bb-ember)) left bottom / 0 1px no-repeat; transition: background-size .3s ease; }
.nx-bb .bb-index a:hover { background-size: 100% 1px; }

/* ── CTA ──────────────────────────────────────────────────────────────── */
.nx-bb .bb-cta { background: var(--bb-ember); color: #140904; padding: clamp(72px, 10vw, 140px) 0; }
.nx-bb .bb-cta h2 { font-family: var(--bb-serif); font-style: italic; font-weight: 400; font-size: clamp(2.3rem, 6vw, 5.6rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 24px; max-width: 9.6em; color: #140904; }
.nx-bb .bb-cta p { margin: 0; max-width: 32.4em; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.65; color: rgba(20, 9, 4, .82); }
.nx-bb .bb-cta .bb-btn--solid { background: #140904; color: var(--bb-cream); }
.nx-bb .bb-cta .bb-btn--solid:hover { background: var(--bb-cream); color: #140904; }
.nx-bb .bb-cta .bb-btn--line { border-color: rgba(20, 9, 4, .5); color: #140904; }
.nx-bb .bb-cta .bb-btn--line:hover { background: rgba(20, 9, 4, .08); border-color: #140904; }
.nx-bb .bb-cta .bb-btn:focus-visible { outline-color: #140904; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .nx-bb .bb-sittings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-bb .bb-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .nx-bb .bb-cover__grid,
    .nx-bb .bb-toc-grid,
    .nx-bb .bb-markets,
    .nx-bb .bb-faq-grid { grid-template-columns: minmax(0, 1fr); }
    .nx-bb .bb-cover__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
    .nx-bb .bb-specimen { margin-top: 0; }
    .nx-bb .bb-spread { grid-template-columns: minmax(0, 1fr); }
    .nx-bb .bb-spread::after { display: none; }
    .nx-bb .bb-page--l { border-radius: 6px 6px 0 0; background: var(--bb-paper-2); }
    .nx-bb .bb-page--r { border-radius: 0 0 6px 6px; }
    .nx-bb .bb-plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .nx-bb .bb-cover__side { grid-template-columns: minmax(0, 1fr); }
    .nx-bb .bb-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-bb .bb-sw { height: 64px; flex-direction: column; align-items: flex-start; justify-content: space-between; font-size: 10px; letter-spacing: .08em; padding: 8px 10px; }
    .nx-bb .bb-sittings, .nx-bb .bb-why, .nx-bb .bb-index { grid-template-columns: minmax(0, 1fr); }
    .nx-bb .bb-arch__kids { grid-template-columns: minmax(0, 1fr); }
    .nx-bb .bb-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .nx-bb.bb-js [data-bb-wipe] { clip-path: none; transition: none; }
    .nx-bb .bb-btn, .nx-bb .bb-plan, .nx-bb .bb-faq summary::after { transition: none; }
}