/* =========================================================
   MONARCHAUREX — BLACK
   LUXURY EDITORIAL PORTFOLIO
   VISUAL UPGRADE — STRUCTURE PRESERVED
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* =========================================================
   ROOT
========================================================= */

:root{
    --black:#050505;
    --black-soft:#0A0A09;
    --black-light:#11110F;

    --ivory:#F1EEE6;
    --ivory-soft:#D8D3C8;
    --muted:#918D84;
    --muted-dark:#656159;

    --gold:#C8A85B;
    --gold-light:#DFC783;
    --gold-dark:#8E7134;

    --line:rgba(255,255,255,.10);
    --line-soft:rgba(255,255,255,.055);
    --gold-line:rgba(200,168,91,.30);

    --serif:"Cormorant Garamond",
            Georgia,
            "Times New Roman",
            serif;

    --sans:"Inter",
           Arial,
           Helvetica,
           sans-serif;

    --container:1240px;

    --transition:all .45s cubic-bezier(.22,.61,.36,1);
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    background:var(--black);
}

body{
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(200,168,91,.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(255,255,255,.018),
            transparent 30%
        ),
        var(--black);

    color:var(--ivory);
    font-family:var(--sans);
    font-size:14px;
    font-weight:400;
    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;

    background:
        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size:100% 5px;

    opacity:.10;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9998;

    box-shadow:
        inset 0 0 180px rgba(0,0,0,.55);
}

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

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.section,
.hero,
.footer{
    width:min(var(--container), calc(100% - 80px));
    margin-inline:auto;
}

.section{
    padding:150px 0;
    scroll-margin-top:100px;
}

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

.navbar{
    position:fixed;
    top:0;
    left:50%;
    transform:translateX(-50%);

    width:min(var(--container), calc(100% - 80px));

    height:90px;

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

    z-index:1000;

    border-bottom:1px solid var(--line-soft);

    background:
        linear-gradient(
            180deg,
            rgba(5,5,5,.94),
            rgba(5,5,5,.80)
        );

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    box-shadow:
        0 10px 35px rgba(0,0,0,.18);
}

.logo{
    display:flex;
    align-items:center;
    gap:13px;
}

.logo-mark{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

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

    color:var(--gold-light);

    font-family:var(--serif);
    font-size:20px;
    font-weight:500;

    background:
        linear-gradient(
            145deg,
            rgba(200,168,91,.08),
            transparent
        );

    transition:var(--transition);
}

.logo:hover .logo-mark{
    background:var(--gold);
    color:var(--black);

    box-shadow:
        0 0 25px rgba(200,168,91,.16);
}

.logo-name{
    color:var(--ivory);

    font-family:var(--serif);
    font-size:20px;
    font-weight:500;
    letter-spacing:.02em;
}

.nav-links{
    list-style:none;

    display:flex;
    align-items:center;

    gap:30px;
}

.nav-links a{
    position:relative;

    color:var(--muted);

    font-size:10px;
    font-weight:500;

    letter-spacing:.13em;
    text-transform:uppercase;

    transition:var(--transition);
}

.nav-links a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-9px;

    width:0;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--gold-dark),
            var(--gold-light)
        );

    transition:var(--transition);
}

.nav-links a:hover{
    color:var(--ivory);
}

.nav-links a:hover::after{
    width:100%;
}

.nav-button{
    padding:12px 21px;

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

    color:var(--gold-light);

    background:
        linear-gradient(
            135deg,
            rgba(200,168,91,.045),
            transparent
        );

    font-size:9px;
    font-weight:600;
    letter-spacing:.15em;
    text-transform:uppercase;

    transition:var(--transition);
}

.nav-button:hover{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--black);

    box-shadow:
        0 8px 30px rgba(200,168,91,.12);
}

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

.hero{
    min-height:100vh;

    padding-top:170px;
    padding-bottom:120px;

    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);

    align-items:center;

    gap:100px;

    position:relative;

    scroll-margin-top:90px;
}

.hero::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    top:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(200,168,91,.08),
            transparent 68%
        );

    filter:blur(70px);

    pointer-events:none;
}

.hero::after{
    content:"";

    position:absolute;

    left:-160px;
    bottom:-100px;

    width:360px;
    height:360px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.018),
            transparent 70%
        );

    filter:blur(60px);

    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;
}

.hero-label{
    display:flex;
    align-items:center;
    gap:14px;

    color:var(--gold);

    font-size:9px;
    font-weight:600;

    letter-spacing:.24em;
    text-transform:uppercase;
}

.hero-label::before{
    content:"";

    width:35px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--gold-dark),
            var(--gold-light)
        );
}

.hero h1{
    margin-top:30px;

    max-width:900px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:clamp(72px,8vw,126px);
    font-weight:500;

    line-height:.83;
    letter-spacing:-.045em;

    text-shadow:
        0 8px 35px rgba(0,0,0,.35);
}

.hero h1 span{
    color:var(--gold-light);

    font-size:.52em;
    font-style:italic;

    letter-spacing:-.02em;

    text-shadow:
        0 5px 25px rgba(200,168,91,.10);
}

.hero-description{
    max-width:580px;

    margin-top:42px;

    color:var(--muted);

    font-size:13px;
    font-weight:300;

    line-height:1.9;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:20px;

    margin-top:42px;
}

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:0 25px;

    font-size:9px;
    font-weight:600;

    letter-spacing:.16em;
    text-transform:uppercase;

    transition:var(--transition);
}

.btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

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

    color:var(--black);

    box-shadow:
        0 8px 28px rgba(200,168,91,.08);
}

.btn-primary:hover{
    background:transparent;
    color:var(--gold-light);

    box-shadow:
        0 10px 35px rgba(200,168,91,.08);
}

.btn-secondary{
    border:1px solid var(--line);

    color:var(--ivory-soft);

    background:
        rgba(255,255,255,.012);
}

.btn-secondary:hover{
    border-color:var(--gold-line);
    color:var(--gold-light);

    background:
        rgba(200,168,91,.025);
}

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

.hero-visual{
    position:relative;
}

.profile-card{
    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );

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

    padding:12px;

    box-shadow:
        0 30px 70px rgba(0,0,0,.25);

    transition:var(--transition);
}

.profile-card::before{
    content:"";

    position:absolute;

    top:-1px;
    left:-1px;

    width:65px;
    height:65px;

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

    pointer-events:none;
}

.profile-card::after{
    content:"";

    position:absolute;

    right:-1px;
    bottom:-1px;

    width:65px;
    height:65px;

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

    pointer-events:none;
}

.profile-card:hover{
    transform:translateY(-7px);
    border-color:var(--gold-line);

    box-shadow:
        0 38px 80px rgba(0,0,0,.34);
}

.profile-image{
    aspect-ratio:4 / 5;

    display:grid;
    place-items:center;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(200,168,91,.15),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #151411,
            #080807
        );

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

    color:var(--gold-dark);

    font-family:var(--serif);
    font-size:18px;
    font-style:italic;

    box-shadow:
        inset 0 0 50px rgba(0,0,0,.25);
}

.profile-info{
    padding:25px 18px 15px;
}

.profile-status{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.18em;
}

.profile-info h3{
    margin-top:13px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:29px;
    font-weight:500;
}

.profile-info p{
    margin-top:3px;

    color:var(--muted);

    font-size:10px;
}

/* =========================================================
   SECTION HEADINGS
========================================================= */

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

    margin-bottom:80px;
}

.section-heading > span{
    display:flex;
    align-items:center;
    gap:13px;

    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.23em;
    text-transform:uppercase;
}

.section-heading > span::before{
    content:"";

    width:28px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--gold-dark),
            var(--gold-light)
        );
}

.section-heading h2{
    margin-top:22px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:clamp(50px,6vw,82px);
    font-weight:500;

    line-height:.92;
    letter-spacing:-.035em;

    text-shadow:
        0 10px 35px rgba(0,0,0,.28);
}

.section-heading p{
    max-width:620px;

    margin-top:27px;

    color:var(--muted);

    font-size:12px;
    font-weight:300;

    line-height:1.9;
}

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

.about{
    border-top:1px solid var(--line-soft);
}

.about-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);

    gap:100px;

    align-items:start;
}

.content-label{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.2em;
}

.about-content h3{
    max-width:700px;

    margin-top:22px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:52px;
    font-weight:500;

    line-height:1;
}

.about-content p{
    max-width:650px;

    margin-top:25px;

    color:var(--muted);

    font-size:13px;
    font-weight:300;

    line-height:2;
}

.about-highlights{
    border-top:1px solid var(--line);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.008),
            transparent
        );
}

.highlight-card{
    padding:27px 0;

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

    transition:var(--transition);
}

.highlight-card:hover{
    padding-left:12px;
    border-color:var(--gold-line);

    background:
        linear-gradient(
            90deg,
            rgba(200,168,91,.025),
            transparent
        );
}

.highlight-card > span{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.18em;
}

.highlight-card h4{
    margin-top:8px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:27px;
    font-weight:500;
}

.highlight-card p{
    margin-top:7px;

    color:var(--muted);

    font-size:11px;
    line-height:1.7;
}

/* =========================================================
   SKILLS
========================================================= */

.skills{
    border-top:1px solid var(--line-soft);
}

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

    border-top:1px solid var(--line);
    border-left:1px solid var(--line);

    box-shadow:
        0 25px 70px rgba(0,0,0,.15);
}

.skill-card{
    min-height:350px;

    padding:34px;

    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);

    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.012),
            transparent
        );

    transition:var(--transition);
}

.skill-card:hover{
    background:
        linear-gradient(
            145deg,
            rgba(200,168,91,.035),
            rgba(255,255,255,.008)
        );

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

    box-shadow:
        inset 0 0 45px rgba(200,168,91,.018);
}

.skill-number{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.18em;
}

.skill-card h3{
    margin-top:65px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:38px;
    font-weight:500;

    line-height:1;
}

.skill-card ul{
    list-style:none;

    margin-top:30px;
}

.skill-card li{
    padding:10px 0;

    border-bottom:1px solid var(--line-soft);

    color:var(--muted);

    font-size:11px;

    transition:var(--transition);
}

.skill-card li::before{
    content:"—";

    margin-right:10px;

    color:var(--gold);
}

.skill-card li:hover{
    color:var(--ivory-soft);
    padding-left:5px;
}

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

.projects{
    border-top:1px solid var(--line-soft);
}

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

    gap:22px;
}

.project-card{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            var(--black-soft)
        );

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

    transition:var(--transition);

    overflow:hidden;

    box-shadow:
        0 20px 55px rgba(0,0,0,.18);
}

.project-card:hover{
    transform:translateY(-7px);
    border-color:var(--gold-line);

    box-shadow:
        0 30px 70px rgba(0,0,0,.30);
}

.project-preview{
    min-height:270px;

    display:flex;
    align-items:flex-end;

    padding:25px;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(200,168,91,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #151411,
            #080807
        );

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

    position:relative;
}

.project-preview::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(255,255,255,.018)
        );

    pointer-events:none;
}

.project-preview span{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.2em;

    position:relative;
    z-index:1;
}

.project-content{
    padding:30px;
}

.project-category{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.18em;
}

.project-content h3{
    margin-top:13px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:36px;
    font-weight:500;

    line-height:1;
}

.project-content p{
    margin-top:16px;

    color:var(--muted);

    font-size:11px;

    line-height:1.8;
}

.project-tags{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:22px;
}

.project-tags span{
    padding:6px 9px;

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

    color:var(--muted);

    background:
        rgba(255,255,255,.012);

    font-size:7px;
    letter-spacing:.1em;
    text-transform:uppercase;

    transition:var(--transition);
}

.project-tags span:hover{
    border-color:var(--gold-line);
    color:var(--gold-light);
}

.project-link{
    display:inline-block;

    margin-top:25px;

    color:var(--gold-light);

    font-size:8px;
    font-weight:600;

    letter-spacing:.16em;
    text-transform:uppercase;

    transition:var(--transition);
}

.project-link:hover{
    letter-spacing:.21em;
    color:var(--ivory);
}

/* =========================================================
   EXPERIENCE
========================================================= */

.experience{
    border-top:1px solid var(--line-soft);
}

.timeline{
    position:relative;

    margin-top:30px;
}

.timeline::before{
    content:"";

    position:absolute;

    left:185px;
    top:0;
    bottom:0;

    width:1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--line) 8%,
            var(--line) 92%,
            transparent
        );
}

.timeline-item{
    display:grid;
    grid-template-columns:185px minmax(0,1fr);

    gap:70px;

    position:relative;

    padding:42px 0;

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

.timeline-item::before{
    content:"";

    position:absolute;

    left:181px;
    top:50px;

    width:9px;
    height:9px;

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

    background:var(--black);

    transform:rotate(45deg);

    z-index:2;

    box-shadow:
        0 0 0 5px var(--black);
}

.timeline-date{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.15em;
}

.timeline-content h3{
    color:var(--ivory);

    font-family:var(--serif);
    font-size:37px;
    font-weight:500;

    line-height:1;
}

.timeline-content h4{
    margin-top:10px;

    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.18em;
}

.timeline-content p{
    max-width:650px;

    margin-top:15px;

    color:var(--muted);

    font-size:11px;

    line-height:1.8;
}

/* =========================================================
   ACHIEVEMENTS
========================================================= */

.achievements{
    border-top:1px solid var(--line-soft);
}

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

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

    box-shadow:
        0 20px 55px rgba(0,0,0,.12);
}

.achievement-card{
    padding:35px;

    min-height:210px;

    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.012),
            transparent
        );

    transition:var(--transition);
}

.achievement-card:first-child{
    border-left:1px solid var(--line);
}

.achievement-card:hover{
    background:
        linear-gradient(
            145deg,
            rgba(200,168,91,.03),
            transparent
        );

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

.achievement-card > span{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.2em;
}

.achievement-card h3{
    margin-top:40px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:31px;
    font-weight:500;
}

.achievement-card p{
    margin-top:7px;

    color:var(--muted);

    font-size:10px;
}

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

.contact{
    border-top:1px solid var(--line-soft);
}

.contact-container{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,.7fr);

    gap:100px;

    align-items:start;
}

.contact-content > span{
    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.22em;
}

.contact-content h2{
    max-width:800px;

    margin-top:25px;

    color:var(--ivory);

    font-family:var(--serif);
    font-size:clamp(55px,6vw,86px);
    font-weight:500;

    line-height:.9;
    letter-spacing:-.04em;

    text-shadow:
        0 10px 35px rgba(0,0,0,.30);
}

.contact-content > p{
    max-width:570px;

    margin-top:30px;

    color:var(--muted);

    font-size:12px;

    line-height:1.9;
}

.contact-details{
    display:flex;
    flex-direction:column;

    gap:7px;

    margin-top:35px;
}

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

    font-family:var(--serif);
    font-size:24px;

    transition:var(--transition);
}

.contact-details a:hover{
    color:var(--ivory);

    text-shadow:
        0 0 20px rgba(200,168,91,.12);
}

.contact-details span{
    color:var(--muted);

    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form{
    padding-top:10px;
}

.form-group{
    margin-bottom:24px;
}

.form-group label{
    display:block;

    margin-bottom:8px;

    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.18em;
    text-transform:uppercase;
}

.form-group input,
.form-group textarea{
    width:100%;

    padding:15px 0;

    background:transparent;

    border:0;
    border-bottom:1px solid var(--line);

    outline:none;

    color:var(--ivory);

    font-size:12px;

    transition:var(--transition);
}

.form-group textarea{
    resize:vertical;

    min-height:130px;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:var(--muted-dark);
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--gold);

    box-shadow:
        0 5px 0 -4px rgba(200,168,91,.20);
}

.contact-form .btn-primary{
    margin-top:8px;

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

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

.footer{
    padding-top:80px;
    padding-bottom:30px;

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.008),
            transparent
        );
}

.footer-main{
    display:grid;
    grid-template-columns:1fr auto;

    gap:100px;

    padding-bottom:70px;
}

.footer-brand{
    max-width:430px;
}

.footer-logo{
    color:var(--ivory);

    font-family:var(--serif);
    font-size:38px;
    font-weight:500;

    text-shadow:
        0 8px 25px rgba(0,0,0,.3);
}

.footer-brand p{
    max-width:380px;

    margin-top:14px;

    color:var(--muted);

    font-size:10px;
    line-height:1.8;
}

.footer-links{
    display:flex;
    gap:90px;
}

.footer-column{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.footer-column h4{
    margin-bottom:8px;

    color:var(--gold);

    font-size:8px;
    font-weight:600;

    letter-spacing:.18em;
    text-transform:uppercase;
}

.footer-column a{
    color:var(--muted);

    font-size:9px;

    transition:var(--transition);
}

.footer-column a:hover{
    color:var(--ivory);
    padding-left:3px;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;

    padding-top:25px;

    border-top:1px solid var(--line-soft);

    color:var(--muted-dark);

    font-size:8px;

    letter-spacing:.08em;
}

/* =========================================================
   SELECTION
========================================================= */

::selection{
    background:var(--gold);
    color:var(--black);
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:1000px){

    .navbar,
    .section,
    .hero,
    .footer{
        width:min(100% - 50px, var(--container));
    }

    .nav-links{
        gap:17px;
    }

    .nav-links a{
        font-size:8px;
    }

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

        gap:70px;

        padding-top:150px;
    }

    .hero-visual{
        max-width:430px;
    }

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

        gap:60px;
    }

    .skills-grid,
    .projects-grid{
        grid-template-columns:1fr 1fr;
    }

    .timeline::before{
        left:145px;
    }

    .timeline-item{
        grid-template-columns:145px minmax(0,1fr);

        gap:45px;
    }

    .timeline-item::before{
        left:141px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:50px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:700px){

    .navbar,
    .section,
    .hero,
    .footer{
        width:calc(100% - 36px);
    }

    .navbar{
        height:74px;
    }

    .logo-name{
        font-size:17px;
    }

    .nav-links{
        display:none;
    }

    .nav-button{
        padding:10px 14px;

        font-size:7px;
    }

    .section{
        padding:100px 0;
    }

    .hero{
        min-height:auto;

        padding-top:140px;
        padding-bottom:90px;

        gap:60px;
    }

    .hero h1{
        font-size:clamp(58px,17vw,82px);
        line-height:.86;
    }

    .hero-description{
        font-size:12px;
    }

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

        gap:10px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
    }

    .section-heading{
        margin-bottom:55px;
    }

    .section-heading h2{
        font-size:clamp(47px,14vw,65px);
    }

    .about-content h3{
        font-size:43px;
    }

    .skills-grid,
    .projects-grid,
    .achievement-grid{
        grid-template-columns:1fr;
    }

    .skill-card{
        min-height:auto;
        padding:28px;
    }

    .skill-card h3{
        margin-top:45px;
    }

    .project-preview{
        min-height:220px;
    }

    .timeline::before{
        left:4px;
    }

    .timeline-item{
        display:block;

        padding:35px 0 35px 28px;
    }

    .timeline-item::before{
        left:0;
        top:42px;
    }

    .timeline-date{
        display:block;

        margin-bottom:17px;
    }

    .timeline-content h3{
        font-size:33px;
    }

    .achievement-card{
        min-height:auto;
        padding:28px;
    }

    .achievement-card:first-child{
        border-left:0;
    }

    .contact-content h2{
        font-size:clamp(48px,14vw,65px);
    }

    .footer{
        padding-top:60px;
    }

    .footer-links{
        gap:45px;
    }

    .footer-bottom{
        flex-direction:column;

        gap:8px;
    }
}

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

@media(max-width:430px){

    .navbar,
    .section,
    .hero,
    .footer{
        width:calc(100% - 28px);
    }

    .logo-mark{
        width:30px;
        height:30px;

        font-size:17px;
    }

    .logo-name{
        font-size:15px;
    }

    .nav-button{
        padding:9px 11px;
    }

    .hero{
        padding-top:125px;
    }

    .hero h1{
        font-size:58px;
    }

    .hero-description{
        margin-top:30px;
    }

    .profile-info h3{
        font-size:25px;
    }

    .section{
        padding:85px 0;
    }

    .section-heading h2{
        font-size:46px;
    }

    .about-content h3{
        font-size:38px;
    }

    .skill-card h3{
        font-size:34px;
    }

    .project-content h3{
        font-size:32px;
    }

    .timeline-content h3{
        font-size:29px;
    }

    .contact-content h2{
        font-size:47px;
    }

    .contact-details a{
        font-size:20px;
        overflow-wrap:anywhere;
    }

    .footer-links{
        flex-direction:column;
        gap:35px;
    }
}

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

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        transition:none !important;
        animation:none !important;
    }
}