/* ============================================================
  commonform studio · site stylesheet
  shared base for both directions A and B
  ============================================================ */

@font-face {
  font-family: 'Pally';
  src: url('fonts/Pally-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pally';
  src: url('fonts/Pally-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neco';
  src: url('fonts/Neco-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neco';
  src: url('fonts/Neco-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neco';
  src: url('fonts/Neco-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Palette */
  --olive:  #646C5A;
  --olive-dark:  #3E4436;
  --olive-light:  #8B9478;
  --olive-muted:  #C4CAB8;
  --offwhite:  #F8F7F2;
  --cream:  #EFEDE6;
  --charcoal:  #1E1E1E;
  --charcoal-mid: #3A3A3A;
  --charcoal-light: #6B6B6B;

  /* Type */
  --font-display: 'Pally', system-ui, sans-serif;
  --font-body:  'Neco', 'Times New Roman', serif;
  --font-mono:  'DM Mono', monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Theme - default Direction A (cinematic dark) */
  --bg: var(--charcoal);
  --bg-alt: var(--charcoal-mid);
  --fg: var(--offwhite);
  --fg-dim: var(--olive-light);
  --fg-faint: var(--charcoal-mid);
  --rule: rgba(248, 247, 242, 0.12);
  --accent: var(--olive-light);
}

[data-direction="b"] {
  --bg: var(--offwhite);
  --bg-alt: var(--cream);
  --fg: var(--charcoal);
  --fg-dim: var(--charcoal-mid);
  --fg-faint: var(--charcoal-light);
  --rule: rgba(30, 30, 30, 0.12);
  --accent: var(--olive);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background 0.6s var(--ease), color 0.6s var(--ease);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Headings always Pally; body always Neco. Reserved for direct use. */
.h-display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}
.body-lg { font-family: var(--font-body); font-size: 19px; line-height: 1.55; }
.body-md { font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.body-sm { font-family: var(--font-body); font-size: 14px; line-height: 1.6; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}