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

### PAGE CONFIG ###
# News voice throughout: a theme's frontmatter defaults are part of its
# identity (see docs/themes.md "Frontmatter defaults").
# Hero Section
hero:
  headline: "Meet the"
  headline_accent: "newsroom"
  description: "The people, principles, and stubborn curiosity behind {{ site.brand.name }}"

# Mission & Vision
mission:
  title: "Our mission"
  description: "To deliver fearless, independent journalism that helps readers understand the forces shaping their world — clearly, quickly, and without the noise."
  icon: "bullseye"

vision:
  title: "Our promise"
  description: "Staying informed should take minutes, not hours — and trust in the news is earned daily, story by story, correction by correction."
  icon: "lightbulb"

# Story Timeline Section
story:
  superheadline:
    icon: "clock-rotate-left"
    text: "Our story"
  headline: "From scrappy newsletter to"
  headline_accent: "newsroom"
  subheadline: "How a weekend side project became a daily habit for millions"
  items:
  - year: "2017"
    title: "The first dispatch"
    description: "{{ site.brand.name }} launches as a weekend newsletter with 200 subscribers and strong opinions about what news should feel like"
  - year: "2018"
    title: "The daily habit"
    description: "The morning briefing goes daily and crosses 50,000 readers — most of them before 7am"
  - year: "2020"
    title: "Original reporting"
    description: "First full-time reporters join the desk and the newsroom publishes its first investigations"
  - year: "2023"
    title: "Award season"
    description: "Recognized for independent journalism with multiple industry awards — the corrections page stays proudly public"
  - year: "{{ site.uj.date.year }}"
    title: "Today"
    description: "Millions of readers, one unchanged standard: report it right, write it sharp"

# Newsroom Stats
stats:
  superheadline:
    icon: "chart-line"
    text: "Numbers"
  headline: "The newsroom in"
  headline_accent: "numbers"
  subheadline: "The milestones that define the desk"
  items:
  - number: "2017"
    label: "Founded"
    icon: "calendar"
  - number: "25+"
    label: "Journalists"
    icon: "pen-nib"
  - number: "2M+"
    label: "Monthly readers"
    icon: "users"
  - number: "120+"
    label: "Countries"
    icon: "globe"

# Newsroom Principles Section
values:
  superheadline:
    icon: "compass"
    text: "Principles"
  headline: "How we"
  headline_accent: "report"
  subheadline: "The standards behind every byline"
  items:
  - title: "Accuracy first"
    description: "Every claim checked, every source named where possible. Being right beats being first — every time"
    icon: "badge-check"
  - title: "Fiercely independent"
    description: "No corporate owner, no advertiser veto. Our readers are the only people we answer to"
    icon: "scale-balanced"
  - title: "Reader obsessed"
    description: "We write for busy, curious people — clear over clever, context over clicks, five minutes well spent"
    icon: "heart"
  - title: "Radically transparent"
    description: "Corrections published proudly, methods explained, conflicts disclosed. Trust is the whole product"
    icon: "magnifying-glass"

# Testimonials Section — the morning-coffee crowd (universal key)
testimonials:
  superheadline:
    icon: "megaphone"
    text: "From our readers"
  headline: "Readers {% uj_icon \"heart\", \"text-danger\" %} "
  headline_accent: "{{ site.brand.name }}"
  subheadline: "What the morning-coffee crowd says about us"
  items:
    - quote: "The only newsletter I actually open every morning. Five minutes, fully briefed."
      author: "Sarah Johnson"
      role: "Product Lead"
      company: "TechStart Inc"
      initial: "S"
    - quote: "They cover stories a week before everyone else — and with twice the context."
      author: "Michael Chen"
      role: "Founder"
      company: "DataFlow"
      initial: "M"
    - quote: "Cancelled three subscriptions and kept this one. Sharpest writing in my inbox."
      author: "Emily Davis"
      role: "Editor"
      company: "Creative Studio"
      initial: "E"

# Team CTA Section
team_cta:
  superheadline:
    icon: "handshake"
    text: "People"
  headline: "The people behind the"
  headline_accent: "bylines"
  subheadline: "Get to know the reporters and editors of {{ site.brand.name }} who chase the stories that matter every day"
  button:
    text: "Meet the team"
    icon: "arrow-right"
    href: "/team"
---

{% comment %}
  NEWSFLASH ABOUT
  Same data contract as the classy about page, presented as "about the
  publication": serif masthead opening, a single-rail editorial timeline with
  volt year chips, a vermilion mission slab + framed vision card, stroked
  numerals, framed value desk cards, and the dark big-read team CTA band.
{% endcomment %}

<!-- Hero -->
<section class="pb-4">
  <div class="container text-center" data-lazy="@class animation-slide-up">
    <span class="kicker mb-3">About</span>
    <h1 class="display-4 my-3">
      {{ page.resolved.hero.headline }} <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
    </h1>
    {% iftruthy page.resolved.hero.description %}
      <p class="lead mb-0">{{ page.resolved.hero.description }}</p>
    {% endiftruthy %}
  </div>
</section>

<!-- Story timeline -->
<section class="pt-0">
  <div class="container">
    <div class="section-head" data-lazy="@class animation-slide-up">
      {% iftruthy page.resolved.story.superheadline.text %}
        <h2>{{ page.resolved.story.superheadline.text }}</h2>
      {% endiftruthy %}
      <span class="rule"></span>
    </div>
    <header class="mb-5" data-lazy="@class animation-slide-up">
      <h2 class="h1 mb-2">
        {{ page.resolved.story.headline }} <span class="text-accent">{{ page.resolved.story.headline_accent }}</span>
      </h2>
      {% iftruthy page.resolved.story.subheadline %}
        <p class="lead mb-0">{{ page.resolved.story.subheadline }}</p>
      {% endiftruthy %}
    </header>

    <div class="row justify-content-center">
      <div class="col-lg-9">
        <div class="timeline">
          {% for item in page.resolved.story.items %}
            <div class="timeline-item" data-lazy="@class animation-slide-up">
              <span class="badge bg-body-tertiary timeline-year">{{ item.year }}</span>
              <div class="timeline-body">
                <h3 class="h4 mb-2">{{ item.title }}</h3>
                <p class="text-body-secondary mb-0">{{ item.description }}</p>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Mission & Vision -->
<section class="pt-0">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-6" data-lazy="@class animation-slide-up">
        <div class="card h-100 bg-primary text-white p-4 p-md-5 text-center">
          <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle bg-white text-primary mb-3 mx-auto">
            {% uj_icon page.resolved.mission.icon %}
          </span>
          <h3 class="h3 mb-3">{{ page.resolved.mission.title }}</h3>
          <p class="fs-5 mb-0">{{ page.resolved.mission.description }}</p>
        </div>
      </div>

      <div class="col-lg-6" data-lazy="@class animation-slide-up">
        <div class="card h-100 p-4 p-md-5 text-center">
          <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle text-bg-warning mb-3 mx-auto">
            {% uj_icon page.resolved.vision.icon %}
          </span>
          <h3 class="h3 mb-3">{{ page.resolved.vision.title }}</h3>
          <p class="fs-5 text-body-secondary mb-0">{{ page.resolved.vision.description }}</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Stats -->
<section class="pt-0">
  <div class="container">
    <div class="section-head" data-lazy="@class animation-slide-up">
      {% iftruthy page.resolved.stats.superheadline.text %}
        <h2>{{ page.resolved.stats.superheadline.text }}</h2>
      {% endiftruthy %}
      <span class="rule"></span>
    </div>
    <header class="mb-5" data-lazy="@class animation-slide-up">
      <h2 class="h1 mb-2">
        {{ page.resolved.stats.headline }}
        {% iftruthy page.resolved.stats.headline_accent %}
          <span class="text-accent">{{ page.resolved.stats.headline_accent }}</span>
        {% endiftruthy %}
      </h2>
      {% iftruthy page.resolved.stats.subheadline %}
        <p class="lead mb-0">{{ page.resolved.stats.subheadline }}</p>
      {% endiftruthy %}
    </header>

    <div class="row text-center g-4">
      {% for stat in page.resolved.stats.items %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="stat-num">{{ stat.number }}</div>
          <div class="fw-bold">{% uj_icon stat.icon, "me-2 text-primary" %}{{ stat.label }}</div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Values -->
<section class="pt-0">
  <div class="container">
    <div class="section-head" data-lazy="@class animation-slide-up">
      {% iftruthy page.resolved.values.superheadline.text %}
        <h2>{{ page.resolved.values.superheadline.text }}</h2>
      {% endiftruthy %}
      <span class="rule"></span>
    </div>
    <header class="mb-5" data-lazy="@class animation-slide-up">
      <h2 class="h1 mb-2">
        {{ page.resolved.values.headline }} <span class="text-accent">{{ page.resolved.values.headline_accent }}</span>
      </h2>
      {% iftruthy page.resolved.values.subheadline %}
        <p class="lead mb-0">{{ page.resolved.values.subheadline }}</p>
      {% endiftruthy %}
    </header>

    <div class="row g-4">
      {% for value in page.resolved.values.items %}
        <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="h5 mb-2">{{ value.title }}</h3>
            <p class="text-body-secondary mb-0">{{ value.description }}</p>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Testimonials — letters to the editor (framed reader quotes) -->
{% iftruthy page.resolved.testimonials %}
  <section class="pt-0">
    <div class="container">
      <div class="section-head" data-lazy="@class animation-slide-up">
        {% iftruthy page.resolved.testimonials.superheadline.text %}
          <h2>{{ page.resolved.testimonials.superheadline.text }}</h2>
        {% endiftruthy %}
        <span class="rule"></span>
      </div>

      <header class="mb-5" data-lazy="@class animation-slide-up">
        <h2 class="h1 mb-2">
          {{ page.resolved.testimonials.headline }}
          {% iftruthy page.resolved.testimonials.headline_accent %}
            <span class="text-accent">{{ page.resolved.testimonials.headline_accent }}</span>
          {% endiftruthy %}
        </h2>
        {% iftruthy page.resolved.testimonials.subheadline %}
          <p class="lead mb-0">{{ page.resolved.testimonials.subheadline }}</p>
        {% endiftruthy %}
      </header>

      <div class="row g-4">
        {% for testimonial in page.resolved.testimonials.items %}
          <div class="col-md-4" data-lazy="@class animation-slide-up">
            <figure class="card quote-card h-100 p-4 mb-0">
              <p class="mb-3">{{ testimonial.quote }}</p>
              <figcaption class="small text-body-secondary mt-auto">
                <b class="text-body">{{ testimonial.author }}</b>
                {% iftruthy testimonial.role %} · {{ testimonial.role }}{% endiftruthy %}{% iftruthy testimonial.company %}, {{ testimonial.company }}{% endiftruthy %}
              </figcaption>
            </figure>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
{% endiftruthy %}

<!-- Team CTA — the dark big-read band -->
<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">
        {% iftruthy page.resolved.team_cta.superheadline.text %}
          <span class="kicker mb-3">
            {% uj_icon page.resolved.team_cta.superheadline.icon, "me-1" %}{{ page.resolved.team_cta.superheadline.text }}
          </span>
        {% endiftruthy %}
        <h2 class="cta-title">
          {{ page.resolved.team_cta.headline }}
          {% iftruthy page.resolved.team_cta.headline_accent %}
            <span class="text-accent">{{ page.resolved.team_cta.headline_accent }}</span>
          {% endiftruthy %}
        </h2>
        {% iftruthy page.resolved.team_cta.subheadline %}
          <p class="cta-desc">{{ page.resolved.team_cta.subheadline }}</p>
        {% endiftruthy %}
        <div class="d-flex flex-wrap gap-3">
          <a href="{{ page.resolved.team_cta.button.href }}" class="btn btn-warning btn-lg">
            {% uj_icon page.resolved.team_cta.button.icon, "me-2" %}{{ page.resolved.team_cta.button.text }}
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}