:root{
    --paper:#F3EFE6;
    --paper-2:#EBE4D6;
    --ink:#1C1512;
    --dark:#241C19;
    --dark-2:#2E2420;
    --dark-3:#3A2E29;
    --tan:#D8BA93;
    --tan-2:#C9A874;
    --red:#9C4038;
    --cream-text:#F3EFE6;
    --muted:#B8A99C;
    --line: rgba(28,21,18,0.16);
    --line-dark: rgba(243,239,230,0.16);
  }
 
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3, .display{
    font-family:'Poppins', sans-serif;
    font-weight:900;
    margin:0;
    letter-spacing:-0.01em;
  }
  .hand{
    font-family:'Caveat', cursive;
  }
  a{color:inherit; text-decoration:none;}
  ul{margin:0; padding:0; list-style:none;}
  img,svg{display:block; max-width:100%;}
  button{font-family:inherit;}
 
  .grain{position:relative;}
  .grain::after{
    content:'';
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:0.05;
    mix-blend-mode:multiply;
    pointer-events:none;
  }
  .dark .grain::after{ mix-blend-mode:overlay; opacity:0.06; }
 
  .wrap{
    max-width:1360px;
    margin:0 auto;
    padding:0 56px;
  }
 
  /* ---------- NAV ---------- */
  .nav{
    position:relative;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:34px 56px 10px;
    max-width:1360px;
    margin:0 auto;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:42px;
  }
  .nav-links a, .nav-home{
    font-family:'Poppins', sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:0.08em;
    color:var(--ink);
    position:relative;
  }
  .nav-home{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 18px;
  }
  .nav-home svg{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:78px; height:44px;
    overflow:visible;
  }
  .nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
  }
  .nav-toggle span{
    width:26px; height:3px; background:var(--ink); border-radius:2px;
  }
 
  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:calc(100vh - 92px);
    padding-top:0;
    padding-bottom:0;
    display:flex;
    align-items:center;
  }
  .hero > .wrap{
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:12px;
    padding-bottom:12px;
  }
  .particle-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:1;
  }
  .particle{
    position:absolute;
    opacity:.72;
    border-radius:999px;
    filter:blur(0.3px);
    transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)));
    animation: drift 12s ease-in-out infinite;
    will-change: transform, top, left;
  }
  .particle--line{
    width:2px;
    border-radius:999px;
    opacity:.48;
    background:rgba(28,21,18,0.2);
  }
  .particle--soft{
    border-radius:999px;
  }
  .particle--ink{
    background:rgba(28,21,18,0.18);
  }
  .particle--rust{
    background:rgba(156,64,56,0.18);
  }
  .particle--tan{
    background:rgba(216,186,147,0.22);
  }
  @keyframes drift{
    0%{transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)));}
    50%{transform: translate(calc(-50% + var(--offset-x, 0px) - 10px), calc(-50% + var(--offset-y, 0px) - 18px));}
    100%{transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)));}
  }
  .doodle-plane{ top:70px; right:64px; width:120px; opacity:0.85; }
  .doodle-star{ top:56px; left:24px; width:60px; opacity:0.8; }
 
  .logo-type{
    width:100%;
    max-width:700px;
    margin:0 auto 16px;
    padding:0 20px;
    position:relative;
    z-index:2;
    transform: scale(0.82);
    transform-origin: top center;
  }
  .logo-type svg{ width:100%; height:auto; display:block; color:var(--ink); }
  .logo-type svg text{ fill:var(--ink); }
 
  .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:20px;
    margin-top:6px;
    padding-bottom:18px;
  }
 
  .hero-copy{ padding-top:18px; padding-bottom:18px; position:relative; z-index:3;}
  .hero-name{
    font-size:clamp(26px,2.6vw,34px);
    letter-spacing:0.01em;
  }
  .hero-role{
    font-family:'DM Sans', sans-serif;
    font-weight:500;
    font-size:19px;
    color:#4a3f3a;
    margin-top:10px;
    padding-bottom:14px;
    border-bottom:3px solid var(--red);
    display:inline-block;
  }
  .hero-desc{
    margin-top:20px;
    font-size:16px;
    line-height:1.65;
    max-width:400px;
    color:#443a35;
  }
  .cta-row{
    margin-top:30px;
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
  }
  .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--ink);
    color:var(--paper);
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:0.06em;
    padding:16px 26px;
    border-radius:3px;
    border:none;
    cursor:pointer;
    transition:transform .18s ease, background .18s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); background:var(--red); }
  .btn-primary svg{ width:16px; height:16px; }
 
  .hero-illustration{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    margin-top:0;
    transform: translateY(-10px);
  }
  .hero-illustration .person-wrap{
    position:relative;
    width:min(100%, 340px);
    margin-top:18px;
  }
  .person-blob{
    position:absolute;
    left:50%; top:8%;
    transform:translateX(-50%);
    width:82%;
    aspect-ratio:1/1;
    background:#DAD3C6;
    border-radius:50%;
    filter:blur(1px);
    z-index:0;
  }
  .person-wrap svg{ position:relative; z-index:1; width:100%; height:auto; }
  .person-scribble{
    position:absolute;
    left:6%;
    bottom:2%;
    width:88%;
    z-index:2;
    opacity:.85;
  }
 
  .connect-mini{
    position:relative;
    text-align:right;
    z-index:4;
  }
  .connect-mini .label{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:12.5px;
    letter-spacing:0.09em;
    color:#4a3f3a;
    border-bottom:3px solid var(--tan-2);
    display:inline-block;
    padding-bottom:8px;
    margin-bottom:14px;
  }
  .connect-mini .icons{
    display:flex;
    gap:10px;
    justify-content:flex-end;
  }
  .icon-circle{
    width:38px; height:38px;
    border-radius:50%;
    background:var(--ink);
    color:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .18s ease, transform .18s ease;
  }
  .icon-circle:hover{ background:var(--red); transform:translateY(-3px); }
  .icon-circle svg{ width:17px; height:17px; }
 
  .note-doodle{
    width:150px;
    text-align:center;
    align-self:flex-end;
    margin-bottom:22px;
    z-index:4;
  }
  .note-doodle p{
    font-family:'Caveat', cursive;
    font-weight:700;
    font-size:19px;
    line-height:1.15;
    color:#4a3f3a;
    margin:0;
  }
  .note-doodle svg{ width:60px; margin:6px auto 0; }
 
  /* ---------- TORN DIVIDER ---------- */
  .tear{
    position:relative;
    width:100%;
    height:64px;
    margin-top:-2px;
    z-index:5;
  }
  .tear svg{ width:100%; height:100%; display:block; }
 
  /* ---------- DARK SECTION ---------- */
  .dark{
    background:var(--dark);
    color:var(--cream-text);
    position:relative;
    padding:56px 0 46px;
  }
  .cols{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:52px;
  }
  .col-head{
    position:relative;
    display:inline-block;
    margin-bottom:26px;
  }
  .col-head span{
    position:relative;
    z-index:2;
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:15.5px;
    letter-spacing:0.09em;
    color:var(--ink);
  }
  .col-head .tape{
    position:absolute;
    left:-14px; right:-14px; bottom:1px; top:6px;
    background:var(--tan);
    transform:rotate(-1deg);
    z-index:1;
    border-radius:2px;
  }
 
  .about-body p{
    font-size:15px;
    line-height:1.85;
    color:#D9D0C6;
    margin:0 0 18px;
  }
  .meta-list{ margin-top:26px; display:flex; flex-direction:column; gap:13px; }
  .meta-list li{
    display:flex; align-items:center; gap:12px;
    font-size:14.5px; color:#D9D0C6;
  }
  .meta-list svg{ width:17px; height:17px; flex-shrink:0; color:var(--tan); }
 
  .skill-group{ margin-bottom:26px; }
  .skill-group:last-child{ margin-bottom:0; }
  .skill-group h4{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:11.5px;
    letter-spacing:0.14em;
    color:var(--muted);
    margin:0 0 14px;
    text-transform:uppercase;
  }
  .badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .badge{
    display:flex;
    align-items:center;
    gap:9px;
    background:var(--dark-2);
    border:1px solid var(--line-dark);
    padding:8px 13px 8px 9px;
    border-radius:8px;
    font-size:13px;
    font-weight:500;
    color:#EFE9E0;
    transition:transform .15s ease, border-color .15s ease;
  }
  .badge:hover{ transform:translateY(-2px); border-color:var(--tan); }
  .badge .swatch{
    width:26px; height:26px;
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .badge .swatch svg{ width:16px; height:16px; }
  .badge .swatch.text-badge{ font-family:'Poppins',sans-serif; font-weight:800; font-size:10.5px; }
 
  .connect-list{ display:flex; flex-direction:column; gap:16px; margin-top:2px;}
  .connect-list a{
    display:flex; align-items:center; gap:13px;
    font-size:14.5px; color:#D9D0C6;
    transition:color .15s ease, transform .15s ease;
  }
  .connect-list a:hover{ color:var(--tan); transform:translateX(3px); }
  .connect-list .ic{
    width:34px; height:34px;
    border-radius:50%;
    background:var(--dark-2);
    border:1px solid var(--line-dark);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    color:var(--tan);
  }
  .connect-list .ic svg{ width:16px; height:16px; }
  .connect-note{
    margin-top:26px;
    padding-top:22px;
    border-top:1px dashed var(--line-dark);
    font-size:14px;
    line-height:1.7;
    color:#B8A99C;
  }
  .connect-loc{
    display:flex; align-items:center; gap:10px;
    font-size:14.5px; color:#D9D0C6; margin-top:18px;
  }
  .connect-loc svg{ width:16px; height:16px; color:var(--tan); }
 
  .footer{
    text-align:center;
    padding:26px 20px 34px;
    font-size:14px;
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  .footer svg{ width:15px; height:15px; color:var(--red); }
 
  .col-decor{
    position:absolute;
    pointer-events:none;
    opacity:0.9;
  }
  .decor-bulb{ right:-6px; bottom:-4px; top:auto; width:110px; opacity:0.85; }
 
  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .wrap{ padding:0 28px; }
    .nav{ padding:26px 28px 10px; }
    .nav-links{
      position:fixed; inset:0 0 0 auto;
      height:100vh; width:min(78vw,320px);
      background:var(--paper);
      flex-direction:column;
      align-items:flex-start;
      justify-content:center;
      gap:26px;
      padding:40px;
      transform:translateX(100%);
      transition:transform .3s ease;
      box-shadow:-8px 0 24px rgba(0,0,0,0.12);
    }
    .nav-links.open{ transform:translateX(0); }
    .nav-toggle{ display:flex; z-index:60; }
    .hero-grid{ grid-template-columns:1fr; margin-top:8px; gap:50px; }
    .hero-illustration{ order:-1; margin-top:0; align-items:center; }
    .hero-copy{ padding-bottom:20px; text-align:left; }
    .hero-desc{ max-width:520px; }
    .connect-mini{ position:static; text-align:center; margin-top:24px; }
    .connect-mini .icons{ justify-content:center; }
    .note-doodle{ display:none; }
    .doodle-plane, .doodle-star{ display:none; }
    .logo-type{ max-width:640px; }
    .cols{ grid-template-columns:1fr; gap:48px; }
    .decor-bulb{ display:none; }
  }
  @media (max-width: 560px){
    .wrap{ padding:0 20px; }
    .nav{ padding:22px 20px 8px; }
    .hero-name{ font-size:24px; }
    .hero-role{ font-size:16px; }
  }