<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>FIELD UNIT 04 // INSTRUMENT FOR THE LEGIBLE WEB</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --paper: #F4F4F0;
      --paper-2: #EAE8E3;
      --ink: #060606;
      --ink-soft: #1A1A18;
      --hazard: #E61919;
      --rule: #060606;
      --display: 'Archivo Black', 'Neue Haas Grotesk', 'Inter', sans-serif;
      --sans: 'Archivo', 'Inter', system-ui, sans-serif;
      --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "tnum", "ss01";
    }
    a { color: inherit; text-decoration: none; }
    a:hover { background: var(--ink); color: var(--paper); }

    .mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
    .mono-md { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
    .red { color: var(--hazard); }
    .ink { color: var(--ink); }

    hr.rule { border: 0; border-top: 1px solid var(--ink); margin: 0; }
    hr.thick { border: 0; border-top: 4px solid var(--ink); margin: 0; }
    hr.hazard { border: 0; border-top: 1px solid var(--hazard); margin: 0; }

    /* ========= TOP REGISTER STRIP ========= */
    .strip {
      border-top: 1px solid var(--ink);
      border-bottom: 1px solid var(--ink);
      padding: 8px 22px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      gap: 22px;
      font-family: var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 11px;
    }
    .strip > div { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; }
    .strip b { color: var(--ink); }
    .strip span { color: var(--ink-soft); }

    /* ========= NAV ========= */
    .nav {
      padding: 14px 22px;
      display: flex; align-items: baseline; justify-content: space-between;
      border-bottom: 4px solid var(--ink);
    }
    .brand {
      font-family: var(--display); font-size: 22px; letter-spacing: -0.04em; line-height: 1; text-transform: uppercase;
    }
    .brand sup { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; font-weight: 400; vertical-align: top; margin-left: 4px; color: var(--hazard); }
    .nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
    .nav ul a {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      padding: 4px 7px; border: 1px solid var(--ink);
    }
    .nav .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

    /* ========= HERO ========= */
    .hero {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      border-bottom: 1px solid var(--ink);
    }
    .hero .num {
      font-family: var(--display);
      font-size: clamp(220px, 36vw, 540px);
      line-height: 0.78;
      letter-spacing: -0.07em;
      padding: 24px 0 0 22px;
      color: var(--ink);
      position: relative;
      overflow: visible;
    }
    .hero .num::after {
      content: '®';
      font-size: 0.18em; letter-spacing: 0; vertical-align: top;
      color: var(--hazard); margin-left: 6px;
    }
    .hero .meta-col {
      border-left: 1px solid var(--ink);
      padding: 22px;
      display: flex; flex-direction: column; gap: 22px;
      font-family: var(--mono);
    }
    .hero .meta-col h2 {
      font-family: var(--display); font-size: clamp(38px, 4.5vw, 64px); line-height: 0.9; letter-spacing: -0.03em;
      text-transform: uppercase; margin: 0;
    }
    .hero .meta-col p { font-family: var(--sans); font-size: 14px; line-height: 1.55; margin: 0; max-width: 38ch; text-align: justify; }
    .meta-row { display: grid; grid-template-columns: 8ch 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ink); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
    .meta-row b { color: var(--hazard); font-weight: 500; }

    .ascii-frame {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      display: flex; align-items: center; gap: 10px;
      padding: 6px 0; color: var(--ink);
    }
    .ascii-frame::before { content: '['; color: var(--hazard); }
    .ascii-frame::after { content: ']'; color: var(--hazard); }

    /* ========= ABSTRACT / LEAD ========= */
    .abstract {
      padding: 56px 22px;
      display: grid;
      grid-template-columns: 8ch 1fr 30ch;
      gap: 32px;
      border-bottom: 1px solid var(--ink);
    }
    .abstract .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hazard); padding-top: 6px; }
    .abstract .body {
      font-family: var(--sans); font-size: 22px; line-height: 1.4; letter-spacing: -0.012em;
      max-width: 50ch;
    }
    .abstract .body span.drop {
      font-family: var(--display); font-size: 64px; line-height: 0.85; float: left;
      margin: 4px 10px -4px 0; letter-spacing: -0.04em; text-transform: uppercase;
    }
    .abstract .credits { font-family: var(--mono); font-size: 10.5px; line-height: 1.7; text-transform: uppercase; letter-spacing: 0.1em; }
    .abstract .credits hr { margin: 8px 0; border: 0; border-top: 1px solid var(--ink); }
    .abstract .credits b { color: var(--hazard); font-weight: 500; }

    /* ========= MANIFEST (numbered theses) ========= */
    .manifest { padding: 56px 22px; border-bottom: 4px solid var(--ink); }
    .manifest h2 {
      font-family: var(--display);
      font-size: clamp(56px, 8vw, 120px);
      line-height: 0.86;
      letter-spacing: -0.05em;
      text-transform: uppercase;
      margin: 0 0 28px;
      max-width: 16ch;
    }
    .manifest h2 em { font-style: normal; color: var(--hazard); }
    .thesis-list { display: grid; grid-template-columns: 1fr; }
    .thesis {
      display: grid;
      grid-template-columns: 6ch 1fr 14ch;
      gap: 32px;
      padding: 22px 0;
      border-top: 1px solid var(--ink);
      align-items: baseline;
    }
    .thesis:last-child { border-bottom: 1px solid var(--ink); }
    .thesis .num {
      font-family: var(--display); font-size: 44px; line-height: 0.9; letter-spacing: -0.04em;
    }
    .thesis .num small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; vertical-align: top; }
    .thesis h3 {
      font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.05;
      letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 8px; max-width: 28ch;
    }
    .thesis p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 56ch; color: var(--ink-soft); }
    .thesis .tag {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      text-align: right; color: var(--hazard);
    }

    /* ========= INDEX (1px grid) ========= */
    .index-section { border-bottom: 1px solid var(--ink); }
    .index-head {
      padding: 22px;
      display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
      border-bottom: 1px solid var(--ink);
    }
    .index-head h2 { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; text-transform: uppercase; line-height: 1; margin: 0; }
    .index-head .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
    .index-grid {
      display: grid;
      grid-template-columns: 4ch 1.3fr 1fr 1fr 0.8fr 0.8fr;
      gap: 1px;
      background: var(--ink);
      font-family: var(--mono);
      font-size: 11.5px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .index-grid > div { background: var(--paper); padding: 12px 14px; }
    .index-grid .header { background: var(--ink); color: var(--paper); font-weight: 500; }
    .index-grid .right { text-align: right; }
    .index-grid .red { color: var(--hazard); }

    /* ========= SPECIMEN ========= */
    .specimen { border-bottom: 4px solid var(--ink); padding: 56px 22px; }
    .specimen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
    .specimen-head h2 { font-family: var(--display); font-size: 28px; letter-spacing: -0.03em; text-transform: uppercase; margin: 0; line-height: 1; }
    .specimen-head .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
    .spec-row {
      display: grid;
      grid-template-columns: 12ch 1fr 12ch;
      align-items: baseline;
      gap: 22px;
      padding: 14px 0;
      border-bottom: 1px solid var(--ink);
    }
    .spec-row .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hazard); }
    .spec-row .glyph { font-family: var(--display); letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; }
    .spec-row .glyph.s1 { font-size: clamp(36px, 5vw, 64px); }
    .spec-row .glyph.s2 { font-size: clamp(60px, 9vw, 120px); }
    .spec-row .glyph.s3 { font-size: clamp(120px, 16vw, 220px); }
    .spec-row .stats { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; line-height: 1.6; }

    /* ========= ALERT BLOCK ========= */
    .alert {
      border-bottom: 1px solid var(--ink);
      padding: 22px;
      display: grid;
      grid-template-columns: 18ch 1fr;
      gap: 28px;
      background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(230,25,25,0.06) 14px 28px);
    }
    .alert .label { font-family: var(--display); font-size: 28px; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; color: var(--hazard); border: 2px solid var(--hazard); padding: 10px 12px; align-self: start; }
    .alert .body { font-family: var(--sans); font-size: 15.5px; line-height: 1.5; max-width: 64ch; }
    .alert .body strong { background: var(--ink); color: var(--paper); padding: 0 4px; font-weight: 500; }

    /* ========= COLOPHON ========= */
    .colophon {
      padding: 32px 22px 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      line-height: 1.85;
      border-top: 1px solid var(--ink);
    }
    .colophon dl { display: grid; grid-template-columns: 16ch 1fr; gap: 6px 16px; margin: 0; }
    .colophon dt { color: var(--hazard); }
    .colophon dd { margin: 0; }
    .colophon .credit { font-family: var(--display); font-size: 38px; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; color: var(--ink); }
    .colophon .credit small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; margin-top: 8px; color: var(--ink-soft); }

    /* ========= RESPONSIVE ========= */
    @media (max-width: 880px) {
      .strip { grid-template-columns: 1fr 1fr; gap: 8px 22px; }
      .strip > div:nth-child(n+5) { display: none; }
      .nav ul { display: none; }
      .hero { grid-template-columns: 1fr; }
      .hero .num { font-size: 36vw; }
      .hero .meta-col { border-left: none; border-top: 1px solid var(--ink); }
      .abstract { grid-template-columns: 1fr; }
      .thesis { grid-template-columns: 6ch 1fr; }
      .thesis .tag { display: none; }
      .index-grid { grid-template-columns: 4ch 1fr 1fr; font-size: 10px; }
      .index-grid > div:nth-child(6n+4),
      .index-grid > div:nth-child(6n+5),
      .index-grid > div:nth-child(6n) { display: none; }
      .alert { grid-template-columns: 1fr; }
      .colophon { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="strip">
    <div><b>VOL.</b><span>04 / FIELD UNIT</span></div>
    <div><b>ISS.</b><span>2026 · MAY · QRTLY</span></div>
    <div><b>LAT.</b><span>44.8404° N</span></div>
    <div><b>LON.</b><span>−0.5805° W</span></div>
    <div><b>STATUS</b><span class="red">⬤ TRANSMITTING</span></div>
  </div>

  <header class="nav" data-od-id="topnav">
    <span class="brand">FIELD/UNIT/04<sup>® EST 2026</sup></span>
    <ul>
      <li><a href="#abstract">[ ABSTRACT ]</a></li>
      <li><a href="#manifest">[ MANIFEST ]</a></li>
      <li><a href="#index">[ INDEX ]</a></li>
      <li><a href="#specimen">[ SPECIMEN ]</a></li>
    </ul>
    <span class="meta">FILE NO. <span class="red">04 / 0731</span></span>
  </header>

  <section class="hero" data-od-id="hero">
    <div class="num">04</div>
    <div class="meta-col">
      <span class="ascii-frame">PRINTED MATTER · FOR THE WEB</span>
      <h2>Instrument for the&nbsp;legible&nbsp;web<span class="red">.</span></h2>
      <p>Field Unit 04 is a quarterly instrument: thirty-two pages of writing, type, infrastructure photography, and notes from the workshops of practitioners who would rather measure twice than ship a parallax. Issued in print &amp; on this surface — set in Archivo Black &amp; JetBrains Mono.</p>
      <div>
        <div class="meta-row"><b>EDITOR</b><span>Q. ALBRECHT</span></div>
        <div class="meta-row"><b>PRESS</b><span>ATELIER NORD-OUEST</span></div>
        <div class="meta-row"><b>STOCK</b><span>FEDRIGONI ARENA · 120GSM</span></div>
        <div class="meta-row"><b>BIND</b><span>SECTION-SEWN · OPEN SPINE</span></div>
        <div class="meta-row"><b>EDITION</b><span>2,400 / NUMBERED</span></div>
      </div>
    </div>
  </section>

  <section class="abstract" id="abstract" data-od-id="abstract">
    <div class="label">[ ABSTRACT ]<br>///</div>
    <div class="body">
      <span class="drop">T</span>he web has stopped reading like a document and started reading like a billboard. This issue is a small protest — practical, technical, and stubbornly print-shaped — collecting fourteen pieces by writers, typographers, and engineers who still believe a page can hold a line of thought without an animation tax.
    </div>
    <div class="credits">
      <hr>
      <b>CONTRIBUTORS</b><br>
      Q. ALBRECHT (FR)<br>
      H. NAITŌ (JP)<br>
      M. ANDREJEVIĆ (HR)<br>
      P. NWACHUKWU (NG)<br>
      L. ARROYAVE (CO)<br>
      <hr>
      <b>FILED UNDER</b><br>
      Typography · Print<br>
      Web · Editorial<br>
      Infrastructure
    </div>
  </section>

  <section class="manifest" id="manifest" data-od-id="manifest">
    <h2>Six theses on a <em>quieter</em> web<span class="red">.</span></h2>
    <div class="thesis-list">
      <div class="thesis">
        <div class="num">01<small>/06</small></div>
        <div>
          <h3>The page is not a stage. It is a desk.</h3>
          <p>A reader sits at it. They do not need a curtain. They need a margin, a column measure they trust, and the dignity of being trusted with a paragraph longer than nine words.</p>
        </div>
        <div class="tag">>>> TYPOGRAPHY</div>
      </div>
      <div class="thesis">
        <div class="num">02<small>/06</small></div>
        <div>
          <h3>White space is not waste. It is the wage of attention.</h3>
          <p>Compress everything into a viewport and the reader pays in tab-switches. Build the page like a book and they pay in time, which is what you wanted.</p>
        </div>
        <div class="tag">>>> RHYTHM</div>
      </div>
      <div class="thesis">
        <div class="num">03<small>/06</small></div>
        <div>
          <h3>If the type is not the strongest signal on the page, the page is wrong.</h3>
          <p>Image, motion, gradient, glow — all answer to the line. If the line cannot survive a 320-pixel screen at noon, neither can the rest of the project.</p>
        </div>
        <div class="tag">>>> HIERARCHY</div>
      </div>
      <div class="thesis">
        <div class="num">04<small>/06</small></div>
        <div>
          <h3>A grid is a contract, not a costume.</h3>
          <p>You either keep the contract — or you break it once, deliberately, with the loudest line on the page. Drift through it and the reader stops believing in the structure.</p>
        </div>
        <div class="tag">>>> STRUCTURE</div>
      </div>
      <div class="thesis">
        <div class="num">05<small>/06</small></div>
        <div>
          <h3>Motion is a citation, not a chorus.</h3>
          <p>If a thing must move, it must move because the body of the work calls it forth. Otherwise it is the equivalent of underlining every word — a defence against being read.</p>
        </div>
        <div class="tag">>>> MOTION</div>
      </div>
      <div class="thesis">
        <div class="num">06<small>/06</small></div>
        <div>
          <h3>The button is the only ornament you are allowed.</h3>
          <p>Make it weigh something. Make it the thing the reader reaches for. Then leave the rest of the page alone.</p>
        </div>
        <div class="tag">>>> COMPONENTS</div>
      </div>
    </div>
  </section>

  <section class="index-section" id="index" data-od-id="index">
    <div class="index-head">
      <h2>Index of issue 04 <span class="red">///</span></h2>
      <span class="meta">14 ENTRIES · PP. 8 — 96</span>
    </div>
    <div class="index-grid">
      <div class="header">№</div><div class="header">TITLE</div><div class="header">AUTHOR</div><div class="header">DEPT.</div><div class="header right">PP.</div><div class="header right">TIME</div>

      <div>01</div><div>SET IN COLD METAL</div><div>H. Naitō</div><div class="red">TYPE</div><div class="right">8 — 14</div><div class="right">12 MIN</div>
      <div>02</div><div>A YEAR WITHOUT A FRAMEWORK</div><div>Q. Albrecht</div><div>WEB</div><div class="right">15 — 23</div><div class="right">18 MIN</div>
      <div>03</div><div>NOTES FROM A LETTERPRESS</div><div>M. Andrejević</div><div class="red">TYPE</div><div class="right">24 — 31</div><div class="right">14 MIN</div>
      <div>04</div><div>THE LATENCY DIET</div><div>P. Nwachukwu</div><div>INFRA</div><div class="right">32 — 40</div><div class="right">22 MIN</div>
      <div>05</div><div>EVERY PAGE IS A LETTER</div><div>L. Arroyave</div><div class="red">EDIT</div><div class="right">41 — 47</div><div class="right">11 MIN</div>
      <div>06</div><div>FILE FORMATS AS POLITICS</div><div>Q. Albrecht</div><div>INFRA</div><div class="right">48 — 56</div><div class="right">19 MIN</div>
      <div>07</div><div>THE COLUMN MEASURE</div><div>H. Naitō</div><div class="red">TYPE</div><div class="right">57 — 60</div><div class="right">7 MIN</div>
      <div>08</div><div>WORKING IN PUBLIC, QUIETLY</div><div>L. Arroyave</div><div class="red">EDIT</div><div class="right">61 — 68</div><div class="right">15 MIN</div>
    </div>
  </section>

  <section class="specimen" id="specimen" data-od-id="specimen">
    <div class="specimen-head">
      <h2>Specimen ///</h2>
      <span class="meta">ARCHIVO BLACK · 1 STYLE · 1 WEIGHT</span>
    </div>
    <div class="spec-row">
      <span class="label">36 / 64</span>
      <div class="glyph s1">A QUIET PAGE IS A LOUD ARGUMENT.</div>
      <div class="stats">tracking −0.04em<br>leading 0.95<br>case upper</div>
    </div>
    <div class="spec-row">
      <span class="label">60 / 120</span>
      <div class="glyph s2">PRINT THE WEB.</div>
      <div class="stats">tracking −0.05em<br>leading 0.88<br>case upper</div>
    </div>
    <div class="spec-row">
      <span class="label">120 / 220</span>
      <div class="glyph s3">04®</div>
      <div class="stats">tracking −0.06em<br>leading 0.78<br>register glyph</div>
    </div>
  </section>

  <section class="alert" data-od-id="alert">
    <div class="label">!! BUY<br>ISSUE 04</div>
    <div class="body">
      Issue 04 ships from the bindery on <strong>14 JUNE 2026</strong>. Pre-order at <strong>€18 / shipped</strong>, or subscribe to the four-issue ring at <strong>€60 / year</strong>. Pre-orders include the loose folio insert printed risograph, a 600-mm fold-out specimen poster, and the digital edition of every back-issue rendered to the same column measure. <span class="red">>>> PRE-ORDER · SHIP 14.JUN</span>
    </div>
  </section>

  <footer class="colophon" data-od-id="colophon">
    <dl>
      <dt>SET IN</dt><dd>Archivo Black · JetBrains Mono · Archivo</dd>
      <dt>PRESS</dt><dd>Atelier Nord-Ouest · Bordeaux</dd>
      <dt>PAPER</dt><dd>Fedrigoni Arena Smooth Extra White 120gsm</dd>
      <dt>BINDING</dt><dd>Section-sewn · open spine · 32pp</dd>
      <dt>EDITION</dt><dd>2,400 numbered · 14 lettered AP</dd>
      <dt>RIGHTS</dt><dd>CC BY-NC-ND 4.0 · except contributor work</dd>
    </dl>
    <div>
      <div class="credit">FIELD&nbsp;UNIT&nbsp;04<small>® / SET 2026 · BORDEAUX · FR / © FIELD UNIT EDITIONS</small></div>
    </div>
  </footer>
</body>
</html>
