/* ─────────────────────────────────────────────
   Ingenting — shared styles
   ───────────────────────────────────────────── */
:root {
  --cream: #F7F1E7;
  --paper: #FBF7F0;
  --sand: #EDE3D3;
  --ink: #17140F;
  --ink-soft: #5B5349;
  --line: #DCD0BC;
  --red: #C82B24;
  --red-deep: #A8231E;
  --navy: #1B2A4A;
  --gold: #B8914A;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 22px;
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--red); color: var(--paper); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Logo: dotless i's with hollow "nothing" rings ── */
.logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.045em;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.logo .i { position: relative; display: inline-block; }
.logo .i:last-of-type { margin-left: 0.035em; } /* keep the t's crossbar off the second i */
.logo .i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.15em;
  width: 0.27em; height: 0.27em;
  transform: translate(calc(-50% + var(--ring-x, 0.09em)), -50%);
  border: 0.07em solid var(--red);
  border-radius: 50%;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-red { background: var(--red); color: var(--paper); box-shadow: 0 10px 30px -10px rgba(215,50,43,.6); }
.btn-red:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-2px); }
.btn .price-tag { font-weight: 500; }

/* ── Language switch ── */
.lang {
  display: inline-flex; align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.lang button {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  display: inline-flex; gap: 6px; align-items: center;
  color: var(--ink-soft);
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
}
.serif { font-family: var(--serif); font-weight: 400; }
em.serif, .serif em { font-style: italic; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}