/* 1. FONT SETUP & CONFIG (Same as PETI page) */
tailwind.config = {
    theme: {
        extend: {
            fontFamily: {
                'mono': ['"IBM Plex Mono"', 'monospace'],
                'devanagari': ['Hind', 'sans-serif'],
                'serif': ['"Playfair Display"', 'serif'],
                'urdu': ['"Noto Nastaliq Urdu"', 'serif'],
                'sans': ['"Archivo Black"', 'sans-serif'],
                'pixel': ['VT323', 'monospace'],
                'barcode': ['"Libre Barcode 39 Text"', 'cursive'],
                'display': ['Teko', 'sans-serif'],
            },
            colors: {
                'paper': '#FEF3C7',
                'stamp-bg': '#fdfbf5',
                'ink': '#111827',
                'ink-light': '#57534e',
                'stamp-border': '#d1c7b8',
                'truck-red': '#d63a3a',
                'teal': '#0aa',
                'sun': '#ffd23c',
            }
        }
    }
}

/* 2. BASE & AMBIANCE (Same as PETI page) */
body {
    background-color: #FEF3C7; /* paper */
    background-image:
        linear-gradient(rgba(220, 38, 38, 0.07) 1px, transparent 1px),
        linear-gradient(to right, rgba(220, 38, 38, 0.07) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow-x: hidden;
    cursor: none;
}

a, button {
    cursor: none;
}

/* 3. VERTICAL NAVIGATION & MAIN WRAPPER (Same as PETI page) */
.vertical-nav {
    position: fixed; left: 0; top: 0; height: 100%; width: 180px;
    background: #0b0e10; color: #e9e9e9; border-right: 3px solid var(--tw-color-ink);
    padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center;
    gap: 1.5rem; z-index: 50; font-family: "IBM Plex Mono", monospace;
}
.nav-qr {
    width: 48px; height: 48px; border: 2px solid #e9e9e9;
    background: conic-gradient(from 90deg at 25% 25%,#e9e9e9 0 25%,transparent 0 50%,#e9e9e9 0 75%,transparent 0),conic-gradient(from 90deg at 75% 75%,#e9e9e9 0 25%,transparent 0 50%,#e9e9e9 0 75%,transparent 0);
    background-size: 10px 10px,10px 10px; background-position: 0 0,5px 5px; margin-bottom: 1rem; flex-shrink: 0;
}
.vertical-nav-list { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 0.75rem; flex-grow: 1; }
.vertical-nav-list a { display: block; padding: 0.75rem 0.5rem; text-decoration: none; color: #e9e9e9; text-transform: uppercase; font-size: 0.8rem; font-weight: 700; text-align: center; transition: all 0.2s ease; }
.nav-pill.active { background: var(--tw-color-paper); color: #000; border: 2px solid #000; box-shadow: inset 2px 2px 0px #000; }
.nav-code { border: 2px dashed #e9e9e9; }
.nav-code:hover { background: rgba(233, 233, 233, 0.1); border-style: solid; }
.nav-barcode{ height: 40px; width: 100%; border: 2px solid #e9e9e9; background: repeating-linear-gradient(90deg,#e9e9e9 0 2px,transparent 2px 5px); margin-top: auto; flex-shrink: 0; }
.bulb{ position:absolute; left: 0; right: 0; margin: auto; width:6px; height:6px; border-radius:50%; background:#ffef9c; filter:blur(.4px); box-shadow:0 0 6px #ffd23c,0 0 12px #ffd23c; animation:flick 1.8s infinite steps(2,end); }
@keyframes flick{0%,18%,22%,100%{opacity:1}19%,21%{opacity:.2}70%{opacity:.7}}
.main-content-wrapper { margin-left: 180px; }

/* NAV hover (Same as PETI page) */
:root{ --pop-red:#ff4d4f; --pop-mango:#ffb703; --pop-cyan:#3dd5f3; --pop-lime:#22c55e; --pop-pink:#ec4899; --pop-blue:#60a5fa; }
.vertical-nav-list a{ position: relative; border: 2px solid #e9e9e9; transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease, color .15s ease, border-color .15s ease; will-change: transform, box-shadow, background-color; }
.vertical-nav-list a:hover, .vertical-nav-list a:focus-visible{ background: var(--pop-color, #ffdd57); color:#0b0e10; border-color:#0b0e10; transform: translateY(-1px) scale(1.02); box-shadow: inset 0 0 0 2px #0b0e10, 0 0 0 3px rgba(0,0,0,.08), 0 6px 16px rgba(0,0,0,.22), 0 0 22px var(--pop-color, #ffdd57); outline: none; }
.nav-pill.active:hover, .nav-pill.active:focus-visible{ background: var(--pop-color, var(--tw-color-paper)); color:#0b0e10; }
.vertical-nav-list a:active{ transform: translateY(0) scale(0.995); box-shadow: inset 0 0 0 2px #0b0e10, 0 2px 8px rgba(0,0,0,.18); }
.nav-pill.active { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; box-shadow: inset 2px 2px 0px #000 !important; transform: none !important; }
.nav-pill.active:hover, .nav-pill.active:focus-visible { background: #fff !important; color: #000 !important; border-color: #000 !important; box-shadow: inset 2px 2px 0px #000 !important; transform: none !important; }

/* 4. PROJECT DOSSIER HEADER */
.dossier-header {
    max-width: 1000px;
    margin: auto;
    padding: 2.5rem;
    background-color: var(--tw-color-stamp-bg);
    border: 1px solid var(--tw-color-stamp-border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}
.dossier-title-section {
    text-align: center;
    border-bottom: 2px dashed var(--tw-color-stamp-border);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
.dossier-id {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--tw-color-ink-light);
    margin-bottom: 1.5rem;
}
.dossier-id .font-barcode {
    font-size: 2.5rem;
    line-height: 1;
}
.dossier-subtitle {
    max-width: 600px;
    margin: 1rem auto 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--tw-color-ink-light);
}
.dossier-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}
.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tw-color-ink-light);
}
.meta-value {
    font-weight: 700;
    font-size: 1rem;
}
.status-chip {
    background-color: #dcfce7;
    color: #166534;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-block;
    align-self: flex-start;
    font-size: 0.8rem;
}

/* 5. CONTENT LAYOUT & STYLING */
.hero-image-container {
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}
.stylized-frame {
    border: 3px solid var(--tw-color-ink);
    background: #fff;
    padding: 1rem;
    box-shadow: 8px 8px 0 var(--tw-color-stamp-border);
}
.stylized-frame figcaption {
    margin-top: 0.75rem;
    text-align: center;
    color: var(--tw-color-ink-light);
    font-size: 1rem;
}
.stylized-image {
    display: block;
    width: 100%;
    transition: filter 0.4s ease-in-out;
    filter: grayscale(80%) sepia(20%) contrast(1.1) opacity(0.9);
}
.stylized-frame:hover .stylized-image {
    filter: grayscale(0%) sepia(0%) contrast(1) opacity(1);
}

.content-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}
@media(max-width: 980px){ .content-grid { grid-template-columns: 1fr; } }

.content-main .section-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--tw-color-ink);
    padding-bottom: 0.5rem;
    display: inline-block;
}
.content-section p, .content-section ul {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--tw-color-ink-light);
}
.content-section ul {
    list-style-type: '◆ ';
    padding-left: 1.5rem;
    margin-top: 1rem;
}
.content-section li { padding-left: 0.5rem; margin-bottom: 0.5rem; }
.section-divider {
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--tw-color-stamp-border) 0 5px, transparent 5px 10px);
    margin: 3rem 0;
}
blockquote {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 700;
    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: 5px solid var(--tw-color-truck-red);
}
.gallery-section {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media(max-width: 768px){ .gallery-section { grid-template-columns: 1fr; } }


/* 6. SIDEBAR */
.content-sidebar {
    position: sticky;
    top: 2rem;
    align-self: start;
}
.sidebar-box {
    border: 2px dashed var(--tw-color-stamp-border);
    padding: 1.5rem;
}
.sidebar-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.toolkit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    font-size: 0.9rem;
    line-height: 1.8;
}
.toolkit-list span { font-weight: 700; }
.cta-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
    border: 4px solid var(--tw-color-ink);
    background: #fff;
    box-shadow: 4px 4px 0 var(--tw-color-ink);
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tw-color-ink);
    transition: all 0.2s;
}
.cta-btn:hover { background: var(--tw-color-sun); }

/* 7. PROJECT PAGINATION */
.project-pagination {
    max-width: 1000px;
    margin: 4rem auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--tw-color-stamp-border);
    background-color: var(--tw-color-stamp-bg);
}
.pagination-link {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--tw-color-ink);
    flex: 1;
    transition: background-color 0.2s;
}
.pagination-link:hover { background-color: var(--tw-color-paper); }
.pagination-link.prev { justify-content: flex-start; text-align: left; border-right: 1px solid var(--tw-color-stamp-border); }
.pagination-link.next { justify-content: flex-end; text-align: right; }

.pagination-link .arrow { font-size: 2rem; font-weight: 700; }
.pagination-link .text { display: flex; flex-direction: column; }
.pagination-link.prev .text { margin-left: 1rem; }
.pagination-link.next .text { margin-right: 1rem; }
.pagination-link .label { font-size: 0.8rem; text-transform: uppercase; color: var(--tw-color-ink-light); }
.pagination-link .title { font-weight: 700; font-size: 1.25rem; }

/* 8. FOOTER (Same as PETI page) */
.site-footer {
    padding: 3rem 1rem;
    background-color: #0b0e10;
    color: #e9e9e9;
    border-top: 3px solid var(--tw-color-ink);
    font-family: "IBM Plex Mono", monospace;
}
.footer-content-wrapper { max-width: 1200px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.footer-brand-title { font-family: 'Archivo Black', sans-serif; font-size: 1.5rem; text-transform: uppercase; }
.footer-brand-tagline { font-size: 0.8rem; }
.footer-brand-barcode { font-size: 3rem; margin-top: 1rem; line-height: 1; color: #e9e9e9; }
.footer-heading { text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 2px solid #e9e9e9; display: inline-block; margin-bottom: 0.75rem; font-size: 0.9rem; }
.footer-link-list { list-style: none; padding: 0; margin: 0; font-size: 0.8rem; }
.footer-link-list li { margin-bottom: 0.5rem; }
.footer-link-list a { text-decoration: none; color: #e9e9e9; opacity: 0.8; transition: opacity 0.2s; }
.footer-link-list a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px dashed #e9e9e9; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: 0.75rem; gap: 1rem; }
.footer-stamp { border: 2px solid #e9e9e9; padding: 0.25rem 0.5rem; transform: rotate(-2deg); }

/* 9. Custom Cursor (Same as PETI page) */
.cursor-dot {
    position: fixed;
    width: 12px;
    height: 12px;
    background-color: #ff4d4f;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
    z-index: 9999;
}
.cursor-dot.grow {
    width: 22px;
    height: 22px;
    background-color: transparent;
    border: 2px solid #ff4d4f;
}

/* --- Case Study ToC --- */
.toc-wrapper {
    margin-top: 2rem; /* Adds space between the Toolkit and ToC boxes */
}
.toc-links {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--tw-color-stamp-border);
}
.toc-links li a {
    display: block;
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--tw-color-ink-light);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    margin-left: -2px;
}
.toc-links li a:hover {
    color: var(--tw-color-ink);
    background-color: var(--tw-color-paper);
}
.toc-links li.active a {
    color: var(--tw-color-ink);
    border-left-color: var(--tw-color-truck-red);
}