/* Hobb's Acre Farm Shop — concept design by Consult Optio */
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Work Sans";src:url(../fonts/work-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url(../fonts/work-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --soil:#2b2117;--soil2:#5a4733;--kraft:#e6d6b8;--kraft2:#dbc8a4;--tag:#f4ecdc;
  --field:#21402a;--field2:#2c5236;--chalk:#f3eee2;--beet:#8a2342;--beet-d:#6c1a33;
  --mustard:#e2a72e;--leaf:#6f8f3e;--line:#c9b48e;
  --serif:"Fraunces",Georgia,serif;--sans:"Work Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--soil);background:var(--kraft);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--beet);outline-offset:3px}
.wrap{max-width:1220px;margin:0 auto;padding:0 40px}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.02}
.it{font-family:var(--serif);font-style:italic;font-weight:400}

/* top strip */
.strip{background:var(--soil);color:var(--chalk);font-size:14px}
.strip .wrap{display:flex;align-items:center;gap:26px;min-height:42px}
.strip .open{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.strip .open i{width:9px;height:9px;border-radius:50%;background:#9ccc5a}
.strip .open.shut i{background:#e28b6a}
.strip .ctag{margin-left:auto;font-size:12.5px;color:#d7c9ad}
.strip .ctag a{color:#fff}

/* header */
.nav{background:var(--kraft);border-bottom:2px solid var(--soil)}
.nav .wrap{display:flex;align-items:center;gap:36px;min-height:88px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{flex:none}
.logo b{font-family:var(--serif);font-size:27px;line-height:1;display:block;letter-spacing:-.02em}
.logo small{display:block;font-size:13px;color:var(--soil2);margin-top:3px}
.links{display:flex;gap:6px;margin-left:auto}
.links a{text-decoration:none;font-weight:600;font-size:16px;padding:9px 14px;border-radius:999px}
.links a:hover{background:var(--kraft2)}
.links a[aria-current]{background:var(--soil);color:var(--kraft)}
.tel{text-decoration:none;font-weight:600;white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;background:var(--beet);color:#fff;font-weight:600;font-size:16.5px;text-decoration:none;border:2px solid var(--beet);border-radius:10px;cursor:pointer;font-family:inherit;box-shadow:0 4px 0 var(--beet-d);transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--beet-d)}
.btn:active{transform:translateY(4px);box-shadow:none}
.btn.sm{min-height:46px;padding:0 20px;font-size:15.5px}
.btn.line{background:transparent;color:var(--soil);border-color:var(--soil);box-shadow:0 4px 0 var(--soil)}
.btn.line:hover{box-shadow:0 2px 0 var(--soil);background:var(--tag)}
.btn.chalk{background:var(--chalk);color:var(--field);border-color:var(--chalk);box-shadow:0 4px 0 #b7b09d}
.btn.mus{background:var(--mustard);border-color:var(--mustard);color:var(--soil);box-shadow:0 4px 0 #a97a17}

/* hero */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 540px;gap:56px;padding-top:44px;padding-bottom:64px;align-items:start}
.today{display:inline-flex;flex-wrap:wrap;gap:6px 16px;font-size:15px;font-weight:600;background:var(--tag);border:2px solid var(--soil);border-radius:10px;padding:9px 14px}
.today span{font-weight:400}
.hero h1{font-size:76px;line-height:.98;margin:24px 0 22px;letter-spacing:-.03em}
.hero .sub{font-size:19.5px;max-width:36ch;color:var(--soil2)}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.cut{margin-top:30px;display:flex;gap:14px;align-items:center;font-size:15.5px;max-width:520px;padding-top:20px;border-top:2px dashed var(--line)}
.cut svg{flex:none;color:var(--beet)}
.cut b{font-weight:600}

/* chalkboard — signature */
.board{position:relative;margin-top:26px;background:var(--field);color:var(--chalk);border-radius:6px;padding:34px 36px 28px;transform:rotate(-1.2deg);
  box-shadow:0 0 0 12px #6b4a2b,0 0 0 14px #4c331d,0 30px 50px -20px rgba(43,33,23,.6);
  background-image:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.07),transparent 50%),radial-gradient(ellipse at 80% 90%,rgba(255,255,255,.05),transparent 55%)}
.board:before,.board:after{content:"";position:absolute;top:-40px;width:2px;height:34px;background:#4c331d}
.board:before{left:22%;transform:rotate(-24deg)}.board:after{right:22%;transform:rotate(24deg)}
.board .hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:2px dashed rgba(243,238,226,.35);padding-bottom:12px}
.board h2{font-size:34px;font-weight:400;font-style:italic;color:var(--chalk);letter-spacing:-.01em}
.board h2 b{font-style:normal;font-weight:700;color:var(--mustard)}
.board .hd small{font-size:13px;color:#cfd8c9}
.board ul{list-style:none;margin-top:10px}
.board li{display:flex;align-items:baseline;gap:10px;padding:7px 0;font-size:16.5px}
.board li .n{font-weight:600}
.board li .n em{font-style:normal;font-weight:400;font-size:13.5px;color:#cfd8c9;margin-left:6px}
.board li .dots{flex:1;border-bottom:2px dotted rgba(243,238,226,.35);transform:translateY(-4px);min-width:20px}
.board li .p{font-family:var(--serif);font-size:20px;white-space:nowrap}
.board li .p small{font-family:var(--sans);font-size:12.5px;color:#cfd8c9;margin-left:2px}
.board .soon{font-size:15.5px;color:#dfe6d9;margin-top:12px;min-height:150px}
.board .soon b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--chalk);margin-bottom:6px}
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:16px;padding-top:14px;border-top:2px dashed rgba(243,238,226,.35)}
.months button{font:inherit;font-size:12.5px;font-weight:600;min-height:44px;border:0;border-radius:6px;background:transparent;color:#cfd8c9;cursor:pointer;padding:0}
.months button:hover{background:rgba(243,238,226,.1);color:#fff}
.months button[aria-pressed=true]{background:var(--mustard);color:var(--soil)}
.months button.now{box-shadow:inset 0 -3px 0 var(--chalk)}
.board .foot-n{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#cfd8c9;margin-top:10px}

/* trust */
.trust{background:var(--soil);color:var(--chalk)}
.trust ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.trust li{padding:22px 22px;border-left:1px solid rgba(243,238,226,.18);font-size:14.5px;color:#d7c9ad;line-height:1.45}
.trust li:first-child{border-left:0;padding-left:0}
.trust b{display:block;color:#fff;font-weight:600;font-size:15.5px}
.trust li.slot{margin:12px 0 12px 18px;padding:10px 14px;border:1.5px dashed rgba(243,238,226,.4);border-radius:10px}
.trust li.slot em{color:var(--mustard)}
.slot{border:2px dashed var(--line);border-radius:12px;background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(138,35,66,.05) 10px 20px)}
.slot em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--beet);line-height:1.25}

/* photo */
.ph{position:relative;overflow:hidden;background:var(--ph,#b9a37a)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-tag{position:absolute;left:14px;top:14px;background:var(--tag);color:var(--soil);font-size:12px;font-weight:600;padding:3px 10px;border-radius:6px;border:1.5px solid var(--soil);z-index:1}
.ph.failed img{opacity:0}
.ph.failed:after{content:attr(data-alt);position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;font-family:var(--serif);font-style:italic;font-size:22px;color:rgba(43,33,23,.5)}
.band{height:420px}
.band-cap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--soil2);padding-top:12px}

/* sections */
.sec{padding:100px 0}
.sec.tag-bg{background:var(--tag)}
.head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:44px;flex-wrap:wrap}
.h2{font-size:58px;max-width:16ch}
.lede{font-size:18px;color:var(--soil2);max-width:46ch}

/* product tags */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod{position:relative;background:var(--tag);border:2px solid var(--soil);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.prod .ph{height:170px;border-bottom:2px solid var(--soil)}
.prod .bd{padding:18px 18px 18px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:22px;line-height:1.1}
.prod .pr{display:flex;align-items:baseline;gap:8px;margin:10px 0 2px;flex-wrap:wrap}
.prod .pr b{font-family:var(--serif);font-size:30px;line-height:1}
.prod .pr span{font-size:14px;color:var(--soil2)}
.prod .unit{font-size:13.5px;color:var(--soil2)}
.prod .meta{list-style:none;font-size:13.5px;margin:12px 0 14px;display:grid;gap:4px}
.prod .meta li{display:flex;gap:8px;align-items:flex-start;line-height:1.35}
.prod .meta li:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--leaf);margin-top:5px}
.prod .meta li.al:before{background:var(--mustard)}
.prod .meta li.ex:before{background:var(--beet)}
.prod .btn{margin-top:auto;min-height:46px;font-size:15px;padding:0 14px;width:100%}
.under{margin-top:22px;font-size:15px}
.under a{color:var(--beet);font-weight:600}

/* how to buy */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.way{background:var(--kraft);border-radius:14px;padding:28px 26px;border:2px solid var(--soil)}
.way .k{display:inline-block;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--beet);margin-bottom:8px}
.way h3{font-size:28px;margin-bottom:12px}
.way .big{font-family:var(--serif);font-size:22px;line-height:1.25;margin-bottom:10px}
.way p{font-size:15.5px;color:var(--soil2)}

/* butchery band */
.butch{background:var(--beet);color:#fff;padding:0;display:grid;grid-template-columns:1fr 1fr}
.butch .ph{min-height:520px}
.butch .in{padding:90px 70px 90px 60px;max-width:640px}
.butch h2{font-size:58px}
.butch p{color:#f2d9e0;margin-top:18px;font-size:18px}
.butch .xmas{margin-top:28px;background:rgba(0,0,0,.18);border:2px dashed rgba(255,255,255,.4);border-radius:14px;padding:20px 22px}
.butch .xmas b{font-family:var(--serif);font-size:22px;display:block;margin-bottom:4px}
.butch .xmas p{margin-top:0;font-size:15.5px}
.butch .acts .btn.line{color:#fff;border-color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.butch .acts .btn.line:hover{background:rgba(255,255,255,.1)}

/* owner + reviews */
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.owner{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:center;padding:28px}
.owner .pic{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:13px;padding:20px;background:var(--kraft2);color:var(--soil2)}
.owner h3{font-size:30px;margin-bottom:8px}
.revs{display:grid;gap:14px}
.rev{padding:20px 22px}
.rev p{font-size:15.5px;color:var(--soil2)}

/* visit summary */
.visit{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch}
.map{display:block;position:relative;border:2px solid var(--soil);border-radius:14px;overflow:hidden;background:#d7cba8;min-height:380px;text-decoration:none}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map span{position:absolute;left:16px;bottom:16px;background:var(--tag);border:2px solid var(--soil);border-radius:8px;padding:6px 12px;font-weight:600;font-size:14.5px}
.hours{width:100%;border-collapse:collapse;font-size:16px;margin:16px 0}
.hours th,.hours td{text-align:left;padding:9px 0;border-bottom:1.5px dashed var(--line);font-weight:400}
.hours td{text-align:right;font-weight:600}
.hours tr.is-today th,.hours tr.is-today td{color:var(--beet);font-weight:600}

/* delivery brief */
.dr{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dr div{border-top:3px solid var(--soil);padding-top:16px}
.dr h3{font-size:22px;margin-bottom:6px}
.dr p{font-size:15.5px;color:var(--soil2)}

/* newsletter */
.news{background:var(--field);color:var(--chalk);padding:80px 0}
.news .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.news h2{font-size:46px}
.news p{color:#cfd8c9;margin-top:10px}
.nf{display:grid;gap:12px}
.nf label{font-size:14.5px;font-weight:600}
.nf input[type=email]{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;padding:12px 14px;min-height:52px;border-radius:10px;border:2px solid var(--chalk);background:transparent;color:#fff}
.nf .chk{display:flex;gap:10px;font-weight:400;align-items:flex-start}
.nf .chk input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--mustard)}
.nf small{font-size:13.5px;color:#cfd8c9}
.nf small a{color:#fff}

/* inner */
.phead{padding:56px 0 54px;border-bottom:2px solid var(--soil)}
.phead .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}
.crumb{font-size:14px;color:var(--soil2);margin-bottom:18px}
.phead h1{font-size:72px;letter-spacing:-.03em}
.phead .sub{font-size:18.5px;color:var(--soil2);margin-top:18px;max-width:46ch}
.range{display:grid;grid-template-columns:380px 1fr;gap:44px;padding:64px 0;border-bottom:2px dashed var(--line);scroll-margin-top:10px}
.range .ph{height:300px;border-radius:14px;border:2px solid var(--soil)}
.range h2{font-size:44px;margin:20px 0 8px}
.range .grid4{grid-template-columns:repeat(3,1fr)}
.plist{width:100%;border-collapse:collapse;font-size:16px;background:var(--tag);border:2px solid var(--soil);border-radius:14px;overflow:hidden}
.plist caption{text-align:left;font-family:var(--serif);font-weight:700;font-size:34px;padding:0 0 14px}
.plist th,.plist td{text-align:left;padding:13px 18px;border-bottom:1.5px dashed var(--line);font-weight:400;vertical-align:top}
.plist thead th{background:var(--soil);color:var(--chalk);font-weight:600;font-size:14px}
.plist td.v{font-family:var(--serif);font-size:19px;white-space:nowrap;text-align:right}
.plist small{display:block;font-size:13.5px;color:var(--soil2)}
.tables{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.form{background:var(--tag);border:2px solid var(--soil);border-radius:14px;padding:34px}
.f{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:18px}
.f label{display:block;font-size:14.5px;font-weight:600}
.f .full{grid-column:1/-1}
.f input,.f textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;font-weight:400;color:var(--soil);border:2px solid var(--soil);border-radius:10px;padding:11px 13px;min-height:50px;background:#fffaf0}
.f textarea{min-height:110px;resize:vertical}
.f .hint{font-weight:400;color:var(--soil2);font-size:13.5px}
.send{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:22px}
.send small{font-size:13.5px;color:var(--soil2);flex:1;min-width:200px}
.facts{list-style:none;display:grid;gap:12px}
.facts li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1.5px dashed var(--line);font-size:16px}
.facts li b{font-weight:600}

.foot{background:var(--soil);color:#d7c9ad;padding:80px 0 110px;font-size:14.5px}
.foot .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.foot .l{font-family:var(--serif);font-size:28px;color:#fff;display:block;margin-bottom:10px}
.foot h4{color:var(--mustard);font-size:14.5px;margin-bottom:10px;font-weight:600}
.foot p{margin-bottom:12px}
.foot a{color:#fff}
.foot .dash{border:1.5px dashed rgba(243,238,226,.35);border-radius:10px;padding:10px 12px;font-size:13.5px}
.foot .fine{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(243,238,226,.18);margin-top:44px;padding-top:22px;font-size:13px}
.mbar{display:none}

@media (prefers-reduced-motion:no-preference){
  .board{animation:hang 1.1s cubic-bezier(.3,1.5,.5,1) both}
  .board li{animation:chalk .5s both}
  .board li:nth-child(2){animation-delay:.05s}.board li:nth-child(3){animation-delay:.1s}.board li:nth-child(4){animation-delay:.15s}.board li:nth-child(5){animation-delay:.2s}.board li:nth-child(6){animation-delay:.25s}.board li:nth-child(7){animation-delay:.3s}
  @keyframes hang{from{transform:rotate(3deg) translateY(-20px);opacity:0}to{transform:rotate(-1.2deg);opacity:1}}
  @keyframes chalk{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:1100px){.hero .wrap{grid-template-columns:1fr 470px;gap:40px}.hero h1{font-size:66px}.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .wrap{padding:0 20px}
  .strip .wrap{gap:12px;min-height:38px;font-size:13px;justify-content:space-between}
  .strip .hide-m{display:none}
  .strip .ctag{margin-left:0;font-size:11.5px;text-align:right}
  .nav .wrap{flex-wrap:wrap;gap:8px 12px;min-height:0;padding-top:12px}
  .logo b{font-size:22px}.logo small{font-size:12px}.logo svg{width:40px;height:40px}
  .nav .btn{margin-left:auto;min-height:44px;padding:0 14px;font-size:14.5px}
  .tel{display:none}
  .links{order:3;width:100%;margin:6px 0 0;gap:4px;justify-content:space-between;border-top:1.5px dashed var(--line);padding:6px 0}
  .links a{min-height:44px;display:flex;align-items:center;padding:0 12px;font-size:15px}
  .hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:24px;padding-bottom:56px}
  .hero h1{font-size:46px;margin:18px 0 14px}
  .hero .sub{font-size:17px}
  .today{font-size:13.5px}
  .acts{margin-top:22px}.acts .btn{flex:1 1 auto}
  .board{padding:24px 18px 20px;margin:20px 6px 0;box-shadow:0 0 0 8px #6b4a2b,0 0 0 10px #4c331d,0 20px 40px -20px rgba(43,33,23,.6)}
  .board h2{font-size:27px}
  .board li{font-size:15px}.board li .n em{display:block;margin:0}
  .board li .p{font-size:17px}
  .months{grid-template-columns:repeat(6,1fr)}
  .trust ul{grid-template-columns:1fr 1fr}
  .trust li{border-left:0;border-top:1px solid rgba(243,238,226,.18);padding:16px 10px 16px 0}
  .trust li.slot{margin:10px 6px 10px 0}
  .band{height:260px}
  .sec{padding:70px 0}
  .h2,.butch h2{font-size:38px}
  .head{margin-bottom:30px}
  .grid4,.range .grid4{grid-template-columns:1fr 1fr;gap:12px}
  .prod .ph{height:120px}
  .prod .bd{padding:14px 12px}
  .prod h3{font-size:18px}
  .prod .pr b{font-size:24px}
  .prod .meta{font-size:12.5px}
  .prod .btn{font-size:14px;padding:0 8px}
  .how,.dr,.two,.visit,.tables{grid-template-columns:1fr}
  .butch{grid-template-columns:1fr}
  .butch .ph{min-height:260px}
  .butch .in{padding:60px 20px}
  .owner{grid-template-columns:1fr;padding:22px}
  .owner .pic{width:140px}
  .news{padding:60px 0}
  .news .wrap{grid-template-columns:1fr;gap:26px}
  .news h2{font-size:34px}
  .phead{padding:34px 0 40px}
  .phead .wrap{grid-template-columns:1fr;gap:26px}
  .phead h1{font-size:44px}
  .range{grid-template-columns:1fr;gap:20px;padding:44px 0}
  .range .ph{height:220px}
  .range h2{font-size:34px}
  .plist th,.plist td{padding:11px 12px}
  .form{padding:22px 16px}
  .f{grid-template-columns:1fr}
  .facts li{grid-template-columns:1fr;gap:2px}
  .foot .grid{grid-template-columns:1fr;gap:28px}
  .mbar{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--kraft);padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:2px solid var(--soil)}
  .mbar .btn{min-height:48px;padding:0 10px}
}
@media (max-width:420px){.hero h1{font-size:42px}.links a{padding:0 8px;font-size:14.5px}}
@media (max-width:360px){.grid4,.range .grid4{grid-template-columns:1fr}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){
  .dtable thead{display:none}
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable tr{padding:10px 0;border-bottom:2px solid var(--soil)}
  .dtable td{border:0;padding:4px 14px;display:grid;grid-template-columns:96px 1fr;gap:10px}
  .dtable td:before{content:attr(data-l);font-weight:600;font-size:13.5px}
  .dtable td:first-child{font-family:var(--serif);font-weight:700;font-size:19px;display:block}
  .dtable td:first-child:before{display:none}
}