/* ─── Layout ─────────────────────────────────────────────── */

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

/* Perforated strips — like envelope/stamp edges */
.perf {
  height: 18px;
  background:
    radial-gradient(circle at 9px 18px, var(--paper) 7px, transparent 7.5px) 0 0 / 18px 18px repeat-x;
  border-bottom: 1px dashed var(--perf);
}
.perf--top { border-bottom: none; border-top: 1px dashed var(--perf); transform: rotate(180deg); }

/* ─── Envelope Header ────────────────────────────────────── */

.site-header {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 12px,
      rgba(47,74,66,0.08) 12px 14px,
      transparent 14px 26px,
      rgba(195,46,56,0.08) 26px 28px);
}
.header-inner {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--paper);
  padding: 10px 18px;
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.site-title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.site-title code { font: inherit; background: none; padding: 0; color: var(--stamp-ink); }
.site-title::before {
  content: "✉";
  margin-right: 10px;
  color: var(--stamp);
  font-size: 1.1em;
}
.lang-switch {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.lang-switch:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--stamp);
}