/* ============ THE DESK ============ */
:root{
  --desk:#191423;
  --desk-2:#211a2e;
  --paper:#fbf6ea;
  --paper-2:#f4ecd9;
  --ink:#2b2338;
  --ink-soft:#5c5370;
  --pen-red:#e84a4a;
  --pen-blue:#3d5bdc;
  --note-lemon:#ffe89b;
  --note-mint:#c9f0d9;
  --note-peach:#ffd3b0;
  --note-lilac:#ded4ff;
  --hi-yellow:rgba(255,225,100,.55);
  --hi-mint:rgba(120,230,180,.45);
  --hi-lilac:rgba(190,170,255,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--desk);
  background-image:
    radial-gradient(900px 700px at 80% -10%, rgba(120,90,200,.10), transparent 60%),
    radial-gradient(700px 600px at 0% 60%, rgba(80,160,200,.07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  color:var(--paper);
  font-family:'Bricolage Grotesque',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--pen-red);color:#fff}
a{color:inherit;text-decoration:none}
.hand{font-family:'Caveat',cursive}
.mono{font-family:'Space Mono',monospace}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:100px 0;position:relative}

/* ============ PAPER PHYSICS ============ */
.paper{
  background:var(--paper);
  color:var(--ink);
  border-radius:4px;
  box-shadow:0 2px 3px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);
  position:relative;
}
.torn{
  border-radius:4px;
  clip-path:polygon(0 6px,3% 0,8% 5px,14% 1px,22% 6px,30% 0,38% 5px,46% 1px,54% 6px,62% 0,70% 5px,78% 2px,86% 6px,93% 0,100% 5px,100% calc(100% - 5px),94% 100%,86% calc(100% - 6px),77% 100%,68% calc(100% - 4px),59% 100%,50% calc(100% - 6px),41% 100%,32% calc(100% - 4px),23% 100%,14% calc(100% - 6px),7% 100%,0 calc(100% - 4px));
}
.tape{
  position:absolute;width:110px;height:32px;
  background:rgba(255,255,255,.28);
  border-left:1px dashed rgba(255,255,255,.4);
  border-right:1px dashed rgba(255,255,255,.4);
  backdrop-filter:blur(1px);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.tape.tl{top:-14px;left:8%;transform:rotate(-8deg)}
.tape.tr{top:-14px;right:8%;transform:rotate(6deg)}
.tape.tc{top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg)}
.pin{
  position:absolute;top:-10px;left:50%;width:22px;height:22px;border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 35% 30%,#ff8f8f,var(--pen-red) 60%,#a32020);
  box-shadow:0 3px 5px rgba(0,0,0,.4);
}
.clip{
  position:absolute;top:-16px;right:26px;width:24px;height:52px;
  border:3px solid #9aa4b8;border-radius:12px 12px 4px 4px;
  border-bottom:none;transform:rotate(4deg);
}
.lined{
  background-image:repeating-linear-gradient(transparent,transparent 31px,rgba(61,91,220,.18) 31px,rgba(61,91,220,.18) 32px);
  background-position:0 14px;
}
.stain{
  position:absolute;width:90px;height:90px;border-radius:50%;
  border:14px solid rgba(120,72,30,.16);
  filter:blur(.5px);pointer-events:none;
}
mark{background:none;padding:0 2px;border-radius:2px}
mark.y{background:linear-gradient(180deg,transparent 35%,var(--hi-yellow) 35%,var(--hi-yellow) 92%,transparent 92%)}
mark.m{background:linear-gradient(180deg,transparent 35%,var(--hi-mint) 35%,var(--hi-mint) 92%,transparent 92%)}
mark.l{background:linear-gradient(180deg,transparent 35%,var(--hi-lilac) 35%,var(--hi-lilac) 92%,transparent 92%)}

/* ============ NAV ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(25,20,35,.8);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(251,246,234,.1)}
.nav-in{max-width:1080px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.logo .hand{color:var(--note-lemon);font-size:1.3rem;margin-left:2px}
.nav-links{display:flex;gap:24px;align-items:center;font-size:.92rem}
.nav-links>a{opacity:.85;transition:.2s;position:relative}
.nav-links>a:not(.nav-cta):hover{opacity:1}
.nav-links>a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:3px;
  background:var(--pen-red);border-radius:2px;transition:right .25s;transform:rotate(-1deg)}
.nav-links>a:not(.nav-cta):hover::after{right:0}
.nav-cta{background:var(--note-lemon);color:var(--ink);padding:7px 16px;border-radius:3px;
  font-weight:600;box-shadow:2px 2px 0 rgba(0,0,0,.35);transform:rotate(-1.5deg);transition:.2s}
.nav-cta:hover{transform:rotate(1deg) scale(1.05)}
.burger{display:none;background:none;border:none;color:var(--paper);font-size:1.5rem;cursor:pointer}

/* ============ HERO ============ */
.hero{padding:150px 0 60px;min-height:96vh;display:flex;align-items:center}
.hero-sheet{width:100%;padding:64px 58px 72px;transform:rotate(-.8deg)}
.hero-sheet .stain{top:26px;right:40px}
.eyebrow{font-family:'Space Mono';font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px}
.eyebrow b{color:var(--pen-red);font-weight:400}
.hero h1{font-size:clamp(2.5rem,6.5vw,4.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink);max-width:850px}
.scrawl{
  font-family:'Caveat';font-weight:700;color:var(--pen-red);
  display:inline-block;transform:rotate(-3deg);position:relative;
  font-size:1.18em;line-height:.9;
}
.scrawl svg{position:absolute;left:-6%;bottom:-14px;width:112%;height:22px;overflow:visible}
.scrawl svg path{stroke:var(--pen-red);stroke-width:3.5;fill:none;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.2s .5s forwards ease-out}
@keyframes draw{to{stroke-dashoffset:0}}
.hero p.sub{margin:26px 0 8px;max-width:560px;font-size:1.1rem;color:var(--ink-soft)}
.hero-note{
  font-family:'Caveat';font-size:1.35rem;color:var(--pen-blue);
  transform:rotate(-1.5deg);display:inline-block;margin:10px 0 30px;
}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.btn{font-weight:700;padding:13px 26px;font-size:.95rem;cursor:pointer;border:none;
  border-radius:3px;transition:.2s;display:inline-block;font-family:'Bricolage Grotesque'}
.btn-red{background:var(--pen-red);color:#fff;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1deg)}
.btn-red:hover{transform:rotate(1deg) translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-line{background:transparent;color:var(--ink);border:2px solid var(--ink);transform:rotate(.5deg)}
.btn-line:hover{background:var(--ink);color:var(--paper);transform:rotate(-1deg)}
.doodle-arrow{position:absolute;pointer-events:none}
.doodle-arrow path{stroke:var(--note-lemon);stroke-width:3;fill:none;stroke-linecap:round}
.hero-margin{
  position:absolute;right:-14px;top:110px;transform:rotate(90deg);transform-origin:right top;
  font-family:'Space Mono';font-size:.7rem;letter-spacing:.3em;color:var(--ink-soft);opacity:.6;
}

/* draggable stickers */
.stickerbox{position:relative;margin-top:46px;min-height:70px}
.stk{
  position:absolute;font-family:'Caveat';font-weight:700;font-size:1.25rem;
  padding:8px 18px;border-radius:999px;cursor:grab;user-select:none;touch-action:none;
  box-shadow:2px 3px 0 rgba(0,0,0,.3);color:var(--ink);
}
.stk:active{cursor:grabbing;z-index:20}
.stk-hint{font-family:'Space Mono';font-size:.68rem;letter-spacing:.1em;color:var(--ink-soft);opacity:.55;position:absolute;right:0;bottom:-8px}

/* ============ SECTION HEADS ============ */
.sec-tab{
  display:inline-block;background:var(--note-lemon);color:var(--ink);
  font-family:'Space Mono';font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 18px;border-radius:3px 3px 0 0;transform:rotate(-1deg);
  box-shadow:2px -1px 0 rgba(0,0,0,.25);margin-bottom:-4px;position:relative;z-index:2;
}
h2.sec{font-size:clamp(1.8rem,3.8vw,2.7rem);font-weight:800;letter-spacing:-.02em;margin:18px 0 40px}
h2.sec .hand{color:var(--note-peach);font-size:1.25em}

/* reveal */
.rv{opacity:0;transform:translateY(28px) rotate(0deg);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:translateY(0)}

/* ============ ABOUT — notebook page ============ */
.about-page{padding:54px 50px;transform:rotate(.6deg)}
.about-page .clip{display:block}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px}
.about-grid p{margin-bottom:16px;font-size:1.05rem;color:var(--ink);line-height:2}
.about-me-note{
  background:var(--note-mint);padding:26px 22px;transform:rotate(2deg);
  box-shadow:3px 4px 0 rgba(0,0,0,.25);position:relative;height:fit-content;
}
.about-me-note::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:90px;height:26px;background:rgba(255,255,255,.45);border-left:1px dashed rgba(0,0,0,.1);border-right:1px dashed rgba(0,0,0,.1)}
.about-me-note h3{font-family:'Caveat';font-size:1.5rem;color:var(--ink);margin-bottom:12px}
.about-me-note li{list-style:none;font-family:'Caveat';font-size:1.3rem;color:var(--ink);padding:3px 0}
.about-me-note li::before{content:"→ ";color:var(--pen-red)}

/* ============ WRITING — torn scraps ============ */
.feat{
  display:block;padding:40px 44px;margin-bottom:34px;transform:rotate(-.7deg);transition:.25s;
}
.feat:hover{transform:rotate(.3deg) translateY(-5px)}
.feat .meta,.scrap .meta{font-family:'Space Mono';font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:12px;text-transform:uppercase}
.feat .meta b{color:var(--pen-red);font-weight:400}
.feat h3{font-size:1.5rem;font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
.feat p{color:var(--ink-soft);max-width:640px}
.readmore{display:inline-block;margin-top:16px;font-family:'Caveat';font-weight:700;font-size:1.3rem;color:var(--pen-blue);transition:transform .2s}
.feat:hover .readmore,.scrap:hover .readmore{transform:translateX(8px) rotate(-2deg)}
.scraps{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.scrap{display:block;padding:30px 32px;transition:.25s;background:var(--paper-2)}
.scrap:nth-child(1){transform:rotate(.8deg)}
.scrap:nth-child(2){transform:rotate(-1deg)}
.scrap:nth-child(3){transform:rotate(-.5deg)}
.scrap:nth-child(4){transform:rotate(1deg)}
.scrap:hover{transform:rotate(0) translateY(-6px)!important}
.scrap h3{font-size:1.08rem;font-weight:800;color:var(--ink);margin-bottom:10px}
.scrap p{color:var(--ink-soft);font-size:.94rem}
.viewall{
  display:inline-block;margin-top:36px;font-family:'Caveat';font-weight:700;font-size:1.5rem;
  color:var(--note-lemon);transform:rotate(-1deg);transition:.2s;
}
.viewall:hover{transform:rotate(1deg) scale(1.06)}

/* ============ PROJECTS — index cards ============ */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.icard{
  padding:30px 30px 26px;transition:.25s;display:block;
  background-image:linear-gradient(var(--pen-red) 0 2px,transparent 2px),
    repeating-linear-gradient(transparent,transparent 27px,rgba(61,91,220,.16) 27px,rgba(61,91,220,.16) 28px);
  background-position:0 52px,0 60px;background-repeat:no-repeat,repeat;
}
.icard:nth-child(1){transform:rotate(-1deg)}
.icard:nth-child(2){transform:rotate(1.2deg)}
.icard:nth-child(3){transform:rotate(.6deg)}
.icard:nth-child(4){transform:rotate(-.9deg)}
.icard:hover{transform:rotate(0) scale(1.03)!important;z-index:3}
.icard .kind{font-family:'Space Mono';font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.icard h3{font-size:1.2rem;font-weight:800;color:var(--ink);margin:14px 0 10px}
.icard p{color:var(--ink-soft);font-size:.95rem;margin-bottom:16px}
.stamp{
  display:inline-block;font-family:'Space Mono';font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border:2px solid var(--pen-red);color:var(--pen-red);border-radius:4px;padding:4px 10px;
  transform:rotate(-3deg);opacity:.85;
}

/* ============ PODCAST — cassette ============ */
.pod-wrap{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;
  padding:46px 48px;transform:rotate(-.5deg)}
.cassette{
  width:210px;height:134px;background:var(--ink);border-radius:10px;position:relative;
  box-shadow:4px 5px 0 rgba(0,0,0,.35);transform:rotate(2deg);flex-shrink:0;
}
.cassette .label{
  position:absolute;inset:12px 12px 44px;background:var(--note-peach);border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Caveat';font-weight:700;font-size:1.15rem;color:var(--ink);text-align:center;line-height:1.1;padding:0 8px;
}
.cassette .reel{
  position:absolute;bottom:10px;width:26px;height:26px;border-radius:50%;
  border:5px solid var(--paper);background:var(--ink);animation:spin 3s linear infinite;
}
.cassette .reel::before{content:"";position:absolute;top:-5px;left:50%;width:3px;height:6px;background:var(--ink);transform:translateX(-50%)}
.cassette .reel.l{left:44px}.cassette .reel.r{right:44px;animation-duration:2.6s}
@keyframes spin{to{transform:rotate(360deg)}}
.pod-wrap h3{font-size:1.5rem;font-weight:800;color:var(--ink);margin-bottom:10px}
.pod-wrap>div p{color:var(--ink-soft);margin-bottom:14px}
.pod-soon{font-family:'Caveat';font-weight:700;font-size:1.4rem;color:var(--pen-red);transform:rotate(-1deg);display:inline-block}

/* ============ CONNECT — sticky wall ============ */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;margin-bottom:60px}
.note{
  aspect-ratio:1/.92;padding:20px;color:var(--ink);position:relative;transition:.25s;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:2px 4px 0 rgba(0,0,0,.28);
  clip-path:polygon(0 0,100% 0,100% 86%,86% 100%,0 100%);
}
.note::after{content:"";position:absolute;right:0;bottom:0;width:14%;height:14%;
  background:rgba(0,0,0,.12);clip-path:polygon(0 100%,100% 0,100% 100%)}
.note:hover{transform:scale(1.06) rotate(0deg)!important;z-index:3}
.note .ic{font-size:1.6rem}
.note b{font-size:1.02rem;font-weight:800}
.note span{font-family:'Space Mono';font-size:.72rem;color:var(--ink-soft)}
.n1{background:var(--note-lemon);transform:rotate(-2deg)}
.n2{background:var(--note-mint);transform:rotate(1.5deg)}
.n3{background:var(--note-peach);transform:rotate(-1deg)}
.n4{background:var(--note-lilac);transform:rotate(2deg)}
.n5{background:var(--paper-2);transform:rotate(-1.5deg)}
.news{padding:44px 40px;text-align:center;transform:rotate(.4deg);position:relative}
.news h3{font-size:1.5rem;font-weight:800;color:var(--ink);margin-bottom:8px}
.news .hand-sub{font-family:'Caveat';font-size:1.4rem;color:var(--pen-blue);display:block;margin-bottom:22px;transform:rotate(-1deg)}
.news-form{display:flex;gap:12px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news-form input{flex:1;min-width:220px;background:#fff;border:2px solid var(--ink);border-radius:3px;
  padding:12px 18px;color:var(--ink);font-family:'Bricolage Grotesque';font-size:.95rem;outline:none}
.news-form input:focus{border-color:var(--pen-blue);box-shadow:3px 3px 0 var(--note-lilac)}

/* ============ CONTACT ============ */
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-bottom:56px}
.offer{padding:24px 20px;text-align:center;transition:.2s;background:var(--paper-2)}
.offer:nth-child(odd){transform:rotate(-.8deg)}
.offer:nth-child(even){transform:rotate(.8deg)}
.offer:hover{transform:rotate(0) translateY(-5px)!important}
.offer .ic{font-size:1.7rem;display:block;margin-bottom:10px}
.offer b{display:block;color:var(--ink);margin-bottom:6px;font-weight:800}
.offer span{font-size:.85rem;color:var(--ink-soft)}
form.contact{max-width:660px;padding:44px 46px;transform:rotate(-.4deg)}
form.contact label{display:block;font-family:'Caveat';font-weight:700;font-size:1.35rem;color:var(--pen-blue);margin:18px 0 6px;transform:rotate(-.5deg)}
form.contact input,form.contact select,form.contact textarea{
  width:100%;background:#fff;border:2px solid var(--ink);border-radius:3px;
  padding:12px 15px;color:var(--ink);font-family:'Bricolage Grotesque';font-size:.95rem;outline:none;transition:.15s}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{border-color:var(--pen-red);box-shadow:3px 3px 0 var(--note-lemon)}
form.contact textarea{min-height:130px;resize:vertical}
form.contact .btn{margin-top:28px}

/* ============ FOOTER ============ */
footer{border-top:1px dashed rgba(251,246,234,.2);padding:44px 0;margin-top:30px}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.foot .mono{font-size:.78rem;opacity:.6}
.foot-links{display:flex;gap:22px;font-size:.92rem}
.foot-links a{opacity:.8}.foot-links a:hover{opacity:1;color:var(--note-lemon)}
.foot .hand{font-size:1.3rem;color:var(--note-peach);transform:rotate(-2deg);display:inline-block}

@media(max-width:820px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--desk-2);
    flex-direction:column;align-items:flex-start;padding:20px 24px;border-bottom:1px solid rgba(251,246,234,.1)}
  .nav-links.open{display:flex}
  .burger{display:block}
  .hero-sheet{padding:44px 28px 56px}
  .about-grid,.scraps,.cards{grid-template-columns:1fr}
  .about-page{padding:40px 28px}
  .pod-wrap{grid-template-columns:1fr;justify-items:center;text-align:center;padding:36px 26px}
  .feat{padding:32px 26px}
  form.contact{padding:34px 24px}
  section{padding:72px 0}
  .hero{padding-top:120px}
  .hero-margin{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}