:root{
    --paper:#f3ece0;
    --ink:#141414;
    --pink:#c53a2b;
    --teal:#213a63;
    --yellow:#f2b705;
    --green:#1f7a4d;
    --blush:#f0d9c8;
    --display:'Archivo Black', sans-serif;
    --hand:'Permanent Marker', cursive;
    --body:'Inter', sans-serif;
    --edge: clamp(1.1rem, 5vw, 4.5rem);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
  body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--ink); color:var(--yellow);}
  a:focus-visible, button:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}

  /* ---------- the real cdbrinkm.com line pattern, fixed behind everything ---------- */
  .lines-fixed{
    position:fixed; inset:0; z-index:0;
    background:url('../../images/hero-lines.jpg') center/cover no-repeat;
    filter:contrast(1.05);
  }
  section, footer, header.nav{position:relative; z-index:1;}
  section::before{
    content:""; position:absolute; inset:0; z-index:0; background:var(--wash, var(--paper)); opacity:var(--wash-o, .93);
  }
  section > *{position:relative; z-index:1;}

  .hero{--wash:var(--paper); --wash-o:.5;}
  .about{--wash:var(--paper); --wash-o:.9;}
  .work{--wash:var(--paper); --wash-o:.93;}
  .contact{--wash:var(--pink); --wash-o:.86;}
  footer{--wash:var(--paper);}
  footer::before{content:""; position:absolute; inset:0; z-index:0; background:var(--paper); opacity:.95;}
  footer > *{position:relative; z-index:1;}

  section{padding:7rem var(--edge); scroll-margin-top:5rem;}

  /* doubled hand-sketch frame, echoing the logo's own double-line construction */
  .sketch-frame{position:relative;}
  .sketch-frame::before, .sketch-frame::after{
    content:""; position:absolute; inset:-7px; border:4px solid var(--ink); pointer-events:none; z-index:2;
  }
  .sketch-frame::before{transform:rotate(-1.3deg);}
  .sketch-frame::after{transform:rotate(1deg); border-color:var(--accent, var(--pink));}
  .sketch-frame > img{position:relative; z-index:1;}

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:.7rem var(--edge);
    background:rgba(242,239,230,.92); backdrop-filter:blur(4px);
    border-bottom:5px solid var(--ink);
  }
  .brand-lockup{display:inline-flex; align-items:center;}
  .logo-chip{background:var(--ink); padding:.4rem .7rem; display:inline-flex; align-items:center; transform:rotate(-1deg);}
  .logo-chip img{height:26px; width:auto;}
  .brand-mark{height:40px; width:auto; margin-left:.6rem; transform:rotate(4deg);}
  @media (max-width:640px){ .brand-mark{height:32px;} }
  .navlinks{display:flex; gap:1.8rem; list-style:none; margin:0; padding:0; font-family:var(--hand); font-size:1.02rem;}
  .navlinks a{text-decoration:none; position:relative;}
  .navlinks a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:4px; background:var(--pink); transform:scaleX(0); transform-origin:left; transition:transform .2s;}
  .navlinks a:hover::after, .navlinks a:focus-visible::after{transform:scaleX(1);}
  @media (max-width:640px){ .navlinks{display:none;} }

  /* ---------- HERO ---------- */
  .hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:6rem; overflow:hidden;}
  .hero .deco{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .hero .bar{position:absolute; background:var(--ink); height:9px;}
  .hero .k{
    position:absolute; border-radius:50%; mix-blend-mode:multiply;
    background-image:
      radial-gradient(circle at 22% 28%, rgba(255,255,255,.55) 0 5%, transparent 6%),
      radial-gradient(circle at 68% 18%, rgba(255,255,255,.4) 0 4%, transparent 5%),
      radial-gradient(circle at 78% 62%, rgba(255,255,255,.45) 0 6%, transparent 7%),
      radial-gradient(circle at 34% 76%, rgba(255,255,255,.35) 0 4%, transparent 5%),
      radial-gradient(circle at 52% 48%, rgba(255,255,255,.3) 0 8%, transparent 9%);
  }
  .planet{border-radius:50%; mix-blend-mode:multiply; position:absolute;
    background-image:
      radial-gradient(circle at 22% 28%, rgba(255,255,255,.55) 0 5%, transparent 6%),
      radial-gradient(circle at 68% 18%, rgba(255,255,255,.4) 0 4%, transparent 5%),
      radial-gradient(circle at 78% 62%, rgba(255,255,255,.45) 0 6%, transparent 7%),
      radial-gradient(circle at 34% 76%, rgba(255,255,255,.35) 0 4%, transparent 5%);
  }
  .hero-mark{position:absolute; width:min(30vw, 320px); height:auto; right:4%; top:20%; opacity:.92; transform:rotate(-6deg);}
  @media (max-width:860px){ .hero-mark{width:38vw; right:2%; top:8%; opacity:.5;} }
  .hero .eyebrow{font-family:var(--hand); font-size:1rem; margin:0 0 1rem; transform:rotate(-1.5deg); display:inline-block; color:var(--green);}
  .hero h1{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(2.6rem,9.4vw,7.2rem); line-height:.94; letter-spacing:0; margin:0 0 1.6rem;}
  .hero h1 .w{display:inline-block; position:relative; padding:0 .07em;}
  .hero h1 .w1{transform:rotate(-1deg);}
  .hero h1 .w2{color:var(--paper); background:var(--pink); transform:rotate(1.4deg); margin:.1em 0;}
  .hero h1 .w3{transform:rotate(-.6deg); text-decoration:underline; text-decoration-thickness:7px; text-decoration-color:var(--teal); text-underline-offset:6px;}
  .hero p.lede{font-family:var(--body); font-size:clamp(1rem,2vw,1.25rem); max-width:30rem;}
  .scrollcue{position:absolute; left:var(--edge); bottom:2.2rem; display:flex; align-items:center; gap:.6rem; font-family:var(--hand); font-size:.95rem; z-index:1;}
  .scrollcue svg{width:30px; height:30px; animation:bob 1.6s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

  .project.pending{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;}
  .project.in{opacity:1; transform:translateY(0);}

  /* ---------- ABOUT ---------- */
  .about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,6vw,6rem); align-items:start;}
  @media (max-width:860px){.about-grid{grid-template-columns:1fr;}}
  .about-photo{transform:rotate(-1.2deg); margin:0 clamp(.5rem,3vw,1.5rem); --accent:var(--teal);}
  .about-photo img{aspect-ratio:4/5; object-fit:cover; width:100%;}
  .about-photo figcaption{font-family:var(--hand); font-size:.95rem; margin-top:1.3rem; display:inline-block;}
  .eyebrow-hand{font-family:var(--hand); font-size:1.05rem; display:inline-block; transform:rotate(-2deg);}
  .about-grid h2{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.9rem,3.6vw,3rem); margin:.7rem 0 1.2rem; line-height:1.02;}
  .about-grid .meta{font-family:var(--hand); font-size:1rem; color:var(--pink); margin-bottom:1.4rem;}
  .about-grid p{max-width:36rem;}
  .about-grid p + p{margin-top:1rem;}
  .roles{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; padding:0; list-style:none;}
  .roles li{font-family:var(--hand); font-size:.92rem; padding:.35rem .8rem .35rem .65rem; border:3px solid var(--ink); background:var(--paper);}
  .roles li::before{content:"Δ "; color:var(--green);}
  .roles li:nth-child(1){transform:rotate(-2deg);}
  .roles li:nth-child(2){background:var(--yellow); transform:rotate(1.5deg);}
  .roles li:nth-child(2)::before{color:var(--pink);}
  .roles li:nth-child(3){transform:rotate(-1deg);}
  .roles li:nth-child(4){background:var(--pink); color:#fff; transform:rotate(2deg);}
  .roles li:nth-child(4)::before{color:var(--yellow);}
  .roles li:nth-child(5){transform:rotate(-1.5deg); background:var(--teal);}
  .roles li:nth-child(5)::before{color:var(--yellow);}

    /* ---------- PROJECT COLLAGE ---------- */
  .projects-collage{position:relative;}
  .project-collage{position:relative;min-height:880px;padding:5rem 0 7rem;border-top:3px solid var(--ink);isolation:isolate;overflow:hidden;}
  .project-collage:last-child{border-bottom:3px solid var(--ink);}
  .project-collage__meta{position:absolute;top:1.5rem;left:0;right:0;display:flex;justify-content:space-between;font-family:var(--hand);font-size:.8rem;z-index:20;}
  .project-collage__copy{position:absolute;left:5%;top:16%;width:min(360px,32vw);z-index:15;transform:rotate(-2deg);}
  .project-collage.flip .project-collage__copy{left:auto;right:5%;transform:rotate(2deg);}
  .project-collage__copy .cat{font-family:var(--hand);font-size:.82rem;display:inline-block;padding:.15rem .5rem;margin-bottom:.6rem;color:#fff;background:var(--pink);}
  .project-collage:nth-child(4n+2) .project-collage__copy .cat{background:var(--teal);color:var(--ink);}
  .project-collage:nth-child(4n+3) .project-collage__copy .cat{background:var(--ink);}
  .project-collage:nth-child(4n) .project-collage__copy .cat{background:var(--yellow);color:var(--ink);}
  .project-collage__copy h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,3.5vw,3.4rem);line-height:.92;margin:0 0 .8rem;position:relative;z-index:1;}
  .project-collage__copy .circle-svg{position:absolute;left:-12%;top:-30%;width:124%;height:190%;pointer-events:none;z-index:0;}
  .project-collage__copy .circle-svg path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset .5s ease;}
  .project-collage:hover .circle-svg path{stroke-dashoffset:0;}
  .project-collage__copy p{font-size:.92rem;line-height:1.45;max-width:30rem;margin:0;color:#3a352c;}
  .project-collage__copy .motto{font-family:var(--hand);font-size:.85rem;color:var(--pink);display:block;margin-bottom:.4rem;}
  .project-open{display:inline-block;margin-top:1rem;padding:.45rem .7rem;border:2px solid var(--ink);text-decoration:none;font-family:var(--hand);font-size:.8rem;background:var(--paper);transform:rotate(-2deg);}
  .project-collage__images{position:absolute;inset:0;z-index:5;pointer-events:none;}
  .collage-image{position:absolute;margin:0;overflow:hidden;box-shadow:9px 11px 0 rgba(20,20,20,.12);pointer-events:auto;background:#ddd;}
  .collage-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;}
  .collage-image:hover img{transform:scale(1.06);}
  .collage-image--1{width:48%;height:52%;right:5%;top:7%;transform:rotate(3.5deg);border-radius:3% 12% 4% 9%;z-index:4;}
  .collage-image--2{width:27%;height:31%;left:3%;top:8%;transform:rotate(-6deg);z-index:8;}
  .collage-image--3{width:29%;height:34%;left:17%;bottom:8%;transform:rotate(4deg);z-index:9;}
  .collage-image--4{width:24%;height:29%;right:22%;bottom:4%;transform:rotate(-5deg);z-index:10;}
  .collage-image--5{width:23%;height:27%;right:2%;bottom:14%;transform:rotate(7deg);z-index:11;}
  .collage-image--6{width:19%;height:23%;left:42%;top:4%;transform:rotate(-2deg);z-index:7;}
  .collage-image--7{width:17%;height:22%;left:1%;bottom:3%;transform:rotate(-3deg);z-index:12;}
  .project-collage.flip .collage-image--1{left:5%;right:auto;transform:rotate(-3.5deg);}
  .project-collage.flip .collage-image--2{left:auto;right:3%;transform:rotate(6deg);}
  .project-collage.flip .collage-image--3{left:auto;right:17%;transform:rotate(-4deg);}
  .project-collage.flip .collage-image--4{left:22%;right:auto;transform:rotate(5deg);}
  .project-collage.flip .collage-image--5{left:2%;right:auto;transform:rotate(-7deg);}
  @media(max-width:860px){
    .project-collage{min-height:900px;padding:4rem 0;}
    .project-collage__copy,.project-collage.flip .project-collage__copy{position:relative;left:auto;right:auto;top:auto;width:75%;margin:0 auto 1rem;transform:rotate(-1deg);}
    .project-collage__images{position:absolute;top:24%;bottom:0;height:72%;}
    .collage-image--1{width:66%;height:45%;right:2%;top:0;}
    .collage-image--2{width:35%;height:30%;left:1%;top:3%;}
    .collage-image--3{width:38%;height:32%;left:8%;bottom:5%;}
    .collage-image--4{width:34%;height:28%;right:5%;bottom:4%;}
    .collage-image--5{width:30%;height:25%;right:0;bottom:30%;}
    .collage-image--6{width:25%;height:21%;left:43%;top:12%;}
    .collage-image--7{width:24%;height:20%;left:0;bottom:1%;}
  }


  /* ---------- WORK ---------- */
  .work h2{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(2rem,4.6vw,3.6rem); margin:.9rem 0 3.4rem; display:block;}
  .work h2 .hl{background:var(--yellow); padding:0 .1em; box-shadow:6px 0 0 var(--ink), -6px 0 0 var(--ink);}

  .project-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:clamp(1.6rem,3vw,2.6rem);
  }
  @media (max-width:640px){
    .project-grid{grid-template-columns:1fr;}
  }

  .project{position:relative; padding-top:1.4rem; border-top:3px solid var(--ink);}
  .project .cat{font-family:var(--hand); font-size:.8rem; display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; margin-bottom:.5rem; color:#fff;}
  .cat-icon{width:15px; height:15px; flex:0 0 auto;}
  .project:nth-child(4n+1) .cat{background:var(--pink);}
  .project:nth-child(4n+2) .cat{background:var(--teal); color:var(--ink);}
  .project:nth-child(4n+3) .cat{background:var(--ink);}
  .project:nth-child(4n+4) .cat{background:var(--yellow); color:var(--ink);}
  .project h3{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.005em; font-size:clamp(1rem,1.6vw,1.25rem); line-height:1.08; margin:0 0 .4rem;}
  .project p{color:#3a352c; font-size:.94rem; max-width:32rem; margin:0;}
  .project .motto{font-family:var(--hand); font-size:.85rem; color:var(--pink); display:block; margin-bottom:.3rem;}
  .project .num{position:absolute; top:1.4rem; right:0; font-family:var(--hand); font-size:1rem;}

  .abstract-vis{aspect-ratio:4/3; --accent:var(--pink); margin-bottom:1rem;}
  .abstract-vis img{width:100%; height:100%; object-fit:cover;}
  .project:nth-child(odd) .abstract-vis{transform:rotate(-1deg);}
  .project:nth-child(even) .abstract-vis{transform:rotate(.8deg);}

  /* ---------- CONTACT ---------- */
  .contact{color:#fff; overflow:hidden;}
  .contact .eyebrow-hand{color:var(--yellow);}
  .contact h2{font-family:var(--display); font-weight:400; text-transform:uppercase; color:#fff; font-size:clamp(2.1rem,7vw,4.6rem); margin:1rem 0 2rem; max-width:16ch; line-height:.98;}
  .maillink{font-family:var(--hand); font-size:clamp(1.2rem,2.8vw,1.7rem); text-decoration:none; color:#fff; display:inline-block;}
  .maillink .under{display:block; width:100%; height:8px; margin-top:4px; background:var(--yellow);}
  .social-row{display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:3rem; padding-top:1.6rem; border-top:4px solid rgba(255,255,255,.5); font-family:var(--hand); font-size:1rem;}
  .social-row a{text-decoration:none; color:#fff;}
  .social-row a:hover{color:var(--yellow);}

  footer{padding:1.4rem var(--edge) 2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--hand); font-size:.82rem; border-top:6px solid var(--ink);}

  /* project title now links to its own page */
  .project h3 a, .project-collage__copy h3 a{
    color:inherit; text-decoration:none;
    background-image:linear-gradient(var(--pink), var(--pink));
    background-repeat:no-repeat; background-size:100% 3px; background-position:0 100%;
    transition:background-size .25s ease, color .2s ease;
    padding-bottom:.08em;
  }
  .project h3 a:hover, .project h3 a:focus-visible,
  .project-collage__copy h3 a:hover, .project-collage__copy h3 a:focus-visible{
    background-size:100% 8px; color:var(--pink);
  }

  /* ---------- INDIVIDUAL PROJECT PAGE ---------- */
  .project-detail{min-height:100vh; padding:9rem var(--edge) 6rem;}
  .project-detail::after{content:""; display:table; clear:both;}
  .back-link{
    display:inline-flex; align-items:center; gap:.5rem; font-family:var(--hand); font-size:.95rem;
    text-decoration:none; color:var(--ink); margin-bottom:2.4rem;
  }
  .back-link:hover{color:var(--pink);}
  .detail-head{max-width:60rem; margin-bottom:2.6rem;}
  .detail-head .cat{font-family:var(--hand); font-size:.85rem; display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .6rem; margin-bottom:.8rem; color:#fff;}
  .detail-head .cat .cat-icon{width:17px; height:17px;}
  .detail-head h1{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.9rem,5vw,3.6rem); line-height:1; margin:0 0 .8rem;}
  .detail-head .motto{font-family:var(--hand); font-size:1.05rem; color:var(--pink); display:block; margin-bottom:.4rem;}
  .detail-figure{float:right; --accent:var(--teal); width:100%; max-width:480px; margin:0 0 2rem 3rem;}
  .detail-figure img{width:100%; height:auto; display:block;}
  .detail-body{max-width:42rem; font-size:1.02rem; color:#3a352c;}
  .detail-body p + p{margin-top:1rem;}

  .detail-gallery{
    float:right;
    width:58%;
    max-width:640px;
    margin:0 0 2rem 3rem;
    padding:.6rem 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
  }
  .detail-gallery figure{
    position:relative;
    margin:-.8rem -1.6rem 0;
    width:clamp(160px, 62%, 360px);
    box-shadow:9px 11px 0 rgba(20,20,20,.14);
    background:#fdfcf8;
    transition:transform .3s ease, z-index 0s;
  }
  .detail-gallery img{width:100%; height:auto; display:block;}
  .detail-gallery figure:hover{z-index:30 !important; transform:rotate(0deg) scale(1.04) !important;}
  .detail-gallery figure:nth-child(6n+1){transform:rotate(-3.6deg); z-index:5; margin-top:0;}
  .detail-gallery figure:nth-child(6n+2){transform:rotate(3deg); z-index:4; margin-top:2.6rem;}
  .detail-gallery figure:nth-child(6n+3){transform:rotate(-2deg); z-index:6; margin-top:-1.2rem;}
  .detail-gallery figure:nth-child(6n+4){transform:rotate(3.6deg); z-index:3; margin-top:1.8rem;}
  .detail-gallery figure:nth-child(6n+5){transform:rotate(-2.8deg); z-index:5; margin-top:.6rem;}
  .detail-gallery figure:nth-child(6n+6){transform:rotate(2deg); z-index:4; margin-top:-.8rem;}
  @media (max-width:760px){
    .detail-figure{float:none; max-width:100%; margin:0 0 2.4rem;}
    .detail-gallery{float:none; width:100%; max-width:100%; margin:0; display:block; padding:1rem 0 2rem;}
    .detail-gallery figure{width:88%; margin:-.6rem auto 1.8rem !important; display:block;}
  }