:root {
    --bg-color: #e6e6e6; /* Newsprint / Industrial Grey */
    --text-color: #000000;
    --signal-green: #39ff14; /* Neon Signal Green */
    --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --border-weight: 1px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
line-height: 1.5rem;
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1.25rem; /* Default is usually 1rem (16px). This moves it to 20px */

    /* Ensure the font stays sharp */
    -webkit-font-smoothing: antialiased;
    color: #000;
    background-color: var(--bg-color);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

p {

        padding-bottom: 20px;
}

/* --- THE "THOMAS" HEADER --- */

header {
    margin-bottom: 50px;
    /*border-bottom: var(--border-weight) solid #000;*/

}

h1 {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.8;
    text-transform: uppercase;
    /* Subtle stencil/stamp effect */
    -webkit-text-stroke: 1px #000;
}

.role {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    background: #000;
    color: var(--signal-green); /* Neon on Black */
    display: inline-block;
    padding: 4px 10px;
    margin-top: 20px;
}

/* --- UPDATED STATUS BAR: The "Signal" Style --- */
.status-bar {
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 40px;
    display: inline-flex;
    align-items: center;

    color: #000;
}

.status-dot {
    width: 10px;
    height: 10px;
    background-color: #000; /* Black dot on Neon looks sharper */
    margin-right: 10px;
}

/* --- SECTIONS --- */

section {
    margin-bottom: 80px;
    position: relative;
}

/* --- UPDATED H2: The "Label" Style --- */
h2 {
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    background: #ffffff; /* White background */
    border: var(--border-weight) solid #000; /* Black border */
    padding: 5px 12px;
    display: inline-block;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    /* This makes it look like a physical sticker */
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1); 
    
}



/* --- GRID & IMAGES --- */

.swiss-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: var(--border-weight) solid #000;
}

.grid-text-large {
    padding: 40px 40px 0px 0;
    border-right: var(--border-weight) solid #000;
}

.grid-image {
    padding: 40px 0 0px 40px;
}

.grid-image img {
    width: 100%;
    filter: grayscale(100%) contrast(120%);
    mix-blend-mode: multiply; /* Layers image into the paper color */
}

.lead-text {
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    /*margin-bottom: 2rem;*/
}

/* --- THE LOGBOOK (Instructional Style) --- */

.log-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    border-top: 1px solid #000;
    padding: 20px 0;
}

.log-org {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.log-content {
    font-size: 1.1rem;
    font-weight: 500;
}

/* --- CASE STUDIES & LISTS --- */

/* --- CASE STUDIES INTERACTION --- */

.project {
    border-bottom: var(--border-weight) solid #000;
}

.project a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    
    /* Smooth but snappy transition for that industrial feel */
    transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
}

/* The "Indent" Animation on Hover */
.project a:hover {
    background-color: var(--signal-green);
    padding-left: 50px; /* The physical indent */
}

.p-title {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    transition: transform 0.25s ease;
}

.p-meta {
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    background: #000;
    color: #fff;
    padding: 4px 10px;
    margin-left: 20px;
}

/* THE ARROW ANIMATION */
.project a::after {
    content: "→";
    font-size: 1.5rem;
    font-weight: 900;
    margin-left: 20px;
    transform: translateX(0) scale(1);
    transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

.project a:hover::after {
    transform: translateX(10px) scale(1.5); /* Moves right and grows */
    color: #000;
}

/* Subtle "Stamp" effect on hover for the meta tag */
.project a:hover .p-meta {
    background: #fff;
    color: #000;
}

/* Mobile Adjustments */
@media (max-width: 850px) {
    .p-title { font-size: 1.4rem; }
    .project a:hover { padding-left: 30px; }
}
/* --- RESOURCES (Overlay Style) --- */

.resource-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: var(--border-weight) solid #000;
}

.resource-col {
    padding: 30px;
}

.resource-col:first-child {
    border-right: var(--border-weight) solid #000;
}

.resource-list a:hover .link-text {
    background: #000;
    color: var(--signal-green);
}

/* --- FOOTER --- */

footer {
    border-top: var(--border-weight) solid #000;
    padding-top: 40px;
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    font-weight: 900;
    text-transform: uppercase;
}

/* --- RESPONSIVE --- */

@media (max-width: 850px) {
    .swiss-grid, .log-item, .resource-grid { grid-template-columns: 1fr; }
    .grid-text-large { border-right: none; border-bottom: var(--border-weight) solid #000; padding: 20px 0; }
    .resource-col:first-child { border-right: none; border-bottom: var(--border-weight) solid #000; }
    .log-org { margin-bottom: 10px; }
}

/* Custom "Found Symbol" - The Stencil Arrow */
.lead-text::after {
    content: "↳";
    display: block;
    font-size: 3rem;
    color: var(--signal-green);
    margin-top: 10px;
}

/* The "Process" Glyph for the Logbook */
.log-org::before {
    content: "■"; /* Solid square glyph */
    font-size: 0.6rem;
    margin-right: 8px;
    color: var(--signal-green);
}

/* "Instructional" indicators for links */
.project a::after {
    content: "→";
    font-weight: 900;
    font-size: 1.2rem;
}

/* Adding a 'Stamp' effect to the footer */
footer::before {
    content: "OFFICIAL USE ONLY // REVISED 2026";
    display: block;
    font-size: 0.6rem;
    background: #000;
    color: #fff;
    width: fit-content;
    padding: 2px 6px;
    margin-bottom: 20px;
}

.intro {
    position: relative;
    overflow: hidden;
}

.background-glyph {
    position: absolute;
    font-size: 25rem;
    color: rgba(0,0,0,0.03); /* Extremely subtle ghost image */
    right: -50px;
    top: -50px;
    z-index: -1;
    font-weight: 900;
    pointer-events: none;
}

/* --- SCIENTIFIC CAPTIONS --- */

/* Fluid Images that preserve ratio */
figure img, 
.grid-image img, 
.side-image img {
    display: block;
    width: 100%;       /* Fills the width of the grid column(s) */
    height: auto;      /* Preserves the original aspect ratio */
    object-fit: cover; /* Ensures it fills the space cleanly */
}

/* Ensure figures don't add unwanted horizontal space */
figure {
    margin: 0;
    width: 100%;
}

figcaption {
    font-size: 0.7rem; /* Very small, technical scale */
    font-style: italic;
    font-weight: 500;
    color: #333;
    text-transform: none; /* Keep as sentence case for that manual look */
    letter-spacing: 0.02em;
    
    /* The 1px borders (Top and Bottom only) */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    
    padding: 8px 0;
    margin-top: 0px;
    display: block;
    line-height: 1.4;
}

/* Optional: Make the "Fig x.x" part bold for extra precision */
figcaption::first-letter {
    font-weight: 900;
    font-style: normal;
}

/* --- CASE STUDY SPECIFIC ADDITIONS --- */

/* Global ID Bar */
.global-id {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-weight) solid #000;
    padding-bottom: 20px;
    margin-bottom: 60px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.id-sep {
    color: var(--signal-green);
    margin: 0 10px;
}

.back-link {

    color: #000;
    font-size: 0.9rem;


}

.back-link:hover {
    background: var(--signal-green);
    color: #000;
}

/* Metadata Bar (The Document Header) */
.metadata-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background: #fff;
    border: var(--border-weight) solid #000;
    padding: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.meta-item span {
    display: block;
    font-size: 0.65rem;
    color: var(--dim-text);
    margin-bottom: 5px;
    font-weight: 900;
}

.meta-item {
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
}

/* Impact Box (Signal Green Version) */
.impact-box {
    background-color: var(--signal-green);
    border: var(--border-weight) solid #000;
    padding: 40px;
    margin-top: 60px;
}

.impact-box h2 {
    background: #000;
    color: #fff;
    border: none;
}

.impact-grid ul {
    list-style: none;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.impact-grid li::before {
    content: "↳ ";
    color: #000;
}

/* Tags in Sidebar */
.tags {
    list-style: none;
    margin-top: 20px;
}

.tags li {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    background: #000;
    color: #fff;
    display: inline-block;
    padding: 2px 6px;
    margin-bottom: 5px;
}

/* Ensure figure captions work inside case study too */
.case-section figure {
    margin: 20px 0;
}

/* --- THE 12-COLUMN UTILITIES (Recap) --- */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

/* Width Utility Classes */
.col-12 { grid-column: span 12; }
.col-9  { grid-column: span 9; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

/* Positioning Utility Classes */
.col-start-1 { grid-column-start: 1; }
.col-start-4 { grid-column-start: 4; }
.col-start-7 { grid-column-start: 7; }

/* --- PULL QUOTE (The Grabber) --- */
.pull-quote {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.05em;
    padding: 40px;
    border: 3px solid #000;
    background: var(--signal-green);
    margin: 60px 0;
    position: relative;
}

.pull-quote::before {
    content: "“";
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 5rem;
    background: var(--bg-color);
    line-height: 1;
}

/* --- TEXT WRAPPING LOGIC --- */
.wrap-container {
    /* Important: We override the grid here so text can float around images */
    display: block; 
    grid-column: span 12; 
    width: 100%;
    clear: both;
    margin-bottom: 60px;
    /* This ensures the container expands to fit the floated content */
    overflow: hidden; 
}

.float-left {
    float: left;
    margin-right: 40px; /* Space between Fig and Text */
    margin-bottom: 20px;
    /* Defines the exclusion area for the text wrap */
    shape-outside: inset(0 0 0 0); 
}

.float-right {
    float: right;
    margin-left: 40px;
    margin-bottom: 20px;
    shape-outside: inset(0 0 0 0);
}

/* Width variants for the floated figures */
.w-1-4 { width: 25%; min-width: 200px; }
.w-1-3 { width: 33%; min-width: 250px; }
.w-1-2 { width: 50%; min-width: 300px; }

/* Ensure text inside wrap-container is legible */
.wrap-container p {
   
}

/* --- THE LEDE STYLE --- */
.lead-paragraph {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.1;
    border-left: 10px solid #000;
    padding-left: 30px;
    margin-bottom: 20px;
}

/* --- THE LEDE STYLE --- */
.lead-paragraph-2 {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.1;
    border-left: 10px solid #000;
    padding-left: 30px;
    margin-bottom: 0px;
}

/* Helper to force a break between floated sections */
.clear {
    clear: both;
    grid-column: span 12;
    height: 0;
}

/* --- RESPONSIVE GRID ENGINE --- */

@media (max-width: 850px) {
    /* 1. Reset the Master Grid to a single column stack */
    .grid-12 {
        display: flex;
        flex-direction: column;
        gap: 40px; /* Increased gap for better mobile scanning */
    }

    /* 2. Force all column utility classes to 100% width */
    .col-12, .col-9, .col-8, .col-6, .col-4, .col-3,
    [class*="col-start-"] {
        grid-column: span 12 !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3. Handle the Lede Style on mobile */
    .lead-paragraph {
        font-size: 1.8rem; /* Slightly smaller for mobile screens */
        border-left-width: 6px;
        padding-left: 20px;
    }

        /* 3. Handle the Lede Style on mobile */
    .lead-paragraph-2 {
        font-size: 0.8rem; /* Slightly smaller for mobile screens */
        border-left-width: 6px;
        padding-left: 20px;
    }

    /* 4. Reset Wrapping Logic (Images stack above text) */
    .wrap-container {
        display: flex;
        flex-direction: column;
    }

    .float-left, .float-right {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        shape-outside: none !important;
    }

    /* 5. Adjust width variants for mobile */
    .w-1-4, .w-1-3, .w-1-2, .w-3-4 {
        width: 100% !important;
    }

    /* 6. Pull Quote adjustment */
    .pull-quote {
        font-size: 1.8rem;
        padding: 30px 20px;
        margin: 40px 0;
    }

    /* 7. Case Study Metadata Bar */
    .metadata-bar {
        grid-template-columns: 1fr; /* Stack items vertically */
        gap: 15px;
    }
}


/* --- RESOURCE LOG STYLE --- */

.resource-log {
    border: var(--border-weight) solid #000;
    padding: 0;
    gap: 0; /* Removing gap to let the internal borders handle spacing */
}

.resource-col {
    padding: 40px;
}

/* Vertical line between the two columns */
.resource-col:first-child {
    border-right: var(--border-weight) solid #000;
}

.category-label {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--signal-green);
    background: #000;
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.resource-list {
    list-style: none;
}

.resource-list li {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
}

.resource-list li:last-child {
    border-bottom: none;
}

.resource-list a {
    display: block;
    padding: 20px 0;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.resource-list a:hover {
    background-color: var(--signal-green);
    padding-left: 10px;
}

.link-text {
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 5px;
}

.link-meta {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dim-text);
}

/* Mobile fix for the resource log */
@media (max-width: 850px) {
    .resource-col:first-child {
        border-right: none;
        border-bottom: var(--border-weight) solid #000;
    }
}

/* --- CAREER HIGHLIGHTS LOG --- */

.highlight-list {
    list-style: none;
    border-top: var(--border-weight) solid #000;
    margin-top: 20px;
}

.highlight-list li {
    display: flex;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid #000;
    align-items: flex-start;
    transition: background 0.2s ease;
}

/* The "Thomas" Hover Effect */
.highlight-list li:hover {
    background-color: var(--signal-green);
}

.highlight-list .marker {
    font-size: 0.8rem;
    color: #000;
    padding-top: 4px; /* Alignment with text line-height */
}

.highlight-list .content {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    max-width: 900px;
}

.highlight-list strong {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #000;
    color: #fff;
    padding: 0 5px;
    margin-right: 8px;
}

/* Mobile Tweak */
@media (max-width: 850px) {
    .highlight-list .content {
        font-size: 1.1rem;
    }
}

/* --- FULL-WIDTH HIGHLIGHT BOXES --- */

.highlight-container {
    display: flex;
    flex-direction: column;
    gap: 0; /* Boxes touch to form a solid block */
    border-top: var(--border-weight) solid #000;
}

.highlight-box {
    width: 100%;
    background: #ffffff; /* White box pops against newsprint */
    border: var(--border-weight) solid #000;
    border-top: none; /* Prevents double borders between boxes */
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligns org name to the bottom right */
    gap: 40px;
}

.highlight-detail {
    font-size: 1.6rem; /* Large, prominent impact text */
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    max-width: 80%;
}

.highlight-org {
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--dim-text);
    white-space: nowrap;
    letter-spacing: 0.1em;
    /* This makes the org name look like a secondary technical ID */
}

/* Specific styling for the first box to restore the top border */
.highlight-box:first-child {
    border-top: var(--border-weight) solid #000;
    margin-top: 20px;
}

/* Mobile Adjustments */
@media (max-width: 850px) {
    .highlight-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px;
    }
    
    .highlight-detail {
        font-size: 1.3rem;
        max-width: 100%;
    }
}

/* --- FIXED GRID HIGHLIGHT STRIP (No Slider) --- */

.highlight-strip {
    display: grid;
    /* This creates 4 equal columns that stay within the container */
    grid-template-columns: repeat(4, 1fr); 
    gap: 0;
    border: var(--border-weight) solid #000;
    margin-top: 20px;
    background: #000; /* Solid black backing for the borders */
}

.highlight-card {
    background: #ffffff;
    padding: 25px;
    /* Only right border needed; the container handles the rest */
    border-right: var(--border-weight) solid #000;
    display: flex;
    flex-direction: column;
}

.highlight-card:last-child {
    border-right: none;
}

.card-body {
    font-size: 1.1rem; /* Slightly smaller to ensure it fits 4-wide */
    font-weight: 900;
    line-height: 1.1;

    color: #000;
    /* Ensures all dividers align horizontally */
    min-height: 140px; 
    margin-bottom: 20px;
}

.card-divider {
    border: none;
    border-top: 1px solid var(--signal-green);
    margin-bottom: 15px;
    width: 100%;
}

.card-meta {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #000;
    display: inline-block;
    width: fit-content;
    padding: 2px 8px;
    margin-top: auto; /* Pushes the 'tab' to the very bottom */
}

/* --- MOBILE: STACK THEM --- */
@media (max-width: 1000px) {
    .highlight-strip {
        grid-template-columns: 1fr; /* One per row on smaller screens */
    }
    .highlight-card {
        border-right: none;
        border-bottom: var(--border-weight) solid #000;
    }
    .card-body {
        min-height: auto;
    }
}

.h2-stark {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: -0.02em; /* Tightens it up for that Swiss poster feel */
    margin-bottom: 1.5rem;
    display: block;
    color: #000;
}

/* Optional: Add a small signal-green dash before it for a "Lead Designer" touch */
.h2-stark::before {
    content: "— ";
    color: var(--signal-green);
}

/* --- THE SIGNAL STICKER (Circular) --- */

.status-sticker {
    /* Positioning: Flap it in the corner like a real stamp */
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 100;
    
    /* Shape & Color */
    width: 150px; /* Fixed size to keep the circle perfect */
    height: 150px;
    background-color: #fff;
    border: 3px solid var(--signal-green);
    border-radius: 50%;
    
    /* Content Alignment */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    
    /* The "Patrick Thomas" Imperfection */
    transform: rotate(10deg); /* Slapped on haphazardly */
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2); /* Slight lift off the paper */
    
    /* Prevent selection and maintain the graphic feel */
    user-select: none;
    pointer-events: none; /* Text shouldn't be selectable/clickable */
}

.sticker-text {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    color: #000;
    letter-spacing: -0.02em;
    /* Subtle text curve effect using standard CSS is tricky; 
       this tightly condensed approach works best for the 'stamp' vibe. */
}

/* --- RESPONSIVE: Move the sticker on mobile --- */
@media (max-width: 850px) {
    .status-sticker {
        position: relative; /* Move it back into the flow */
        top: 0;
        right: 0;
        width: 120px;
        height: 120px;
        margin: 0 auto 40px auto; /* Centered with margin below */
        transform: rotate(-5deg); /* Less rotation on mobile */
    }
    
    .sticker-text {
        font-size: 0.9rem;
    }
}


/* --- INDUSTRIAL CTA BLOCK --- */

.cta-block {
    margin-top: 80px;
    margin-bottom: 40px;
}

.cta-container {
    background-color: var(--signal-green);
    color: #000;
    padding: 60px;
}

.cta-text {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    max-width: 800px;
    margin-bottom: 40px;
    color: #000;
}

.cta-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-btn {
    flex: 1;
    min-width: 300px;
    border: 2px solid #fff;
    padding: 20px;
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
        background-color: #000;
}

.cta-btn:hover {
    background-color: var(--signal-green);
    color: #000;
    border-color: #000;
}

.btn-label {
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    opacity: 0.8;
}

.btn-value {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* Mobile Adjustments */
@media (max-width: 850px) {
    .cta-container {
        padding: 30px;
    }
    .cta-text {
        font-size: 1.2rem;
    }
    .cta-btn {
        min-width: 100%;
    }
}


/* --- CTA PASSAGE (Based on Pull Quote) --- */

.cta-passage {
    margin: 80px 0;
}

.cta-quote-box {
    background-color: var(--signal-green);
    border: 4px solid #000;
    padding: 60px;
    position: relative;
}

/* The "Sticker" Label for the box */
.cta-quote-box::before {
    content: "CONTACT / CTA";
    position: absolute;
    top: -15px;
    left: 20px;
    background: #000;
    color: var(--signal-green);
    font-size: 0.7rem;
    font-weight: 900;
    padding: 2px 10px;
    letter-spacing: 0.1em;
}

.cta-quote-box p {
    font-size: 2.2rem; /* Matches the pull-quote impact */
    font-weight: 900;
    line-height: 1.1;
    color: #000;
    margin: 0;
    letter-spacing: -0.04em;
}

/* --- INLINE LINK STYLING --- */

.cta-inline-link {
    color: #000;
    text-decoration: none;
    border-bottom: 6px solid #000; /* Heavy industrial underline */
    transition: all 0.2s ease;
    display: inline-block;
    line-height: 0.85;
}

.cta-inline-link:hover {
    background-color: #000;
    color: var(--signal-green); /* Inverts on hover */
    padding: 0 5px;
}

/* Mobile Adjustments */
@media (max-width: 850px) {
    .cta-quote-box {
        padding: 40px 20px;
    }
    .cta-quote-box p {
        font-size: 1.6rem;
    }
    .cta-inline-link {
        border-bottom-width: 4px;
    }
}

/* --- PROJECT NUMBERING --- */

.p-header {
    display: flex;
    align-items: baseline;
    gap: 15px; /* Space between number and title */
}

.p-number {
    font-size: 1rem; /* Smaller than title */
    font-weight: 500;
    color: var(--dim-text); /* Greyed out so it doesn't compete */
    font-family: 'Courier New', Courier, monospace; /* Monospace feels more 'archival' */
    margin-bottom: 2px;
}

.p-title {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: #000;
}

/* Hover State: Make the number 'activate' along with the link */
.project a:hover .p-number {
    color: #000;
    font-weight: 900;
}

/* Ensure the indent animation still works with the new structure */
.project a:hover .p-header {
    transform: translateX(0); /* The parent 'a' handle the padding indent */
}

/* --- TECHNICAL ARCHIVE LIST --- */

.archive-list {
    list-style: none; /* Remove default dots */
    padding-left: 0;
    margin: 20px 0;
}

.archive-list li {
    position: relative;
    padding-left: 30px; /* Space for the marker */
    margin-bottom: 12px;
    line-height: 1.4;
    font-size: 1.1rem; /* Slightly smaller than main body to feel like a 'sub-detail' */
}

/* The Custom Marker */
.archive-list li::before {
    content: "↳"; /* Solid square marker */
    position: absolute;
    left: 0;
    top: 2px; /* Alignment tweak */
    color: var(--signal-green); /* Neon accent */
    font-size: 0.8rem;
}

/* Optional: Subtle divider for long lists */
.archive-list li {

}

.archive-list li:last-child {
    border-bottom: none;
}