@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital@1&family=Playfair+Display:wght@500;600&display=swap");

:root {
  color: #183861;
  background: #fff;
  font-family: "Crimson Pro", serif;
  font-size: 12px;
  font-style: italic;
}

* { box-sizing: border-box; }

body { min-width: 320px; min-height: 100svh; margin: 0; background: #fff; }

a { color: inherit; text-decoration: none; }

.landing-page { background: #f6f4f1 url("/assets/cafe-landing.jpg") center / cover no-repeat; }
.landing-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100svh; padding-bottom: 4rem; }
.landing-logo { width: min(14rem, 54vw); object-fit: contain; }

.page-shell { display: flex; flex-direction: column; width: 100%; min-height: 100svh; padding: 6rem 0; }
.hero { text-align: center; }
.logo-lockup { width: 11rem; height: 4rem; margin: 0 auto 3rem; overflow: hidden; }
.logo-lockup img { display: block; width: 11rem; transform: translateY(-3.7rem); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.intro { width: 66.667%; margin: 0 auto; color: #183861; font: italic 1rem/normal "Crimson Pro", serif; }

.menu-section { display: grid; flex: 1; place-items: center; width: 100%; margin-top: 3rem; }
.status { margin: 0; color: #183861; font-size: 1rem; text-align: center; }
.menu-list { display: grid; justify-items: center; width: 66.667%; gap: 0; }
.menu-card { display: block; width: 100%; padding: .25rem 0; margin: 1rem 0; color: #183861; text-align: center; transition: opacity 150ms ease; }
.menu-card:hover, .menu-card:focus-visible { opacity: .65; outline: none; }
.menu-card__copy { display: block; }
.menu-card strong { font: italic 1.5rem/normal "Crimson Pro", serif; }
.menu-card--disabled { pointer-events: none; opacity: .85; }

.social-footer { display: flex; justify-content: center; padding-top: 1rem; margin-top: .5rem; }
.social-footer a { display: block; padding: 0 1rem; margin: 0 .25rem; }
.social-footer img { display: block; object-fit: contain; }

.admin-shell { width: min(100%, 42rem); min-height: 100svh; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; color: #f6f1e8; font-family: "Playfair Display", "Crimson Pro", serif; font-size: 1rem; font-style: normal; background: radial-gradient(circle at 50% -8%, #493322, #171411 41rem); }
.back-link { color: #cfaa78; font-size: .9rem; }
.admin-card { margin-top: 2.8rem; padding: clamp(1.5rem, 7vw, 2.5rem); border: 1px solid rgba(205, 164, 109, .42); border-radius: .7rem; background: rgba(39, 29, 21, .78); }
.eyebrow { margin: 0; color: #c49b65; font-family: "Crimson Pro", serif; font-size: .75rem; font-style: normal; font-weight: 600; letter-spacing: .2em; }
.admin-card h1 { margin: .62rem 0 .35rem; color: #fffaf1; font: 500 clamp(2rem, 8vw, 3rem)/.95 "Playfair Display", serif; }
.admin-intro { color: #dfd0bc; font-size: .95rem; line-height: 1.75; }
form { display: grid; gap: 1.15rem; margin-top: 1.7rem; }
label { display: grid; gap: .45rem; color: #f1e3d0; font-family: "Crimson Pro", serif; font-size: 1rem; font-style: normal; }
input, select, button { width: 100%; border-radius: .35rem; font: inherit; }
input, select { min-height: 2.8rem; border: 1px solid #765b3f; padding: .55rem .7rem; color: #fffaf1; background: #241c16; }
input::file-selector-button { margin-right: .65rem; border: 0; color: #f7ebdc; background: #75512e; border-radius: .2rem; padding: .42rem .55rem; }
button { min-height: 3rem; border: 1px solid #d2a46b; color: #20160d; background: #d2a46b; font-weight: 600; cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
.form-note, .form-message { margin: 0; font-family: "Crimson Pro", serif; font-size: .9rem; font-style: normal; line-height: 1.55; }
.form-note { color: #c3ad93; }
.form-message { min-height: 1.25rem; color: #e4cfb0; }
.form-message[data-state="success"] { color: #a9dbad; }
.form-message[data-state="error"] { color: #efad9e; }

@media (min-width: 44rem) {
  .intro, .menu-list { width: 40rem; max-width: 66.667%; }
}