/* "המחברת": shared look for Natalie's pages (paper, hand-drawn borders, sticky notes, washi tape) */
:root {
  --paper: #FFFDF8;
  --dots: #EADFCD;
  --card: #FFFFFF;
  --ink: #2B2723;
  --muted: #6F675E;
  --line: #D9CCBA;
  --yellow: #FBE38E;
  --yellow-soft: #FDF1C4;
  --blush: #F4C9BE;
  --blush-soft: #FCEAE5;
  --sage: #CDE0C4;
  --wobble: 255px 14px 225px 14px / 14px 225px 14px 255px;
  --wobble-round: 50% 46% 52% 48% / 48% 52% 46% 50%;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--paper);
  background-image: radial-gradient(var(--dots) 1.1px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: 'Varela Round', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 520px; margin: 0 auto; padding: 0 16px; }

.display { font-family: 'Karantina', sans-serif; font-weight: 700; line-height: .85; letter-spacing: .5px; }
.hand { font-family: 'Playpen Sans Hebrew', cursive; }

.brushed { position: relative; display: inline-block; z-index: 0; }
.brushed > svg { position: absolute; left: -7%; right: -7%; bottom: 6%; width: 114%; height: 40%; z-index: -1; }

.card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--wobble); }
.tilt-l { transform: rotate(-1deg); }
.tilt-r { transform: rotate(.8deg); }

.sticky { position: relative; background: var(--yellow); box-shadow: 0 6px 16px rgba(43,39,35,.12); }
.tape { position: absolute; width: 86px; height: 24px; background: rgba(244,201,190,.88); }
.tape.sage { background: rgba(205,224,196,.92); }

.tag { display: inline-block; background: var(--yellow); padding: 4px 14px; font-size: 14px; transform: rotate(-2deg); box-shadow: 0 3px 8px rgba(43,39,35,.10); }

.btn {
  display: inline-block; background: var(--ink); color: #fff; text-decoration: none;
  border: 0; cursor: pointer; font: inherit; font-size: 17px; line-height: 1.3;
  padding: 15px 32px; border-radius: var(--wobble);
}
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .15s ease; }
  .btn:hover { transform: rotate(-1.2deg) scale(1.02); }
}

.doodle { display: inline-block; flex: none; }
.doodle svg { width: 100%; height: 100%; display: block; }