/* =========================================================

   DISANDI DINALATHTHA — CREATIVE PORTFOLIO

   Purple + Gold / Editorial / Modern

   ========================================================= */

/* =========================================================

   VARIABLES

   ========================================================= */

:root{

    --plum:#5b286d;

    --purple:#8e4caf;

    --orchid:#b76bc7;

    --lavender:#ddbae5;

    --soft-purple:#f1e1f4;

    --pale-purple:#faf3fb;

    --gold:#c99a32;

    --gold-bright:#ddb85a;

    --gold-light:#f0d999;

    --champagne:#f8edcf;

    --ink:#38223d;

    --muted:#78677c;

    --paper:#fffafd;

    --white:#ffffff;

    --line:rgba(91,40,109,.13);

    --shadow:0 22px 60px rgba(91,40,109,.12);

    --shadow-hover:0 30px 80px rgba(91,40,109,.19);

    --radius:30px;

    --max:1180px;

}

/* =========================================================

   RESET + GLOBAL

   ========================================================= */

*{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    overflow-x:hidden;

    background:

        radial-gradient(

            circle at 10% 8%,

            rgba(183,107,199,.10),

            transparent 25%

        ),

        radial-gradient(

            circle at 90% 35%,

            rgba(201,154,50,.08),

            transparent 22%

        ),

        var(--paper);

    color:var(--ink);

    font-family:

        Cambria,

        Georgia,

        "Times New Roman",

        serif;

    font-size:16px;

    line-height:1.7;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    font:inherit;

}

img{

    display:block;

    max-width:100%;

}

::selection{

    background:var(--gold-light);

    color:var(--plum);

}

.container{

    width:min(

        var(--max),

        calc(100% - 80px)

    );

    margin-inline:auto;

}

.section{

    position:relative;

    padding:120px 0;

}

h1,

h2,

h3,

h4,

p{

    margin-top:0;

}

h1,

h2,

h3,

h4{

    font-family:

        Cambria,

        Georgia,

        serif;

    line-height:1.05;

}

h2{

    margin-bottom:30px;

    font-size:

        clamp(3rem,6vw,5.2rem);

    letter-spacing:-.045em;

}

h2 em{

    color:var(--purple);

    font-weight:400;

}

h3{

    font-size:1.55rem;

}

p{

    margin-bottom:20px;

}

/* =========================================================

   EYEBROW

   ========================================================= */

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:24px;

    color:var(--purple);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.eyebrow::before{

    content:"";

    width:32px;

    height:2px;

    background:

        linear-gradient(

            90deg,

            var(--gold),

            var(--gold-light)

        );

}

.eyebrow.light{

    color:var(--champagne);

}

.eyebrow.light::before{

    background:var(--gold-light);

}

/* =========================================================

   HIDE OLD NAVIGATION

   ========================================================= */

.site-header,

.nav-wrap,

nav,

.menu-toggle,

.skip-link{

    display:none !important;

}

/* =========================================================

   HERO

   ========================================================= */

.hero{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    padding:90px 0 32px;

    color:white;

    background:

        radial-gradient(

            circle at 75% 30%,

            rgba(221,184,90,.20),

            transparent 16%

        ),

        radial-gradient(

            circle at 78% 52%,

            rgba(221,186,229,.28),

            transparent 28%

        ),

        linear-gradient(

            135deg,

            #4e205f 0%,

            #713384 35%,

            #9b54ad 68%,

            #b76bc7 100%

        );

}

/* Decorative glow */

.hero::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-150px;

    top:-160px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(240,217,153,.55) 0%,

            rgba(240,217,153,.12) 35%,

            transparent 68%

        );

    filter:blur(10px);

    pointer-events:none;

}

/* Large outline circle */

.hero::after{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    right:-190px;

    bottom:-270px;

    border:

        1px solid

        rgba(255,255,255,.20);

    border-radius:50%;

    pointer-events:none;

}

/* =========================================================

   HERO LAYOUT

   ========================================================= */

.hero-layout{

    position:relative;

    z-index:2;

    min-height:

        calc(100vh - 190px);

    display:grid;

    grid-template-columns:

        minmax(0,1.08fr)

        minmax(380px,.92fr);

    align-items:center;

    gap:60px;

}

/* =========================================================

   HERO COPY

   ========================================================= */

.hero-copy{

    position:relative;

    z-index:3;

    width:100%;

    max-width:720px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

}

.hero .eyebrow{

    margin-bottom:24px;

}

/* Hero heading */

.hero h1{

    width:100%;

    margin:0;

    font-size:

        clamp(4.4rem,8vw,8rem);

    line-height:.88;

    letter-spacing:-.055em;

    font-weight:700;

}

.hero h1 > span:first-child{

    display:inline-block;

    color:white;

}

/* Gold star */

.hero-asterisk{

    display:inline-block;

    margin-left:10px;

    color:var(--gold-light);

    font-size:.42em;

    line-height:1;

    vertical-align:top;

    animation:

        floatStar

        5s

        ease-in-out

        infinite;

}

/* Surname */

.hero-surname{

    margin:20px 0 28px;

    color:#f1d9f5;

    font-size:

        clamp(2.4rem,4.3vw,4.5rem);

    font-style:italic;

    line-height:1;

    letter-spacing:-.025em;

}

/* Description */

.hero-description{

    width:100%;

    max-width:500px;

    margin-bottom:0;

    color:

        rgba(255,255,255,.82);

    font-size:1.13rem;

    line-height:1.65;

}

/* =========================================================

   HERO ROLE BOX

   ========================================================= */

.hero-role-box{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    width:fit-content;

    gap:10px;

    margin-top:26px;

    padding:13px 20px;

    border:

        1px solid

        rgba(255,255,255,.22);

    border-radius:12px;

    background:

        linear-gradient(

            135deg,

            var(--gold),

            var(--gold-bright)

        );

    color:white;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    box-shadow:

        0 12px 30px

        rgba(54,21,65,.18);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.hero-role-box .role-divider{

    color:

        rgba(255,255,255,.60);

    font-weight:400;

}

.hero-role-box:hover{

    transform:

        translateY(-3px);

    box-shadow:

        0 18px 38px

        rgba(54,21,65,.25);

}

/* =========================================================

   HERO ACTIONS

   ========================================================= */

.hero-actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    margin-top:32px;

}

.hero-actions a,

.contact-bottom a,

a.button,

a.button-lime{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    padding:14px 25px;

    border-radius:16px;

    background:

        linear-gradient(

            135deg,

            var(--gold-bright),

            var(--gold-light)

        );

    color:#4d3151;

    font-weight:700;

    box-shadow:

        0 12px 30px

        rgba(61,35,66,.15);

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}

.hero-actions a:hover,

.contact-bottom a:hover,

a.button:hover,

a.button-lime:hover{

    transform:

        translateY(-4px);

    box-shadow:

        0 18px 38px

        rgba(61,35,66,.24);

}

/* Secondary hero button */

.hero-actions .text-link{

    border:

        1px solid

        rgba(255,255,255,.25);

    background:

        rgba(255,255,255,.08);

    color:white;

    box-shadow:none;

    backdrop-filter:

        blur(10px);

}

.hero-actions .text-link:hover{

    background:

        rgba(255,255,255,.15);

}

/* =========================================================

   HERO LOCATION

   ========================================================= */

.hero-location{

    margin:38px 0 0;

    color:

        rgba(255,255,255,.62);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

}

/* =========================================================

   HERO ART

   ========================================================= */

.hero-art{

    position:relative;

    width:100%;

    max-width:500px;

    min-height:500px;

    justify-self:end;

    display:grid;

    place-items:center;

}

/* Main glass shape */

.hero-art::before{

    content:"";

    position:absolute;

    width:320px;

    height:400px;

    left:50%;

    top:50%;

    transform:

        translate(-50%,-50%)

        rotate(8deg);

    border:

        1px solid

        rgba(255,255,255,.22);

    border-radius:

        48% 52% 44% 56% /

        55% 42% 58% 45%;

    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.18),

            rgba(255,255,255,.04)

        );

    backdrop-filter:

        blur(12px);

    box-shadow:

        inset 0 0 50px

        rgba(255,255,255,.07),

        0 30px 80px

        rgba(59,23,70,.18);

}

/* Gold circle */

.hero-art::after{

    content:"";

    position:absolute;

    width:115px;

    height:115px;

    top:40px;

    right:20px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--gold-light),

            var(--gold)

        );

    box-shadow:

        0 20px 40px

        rgba(66,36,71,.18);

    animation:

        floatShape

        7s

        ease-in-out

        infinite;

}

/* =========================================================

   MONOGRAM

   ========================================================= */

.monogram{

    position:relative;

    z-index:3;

    font-family:

        Cambria,

        Georgia,

        serif;

    font-style:italic;

    font-size:

        clamp(9rem,15vw,14rem);

    line-height:1;

    letter-spacing:-.15em;

    color:white;

    text-shadow:

        0 15px 35px

        rgba(54,21,65,.18);

    transform:

        translateX(-12px)

        rotate(-8deg);

}

.monogram > span{

    position:absolute;

    top:-5px;

    right:-42px;

    color:var(--gold-light);

    font-size:.28em;

}

/* =========================================================

   ORBITS

   ========================================================= */

.orbit{

    position:absolute;

    z-index:2;

    left:50%;

    top:50%;

    width:95%;

    height:58%;

    border:

        1px solid

        rgba(255,255,255,.34);

    border-radius:50%;

    transform:

        translate(-50%,-50%)

        rotate(-25deg);

    pointer-events:none;

}

.orbit-two{

    width:62%;

    height:88%;

    border-color:

        rgba(240,217,153,.48);

    transform:

        translate(-50%,-50%)

        rotate(42deg);

}

/* =========================================================

   FLOATING LABELS

   ========================================================= */

.floating-label{

    position:absolute;

    z-index:5;

    padding:11px 17px;

    border-radius:14px;

    background:

        rgba(255,255,255,.92);

    color:var(--plum);

    font-size:.84rem;

    font-weight:700;

    box-shadow:

        0 16px 35px

        rgba(54,23,63,.15);

    backdrop-filter:

        blur(10px);

}

.label-one{

    top:90px;

    left:0;

    transform:

        rotate(-5deg);

}

.label-two{

    right:0;

    bottom:90px;

    background:

        linear-gradient(

            135deg,

            var(--gold-light),

            var(--champagne)

        );

    transform:

        rotate(5deg);

}

/* =========================================================

   ART CAPTION

   ========================================================= */

.art-caption{

    position:absolute;

    left:50%;

    bottom:18px;

    transform:

        translateX(-50%);

    width:max-content;

    color:

        rgba(255,255,255,.60);

    font-size:.72rem;

    letter-spacing:.17em;

    text-transform:uppercase;

}

/* =========================================================

   HERO BOTTOM

   ========================================================= */

.hero-bottom{

    position:relative;

    z-index:3;

    width:min(

        var(--max),

        calc(100% - 80px)

    );

    margin:25px auto 0;

    padding-top:20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-top:

        1px solid

        rgba(255,255,255,.17);

    color:

        rgba(255,255,255,.66);

    font-size:.8rem;

}

.hero-bottom a{

    transition:

        color .2s ease;

}

.hero-bottom a:hover{

    color:var(--gold-light);

}

/* =========================================================

   TICKER

   ========================================================= */

.ticker{

    overflow:hidden;

    padding:17px 0;

    background:

        linear-gradient(

            90deg,

            #c79431,

            #e0bb60,

            #c79431

        );

    color:#4f3056;

}

.ticker > div{

    width:max-content;

    white-space:nowrap;

    font-weight:700;

    letter-spacing:.08em;

    animation:

        marquee

        35s

        linear

        infinite;

}

.ticker span{

    margin:0 35px;

}

/* =========================================================

   ABOUT

   ========================================================= */

.about{

    overflow:hidden;

}

.about::before{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    left:-190px;

    top:50px;

    border-radius:50%;

    background:

        var(--soft-purple);

    filter:blur(3px);

    opacity:.7;

}

.about-grid{

    position:relative;

    display:grid;

    grid-template-columns:

        .8fr 1.2fr;

    gap:100px;

}

.about-grid > div:first-child{

    position:relative;

}

.about-grid > div:first-child::after{

    content:"✦";

    display:block;

    margin-top:40px;

    color:var(--gold);

    font-size:6rem;

    line-height:1;

}

.about-body{

    position:relative;

    padding:48px;

    border-radius:

        0 40px 40px 40px;

    background:white;

    box-shadow:

        var(--shadow);

}

.about-body::before{

    content:"";

    position:absolute;

    width:70px;

    height:7px;

    left:48px;

    top:0;

    border-radius:

        0 0 10px 10px;

    background:

        linear-gradient(

            90deg,

            var(--purple),

            var(--gold)

        );

}

.about-body .large-copy{

    color:var(--ink);

    font-size:1.55rem;

    line-height:1.55;

}

.about-body p{

    color:var(--muted);

}

.about-note{

    display:flex;

    gap:18px;

    align-items:center;

    margin-top:35px;

}

.about-note > span{

    color:var(--gold);

    font-size:3rem;

}

.about-note p{

    margin:0;

}

.about-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:28px;

}

.about-tags span{

    padding:7px 14px;

    border-radius:12px;

    background:

        var(--soft-purple);

    color:var(--plum);

    font-size:.86rem;

}

/* =========================================================

   SECTION HEADINGS

   ========================================================= */

.section-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:60px;

    margin-bottom:55px;

}

.section-heading h2{

    margin:0;

}

.section-heading > p{

    max-width:370px;

    margin-bottom:0;

    color:var(--muted);

}

/* =========================================================

   SKILLS

   ========================================================= */

.skills{

    overflow:hidden;

    background:

        linear-gradient(

            160deg,

            #f4e6f6 0%,

            #fffafd 45%,

            #f7edda 130%

        );

}

.skills::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-100px;

    top:70px;

    border:

        55px solid

        rgba(183,107,199,.10);

    border-radius:50%;

}

.skills-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:20px;

}

.skill-group{

    position:relative;

    min-height:300px;

    padding:30px;

    overflow:hidden;

    border:

        1px solid

        rgba(255,255,255,.8);

    border-radius:28px;

    background:

        rgba(255,255,255,.75);

    box-shadow:

        0 15px 45px

        rgba(90,39,107,.07);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.skill-group:nth-child(even){

    transform:

        translateY(30px);

}

.skill-group:hover{

    transform:

        translateY(-8px)

        rotate(-1deg);

    box-shadow:

        var(--shadow-hover);

}

.skill-group:nth-child(even):hover{

    transform:

        translateY(20px)

        rotate(1deg);

}

.skill-icon{

    width:55px;

    height:55px;

    display:grid;

    place-items:center;

    margin-bottom:35px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--purple),

            var(--orchid)

        );

    color:white;

    font-size:1.25rem;

    box-shadow:

        0 10px 25px

        rgba(142,76,175,.22);

}

.skill-group:nth-child(2) .skill-icon,

.skill-group:nth-child(4) .skill-icon{

    background:

        linear-gradient(

            135deg,

            var(--gold),

            var(--gold-light)

        );

    color:var(--plum);

}

.skill-group h3{

    min-height:48px;

    margin-bottom:15px;

}

.skill-group p{

    color:var(--muted);

}

.chips{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin:20px 0 0;

    padding:0;

    list-style:none;

}

.chips li{

    padding:5px 10px;

    border-radius:8px;

    background:

        var(--pale-purple);

    color:var(--plum);

    font-size:.78rem;

}

/* =========================================================

   PROJECTS

   ========================================================= */

.projects{

    background:var(--paper);

}

.project-filters{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:42px;

}

.project-filters button{

    padding:10px 18px;

    border:0;

    border-radius:12px;

    background:

        var(--soft-purple);

    color:var(--plum);

    font-family:inherit;

    font-weight:700;

    cursor:pointer;

    transition:

        transform .25s ease,

        background .25s ease,

        color .25s ease,

        box-shadow .25s ease;

}

.project-filters button:hover{

    transform:

        translateY(-2px);

}

.project-filters button.active{

    background:

        linear-gradient(

            135deg,

            var(--purple),

            var(--orchid)

        );

    color:white;

    box-shadow:

        0 10px 25px

        rgba(142,76,175,.18);

}

/* =========================================================

   PROJECT GRID — 2 PROJECTS PER ROW

   ========================================================= */

.project-grid{

    display:grid;

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

    gap:28px;

    align-items:stretch;

}

.project-card{

    position:relative;

    width:100%;

    min-width:0;

    overflow:hidden;

    border:0;

    border-radius:32px;

    background:white;

    box-shadow:var(--shadow);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.project-card:hover{

    transform:translateY(-8px);

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

}

.project-card[hidden]{

    display:none !important;

}

.project-open{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    padding:0;

    border:0;

    background:transparent;

    color:inherit;

    text-align:left;

    cursor:pointer;

}

/* =========================================================

   PROJECT SCREENSHOT COVERS

   ========================================================= */

.project-cover{

    position:relative;

    height:360px;

    overflow:hidden;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    isolation:isolate;

}

/* Decorative circle */

.project-cover::after{

    content:"";

    position:absolute;

    z-index:4;

    width:160px;

    height:160px;

    right:-45px;

    bottom:-55px;

    border:

        1px solid

        rgba(255,255,255,.40);

    border-radius:50%;

    pointer-events:none;

}

/* Actual screenshot */

.project-cover-image > img{

    position:absolute;

    z-index:0;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .7s

        cubic-bezier(.2,.7,.2,1),

        filter .5s ease;

}

/* Purple readability overlay */

.project-image-overlay{

    position:absolute;

    z-index:1;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(54,20,65,.08) 0%,

            rgba(54,20,65,.18) 35%,

            rgba(54,20,65,.58) 68%,

            rgba(54,20,65,.92) 100%

        );

    pointer-events:none;

}

/* Gold glow */

.project-image-overlay::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at 85% 12%,

            rgba(240,217,153,.32),

            transparent 27%

        );

}

/* Project number */

.cover-number{

    position:absolute;

    z-index:3;

    top:25px;

    left:28px;

    color:var(--gold-light);

    font-size:.8rem;

    letter-spacing:.12em;

}

/* Main project title */

.cover-type{

    position:relative;

    z-index:3;

    color:white;

    font-size:

        clamp(3rem,5vw,5rem);

    font-weight:700;

    letter-spacing:-.045em;

    line-height:.9;

    transition:

        transform .35s ease;

}

.cover-type i{

    font-family:

        Cambria,

        Georgia,

        serif;

    font-weight:400;

}

/* Caption */

.cover-caption{

    position:absolute;

    z-index:3;

    left:28px;

    right:28px;

    bottom:25px;

    color:white;

    font-size:.8rem;

    letter-spacing:.1em;

}

/* Screenshot hover */

.project-card:hover

.project-cover-image > img{

    transform:

        scale(1.07);

    filter:

        saturate(1.08)

        contrast(1.04);

}

.project-card:hover

.project-cover-image .cover-type{

    transform:

        translateY(-5px);

}

/* =========================================================

   FALLBACK PROJECT COVER COLOURS

   Used if a cover doesn't contain a screenshot

   ========================================================= */

.cover-water{

    background:

        linear-gradient(

            135deg,

            #663078,

            #a75bb8

        );

}

.cover-building{

    background:

        linear-gradient(

            135deg,

            #4f235d,

            #8f47a0

        );

}

.cover-blog{

    background:

        linear-gradient(

            135deg,

            #7c3b8d,

            #c078cc

        );

}

.cover-vocal{

    background:

        radial-gradient(

            circle at 85% 20%,

            rgba(240,217,153,.65),

            transparent 17%

        ),

        linear-gradient(

            135deg,

            #713383,

            #a75cb8,

            #d39bd8

        );

    color:white;

}

.cover-vocal i{

    color:#f4dff5;

}

.cover-symbol{

    color:var(--gold-light);

}

.cover-insync{

    background:

        linear-gradient(

            135deg,

            #f2e1f5,

            #dcb6e4

        );

    color:var(--plum);

}

.cover-tres{

    background:

        radial-gradient(

            circle at 75% 20%,

            rgba(218,181,87,.23),

            transparent 20%

        ),

        linear-gradient(

            145deg,

            #482153,

            #753383,

            #9450a3

        );

    color:var(--gold-light);

}

.cover-shopping{

    background:

        linear-gradient(

            135deg,

            #f9e8b8,

            #e0b859

        );

    color:var(--plum);

}

.cover-anime{

    background:

        linear-gradient(

            135deg,

            #b76bc7,

            #e1b9e6

        );

    color:white;

}

.cover-anime .cover-type > span{

    display:block;

    font-style:italic;

}

/* =========================================================

   PROJECT INFORMATION

   ========================================================= */

.project-info{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:30px 32px 34px;

}

.project-meta{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-bottom:18px;

    color:var(--muted);

    font-size:.8rem;

}

.project-info h3{

    margin-bottom:12px;

    font-size:1.7rem;

}

.project-info p{

    color:var(--muted);

}

.project-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.project-tags span{

    padding:5px 10px;

    border-radius:8px;

    background:

        var(--soft-purple);

    color:var(--plum);

    font-size:.78rem;

}

.case-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:24px;

    padding-top:18px;

    border-top:

        1px solid

        var(--line);

    color:var(--purple);

    font-weight:700;

}

.case-link > span{

    display:grid;

    place-items:center;

    width:35px;

    height:35px;

    border-radius:50%;

    background:

        var(--champagne);

    color:var(--plum);

}

.project-info .case-link{

    margin-top:auto;

}

/* =========================================================

   EXPERIENCE

   ========================================================= */

.experience{

    position:relative;

    overflow:hidden;

    color:white;

    background:

        radial-gradient(

            circle at 15% 20%,

            rgba(220,177,229,.20),

            transparent 25%

        ),

        radial-gradient(

            circle at 90% 80%,

            rgba(221,184,90,.17),

            transparent 25%

        ),

        linear-gradient(

            135deg,

            #45204f,

            #6b3079 50%,

            #8f48a0

        );

}

.experience::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-250px;

    top:-180px;

    border:

        1px solid

        rgba(255,255,255,.15);

    border-radius:50%;

}

.experience-layout{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

        .8fr 1.2fr;

    gap:100px;

}

.experience-intro h2 em{

    color:var(--gold-light);

}

.experience-intro > p:not(.eyebrow){

    max-width:330px;

    color:

        rgba(255,255,255,.70);

}

.big-star{

    display:block;

    margin-top:45px;

    color:var(--gold-light);

    font-size:7rem;

    line-height:1;

    animation:

        floatStar

        6s

        ease-in-out

        infinite;

}

.timeline article{

    position:relative;

    margin-bottom:22px;

    padding:30px;

    border:

        1px solid

        rgba(255,255,255,.12);

    border-radius:24px;

    background:

        rgba(255,255,255,.07);

    backdrop-filter:

        blur(12px);

    transition:

        transform .25s ease,

        background .25s ease;

}

.timeline article:hover{

    background:

        rgba(255,255,255,.12);

    transform:

        translateX(6px);

}

.timeline article::before{

    content:"";

    position:absolute;

    width:8px;

    height:55px;

    left:0;

    top:30px;

    border-radius:

        0 8px 8px 0;

    background:

        linear-gradient(

            var(--gold-light),

            var(--gold)

        );

}

.timeline-date{

    margin-bottom:12px;

    color:var(--gold-light);

    font-size:.78rem;

    letter-spacing:.1em;

}

.timeline h3{

    margin-bottom:10px;

    font-size:1.65rem;

}

.timeline .role{

    color:white;

}

.timeline p:last-child{

    margin-bottom:0;

    color:

        rgba(255,255,255,.67);

}

/* =========================================================

   EDUCATION

   ========================================================= */

.education{

    overflow:hidden;

}

.education::before{

    content:"✦";

    position:absolute;

    right:6%;

    top:65px;

    color:

        rgba(201,154,50,.22);

    font-size:10rem;

    transform:

        rotate(12deg);

}

.education-grid{

    display:grid;

    grid-template-columns:

        1.1fr .9fr;

    gap:40px;

}

.education-main{

    position:relative;

    padding:45px;

    border:0;

    border-radius:36px;

    background:

        linear-gradient(

            145deg,

            #f1ddf4,

            #fffafd

        );

    box-shadow:

        var(--shadow);

}

.education-main::after{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    right:30px;

    top:30px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--gold-light),

            var(--gold)

        );

    opacity:.22;

    pointer-events:none;

}

.education-main h3{

    position:relative;

    z-index:2;

    font-size:1.75rem;

    line-height:1.3;

}

.school{

    margin-top:32px;

    padding-top:28px;

    border-top:

        1px solid

        var(--line);

}

.school p{

    color:var(--muted);

}

/* Specific school date/text */

.school p.mid{

    color:var(--ink);

}

/* =========================================================

   CERTIFICATIONS

   ========================================================= */

.certifications{

    padding:10px 0;

}

.certifications h3{

    font-size:1.8rem;

}

.certifications ul{

    margin:0;

    padding:0;

    list-style:none;

}

.certifications li{

    position:relative;

    margin-bottom:10px;

    padding:

        18px 20px

        18px 45px;

    border-radius:16px;

    transition:

        background .2s ease,

        transform .2s ease;

}

.certifications li::before{

    content:"✦";

    position:absolute;

    left:14px;

    top:16px;

    color:var(--gold);

    font-size:1rem;

}

.certifications li:hover{

    background:

        var(--soft-purple);

    transform:

        translateX(3px);

}

.certifications strong{

    display:block;

}

.certifications li > span{

    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:.82rem;

}

/* =========================================================

   CONTACT

   ========================================================= */

.contact{

    position:relative;

    overflow:hidden;

    padding:130px 0;

    color:white;

    background:

        radial-gradient(

            circle at 80% 30%,

            rgba(240,217,153,.25),

            transparent 20%

        ),

        linear-gradient(

            135deg,

            #6a2e79,

            #954ca6,

            #b86bc7

        );

}

.contact::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-150px;

    bottom:-190px;

    border:

        60px solid

        rgba(255,255,255,.08);

    border-radius:50%;

}

.contact h2{

    max-width:850px;

    font-size:

        clamp(3.5rem,8vw,7rem);

    letter-spacing:-.05em;

}

.contact h2 em,

.contact h2 > span{

    color:var(--gold-light);

}

.contact > div > p:not(.eyebrow){

    max-width:600px;

    color:

        rgba(255,255,255,.80);

    font-size:1.15rem;

}

.contact-email{

    display:inline-block;

    margin-top:25px;

    padding-bottom:8px;

    border-bottom:

        2px solid

        var(--gold-light);

    color:white;

    font-size:

        clamp(1.2rem,3vw,2.2rem);

    overflow-wrap:anywhere;

}

.contact-bottom{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    margin-top:45px;

}

/* Simple contact links */

.contact-bottom > a:not(.button):not(.button-lime){

    border:

        1px solid

        rgba(255,255,255,.20);

    background:

        rgba(255,255,255,.10);

    color:white;

    box-shadow:none;

}

.contact-bottom > a:not(.button):not(.button-lime):hover{

    background:

        rgba(255,255,255,.17);

}

/* CTA on right */

.contact-bottom .button,

.contact-bottom .button-lime{

    margin-left:auto;

}

/* =========================================================

   FOOTER

   ========================================================= */

footer{

    padding:32px 0;

    background:#fffafd;

}

.footer-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

}

.footer-inner p{

    margin:0;

    color:var(--muted);

    font-size:.8rem;

}

.footer-inner a{

    color:var(--purple);

    font-weight:700;

}

/* =========================================================

   DIALOG / CASE STUDY

   ========================================================= */

dialog{

    width:

        min(

            760px,

            calc(100% - 36px)

        );

    max-height:88vh;

    padding:0;

    overflow:auto;

    border:0;

    border-radius:32px;

    background:var(--paper);

    color:var(--ink);

    box-shadow:

        0 40px 120px

        rgba(52,24,60,.38);

}

dialog::backdrop{

    background:

        rgba(49,20,56,.72);

    backdrop-filter:

        blur(7px);

}

.dialog-content{

    position:relative;

    padding:52px;

}

.dialog-close{

    position:absolute;

    top:20px;

    right:20px;

    display:grid;

    place-items:center;

    width:42px;

    height:42px;

    border:0;

    border-radius:50%;

    background:

        var(--soft-purple);

    color:var(--plum);

    font-size:1.5rem;

    cursor:pointer;

}

.dialog-close:hover{

    background:

        var(--champagne);

}

dialog h2{

    margin-bottom:12px;

    font-size:2.8rem;

}

.dialog-subtitle{

    color:var(--purple);

}

.dialog-content h3{

    margin-top:30px;

    margin-bottom:10px;

}

.dialog-content ul{

    padding-left:22px;

}

.dialog-meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.dialog-meta span{

    padding:6px 11px;

    border-radius:8px;

    background:

        var(--soft-purple);

    color:var(--plum);

    font-size:.8rem;

}

.dialog-image{

    display:block;

    width:100%;

    height:auto;

    margin:28px 0;

    border-radius:20px;

}

/* =========================================================

   REVEAL

   ========================================================= */

.reveal{

    opacity:0;

    transform:

        translateY(28px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}

.reveal.is-visible{

    opacity:1;

    transform:none;

}

/* =========================================================

   ANIMATIONS

   ========================================================= */

@keyframes floatStar{

    0%,

    100%{

        transform:

            translateY(0)

            rotate(0);

    }

    50%{

        transform:

            translateY(-12px)

            rotate(8deg);

    }

}

@keyframes floatShape{

    0%,

    100%{

        transform:

            translateY(0)

            rotate(0);

    }

    50%{

        transform:

            translateY(15px)

            rotate(8deg);

    }

}

@keyframes marquee{

    to{

        transform:

            translateX(-33.333%);

    }

}

/* =========================================================

   TABLET

   ========================================================= */

@media(max-width:1000px){

    .container{

        width:

            calc(100% - 55px);

    }

    .section{

        padding:

            95px 0;

    }

    /* Hero */

    .hero{

        padding-top:75px;

    }

    .hero-layout{

        grid-template-columns:

            minmax(0,1fr)

            minmax(320px,.85fr);

        gap:35px;

        min-height:

            calc(100vh - 175px);

    }

    .hero h1{

        font-size:

            clamp(4rem,8vw,6.4rem);

    }

    .hero-art{

        min-height:430px;

    }

    .hero-art::before{

        width:270px;

        height:350px;

    }

    .monogram{

        font-size:

            clamp(8rem,15vw,11rem);

    }

    /* About */

    .about-grid{

        gap:55px;

    }

    /* Skills */

    .skills-grid{

        grid-template-columns:

            repeat(2,1fr);

    }

    .skill-group:nth-child(even){

        transform:none;

    }

    .skill-group:nth-child(even):hover{

        transform:

            translateY(-8px)

            rotate(1deg);

    }

    /* Projects */

    .project-grid{

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

        gap:22px;

    }

    .project-cover{

        height:320px;

    }

    /* Experience */

    .experience-layout{

        gap:55px;

    }

}

/* =========================================================

   MOBILE

   ========================================================= */

@media(max-width:760px){

    .container{

        width:

            calc(100% - 36px);

    }

    .section{

        padding:

            75px 0;

    }

    h2{

        font-size:

            clamp(2.8rem,13vw,4.2rem);

    }

    /* Hero */

    .hero{

        min-height:auto;

        padding:

            65px 0 30px;

    }

    .hero-layout{

        min-height:auto;

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero-copy{

        max-width:100%;

    }

    .hero h1{

        font-size:

            clamp(4rem,17vw,6rem);

    }

    .hero-surname{

        font-size:

            clamp(2.3rem,10vw,3rem);

    }

    .hero-description{

        max-width:430px;

        font-size:1.05rem;

    }

    .hero-role-box{

        gap:7px;

        padding:12px 15px;

        font-size:.68rem;

        line-height:1.5;

    }

    .hero-art{

        justify-self:center;

        width:100%;

        max-width:430px;

        min-height:350px;

    }

    .hero-art::before{

        width:230px;

        height:290px;

    }

    .hero-art::after{

        width:85px;

        height:85px;

        right:25px;

        top:25px;

    }

    .monogram{

        font-size:9rem;

    }

    .orbit{

        width:88%;

        height:58%;

    }

    .orbit-two{

        width:58%;

        height:86%;

    }

    .label-one{

        top:55px;

        left:0;

    }

    .label-two{

        right:0;

        bottom:55px;

    }

    .art-caption{

        bottom:5px;

    }

    .hero-location{

        margin-top:30px;

    }

    .hero-bottom{

        width:

            calc(100% - 36px);

        margin-top:30px;

        flex-wrap:wrap;

        gap:12px;

    }

    /* Section headings */

    .section-heading{

        display:block;

        margin-bottom:38px;

    }

    .section-heading > p{

        max-width:none;

        margin-top:20px;

    }

    /* About */

    .about-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .about-body{

        padding:35px;

        border-radius:

            0 30px 30px 30px;

    }

    .about-grid > div:first-child::after{

        margin-top:20px;

        font-size:4rem;

    }

    /* Skills */

    .skills-grid{

        grid-template-columns:1fr;

    }

    .skill-group{

        min-height:auto;

    }

    /* Projects */

    .project-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .project-card{

        width:100%;

    }

    .project-cover{

        height:300px;

    }

    .project-info{

        padding:26px;

    }

    .project-info h3{

        font-size:1.55rem;

    }

    .project-meta{

        flex-wrap:wrap;

        gap:8px;

    }

    .project-filters{

        gap:8px;

    }

    .project-filters button{

        padding:9px 13px;

        font-size:.85rem;

    }

    /* Experience */

    .experience-layout{

        grid-template-columns:1fr;

        gap:35px;

    }

    .big-star{

        display:none;

    }

    /* Education */

    .education-grid{

        grid-template-columns:1fr;

    }

    .education-main{

        padding:34px;

    }

    /* Contact */

    .contact{

        padding:

            90px 0;

    }

    .contact h2{

        font-size:

            clamp(3.2rem,15vw,5.3rem);

    }

    .contact-bottom{

        align-items:stretch;

    }

    .contact-bottom .button,

    .contact-bottom .button-lime{

        margin-left:0;

    }

    /* Footer */

    .footer-inner{

        flex-wrap:wrap;

    }

    .footer-inner p{

        flex-basis:100%;

        order:3;

    }

    /* Dialog */

    .dialog-content{

        padding:

            45px 25px 30px;

    }

    dialog h2{

        font-size:2.2rem;

    }

}

/* =========================================================

   SMALL MOBILE

   ========================================================= */

@media(max-width:400px){

    .hero{

        padding-top:50px;

    }

    .hero h1{

        font-size:3.7rem;

    }

    .hero-surname{

        font-size:2.25rem;

    }

    .hero-actions{

        width:100%;

        align-items:stretch;

    }

    .hero-actions a{

        width:100%;

    }

    .hero-art{

        min-height:310px;

    }

    .hero-art::before{

        width:200px;

        height:255px;

    }

    .monogram{

        font-size:7.5rem;

    }

    .floating-label{

        padding:

            9px 12px;

        font-size:.72rem;

    }

    .project-cover{

        height:270px;

    }

    .cover-type{

        font-size:3.4rem;

    }

    .project-info{

        padding:25px;

    }

    .education-main{

        padding:28px;

    }

}

/* =========================================================

   ACCESSIBILITY

   ========================================================= */

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

    html{

        scroll-behavior:auto;

    }

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

    }

    .reveal{

        opacity:1;

        transform:none;

    }

}

/* =========================================================
   PROJECT CARD CONSISTENCY — FINAL OVERRIDES
   ========================================================= */
.project-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    align-items:stretch;
}

.project-card,
.project-card.featured,
.project-card:nth-child(3n),
.project-card:nth-child(3n + 1):not(:first-child){
    grid-column:auto;
    width:100%;
    min-width:0;
    height:100%;
}

.project-open{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height:100%;
}

.project-cover,
.project-cover-image{
    width:100%;
    height:360px;
    min-height:360px;
    flex:0 0 360px;
}

.project-info{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    width:100%;
    padding:30px 32px 34px;
}

.project-info > p{
    min-height:5.1em;
}

.project-tags{
    min-height:74px;
    align-content:flex-start;
}

.project-info .case-link{
    margin-top:auto;
}

@media(max-width:1000px){
    .project-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    .project-cover,
    .project-cover-image{
        height:320px;
        min-height:320px;
        flex-basis:320px;
    }
}

@media(max-width:760px){
    .project-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .project-cover,
    .project-cover-image{
        height:300px;
        min-height:300px;
        flex-basis:300px;
    }

    .project-info{
        padding:26px;
    }

    .project-info > p,
    .project-tags{
        min-height:0;
    }
}