/* ============================================================
   THE DESK - a maker's scrapbook  ·  site 08 of 10
   paper #F6F1E7 · kraft #D9C7A7 · ink #2B2620 · blue #2456D6 · red #C0392B
   ============================================================ */

:root{
  --paper:#F6F1E7;
  --paper-lt:#FBF6EB;
  --board:#EDE1C4;
  --kraft:#D9C7A7;
  --ink:#2B2620;
  --ink-soft:#4A4238;
  --blue:#2456D6;
  --red:#C0392B;
  --card:#FFFDF6;
  --sticky-y1:#FFF3A9; --sticky-y2:#FFE97A;
  --sticky-p1:#FFD9E1; --sticky-p2:#FFC3D0;
  --shadow-s:0 2px 5px rgba(43,38,32,.12);
  --shadow-m:0 8px 18px rgba(43,38,32,.14), 0 2px 5px rgba(43,38,32,.10);
  --shadow-l:0 14px 30px rgba(43,38,32,.16), 0 3px 8px rgba(43,38,32,.10);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.26 0 0 0 0 0.21 0 0 0 0 0.14 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.14' numOctaves='3'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .55 .9 1 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;color:var(--ink);
  background-color:var(--paper);
  background-image:var(--noise);
  overflow-x:clip;
}
img{max-width:100%}
a{color:var(--blue)}
ul{list-style:none}
button{font:inherit;cursor:pointer}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:rgba(36,86,214,.22)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--blue);color:#fff;padding:10px 18px;font-weight:700;border-radius:4px;text-decoration:none}
.skip:focus{left:8px}

.wrap{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}

/* ---------- typography ---------- */
.h-marker{
  font-family:'Caveat',cursive;font-weight:700;line-height:1.02;
  color:var(--ink);letter-spacing:.5px;text-wrap:balance;
}
h1.h-marker{font-size:clamp(3.4rem,9vw,5.6rem)}
h2.h-marker{font-size:clamp(2.5rem,5.5vw,3.5rem)}
h2.h-small{font-size:clamp(2.1rem,4.5vw,2.7rem)}
.hand{font-family:'Patrick Hand',cursive;font-size:1.15rem;color:var(--ink-soft)}
.red-hand{color:var(--red)}

.underline{display:block;height:auto;width:min(440px,86%);margin:-4px 0 0 2px;overflow:visible}
.underline path{stroke-width:5;stroke-linecap:round}
.draw-blue{stroke:var(--blue)}
.draw-red{stroke:var(--red)}

/* ---------- top bar (kraft band) ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background-color:var(--kraft);
  background-image:var(--noise),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px);
  box-shadow:0 2px 10px rgba(43,38,32,.22);
  border-bottom:2px dashed rgba(43,38,32,.22);
}
.topnav{display:flex;align-items:center;gap:12px;min-height:58px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{
  font-family:'Caveat',cursive;font-weight:700;font-size:1.7rem;color:var(--ink);
  text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.brand-mark{
  font-family:'Patrick Hand',cursive;font-size:.95rem;letter-spacing:1px;
  background:var(--red);color:#fff;border-radius:50%;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  transform:rotate(-8deg);box-shadow:var(--shadow-s);
}
.navlinks{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;margin-left:auto}
.navlinks a{
  font-family:'Patrick Hand',cursive;font-size:1.1rem;color:var(--ink);
  text-decoration:none;padding:4px 6px;border-bottom:2px solid transparent;
}
.navlinks a:hover{border-bottom-color:var(--red)}
.navtab{
  font-family:'Patrick Hand',cursive;font-size:1.1rem;color:var(--ink);text-decoration:none;
  background:var(--card);box-shadow:var(--shadow-s);border-radius:3px 3px 0 0;
  padding:4px 12px !important;transform:rotate(-1deg);border-bottom:none !important;
}
.navtab:hover{background:#fff}
.navtab-hub{transform:rotate(1.2deg);color:var(--blue) !important}
.navback{margin-left:auto}  /* guide: keep the 'back to the desk' tab on the right at all widths */

/* ---------- sections & torn edges ---------- */
.sec{position:relative;padding:84px 0 96px;background-color:var(--paper);background-image:var(--noise)}
.sec-lt{background-color:var(--paper-lt)}
.sec-board{
  background-color:var(--board);
  background-image:var(--noise),radial-gradient(circle,rgba(43,38,32,.06) 1.2px,transparent 1.7px);
  background-size:260px 260px,21px 21px;
}
.sec-clients{padding-top:20px}
.torn-wrap{position:absolute;top:0;left:0;right:0;filter:drop-shadow(0 4px 3px rgba(43,38,32,.13));pointer-events:none}
.torn{
  height:26px;background-color:var(--tear,var(--paper));background-image:var(--noise);
  clip-path:polygon(0 0,100% 0,100% 55%,97.5% 78%,95% 52%,92% 85%,89% 60%,86% 92%,83% 55%,80% 80%,77% 48%,74% 88%,71% 62%,68% 95%,65% 58%,62% 82%,59% 50%,56% 90%,53% 60%,50% 78%,47% 46%,44% 92%,41% 64%,38% 84%,35% 52%,32% 94%,29% 58%,26% 80%,23% 50%,20% 88%,17% 62%,14% 90%,11% 54%,8% 82%,5% 48%,2.5% 75%,0 58%);
}

.sec-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:28px}
.sec-sub{margin:-14px 0 34px;font-size:1.2rem}
section{scroll-margin-top:84px}

/* ---------- stickers (AI-generated, white bg -> multiply) ---------- */
.sticker{mix-blend-mode:multiply;pointer-events:none}
.sticker-coffee{width:96px;transform:rotate(-7deg)}
.sticker-laptop{width:104px;transform:rotate(6deg)}
.sticker-rocket{
  position:absolute;right:4%;top:30px;width:clamp(90px,12vw,150px);
  transform:rotate(9deg);transform-origin:60% 70%;
  animation:rocketFloat 6.5s ease-in-out infinite;
}
@keyframes rocketFloat{
  0%,100%{transform:rotate(9deg) translateY(0)}
  50%{transform:rotate(6deg) translateY(-13px)}
}

/* ---------- washi tape ---------- */
.tape{
  position:absolute;width:110px;height:30px;opacity:.85;z-index:3;pointer-events:none;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.35) 0 2px,rgba(255,255,255,0) 2px 6px);
  background-color:var(--tape-c,rgba(36,86,214,.30));
  clip-path:polygon(2% 0,20% 3%,50% 0,80% 4%,98% 1%,100% 30%,97% 55%,100% 78%,98% 100%,70% 96%,40% 100%,10% 97%,3% 96%,0 70%,2.5% 45%,0 18%);
  box-shadow:0 1px 3px rgba(43,38,32,.20);
}
.tape-blue{--tape-c:rgba(36,86,214,.26)}
.tape-red{--tape-c:rgba(192,57,43,.28)}
.tape-y{--tape-c:rgba(202,158,42,.32)}
.tape-tl{top:-14px;left:-26px;transform:rotate(-38deg)}
.tape-tr{top:-14px;right:-26px;transform:rotate(35deg)}
.tape-top{top:-16px;left:50%;transform:translateX(-50%) rotate(-2deg)}

/* ---------- hero ---------- */
.sec-hero{padding:96px 0 120px;min-height:62vh}
.hero-inner{position:relative}
.hero-tape{top:-40px;left:-8px;transform:rotate(-8deg);width:140px}
.hero-hello{font-size:1.35rem;margin-bottom:6px;transform:rotate(-1deg)}
.hero-name{max-width:14ch;text-shadow:0 2px 0 rgba(43,38,32,.06),0 1px 1px rgba(255,255,255,.5)}

/* hero ambient doodles (pass 2) - fill the empty right column */
.hero-doodle{position:absolute;pointer-events:none;z-index:0}
.coffee-ring{
  right:12%;top:44%;width:132px;height:132px;border-radius:50%;
  background:radial-gradient(closest-side,transparent 77%,rgba(120,72,40,.15) 79% 89%,transparent 92%);
  transform:rotate(-8deg) scaleY(.95);
  animation:ringFade 9s ease-in-out infinite;
}
.coffee-ring::after{
  content:"";position:absolute;inset:7px 5px 11px 9px;border-radius:50%;
  background:radial-gradient(closest-side,transparent 80%,rgba(120,72,40,.11) 81% 91%,transparent 93%);
  transform:rotate(7deg);
}
@keyframes ringFade{0%,100%{opacity:.85}50%{opacity:1}}
.doodle-star{width:var(--sz,26px);height:var(--sz,26px);overflow:visible}
.doodle-star path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.star-1{right:9%;top:17%;--sz:30px;animation:twinkle 4.5s ease-in-out infinite}
.star-1 path{stroke:var(--blue)}
.star-2{right:22%;top:62%;--sz:19px;animation:twinkle 5.5s ease-in-out .8s infinite}
.star-2 path{stroke:var(--red)}
.star-3{right:6%;top:40%;--sz:15px;animation:twinkle 6s ease-in-out .4s infinite}
.star-3 path{stroke:var(--ink)}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.22) rotate(9deg)}}
.role-strip{
  display:inline-block;margin-top:26px;
  font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.95rem;
  background:var(--card);padding:8px 18px;box-shadow:var(--shadow-s);
  transform:rotate(-1.2deg);border:1px solid rgba(43,38,32,.08);
}
.tagline{max-width:46ch;margin-top:20px;font-size:1.16rem;color:var(--ink-soft);text-wrap:pretty}
.hero-cta{display:flex;gap:22px;flex-wrap:wrap;margin-top:36px;align-items:center}
.hero-note{position:relative;display:flex;align-items:flex-end;gap:6px;margin-left:26px;margin-top:4px}
.hero-note .arrow-svg{width:60px;height:47px;overflow:visible}
.hero-note .arrow-svg path{stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hero-note .hand{transform:rotate(-4deg) translateY(4px);font-size:1.2rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:'Patrick Hand',cursive;font-size:1.25rem}
.btn-slip{
  position:relative;background:var(--card);color:var(--ink);padding:12px 22px 12px 34px;
  box-shadow:var(--shadow-m);transform:rotate(-1deg);border:1px solid rgba(43,38,32,.08);
}
.btn-slip:hover{box-shadow:var(--shadow-l)}
.btn-slip .clip{position:absolute;left:6px;top:-12px;width:20px;height:38px;transform:rotate(14deg)}
.btn-marker{
  color:var(--blue);padding:10px 22px;border:3px solid var(--blue);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  transform:rotate(.6deg);background:transparent;
}
.btn-marker:hover{background:rgba(36,86,214,.08)}

/* ---------- about: notebook + stickies ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .95fr;gap:56px;align-items:start}
.notebook{
  position:relative;background:#FFFEFA;box-shadow:var(--shadow-m);
  padding:34px 34px 26px 64px;
  background-image:
    linear-gradient(90deg,transparent 44px,rgba(192,57,43,.35) 44px,rgba(192,57,43,.35) 46px,transparent 46px),
    repeating-linear-gradient(180deg,transparent 0 27px,#CBDCF3 27px 28px);
  line-height:28px;
}
.notebook::before{
  content:"";position:absolute;left:9px;top:52px;bottom:26px;width:18px;pointer-events:none;
  background-image:radial-gradient(circle at 9px 9px,
     rgba(43,38,32,.16) 0 4px,
     rgba(43,38,32,.34) 4px 5.4px,
     rgba(0,0,0,0) 5.4px);
  background-size:18px 90px;background-repeat:repeat-y;
  filter:drop-shadow(0 1px 0.5px rgba(255,255,255,.6));
}
.notebook p{font-size:17px;line-height:28px;text-wrap:pretty}
.notebook-ps{margin-top:28px;transform:rotate(-1deg);color:var(--ink-soft)}

.stickies{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 22px;padding-top:6px}
.sticky{
  position:relative;padding:16px 16px 18px;min-height:118px;
  box-shadow:0 8px 14px rgba(43,38,32,.15);
}
.sticky::before{
  content:"";position:absolute;z-index:-1;bottom:7px;left:10px;right:52%;height:12px;
  box-shadow:0 7px 9px rgba(43,38,32,.30);transform:rotate(-3deg);
}
.sticky-y{background:linear-gradient(180deg,var(--sticky-y1),var(--sticky-y2))}
.sticky-p{background:linear-gradient(180deg,var(--sticky-p1),var(--sticky-p2))}
.sticky .fact-label{
  display:block;font-family:'Patrick Hand',cursive;font-size:.92rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(43,38,32,.62);
}
.sticky .fact-value{
  display:block;font-family:'Caveat',cursive;font-weight:700;font-size:1.72rem;line-height:1.1;
  margin-top:8px;color:var(--ink);
}
.sticky-circle{position:absolute;inset:-8px 14px -8px -34px;pointer-events:none}
.sticky-circle svg{width:100%;height:100%;overflow:visible}
.sticky-circle path{stroke:var(--red);stroke-width:3.4;stroke-linecap:round;fill:none;opacity:.85}
.sticky-note{
  position:absolute;right:-8px;bottom:-30px;font-size:1.3rem;transform:rotate(-6deg);white-space:nowrap;
}

/* ---------- skills: sticker badges ---------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:30px 18px;max-width:980px}
.badge{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badge-circle{
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#4A4238,#2B2620 72%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-m);border:2px dashed rgba(246,241,231,.45);
  outline:6px solid #FFFEFA;position:relative;
}
.badge img{width:48px;height:48px;object-fit:contain}
.badge img.inv{filter:invert(1)}
.tag img.inv-dark{filter:invert(.88) sepia(.15)}
.badge-name{font-family:'Patrick Hand',cursive;font-size:1.08rem;color:var(--ink)}
.badge-fav .badge-circle::after{
  content:"♥";position:absolute;top:-6px;right:-2px;color:var(--red);
  font-size:1.25rem;transform:rotate(12deg);
}
.skill-note{
  display:flex;align-items:center;justify-content:flex-start;
  font-size:1.22rem;transform:rotate(-3deg);color:var(--red);line-height:1.25;padding-top:24px;
}

/* ---------- clients: taped label cards ---------- */
.tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:34px 24px;margin-top:12px}
.tag{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  background:#FFFEFA;padding:28px 16px 16px;box-shadow:var(--shadow-m);
  text-decoration:none;border:1px solid rgba(43,38,32,.06);
}
.tag:hover{box-shadow:var(--shadow-l)}
.tag img{height:36px;max-width:130px;object-fit:contain}
.tag-name{font-family:'Patrick Hand',cursive;font-size:1.05rem;color:var(--ink-soft)}
.tag .tape{width:84px;height:24px;top:-12px;left:50%;transform:translateX(-50%) rotate(-2.5deg)}

/* ---------- certifications ---------- */
.certs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:940px}
.cert{
  position:relative;background:var(--card);padding:34px 36px 40px;
  border:2px solid #CBB98D;box-shadow:var(--shadow-m);
}
.cert::before{content:"";position:absolute;inset:7px;border:1px solid #DECFA9;pointer-events:none}
.cert-range{font-family:'Patrick Hand',cursive;font-size:1rem;letter-spacing:.06em;color:var(--ink-soft)}
.cert-title{font-family:'Caveat',cursive;font-weight:700;font-size:2rem;line-height:1.1;margin:10px 0 6px}
.cert-issuer{font-size:16px;color:var(--ink-soft)}
.cert-link{
  display:inline-block;margin-top:16px;font-family:'Patrick Hand',cursive;font-size:1.12rem;
  color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px;
}
.wax{
  position:absolute;right:22px;bottom:-18px;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Caveat',cursive;font-weight:700;font-size:1.5rem;color:#FFD9D3;
  background:radial-gradient(circle at 36% 30%,#DA6558,#C0392B 55%,#8E271B 100%);
  border-radius:47% 53% 51% 49%/52% 48% 54% 46%;
  box-shadow:0 4px 8px rgba(43,38,32,.3),inset 0 2px 4px rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.25);
  transform:rotate(-10deg);
}
.wax::before{content:"";position:absolute;inset:9px;border:1.5px dashed rgba(255,220,210,.55);border-radius:inherit}

/* ---------- projects board ---------- */
.nda{
  position:relative;max-width:560px;margin:8px auto 60px;z-index:6;
  background:linear-gradient(180deg,#EADCB9,#E2D0A6);
  padding:30px 30px 20px;box-shadow:var(--shadow-m);
  font-family:'Patrick Hand',cursive;font-size:1.13rem;line-height:1.55;color:#42371F;text-wrap:pretty;
}
.nda-tag{
  position:absolute;top:-12px;right:26px;background:var(--red);color:#fff;
  font-size:.95rem;letter-spacing:.1em;padding:2px 12px;transform:rotate(-3deg);
  box-shadow:var(--shadow-s);
}
.board{position:relative}
.string{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;overflow:visible}
.string-shadow{stroke:rgba(43,38,32,.18);stroke-width:3;transform:translate(2px,3px)}
.string-line{stroke:var(--red);stroke-width:2.6}
.pin{position:absolute;top:12px;left:50%;width:2px;height:2px}
.nda .pin{left:12%;top:10px}
.pin-shadow{fill:rgba(43,38,32,.22)}

.case{display:flex;gap:clamp(22px,4.5vw,48px);align-items:flex-start;margin:70px 0;position:relative}
.case-flip{flex-direction:row-reverse}
.case:nth-of-type(odd) .polaroid{margin-top:14px}

.polaroid{
  position:relative;flex:0 0 auto;width:min(320px,100%);
  background:#FFFEFA;padding:12px 12px 12px;
  box-shadow:0 10px 22px rgba(43,38,32,.20),0 2px 5px rgba(43,38,32,.12);
  cursor:grab;touch-action:pan-y;border:1px solid rgba(43,38,32,.05);
  z-index:2;
}
.polaroid img{width:100%;height:200px;object-fit:cover;display:block;background:#E7E2D6;filter:saturate(.94) contrast(1.02);pointer-events:none}
.pol-caption{
  font-family:'Caveat',cursive;font-weight:700;font-size:1.65rem;text-align:center;
  margin-top:8px;transform:rotate(-1deg);color:var(--ink);
}
.polaroid.dragging{cursor:grabbing;box-shadow:0 30px 48px rgba(43,38,32,.30),0 6px 14px rgba(43,38,32,.16);z-index:30}

.case-card{
  position:relative;flex:1;min-width:0;background:#FFFEF8;
  padding:24px 26px 22px;box-shadow:var(--shadow-m);z-index:6;
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,#E7EEf9 27px 28px);
}
.case-card::before{content:"";position:absolute;left:0;right:0;top:50px;height:2px;background:rgba(192,57,43,.28)}
.case-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.case-head h3{font-family:'Caveat',cursive;font-weight:700;font-size:2.1rem;line-height:1}
.case-visit{font-family:'Patrick Hand',cursive;font-size:1.12rem;white-space:nowrap;text-decoration-thickness:2px;text-underline-offset:4px}
.case-role{margin-top:14px;font-size:16px}
.case-role .hand{color:var(--red);margin-right:6px}
.case-role strong{font-weight:700}
.case-desc{margin-top:6px;font-size:16.5px;line-height:28px;color:var(--ink-soft);text-wrap:pretty}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.stack li{
  font-family:'Patrick Hand',cursive;font-size:.98rem;line-height:1.3;
  padding:3px 12px;background:var(--kraft);color:#42371F;border-radius:3px;
  box-shadow:0 1px 2px rgba(43,38,32,.22);transform:rotate(-1deg);
}
.stack li:nth-child(even){transform:rotate(1.2deg)}
.marks{margin-top:10px}
.marks li{position:relative;padding-left:28px;font-size:16.5px;line-height:28px}
.marks li::before{
  content:"✓";position:absolute;left:2px;top:0;color:var(--blue);
  font-family:'Caveat',cursive;font-weight:700;font-size:1.35rem;
}

/* ---------- contact: postcard ---------- */
.postcard{
  position:relative;background:var(--card);border:1px solid #E5DAC2;
  box-shadow:var(--shadow-l);padding:30px;max-width:880px;margin:0 auto;
}
.pc-grid{display:grid;grid-template-columns:1.15fr 2px 1fr;gap:28px}
.pc-divider{background:repeating-linear-gradient(180deg,#C9BC9C 0 8px,transparent 8px 15px)}
.pc-label{display:block;font-size:1.08rem;color:var(--ink-soft);margin-bottom:2px}
.postcard textarea{
  width:100%;border:none;background:transparent;resize:vertical;min-height:216px;
  font-family:'Patrick Hand',cursive;font-size:1.22rem;line-height:30px;color:#1d3f9e;
  background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(36,86,214,.22) 29px 30px);
  padding:0 2px;
}
.postcard textarea::placeholder,.postcard input::placeholder{color:rgba(43,38,32,.38)}
.postcard input{
  width:100%;border:none;border-bottom:2px solid rgba(43,38,32,.30);background:transparent;
  font-family:'Patrick Hand',cursive;font-size:1.18rem;color:#1d3f9e;padding:2px 2px 4px;margin-bottom:14px;
}
.postcard input:focus-visible,.postcard textarea:focus-visible{outline-offset:1px}
.pc-corner{display:flex;justify-content:flex-end;align-items:flex-start;position:relative;margin-bottom:16px;min-height:104px}
.postmark{position:absolute;right:54px;top:-4px;width:210px;height:104px;overflow:visible}
.pm-text{font-family:'Patrick Hand',cursive;font-size:11.5px;letter-spacing:2.5px;fill:var(--ink)}
.pm-date{font-family:'Patrick Hand',cursive;font-size:14px;fill:var(--ink)}
.stamp{
  --pc:#FFFDF6;
  position:relative;width:86px;padding:8px;flex:0 0 auto;
  background-color:#E3EAF9;
  background-image:
    radial-gradient(circle at 50% 0,var(--pc) 2.7px,rgba(0,0,0,0) 3.2px),
    radial-gradient(circle at 50% 100%,var(--pc) 2.7px,rgba(0,0,0,0) 3.2px),
    radial-gradient(circle at 0 50%,var(--pc) 2.7px,rgba(0,0,0,0) 3.2px),
    radial-gradient(circle at 100% 50%,var(--pc) 2.7px,rgba(0,0,0,0) 3.2px);
  background-size:11px 7px,11px 7px,7px 11px,7px 11px;
  background-position:top,bottom,left,right;
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  transform:rotate(2deg);box-shadow:var(--shadow-s);
}
.stamp img{display:block;width:100%;background:#fff;padding:5px}
.stamp-year{
  display:block;text-align:center;font-family:'Patrick Hand',cursive;font-size:.8rem;
  letter-spacing:.2em;color:#3D4C77;margin-top:3px;
}
.pc-to{margin:6px 0 18px;font-size:1.12rem}
.mail-btn{
  font-family:'Caveat',cursive;font-weight:700;font-size:1.6rem;letter-spacing:.04em;
  color:var(--red);background:transparent;border:3px solid var(--red);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  padding:8px 26px;transform:rotate(-1deg);
}
.mail-btn:hover:not(:disabled){background:rgba(192,57,43,.08)}
.mail-btn:disabled{opacity:.55;cursor:wait}
.field-err{color:var(--red);font-size:1.02rem;margin:-8px 0 10px;transform:rotate(-.5deg)}
.pc-left .field-err{margin-top:6px}
.form-status{margin-top:14px;font-family:'Patrick Hand',cursive;font-size:1.2rem;min-height:1.4em}
.form-status.ok{color:#1E7A34}
.form-status.bad{color:var(--red)}
.sent-stamp{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(2.6rem,7vw,4rem);
  letter-spacing:.16em;color:var(--red);border:6px solid var(--red);border-radius:12px;
  padding:8px 30px 10px;pointer-events:none;
  -webkit-mask-image:var(--grunge);mask-image:var(--grunge);
  -webkit-mask-size:220px;mask-size:220px;
}
.postcard.is-sent textarea,.postcard.is-sent input{opacity:.45}
.alt-mail{text-align:center;margin-top:30px;font-size:1.2rem}
.alt-mail a{color:var(--blue)}
.elsewhere{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:34px}
.tab-link{
  position:relative;display:inline-block;background:#FFFEFA;box-shadow:var(--shadow-s);
  font-family:'Patrick Hand',cursive;font-size:1.12rem;color:var(--ink);
  text-decoration:none;padding:10px 20px;transform:rotate(-1.4deg);
  border-top:8px solid rgba(36,86,214,.25);
}
.elsewhere li:nth-child(2) .tab-link{transform:rotate(1.2deg);border-top-color:rgba(192,57,43,.28)}
.elsewhere li:nth-child(3) .tab-link{transform:rotate(-.6deg);border-top-color:rgba(202,158,42,.35)}
.tab-link:hover{box-shadow:var(--shadow-m);color:var(--blue)}

/* ---------- footer ---------- */
.site-foot{
  position:relative;background-color:var(--kraft);background-image:var(--noise);
  padding:76px 0 44px;margin-top:0;
}
.foot-inner{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot-copy{font-weight:700}
.foot-hand{transform:rotate(-1deg)}
.foot-links a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:4px}
.foot-links a:hover{color:var(--blue)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .about-grid{grid-template-columns:1fr;gap:64px}
  .certs{grid-template-columns:1fr;gap:44px}
}
@media (max-width:760px){
  /* nav wraps to a taller sticky header here - keep anchored headings clear of it */
  section{scroll-margin-top:132px}
  /* fatten nav tap targets to the 44px minimum on touch screens */
  .navlinks a{padding-top:9px;padding-bottom:9px}
  .navtab{padding-top:9px !important;padding-bottom:9px !important}
  .sec{padding:64px 0 72px}
  .sec-hero{padding:72px 0 96px}
  .case,.case-flip{flex-direction:column;align-items:center;margin:56px 0}
  .case .polaroid{margin-top:0 !important}
  .case-card{width:100%}
  .pc-grid{grid-template-columns:1fr}
  .pc-divider{height:2px;background:repeating-linear-gradient(90deg,#C9BC9C 0 8px,transparent 8px 15px)}
  .postmark{right:44px;width:180px}
  .hero-note{display:none}
  .coffee-ring,.doodle-star{display:none}
  .sticker-rocket{top:auto;bottom:-40px;right:2%}
  .stickies{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .foot-inner{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:600px){
  /* row 1: brand (left) + 'how it was made' tab (right); row 2: section links */
  .topnav{align-items:center;gap:6px 10px;min-height:0;padding-top:10px;padding-bottom:10px}
  .brand{order:1;font-size:1.5rem}
  .navtab{order:2;margin-left:auto}
  .navlinks{order:3;flex-basis:100%;width:100%;margin-left:0;justify-content:center;gap:4px 18px;
    border-top:2px dashed rgba(43,38,32,.22);padding-top:8px}
  section{scroll-margin-top:148px}
}
@media (max-width:480px){
  .badges{gap:24px 10px;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .badge-circle{width:84px;height:84px}
  .badge img{width:40px;height:40px}
  .tags{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .notebook{padding:28px 22px 22px 56px}
  .postcard{padding:22px}
}

/* ---------- microinteractions (pass 2) ----------
   every interactive card lifts on hover. .settle elements carry an inline
   rotation from GSAP, so their lift is applied to inner children (which have
   no inline transform) rather than the rotated wrapper itself. */
.navtab,.btn,.mail-btn,.tab-link,.case-visit,.cert-link,
.badge-circle,.badge-name,.tag,.tag img,.tag-name,.cert,.wax,
.polaroid,.polaroid img,.case-card,.pol-caption{
  transition:transform .28s cubic-bezier(.2,.72,.24,1),
             box-shadow .28s ease,background-color .2s ease,
             color .2s ease,filter .28s ease;
}

/* nav tabs + hero buttons - genuine lift (their rotation lives in CSS) */
.navtab:hover{transform:rotate(-1deg) translateY(-3px)}
.navtab-hub:hover{transform:rotate(1.2deg) translateY(-3px)}
.btn-slip:hover{transform:rotate(-1deg) translateY(-3px)}
.btn-marker:hover{transform:rotate(.6deg) translateY(-3px)}
.mail-btn:hover:not(:disabled){transform:rotate(-1deg) translateY(-3px)}

/* skill badges - pop the sticker disc, wink the heart */
.badge:hover .badge-circle{transform:translateY(-7px) scale(1.06) rotate(-3deg);box-shadow:var(--shadow-l)}
.badge:hover .badge-name{color:var(--blue)}

/* client cards - brighten paper, inner logo floats up */
.tag:hover{background:#fff}
.tag:hover img{transform:translateY(-5px) scale(1.07)}
.tag:hover .tag-name{transform:translateY(-2px);color:var(--ink)}

/* certificates - lift, and the wax seal presses harder */
.cert:hover{box-shadow:var(--shadow-l)}
.cert:hover .wax{transform:rotate(-4deg) scale(1.08)}
.wax{transition:transform .3s cubic-bezier(.2,.72,.24,1)}
.cert-link:hover,.case-visit:hover{color:var(--red)}

/* polaroids - hover peek (a live drag owns the transform) */
.polaroid:hover{box-shadow:0 18px 34px rgba(43,38,32,.26),0 4px 10px rgba(43,38,32,.14)}
.polaroid:hover img{transform:scale(1.035);filter:saturate(1.02) contrast(1.05) brightness(1.03)}
.polaroid.dragging img{transform:none;filter:saturate(.94) contrast(1.02)}
.polaroid:hover .pol-caption{color:var(--blue)}

/* case cards + secondary tab links */
.case-card:hover{box-shadow:var(--shadow-l)}
.tab-link:hover{transform:rotate(-1.4deg) translateY(-3px)}
.elsewhere li:nth-child(2) .tab-link:hover{transform:rotate(1.2deg) translateY(-3px)}
.elsewhere li:nth-child(3) .tab-link:hover{transform:rotate(-.6deg) translateY(-3px)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}