/* ============================================================================
   npb-insights.ch — publications
   ============================================================================
   The Quotedian and The Q, mirrored from Substack and set in NPB house style.

   Two jobs, and the second is the harder one:

     1. the index — latest issue given weight, the rest as a quiet list
     2. the issue — someone else's HTML, made to read like this site

   (2) is why most of this file is `.pub-body` selectors. Substack's markup is
   not ours and cannot be changed, so it is styled where it lands: figures,
   captions, blockquotes, tables. The alternative was rewriting the markup at
   ingest, which would mean the site quietly editing the author's work.

   Mobile first, like everything else (ARCHITECTURE.md §11). Charts are the
   substance of these publications and many are wide, so every image and table
   is constrained rather than trusted.
   ========================================================================= */

.pub-app{max-width:52rem}

.pub-state{
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-btn);
  background:var(--surface);color:var(--ink-2);font-size:.88rem;line-height:1.6;
}
.pub-state[hidden]{display:none}
.pub-state a{color:var(--npb-red);font-weight:600}

/* ---------- index ----------------------------------------------------------- */

.pub-lead{
  display:block;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-panel);transition:border-color .14s,box-shadow .14s;
}
.pub-lead:hover{border-color:#c7ccd8;box-shadow:var(--shadow)}
.pub-lead .cover{display:block;background:var(--plane-2)}
.pub-lead .cover img{display:block;width:100%;height:auto;max-height:19rem;object-fit:cover}
.pub-lead .body{display:block;padding:1.1rem 1.2rem 1.3rem}
.pub-lead .kicker{
  display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--npb-red);margin-bottom:.45rem;
}
.pub-lead .t{display:block;font-size:1.22rem;font-weight:680;letter-spacing:-.012em;color:var(--ink)}
.pub-lead .s{display:block;margin-top:.3rem;color:var(--ink-2);font-size:.95rem;line-height:1.45}
.pub-lead .d{display:block;margin-top:.7rem;font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

.pub-list{list-style:none;margin:1.1rem 0 0;padding:0;border-top:1px solid var(--line)}
.pub-list li{border-bottom:1px solid var(--line-2)}
.pub-list a{
  display:block;padding:.85rem .2rem;text-decoration:none;
  border-left:2px solid transparent;padding-left:.6rem;transition:.14s background,.14s border-color;
}
.pub-list a:hover{background:var(--surface);border-left-color:var(--npb-red)}
.pub-list .t{display:block;font-size:.95rem;font-weight:620;color:var(--ink)}
.pub-list .s{display:block;margin-top:.15rem;font-size:.84rem;color:var(--ink-3)}
.pub-list .d{display:block;margin-top:.35rem;font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- one issue -------------------------------------------------------- */

.pub-head{margin:0 0 1.6rem;padding-bottom:1rem;border-bottom:2px solid var(--navy)}
.pub-head .back{
  display:inline-block;margin-bottom:.9rem;font-size:.78rem;font-weight:600;
  color:var(--ink-3);text-decoration:none;
}
.pub-head .back:hover{color:var(--npb-red)}
.pub-head .back::before{content:"← "}
.pub-head h2{margin:0;font-size:1.55rem;font-weight:700;letter-spacing:-.018em;line-height:1.2}
.pub-head .s{margin:.45rem 0 0;font-size:1.02rem;color:var(--ink-2);line-height:1.45}
.pub-head .d{margin:.75rem 0 0;font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- the mirrored body ------------------------------------------------
   Substack's own markup. Styled where it lands rather than rewritten, so the
   site never silently edits what was written. */

.pub-body{font-size:1rem;line-height:1.62;color:var(--ink-2)}
.pub-body > *:first-child{margin-top:0}
.pub-body p{margin:0 0 1.05rem}
.pub-body p:empty{display:none}          /* Substack emits a lot of these */
.pub-body strong,.pub-body b{color:var(--ink);font-weight:650}
.pub-body a{color:var(--npb-red);text-decoration:underline;text-underline-offset:2px}
.pub-body a:hover{color:var(--npb-red-deep)}

.pub-body h1,.pub-body h2,.pub-body h3,.pub-body h4{
  color:var(--ink);font-weight:680;letter-spacing:-.012em;line-height:1.25;
  margin:2rem 0 .7rem;
}
.pub-body h1{font-size:1.35rem}
.pub-body h2{font-size:1.2rem}
.pub-body h3{font-size:1.05rem}
.pub-body h4{font-size:.95rem}

/* The Quotedian opens on a quote. It is the publication's signature, so it is
   given room rather than treated as an aside. */
.pub-body blockquote{
  margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--npb-red);
  color:var(--ink);font-size:1.06rem;line-height:1.55;
}
.pub-body blockquote p{margin:0 0 .5rem}
.pub-body blockquote p:last-child{margin:0;color:var(--ink-3);font-size:.88rem}

.pub-body ul,.pub-body ol{margin:0 0 1.05rem;padding-left:1.3rem}
.pub-body li{margin:0 0 .4rem}

.pub-body hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

/* Charts. These are the substance, not decoration — full width, never cropped,
   and never wider than the column whatever the source says. */
.pub-body img,.pub-body picture{max-width:100%;height:auto;display:block}
.pub-body figure{margin:1.5rem 0}
.pub-body figure img{
  width:100%;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);
}
.pub-body figcaption,.pub-body .image-caption{
  margin-top:.5rem;font-size:.78rem;color:var(--ink-3);line-height:1.5;text-align:left;
}
/* Substack wraps images in a link to its own lightbox. Keep the link working
   but stop it looking like body copy. */
.pub-body .captioned-image-container a,.pub-body figure a{text-decoration:none;border:0}

/* A wide table scrolls inside itself. It must never be the reason the page
   scrolls sideways (§11). */
.pub-body table{
  width:100%;border-collapse:collapse;font-size:.86rem;margin:1.4rem 0;
  font-variant-numeric:tabular-nums;
}
.pub-body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.pub-body th,.pub-body td{
  padding:.4rem .6rem;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap;
}
.pub-body th{
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);border-bottom-color:var(--line);
}
.pub-body th:first-child,.pub-body td:first-child{text-align:left}

/* ---------- back to the publication ------------------------------------------
   Subscribing happens on Substack and only there, so every view ends with the
   way back rather than a dead end. */
.pub-cta{
  margin-top:2.2rem;padding:1.2rem 1.3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-panel);
}
.pub-cta p{margin:0 0 .9rem;font-size:.88rem;color:var(--ink-3);line-height:1.55}
.pub-cta .btn{
  display:inline-block;font-size:.82rem;font-weight:600;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-btn);padding:.45rem .9rem;
  color:var(--ink);background:var(--surface);margin:0 .3rem .3rem 0;
}
.pub-cta .btn:hover{border-color:#c7ccd8;background:#fbfcfe}
.pub-cta .btn.primary{background:var(--npb-red);border-color:var(--npb-red);color:#fff}
.pub-cta .btn.primary:hover{background:var(--npb-red-deep);border-color:var(--npb-red-deep)}

@media (min-width:768px){
  .pub-head h2{font-size:1.75rem}
  .pub-body{font-size:1.04rem}
}

@media print{
  .pub-cta,.pub-head .back,.pub-list{display:none}
  .pub-body{font-size:10pt}
  .pub-body figure{break-inside:avoid}
}