/* EXPERIMENT (Lewie, 2026-10-12): "Biotech News" as a very large masthead, centred on the page, in place of the tagline.
   Version 2: no logo image. The Onyx logo's ringed circle, split in two, becomes ripples behind the headline, with a small
   ONYX wordmark in the split. <html data-masthead="logo"> (or ?masthead=logo) shows version 1, with the logo at the left.
   To revert entirely: delete this file, its <link> in partials/structure/head.hbs, partials/structure/masthead-ripples.hbs,
   and restore the tagline in partials/structure/header.hbs. */
.onyx-design .lf-header .lf-brandrow {position:relative;isolation:isolate;min-height:clamp(120px,12vw,168px);overflow:hidden}
.onyx-design .lf-masthead {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;text-align:center;color:var(--lf-ink)}
.onyx-design .lf-masthead a {display:grid;justify-items:center;gap:2px;color:inherit;text-decoration:none}
.onyx-design .lf-header .lf-masthead a:hover {text-decoration:none}
.onyx-design .lf-masthead-title {font:800 clamp(40px,5.6vw,84px)/.95 var(--font-family-sansSerif);letter-spacing:-.065em}
/* ONYX, small and widely spaced as in the logo's band. */
.onyx-design .lf-masthead-onyx {font:800 clamp(10px,.95vw,13px)/1 var(--font-family-sansSerif);letter-spacing:.62em;margin-right:-.62em;text-transform:uppercase}
.onyx-design .lf-header .lf-top-actions {margin-left:auto;position:relative;z-index:1}

/* The ripples: behind everything in the row, soft, never dark. */
.onyx-design .lf-ripples {position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.onyx-design .lf-ripples .r-b {stroke:var(--lf-brand)}
.onyx-design .lf-ripples .r-i {stroke:var(--lf-ink)}
.onyx-design .lf-ripples-drift {transform-origin:50% 50%;transform-box:view-box;animation:lf-ripple 16s ease-in-out infinite alternate}
@keyframes lf-ripple {from {transform:scale(1)} to {transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce) {.onyx-design .lf-ripples-drift {animation:none}}

/* Version 2 hides the logo image; version 1 hides the ripples and the small wordmark. */
.onyx-design .lf-header .lf-brand-lockup {display:none}
[data-masthead="logo"] .onyx-design .lf-header .lf-brand-lockup {display:flex}
[data-masthead="logo"] .onyx-design :is(.lf-ripples,.lf-masthead-onyx) {display:none}
[data-masthead="logo"] .onyx-design .lf-header .lf-brandrow {min-height:0;overflow:visible}

/* Reading counter: under Search / Subscribe, right-aligned, rather than to their left. */
@media (min-width:901px) {
  .onyx-design .lf-header .lf-top-actions {flex-wrap:wrap;justify-content:flex-end;max-width:300px;gap:6px 14px}
  .onyx-design .lf-header .lf-top-actions::after {content:'';order:3;flex-basis:100%;height:0}
  .onyx-design .lf-header .lf-top-actions .eg-meter {order:4}
  .onyx-design .lf-header .lf-top-actions .eg-track {order:5}
}

/* Below laptop width the centred line would run into the buttons: it sits to their left and shrinks to fit. */
@media (max-width:900px) {
  .onyx-design .lf-header .lf-top-actions .eg-track {position:absolute;right:0;bottom:-2px;font-size:10px;padding:0}
  .onyx-design .lf-header .lf-top-actions {position:static}
  .onyx-design .lf-header .lf-brandrow {min-height:84px;gap:10px}
  .onyx-design .lf-masthead {position:static;transform:none;flex:1;min-width:0}
  .onyx-design .lf-masthead a {justify-items:start}
  .onyx-design .lf-masthead-title {font-size:clamp(24px,7.6vw,44px);letter-spacing:-.06em}
  .onyx-design .lf-masthead-onyx {font-size:9px}
  /* The headline sits left of the buttons here, so the rings centre on it rather than on the row. */
  .onyx-design .lf-ripples {inset:0 auto 0 -37%;width:130%}
  .onyx-design .lf-header .lf-top-actions {gap:8px}
  [data-masthead="logo"] .onyx-design .lf-masthead a {justify-items:center}
  [data-masthead="logo"] .onyx-design .lf-masthead-title {font-size:clamp(15px,4.7vw,40px)}
}