/* AI Agents — book landing page.
   Palette taken from the book's own (AGENTS.md) and from the cover artwork.
   No web fonts and no external requests of any kind. The only JavaScript is
   the colour-scheme toggle, which is first-party, inline, and stores nothing
   beyond the visitor's own choice of theme. */

/* Source Serif 4, self-hosted. A web font is a third-party request only when a
   third party serves it: this file sits beside the page, so the privacy
   notice's claim that a visit contacts no one but the host still holds. The
   file is variable across weight and optical size, which is why one download
   covers every size and weight here.
   SIL Open Font License 1.1 -- the text is in fonts/OFL.txt. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy-deep: #0a1f38;
  --navy: #143a63;
  --accent: #1d4e89;
  --accent-soft: #dceaf7;
  --tint: #f4f8fc;
  --ink: #14212c;
  --ink-soft: #4a5b6b;
  --page: #ffffff;
  --rule: #dbe4ec;
  --measure: 40rem;   /* reading measure for prose */
  --column: 62rem;    /* the page's single content column */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* The framework diagram is inlined, so its ink is the page's to set. These
     five are the figure's own colours as drawn in the book; the dark scheme
     restates them below. --dia-fill is the box interior, which must read as
     lighter than the band it sits on in either scheme. */
  --dia-strong: #1d4e89;
  --dia-mid:    #3f6a92;
  --dia-line:   #557591;
  --dia-soft:   #a9c3dc;
  --dia-faint:  #c4d7e8;
  --dia-fill:   #ffffff;

  --glow: rgba(29, 78, 137, 0.18);
}

/* Dark scheme. Declared twice so an explicit choice beats the system one:
   the media query applies unless the visitor has picked light, and the
   attribute selector applies whenever they have picked dark. Without the
   `:not()` a visitor on a dark system could not switch to light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #8ab8e8;
    --accent-soft: #1b2f45;
    --tint: #131c26;
    --ink: #dfe7ee;
    --ink-soft: #9fb0bf;
    --page: #0d151d;
    --rule: #223141;
    --dia-strong: #8ab8e8;
    --dia-mid:    #7ea8cf;
    --dia-line:   #7f9db8;
    --dia-soft:   #3d5b78;
    --dia-faint:  #2a4055;
    --dia-fill:   #182430;
    --glow: rgba(138, 184, 232, 0.16);
  }
}

:root[data-theme="dark"] {
  --accent: #8ab8e8;
  --accent-soft: #1b2f45;
  --tint: #131c26;
  --ink: #dfe7ee;
  --ink-soft: #9fb0bf;
  --page: #0d151d;
  --rule: #223141;
  --dia-strong: #8ab8e8;
  --dia-mid:    #7ea8cf;
  --dia-line:   #7f9db8;
  --dia-soft:   #3d5b78;
  --dia-faint:  #2a4055;
  --dia-fill:   #182430;
  --glow: rgba(138, 184, 232, 0.16);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); }


/* --- Top bar -------------------------------------------------------------- */

/* Sticky rather than fixed: it keeps its place in the flow, so nothing has to
   be padded out from underneath it, and the scroll-margin below keeps a
   section heading from landing behind it when an anchor is followed. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  padding: 0.6rem max(1.5rem, calc((100% - var(--column)) / 2));
  background: var(--page);
  border-bottom: 1px solid var(--rule);
}

.topbar-brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.topbar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem clamp(0.75rem, 2vw, 1.4rem);
  margin: 0;
  margin-right: auto;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.topbar-links a {
  text-decoration: none;
  color: var(--ink-soft);
}

.topbar-links a:hover, .topbar-links a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* Clears the sticky bar when a link jumps to a section. */
:target, .band[id] { scroll-margin-top: 4.5rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* At phone width the bar wrapped onto three rows and, being sticky, kept a
   fifth of the screen for itself. One row that scrolls sideways keeps every
   link reachable at a fraction of the height; the wordmark goes, since the
   page title sits right beneath it anyway. */
@media (max-width: 48rem) {
  .topbar { flex-wrap: nowrap; padding-block: 0.45rem; }
  .topbar-brand { display: none; }
  .topbar-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-links::-webkit-scrollbar { display: none; }
  .topbar-links a { white-space: nowrap; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  /* Follows the colour scheme like every other band. It used to stay dark in
     both schemes because the cover was a flat, dark-navy rectangle that
     needed a dark surround to sit in. The cover is now a 3D render already
     cut out on white, so it drops onto a light band without a seam -- and a
     dark slab above light content was the single heaviest thing on the page. */
  background: var(--tint);
  color: var(--ink);
  padding: clamp(2.5rem, 7vw, 5.5rem) 1.5rem;
  border-bottom: 1px solid var(--rule);
  position: relative;   /* anchors .theme-toggle */
}

/* Sits in the top bar now. It used to float over the page, which meant it
   covered text at phone width for the whole scroll; riding along in the bar
   removes that problem instead of working around it. */
.theme-toggle {
  flex: none;
  background: transparent;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.theme-toggle:hover, .theme-toggle:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}


/* The button carries both labels; the scheme in force decides which shows,
   so the label stays right even when the system preference changes under a
   visitor who never pressed it. */
.theme-toggle [data-when="dark"] { display: none; }
:root[data-theme="dark"] .theme-toggle [data-when="light"] { display: none; }
:root[data-theme="dark"] .theme-toggle [data-when="dark"] { display: inline; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle [data-when="light"] { display: none; }
  :root:not([data-theme="light"]) .theme-toggle [data-when="dark"] { display: inline; }
}

.hero-inner {
  max-width: 62rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-text { flex: 1 1 22rem; }

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.subtitle {
  margin: 0.75rem 0 0;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-soft);
}

.authors {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  color: var(--ink-soft);
}

.foreword-by {
  margin: 0.6rem 0 0;
  max-width: 32rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.lede {
  margin: 1.75rem 0 0;
  max-width: 32rem;
  font-size: 1.0625rem;
  color: var(--ink);
}

.hero-cover { flex: 0 1 17rem; margin-inline: auto; }

.hero-cover img {
  display: block;
  width: 100%;
  /* No box-shadow and no radius: the cover is a cut-out render with its own
     shadow already in the pixels. CSS would draw a second one around the
     element's rectangle instead of around the book, which on a tinted band
     reads as a pale slab behind it. */
}

/* --- Sections ------------------------------------------------------------ */

/* One column for the whole page. The centring lives in the section's own
   inline padding rather than in `margin-inline: auto` on each child, so that
   every block shares one left edge no matter how wide it is: prose stops at
   the reading measure, grids run the full column, and both start in the same
   place. Centring each child individually instead gives each width its own
   left edge, which reads as ragged indentation down the page. */
.band {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  padding-inline: max(1.5rem, calc((100% - var(--column)) / 2));
}
.band.alt { background: var(--tint); }

.band > * { max-width: var(--measure); }

.band h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.band p { margin: 0 0 1.15rem; }
.band p:last-child { margin-bottom: 0; }

.intro { color: var(--ink-soft); }

/* --- Contents ------------------------------------------------------------ */

/* Wider than the prose measure and narrower than the column: each row is a
   number, a title, and a line about the chapter, and that reads badly both
   cramped into three columns and stretched across the full width. */
.contents-list { max-width: 46rem; margin-top: 2.25rem; }

/* The Roman numeral is the key back to the figure above, which carries the
   same Part I / II / III labels inside it. No colour key: the figure is drawn
   in one blue in the book, and inventing a second scheme here would tie the
   two together with a correspondence the diagram does not actually have. */
.part-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 2.5rem 0 0.25rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.part-head:first-child { margin-top: 0; }

.part-no {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

ol.toc {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 0.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}

.toc li:last-child { border-bottom: 1px solid var(--rule); }

.ch-no {
  grid-row: 1 / span 2;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--accent);
  text-align: right;
  padding-right: 0.25rem;
}

.ch-name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.ch-blurb {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --- Quotes -------------------------------------------------------------- */

.quote { margin: 0 0 2rem; }
.quote:last-child { margin-bottom: 0; }

.quote blockquote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
  font-size: 1.125rem;
  line-height: 1.5;
}

.quote figcaption {
  margin-top: 0.75rem;
  padding-left: calc(1.25rem + 3px);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* --- Authors ------------------------------------------------------------- */

.authors-grid {
  max-width: 56rem;  /* narrower than the column, still flush left */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2.5rem;
}

.bio-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}

/* Served square and masked here rather than cropped to a circle in the file,
   so the same asset stays usable if the shape ever changes. */
.portrait {
  width: 7rem;
  height: 7rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.bio h3 { margin: 0; font-size: 1.125rem; }

/* The photographer's credit, once for both portraits. It is not centred:
   every block on this page shares one left edge, and centring this one
   alone would read as a stray indent. Instead it spans the grid's width
   under a hairline, which is what makes it belong to both columns rather
   than to the left one it happens to sit beneath. */
.credit {
  max-width: 56rem;
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.bio p { font-size: 1rem; color: var(--ink-soft); }
.bio-links {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.9375rem;
}

.bio-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.bio-links a:hover, .bio-links a:focus-visible { text-decoration: underline; }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  /* The glyphs sit on the text baseline rather than the line box, which is
     what keeps them level with the label at any font size. */
  vertical-align: -0.125em;
}

/* --- Material cards ------------------------------------------------------ */

.cards {
  max-width: 56rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.card {
  display: block;
  padding: 1.5rem;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.card:hover, .card:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.card h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; color: var(--accent); }
.card p { margin: 0; font-size: 0.9688rem; color: var(--ink-soft); }

/* --- Footer -------------------------------------------------------------- */

footer {
  padding: 2.5rem 1.5rem 3.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

footer p { margin: 0 0 0.4rem; }

/* The German legal term beside the English heading: quieter than the title
   it sits next to, because it is a signpost for German visitors rather than
   a second heading. */
.alt-title {
  font-weight: 400;
  font-size: 0.8em;
  color: var(--ink-soft);
}

/* --- Serif ---------------------------------------------------------------- */

/* Headings, the hero title and the pull quotes take the serif; running text,
   navigation and labels stay in the system sans, which is more legible at
   body size and costs nothing to load. */
.topbar-brand,
.hero h1,
.subtitle,
.band h2,
.band h3,
.quote blockquote {
  font-family: var(--serif);
}

.hero h1 { font-weight: 600; letter-spacing: -0.015em; }
.quote blockquote { font-size: 1.1875rem; line-height: 1.55; }

/* Headlines that break into two lines now break evenly instead of leaving a
   single word stranded. Ignored by browsers that do not know it. */
.hero h1, .subtitle, .band h2, .band h3, .part-head, .ch-name, .intro {
  text-wrap: balance;
}

/* A short rule under each section heading, in the cover's blue. */
.band h2 { margin-bottom: 1.1rem; }

.band h2::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--accent);
  border-radius: 1px;
}

/* --- The framework figure -------------------------------------------------- */

.figure { margin: 2.25rem 0 0; max-width: 34rem; }

.framework {
  display: block;
  width: 100%;
  height: auto;
  font-size: 13px;   /* the diagram's text is sized in user units */
}

.figure figcaption {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Cover ---------------------------------------------------------------- */

/* A soft light behind the render, in the navy of the cover artwork. The glow
   is a pseudo-element rather than a box-shadow so it follows the book's shape
   loosely instead of outlining the element's rectangle. */
.hero-cover { position: relative; }

.hero-cover::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  z-index: 0;
  pointer-events: none;
}

.hero-cover img { position: relative; z-index: 1; }

/* --- Footer note ----------------------------------------------------------- */

.footer-note {
  max-width: 34rem;
  margin-inline: auto;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* --- Selection and focus ---------------------------------------------------- */

::selection { background: var(--accent-soft); color: var(--ink); }

/* One visible focus ring everywhere, for keyboard users only. The default in
   several browsers is a hairline that disappears against the tinted bands. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Reveal on scroll -------------------------------------------------------- */

/* The class is added by script, so a visitor without JavaScript never gets a
   hidden section; and the whole effect is behind a motion query. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* --- Code listing ---------------------------------------------------------- */

.listing { margin: 2rem 0 0; max-width: 40rem; }

.listing pre {
  margin: 0;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  background: var(--page);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  /* Nine lines are not worth a sideways scroll. The longest is 46 characters,
     so on a narrow screen the type shrinks just enough for it to fit rather
     than making the reader drag the block around. */
  font-size: clamp(0.72rem, 2.9vw, 0.875rem);
  line-height: 1.65;
}

.listing code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
}

/* Highlighted by hand, in the page's own palette. Three classes are the whole
   scheme: a keyword, a call, and a comment. Anything finer would need a
   highlighter, and a highlighter would need a script the page does not load. */
.listing .k { color: var(--accent); font-weight: 600; }
.listing .f { color: var(--ink); font-weight: 600; }
.listing .c { color: var(--ink-soft); font-style: italic; }

.listing figcaption {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}