/* The blog list, new look (2026-10-17, preview with ?v=2): the language of the new footer and home page.
   Scoped to .blogs-page.blog-v2, so the services list (same .service .links-item classes) is untouched.
   The Elements category keeps its own blue rules (they win with !important). */
.blogs-page.blog-v2{--red:#BE2E24;--red-hi:#C8392D;--red-lo:#9A241C;--ink:#2D2D2D;--soft:#5E5853;--mute:#9A928B;--line:rgba(45,45,45,.12);--e:cubic-bezier(.25,.1,.25,1);--o:cubic-bezier(.19,1,.22,1)}

/* the heading: large and light, like the product pages */
.blogs-page.blog-v2 .service h1{font-weight:100;font-size:clamp(56px,9vw,150px);line-height:.9;letter-spacing:-.04em;text-transform:none}
.blogs-page.blog-v2 .blog-intro p{max-width:60ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--soft)}

/* authors: quiet portraits that come to colour with a red ring */
.blogs-page.blog-v2 .blog-author-avatar img{filter:grayscale(1);transition:filter .8s var(--e)}
.blogs-page.blog-v2 .blog-author-avatar{transition:box-shadow .8s var(--e)}
.blogs-page.blog-v2 .blog-author-item:hover .blog-author-avatar img{filter:none}
.blogs-page.blog-v2 .blog-author-item:hover .blog-author-avatar{box-shadow:0 0 0 2px var(--paper,#F9F6F0),0 0 0 3px var(--red)}

/* the sections: small capitals with a red line that grows under the active and the hovered one */
.blogs-page.blog-v2 .sort-link{position:relative;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:0!important;padding-bottom:6px}
.blogs-page.blog-v2 .sort-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--red-hi),var(--red-lo));transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--o)}
.blogs-page.blog-v2 .sort-link:hover::after,.blogs-page.blog-v2 .sort-link.active::after{transform:none}
.blogs-page.blog-v2 .sort-link[href*="/category/elements"]::after{background:linear-gradient(90deg,#3FA9E0,#1A4F9C)}

/* the latest article: compact, the picture in its own wide proportions (1802 x 873), never cropped */
.blogs-page.blog-v2 .bv2-lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center;max-width:1080px;margin:clamp(24px,3vw,40px) 0 clamp(28px,3.5vw,48px);color:var(--ink);text-decoration:none}
.blogs-page.blog-v2 .bv2-lead__img{position:relative;aspect-ratio:1802/873;overflow:hidden;background:#EDE7DE}
.blogs-page.blog-v2 .bv2-lead__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--o)}
/* a fine line drawn inside the picture on hover, like a passe-partout */
.blogs-page.blog-v2 .bv2-lead__img::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.75);opacity:0;transform:scale(1.03);transition:opacity .9s var(--e),transform 1.2s var(--o);pointer-events:none}
.blogs-page.blog-v2 .bv2-lead:hover .bv2-lead__img img{transform:scale(1.04)}
.blogs-page.blog-v2 .bv2-lead:hover .bv2-lead__img::after{opacity:1;transform:none}
.blogs-page.blog-v2 .bv2-eyebrow{margin:0 0 12px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.blogs-page.blog-v2 .bv2-eyebrow span{display:inline-block;color:#FFF7EE;background:linear-gradient(100deg,#A8281F,var(--red) 50%,#AD2A20);padding:4px 8px 3px;border-radius:999px;margin-right:10px;letter-spacing:.2em}
.blogs-page.blog-v2 .bv2-lead__h{margin:0;font-weight:400;font-size:clamp(20px,1.9vw,30px);line-height:1.15;letter-spacing:-.015em;text-transform:none;text-align:left}
.blogs-page.blog-v2 .bv2-lead__p{margin:12px 0 0;max-width:52ch;font-size:14px;line-height:1.55;color:var(--soft);text-align:left}
.blogs-page.blog-v2 .bv2-lead__go{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding-bottom:4px;
  background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;transition:color .8s var(--e)}
.blogs-page.blog-v2 .bv2-lead__txt{text-align:left}
.blogs-page.blog-v2 .bv2-lead__go i{font-style:normal;transition:transform .9s var(--o)}
.blogs-page.blog-v2 .bv2-lead:hover .bv2-lead__go{color:var(--red)}
.blogs-page.blog-v2 .bv2-lead:hover .bv2-lead__go i{transform:translateX(6px)}

/* the list: larger titles that fill with our red on hover, the date as a small red label, the arrow slides */
.blogs-page.blog-v2 .links-item .link{transition:background-color .8s var(--e)}
.blogs-page.blog-v2 .links-item .link:hover{background-color:rgba(190,46,36,.025)}
.blogs-page.blog-v2 .link .number{font-size:11px;letter-spacing:.18em}
.blogs-page.blog-v2 .link .name{font-size:clamp(19px,1.7vw,28px);line-height:1.2;letter-spacing:-.01em}
@media (hover:hover){
  .blogs-page.blog-v2 .link .name{background-image:linear-gradient(90deg,var(--red-hi),var(--red) 16%,var(--red-lo) 34%,var(--ink) 66.6%,var(--ink));background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position 1.1s var(--e)}
  .blogs-page.blog-v2 .link:hover .name{background-position:0 0}
}
/* the picture that follows the cursor: larger, with a soft shadow */
.blogs-page.blog-v2 .hover-reveal{width:340px!important;height:165px!important;box-shadow:0 18px 50px rgba(45,25,20,.18)} /* the pictures' own proportions (1802 x 873): no bands */
.blogs-page.blog-v2 .hover-reveal__img,.blogs-page.blog-v2 .hover-reveal__inner{background-size:cover!important;background-position:50% 50%!important}

/* the wide picture of each article: shown where there is no cursor picture (below 1200px), like a still from a film */
.blogs-page.blog-v2 .bv2-thumb{display:none}
.blogs-page.blog-v2 .link .img-holder{display:none!important}
@media (max-width:1199px){
  .blogs-page.blog-v2 .links-item .link{display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"num icon" "thumb thumb" "name name";align-items:center;gap:12px 16px;padding-top:24px;padding-bottom:24px}
  .blogs-page.blog-v2 .links-item .link .left{grid-area:num}
  .blogs-page.blog-v2 .links-item .link .icon{grid-area:icon}
  .blogs-page.blog-v2 .links-item .link .bv2-thumb{grid-area:thumb;display:block;aspect-ratio:720/349;overflow:hidden;background:#EDE7DE}
  .blogs-page.blog-v2 .links-item .link .bv2-thumb img{display:block;width:100%;height:100%;object-fit:cover}
  .blogs-page.blog-v2 .links-item .link .name{grid-area:name;margin:0}
}
/* tablets: the still sits on the left, small, the date and the title beside it */
@media (min-width:768px) and (max-width:1199px){
  .blogs-page.blog-v2 .links-item .link{grid-template-columns:260px 1fr auto;grid-template-areas:"thumb num icon" "thumb name name";gap:6px 28px;align-items:start}
  .blogs-page.blog-v2 .links-item .link .left{align-self:end}
  .blogs-page.blog-v2 .links-item .link .icon{align-self:end}
  .blogs-page.blog-v2 .links-item .link .name{align-self:start}
}
@media (max-width:860px){
  .blogs-page.blog-v2 .bv2-lead{grid-template-columns:1fr;gap:18px}
}
/* phones: the sections stay in the site columns (a sideways row was tried on 2026-10-17 and removed: Clarity showed visitors did not scroll it and missed sections) */

/* ---------- the DNA helix (desktop, 1200px and wider): the empty right column ---------- */
.blogs-page.blog-v2 .bv2-dna{display:none}
@media (min-width:1200px){
  .blogs-page.blog-v2 .bv2-body{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:72px;align-items:start}
  .blogs-page.blog-v2 .bv2-body .links{grid-column:1;width:auto;max-width:none}
  .blogs-page.blog-v2 .bv2-dna{display:block;grid-column:2;position:sticky;top:calc(var(--header-h,70px) + 120px);height:640px;perspective:1100px;perspective-origin:50% 40%}
  .blogs-page.blog-v2 .bv2-dna__spin{position:relative;height:100%;margin:0;padding:0;list-style:none;transform-style:preserve-3d;animation:bv2Spin 44s linear infinite}
  .blogs-page.blog-v2 .bv2-dna:hover .bv2-dna__spin,.blogs-page.blog-v2 .bv2-dna.is-off .bv2-dna__spin{animation-play-state:paused}
  @keyframes bv2Spin{to{transform:rotateY(360deg)}}
  .blogs-page.blog-v2 .bv2-rung{position:absolute;left:50%;top:calc(var(--i) * 38px + 10px);width:230px;height:18px;margin-left:-115px;transform:rotateY(calc(var(--i) * 24deg));
    background:linear-gradient(90deg,rgba(190,46,36,.45),rgba(45,45,45,.25)) 50% 50%/calc(100% - 20px) 1px no-repeat;transition:background-size .6s var(--e)}
  .blogs-page.blog-v2 .bv2-rung::before,.blogs-page.blog-v2 .bv2-rung::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--ink)}
  .blogs-page.blog-v2 .bv2-rung::before{left:0;background:var(--red)}
  .blogs-page.blog-v2 .bv2-rung::after{right:0}
  .blogs-page.blog-v2 .bv2-dot,.blogs-page.blog-v2 .bv2-bond{display:none}
  .blogs-page.blog-v2 .bv2-rung.is-lit{background-size:0 1px}
    .blogs-page.blog-v2 .bv2-word{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:0;pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity .5s var(--e)}
  .blogs-page.blog-v2 .bv2-word--tag{font-size:12px;letter-spacing:.06em;text-transform:none;color:var(--red)}
  /* a lit rung: the bond gives way to the word, which flickers in */
  .blogs-page.blog-v2 .bv2-rung.is-lit .bv2-word{opacity:1;pointer-events:auto;animation:bv2Flicker 1.1s steps(1,end) both}
  .blogs-page.blog-v2 a.bv2-word:hover{color:var(--red)}
  @keyframes bv2Flicker{0%{opacity:0}12%{opacity:.8}20%{opacity:.15}34%{opacity:.9}44%{opacity:.35}58%{opacity:1}100%{opacity:1}}
  /* the Elements section: the helix in its blues */
  body:has(.sort-link.active[href*="/category/elements"]) .blogs-page.blog-v2 .bv2-rung::before{background:#3FA9E0}
  body:has(.sort-link.active[href*="/category/elements"]) .blogs-page.blog-v2 .bv2-rung::after{background:#123A7A}
  body:has(.sort-link.active[href*="/category/elements"]) .blogs-page.blog-v2 .bv2-rung{background-image:linear-gradient(90deg,rgba(63,169,224,.5),rgba(18,58,122,.3))}
  body:has(.sort-link.active[href*="/category/elements"]) .blogs-page.blog-v2 .bv2-word--tag{color:#1A4F9C}
}
@media (prefers-reduced-motion:reduce){.blogs-page.blog-v2 .bv2-rung.is-lit .bv2-word{animation:none}.blogs-page.blog-v2 .bv2-dna__spin{animation:none}}

/* the sections as the band of the portfolio filter (2026-10-18): held under the header, paper glass with a hairline, one line of small
   capitals (sideways when it does not fit, the edges fade), the red line at the band's edge, red counts (data-n, drawn by CSS so the
   link text stays the section name). The Elements page keeps its own glass and blues. */
.blogs-page.blog-v2 .sort-holder{z-index:40;padding-top:0!important;padding-bottom:0!important;font-size:11px!important;letter-spacing:0!important;background:rgba(249,246,240,.9);-webkit-backdrop-filter:saturate(1.15) blur(14px);backdrop-filter:saturate(1.15) blur(14px);border-bottom:1px solid var(--line)}
.blogs-page.blog-v2 .sort-holder .sort-item{display:flex!important;flex-wrap:nowrap!important;align-items:stretch;gap:clamp(22px,2.6vw,40px)!important;width:auto!important;height:58px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.blogs-page.blog-v2 .sort-holder .sort-item::-webkit-scrollbar{display:none}
.blogs-page.blog-v2 .sort-holder .sort-item.is-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.blogs-page.blog-v2 .sort-holder .sort-item.is-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.blogs-page.blog-v2 .sort-holder .sort-item.is-more-l.is-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.blogs-page.blog-v2 .sort-holder .sort-link{display:inline-flex!important;align-items:center;gap:5px;flex:0 0 auto;width:auto!important;height:100%;padding:0!important;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--soft);transition:color .5s var(--e)}
.blogs-page.blog-v2 .sort-holder .sort-link:hover,.blogs-page.blog-v2 .sort-holder .sort-link.active{color:var(--ink)}
.blogs-page.blog-v2 .sort-holder .sort-link::after{bottom:0;transition:transform .8s var(--o)}
.blogs-page.blog-v2 .sort-holder .sort-link[data-n]:not([data-n=""])::before{content:attr(data-n);order:2;position:relative;top:-.55em;font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--red);-webkit-text-fill-color:var(--red)}
.blogs-page.blog-v2 .sort-holder .sort-link[href*="/category/elements"]::before{-webkit-text-fill-color:#1A4F9C;color:#1A4F9C}
@media (max-width:767px){
  .blogs-page.blog-v2 .sort-holder .sort-item{height:52px;gap:22px!important}
  .blogs-page.blog-v2 .sort-holder .sort-link{letter-spacing:.14em}
}

/* the sections open in two columns where they do not fit in one line (owner, 2026-10-19: as before the redesign, in the new look;
   never scrolled sideways, never hidden behind a button). blog-v2.js sets .is-grid. Open and held under the header like the one-line band (owner). */
.blogs-page.blog-v2 .sort-holder.is-grid .sort-item{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 clamp(20px,5vw,64px)!important;height:auto!important;
  overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding:12px 0 14px!important}
.blogs-page.blog-v2 .sort-holder.is-grid .sort-link{height:auto!important;padding:9px 0!important;white-space:normal;justify-self:start;font-size:11px;letter-spacing:.14em;line-height:1.3}
.blogs-page.blog-v2 .sort-holder.is-grid .sort-link::after{bottom:4px}
.blogs-page.blog-v2 .sort-holder.is-grid .sort-link.active{color:var(--red)}
.blogs-page.blog-v2 .sort-holder.is-grid .sort-link[href*="/category/elements"].active{color:#1A4F9C}
@media (max-width:767px){.blogs-page.blog-v2 .sort-holder.is-grid .sort-link{letter-spacing:.1em}}
/* the two columns: the first at the left edge, the second after a calm, even gap (owner, 2026-10-19: neither pressed to the left nor pushed to the far edge) */
.blogs-page.blog-v2 .sort-holder.is-grid .sort-item{grid-template-columns:repeat(2,max-content)!important;justify-content:start;column-gap:clamp(36px,11vw,72px)!important;flex:1 1 auto;width:100%!important}

/* Phones and tablets (where the news rows carry a picture): the old drop-in of each row (a fall with a turn, article.js) looked choppy on
   iPhone (owner, 2026-10-19). Here a row rises softly as it comes into view and its picture fades in only once it has loaded.
   Only transform and opacity move, so the compositor does the work; blog-v2.js adds .bv2-motion, without it everything simply shows. */
@media (max-width:1199px){
  .blogs-page.blog-v2 .links-item .link.animate-line{opacity:1!important;transform:none!important}
  .blogs-page.blog-v2.bv2-motion .links-item{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s cubic-bezier(.25,.1,.25,1),transform 1.2s cubic-bezier(.19,1,.22,1);will-change:opacity,transform}
  .blogs-page.blog-v2.bv2-motion .links-item.bv2-in{opacity:1;transform:none;will-change:auto}
  .blogs-page.blog-v2.bv2-motion .bv2-thumb img,.blogs-page.blog-v2.bv2-motion .bv2-lead__img img{opacity:0;transform:scale(1.035);transition:opacity 1s cubic-bezier(.25,.1,.25,1),transform 1.6s cubic-bezier(.19,1,.22,1)}
  .blogs-page.blog-v2.bv2-motion .bv2-thumb img.is-loaded,.blogs-page.blog-v2.bv2-motion .bv2-lead__img img.is-loaded{opacity:1;transform:none}
}