:root {
    --font-main: "TimesNewerRoman", TimesNewerRoman;
}

/* ------------------------- FONTS -------------------------- */

@font-face {
    font-family: "TimesNewerRoman";
    src:
        url("fonts/TimesNewerRoman-Regular.woff2") format("woff2"),
        url("fonts/TimesNewerRoman-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TimesNewerRoman";
    src:
        url("fonts/TimesNewerRoman-Regular.woff2") format("woff2"),
        url("fonts/TimesNewerRoman-Regular.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "TimesNewerRoman";
    src:
        url("fonts/TimesNewerRoman-Bold.woff2") format("woff2"),
        url("fonts/TimesNewerRoman-Bold.woff") format("woff");
    font-weight: 400;
    font-style: bold;
    font-display: swap;
}
/* ------------------------- BASE -------------------------- */
* {
    box-sizing: border-box;
}

html {
    animation: fadein 0.6s ease forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    margin: 0;
    padding: 24px;
    font-family: "TimesNewerRoman-Regular";
    font-size: 12px;
    line-height: 1.55;
    color: #000;
    background: #fff;


    /* CENTER ALL TEXT */
    text-align: center;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.site {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ------------------------- FEATURE -------------------------*/
.featured-line {
    text-align: left;
    font-size: 13px;
}

.featured-line .title {
    font-style: italic;
}

.featured-line .desc {
    color: #555;
    margin-left: 6px;
}


/* ------------------------- HEADER -------------------------- */
header {
    display: flex;
    font-family: 'Times New Roman-Regular';
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 40px;
}

nav a {
    margin-left: 18px;
    font-size: 13px;
    opacity: 0.6;
}

nav a:hover,
nav a:focus {
    opacity: 1;
}

/* ------------------------- FEATURED -------------------------- */
details.featured {
    margin-bottom: 48px;
    cursor: pointer;
}

details summary {
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

.featured h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    text-align: left;
}

.featured p,
.featured-content {
    font-size: 13px;
}

.featured-content {
    margin-top: 12px;
    color: #333;
}

/* ------------------------- NEWS -------------------------- */
.section-title {
    font-size: 13px;
    margin-bottom: 12px;
}

.news-item {
    margin-bottom: 18px;
    padding: 6px 0;
    cursor: pointer;
    outline: none;
}

.news-item h4,
.news-item h5 {
    font-family: "TimesNewerRoman-Italic";
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 2px;
}


.news-item h5 {
    margin-top: 10px;
}

.news-item h4 {
    cursor: pointer;
    outline: none;
}

.news-item h4:hover {
    text-decoration: underline;
}

.news-item h3 {
    margin-top: 100px;
    font-size: 35px;
    font-weight: 400;
    margin-bottom: -20px;
}

.news-item span {
    font-size: 20px;
    color: #000;
}

/* ------------------------- WORD COLUMNS -------------------------- */
.word-columns {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin: 16px auto 0 auto;
    margin-top: 40px;
    margin-bottom: 35px;
}

.word-columns ul {
    list-style: none;
    padding: 0;
    font-size: 12px;
    text-align: center;
}

.word-columns li {
    margin-bottom: 4px;
    white-space: nowrap;
}

.news-item:focus-within .word-columns {
    max-height: 500px;
    opacity: 1;
    transform: translateX(0);
}

/* ------------------------- HIDE CHECKBOX -------------------------- */
.preview-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ------------------------- LABEL = CLICK TARGET -------------------------- */
.preview-label {
    display: inline-block;
    cursor: pointer;

}

.preview-label h4:hover {
    text-decoration: underline;
}

/* ------------------------- PREVIEW CLOSED -------------------------- */
.preview {
    max-height: 0;
    overflow: hidden;
    max-width: 50ch;
    margin: 12px auto 0;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(-12px);
    transition: max-height 0.6s ease, opacity 0.4s ease, transform 0.6s ease;
    text-align: left;
    /* <-- add this */
}

.preview-3,
.preview-7,
.preview-16,
.preview-17,
.preview-21 {
    max-height: 0;
    overflow: hidden;
    max-width: 50ch;
    margin: 12px auto 0;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(-12px);
    transition: max-height 0.6s ease, opacity 0.4s ease, transform 0.6s ease;
    text-align: center;
    /* <-- add this */
}

.preview-3 {
    text-align: center;
    margin-top: 30px;
    /* higher top margin only for preview-3 */

}


.preview-label h4 {
    display: inline-block;
    /* required for transform */
    transition: transform 0.4s ease;
    transform-origin: center center;
}

/* ------------------------- PREVIEW OPEN -------------------------- */
.preview-toggle:checked+label+.preview {
    max-height: 2000px;
    /* expand */
    max-width: 50ch;
    margin: 12px auto 0;
    line-height: 1.6;
    font-size: 12px;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.4s ease, transform 0.6s ease;
    text-align: left;
    /* default for all previews */
}

#preview-3:checked+.preview-label+.preview .preview-inner-3,
#preview-4:checked+.preview-label+.preview .preview-inner-4,
#preview-7:checked+.preview-label+.preview,
#preview-16:checked+.preview-label+.preview,
#preview-17:checked+.preview-label+.preview,
#preview-21:checked+.preview-label+.preview {
    text-align: center;
}

/*----------------- PREV--1 */
.preview-label-1 h4:hover,
#preview-1:checked + .preview-label-1 h4 {
    transform: rotate(5deg);
    margin-bottom:-15px;
    margin-right:-200px;
    text-decoration: underline;
}

.preview-label-1 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--2 */
.preview-label-2 h4:hover,
#preview-2:checked + .preview-label-2 h4 {
    transform: rotate(-3deg);
    margin-bottom:-10px;
    margin-right:100px;
    text-decoration: underline;
}

.preview-label-2 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--3 */
.preview-label-3 h4:hover,
#preview-3:checked+.preview-label-3 h4 {
    transform: rotate(10deg);
    transition: transform 0.5s ease-in-out, margin-left 0.3s ease-in-out;
    margin-bottom:-42px;
    margin-left: 50px;
    text-decoration: underline;
}

.preview-label-3 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    
    text-decoration: none;
}

#preview-3:checked+.preview-label-3+.preview .preview-inner-3 {
    text-align: center;
    margin-top: 30px;
    /* higher top margin only for preview-3 */
}

/*----------------- PREV--4 */
.preview-label-4 h4:hover,
#preview-4:checked + .preview-label-4 h4 {
    transform: rotate(2deg);
    margin-left: -50px;
    margin-bottom: -12px;
    text-decoration: underline;
}

.preview-label-4 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--5 */
.preview-label-5 h4:hover,
#preview-5:checked + .preview-label-5 h4 {
    transform: rotate(-5deg);
    margin-left: -65px;
    text-decoration: underline;
    margin-bottom: -8px;
}

.preview-label-5 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--6 */
.preview-label-6 h4:hover,
#preview-6:checked + .preview-label-6 h4 {
    margin-left: -50px;
    letter-spacing: -0.5ch;
  margin-bottom: -12px;
    text-decoration: underline;
}

.preview-label-5 h4 {
    transition: letter-spacing 4s ease-in-out, margin-bottom 0.6s ease-in-out;
    margin-left: 0; /* initial state */
}

/*----------------- PREV--7 */
.preview-label-7 h4:hover,
#preview-7:checked+.preview-label-7 h4 {
    transform: rotate(20deg);
    letter-spacing: 2cap;
    transition: transform 0.8s ease-in-out, letter-spacing 0.1s ease-in-out;
    text-decoration: underline;
}

.preview-label-7 h4 {
    transition: transform 0.8s ease-in-out, letter-spacing 0.1s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

#preview-7:checked+.preview-label-7 +.preview .preview-inner-7 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: -50px;;
    /* higher top margin only for preview-3 */
}

/*----------------- PREV--8 */
.preview-label-8 h4:hover,
#preview-8:checked + .preview-label-8 h4 {
    margin-left: -150px;
    transform: rotate(-10deg);
    margin-bottom: -5px;
    text-decoration: underline;
}

.preview-label-8 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--9 */
.preview-label-9 h4:hover,
#preview-9:checked + .preview-label-9 h4 {
    margin-left: 80px;
    transform: rotate(5deg);
  margin-bottom: -12px;
    text-decoration: underline;
}

.preview-label-8 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--10 */
.preview-label-10 h4:hover,
#preview-10:checked + .preview-label-10 h4 {
    margin-left: 80px;
    transform: rotate(-5deg);
    margin-bottom: -10px;
    text-decoration: underline;
}

.preview-label-10 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}
/*----------------- PREV--11 */
.preview-label-11 h4:hover,
#preview-11:checked + .preview-label-11 h4 {
    margin-left: -80px;
margin-bottom: -5px;
    transform: rotate(5deg);
    text-decoration: underline;
}

.preview-label-10 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--12 */
.preview-label-12 h4:hover,
#preview-12:checked + .preview-label-12 h4 {
    margin-left: -190px;
    transform: rotate(-5deg);
    margin-bottom: -15px;
    text-decoration: underline;
}

.preview-label-12 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--13 */
.preview-label-13 h4:hover,
#preview-13:checked + .preview-label-13 h4 {
    margin-left: -150px;
    transform: rotate(5deg);
    margin-bottom: -10px;
    text-decoration: underline;
}

.preview-label-13 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--14 */
.preview-label-14 h4:hover,
#preview-14:checked + .preview-label-14 h4 {
    margin-left: 210px;
    transform: rotate(10deg);
    margin-bottom: -1px;
    text-decoration: underline;
}

.preview-label-14 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--15 */
.preview-label-15 h4:hover,
#preview-15:checked + .preview-label-15 h4 {
    margin-left: -50px;
    transform: rotate(5deg);
    margin-bottom: -16px;
    text-decoration: underline;
}

.preview-label-15 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--16 */
.preview-label-16 h4:hover,
#preview-16:checked + .preview-label-16 h4 {
    margin-left: -20px;
    transform: rotate(-5deg);
    
    margin-bottom: -18px;
    text-decoration: underline;
}

.preview-label-16 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--17 */
.preview-label-17 h4:hover,
#preview-17:checked + .preview-label-17 h4 {
    margin-left: -50px;
    transform: rotate(-5deg);
    letter-spacing:20ch;
   
    text-decoration: underline;
}

.preview-label-17 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

#preview-3:checked+.preview-label-3+.preview .preview-inner-3 {
    text-align: center;
    margin-top: 30px;
    /* higher top margin only for preview-3 */
}


/*----------------- PREV--18 */
.preview-label-18 h4:hover,
#preview-18:checked + .preview-label-18 h4 {
    margin-left: 10px;
    transform: rotate(5deg);
    margin-bottom: -10px;
    text-decoration: underline;
}

.preview-label-18 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--19 */
.preview-label-19 h4:hover,
#preview-19:checked + .preview-label-19 h4 {
    margin-left: -250px;
    transform: rotate(-5deg);
    margin-bottom: -17px;
    text-decoration: underline;
}

.preview-label-19 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--20 */
.preview-label-20 h4:hover,
#preview-20:checked + .preview-label-20 h4 {
    margin-left: -80px;
    transform: rotate(5deg);
    margin-bottom: -10px;
    text-decoration: underline;
}

.preview-label-20 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}

/*----------------- PREV--21 */
.preview-label-21 h4:hover,
#preview-21:checked + .preview-label-21 h4 {
    margin-left: 150px;
    transform: rotate(5deg);
    letter-spacing: 2cap;
    margin-bottom: -20px;
    text-decoration: underline;
}

.preview-label-21 h4 {
    transition: transform 0.6s ease-in-out, margin-left 0.6s ease-in-out;
    margin-left: 0; /* initial state */
    text-decoration: none;
}




/* PREV--OTHERS*/
.preview-label h4:hover,
.preview-toggle:checked+.preview-label h4 {
    transform: rotate(5deg);
    transition: transform 0.4s ease-in-out;
    text-decoration: underline;
}

/* ------------------------- FOOTER -------------------------- */
footer {
    margin-top: 320px;
    font-size: 12px;
    color: #555;
}