* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,sans-serif;
  line-height:1.6}
a {
  color:inherit}
header,main,footer {
  max-width:1320px;
  margin:auto;
  padding:28px 6%}
.demo-banner {
  background:#111;
  color:#fff;
  text-align:center;
  padding:10px;
  font-size:13px}
.demo-banner a {
  margin-left:20px}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  border-bottom:1px solid var(--ink)}
header>a {
  text-decoration:none;
  font-size:24px}
nav {
  display:flex;
  gap:24px;
  font-size:14px}
nav a {
  text-decoration:none}
.hero {
  padding:85px 0 95px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:8%;
  align-items:center}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:12px}
h1 {
  font-size:clamp(55px,7vw,100px);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:400;
  margin:25px 0}
h2 {
  font-size:clamp(35px,4vw,54px);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:400}
h3 {
  font-size:23px;
  font-weight:400}
.hero p {
  max-width:500px}
.button {
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  padding:14px 25px;
  text-decoration:none;
  border:0;
  font:inherit;
  cursor:pointer;
  margin-top:16px}
.visual {
  aspect-ratio:4/5;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(45px,5vw,70px);
  line-height:1.1;
  text-align:center;
  padding:20px}
.restaurant .visual {
  border-radius:50% 50% 0 0;
  background:#8d4d36}
.restaurant h1,.restaurant h2,.restaurant .visual {
  font-family:Georgia,serif}
.section {
  padding:65px 0;
  border-top:1px solid;
  scroll-margin-top:20px}
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px}
.item {
  border-top:1px solid;
  padding-top:16px}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px}
.menu-row {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid;
  padding:18px 0}
.menu-row p {
  margin:0;
  font-size:14px}
.menu-row b {
  font-size:18px;
  font-weight:400}
label {
  display:block;
  margin:18px 0;
  font-size:14px}
input,textarea,select {
  display:block;
  width:100%;
  font:inherit;
  padding:12px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  margin-top:8px}
textarea {
  resize:vertical}
footer {
  border-top:1px solid;
  font-size:13px}
details {
  padding:20px 0;
  border-top:1px solid}
summary {
  cursor:pointer}
:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:4px}
@media(max-width:760px) {
  header {
  align-items:flex-start;
  flex-direction:column}
nav {
  gap:14px;
  flex-wrap:wrap}
.hero,.split,.grid {
  grid-template-columns:1fr}
.hero {
  padding:45px 0;
  gap:30px}
.visual {
  aspect-ratio:2/1;
  font-size:46px}
.section {
  padding:40px 0}
.demo-banner a {
  display:block;
  margin:0}
h1 {
  font-size:60px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}