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

:root{
    --cream:   #FFFBF0;
    --ink:     #1A1209;
    --violet:  #7C3AED;
    --coral:   #FF4757;
    --lime:    #84CC16;
    --amber:   #F59E0B;
    --sky:     #0EA5E9;
    --muted:   #78716C;
    --border:  #E5DDD0;
    --card:    #FFFFFF;
}

html{scroll-behavior:smooth}

body{
    background:var(--cream);
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
}

/* ── NAV ── */
nav{
    position:sticky;
    top:0;
    z-index:99;
    background:var(--cream);
    border-bottom:2px solid var(--ink);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.9rem 2.5rem;
}
.nav-logo{
    font-family:'Instrument Serif',serif;
    font-size:1.3rem;
    color:var(--ink);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.nav-logo .dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--coral);
    display:inline-block;
    animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}

.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
    font-size:0.88rem;font-weight:500;color:var(--muted);
    text-decoration:none;transition:color 0.15s;
}
.nav-links a:hover{color:var(--ink)}

/* ── HERO BENTO ── */
#hero{
    padding:2.5rem 2.5rem 3rem;
    max-width:1200px;
    margin:0 auto;
}

.bento{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:minmax(100px,auto);
    gap:1rem;
}

.bento-card{
    background:var(--card);
    border:2px solid var(--ink);
    border-radius:16px;
    padding:1.5rem;
    position:relative;
    overflow:hidden;
    transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.bento-card:hover{
    transform:translate(-3px,-3px);
    box-shadow:5px 5px 0 var(--ink);
}

/* Grid placements */
.b-name   {grid-column:span 7; grid-row:span 2; background:var(--violet); color:#fff; border-color:var(--violet);}
.b-status {grid-column:span 5; grid-row:span 1; background:var(--lime);   border-color:var(--ink);}
.b-run    {grid-column:span 5; grid-row:span 1; background:var(--coral);  color:#fff; border-color:var(--coral);}
.b-langs  {grid-column:span 4; grid-row:span 2;}
.b-think  {grid-column:span 4; grid-row:span 1;}
.b-atom   {grid-column:span 4; grid-row:span 1; background:#0F0A1E; border-color:#0F0A1E;}
.b-game   {grid-column:span 5; grid-row:span 1; background:var(--amber); border-color:var(--ink);}
.b-quote  {grid-column:span 7; grid-row:span 1; background:var(--ink);   color:#fff;}

/* Name card */
.b-name .big-name{
    font-family:'Instrument Serif',serif;
    font-size:clamp(2.8rem,5vw,4.2rem);
    line-height:1;
    margin-bottom:0.75rem;
    color:#fff;
}
.b-name .big-name em{
    font-style:italic;
    color:var(--lime);
}
.b-name .tagline{
    font-size:1rem;
    color:rgba(255,255,255,0.75);
    max-width:340px;
    line-height:1.5;
}
.b-name .cta-row{
    display:flex;gap:0.75rem;flex-wrap:wrap;
    margin-top:1.5rem;
}
.btn{
    display:inline-flex;align-items:center;gap:0.4rem;
    padding:0.55rem 1.25rem;
    border-radius:100px;
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;font-weight:700;
    text-decoration:none;cursor:pointer;border:2px solid;
    transition:all 0.15s;
}
.btn-white{background:#fff;color:var(--violet);border-color:#fff;}
.btn-white:hover{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.4);}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.1);}

/* Status card */
.b-status .label{
    font-size:0.7rem;font-weight:700;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--ink);opacity:0.55;
    margin-bottom:0.4rem;
}
.b-status .status-line{
    font-family:'Instrument Serif',serif;
    font-size:1.3rem;color:var(--ink);
}
.b-status .badge{
    display:inline-block;margin-top:0.6rem;
    background:var(--ink);color:var(--lime);
    font-size:0.72rem;font-weight:700;letter-spacing:0.05em;
    padding:0.2rem 0.6rem;border-radius:100px;
}

/* Run card */
.b-run .km-big{
    font-family:'Instrument Serif',serif;
    font-size:2.6rem;line-height:1;color:#fff;
    margin-bottom:0.25rem;
}
.b-run .km-label{font-size:0.82rem;color:rgba(255,255,255,0.8);font-weight:500;}
.progress-bar{
    margin-top:0.75rem;
    height:6px;background:rgba(255,255,255,0.25);border-radius:100px;overflow:hidden;
}
.progress-fill{
    height:100%;background:#fff;border-radius:100px;
    animation:grow-bar 1.5s ease-out forwards;
    width:0%;
}
@keyframes grow-bar{to{width:21%}}

/* Languages card */
.b-langs h3{
    font-family:'Instrument Serif',serif;
    font-size:1.1rem;margin-bottom:1rem;
}
.lang-list{display:flex;flex-direction:column;gap:0.5rem;}
.lang-row{display:flex;align-items:center;gap:0.6rem;}
.lang-name{
    font-family:'Space Mono',monospace;
    font-size:0.78rem;color:var(--ink);min-width:72px;
}
.lang-bar-bg{flex:1;height:6px;background:var(--border);border-radius:100px;overflow:hidden;}
.lang-bar{
    height:100%;border-radius:100px;
    transform:scaleX(0);transform-origin:left;
    animation:scale-in 0.8s ease-out forwards;
}
@keyframes scale-in{to{transform:scaleX(1)}}
.lc-violet{background:var(--violet);}
.lc-coral {background:var(--coral);}
.lc-lime  {background:var(--lime);}
.lc-amber {background:var(--amber);}
.lc-sky   {background:var(--sky);}
.lc-ink   {background:var(--ink);}
.lc-pink  {background:#F472B6;}
.lc-teal  {background:#14B8A6;}

/* Think card */
.b-think .label{
    font-size:0.7rem;font-weight:700;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--muted);margin-bottom:0.5rem;
}
#think-text{
    font-family:'Instrument Serif',serif;
    font-size:1.15rem;line-height:1.4;color:var(--ink);
    min-height:2.5em;
}

/* Atom card */
.b-atom{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0.5rem;}
.atom-label{
    font-family:'Space Mono',monospace;
    font-size:0.7rem;color:rgba(255,255,255,0.45);
    letter-spacing:0.1em;text-transform:uppercase;
}
.atom-svg{width:80px;height:80px;}

/* Game card */
.b-game h3{
    font-family:'Instrument Serif',serif;font-size:1.3rem;
    margin-bottom:0.3rem;color:var(--ink);
}
.b-game p{font-size:0.85rem;color:var(--ink);opacity:0.7;margin-bottom:0.75rem;}
.play-btn{
    display:inline-flex;align-items:center;gap:0.4rem;
    background:var(--ink);color:#fff;
    padding:0.4rem 1rem;border-radius:100px;
    font-size:0.82rem;font-weight:700;text-decoration:none;
    transition:background 0.15s;
}
.play-btn:hover{background:var(--violet);}

/* Quote card */
.b-quote .quote-text{
    font-family:'Instrument Serif',serif;
    font-size:1.25rem;font-style:italic;
    color:#fff;line-height:1.5;
}
.b-quote .quote-attr{
    margin-top:0.75rem;font-size:0.78rem;
    color:rgba(255,255,255,0.5);font-family:'Space Mono',monospace;
}

/* ── DIVIDER ── */
.divider{
    max-width:1200px;margin:0 auto;
    padding:0 2.5rem;
}
.section-head{
    display:flex;align-items:baseline;gap:1rem;
    border-top:2px solid var(--ink);
    padding-top:1.5rem;margin-bottom:2rem;
}
.section-head h2{
    font-family:'Instrument Serif',serif;
    font-size:clamp(1.8rem,3vw,2.4rem);
}
.section-head .sh-note{
    font-size:0.85rem;color:var(--muted);font-style:italic;
}

/* ── PROJECTS ── */
#projects-section{
    max-width:1200px;margin:3rem auto;padding:0 2.5rem;
}
.projects-list{display:flex;flex-direction:column;gap:0;}

.proj-item{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:start;
    padding:1.75rem 0;
    border-bottom:1.5px solid var(--border);
    gap:2rem;
    transition:padding-left 0.2s;
    cursor:default;
    text-decoration:none;
    color:inherit;
}
.proj-item:hover{padding-left:0.75rem;}

.proj-left{}
.proj-type{
    font-size:0.72rem;font-weight:700;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--muted);margin-bottom:0.35rem;
}
.proj-name{
    font-family:'Instrument Serif',serif;
    font-size:1.6rem;color:var(--ink);margin-bottom:0.4rem;
}
.proj-desc{font-size:0.92rem;color:var(--muted);max-width:560px;line-height:1.6;}

.proj-right{
    display:flex;flex-direction:column;align-items:flex-end;gap:0.75rem;
    padding-top:0.2rem;
}
.proj-arrow{
    width:44px;height:44px;border-radius:50%;
    border:2px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;color:var(--muted);
    transition:all 0.2s;text-decoration:none;
    flex-shrink:0;
}
.proj-item:hover .proj-arrow{
    background:var(--ink);border-color:var(--ink);color:#fff;
}
.proj-tags{display:flex;gap:0.4rem;flex-wrap:wrap;justify-content:flex-end;}
.ptag{
    font-size:0.72rem;font-family:'Space Mono',monospace;
    background:var(--cream);border:1.5px solid var(--border);
    padding:0.2rem 0.55rem;border-radius:4px;color:var(--muted);
}

.proj-highlight{
    background:var(--violet);
}
.proj-highlight .proj-name,.proj-highlight .proj-desc,
.proj-highlight .proj-type,.proj-highlight .ptag{color:#fff;opacity:1;}
.proj-highlight .ptag{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}
.proj-highlight .proj-type{color:var(--lime);}
.proj-highlight .proj-arrow{border-color:rgba(255,255,255,0.3);color:#fff;}
.proj-highlight:hover .proj-arrow{background:#fff;color:var(--violet);}
.proj-highlight{
    border-radius:14px;border:none;
    padding:1.75rem 1.5rem;margin:0.5rem 0;
}

/* ── SKILLS ORBIT ── */
#skills-section{
    max-width:1200px;margin:3rem auto;padding:0 2.5rem;
}
.skills-bento{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
}
.skill-card{
    background:#fff;
    border:2px solid var(--border);
    border-radius:14px;
    padding:1.25rem;
    transition:all 0.18s;
}
.skill-card:hover{border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--border);}
.skill-card h4{
    font-family:'Instrument Serif',serif;
    font-size:1rem;margin-bottom:0.75rem;
    display:flex;align-items:center;gap:0.4rem;
}
.skill-card h4 .icon{font-size:1.1rem;}
.skill-tags-wrap{display:flex;flex-wrap:wrap;gap:0.4rem;}
.stag{
    font-size:0.72rem;font-family:'Space Mono',monospace;
    background:var(--cream);border:1.5px solid var(--border);
    padding:0.2rem 0.5rem;border-radius:4px;color:var(--ink);
}

/* ── LIFE SECTION ── */
#life-section{
    max-width:1200px;margin:3rem auto 5rem;padding:0 2.5rem;
}
.life-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:1rem;
}
.life-card{
    background:#fff;
    border:2px solid var(--ink);
    border-radius:16px;
    padding:1.5rem;
    transition:all 0.18s;
}
.life-card:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink);}
.life-card .life-emoji{font-size:2rem;margin-bottom:0.75rem;display:block;}
.life-card h3{
    font-family:'Instrument Serif',serif;
    font-size:1.2rem;margin-bottom:0.5rem;
}
.life-card p{font-size:0.88rem;color:var(--muted);line-height:1.6;}
.life-card.featured{background:var(--coral);border-color:var(--coral);}
.life-card.featured h3,.life-card.featured p{color:#fff;}
.life-card.featured p{color:rgba(255,255,255,0.85);}

/* ── CONTACT ── */
#contact-section{
    background:var(--ink);
    color:#fff;
}
.contact-inner{
    max-width:1200px;margin:0 auto;
    padding:4rem 2.5rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
}
.contact-inner h2{
    font-family:'Instrument Serif',serif;
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.1;
    margin-bottom:1rem;
}
.contact-inner h2 em{font-style:italic;color:var(--lime);}
.contact-inner p{color:rgba(255,255,255,0.6);margin-bottom:2rem;font-size:0.95rem;}
.contact-links-list{display:flex;flex-direction:column;gap:1rem;}
.contact-link{
    display:flex;align-items:center;gap:1rem;
    text-decoration:none;color:#fff;
    padding:1rem 1.25rem;
    border:1.5px solid rgba(255,255,255,0.12);
    border-radius:10px;
    transition:all 0.15s;
    font-size:0.9rem;
}
.contact-link:hover{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.05);}
.contact-link .cl-icon{
    width:36px;height:36px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;flex-shrink:0;
}
.contact-link .cl-label{font-size:0.75rem;color:rgba(255,255,255,0.45);display:block;}
.contact-link .cl-val{font-weight:500;}

footer{
    background:var(--ink);
    text-align:center;
    padding:1.25rem;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:0.78rem;
    color:rgba(255,255,255,0.3);
    font-family:'Space Mono',monospace;
}

/* ── UTILS ── */
.fade-up{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease;}
.fade-up.visible{opacity:1;transform:none;}

@media(max-width:900px){
    .bento{grid-template-columns:repeat(6,1fr);}
    .b-name{grid-column:span 6;}
    .b-status,.b-run{grid-column:span 3;}
    .b-langs,.b-think,.b-atom{grid-column:span 3;}
    .b-game,.b-quote{grid-column:span 6;}
    .skills-bento{grid-template-columns:1fr 1fr;}
    .life-grid{grid-template-columns:1fr 1fr;}
    .contact-inner{grid-template-columns:1fr;}
}
@media(max-width:600px){
    nav{padding:0.9rem 1.25rem;}
    #hero,#projects-section,#skills-section,#life-section{padding-left:1.25rem;padding-right:1.25rem;}
    .bento{grid-template-columns:1fr 1fr;}
    .b-name,.b-game,.b-quote{grid-column:span 2;}
    .b-status,.b-run,.b-langs,.b-think,.b-atom{grid-column:span 2;}
    .skills-bento,.life-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
    .fade-up{opacity:1;transform:none;}
    .nav-logo .dot{animation:none;}
    .progress-fill{animation:none;width:21%;}
    .lang-bar{animation:none;transform:scaleX(1);}
}

/* ── CULTURE SECTION ── */
#culture-section{
    max-width:1200px;margin:3rem auto;padding:0 2.5rem;
}

/* Music spectrum bar */
.music-spectrum{
    display:flex;
    border-radius:14px;
    overflow:hidden;
    border:2px solid var(--ink);
    height:64px;
    margin-bottom:1.25rem;
    cursor:default;
}
.spectrum-zone{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    transition:flex 0.35s ease;
    position:relative;
    overflow:hidden;
}
.spectrum-zone:hover{flex:2.2;}
.spectrum-zone span{
    white-space:nowrap;
    padding:0 0.6rem;
    text-align:center;
    line-height:1.3;
}
.sz-french{background:#F472B6;color:#fff;}
.sz-metal {background:#1A1209;color:#fff;}
.sz-techno{background:#7C3AED;color:#fff;}
.sz-ren   {background:#0EA5E9;color:#fff;}

/* Artist chips grid */
.artists-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0.75rem;
    margin-bottom:2rem;
}
.artist-group{
    background:#fff;
    border:2px solid var(--border);
    border-radius:12px;
    padding:1rem;
    transition:all 0.18s;
}
.artist-group:hover{border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--border);}
.artist-group-label{
    font-size:0.68rem;font-weight:700;letter-spacing:0.12em;
    text-transform:uppercase;margin-bottom:0.6rem;
}
.artist-chips{display:flex;flex-wrap:wrap;gap:0.35rem;}
.achip{
    font-size:0.78rem;font-family:'DM Sans',sans-serif;font-weight:500;
    padding:0.25rem 0.65rem;border-radius:100px;
    border:1.5px solid;
    white-space:nowrap;
}
.achip-pink  {background:#FDF2F8;border-color:#F9A8D4;color:#9D174D;}
.achip-dark  {background:#1A1209;border-color:#1A1209;color:#fff;}
.achip-violet{background:#F5F3FF;border-color:#C4B5FD;color:#5B21B6;}
.achip-sky   {background:#F0F9FF;border-color:#7DD3FC;color:#0369A1;}

/* Festivals callout */
.festival-strip{
    background:var(--violet);
    border-radius:12px;
    padding:1rem 1.5rem;
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:2rem;
    flex-wrap:wrap;
}
.festival-strip p{color:#fff;font-size:0.9rem;}
.festival-strip p strong{color:var(--lime);}

/* Books area */
.books-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:1rem;
}
.book-card.full{grid-column:span 3;}
.book-card{
    background:#fff;
    border:2px solid var(--ink);
    border-radius:14px;
    padding:1.5rem;
    display:flex;
    gap:1.25rem;
    align-items:flex-start;
    transition:all 0.18s;
}
.book-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);}
.book-spine{
    width:10px;
    border-radius:4px;
    flex-shrink:0;
    align-self:stretch;
    min-height:60px;
}
.book-card h4{
    font-family:'Instrument Serif',serif;
    font-size:1.1rem;margin-bottom:0.35rem;
}
.book-card p{font-size:0.85rem;color:var(--muted);line-height:1.55;}
.secret-badge{
    display:inline-flex;align-items:center;gap:0.35rem;
    background:var(--amber);color:var(--ink);
    font-size:0.7rem;font-weight:700;letter-spacing:0.08em;
    padding:0.2rem 0.6rem;border-radius:100px;
    margin-top:0.5rem;
}

@media(max-width:900px){
    .artists-grid{grid-template-columns:1fr 1fr;}
    .books-row{grid-template-columns:1fr 1fr;}
    .book-card.full{grid-column:span 2;}
}
@media(max-width:600px){
    .artists-grid{grid-template-columns:1fr;}
    .music-spectrum{height:48px;}
    .books-row{grid-template-columns:1fr;}
    .book-card.full{grid-column:span 1;}
}