/* =========================================
   DAINTYJHA PORTFOLIO
   Editorial · Professional · Creative
========================================= */

:root {

    /* =====================================
       COLORS
    ===================================== */

    --navy-dark: #071426;
    --navy: #0d2038;
    --navy-soft: #16304f;

    --gold: #d6b36a;
    --gold-light: #f1d89b;

    --white: #ffffff;

    --background: #f8f8f6;
    --card: #ffffff;

    --text: #172033;
    --text-soft: #667085;

    --border: #dfe6ef;


    /* =====================================
       LAYOUT
    ===================================== */

    --page-width: 1200px;
    --navbar-height: 88px;

    --radius: 22px;


    /* =====================================
       EFFECTS
    ===================================== */

    --shadow:
        0 20px 50px rgba(7, 20, 38, 0.12);

    --shadow-dark:
        0 20px 50px rgba(0, 0, 0, 0.25);


    /* =====================================
       TRANSITIONS
    ===================================== */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}


/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    margin: 0;

    display: flex;
    flex-direction: column;

    padding-top: calc(var(--navbar-height) + 30px);

    overflow-x: hidden;

    background: var(--background);
    color: var(--text);

    font-family: "Inter", Arial, sans-serif;

    line-height: 1.6;
}

img {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================
   TYPOGRAPHY
========================================= */

h1,
h2,
h3 {
    margin-top: 0;

    font-family: "DM Serif Display", Georgia, serif;

    font-weight: 400;

    color: var(--text);
}

h1 {
    margin-bottom: 1.5rem;

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    line-height: 1.08;
}

h2 {
    margin-bottom: 1.25rem;

    font-size: clamp(1.8rem, 3vw, 2.8rem);

    line-height: 1.2;
}

h3 {
    margin-bottom: 0.8rem;

    font-size: 1.4rem;

    line-height: 1.3;
}

p {
    max-width: 68ch;

    margin-top: 0;

    color: var(--text-soft);

    line-height: 1.8;
}

strong {
    color: var(--text);
}


/* =========================================
   ACCESSIBILITY
========================================= */

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 4px;
}


/* =========================================
   MAIN LAYOUT
========================================= */

main {
    width: min(calc(100% - 3rem), var(--page-width));

    margin-inline: auto;

    flex: 1;
}

section {
    margin-block: 5rem;
}


/* =========================================
   FLOATING NAVBAR
========================================= */

#navbar-container {
    position: fixed;

    top: 14px;
    left: 50%;

    z-index: 2000;

    width: min(calc(100% - 28px), var(--page-width));

    transform: translateX(-50%);

    pointer-events: none;
}

.navbar {
    min-height: var(--navbar-height);

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding: 0.4rem 1.5rem;

    background: var(--navy-dark);

    border-radius: var(--radius);

    box-shadow: var(--shadow-dark);

    pointer-events: auto;
}


/* =========================================
   LOGO
========================================= */

.logo {
    display: flex;

    align-items: center;

    flex: 0 0 auto;
}

.logo img {
    display: block;

    width: auto;

    height: 78px;

    max-width: none;

    object-fit: contain;
}


/* =========================================
   NAVIGATION
========================================= */

.nav__menu {
    display: flex;

    align-items: center;

    gap: 2rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav__menu a {
    position: relative;

    color: var(--white);

    font-size: 0.95rem;

    font-weight: 600;

    text-decoration: none;

    transition: color var(--transition-fast);
}

.nav__menu a:hover {
    color: var(--gold);
}

.nav__menu a::after {
    position: absolute;

    right: 0;
    bottom: -7px;
    left: 0;

    width: 0;
    height: 2px;

    margin-inline: auto;

    background: var(--gold);

    border-radius: 10px;

    content: "";

    transition: width var(--transition-normal);
}

.nav__menu a:hover::after {
    width: 100%;
}


/* =========================================
   MOBILE MENU
========================================= */

#mobile-menu {
    display: none;

    padding: 0.25rem;

    border: none;

    background: none;

    color: var(--white);

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;
}


/* =========================================
   EYEBROW
========================================= */

.eyebrow {
    margin-bottom: 1rem;

    color: var(--gold);

    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* =========================================
   HERO
========================================= */

.hero {
    max-width: 900px;

    min-height: 65vh;

    display: flex;

    justify-content: center;

    flex-direction: column;
}

.hero-with-photo {
    max-width: none;
    min-height: 70vh;
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, 0.8fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.hero-content {
    max-width: 720px;
}

.hero-intro {
    font-size: 1.15rem;
}


/* =========================================
   HERO PHOTO
========================================= */

.hero-photo {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
}

.hero-photo::before {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--gold);
    border-radius:
        180px 180px 28px 28px;
    content: "";
}

.hero-photo img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border-radius:180px 180px 28px 28px;
    box-shadow:0 24px 55px rgba(23, 23, 23, 0.18);
}


/* =========================================
   HERO BUTTON GROUP
========================================= */

.hero-buttons,
.hero-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 1rem;

    margin-top: 2rem;
}


/* =========================================
   BUTTONS
========================================= */

.btn,
.cta-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    min-height: 48px;

    padding: 0.9rem 1.6rem;

    background: var(--gold);

    color: var(--navy-dark);

    border: 1px solid var(--gold);

    border-radius: 50px;

    font-family: inherit;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:hover,
.cta-button:hover {
    background: var(--gold-light);

    border-color: var(--gold-light);

    color: var(--navy-dark);

    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(7, 20, 38, 0.14);
}

.btn:active,
.cta-button:active {
    transform: translateY(-1px);
}


/* =========================================
   OUTLINE BUTTON
========================================= */

.btn-outline,
.btn-secondary,
.secondary-button {
    background: transparent;

    color: var(--navy-dark);

    border-color: var(--navy);
}

.btn-outline:hover,
.btn-secondary:hover,
.secondary-button:hover {
    background: var(--navy-dark);

    color: var(--white);

    border-color: var(--navy-dark);
}


/* =========================================
   TEXT LINKS
========================================= */

.text-link {
    display: inline-flex;

    align-items: center;

    color: var(--gold);

    font-weight: 700;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.text-link:hover {
    color: var(--navy-dark);

    transform: translateX(4px);
}


/* =========================================
   CARDS
========================================= */

.card-container,
.skills {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 280px), 1fr)
        );

    gap: 2rem;
}

.card {
    position: relative;

    padding: 2rem;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

.card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(214, 179, 106, 0.55);

    box-shadow:
        0 26px 60px rgba(7, 20, 38, 0.16);
}


/* =========================================
   CARD NUMBERS
========================================= */

.card-number {
    display: block;

    margin-bottom: 1rem;

    color: var(--gold);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================
   SKILL LIST
========================================= */

.skill-list {
    margin: 0;

    padding: 0;

    list-style: none;
}

.skill-list li {
    position: relative;

    padding: 0.55rem 0 0.55rem 1.3rem;

    color: var(--text-soft);

    border-bottom: 1px solid var(--border);
}

.skill-list li:last-child {
    border-bottom: none;
}

.skill-list li::before {
    position: absolute;

    top: 50%;
    left: 0;

    width: 6px;
    height: 6px;

    background: var(--gold);

    border-radius: 50%;

    content: "";

    transform: translateY(-50%);
}


/* =========================================
   SECTION HEADING
========================================= */

.section-heading {
    max-width: 800px;

    margin-bottom: 2.5rem;
}

.section-heading p {
    max-width: 760px;
}


/* =========================================
   SECTION ACTION
========================================= */

.section-action {
    margin-top: 2.5rem;
}


/* =========================================
   ABOUT PAGE
========================================= */

.about-page section {
    scroll-margin-top: 130px;
}

.about-hero {
    padding-block: 2rem;
}


.hero-photo {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
}

.hero-photo::before {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--gold);
    border-radius:
        180px 180px 28px 28px;
    content: "";
}

.hero-photo img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border-radius:180px 180px 28px 28px;
    box-shadow:0 24px 55px rgba(23, 23, 23, 0.18);
}
/* =========================================
   EDUCATION
========================================= */

.education-year {
    display: inline-block;

    margin-bottom: 1rem;

    color: var(--gold);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 1px;
}

.institution {
    color: var(--navy);

    font-weight: 700;
}


/* =========================================
   SECTION NOTE
========================================= */

.section-note {
    margin-top: 1.5rem;

    font-size: 0.95rem;

    font-style: italic;
}


/* =========================================
   CREATIVE SECTION
========================================= */

.creative-section {
    padding: clamp(2.5rem, 6vw, 5rem);

    background:
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy-soft)
        );

    border-radius: var(--radius);

    color: var(--white);
}

.creative-section h2,
.creative-section h3 {
    color: var(--white);
}

.creative-section p {
    color: rgba(255, 255, 255, 0.75);
}

.creative-highlight {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 220px), 1fr)
        );

    gap: 1.5rem;

    margin-block: 2.5rem;
}

.creative-highlight > div {
    padding: 1.5rem;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 18px;
}


/* =========================================
   APPROACH
========================================= */

.approach-content {
    max-width: 850px;
}

.approach-highlight {
    font-size: 1.3rem;

    color: var(--navy);

    font-weight: 500;
}


/* =========================================
   CAREER SECTION
========================================= */

.career-section {
    max-width: 900px;
}


/* =========================================
   CV SECTION
========================================= */

.cv-section {
    padding: clamp(2.5rem, 6vw, 5rem);

    background: var(--navy);

    border-radius: var(--radius);

    text-align: center;
}

.cv-content {
    max-width: 760px;

    margin-inline: auto;
}

.cv-section h2 {
    color: var(--white);
}

.cv-section p {
    margin-inline: auto;

    color: rgba(255, 255, 255, 0.75);
}

.cv-section .hero-actions {
    justify-content: center;
}


/* =========================================
   CONTACT SECTION
========================================= */

.contact-section,
.contact-cta {
    padding: clamp(2.5rem, 6vw, 5rem);

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.contact-section .hero-actions,
.contact-cta .hero-actions {
    margin-top: 2rem;
}


/* =========================================
   CONTACT PAGE HERO
========================================= */

.page-hero {
    max-width: 850px;

    padding-block: 2rem;
}


/* =========================================
   CONTACT GRID
========================================= */

.contact-container {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(240px, 0.75fr);

    gap: 2rem;

    align-items: start;
}

.contact-info {
    padding: 2rem 0;
}

.contact-card {
    padding: 2rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.contact-card ul {
    margin: 0;

    padding-left: 1.2rem;

    color: var(--text-soft);
}

.contact-card li {
    margin-bottom: 0.5rem;
}


/* =========================================
   CONTACT ACTIONS
========================================= */

.contact-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 1rem;

    margin-top: 2rem;
}


/* =========================================
   SOCIAL SECTION
========================================= */

.social-section {
    text-align: center;
}

.social-section p {
    margin-inline: auto;
}

.social-links {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 0.8rem;

    margin-top: 2rem;
}

.social-links a {
    color: var(--navy);

    font-weight: 700;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.social-links a:hover {
    color: var(--gold);

    transform: translateY(-2px);
}

.social-links span {
    color: var(--gold);

    user-select: none;
}


/* =========================================
   CONTACT CTA
========================================= */

.contact-cta {
    text-align: center;
}

.contact-cta p {
    margin-inline: auto;
}

.contact-cta .btn {
    margin-top: 1rem;
}


/* =========================================
   PORTFOLIO
========================================= */

.portfolio-hero {
    max-width: 900px;

    padding-block: 3rem 2rem;
}

.portfolio-intro {
    max-width: 760px;

    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.portfolio-nav {
    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 2rem;
}

.portfolio-filter {
    display: inline-flex;

    align-items: center;

    padding: 0.7rem 1.1rem;

    border: 1px solid var(--border);

    border-radius: 50px;

    background: var(--white);

    color: var(--navy);

    font-size: 0.9rem;

    font-weight: 600;

    text-decoration: none;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.portfolio-filter:hover {
    background: var(--navy-dark);

    color: var(--white);

    border-color: var(--navy-dark);

    transform: translateY(-2px);
}


/* =========================================
   FEATURED PROJECTS
========================================= */

.featured-grid {
    display: grid;

    gap: 2rem;
}

.featured-project {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.85fr)
        minmax(0, 1.15fr);

    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.featured-project:nth-child(even) .project-image {
    order: 2;
}

.project-image {
    min-height: 340px;

    overflow: hidden;
}

.project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.featured-project:hover .project-image img {
    transform: scale(1.035);
}

.project-content {
    display: flex;

    justify-content: center;

    flex-direction: column;

    padding: clamp(2rem, 5vw, 4rem);
}

.project-category {
    display: block;

    margin-bottom: 0.7rem;

    color: var(--gold);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.project-content h3 {
    margin-bottom: 1rem;

    font-size: clamp(1.8rem, 3vw, 2.5rem);
}


/* =========================================
   PROJECT TAGS
========================================= */

.project-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-block: 1rem 1.5rem;
}

.project-tags span {
    padding: 0.4rem 0.75rem;

    background: var(--background);

    border: 1px solid var(--border);

    border-radius: 50px;

    color: var(--text-soft);

    font-size: 0.78rem;

    font-weight: 600;
}


/* =========================================
   DARK PORTFOLIO SECTION
========================================= */

.dark-portfolio-section {
    padding: clamp(2rem, 5vw, 4.5rem);

    background: var(--navy-dark);

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

.dark-portfolio-section h2,
.dark-portfolio-section h3 {
    color: var(--white);
}

.dark-portfolio-section .section-heading p {
    color: rgba(255, 255, 255, 0.7);
}


/* =========================================
   STORY GRID
========================================= */

.story-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 240px), 1fr)
        );

    gap: 1.5rem;
}

.story-card {
    overflow: hidden;

    background: var(--navy);

    border: 1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal);
}

.story-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(214, 179, 106, 0.5);
}

.story-cover {
    aspect-ratio: 4 / 5;

    overflow: hidden;
}

.story-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.story-card:hover .story-cover img {
    transform: scale(1.04);
}

.story-info {
    padding: 1.5rem;
}

.story-info p {
    color: rgba(255, 255, 255, 0.68);
}


/* =========================================
   MUSIC
========================================= */

.music-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 260px), 1fr)
        );

    gap: 2rem;
}

.music-card {
    padding: 2rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal);
}

.music-card:hover {
    transform: translateY(-7px);

    border-color: var(--gold);
}

.music-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 1.5rem;

    border: 1px solid var(--gold);

    border-radius: 50%;

    color: var(--gold);

    font-family: "DM Serif Display", serif;

    font-size: 1.7rem;
}


/* =========================================
   VISUAL WORK
========================================= */

.visual-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 260px), 1fr)
        );

    gap: 2rem;
}

.visual-card {
    padding: 1rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.visual-placeholder {
    min-height: 250px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 1.5rem;

    background:
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy-soft)
        );

    border-radius: 16px;

    color: var(--gold-light);

    font-family: "DM Serif Display", serif;

    font-size: 1.7rem;

    text-align: center;
}


/* =========================================
   CREATIVE LAB
========================================= */

.creative-lab {
    padding: clamp(2.5rem, 6vw, 5rem);

    background: var(--navy);

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

.creative-lab-content {
    max-width: 800px;
}

.creative-lab h2 {
    color: var(--white);
}

.creative-lab p {
    color: rgba(255, 255, 255, 0.72);
}

.lab-list {
    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 2rem;
}

.lab-list span {
    padding: 0.7rem 1rem;

    border: 1px solid
        rgba(214, 179, 106, 0.45);

    border-radius: 50px;

    color: var(--gold-light);

    font-size: 0.85rem;

    font-weight: 600;
}


/* =========================================
   HOME CTA
========================================= */

.home-cta {
    text-align: center;
}

.home-cta-content {
    max-width: 750px;

    margin-inline: auto;
}

.home-cta-content p {
    margin-inline: auto;
}

.home-cta .hero-buttons {
    justify-content: center;
}


/* =========================================
   COLLABORATION CTA
========================================= */

.home-collaboration {
    padding: clamp(2.5rem, 6vw, 5rem);

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.home-collaboration-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    margin-top: 2rem;
}

.home-collaboration-actions .btn {
    min-width: 210px;
}


/* =========================================
   FOOTER
========================================= */

#footer-container {
    width: min(calc(100% - 28px), var(--page-width));

    margin: 4rem auto 14px;
}

.footer {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    padding: 1rem 2rem;

    background: var(--navy-dark);

    color: var(--white);

    border-radius: var(--radius);

    box-shadow: var(--shadow-dark);
}

.footer p {
    margin: 0;

    color: rgba(255, 255, 255, 0.75);
}

.footer a {
    color: var(--gold-light);

    text-decoration: none;

    transition: color var(--transition-fast);
}

.footer a:hover {
    color: var(--white);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {

    body {
        padding-top: 90px;
    }

    main {
        width: min(calc(100% - 2rem), var(--page-width));
    }

    section {
        margin-block: 4rem;
    }


    /* NAVBAR */

    .navbar {
        padding: 0.65rem 1rem;
    }

    .logo img {
        height: 46px;
    }

    #mobile-menu {
        display: block;
    }

    .nav__menu {
        position: absolute;

        top: calc(100% + 10px);

        left: 0;
        right: 0;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        max-height: 0;

        padding: 0 1rem;

        overflow: hidden;

        background: var(--navy-dark);

        border-radius: var(--radius);

        box-shadow: var(--shadow-dark);

        opacity: 0;

        visibility: hidden;

        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            padding 0.3s ease,
            visibility 0.3s ease;
    }

    .nav__menu.active {
        max-height: 500px;

        padding: 1rem;

        opacity: 1;

        visibility: visible;
    }

    .nav__menu li {
        width: 100%;
    }

    .nav__menu a {
        display: block;

        width: 100%;

        padding: 0.85rem 0.5rem;

        text-align: center;
    }

    .nav__menu a::after {
        display: none;
    }


    /* HERO */

    .hero-with-photo {
        grid-template-columns: 1fr;

        min-height: auto;

        text-align: center;
    }

    .hero-content {
        margin-inline: auto;
    }

    .hero-content p {
        margin-inline: auto;
    }

    .hero-photo {
        order: -1;

        width: min(100%, 340px);
    }


    /* BUTTONS */

    .hero-buttons,
    .hero-actions,
    .contact-actions {
        justify-content: center;
    }


    /* CONTACT */

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


    /* FEATURED PROJECTS */

    .featured-project {
        grid-template-columns: 1fr;
    }

    .featured-project:nth-child(even) .project-image {
        order: 0;
    }

    .project-image {
        min-height: auto;

        aspect-ratio: 16 / 10;
    }


    /* DARK SECTIONS */

    .dark-portfolio-section,
    .creative-lab,
    .creative-section,
    .cv-section {
        padding: 2rem 1.25rem;
    }


    /* SOCIAL LINKS */

    .social-links {
        gap: 0.6rem;
    }


    /* FOOTER */

    .footer {
        flex-direction: column;

        gap: 10px;

        padding: 1rem;

        text-align: center;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    body {
        padding-top: 82px;
    }

    main {
        width: calc(100% - 1.5rem);
    }


    /* NAVBAR */

    #navbar-container {
        top: 8px;

        width: calc(100% - 16px);
    }

    .navbar {
        border-radius: 18px;
    }

    .logo img {
        height: 42px;
    }


    /* TYPOGRAPHY */

    h1 {
        font-size:
            clamp(2.2rem, 11vw, 3rem);
    }

    h2 {
        font-size: 1.8rem;
    }


    /* SPACING */

    section {
        margin-block: 3rem;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding-block: 3rem;
    }

    .hero-photo {
        width: min(90%, 300px);
    }

    .hero-photo::before {
        top: 12px;

        left: 12px;
    }


    /* BUTTONS */

    .hero-buttons,
    .hero-actions,
    .contact-actions,
    .home-collaboration-actions {
        flex-direction: column;

        align-items: stretch;

        width: 100%;
    }

    .hero-buttons .btn,
    .hero-actions .btn,
    .hero-actions a,
    .contact-actions .btn,
    .contact-actions a,
    .home-collaboration-actions .btn {
        width: 100%;
    }


    /* PORTFOLIO */

    .portfolio-hero {
        padding-top: 2rem;

        text-align: center;
    }

    .portfolio-intro {
        margin-inline: auto;
    }

    .portfolio-nav {
        justify-content: center;
    }

    .portfolio-filter {
        width: 100%;

        justify-content: center;
    }


    /* CARDS */

    .card {
        padding: 1.5rem;
    }

    .project-content {
        padding: 1.5rem;
    }

    .story-info,
    .music-card {
        padding: 1.4rem;
    }


    /* CONTACT */

    .contact-info {
        padding: 1rem 0;
    }

    .contact-card {
        padding: 1.5rem;
    }


    /* SOCIAL */

    .social-links span {
        display: none;
    }

    .social-links {
        flex-direction: column;

        gap: 0.8rem;
    }


    /* FOOTER */

    #footer-container {
        width: calc(100% - 16px);

        margin-top: 3rem;

        margin-bottom: 8px;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        transition-delay: 0ms !important;

        scroll-behavior: auto !important;
    }
}