@font-face{font-family:"LT Superior";src:url(fonts/LTSuperior-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"LT Superior";src:url(fonts/LTSuperior-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Herbik";src:url(fonts/Herbik-Italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Saans";src:url(fonts/Saans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Saans";src:url(fonts/Saans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Saans";src:url(fonts/Saans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --ground:#f5efe3; --paper:#fffaf1; --ink:#27231f; --soft:#6d665d; --rule:rgba(39,35,31,.14);
  --orange:#E94811; --orange-d:#cf3d0b; --blue:#2c4a78; --sky:#faf3e9; --wood:#e5b98d;
  --ease:cubic-bezier(.22,1,.36,1);
  --u:min(1vw,15.12px);              /* one unit = 1% of a 1512 table; everything on the table is placed in units */
  --strip-h:76px;
  /* paper and objects share one light: sun from the top left */
  --sh-paper:0 1px 1px rgba(80,50,20,.16),0 3px 6px -2px rgba(80,50,20,.14),0 26px 44px -26px rgba(80,50,20,.6);
  --sh-obj:drop-shadow(0 2px 2px rgba(80,50,20,.28)) drop-shadow(0 16px 18px rgba(80,50,20,.3));
  --sh-up:drop-shadow(0 4px 4px rgba(80,50,20,.22)) drop-shadow(0 34px 30px rgba(80,50,20,.3));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:"Saans",system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
img{display:block;max-width:100%}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- pills (same as the approved hero) ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:99px;font:500 15.5px/1 "Saans",sans-serif;letter-spacing:.005em;white-space:nowrap;
  transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.pill.solid{background:var(--orange);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 24px -12px rgba(233,72,17,.7)}
.pill.solid:hover{background:var(--orange-d);box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 28px -12px rgba(233,72,17,.8)}
.pill.ghost{background:rgba(255,250,241,.72);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.pill.ghost:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(39,35,31,.3)}
.pill .ar{display:inline-block;transition:transform .4s var(--ease)}
.pill:hover .ar{transform:translateX(3px)}
.pill.sm{height:40px;padding:0 18px;font-size:14.5px}
.pill svg{width:16px;height:16px}

/* ---------- the ground above the table: the nav sits on the patio, not on the wood ---------- */
.ground{position:relative;z-index:20;height:84px;background:var(--ground)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:100%;padding:0 clamp(20px,4.2vw,72px)}
.brand{display:flex;align-items:center;gap:11px;justify-self:start}
.brand svg{width:30px;height:36px;flex:none}
.brand b{font-family:"LT Superior",serif;font-weight:500;font-size:21px;letter-spacing:-.01em;line-height:1}
.links{display:flex;gap:6px;font-size:14.5px;font-weight:500}
.links a{padding:8px 14px;border-radius:99px;transition:background .35s var(--ease)}
.links a:hover{background:rgba(255,252,245,.95)}
.nav-r{justify-self:end;display:flex;align-items:center;gap:18px;font-size:14.5px;font-weight:500}
.nav-r .dir{color:var(--soft);transition:color .3s}
.nav-r .dir:hover{color:var(--ink)}

/* ---------- the table: one painted tabletop that runs the length of the page ---------- */
/* the table runs out into the evening sky of the finale, never on a straight cut */
.table::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px,12vw,180px);pointer-events:none;z-index:0;background:linear-gradient(180deg,transparent,var(--sky))}
.table{position:relative;z-index:1;overflow:clip;background:var(--wood) url(img/table.jpg) center top/max(100%,1100px) auto repeat-y;
  box-shadow:0 -14px 26px -18px rgba(80,55,25,.55)}
.table>section{position:relative;width:calc(var(--u)*100);margin:0 auto}

/* sun through the trees: one canvas over everything on the table */
.sun{position:fixed;inset:-6vh -4vw;z-index:40;pointer-events:none;mix-blend-mode:multiply;opacity:0;transition:opacity 1.4s var(--ease)}
.sun.on{opacity:1}
.sun.off{opacity:0;transition-duration:.6s}
.sun canvas{width:100%;height:100%;display:block;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(-1.2%,.8%,0) rotate(.5deg)}}

/* ---------- paper and objects ---------- */
.paper{position:absolute;background:var(--paper);border-radius:3px;box-shadow:var(--sh-paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.obj{position:absolute;height:auto;filter:var(--sh-obj);user-select:none;-webkit-user-drag:none}
[data-drag]{touch-action:auto;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));transition:scale .45s var(--ease),filter .45s var(--ease),box-shadow .45s var(--ease)}
@media (hover:hover) and (pointer:fine){
  [data-drag]{cursor:grab}
  [data-drag]:hover{scale:1.015}
  .held{cursor:grabbing;scale:1.04!important;z-index:30!important;filter:var(--sh-up)}
  .paper.held,.index.held,.print.held,.packet.held .pk-in{box-shadow:0 2px 3px rgba(80,50,20,.18),0 40px 50px -24px rgba(80,50,20,.6)}
}
.paper:not([data-drag]){transform:rotate(var(--r,0deg))}

/* set down: everything arrives the way a server puts it on a table */
[data-set]{opacity:0;translate:0 -16px;scale:1.05}
[data-set].is-set{opacity:1;translate:0 0;scale:1;transition:opacity .7s var(--ease),translate .9s var(--ease),scale .9s var(--ease),filter .45s var(--ease)}
[data-set].is-set:hover{scale:1.015}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--orange);display:block;flex:none}
.ey-s{display:none}
h1,h2{font-family:"LT Superior",serif;font-weight:400;letter-spacing:-.03em;text-wrap:balance}
h1 em,h2 em{font-family:"Herbik",serif;font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--blue)}
h2{font-size:clamp(32px,calc(var(--u)*3.3),50px);line-height:1.02;margin-top:14px}
.paper p:not(.eyebrow){color:var(--soft);font-size:clamp(15px,calc(var(--u)*1.12),17px);line-height:1.55;margin-top:14px;text-wrap:pretty}

/* ---------- hero ---------- */
.hero{height:max(calc(100svh - 84px),calc(var(--u)*50))}
.card-hero{--r:-1deg;left:calc(var(--u)*5);top:calc(var(--u)*4.4);width:calc(var(--u)*41);padding:calc(var(--u)*3.4) calc(var(--u)*3.6) calc(var(--u)*2.8);z-index:4}
.card-hero h1{font-size:clamp(52px,calc(var(--u)*7.2),110px);line-height:.92;margin-top:20px}
.card-hero h1 em{display:block}
.card-hero .lede{max-width:34em;text-wrap:pretty}
.ctas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hours{display:flex;gap:18px;margin-top:22px!important;padding-top:16px;border-top:1px dashed var(--rule);font-size:13.5px!important;font-weight:500;color:var(--soft)}
.hours span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--orange);margin:0 14px 2px 0;vertical-align:middle}
.cup-l{--r:10deg;width:calc(var(--u)*21);left:calc(var(--u)*53);top:calc(var(--u)*6.5);z-index:6}
.cup-e{--r:-14deg;width:calc(var(--u)*19.5);left:calc(var(--u)*76);top:calc(var(--u)*2.5);z-index:5}
.pf{--r:-21deg;width:calc(var(--u)*30);left:calc(var(--u)*41.5);top:calc(var(--u)*35);z-index:7}

.packet{position:absolute;width:calc(var(--u)*13);height:calc(var(--u)*7.2);perspective:900px;z-index:8;background:none}
.pk-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.25,.5,1);border-radius:2px;box-shadow:0 1px 1px rgba(80,50,20,.18),0 12px 18px -10px rgba(80,50,20,.5)}
.packet.flip .pk-in{transform:rotateY(180deg)}
.pk-f,.pk-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;display:flex;flex-direction:column;justify-content:center;padding:0 calc(var(--u)*.9);
  /* crimped ends, like a real sugar packet */
  -webkit-mask:conic-gradient(from -45deg at left,#0000 25%,#000 0) left/7px 9px repeat-y,conic-gradient(from 135deg at right,#0000 25%,#000 0) right/7px 9px repeat-y,linear-gradient(#000 0 0) center/calc(100% - 14px) 100% no-repeat;
          mask:conic-gradient(from -45deg at left,#0000 25%,#000 0) left/7px 9px repeat-y,conic-gradient(from 135deg at right,#0000 25%,#000 0) right/7px 9px repeat-y,linear-gradient(#000 0 0) center/calc(100% - 14px) 100% no-repeat}
.pk-f{background:#fffdf8;background-image:linear-gradient(90deg,transparent 12px,var(--orange) 12px,var(--orange) 15px,transparent 15px,transparent calc(100% - 15px),var(--orange) calc(100% - 15px),var(--orange) calc(100% - 12px),transparent 0)}
.pk-f .k{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);padding-left:10px}
.pk-f .t{white-space:nowrap;font-family:"LT Superior",serif;font-size:clamp(14px,calc(var(--u)*1.24),19px);line-height:1.1;letter-spacing:-.01em;margin-top:4px;padding-left:10px}
.pk-b{transform:rotateY(180deg);background:var(--orange);color:#fff;font-size:clamp(12.5px,calc(var(--u)*.98),14.5px);line-height:1.35;padding:0 calc(var(--u)*1.6)}
.p1{--r:9deg;left:calc(var(--u)*79);top:calc(var(--u)*25)}
.p2{--r:-7deg;left:calc(var(--u)*66.5);top:calc(var(--u)*30.5)}
.p3{--r:5deg;left:calc(var(--u)*84);top:calc(var(--u)*36.5)}
.p4{--r:-13deg;left:calc(var(--u)*69);top:calc(var(--u)*42.5)}
.hint{position:absolute;left:calc(var(--u)*5.6);bottom:calc(var(--u)*2.2);font-family:"Herbik",serif;font-style:italic;font-size:clamp(15px,calc(var(--u)*1.2),18px);color:rgba(60,38,18,.62);z-index:3}

/* ---------- menu ---------- */
.menu{height:calc(var(--u)*66)}
.card-menu{--r:.7deg;left:calc(var(--u)*5);top:calc(var(--u)*5);width:calc(var(--u)*54);padding:calc(var(--u)*3.4) calc(var(--u)*3.6) calc(var(--u)*3);z-index:4}
.m-cols{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3.4);margin-top:calc(var(--u)*2.4)}
.m-col h3{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.rows{list-style:none}
.rows li{padding:11px 0 10px;border-bottom:1px solid rgba(39,35,31,.08);cursor:default;transition:background .3s}
.rows.tight li{padding:9px 0 8px}
.rows .r{display:flex;align-items:baseline;gap:8px;font-size:15.5px}
.rows .r b{font-weight:500}
.rows .r i{flex:1;border-bottom:1.5px dotted rgba(39,35,31,.28);translate:0 -4px}
.rows .r s{text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.rows p{font-size:13.5px!important;line-height:1.45!important;margin-top:3px!important}
.rows li.treat .r s{font-weight:500;color:var(--soft)}
.rows li.on .r b{color:var(--orange)}
.m-pdf{display:inline-flex;gap:8px;margin-top:22px;font-weight:500;font-size:14.5px;border-bottom:1.5px solid var(--orange);padding-bottom:2px}
.dish{z-index:5;transition:scale .5s var(--ease),filter .5s var(--ease),translate .9s var(--ease),opacity .7s var(--ease)}
.dish.lift{scale:1.045;filter:var(--sh-up)}
.d-chil{--r:-8deg;width:calc(var(--u)*29);left:calc(var(--u)*63);top:calc(var(--u)*3)}
.d-pastry{--r:12deg;width:calc(var(--u)*22);left:calc(var(--u)*83);top:calc(var(--u)*27)}
.d-burger{--r:5deg;width:calc(var(--u)*31);left:calc(var(--u)*60);top:calc(var(--u)*39)}

/* ---------- cottage postcard ---------- */
.cottage{height:calc(var(--u)*55)}
.postcard{position:absolute;--r:-2.5deg;left:calc(var(--u)*6);top:calc(var(--u)*6);width:calc(var(--u)*50);aspect-ratio:3/2;perspective:1800px;transform:rotate(var(--r));z-index:4}
.pc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,1.15,.45,1);cursor:pointer}
.postcard.flip .pc-in{transform:rotateY(180deg)}
.pc-front,.pc-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fffaf1;border-radius:4px;box-shadow:var(--sh-paper)}
.pc-front{padding:calc(var(--u)*1.1)}
.pc-front img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;border-radius:2px}
.pc-cap{position:absolute;left:calc(var(--u)*2.6);bottom:calc(var(--u)*2.2);font-family:"Herbik",serif;font-style:italic;font-size:clamp(20px,calc(var(--u)*2.1),32px);color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.pc-back{transform:rotateY(180deg);display:grid;grid-template-columns:1.25fr 1fr;padding:calc(var(--u)*3) calc(var(--u)*3.2);
  background-image:linear-gradient(var(--rule),var(--rule));background-size:1px 78%;background-position:55.5% 50%;background-repeat:no-repeat}
.pc-msg>span{text-wrap:balance}
.pc-msg{display:flex;flex-direction:column;justify-content:center;gap:8px;padding-right:calc(var(--u)*3);font-family:"Herbik",serif;font-style:italic;color:#2a3f66;font-size:clamp(17px,calc(var(--u)*1.75),26px);line-height:1.22}
.pc-l3{color:var(--orange)}
.pc-sig{font-size:.8em;color:var(--soft);margin-top:8px}
.pc-addr{position:relative;padding-left:calc(var(--u)*2.6)}
.stamp{position:absolute;right:0;top:0;width:calc(var(--u)*7);aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#fff6e8;color:var(--orange);
  outline:2px dashed rgba(233,72,17,.45);outline-offset:-6px;box-shadow:0 1px 2px rgba(80,50,20,.25)}
.stamp svg{width:42%}
.stamp small{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.postmark{position:absolute;right:calc(var(--u)*4.4);top:calc(var(--u)*4.4);width:calc(var(--u)*7.4);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(42,63,102,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(42,63,102,.7);transform:rotate(-14deg);text-align:center;line-height:1.5}
.pc-to{position:absolute;left:calc(var(--u)*2.6);right:0;bottom:calc(var(--u)*1);font-family:"Herbik",serif;font-style:italic;font-size:clamp(15px,calc(var(--u)*1.35),20px);line-height:2.05;color:#2a3f66;
  background:repeating-linear-gradient(transparent 0 calc(2.05em - 1px),rgba(39,35,31,.2) calc(2.05em - 1px) 2.05em)}
.card-note{--r:1.5deg;left:calc(var(--u)*62);top:calc(var(--u)*8);width:calc(var(--u)*31);padding:calc(var(--u)*2.8) calc(var(--u)*3);z-index:4}
.card-note .turn{display:block;margin-top:10px;font-family:"Herbik",serif;font-style:italic;color:var(--orange);font-size:1.12em}
.iced{--r:-6deg;width:calc(var(--u)*31);left:calc(var(--u)*61);top:calc(var(--u)*33);z-index:5}

/* ---------- shop ---------- */
.shop{height:calc(var(--u)*58)}
.card-shop{--r:-1.2deg;left:calc(var(--u)*5);top:calc(var(--u)*5);width:calc(var(--u)*33);padding:calc(var(--u)*2.8) calc(var(--u)*3);z-index:4}
.goods{list-style:none}
.goods li{position:absolute;z-index:5}
.goods li img{width:100%;height:auto;filter:var(--sh-obj);transition:filter .45s var(--ease)}
.goods li.held img{filter:var(--sh-up)}
.label{position:absolute;display:flex;flex-direction:column;gap:2px;width:calc(var(--u)*14.5);background:#f4e6cf;padding:12px 14px 11px;border-radius:2px;box-shadow:0 1px 1px rgba(80,50,20,.16),0 10px 16px -10px rgba(80,50,20,.5);font-size:12.5px;line-height:1.35;color:var(--soft)}
.label>span:last-child{text-wrap:balance}
.label .k{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
.label b{font-family:"LT Superior",serif;font-weight:400;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.g1{--r:-6deg;width:calc(var(--u)*13);left:calc(var(--u)*44);top:calc(var(--u)*4)} .g1 .label{left:70%;top:58%;--lr:4deg}
.g2{--r:4deg;width:calc(var(--u)*21);left:calc(var(--u)*66);top:calc(var(--u)*6)} .g2 .label{left:30%;top:88%}
.g3{--r:9deg;width:calc(var(--u)*10.5);left:calc(var(--u)*88);top:calc(var(--u)*25)} .g3 .label{left:-118%;top:70%}
.g4{--r:-10deg;width:calc(var(--u)*12);left:calc(var(--u)*13);top:calc(var(--u)*29)} .g4 .label{left:72%;top:54%}
.g5{--r:5deg;width:calc(var(--u)*13);left:calc(var(--u)*45);top:calc(var(--u)*33)} .g5 .label{left:84%;top:40%}
.label{rotate:var(--lr,-3deg)}

/* ---------- connect ---------- */
.connect{height:calc(var(--u)*60)}
.card-connect{--r:1deg;left:calc(var(--u)*60);top:calc(var(--u)*6);width:calc(var(--u)*34);padding:calc(var(--u)*2.8) calc(var(--u)*3);z-index:4}
.index{position:absolute;width:calc(var(--u)*21);min-height:calc(var(--u)*13.5);padding:calc(var(--u)*2.2) calc(var(--u)*1.9) calc(var(--u)*1.6);background:#fffdf7;border-radius:2px;box-shadow:var(--sh-paper);z-index:5;
  background-image:linear-gradient(transparent calc(var(--u)*3.6),rgba(233,72,17,.5) calc(var(--u)*3.6),rgba(233,72,17,.5) calc(var(--u)*3.6 + 1.5px),transparent 0),repeating-linear-gradient(transparent 0 25px,rgba(44,74,120,.16) 25px 26px);background-position:0 0,0 calc(var(--u)*3.6 + 12px)}
.index .k{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
.index h3{font-family:"Herbik",serif;font-style:italic;font-weight:400;font-size:clamp(20px,calc(var(--u)*1.75),26px);line-height:1.15;color:#2a3f66;margin-top:calc(var(--u)*1.5)}
.index h3,.index p{text-wrap:balance}
.index p{font-size:14px;line-height:26px;color:var(--soft);margin-top:4px}
.index a{display:inline-flex;gap:6px;margin-top:6px;font-weight:600;font-size:14px;color:var(--orange)}
.index a:hover .ar{translate:3px 0}
.index .ar{transition:translate .35s var(--ease)}
.print{position:absolute;padding:10px 10px 34px;background:#fffdf7;border-radius:2px;box-shadow:var(--sh-paper);z-index:5}
.print img{width:100%;height:auto}
.c1{--r:-3deg;left:calc(var(--u)*5);top:calc(var(--u)*5)}
.c2{--r:2.5deg;left:calc(var(--u)*29);top:calc(var(--u)*9)}
.f1{--r:5deg;width:calc(var(--u)*15);left:calc(var(--u)*8);top:calc(var(--u)*23)}
.c3{--r:-2deg;left:calc(var(--u)*27);top:calc(var(--u)*31)}
.f2{--r:-5deg;width:calc(var(--u)*19);left:calc(var(--u)*50);top:calc(var(--u)*31)}
.c4{--r:3deg;left:calc(var(--u)*72);top:calc(var(--u)*36)}

/* ---------- strip: a paper bar once you're at the table ---------- */
.strip{position:fixed;z-index:60;visibility:hidden;top:12px;left:50%;display:flex;align-items:center;gap:22px;padding:7px 7px 7px 18px;border-radius:99px;background:rgba(255,250,241,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 1px rgba(80,50,20,.14),0 16px 30px -16px rgba(80,50,20,.5);transform:translate(-50%,-140%);transition:transform .7s var(--ease)}
.strip.on{transform:translate(-50%,0);visibility:visible}
.strip{transition:transform .7s var(--ease),visibility 0s .7s}.strip.on{transition:transform .7s var(--ease),visibility 0s}
.s-brand{display:flex;align-items:center;gap:9px}
.s-brand svg{width:22px;height:27px}
.s-brand b{font-family:"LT Superior",serif;font-weight:500;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.s-links{display:flex;gap:2px;font-size:14px;font-weight:500}
.s-links a{white-space:nowrap;padding:8px 12px;border-radius:99px;transition:background .3s,color .3s}
.s-links a:hover,.s-links a.cur{background:rgba(39,35,31,.06)}
.s-links a.cur{color:var(--orange)}

/* ---------- the end: you stand up, there's the cottage. Finale + full footer in one screen ---------- */
.end{position:relative;z-index:2;height:calc(100svh - var(--strip-h));min-height:640px;display:flex;flex-direction:column;background:var(--sky);overflow:hidden}
.e-art{position:absolute;left:0;right:0;top:var(--copy-h,150px);width:100%;height:calc(100% - var(--copy-h,150px) - var(--sheet-h,300px) + 120px);max-width:none;object-fit:cover;object-position:50% 74%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%)}
.e-copy{order:1;position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:clamp(22px,4vh,40px) clamp(20px,4.2vw,72px) 0}
.e-copy h2{font-size:clamp(40px,min(calc(var(--u)*5.6),9vh),84px);line-height:.95;margin:0}
.e-copy p{width:100%;order:3;display:none}
.e-ctas{display:flex;gap:12px;align-items:center;padding-bottom:8px}
.e-ctas::before{content:"Open 8am to 3pm, 122 Hereford Avenue, Ganges.";font-size:15px;color:var(--soft);margin-right:12px}
.sheet{order:3;position:relative;z-index:3;margin:auto auto 0;width:min(1320px,calc(100% - clamp(32px,6vw,120px)));background:var(--paper);border-radius:4px 4px 0 0;box-shadow:0 -2px 3px rgba(80,50,20,.08),0 -30px 50px -30px rgba(80,50,20,.45);
  padding:clamp(22px,3.4vh,34px) clamp(22px,3vw,44px) 0}
.sh-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:28px}
.sh-mark{display:flex;align-items:center;gap:10px}
.bolt{width:26px;height:31px;stroke:var(--orange)}
.bolt .fill{fill:transparent;transition:fill 1s var(--ease) .3s}
.end.lit .bolt .fill{fill:var(--orange)}
.sh-mark b{font-family:"LT Superior",serif;font-weight:500;font-size:20px;letter-spacing:-.01em}
.sh-brand>p{text-wrap:balance;font-size:14px;color:var(--soft);margin-top:10px}
.sign{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sign label{flex:1;min-width:150px}
.sign input{width:100%;height:40px;border-radius:99px;border:0;box-shadow:inset 0 0 0 1px var(--rule);background:#fff;padding:0 16px;font:inherit;font-size:14px;color:var(--ink)}
.sign input:focus{outline:2px solid var(--orange);outline-offset:1px}
.s-note,.done{text-wrap:balance;width:100%;font-size:12.5px;color:var(--soft)}
.done{color:var(--orange);font-weight:500}
.col{display:flex;flex-direction:column;gap:7px;font-size:14px}
.col h4{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:4px}
.col a{transition:color .3s;width:fit-content}
.col a:hover{color:var(--orange)}
.col span{color:var(--soft)}
.legal{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:clamp(18px,2.8vh,28px);padding:14px 0 16px;border-top:1px solid var(--rule);font-size:12px;color:var(--soft)}
.legal p{max-width:72ch;text-wrap:pretty}
.legal .l-r{white-space:nowrap}
.legal a:hover{color:var(--ink)}

.dock{display:none}

/* ---------- between laptop and phone ---------- */
@media (max-width:1420px) and (min-width:761px){ .card-hero .ey-l{display:none} .card-hero .ey-s{display:inline} .e-ctas::before{content:"Open 8am to 3pm, Ganges."} }
@media (max-width:1100px){ .links{display:none} .nav{grid-template-columns:1fr auto} .s-links{display:none} }

/* ---------- phones: no pinning, nothing to drag. The table just runs down the page ---------- */
@media (max-width:760px){
  :root{--u:3.6vw;--strip-h:0px}
  .ground{height:68px}
  .nav{padding:0 18px}
  .nav-r .dir{display:none}
  .brand b{font-size:19px}
  .strip{display:none}
  .table{background-size:190% auto}
  .table>section{width:auto;height:auto!important;padding:28px 14px 40px;display:flex;flex-direction:column}
  .paper,.obj,.packet,.postcard,.goods li,.index,.print,.hint{position:relative;left:auto!important;top:auto!important;bottom:auto!important}
  [data-drag]{cursor:auto}
  .eyebrow{font-size:11px;letter-spacing:.1em}
  .ey-l{display:none}.ey-s{display:inline}
  .card-hero{width:auto;padding:28px 22px 22px}
  .card-hero h1{font-size:clamp(50px,15vw,64px)}
  .ctas .ghost{display:none}
  .hours{flex-wrap:wrap;gap:6px 14px}
  .hero{height:auto;padding-bottom:28px}
  .hero .cup-l{width:54vw;align-self:flex-end;margin:-18px 4vw 0 0}
  .hero .cup-e{width:46vw;margin:-30vw 0 0 2vw}
  .pf{display:none}
  .packets{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:22px}
  .packet{width:auto;height:84px}
  .pk-f .t{font-size:17px}.pk-b{font-size:13px;padding:0 16px}
  .hint{margin-top:18px;text-align:center;font-size:15px}
  .hint::before{content:"Tap a sugar packet to turn it over."}
  .hint{font-size:0}.hint::before{font-size:15px}
  .menu{gap:0}
  .d-chil{width:62vw;align-self:flex-end;margin:0 -2vw -14vw 0;z-index:6}
  .card-menu{width:auto;padding:26px 20px 24px}
  .m-cols{grid-template-columns:1fr;gap:26px;margin-top:20px}
  .d-pastry{display:none}
  .d-burger{width:76vw;align-self:center;margin:-8vw 0 0}
  .cottage{gap:22px}
  .postcard{width:100%;order:2}
  .card-note{width:auto;order:1;padding:24px 20px}
  .pc-back{align-content:center;grid-template-columns:1fr;padding:18px 18px;background-image:none}
  .pc-addr{display:none}
  .pc-msg>span{text-wrap:balance}
.pc-msg{padding:0;font-size:clamp(16px,4.6vw,20px);gap:4px}
  .iced{order:3;width:82vw;align-self:center}
  .shop{gap:18px}
  .card-shop{width:auto;padding:24px 20px}
  .goods{display:grid;grid-template-columns:1fr 1fr;gap:26px 14px;margin-top:8px}
  .goods li{width:auto!important;display:flex;flex-direction:column;align-items:center}
  .goods li img{width:78%}
  .g2{grid-column:1/-1;order:-1}.g2 img{width:70%!important}
  .sun.on{opacity:.5}
  .label,.g1 .label,.g2 .label,.g3 .label,.g4 .label,.g5 .label{position:relative;left:auto;top:auto;width:100%;margin-top:-10px}
  .connect{gap:18px}
  .card-connect{width:auto;order:-1;padding:24px 20px}
  .cards{display:flex;flex-direction:column;gap:18px}
  .index{width:auto;min-height:0;padding:22px 18px 16px;background-position:0 0,0 calc(var(--u)*3.6 + 12px)}
  .index{background-image:linear-gradient(transparent 50px,rgba(233,72,17,.5) 50px,rgba(233,72,17,.5) 51.5px,transparent 0)}
  .index h3{margin-top:16px}
  .print{width:76%!important;align-self:center}
  .f2{align-self:flex-end}
  .end{height:auto;min-height:0;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .e-art{flex:none;height:auto!important;object-fit:fill;position:relative;left:auto;top:auto;right:auto;bottom:auto;transform:none;width:170%;margin:0 0 0 -32%;order:2;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 20.5%,#000 52%);mask-image:linear-gradient(180deg,transparent 0,transparent 20.5%,#000 52%)}
  .e-copy{order:1;padding:30px 18px 0;display:block}
  .e-copy h2{font-size:clamp(46px,14vw,58px)}
  .e-ctas{margin-top:18px;flex-wrap:wrap}
  .e-ctas::before{width:100%;margin:0 0 4px}
  .sheet{order:3;width:auto;margin:-14vw 10px 0;border-radius:4px;padding:22px 18px 0}
  .sh-grid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .sh-brand{grid-column:1/-1}
  .legal{flex-direction:column;align-items:flex-start;gap:10px}
  .dock{display:flex;position:fixed;z-index:70;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));gap:8px;padding:8px;border-radius:99px;background:rgba(255,250,241,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 34px -14px rgba(39,35,31,.55),inset 0 0 0 1px var(--rule)}
  .dock .pill{flex:1;height:50px}
  body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(88px + env(safe-area-inset-bottom));z-index:65;background:linear-gradient(rgba(245,239,227,0),var(--ground) 12px);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sun canvas{animation:none}
  [data-set]{opacity:1;translate:none;scale:none}
  .pk-in,.pc-in{transition:none}
}