/* 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;max-width:none;text-wrap:balance;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 */
/* no shadow (2026-10-26, owner): the frame stays still while the picture slides in and out of it, so a shadowed frame showed an empty field */
.blogs-page.blog-v2 .hover-reveal{width:340px!important;height:165px!important} /* 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}
  /* the first screen (.bv2-first, blog-v2.js) shows at once, as painted; only what scrolls in rises and fades (2026-11-06) */
  .blogs-page.blog-v2.bv2-motion .links-item.bv2-first,.blogs-page.blog-v2.bv2-motion .bv2-first .bv2-thumb img,.blogs-page.blog-v2.bv2-motion .bv2-first .bv2-lead__img img,.blogs-page.blog-v2.bv2-motion .bv2-lead.bv2-first .bv2-lead__img img{opacity:1;transform:none;transition:none;will-change:auto}
}

/* one line kept on 13-14 inch laptops (owner, 2026-10-31: the band must look as on 1920 and 15-16 inch screens, not as on a tablet):
   when the line does not fit, blog-v2.js first tries .is-tight (smaller gaps and letter spacing, smaller counts); two columns only after that */
.blogs-page.blog-v2 .sort-holder.is-tight .sort-item{gap:24px!important}
.blogs-page.blog-v2 .sort-holder.is-tight .sort-link{letter-spacing:.12em;gap:2px}
.blogs-page.blog-v2 .sort-holder.is-tight .sort-link[data-n]:not([data-n=""])::before{font-size:8px;letter-spacing:0}

/* desktop never opens in columns (owner, 2026-10-31): below the .is-tight step a second, tighter one line (.is-tight2, 1200px and up);
   tablets (768-1199) open in two rows, wrapped as the line runs (.is-grid.is-rows: scrolls away, the slim bar takes over); phones keep two columns */
.blogs-page.blog-v2 .sort-holder.is-tight2 .sort-item{gap:14px!important}
.blogs-page.blog-v2 .sort-holder.is-tight2 .sort-link{font-size:10.5px;letter-spacing:.07em;gap:2px}
.blogs-page.blog-v2 .sort-holder.is-tight2 .sort-link[data-n]:not([data-n=""])::before{font-size:8px;letter-spacing:0}
.blogs-page.blog-v2 .sort-holder.is-grid.is-rows .sort-item{display:flex!important;flex-wrap:wrap!important;grid-template-columns:none!important;column-gap:26px!important;row-gap:0!important;padding:8px 0 10px!important}
.blogs-page.blog-v2 .sort-holder.is-grid.is-rows .sort-link{white-space:nowrap;letter-spacing:.12em;gap:2px}
.blogs-page.blog-v2 .sort-holder.is-grid.is-rows .sort-link[data-n]:not([data-n=""])::before{font-size:8px;letter-spacing:0}

/* a topic with its own page (/blog/topic/<slug>, 2026-11-06): its H1 at the one page-title size of the site */
.blogs-page.blog-v2 .service h1.bv2-h1--hub{font-size:clamp(40px,5vw,84px);line-height:1.02;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}

/* ---------- topics inside a section (config/blog_topics.php, 2026-11-06, owner) ----------
   Quiet beige pills with a red count, the chosen one red. The air above the topics equals the air below them, down to the latest
   article (the band's own bottom margin is dropped when topics follow it). Blog pages cross-fade into each other (view transitions). */
@view-transition{navigation:auto}
.blogs-page.blog-v2 .sort-holder:has(~ .bt){margin-bottom:0!important}
.blogs-page.blog-v2 .bt{display:flex;align-items:flex-start;gap:10px clamp(18px,2vw,28px);margin:clamp(24px,3vw,40px) 0 0;scroll-margin-top:96px}
/* page 2 and on (no latest card): the list follows the topics directly, with the same air as above them (owner, 2026-11-06: the pills sat on the list line) */
.blogs-page.blog-v2 .bt + .bv2-body{margin-top:clamp(24px,3vw,40px)}
.blogs-page.blog-v2 .bt__label{flex:0 0 auto;padding-top:12px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.blogs-page.blog-v2 .bt__list{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.blogs-page.blog-v2 .bt__list li{margin:0;padding:0;list-style:none}
.blogs-page.blog-v2 .bt__list li::before{content:none}
.blogs-page.blog-v2 .bt__a{display:inline-block;white-space:nowrap;text-decoration:none;padding:9px 16px 8px;border-radius:999px;background:#EFE9DF;color:var(--ink);font-size:14px;font-weight:400;transition:background-color .4s var(--e),color .4s var(--e)}
.blogs-page.blog-v2 .bt__a:hover{background:#E6DDD0}
.blogs-page.blog-v2 .bt__a.is-on{background:var(--red);color:#FFF7EE}
.blogs-page.blog-v2 .bt__n{position:relative;top:-.3em;margin-left:3px;font-size:.66em;font-weight:600;letter-spacing:.04em;color:var(--red)}
.blogs-page.blog-v2 .bt__a.is-on .bt__n{color:#FFF7EE}
@media (max-width:767px){
  .blogs-page.blog-v2 .bt{flex-direction:column;align-items:flex-start;gap:10px;scroll-margin-top:118px}
  .blogs-page.blog-v2 .bt__label{padding-top:0}
  .blogs-page.blog-v2 .bt__list{gap:8px}
  /* the first six topics, then More (owner, 2026-11-06); the rest unfold with the list */
  .blogs-page.blog-v2 .bt:not(.is-open) .bt__x{display:none}
  .blogs-page.blog-v2 .bt .bt__m{display:block}
  .blogs-page.blog-v2 .bt.is-open .bt__x{animation:btIn .5s var(--o) both}
}
.blogs-page.blog-v2 .bt__m{display:none}
.blogs-page.blog-v2 .bt__more{border:0;cursor:pointer;font:inherit;font-size:14px;background:transparent;box-shadow:inset 0 0 0 1px rgba(45,45,45,.22)}
.blogs-page.blog-v2 .bt__more:hover{background:#EFE9DF}
.blogs-page.blog-v2 .bt.is-open .bt__more .bt__n{display:none}
@keyframes btIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}