/* Split Table receipt theme: cream paper, ink typography and blue accents. Pure CSS on top of the shared
   stylesheet; theme tokens arrive as custom properties, nothing is loaded from elsewhere. */
body {
  background-color: var(--c-bg);
  background-image: repeating-linear-gradient(0deg, rgb(27 34 48 / .03) 0 1px, transparent 1px 28px);
  font-variant-numeric: tabular-nums;
}

/* header: receipt top with a blue tear strip and a perforated edge */
.site-header {
  background: var(--c-surface);
  border-top: 4px solid var(--c-accent);
  border-bottom: 2px dashed var(--c-border);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; letter-spacing: .01em; }
.brand-icon { display: block; flex: none; width: 28px; height: 28px; color: var(--c-accent); }
.brand-name { min-width: 0; overflow-wrap: anywhere; }
.site-nav a[aria-current] { color: var(--c-accent); }

/* home hero: a printed receipt slip with a torn zigzag bottom */
.home .hero {
  position: relative;
  margin-block-end: calc(var(--s5) + 12px);
  padding: var(--s5) var(--s5) calc(var(--s4) + 6px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 1px 2px rgb(27 34 48 / .06);
}
.home .hero::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  bottom: -10px;
  height: 10px;
  background:
    linear-gradient(135deg, var(--c-surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--c-surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
.home .hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.4rem);
  letter-spacing: -.01em;
  padding-block-end: var(--s2);
  border-bottom: 2px dashed var(--c-border);
}
.home .hero .lead { color: var(--c-muted); }
@media (max-width: 719px) {
  .home .hero { padding: var(--s3) var(--s3) calc(var(--s3) + 6px); }
}

/* headings and sections in ink with a blue rule */
.block > h2 {
  font-family: var(--font-heading);
  padding-inline-start: 10px;
  border-inline-start: 4px solid var(--c-accent);
}
.blocks .card { border: 1px dashed var(--c-border); box-shadow: none; background: var(--c-surface); }
.page-header h1 { font-family: var(--font-heading); }

/* footer: bottom of the receipt */
.site-footer { border-top: 2px dashed var(--c-border); }