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

:root{
    --ink:#e8e4dc;--ink-2:#9e9b94;--ink-3:#5e5c58;
    --paper:#181714;--paper-2:#201f1b;--paper-3:#272521;
    --accent:#c8a96e;--accent-2:#8fa67a;
    --border:rgba(232,228,220,.08);--nav-h:64px;
    --hl-yellow:rgba(250,210,80,.28);
    --hl-green:rgba(130,210,120,.22);
    --hl-blue:rgba(100,180,255,.22);
    --hl-pink:rgba(255,140,180,.22);
}

html{scroll-behavior:smooth}

body{
    font-family:'DM Sans',sans-serif;
    background:var(--paper);
    color:var(--ink);
    min-height:100vh;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

#app{padding-top:var(--nav-h);min-height:100vh}

/* NAV */
nav{
    position:fixed;
    top:0;left:0;right:0;
    height:var(--nav-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(1.5rem,5vw,4rem);
    background:rgba(24,23,20,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    z-index:40;
}

.nav-logo{
    position:relative;
    display:inline-block;
    font-family:'DM Serif Display',serif;
    font-size:1.2rem;
    color:var(--ink);
    text-decoration:none;
    letter-spacing:.01em;
    cursor:pointer;
}

.nav-links{
    display:flex;
    gap:0;
    list-style:none;
}

.nav-links li a{
    display:block;
    font-size:.8rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    text-decoration:none;
    font-weight:400;
    padding:.4rem .9rem;
    border-radius:100px;
    transition:color .2s,background-color .2s;
}

.nav-links li a:not(.active):hover{color:var(--ink)}

.nav-links li a.active,
.nav-links li a.hl:hover{
    color:var(--ink)!important;
    background-color:var(--paper-2)!important;
    background-image:none!important;
}

.nav-links li a.hl{background-image:none!important}

.nav-cta{
    font-size:.78rem;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--ink);
    text-decoration:none;
    border:1px solid rgba(26,26,24,.35);
    padding:.45rem 1.1rem;
    border-radius:100px;
    transition:background .2s,color .2s;
    cursor:pointer;
}

.nav-cta:hover{
    background:var(--ink);
    color:var(--paper);
}

/* HIGHLIGHT LINKS */
.hl{
    display:inline;
    text-decoration:none;
    font-weight:400;
    background-image:linear-gradient(var(--hl-color,var(--hl-yellow)),var(--hl-color,var(--hl-yellow)));
    background-size:0 40%;
    background-position:0 100%;
    background-repeat:no-repeat;
    transition:background-size .4s cubic-bezier(.25,.46,.45,.94),color .2s;
    padding-bottom:.12em;
    cursor:pointer;
}

.hl:hover{
    background-size:100% 40%;
    color:var(--ink);
}

.hl-y{--hl-color:var(--hl-yellow);color:#e8d080}
.hl-g{--hl-color:var(--hl-green);color:#88d878}
.hl-b{--hl-color:var(--hl-blue);color:#7ab8f5}
.hl-p{--hl-color:var(--hl-pink);color:#f09abd}

/* PAGE SYSTEM */
.page{display:none;animation:fadeUp .5s ease both}
.page.active{display:block}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}

/* SHARED */
.wrap{
    max-width:1100px;
    margin:0 auto;
    padding:0 clamp(1.5rem,5vw,4rem);
}

.section-label{
    display:flex;
    align-items:center;
    gap:1rem;
    font-size:.72rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--ink-3);
    margin-bottom:2.5rem;
}

.section-label::after{
    content:'';
    display:block;
    width:40px;
    height:1px;
    background:var(--border);
}

h1,h2,h3{font-family:'DM Serif Display',serif;color:var(--ink);font-weight:400}

h1{
    font-size:clamp(2.8rem,5vw,4.5rem);
    line-height:1.07;
}

h1 em{
    font-style:italic;
    color:var(--ink-2);
}

h2{
    font-size:clamp(1.6rem,3vw,2.3rem);
    line-height:1.2;
    margin-bottom:1.1rem;
}

h3{
    font-size:1.2rem;
    margin-bottom:.5rem;
}

.p{
    font-size:.95rem;
    color:var(--ink-2);
    line-height:1.85;
    font-weight:300;
    margin-bottom:1rem;
}

.btn-dark,
.btn-ghost{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-family:'DM Sans',sans-serif;
    font-size:.82rem;
    letter-spacing:.04em;
    cursor:pointer;
    text-decoration:none;
}

.btn-dark{
    background:var(--ink);
    color:var(--paper);
    border:none;
    padding:.7rem 1.6rem;
    border-radius:100px;
    transition:opacity .2s;
}

.btn-dark:hover{opacity:.78}

.btn-ghost{
    background:transparent;
    color:var(--ink-2);
    border:none;
    border-bottom:1px solid var(--border);
    padding:.7rem 0;
    transition:color .2s,border-color .2s;
}

.btn-ghost:hover{
    color:var(--ink);
    border-color:var(--ink-2);
}

footer{
    border-top:1px solid var(--border);
    padding:1.75rem clamp(1.5rem,5vw,4rem);
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1100px;
    margin:0 auto;
    gap:1rem;
    flex-wrap:wrap;
}

footer p{
    font-size:.75rem;
    color:var(--ink-3);
    letter-spacing:.03em;
}

/* HOME */
.home-hero{
    padding:5rem 0 3rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
}

.hero-tag{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-2);
    margin-bottom:1.4rem;
}

.hero-tag::before{
    content:'';
    width:18px;
    height:1px;
    background:var(--accent);
}

.hero-bio{
    font-size:1rem;
    color:var(--ink-2);
    line-height:1.8;
    font-weight:300;
    margin:1.4rem 0 2.2rem;
    max-width:420px;
}

.hero-actions{
    display:flex;
    gap:1.25rem;
    flex-wrap:wrap;
    align-items:center;
}

.hero-visual{
    display:flex;
    flex-direction:column;
    gap:.9rem;
}

.avatar-card{
    background:var(--paper-2);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:4/3;
    position:relative;
}

.avatar-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.avatar-caption{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:.9rem 1.1rem;
    background:linear-gradient(to top,rgba(26,26,24,.55),transparent);
    color:rgba(247,246,241,.85);
    font-size:.72rem;
    letter-spacing:.07em;
    text-transform:uppercase;
    font-weight:300;
}

.stats-row{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.9rem;
}

.stat-card{
    background:var(--paper-2);
    border:1px solid var(--border);
    border-radius:14px;
    padding:.9rem 1rem;
}

.stat-num{
    display:block;
    font-family:'DM Serif Display',serif;
    font-size:1.7rem;
    color:var(--ink);
    line-height:1;
    margin-bottom:.25rem;
}

.stat-label{
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-3);
}

.home-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--border);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.strip-cell{
    background:var(--paper);
    padding:2.5rem clamp(1.5rem,5vw,4rem);
    cursor:pointer;
    transition:background .2s;
}

.strip-cell:hover{background:var(--paper-2)}

.strip-arrow{
    font-size:.8rem;
    color:var(--ink-3);
    margin-top:1rem;
    display:block;
    transition:color .2s;
}

.strip-cell:hover .strip-arrow{color:var(--ink)}

/* ABOUT */
.about-hero,
.work-hero,
.writing-hero,
.contact-hero,
.now-hero{padding:5rem 0 3rem}

.contact-hero{padding-bottom:4rem}

.about-lead{
    font-family:'DM Serif Display',serif;
    font-size:clamp(1.5rem,2.5vw,2rem);
    line-height:1.45;
    color:var(--ink-2);
    max-width:700px;
    font-style:italic;
    margin-bottom:3rem;
}

.about-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem 4rem;
    margin-bottom:4rem;
}

.skills-list,
.social-row,
.contact-links,
.now-cell-tags,
.sp-tracklist{
    display:flex;
    flex-wrap:wrap;
}

.skills-list{gap:.45rem;margin-top:1.2rem}

.skill-tag,
.work-tag,
.now-tag{
    border:1px solid var(--border);
    border-radius:100px;
}

.skill-tag{
    font-size:.75rem;
    color:var(--ink-2);
    padding:.3rem .85rem;
    background:var(--paper);
    transition:border-color .2s,color .2s;
}

.skill-tag:hover{
    border-color:var(--ink-2);
    color:var(--ink);
}

.interests-grid,
.now-grid{
    display:grid;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
}

.interests-grid{grid-template-columns:repeat(3,1fr)}

.int-cell{
    background:var(--paper);
    padding:1.4rem 1.2rem;
    transition:background .2s;
}

.int-cell:hover{background:var(--paper-2)}

.int-icon{
    font-size:1.1rem;
    margin-bottom:.5rem;
    display:block;
}

.int-name{
    font-size:.8rem;
    font-weight:500;
    color:var(--ink);
    display:block;
    margin-bottom:.15rem;
}

.int-desc{
    font-size:.72rem;
    color:var(--ink-3);
    line-height:1.5;
}

/* WORK */
.work-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-bottom:5rem;
}

.work-card{
    background:var(--paper-2);
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .2s;
}

.work-card:hover{transform:translateY(-3px)}
.work-card.featured{grid-column:span 2}

.work-thumb{
    aspect-ratio:16/7;
    background:linear-gradient(135deg,var(--paper-3),#333);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'DM Serif Display',serif;
    font-size:3rem;
    color:rgba(232,228,220,.12);
    overflow:hidden;
    position:relative;
}

.work-card:not(.featured) .work-thumb{aspect-ratio:4/3}

.work-thumb-label{
    position:absolute;
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(247,246,241,.4);
    font-family:'DM Sans',sans-serif;
}

.work-info{padding:1.25rem 1.4rem 1.4rem}

.work-tags{
    display:flex;
    gap:.4rem;
    flex-wrap:wrap;
    margin-bottom:.6rem;
}

.work-tag{
    font-size:.65rem;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--ink-3);
    background:var(--paper);
    padding:.2rem .65rem;
}

.work-title{
    font-family:'DM Serif Display',serif;
    font-size:1.25rem;
    color:var(--ink);
    margin-bottom:.4rem;
}

.work-desc{
    font-size:.83rem;
    color:var(--ink-2);
    font-weight:300;
    line-height:1.65;
}

.work-link{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    font-size:.75rem;
    color:var(--ink-3);
    text-decoration:none;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-top:.75rem;
    transition:color .2s;
}

.work-link:hover{color:var(--ink)}

/* WRITING */
.post-list{
    border-top:1px solid var(--border);
    margin-bottom:5rem;
}

.post-row{
    border-bottom:1px solid var(--border);
    padding:1.75rem 1.5rem;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:1.5rem 2rem;
    align-items:center;
    cursor:pointer;
    transition:background .15s;
    margin:0 -1.5rem;
}

.post-row:hover{background:var(--paper-2)}

.post-date{
    font-size:.72rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-3);
    white-space:nowrap;
    min-width:80px;
}

.post-title{
    font-family:'DM Serif Display',serif;
    font-size:1.15rem;
    color:var(--ink);
}

.post-summary{
    font-size:.82rem;
    color:var(--ink-3);
    font-weight:300;
    margin-top:.25rem;
}

.post-arrow{
    font-size:1.1rem;
    color:var(--ink-3);
    transition:transform .2s,color .2s;
}

.post-row:hover .post-arrow{
    transform:translateX(4px);
    color:var(--ink);
}

.post-tag{
    display:inline-block;
    font-size:.62rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:.2rem .6rem;
    border-radius:100px;
    border:1px solid var(--border);
    color:var(--ink-3);
    margin-left:.6rem;
    vertical-align:middle;
}

/* CONTACT */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    margin-bottom:5rem;
    align-items:start;
}

.contact-form,
.contact-info{
    display:flex;
    flex-direction:column;
}

.contact-form{gap:1rem}
.contact-info{gap:1.5rem}

.form-group{
    display:flex;
    flex-direction:column;
    gap:.4rem;
}

.form-label,
.cm-label,
.now-cell-label{
    font-size:.7rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-3);
}

.form-input{
    background:var(--paper-2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:.7rem 1rem;
    font-family:'DM Sans',sans-serif;
    font-size:.9rem;
    color:var(--ink);
    outline:none;
    transition:border-color .2s;
    resize:none;
}

.form-input:focus{border-color:rgba(232,228,220,.35)}
.form-input::placeholder{color:var(--ink-3)}
textarea.form-input{min-height:130px;line-height:1.6}

.contact-method{
    display:flex;
    gap:1rem;
    align-items:flex-start;
}

.cm-icon{
    width:36px;
    height:36px;
    background:var(--paper-2);
    border:1px solid var(--border);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.9rem;
    flex-shrink:0;
    margin-top:.1rem;
}

.cm-label{margin-bottom:.2rem}

.cm-value{
    font-size:.9rem;
    color:var(--ink);
    text-decoration:none;
}

.cm-value:hover{color:var(--ink-2)}

.social-row{
    gap:.6rem;
    margin-top:1rem;
}

.social-btn,
.contact-link{
    font-size:.75rem;
    letter-spacing:.06em;
    color:var(--ink-2);
    border:1px solid var(--border);
    border-radius:100px;
    text-decoration:none;
    transition:all .2s;
    background:var(--paper);
}

.social-btn{padding:.4rem 1rem}
.contact-link{padding:.55rem 1.15rem}

.social-btn:hover,
.contact-link:hover{
    border-color:var(--ink-3);
    color:var(--ink);
}

.contact-bar{
    background:var(--paper-3);
    border:1px solid rgba(232,228,220,.12);
    border-radius:20px;
    padding:3rem 2.75rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;
    flex-wrap:wrap;
    margin-bottom:3rem;
}

.contact-heading{
    font-family:'DM Serif Display',serif;
    font-size:clamp(1.4rem,3vw,2rem);
    color:var(--ink);
    line-height:1.25;
}

.contact-heading em{
    font-style:italic;
    color:var(--accent);
}

.contact-links{gap:.75rem}

/* NOW */
.now-timestamp{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-3);
    margin-top:1.25rem;
    padding:.4rem .9rem;
    border:1px solid var(--border);
    border-radius:100px;
}

.now-timestamp::before{
    content:'';
    width:6px;
    height:6px;
    background:var(--accent-2);
    border-radius:50%;
}

.now-ticker{
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:1rem 0;
    margin-bottom:2rem;
    overflow:hidden;
}

.now-ticker-inner{
    display:flex;
    gap:3rem;
    white-space:nowrap;
    animation:nowTicker 22s linear infinite;
}

.now-ticker-item{
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    font-size:.72rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-3);
}

.now-ticker-item::before{
    content:'✦';
    color:var(--accent);
    font-size:.55rem;
}

@keyframes nowTicker{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

.now-grid{
    grid-template-columns:repeat(2,1fr);
    border-radius:20px;
    margin-bottom:4rem;
}

.now-cell{
    background:var(--paper);
    padding:1.75rem 1.5rem;
    transition:background .2s;
}

.now-cell:hover{background:var(--paper-2)}
.now-wide,.now-player-cell{grid-column:span 2}

.now-cell-icon{
    font-size:1.1rem;
    margin-bottom:.85rem;
    display:block;
    opacity:.6;
}

.now-cell-label{
    display:block;
    margin-bottom:.5rem;
}

.now-cell-title{
    font-family:'DM Serif Display',serif;
    font-size:1.15rem;
    color:var(--ink);
    margin-bottom:.35rem;
    line-height:1.3;
}

.now-cell-sub{
    font-size:.82rem;
    color:var(--ink-3);
    font-weight:300;
    line-height:1.6;
}

.now-cell-tags{gap:.4rem;margin-top:.75rem}

.now-tag{
    font-size:.68rem;
    color:var(--ink-2);
    padding:.2rem .75rem;
}

.now-player-cell{padding:1.5rem}

.now-spotify{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}

.sp-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.sp-meta{
    display:flex;
    flex-direction:column;
    gap:.15rem;
}

.sp-title{
    font-family:'DM Serif Display',serif;
    font-size:1.2rem;
    color:var(--ink);
    line-height:1.2;
}

.sp-artist{
    font-size:.75rem;
    color:var(--ink-3);
    letter-spacing:.04em;
}

.sp-tracklist{gap:.4rem}

.sp-track{
    font-family:'DM Sans',sans-serif;
    font-size:.68rem;
    letter-spacing:.05em;
    color:var(--ink-3);
    background:var(--paper-2);
    border:1px solid var(--border);
    border-radius:100px;
    padding:.25rem .8rem;
    cursor:pointer;
    transition:color .2s,border-color .2s;
}

.sp-track:hover,
.sp-track.active{
    color:var(--ink);
    border-color:rgba(232,228,220,.3);
}

.sp-embed-wrap{
    border-radius:12px;
    overflow:hidden;
    background:transparent;
    line-height:0;
    height:352px;
    flex:0 0 auto;
}

.sp-embed-wrap iframe{
    display:block;
    width:100%;
    height:352px;
    border:0;
    border-radius:12px;
}

/* MOBILE MENU */
.hamburger{display:none}

.mobile-menu{
    position:fixed;
    inset:0;
    z-index:400;  /* was: 300 */
    display:none;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
}

.mobile-menu.open{
    pointer-events:all;
    opacity:1;
}

.mobile-menu::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(10,10,8,.6);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.mobile-menu-inner{
    position:absolute;
    top:0;
    right:0;
    width:min(320px,88vw);
    height:100%;
    background:var(--paper-2);
    border-left:1px solid var(--border);
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    z-index:401;  /* add this */
}

.mobile-menu.open .mobile-menu-inner{transform:translateX(0)}

.mobile-menu-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:3rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--border);
}

.mobile-close{
    background:none;
    border:1px solid var(--border);
    color:var(--ink-2);
    font-size:.9rem;
    width:32px;
    height:32px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:color .2s,border-color .2s;
}

.mobile-close:hover{
    color:var(--ink);
    border-color:var(--ink-3);
}

.mobile-nav{
    display:flex;
    flex-direction:column;
    gap:.25rem;
    flex:1;
    z-index: 1;
}

.mobile-link{
    display:flex;
    align-items:center;
    gap:1rem;
    font-family:'DM Serif Display',serif;
    font-size:1.8rem;
    color:var(--ink-2);
    text-decoration:none;
    padding:.6rem 0;
    border-bottom:1px solid var(--border);
    transition:color .2s;
}

.mobile-link:hover,
.mobile-link.active{color:var(--ink)}

.mobile-link-num{
    font-family:'DM Sans',sans-serif;
    font-size:.65rem;
    letter-spacing:.1em;
    color:var(--ink-3);
    margin-top:.3rem;
}

/* RESPONSIVE */
@media(max-width:768px) {
    .home-hero,
    .about-cols,
    .work-grid,
    .contact-grid,
    .now-grid {
        grid-template-columns:1fr;
        gap: 2rem;
    }

    .hero-visual {
        order: -1
    }

    .work-card.featured,
    .now-wide,
    .now-player-cell {
        grid-column: span 1
    }

    .home-strip {
        grid-template-columns:1fr
    }

    .interests-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .nav-links, .desktop-only {
        display: none
    }

    .post-row {
        grid-template-columns:1fr auto;
        gap: .75rem
    }

    .post-date {
        display: none
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: .5rem;
        width: 36px;
        height: 36px;
    }

    .hamburger span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: var(--ink);
        border-radius: 2px;
        transition: .3s ease;
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg)
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
        width: 0
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg)
    }

    .sp-info {
        flex-direction: column;
        align-items: flex-start;
    }

    body.menu-open nav {
        z-index: 50;
    }

    @media (min-width: 769px) {
        .mobile-menu {
            display: none
        }

        /* was: none!important */
    }
}