/* ==========================================================================
   CALM WEB — FRONT COVER & SOURCE DIRECTORY SPREADS
   ========================================================================== */

    /* ==========================================================================
       Cover / Broadsheet Page (Page 1)
       ========================================================================== */
    .magazine-spread.cover-mode.single-page-mode {
      max-width: min(940px, 96dvw);
    }
    @media (max-width: 680px) {
      .magazine-spread.cover-mode.single-page-mode {
        max-width: 100%;
      }
    }

    /* Cover Spread: Verso Canvas (Table of Contents / Prospectus) */
    .cover-verso-canvas,
    .cover-recto-canvas,
    .cover-page-canvas {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      overflow-x: hidden;
      box-sizing: border-box;
      padding: 2px 4px;
    }

    .cover-verso-header {
      flex-shrink: 0;
      margin-bottom: 8px;
    }

    .cover-verso-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-display);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-muted);
      border-bottom: 1px solid var(--rule-light);
      padding-bottom: 3px;
      margin-bottom: 4px;
    }

    .cover-verso-tag {
      color: var(--accent-crimson);
    }

    .cover-verso-title {
      font-family: var(--font-display);
      font-size: clamp(20px, 2.6vw, 26px);
      font-weight: 700;
      letter-spacing: -0.015em;
      text-transform: uppercase;
      color: var(--ink-primary);
      margin: 2px 0 2px 0;
    }

    .cover-verso-subtitle {
      font-family: var(--font-serif);
      font-size: 11px;
      font-style: italic;
      color: var(--ink-muted);
      margin: 0;
    }

    .cover-verso-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      gap: 12px;
    }

    .cover-verso-colophon {
      margin-top: auto;
      padding: 10px 12px;
      background: var(--paper-bg-alt, #eee9dd);
      border: 1px solid var(--rule-soft, rgba(0, 0, 0, 0.1));
      border-radius: 4px;
      flex-shrink: 0;
    }

    .cover-colophon-heading {
      font-family: var(--font-sans);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-secondary);
      margin-bottom: 4px;
    }

    .cover-colophon-text {
      font-family: var(--font-serif);
      font-size: 11px;
      line-height: 1.45;
      color: var(--ink-secondary);
      margin: 0;
    }

    /* Cover Spread: Recto Canvas (Front Masthead & Hero Story) */
    .cover-recto-canvas {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 2px 4px;
    }

    .cover-recto-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .cover-recto-body .cover-hero-column {
      width: 100%;
      height: 100%;
    }

    .cover-page-canvas {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 2px 4px;
    }

    .cover-masthead {
      flex-shrink: 0;
      text-align: center;
      margin-bottom: 6px;
    }

    .cover-masthead-meta {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: var(--font-display);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-muted);
      border-bottom: 1px solid var(--rule-light);
      padding-bottom: 3px;
      margin-bottom: 4px;
    }

    .cover-masthead-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 4.4vw, 42px);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.025em;
      text-transform: uppercase;
      color: var(--ink-primary);
      margin: 2px 0 4px 0;
      text-wrap: balance;
    }

    .cover-masthead-dateline {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-family: var(--font-serif);
      font-size: 10.5px;
      font-style: italic;
      color: var(--ink-muted);
      margin-bottom: 4px;
    }

    .cover-oxford-rule {
      border-top: 3px solid var(--ink-primary);
      border-bottom: 1px solid var(--ink-primary);
      height: 2px;
      margin: 4px 0 8px 0;
    }

    .cover-broadsheet-body {
      display: grid;
      grid-template-columns: 1.48fr 1fr;
      gap: 18px;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .cover-hero-column {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }

    .cover-hero-story {
      display: flex;
      flex-direction: column;
      height: 100%;
      cursor: pointer;
    }

    .cover-hero-header {
      margin-bottom: 6px;
    }

    .cover-hero-kicker {
      display: block;
      font-family: var(--font-display);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-crimson);
      margin-bottom: 3px;
    }

    .cover-hero-headline {
      font-family: var(--font-display);
      font-size: clamp(17px, 2.2vw, 22px);
      line-height: 1.18;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--ink-primary);
      margin: 0 0 6px 0;
      text-wrap: balance;
      transition: color 0.15s ease;
    }

    .cover-hero-story:hover .cover-hero-headline {
      color: var(--accent-crimson);
    }

    .cover-hero-standfirst {
      font-family: var(--font-serif);
      font-size: 12px;
      font-style: italic;
      line-height: 1.35;
      color: var(--ink-muted);
      margin: 0 0 6px 0;
      text-wrap: pretty;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .cover-hero-byline-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ink-muted);
      border-bottom: 1px solid var(--rule-light);
      padding-bottom: 4px;
      margin-bottom: 8px;
    }

    .cover-hero-figure-wrap {
      width: 100%;
      max-height: clamp(140px, 24vh, 195px);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 8px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 1;
    }

    .cover-hero-img {
      max-width: 100%;
      max-height: clamp(135px, 23vh, 190px);
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
      margin: 0 auto;
      border-radius: 6px;
      box-shadow: 0 1px 5px rgba(18, 16, 14, 0.08);
    }

    .cover-hero-body {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin-bottom: 4px;
    }

    .cover-hero-prose {
      font-family: var(--font-serif);
      font-size: 12px;
      line-height: 1.38;
      color: var(--ink-primary);
      overflow: hidden;
    }

    .cover-hero-prose p {
      margin: 0 0 5px 0;
      text-wrap: pretty;
    }

    .cover-drop-cap {
      float: left;
      font-family: var(--font-display);
      font-size: 32px;
      line-height: 25px;
      padding-top: 2px;
      padding-right: 6px;
      font-weight: 700;
      color: var(--accent-crimson);
    }

    .cover-hero-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--rule-light);
      padding-top: 5px;
      margin-top: auto;
      font-size: 10px;
      font-weight: 700;
      color: var(--accent-crimson);
    }

    .cover-sidebar-column {
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--rule-light);
      padding-left: 14px;
      min-height: 0;
      overflow: hidden;
    }

    .cover-sidebar {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: flex-start;
      gap: 12px;
    }

    .cover-toc-card {
      margin-bottom: 6px;
    }

    .cover-toc-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 3px;
    }

    .cover-toc-label {
      font-family: var(--font-display);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-primary);
    }

    .cover-toc-sub {
      font-family: var(--font-serif);
      font-size: 9.5px;
      font-style: italic;
      color: var(--ink-muted);
    }

    .cover-toc-divider {
      border-top: 1px solid var(--ink-primary);
      margin-bottom: 5px;
    }

    .cover-toc-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow-x: hidden;
      min-width: 0;
    }

    .cover-toc-row {
      padding: 3px 5px;
      border-radius: 4px;
      cursor: pointer;
      border-bottom: 1px solid rgba(0,0,0,0.04);
      transition: background 0.15s ease;
      min-width: 0;
      overflow-x: hidden;
    }

    .cover-toc-row:hover {
      background: rgba(0,0,0,0.03);
    }

    .cover-toc-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1px;
      min-width: 0;
    }

    .cover-toc-desk {
      font-family: var(--font-display);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent-crimson);
    }

    .cover-toc-page {
      display: none; /* Hide page numbers in TOC */
    }

    .cover-toc-subtitle,
    .cover-toc-headline {
      font-family: var(--font-serif);
      font-size: 11px;
      line-height: 1.3;
      font-weight: 600;
      color: var(--ink-primary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    /* Cover Spread: Source-Grouped Contents Flow (Single Column) */
    .cover-source-group {
      margin-bottom: 10px;
      min-width: 0;
      overflow-x: hidden;
    }

    .cover-source-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      padding-bottom: 2px;
      border-bottom: 1px solid var(--ink-primary);
    }

    .cover-source-title {
      font-family: var(--font-display);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent-crimson);
    }

    .cover-source-ext-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-muted);
      opacity: 0.65;
      text-decoration: none;
      padding: 1px 3px;
      border-radius: 3px;
      transition: color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
      cursor: pointer;
      line-height: 1;
    }

    .cover-source-ext-link:hover {
      color: var(--accent-crimson);
      opacity: 1;
      background: rgba(0, 0, 0, 0.05);
    }

    .cover-toc-meta-row {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-top: 2px;
      font-family: var(--font-sans);
      font-size: 9.5px;
      color: var(--ink-muted);
      min-width: 0;
    }

    /* Calm Search Results Cover Sidebar & Links List */
    .cover-search-sidebar {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
    }

    .cover-search-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 3px;
    }

    .cover-search-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow-y: auto;
      scrollbar-width: none;
      flex: 1;
      min-height: 0;
      padding-right: 2px;
    }

    .cover-search-list::-webkit-scrollbar {
      display: none;
    }

    .cover-search-row {
      padding: 5px 7px;
      border-radius: 4px;
      cursor: pointer;
      border-bottom: 1px solid var(--rule-light);
      transition: background 0.15s ease, border-color 0.15s ease;
      text-decoration: none;
      color: inherit;
    }

    .cover-search-row:hover {
      background: rgba(0, 0, 0, 0.035);
      border-bottom-color: var(--rule-soft);
    }

    .cover-search-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
      font-size: 9px;
    }

    .cover-search-domain {
      font-family: var(--font-sans);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-crimson);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      max-width: 80%;
      overflow: hidden;
      white-space: nowrap;
    }

    .cover-search-domain.search-result-domain {
      font-size: 9.5px;
      font-weight: 450;
      letter-spacing: 0.06em;
      color: var(--ink-muted);
      opacity: 0.88;
    }

    .cover-search-row.is-active .cover-search-domain.search-result-domain {
      color: var(--accent-crimson);
      font-weight: 550;
      opacity: 1;
    }

    .cover-search-domain span:nth-child(2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cover-search-num {
      font-family: var(--font-mono);
      font-size: 8.5px;
      color: var(--ink-muted);
      opacity: 0.85;
    }

    .cover-search-page {
      font-family: var(--font-sans);
      font-size: 9.5px;
      font-weight: 600;
      color: var(--ink-muted);
    }

    .cover-search-headline {
      font-family: var(--font-serif);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.25;
      color: var(--ink-primary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .mag-tile-badge.search {
      background: rgba(143, 36, 36, 0.09);
      color: var(--accent-crimson);
      font-weight: 700;
    }

    .cover-secondary-rule {
      border-top: 1px solid var(--rule-light);
      margin: 5px 0;
    }

    .cover-secondary-card {
      padding: 4px 6px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .cover-secondary-card:hover {
      background: rgba(0,0,0,0.03);
    }

    .cover-secondary-kicker {
      display: block;
      font-family: var(--font-display);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent-crimson);
      margin-bottom: 2px;
    }

    .cover-secondary-headline {
      font-family: var(--font-display);
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.22;
      color: var(--ink-primary);
      margin: 0 0 3px 0;
      text-wrap: balance;
    }

    .cover-secondary-standfirst {
      font-family: var(--font-serif);
      font-size: 10.5px;
      font-style: italic;
      line-height: 1.3;
      color: var(--ink-muted);
      margin: 0 0 4px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-wrap: pretty;
    }

    .cover-secondary-footer {
      display: flex;
      justify-content: space-between;
      font-size: 8.5px;
      font-weight: 600;
      color: var(--ink-muted);
      text-transform: uppercase;
    }

    /* ==========================================================================
       Archetype 1: Broadsheet Newspaper Cover Spread (Verso + Recto)
       ========================================================================== */

    /* Verso Canvas & Masthead */
    .broadsheet-cover-verso {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 4px 6px;
    }

    .broadsheet-masthead {
      flex-shrink: 0;
      margin-bottom: 8px;
    }

    .broadsheet-masthead .cover-verso-title {
      font-family: var(--font-serif-headline);
      font-size: clamp(24px, 2.9vw, 34px);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--ink-primary);
      margin: 0 0 3px 0;
      text-transform: none;
    }

    .broadsheet-masthead .cover-verso-dateline {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: var(--font-serif);
      font-size: 11px;
      font-style: italic;
      color: var(--ink-muted);
    }

    .cover-dateline-date {
      font-family: var(--font-sans);
      font-style: normal;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-muted);
    }

    /* Verso Lead Story */
    .cover-broadsheet-lead {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }

    .cover-lead-hero-figure {
      width: 100%;
      max-height: 290px;
      height: auto;
      overflow: hidden;
      border-radius: 3px;
      margin: 0 0 8px 0;
      background: transparent;
      flex-shrink: 0;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .cover-lead-hero-img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 290px;
      object-fit: contain;
      display: block;
      border-radius: 3px;
    }

    .cover-lead-meta-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      flex-shrink: 0;
    }

    .cover-lead-kicker-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .cover-lead-kicker {
      font-family: var(--font-sans);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent-crimson);
    }

    .cover-lead-readtime {
      font-family: var(--font-sans);
      font-size: 9.5px;
      color: var(--ink-muted);
      font-weight: 600;
      letter-spacing: 0.05em;
    }

    .cover-lead-headline {
      font-family: var(--font-serif-headline);
      font-size: clamp(19px, 2.3vw, 24px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: var(--ink-primary);
      margin: 0 0 6px 0;
      cursor: pointer;
      transition: color 0.15s ease;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .cover-lead-headline:hover {
      color: var(--accent-crimson);
    }

    .cover-lead-standfirst {
      font-family: var(--font-serif-body);
      font-style: italic;
      font-size: 12px;
      line-height: 1.45;
      color: var(--ink-secondary);
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex-shrink: 0;
    }

    .cover-lead-rule {
      border-top: 1px solid var(--rule-light);
      margin-bottom: 8px;
      flex-shrink: 0;
    }

    .cover-lead-prose-wrap {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .cover-lead-columns {
      column-count: 2;
      column-gap: 18px;
      column-rule: 1px solid var(--rule-light);
      text-align: justify;
      font-family: var(--font-serif-body);
      font-size: 11.5px;
      line-height: 1.46;
      color: var(--ink-primary);
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .cover-lead-columns p {
      margin: 0 0 8px 0;
    }

    .cover-lead-drop-cap {
      float: left;
      font-family: var(--font-serif-headline);
      font-size: 36px;
      line-height: 0.85;
      padding: 2px 6px 0 0;
      font-weight: 700;
      color: var(--accent-crimson);
    }

    .cover-lead-footer-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 6px;
      margin-top: auto;
      border-top: 1px dashed var(--rule-light);
      flex-shrink: 0;
    }

    .cover-lead-byline {
      font-family: var(--font-sans);
      font-size: 10px;
      color: var(--ink-muted);
    }

    .cover-lead-jump-btn,
    .photo-read-btn {
      font-family: var(--font-sans);
      font-size: 11px;
      padding: 0;
      margin-left: auto;
      color: var(--accent-crimson);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .cover-lead-jump-btn:hover,
    .photo-read-btn:hover {
      color: #631717;
      text-decoration: underline;
    }

    .cover-verso-add-pub-row {
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px dashed var(--rule-light);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-shrink: 0;
    }

    .cover-add-pub-btn {
      font-family: var(--font-sans);
      font-size: 10.5px;
      margin-top: 4px;
      padding: 4px 12px;
      color: #ffffff !important;
      background: var(--accent-crimson, #8f2424) !important;
      border: 1px solid var(--accent-crimson, #8f2424) !important;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 3px;
      box-shadow: 0 1px 3px rgba(143, 36, 36, 0.25);
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .cover-add-pub-btn:hover {
      background: #731c1c !important;
      border-color: #731c1c !important;
      box-shadow: 0 2px 6px rgba(115, 28, 28, 0.4);
      transform: translateY(-0.5px);
    }

    /* Recto Canvas */
    .broadsheet-cover-recto {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 4px 6px;
    }

    .cover-secondaries-section {
      margin-bottom: 10px;
      flex-shrink: 0;
    }

    .cover-section-header-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
      padding-bottom: 3px;
      border-bottom: 1px solid var(--rule-strong);
    }

    .cover-section-header-title {
      font-family: var(--font-sans);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    .cover-secondaries-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
    }

    @media (max-width: 680px) {
      .cover-secondaries-grid,
      .cover-broadsheet-body,
      .cover-verso-lead-body {
        grid-template-columns: 1fr !important;
      }
      .cover-broadsheet-body::after,
      .cover-verso-lead-body::after {
        display: none !important;
      }
      .cover-lead-columns {
        column-count: 1;
      }
      .broadsheet-single-cover .cover-dateline-date {
        display: none;
      }
      .broadsheet-single-cover .cover-sec-figure,
      .broadsheet-single-cover .cover-sec-img {
        height: 150px;
      }
      .cover-add-pub-btn {
        padding: 3px 9px;
        font-size: 10px;
        margin-top: 0;
      }
    }

    .cover-sec-card {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .cover-sec-figure {
      height: 85px;
      width: 100%;
      overflow: hidden;
      border-radius: 3px;
      margin: 0 0 4px 0;
      background: rgba(0, 0, 0, 0.02);
      cursor: pointer;
    }

    .cover-sec-img {
      width: 100%;
      height: 85px;
      object-fit: cover;
      display: block;
    }

    .cover-sec-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cover-sec-kicker-group {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .cover-sec-kicker {
      font-family: var(--font-sans);
      font-size: 8.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-crimson);
    }

    .cover-sec-headline {
      cursor: pointer;
      font-family: var(--font-serif);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
      margin: 0;
      color: var(--ink-primary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: color 0.15s ease;
    }

    .cover-sec-headline:hover {
      color: var(--accent-crimson);
    }

    .cover-sec-excerpt {
      font-family: var(--font-serif-body);
      font-size: 11px;
      line-height: 1.38;
      color: var(--ink-secondary);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .cover-sec-footer {
      margin-top: auto;
      font-family: var(--font-sans);
      font-size: 9px;
      color: var(--ink-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 4px;
    }

    .cover-sec-jump-link {
      margin-left: auto;
      font-family: var(--font-sans);
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--accent-crimson);
      font-weight: 700;
      text-decoration: none;
    }

    .cover-sec-jump-link:hover {
      color: #631717;
      text-decoration: underline;
    }

    /* Recto Directory */
    .cover-directory-section {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-top: none;
      padding-top: 0;
    }

    .cover-directory-header-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
      flex-shrink: 0;
    }

    .cover-directory-title {
      font-family: var(--font-sans);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    .cover-directory-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cover-directory-count {
      font-family: var(--font-sans);
      font-size: 9px;
      color: var(--ink-muted);
      letter-spacing: 0.05em;
    }

    .cover-directory-add-btn {
      font-size: 10px;
      padding: 2px 7px;
      color: var(--accent-crimson);
      background: transparent;
      border: 1px solid var(--rule-light);
      border-radius: 3px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .cover-directory-add-btn:hover {
      background: rgba(143, 36, 36, 0.08);
      border-color: var(--accent-crimson);
    }

    .cover-directory-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 4px;
    }

    .cover-directory-scroll::-webkit-scrollbar {
      width: 4px;
    }

    .cover-directory-scroll::-webkit-scrollbar-thumb {
      background: var(--rule-light);
      border-radius: 2px;
    }

    .cover-source-articles-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
      overflow-x: hidden;
    }

    .cover-source-articles-list .cover-toc-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 3px 4px;
      border-radius: 3px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.03);
      min-width: 0;
    }

    .cover-source-articles-list .cover-toc-headline {
      flex: 1;
      padding-right: 10px;
      font-family: var(--font-serif);
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.25;
      color: var(--ink-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cover-source-articles-list .cover-toc-meta-row {
      font-family: var(--font-sans);
      font-size: 9.5px;
      color: var(--ink-muted);
      white-space: nowrap;
      flex-shrink: 0;
      margin-top: 0;
    }

    .cover-toc-page-badge {
      font-weight: 600;
      color: var(--accent-crimson);
    }

    /* Single-Page Cover */
    .broadsheet-single-cover {
      overflow-y: auto !important;
      padding-right: 8px;
    }

    .cover-single-scroll-body {
      display: flex;
      flex-direction: column;
    }

    .cover-lead-single .cover-lead-hero-figure {
      max-height: 320px;
      height: auto;
    }

    .cover-lead-single .cover-lead-hero-img {
      max-height: 320px;
    }

    .cover-lead-prose-single {
      font-family: var(--font-serif-body);
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--ink-primary);
      margin-bottom: 10px;
    }