{/* left — photographic plate, full bleed */}

{/* plate caption */}

Plate № {number} {photoCaption}

{/* huge numeral */}

{numeral}

{/* right — text column, paper */}

§ {number} · Direction ◆ {status}

{subtitle}

{name.split(' ').map((w, i) => i === 1 ? {i ? ' ' : ''}{w} : {i ? ' ' : ''}{w} )} .

{openingLine}

{body}

{/* attribute table */}

{attributes.map(([k, v]) => (

{k} {v}

))}

{href && ( { e.currentTarget.style.background = 'var(--walnut)'; e.currentTarget.style.borderColor = 'var(--walnut)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--ink)'; }} > Read {name} → )}

{/* ============ SPREAD B: cover + spread, large scale ============ */}

§ {number}.I — Specimens {name} · Cover & sample interior At 1:1 scale

); } function ArtboardFrame({ label, number, name, children }) { return (

{/* caption above */}

Fig. {number}

{label} — {name}

600 × 800

{/* artboard with subtle shadow to lift from paper */}

{ if (!el) return; const resize = () => { const w = el.parentElement.clientWidth; el.style.setProperty('--artboard-scale', (w / 600).toString()); }; resize(); // Observe parent size if (!el.__ro) { el.__ro = new ResizeObserver(resize); el.__ro.observe(el.parentElement); } }}> {children}

); } Object.assign(window, { DirectionStudy, ArtboardFrame });