/* ============================================================
   B THE VIBE — drawn-on-notebook-paper theme
   ============================================================ */
:root{
  --paper:#fbfaf1;
  --paper-2:#f4f2e6;
  --line-blue:#bcd2ec;
  --margin-red:#e0928f;
  --pencil:#26251f;        /* graphite black */
  --graphite:#5d5b50;      /* soft pencil */
  --red-pencil:#d6442a;
  --blue-pencil:#2e5fa3;
  --yellow-hl:#ffe85c;     /* highlighter */
  --green-marker:#3fa14a;
  --tape:rgba(255,232,92,.5);
  --shadow:rgba(38,37,31,.22);
  --line-gap:34px;         /* spacing of the ruled lines */
  --font-display:'Caveat',cursive;
  --font-body:'Patrick Hand','Comic Sans MS',cursive;
  --font-accent:'Gloria Hallelujah',cursive;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--pencil);
  font-size:1.18rem;
  line-height:1.55;
  overflow-x:hidden;
  /* ONE continuous sheet of ruled paper for the whole page */
  background-color:var(--paper);
  background-image:
    /* faint fold / wrinkle shadows */
    linear-gradient(115deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.018) 18%, rgba(0,0,0,0) 19%),
    linear-gradient(285deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.02) 62%, rgba(0,0,0,0) 63%),
    /* red margin line down the left */
    linear-gradient(90deg, transparent 0, transparent 66px, var(--margin-red) 66px, var(--margin-red) 67.5px, transparent 68px),
    /* horizontal ruled blue lines */
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--line-gap) - 1.4px), var(--line-blue) calc(var(--line-gap) - 1.4px), var(--line-blue) var(--line-gap));
  background-attachment:fixed;
}
@media(max-width:600px){
  body{background-image:
    linear-gradient(90deg, transparent 0, transparent 26px, var(--margin-red) 26px, var(--margin-red) 27.5px, transparent 28px),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--line-gap) - 1.4px), var(--line-blue) calc(var(--line-gap) - 1.4px), var(--line-blue) var(--line-gap));
  }
}

/* paper grain overlay (SVG noise as data-uri, no external file) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
}
/* soft vignette + corner curl shadow for a "real page" feel */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 140px rgba(38,37,31,.10);
}

/* ---------- scattered photo cut-outs taped to the paper ---------- */
body{position:relative;}                 /* anchor for the photo layer */
.bg-photos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-photo{
  position:absolute;width:var(--w,170px);background:#fff;padding:9px 9px 32px;
  border:1px solid #e6e3d4;box-shadow:4px 7px 13px rgba(38,37,31,.22);
  transform:rotate(var(--r,-4deg));
}
.bg-photo .ph{
  width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#efece0 0 10px,#e7e3d4 10px 20px);
  color:#b3ad9c;font-family:var(--font-accent);font-size:.78rem;letter-spacing:1px;
}
.bg-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.bg-photo .cap{position:absolute;left:0;right:0;bottom:9px;text-align:center;
  font-family:var(--font-body);color:var(--pencil);font-size:.95rem;}
.bg-photo .tape{position:absolute;top:-12px;left:50%;width:68px;height:24px;
  transform:translateX(-50%) rotate(-5deg);background:var(--tape);
  border:1px dashed rgba(0,0,0,.18);box-shadow:0 1px 2px rgba(0,0,0,.12);}
@media(max-width:760px){
  .bg-photo{--w:118px !important;}
  .bg-photo.hide-sm{display:none;}
}

a{color:var(--blue-pencil);text-decoration:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:3px dashed var(--blue-pencil);outline-offset:3px;border-radius:4px;}

/* highlighter swipe on words */
.hl{background:linear-gradient(120deg, transparent 4%, var(--yellow-hl) 4%, var(--yellow-hl) 96%, transparent 96%);
    padding:0 .12em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.red{color:var(--red-pencil);}
.blue{color:var(--blue-pencil);}
.green{color:var(--green-marker);}

/* generic hand-drawn box border (irregular radius trick) */
.sketch-box{
  border:2.6px solid var(--pencil);
  border-radius:255px 14px 225px 16px/16px 225px 14px 255px;
  background:var(--paper);
}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 26px;position:relative;z-index:2;}
section{position:relative;z-index:2;padding:92px 0;}

/* hand-drawn section divider (wavy line) */
.divider{width:100%;height:34px;overflow:visible;display:block;color:var(--graphite);position:relative;z-index:2;}
.divider path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;}

/* ===================== NAV ===================== */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 22px;
  background:rgba(251,250,241,.92);
  backdrop-filter:blur(3px);
  border-bottom:2.6px solid var(--pencil);
  border-radius:0 0 18px 240px/0 0 240px 18px;
  transform:translateY(-130%);
  transition:transform .45s cubic-bezier(.18,.9,.32,1.4);
  box-shadow:0 6px 0 -3px var(--shadow);
}
header.nav.show{transform:translateY(0);}
.nav .brand{font-family:var(--font-display);font-weight:700;font-size:1.85rem;letter-spacing:.5px;color:var(--pencil);}
.nav .brand b{color:var(--red-pencil);}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center;}
.nav ul a{
  font-family:var(--font-body);color:var(--pencil);font-size:1.18rem;
  padding:6px 14px;border-radius:60px 16px 70px 14px/14px 70px 16px 60px;
  border:2px solid transparent;transition:transform .18s, border-color .18s, background .18s;
}
.nav ul a:hover,.nav ul a:focus-visible{transform:rotate(-2deg) translateY(-1px);border-color:var(--pencil);background:var(--yellow-hl);}
.nav ul a.active{border-color:var(--red-pencil);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--pencil);}
.nav-toggle svg{width:34px;height:26px;}
.nav-toggle path{stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none;}

@media(max-width:760px){
  .nav-toggle{display:block;}
  .nav ul{
    position:absolute;top:100%;right:14px;flex-direction:column;align-items:flex-start;
    gap:4px;padding:14px 18px;margin-top:8px;
    background:var(--paper);border:2.6px solid var(--pencil);
    border-radius:14px 18px 16px 20px;box-shadow:6px 6px 0 -1px var(--shadow);
    transform:scale(.6);transform-origin:top right;opacity:0;pointer-events:none;transition:.22s;
  }
  .nav ul.open{transform:scale(1);opacity:1;pointer-events:auto;}
  .nav ul a{width:100%;}
}

/* ===================== HERO ===================== */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 18px 70px;position:relative;
}
.hero .pretitle{
  font-family:var(--font-accent);font-size:clamp(.8rem,2.4vw,1.05rem);color:var(--graphite);
  letter-spacing:2px;margin-bottom:6px;transform:rotate(-1.5deg);
}
/* the giant interactive logo */
#logo{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:0 .14em;line-height:.92;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(4.4rem,18vw,15rem);
  color:var(--pencil);
  filter:url(#rough);                 /* gives the pencil-sketch wobble */
  user-select:none;cursor:pointer;
}
#logo .word{display:inline-flex;}
#logo .sp{width:.34em;}
#logo .letter{
  display:inline-block;position:relative;will-change:transform;
  transition:transform .28s cubic-bezier(.2,.9,.25,1.6);
  /* faint doubled "sketch" stroke */
  text-shadow:1.5px 1px 0 rgba(38,37,31,.25), -1px 1px 0 rgba(38,37,31,.12);
}
/* logo stays all graphite-black */
#logo .letter{color:var(--pencil);}

.hero .tagline{
  margin-top:18px;font-size:clamp(1.1rem,3.4vw,1.7rem);color:var(--graphite);
  transform:rotate(-1deg);
}
.hero .tagline .pen{color:var(--red-pencil);}

/* scroll cue doodle */
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--graphite);
  font-family:var(--font-accent);font-size:.85rem;animation:bob 1.8s ease-in-out infinite;
}
.scroll-cue svg{width:46px;height:54px;}
.scroll-cue path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(9px);}}

/* floating doodles scattered around */
.doodle{position:absolute;color:var(--graphite);pointer-events:none;opacity:.8;z-index:2;}
.doodle svg{width:100%;height:100%;}
.doodle path,.doodle circle,.doodle line,.doodle polyline{
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.spin-slow{animation:spin 14s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.twinkle{animation:twinkle 2.6s ease-in-out infinite;}
@keyframes twinkle{0%,100%{transform:scale(1);opacity:.55;}50%{transform:scale(1.25);opacity:1;}}

/* ===================== SECTION TITLES ===================== */
.section-head{position:relative;display:inline-block;margin-bottom:30px;}
.section-head h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,7vw,4.6rem);margin:0;line-height:1;color:var(--pencil);
  transform:rotate(-1.5deg);
}
.section-head .scribble{position:absolute;left:-6px;right:-10px;bottom:-16px;height:26px;width:calc(100% + 16px);color:var(--red-pencil);}
.section-head .scribble path{
  fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1);}

/* scroll reveal base */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1;transform:none;}

/* ===================== ABOUT ===================== */
.about-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:center;}
.about-copy p{margin:0 0 16px;max-width:60ch;}
.about-copy .lead{font-size:1.45rem;}
.about-card{
  position:relative;padding:30px 26px;transform:rotate(2deg);
  box-shadow:7px 8px 0 -2px var(--shadow);
}
.about-card h3{font-family:var(--font-display);font-size:2rem;margin:0 0 6px;color:var(--blue-pencil);}
.about-card ul{list-style:none;margin:0;padding:0;}
.about-card li{padding:5px 0;display:flex;gap:10px;align-items:center;}
.about-card li::before{content:"✏️";font-size:1rem;}
.tape{position:absolute;width:88px;height:30px;background:var(--tape);
  border:1px dashed rgba(0,0,0,.18);box-shadow:0 1px 2px rgba(0,0,0,.12);}
.tape.tl{top:-14px;left:18px;transform:rotate(-8deg);}
.tape.br{bottom:-14px;right:20px;transform:rotate(-6deg);}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;}.about-card{transform:rotate(1deg);margin-top:10px;}}

/* ===================== SERVICES ===================== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:30px 26px;}
.card{
  position:relative;padding:26px 22px 30px;background:var(--paper);
  border:2.6px solid var(--pencil);
  border-radius:14px 230px 18px 240px/240px 16px 230px 14px;
  box-shadow:5px 6px 0 -2px var(--shadow);
  transition:transform .22s cubic-bezier(.2,.9,.25,1.5), box-shadow .22s;
}
.card:nth-child(2n){transform:rotate(-1.6deg);}
.card:nth-child(3n){transform:rotate(1.4deg);}
.card:hover,.card:focus-within{
  transform:translateY(-8px) rotate(0deg) scale(1.025);
  box-shadow:10px 13px 0 -2px var(--shadow);
}
.card .ico{width:52px;height:52px;color:var(--pencil);margin-bottom:8px;transition:transform .3s;}
.card .ico svg{width:100%;height:100%;}
.card .ico path,.card .ico circle,.card .ico line,.card .ico rect,.card .ico polyline{
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.card:hover .ico{animation:wiggle .5s ease;}
@keyframes wiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(-12deg) scale(1.1);}75%{transform:rotate(12deg) scale(1.1);}}
.card h3{font-family:var(--font-display);font-size:1.85rem;margin:2px 0 6px;line-height:1;position:relative;display:inline-block;}
.card h3::after{content:"";position:absolute;left:0;bottom:-4px;height:7px;width:0;
  background:var(--yellow-hl);z-index:-1;transition:width .35s ease;border-radius:3px;}
.card:hover h3::after{width:100%;}
.card p{margin:0;font-size:1.06rem;color:var(--graphite);}
/* corkboard pushpin (colour set per-card via --pin) */
.card .pin{position:absolute;top:-11px;left:50%;width:23px;height:23px;border-radius:50%;z-index:3;
  transform:translateX(-50%) rotate(-7deg);
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 44%), var(--pin,#d6442a);
  box-shadow:0 3px 4px rgba(0,0,0,.35), inset -2px -3px 5px rgba(0,0,0,.3);}
.card .pin::after{content:"";position:absolute;left:50%;top:86%;width:2.5px;height:10px;border-radius:2px;
  background:rgba(0,0,0,.4);transform:translateX(-50%) rotate(7deg);}

/* ----- Event Services: unfolding paper card ----- */
.card.event-card{grid-column:1/-1;transform:none !important;text-align:left;perspective:1300px;padding-bottom:14px;}
.event-head{display:flex;align-items:center;gap:14px;width:100%;background:none;border:none;
  cursor:pointer;font:inherit;color:inherit;padding:4px 2px;text-align:left;}
.event-head .ico{margin:0 0 0 4px;flex:0 0 auto;}
.event-head h3{margin:0;}
.event-head .fold-hint{margin-left:auto;font-family:var(--font-accent);font-size:.9rem;color:var(--graphite);white-space:nowrap;}
.event-head .arr{display:inline-block;transition:transform .35s ease;}
.card.event-card.open .event-head .arr{transform:rotate(180deg);}
.fold-wrap{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.2,.85,.25,1);}
.fold-panel{transform-origin:top center;transform:rotateX(-88deg);opacity:0;padding-top:16px;
  transition:transform .55s ease .04s, opacity .45s ease .12s;}
.card.event-card.open .fold-panel{transform:rotateX(0);opacity:1;}
.event-sub{margin:0 0 16px;color:var(--graphite);}
.event-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px 22px;}
.event-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border:2px dashed rgba(38,37,31,.28);background:rgba(255,255,255,.45);
  border-radius:130px 14px 120px 16px/16px 120px 14px 130px;}
.event-item .ei-ico{width:34px;height:34px;flex:0 0 auto;color:var(--pencil);}
.event-item .ei-ico svg{width:100%;height:100%;}
.event-item .ei-ico svg path,.event-item .ei-ico svg circle,.event-item .ei-ico svg rect,
.event-item .ei-ico svg line,.event-item .ei-ico svg polyline,.event-item .ei-ico svg polygon{
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.event-item h4{margin:0 0 2px;font-family:var(--font-display);font-size:1.45rem;line-height:.95;}
.event-item p{margin:0;font-size:.95rem;color:var(--graphite);}

/* ===================== VISUALS ===================== */
.gallery-intro{max-width:60ch;color:var(--graphite);margin:0 0 26px;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px 24px;}
.polaroid{
  background:#fff;padding:12px 12px 46px;border:1px solid #e6e3d4;
  box-shadow:5px 7px 0 -1px var(--shadow);cursor:pointer;position:relative;
  transition:transform .25s cubic-bezier(.2,.9,.25,1.5), box-shadow .25s;
}
.polaroid:nth-child(2n){transform:rotate(2.4deg);}
.polaroid:nth-child(3n){transform:rotate(-2.2deg);}
.polaroid:nth-child(4n){transform:rotate(1.5deg);}
.polaroid:hover,.polaroid:focus-visible{transform:rotate(0) translateY(-7px) scale(1.03);box-shadow:9px 13px 0 -1px var(--shadow);z-index:3;}
.polaroid .ph{
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:
    repeating-linear-gradient(45deg,#efece0 0 12px,#e8e4d6 12px 24px);
  color:var(--graphite);font-family:var(--font-accent);font-size:.95rem;
}
.polaroid.video .ph{background:repeating-linear-gradient(45deg,#2c2b26 0 12px,#34332c 12px 24px);color:#f4f2e6;}
.polaroid .ph .icon{width:46px;height:46px;}
.polaroid .ph .icon path,.polaroid .ph .icon polygon,.polaroid .ph .icon circle,.polaroid .ph .icon rect{
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.polaroid .cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-family:var(--font-body);color:var(--pencil);font-size:1.05rem;}
.polaroid .tape{top:-13px;left:50%;transform:translateX(-50%) rotate(-4deg);}
/* featured tile spans wide */
.polaroid.feature{grid-column:1/-1;}
.polaroid.feature .ph{aspect-ratio:16/6;background:repeating-linear-gradient(45deg,#fff4cf 0 14px,#ffe9a8 14px 28px);color:#7a5a13;}
@media(max-width:560px){.polaroid.feature .ph{aspect-ratio:16/9;}}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(38,37,31,.82);padding:24px;backdrop-filter:blur(2px);
}
.lightbox.open{display:flex;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.lightbox .frame{
  background:#fff;padding:16px 16px 56px;max-width:760px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.5);transform:rotate(-1deg);position:relative;
  animation:pop .3s cubic-bezier(.2,.9,.25,1.5);
}
@keyframes pop{from{transform:rotate(-1deg) scale(.85);opacity:0;}to{transform:rotate(-1deg) scale(1);opacity:1;}}
.lightbox .ph{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:repeating-linear-gradient(45deg,#efece0 0 16px,#e6e2d3 16px 32px);color:var(--graphite);font-family:var(--font-accent);}
.lightbox .ph .icon{width:64px;height:64px;}
.lightbox .ph .icon path,.lightbox .ph .icon polygon,.lightbox .ph .icon rect{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.lightbox .cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:1.25rem;color:var(--pencil);}
.lightbox .close{
  position:absolute;top:-18px;right:-18px;width:48px;height:48px;border-radius:50%;
  background:var(--red-pencil);color:#fff;border:2.6px solid #fff;font-size:1.6rem;cursor:pointer;
  font-family:var(--font-body);box-shadow:0 4px 10px rgba(0,0,0,.4);transition:transform .2s;
}
.lightbox .close:hover{transform:rotate(90deg) scale(1.08);}

/* ===================== CONTACT ===================== */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;}
.contact-info p{margin:0 0 14px;font-size:1.25rem;}
.contact-info .big{font-family:var(--font-display);font-size:2.2rem;color:var(--blue-pencil);line-height:1.1;}
.contact-info a{border-bottom:2px dashed var(--blue-pencil);}
.form{position:relative;padding:30px 28px;transform:rotate(-.8deg);box-shadow:7px 9px 0 -2px var(--shadow);}
.form label{display:block;font-family:var(--font-accent);font-size:.92rem;color:var(--graphite);margin:14px 0 4px;}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--font-body);font-size:1.12rem;color:var(--pencil);
  background:transparent;border:none;border-bottom:2.4px solid var(--graphite);
  padding:8px 4px;border-radius:0;
}
.form textarea{border:2.4px solid var(--graphite);border-radius:12px 220px 14px 230px/230px 12px 220px 14px;min-height:104px;resize:vertical;margin-top:2px;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red-pencil);}
.btn{
  margin-top:22px;font-family:var(--font-display);font-weight:700;font-size:1.6rem;
  background:var(--yellow-hl);color:var(--pencil);border:2.8px solid var(--pencil);cursor:pointer;
  padding:8px 28px;border-radius:200px 18px 220px 16px/16px 220px 18px 200px;
  box-shadow:4px 5px 0 -1px var(--shadow);transition:transform .18s cubic-bezier(.2,.9,.25,1.6), box-shadow .18s, background .2s;
}
.btn:hover,.btn:focus-visible{transform:translateY(-3px) rotate(-2deg) scale(1.04);box-shadow:6px 9px 0 -1px var(--shadow);background:#ffe02e;}
.btn:active{transform:translateY(1px) rotate(0);box-shadow:2px 3px 0 -1px var(--shadow);}
.form-confirm{
  display:none;text-align:center;padding:18px 6px;
}
.form-confirm.show{display:block;animation:pop .4s cubic-bezier(.2,.9,.25,1.5);}
.form-confirm .big{font-family:var(--font-display);font-size:2.6rem;color:var(--green-marker);line-height:1;}
.form-confirm .sub{color:var(--graphite);margin-top:6px;}
.form-confirm svg{width:70px;height:70px;margin:6px auto 0;color:var(--green-marker);}
.form-confirm svg path,.form-confirm svg circle{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}.form{transform:none;}}

/* ===================== FOOTER ===================== */
footer{position:relative;z-index:2;text-align:center;padding:46px 20px 70px;color:var(--graphite);}
footer .logo-mini{font-family:var(--font-display);font-size:2.6rem;color:var(--pencil);}
footer .logo-mini b{color:var(--red-pencil);}
footer .made{font-family:var(--font-accent);font-size:.92rem;margin-top:8px;}
footer .made .green{color:var(--green-marker);}

/* ---------- doodle bird: flies around, grab & drag ---------- */
#bird{position:fixed;left:0;top:0;z-index:45;width:58px;height:40px;cursor:grab;touch-action:none;will-change:transform;}
#bird:active{cursor:grabbing;}
#bird .bird-face{display:block;width:100%;height:100%;transition:transform .12s ease;}
#bird .bird-inner{display:block;width:100%;height:100%;overflow:visible;color:var(--pencil);
  transform-origin:center;animation:flap .42s ease-in-out infinite;}
#bird .bird-inner path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;}
@keyframes flap{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.48) translateY(2px);}}
.streak{position:fixed;left:0;top:0;height:3px;width:22px;border-radius:3px;pointer-events:none;z-index:44;
  background:linear-gradient(90deg,rgba(38,37,31,.5),rgba(38,37,31,0));animation:streakfade .6s ease forwards;}
@keyframes streakfade{from{opacity:.5;}to{opacity:0;transform:scaleX(.25);}}

/* ---------- custom cursor pencil dot ---------- */
#penDot{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--pencil);pointer-events:none;z-index:90;transform:translate(-50%,-50%);
  transition:width .15s, height .15s, background .15s;mix-blend-mode:multiply;display:none;}
#penDot.big{width:30px;height:30px;background:rgba(214,68,42,.5);}

/* ===================== MOBILE OPTIMISATION ===================== */
/* Tablet & down: tighten spacing, keep the handmade vibe */
@media(max-width:760px){
  body{font-size:1.06rem;line-height:1.5;}
  section{padding:60px 0;}
  /* keep content clear of the red margin line + screen edges */
  .wrap{padding:0 22px 0 40px;}
  .section-head{margin-bottom:24px;}
  .section-head h2{font-size:clamp(2.1rem,11vw,3rem);}
  .section-head .scribble{bottom:-12px;height:20px;}

  /* nav: roomier tap targets, brand a touch smaller */
  header.nav{padding:9px 16px;border-radius:0 0 14px 120px/0 0 120px 14px;}
  .nav .brand{font-size:1.55rem;}
  .nav-toggle{padding:10px;}
  .nav ul a{padding:10px 16px;font-size:1.25rem;}

  /* hero: scale logo, calm the doodles so they don't sit on the words */
  .hero{min-height:100svh;padding:30px 16px 64px;}
  .hero .pretitle{font-size:.95rem;}
  #logo{font-size:clamp(3.6rem,21vw,7rem);gap:0 .08em;
        line-height:1.06;                /* roomier so handwriting tails aren't clipped */
        filter:none;}                    /* roughen filter renders jagged on mobile — turn it off */
  #logo .word{padding-bottom:.12em;}     /* breathing room under descenders */
  #logo .letter{text-shadow:1px 1px 0 rgba(38,37,31,.16);}  /* lighter, cleaner shadow */
  .hero .tagline{font-size:clamp(1.05rem,5.2vw,1.4rem);padding:0 10px;}
  /* hide the busiest hero doodles on small screens, keep a couple for character */
  .hero .doodle:nth-of-type(2),
  .hero .doodle:nth-of-type(3){display:none;}
  .hero .doodle{opacity:.65;}

  /* cards: comfortable single column, gentler tilt so nothing clips the edge */
  .cards{gap:24px;}
  .card{padding:24px 20px 26px;}
  .card:nth-child(2n),.card:nth-child(3n){transform:rotate(0deg);}
  .card h3{font-size:1.7rem;}
  /* turn off hover-lift on touch (no hover) but keep tap feedback */
  .card:active{transform:scale(.985);}
  .event-head .fold-hint{font-size:.82rem;}
  .event-list{grid-template-columns:1fr;}

  /* about + contact already stack via their own breakpoints; tidy spacing */
  .about-card{padding:24px 20px;}
  .contact-info .big{font-size:1.85rem;}
  .form{padding:24px 20px;}

  /* gallery: 2-up reads better than 1 giant column on a phone */
  .gallery{grid-template-columns:repeat(2,1fr);gap:26px 16px;}
  .polaroid .cap{font-size:.92rem;}

  /* background photos: smaller, nudged toward the edges, fewer of them */
  .bg-photo{--w:96px !important;}
  .bg-photo .cap{font-size:.8rem;bottom:7px;}
  .bg-photo .tape{width:48px;height:18px;top:-9px;}

  /* the doodle bird: smaller + slightly translucent so it's playful, not blocking */
  #bird{width:42px;height:30px;opacity:.85;}

  /* hide the custom cursor dot entirely on touch */
  #penDot{display:none !important;}
}

/* Phones: one more squeeze for very narrow screens */
@media(max-width:430px){
  .wrap{padding:0 16px 0 34px;}
  .section-head h2{font-size:clamp(1.9rem,12vw,2.6rem);}
  #logo{font-size:clamp(3.2rem,22vw,6rem);}
  .gallery{grid-template-columns:1fr;gap:30px;}
  .polaroid:nth-child(n){transform:rotate(-1.5deg);}
  .contact-info .big{font-size:1.7rem;}
  .btn{font-size:1.4rem;padding:9px 22px;}
  /* keep just one hero doodle on the tiniest screens */
  .hero .doodle:nth-of-type(4){display:none;}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
  .section-head .scribble path{stroke-dashoffset:0;}
  #logo{filter:none;}
  #penDot{display:none !important;}
}

/* ===================== NEW BRAND MARK (Goldman, B&W) ===================== */
.nav .brand{display:inline-flex;align-items:center;gap:0;padding:2px 4px;border:none;background:none;border-radius:8px;}
.nav .brand img{height:30px;width:auto;display:block;}
.nav .brand:hover,.nav .brand:focus-visible{transform:none;background:none;}

.hero-logo{margin:8px auto 0;padding:0;line-height:0;}
.hero-logo img{width:min(660px,86vw);height:auto;display:block;
  animation:logoIn .7s cubic-bezier(.2,.8,.2,1) both;}
@keyframes logoIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}

footer .logo-mini img{height:40px;width:auto;display:block;margin:0 auto;}

@media(max-width:760px){
  .nav .brand img{height:24px;}
  .hero-logo img{width:90vw;}
  footer .logo-mini img{height:32px;}
}
@media (prefers-reduced-motion: reduce){ .hero-logo img{animation:none;} }

/* hide the default OS cursor while the custom pencil dot is active (desktop, motion on) */
body.custom-cursor, body.custom-cursor *{ cursor:none !important; }
/* keep a normal text cursor in the contact form so typing still feels right */
body.custom-cursor input, body.custom-cursor textarea, body.custom-cursor select{ cursor:text !important; }