/* ---------- News: loaded on /news/ and its stories only. One list, one story layout, the same parts throughout. ---------- */

/* Tag, category and date on one line, shared by the list and the story. */
.bl-site .bl-news-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:var(--fs-micro);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bl-site .bl-news-item-meta>*+*::before{content:'';display:inline-block;width:3px;height:3px;margin:0 12px;border-radius:50%;background:#a4adb1;vertical-align:middle}
.bl-site .bl-news-item-meta time{font-variant-numeric:tabular-nums}
.bl-site .bl-news-tag{font-weight:700;color:var(--blue)}
.bl-site .bl-news-tag-group{color:var(--ink)}
.bl-site .bl-news-when{font-weight:700;color:var(--blue)}
.bl-site .bl-news-when-live{color:#c4521f}
.bl-site .bl-news-when-past{color:var(--muted)}

/* Section tabs: the site's category bar, with a count beside each section. */
/* Wraps rather than widening the page once all three sections have stories. */
.bl-site .bl-news-tabs{flex-wrap:wrap;row-gap:0;border-bottom:0}
.bl-site .bl-news-tabs small{margin-left:4px;font-size:.8em;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bl-site .bl-news-tabs a[aria-current=page] small{color:var(--blue)}

/* Product filter and layout switch: one row under the section tabs. */
.bl-site .bl-news-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:clamp(14px,1.2vw,22px) 0 clamp(16px,1.4vw,24px)}
.bl-site .bl-news-products{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bl-site .bl-news-tools-label{margin-right:4px;font-size:var(--fs-micro);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bl-site .bl-news-products>a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-label);font-weight:600;color:var(--ink);background:transparent}
.bl-site .bl-news-products>a small{margin-left:6px;font-size:.85em;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bl-site .bl-news-products>a[aria-current=page]{border-color:var(--blue);background:var(--blue);color:#fff}
.bl-site .bl-news-products>a[aria-current=page] small{color:inherit}
@media(hover:hover){.bl-site .bl-news-products>a:not([aria-current=page]):hover{border-color:var(--blue);color:var(--blue)}}
.bl-site .bl-news-view{display:inline-flex;margin-left:auto;border:1px solid var(--line)}
.bl-site .bl-news-view[hidden]{display:none}
.bl-site .bl-news-view button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:0;background:transparent;font:600 var(--fs-label)/1 var(--sans);color:var(--muted);cursor:pointer}
.bl-site .bl-news-view button+button{border-left:1px solid var(--line)}
.bl-site .bl-news-view button[aria-pressed=true]{background:var(--ink);color:#fff}
.bl-site .bl-news-view button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* A pinned story carries a mark before its section. */
.bl-site .bl-news-pin{display:inline-block;padding:3px 8px;background:var(--ink);font-weight:700;color:#fff}

/* List. */
.bl-site .bl-news-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 60px;padding:clamp(24px,2vw,48px) 0 clamp(8px,.6vw,14px)}
.bl-site .bl-news-list{border-top:1px solid var(--ink)}
.bl-site .bl-news-head h1{font:700 var(--fs-h2)/.95 var(--display);letter-spacing:-.01em}
.bl-site .bl-news-head-row p{max-width:32em;font-size:var(--fs-body);line-height:1.75;color:var(--muted)}
.bl-site .bl-news-list-section{padding-bottom:var(--sp-section)}
.bl-site .bl-news-list{margin:0;padding:0;list-style:none}
.bl-site .bl-news-list>li{border-bottom:1px solid var(--line)}
.bl-site .bl-news-item{display:grid;grid-template-columns:clamp(220px,24vw,520px) minmax(0,1fr);gap:clamp(24px,2.8vw,72px);align-items:center;padding:clamp(24px,2vw,44px) 0}
.bl-site .bl-news-item-image{overflow:hidden;aspect-ratio:3/2;background:#e3e6e1}
.bl-site .bl-news-item-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.bl-site .bl-news-item-body{display:flex;flex-direction:column;align-items:flex-start;max-width:52em}
.bl-site .bl-news-item-title{margin:clamp(10px,.8vw,16px) 0 clamp(8px,.6vw,12px);font:600 var(--fs-h4)/1.08 var(--display);transition:color .2s}
.bl-site .bl-news-item-excerpt{font-size:var(--fs-small);line-height:1.75;color:var(--muted);text-wrap:pretty}
.bl-site .bl-news-item-event{display:flex;flex-wrap:wrap;align-items:center;margin-top:clamp(12px,1vw,20px);font-size:var(--fs-label);font-weight:600}
.bl-site .bl-news-item-event>*+*::before{content:'';display:inline-block;width:1px;height:.9em;margin:0 12px;background:var(--line);vertical-align:-1px}
@media(hover:hover){.bl-site .bl-news-item:hover .bl-news-item-title{color:var(--blue)}}
@media(hover:hover){.bl-site .bl-news-item:hover img{transform:scale(1.03)}}

/* Story: text column and a side column of details. */
.bl-site .bl-story{padding-bottom:clamp(40px,3vw,72px)}
.bl-site .bl-story-head{max-width:60em;padding:clamp(28px,2.4vw,60px) 0 clamp(24px,2vw,44px)}
.bl-site .bl-story-category{display:inline-block;padding-bottom:3px;border-bottom:2px solid currentColor;font-size:var(--fs-label);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
@media(hover:hover){.bl-site a.bl-story-category:hover{color:var(--ink)}}
.bl-site .bl-story-head h1{margin:clamp(18px,1.4vw,30px) 0 clamp(14px,1.1vw,24px);font:700 clamp(40px,3.2vw,84px)/1 var(--display);letter-spacing:-.01em;text-wrap:balance}
.bl-site .bl-story-lede{max-width:42em;font-size:var(--fs-lead);line-height:1.7;color:var(--muted);text-wrap:pretty}
.bl-site .bl-story-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,22vw,420px);gap:clamp(40px,5vw,120px);align-items:start;padding-top:clamp(28px,2.4vw,56px);border-top:1px solid var(--ink)}
.bl-site .bl-story-layout-top{padding-top:0;border-top:0}
.bl-site .bl-story-layout-top .bl-story-head{max-width:none;padding-top:clamp(28px,2.4vw,60px)}
/* The headline and the lede run the full width of the text column, so nothing is left blank beside them. */
.bl-site .bl-story-layout-top .bl-story-head h1{text-wrap:pretty}
.bl-site .bl-story-layout-top .bl-story-lede{max-width:none}
/* The side column starts level with the section label above the headline, not with the top of the head's padding. */
@media(min-width:1001px){.bl-site .bl-story-layout-top .bl-story-aside{padding-top:clamp(28px,2.4vw,60px)}}
.bl-site .bl-story-body{padding-top:clamp(28px,2.4vw,56px);border-top:1px solid var(--ink)}
.bl-site .bl-story-figure{margin:0 0 clamp(28px,2.2vw,48px)}
.bl-site .bl-story-figure img{width:100%;max-height:min(70vh,760px);object-fit:contain;background:#e7e9e3}
.bl-site .bl-story-figure figcaption,.bl-site .bl-story-poster figcaption{padding-top:10px;font-size:var(--fs-label);color:var(--muted)}
/* The text fills the column beside the aside, so a wide lead image is never followed by a half-empty row. */
.bl-site .bl-story-text{max-width:none}
.bl-site .bl-story-text :is(ul,ol){margin:0 0 1.2em;padding-left:1.4em;font-size:var(--fs-body);line-height:1.85;color:#3f4c57}
.bl-site .bl-story-text ul{list-style:disc}
.bl-site .bl-story-text li+li{margin-top:.35em}
.bl-site .bl-story-text .bl-wp-article-content p{margin:0 0 1em}
.bl-site .bl-story-text li::marker{color:var(--blue)}
.bl-site .bl-story-text h2{margin:clamp(28px,2.2vw,48px) 0 clamp(8px,.6vw,14px);font:600 var(--fs-h5)/1.15 var(--display)}
.bl-site .bl-story-text h2:first-child{margin-top:0}
.bl-site .bl-story-text p{font-size:var(--fs-body);line-height:1.85;color:#3f4c57;text-wrap:pretty}
.bl-site .bl-story-text a{color:var(--blue);border-bottom:1px solid #215bdb66}
@media(hover:hover){.bl-site .bl-story-text a:hover{border-bottom-color:var(--blue)}}
.bl-site .bl-story-text .bl-story-visit{margin-top:clamp(28px,2.2vw,48px);padding-top:clamp(16px,1.2vw,24px);border-top:1px solid var(--line)}
/* Long guides written in WordPress: sub-headings, pictures with captions and specification tables. Wide tables scroll
   sideways inside their own frame on phones rather than widening the page. */
.bl-site .bl-wp-article-content h3{margin:clamp(22px,1.6vw,34px) 0 8px;font:700 var(--fs-lead)/1.35 var(--sans);color:var(--ink)}
.bl-site .bl-wp-article-content figure{margin:clamp(24px,1.8vw,40px) 0}
.bl-site .bl-wp-article-content figure img{width:100%;height:auto;background:#e7e9e3}
.bl-site .bl-wp-article-content figcaption{padding-top:10px;font-size:var(--fs-label);line-height:1.6;color:var(--muted)}
/* A chart can come in two drawings in one figure: a landscape one (.bl-chart-wide) for wider screens and the tall one
   (.bl-chart-tall) whose lettering stays readable on a phone. Only the one shown is downloaded, as both load lazily. */
.bl-site .bl-wp-article-content .bl-chart-wide{display:none}
@media(min-width:701px){.bl-site .bl-wp-article-content .bl-chart-wide{display:block}}
/* On a computer a tall chart drawn for phones would fill more than a screen at full column width, so pictures stop at
   most of the window height and sit centred with their caption; phones keep them full width. */
@media(min-width:701px){
  .bl-site .bl-wp-article-content figure img{display:block;width:auto;max-width:100%;max-height:min(78vh,860px);margin-inline:auto}
  .bl-site .bl-wp-article-content .bl-chart-tall{display:none}
  .bl-site .bl-wp-article-content figcaption{text-align:center}
}
.bl-site .bl-wp-article-content .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-site .bl-wp-article-content table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.5;color:#3f4c57}
.bl-site .bl-wp-article-content .wp-block-table table{min-width:32rem}
.bl-site .bl-wp-article-content :is(th,td){padding:10px 12px;border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bl-site .bl-wp-article-content thead th{border-bottom:2px solid var(--ink);font-size:var(--fs-micro);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.bl-site .bl-wp-article-content tbody th{font-weight:600;color:var(--ink)}
.bl-site .bl-wp-article-content strong{color:var(--ink)}

.bl-site .bl-story-aside{display:flex;flex-direction:column;gap:clamp(20px,1.6vw,32px)}
/* Wide screens: only the contents list follows the reader (the cards before it scroll with the page). When it is taller than
   the window it would hide its foot, so news-contents.js marks it data-free and it scrolls with the story instead. */
@media(min-width:1001px){
  .bl-site .bl-story-layout{align-items:stretch}
  .bl-site .bl-story-contents{position:sticky;top:calc(var(--header-height) + clamp(32px,3vw,64px))}
  .bl-site .bl-story-contents[data-free]{position:static}
}
.bl-site .bl-story-box{padding:clamp(18px,1.4vw,28px);background:#fff;border:1px solid var(--line)}
.bl-site .bl-story-box h2{margin-bottom:12px;font-size:var(--fs-micro);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.bl-site .bl-story-box p{font-size:var(--fs-small);line-height:1.7;color:#3f4c57}
.bl-site .bl-story-box dl{margin:0}
.bl-site .bl-story-box dl>div{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.bl-site .bl-story-box dt{padding-top:.2em;font-size:var(--fs-micro);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bl-site .bl-story-box dd{margin:0;font-size:var(--fs-small);font-weight:600;line-height:1.5}
.bl-site .bl-story-box dd small{display:block;margin-top:2px;font-size:var(--fs-micro);font-weight:500;color:var(--muted)}
.bl-site .bl-story-box dd strong{font:700 var(--fs-h5)/1 var(--display);color:var(--blue)}
.bl-site .bl-story-box dd .bl-news-when{display:block;margin-top:2px;font-size:var(--fs-micro);letter-spacing:.5px;text-transform:uppercase}
.bl-site .bl-story-box-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding-bottom:3px;border-bottom:1px solid var(--line);font-size:var(--fs-label);font-weight:600;line-height:1.5;color:var(--ink)}
@media(hover:hover){.bl-site .bl-story-box-link:hover{border-bottom-color:var(--ink)}}
.bl-site .bl-story-box-link .bl-icon{width:15px;height:15px;flex:0 0 auto}
/* Contents: the story's <h2> headings, numbered. Wide screens list them in the side column (news-contents.js marks the
   one being read); at 1000px and below the fold-out above the text takes over, shut until opened. */
.bl-site .bl-story-text h2{scroll-margin-top:calc(var(--header-height) + 24px)}
.bl-site .bl-story-contents ol,.bl-site .bl-story-contents-inline ol{margin:0;padding:0;list-style:none;counter-reset:contents}
.bl-site .bl-story-contents li,.bl-site .bl-story-contents-inline li{counter-increment:contents;border-top:1px solid var(--line)}
.bl-site .bl-story-contents a,.bl-site .bl-story-contents-inline a{display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:8px;padding:10px 0;font-size:var(--fs-small);font-weight:500;line-height:1.4;color:#3f4c57}
.bl-site .bl-story-contents a::before,.bl-site .bl-story-contents-inline a::before{content:counter(contents,decimal-leading-zero);font-size:var(--fs-micro);font-weight:700;letter-spacing:.5px;line-height:1.9;color:var(--muted);font-variant-numeric:tabular-nums}
.bl-site .bl-story-contents a[aria-current]{font-weight:700;color:var(--ink)}
.bl-site .bl-story-contents a[aria-current]::before{color:var(--blue)}
@media(hover:hover){.bl-site .bl-story-contents a:hover,.bl-site .bl-story-contents-inline a:hover{color:var(--blue)}}
.bl-site .bl-story-contents-inline{display:none}
.bl-site .bl-story-poster{float:right;width:min(42%,340px);margin:6px 0 20px clamp(24px,2vw,44px)}
.bl-site .bl-story-poster img{width:100%;border:1px solid var(--line);background:#fff}
.bl-site .bl-story-text::after{content:'';display:block;clear:both}
.bl-site .bl-story-text .bl-story-visit{clear:both}

/* Application case: one centred reading column; the facts run across the top, machines and the enquiry sit side by side below the text. */
.bl-site .bl-story-case .bl-story-head,.bl-site .bl-story-case .bl-story-layout{max-width:58rem;margin-inline:auto}
.bl-site .bl-story-case .bl-story-layout{display:block}
.bl-site .bl-story-facts{margin-bottom:clamp(28px,2.2vw,48px)}
.bl-site .bl-story-facts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:0 clamp(20px,2vw,32px);margin:0}
.bl-site .bl-story-facts dl>div{padding:12px 0;border-bottom:1px solid var(--line)}
.bl-site .bl-story-facts dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bl-site .bl-story-facts dd{margin:4px 0 0;font-size:var(--fs-small);font-weight:600;line-height:1.5}
.bl-site .bl-story-case .bl-story-aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));align-items:start;margin-top:clamp(36px,3vw,64px)}

/* Written by: the person, then the dates. */
.bl-site .bl-story-author-name{display:flex;align-items:center;gap:14px;padding-bottom:14px}
.bl-site .bl-story-author-name img,.bl-site .bl-story-avatar{flex:0 0 auto;width:48px;height:48px;border-radius:50%;object-fit:cover}
.bl-site .bl-story-avatar{display:grid;place-items:center;background:var(--ink);color:#fff;font:700 22px/1 var(--display)}
.bl-site .bl-story-author-name b{display:block;font-size:var(--fs-small);font-weight:700}
.bl-site .bl-story-author-name small{display:block;margin-top:2px;font-size:var(--fs-label);color:var(--muted)}

.bl-site .bl-story-author-bio{margin:0 0 14px;font-size:var(--fs-small);line-height:1.7;color:#3f4c57}
/* Contact us: the same box as the "similar job" box on the application pages. */

/* Related products: a compact list into the catalogue. */
.bl-site .bl-story-product-list{margin:0;padding:0;list-style:none}
.bl-site .bl-story-product-list a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.bl-site .bl-story-product-image{aspect-ratio:1.25;background:#f6f7f4}
.bl-site .bl-story-product-image img{width:100%;height:100%;object-fit:contain;padding:3px}
.bl-site .bl-story-product-list b{display:block;font:700 var(--fs-h5)/1 var(--display);transition:color .2s}
.bl-site .bl-story-product-list small{display:block;margin-top:3px;font-size:var(--fs-micro);line-height:1.4;color:var(--muted)}
@media(hover:hover){.bl-site .bl-story-product-list a:hover b{color:var(--blue)}}

/* Neighbouring stories: two cards side by side (one column on phones), then the way back to the list. */
.bl-site .bl-story-pager{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,1.6vw,32px);margin-top:clamp(48px,3.6vw,88px);margin-bottom:clamp(48px,3.6vw,88px)}
.bl-site .bl-story-pager-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.6vw,32px);width:100%}
.bl-site .bl-story-pager-card{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,1.6vw,32px);background:#fff;border:1px solid var(--line);transition:border-color .2s}
.bl-site .bl-story-pager-card span{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.bl-site .bl-story-pager-card .bl-icon{width:15px;height:15px}
.bl-site .bl-story-pager-card b{font:600 var(--fs-h5)/1.15 var(--display);text-wrap:balance;transition:color .2s}
.bl-site .bl-story-pager-older{grid-column:2}
.bl-site .bl-story-pager-all{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid var(--ink);font-size:var(--fs-label);font-weight:600;color:var(--ink);transition:background .2s,color .2s}
.bl-site .bl-story-pager-all .bl-icon{width:15px;height:15px}
@media(hover:hover){
  .bl-site .bl-story-pager-card:hover{border-color:var(--ink)}
  .bl-site .bl-story-pager-card:hover b{color:var(--blue)}
  .bl-site .bl-story-pager-all:hover{background:var(--ink);color:#fff}
  .bl-site .bl-story-pager-all:hover .bl-icon{filter:invert(1)}
}

/* Grid: three to a row on wide screens, two on tablets. On a phone the list is already one picture-over-text column, so the switch is hidden there. */
@media(min-width:701px){
  .bl-site .bl-news-list[data-view=grid]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,2.4vw,48px) clamp(20px,2vw,40px);padding-top:clamp(24px,2vw,40px)}
  .bl-site .bl-news-list[data-view=grid]>li{border-bottom:0}
  .bl-site .bl-news-list[data-view=grid] .bl-news-item{height:100%;grid-template-columns:1fr;align-content:start;align-items:start;gap:16px;padding:0}
  .bl-site .bl-news-list[data-view=grid] .bl-news-item-title{font-size:var(--fs-h5)}
}
@media(min-width:1001px){
  .bl-site .bl-news-list[data-view=grid]{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1000px){
  .bl-site .bl-news-head-row{flex-direction:column;align-items:flex-start}
  .bl-site .bl-story-layout{grid-template-columns:minmax(0,1fr)}
  .bl-site .bl-story-aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
  .bl-site .bl-story-contents{display:none}
  .bl-site .bl-story-contents-inline{display:block;margin:clamp(18px,3vw,28px) 0 clamp(20px,3.4vw,32px);background:#fff;border:1px solid var(--line)}
  .bl-site .bl-story-contents-inline summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;list-style:none;cursor:pointer;font-size:var(--fs-micro);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink)}
  .bl-site .bl-story-contents-inline summary::-webkit-details-marker{display:none}
  .bl-site .bl-story-contents-inline summary small{margin-left:auto;font-size:inherit;font-weight:500;letter-spacing:.5px;color:var(--muted)}
  .bl-site .bl-story-contents-inline summary::after{content:'';flex:0 0 auto;width:8px;height:8px;margin:-4px 2px 0 0;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
  .bl-site .bl-story-contents-inline[open] summary::after{margin-top:4px;transform:rotate(225deg)}
  .bl-site .bl-story-contents-inline summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  .bl-site .bl-story-contents-inline ol{padding:0 16px 6px}
  .bl-site .bl-story-contents-inline a{padding:12px 0}
}
@media(max-width:700px){
  .bl-site .bl-news-item{grid-template-columns:1fr;gap:16px}
  .bl-site .bl-news-view{display:none}
  .bl-site .bl-story-pager-pair{grid-template-columns:1fr}
  .bl-site .bl-story-pager-older{grid-column:auto}
  .bl-site .bl-story-pager{align-items:stretch}
  /* A tall poster is shown whole within one screen, centred, at its own width. */
  .bl-site .bl-story-poster{float:none;width:fit-content;max-width:100%;margin:24px auto}
  /* Its height is set before the picture arrives (the width follows from its shape), so the text below never jumps down. */
  .bl-site .bl-story-poster img{width:auto;max-width:100%;height:calc(100svh - var(--header-height) - var(--bl-bar-height,0px) - 64px);object-fit:contain;margin-inline:auto}
  /* One column: each picture near 3:2 in a frame of its own shape (news.php); posters sit whole on a light mat in a 3:2 frame, so lettering is never cropped. */
  .bl-site .bl-news-item-image{aspect-ratio:var(--bl-news-ratio,3/2)}
  .bl-site .bl-news-item-image-whole{background:#e9edf0}
  .bl-site .bl-news-item-image-whole img{object-fit:contain}
}
@media(max-width:600px){
  .bl-site .bl-story-head h1{font-size:clamp(36px,10vw,44px);line-height:1.02}
  .bl-site .bl-news-head h1{font-size:var(--m-h1,clamp(48px,14vw,60px));line-height:.9;letter-spacing:-.015em;text-transform:uppercase}
  .bl-site .bl-news-head-row{gap:16px;padding-top:28px}
  .bl-site .bl-news-list-section{padding-bottom:var(--m-sec,56px)}
  .bl-site .bl-news-tabs small{font-size:12px}
  .bl-site .bl-news-item-event>.bl-news-when{flex-basis:100%;margin-top:4px}
  .bl-site .bl-news-item-event>.bl-news-when::before{display:none}
  .bl-site .bl-news-tabs>a::before{content:'';position:absolute;inset:0 -10px}
  .bl-site a.bl-story-category{position:relative}
  .bl-site a.bl-story-category::before{content:'';position:absolute;inset:-10px -6px}
  .bl-site .bl-story-product-image{background:#fff}
  .bl-site .bl-story-product-image img{padding:0}
}
@media(hover:none){
  .bl-site .bl-news-item:active .bl-news-item-title,.bl-site .bl-story-product-list a:active b,.bl-site .bl-story-pager-card:active b{color:var(--blue)}
}

/* Pictures that open larger (article.php, lightbox.js): a button laid over each picture, hidden until the script runs.
   On wider screens it adds nothing to see, only the zoom pointer; on phones a small magnifier sits in the corner. */
.bl-site .bl-story-zoom-frame{display:block;position:relative}
.bl-site .bl-story-zoom{position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in}
.bl-site .bl-story-zoom[hidden],.bl-site .bl-story-zoom>.bl-icon{display:none}
/* Shown on phones only (below): who wrote the story and when, the event's dates and booth, and a second way back to the list. */
.bl-site .bl-story-byline,.bl-site .bl-story-when{display:none}

/* The lightbox, as on product pages (product.css), which story pages do not load. */
.bl-site .bl-lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(56px,4vw,96px) clamp(16px,6vw,140px);border:0;background:#03111ceb;color:#fff}
.bl-site .bl-lightbox[open]{display:grid;place-items:center}
.bl-site .bl-lightbox::backdrop{background:#03111c99}
.bl-site .bl-lightbox figure{margin:0;display:grid;gap:14px;justify-items:center;max-width:100%;max-height:100%}
.bl-site .bl-lightbox figure img{max-width:100%;max-height:calc(100dvh - 200px);object-fit:contain;background:#fff}
.bl-site .bl-lightbox figcaption{display:flex;gap:18px;align-items:baseline;font-size:var(--fs-small);color:#c9d6df}
.bl-site .bl-lightbox figcaption small{font-variant-numeric:tabular-nums;color:#8fa3b2}
.bl-site .bl-lightbox-close{position:absolute;top:clamp(12px,1.4vw,32px);right:clamp(12px,1.4vw,32px)}
.bl-site .bl-lightbox .bl-circle-button{background:#fff;border-color:#fff;color:var(--ink)}
.bl-site .bl-lightbox-step{position:absolute;top:50%;transform:translateY(-50%)}
.bl-site .bl-lightbox-prev{left:clamp(8px,1.4vw,32px)}
.bl-site .bl-lightbox-next{right:clamp(8px,1.4vw,32px)}
.bl-site .bl-lightbox-next .bl-icon{transform:rotate(180deg)}
.bl-site .bl-lightbox-step[hidden]{display:none}
@media(hover:hover){.bl-site .bl-lightbox-step:hover,.bl-site .bl-lightbox-close:hover{background:var(--blue);border-color:var(--blue)}}
@media(hover:hover){.bl-site .bl-lightbox-step:hover{transform:translateY(-50%)}}
@media(max-width:600px){.bl-site .bl-lightbox-step,.bl-site .bl-lightbox-step:hover{top:auto;bottom:16px;transform:none}}
/* Phones held upright: a tall poster fitted to the screen's height would come out no larger than in the story, so it
   takes the full width instead and scrolls inside the lightbox, its small print readable; the buttons stay put. */
@media(max-width:600px) and (orientation:portrait){
  .bl-site #story-lightbox[open]{display:block;overflow-y:auto;overscroll-behavior:contain;padding:76px 0 88px}
  .bl-site #story-lightbox figure img{width:100%;max-height:none}
  .bl-site #story-lightbox figcaption{padding-inline:var(--gutter)}
  .bl-site #story-lightbox :is(.bl-lightbox-close,.bl-lightbox-step){position:fixed;box-shadow:0 2px 12px #03111c59}
}
@media(max-width:1000px) and (max-height:500px){
  /* Three boxes in two columns: the event box runs down the right beside the other two, so none sits alone by an empty gap.
     Where only one column fits, the boxes stack in order as before. */
  .bl-site .bl-lightbox{padding:12px 76px}
  .bl-site .bl-lightbox figure{gap:8px}
  .bl-site .bl-lightbox figure img{max-height:calc(100dvh - 88px)}
  .bl-site .bl-lightbox figcaption{line-height:1.4}
}

/* Phones, upright or on their side. */
@media(max-width:600px),(max-width:1000px) and (max-height:500px){
  .bl-site .bl-lightbox figcaption small{white-space:nowrap}
  /* Author and date in one line under the lede; the Written by box then leaves out the repeated date. */
  .bl-site .bl-story-byline{display:flex;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:var(--fs-label);font-weight:700;line-height:1.5}
  .bl-site .bl-story-byline time{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
  .bl-site .bl-story-byline>*+*::before{content:'';display:inline-block;width:3px;height:3px;margin:0 10px;border-radius:50%;background:#a4adb1;vertical-align:middle}
  .bl-site .bl-story-author dl>div:first-child{display:none}
  .bl-site .bl-story-author .bl-story-box-link{margin-top:2px}
  /* The event's dates, how soon it opens and the booth, near the top; the full details stay in the side column. */
  .bl-site .bl-story-when{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 32px;margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line)}
  .bl-site .bl-story-when dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .bl-site .bl-story-when dd{margin:4px 0 0;font-size:var(--fs-small);font-weight:600;line-height:1.4}
  .bl-site .bl-story-when dd strong{font:700 var(--fs-h5)/1 var(--display);color:var(--blue)}
  .bl-site .bl-story-when .bl-news-when{display:block;margin-top:2px;font-size:var(--fs-micro);letter-spacing:.5px;text-transform:uppercase}
  /* A small magnifier in the picture's corner says it opens larger; the whole picture is the button. */
  .bl-site .bl-story-zoom>.bl-icon{display:block;position:absolute;right:6px;bottom:6px;box-sizing:content-box;width:18px;height:18px;max-width:none;max-height:none;margin:0;padding:8px;border:1px solid var(--line);background:#ffffffe6;object-fit:fill}
  .bl-site .bl-story-zoom:active>.bl-icon{background:#fff;border-color:var(--ink)}
  .bl-site .bl-story{padding-bottom:0}
  .bl-site .bl-story+.bl-story-pager{margin-top:var(--m-sec-tight,40px)}
}
/* Phones: the lines of an article run to both edges of the column. Ragged text on a column this narrow leaves a visibly empty right
   side, so paragraphs are justified, with hyphenation (and plain wrapping, which fills lines better than "pretty") to keep the gaps small. */
@media(max-width:600px){
  .bl-site .bl-story-text p{text-align:justify;text-wrap:wrap;hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:break-word}
  .bl-site .bl-story-text :is(li,figcaption),.bl-site .bl-story-lede{text-wrap:wrap;hyphens:auto;overflow-wrap:break-word}
}