/* Hench.tv — design tokens
   Pure black backdrop, warm bone foreground, amber accent.
   Italic serif headline (Cormorant Garamond), neutral sans body (Manrope). */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Commissioner:wght@300;400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600;1,700&family=Manrope:wght@300;400;500;600;700;800&family=Oswald:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* warm-toned blacks/bones */
  --hench-ink: #0a0907;            /* deepest black, hint of warm */
  --hench-ink-2: #131110;          /* card / hover surface */
  --hench-bone: #ece6d6;           /* primary text */
  --hench-bone-mute: #9a9388;      /* secondary text */
  --hench-bone-dim: #595449;       /* tertiary / dividers */
  --hench-rule: rgba(236, 230, 214, 0.14);

  /* accents — same chroma, different hues */
  --hench-amber: #d4a14a;
  --hench-amber-soft: #b48835;
  --hench-blood: #c34a2e;
  --hench-blood-soft: #a13a22;

  --hench-accent: var(--hench-amber);
  --hench-accent-soft: var(--hench-amber-soft);

  --hench-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --hench-sans: 'Commissioner', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hench-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Theme switch via [data-accent="blood"] */
[data-accent="blood"] {
  --hench-accent: var(--hench-blood);
  --hench-accent-soft: var(--hench-blood-soft);
}

/* ----- Base reset for hench surfaces ---------------------------------- */
.hench-surface,
.hench-surface * {
  box-sizing: border-box;
}
.hench-surface {
  font-family: var(--hench-sans);
  background: var(--hench-ink);
  color: var(--hench-bone);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Top page-nav (003 — 004 — ...) --------------------------------- */
.hench-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  font-family: var(--hench-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--hench-bone-mute);
  border-bottom: 1px solid var(--hench-rule);
  background: var(--hench-ink);
}
.hench-nav__center {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hench-nav__arrow,
.hench-nav__home {
  background: transparent;
  border: 0;
  color: var(--hench-bone-mute);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
  transition: color .15s, background .15s;
}
.hench-nav__arrow:hover,
.hench-nav__home:hover { color: var(--hench-bone); background: rgba(236,230,214,0.06); }
.hench-nav__pages {
  display: flex;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  align-items: baseline;
}
.hench-nav__page {
  background: transparent;
  border: 0;
  color: var(--hench-bone-dim);
  font: inherit;
  cursor: pointer;
  padding: 2px 4px;
  transition: color .15s;
}
.hench-nav__page:hover { color: var(--hench-bone-mute); }
.hench-nav__page--active { color: var(--hench-accent); }
.hench-nav__sep { color: var(--hench-bone-dim); user-select: none; }

/* ----- Editorial type ------------------------------------------------- */
.hench-deck {
  font-family: var(--hench-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--hench-accent);
  letter-spacing: -0.01em;
  line-height: 1.18;
}
.hench-body {
  font-family: var(--hench-sans);
  font-weight: 400;
  color: var(--hench-bone);
  line-height: 1.55;
  letter-spacing: -0.003em;
}
.hench-body strong,
.hench-body b {
  font-weight: 700;
  color: var(--hench-bone);
}
.hench-body em {
  font-family: var(--hench-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.08em;
  letter-spacing: 0;
}
.hench-body p + p { margin-top: 1em; }

/* ----- The big HENCH letters ------------------------------------------ */
.hench-monogram {
  font-family: var(--hench-serif);
  font-weight: 600;
  font-style: normal;
  color: var(--hench-ink);
  letter-spacing: -0.04em;
  line-height: 0.82;
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
}

/* ----- image-slot defaults ------------------------------------------- */
image-slot {
  background: #1a1714;
  --is-empty-bg: #1a1714;
  --is-empty-color: #4a4338;
  --is-empty-border: 1px dashed rgba(236, 230, 214, 0.10);
}

/* utility */
.hench-rule { height: 1px; background: var(--hench-rule); border: 0; margin: 0; }
.hench-corner-mark {
  font-family: var(--hench-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--hench-bone-dim);
  text-transform: uppercase;
}