/* Fabula — Sumi & Washi tokens (D direction, locked) */

:root {
  --sw-bg: oklch(0.992 0.002 85);
  --sw-bg-2: oklch(0.975 0.003 85);
  --sw-bg-3: oklch(0.958 0.003 85);

  --sw-ink: oklch(0.20 0.005 250);
  --sw-ink-2: oklch(0.42 0.006 250);
  --sw-ink-3: oklch(0.62 0.005 250);
  --sw-ink-4: oklch(0.78 0.005 250);

  --sw-line: oklch(0.86 0.005 85);
  --sw-line-2: oklch(0.92 0.004 85);

  --sw-accent: oklch(0.42 0.08 245);
  --sw-accent-soft: oklch(0.94 0.02 245);

  --sw-serif: "Shippori Mincho", "Noto Serif JP", serif;
  --sw-sans: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --sw-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body.sw-reset {
  margin: 0;
  background: var(--sw-bg);
  color: var(--sw-ink);
  font-family: var(--sw-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}

.sw-frame {
  background: var(--sw-bg);
  color: var(--sw-ink);
  font-family: var(--sw-sans);
  overflow: hidden;
  position: relative;
}
.sw-mono { font-family: var(--sw-mono); letter-spacing: .04em; }
.sw-serif { font-family: var(--sw-serif); font-weight: 400; }

.sw-label {
  font-family: var(--sw-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sw-ink-3);
}

.sw-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--sw-ink); text-decoration: none;
  border: 1px solid var(--sw-ink); padding: 12px 26px; border-radius: 999px;
  background: transparent; cursor: pointer; font-family: inherit;
  transition: background .2s, color .2s;
}
.sw-cta:hover { background: var(--sw-ink); color: var(--sw-bg); }
.sw-cta-filled { background: var(--sw-ink); color: var(--sw-bg); }
.sw-cta-filled:hover { background: var(--sw-accent); border-color: var(--sw-accent); }
.sw-cta-ghost { border: none; padding: 0; color: var(--sw-ink-2); }
.sw-cta-ghost:hover { color: var(--sw-ink); background: transparent; }

.sw-arrow {
  display: inline-block; width: 14px; height: 1px; background: currentColor;
  position: relative; transition: width .2s;
}
.sw-arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.sw-cta:hover .sw-arrow { width: 20px; }

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

/* ── Brand wordmark — 03 Industrial Sans (Inter Bold, tracked caps) ── */
/* Higher specificity than .brand / .footer-brand .b so it overrides
   the inline serif rules already present in each page's <style>. */
a.brand {
  font-family: var(--sw-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-left: 0.32em;
  color: var(--sw-ink);
  text-decoration: none;
}
.footer-brand div.b {
  font-family: var(--sw-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-left: 0.32em;
  color: var(--sw-ink);
}
@media (max-width: 768px) {
  a.brand { font-size: 12px; }
  .footer-brand div.b { font-size: 14px; }
}