/* --- THE VEIL — PROJECT DEEP DIVE --- */

/* The Veil's own brand accents, used sparingly alongside the portfolio red. */
:root {
    --veil-gold: #d9c48f;
    --veil-ink: rgba(12, 10, 10, 0.55);
}

/* ---------- HERO ---------- */
.veil-hero {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 45px;
    align-items: center;
    padding: 40px;
    margin-top: 10px;
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(circle at 12% 30%, rgba(217, 196, 143, 0.10) 0%, transparent 55%),
        rgba(15, 13, 13, 0.55);
    opacity: 0;
    animation: fadeUp 0.8s ease-out 0.15s forwards;
}

.veil-logo {
    width: 100%;
    max-width: 180px;
    height: auto;
    justify-self: center;
    filter: drop-shadow(0 10px 30px rgba(217, 196, 143, 0.25));
}

.veil-kicker {
    display: inline-block;
    margin: 0 0 1rem 0 !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--veil-gold);
    background: rgba(217, 196, 143, 0.10);
    border: 1px solid rgba(217, 196, 143, 0.28);
}

.veil-hero-copy h2 {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.25;
    margin: 0 0 1.25rem 0;
    color: #fff;
}

.veil-hero-copy p {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1.02rem;
    margin-bottom: 1.1rem;
}

.veil-hero-copy strong { color: #fff; }
.veil-hero-copy p:last-child { margin-bottom: 0; }

/* ---------- STAT STRIP ---------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
    opacity: 0;
    animation: fadeUp 0.8s ease-out 0.25s forwards;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 1.4rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: rgba(20, 20, 20, 0.45);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 46, 84, 0.35);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.stat-num {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

/* ---------- SECTION HEADINGS ---------- */
.veil-section-head {
    font-size: 1.15rem !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    color: var(--text-muted) !important;
    margin: 5rem 0 0 0 !important;
    padding-top: 2.5rem;
    border-top: 1px solid var(--glass-border);
    opacity: 1 !important;
    animation: none !important;
}

.veil-section-head .text-red { color: var(--accent-red); }

/* ---------- SUB-HEADINGS INSIDE BLOCKS ---------- */
.text-content h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    margin: 0 0 1.25rem 0;
    line-height: 1.3;
}

.text-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    color: var(--veil-gold);
    background: rgba(217, 196, 143, 0.08);
    border: 1px solid rgba(217, 196, 143, 0.18);
    padding: 1px 6px;
    border-radius: 5px;
}

/* ---------- MEDIA ---------- */
.phone-shot {
    width: 100%;
    max-width: 310px;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

.img-caption {
    margin-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* ---------- ASCII ARCHITECTURE DIAGRAMS ---------- */
.arch-diagram {
    margin: 0;
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: rgba(8, 8, 8, 0.75);
    color: var(--veil-gold);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}

/* ---------- ROLE MATRIX ---------- */
.role-matrix {
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(12, 12, 12, 0.6);
}

.rm-head,
.rm-row {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) 0.7fr 0.8fr;
    gap: 10px;
    padding: 0.85rem 1.1rem;
    font-size: 0.86rem;
    align-items: center;
}

.rm-head {
    background: rgba(255, 255, 255, 0.04);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rm-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
}

.rm-row span + span { text-align: center; font-weight: 700; font-size: 0.8rem; }
.rm-row .yes { color: #4ade80; }
.rm-row .no { color: #6b7280; }

/* ---------- FEE TABLE ---------- */
.fee-table {
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(12, 12, 12, 0.6);
}

.ft-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 12px;
    padding: 0.9rem 1.1rem;
    font-size: 0.88rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    align-items: center;
}

.ft-row span + span { text-align: right; color: var(--veil-gold); font-weight: 700; }
.ft-row em { color: #4ade80; font-style: normal; font-size: 0.82rem; }

.ft-head {
    border-top: none;
    background: rgba(255, 255, 255, 0.04);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ft-head span + span { color: var(--text-muted); }

/* ---------- PRINCIPLES ---------- */
.principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.principle {
    padding: 1.8rem;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: rgba(18, 18, 18, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.principle:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 46, 84, 0.3);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
}

.p-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    background: rgba(255, 46, 84, 0.10);
    border: 1px solid rgba(255, 46, 84, 0.25);
    color: var(--accent-red);
    font-size: 1.1rem;
}

.principle h4 {
    margin: 0 0 0.8rem 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.35;
}

.principle p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.75;
}

.principle em { color: #fff; font-style: italic; }

/* ---------- STACK GRID ---------- */
.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.stack-card {
    padding: 1.8rem;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: rgba(18, 18, 18, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.stack-card:hover {
    transform: translateY(-5px);
    border-color: rgba(217, 196, 143, 0.35);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
}

.stack-card h4 {
    margin: 0 0 1.1rem 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stack-card h4 i { color: var(--veil-gold); font-size: 0.95rem; }

.stack-card ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.9;
}

.stack-card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    color: var(--veil-gold);
}

/* ---------- CLOSING NOTE ---------- */
.closing-note {
    margin-top: 5rem;
    padding: 2.5rem;
    border-radius: 22px;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 46, 84, 0.08) 0%, transparent 55%),
        rgba(15, 13, 13, 0.55);
}

.closing-note h3 {
    margin: 0 0 1.2rem 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}

.closing-note p {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.85;
}

.closing-note strong { color: #fff; }

.closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 2rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .veil-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
        padding: 30px 22px;
        text-align: center;
    }
    .veil-logo { max-width: 130px; }
    .veil-hero-copy h2 { font-size: 1.5rem; }
    .veil-hero-copy p { text-align: left; }
    .veil-section-head { margin-top: 3.5rem !important; }
    .arch-diagram { font-size: 0.6rem; padding: 1.2rem 0.9rem; }
    .stat-num { font-size: 1.7rem; }
    .closing-note { padding: 1.8rem 1.4rem; }
    .closing-actions .btn-outline { width: 100%; }
}

@media (max-width: 480px) {
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rm-head, .rm-row { font-size: 0.78rem; padding: 0.7rem 0.8rem; }
    .ft-row { font-size: 0.8rem; padding: 0.75rem 0.85rem; }
    .arch-diagram { font-size: 0.5rem; }
}

/* Numbered blocks read top-to-bottom on mobile: keep each image AFTER its text,
   overriding the alternating order flip in project-detail.css. */
@media (max-width: 900px) {
    .content-block:nth-of-type(even) .image-content { order: 0; }
}