# Editorial theme — codeless .bnp manifest (WO-WZ-021 Phase B).
# Synthesized into manifest.pb by `ninja plugin build` (no plugin.wasm).
theme_presets: presets.json
bundled_fonts: fonts.json
master_pages: master_pages.json

system_templates:
  - key: editorial
    title: Editorial
    description: "Didone display type, narrow measure, and hairline rules for newsrooms, longform writers, and opinion columnists."

page_templates:
  - system: editorial
    key: default
    title: Default
    description: "Standard page with masthead, narrow main column, footer."
    slots: [header, main, footer]
  - system: editorial
    key: landing
    title: Section Front
    description: "Front-page-style stack: masthead, lead story, river, footer."
    slots: [masthead, lead, river, footer]
  - system: editorial
    key: article
    title: Article
    description: "Single-column long read with byline, drop cap, marginalia rail."
    slots: [header, byline, main, marginalia, footer]
  - system: editorial
    key: full-width
    title: Full Width
    description: "Edge-to-edge for photo essays and data graphics."
    slots: [header, main, footer]

template_overrides:
  - { template: editorial, block: heading }
  - { template: editorial, block: text }
  - { template: editorial, block: button }
  - { template: editorial, block: image }

email_wrappers:
  - editorial

css:
  input_css_append: |
    /* === Editorial theme — utility layer === */

    :root {
      --editorial-measure: 64ch;
      --editorial-rule: 1px solid hsl(var(--border));
    }

    /* --- Narrow editorial column with indented continuation paragraphs --- */

    .prose-editorial {
      max-width: var(--editorial-measure);
      margin-left: auto;
      margin-right: auto;
      font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
      color: hsl(var(--foreground));
      line-height: 1.65;
    }

    .prose-editorial p {
      margin: 0 0 1em 0;
      text-indent: 0;
    }

    .prose-editorial p + p {
      text-indent: 1.5em;
    }

    .prose-editorial h1,
    .prose-editorial h2,
    .prose-editorial h3,
    .prose-editorial h4 {
      font-family: var(--font-heading, "Playfair Display", Georgia, serif);
      font-weight: 700;
      letter-spacing: -0.01em;
      color: hsl(var(--foreground));
    }

    .prose-editorial a {
      color: hsl(var(--accent));
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }

    /* --- Drop cap — oxblood accent first letter, ≥ 3x body size --- */

    .editorial-dropcap p:first-of-type::first-letter {
      font-family: var(--font-heading, "Playfair Display", Georgia, serif);
      font-weight: 900;
      font-style: italic;
      color: hsl(var(--accent));
      float: left;
      font-size: 4.5em;
      line-height: 0.85;
      padding-right: 0.12em;
      padding-top: 0.05em;
      margin-bottom: -0.1em;
    }

    /* --- Marginalia rail (right-side italic notes) --- */

    .editorial-marginalia {
      font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
      font-style: italic;
      font-size: 12px;
      line-height: 1.5;
      color: hsl(var(--muted-foreground));
    }

    .editorial-marginalia aside {
      margin: 0 0 1.5rem 0;
      padding-left: 0.75rem;
      border-left: var(--editorial-rule);
    }

    @media (max-width: 768px) {
      .editorial-marginalia {
        margin-top: 1.5rem;
        border-top: var(--editorial-rule);
        padding-top: 1rem;
      }
    }

    /* --- Masthead wordmark --- */

    .editorial-masthead-wordmark {
      font-family: var(--font-heading, "Playfair Display", Georgia, serif);
      font-weight: 900;
      font-style: italic;
      letter-spacing: -0.02em;
      color: hsl(var(--foreground));
    }

    .editorial-masthead-kicker {
      font-family: var(--font-mono, "JetBrains Mono", "SF Mono", ui-monospace, monospace);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: hsl(var(--muted-foreground));
    }

    .editorial-masthead-rule {
      border: 0;
      border-top: var(--editorial-rule);
      margin: 0.5rem 0 0 0;
    }

    /* --- Pull quote — Playfair italic in oxblood --- */

    .editorial-pullquote {
      font-family: var(--font-heading, "Playfair Display", Georgia, serif);
      font-style: italic;
      font-size: 38px;
      line-height: 1.2;
      color: hsl(var(--accent));
      margin: 2.5rem auto;
      max-width: var(--editorial-measure);
      border: none;
    }

    .editorial-pullquote-attribution {
      display: block;
      margin-top: 1rem;
      font-family: var(--font-body, "Source Serif 4", Georgia, serif);
      font-style: normal;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: hsl(var(--muted-foreground));
    }

    /* --- Section label — small-caps with hairline rule --- */

    .editorial-section-label {
      font-family: var(--font-body, "Source Serif 4", Georgia, serif);
      text-transform: uppercase;
      font-variant: small-caps;
      font-feature-settings: "smcp";
      letter-spacing: 0.15em;
      font-size: 13px;
      color: hsl(var(--foreground));
    }

    .editorial-section-label-rule {
      border: 0;
      border-top: var(--editorial-rule);
      margin: 0.5rem 0 1.5rem 0;
    }

    /* --- Hairline rules --- */

    hr.editorial-rule,
    .editorial-hairline {
      border: 0;
      border-top: var(--editorial-rule);
      margin: 1.5rem 0;
    }

    /* --- Byline --- */

    .editorial-byline {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 0;
      border-top: var(--editorial-rule);
      border-bottom: var(--editorial-rule);
    }

    .editorial-byline-photo {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: hsl(var(--muted));
      flex-shrink: 0;
      object-fit: cover;
    }

    .editorial-byline-author {
      font-family: var(--font-mono, "JetBrains Mono", monospace), var(--font-body, "Source Serif 4", Georgia, serif);
      /* The spec calls for Inter for UI bylines. Fallback to Inter then system. */
      font-family: var(--font-body, "Inter", -apple-system, sans-serif);
      font-weight: 500;
      font-size: 15px;
      color: hsl(var(--foreground));
    }

    .editorial-byline-meta {
      font-family: var(--font-body, "Inter", -apple-system, sans-serif);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: hsl(var(--muted-foreground));
    }

    /* --- Override: heading (Playfair, tight tracking, optional small-caps kicker) --- */

    .editorial-heading {
      font-family: var(--font-heading, "Playfair Display", Georgia, serif);
      font-weight: 700;
      letter-spacing: -0.015em;
      color: hsl(var(--foreground));
      line-height: 1.15;
    }

    .editorial-heading-kicker {
      display: block;
      margin-bottom: 0.5rem;
      font-family: var(--font-body, "Inter", -apple-system, sans-serif);
      font-size: 12px;
      text-transform: uppercase;
      font-variant: small-caps;
      font-feature-settings: "smcp";
      letter-spacing: 0.18em;
      color: hsl(var(--muted-foreground));
    }

    /* --- Override: text body (Source Serif, hanging quotes) --- */

    .editorial-text {
      font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
      color: hsl(var(--foreground));
      line-height: 1.7;
      max-width: var(--editorial-measure);
    }

    .editorial-text p + p {
      text-indent: 1.5em;
      margin-top: 0;
    }

    .editorial-text blockquote {
      hanging-punctuation: first;
      font-style: italic;
      border-left: var(--editorial-rule);
      padding-left: 1rem;
      margin-left: 0;
    }

    /* --- Override: button (hairline border, no fill, accent on hover) --- */

    .editorial-button {
      display: inline-block;
      padding: 0.5rem 1rem;
      font-family: var(--font-body, "Inter", -apple-system, sans-serif);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      background-color: transparent;
      color: hsl(var(--foreground));
      border: 1px solid hsl(var(--border));
      text-decoration: none;
      cursor: pointer;
      transition: color 150ms ease, border-color 150ms ease;
    }

    .editorial-button:hover,
    .editorial-button:focus {
      color: hsl(var(--accent));
      border-color: hsl(var(--accent));
    }

    .editorial-button:focus-visible {
      outline: 2px solid hsl(var(--ring));
      outline-offset: 2px;
    }

    /* --- Override: image (Source Serif italic caption with hairline above) --- */

    .editorial-figure {
      margin: 1.5rem 0;
    }

    .editorial-figure img {
      display: block;
      width: 100%;
      height: auto;
    }

    .editorial-figure figcaption {
      margin-top: 0.75rem;
      padding-top: 0.5rem;
      border-top: var(--editorial-rule);
      font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
      font-style: italic;
      font-size: 14px;
      color: hsl(var(--muted-foreground));
    }

    /* --- Colophon --- */

    .editorial-colophon {
      border-top: var(--editorial-rule);
      padding-top: 1.5rem;
      font-family: var(--font-body, "Inter", -apple-system, sans-serif);
      font-size: 13px;
      color: hsl(var(--muted-foreground));
    }

    .editorial-colophon-issn {
      font-family: var(--font-mono, "JetBrains Mono", monospace);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    /* --- Page layout — narrow editorial column --- */

    .editorial-column {
      max-width: var(--editorial-measure);
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .editorial-wide {
      max-width: 96rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .editorial-article-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      max-width: 80rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    @media (min-width: 1024px) {
      .editorial-article-grid {
        grid-template-columns: minmax(0, 64ch) 16rem;
      }
    }