@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

/*
 * Entwurfswerk mdBook theme
 *
 * Additive theme for mdBook 0.5.x. It intentionally avoids overriding
 * index.hbs so mdBook upgrades keep their navigation and accessibility fixes.
 */

:root {
  --ew-gold: #d6a13a;
  --ew-gold-bright: #e9b94f;
  --ew-gold-muted: #b98831;
  --ew-ivory: #f4efe2;
  --ew-paper: #fbf8f0;
  --ew-paper-2: #f4f0e6;
  --ew-graphite-950: #111418;
  --ew-graphite-900: #171b20;
  --ew-graphite-850: #1c2127;
  --ew-graphite-800: #222830;
  --ew-graphite-700: #313944;
  --ew-graphite-600: #48525f;
  --ew-graphite-500: #657180;

  --font-body: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono-font: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;

  --content-max-width: 940px;
  --sidebar-target-width: 320px;
  --menu-bar-height: 56px;
  --code-font-size: 0.875em;
}

/* Brand the normal light theme instead of replacing mdBook's theme system. */
.light {
  --bg: var(--ew-paper);
  --fg: #292d33;

  --sidebar-bg: #f1ecdf;
  --sidebar-fg: #353b43;
  --sidebar-non-existant: #8a8f94;
  --sidebar-active: #9a6817;
  --sidebar-spacer: #ddd5c6;
  --sidebar-header-border-color: #d3c7b4;

  --scrollbar: #aea596;
  --icons: #69717b;
  --icons-hover: #222830;
  --links: #9a6817;
  --inline-code-color: #815912;

  --theme-popup-bg: #fffaf0;
  --theme-popup-border: #d7cdbd;
  --theme-hover: #eee5d5;

  --quote-bg: #f1eadc;
  --quote-border: var(--ew-gold-muted);
  --warning-border: var(--ew-gold);

  --table-border-color: #ddd4c4;
  --table-header-bg: #eee6d8;
  --table-alternate-bg: #f7f2e8;

  --searchbar-border-color: #cfc4b2;
  --searchbar-bg: #fffdf8;
  --searchbar-fg: #20252b;
  --searchbar-shadow-color: rgba(214, 161, 58, 0.22);
  --searchresults-header-fg: #655f57;
  --searchresults-border-color: #d8cdbb;
  --searchresults-li-bg: #f4eddf;
  --search-mark-bg: #f1ca75;

  --color-scheme: light;
  --overlay-bg: rgba(31, 35, 40, 0.22);
}

/* mdBook's preferred dark theme becomes Entwurfswerk graphite. */
.navy {
  --bg: var(--ew-graphite-900);
  --fg: #ece7dc;

  --sidebar-bg: #12161a;
  --sidebar-fg: #d9d4ca;
  --sidebar-non-existant: #6f7780;
  --sidebar-active: var(--ew-gold-bright);
  --sidebar-spacer: #293039;
  --sidebar-header-border-color: #303843;

  --scrollbar: #66717e;
  --icons: #8b949e;
  --icons-hover: #f4efe2;
  --links: #e5b34d;
  --inline-code-color: #e9bf69;

  --theme-popup-bg: #161b20;
  --theme-popup-border: #39424c;
  --theme-hover: #232a32;

  --quote-bg: #20262d;
  --quote-border: var(--ew-gold-muted);
  --warning-border: var(--ew-gold-bright);

  --table-border-color: #303944;
  --table-header-bg: #242b33;
  --table-alternate-bg: #1b2127;

  --searchbar-border-color: #3b4550;
  --searchbar-bg: #111519;
  --searchbar-fg: #f4efe2;
  --searchbar-shadow-color: rgba(233, 185, 79, 0.18);
  --searchresults-header-fg: #a7afb8;
  --searchresults-border-color: #3a444f;
  --searchresults-li-bg: #20272e;
  --search-mark-bg: #8b651d;

  --color-scheme: dark;
  --overlay-bg: rgba(0, 0, 0, 0.48);
}

html {
  font-family: var(--font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  letter-spacing: -0.006em;
}

/* Blueprint-like page field without making long-form text noisy. */
.content {
  background-image: radial-gradient(
    circle at 1px 1px,
    color-mix(in srgb, var(--fg) 7%, transparent) 1px,
    transparent 0
  );
  background-size: 24px 24px;
}

.content main {
  padding-block-end: 6rem;
}

.content main > :not(.ew-site-header) {
  position: relative;
}

/* Main site header injected with theme/header.hbs. */
.ew-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 2.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--fg) 13%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: 0 14px 40px color-mix(in srgb, #000 8%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ew-site-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: inherit !important;
  text-decoration: none !important;
}

.ew-site-brand img {
  display: block;
  width: min(340px, 44vw);
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

.light .ew-site-brand img {
  filter: invert(86%) sepia(4%) saturate(831%) hue-rotate(348deg)
    brightness(38%) contrast(92%);
}

.ew-site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.ew-site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.45rem;
  color: color-mix(in srgb, var(--fg) 74%, transparent) !important;
  font-family: var(--mono-font);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.ew-site-nav a:hover,
.ew-site-nav a:focus-visible {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--links) !important;
}

.ew-site-nav .ew-download {
  margin-inline-start: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--links) 60%, transparent);
  color: var(--links) !important;
}

/* Make the built-in mdBook chrome feel like the product. */
.menu-bar,
#menu-bar {
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.menu-title {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.sidebar {
  border-inline-end: 1px solid color-mix(in srgb, var(--sidebar-fg) 10%, transparent);
}

.sidebar .chapter li a {
  border-radius: 0.35rem;
}

.sidebar .chapter li a.active {
  font-weight: 650;
}

.sidebar .chapter li a.active::before {
  color: var(--ew-gold);
}

/* Typography */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--font-body);
  letter-spacing: -0.032em;
  text-wrap: balance;
}

main h1 {
  margin-block-start: 0.35rem;
  font-size: clamp(2.35rem, 6vw, 4rem);
  line-height: 0.98;
  font-weight: 700;
}

main h1::after {
  display: block;
  width: 4.4rem;
  height: 0.22rem;
  margin-block-start: 1rem;
  border-radius: 999px;
  background: var(--ew-gold);
  content: "";
}

main h2 {
  margin-block-start: 2.8rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid color-mix(in srgb, var(--fg) 11%, transparent);
  font-size: 1.65rem;
  line-height: 1.15;
}

main h3 {
  margin-block-start: 2rem;
  font-size: 1.2rem;
}

main p,
main li {
  line-height: 1.72;
}

main strong {
  font-weight: 650;
}

main a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

main a:hover {
  text-decoration-thickness: 2px;
}

/* Product-esque callouts using plain Markdown blockquotes. */
main blockquote {
  margin-inline: 0;
  padding: 1rem 1.15rem;
  border-inline-start: 3px solid var(--ew-gold);
  border-radius: 0 0.55rem 0.55rem 0;
}

main blockquote p:first-child {
  margin-block-start: 0;
}

main blockquote p:last-child {
  margin-block-end: 0;
}

/* Code and technical metadata */
code,
pre,
kbd,
samp,
.hljs {
  font-family: var(--mono-font) !important;
}

:not(pre) > code {
  padding: 0.12rem 0.34rem;
  border: 1px solid color-mix(in srgb, var(--fg) 11%, transparent);
  border-radius: 0.32rem;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  font-size: 0.86em;
}

pre {
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 0.7rem;
  box-shadow: 0 12px 28px color-mix(in srgb, #000 9%, transparent);
}

pre code {
  line-height: 1.65;
}

/* Tables */
main table {
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--table-border-color);
  border-radius: 0.65rem;
}

main table th {
  font-family: var(--mono-font);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

main table th,
main table td {
  padding: 0.78rem 0.9rem;
}

/* Search */
#searchbar {
  border-radius: 0.5rem;
  font-family: var(--font-body);
}

.searchresults-outer {
  border-radius: 0.65rem;
}

/* Navigation arrows */
.nav-chapters {
  color: color-mix(in srgb, var(--fg) 50%, transparent);
}

.nav-chapters:hover {
  color: var(--links);
}

/* Home-page polish without requiring custom HTML classes. */
main > h1:first-of-type + p {
  max-width: 48rem;
  font-size: 1.16rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--fg) 76%, transparent);
}

main > h1:first-of-type + p + p {
  max-width: 52rem;
}

/* Horizontal rules become drafting rules. */
main hr {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    var(--ew-gold) 0 4rem,
    color-mix(in srgb, var(--fg) 10%, transparent) 4rem 100%
  );
}

::selection {
  background: color-mix(in srgb, var(--ew-gold) 38%, transparent);
  color: inherit;
}

:focus-visible {
  outline-color: var(--ew-gold) !important;
}

@media (max-width: 920px) {
  .ew-site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ew-site-brand img {
    width: min(360px, 76vw);
  }

  .ew-site-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  :root {
    --page-padding: 12px;
  }

  .ew-site-header {
    margin-block-end: 1.6rem;
    padding: 0.7rem;
  }

  .ew-site-nav {
    gap: 0.05rem;
  }

  .ew-site-nav a {
    padding-inline: 0.48rem;
    font-size: 0.68rem;
  }

  main h1 {
    font-size: clamp(2.15rem, 13vw, 3.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .ew-site-header {
    display: none;
  }

  .content {
    background: none;
  }
}

/* mdBook 0.5 injects header.hbs as the first child of `.page`, and mdBook pulls
   `.page` up under its sticky top bar, so the header lays out above the
   viewport. The offset is visual only (`position: relative`) because the pull is
   not a collapsible margin: the content keeps the layout mdBook gave it, and the
   header takes the space already free above it. */
.page > .ew-site-header {
  position: relative;
  /* Measured against mdBook 0.5.x: `.page` is pulled up 56px and the sticky top
     bar sits at 94..151, so 76px places the header in the free strip above the
     bar (roughly 20..91) without touching the content at 154. Recheck with a
     screenshot when mdBook changes its chrome. */
  top: 76px;
}

/* The 0.5 menu bar is id-prefixed; keep the older selector working too. */
#mdbook-menu-bar-hover-placeholder .menu-bar,
#mdbook-menu-bar.menu-bar {
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}