/* --- Layout & Header --- */
:root {
    --lilac: #b697e6;
    --darkgreen: #555924;
    --midgreen: #7a8b3c;
    --softgreen: #99a583;
    --lightgreen: #d1e1c0;
    --brat: #bbe55e;
    --cherry: #812f52;
    --darkorange:#c7442d;
    --orange:#dc603a;
    --red: #ff0100;
    --blue:#8aa6d2;
    --greyblue:#8a8ba5;
    --greycherry:#9e7a91;
    --brown:#9e7058;
}

body {
    font-family: 'HantarexMono', monospace;
    font-weight: 200;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}

header {
    display: grid;
    grid-template-columns: 1fr 1fr auto; /* Logo | Nav | Ticker */
    align-items: start;
    gap: 2rem;
    width: 100vw;
    margin:0;
    padding:0;
}


/* Ensure the ticker stays on the right side */
.news-ticker {
    justify-self: end;
    overflow: hidden;
    width: 100%;
    max-width: 600px; /* Adjust based on space */
    right:0px;
     color: var(--red);
}

.ticker-move {
    animation: ticker 25s linear infinite;
}

@keyframes ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}


/* --- Dynamic Title Fonts --- */
/* Map the unique font-family names to your variation classes */
.var-1 { font-family: 'Needlework-01', serif; }
.var-2 { font-family: 'Needlework-02', serif; }
.var-3 { font-family: 'Needlework-03', serif; }
.var-4 { font-family: 'Needlework-04', serif; }
.var-5 { font-family: 'Needlework-05', serif; }
.var-6 { font-family: 'Needlework-06', serif; }
.var-7 { font-family: 'Needlework-07', serif; }
.var-8 { font-family: 'Needlework-08', serif; }
.var-9 { font-family: 'Needlework-09', serif; }
.var-10 { font-family: 'Needlework-10', serif; }
.var-11 { font-family: 'Needlework-11', serif; }
.var-12 { font-family: 'Needlework-12', serif; }
.var-13 { font-family: 'Needlework-13', serif; }

.needlework-title {
    font-size: 12vw; /* Scale to screen width */
    line-height: 1;
    text-align: center;
    padding-top: 5vh;
}

/* --- Manifesto & Image --- */
.manifesto-scroll {
    position: relative;
    padding: 50px 0% 50px;
    padding-bottom: 700px;
    width: 100%;
    overflow: hidden; /* Prevent horizontal scroll from image */
}

.lilac-box {
    background: #b697e6;
    border-radius: 20px;
    padding: 20px 80px;
    color: white;
    text-align: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    z-index: 10;
    box-shadow: 0 0px 50px rgba(255, 69, 0, 1);
    width: 85vw;
    margin: 0 auto;
}

.image-wrapper {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%; /* Fit page width */
    height: auto;
    display: flex;
    justify-content: center;
    z-index: 5;
}

.image-wrapper img {
    max-width: 100%; /* Ensure it doesn't spill over */
    height: auto;
}


/* ABOUT ABOUT ABOUT */

/* Container for the whole spread */
.about-container {
    display: flex;
    justify-content: center;
    position: relative;
    padding-top: 50px;
}

.book-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 90vw;
    gap: 10vw; /* This gap is where the red spine lives */
}

.central-spline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 100%;
    /* Red spline with fading edges */
    background: linear-gradient(to bottom, transparent, var(--red) 10%, var(--red) 90%, transparent);
    z-index: 1;
}


/* LEFT SIDE STYLES */

.intro-section {
    font-size: 1.2rem;
    margin-bottom: 0px;
    line-height: 1.2;
}

.chapter-row {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Space for text vs captions */
    gap: 20px;
    margin-bottom: 0px; /* Space between chapters */
    align-items: start;
}

.chapter-text {
    font-size: 0.95rem;
    color: var(--darkgreen);
}

/* Captions Column */
.captions-column {
    display: flex;
    flex-direction: column;
    gap: 0px; /* Space between multiple captions */
}

.caption-item {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--greyblue);
    text-indent: -1.5em; /* Hang the arrow slightly */
    padding-left: 1.5em;
}

.caption-link {
    color: inherit; /* Keeps the greyblue color */
    text-decoration: none;
}

.arrow-icon {
    color: var(--greyblue); /* Making the arrow pop with your red variable */
    margin-right: 4px;
}

/* RIGHT SIDE STYLES */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    gap: 15px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    filter: grayscale(20%);
    transition: filter 0.3s;
}

.gallery-item:hover img {
    filter: grayscale(0%);
}

.photo-caption {
    font-size: 0.7rem;
    margin-top: 10px;
    line-height: 1.2;
    color: var(--greyblue);
}

/* Responsive fix for smaller screens */
@media (max-width: 1024px) {
    .book-layout { grid-template-columns: 1fr; }
    .central-spline { display: none; }
}



/* Fonts */
@font-face {
    font-family: 'HantarexMono';
    font-style: normal;
    font-weight: 100;
    src: local('HantarexMono-Thin'), url('../fonts/HantarexMono-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'HantarexMono';
    font-style: normal;
    font-weight: 200;
    src: local('HantarexMono-Light'), url('../fonts/HantarexMono-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'HantarexMono';
    font-style: normal;
    font-weight: 300;
    src: local('HantarexMono-Regular'), url('../fonts/HantarexMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'HantarexMono';
    font-style: normal;
    font-weight: 500;
    src: local('HantarexMono-Medium'), url('../fonts/HantarexMono-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'HantarexMono';
    font-style: normal;
    font-weight: 600;
    src: local('HantarexMono-Bold'), url('../fonts/HantarexMono-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'HantarexMono';
    font-style: normal;
    font-weight: 700;
    src: local('HantarexMono-ExtraBold'), url('../fonts/HantarexMono-ExtraBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Needlework-01';
    src: local('Needlework-01'), url('../fonts/Needlework-01-Eyelet.woff2') format('woff2');
}

@font-face {
    font-family: 'Needlework-02';
    src: local('Needlework-02'), url('../fonts/Needlework-02.woff2') format('woff2');
}

@font-face {
    font-family: 'Needlework-03';
    src: local('Needlework-03'), url('../fonts/Needlework-03-BigThread.woff2') format('woff2');
}

@font-face {
    font-family: 'Needlework-04';
    src: local('Needlework-04'), url('../fonts/Needlework-04-Simple-Marking.woff2') format('woff2');
}

@font-face {
    font-family: 'Needlework-05';
    src: local('Needlework-05'), url('../fonts/Needlework-05.woff2') format('woff2');
}
@font-face {
    font-family: 'Needlework-06';
    src: local('Needlework-06'), url('../fonts/Needlework-06-Pixel.woff2') format('woff2');
}
@font-face {
    font-family: 'Needlework-07';
    src: local('Needlework-07'), url('../fonts/Needlework-07.woff2') format('woff2');
}
@font-face {
    font-family: 'Needlework-08';
    src: local('Needlework-08'), url('../fonts/Needlework-08-Queen.woff2') format('woff2');
}
@font-face {
    font-family: 'Needlework-09';
    src: local('Needlework-09'), url('../fonts/Needlework-09-Semi-chess.woff2') format('woff2');
}
@font-face {
    font-family: 'Needlework-10';
    src: local('Needlework-10'), url('../fonts/Needlework-10-Chess.woff2') format('woff2');
}

@font-face {
    font-family: 'Needlework-11';
    src: local('Needlework-11'), url('../fonts/Needlework-11-ChunkyLabel.woff2') format('woff2');
}

@font-face {
    font-family: 'Needlework-12';
    src: local('Needlework-12'), url('../fonts/Needlework-12-Big.woff2') format('woff2');
}

@font-face {
    font-family: 'Needlework-13';
    src: local('Needlework-13'), url('../fonts/Needlework-13.woff2') format('woff2');
}