/* Blog-only rules. Everything shared (tokens, header, buttons, cards, section chrome, footer)
   comes from /shared/site.css, which is generated from the homepage. Nothing here redefines a shared selector. */

/* heroes: the brand grid, as on every other page */
.hero{padding:136px 0 64px;background:var(--basemap);
      background-image:linear-gradient(rgba(12,46,28,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(12,46,28,.045) 1px, transparent 1px);
      background-size:44px 44px;border-bottom:1px solid var(--line)}
.hero .kick{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--field)}
.hero h1{font-size:clamp(40px,4.6vw,64px);font-weight:900;letter-spacing:-.025em;line-height:1.02;color:var(--pine);margin-top:18px;max-width:13em}
.hero h1 .hl{color:var(--field);background:linear-gradient(var(--lime),var(--lime)) no-repeat left 94%/100% .13em}
.hero .lede{font-size:clamp(17px,1.4vw,20px);color:var(--slate);margin-top:22px;max-width:34em;line-height:1.5}

/* shared bits for cards */
.lab{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.14em}
.pimg{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--mist)}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.tk:hover .pimg img{transform:scale(1.03)}
.pimg.none{display:grid;place-items:center;background-color:var(--tint);
           background-image:linear-gradient(rgba(12,46,28,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(12,46,28,.06) 1px, transparent 1px);background-size:44px 44px}
.pimg.none span{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--field)}
.tk .ptag{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--field)}
.tk .ptag .new{color:#fff;background:var(--field);border-radius:4px;padding:3px 7px;margin-right:10px;letter-spacing:.12em}
.tk .pmeta{display:flex;flex-wrap:nowrap;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--grey)}
.tk .pmeta span + span::before{content:"\00b7";margin:0 9px;color:var(--sage)}
.more{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--field)}
.more svg{transition:transform .18s ease}
a.tk:hover .more svg{transform:translateX(3px)}

/* listing */
section#posts{padding-top:64px}
a.lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;flex-direction:row}
a.lead .pimg{border-right:1px solid var(--line);aspect-ratio:auto;min-height:380px}
a.lead .pimg img{position:absolute;inset:0}
a.lead .ltxt{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:36px 40px}
a.lead h2{font-size:clamp(26px,2.5vw,36px);line-height:1.12;max-width:none}
a.lead .psum{font-size:16.5px;color:var(--slate);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
a.lead .more{margin-top:6px}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
#more .pgrid{margin-top:44px}
.pcard .pimg{border-bottom:1px solid var(--line)}
.pcard .tk-body{gap:10px;padding:20px 22px 22px}
.pcard h3{font-size:19.5px;line-height:1.24}
.pcard .psum{font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .pmeta{margin-top:auto;padding-top:8px}

.nlband{grid-column:1/-1;display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:center;background:var(--pine);border-radius:14px;padding:38px 44px;color:#fff}
.nlband .lab{color:var(--lime)}
aside.nlband h2{font-size:clamp(24px,2.2vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.015em;color:#fff;margin-top:10px;max-width:none}
.nlband p{font-size:16px;color:var(--sub-pine);margin-top:8px;line-height:1.5;max-width:30em}

.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.pager .pn{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--grey)}

/* newsletter form, used in the band and in the post rail */
.nl{display:grid;grid-template-columns:1fr auto;gap:10px}
.nl input{min-width:0;height:48px;border-radius:10px;border:1.5px solid var(--line);background:#fff;padding:0 14px;font:inherit;font-size:16px;color:var(--ink)}
.nl input::placeholder{color:#8A978F}
.nl input:focus-visible{outline:3px solid var(--lime);outline-offset:1px;border-color:var(--field)}
.nl .btn{height:48px;padding-top:0;padding-bottom:0}
.nl .nlmsg{grid-column:1/-1;font-size:13.5px;line-height:1.4;min-height:0}
.nl .nlmsg:empty{display:none}
.nl.ok .nlmsg{color:var(--field);font-weight:700}
.nl.err .nlmsg{color:#A33A1E;font-weight:600}
.nlband .nl.ok .nlmsg{color:var(--lime)}
.nlband .nl.err .nlmsg{color:#FFC9B8}

/* a post */
.posthead{padding-bottom:48px}
.posthead h1{font-size:clamp(34px,3.7vw,52px);line-height:1.06;max-width:17em}
.posthead .lede{max-width:40em}
.crumb{display:flex;gap:10px;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.crumb a{color:var(--field);text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.byline{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.byline span + span::before{content:"\00b7";margin:0 12px;color:var(--sage)}
.byline span:first-child{color:var(--pine)}

.post{padding:48px 0 104px}
.cover{margin:0 0 56px}
.cover img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 4px 14px rgba(12,46,28,.06), 0 30px 70px rgba(12,46,28,.12)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:start}
.main{min-width:0;max-width:720px}

.rail{position:sticky;top:92px;display:flex;flex-direction:column;gap:22px;max-height:calc(100vh - 112px);overflow:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.nlbox{background:var(--pine);border-radius:14px;padding:26px 26px 28px;color:#fff}
.nlbox .lab{color:var(--lime)}
.nlbox h2{font-size:22px;font-weight:800;line-height:1.18;letter-spacing:-.01em;color:#fff;margin-top:10px}
.nlbox p{font-size:15px;color:var(--sub-pine);margin-top:8px;line-height:1.5}
.nlbox .nl{grid-template-columns:1fr;margin-top:18px}
.nlbox .nl.err .nlmsg{color:#FFC9B8}
.nlbox .nl.ok .nlmsg{color:var(--lime)}
.nlbox .btn{width:100%;justify-content:center}
.toc{border:1px solid var(--line);border-radius:14px;padding:22px 24px 20px}
.toc .lab{color:var(--grey)}
.toc ol{list-style:none;margin-top:12px;border-left:2px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--slate);text-decoration:none}
.toc a:hover{color:var(--field)}
.toc a.on{color:var(--field);font-weight:700;border-left-color:var(--green)}

.prose{font-size:18.5px;line-height:1.7;color:var(--slate)}
.prose > * + *{margin-top:1.15em}
.prose > :first-child{margin-top:0}
.prose h2{font-size:clamp(25px,2.3vw,31px);font-weight:800;line-height:1.18;letter-spacing:-.015em;color:var(--pine);margin-top:2em;scroll-margin-top:96px}
.prose h3{font-size:21px;font-weight:800;line-height:1.25;color:var(--pine);margin-top:1.7em}
.prose h2 + *, .prose h3 + *{margin-top:.7em}
.prose strong{color:var(--ink);font-weight:700}
.prose a{font-weight:600;text-underline-offset:3px}
.prose ul, .prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--field)}
.prose blockquote{border-left:3px solid var(--green);padding:4px 0 4px 22px;font-size:21px;font-weight:700;line-height:1.4;color:var(--pine)}
.prose img{height:auto;border-radius:12px;border:1px solid var(--line);margin-top:1.6em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th, .prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}

.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:52px;padding-top:22px;border-top:1px solid var(--line)}
.share .lab{color:var(--grey);margin-right:8px}
.share a, .share button{font:inherit;font-size:14.5px;font-weight:700;color:var(--field);background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 14px;min-height:40px;cursor:pointer;text-decoration:none;
                        transition:background-color .18s,border-color .18s,color .18s}
.share a:hover, .share button:hover{background:var(--field);border-color:var(--field);color:#fff}

.nextstep{margin-top:40px;background:var(--tint);border-radius:14px;padding:32px 34px 34px}
.nextstep .lab{color:var(--field)}
.nextstep h2{font-size:clamp(24px,2.2vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.015em;color:var(--pine);margin-top:10px}
.nextstep p{font-size:16.5px;color:var(--slate);margin-top:10px;max-width:36em;line-height:1.55}
.nextstep .row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:22px}

@media (max-width:1040px){
  .cols{grid-template-columns:1fr;gap:48px}
  .main{max-width:none}
  .rail{position:static;max-height:none;overflow:visible}
  .toc{display:none}
  .nlbox .nl{grid-template-columns:1fr auto}
  .nlbox .btn{width:auto}
}
@media (max-width:960px){
  .hero{padding:110px 0 48px}
  section#posts{padding-top:44px}
  a.lead{grid-template-columns:1fr}
  a.lead .pimg{border-right:0;border-bottom:1px solid var(--line);aspect-ratio:16/9;min-height:0}
  a.lead .pimg img{position:static}
  a.lead .ltxt{padding:24px 24px 28px}
  .pgrid{grid-template-columns:1fr 1fr;gap:16px}
  .nlband{grid-template-columns:1fr;gap:22px;padding:30px 26px}
  .cover{margin-bottom:36px}
}
@media (max-width:640px){
  .hero h1{font-size:38px}
  .posthead h1{font-size:31px}
  .pgrid{grid-template-columns:1fr}
  .prose{font-size:17.5px}
  .post{padding:32px 0 72px}
  .nextstep{padding:26px 22px 28px}
  .nl, .nlbox .nl{grid-template-columns:1fr}
  .nl .btn, .nlbox .btn{width:100%;justify-content:center}
}