/*
 * Faith Matters Publication Styles
 *
 * Consolidated browser stylesheet for weekly FM issue pages.
 * Keep issue-mobile.css separate for responsive overrides.
 */


/* Variables
   ========= */

/*
 * Faith Matters v1 — design tokens
 *
 * Every value is measured from TEMPLATE_interpreted.json (FM email TEMPLATE v1.7.ai).
 * Each section-specific metric carries a comment with its JSON source.
 *
 * No invented padding. No round-number "friendly" spacing. The artboard
 * has intentional asymmetry; tokens preserve it.
 *
 * Dev-only authoring sugar. The inliner resolves every var() to a literal
 * before juice runs.
 */

:root {

  /* ─────────────────────────────────────────────────────────────
   * SEMANTIC COLORS — every design color points at the editorial
   * palette below. The palette is the source of truth; semantic
   * tokens are the names modules use.
   *
   * Where the TEMPLATE JSON specified a color that isn't in the
   * palette, it's been re-mapped to the nearest palette token.
   * Documented in RECONCILIATION.md.
   * ───────────────────────────────────────────────────────────── */

  --fm-color-hero-green:      var(--fm-color-sage-2);   /* was #8DC63F (TEMPLATE) → sage-2 */
  --fm-color-gold:            #A27E2D;                  /* LOCKED — original TEMPLATE gold, kept outside the palette for rules / bar / dividers */
  --fm-color-body-brown:      var(--fm-color-tan-4);    /* was #673D09 (TEMPLATE) → tan-4 */
  --fm-color-q-photo-bg:      var(--fm-q-green-1);      /* Q-section outer wrapper — lightest green */
  --fm-color-q-photo-inner:   var(--fm-q-green-3);      /* Q-section inner photo+headline panel — medium-dark green */
  --fm-color-q-photo-image:   var(--fm-q-green-5);      /* fallback bg behind photo cell when no image */
  --fm-color-q-marker:        var(--fm-q-green-2);      /* Q: glyph color */
  --fm-color-q-text:          var(--fm-q-green-5);      /* Q-section dark accent text */
  --fm-color-button-bg:       var(--fm-q-green-3);      /* canonical button bg (Q-section MORE button) */
  --fm-color-legal-bg:        #D1D3D4;                  /* JSON-exact neutral gray; intentionally outside the tan palette */
  --fm-color-basic-bg:        var(--fm-color-tan-1);    /* basic-section panel — lightest tan */

  --fm-color-button-stroke:   #FFFFFF;                  /* structural — outside the palette */
  --fm-color-white:           #FFFFFF;                  /* structural */
  --fm-color-canvas-bg:       #FFFFFF;                  /* structural */
  --fm-color-page-surround:   #6B6B6B;                  /* structural — outside the 600px canvas */

  /* ─────────────────────────────────────────────────────────────
   * EDITORIAL PALETTE — 5 families × 4 shades each (20 colors)
   * Source: assets/colors/colors_1_interpreted.json
   * Shade 1 = lightest, shade 4 = darkest (left → right on the artboard).
   *
   * Family overlaps with JSON-locked structural colors:
   *   sage-2 (#92AB71) = Q-marker glyph color
   *   sage-3 (#547332) = Q-section text + button fill
   * Both keep their semantic Q-section tokens below; this palette
   * just formalizes the family they belong to.
   *
   * The tan family does NOT include #A27E2D (the TEMPLATE-locked gold
   * used by rules / dividers / branded bar). That hex sits between
   * tan-2 and tan-3 — kept separate as --fm-color-gold above.
   * ───────────────────────────────────────────────────────────── */

  --fm-color-tan-1:    #DDD0B2;
  --fm-color-tan-2:    #C0AA7C;
  --fm-color-tan-3:    #90713D;
  --fm-color-tan-4:    #5E3D15;

  --fm-color-sage-1:   #C1D1AA;
  --fm-color-sage-2:   #92AB71;   /* same as --fm-color-q-marker */
  --fm-color-sage-3:   #547332;   /* same as --fm-color-q-text and --fm-color-button-bg */
  --fm-color-sage-4:   #243F0E;

  /* fray-blue: per-section palette for the IN-THE-FRAY section.
   * Naming convention: --fm-<section>-<hue>-<shade>. Other sections
   * will move to their own section-scoped palettes as the redesign
   * progresses. */
  --fm-fray-blue-1:    #D9E6EF;
  --fm-fray-blue-2:    #86A9C5;
  --fm-fray-blue-3:    #477098;
  --fm-fray-blue-4:    #2B527D;

  /* virtue-brown: per-section palette for the VIRTUE OF THE MONTH section.
   * 5 shades, lightest to darkest. -1 is the section bg; -3 is the
   * scripture box bg; -5 is the dark accent text/bracket/decoration. */
  --fm-virtue-brown-1: #E7DDC8;
  --fm-virtue-brown-2: #BDA67B;
  --fm-virtue-brown-3: #9B7D4B;
  --fm-virtue-brown-4: #7F5E2E;
  --fm-virtue-brown-5: #5E3D16;

  /* q-green: per-section palette for the Q-section (interview feature).
   * 5 shades, lightest to darkest. */
  --fm-q-green-1:      #D6E2C0;
  --fm-q-green-2:      #97B16D;
  --fm-q-green-3:      #6B8B3E;
  --fm-q-green-4:      #4C6D23;
  --fm-q-green-5:      #365614;

  --fm-color-peach-1:  #EFCEA8;
  --fm-color-peach-2:  #E0A66F;
  --fm-color-peach-3:  #C56D2F;
  --fm-color-peach-4:  #A2390D;

  --fm-color-mauve-1:  #CAB2C0;
  --fm-color-mauve-2:  #A07C91;
  --fm-color-mauve-3:  #653D52;
  --fm-color-mauve-4:  #321524;

  /* (--fm-color-basic-bg defined above as tan-1 — the active basic-section
   *  panel bg; swap to any of the 20 palette tokens per issue.) */

  /* ─────────────────────────────────────────────────────────────
   * TYPE  — Merriweather everywhere (loaded via Google Fonts in <head>).
   * Georgia is the fallback for Outlook desktop / Outlook mobile, which
   * strip the @import and fall back along the stack.
   * Sans stack still Arial for the button (Trend Sans in JSON).
   * ───────────────────────────────────────────────────────────── */

  --fm-font-serif: "Merriweather", Georgia, "Times New Roman", Times, serif;
  --fm-font-sans:  Arial, Helvetica, sans-serif;

  --fm-fs-headline:    32px;   /* JSON: "new SECTION" Merriweather 32.3px */
  --fm-fs-body:        16px;   /* JSON: body Lorem ipsum Merriweather 16px */
  --fm-fs-question:    18px;   /* JSON: "Question here..." Merriweather 18px */
  --fm-fs-q-marker:    43px;   /* JSON: "Q:" Merriweather 42.9px */
  --fm-fs-button:      14px;   /* JSON: "more" Trend Sans 14px */
  --fm-fs-legal:       16px;   /* LOCKED — legal copy must match body size at all times (compliance requirement) */

  /* ─────────────────────────────────────────────────────────────
   * LAYOUT  — canvas, margins, body insets (JSON measurements)
   * ───────────────────────────────────────────────────────────── */

  --fm-width:                 600px;        /* JSON canvas width */
  --fm-margin-outer:          42px;         /* JSON: pink rails x=0–42 and x=558–600 */
  --fm-content-width:         516px;        /* 600 − 2×42 */
  --fm-body-inset:            36px;         /* JSON: basic/Q body text x=36 w=528 → 36px each side */
  --fm-legal-inset:           42px;         /* JSON: legal text x=42 w=515 → 42px each side */

  /* ─────────────────────────────────────────────────────────────
   * HEADER IMAGE  (the green hero + gold bar) — JSON y=0–382
   * ───────────────────────────────────────────────────────────── */

  --fm-hero-height:           360px;        /* JSON: green rect h=360 */
  --fm-gold-bar-height:       22px;         /* JSON: gold rect 600×22 at y=360 */

  /* ─────────────────────────────────────────────────────────────
   * BASIC SECTION  (the gold panel + bracketed headline + body)
   * JSON: panel rect 600×294 fill #A27E2D at y=704
   * ───────────────────────────────────────────────────────────── */

  --fm-basic-panel-height:    294px;        /* JSON: panel h=294 */
  --fm-basic-bracket-rule-w:  60px;         /* JSON: stroke x=114 w=60 (left) and x=425 w=60 (right) */
  --fm-basic-bracket-tick-h:  30px;         /* JSON: stroke x=175 h=30 (vertical tick centered on rule y=761) */
  --fm-basic-bracket-rule-y:  15px;         /* tick height/2 — vertical tick extends 15px above and below the rule */

  /* Headline bracket-to-text gap — single token controls the space between the
   * bracket inner edge and the headline text on BOTH sides.
   * Overrides the asymmetric 17/22px JSON measurements (kept above for audit). */
  --fm-headline-bracket-gap:  20px;

  /* Headline bracket geometry — the bracket is a `]` / `[` shape:
   *   top horizontal + connecting vertical + bottom horizontal.
   *   The vertical sits at the inner end (toward the headline).
   *   Distance between top and bottom horizontals = bracket-height. */
  --fm-headline-bracket-rule-w:  60px;
  --fm-headline-bracket-height:  32px;


  /* ─────────────────────────────────────────────────────────────
   * TRANSITION DIVIDER  (the gold "+" cross between sections)
   * JSON: rule stroke #A27E2D 1.22px full-width at y=438, y=998, y=2549
   *       cross — vertical x=300 y=406 h=21, horizontal x=295 y=414 w=10
   * Cross is 10w × 21h, centered, ~24px below the rule (rule y=438, cross y=406? Actually
   *   the cross at y=406-427 sits ABOVE the rule at y=438. So order: cross → rule.)
   * ───────────────────────────────────────────────────────────── */

  --fm-divider-rule-w:        1px;          /* JSON stroke 1.22 → 1px for email-safe */
  --fm-divider-cross-w:       10px;         /* JSON cross horizontal w=10 */
  --fm-divider-cross-h:       21px;         /* JSON cross vertical h=21 */

  /* ─────────────────────────────────────────────────────────────
   * Q: PHOTO SECTION  (olive panel + dark olive photo column + headline)
   * JSON: panel rect 600×188 fill #6F8C4C at y=1217
   *       photo rect 227×188 fill #33441C at y=1217 x=0
   *       headline text x=265 y=1248 w=100 (font outlined → 0px in JSON)
   *       bracket-above stroke #33441C  x=266 y=1302 w=70
   *       bracket-below stroke #33441C  x=266 y=1380 w=70
   * ───────────────────────────────────────────────────────────── */

  --fm-q-photo-panel-h:       188px;        /* JSON: panel h=188 */
  --fm-q-photo-image-w:       227px;        /* JSON: photo column w=227 */
  --fm-q-photo-content-x:     38px;         /* JSON: content text x=265 − photo right x=227 = 38 */
  --fm-q-photo-bracket-w:     70px;         /* JSON: bracket stroke w=70 */
  --fm-q-photo-headline-y:    31px;         /* JSON: headline y=1248 − panel y=1217 = 31 (from panel top to headline top) */
  --fm-q-photo-bracket-above: 54px;         /* JSON: bracket-above y=1302 − headline y=1248 = 54 */
  --fm-q-photo-bracket-below: 132px;        /* JSON: bracket-below y=1380 − headline y=1248 = 132 */

  /* ─────────────────────────────────────────────────────────────
   * Q: SPECIFIC ART  (Q-marker + L-bracket + question + body)
   * JSON: Q-marker  x=37  y=1440 w=43 h=- Merriweather 43px #92AB71 "Q:"
   *       L-bracket vertical   x=28 y=1447 h=30  #FFFFFF 0.76px
   *       L-bracket horizontal x=0  y=1462 w=28  #FFFFFF 0.76px
   *       question text x=94  y=1447 w=434  Merriweather 18px #547332
   *       body text     x=36  y=1512 w=528  Merriweather 16px #547332
   * ───────────────────────────────────────────────────────────── */

  --fm-q-art-marker-w:        60px;         /* visual column for the "Q:" glyph (43px text + breathing room to x=80) */
  --fm-q-art-marker-q-gap:    14px;         /* JSON: question x=94 − Q-marker right (37+43)=80 = 14 */
  --fm-q-art-bracket-h:       30px;         /* JSON: white vertical bracket h=30 */
  --fm-q-art-bracket-w:       28px;         /* JSON: white horizontal bracket w=28 */
  --fm-q-art-q-to-body:       65px;         /* JSON: body y=1512 − Q-marker y=1440 − ~7 baseline offset */

  /* ─────────────────────────────────────────────────────────────
   * BUTTON  (bulletproof CTA)
   * JSON: button rect 132×35 fill #547332 stroke #FFFFFF 2.29px at y=1884 x=237
   *       label "more" Trend Sans 14px #FFFFFF at y=1894 x=276 w=54
   * ───────────────────────────────────────────────────────────── */

  --fm-button-w:              190px;        /* Canonical Browser button width: matches SUBSCRIBE */
  --fm-button-h:              35px;         /* JSON button height */
  --fm-button-stroke-w:       2px;          /* JSON stroke 2.29 → 2px for email-safe */
  --fm-button-label-x:        39px;         /* JSON: label x=276 − button x=237 = 39 (left pad to label) */
  --fm-button-label-y:        10px;         /* JSON: label y=1894 − button y=1884 = 10 (top pad to label) */
  --fm-cta-space-before:      var(--fm-space-md);
  --fm-cta-space-after:       var(--fm-space-lg);
  --fm-cta-space-after-sm:    var(--fm-space-sm);

  /* ─────────────────────────────────────────────────────────────
   * LEGAL SECTION  (gray panel + body + gold top rule)
   * JSON: panel rect 600×335 fill #D1D3D4 at y=2214
   *       gold rule stroke #A27E2D 1.22px at y=2214 (panel top)
   *       gold rule stroke #A27E2D 1.22px at y=2549 (panel bottom)
   *       body text x=42 y=2256 w=515 — outlined text frame
   * ───────────────────────────────────────────────────────────── */

  --fm-legal-panel-h:         335px;        /* JSON: legal panel h=335 */
  --fm-legal-pad-top:         42px;         /* JSON: body y=2256 − panel y=2214 = 42 */
  --fm-legal-body-w:          515px;        /* JSON: body w=515 */

  /* ─────────────────────────────────────────────────────────────
   * PUBLICATION SPACER SCALE
   *
   * These are generic publication primitives. Do not create
   * issue-specific or component-specific spacer tokens.
   * ───────────────────────────────────────────────────────────── */

  --fm-space-xs:  6px;
  --fm-space-sm:  12px;
  --fm-space-md:  24px;
  --fm-space-lg:  40px;
  --fm-space-xl:  64px;

  /* Generic caption/subhead bar component. Sections supply color. */
  --fm-caption-min-height: 44px;
  --fm-caption-font-size: 16px;
  --fm-caption-line-height: 1.2;
  --fm-caption-padding-y:  12.4px;
  --fm-caption-padding-x:  36px;

  /* Shared browser article page system. */
  --fm-article-width: 780px;
  --fm-article-inset: 48px;
  --fm-article-inset-mobile: var(--fm-space-md);
  --fm-article-readable-inset: 36px;
  --fm-article-readable-inset-mobile: var(--fm-space-md);
  --fm-article-panel-inset: 40px;
  --fm-article-panel-inset-wide: 72px;
  --fm-article-section-pad-top: var(--fm-space-lg);
  --fm-article-section-pad-bottom: 30px;
  --fm-article-section-pad-bottom-mobile: 16px;
  --fm-article-section-gap: 30px;
  --fm-article-body-gap: 16px;
  --fm-article-narrative-gap: 20px;
  --fm-article-note-gap: 14px;
  --fm-article-source-gap: 20px;
  --fm-article-image-gap: 30px;
  --fm-article-note-inset: 12.5%;
  --fm-article-pullquote-inset: 20%;
  --fm-article-question-bg: #C9D8AF;
  --fm-article-footer-text: #808285;
  --fm-article-legal-text: #58595B;
  --fm-article-footer-pad-y: var(--fm-space-lg);
  --fm-article-footer-pad-y-mobile: 32px;
  --fm-article-legal-pad-y: 42px;
  --fm-article-button-height: var(--fm-button-h);
  --fm-article-button-radius: 6px;
  --fm-article-button-pad-x: 32px;
}


/* Reset
   ===== */

/*
 * Faith Matters v1 — email-safe reset
 *
 * Conservative reset. Every rule here addresses a known
 * client-specific quirk. Do not add anything cosmetic.
 *
 * Outlook desktop uses Word as its renderer; many rules below
 * are paired with conditional comments in template.html that
 * carry MSO-specific overrides.
 */

/* Page-level resets ---------------------------------------- */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100%;
  background: var(--fm-color-page-surround);
}

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: var(--fm-font-serif);
  color: var(--fm-color-body-brown);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.fm-bracket-mobile {
  display: none !important;
}

.fm-bracket-desktop {
  display: table !important;
}

/* Table normalization -------------------------------------- */
table {
  border-collapse: collapse !important;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  border-spacing: 0;
}

td {
  padding: 0;
  vertical-align: top;
}

/* Image normalization -------------------------------------- */
img {
  border: 0;
  outline: none;
  text-decoration: none;
  -ms-interpolation-mode: bicubic;
  display: block;
  max-width: 100% !important;
  height: auto !important;
  line-height: 100%;
}

.fm-q-stack {
  display: table;
  width: 100%;
  background: var(--fm-q-green-3);
}

.fm-q-photo-cell {
  display: table-cell;
  width: 250px;
  vertical-align: top;
  background: var(--fm-q-green-5);
}

.fm-q-headline-cell {
  display: table-cell;
  vertical-align: middle;
  padding: 20px 24px 20px 32px;
  color: var(--fm-color-white);
  background: var(--fm-q-green-3);
}

.fm-q-photo-img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  margin: 0 auto;
}

/* Canonical anchor state baseline -------------------------- */
:where(a, a:link, a:visited, a:hover, a:active, a:focus) {
  color: inherit;
  text-decoration: none;
}

:where(a:focus-visible) {
  outline: var(--fm-button-stroke-w) solid var(--fm-color-gold);
  outline-offset: var(--fm-button-stroke-w);
}

/* Yahoo + Apple Mail auto-link suppression
 * Apple Mail auto-detects dates / addresses / phone numbers
 * and rewrites them as blue links. Disable globally.        */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* Block-level resets --------------------------------------- */
p {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

/* Gmail wraps content in a div with class .gmail_default which
 * can leak font choices. Force inherit.                     */
div.gmail_default {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

@media screen and (max-width: 600px) {
  .fm-bracket-desktop {
    display: none !important;
  }

  .fm-bracket-mobile {
    display: table !important;
  }

  .fm-wrapper table[width="61"],
  .fm-wrapper td[width="61"] {
    width: 21px !important;
  }

  .fm-wrapper td[width="60"] {
    width: 20px !important;
  }

  .fm-wrapper .fm-virtue td[height="29"][align="center"] {
    padding: 0 12px !important;
    font-size: 22px !important;
    line-height: 29px !important;
    white-space: nowrap !important;
  }

  .fm-q-stack {
    display: block !important;
    width: 100% !important;
  }

  .fm-q-photo-cell {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .fm-q-headline-cell {
    display: block !important;
    width: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 20px 24px !important;
  }

  .fm-q-photo-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* Wrapper
   ======= */

/*
 * Module: wrapper
 *
 * Outer 600px canvas. The page surround color (#6B6B6B) sits OUTSIDE
 * the canvas — visible only in clients that render the body background
 * around the centered email table.
 */

.fm-wrapper {
  width: 100%;
  max-width: var(--fm-width);
  margin: 0 auto;
  background: var(--fm-color-canvas-bg);
  table-layout: fixed;
}

.fm-wrapper-cell {
  width: 100%;
  max-width: var(--fm-width);
  padding: 0;
  vertical-align: top;
}

@media screen and (max-width: 600px) {
  .fm-wrapper,
  .fm-wrapper > tbody,
  .fm-wrapper > tbody > tr,
  .fm-wrapper-cell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* Spacers
   ======= */

/*
 * Module: spacer
 *
 * Token-driven vertical gap. Used between sections per editorial composition,
 * not from TEMPLATE measurement (TEMPLATE shows pink "spacer" markers but
 * not their pixel values — those depend on how an issue is laid out).
 *
 * Spacer cells declare both data-fm-space="N" and height="<px>" AND inline
 * height style — different clients honor different attributes.
 */

.fm-spacer {
  line-height: 1px;
  font-size: 1px;
}

.fm-spacer--xs {
  height: var(--fm-space-xs);
}

.fm-spacer--small {
  height: var(--fm-space-sm);
}

.fm-spacer--medium {
  height: var(--fm-space-md);
}

.fm-spacer--large {
  height: var(--fm-space-lg);
}

.fm-spacer--xl {
  height: var(--fm-space-xl);
}


/* Header
   ====== */

/*
 * Module: header-image
 *
 * From TEMPLATE_interpreted.json:
 *   - Green placeholder rect 600×360 fill #8DC63F at y=0
 *   - Gold divider bar 600×22 fill #A27E2D at y=360 (full-width, sits flush)
 *
 * Annotation "header image always this size [image changes every week]"
 * (12pt Myriad Pro, y=170) confirms fixed-dimension hero, swapped per issue.
 *
 * The gold bar belongs to the header-image module as its closing
 * element — there is no spacer between hero and bar in the artboard.
 */

.fm-header-image {
  width: 100%;
}

.fm-header-image-cell {
  padding: 0;
  background: var(--fm-color-hero-green);
  height: var(--fm-hero-height);
  vertical-align: top;
}

.fm-header-image-cell img {
  display: block;
  width: var(--fm-width);
  height: var(--fm-hero-height);
  border: 0;
}

.fm-header-image-bar {
  width: 100%;
  height: var(--fm-gold-bar-height);
  background: var(--fm-color-gold);
  line-height: 1px;
  font-size: 1px;
}


/* Dividers
   ======== */

/*
 * Module: transition-divider
 *
 * From TEMPLATE_interpreted.json — the visual transition that appears
 * between sections on the artboard:
 *
 *   - Full-width gold rule, stroke #A27E2D 1.22px
 *     (observed at y=438, y=998, y=2549)
 *   - Small gold "+" cross mark below the rule:
 *     vertical stroke   x=300 y=406 h=21  #A27E2D 0.75px
 *     horizontal stroke x=295 y=414 w=10  #A27E2D 0.75px
 *     (so the cross is 10w × 21h, centered at x=300, ~24px below the rule)
 *
 * Renders as: a thin gold line spanning the canvas, then a centered
 * 10×21 gold cross with 8px hairline strokes.
 */

.fm-divider {
  width: 100%;
}

.fm-divider-rule {
  height: 1px;
  background: var(--fm-color-gold);
  line-height: 1px;
  font-size: 1px;
  width: 100%;
}

.fm-divider-gap {
  height: 24px;  /* JSON: rule y=438 − cross top y=414 = 24px between rule and cross center */
  line-height: 1px;
  font-size: 1px;
}

.fm-divider-cross-cell {
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

.fm-divider-cross {
  /* The cross is rendered as a 2-row × 3-col nested table.
   * Each segment is a 1px gold line on a transparent cell. */
  width: 10px;
  margin: 0 auto;
  border-collapse: collapse;
}

.fm-divider-cross-v {
  /* center column: full 21px tall, 1px wide vertical stroke */
  width: 1px;
  background: var(--fm-color-gold);
  line-height: 1px;
  font-size: 1px;
}

.fm-divider-cross-h-left,
.fm-divider-cross-h-right {
  /* horizontal arms: 1px tall, 5px wide on each side, gold */
  height: 1px;
  background: var(--fm-color-gold);
  line-height: 1px;
  font-size: 1px;
}


/* Feature Article
   =============== */

/*
 * Module: feature-article
 *
 * Browser/source components for long narrative feature sections. Text blocks
 * own paragraph rhythm only inside the block. Inserted components, such as
 * subheads, pull quotes, and photos, own their full vertical footprint.
 */

.fm-feature {
  --fm-feature-color: var(--fm-fray-blue-4);
  --fm-section-color: var(--fm-feature-color);
}

.fm-feature-art-card {
  --fm-feature-color: var(--fm-color-gold);
  --fm-section-color: var(--fm-color-gold);
  background: var(--fm-color-gold);
}

.fm-feature-banner {
  width: 100%;
  border-collapse: collapse;
  background: var(--fm-color-gold);
}

.fm-feature-banner-label {
  height: 40px;
  padding: 0;
  background: var(--fm-color-gold);
  font-family: var(--fm-font-sans);
  font-size: 14px;
  line-height: 40px;
  font-weight: 700;
  color: var(--fm-color-white);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
}

.fm-feature-art-card-copy {
  padding: 0 var(--fm-body-inset);
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-body);
  line-height: var(--fm-lh-body, 1.6);
  color: var(--fm-color-white);
  text-align: left;
}

.fm-feature-body {
  padding: 0 var(--fm-body-inset);
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-body);
  line-height: var(--fm-lh-body, 1.6);
  color: var(--fm-feature-color);
  text-align: left;
}

.fm-feature-body p {
  margin: 0;
}

.fm-feature-body p + p {
  margin-top: var(--fm-feature-paragraph-gap, 16px);
}

.fm-feature-subhead-cell {
  padding: var(--fm-space-md) var(--fm-body-inset) 0;
  font-family: var(--fm-font-sans);
  font-size: var(--fm-fs-body);
  line-height: var(--fm-lh-body, 1.6);
  color: var(--fm-feature-color);
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
}

.fm-gap--photo-before {
  height: var(--fm-space-lg);
}

.fm-gap--feature-title-before {
  height: var(--fm-space-md);
}

.fm-gap--feature-title-after {
  height: var(--fm-space-sm);
}

.fm-gap--photo-after {
  height: var(--fm-space-md);
}

.fm-gap--section-after {
  height: var(--fm-space-lg);
}

.fm-feature-photo {
  padding: 0;
  text-align: center;
}

.fm-feature-photo img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  border: 0;
}

.fm-feature-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  line-height: 0;
}

.fm-feature-photo-caption-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.62);
  font-family: var(--fm-font-serif);
  font-size: 14px;
  line-height: 1.4;
  font-style: italic;
  color: var(--fm-color-white);
  text-align: center;
}

.fm-feature-intro {
  padding: 0;
  background: var(--fm-feature-color);
}

.fm-feature-intro table {
  width: 95%;
  background: var(--fm-feature-color);
  border-collapse: collapse;
}

.fm-feature-intro-copy {
  padding: 25px var(--fm-body-inset);
  background: var(--fm-feature-color);
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-body);
  line-height: 25px;
  font-style: italic;
  color: var(--fm-color-white);
  text-align: center;
}

.fm-feature-pullquote-divider {
  padding: var(--fm-space-md) 0;
  text-align: center;
}

.fm-feature-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  margin: 0 auto;
}

.fm-feature-rule-dot {
  width: 5px;
  height: 5px;
  border: 1px solid var(--fm-feature-color);
  border-radius: 50%;
  flex-shrink: 0;
}

.fm-feature-rule-line {
  width: 150px;
  height: 1px;
  background: var(--fm-feature-color);
}

.fm-feature-pullquote {
  padding: 0 20%;
  font-family: var(--fm-font-serif);
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  font-weight: 700;
  color: var(--fm-feature-color);
  text-align: center;
}

.fm-feature-pullquote-mark {
  width: 5px;
  height: 5px;
  margin: 12px auto;
  background: var(--fm-feature-color);
  border-radius: 50%;
  line-height: 0;
  font-size: 0;
}

.fm-feature-pullquote-speaker {
  font-size: var(--fm-fs-body);
  line-height: 1.4;
  font-style: normal;
  font-weight: 700;
}

.fm-feature-end-note {
  padding: 0 var(--fm-body-inset);
  font-family: var(--fm-font-serif);
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
  color: var(--fm-feature-color);
  text-align: center;
}

.fm-feature-end-note-inner {
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .fm-feature-body {
    font-size: 20px;
    line-height: 1.5;
  }

  .fm-feature-pullquote {
    padding-left: var(--fm-body-inset);
    padding-right: var(--fm-body-inset);
  }
}


/* Basic Sections
   ============== */

/*
 * Module: section-basic   ★ LOCKED INVARIANT — only color may change ★
 *
 * The bracketed-headline structure below (─| ticks, 60px horizontal,
 * 30px vertical centered, 20px gap to headline, italic+bold mix) is
 * the JSON-spec design. The user explicitly locked it after multiple
 * wrong iterations. Do NOT modify shape, geometry, or positioning
 * without explicit user direction. Only color and headline text vary
 * per issue.
 * See: ~/.claude/projects/.../feedback_basic_section_bracket_invariant.md
 *
 * From TEMPLATE_interpreted.json (the canonical geometry):
 *   - Panel rect 600×294 fill #A27E2D at y=704
 *   - Headline text  y=745 x=192 w=211  Merriweather 32px #673D09  "new SECTION"
 *   - White bracket pairs flanking headline:
 *       LEFT  vertical   x=175 y=746 h=30
 *       LEFT  horizontal x=114 y=761 w=60
 *       RIGHT vertical   x=425 y=746 h=30
 *       RIGHT horizontal x=425 y=761 w=60
 *   - Body text  y=804 x=36 w=528  Merriweather 16px #673D09
 *
 * Vertical rhythm uses the shared publication spacer scale in Browser markup:
 * lg above the headline, md before the copy, and lg below the copy.
 * Bracket tick height: 30px (vertical extends 15px above and 15px below the rule).
 * Headline-side bracket gaps: 20px each side (--fm-headline-bracket-gap), single-token.
 */

.fm-basic {
  width: 100%;
  background: var(--fm-color-basic-bg);
}

.fm-basic-head { width: 100%; }

.fm-basic-head-rule-cell-l { vertical-align: middle; padding: 0; text-align: right; }
.fm-basic-head-rule-cell-r { vertical-align: middle; padding: 0; text-align: left; }

.fm-basic-head-rule {
  display: inline-block;
  width: var(--fm-basic-bracket-rule-w);
  height: 1px;
  background: var(--fm-color-white);
  font-size: 1px;
  line-height: 1px;
}

.fm-basic-head-tick-cell {
  width: 1px;
  padding: 0;
  vertical-align: middle;
}

.fm-basic-head-tick {
  width: 1px;
  height: var(--fm-basic-bracket-tick-h);
  background: var(--fm-color-white);
  font-size: 1px;
  line-height: 1px;
}

.fm-basic-head-text-cell-l { padding: 0; padding-left:  var(--fm-headline-bracket-gap); vertical-align: middle; text-align: left; }
.fm-basic-head-text-cell-r { padding: 0; padding-right: var(--fm-headline-bracket-gap); vertical-align: middle; text-align: right; }

.fm-basic-headline {
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-headline);
  line-height: 1;
  color: var(--fm-color-body-brown);
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  padding: 0;
}

.fm-basic-head-italic { font-style: italic; font-weight: 400; }
.fm-basic-head-bold   { font-style: normal; font-weight: 700; }

.fm-basic-body-cell {
  padding: 0 var(--fm-body-inset);
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-body);
  line-height: var(--fm-lh-body, 1.6);
  color: var(--fm-color-body-brown);
  text-align: left;
}

.fm-basic-body-cell p           { margin: 0; }
.fm-basic-body-cell p + p       { margin-top: 16px; }


/* Q Photo
   ======= */

/*
 * Module: section-q-photo
 *
 * From TEMPLATE_interpreted.json (annotation "Q: photo section" at y=1301):
 *   - Panel rect 600×188 fill #6F8C4C at y=1217
 *   - Photo column rect 227×188 fill #33441C at y=1217 x=0
 *   - Headline text at x=265 y=1248 w=100 (font outlined → 0px in JSON;
 *     rendered here as Georgia serif bold on white)
 *   - Bracket-above: stroke #33441C 0.76px  x=266 y=1302 w=70
 *   - Bracket-below: stroke #33441C 0.76px  x=266 y=1380 w=70
 *
 * Panel is full-width with photo column on the left (227px) and
 * content stack on the right starting at x=265 (38px gutter from photo).
 *
 * Vertical rhythm from JSON Y-deltas:
 *   31px  panel-top → headline-top   (1248−1217)
 *   54px  headline-top → bracket-above (1302−1248)
 *   78px  bracket-above → bracket-below (1380−1302)
 *   25px  bracket-below → panel-bottom (1405−1380)
 */

.fm-q-photo {
  width: 100%;
  background: var(--fm-color-q-photo-bg);
}

.fm-q-photo-row { width: 100%; }

.fm-q-photo-image-cell {
  width: var(--fm-q-photo-image-w);
  background: var(--fm-color-q-photo-image);
  vertical-align: top;
  padding: 0;
}

.fm-q-photo-image-cell img {
  display: block;
  width: var(--fm-q-photo-image-w);
  height: var(--fm-q-photo-panel-h);
  border: 0;
}

.fm-q-photo-content-cell {
  vertical-align: top;
  padding-top: var(--fm-q-photo-headline-y);
  padding-left: var(--fm-q-photo-content-x);
  padding-right: 24px;
  padding-bottom: 0;
  color: var(--fm-color-white);
}

.fm-q-photo-headline {
  font-family: var(--fm-font-serif);
  font-size: 22px;
  line-height: 1.1;
  color: var(--fm-color-white);
  /* italic/bold mix via inner <span>s in the template — matches the
     "new SECTION" treatment in section-basic for headline consistency */
  margin: 0;
}

.fm-q-photo-rule-above,
.fm-q-photo-rule-below {
  width: var(--fm-q-photo-bracket-w);
  height: 1px;
  background: var(--fm-color-q-photo-image);
  font-size: 1px;
  line-height: 1px;
  margin: 0;
  padding: 0;
}

.fm-q-photo-rule-gap-above { height: 22px; line-height: 1px; font-size: 1px; }
.fm-q-photo-rule-gap-below { height: 22px; line-height: 1px; font-size: 1px; }

.fm-q-photo-subhead {
  font-family: var(--fm-font-serif);
  font-size: 14px;
  line-height: 1.2;
  color: var(--fm-color-white);
  font-weight: 400;
  font-style: italic;
  margin: 0;
}


/* Q Art
   ===== */

/*
 * Module: section-q-art
 *
 * From TEMPLATE_interpreted.json (anchor "Q: specific art" at y=1129):
 *   - Q-marker text  x=37 y=1440 w=43  Merriweather 43px #92AB71  "Q:"
 *   - L-bracket vertical    x=28 y=1447 h=30  stroke #FFFFFF 0.76px
 *   - L-bracket horizontal  x=0  y=1462 w=28  stroke #FFFFFF 0.76px
 *       (horizontal extends left from x=28 to x=0;
 *        vertical extends up and down 15px around the horizontal's y=1462)
 *   - Question text  x=94 y=1447 w=434  Merriweather 18px #547332
 *   - Body text      x=36 y=1512 w=528  Merriweather 16px #547332
 *
 * Layout: three-column row at top (bracket | Q-marker | question), then
 * a body row below. No panel fill — sits on white canvas.
 */

.fm-q-art {
  width: 100%;
  background: var(--fm-color-canvas-bg);
}

.fm-q-art-pair { width: 100%; }

.fm-q-art-bracket-cell {
  width: var(--fm-q-art-bracket-w);   /* 28 — the horizontal stroke's extent */
  padding: 0;
  vertical-align: middle;
  text-align: right;
}

.fm-q-art-bracket-rule {
  display: inline-block;
  width: var(--fm-q-art-bracket-w);
  height: 1px;
  background: var(--fm-color-white);
  font-size: 1px;
  line-height: 1px;
}

.fm-q-art-bracket-tick-cell {
  width: 1px;
  padding: 0;
  vertical-align: middle;
}

.fm-q-art-bracket-tick {
  width: 1px;
  height: var(--fm-q-art-bracket-h);   /* 30 */
  background: var(--fm-color-white);
  font-size: 1px;
  line-height: 1px;
}

.fm-q-art-marker-cell {
  width: var(--fm-q-art-marker-w);     /* 60 */
  padding: 0;
  padding-left: 9px;                   /* JSON: Q-marker x=37 − bracket right x=28 = 9 */
  vertical-align: middle;
  text-align: left;
}

.fm-q-art-marker {
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-q-marker);
  line-height: 1;
  color: var(--fm-color-q-marker);
  font-style: italic;
  font-weight: 700;
}

.fm-q-art-question-cell {
  padding: 0;
  padding-left: var(--fm-q-art-marker-q-gap);   /* 14 */
  padding-right: var(--fm-body-inset);
  vertical-align: middle;
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-question);
  line-height: 1.3;
  color: var(--fm-color-q-text);
}

.fm-q-art-body-cell {
  padding: var(--fm-q-art-q-to-body) var(--fm-body-inset) 0 var(--fm-body-inset);
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-body);
  line-height: 1.6;
  color: var(--fm-color-q-text);
}

.fm-q-art-body-cell p { margin: 0; }
.fm-q-art-body-cell p + p { margin-top: 16px; }


/* Buttons
   ======= */

/*
 * Module: button
 *
 * From TEMPLATE_interpreted.json:
 *   - Button rect 132×35  fill #547332  stroke #FFFFFF 2.29px  at x=237 y=1884
 *   - Label "more"  Trend Sans 14px #FFFFFF  at x=276 y=1894 w=54
 *
 * Label offsets: x=276−237=39px left pad; y=1894−1884=10px top pad.
 * Centered horizontally on the canvas: button x=237, w=132, center at 303,
 * canvas center at 300 — essentially centered (3px optical adjustment).
 *
 * Email rendering: bulletproof pattern — VML <v:roundrect> for Outlook
 * desktop, styled anchor for everything else.
 */

.fm-button {
  display: inline-block;
  background: var(--fm-color-button-bg);
  color: var(--fm-color-white);
  width: var(--fm-button-w);
  height: var(--fm-button-h);
  line-height: var(--fm-button-h);
  text-align: center;
  font-family: var(--fm-font-sans);
  font-size: var(--fm-fs-button);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  mso-padding-alt: 0;
}

.fm-button:hover {
  text-decoration: none;
  color: var(--fm-color-white);
}

.fm-button--gold-inverse,
.fm-button--gold-inverse:hover {
  background: var(--fm-color-white);
  color: var(--fm-color-gold);
}

.fm-button-wrap {
  text-align: center;
  padding: 0;
}

.fm-cta {
  padding: var(--fm-cta-space-before) 0 var(--fm-cta-space-after);
  text-align: center;
}

.fm-cta--compact-before {
  padding-top: var(--fm-space-sm);
}

.fm-cta--compact-after {
  padding-bottom: var(--fm-cta-space-after-sm);
}


/* Issue feedback
   ============== */

.fm-feedback {
  width: 100%;
  background: var(--fm-fray-blue-1);
}

.fm-feedback-question {
  padding: 0 var(--fm-body-inset);
  font-family: var(--fm-font-serif);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--fm-fray-blue-4);
  text-align: center;
}

.fm-feedback-options-cell {
  padding: 0 var(--fm-body-inset);
}

.fm-feedback-options {
  width: 100%;
  table-layout: fixed;
}

.fm-feedback-option-cell {
  width: 33.333%;
  padding: 0 4px;
  text-align: center;
}

.fm-feedback-choice {
  display: block;
  width: 100%;
  height: var(--fm-button-h);
  border-radius: 6px;
  background: var(--fm-fray-blue-4);
  color: var(--fm-color-white);
  font-family: var(--fm-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: var(--fm-button-h);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.fm-feedback-choice:hover {
  background: var(--fm-color-gold);
  color: var(--fm-color-white);
  text-decoration: none;
}

/* Legal
   ===== */

/*
 * Module: legal
 *
 * From TEMPLATE_interpreted.json:
 *   - Panel rect 600×335  fill #D1D3D4  at y=2214
 *   - Gold rule stroke #A27E2D 1.22px at y=2214 (panel top)
 *   - Gold rule stroke #A27E2D 1.22px at y=2549 (panel bottom)
 *   - Body text  x=42 y=2256 w=515  (outlined text frame, font 0px in JSON)
 *
 * Top padding (panel→body): 42px (body y=2256 − panel y=2214).
 * Body inset: 42px each side (x=42, w=515 → 600−42−515 = 43, ~42).
 * Top rule and bottom rule are 1px gold lines flush with the panel edges.
 */

.fm-legal {
  width: 100%;
  background: var(--fm-color-legal-bg);
}

.fm-legal-rule {
  height: 1px;
  background: var(--fm-color-gold);
  width: 100%;
  font-size: 1px;
  line-height: 1px;
}

.fm-legal-pad-top {
  height: var(--fm-legal-pad-top);
  line-height: 1px;
  font-size: 1px;
}

.fm-legal-pad-bottom {
  height: var(--fm-legal-pad-top);
  line-height: 1px;
  font-size: 1px;
}

.fm-legal-body-cell {
  padding: 0 var(--fm-legal-inset);
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-legal);
  line-height: 1.6;
  color: var(--fm-color-body-brown);
  text-align: left;
}

.fm-legal-body-cell p { margin: 0; }
.fm-legal-body-cell p + p { margin-top: 8px; }