*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--red-deep); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; }

.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Utility: blue diner-awning stripes */
.awning-stripes {
  background-color: var(--sky);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 18%, rgba(0,0,0,.04) 82%, rgba(255,255,255,.1)),
    repeating-linear-gradient(
      to right,
      rgba(183, 214, 232, .94) 0 1.05rem,
      rgba(118, 174, 207, .82) 1.05rem 2.1rem
    );
  background-blend-mode: soft-light, normal;
}

/* Utility: red/white checkerboard strip (divider) */
.checkerboard {
  height: 24px;
  background:
    linear-gradient(45deg, var(--red) 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, var(--red) 25%, transparent 25%) 0 8px / 16px 16px,
    linear-gradient(45deg, transparent 75%, var(--red) 75%) 8px 0 / 16px 16px,
    linear-gradient(-45deg, transparent 75%, var(--red) 75%) 8px 8px / 16px 16px,
    #fff;
}