/* ============================================================
   CALLIE'S WORLD — STYLES
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..700&family=Spline+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Official brand palette */
  --olive:#999933;        /* primary — logo, nav links, section headings */
  --brown:#512800;        /* primary — secondary text, soft body copy */
  --cream:#efe9d0;        /* primary — page background, light surfaces */
  --blue-grey:#aabcc4;    /* CONTRAST ONLY — never on green backgrounds */
  --deep:#2d1c1c;         /* body text, dark accents */
  --line:#d4c9a8;         /* subtle dividers */
  --shadow:rgba(45,28,28,.22);
}

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

/* --- View system: one view at a time, no scrolling between sections --- */
.view-section{display:none !important}
.view-section.view-active{display:block !important}
/* menu-journal needs flex when active, not block */
.menu-journal.view-active{display:flex !important}
body{
  margin:0;background:var(--cream);color:var(--deep);
  font-family:"Spline Sans",sans-serif;line-height:1.6;
  position:relative;  /* containing block for the bee overlay */
  overflow-x:hidden;  /* marching ants + bees animate on wide translateX
                          paths that overshoot narrow viewports */
}
h1,h2,h3{font-family:"Fraunces",serif;margin:0;line-height:1.05;letter-spacing:-.01em}
a{color:var(--olive)}

/* ---------- TOP NAV (the quiet fallback nav) ---------- */
.topbar{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 26px;background:rgba(239,233,208,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;text-decoration:none;cursor:pointer}
.brand img{height:38px;width:auto;display:block}
#nav-list{display:flex;flex:1;justify-content:space-evenly;margin-left:10%}
.nav-link{text-decoration:none;color:var(--olive);font-family:"Cormorant Garamond",serif;font-size:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.nav-link:hover{color:var(--deep)}

/* --- Menu toggle (mobile only — see media query near bottom) ----------
   "Explore" + a small line icon: text alone read as "Menu" (the food
   menu page) on the home screen, which was confusing, and a plain word
   didn't signal "tap for more pages" the way an icon does. Small icon
   fixes discoverability; "Explore" (not "Menu") avoids the name clash
   and echoes the "tap an object to explore" hint already on the page. */
.menu-toggle{display:none}
.menu-toggle-icon{display:block;flex:none}
.menu-toggle-label{
  text-decoration:none;color:var(--olive);
  font-family:"Cormorant Garamond",serif;
  font-size:16px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}

/* --- Cart button (topbar, right edge) --- */
.cart-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:none;border:none;cursor:pointer;
  opacity:.75;transition:opacity .15s ease;
  flex:none;
}
.cart-btn:hover{opacity:1}
.cart-badge{
  position:absolute;top:2px;right:2px;
  min-width:16px;height:16px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  background:var(--olive);color:var(--cream);
  font-family:"Spline Sans",sans-serif;font-size:10px;font-weight:700;
  border-radius:999px;line-height:1;
}
.cart-badge[hidden]{display:none}

/* ---------- HERO: the interactive table ---------- */
/* min-height:100vh guarantees the cover background always fills the
   viewport — without it, .hero was only as tall as its flex content
   (the blanket), leaving cream page background visible above/below on
   screens taller than that content, e.g. 16:10 monitors. */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding:30px 16px 60px;background:url("../assets/events/grass.png") center/cover;overflow:visible}
/* old hero-hint hidden — moved to scalloped label */
.hero-hint{display:none}

/* Mobile-only social row at the foot of the blanket scene (see mobile
   media query near the bottom of this file for layout/position). */
.home-socials{display:none}

/* White flowers scattered on the grass around the blanket */
.grass-flower{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.15));
}
/* Top */
.gf-top-left{    width:clamp(50px,6vw,85px);  left:8%;  top:3%;  transform:rotate(-25deg); }
.gf-top-center{  width:clamp(45px,5vw,75px);  left:40%; top:1%;  transform:rotate(8deg); }
.gf-top-sm1{     width:clamp(22px,2.5vw,38px); left:28%; top:4%;  transform:rotate(-40deg); }
.gf-top-sm2{     width:clamp(25px,2.8vw,42px); left:58%; top:2%;  transform:rotate(32deg); }
.gf-top-right{   width:clamp(35px,3.5vw,55px); right:12%; top:5%;  transform:rotate(18deg); }
/* Left side */
.gf-left-mid{    width:clamp(55px,6.5vw,95px); left:3%;  top:35%; transform:rotate(10deg); }
.gf-left-low{    width:clamp(30px,3vw,48px);   left:6%;  top:65%; transform:rotate(-35deg); }
/* Right side */
.gf-right-mid{   width:clamp(40px,4.5vw,68px); right:4%; top:38%; transform:rotate(-15deg); }
.gf-right-low{   width:clamp(60px,7vw,100px);  right:7%; top:68%; transform:rotate(22deg); }
/* Bottom */
.gf-bottom-left{   width:clamp(45px,5vw,75px);  left:15%;  bottom:2%; transform:rotate(30deg); }
.gf-bottom-center{ width:clamp(55px,6vw,90px);  left:45%;  bottom:1%; transform:rotate(-12deg); }
.gf-bottom-right{  width:clamp(35px,4vw,58px);  right:15%; bottom:6%; transform:rotate(20deg); }

/* Ladybugs wandering on the grass */
.grass-bug{
  position:absolute;
  z-index:2;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.bug-1{
  width:clamp(20px,2.5vw,36px);
  left:6%;top:12%;
  animation:bug-wander-1 18s ease-in-out infinite;
}
.bug-2{
  width:clamp(16px,2vw,28px);
  right:10%;bottom:8%;
  animation:bug-wander-2 22s ease-in-out infinite;
}
/* Stop-and-go scurry: quick burst then pause, repeat */
@keyframes bug-wander-1{
  0%   { transform:translate(0,0) rotate(0deg); }
  3%   { transform:translate(1.5vw,0.8vh) rotate(30deg); }
  8%   { transform:translate(1.5vw,0.8vh) rotate(30deg); }  /* pause */
  10%  { transform:translate(2.5vw,2.5vh) rotate(-15deg); }
  18%  { transform:translate(2.5vw,2.5vh) rotate(-15deg); } /* pause */
  20%  { transform:translate(4vw,1.5vh) rotate(55deg); }
  28%  { transform:translate(4vw,1.5vh) rotate(55deg); }    /* pause */
  31%  { transform:translate(3vw,4vh) rotate(10deg); }
  40%  { transform:translate(3vw,4vh) rotate(10deg); }      /* long pause */
  42%  { transform:translate(4.5vw,3vh) rotate(-40deg); }
  48%  { transform:translate(4.5vw,3vh) rotate(-40deg); }   /* pause */
  50%  { transform:translate(3vw,5vh) rotate(20deg); }
  60%  { transform:translate(3vw,5vh) rotate(20deg); }      /* pause */
  62%  { transform:translate(1.5vw,4vh) rotate(-25deg); }
  70%  { transform:translate(1.5vw,4vh) rotate(-25deg); }   /* pause */
  73%  { transform:translate(0.5vw,2vh) rotate(40deg); }
  82%  { transform:translate(0.5vw,2vh) rotate(40deg); }    /* pause */
  85%  { transform:translate(0.3vw,0.5vh) rotate(10deg); }
  95%  { transform:translate(0.3vw,0.5vh) rotate(10deg); }  /* pause */
  100% { transform:translate(0,0) rotate(0deg); }
}
@keyframes bug-wander-2{
  0%   { transform:translate(0,0) rotate(0deg); }
  4%   { transform:translate(-2vw,-1vh) rotate(-35deg); }
  12%  { transform:translate(-2vw,-1vh) rotate(-35deg); }   /* pause */
  14%  { transform:translate(-1vw,-3vh) rotate(25deg); }
  22%  { transform:translate(-1vw,-3vh) rotate(25deg); }    /* pause */
  25%  { transform:translate(-3.5vw,-2vh) rotate(-50deg); }
  35%  { transform:translate(-3.5vw,-2vh) rotate(-50deg); } /* long pause */
  37%  { transform:translate(-2.5vw,-4vh) rotate(15deg); }
  44%  { transform:translate(-2.5vw,-4vh) rotate(15deg); }  /* pause */
  47%  { transform:translate(-4vw,-3vh) rotate(-20deg); }
  55%  { transform:translate(-4vw,-3vh) rotate(-20deg); }   /* pause */
  58%  { transform:translate(-3vw,-1.5vh) rotate(45deg); }
  68%  { transform:translate(-3vw,-1.5vh) rotate(45deg); }  /* pause */
  70%  { transform:translate(-1.5vw,-2vh) rotate(-10deg); }
  80%  { transform:translate(-1.5vw,-2vh) rotate(-10deg); } /* pause */
  83%  { transform:translate(-0.5vw,-0.5vh) rotate(15deg); }
  94%  { transform:translate(-0.5vw,-0.5vh) rotate(15deg); }/* pause */
  100% { transform:translate(0,0) rotate(0deg); }
}

/* Title is baked into the blanket image — hide the HTML wordmark */
.wordmark{display:none}

/* the table surface — real blanket render */
#table{
  position:relative;width:min(1100px,94vw);aspect-ratio:1677/938;
  background:url("../assets/brand/blanket new (1).png") no-repeat center/contain;
  border:none;outline:none;
}

/* each object */
.obj{
  position:absolute;transform:translate(0,0);
  touch-action:none;user-select:none;cursor:grab;
  transition:filter .18s ease, scale .18s ease;
}
.obj.grabbing{cursor:grabbing;scale:1.04}
.obj img{display:block;width:100%;height:auto;-webkit-user-drag:none;
  filter:drop-shadow(0 8px 10px rgba(45,28,28,.25))}

/* hover highlight on clickable objects (Callie asked for this) */
.obj.clickable{cursor:pointer}
.obj.clickable:hover{scale:1.08;filter:drop-shadow(0 0 8px rgba(153,153,51,.35))}
.obj.clickable:focus-visible{outline:none;scale:1.08}

/* placeholder tiles (shown until a real PNG is set in objects.js) */
.placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:1.3/1;border-radius:50% 50% 48% 52%/52% 50% 50% 48%;
  background:#dcd0b4;border:2px dashed #b7a884;color:var(--brown);
  font-size:12px;font-weight:600;padding:8px;
  box-shadow:0 6px 10px rgba(45,28,28,.18);
}
.placeholder.is-hotspot{
  background:rgba(153,153,51,.14);border-color:var(--olive);color:var(--olive);
}
.obj.clickable:hover .placeholder.is-hotspot{background:rgba(153,153,51,.24)}

/* reset button */
/* Scalloped info label — bottom right of hero */
.hero-label{
  position:absolute;
  bottom:10%;right:0%;
  z-index:10;
  width:clamp(260px,28vw,420px);
  /* Locks the box to the card artwork's own proportions so
     object-fit:contain fills it edge-to-edge with no letterboxing —
     without this, the box's content-driven height didn't match the
     image, so the card rendered smaller than its box and the button
     (laid out to fill the full box) hung off the bottom of the art. */
  aspect-ratio:2368/1288;
  transform:rotate(10deg);
}
.hero-label-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
}
.hero-label-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12% 20% 16%;
  text-align:center;
  gap:6px;
}
.hero-label-hint--short{display:none}
.hero-label-hint{
  font-family:"Caveat",cursive;
  font-size:clamp(12px,1.3vw,16px);
  color:var(--brown);
  margin:0;
  line-height:1.3;
  white-space:normal;
  text-align:center;
  max-width:90%;
}
#reset-btn{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(10px,1.1vw,13px);
  font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--olive);color:#fffdf6;
  border:none;border-radius:999px;
  padding:5px 14px;cursor:pointer;
  transition:opacity .15s;
}
#reset-btn:hover{opacity:.85}

/* ---------- SECTIONS BELOW THE HERO ---------- */
section.page{
  max-width:900px;margin:0 auto;padding:80px 28px;border-top:1px solid var(--line);
}
section.page h2{font-size:clamp(30px,5vw,52px);color:var(--olive);margin-bottom:8px}
section.page .tag{font-family:"Fraunces";font-style:italic;color:var(--brown);font-size:14px}
section.page p{color:var(--brown);max-width:620px;margin-top:14px}
.todo{margin-top:18px;padding:14px 18px;border-left:4px solid var(--olive);background:rgba(153,153,51,.07);border-radius:0 8px 8px 0;font-size:14px;color:var(--brown)}

/* ---------- CINEMATIC ZOOM — object → section overlay ---------- */
.zoom-overlay{
  position:fixed;inset:0;z-index:9999;
  background:#ece3d1;
  overflow-y:auto;
  transform:scale(0.08);
  opacity:0;
  transition:transform .7s cubic-bezier(.4,.0,.2,1), opacity .5s ease;
}
.zoom-overlay.zoom-in{
  transform:scale(1);
  opacity:1;
}
/* After zoom fills the screen, fade out to reveal the real section */
.zoom-overlay.zoom-landed{
  opacity:0;
  transition:opacity .3s ease;
}
/* Bite-marks reveal transition */
.bite-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;}
.bite-overlay svg{width:100%;height:100%;display:block;}
.bite-overlay .cover{fill:var(--cream,#efe9d0);}
.bite-overlay circle{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .8s cubic-bezier(.4,0,.2,1);}
.bite-overlay.eating circle{transform:scale(1);}

/* ============================================================
   CONTACTS — polaroid stack + socials card
   ============================================================ */
.contacts-section{
  scroll-margin-top:56px;
  padding:60px 28px 80px;
  border-top:1px solid var(--line);
  min-height:100vh;
  background:url("../assets/events/grass.png") center/cover no-repeat;
}
.contacts-layout{
  max-width:900px;margin:0 auto;
  display:flex;gap:clamp(24px,5vw,60px);
  align-items:flex-start;
  justify-content:center;
}

/* --- Polaroid stack --- */
.pola-stack{
  position:relative;
  width:clamp(220px,30vw,320px);
  aspect-ratio:3/4;
  cursor:pointer;
  flex-shrink:0;
}
.pola-card{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 4px 12px rgba(45,28,28,.18));
  opacity:0;
  /* Default transition for settling into position */
  transition:transform .3s cubic-bezier(.25,.46,.45,.94),
             opacity .25s ease;
}
/* Only top 3 cards visible — creates the pile look */
.pola-card.pola-show{opacity:1}
.pola-card.pola-top{z-index:4}
.pola-card.pola-mid{z-index:2}
.pola-card.pola-bot{z-index:1}

/* Phase 1: lift — scale up slightly, raise with shadow */
.pola-card.pola-lift{
  z-index:5;
  transform:scale(1.06) translateY(-8px) !important;
  filter:drop-shadow(0 12px 24px rgba(45,28,28,.28));
  transition:transform .15s cubic-bezier(.25,.46,.45,.94),
             filter .15s ease;
}
/* Phase 2: peel off to the side */
.pola-card.pola-peel{
  z-index:5;
  opacity:0;
  transform:translateX(-55%) translateY(-12px) rotate(-14deg) scale(.92) !important;
  filter:drop-shadow(0 8px 16px rgba(45,28,28,.15));
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             opacity .3s ease .1s,
             filter .35s ease;
}
.pola-hint{
  position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);
  font-family:"Caveat",cursive;font-size:12px;
  color:var(--brown);opacity:.35;
  white-space:nowrap;pointer-events:none;
}

/* --- Socials card --- */
.contacts-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px 24px;
  box-shadow:0 4px 16px rgba(45,28,28,.1);
  max-width:340px;
  width:100%;
}
.contacts-heading{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(26px,4vw,36px);
  font-weight:500;
  color:var(--olive);
  margin:0 0 18px;
}
.contacts-link{
  display:flex;align-items:center;gap:10px;
  font-family:"Spline Sans",sans-serif;
  font-size:14px;color:var(--deep);
  text-decoration:none;
  padding:8px 0;
  border-bottom:1px solid rgba(212,201,168,.4);
  transition:color .15s ease;
}
a.contacts-link:hover{color:var(--olive)}
.contacts-link svg{flex-shrink:0;color:var(--olive)}
.contacts-note{
  align-items:flex-start;
  line-height:1.5;
  border-bottom:none;
}
.contacts-note svg{margin-top:1px}

@media(max-width:700px){
  .contacts-layout{flex-direction:column;align-items:center}
  .pola-stack{width:clamp(200px,60vw,280px)}
  .contacts-card{max-width:100%}
}

/* ---------- AMBIENT BEE — decorative, scrolls with page ---------- */
.bee-layer{
  position:absolute;top:0;left:0;
  width:0;height:0;       /* no layout impact */
  z-index:9990;
  pointer-events:none;
  overflow:visible;
}
.bee-trail{
  position:fixed;top:0;left:0;
  pointer-events:none;
  z-index:-1; /* behind the bee img but inside the bee-layer */
}
.bee{
  position:absolute;
  width:42px;height:auto;
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 2px 4px rgba(45,28,28,.15));
}
.bee--sm{width:34px}
/* Wing flutter — tiny rapid scale jitter */
@keyframes bee-flutter{
  0%,100%{transform:var(--bee-tf) scaleX(1)}
  50%{transform:var(--bee-tf) scaleX(.94)}
}

footer{padding:50px 28px 90px;text-align:center;color:var(--brown);font-size:13px;border-top:1px solid var(--line)}

[data-id="cover-note"]{ rotate:8deg; }
[data-id="calendar"]{ rotate:-6deg; }
[data-id="collage"]{ rotate:8deg; }
[data-id="menu-clipboard"]{ rotate:6deg; }

/* Basket — real wicker basket image as the drop zone */
[data-id="basket"]{
  overflow:visible;             /* allow badge/tooltip to extend outside */
  rotate:-15deg;
}

/* ---------- PICNIC BASKET discoverability cues ---------- */

/* Count badge — top-right corner of the basket */
.basket-badge{
  position:absolute;top:-6px;right:-6px;z-index:3;
  min-width:22px;height:22px;padding:0 6px;
  display:none;align-items:center;justify-content:center;
  font-family:"Spline Sans",sans-serif;font-size:11px;font-weight:700;
  color:var(--cream);background:var(--deep);
  border:2px solid var(--cream);border-radius:999px;
  line-height:1;pointer-events:none;
}
.basket-full .basket-badge{display:flex}

/* Hover tooltip — centered below the basket */
.basket-tooltip{
  position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);
  white-space:nowrap;
  font-family:"Fraunces",serif;font-style:italic;font-size:12px;
  color:var(--olive);background:var(--cream);
  padding:3px 10px;border-radius:6px;
  box-shadow:0 2px 8px rgba(45,28,28,.15);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.basket-full:hover .basket-tooltip{opacity:1}

/* Idle bounce — gentle bob so the basket reads as "full / interactive" */
@keyframes basket-bob{
  0%,100%{translate:0 0}
  50%{translate:0 -4px}
}
.basket-full{
  animation:basket-bob 2.4s ease-in-out infinite;
}
/* Pause the bob while dragging or during other basket animations */
.basket-full.grabbing,
.basket-full.basket-hover,
.basket-full.basket-wiggle{
  animation-play-state:paused;
}

/* ---------- PICNIC BASKET interaction ---------- */

/* Object being absorbed into the basket */
.basket-absorb{
  transition:transform .4s ease-in, opacity .4s ease-in !important;
  pointer-events:none;
}

/* Object hidden inside the basket */
.in-basket{
  display:none !important;
}

/* Dispense: animating out of the basket */
.basket-dispense{
  transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .7s ease-out !important;
  pointer-events:none;
}

/* Drop-target feedback: basket glows when a dragged object hovers over it */
.basket-hover{
  scale:1.08;
  filter:drop-shadow(0 0 14px rgba(93,107,58,.45));
  transition:scale .18s ease, filter .18s ease;
}

/* Empty basket wiggle — uses `rotate` so it doesn't clobber inline transform */
@keyframes basket-wiggle{
  0%,100%{rotate:0deg}
  20%{rotate:-3deg}
  40%{rotate:3deg}
  60%{rotate:-2deg}
  80%{rotate:1.5deg}
}
.basket-wiggle{
  animation:basket-wiggle .5s ease-in-out;
}

/* Callie's plate — slow spin */
@keyframes plate-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
[data-id="portrait-plate"] img{
  animation:plate-spin 7s linear infinite;
}

/* ---------- MARCHING ANTS (two calm trails on the blanket) ----------
   Ants live inside #table so coords are relative to the blanket.
   offset-path + offset-distance for smooth, slow crawl along curves.
   Paths authored for 1100×615 max table; clip at smaller sizes. */
.ant-trails{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:10;
  overflow:hidden;
}
.ant{
  position:absolute;
  width:14px;height:auto;
  pointer-events:none;
  opacity:1;
  offset-rotate:auto 180deg;
  animation:ant-crawl var(--dur,18s) linear infinite, ant-scurry .3s ease-in-out infinite;
  animation-delay:var(--d,0s);
}

/* Trail A — wiggly path across the blanket */
.ant-a{
  offset-path:path('M -20 420 C 80 400 160 440 250 415 C 340 390 420 435 520 420 C 620 405 700 440 800 418 C 900 396 980 430 1130 420');
}
/* Trail B — wiggly diagonal */
.ant-b{
  offset-path:path('M 380 280 C 430 310 480 295 540 330 C 600 365 660 345 730 385 C 800 425 860 410 930 455 C 1000 500 1060 480 1180 610');
}
/* Trail C — wiggly upper path */
.ant-c{
  offset-path:path('M 1140 180 C 1040 165 940 190 840 175 C 740 160 640 185 540 170 C 440 155 340 180 240 168 C 140 156 60 175 -20 165');
}
/* Trail D — mid-left diagonal, bottom-left to upper-mid */
.ant-d{
  offset-path:path('M -20 520 C 60 490 130 510 200 475 C 270 440 340 460 420 430 C 500 400 570 420 650 385 C 730 350 800 370 880 340');
}

@keyframes ant-crawl{
  from{offset-distance:0%}
  to  {offset-distance:100%}
}
/* tiny side-to-side wiggle for scurrying legs feel */
@keyframes ant-scurry{
  0%,100%{ transform:translateX(0) rotate(0deg); }
  25%    { transform:translateX(0.6px) rotate(2deg); }
  75%    { transform:translateX(-0.6px) rotate(-2deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .basket-absorb{transition-duration:.01s !important}
  .basket-dispense{transition-duration:.01s !important}
  .basket-wiggle{animation-duration:.01s}
  .basket-full{animation:none}
  .ant{animation:none !important;opacity:.5}
  .leaf{transition-duration:.01s !important}
  .evt-overlay,.popup-overlay{transition-duration:.01s}
  .evt-popup,.popup-card{transition-duration:.01s}
  .zoom-overlay{transition-duration:.01s !important}
  .bee-layer{display:none}
  .merch-item{animation:none !important}
}

/* Menu placeholder */
.menu-journal{min-height:100vh;background:url("../assets/events/grass.png") center/cover no-repeat}
.menu-stack{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
}
.menu-sheet{
  position:relative;
  z-index:5;
  height:88vh;
  max-height:88vh;
  width:auto;
  max-width:94vw;
  object-fit:contain;
  cursor:pointer;
  user-select:none;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));
}

/* Picnic objects scattered on the grass around the menu */
.m-obj{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:3;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));
}
/* LEFT side */
.obj-starplate{ width:15vw; max-width:230px; left:6%;  top:14%; }
.obj-key{       width:7vw;  max-width:115px; left:20%; top:10%; transform:rotate(-15deg); }
.obj-spoon{     width:6vw;  max-width:90px;  left:7%;  top:52%; transform:rotate(-20deg); }
.obj-matchbox{  width:11vw; max-width:165px; left:16%; top:46%; transform:rotate(-8deg); }
.obj-coffee{    width:14vw; max-width:210px; left:8%;  top:66%; }
.obj-daisy{     width:8vw;  max-width:120px; left:30%; bottom:6%; }
/* RIGHT side */
.obj-girl{      width:16vw; max-width:250px; right:12%; top:4%; transform:rotate(8deg); }
.obj-fork{      width:6vw;  max-width:90px;  right:9%;  top:20%; transform:rotate(12deg); }
.obj-apple{     width:13vw; max-width:195px; right:22%; top:48%; }
.obj-chef{      width:15vw; max-width:240px; right:3%;  top:38%; }
.obj-swans{     width:15vw; max-width:230px; right:6%;  bottom:6%; }
/* scattered */
.obj-ladybug{   width:7vw;  max-width:105px; left:24%; bottom:14%; transform:rotate(25deg); }

@keyframes menu-toss{
  0%   { transform:translateX(0) translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateX(130vw) translateY(-10vh) rotate(28deg); opacity:0; }
}
@keyframes menu-enter{
  0%   { transform:translateX(-40vw) rotate(-8deg); opacity:0; }
  100% { transform:translateX(0) rotate(0deg); opacity:1; }
}
.menu-sheet.tossing{
  animation:menu-toss .4s cubic-bezier(.5,0,.75,0) forwards;
}
.menu-sheet.entering{
  animation:menu-enter .32s ease-out forwards;
}

/* Old menu flip-book CSS deleted — cleared for rebuild */


/* ============================================================
   EVENTS — AUGUST 2026 POP-UP CALENDAR
   Matches the "Callie Monthly Calendar" comp: cream card, olive
   grid lines, big serif month heading, handwritten entries.
   ============================================================ */

.events-section{
  scroll-margin-top:56px;
  position:relative;
  min-height:100vh;
  padding:60px 20px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background-image:url("../assets/events/merch background (1).png");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:scroll;
}

/* The calendar card — cream paper with subtle shadow */
.cal-card{
  position:relative;
  z-index:2;
  width:min(1150px, 82vw);
  margin:0 auto;
  transform:rotate(-1.2deg);
  /* Aged paper texture */
  background:
    repeating-linear-gradient(0deg,rgba(160,140,100,.018) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(160,140,100,.012) 0 1px,transparent 1px 4px),
    radial-gradient(ellipse at 20% 80%,rgba(180,155,110,.06),transparent 55%),
    radial-gradient(ellipse at 85% 15%,rgba(180,155,110,.04),transparent 45%),
    var(--cream);
  border-radius:8px;
  padding:clamp(12px,1.8vw,24px) clamp(22px,3.5vw,52px) clamp(18px,2.5vw,36px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  overflow:visible;
}

/* Jumping sheep on the grass */
.sheep{
  position:absolute;
  pointer-events:none;
  z-index:3;
  user-select:none;
}
.sheep-img{
  display:block;
  width:100%;height:auto;
  pointer-events:none;
}
.sheep-hit{
  position:absolute;
  top:20%;left:20%;
  width:60%;height:55%;
  pointer-events:auto;
  cursor:pointer;
  z-index:4;
  background:transparent;
  border:none;
}
.sheep-left{
  width:18vw;max-width:300px;
  left:2%;bottom:-2%;
}
.sheep-center{
  width:20vw;max-width:330px;
  left:38%;bottom:-6%;
  z-index:4;
}
.sheep-right{
  width:18vw;max-width:300px;
  right:3%;bottom:0%;
}

@keyframes sheep-hop{
  0%   { transform:translateX(0) translateY(0); }
  10%  { transform:translateX(15vw) translateY(-46px); }
  22%  { transform:translateX(55vw) translateY(0); }
  34%  { transform:translateX(95vw) translateY(-46px); }
  44%  { transform:translateX(125vw) translateY(0); opacity:1; }
  45%  { transform:translateX(125vw) translateY(0); opacity:0; }
  46%  { transform:translateX(-65vw) translateY(0); opacity:0; }
  48%  { transform:translateX(-65vw) translateY(0); opacity:1; }
  60%  { transform:translateX(-45vw) translateY(-46px); }
  72%  { transform:translateX(-30vw) translateY(0); }
  84%  { transform:translateX(-16vw) translateY(-40px); }
  94%  { transform:translateX(-5vw) translateY(-18px); }
  100% { transform:translateX(0) translateY(0); }
}
@keyframes sheep-hop-high{
  0%   { transform:translateX(0) translateY(0); }
  10%  { transform:translateX(15vw) translateY(-70px); }
  22%  { transform:translateX(55vw) translateY(-24px); }
  34%  { transform:translateX(95vw) translateY(-70px); }
  44%  { transform:translateX(125vw) translateY(-24px); opacity:1; }
  45%  { transform:translateX(125vw) translateY(-24px); opacity:0; }
  46%  { transform:translateX(-65vw) translateY(-24px); opacity:0; }
  48%  { transform:translateX(-65vw) translateY(-24px); opacity:1; }
  60%  { transform:translateX(-45vw) translateY(-70px); }
  72%  { transform:translateX(-30vw) translateY(-24px); }
  84%  { transform:translateX(-16vw) translateY(-64px); }
  94%  { transform:translateX(-5vw) translateY(-30px); }
  100% { transform:translateX(0) translateY(0); }
}
@keyframes sheep-hop-low{
  0%   { transform:translateX(0) translateY(0); }
  10%  { transform:translateX(15vw) translateY(-30px); }
  22%  { transform:translateX(55vw) translateY(10px); }
  34%  { transform:translateX(95vw) translateY(-30px); }
  44%  { transform:translateX(125vw) translateY(10px); opacity:1; }
  45%  { transform:translateX(125vw) translateY(10px); opacity:0; }
  46%  { transform:translateX(-65vw) translateY(10px); opacity:0; }
  48%  { transform:translateX(-65vw) translateY(10px); opacity:1; }
  60%  { transform:translateX(-45vw) translateY(-30px); }
  72%  { transform:translateX(-30vw) translateY(10px); }
  84%  { transform:translateX(-16vw) translateY(-26px); }
  94%  { transform:translateX(-5vw) translateY(0); }
  100% { transform:translateX(0) translateY(0); }
}
.sheep-left.hopping  { animation:sheep-hop      4.8s cubic-bezier(.25,.1,.25,1) forwards; }
.sheep-center.hopping{ animation:sheep-hop-high 4.8s cubic-bezier(.25,.1,.25,1) forwards; }
.sheep-right.hopping { animation:sheep-hop-low  4.8s cubic-bezier(.25,.1,.25,1) forwards; }

/* Swan pair straddling calendar top edge */
.cal-swans{
  position:absolute;
  z-index:5;
  width:18vw;max-width:280px;
  left:9%;
  top:1%;
  bottom:auto;
  transform:translateX(-50%) rotate(-12deg);
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

/* White flowers flanking the calendar */
.evt-flower{
  position:absolute;
  z-index:6;
  pointer-events:none;
  user-select:none;
  width:12vw;max-width:180px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.evt-flower-left{
  left:1%;top:40%;
  transform:rotate(-18deg);
}
.evt-flower-right{
  right:3%;top:0%;
  transform:rotate(15deg) scaleX(-1);
}
.evt-flower-right-low{
  right:1%;top:62%;
  transform:rotate(-10deg) scaleX(-1);
}

/* Coffee-ring stain decorations */
.cal-stain{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(140,110,70,.07) 30%,rgba(140,110,70,.03) 55%,transparent 70%);
  border:1.5px solid rgba(140,110,70,.04);
}
.cal-stain-1{top:14%;left:-2%;width:80px;height:80px}
.cal-stain-2{top:42%;left:2%;width:35px;height:35px;opacity:.5}
.cal-stain-3{bottom:6%;right:1%;width:90px;height:90px;opacity:.35}

/* --- Header: big bold month + stacked year --- */
.cal-header{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-bottom:clamp(6px,1vw,12px);
}
.cal-month{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(42px,8vw,96px);
  font-weight:700;
  color:var(--olive);
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:.85;
}
.cal-year{
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  color:var(--olive);
  line-height:.8;
}
.cal-year-top{font-size:clamp(32px,6vw,64px)}
.cal-year-bot{font-size:clamp(32px,6vw,64px)}

/* --- Calendar grid --- */
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  /* Row 1 = weekday header (sizes to its text). Every date row after it is
     a FIXED height so cells never grow/shrink with event content. */
  grid-template-rows:auto;
  grid-auto-rows:92px;
  border:1px solid rgba(153,153,51,.3);
  border-radius:4px;
}

/* Day-of-week headers */
.cal-dow{
  padding:8px 4px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(9px,1.2vw,13px);
  font-weight:600;
  color:var(--olive);
  text-transform:uppercase;
  text-align:center;
  letter-spacing:.08em;
  border-bottom:1px solid rgba(153,153,51,.3);
  border-right:1px solid rgba(153,153,51,.12);
}
.cal-dow:last-child{border-right:none}

/* Day cells — height comes from the grid row (fixed 120px), so all cells
   are identical whether or not they hold an event. Content that exceeds the
   cell is clipped. */
.cal-day{
  position:relative;
  height:100%;
  box-sizing:border-box;
  padding:4px 6px 6px;
  border-bottom:1px solid rgba(153,153,51,.12);
  border-right:1px solid rgba(153,153,51,.12);
  overflow:hidden;
}
.cal-day:nth-child(7n+7+7){border-right:none}
.cal-day:nth-last-child(-n+7){border-bottom:none}
.cal-day.empty{background:transparent}
/* Today's cell stays unclipped so the hand-drawn ring around the date
   (see .cal-today-mark) renders fully even where it pokes past the
   number's own small box. */
.cal-today{overflow:visible}

.day-num{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(10px,1.1vw,13px);
  font-weight:500;
  color:rgba(153,153,51,.6);
  text-align:right;
  line-height:1;
}

/* --- Scrapbook event objects placed on date cells --- */
.cal-evt-obj{
  display:flex;flex-direction:column;align-items:center;
  margin-top:2px;
  pointer-events:auto;
}
.cal-evt-cutout{
  display:block;
  width:clamp(28px,4vw,48px);height:auto;
  filter:drop-shadow(0 2px 5px rgba(45,28,28,.18));
  pointer-events:none;
}
.cal-evt-caption{
  font-family:"Caveat",cursive;
  font-size:clamp(9px,1vw,12px);
  font-weight:600;
  color:var(--brown);
  line-height:1.1;
  text-align:center;
  margin-top:1px;
  white-space:nowrap;
}

/* Highlighted day with event */
.has-event{
  background:rgba(153,153,51,.04);
}

/* Clickable event days */
.cal-clickable{
  cursor:pointer;
  transition:background .15s ease;
}
.cal-clickable:hover,.cal-clickable:focus-visible{
  background:rgba(153,153,51,.1);
  outline:none;
}
/* Today's date highlight */
.cal-today .day-num{
  background:none;color:inherit;
}
/* Shrink-to-fit wrapper around just the digits — .day-num itself is
   block + text-align:right (nearly full cell width), so the mark below
   is centered on this inner span instead, keeping it on the actual
   glyphs regardless of cell size. */
.day-num-text{position:relative;display:inline-block}

.cal-today-mark{
  position:absolute;
  top:50%;left:50%;
  width:2.9em;height:1.9em;
  transform:translate(-50%,-50%);
  pointer-events:none;
  overflow:visible;
  z-index:5;
}

/* Bottom deco strip — REMOVED from markup, rules kept commented out
.cal-deco{
  display:flex;align-items:center;gap:14px;
  margin-top:16px;
  padding-left:8px;
} */

/* ============================================================
   SHARED POPUP — used by event detail + goods quick-view
   ============================================================ */

/* Full-page dimmed overlay */
.evt-overlay,.popup-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(45,28,28,.45);
  backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.evt-overlay.open,.popup-overlay.open{
  opacity:1;pointer-events:auto;
}

/* The popup card */
.evt-popup,.popup-card{
  position:relative;
  width:min(400px,90vw);
  max-height:85vh;
  overflow-y:auto;
  background:var(--cream);
  border-radius:8px;
  padding:32px 28px 24px;
  box-shadow:0 16px 48px rgba(45,28,28,.35);
  transform:scale(.92);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.evt-overlay.open .evt-popup,
.popup-overlay.open .popup-card{
  transform:scale(1);
}

/* Washi-tape accent */
.evt-washi,.popup-washi{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:80px;height:14px;
  background:
    repeating-linear-gradient(90deg,var(--olive) 0 7px,transparent 7px 14px),
    repeating-linear-gradient(0deg,var(--olive) 0 7px,transparent 7px 14px);
  background-blend-mode:multiply;
  opacity:.22;border-radius:1px;
  pointer-events:none;
}

/* Close button */
.evt-close,.popup-close{
  position:absolute;top:8px;right:10px;
  background:none;border:none;cursor:pointer;
  font-size:26px;line-height:1;
  color:var(--brown);opacity:.5;
  transition:opacity .15s ease;
}
.evt-close:hover,.popup-close:hover{opacity:1}

/* Popup body */
.evt-body,.popup-body{display:flex;flex-direction:column;gap:8px}

/* Photo placeholder (shared) */
.evt-photo,.popup-photo{
  width:100%;aspect-ratio:16/9;
  border:2px dashed var(--line);
  background:rgba(239,233,208,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:"Caveat",cursive;font-size:13px;font-weight:600;
  color:var(--brown);
  text-transform:uppercase;letter-spacing:.04em;
  border-radius:4px;margin-bottom:4px;
}
/* opacity belongs to the "PHOTO" placeholder label only — scoping it to
   .placeholder-photo (rather than the shared base rule above) keeps real
   product/event photos at full opacity once js/app.js swaps one in. */
.evt-photo.placeholder-photo,.popup-photo.placeholder-photo{opacity:.5}

/* --- Event-specific content --- */
.evt-title{
  font-family:"Caveat",cursive;
  font-size:26px;font-weight:700;
  color:var(--olive);
  line-height:1.1;margin:0;
}
.evt-date{
  font-family:"Cormorant Garamond",serif;
  font-size:15px;font-weight:600;
  color:var(--deep);
  letter-spacing:.04em;
  margin:0;
}
.evt-location{
  font-family:"Caveat",cursive;
  font-size:16px;color:var(--brown);
  margin:0;
}
.evt-blurb{
  font-family:"Spline Sans",sans-serif;
  font-size:13px;color:var(--brown);
  line-height:1.5;margin:4px 0 0;
}

/* --- Goods popup — wider card, no scroll on desktop --- */
.popup-overlay .popup-card{
  width:min(900px,92vw);
  max-width:900px;
  max-height:90vh;
  padding:24px 32px;
  overflow-y:auto;
}
.popup-overlay .popup-photo{
  aspect-ratio:auto;
  max-height:48vh;
  width:auto;
  margin:0 auto;
  object-fit:contain;
  border:none;
}
.popup-overlay .popup-photo img{
  max-height:48vh;
  width:auto;
  object-fit:contain;
}
.popup-overlay .popup-body{
  gap:12px;
  align-items:center;
}

/* --- Product-detail popup: photo left, details right on wider screens --- */
@media (min-width:640px){
  .popup-card--product .popup-body{
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,1fr);
    grid-template-areas:
      "photo title"
      "photo price"
      "photo desc"
      "photo size"
      "photo qty"
      "photo add"
      "photo confirm";
    column-gap:28px;
    row-gap:6px;
    align-items:start;
    text-align:left;
  }
  .popup-card--product .popup-photo{ grid-area:photo; margin:0; align-self:start; max-height:none; }
  .popup-card--product .popup-photo img{ max-height:60vh; }
  .popup-card--product .popup-title{ grid-area:title; }
  .popup-card--product .popup-price{ grid-area:price; }
  .popup-card--product .popup-desc{ grid-area:desc; }
  .popup-card--product .goods-size-block{ grid-area:size; }
  .popup-card--product .goods-qty-block{ grid-area:qty; }
  .popup-card--product .popup-shop-btn{ grid-area:add; justify-self:start; }
  .popup-card--product .goods-confirm{ grid-area:confirm; }
}

/* --- Goods popup content --- */
.popup-title{
  font-family:"Caveat",cursive;
  font-size:30px;font-weight:700;
  color:var(--olive);
  line-height:1.1;margin:0;
}
.popup-price{
  font-family:"Cormorant Garamond",serif;
  font-size:20px;font-weight:600;
  color:var(--deep);
  margin:0;
}
.popup-desc{
  font-family:"Spline Sans",sans-serif;
  font-size:14px;color:var(--brown);
  line-height:1.5;margin:2px 0 0;
}

/* --- Size selector --- */
.goods-size-block,.goods-qty-block{
  width:100%;
  margin-top:10px;
}
.goods-field-label{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--brown);opacity:.75;
  margin-bottom:6px;
}
.goods-size-row{
  display:flex;flex-wrap:wrap;gap:8px;
}
.goods-size-btn{
  min-width:44px;
  padding:8px 14px;
  background:var(--cream);
  border:1.5px solid var(--olive);
  border-radius:999px;
  font-family:"Cormorant Garamond",serif;
  font-size:14px;font-weight:600;
  color:var(--olive);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.goods-size-btn:hover{background:rgba(153,153,51,.14)}
.goods-size-btn.selected{
  background:var(--olive);color:var(--cream);
}
/* Out-of-stock size (inventoryQuantity 0 / available:false) */
.goods-size-btn:disabled{
  opacity:.35;cursor:default;
  text-decoration:line-through;
  border-color:var(--brown);color:var(--brown);
}
.goods-size-btn:disabled:hover{background:var(--cream)}
.goods-size-warning{
  font-family:"Spline Sans",sans-serif;
  font-size:12.5px;color:#a04a2f;
  margin:7px 0 0;
  display:none;
}
.goods-size-warning.show{display:block}

/* --- Quantity stepper --- */
.goods-qty-row{
  display:flex;align-items:center;gap:14px;
}
.goods-qty-btn{
  width:32px;height:32px;
  border:1.5px solid var(--olive);
  border-radius:50%;
  background:var(--cream);
  color:var(--olive);
  font-size:18px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.goods-qty-btn:hover{background:rgba(153,153,51,.14)}
.goods-qty-value{
  font-family:"Cormorant Garamond",serif;
  font-size:17px;font-weight:600;
  color:var(--deep);
  min-width:1.5ch;text-align:center;
}

.popup-shop-btn{
  display:inline-block;
  margin-top:14px;
  padding:12px 36px;
  background:var(--olive);color:var(--cream);
  font-family:"Cormorant Garamond",serif;
  font-size:15px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;text-align:center;
  border-radius:999px;
  border:none;cursor:pointer;
  transition:background .15s ease;
}
.popup-shop-btn:hover{background:var(--brown)}
/* "Sold out" — every variant's inventory is 0 */
.popup-shop-btn:disabled{background:var(--brown);opacity:.55;cursor:default}
.popup-shop-btn:disabled:hover{background:var(--brown)}

/* --- Add-to-cart confirmation --- */
.goods-confirm{
  width:100%;
  margin-top:14px;
  padding:12px 16px;
  background:rgba(153,153,51,.12);
  border:1px solid var(--olive);
  border-radius:10px;
}
.goods-confirm-main{
  font-family:"Caveat",cursive;
  font-size:20px;font-weight:700;
  color:var(--olive);
  margin:0;
}
.goods-confirm-detail{
  font-family:"Spline Sans",sans-serif;
  font-size:13px;color:var(--brown);
  margin:4px 0 0;
}
.goods-confirm-sub{
  font-family:"Spline Sans",sans-serif;
  font-size:11.5px;font-style:italic;
  color:var(--brown);opacity:.6;
  margin:8px 0 0;
}
.goods-confirm-link{
  display:block;
  margin:8px 0 0;padding:0;
  background:none;border:none;cursor:pointer;
  font-family:"Cormorant Garamond",serif;
  font-size:13px;font-weight:600;
  letter-spacing:.04em;
  color:var(--olive);text-decoration:underline;
  text-align:left;
}
.goods-confirm-link:hover{color:var(--brown)}

/* --- Cart popup --- */
.popup-card--cart{width:min(440px,92vw)}
.cart-items{
  display:flex;flex-direction:column;gap:12px;
  margin-top:8px;max-height:44vh;overflow-y:auto;
}
.cart-line{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:12px;align-items:center;
}
.cart-line-photo{
  width:56px;height:56px;border-radius:6px;
  background:rgba(239,233,208,.6);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cart-line-photo img{width:100%;height:100%;object-fit:contain}
.cart-line-name{
  font-family:"Caveat",cursive;font-size:18px;font-weight:700;
  color:var(--olive);margin:0;line-height:1.15;
}
.cart-line-meta{
  font-family:"Spline Sans",sans-serif;font-size:12px;
  color:var(--brown);opacity:.75;margin:2px 0 0;
}
.cart-line-actions{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
.cart-line-price{
  font-family:"Cormorant Garamond",serif;font-size:14px;font-weight:600;
  color:var(--deep);
}
.cart-line-remove{
  background:none;border:none;cursor:pointer;padding:0;
  font-family:"Spline Sans",sans-serif;font-size:11px;
  color:var(--brown);opacity:.55;text-decoration:underline;
}
.cart-line-remove:hover{opacity:1}
.cart-empty{
  font-family:"Spline Sans",sans-serif;font-size:13px;
  color:var(--brown);opacity:.7;
  margin:14px 0 4px;
}
.cart-summary{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);
}
.cart-subtotal-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:"Cormorant Garamond",serif;font-size:16px;font-weight:600;
  color:var(--deep);margin-bottom:12px;
}
.cart-checkout-btn{width:100%}

/* --- Easter egg cow on the goods page --- */
.cow-wrap{
  position:absolute;
  bottom:6%;right:8%;
  z-index:4;
  width:clamp(80px,12vw,140px);
}
.cow-img{
  display:block;width:100%;height:auto;
  cursor:pointer;
  filter:drop-shadow(0 3px 6px rgba(45,28,28,.2));
  transform-origin:50% 70%;
}
.cow-img:hover:not(.cow-flipped):not(.cow-unflipping){transform:scale(1.04)}
.cow-bubble{
  position:absolute;
  bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:6px;
  background:#faf6ea;
  color:var(--brown);
  font-family:"Caveat",cursive;
  font-size:clamp(13px,1.5vw,17px);
  font-weight:700;
  padding:8px 14px;
  border-radius:16px;
  box-shadow:0 3px 10px rgba(45,28,28,.15);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  transform:translateX(-50%) translateY(6px);
}
/* Speech bubble tail */
.cow-bubble::after{
  content:"";position:absolute;
  top:100%;left:50%;transform:translateX(-50%);
  border:8px solid transparent;
  border-top-color:#faf6ea;
}
.cow-bubble.cow-bubble--show,
.cow-bubble.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@keyframes cow-tumble{
  0%   { transform:rotate(0deg); }
  40%  { transform:rotate(110deg) translateY(-14px); }
  70%  { transform:rotate(195deg) translateY(0); }
  85%  { transform:rotate(172deg); }
  100% { transform:rotate(180deg); }
}
@keyframes cow-untumble{
  0%   { transform:rotate(180deg); }
  40%  { transform:rotate(70deg) translateY(-14px); }
  70%  { transform:rotate(-15deg) translateY(0); }
  85%  { transform:rotate(8deg); }
  100% { transform:rotate(0deg); }
}
.cow-img.cow-flipped{ animation:cow-tumble .6s cubic-bezier(.5,.1,.3,1.2) forwards; }
.cow-img.cow-unflipping{ animation:cow-untumble .6s cubic-bezier(.5,.1,.3,1.2) forwards; }

/* ============================================================
   GOODS — CLOTHESLINE MERCH SHOP
   ============================================================ */

/* ---------- STORY — static collage (rebuilt Jul 6 2026) ----------
   Every object is a plain <img> fixed via left/top/width, all in %
   of .story-stage — NOT draggable. Percentages keep it responsive;
   the stage itself is locked to 16:9 (width:100%, capped by max-width,
   height purely from aspect-ratio — never vh/min-height/fixed px).
   Previous layered-PNG version is preserved in index.backup3.html. */
.story-section{
  scroll-margin-top:56px;
  padding:0;
  border-top:1px solid var(--line);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  /* Full-bleed background lives on the SECTION (fills the viewport at
     any aspect ratio), not on .story-stage below — a fixed 16:9 box
     with the photo on itself left cream bars on non-16:9 screens. */
  background-color:var(--cream);
  background-image:url("../assets/story/story-bg.png");
  background-size:cover;
  background-position:center;
}
/* .view-section.view-active forces display:block !important, which
   silently wins over the flex rule above (higher specificity) — the
   16:9 collage was rendering flush to the top with a dead gray gap
   below instead of centered. #story beats it on specificity (ID). */
#story.view-active{display:flex !important}

.story-stage{
  position:relative;
  width:100%;
  max-width:1600px;
  aspect-ratio:16/9;
  height:auto;
  margin:0 auto;
  overflow:hidden;
}

.story-obj{
  position:absolute;
  display:block;
  height:auto;
  pointer-events:none;
  user-select:none;
}
/* Soft contact shadow for the letters + polaroids so they read as
   physical objects sitting on the scene (key/fork already bake their
   own shadow into the PNG). */
.story-shadow{ filter:drop-shadow(0 6px 10px rgba(45,28,28,.25)); }

.story-letter-callie{  left:10%; top:8%;  width:32%;  transform:rotate(-1deg);  z-index:10; }
.story-kraft-envelope{ left:5%; top:30%; width:30%;  transform:rotate(2deg);   z-index:5; }
.story-letter-mom{     left:34%; top:20%; width:30%; transform:rotate(0deg);  z-index:30; }
.story-letter-adrian{  left:55%; top:6%; width:35%;  transform:rotate(1deg);   z-index:10; }
/* Annie's note sits lower-right of Adrian's letter, IN FRONT of the fork
   (fork is z 25), per the IMG_9570 reference. */
.story-letter-annie{   left:83%; top:57%; width:17%; transform:rotate(6deg);   z-index:26; }
.story-swans{          left:43%; top:12%; width:16%; transform:rotate(0deg);  z-index:45; }
.story-key-swan{       left:32%; top:28%; width:9%;   transform:rotate(8deg);   z-index:40; }
.story-daisy-1{        left:4%;  top:11%; width:8%;   z-index:14; }
/* Nudged right (44%→65%) to clear the couple polaroid's new bottom-center
   spot — matches the IMG_9570 reference, where this daisy sits right of it. */
.story-daisy-2{        left:65%; top:74%; width:10%;   z-index:14; }
.story-star-1{         left:40%; top:6%;  width:3%;   z-index:14; }
.story-stars-3{        left:72%; top:7%;  width:10%;  z-index:14; }
.story-stars-2{        left:77%; top:14%; width:6%;   z-index:14; }
.story-polaroid-callie{ left:5%;  top:30%; width:11%; transform:rotate(-4deg);  z-index:25; }
.story-polaroid-box{    left:3%;  top:54%; width:13%; transform:rotate(5deg);   z-index:25; }
.story-polaroid-adrian{ left:86%; top:17%; width:14%; transform:rotate(4deg);   z-index:25; }
/* Moved from lower-right to bottom-center (below the mom letter) to make
   room for Annie's note; z 9 keeps it behind the letters where they overlap.
   top 76% so it emerges below the mom letter's torn edge (which reaches ~82%). */
.story-polaroid-couple{ left:43%; top:76%; width:11%; transform:rotate(-3deg);  z-index:9; }
.story-note-blank{      left:66%; top:69%; width:24%; transform:rotate(2deg);   z-index:8; }
/* z 50 — in front of everything on the stage (swans are 45). */
.story-fork{            left:86%; top:31%; width:15%;  transform:rotate(25deg); z-index:50; }

/* This page is a fixed static composite matching a reference photo —
   the sitewide ambient bees don't belong here. Hide them only while
   Story is the active section; they still fly over the rest of the site. */
body:has(#story.view-active) .bee-layer{ display:none; }

/* ---------- STORY — mobile scrapbook stack ----------
   Hidden on desktop; shown instead of .story-stage below ~760px
   (see the responsive block near the bottom of this file). Same
   art as the desktop collage, laid out as a vertical scrolling
   stack instead of a fixed 16:9 box, so the notes are actually
   readable and photos aren't shrunk to nothing on a phone. */
.story-mobile{display:none}

/* ---------- NEWSLETTER — mobile legible stack ----------
   Hidden on desktop; shown instead of .news-stage below ~760px (see
   the responsive block near the bottom of this file). Same content
   as the desktop sheet — masthead, sign-up form, article columns —
   just laid out full-width instead of scaled down inside a 16:9 box,
   since the form and titles are real functional content, not art. */
.news-mobile{display:none}

.goods-section{
  scroll-margin-top:56px;
  padding:0;
  border-top:1px solid var(--line);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Full-bleed background lives on the SECTION (fills the viewport at
     any aspect ratio), not on .clothesline-scene below — that box is
     width:100% but aspect-ratio:16/9 with no min-height, so on
     non-16:9 screens (e.g. 16:10) it fell short of the viewport
     height and left cream bars top/bottom. */
  background-image:url("../assets/goods/merch background.png");
  background-size:cover;
  background-position:center;
}
/* Same specificity fix as #story/#newsletter — .view-section.view-active
   forces display:block !important, beating the flex rule above. */
#goods.view-active{display:flex !important}

.clothesline-scene{
  position:relative;
  width:100%;
  margin:0 auto;
  aspect-ratio:16/9;
  --line-y:15%;
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:0 clamp(16px,4vw,60px);
}
/* Warm cream veil — softens saturation + adds vintage warmth */
.clothesline-scene::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,
      rgba(239,233,208,.35) 0%,
      rgba(239,233,208,.18) 35%,
      rgba(239,233,208,.12) 60%,
      rgba(239,233,208,.3) 100%);
  pointer-events:none;
}

/* Rope + flowers PNG — natural aspect ratio, full-width behind garments.
   The visible cord sits at ~23% of the image height. We pull the image up
   so that point lands at --line-y in the scene:
   top = --line-y − 23% = 15% − 23% = −8%  */
.cl-rope{
  position:absolute;
  top:calc(var(--line-y) - 19%);
  left:0;
  width:100%;
  height:auto;          /* natural aspect ratio — no stretching */
  z-index:1;
  pointer-events:none;
  user-select:none;
}

/* Items container — garment pins sit at --line-y */
.cl-items{
  position:relative;z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(16px,3.5vw,44px);
  width:100%;
  max-width:960px;
  margin-top:var(--line-y);
}

/* Individual merch item — clickable, swings from clothespin on hover.
   Per-item vertical offsets follow the rope's sag curve. */
.merch-item{
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;
  flex-shrink:0;
  transform-origin:top center;  /* pivot from the clothespin */
  transform:translateY(var(--sag,0px));
}
.merch-item:nth-child(1){--sag:-2.4vw}
.merch-item:nth-child(2){--sag:0px}
.merch-item:nth-child(3){--sag:-1.2vw}
.merch-item:nth-child(4){--sag:-3.8vw}

/* Gentle ambient idle sway — subtle breeze */
@keyframes breeze-idle{
  0%,100%{transform:translateY(var(--sag,0px)) rotate(0deg)}
  50%{transform:translateY(var(--sag,0px)) rotate(1deg)}
}
.merch-item{
  animation:breeze-idle 7s ease-in-out infinite;
}
.merch-item:nth-child(2){animation-delay:-1.5s;animation-duration:7.5s}
.merch-item:nth-child(3){animation-delay:-3s;animation-duration:6.5s}
.merch-item:nth-child(4){animation-delay:-4.5s;animation-duration:7.2s}

/* Hover swing — noticeable pendulum sway from the clothespin */
@keyframes breeze-swing{
  0%{transform:translateY(var(--sag,0px)) rotate(-5deg)}
  25%{transform:translateY(var(--sag,0px)) rotate(5deg)}
  50%{transform:translateY(var(--sag,0px)) rotate(-4deg)}
  75%{transform:translateY(var(--sag,0px)) rotate(3.5deg)}
  100%{transform:translateY(var(--sag,0px)) rotate(-5deg)}
}
.merch-item:hover{
  animation:breeze-swing 1.6s ease-in-out infinite;
}

/* Product images — real PNGs include their own clothespins */
.merch-img{
  display:block;
  width:100%;height:auto;
  object-fit:contain;
  pointer-events:none;       /* click hits the parent .merch-item */
  user-select:none;
  filter:drop-shadow(0 4px 8px rgba(45,28,28,.12));
}
.merch-img--lg{width:clamp(170px,24vw,280px)}
.merch-img--md{width:clamp(150px,20vw,240px)}
.merch-img--sm{width:clamp(115px,16vw,190px)}
.merch-img--xs{width:clamp(95px,14vw,165px)}
.merch-item[data-goods="toffee-box"] .merch-img{transform:rotate(-8deg)}


/* Social icons — bottom-right per comp */
.cl-socials{
  position:absolute;
  bottom:clamp(12px,2vw,24px);
  right:clamp(16px,3vw,36px);
  display:flex;gap:10px;
  z-index:3;
}
.cl-socials a{
  display:block;opacity:.45;
  transition:opacity .15s ease;
}
.cl-socials a:hover{opacity:.8}

/* ---------- GOODS — mobile clothesline ----------
   Hidden on desktop; shown instead of .clothesline-scene below ~760px
   (see the responsive block further down this file). A dedicated
   portrait scene matching assets/reference/shop mobile.png, rather than
   the desktop scene just shrunk down — same product images/data, so
   every item still opens the same product-detail popup. */
.goods-mobile-stage{display:none}

/* ============================================================
   MENU BOOK + EVENTS — RESPONSIVE
   ============================================================ */
@media(max-width:700px){
  /* Menu rules commented out — cleared for rebuild
  .journal{width:min(98vw, calc(72vh * 2400 / 1792))}
  .journal-spine{display:none}
  .journal-page{padding:14px 12px 10px}
  .dish-name{font-size:14px}
  .dish-desc{font-size:12px}
  .menu-heading{font-size:16px}
  .callies-card-wrap{width:78%}
  .callies-card-text{font-size:18px}
  .polaroid-top,.polaroid-bottom{width:74%}
  .menu-postcard{width:84%}
  .postcard-text{font-size:15px}
  .cover-title{font-size:24px}
  */
  /* Events calendar */
  .cal-card{padding:16px 12px 14px}
  .cal-dow{font-size:8px;padding:5px 2px;letter-spacing:.02em}
  .cal-grid{grid-auto-rows:84px}
  .cal-day{padding:3px 4px 4px}
  .cal-evt-cutout{width:24px}
  /* Header stops fitting MONTH + newsletter badge + YEAR on one line
     below ~700px — wrap the newsletter badge onto its own row instead
     of letting it overlap the month/weekday row. */
  .cal-header{flex-wrap:wrap;row-gap:10px}
  .cal-month{order:1;font-size:clamp(32px,11vw,48px)}
  .cal-year{order:2}
  .cal-news-label{order:3;flex:0 0 auto;width:100%;max-width:300px;margin:2px auto 0}
  /* Sheep shrink too fast with plain vw sizing on phones — give them a
     bigger floor so they're still visible/tappable down here. */
  .sheep-left,.sheep-right{width:34vw;max-width:170px}
  .sheep-center{width:38vw;max-width:190px}
  /* Goods clothesline */
  .cl-items{gap:6px}
}

@media (max-width:640px){
  #nav-list{gap:12px}
  .nav-link{font-size:11px}
}

/* ---------- MOBILE ----------
   Below this width the topbar link row doesn't fit as a horizontal
   row, so it becomes a hamburger-toggled dropdown instead (logo + cart
   bag stay always visible) — people can still jump straight to any
   page from anywhere, not just by finding the right blanket object.
   The blanket itself needs no swap: every object's width is already a
   % of #table (see TABLE_REFERENCE_WIDTH in app.js), so it scales down
   with the table instead of overflowing it. Section pages themselves
   get their own mobile treatment below. */
@media (max-width:760px){
  .menu-toggle{
    display:flex;align-items:center;justify-content:center;gap:7px;
    padding:8px 4px;
    background:none;border:none;cursor:pointer;
    opacity:.85;flex:none;
  }
  .menu-toggle:hover{opacity:1}
  #nav-list{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;margin-left:0;
    background:rgba(239,233,208,.98);
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 18px rgba(45,28,28,.14);
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  #nav-list.open{max-height:400px}
  .nav-link{
    padding:14px 24px;
    border-top:1px solid var(--line);
    font-size:15px;
  }

  /* Same fix as Story/Goods/Newsletter: the blanket is short relative
     to a tall phone screen, leaving a dead gap below it. Center it in
     the viewport instead — the blanket itself is unchanged. min-height
     now lives in the base .hero rule so it applies at every width. */
  .hero{justify-content:center;padding-bottom:20px}

  /* ---------- HOME — mobile blanket, per assets/reference/home mobile.png ----------
     A dedicated portrait blanket render (not just the desktop landscape
     blanket scaled down) with every object repositioned to match that
     mockup. Same images/interactions as desktop (js/objects.js is
     untouched) — only position/size is overridden here, per object via
     data-id, with !important since app.js sets these as inline styles. */
  #table{
    background-image:url("../assets/new-objects/blanket mobile ver.png");
    aspect-ratio:1792/2400;
  }
  .obj[data-id="swans"]{left:18% !important;top:-4% !important;width:16% !important}
  .obj[data-id="cover-note"]{left:7% !important;top:4% !important;width:24% !important}
  .obj[data-id="star-plate"]{left:35% !important;top:3% !important;width:24% !important}
  .obj[data-id="polaroid-1"]{left:64% !important;top:3% !important;width:9% !important}
  .obj[data-id="polaroid-2"]{left:72% !important;top:6% !important;width:10% !important}
  .obj[data-id="polaroid-3"]{left:83% !important;top:4% !important;width:11% !important}
  .obj[data-id="polaroid-4"]{left:72% !important;top:13% !important;width:10% !important}
  .obj[data-id="polaroid-5"]{left:83% !important;top:13% !important;width:11% !important}
  .obj[data-id="collage"]{left:78% !important;top:8% !important;width:10% !important}
  .obj[data-id="calendar"]{left:43% !important;top:21% !important;width:32% !important}
  .obj[data-id="key"]{left:82% !important;top:21% !important;width:7% !important}
  .obj[data-id="daisy"]{left:-4% !important;top:16% !important;width:13% !important}
  .obj[data-id="coffee-cup"]{left:17% !important;top:26% !important;width:19% !important}
  .obj[data-id="spoon"]{left:3% !important;top:27% !important;width:15% !important}
  .obj[data-id="menu-clipboard"]{left:0% !important;top:44% !important;width:24% !important}
  .obj[data-id="portrait-plate"]{left:76% !important;top:38% !important;width:23% !important}
  .obj[data-id="matchbox"]{left:30% !important;top:57% !important;width:13% !important}
  .obj[data-id="fork"]{left:68% !important;top:56% !important;width:21% !important}
  .obj[data-id="white-tee"]{left:43% !important;top:58% !important;width:29% !important}
  .obj[data-id="apple"]{left:47% !important;top:78% !important;width:14% !important}
  .obj[data-id="basket"]{left:76% !important;top:74% !important;width:25% !important}

  .home-socials{
    display:flex;justify-content:center;gap:22px;
    margin-top:18px;
  }
  .home-socials a{display:block;opacity:.7;transition:opacity .15s ease}
  .home-socials a:hover{opacity:1}

  /* Hint badge's 260px floor was sized for desktop — on a phone it
     dwarfed the blanket instead of sitting as a small corner note.
     Moved to the left side (same bottom level) to match the mobile
     mockup's layout, which has the basket/chef-plate on the right. */
  .hero-label{width:clamp(210px,48vw,260px);left:0%;right:auto}
  /* Now that .hero-label is aspect-ratio-locked to the artwork, the box
     is shorter than it used to be (no more content-driven auto-height),
     so padding/gap/font are trimmed to actually fit the card's real
     interior instead of the button hanging off the bottom edge. */
  .hero-label-content{padding:14% 13% 5%;gap:3px}
  /* The full sentence wraps to 3 cramped lines at this size and spills
     past the card artwork — swap to a shorter one that actually fits. */
  .hero-label-hint--full{display:none}
  .hero-label-hint--short{display:block;font-size:clamp(12px,3vw,15px);line-height:1.15}
  #reset-btn{padding:4px 12px}

  /* Menu: a handful of the scattered picnic objects read as genuinely
     tiny on a phone screen even though their vw-based size is
     proportionally identical to desktop — small absolute pixel size
     just reads as "too small" on a small screen. Bump those few
     ~30%; positions/desktop sizing untouched. */
  .obj-starplate{ width:19.5vw; max-width:300px; }
  .obj-coffee{    width:18vw;   max-width:275px; }
  .obj-girl{      width:26vw;   max-width:400px; }
  .obj-chef{      width:25vw;   max-width:390px; right:1%; }
  .obj-swans{     width:19.5vw; max-width:300px; }
  /* Sits behind the sheet (default .m-obj z-index:3, below the sheet's
     5) so it tucks under the edge instead of covering any menu text.
     The sheet's right edge is ~9.8% in from the container edge, so
     right% needs to stay under that or the whole thing disappears
     under the opaque artwork instead of peeking out. */
  .obj-apple{     width:17vw;   max-width:255px; right:7%; top:68%; }
  /* left:16% sits entirely past the sheet's ~9.8% left boundary on
     mobile, so this was fully hidden behind the sheet at any size —
     nudge left so part of it actually peeks out. */
  .obj-matchbox{  width:14.3vw; max-width:215px; left:2%; }

  /* Story: swap the fixed 16:9 collage for the scrapbook stack */
  .story-section{min-height:0;display:block;padding:0}
  #story.view-active{display:block !important}
  .story-stage{display:none}
  .story-mobile{
    display:block;
    position:relative;
    padding:36px 20px 44px;
    background-image:url("../assets/story/story-bg.png");
    background-size:cover;
    background-position:center;
  }
  .story-m-note{
    max-width:360px;
    margin:-20px auto -18px;
    filter:drop-shadow(0 8px 14px rgba(45,28,28,.28));
    position:relative;
    z-index:2;
  }
  .story-m-note img{display:block;width:100%;height:auto}
  .story-m-note--callie{transform:rotate(-1.5deg)}
  .story-m-note--mom{transform:rotate(1deg)}
  .story-m-note--adrian{transform:rotate(-1deg)}
  .story-m-note--annie{transform:rotate(1.5deg)}
  .story-m-divider{
    width:110px;
    margin:4px auto 28px;
    filter:drop-shadow(0 4px 8px rgba(45,28,28,.2));
  }
  .story-m-divider img{display:block;width:100%;height:auto}
  /* A pair of polaroids (left/right) tucked between each set of notes,
     overlapping the note above by riding up under it (negative margin
     + lower z-index) so everything reads as one close-knit stack
     instead of separate pieces with gaps between them. */
  .story-m-photo-pair{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
    max-width:340px;
    margin:0 auto 6px;
  }
  .story-m-photo-pair img{
    display:block;
    width:46%;max-width:155px;
    filter:drop-shadow(0 6px 10px rgba(45,28,28,.25));
  }
  .story-m-photo-pair--1 img:first-child{transform:rotate(-4deg)}
  .story-m-photo-pair--1 img:last-child{transform:rotate(3deg)}
  .story-m-photo-pair--2 img:first-child{transform:rotate(-3deg)}
  .story-m-photo-pair--2 img:last-child{transform:rotate(4deg)}
  .story-m-photo-pair--3 img:first-child{transform:rotate(-2deg)}
  .story-m-photo-pair--3 img:last-child{transform:rotate(2deg)}

  /* Scattered decor — same real assets as the desktop collage (daisies,
     stars, the swan-topped key), sprinkled through the mobile stack
     instead of grouped in one spot, so it feels scattered "all over"
     like the desktop version rather than a single decorated corner. */
  .story-m-flourish{
    display:flex;align-items:center;justify-content:center;
    gap:18px;
    margin:16px 0;
  }
  .story-m-flourish--top,
  .story-m-flourish--bottom{gap:4px}
  .story-m-daisy{width:38px;filter:drop-shadow(0 3px 6px rgba(45,28,28,.2))}
  .story-m-daisy--sm{width:24px}
  .story-m-daisy--xs{width:15px}
  .story-m-stars{height:14px;width:auto;filter:drop-shadow(0 2px 4px rgba(45,28,28,.15))}
  /* 5 daisies flanking the star cluster on each side, fanned out —
     smallest on the outside, biggest closest to the stars. Same
     treatment top and bottom. */
  .story-m-flourish--top :nth-child(1),
  .story-m-flourish--bottom :nth-child(1){transform:rotate(-16deg)}
  .story-m-flourish--top :nth-child(2),
  .story-m-flourish--bottom :nth-child(2){transform:rotate(-12deg)}
  .story-m-flourish--top :nth-child(3),
  .story-m-flourish--bottom :nth-child(3){transform:rotate(-8deg)}
  .story-m-flourish--top :nth-child(4),
  .story-m-flourish--bottom :nth-child(4){transform:rotate(-4deg)}
  .story-m-flourish--top :nth-child(5),
  .story-m-flourish--bottom :nth-child(5){transform:rotate(-2deg)}
  .story-m-flourish--top :nth-child(7),
  .story-m-flourish--bottom :nth-child(7){transform:rotate(2deg)}
  .story-m-flourish--top :nth-child(8),
  .story-m-flourish--bottom :nth-child(8){transform:rotate(4deg)}
  .story-m-flourish--top :nth-child(9),
  .story-m-flourish--bottom :nth-child(9){transform:rotate(8deg)}
  .story-m-flourish--top :nth-child(10),
  .story-m-flourish--bottom :nth-child(10){transform:rotate(12deg)}
  .story-m-flourish--top :nth-child(11),
  .story-m-flourish--bottom :nth-child(11){transform:rotate(16deg)}
  /* Goods: swap the desktop clothesline scene for a dedicated portrait
     scene (own rope art + hand-placed positions) instead of shrinking
     the desktop row, which squeezed all four garments illegibly small. */
  .clothesline-scene{display:none}
  .goods-mobile-stage{
    display:block;
    position:relative;
    width:100%;
    aspect-ratio:1179/2096;
    margin:0 auto;
    overflow:hidden;
    background-image:url("../assets/story/story-bg.png");
    background-size:cover;
    background-position:center;
  }
  /* Matches the stage art so any gap above/below the aspect-ratio box
     on very tall/short phones still reads as continuous sky instead of
     the page's cream background peeking through. */
  #goods{
    background-image:url("../assets/story/story-bg.png");
    background-size:cover;
    background-position:center;
  }

  .goods-m-obj{
    position:absolute;
    display:block;
    height:auto;
    pointer-events:none;
    user-select:none;
  }
  .goods-m-rope{left:0;width:100%;z-index:1}
  .goods-m-rope-top{top:12%}
  .goods-m-rope-bottom{top:46%}

  .goods-m-daisy{z-index:2;filter:drop-shadow(0 3px 6px rgba(45,28,28,.2))}
  .goods-m-daisy-1{left:38%;top:36%;width:15%}
  .goods-m-daisy-2{left:87%;top:59%;width:13%}
  .goods-m-daisy-3{left:41%;top:75%;width:16%}
  .goods-m-star-1{ left:49%;top:65%;width:6%;  z-index:2;filter:drop-shadow(0 2px 4px rgba(45,28,28,.15))}
  .goods-m-stars-3{left:2%; top:69%;width:16%; z-index:2;filter:drop-shadow(0 2px 4px rgba(45,28,28,.15))}
  .goods-m-stars-2{left:84%;top:75%;width:11%; z-index:2;filter:drop-shadow(0 2px 4px rgba(45,28,28,.15))}
  .goods-m-sheep-center{left:47%;top:67%;width:18%;z-index:2}
  .goods-m-sheep-left{  left:1%; top:73%;width:34%;z-index:2}
  .goods-m-sheep-right{ left:71%;top:71%;width:29%;z-index:2}

  /* Garments — real PNGs include their own clothespins (same assets as
     desktop). Reuses .merch-item so js/app.js's existing
     `.merch-item[data-goods]` click wiring picks these up automatically;
     just positioned absolutely instead of laid out in a flex row, and
     with the desktop hover-swing/idle-sway animation switched off so
     the hand-placed percentages below hold exactly. */
  .goods-mobile-stage .merch-item{
    position:absolute;
    display:block;
    animation:none;
    transform:none;
    cursor:pointer;
    z-index:3;
  }
  .goods-mobile-stage .merch-item:hover{animation:none}
  .goods-m-img{
    display:block;
    width:100%;height:auto;
    pointer-events:none;
    user-select:none;
    filter:drop-shadow(0 4px 8px rgba(45,28,28,.15));
  }
  .goods-m-tee-graphic{left:9%; top:12%;width:36%}
  .goods-m-tee-logo{   left:57%;top:12%;width:35%}
  .goods-m-tee-baby{   left:16%;top:49%;width:30%}
  .goods-m-socks{      left:65%;top:47%;width:17%}
  .goods-m-socks .goods-m-img{transform:rotate(-8deg)}

  .goods-m-socials{
    position:absolute;
    left:0;top:87%;width:100%;
    display:flex;align-items:center;justify-content:center;gap:22px;
    z-index:4;
  }
  .goods-m-socials a{
    display:block;color:#fff;opacity:.92;
    filter:drop-shadow(0 1px 3px rgba(45,28,28,.35));
    transition:opacity .15s ease;
  }
  .goods-m-socials a:hover{opacity:1}

  /* Newsletter: swap the fixed 16:9 stage for a legible mobile stack.
     Same real art as desktop (kraft backing, paper sheet, plaque, wax
     seal, scattered decor) — just stacked instead of scattered inside
     a shrunk 16:9 box, so text is readable and the form is usable. */
  .newsletter-section{min-height:0;display:block;padding:0}
  #newsletter.view-active{display:block !important}
  .news-stage{display:none}
  .news-mobile{
    display:block;
    position:relative;
    padding:36px 20px 50px;
    background-image:url("../assets/story/story-bg.png");
    background-size:cover;
    background-position:center;
  }
  .news-m-swans{
    display:block;
    width:110px;
    margin:24px auto 14px;
    filter:drop-shadow(0 4px 8px rgba(45,28,28,.2));
  }

  /* The paper sheet, sitting on its kraft backing — same pairing as
     desktop, just stacked instead of offset behind/under. */
  .news-m-sheet-wrap{
    position:relative;
    max-width:360px;
    margin:0 auto 26px;
  }
  .news-m-kraft{
    position:absolute;
    left:50%;top:10px;
    width:92%;
    transform:translateX(-50%) rotate(-2deg);
    z-index:1;
    filter:drop-shadow(0 10px 20px rgba(45,28,28,.25));
  }
  .news-m-sheet{
    position:relative;
    z-index:2;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:2px;
    box-shadow:0 14px 30px rgba(45,28,28,.28);
    padding:22px 20px 20px;
    text-align:center;
    transform:rotate(-0.5deg);
  }
  .news-m-title{
    font-family:"Cormorant Garamond",serif;
    font-weight:600;font-size:34px;line-height:.95;
    letter-spacing:.01em;text-transform:uppercase;
    color:var(--olive);margin:0 0 8px;
  }
  .news-m-tagline{
    font-family:"Cormorant Garamond",serif;
    font-size:12px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--olive);opacity:.9;margin:0 0 14px;
  }
  .news-m-star-row{
    display:flex;align-items:center;justify-content:center;
    gap:12px;margin:0 0 18px;
  }
  .news-m-star-row--bottom{margin:18px 0 0}
  .news-m-star-row img{height:9px;width:auto;display:block}
  .news-m-columns{
    display:flex;flex-direction:column;gap:18px;
  }
  .news-m-photo-box{
    aspect-ratio:16/9;
    border:2px dashed var(--line);border-radius:6px;
    background:rgba(239,233,208,.85);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:8px;
  }
  .news-m-photo-box::before{
    content:"PHOTO";
    font-family:"Caveat",cursive;font-size:14px;font-weight:600;
    color:var(--brown);opacity:.55;
    text-transform:uppercase;letter-spacing:.04em;
  }
  .news-m-col-title{
    font-family:"Cormorant Garamond",serif;
    font-size:14px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--olive);margin:0;
    padding-bottom:6px;border-bottom:1px solid var(--line);
    text-align:left;
  }
  .news-m-wax-seal{
    position:absolute;
    right:-8px;bottom:-14px;
    width:56px;z-index:3;
    filter:drop-shadow(0 4px 8px rgba(45,28,28,.25));
  }

  /* Sign-up widget — the real plaque artwork as background, matching
     desktop's .news-plaque instead of a plain CSS card. */
  .news-m-plaque{
    position:relative;
    max-width:320px;
    margin:0 auto 4px;
    display:flex;align-items:center;justify-content:center;
  }
  .news-m-plaque-bg{width:100%;height:auto;display:block}
  .news-m-plaque-content{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:0 15%;
    text-align:center;
  }
  .news-m-plaque-head{
    font-family:"Cormorant Garamond",serif;
    font-size:15px;font-weight:600;
    color:var(--olive);margin:0 0 2px;
  }
  .news-m-plaque-sub{
    font-family:"Cormorant Garamond",serif;
    font-size:10px;color:var(--brown);
    margin:0 0 8px;line-height:1.2;
  }
  .news-m-plaque-form{display:flex;gap:5px;justify-content:center;flex-wrap:nowrap}
  .news-m-plaque-input{
    font-family:"Cormorant Garamond",serif;font-size:9px;
    padding:5px 8px;width:72px;min-width:0;
    border:1px solid var(--line);border-radius:999px;
    background:#fffdf6;outline:none;
  }
  .news-m-plaque-input:focus{border-color:var(--olive)}
  .news-m-plaque-btn{
    font-family:"Cormorant Garamond",serif;
    font-size:8.5px;font-weight:600;
    letter-spacing:.03em;text-transform:uppercase;
    padding:5px 10px;border:none;border-radius:999px;
    background:var(--olive);color:#fffdf6;
    cursor:pointer;white-space:nowrap;
  }
  .news-m-plaque-btn:disabled{background:var(--brown);cursor:default;opacity:1}
  .news-m-plaque-content .newsletter-error{font-family:"Cormorant Garamond",serif;font-size:8.5px;color:#a3402c;margin:3px 0 0;line-height:1.15;}

  /* Scattered decor, same real assets as desktop — spread across a
     field instead of lined up in one small row, sizes varied like
     the desktop scene rather than all shrunk to the same size. */
  .news-m-decor{
    position:relative;
    width:100%;
    max-width:420px;
    height:160px;
    margin:0 auto;
  }
  .news-m-decor img{position:absolute;display:block}
  .news-m-fork{
    right:8%;top:-14px;width:100px;
    transform:rotate(32deg);
    filter:drop-shadow(0 4px 8px rgba(45,28,28,.2));
  }
  .news-m-papaya{
    left:2%;top:-6px;width:125px;
    transform:rotate(-6deg);
    filter:drop-shadow(0 5px 10px rgba(45,28,28,.22));
  }
  .news-m-ladybug{
    left:44%;top:44%;width:58px;
    transform:rotate(-14deg);
    filter:drop-shadow(0 3px 6px rgba(45,28,28,.2));
  }
}

.wip-badge{
  display:inline-block;
  margin:10px 0 0;
  padding:4px 14px;
  font-family:"Cormorant Garamond",serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#512800;
  background:rgba(153,153,51,.18);
  border:1px solid rgba(153,153,51,.55);
  border-radius:999px;
  vertical-align:middle;
}

/* Scalloped newsletter label in header */
.cal-news-label{
  position:relative;
  flex:0 1 360px;
  max-width:360px;
  aspect-ratio:1024/520;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cal-news-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
}
.cal-news-content{
  position:relative;z-index:2;
  text-align:center;
  padding:0 12%;
  line-height:1.1;
}
.cal-news-head{font-family:"Cormorant Garamond",serif;font-size:17px;font-weight:600;color:var(--olive);margin:0 0 1px;}
.cal-news-sub{font-family:"Cormorant Garamond",serif;font-size:11px;color:var(--brown);margin:0 0 6px;}
.cal-news-form{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap;}
.cal-news-input{font-family:"Cormorant Garamond",serif;font-size:11px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:#fffdf6;min-width:105px;max-width:135px;outline:none;}
.cal-news-input:focus{border-color:var(--olive);}
.cal-news-btn{font-family:"Cormorant Garamond",serif;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border:none;border-radius:999px;background:var(--olive);color:#fffdf6;cursor:pointer;white-space:nowrap;}
.cal-news-btn:hover{opacity:.88;}
.cal-news-btn:disabled{background:var(--brown);cursor:default;opacity:1;}
.cal-news-content .newsletter-error{font-family:"Cormorant Garamond",serif;font-size:9.5px;color:#a3402c;margin:3px 0 0;line-height:1.15;}

/* Newsletter — REMOVED from markup, old rules kept commented out
.cal-newsletter{
  margin:22px auto 4px;
  max-width:560px;
  text-align:center;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(153,153,51,.07);
}
.cal-news-head{
  font-family:"Cormorant Garamond",serif;
  font-size:24px;font-weight:600;letter-spacing:.02em;
  color:var(--olive);margin:0 0 4px;
}
.cal-news-sub{
  font-family:"Cormorant Garamond",serif;
  font-size:16px;color:var(--brown);margin:0 0 14px;opacity:.85;
}
.cal-news-form{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
}
.cal-news-input{
  font-family:"Cormorant Garamond",serif;font-size:15px;
  padding:9px 14px;min-width:220px;
  border:1px solid var(--line);border-radius:999px;
  background:#fffdf6;color:var(--deep);outline:none;
}
.cal-news-input:focus{border-color:var(--olive);}
.cal-news-btn{
  font-family:"Cormorant Garamond",serif;font-size:15px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:9px 22px;border:none;border-radius:999px;cursor:pointer;
  background:var(--olive);color:#fffdf6;transition:opacity .2s;
}
.cal-news-btn:hover{opacity:.88;}
.cal-news-btn:disabled{background:var(--brown);cursor:default;opacity:1;}
*/

/* ============================================================
   NEWSLETTER — blank fill-in-later template
   Same pattern as STORY: one stage locked to 16:9, every object
   fixed via left/top/width % of .news-stage, NOT draggable.
   The sheet's internal type uses cqw (container-query width)
   units off .news-stage so it scales with the stage at any size,
   the same way the % positions keep the scattered PNGs in place.
   ============================================================ */
.newsletter-section{
  scroll-margin-top:56px;
  padding:0;
  border-top:1px solid var(--line);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  /* Full-bleed background lives on the SECTION (fills the viewport at
     any aspect ratio), not on .news-stage below — a fixed 16:9 box
     with the photo on itself left cream bars on non-16:9 screens. */
  background-color:var(--cream);
  background-image:url("../assets/story/story-bg.png");
  background-size:cover;
  background-position:center;
}
/* Same specificity fix as #story — .view-section.view-active forces
   display:block !important, which was silently beating the flex rule
   above (this page never got the fix Story did, so it never actually
   centered on desktop either). */
#newsletter.view-active{display:flex !important}

.news-stage{
  position:relative;
  width:100%;
  max-width:1600px;
  aspect-ratio:16/9;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  container-type:inline-size;
}

/* This page is a fixed static composite — the sitewide ambient bees
   don't belong here, same treatment as Story. */
body:has(#newsletter.view-active) .bee-layer{ display:none; }

.news-obj{
  position:absolute;
  display:block;
  height:auto;
  pointer-events:none;
  user-select:none;
}

.news-kraft-backing{ left:8%;  top:16%; width:36%;  transform:rotate(-2deg); z-index:3; }
.news-swans{         left:41%; top:1%;  width:17%;  transform:rotate(0deg); z-index:20; }
.news-papaya{        left:2%;  top:5%;  width:13%;  transform:rotate(8deg); z-index:6; }
.news-ladybug-1{      left:20%; top:2%;  width:8%;   transform:rotate(-12deg); z-index:6; }
.news-ladybug-2{      left:84%; top:64%; width:5%;   transform:rotate(12deg); z-index:6; }
.news-fork{          left:81%; top:1%;  width:15%;  transform:rotate(25deg); z-index:6; }
.news-spoon{         left:2%;  top:67%; width:15%;  transform:rotate(15deg); z-index:6; }
.news-daisy-1{        left:2%;  top:55%; width:9%;   z-index:6; }
.news-daisy-2{        left:88%; top:20%; width:8%;   z-index:6; }
.news-daisy-3{        left:46%; top:90.5%; width:5%; z-index:6; }
.news-toffee{        left:90%; top:42%; width:17%;  z-index:6; }
.news-plaque{
  left:74%; top:71%; width:20%;
  transform:rotate(-8deg);
  z-index:30;
  aspect-ratio:2368/1288;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.news-plaque-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  pointer-events:none;
}
.news-plaque-content{
  position:relative; z-index:2;
  text-align:center;
  padding:0 14%;
  line-height:1.15;
}
.news-plaque-head{
  font-family:"Cormorant Garamond",serif;
  font-size:1.05cqw;
  font-weight:600;
  color:var(--olive);
  margin:0 0 .15cqw;
}
.news-plaque-sub{
  font-family:"Cormorant Garamond",serif;
  font-size:.68cqw;
  color:var(--brown);
  margin:0 0 .4cqw;
}
.news-plaque-form{
  display:flex;
  gap:.4cqw;
  justify-content:center;
  flex-wrap:nowrap;
}
.news-plaque-input{
  font-family:"Cormorant Garamond",serif;
  font-size:.68cqw;
  padding:.28cqw .55cqw;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fffdf6;
  min-width:6.5cqw;
  max-width:8.5cqw;
  outline:none;
}
.news-plaque-input:focus{ border-color:var(--olive); }
.news-plaque-btn{
  font-family:"Cormorant Garamond",serif;
  font-size:.62cqw;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.28cqw .7cqw;
  border:none;
  border-radius:999px;
  background:var(--olive);
  color:#fffdf6;
  cursor:pointer;
  white-space:nowrap;
}
.news-plaque-btn:hover{ opacity:.88; }
.news-plaque-btn:disabled{ background:var(--brown); cursor:default; opacity:1; }
.news-plaque-content .newsletter-error{font-family:"Cormorant Garamond",serif;font-size:.58cqw;color:#a3402c;margin:.3cqw 0 0;line-height:1.15;}
.news-wax-seal{       left:74%; top:45%; width:6%;   z-index:20; }
.news-star-a{         left:30%; top:5%;  width:2.5%; z-index:6; }
.news-star-b{         left:62%; top:6%;  width:2.5%; z-index:6; }

/* ---------- The sheet itself — live HTML, not an image ---------- */
.news-sheet{
  position:absolute;
  left:15%; top:12%; width:68%;
  z-index:10;
  transform:rotate(-0.5deg);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:2px;
  box-shadow:0 14px 34px rgba(45,28,28,.28);
  padding:2cqw 3.4cqw 1.8cqw;
}

.news-masthead{ text-align:center; margin:0 auto; }

.news-title{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:4cqw;
  line-height:.93;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--olive);
  margin:0 0 .45cqw;
}

.news-tagline{
  font-family:"Cormorant Garamond",serif;
  font-size:1cqw;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--olive);
  margin:0 0 .8cqw;
  opacity:.9;
}

.news-star-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.8cqw;
  margin:0 0 1.3cqw;
}
.news-star-row--bottom{ margin:1.3cqw 0 0; }
.news-star-icon{
  height:1cqw;
  width:auto;
  display:block;
}

.news-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.4cqw;
}

.news-col{ display:flex; flex-direction:column; }

.news-photo-box{
  aspect-ratio:16/9;
  border:1px dashed var(--line);
  border-radius:3px;
  background:rgba(153,153,51,.05);
  margin-bottom:.8cqw;
}

.news-text-box{ min-height:3.8cqw; }

.news-col-title{
  font-family:"Cormorant Garamond",serif;
  font-size:1.15cqw;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--olive);
  margin:0;
  padding-bottom:.3cqw;
  border-bottom:1px solid var(--line);
}