:root{--chalk:#f5eee4;--muted:#d0c7bc;--copper:#d2a783;--panel:rgba(18,18,17,.64);--line:rgba(210,167,131,.45)}

*{box-sizing:border-box}html{scroll-behavior:smooth}

body{margin:0; background:#292827; color:var(--chalk); font-family:'DM Sans',Arial,sans-serif; line-height:1.55; background-image:url("pix/chalk_board.jpg");  background-size: 100% 100%;} 

.topbar{position:sticky;top:0;z-index:10;background:rgba(25,24,23,.96);border-bottom:1px solid var(--line)}

.brand{font-family:Oswald,Arial,sans-serif;letter-spacing:.14em;text-decoration:none}

.navlink{text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}

.hero{min-height:70px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px 20px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}

.hero:before,.hero:after{content:"";position:absolute;color:var(--copper);opacity:.22;font-size:clamp(5rem,15vw,10rem);pointer-events:none}

.hero:before{left:4%;top:18%;transform:rotate(-14deg)}

.hero:after{right:4%;bottom:8%;transform:rotate(14deg)}

.hero-inner{position:relative;z-index:1}

.eyebrow{font-family:Oswald,Arial,sans-serif;letter-spacing:.23em;text-transform:uppercase;color:var(--copper)}

h1{font-family:Pacifico,cursive;font-size:clamp(3.5rem,10vw,7rem);font-weight:400;line-height:1.2;margin:8px 0}

.tagline{font-family:Oswald,Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase}

.hero-copy{max-width:500px;color:var(--muted);margin:18px auto}

.copper-button{display:center;background:var(--copper);color:#211d19;text-decoration:none;padding:12px 23px;margin-top:15px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:2rem; text-align:center;}

.section{margin:auto;padding:3px 3px}

.heading{text-align:center;font-family:Pacifico,cursive;font-size:48px;font-weight:400;color:var(--copper);margin:0 0 8px}

.subheading{text-align:center;color:var(--muted);margin:0 auto 32px;max-width:620px}

.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.menu-card{padding:24px 25px 10px;background:var(--panel);border:1px solid var(--line)}

.menu-card h3{font-family:Pacifico,cursive;font-weight:400;font-size:36px;color:var(--copper);margin:3 3 3;}

.menu-item{padding:13px 0;border-top:1px dashed rgba(245,238,228,.5)}

.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}

.item-name{font-family:Oswald,Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:24px}

.price{color:var(--copper);font-size:24px;font-weight:700;white-space:nowrap}

.description{color:var(--muted);font-size:.8rem;margin-top:4px}

.about{background:rgba(0,0,0,.22);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:35px;align-items:center}

.about h2{font-family:Pacifico,cursive;color:var(--copper);font-weight:400;font-size:2.2rem;margin:0 0 12px}.about p{color:var(--muted)}

.hours{padding:24px;border:1px solid var(--line);background:var(--panel)}

.hours h3{font-family:Oswald,Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--copper);margin:0 0 12px}

.hours-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.18)}

.hours-row:last-child{border:0}

.contact{text-align:center}

.contact p{color:var(--muted)}

footer{text-align:center;padding:25px 15px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}

footer strong{color:var(--copper)}

@media(max-width:760px){.menu-grid,.about-grid{grid-template-columns:1fr}.hero{min-height:330px}.hero:before{left:-25px}.hero:after{right:-25px}.section{padding:42px 15px}.navlinks{display:none}}

@media(max-width:420px){.item-top{display:block}.price{display:block;margin-top:3px;white-space:normal}}

/* Force 2 columns when the device is in portrait mode */

    @media screen and (orientation: portrait) {
      .responsive-column {
        width: 50% !important;
		
      }
    }
    
/* Force 4 columns when the device is in landscape mode */

    @media screen and (orientation: landscape) {
      .responsive-column {
        width: 25% !important;
		
      }
    }