/* oksya — hand-drawn sketch system (shared tokens) */
:root{
  --paper:#fdfbf7;
  --ink:#2d2d2d;
  --muted:#e5e0d8;
  --ok:#16a34a;
  --ok-soft:#dcfce7;
  --sya:#2d5da1;
  --sya-bright:#2563eb;
  --red:#ff4d4d;
  --postit:#fff9c4;
  --wob:255px 15px 225px 15px/15px 225px 15px 255px;
  --wob-md:25px 225px 25px 255px/225px 25px 255px 25px;
  --wob-sm:125px 10px 115px 10px/10px 115px 10px 125px;
}
html{scroll-behavior:smooth}
body{
  background-color:var(--paper);
  background-image:radial-gradient(#e5e0d8 1px, transparent 1px);
  background-size:24px 24px;
  color:var(--ink);
}
::selection{background:var(--postit)}
.wob{border-radius:var(--wob)}
.wob-md{border-radius:var(--wob-md)}
.wob-sm{border-radius:var(--wob-sm)}
.hard{box-shadow:4px 4px 0 0 var(--ink)}
.hard-lg{box-shadow:8px 8px 0 0 var(--ink)}
.hard-sm{box-shadow:3px 3px 0 0 rgba(45,45,45,.14)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:3rem;
  padding:.7rem 1.4rem;border:3px solid var(--ink);border-radius:var(--wob);
  background:#fff;color:var(--ink);font-weight:700;line-height:1.1;text-align:center;
  box-shadow:4px 4px 0 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease, color .1s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 0 var(--ink)}
.btn:focus-visible, a:focus-visible{outline:3px dashed var(--sya);outline-offset:3px}
.btn-ok:hover{background:var(--ok);color:#fff}
.btn-blue{background:var(--muted)}
.btn-blue:hover{background:var(--sya);color:#fff}
.btn-solid{background:var(--ok);color:#fff}
.btn-solid:hover{background:var(--sya);color:#fff}
.card{
  position:relative;background:#fff;border:2px solid var(--ink);border-radius:var(--wob-md);
  box-shadow:3px 3px 0 0 rgba(45,45,45,.12);
  transition:transform .1s ease, box-shadow .1s ease;
}
.card:hover{transform:rotate(1deg)}
.card-l:hover{transform:rotate(-1deg)}
.postit{background:var(--postit)}
.tape::before{
  content:"";position:absolute;top:-14px;left:50%;width:110px;height:26px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(45,45,45,.14);border-left:2px dashed rgba(45,45,45,.18);border-right:2px dashed rgba(45,45,45,.18);
}
.tack::before{
  content:"";position:absolute;top:-12px;left:50%;width:22px;height:22px;
  transform:translateX(-50%);border-radius:50%;
  background:var(--red);border:2px solid var(--ink);box-shadow:2px 2px 0 0 var(--ink);z-index:2;
}
.tag{
  display:inline-block;background:var(--postit);border:2px solid var(--ink);
  border-radius:var(--wob-sm);box-shadow:3px 3px 0 0 var(--ink);
  padding:.3rem .8rem;font-weight:700;transform:rotate(-1deg);
}
.wavy{text-decoration:underline wavy var(--ok) 2px;text-underline-offset:5px}
.navlink:hover{text-decoration:underline wavy var(--sya) 2px;text-underline-offset:5px}
.footerlink:hover{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.jiggle{transition:transform .1s ease}
.jiggle:hover{transform:rotate(-2deg)}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-10px) rotate(6deg)}}
.floaty{animation:floaty 3s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .floaty{animation:none}
  *{transition:none!important}
}
/* Logo artwork (brand/logo letterforms, colour-split) — size by height, keep aspect */
.logo-hard{filter:drop-shadow(5px 5px 0 #9ca3af)}