/* Variant B: the shared page set in the look of dhcraft.org (src/styles/global.css and the
   Nav, Hero, Services and Contact components of DigitalHumanitiesCraft/dhcraft-site).
   Loaded after style.css and left unlayered, so every rule here wins over the layered base.
   The kicker labels of dhcraft.org are left out, because the house rules ban eyebrows. */

@font-face { font-family: "Sora"; src: url("fonts/sora-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* dhcraft.org has no dark theme, so this variant stays light. */
  color-scheme: light;

  --paper: oklch(99.1% 0.005 95.1); /* #fdfcf8 */
  --red: oklch(64.6% 0.138 334.4); /* #c06bb0 */
  --orange: oklch(74.2% 0.138 69.3); /* #e39a3b */
  --yellow: oklch(82% 0.128 77.5); /* #f2b95c */
  --green: oklch(63.5% 0.136 139.3); /* #5c9e4a */
  --cyan: oklch(77.7% 0.161 120.4); /* #a9c53d */
  --blue: oklch(73.9% 0.083 252.8); /* #85aede */
  --purple: oklch(53.1% 0.14 315); /* #8a4fa3 */
  --pink: oklch(64.6% 0.138 334.4); /* #c06bb0 */

  --bg: var(--paper);
  --surface: white;
  --raised: white;
  --text: var(--ink);
  --text-muted: oklch(28.3% 0.064 270.7 / 0.74);
  --rule: oklch(28.3% 0.064 270.7 / 0.1);
  --link: var(--purple);
  --focus: var(--purple);
  --warn-bg: oklch(95% 0.05 75);
  --grid: transparent;

  --font-display: "Sora", system-ui, sans-serif;
  --font-mono: "Instrument Sans", system-ui, sans-serif;

  --step-2: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
  --step-3: clamp(2.3rem, 1.6rem + 3vw, 3.4rem);
  --radius: 1rem;
  --radius-control: 999px;
  --shadow: 0 1.5rem 3rem -1.5rem oklch(28.3% 0.064 270.7 / 0.18);
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 1.2rem; font-weight: 700; }

.site-header {
  border-block-end: 1px solid var(--rule);
  &::after { display: none; }
}

.brand {
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;

  & img { inline-size: 2.4rem; block-size: 2.4rem; }
}

.brand .accent { color: var(--purple); }

.paren { font-style: normal; font-weight: inherit; }

.bang { background: none; color: var(--purple); -webkit-background-clip: border-box; background-clip: border-box; }

.site-nav a { font-size: 0.94rem; }
.site-nav a:hover { color: var(--purple); text-decoration: none; }
.site-nav .nav-cta:hover { background: var(--purple); }

/* Hero after the dhcraft.org pattern: one extra-bold statement with a purple second line. */
.hero {
  &::before {
    background: radial-gradient(ellipse 40rem 28rem at 82% 30%, oklch(53.1% 0.14 315 / 0.1), transparent 68%);
    mask-image: none;
    filter: blur(30px);
  }

  & h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.06;
  }
}

.accent-line { display: block; color: var(--purple); font-size: 0.62em; margin-block-start: 0.35em; }

.lede { font-size: 1.125rem; line-height: 1.65; color: var(--text-muted); }

.button {
  border-width: 1.5px;
  &.primary:hover { background: var(--purple); border-color: var(--purple); }
  &:not(.primary):hover { border-color: var(--purple); color: var(--purple); }
}

.pane-label, .app-label, .fig-caption span, .tags li, .state-label { font-family: var(--font-body); }
.pane-label { border-radius: 999px; font-weight: 600; }
.fig-caption span { font-weight: 700; }

.section.tinted { background: white; border-block-start: 1px solid var(--rule); }

.section-title { font-weight: 700; }

/* Cards as in the services grid of dhcraft.org. */
.abilities li, .method, .claims > div {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.abilities li:hover, .method:hover {
  border-color: oklch(53.1% 0.14 315 / 0.35);
  box-shadow: 0 0.75rem 2rem oklch(28.3% 0.064 270.7 / 0.08);
}

.section.tinted .abilities li, .section.tinted .method { background: var(--paper); }

/* The hexagon of the logo as the recurring icon shape. */
.ability-icon {
  inline-size: 3rem;
  block-size: 3.3rem;
  padding: 0.75rem;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--c);
  stroke: white;
}

.abilities li:nth-child(1) { --c: var(--purple); }
.abilities li:nth-child(2) { --c: var(--purple); }
.abilities li:nth-child(3) { --c: var(--purple); }
.abilities li:nth-child(4) { --c: var(--ink); }
.abilities li:nth-child(5) { --c: var(--ink); }
.abilities li:nth-child(6) { --c: var(--ink); }

.ability-name { font-size: 1.05rem; font-weight: 700; }

.method { padding: var(--space-m); }
.method .diagram { background: white; }

.claims > div { padding: var(--space-m) var(--space-m) var(--space-m) var(--space-m); border-inline-start: 4px solid var(--c); }
.claims dt { font-weight: 700; font-size: 1.15rem; }

.tags li { border-radius: 999px; background: white; }

.state-label { background: var(--purple); color: white; border-radius: 999px; padding: 0 0.55rem; }

.shot { border-radius: 1rem; }

.clients ul { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }

.steps li::before { background: var(--purple); color: white; }

/* Contact as on dhcraft.org: light ground with a purple wash instead of the dark band. */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--text);

  &::before {
    content: "";
    position: absolute;
    inset: -5rem;
    background: radial-gradient(ellipse 35rem 25rem at 50% 40%, oklch(53.1% 0.14 315 / 0.12), transparent 68%);
    filter: blur(32px);
    pointer-events: none;
  }

  & .wrap { position: relative; }
  & .billing { color: var(--text-muted); }
}

.path {
  background: white;
  box-shadow: 0 0 0 1px var(--rule);

  & h3 { color: var(--text); }
  & > p { color: var(--text-muted); }
}

.ask li::before { color: var(--purple); }

.button.on-dark { background: var(--ink); color: white; border-color: var(--ink); }
.button.on-dark:hover { background: var(--purple); border-color: var(--purple); color: white; }
.button.on-dark-ghost { color: var(--text); border-color: var(--rule); }
.button.on-dark-ghost:hover { border-color: var(--purple); color: var(--purple); }

.tool h3 { font-size: var(--step-2); }
.method h3 { font-size: 1.35rem; }

/* The motif in the watercolour palette, softened like the hero wash of dhcraft.org. */
.m-band { opacity: 0.7; }
.m-prism { fill: white; stroke: var(--ink); }