.page-news{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
}

.page-news .breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  padding:20px 0 0;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--slate);
}
.page-news .breadcrumb a{
  color:var(--ink-2);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
}
.page-news .breadcrumb a:hover{
  color:var(--orange-deep);
  border-bottom-color:var(--orange);
}
.page-news .breadcrumb__sep{ color:var(--slate-100); }

.page-news .eyebrow{
  margin:0 0 8px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.12em;
  color:var(--slate);
}

.news-head{
  max-width:940px;
  padding:18px 0 0;
}
.page-news .news-head h1{
  margin:0;
  font-size:clamp(30px,7.4vw,56px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--ink);
}
.news-head__lede{
  max-width:54ch;
  margin:18px 0 0;
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
}
.news-head__meta{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:24px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--slate);
}
.news-head__meta li{
  display:flex;
  align-items:center;
  gap:8px;
}
.news-head__meta li::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 auto;
  background:var(--orange);
}

.news-block{ margin-top:48px; }

.news-sec-head{
  border-top:1px solid var(--line-strong);
  padding-top:14px;
  margin-bottom:20px;
}
.news-sec-head h2{
  margin:0;
  font-size:clamp(22px,4.4vw,32px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.01em;
}
.news-sec-head__note{
  margin:10px 0 0;
  max-width:56ch;
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
}
.news-sec-head__note a{
  color:var(--orange-deep);
  text-decoration:none;
  border-bottom:1px solid var(--orange);
}
.news-sec-head__note a:hover{ color:var(--ink); }

.news-highlights{
  display:grid;
  gap:12px;
}
.hl{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 20px;
  border:1px solid var(--line);
  background:var(--white);
  color:inherit;
  text-decoration:none;
  transition:transform .16s var(--ease), border-color .16s var(--ease);
}
.hl:hover,
.hl:focus-visible{
  transform:translateY(-1px);
  border-color:var(--orange);
}
.hl__num{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--orange-deep);
}
.hl h3{
  margin:0;
  font-size:19px;
  line-height:1.35;
  font-weight:700;
}
.hl p{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
}
.hl__more{
  margin-top:auto;
  padding-top:12px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--orange-deep);
}
.hl--dark{
  background:var(--ink);
  border-color:var(--ink);
}
.hl--dark h3{ color:var(--white); }
.hl--dark p{ color:var(--on-dark); }
.hl--dark .hl__num,
.hl--dark .hl__more{ color:var(--orange); }
.hl--sand{
  background:var(--sand);
  border-color:var(--sand);
}

.news-figure{ margin:36px 0 0; }
.page-news .figure__media{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--white);
}
.page-news .figure__media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-news .figure__mark{
  position:absolute;
  right:0;
  bottom:0;
  width:18px;
  height:18px;
  background:var(--orange);
}
.page-news .figure__cap{
  margin-top:10px;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.65;
  color:var(--slate);
}

.news-grid{
  display:grid;
  gap:36px;
  margin-top:48px;
}

.cases__radio{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.cases__filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 4px;
}
.cases__tag{
  padding:9px 14px;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1;
  color:var(--ink-2);
  background:var(--white);
  border:1px solid var(--line-strong);
  cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.cases__tag:hover{
  border-color:var(--orange);
  color:var(--orange-deep);
}
#f-all:checked ~ .cases__filters label[for="f-all"],
#f-mfg:checked ~ .cases__filters label[for="f-mfg"],
#f-cpg:checked ~ .cases__filters label[for="f-cpg"],
#f-pro:checked ~ .cases__filters label[for="f-pro"],
#f-edu:checked ~ .cases__filters label[for="f-edu"]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
#f-all:focus-visible ~ .cases__filters label[for="f-all"],
#f-mfg:focus-visible ~ .cases__filters label[for="f-mfg"],
#f-cpg:focus-visible ~ .cases__filters label[for="f-cpg"],
#f-pro:focus-visible ~ .cases__filters label[for="f-pro"],
#f-edu:focus-visible ~ .cases__filters label[for="f-edu"]{
  outline:2px solid var(--orange);
  outline-offset:2px;
}

#f-mfg:checked ~ .cases__list .case:not([data-ind="mfg"]),
#f-cpg:checked ~ .cases__list .case:not([data-ind="cpg"]),
#f-pro:checked ~ .cases__list .case:not([data-ind="pro"]),
#f-edu:checked ~ .cases__list .case:not([data-ind="edu"]){
  display:none;
}

.cases__list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  border-bottom:1px solid var(--line);
}
.case{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 0;
  border-top:1px solid var(--line);
  transition:background .16s var(--ease);
}
.case:hover{ background:var(--orange-soft); }
.case__media{
  flex:0 0 84px;
  width:84px;
  background:var(--white);
  border:1px solid var(--line);
}
.case__media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.case__body{
  flex:1 1 auto;
  min-width:0;
}
.case__title{
  display:inline;
  margin:0;
  padding-bottom:2px;
  font-size:17px;
  line-height:1.45;
  font-weight:700;
  background-image:linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  transition:background-size .24s var(--ease);
}
.case:hover .case__title{ background-size:100% 2px; }
.case__desc{
  margin:6px 0 0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-2);
}
.case__meta{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin:10px 0 0;
  padding:0;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--slate);
}
.case__meta li{
  position:relative;
  padding-left:10px;
}
.case__meta li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:4px;
  transform:translateY(-50%);
  background:var(--slate-100);
}
.case__meta li:first-child::before{ background:var(--orange); }
.case__flag{ display:none; }

.records{
  border-top:2px solid var(--ink);
  padding-top:14px;
}
.records .news-sec-head{
  border-top:0;
  padding-top:0;
  margin-bottom:16px;
}
.records__list{
  list-style:none;
  position:relative;
  margin:0;
  padding:0;
}
.records__list::before{
  content:"";
  position:absolute;
  left:5px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--line-strong);
}
.rec{
  position:relative;
  padding:0 0 20px 26px;
}
.rec:last-child{ padding-bottom:0; }
.rec::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:11px;
  height:11px;
  background:var(--paper);
  border:1px solid var(--line-strong);
}
.rec--current::before{
  background:var(--orange);
  border-color:var(--orange);
}
.rec:target::before{
  outline:2px solid var(--orange);
  outline-offset:2px;
}
.rec__ver{
  margin:0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--slate);
}
.rec--current .rec__ver{ color:var(--orange-deep); }
.rec__title{
  margin:4px 0 0;
  font-size:16px;
  line-height:1.4;
  font-weight:700;
}
.rec__body{
  margin:6px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-2);
}
.rec__link{
  display:inline-block;
  margin-top:8px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--orange-deep);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
}
.rec__link:hover{
  border-bottom:2px solid var(--orange);
}
.records__sync{
  margin:18px 0 0;
  padding:12px 14px;
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--orange);
  font-size:13px;
  line-height:1.65;
  color:var(--ink-2);
}

.series-block{ margin-top:56px; }
.series-figure{ margin:0 0 24px; }
.series{
  display:grid;
  gap:12px;
}
.series-card{
  background:var(--white);
  border:1px solid var(--line);
}
.series-card[open]{ border-color:var(--line-strong); }
.series-card summary{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px 44px 20px 20px;
  cursor:pointer;
  list-style:none;
}
.series-card summary::-webkit-details-marker{ display:none; }
.series-card summary::after{
  content:"+";
  position:absolute;
  right:18px;
  top:16px;
  font-family:var(--mono);
  font-size:17px;
  color:var(--orange);
}
.series-card[open] summary::after{ content:"−"; }
.series-card summary:hover{ background:var(--orange-soft); }
.series-card__num{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--slate);
}
.series-card__title{
  margin:0;
  font-size:17px;
  line-height:1.4;
  font-weight:700;
  color:var(--ink);
}
.series-card__desc{
  font-size:13.5px;
  line-height:1.65;
  color:var(--slate);
}
.series-card__list{
  margin:0;
  padding:0 20px 20px 40px;
  font-size:14px;
  line-height:1.8;
  color:var(--ink-2);
}
.series-card__list li{ padding:2px 0; }

.news-cta{
  display:grid;
  gap:24px;
  margin-top:56px;
  padding:28px 20px 32px;
  background:var(--ink);
  color:var(--on-dark);
}
.news-cta .eyebrow{ color:var(--orange); }
.news-cta h2{
  margin:6px 0 0;
  font-size:clamp(22px,3.8vw,30px);
  line-height:1.25;
  font-weight:800;
  color:var(--white);
}
.news-cta p{
  max-width:52ch;
  margin:12px 0 0;
  font-size:15px;
  line-height:1.75;
  color:var(--on-dark);
}
.news-cta .news-cta__fine{
  margin-top:14px;
  font-size:13px;
  color:var(--slate-100);
}
.news-cta__fine a{
  color:var(--white);
  text-decoration:none;
  border-bottom:1px solid var(--orange);
}
.news-cta__fine a:hover{ color:var(--orange); }
.news-cta__acts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}
.news-cta__link{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--on-dark);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid var(--line-dark);
}
.news-cta__link:hover{
  color:var(--orange);
  border-bottom-color:var(--orange);
}

@media (max-width:420px){
  .case__media{
    flex:0 0 60px;
    width:60px;
  }
  .case__desc{ font-size:14px; }
}

@media (min-width:820px){
  .series{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width:860px){
  .news-cta{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    align-items:center;
    gap:40px;
    padding:40px;
  }
}

@media (min-width:900px){
  .news-highlights{ grid-template-columns:5fr 4fr 3fr; }
  .hl{ padding:24px 22px; }
  .case__body{ padding-right:92px; }
  .case__flag{
    display:block;
    position:absolute;
    right:0;
    top:20px;
    padding:3px 8px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--orange-deep);
    background:var(--paper);
    border:1px solid var(--orange);
    opacity:0;
    transform:translateX(6px);
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    pointer-events:none;
  }
  .case:hover .case__flag{
    opacity:1;
    transform:none;
  }
}

@media (min-width:960px){
  .news-grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:56px;
    align-items:start;
  }
  .page-news .records{
    position:sticky;
    top:24px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-news *{
    transition:none !important;
    animation:none !important;
  }
  .page-news .hl:hover,
  .page-news .case:hover .case__flag{ transform:none; }
}
<<<END>>>