/* =========================================
   Swiss Editorial: Classic Archive
   ========================================= */

html {
    scroll-behavior: smooth; /* Creates a smooth slide when clicking index items */
}

:root {
    --swiss-orange: #FF4500; /* High saturation classic orange */
    --paper-white: #F4F4F4;  /* Off-white "Old Paper" feel */
    --ink-black: #1A1A1A;
}



body {
    background-color: var(--paper-white);
    color: var(--ink-black);
    font-family: 'Inter', -apple-system, sans-serif; /* Clean Swiss typography */
    margin: 0;
    padding: 60px 20px;
    line-height: 1.4;
}

/* The Grid: No more "Bento Boxes" */
.editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column Swiss grid */
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* The Image Block: Clean and simple */
.artifact-box {
    margin-bottom: 40px;
    position: relative;
    border-top: 1px solid var(--ink-black); /* Technical separator line */
    padding-top: 10px;
}

.artifact-box img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(0%); /* No more B&W, let the colors pop */
}

/* Metadata Text */
.meta-label {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--swiss-orange); /* High-saturated orange accents */
    letter-spacing: 1px;
    margin-top: 8px;
}

/* Layout Variations: Telling the boxes where to go */
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }
.offset-2 { grid-column-start: 3; }

/* Swiss Grid Logic */
.span-12 { grid-column: span 12; }
.span-8  { grid-column: span 8; }
.span-6  { grid-column: span 6; }
.span-4  { grid-column: span 4; }
.span-3  { grid-column: span 3; }

/* The "Offset" creates the classic asymmetric Swiss look */
.offset-2 { grid-column-start: 3; }

/* Responsive adjustments for mobile devices */
@media (max-width: 900px) {
    .span-8, .span-6, .span-4, .span-3 { grid-column: span 12; }
    .offset-2 { grid-column-start: auto; }
}

/* The 'Return to Base' link */
.base-link {
    display: inline-block;
    color: var(--ink-black);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 80px; /* 🟢 Increased from 40px to create a larger gap */
    text-transform: uppercase;
}

.editorial-index {
    display: flex;
    flex-direction: column; /* Stacks the signals vertically */
    gap: 12px;
    border-top: 2px solid var(--ink-black); /* Thick Swiss line */
    padding-top: 30px;
    margin-bottom: 100px; /* Space before the actual grid starts */
    font-size: 0.75rem;
}
.index-column {
    display: flex;
    flex-direction: column;
}

.vertical-meta {
    position: absolute;
    left: -30px; /* Positions it just outside the image */
    top: 50px;
    transform: rotate(-90deg);
    transform-origin: left top;
    font-size: 0.6rem;
    color: var(--swiss-orange);
    white-space: nowrap;
}

.editorial-index a {
    color: var(--ink-black);
    text-decoration: none; /* Removes the standard underline */
    transition: color 0.2s ease;
    display: block;
    margin-bottom: 5px;
}

.editorial-index a:hover {
    color: var(--swiss-orange); /* Turns orange when you hover over the signal name */
    text-decoration: underline;
}


/* Container to hold both the description and the links */
.index-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Splits the space 50/50 */
    gap: 60px;
    border-top: 2px solid var(--ink-black);
    padding-top: 30px;
    margin-top: 20px;
}

.index-description p {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
    max-width: 400px;
}

.index-description strong {
    color: var(--swiss-orange); /* Uses your high-saturation orange */
    display: block;
    margin-bottom: 5px;
}

/* Adjust your existing editorial-index to remove the border since it's on the container now */
.editorial-index {
    display: flex;
    gap: 40px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: none; /* Removed */
}

/* Responsive fix for mobile */
@media (max-width: 900px) {
    .index-container { grid-template-columns: 1fr; gap: 30px; }
}

/* Center-Focus Utility */
.center-box {
    grid-column: 2 / span 10; /* Occupies the center 10 columns */
    margin: 40px 0;
}

@media (max-width: 900px) {
    .center-box {
        grid-column: span 12; /* Full width on mobile */
    }
}

/* Constrains tall vertical images */
.vertical-artifact {
    grid-column: span 5; /* Reduced from 8 or 10 */
    grid-column-start: 4; /* Centers it in the 12-column grid */
    max-height: 70vh; /* Limits height to 70% of the screen */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vertical-artifact img {
    height: 100%;
    width: auto; /* Keeps the proportions correct */
    object-fit: contain;
}

.meta-label a:hover {
    text-decoration: underline;
    opacity: 0.8;
}