/* Blog pages (the list and each post), design A1 "Magazine cards".
   Loaded after styles.css, so it reuses the site's colors, fonts, menu and buttons.
   Every rule starts with .blog so nothing here can change the home page. */

/* menu: the pill sits under "Blog" (5th tab, 96px each) */
.blog .tabs.on-blog .tab-ind{transform:translateX(384px)}
.blog .mhead{display:none}
@media (max-width:860px){
  .blog .mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1240px;margin:0 auto;padding:18px clamp(20px,4vw,40px) 0}
}
.blog .mhead-name{font-size:22px;color:var(--ink)}
.blog .mhead-link{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:15px;font-weight:500}

/* shared bits */
.blog .tag{display:inline-flex;align-self:flex-start;padding:4px 11px;border-radius:99px;background:var(--soft);color:var(--deep);font-size:13px;font-weight:600}
.blog .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:14px;color:var(--muted)}
.blog .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.blog .chip{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:inherit;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .3s,background .3s,color .3s}
.blog .chip:hover{border-color:var(--ink)}
.blog .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.blog .chip:focus-visible,.blog .feat:focus-visible,.blog .bl-card:focus-visible{outline:3px solid var(--accent,#2C4FA9);outline-offset:3px}

/* covers: a photo with the key number on a white label, or a colored panel when a post has no photo */
.blog .cover-img{position:relative;overflow:hidden;background:var(--line)}
.blog .cover-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.blog .feat:hover .cover-img img,.blog .bl-card:hover .cover-img img{transform:scale(1.05)}
.blog .cover-plain{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:22px 24px;color:#fff}
.blog .cv-num{font-size:56px;line-height:.95}
.blog .cv-lab{font-size:14px;font-weight:600;opacity:.92}
.blog .wt-teal{background:#0A6B6B}.blog .wt-blue{background:#2C4FA9}.blog .wt-berry{background:#880039}.blog .wt-ink{background:#111317}
.blog .bl-badge{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:baseline;gap:7px;padding:6px 13px 7px;border-radius:99px;background:rgba(255,255,255,.94);color:var(--ink);font-size:13px;font-weight:600;box-shadow:0 6px 16px rgba(17,19,23,.14)}
.blog .bl-badge b{font-family:"Cabinet Grotesk","Helvetica Neue",ui-sans-serif,sans-serif;font-weight:500;letter-spacing:-.02em;font-size:20px;line-height:1;color:var(--hi-text)}

/* list page */
.blog .bl-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:72px;padding-bottom:40px}
.blog .bl-title{margin:0;font-size:clamp(44px,5.4vw,76px);line-height:1;max-width:14ch;text-wrap:balance}
.blog .bl-sub{margin:0;font-size:18px;color:var(--muted);max-width:52ch}
.blog .bl-list{padding-bottom:96px}
.blog .bl-empty{margin:0 auto;max-width:40ch;padding:40px 24px;text-align:center;font-size:18px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:24px}
.blog .feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:32px;box-shadow:0 1px 2px rgba(17,19,23,.04),0 22px 44px rgba(17,19,23,.06);color:var(--ink);transition:transform .45s var(--spring),box-shadow .35s}
.blog .feat:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 26px 52px rgba(17,19,23,.1)}
.blog .feat-body{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:20px 0 20px 18px}
.blog .feat-row{display:flex;align-items:center;gap:10px}
.blog .latest{font-size:13px;font-weight:600;color:var(--muted)}
.blog .feat-title{margin:0;font-size:clamp(30px,3.2vw,44px);line-height:1.05;text-wrap:balance}
.blog .feat-ex{margin:0;font-size:17px;color:var(--muted);max-width:46ch}
.blog .read{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:16px;font-weight:600;color:var(--accent,#2C4FA9)}
.blog .read .ic{transition:transform .45s var(--spring)}
.blog .feat:hover .read .ic{transform:translateX(4px)}
.blog .feat .cover-img{min-height:340px;border-radius:24px}
.blog .feat .cover-plain .cv-num{font-size:120px}
.blog .feat .bl-badge{left:18px;bottom:18px;padding:8px 16px 9px;font-size:14px}
.blog .feat .bl-badge b{font-size:28px}
.blog .bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.blog .bl-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;color:var(--ink);transition:transform .45s var(--spring),box-shadow .35s,border-color .3s}
.blog .bl-card:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 18px 36px rgba(17,19,23,.09);border-color:color-mix(in oklch,var(--hi,#0E8C8C) 40%,var(--line))}
.blog .bl-card .cover-img{height:200px;margin:10px 10px 0;border-radius:18px}
.blog .card-body{display:flex;flex-direction:column;gap:10px;padding:18px 22px 22px;flex:1}
.blog .card-title{margin:0;font-size:24px;line-height:1.12}
.blog .card-ex{margin:0;font-size:15px;color:var(--muted);flex:1}
.blog [hidden]{display:none !important}

/* post page */
.blog .ps-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding-top:64px;padding-bottom:36px}
.blog .crumb{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.blog .crumb a{color:var(--accent,#2C4FA9)}
.blog .ps-title{margin:0;font-size:clamp(38px,4.6vw,64px);line-height:1.04;max-width:20ch;text-wrap:balance}
.blog .ps-lead{margin:0;font-size:20px;color:var(--muted);max-width:44ch;text-wrap:pretty}
.blog .byline{display:flex;align-items:center;gap:12px;text-align:left;margin-top:6px}
.blog .byline img{width:44px;height:44px;border-radius:50%}
.blog .byline strong{display:block;font-size:15px}
.blog .hero-img{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:1200 / 630;border-radius:32px;overflow:hidden;background:var(--line)}
.blog .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.blog .hero-img .bl-badge{left:24px;bottom:24px;padding:10px 18px 11px;font-size:15px}
.blog .hero-img .bl-badge b{font-size:36px}
.blog .art-wrap{max-width:760px;margin:0 auto;padding:56px clamp(20px,4vw,40px) 0}
.blog .art{font-size:19px;line-height:1.7;color:#2A2E35;overflow-wrap:break-word}
.blog .art > :first-child{margin-top:0}
.blog .art p,.blog .art ul,.blog .art ol,.blog .art blockquote,.blog .art pre,.blog .art .table-wrap,.blog .art img{margin:0 0 24px}
.blog .art h2{margin:48px 0 14px;font-size:32px;line-height:1.12;color:var(--ink);scroll-margin-top:104px}
.blog .art h3{margin:36px 0 10px;font-size:24px;line-height:1.2;color:var(--ink);scroll-margin-top:104px}
.blog .art ul,.blog .art ol{padding-left:24px}
.blog .art li{margin-bottom:8px}
.blog .art li::marker{color:var(--hi-text)}
.blog .art strong{color:var(--ink)}
.blog .art a{color:var(--accent,#2C4FA9);text-decoration:underline;text-underline-offset:3px}
.blog .art blockquote{padding:4px 0 4px 22px;border-left:3px solid var(--hi,#0E8C8C);font-size:21px;color:var(--ink)}
.blog .art blockquote p{margin:0}
.blog .art img{display:block;width:100%;height:auto;border-radius:20px}
.blog .art hr{margin:40px 0;border:0;border-top:1px solid var(--line)}
.blog .art code{padding:2px 6px;border-radius:6px;background:var(--card);border:1px solid var(--line);font-size:.88em}
.blog .art pre{padding:18px 20px;border-radius:16px;background:var(--ink);color:#fff;overflow-x:auto;font-size:15px;line-height:1.6}
.blog .art pre code{padding:0;border:0;background:none;color:inherit}
.blog .art .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.blog .art table{width:100%;border-collapse:collapse;font-size:16px}
.blog .art th,.blog .art td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.blog .art tr:last-child td{border-bottom:0}
.blog .author{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;margin-top:48px;padding:24px;border-radius:24px;background:var(--card);border:1px solid var(--line)}
.blog .author img{width:64px;height:64px;border-radius:50%}
.blog .author-txt{flex:1 1 260px;display:flex;flex-direction:column;gap:4px}
.blog .author-txt strong{font-size:17px}
.blog .author-txt span{font-size:15px;color:var(--muted)}
.blog .author-cta{display:flex;flex-wrap:wrap;gap:10px}
.blog .bl-more{margin-top:88px}
.blog .bl-more-title{margin:0;font-size:36px;line-height:1.05}
.blog .bl-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.blog main{padding-bottom:88px}

/* phones */
@media (max-width:760px){
  .blog .bl-head{padding-top:44px;padding-bottom:28px}
  .blog .chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * clamp(20px,4vw,40px));padding:0 clamp(20px,4vw,40px) 4px;scrollbar-width:none;align-self:stretch}
  .blog .chip{flex:none}
  .blog .feat{grid-template-columns:minmax(0,1fr);gap:0;padding:12px;border-radius:26px}
  .blog .feat .cover-img{order:-1;min-height:0;aspect-ratio:1200 / 630}
  .blog .feat .cover-plain .cv-num{font-size:72px}
  .blog .feat .bl-badge b{font-size:22px}
  .blog .feat-body{padding:20px 8px 10px}
  .blog .bl-grid,.blog .bl-grid-2{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
  .blog .bl-card{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:stretch;border-radius:20px}
  .blog .bl-card .cover-img{height:auto;min-height:96px;margin:10px 0 10px 10px;border-radius:14px}
  .blog .bl-card .bl-badge,.blog .bl-card .cv-lab{display:none}
  .blog .bl-card .cover-plain{padding:12px;justify-content:center;align-items:center}
  .blog .bl-card .cv-num{font-size:24px}
  .blog .card-body{padding:14px 16px 16px;gap:8px}
  .blog .card-title{font-size:19px}
  .blog .card-ex{display:none}
  .blog .ps-head{padding-top:40px;padding-bottom:28px;align-items:flex-start;text-align:left}
  .blog .ps-lead{font-size:18px}
  .blog .hero-img{border-radius:22px}
  .blog .hero-img .bl-badge{left:12px;bottom:12px;padding:6px 12px 7px;font-size:13px}
  .blog .hero-img .bl-badge b{font-size:22px}
  .blog .art-wrap{padding-top:36px}
  .blog .art{font-size:18px}
  .blog .art h2{font-size:27px}
  .blog .bl-more{margin-top:64px}
  .blog .bl-more-title{font-size:30px}
  .blog main{padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){
  .blog .cover-img img,.blog .feat,.blog .bl-card,.blog .read .ic{transition:none}
}