/* =========================================================
  REDOVAR BLOG
  Developed by Cavendish Pierre-Louis
  https://cavendishpierrelouis.io
========================================================= */








:root {
 --blue: #0B369A;
 --blue-hover: #092F86;




 --terra: #C34811;
 --terra-hover: #A93D0D;




 --black: #111111;
 --text: #171717;




 --muted: #6B6B68;
 --soft: #8B8B86;




 --border: #E7E7E3;




 --surface: #F7F7F5;
 --surface-alt: #F2F2EF;




 --white: #FFFFFF;




 --radius: 4px;




 --max: 1480px;




 --gutter:
   clamp(
     22px,
     4.4vw,
     72px
   );




 --header-h: 76px;




 --ease:
   cubic-bezier(
     .22,
     .61,
     .36,
     1
   );
}








/* =========================================================
  RESET
========================================================= */




*,
*::before,
*::after {
 box-sizing: border-box;
}








html {
 scroll-behavior: smooth;
}








body {
 margin: 0;




 min-width: 320px;




 overflow-x: clip;




 background:
   var(--white);




 color:
   var(--text);




 font-family:
   "Onest",
   "Helvetica Neue",
   Arial,
   sans-serif;




 -webkit-font-smoothing:
   antialiased;




 text-rendering:
   optimizeLegibility;
}








a {
 color: inherit;




 text-decoration: none;
}








button,
input {
 font: inherit;
}








button {
 color: inherit;
}








img {
 display: block;
}








::selection {
 background:
   rgba(
     11,
     54,
     154,
     .14
   );
}








/* =========================================================
  MAIN
========================================================= */




.blog-main {
 margin: 0;




 padding: 0;




 overflow: clip;




 background:
   var(--white);
}








/* =========================================================
  SHELL
========================================================= */




.blog-shell {
 width:
   min(
     100%,
     var(--max)
   );




 margin-inline:
   auto;




 padding-inline:
   var(--gutter);
}








/* =========================================================
  HERO
========================================================= */




.blog-hero {
 position: relative;




 width: 100%;




 min-height: 100svh;




 margin: 0;




 padding:
   var(--header-h)
   0
   0;




 display: flex;




 overflow: hidden;




 background:
   var(--black);




 color:
   var(--white);




 isolation:
   isolate;
}








/* =========================================================
  HERO MEDIA
========================================================= */




.blog-hero-media {
 position: absolute;




 inset: 0;




 z-index: 0;




 overflow: hidden;




 background:
   var(--black);
}








.blog-hero-media img {
 width: 100%;
 height: 100%;




 object-fit:
   cover;




 object-position:
   center;




 transform:
   scale(1.002);
}








/* =========================================================
  HERO OVERLAY
========================================================= */




.blog-hero-overlay {
 position: absolute;




 inset: 0;




 z-index: 1;




 pointer-events: none;




 background:
   linear-gradient(
     90deg,
     rgba(17, 17, 17, .80) 0%,
     rgba(17, 17, 17, .58) 39%,
     rgba(17, 17, 17, .26) 72%,
     rgba(17, 17, 17, .18) 100%
   );
}








/* =========================================================
  HERO INNER
========================================================= */




.blog-hero-inner {
 position: relative;




 z-index: 2;




 min-height:
   calc(
     100svh -
     var(--header-h)
   );




 display: flex;




 align-items: center;




 justify-content: flex-start;




 padding-top:
   clamp(
     48px,
     6vw,
     82px
   );




 padding-bottom:
   clamp(
     58px,
     7vw,
     96px
   );
}








/* =========================================================
  HERO COPY
========================================================= */




.blog-hero-copy {
 width:
   min(
     100%,
     860px
   );
}








/* =========================================================
  HERO STORY LINK
========================================================= */




.blog-hero-story-link {
 display: block;




 width:
   max-content;




 max-width:
   100%;




 color:
   var(--white);
}








/* =========================================================
  HERO TITLE
========================================================= */




.blog-hero h1 {
 width:
   max-content;




 max-width:
   100%;




 margin: 0;




 color:
   var(--white);




 font-size:
   clamp(
     42px,
     4.45vw,
     64px
   );




 line-height:
   .98;




 letter-spacing:
   -.047em;




 font-weight:
   500;




 transition:
   color
   220ms
   ease;
}








.blog-hero h1 span {
 display: block;




 white-space:
   nowrap;
}

.blog-hero h1 .blog-hero-title--mobile,
.blog-hero-summary .blog-hero-summary--mobile {
 display: none;
}








/* =========================================================
  HERO TITLE ACCENT
========================================================= */




.blog-hero h1 em {
 display:
   inline;




 margin:
   0
   0
   0
   .08em;




 color:
   var(--blue);




 font-family:
   "Allura",
   cursive;




 font-size:
   1.08em;




 line-height:
   .88;




 letter-spacing:
   0;




 font-style:
   normal;




 font-weight:
   400;




 white-space:
   nowrap;




 transition:
   color
   220ms
   ease;
}








/* =========================================================
  HERO TEXT HOVER
========================================================= */




.blog-hero-story-link:hover h1,
.blog-hero-story-link:focus-visible h1 {
 color:
   rgba(
     255,
     255,
     255,
     .68
   );
}








.blog-hero-story-link:hover
.blog-hero-summary,




.blog-hero-story-link:focus-visible
.blog-hero-summary {
 color:
   rgba(
     255,
     255,
     255,
     .66
   );
}








.blog-hero-story-link:hover
h1 em,




.blog-hero-story-link:focus-visible
h1 em {
 color:
   #3158AE;
}








/* =========================================================
  HERO SUMMARY
========================================================= */




.blog-hero-summary {
 width:
   min(
     100%,
     640px
   );




 margin:
   27px
   0
   0;




 color:
   rgba(
     255,
     255,
     255,
     .90
   );




 font-size:
   clamp(
     17px,
     1.42vw,
     20px
   );




 line-height:
   1.52;




 letter-spacing:
   -.014em;




 font-weight:
   400;




 transition:
   color
   220ms
   ease;
}








/* =========================================================
  BLOG INDEX
========================================================= */




.blog-index {
 position: relative;




 margin: 0;




 padding:
   clamp(
     88px,
     8vw,
     124px
   )
   0
   clamp(
     120px,
     11vw,
     170px
   );




 background:
   var(--white);
}








/* =========================================================
  INDEX HEADER
========================================================= */




.blog-index-header {
 margin-bottom:
   clamp(
     50px,
     5vw,
     72px
   );




 display: flex;




 align-items: flex-end;




 justify-content: space-between;




 gap:
   44px;
}








.blog-index-header h2 {
 margin: 0;




 color:
   var(--text);




 font-size:
   clamp(
     38px,
     4.1vw,
     56px
   );




 line-height:
   .98;




 letter-spacing:
   -.045em;




 font-weight:
   500;
}








/* =========================================================
  SEARCH
========================================================= */




.blog-search {
 width:
   min(
     100%,
     350px
   );
}








.blog-search-label {
 position: absolute;




 width: 1px;
 height: 1px;




 padding: 0;




 overflow: hidden;




 clip:
   rect(
     0,
     0,
     0,
     0
   );




 white-space:
   nowrap;
}








.blog-search-field {
 width: 100%;




 min-height:
   46px;




 padding:
   0
   11px
   0
   15px;




 display: flex;




 align-items: center;




 gap:
   12px;




 border-radius:
   var(--radius);




 background:
   var(--surface);
}








.blog-search-field input {
 width: 100%;




 min-width: 0;




 padding: 0;




 border: 0;




 outline: 0;




 background:
   transparent;




 color:
   var(--text);




 font-size:
   12px;




 line-height:
   1;




 font-weight:
   450;
}








.blog-search-field input::placeholder {
 color:
   var(--soft);
}








.blog-search-field:focus-within {
 background:
   var(--surface-alt);
}








.blog-search-field kbd {
 margin-left:
   auto;




 min-width:
   40px;




 height:
   26px;




 padding:
   0
   7px;




 display:
   inline-flex;




 align-items:
   center;




 justify-content:
   center;




 border: 0;




 border-radius:
   var(--radius);




 background:
   var(--white);




 color:
   var(--muted);




 font-family:
   inherit;




 font-size:
   9px;




 line-height:
   1;




 font-weight:
   500;
}








/* =========================================================
  FEATURED LAYOUT
========================================================= */




.blog-featured-layout {
 display: grid;




 grid-template-columns:
   minmax(
     0,
     1.15fr
   )
   minmax(
     300px,
     .85fr
   );




 gap:
   clamp(
     38px,
     5vw,
     72px
   );




 align-items:
   start;
}








/* =========================================================
  STICKY LEFT ARTICLE
========================================================= */




.blog-featured-lead {
 position: sticky;




 top:
   calc(
     var(--header-h)
     +
     28px
   );




 align-self:
   start;




 min-width: 0;
}








/* =========================================================
  FEATURED IMAGE
========================================================= */




.blog-featured-image {
 position: relative;




 width: 100%;




 aspect-ratio:
   16 / 9;




 display: block;




 overflow: hidden;




 border-radius:
   var(--radius);




 background:
   var(--surface);
}








.blog-featured-image--large {
 aspect-ratio:
   16 / 10;
}








.blog-featured-image img {
 width: 100%;
 height: 100%;




 object-fit:
   cover;




 object-position:
   center;




 transition:
   transform
   520ms
   var(--ease);
}








.blog-featured-image:hover img,
.blog-featured-image:focus-visible img {
 transform:
   scale(
     1.012
   );
}








/* =========================================================
  ARTICLE META
========================================================= */




.blog-article-meta {
 margin-top:
   15px;




 display: flex;




 align-items: center;




 flex-wrap: wrap;




 gap:
   10px;
}








/* =========================================================
  CATEGORY
========================================================= */




.blog-category {
 display:
   inline-block;




 padding: 0;




 background:
   transparent;




 color:
   var(--blue);




 font-size:
   8.5px;




 line-height:
   1.2;




 font-weight:
   600;




 letter-spacing:
   .055em;




 text-transform:
   uppercase;
}








/* =========================================================
  FEATURED TITLE
========================================================= */




.blog-featured-title {
 max-width:
   680px;




 margin:
   14px
   0
   0;




 color:
   var(--text);




 font-size:
   clamp(
     25px,
     2.35vw,
     34px
   );




 line-height:
   1.1;




 letter-spacing:
   -.033em;




 font-weight:
   500;
}








.blog-featured-title a,
.blog-featured-small h3 a,
.blog-card h3 a {
 transition:
   color
   160ms
   ease;
}








.blog-featured-title a:hover,
.blog-featured-title a:focus-visible,
.blog-featured-small h3 a:hover,
.blog-featured-small h3 a:focus-visible,
.blog-card h3 a:hover,
.blog-card h3 a:focus-visible {
 color:
   var(--blue);
}








/* =========================================================
  FEATURED SUMMARY
========================================================= */




.blog-featured-summary {
 width:
   min(
     100%,
     620px
   );




 margin:
   14px
   0
   0;




 color:
   var(--muted);




 font-size:
   13px;




 line-height:
   1.6;




 letter-spacing:
   -.008em;
}

.blog-featured-summary--mobile {
 display: none;
}








/* =========================================================
  RIGHT FEATURED
========================================================= */




.blog-featured-side {
 display: grid;




 grid-template-columns:
   minmax(
     0,
     1fr
   );




 gap:
   clamp(
     34px,
     3.2vw,
     46px
   );




 align-content:
   start;
}








.blog-featured-small {
 min-width: 0;
}








.blog-featured-small .blog-featured-image {
 aspect-ratio:
   16 / 7.2;
}








.blog-featured-small h3 {
 max-width:
   500px;




 margin:
   12px
   0
   0;




 color:
   var(--text);




 font-size:
   clamp(
     20px,
     1.55vw,
     24px
   );




 line-height:
   1.14;




 letter-spacing:
   -.026em;




 font-weight:
   500;
}








.blog-featured-small > p {
 max-width:
   500px;




 margin:
   10px
   0
   0;




 color:
   var(--muted);




 font-size:
   11.5px;




 line-height:
   1.55;




 letter-spacing:
   -.006em;
}








/* =========================================================
  FILTER SECTION
========================================================= */




.blog-filter-section {
 margin-top:
   clamp(
     108px,
     10vw,
     150px
   );
}








/* =========================================================
  FILTER PANEL
========================================================= */




.blog-filter-panel {
 min-height:
   74px;




 padding:
   0;




 display: flex;




 align-items:
   center;




 justify-content:
   space-between;




 gap:
   28px;




 border-radius:
   0;




 background:
   transparent;
}








.blog-filter-panel h2 {
 flex:
   0
   0
   auto;




 margin: 0;




 color:
   var(--text);




 font-size:
   clamp(
     20px,
     1.7vw,
     25px
   );




 line-height:
   1.1;




 letter-spacing:
   -.028em;




 font-weight:
   500;
}








/* =========================================================
  FILTER BUTTONS
========================================================= */




.blog-filter-buttons {
 display: flex;




 align-items: center;




 justify-content: flex-end;




 flex-wrap: wrap;




 gap:
   7px;
}








.blog-filter-button {
 min-height:
   37px;




 padding:
   0
   15px;




 border: 0;




 border-radius:
   var(--radius);




 background:
   transparent;




 color:
   var(--muted);




 font-size:
   9px;




 line-height:
   1;




 font-weight:
   550;




 letter-spacing:
   .045em;




 text-transform:
   uppercase;




 cursor:
   pointer;




 transition:
   background-color
   160ms
   ease,
   color
   160ms
   ease,
   transform
   160ms
   ease;
}








.blog-filter-button:hover,
.blog-filter-button:focus-visible {
 color:
   var(--blue);




 background:
   rgba(
     11,
     54,
     154,
     .045
   );
}








.blog-filter-button.is-active {
 background:
   rgba(
     11,
     54,
     154,
     .045
   );




 color:
   var(--blue);
}








.blog-filter-button:active {
 transform:
   translateY(
     1px
   );
}








/* =========================================================
  ALL ARTICLES
========================================================= */




.blog-all {
 margin-top:
   clamp(
     68px,
     7vw,
     96px
   );
}








/* =========================================================
  ALL ARTICLES HEADING
========================================================= */




.blog-all-heading {
 margin-bottom:
   30px;




 display: flex;




 align-items:
   baseline;




 justify-content:
   space-between;




 gap:
   28px;
}








.blog-all-heading h2 {
 margin: 0;




 color:
   var(--text);




 font-size:
   clamp(
     25px,
     2.4vw,
     34px
   );




 line-height:
   1;




 letter-spacing:
   -.035em;




 font-weight:
   500;
}








.blog-results-status {
 margin: 0;




 color:
   var(--soft);




 font-size:
   9px;




 line-height:
   1.4;
}








/* =========================================================
  THREE COLUMN ARTICLE GRID
========================================================= */




.blog-grid {
 display: grid;




 grid-template-columns:
   repeat(
     3,
     minmax(
       0,
       1fr
     )
   );




 gap:
   clamp(
     62px,
     6vw,
     90px
   )
   clamp(
     24px,
     3vw,
     40px
   );
}








/* =========================================================
  ARTICLE CARD
========================================================= */




.blog-card {
 min-width: 0;
}








.blog-card[hidden] {
 display: none;
}








.blog-card-image {
 position: relative;




 width: 100%;




 aspect-ratio:
   16 / 9;




 display: block;




 overflow: hidden;




 border-radius:
   var(--radius);




 background:
   var(--surface);
}








.blog-card-image img {
 width: 100%;
 height: 100%;




 object-fit:
   cover;




 object-position:
   center;




 transition:
   transform
   520ms
   var(--ease);
}








.blog-card-image:hover img,
.blog-card-image:focus-visible img {
 transform:
   scale(
     1.012
   );
}








.blog-card h3 {
 max-width:
   100%;




 margin:
   12px
   0
   0;




 color:
   var(--text);




 font-size:
   clamp(
     19px,
     1.55vw,
     24px
   );




 line-height:
   1.16;




 letter-spacing:
   -.026em;




 font-weight:
   500;
}








.blog-card > p {
 max-width:
   100%;




 margin:
   10px
   0
   0;




 color:
   var(--muted);




 font-size:
   11.5px;




 line-height:
   1.6;




 letter-spacing:
   -.005em;
}








/* =========================================================
  EMPTY STATE
========================================================= */




.blog-empty {
 margin-top:
   38px;




 padding:
   50px
   26px;




 border-radius:
   var(--radius);




 background:
   var(--surface);




 text-align:
   center;
}








.blog-empty[hidden] {
 display: none;
}








.blog-empty p {
 margin: 0;




 color:
   var(--muted);




 font-size:
   12px;
}








/* =========================================================
  CTA
========================================================= */




.blog-cta {
 margin: 0;




 padding:
   clamp(
     76px,
     7vw,
     104px
   )
   0;




 background:
   var(--blue);




 color:
   var(--white);
}








/* =========================================================
  CTA INNER
========================================================= */




.blog-cta-inner {
 display: flex;




 align-items:
   flex-end;




 justify-content:
   space-between;




 gap:
   46px;
}








/* =========================================================
  CTA TITLE
========================================================= */




.blog-cta h2 {
 max-width:
   560px;




 margin: 0;




 color:
   var(--white);




 font-size:
   clamp(
     30px,
     3vw,
     43px
   );




 line-height:
   1;




 letter-spacing:
   -.04em;




 font-weight:
   500;
}








.blog-cta h2 span {
 display: block;
}








/* =========================================================
  CTA BUTTON
========================================================= */




.blog-cta a {
 flex:
   0
   0
   auto;




 min-height:
   46px;




 padding:
   0
   21px;




 display:
   inline-flex;




 align-items:
   center;




 justify-content:
   center;




 border-radius:
   var(--radius);




 background:
   var(--white);




 color:
   var(--blue);




 font-size:
   12px;




 line-height:
   1;




 font-weight:
   600;




 transition:
   color
   170ms
   ease,
   transform
   170ms
   ease;
}








.blog-cta a:hover,
.blog-cta a:focus-visible {
 color:
   #2450A8;
}








.blog-cta a:active {
 transform:
   translateY(
     1px
   );
}








/* =========================================================
  REVEAL
========================================================= */




.blog-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}








/* =========================================================
  TABLET
========================================================= */




@media (max-width: 1060px) {




 .blog-featured-layout {
   grid-template-columns:
     minmax(
       0,
       1.05fr
     )
     minmax(
       280px,
       .95fr
     );




   gap:
     38px;
 }








 .blog-featured-side {
   gap:
     34px;
 }








 .blog-featured-small .blog-featured-image {
   aspect-ratio:
     16 / 7.6;
 }








 .blog-filter-panel {
   align-items:
     flex-start;




   flex-direction:
     column;
 }








 .blog-filter-buttons {
   justify-content:
     flex-start;
 }








 .blog-grid {
   grid-template-columns:
     repeat(
       2,
       minmax(
         0,
         1fr
       )
     );
 }




}








/* =========================================================
  MOBILE
========================================================= */




@media (max-width: 760px) {




 .blog-hero {
   min-height:
     100svh;
 }








 .blog-hero-overlay {
   background:
     linear-gradient(
       180deg,
       rgba(17, 17, 17, .58) 0%,
       rgba(17, 17, 17, .56) 58%,
       rgba(17, 17, 17, .70) 100%
     );
 }








 .blog-hero-inner {
   min-height:
     calc(
       100svh -
       var(--header-h)
     );




   align-items:
     center;

   justify-content:
     center;




   padding-top:
     0;




   padding-bottom:
     0;
 }








 .blog-hero-copy {
   width:
     100%;

   text-align:
     center;
 }








 .blog-hero h1 {
   width:
     auto;




   font-size:
     clamp(
       38px,
       10.8vw,
       52px
     );
 }








 .blog-hero h1 span {
   white-space:
     normal;
 }








 .blog-hero h1 em {
   white-space:
     normal;
 }








 .blog-hero-summary {
   width:
     min(
       100%,
       560px
     );




   margin-top:
     24px;




   font-size:
     clamp(
       16px,
       4.25vw,
       18px
     );




   line-height:
     1.52;
 }








 .blog-index-header {
   align-items:
     flex-start;




   flex-direction:
     column;




   gap:
     28px;
 }








 .blog-index-header h2 {
   font-size:
     clamp(
       36px,
       10vw,
       48px
     );
 }








 .blog-search {
   width:
     100%;
 }








 .blog-featured-layout {
   display:
     block;
 }








 .blog-featured-lead {
   position:
     static;




   top:
     auto;
 }








 .blog-featured-side {
   margin-top:
     66px;




   gap:
     58px;
 }








 .blog-featured-small .blog-featured-image {
   aspect-ratio:
     16 / 9;
 }








 .blog-filter-panel {
   gap:
     20px;
 }








 .blog-filter-buttons {
   width:
     100%;




   overflow-x:
     auto;




   flex-wrap:
     nowrap;




   padding-bottom:
     3px;




   scrollbar-width:
     none;




   -webkit-overflow-scrolling:
     touch;
 }








 .blog-filter-buttons::-webkit-scrollbar {
   display:
     none;
 }








 .blog-filter-button {
   flex:
     0
     0
     auto;
 }








 .blog-grid {
   grid-template-columns:
     1fr;




   gap:
     64px;
 }








 .blog-cta-inner {
   align-items:
     flex-start;




   flex-direction:
     column;
 }




}








/* =========================================================
  SMALL MOBILE
========================================================= */




@media (max-width: 480px) {




 .blog-index {
   padding-top:
     76px;




   padding-bottom:
     104px;
 }








 .blog-hero h1 {
   font-size:
     clamp(
       36px,
       10.6vw,
       46px
     );
 }








 .blog-hero-summary {
   font-size:
     16px;




   line-height:
     1.5;
 }








 .blog-featured-title {
   font-size:
     26px;
 }








 .blog-featured-small h3,
 .blog-card h3 {
   font-size:
     21px;
 }








 .blog-filter-section {
   margin-top:
     88px;
 }








 .blog-all {
   margin-top:
     64px;
 }








 .blog-all-heading {
   align-items:
     flex-start;




   flex-direction:
     column;




   gap:
     9px;
 }








 .blog-cta h2 {
   font-size:
     32px;
 }




}

/* Mobile article index: keep the editorial hero singular and compact. */
@media (max-width: 760px) {
  .blog-hero h1 .blog-hero-title--desktop { display: none !important; }
  .blog-hero h1 .blog-hero-title--mobile { display: block !important; }
  .blog-hero-summary .blog-hero-summary--desktop { display: none !important; }
  .blog-hero-summary .blog-hero-summary--mobile { display: inline !important; }

  .blog-featured-title,
  .blog-featured-small h3,
  .blog-card h3 {
    font-size: clamp(18px, 5.2vw, 21px) !important;
    line-height: 1.16 !important;
  }

  .blog-featured-summary,
  .blog-featured-small > p,
  .blog-card > p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .blog-featured-summary--desktop { display: none; }
  .blog-featured-summary--mobile { display: inline; white-space: nowrap; }

  .blog-featured-title,
  .blog-featured-small h3,
  .blog-card h3,
  .blog-featured-summary,
  .blog-featured-small > p,
  .blog-card > p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .blog-filter-buttons {
    justify-content: center;
  }
}








/* =========================================================
  REDUCED MOTION
========================================================= */




@media (prefers-reduced-motion: reduce) {




 html {
   scroll-behavior:
     auto;
 }








 .blog-reveal {
   opacity:
     1;




   transform:
     none;




   transition:
     none;
 }








 .blog-featured-image img,
 .blog-card-image img,
 .blog-hero h1,
 .blog-hero h1 em,
 .blog-hero-summary,
 .blog-cta a,
 .blog-filter-button {
   transition:
     none;
 }




}