/* bestillverse.com — minimal-note
   Palette: still-water-blue-and-fog. Ornament: a single hairline.
   Nothing in this file is shared with any other site.

   TYPEFACES. The matrix row calls for Newsreader Display and Lexend,
   self-hosted and subset. Licence verification for concrete font artifacts
   is an open pre-deployment item, so this build declares no @font-face and
   carries no binaries; the local stacks below hold the register — a quiet
   text serif over a plain readable sans — until verified files are added. */

:root {
  --fog: #f0f3f5;
  --fog-deep: #dbe2e7;
  --water: #33586e;
  --water-dim: #5a7281;
  --inkwash: #26343d;
  --notewidth: 33rem;
  --note-serif: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --note-sans: "Seravek", "Gill Sans", "Segoe UI", Calibri, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fog);
  color: var(--inkwash);
  font-family: var(--note-sans);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  line-height: 1.7;
}

.crossing {
  max-width: var(--notewidth);
  margin: 0 auto;
  padding: 1.4rem 1.25rem 0;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  display: flex;
  gap: 1.4rem;
}
.crossing a { color: var(--water-dim); text-decoration: none; }
.crossing a:hover, .crossing a:focus { color: var(--water); text-decoration: underline; }
.crossing [aria-current="page"] { color: var(--water); border-bottom: 1px solid var(--water); }

.note {
  max-width: var(--notewidth);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) 1.25rem 3rem;
}
.note h1 {
  font-family: var(--note-serif);
  font-weight: 500;
  color: var(--water);
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 1.25rem;
}
.note h2 {
  font-family: var(--note-serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--water);
  margin: 2.25rem 0 0.6rem;
}
.note h3 {
  font-size: 1rem;
  margin: 1.6rem 0 0.35rem;
  color: var(--water);
}
.note p { margin: 0 0 1.05rem; }
.note q { font-family: var(--note-serif); }
.note q::before, .note q::after { color: var(--water-dim); }

/* the one ornament this site owns */
hr.hairline {
  border: 0;
  height: 1px;
  background: var(--water-dim);
  margin: 2.25rem 0;
}

.soundings {
  font-family: var(--note-serif);
  font-size: 1.12rem;
  margin: 1.4rem 0;
  padding: 0 0 0 1.1rem;
  border-left: 1px solid var(--water);
}
.soundings .mark {
  display: block;
  font-family: var(--note-sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--water-dim);
  margin-top: 0.4rem;
}

.stated {
  background: #ffffff;
  border: 1px solid var(--fog-deep);
  padding: 1rem 1.2rem;
  margin: 0 0 1.25rem;
}

.asked dt {
  font-weight: 600;
  color: var(--water);
  margin: 1.5rem 0 0.3rem;
}
.asked dd { margin: 0; }

.fog-bank {
  border-top: 1px solid var(--water-dim);
  margin-top: 1rem;
  padding: 1.5rem 1.25rem 2.25rem;
}
.fog-bank p {
  max-width: var(--notewidth);
  margin: 0 auto 0.7rem;
  font-size: 0.84rem;
  color: #55636d;
}
.fog-bank a { color: var(--water); }