/* The Red Lion, Chesham. Colours from their own material: the stone ground of their lion logo,
   the dark teal and orange of their Facebook picture and Christmas boards. */
:root{
  --stone:#e1dddc; --stone2:#d3cecc; --paper:#efecea;
  --teal:#123133; --teal2:#0b2325; --teal3:#1c4245;
  --orange:#e08a27; --ink:#101f20;
  --disp:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --text:"Barlow",Arial,sans-serif;
  --m:clamp(20px,4.2vw,72px);
  --sec:clamp(52px,5.8vw,108px);
  --t-body:clamp(17px,.55vw + 14.5px,20px);
  --t-lead:clamp(20px,1vw + 15px,30px);
  --t-h2:clamp(46px,6.2vw,124px);
  --t-row:clamp(26px,2.3vw + 12px,50px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--ink);font:400 var(--t-body)/1.5 var(--text);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:1560px;margin:0 auto;padding-left:var(--m);padding-right:var(--m)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--orange);color:var(--teal2);padding:12px 16px;z-index:50}

/* header */
.top{background:var(--stone)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
.brand img{width:44px;height:46px;object-fit:contain}
.brand b{font:700 clamp(22px,1.2vw + 14px,30px)/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;color:var(--teal)}
.brand span{font:500 clamp(15px,.3vw + 13px,17px)/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-left:2px}
.nav{display:flex;align-items:center;gap:clamp(4px,1.6vw,30px)}
.nav a{font:600 clamp(16px,.4vw + 14px,19px)/1 var(--text);text-decoration:none;color:var(--teal);padding:14px 6px;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--orange)}
.nav a.go{background:var(--teal);color:var(--stone);padding:14px 20px}
.nav a.go:hover{background:var(--teal3);text-decoration:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 28px;font:600 clamp(17px,.4vw + 15px,21px)/1.1 var(--text);text-decoration:none;background:var(--orange);color:var(--teal2);transition:transform .15s ease,background .15s ease}
.btn:hover{background:#eb9a3d}
.btn:active{transform:translateY(2px)}
.btn.dark{background:var(--teal);color:var(--stone)}
.btn.dark:hover{background:var(--teal3)}
.btn.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 3px currentColor}
.btn.line:hover{background:rgba(18,49,51,.08)}
.on-teal .btn.line:hover{background:rgba(225,221,220,.12)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(16px,3vw,56px);align-items:center;padding-top:clamp(12px,2vw,36px);padding-bottom:clamp(36px,4.5vw,72px)}
.hero-t{container-type:inline-size}
.hero h1{font:700 clamp(60px,19.4cqi,300px)/.84 var(--disp);text-transform:uppercase;letter-spacing:-.012em;color:var(--teal);white-space:nowrap}
.hero .town{font:500 clamp(20px,4.1cqi,44px)/1 var(--text);letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-top:clamp(12px,2.4cqi,30px)}
.hero .say{font:500 var(--t-lead)/1.3 var(--text);max-width:27em;margin-top:clamp(20px,3.2cqi,44px)}
.hero .btns{margin-top:clamp(22px,3cqi,40px)}
.hero-lion img{width:100%;max-width:710px;margin-left:auto;aspect-ratio:710/734;object-fit:contain}

/* hours band */
.band{background:var(--teal);color:var(--stone)}
.band .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr);gap:clamp(16px,2.4vw,44px);padding-top:clamp(26px,2.8vw,44px);padding-bottom:clamp(26px,2.8vw,44px);align-items:end}
.band dt{font:500 clamp(16px,.4vw + 14px,20px)/1.2 var(--text);color:var(--orange)}
.band dd{font:600 clamp(34px,3.1vw + 8px,68px)/1 var(--disp);letter-spacing:-.005em;white-space:nowrap}
.band .food{font:400 clamp(16px,.4vw + 14px,20px)/1.4 var(--text)}
.band .food b{display:block;font-weight:500;color:var(--orange)}

/* sections */
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.on-teal{background:var(--teal);color:var(--stone)}
.on-deep{background:var(--teal2);color:var(--stone)}
.on-paper{background:var(--paper)}
h2{font:700 var(--t-h2)/.9 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.on-teal h2,.on-deep h2{color:var(--stone)}
.lead{font:500 var(--t-lead)/1.35 var(--text)}

/* welcome */
.welcome .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center}
.welcome .lead{max-width:24em}
.four{container-type:inline-size}
.four li{font:700 clamp(40px,15.2cqi,140px)/.95 var(--disp);text-transform:uppercase;color:var(--orange);letter-spacing:-.008em;white-space:nowrap}
.four li + li{margin-top:.08em}

/* food */
.food-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,84px);align-items:start}
.pz img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pair{display:grid;grid-template-columns:minmax(0,484fr) minmax(0,571fr);gap:clamp(14px,2vw,36px);align-items:start;margin-top:clamp(14px,2vw,36px)}
.pair img{width:100%;object-fit:cover}
.pair .f1 img{aspect-ratio:484/640}
.pair .f2 img{aspect-ratio:571/640}
.ft h2{margin-bottom:clamp(18px,2vw,32px)}
.dish{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:baseline;padding:clamp(10px,1vw,16px) 0}
.dish + .dish{box-shadow:inset 0 3px 0 var(--stone2)}
.dish h3{font:600 var(--t-row)/1.02 var(--disp);text-transform:uppercase;color:var(--teal)}
.dish .p{font:600 var(--t-row)/1.02 var(--disp);color:var(--teal);white-space:nowrap}
.dish p{grid-column:1/-1;margin-top:4px;max-width:34em}
.ft .btns{margin-top:clamp(22px,2.4vw,36px)}
.dish.long h3{grid-column:1/-1}
.dish.long .p{grid-column:1/-1;font-size:calc(var(--t-row) * .72);white-space:normal;margin-top:4px}
figcaption{margin-top:10px;font:500 clamp(16px,.3vw + 14.5px,18px)/1.35 var(--text)}
.wings{background:var(--orange);color:var(--teal2);padding:clamp(24px,3vw,52px);margin-top:clamp(24px,2.6vw,44px)}
.wings h3{font:700 clamp(40px,4.3vw,86px)/.92 var(--disp);text-transform:uppercase}
.wings p{font:500 var(--t-lead)/1.3 var(--text);margin-top:14px}

/* sport */
.sport .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,96px);align-items:start}
.sport figure img{width:100%;max-width:720px;aspect-ratio:1/1;object-fit:cover;margin-left:auto}
.sport h2{margin-bottom:clamp(18px,2vw,32px)}
.sport .lead{max-width:23em}
.sport .big{font:700 clamp(34px,3.3vw,66px)/1 var(--disp);text-transform:uppercase;color:var(--orange);margin-top:clamp(22px,2.6vw,44px);max-width:15em}
.sport .cu{margin-top:clamp(18px,2vw,30px);max-width:26em}

/* live music */
.music-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(24px,3vw,52px)}
.music-head .lead{max-width:22em;justify-self:end}
.gig{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,1.6fr);gap:clamp(12px,2.4vw,44px);align-items:baseline;padding:clamp(14px,1.5vw,24px) clamp(14px,1.8vw,30px)}
.gig:nth-child(odd){background:var(--paper)}
.gig time{font:500 var(--t-body)/1.3 var(--text)}
.gig h3{font:700 var(--t-row)/1 var(--disp);text-transform:uppercase;color:var(--teal)}
.gig p{max-width:30em}
.music .after{margin-top:clamp(22px,2.6vw,40px);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}

/* christmas */
.xmas .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,96px);align-items:center}
.xmas figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.xmas h2{margin-bottom:clamp(18px,2vw,32px)}
.xmas p + p{margin-top:1em}
.xmas .prices{margin-top:clamp(22px,2.6vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,26px) clamp(18px,2.4vw,40px)}
.xmas .prices dt{font:500 var(--t-body)/1.25 var(--text)}
.xmas .prices dd{font:700 clamp(34px,2.9vw,58px)/1 var(--disp);color:var(--orange);text-transform:uppercase}
.xmas .btns{margin-top:clamp(24px,2.6vw,40px)}

/* find us */
.find .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:start}
.find h2{margin-bottom:clamp(18px,2vw,32px)}
.find address{font:600 clamp(30px,2.6vw + 8px,56px)/1.04 var(--disp);font-style:normal;text-transform:uppercase;color:var(--teal)}
.reach{margin-top:clamp(22px,2.6vw,40px)}
.reach li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:12px;align-items:center;min-height:48px}
.reach li + li{margin-top:2px}
.reach a{font-weight:600;text-decoration-thickness:2px;text-underline-offset:4px;padding:12px 0;display:inline-block;overflow-wrap:anywhere}
.find .btns{margin-top:clamp(22px,2.6vw,36px)}
.hours{width:100%;border-collapse:separate;border-spacing:0}
.hours caption{text-align:left;font:700 clamp(30px,2.4vw + 10px,52px)/1 var(--disp);text-transform:uppercase;color:var(--teal);padding-bottom:12px}
.hours th,.hours td{text-align:left;padding:clamp(10px,.9vw,15px) clamp(12px,1.4vw,22px);font:500 clamp(18px,.6vw + 15px,24px)/1.2 var(--text)}
.hours td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.hours tr:nth-child(odd){background:var(--paper)}
.hours tr.today th,.hours tr.today td{background:var(--teal);color:var(--stone);font-weight:600}
.hours + .hours{margin-top:clamp(26px,3vw,48px)}

/* footer */
.foot{background:var(--teal2);color:var(--stone);padding-top:clamp(40px,5vw,84px);padding-bottom:clamp(28px,3vw,48px)}
.foot .wrap{container-type:inline-size}
.foot .name{font:700 clamp(54px,20.6cqi,340px)/.82 var(--disp);text-transform:uppercase;letter-spacing:-.012em;white-space:nowrap;color:var(--stone)}
.foot .three{font:600 clamp(24px,3.3cqi,56px)/1.1 var(--disp);text-transform:uppercase;color:var(--orange);margin-top:clamp(14px,2cqi,30px)}
.foot .small{display:flex;flex-wrap:wrap;gap:6px 30px;margin-top:clamp(22px,3cqi,44px);font-size:clamp(16px,.3vw + 14.5px,18px)}
.foot .small a{padding:12px 0;display:inline-block;min-width:48px}

/* reveal: slide up and fade only */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.js .rv.in,.js.settled .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn{transition:none}}

/* ---------- menu page ---------- */
.mhead .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,72px);align-items:end;padding-top:clamp(20px,3vw,48px);padding-bottom:clamp(28px,3.4vw,56px)}
.mhead h1{font:700 clamp(72px,11vw,220px)/.84 var(--disp);text-transform:uppercase;letter-spacing:-.012em;color:var(--teal)}
.mhead .lead{max-width:24em}
.mbar{position:sticky;top:0;z-index:10;background:var(--teal);color:var(--stone)}
.mbar .wrap{display:flex;align-items:center;gap:clamp(10px,2vw,32px);padding-top:8px;padding-bottom:8px}
.mcats{display:flex;gap:clamp(2px,1vw,18px);overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.mcats::-webkit-scrollbar{display:none}
.mcats a{flex:0 0 auto;font:600 clamp(16px,.4vw + 14px,19px)/1 var(--text);text-decoration:none;padding:15px 10px;min-height:48px;display:inline-flex;align-items:center;box-shadow:inset 0 -4px 0 transparent}
.mcats a:hover,.mcats a.on{box-shadow:inset 0 -4px 0 var(--orange)}
.mtools{background:var(--stone2)}
.mtools .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding-top:14px;padding-bottom:14px}
.mtools label{font-weight:500}
.mtools input[type=search]{font:500 18px/1.2 var(--text);padding:13px 16px;min-height:52px;width:min(100%,360px);border:0;background:#fff;color:var(--ink)}
.mtools .veg{display:inline-flex;align-items:center;gap:10px;min-height:48px;cursor:pointer}
.mtools .veg input{width:24px;height:24px;accent-color:var(--teal)}
.mtools .count{margin-left:auto}
.msec{padding-top:clamp(40px,5vw,84px);scroll-margin-top:70px}
.msec:last-of-type{padding-bottom:var(--sec)}
.msec .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(16px,4vw,72px);align-items:start}
.msec h2{font-size:clamp(44px,4.6vw,92px);color:var(--teal);position:sticky;top:84px}
.msec .when{font:500 var(--t-body)/1.35 var(--text);text-transform:none;letter-spacing:0;display:block;margin-top:12px;color:var(--ink)}
.mlist .dish{padding-left:clamp(12px,1.4vw,24px);padding-right:clamp(12px,1.4vw,24px)}
.mlist .dish + .dish{box-shadow:none}
.mlist .dish:nth-child(odd){background:var(--paper)}
.mlist .dish[hidden]{display:none}
.mlist .note{padding:clamp(12px,1.2vw,18px) clamp(12px,1.4vw,24px);font-weight:500}
.none{display:none;padding:28px 0;font:500 var(--t-lead)/1.3 var(--text)}
.none.show{display:block}
.fest{background:var(--teal);color:var(--stone);margin-top:clamp(40px,5vw,84px);padding-bottom:clamp(40px,5vw,84px)}
.fest h2,.fest .dish h3{color:var(--stone)}
.fest .dish .p{color:var(--orange)}
.fest .when{color:var(--stone)}
.fest .mlist .dish:nth-child(odd){background:var(--teal3)}
.allergy{background:var(--paper)}
.allergy .wrap{padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(28px,3vw,48px)}
.allergy p{max-width:44em;font-weight:500}

/* ---------- laptop and down ---------- */
@media (max-width:1100px){
  .band .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .band .food{grid-column:1/-1}
  .band .food b{display:inline;margin-right:.5em}
  .gig{grid-template-columns:minmax(0,.8fr) minmax(0,2fr)}
  .gig p{grid-column:2}
}
/* ---------- phone ---------- */
@media (max-width:760px){
  .brand span{display:none}
  .nav a:not(.keep){display:none}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:4px;padding-top:0}
  .hero-lion{order:-1}
  .hero-lion img{width:62%;margin:0 auto}
  .hero h1{font-size:clamp(56px,20.6cqi,200px)}
  .hero .btns .btn{flex:1 1 150px}
  .band .wrap{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
  .band dl > div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:12px}
  .band dd{font-size:38px}
  .welcome .wrap,.sport .wrap,.xmas .wrap,.find .wrap,.music-head,.mhead .wrap,.msec .wrap{grid-template-columns:minmax(0,1fr)}
  .four{order:-1}
  .food-top{display:flex;flex-direction:column;gap:28px}
  .fl,.fr{display:contents}
  .pz{order:1}.ft{order:2}.pair{order:3;margin-top:8px}.wings{order:4;margin-top:0}
  .sport figure{order:-1}
  .sport figure img{margin:0}
  .music-head .lead{justify-self:start}
  .gig{grid-template-columns:minmax(0,1fr);gap:4px}
  .gig p{grid-column:1}
  .xmas .prices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reach li{grid-template-columns:minmax(0,1fr);gap:0}
  .reach li + li{margin-top:12px}
  .btns .btn{flex:1 1 100%}
  .msec h2{position:static}
  .hours th,.hours td{padding-left:12px;padding-right:12px;font-size:17px}
  .foot .small span{flex-basis:100%}
  .mtools .count{margin-left:0;flex-basis:100%}
  .mtools input[type=search]{width:100%}
  .mtools .s{flex:1 1 100%}
}