/*
 * Newspaper Theme - Core Stylesheet
 * ==================================
 * A minimal, well-documented CSS file demonstrating Gazette theme concepts.
 * No frameworks - just clean, purposeful CSS.
 *
 * Table of Contents:
 * 1. CSS Custom Properties (Theme Variables)
 * 2. Reset & Base Styles
 * 3. Typography
 * 4. Layout System
 * 5. Components
 * 6. Sections
 * 7. Utilities
 */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES
   =============================================================================
   These variables are populated by Gazette's theme settings system.
   Designers can override these via the theme editor.
*/

:root {
  /* Typography - Font Families */
  --theme-font-masthead: 'UnifrakturMaguntia', serif;
  --theme-font-headline: 'Playfair Display', Georgia, serif;
  --theme-font-body: 'Source Serif 4', Georgia, serif;
  --theme-font-ui: 'Inter', system-ui, sans-serif;

  /* Typography - Scale (rem is fine for font-size per docs) */
  --theme-text-xs: 0.75rem;      /* 12px */
  --theme-text-sm: 0.875rem;     /* 14px */
  --theme-text-base: 1rem;       /* 16px */
  --theme-text-lg: 1.25rem;      /* 20px */
  --theme-text-xl: 1.563rem;     /* 25px */
  --theme-text-2xl: 1.953rem;    /* 31px */
  --theme-text-3xl: 2.441rem;    /* 39px */
  --theme-text-4xl: 3.052rem;    /* 49px */
  --theme-text-5xl: 3.815rem;    /* 61px */

  /* ==========================================================================
     TOPBAR - Semantic variables for the utility navigation
     Height = exact line count (border included via box-sizing: border-box)
     ========================================================================== */
  --theme-topbar-content-lines: 4;
  --theme-topbar-divider: var(--theme-divider-thin);
  --theme-topbar-height: calc(var(--theme-topbar-content-lines) * var(--line-height-px));

  /* ==========================================================================
     MASTHEAD - Semantic variables for the newspaper title
     Per-section CSS overrides these values, not the properties.
     Height grows "inside-out" from content + spacing (not a fixed setting).
     ========================================================================== */
  --theme-masthead-font: var(--theme-font-masthead);
  --theme-masthead-weight: 400;
  --theme-masthead-size: 4rem;
  --theme-masthead-lines: 3;
  --theme-masthead-line-height: calc(var(--theme-masthead-lines) * var(--line-height-px));

  /* Spacing (in baseline grid lines) */
  --theme-masthead-padding-top: 2;
  --theme-masthead-gap: 1;           /* Between title and tagline */
  --theme-masthead-padding-bottom: 1;
  --theme-masthead-divider: var(--theme-divider-thick);

  /* Height = padding-top + title + gap + tagline(1) + padding-bottom (divider absorbed into bottom padding) */
  --theme-masthead-height: calc(
    (
      var(--theme-masthead-padding-top)
      + var(--theme-masthead-lines)
      + var(--theme-masthead-gap)
      + 1
      + var(--theme-masthead-padding-bottom)
    ) * var(--line-height-px)
  );

  /* ==========================================================================
     MAIN NAV - Semantic variables for the primary navigation
     Height = exact line count (border included via box-sizing: border-box)
     ========================================================================== */
  --theme-nav-content-lines: 2;
  --theme-nav-divider: var(--theme-divider-thin);
  --theme-nav-height: calc(var(--theme-nav-content-lines) * var(--line-height-px));

  /* Colors */
  --theme-color-text: #1a1a1a;
  --theme-color-text-muted: #666666;
  --theme-color-background: #ffffff;
  --theme-color-accent: #c41e3a;
  --theme-color-rule: #e5e5e5;

  /* Layout */
  --theme-content-width: 1200px;
  --theme-gutter: var(--line-height-px);
  --theme-gutter-sm: calc(var(--line-height-px) / 2);

  /* ==========================================================================
     BASELINE GRID TYPOGRAPHY (fallbacks - overridden by _variables.css.liquid)
     ========================================================================== */
  --theme-base-font-size: 18px;
  --theme-body-line-height: 1.75;
  --theme-heading-line-height: 1.25;

  /* The fundamental unit - all vertical spacing derives from this */
  --line-height-px: calc(var(--theme-base-font-size) * var(--theme-body-line-height));

  /* ==========================================================================
     SPACING SCALE (in text lines)
     ========================================================================== */
  --space-half: calc(0.5 * var(--line-height-px));
  --space-1: var(--line-height-px);
  --space-1-5: calc(1.5 * var(--line-height-px));
  --space-2: calc(2 * var(--line-height-px));
  --space-3: calc(3 * var(--line-height-px));
  --space-4: calc(4 * var(--line-height-px));
  --space-5: calc(5 * var(--line-height-px));
  --space-6: calc(6 * var(--line-height-px));

  /* ==========================================================================
     DIVIDERS - Base + Multipliers System
     One slider controls the base, semantic levels scale proportionally.
     This maintains visual hierarchy while allowing global weight adjustment.
     ========================================================================== */
  --theme-divider-base: 1px;                                /* Range slider: 0-5px */
  --theme-divider-thin: var(--theme-divider-base);          /* Subtle: topbar, rules */
  --theme-divider-medium: calc(2 * var(--theme-divider-base)); /* Standard dividers */
  --theme-divider-thick: calc(3 * var(--theme-divider-base));  /* Bold: masthead */

  /* Theme spacing aliases (for templates) */
  --theme-space-sm: var(--space-1);
  --theme-space-md: var(--space-1);
  --theme-space-lg: var(--space-2);

  /* Developer Tools */
  --theme-baseline-grid-color: #FF00FF;

  /* Effects */
  --theme-image-grayscale: 0;    /* 0 = color, 1 = grayscale */
}


/* =============================================================================
   2. RESET & BASE STYLES
   =============================================================================
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--theme-font-body);
  font-size: var(--theme-base-font-size);
  /* ABSOLUTE line-height for baseline grid - all children inherit this fixed value */
  line-height: var(--line-height-px);
  color: var(--theme-color-text);
  background-color: var(--theme-color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Grayscale effect - controlled by --theme-image-grayscale (0 or 1) */
img {
  filter: grayscale(calc(var(--theme-image-grayscale) * 100%));
  transition: filter 0.3s ease;
}

img:hover,
a:hover img,
figure:hover img {
  filter: grayscale(0%);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* =============================================================================
   3. TYPOGRAPHY
   =============================================================================
*/

/* Masthead - Blackletter newspaper title
   Uses semantic variables so per-section CSS only overrides values, not properties.
   Fixed height ensures element takes exactly N grid lines.
   Flexbox align-items: flex-end pushes text to bottom of the container. */
.np-masthead-title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--theme-masthead-line-height);
  font-family: var(--theme-masthead-font);
  font-size: var(--theme-masthead-size);
  font-weight: var(--theme-masthead-weight);
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Headlines - use absolute line-height for baseline alignment */
.np-headline {
  font-family: var(--theme-font-headline);
  font-weight: var(--theme-font-headline-weight);
  line-height: var(--line-height-px);
  margin: 0;
}

/* Large headlines need 2x line-height to stay on grid */
.np-headline--xl {
  font-size: var(--theme-text-3xl);
  line-height: calc(2 * var(--line-height-px));
}
.np-headline--lg {
  font-size: var(--theme-text-2xl);
  line-height: calc(2 * var(--line-height-px));
}
.np-headline--md { font-size: var(--theme-text-xl); }
.np-headline--sm { font-size: var(--theme-text-lg); }

/* Section headers with horizontal rule */
.np-section-header {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-lg);
  font-weight: var(--theme-font-headline-weight);
  line-height: var(--line-height-px);
  display: flex;
  align-items: center;  /* Center both title and divider vertically */
  gap: var(--space-1);
  /* Fixed height = 2 lines, both elements centered at 1-line mark */
  height: calc(2 * var(--line-height-px));
  margin: 0;
}

.np-section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--theme-color-rule);
}

/* Category labels - base styles, no padding-top (apply at context level) */
.np-category {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  font-weight: var(--theme-font-ui-weight);
  line-height: var(--line-height-px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--theme-color-accent);
  margin: 0;
}

/* Timestamps - base styles, no padding-top (apply at context level) */
.np-timestamp {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  line-height: var(--line-height-px);
  color: var(--theme-color-text-muted);
  margin: 0;
}

/* Body text - uses absolute line-height for baseline alignment */
.np-body {
  font-family: var(--theme-font-body);
  font-size: var(--theme-base-font-size);
  line-height: var(--line-height-px);
}

/* Tagline / subtitle - fixed height for grid alignment */
.np-tagline {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--line-height-px);
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: 1;
  color: var(--theme-color-text-muted);
  letter-spacing: 0.02em;
  margin: 0;
}


/* =============================================================================
   4. LAYOUT SYSTEM
   =============================================================================
*/

/* Container - centers content with max-width */
.np-container {
  width: 100%;
  max-width: var(--theme-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--theme-gutter);
  padding-right: var(--theme-gutter);
}

/* 3-Column Grid (for landing page) */
.np-grid-3col {
  display: grid;
  gap: var(--theme-gutter);
  grid-template-columns: 1fr;
}

.np-grid-3col .np-col {
  display: flex;
  flex-direction: column;
  gap: var(--theme-gutter);
}

/* Phone: single column, hide right sidebar */
.np-grid-3col .np-col--right {
  display: none;
}

/* Tablet: 2 columns (left + center wider), right hidden */
@media (min-width: 768px) {
  .np-grid-3col {
    grid-template-columns: 1fr 2fr;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .np-grid-3col {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .np-grid-3col .np-col--right {
    display: flex;
  }
}

/* 2-Column Grid (for default layout: article + sidebar) */
.np-grid-2col {
  display: grid;
  gap: var(--theme-gutter);
  grid-template-columns: 1fr;
}

.np-grid-2col .np-col {
  display: flex;
  flex-direction: column;
  gap: var(--theme-gutter);
}

/* Phone/Tablet: single column, right sidebar hidden */
.np-grid-2col .np-col--right {
  display: none;
}

/* Desktop: 2 columns (main 3fr + sidebar 1fr) */
@media (min-width: 1024px) {
  .np-grid-2col {
    grid-template-columns: 3fr 1fr;
  }
  .np-grid-2col .np-col--right {
    display: flex;
  }
}

/* Single column layout */
.np-grid-1col {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Section spacing - handled by column gap, no internal padding needed */
.np-section {
  /* Spacing between sections controlled by .np-col gap */
}


/* =============================================================================
   5. COMPONENTS
   =============================================================================
*/

/* ==========================================================================
   RESPONSIVE GRID - Column-based layout
   ==========================================================================
   Simple responsive grid with explicit column counts.
   Uses CSS variables for per-section customization.

   Classes:
     .np-grid              - Base grid container
     .np-grid--cols-1..4   - Column count variants
*/
.np-grid {
  display: grid;
  gap: var(--grid-gap, var(--line-height-px));
}

.np-grid--cols-1 { grid-template-columns: 1fr; }
.np-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.np-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.np-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive: collapse to fewer columns on smaller screens */
@media (max-width: 1024px) {
  .np-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .np-grid--cols-3,
  .np-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .np-grid--cols-2,
  .np-grid--cols-3,
  .np-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   POST CARD - Collection card component
   ==========================================================================
   Card component for displaying posts in collections.
   Two variants: compact (horizontal) and standard (vertical).

   CSS Variables (from per-section {% style %} blocks):
     --card-image-height: Image height in baseline lines (via css_lines filter)
     --card-title-height: Title area height in baseline lines (via css_lines filter)
     --card-image-width: Image width as percentage (compact only)

   Row 2 height = max(image_height, title_height) for baseline grid alignment.
*/

/* Base card styles */
.np-post-card {
  border-bottom: 1px solid var(--theme-color-rule);
}

.np-post-card:last-child {
  border-bottom: none;
}

.np-post-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.np-post-card__link:hover .np-post-card__title {
  color: var(--theme-color-accent);
}

.np-post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.np-post-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;  /* Allow shrinking below content's intrinsic width */
}

.np-post-card__category {
  line-height: var(--line-height-px);
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin: 0;
}

.np-post-card__title {
  line-height: var(--line-height-px);
  margin: 0;
  overflow-wrap: break-word;  /* Break long words if needed */
}

.np-post-card__excerpt {
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  line-height: var(--line-height-px);
  margin: 0;
}

.np-post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  line-height: var(--line-height-px);
}

.np-post-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-half);
  min-width: 0;
}

.np-post-card__avatar {
  width: var(--line-height-px);
  height: var(--line-height-px);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.np-post-card__avatar-placeholder {
  width: var(--line-height-px);
  height: var(--line-height-px);
  border-radius: 50%;
  background: var(--theme-color-surface);
  color: var(--theme-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--theme-text-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.np-post-card__author-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-post-card__timestamp {
  line-height: var(--line-height-px);
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin: 0;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   COMPACT VARIANT - Horizontal card with image on right
   -------------------------------------------------------------------------- */
.np-post-card--compact {
  display: grid;
  grid-template-columns: 1fr var(--card-image-width, 30%);
  grid-template-rows:
    var(--line-height-px)  /* Row 1: Category */
    var(--card-title-height, calc(5 * var(--line-height-px)))  /* Row 2: Title */
    auto  /* Row 3: Excerpt (collapses if empty) */
    var(--line-height-px)  /* Row 4: Timestamp */
    calc(var(--line-height-px) - 1px);  /* Row 5: Gap */
  column-gap: var(--line-height-px);
}

.np-post-card--compact .np-post-card__link {
  display: contents;
}

.np-post-card--compact .np-post-card__image-wrapper {
  grid-column: 2;
  grid-row: 2 / 4;  /* Span title + excerpt rows */
}

.np-post-card--compact .np-post-card__image {
  width: 100%;
  height: var(--card-image-height, calc(4 * var(--line-height-px)));
}

.np-post-card--compact .np-post-card__content {
  display: contents;
}

.np-post-card--compact .np-post-card__category {
  grid-column: 1;
  grid-row: 1;
}

.np-post-card--compact .np-post-card__body {
  display: contents;  /* Children become direct grid items */
}

.np-post-card--compact .np-post-card__title {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  font-family: var(--theme-font-headline);
  line-height: var(--line-height-px);
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin: 0;
  overflow-wrap: break-word;
}

.np-post-card--compact .np-post-card__excerpt {
  grid-column: 1;
  grid-row: 3;  /* Own grid row - starts fresh on grid line */
  align-self: start;
  min-width: 0;
  font-family: var(--theme-font-body);
  font-size: var(--theme-base-font-size);
  line-height: var(--line-height-px);
  /* Baseline shift + negative margin = text aligned, grid preserved */
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin-top: 0;
  margin-bottom: calc(-1 * (var(--line-height-px) - 1cap) / 2);
  color: var(--theme-color-text-muted);
}

.np-post-card--compact .np-post-card__footer {
  grid-column: 1;
  grid-row: 4;
}

.np-post-card--compact .np-post-card__timestamp {
  grid-column: 1;
  grid-row: 4;
}

/* --------------------------------------------------------------------------
   IMAGE-LEFT VARIANT - Same as compact but image on left side
   Uses same grid structure with column order reversed
   -------------------------------------------------------------------------- */
.np-post-card--image-left {
  display: grid;
  grid-template-columns: var(--card-image-width, 30%) 1fr;
  grid-template-rows:
    var(--line-height-px)  /* Row 1: Category */
    var(--card-title-height, calc(5 * var(--line-height-px)))  /* Row 2: Title */
    auto  /* Row 3: Excerpt (collapses if empty) */
    var(--line-height-px)  /* Row 4: Timestamp */
    calc(var(--line-height-px) - 1px);  /* Row 5: Gap (bottom border sits on baseline) */
  column-gap: var(--line-height-px);
}

.np-post-card--image-left .np-post-card__link {
  display: contents;
}

.np-post-card--image-left .np-post-card__image-wrapper {
  grid-column: 1;  /* Image on LEFT */
  grid-row: 2 / 4;  /* Span title + excerpt rows */
}

.np-post-card--image-left .np-post-card__image {
  width: 100%;
  height: var(--card-image-height, calc(4 * var(--line-height-px)));
}

.np-post-card--image-left .np-post-card__content {
  display: contents;
}

.np-post-card--image-left .np-post-card__category {
  grid-column: 2;  /* Content on RIGHT */
  grid-row: 1;
}

.np-post-card--image-left .np-post-card__body {
  display: contents;
}

.np-post-card--image-left .np-post-card__title {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  font-family: var(--theme-font-headline);
  line-height: var(--line-height-px);
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin: 0;
  overflow-wrap: break-word;
}

.np-post-card--image-left .np-post-card__excerpt {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  min-width: 0;
  font-family: var(--theme-font-body);
  font-size: var(--theme-base-font-size);
  line-height: var(--line-height-px);
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin-top: 0;
  margin-bottom: calc(-1 * (var(--line-height-px) - 1cap) / 2);
  color: var(--theme-color-text-muted);
}

.np-post-card--image-left .np-post-card__footer {
  grid-column: 2;
  grid-row: 4;
}

.np-post-card--image-left .np-post-card__timestamp {
  grid-column: 2;
  grid-row: 4;
}

/* --------------------------------------------------------------------------
   STANDARD VARIANT - Vertical card with image on top
   Uses CSS Grid for baseline alignment (same pattern as compact/image-left)
   -------------------------------------------------------------------------- */
.np-post-card--standard {
  display: grid;
  grid-template-rows:
    var(--card-image-height, calc(8 * var(--line-height-px)))  /* Row 1: Image */
    var(--line-height-px)  /* Row 2: Category */
    var(--card-title-height, calc(3 * var(--line-height-px)))  /* Row 3: Title */
    auto  /* Row 4: Excerpt (collapses if empty) */
    var(--line-height-px)  /* Row 5: Timestamp */
    calc(var(--line-height-px) - 1px);  /* Row 6: Gap */
}

.np-post-card--standard .np-post-card__link {
  display: contents;
}

.np-post-card--standard .np-post-card__image-wrapper {
  grid-row: 1;
  overflow: hidden;
}

.np-post-card--standard .np-post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.np-post-card--standard .np-post-card__content {
  display: contents;
}

.np-post-card--standard .np-post-card__category {
  grid-row: 2;
  align-self: start;
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin: 0;
}

.np-post-card--standard .np-post-card__body {
  display: contents;
}

.np-post-card--standard .np-post-card__title {
  grid-row: 3;
  align-self: start;
  min-width: 0;
  font-family: var(--theme-font-headline);
  line-height: var(--line-height-px);
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin: 0;
  overflow-wrap: break-word;
}

.np-post-card--standard .np-post-card__excerpt {
  grid-row: 4;
  align-self: start;
  min-width: 0;
  font-family: var(--theme-font-body);
  font-size: var(--theme-base-font-size);
  line-height: var(--line-height-px);
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin-top: 0;
  margin-bottom: calc(-1 * (var(--line-height-px) - 1cap) / 2);
  color: var(--theme-color-text-muted);
}

.np-post-card--standard .np-post-card__footer {
  grid-row: 5;
  align-self: start;
}

.np-post-card--standard .np-post-card__timestamp {
  grid-row: 5;
  align-self: start;
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin: 0;
}

/* ==========================================================================
   HERO SECTION - Baseline Grid Aligned
   ========================================================================== */
.np-hero-card {
  text-align: center;
}

.np-hero-image-link {
  display: block;
}

.np-hero-image {
  width: 100%;
  height: var(--hero-image-height, calc(16 * var(--line-height-px)));
  object-fit: cover;
}

/* Hero content: CSS Grid with explicit rows for baseline alignment
   Layout:
     Row 1: Category (1 line)
     Row 2: Headline (variable)
     Row 3: Timestamp (1 line)
     Row 4: Excerpt (variable)
*/
.np-hero-content {
  display: grid;
  grid-template-rows:
    var(--line-height-px)                                                  /* Category: 1 line */
    var(--hero-headline-height, calc(4 * var(--line-height-px)))           /* Headline: variable */
    var(--line-height-px)                                                  /* Timestamp: 1 line */
    var(--hero-excerpt-height, calc(4 * var(--line-height-px)));           /* Excerpt: variable */
}

/* Category in row 1 */
.np-hero-content .np-category {
  grid-row: 1;
  align-self: start;
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  line-height: var(--line-height-px);
  margin: 0;
}

/* Headline in row 2 */
.np-hero-headline {
  grid-row: 2;
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-2xl);
  font-weight: var(--theme-font-headline-weight);
  line-height: calc(2 * var(--line-height-px));
  padding-top: calc((2 * var(--line-height-px) - 1cap) / 2);
  margin: 0;
  align-self: start;
  overflow: hidden;
}

.np-hero-headline a {
  color: inherit;
  text-decoration: none;
}

.np-hero-headline a:hover {
  text-decoration: underline;
}

/* Timestamp in row 3 */
.np-hero-content .np-timestamp {
  grid-row: 3;
  align-self: start;
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  line-height: var(--line-height-px);
  margin: 0;
}

/* Excerpt in row 4 */
.np-hero-excerpt {
  grid-row: 4;
  font-family: var(--theme-font-body);
  font-size: var(--theme-base-font-size);
  line-height: var(--line-height-px);
  color: var(--theme-color-text-muted);
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin: 0;
  align-self: start;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--hero-excerpt-lines, 4);
}

/* Horizontal Rule / Divider
   Total height = 2 lines (margin-top + margin-bottom, compensating for border) */
.np-divider {
  border: none;
  border-top: 1px solid var(--theme-color-rule);
  /* Compensate for 1px border to maintain grid alignment */
  margin: calc(var(--space-1) - 1px) 0 var(--space-1) 0;
}

.np-divider--thick {
  border-top-width: 2px;
  border-color: var(--theme-color-text);
  /* Compensate for 2px border */
  margin: calc(var(--space-1) - 2px) 0 var(--space-1) 0;
}

/* Image Banner
   Full-width promotional image.
   Height is always a multiple of baseline grid via --banner-height-lines.
   Uses watermark filter for labels (e.g., "Advertisement"). */
.np-image-banner {
  --banner-height-lines: 6;  /* Default, overridden by inline style */
  display: block;
  position: relative;
  width: 100%;
  height: calc(var(--line-height-px) * var(--banner-height-lines));
  overflow: hidden;
  margin: 0;  /* Top spacing provided by section_header */
  padding: 0;
}

.np-image-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
}

.np-image-banner--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-color-surface-muted);
  border: 1px dashed var(--theme-color-rule);
}

a.np-image-banner:hover .np-image-banner__img {
  opacity: 0.9;
}


/* =============================================================================
   6. SECTIONS
   =============================================================================
*/

/* ==========================================================================
   TOPBAR SECTION
   Height = content lines + divider (via semantic variables)
   ========================================================================== */
.np-topbar {
  display: flex;
  flex-direction: column;
  height: var(--theme-topbar-height);  /* Exact height for baseline grid */
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);
  border-bottom: var(--theme-topbar-divider) solid var(--theme-color-rule);
}

.np-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Stretch to fill parent (no min-height - parent controls total height) */
  flex: 1;
}

/* ==========================================================================
   MASTHEAD SECTION
   Height grows "inside-out": padding + title + gap + tagline + padding
   Divider is subtracted from bottom padding to keep total height grid-aligned.
   ========================================================================== */
.np-masthead {
  text-align: center;
  min-height: var(--theme-masthead-height);
  padding-top: calc(var(--theme-masthead-padding-top) * var(--line-height-px));
  /* Bottom padding minus divider keeps total height on grid */
  padding-bottom: calc(var(--theme-masthead-padding-bottom) * var(--line-height-px) - var(--theme-masthead-divider));
  border-bottom: var(--theme-masthead-divider) solid var(--theme-color-text);
}

/* Gap between title and tagline */
.np-masthead .np-tagline {
  margin-top: calc(var(--theme-masthead-gap) * var(--line-height-px));
}

/* Responsive masthead scaling
   Scale down the masthead title on smaller screens while maintaining proportions.
   Uses --masthead-scale to reduce both font size and container height. */
@media (max-width: 1024px) {
  .np-masthead {
    --masthead-scale: 0.8;
    min-height: calc(var(--theme-masthead-height) * var(--masthead-scale));
    padding-top: calc(var(--theme-masthead-padding-top) * var(--line-height-px) * var(--masthead-scale));
    padding-bottom: calc(var(--theme-masthead-padding-bottom) * var(--line-height-px) * var(--masthead-scale) - var(--theme-masthead-divider));
  }
  .np-masthead .np-masthead-title {
    font-size: calc(var(--theme-masthead-size) * var(--masthead-scale));
    height: calc(var(--theme-masthead-line-height) * var(--masthead-scale));
  }
  .np-masthead .np-tagline {
    margin-top: calc(var(--theme-masthead-gap) * var(--line-height-px) * var(--masthead-scale));
  }
}

@media (max-width: 768px) {
  .np-masthead {
    --masthead-scale: 0.6;
    min-height: calc(var(--theme-masthead-height) * var(--masthead-scale));
    padding-top: calc(var(--theme-masthead-padding-top) * var(--line-height-px) * var(--masthead-scale));
    padding-bottom: calc(var(--theme-masthead-padding-bottom) * var(--line-height-px) * var(--masthead-scale) - var(--theme-masthead-divider));
  }
  .np-masthead .np-masthead-title {
    font-size: calc(var(--theme-masthead-size) * var(--masthead-scale));
    height: calc(var(--theme-masthead-line-height) * var(--masthead-scale));
  }
  .np-masthead .np-tagline {
    margin-top: calc(var(--theme-masthead-gap) * var(--line-height-px) * var(--masthead-scale));
  }
}

@media (max-width: 480px) {
  .np-masthead {
    --masthead-scale: 0.45;
    min-height: calc(var(--theme-masthead-height) * var(--masthead-scale));
    padding-top: calc(var(--theme-masthead-padding-top) * var(--line-height-px) * var(--masthead-scale));
    padding-bottom: calc(var(--theme-masthead-padding-bottom) * var(--line-height-px) * var(--masthead-scale) - var(--theme-masthead-divider));
  }
  .np-masthead .np-masthead-title {
    font-size: calc(var(--theme-masthead-size) * var(--masthead-scale));
    height: calc(var(--theme-masthead-line-height) * var(--masthead-scale));
  }
  .np-masthead .np-tagline {
    margin-top: calc(var(--theme-masthead-gap) * var(--line-height-px) * var(--masthead-scale));
  }
}

.np-topbar-links {
  display: flex;
  gap: var(--space-half);
}

.np-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-half);
}

.np-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(1.5 * var(--line-height-px));
  padding: 0 var(--space-half);
  font-size: var(--theme-text-xs);
  font-weight: 600;
  line-height: var(--line-height-px);
  background-color: var(--theme-color-accent);
  color: white;
  border: none;
  cursor: pointer;
}

.np-topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(1.5 * var(--line-height-px));
  height: calc(1.5 * var(--line-height-px));
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* ==========================================================================
   MAIN NAV SECTION
   Height = content lines + divider (via semantic variables)
   ========================================================================== */
.np-nav {
  display: flex;
  flex-direction: column;
  height: var(--theme-nav-height);  /* Exact height for baseline grid */
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  font-weight: var(--theme-font-ui-weight);
  line-height: var(--line-height-px);
  border-bottom: var(--theme-nav-divider) solid var(--theme-color-rule);
}

.np-nav-inner {
  flex: 1;  /* Stretch to fill parent height */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--space-1);  /* Row gap 0, column gap 1 line */
  padding: 0 var(--space-1);
}

.np-nav a:hover {
  color: var(--theme-color-accent);
  text-decoration: none;
}

/* Footer */
.np-footer {
  background-color: var(--theme-color-text);
  color: var(--theme-color-background);
  padding: var(--space-1-5) 0;
  margin-top: var(--space-1-5);
}

.np-footer a {
  color: inherit;
  opacity: 0.8;
}

.np-footer a:hover {
  opacity: 1;
}

.np-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
}

.np-footer-title {
  font-family: var(--theme-font-masthead);
  font-size: var(--theme-text-2xl);
  line-height: var(--line-height-px);
  margin: 0 0 var(--space-1) 0;
}

.np-footer-about {
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);
  opacity: 0.8;
  margin: 0;
}

.np-footer-column-heading {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: var(--line-height-px);
  margin: 0 0 var(--space-1) 0;
}

.np-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-half);
}

.np-footer-links a {
  font-size: var(--theme-text-sm);
}

.np-footer-copyright {
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.np-footer-copyright p {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  line-height: var(--line-height-px);
  opacity: 0.6;
  margin: 0;
}


/* =============================================================================
   7. UTILITIES
   =============================================================================
*/

/* Legacy Spacing (mapped to baseline grid - full lines only) */
.np-mt-sm { margin-top: var(--space-1); }
.np-mt-md { margin-top: var(--space-1); }
.np-mt-lg { margin-top: var(--space-2); }
.np-mb-sm { margin-bottom: var(--space-1); }
.np-mb-md { margin-bottom: var(--space-1); }
.np-mb-lg { margin-bottom: var(--space-2); }

/* Baseline Grid Spacing Utilities */
.np-mt-half { margin-top: var(--space-half); }
.np-mt-1 { margin-top: var(--space-1); }
.np-mt-2 { margin-top: var(--space-2); }
.np-mt-3 { margin-top: var(--space-3); }

.np-mb-half { margin-bottom: var(--space-half); }
.np-mb-1 { margin-bottom: var(--space-1); }
.np-mb-2 { margin-bottom: var(--space-2); }
.np-mb-3 { margin-bottom: var(--space-3); }

.np-py-half { padding-top: var(--space-half); padding-bottom: var(--space-half); }
.np-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.np-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.np-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.np-gap-half { gap: var(--space-half); }
.np-gap-1 { gap: var(--space-1); }
.np-gap-2 { gap: var(--space-2); }

/* Flex utilities */
.np-flex { display: flex; }
.np-flex-col { flex-direction: column; }
.np-gap-sm { gap: var(--space-1); }  /* Full baseline unit */
.np-gap-md { gap: var(--space-1); }  /* Full baseline unit */

/* Text utilities */
.np-text-center { text-align: center; }
.np-text-muted { color: var(--theme-color-text-muted); }

/* ==========================================================================
   BASELINE ALIGNMENT UTILITIES

   Uses the CSS `cap` unit to align text baselines to the grid.
   See: https://maketypework.com/web-typography-baseline-grids-made-easy/

   The `cap` unit = font's cap-height (baseline to top of capital letters).
   Formula: padding-top: line-height - 1cap → pushes baseline to grid line

   IMPORTANT: We don't use margin-bottom: 1cap because the cap unit varies
   with font-size. When mixing font sizes, the spacing wouldn't sum to exact
   grid multiples. Instead, use margin: 0 and let containers handle spacing.
   ========================================================================== */

/* Apply baseline alignment to any text element */
.np-baseline {
  line-height: var(--line-height-px);
  padding-top: calc(var(--line-height-px) - 1cap);
  margin: 0;
}

/* For 2-line height text (large headlines) */
.np-baseline-2 {
  line-height: calc(2 * var(--line-height-px));
  padding-top: calc(2 * var(--line-height-px) - 1cap);
  margin: 0;
}

/* Visually hidden (for accessibility) */
.np-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =============================================================================
   DEVELOPER TOOLS
   =============================================================================
   Visual aids for typography and baseline grid alignment during development.
   Enable via Theme Editor > Developer Tools > Show Baseline Grid
*/

/* Baseline Grid Overlay - shows horizontal guide lines at every line-height interval */
/* Grid starts at 0 - text elements use baseline-shift to align to these lines */
/* Visibility controlled by --theme-show-baseline-grid CSS variable for live preview */
.np-baseline-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    var(--theme-baseline-grid-color, #FF00FF) 0,
    var(--theme-baseline-grid-color, #FF00FF) 1px,
    transparent 1px,
    transparent var(--line-height-px)
  );
  opacity: calc(var(--theme-show-baseline-grid, 0) * 0.3);
}

/* Baseline Grid Info Panel - shows computed typography values */
/* Visibility controlled by --theme-show-baseline-grid CSS variable for live preview */
.np-baseline-grid-info {
  position: fixed;
  bottom: var(--space-1);
  right: var(--space-1);
  padding: var(--space-half) var(--space-1);
  background: rgba(0, 0, 0, 0.85);
  color: var(--theme-baseline-grid-color, #FF00FF);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 4px;
  z-index: 10000;
  pointer-events: none;
  display: block;
  opacity: var(--theme-show-baseline-grid, 0);
}

/* Section Baseline Grid Overlay - scrolls with section content */
/* For debugging alignment of specific elements within a section */
/* Visibility controlled by --theme-show-section-baseline-grid CSS variable */
/* Uses gz- prefix as this is output by the section_wrapper tag (shared across themes) */
.gz-section-baseline-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    var(--theme-section-baseline-grid-color, #00BFFF) 0,
    var(--theme-section-baseline-grid-color, #00BFFF) 1px,
    transparent 1px,
    transparent var(--line-height-px)
  );
  opacity: calc(var(--theme-show-section-baseline-grid, 0) * 0.25);
}

/* Section wrapper needs position:relative for the overlay to work */
[data-section-id] {
  position: relative;
}

/* ==========================================================================
   GALLERY SLIDESHOW - Baseline Grid Aligned
   ========================================================================== */
.np-gallery-slideshow {
  position: relative;
}

.np-gallery-slideshow-track {
  position: relative;
  overflow: hidden;
  height: var(--gallery-image-height, calc(16 * var(--line-height-px)));
}

.np-gallery-slideshow-slide {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.np-gallery-slideshow-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-gallery-slideshow-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-sm);
  font-style: italic;
  line-height: var(--line-height-px);
  /* Baseline shift for caption text */
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  padding-bottom: calc(var(--line-height-px) - (var(--line-height-px) - 1cap) / 2);
  padding-left: var(--space-1);
  padding-right: var(--space-1);
  margin: 0;
  text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

/* Content: Baseline grid aligned text block.
   Each element has its own cap-based shift since they use different fonts.
   Gap = 1 line maintains grid alignment. */
.np-gallery-slideshow-content {
  display: flex;
  flex-direction: column;
  gap: var(--line-height-px);
  text-align: center;
}

.np-gallery-slideshow-headline {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-xl);
  font-weight: var(--theme-font-headline-weight);
  line-height: var(--line-height-px);
  /* Baseline shift + negative margin = text aligned, grid preserved */
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin-top: 0;
  margin-bottom: calc(-1 * (var(--line-height-px) - 1cap) / 2);
}

.np-gallery-slideshow-headline a {
  color: inherit;
  text-decoration: none;
}

.np-gallery-slideshow-headline a:hover {
  text-decoration: underline;
}

.np-gallery-slideshow-excerpt {
  font-family: var(--theme-font-body);
  font-size: var(--theme-base-font-size);
  line-height: var(--line-height-px);
  /* Baseline shift + negative margin = text aligned, grid preserved */
  padding-top: calc((var(--line-height-px) - 1cap) / 2);
  margin-top: 0;
  margin-bottom: calc(-1 * (var(--line-height-px) - 1cap) / 2);
  color: var(--theme-color-text-muted);
}

/* Left aligned variant */
.np-gallery-slideshow--left .np-gallery-slideshow-content {
  text-align: left;
}

.np-gallery-slideshow--left .np-gallery-slideshow-caption {
  text-align: left;
}

/* Nav: 1 line height for grid alignment */
.np-gallery-slideshow-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-half);
  height: var(--line-height-px);
}

.np-gallery-slideshow-btn {
  width: var(--line-height-px);
  height: var(--line-height-px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--theme-color-rule);
  border-radius: 50%;
  background: var(--theme-color-background);
  color: var(--theme-color-text);
  cursor: pointer;
  font-size: var(--theme-text-sm);
  transition: all 0.2s;
}

.np-gallery-slideshow-btn:hover {
  background: var(--theme-color-text);
  color: var(--theme-color-background);
  border-color: var(--theme-color-text);
}

.np-gallery-slideshow-btn--disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.np-gallery-slideshow-placeholder {
  background: var(--theme-color-rule);
  height: var(--gallery-image-height, calc(16 * var(--line-height-px)));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color-text-muted);
}

/* =============================================================================
   Post Detail Styles
   =============================================================================
*/

/* Hero Image */
.np-post-hero {
  margin: 0;
}

.np-post-hero-image {
  width: 100%;
  height: auto;
  display: block;
}

.np-post-hero-caption {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Baseline alignment */
  color: var(--theme-color-text-muted);
  margin-top: var(--space-1);  /* Full baseline unit */
  font-style: italic;
}

/* Post Header */
.np-post-header {
  border-bottom: 1px solid var(--theme-color-rule);
  padding-bottom: calc(var(--space-1) - 1px);  /* Compensate for 1px border */
}

.np-post-title {
  font-family: var(--theme-font-headline);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--theme-font-headline-weight);
  line-height: calc(2 * var(--line-height-px));
  margin: 0;
}

.np-post-intro {
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-lg);
  color: var(--theme-color-text-muted);
  line-height: var(--line-height-px);
  margin: 0;
}

.np-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-half);
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Absolute line-height for baseline alignment */
  color: var(--theme-color-text-muted);
}

.np-post-meta__author {
  display: flex;
  align-items: center;
  gap: var(--space-half);
}

.np-post-meta__avatar {
  width: calc(2 * var(--line-height-px));
  height: calc(2 * var(--line-height-px));
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.np-post-meta__avatar-placeholder {
  width: calc(2 * var(--line-height-px));
  height: calc(2 * var(--line-height-px));
  border-radius: 50%;
  background: var(--theme-color-surface);
  color: var(--theme-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--theme-text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.np-post-author a {
  color: var(--theme-color-text);
  font-weight: 500;
}

.np-post-author a:hover {
  color: var(--theme-color-accent);
}

/* Post Content - Flow layout with floated elements */
.np-post-content {
  font-family: var(--theme-font-body);
  font-size: var(--theme-base-font-size);
  line-height: var(--line-height-px);
  margin-top: var(--space-1-5);
}

.np-post-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Element Title/Headline */
.np-element-title {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-xl);
  font-weight: var(--theme-font-headline-weight);
  line-height: var(--line-height-px);
  margin: 0 0 var(--space-1) 0;  /* Full baseline unit */
  color: var(--theme-color-text);
}

.np-post-text {
  /* max-width: 65ch; */
}

.np-post-text p,
.np-post-text > div {
  margin: 0 0 var(--space-1);  /* Full line for baseline alignment */
}

.np-post-text h2,
.np-post-text h3 {
  font-family: var(--theme-font-headline);
  font-weight: var(--theme-font-headline-weight);
  line-height: var(--line-height-px);  /* Baseline alignment */
  margin: var(--space-1) 0;  /* Full baseline unit */
}

.np-post-text a {
  color: var(--theme-color-accent);
  text-decoration: underline;
}

/* Post Figures */
.np-post-figure {
  margin: 0;
}

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

.np-post-figure figcaption {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Baseline alignment */
  color: var(--theme-color-text-muted);
  margin-top: var(--space-1);  /* Full baseline unit */
  font-style: italic;
}

/* Pullquote */
.np-pullquote {
  border-left: 4px solid var(--theme-color-accent);
  padding-left: var(--space-1);
  margin: var(--space-1) 0;
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-xl);
  font-style: italic;
  line-height: var(--line-height-px);
}

.np-pullquote cite {
  display: block;
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Baseline alignment */
  font-style: normal;
  color: var(--theme-color-text-muted);
  margin-top: var(--space-1);  /* Full baseline unit */
}

/* Post Element - Column-based layout */
.np-post-element {
  margin-bottom: var(--space-1);
}

/* Full-width clears floats */
.np-post-element--full {
  clear: both;
  width: 100%;
}

/* Full-width section container */
.np-post-full {
  width: 100%;
  clear: both;
}

/* Two-column section container */
.np-post-columns {
  display: flex;
  gap: 4%;
}

.np-post-columns::after {
  content: "";
  display: table;
  clear: both;
}

/* Left column */
.np-post-column--left {
  flex: 1;
  min-width: 0;
}

/* Right column */
.np-post-column--right {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .np-post-columns {
    flex-direction: column;
    gap: 0;
  }
}

/* Post Gallery - Base */
.np-post-gallery {
  --gallery-gap: var(--space-half);
  --gallery-min-col: 200px;
}

.np-post-gallery-item {
  margin: 0;
}

.np-post-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.np-post-gallery-item figcaption {
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Baseline alignment */
  color: var(--theme-color-text-muted);
  margin-top: var(--space-1);  /* Full baseline unit */
}

/* Post Gallery - Grid Style */
.np-post-gallery--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--gallery-min-col), 1fr));
  gap: var(--gallery-gap);
}

.np-post-gallery--grid .np-post-gallery-item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Post Gallery - Slideshow Style */
.np-post-gallery--slideshow {
  position: relative;
  max-width: 800px;
}

.np-post-gallery--slideshow .np-slideshow-track {
  position: relative;
  overflow: hidden;
}

.np-post-gallery--slideshow .np-slideshow-slide {
  display: none;
}

.np-post-gallery--slideshow .np-slideshow-slide.is-active {
  display: block;
}

.np-post-gallery--slideshow .np-slideshow-slide img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}

.np-slideshow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-half);
  margin-top: var(--space-half);
}

.np-slideshow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--theme-color-rule);
  border-radius: 50%;
  background: var(--theme-color-background);
  color: var(--theme-color-text);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.np-slideshow-btn:hover {
  background: var(--theme-color-text);
  color: var(--theme-color-background);
  border-color: var(--theme-color-text);
}

.np-slideshow-counter {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  min-width: 60px;
  text-align: center;
}

/* Post Not Found */
.np-post-not-found {
  text-align: center;
}

.np-post-not-found h1 {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-2xl);
}

.np-btn {
  display: inline-block;
  padding: var(--space-1) var(--space-1);  /* Full baseline unit */
  background: var(--theme-color-text);
  color: var(--theme-color-background);
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Baseline alignment */
  text-decoration: none;
  margin-top: var(--space-1);  /* Full baseline unit */
}

.np-btn:hover {
  opacity: 0.9;
}

/* ==========================================================================
   Layout Tags - Framework-agnostic gallery/collection layouts
   These styles consume CSS custom properties output by Liquid layout tags
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid Layout
   Usage: {% grid collection columns: 3 gap: 16 %}
   -------------------------------------------------------------------------- */
[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
  gap: var(--gap, 16px);
}

[data-layout="grid"] > * {
  min-width: 0; /* Prevent grid blowout */
}

[data-layout="grid"] figure {
  margin: 0;
  width: 100%;
}

[data-layout="grid"] img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

[data-layout="grid"] figcaption {
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Baseline alignment */
  color: var(--theme-color-text-muted);
  margin-top: var(--space-1);  /* Full baseline unit */
}

/* Responsive: reduce columns on smaller screens */
@media (max-width: 768px) {
  [data-layout="grid"] {
    grid-template-columns: repeat(min(var(--columns, 3), 2), 1fr);
  }
}

@media (max-width: 480px) {
  [data-layout="grid"] {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Masonry Layout (CSS Columns)
   Usage: {% masonry collection columns: 3 gap: 16 %}
   -------------------------------------------------------------------------- */
[data-layout="masonry"] {
  column-count: var(--columns, 3);
  column-gap: var(--gap, 16px);
}

[data-layout="masonry"] > * {
  break-inside: avoid;
  margin-bottom: var(--gap, 16px);
}

[data-layout="masonry"] img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: reduce columns on smaller screens */
@media (max-width: 768px) {
  [data-layout="masonry"] {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  [data-layout="masonry"] {
    column-count: 1;
  }
}

/* --------------------------------------------------------------------------
   Mondrian Layout (Asymmetric Grid)
   Usage: {% mondrian collection columns: 4 row_height: 120 height_scale: 1.5 %}
   Tiles use: style="{{ tile.style }}" which outputs --col, --col-span, --row, --row-span
   Row height is responsive via clamp(--row-min, --row-vw, --row-max)
   -------------------------------------------------------------------------- */
[data-layout="mondrian"] {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
  grid-template-rows: repeat(var(--rows, 5), clamp(var(--row-min, 84px), var(--row-vw, 18vw), var(--row-max, 360px)));
  gap: 4px;
}

[data-layout="mondrian"] > * {
  grid-column: var(--col, 1) / span var(--col-span, 1);
  grid-row: var(--row, 1) / span var(--row-span, 1);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

[data-layout="mondrian"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-layout="mondrian"] figure {
  margin: 0;
  height: 100%;
  position: relative;
}

[data-layout="mondrian"] figure > a {
  display: block;
  width: 100%;
  height: 100%;
}

[data-layout="mondrian"] figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-half);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  font-size: var(--theme-text-sm);
}

/* Responsive: collapse to simpler grid on mobile */
@media (max-width: 768px) {
  [data-layout="mondrian"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 4px;
  }

  [data-layout="mondrian"] > * {
    grid-column: auto;
    grid-row: auto;
  }

  [data-layout="mondrian"] img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

@media (max-width: 480px) {
  [data-layout="mondrian"] {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Slider Layout (One at a time, prev/next navigation)
   Usage: {% slider collection autoplay: 5000 %}
   -------------------------------------------------------------------------- */
[data-layout="slider"] {
  position: relative;
  max-width: 100%;
}

[data-layout="slider"] [data-slider-track] {
  position: relative;
  overflow: hidden;
}

[data-layout="slider"] [data-slider-track] > * {
  display: none;
}

[data-layout="slider"] [data-slider-track] > *.is-active,
[data-layout="slider"] [data-slider-track] > *:first-child:not(.is-hidden) {
  display: block;
}

[data-layout="slider"] img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  display: block;
}

[data-layout="slider"] figure {
  margin: 0;
}

[data-layout="slider"] figcaption {
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Baseline alignment */
  color: var(--theme-color-text-muted);
  margin-top: var(--space-1);  /* Full baseline unit */
  text-align: center;
}

[data-layout="slider"] [data-slider-nav] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-half);
  margin-top: var(--space-half);
}

[data-layout="slider"] [data-slider-prev],
[data-layout="slider"] [data-slider-next] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--theme-color-rule);
  border-radius: 50%;
  background: var(--theme-color-background);
  color: var(--theme-color-text);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

[data-layout="slider"] [data-slider-prev]:hover,
[data-layout="slider"] [data-slider-next]:hover {
  background: var(--theme-color-text);
  color: var(--theme-color-background);
  border-color: var(--theme-color-text);
}

[data-layout="slider"] [data-slider-prev]::before {
  content: "\2039"; /* ‹ */
  font-size: 24px;
  line-height: 1;
}

[data-layout="slider"] [data-slider-next]::before {
  content: "\203A"; /* › */
  font-size: 24px;
  line-height: 1;
}

[data-layout="slider"] [data-slider-counter] {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  min-width: 60px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Carousel Layout (Horizontal scroll, multiple visible)
   Usage: {% carousel collection visible: 3 gap: 16 %}
   -------------------------------------------------------------------------- */
[data-layout="carousel"] {
  position: relative;
}

[data-layout="carousel"] [data-carousel-track] {
  display: flex;
  gap: var(--gap, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

[data-layout="carousel"] [data-carousel-track]::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

[data-layout="carousel"] [data-carousel-track] > * {
  flex: 0 0 calc((100% - (var(--visible, 3) - 1) * var(--gap, 16px)) / var(--visible, 3));
  scroll-snap-align: start;
  min-width: 0;
}

[data-layout="carousel"] img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

[data-layout="carousel"] figure {
  margin: 0;
}

[data-layout="carousel"] figcaption {
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);  /* Baseline alignment */
  color: var(--theme-color-text-muted);
  margin-top: var(--space-1);  /* Full baseline unit */
}

[data-layout="carousel"] [data-carousel-nav] {
  display: flex;
  justify-content: center;
  gap: var(--space-half);
  margin-top: var(--space-half);
}

[data-layout="carousel"] [data-carousel-prev],
[data-layout="carousel"] [data-carousel-next] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--theme-color-rule);
  border-radius: 50%;
  background: var(--theme-color-background);
  color: var(--theme-color-text);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

[data-layout="carousel"] [data-carousel-prev]:hover,
[data-layout="carousel"] [data-carousel-next]:hover {
  background: var(--theme-color-text);
  color: var(--theme-color-background);
  border-color: var(--theme-color-text);
}

[data-layout="carousel"] [data-carousel-prev]::before {
  content: "\2039"; /* ‹ */
  font-size: 20px;
  line-height: 1;
}

[data-layout="carousel"] [data-carousel-next]::before {
  content: "\203A"; /* › */
  font-size: 20px;
  line-height: 1;
}

[data-layout="carousel"] [data-carousel-indicators] {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: var(--space-half);
}

[data-layout="carousel"] [data-carousel-indicator] {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--theme-color-rule);
  cursor: pointer;
  transition: background-color 0.2s;
}

[data-layout="carousel"] [data-carousel-indicator].is-active,
[data-layout="carousel"] [data-carousel-indicator]:hover {
  background: var(--theme-color-text);
}

/* Responsive: show fewer items on smaller screens */
@media (max-width: 768px) {
  [data-layout="carousel"] [data-carousel-track] > * {
    flex: 0 0 calc((100% - var(--gap, 16px)) / 2);
  }
}

@media (max-width: 480px) {
  [data-layout="carousel"] [data-carousel-track] > * {
    flex: 0 0 100%;
  }
}
/* ==========================================================================
   BREADCRUMBS - Cascading URL parent chain
   ==========================================================================
   Renders: Home / Parent / Child / Current
   Uses UI font at small size, muted color, inline layout.
   Height = 1 line for baseline grid alignment.
*/
.np-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-half);
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  line-height: var(--line-height-px);
  color: var(--theme-color-text-muted);
  height: var(--line-height-px);
  overflow: hidden;
}

.np-breadcrumbs__link {
  color: var(--theme-color-text-muted);
  text-decoration: none;
}

.np-breadcrumbs__link:hover {
  color: var(--theme-color-accent);
  text-decoration: underline;
}

.np-breadcrumbs__sep {
  color: var(--theme-color-rule);
  user-select: none;
}

.np-breadcrumbs__current {
  color: var(--theme-color-text);
  font-weight: 500;
}

/* ==========================================================================
   PAGINATION - Page navigation controls
   ==========================================================================
   Renders: « Previous | 1 2 ... 5 | Next »
   Newspaper-style: understated, typographic, centered.
   Height = 2 lines (content + spacing).
*/
.np-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-half);
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);
  padding-top: var(--space-1);
  border-top: 1px solid var(--theme-color-rule);
  margin-top: calc(var(--space-1) - 1px);
}

.np-pagination__pages {
  display: flex;
  gap: 2px;
}

.np-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--line-height-px);
  height: var(--line-height-px);
  padding: 0 4px;
  color: var(--theme-color-text-muted);
  text-decoration: none;
}

.np-pagination__page:hover {
  color: var(--theme-color-accent);
  text-decoration: none;
}

.np-pagination__current {
  color: var(--theme-color-text);
  font-weight: 600;
  background: var(--theme-color-rule);
}

.np-pagination__prev,
.np-pagination__next {
  color: var(--theme-color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.np-pagination__prev:hover,
.np-pagination__next:hover {
  color: var(--theme-color-accent);
  text-decoration: none;
}

.np-pagination__ellipsis {
  color: var(--theme-color-text-muted);
  pointer-events: none;
}

.np-pagination__disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* == Section: content/post_detail == */
/* == Section: content/post_detail == */

/* 1. Element Spacing: ONLY bottom margin of post element containers */
/* Target the major blocks in the content area */
.np-post-element-group,
.np-post-full,
.np-post-columns,
.np-post-column > * {
  margin-top: 0 !important;
  margin-bottom: var(--element-spacing, 24px) !important;
}

/* 2. Internal Spacing: ONLY bottom margin of HTML elements WITHIN a post element */

/* Rich Text children */
.np-element-title,
.np-post-text h2,
.np-post-text h3 {
  margin-top: 0 !important;
  margin-bottom: var(--internal-spacing, var(--space-1)) !important;
}

.np-post-text p {
  margin-top: 0 !important;
  margin-bottom: var(--space-1) !important;  /* Full line for baseline alignment */
}

/* Ensure last paragraph doesn't add extra space to the element container */
.np-post-text p:last-child {
  margin-bottom: 0 !important;
}

/* Media children (Image/Video/Gallery to Caption) */
.np-post-figure img,
.np-post-video .np-aspect-video,
[data-layout="grid"],
[data-layout="masonry"],
[data-layout="mondrian"],
[data-layout="slider"],
[data-layout="carousel"] {
  margin-bottom: var(--internal-spacing, 8px) !important;
}

/* Pullquote children */
.np-pullquote p {
  margin-bottom: var(--internal-spacing, 8px) !important;
}

/* 3. PROTECT THE HEADER: Baseline-aligned spacing */
.np-post-header {
  margin-top: 0 !important;
  margin-bottom: var(--space-1) !important; /* 1 line */
}

.np-post-header > * {
  margin-top: 0 !important;
}

.np-post-title { margin-bottom: var(--space-1) !important; }  /* Full line for baseline */
.np-post-intro { margin-bottom: var(--space-1) !important; }  /* Full line for baseline */
/* .np-category baseline alignment handled by cap unit in main styles */

/* Reset content wrapper */
.np-post-content { margin-top: 0 !important; }
/* == End Section: content/post_detail == */

/* == Post Extras: Blog Context, Navigation, Related Posts == */

/* Blog context link ("Published in [Blog]") */
.np-post-blog-context {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  margin-bottom: var(--space-half);
  line-height: var(--line-height-px);
}

.np-post-blog-context a {
  color: var(--theme-color-accent);
  text-decoration: none;
}

.np-post-blog-context a:hover {
  text-decoration: underline;
}

/* Post Navigation (prev/next) */
.np-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin-top: calc(var(--line-height-px) * 3);
  padding-top: var(--space-1);
  border-top: var(--theme-divider-thin);
}

.np-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  padding: var(--space-half) 0;
}

.np-post-nav__next {
  text-align: right;
}

.np-post-nav__label {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  color: var(--theme-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.np-post-nav__title {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-base);
  color: var(--theme-color-text);
  line-height: var(--line-height-px);
}

a.np-post-nav__link:hover .np-post-nav__title {
  color: var(--theme-color-accent);
}

/* Related Posts */
.np-related-posts {
  margin-top: calc(var(--line-height-px) * 3);
  padding-top: var(--space-1);
  border-top: var(--theme-divider-thin);
}

.np-category--sm {
  font-size: var(--theme-text-xs);
}

/* == End Post Extras == */

/* == Section: content/collection == */

.np-collection-hero {
  line-height: 0;
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.np-collection-hero__image {
  width: 100%;
  height: var(--collection-hero-height, calc(12 * var(--line-height-px)));
  object-fit: cover;
}

/* == End Section: content/collection == */

/* == Shared: listing meta (blog, tag, collection) == */

.np-listing-meta {
  margin-bottom: var(--space-1);
}

.np-listing-meta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.np-listing-meta__row > *:not(:last-child)::after {
  content: "\00b7";
  margin-left: var(--space-1);
}

.np-listing-rss {
  color: var(--theme-color-accent);
  text-decoration: none;
}

.np-listing-rss:hover {
  text-decoration: underline;
}

/* == End: listing meta == */

/* == Section: content/blogs_overview == */

.np-blog-card {
  border-bottom: 1px solid var(--theme-color-rule);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-1);
}

.np-blog-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.np-blog-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.np-blog-card__link:hover .np-blog-card__title {
  color: var(--theme-color-accent);
}

.np-blog-card__image-wrapper {
  line-height: 0;
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.np-blog-card__image {
  width: 100%;
  height: var(--blog-card-image-height, calc(8 * var(--line-height-px)));
  object-fit: cover;
}

.np-blog-card__content {
  display: flex;
  flex-direction: column;
}

.np-blog-card__title {
  line-height: var(--line-height-px);
  margin: 0;
  transition: color 0.2s;
}

.np-blog-card__description {
  line-height: var(--line-height-px);
  margin: var(--space-half) 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin-top: var(--space-half);
}

.np-blog-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-half);
}

.np-blog-card__avatar {
  width: calc(2 * var(--line-height-px));
  height: calc(2 * var(--line-height-px));
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.np-blog-card__avatar-placeholder {
  width: calc(2 * var(--line-height-px));
  height: calc(2 * var(--line-height-px));
  border-radius: 50%;
  background: var(--theme-color-surface);
  color: var(--theme-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--theme-text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.np-blog-card__author-name {
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text);
  line-height: var(--line-height-px);
}

.np-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.np-blog-card__meta > *:not(:last-child)::after {
  content: "\00b7";
  margin-left: var(--space-1);
}

.np-blog-card__status {
  font-style: italic;
}

/* == End Section: content/blogs_overview == */

/* == Section: content/search == */

.np-search-form-wrap {
  margin-bottom: var(--space-1);
}

.np-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-half);
}

.np-search-input-group {
  display: flex;
  border: 1px solid var(--theme-color-rule);
}

.np-search-input {
  flex: 1;
  padding: var(--space-half) var(--space-1);
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-base);
  line-height: var(--line-height-px);
  border: none;
  outline: none;
  background: transparent;
}

.np-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--line-height-px) * 2);
  background: var(--theme-color-text);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: var(--theme-text-lg);
}

.np-search-btn:hover {
  opacity: 0.85;
}

.np-search-modes {
  display: flex;
  gap: 4px;
}

.np-search-mode {
  padding: 4px 12px;
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--theme-color-rule);
  background: transparent;
  color: var(--theme-color-text-muted);
  cursor: pointer;
}

.np-search-mode--active {
  background: var(--theme-color-text);
  color: #fff;
  border-color: var(--theme-color-text);
}

.np-search-count {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-px);
}

.np-search-empty {
  padding: calc(var(--line-height-px) * 3) 0;
  text-align: center;
  font-family: var(--theme-font-body);
  color: var(--theme-color-text-muted);
}

.np-search-empty p:first-child {
  font-size: var(--theme-text-lg);
  color: var(--theme-color-text);
  margin-bottom: var(--space-half);
}

/* Search Result Cards */
.np-search-result {
  border-bottom: var(--theme-divider-thin);
}

.np-search-result__link {
  display: flex;
  gap: var(--space-1);
  text-decoration: none;
  color: inherit;
  padding: var(--space-half) 0;
}

.np-search-result--standard .np-search-result__link {
  flex-direction: column;
}

.np-search-result__image-wrapper {
  flex-shrink: 0;
  width: 120px;
}

.np-search-result--standard .np-search-result__image-wrapper {
  width: 100%;
}

.np-search-result__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.np-search-result__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.np-search-result__title {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-base);
  color: var(--theme-color-text);
  line-height: var(--line-height-px);
}

.np-search-result:hover .np-search-result__title {
  color: var(--theme-color-accent);
}

.np-search-result__excerpt {
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  line-height: var(--line-height-px);
}

.np-search-result__meta {
  display: flex;
  align-items: center;
  gap: var(--space-half);
}

.np-search-result__date {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  color: var(--theme-color-text-muted);
}

.np-search-score {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 2px;
}

.np-search-score--high {
  background: #dcfce7;
  color: #166534;
}

.np-search-score--medium {
  background: #fef9c3;
  color: #854d0e;
}

.np-search-score--low {
  background: #fee2e2;
  color: #991b1b;
}

/* == End Section: content/search == */

/* == Search Modal == */

.np-search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.np-search-modal[hidden] {
  display: none;
}

.np-search-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.np-search-modal__content {
  position: relative;
  width: 90%;
  max-width: 640px;
  max-height: 70vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.np-search-modal__header {
  display: flex;
  align-items: center;
  border-bottom: var(--theme-divider-thin);
  padding: 0 var(--space-1);
}

.np-search-modal__input-group {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--space-half);
}

.np-search-modal__icon {
  font-size: var(--theme-text-lg);
  color: var(--theme-color-text-muted);
}

.np-search-modal__input {
  flex: 1;
  padding: var(--space-1) 0;
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-lg);
  line-height: var(--line-height-px);
  border: none;
  outline: none;
  background: transparent;
}

.np-search-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--theme-color-rule);
  cursor: pointer;
  font-size: var(--theme-text-lg);
  color: var(--theme-color-text-muted);
}

.np-search-modal__close:hover {
  color: var(--theme-color-text);
}

.np-search-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-half) 0;
}

.np-search-modal__hint {
  padding: calc(var(--line-height-px) * 2) var(--space-1);
  text-align: center;
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
}

.np-search-modal__shortcut {
  margin-top: var(--space-half);
  font-size: var(--theme-text-xs);
}

.np-search-modal__shortcut kbd {
  padding: 2px 6px;
  border: 1px solid var(--theme-color-rule);
  border-radius: 3px;
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  background: #f9fafb;
}

.np-search-modal__empty {
  padding: calc(var(--line-height-px) * 2) var(--space-1);
  text-align: center;
  font-family: var(--theme-font-ui);
  color: var(--theme-color-text-muted);
}

.np-search-modal__result {
  display: flex;
  gap: var(--space-half);
  padding: var(--space-half) var(--space-1);
  text-decoration: none;
  color: inherit;
}

.np-search-modal__result:hover {
  background: #f9fafb;
}

.np-search-modal__result-image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.np-search-modal__result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.np-search-modal__result-title {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-base);
  color: var(--theme-color-text);
  line-height: var(--line-height-px);
}

.np-search-modal__result-excerpt {
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  line-height: var(--line-height-px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-search-modal__footer {
  border-top: var(--theme-divider-thin);
  padding: var(--space-half) var(--space-1);
  text-align: center;
}

.np-search-modal__view-all {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-accent);
  text-decoration: none;
}

.np-search-modal__view-all:hover {
  text-decoration: underline;
}

/* == End Search Modal == */

/* == Section: cta/cta == */

.np-cta {
  padding: var(--section-padding, calc(var(--line-height-px) * 3)) 0;
  background-color: var(--section-bgcolor, transparent);
  color: var(--section-text-color, var(--theme-color-text));
  text-align: center;
}

.np-cta__heading {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-2xl);
  line-height: calc(var(--line-height-px) * 2);
  margin-bottom: var(--space-half);
}

.np-cta__body {
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-base);
  line-height: var(--line-height-px);
  color: var(--section-text-color, var(--theme-color-text-muted));
  max-width: 640px;
  margin: 0 auto var(--space-1);
}

.np-cta__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-half);
  flex-wrap: wrap;
}

.np-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-half) calc(var(--space-1) * 1.5);
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  line-height: var(--line-height-px);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.np-cta__btn:hover {
  opacity: 0.85;
}

.np-cta__btn--primary {
  background: var(--section-accent-color, var(--theme-color-text));
  color: #fff;
}

.np-cta__btn--secondary {
  background: transparent;
  border: 1px solid var(--section-accent-color, var(--theme-color-text));
  color: var(--section-accent-color, var(--theme-color-text));
}

/* == End Section: cta/cta == */

/* == Section: authentication/social_login == */

.np-social-login__subheading {
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  line-height: var(--line-height-px);
  margin: 0 0 var(--line-height-px) 0;
}

.np-social-login__buttons {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Override default login-form-btn to snap to baseline grid */
.np-social-login .login-form-btn {
  height: calc(2 * var(--line-height-px));
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  line-height: var(--line-height-px);
  border: 1px solid var(--theme-color-rule);
  border-radius: 0;
  background: var(--theme-color-bg);
  color: var(--theme-color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-half);
  padding: 0 var(--space-1);
  width: 100%;
}

.np-social-login .login-form-btn:hover {
  background: var(--theme-color-surface, #f5f5f5);
}

.np-social-login__welcome {
  font-family: var(--theme-font-body);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text-muted);
  line-height: var(--line-height-px);
}

.np-social-login__logout {
  background: none;
  border: none;
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-accent);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* == End Section: authentication/social_login == */

/* == Section: nav/mobile == */

.np-mobile-nav-container {
  display: none;
}

@media (max-width: 768px) {
  .np-mobile-nav-container {
    display: block;
  }

  /* Hide desktop nav elements on mobile */
  .np-topbar,
  .np-nav {
    display: none;
  }
}

.np-mobile-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.np-mobile-nav-toggle__line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--theme-color-text);
}

.np-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.np-mobile-nav.is-open {
  transform: translateX(0);
}

.np-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1);
  border-bottom: var(--theme-divider-thin);
}

.np-mobile-nav__title {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--theme-color-text-muted);
}

.np-mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--theme-text-xl);
  color: var(--theme-color-text-muted);
}

.np-mobile-nav__links {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-half) 0;
}

.np-mobile-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-half);
  padding: var(--space-half) var(--space-1);
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-lg);
  color: var(--theme-color-text);
  text-decoration: none;
  line-height: calc(var(--line-height-px) * 2);
  border-bottom: var(--theme-divider-hairline, 1px solid #f3f4f6);
}

.np-mobile-nav__link:hover {
  color: var(--theme-color-accent);
}

/* == End Section: nav/mobile == */

/* == Section: sidebar/recent_posts == */

.np-sidebar-widget__heading {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--theme-color-text-muted);
  padding-bottom: var(--space-half);
  border-bottom: var(--theme-divider-thin);
  margin-bottom: var(--space-half);
  line-height: var(--line-height-px);
}

.np-sidebar-posts {
  display: flex;
  flex-direction: column;
}

.np-sidebar-post {
  display: flex;
  gap: var(--space-half);
  padding: var(--space-half) 0;
  text-decoration: none;
  color: inherit;
  border-bottom: var(--theme-divider-hairline, 1px solid #f3f4f6);
}

.np-sidebar-post:last-child {
  border-bottom: none;
}

.np-sidebar-post__image {
  flex-shrink: 0;
  width: 80px;
  height: var(--sidebar-image-height, calc(var(--line-height-px) * 3));
  object-fit: cover;
}

.np-sidebar-post__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.np-sidebar-post__title {
  font-family: var(--theme-font-headline);
  font-size: var(--theme-text-sm);
  color: var(--theme-color-text);
  line-height: var(--line-height-px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-sidebar-post:hover .np-sidebar-post__title {
  color: var(--theme-color-accent);
}

.np-sidebar-post__date {
  font-family: var(--theme-font-ui);
  font-size: var(--theme-text-xs);
  color: var(--theme-color-text-muted);
}

/* == End Section: sidebar/recent_posts == */


/*
 * Newspaper Theme - CSS Variables
 * ================================
 * Generated from theme settings via Liquid.
 * These variables override the defaults in framework.css
 */

:root {
  /* Typography - Font Families (compound: family, weight, style) */--theme-font-headline: 'Playfair Display', Georgia, serif;
  --theme-font-headline-weight: 700;
  --theme-font-headline-style: normal;--theme-font-body: 'Merriweather', Georgia, serif;
  --theme-font-body-weight: 400;
  --theme-font-body-style: normal;--theme-font-ui: 'Playfair Display', system-ui, sans-serif;
  --theme-font-ui-weight: 600;
  --theme-font-ui-style: normal;

  /* ==========================================================================
     BASELINE GRID TYPOGRAPHY
     Defaults must match _baseline_typography.html.erb macro defaults:
     base_font_size: 16, body_line_height: 1.5, heading_line_height: 1.25
     ========================================================================== */--theme-base-font-size: 17px;
  --theme-body-line-height: 1.5;
  --theme-heading-line-height: 1.5;

  /* THE fundamental unit - all vertical spacing derives from this */
  --line-height-px: calc(var(--theme-base-font-size) * var(--theme-body-line-height));

  /* ==========================================================================
     SPACING SCALE (in text lines)
     ========================================================================== */
  --space-half: calc(0.5 * var(--line-height-px));
  --space-1: var(--line-height-px);
  --space-1-5: calc(1.5 * var(--line-height-px));
  --space-2: calc(2 * var(--line-height-px));
  --space-3: calc(3 * var(--line-height-px));
  --space-4: calc(4 * var(--line-height-px));
  --space-5: calc(5 * var(--line-height-px));
  --space-6: calc(6 * var(--line-height-px));

  /* Developer Tools - Fixed Baseline Grid */
  --theme-baseline-grid-color: #0407c7;
  --theme-show-baseline-grid: 0;

  /* Developer Tools - Section Baseline Grid (scrolls with content) */
  --theme-section-baseline-grid-color: #110ed4;
  --theme-show-section-baseline-grid: 0;

  /* Colors (from theme settings) */
  --theme-color-text: #454444;
  --theme-color-text-muted: #313131;
  --theme-color-background: #eae1d6;
  --theme-color-accent: #e8011c;
  --theme-color-rule: #a87676;

  /* Layout (from theme settings) */
  --theme-content-width: 1400px;
  /* Gutter in baseline units (lines) - calculated from setting */--theme-gutter: calc(1 * var(--line-height-px));

  /* ==========================================================================
     DIVIDERS - Base + Multipliers System
     One slider controls the base, semantic levels scale proportionally.
     ========================================================================== */--theme-divider-base: 1px;
  --theme-divider-thin: var(--theme-divider-base);
  --theme-divider-medium: calc(2 * var(--theme-divider-base));
  --theme-divider-thick: calc(3 * var(--theme-divider-base));

  /* Effects */
  --theme-image-grayscale: 1;
}


/*
 * Newspaper Theme - CSS Entry Point
 * ==================================
 * This theme uses pure CSS (framework.css) with CSS custom properties.
 * Font declarations are in _fonts.css.
 *
 * The CSS variables in _variables.css.liquid override the defaults
 * defined in framework.css based on theme settings.
 */

/* Self-hosted font declarations */
/*
 * Newspaper Theme - Self-Hosted Fonts
 * ====================================
 * @font-face declarations for bundled fonts.
 * These load from the theme's assets/fonts/ directory.
 */

/* UnifrakturMaguntia - Blackletter for masthead */
@font-face {
  font-family: 'UnifrakturMaguntia';
  src: url('fonts/unifrakturmaguntia-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Playfair Display - Elegant serif for headlines */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Lora - Contemporary serif for body text */
@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Merriweather - Screen-optimized serif */
@font-face {
  font-family: 'Merriweather';
  src: url('fonts/merriweather-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter - Clean sans-serif for UI elements */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* No additional styles needed - everything is in framework.css */