/* ============================================================
   THE NORTH — blog post pages
   ============================================================ */
body.post-page{background:var(--night)}
.post-page .nav{position:fixed}

.post-wrap{position:relative;max-width:1160px;margin:0 auto;padding:calc(var(--header-h) + 8vh) 6vw 6vh;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:4.5rem;align-items:start}

article{min-width:0}
.post-kicker{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem}
.post-date{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);display:inline-block;padding:.5rem 1rem;margin-bottom:1.6rem;border-radius:2px}
.post-heading{font-family:var(--display);font-weight:400;font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.1;text-transform:uppercase;letter-spacing:.01em;max-width:22ch}
.post-heading em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--fog);display:block;padding-top:.1em;margin-top:-.1em}
.post-deck{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--fog);line-height:1.55;margin-top:1.6rem;max-width:56ch}
.post-rule{width:70px;height:2px;background:var(--accent);margin:2.4rem 0}

.post-hero{position:relative;margin:2.6rem 0}
.post-hero .post-figure-img{height:420px;border-radius:4px;background-size:cover;background-position:center;border:1px solid var(--line);filter:saturate(.9) contrast(1.05)}

article p{color:#c7d4ea;font-size:1.06rem;line-height:1.9;margin-bottom:1.7rem;max-width:70ch}
article p strong{color:var(--ice);font-weight:600}
article a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(223,243,255,.4);text-underline-offset:3px}
article a:hover{text-decoration-color:var(--accent)}

article h2{font-family:var(--display);font-weight:500;font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ice);margin:3rem 0 1.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
article h3{font-family:var(--display);font-weight:500;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ice);margin:2rem 0 .9rem}

article ul,article ol{margin:0 0 1.7rem 1.4rem;color:#c7d4ea;font-size:1.05rem;line-height:1.85}
article ul li,article ol li{margin-bottom:.5rem}

article blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.7rem;color:var(--ice);border-left:2px solid var(--accent);padding:1rem 0 1rem 1.6rem;margin:2.4rem 0;line-height:1.35}
article blockquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-top:1rem}

.post-callout{border:1px solid var(--line);background:var(--ghost);padding:1.4rem 1.6rem;font-size:.98rem;border-radius:3px}

.post-figure{margin:2.4rem 0}
.post-figure-img{height:340px;border-radius:4px;background-size:cover;background-position:center;border:1px solid var(--line);filter:saturate(.92) contrast(1.05)}
.post-figure figcaption{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:.8rem}

.post-table{width:100%;border-collapse:collapse;margin:1.8rem 0 2.4rem;font-size:.92rem}
.post-table th{font-family:var(--display);font-weight:500;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line)}
.post-table td{padding:.75rem .9rem;border-bottom:1px solid var(--line);color:#c7d4ea;vertical-align:top}
.post-table tr:hover td{background:var(--ghost)}
.post-table td strong{color:var(--ice)}

.post-more{border-left:1px solid var(--line);padding-left:1.6rem;position:sticky;top:calc(var(--header-h) + 4vh)}
.post-more h4{font-family:var(--display);font-weight:500;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ice);margin-bottom:1.2rem}
.post-more a{display:block;font-size:.86rem;color:var(--fog);line-height:1.5;margin-bottom:1rem;text-decoration:none;transition:.3s}
.post-more a:hover{color:var(--ice);transform:translateX(4px)}

@media(max-width:820px){
  .post-wrap{grid-template-columns:1fr}
  .post-hero .post-figure-img{height:240px}
  .post-more{border-left:none;border-top:1px solid var(--line);padding:1.6rem 0 0;margin-top:2rem;position:static}
}