:root {
      --paper: #E3DDD0;
      --ink: #1a1a1a;
      --ink-soft: #2c2c2a;
      --rule: #3a3a3a;
      --muted: #5a5a5a;
      --bar-blue: #1A4E7A;

      /* Section colors — rgba so backgrounds blend with paper */
      --studio-rgb:    44, 95, 141;
      --business-rgb:  58, 107, 71;
      --finance-rgb:   138, 90, 36;
      --outreach-rgb:  140, 58, 45;
      --pubart-rgb:    107, 78, 113;
      --side-rgb:      74, 110, 107;
      --admin-rgb:     139, 122, 58;

      --studio:   rgba(var(--studio-rgb),   0.80);
      --business: rgba(var(--business-rgb), 0.80);
      --finance:  rgba(var(--finance-rgb),  0.80);
      --outreach: rgba(var(--outreach-rgb), 0.80);
      --pubart:   rgba(var(--pubart-rgb),   0.80);
      --side:     rgba(var(--side-rgb),     0.80);
      --admin:    rgba(var(--admin-rgb),    0.80);

      --photo-bg:  #cec7b5;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: #2a2a2a;
      font-family: Georgia, 'Times New Roman', serif;
      color: var(--ink);
      min-height: 100vh;
      padding: 40px 20px;
      line-height: 1.4;
    }

    /* ===== PAPER — pure procedural texture, three noise layers ===== */
    .paper {
      max-width: 1500px;
      margin: 0 auto;
      padding: 0;
      background-color: var(--paper);
      background-image:
        /* Layer 1: fine grain (bumped) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23a)'/></svg>"),
        /* Layer 2: medium fiber (bumped) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='1' seed='3'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.17  0 0 0 0 0.13  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>"),
        /* Layer 3: large slow washes (bumped) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='1' seed='17'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.15  0 0 0 0 0.11  0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23c)'/></svg>");
      background-size: 400px 400px, 600px 600px, 1200px 1200px;
      background-repeat: repeat, repeat, repeat;
      background-blend-mode: multiply, multiply, multiply;
      box-shadow: 0 20px 60px rgba(0,0,0,0.65);
      position: relative;
    }
    .paper::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at top left, transparent 72%, rgba(80,70,55,0.16) 100%),
        radial-gradient(ellipse at bottom right, transparent 72%, rgba(80,70,55,0.18) 100%);
      mix-blend-mode: multiply;
      z-index: 1;
    }
    .paper > * { position: relative; z-index: 2; }

    /* ===== TOP BLUE BAR ===== */
    .top-bar {
      background: var(--bar-blue);
      color: #f5efe2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 18px;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
    }
    .top-bar .center { font-weight: 800; letter-spacing: 0.18em; }

    /* ===== TEASER STRIP ===== */
    .teaser-strip {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      border-bottom: 1px solid var(--rule);
      padding: 8px 18px;
    }
    .teaser {
      padding: 0 14px;
      display: flex;
      gap: 10px;
      align-items: center;
      border-right: 1px solid var(--rule);
      font-size: 11px;
    }
    .teaser:last-child { border-right: none; }
    .teaser-thumb {
      width: 56px; height: 44px;
      background: var(--photo-bg);
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: monospace; font-size: 8px; color: #6a6256;
      text-align: center;
    }
    .teaser-text { line-height: 1.25; }
    .teaser-kicker {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 800;
      font-size: 9px;
      letter-spacing: 0.1em;
      color: rgba(var(--outreach-rgb), 1);
      text-transform: uppercase;
    }
    .teaser-head { font-weight: 700; font-size: 12px; }
    .teaser-head em { font-style: italic; color: var(--muted); font-weight: normal; font-size: 11px; }

    /* ===== MASTHEAD ===== */
    .masthead {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 10px 24px 8px;
      gap: 20px;
    }
    .mast-left, .mast-right {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-soft);
      line-height: 1.4;
    }
    .mast-left { text-align: left; }
    .mast-right { text-align: right; }
    .mast-left strong, .mast-right strong { display: block; font-weight: 800; font-size: 13px; letter-spacing: 0.1em; }

    .tagline {
      text-align: center;
      padding: 6px 0 4px;
      border-top: 4px double var(--ink);
      border-bottom: 1px solid var(--rule);
      margin: 0 24px 0;
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 13px;
      color: var(--ink-soft);
    }

    /* ===== MAIN GRID ===== */
    .main-grid {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 0;
      padding: 0;
    }

    /* ===== NEWSLINE COLUMN ===== */
    .newsline {
      border-right: 2px solid var(--ink);
      padding: 14px 18px 20px;
      display: flex;
      flex-direction: column;
    }
    .newsline-bottom-fill {
      margin-top: auto;
      padding-top: 18px;
      border-top: 1px solid var(--rule);
    }
    .newsline-spot {
      width: 100%;
      height: 160px;
      margin-bottom: 10px;
    }
    .newsline-ad {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      text-align: center;
      color: var(--muted);
      padding: 10px 8px;
      border: 1px dashed var(--rule);
      line-height: 1.4;
    }
    .newsline-ad strong {
      font-style: normal;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 800;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      display: block;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .newsline-head {
      font-family: Georgia, serif;
      font-weight: 900;
      font-style: italic;
      font-size: 34px;
      line-height: 1;
      margin-bottom: 4px;
    }
    .newsline-sub {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      padding-bottom: 8px;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 12px;
    }

    /* Section flag — semi-transparent so paper texture shows through */
    .nl-flag {
      display: inline-block;
      color: #f5efe2;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 800;
      font-size: 10px;
      letter-spacing: 0.1em;
      padding: 2px 7px;
      margin-bottom: 5px;
      text-transform: uppercase;
      mix-blend-mode: multiply;
      position: relative;
    }
    .nl-flag::after, .kicker::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' seed='5'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      mix-blend-mode: overlay;
      opacity: 0.6;
    }
    .nl-flag.studio    { background: var(--studio); }
    .nl-flag.business  { background: var(--business); }
    .nl-flag.finance   { background: var(--finance); }
    .nl-flag.outreach  { background: var(--outreach); }
    .nl-flag.pubart    { background: var(--pubart); }
    .nl-flag.side      { background: var(--side); }
    .nl-flag.admin     { background: var(--admin); }

    .nl-item {
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px dotted var(--rule);
    }
    .nl-item:last-child { border-bottom: none; }
    .nl-item h4 {
      font-family: Georgia, serif;
      font-weight: 800;
      font-size: 14px;
      line-height: 1.2;
      margin-bottom: 4px;
    }
    .nl-item p {
      font-size: 11px;
      line-height: 1.4;
      color: var(--ink-soft);
    }
    .nl-item .pointer {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      display: block;
      margin-top: 4px;
    }
    .nl-date {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-soft);
      text-align: right;
      margin-top: 14px;
      padding-top: 8px;
      border-top: 1px solid var(--rule);
    }

    /* ===== CONTENT (front-page-as-teasers architecture, v23) ===== */
    .content {
      padding: 14px 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .lead {
      /* full width within content area now */
    }

    /* ===== FRONT-PAGE SECONDARY TEASERS (4 in a row, predictable sizes) ===== */
    .front-teasers {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      padding-top: 16px;
      border-top: 2px solid var(--ink);
    }
    .teaser-card {
      display: flex;
      flex-direction: column;
      padding-right: 16px;
      border-right: 1px dashed var(--rule);
    }
    .teaser-card:last-child { border-right: none; padding-right: 0; }
    .teaser-card .teaser-card-photo {
      position: relative;
      height: 110px;
      width: 100%;
      border: 1px solid var(--rule);
      background-color: var(--paper);
      overflow: hidden;
      line-height: 0;
      margin-bottom: 8px;
    }
    .teaser-card .teaser-card-photo img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.35) brightness(1.06);
      mix-blend-mode: multiply;
    }
    .teaser-card .teaser-card-photo::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(0,0,0,0.30) 0.55px, transparent 0.75px);
      background-size: 1.9px 1.9px;
      mix-blend-mode: multiply;
      pointer-events: none;
    }
    .teaser-card .kicker {
      align-self: flex-start;
      margin-bottom: 8px;
    }
    .teaser-card h3 {
      font-family: Georgia, serif;
      font-weight: 900;
      font-size: 18px;
      line-height: 1.15;
      margin-bottom: 4px;
    }
    .teaser-card .sub {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .teaser-card p {
      font-size: 12px;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .teaser-card .teaser-cont {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      margin-top: auto;
      padding-top: 6px;
      border-top: 1px solid var(--rule);
    }
    .kicker {
      display: inline-block;
      color: #f5efe2;
      background: var(--side);
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 800;
      font-size: 10px;
      letter-spacing: 0.14em;
      padding: 3px 8px;
      margin-bottom: 10px;
      text-transform: uppercase;
      mix-blend-mode: multiply;
      position: relative;
    }
    .kicker.studio    { background: var(--studio); }
    .kicker.business  { background: var(--business); }
    .kicker.finance   { background: var(--finance); }
    .kicker.outreach  { background: var(--outreach); }
    .kicker.pubart    { background: var(--pubart); }
    .kicker.admin     { background: var(--admin); }

    .lead-head {
      font-family: Georgia, serif;
      font-weight: 900;
      font-size: 48px;
      line-height: 1.02;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }
    .lead-sub {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 19px;
      line-height: 1.3;
      color: var(--ink-soft);
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--rule);
    }
    .byline {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 12px;
    }
    .lead-photo {
      position: relative;
      display: block;
      width: 100%;
      height: 290px;
      margin-bottom: 6px;
      border: 1px solid var(--rule);
      background-color: var(--paper);
      overflow: hidden;
      line-height: 0;
    }
    .lead-photo img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.35) brightness(1.06);
      mix-blend-mode: multiply;
    }
    .lead-photo::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(0,0,0,0.30) 0.55px, transparent 0.75px);
      background-size: 1.9px 1.9px;
      mix-blend-mode: multiply;
      pointer-events: none;
    }
    .photo-caption {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 11px;
      color: var(--muted);
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--rule);
    }
    .photo-caption strong {
      font-style: normal;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 800;
      letter-spacing: 0.08em;
      font-size: 9px;
      color: var(--ink);
      text-transform: uppercase;
    }
    .lead p { font-size: 14px; margin-bottom: 10px; text-align: justify; }
    .dropcap::first-letter {
      font-family: Georgia, serif;
      font-size: 56px;
      font-weight: 700;
      line-height: 0.85;
      float: left;
      padding: 6px 10px 0 0;
      color: var(--ink);
    }

    .pull-quote {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 17px;
      line-height: 1.3;
      color: var(--ink-soft);
      border-top: 2px solid var(--ink);
      border-bottom: 2px solid var(--ink);
      padding: 10px 14px;
      margin: 14px 0;
    }
    .pull-quote cite {
      display: block;
      font-style: normal;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 6px;
    }

    /* SECONDARY COLUMN */
    .secondary {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .story {
      padding-bottom: 14px;
      border-bottom: 1px dashed var(--rule);
    }
    .story:last-child { border-bottom: none; }
    .story h3 {
      font-family: Georgia, serif;
      font-weight: 900;
      font-size: 22px;
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .story .sub {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .story p { font-size: 12.5px; line-height: 1.45; margin-bottom: 7px; text-align: justify; }
    .story-photo {
      position: relative;
      display: block;
      width: 100%;
      height: 140px;
      margin: 6px 0;
      border: 1px solid var(--rule);
      background-color: var(--paper);
      overflow: hidden;
      line-height: 0;
    }
    .story-photo img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.35) brightness(1.06);
      mix-blend-mode: multiply;
    }
    .story-photo::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(0,0,0,0.30) 0.55px, transparent 0.75px);
      background-size: 1.9px 1.9px;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    /* ===== Finance line chart — period USA Today Money style ===== */
    .finance-chart {
      background: rgba(245, 239, 226, 0.5);
      border: 1px solid var(--rule);
      padding: 10px 12px;
      margin: 8px 0 10px;
    }
    .finance-chart-title {
      font-family: 'Helvetica Neue', Arial Black, sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(var(--finance-rgb), 1);
      margin-bottom: 4px;
    }
    .finance-chart-sub {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .finance-chart svg { display: block; width: 100%; height: 90px; }
    .finance-chart-source {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 8px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 4px;
    }

    /* ===== BELOW-FOLD ===== */
    .below-content {
      display: grid;
      grid-template-columns: 280px 1fr 280px;
      gap: 20px;
      padding: 18px 20px 28px;
      border-top: 2px solid var(--ink);
      margin-top: 6px;
    }
    .snapshots {
      background: rgba(245, 239, 226, 0.4);
      padding: 14px;
      border: 1px solid var(--rule);
    }
    .snap-bar { height: 5px; background: var(--studio); margin-bottom: 8px; mix-blend-mode: multiply; }
    .snapshots h3 {
      font-family: 'Helvetica Neue', Arial Black, sans-serif;
      font-size: 14px;
      letter-spacing: 0.08em;
      color: rgba(var(--studio-rgb), 1);
      margin-bottom: 4px;
    }
    .snap-sub {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .snap-figure {
      background: rgba(0,0,0,0.05);
      height: 70px;
      margin-bottom: 10px;
      display: flex; align-items: center; justify-content: center;
      font-family: monospace; font-size: 10px; color: #6a6256;
    }
    .snap-stat {
      font-family: Georgia, serif;
      font-size: 13px;
      margin-bottom: 5px;
    }
    .snap-stat strong {
      font-size: 22px;
      color: rgba(var(--studio-rgb), 1);
      margin-right: 7px;
    }
    .snap-source {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 9px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 10px;
      padding-top: 6px;
      border-top: 1px dotted var(--rule);
    }

    .editorial { padding: 0 10px; }
    .editorial-head-row {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--rule);
    }
    /* Halftone + tone-match wrapper — universal "printed on this paper" treatment.
       Container background is the paper color; mix-blend-mode: multiply on the image
       makes whites become paper color and darks stay dark, exactly how ink prints
       on newsprint. Halftone dot overlay on top sells the period feel. Same
       wrapper works for any image source: portraits, screenshots, project frames. */
    .halftone {
      position: relative;
      display: inline-block;
      line-height: 0;
      border: 1px solid var(--rule);
      background-color: var(--paper);
      flex-shrink: 0;
    }
    .halftone img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.35) brightness(1.06);
      mix-blend-mode: multiply;
    }
    .halftone::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(0,0,0,0.30) 0.55px, transparent 0.75px);
      background-size: 1.9px 1.9px;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .editorial-portrait {
      width: 72px; height: 84px;
    }
    .editorial-head-row > div:last-child { flex: 1; padding-top: 4px; }
    .portrait-wrap {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
    .portrait-credit {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 8px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 800;
      text-align: center;
      margin-top: 4px;
      line-height: 1.25;
    }
    .portrait-credit em {
      font-style: italic;
      font-weight: 600;
      color: var(--muted);
      display: block;
      font-size: 7.5px;
      letter-spacing: 0.05em;
      text-transform: none;
      margin-top: 1px;
    }
    .dateline {
      font-family: 'Helvetica Neue', Arial Black, sans-serif;
      font-weight: 900;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink);
      margin-right: 4px;
    }
    .editorial h3 {
      font-family: Georgia, serif;
      font-style: italic;
      font-weight: 900;
      font-size: 26px;
      margin-bottom: 4px;
    }
    .editorial .sig {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .editorial p { font-size: 13px; margin-bottom: 8px; line-height: 1.5; text-align: justify; }

    .weather-box {
      background: rgba(245, 239, 226, 0.4);
      padding: 14px;
      border: 1px solid var(--rule);
    }
    .weather-box h3 {
      font-family: 'Helvetica Neue', Arial Black, sans-serif;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }
    .weather-sub {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px dotted var(--rule);
    }
    .weather-table { width: 100%; font-size: 12px; }
    .weather-table td { padding: 4px 0; border-bottom: 1px dotted var(--rule); }
    .weather-table td:first-child { font-weight: 700; }
    .weather-table td:last-child { font-style: italic; color: var(--muted); text-align: right; }

    /* ===== LETTERS SECTION ===== */
    .letters-section {
      padding: 20px 24px 28px;
      border-top: 2px solid var(--ink);
    }
    .letters-head {
      font-family: Georgia, serif;
      font-style: italic;
      font-weight: 900;
      font-size: 32px;
      text-align: center;
      margin-bottom: 4px;
      letter-spacing: -0.01em;
    }
    .letters-sub {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 20px;
    }
    /* Single-letter editor's-pick layout */
    .single-letter {
      max-width: 780px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .letter-with-portrait {
      display: flex;
      gap: 22px;
      align-items: flex-start;
    }
    .letter-portrait {
      width: 110px; height: 130px;
      margin-top: 6px;
    }
    .letter-body { flex: 1; }
    .single-letter .letter-kicker {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
      text-align: center;
    }
    .single-letter .letter-title {
      font-family: Georgia, serif;
      font-weight: 900;
      font-style: italic;
      font-size: 22px;
      margin-bottom: 14px;
      line-height: 1.2;
      text-align: center;
    }
    .single-letter p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 10px;
    }
    .single-letter .letter-sig {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 800;
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px solid var(--rule);
      text-align: right;
    }
    .single-letter .letter-sig em {
      font-style: normal;
      font-weight: 600;
      color: var(--muted);
      display: block;
      font-size: 10px;
      letter-spacing: 0.08em;
      margin-top: 2px;
    }

    .foot {
      padding: 14px 24px 16px;
      border-top: 2px solid var(--ink);
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .foot-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .foot-motto {
      text-align: center;
      font-style: italic;
      letter-spacing: 0.04em;
      text-transform: none;
      font-size: 11px;
      color: var(--ink-soft);
      padding: 6px 0 4px;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      margin: 4px 0;
    }
    .foot-bottom {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      color: var(--muted);
      padding-top: 4px;
    }

    .meta-label {
      max-width: 1500px;
      margin: 32px auto 0;
      color: #c8c0b0;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.7;
    }
    .meta-label span {
      display: block;
      color: #8a8a8a;
      font-size: 10px;
      letter-spacing: 0.03em;
      text-transform: none;
      font-style: italic;
      margin-top: 4px;
      max-width: 880px;
      margin-left: auto;
      margin-right: auto;
    }


    /* ===== PAGE NAV � multi-page navigation strip ===== */
    .page-nav {
      display: flex;
      justify-content: center;
      gap: 0;
      padding: 5px 0;
      border-bottom: 1px solid var(--rule);
      background: rgba(0,0,0,0.04);
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 800;
    }
    .page-nav-foot {
      border-bottom: none;
      border-top: 2px solid var(--ink);
      background: rgba(0,0,0,0.04);
      padding: 8px 0;
    }
    .page-nav a {
      padding: 5px 16px;
      color: var(--ink-soft);
      text-decoration: none;
      border-right: 1px solid var(--rule);
    }
    .page-nav a:last-child { border-right: none; }
    .page-nav a:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
    .page-nav a.current {
      color: var(--ink);
      background: rgba(0,0,0,0.07);
      box-shadow: inset 0 -3px 0 var(--bar-blue);
    }
    .more-inside {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      padding: 8px 18px;
      border-bottom: 1px solid var(--rule);
    }
    .more-inside strong {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-style: normal;
      font-size: 9px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 800;
      color: var(--ink);
      margin-right: 6px;
    }

    /* ===== INSIDE PREVIEW BLOCK (rich "what's on B1" zone) ===== */
    .inside-preview {
      margin: 22px 24px 0;
      padding: 16px 18px 18px;
      border-top: 4px double var(--ink);
      border-bottom: 1px solid var(--rule);
      background: rgba(0,0,0,0.02);
    }
    .inside-preview-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--rule);
    }
    .inside-preview-title {
      font-family: 'Helvetica Neue', Arial Black, sans-serif;
      font-size: 14px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 800;
    }
    .inside-preview-cta {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 13px;
      color: var(--bar-blue);
      text-decoration: none;
      font-weight: 700;
    }
    .inside-preview-cta:hover { text-decoration: underline; }
    .inside-preview-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .inside-card {
      font-family: Georgia, serif;
      font-size: 13px;
      line-height: 1.35;
      padding-right: 14px;
      border-right: 1px dashed var(--rule);
    }
    .inside-card:last-child { border-right: none; padding-right: 0; }
    .inside-card-kicker {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 800;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 6px;
      display: block;
    }
    .inside-card a {
      color: var(--ink);
      text-decoration: none;
      font-weight: 700;
    }
    .inside-card a:hover { color: var(--bar-blue); }

    /* ===== LEAD FOOTNOTE (fills bottom of lead column when needed) ===== */
    .lead-footnote {
      margin-top: 14px;
      padding: 10px 14px;
      border-top: 1px solid var(--rule);
      background: rgba(0,0,0,0.03);
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      line-height: 1.45;
      color: var(--ink-soft);
    }
    .lead-footnote strong {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 800;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-style: normal;
      color: var(--ink);
      display: block;
      margin-bottom: 4px;
    }

    /* ===== LEAD MID-ARTICLE SUBHEAD ===== */
    .lead-subhead {
      font-family: Georgia, serif;
      font-weight: 900;
      font-size: 22px;
      margin: 16px 0 10px;
      padding-top: 8px;
      border-top: 1px solid var(--rule);
    }
    .continued-link {
      font-family: Georgia, serif;
      font-weight: 700;
      color: var(--bar-blue);
      text-decoration: none;
      border-bottom: 1px dotted var(--bar-blue);
    }
    .continued-link:hover { color: var(--ink); border-bottom-style: solid; }

    /* ===== INLINE STATS BOX (within lead column body) ===== */
    .inline-stats {
      float: right;
      width: 42%;
      margin: 6px 0 12px 16px;
      padding: 12px 14px;
      background: rgba(245, 239, 226, 0.5);
      border: 1px solid var(--rule);
    }
    .inline-stats h4 {
      font-family: 'Helvetica Neue', Arial Black, sans-serif;
      font-size: 11px;
      letter-spacing: 0.1em;
      color: rgba(var(--studio-rgb), 1);
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 2px solid rgba(var(--studio-rgb), 0.6);
    }
    .inline-stat-row {
      font-family: Georgia, serif;
      font-size: 13px;
      padding: 4px 0;
      border-bottom: 1px dotted var(--rule);
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .inline-stat-row:last-child { border-bottom: none; }
    .inline-stat-row strong {
      font-family: Georgia, serif;
      font-size: 26px;
      font-weight: 900;
      color: rgba(var(--studio-rgb), 1);
      min-width: 36px;
    }

    /* ===== LITE HEADER for inside pages ===== */
    .lite-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 12px 24px 10px;
      border-bottom: 2px solid var(--ink);
      margin-bottom: 14px;
    }
    .lite-name {
      font-family: Georgia, 'Times New Roman', serif;
      font-weight: 900;
      font-size: 28px;
      letter-spacing: -0.01em;
    }
    .lite-meta {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 800;
    }

    /* ===== A2 MORE NEWS — 2x2 grid of stories ===== */
    .a2-grid {
      padding: 14px 24px 18px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      height: calc(100% - 240px);
      overflow: hidden;
    }
    .a2-story {
      padding-right: 18px;
      border-right: 1px dashed var(--rule);
      overflow: hidden;
    }
    .a2-story:nth-child(2n) { border-right: none; padding-right: 0; }
    .a2-story .kicker { margin-bottom: 8px; }
    .a2-story h3 {
      font-family: Georgia, serif;
      font-weight: 900;
      font-size: 22px;
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .a2-story .sub {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .a2-story p {
      font-size: 12.5px;
      line-height: 1.4;
      margin-bottom: 6px;
      text-align: justify;
    }
    .a2-story .story-photo { height: 100px; }
    .a2-story .finance-chart { padding: 6px 10px; margin: 6px 0; }
    .a2-story .finance-chart svg { height: 70px; }
    .a2-story .finance-chart-title { font-size: 9px; }

    .continued-pointer {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
      margin-top: 6px;
    }

    /* ===== B1 FORECAST SECTION (the expanded Project Forecast "map") ===== */
    .forecast-section {
      padding: 14px 24px 24px;
    }
    .section-head {
      font-family: Georgia, serif;
      font-style: italic;
      font-weight: 900;
      font-size: 36px;
      text-align: center;
      margin-bottom: 4px;
      letter-spacing: -0.01em;
    }
    .section-sub {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 18px;
    }
    .forecast-map {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .forecast-region {
      background: rgba(245, 239, 226, 0.4);
      border: 1px solid var(--rule);
      padding: 14px;
      position: relative;
    }
    .forecast-region.condition-clear   { box-shadow: inset 0 -4px 0 rgba(var(--business-rgb), 0.7); }
    .forecast-region.condition-mild    { box-shadow: inset 0 -4px 0 rgba(var(--side-rgb), 0.7); }
    .forecast-region.condition-warm    { box-shadow: inset 0 -4px 0 rgba(var(--finance-rgb), 0.7); }
    .forecast-region.condition-cool    { box-shadow: inset 0 -4px 0 rgba(var(--studio-rgb), 0.7); }
    .forecast-region.condition-storm   { box-shadow: inset 0 -4px 0 rgba(var(--outreach-rgb), 0.7); }
    .region-name {
      font-family: 'Helvetica Neue', Arial Black, sans-serif;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 4px;
    }
    .region-condition {
      font-family: Georgia, serif;
      font-weight: 900;
      font-size: 22px;
      margin-bottom: 4px;
    }
    .region-detail {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      color: var(--muted);
    }

    /* ===== B1 REMINDERS BLOCK ===== */
    .reminders-block {
      padding: 14px 24px 6px;
    }
    .reminders-empty {
      text-align: center;
      font-family: Georgia, serif;
      font-style: italic;
      color: var(--muted);
      padding: 14px;
      font-size: 14px;
    }
    .reminder-item {
      display: grid;
      grid-template-columns: 100px 1fr 100px;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px dashed var(--rule);
      font-size: 13px;
    }
    .reminder-due {
      font-family: 'Helvetica Neue', Arial Black, sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: rgba(var(--outreach-rgb), 1);
    }