@font-face{font-family:'Margo';src:url(../fonts/margo.woff2) format('woff2');font-weight:600 900;font-display:block;}
  @font-face{font-family:'Franklyns';src:url(../fonts/franklyns.woff2) format('woff2');font-weight:100 900;font-display:block;}
  @font-face{font-family:'Zilla';src:url(../fonts/zilla.woff2) format('woff2');font-weight:100 450;font-display:block;}
  @font-face{font-family:'Zilla';src:url(../fonts/zilla-2.woff2) format('woff2');font-weight:451 650;font-display:block;}
  @font-face{font-family:'Zilla';src:url(../fonts/zilla-3.woff2) format('woff2');font-weight:651 900;font-display:block;}

  /* Every <img> carries width/height attributes so the browser can reserve the
     right space before the picture arrives. Those are a layout hint only — CSS
     still decides the rendered size, and without this line the attribute height
     would stretch any image whose width CSS controls. Rules that set an explicit
     height (the little u mark, for one) still win on specificity. */
  img{height:auto;}
  :root{
    --cream:#F4E1C3;
    --paper:#FFF9F5;
    --red:#C1282D;
    --darkred:#8E191F;
    --navy:#363E4D;
    --sage:#9EA9A3;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Zilla',Georgia,serif;
    background:var(--paper);
    color:var(--navy);
    overflow-x:hidden;
  }
  .mono{font-family:'Zilla',Georgia,serif;}
  .script{font-family:'Franklyns',cursive;}

  /* typography: no orphans/widows */
  p, li, .sec__sub, .gcopy__body, .variety__desc, .beltblock__copy,
  .mitem__name, .mitem__addr, .gcopy__note{
    text-wrap:pretty;
  }
  h1, h2, h3, .gcopy__lead, .gcopy__title, .signup__title,
  .goods__heading, .wendellblock__heading, .menurow__title, .menuboard__script,
  .variety__name{
    text-wrap:balance;
  }
  /* display face — everything the old build set in bold Baloo */
  h1, h2, h3, .gcopy__title, .signup__title,
  .goods__heading, .wendellblock__heading, .word-block{
    font-family:'Margo',sans-serif;
  }

  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .skip-link{
    position:absolute;left:-9999px;top:0;z-index:300;
    background:var(--red);color:#FFF9F5;
    font-weight:500;padding:12px 20px;border-radius:0 0 10px 0;
    text-decoration:none;
  }
  .skip-link:focus{left:0;}
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:3px solid var(--red);
    outline-offset:3px;
  }
  .eatblock a:focus-visible, .eatblock button:focus-visible, .eatblock input:focus-visible,
  .wendellblock a:focus-visible{
    outline-color:#FFF9F5;
  }

  .btn{
    background:var(--red);color:var(--paper);
    padding:11px 22px;border-radius:6px;border:3px solid var(--navy);
    font-weight:500;cursor:pointer;font-size:16px;font-family:'Zilla',Georgia,serif;
    letter-spacing:.02em;
    transition:transform .1s, filter .15s;
    text-decoration:none;display:inline-block;
  }
  .btn:hover{filter:brightness(1.07);}
  .btn:active{transform:translateY(2px);}        /* mechanical key-press */
  @media (prefers-reduced-motion: reduce){ .btn{transition:none;} }
  .btn--ghost{background:var(--cream);color:var(--navy);}
  .btn--navy{background:var(--navy);color:var(--cream);}

  /* ---------- sections ---------- */
  section{padding:88px 28px;}
  .wrap{max-width:1060px;margin:0 auto;}
  .sec__sub{font-size:18px;max-width:640px;opacity:.85;}

  /* ================= restored working-area styles ================= */
  .ceiling{position:relative;z-index:60;will-change:transform;}
  .masthead{
    position:relative;
    background:var(--navy);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:18px 28px;
  }
  .masthead__u{justify-self:start;display:block;line-height:0;}
  .masthead__u img{width:52px;height:52px;display:block;}
  .masthead__wordmark{justify-self:center;display:block;line-height:0;font-size:0;}
  .masthead__wordmark a{display:block;line-height:0;}
  .masthead__wordmark img{width:min(430px,56vw);display:block;}
  .masthead__menu{
    justify-self:end;
    background:none;border:none;cursor:pointer;
    display:flex;flex-direction:column;gap:6px;
    padding:8px;
  }
  .masthead__menu span{
    display:block;width:30px;height:4px;border-radius:2px;background:var(--cream);
    transition:transform .25s, opacity .2s;
  }
  .masthead__menu[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg);}
  .masthead__menu[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .masthead__menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

  .mainnav{
    position:absolute;top:calc(100% + 10px);right:24px;
    display:flex;flex-direction:column;
    min-width:210px;
    background:#FFF9F5;
    border:3px solid var(--navy);
    border-radius:14px;
    padding:10px;
    box-shadow:0 14px 26px rgba(54,62,77,.28);
    z-index:80;
  }
  .mainnav[hidden]{display:none;}
  .mainnav a{
    font-weight:500;font-size:17px;
    text-transform:uppercase;letter-spacing:.06em;
    color:var(--navy);text-decoration:none;
    padding:11px 16px;border-radius:9px;
    transition:background .15s, color .15s;
  }
  .mainnav a:hover{background:var(--cream);color:var(--red);}

  .coinrain{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden;}
  .coinrain img{position:absolute;top:0;left:0;will-change:transform;}

  .coin{background:none;border:none;padding:0;cursor:pointer;perspective:420px;}
  .coin__inner{
    position:relative;display:block;width:52px;height:52px;
    transform-style:preserve-3d;
    transition:transform 1.15s cubic-bezier(.22,.72,.28,1);
    will-change:transform;
  }
  .coin__face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;}
  .coin__face--back{transform:rotateY(180deg);}
  @media (prefers-reduced-motion: reduce){ .coin__inner{transition:none;} }



  /* tabletop content block — parallax window */
  .tabletop{
    position:relative;
    height:115.9vw;min-height:420px;   /* matches the hero art's ratio */
    overflow:hidden;
    line-height:0;
  }
  .tabletop .table-img{
    position:absolute;
    left:0;top:-5%;
    width:100%;height:110%;
    object-fit:cover;object-position:left top;
    will-change:transform;
  }
  .word-block{
    position:absolute;
    left:6vw;bottom:6vw;
    z-index:1;
    font-weight:800;
    font-size:clamp(24px,5.5vw,88px);
    line-height:.95;
    letter-spacing:.01em;
    text-transform:uppercase;
    color:rgba(244,225,195,.85);
    will-change:transform;
  }
  .word-block .wb-line{display:block;}
  /* the branded sausage-smiley u from the logo, standing in for the U in WURST.
     Sized so its bowl matches Margo's cap height (0.71em) and its dots ride
     above it, exactly as the real umlaut does. An <svg> is a replaced element,
     so its bottom edge sits on the text baseline on its own. */
  .brandu{
    height:.969em;width:auto;
    fill:currentColor;
    vertical-align:baseline;
    margin:0 .08em;
  }
  .word-block .wb-script{
    display:block;
    font-family:'Franklyns',cursive;
    font-weight:400;
    text-transform:none;
    font-size:.85em;
    line-height:1;
    text-align:left;
    padding-left:2.6em;
  }
  .fork-hand{
    position:absolute;
    /* 50% larger and swung 5deg clockwise; right/bottom re-solved so the sleeve
       still enters at the same point on the bottom-right corner */
    /* start point nudged north and inboard so the prongs break the bottom edge
       almost at once, on a line centred between the coasters and the headline */
    right:-85.47vw;bottom:-101.86vw;
    width:138.6vw;
    z-index:2;
    transform-origin:100% 50%;
    will-change:transform;
    pointer-events:none;
  }

  /* seam block */


  /* belt lane — rides along the bottom of the newsletter block */
  .beltzone{
    position:absolute;left:0;right:0;top:0;bottom:0;
    overflow:visible;          /* plates fall past the divider, in front of it */
    pointer-events:none;
  }
  .plate{
    position:absolute;
    bottom:20px;               /* base sits down into the belt bar */
    left:0;
    z-index:1;                 /* above the divider, always behind Wendell */
    transform:translateX(calc(-25vw - 100%));   /* -100% keeps waiting meals fully off-screen */
    animation:beltride 12s linear infinite;
    animation-delay:var(--d,0s);
  }
  /* each plate is a different width — centre them all on the funnel */
  .plate--1,.plate--4{--dx:21px;}   /* baked potato (narrowest) */
  .plate--2,.plate--5{--dx:-8px;}   /* cheesesteak (widest) */
  .plate--2{--d:2s;}
  .plate--3{--d:4s;}
  .plate--4{--d:6s;}
  .plate--5{--d:8s;}
  .plate--6{--d:10s;}
  .jig{display:block;animation:jig .16s linear infinite alternate;}
  @keyframes jig{
    from{transform:translateY(0) rotate(-.5deg);}
    to  {transform:translateY(-1.8px) rotate(.5deg);}
  }
  .plate img{
    display:block;height:74px;width:auto;   /* +15% */
    filter:drop-shadow(0 3px 4px rgba(54,62,77,.22));
    transform-origin:50% 100%;
    animation:squashfall 12s linear infinite;
    animation-delay:var(--d,0s);
  }
  @keyframes squashfall{
    0%,87.9%{transform:scale(1,1);}
    88.5%   {transform:scale(1.12,.82);}
    89.2%   {transform:scale(.94,1.06);}
    91%     {transform:scale(.72,1.42);}
    91.2%,100%{transform:scale(1,1);}
  }
  @keyframes beltride{
    0%    {transform:translateX(calc(-25vw - 100%)) translateY(0); opacity:1;}
    85%   {transform:translateX(calc(100vw - 195px + var(--dx, 0px))) translateY(0); opacity:1;
           animation-timing-function:steps(1,end);}
    88%   {transform:translateX(calc(100vw - 195px + var(--dx, 0px))) translateY(0); opacity:1;
           animation-timing-function:cubic-bezier(.7,0,1,1);}
    /* 3) drops behind Wendell and is gone almost at once */
    89.9% {transform:translateX(calc(100vw - 195px + var(--dx, 0px))) translateY(68px); opacity:1;}
    90.3% {transform:translateX(calc(100vw - 195px + var(--dx, 0px))) translateY(96px); opacity:0;}
    90.4% {transform:translateX(calc(-25vw - 100%)) translateY(0); opacity:0;}
    99.9% {transform:translateX(calc(-25vw - 100%)) translateY(0); opacity:0;}
    100%  {transform:translateX(calc(-25vw - 100%)) translateY(0); opacity:1;}
  }
  /* stacked (small-screen) variant: Wendell sits at the bottom of the block, so the
     meal falls its full height and expires behind the funnel rather than mid-air */
  @keyframes beltride--stack{
    0%    {transform:translateX(calc(-25vw - 100%)) translateY(0); opacity:1;}
    85%   {transform:translateX(calc(100vw - 195px + var(--dx, 0px))) translateY(0); opacity:1;
           animation-timing-function:steps(1,end);}
    87%   {transform:translateX(calc(100vw - 195px + var(--dx, 0px))) translateY(0); opacity:1;
           animation-timing-function:cubic-bezier(.55,0,1,1);}
    95%   {transform:translateX(calc(100vw - 195px + var(--dx, 0px))) translateY(var(--fall,240px)); opacity:1;}
    95.1% {transform:translateX(calc(100vw - 195px + var(--dx, 0px))) translateY(var(--fall,240px)); opacity:0;}
    95.2% {transform:translateX(calc(-25vw - 100%)) translateY(0); opacity:0;}
    99.9% {transform:translateX(calc(-25vw - 100%)) translateY(0); opacity:0;}
    100%  {transform:translateX(calc(-25vw - 100%)) translateY(0); opacity:1;}
  }
  @keyframes squashfall--stack{
    0%,86.9%  {transform:scale(1,1);}
    87.4%     {transform:scale(1.12,.82);}
    88%       {transform:scale(.94,1.06);}
    90%,95%   {transform:scale(.78,1.34);}   /* holds the stretch for the whole drop */
    95.1%,100%{transform:scale(1,1);}
  }
  @media (prefers-reduced-motion: reduce){
    .plate,.jig,.plate img{animation:none;}
    .plate{opacity:0;}
  }
  .wendellblock{
    position:relative;
    height:279px;              /* same total height, now a single navy bar */
    background:var(--navy);
  }
  .wendellblock__heading{
    position:absolute;left:7vw;bottom:16px;z-index:2;
    font-size:clamp(30px,4.2vw,52px);font-weight:800;
    letter-spacing:.04em;text-transform:uppercase;line-height:1;
    color:var(--cream);
  }
  @media(max-width:560px){
    .wendellblock__heading{left:6vw;}
  }
  .grinder{
    position:absolute;
    right:30px;
    top:-15px;                 /* bottom edge expires inside the border band */
    z-index:20;                /* Wendell is the top layer */
    width:325px;height:auto;   /* back to full size */
    display:block;
  }
  /* both Wendells are buttons that open his portrait */
  .wendellpop{
    -webkit-appearance:none;appearance:none;
    border:0;padding:0;background:none;line-height:0;
    cursor:pointer;
  }
  .wendellpop img{display:block;width:100%;height:auto;}
  .wendellpop:hover img{filter:brightness(1.05);}

  /* signup */
  .beltblock{
    position:relative;
    background:var(--navy);
    height:172px;
  }
  .belt-bar{                   /* the conveyor itself */
    position:absolute;left:0;right:0;bottom:0;
    height:64px;
    background:var(--cream);
  }
  .signup__title{
    font-size:clamp(30px,4.6vw,50px);
    font-weight:800;
    display:flex;align-items:center;justify-content:center;
    gap:.3em;flex-wrap:wrap;
  }
  @keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
  .eatsignup form{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap;}
  .eatsignup input{
    font-family:'Zilla',Georgia,serif;font-size:15px;
    padding:13px 18px;border:3px solid var(--navy);border-radius:6px;
    width:min(360px,80vw);background:var(--paper);color:var(--navy);
  }

  /* footer */
  footer{background:var(--cream);color:var(--navy);text-align:center;padding:40px 20px 30px;}
  footer .script{color:var(--red);font-size:30px;}
  footer .mono{font-size:14px;letter-spacing:.1em;margin-top:12px;display:block;color:#555C6B;}
  .footer__ig{color:var(--darkred);text-decoration:none;border-bottom:1px solid rgba(142,25,31,.55);}
  .footer__ig:hover{color:var(--red);border-bottom-color:var(--red);}

  @media(max-width:560px){
    .masthead{padding:14px 18px;}
    .masthead__u img{width:40px;height:40px;}
    .coin__inner{width:40px;height:40px;}
  }

  /* tan intro section */
  .intro{
    background:var(--navy);
    text-align:center;
    padding:76px 28px 64px;
  }
  .intro__text{
    max-width:840px;margin:0 auto;
    font-family:'Franklyns',cursive;
    font-size:clamp(30px,3.9vw,48px);   /* clearly outranks the body copy below */
    line-height:1.25;
    font-weight:400;
    line-height:1.4;
    color:var(--cream);
  }
  .intro__text--2{
    margin-top:22px;
    font-family:'Zilla',Georgia,serif;
    font-size:clamp(19px,2.1vw,25px);
    line-height:1.4;
    font-weight:400;
    opacity:.92;
  }
  /* the photo band: full-bleed out of the intro's 28px gutter, panning at a
     constant rate. Purely decorative — nothing here responds to the pointer. */
  .phostrip{
    margin:0 -28px;
    overflow:hidden;
    line-height:0;
    pointer-events:none;
    -webkit-user-select:none;user-select:none;
  }
  /* the band is bracketed by the same piping the navy blocks use elsewhere,
     so it reads as a framed strip rather than a hole cut in the section */
  .phostrip__pipe{margin:0 -28px;}
  .phostrip__pipe:first-of-type{margin-top:64px;}
  .phostrip__track{
    display:flex;width:max-content;
    will-change:transform;
  }
  .phostrip__img{
    display:block;
    height:clamp(340px,41.4vw,538px);   /* and another 15% */
    width:auto;
    -webkit-user-drag:none;
  }
  .goods{margin-top:56px;scroll-margin-top:24px;}   /* the anchor lands on the heading, not the copy above */
  .goods__heading{
    font-size:clamp(34px,4.6vw,58px);font-weight:800;
    text-transform:uppercase;letter-spacing:.04em;line-height:1;
    color:var(--cream);
    margin-bottom:30px;
  }
  .menuboard{
    position:relative;
    max-width:840px;margin:0 auto;
    background:#FFF9F5;
    border:26px solid transparent;
    border-image:url(../img/menuboard-frame.webp) 48 / 26px round;
    filter:drop-shadow(0 16px 26px rgba(40,45,58,.32));
    transform:rotate(-.6deg);
    padding:34px 34px 30px;
    text-align:center;
  }
  .menurow__title{
    font-family:'Franklyns',cursive;
    font-weight:400;
    font-size:clamp(28px,3.2vw,38px);
    color:var(--red);
    transform:rotate(-1deg);
    margin-bottom:14px;
  }
  .menurow__items{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
    align-items:start;
  }
  .mitem{display:flex;flex-direction:column;gap:3px;}
  .mitem__name{font-weight:500;font-size:19px;line-height:1.2;color:var(--navy);}
  /* Reference information: quieter than both the name and the date, so the red
     still carries the "when" and each entry reads as one thing, not three. */
  .mitem__addr{
    font-family:'Zilla',Georgia,serif;font-size:15px;line-height:1.3;
    letter-spacing:.02em;color:rgba(54,62,77,.78);
  }
  a.mitem__addr{
    text-decoration:underline;text-decoration-color:rgba(54,62,77,.28);
    text-decoration-thickness:1px;text-underline-offset:2px;
  }
  a.mitem__addr:hover,a.mitem__addr:focus-visible{
    color:var(--navy);text-decoration-color:rgba(54,62,77,.65);
  }
  a.mitem__addr:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px;}
  .mitem__loc{font-family:'Zilla',Georgia,serif;font-size:17px;letter-spacing:.03em;color:var(--red);}
  .menuboard__rule{
    height:0;border-bottom:3px dashed rgba(54,62,77,.3);
    margin:26px 8% 24px;
    transform:rotate(.4deg);
  }
  .menuboard__script{
    font-family:'Franklyns',cursive;
    font-size:clamp(38px,5vw,62px);
    color:var(--red);
    margin-top:34px;
    transform:rotate(-1.2deg);
  }
  .menuboard__btns{margin-top:22px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  @media(max-width:720px){
    .menurow__items{grid-template-columns:1fr;gap:12px;}
    .menuboard{padding:32px 22px 30px;}
  }

  .pairborder{line-height:0;}
  .pairborder div{height:5px;}

  /* three-tone piping: outer 5 / inner 10 / outer 5 */
  .tripborder{line-height:0;--t-out:var(--darkred);--t-in:var(--red);}
  .tripborder .t-out{width:100%;height:5px;background:var(--t-out);}
  .tripborder .t-in{width:100%;height:10px;background:var(--t-in);}
  .tripborder--tan{--t-out:var(--red);--t-in:var(--cream);}
  /* the piping that closes the eating block: Wendell overhangs the bottom of that
     block on narrow screens and was painting over the band, so it sits in front */
  .tripborder--front{position:relative;z-index:6;}

  /* frieze band + diamond wallpaper */
  .wallpaper{
    position:relative;
    min-height:85vh;
    background-color:var(--cream);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99.31 165.52'%3E%3Crect width='99.31' height='165.52' fill='%23F4E1C3'/%3E%3Cpolygon points='49.655 0 99.31 82.76 49.655 165.52 0 82.76' fill='%239EA9A3'/%3E%3C/svg%3E");
    background-size:10vw 16.6667vw;
    background-position:top center;
  }

  /* sausage-string placeholder: 3-frame stepped loop, no real translation */
  .beltwrap{position:relative;}
  .wallpaper--south{min-height:85vh;padding:8vh 7vw 9vh;}
  .gallery{max-width:1100px;margin:0 auto;}
  /* the piping below Wendell */
  .aboutband{position:relative;z-index:30;}   /* both animations pass behind it */
  #varieties{scroll-margin-top:24px;}
  .grow{
    display:grid;
    grid-template-columns:minmax(0,44%) minmax(0,1fr);
    gap:46px;align-items:center;
    margin-bottom:96px;
  }
  /* the framed copy panel loses 108px to its own frame and padding, so below 900px
     a two-column grow leaves too little room to set the subhead on one line */
  @media(max-width:899px){ .grow{grid-template-columns:minmax(0,1fr);gap:26px;} }
  .gphoto{
    display:block;
    width:100%;height:auto;
    filter:drop-shadow(0 18px 26px rgba(40,45,58,.38));
  }
  .gphoto--1{transform:rotate(-3deg);}
  .gphoto--2{transform:rotate(2.5deg);}
  .gphoto--3{transform:rotate(-2deg);}
  .gcopy{
    background:#FFF9F5;
    border:26px solid transparent;
    border-image:url(../img/menuboard-frame.webp) 48 / 26px round;
    padding:26px 28px;
    text-align:left;
    color:var(--navy);
    filter:drop-shadow(0 16px 22px rgba(40,45,58,.34));
  }
  .gcopy__lead{
    font-family:'Margo',sans-serif;     /* same face and weight as the other ABOUT subheads */
    font-size:clamp(18px,2.4vw,30px);   /* matches .gcopy__title, with a touch more give on phones */
    font-weight:800;
    line-height:1.14;
    text-wrap:wrap;        /* balance was splitting "for the" onto its own line */
    margin-bottom:18px;
  }
  .gcopy__lead .script{
    font-family:inherit;font-weight:inherit;
    font-size:1em;                      /* same size as the rest of the line */
    color:var(--red);
  }
  /* the two clauses never share a line — "King of the Grill." always starts its own */
  .gcopy__lead .lead-line{display:block;}
  /* phrases that must never break across lines */
  .nb{white-space:nowrap;}
  /* the coupling holds at every width now the lead is set in Margo at the same size
     as its sibling subheads — "Premium sausages" and "for the" each stay whole, and
     the line breaks between them when the panel is too narrow for both */
  .gcopy__title{
    font-size:clamp(20px,2.4vw,30px);
    font-weight:800;margin-bottom:16px;
  }
  .gcopy__body{font-size:16px;font-weight:400;line-height:1.55;margin-bottom:12px;}
  .variety{margin-bottom:18px;}
  /* the brush W crowds the letter before it — open the join up a little */
  .variety__name .kw{margin-left:.11em;}
  .variety__name{
    font-family:'Franklyns',cursive;
    font-size:clamp(26px,2.9vw,36px);
    color:var(--red);line-height:1.15;
    /* the name is what drives the carousel, so it has to look like it does */
    display:inline-block;
    cursor:pointer;
    transition:color .16s ease;
  }
  .variety__name:hover,
  .variety__name:focus-visible{color:var(--darkred);}
  .variety__ing{
    font-family:'Zilla',Georgia,serif;
    font-size:17.5px;letter-spacing:.01em;
    color:var(--navy);opacity:1;margin:5px 0 9px;
  }
  .variety__desc{font-size:15.5px;font-weight:400;line-height:1.5;}
  .eatblock{
    position:relative;
    height:392px;
    background:var(--navy);
    display:flex;align-items:center;
  }
  .wendell2{
    position:absolute;
    right:20px;bottom:-17px;       /* halfway between flush and the deeper stance */
    width:300px;height:auto;
    z-index:3;                     /* his plate covers the end of the chain */
  }

  /* ---------- "meet Wendell" pop-up ---------- */
  .wpop{
    position:fixed;inset:0;z-index:250;
    display:flex;align-items:center;justify-content:center;
    padding:clamp(62px,11vh,112px) 24px 54px;   /* headroom for the balloon, room for the x */
    opacity:0;pointer-events:none;
    transition:opacity .22s ease;
  }
  .wpop.is-open{opacity:1;pointer-events:auto;}
  .wpop__scrim{position:absolute;inset:0;background:rgba(30,35,45,.74);}
  .wpop__box{
    /* 70vw term keeps the balloon's right overhang inside the viewport */
    --fw:min(calc(86vw - 52px), calc(68vh * 900 / 1200), 70vw);
    position:relative;
    transform:translateY(10px) scale(.98);
    transition:transform .22s cubic-bezier(.2,.8,.3,1);
  }
  .wpop.is-open .wpop__box{transform:none;}
  .wpop__frame{
    box-sizing:content-box;                 /* the ratio applies to the art, not the frame */
    width:var(--fw);
    aspect-ratio:900/1200;
    height:auto;
    background:var(--cream);
    border:26px solid transparent;
    border-image:url(../img/menuboard-frame.webp) 48 / 26px round;
    line-height:0;
    filter:drop-shadow(0 20px 34px rgba(20,24,32,.5));
  }
  .wpop__frame img{display:block;width:100%;height:100%;object-fit:cover;}

  /* hand-drawn comic balloon: one stroked path, so there is no seam at the tail */
  .wpop__bubble{
    position:absolute;
    /* sized and placed off the artwork: clears Wendell's silhouette entirely
       and the tail is aimed at his mouth */
    width:calc(var(--fw) * .60);
    aspect-ratio:600/532;
    top:calc(26px - var(--fw) * .178);
    right:calc(26px - var(--fw) * .18);
    margin:0;
    filter:drop-shadow(0 8px 14px rgba(20,24,32,.35));
  }
  .wpop__balloon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
  .wpop__bubble span{
    position:absolute;
    left:9%;right:9%;top:0;height:85.7%;      /* the oval's own box, so the text centres in it */
    display:flex;align-items:center;justify-content:center;
    text-align:center;text-wrap:balance;
    color:var(--navy);font-weight:500;
    font-size:clamp(15px, calc(var(--fw) * .056), 26px);
    line-height:1.18;
  }
  /* a quiet acknowledgement that this closes — a click anywhere does the same */
  .wpop__x{
    position:absolute;top:100%;right:0;margin-top:11px;
    background:none;border:0;padding:2px 4px;
    color:#FFF9F5;opacity:.55;
    font-family:'Zilla',Georgia,serif;font-size:26px;font-weight:400;line-height:1;
    cursor:pointer;
    transition:opacity .15s;
  }
  .wpop__x:hover{opacity:1;}
  .wpop__x:focus-visible{opacity:1;outline-color:#FFF9F5;}
  @media (prefers-reduced-motion: reduce){
    .wpop,.wpop__box{transition:none;}
  }
  /* newsletter, to Wendell's left */
  .eatsignup{
    padding:0 0 0 7vw;
    max-width:min(620px,58%);
    color:var(--cream);
    text-align:left;
  }
  .eatsignup .wrap{margin:0;}
  .eatsignup .signup__title{
    justify-content:flex-start;color:var(--cream);
    font-size:clamp(24px,3.3vw,40px);
    flex-wrap:wrap;white-space:normal;
  }
  .eatsignup .sec__sub{color:var(--cream);opacity:.9;margin:14px 0 0 !important;}
  .eatsignup form{justify-content:flex-start;}
  .eatsignup input{
    border-color:var(--cream);
    background:#FFF9F5;
    width:min(300px,52vw);
  }
  .eatsignup .btn{border-color:var(--cream);}
  @media(max-width:860px){
    .eatsignup{max-width:56%;padding-left:5vw;}
    .eatsignup input{width:min(200px,40vw);}
    .wendell2{width:250px;}         /* keeps him clear of the signup before it stacks */
  }
  @media(max-width:720px){
    .grow{grid-template-columns:minmax(0,1fr);gap:26px;margin-bottom:64px;}   /* see the 899px stack below */   /* 1fr floors at min-content and the nowrap phrases pushed the track wide */
    .wallpaper--south{padding:6vh 6vw 8vh;}
  }
  .linkstrip{
    position:absolute;
    top:292px;bottom:0;        /* emerges just under the piping (279 + 20) */
    right:16px;width:75px;     /* nudged 5px right */
    overflow:hidden;
    z-index:1;
    pointer-events:none;
  }
  .linkstrip img{display:block;width:100%;height:auto;transform:scaleX(-1);}   /* mirrored */
  .linkstrip img + img{margin-top:-8px;}   /* each copy tucks under the one above */

  /* ---------- small screens: pull the stacked collisions apart ---------- */
  @media(max-width:720px){
    /* conveyor: fewer meals so they don't stack, but a twice-as-fast cycle so
       one is always on the belt and a drop lands every two seconds */
    .plate--4,.plate--5,.plate--6{display:none;}
    .plate,.plate img{animation-duration:6s;}
    .plate--2{--d:2s;}
    .plate--3{--d:4s;}

    /* newsletter stacks above Wendell eating */
    .eatblock{height:auto;display:block;padding:44px 0 0;}
    .eatsignup{max-width:none;padding:0 104px 0 7vw;}   /* right gutter clears the link chain */
    .eatsignup .signup__title{white-space:normal;}
    .eatsignup input{width:min(300px,60vw);}
    .wendell2{
      position:relative;display:block;right:auto;bottom:auto;
      width:min(300px,62vw);
      margin:26px 20px -17px auto;   /* stays right so the chain still lands in his plate */
    }
  }
  /* the About block stacks: heading on top, Wendell at the grinder beneath it,
     and the conveyor drops fall the full height of the block into his funnel */
  @media(max-width:600px){
    .wendellblock{height:392px;}
    .wendellblock__heading{top:26px;bottom:auto;z-index:1;}
    .grinder{top:auto;bottom:-8px;}      /* same overhang into the piping as the wide layout */
    .linkstrip{top:405px;}               /* 392 + 8 + 5: the junction stays inside the piping */
    .plate{
      z-index:3;                          /* in front of ABOUT, still behind the grinder */
      animation-name:beltride--stack;
      --fall:262px;                       /* belt -> inside the funnel, measured off the art */
    }
    .plate img{animation-name:squashfall--stack;}
  }

  /* sausage-party scrub, framed inside the About gallery */
  /* no pin any more: the block is one ordinary section and the footer sits right
     under it. The animation runs on its own clock, so scrolling is never held up. */
  .scrubzone{position:relative;}
  .scrubsticky{
    min-height:0;
    padding:8vh 6vw;                 /* wallpaper margin above and below the frame */
    display:flex;align-items:center;justify-content:center;
  }
  .partyblock{padding:0;}          /* the scrub zone supplies the height */
  .scrubstage,.varietyframe,.metro,.winkbox{
    position:relative;
    /* width is the lesser of the column and what 66vh of height allows,
       so the 2048:2375 ratio can never be squeezed */
    box-sizing:content-box;               /* ratio applies to the art, not the frame */
    width:min(calc(100% - 52px), calc(62vh * 2160 / 2880));
    aspect-ratio:2160/2880;
    height:auto;margin:0 auto;
    background:var(--sage);
    border:26px solid transparent;
    border-image:url(../img/menuboard-frame.webp) 48 / 26px round;
    overflow:hidden;
    filter:drop-shadow(0 18px 26px rgba(40,45,58,.38));
  }
  .scrubstage img{position:absolute;display:block;height:auto;will-change:transform;}
  .varietyframe{position:relative;}   /* the varieties carousel mounts here */
  /* the metronome: an empty platter that a forkful of sausages rises into,
     hung in the same darkwood frame as the pictures either side of it */
  .metro{
    width:calc(100% - 52px);
    aspect-ratio:1917/2291;
  }
  .metro img{
    position:absolute;inset:0;
    width:100%;height:100%;
    display:block;
  }
  .metro__fork{will-change:transform;}
  /* Mike, hung in the same darkwood frame as the rest of the gallery.
     His easter egg lives here too: the winking frame sits over the still one. */
  .winkbox{
    width:calc(100% - 52px);
    aspect-ratio:auto;          /* the photo's own ratio sets the height */
    line-height:0;
  }
  .winkbox img{display:block;width:100%;height:auto;}
  .winkbox__wink{position:absolute;inset:0;height:100%;
    opacity:0;transition:opacity 70ms linear;pointer-events:none;}
  .winkbox__wink.is-on{opacity:1;}
  /* the varieties carousel: a filmstrip that pans left at a constant rate.
     No CSS transition — the transform is written every frame, so the motion
     never eases in or out and never stops. */
  .vcar__track{
    position:absolute;inset:0;
    display:flex;
    transform:translateX(0);
    will-change:transform;
  }
  .vcar__slide{
    flex:0 0 100%;
    width:100%;height:100%;
    object-fit:cover;display:block;
  }
  /* frosted-glass step arrows, tucked into the frame's lower corners */
  .vcar__nav{
    position:absolute;bottom:14px;
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    padding:0;border:1px solid rgba(255,255,255,.55);border-radius:50%;
    background:rgba(255,249,245,.26);
    -webkit-backdrop-filter:blur(7px) saturate(1.1);
    backdrop-filter:blur(7px) saturate(1.1);
    color:#FFF9F5;cursor:pointer;
    box-shadow:0 2px 10px rgba(40,45,58,.22);
    transition:background .18s ease, transform .18s ease;
  }
  .vcar__nav--prev{left:14px;}
  .vcar__nav--next{right:14px;}
  .vcar__nav svg{width:19px;height:19px;fill:none;stroke:currentColor;
    stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 1px 2px rgba(40,45,58,.5));}
  .vcar__nav:hover{background:rgba(255,249,245,.42);}
  .vcar__nav:active{transform:translateY(1px);}
  .vcar__nav:focus-visible{outline:3px solid #FFF9F5;outline-offset:2px;}
  @media(max-width:520px){ .vcar__nav{width:38px;height:38px;bottom:10px;}
    .vcar__nav--prev{left:10px;} .vcar__nav--next{right:10px;} }
  /* the party frame stands alone, so it runs smaller and lets the wallpaper breathe */
  .scrubstage{width:min(calc(100% - 52px), calc(50vh * 2160 / 2880));}
  .scrubstage{background:var(--red);}   /* the party plays against red, not sage */
  @media(max-width:720px){
    .scrubstage,.varietyframe,.metro,.winkbox{width:calc(100% - 52px);}
  }


  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s, transform .7s;}
  .reveal.in{opacity:1;transform:none;}

  /* newsletter: bot trap and the status line under the form */
  .nl-trap{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden;}
  .nl-note{
    min-height:1.2em;margin:12px 0 0;
    font-size:15px;line-height:1.4;
    color:var(--cream);opacity:0;
    transition:opacity .2s ease;
  }
  .nl-note.is-shown{opacity:.92;}
  .nl-note.is-error{color:#FFC9C2;}
  #nlForm button[disabled]{opacity:.65;cursor:default;}