.p-blog {
  --bl-rule: var(--line);
  --bl-rule-2: var(--line-2);
  --bl-margin: 92px;
}

.p-blog .bl-mast {
  padding: 64px 0 34px;
  background: var(--cream);
  border-bottom: 1.5px solid var(--bl-rule-2);
}
.p-blog .bl-crumbs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--ink-3);
}
.p-blog .bl-crumbs a { color: var(--ink-2); text-decoration: none; }
.p-blog .bl-crumbs a:hover { color: var(--accent); text-decoration: underline; }

.p-blog .bl-mast__h {
  margin: 10px 0 0;
  max-width: 20ch;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--ink);
}
.p-blog .bl-mast__p {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
}

.p-blog .bl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.p-blog .bl-cats__c {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--bl-rule-2);
  border-radius: var(--pill);
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}
.p-blog .bl-cats__c span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.p-blog .bl-cats__c:hover { border-color: var(--accent); color: var(--accent); }
.p-blog .bl-cats__c.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inv);
}
.p-blog .bl-cats__c.is-on span { color: rgba(255, 255, 255, .6); }

.p-blog .bl-brief { padding: 42px 0 6px; }
.p-blog .bl-brief__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 34px 56px;
  align-items: start;
}
.p-blog .bl-brief__h {
  margin: 0 0 16px;
  max-width: 26ch;
  font-size: clamp(23px, 2.7vw, 30px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.028em;
  color: var(--ink);
}
.p-blog .bl-brief__say p {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-2);
}
.p-blog .bl-brief__say p:last-child { margin-bottom: 0; }
.p-blog .bl-brief__say a { color: var(--accent); text-underline-offset: 3px; }

.p-blog .bl-brief__pick { padding-top: 4px; }
.p-blog .bl-brief__k {
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.p-blog .bl-picks { margin: 0; padding: 0; list-style: none; }
.p-blog .bl-pick {
  display: block;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--bl-rule);
}
.p-blog .bl-pick__t {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--ink);
  text-decoration: none;
}
.p-blog .bl-pick__t:hover { color: var(--accent); }
.p-blog .bl-pick__p {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.p-blog .bl-pick__m {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.p-blog .bl-lead { padding: 44px 0 8px; }
.p-blog .bl-lead__a {
  display: block;
  padding: 34px 36px 32px;
  background: var(--white);
  border: 1px solid var(--bl-rule);
  border-top: 3px solid var(--ink);
  border-radius: 0 0 var(--r) var(--r);
  text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease);
}
.p-blog .bl-lead__a:hover { border-color: var(--bl-rule-2); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.p-blog .bl-lead__a:hover .bl-lead__go { background: var(--accent-dark); }

.p-blog .bl-lead__k {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.p-blog .bl-lead__h {
  margin: 12px 0 0;
  max-width: 24ch;
  font-size: clamp(27px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
}
.p-blog .bl-lead__p {
  margin: 14px 0 0;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.p-blog .bl-lead__m {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--ink-3);
}
.p-blog .bl-lead__go {
  display: inline-block;
  margin-top: 22px;
  padding: 11px 22px;
  border-radius: var(--pill);
  background: var(--accent);
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  transition: background-color .16s var(--ease);
}

.p-blog .bl-guide { padding: 46px 0 4px; }
.p-blog .bl-guide__h {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.p-blog .bl-guide__lead {
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.p-blog .bl-guide__list { margin: 14px 0 0; padding: 0; list-style: none; }

.p-blog .bl-guide__i {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 4px 28px;
  padding: 19px 0 17px;
  border-bottom: 1px solid var(--bl-rule);
}
.p-blog .bl-guide__t {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.02em;
}
.p-blog .bl-guide__t a { color: var(--ink); text-decoration: none; transition: color .16s var(--ease); }
.p-blog .bl-guide__t a:hover { color: var(--accent); }
.p-blog .bl-guide__b { min-width: 0; }
.p-blog .bl-guide__p {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--ink-2);
}
.p-blog .bl-guide__n {
  margin: 7px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.p-blog .bl-body { padding: 40px 0 90px; }
.p-blog .bl-empty { font-size: 17px; color: var(--ink-2); }

.p-blog .bl-year { margin-top: 34px; }
.p-blog .bl-year__h {
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

.p-blog .bl-list { margin: 0; padding: 0; list-style: none; }
.p-blog .bl-row {
  display: grid;
  grid-template-columns: var(--bl-margin) minmax(0, 1fr);
  gap: 0 28px;
  padding: 26px 0 24px;
  border-bottom: 1px solid var(--bl-rule);
}
.p-blog .bl-row__d {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0;
}
.p-blog .bl-row__b { min-width: 0; }
.p-blog .bl-row__k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.p-blog .bl-row__k a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
.p-blog .bl-row__k a:hover { text-decoration: underline; }

.p-blog .bl-row__h {
  margin: 7px 0 0;
  max-width: 34ch;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.022em;
}
.p-blog .bl-row__h a { color: var(--ink); text-decoration: none; transition: color .16s var(--ease); }
.p-blog .bl-row__h a:hover { color: var(--accent); }

.p-blog .bl-row__p {
  margin: 8px 0 0;
  max-width: 70ch;
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--ink-2);
}
.p-blog .bl-row__m { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.p-blog .bl-row__soon {
  padding: 2px 8px;
  border: 1px solid var(--bl-rule-2);
  border-radius: var(--pill);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10.5px;
}

.p-blog .bl-qa { margin-top: 58px; padding-top: 34px; border-top: 1.5px solid var(--ink); }

.p-blog .bl-qa,
.p-blog .bl-q { scroll-margin-top: calc(var(--header-h) + 20px); }
.p-blog .bl-qa__grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 28px 56px;
  align-items: start;
}

.p-blog .bl-qa__head,
.p-blog .bl-qa__list,
.p-blog .bl-brief__say,
.p-blog .bl-brief__pick { min-width: 0; }

.p-blog .bl-qa__h {
  margin: 10px 0 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.028em;
  color: var(--ink);
}
.p-blog .bl-qa__note {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.p-blog .bl-qa__link { margin: 12px 0 0; font-size: 15px; }
.p-blog .bl-qa__link a { color: var(--accent); font-weight: 600; }

.p-blog .bl-qa__list { border-top: 1px solid var(--bl-rule); }
.p-blog .bl-q { border-bottom: 1px solid var(--bl-rule); }
.p-blog .bl-q > summary {
  position: relative;
  padding: 17px 36px 17px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.42;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .16s var(--ease);
}
.p-blog .bl-q > summary::-webkit-details-marker { display: none; }
.p-blog .bl-q > summary:hover { color: var(--accent); }
.p-blog .bl-q > summary:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
.p-blog .bl-q > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-3);
  transition: color .16s var(--ease);
}
.p-blog .bl-q > summary:hover::after { color: var(--accent); }
.p-blog .bl-q[open] > summary::after { content: "\2212"; }
.p-blog .bl-q[open] > summary { color: var(--accent); }
.p-blog .bl-q__a { padding: 0 34px 20px 0; }
.p-blog .bl-q__a p {
  margin: 0 0 12px;
  max-width: 70ch;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--ink-2);
}
.p-blog .bl-q__a p:last-child { margin-bottom: 0; }
.p-blog .bl-q__a a { color: var(--accent); text-underline-offset: 3px; }

.p-blog .bl-end {
  margin-top: 56px;
  padding: 40px 40px 36px;
  background: var(--ink);
  border-radius: var(--r-lg);
  color: var(--ink-inv);
}
.p-blog .bl-end__say { max-width: 72ch; }
.p-blog .bl-end__h {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.028em;
}
.p-blog .bl-end__p {
  margin: 14px 0 0;
  max-width: 66ch;
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-inv-2);
}
.p-blog .bl-end__p a,
.p-blog .bl-end__feed a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .4);
  transition: text-decoration-color .16s var(--ease);
}
.p-blog .bl-end__p a:hover,
.p-blog .bl-end__feed a:hover { text-decoration-color: #fff; }
.p-blog .bl-end__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.p-blog .bl-end .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .5); }
.p-blog .bl-end .btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.p-blog .bl-end__feed {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  color: var(--ink-inv-2);
}

@media (max-width: 900px) {
  .p-blog .bl-brief__grid,
  .p-blog .bl-qa__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .p-blog .bl-brief { padding-bottom: 0; }
}

@media (max-width: 720px) {
  .p-blog .bl-mast { padding: 44px 0 26px; }
  .p-blog .bl-brief { padding-top: 30px; }
  .p-blog .bl-guide { padding-top: 34px; }
  .p-blog .bl-qa { margin-top: 40px; }
  .p-blog .bl-q__a { padding-right: 0; }
  .p-blog .bl-lead__a { padding: 26px 22px 24px; }

  .p-blog .bl-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .p-blog .bl-row__d { padding: 0 0 8px; }
  .p-blog .bl-guide__i { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .p-blog .bl-end { padding: 30px 22px 28px; }
}

@media (max-width: 720px) {

  .p-blog .bl-cats { gap: 10px; }

  .p-blog .bl-crumbs { gap: 4px; margin-bottom: 10px; }
  .p-blog .bl-crumbs a,
  .p-blog .bl-crumbs [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .p-blog .bl-cats__c {
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }

  .p-blog .bl-row__k a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .p-blog .bl-row__h { margin-top: 0; }
  .p-blog .bl-row__h a,
  .p-blog .bl-guide__t a,
  .p-blog .bl-pick__t {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .p-blog .bl-brief__k,
  .p-blog .bl-lead__k { font-size: 12px; }
  .p-blog .bl-pick__p,
  .p-blog .bl-lead__go { font-size: 14px; }
  .p-blog .bl-lead__m { font-size: 13px; }
  .p-blog .bl-guide__p,
  .p-blog .bl-row__p,
  .p-blog .bl-q__a p { font-size: 16px; }
  .p-blog .bl-row__soon { font-size: 11px; }
}