@font-face {
    font-family: 'franklin-gothic';
    src: url('fonts/FranklinGothic-Condensed.woff2') format('woff2'),
         url('fonts/FranklinGothic-Condensed.woff') format('woff'),
         url('fonts/FranklinGothic-Condensed.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'century-old-style';
    src: url('fonts/CenturyOldStyle-Regular.woff2') format('woff2'),
         url('fonts/CenturyOldStyle-Regular.woff') format('woff'),
         url('fonts/CenturyOldStyle-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'century-old-style';
    src: url('fonts/CenturyOldStyle-Bold.woff2') format('woff2'),
         url('fonts/CenturyOldStyle-Bold.woff') format('woff'),
         url('fonts/CenturyOldStyle-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    }
@font-face {
    font-family: 'century-old-style';
    src: url('fonts/CenturyOldStyle-Italic.woff2') format('woff2'),
         url('fonts/CenturyOldStyle-Italic.woff') format('woff'),
         url('fonts/CenturyOldStyle-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    }

:root {
    --wdcd-red: #ff0000; /* global scope */
    --wdcd-yellow: #ffee00;
    --wdcd-black: #000000;
    --wdcd-white: #ffffff;
    --wdcd-franklin: franklin-gothic, sans-serif;
    --wdcd-century-old-style: century-old-style, serif;
    --closed-height: 65px;
    --article-opened-translate: translateY(10px);
}
figure {
    margin: 0;
}
body {
    margin: 0;
    min-height:100vh;
    background-color: #fff;
}
main {
    flex: 1;}
p {
    font-family: var(--wdcd-century-old-style);
    font-size: 20px;
    line-height: 1.4;   
    color: var(--wdcd-black);
    margin:5px 0 25px 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--wdcd-franklin);
    margin-top: 0;
    text-transform: uppercase;
    line-height: 0.9;
}
h1 {
    font-size: 130px;
    color: var(--wdcd-red);
    margin-bottom:40px;
}
h2 {
    font-size: 65px;
}
h3 {
    font-size: 32px;
}
h4 {
    font-size: 25px;
    margin: 25px 0 5px 0;
}
h5 {
    font-size: 20px;
    color: var(--wdcd-black);   
}
.article-section h2 {
    margin-bottom: 3px;
}

.logo {
    max-width: 400px;
    height: auto;
    margin:20px auto 20px auto;

}
.chapters {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    bottom: 0;
}

.chapter {
    position: relative;
    max-width: 100%;
    background-color: var(--chapter-color);
    overflow: hidden;
    transition: transform 0.3s ease, max-height 1s ease;
    max-height:65px;
    padding:45px;
    border-radius: 30px 30px 0 0; 
}
.chapter {
  opacity: 0;
  transform: translateY(5rem);
}

/* once visible */
.chapter.visible {
  opacity: 1;
  transform: translateY(0);
}


.chapter:not(:first-child) {
  margin-top: -5rem; /* overlap amount */
}


.chapter:hover {
    transform: translateY(-3rem);
}
.chapter:last-of-type:hover {
    transform: translateY(2rem);
    cursor: pointer;

}
.chapter-header:hover {
    cursor: pointer;
}


.chapter:has(.chapter-toggle:checked):hover {
  transform: none; /* or whatever the default is */
  cursor:default;
}
.chapter-content {
    margin-bottom:7rem;
}
.article-body {
    background-color: var(--chapter-color);
    display: block;
}
.home-body {
    margin: 0;
    display:flex;
    flex-direction: column;
}
.article-section {
    background-color:#fff;
    padding: 90px;
    border-radius: 0px 30px 30px 30px;
}

.articles {
    padding:0;
    margin-bottom:30px;
}
.article {
    display:inline-block;
    margin:20px 20px 0px 0px;
    transition:transform 0.3s ease;
    transform: translateY(-10px)
}
.openedArt {
    transform: translateY(10px);
}
.article-button{
    border-radius: 20px 20px 0 0;
    padding:20px 20px 15px 20px;
    background-color:#fff;
    margin: 0 10px 0 0;
}
.article.openedArt:hover {
   transform: translateY(10px);
}
.article:hover {
   transform: translateY(5px);
}
li.article-content {
    list-style: none;
    overflow:hidden;
    background-color:#fff;
    max-height: 0;            /* collapsed by default */
    transition: max-height 2s ease, opacity 0.4s ease;
    margin-bottom:20px;
    opacity:0;
    padding: 10px;
}
.article-inner-content{
    padding:60px;
}
li.article-content.open {
    /* max-height:90000px;  */
    overflow:visible;
    opacity:1;
}

.article a {
    text-decoration: none;
    color: var(--wdcd-black);
    font-family: var(--wdcd-franklin);
    font-size:32px;
    color:black;
    text-transform: uppercase;
}

.sibling-articles {
    margin-top: 50px;
}

.grid {
    display:flex;
    gap: 20px;
}
.column {
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    flex:var(--span);
}
.has-padding {
    padding: 30px;
}
.single-image {
    width:100%;

}

.single-image-box {
    margin: auto auto 20px auto;
    max-width: var(--maxwidth);
}

[data-image-align="left"] {
    float: left;
    margin-right: 20px;
}
[data-image-align="center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
[data-image-align="right"] {
    float: right;
    margin-left: 20px;
}

.boxed {
    background-color: #e7e7e7;
    padding:10px;
    overflow: hidden;
    margin-bottom:20px;
}

.single-image-box figcaption {
    font-family: var(--wdcd-century-old-style);
    font-style:italic;
    margin-top:5px
}
.featured-image {
    overflow:hidden;
    margin-bottom:50px;
}
.featured-image>.single-image {
    aspect-ratio:16/9;
    object-fit: cover;
}
.site-info {
    padding: 20px 90px 90px 90px;
}
.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap; 
    gap: 20px;
}
.gallery-image {
    flex: 1 1 0;            
    width: 100%;             
    height: auto;            
    object-fit: cover; 
    align-self:flex-start;
}
.gallery-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.gallery-image figure {
    margin: 0;
}
.carousel-box {
    overflow:hidden;
}
img.glightbox {
  cursor: zoom-in; 
}


img.glightbox:hover {
  transform: scale(0.99);
  transition: transform 0.3s;
}
/* article quoate design */
blockquote {
    font-family: var(--wdcd-century-old-style);
    border-left: 4px solid var(--wdcd-red);
    margin: 0;
    padding-left: 15px;
    color: var(--wdcd-black);
    font-style: italic;
    font-size: 30px;
    line-height: 1.4;
    margin:25px 0 45px 0;
}
blockquote footer {
    font-size: 18px;
    text-align: right;
    margin-top: 10px;
}

/* article loading feedback */
.loading {
    font-family: var(--wdcd-franklin) ;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: rgba(255,255,255,0.8);
    z-index: 10;
}

.loading::after {
  content: '';
  width: 2em;
  height: 2em;
  border: 3px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* carousel layouting */
.carousel {
    position: relative;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    flex: 0 0 100%;
    position: relative;
    margin:0;
}

.carousel-slide img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.carousel-slide figcaption {
    font-family: var(--wdcd-century-old-style);
    font-style: italic;
    font-size:18px;
    margin-top:10px;
    font-size: 20px;
    line-height: 1.5;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 12px 20px 15px 20px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 2;
    border-radius:7px;
}

.carousel-prev { left: 20px; }
.carousel-next { right:20px; }

.carousel-caption {
    text-align: center;
    margin: 10px auto 0 auto;
    font-style: italic;
    color: #555;
}

@media screen and (max-width: 768px) {
    .article-section {
        padding: 30px;
        border-radius: 0px 0px 0px 0px;
    }
    .chapter {
        padding: 30px 0 30px 0;
        max-height:40px;
    }
    .site-info {
        padding: 20px;
    }
    h1 {
        font-size: 80px;
        margin-bottom:20px;
    }
    .article-title  {
        font-size: 40px;
    }
    h2 {
        font-size: 40px;
    }
    h3 {
        font-size: 25px;
    }
    blockquote {
        font-size:20px;
    }
    .article a {
        font-size:25px;
    }
    .grid {
        display:block;
    }

    .article-inner-content{
        padding:10px;
    }
    .logo {
        max-width:250px;
        margin:20px auto 10px auto;
    }
    .chapter {
    --closed-height: 40px;
    }
    .chapter:not(:first-child) {
    margin-top: -1.8rem; /* overlap amount */
    }
    .gallery {
        display:block;
    }
    .has-padding {
        padding: 10px;
    }
    .chapter-title {
        margin:0 30px 0 30px;
    }
    .chapter-content {
        margin: 0 10px;
    }
    .article  {
        --article-opened-translate: translateY(10px);
    }
    .chapter-description {
        margin:0 10px;
    }
    .carousel-slide figcaption {
        font-size: 15px;
    }
    .chapter:hover {
        transform: translateY(0rem);  
    }
    .article:hover {
    transform: translateY(0px);
    }
    .chapter:last-of-type:hover {
    transform: translateY(0rem);
}
}

body:after{
  content: "beta";
  position: fixed;
  width: 80px;
  height: 25px;
  background: #ff0000;
  top: 7px;
  left: -20px;
  text-align: center;
  font-size: 13px;
  font-family: var(--wdcd-franklin);
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  line-height: 27px;
  transform:rotate(-45deg);
}
.video-block * {
    width:100%;
    aspect-ratio:16/9;
}