/* --- Newspaper Layout Engine --- */
#textile-newspaper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fcfbf9;
    color: #2c2c2c;
}

.newspaper-header {   
    /* border-bottom: 3px double #333;   Double line under title */
    margin-bottom: 5px; 
}

.newspaper-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;   
    color:#666;
    text-align: left;   
    margin: 0;
}

.edition-date {
    font-family: 'lora', arial, helvetica, arial, serif;   
    color: #555;
	font-size:1.2em;
    margin-top: 5px;
    margin-bottom:20px;
    line-height:1.45em;
    text-align:justify;
}
/* --- The Asymmetrical Layout Wrapper --- */
.newspaper-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Aligns top of columns */
    gap: 80px; /* Gap between the Left 50% and Right 50% */
    width: 100%;  
    margin-top:10px;
}

/* 1. The Left Column (Featured) */
.column-featured {
    flex: 1; /* Takes up 1 share of space */
    width: 50%; /* Explicit width to be safe */
    /* Items stack vertically here, one by one */
    display: flex;
    flex-direction: column;
    gap: 40px; 
}
/* Optional: Make text in the featured column slightly larger */
.featured-item p {
    font-size: 1.15rem; 
}
/* 2. The Right Section (The Collection) */
.column-collection {
    flex: 1; /* Takes up equal space to the featured column (the other 50%) */
    width: 50%;  
    /* This creates the two 25% columns inside the right half */
    column-count: 2; 
    column-gap: 60px; 
    column-rule: 1px solid #e0e0e0; /* Optional vertical line between the small cols */
}

/* Ensure items don't get cut in half in the right columns */
.column-collection .news-item {
    break-inside: avoid;
    display: inline-block; /* Essential for column-count stability */
    width: 100%;
    margin-bottom: 30px;
}

/* Individual Article Card */
.news-item {
    break-inside: avoid; /* Prevents item from being cut in half by a column break */
    margin-bottom: 40px; /* Space between items vertically */
    display: inline-block; /* Helps with column breaking stability */
    width: 100%;
}

/* Typography & Visuals */
.news-item img {
    width: 100%;
    height: auto;
    display: block;
}
.news-item figure {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}
figure > .framedDG {
    border:0.34rem solid #373535; 
}
figure > .framedBK {
    border:0.8rem solid #000; 
}
figure > .framedGrey {
    border:0.4rem solid #ececec; 
}
.news-item figcaption {
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    font-style: italic;
    color: #555;
    margin-top: 5px;
    text-align: right;
}

.news-content {
    padding: 15px 0;
}

.news-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin: 10px 0 5px 0;
    line-height: 1.1;
    color:#444444;
}

/* The Specs List (Date, Material, etc.) */
.artwork-specs {
    list-style: none;
    margin: 10px 0 15px 0;
    font-family: 'Helvetica', sans-serif; /* Clean contrast to the serif headings */
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
}

.artwork-specs li {
    display: inline-block;
    margin-right: 10px;
}

.news-content p {
    font-family: 'Lora', serif;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: justify; /* Newspaper justification */
}

/* --- Collapsible Logic for Long Text --- */
.collapsible {
    max-height: 150px; /* Initial height for long text */
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease;
}

/* Fade out effect at bottom of truncated text */
.collapsible::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(transparent, #fcfbf9); /* Matches background color */
}

/* When expanded, remove limit and fade */
.collapsible.expanded {
    max-height: 2000px; /* Large enough to fit full text */
}
.collapsible.expanded::after {
    display: none;
}

.read-more-toggle {
    background: none;
    border: 1px solid #333;
    padding: 5px 15px;
    font-family: 'Helvetica', sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    cursor: pointer;
    margin-top: 10px;
    display: none; /* Hidden by default */
}

/* Only show button if we used the .collapsible wrapper */
.collapsible + .read-more-toggle {
    display: inline-block;
}
/* --- Responsive Mobile Tweaks --- */
@media (max-width: 900px) {
    .newspaper-layout {
        flex-direction: column; /* Stack left on top of right */
    }
    
    .column-featured, 
    .column-collection {
        width: 100%;
        flex: none;
    }
    /* On tablets, keep the collection as 2 columns, but featured is full width */
    .column-collection {
        column-count: 2; 
    }
}

@media (max-width: 600px) {
    /* On phones, everything is 1 column */
    .column-collection {
        column-count: 1;
    }
}


.lightBorder {
    border: 12px solid #efefef;
}
.bkSlim {
    border:1px solid #000; 
    padding:1em;
}
.silvSlim {
    border:1px solid silver; 
    padding:1em;
}
.bkFrame {
    border:8px solid #000;
}
figure img {
    border: 12px solid #efefef;
}
small {
    font-size: 50%;
}
.extraSmall {
    font-size: 60%;
}

#afro2 img, #coll1 img{
    width:80%;
    margin-left:10%;
    margin-top:0; 
}