// Brief spread — editorial two-column introduction
// Paper background, drop cap, marginalia.

function BriefSpread() {
  return (
    <div className="paper-bg" style={{
      minHeight: '100vh',
      padding: 'clamp(60px, 8vw, 140px) clamp(32px, 6vw, 120px)',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
    }}>
      {/* chapter opener meta */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
        letterSpacing: '0.25em', textTransform: 'uppercase',
        color: 'var(--ink-mute)',
        marginBottom: 60,
        borderBottom: '1px solid var(--rule-soft)',
        paddingBottom: 16,
      }}>
        <span>§ 00 — Foreword</span>
        <span style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', letterSpacing: 0, textTransform: 'none', fontSize: 13, color: 'var(--ink-soft)' }}>
          ✦
        </span>
        <span>Pp. 04 — 05</span>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(200px, 1fr) minmax(320px, 2.4fr)',
        gap: 'clamp(40px, 6vw, 120px)',
        maxWidth: 1400, margin: '0 auto', width: '100%',
      }}>
        {/* left — smaller column, eyebrow + photo */}
        <div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
            letterSpacing: '0.25em', textTransform: 'uppercase',
            color: 'var(--walnut)', marginBottom: 20,
          }}>
            Foreword
          </div>
          <div style={{
            fontFamily: 'Fraunces, serif',
            fontSize: 'clamp(32px, 3.4vw, 56px)',
            lineHeight: 0.95, letterSpacing: '-0.02em',
            fontWeight: 400, color: 'var(--ink)',
            marginBottom: 32,
          }}>
            On building<br/>
            <span style={{ fontStyle: 'italic' }}>a house</span><br/>
            of words.
          </div>

          <div style={{ position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden' }}>
            <img src="assets/about-main.webp" alt="Noble Rock reading room" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'sepia(0.15) saturate(0.85)' }} />
          </div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
            letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'var(--ink-mute)', marginTop: 10,
          }}>
            Plate 01 · Firm reading room
          </div>
        </div>

        {/* right — long column body text */}
        <div style={{ paddingTop: 16 }}>
          <p style={{
            fontFamily: 'Fraunces, serif',
            fontSize: 'clamp(18px, 1.6vw, 22px)',
            lineHeight: 1.5, color: 'var(--ink-soft)',
            fontStyle: 'italic',
            margin: '0 0 36px',
            maxWidth: 640,
          }}>
            A brand book is not a template. It is a room — a <i>particular</i> room — into which
            every future decision must fit. What follows is three rooms,
            each properly furnished, each unmistakably Noble Rock.
          </p>

          <div style={{
            fontFamily: 'Fraunces, serif',
            fontSize: 16, lineHeight: 1.7,
            color: 'var(--ink)',
            columnCount: 2, columnGap: 40,
            maxWidth: 760,
            textAlign: 'justify',
            hyphens: 'auto',
          }}>
            <p style={{ margin: '0 0 14px', textIndent: 0 }}>
              <span style={{
                fontFamily: 'Fraunces, serif',
                fontSize: 'clamp(56px, 6vw, 88px)',
                lineHeight: 0.8,
                float: 'left',
                marginRight: 10,
                marginTop: 6,
                color: 'var(--walnut)',
                fontStyle: 'italic',
                fontWeight: 400,
              }}>T</span>
              he three directions gathered here share one ambition — that
              Noble Rock should sound and feel like itself in every setting
              — but they differ in temperament. One is restrained, one is
              exacting, one is warm.
            </p>
            <p style={{ margin: '0 0 14px' }}>
              Each is presented in two artefacts: a <i>cover</i>, which
              announces the book, and a <i>sample interior spread</i>, which
              demonstrates how the direction would carry the chapter on
              colour. Both are drawn at true size.
            </p>
            <p style={{ margin: '0 0 14px' }}>
              Direction 01 is already built — <i>The Archive</i> — and
              may be read in full. Directions 02 and 03 are in proposal.
              Together they describe the range within which the final
              guidelines will be made.
            </p>
            <p style={{ margin: 0, fontStyle: 'italic', color: 'var(--walnut)' }}>
              — The Design Office<br/>
              Sydney, April MMXXVI
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BriefSpread });