:root {
  --flour: #fbfbf9;
  --enamel: #23427a;
  --crust: #c66a1b;
  --rye: #3a2416;
  --kraft: #dcc7a1;
  --serif: "Corben", Georgia, serif;
  --sans: "Karla", system-ui, sans-serif;
}

body { background: var(--flour); color: var(--rye); font: 400 1.0625rem/1.6 var(--sans); }
h2 { font: 700 clamp(2.2rem, 5vw, 3.8rem)/1.02 var(--serif); letter-spacing: -0.02em; }
p { max-width: 58ch; }
.top, .intro, .bread, .weekend, .foot { padding-inline: clamp(16px, 4vw, 56px); }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; }
.top__name { font: 700 1.35rem/1 var(--serif); color: var(--enamel); text-decoration: none; }
.top nav { display: flex; gap: 22px; font-weight: 500; }
.top nav a { text-underline-offset: 5px; }
@media (max-width: 600px) { .top nav a:first-child { display: none; } }

/* ---------- hero: an enamel shop sign hung over the oven ---------- */
.hero { position: relative; display: grid; }
.hero img { grid-area: 1 / 1; width: 100%; height: min(78vh, 760px); object-fit: cover; }
.sign {
  grid-area: 1 / 1; z-index: 1; align-self: center; justify-self: start;
  margin-left: clamp(16px, 6vw, 96px); width: min(520px, calc(100% - 32px));
  padding: clamp(24px, 4vw, 44px);
  background: var(--enamel); color: var(--flour); border-radius: 22px;
  /* the white inset rim every enamel sign has */
  box-shadow: inset 0 0 0 6px var(--enamel), inset 0 0 0 9px var(--flour), 0 30px 60px -20px rgb(0 0 0 / 0.55);
  transform-origin: 50% -40px;
}
.sign__label { font-weight: 700; font-size: 1.05rem; }
.sign__time { font: 700 clamp(5rem, 14vw, 9.5rem)/0.9 var(--serif); letter-spacing: -0.04em; margin: 6px 0 14px; font-variant-numeric: lining-nums; }
.sign__what { font: 400 clamp(1.2rem, 2.2vw, 1.5rem)/1.3 var(--serif); }
.sign__in { margin-top: 18px; display: inline-block; padding: 4px 12px; background: var(--crust); border-radius: 999px; font-weight: 700; }
.sign__in:empty { display: none; }

.intro { padding-block: clamp(56px, 8vw, 104px) 0; }
.intro p { font: 400 clamp(1.4rem, 2.8vw, 2.2rem)/1.35 var(--serif); max-width: 34ch; }

/* ---------- bakes ---------- */
.bread { padding-block: clamp(56px, 8vw, 104px); }
.bread h2 { margin-bottom: 36px; }
.bakes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.bakes > li { padding: 24px; border: 2px solid var(--rye); border-radius: 18px; }
.bakes time { display: block; font: 700 2.6rem/1 var(--serif); color: var(--crust); margin-bottom: 18px; }
.bakes ul li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed #b9a78a; }
.bakes ul span { font-weight: 700; white-space: nowrap; }
.bakes > li.is-next { background: var(--enamel); border-color: var(--enamel); color: var(--flour); }
.bakes > li.is-next time { color: var(--kraft); }
.bakes > li.is-next ul li { border-color: rgb(251 251 249 / 0.3); }
.bakes > li.is-next ul span { color: var(--flour); }
.bread__photos { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 16px; }
.bread__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; aspect-ratio: 4 / 3; }
.bread__photos img:last-child { aspect-ratio: auto; }
@media (max-width: 860px) { .bakes { grid-template-columns: 1fr; } .bread__photos { grid-template-columns: 1fr; } .bread__photos img:last-child { display: none; } }

/* ---------- weekend ---------- */
.weekend { display: grid; grid-template-columns: 0.9fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(56px, 8vw, 104px); background: var(--kraft); }
.weekend img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.weekend h2 { margin-bottom: 20px; }
.weekend__call a { display: inline-block; margin: 24px 0 8px; font: 700 clamp(2rem, 4.4vw, 3rem)/1 var(--serif); color: var(--enamel); text-decoration: none; border-bottom: 3px solid var(--crust); }
.weekend__small { font-size: 0.98rem; }
.hours { margin: 28px 0 0; }
.hours div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgb(58 36 22 / 0.25); }
.hours dd { margin: 0; font-weight: 700; }
@media (max-width: 860px) { .weekend { grid-template-columns: 1fr; } .weekend img { aspect-ratio: 16 / 10; } .hours div { grid-template-columns: 1fr; gap: 0; } }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 24px 88px; font-size: 0.9rem; }