/* ====================================================================
   CARPATHIAN JERKY — Base
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--cj-cream);
  color: var(--cj-ink);
  font-family: var(--cj-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html { overflow-x: hidden; max-width: 100vw; }

/* Mobile form inputs — prevent zoom on iOS */
@media (max-width: 600px) {
  input, select, textarea { font-size: 16px !important; }
}

img { max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0; background: transparent; color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--cj-sienna);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Utility: paper grain (subtle) ---- */
.cj-paper {
  background-color: var(--cj-cream);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(139,47,31,.025) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(74,93,58,.03) 0 1px, transparent 1px),
    radial-gradient(circle at 50% 80%, rgba(212,139,6,.02) 0 1px, transparent 1px);
  background-size: 140px 140px, 180px 180px, 220px 220px;
}

/* ---- Typography ---- */
.cj-display {
  font-family: var(--cj-serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.cj-eyebrow {
  font-family: var(--cj-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cj-sienna);
}
.cj-eyebrow--muted { color: var(--cj-ink-muted); }
.cj-small { font-size: 13px; line-height: 1.5; color: var(--cj-ink-soft); }

/* ---- Container ---- */
.cj-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
  max-width: 560px; /* mobile-first phone-width reading column */
}
@media (min-width: 720px) {
  .cj-container { padding-inline: 32px; max-width: 720px; }
}
@media (min-width: 1100px) {
  .cj-container { max-width: 1120px; padding-inline: 48px; }
}

/* ---- Dividers ---- */
.cj-rule {
  border: 0; height: 1px; background: var(--cj-line);
  margin: var(--s-7) 0;
}
.cj-rule--thick { height: 2px; background: var(--cj-ink); opacity: .12; }

/* ---- Motion helper ---- */
.cj-fade-in {
  opacity: 0;
  transform: translateY(8px);
  animation: cjFadeIn .6s var(--ease) forwards;
}
@keyframes cjFadeIn {
  to { opacity: 1; transform: none; }
}

/* ---- Announcement bar ---- */
.cj-announce {
  background: var(--cj-ink);
  color: var(--cj-cream);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
}
.cj-announce .i {
  vertical-align: -3px;
  margin-right: 6px;
}

/* ---- Section rhythm ---- */
.cj-section { padding-block: var(--s-10); }
.cj-section--tight { padding-block: var(--s-8); }
.cj-section--loose { padding-block: var(--s-11); }

/* ---- Textile pattern (Romanian folk motif, CSS-only) ---- */
.cj-textile {
  height: 14px;
  background-color: var(--cj-sienna);
  background-image:
    linear-gradient(45deg, var(--cj-ink) 25%, transparent 25%, transparent 75%, var(--cj-ink) 75%),
    linear-gradient(45deg, var(--cj-ink) 25%, transparent 25%, transparent 75%, var(--cj-ink) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* ---- Hidden visually only ---- */
.cj-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}