/* ── Single post view ──────────────────────────────────── */
    .post-view { max-width: 780px; margin: 0 auto; padding: 0 0 5rem; }
    .post-header { margin-bottom: 2.25rem; }
    .post-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .85rem; margin-top: 1.5rem; }
    .post-tag {
      font-family: var(--font-mono); font-size: .64rem; color: var(--text-dim);
      background: rgba(34,197,94,.06); border: 1px solid var(--border-mid);
      padding: .18rem .55rem; border-radius: 999px;
      letter-spacing: .02em;
    }
    .post-title {
      font-family: var(--font-mono); font-weight: 800;
      font-size: clamp(1.7rem,3.5vw,2.6rem); line-height: 1.1;
      letter-spacing: -.025em; margin-bottom: .85rem;
    }
    .post-subtitle { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 1.4rem; }
    .post-meta-bar {
      display: flex; align-items: center; gap: 1.25rem;
      font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted);
      padding: .9rem 0; border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border); flex-wrap: wrap;
    }
    .post-meta-bar span { display: flex; align-items: center; gap: .35rem; }

    /* Article body */
    .post-content h2 {
      font-family: var(--font-mono); font-weight: 700; font-size: 1.35rem;
      letter-spacing: -.015em; margin: 2.5rem 0 .9rem;
    }
    .post-content h3 {
      font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem;
      margin: 1.8rem 0 .65rem; color: var(--text-dim);
    }
    .post-content p { margin-bottom: 1.2rem; color: var(--text-dim); }
    .post-content p strong { color: var(--text); font-family: var(--font-mono); }
    .post-content ul, .post-content ol {
      color: var(--text-dim); padding-left: 1.4rem; margin-bottom: 1.2rem;
    }
    .post-content li { margin-bottom: .35rem; }
    .post-content a { color: var(--green); text-underline-offset: 3px; }
    .post-content a.btn-primary { color: var(--bg); text-decoration: none; }

    /* Media blocks in post body */
    .post-content figure { margin: 1.2rem 0; }
    .post-content img,
    .post-content video {
      width: 100%;
      height: auto;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      display: block;
    }
    .post-video-embed {
      position: relative;
      padding-top: 56.25%;
      margin: 1.2rem 0;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      background: #000;
    }
    .post-video-embed iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* Materials table */
    .materials-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .88rem; }
    .materials-table th {
      text-align: left; font-family: var(--font-mono); font-size: .67rem;
      text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
      padding: .55rem .75rem; border-bottom: 1px solid var(--border);
    }
    .materials-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); color: var(--text-dim); }
    .materials-table td:first-child { color: var(--text); font-weight: bold; }
    .materials-table tr:hover td { background: rgba(34,197,94,.025); }
    .qty  { font-family: var(--font-mono); font-size: .78rem; color: var(--amber); }
    .price { font-family: var(--font-mono); font-size: .78rem; color: var(--cyan); }

    /* Step boxes */
    .step {
      border: 1px solid var(--border); border-left: 3px solid var(--green);
      border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--bg-card);
      padding: 1.1rem 1.35rem; margin: 1.1rem 0;
    }
    .step-num { font-family: var(--font-mono); font-size: .65rem; color: var(--green); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
    .step h4 { font-family: var(--font-mono); font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
    .step p { color: var(--text-dim); margin: 0; font-size: .9rem; }

    /* Callouts */
    .callout {
      border-radius: var(--r-lg); padding: .9rem 1.1rem;
      margin: 1.1rem 0; display: flex; gap: .7rem; font-size: .88rem; align-items: flex-start;
    }
    .callout-icon { font-size: 1rem; flex-shrink: 0; padding-top: .15rem; }
    .callout.tip    { background: rgba(34,197,94,.05);  border: 1px solid rgba(34,197,94,.15); color: var(--text-dim); }
    .callout.warn   { background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.2); color: #d4a145; }
    .callout.danger { background: rgba(239,68,68,.06);  border: 1px solid rgba(239,68,68,.15); color: #e57979; }

    /* Code blocks */
    .code-block { position: relative; margin: 1.35rem 0; }
    .code-block-header {
      background: var(--bg-header);
      border: 1px solid var(--border); border-bottom: none;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      padding: .48rem 1rem; display: flex; align-items: center; justify-content: space-between;
    }
    .code-lang { font-family: var(--font-mono); font-size: .65rem; color: var(--green); letter-spacing: .08em; text-transform: uppercase; }
    .code-filename { font-family: var(--font-mono); font-size: .65rem; color: var(--text-muted); }
    .copy-btn {
      background: none; border: 1px solid var(--border); color: var(--text-muted);
      font-family: var(--font-mono); font-size: .62rem; padding: .18rem .55rem;
      border-radius: 3px; cursor: pointer; transition: color .18s, border-color .18s;
      display: flex; align-items: center; gap: .3rem;
    }
    .copy-btn:hover { color: var(--green); border-color: var(--green-dim); }
    pre {
      background: var(--bg-code); border: 1px solid var(--border); border-top: none;
      border-radius: 0 0 var(--r-lg) var(--r-lg);
      padding: 1.1rem 1.35rem; overflow-x: auto;
      font-family: var(--font-mono); font-size: .78rem; line-height: 1.85;
    }
    /* One Dark syntax palette — pun gets a dimmer tone to distinguish from .var */
    .kw  { color: #c678dd } .fn   { color: #61afef } .str { color: #98c379 }
    .num { color: #d19a66 } .type { color: #e5c07b } .var { color: #abb2bf }
    .op  { color: #56b6c2 } .pun  { color: #636d83 }
    .cmt { color: #5c6370; font-style: italic }

    /* Diagram placeholder */
    .diagram-box {
      background: var(--bg-card); border: 1px dashed var(--border-mid);
      border-radius: var(--r-lg); padding: 1.75rem; margin: 1.35rem 0; text-align: center;
    }
    .diagram-caption { font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); font-style: italic; margin-top: .75rem; }

    /* Outcome */
    .outcome {
      background: linear-gradient(135deg, var(--bg-card), var(--bg-surface));
      border: 1px solid var(--green-dim); border-radius: var(--r-lg);
      padding: 1.1rem 1.35rem; margin: 1.35rem 0;
    }
    .outcome-title { font-family: var(--font-mono); font-size: .67rem; color: var(--green); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4rem; }
    .outcome p { margin: 0; }

    /* Next-post CTA — connects series posts (e.g. private-cloud → security-lab) */
    .next-post {
      border-left: 3px solid var(--green);
      background: linear-gradient(135deg, var(--bg-card), var(--bg-surface));
      border-radius: 0 var(--r-lg) var(--r-lg) 0;
      padding: 1.25rem 1.5rem;
      margin: 2rem 0 0;
    }
    .next-post-label {
      font-family: var(--font-mono);
      font-size: .65rem;
      color: var(--green);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: .5rem;
    }
    .next-post h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
    .next-post p  { color: var(--text-dim); font-size: .9rem; margin: 0 0 1rem; }

    /* ── Moving logo rail (Ceasefire) ─────────────────────── */
    .logo-rail {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--bg-rail);
      padding: 1rem clamp(1rem,4vw,2.5rem);
      overflow: hidden;
    }
    .logo-rail-inner {
      max-width: 1240px;
      margin: 0 auto;
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    .logo-rail-track {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      will-change: transform;
    }
    .logo-rail:hover .logo-item {
      animation-play-state: paused;
    }

    .logo-item {
      display: inline-flex;
      align-items: center;
      gap: .42rem;
      text-decoration: none;
      color: inherit;
      opacity: .62;
      filter: saturate(.9);
      transition: opacity .2s ease;
      white-space: nowrap;
      animation: logo-marquee 16s linear infinite;
    }
    .logo-item:hover { opacity: .9; }

    .logo-mark {
      width: 1.55rem;
      height: 1.55rem;
      perspective: 900px;
      transform-style: preserve-3d;
      flex: 0 0 auto;
    }
    .logo-sphere {
      width: 100%;
      height: 100%;
      position: relative;
      border-radius: 50%;
      transform-style: preserve-3d;
      animation: sphere-spin 12s linear infinite;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
    }
    .sphere-slice {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(192,57,43,.45);
      box-shadow: 0 0 10px rgba(192,57,43,.08);
    }
    .sphere-slice:nth-child(1) { transform: rotateY(0deg); }
    .sphere-slice:nth-child(2) { transform: rotateY(30deg); }
    .sphere-slice:nth-child(3) { transform: rotateY(60deg); }
    .sphere-slice:nth-child(4) { transform: rotateY(90deg); }
    .sphere-slice:nth-child(5) { transform: rotateY(120deg); }
    .sphere-slice:nth-child(6) { transform: rotateY(150deg); }

    .ceasefire-wordmark {
      margin: 0;
      font-family: 'Bebas Neue', var(--font-mono), monospace;
      font-size: 1.55rem;
      font-weight: 400;
      line-height: 1;
      letter-spacing: .12em;
      color: #f2ede4;
      display: inline-flex;
      align-items: center;
    }
    .ceasefire-wordmark .c { margin-left: 0; }
    .ceasefire-wordmark .f { color: #c0392b; }

    @keyframes sphere-spin {
      from { transform: rotateY(0deg) rotateX(0deg); }
      to { transform: rotateY(360deg) rotateX(360deg); }
    }
    @keyframes logo-marquee {
      0% { transform: translateX(calc(100vw + 100%)); }
      100% { transform: translateX(calc(-100vw - 100%)); }
    }

    @media (max-width: 700px) {
      .logo-rail { padding: .85rem 1rem; }
      .logo-item { animation-duration: 12s; }
      .logo-mark { width: 1.25rem; height: 1.25rem; }
      .ceasefire-wordmark { font-size: 1.25rem; }
    }

    /* ── Footer ────────────────────────────────────────────── */
    footer { border-top: 1px solid var(--border); padding: 2rem clamp(1rem,4vw,2.5rem); }
    .footer-inner {
      max-width: 1240px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; flex-wrap: wrap;
    }
    .footer-copy { font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); }
    .footer-links { display: flex; gap: 1.25rem; list-style: none; }
    .footer-links a {
      font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted);
      text-decoration: none; display: flex; align-items: center; gap: .35rem;
      transition: color .18s;
    }
    .footer-links a:hover { color: var(--green); }