/* deadlydarling.art — ported from kaitlinv-theme/style.css, vanilla + standalone */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

:root {
    --white: #f7faff;
    --black: #191919;
    --dark: #252525;
    --mid: #9a9ea5;
    --light: #dcdee2;
    --dd-mid: #ff5454;
    --dd-lite: #ff6699;
    --primary: var(--dd-mid);
    --accent: var(--dd-mid);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
    margin: 0; padding: 0;
    background: var(--white); color: var(--dark);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}
body.selection-dark ::selection { color: var(--white); background-color: var(--dd-mid); }
::selection { color: var(--white); background-color: var(--black); }

a { color: var(--dd-mid); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: 'Bebas Neue', 'Inter', sans-serif; letter-spacing: 0.02em; line-height: 1.05; }

/* Header */
.dd-header-bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 0.75rem; padding: 1rem 1.5rem;
    background: #000000d6; color: var(--white);
    position: sticky; top: 0; z-index: 10;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: background-color 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease;
}
/* Only the home page (which renders .dd-hero) needs the transparent→glassy
   behavior, because the hero's black bar shows through the nav. */
body:has(.dd-hero) .dd-header-bar {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body:has(.dd-hero) .dd-header-bar.is-scrolled {
    background: rgba(25, 25, 25, 0.85);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
.dd-header-logo { display: flex; align-items: center; gap: 0.5rem; color: var(--white); font-weight: 800; }
.dd-header-logo:hover { text-decoration: none; }
.dd-header-logo__mark { width: 28px; height: 28px; display: block; flex: 0 0 auto; }
.dd-dot { color: var(--dd-mid); }

.dd-header-nav { display: flex; gap: 1.25rem; font-size: 0.95rem; }
.dd-header-nav a { color: var(--white); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.dd-header-nav a:hover { border-bottom-color: var(--white); text-decoration: none; }

/* Main */
.dd-main { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

@keyframes dd-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Hero — outlined wordmark pulled up BEHIND the transparent sticky header so
   letters + nav form one continuous dark shape until the user scrolls. */
.dd-hero {
    position: relative;
    background: var(--white);
    margin: calc(-2.5rem - var(--dd-nav-h, 64px)) calc(50% - 50vw) 1.5rem;
    padding: 0;
    overflow: hidden;
}
.dd-hero-stage {
    --pointer-x: -9999px;
    --pointer-y: -9999px;
    --glow-radius: clamp(140px, 20vw, 320px);
    position: relative;
    width: 100%;
    line-height: 0;
    touch-action: none;
}
/* The two layers stack BAR + LETTERS as one shape. Flex-column, no gaps. */
.dd-hero-layer { display: flex; flex-direction: column; width: 100%; }
.dd-hero-layer--fx {
    position: absolute; inset: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(
        circle var(--glow-radius) at var(--pointer-x) var(--pointer-y),
        black 0%, rgba(0,0,0,0.85) 35%, rgba(0,0,0,0.4) 65%, transparent 100%);
            mask-image: radial-gradient(
        circle var(--glow-radius) at var(--pointer-x) var(--pointer-y),
        black 0%, rgba(0,0,0,0.85) 35%, rgba(0,0,0,0.4) 65%, transparent 100%);
}
.dd-hero-bar { width: 100%; height: var(--dd-nav-h, 64px); flex: 0 0 auto; background: var(--black); }
.dd-hero-layer--fx .dd-hero-bar { background: var(--dd-mid); }
.dd-hero-svg { display: block; width: 100%; height: auto; flex: 0 0 auto; margin-top: -10px; }
.dd-hero-svg .dd-hero-letters { fill: var(--black); }
.dd-hero-layer--fx .dd-hero-svg .dd-hero-letters { fill: var(--dd-mid); }

/* Logo mark — sits ON TOP of both letter layers, in the natural space gap.
   Positioned in wordmark viewBox coordinates (41 190 4447 720) so it scales and
   translates with the letters instead of drifting as the viewport resizes. */
.dd-hero-mark {
    --dd-wm-unit: calc(100vw / 4447);        /* 1 wordmark unit in stage px */
    --dd-wm-mark-cx: 2191;                   /* mark center X (wordmark units) */
    --dd-wm-mark-cy: 632;                    /* mark center Y (wordmark units) */
    --dd-wm-mark-w: 556;                     /* mark width (wordmark units) */
    --dd-wm-mark-ar: calc(803.82 / 960.94);  /* logo.svg height / width */
    position: absolute;
    width: calc(var(--dd-wm-mark-w) * var(--dd-wm-unit));
    height: auto;
    aspect-ratio: 960.94 / 803.82;
    /* X: offset from viewBox x=41, minus half-width */
    left: calc((var(--dd-wm-mark-cx) - 41) * var(--dd-wm-unit)
               - (var(--dd-wm-mark-w) * var(--dd-wm-unit)) / 2);
    /* Y: bar height, then SVG overlaps by 10px (margin-top:-10),
         then offset from viewBox y=190, minus half-height */
    top: calc(var(--dd-nav-h, 64px) - 10px
              + (var(--dd-wm-mark-cy) - 190) * var(--dd-wm-unit)
              - (var(--dd-wm-mark-w) * var(--dd-wm-unit) * var(--dd-wm-mark-ar)) / 2);
    pointer-events: none;
    z-index: 2;
    user-select: none;
}

.dd-hero-below {
    text-align: center;
    padding: 3rem;
    background: var(--white);
    color: var(--dark);
}
.dd-hero-below .dd-tagline {
    color: var(--mid); max-width: 38ch; margin: 0 auto; font-size: 1.05rem;
    animation: dd-fade-up 520ms ease-out both; animation-delay: 200ms;
}
.dd-hero-below .dd-hero-cta {
    animation: dd-fade-up 520ms ease-out both; animation-delay: 380ms;
}

@media (prefers-reduced-motion: reduce) {
    .dd-hero-svg--fx { display: none; }
}

/* Screen-reader-only utility */
.dd-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dd-hero-cta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-top: 2rem; padding: 0.4rem 0.9rem;
    color: var(--mid); font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    border: 1px solid transparent; border-radius: 999px;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dd-hero-cta:hover, .dd-hero-cta:focus-visible {
    color: var(--dd-mid); border-color: currentColor; text-decoration: none;
    transform: translateY(2px);
    outline: none;
}
.dd-hero-cta__chev { display: inline-block; animation: dd-chev 1.8s ease-in-out infinite; }
@keyframes dd-chev {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

.dd-empty { text-align: center; color: var(--mid); padding: 3rem 0; }

/* 404 */
.dd-404-block { text-align: center; padding: 4rem 1rem 5rem; max-width: 520px; margin: 0 auto; }
.dd-404__mark { width: clamp(120px, 30vw, 180px); height: auto; display: block; margin: 0 auto 1.5rem;
    animation: dd-fade-up 600ms ease-out both; }
.dd-404-block h1 { font-size: clamp(4rem, 14vw, 8rem); margin: 0; line-height: 1;
    animation: dd-fade-up 600ms ease-out both; animation-delay: 120ms; }
.dd-404__msg { color: var(--mid); margin: 1rem auto 2rem;
    animation: dd-fade-up 600ms ease-out both; animation-delay: 240ms; }
.dd-404-block .dd-hero-cta { animation-delay: 360ms; }

/* ==========================================================================
   Portfolio grid (ported from kaitlinv-theme)
   ========================================================================== */
.deadly-portfolio-modal-content { display: none !important; }

.deadly-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}
@media (max-width: 768px) { .deadly-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 256px) { .deadly-portfolio-grid { grid-template-columns: 1fr; } }

@keyframes dd-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.deadly-portfolio-card {
    position: relative; cursor: pointer; background: transparent; color: var(--dark);
    display: flex; flex-direction: column;
    transition: transform 0.15s ease;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    animation: dd-rise 360ms ease-out both;
    animation-delay: calc(min(var(--i, 0), 10) * 60ms);
}
.deadly-portfolio-card:focus-visible { outline: none; }

.deadly-portfolio-card__thumb {
    overflow: hidden;
    background: var(--light);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, outline-color 0.2s ease;
    aspect-ratio: 1 / 1;
    outline: 2px solid transparent;
    outline-offset: 4px;
}
.deadly-portfolio-card:hover .deadly-portfolio-card__thumb,
.deadly-portfolio-card:focus-visible .deadly-portfolio-card__thumb {
    box-shadow: 0 12px 26px rgba(255, 84, 84, 0.22), 0 6px 14px rgba(0, 0, 0, 0.12);
}
.deadly-portfolio-card:focus-visible .deadly-portfolio-card__thumb { outline-color: var(--dd-mid); }

.deadly-portfolio-card__thumb img {
    display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1;
    transition: transform 0.35s ease;
}
.deadly-portfolio-card:hover .deadly-portfolio-card__thumb img,
.deadly-portfolio-card:focus-visible .deadly-portfolio-card__thumb img { transform: scale(1.04); }

.deadly-portfolio-card__placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--mid); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
}

.deadly-portfolio-card__meta { padding: 0.5rem 0.25rem; text-align: center; }
.deadly-portfolio-card__title { font-weight: 600; }

body.deadly-portfolio-open { overflow: hidden; }

/* Overlay shell */
.deadly-portfolio-overlay {
    position: fixed; inset: 0; display: flex; z-index: 99999;
    align-items: center; justify-content: center; font-family: inherit;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.deadly-portfolio-overlay.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 180ms ease, visibility 0s linear 0s;
}
.deadly-portfolio-overlay__backdrop {
    position: absolute; inset: 0;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.deadly-portfolio-overlay__inner {
    position: relative;
    width: min(960px, calc(100vw - 2rem));
    max-height: 90vh; margin: 0 auto;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    display: flex; flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 1rem;
    transform: scale(0.98);
    transition: transform 180ms ease;
}
.deadly-portfolio-overlay.is-open .deadly-portfolio-overlay__inner { transform: scale(1); }
.deadly-portfolio-overlay__content {
    position: relative; padding: 1.5rem 1.75rem 1.75rem; overflow-y: auto;
    max-height: calc(90vh - 2rem);
    background: var(--white); color: var(--dark);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    transition: opacity 120ms ease;
}
.deadly-portfolio-overlay__content.is-swapping { opacity: 0; }
.deadly-portfolio-overlay.is-contact .deadly-portfolio-overlay__inner { width: min(480px, calc(100vw - 2rem)); }

.deadly-portfolio-overlay__close {
    position: fixed; top: 1rem; right: 1rem; border: none; padding: 0;
    width: 38px; height: 38px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: var(--black); font-size: 1.5rem; line-height: 1;
    cursor: pointer; z-index: 100001;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.deadly-portfolio-overlay__close:hover {
    background: var(--black); color: var(--primary); transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
}

.deadly-portfolio-overlay__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    border: none; padding: 0; width: 44px; height: 44px; border-radius: 999px;
    display: none; align-items: center; justify-content: center;
    font-size: 1.4rem; background: var(--black); color: var(--white); cursor: pointer;
    z-index: 100000; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.deadly-portfolio-overlay.has-nav .deadly-portfolio-overlay__nav { display: inline-flex; }
.deadly-portfolio-overlay__nav--prev { left: 1rem; }
.deadly-portfolio-overlay__nav--next { right: 1rem; }
.deadly-portfolio-overlay__nav:hover {
    background: var(--primary); color: var(--black);
    transform: translateY(-50%) scale(1.05); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
}

/* Modal content */
.deadly-portfolio-modal__body { display: flex; flex-direction: column; gap: 1.25rem; }
.deadly-portfolio-modal__header { display: flex; justify-content: center; }
.deadly-portfolio-modal__header h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); }
.deadly-portfolio-modal__category { margin: 0; text-align: center; text-transform: uppercase;
    letter-spacing: 0.15em; font-size: 0.75rem; color: var(--mid); }
.deadly-portfolio-modal__media { display: flex; flex-direction: column; gap: 1rem; }
.deadly-portfolio-modal__image img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; }

.deadly-portfolio-modal__video-wrapper {
    position: relative; overflow: hidden; background: #000; aspect-ratio: 16 / 9;
}
.deadly-portfolio-modal__video-wrapper iframe {
    position: absolute !important; inset: 0; display: block;
    width: 100% !important; height: 100% !important; border: 0;
}
.deadly-portfolio-modal__video-overlay {
    position: absolute; inset: 0; z-index: 2; cursor: pointer;
    border-radius: inherit; overflow: hidden;
}
.deadly-portfolio-modal__video-overlay img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deadly-portfolio-modal__video-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.65); border: 2px solid rgba(255, 255, 255, 0.6);
    display: flex; align-items: center; justify-content: center; color: var(--white);
    padding-left: 4px;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}
.deadly-portfolio-modal__video-overlay:hover .deadly-portfolio-modal__video-play {
    background: var(--primary); border-color: var(--primary);
    transform: translate(-50%, -50%) scale(1.08);
}
.deadly-portfolio-modal__video-wrapper.is-playing .deadly-portfolio-modal__video-overlay { display: none; }

.deadly-portfolio-modal__gallery {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem;
}
.deadly-portfolio-modal__gallery-item {
    animation: dd-rise 360ms ease-out both;
    animation-delay: calc(min(var(--i, 0), 12) * 50ms);
}
.deadly-portfolio-modal__gallery-item img {
    display: block; width: 100%; height: auto; border-radius: 8px; object-fit: cover;
}
.deadly-portfolio-modal__summary { margin: 0; }
.deadly-portfolio-modal__summary p:last-child { margin-bottom: 0; }

/* Single page */
.dd-single { max-width: 800px; margin: 0 auto; }
.dd-single h1 { font-size: clamp(2rem, 6vw, 4rem); margin: 0.25rem 0; }
.dd-single .dd-cat { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; color: var(--mid); margin: 0 0 1rem; }
.dd-single__media img { display: block; width: 100%; height: auto; }
.dd-single__summary { font-size: 1.1rem; margin: 1rem 0; }
.dd-single__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.dd-single__gallery img { width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; transition: transform 180ms ease, box-shadow 180ms ease; }
.dd-single__gallery img:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }

/* Lightbox (reuses .deadly-portfolio-overlay shell) */
.deadly-portfolio-overlay.is-lightbox .deadly-portfolio-overlay__inner {
    width: auto; max-width: none; max-height: none;
    background: transparent; border: 0; box-shadow: none; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    display: flex; align-items: center; justify-content: center;
}
.deadly-portfolio-overlay.is-lightbox .deadly-portfolio-overlay__content {
    max-height: none; overflow: visible; padding: 0;
    background: transparent; color: inherit; box-shadow: none;
    display: flex; align-items: center; justify-content: center;
}
.dd-lightbox-figure { margin: 0; display: flex; align-items: center; justify-content: center; }
.dd-lightbox-video {
    width: min(900px, calc(100vw - 4rem)); aspect-ratio: 16/9;
}
.dd-lightbox-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.dd-lightbox-figure img {
    display: block;
    max-width: calc(100vw - 6rem);
    max-height: calc(100vh - 4rem);
    width: auto; height: auto;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
@media (max-width: 640px) {
    /* Nav bar height — only reserved when nav is active */
    .deadly-portfolio-overlay { --dd-nav-h: 0px; }
    .deadly-portfolio-overlay.has-nav { --dd-nav-h: 44px; }

    /* Shrink overlay vertically so centered children never sit under the bar */
    .deadly-portfolio-overlay.has-nav { bottom: var(--dd-nav-h); }

    /* Dark backdrop when displaying a lightbox — letterbox reads as intentional */
    .deadly-portfolio-overlay.is-lightbox .deadly-portfolio-overlay__backdrop {
        background-color: rgba(0, 0, 0, 0.92);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Lightbox images — small side padding, no radius */
    .dd-lightbox-figure img {
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - var(--dd-nav-h));
        border-radius: 0;
    }

    /* Portfolio modal: edge-to-edge, fills viewport minus nav bar */
    .deadly-portfolio-overlay__inner {
        width: 100vw; height: calc(100vh - var(--dd-nav-h));
        max-width: none; max-height: calc(100vh - var(--dd-nav-h));
        padding: 0; border: 0; background: transparent;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        box-shadow: none;
    }
    /* Absolute-positioned content bulletproofs the fill — percentage heights
       of flex children can be unreliable in Chrome when the parent's height
       comes from calc(). Pinning to inner's edges avoids that ambiguity. */
    .deadly-portfolio-overlay__content {
        position: absolute;
        inset: 0;
        padding: 4rem 1rem 1.5rem;
        max-height: none;
        overflow-y: auto;
        box-shadow: none;
    }

    /* Contact modal keeps its desktop-style framed look on mobile */
    .deadly-portfolio-overlay.is-contact .deadly-portfolio-overlay__inner {
        width: min(480px, calc(100vw - 2rem));
        height: auto;
        max-height: 90vh;
        padding: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    }
    .deadly-portfolio-overlay.is-contact .deadly-portfolio-overlay__content {
        position: relative;
        inset: auto;
        padding: 1.5rem 1.75rem 1.75rem;
        max-height: calc(90vh - 2rem);
        overflow-y: auto;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    }

    /* Nav bar: fixed at viewport bottom, two 50vw flush rectangles */
    .deadly-portfolio-overlay__nav {
        position: fixed;
        top: auto; bottom: 0; transform: none;
        width: 50vw; height: var(--dd-nav-h);
        border-radius: 0; box-shadow: none;
    }
    .deadly-portfolio-overlay__nav--prev { left: 0; }
    .deadly-portfolio-overlay__nav--next { right: 0; }
    .deadly-portfolio-overlay__nav:hover {
        transform: none; box-shadow: none;
    }
}
.dd-back { font-size: 0.9rem; color: var(--mid); }

/* Post body (body_html on /portfolio/{slug}) */
.dd-single__body { line-height: 1.65; }
.dd-single__body p { margin: 1em 0; }
.dd-single__body strong { color: var(--black); }
.dd-body-figure { display: block; margin: 2em auto; max-width: 100%; }
.dd-body-figure img {
    display: block; width: 100%; height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Primary link buttons — modal CTA + inline post-body buttons */
.dd-btn, .dd-body-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--dd-mid); color: var(--black);
    border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 700; text-decoration: none;
    transition: background 180ms ease;
}
.dd-btn:hover, .dd-body-button:hover {
    background: var(--dd-lite); text-decoration: none;
}

.dd-about { max-width: 640px; margin: 0 auto; }
.dd-about h1 { font-size: clamp(2.5rem, 7vw, 5rem); }
.dd-muted { color: var(--mid); }

/* Footer */
.dd-foot {
    padding: 2rem 1.5rem; text-align: center;
    color: var(--mid); font-size: 0.85rem; border-top: 1px solid var(--light);
}
.dd-foot__links { margin: 0.5rem 0 0; }
.dd-foot__links a { color: var(--mid); }
.dd-foot__links a:hover { color: var(--dd-mid); }

/* Social icons (ported from kaitlinv-theme) */
.social-icons {
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center; gap: 0.5em;
    margin: 0 0 1rem;
}
.social-icons a {
    display: flex; justify-content: center; align-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background-color: var(--black); color: var(--white);
    border: 1px solid var(--black);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Generic dd_icon() inline-SVG rule. width/height inherit from font-size so
   icons scale with surrounding text by default; per-context overrides follow. */
.dd-icon {
    display: inline-block; vertical-align: -0.125em;
    width: 1em; height: 1em; fill: currentColor;
}
.social-icons a .dd-icon { width: 20px; height: 20px; vertical-align: 0; }
.dd-hero-cta .dd-icon { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.dd-back .dd-icon { width: 0.9em; height: 0.9em; }
.deadly-portfolio-overlay__close .dd-icon { width: 18px; height: 18px; }
.deadly-portfolio-overlay__nav .dd-icon { width: 22px; height: 22px; }
.dd-contact button[type=submit] .dd-icon { width: 0.95em; height: 0.95em; margin-right: 0.35em; vertical-align: -0.12em; }
.social-icons a:hover {
    background-color: var(--dd-mid); border-color: var(--dd-mid);
    color: var(--white); box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    text-decoration: none;
}
.social-icons a:hover.facebook  { transform: translateY(-4px) rotate(-12deg); }
.social-icons a:hover.instagram { transform: translateY(-4px) rotate(-6deg); }
.social-icons a:hover.linkedin  { transform: translateY(-4px) rotate(6deg); }
.social-icons a:hover.youtube   { transform: translateY(-4px) rotate(12deg); }
.social-icons a.email {
    background-color: var(--white); color: var(--black); border-style: dashed;
}
.social-icons a:hover.email {
    background-color: var(--dd-mid); color: var(--white);
    animation: dd-wiggle-up 0.4s ease forwards;
}
@keyframes dd-wiggle-up {
    0%   { transform: translateY(0) rotate(0deg); }
    25%  { transform: translateY(-3px) rotate(-8deg); }
    50%  { transform: translateY(-5px) rotate(8deg); }
    75%  { transform: translateY(-4px) rotate(-5deg); }
    100% { transform: translateY(-4px) rotate(0deg); }
}

/* Contact form (inside overlay) */
.dd-contact { display: grid; gap: 0.75rem; }
.dd-contact label { display: grid; gap: 0.3rem; font-size: 0.85rem; color: var(--dark); }
.dd-contact input, .dd-contact textarea {
    width: 100%; padding: 0.55rem; border: 1px solid var(--light); border-radius: 4px;
    background: var(--white); color: var(--dark); font: inherit;
}
.dd-contact input:focus, .dd-contact textarea:focus { outline: none; border-color: var(--dd-mid); }
.dd-contact button[type=submit] {
    background: var(--black); color: var(--white); border: 0; border-radius: 999px;
    padding: 0.55rem 1.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
}
.dd-contact button[type=submit]:hover { background: var(--dd-mid); color: var(--black); }
.dd-contact-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.25rem; }
.dd-contact-status { font-size: 0.85rem; color: var(--mid); }
.dd-contact-status.ok { color: var(--dd-mid); }
.dd-contact-status.err { color: #a00; }
.dd-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }