:root{
    --ink:#181614;
    --paper:#FFFAF0;
    --paper-2:#FFF1DC;
    --sun:#FFC93C;
    --coral:#FF5D5D;
    --cobalt:#2C5CFF;
    --violet:#8A3FFC;
    --mint:#12B6A1;
    --shadow-ink: rgba(24,22,20,0.9);
    --radius-blob-a: 62% 38% 55% 45% / 45% 60% 40% 55%;
    --radius-blob-b: 45% 55% 65% 35% / 55% 40% 60% 45%;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Space Grotesk', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--sun); color:var(--ink);}

  h1,h2,h3, .fr{
    font-family:'Fraunces', serif;
    margin:0;
    font-weight:560;
  }

  a{color:inherit;}

  img, video{max-width:100%; display:block;}

  .blobfield{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
  }
  .blob{
    position:absolute;
    filter:blur(2px);
    opacity:0.85;
    mix-blend-mode:multiply;
  }
  .b1{ width:38vw; height:38vw; top:-8vw; left:-6vw; background:var(--sun); border-radius:62% 38% 55% 45% / 45% 60% 40% 55%; }
  .b2{ width:26vw; height:26vw; top:8vw; right:-5vw; background:var(--coral); border-radius:45% 55% 65% 35% / 55% 40% 65% 45%; }
  .b3{ width:30vw; height:30vw; bottom:-8vw; left:18vw; background:var(--cobalt); opacity:0.55; border-radius:55% 45% 40% 60% / 35% 55% 45% 65%; }
  .b4{ width:22vw; height:22vw; bottom:6vw; right:12vw; background:var(--violet); opacity:0.5; border-radius:40% 60% 55% 45% / 60% 45% 55% 40%; }
  .b5{ width:16vw; height:16vw; top:45vw; left:42vw; background:var(--mint); opacity:0.45; border-radius:65% 35% 45% 55% / 45% 55% 35% 65%; }


  section{ position:relative; z-index:1; }

  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.25rem 1.75rem;
    mix-blend-mode:normal;
  }
  .mark{
    font-family:'Fraunces', serif; font-style:italic; font-weight:600;
    font-size:1.15rem;
    background:var(--paper);
    padding:0.3rem 0.85rem;
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
    border:2px solid var(--ink);
  }
  .navlinks{ display:flex; gap:0.6rem; }
  .navlinks a{
    text-decoration:none;
    font-size:0.92rem;
    background:var(--paper);
    border:2px solid var(--ink);
    padding:0.4rem 0.95rem;
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
    transition:transform 0.18s ease, background 0.18s ease;
    display:inline-block;
  }
  .navlinks a:hover{ background:var(--sun); transform:rotate(-2deg) translateY(-1px); }

  @media (max-width:640px){
    .navlinks{ display:none; }
  }

  .hero{
    min-height:100svh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:6rem 1.5rem 4rem;
  }
  .kicker{
    font-size:0.95rem;
    padding:0.35rem 1rem;
    background:var(--paper);
    border:2px solid var(--ink);
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
    transform:rotate(-2deg);
    margin-bottom:1.6rem;
  }
  .hero h1{
    font-size:clamp(3rem, 11vw, 7.2rem);
    font-style:italic;
    line-height:0.95;
    letter-spacing:-0.01em;
  }
  .hero h1 .last{ display:block; color:var(--coral); -webkit-text-stroke:2px var(--ink); }
  .hero p.tag{
    max-width:38ch;
    margin:1.6rem auto 0;
    font-size:1.15rem;
    line-height:1.55;
  }
  .hero .loc{
    margin-top:1.4rem;
    font-size:0.9rem;
    opacity:0.75;
  }
  .scrollcue{
    margin-top:3rem;
    width:34px; height:50px;
    border:2px solid var(--ink);
    border-radius:20px;
    position:relative;
  }
  .scrollcue::after{
    content:'';
    position:absolute; top:8px; left:50%;
    width:5px; height:9px;
    background:var(--ink);
    border-radius:3px;
    transform:translateX(-50%);
    animation:cue 1.6s ease-in-out infinite;
  }
  @keyframes cue{
    0%{ transform:translate(-50%,0); opacity:1;}
    70%{ transform:translate(-50%,14px); opacity:0;}
    71%{ transform:translate(-50%,0); opacity:0;}
    100%{ transform:translate(-50%,0); opacity:1;}
  }

  .about{
    max-width:720px;
    margin:0 auto;
    padding:2rem 1.75rem 6rem;
    text-align:center;
  }
  .about p{ font-size:1.15rem; line-height:1.7; }
  .chips{
    display:flex; flex-wrap:wrap; gap:0.55rem; justify-content:center;
    margin-top:1.6rem;
  }
  .chip{
    font-size:0.85rem;
    padding:0.35rem 0.85rem;
    border:2px dashed var(--ink);
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
    background:var(--paper-2);
  }

  .section-head{
    text-align:center;
    padding:0 1.5rem;
    margin-bottom:3.5rem;
  }
  .section-head h2{
    font-size:clamp(2.1rem, 5vw, 3.4rem);
    font-style:italic;
    display:inline-block;
    position:relative;
  }
  .section-head h2 svg{
    display:block;
    width:100%;
    margin-top:2px;
  }
  .section-head p{ max-width:46ch; margin:0.9rem auto 0; opacity:0.8; }

  .gallery{
    max-width:1180px;
    margin:0 auto;
    padding:2rem 1.5rem 7rem;
    display:flex;
    flex-direction:column;
    gap:5.5rem;
  }
  .project{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
    position:relative;
  }
  @media (min-width:900px){
    .project{ grid-template-columns:1.05fr 0.95fr; align-items:start; gap:3rem; }
    .project.flip .card{ order:2; }
    .project.flip .media{ order:1; }
  }

  .card{
    background:var(--paper);
    border:2.5px solid var(--ink);
    border-radius:26px 8px 26px 8px;
    padding:2rem 1.9rem;
    position:relative;
    box-shadow:7px 7px 0 var(--shadow-ink);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .project:nth-child(odd) .card{ transform:rotate(-1.1deg); }
  .project:nth-child(even) .card{ transform:rotate(1.1deg); }
  .card:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:10px 10px 0 var(--shadow-ink); }

  .tape{
    position:absolute; top:-14px; left:32px;
    width:70px; height:26px;
    background:rgba(255,255,255,0.65);
    border:1.5px solid rgba(24,22,20,0.35);
    transform:rotate(-4deg);
  }
  .project:nth-child(even) .tape{ left:auto; right:32px; transform:rotate(5deg); }

  .project-num{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:0.95rem;
    opacity:0.55;
  }
  .project h3{
    font-size:clamp(1.6rem,3vw,2.15rem);
    font-style:italic;
    margin:0.3rem 0 0.9rem;
  }
  .project .desc{ font-size:1.02rem; line-height:1.65; margin-bottom:1rem; }
  .project .desc + .desc{ margin-top:-0.5rem; }

  .tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.4rem 0 1.3rem; }
  .tag{
    font-size:0.78rem;
    padding:0.25rem 0.7rem;
    border:1.5px solid var(--ink);
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  }
  .tag.c1{ background:var(--sun); }
  .tag.c2{ background:#FFD9D9; }
  .tag.c3{ background:#D6E0FF; }
  .tag.c4{ background:#E4D4FF; }
  .tag.c5{ background:#CFF3EC; }

  .links{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:0.4rem; }
  .stub{
    display:inline-flex; align-items:center; gap:0.4rem;
    text-decoration:none;
    font-size:0.92rem;
    font-weight:600;
    padding:0.5rem 1rem 0.5rem 0.9rem;
    border:2px solid var(--ink);
    border-radius:4px;
    background:var(--ink);
    color:var(--paper);
    position:relative;
    transition:transform 0.15s ease;
  }
  .stub:hover{ transform:translate(-2px,-2px); }
  .stub::after{
    content:'';
    position:absolute; right:-7px; top:50%; transform:translateY(-50%);
    width:12px; height:12px; border-radius:50%;
    background:var(--paper);
    border:2px solid var(--ink);
    border-left:none;
    box-sizing:border-box;
    display:none;
  }

  details.more{ margin-top:1.2rem; }
  details.more summary{
    cursor:pointer;
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.92rem;
    font-weight:600;
    user-select:none;
  }
  details.more summary::-webkit-details-marker{ display:none; }
  details.more summary .plus{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px;
    border:2px solid var(--ink);
    border-radius:50%;
    font-size:0.95rem;
    transition:transform 0.2s ease;
  }
  details.more[open] summary .plus{ transform:rotate(45deg); }
  details.more .more-body{
    margin-top:0.9rem;
    padding-top:0.9rem;
    border-top:1.5px dashed var(--ink);
    font-size:0.96rem;
    line-height:1.65;
  }
  .steps{ margin:0.6rem 0 0; padding-left:1.2rem; }
  .steps li{ margin-bottom:0.4rem; }

  .media{ display:flex; flex-direction:column; gap:0.9rem; }
  .slideshow{
    position:relative;
    border:2.5px solid var(--ink);
    border-radius:26px 8px 26px 8px;
    overflow:hidden;
    aspect-ratio:4/3;
    background:var(--paper-2);
    box-shadow:7px 7px 0 var(--shadow-ink);
  }
  .slide-track{
    display:flex;
    height:100%;
    transition:transform 0.45s cubic-bezier(.65,0,.35,1);
  }
  .slide{
    flex:0 0 100%;
    width:100%;
    height:100%;
    position:relative;
  }
  .slide img, .slide video{
    width:100%; height:100%; object-fit:cover;
  }
  .slide.placeholder{
    display:flex; align-items:center; justify-content:center;
    padding:2rem;
  }
  .slide.placeholder .ph-inner{
    text-align:center;
    max-width:32ch;
    opacity:0.6;
  }
  .slide.placeholder svg{ width:36px; height:36px; margin-bottom:0.7rem; }
  .slide.placeholder p{ font-size:0.9rem; line-height:1.5; margin:0; }

  .slideshow .arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px;
    border-radius:50%;
    border:2px solid var(--ink);
    background:var(--paper);
    font-family:'Fraunces', serif;
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s ease, transform 0.15s ease;
    z-index:2;
  }
  .slideshow .arrow:hover{ background:var(--sun); }
  .slideshow .arrow:active{ transform:translateY(-50%) scale(0.92); }
  .slideshow .arrow.prev{ left:12px; }
  .slideshow .arrow.next{ right:12px; }
  .slideshow.single .arrow, .slideshow.single .dots{ display:none; }

  .slideshow .dots{
    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    display:flex; gap:0.4rem;
    z-index:2;
  }
  .slideshow .dots button{
    width:9px; height:9px;
    border-radius:50%;
    border:1.5px solid var(--ink);
    background:rgba(255,250,240,0.75);
    padding:0;
    cursor:pointer;
  }
  .slideshow .dots button.active{ background:var(--coral); }

  .slideshow .count{
    position:absolute; top:10px; right:12px;
    font-size:0.72rem;
    padding:0.15rem 0.55rem;
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
    background:rgba(255,250,240,0.85);
    border:1.5px solid var(--ink);
    z-index:2;
  }
  .slideshow.single .count{ display:none; }

  .contact{
    max-width:760px;
    margin:0 auto;
    padding:2rem 1.75rem 3rem;
    text-align:center;
  }
  .contact h2{
    font-size:clamp(2.4rem,7vw,4.2rem);
    font-style:italic;
  }
  .contact p{ margin-top:1rem; font-size:1.05rem; opacity:0.85; }
  .contact-links{
    margin-top:2rem;
    display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center;
  }
  .clink{
    display:inline-flex; align-items:center; gap:0.5rem;
    text-decoration:none;
    padding:0.6rem 1.1rem;
    border:2.5px solid var(--ink);
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
    font-weight:600;
    font-size:0.95rem;
    background:var(--paper);
    transition:transform 0.18s ease, background 0.18s ease;
  }
  .clink:hover{ background:var(--mint); transform:rotate(-2deg) translateY(-2px); }
  .clink svg{ width:18px; height:18px; }

  footer{
    text-align:center;
    padding:2.5rem 1rem 3rem;
    font-size:0.82rem;
    opacity:0.6;
  }

  @media (prefers-reduced-motion: reduce){
    .blob{ animation:none; }
    .scrollcue::after{ animation:none; }
    html{ scroll-behavior:auto; }
  }

  a:focus-visible, button:focus-visible, summary:focus-visible{
    outline:3px solid var(--cobalt);
    outline-offset:2px;
  }