/* Lower Wilbury Farm Shop and Butchery: demo. Colours from their own labels:
   olive-black badge, cream lettering, black and white gingham, the sage of the shop wall. */
:root{
  --ground:#f4f3ec; --paper:#ffffff; --ink:#23241e; --field:#2a2b23; --cream:#ead9b0;
  --sage:#c5cab6; --green:#2f5e3a; --green-d:#244a2d; --soft:#5a5c50;
  --t-xs:clamp(15px,.9rem + .1vw,17px);
  --t-s:clamp(16px,.95rem + .2vw,18px);
  --t-m:clamp(17px,1rem + .25vw,20px);
  --t-l:clamp(21px,1.1rem + .8vw,30px);
  --t-xl:clamp(30px,1.4rem + 2.2vw,58px);
  --t-xxl:clamp(38px,1.5rem + 3.6vw,84px);
  --pad:clamp(20px,4vw,64px);
  --sec:clamp(56px,7vw,120px);
  --gap:clamp(16px,2vw,32px);
  --ease:cubic-bezier(.22,.8,.26,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--t-m)/1.55 "Instrument Sans",system-ui,Segoe UI,Arial,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:"Marcellus",Georgia,serif;font-weight:400;margin:0;line-height:1.05;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:var(--t-xxl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-l)}
p{margin:0}
a{color:inherit}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.dark :focus-visible{outline-color:var(--cream)}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:12px 16px;z-index:20}
.skip:focus{left:8px;top:8px}

/* header */
.top{background:var(--field);color:var(--cream)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);min-height:76px;flex-wrap:wrap;padding-block:10px}
.mark{font-family:"Marcellus",Georgia,serif;text-decoration:none;font-size:clamp(19px,1rem + .6vw,26px);letter-spacing:.12em;text-transform:uppercase;line-height:1.1;display:inline-flex;align-items:center;min-height:44px}
.top nav{display:flex;align-items:center;gap:clamp(4px,1.4vw,28px);flex-wrap:wrap}
.top nav a{font-size:var(--t-s);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding-inline:8px}
.top nav a:hover{text-decoration:underline;text-underline-offset:5px}
.top nav a.tel{background:var(--cream);color:var(--field);padding-inline:18px;font-weight:600}
.top nav a.tel:hover{text-decoration:none;background:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 28px;font:600 var(--t-m)/1.2 "Instrument Sans",system-ui,sans-serif;text-decoration:none;background:var(--green);color:#fff;border:0;cursor:pointer;transition:background .2s,transform .15s var(--ease)}
.btn:hover{background:var(--green-d)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.light{background:var(--cream);color:var(--field)}
.btn.light:hover{background:#fff}
.btn.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn.line:hover{background:rgba(255,255,255,.1)}
.on-ground .btn.line:hover{background:rgba(35,36,30,.07)}

/* hero */
.hero{background:var(--field);color:#f3efe2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.hero-text{padding:clamp(36px,6vw,104px) var(--pad) clamp(40px,6vw,96px) max(var(--pad),calc((100vw - 1440px)/2 + var(--pad)));display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2vw,30px);container-type:inline-size}
.hero h1{color:var(--cream);font-size:clamp(38px,9.2cqi,92px)}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 .h-a{font-size:clamp(40px,13.2cqi,104px)}
.hero h1 .h-b{font-size:clamp(24px,7.9cqi,62px);margin-top:.18em;color:#f3efe2}
.hero .lead{font-size:var(--t-l);line-height:1.35;max-width:26em}
.hero .hours{font-size:var(--t-m);max-width:30em}
.hero .hours b{color:var(--cream);font-weight:600}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.hero-pic{position:relative;overflow:hidden;min-height:min(78vh,860px);perspective:1200px}
.hero-pic img{position:absolute;inset:-30px -12px;max-width:none;width:calc(100% + 24px);height:calc(100% + 60px);object-fit:cover;object-position:50% 22%;will-change:transform}

/* gingham strip with their counter tickets drifting along it */
.gingham{--g:22px;background-color:#fbfaf6;background-image:repeating-linear-gradient(0deg,rgba(35,36,30,.5) 0 var(--g),transparent var(--g) calc(var(--g)*2)),repeating-linear-gradient(90deg,rgba(35,36,30,.5) 0 var(--g),transparent var(--g) calc(var(--g)*2))}
.strip{overflow:hidden;padding-block:22px}
.strip-track{display:flex;gap:18px;width:max-content;animation:drift 70s linear infinite}
.strip-track span{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);padding:10px 20px;font-size:var(--t-s);font-weight:500;white-space:nowrap}
@keyframes drift{to{transform:translate3d(-50%,0,0)}}

/* sections */
.sec{padding-block:var(--sec)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:end;margin-bottom:clamp(28px,3.4vw,56px)}
.sec-head p{font-size:var(--t-l);line-height:1.35;max-width:28em}
.dark{background:var(--field);color:#f3efe2}
.dark h2{color:var(--cream)}
.sagef{background:var(--sage)}

/* the counter taste */
.cuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.cut figure{margin:0}
.pic{overflow:hidden;background:#ddd9cc}
.pic img{width:100%;height:100%;object-fit:cover}
.cut .pic{aspect-ratio:3/4}
.cut h3{margin:22px 0 14px}
.tickets{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tickets li{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);padding:11px 16px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-size:var(--t-s);line-height:1.3}
.tickets li b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.more{margin-top:clamp(28px,3vw,48px);display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.more p{font-size:var(--t-s);color:var(--soft)}

/* new products */
.new{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,88px);align-items:center}
.new .pic{aspect-ratio:9/10}
.new blockquote{margin:22px 0 0;font-size:var(--t-l);line-height:1.35;max-width:25em}
.new cite{display:block;font-style:normal;font-size:var(--t-s);margin-top:10px;color:#3d4034}
.new .tickets{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
.new .tickets li{justify-content:flex-start}

/* around the shop */
.shop-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.shop-grid figure{margin:0}
.shop-grid figcaption{font-size:var(--t-s);padding-top:12px;line-height:1.4;max-width:34em}
.shop-grid figcaption b{font-weight:600;display:block;font-size:var(--t-m)}
.g-veg{grid-column:1/6}.g-veg .pic{aspect-ratio:1110/1440}
.g-fruit{grid-column:6/10;margin-top:clamp(40px,6vw,110px)!important}.g-fruit .pic{aspect-ratio:3/4}
.g-cheese{grid-column:10/13}.g-cheese .pic{aspect-ratio:3/4}
.g-bakes{grid-column:1/7}.g-bakes .pic{aspect-ratio:4/3}
.g-bread{grid-column:7/10;margin-top:clamp(30px,4vw,80px)!important}.g-bread .pic{aspect-ratio:3/4}
.g-tins{grid-column:10/13}.g-tins .pic{aspect-ratio:4/5}

/* the farm */
.farm{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center}
.farm .pic.wide{aspect-ratio:1284/718}
.farm figure{margin:0}
.farm figcaption{font-size:var(--t-s);padding-top:12px;color:#d9d5c6;max-width:40em}
.farm-text{display:grid;gap:22px}
.farm-text p{max-width:30em}
.farm-text .big{font-size:var(--t-l);line-height:1.35}
.farm-pig{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:18px;align-items:center}
.farm-pig .pic{aspect-ratio:4/3}

/* find us */
.find{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,88px);align-items:center}
.find .pic{aspect-ratio:1200/1400}
.find .pic img{object-position:50% 12%}
.find figure{margin:0}
.find figcaption{font-size:var(--t-s);padding-top:12px;color:var(--soft)}
.facts{display:grid;gap:clamp(22px,2.4vw,36px);margin-top:clamp(22px,2.6vw,40px)}
.hours-t{border-collapse:collapse;font-size:var(--t-l);line-height:1.3;font-family:"Marcellus",Georgia,serif}
.hours-t th{font-weight:400;text-align:left;padding:4px 28px 4px 0}
.hours-t td{padding:4px 0;font-variant-numeric:tabular-nums}
.facts address{font-style:normal}
.facts .lbl{font-weight:600;display:block}
.facts a.big-link{font-size:var(--t-l);font-family:"Marcellus",Georgia,serif;text-decoration:none;display:inline-flex;min-height:44px;align-items:center;overflow-wrap:anywhere}
.facts a.big-link:hover{text-decoration:underline;text-underline-offset:6px}
.find .acts{display:flex;gap:14px;flex-wrap:wrap}

/* footer */
.foot{background:var(--field);color:#f3efe2}
.foot .name{font-family:"Marcellus",Georgia,serif;color:var(--cream);text-transform:uppercase;letter-spacing:.06em;line-height:1;font-size:clamp(30px,11.1cqi,190px);white-space:nowrap}
.foot .wrap{container-type:inline-size;padding-block:clamp(36px,5vw,72px) 28px}
.foot .row{display:flex;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;margin-top:clamp(20px,3vw,40px);font-size:var(--t-s)}
.foot .row a{display:inline-flex;min-height:44px;align-items:center}
.foot .demo{color:#bdb9aa;font-size:var(--t-xs);margin-top:18px}

/* counter page */
.c-head{background:var(--field);color:#f3efe2;padding-block:clamp(36px,5vw,84px)}
.c-head .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--gap);align-items:end}
.c-head h1{color:var(--cream)}
.c-head p{font-size:var(--t-l);line-height:1.35;max-width:26em}
.c-bar{position:sticky;top:0;z-index:5;background:var(--ground);box-shadow:0 2px 0 var(--ink)}
.c-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-block:8px}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap;text-decoration:none;font-size:var(--t-s);font-weight:500;min-height:46px;display:inline-flex;align-items:center;padding-inline:14px}
.tabs a[aria-current="true"]{background:var(--ink);color:var(--ground)}
.weigh{display:flex;align-items:center;gap:10px;font-size:var(--t-s)}
.weigh div{display:flex;box-shadow:inset 0 0 0 2px var(--ink)}
.weigh button{font:500 var(--t-s)/1 "Instrument Sans",system-ui,sans-serif;background:transparent;color:var(--ink);border:0;min-height:46px;min-width:64px;padding-inline:12px;cursor:pointer}
.weigh button[aria-pressed="true"]{background:var(--green);color:#fff}
.c-sec{padding-block:clamp(40px,5vw,84px);scroll-margin-top:70px}
.c-sec .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,72px);align-items:start}
.c-sec .side{position:sticky;top:86px}
.c-sec .side .pic{aspect-ratio:3/4;margin-top:20px}
.c-sec .tickets{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.c-sec .tickets li{padding:15px 18px;font-size:var(--t-m)}
.c-sec:nth-of-type(even){background:var(--sage)}
.c-sec.nopic .wrap{align-items:center}
.c-note{font-size:var(--t-s);color:var(--soft);margin-top:10px}
.c-end{padding-block:var(--sec)}
.c-end .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.c-end p{font-size:var(--t-l);line-height:1.35;max-width:26em}

/* motion: arrival at the top */
@media (prefers-reduced-motion:no-preference){
  .hero-text > *{animation:rise .8s var(--ease) both}
  .hero-text > :nth-child(1){animation-delay:.08s}
  .hero-text > :nth-child(2){animation-delay:.22s}
  .hero-text > :nth-child(3){animation-delay:.34s}
  .hero-text > :nth-child(4){animation-delay:.46s}
  .hero-pic{animation:slidein 1.1s var(--ease) .1s both}
  .c-head h1{animation:rise .8s var(--ease) .05s both}
  .c-head p{animation:rise .8s var(--ease) .2s both}
  @keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
  @keyframes slidein{from{opacity:0;transform:translate3d(48px,0,0)}to{opacity:1;transform:none}}
  .js .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
  .js .rv.in{opacity:1;transform:none}
  .js .tickets.rvl li{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0)*45ms)}
  .js .tickets.rvl.in li{opacity:1;transform:none}
  .js .rv[data-depth]{transform:none;transition:opacity .7s var(--ease)}
  [data-depth]{will-change:transform}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip{overflow-x:auto}
  .strip-track{animation:none}
}

/* laptop and below */
@media (max-width:1100px){
  .g-veg{grid-column:1/7}.g-fruit{grid-column:7/13}
  .g-cheese{grid-column:1/5}.g-bakes{grid-column:5/13}
  .g-bread{grid-column:1/7;margin-top:0!important}.g-tins{grid-column:7/13}
  .g-cheese{margin-top:0}
}
/* phone */
@media (max-width:760px){
  .top .wrap{min-height:0}
  .top .wrap{gap:4px 10px}
  .top nav{display:contents}
  .top nav a{order:3;padding-inline:4px;flex:1 1 auto;justify-content:center}
  .top nav a:first-child{justify-content:flex-start}
  .top nav a.tel{order:2;flex:0 0 auto;padding-inline:12px;margin-left:auto}
  .mark{order:1}
  .hours-t,.hours-t tbody,.hours-t tr,.hours-t th,.hours-t td{display:block}
  .hours-t caption{display:block}
  .hours-t td{padding:0 0 12px;color:var(--soft)}
  .hours-t th{padding:0}
  .hero{grid-template-columns:1fr}
  .hero-text{padding:30px var(--pad) 34px}
  .hero-pic{min-height:0;aspect-ratio:4/5}
  .hero .btn{flex:1 1 auto}
  .sec-head{grid-template-columns:1fr;align-items:start}
  .cuts{grid-template-columns:1fr;gap:44px}
  .cut .pic{aspect-ratio:4/5}
  .new,.farm,.find{grid-template-columns:1fr}
  .new .tickets{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr 1fr;gap:28px 14px}
  .shop-grid figure{grid-column:auto!important;margin-top:0!important}
  .shop-grid .g-veg,.shop-grid .g-bakes{grid-column:1/-1!important}
  .farm-pig{grid-template-columns:130px 1fr}
  .find .pic{aspect-ratio:4/5}
  .c-head .wrap{grid-template-columns:1fr}
  .c-bar .wrap{padding-inline:10px}
  .weigh{width:100%;justify-content:space-between}
  .c-sec{scroll-margin-top:120px}
  .c-sec .wrap{grid-template-columns:1fr}
  .c-sec .side{position:static}
  .c-sec .side .pic{aspect-ratio:4/5}
  .c-sec .tickets{grid-template-columns:1fr}
  .find .btn{flex:1 1 auto}
}