/* ==========================================================================
   1600px+
   Large Displays
   ========================================================================== */

   @media (min-width: 1600px) {

    :root {

        --container-width: 1480px;

        --content-width: 820px;

        --section-padding: 10rem;

    }

    .hero-grid {

        gap: 8rem;

    }

    .hero-dashboard {

        max-width: 700px;

    }

    .hero-portrait {

        width: 280px;

        right: -4rem;

        bottom: -4rem;

    }

    .portfolio-gallery {

        gap: 2.5rem;

    }

    .thought-grid {

        gap: 2.5rem;

    }

    .timeline {

        gap: 6rem;

    }

}


/* ==========================================================================
   1440px
   Desktop
   ========================================================================== */

@media (max-width: 1440px) {

    :root {

        --container-width: 1320px;

        --section-padding: 8rem;

    }

    .hero-grid {

        gap: 5rem;

    }

    .hero-dashboard {

        max-width: 600px;

    }

    .hero-portrait {

        width: 230px;

        right: -2.5rem;

        bottom: -2.5rem;

    }

}


/* ==========================================================================
   1366px
   Laptop
   ========================================================================== */

@media (max-width: 1366px) {

    :root {

        --section-padding: 7rem;

    }


    .portfolio-gallery {

        gap: 1.75rem;

    }

    .thought-grid {

        gap: 1.75rem;

    }

}


/* ==========================================================================
   1280px
   Small Laptop
   ========================================================================== */

@media (max-width: 1280px) {

    :root {

        --container-width: 1180px;

    }

    .hero-grid {

        grid-template-columns: 1fr 0.95fr;

        gap: 4rem;

    }

    .hero-dashboard {

        max-width: 560px;

    }

    .hero-portrait {

        width: 210px;

    }

    .timeline-item {

        grid-template-columns: 160px 1fr;

    }

}


/* ==========================================================================
   1200px
   Transition to Tablet
   ========================================================================== */

@media (max-width: 1200px) {

    :root {

        --container-width: 1100px;

        --section-padding: 6rem;

    }

    .container,
    .section-container {

        width: min(94%, var(--container-width));

    }

    .hero-grid {

        gap: 3rem;

    }


    .hero-description {

        max-width: 34rem;

    }

    .hero-dashboard {

        max-width: 520px;

    }

    .hero-portrait {

        width: 190px;

        right: -1.5rem;

        bottom: -1.5rem;

    }

    .portfolio-gallery {

        gap: 1.5rem;

    }

    .thought-grid {

        gap: 1.5rem;

    }

    .timeline {

        gap: 4rem;

    }

    .footer-inner {

        gap: 2rem;

    }

}


/* ==========================================================================
   Desktop Hover Improvements
   ========================================================================== */

@media (hover:hover) {

    .portfolio-card:hover {

        transform:

            translateY(-10px)

            scale(1.015);

    }

    .thought-card:hover {

        transform:

            translateY(-8px);

    }

}


/* ==========================================================================
   Reduce Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .portfolio-card,
    .thought-card,
    .hero-dashboard,
    .hero-portrait {

        transition: none;

    }

}

/* ==========================================================================
   1199px
   Large Tablet Landscape
   ========================================================================== */

   @media (max-width: 1199px) {

    :root {

        --container-width: 960px;

        --section-padding: 5.5rem;

    }


    .nav-menu {

        gap: var(--space-4);

    }

    .hero {

        min-height: auto;

        padding-top: calc(var(--nav-height) + var(--space-6));

    }

    .hero-grid {

        grid-template-columns: 1fr;

        gap: var(--space-6);

    }

    .hero-copy {

        max-width: 100%;

    }


    .hero-description {

        max-width: 42rem;

    }

    .hero-visual {

        justify-content: center;

    }

    .hero-dashboard {

        max-width: 700px;

    }

    .hero-portrait {

        width: 210px;

        right: -2rem;

        bottom: -2rem;

    }

    .portfolio-gallery {

        grid-template-columns: repeat(2, 1fr);

        gap: var(--space-4);

    }

    /* ===============================================================
       Inside My Brain
       =============================================================== */

    .thought-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: var(--space-4);

    }

    .thought-card.featured {

        grid-column: span 2;

    }

    .timeline-item {

        grid-template-columns: 150px 1fr;

        gap: var(--space-4);

    }

}


/* ==========================================================================
   1024px
   Standard Tablet Landscape
   ========================================================================== */

@media (max-width: 1024px) {

    :root {

        --container-width: 900px;

        --section-padding: 5rem;

    }



    .hero-dashboard {

        max-width: 620px;

    }

    .hero-portrait {

        width: 190px;

    }

    .portfolio-gallery {

        gap: var(--space-3);

    }

    .thought-grid {

        gap: var(--space-3);

    }

    .timeline {

        gap: var(--space-5);

    }

}


/* ==========================================================================
   900px
   Small Tablet Landscape
   ========================================================================== */

@media (max-width: 900px) {

    .hero-grid {

        gap: var(--space-5);

    }

    .hero-dashboard {

        max-width: 560px;

    }

    .hero-portrait {

        width: 175px;

        right: -1rem;

        bottom: -1rem;

    }

    .portfolio-content {

        padding: var(--space-3);

    }

    .thought-card {

        padding: var(--space-5);

    }

}


/* ==========================================================================
   820px
   Tablet Portrait Transition
   ========================================================================== */

@media (max-width: 820px) {

    :root {

        --section-padding: 4.5rem;

    }

    .container,
    .section-container {

        width: min(95%, var(--container-width));

    }

    .hero {

        text-align: center;

    }

    .hero-copy {

        margin-inline: auto;

    }

    .hero-kicker {

        justify-content: center;

    }

    .hero-kicker::before {

        display: none;

    }

    .hero-actions {

        justify-content: center;

    }

    .hero-dashboard {

        max-width: 520px;

    }

    .hero-portrait {

        position: relative;

        right: auto;

        bottom: auto;

        width: 220px;

        margin: -4rem auto 0;

    }

    .section-header {

        text-align: center;

    }

    .section-title,

    .section-description {

        margin-inline: auto;

    }

}


/* ==========================================================================
   768px
   Final Tablet Layout
   ========================================================================== */

@media (max-width: 768px) {

    :root {

        --container-width: 720px;

        --section-padding: 4rem;

    }


    .nav-menu {

        display: none;

    }

    .mobile-toggle {

        display: flex;

    }

    .portfolio-gallery {

        grid-template-columns: 1fr 1fr;

    }

    .thought-grid {

        grid-template-columns: 1fr;

    }

    .thought-card.featured {

        grid-column: auto;

    }



    .timeline-item {

        grid-template-columns: 1fr;

        gap: var(--space-2);

    }

    .timeline-date {

        padding-left: calc(var(--space-5) + 12px);

    }

    .timeline-content{

        padding-left: calc(var(--space-5) + 12px);

    }

}

/* ==========================================================================
   767px
   Large Phones
   ========================================================================== */

   @media (max-width: 767px) {

    :root {

        --container-width: 100%;

        --section-padding: 4rem;

    }

    .container,
    .section-container {

        width: min(92%, 680px);

    }


    .hero {

        padding-top: calc(var(--nav-height) + var(--space-5));

        text-align: center;

    }

    .hero-grid {

        gap: var(--space-5);

    }

    .hero-copy {

        margin-inline: auto;

    }

    .hero-title {

        font-size: clamp(2.8rem, 10vw, 4rem);

    }

    .hero-description {

        margin-inline: auto;

        font-size: 1.05rem;

    }

    .hero-actions {

        justify-content: center;

        width: 100%;

    }

    .hero-actions .btn {

        width: 100%;

        max-width: 320px;

    }

    .hero-dashboard {

        max-width: 100%;

        padding: var(--space-4);

    }

    .hero-portrait {

        width: 200px;

        margin: -3rem auto 0;

    }

    .scroll-indicator {

        display: none;

    }


    .portfolio-gallery {

        grid-template-columns: 1fr;

        gap: var(--space-4);

    }

    .portfolio-content {

        padding: var(--space-4);

    }


    .thought-grid {

        grid-template-columns: 1fr;

    }

    .thought-card {

        min-height: auto;

        padding: var(--space-5);

    }

    .thought-card.featured {

        min-height: auto;

    }

 

    .timeline {

        gap: var(--space-5);

    }

    .timeline-item {

        grid-template-columns: 1fr;

        gap: var(--space-2);

    }

    .timeline-date {

        padding-left: 2rem;

    }

    .timeline-content {

        padding-left: 2rem;

    }


    .connect-actions {

        flex-direction: column;

        align-items: center;

    }

    .connect-actions .btn {

        width: 100%;

        max-width: 320px;

    }



    .footer-inner {

        flex-direction: column;

        text-align: center;

    }

    .footer-nav {

        justify-content: center;

        flex-wrap: wrap;

    }

}


/* ==========================================================================
   640px
   Medium Phones
   ========================================================================== */

@media (max-width: 640px) {

    :root {

        --section-padding: 3.5rem;

    }

    .hero-dashboard {

        padding: var(--space-3);

    }

    .hero-portrait {

        width: 180px;

    }

    .thought-card {

        padding: var(--space-4);

    }

    .portfolio-content {

        padding: var(--space-3);

    }

}


/* ==========================================================================
   540px
   Small Phones
   ========================================================================== */

@media (max-width: 540px) {

    .hero-title {

        font-size: clamp(2.5rem, 11vw, 3.5rem);

    }

    .hero-description {

        font-size: 1rem;

    }

    .hero-dashboard {

        border-radius: var(--radius-lg);

    }

    .thought-quote {

        font-size: 1.45rem;

    }

    .timeline-content {

        padding-left: 1.5rem;

    }

}


/* ==========================================================================
   481px
   Large iPhone
   ========================================================================== */

@media (max-width: 481px) {

    :root {

        --section-padding: 3rem;

    }

    .container,
    .section-container {

        width: min(94%, 480px);

    }

    .hero {

        padding-top: calc(var(--nav-height) + var(--space-4));

    }

    .hero-title {

        line-height: 1.08;

    }

    .hero-dashboard {

        padding: var(--space-2);

    }

    .hero-portrait {

        width: 160px;

        margin-top: -2rem;

    }

    .btn {

        min-height: 48px;

    }

}

/* ==========================================================================
   480px
   Small Phones
   ========================================================================== */

   @media (max-width: 480px) {

    :root {

        --section-padding: 2.75rem;

    }

    .container,
    .section-container {

        width: min(94%, 460px);

    }

    .hero-title {

        font-size: clamp(2.25rem, 11vw, 3rem);

        letter-spacing: -.035em;

    }

    .hero-description {

        font-size: .98rem;

        line-height: 1.7;

    }

    h2 {

        font-size: clamp(2rem, 8vw, 2.6rem);

    }

    h3 {

        font-size: 1.45rem;

    }

 
    .hero {

        padding-top: calc(var(--nav-height) + var(--space-3));

    }

    .hero-dashboard {

        padding: var(--space-2);

        border-radius: var(--radius-lg);

    }

    .hero-portrait {

        width: 150px;

        margin-top: -1.5rem;

    }

    .portfolio-content,
    .thought-card {

        padding: var(--space-3);

    }

    .thought-quote {

        font-size: 1.3rem;

    }


    .btn {

        width: 100%;

        min-height: 48px;

        justify-content: center;

    }

}


/* ==========================================================================
   390px
   iPhone Mini / Compact Devices
   ========================================================================== */

@media (max-width: 390px) {

    :root {

        --section-padding: 2.5rem;

    }

    .hero-title {

        font-size: clamp(2rem, 12vw, 2.6rem);

    }

    .hero-dashboard {

        padding: var(--space-1);

    }

    .hero-portrait {

        width: 135px;

    }

    .timeline-content {

        padding-left: 1.25rem;

    }

}


/* ==========================================================================
   360px
   Extra Small Devices
   ========================================================================== */

@media (max-width: 360px) {

    .container,
    .section-container {

        width: 92%;

    }

    .hero-title {

        font-size: 1.9rem;

    }

    .hero-description {

        font-size: .95rem;

    }

    .thought-card {

        padding: var(--space-2);

    }

    .portfolio-content {

        padding: var(--space-2);

    }

    .footer-nav {

        flex-direction: column;

        gap: var(--space-2);

    }

}


/* ==========================================================================
   Landscape Phones
   ========================================================================== */

@media (max-height: 600px) and (orientation: landscape) {

    .hero {

        min-height: auto;

        padding-block: var(--space-7);

    }

    .scroll-indicator {

        display: none;

    }

    .hero-grid {

        align-items: center;

    }

}


/* ==========================================================================
   Safe Area Support
   ========================================================================== */

@supports (padding: max(0px)) {

    body {

        padding-left: max(0px, env(safe-area-inset-left));

        padding-right: max(0px, env(safe-area-inset-right));

    }

    .site-header {

        padding-left: max(0px, env(safe-area-inset-left));

        padding-right: max(0px, env(safe-area-inset-right));

    }

}


/* ==========================================================================
   High Density Displays
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {

    img {

        image-rendering: auto;

    }

}


/* ==========================================================================
   Keyboard Navigation
   ========================================================================== */

@media (hover: none) {

    .portfolio-card:hover,
    .thought-card:hover,
    .timeline-item:hover,
    .btn:hover {

        transform: none;

    }

}


/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {

    * {

        background: transparent !important;

        color: #000 !important;

        box-shadow: none !important;

        text-shadow: none !important;

    }

    body {

        font-size: 11pt;

        line-height: 1.5;

    }

    .site-header,
    .scroll-indicator,
    .hero-actions,
    .connect,
    .site-footer {

        display: none !important;

    }

    .section {

        page-break-inside: avoid;

        padding: 2rem 0;

    }

    a {

        text-decoration: underline;

    }

}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

    *,
    *::before,
    *::after {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}


/* ==========================================================================
   Final Responsive Utilities
   ========================================================================== */

.hide-mobile {

    display: none;

}

.show-mobile {

    display: block;

}

@media (min-width: 768px) {

    .hide-mobile {

        display: initial;

    }

    .show-mobile {

        display: none;

    }

}