---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base

### PAGE CONFIG ###
# Newsroom principles — news voice: a theme's frontmatter defaults are part
# of its identity (see docs/themes.md). The company_values key is universal.
company_values:
  - title: "Accuracy first"
    description: "Get it right before getting it first. Every fact is checked, every correction is published."
    icon: "shield-check"
  - title: "Independent always"
    description: "No advertiser, owner, or party gets a say in what we publish. Readers fund the reporting."
    icon: "scale-balanced"
  - title: "Show our work"
    description: "We cite sources, link documents, and explain how we know what we know."
    icon: "magnifying-glass"
  - title: "Readers before clicks"
    description: "We write to inform, not to bait. If a headline overpromises, we've failed."
    icon: "heart"
---

{% comment %}
  NEWSFLASH TEAM — the masthead page
  Same data contract as classy's team index (site.team loop, member.position/
  description/links, company_values, CEO-resolution Liquid for the mission
  attribution), presented as the newsroom: byline cards, an ink-slab charter,
  and principle cards.
{% endcomment %}

<!-- ============================================ -->
<!-- HERO -->
<!-- ============================================ -->
<section class="pb-4">
  <div class="container text-center" data-lazy="@class animation-slide-up">
    <span class="kicker mb-3">{% uj_icon "pen-nib", "me-1" %}The masthead</span>
    <h1 class="display-4 my-3">
      The people behind <span class="text-accent">the bylines</span>
    </h1>
    <p class="lead mb-0">
      Reporters, editors, and producers — the newsroom that puts {{ site.brand.name }} out every day.
    </p>
  </div>
</section>

<!-- ============================================ -->
<!-- THE NEWSROOM — byline cards -->
<!-- ============================================ -->
<section class="pt-0">
  <div class="container">
    <div class="section-head" data-lazy="@class animation-slide-up">
      <h2>The newsroom</h2>
      <span class="rule"></span>
    </div>

    <div class="row g-4 justify-content-center">
      {% for member in site.team %}
        <div class="col-lg-4 col-md-6" data-lazy="@class animation-slide-up">
          <div class="card h-100 p-4 text-center d-flex flex-column">
            <a href="{{ site.url }}{{ member.url }}" class="text-decoration-none d-inline-block mx-auto mb-3">
              <div class="avatar avatar-2xl">
                {%- uj_member member.id, "image-tag", class="rounded-circle object-fit-cover d-block team-member-image" -%}
              </div>
            </a>

            <h3 class="h4 mb-1">
              <a href="{{ site.url }}{{ member.url }}" class="text-decoration-none text-body">
                {%- uj_member member.id, "name" -%}
              </a>
            </h3>
            <span class="kicker justify-content-center mb-3">{{ member.member.position }}</span>
            <p class="text-body-secondary small mb-0 flex-grow-1">{{ member.member.description }}</p>

            {% iftruthy member.member.links %}
              <div class="d-flex justify-content-center gap-2 mt-3">
                {% for link in member.member.links %}
                  {% assign link_icon = link.id %}
                  {% if link.id == "website" %}{% assign link_icon = "globe" %}{% endif %}
                  <a href="{{ link.url }}" class="btn btn-outline-dark btn-sm avatar avatar-md rounded-circle d-flex align-items-center justify-content-center" target="_blank" rel="nofollow noopener" title="{{ link.title }}">
                    {% uj_icon link_icon, "" %}
                  </a>
                {% endfor %}
              </div>
            {% endiftruthy %}

            <div class="mt-3">
              <a href="{{ site.url }}{{ member.url }}" class="btn btn-outline-dark btn-sm">
                Read their work
              </a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- ============================================ -->
<!-- THE CHARTER — ink slab -->
<!-- ============================================ -->
<section class="pt-0">
  <div class="container">
    <div class="cta-panel" data-lazy="@class animation-slide-up">
      <div class="cta-rings" aria-hidden="true"></div>
      <div class="position-relative">
        <span class="kicker mb-3">{% uj_icon "quote-left", "me-1" %}The charter</span>
        <h2 class="cta-title">Report it right. <span class="text-accent">Write it sharp.</span></h2>
        <p class="cta-desc mb-4">
          "Our job is simple to say and hard to do: find out what's true, explain why it matters, and answer to no one but the reader."
        </p>
        {% assign mission_member = nil %}
        {% for member in site.team %}
          {% assign position_lower = member.member.position | downcase %}
          {% if position_lower == "ceo" or position_lower == "chief executive officer" %}
            {% assign mission_member = member %}
            {% break %}
          {% endif %}
        {% endfor %}
        {% unless mission_member %}
          {% for member in site.team %}
            {% assign position_lower = member.member.position | downcase %}
            {% if position_lower == "owner" %}
              {% assign mission_member = member %}
              {% break %}
            {% endif %}
          {% endfor %}
        {% endunless %}
        {% unless mission_member %}
          {% for member in site.team %}
            {% assign position_lower = member.member.position | downcase %}
            {% if position_lower == "president" %}
              {% assign mission_member = member %}
              {% break %}
            {% endif %}
          {% endfor %}
        {% endunless %}
        {% unless mission_member %}
          {% assign mission_member = site.team | first %}
        {% endunless %}
        {% if mission_member %}
          <div class="d-flex align-items-center gap-3">
            <div class="avatar avatar-lg">
              {%- uj_member mission_member.id, "image-tag", class="rounded-circle object-fit-cover d-block" -%}
            </div>
            <div>
              <div class="fw-bold">{%- uj_member mission_member.id, "name" -%}</div>
              <div class="opacity-75">{{ mission_member.member.position }}</div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

<!-- ============================================ -->
<!-- PRINCIPLES -->
<!-- ============================================ -->
<section class="pt-0">
  <div class="container">
    <div class="section-head" data-lazy="@class animation-slide-up">
      <h2>How we work</h2>
      <span class="rule"></span>
    </div>

    <div class="row g-4">
      {% for value in page.resolved.company_values %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="card h-100 p-4">
            <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle text-bg-primary mb-3">
              {% uj_icon value.icon %}
            </span>
            <h3 class="h4 mb-2">{{ value.title }}</h3>
            <p class="text-body-secondary mb-0">{{ value.description }}</p>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- ============================================ -->
<!-- JOIN CTA -->
<!-- ============================================ -->
<section class="pt-0">
  <div class="container text-center" data-lazy="@class animation-slide-up">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <span class="kicker justify-content-center mb-3">{% uj_icon "briefcase", "me-1" %}Join us</span>
        <h2 class="h1 mb-3">Want your name on <span class="text-accent">the masthead?</span></h2>
        <p class="lead mb-4">
          We're always looking for sharp reporters, ruthless editors, and people who sweat the details.
        </p>
        <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
          <a href="/careers" class="btn btn-primary btn-lg">
            {% uj_icon "rocket", "me-2" %}Apply now
          </a>
          <a href="/contact" class="btn btn-outline-dark btn-lg">
            {% uj_icon "envelope", "me-2" %}Get in touch
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}