/* ============================================================
   Blog — listing pages and articles.
   Loaded on /blog/, category archives and single posts. Everything global
   (tokens, type, buttons, .band, .eyebrow, .lede, header/footer) comes from
   primestart.css. The blog is deliberately more editorial: a 720px reading
   column, hairline structure, photography doing the work.
   ============================================================ */

/* ---------- listing ---------- */
/* The category row used to sit inside the blog hero, under the lede, which
   is where its top margin and hairline come from. It has its own section
   directly beneath the standard hero now (9 September 2026), so that rule
   would be a second line drawn a few pixels under the hero's own bottom
   border. */
/* The chips need air under the hero (owner, 9 September 2026: "the buttons
   below the hero are too close"). Its own band: real space above, less below,
   so the row belongs to the list it filters rather than to the hero. */
.blog-catnav-sec{padding:46px 0 30px}
.blog-catnav-sec .post-cats{margin-top:0;padding-top:0;border-top:0}
.post-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
/* The chip itself is the one filter-chip pattern in primestart.css; only
   layout belongs here. */

.blog-featured{padding:36px 0 88px}
.blog-feature{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.blog-feature-media{display:block;border-radius:18px;overflow:hidden;background:var(--line-2);box-shadow:0 30px 60px -34px rgba(18,33,47,.5)}
.blog-feature-media img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.post-cat-row{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.post-cat-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-cat{display:inline-block;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-dk)}
.post-cat:hover{color:var(--orange)}
.blog-feature h2{font-size:clamp(28px,3vw,40px);margin:0 0 16px;max-width:16ch}
.blog-feature h2 a:hover{color:var(--orange-dk)}
.blog-feature-sum{font-size:17.5px;line-height:1.6;color:var(--ink-2);max-width:52ch;margin:0 0 18px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin:0}
.post-meta time{color:var(--ink-2)}
.blog-feature .post-meta{margin-bottom:26px}

.blog-list{padding:88px 0 112px}
.blog-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:40px}
.blog-list-head h2{font-size:clamp(24px,2.4vw,32px);margin:0}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.blog-grid-sm{gap:32px 28px}
.post-card{display:flex;flex-direction:column}
.post-card-media{display:block;border-radius:14px;overflow:hidden;background:var(--line-2);margin-bottom:18px}
.post-card-media img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .55s ease}
.post-card:hover .post-card-media img{transform:scale(1.03)}
.post-card-body .post-cat{margin-bottom:10px}
.post-card-title{font-size:21px;line-height:1.25;letter-spacing:-0.025em;margin:0 0 10px}
.post-card-title a:hover{color:var(--orange-dk)}
.post-card-sm .post-card-title{font-size:18.5px}
.post-card-excerpt{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0 0 14px}
.blog-pagination{margin-top:48px;display:flex;justify-content:center;gap:12px}
.blog-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.blog-pagination .page-numbers{font-family:var(--fh);font-weight:700;font-size:14.5px;padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:var(--white)}
.blog-pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- article header ---------- */
.post-head{padding:56px 0 36px}
.post-head-in{max-width:820px}
.post-crumbs{margin-bottom:28px;font-size:13.5px;color:var(--muted)}
.post-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.post-crumbs li+li::before{content:"\203A";margin-right:10px;color:#B8AE9F}
.post-crumbs a{color:var(--ink-2);border-bottom:1px solid transparent}
.post-crumbs a:hover{border-bottom-color:var(--orange)}
.post-crumbs li[aria-current]{color:var(--muted)}
.post-head h1{font-size:clamp(34px,4.2vw,54px);line-height:1.08;letter-spacing:-0.038em;margin:0 0 20px;max-width:20ch}
.post-standfirst{font-size:20px;line-height:1.6;color:var(--ink-2);max-width:58ch;margin:0 0 24px}
.post-meta-head{font-size:14.5px}
.post-by{font-family:var(--fh);font-weight:700;color:var(--ink)}
.post-hero{margin:0 0 56px}
.post-hero img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:18px;box-shadow:0 30px 60px -34px rgba(18,33,47,.45)}

/* ---------- article layout ---------- */
.post-layout{display:grid;grid-template-columns:minmax(0,720px);justify-content:center;gap:64px;padding-bottom:24px}
.post-layout.has-toc{grid-template-columns:220px minmax(0,720px)}
.post-toc{position:sticky;top:104px;align-self:start}
.post-toc-in summary{list-style:none;cursor:default;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.post-toc-in summary::-webkit-details-marker{display:none}
.post-toc-in ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.post-toc-in li{counter-increment:toc;padding:7px 0;font-size:14px;line-height:1.4}
.post-toc-in li::before{content:counter(toc,decimal-leading-zero);font-family:var(--fh);font-weight:800;font-size:11px;color:var(--orange-dk);letter-spacing:.06em;margin-right:10px}
.post-toc-in a{color:var(--ink-2);border-bottom:1px solid transparent}
.post-toc-in a:hover{color:var(--ink);border-bottom-color:var(--orange)}

/* ---------- prose ---------- */
.post-prose{font-size:18px;line-height:1.72;color:var(--ink-2)}
.post-prose > *{margin:0 0 24px}
.post-prose > *:last-child{margin-bottom:0}
.post-prose h2{font-size:clamp(26px,2.6vw,33px);line-height:1.15;letter-spacing:-0.032em;color:var(--ink);margin:52px 0 18px;scroll-margin-top:100px}
.post-prose h2:first-child{margin-top:0}
.post-prose h3{font-size:21px;line-height:1.3;letter-spacing:-0.025em;color:var(--ink);margin:36px 0 12px}
.post-prose p{margin:0 0 22px}
.post-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:#E6B58A;text-underline-offset:3px;text-decoration-thickness:1.5px}
.post-prose a:hover{text-decoration-color:var(--orange)}
.post-prose strong,.post-prose b{color:var(--ink);font-weight:600}
.post-prose ul,.post-prose ol{padding-left:22px;margin:0 0 24px}
.post-prose li{margin:0 0 10px;padding-left:4px}
.post-prose li::marker{color:var(--orange-dk);font-weight:700}
.post-prose ul li::marker{color:var(--orange)}
.post-prose blockquote{margin:32px 0;padding:6px 0 6px 24px;border-left:3px solid var(--orange);font-family:var(--fh);font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-0.025em;color:var(--ink)}
.post-prose blockquote p{margin:0}
.post-prose blockquote cite{display:block;font-family:var(--fb);font-size:14px;font-weight:400;color:var(--muted);margin-top:10px;font-style:normal}
.post-prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.post-prose table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;margin:0 0 28px}
.post-prose th,.post-prose td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
.post-prose th{font-family:var(--fh);font-weight:700;color:var(--ink);font-size:14px;letter-spacing:-0.01em;border-bottom:2px solid var(--ink)}
.post-prose .post-table{overflow-x:auto;margin:0 0 28px}
.post-prose .post-table table{margin:0;min-width:520px}
/* figures */
.post-fig{margin:36px 0}
.post-fig img{display:block;width:100%;height:auto;border-radius:14px;background:var(--line-2)}
.post-fig figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.post-fig-set{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.post-fig-set img{aspect-ratio:4/3;object-fit:cover;border-radius:10px}
/* callouts */
.post-note{margin:32px 0;padding:22px 26px 24px;border-radius:14px;background:var(--wash);border:1px solid #F2DFC6;border-left:4px solid var(--amber)}
.post-note[data-kind=answer]{background:var(--white);border-color:var(--line);border-left-color:var(--orange)}
.post-note[data-kind=example]{background:var(--white);border-color:var(--line);border-left-color:var(--ink)}
.post-note[data-kind=primestart]{background:var(--ink);border-color:var(--ink);border-left-color:var(--orange);color:var(--on-dark-2)}
.post-note[data-kind=primestart] .post-note-k{color:var(--amber)}
.post-note[data-kind=primestart] a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.post-note[data-kind=primestart] strong{color:#fff}
.post-note-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk);margin:0 0 8px}
.post-note p{font-size:16.5px;line-height:1.6;margin:0 0 10px}
.post-note p:last-child{margin-bottom:0}
.post-note ul{margin:8px 0 0;padding-left:20px}
.post-note li{font-size:16px;margin-bottom:6px}
/* key-facts list */
.post-facts{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
.post-facts li{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.post-facts li b{font-family:var(--fh);font-weight:700;color:var(--ink)}

/* ---------- article end ---------- */
.post-end{padding:48px 0 96px;display:grid;justify-content:center}
.post-cta{max-width:720px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:36px 40px 38px;box-shadow:0 1px 2px rgba(18,33,47,.04),0 24px 50px -36px rgba(18,33,47,.4)}
.post-cta-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk);margin:0 0 12px}
.post-cta h2{font-size:clamp(22px,2.3vw,28px);line-height:1.2;letter-spacing:-0.03em;margin:0 0 12px}
.post-cta p{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.post-cta-btns{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0!important}

.post-related{padding:80px 0 96px}
.post-related .blog-list-head{margin-bottom:32px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .post-layout,.post-layout.has-toc{gap:28px}
  .post-layout.has-toc{grid-template-columns:minmax(0,720px)}
  .post-toc{position:static;max-width:720px;width:100%;justify-self:center;margin-bottom:8px}
  .post-toc-in{border:1px solid var(--line);border-radius:12px;background:var(--white);padding:14px 18px}
  .post-toc-in summary{cursor:pointer;padding-bottom:0;border-bottom:0;margin-bottom:0;display:flex;align-items:center;justify-content:space-between}
  .post-toc-in summary::after{content:"+";font-size:18px;font-weight:400;letter-spacing:0;color:var(--muted)}
  .post-toc-in[open] summary{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:10px}
  .post-toc-in[open] summary::after{content:"\2013"}
}
@media (max-width:1040px){
  .blog-feature{grid-template-columns:1fr;gap:28px}
  .blog-feature h2{max-width:none}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-list{padding:64px 0 88px}
}
@media (max-width:720px){
  .blog-grid,.blog-grid-sm{grid-template-columns:1fr;gap:32px}
  .post-head{padding:36px 0 24px}
  .post-crumbs{margin-bottom:22px}
  .post-crumbs li[aria-current]{flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .post-head h1{font-size:clamp(30px,8vw,38px)}
  .post-standfirst{font-size:18px}
  .post-hero{margin-bottom:36px}
  .post-hero img{aspect-ratio:16/10;border-radius:12px}
  .post-prose{font-size:17px;line-height:1.7}
  .post-prose h2{margin-top:40px}
  .post-fig-set{grid-template-columns:1fr 1fr}
  /* Tables stack into labelled rows on phones; cells carry data-label. */
  .post-prose .post-table{overflow:visible}
  .post-prose .post-table table{min-width:0}
  .post-prose .post-table thead{display:none}
  .post-prose .post-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .post-prose .post-table tr:first-child{border-top:2px solid var(--ink)}
  .post-prose .post-table td{display:block;padding:0;border:0}
  .post-prose .post-table td:first-child{font-family:var(--fh);font-weight:700;color:var(--ink);font-size:16px;margin-bottom:4px}
  .post-prose .post-table td+td{margin-top:3px;font-size:15px}
  .post-prose .post-table td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--muted)}
  .post-note{padding:18px 18px 20px}
  .post-facts li{grid-template-columns:1fr;gap:4px}
  .post-cta{padding:26px 22px 28px}
  .post-end{padding:32px 0 72px}
  .post-related{padding:64px 0 80px}
  .blog-list-head{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:430px){
  .post-meta-head{gap:4px 14px}
  .post-meta-head span[aria-hidden]{display:none}
  .post-cats{gap:6px}
  .post-cats a{font-size:13.5px;padding:8px 13px}
  .post-cta-btns .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .post-card-media img{transition:none}
  .post-card:hover .post-card-media img{transform:none}
}


/* ============================================================
   PHONE, SECOND PASS (5 September 2026)

   The blog index measured 22 post meta lines at 14px and ten category
   chips at 12.5px sitting in a 20px tap target, which is the smallest
   target on the public site. The chips keep their quiet styling and
   simply gain a real box; the meta line gains the half pixel that puts
   it over the system's reading floor.
   ============================================================ */
@media (max-width:640px){
  .post-meta span,.post-meta{font-size:14.5px;line-height:1.5}
  .post-card-body .post-cat,.post-cat-row .post-cat{font-size:13px;display:inline-flex;align-items:center;min-height:44px}
  .post-cats a{font-size:14.5px;display:inline-flex;align-items:center;min-height:44px}
  .post-cat-row .post-cat-k{font-size:13px}
}
/* ---------- start here (9 September 2026) ----------
   Three curated guides beneath the featured article, so a first-time
   reader has somewhere to begin: what a website costs, how it brings in
   work, how Google decides. Hairline structure, numerals, no cards. */
.blog-start{margin-top:64px;padding-top:34px;border-top:1px solid var(--line)}
.blog-start-head{display:grid;grid-template-columns:auto 1fr;gap:8px 40px;align-items:baseline;margin-bottom:26px}
.blog-start-head .eyebrow{margin:0}
.blog-start-head h2{font-size:clamp(22px,2.2vw,28px);margin:0;max-width:28ch}
.blog-start-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.blog-start-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;border-top:2px solid var(--line);padding-top:18px}
.blog-start-n{font-family:var(--fh);font-size:13px;font-weight:800;color:var(--orange-dk);letter-spacing:.04em;padding-top:4px;font-variant-numeric:tabular-nums}
.blog-start-list h3{font-size:19px;line-height:1.25;letter-spacing:-0.025em;margin:6px 0 8px}
.blog-start-list h3 a:hover{color:var(--orange-dk)}
@media (max-width:820px){
  .blog-start-list{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .blog-start{margin-top:40px;padding-top:26px}
  .blog-start-head{grid-template-columns:1fr;gap:6px;margin-bottom:18px}
  .blog-start-list h3{font-size:17.5px}
}