/*
=============================================================================
ERIC LEE HARRIS - MODERN RESPONSIVE GLASS WEBSITE
=============================================================================
The glass effect is used for surfaces that should feel separate from the page:
header, cards, menus, the résumé sheet, and footer. Ordinary text sits directly
on the page so the design does not become a blurry wall of translucent boxes.
=============================================================================
*/

:root {
    color-scheme: dark;
    --page: #050b13;
    --page-deep: #03070d;
    --ink: #f5f8fc;
    --muted: #aeb9c9;
    --muted-strong: #cbd4e0;
    --line: rgba(221, 232, 246, 0.14);
    --glass: rgba(15, 27, 44, 0.62);
    --glass-heavy: rgba(10, 20, 34, 0.86);
    --indigo: #6d6af7;
    --indigo-soft: #9a9cff;
    --forest: #3f9f68;
    --copper: #c77a3d;
    --copper-soft: #e2a46c;
    --warning: #e8b95c;
    --success: #60d394;
    --shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
    --radius-large: 1.7rem;
    --radius-medium: 1.1rem;
    --shell: 1180px;
    --header-height: 78px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 300px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: radial-gradient(circle at 12% 8%, rgba(74, 68, 220, 0.24), transparent 29rem),
        radial-gradient(circle at 86% 28%, rgba(36, 126, 75, 0.18), transparent 27rem),
        radial-gradient(circle at 48% 88%, rgba(166, 87, 34, 0.12), transparent 35rem),
        linear-gradient(180deg, #07111f 0%, var(--page) 56%, var(--page-deep) 100%);
    background-attachment: fixed;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

.site-shell {
    width: min(calc(100% - 2rem), var(--shell));
    margin-inline: auto;
}

.glass-panel {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018)),
        var(--glass);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
}

/* Graceful fallback: still looks intentional where backdrop-filter is absent. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-panel {
        background: var(--glass-heavy);
    }

}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 9999;
    padding: .75rem 1rem;
    color: #07101c;
    background: #f6d365;
    border-radius: .7rem;
    font-weight: 900;
}

.skip-link:focus {
    top: 1rem;
}

/* HEADER */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--line);
    background: rgba(4, 11, 20, 0.72);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.header-layout {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
}

.brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--ink);
    text-decoration: none;
}

.brand-logo {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid rgba(226, 164, 108, .35);
    border-radius: 1rem;
    box-shadow: 0 0 24px rgba(199, 122, 61, .22);
}

.brand-copy {
    min-width: 0;
    display: grid;
    line-height: 1.2;
}

.brand-copy strong {
    font-size: 1.02rem;
    letter-spacing: .015em;
}

.brand-copy small {
    overflow: hidden;
    margin-top: .25rem;
    color: var(--muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.primary-navigation {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.primary-navigation a {
    padding: .62rem .84rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    color: var(--muted-strong);
    text-decoration: none;
    font-weight: 750;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible {
    color: var(--ink);
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.06);
    transform: translateY(-1px);
}

/*
The current page needs to remain obvious after the pointer leaves it. A warm
  copper edge and restrained glow fit the site's palette without overpowering
  the navigation labels.
*/

.primary-navigation a[aria-current="page"] {
    color: var(--ink);
    border-color: rgba(226, 164, 108, .72);
    background: linear-gradient(145deg, rgba(199, 122, 61, .18), rgba(255,255,255,.055));
    box-shadow: 0 0 0 1px rgba(199, 122, 61, .16),
        0 0 18px rgba(199, 122, 61, .32),
        inset 0 1px 0 rgba(255,255,255,.10);
    text-shadow: 0 0 12px rgba(226, 164, 108, .25);
    transform: translateY(-1px);
}

.nav-toggle {
    width: 46px;
    height: 46px;
    display: none;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: .8rem;
    color: var(--ink);
    background: rgba(255,255,255,.045);
    cursor: pointer;
}

.nav-toggle span {
    width: 20px;
    height: 2px;
    display: block;
    margin: 2.6px auto;
    border-radius: 5px;
    background: currentColor;
}

/* TYPE / BUTTONS */

.eyebrow {
    margin: 0 0 .7rem;
    color: var(--copper-soft);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

h1, h2, h3, h4, p {
    overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
    line-height: 1.1;
}

.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .78rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 850;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    border-color: rgba(132, 127, 255, .42);
    background: linear-gradient(135deg, rgba(87, 80, 225, .95), rgba(48, 44, 142, .95));
    box-shadow: 0 14px 34px rgba(61, 54, 180, .24);
}

.button-secondary {
    background: rgba(255,255,255,.05);
}

/* HOME */

.hero-section {
    min-height: calc(100vh - var(--header-height));
    padding-block: clamp(3.5rem, 9vw, 7.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5.5rem);
}

.hero-copy h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(3rem, 7.1vw, 6.2rem);
    letter-spacing: -.058em;
}

.hero-lede {
    max-width: 700px;
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: clamp(1.06rem, 2vw, 1.27rem);
}

.hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.hero-logo-card {
    position: relative;
    isolation: isolate;
    padding: clamp(1rem, 3vw, 1.6rem);
    border-radius: var(--radius-large);
    overflow: hidden;
}

.hero-logo-card img {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 1.2rem;
}

.logo-glow {
    position: absolute;
    inset: 12% 12% 20%;
    z-index: 0;
    border-radius: 50%;
    background: conic-gradient(from 120deg, rgba(58,151,89,.34), rgba(74,68,220,.34), rgba(199,122,61,.35), rgba(58,151,89,.34));
    filter: blur(42px);
}

.logo-caption {
    position: relative;
    z-index: 2;
    margin-top: .8rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.logo-caption p {
    margin: .1rem 0 0;
    color: var(--muted);
    font-size: .88rem;
}

.status-light {
    width: .68rem;
    height: .68rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 16px rgba(96,211,148,.8);
}

.section-block {
    padding-block: clamp(4rem, 8vw, 7rem);
    border-top: 1px solid var(--line);
}

.section-heading {
    max-width: 780px;
    margin-bottom: 2rem;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4.2rem);
    letter-spacing: -.045em;
}

.section-heading > p:last-child {
    color: var(--muted);
    font-size: 1.05rem;
}

.feature-grid, .destination-grid, .project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
}

.feature-card {
    position: relative;
    min-height: 230px;
    padding: 1.45rem;
    border-radius: var(--radius-medium);
}

.feature-card h3, .feature-card h2 {
    margin: 2.8rem 0 .6rem;
    font-size: 1.35rem;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
}

.feature-number {
    position: absolute;
    top: 1.15rem;
    right: 1.25rem;
    color: rgba(255,255,255,.25);
    font-size: 1.4rem;
    font-weight: 900;
}

.destination-card {
    min-height: 285px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-large);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.destination-card:hover {
    transform: translateY(-5px);
}

.destination-card > span {
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.destination-card h3 {
    margin: .55rem 0 .7rem;
    font-size: 1.65rem;
}

.destination-card p {
    margin: 0;
    color: var(--muted);
}

.destination-card strong {
    margin-top: auto;
    padding-top: 2rem;
}

.accent-copper > span {
    color: var(--copper-soft);
}

.accent-indigo > span {
    color: var(--indigo-soft);
}

.accent-forest > span {
    color: #70ca91;
}

.accent-copper:hover {
    border-color: rgba(199,122,61,.58);
}

.accent-indigo:hover {
    border-color: rgba(109,106,247,.6);
}

.accent-forest:hover {
    border-color: rgba(63,159,104,.6);
}

/*
SOCIAL MEDIA LINKS
  --------------------------------------------------------------------------
  These are HTML links containing inline SVG icons. They stay sharp at every
  size and remain accessible to keyboard and screen-reader users.
----------------------------------------------------------------------------
*/

.social-connect {
    margin-top: 1rem;
    padding: clamp(1.2rem, 3vw, 1.65rem);
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr);
    align-items: center;
    gap: clamp(1.2rem, 4vw, 2.4rem);
    border-radius: var(--radius-large);
    overflow: hidden;
}

.social-connect-copy h3 {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    letter-spacing: -.025em;
}

.social-connect-copy > p:last-child {
    margin: .65rem 0 0;
    color: var(--muted);
}

.social-links {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.social-link {
    --social-accent: var(--indigo-soft);
    position: relative;
    min-width: 0;
    min-height: 84px;
    padding: .8rem .82rem;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    border: 1px solid rgba(255,255,255,.105);
    border-radius: 1rem;
    color: var(--ink);
    background: rgba(255,255,255,.035);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
    transition: transform 170ms ease,
        border-color 170ms ease,
        background 170ms ease,
        box-shadow 170ms ease;
}

.social-link::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--social-accent);
    opacity: .6;
    transform: scaleX(.28);
    transform-origin: left;
    transition: transform 170ms ease, opacity 170ms ease;
}

.social-link:hover,
.social-link:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--social-accent) 52%, transparent);
    background: color-mix(in srgb, var(--social-accent) 10%, rgba(255,255,255,.04));
    box-shadow: 0 15px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
    outline: none;
}

.social-link:hover::before,
.social-link:focus-visible::before {
    opacity: 1;
    transform: scaleX(1);
}

.social-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--social-accent) 38%, transparent);
    border-radius: .85rem;
    color: var(--social-accent);
    background: color-mix(in srgb, var(--social-accent) 12%, rgba(255,255,255,.025));
}

.social-icon svg {
    width: 25px;
    height: 25px;
    display: block;
    fill: currentColor;
}

.social-label {
    min-width: 0;
    display: grid;
    line-height: 1.25;
}

.social-label strong {
    font-size: .95rem;
}

.social-label small {
    overflow: hidden;
    color: var(--muted);
    font-size: .73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-arrow {
    color: var(--muted);
    font-size: 1rem;
    transition: color 170ms ease, transform 170ms ease;
}

.social-link:hover .social-arrow,
.social-link:focus-visible .social-arrow {
    color: var(--social-accent);
    transform: translate(2px, -2px);
}

.social-linkedin {
    --social-accent: #5ca8ff;
}

.social-facebook {
    --social-accent: #6aa5ff;
}

.social-youtube {
    --social-accent: #ff6277;
}

.social-instagram {
    --social-accent: #e080e5;
}

/* color-mix() fallback for older browsers. */

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .social-link:hover,
    .social-link:focus-visible {
        border-color: rgba(154,156,255,.48);
        background: rgba(255,255,255,.075);
    }

    .social-icon {
        border-color: rgba(255,255,255,.16);
        background: rgba(255,255,255,.055);
    }

}

/* GENERIC INNER PAGES */

.page-main, .resume-page {
    padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.page-hero {
    padding: clamp(1.5rem, 5vw, 3rem);
    border-radius: var(--radius-large);
}

.page-hero h1 {
    max-width: 880px;
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 5rem);
    letter-spacing: -.05em;
}

.page-hero > p:last-child {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.08rem;
}

.project-grid {
    margin-top: 1rem;
}

.project-card {
    min-height: 250px;
    padding: 1.45rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-medium);
    text-decoration: none;
}

.project-card h2 {
    margin: .6rem 0;
}

.project-card p {
    color: var(--muted);
}

.project-card strong {
    margin-top: auto;
}

.project-status {
    color: var(--copper-soft);
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.muted-card {
    opacity: .76;
}

.compact-grid {
    margin-top: 1rem;
}

/* RESUME PAGE / DOWNLOAD MENU */

.resume-page {
    max-width: 1060px;
}

.resume-intro {
    position: relative;
    z-index: 20;
    padding: clamp(1.35rem, 4vw, 2.2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-radius: var(--radius-large);
}

.resume-intro h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    letter-spacing: -.045em;
}

.resume-intro p {
    max-width: 680px;
    margin-bottom: 0;
    color: var(--muted);
}

.download-menu {
    position: relative;
    flex: 0 0 auto;
}

.download-trigger span {
    transition: transform 160ms ease;
}

.download-trigger[aria-expanded="true"] span {
    transform: rotate(180deg);
}

.download-options {
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    width: min(330px, calc(100vw - 2rem));
    padding: .55rem;
    border-radius: 1rem;
    background-color: rgba(7, 16, 28, .94);
    box-shadow: 0 25px 70px rgba(0,0,0,.55);
}

.download-options[hidden] {
    display: none;
}

.download-options a, .download-options button {
    width: 100%;
    display: grid;
    gap: .1rem;
    padding: .8rem .9rem;
    border: 0;
    border-radius: .72rem;
    color: var(--ink);
    background: transparent;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.download-options a:hover, .download-options a:focus-visible,
.download-options button:hover, .download-options button:focus-visible {
    background: rgba(255,255,255,.075);
    outline: none;
}

.download-options small {
    color: var(--muted);
}

.draft-notice {
    margin-block: 1rem;
    padding: .85rem 1rem;
    border-left: 4px solid var(--warning);
    border-radius: .75rem;
    color: var(--muted-strong);
    background-color: rgba(86, 63, 20, .26);
}

.resume-document {
    padding: clamp(1.25rem, 5vw, 3.3rem);
    border-radius: var(--radius-large);
    color: #eaf0f8;
}

.resume-header {
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.resume-header h2 {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 3.7rem);
}

.resume-header p {
    margin: .3rem 0 0;
    color: var(--muted);
}

.resume-header a {
    text-decoration-color: rgba(199,122,61,.65);
    text-underline-offset: .18em;
}

.resume-section {
    padding-top: 1.4rem;
}

.resume-section h3 {
    margin: 0 0 .8rem;
    color: var(--copper-soft);
    font-size: 1.3rem;
}

.resume-section > p {
    color: var(--muted-strong);
}

.competency-grid {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .28rem 2rem;
}

.job {
    padding-block: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.075);
}

.job:first-of-type {
    border-top: 0;
    padding-top: .3rem;
}

.job-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.job-heading h4 {
    margin: 0;
    font-size: 1.08rem;
}

.job-heading p {
    margin: .15rem 0 0;
    color: var(--muted-strong);
    font-weight: 650;
}

.job-heading span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .86rem;
    text-align: right;
}

.job ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
    color: var(--muted-strong);
}

.resume-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.resume-footnote {
    margin: 1.7rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .85rem;
}

/* FOOTER */

.site-footer {
    padding: 1rem 0 2rem;
}

.footer-layout {
    padding: 1.25rem 1.2rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1rem;
    border-radius: var(--radius-medium);
    overflow: visible;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.footer-brand img {
    width: 42px;
    height: 42px;
    border-radius: .7rem;
}

.footer-brand p {
    margin: .08rem 0 0;
    color: var(--muted);
    font-size: .78rem;
}

/*
Give the domain a restrained glass/neon halo. This is deliberately faint:
   it should feel illuminated, not like a giant neon sign.
*/

.footer-brand strong {
    text-shadow: 0 0 7px rgba(112, 126, 255, .28),
        0 0 15px rgba(74, 177, 132, .12);
}

/* Navigation and Contact Me now form the footer's middle action column. */

.footer-middle {
    display: grid;
    justify-items: center;
    gap: .72rem;
}

.footer-links {
    display: flex;
    gap: 1rem;
}

.footer-links a {
    color: var(--muted-strong);
    text-decoration: none;
}

/*
Keep Contact Me useful without letting it visually outweigh the brand and
   social controls. Width follows its label rather than filling a grid cell.
*/

.footer-contact-button {
    width: auto;
    min-width: 10rem;
    padding-inline: 1.25rem;
    justify-self: center;
}

/* Copyright stays quiet; Eric's name receives an even softer glow. */

.footer-meta {
    grid-column: 1 / -1;
    justify-self: end;
    display: grid;
    color: var(--muted);
    font-size: .75rem;
    text-align: right;
    margin-top: .05rem;
}

.footer-owner {
    text-shadow: 0 0 6px rgba(112, 126, 255, .20),
        0 0 12px rgba(74, 177, 132, .08);
}

/* RESPONSIVE BREAKPOINTS */

@media (max-width: 920px) {
    .social-connect {
        grid-template-columns: 1fr;
    }

    .hero-section {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .hero-logo-card {
        width: min(590px, 100%);
    }

    .feature-grid, .destination-grid, .project-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-layout {
        grid-template-columns: 1fr;
    }

    .footer-middle {
        justify-items: start;
    }

    .footer-contact-button {
        justify-self: start;
    }

    .footer-meta {
        text-align: left;
    }

}

@media (max-width: 720px) {
    .site-shell {
        width: min(calc(100% - 1.15rem), var(--shell));
    }

    .header-layout {
        flex-wrap: wrap;
        padding-block: .65rem;
    }

    .nav-toggle {
        display: grid;
    }

    .primary-navigation {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr;
        opacity: 0;
        transition: max-height 220ms ease, opacity 160ms ease, padding 220ms ease;
    }

    .primary-navigation.is-open {
        max-height: 420px;
        padding-bottom: .55rem;
        opacity: 1;
    }

    .primary-navigation a {
        width: 100%;
    }

    .hero-copy h1 {
        font-size: clamp(2.8rem, 14vw, 4.5rem);
    }

    .feature-grid, .destination-grid, .project-grid, .resume-two-column {
        grid-template-columns: 1fr;
    }

    .social-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resume-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .download-menu, .download-trigger {
        width: 100%;
    }

    .download-options {
        position: static;
        width: 100%;
        margin-top: .65rem;
    }

    .job-heading {
        flex-direction: column;
    }

    .job-heading span {
        text-align: left;
    }

    .competency-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        flex-wrap: wrap;
    }

}

@media (max-width: 430px) {
    .social-connect {
        padding: 1rem;
    }

    .social-links {
        grid-template-columns: 1fr;
    }

    .social-link {
        min-height: 76px;
    }

    .brand-copy small {
        display: none;
    }

    .brand-logo {
        width: 46px;
        height: 46px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

}

/* PRINT: turn the online résumé into a clean white document. */

@media print {
    :root {
        color-scheme: light;
    }

    body {
        color: #111;
        background: #fff;
        font-size: 10.5pt;
    }

    body::before, .site-header, .site-footer, .resume-intro, .draft-notice {
        display: none !important;
    }

    .resume-page {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .resume-document {
        padding: 0;
        border: 0;
        border-radius: 0;
        color: #111;
        background: #fff;
        box-shadow: none;
        backdrop-filter: none;
    }

    .resume-header, .job, .resume-footnote {
        border-color: #bbb;
    }

    .resume-header p, .resume-section > p, .job-heading p, .job-heading span,
    .job ul, .resume-footnote {
        color: #222;
    }

    .resume-section h3 {
        color: #204f86;
    }

    a {
        color: #111;
        text-decoration: none;
    }

    .job {
        break-inside: avoid;
    }

    @page {
        size: Letter;
        margin: .5in .62in;
    }

}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

}

/*
=========================================================
  ICON-ONLY SOCIAL MEDIA BAR
  ---------------------------------------------------------
  The visible names are intentionally omitted. Each link
  still has an aria-label, title, and hidden text so screen
  readers and keyboard users know where it goes.
=========================================================
*/

.social-icon-bar {
    width: fit-content;
    max-width: 100%;
    margin-top: 1.5rem;
    padding: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.1rem;
    background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.social-icon {
    --social-accent: rgba(255, 255, 255, 0.82);
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.9rem;
    color: var(--social-accent);
    background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.025)
        );
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.18);
    transition: transform 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.social-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
}

.social-icon:hover,
.social-icon:focus-visible {
    transform: translateY(-3px) scale(1.04);
    color: #ffffff;
    border-color: var(--social-accent);
    background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--social-accent) 24%, transparent),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--social-accent) 14%, transparent),
        0 12px 28px rgba(0, 0, 0, 0.26);
    outline: none;
}

.social-linkedin {
    --social-accent: #70b7f3;
}

.social-facebook {
    --social-accent: #78a9ff;
}

.social-youtube {
    --social-accent: #ff6b6b;
}

.social-instagram {
    --social-accent: #d98cff;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 420px) {
    .social-icon-bar {
        width: 100%;
        justify-content: center;
    }

    .social-icon {
        width: 3.15rem;
        height: 3.15rem;
        flex-basis: 3.15rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .social-icon {
        transition: none;
    }

    .social-icon:hover,
    .social-icon:focus-visible {
        transform: none;
    }

}

/* Keep the branded domain in its intended mixed-case form. */

.welcome-eyebrow {
    text-transform: none;
    letter-spacing: 0.12em;
}

/*
=========================================================
  VERSION 5 — MODERN, REAL-CONTENT POLISH
=========================================================
*/

/* Keep the three Home destination cards on one row at desktop widths. */

.destination-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Compact social group integrated into About Me. */

.social-connect-compact {
    width: fit-content;
    max-width: 100%;
    margin: 1.6rem auto 0;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.social-connect-compact > .eyebrow {
    margin: 0;
    white-space: nowrap;
}

.social-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.social-icon-button {
    --brand-color: #ffffff;
    width: 3rem;
    height: 3rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-color) 38%, transparent);
    border-radius: 0.9rem;
    color: var(--brand-color);
    background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--brand-color) 15%, transparent),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 9px 24px rgba(0, 0, 0, 0.2);
    transition: transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease,
        filter 160ms ease;
}

.social-icon-button svg {
    width: 1.42rem;
    height: 1.42rem;
    fill: currentColor;
}

.social-icon-button:hover,
.social-icon-button:focus-visible {
    transform: translateY(-3px);
    filter: saturate(1.15) brightness(1.08);
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 16%, transparent),
        0 12px 30px color-mix(in srgb, var(--brand-color) 23%, transparent);
    outline: none;
}

/* Recognizable current platform colors. */

.social-linkedin {
    --brand-color: #0A66C2;
}

.social-facebook {
    --brand-color: #1877F2;
}

.social-youtube {
    --brand-color: #FF0033;
}

/* Instagram uses its familiar multi-color gradient while the SVG stays white. */

.social-instagram {
    --brand-color: #E1306C;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(135deg, #833AB4 0%, #C13584 35%, #E1306C 58%, #F77737 78%, #FCAF45 100%);
}

.social-instagram:hover,
.social-instagram:focus-visible {
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(225, 48, 108, 0.17),
        0 12px 30px rgba(193, 53, 132, 0.32);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Two equal featured cards keep the Projects page balanced at wide sizes. */

.project-grid-live {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card-featured {
    max-width: none;
    min-height: 360px;
    padding: clamp(1.5rem, 4vw, 2.4rem);
}

.project-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.project-tech {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.project-feature-list {
    margin: 1.2rem 0 1.8rem;
    padding-left: 1.2rem;
    color: var(--muted);
}

.project-feature-list li + li {
    margin-top: 0.35rem;
}

@media (max-width: 720px) {
    .project-grid-live {
        grid-template-columns: 1fr;
    }

    .destination-grid {
        grid-template-columns: 1fr;
    }

    .social-connect-compact {
        width: 100%;
        flex-direction: column;
        gap: 0.65rem;
    }

    .social-icon-row {
        width: 100%;
    }

    .social-icon-button {
        width: 3.15rem;
        height: 3.15rem;
    }

}

/*
=========================================================
  VERSION 9 — DECODABLE MULTI-ROW BINARY GALAXY
=========================================================
*/

html {
    background: #050b13;
}

body {
    position: relative;
    isolation: isolate;
    background: radial-gradient(circle at 18% 14%, rgba(61, 70, 200, 0.15), transparent 30rem),
        radial-gradient(circle at 88% 34%, rgba(22, 89, 61, 0.11), transparent 27rem),
        linear-gradient(180deg, #07111f 0%, #050b13 58%, #04080d 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../images/binary-scripture-galaxy.svg?v=20260802-v9");
    background-repeat: no-repeat;
    background-position: center 3rem;
    background-size: min(1500px, 118vw) auto;
    opacity: 0.88;
    filter: saturate(1.05) contrast(1.04);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
            ellipse at 50% 44%,
            rgba(5, 11, 19, 0.10) 0%,
            rgba(5, 11, 19, 0.04) 44%,
            transparent 78%
        );
}

body > * {
    position: relative;
    z-index: 1;
}

.glass-panel,
.site-header,
.site-footer {
    background-color: rgba(8, 16, 28, 0.61);
    backdrop-filter: blur(13px) saturate(118%);
    -webkit-backdrop-filter: blur(13px) saturate(118%);
}

/* Footer social placement remains compact and expected. */

.footer-socials {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: end;
    gap: .55rem .8rem;
}

.footer-social-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-socials .social-icon-row {
    justify-content: flex-start;
}

.footer-socials .social-icon-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-basis: 42px !important;
}

.footer-socials .social-icon-button svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

/*
The first visit reveals the completed SVG by scaling/fading the whole
   galaxy. The actual rows remain readable and ordered in the SVG itself.
*/

body.galaxy-intro::before {
    animation: decodableGalaxyReveal 4.4s cubic-bezier(.22,.8,.25,1) both;
}

@keyframes decodableGalaxyReveal {
    0% {
        opacity: 0;
        transform: scale(0.91);
        filter: blur(4px) saturate(0.84);
    }

    42% {
        opacity: 0.42;
    }

    78% {
        opacity: 0.86;
        transform: scale(1.008);
        filter: blur(0.6px) saturate(1.03);
    }

    100% {
        opacity: 0.88;
        transform: scale(1);
        filter: blur(0) saturate(1.05) contrast(1.04);
    }

}

@media (max-width: 720px) {
    body::before {
        background-size: auto 110vh;
        background-position: 56% 4rem;
        opacity: 0.82;
    }

}

@media (prefers-reduced-motion: reduce) {
    body.galaxy-intro::before {
        animation: none;
    }

}

/* VERSION 11 — CONTACT SYSTEM */

body.contact-modal-open {
    overflow: hidden;
}

.contact-modal[hidden] {
    display: none;
}

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.contact-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,12,.8);
    backdrop-filter: blur(10px);
}

.contact-dialog {
    position: relative;
    width: min(760px,100%);
    max-height: 92vh;
    overflow: auto;
    padding: clamp(1.25rem,4vw,2rem);
    border: 1px solid rgba(127,159,190,.3);
    border-radius: 1.5rem;
    background: linear-gradient(145deg,rgba(17,29,47,.94),rgba(7,14,26,.92));
    box-shadow: 0 28px 80px rgba(0,0,0,.48);
}

.contact-close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .85rem;
    color: var(--text);
    background: rgba(255,255,255,.06);
    font-size: 1.65rem;
}

.contact-dialog-heading {
    padding-right: 3rem;
    margin-bottom: 1.35rem;
}

.contact-form {
    display: grid;
    gap: 1rem;
}

.form-field {
    display: grid;
    gap: .45rem;
}

.form-field label,.form-choice-group legend {
    font-weight: 750;
}

.optional-label,.field-help {
    color: var(--muted);
    font-size: .84rem;
}

.form-field input,.form-field textarea {
    width: 100%;
    border: 1px solid rgba(127,159,190,.3);
    border-radius: .95rem;
    color: var(--text);
    background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
    font: inherit;
}

.form-field input {
    min-height: 3.15rem;
    padding: .75rem .9rem;
}

.form-field textarea {
    min-height: 9rem;
    padding: .9rem;
    resize: vertical;
}

.form-field input:focus,.form-field textarea:focus {
    border-color: rgba(127,159,190,.78);
    box-shadow: 0 0 0 3px rgba(127,159,190,.15);
    outline: none;
}

.form-field.has-error input,.form-field.has-error textarea {
    border-color: rgba(255,92,92,.88);
    background: linear-gradient(145deg,rgba(150,31,45,.2),rgba(90,18,28,.1));
    box-shadow: 0 0 0 3px rgba(255,72,72,.13),inset 0 0 22px rgba(190,32,47,.11);
}

.field-error {
    min-height: 1.15em;
    margin: 0;
    color: #ff9999;
    font-size: .86rem;
    font-weight: 700;
}

.field-help {
    margin: 0;
}

.textarea-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: .82rem;
}

.form-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 0;
    padding: .85rem;
    border: 1px solid rgba(127,159,190,.22);
    border-radius: 1rem;
    background: rgba(255,255,255,.025);
}

.glass-choice {
    position: relative;
    cursor: pointer;
}

.glass-choice input {
    position: absolute;
    opacity: 0;
}

.glass-choice span {
    min-height: 2.55rem;
    padding: .65rem .9rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .8rem;
    background: rgba(255,255,255,.045);
}

.glass-choice input:checked+span {
    border-color: rgba(184,115,51,.75);
    background: rgba(184,115,51,.14);
    box-shadow: 0 0 0 3px rgba(184,115,51,.1);
}

.contact-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.contact-status {
    padding: .9rem 1rem;
    border: 1px solid rgba(76,190,119,.44);
    border-radius: 1rem;
    color: #b9f3cd;
    background: rgba(34,120,70,.14);
}

.contact-status.is-error {
    border-color: rgba(255,92,92,.55);
    color: #ffb2b2;
    background: rgba(150,31,45,.16);
}

.contact-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.resume-contact-actions {
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 1.5rem;
    padding: .8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.resume-call-button {
    text-decoration: none;
}

@media (max-width:560px) {
    .contact-modal {
        padding: .5rem;
        align-items: end;
    }

    .contact-dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: 1.4rem 1.4rem 0 0;
    }

    .contact-form-actions .button,.resume-contact-actions .button {
        flex: 1 1 100%;
    }

}

/*
=========================================================
  VERSION 12 — SHARP DECODABLE BINARY BANDS
=========================================================
*/

body::before {
    background-image: url("../images/binary-scripture-galaxy.svg?v=20260802-v12");
    background-repeat: no-repeat;
    background-position: center 2rem;
    background-size: min(1700px, 124vw) auto;
    opacity: 0.76;
    /*
    Do not blur the SVG. Keeping filter blur at zero is essential
           because each 8-bit group must remain visually traceable.
    */

    filter: none;
}

body::after {
    /*
    A very light central veil protects foreground text without
           obscuring the binary bands.
    */

    background: radial-gradient(
            ellipse at 50% 45%,
            rgba(5, 11, 19, 0.08) 0%,
            rgba(5, 11, 19, 0.025) 48%,
            transparent 80%
        );
}

.glass-panel,
.site-header,
.site-footer {
    /*
    Reduced blur prevents the binary from becoming unreadable through
           every glass panel while preserving the site's glass appearance.
    */

    backdrop-filter: blur(8px) saturate(116%);
    -webkit-backdrop-filter: blur(8px) saturate(116%);
}

@media (max-width: 720px) {
    body::before {
        background-size: auto 112vh;
        background-position: 54% 4rem;
        opacity: 0.68;
    }

}

/*
=========================================================
  VERSION 13 — CIRCUIT BACKGROUND + COMPACT CONTACT FORM
=========================================================
*/

/*
|--------------------------------------------------------------------------
| REMOVE THE OLD BINARY GALAXY
|--------------------------------------------------------------------------
|
| The body-level binary art was too difficult to position responsively.
| The new circuit artwork lives only inside the homepage hero.
|
*/

body::before,
body::after {
    content: none !important;
    display: none !important;
}

/*
|--------------------------------------------------------------------------
| HOMEPAGE HERO CIRCUIT ARTWORK
|--------------------------------------------------------------------------
*/

.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    min-height: 650px;
    padding-block: clamp(2rem, 6vw, 5rem);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
            90deg,
            rgba(4, 9, 16, 0.98) 0%,
            rgba(4, 9, 16, 0.86) 38%,
            rgba(4, 9, 16, 0.28) 72%,
            rgba(4, 9, 16, 0.08) 100%
        ),
        url("../images/circuit-data-flow.svg?v=20260802-v13")
        center right / cover no-repeat;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
            circle at 74% 45%,
            rgba(83, 112, 255, 0.10),
            transparent 34%
        );
}

.hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
}

.hero-circuit-art {
    position: relative;
    min-height: 520px;
    align-self: stretch;
    pointer-events: none;
}

.hero-circuit-symbol {
    position: absolute;
    display: grid;
    place-items: center;
    width: 86px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.25rem;
    color: var(--text);
    background: linear-gradient(
            145deg,
            rgba(13, 24, 40, 0.82),
            rgba(6, 12, 22, 0.66)
        );
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-family: ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-weight: 800;
}

.hero-circuit-symbol-code {
    top: 15%;
    left: 18%;
    color: #d69a63;
    border-color: rgba(184, 115, 51, 0.42);
}

.hero-circuit-symbol-database {
    right: 15%;
    bottom: 18%;
    color: #8ecb83;
    border-color: rgba(101, 168, 95, 0.42);
}

.hero-circuit-symbol-network {
    left: 46%;
    bottom: 7%;
    color: #79d8df;
    border-color: rgba(85, 191, 200, 0.42);
    letter-spacing: 0.12em;
}

/*
|--------------------------------------------------------------------------
| COMPACT CONTACT MODAL
|--------------------------------------------------------------------------
*/

.contact-modal {
    padding: 0.75rem;
}

.contact-dialog {
    width: min(980px, 100%);
    max-height: calc(100vh - 1.5rem);
    padding: 1.15rem 1.25rem;
    overflow: auto;
}

.contact-dialog-heading {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr);
    align-items: end;
    gap: 1.25rem;
    padding-right: 3rem;
    margin-bottom: 0.8rem;
}

.contact-dialog-heading h2 {
    margin: 0;
}

.contact-dialog-heading p {
    margin: 0;
}

.contact-form {
    gap: 0.7rem;
}

.contact-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.8rem;
}

.form-field {
    gap: 0.25rem;
}

.form-field input {
    min-height: 2.7rem;
    padding: 0.58rem 0.75rem;
}

.form-field textarea {
    min-height: 6.6rem;
    padding: 0.7rem 0.78rem;
}

.field-help,
.field-error {
    font-size: 0.76rem;
    line-height: 1.2;
}

.field-error {
    min-height: 0.9rem;
}

.contact-message-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}

.contact-message-heading span {
    color: var(--muted);
    font-size: 0.75rem;
}

.contact-preferences-row {
    display: grid;
    grid-template-columns: minmax(190px, 0.72fr) minmax(320px, 1.28fr);
    gap: 0.7rem;
}

.compact-choice-group {
    align-items: center;
    gap: 0.42rem;
    padding: 0.52rem 0.62rem 0.58rem;
}

.compact-choice-group legend {
    padding-inline: 0.3rem;
    font-size: 0.86rem;
}

.glass-choice span {
    min-height: 2.15rem;
    padding: 0.46rem 0.68rem;
    font-size: 0.86rem;
}

.call-time-group {
    width: fit-content;
    max-width: 100%;
}

.contact-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.contact-privacy {
    margin: 0;
    font-size: 0.78rem;
}

.contact-form-actions {
    justify-content: flex-end;
}

.contact-form-actions .button {
    min-height: 2.55rem;
    padding-block: 0.55rem;
}

.contact-status {
    padding: 0.62rem 0.78rem;
    font-size: 0.86rem;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    .hero-section {
        grid-template-columns: 1fr;
        min-height: 720px;
    }

    .hero-section::before {
        background: linear-gradient(
                180deg,
                rgba(4, 9, 16, 0.98) 0%,
                rgba(4, 9, 16, 0.88) 48%,
                rgba(4, 9, 16, 0.20) 100%
            ),
            url("../images/circuit-data-flow.svg?v=20260802-v13")
            center bottom / auto 68% no-repeat;
    }

    .hero-circuit-art {
        min-height: 310px;
    }

    .contact-dialog-heading {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

}

/*
|--------------------------------------------------------------------------
| PHONE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {
    .hero-section {
        min-height: 690px;
        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    .hero-section::before {
        background: linear-gradient(
                180deg,
                rgba(4, 9, 16, 0.99) 0%,
                rgba(4, 9, 16, 0.92) 51%,
                rgba(4, 9, 16, 0.22) 100%
            ),
            url("../images/circuit-data-flow.svg?v=20260802-v13")
            62% bottom / auto 52% no-repeat;
    }

    .hero-circuit-art {
        min-height: 250px;
    }

    .hero-circuit-symbol {
        width: 58px;
        border-radius: 0.9rem;
        font-size: 0.78rem;
    }

    .hero-circuit-symbol-code {
        top: 14%;
        left: 7%;
    }

    .hero-circuit-symbol-database {
        right: 5%;
        bottom: 18%;
    }

    .hero-circuit-symbol-network {
        left: 42%;
        bottom: 2%;
    }

    .contact-modal {
        padding: 0;
        align-items: end;
    }

    .contact-dialog {
        width: 100%;
        max-height: 96vh;
        padding: 1rem;
        border-radius: 1.3rem 1.3rem 0 0;
    }

    .contact-field-grid,
    .contact-preferences-row {
        grid-template-columns: 1fr;
    }

    .contact-field-grid {
        gap: 0.5rem;
    }

    .contact-dialog-heading {
        padding-right: 2.65rem;
        margin-bottom: 0.55rem;
    }

    .contact-dialog-heading #contact-desc {
        font-size: 0.88rem;
    }

    .contact-message-field textarea {
        min-height: 5.4rem;
    }

    .contact-bottom-row {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }

    .contact-form-actions {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
    }

    .contact-form-actions .button {
        width: 100%;
    }

}

/* VERSION 14 BUG FIXES */

html {
    background: #050a12;
}

body {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg,rgba(4,9,16,.88),rgba(4,9,16,.94));
}

body::before {
    content: "" !important;
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(4,9,16,.94) 0%,
            rgba(4,9,16,.74) 38%,
            rgba(4,9,16,.20) 78%,
            rgba(4,9,16,.08) 100%
        ),
        url("../images/circuit-data-flow.svg?v=20260803-v14") center/cover no-repeat;
}

body::after {
    content: "" !important;
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 78% 40%,rgba(86,110,255,.10),transparent 34%);
}

.hero-section {
    display: block;
    min-height: 620px;
    padding-block: clamp(3rem,8vw,6.5rem);
    overflow: visible;
}

.hero-copy {
    width: min(760px,100%);
}

.hero-section::before,.hero-section::after,.hero-circuit-art,.hero-circuit-symbol {
    content: none !important;
    display: none !important;
}

.contact-field-grid {
    width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: start;
}

.contact-field-grid>.form-field {
    min-width: 0;
    width: 100%;
}

.contact-field-grid input,.contact-field-grid textarea {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
}

[data-field-wrapper="phone"],[data-field-wrapper="subject"] {
    width: 100%;
    min-width: 0;
}

.contact-modal [hidden],#call-time-group[hidden],#response-method-group[hidden] {
    display: none !important;
}

@media (max-width:900px) {
    body::before {
        background: linear-gradient(180deg,rgba(4,9,16,.95),rgba(4,9,16,.20)),url("../images/circuit-data-flow.svg?v=20260803-v14") 64% center/auto 100vh no-repeat;
    }

    .hero-section {
        min-height: 660px;
    }

}

@media (max-width:620px) {
    body::before {
        background: linear-gradient(180deg,rgba(4,9,16,.98),rgba(4,9,16,.28)),url("../images/circuit-data-flow.svg?v=20260803-v14") 69% center/auto 100vh no-repeat;
    }

    .hero-section {
        min-height: 640px;
    }

    .contact-field-grid {
        grid-template-columns: 1fr;
    }

}

/*
=========================================================
  VERSION 15 - PRACTICAL CIRCUIT BACKGROUND
=========================================================
*/

body {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, #050a12 0%, #07101a 100%);
}

body::before {
    content: "" !important;
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(
            90deg,
            rgba(5, 10, 18, 0.98) 0%,
            rgba(5, 10, 18, 0.94) 34%,
            rgba(5, 10, 18, 0.42) 64%,
            rgba(5, 10, 18, 0.10) 100%
        ),
        url("../images/circuit-data-flow.svg?v=20260803-v15")
        right 7% top 7rem / min(1150px, 74vw) auto no-repeat;
}

body::after {
    content: "" !important;
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
            circle at 78% 26%,
            rgba(94, 121, 255, 0.08),
            transparent 28%
        );
}

.hero-section {
    display: block;
    min-height: 720px;
    padding-block: clamp(3.5rem, 8vw, 7rem);
}

.hero-copy {
    width: min(720px, 100%);
}

.hero-section::before,
.hero-section::after,
.hero-circuit-art,
.hero-circuit-symbol {
    content: none !important;
    display: none !important;
}

@media (max-width: 620px) {
    body::before {
        background: linear-gradient(
                180deg,
                rgba(5, 10, 18, 0.97),
                rgba(5, 10, 18, 0.97)
            ),
            linear-gradient(
                170deg,
                transparent 0 22%,
                rgba(184, 115, 51, 0.42) 22.15% 22.55%,
                transparent 22.7% 31%,
                rgba(113, 130, 255, 0.38) 31.15% 31.55%,
                transparent 31.7% 40%,
                rgba(103, 168, 103, 0.36) 40.15% 40.55%,
                transparent 40.7% 49%,
                rgba(97, 185, 200, 0.34) 49.15% 49.55%,
                transparent 49.7% 100%
            );
        background-attachment: fixed;
        background-size: cover;
    }

    body::after {
        display: none !important;
    }

    .hero-section {
        min-height: 0;
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }

}

/*
=========================================================
  VERSION 16 - APPROVED FAINT CIRCUIT-BOARD BACKGROUND
=========================================================
*/

/*
|--------------------------------------------------------------------------
| FIXED DESKTOP CIRCUIT BOARD
|--------------------------------------------------------------------------
|
| This uses the approved circuit-board artwork as a quiet, stationary
| texture. A dark overlay keeps text and glass panels readable.
|
*/

body {
    position: relative;
    isolation: isolate;
    background: #050a12;
}

body::before {
    content: "" !important;
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: linear-gradient(rgba(5, 10, 18, 0.52), rgba(5, 10, 18, 0.68)),
        url("../images/circuit-board-background-desktop.jpg?v=20260804-v16");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

body::after {
    content: "" !important;
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 18% 18%, rgba(97, 185, 200, 0.035), transparent 28%),
        radial-gradient(circle at 84% 30%, rgba(184, 115, 51, 0.035), transparent 30%);
}

/* Remove all prior hero-only circuit illustrations. */

.hero-section::before,
.hero-section::after,
.hero-circuit-art,
.hero-circuit-symbol {
    content: none !important;
    display: none !important;
}

/*
|--------------------------------------------------------------------------
| PHONE BACKGROUND
|--------------------------------------------------------------------------
|
| Phones use the same approved artwork, darkened slightly more so the
| smaller text remains comfortable to read.
|
*/

@media (max-width: 620px) {
    body::before {
        background-image: linear-gradient(rgba(5, 10, 18, 0.60), rgba(5, 10, 18, 0.72)),
            url("../images/circuit-board-background-mobile.jpg?v=20260804-v16");
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    body::after {
        display: none !important;
    }

}

/*
=========================================================
  VERSION 17 - CONTACT SUCCESS + STABLE CIRCUIT BACKGROUND
=========================================================
*/

/*
|--------------------------------------------------------------------------
| DESKTOP BACKGROUND SAFE AREA
|--------------------------------------------------------------------------
|
| The widescreen image keeps both hidden labels visible:
|
| - ELH
| - YHWH
|
| A blurred extension fills the widescreen edges without cropping the
| complete approved artwork from the center.
|
*/

body::before {
    background-image: linear-gradient(
            rgba(5, 10, 18, 0.50),
            rgba(5, 10, 18, 0.66)
        ),
        url("../images/circuit-board-background-desktop-v17.jpg?v=20260804-v17");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*
|--------------------------------------------------------------------------
| IPHONE / MOBILE BACKGROUND STABILITY
|--------------------------------------------------------------------------
|
| Mobile Safari changes the visible browser height while its address and
| toolbar controls expand or collapse. A regular 100vh background can jump
| when that happens.
|
| 100svh uses Safari's stable "small viewport" height. The background layer
| therefore stays the same size while the browser controls move.
|
| transform: translateZ(0) places the background on its own compositor
| layer, further reducing visual repaint jumps.
|
*/

@media (max-width: 620px) {
    body::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100vw;
        height: 100svh;
        min-height: -webkit-fill-available;
        background-image: linear-gradient(
                rgba(5, 10, 18, 0.57),
                rgba(5, 10, 18, 0.70)
            ),
            url("../images/circuit-board-background-mobile.jpg?v=20260804-v17");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: transform;
    }

}

/*
|--------------------------------------------------------------------------
| SUCCESSFUL CONTACT SUBMISSION
|--------------------------------------------------------------------------
*/

.contact-success-panel {
    min-height: 19rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.85rem;
    text-align: center;
}

.contact-success-panel[hidden] {
    display: none !important;
}

.contact-success-check {
    width: 5rem;
    height: 5rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(98, 211, 141, 0.62);
    border-radius: 50%;
    color: #c5f6d6;
    background: radial-gradient(
            circle,
            rgba(55, 157, 91, 0.28),
            rgba(25, 91, 50, 0.10)
        );
    box-shadow: 0 0 0 0.45rem rgba(63, 188, 107, 0.07),
        0 0 2.4rem rgba(63, 188, 107, 0.22);
    font-size: 2.6rem;
    font-weight: 900;
}

.contact-success-panel h3 {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
}

.contact-success-panel p {
    max-width: 34rem;
    margin: 0;
    color: var(--muted);
    font-size: 1.03rem;
    line-height: 1.65;
}

/* * Hide all normal form controls while displaying the success state. */

.contact-form.is-success > :not(.contact-success-panel) {
    display: none !important;
}

/* * The success state appears with a restrained scale/fade transition. */

.contact-modal.is-success .contact-dialog {
    animation: contact-success-arrive
        280ms
        ease-out
        both;
}

/*
* Closing is intentionally subtle:
*
* - slight scale down;
* - gentle upward movement;
* - fade to transparent.
*
* Rotation is avoided because it would feel too playful for the portfolio.
*/

.contact-modal.is-closing .contact-dialog {
    animation: contact-dialog-close
        340ms
        cubic-bezier(.4, 0, .2, 1)
        both;
}

.contact-modal.is-closing .contact-modal-backdrop {
    animation: contact-backdrop-close
        340ms
        ease
        both;
}

@keyframes contact-success-arrive {
    from {
        opacity: 0;
        transform: scale(0.975);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

@keyframes contact-dialog-close {
    from {
        opacity: 1;
        transform: translateY(0)
            scale(1);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(-0.5rem)
            scale(0.91);
        filter: blur(3px);
    }

}

@keyframes contact-backdrop-close {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}

@media (prefers-reduced-motion: reduce) {
    .contact-modal.is-success .contact-dialog,
    .contact-modal.is-closing .contact-dialog,
    .contact-modal.is-closing .contact-modal-backdrop {
        animation-duration: 1ms;
    }

}

/*
=========================================================
  VERSION 18 - CIRCUIT BACKGROUND BRIGHTNESS ADJUSTMENT
=========================================================
*/

/*
|--------------------------------------------------------------------------
| DESKTOP BACKGROUND VISIBILITY
|--------------------------------------------------------------------------
|
| Keep the exact approved image and positioning from Version 17.
|
| Only the dark overlay is reduced so the copper, steel-blue, green,
| circuit traces, ELH, and YHWH remain visible without overpowering
| the page content.
|
*/

body::before {
    background-image: linear-gradient(
            rgba(5, 10, 18, 0.27),
            rgba(5, 10, 18, 0.43)
        ),
        url("../images/circuit-board-background-desktop-v17.jpg?v=20260804-v18");
}

/*
|--------------------------------------------------------------------------
| MOBILE BACKGROUND VISIBILITY
|--------------------------------------------------------------------------
|
| Mobile keeps the stable 100svh fixed layer from Version 17.
| The overlay is reduced slightly less aggressively than desktop because
| text cards occupy more of the narrow phone viewport.
|
*/

@media (max-width: 620px) {
    body::before {
        background-image: linear-gradient(
                rgba(5, 10, 18, 0.37),
                rgba(5, 10, 18, 0.52)
            ),
            url("../images/circuit-board-background-mobile.jpg?v=20260804-v18");
    }

}

/*
=========================================================
  VERSION 19 - TRUE WIDESCREEN DESKTOP CIRCUIT BACKGROUND
=========================================================
*/

/*
|--------------------------------------------------------------------------
| DESKTOP ONLY
|--------------------------------------------------------------------------
|
| Version 17 used a portrait image centered over blurred side extensions.
| That produced a visible phone-shaped panel on wide monitors.
|
| This version uses a true 16:9 image that fills the complete desktop
| viewport. The mobile background and its stable Safari behavior remain
| unchanged.
|
*/

@media (min-width: 621px) {
    body::before {
        background-image: linear-gradient(
                rgba(5, 10, 18, 0.20),
                rgba(5, 10, 18, 0.34)
            ),
            url("../images/circuit-board-background-desktop-v19.jpg?v=20260804-v19");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

}

/*
=========================================================
  VERSION 21 — RESPONSIVE CIRCUIT PATTERN
  ---------------------------------------------------------
  This seamless SVG tile replaces the stretched poster-style
  background. It remains crisp and visibly circuit-like at any
  viewport size without cropping a focal image.
=========================================================
*/

body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;
    background: linear-gradient(rgba(4, 9, 16, .30), rgba(4, 9, 16, .42)),
        url("../images/circuit-pattern-v21.svg?v=20260805-v21") center top / 640px 420px repeat !important;
    transform: translateZ(0);
}

body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: radial-gradient(circle at 82% 16%, rgba(113,130,255,.09), transparent 30%),
        radial-gradient(circle at 12% 78%, rgba(184,115,51,.07), transparent 34%);
}

@media (max-width: 620px) {
    body::before {
        width: 100vw !important;
        height: 100svh !important;
        bottom: auto !important;
        background-size: 440px 289px !important;
        background-position: center top !important;
    }

}

/*
=========================================================
  VERSION 24 — FOOTER AT THE BOTTOM OF SHORT PAGES
  ---------------------------------------------------------
  The body is a vertical flex container. The main page content
  expands to consume unused viewport space, which keeps the footer
  against the bottom edge on short pages. Longer pages continue to
  scroll normally, with the footer following the content.
=========================================================
*/

body {
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    margin-top: auto;
}

/*
=========================================================
  VERSION 27 — PRIVATE LOGIN / AUTHENTICATION UI
  ---------------------------------------------------------
  Login, logout, /app/, and /schedule/ use the same glass
  language and circuit-board background as the public site.
=========================================================
*/

.auth-page,
.private-page {
    display: flex;
    align-items: center;
    padding-block: clamp(2.5rem, 7vw, 6rem);
}

.auth-shell,
.private-shell {
    width: min(calc(100% - 2rem), 980px);
}

.auth-card,
.protected-status-card {
    width: min(100%, 620px);
    margin-inline: auto;
    padding: clamp(1.35rem, 4vw, 2.25rem);
    border-radius: var(--radius-large);
}

.auth-card-wide {
    width: min(100%, 720px);
}

.auth-heading h1,
.private-heading h1,
.protected-status-card h1 {
    margin: 0;
    font-size: clamp(2.25rem, 7vw, 4.6rem);
    letter-spacing: -.045em;
}

.auth-heading > p:last-child,
.private-heading > p:last-child,
.protected-status-card > p {
    color: var(--muted);
}

.auth-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.auth-field {
    display: grid;
    gap: .48rem;
}

.auth-field label {
    font-weight: 800;
}

.auth-field input {
    width: 100%;
    min-height: 3.2rem;
    padding: .78rem .9rem;
    border: 1px solid rgba(221, 232, 246, .20);
    border-radius: .9rem;
    outline: none;
    color: var(--ink);
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        rgba(7, 15, 26, .72);
    font: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-field input:focus {
    border-color: rgba(154, 156, 255, .72);
    box-shadow: 0 0 0 3px rgba(109, 106, 247, .16);
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        rgba(7, 15, 26, .82);
}

.auth-field small,
.auth-footnote,
.protected-note {
    color: var(--muted);
    font-size: .9rem;
}

.auth-submit {
    width: 100%;
    margin-top: .35rem;
}

.auth-message {
    margin-top: 1.15rem;
    padding: .9rem 1rem;
    border-radius: .9rem;
    font-weight: 750;
}

.auth-message-error {
    border: 1px solid rgba(255, 116, 116, .45);
    color: #ffc0c0;
    background: rgba(136, 32, 45, .22);
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.4rem;
}

.private-heading {
    max-width: 760px;
    margin-bottom: 1.5rem;
}

.private-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.private-card {
    min-height: 255px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-large);
    text-decoration: none;
}

.private-card > span {
    color: #70ca91;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.private-card h2 {
    margin: .6rem 0 .7rem;
    font-size: 1.7rem;
}

.private-card p {
    margin: 0;
    color: var(--muted);
}

.private-card strong {
    margin-top: auto;
    padding-top: 1.8rem;
}

.private-card-muted > span {
    color: var(--copper-soft);
}

.protected-status-card {
    width: min(100%, 760px);
}

@media (max-width: 680px) {
    .auth-page,
    .private-page {
        align-items: flex-start;
        padding-block: 1.5rem 3rem;
    }

    .private-grid {
        grid-template-columns: 1fr;
    }

    .auth-actions .button {
        flex: 1 1 100%;
    }

}

/* v32 footer balance: when the footer stacks, restore natural left alignment. */

@media (max-width: 760px) {
    .footer-middle {
        justify-items: start;
    }

    .footer-contact-button {
        justify-self: start;
    }

    .footer-socials {
        justify-content: flex-start;
    }

    .footer-meta {
        grid-column: 1;
        justify-items: start;
        text-align: left;
    }

}

/* v35: copyright belongs to the Connect/social column. */

@media (max-width: 920px) {
    .footer-socials {
        justify-content: start;
    }

    .footer-meta {
        grid-column: 1 / -1;
        justify-self: start;
        text-align: left;
    }

}

/*
=========================================================
  v38 — PRIVATE WORKSPACE THREE-CARD GRID
  ---------------------------------------------------------
  The previous build had Login Settings outside the two-card wrapper. All
  three owner cards now share one grid so their outer edges, heights, padding,
  and rounded corners stay consistent.
=========================================================
*/

.private-workspace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.private-workspace-grid > .private-card {
    margin: 0;
    min-height: 255px;
    height: 100%;
    padding: 1.5rem;
    border-radius: var(--radius-large);
    overflow: hidden;
}

.private-card-account .button {
    align-self: flex-start;
    margin-top: auto;
}

/*
Give the footer action a little extra breathing room at the bottom so the
  Contact Me button cannot visually collide with the glass-panel edge.
*/

.footer-middle {
    padding-bottom: .2rem;
}

@media (max-width: 920px) {
    .private-workspace-grid {
        grid-template-columns: 1fr;
    }

}

/*
v40: QR belongs inside the printable resume document so browser Print / Save
  as PDF contains the same Current Resume link as the downloadable PDF.
*/

.resume-header {
    position: relative;
    padding-right: 92px;
}

.resume-current-qr {
    position: absolute;
    top: 0;
    right: 0;
    width: 76px;
    text-align: center;
    font-size: .62rem;
    line-height: 1.1;
}

.resume-current-qr img {
    display: block;
    width: 68px;
    height: 68px;
    margin: 0 auto .2rem;
}

@media print {
    .resume-header {
        padding-right: 82px !important;
    }

    .resume-current-qr {
        display: block !important;
        width: 70px;
    }

    .resume-current-qr img {
        width: 62px;
        height: 62px;
    }

}