<header class="thin-site-header">
  <a data-site-brand href="/">Northline Journal</a>
  <nav class="thin-navigation-menu" aria-label="Primary">
    <ul>
      <li><a href="/stories/" aria-current="page">Stories</a></li>
      <li><a href="/field-notes/">Field notes from cooperatives and independent workshops</a></li>
      <li><a href="/about/">About</a></li>
    </ul>
  </nav>
</header>

<section class="thin-hero" aria-labelledby="hero-title">
  <div class="thin-hero-copy">
    <p>Independent publishing</p>
    <h1 id="hero-title">Stories that travel farther than the feed</h1>
    <p>Long-form reporting, field notes, and conversations delivered without an algorithm deciding what matters.</p>
    <p class="thin-hero-actions">
      <a  href="#subscribe">Read independently</a>
      <a href="#latest">Browse the latest issue</a>
    </p>
  </div>
  <figure class="thin-hero-media" data-media-missing>
    <figcaption>Featured story image unavailable. Read the complete story below.</figcaption>
  </figure>
</section>

<aside class="thin-announcement" role="status" aria-labelledby="announcement-heading">
  <p class="thin-announcement-eyebrow">New release</p>
  <p id="announcement-heading"><strong>Issue 08 is available with expanded field reporting from five continents.</strong></p>
  <p class="thin-announcement-actions">
    <a  href="/issues/08/">Read issue 08</a>
    <a href="/archive/">Browse the archive</a>
  </p>
</aside>

<section aria-labelledby="trusted-heading">
  <h2 id="trusted-heading">Trusted by independent teams</h2>
  <ul class="thin-logo-cloud">
    <li><span>Aperture</span></li>
    <li><span>Fieldwork Cooperative</span></li>
    <li><span>Nordhimmel Gemeinschaftswerkstatt</span></li>
    <li><span>Northline</span></li>
  </ul>
</section>

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Built for durable publishing</h2>
  <div class="thin-feature-grid">
    <article class="thin-feature">
      <svg data-icon aria-hidden="true">
        <use href="/icons/sprite.svg#sparkles">
        </use>
      </svg>
      <h3>Theme driven</h3>
      <p>The same contract feels editorial in Neutral and expressive in Thin-Sky.</p>
    </article>
    <article class="thin-feature">
      <h3>Content first</h3>
      <p>A deliberately long localized explanation wraps without hiding the destination or changing source order.</p>
    </article>
  </div>
</section>

<section aria-labelledby="impact-heading">
  <h2 id="impact-heading">Measured impact</h2>
  <dl class="thin-marketing-stats">
    <div class="thin-stat">
      <dt>Reader-supported editions</dt>
      <dd><strong>128</strong></dd>
    </div>
    <div class="thin-stat">
      <dt>Countries and territories reached</dt>
      <dd><strong>42</strong></dd>
    </div>
    <div class="thin-stat">
      <dt>Required client-side scripts</dt>
      <dd><strong>0</strong></dd>
    </div>
  </dl>
</section>

<figure class="thin-testimonial">
  <blockquote>
    <p>“We changed the theme, not the reading order or the markup. The publication finally feels like ours without becoming fragile.”</p>
  </blockquote>
  <figcaption>Marisol Vega, editorial director at a deliberately long organization name</figcaption>
</figure>

<section class="thin-cta" aria-labelledby="cta-heading">
  <div>
    <h2 id="cta-heading">Own your next release</h2>
    <p>Publish a readable page today and add enhancement only when the task requires it.</p>
  </div>
  <a  href="#start">Start with semantic HTML</a>
</section>

<footer class="thin-site-footer">
  <div>
    <strong>Northline</strong>
    <p><small>Independent stories since 2018.</small></p>
  </div>
  <nav aria-label="About">
    <strong>About</strong>
    <ul>
      <li><a href="/mission/">Mission</a></li>
      <li><a href="/accessibility/">Accessibility</a></li>
    </ul>
  </nav>
  <nav aria-label="Legal">
    <strong>Legal</strong>
    <ul>
      <li><a href="/privacy/">Privacy</a></li>
      <li><a href="/terms/">Terms</a></li>
    </ul>
  </nav>
</footer>

<section aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Choose a publishing plan</h2>
  <div class="thin-pricing" data-align="rows">
    <article class="thin-price-card">
      <h3>Reader</h3>
      <p class="thin-price">
        <span aria-label="12 US dollars">$12</span>
        <small>/ month</small>
      </p>
      <ul>
        <li>One publication</li>
        <li>Email delivery</li>
      </ul>
      <a  href="/checkout/reader/">Choose Reader</a>
    </article>
    <article class="thin-price-card" data-featured>
      <h3>International cooperative plan with extended support</h3>
      <p class="thin-price">
        <span aria-label="1,299 euros">€1.299,00</span>
        <small>/ year</small>
      </p>
      <ul>
        <li>Localized editions</li>
        <li>Priority support</li>
      </ul>
      <a  href="/checkout/cooperative/">Choose Cooperative</a>
    </article>
  </div>
</section>

<section aria-labelledby="faq-heading">
  <h2 id="faq-heading">Frequently asked questions</h2>
  <div class="thin-faq">
    <details>
      <summary>Can I read every edition without enabling JavaScript?</summary>
      <p>Yes. Articles, navigation, forms, and disclosures remain browser-native.</p>
    </details>
    <details>
      <summary>How does an unusually long localized question wrap in a narrow reading column?</summary>
      <p>It wraps in normal flow without clipping the disclosure marker.</p>
    </details>
  </div>
</section>

<section class="thin-newsletter" id="subscribe" aria-labelledby="newsletter-heading">
  <div>
    <h2 id="newsletter-heading">Receive the field edition</h2>
    <p>One thoughtful issue each month. Unsubscribe with one link.</p>
  </div>
  <form action="/subscribe" method="post">
    <div class="thin-field">
      <label for="newsletter-email">Email address</label>
      <input class="thin-input" id="newsletter-email" name="email" type="email" autocomplete="email" required />
      <small id="newsletter-note">We use this only to send the edition.</small>
    </div>
    <button class="thin-button" type="submit">Subscribe</button>
  </form>
</section>

<section aria-labelledby="team-heading">
  <h2 id="team-heading">Editorial team</h2>
  <ul class="thin-team">
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Marisol Vega</strong>
            <span class="thin-team-role">Editorial director</span>
          </figcaption>
        </figure>
        <p>Reports on independent publishing from Lima and Berlin.</p>
        <p><a href="/team/marisol-vega/">Read Marisol's field notes</a></p>
      </article>
    </li>
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Rasmus Nordhimmel</strong>
            <span class="thin-team-role">Field correspondent working across an intentionally long localized beat</span>
          </figcaption>
        </figure>
        <p>Covers rural cooperatives and independent workshops across Northern Europe.</p>
        <p><a href="/team/rasmus-nordhimmel/">Read Rasmus's dispatches</a></p>
      </article>
    </li>
    <li>
      <article class="thin-team-member">
        <figure>
          <figcaption>
            <strong>Amara Okoye</strong>
            <span class="thin-team-role">Accessibility editor</span>
          </figcaption>
        </figure>
        <p>Reviews every issue for readable measure, semantic structure, and durable reading order.</p>
      </article>
    </li>
  </ul>
</section>

<section class="thin-contact" id="contact" aria-labelledby="contact-heading">
  <div>
    <h2 id="contact-heading">Reach the editorial desk</h2>
    <p>Responses within two working days. We use these fields only to answer your message.</p>
  </div>
  <form action="/contact" method="post">
    <div class="thin-field">
      <label for="contact-name">Full name</label>
      <input class="thin-input" id="contact-name" name="name" autocomplete="name" required />
    </div>
    <div class="thin-field">
      <label for="contact-email">Email address</label>
      <input class="thin-input" id="contact-email" name="email" type="email" autocomplete="email" required />
    </div>
    <div class="thin-field">
      <label for="contact-message">Message</label>
      <textarea class="thin-textarea" id="contact-message" name="message" rows="4" required>
      </textarea>
    </div>
    <button class="thin-button" type="submit">Send message</button>
  </form>
</section>

<section class="thin-content-section" aria-labelledby="field-heading">
  <div>
    <p>Field note 07</p>
    <h2 id="field-heading">Reporting beyond the available image</h2>
    <p>When media is delayed or unavailable, the narrative and its heading remain complete. This deliberately extended localized paragraph verifies a useful reading measure and resilient wrapping.</p>
    <p><a href="/stories/field-note-07/">Read the complete field note</a></p>
  </div>
  <figure data-media-missing>
    <figcaption>Photograph unavailable; the article does not depend on it.</figcaption>
  </figure>
</section>