# Editorial theme — codeless .bnp manifest (Theme Fleet Wave A, WO-TF-017).
# Synthesized into manifest.pb by `ninja plugin build` (no plugin.wasm).
#
# Persona: a personal essayist / independent newsletter. A reading experience
# above all — serif baseline grid, drop caps, running marginalia, small-caps
# section labels, author byline foregrounded. Typography does the design work;
# ornament is limited to hairline rules and generous whitespace.
theme_presets: presets.json
bundled_fonts: fonts.json
master_pages: master_pages.json
required_icon_packs: [lucide, simple-icons]

system_templates:
  - key: editorial
    title: Editorial
    description: "A personal essayist's reading room: serif baseline grid, drop caps, running marginalia and small-caps labels. Built for longform writers and independent newsletters."

page_templates:
  - system: editorial
    key: default
    title: Default
    description: "Standard page: masthead, narrow reading column, colophon."
    slots: [header, main, footer]
  - system: editorial
    key: full-width
    title: Full Width
    description: "Edge-to-edge for photo essays and cover images."
    slots: [header, main, footer]
  - system: editorial
    key: landing
    title: Front Page
    description: "Front-page stack: masthead, lead essay, river of stories, colophon."
    slots: [masthead, lead, river, footer]
  - system: editorial
    key: article
    title: Article
    description: "The reading centrepiece: byline, drop-cap opener, single column with a marginalia rail."
    slots: [header, byline, main, marginalia, footer]
  - system: editorial
    key: blog-index
    title: Archive
    description: "Essay archive: masthead, featured essay, and a river of entries."
    slots: [header, featured, main, footer]
  - system: editorial
    key: contact
    title: Correspondence
    description: "Contact layout with an optional aside for hours and location."
    slots: [header, main, aside, footer]
  - system: editorial
    key: auth
    title: Members
    description: "Centred members shell with wordmark and hairline rule."
    slots: [main, footer]

template_overrides:
  # Chrome
  - { template: editorial, block: navbar }
  - { template: editorial, block: footer }
  - { template: editorial, block: utility-bar }
  - { template: editorial, block: announcement-bar }
  # Marketing
  - { template: editorial, block: hero }
  - { template: editorial, block: feature-grid }
  - { template: editorial, block: rich-section }
  - { template: editorial, block: stats }
  - { template: editorial, block: testimonial }
  - { template: editorial, block: logo-strip }
  - { template: editorial, block: pricing }
  - { template: editorial, block: team }
  - { template: editorial, block: faq }
  - { template: editorial, block: timeline }
  - { template: editorial, block: cta }
  - { template: editorial, block: countdown }
  # Primitives
  - { template: editorial, block: heading }
  - { template: editorial, block: text }
  - { template: editorial, block: rich-text }
  - { template: editorial, block: image }
  - { template: editorial, block: quote }
  - { template: editorial, block: divider }
  - { template: editorial, block: button }
  - { template: editorial, block: card }
  - { template: editorial, block: gallery }
  - { template: editorial, block: video-embed }
  - { template: editorial, block: audio-embed }
  # Commerce / local
  - { template: editorial, block: menu-list }
  - { template: editorial, block: event-list }
  - { template: editorial, block: contact-form }
  - { template: editorial, block: contact-card }
  - { template: editorial, block: hours-location }
  - { template: editorial, block: social-links }
  # Blog family
  - { template: editorial, block: blog-hero }
  - { template: editorial, block: featured-posts }
  - { template: editorial, block: related-posts }
  - { template: editorial, block: popular-posts }
  - { template: editorial, block: category-list }
  - { template: editorial, block: post-hero }
  - { template: editorial, block: post-metadata }
  - { template: editorial, block: author-bio }
  - { template: editorial, block: author-bio-hero }
  - { template: editorial, block: newsletter-signup }
  - { template: editorial, block: breadcrumbs }
  - { template: editorial, block: sidebar-nav }
  # Auth surface
  - { template: editorial, block: auth-form }
  - { template: editorial, block: password-reset-form }
  - { template: editorial, block: auth-status }
  # System
  - { template: editorial, block: page-suggestions }

email_wrappers:
  - editorial

css:
  input_css_append: |
    /* === Editorial theme — utility layer ===
     *
     * Personal-essayist identity: hairline rules, small-caps labels, drop caps,
     * marginalia, narrow reading measure. Colour is ALWAYS consumed via
     * hsl(var(--token)); font families ALWAYS via var(--font-heading|body|mono,
     * <fallback>). No literal colours, no hardcoded families.
     */

    /* Bundled serif faces. The host does not yet emit @font-face for
     * bundled_fonts (LoadedPlugin.BundledFonts is unconsumed), so the theme
     * declares its own faces against the served artifact paths
     * (/templates/editorial/fonts/...). Presets set typography.fontHeading/body
     * to template:editorial:<Family> so --font-heading/--font-body resolve to
     * these families. */
    @font-face { font-family: 'Playfair Display'; src: url('/templates/editorial/fonts/playfair-display-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Playfair Display'; src: url('/templates/editorial/fonts/playfair-display-900-italic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }
    @font-face { font-family: 'Source Serif 4'; src: url('/templates/editorial/fonts/source-serif-4-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Source Serif 4'; src: url('/templates/editorial/fonts/source-serif-4-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

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

      /* --- Reading column + page widths --- */
      .editorial-column {
        max-width: var(--editorial-measure);
        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;
        }
      }

      /* --- Hero display title — responsive size via media queries so it is
       * independent of the host Tailwind JIT (large text-* combos in theme
       * templates are not reliably scanned). --- */
      .editorial-hero-title {
        font-family: var(--font-heading, "Playfair Display", Georgia, serif);
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.1;
        color: hsl(var(--foreground));
        font-size: 2.25rem;
      }
      @media (min-width: 640px) { .editorial-hero-title { font-size: 3rem; } }
      @media (min-width: 1024px) { .editorial-hero-title { font-size: 3.5rem; } }

      /* --- Narrow prose 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.7;
      }
      .prose-editorial p { margin: 0 0 1em 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;
      }
      .prose-editorial blockquote {
        hanging-punctuation: first;
        font-style: italic;
        border-left: var(--editorial-rule);
        padding-left: 1rem;
        margin-left: 0;
        color: hsl(var(--muted-foreground));
      }

      /* --- Small-caps / tracked labels (kickers, eyebrows, meta) --- */
      .editorial-caps {
        font-family: var(--font-body, "Source Serif 4", Georgia, serif);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 0.72rem;
        line-height: 1.4;
      }
      .editorial-meta {
        font-family: var(--font-body, "Inter", -apple-system, sans-serif);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.72rem;
        color: hsl(var(--muted-foreground));
      }
      .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: 0.8rem;
        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-rule,
      .editorial-hairline {
        border: 0;
        border-top: var(--editorial-rule);
        margin: 0;
      }

      /* --- Heading (Playfair, tight tracking, optional 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: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: hsl(var(--muted-foreground));
      }
      .editorial-underline {
        position: relative;
        padding-bottom: 0.35em;
      }
      .editorial-underline::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: hsl(var(--border));
      }

      /* --- Body text override --- */
      .editorial-text {
        font-family: var(--font-body, "Source Serif 4", "Source Serif Pro", Georgia, serif);
        color: hsl(var(--foreground));
        line-height: 1.7;
      }
      .editorial-text p + p { text-indent: 1.5em; margin-top: 0; }

      /* --- Inline accent link --- */
      .editorial-link {
        color: hsl(var(--accent));
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        transition: color 150ms ease, text-decoration-color 150ms ease;
      }
      .editorial-link:hover,
      .editorial-link:focus-visible { color: hsl(var(--foreground)); }

      /* --- Button (hairline border, no fill, accent on hover) --- */
      .editorial-button {
        display: inline-block;
        padding: 0.55rem 1.1rem;
        font-family: var(--font-body, "Inter", -apple-system, sans-serif);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        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;
      }

      /* --- Panel / card (hairline frame, no shadow) --- */
      .editorial-panel,
      .editorial-card {
        border: 1px solid hsl(var(--border));
        background-color: hsl(var(--card));
        transition: border-color 150ms ease;
      }
      .editorial-panel:hover,
      .editorial-card:hover { border-color: hsl(var(--accent)); }

      /* --- Form field (hairline border, accent focus) --- */
      .editorial-input {
        width: 100%;
        border: 1px solid hsl(var(--input));
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
        padding: 0.55rem 0.75rem;
        font-family: var(--font-body, "Source Serif 4", Georgia, serif);
        font-size: 0.95rem;
      }
      .editorial-input::placeholder { color: hsl(var(--muted-foreground)); }
      .editorial-input:focus {
        outline: none;
        border-color: hsl(var(--accent));
        box-shadow: 0 0 0 1px hsl(var(--accent));
      }

      /* --- Figure / image caption --- */
      .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: 0.85rem;
        color: hsl(var(--muted-foreground));
      }

      /* --- Drop cap — oxblood accent first letter --- */
      .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: 0.8rem;
        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);
        opacity: 0;
        animation: editorial-fade-in 600ms ease forwards;
      }
      /* Anchor label: block-level so it never runs into the note body, and
       * foreground ink so it reads as a deliberate annotation heading. */
      .editorial-marginalia-label {
        display: block;
        margin-bottom: 0.4rem;
        font-family: var(--font-body, "Inter", -apple-system, sans-serif);
        font-style: normal;
        font-weight: 600;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: hsl(var(--foreground));
      }
      /* Note body: bump above muted-foreground for legibility in both modes. */
      .editorial-marginalia-note {
        display: block;
        color: hsl(var(--foreground) / 0.82);
      }
      @keyframes editorial-fade-in { to { opacity: 1; } }
      @media (prefers-reduced-motion: reduce) {
        .editorial-marginalia aside { animation: none; opacity: 1; }
      }
      @media (max-width: 1023px) {
        .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", ui-monospace, monospace);
        font-size: 0.7rem;
        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: 2rem;
        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: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: hsl(var(--muted-foreground));
      }

      /* --- 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-body, "Inter", -apple-system, sans-serif);
        font-weight: 500;
        font-size: 0.95rem;
        color: hsl(var(--foreground));
      }
      .editorial-byline-meta {
        font-family: var(--font-body, "Inter", -apple-system, sans-serif);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        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: 0.8rem;
        color: hsl(var(--muted-foreground));
      }
      .editorial-colophon-issn {
        font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }

      /* --- Reading-progress underline (CSS-only atmosphere) --- */
      .editorial-progress {
        position: sticky;
        top: 0;
        height: 2px;
        background: hsl(var(--accent));
        transform-origin: 0 50%;
        animation: editorial-progress linear both;
        animation-timeline: scroll(root block);
        z-index: 50;
      }
      @keyframes editorial-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      @media (prefers-reduced-motion: reduce) {
        .editorial-progress { animation: none; transform: scaleX(0); }
      }
    }