:root{
    --void:#0A0608;
    --void-deep:#050304;
    --wine:#4D1729;
    --wine-deep:#3C1221;
    --wine-bright:#962A50;
    --wine-glow:#6D213C;
    --wine-text:#C86286;
    --bone:#F2EDE6;
    --bone-dim:#A89E97;
    --steel:#3A3438;
    --hairline:rgba(242,237,230,0.14);
    --hairline-bright:rgba(242,237,230,0.32);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth; max-width:100%; overflow-x:hidden;}

  body{
    background:var(--void);
    color:var(--bone);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    max-width:100%;
    overflow-x:hidden;
    position:relative;
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  a{color:inherit;}
  :focus-visible{outline:2px solid var(--wine-glow); outline-offset:2px;}
  ::selection{ background:var(--wine-glow); color:var(--void); }

  img, svg{ max-width:100%; }

  /* hard diagonal scanline texture instead of soft grain */
  .scanlines{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    opacity:0.025;
    background-image:repeating-linear-gradient(0deg, var(--bone) 0px, transparent 1px, transparent 3px);
  }

  /* ---------- EMBER FIELD CANVAS ---------- */
  #emberCanvas{
    position:fixed; inset:0; z-index:0; pointer-events:none;
  }

  /* ---------- GLITCH SETTLE ON NAME ---------- */
  h1.glitch{ position:relative; }
  h1.glitch .accent{ position:relative; display:inline-block; }
  h1.glitch .accent::before, h1.glitch .accent::after{
    content:attr(data-text);
    position:absolute; left:0; top:0;
    width:100%; overflow:hidden;
    opacity:0;
  }
  h1.glitch.run .accent::before{
    color:#3FC9D4;
    animation:glitchTop .5s steps(2,end) .55s 2;
    clip-path:inset(0 0 55% 0);
  }
  h1.glitch.run .accent::after{
    color:var(--wine-glow);
    animation:glitchBottom .5s steps(2,end) .55s 2;
    clip-path:inset(55% 0 0 0);
  }
  @keyframes glitchTop{
    0%{ opacity:0; transform:translate(0,0); }
    20%{ opacity:.8; transform:translate(-3px,-1px); }
    40%{ opacity:.8; transform:translate(2px,1px); }
    60%{ opacity:0; transform:translate(0,0); }
    100%{ opacity:0; }
  }
  @keyframes glitchBottom{
    0%{ opacity:0; transform:translate(0,0); }
    25%{ opacity:.8; transform:translate(3px,1px); }
    45%{ opacity:.8; transform:translate(-2px,-1px); }
    65%{ opacity:0; transform:translate(0,0); }
    100%{ opacity:0; }
  }

  .wrap{
    max-width:880px;
    margin:0 auto;
    padding:0 32px;
    position:relative;
    z-index:2;
  }

  .rail{ position:fixed; top:0; left:0; height:3px; width:100%; background:var(--steel); z-index:50; }
  .rail-fill{ height:100%; width:0%; background:var(--wine-glow); transition:width .06s linear; }

  /* ---------- HERO ---------- */
  .hero{
    min-height:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:96px 0 64px;
    position:relative;
  }

  .hero-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:48px;
    align-items:center;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--bone-dim);
    margin-bottom:24px;
    display:flex;
    align-items:center;
    gap:10px;
    opacity:0;
    animation:riseIn .6s cubic-bezier(.2,.9,.3,1) .15s forwards;
  }
  .eyebrow::before{ content:""; width:8px; height:8px; background:var(--wine-glow); flex-shrink:0; }
  .eyebrow::after{ content:""; flex:1; height:1px; background:var(--hairline); max-width:160px; }

  h1{
    font-family:'Cinzel', serif;
    font-weight:900;
    font-size:clamp(44px, 6.8vw, 80px);
    line-height:1.04;
    letter-spacing:0.01em;
    color:var(--bone);
    opacity:0;
    animation:riseIn .7s cubic-bezier(.2,.9,.3,1) .25s forwards;
  }
  h1 .accent{
    color:var(--wine-glow);
    text-shadow:3px 3px 0 var(--wine-deep);
  }

  .signature-line{
    width:0%;
    max-width:300px;
    height:6px;
    margin-top:14px;
    background:var(--wine-glow);
    clip-path:polygon(0 0, 92% 0, 100% 100%, 8% 100%);
    animation:drawLine .5s cubic-bezier(.2,.9,.3,1) .85s forwards;
  }
  @keyframes drawLine{ from{ width:0%; } to{ width:100%; } }

  .hero-epigraph{
    font-size:17px;
    color:var(--bone-dim);
    margin-top:26px;
    max-width:500px;
    line-height:1.6;
    opacity:0;
    animation:riseIn .6s cubic-bezier(.2,.9,.3,1) 1s forwards;
  }

  .hero-role{
    font-size:15px;
    color:var(--bone-dim);
    margin-top:14px;
    max-width:480px;
    opacity:0;
    animation:riseIn .6s cubic-bezier(.2,.9,.3,1) 1.1s forwards;
  }

  .hero-contact{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    margin-top:32px;
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    color:var(--bone-dim);
    opacity:0;
    animation:riseIn .6s cubic-bezier(.2,.9,.3,1) 1.2s forwards;
  }
  .hero-contact a, .hero-contact span{
    padding:9px 18px 9px 0;
    margin-right:18px;
    border-right:1px solid var(--hairline);
  }
  .hero-contact a:last-child, .hero-contact span:last-child{ border-right:none; }
  .hero-contact a{ text-decoration:none; position:relative; transition:color .2s ease; }
  .hero-contact a:hover{ color:var(--wine-text); }

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

  /* ---------- CREST + PORTRAIT, sharp angles ---------- */
  .portrait-stack{ display:flex; flex-direction:column; align-items:center; gap:0; }

  .crest-wrap{
    position:relative; width:160px; height:160px;
    opacity:0;
    animation:crestIn .6s cubic-bezier(.2,.9,.3,1) .1s forwards;
  }
  @keyframes crestIn{
    from{ opacity:0; transform:scale(.7) rotate(-20deg); }
    to{ opacity:1; transform:scale(1) rotate(0deg); }
  }
  .crest-spin{ animation:spin 40s linear infinite; transform-origin:80px 80px; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .crest-diamond{
    stroke-dasharray:320; stroke-dashoffset:320;
    animation:dashDraw 1s cubic-bezier(.2,.9,.3,1) .3s forwards;
  }
  @keyframes dashDraw{ to{ stroke-dashoffset:0; } }
  .crest-node{ opacity:0; animation:nodeIn .35s ease-out forwards; }
  .crest-node:nth-of-type(1){ animation-delay:.7s; }
  .crest-node:nth-of-type(2){ animation-delay:.8s; }
  .crest-node:nth-of-type(3){ animation-delay:.9s; }
  .crest-node:nth-of-type(4){ animation-delay:1.0s; }
  @keyframes nodeIn{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
  .crest-monogram{ opacity:0; animation:riseIn .4s ease-out 1.1s forwards; }

  .portrait-frame{
    position:relative;
    width:166px; height:210px;
    margin-top:-12px;
    opacity:0;
    animation:riseIn .6s cubic-bezier(.2,.9,.3,1) .2s forwards;
  }
  .portrait-frame .frame-bg{
    position:absolute; inset:0;
    background:var(--wine-glow);
    clip-path:polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
  }
  .portrait-frame .img-wrap{
    position:absolute; inset:5px;
    overflow:hidden;
    clip-path:polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
    transition:transform .35s cubic-bezier(.2,.9,.3,1);
  }
  .portrait-frame:hover .img-wrap{ transform:scale(1.05) rotate(-1deg); }
  .portrait-frame img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:saturate(0.7) contrast(1.18) brightness(0.92);
    position:relative;
  }
  .portrait-frame .img-wrap::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(200deg, rgba(212,41,66,0.22) 0%, transparent 50%);
  }

  /* ---------- SECTION ANATOMY ---------- */
  .section{
    padding:76px 0;
    border-top:2px solid var(--steel);
    position:relative;
  }

  .section-eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--wine-text);
    margin-bottom:12px;
    display:flex; align-items:center; gap:8px;
  }
  .section-eyebrow::before{ content:"//"; color:var(--bone-dim); }

  .section-title{
    font-family:'Cinzel', serif;
    font-weight:700;
    font-size:clamp(28px, 3.8vw, 38px);
    color:var(--bone);
    letter-spacing:0.01em;
    margin-bottom:44px;
    text-transform:uppercase;
    position:relative;
    clip-path:polygon(0 0,3% 100%,9% 8%,15% 96%,22% 4%,29% 100%,36% 6%,43% 98%,50% 2%,57% 100%,64% 5%,71% 97%,78% 3%,85% 100%,92% 6%,100% 0,100% 0,0 0);
    transition:clip-path .65s cubic-bezier(.2,.9,.3,1);
  }
  .section-title.in-view{
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  }
  .section-title .accent{ color:var(--wine-glow); }

  .reveal{
    opacity:0; transform:translateY(20px) skewY(1deg);
    transition:opacity .5s cubic-bezier(.2,.9,.3,1), transform .5s cubic-bezier(.2,.9,.3,1);
  }
  .reveal.in-view{ opacity:1; transform:translateY(0) skewY(0); }

  /* ---------- LEDGER (EXPERIENCE) ---------- */
  .ledger-list{ position:relative; }
  .ledger-entry{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:24px;
    padding:30px 0;
    border-top:1px solid var(--steel);
    position:relative;
  }
  .ledger-entry:first-child{ border-top:none; padding-top:0; }

  .ledger-entry::before{
    content:""; position:absolute; left:-12px; top:38px;
    width:8px; height:8px;
    background:var(--wine-glow);
    transform:scale(0) rotate(45deg);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1) .15s;
  }
  .ledger-entry.in-view::before{ transform:scale(1) rotate(45deg); }

  .ledger-date{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; color:var(--bone-dim);
    line-height:1.6; padding-top:4px;
  }

  .ledger-role{
    font-family:'Cinzel', serif;
    font-weight:700; font-size:20px;
    color:var(--bone);
    margin-bottom:5px;
    text-transform:uppercase;
    letter-spacing:0.01em;
  }
  .ledger-org{
    font-size:13.5px; color:var(--wine-text);
    margin-bottom:16px; font-weight:500;
  }
  .ledger-points{ list-style:none; }
  .ledger-points li{
    position:relative; padding-left:18px; margin-bottom:9px;
    font-size:14.5px; color:var(--bone-dim); line-height:1.65;
  }
  .ledger-points li::before{
    content:""; position:absolute; left:0; top:9px;
    width:8px; height:2px; background:var(--wine-glow);
  }

  /* ---------- PROJECTS ---------- */
  .project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:2px;
    background:var(--steel);
    border:2px solid var(--steel);
  }
  .project-card{
    background:var(--void);
    padding:28px 24px;
    transition:background .25s ease, transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease;
    position:relative;
  }
  .project-card::before{
    content:"";
    position:absolute; top:0; left:0;
    width:0; height:4px;
    background:var(--wine-glow);
    transition:width .3s cubic-bezier(.2,.9,.3,1);
  }
  .project-card:hover{
    background:var(--wine-deep);
    transform:translate(-4px,-4px);
    box-shadow:6px 6px 0 var(--wine-glow);
  }
  .project-card:hover::before{ width:100%; }
  .project-icon{
    width:34px; height:34px;
    margin-bottom:16px;
    color:var(--wine-text);
  }
  .project-icon svg{ width:100%; height:100%; }
  .project-title{
    font-family:'Cinzel', serif;
    font-weight:700; font-size:16.5px;
    color:var(--bone); margin-bottom:9px;
    text-transform:uppercase;
  }
  .project-text{
    font-size:13.5px; color:var(--bone-dim); line-height:1.6;
  }

  /* ---------- EDUCATION ---------- */
  .edu-entry{
    display:grid; grid-template-columns:120px 1fr; gap:24px;
    padding:20px 0; border-top:1px solid var(--steel);
  }
  .edu-entry:first-child{ border-top:none; padding-top:0; }
  .edu-degree{ font-family:'Cinzel', serif; font-weight:700; font-size:18px; color:var(--bone); text-transform:uppercase; }
  .edu-meta{ font-size:14px; color:var(--bone-dim); margin-top:4px; }

  /* ---------- SKILLS ---------- */
  .skills-grid{ display:grid; gap:18px; }
  .skill-row{
    display:grid; grid-template-columns:150px 1fr; gap:16px;
    padding:16px 0; border-top:1px solid var(--steel);
  }
  .skill-row:first-child{ border-top:none; padding-top:0; }
  .skill-label{
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--wine-text); padding-top:4px;
  }
  .skill-tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .tag{
    font-size:13px; padding:6px 12px;
    background:var(--void); border:1px solid var(--hairline-bright);
    color:var(--bone-dim);
    transition:all .2s ease;
    cursor:default;
  }
  .tag:hover{
    background:var(--wine-bright); border-color:var(--wine-bright);
    color:var(--bone); font-weight:600;
  }

  /* ---------- WORKSHOP (HOBBIES) ---------- */
  .workshop-intro{
    font-size:14.5px; color:var(--bone-dim); max-width:600px; margin-bottom:32px; line-height:1.7;
  }
  .workshop-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:2px;
    background:var(--steel);
    border:2px solid var(--steel);
  }
  @media (max-width: 480px){
    .workshop-grid{ grid-template-columns:1fr; }
  }
  .workshop-card{
    background:var(--void);
    padding:22px 18px;
    transition:background .25s ease;
  }
  .workshop-card:hover{ background:var(--wine-deep); }
  .workshop-icon{ width:30px; height:30px; margin-bottom:13px; color:var(--wine-text); }
  .workshop-icon svg{ width:100%; height:100%; }
  .workshop-title{
    font-family:'Cinzel', serif;
    font-weight:700; font-size:14.5px;
    color:var(--bone); margin-bottom:6px;
    text-transform:uppercase;
  }
  .workshop-text{ font-size:12.5px; color:var(--bone-dim); line-height:1.55; }

  /* ---------- FOOTER ---------- */
  .footer{ padding:80px 0 88px; text-align:center; position:relative; }
  .footer-crest{ width:48px; height:48px; margin:0 auto 26px; }
  .footer-line{
    font-family:'Cinzel', serif; font-weight:700;
    font-size:22px; color:var(--bone); margin-bottom:26px;
    text-transform:uppercase;
  }
  .footer-links{
    display:flex; justify-content:center; gap:0;
    font-family:'JetBrains Mono', monospace; font-size:13px;
    flex-wrap:wrap;
  }
  .footer-links a{
    text-decoration:none; color:var(--bone-dim);
    padding:8px 20px; border-right:1px solid var(--hairline);
    display:inline-flex; align-items:center; gap:7px;
    transition:color .2s ease;
  }
  .footer-links a:last-child{ border-right:none; }
  .footer-links a svg{ width:14px; height:14px; }
  .footer-links a:hover{ color:var(--wine-text); }
  .footer-note{
    margin-top:40px; font-size:11.5px; color:var(--bone-dim);
    opacity:0.55; letter-spacing:0.08em;
    font-family:'JetBrains Mono', monospace;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 760px){
    .hero{ min-height:auto; padding:64px 0 52px; }
    .hero-grid{ grid-template-columns:1fr; gap:36px; text-align:left; }
    .portrait-stack{ align-items:flex-start; }
    .crest-wrap{ width:118px; height:118px; order:-2; }
    .portrait-frame{ order:-1; width:124px; height:158px; margin-top:0; }
    .wrap{ padding:0 20px; }
    .section{ padding:50px 0; }
    .ledger-entry{ grid-template-columns:1fr; gap:8px; }
    .ledger-entry::before{ display:none; }
    .edu-entry{ grid-template-columns:1fr; gap:8px; }
    .skill-row{ grid-template-columns:1fr; gap:8px; }
    .footer-links{ flex-direction:column; gap:4px; }
    .footer-links a{ border-right:none; }
  }