/* Ported from content/blog.html */
/* ============ BLOG INDEX identity ============
     METAPHOR: a broadsheet / magazine masthead.
     - Thick top-rule + dateline strip beneath the nav (like a newspaper flag)
     - Big Instrument Serif feature with a real fold/cover-story feel
     - Sectionettes labeled with mono kickers (§01 FIELD NOTES, etc.)
     - Multi-column body with hairline rules between stories
     - Reading list shelf + "From the editor" inset + a subscription card
     */

  .crumb { padding: 20px 0 0; font-size: 13px; color: var(--fg-mute); display: flex; gap: 10px; align-items: center; }
  .crumb a { color: var(--fg-mute); }
  .crumb a:hover { color: var(--accent); }
  .crumb .sep { opacity: 0.4; }

  /* ===== MASTHEAD ===== */
  .mast {
    border-top: 6px solid var(--fg);
    border-bottom: 1px solid var(--border);
    padding: 36px 0 28px;
    margin-top: 20px;
    position: relative;
  }
  .mast::before {
    content: ""; position: absolute; left: 32px; right: 32px; top: 14px;
    height: 1px; background: var(--fg);
  }
  .mast-flag {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px; align-items: end;
  }
  .mast-left, .mast-right {
    font-family: "Geist Mono", monospace; font-size: 11px;
    color: var(--fg-mute); letter-spacing: 0.08em;
    line-height: 1.6; text-transform: uppercase;
  }
  .mast-right { text-align: right; }
  .mast-left .now-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); margin-right: 6px;
    animation: pulse 1.8s ease-out infinite;
    vertical-align: middle;
  }
  .mast-title {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: clamp(64px, 11vw, 144px);
    line-height: 0.88; letter-spacing: -0.035em;
    margin: 0; text-align: center; font-weight: 400;
    color: var(--fg);
  }
  .mast-title small {
    display: block;
    font-family: "Geist Mono", monospace; font-style: normal;
    font-size: 11px; letter-spacing: 0.4em; color: var(--accent);
    margin-bottom: 12px; text-transform: uppercase;
  }
  .mast-tag {
    margin-top: 14px;
    text-align: center;
    font-family: "Geist Mono", monospace; font-size: 11px;
    color: var(--fg-mute); letter-spacing: 0.24em; text-transform: uppercase;
  }
  .mast-tag::before, .mast-tag::after {
    content: "—"; margin: 0 14px; color: var(--border-strong);
  }
  @media (max-width: 780px) {
    .mast-flag { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .mast-right { text-align: center; }
  }

  /* ===== CATEGORY NAV ===== */
  .cat-nav {
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    display: flex; gap: 0; flex-wrap: wrap;
    font-family: "Geist Mono", monospace; font-size: 11.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    align-items: center;
  }
  .cat-nav a {
    padding: 6px 16px 6px 0; color: var(--fg-dim);
    display: inline-flex; align-items: center; gap: 8px;
    border-right: 1px solid var(--border);
    margin-right: 16px;
  }
  .cat-nav a:last-of-type { border-right: 0; }
  .cat-nav a.active { color: var(--accent); }
  .cat-nav a:hover { color: var(--accent); }
  .cat-nav a .num { color: var(--fg-mute); font-size: 10px; }
  .cat-nav a.active .num { color: var(--accent); }
  .cat-nav .filter-r {
    margin-left: auto; display: flex; gap: 10px; align-items: center;
    color: var(--fg-mute);
  }
  .cat-nav .filter-r input {
    border: 0; outline: 0; background: transparent; color: var(--fg);
    font: inherit; padding: 4px 8px; width: 180px;
    border-bottom: 1px solid var(--border-strong);
    text-transform: none; letter-spacing: 0;
  }
  .cat-nav .filter-r input::placeholder { color: var(--fg-mute); text-transform: none; letter-spacing: 0; }

  /* ===== FEATURE / COVER STORY ===== */
  .cover {
    padding: 56px 0 64px;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 56px;
    align-items: start;
  }
  @media (max-width: 980px) { .cover { grid-template-columns: 1fr; } }

  .cover-meta {
    font-family: "Geist Mono", monospace; font-size: 11px;
    color: var(--fg-mute); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 18px;
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  }
  .cover-meta .pin {
    color: var(--accent); padding: 3px 10px;
    border: 1px solid var(--accent); border-radius: 999px;
  }
  .cover-headline {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-weight: 400; font-size: clamp(48px, 6vw, 88px);
    line-height: 0.96; letter-spacing: -0.025em;
    margin: 0 0 24px; color: var(--fg);
    text-wrap: balance;
  }
  .cover-deck {
    font-size: 19px; color: var(--fg-dim); line-height: 1.5;
    max-width: 56ch; margin: 0 0 24px;
    border-left: 3px solid var(--accent);
    padding-left: 20px;
  }
  .cover-byline {
    font-family: "Geist Mono", monospace; font-size: 12px;
    color: var(--fg-mute); letter-spacing: 0.04em;
    padding-top: 18px; border-top: 1px solid var(--border);
  }
  .cover-byline strong { color: var(--fg); font-weight: 500; }
  .cover-image {
    aspect-ratio: 4/5;
    background:
      repeating-linear-gradient(135deg,
        color-mix(in oklch, var(--accent) 22%, var(--bg-card)) 0 14px,
        var(--bg-card) 14px 28px);
    border: 1px solid var(--border);
    position: relative;
    display: grid; place-items: center;
  }
  .cover-image.has-thumb {
    display: block;
    aspect-ratio: unset;
    height: auto;
    overflow: hidden;
    background: var(--bg-card);
  }
  .cover-image.has-thumb::after { content: none; }
  .cover-image.has-thumb img {
    width: 100%;
    height: auto;
    display: block;
    max-height: min(85vh, 920px);
    object-fit: contain;
    object-position: center;
  }
  .cover-image::after {
    content: "[ cover · 1600 × 2000 ]"; font-family: "Geist Mono", monospace;
    color: var(--fg-mute); font-size: 11px;
    background: var(--bg); padding: 8px 14px; border-radius: 6px;
    border: 1px solid var(--border); letter-spacing: 0.04em;
  }
  .cover-image .cap {
    position: absolute; bottom: -36px; left: 0;
    font-family: "Geist Mono", monospace; font-size: 11px;
    color: var(--fg-mute); letter-spacing: 0.04em;
  }
  .cover-image .cap strong { color: var(--fg-dim); font-weight: 500; }

  /* ===== SECTION HEAD ===== */
  .sec-rule {
    margin: 64px 0 32px;
    border-top: 4px solid var(--fg);
    padding-top: 8px;
    display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: baseline;
  }
  .sec-rule .lbl {
    font-family: "Geist Mono", monospace; font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--fg-mute);
  }
  .sec-rule .lbl .n { color: var(--accent); margin-right: 10px; }
  .sec-rule .title {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: clamp(32px, 4vw, 54px);
    color: var(--fg); margin: 0; font-weight: 400;
    line-height: 1; letter-spacing: -0.02em;
  }
  .sec-rule .more {
    font-family: "Geist Mono", monospace; font-size: 11.5px;
    color: var(--accent); letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .sec-rule .more:hover { text-decoration: underline; }
  .sec-rule .meta {
    font-family: "Geist Mono", monospace; font-size: 10.5px;
    color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase;
  }

  /* ===== THREE-COL COLUMNS ===== */
  .cols-3 {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-top: 1px solid var(--border);
  }
  @media (max-width: 980px) { .cols-3 { grid-template-columns: 1fr; } }
  .col-story {
    padding: 28px 28px 32px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: relative;
    background: var(--bg);
    transition: 160ms ease;
    cursor: pointer;
  }
  .col-story:hover { background: var(--bg-elev); }
  .col-story:last-child { border-right: 0; }
  @media (max-width: 980px) { .col-story { border-right: 0; } }
  .col-story .kicker {
    font-family: "Geist Mono", monospace; font-size: 10.5px;
    color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 10px;
    display: flex; gap: 10px; align-items: center;
  }
  .col-story .kicker .clock {
    color: var(--fg-mute); border-left: 1px solid var(--border);
    padding-left: 10px;
  }
  .col-story .h {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 28px; line-height: 1.1; letter-spacing: -0.015em;
    margin: 0 0 12px; color: var(--fg); font-weight: 400;
    text-wrap: balance;
  }
  .col-story .dek {
    font-size: 14.5px; color: var(--fg-dim); line-height: 1.55;
    margin: 0 0 18px;
  }
  .col-story .byline {
    font-family: "Geist Mono", monospace; font-size: 11px;
    color: var(--fg-mute); letter-spacing: 0.04em;
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between;
  }
  .col-story .byline strong { color: var(--fg-dim); font-weight: 500; }
  .col-story .thumb {
    aspect-ratio: 5/3; margin-bottom: 18px;
    background:
      repeating-linear-gradient(135deg,
        color-mix(in oklch, var(--accent) 18%, var(--bg-card)) 0 10px,
        var(--bg-card) 10px 20px);
    border: 1px solid var(--border);
    position: relative; display: grid; place-items: center;
    font-family: "Geist Mono", monospace; font-size: 10.5px;
    color: var(--fg-mute); letter-spacing: 0.04em;
    overflow: hidden;
  }
  .col-story .thumb.has-thumb {
    display: block;
    background: var(--bg-card);
  }
  .col-story .thumb.has-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
  }
  .col-story .thumb span { background: var(--bg); padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; }
  .col-story .thumb.alt { background:
      repeating-linear-gradient(45deg,
        color-mix(in oklch, var(--gold) 26%, var(--bg-card)) 0 10px,
        var(--bg-card) 10px 20px); }
  .col-story .thumb.alt2 { background:
      repeating-linear-gradient(90deg,
        color-mix(in oklch, oklch(0.62 0.12 230) 22%, var(--bg-card)) 0 10px,
        var(--bg-card) 10px 20px); }
  .col-story .thumb.alt3 { background:
      radial-gradient(circle at 30% 40%, color-mix(in oklch, var(--accent) 28%, transparent), transparent 60%),
      radial-gradient(circle at 70% 70%, color-mix(in oklch, var(--gold) 24%, transparent), transparent 60%),
      var(--bg-card); }

  /* ===== PLAYBOOK (numbered list) ===== */
  .play-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--border);
  }
  @media (max-width: 880px) { .play-grid { grid-template-columns: 1fr; } }
  .play-row {
    display: grid; grid-template-columns: 80px 1fr auto;
    align-items: start; gap: 24px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    transition: 140ms ease;
    cursor: pointer;
  }
  .play-row:hover { background: var(--bg-elev); }
  @media (max-width: 880px) { .play-row { border-right: 0; } }
  .play-row:nth-child(even) { border-right: 0; }
  .play-row .nm {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 44px; color: var(--accent); line-height: 1; font-weight: 400;
    letter-spacing: -0.02em;
  }
  .play-row .h {
    font-size: 18px; letter-spacing: -0.01em; font-weight: 500;
    line-height: 1.25; margin: 0 0 6px;
  }
  .play-row .meta {
    font-family: "Geist Mono", monospace; font-size: 10.5px;
    color: var(--fg-mute); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .play-row .arrow-end {
    font-family: "Geist Mono", monospace; font-size: 14px;
    color: var(--fg-mute); align-self: center;
  }
  .play-row:hover .arrow-end { color: var(--accent); transform: translateX(4px); }

  /* ===== DISPATCHES + EDITOR ===== */
  .lower-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 56px;
    margin-top: 0;
  }
  @media (max-width: 980px) { .lower-grid { grid-template-columns: 1fr; } }

  .dispatches { }
  .dispatch {
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 96px 1fr 80px; gap: 20px; align-items: center;
    cursor: pointer; transition: 140ms ease;
  }
  .dispatch:hover .h-d { color: var(--accent); }
  .dispatch:first-child { border-top: 1px solid var(--border); }
  .dispatch .date {
    font-family: "Geist Mono", monospace; font-size: 11px;
    color: var(--fg-mute); letter-spacing: 0.06em;
    line-height: 1.4;
  }
  .dispatch .date b { color: var(--fg); font-weight: 500; font-size: 22px; display: block; letter-spacing: -0.01em; }
  .dispatch .h-d {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 22px; line-height: 1.15; letter-spacing: -0.01em;
    color: var(--fg); margin: 0 0 4px; font-weight: 400;
    transition: color 140ms ease;
  }
  .dispatch .sub-d {
    font-size: 13.5px; color: var(--fg-mute); margin: 0;
  }
  .dispatch .tag {
    font-family: "Geist Mono", monospace; font-size: 10px;
    color: var(--fg-mute); letter-spacing: 0.1em; text-transform: uppercase;
    text-align: right;
  }
  .dispatch .tag .d-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
    background: var(--accent);
  }

  /* ===== EDITORIAL SIDEBAR ===== */
  .ed-rail { }
  .ed-card {
    border: 1px solid var(--border);
    padding: 28px;
    background: var(--bg-elev);
    margin-bottom: 24px;
    position: relative;
  }
  .ed-card .corner {
    position: absolute; top: -1px; left: -1px;
    background: var(--accent); color: var(--accent-ink);
    font-family: "Geist Mono", monospace; font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 6px 12px;
  }
  .ed-card h4 {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 28px; line-height: 1.1; margin: 24px 0 14px;
    font-weight: 400; letter-spacing: -0.015em;
  }
  .ed-card .ed-portrait {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    border: 1px solid var(--border-strong);
    margin-bottom: 16px;
  }
  .ed-card p { font-size: 14.5px; color: var(--fg-dim); margin: 0 0 14px; line-height: 1.55; }
  .ed-card .ed-sign {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 22px; color: var(--accent);
    border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px;
  }
  .ed-card .ed-sign small {
    display: block; font-family: "Geist Mono", monospace; font-style: normal;
    font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.08em;
    text-transform: uppercase; margin-top: 4px;
  }

  /* subscribe card */
  .sub-card {
    border: 1px solid var(--border-strong);
    padding: 28px;
    background:
      radial-gradient(400px 200px at 90% 0%, color-mix(in oklch, var(--accent) 22%, transparent), transparent 70%),
      var(--bg-card);
    position: relative;
  }
  .sub-card .stamp {
    position: absolute; top: 14px; right: 14px;
    width: 64px; height: 64px;
    border: 2px solid var(--accent); border-radius: 50%;
    display: grid; place-items: center;
    font-family: "Instrument Serif", serif; font-style: italic;
    color: var(--accent); font-size: 22px;
    transform: rotate(-12deg);
  }
  .sub-card .stamp small { font-size: 9px; font-family: "Geist Mono", monospace; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; display: block; margin-top: -4px; }
  .sub-card .k {
    font-family: "Geist Mono", monospace; font-size: 10.5px;
    color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase;
  }
  .sub-card h4 {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 32px; line-height: 1.05; margin: 8px 0 12px;
    font-weight: 400; max-width: 12ch;
  }
  .sub-card p { font-size: 13.5px; color: var(--fg-dim); margin: 0 0 16px; max-width: 28ch; }
  .sub-form {
    display: flex; gap: 8px; flex-direction: column;
  }
  .sub-form input {
    width: 100%; padding: 12px 14px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--bg);
    font: inherit; color: var(--fg);
  }
  .sub-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .sub-form button {
    width: 100%; padding: 12px; border-radius: 8px;
    background: var(--fg); color: var(--bg);
    border: 0; font-size: 14px; font-weight: 500;
    letter-spacing: 0.02em;
  }
  .sub-card .small {
    font-family: "Geist Mono", monospace; font-size: 10.5px;
    color: var(--fg-mute); margin-top: 12px; letter-spacing: 0.04em;
  }

  /* most-read mini list */
  .rail-list {
    border: 1px solid var(--border);
    padding: 22px 24px;
    margin-bottom: 24px;
  }
  .rail-list h6 {
    font-family: "Geist Mono", monospace; font-size: 10.5px;
    letter-spacing: 0.16em; color: var(--fg-mute);
    text-transform: uppercase; margin: 0 0 14px;
  }
  .rail-list ol { padding: 0; margin: 0; counter-reset: rail; }
  .rail-list li {
    list-style: none; counter-increment: rail;
    padding: 12px 0 12px 32px; border-top: 1px solid var(--border);
    position: relative; font-size: 14px; line-height: 1.35;
    color: var(--fg-dim);
    cursor: pointer;
  }
  .rail-list li:hover { color: var(--accent); }
  .rail-list li:first-child { border-top: 0; }
  .rail-list li::before {
    content: counter(rail, decimal-leading-zero);
    position: absolute; left: 0; top: 12px;
    font-family: "Geist Mono", monospace; font-size: 11px;
    color: var(--accent); letter-spacing: 0.04em;
  }
  .rail-list li small {
    display: block; font-family: "Geist Mono", monospace; font-size: 10.5px;
    color: var(--fg-mute); margin-top: 4px;
  }

  /* ===== ON-THE-DESK (mini editorial inset) ===== */
  .desk {
    margin-top: 64px;
    border-top: 4px double var(--fg);
    padding-top: 28px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  @media (max-width: 880px) { .desk { grid-template-columns: 1fr; } }
  .desk-card {
    padding: 24px; border: 1px solid var(--border); background: var(--bg-elev);
    display: flex; flex-direction: column; gap: 12px;
  }
  .desk-card .k {
    font-family: "Geist Mono", monospace; font-size: 10.5px;
    color: var(--fg-mute); letter-spacing: 0.16em; text-transform: uppercase;
  }
  .desk-card h5 {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 24px; margin: 0; font-weight: 400; letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .desk-card .body { font-size: 13.5px; color: var(--fg-dim); }
  .desk-card .more-l {
    font-family: "Geist Mono", monospace; font-size: 11px;
    color: var(--accent); letter-spacing: 0.04em; margin-top: 6px;
    text-transform: uppercase;
  }

  /* archive footer */
  .archive-foot {
    margin: 72px 0 0;
    border-top: 1px solid var(--border);
    padding: 28px 0;
    display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  }
  .archive-foot .yrs {
    display: flex; gap: 4px; flex-wrap: wrap;
    font-family: "Geist Mono", monospace; font-size: 11.5px;
  }
  .archive-foot .yrs a {
    padding: 6px 12px; border: 1px solid var(--border);
    color: var(--fg-dim); border-radius: 6px;
  }
  .archive-foot .yrs a.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .archive-foot .yrs a:hover { border-color: var(--accent); color: var(--accent); }
  .archive-foot .yrs a.active:hover { color: var(--bg); border-color: var(--fg); }
  .archive-foot .pager {
    font-family: "Geist Mono", monospace; font-size: 12px; color: var(--fg-mute);
    display: flex; gap: 16px; align-items: center;
  }
  .archive-foot .pager b { color: var(--fg); }

  /* journal index section empty states (playbook, dispatches, desk) */
  .wh-blog-section-empty {
    padding: 28px 24px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .wh-blog-section-empty h5 {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 24px;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .wh-blog-section-empty p {
    font-size: 13.5px;
    color: var(--fg-dim);
    margin: 0;
    max-width: 52ch;
  }
  .wh-blog-section-empty .links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
  }
  .wh-blog-section-empty .more-l {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .wh-blog-section-empty .more-l:hover { text-decoration: underline; }
  .wh-blog-section-empty--playbook { grid-column: 1 / -1; }
  .wh-blog-section-empty--dispatches {
    border-top: 1px solid var(--border);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 28px 0;
    background: transparent;
  }
  .wh-blog-section-empty--desk { grid-column: 1 / -1; }

  /* journal archive listing (/blog/all/, category archives) + search (/ ?s=) */
  .wh-blog-archive-grid { margin: 40px 0 0; }
  .wh-blog-archive-empty {
    margin: 48px 0;
    font-size: 15px;
    color: var(--fg-dim);
  }
  .wh-blog-search .filter-r input[type="search"] {
    min-width: 12rem;
  }

  /* tweak: density compact tightens cols/cover gaps */
  [data-density="compact"] .cover { padding: 32px 0; gap: 32px; }
  [data-density="compact"] .col-story { padding: 22px; }
  [data-density="compact"] .sec-rule { margin: 40px 0 24px; }