/* Spotify embed container: consistent card styling and responsive height */
.spotify-embed-container {
    width: 100%;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px var(--shadow-color);
    border-radius: 10px;
    overflow: hidden;
    margin: 12px 0 0 0;
    /* default compact height to avoid white gaps before JS normalization */
    height: 152px;
}

.spotify-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 720px) {
    .spotify-embed-container { height: 152px; }
}

@media (max-width: 520px) {
    .spotify-embed-container { height: 152px; }
}
/* Minimalist stylesheet (single, clean file)
     - Centered hero
     - Simple sticky header
     - Clean work grid with cards
    /* Minimalist stylesheet (single, clean file)
         - Centered hero
         - Simple sticky header
         - Clean work grid with cards
         - Accessible about modal
    */

    :root {
        --bg: #ffffff;
        --surface: #ffffff;
        --text: #0f1724;
        --muted: #6b7280;
        --about-blue: #0f3058;
        --accent: #2563eb;
        --max-width: 1100px;
        --gap: 28px;
        --radius: 8px;
        --blue-1: #2b69b8;
        --blue-2: #1e40af;
        --modal-backdrop-blur: 6px;
        --header-bg: rgba(255,255,255,0.86);
        --header-gradient-start: rgba(255,255,255,0.68);
        --header-gradient-end: rgba(255,255,255,0.82);
        --card-bg: #ffffff;
        --border-color: rgba(15,23,42,0.08);
        --shadow-color: rgba(6,16,36,0.04);
    }

    [data-theme="dark"] {
        --bg: #0a0e16;
        --surface: rgba(15,22,33,0.95);
        --text: #e2e8f0;
        --muted: #94a3b8;
        --about-blue: #3b82f6;
        --accent: #60a5fa;
        --blue-1: #3b82f6;
        --blue-2: #60a5fa;
        --header-bg: rgba(10,14,22,0.92);
        --header-gradient-start: rgba(10,14,22,0.75);
        --header-gradient-end: rgba(10,14,22,0.88);
        --card-bg: rgba(15,22,33,0.95);
        --border-color: rgba(226,232,240,0.08);
        --shadow-color: rgba(0,0,0,0.6);
    }

    [data-theme="dark"] .hero-title {
        background-image:
            linear-gradient(0deg, #e2e8f0 20%, rgba(226, 232, 240, 0) 45%),
            linear-gradient(90deg, #60a5fa 0%, #3b82f6 50%, #60a5fa 70%, #e2e8f0 85%, #e2e8f0 100%);
    }

    [data-theme="dark"] .modal-backdrop {
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.95) 100%);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: var(--text); font-size: 16px; line-height: 1.2; background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.3s ease, color 0.3s ease; }
    /* Ensure footer sits at bottom even on short pages */
    body { display: flex; flex-direction: column; min-height: 100vh; }
    main { flex: 1 0 auto; }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; height: auto; display: block; }

    .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

    /* Header / Top bar (light, thin separator) */
    header {
        position: sticky;
        top: 0;
        z-index: 60;
        background: linear-gradient(180deg, var(--header-gradient-start), var(--header-gradient-end));
        background-color: var(--header-bg);
        color: var(--text);
        -webkit-backdrop-filter: blur(6px) saturate(115%);
        backdrop-filter: blur(6px) saturate(115%);
        border-bottom: none;
        box-shadow: none;
        transition: background 0.3s ease, background-color 0.3s ease;
    }
    .header-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 20px;
        padding: 14px 0; /* compact height */
    }
    .brand a { color: var(--text); font-weight: 700; text-decoration: none; }
    .nav { display: block; }
    .nav-list { list-style: none; display: flex; gap: 36px; justify-content: center; align-items: center; padding: 0; margin: 0; }
    .nav-list li { display: inline-block; }
    .nav-list a { color: var(--muted); font-weight: 600; font-size: 0.95rem; padding: 6px 0; transition: color 0.3s ease; }
    .nav-list a:hover { color: var(--text); }
    .header-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
    .theme-toggle { 
        background: transparent; 
        border: none; 
        color: var(--text); 
        font-size: 1.1rem; 
        cursor: pointer; 
        padding: 6px 8px; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        transition: color 0.3s ease, transform 0.2s ease;
    }
    .theme-toggle:hover { color: var(--accent); transform: scale(1.1); }
    .project-request { color: var(--accent); font-weight: 700; border: none; background: transparent; padding: 6px 8px; text-decoration: none; transition: color 0.3s ease; }
    .project-request:hover { text-decoration: none; }

    /* Navigation text uses muted color variable */
    header .nav-list a { color: var(--muted); transition: color 0.3s ease; }
    header .nav-list a:hover { color: var(--text); }

    /* Hero */
    .hero { display: grid; place-items: center; text-align: center; padding: 160px 0 160px; }
    .hero-inner { max-width: 880px; }
    /* decorative glass bubble moved to header-row so it sits behind the top menu selection */
    .header-row { position: relative; }
    .header-row::before {
        /* positioned by JS via CSS variables for pixel-perfect anchoring
           --pill-left: distance from header-row left to pill left (px)
           --pill-right: distance from header-row right to pill right (px)
           --pill-top: vertical center of the pill inside header-row (px or %)
           --pill-height: pill height (px)
        */
        content: "";
        position: absolute;
        left: var(--pill-left, 50%);
        right: var(--pill-right, auto);
        top: var(--pill-top, 72%);
        /* center vertically; horizontal sizing determined by left+right */
        transform: translateY(-50%);
        height: var(--pill-height, 86px);
        background: var(--surface);
        border-radius: 999px;
        -webkit-backdrop-filter: blur(8px) saturate(118%);
        backdrop-filter: blur(8px) saturate(118%);
        box-shadow: 0 10px 28px var(--shadow-color);
        border: 1px solid var(--border-color);
        pointer-events: none;
        z-index: 0; /* behind header children */

        /* start hidden until JS measures & reveals the pill to avoid seam artifacts */
        opacity: 0;
        transform-origin: center;
        transition: opacity 160ms linear, left 240ms ease, right 240ms ease, top 240ms ease, height 240ms ease, box-shadow 240ms ease, transform 240ms ease;
    }

    /* Reveal the pill only when measurements are done to avoid rendering flashes */
    .header-row.pill-ready::before {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
    }

/* When an overlay (e.g. Strava fullscreen) is open, hide the decorative header bubble so it
   doesn't show behind the centered embed. We toggle `body.embed-open` from JS. */
body.embed-open .header-row::before {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 120ms linear;
}

    /* make nav items look like they sit inside the glass */
    .nav-list a { color: var(--text); }
    .brand a { color: var(--text); }

    /* ensure header children render above the bubble */
    .header-row > * { position: relative; z-index: 2; }

    /* reduce intensity on small screens */
    @media (max-width: 880px) {
        .header-row::before { display: none; }
    }
    @media (max-width: 1200px) {
        /* sensible CSS fallbacks for medium screens (in case JS is disabled) */
        .header-row { --pill-left: 40px; --pill-right: 40px; --pill-top: 64%; --pill-height: 78px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .header-row::before { transition: none; filter: blur(4px); }
    }

    /* Mobile-specific: make the fullscreen embed occupy the available viewport height
       without leaving a large gap at the bottom. This accounts for safe-area insets and
       the overlay padding used on mobile. */
    @media (max-width: 720px) {
        .strava-standalone.is-fullscreen {
            padding: calc(env(safe-area-inset-top, 12px) + 8px) 8px 8px 8px;
        }

        .strava-standalone.is-fullscreen .strava-embed-container {
            width: 100%;
            /* subtract the overlay's vertical padding (top + bottom) so the container fills remaining viewport */
            height: calc(100vh - (env(safe-area-inset-top, 12px) + 8px + 8px));
            max-height: 100vh;
            margin: 0;
            border-radius: 10px;
        }
    }

/* Reserve space when jumping to anchors so content doesn't sit under the sticky header */
html { scroll-padding-top: 110px; scroll-behavior: smooth; }

/* Header nav: remove focus outlines when clicked with mouse, keep focus-visible for keyboard users */
.header-row .nav-list a:focus { outline: none; }
.header-row .nav-list a:focus:not(:focus-visible) { box-shadow: none; }
    /* Larger hero with safer line height to avoid clipping and a diagonal gradient */
    .hero-title {
        display: inline-block;
        margin: 0 0 28px;
        font-size: clamp(36px, 6vw, 84px);
        line-height: 1.12;
        font-weight: 700;
        letter-spacing: -0.02em;
        padding-bottom: 10px;
            /* Use user's two-layer fade: vertical dark vignette + horizontal blue-to-dark sweep */
            /* widen the horizontal gradient and move its mid-blue stop further right so "Villatoro" keeps some blue */
            background-image:
                linear-gradient(0deg, #11181c 20%, rgba(17, 24, 28, 0) 45%),
                linear-gradient(90deg, #0f3058 0%, #006adc 50%, #0f3058 70%, #11181c 85%, #11181c 100%);
            /* precise positioning so the blue sits across the left and into the center-right of the heading */
            background-repeat: no-repeat;
            background-position: center center, 30% center;
            background-size: cover, 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        /* remove heavy stroke for a cleaner, higher-res look; rely on subtle shadows */
        -webkit-text-stroke: 0px rgba(0,0,0,0);
        transform: translateY(1px);
        transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms cubic-bezier(.2,.9,.2,1), filter 240ms ease;
        /* rendering hints for crisper text */
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        will-change: transform, filter;
        /* subtle layered shadow to increase perceived contrast and depth */
        text-shadow: 0 0.5px 0 rgba(255,255,255,0.02), 0 6px 20px rgba(6,16,36,0.10);
    }

    /* Remove per-word backgrounds — use a single continuous gradient across the whole H1 for a smooth left->right transition */
    /* ensure the H1 background spans wide enough to cover both words and be positioned for the desired left->right fade */
    .hero-title { background-size: cover, 240% 100%; background-position: center center, 28% center; }

    /* style per-word weights to match the reference: first word slightly lighter, last word bolder */
    .hero-first { font-weight: 700; letter-spacing: -0.01em; }
    .hero-last { font-weight: 700; }

    /* Keep hero static with minimal styling; remove hover/frost effects per user request */
    @media (prefers-reduced-motion: reduce) {
        .hero-title { transition: none !important; transform: none !important; }
    }

    /* Keyboard focus-visible support (minimal) */
    .hero-title:focus-visible { outline: 3px solid rgba(37,99,235,0.08); outline-offset: 6px; }
    .hero-sub { margin: 0 auto 24px; color: var(--muted); font-size: 1.125rem; max-width: 64ch; }

    .cta { display: inline-block; padding: 10px 14px; border-radius: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.06); color: var(--text); font-weight: 700; }

    /* Work grid */
    .work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin: 34px 0 64px; }
    .work-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        border-radius: 10px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 6px 18px var(--shadow-color);
        transition: transform 210ms ease, box-shadow 210ms ease, background 0.3s ease;
        min-height: 140px;
        align-items: stretch;
        color: var(--text);
    }
    .work-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(6,16,36,0.07); }
    
    /* Modern thumbnail with smooth image scaling and gradient overlay */
    .work-thumb { 
        width: 100%; 
        height: 180px; 
        border-radius: 10px; 
        overflow: hidden; 
        position: relative; 
        background: linear-gradient(135deg, #0b1220, #102233); 
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .work-thumb img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        display: block; 
        transition: transform 280ms cubic-bezier(.2,.9,.2,1); 
    }
    .work-card:hover .work-thumb img { 
        transform: scale(1.05); 
    }
    
    .work-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
    .work-desc { margin: 0; color: var(--muted); font-size: 0.95rem; }
    .project-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 7px; color: var(--accent); font-weight: 700; }

    .load-more-wrap { display:flex; justify-content:center; margin: 28px 0 60px; }
    .load-more-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text); padding: 12px 18px; border-radius: 8px; cursor:pointer; transition: background 0.3s ease, border-color 0.3s ease; }
    .load-more-btn:hover { background: var(--surface); }

    

    /* About modal */
    /* dark blurred vignette behind the card */
    .modal-backdrop {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(2,6,23,0.55) 0%, rgba(2,6,23,0.75) 45%, rgba(2,6,23,0.9) 100%);
        /* Use simpler opacity transition instead of backdrop-filter for better performance */
        opacity: 0;
        pointer-events: none;
        transition: opacity 250ms ease-out;
    }

    /* When modal is revealed via active class, animate the backdrop */
    #about-modal.is-active .modal-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Modal overlay container - controlled by aria-hidden on #about-modal */
    #about-modal {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center; /* vertical center */
        justify-content: center; /* horizontal center */
        padding: 40px; /* room from edges */
        z-index: 70;
        pointer-events: none;
        opacity: 0;
        transition: opacity 220ms ease;
    }

    #about-modal[aria-hidden="false"] {
        pointer-events: auto;
        opacity: 1;
    }

    /* The card/dialog */
    .modal-dialog {
        position: relative;
        z-index: 80;
        width: min(960px, 100%);
        max-width: 960px;
        max-height: calc(100vh - 80px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal {
        width: 100%;
        max-height: calc(100vh - 96px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 22px;
        align-items: start;
        background: var(--card-bg);
        color: var(--text);
        border-radius: 12px;
        padding: 28px;
        -webkit-backdrop-filter: blur(8px) saturate(1.08);
        backdrop-filter: blur(8px) saturate(1.08);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 30px var(--shadow-color);
        overflow: hidden;
        transform: translateY(6px);
        opacity: 0.98;
        transition: transform 360ms cubic-bezier(.2,.9,.2,1), opacity 360ms ease, box-shadow 360ms ease, backdrop-filter 360ms ease, border 340ms ease, background 360ms ease;
        will-change: transform, backdrop-filter, opacity;
    }

    /* When the modal is revealed, ease the card into place and let blur/background transit */
    #about-modal[aria-hidden="false"] .modal {
        transform: translateY(0);
        opacity: 1;
    }

    /* Contact modal should mirror About modal behavior: center, blur backdrop, no visual column */
    #contact-modal {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        z-index: 80;
        pointer-events: none;
        opacity: 0;
        transition: opacity 220ms ease;
    }

    #contact-modal[aria-hidden="false"] { pointer-events: auto; opacity: 1; }

    /* Contact modal: use the same frosted card visual as the About modal but keep the layout
       simplified (single column) so the form sits in a rounded white card centered on screen. */
    #contact-modal .modal {
        width: min(720px, 100%);
        max-width: 720px;
        grid-template-columns: 1fr;
        background: var(--card-bg);
        color: var(--text);
        border-radius: 12px;
        padding: 20px 20px 24px 20px;
        -webkit-backdrop-filter: blur(8px) saturate(1.08);
        backdrop-filter: blur(8px) saturate(1.08);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 30px var(--shadow-color);
        overflow: hidden;
        transform: translateY(6px);
        opacity: 0.98;
        transition: transform 360ms cubic-bezier(.2,.9,.2,1), opacity 360ms ease, backdrop-filter 360ms ease, background 360ms ease;
        will-change: transform, backdrop-filter, opacity;
    }

    /* Hide visuals inside the contact modal (we only want the form) */
    #contact-modal .modal-visual { display: none; }

    /* Make contact modal text and form use CSS variables */
    #contact-modal .modal,
    #contact-modal .modal-text,
    #contact-modal .contact-form,
    #contact-modal .contact-intro {
        color: var(--text);
    }

    #contact-modal label { color: var(--muted); font-weight: 600; }

    /* Ensure placeholders remain muted but inputs are readable */
    #contact-modal input::placeholder,
    #contact-modal textarea::placeholder { color: var(--muted); opacity: 0.5; }

    #contact-modal .modal-backdrop { position: absolute; inset: 0; opacity: 0; transition: opacity 250ms ease-out; }
    #contact-modal.is-active .modal-backdrop { opacity: 1; pointer-events: auto; }
    #contact-modal.is-open { pointer-events: auto; }
    #contact-modal.is-open .modal { transform: translateY(8px) scale(0.96); opacity: 0; }
    #contact-modal.is-active .modal { transform: translateY(0) scale(1); opacity: 1; }

    /* Sequencing classes for smoother animation control from JS */
    #about-modal.is-open { pointer-events: auto; }
    #about-modal.is-open .modal { transform: translateY(8px) scale(0.96); opacity: 0; }
    #about-modal.is-open .modal-backdrop { opacity: 0; }

    #about-modal.is-active { pointer-events: auto; }
    #about-modal.is-active .modal { transform: translateY(0) scale(1); opacity: 1; }
    #about-modal.is-active .modal-backdrop { opacity: 1; }

    .modal h3 { margin-top: 0; font-size: 1.6rem; color: var(--about-blue); }
    /* Mobile: About modal is scrollable with image at top (configured in @media max-width: 760px) */

/* Status badge for external services (GitHub Pages) */
.status-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: #6b7280;
    vertical-align: middle;
}
.status-operational { background: #10b981; }
.status-degraded_performance { background: #f59e0b; }
.status-partial_outage { background: #f97316; }
.status-major_outage { background: #ef4444; }
.status-under_maintenance { background: #6366f1; }

.status-checked { display: block; margin-top: 6px; color: #6b7280; font-size: 0.8rem; }

.perf-list { margin: 6px 0 0 8px; padding: 0; list-style: disc; color: var(--muted); }
.perf-list li { margin: 6px 0; font-size: 0.95rem; }
#browser-info { margin-top: 6px; color: var(--muted); font-size: 0.95rem; }

.perf-sample-btn { margin-top: 8px; background: transparent; border: 1px solid rgba(15,23,42,0.06); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight:700; }
.perf-sample-status { display: block; margin-top: 6px; color: #6b7280; font-size: 0.85rem; }

    /* Site Data modal mirrors About modal visuals and behavior */
    #site-data-modal {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        z-index: 80;
        pointer-events: none;
        opacity: 0;
        transition: opacity 220ms ease;
    }

    #site-data-modal[aria-hidden="false"] { pointer-events: auto; opacity: 1; }

    #site-data-modal .modal {
        width: min(960px, 100%);
        max-width: 960px;
        max-height: calc(100vh - 96px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 22px;
        align-items: start;
        background: var(--card-bg);
        color: var(--text);
        border-radius: 12px;
        padding: 28px;
        -webkit-backdrop-filter: blur(8px) saturate(1.08);
        backdrop-filter: blur(8px) saturate(1.08);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 30px var(--shadow-color);
        overflow: hidden;
        transform: translateY(6px);
        opacity: 0.98;
        transition: transform 360ms cubic-bezier(.2,.9,.2,1), opacity 360ms ease, box-shadow 360ms ease, backdrop-filter 360ms ease, border 340ms ease, background 360ms ease;
        will-change: transform, backdrop-filter, opacity;
    }

    #site-data-modal.is-open { pointer-events: auto; }
    #site-data-modal.is-open .modal { transform: translateY(6px) scale(0.997); opacity: 0.98; }
    #site-data-modal.is-active .modal { transform: translateY(0) scale(1); opacity: 1; }
    #site-data-modal.is-active .modal-backdrop { opacity: 1; backdrop-filter: blur(var(--modal-backdrop-blur)) saturate(1.05); -webkit-backdrop-filter: blur(var(--modal-backdrop-blur)) saturate(1.05); pointer-events: auto; }
    .modal-close { position: absolute; right: 18px; top: 4px; background: transparent; border: none; color: var(--muted); font-size: 1.15rem; cursor: pointer; transition: color 0.3s ease, transform 0.2s ease; }
    .modal-close:hover { color: var(--about-blue); transform: translateY(-1px); }

    /* modal-body contains two columns: text (left) and visual (right) */
    .modal-body { display: contents; }

    .modal-text {
        color: var(--text); font-size: 1rem; line-height: 1.7;
        padding-right: 8px;
        overflow: hidden;
        /* allow the text column to shrink inside grid/flex containers so internal scrolling works */
        min-height: 0;
    }

    /* Make the text column scroll internally if content exceeds modal height */
    .modal-text > * {
        margin: 0 0 1rem 0;
    }

    .modal-text {
        max-height: calc(100vh - 200px);
        overflow: auto;
        padding-right: 10px;
        /* ensure scroll works when the modal is a flex column on small screens */
        min-height: 0;
    }

    .modal-visual {
        border-radius: 10px; min-height: 320px; height: auto; background-size: cover; background-position: center right;
        align-self: stretch;
        /* visual column separation so the portrait pops against the frosted card */
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 30px rgba(6,16,36,0.06);
        /* remove solid white border to avoid harsh white edge */
        border: 1px solid rgba(255,255,255,0.18);
    }

    .modal-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    .modal-visual { background: var(--surface); background-size: cover; background-position: center; border-radius: 8px; min-height: 320px; transition: background 0.3s ease; }

    /* Make modal visuals (images) render without any white background and sit above the modal's glass layer */
    .modal-visual img { background: transparent; display: block; z-index: 5; }

    /* Ensure modal body text remains readable if background becomes very translucent */
    .modal-text { color: var(--text); }

    /* signature area placeholder */
    .modal .signature { margin-top: 18px; font-family: 'Brush Script MT', cursive; font-size: 1.2rem; }

     /* Prevent background scroll when modal open. Apply to both html and body to cover
         platforms where the root element is the scrolling container. Keep height:100% so
         position:fixed fallbacks behave consistently. */
     html.modal-open, body.modal-open { overflow: hidden; height: 100%; }

    /* Responsive: stack on small screens */
    @media (max-width: 760px) {
        /* hide the brand in the header on mobile so the top bar shows only the hamburger and About */
        .header-row > .brand { display: none; }
    /* modal visuals removed for small screens */
        .modal-dialog { width: calc(100% - 32px); }
    }

    /* Footer */
    footer { padding: 36px 0; color: var(--muted); text-align:center; font-size:0.95rem; }

    /* Footer row with social icons aligned to the right */
    .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .footer-social { display: flex; gap: 14px; align-items: center; }
    .footer-social a { color: var(--muted); font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; text-decoration: none; }
    .footer-social a:hover, .footer-social a:focus { background: rgba(0,0,0,0.03); color: var(--text); outline: none; }

    @media (max-width: 520px) {
        .footer-row { flex-direction: column; align-items: center; gap: 8px; }
    }

    /* Accessibility helpers */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border:0; }

    /* Responsive tweaks */
    @media (max-width: 880px) { .hero { padding-top: 56px; } .work-thumb { height: 160px; } }
    @media (max-width: 720px) {
        .nav { display: none; }
        .header-row { grid-template-columns: auto 1fr auto; }
        .project-request { font-size: 0.95rem; }
    }
    @media (max-width: 520px) { .hero-title { font-size: 28px; line-height: 1.04; padding-bottom: 10px; } .work-thumb { height: 140px; } .modal { padding: 18px; } }

    /* Library page: balanced crop with cover and moderate heights */
    #library .work-thumb { height: 220px; padding: 0; }
    #library .work-thumb img { object-fit: cover; }
    @media (max-width: 880px) { #library .work-thumb { height: 180px; } }
    @media (max-width: 520px) { #library .work-thumb { height: 160px; } }
    /* Optional object-position helpers retained for fine-tuning */
    #library .work-thumb img.poster-top { object-position: center top; }
    #library .work-thumb img.poster-center { object-position: center center; }

/* Reduce hero vertical space on small screens so content appears sooner */
@media (max-width: 520px) {
    .hero { padding-top: 40px; padding-bottom: 24px; }
}

/* Mobile nav: hide full nav and show hamburger */
.nav-toggle { display: none; background: transparent; border: none; padding: 8px; cursor: pointer; }
.nav-toggle .hamburger { display: inline-block; width: 22px; height: 3px; background: var(--text); position: relative; transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.nav-toggle .hamburger::before, .nav-toggle .hamburger::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 3px;
    background: var(--text);
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms ease;
    opacity: 1;
}
.nav-toggle .hamburger::before { /* upper line initial offset */ transform: translate(-50%, -50%) rotate(0) translateY(-6px); }
.nav-toggle .hamburger::after { /* lower line initial offset */ transform: translate(-50%, -50%) rotate(0) translateY(6px); }

@media (max-width: 720px) {
    .nav { display: none; }
    .nav-toggle { display: inline-flex; align-items: center; }
    .header-row { grid-template-columns: auto 1fr auto; }
    /* Mobile full-screen nav panel: to animate a top->bottom reveal we keep the nav present
       at all times on small screens and animate the Y scale (transform) from 0->1.
       This avoids display:none which can't be animated. */
    #main-nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 300;
        transform-origin: top center;
        transform: scaleY(0);
        opacity: 0;
        pointer-events: none;
        background: var(--card-bg);
        -webkit-backdrop-filter: blur(8px) saturate(1.08);
        backdrop-filter: blur(8px) saturate(1.08);
        padding: 28px 20px 20px 20px;
        overflow: auto;
        transition: transform 280ms ease-out, opacity 200ms ease-out, background 0.3s ease;
    }

    /* Open state - scale down->up animation shows the panel from the top */
    body.nav-open #main-nav {
        transform: scaleY(1);
        opacity: 1;
        pointer-events: auto;
    }

    /* When nav is open and the toggler is fixed, keep the toggler minimal so the hamburger morphs into the X */
    body.nav-open .nav-toggle {
        /* Toggler remains a minimal, invisible hit target; the menu panel provides the frosted surface */
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 12px);
        left: calc(env(safe-area-inset-left, 0px) + 12px);
        z-index: 340; /* sit above nav panel and Strava overlay */
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: transparent; /* no visible bubble */
        border: none;
        box-shadow: none;
        padding: 8px; /* keep a generous hit area */
        transform: translateZ(0);
        pointer-events: auto;
    }
    /* Fallback .nav-x kept hidden; hamburger pseudo-elements form the X */
    body.nav-open .nav-toggle .nav-x { display: none; }
    .nav-toggle .nav-x { display: none; }
    /* Convert hamburger to X when nav is open */
    body.nav-open .nav-toggle .hamburger { background: transparent; }
    body.nav-open .nav-toggle .hamburger::before { transform: translate(-50%, -50%) rotate(45deg); opacity: 1; }
    body.nav-open .nav-toggle .hamburger::after { transform: translate(-50%, -50%) rotate(-45deg); opacity: 1; }

    /* Remove all decorative chevrons unconditionally inside the mobile nav */
    #main-nav .nav-list li::after, body.nav-open .nav-list li::after { display: none !important; content: none !important; }
    /* Nav title (top-left) like the example */
    /* Nav title styling */
    #main-nav .nav-title { margin-left: 8px; color: var(--text); }
    #main-nav .nav-title-line1 { font-weight: 700; font-size: 1rem; }
    #main-nav .nav-title-line2 { font-size: 0.95rem; color: var(--muted); margin-top: 6px; }
    /* Ensure nav-list stacks vertically and appears centered-ish */
    body.nav-open .nav-list { display: flex; flex-direction: column; gap: 34px; margin-top: 28px; max-width: 640px; padding-left: 0; align-items: center; }
    /* Muted menu items like the reference (centered inside the mobile panel) */
    #main-nav .nav-list li { opacity: 0; transition: opacity 250ms ease; }
    body.nav-open .nav-list li { opacity: 1; }
    body.nav-open .nav-list li:nth-child(1) { transition-delay: 60ms; }
    body.nav-open .nav-list li:nth-child(2) { transition-delay: 100ms; }
    body.nav-open .nav-list li:nth-child(3) { transition-delay: 140ms; }
    body.nav-open .nav-list li:nth-child(4) { transition-delay: 180ms; }
    body.nav-open .nav-list a { color: var(--muted); font-size: 1.12rem; font-weight: 600; text-decoration: none; padding: 8px 12px; display: block; text-align: center; line-height: 1.8; width: 100%; max-width: 520px; transition: color 0.3s ease; }
    .nav-list a:hover { color: var(--text); }
    /* Remove chevrons and in-panel close — use header hamburger as the close (X) */
    .nav-list li { position: relative; }
    /* remove decorative chevron on mobile */
    .nav-list li::after { display: none; content: none; }
    /* hide any in-panel close button; header hamburger will act as the close control */
    #main-nav .nav-close { display: none !important; }
    /* make sure the hamburger sits above the full-screen panel so it remains visible as an X */
    .nav-toggle { z-index: 140; position: relative; }
    /* hide the brand in the header on mobile so the About action remains visible */
    .brand { display: none !important; }
    .header-actions { display: inline-flex; }
}

/* Sticky header on mobile: keep header fixed to the top and offset page content */
@media (max-width: 720px) {
    /* Keep header positioned but set z-index lower than the nav panel so the panel can cover the page.
       The toggler (.nav-toggle) keeps a higher z-index so it stays visible above the panel as an X. */
    header { position: fixed; inset: 0 0 auto 0; top: 0; left: 0; right: 0; z-index: 110; background: var(--header-bg); backdrop-filter: blur(6px); transition: background 0.3s ease; }
    /* Use a CSS variable set by JS to shift the page content below the header height */
    main, section, .hero, .container { transition: padding-top 160ms ease; }
    :root { --header-offset: 64px; }
    .content-offset { padding-top: var(--header-offset); }
}

/* On narrow screens: place hamburger at left, brand centered, actions on the right */
@media (max-width: 720px) {
    .header-row { align-items: center; grid-template-columns: auto 1fr auto; }
    .nav-toggle { grid-column: 1; justify-self: start; }
    .brand { grid-column: 2; justify-self: center; }
    .header-actions { grid-column: 3; justify-self: end; }
}

/* When nav is open convert hamburger to an X */
body.nav-open .nav-toggle .hamburger { background: transparent; }
/* Morph top and bottom lines into an X */
/* time the X formation slightly after the menu begins expanding for a cohesive feel */
body.nav-open .nav-toggle .hamburger::before { transform: translate(-50%, -50%) rotate(45deg); opacity: 1; transition-delay: 80ms; }
body.nav-open .nav-toggle .hamburger::after { transform: translate(-50%, -50%) rotate(-45deg); opacity: 1; transition-delay: 80ms; }
/* Hide the center bar visually when open by making its background transparent.
    Avoid transforming the .hamburger element itself so pseudo-elements remain visible. */
body.nav-open .nav-toggle .hamburger { transform-origin: center; background: transparent; }

/* Ensure the lines that form the X are high-contrast while the nav is open */
body.nav-open .nav-toggle .hamburger,
body.nav-open .nav-toggle .hamburger::before,
body.nav-open .nav-toggle .hamburger::after {
    background: #0b1220; /* strong dark color for the X */
    height: 3px;
    width: 22px;
}

body.nav-open .nav-toggle .hamburger::before, body.nav-open .nav-toggle .hamburger::after { display: block; }

/* Ensure toggler remains minimal: no extra frosted surface here — keep it transparent */
/* keep the toggler surface subtle when closed too (small visible circle) */
body.nav-open .nav-toggle { background: transparent; border: none; box-shadow: none; }

/* small visual when closed so the tappable target is clear on small devices */
.nav-toggle { background: transparent; }

/* Ensure the hamburger center bar is hidden when forming the X, but remains positioned correctly */
body.nav-open .nav-toggle .hamburger { background: transparent; }
/* Use precise centering so the X transforms around the exact center point and doesn't shift */
body.nav-open .nav-toggle .hamburger::before,
body.nav-open .nav-toggle .hamburger::after {
    left: 50%;
    top: 50%;
    transform-origin: center center;
    margin-left: 0; /* remove previous pixel-nudge centering */
}

/* Improve brand vertical centering on mobile (small nudge) */
@media (max-width: 720px) {
    .brand { align-self: center; display: flex; align-items: center; height: 100%; }
    .brand a { display: inline-block; line-height: 1; transform: translateY(6px); }
    /* Slightly reduce header padding on mobile to keep vertical rhythm */
    .header-row { padding: 10px 0; }
}

/* Improve About modal presentation on mobile: full-screen dialog with the portrait above the text */
@media (max-width: 720px) {
    /* Make the dialog fill most of the viewport so it feels like a full-screen sheet */
    /* keep the dialog sizing relative to the header; the container (#about-modal) will handle the top offset */
    .modal-dialog { width: 100%; max-width: 100%; max-height: calc(100vh - var(--header-offset, 64px)); display: flex; align-items: stretch; }
    /* position the modal container below the fixed header so the top isn't obscured */
    #about-modal { align-items: flex-start; padding-top: calc(var(--header-offset, 64px) + 12px); }
    /* Modal card becomes a vertical stack: portrait (visual) then text */
    /* Modal behaves like a sheet below the header on mobile: fixed positioning ensures native scrolling works reliably. */
    #about-modal .modal {
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(var(--header-offset, 64px) + 12px);
        bottom: 20px;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0;
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(6,16,36,0.06);
        overflow: hidden;
    }
    #about-modal .modal-body { display: flex; flex-direction: column; height: 100%; }
    /* Visual on top and sized to a sensible height — make the portrait smaller per request. */
    /* make portrait larger on mobile to use available space */
    #about-modal .modal-visual { display: flex; align-items: center; justify-content: center; order: -1; width: 100%; height: 42vh; border-radius: 8px 8px 0 0; overflow: hidden; flex-shrink: 0; background: var(--surface); }
    #about-modal .modal-visual img { width: 100%; height: 120%; object-fit: cover; object-position: center 20%; display: block; }
    /* Ensure the text column scrolls internally if content is long; use flex column so we can push signature downward */
    #about-modal .modal-text { display: block; order: 1; padding: 1rem; padding-bottom: 2rem; font-size: 0.95rem; line-height: 1.6; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
    /* spacer element: push the signature to the bottom using a flexible spacer (applies to the last paragraph before signature) */
    .modal-text .spacer { flex: 1 1 auto; }
    /* stack visual + text more tightly */
    .modal-body { display: flex; flex-direction: column; gap: 8px; }
    /* Make close button easier to reach on mobile */
    .modal-close { top: 8px; right: 10px; }

    /* Contact modal mobile stacking and sheet behavior: position below header, stack visual above form, and enable internal scrolling */
    #contact-modal { align-items: flex-start; padding-top: calc(var(--header-offset, 64px) + 12px); }
    #contact-modal .modal {
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(var(--header-offset, 64px) + 12px);
        width: auto;
        display: block;
        padding: 12px 12px 16px 12px;
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(6,16,36,0.06);
    }
    #contact-modal .modal-body { display: block; }
    #contact-modal .modal-visual { display: none; }
    #contact-modal .modal-text { display: block; }
    #contact-modal .contact-form { display: flex; flex-direction: column; gap: 8px; }
}

/* Desktop/site-wide Site Data modal layout is defined earlier (grid layout). */
/* Mobile-specific sheet behavior is applied only on narrow screens below. */

@media (max-width: 720px) {
    /* Site Data modal: mirror the mobile sheet behavior used by Contact/About so it feels native on phones */
    #site-data-modal {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        z-index: 80;
        pointer-events: none;
        opacity: 0;
        transition: opacity 220ms ease;
    }

    #site-data-modal[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
    #site-data-modal .modal {
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(var(--header-offset, 64px) + 12px);
        bottom: 12px;
        width: auto;
        height: auto;
        max-height: calc(100vh - var(--header-offset, 64px) - 24px);
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 12px 16px 12px;
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(6,16,36,0.06);
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }
}
#site-data-modal .modal-visual { order: -1; width: 100%; min-height: 120px; max-height: 36vh; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
#site-data-modal .modal-text { display: flex; flex-direction: column; gap: 8px; overflow: auto; -webkit-overflow-scrolling: touch; padding-right: 8px; flex: 1 1 auto; min-height: 0; }
#site-data-modal .modal { overflow: hidden; }


/* Further mobile modal polish */
@media (max-width: 520px) {
    .brand a { font-size: 1rem; font-weight: 700; }
    /* compact modal for very small phones */
    .modal { padding: 8px; gap: 6px; }
    .modal h3 { font-size: 1.2rem; margin-bottom: 6px; }
    .modal-text { font-size: 0.9rem; line-height: 1.45; }
    /* On very small phones, increase portrait slightly to maintain visual balance */
    .modal-visual { min-height: 160px; max-height: 40vh; }
    .modal-close { font-size: 1.25rem; padding: 8px 10px; }

/* Increase tappable area for modal close buttons on small screens to improve touch accessibility */
@media (max-width: 600px) {
    .modal-close {
        padding: 12px; /* larger touch target */
        min-width: 44px;
        min-height: 44px;
        right: 12px;
        top: 8px;
        border-radius: 8px;
        z-index: 120;
    }
    /* Ensure the close button responds to touches reliably */
    .modal-close:active { transform: none; }
}
    .modal .signature { text-align: center; display: block; margin-top: 8px; font-size: 1.0rem; }
    /* Make the about modal have full rounded corners on small screens */
    .modal { border-radius: 10px; }
    /* Ensure the modal title area doesn't stick under the header on very small phones */
    #about-modal .modal-dialog, #contact-modal .modal-dialog { padding-top: 10px; }

    /* Slightly reduce paragraph spacing inside the modal text to save vertical space */
    #about-modal .modal-text > * { margin-bottom: 0.6rem; }

    /* Make the card itself hide overflow while the text area scrolls smoothly */
    #about-modal .modal { overflow: hidden; }
    #about-modal .modal-text { overflow: auto; -webkit-overflow-scrolling: touch; }
}

    /* End of stylesheet */

.lifestyle-intro .lead {
    max-width: 70ch;
    margin: 0 auto 1rem;
    color: #ffffff;
    font-size: 1.05rem;
}

.lifestyle-highlight {
    background: var(--card-bg);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    padding: 2rem 1.5rem;
    border-radius: 12px;
    text-align: left;
    color: var(--text);
    width: 100%;
    margin: 0 0 2rem;
    box-shadow: 0 8px 32px var(--shadow-color);
    border: 1px solid var(--border-color);
    line-height: 1.7;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.lifestyle-highlight p {
    margin: 0 0 1.25rem 0;
    font-size: 1.05rem;
}

.lifestyle-highlight p:last-child {
    margin-bottom: 0;
}
#lifestyle .container { padding-top: 0; }
.lifestyle-grid { margin-top: 12px; }

.lifestyle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    /* allow consecutive card + caption pairs to occupy grid cells left-to-right */
    grid-auto-rows: auto;
}

/* Experience section styles */
.experience { display: block; }
.experience-grid {
    display: grid;
    /* slightly larger minimum so cards have breathing room and don't wrap text awkwardly */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 12px;
    align-items: start;
}

.job {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 18px var(--shadow-color);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: flex-start;
    transition: all 0.3s ease;
}
.job:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px var(--shadow-color);
}
.job-head { display:flex; flex-direction:column; gap:0.5rem; align-items:flex-start; }
.job-company { font-weight:700; color:var(--text); font-size:1.15rem; letter-spacing:-0.01em; }
.job-role { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.job-title { font-weight:500; font-size:0.95rem; color:var(--accent); }
.job-dates { color:var(--muted); font-size:0.85rem; font-weight:400; margin-left:0; white-space: nowrap; }

/* Meta row combining dates and the Read more toggle on one line */
.job-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 12px;
    position: relative; /* create a local positioning context for absolute toggle */
}
.job-meta .job-dates { margin: 0; padding-right: 160px; }
.job-meta .job-toggle { margin-top: 0; transform: none; align-self: auto; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); z-index: 2; }

/* Make the Experience heading span both columns on wide screens to prevent layout shifting */
.experience > h3 { grid-column: 1 / -1; margin-top: 0; }
.job-desc { margin-top:0.25rem; color:var(--muted); line-height:1.6; font-size:0.95rem; }
.job-desc a { color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color 0.2s ease; }
.job-desc a:hover { border-bottom-color:var(--accent); }

/* On wider screens place experience and skills side-by-side */

/* Make skills look like a frosted card and align heading with chips */
.skills {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    -webkit-backdrop-filter: blur(6px) saturate(1.02);
    backdrop-filter: blur(6px) saturate(1.02);
    border-radius: 10px;
    padding: 12px 16px 12px 8px;
    border: 1px solid rgba(15,23,42,0.04);
    box-shadow: 0 6px 18px rgba(6,16,36,0.04);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px; /* space from experience cards */
}
.skills h3 {
    margin: 0;
    padding: 0;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--text);
}
.skills ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.skills li {
    background: rgba(255,255,255,0.02);
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.92rem;
}

/* On wider screens show the heading and chips on one row */
@media (min-width: 880px) {
    .skills {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .skills h3 {
        margin: 0;
        padding-right: 12px;
        white-space: nowrap;
    }
    .skills ul {
        justify-content: flex-end;
        gap: 10px;
    }
}

.job-desc { position: relative; margin-top: 8px; }
/* Hidden by default: only job head (role/company/date) is shown until user expands */
.job-desc.is-hidden { display: none; }
.job-toggle {
    display: inline-block;
    margin-top: 10px;
    color: var(--accent);
    font-weight: 700;
    background: transparent;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    /* small visual nudge to move the button slightly right when not in the meta row */
    position: relative;
    right: -8px;
    align-self: center; /* works because .job is a column-flex container */
    text-align: center;
}
.job-toggle:focus { outline: none; }
.job-toggle:focus-visible { outline: 2px solid rgba(0,0,0,0.06); outline-offset: 3px; }

.lifestyle-grid .card {
    /* Adopt the same container model as .work-card: thumbnail + caption inside */
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: transform 210ms ease, background 0.3s ease, box-shadow 0.3s ease;
    align-items: stretch;
    color: var(--text);
    position: relative;
}

/* Disable per-card decorative pseudo-element so lifestyle cards read like Experience containers */
.lifestyle-grid .card::before { display: none; }

/* Make all cards a consistent shape so media fills them predictably */
.lifestyle-grid .card,
.lifestyle-grid .card.placeholder {
     /* default card sizing — allow specific cards (e.g., images) to control their media height
         but do not force all placeholders to a fixed aspect ratio which can prevent embeds from expanding */
     aspect-ratio: auto;
}

.lifestyle-grid .card:hover { transform: translateY(-4px); }

.lifestyle-grid .card.spotify-card {
    padding: 0;
}

.lifestyle-grid .graphic {
    /* reserved for optional decorative graphics inside the lifestyle grid */
    display: block;
}

.lifestyle-grid .card.placeholder {
    width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 12px;
        position: relative; /* create a local positioning context for absolute toggle */
    display: grid;
    /* ensure the middle row can fully expand and allow children to fill it */
    grid-template-rows: auto minmax(0, 1fr) auto; /* title / media / caption/actions */
    height: auto;
    /* ensure the date has room and doesn't collide with the absolutely positioned toggle */
    .job-meta .job-dates { padding-right: 72px; }
    max-height: none;
    /* allow card to size to its content so embeds can expand vertically */
    height: auto;
    max-height: none;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto; /* title / media / caption/actions */
    gap: 0.5rem;
    align-items: start;
    /* reduce horizontal padding so media has more width */
    padding: 0.25rem;
    padding-bottom: 0.4rem; /* keep a little bottom breathing room */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Like UI removed — styles deleted per user request. */

.lifestyle-grid .card.placeholder:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--shadow-color);
}

/* Ensure any media inside a card fills the middle grid row so no bottom gap remains */
.lifestyle-grid .card img,
.lifestyle-grid .card iframe,
.lifestyle-grid .card .lifestyle-photo,
.lifestyle-grid .card .spotify-embed-container {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-fit: cover;
    align-self: stretch;
    justify-self: stretch;
    background: transparent;
    z-index: 1;
}

.lifestyle-grid .card .lifestyle-photo { height: auto; min-height: 240px; aspect-ratio: 3 / 4; border-radius: 8px; object-fit: cover; }

/* Ensure video elements behave like images inside cards and autoplay previews remain tidy */
.lifestyle-grid .card video.lifestyle-photo {
    display: block;
    width: 100% !important;
    height: auto;
    min-height: 240px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Hide native controls on previews, reveal on hover for accessibility */
.lifestyle-grid .card video.lifestyle-photo::-webkit-media-controls { display: none !important; }
.lifestyle-grid .card video.lifestyle-photo { outline: none; }
/* Keep video height stable to avoid jumps on hover */
.lifestyle-grid .card.placeholder:hover video.lifestyle-photo { height: auto; }

/* Prevent inner scrolling and allow iframes injected by embeds to scale to their container
   Some third-party scripts insert inline width/height; use max-width/max-height and min-height:0
   on the grid middle row so it can shrink when necessary. */
.lifestyle-grid .card {
    /* let the middle row actually shrink if needed */
    min-height: 0;
}


.lifestyle-grid .card.placeholder { overflow: visible; }

/* Place titles and captions in rows 1 and 3 explicitly */
.lifestyle-grid .card > h1,
.lifestyle-grid .card > h2,
.lifestyle-grid .card > h3,
.lifestyle-grid .card > h4,
.lifestyle-grid .card .card-title {
    grid-row: 1;
    text-align: center;
}

.lifestyle-grid .card .caption,
.lifestyle-grid .card .card-footer {
    grid-row: 3;
}

.lifestyle-grid .caption {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    margin-bottom: 0.25rem;
    flex-grow: 0;
    flex-shrink: 0;
    grid-column: span 1;
    align-self: start;
    padding-top: 0.5rem;
    transition: color 0.3s ease;
}

/* Remove any background from captions so they don't form a dark band over the card */
.lifestyle-grid .card .caption,
.lifestyle-grid .caption,
.lifestyle-card .caption {
    background: none !important;
    padding: 0.35rem 0 0.5rem 0 !important;
    margin: 0 !important;
    color: var(--text);
}

.lifestyle-photo {
    width: 100%;
    /* taller photos */
    /* size images via aspect-ratio so cards adapt naturally */
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
    display: block;
    min-height: 240px; /* sensible minimum */
    /* round inner media to match the card's rounded look */
    border-radius: 12px;
    /* show top of the image first */
    object-position: top center;
    /* ensure the photo fills the available width inside the card */
    align-self: stretch;
    margin-top: 0;
    object-fit: cover;
}

/* Strava embed placeholder (minimal, predictable sizing) */
.strava-embed-placeholder {
    width: 100%;
    height: 360px;
    min-height: 320px;
    border-radius: 12px;
    display: block;
    background: var(--surface);
    overflow: hidden;
    transition: background 0.3s ease;
}

.lifestyle-grid .card.strava-card { min-height: 340px; }

/* In case scripts add absolute-positioned child elements, allow overflow on cards so
    the visual isn't hidden behind overflow:hidden on ancestors. This keeps layout
    stable while allowing embeds to render fully. */
.lifestyle-grid .card.placeholder { overflow: visible; }

.spotify-embed-container {
    width: 100%;
    max-width: none; /* allow full card width */
    height: 152px; /* compact base height */
    margin: 0.5rem 0;
    padding: 0; /* remove inner padding so iframe can fill cleanly */
    border-radius: 12px;
    position: relative; /* for absolute iframe positioning */
    overflow: hidden;
    /* transparent container so the embed background shows through */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
}

/* Standalone Strava embed: match Spotify container behavior so third-party iframe fills the area reliably */
.strava-standalone {
    padding: 18px 0; /* spacing around the embed */
}
.strava-standalone .strava-embed-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    height: 420px; /* comfortable default */
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background: transparent;
}
.strava-standalone .strava-embed-container .strava-embed-placeholder {
    position: absolute; inset: 0; width: 100%; height: 100%;
}

@media screen and (max-width: 900px) {
    .strava-standalone .strava-embed-container { height: 360px; }
}

@media screen and (max-width: 480px) {
    .strava-standalone .strava-embed-container { height: 280px; }
}

/* Increase Strava standalone container heights so the embed doesn't show an internal scrollbar.
   Desktop: 520px, Tablet: 420px, Mobile: 360px. These live after earlier rules to ensure they take precedence. */
.strava-standalone .strava-embed-container {
    /* Default preview: small, focused summary strip so the card shows only title + distance/time/elev.
       Full viewport expansion is available via the "View full activity" control. */
    height: 160px;
    min-height: 120px;
    max-height: 240px;
}
@media screen and (max-width: 900px) {
    .strava-standalone .strava-embed-container { height: 140px; min-height: 110px; }
}
@media screen and (max-width: 480px) {
    .strava-standalone .strava-embed-container { height: 120px; min-height: 96px; }
}

/* Strong safety overrides for third-party injected markup (Strava). These
   force iframes/wrappers to fill the .strava-embed-container and prevent
   ancestor overflow rules from clipping the visible content. */
.strava-standalone { overflow: visible; }
.strava-standalone .strava-embed-container { overflow: visible; }
.strava-standalone .strava-embed-container iframe,
.strava-standalone .strava-embed-container .strava-embed-wrapper,
.strava-standalone .strava-embed-container > * {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}

/* Some embeds include nested wrappers with transforms; neutralize overflow clipping on common ancestors */
.strava-standalone, .strava-standalone .container, .strava-standalone .strava-embed-container { -webkit-transform: none; transform: none; }

.spotify-iframe {
    width: 100%;
    /* force the iframe to strictly fill the available grid row and not grow on its own */
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box;
    /* round only the bottom corners so the embed matches the card's bottom radius */
    border-radius: 0 0 6px 6px;
    border: none;
    display: block;
}

/* Expand button for Strava embed */
.strava-expand-btn {
    display: inline-block;
    margin: 12px 0 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.98));
    border: 1px solid rgba(15,23,42,0.06);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}
.strava-expand-btn:focus { outline: 2px solid rgba(37,99,235,0.12); }

/* Fullscreen expanded state — center the embed and make it visually slightly smaller
   so the activity reads as a focused card rather than edge-to-edge content. */
.strava-standalone.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg);
    padding: calc(env(safe-area-inset-top, 12px) + 12px) 12px 12px 12px;
    transition: background 0.3s ease;
}
.strava-standalone.is-fullscreen .strava-embed-container {
    position: relative;
    width: min(1200px, 94%);
    height: auto;
    max-height: calc(100vh - 48px);
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--shadow-color);
    transform-origin: center center;
    transition: box-shadow 0.3s ease;
    /* do not scale — keep the embed at natural size */
    transform: none;
    /* Allow the injected content to flow and scroll naturally in fullscreen.
       Previously we forced children to absolute-fill which could clip bottom controls.
       In fullscreen prefer scrolling inside the container so the full activity and
       action buttons (e.g. "View on STRAVA") remain reachable. */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0;
}

/* Desktop-specific: reduce overlay padding and let the embed use more vertical space so
   the injected 'View on STRAVA' control isn't clipped on large viewports. */
@media (min-width: 1000px) {
    .strava-standalone.is-fullscreen {
        padding: 18px 24px;
    }

    .strava-standalone.is-fullscreen .strava-embed-container {
        width: min(1200px, 92%);
        /* prefer a near-full viewport height minus a small gutter so long embeds fit */
        height: calc(100vh - 48px);
        max-height: calc(100vh - 48px);
    }
}

/* Mobile override: ensure fullscreen embed fills the available viewport height
   and is centered vertically on small screens to avoid large white gaps. */
@media (max-width: 720px) {
    .strava-standalone.is-fullscreen {
        /* slightly smaller padding on phones */
        padding: calc(env(safe-area-inset-top, 12px) + 8px) 8px 8px 8px;
        justify-content: center;
    }

    .strava-standalone.is-fullscreen .strava-embed-container {
        width: 100%;
        /* fill viewport minus overlay padding so there's no extra bottom whitespace */
        height: calc(100vh - (env(safe-area-inset-top, 12px) + 8px + 8px));
        max-height: 100vh;
        margin: 0;
        border-radius: 10px;
    }
}

/* When open fullscreen hide the compact summary to avoid duplication */
.strava-standalone.is-fullscreen .strava-summary {
    display: none !important;
}
.strava-standalone.is-fullscreen .strava-expand-btn { align-self: flex-end; }

/* Close button shown in fullscreen overlay */
.strava-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 260;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 6px 18px var(--shadow-color);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.strava-close-btn[aria-hidden="true"] { display: none; }
.strava-standalone.is-fullscreen .strava-close-btn[aria-hidden="true"] { display: inline-flex; }
.strava-close-btn:focus { outline: 2px solid rgba(37,99,235,0.16); }

/* Prevent the close button from leaving a persistent text-selection or tap highlight
   and reduce any active transform artifacts across platforms. */
.strava-close-btn {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.strava-close-btn:active { transform: none; }
.strava-close-btn:focus { outline: none; }

/* When fullscreen, make the injected iframe fill the embedded container absolutely */
/* In non-fullscreen previews we still want to force injected wrappers to fill the small preview.
   But in fullscreen, let the embed's internal layout size naturally and be scrollable. */
.strava-standalone.is-fullscreen .strava-embed-container > * {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
}

/* Summary-style compact preview layout */
.strava-summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 12px; background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border-color); }
.strava-summary { transition: transform 210ms ease, box-shadow 210ms ease, background 0.3s ease, border-color 0.3s ease; }
.strava-summary:hover { transform: translateY(-6px); box-shadow: 0 10px 30px var(--shadow-color); }
.strava-summary-left { display:flex; flex-direction:row; gap:10px; align-items:center; min-width: 0; }
.strava-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.strava-meta { white-space: nowrap; opacity: 0.8; }
.strava-controls { display:flex; align-items:center; justify-content:center; }
.strava-controls .strava-expand-btn { margin: 0; }
.strava-title { font-weight:700; color: var(--text); }
.strava-meta { color: var(--muted); font-size: 0.9rem; }
.strava-stats { display:flex; gap: 12px; align-items:center; }
.strava-stats .stat { text-align:center; }
.strava-stats .stat-num { font-weight:800; color: var(--text); }
.strava-stats .stat-label { color: var(--muted); font-size: 0.85rem; }

.strava-controls { display:flex; gap: 8px; margin-top: 8px; }
.strava-expand-btn { background: transparent; border: 1px solid var(--border-color); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight:700; color: var(--text); transition: background 0.3s ease, border-color 0.3s ease; }
.strava-expand-btn:hover { background: var(--surface); }

/* Mobile: stack Strava summary pieces vertically to avoid overlap and left-shift issues */
@media screen and (max-width: 520px) {
    .strava-summary { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
    .strava-summary-left { flex-direction: column; align-items: flex-start; gap: 4px; }
    .strava-title { max-width: 100%; white-space: normal; }
    .strava-meta { white-space: normal; }
    .strava-stats { justify-content: flex-start; gap: 10px; }
    .strava-controls { justify-content: flex-end; }
    /* Ensure the preview embed container keeps full width and doesn't cause left shift */
    .strava-standalone { width: 100%; padding-left: 0; padding-right: 0; }
}

/* Hide all strava embed containers by default; reveal the container when its parent is fullscreen. */
.strava-embed-container { display: none; margin-top: 10px; }
.strava-standalone.is-fullscreen .strava-embed-container { display: block; }
.strava-standalone.is-fullscreen .strava-embed-container > * { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }

/* Removed decorative label - kept intentionally empty to avoid injected text */
.spotify-embed-container::before { content: none; }

/* Make iframe sit in the second row and fill available space cleanly */
.spotify-embed-container > iframe.spotify-iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 100%; }

@media screen and (max-width: 900px) {
    .spotify-embed-container { height: 152px; padding: 8px; }
}

@media screen and (max-width: 480px) {
    .spotify-embed-container { height: 152px; padding: 6px; }
}

/* keep a comfortable gap beneath the sticky header by deriving from the header offset
    This adapts automatically if the header height changes on different viewports. */
/* desktop padding is declared later inside a min-width media query so mobile overrides aren't stomped. */

/* ensure the lifestyle section sits below the sticky header when targeted */
#lifestyle { scroll-margin-top: var(--header-offset, 64px); }

/* Prevent any visible line or pseudo-element when a section becomes :target */
section:target { outline: none; box-shadow: none; }
section:target::before, section:target::after { display: none; }

/* Mobile-specific: reduce the visible gap under the header so the intro isn't too far down on phones */
@media (max-width: 720px) {
    /* subtract a small amount from the header-offset on mobile to tighten spacing */
    #lifestyle { padding-top: calc(var(--header-offset, 64px) - 35px); }
}


.lifestyle-card {
    background: var(--surface);
    -webkit-backdrop-filter: blur(8px) saturate(1.08);
    backdrop-filter: blur(8px) saturate(1.08);
    padding: 1.25rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px var(--shadow-color);
    border: 1px solid var(--border-color);
    min-height: 140px;
    margin-top: 6px;
    margin-bottom: 12px;
    padding-top: 0.75rem;
    width: 100%;
    position: relative;
    padding-right: 64px;
    color: var(--text);
    line-height: 1.65;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Reduce the top padding inside the lifestyle section container so the intro sits flush */
#lifestyle .container { padding-top: 0; }
.lifestyle-grid { margin-top: 12px; }

.lifestyle-card p,
.lifestyle-card .caption {
    color: var(--text);
    font-size: 1rem;
}

/* Make the caption a positioning context so the like button aligns to each caption */
.lifestyle-grid .card .caption { position: relative; display: block; width: 100%; padding-right: 92px; }

/* Like feature removed. */

@media screen and (max-width: 900px) {
    .lifestyle-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lifestyle-grid .card.placeholder {
        padding: 0.3rem;
        /* let the card size to its content on smaller screens */
        height: auto;
        max-height: none;
    }

    .lifestyle-photo {
        min-height: 360px;
        max-height: 520px;
    }
}

/* Fix left-shifted media on small screens: center media and remove extra horizontal offsets */
@media screen and (max-width: 520px) {
    /* Ensure the lifestyle grid cells use full width and media centers inside them */
    .lifestyle-grid { padding: 0; margin-left: 0; margin-right: 0; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    /* remove extra card-level horizontal padding and let media fill the card fully */
    .lifestyle-grid .card { padding-left: 0; padding-right: 0; display: block; }
    .lifestyle-grid .card .lifestyle-photo, .lifestyle-grid .card img, .lifestyle-grid .card video {
        margin: 0 auto !important;
        display: block;
        width: 100% !important; /* occupy full card width so no visual left gutter */
        height: auto !important;
        max-width: 100% !important;
        object-fit: cover;
    }
    .lifestyle-grid .card .caption { text-align: center; }
}

/* Strong fallback: force full-width media and center alignment on very small screens
   This helps when nested padding or earlier rules still allow a small left gutter. */
@media screen and (max-width: 520px) {
    .lifestyle-grid { padding-left: 8px !important; padding-right: 8px !important; }
    .lifestyle-card, .lifestyle-grid .card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .lifestyle-grid .card .lifestyle-photo,
    .lifestyle-grid .card img,
    .lifestyle-grid .card video {
        width: calc(100% - 0px) !important; /* occupy full inner width */
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* If any internal wrappers have left margins, neutralize them */
    .lifestyle-grid .card > * { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Center titles/captions universally under media */
.lifestyle-grid .card .caption,
.lifestyle-grid .card .card-title,
.lifestyle-card .caption,
.card .caption,
.card-title { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }

/* Mobile override: single-column layout and inline like button to prevent overlap on very narrow devices */
@media screen and (max-width: 520px) {
    .lifestyle-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .lifestyle-grid .card { padding-left: 8px; padding-right: 8px; }
    .lifestyle-grid .card .caption { padding-right: 0 !important; justify-content: center !important; align-items: center !important; }
    /* inline like control styles removed */
}

/* Strava summary: use a compact grid on small screens so the expand button sits aligned to the right next to stats */
@media screen and (max-width: 520px) {
    .strava-summary { display: grid; grid-template-columns: 1fr auto 92px; gap: 8px; align-items: center; }
    .strava-summary-left { grid-column: 1 / 2; }
    .strava-stats { grid-column: 2 / 3; display: flex; gap: 10px; align-items: center; }
    .strava-controls { grid-column: 3 / 4; justify-self: end; align-self: center; }
    .strava-controls .strava-expand-btn { margin: 0; }
}

@media screen and (min-height: 900px) {
    .lifestyle-grid .card.placeholder {
        height: auto;
        max-height: none;
    }

    .lifestyle-photo {
        min-height: 250px;
        max-height: 420px;
    }
}

/* Remove fixed iframe height on small screens; always fill container */
@media screen and (max-width: 430px) {
    .spotify-iframe { height: 100% !important; }
}

/* When mobile nav is open, disable background iframe interactions so the menu is reliably clickable */
body.nav-open iframe { pointer-events: none !important; }
/* Disable container interactions for embeds too (Spotify/Strava) */
body.nav-open .spotify-embed-container,
body.nav-open .strava-embed-container,
body.nav-open .strava-standalone { pointer-events: none !important; }

/* Specific suppression for Next.js overflow menu overlays reported: */
body.nav-open #__next .OverflowMenuBase_wrapper__CyfQs { pointer-events: none !important; }
body.nav-open [class*="OverflowMenuBase_wrapper"] { pointer-events: none !important; }

/* Final Spotify sizing overrides to avoid conflicting earlier rules */
.spotify-iframe { height: 100% !important; max-height: 100% !important; }
.spotify-embed-container { position: relative; overflow: hidden; }

#lifestyle {
    padding-top: calc(var(--header-offset, 64px) + 2px);
    width: 100%;
    max-width: 100%;
}

/* Ensure this desktop padding doesn't override the mobile-specific rule above.
   Wrap in a min-width query so mobile (<=720px) keeps the tightened spacing. */
@media (min-width: 721px) {
    #lifestyle { padding-top: calc(var(--header-offset, 64px) + 2px); }
}

main {
    padding-bottom: 8rem;
}

/* Strava embed container: behave like the spotify container so the embed fills the
   allotted area and doesn't cause the card to clip unexpectedly. Use a sensible
   default height but allow the embed placeholder presets to override it. */

.card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 901px) {
    .lifestyle-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lifestyle-grid .card.placeholder {
    /* desktop: let card size to its content */
    height: auto;
    max-height: none;
        padding: 0.35rem;
    }

    /* desktop-specific duplication removed; generic media rules handle sizing */
}

/* Contact form styling to match site theme */
.contact { padding: 80px 0; }
.contact h2 { font-size: 1.8rem; color: var(--text); margin-bottom: 6px; }
.contact-intro { color: var(--muted); margin-bottom: 18px; }
.contact-form { display: grid; gap: 14px; padding: 20px; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px var(--shadow-color); transition: background 0.3s ease; }
.contact-form .form-group { display: grid; gap: 6px; }
.contact-form label { font-weight: 600; color: var(--muted); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--surface); color: var(--text); font-size: 1rem; transition: background 0.3s ease, border-color 0.3s ease; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.submit-btn { display: inline-block; background: linear-gradient(180deg, #0f3058, #006adc); color: #fff; padding: 12px 16px; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; }
.submit-btn:hover { opacity: 0.95; }

/* Form actions: place submit and LinkedIn button inline on larger screens, stacked on small screens */
.contact-form .form-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.contact-form .linkedin-btn { display: inline-flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: transparent; border: 1px solid var(--border-color); color: var(--text); font-weight: 700; text-decoration: none; transition: background 0.3s ease, border-color 0.3s ease; }
.contact-form .linkedin-btn .linkedin-label { display: inline-block; }
.contact-form .linkedin-btn i { color: #0a66c2; font-size: 1.05rem; }
.contact-form .linkedin-btn:hover { background: var(--surface); }

@media (max-width: 520px) {
    .contact-form .form-actions { flex-direction: column; align-items: stretch; }
    .contact-form .linkedin-btn { justify-content: center; }
}

/* Contact modal header: heading left, actions (LinkedIn) right */
.contact-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.contact-header h3 { margin: 0; font-size: 1.25rem; }
.contact-header-actions { display: flex; gap: 8px; align-items: center; }

@media (max-width: 640px) {
    .contact-header { flex-direction: column; align-items: flex-start; }
    .contact-header-actions { width: 100%; display: flex; justify-content: flex-start; }
    .contact-form .linkedin-btn { width: auto; }
}