{/* subject silhouette — varies subtly per tint */} {tint === 'cool' && (

)} {tint === 'warm' && (

)} {tint === 'door' && (

)} {tint === 'drape' && ( <>

)} {tint === 'atelier' && ( <>

)} {tint === 'hands' && (

)} {tint === 'seam' && (

)} {/* top + bottom fade for legibility */}

{label && (

{label}

)} {children}

); } // ---- twenty-mark tally ------------------------------------------------------ function Tally({ remaining, total = 20 }) { return (

{Array.from({ length: total }).map((_, i) => { const held = i >= remaining; return ( ); })}

); } // ---- small text-button (matches Drop page Btn) ------------------------------ function Btn({ children, onClick, href, kind = 'wine', style, disabled }) { const baseColor = disabled ? 'rgba(232,232,227,0.18)' : kind === 'wine' ? '#8b0000' : 'rgba(232,232,227,0.55)'; const baseBorder = disabled ? 'rgba(232,232,227,0.10)' : kind === 'wine' ? 'rgba(139,0,0,0.40)' : 'rgba(232,232,227,0.30)'; const props = { onClick: disabled ? undefined : onClick, style: { display: 'inline-block', fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 10, letterSpacing: 4, textTransform: 'uppercase', color: baseColor, background: 'transparent', border: 0, borderBottom: `1px solid ${baseBorder}`, padding: '4px 0', cursor: disabled ? 'not-allowed' : 'pointer', textDecoration: 'none', transition: 'color 200ms ease, border-color 200ms ease', ...style, }, onMouseEnter: disabled ? undefined : e => { e.currentTarget.style.color = '#e8e8e3'; e.currentTarget.style.borderBottomColor = 'rgba(232,232,227,0.85)'; }, onMouseLeave: disabled ? undefined : e => { e.currentTarget.style.color = baseColor; e.currentTarget.style.borderBottomColor = baseBorder; }, }; return href ? {children} : ; } // ---- top nav ---------------------------------------------------------------- function PageNav({ onBack }) { return (

{ e.preventDefault(); onBack && onBack(); }} style={{ fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 10, letterSpacing: 4, textTransform: 'uppercase', color: 'rgba(232,232,227,0.55)', textDecoration: 'none', transition: 'color 200ms ease', }} onMouseEnter={e => e.currentTarget.style.color = '#e8e8e3'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(232,232,227,0.55)'} >← All pieces

OBSKIRA

Drop IX · MMXXVI

); } // ---- reservation modal ------------------------------------------------------ function Reservation({ piece, onClose, onConfirm }) { const [size, setSize] = React.useState(null); const [email, setEmail] = React.useState(''); const valid = size && /\S+@\S+\.\S+/.test(email); React.useEffect(() => { const onKey = e => e.key === 'Escape' && onClose(); document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); return (

e.stopPropagation()} style={{ background: '#0a0a0a', border: '1px solid rgba(139,0,0,0.40)', maxWidth: 520, width: '100%', padding: '40px 40px 32px', }}>

{piece.roman} · Reservation

Hold {piece.name}

The piece is held for seventy-two hours. The house confirms separately. Payment is settled in full at confirmation.

{/* Size */}

Size

{piece.sizes.map(s => ( ))}

{/* Email */}

Email setEmail(e.target.value)} placeholder="surname@domain" style={{ background: 'transparent', border: 0, borderBottom: '1px solid rgba(232,232,227,0.30)', fontFamily: 'Inter, sans-serif', fontWeight: 300, fontSize: 14, padding: '10px 0', color: '#e8e8e3', width: '100%', outline: 0, transition: 'border-color 200ms ease', }} onFocus={e => e.target.style.borderBottomColor = '#8b0000'} onBlur={e => e.target.style.borderBottomColor = 'rgba(232,232,227,0.30)'} />

valid && onConfirm({ size, email })} disabled={!valid}> Continue Close

); } // ---- after-reserve toast ---------------------------------------------------- function HeldToast({ piece, onClose }) { React.useEffect(() => { const t = setTimeout(onClose, 4200); return () => clearTimeout(t); }, [onClose]); return (

{piece.roman} · Held

{piece.name} is held for seventy-two hours.

); } // ---- main page -------------------------------------------------------------- function PiecePage() { const [held, setHeld] = React.useState(0); // number of holds the user has placed const [reserving, setReserving] = React.useState(false); const [toast, setToast] = React.useState(false); // restore from localStorage so refresh keeps state React.useEffect(() => { const v = parseInt(localStorage.getItem('obskira:piece01:held') || '0', 10); if (!Number.isNaN(v)) setHeld(v); }, []); React.useEffect(() => { localStorage.setItem('obskira:piece01:held', String(held)); }, [held]); const remaining = PIECE.editionSize - held; function confirmHold() { setHeld(h => Math.min(PIECE.editionSize, h + 1)); setReserving(false); setToast(true); } return ( <> alert('Back to all pieces (stub for prototype)')} /> {/* HERO — 1200px breakout, 60/40 split */}

{/* Primary image */}

{/* Info column */}

{/* Edition mark */}

{String(PIECE.index).padStart(2, '0')}

of {String(PIECE.total).padStart(2, '0')}
Drop IX

{/* Name */}

{PIECE.name}

{/* Single descriptor */}

{PIECE.descriptor}

{/* Hairline */}

{/* Price */}

USD {PIECE.price.toLocaleString()}

{/* Remaining tally */}

{remaining > 0 ? `${remaining} of ${PIECE.editionSize} remaining` : 'Edition closed' }

{/* Reserve button */}

setReserving(true)} disabled={remaining === 0} style={{ fontSize: 11, padding: '8px 0' }} > {remaining === 0 ? 'Closed' : 'Reserve'} e.currentTarget.style.color = '#e8e8e3'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(232,232,227,0.35)'} >The material story ↓

{/* MATERIAL STORY — 800px column */}

I · Material

{PIECE.story.map((p, i) => (

{p}

))}

{PIECE.pull}

{/* GALLERY — column-width, stacked, generous breathing */}

II · Plates

{/* two-up row for rhythm */}

{/* MEASUREMENTS — column-width */}

III · Measurement

{PIECE.measurements.map(([k, v]) => ( ))}

{k}

{v}

The sizing chart → Four sizes. Italian cut. Run true.

{/* CARE + PROVENANCE — column-width, smaller text */}

IV · Care

{PIECE.care}

V · Provenance

{PIECE.provenance}

{/* RELATED — column-width, quiet */}

VI · Also in Drop IX

{RELATED.map(r => ( ))}

← All eight pieces

{/* Footer */} {reserving && ( setReserving(false)} onConfirm={confirmHold} /> )} {toast && setToast(false)} />} ); } function RelatedTile({ piece }) { const [hover, setHover] = React.useState(false); return ( e.preventDefault()} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ textDecoration: 'none', display: 'block', border: `1px solid ${hover ? 'rgba(139,0,0,0.40)' : 'rgba(139,0,0,0.18)'}`, background: hover ? 'rgba(139,0,0,0.04)' : 'transparent', padding: 24, transition: 'all 200ms ease', }}>

{piece.roman} · Of VIII

{piece.name}

USD {piece.price.toLocaleString()}

); } window.PiecePage = PiecePage;