:root{
    --paper:#FFFFFF;
    --ink:#232220;
    --ink-soft:#6E6A62;
    --ink-faint:#A29D91;
    --pill-bg:#EEEAE0;
    --accent-warm:#E85A2A;

    --display: "Poppins", "Inter", sans-serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "Space Mono", monospace;

    --max: 1240px;
    --edge: clamp(20px, 5vw, 64px);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }

  ::selection{ background:var(--ink); color:var(--paper); }
  a{ color:inherit; text-decoration:none; }
  :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding-left:var(--edge);
    padding-right:var(--edge);
  }

  /* ================= SPLASH ================= */
  .splash-stage{
    position:relative;
    height:140vh;
    height:140svh;
  }

  .splash{
    position:sticky;
    top:0;
    height:100vh;
    height:100svh;
    background:#111110;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:40px;
    z-index:0;
  }

  .splash-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }

  .splash::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(17,17,16,0.6) 100%);
    pointer-events:none;
  }

  .splash-content{
    position:relative;
    z-index:1;
    max-width:1100px;
    text-align:left;
    transition:transform 0.2s ease-out;
    will-change:transform;
  }

  .splash-nameline{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0 14px;
    font-family:var(--display);
    font-weight:300;
    font-size:clamp(26px, 2.8vw, 36px);
    letter-spacing:0.01em;
    color:#bdb9ae;
  }

  .splash-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    line-height:1;
    filter:saturate(1.1);
  }

  .splash-role{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(38px, 8vw, 92px);
    line-height:1.02;
    letter-spacing:-0.01em;
    color:#fff;
    margin-top:6px;
  }

  .splash-scroll{
    margin-top:34px;
    width:38px; height:38px;
    border-radius:50%;
    background:#8FE07A;
    display:flex;
    align-items:center;
    justify-content:center;
    animation: bob 1.8s ease-in-out infinite;
  }
  .splash-scroll svg{ width:14px; height:14px; }

  @keyframes bob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(6px); }
  }

  /* ================= NAV ================= */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:20;
    background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(255,255,255,0.4);
    box-shadow:0 1px 24px rgba(20,20,18,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform 0.4s ease, opacity 0.4s ease;
  }
  header.visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  header .logo, header .nav-links a{
    text-shadow:0 1px 1px rgba(255,255,255,0.8);
  }

  nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--sans);
    font-weight:600;
    font-size:15px;
  }
  .logo-dot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    line-height:1;
    flex-shrink:0;
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:clamp(20px, 3vw, 40px);
    font-size:14px;
    font-weight:500;
  }
  .nav-links a{ position:relative; padding:4px 0; }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:0;
    height:1px; background:var(--ink);
    transition:right 0.25s ease;
  }
  .nav-links a:hover::after{ right:0; }

  /* ================= INTRO ================= */
  .intro{
    padding-top:clamp(100px, 13vw, 160px);
    padding-bottom:clamp(64px, 9vw, 108px);
    position:relative;
    z-index:2;
    background:var(--paper);
    margin-top:-40vh;
    border-radius:28px 28px 0 0;
    box-shadow:0 -24px 60px rgba(0,0,0,0.28);
    overflow:hidden;
  }

  .intro-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:40px;
  }

  .greeting{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(40px, 6.2vw, 76px);
    line-height:1.04;
  }

  .greeting .comma{ color:var(--ink); }
  .greeting .nowrap{ white-space:nowrap; }

  .intro-copy{
    margin-top:28px;
    max-width:560px;
    font-size:clamp(15px, 1.4vw, 17px);
    line-height:1.7;
    color:var(--ink-soft);
  }
  .intro-copy b{
    color:var(--accent-warm);
    font-weight:700;
  }

  .intro-scroll-note{
    margin-top:24px;
    font-size:clamp(15px, 1.4vw, 17px);
    color:var(--ink-soft);
  }

  .intro-art{
    position:relative;
    height:clamp(280px, 34vw, 460px);
  }

  .intro-shape,
  .intro-doodle{
    transform:translateX(140%);
    transition:transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .intro-art.in-view .intro-shape,
  .intro-art.in-view .intro-doodle{
    transform:translateX(0);
  }

  .intro-shape{
    position:absolute;
    right:calc(var(--edge) * -1);
    top:8%;
    width:78%;
    height:88%;
    background:#B7ECA0;
    clip-path:polygon(18% 0%, 100% 6%, 92% 100%, 0% 88%);
  }

  .intro-doodle{
    position:absolute;
    right:calc(var(--edge) * -1);
    top:8%;
    width:78%;
    height:88%;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }

  .wave-emoji{
    display:inline-block;
    font-size:clamp(100px, 12.5vw, 172px);
    line-height:1;
    transform-origin:70% 75%;
    animation:handWave 2.4s ease-in-out infinite;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,0.18));
  }

  @keyframes handWave{
    0%, 100%{ transform:rotate(0deg); }
    12%{ transform:rotate(16deg); }
    24%{ transform:rotate(-10deg); }
    36%{ transform:rotate(16deg); }
    48%{ transform:rotate(-6deg); }
    60%{ transform:rotate(0deg); }
  }

  /* ================= PROJECTS ================= */
  .work{ padding-bottom:clamp(40px, 6vw, 72px); }

  .project{
    padding-top:clamp(150px, 19vw, 230px);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .project.in-view{ opacity:1; transform:translateY(0); }

  .project-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(32px, 5vw, 64px);
    align-items:center;
  }
  .project.reverse .project-grid{
    grid-template-columns:1.15fr 0.85fr;
  }
  .project.reverse .project-text{ order:2; }
  .project.reverse .project-art-col{ order:1; }

  .project-title{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(30px, 3.6vw, 46px);
    line-height:1.05;
  }

  .project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
  }
  .project-tags span{
    background:var(--pill-bg);
    color:var(--ink-soft);
    font-size:12.5px;
    padding:6px 14px;
    border-radius:999px;
  }

  .project-desc{
    margin-top:22px;
    max-width:460px;
    font-size:clamp(14.5px, 1.3vw, 16px);
    line-height:1.65;
    color:var(--ink-soft);
  }

  .project-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:28px;
    padding:14px 20px;
    border-radius:14px;
    font-weight:700;
    font-size:14.5px;
    cursor:default;
    user-select:none;
    border:1.5px solid transparent;
    transition:background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }
  .project-cta svg{ width:15px; height:15px; }
  a.project-cta{ cursor:pointer; }

  .project:nth-of-type(1) .project-cta{
    background:#D9EAFE; border-color:#1D4ED8; color:#1D4ED8;
    box-shadow:4px 5px 0 #1D4ED8;
  }
  .project:nth-of-type(1) a.project-cta:hover{
    background:#1D4ED8; color:#ffffff; box-shadow:none; transform:translate(4px,5px);
  }
  .project:nth-of-type(2) .project-cta{
    background:#FDECC8; border-color:#B45309; color:#B45309;
    box-shadow:4px 5px 0 #B45309;
  }
  .project:nth-of-type(2) a.project-cta:hover{
    background:#B45309; color:#ffffff; box-shadow:none; transform:translate(4px,5px);
  }
  .project:nth-of-type(3) .project-cta{
    background:#EDE1F5; border-color:#672C95; color:#672C95;
    box-shadow:4px 5px 0 #672C95;
  }
  .project:nth-of-type(3) a.project-cta:hover{
    background:#672C95; color:#ffffff; box-shadow:none; transform:translate(4px,5px);
  }
  .project:nth-of-type(4) .project-cta{
    background:#DFF7F4; border-color:#2CC8BC; color:#2CC8BC;
    box-shadow:4px 5px 0 #2CC8BC;
  }
  .project:nth-of-type(4) a.project-cta:hover{
    background:#2CC8BC; color:#ffffff; box-shadow:none; transform:translate(4px,5px);
  }

  .project-art-col{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .project-art-col svg{ width:100%; height:auto; max-width:520px; }

  /* ================= FOOTER ================= */
  .footer-cta{
    background:#33322F;
    padding:clamp(48px, 8vw, 88px) 0;
  }
  .footer-cta-inner{
    text-align:center;
  }
  .footer-cta-text{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(22px, 3.2vw, 36px);
    line-height:1.3;
    color:var(--paper);
    max-width:640px;
    margin:0 auto;
  }
  .footer-cta-icons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:30px;
  }
  .footer-icon{
    width:52px; height:52px;
    border-radius:50%;
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    box-shadow:0 3px 10px rgba(0,0,0,0.35);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .footer-icon svg{ width:22px; height:22px; }
  .footer-icon:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,0.4);
  }

  footer{ padding:0; }
  /* ================= RESPONSIVE ================= */
  @media (max-width:900px){
    .intro-grid{ grid-template-columns:1fr; }
    .intro-art{ margin-top:32px; height:260px; }
    .project-grid, .project.reverse .project-grid{
      grid-template-columns:1fr;
    }
    .project-text{ order:1 !important; }
    .project-art-col{ order:2 !important; margin-top:28px; }
  }

  @media (max-width:600px){
    nav.wrap{ height:56px; }
    .nav-links{ gap:14px; font-size:13px; }
    .splash-role{ font-size:clamp(30px, 10vw, 48px); }
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:0.001ms !important;
      transition-duration:0.001ms !important;
    }
  }