/* Editorial page system.
   Loaded after style.css so the existing navbar and chat widget keep their
   established behavior and visual treatment. */

:root {
    --editorial-bg: #09090b;
    --editorial-surface: #121215;
    --editorial-line: rgba(63, 63, 70, .72);
    --editorial-muted: #71717a;
    --editorial-soft: #a1a1aa;
    --editorial-white: #f4f4f5;
    --editorial-green: #34d399;
}

html { background: var(--editorial-bg); }
body { background: transparent; color: var(--editorial-white); }

/* Neural vector field: the canvas and mask sit behind the page content. */
#ai-vector-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background-color: #09090b;
}

.canvas-mask {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(9,9,11,1) 15%, rgba(9,9,11,.68) 43%, transparent 100%);
}

/* Page typography: no gradient text is used in the editorial treatment. */
.hero h1, .hero h1 span, .skills-heading h2, .section-title, .page-title, .contact-hero h2 {
    font-family: var(--font-sans);
    font-weight: 600;
    background: none;
    color: var(--editorial-white);
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.hero h1, .page-title, .contact-hero h2, .skills-heading h2 { letter-spacing: -.04em; }
.editorial-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: #d4d4d8; letter-spacing: normal; padding-right: .25rem; }
.hero h1 span:first-of-type { color: #d4d4d8; font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: normal; }
.hero h1 .hero-dynamic-line, .hero h1 .hero-dynamic-layer, .hero h1 .hero-dynamic-text { color: var(--editorial-white); }
.hero h1 .hero-dynamic-text { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: #d4d4d8; letter-spacing: normal; }

.hero-kicker, .section-kicker, .postcard-label, .contact-eyebrow, .project-tagline, .date, .issuer, .tech-tags span, .skill-pill, .hero-proof, .skill-index, .detail-columns h4 { font-family: var(--font-mono); }
.hero-kicker, .section-kicker, .contact-eyebrow, .date, .detail-columns h4 { color: var(--editorial-muted); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }
.container { max-width: 1180px; }

/* Home: quieter content surfaces with a more deliberate editorial rhythm. */
.hero { padding-top: 118px; padding-bottom: 72px; }
.hero-copy > p:not(.hero-kicker), .skills-heading > p, .page-description, .contact-hero p { color: var(--editorial-soft); }
.hero-proof i, .hero-proof span:first-child i { color: var(--editorial-green); }

.cta-buttons .btn, .card-links .btn, .contact-resume .btn { border-radius: 9px; box-shadow: none; font-weight: 500; }
.cta-buttons .btn-primary, .card-links .btn-primary, .contact-resume .btn-primary { background: #f4f4f5; border: 1px solid #f4f4f5; color: #09090b; }
.cta-buttons .btn-primary:hover, .card-links .btn-primary:hover, .contact-resume .btn-primary:hover { background: #fff; border-color: #fff; color: #09090b; }
.cta-buttons .btn-secondary, .card-links .btn-secondary, .contact-resume .btn-secondary { background: rgba(24,24,27,.82); border: 1px solid #27272a; color: #d4d4d8; }
.cta-buttons .btn-secondary:hover, .card-links .btn-secondary:hover, .contact-resume .btn-secondary:hover { background: #18181b; border-color: #3f3f46; color: #fff; }

/* Toolkit: architectural specification matrix instead of four cards. */
.skills { padding-top: 82px; padding-bottom: 88px; }
.skills-heading { align-items: flex-end; margin-bottom: 38px; }
.skills-heading h2 { font-size: clamp(2.65rem,6vw,4.4rem); font-weight: 600; }
.skills-grid { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--editorial-line); border-bottom: 1px solid var(--editorial-line); }
.skill-category { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: center; gap: 1rem; min-height: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--editorial-line); border-radius: 0; transition: background-color .25s ease; }
.skill-category:last-child { border-bottom: 0; }
.skill-category:hover { transform: none; border-color: var(--editorial-line); background: rgba(24,24,27,.3); }
.skill-heading { grid-column: span 4; margin: 0; gap: 12px; }
.skill-index { order: -1; color: #52525b; font: .75rem var(--font-mono); letter-spacing: .16em; }
.skill-icon { width: auto; height: auto; background: none; color: #a1a1aa; font-size: .85rem; }
.skill-heading h3 { color: #e4e4e7; font-size: .94rem; font-weight: 500; }
.skill-list { grid-column: span 8; gap: 8px; }
.skill-pill { padding: 6px 11px; border: 1px solid rgba(63,63,70,.9); border-radius: 6px; background: rgba(24,24,27,.9); color: #d4d4d8; font: .75rem var(--font-mono); letter-spacing: .01em; }
.skill-pill:hover { transform: none; border-color: #52525b; background: #18181b; color: #fff; }

/* Credentials: dark image frames and restrained verification links. */
.certifications { padding-top: 84px; padding-bottom: 88px; border-top: 1px solid var(--editorial-line); }
.section-title { margin-bottom: 36px; text-align: left; font-size: clamp(2.2rem,5vw,3.7rem); font-weight: 600; }
.cert-grid { gap: 18px; }
.cert-card { overflow: hidden; border: 1px solid #27272a; border-radius: 14px; background: var(--editorial-surface); box-shadow: none; }
.cert-card:hover { transform: translateY(-3px); border-color: #3f3f46; box-shadow: 0 18px 38px rgba(0,0,0,.22); }
.cert-img-wrapper { position: relative; height: 220px; overflow: hidden; border-bottom: 0; border-radius: 14px 14px 0 0; background: #09090b; }
.cert-img-wrapper::after { position: absolute; right: 0; bottom: 0; left: 0; height: 44%; background: linear-gradient(to top,#121215,transparent); content: ''; pointer-events: none; }
.cert-img-wrapper img { opacity: .85; filter: brightness(.88) contrast(1.02); transition: opacity .3s ease, filter .3s ease, transform .5s ease; }
.cert-card:hover .cert-img-wrapper img { opacity: 1; filter: brightness(1) contrast(1); }
.cert-content { padding: 22px 22px 24px; }
.cert-content h3 { color: #f4f4f5; font-size: 1.05rem; line-height: 1.35; }
.issuer { margin-top: 12px; margin-bottom: 2px; color: #a1a1aa; font: .75rem var(--font-mono); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.date { margin-bottom: 17px; color: #52525b; font: .75rem var(--font-mono); font-style: normal; }
.cert-link { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; color: #a1a1aa; font: .67rem var(--font-mono); text-decoration: none; transition: color .2s ease; }
.cert-link i:first-child { color: var(--editorial-green); font-size: .62rem; }
.cert-link i:last-child { color: #71717a; font-size: .58rem; }
.cert-link:hover { color: #f4f4f5; }

/* Projects: one surface per project, with open detail columns. */
.page-intro { max-width: 760px; padding-top: 118px; margin-bottom: 52px; }
.page-title { font-size: clamp(3rem,7vw,5.4rem); font-weight: 600; }
.projects-wrapper { gap: 0; margin-top: 0; }
.project-showcase { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(30px,5vw,68px); padding: 48px 0; border: 0; border-bottom: 1px solid var(--editorial-line); border-radius: 0; background: transparent; }
.project-showcase:first-child { border-top: 1px solid var(--editorial-line); }
.project-media { gap: 18px; }
.media-content, .system-design-wrapper { border: 1px solid #27272a; border-radius: 12px; background: #09090b; }
.media-content { overflow: hidden; }
.system-design-wrapper { position: relative; min-height: 0; padding: 12px; }
.system-design-title { margin: 0 0 10px; color: #71717a; font: .65rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.system-design-image { cursor: zoom-in; border-radius: 7px; filter: brightness(.9); transition: filter .3s ease; }
.system-design-wrapper:hover .system-design-image { filter: brightness(1); }
.system-design-hint { position: absolute; right: 20px; bottom: 20px; margin: 0; padding: 5px 9px; border: 1px solid #3f3f46; border-radius: 6px; background: rgba(24,24,27,.92); color: #d4d4d8; font: .63rem var(--font-mono); }
.tech-tags { gap: 7px; }
.tech-tags span { padding: 5px 9px; border: 1px solid #27272a; border-radius: 5px; background: transparent; color: #71717a; font: .75rem var(--font-mono); letter-spacing: .01em; }
.tech-tags span:hover { transform: none; border-color: #52525b; background: #18181b; box-shadow: none; color: #e4e4e7; }
.project-details h3 { display: block; margin-bottom: 8px; color: #f4f4f5; font-size: clamp(1.8rem,3vw,2.55rem); font-weight: 600; }
.project-details h3::after { display: none; }
.project-tagline { margin-bottom: 0; color: #a1a1aa; font-size: .74rem; letter-spacing: .03em; }
.detail-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; margin: 28px 0 26px; padding-top: 24px; border-top: 1px solid var(--editorial-line); }
.detail-columns > .col { min-width: 0; padding: 0 26px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.detail-columns > .col + .col { padding: 0 0 0 26px; border-left: 1px solid var(--editorial-line); }
.detail-columns > .col:hover { border-color: inherit; box-shadow: none; }
.detail-columns h4 { margin-bottom: 16px; padding: 0; border: 0; color: #71717a; font: .75rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.detail-columns li { margin-bottom: 12px; padding-left: 0; color: #a1a1aa; font-size: .82rem; line-height: 1.65; }
.detail-columns li::before { display: none; }
.detail-columns li strong { color: #e4e4e7; font-weight: 500; }
.card-links { display: flex; flex-wrap: wrap; gap: 9px; }

/* Modal canvas for readable diagram inspection. */
.image-modal { background: rgba(9,9,11,.96); backdrop-filter: blur(12px); }
.modal-image-content { max-width: min(92vw,1400px); max-height: 88vh; border: 1px solid #3f3f46; border-radius: 10px; background: #fff; padding: 12px; object-fit: contain; }

/* Contact: asymmetric direct line plus directory. */
.contact-hero { padding-top: 118px; padding-bottom: 36px; text-align: left; }
.availability-badge { margin-bottom: 26px; padding: 7px 12px; border: 1px solid #27272a; border-radius: 6px; background: #18181b; color: #d4d4d8; font: .66rem var(--font-mono); font-weight: 400; }
.badge-dot { width: 6px; height: 6px; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.1); }
.contact-hero h2 { max-width: 760px; margin-bottom: 20px; font-size: clamp(3.2rem,8vw,6rem); font-weight: 600; }
.contact-hero p { max-width: 620px; margin: 0; }
.contact-grid.contact-editorial { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: clamp(40px,9vw,120px); padding-top: 48px; padding-bottom: 66px; }
.contact-eyebrow { margin-bottom: 18px; }
.contact-email-row { display: flex; align-items: center; gap: 12px; }
.contact-email { color: #f4f4f5; font-size: clamp(1.45rem,3vw,2.2rem); font-weight: 500; letter-spacing: -.04em; overflow-wrap: anywhere; transition: color .2s ease; }
.contact-email:hover { color: var(--editorial-green); }
.copy-email { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid #3f3f46; border-radius: 7px; background: #18181b; color: #a1a1aa; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.copy-email:hover, .copy-email.is-copied { border-color: #52525b; background: #27272a; color: #fff; }
.copy-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 4px 7px; border: 1px solid #3f3f46; border-radius: 5px; background: #18181b; color: #d4d4d8; font: .6rem var(--font-mono); opacity: 0; pointer-events: none; transform: translate(-50%,4px); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
.copy-email:hover .copy-tooltip, .copy-email.is-copied .copy-tooltip { opacity: 1; transform: translate(-50%,0); }
.contact-location { max-width: 470px; margin-top: 18px; color: #71717a; font: .68rem/1.7 var(--font-mono); }
.contact-directory { border-top: 1px solid var(--editorial-line); border-bottom: 1px solid var(--editorial-line); }
.directory-row { display: grid; grid-template-columns: minmax(90px,.65fr) minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 58px; border-bottom: 1px solid var(--editorial-line); color: #e4e4e7; text-decoration: none; }
.directory-row:last-child { border-bottom: 0; }
.directory-name { font-size: .9rem; font-weight: 500; }
.directory-description { color: #71717a; font: .64rem var(--font-mono); }
.directory-arrow { color: #71717a; font-size: .7rem; transition: color .2s ease, transform .2s ease; }
.directory-row:hover .directory-arrow { color: #f4f4f5; transform: translate(.125rem,-.125rem); }
.directory-row:hover .directory-name { color: #fff; }
.contact-resume { padding-top: 0; padding-bottom: 34px; }
.resume-inner { padding: 26px 0; border: 0; border-top: 1px solid var(--editorial-line); border-bottom: 1px solid var(--editorial-line); border-radius: 0; background: transparent; box-shadow: none; }
.resume-inner:hover { border-color: var(--editorial-line); transform: none; box-shadow: none; }
.resume-inner h3 { color: #e4e4e7; font-size: 1.1rem; }
.resume-inner p { color: #71717a; font-size: .8rem; }
.contact-meta { padding-top: 18px; padding-bottom: 66px; }
.meta-item { color: #71717a; font: .68rem var(--font-mono); }
.meta-item i { color: #71717a; }

/* Footer palette only; navbar selectors are intentionally absent. */
footer { border-top-color: var(--editorial-line); background: var(--editorial-bg); }
.footer-bottom { border-top-color: rgba(63,63,70,.5); }

@media (max-width: 900px) {
    .skill-heading, .skill-list { grid-column: 1 / -1; }
    .skill-heading { margin-bottom: 12px; }
    .project-showcase { display: flex; flex-direction: column; gap: 34px; }
    .project-details { display: block; }
    /* Native mobile snap carousel for the two project detail panels. */
    .detail-columns {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none;
        gap: 1.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .detail-columns::-webkit-scrollbar { display: none; }

    .detail-columns > .col,
    .detail-columns > .col + .col {
        flex: 0 0 85vw;
        min-width: 85vw;
        scroll-snap-align: center;
        padding: 0;
        border: 0;
    }

    .detail-columns > .col + .col {
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 768px) {
    .hero, .page-intro, .contact-hero { padding-top: 105px; }
    .skills-heading { align-items: flex-start; text-align: left; }
    .skills-heading h2, .section-title { font-size: 2.8rem; }
    .skill-category { padding: 18px 0; }
    .cert-grid { padding-right: 0; padding-left: 0; }
    .contact-hero { text-align: left; }
    .contact-grid.contact-editorial { grid-template-columns: 1fr; gap: 42px; padding-top: 30px; }
    .directory-row { grid-template-columns: minmax(80px,.6fr) minmax(0,1fr) auto; gap: 10px; }
    .directory-description { font-size: .58rem; }
    .resume-inner { align-items: flex-start; text-align: left; }
}

@media (max-width: 480px) {
    .contact-email-row { align-items: flex-start; }
    .contact-email { font-size: 1.3rem; }
    .directory-row { grid-template-columns: 1fr auto; }
    .directory-description { display: none; }
}