/* Blog on the v2 design, 6 Oct 2026 (Mohamed: "bring the blog into the new design too"): the index (/blog, its category
   views and /news) and every article that renders through pages.blog.show. Loaded after site-v2.css and
   site-v2-pages.css by pages/blog/index-v2-body and pages/blog/show-v2-body only; every rule is scoped under the page
   wrapper .sv2-pg-blog. Same visual language as the homepage and the live v2 pages: the blended photo hero on the
   index, a navy article hero with the cover as its one card, hairline lists, the homepage kicker, drawn arrows and the
   photo call to action. The covers are the blog's own editorial illustrations and are shown as they are. */

/* homepage kicker: a 12px uppercase label after a short orange line */
.sv2-pg-blog .sv2-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 18px;font:600 12px/1.5 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.sv2-pg-blog .sv2-kicker::before{content:"";flex:0 0 auto;width:28px;height:2px;background:var(--accent)}
.sv2-pg-blog :is(.sv2-hero,.sv2-navy) .sv2-kicker{color:var(--on-dark)}
/* screen-reader text (the old sr-only labels of the share icons) */
.sv2-pg-blog .sv2-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sv2-pg-blog .sv2-btn:focus-visible{border-radius:12px}

/* ===== index ===== */
/* a short photo hero, so the newest post starts inside the first screen */
.sv2-pg-blog .sv2-blog-hero{min-height:0}
.sv2-pg-blog .sv2-blog-hero .sv2-hero-inner{padding-block:78px 82px}
/* the newspapers behind the heading are print at an angle: a stronger shade on that side keeps the heading calm (laptops) */
@media(min-width:601px){.sv2-pg-blog .sv2-blog-hero .sv2-hero-media::after{background:linear-gradient(90deg,rgba(4,16,33,.86),rgba(4,16,33,.66) 44%,rgba(4,16,33,.1)),linear-gradient(0deg,rgba(4,16,33,.45),transparent 42%)}
}
.sv2-pg-blog .sv2-blog-hero h1{margin-top:0;max-width:13em}
.sv2-pg-blog .sv2-blog-hero .sv2-hero-lead{max-width:560px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)}
.sv2-pg-blog .sv2-blog-list{padding-block:28px 112px}
/* categories: a quiet row of text tabs on a hairline, the current one marked by the orange line */
.sv2-pg-blog .sv2-blog-cats{display:flex;flex-wrap:wrap;gap:0 34px;margin-bottom:60px;border-bottom:1px solid var(--line-strong)}
.sv2-pg-blog .sv2-blog-cats a{position:relative;display:inline-flex;align-items:center;min-height:56px;font:600 15px/1.3 Inter,sans-serif;color:var(--soft);transition:color .18s}
.sv2-pg-blog .sv2-blog-cats a:hover{color:var(--orange)}
.sv2-pg-blog .sv2-blog-cats a.is-current{color:var(--ink)}
.sv2-pg-blog .sv2-blog-cats a.is-current::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:3px;background:var(--accent)}
/* post cards: the cover, a small label line, the title, the summary, then the date beside the read link */
.sv2-pg-blog .sv2-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 40px}
.sv2-pg-blog .sv2-blog-card{display:flex;flex-direction:column;min-width:0}
.sv2-pg-blog .sv2-blog-cover{display:block;aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.sv2-pg-blog .sv2-blog-cover.is-empty{background:var(--navy)}
.sv2-pg-blog .sv2-blog-cover img{width:100%;height:100%;object-fit:cover;transition:scale .45s ease}
.sv2-pg-blog .sv2-blog-card:hover .sv2-blog-cover img{scale:1.03}
.sv2-pg-blog .sv2-blog-cover:focus-visible{border-radius:14px}
.sv2-pg-blog .sv2-blog-card-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding-top:22px}
.sv2-pg-blog .sv2-blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:600 12px/1.5 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.sv2-pg-blog .sv2-blog-cat{color:var(--orange)}
.sv2-pg-blog .sv2-blog-read{display:inline-flex;align-items:center;gap:12px}
.sv2-pg-blog .sv2-blog-read::before{content:"";flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:#b7b3a6}
.sv2-pg-blog .sv2-blog-card :is(h2,h3){margin-top:12px;font-size:22px;line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
.sv2-pg-blog .sv2-blog-card :is(h2,h3) a{transition:color .18s}
.sv2-pg-blog .sv2-blog-card :is(h2,h3) a:hover{color:var(--orange)}
.sv2-pg-blog .sv2-blog-excerpt{margin-top:12px;font-size:16px;line-height:1.65;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.sv2-pg-blog .sv2-blog-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px;font-size:14px;line-height:1.4;color:var(--soft)}
.sv2-pg-blog .sv2-blog-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 15px/1.3 Inter,sans-serif;color:var(--ink);transition:color .18s}
.sv2-pg-blog .sv2-blog-more .sv2-arrow{color:var(--orange)}
.sv2-pg-blog .sv2-blog-more:hover{color:var(--orange)}
.sv2-pg-blog .sv2-blog-pages{margin-top:64px}
.sv2-pg-blog .sv2-blog-empty{max-width:560px;padding-block:40px 24px}
.sv2-pg-blog .sv2-blog-empty h2{font-size:clamp(28px,2.6vw,40px)}
.sv2-pg-blog .sv2-blog-empty p{margin-top:16px;font-size:18px;line-height:1.7;color:var(--muted)}
/* the newest post leads: its photograph beside the words, a hairline under it */
@media(min-width:851px){
.sv2-pg-blog .sv2-blog-card.is-lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:0 64px;align-items:center;padding-bottom:64px;border-bottom:1px solid var(--line-strong)}
.sv2-pg-blog .sv2-blog-card.is-lead .sv2-blog-cover{aspect-ratio:3/2}
.sv2-pg-blog .sv2-blog-card.is-lead .sv2-blog-card-body{padding-top:0}
.sv2-pg-blog .sv2-blog-card.is-lead h2{margin-top:16px;font-size:clamp(28px,2.7vw,42px);line-height:1.14;letter-spacing:-.032em}
.sv2-pg-blog .sv2-blog-card.is-lead .sv2-blog-excerpt{margin-top:18px;font-size:18px;line-height:1.7;-webkit-line-clamp:4;line-clamp:4}
.sv2-pg-blog .sv2-blog-card.is-lead .sv2-blog-foot{justify-content:flex-start;gap:28px;margin-top:26px;padding-top:0}
}

/* ===== article ===== */
/* navy hero: the words on one side, the cover as the one card on the other */
.sv2-pg-blog .sv2-post-hero{min-height:0;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(120% 90% at 85% 10%,#1b2d47 0%,rgba(16,29,48,0) 60%),linear-gradient(135deg,#0b1626 0%,#101d30 55%,#0b1626 100%)}
.sv2-pg-blog .sv2-post-hero .sv2-hero-inner{padding-block:40px 68px}
.sv2-pg-blog .sv2-post-hero .sv2-hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:40px 72px;align-items:center}
.sv2-pg-blog .sv2-post-hero .sv2-hero-copy{min-width:0}
.sv2-pg-blog .sv2-post-back a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 14px/1.5 Inter,sans-serif;color:var(--on-dark-soft);transition:color .18s}
.sv2-pg-blog .sv2-post-back a:hover{color:#fff}
.sv2-pg-blog .sv2-post-back .sv2-arrow{width:16px;height:16px;scale:-1 1}
.sv2-pg-blog .sv2-post-back a:hover .sv2-arrow{translate:-3px 0}
.sv2-pg-blog .sv2-post-kicker{margin:20px 0 0}
.sv2-pg-blog .sv2-post-read{display:inline-flex;align-items:center;gap:12px}
.sv2-pg-blog .sv2-post-read::before{content:"";flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5)}
.sv2-pg-blog .sv2-post-hero h1{margin-top:16px;max-width:none;font-size:clamp(34px,3.15vw,50px);line-height:1.12;letter-spacing:-.036em}
.sv2-pg-blog .sv2-post-hero .sv2-hero-lead{max-width:660px;font-size:18px;line-height:1.6;color:#e3e8ee}
.sv2-pg-blog .sv2-post-byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.sv2-pg-blog .sv2-post-author{display:flex;align-items:center;gap:14px;min-width:0}
.sv2-pg-blog .sv2-post-initials{display:flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,145,78,.8);font:600 15px/1 Poppins,"Poppins Fallback",Inter,sans-serif;letter-spacing:.02em;color:#fff}
.sv2-pg-blog .sv2-post-author-name{font:600 15px/1.4 Inter,sans-serif;color:#fff}
.sv2-pg-blog .sv2-post-author time{display:block;font-size:14px;line-height:1.45;color:var(--on-dark)}
/* share icons beside the byline: shown from 640px up, as in the old design */
.sv2-pg-blog .sv2-post-share{display:none;align-items:center;gap:8px}
@media(min-width:640px){.sv2-pg-blog .sv2-post-share{display:flex}
}
.sv2-pg-blog .sv2-post-share :is(a,button){display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.38);color:#fff;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.sv2-pg-blog .sv2-post-share :is(a,button):hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #fff}
.sv2-pg-blog .sv2-post-share :is(a,button):focus-visible{outline-color:#ff914e;box-shadow:none;border-radius:12px}
.sv2-pg-blog .sv2-post-share svg{width:17px;height:17px}
.sv2-pg-blog :is(.sv2-post-share,.sv2-post-btn) .i-check{display:none}
.sv2-pg-blog .is-copied .i-copy{display:none}
.sv2-pg-blog .is-copied .i-check{display:block}
.sv2-pg-blog .sv2-post-cover{min-width:0;width:100%;max-width:540px;justify-self:end}
.sv2-pg-blog .sv2-post-cover img{width:100%;height:auto;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.42)}
/* the article: a reading column, the share box as a rail that stays in view on laptops */
.sv2-pg-blog .sv2-post-main{padding-block:84px 112px}
.sv2-pg-blog .sv2-post-wrap{display:grid;grid-template-columns:minmax(0,760px) minmax(0,340px);justify-content:space-between;gap:0 72px;align-items:start}
.sv2-pg-blog .sv2-post-wrap>*{grid-column:1;min-width:0}
.sv2-pg-blog .sv2-post-wrap>.sv2-post-sharebox{grid-column:2;grid-row:1/span 6;position:sticky;top:112px}
.sv2-pg-blog .sv2-post-body{overflow-wrap:anywhere;font-size:18px;line-height:1.8;color:var(--muted)}
.sv2-pg-blog .sv2-post-body>*+*{margin-top:24px}
.sv2-pg-blog .sv2-post-body>p:first-of-type{font-size:20px;line-height:1.7;color:var(--ink)}
.sv2-pg-blog .sv2-post-body h2{margin-top:64px;font-size:clamp(26px,2.25vw,34px);line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
.sv2-pg-blog .sv2-post-body h2::before{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:20px}
.sv2-pg-blog .sv2-post-body>h2:first-child{margin-top:0}
.sv2-pg-blog .sv2-post-body h3{margin-top:40px;font-size:22px;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.sv2-pg-blog .sv2-post-body :is(h2,h3)+*{margin-top:16px}
.sv2-pg-blog .sv2-post-body a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(199,66,13,.55);text-decoration-thickness:1px;text-underline-offset:4px}
.sv2-pg-blog .sv2-post-body a:hover{color:var(--orange);text-decoration-color:var(--orange)}
.sv2-pg-blog .sv2-post-body strong{font-weight:600;color:var(--ink)}
.sv2-pg-blog .sv2-post-body em{font-style:italic}
.sv2-pg-blog .sv2-post-body ul{border-top:1px solid var(--line-strong)}
.sv2-pg-blog .sv2-post-body ul li{position:relative;padding-block:14px;padding-inline-start:32px;border-bottom:1px solid var(--line-strong);font-size:17px;line-height:1.65}
.sv2-pg-blog .sv2-post-body ul li::before{content:"";position:absolute;inset-inline-start:0;top:27px;width:14px;height:2px;background:var(--accent)}
.sv2-pg-blog .sv2-post-body ol{counter-reset:postol;border-top:1px solid var(--line-strong)}
.sv2-pg-blog .sv2-post-body ol li{counter-increment:postol;position:relative;min-height:60px;padding-block:14px;padding-inline-start:48px;border-bottom:1px solid var(--line-strong);font-size:17px;line-height:1.65}
.sv2-pg-blog .sv2-post-body ol li::before{content:counter(postol);position:absolute;inset-inline-start:0;top:10px;font:600 26px/1.4 Poppins,"Poppins Fallback",Inter,sans-serif;letter-spacing:-.04em;color:var(--orange)}
.sv2-pg-blog .sv2-post-body blockquote{margin-inline:0;padding:26px 30px;border-radius:14px;background:var(--paper);border-inline-start:3px solid var(--accent);font-size:18px;line-height:1.7;color:var(--ink)}
.sv2-pg-blog .sv2-post-body img{height:auto;border-radius:14px}
.sv2-pg-blog .sv2-post-body table{width:100%;border-collapse:collapse;font-size:16px}
.sv2-pg-blog .sv2-post-body :is(th,td){padding:12px 14px;border-bottom:1px solid var(--line-strong);text-align:start;vertical-align:top}
.sv2-pg-blog .sv2-post-body th{font-weight:600;color:var(--ink)}
.sv2-pg-blog .sv2-post-tags{margin-top:56px;padding-top:28px;border-top:1px solid var(--line-strong)}
.sv2-pg-blog .sv2-post-tags h3{font:600 12px/1.5 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.sv2-pg-blog .sv2-post-taglist{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sv2-pg-blog .sv2-post-taglist span{padding:7px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;line-height:1.4;color:var(--ink)}
/* about the author: a navy panel with a short orange rule */
.sv2-pg-blog .sv2-post-authorbox{position:relative;display:flex;align-items:flex-start;gap:22px;margin-top:64px;padding:36px 36px 34px;border-radius:16px;background:var(--navy);color:#fff}
.sv2-pg-blog .sv2-post-authorbox::before{content:"";position:absolute;top:0;inset-inline-start:36px;width:48px;height:3px;background:var(--accent)}
.sv2-pg-blog .sv2-post-authorbox .sv2-post-initials{flex-basis:60px;width:60px;height:60px;font-size:19px}
.sv2-pg-blog .sv2-post-authorbox-name{font:600 20px/1.3 Poppins,"Poppins Fallback",Inter,sans-serif;letter-spacing:-.015em;color:#fff}
.sv2-pg-blog .sv2-post-authorbox-role{margin-top:4px;font-size:14px;line-height:1.5;color:var(--on-dark-soft)}
.sv2-pg-blog .sv2-post-authorbox-bio{margin-top:12px;font-size:16px;line-height:1.65;color:var(--on-dark)}
/* share box */
.sv2-pg-blog .sv2-post-sharebox{padding:30px 28px 26px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.sv2-pg-blog .sv2-post-sharebox .sv2-kicker{margin-bottom:12px}
.sv2-pg-blog .sv2-post-share-title{font:600 24px/1.22 Poppins,"Poppins Fallback",Inter,sans-serif;letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
.sv2-pg-blog .sv2-post-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.sv2-pg-blog .sv2-post-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-strong);font:600 15px/1.2 Inter,sans-serif;color:var(--ink);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.sv2-pg-blog .sv2-post-btn:hover{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1.5px var(--navy)}
.sv2-pg-blog .sv2-post-btn:focus-visible{border-radius:12px}
.sv2-pg-blog .sv2-post-btn svg{flex:0 0 auto;width:17px;height:17px}
.sv2-pg-blog .sv2-post-btn.is-copied .i-check{color:var(--orange)}
.sv2-pg-blog .sv2-post-btn.is-copied:hover .i-check{color:var(--warm)}
.sv2-pg-blog .sv2-post-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-strong);font-size:14px;line-height:1.6;color:var(--soft)}
.sv2-pg-blog .sv2-post-note a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(199,66,13,.55);text-decoration-thickness:1px;text-underline-offset:3px}
.sv2-pg-blog .sv2-post-note a:hover{color:var(--orange);text-decoration-color:var(--orange)}
/* continue reading: the same cards on paper */
.sv2-pg-blog .sv2-post-related .sv2-blog-cover{background:#fff}

/* laptops below 1100px */
@media(max-width:1100px){
.sv2-pg-blog .sv2-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}
.sv2-pg-blog .sv2-post-hero .sv2-hero-grid{grid-template-columns:minmax(0,1fr)}
.sv2-pg-blog .sv2-post-cover{justify-self:start;max-width:560px}
.sv2-pg-blog .sv2-post-wrap{grid-template-columns:minmax(0,760px);justify-content:start}
.sv2-pg-blog .sv2-post-wrap>.sv2-post-sharebox{grid-column:1;grid-row:auto;position:static;margin-top:28px}
.sv2-pg-blog .sv2-post-related .sv2-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
}
@media(max-width:850px){
.sv2-pg-blog .sv2-post-related .sv2-blog-grid{grid-template-columns:minmax(0,1fr);gap:44px}
}
/* phones */
@media(max-width:700px){
.sv2-pg-blog .sv2-blog-grid{grid-template-columns:minmax(0,1fr);gap:48px}
/* the category row becomes one strip that scrolls sideways inside its own box */
.sv2-pg-blog .sv2-blog-cats-wrap{margin-inline:calc(var(--page-pad) * -1);overflow-x:clip}
.sv2-pg-blog .sv2-blog-cats{flex-wrap:nowrap;overflow-x:auto;padding-inline:var(--page-pad);scrollbar-width:none}
.sv2-pg-blog .sv2-blog-cats::-webkit-scrollbar{display:none}
.sv2-pg-blog .sv2-blog-cats a{flex:0 0 auto;white-space:nowrap}
.sv2-pg-blog .sv2-blog-cats a.is-current::after{bottom:0}
}
@media(max-width:600px){
.sv2-pg-blog .sv2-blog-hero .sv2-hero-inner{padding-block:48px 52px}
.sv2-pg-blog .sv2-blog-list{padding-block:16px 76px}
.sv2-pg-blog .sv2-blog-cats{gap:0 24px;margin-bottom:40px}
.sv2-pg-blog .sv2-blog-cats a{min-height:48px;font-size:14px}
.sv2-pg-blog .sv2-blog-card :is(h2,h3){font-size:21px}
.sv2-pg-blog .sv2-blog-card-body{padding-top:18px}
.sv2-pg-blog .sv2-blog-pages{margin-top:48px}
.sv2-pg-blog .sv2-post-hero .sv2-hero-inner{padding-block:20px 44px}
.sv2-pg-blog .sv2-post-hero .sv2-hero-grid{gap:32px}
.sv2-pg-blog .sv2-post-kicker{margin-top:12px}
.sv2-pg-blog .sv2-post-hero h1{margin-top:14px;font-size:clamp(28px,7.7vw,34px);line-height:1.16}
.sv2-pg-blog .sv2-post-hero .sv2-hero-lead{font-size:16px;line-height:1.55}
.sv2-pg-blog .sv2-post-byline{margin-top:22px;padding-top:20px}
.sv2-pg-blog .sv2-post-cover img{border-radius:14px}
.sv2-pg-blog .sv2-post-main{padding-block:52px 76px}
.sv2-pg-blog .sv2-post-body{font-size:17px;line-height:1.75}
.sv2-pg-blog .sv2-post-body>p:first-of-type{font-size:18px;line-height:1.7}
.sv2-pg-blog .sv2-post-body h2{margin-top:48px;font-size:25px}
.sv2-pg-blog .sv2-post-body h2::before{width:30px;margin-bottom:16px}
.sv2-pg-blog .sv2-post-body h3{margin-top:32px;font-size:20px}
.sv2-pg-blog .sv2-post-body :is(ul,ol) li{font-size:16px}
.sv2-pg-blog .sv2-post-body blockquote{padding:22px 20px;font-size:17px}
.sv2-pg-blog .sv2-post-authorbox{flex-direction:column;gap:18px;margin-top:48px;padding:32px 22px 28px}
.sv2-pg-blog .sv2-post-authorbox::before{inset-inline-start:22px}
.sv2-pg-blog .sv2-post-sharebox{padding:26px 20px 22px}
.sv2-pg-blog .sv2-post-share-title{font-size:22px}
}