// Direction A — "Field Notes"
// Rugged journal: sage/olive, cream, stencil accents, typewriter body, serif display.
// Feels like a war correspondent's notebook.

const A_COLORS = {
  paper: '#e8e4d9',
  paperDark: '#d9d3c2',
  ink: '#1d1f17',
  olive: '#3d4a2a',
  oliveD: '#2a3319',
  rust: '#8a3a1c',
  faded: '#6b6556',
  rule: '#b8b1a0',
};

const A_FONT_SERIF = "'Playfair Display', 'Libre Caslon Text', Georgia, serif";
const A_FONT_MONO = "'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace";
const A_FONT_SANS = "'Inter Tight', 'Helvetica Neue', system-ui, sans-serif";
const A_FONT_STENCIL = "'Black Ops One', 'Stardos Stencil', 'Impact', sans-serif";

function FieldNotesPortfolio() {
  const d = window.PAUL_DATA;
  const [hovered, setHovered] = React.useState(null);
  const [viewportWidth, setViewportWidth] = React.useState(() => window.innerWidth);

  React.useEffect(() => {
    const onResize = () => setViewportWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const isMobile = viewportWidth < 768;
  const isTablet = viewportWidth < 1100;
  const pagePadX = isMobile ? 20 : isTablet ? 32 : 60;
  const sectionPadY = isMobile ? 48 : 72;
  const heroTitleSize = isMobile ? 52 : isTablet ? 68 : 86;
  const sectionTitleSize = isMobile ? 38 : isTablet ? 46 : 54;
  const contactTitleSize = isMobile ? 42 : isTablet ? 52 : 64;
  const bodySerifSize = isMobile ? 19 : 22;
  const factsColumns = isMobile ? 1 : d.facts.length;

  return (
    <div style={{
      width: '100%', minHeight: '100%', background: A_COLORS.paper,
      color: A_COLORS.ink, fontFamily: A_FONT_SANS,
      backgroundImage: `
        repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(61,74,42,0.06) 31px, rgba(61,74,42,0.06) 32px),
        radial-gradient(circle at 15% 20%, rgba(138,58,28,0.04), transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(61,74,42,0.05), transparent 40%)
      `,
    }}>
      {/* ==== MASTHEAD ==== */}
      <div style={{
        borderBottom: `2px solid ${A_COLORS.ink}`,
        padding: isMobile ? '18px 20px 16px' : `24px ${pagePadX}px 18px`,
        display: 'flex',
        alignItems: isMobile ? 'flex-start' : 'center',
        justifyContent: 'space-between',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 16 : 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 12 : 18 }}>
          <div style={{
            width: isMobile ? 40 : 44, height: isMobile ? 40 : 44, border: `2px solid ${A_COLORS.ink}`, display: 'flex',
            alignItems: 'center', justifyContent: 'center', fontFamily: A_FONT_STENCIL,
            fontSize: isMobile ? 18 : 20, color: A_COLORS.oliveD, letterSpacing: 1,
          }}>PS</div>
          <div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: isMobile ? 2 : 3, color: A_COLORS.faded, textTransform: 'uppercase' }}>
              VOL. XIII · DISPATCH {(new Date().getTime() % 900 + 100)}
            </div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: isMobile ? 1.5 : 2, color: A_COLORS.faded, textTransform: 'uppercase', marginTop: 2 }}>
              Dana Point, CA · Est. 2012
            </div>
          </div>
        </div>
        <div style={{
          display: 'flex',
          gap: isMobile ? 14 : 28,
          flexWrap: 'wrap',
          fontFamily: A_FONT_MONO,
          fontSize: 11,
          letterSpacing: isMobile ? 1 : 2,
          textTransform: 'uppercase',
        }}>
          <a href="#work" style={{ color: A_COLORS.ink, textDecoration: 'none', borderBottom: `1.5px solid ${A_COLORS.rust}` }}>Work</a>
          <a href="#outlets" style={{ color: A_COLORS.ink, textDecoration: 'none' }}>Outlets</a>
          <a href="#appearances" style={{ color: A_COLORS.ink, textDecoration: 'none' }}>On Air</a>
          <a href="#press" style={{ color: A_COLORS.ink, textDecoration: 'none' }}>Press</a>
          <a href="#contact" style={{ color: A_COLORS.ink, textDecoration: 'none' }}>Contact</a>
        </div>
      </div>

      {/* ==== HERO ==== */}
      <div style={{
        padding: `${isMobile ? 36 : 56}px ${pagePadX}px ${isMobile ? 30 : 40}px`,
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1.1fr 0.9fr' : '1.35fr 1fr',
        gap: isMobile ? 32 : 56,
        borderBottom: `1px solid ${A_COLORS.rule}`,
      }}>
        <div>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: isMobile ? 2 : 3, color: A_COLORS.rust, textTransform: 'uppercase', marginBottom: 14 }}>
            ◆ Writer · Editor · Marine
          </div>
          <h1 style={{
            fontFamily: A_FONT_SERIF, fontWeight: 700, fontSize: heroTitleSize, lineHeight: 0.95,
            margin: 0, letterSpacing: -2, color: A_COLORS.ink,
          }}>
            Paul<br/>Szoldra
          </h1>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 12, color: A_COLORS.faded, marginTop: 6, letterSpacing: 1 }}>
            /ZOAL-druh/
          </div>
          <p style={{
            fontFamily: A_FONT_SERIF, fontSize: isMobile ? 21 : 24, lineHeight: 1.45, color: A_COLORS.ink,
            marginTop: isMobile ? 24 : 32, maxWidth: 520, fontStyle: 'italic', fontWeight: 400,
          }}>
            National security writer & editor with more than a decade chasing
            stories about the military, the people who serve, and the wars
            they're sent to fight.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: isMobile ? 24 : 32, flexWrap: 'wrap' }}>
            {[
              ['Task & Purpose', 'Editor-in-Chief'],
              ['Duffel Blog', 'Founder'],
              ['Business Insider', 'Editor'],
              ['Tech Insider', 'Correspondent'],
              ['We Are The Mighty', 'Executive Editor'],
            ].map(([o, r]) => (
              <div key={o} style={{
                border: `1px solid ${A_COLORS.ink}`, padding: '7px 12px',
                fontFamily: A_FONT_MONO, fontSize: isMobile ? 9 : 10, letterSpacing: isMobile ? 1 : 1.5, textTransform: 'uppercase',
                background: A_COLORS.paper,
              }}>
                <span style={{ color: A_COLORS.rust }}>{r}</span>
                <span style={{ color: A_COLORS.faded, margin: '0 6px' }}>·</span>
                <span>{o}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Hero portrait — Polaroid treatment */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'flex-start', paddingTop: isMobile ? 0 : 10, order: isMobile ? -1 : 0 }}>
          <div style={{
            background: '#fbf9f2', padding: isMobile ? '12px 12px 34px' : '16px 16px 48px', transform: isMobile ? 'rotate(0deg)' : 'rotate(2deg)',
            boxShadow: '0 10px 30px rgba(30,25,15,0.18), 0 2px 6px rgba(30,25,15,0.15)',
            position: 'relative', zIndex: 2,
            width: isMobile ? 'min(100%, 330px)' : 'auto',
          }}>
            <img src="assets/paul-office.jpeg" style={{ width: isMobile ? '100%' : 320, height: isMobile ? 360 : 420, objectFit: 'cover', display: 'block', filter: 'saturate(0.88) contrast(1.02)' }} />
            <div style={{
              position: 'absolute', bottom: 14, left: 0, right: 0, textAlign: 'center',
              fontFamily: '"Caveat", "Kalam", cursive', fontSize: isMobile ? 16 : 18, color: A_COLORS.ink,
            }}>
            </div>
          </div>
          {/* stencil callout */}
          {!isMobile && <div style={{
            position: 'absolute', top: 10, left: -20,
            fontFamily: A_FONT_STENCIL, fontSize: 60, color: A_COLORS.olive,
            opacity: 0.13, letterSpacing: 4, lineHeight: 0.9, transform: 'rotate(-4deg)',
            pointerEvents: 'none',
          }}>PRESS<br/>CORPS</div>}
        </div>
      </div>

      {/* ==== FACTS BAND ==== */}
      <div style={{
        background: A_COLORS.oliveD, color: A_COLORS.paper, padding: `${isMobile ? 24 : 28}px ${pagePadX}px`,
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${factsColumns}, minmax(0, 1fr))`,
          gap: isMobile ? 20 : 36,
          justifyContent: 'center',
          alignItems: 'start',
          maxWidth: 1080,
          margin: '0 auto',
        }}>
          {d.facts.map(([k, v]) => (
            <div key={k} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 40 : 48, fontWeight: 700, letterSpacing: -1, color: '#f5f1e3' }}>{v}</div>
              <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: '#bbb19a', marginTop: 2 }}>{k}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ==== BIO / ABOUT ==== */}
      <div id="about" style={{ padding: `${sectionPadY}px ${pagePadX}px`, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: isMobile ? 32 : 60, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 01 · About</div>
          <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 36 : 44, lineHeight: 1, margin: '16px 0 0', fontWeight: 700, color: A_COLORS.ink, letterSpacing: -0.8 }}>
            From the Marine Corps<br/>to the press corps.
          </h2>
          {/* Marine supporting photo */}
          <div style={{
            marginTop: 28, background: '#1d1f17', padding: 4,
            border: `1px solid ${A_COLORS.ink}`, position: 'relative',
          }}>
            <img src="assets/paul-marine.jpg" style={{ width: '100%', height: isMobile ? 220 : 240, objectFit: 'cover', display: 'block', filter: 'sepia(0.15) contrast(1.05)' }} />
            <div style={{
              position: 'absolute', bottom: 10, left: 10, right: 10,
              fontFamily: A_FONT_MONO, fontSize: isMobile ? 8 : 9, letterSpacing: isMobile ? 1 : 2,
              color: '#d4cfa8', textTransform: 'uppercase',
              textShadow: '0 1px 2px rgba(0,0,0,0.8)',
            }}>
              LCPL SZOLDRA · KORENGAL VALLEY, AFGHANISTAN · c. 2005
            </div>
          </div>
        </div>
        <div style={{ fontFamily: A_FONT_SERIF, fontSize: bodySerifSize, lineHeight: 1.55, color: A_COLORS.ink }}>
          <p style={{ marginTop: 0 }}>
            {!isMobile && <span style={{ float: 'left', fontFamily: A_FONT_SERIF, fontSize: 84, lineHeight: 0.82, fontWeight: 700, marginRight: 10, marginTop: 4, color: A_COLORS.olive }}>P</span>}
            {isMobile ? 'Paul' : 'aul'} Szoldra is a reporter and editor focused on national security,
            the military, and veterans. He spent four years as the Editor in
            Chief of <em>Task & Purpose</em>, where he led a small team that
            grew the publication into a mainstay of military journalism with
            more than five million monthly readers.
          </p>
          <p>
            Before journalism, he spent eight years in the Marine Corps
            infantry — deploying to the Indo-Pacific and Afghanistan and
            training thousands of young Marines as a combat instructor at the
            School of Infantry. His work has been cited by the Department of
            Defense, U.S. Army, and the House Armed Services Committee, and
            featured in <em>The Wall Street Journal</em>, <em>The Washington
            Post</em>, MSNBC, and CBS News.
          </p>
          <p>
            He also founded and edits <em>Duffel Blog</em>, the
            military's satire newsletter of record since 2012 — once described
            by CBS News as the best military satire since Joseph Heller's Catch-22.
          </p>
          <div style={{
            marginTop: 28, padding: isMobile ? '16px 18px' : '18px 22px', borderLeft: `3px solid ${A_COLORS.rust}`,
            background: 'rgba(138,58,28,0.05)', fontFamily: A_FONT_MONO, fontSize: isMobile ? 12 : 13,
            letterSpacing: 0.5, color: A_COLORS.faded, lineHeight: 1.6,
          }}>
            <div style={{ color: A_COLORS.rust, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 6 }}>On the record →</div>
            "My editorial philosophy is to find and tell the stories that actually matter — that are actually going to move the ball down the playing field. 
            I don’t want to focus on the larger things and miss the smaller things that are much more important."
          </div>
        </div>
      </div>

      {/* ==== SELECTED WORK ==== */}
      <div id="work" style={{ padding: `${sectionPadY}px ${pagePadX}px`, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div style={{ display: 'flex', alignItems: isMobile ? 'flex-start' : 'baseline', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 0, marginBottom: 44 }}>
          <div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 02 · Dispatches</div>
            <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: sectionTitleSize, margin: '14px 0 0', fontWeight: 700, letterSpacing: -1.2 }}>
              Selected work
            </h2>
          </div>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.faded, letterSpacing: 1.5, textTransform: 'uppercase' }}>
            {d.selectedWork.length} pieces · more on request
          </div>
        </div>
        <div>
          {d.selectedWork.map((piece, i) => (
            <a key={i} href={piece.url} target="_blank" rel="noopener"
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              style={{
                display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '60px 120px 1fr 140px',
                gap: isMobile ? 8 : 24, alignItems: 'baseline',
                padding: '22px 0', borderTop: `1px solid ${A_COLORS.rule}`,
                textDecoration: 'none', color: A_COLORS.ink,
                transition: 'background 0.15s, padding 0.15s',
                background: hovered === i ? 'rgba(61,74,42,0.05)' : 'transparent',
                paddingLeft: !isMobile && hovered === i ? 12 : 0,
              }}>
              {isMobile ? (
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase' }}>
                  <div style={{ color: A_COLORS.faded }}>№{String(i + 1).padStart(2, '0')}</div>
                  <div style={{ color: A_COLORS.rust }}>{piece.tag}</div>
                </div>
              ) : (
                <>
                  <div style={{ fontFamily: A_FONT_MONO, fontSize: 12, color: A_COLORS.faded, letterSpacing: 1 }}>
                    №{String(i + 1).padStart(2, '0')}
                  </div>
                  <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: A_COLORS.rust }}>
                    {piece.tag}
                  </div>
                </>
              )}
              <div style={{
                fontFamily: A_FONT_SERIF, fontSize: isMobile ? 20 : 22, lineHeight: 1.3, fontWeight: 500,
                color: hovered === i ? A_COLORS.olive : A_COLORS.ink, transition: 'color 0.15s',
              }}>
                {piece.title}
                {!isMobile && hovered === i && <span style={{ marginLeft: 10, color: A_COLORS.rust }}>↗</span>}
              </div>
              <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.faded, letterSpacing: 0.5, textAlign: isMobile ? 'left' : 'right' }}>
                <div style={{ color: A_COLORS.ink, fontWeight: 600 }}>{piece.outlet}</div>
                <div>{piece.date}</div>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* ==== OUTLETS ==== */}
      <div id="outlets" style={{ padding: `${sectionPadY}px ${pagePadX}px`, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 03 · Stations</div>
        <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: sectionTitleSize, margin: '14px 0 44px', fontWeight: 700, letterSpacing: -1.2 }}>
          Where I've filed from
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 0 }}>
          {d.outlets.map((o, i) => (
            <div key={o.name} style={{
              padding: '24px 28px', borderTop: `1px solid ${A_COLORS.rule}`,
              borderRight: !isMobile && ((isTablet ? (i + 1) % 2 !== 0 : (i + 1) % 3 !== 0)) ? `1px solid ${A_COLORS.rule}` : 'none',
              borderBottom: `1px solid ${A_COLORS.rule}`,
            }}>
              <div style={{ fontFamily: A_FONT_SERIF, fontSize: 26, fontWeight: 700, letterSpacing: -0.4, color: A_COLORS.ink }}>
                {o.name}
              </div>
              <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.olive, letterSpacing: 1, textTransform: 'uppercase', marginTop: 6 }}>
                {o.role}
              </div>
              <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.faded, marginTop: 2 }}>
                {o.years}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 48 }}>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, color: A_COLORS.faded, textTransform: 'uppercase', marginBottom: 14 }}>
            Work cited / featured in
          </div>
          <div style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 19 : 22, lineHeight: 1.6, color: A_COLORS.ink, columnCount: isMobile ? 1 : 2, columnGap: 48 }}>
            {d.mentions.map((m, i) => (
              <div key={m} style={{ breakInside: 'avoid' }}>
                <span style={{ color: A_COLORS.rust, fontFamily: A_FONT_MONO, fontSize: 12, marginRight: 10 }}>◆</span>
                {m}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ==== ON AIR / IN PRINT ==== */}
      <div id="appearances" style={{ padding: `${sectionPadY}px ${pagePadX}px`, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div style={{ display: 'flex', alignItems: isMobile ? 'flex-start' : 'baseline', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 0, marginBottom: 36 }}>
          <div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 04 · On air · On screen</div>
            <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: sectionTitleSize, margin: '14px 0 0', fontWeight: 700, letterSpacing: -1.2 }}>
              Media appearances
            </h2>
          </div>
          <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, color: A_COLORS.faded, letterSpacing: 1.5, textTransform: 'uppercase', maxWidth: 320, textAlign: isMobile ? 'left' : 'right', lineHeight: 1.5 }}>
            Documentaries, interviews, and producing credits
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 24 }}>
          {d.appearances.map((a, i) => (
            <a key={i} href={a.url} target="_blank" rel="noopener" style={{
              textDecoration: 'none', color: 'inherit',
              border: `1px solid ${A_COLORS.ink}`, background: A_COLORS.paper,
              padding: 0, display: 'flex', flexDirection: 'column',
              position: 'relative',
            }}>
              {/* film-strip top bar */}
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '10px 16px', borderBottom: `1px solid ${A_COLORS.ink}`,
                background: A_COLORS.oliveD, color: A_COLORS.paper,
              }}>
                <span style={{ fontFamily: A_FONT_STENCIL, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase' }}>
                  {a.type}
                </span>
                <span style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, color: '#c9bfa5' }}>
                  REEL №{String(i + 1).padStart(2, '0')}
                </span>
              </div>
              <div style={{ padding: '22px 22px 24px' }}>
                <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, color: A_COLORS.rust, textTransform: 'uppercase', marginBottom: 8 }}>
                  {a.where}
                </div>
                <div style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 23 : 26, fontWeight: 700, letterSpacing: -0.4, color: A_COLORS.ink, lineHeight: 1.15 }}>
                  {a.title}
                </div>
                <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: 1, color: A_COLORS.olive, textTransform: 'uppercase', marginTop: 10 }}>
                  {a.role}
                </div>
                <p style={{ fontFamily: A_FONT_SERIF, fontSize: 15, lineHeight: 1.5, color: A_COLORS.faded, margin: '14px 0 0', fontStyle: 'italic' }}>
                  {a.note}
                </p>
                <div style={{ marginTop: 18, fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: A_COLORS.rust, textTransform: 'uppercase' }}>
                  Watch ↗
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* ==== PRESS / QUOTES ==== */}
      <div id="press" style={{ padding: `${sectionPadY}px ${pagePadX}px`, background: A_COLORS.paperDark, borderBottom: `1px solid ${A_COLORS.rule}` }}>
        <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: A_COLORS.rust, textTransform: 'uppercase' }}>§ 05 · On the record</div>
        <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: sectionTitleSize, margin: '14px 0 44px', fontWeight: 700, letterSpacing: -1.2 }}>
          What others say
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 32 }}>
          {d.quotes.slice(0, 4).map((q, i) => (
            <div key={i} style={{
              padding: isMobile ? '24px 22px' : '28px 32px', background: A_COLORS.paper,
              border: `1px solid ${A_COLORS.ink}`,
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: -14, left: 24,
                background: A_COLORS.paperDark, padding: '0 10px',
                fontFamily: A_FONT_STENCIL, fontSize: 36, color: A_COLORS.olive, lineHeight: 1,
              }}>"</div>
              <div style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 17 : 19, lineHeight: 1.5, fontStyle: 'italic', color: A_COLORS.ink }}>
                {q.text}
              </div>
              <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 24, height: 1, background: A_COLORS.rust }} />
                <div style={{ fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: 1, textTransform: 'uppercase', lineHeight: 1.5 }}>
                  <span style={{ color: A_COLORS.ink, fontWeight: 600 }}>{q.who}</span>
                  <span style={{ color: A_COLORS.faded, marginLeft: 6 }}>· {q.where}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ==== CONTACT ==== */}
      <div id="contact" style={{ padding: `${isMobile ? 56 : 80}px ${pagePadX}px`, background: A_COLORS.oliveD, color: A_COLORS.paper }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 60, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 3, color: '#c9bfa5', textTransform: 'uppercase' }}>§ 06 · Transmit</div>
            <h2 style={{ fontFamily: A_FONT_SERIF, fontSize: contactTitleSize, margin: '14px 0 0', fontWeight: 700, letterSpacing: -1.6, color: '#f5f1e3', lineHeight: 0.95 }}>
              Got a story?
            </h2>
            <p style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 18 : 20, lineHeight: 1.5, color: '#d4cfa8', marginTop: 20, maxWidth: 420 }}>
              Tips, assignments, bookings, speaking, or just want to send me a
              hot takes? Feel free to reach out.
            </p>
          </div>
          <div>
            {[
              ['E-mail', d.email, `mailto:${d.email}`],
              ['Bluesky', '@paulszoldra.com', d.bluesky],
              ['LinkedIn', '/in/paulszoldra', d.linkedin],
            ].map(([k, v, url]) => (
              <a key={k} href={url} target="_blank" rel="noopener" style={{
                display: 'flex', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'baseline',
                flexDirection: isMobile ? 'column' : 'row',
                gap: isMobile ? 8 : 16,
                padding: '18px 0', borderBottom: `1px solid rgba(245,241,227,0.18)`,
                textDecoration: 'none', color: 'inherit',
              }}>
                <span style={{ fontFamily: A_FONT_MONO, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: '#c9bfa5' }}>{k}</span>
                <span style={{ fontFamily: A_FONT_SERIF, fontSize: isMobile ? 20 : 22, color: '#f5f1e3', wordBreak: 'break-word' }}>{v} <span style={{ color: '#a38b5a' }}>↗</span></span>
              </a>
            ))}
          </div>
        </div>
        <div style={{
          marginTop: 64, paddingTop: 24, borderTop: '1px solid rgba(245,241,227,0.18)',
          display: 'flex', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 10 : 24,
          fontFamily: A_FONT_MONO, fontSize: 10, letterSpacing: 2, color: '#a39972', textTransform: 'uppercase',
        }}>
          <span>© {new Date().getFullYear()} Paul Szoldra · All rights reserved</span>
          <span>—— END OF DISPATCH ——</span>
          <span>Semper Fidelis</span>
        </div>
      </div>
    </div>
  );
}

window.FieldNotesPortfolio = FieldNotesPortfolio;