/* Driftboard Grazing Co. A poster page: saturated colour bands with cut-paper edges, huge type, honey price tags. */
:root{
  --terra:#D9774B; --olive:#4A5230; --ink:#232712; --fig:#6B3A5B; --honey:#E8B04A; --cream:#F7EFE2;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Segoe Script","Bradley Hand",cursive;
  --gutter:clamp(1.1rem,4.5vw,2.5rem);
  --max:1200px;
  --focus:var(--ink);
  --hole:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cream);color:var(--olive);font:400 1.0625rem/1.55 var(--body);overflow-wrap:break-word}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
p{margin:0 0 1rem}
ul,ol{padding-left:1.2rem}
:where(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);padding:.85rem 1.1rem;font-weight:700;text-decoration:none}
.skip:focus{left:1rem;top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.03em;line-height:.96}
h2{font-size:clamp(2.7rem,12.4vw,5.75rem);margin-bottom:1.1rem}
h3{font-size:1.5rem;line-height:1.05;letter-spacing:-.02em}
.hand{font:600 1.7rem/1.1 var(--hand);margin:0 0 .35rem;letter-spacing:0}
.lede{font-size:1.2rem;line-height:1.5}
.t-olive .hand,.t-fig .hand{color:var(--honey)}
.t-terra .hand,.t-honey .hand{color:var(--ink)}

/* header: a thin cream paper band */
.site-head{position:relative;z-index:30;background:var(--cream);color:var(--olive);padding-bottom:8px}
.head-row{position:relative;display:flex;align-items:center;gap:.5rem;min-height:70px;padding-top:.3rem;padding-bottom:.3rem}
.brand{display:flex;align-items:center;gap:.6rem;min-height:44px;margin-right:auto;text-decoration:none;color:inherit}
.brand-name{display:flex;flex-direction:column;font:800 1.3rem/1 var(--display);letter-spacing:-.025em}
.brand-name small{margin-top:.22rem;font:700 .7rem/1.1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.nav-main{display:none}
.nav-main ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-main a{display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;border-radius:8px;font-weight:600;font-size:.95rem;text-decoration:none}
.nav-main a:hover{background:rgba(74,82,48,.12)}
.nav-main .nav-cta{background:var(--terra);color:var(--ink);font-weight:700;margin-left:.3rem}
.nav-main .nav-cta:hover{background:#e68a60}
.head-tel{display:none;align-items:center;min-height:44px;padding:0 .5rem;font-weight:700;text-decoration:none;white-space:nowrap}
.lang summary,.mnav summary{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:44px;min-height:44px;padding:0 .8rem;border:2px solid var(--olive);border-radius:8px;background:transparent;color:var(--olive);font:700 .95rem/1 var(--body);cursor:pointer;list-style:none}
.lang summary::-webkit-details-marker,.mnav summary::-webkit-details-marker{display:none}
.lang svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.lang-text{display:none}
.bars{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 6px currentColor,0 -6px currentColor}
.lang-panel,.mnav-panel{position:absolute;top:calc(100% + 2px);z-index:40;background:var(--cream);border:2px solid var(--olive);border-radius:10px;box-shadow:6px 6px 0 var(--olive);padding:.5rem}
.lang-panel{right:0;min-width:200px}
.lang-panel:has([data-sd-languages]:empty){display:none}
.mnav-panel{left:0;right:0}
.mnav-panel ul{list-style:none;margin:0;padding:0}
.mnav-panel a{display:flex;align-items:center;min-height:48px;padding:0 .8rem;font-weight:700;text-decoration:none;border-radius:6px}
.mnav-panel a:hover{background:rgba(74,82,48,.12)}
@media (min-width:560px){.lang-text{display:inline}}
@media (min-width:1060px){.nav-main{display:block}.head-tel{display:inline-flex}.mnav{display:none}}

/* bands with cut-paper edges: the page's cream shows through the gaps as a thin paper line */
.band{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0;margin-top:-8px}
.cut-a{clip-path:polygon(0.00% 3px,1.19% 3px,2.38% 4px,3.57% 4px,4.76% 3px,5.95% 7px,7.14% 7px,8.33% 5px,9.52% 2px,10.71% 4px,11.90% 0px,13.10% 4px,14.29% 4px,15.48% 7px,16.67% 7px,17.86% 7px,19.05% 2px,20.24% 2px,21.43% 1px,22.62% 2px,23.81% 5px,25.00% 4px,26.19% 6px,27.38% 5px,28.57% 3px,29.76% 3px,30.95% 3px,32.14% 5px,33.33% 6px,34.52% 8px,35.71% 4px,36.90% 5px,38.10% 2px,39.29% 0px,40.48% 0px,41.67% 3px,42.86% 3px,44.05% 7px,45.24% 7px,46.43% 2px,47.62% 3px,48.81% 3px,50.00% 1px,51.19% 3px,52.38% 7px,53.57% 4px,54.76% 5px,55.95% 5px,57.14% 1px,58.33% 2px,59.52% 3px,60.71% 5px,61.90% 3px,63.10% 8px,64.29% 5px,65.48% 6px,66.67% 2px,67.86% 0px,69.05% 5px,70.24% 3px,71.43% 3px,72.62% 6px,73.81% 4px,75.00% 6px,76.19% 2px,77.38% 1px,78.57% 2px,79.76% 4px,80.95% 6px,82.14% 4px,83.33% 7px,84.52% 3px,85.71% 2px,86.90% 1px,88.10% 2px,89.29% 5px,90.48% 5px,91.67% 8px,92.86% 7px,94.05% 3px,95.24% 0px,96.43% 3px,97.62% 4px,98.81% 4px,100.00% 4px,100.00% calc(100% - 6px),98.81% calc(100% - 6px),97.62% calc(100% - 7px),96.43% calc(100% - 6px),95.24% calc(100% - 3px),94.05% calc(100% - 0px),92.86% calc(100% - 0px),91.67% calc(100% - 4px),90.48% calc(100% - 3px),89.29% calc(100% - 6px),88.10% calc(100% - 8px),86.90% calc(100% - 7px),85.71% calc(100% - 6px),84.52% calc(100% - 1px),83.33% calc(100% - 2px),82.14% calc(100% - 3px),80.95% calc(100% - 3px),79.76% calc(100% - 7px),78.57% calc(100% - 8px),77.38% calc(100% - 6px),76.19% calc(100% - 4px),75.00% calc(100% - 6px),73.81% calc(100% - 3px),72.62% calc(100% - 3px),71.43% calc(100% - 3px),70.24% calc(100% - 4px),69.05% calc(100% - 3px),67.86% calc(100% - 6px),66.67% calc(100% - 7px),65.48% calc(100% - 4px),64.29% calc(100% - 5px),63.10% calc(100% - 0px),61.90% calc(100% - 3px),60.71% calc(100% - 2px),59.52% calc(100% - 1px),58.33% calc(100% - 5px),57.14% calc(100% - 7px),55.95% calc(100% - 6px),54.76% calc(100% - 7px),53.57% calc(100% - 3px),52.38% calc(100% - 0px),51.19% calc(100% - 1px),50.00% calc(100% - 0px),48.81% calc(100% - 1px),47.62% calc(100% - 3px),46.43% calc(100% - 8px),45.24% calc(100% - 8px),44.05% calc(100% - 7px),42.86% calc(100% - 6px),41.67% calc(100% - 0px),40.48% calc(100% - 4px),39.29% calc(100% - 3px),38.10% calc(100% - 6px),36.90% calc(100% - 7px),35.71% calc(100% - 4px),34.52% calc(100% - 7px),33.33% calc(100% - 4px),32.14% calc(100% - 3px),30.95% calc(100% - 2px),29.76% calc(100% - 0px),28.57% calc(100% - 3px),27.38% calc(100% - 4px),26.19% calc(100% - 4px),25.00% calc(100% - 6px),23.81% calc(100% - 6px),22.62% calc(100% - 5px),21.43% calc(100% - 5px),20.24% calc(100% - 3px),19.05% calc(100% - 1px),17.86% calc(100% - 4px),16.67% calc(100% - 6px),15.48% calc(100% - 4px),14.29% calc(100% - 8px),13.10% calc(100% - 4px),11.90% calc(100% - 3px),10.71% calc(100% - 3px),9.52% calc(100% - 1px),8.33% calc(100% - 4px),7.14% calc(100% - 4px),5.95% calc(100% - 4px),4.76% calc(100% - 7px),3.57% calc(100% - 6px),2.38% calc(100% - 8px),1.19% calc(100% - 3px),0.00% calc(100% - 2px))}
.cut-top{clip-path:polygon(0.00% 3px,1.19% 3px,2.38% 4px,3.57% 4px,4.76% 3px,5.95% 7px,7.14% 7px,8.33% 5px,9.52% 2px,10.71% 4px,11.90% 0px,13.10% 4px,14.29% 4px,15.48% 7px,16.67% 7px,17.86% 7px,19.05% 2px,20.24% 2px,21.43% 1px,22.62% 2px,23.81% 5px,25.00% 4px,26.19% 6px,27.38% 5px,28.57% 3px,29.76% 3px,30.95% 3px,32.14% 5px,33.33% 6px,34.52% 8px,35.71% 4px,36.90% 5px,38.10% 2px,39.29% 0px,40.48% 0px,41.67% 3px,42.86% 3px,44.05% 7px,45.24% 7px,46.43% 2px,47.62% 3px,48.81% 3px,50.00% 1px,51.19% 3px,52.38% 7px,53.57% 4px,54.76% 5px,55.95% 5px,57.14% 1px,58.33% 2px,59.52% 3px,60.71% 5px,61.90% 3px,63.10% 8px,64.29% 5px,65.48% 6px,66.67% 2px,67.86% 0px,69.05% 5px,70.24% 3px,71.43% 3px,72.62% 6px,73.81% 4px,75.00% 6px,76.19% 2px,77.38% 1px,78.57% 2px,79.76% 4px,80.95% 6px,82.14% 4px,83.33% 7px,84.52% 3px,85.71% 2px,86.90% 1px,88.10% 2px,89.29% 5px,90.48% 5px,91.67% 8px,92.86% 7px,94.05% 3px,95.24% 0px,96.43% 3px,97.62% 4px,98.81% 4px,100.00% 4px,100% 100%,0 100%)}
.cut-b{clip-path:polygon(0.00% 1px,1.19% 1px,2.38% 3px,3.57% 4px,4.76% 7px,5.95% 7px,7.14% 2px,8.33% 3px,9.52% 0px,10.71% 1px,11.90% 6px,13.10% 5px,14.29% 5px,15.48% 5px,16.67% 4px,17.86% 3px,19.05% 1px,20.24% 3px,21.43% 5px,22.62% 5px,23.81% 4px,25.00% 6px,26.19% 5px,27.38% 0px,28.57% 1px,29.76% 1px,30.95% 5px,32.14% 4px,33.33% 5px,34.52% 7px,35.71% 5px,36.90% 3px,38.10% 4px,39.29% 1px,40.48% 4px,41.67% 7px,42.86% 4px,44.05% 3px,45.24% 5px,46.43% 0px,47.62% 1px,48.81% 5px,50.00% 7px,51.19% 8px,52.38% 7px,53.57% 3px,54.76% 2px,55.95% 2px,57.14% 3px,58.33% 3px,59.52% 4px,60.71% 7px,61.90% 5px,63.10% 2px,64.29% 4px,65.48% 0px,66.67% 0px,67.86% 5px,69.05% 5px,70.24% 7px,71.43% 4px,72.62% 6px,73.81% 0px,75.00% 0px,76.19% 0px,77.38% 4px,78.57% 5px,79.76% 5px,80.95% 6px,82.14% 4px,83.33% 1px,84.52% 2px,85.71% 1px,86.90% 5px,88.10% 5px,89.29% 4px,90.48% 3px,91.67% 4px,92.86% 4px,94.05% 0px,95.24% 2px,96.43% 4px,97.62% 8px,98.81% 5px,100.00% 4px,100.00% calc(100% - 5px),98.81% calc(100% - 2px),97.62% calc(100% - 3px),96.43% calc(100% - 5px),95.24% calc(100% - 3px),94.05% calc(100% - 7px),92.86% calc(100% - 5px),91.67% calc(100% - 3px),90.48% calc(100% - 3px),89.29% calc(100% - 4px),88.10% calc(100% - 2px),86.90% calc(100% - 5px),85.71% calc(100% - 4px),84.52% calc(100% - 7px),83.33% calc(100% - 5px),82.14% calc(100% - 7px),80.95% calc(100% - 5px),79.76% calc(100% - 2px),78.57% calc(100% - 3px),77.38% calc(100% - 1px),76.19% calc(100% - 1px),75.00% calc(100% - 4px),73.81% calc(100% - 6px),72.62% calc(100% - 6px),71.43% calc(100% - 7px),70.24% calc(100% - 7px),69.05% calc(100% - 4px),67.86% calc(100% - 2px),66.67% calc(100% - 0px),65.48% calc(100% - 4px),64.29% calc(100% - 5px),63.10% calc(100% - 6px),61.90% calc(100% - 5px),60.71% calc(100% - 6px),59.52% calc(100% - 4px),58.33% calc(100% - 1px),57.14% calc(100% - 0px),55.95% calc(100% - 0px),54.76% calc(100% - 0px),53.57% calc(100% - 4px),52.38% calc(100% - 7px),51.19% calc(100% - 6px),50.00% calc(100% - 5px),48.81% calc(100% - 7px),47.62% calc(100% - 3px),46.43% calc(100% - 4px),45.24% calc(100% - 3px),44.05% calc(100% - 2px),42.86% calc(100% - 2px),41.67% calc(100% - 6px),40.48% calc(100% - 6px),39.29% calc(100% - 5px),38.10% calc(100% - 3px),36.90% calc(100% - 3px),35.71% calc(100% - 2px),34.52% calc(100% - 2px),33.33% calc(100% - 2px),32.14% calc(100% - 5px),30.95% calc(100% - 6px),29.76% calc(100% - 5px),28.57% calc(100% - 6px),27.38% calc(100% - 5px),26.19% calc(100% - 4px),25.00% calc(100% - 3px),23.81% calc(100% - 3px),22.62% calc(100% - 4px),21.43% calc(100% - 5px),20.24% calc(100% - 4px),19.05% calc(100% - 4px),17.86% calc(100% - 7px),16.67% calc(100% - 5px),15.48% calc(100% - 4px),14.29% calc(100% - 1px),13.10% calc(100% - 3px),11.90% calc(100% - 0px),10.71% calc(100% - 6px),9.52% calc(100% - 4px),8.33% calc(100% - 7px),7.14% calc(100% - 8px),5.95% calc(100% - 6px),4.76% calc(100% - 1px),3.57% calc(100% - 5px),2.38% calc(100% - 4px),1.19% calc(100% - 1px),0.00% calc(100% - 4px))}
.t-terra{background:var(--terra);color:var(--ink);--hole:var(--terra)}
.t-olive{background:var(--olive);color:var(--cream);--hole:var(--olive);--focus:var(--honey)}
.t-fig{background:var(--fig);color:#fff;--hole:var(--fig);--focus:var(--honey)}
.t-honey{background:var(--honey);color:var(--ink);--hole:var(--honey)}

/* buttons + price tags */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.7rem 1.2rem;border:2px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--cream);font:700 1rem/1.2 var(--body);text-align:center;text-decoration:none;cursor:pointer;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-pair{display:flex;gap:.75rem}
.btn-pair .btn{flex:1 1 0;min-width:0}
.t-olive .btn,.t-fig .btn{background:var(--honey);border-color:var(--honey);color:var(--ink)}
.t-olive .btn-ghost,.t-fig .btn-ghost{background:transparent;border-color:var(--cream);color:var(--cream)}
.tag{display:inline-flex;flex-direction:column;align-items:flex-start;padding:.4rem 1.15rem .4rem 1.75rem;background:radial-gradient(circle at .85rem 50%,var(--hole) 0 .2rem,transparent .21rem),var(--honey);clip-path:polygon(1rem 0,100% 0,100% 100%,1rem 100%,0 50%);color:var(--ink);font:800 1.9rem/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.tag small{font:700 .72rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.15rem}

/* hero: huge stacked words on a cut-paper sheet laid over the overhead photo */
.hero-paper{position:relative;z-index:2;padding:clamp(2.2rem,5vw,4.5rem) 0 clamp(4.5rem,8vw,7rem);margin-top:-8px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:end}
.stack{margin:0;font:800 clamp(4.1rem,20.5vw,9rem)/.84 var(--display);letter-spacing:-.05em}
.hero-side .lede{margin-bottom:1.3rem}
.hero-side .hand{margin:1.3rem 0 0;font-size:1.9rem;display:flex;align-items:center;gap:.4rem}
.hero-side .hand svg{width:46px;height:34px;flex:none;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero-photo{position:relative;margin-top:-14px;height:clamp(280px,58vw,680px);background:var(--ink)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.sticker{position:absolute;right:clamp(1rem,6vw,6rem);bottom:clamp(3.2rem,8vw,5.5rem);transform:rotate(-5deg);--hole:var(--ink);filter:drop-shadow(3px 4px 0 rgba(35,39,18,.55))}
.sticker .tag{font-size:clamp(1.8rem,5vw,2.6rem)}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3rem}
  .stack{font-size:clamp(5.5rem,12.2vw,9.5rem)}
}

/* boards and boxes: a poster price list on olive */
.sizes{display:grid;grid-template-columns:minmax(0,1fr);gap:3.2rem}
.menu{list-style:none;margin:2rem 0 0;padding:0}
.menu li{padding:1.3rem 0;border-top:2px solid rgba(247,239,226,.3)}
.menu li:last-child{border-bottom:2px solid rgba(247,239,226,.3)}
.m-top{display:flex;align-items:center;gap:.7rem}
.m-top h3{min-width:0;font-size:clamp(1.45rem,5.6vw,2.15rem)}
.m-dots{flex:1 1 .5rem;min-width:.4rem;border-bottom:3px dotted rgba(247,239,226,.55);transform:translateY(.3rem)}
.menu p{margin:.6rem 0 0;max-width:46ch}
.sizes .foot-note{margin-top:1.4rem;font-weight:500}
.frame{position:relative;margin:0 12px 14px 0}
.frame::before{content:"";position:absolute;inset:14px -12px -14px 14px;background:var(--terra)}
.frame img{position:relative;width:100%;aspect-ratio:1/1;object-fit:cover}
@media (min-width:900px){.sizes{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:5rem;align-items:center}}

/* grazing tables: one giant number on fig, a paper print, three sample totals */
.tables{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
.bignum{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;margin:.4rem 0 1.4rem;color:var(--honey)}
.bignum b{font:800 clamp(6.5rem,34vw,14rem)/.8 var(--display);letter-spacing:-.06em}
.bignum span{font:600 2.2rem/1 var(--hand)}
.checks{list-style:none;margin:1.4rem 0 0;padding:0}
.checks li{position:relative;padding:.35rem 0 .35rem 1.7rem}
.checks li::before{content:"";position:absolute;left:.15rem;top:.95rem;width:.65rem;height:.65rem;background:var(--honey);transform:rotate(45deg)}
.polaroid{position:relative;margin:0 auto;max-width:440px;padding:14px 14px 62px;background:var(--cream);transform:rotate(2deg);box-shadow:8px 10px 0 rgba(0,0,0,.28)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.polaroid figcaption{position:absolute;left:18px;right:18px;bottom:14px;font:600 1.55rem/1.1 var(--hand);color:var(--olive)}
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;list-style:none;margin:2.6rem 0 0;padding:0}
.ledger li{padding:.75rem .65rem;border:2px solid rgba(255,255,255,.6)}
.ledger b{display:block;font:800 clamp(1.3rem,5.8vw,2.1rem)/1 var(--display);color:var(--honey);letter-spacing:-.03em}
.ledger span{display:block;margin-top:.3rem;font-size:.88rem;line-height:1.3}
.tables .small{margin:1.1rem 0 0;font-size:.98rem}
@media (min-width:900px){.tables{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4.5rem;align-items:start}.tables-aside{padding-top:1.5rem}}

/* what is on a board: dark photo on honey, hand-drawn labels */
.on-board{text-align:center}
.on-board .wrap>p{max-width:60ch;margin-left:auto;margin-right:auto}
.on-board h2{margin-bottom:.8rem}
.tagged{position:relative;margin:2.2rem auto 0;max-width:1100px}
.tagged img{width:100%;box-shadow:8px 8px 0 var(--ink)}
.tag-lines{display:none}
.legend{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;text-align:left}
.legend li{display:flex;align-items:baseline;gap:.7rem;padding:.45rem 0;border-bottom:2px dotted rgba(35,39,18,.45)}
.legend b{font:600 1.7rem/1 var(--hand);flex:none;min-width:7.5rem}
.legend span{min-width:0}
@media (min-width:480px){.legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 2rem}}
@media (min-width:900px){
  .tagged{aspect-ratio:1100/560;margin-top:1.6rem;margin-bottom:-3rem}
  .tagged img{position:absolute;left:18.18%;top:16%;width:63.64%;height:auto}
  .tag-lines{display:block;position:absolute;inset:0;width:100%;height:100%}
  .tag-lines text{font:600 33px var(--hand);fill:var(--ink)}
  .tag-lines path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1.5px var(--cream)) drop-shadow(0 0 1.5px var(--cream))}
  .legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .on-board .wrap{position:relative}
}

/* dietary: a round photo, two paper labels, one plain warning */
.diet{display:grid;grid-template-columns:minmax(0,1fr);gap:2.8rem}
.round{width:min(100%,420px);aspect-ratio:1/1;margin:0 auto;border-radius:50%;overflow:hidden;border:10px solid var(--cream)}
.round img{width:100%;height:100%;object-fit:cover}
.diet-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;margin-top:1.6rem}
.diet-cols article{padding-top:.9rem;border-top:6px solid var(--fig)}
.diet-cols h3{margin-bottom:.5rem}
.diet-cols p{margin:0}
.allergy{margin-top:2rem;padding:1.4rem 1.5rem 1.2rem;background:var(--cream);color:var(--olive);border-left:12px solid var(--fig)}
.allergy h3{color:var(--fig);margin-bottom:.6rem}
.allergy p:last-child{margin-bottom:0}
@media (min-width:640px){.diet-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media (min-width:900px){.diet{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4.5rem;align-items:center}}

/* pickup + delivery: a paper ticket and a fee list */
.del{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
.ticket{position:relative;padding:2rem 1.6rem 1.6rem;background:var(--cream);color:var(--olive);transform:rotate(-1deg);--focus:var(--ink)}
.ticket::before{content:"";position:absolute;inset:8px;border:2px dashed var(--olive);pointer-events:none}
.ticket-h{margin:0 0 .5rem;font:800 2rem/1.05 var(--display);letter-spacing:-.02em}
.ticket .hand{color:var(--fig);margin:0}
.ticket p{margin-bottom:.8rem}
.ticket address{font-style:normal;font-weight:700;margin-bottom:.8rem}
.fees{width:100%;border-collapse:collapse}
.fees caption{padding-bottom:.7rem;text-align:left;font:800 1.7rem/1.1 var(--display);letter-spacing:-.02em}
.fees th,.fees td{padding:.8rem 0;border-top:2px solid rgba(247,239,226,.3);vertical-align:middle;text-align:left}
.fees th{font-weight:600;padding-right:1rem}
.fees td{text-align:right;width:1%;white-space:nowrap}
.fees .tag{font-size:1.35rem}
.fees tr:last-child th,.fees tr:last-child td{border-bottom:2px solid rgba(247,239,226,.3)}
.del .small{margin-top:1.1rem;font-size:.98rem}
@media (min-width:900px){.del{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5rem;align-items:start}}

/* booking: three steps on honey, one ink strip of the rules */
.steps{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem}
.steps li{position:relative;padding:2.1rem 1.3rem 1.4rem;background:var(--cream);color:var(--olive)}
.steps h3{margin-bottom:.45rem}
.steps p{margin:0}
.steps .n{position:absolute;top:-26px;left:1.2rem;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--fig);color:#fff;font:800 1.7rem/1 var(--display)}
.rules{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:2.6rem 0 0;background:var(--ink);color:var(--cream)}
.rules div{padding:1.2rem 1.4rem;border-top:2px dotted rgba(247,239,226,.4)}
.rules div:first-child{border-top:0}
.rules dt{font:600 1.55rem/1.1 var(--hand);color:var(--cream)}
.rules dd{margin:.15rem 0 0}
.rules dd b{display:block;font:800 clamp(1.5rem,6.2vw,2rem)/1.05 var(--display);color:var(--honey);letter-spacing:-.02em}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
  .rules{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rules div{border-top:0;border-left:2px dotted rgba(247,239,226,.4)}
  .rules div:first-child{border-left:0}
}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem}
.faq .lede{margin-bottom:1.2rem}
.qa{background:var(--cream);color:var(--olive);--focus:var(--ink)}
.qa details{border-top:2px solid var(--olive)}
.qa details:first-child{border-top:0}
.qa summary{position:relative;display:flex;align-items:center;min-height:58px;padding:.9rem 3.4rem .9rem 1.2rem;font:700 1.08rem/1.3 var(--body);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-52%);font:800 1.8rem/1 var(--display)}
.qa details[open] summary::after{content:"\2212"}
.qa details p{margin:0;padding:0 1.2rem 1.3rem}
@media (min-width:900px){.faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4.5rem;align-items:start}}

/* request */
.req{display:grid;grid-template-columns:minmax(0,1fr);gap:2.6rem}
.req address{font-style:normal;margin:1.4rem 0 0;line-height:1.7}
.req address a{font-weight:700}
.form{padding:1.6rem 1.3rem 1.8rem;background:var(--cream);color:var(--olive);--focus:var(--ink)}
.field{margin-bottom:1.1rem}
.field label{display:block;margin-bottom:.35rem;font-weight:700}
.opt{font-weight:400}
.form input,.form select,.form textarea{display:block;width:100%;min-height:48px;padding:.65rem .8rem;border:2px solid var(--olive);border-radius:6px;background:#fff;color:var(--ink);font:400 1rem/1.4 var(--body)}
.form textarea{resize:vertical}
.field-row{display:grid;grid-template-columns:minmax(0,1fr);column-gap:1rem}
.form .btn{width:100%;margin-top:.4rem}
.form .fine{margin:.9rem 0 0;font-size:.92rem}
@media (min-width:520px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}.form{padding:2rem 1.8rem}}
@media (min-width:900px){.req{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4.5rem;align-items:start}}

/* footer */
.site-foot{position:relative;margin-top:-8px;padding:4.2rem 0 2.4rem;background:var(--olive);color:var(--cream);--focus:var(--honey)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem}
.site-foot .brand{margin-bottom:.8rem}
.site-foot h2{margin:0 0 .6rem;font:700 .8rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a,.foot-contact a{display:inline-flex;align-items:center;min-height:44px}
.foot-contact{display:flex;flex-direction:column}
.site-foot address{font-style:normal;margin-top:.4rem}
.site-foot .copy{margin:2.4rem 0 0;padding-top:1.2rem;border-top:2px dotted rgba(247,239,226,.4);font-size:.95rem}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}}

/* accessibility statement */
.page-hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(4.5rem,8vw,6.5rem);margin-top:-8px}
.page-hero h1{font-size:clamp(3rem,13vw,7rem);letter-spacing:-.045em;margin-bottom:1rem}
.statement-sec{padding:clamp(3.5rem,7vw,5rem) 0 clamp(4.5rem,8vw,6rem);margin-top:-8px}
.statement>*{max-width:760px}
.statement h2{font-size:clamp(1.7rem,6vw,2.3rem);margin:2.4rem 0 .8rem;letter-spacing:-.02em}
.statement h2:first-child{margin-top:0}
.statement li{margin-bottom:.4rem}
.statement a{font-weight:700}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}