@font-face {
  font-family: "Local Brewery";
  src: url("assets/fonts/local-brewery-eight.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* One variable file covers 100 to 900. */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #FAFAFA;
  --ground: #000000;
  --muted: #A3A3A3;
  --measure: 34rem;
  --font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Helvetica, Arial, sans-serif;
  --font-display: "Local Brewery", var(--font-body);
}

*, *::before, *::after { box-sizing: border-box; }

/* Reserve the scrollbar track so page width never changes. */
html { overflow-y: scroll; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  /* Top aligned. Centring moves the logo with each page's height. */
  place-items: start center;
  align-content: start;
  padding: 2rem 1.25rem;
  background: var(--ground);
  color: var(--ink);
  font: 400 clamp(1rem, 0.95rem + 0.3vw, 1.125rem)/1.6 var(--font-body);
  text-align: center;
}

/* Full measure everywhere, or the grid sizes main to its content. */
main { width: 100%; max-width: var(--measure); }

.icon { width: min(90%, 378px); height: auto; margin: 0 auto 1.25rem; display: block; }

.mark { width: min(100%, 420px); height: auto; margin: 0 auto 2rem; display: block; }

h1 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.tagline {
  margin: 0 0 2rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Below body size on wider screens. Floor at 16px, this is body copy. */
.lede { font-size: clamp(1rem, 0.85rem + 0.35vw, 1.03rem);
        margin: 0 0 1rem; text-wrap: balance; }

.opening {
  margin: 0 0 2.5rem;
  /* The display face is condensed, so it needs the extra size. */
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Split evenly if it wraps. */
  text-wrap: balance;
}

form { display: grid; gap: 0.75rem; }

label {
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

input, button {
  font: inherit;
  padding: 0.85rem 1rem;
  border-radius: 2px;
  border: 1px solid var(--ink);
}

input { background: transparent; color: var(--ink); }
input::placeholder { color: var(--muted); }

button {
  background: var(--ink);
  color: var(--ground);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.04em;
}

button:hover { background: var(--muted); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.small { font-size: 0.8rem; color: var(--muted); margin: 0; }
.small + .small { margin-top: 1rem; }

footer { margin-top: 3rem; font-size: 0.8rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Honeypot. Off-screen, not display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The homepage hides its h1, the logo carries the name. Others show it. */
.confirm h1, .prose h1 { position: static; width: auto; height: auto; margin: 0 0 1rem;
                         clip-path: none; overflow: visible; white-space: normal;
                         border: 0; padding: 0; }
.confirm h1 { font-size: 1.5rem; }

/* Text pages read left-aligned. */
.prose { text-align: left; }
.prose h1 { font-size: 1.6rem; }
.prose h2 { font-size: 1.6rem; margin: 2rem 0 0.5rem; }
.prose p { margin: 0 0 1rem; }
/* The tagline belongs to the logo, so it stays centred. */
.prose .tagline { text-align: center; }
.prose footer { text-align: center; }
a { color: currentColor; }

/* Display face for headings and the opening line, Montserrat elsewhere.
   One weight only, so refuse synthesised bold. */
.confirm h1, .prose h1, .prose h2, .opening {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
}

.opening strong { font-weight: inherit; }
.opening { letter-spacing: 0.06em; }
.tagline { font-weight: 600; }

/* Booking. The widget is a third-party iframe and brings its own colours, so
   the wrapper only reserves its space and keeps it inside the page. */
.book { margin: 0 0 2.5rem; display: grid; gap: 0.75rem; }
#book-widget:empty { display: none; }
reservation { display: block; width: 100%; min-height: 36rem; overflow: hidden;
              background: #fff; border-radius: 2px; text-align: left; }
reservation iframe { display: block; max-width: 100%; }
.phone { margin: 0; }

/* Signup outcomes. subscribe.php redirects to /#signup-invalid or
   /#signup-failed, and the matching message shows without any script. */
.notice { display: none; margin: 0; color: var(--ink); font-weight: 600; }
.notice:target { display: block; }

.social { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
          min-width: 44px; min-height: 44px; margin-top: 0.5rem; }