/* =========================================================
   The Satirical Sketchbook — Static Site (HTML/CSS/JS)
   Style: hand-drawn ink borders, sketch buttons, cream newspaper paper
   ========================================================= */

:root{
  --ink:#111;
  --paper:#ede0c8;
  --paper-2:#efe4cd;
  --accent:#d93b3b;          /* red accent */
  --highlight:#f6d455;       /* yellow sticky note */
  --shadow: rgba(0,0,0,.14);
  --muted: rgba(0,0,0,.62);
  --max: 1120px;
  --radius: 18px;
  --gap: 18px;

  --ui: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  /* Handwriting-ish stack; swap later with a real font if you want */
  --hand: ui-rounded, "Comic Sans MS", "Trebuchet MS", var(--ui);
}

/* ---------- Base / Background paper ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--ui);
  background-color: var(--paper);
  /* Cream newspaper / parchment texture using layered gradients */
  background-image: url(https://i.pinimg.com/1200x/b9/39/d8/b939d89d1d6fc7aa4e269b2245d82db0.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  line-height:1.45;
}

a{color:inherit}
img{max-width:100%;height:auto;display:block}

.container{max-width:var(--max); margin:0 auto; padding: 28px 18px;}
.stack{display:flex;flex-direction:column; gap: var(--gap);}
.row{display:flex; gap: var(--gap); flex-wrap:wrap;}
.row > *{flex:1 1 320px; min-width: 300px;}

.small{font-size:.92rem;color:var(--muted)}
.kicker{font-family:var(--hand); letter-spacing:.5px; text-transform:uppercase; font-weight:900; font-size:.9rem;}
.h1{
  font-family:var(--hand);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  line-height:1.05;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
}
.h2{
  font-family:var(--hand);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  line-height:1.1;
  font-size: clamp(1.35rem, 2.7vw, 2.2rem);
}
.hr-sketch{
  height: 14px;
  margin: 10px 0 2px;
  /* background:
    linear-gradient(transparent 45%, rgba(0,0,0,.35) 45% 55%, transparent 55%); */
  filter: blur(.08px);
  opacity:.85;
}

/* ---------- Hand-drawn “paper sheet” frame ---------- */
.sheet{
  position:relative;
background-image: url(https://i.pinimg.com/736x/1b/3e/7e/1b3e7e2607eaa2e040cb8d6a9cb29bbc.jpg);
background-repeat: no-repeat;
background-size: cover;
  padding: 22px;

  border-radius: var(--radius); 
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  overflow: visible;
}

/* Wobbly ink border using inline SVG border-image */
.sheet::before{
  content:"";
  position:absolute;
  inset:-12px;
  pointer-events:none;
  border-style: solid;
  border-width: 8px;
   border-image-slice: 32;
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M26 44 C70 20 106 32 130 28 C168 22 203 20 234 44 C248 72 243 96 241 130 C239 168 246 198 234 220 C206 246 172 240 130 242 C88 244 60 246 34 220 C18 196 22 166 24 130 C26 92 12 70 26 44 Z' fill='none' stroke='%23111' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M36 54 C78 36 106 40 132 38 C170 34 196 36 222 56' fill='none' stroke='%23111' stroke-width='2.6' opacity='.48' stroke-linecap='round'/%3E%3C/svg%3E"); 
   filter: drop-shadow(0 8px 14px rgba(0,0,0,.12)); 
  transform: rotate(-.35deg);
}

/* Torn-ish edges overlay (subtle) */
.sheet::after{
  content:"";
  position:absolute;
  inset:-16px;
  pointer-events:none;
  border-radius: calc(var(--radius) + 12px); 
   background:
    radial-gradient(12px 10px at 6% 8%, rgba(0,0,0,.07), transparent 65%),
    radial-gradient(10px 10px at 96% 12%, rgba(0,0,0,.06), transparent 70%),
    radial-gradient(12px 10px at 8% 92%, rgba(0,0,0,.05), transparent 70%),
    radial-gradient(14px 10px at 94% 90%, rgba(0,0,0,.06), transparent 70%); 
  opacity:.45;
  mix-blend-mode:multiply;
}

/* Tape corners utility */
.tape{
  position:relative;
}
.tape .tape-corner{
  position:absolute;
  width: 78px;
  height: 22px;
  /* background: rgba(40,40,40,.18);
  border-radius: 4px; */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  opacity:.9;
}
.tape .tl{top:-12px; left: 14px; transform: rotate(-18deg);}
.tape .tr{top:-12px; right: 14px; transform: rotate(18deg);}
.tape .bl{bottom:-12px; left: 18px; transform: rotate(14deg);}
.tape .br{bottom:-12px; right: 18px; transform: rotate(-14deg);}

/* ---------- Header / Nav ---------- */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin-top: 20px;
}

.logo-mark{
  width:44px; height:44px; flex: 0 0 auto;
  transform: rotate(-2deg);
}
.brand h1{
  margin:0;
  font-family:var(--hand);
  text-transform:uppercase;
  letter-spacing:.8px;
  line-height:1;
  font-size: 1.55rem;
}
.brand .tag{margin-top:2px; color:var(--muted); font-size:.92rem;}

.nav{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

/* sketchy nav buttons */
.nav a{
  text-decoration:none;
  font-family:var(--hand);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size: .88rem;
  padding: 8px 12px;
  background: rgba(255,255,255,.28);
  border-radius: 14px;
  position:relative;
  transform: rotate(-.2deg);
  transition: transform .18s ease, filter .18s ease;
}
.nav a::before{
  content:"";
  position:absolute;
  inset:-7px;
  pointer-events:none;
  border-style: solid;
  border-width: 12px;
  border-image-slice: 26;
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M14 22 C40 8 72 14 110 12 C148 10 182 6 206 22 C214 40 210 52 208 60 C206 68 214 82 206 98 C185 112 160 108 110 110 C60 112 34 114 14 98 C6 82 10 70 12 60 C14 50 4 38 14 22 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.85;
}
.nav a:hover{
  transform: rotate(.6deg) translateY(-1px);
  filter: contrast(1.03);
}
.nav a.active{
  background: rgba(246,212,85,.45);
}

/* mobile nav button */
.menu-btn{
  display:none;
  font-family:var(--hand);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
  border:0;
  background: rgba(255,255,255,.32);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  position:relative;
}
.menu-btn::before{
  content:"";
  position:absolute; inset:-7px; pointer-events:none;
  border-style: solid; border-width: 12px;
  border-image-slice: 26; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M14 22 C40 8 72 14 110 12 C148 10 182 6 206 22 C214 40 210 52 208 60 C206 68 214 82 206 98 C185 112 160 108 110 110 C60 112 34 114 14 98 C6 82 10 70 12 60 C14 50 4 38 14 22 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Hero ---------- */
.hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:center;
}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; }
}

.book-mock{
  position:relative;
  aspect-ratio: 5 / 4;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  padding: 14px;
}
.book-mock .frame{
  height:100%;
  border-radius: 14px;
  position:relative;
  overflow:hidden;
}
/* faux “doodle field” background */
.book-mock .frame {
    background-image: 
        url(/assets/img/home.png), /* book on top */
        repeating-linear-gradient(
            to bottom,
            rgba(88, 83, 83, 0.1) 1px,   /* thin light black line */
            transparent 19px         /* space between lines */
        );
    background-size: contain, auto;
    background-position: center, top;
    background-repeat: no-repeat, repeat; /* book no-repeat, lines repeat vertically */
    padding: 12px;
    animation: floatBook 3s ease-in-out infinite;
    position: relative;
}

/* Curly thin lines behind the book */
.book-mock .curly-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* behind the book */
}

/* .mock-book{
  position:absolute;
  left: 18px;
  top: 14px;
  width: 46%;
  aspect-ratio: 3 / 4;
  background: #efe4cd;
  border-radius: 10px;
  transform: rotate(-7deg);
  box-shadow: 0 18px 30px rgba(0,0,0,.20);
  overflow:hidden;
} */
/* .mock-book .cover{
  height:100%;
  background-color: #fff;
  background-image: url(/assets/img/home.jpeg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 12px;

  animation: floatBook 3s ease-in-out infinite;
} */
@keyframes floatBook {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0px);
  }
}
.mock-book .cover .title{
  font-family:var(--hand);
  font-weight:900;
  text-transform:uppercase;
  font-size: .95rem;
  line-height:1.05;
}

/* .mock-book .cover .face{
  margin-top:10px;
  width: 100%;
  border-radius: 8px;
  background: rgba(0,0,0,.07);
  position:relative;
  overflow:hidden;
} */

/* little doodles */
.doodle-scribble{
  position:absolute;
  width: 140px;
  height: 140px;
  opacity:.9;
}
.doodle-scribble.one{right:-24px; top:-24px; transform: rotate(10deg); opacity:.8}
.doodle-scribble.two{right: 10px; bottom: -36px; transform: rotate(-8deg); opacity:.7}
.doodle-scribble.three{left: -30px; bottom: -30px; transform: rotate(6deg); opacity:.55}

.hero-copy .cta-row{display:flex; gap: 12px; flex-wrap:wrap; align-items:center; margin-top: 12px;}

/* ---------- Sketch Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  cursor:pointer;
  border:0;
  background: rgba(255,255,255,.35);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 14px;
  font-family:var(--hand);
  font-weight: 900;
  text-transform:uppercase;
  letter-spacing:.4px;
  position:relative;
  transform: rotate(-.35deg);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 14px 24px rgba(0,0,0,.12);
}
.btn::before{
  content:"";
  position:absolute;
  inset:-8px;
  pointer-events:none;
  border-style: solid;
  border-width: 12px;
  border-image-slice: 26;
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M14 22 C40 8 72 14 110 12 C148 10 182 6 206 22 C214 40 210 52 208 60 C206 68 214 82 206 98 C185 112 160 108 110 110 C60 112 34 114 14 98 C6 82 10 70 12 60 C14 50 4 38 14 22 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 28 C52 20 82 20 110 18 C150 16 176 18 200 30' fill='none' stroke='%23111' stroke-width='2.2' opacity='.45' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity:.92;
}
.btn:hover{
  transform: rotate(.6deg) translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,.16);
  filter: contrast(1.04);
}
.btn.primary{background: rgba(217,59,59,.15);}
.btn.primary::after{
  content:"";
  position:absolute;
  inset: 8px 10px;
  border-radius: 12px;
  background: rgba(217,59,59,.12);
  z-index:-1;
}
.btn.sticky{background: rgba(246,212,85,.45);}

/* ---------- Cards / Sections ---------- */
.card{
  background: rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 18px;
  position:relative;
}
.card::before{
  content:"";
  position:absolute; inset:-10px; pointer-events:none;
  border-style: solid; border-width: 14px;
  border-image-slice: 30; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cpath d='M18 30 C46 12 78 20 120 18 C160 16 194 12 222 30 C234 52 226 70 224 80 C222 90 234 110 222 130 C196 150 166 144 120 146 C74 148 44 150 18 130 C6 110 12 92 14 80 C16 68 4 52 18 30 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.85;
}


/* ---------- Newspaper clipping style ---------- */
.clipping{
  background: rgba(255,255,255,.38);
  border-radius: 14px;
  padding: 16px 16px 14px;
  position:relative;
}
.clipping::after{
  content:"";
  position:absolute; inset:-8px; pointer-events:none;
  border-style: solid; border-width: 12px;
  border-image-slice: 28; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140' viewBox='0 0 220 140'%3E%3Cpath d='M18 28 C44 10 70 18 110 16 C150 14 178 12 202 28 C214 48 210 64 208 70 C206 76 214 96 202 114 C180 132 156 126 110 128 C64 130 40 132 18 114 C6 96 10 80 12 70 C14 60 4 46 18 28 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='10 8'/%3E%3C/svg%3E");
  opacity:.85;
}
.meta{
  display:flex; gap: 10px; flex-wrap:wrap; align-items:center;
  color:var(--muted);
  font-size:.9rem;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--hand); font-weight:900; text-transform:uppercase; letter-spacing:.35px;
  padding: 6px 10px; border-radius: 999px; background: rgba(246,212,85,.40);
  position:relative;
}
.badge::before{
  content:"";
  position:absolute; inset:-6px; pointer-events:none;
  border-style: solid; border-width: 10px;
  border-image-slice: 24; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M14 22 C40 8 72 14 110 12 C148 10 182 6 206 22 C214 40 210 52 208 60 C206 68 214 82 206 98 C185 112 160 108 110 110 C60 112 34 114 14 98 C6 82 10 70 12 60 C14 50 4 38 14 22 Z' fill='none' stroke='%23111' stroke-width='5.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.75;
}

/* ---------- Gallery masonry ---------- */
.masonry{
  column-count: 3;
  column-gap: var(--gap);
}
@media (max-width: 980px){ .masonry{column-count:2;} }
@media (max-width: 620px){ .masonry{column-count:1;} }

.tile{
  break-inside: avoid;
  margin: 0 0 var(--gap);
  background: rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 14px;
  position:relative;
}
.tile::before{
  content:"";
  position:absolute; inset:-10px; pointer-events:none;
  border-style: solid; border-width: 14px;
  border-image-slice: 30; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cpath d='M18 30 C46 12 78 20 120 18 C160 16 194 12 222 30 C234 52 226 70 224 80 C222 90 234 110 222 130 C196 150 166 144 120 146 C74 148 44 150 18 130 C6 110 12 92 14 80 C16 68 4 52 18 30 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.85;
}
.thumb{
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.06);

}
/* .thumb img{
  width:300px;
  height:auto;
  display:block;
  object-fit:cover;
} */
/* .thumb.tall{aspect-ratio: 4/5;}
.thumb.wide{aspect-ratio: 16/9;} */
.tile h3{
  margin: 10px 0 4px;
  font-family: var(--hand);
  text-transform: uppercase;
  letter-spacing:.4px;
}
.tile p{margin:0; color:var(--muted); font-size:.92rem;}

/* ---------- Video grid ---------- */
.video-grid{
  display:grid;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 980px){ .video-grid{grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .video-grid{grid-template-columns: 1fr;} }

.video-card{
  background: rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 14px;
  position:relative;
}
.video-card::before{
  content:"";
  position:absolute; inset:-10px; pointer-events:none;
  border-style: solid; border-width: 14px;
  border-image-slice: 30; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cpath d='M18 30 C46 12 78 20 120 18 C160 16 194 12 222 30 C234 52 226 70 224 80 C222 90 234 110 222 130 C196 150 166 144 120 146 C74 148 44 150 18 130 C6 110 12 92 14 80 C16 68 4 52 18 30 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.85;
}
.video-thumb{
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.06);
  aspect-ratio: 16/9;
  width: 100%;
  position:relative;
}

.play{
  position:absolute;
  inset:auto;
  left: 12px;
  bottom: 12px;
  width: 54px;
  height: 40px;
  border-radius: 12px;
  background: rgba(246,212,85,.55);
  display:grid;
  place-items:center;
  font-family:var(--hand);
  font-weight:900;
  text-transform:uppercase;
}
.play::before{
  content:"";
  position:absolute; inset:-6px; pointer-events:none;
  border-style: solid; border-width: 10px;
  border-image-slice: 24; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M14 22 C40 8 72 14 110 12 C148 10 182 6 206 22 C214 40 210 52 208 60 C206 68 214 82 206 98 C185 112 160 108 110 110 C60 112 34 114 14 98 C6 82 10 70 12 60 C14 50 4 38 14 22 Z' fill='none' stroke='%23111' stroke-width='5.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.75;
}

/* ---------- Modal ---------- */
.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}
.modal.open{display:flex;}
.modal .panel{
  width: min(980px, 96vw);
  background: rgba(243,236,217,.98);
  border-radius: 18px;
  padding: 14px;
  position:relative;
}
.modal .panel::before{
  content:"";
  position:absolute;
  inset:-12px;
  pointer-events:none;
  border-style: solid;
  border-width: 16px;
  border-image-slice: 32;
  border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M26 44 C70 20 106 32 130 28 C168 22 203 20 234 44 C248 72 243 96 241 130 C239 168 246 198 234 220 C206 246 172 240 130 242 C88 244 60 246 34 220 C18 196 22 166 24 130 C26 92 12 70 26 44 Z' fill='none' stroke='%23111' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.95;
}
.modal .close{
  position:absolute;
  top: 10px;
  right: 12px;
  border:0;
  background: rgba(255,255,255,.4);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-family:var(--hand);
  font-weight:900;
  text-transform:uppercase;
}
.modal .close::before{
  content:"";
  position:absolute; inset:-7px; pointer-events:none;
  border-style: solid; border-width: 12px;
  border-image-slice: 26; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M14 22 C40 8 72 14 110 12 C148 10 182 6 206 22 C214 40 210 52 208 60 C206 68 214 82 206 98 C185 112 160 108 110 110 C60 112 34 114 14 98 C6 82 10 70 12 60 C14 50 4 38 14 22 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.8;
}
.modal iframe{
  width:100%;
  aspect-ratio: 16/9;
  border:0;
  border-radius: 12px;
  background:#000;
}

/* ---------- Footer ---------- */
.footer{
  margin-top: 8px;
  padding: 18px 0 6px;
  color: var(--muted);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  font-size:.92rem;
}
.social{
  display:flex; gap:10px; flex-wrap:wrap;
}
.social a{
  display:inline-flex; gap:8px; align-items:center;
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.24);
  position:relative;
  font-family:var(--hand); font-weight:900; text-transform:uppercase; letter-spacing:.35px;
}
.social a::before{
  content:"";
  position:absolute; inset:-7px; pointer-events:none;
  border-style: solid; border-width: 12px;
  border-image-slice: 26; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cpath d='M14 22 C40 8 72 14 110 12 C148 10 182 6 206 22 C214 40 210 52 208 60 C206 68 214 82 206 98 C185 112 160 108 110 110 C60 112 34 114 14 98 C6 82 10 70 12 60 C14 50 4 38 14 22 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.75;
}

/* ---------- Forms ---------- */
.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form .full{grid-column: 1 / -1;}
@media (max-width: 760px){ .form{grid-template-columns:1fr;} }

.input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 0;
  background: rgba(255,255,255,.40);
  font: inherit;
  outline: none;
  box-shadow: 0 12px 20px rgba(0,0,0,.07);
}
textarea{min-height: 130px; resize: vertical;}

.note{
  background: rgba(246,212,85,.45);
  padding: 14px;
  border-radius: 16px;
  position:relative;
}
.note::before{
  content:"";
  position:absolute; inset:-10px; pointer-events:none;
  border-style: solid; border-width: 14px;
  border-image-slice: 30; border-image-repeat: round;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cpath d='M18 30 C46 12 78 20 120 18 C160 16 194 12 222 30 C234 52 226 70 224 80 C222 90 234 110 222 130 C196 150 166 144 120 146 C74 148 44 150 18 130 C6 110 12 92 14 80 C16 68 4 52 18 30 Z' fill='none' stroke='%23111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.85;
}

/* ---------- Responsive nav behavior ---------- */
@media (max-width: 860px){
  .menu-btn{display:inline-flex;}
  .nav{display:none; width:100%;}
  .nav.open{display:flex;}
}