/* Blog styles — edit this file to restyle your blog.
   It controls the look of your /blog index AND every post page, and loads AFTER the built-in blog
   styles. The blog also inherits your site's header, footer, fonts and colors automatically.

   NOTE: the built-in styles set some text colors with !important. To recolor text, use the SAME
   selector shape shown below AND add !important — because this file loads last, an equal-specificity
   !important rule wins. (Plain properties like spacing/size override without !important.)

   Handy hooks:
     .arbor-blog                 a single post (the card surface)
     .arbor-blog .ab-title       post title        .arbor-blog .ab-meta      post date / byline
     .arbor-blog .ab-body        post body text    .arbor-blog .ab-body h2   section headings
     .ab-tldr                    the TL;DR box     .ab-toc                   the contents sidebar
     .ab-h1                      the "Blog" heading on the index
     .ab-grid                    the index grid    .ab-card                  an index card
     .ab-card h2                 card title        .ab-card .ab-desc  card blurb   .ab-card .ab-meta  card date

   ---------------------------------------------------------------------------------------------
   This site is dark, but the built-in blog styles default to WHITE cards (they suit light-themed
   sites). Everything below re-themes the blog to the black / chrome / red brand, and turns off the
   uppercase that the main site stylesheet applies to every h1 and h2 — fine for short section
   headings, unreadable on a full post title.
   --------------------------------------------------------------------------------------------- */

/* ---------- post surface ---------- */
.arbor-blog{
  background:#131211!important;
  color:#E4E0DB!important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:40px 40px 34px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.arbor-blog .ab-meta{color:#8A8580!important;font-size:12.5px;letter-spacing:.02em;margin:0 0 12px}
.arbor-blog .ab-title{
  color:#FFFFFF!important;
  text-transform:none!important;
  font-size:clamp(27px,3.4vw,37px)!important;
  line-height:1.16;
  letter-spacing:-.015em;
  margin:0 0 18px;
}
.arbor-blog .ab-body{color:#CFCAC4!important;line-height:1.78;font-size:17px}
.arbor-blog .ab-body h2{
  color:#FFFFFF!important;
  text-transform:none!important;
  font-size:23px!important;
  letter-spacing:-.01em;
  margin:40px 0 12px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
}
.arbor-blog .ab-body h3{
  color:#F0EDE9!important;text-transform:none!important;font-size:18px!important;margin:26px 0 6px;
}
.arbor-blog .ab-body p,
.arbor-blog .ab-body li,
.arbor-blog .ab-body strong,
.arbor-blog .ab-body em{color:#CFCAC4!important}
.arbor-blog .ab-body strong{color:#FFFFFF!important;font-weight:700}
.arbor-blog .ab-body a{color:#FF4A44!important;text-decoration:none;border-bottom:1px solid rgba(255,74,68,.4)}
.arbor-blog .ab-body a:hover{border-bottom-color:#FF4A44}

/* red ticks instead of bullets, matching the package lists on the main site */
.arbor-blog .ab-body ul,.arbor-blog .ab-body ol{margin:16px 0 18px;padding-left:4px;list-style:none}
.arbor-blog .ab-body li{position:relative;padding:6px 0 6px 24px}
.arbor-blog .ab-body ul li::before{
  content:"";position:absolute;left:2px;top:15px;width:9px;height:5px;
  border-left:2px solid #E10600;border-bottom:2px solid #E10600;transform:rotate(-45deg);
}
.arbor-blog .ab-body ol{counter-reset:s}
.arbor-blog .ab-body ol li{counter-increment:s}
.arbor-blog .ab-body ol li::before{
  content:counter(s);position:absolute;left:1px;top:6px;color:#E10600;font-weight:800;font-size:13px;
}
.arbor-blog .ab-body img{border-radius:12px;border:1px solid rgba(255,255,255,.12);margin:22px 0}

/* several posts carry a price table, so it has to read cleanly and scroll on a phone */
.arbor-blog .ab-body table{
  width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;display:block;overflow-x:auto;
}
.arbor-blog .ab-body th,.arbor-blog .ab-body td{
  padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.09);text-align:left;white-space:nowrap;
}
.arbor-blog .ab-body thead th{
  color:#8A8580!important;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;
}
.arbor-blog .ab-body tbody td{color:#CFCAC4!important}

/* ---------- TL;DR ---------- */
.ab-tldr{
  background:rgba(225,6,0,.07)!important;
  border:1px solid rgba(225,6,0,.28)!important;
  border-radius:12px;padding:15px 18px;margin:4px 0 34px;
}
.ab-tldr .ab-tldr-k{color:#FF6B66!important;letter-spacing:.1em}
.ab-tldr p{color:#E4E0DB!important;line-height:1.62;font-size:15.5px}

/* ---------- contents sidebar ---------- */
.ab-toc .ab-toc-in{position:sticky;top:84px}
.ab-toc .ab-toc-h{color:#8A8580;opacity:1}
.ab-toc a{color:#A9A49E;border-left:2px solid rgba(255,255,255,.10);opacity:1;padding:6px 0 6px 14px}
.ab-toc a:hover{color:#FFFFFF;border-left-color:rgba(255,255,255,.35)}
.ab-toc a.active{color:#FF4A44;border-left-color:#E10600}

.arbor-blog .ab-back{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.arbor-blog .ab-back a{color:#FF4A44!important}

/* ---------- the /blog listing ---------- */
.ab-topics-h{color:#8A8580;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;margin:26px 0 10px}
ul.ab-topics{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:7px;max-width:70ch}
ul.ab-topics li{position:relative;padding:0 0 0 22px;color:#A9A49E;font-size:14.5px;line-height:1.5}
ul.ab-topics li::before{content:"";position:absolute;left:1px;top:8px;width:8px;height:5px;
  border-left:2px solid #E10600;border-bottom:2px solid #E10600;transform:rotate(-45deg)}
.ab-h1{text-transform:none!important;font-size:clamp(30px,4vw,42px)!important;letter-spacing:-.02em;margin:0 0 10px}
.ab-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.ab-card{
  background:#161514!important;color:#CFCAC4!important;
  border:1px solid rgba(255,255,255,.09);border-radius:14px;
  box-shadow:none;display:flex!important;flex-direction:column;height:100%;
  transition:border-color .16s ease,transform .1s ease;
}
.ab-card:hover{border-color:rgba(225,6,0,.5);transform:translateY(-3px)}
.ab-card .ab-thumb{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:1px solid rgba(255,255,255,.09)}
/* text-only cards: a red rule at the top does the work a thumbnail would, and grows on hover */
.ab-card{position:relative;overflow:hidden}
.ab-card::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:38px;background:#E10600;
  transition:width .22s ease;
}
.ab-card:hover::before{width:100%}
.ab-card .ab-pad{padding:26px 22px 22px;display:flex;flex-direction:column;flex:1}
.ab-card .ab-pad::after{
  content:"Read the guide";margin-top:auto;padding-top:14px;color:#FF4A44;font-weight:700;font-size:13px;
}
.ab-card .ab-meta{color:#7E7975!important;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;margin:0 0 8px}
.ab-card h2{
  color:#FFFFFF!important;text-transform:none!important;font-size:17.5px!important;
  letter-spacing:-.005em;line-height:1.3;margin:0 0 8px;
}
.ab-card .ab-desc{color:#A9A49E!important;font-size:14px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:900px){
  .arbor-blog{padding:26px 20px 24px;border-radius:14px}
  .arbor-blog .ab-body{font-size:16.5px}
  .arbor-blog .ab-body h2{margin:30px 0 10px;padding-top:18px;font-size:21px!important}
  .ab-grid{grid-template-columns:1fr;gap:16px}
}