/* kavak.run — long-form notes */

body.blog-page{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.blog-page main{ flex:1 0 auto }

.back-link{
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-bottom:23px;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:650;
  letter-spacing:.035em;
  text-decoration:none;
}
.back-link:hover{ color:var(--leaf-ink) }

/* Blog index */
.blog-index-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  padding:clamp(68px,9vw,112px) 0 clamp(58px,7vw,84px);
}
.blog-index-hero::after{
  content:"";
  position:absolute;
  top:50%;
  right:max(-210px,calc((100vw - var(--shell))/2 - 90px));
  width:360px;
  aspect-ratio:1;
  transform:translateY(-50%);
  border:1px solid var(--rule);
  border-radius:50%;
  box-shadow:
    0 0 0 38px var(--paper),
    0 0 0 39px var(--rule);
  pointer-events:none;
}
.blog-index-hero .shell{
  position:relative;
  z-index:1;
}
.blog-index-hero .eyebrow{ margin-bottom:24px }
.blog-index-hero h1{
  max-width:10ch;
  font-size:clamp(4.15rem,9vw,7.2rem);
  line-height:.86;
}
.blog-index-intro{
  max-width:650px;
  margin-top:34px;
  color:var(--ink-2);
  font-size:clamp(1.1rem,2vw,1.32rem);
  line-height:1.65;
  text-wrap:pretty;
}
.post-feed{
  padding:clamp(52px,7vw,82px) 0 clamp(82px,10vw,128px);
}
.post-feed > .shell{ max-width:1040px }
.post-feed-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.post-feed-heading h2{
  font-size:clamp(1.45rem,3vw,2rem);
  letter-spacing:-.03em;
}
.post-feed-heading > span{
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.065em;
  text-transform:uppercase;
  white-space:nowrap;
}
.post-list{
  display:grid;
  gap:18px;
  list-style:none;
}
.post-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--rule-2);
  border-radius:10px;
  background:rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(27,26,22,.03);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
.post-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--leaf);
  opacity:.84;
}
.post-card-link{
  display:block;
  min-height:290px;
  padding:clamp(28px,5vw,48px) clamp(26px,5vw,50px) clamp(30px,5vw,44px);
  color:var(--ink);
  text-decoration:none;
}
.post-card-link:focus-visible{
  outline-offset:-6px;
}
.post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 0;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.4;
  text-transform:uppercase;
}
.post-meta > *{
  display:inline-flex;
  align-items:center;
}
.post-meta > * + *::before{
  content:"";
  width:3px;
  height:3px;
  margin-inline:11px;
  border-radius:50%;
  background:var(--control-rule);
}
.post-card h3{
  max-width:21ch;
  margin-top:25px;
  font-size:clamp(1.75rem,4vw,2.65rem);
  letter-spacing:-.035em;
  line-height:1.08;
}
.post-card h3 span{ color:var(--leaf-ink) }
.post-card p{
  max-width:66ch;
  margin-top:20px;
  color:var(--ink-2);
  font-size:clamp(1rem,1.7vw,1.12rem);
  line-height:1.68;
  text-wrap:pretty;
}
.post-read{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  color:var(--leaf-ink);
  font-family:var(--mono);
  font-size:12px;
  font-weight:750;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.post-read span{
  font-family:var(--sans);
  font-size:18px;
  font-weight:500;
  transition:transform .18s ease;
}
@media (hover:hover){
  .post-card:hover{
    transform:translateY(-2px);
    border-color:var(--control-rule);
    box-shadow:0 10px 28px rgba(27,26,22,.06);
  }
  .post-card:hover .post-read span{ transform:translateX(4px) }
}

.article-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  padding:clamp(58px,8vw,98px) 0 clamp(42px,6vw,68px);
}
.article-hero::after{
  content:"";
  position:absolute;
  right:max(-80px,calc((100vw - var(--shell))/2));
  bottom:-130px;
  width:310px;
  aspect-ratio:1;
  border:1px solid var(--rule);
  border-radius:50%;
  box-shadow:
    0 0 0 34px var(--paper),
    0 0 0 35px var(--rule);
  pointer-events:none;
}
.article-hero-inner{
  position:relative;
  z-index:1;
  max-width:980px;
}
.article-hero .eyebrow{ margin-bottom:24px }
.article-hero h1{
  max-width:12ch;
  font-size:clamp(3rem,7.6vw,5.8rem);
  line-height:.94;
}
.article-hero h1 span{
  display:block;
  color:var(--leaf-ink);
}
.article-dek{
  max-width:54ch;
  margin-top:28px;
  color:var(--ink-2);
  font-size:clamp(1.08rem,1.8vw,1.24rem);
  line-height:1.62;
}
.article-author{
  margin-top:28px;
  border-left:3px solid var(--leaf);
  padding-left:15px;
  font-style:normal;
}
.author-byline{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px 9px;
  color:var(--ink);
  line-height:1.35;
}
.author-byline span{
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.author-byline strong{
  font-size:15px;
  font-weight:760;
}
.author-links{
  display:flex;
  flex-wrap:wrap;
  gap:5px 16px;
  margin-top:8px;
  list-style:none;
}
.author-links a{
  color:var(--ink-2);
  font-family:var(--mono);
  font-size:11.5px;
  text-decoration:none;
}
.author-links a:hover{
  color:var(--ink);
  text-decoration:underline;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  margin-top:22px;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.045em;
  line-height:1.4;
  text-transform:uppercase;
}
.article-meta > *{
  display:inline-flex;
  align-items:center;
}
.article-meta > * + *::before{
  content:"";
  width:3px;
  height:3px;
  margin-inline:11px;
  border-radius:50%;
  background:var(--control-rule);
}

.article-body{
  width:calc(100% - 36px);
  max-width:760px;
  margin-inline:auto;
  padding:clamp(50px,7vw,84px) 0 clamp(74px,9vw,112px);
  color:var(--ink-2);
  font-size:clamp(1.03rem,1.25vw,1.105rem);
  line-height:1.82;
}
.article-body p{ text-wrap:pretty }
.article-body > p + p,
.article-body section > p + p{
  margin-top:1.45em;
}
.article-body strong{
  color:var(--ink);
  font-weight:730;
}
.article-body em{ color:#49473f }
.article-body p code{
  border:1px solid var(--rule);
  border-radius:4px;
  background:var(--paper-2);
  color:var(--ink);
  padding:.12em .34em;
  font-family:var(--mono);
  font-size:.84em;
  white-space:normal;
}
.article-body section{
  margin-top:clamp(62px,9vw,94px);
}
.article-body h2{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.25em;
  margin-bottom:30px;
  padding-top:18px;
  border-top:3px solid var(--leaf);
  color:var(--ink);
  font-size:clamp(2rem,4.2vw,2.8rem);
}
.article-body h2 span{
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:.35em;
  font-weight:600;
  letter-spacing:.02em;
}

.article-body blockquote,
.article-body .aside-note,
.article-body .opening-note{
  margin:clamp(34px,5vw,48px) 0;
  border-left:3px solid var(--leaf);
  border-radius:0 8px 8px 0;
  background:#fff;
  padding:22px clamp(20px,4vw,30px);
  color:var(--ink);
}
.article-body blockquote p,
.article-body .aside-note p,
.article-body .opening-note p{
  margin:0;
  font-size:.97em;
  line-height:1.72;
}
.article-body .opening-note{
  margin-top:0;
  margin-bottom:clamp(42px,6vw,58px);
  border-left-color:var(--amber);
  background:var(--paper-2);
}
.article-body .opening-note p{
  font-size:1.02em;
  font-style:italic;
}
.article-body .pull-quote{
  margin-block:clamp(44px,7vw,66px);
  border:0;
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
  border-radius:0;
  background:transparent;
  padding:28px clamp(2px,3vw,24px);
}
.article-body .pull-quote p{
  color:var(--ink);
  font-size:clamp(1.35rem,3vw,1.85rem);
  font-weight:680;
  letter-spacing:-.02em;
  line-height:1.34;
  text-wrap:balance;
}

.code-sample{
  margin:32px 0;
  overflow-x:auto;
  border-radius:8px;
  background:var(--ink);
  color:var(--on-ink);
  padding:21px 24px;
  font-family:var(--mono);
  font-size:.92rem;
  line-height:1.6;
  tab-size:2;
}
.route{
  display:grid;
  gap:8px;
  margin:34px 0;
  border:1px solid var(--rule-2);
  border-top:3px solid var(--amber);
  border-radius:8px;
  background:#fff;
  padding:20px 22px 22px;
}
.route span{
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.route code{
  overflow-wrap:anywhere;
  color:var(--leaf-ink);
  font-family:var(--mono);
  font-size:clamp(1.18rem,3.2vw,1.65rem);
  font-weight:700;
  line-height:1.35;
}

.celebration{
  width:min(800px,calc(100vw - 36px));
  margin:34px 50% 42px;
  transform:translateX(-50%);
}
.celebration img{
  width:100%;
  height:auto;
  border:1px solid var(--rule-2);
  border-radius:9px;
  background:var(--paper-2);
}
.celebration figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.025em;
}
.celebration button{
  flex:0 0 auto;
  min-height:32px;
  border:1px solid var(--control-rule);
  border-radius:6px;
  background:transparent;
  color:var(--ink);
  padding:7px 10px;
  font:600 10.5px/1 var(--mono);
  letter-spacing:.025em;
  cursor:pointer;
}
.celebration button:hover{ background:var(--paper-2) }
.celebration button:focus-visible{
  outline:3px solid var(--leaf-ink);
  outline-offset:3px;
}

.reasons{
  margin:30px 0 36px;
  list-style:none;
  counter-reset:reason;
}
.reasons li{
  position:relative;
  counter-increment:reason;
  border-top:1px solid var(--rule);
  padding:22px 0 22px 50px;
}
.reasons li:last-child{ border-bottom:1px solid var(--rule) }
.reasons li::before{
  content:counter(reason,decimal-leading-zero);
  position:absolute;
  top:23px;
  left:0;
  color:var(--leaf-ink);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}
.signoff{
  color:var(--leaf-ink);
  font-family:var(--mono);
  font-weight:700;
}

@media (max-width:640px){
  .blog-index-hero{
    padding-top:58px;
    padding-bottom:52px;
  }
  .blog-index-hero::after{
    right:-265px;
    width:390px;
  }
  .blog-index-hero h1{ font-size:clamp(3.7rem,22vw,5.5rem) }
  .blog-index-intro{
    max-width:30ch;
    margin-top:26px;
  }
  .post-feed-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
    margin-bottom:17px;
  }
  .post-card-link{
    min-height:0;
    padding:27px 23px 29px;
  }
  .post-card h3{
    margin-top:20px;
    font-size:clamp(1.65rem,8.5vw,2.1rem);
  }
  .post-card p{ margin-top:17px }
  .post-read{ margin-top:23px }
  .article-hero::after{
    right:-150px;
    bottom:-180px;
  }
  .article-hero h1{ font-size:clamp(2.75rem,15vw,4rem) }
  .article-dek{ max-width:29ch }
  .article-meta{ margin-top:24px }
  .article-body{
    width:calc(100% - 36px);
    line-height:1.76;
  }
  .article-body h2{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .article-body h2 span{ font-size:.38em }
}