/* Small Batch Ventures — shared look for every page.
   Scrapbook style: heavy serif headlines, tilted pill bubbles, thick rounded outlines, small line doodles.
   Palette = Frankie brand system (coral is for ACTIONS only; mustard = highlight; duck egg/teal = ambient).
   Page-specific pieces live in each page's own <style>. Change a color here and it changes everywhere. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#F4F2EF; --ink:#1A1A1A; --coral:#EB8871; --mustard:#E6C27B; --duck:#C4D8D2; --duck-light:#F0F6F4; --teal:#638086; --teal-deep:#2A3D3F;
  --ink-soft:rgba(26,26,26,.78);
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Figtree',system-ui,sans-serif;font-weight:500;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.display{font-family:'Merriweather',Georgia,serif;font-weight:900;letter-spacing:-.025em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
mark.hl{background:linear-gradient(transparent 56%,var(--mustard) 56%);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}

/* pill bubbles: labels and small buttons, slightly tilted */
.pill{display:inline-block;font-family:'Red Hat Mono',ui-monospace,monospace;font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:10px 20px;border:3px solid var(--ink);border-radius:999px;line-height:1;background:var(--duck);color:var(--ink);transition:transform .25s var(--ease)}
.pill.dark{background:var(--teal-deep);color:var(--paper)}
.pill.action{background:var(--coral)}
.tilt-l{transform:rotate(-4deg)}
.tilt-r{transform:rotate(3.5deg)}
a.pill:hover{transform:rotate(0) translateY(-2px)}
.dd{position:absolute;pointer-events:none;width:64px}

/* buttons: coral fill = the main action */
.btn{display:inline-block;font-weight:700;font-size:16px;padding:15px 28px;border-radius:999px;border:3px solid var(--ink);background:var(--coral);color:var(--ink);transition:transform .25s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px) rotate(-1deg);background:var(--mustard)}
.btn:active{transform:scale(.98)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--duck)}

/* NAV */
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px;gap:20px}
.logo{font-size:21px;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.6vw,30px);font-weight:600;font-size:16px;white-space:nowrap}
.nav-links a:not(.pill){padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s var(--ease)}
.nav-links a:not(.pill):hover,.nav-links a.here{background-size:100% 2px}
.nav-links .pill{font-size:13px;padding:9px 16px;transform:rotate(-2deg);background:var(--coral)}

/* FOOTER */
footer{background:var(--teal-deep);color:var(--paper);padding:clamp(44px,6vw,72px) 0 26px;position:relative;margin-top:clamp(48px,7vw,92px)}
.ft{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px}
.ft .logo{font-size:28px;margin-bottom:10px}
.ft-copy{font-size:15px;line-height:1.7;color:rgba(244,242,239,.85)}
.ft-soc{display:flex;gap:14px;margin-top:18px}
.ft-soc a{width:42px;height:42px;border-radius:50%;border:2px solid rgba(244,242,239,.7);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.ft-soc a:hover{background:var(--paper);color:var(--teal-deep)}
.ft-soc svg{width:19px;height:19px}
.ft-cols{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap}
.ft-col{display:flex;flex-direction:column;gap:8px;font-size:15px}
.ft-col b{font-family:'Merriweather',Georgia,serif;font-weight:900;font-size:17px;margin-bottom:2px}
.ft-col a{color:rgba(244,242,239,.9)}
.ft-col a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-bar{margin-top:40px;padding-top:18px;border-top:1px solid rgba(244,242,239,.3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:14.5px}

/* motion: content is visible by default; entrances are opt-in via these keyframes */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* mobile menu: hamburger opens a slide-in panel with every link */
.nav-toggle{display:none}
.nav-burger{display:none;width:46px;height:46px;border:3px solid var(--ink);border-radius:50%;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;background:var(--paper);position:relative;z-index:80}
.nav-burger span{display:block;width:18px;height:2.5px;background:var(--ink);position:relative}
.nav-burger span::before,.nav-burger span::after{content:'';position:absolute;left:0;width:18px;height:2.5px;background:var(--ink)}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-scrim{display:none}
@media(max-width:760px){
  .nav-burger{display:flex}
  .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:min(80vw,330px);background:var(--paper);border-left:3px solid var(--ink);flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:100px 30px 30px;gap:22px;transition:right .3s var(--ease);z-index:70;font-size:19px}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(26,26,26,.4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:65}
  .nav-toggle:checked ~ .nav-scrim{opacity:1;pointer-events:auto}
  .nav-toggle:checked ~ .nav-links{right:0}
}
@media(max-width:640px){
  body{font-size:16px}
  .logo{font-size:18px}
}