/* HOC Build — shared design tokens
   Cool editorial off-white, deep ink, single muted clay accent.
   All variants share these — only typography/layout shifts per direction. */

:root {
  /* Surfaces — cool bone */
  --bg:        oklch(0.972 0.004 240);   /* page */
  --bg-2:      oklch(0.948 0.006 240);   /* slightly deeper panels */
  --bg-3:      oklch(0.915 0.008 240);   /* deeper still */
  --paper:     oklch(0.990 0.003 240);   /* card / pure paper */

  /* Inks — deep blue-black */
  --ink:       oklch(0.180 0.022 250);
  --ink-2:     oklch(0.345 0.020 250);
  --ink-3:     oklch(0.520 0.015 248);
  --ink-4:     oklch(0.680 0.012 245);

  /* Hairlines */
  --rule:      oklch(0.860 0.007 245);
  --rule-2:    oklch(0.780 0.009 245);

  /* Accent — muted clay (the one warm note) */
  --clay:      oklch(0.605 0.095 42);
  --clay-deep: oklch(0.430 0.082 38);
  --clay-tint: oklch(0.945 0.020 50);

  /* Inverse — for dark sections in V1 / V4 */
  --dark:      oklch(0.165 0.025 252);
  --dark-2:    oklch(0.235 0.022 252);
  --on-dark:   oklch(0.945 0.006 240);
  --on-dark-2: oklch(0.780 0.008 245);

  /* Type families */
  --f-serif:   "Instrument Serif", "Source Serif 4", Georgia, serif;
  --f-news:    "Newsreader", "Source Serif 4", Georgia, serif;
  --f-sans:    "Geist", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}

/* Reset within artboards */
.hoc-art *,
.hoc-art *::before,
.hoc-art *::after { box-sizing: border-box; }

.hoc-art {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.hoc-art a { color: inherit; text-decoration: none; }

/* Reusable element families ------------------------------------------ */

.hoc-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}

.hoc-rule {
  height: 1px;
  background: var(--rule);
  border: 0;
}

.hoc-rule-2 {
  height: 1px;
  background: var(--rule-2);
  border: 0;
}

/* Brandmark — HOC monogram lockup (no logo file; type-set) */
.hoc-mark {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hoc-mark::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--clay);
  display: inline-block;
}

/* image-slot — styled to look editorial, not utilitarian */
image-slot {
  background: var(--bg-3);
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: block;
}

/* Buttons */
/* .hoc-art a { color: inherit } would override these — scope the rules so
   they beat the ancestor selector for <a class="hoc-btn"> usage. */
.hoc-art .hoc-btn,
.hoc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, transform .15s;
  text-decoration: none;
}
.hoc-art .hoc-btn:hover,
.hoc-btn:hover { background: var(--clay-deep); color: var(--bg); }

.hoc-art .hoc-btn-ghost,
.hoc-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-2);
}
.hoc-art .hoc-btn-ghost:hover,
.hoc-btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.hoc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-sans);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .15s;
}
.hoc-link:hover { color: var(--clay-deep); }

/* Pull-quote arrow glyph */
.hoc-arrow::after {
  content: "→";
  display: inline-block;
  margin-left: 4px;
  font-weight: 400;
}