/* ========== RITUAL ARC — editorial system ========== */

:root {
  /* Palette */
  --void: #0a0a0a;
  --charcoal: #15161a;
  --charcoal-2: #1d1f24;
  --line-dark: rgba(255,255,255,0.12);
  --line-dark-strong: rgba(255,255,255,0.28);
  --ink-dim: rgba(255,255,255,0.45);
  --ink-mid: rgba(255,255,255,0.65);
  --ink: rgba(255,255,255,0.92);

  --paper: #f3efe8;        /* warm off-white */
  --paper-2: #ece7dd;
  --bone: #d8d3c8;
  --black: #0a0a0a;
  --black-soft: #1a1a1a;
  --line-light: rgba(10,10,10,0.14);
  --line-light-strong: rgba(10,10,10,0.32);
  --paper-ink-dim: rgba(10,10,10,0.50);
  --paper-ink-mid: rgba(10,10,10,0.70);

  /* Accent — bubblegum pink (single accent). Var names kept for stability. */
  --gold: #db4d7d;        /* accent */
  --gold-bright: #ef82a6; /* accent, lighter — for em text on dark */
  --gold-deep: #b0345f;   /* accent, deeper — for accent text/rules on paper */
  --accent: var(--gold);
  --accent-bright: var(--gold-bright);
  --accent-deep: var(--gold-deep);

  /* Type */
  --f-display: "Anton", "Oswald", "Archivo Black", "Helvetica Neue", Impact, sans-serif;
  --f-body: "Inter Tight", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Rhythm */
  --gutter: clamp(24px, 4vw, 64px);
  --rule: 1px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--black); }

/* ---------- Typography ---------- */

.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.9;
}

.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mono-sm {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- Section frame ---------- */

.section {
  position: relative;
  padding: clamp(80px, 12vh, 160px) var(--gutter);
}

.section--dark {
  background: var(--void);
  color: var(--ink);
}

.section--paper {
  background: var(--paper);
  color: var(--black);
}

/* ---------- Page chrome ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--gutter);
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: difference;
}
.nav > * { pointer-events: auto; }

.nav__brand {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.nav__brand span {
  color: var(--gold);
  font-style: italic;
  margin: 0 2px;
}

.nav__cta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s;
}
.nav__cta:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 22px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--primary {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.btn--primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}
.btn--dark {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}
.btn--dark:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.btn--ghost-light:hover {
  background: var(--paper);
  color: var(--black);
}
.btn--ghost-dark:hover {
  background: var(--black);
  color: var(--paper);
}
.btn__arrow {
  display: inline-block;
  transition: transform .25s;
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Section number badge ---------- */

.section-no {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-ink-dim);
}
.section--dark .section-no { color: var(--ink-dim); }
.section-no__num {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 0;
  color: inherit;
}

/* ---------- Crop marks ---------- */

.crop {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.crop::before, .crop::after {
  content: "";
  position: absolute;
  background: currentColor;
  opacity: 0.8;
}
.crop::before { width: 100%; height: 1px; top: 50%; left: 0; }
.crop::after  { width: 1px; height: 100%; left: 50%; top: 0; }

.crop--tl { top: 0; left: 0; }
.crop--tr { top: 0; right: 0; }
.crop--bl { bottom: 0; left: 0; }
.crop--br { bottom: 0; right: 0; }

/* ---------- Thin rules ---------- */

.rule {
  height: 1px;
  background: var(--line-light);
  width: 100%;
}
.section--dark .rule { background: var(--line-dark); }

.rule--gold { background: var(--gold); height: 1px; }

/* ---------- Image slot styling ---------- */

/* Empty image-slot has a slight bg that doesn't read on our dark gradient.
   We can't reach into shadow DOM so we hide the slot's own bg and let our
   wrapper provide the tone. The slot's placeholder text + drag UI still
   show through. */
image-slot {
  background: transparent;
}

/* ---------- Cursor for the whole site ---------- */

body { cursor: default; }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .nav__links { display: none; }
  .side-rail { display: none; }
}

/* ---------- Hide tweaks panel default scroll ---------- */
html { scrollbar-color: var(--gold-deep) var(--void); }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-thumb { background: var(--gold-deep); }
html::-webkit-scrollbar-track { background: var(--void); }

/* ---------- Section markers (flow position 01–09) ---------- */
.sec-marker {
  position: absolute;
  top: clamp(128px, 14vh, 164px);
  left: var(--gutter);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}
.sec-marker__num {
  font-family: var(--f-display);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 0.85;
  letter-spacing: -0.01em;
}
.sec-marker__label {
  letter-spacing: 0.26em;
}
.sec-marker--paper .sec-marker__num { color: var(--black); }
.sec-marker--paper .sec-marker__label { color: var(--paper-ink-dim); }
.sec-marker--dark .sec-marker__num { color: #fff; }
.sec-marker--dark .sec-marker__label { color: var(--ink-dim); }

.sec-dot {
  position: absolute;
  top: clamp(86px, 10vh, 114px);
  right: var(--gutter);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 6;
  pointer-events: none;
}

.sec-vert {
  position: absolute;
  right: clamp(14px, 1.6vw, 26px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  letter-spacing: 0.42em;
  z-index: 5;
  pointer-events: none;
}
.sec-vert--paper { color: var(--paper-ink-dim); }
.sec-vert--dark  { color: var(--ink-dim); }

@media (max-width: 720px) {
  .sec-vert { display: none; }
  .sec-marker { top: 104px; }
}

/* ---------- Nav link set ---------- */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
}
.nav__link {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s;
  opacity: 0.85;
}
.nav__link:hover { opacity: 1; }
.nav__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}