@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

:root {
  --color-bg: #58665b;
  --color-text: #000000;
  --mh: 0.35rem;
  --mv: 0.25rem;
  --baseline: 1rem;
  --border-weight: 2px;
  --bg-spacing: 6px; /* adjust as needed */
  --bg-weight: 2px;
}
::selection {
  background: var(--color-text);
  color: var(--color-bg);
}
*,
::after,
::before {
  border-color: currentColor;
}
html {
  font-size: 16px;
}
body {
  font-family: "area-normal", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: var(--color-text);
  background: var(--color-bg);
  border-color: currentColor;
  width: 100%;
  min-height: 100vh;
  text-align: left;
  font-size: 1.2em;
  line-height: 1.3;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--bg-spacing) / 2 - var(--bg-weight)),
    var(--color-text) calc(var(--bg-spacing) / 2 - var(--bg-weight)),
    var(--color-text) calc(var(--bg-spacing) / 2 + var(--bg-weight)),
    transparent calc(var(--bg-spacing) / 2 + var(--bg-weight)),
    transparent var(--bg-spacing)
  );
  background-size: var(--bg-spacing) 100%;
  background-repeat: repeat;
  background-position: center top;
}

article {
  background-color: var(--color-bg);
  max-width: 548px;
}

.header > div {
  border-bottom: var(--border-weight) solid currentColor;
}
.row {
  padding: var(--mv) var(--mh) var(--mv) 50%;
  width: 100%;
  margin: 0;
  min-height: var(--baseline);
}
.row:nth-child(2n),
.footer .row {
  padding-left: var(--mh);
}

.footer .row > div {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
}

#baseline-grid > div {
  border-bottom: var(--border-weight) solid currentColor;
  width: 100%;
  height: var(--baseline);
}