@font-face {
  font-family: "Inconsolata Nerd Font Mono";
  src: url("/static/fonts/InconsolataNerdFontMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inconsolata Nerd Font Mono";
  src: url("/static/fonts/InconsolataNerdFontMono-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Inconsolata Nerd Font Mono", monospace;
  color: #29251f;
  background: #f5f0e5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header,
.site-footer {
  padding: 1rem clamp(1rem, 5vw, 3rem);
  color: #f5f0e5;
  background: #29251f;
}

.site-header {
  border-bottom: 0.25rem solid #a95f32;
}

.site-name,
.site-footer p {
  margin: 0;
}

.site-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.site-main {
  width: min(100% - 2rem, 48rem);
  margin: 0 auto;
  padding: clamp(2rem, 8vw, 5rem) 0;
  flex: 1;
}

h1 {
  margin: 0;
  color: #78401f;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.15;
}

h2 {
  margin: 2.5rem 0 0.5rem;
  color: #78401f;
  font-size: 1.375rem;
}

/* German compound nouns can be wider than a 320px viewport, so let headings break instead of scrolling. */
h1,
h2 {
  hyphens: auto;
  overflow-wrap: anywhere;
}

address {
  font-style: normal;
}

/* Art. 21 Abs. 4 DSGVO requires the right to object to stand out from the surrounding text. */
.notice {
  margin: 1rem 0;
  padding: 0.25rem 1.25rem;
  border-left: 0.25rem solid #a95f32;
  background: #ebe1cd;
}

.site-main a {
  color: #78401f;
}

.brew-days {
  margin: 2rem 0 0;
  max-width: 100%;
  border-collapse: collapse;
  text-align: left;
  /* The date parts below are fixed-width, so the row cannot reflow. Shrink the type on a
     narrow viewport instead, which keeps the whole grid on a 320px screen. */
  font-size: clamp(0.95rem, 4.8vw, 1.125rem);
}

.brew-days th,
.brew-days td {
  padding: 0.4rem clamp(1rem, 5vw, 2.5rem) 0.4rem 0;
  vertical-align: baseline;
}

.brew-days th {
  border-bottom: 0.125rem solid #a95f32;
  color: #78401f;
}

.brew-days th:last-child,
.brew-days td:last-child {
  padding-right: 0;
}

/* The site font is monospaced, so ch units lay every date part on the character grid. The
   real spaces between the parts are the column gaps, which keeps the date readable as plain
   text; nowrap stops those spaces from becoming line breaks and shearing the grid. The
   weekday width fits the longest German name (Donnerstag) and the month is always a
   three-letter abbreviation. */
.brew-days time {
  white-space: nowrap;
}

.brew-days time > span {
  display: inline-block;
  text-align: right;
}

.brew-days .day-name {
  width: 10ch;
}

.brew-days .day-num {
  width: 3ch;
}

.brew-days .month {
  width: 3ch;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  border-top: 0.125rem solid #a95f32;
  font-size: 1rem;
}

.site-footer a {
  color: inherit;
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    color: #f3ead9;
    background: #201d19;
  }

  .site-header,
  .site-footer {
    color: #f3ead9;
    background: #161411;
  }

  h1 {
    color: #e6a674;
  }

  h2 {
    color: #e6a674;
  }

  .site-main a {
    color: #e6a674;
  }

  .brew-days th {
    color: #e6a674;
  }

  .notice {
    background: #2b2621;
  }
}