/* Page chrome for the landing page and every page around it: the running
   head, the colophon, legal pages, and the small thanks / not-found pages.
   The rules are in DESIGN.md: rules and type, no cards, no shadows. */

/* ---------- running head ---------- */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--paper);
  border-block-end: var(--line-ink);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: var(--s6);
  block-size: 64px;
}
.nav-links { display: flex; gap: var(--s5); flex: 1; }
.nav-links a {
  font-size: .95rem;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 4px;
  border-block-end: 1.5px solid transparent;
  transition: color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.nav-links a:hover { color: var(--ink); border-block-end-color: var(--ink); }
.nav-links a.is-here { color: var(--ink); border-block-end-color: var(--ink); }

.nav-tools { display: flex; align-items: center; gap: var(--s4); margin-inline-start: auto; flex: none; }
.nav-text, .nav-icon {
  all: unset;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  min-inline-size: 32px;
  block-size: 32px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-2);
}
.nav-text:hover, .nav-icon:hover { color: var(--ink); }
.nav-text:focus-visible, .nav-icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav-icon .ico { inline-size: 20px; block-size: 20px; }

@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 520px) {
  .nav-in { gap: var(--s3); block-size: 56px; }
  .nav-tools { gap: var(--s3); }
  .nav-tools .btn { padding-inline: var(--s3); }
}

/* a text link with a direction to it */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.link-arrow::after { content: "\2190"; text-decoration: none; display: inline-block; }
:root[dir="ltr"] .link-arrow::after { content: "\2192"; }
.link-arrow:hover { text-decoration-thickness: 2px; }
.link-arrow--btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
.link-arrow--btn::after { content: "\2190"; }
:root[dir="ltr"] .link-arrow--btn::after { content: "\2192"; }
.link-arrow--btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- colophon ---------- */

.foot { border-block-start: var(--line-ink); padding-block: var(--s7) var(--s6); margin-block-start: var(--s8); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); }
.foot-brand .logo-word { font-size: 1.9rem; margin-block-end: var(--s3); }
.foot-brand p:last-child { color: var(--ink-2); max-inline-size: 36ch; font-size: .95rem; }
.foot-col { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.foot-h { font-weight: 600; font-size: .9rem; margin: 0 0 var(--s2); }
.foot-col a { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s6);
  margin-block-start: var(--s7); padding-block-start: var(--s4);
  border-block-start: var(--line);
  font-size: .85rem; color: var(--ink-3);
}
.foot-base p { margin: 0; }
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* the last line of every page: who made it */
.credit { margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: var(--line); }
.credit p { margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--ink); }

/* ---------- legal pages ---------- */

.doc { padding-block: var(--s7) var(--s8); }
.doc-head { border-block-end: var(--line-ink); padding-block-end: var(--s5); margin-block-end: var(--s7); }
.doc-head .tag { margin-block-end: var(--s3); }
.doc-head h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); }
.doc-head .updated { margin: var(--s3) 0 0; color: var(--ink-2); font-size: .9rem; }
.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: var(--s8); align-items: start; }
.toc { position: sticky; inset-block-start: 96px; }
.toc p { font-weight: 600; font-size: .9rem; margin-block-end: var(--s3); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-inline-start: var(--line); }
.toc a {
  display: flex; gap: var(--s2);
  padding: 6px var(--s3);
  margin-inline-start: -1px;
  border-inline-start: 1.5px solid transparent;
  font-size: .92rem; line-height: 1.5; color: var(--ink-2); text-decoration: none;
}
.toc a::before { counter-increment: toc; content: counter(toc); font-family: var(--mono); font-size: .78rem; color: var(--ink-3); min-inline-size: 1.2em; }
.toc a:hover { color: var(--ink); }
.toc a.is-here { color: var(--ink); border-inline-start-color: var(--ink); font-weight: 600; }

.prose h2 { font-size: 1.9rem; margin-block: var(--s7) var(--s3); scroll-margin-block-start: 90px; }
.prose > h2:first-child, .prose p:first-child + h2 { margin-block-start: var(--s6); }
.prose p, .prose li { color: var(--ink-2); font-size: 1.02rem; }
.prose ul { padding-inline-start: 1.2em; margin-block-end: var(--s4); }
.prose li { margin-block-end: var(--s2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); }

@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .toc { position: static; }
}

/* ---------- thanks and not found ---------- */

.stub { padding-block: var(--s8); }
.stub-in { max-inline-size: 720px; }
.stub .tag { margin-block-end: var(--s4); }
.stub h1 { font-size: clamp(2.8rem, 7.5vw, 4.8rem); margin-block-end: var(--s5); }
.stub p { color: var(--ink-2); font-size: 1.1rem; max-inline-size: 46ch; margin-block-end: var(--s6); }
.stub-cta { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
.stub-art { display: none; }

/* ---------- section spy only; nothing fades in on scroll ---------- */
[data-reveal] { opacity: 1; transform: none; }

/* the secondary pages carry an older footer markup: same look, same rules */
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.foot-col h3 { font-family: var(--sans); font-weight: 600; font-size: .9rem; margin: 0 0 var(--s2); }
.foot-brand .logo { margin-block-end: var(--s3); }
.foot-brand .logo-word { font-size: 1.9rem; }
.foot-brand .btn { margin-block-start: var(--s3); }
.foot-ltr { direction: ltr; unicode-bidi: isolate; }
.wrap > .nav-in { padding-inline: 0; }