.entry-header {
  padding: 8em 2em 3em;
  max-width: 760px;
  margin: 0 auto;
}

.breadcrumb {
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.2em;
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text);
}

.breadcrumb span {
  margin: 0 0.5em;
  opacity: 0.4;
}

.entry-header h1 {
  font-size: clamp(2em, 5vw, 3.2em);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 0.4em;
}

.entry-header .lead {
  font-size: 1.15em;
  color: var(--text-muted);
  max-width: 600px;
}

.entry-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2em 5em;
}

.entry-content h2 {
  font-size: 1.4em;
  font-weight: 700;
  margin: 2.5em 0 0.6em;
}

.entry-content p {
  color: var(--text-muted);
  margin-bottom: 1em;
  font-size: 1.02em;
}

/* Links inside list items need naming too. This selector was `p a` alone for a
   long time, and every link that happened to sit in an <li> rendered in
   browser-default blue against the dark page. `.related-list a` below still
   wins for the related-terms block, which is inside .entry-content as well. */
.entry-content p a,
.entry-content li a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

.entry-content ul,
.entry-content ol {
  list-style: none;
  margin-bottom: 1em;
}

.entry-content ul li,
.entry-content ol li {
  position: relative;
  padding-left: 1.4em;
  color: var(--text-muted);
  font-size: 1em;
  margin-bottom: 0.35em;
}

.entry-content ul li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.entry-content ol {
  counter-reset: ol-counter;
}

.entry-content ol li {
  counter-increment: ol-counter;
}

.entry-content ol li::before {
  content: counter(ol-counter) ".";
  position: absolute;
  left: 0;
  color: var(--warm);
  font-weight: 700;
  font-size: 0.85em;
}

/* Inline literals -- a cookie name, a hostname, a fragment of a hash. The
   glossary entries have never needed one; the privacy page, which shares this
   stylesheet, is full of them, and unstyled <code> falls back to a browser
   default monospace that sizes itself well below the surrounding text. em
   rather than a fixed size so it tracks whatever it is sitting inside. */
.entry-content code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.3em;
  padding: 0.1em 0.35em;
  /* These are identifiers, not prose: better to scroll one than to have
     __oppref hyphenate itself across a line break on a phone. */
  overflow-wrap: break-word;
}

.callout {
  border-left: 3px solid var(--accent);
  padding: 1em 1.4em;
  background: var(--surface);
  border-radius: 0 0.4em 0.4em 0;
  margin: 1.5em 0;
}

.callout p {
  margin: 0;
  font-size: 0.97em;
}

/* ---------------------------------------------------------------------------
   The privacy request form.

   Here rather than in index.css because the privacy page runs on the glossary
   layout and never loads index.css -- which is also why .signup's rules,
   including its honeypot, are unavailable and repeated in miniature below.
   Deliberately plainer than the landing page's signup: this is a form somebody
   fills in because they have to, not one being sold to them.
   --------------------------------------------------------------------------- */
.request {
  max-width: 480px;
  margin: 1.5em 0 0;
}

.request label {
  display: block;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--text);
  margin: 1.2em 0 0.4em;
}

.request label .optional {
  font-weight: 400;
  color: var(--text-muted);
}

.request input[type="email"],
.request select,
.request textarea {
  width: 100%;
  padding: 0.7em 0.8em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4em;
  color: var(--text);
  /* Inputs do not inherit the page font, and 16px is the floor below which
     iOS Safari zooms the viewport on focus and does not zoom back out. */
  font-family: inherit;
  font-size: 16px;
}

.request textarea {
  resize: vertical;
  min-height: 5em;
}

.request select {
  /* Safari ignores the colours above on a select unless appearance is reset,
     and then draws no arrow, so one is supplied. */
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.1em) 1.25em, calc(100% - 0.75em) 1.25em;
  background-size: 0.35em 0.35em, 0.35em 0.35em;
  background-repeat: no-repeat;
  padding-right: 2.4em;
}

.request input:focus-visible,
.request select:focus-visible,
.request textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.request button {
  margin-top: 1.4em;
}

.request button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.request-status {
  margin-top: 1em;
  font-size: 0.95em;
  color: var(--text-muted);
  min-height: 1.4em;
}

.request-status.ok {
  color: var(--text);
}

.request-status.err {
  color: var(--warm);
}

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   computed styles skips a hidden field and fills a visible one. */
.request .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.related {
  border-top: 1px solid var(--border);
  padding-top: 2em;
  margin-top: 3em;
}

.related h3 {
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1em;
}

.related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.related-list a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 2em;
  padding: 0.35em 1em;
  background: var(--surface);
  transition: border-color 200ms;
}

.related-list a:hover {
  border-color: var(--accent);
}

/* .final-cta and .btn-primary both used to be redefined here. They now come
   from headroom.css, which the layout loads on every page under /headroom/ --
   the same rules the landing page's call to action uses, so the two match by
   construction rather than by two copies being kept in step.

   The copy that lived here had drifted: it still pointed at a photograph the
   landing page stopped using and which was deleted from the repo, so this
   block was rendering against a 404. Inheriting means the responsive
   backgrounds come along too -- three sizes by device class, which this never
   had. */

@media (max-width: 640px) {
  .entry-header,
  .entry-content {
    padding-left: 1.2em;
    padding-right: 1.2em;
  }
}