/* ============================================================
   13 · Sketchbook — hand-drawn notebook / doodle
   Trend: human, tactile, "made by hand" — paper, handwriting,
   tape, dashed wobble borders, marker highlights. Warm & playful.
   ============================================================ */
:root{
  --paper:#fbf6e9; --paper-2:#fffdf6; --ink:#2c2a26; --dim:#6b675e; --faint:#a49d8c;
  --line:#d9d2be; --rule:#cfe3ef; --margin:#e7a8a0;
  --pen-red:#e0503f; --pen-blue:#3a6ea5; --hi:#ffe27a; --lime:#bfe3a0;
  --hand:"Caveat",cursive; --marker:"Permanent Marker",cursive; --body:"Nunito",ui-sans-serif,system-ui,sans-serif;
  --pad:clamp(18px,4vw,52px); --ease:cubic-bezier(.34,1.3,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 30px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.hand{font-family:var(--hand)}
.hi{background:linear-gradient(transparent 55%,var(--hi) 55%);padding:0 2px}

/* tape helper */
.tape{position:absolute;width:78px;height:24px;background:rgba(255,235,150,.6);border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 3px rgba(0,0,0,.08);top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg)}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px var(--pad);background:rgba(251,246,233,.9);backdrop-filter:blur(4px);border-bottom:2px dashed var(--line)}
.nav .brand{font-family:var(--marker);font-size:20px;letter-spacing:.01em}
.nav .brand::before{content:"✎ "}
.nav .links{display:flex;gap:clamp(8px,2vw,26px)}
.nav .links a{font-family:var(--hand);font-size:21px;color:var(--dim)}
.nav .links a:hover{color:var(--pen-red);text-decoration:underline wavy var(--pen-red)}
.lang{display:inline-flex;gap:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.lang button{font-family:var(--hand);font-size:17px;padding:3px 12px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--hi)}
@media(max-width:680px){.nav .links a:not(.hide-sm){display:none}}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:80px var(--pad);position:relative}
.hero .doodle{position:absolute;font-family:var(--hand);color:var(--pen-blue);font-size:26px;opacity:.8}
.hero .d1{top:16%;right:8%;transform:rotate(8deg)}
.hero .d2{bottom:18%;left:6%;transform:rotate(-6deg);color:var(--pen-red)}
.hero .kicker{font-family:var(--marker);font-size:15px;letter-spacing:.04em;color:var(--pen-red);transform:rotate(-2deg);display:inline-block;margin-bottom:6px}
.hero h1{font-family:var(--hand);font-weight:700;font-size:clamp(64px,17vw,220px);line-height:.82;letter-spacing:.005em}
.hero h1 .u{text-decoration:underline wavy var(--pen-blue);text-underline-offset:10px}
.hero .sub{font-family:var(--hand);font-size:clamp(24px,3.4vw,40px);color:var(--dim);margin-top:14px}
.hero .arrows{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--marker);font-size:16px;padding:12px 22px;border:2.5px solid var(--ink);border-radius:16px 22px 18px 24px;background:var(--paper-2);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.12s var(--ease)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn.yellow{background:var(--hi)}
.scrollcue{font-family:var(--hand);font-size:22px;color:var(--faint);margin-top:34px}

/* section */
.section{padding:clamp(48px,7vw,100px) 0}
.section-head{margin-bottom:clamp(26px,4vw,48px)}
.section-head .k{font-family:var(--marker);font-size:14px;color:var(--pen-blue);transform:rotate(-1.5deg);display:inline-block}
.section-head h2{font-family:var(--hand);font-weight:700;font-size:clamp(38px,6vw,72px);line-height:.95}

/* sticky notes / cards */
.grid{display:grid;gap:clamp(18px,2.6vw,30px)}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.g3{grid-template-columns:1fr 1fr}}@media(max-width:560px){.g3,.g2{grid-template-columns:1fr}}
.note{position:relative;background:var(--paper-2);border:2.5px solid var(--ink);border-radius:14px 20px 16px 22px;padding:clamp(20px,2.4vw,28px);box-shadow:4px 4px 0 rgba(44,42,38,.9)}
.note:nth-child(2n){transform:rotate(-1deg)}
.note:nth-child(3n){transform:rotate(1.2deg)}
.note.y{background:var(--hi)}.note.b{background:#dcebf5}.note.g{background:#e2f0d4}
.note h3{font-family:var(--hand);font-weight:700;font-size:clamp(24px,2.6vw,32px);margin-bottom:6px}
.note p{font-size:15px;color:var(--dim)}
.note .em{font-family:var(--marker);font-size:26px;margin-bottom:8px}
.stat .n{font-family:var(--hand);font-weight:700;font-size:clamp(46px,6vw,72px);line-height:1;color:var(--pen-red)}
.stat .l{font-family:var(--hand);font-size:20px;color:var(--dim)}

/* work — taped frames */
.frame{position:relative;background:var(--paper-2);border:2.5px solid var(--ink);padding:14px 14px 18px;box-shadow:4px 4px 0 rgba(44,42,38,.85)}
.frame:nth-child(2n){transform:rotate(-1.4deg)}
.frame:nth-child(3n){transform:rotate(1deg)}
.frame .pic{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:8px;display:grid;place-items:center;font-family:var(--hand);font-size:24px;color:var(--faint);background:repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 8px,transparent 8px 16px)}
.frame:nth-child(4n) .pic{background:var(--hi)}.frame:nth-child(4n+2) .pic{background:#dcebf5}.frame:nth-child(4n+3) .pic{background:#e2f0d4}
.frame h3{font-family:var(--hand);font-weight:700;font-size:clamp(22px,2.4vw,30px);margin-top:12px}
.frame p{font-size:14.5px;color:var(--dim)}

/* about */
.about{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:760px){.about{grid-template-columns:1fr}}
.about .lead{font-family:var(--hand);font-size:clamp(28px,3.6vw,46px);line-height:1.2}
.about p.body{color:var(--dim);margin-top:14px;max-width:44ch}
.portrait{position:relative;background:var(--paper-2);border:2.5px solid var(--ink);padding:14px;transform:rotate(2deg);box-shadow:5px 5px 0 rgba(44,42,38,.85)}
.portrait .pic{aspect-ratio:4/5;border:2px dashed var(--line);display:grid;place-items:center;font-family:var(--hand);font-size:24px;color:var(--faint);background:repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 8px,transparent 8px 16px)}
.portrait .cap{font-family:var(--hand);font-size:22px;text-align:center;margin-top:8px;color:var(--dim)}

/* contact */
.cta{position:relative;background:var(--hi);border:3px solid var(--ink);border-radius:20px 28px 22px 30px;padding:clamp(28px,5vw,56px);text-align:center;box-shadow:6px 6px 0 var(--ink)}
.cta h2{font-family:var(--hand);font-weight:700;font-size:clamp(38px,6vw,80px);line-height:.95;margin-bottom:12px}
.cta a.mail{font-family:var(--marker);font-size:clamp(18px,2.4vw,26px);color:var(--pen-red);text-decoration:underline wavy var(--pen-red);text-underline-offset:5px}
.cta .row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.cta .row a{font-family:var(--hand);font-size:22px;color:var(--ink)}
.cta .row a:hover{color:var(--pen-blue)}
.foot{border-top:2px dashed var(--line);padding:20px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--hand);font-size:18px;color:var(--faint)}
.tpl-note{text-align:center;font-family:var(--hand);font-size:19px;color:var(--faint);margin-top:26px}

html.js [data-rise]{opacity:0;transform:translateY(22px) rotate(-1deg);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js [data-rise].in{opacity:1;transform:none}
html.js [data-rise][data-d="1"]{transition-delay:.08s}html.js [data-rise][data-d="2"]{transition-delay:.16s}html.js [data-rise][data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}html.js [data-rise]{opacity:1;transform:none;transition:none}}