/* Article page */
.article-hero{
  width:100%;
  background:#F8F8F8;
  color:var(--ink);
}

.article-hero-inner{
  width:var(--shell);
  margin:auto;
  padding:50px 0 42px;
  text-align:center;
}

.article-date{
  margin:0 0 14px;
  color:rgba(23,34,51,.58);
  font-size:.72rem;
  font-weight:820;
  letter-spacing:.105em;
  line-height:1.2;
  text-transform:uppercase;
}

.article-hero h1{
  max-width:980px;
  margin:0 auto;
  color:var(--ink);
  font-size:clamp(3.4rem,3vw,7rem);
  font-weight:750;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.article-dek{
  max-width:720px;
  margin:22px auto 0;
  color:rgba(23,34,51,.72);
  font-size:1.2rem;
  line-height:1.55;
}

.article-hero-image{
  width:100%;
  margin-top:38px;
  overflow:hidden;
  background:#dde2e7;
}

.article-hero-image img{
  width:100%;
  aspect-ratio:16/8.5;
  object-fit:cover;
}


/* Article body */
.article-body{
  width:100%;
  background:#F8F8F8;
  color:var(--ink);
  padding:10px 0 90px;
  font-family:"Inter",Arial,sans-serif;
}

.article-body-inner{
  width:min(780px,calc(100% - 40px));
  margin:auto;
}

.article-body p{
  margin:0 0 1.55em;
  font-size:1.08rem;
  line-height:1.76;
}

.article-body h2{
  margin:1em 0 .5em;
  font-size:clamp(1.75rem,3vw,2.5rem);
  text-transform:uppercase;
  font-weight:750;
  line-height:1;
  letter-spacing:-.035em;
  font-family:"Google Sans Flex","Inter",sans-serif;
}

.article-body h3{
  margin:1.9em 0 .65em;
  font-size:1.35rem;
  font-weight:760;
  line-height:1.15;
  letter-spacing:-.02em;
}


/* Article sections */
.article-section{
  margin-top:72px;
}

.article-section + .article-section{
  padding-top:68px;
  border-top:1px solid rgba(23,34,51,.12);
}

.article-section-label{
  margin-bottom:15px;
  color:rgba(23,34,51,.52);
  font-family:"Google Sans Flex","Inter",sans-serif;
  font-size:.7rem;
  font-weight:820;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.article-section h2{
  margin-top:0;
}


/* Article facts */
.article-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:26px;
  border-top:1px solid rgba(23,34,51,.14);
}

.article-fact{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:17px 0 18px;
  border-bottom:1px solid rgba(23,34,51,.14);
}

.article-fact:nth-child(odd){
  padding-right:24px;
}

.article-fact:nth-child(even){
  padding-left:24px;
  border-left:1px solid rgba(23,34,51,.14);
}

.article-fact-label{
  color:rgba(23,34,51,.48);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}

.article-fact-value{
  color:var(--ink);
  font-size:1rem;
  font-weight:650;
  line-height:1.4;
}


/* Article trivia */
.article-body .article-trivia{
  margin:24px 0 0;
  padding:0;
  list-style:none;
}

.article-body .article-trivia li{
  position:relative;
  margin:0;
  padding:15px 0 15px 25px;
  border-bottom:1px solid rgba(23,34,51,.11);
  list-style:none;
  font-size:1rem;
  line-height:1.6;
}

.article-body .article-trivia li:first-child{
  border-top:1px solid rgba(23,34,51,.11);
}

.article-body .article-trivia li::before{
  content:"";
  position:absolute;
  top:24px;
  left:2px;
  display:block;
  width:7px;
  height:7px;
  background:#2563a8;
  transform:rotate(-8deg);
}


/* Article links */
.article-body a:not(.article-back){
  color:#2563a8;
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  transition:
    color .25s ease,
    background-size .35s cubic-bezier(.2,.8,.2,1);
}

.article-body a:not(.article-back):hover,
.article-body a:not(.article-back):focus-visible{
  color:#000;
  background-size:100% 2px;
}


/* Blockquotes */
.article-body blockquote{
  margin:1.8em 2em;
  padding:2px 0 2px 20px;
  border-left:4px solid var(--yellow);
  color:rgba(23,34,51,.72);
  font-size:1.1rem;
  line-height:1.65;
}


/* Figures */
.article-body figure{
  margin:2.5em 0;
}

.article-body figure img{
  width:100%;
}

.article-body figcaption{
  margin-top:9px;
  color:rgba(23,34,51,.56);
  font-size:.74rem;
  line-height:1.45;
}


/* Article video */
.article-video{
  width:100%;
  margin:2.5em 0;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#000;
}

.article-video iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}


/* Article divider */
.article-divider{
  width:100%;
  height:1px;
  margin:42px 0;
  background:rgba(23,34,51,.12);
}


/* Back button */
.article-back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  position:relative;
  margin-top:14px;
  padding:12px 18px 11px;
  background:#eadb8f;
  color:rgba(23,34,51,.82);
  font-family:"Google Sans Flex","Inter",sans-serif;
  font-size:.76rem;
  font-weight:820;
  line-height:1;
  letter-spacing:.075em;
  text-transform:uppercase;
  text-decoration:none;
  clip-path:polygon(
    0 7%,7% 2%,15% 5%,24% 1%,34% 4%,44% 0,
    55% 4%,65% 1%,76% 5%,87% 2%,100% 6%,
    98% 22%,100% 38%,98% 54%,100% 70%,98% 86%,100% 96%,
    89% 99%,78% 96%,67% 100%,56% 97%,45% 100%,
    34% 96%,23% 99%,12% 96%,1% 100%,
    2% 83%,0 66%,2% 49%,0 32%,2% 17%
  );
}

.article-body .article-back{
  text-decoration:none;
  background-image:none;
}

.article-back-chevron{
  width:14px;
  height:14px;
  flex:0 0 14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.article-back::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:8px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.article-back:hover{
  color:rgba(23,34,51,.82);
}

.article-back:hover::after,
.article-back:focus-visible::after{
  transform:scaleX(1);
}


/* Marker */
.marker{
  display:inline;
  padding:.10em .28em .14em;
  margin:0 -.02em;
  background:
    linear-gradient(
      177deg,
      transparent 0%,
      transparent 5%,
      rgba(116,181,232,.20) 7%,
      rgba(126,190,238,.29) 14%,
      rgba(118,184,234,.27) 48%,
      rgba(132,194,239,.29) 76%,
      rgba(110,176,228,.20) 94%,
      transparent 97%
    );
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  border-radius:.12em .22em .16em .1em;
}


/* Article gallery */
.article-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:2.3em 0 2.6em;
  overflow:hidden;
}

/* Automatically adapt gallery layout to image count */
.article-gallery:has(> img:only-child){
  grid-template-columns:1fr;
}

.article-gallery:has(> img:nth-child(2):last-child){
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.article-gallery:has(> img:nth-child(4)){
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.article-gallery img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  cursor:pointer;
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease;
}

.article-gallery img:hover{
  transform:scale(1.035);
}

.article-gallery img:focus-visible{
  outline:2px solid #2563a8;
  outline-offset:-2px;
}


/* Gallery lightbox */
body.gallery-open{
  overflow:hidden;
}

.article-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 90px;
  background:rgba(10,13,20,.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}

.article-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.article-lightbox-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.article-lightbox-image{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 130px);
  width:auto;
  height:auto;
  object-fit:contain;
}

.article-lightbox-caption{
  max-width:720px;
  margin-top:16px;
  padding:0 20px;
  color:rgba(255,255,255,.9);
  font-family:"Inter",Arial,sans-serif;
  font-size:.9rem;
  font-weight:500;
  line-height:1.5;
  text-align:center;
}

.article-lightbox-caption:empty{
  display:none;
}

.article-lightbox-count{
  margin-top:7px;
  color:rgba(255,255,255,.55);
  font-family:"Inter",Arial,sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
}

.article-lightbox-close,
.article-lightbox-nav{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:none;
  color:#fff;
  cursor:pointer;
}

.article-lightbox-close{
  top:24px;
  right:28px;
  width:38px;
  height:38px;
}

.article-lightbox-close svg{
  width:25px;
  height:25px;
}

.article-lightbox-nav{
  top:50%;
  width:52px;
  height:72px;
  transform:translateY(-50%);
}

.article-lightbox-prev{
  left:20px;
}

.article-lightbox-next{
  right:20px;
}

.article-lightbox-nav svg{
  width:30px;
  height:30px;
}

.article-lightbox svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.article-lightbox-close:hover,
.article-lightbox-nav:hover{
  opacity:.65;
}


/* Mobile */
@media(max-width:760px){

  .article-hero-inner{
    padding:44px 0 28px;
  }

  .article-hero h1{
    font-size:clamp(2rem,9vw,3.5rem);
  }

  .article-dek{
    font-size:1rem;
  }

  .article-hero-image{
    margin-top:28px;
  }

  .article-hero-image img{
    aspect-ratio:16/10;
  }

  .article-body{
    padding:6px 0 68px;
  }

  .article-body p{
    font-size:1.02rem;
    line-height:1.72;
  }


  /* Article sections */
  .article-section{
    margin-top:54px;
  }

  .article-section + .article-section{
    padding-top:50px;
  }


  /* Article facts */
  .article-facts{
    grid-template-columns:1fr;
  }

  .article-fact,
  .article-fact:nth-child(odd),
  .article-fact:nth-child(even){
    padding:14px 0 15px;
    border-left:0;
  }


  /* Blockquotes */
  .article-body blockquote{
    margin:1.6em 1em;
    padding-left:16px;
    font-size:.98rem;
    line-height:1.6;
  }


/* Article gallery */
  .article-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin:2em 0 2.2em;
  }

  /* One image only: full width */
  .article-gallery:has(> img:only-child){
    grid-template-columns:1fr;
  }

  /* Reset placement and keep every thumbnail 16:9 */
  .article-gallery > img{
    grid-column:auto;
    aspect-ratio:16/9;
  }

  /* Odd number of images: final image fills the last row */
  .article-gallery > img:last-child:nth-child(odd){
    grid-column:1 / -1;
  }


  /* Gallery lightbox */
  .article-lightbox{
    padding:62px 14px 50px;
  }

  .article-lightbox-image{
    max-height:calc(100vh - 125px);
  }

  .article-lightbox-close{
    top:14px;
    right:14px;
  }

  .article-lightbox-nav{
    top:auto;
    bottom:8px;
    width:48px;
    height:48px;
    transform:none;
  }

  .article-lightbox-prev{
    left:calc(50% - 62px);
  }

  .article-lightbox-next{
    right:calc(50% - 62px);
  }

}

/* Article date and copy-link control */
.article-date-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 0 14px;
}
.article-date-row .article-date{margin:0;}
.article-share{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:0;
  background:transparent;
  padding:4px;
  color:rgba(23,34,51,.58);
  font:700 .72rem "Inter",Arial,sans-serif;
  cursor:pointer;
  border-radius:5px;
  transition:color .15s ease,background .15s ease;
}
.article-share:hover,.article-share:focus-visible{
  color:var(--ink);
  background:rgba(23,34,51,.07);
}
.article-share:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.article-share svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.article-share-label:empty{display:none;}