:root {
      --ink: #0d0d0d;
      --ink-mid: #2a2a2a;
      --ink-light: #5a5a5a;
      --ink-faint: #8a8a8a;
      --paper: #f7f4ee;
      --paper-warm: #ede9e0;
      --paper-mid: #e0dbd0;
      --accent: #c0392b;
      --accent-dark: #922b21;
      --accent-warm: #e8734a;
      --gold: #b5942a;
      --border: #c8c3b8;
      --col-width: 700px;
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Vazirmatn', sans-serif;
      background-color: var(--paper);
      color: var(--ink);
      line-height: 1.9;
      font-size: 17px;
      direction: rtl;
    }

    /* ── Breaking News Banner ── */
    .breaking-bar {
      background: var(--accent);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: 10px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      overflow: hidden;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .breaking-bar .label {
      background: #fff;
      color: var(--accent);
      padding: 2px 10px;
      font-size: 11px;
      border-radius: 2px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ticker-wrap { overflow: hidden; flex: 1; }
    .ticker {
      display: inline-block;
      white-space: nowrap;
      animation: ticker 22s linear infinite;
    }
    @keyframes ticker {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* ── Site Header ── */
    .site-header {
      border-bottom: 3px double var(--border);
      padding: 20px 24px 16px;
      text-align: center;
    }
    .site-header .category-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: var(--accent);
      text-transform: uppercase;
      border-top: 2px solid var(--accent);
      border-bottom: 2px solid var(--accent);
      display: inline-block;
      padding: 4px 14px;
      margin-bottom: 0;
    }

    /* ── Hero / Headline Block ── */
    .hero {
      max-width: 860px;
      margin: 0 auto;
      padding: 40px 24px 0;
    }

    .hero-eyebrow {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    h1.headline {
      font-size: clamp(26px, 4vw, 42px);
      font-weight: 800;
      line-height: 1.35;
      color: var(--ink);
      border-right: 5px solid var(--accent);
      padding-right: 20px;
      margin-bottom: 20px;
    }

    .deck {
      font-size: 19px;
      font-weight: 400;
      color: var(--ink-mid);
      line-height: 1.7;
      border-bottom: 1px solid var(--border);
      padding-bottom: 24px;
      margin-bottom: 24px;
    }

    .byline-row {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 13px;
      color: var(--ink-faint);
      flex-wrap: wrap;
    }
    .byline-row .date { color: var(--ink-light); font-weight: 600; }
    .byline-row .separator { width: 4px; height: 4px; background: var(--border); border-radius: 50%; }

    /* ── Hero Image ── */
    .hero-image-wrap {
      max-width: 860px;
      margin: 28px auto 0;
      padding: 0 24px;
    }
    .hero-image-placeholder {
      width: 100%;
      aspect-ratio: 16/9;
      background: linear-gradient(135deg, #1a2a3a 0%, #0d1f2d 40%, #1a3040 100%);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }
    .hero-image-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 60%, rgba(192,57,43,0.15) 0%, transparent 60%);
    }
    .ship-icon {
      font-size: 64px;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
      animation: sway 6s ease-in-out infinite;
    }
    @keyframes sway {
      0%, 100% { transform: rotate(-2deg) translateY(0); }
      50% { transform: rotate(2deg) translateY(-6px); }
    }
    .waves {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 60px;
      overflow: hidden;
    }
    .waves svg { width: 100%; height: 100%; }
    .image-caption {
      font-size: 12.5px;
      color: var(--ink-faint);
      margin-top: 8px;
      padding-right: 4px;
      border-right: 2px solid var(--border);
      padding-right: 8px;
    }

    /* ── Article Layout ── */
    .article-body {
      max-width: var(--col-width);
      margin: 36px auto 0;
      padding: 0 24px;
    }

    /* Drop Cap */
    .article-body > p:first-of-type::first-letter {
      font-size: 4.2em;
      font-weight: 800;
      float: right;
      line-height: 0.8;
      margin-left: 10px;
      margin-top: 6px;
      color: var(--accent);
    }

    .article-body p {
      margin-bottom: 22px;
      color: var(--ink-mid);
      font-size: 17px;
    }

    h2.section-title {
      font-size: 22px;
      font-weight: 800;
      color: var(--ink);
      margin: 44px 0 16px;
      position: relative;
      padding-bottom: 10px;
    }
    h2.section-title::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 48px; height: 3px;
      background: var(--accent);
    }

    h3.sub-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      margin: 32px 0 12px;
    }

    /* ── Stat Cards ── */
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      margin: 32px 0;
    }
    .stat-card {
      background: var(--paper-warm);
      border: 1px solid var(--border);
      border-top: 3px solid var(--accent);
      padding: 16px 14px;
      text-align: center;
      border-radius: 3px;
    }
    .stat-card .num {
      font-size: 30px;
      font-weight: 800;
      color: var(--accent);
      display: block;
      line-height: 1;
      margin-bottom: 6px;
    }
    .stat-card .lbl {
      font-size: 12px;
      color: var(--ink-light);
      font-weight: 600;
    }

    /* ── Pullquote ── */
    blockquote.pullquote {
      border: none;
      background: var(--paper-warm);
      border-right: 5px solid var(--gold);
      margin: 36px 0;
      padding: 22px 24px;
      font-size: 19px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.65;
      position: relative;
    }
    blockquote.pullquote::before {
      content: '❝';
      position: absolute;
      top: -12px; right: 20px;
      font-size: 48px;
      color: var(--gold);
      opacity: 0.4;
      line-height: 1;
    }
    blockquote.pullquote cite {
      display: block;
      font-size: 13px;
      font-weight: 400;
      color: var(--ink-faint);
      margin-top: 12px;
      font-style: normal;
    }

    /* ── Timeline ── */
    .timeline {
      margin: 36px 0;
      position: relative;
      padding-right: 32px;
    }
    .timeline::before {
      content: '';
      position: absolute;
      right: 10px; top: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--accent), var(--border));
    }
    .tl-item {
      position: relative;
      margin-bottom: 24px;
      padding-right: 28px;
    }
    .tl-item::before {
      content: '';
      position: absolute;
      right: -26px; top: 6px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--paper);
      box-shadow: 0 0 0 2px var(--accent);
    }
    .tl-item.death::before { background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
    .tl-date {
      font-size: 12px;
      font-weight: 800;
      color: var(--accent);
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }
    .tl-text {
      font-size: 15px;
      color: var(--ink-mid);
      line-height: 1.6;
    }

    /* ── Info Box ── */
    .info-box {
      background: var(--paper-mid);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 22px 24px;
      margin: 32px 0;
    }
    .info-box h3 {
      font-size: 15px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .info-box ul {
      list-style: none;
      padding: 0;
    }
    .info-box ul li {
      font-size: 14.5px;
      color: var(--ink-mid);
      padding: 6px 0;
      border-bottom: 1px dotted var(--border);
      display: flex;
      gap: 10px;
      align-items: baseline;
    }
    .info-box ul li:last-child { border-bottom: none; }
    .info-box ul li::before { content: '▸'; color: var(--accent); flex-shrink: 0; }

    /* ── Warning Banner ── */
    .who-notice {
      background: #fef9e7;
      border: 1px solid #f0c030;
      border-right: 4px solid #f0c030;
      border-radius: 3px;
      padding: 16px 20px;
      margin: 30px 0;
      font-size: 14.5px;
      color: #5d4e00;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .who-notice .icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

    /* ── Tags ── */
    .tags {
      margin: 48px 0 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .tag {
      background: var(--paper-warm);
      border: 1px solid var(--border);
      color: var(--ink-light);
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 2px;
      letter-spacing: 0.04em;
    }
    .tag:first-child { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* ── Footer ── */
    footer {
      border-top: 3px double var(--border);
      margin-top: 60px;
      padding: 24px;
      text-align: center;
      font-size: 12.5px;
      color: var(--ink-faint);
    }

    @media (max-width: 600px) {
      h1.headline { font-size: 24px; }
      .article-body > p:first-of-type::first-letter { font-size: 3.2em; }
      .stat-grid { grid-template-columns: repeat(2, 1fr); }
    }