html, body {
  overflow-x: clip;
}

/* 犇牛鞋带 BEINU LACES — shared styles
   Palette: bone #F2EFE6 · stone #E7E1D2 · ink #23281F · forest #23443A · vermilion #C6502E
   Fonts: Noto Serif SC (display) · Noto Sans SC (body) · IBM Plex Mono (numerals/specs) */

:root {
  --bone: #F2EFE6;
  --stone: #E7E1D2;
  --ink: #23281F;
  --forest: #23443A;
  --vermilion: #C6502E;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bone);
  color: var(--ink);
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* tactile paper grain */
  background-image: url("/css/noise.svg");
}

.font-display { font-family: 'Noto Serif SC', serif; }
.font-mono-spec { font-family: 'IBM Plex Mono', monospace; }

/* fine dashed leather-stitch seam — recurring motif */
.stitch-seam {
  border: none;
  border-top: 1.5px dashed rgba(35, 40, 31, 0.35);
}
.stitch-seam-light {
  border: none;
  border-top: 1.5px dashed rgba(242, 239, 230, 0.4);
}

/* dark forest band — the one material switch */
.band-forest {
  background-color: var(--forest);
  color: var(--bone);
}

/* stamp/press CTA */
.btn-stamp {
  display: inline-block;
  background: var(--vermilion);
  color: var(--bone);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.15em;
  padding: 0.9rem 2rem;
  border: 1.5px solid var(--vermilion);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-stamp:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* image-cutout tag (category cards) */
.cutout-tag {
  position: absolute;
  background: var(--bone);
  border: 1.5px solid var(--ink);
  padding: 0.4rem 1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

/* mono readout strip */
.readout {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(35, 40, 31, 0.6);
}
.band-forest .readout { color: rgba(242, 239, 230, 0.6); }

/* corner-bracket viewfinder (FAQ) */
.bracket {
  position: relative;
  padding: 1.5rem 2rem;
}
.bracket::before, .bracket::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--forest);
  border-style: solid;
}
.bracket::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.bracket::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* vertical rhythm line */
.rhythm-line {
  width: 1px;
  background: rgba(35, 40, 31, 0.18);
}

::selection { background: var(--vermilion); color: var(--bone); }

/* footer grid columns must shrink, not push the page wide */
footer .grid > * { min-width: 0; }
footer .font-mono-spec li { overflow-wrap: anywhere; }